Developing for React Native

MobileFirst Platform Foundation 上で React Native を使用した開発を素早く開始するには、以下のステップに従ってください。

このクイック・スタート・チュートリアルの目的は、単純なエンドツーエンド・フローを説明することです。

Github にサンプル・アプリケーションが用意されています。このサンプルがダウンロードされ、MobileFirst Server に登録されます。提供されるアダプター (または新規アダプター) が MobileFirst Operations Console にデプロイされます。アプリケーション・ロジックはリソース要求を行うように変更されます。

予期される結果: MobileFirst Server を正常に ping し、アダプターを使用してデータを正常に取得する。

ステップ 1: MobileFirst Server の開始

Mobile Foundation のインスタンスを作成済みであることを確認します。あるいは、MobileFirst Developer Kit を使用している場合は、サーバーのフォルダーに移動し、コマンド ./run.sh (Mac および Linux) または run.cmd (Windows) を実行します。

ステップ 2: React Native SDK の追加

ステップ 2.1: Github からReact Native サンプル・アプリケーションをダウンロードします。

ステップ 2.2: ダウンロードした React Native サンプル・アプリケーションに React Native SDK を追加します。

React Native 用の MobileFirst SDK は NPM から React Native モジュールとして入手できます。

1. ダウンロードした React Native プロジェクトのルートに移動し、MobileFirst core React Native プラグインを追加し、React Native プロジェクトのルートにディレクトリーを変更します: cd MFPStarterReactNative
2. NPM CLI コマンド npm install react-native-plugin-name を使用して、MobileFirst プラグインを追加します。
   以下に例を示します。

           npm install react-native-ibm-mobilefirst --save
         

   上記のコマンドは、MobileFirst Core SDK プラグインを React Native プロジェクトに追加します。

3. すべてのネイティブ依存関係をアプリにリンクします。
   

           react-native link
         

ステップ 2.3: プラットフォーム固有の追加ステップ

Android

      <![CDATA[
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS

ステップ 3: アプリケーションの登録

1. コマンド・ライン・ウィンドウを開き、プロジェクトの特定のプラットフォームのルート (iOS または Android) に移動します。

           cd ios
         

   または

           cd android
         

2. 以下のコマンドを実行して、アプリケーションを登録します。

           mfpdev app register
         

   リモート・サーバーを使用する場合は、mfpdev server add コマンドを使用して、そのサーバーを追加します。 mfpdev app register CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録します。各プラットフォームは MobileFirst Server 内に 1 つのアプリケーションとして登録されます。

   • iOS

     プラットフォームが iOS の場合、アプリケーションの BundleID を指定するように求められます。重要: BundleID は大/小文字の区別があります。

     mfpdev app register CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録し、次に、MobileFirst Server を識別するメタデータを含んでいる、Xcode プロジェクトのルートにある mfpclient.plist 構成ファイルを更新します。

     注: XCode では、プロジェクト・ナビゲーターで mfpclient.plist を ios フォルダーからドラッグ・アンド・ドロップします。このステップは iOS プラットフォームにのみ適用されます。

   • Android

     プラットフォームが Android の場合、アプリケーションのパッケージ名を指定するように求められます。重要: パッケージ名は大/小文字の区別があります。

     mfpdev app register CLI コマンドは、まず最初に MobileFirst Server に接続してアプリケーションを登録し、次に、Android Studio プロジェクトの [project root]/app/src/main/assets/ フォルダーに mfpclient.properties ファイルを生成し、これに MobileFirst Server を識別するメタデータを追加します。

ステップ 4: アプリケーション・ロジックの編集

1. 任意のコード・エディターで React Native プロジェクトを開きます。
2. WLAuthorizationManager クラスを App.js にインポートします。

         import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
         

3. プロジェクトのルート・フォルダーにある App.js ファイルを選択し、以下のコード・スニペットを貼り付けて既存の WLAuthorizationManager.obtainAccessToken() 関数を置き換えます。

   React Native クライアント・サイド API リファレンス (ここ) を参照してください。

              WLAuthorizationManager.obtainAccessToken("").then(
                  (token) => {
                    console.log('-->  pingMFP(): Success ', token);
                    var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
                      WLResourceRequest.GET
                    );
                    resourceRequest.setQueryParameters({ name: "world" });
                    resourceRequest.send().then(
                      (response) => {
                        // Will display "Hello world" in an alert dialog.
   
                        alert("Success: " + response.responseText);
                      },
                      (error) => {
                        alert("Failure: " + JSON.stringify(error));
                      }
                    );
                  }, (error) => {
                    console.log('-->  pingMFP(): failure ', error.responseText);
                    alert("Failed to connect to MobileFirst Server");
                  });
          

ステップ 5: アダプターのデプロイ

用意されているアダプター成果物をダウンロードし、MobileFirst Operations Console から「アクション」 → 「アダプターのデプロイ」アクションを使用してデプロイします。

ステップ 5.1: 「アクション」 → 「サンプルのダウンロード」オプションを選択します。Hello World Java アダプター・サンプルをダウンロードします。

あるいは、「アダプター」の横にある「新規」ボタンをクリックします。

Maven および MobileFirst CLI がインストールされていない場合は、画面に表示される「開発環境をセットアップします」の説明に従ってください。

ステップ 5.2: コマンド・ライン・ウィンドウから、アダプターの Maven プロジェクト・ルート・フォルダーに移動し、以下のコマンドを実行します。

    mfpdev adapter build
  

ステップ 5.3: ビルドが終了したら、それを MobileFirst Operations Console から「アクション」 → 「アダプターのデプロイ」アクションを使用してデプロイします。アダプターは [adapter]/target フォルダー内にあります。

ステップ 6: アプリケーションのテスト

以下のコマンドを使用して、アプリケーションを実行します。

     react-native run-ios|run-android
    

デバイスが接続されている場合は、そのデバイスにアプリケーションがインストールされ、起動されます。そうでない場合はシミュレーターまたはエミュレーターが使用されます。

クイック・スタートのステップについて詳しくは、ここを参照してください。

結果

• 「Ping MobileFirst Server」ボタンをクリックすると、Connected to MobileFirst Server と表示されます。
• アプリケーションが MobileFirst Server に接続できる場合、デプロイした Java アダプターを使用してリソース要求呼び出しが行われます。その場合、アダプター応答がアラートに表示されます。

アダプターの開発

• アダプターの概要
• Java アダプターおよび JavaScript アダプターの作成
• JavaScript アダプター
  • JavaScript HTTP アダプター
    • JavaScript HTTP アダプターでの SSL の使用
  • JavaScript SQL アダプター
  • JavaScript アダプターでの Java の使用
• Java アダプター
  • Java HTTP アダプター
  • Java SQL アダプター
• IDE でのアダプターの開発
• アダプターのテストおよびデバッグ
• サーバー・サイドのログ収集
  • サーバー・サイドのログ収集の概要
  • Java アダプターでのログ収集
  • JavaScript アダプターでのログ収集
• アダプターの高度な使用方法とマッシュアップ
• アダプターを使用した Cloudant との統合