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

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 または Visual Studio 2013/2015 for Windows 8.1 Universal / Windows 10 UWP
  • Cordova CLI 6.x.
  • オプション。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, Windows を選択します。
    • com.ibm.mfpstartercordovaアプリケーション ID として入力します。
    • 1.0.0version として入力します。
    • 「アプリケーションの登録」をクリックします。

    アプリケーションの登録

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

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

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

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

  2. www/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. コマンド・ライン・ウィンドウから Cordova プロジェクトのルート・フォルダーにナビゲートします。
  2. コマンド cordova platform add ios|android|windows を実行してプラットフォームを追加します。
  3. Cordova プロジェクトで、config.xml ファイルを選択し、protocolhost、および port の各プロパティーを含む <mfp:server ... url=" "/> 値をご使用の MobileFirst Server の正しい値で編集します。
    • ローカル MobileFirst Server を使用している場合、通常、値は httplocalhost、および 9080 です。
    • リモート MobileFirst Server (Bluemix 上) を使用している場合、通常、値は httpsyour-server-address、および 443 です。

    あるいは、MobileFirst CLI がインストール済みの場合は、プロジェクト・ルート・フォルダーにナビゲートし、コマンド mfpdev app register を実行します。リモート MobileFirst Server が使用されている場合は、 コマンド mfpdev server add を実行してサーバーを追加し、続いて、例えば、mfpdev app register myBluemixServer を実行します。

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


結果

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

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

次の手順

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

Last modified on February 27, 2017