React Native のエンドツーエンドのデモンストレーション

improve this page | report issue

概説

このデモンストレーションの目的は、エンドツーエンドのフローを説明することです。

  1. MobileFirst クライアント SDK と事前にバンドルされているサンプル・アプリケーションは登録済みで、MobileFirst Operations Console からダウンロードされています。
  2. 新規または提供済みのアダプターは MobileFirst Operations Console にデプロイされています。
  3. アプリケーション・ロジックは、リソース要求を行うために変更されています。

終了結果:

  • MobileFirst Server を正常に ping している。
  • アダプターを使用してデータを正常に取得している。

前提条件:

  • Xcode for iOS、Android Studio for Android
  • React Native CLI
  • オプション。 MobileFirst CLI (ダウンロード)
  • オプション。 スタンドアロン MobileFirst Server (ダウンロード)

ステップ 1. MobileFirst Server の開始

Mobile Foundation インスタンスを作成済みであることを確認します。あるいは、MobileFirst Developer Kitを使用しているときは、サーバーのフォルダーにナビゲートして、Mac および Linux では ./run.sh、Windows では run.cmd のコマンドを実行してください。

ステップ 2. アプリケーションの作成および登録

ブラウザーで、URL http://your-server-host:server-port/mfpconsole をロードして MobileFirst Operations Console を開きます。 サーバーがローカルで実行されている場合は、http://localhost:9080/mfpconsole を使用します。 ユーザー名/パスワード は admin/admin です。

  1. アプリケーションの隣の「新規」ボタンをクリックします。
    • 次のいずれかのプラットフォームを選択します。Android、iOS
    • 「アプリケーション ID」として「com.ibm.mfpstarter.reactnative」を入力します。
    • 1.0.0 を version として入力します。
    • 「アプリケーションの登録」をクリックします。

    アプリケーションの登録

  2. Github から、React Native サンプル・アプリケーションをダウンロードします。

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

  1. 任意のコード・エディターで React Native プロジェクトを開きます。

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

  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");
      });

ステップ 4. アダプターのデプロイ

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

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

  1. 「アクション」→「サンプルのダウンロード」オプションを選択します。 Hello World Java アダプターのサンプルをダウンロードします。

    Maven および MobileFirst CLI がインストールされていない場合は、スクリーン内の「開発環境をセットアップします」の説明に従います。

  2. コマンド・ライン・ウィンドウからアダプターの Maven プロジェクト・ルート・フォルダーにナビゲートし、以下のコマンドを実行します。

     mfpdev adapter build

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

    アダプターのデプロイ

サンプル・アプリケーション

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

  1. MobileFirst CLI がインストールされていることを確認し、特定のプラットフォームの (iOS または Android) ルート・フォルダーにナビゲートし、コマンド mfpdev app register を実行します。 リモート MobileFirst Server が使用されている場合は、次のコマンドを実行してサーバーを追加します。 
    mfpdev server add

    次に、アプリを登録するコマンドを実行します。例えば次のとおりです。

    mfpdev app register myIBMCloudServer
  2. 次のコマンドを実行してアプリケーションを実行します。 
    react-native run-ios|run-android

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


結果

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

次の手順

アプリケーションでのアダプターの使用、プッシュ通知などの追加のサービスを統合する方法、MobileFirst セキュリティー・フレームワークの使用などについて学習します。

▲
Last modified on October 30, 2019