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
         

   注意: このステップは react-native バージョン 0.60 以降では必要ありません。

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

Android

      <![CDATA[
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"  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) => {
                        console.error(error);
                   alert("Failure: Resource Request");
                 }
               );
                  }, (error) => {
                    console.error(error);
               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 アダプターを使用してリソース要求呼び出しが行われます。その場合、アダプター応答がアラートに表示されます。

IBM MobileFirst JSONStore の React Native SDK

インストール

React Native アプリケーションの IBM MobileFirst JSONStore SDKは IBM MobileFirst Foundation SDK に依存しています。IBM MobileFirst Foundation SDK をご使用のアプリケーションに追加します。

ご使用の React Native アプリケーションのフォルダーにナビゲートし、以下のコマンドを実行して、React Native アプリケーションの JSONStore SDK をインストールします。

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

サポートされるプラットフォームは Android と iOS です。

概要

前提条件

• React Native アプリケーションのすべての前提条件を、必ず確認してください。React Native を初めて使用する場合は、React Native の概要ページを参照してください。
• IBM Cloud の Mobile Foundation インスタンスまたは IBM Mobile Foundation サーバーのオンプレミス・インストール。

React Native プロジェクトの作成

1. 最初のステップは React Native プロジェクトの作成です。このアプリケーションを JSONStoreApp と呼びましょう。React Native CLI を使用して、新規プロジェクトを作成します。

         react-native init JSONStoreApp
         cd JSONStoreApp
         

2. MobileFirst Core SDK をインストールし、概要の説明のとおりに実行します。
3. IBM MobileFirst JSONStore SDK をご使用のアプリケーションに追加します。

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

4. すべてのネイティブ依存関係が React Native プロジェクトに追加されるように、プロジェクトにリンクします。

         react-native link
         

   注意: このコマンドは react-native 0.60 以降では必要ありません。

Android アプリケーションの構成

• /android/app/build.gradle の android セクションに以下の行を追加します。

      packagingOptions{
      	exclude 'META-INF/ASL2.0'
      }
          

JSONStore コレクションの作成

JSONStore API 使用の最初のステップは、JSONStore コレクションの作成です。

1. JSONStore クラスをアプリケーションにインポートします。App.js を開き、他のインポート・ステートメントに以下の行を追加します。

       import {WLJSONStore, JSONStoreCollection} from 'react-native-ibm-mobilefirst-jsonstore';
       

2. コレクションを作成してオープンします。同時に複数のコレクションをオープンします。パスワードを使用したコレクションの保護や同期ポリシーのセットアップなどの拡張オプション用の JSONStoreInitOptions パラメーターを渡します。

       var dogs = new JSONStoreCollection('dogs');
       WLJSONStore.openCollections(['dogs']);  // Provide the name of the collection as a string.
   
           

コレクションにデータを追加

コレクションに JSON データを追加します。

    	var hachi = { "name" : "Hachiko" , "breed" : "Akita" , "country" : "Japan"};
        dogs.addData(hachi).then( ()=> {
          // Data was added to the collection successfully.

        }).catch ( (err) => {
          // Error adding data. See the err object for more information on the error

        })
        

コレクションからデータを照会

任意の JSONStoreCollection.find* API を使用して、コレクションを照会します。 JSON データの拡張フィルター処理と照会に、JSONStoreQueryPart と JSONStoreQuery API を使用します。

    	dogs.findAllDocuments().then( (result) => {
           // result will have all the documents in the collection

           // E.g. [ {"json": {"name":"Hachiko","breed":"Akita","country":"Japan"},"_id":2}]

         }).catch((error) => {
            console.error ("Error finding docs " +  JSON.stringify(error));
         });
    

コレクションのクローズ、クリア、および破棄

コレクションをクローズすると、openCollections API の使用に対してコレクションがオープンするまで、その後のアクセスのために JSONStore コレクションがクローズされます。

    WLJSONStore.closeAll()
        

コレクションをクリアするとコレクションからのすべての文書が削除されますが、破棄はされません。

    	dogs.clearCollection().then (()=>{
    		// All documents cleared successfully

         }).catch( (err) => {
           // An error occurred while clearing the collection.

         })
        

コレクションを破棄すると、すべてのデータ、すべてのアクセサー、およびセキュリティー成果物が永続的に削除されます。一度破棄されたコレクションは復元できません。アプリケーションのすべてのコレクションは破棄されます。

    	WLJSONStore.destroy()
        

IBM MobileFirst ライブ・アップデートの React Native SDK

インストール

React Native アプリケーションの IBM MobileFirst ライブ・アップデート SDKは IBM MobileFirst Foundation SDK に依存しています。IBM MobileFirst Foundation SDK をご使用のアプリケーションに追加します。

ご使用の React Native アプリケーションのフォルダーにナビゲートし、以下のコマンドを実行して、React Native アプリケーションのライブ・アップデート SDK をインストールします。

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

概要

前提条件

• React Native アプリケーションのすべての前提条件を、必ず確認してください。React Native を初めて使用する場合は、React Native の概要ページを参照してください。
• IBM Cloud の Mobile Foundation インスタンスまたは IBM Mobile Foundation サーバーのオンプレミス・インストール。

React Native プロジェクトの作成

1. 最初のステップは React Native プロジェクトの作成です。このアプリケーションを MFLiveUpdateApp と呼びましょう。React Native CLI を使用して、新規プロジェクトを作成します。

           react-native init MFLiveUpdateApp
           

2. React Native プラグインをアプリケーションに追加します。

           cd MFLiveUpdateApp
           npm install react-native-ibm-mobilefirst-liveupdate —-save
           

   注: ライブ・アップデート・パッケージは、React Native v0.62.x 以上をサポートします。

3. プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。

           cd ios && pod install
           

アプリケーションの構成

Android

• xmlns:tools="http://schemas.android.com/tools" をマニフェスト・タグに追加します。例:

        <manifest
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        package="com.mobilefirstapp">
      

• tools:replace="android:allowBackup" をアプリケーション・タグに追加します。例:

        <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:allowBackup="false"
        android:theme="@style/AppTheme"
        tools:replace="android:allowBackup">
      

iOS

• プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。

        cd ios && pod install
        

  このステップは iOS プラットフォームにのみ適用されます。

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

Android

• アプリケーションを実行するには、

        react-native run-android
        

iOS

• アプリケーションを実行するには、

        react-native run-ios
        

サポートされているプラットフォーム

• Android
• iOS

MobileFirst Operation Console での構成

1. MobileFirst Operations Console で、「[ご使用のアプリケーション]」 → 「セキュリティー」タブ → 「スコープ・エレメントのマッピング」と移動して、liveupdate.mobileclient のスコープ・マッピングを追加します。デフォルトの保護を使用する場合は空ストリングにマップし、スコープ・エレメントを使用している場合はセキュリティー検査にマップします。
   詳しくは、スコープ・マッピングを参照してください。
2. MobileFirst Operations Console で、「[ご使用のアプリケーション]」 → 「ライブ更新設定」と移動して、スキーマとフィーチャーを追加できます。

スキーマとフィーチャーをセットアップしたら、クライアント・サイド API を使い始めることができます。

API の使用例

      var useClientCache = false; //True (default)


      var featureId = 'featureId';
      var propertyId = 'propertyId' ;

      MFLiveUpdate.obtainConfiguration(useClientCache)
      .then(result => {

      console.log('Is feature enabled for' + featureId + ':' + result.isFeatureEnabled('featureId'));
      console.log ('Property value for the ' + propertyId + 'is :' +result.getProperty('propertyId'));


      })
      .catch(err => console.log('There was an error:' + err))
          

追加情報

• 開発者センター
• 概要
• API リファレンス