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

概説

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

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

終了結果:

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

前提条件:

• 最新 Web ブラウザー
• オプション。 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. アプリケーションの隣の「新規」ボタンをクリックします。
   • 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. [project root] → node-server → server.js ファイルを開き、host 変数および port 変数をご使用の MobileFirst Server の正しい値で編集します。
   • ローカル MobileFirst Server を使用している場合、通常、値は http、localhost、および 9080 です。
   • リモート MobileFirst Server (IBM Cloud 上) を使用している場合、通常、値は https、your-server-address、および 443 です。
   • IBM Cloud Private 上で Kubernetes クラスターを使用していて、デプロイメントのタイプが NodePort の場合、通常、ポートの値は、Kubernetes クラスターのサービスによって公開される NodePort です。

   以下に例を示します。

   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
   

3. コマンド npm start を実行して、必要な Node.js 構成をインストールして Node.js サーバーを始動します。
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 セキュリティー・フレームワークの使用などについて学習します。

• アプリケーションの開発チュートリアルを検討する
• アダプターの開発チュートリアルを検討する
• 認証およびセキュリティー・チュートリアルを検討する
• すべてのチュートリアルを検討する