Developing for Ionic

improve this page | report issue
以下のチュートリアルに従って、Ionic アプリケーションを開発します。それには、開発環境のセットアップ、製品の体験、および Mobile Foundation 8.0 オファリングと統合することによる価値の追加が含まれます。

Ionic は、AngularJS および Apache Cordova を基に構築されたフレームワークです。Ionic は、HTML、CSS、および JavaScript などの Web テクノロジーを使用するハイブリッドなモバイル・アプリおよび Web プラットフォーム・アプリを素早く作成するのに役立ちます。

以下のセクションは、モバイル・アプリまたは Web アプリを開発するためのフレームワークとして Ionic を選択した開発者が Ionic アプリで IBM Mobile Foundation SDK の使用を始めるのを支援します。

アプリケーションの作成には、任意のコード・エディター (Atom.io、Visual Studio Code、Eclipse、IntelliJ、その他) を使用できます。

MobileFirst Platform Foundation 上で Ionic を使用した開発を素早く開始するには、下記のステップに従ってください。

ステップ 1: Ionic CLI のインストール

Ionic 開発を始めるために必要な最初のステップは、Ionic CLI をインストールすることです。

Cordova および Ionic CLI をインストールするには、次のようにします。

NodeJS をダウンロードしてインストールします。

コマンド・ライン・ウィンドウから以下のコマンドを実行します。

    npm install -g ionic
    

ステップ 2: MobileFirst 開発環境のセットアップ

Ionic CLI をインストールした後、MobileFirst 開発環境をセットアップします。詳しくは、MobileFirst 開発環境のセットアップについてのチュートリアルである MobileFirst 開発環境のセットアップを参照してください。


Ionic SDK を使用した開発を素早く開始する方法を学ぶには、「クイック・スタート」タブに移動してください。

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

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 を使用している場合の典型的な値は、httplocalhost、および 9080 です。
  • リモート MobileFirst Server (IBM Cloud 上) を使用している場合の典型的な値は、httpsyour-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 など...)。

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

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

アダプターの開発

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