Developing for 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
          

ステップ 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/  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS


プロジェクトを XCode で開きます。プロジェクト・ナビゲーターで、mfpclient.plist を 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) => {
                         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 アダプターを使用してリソース要求呼び出しが行われます。その場合、アダプター応答がアラートに表示されます。
Last modified on October 11, 2018