Developing for Ionic

    npm install -g ionic
    

このクイック・スタート・チュートリアルの目的は、単純なエンドツーエンド・フローを説明することです。

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: アプリケーションの登録

ブラウザーで URL http://your-server-host:server-port/mfpconsole をロードすることによって MobileFirst Operations Console を開きます。

• サーバーがローカルで実行されている場合、http://localhost:9080/mfpconsole を使用します。ユーザー名/パスワード は admin/admin です。
• サーバーが IBM Cloud で Mobile Foundation サービス・インスタンスとして実行されている場合、https://bluemix-mfp-server-hostname:443/mfpconsole を使用します。ユーザー名/パスワード は、IBM Cloud Mobile Foundation サービス資格情報から入手できます。

ステップ 2.1: 「アプリケーション」の横にある「新規」ボタンをクリックします

• プラットフォームのリストから、次のいずれかを選択します: Android、iOS、Windows、Browser
• アプリケーション ID として com.ibm.mfpstarterionic を入力します。
• バージョンとして 1.0.0 を入力します。
• 「アプリケーションの登録」をクリックします。

ステップ 2.2: Github から Ionic サンプルをダウンロードします

ステップ 2.3: ダウンロードした Ionic サンプル・アプリケーションに Ionic SDK を追加します

1. ダウンロードした Ionic プロジェクトのルートに移動し、MobileFirst core Ionic Cordova プラグインを追加します。
2. cd MFPStarterIonic を使用して、ディレクトリーを Ionic プロジェクトのルートに変更します。
3. Ionic CLI コマンド ionic cordova plugin add cordova-plugin-name を使用して、MobileFirst プラグインを追加します。
   以下に例を示します。

           ionic cordova plugin add cordova-plugin-mfp
         

   上記のコマンドは、MobileFirst Core SDK プラグインを Ionic プロジェクトに追加します。

4. 以下の Ionic CLI コマンドを使用して、1 つ以上のサポートされるプラットフォームを Cordova プロジェクトに追加します。
   ionic cordova platform add ios|android|windows|browser
   以下に例を示します。

           cordova platform add ios
         

5. ionic cordova prepare コマンドを実行して、アプリケーション・リソースを準備します。

           ionic cordova prepare
         

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

1. 任意のコード・エディターで Ionic プロジェクトを開きます。
2. src/js/index.js ファイルを選択し、以下のコード・スニペットを貼り付けて既存の WLAuthorizationManager.obtainAccessToken() 関数を置き換えます。

              WLAuthorizationManager.obtainAccessToken("").then(
              (token) => {
                console.log('-->  pingMFP(): Success ', token);
                this.zone.run(() => {
                  this.title = "Yay!";
                  this.status = "Connected to MobileFirst Server";
                });
                var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
                WLResourceRequest.GET
                );
   
                resourceRequest.setQueryParameter("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);
                this.zone.run(() => {
                 this.title = "Bummer...";
                 this.status = "Failed to connect to MobileFirst Server";
                });
              }
            );
          

ステップ 3: アダプターのデプロイ

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

ステップ 3.1: 「アクション」 → 「サンプルのダウンロード」オプションを選択します。Hello World Java アダプター・サンプルをダウンロードします。

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

Maven および MobileFirst CLI がインストールされていない場合は、画面に表示される「開発環境をセットアップします」の説明に従ってください。

ステップ 3.2: コマンド・ライン・ウィンドウから、 アダプターの Maven プロジェクト・ルート・フォルダーに移動し、以下のコマンドを実行します。

    mfpdev adapter build
  

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

ステップ 4: アプリケーションのテスト

ステップ 4.1: コマンド・ライン・ウィンドウから、Ionic プロジェクトのルート・フォルダーに移動します。

ステップ 4.2: 次のコマンドを実行します。
ionic cordova platform add ios|android|windows|browser
これによって、プラットフォームが追加されます。

ステップ 4.3: Ionic プロジェクト内で config.xml ファイルを選択し、 値を編集して、プロトコル、ホスト、およびポートの各プロパティーを、MobileFirst Server の正しい値にします。

• ローカル MobileFirst Server を使用している場合の典型的な値は、http、localhost、および 9080 です。
• リモート MobileFirst Server (IBM Cloud 上) を使用している場合の典型的な値は、https、your-server-address、および 443 です。
• IBM Cloud Private 上で Kubernetes クラスターを使用していて、デプロイメントのタイプが NodePort の場合、ポートの典型的な値は、Kubernetes クラスターでサービスによって公開される NodePort です。

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

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

クイック・スタートのステップについて詳しくは、ここを参照してください。

結果

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

アプリケーションの開発

MobileFirst API の使用について学習します (WLResourceRequest、クライアント・サイド・トランスレーション、アプリケーションのデバッグ、開発者 CLI など...)。

• MobileFirst CLI を使用した MobileFirst 成果物の管理
• Ionic アプリケーションへの MobileFirst Foundation SDK の追加
• Ionic アプリケーションからのリソース要求
• Ionic アプリケーションでのダイレクト・アップデートの使用

認証およびセキュリティー

さまざまな保護レイヤーをアプリケーションに追加します。

• 許可の概念
• セキュリティー検査の作成
  • セキュリティー検査コントラクト
• CredentialsValidationSecurityCheck
  • セキュリティー検査の実装
  • Ionic アプリケーションでのチャレンジ・ハンドラーの実装

アダプターの開発

企業のバックエンド・システムおよびクラウド・サービスと統合するためのサーバー・サイド・コードを開発します。

• アダプターの概要
• Java アダプターおよび JavaScript アダプターの作成
• JavaScript アダプター
  • JavaScript HTTP アダプター
    • JavaScript HTTP アダプターでの SSL の使用
  • JavaScript SQL アダプター
  • JavaScript アダプターでの Java の使用
• Java アダプター
  • Java HTTP アダプター
  • Java SQL アダプター
• IDE でのアダプターの開発
• アダプターのテストおよびデバッグ
• サーバー・サイドのログ収集
  • サーバー・サイドのログ収集の概要
  • Java アダプターでのログ収集
  • JavaScript アダプターでのログ収集
• アダプターの高度な使用方法とマッシュアップ
• アダプターを使用した Cloudant との統合