React Native の開発

improve this page | report issue
以下のチュートリアルに従って React Native アプリケーションを開発します。それには、開発環境のセットアップ、製品の体験、および Mobile Foundation 8.0 オファリングと統合することによる価値の追加が含まれます。

以下のセクションは、モバイル・アプリまたは Web アプリを開発するためのフレームワークとして React Native を選択した開発者が React Native アプリで IBM Mobile Foundation SDK の使用を始めるのを支援します。

アプリケーションの作成には、任意のコード・エディター (Atom.io、Visual Studio Code、Eclipse、IntelliJ、その他) を使用できます。

ステップ 1: React Native CLI のインストール

React Native 開発を始めるために必要な最初のステップは、React Native CLI をインストールすることです。

React Native CLI をインストールするには、次のようにします。

NodeJS をダウンロードしてインストールします。

コマンド・ライン・ウィンドウから以下のコマンドを実行します。

    npm install -g react-native-cli
   

React Native 資料の「Getting Started」ページの説明に従って、ご使用のマシンを React Native 開発用にセットアップします。

これには、Android および iOS に必要なセットアップが含まれています。

ステップ 2: MobileFirst 開発環境のセットアップ

React Native CLI をインストールした後、MobileFirst 開発環境をセットアップします。詳しくは、MobileFirst 開発環境のセットアップについてのチュートリアルである MobileFirst 開発環境のセットアップを参照してください。


React Native SDK を使用した開発を素早く開始する方法を学ぶには、「クイック・スタート」タブに移動してください。

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


以下の行を AndroidManifest.xml ({project-folder}/android/app/src/main/) に追加します。
      <![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


プロジェクトに Mobilefirst 固有の cocopods 依存性をインストールします。 cd ios && pod install このステップは 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 にインポートします。
  3.          import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
             
  4. プロジェクトのルート・フォルダーにある 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

IBM Mobile Foundation JSONStore は、軽量で文書志向のストレージ・システムを提供する、オプションのクライアント・サイド API です。JSONStore は JSON 文書の永続ストレージを有効にします。アプリケーション内の文書は、デバイスがオフラインの時でも JSONStore 内で使用可能です。この永続的で常に使用可能なストレージは、例えばデバイスで使用できるネットワーク接続がない時などに、ユーザーに文書へのアクセス権限を与えるのに役立ちます。

インストール

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 プロジェクトの作成

  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.gradleandroid セクションに以下の行を追加します。
        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

Mobile Foundation のライブ・アップデート・フィーチャーは、アプリケーションのユーザーに対してさまざまな構成を定義して提供する簡単な方法を提供します。これには、構成の構造と構成の値を定義するための MobileFirst Operations Console のコンポーネントが含まれます。
LiveUpdate React Native SDK を使用すると、MobileFirst Operations Console の「ライブ更新設定」画面で設定したランタイム構成プロパティーとフィーチャーを照会できます。ライブ・アップデートをアプリケーションに統合することで、フィーチャーの切り替え、A/B テスト、フィーチャーのセグメント化などを実装できます。

インストール

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 プロジェクトの作成

  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

AndroidManifest.xml (/android/app/src/main/) に対して次の変更を加えます。
  • 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))
          

追加情報

React Native アプリケーションの JSONStore について詳しくは、 ここを参照してください。
ライブ・アップデートについて詳しくは、ここを参照してください。

参照

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on June 19, 2020