Web アプリケーションのエンドツーエンドのデモンストレーション

improve this page | report issue

概説

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

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

終了結果:

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

前提条件:

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. アプリケーションの隣の「新規」ボタンをクリックします。
    • Web プラットフォームを選択します。
    • com.ibm.mfpstarterwebアプリケーション ID として入力します。
    • 「アプリケーションの登録」をクリックします。

    アプリケーションの登録

  2. 「スターター・コードの取得」タイルをクリックして、Web サンプル・アプリケーションをダウンロードすることを選択します。

    サンプル・アプリケーションのダウンロード

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

  1. お好きなコード・エディターでプロジェクトを開きます。

  2. client/js/index.js ファイルを選択し、以下のコード・スニペットを貼り付けて、既存の WLAuthorizationManager.obtainAccessToken() 関数を置換します。

    WLAuthorizationManager.obtainAccessToken()
         .then(
             function(accessToken) {
                 titleText.innerHTML = "Yay!";
                 statusText.innerHTML = "Connected to MobileFirst Server";
                    
                 var resourceRequest = new WLResourceRequest(
                     "/adapters/javaAdapter/resource/greet/",
                     WLResourceRequest.GET
                 );
                    
                 resourceRequest.setQueryParameter("name", "world");
                 resourceRequest.send().then(
                     function(response) {
                         // Will display "Hello world" in an alert dialog.
                         alert("Success: " + response.responseText);
                     },
                     function(response) {
                         alert("Failure: " + JSON.stringify(response));
                     }
                 );
             },
    
             function(error) {
                 titleText.innerHTML = "Bummer...";
                 statusText.innerHTML = "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. コマンド・ライン・ウィンドウから [project root] → node-server フォルダーにナビゲートします。
  2. コマンド npm start を実行して、必要な Node.js 構成をインストールして Node.js サーバーを始動します。
  3. [project root] → node-server → server.js ファイルを開き、host 変数および port 変数をご使用の MobileFirst Server の正しい値で編集します。
    • ローカル MobileFirst Server を使用している場合、通常、値は httplocalhost、および 9080 です。
    • リモート MobileFirst Server (Bluemix 上) を使用している場合、通常、値は httpsyour-server-address、および 443 です。

    以下に例を示します。

    var host = 'https://mobilefoundation-xxxx.mybluemix.net'; // The Mobile Foundation server address
    var port = 9081; // The local port number to use
    var mfpURL = host + ':443'; // The Mobile Foundation server port number
    
  4. ブラウザーで次の URL にアクセスします。 http://localhost:9081/home


Secure Origins ポリシー

開発時に Chrome を使用している場合、このブラウザーでは、HTTP と「localhost」ではないホストの両方を使用しているときにアプリケーションをロードすることができません。これは、このブラウザーでデフォルトで実装および使用されている Secure Origins ポリシーのためです。

これを打開するために、Chrome ブラウザーを以下のフラグを付けて開始できます。

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • フラグが機能するように、「test-to-new-user-profile/myprofile」を新規 Chrome ユーザー・プロファイルとして機能するフォルダーのロケーションに置換します。


結果

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

その場合、アダプター応答がアラートに表示されます。

次の手順

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

Last modified on October 05, 2017