目次


経費追跡用ハイブリッド・アプリケーションを作成する

StrongLoop を使用して REST API を作成し、Bluemix の Cloudant データベースに接続する

Comments

REST アプリケーションを作成する際に、API の作成とデータ接続を行うためのツールを使用すれば、生産性を高めることが可能になります。このようにすることで、アプリケーションのビジネス・ロジックとユーザー・エクスペリエンスに、よりフォーカスして取り組めるようになります。

このチュートリアルでは、実用的なアプリケーションを作成するプロセスを通して、StrongLoop (IBM カンパニー) で提供している API 開発ツールを使用する方法を説明します。オープンソースの LoopBack フレームワーク (Node.js 上に作成されています) を使用すれば、スケーラブルな REST API を簡単にビジュアル開発して、アプリケーションに必要なデータに接続することができます。さらに、StrongLoop の slc コマンド・ライン・ツールを補完する StrongLoop Arc には、Node.js アプリケーションの作成、プロファイリング、モニタリングを支援するツールも含まれています。

このチュートリアルの演習では、単純な経費追跡用ハイブリッド・アプリケーションを作成し、そのアプリケーションで、StrongLoop を使用して開発した REST API を利用します。これらの REST API は、データを統合するために Bluemix の Cloudant NoSQL DB サービスを利用します。REST API を公開するサーバー・アプリケーションは、ローカルで作成します。このハイブリッド・アプリケーションのクライアント・サイドの開発には、LoopBack Angular JavaScript SDK (LoopBack に組み込まれている SDK のうちの 1 つ) と Ionic フレームワークを使用します。そして最後のステップとして、アプリケーションのサーバー・サイドのコードを Bluemix にデプロイします。

ExpenseTracker アプリケーションでは、ユーザーが日常経費をカテゴリー別に記録しておくと、アプリケーションのクライアントが、経費のレポートを生成し、そのレポートをチャート形式で表示します。演習では API を拡張して、クライアントが特定のカテゴリーまたは特定の月に関するチャートを表示できるようにします。

アプリケーションを作成するために必要となるもの

サーバー・アプリを実行するコードを入手する

オープンソースの LoopBack フレームワークを使用すれば、スケーラブルな REST API を簡単にビジュアル開発して、アプリケーションに必要なデータに接続することができます。

ステップ 1. Bluemix アプリを作成する

  1. Bluemix にログインします。
  2. 「CREATE APP (アプリの作成)」をクリックします。
  3. アプリのタイプとして「WEB」を選択します。
  4. 「SDK for Node.js」を選択します。Bluemix のカタログに表示された SDK for Node.js アイコンのスクリーンショット
  5. 「CONTINUE (続行)」をクリックします。
  6. ExpenseTracker」という名前に続けて、アプリ名が一意となるような識別子 (ユーザー名または日付など) を入力します (入力した名前を使用できない場合は、Bluemix が通知します)。
  7. 「FINISH (完了)」をクリックします。

Cloudant NoSQL DB サービスをアプリにバインドする

  1. アプリのステージングが完了したら、Bluemix ダッシュボードに戻ってアプリの名前をクリックすることで、アプリの概要ページを表示します。
  2. 「ADD A SERVICE OR API (サービスまたは API の追加)」ボタンをクリックします。
  3. カタログの「Data and Analytics (データおよび分析)」セクションで、「Cloudant NoSQL DB」を選択します。
  4. 「CREATE (作成)」をクリックして Cloudant サービスをアプリに追加します。
  5. 再ステージングを促されたら、アプリを再ステージングします。
  6. アプリの概要ページに戻り、Cloudant NoSQL DB サービスがアプリにバインドされていることを確認します。

ExpenseTracker アプリケーションのデータベースを作成する

  1. アプリの概要ページで「Cloudant NoSQL DB」サービスをクリックして、このサービスの詳細を表示します。
  2. 「LAUNCH (起動)」ボタンをクリックして Cloudant NoSQL DB ダッシュボードを起動します。
  3. 右上にある「Create Database (データベースの作成)」リンクをクリックします。データベース名の入力を促されたら、「expense-tracker」と入力して「Create (作成)」をクリックします。

ステップ 2. ローカル開発環境でサーバー・サイドを実装する

このステップでは、LoopBack フレームワークを使用して経費情報を追加するための REST API を公開する、サーバー・サイドのアプリケーションを実装します。

サーバー・サイドのアプリケーションを新規に作成する

  1. OS コマンド・ラインで、新しいアプリケーションの保管先とするディレクトリーから「slc loopback」と入力し、Enter キーを押します。
  2. アプリケーションの名前として「ExpenseTracker」と入力し、Enter キーを押します。
  3. Enter キーを押してデフォルトのプロジェクト・ディレクトリー名 (ExpenseTracker) を受け入れます。

サーバー・サイドのコードが ExpenseTracker/server フォルダー内に生成されます。

Cloudant コネクターをアプリケーションに追加する

ExpenseTracker アプリケーションは、Cloudant NoSQL DB をデータ・ストレージとして使用します。Cloudant は CouchDB から派生したものなので、このアプリケーションには LoopBack CouchDB コネクターを使用します。

  1. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker ディレクトリーに変更します。
  2. 以下のコマンドを実行して LoopBack Couch コネクターをインストールします。

    npm install loopback-connector-couch

Cloudant をアプリケーションのデータベースとして追加する

ステップ 1 で作成した、Bluemix 内の Cloudant NoSQL DB サービスに接続するよう、ExpenseTracker アプリケーションを構成します。

  1. Blueimx 内の expense-tracker アプリケーションの概要ページで、Cloudant NoSQL DB サービスの「Show Credentials (資格情報の表示)」をクリックします。Cloudant の資格情報のスクリーンショット
    Cloudant の資格情報のスクリーンショット
  2. テキスト・エディターで、ローカル・プロジェクトの server/datasources.json ファイルを開き、以下のように Cloudant データベースの詳細を追加します。
    "cloudant": {
      "host": "yourhost-bluemix.cloudant.com",
      "port": 443,
      "url": "https://yourhost-bluemix.cloudant.com",
      "name": "cloudant",
      "connector": "couch",
      "db": "expense-tracker",
      "protocol": "https",
      "auth": {
        "admin": {
          "username": "cloudant-admin-username",
          "password": "cloudant-admin-password"
        },
        "reader": {
          "username": "cloudant-reader-username",
          "password": "cloudant-reader-password"
        },
        "writer": {
          "username": "cloudant-writer-username",
          "password": "cloudant-writer-password"
        }
      }
    }

アプリケーションのデータ・モデルをセットアップする

ExpenseTracker アプリケーションが使用するデータ・モデルは単純なものです。LoopBack フレームワークでのデータ・モデルの構成でも、REST API を公開することができます。

  1. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker ディレクトリーに変更して以下のコマンドを入力します。

    slc loopback:model

  2. 促されるのに応じて、以下の詳細を入力します。
    • Model name (モデル名): expense
    • Datasource to attach (接続先データ・ソース): cloudant
    • Model base class (モデルの基底クラス): PersistedModel
    • Expose as REST API (REST API として公開する): Yes
    • Plural form (複数形): expenses
  3. Enter キーを押してモデル作成プロセスを終了します。

今度は、モデルのプロパティー (categoryitempriceexpensedate) をセットアップします。

  1. プロパティーごとに slc loopback:property コマンドを実行し、促されるのに応じて、そのプロパティーの詳細を入力します。
    プロパティーモデルプロパティー名プロパティーの型必須
    カテゴリーexpensecategorystringyes
    項目expenseitemstringyes
    価格expensepricenumberyes
    請求日expenseexpensedatedateyes

コマンド・ラインの代わりに、Arc Composer を使用してプロパティーを追加することもできます。

データを操作する

LoopBack フレームワークは、データ・モデルのすべてのオブジェクトに対し、自動的に REST エンドポイントを生成します。さらに、データへの便利なインターフェースとして、Swagger API ドキュメントも生成します。

  1. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker ディレクトリーに変更します。
  2. node コマンドを実行して、ExpenseTracker アプリケーションを起動します。
  3. ブラウザーで http://localhost:3000/explorer にアクセスし、StrongLoop API Explorer で ExpenseTracker アプリケーションの Swagger API ドキュメントを開きます。API Explorer のスクリーンショット
    API Explorer のスクリーンショット
  4. 「List Operations (操作の一覧表示)」をクリックします。これにより、REST メソッドとして公開されている、使用可能なすべての操作が表示されます。API Explorer を使用することで、モデルを操作して各サービスをテストすることができます。

モデルの操作を拡張する

モデルの実装を拡張するには、アプリケーションの common/models フォルダーに格納されている expense.js ファイルに変更を加えます。このファイルはデフォルトで、以下の内容になっています。

module.exports = function(Expense) {};

ExpenseTracker がカテゴリー別または月別に経費を取得できるようにするには、メソッドを追加してモデルをカスタマイズし、カスタマイズしたモデルを公開してクライアントが使用できるようにします。テキスト・エディターで common/models/expense.js ファイルを開き、このファイルの内容を以下のコードで置き換えます。

module.exports = function(Expense) {
//Method to get the category based expenses for the month.
Expense.getMonthlyCategoryBasedAnalysis = function(cb)
{
    ONE_MONTH = 30 * 24 * 60 * 60 * 1000;  // Month in milliseconds
    var lastDate = new Date(Date.now() - ONE_MONTH);
    var result = "";
    var jsonArr = [];
    Expense.find( { expensedate: {gt: lastDate} },
    function (err, instance)
    {
        var tempArr = [0, 0, 0, 0];
        for (var i=0;i<instance.length;i++)
        {
            if(instance[i].expensedate > lastDate)
            {
                if(instance[i].category == "Food")
                    tempArr[0] = tempArr[0] + instance[i].price;
                else if (instance[i].category == "Travel")
                    tempArr[1] = tempArr[1] + instance[i].price;
                else if (instance[i].category == "Education")
                    tempArr[2] = tempArr[2] + instance[i].price;
                else if (instance[i].category == "Miscellaneous")
                    tempArr[3] = tempArr[3] + instance[i].price;
            }
        }
        for (var i = 0; i < tempArr.length; i++) {
            var cat = "";
            if(i == 0) cat = "Food";
            if(i == 1) cat = "Travel";
            if(i == 2) cat = "Education";
            if(i == 3) cat = "Miscellaneous";
            //create the JSON for the client to consume
            jsonArr.push({
                "category": cat,
                      "period": "LastMonth",
                "price": tempArr[i]
            });
        }
        console.log("out is "+jsonArr);
        response = jsonArr ;

      cb(null, response);
    });
}
//Expose the method as a REST API
Expense.remoteMethod ('getMonthlyCategoryBasedAnalysis',{
      http: {path: '/getMonthlyCategoryBasedAnalysis', verb: 'get'},
      //accepts: {arg: 'categoryName', type: 'string', http: { source: 'query' } },
      returns: {arg: 'data', type: 'string'}
    }
);
};

上記のコードでは、find メソッドを使用して前の月のカテゴリー別の経費を取得し、そのデータをカテゴリー別に編成します。getMonthlyCategoryBasedAnalysis は、クライアントに対してリモート・メソッドとして公開されます。

ステップ 3. ローカル開発環境でクライアント・サイドを実装する

この演習で作成しているハイブリッド・アプリケーションのフロントエンドには、Ionic フレームワーク、および LoopBack フレームワークの AngularJS SDK を使用します。

Ionic アプリケーションを作成する

クライアント・アプリケーションを Ionic アプリケーションとして作成します。

  1. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker ディレクトリーに変更し、以下のコマンドを実行してアプリケーションのテンプレートをダウンロードします (インターネットに接続されている状態になっていなければなりません)。

    ionic start client tabs

  2. フォルダーを上書きするかどうか尋ねられたら、「yes」を選択します。

Angular サービスを生成する

LoopBack フレームワークは、AngularJS の SDK をサポートしています。Ionic フレームワークは REST API を呼び出すために Angular クライアント・ライブラリーを使用します。以下のように LoopBack Angular コマンド・ライン・ツールを使用して、LoopBack アプリケーションの Angular クライアント・ライブラリーを生成します。

  1. カレント・ディレクトリーを ExpenseTracker/client ディレクトリーに変更します。
  2. 以下のコマンドを実行します。

    lb-ng ../server/server.js www/js/lb-services.js

  3. 上記コマンドの ../server/server.js の部分はメイン LoopBack サーバー・スクリプトへの相対パスであり、www/js/lb-services.js の部分はツールが生成するファイルの名前とパスです。
  4. client/www/js/lb-services.js ファイルを開いて、ツールによって生成されたコードを表示します。既存の urlBase 変数を変更して、コードがサーバー・サイドの実装を呼び出せるようにします (この変更は、ローカルでテストする際にのみ使用します)。
    var urlBase = "http://localhost:3000/api";

ng-resource モジュールをアプリケーションに追加する

アプリケーションが REST API を呼び出せるようにするために、ng-resource モジュールをクライアント・アプリケーションに追加します。

  1. アプリケーションの client ディレクトリーから、以下のコマンドを実行します。

    bower install angular-resource

    バージョンを選択するよう求められたら、最新バージョンを選択します。上記コマンドによって、必須ライブラリーが client/www/lib フォルダーに追加されます (AngularJS のいずれかのバージョンからライブラリーをダウンロードすることも可能です)。
  2. angular-resource 関連の JavaScript を client/www/index.html ファイルの <head> セクションに追加します。

    <script src="lib/angular-resource/angular-resource.js"></script>

経費の入力を実装する

このアプリケーションには、REST API を呼び出す、フォーム・ベースの入力が必要です。これによって、ユーザーが経費を入力することができます。controller.js、app.js、index.html の各テンプレートに、以下の変更を加えます。

  1. client/www/js/app.js で、モジュール宣言を変更して lbservices.js ファイルを含めます。それには、以下の行を見つけます。
    angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

    上記の行を次のように変更します。
    angular.module('starter', ['lbServices','ionic', 'starter.controllers'])
  2. client/www/js/app.js で、.config(function($stateProvider, $urlRouterProvider) で始まるブロックを以下のように変更します。
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })
      .state('tab.addexpense', {
        url: '/addexpense',
        views: {
          'tab-addexpense': {
            templateUrl: 'templates/tab-addexpense.html',
            controller: 'ExpenseController'
          }
        }
      })
    //This is required for the below step to display charts
      .state('tab.charts', {
        url: '/charts',
        views: {
          'tab-charts': {
            templateUrl: 'templates/tab-charts.html',
            controller: 'ExpenseController'
          }
    
        }
      });
    
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/tab/addexpense');
    });
  3. client/www/templates/tabs.html ファイルを開き、ダッシュボード・タブの <ion-tab> を以下のように変更します。
    <!-- Add Expense Tab--><ion-tab title="Add Expense" icon-off="ion-ios-plus-outline" 
    icon-on="ion-ios-plus" href="#/tab/addexpense"> 
    <ion-nav-view name="tab-addexpense"></ion-nav-view> </ion-tab>
  4. client/www/templates/tab-dash.html ファイルの名前を tab-addexpense.html に変更します。このファイルの内容を以下のコードで置き換えます。
    <ion-view view-title="Add Expense">
      <ion-content padding="true" class="has-header" scroll="false" overflow-scroll="false">
        <div>
          <br>
          <form name="expensesForm" ng-submit="addExpense()">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">Category</span>
              <select class="form-control focus" 
                  name="category" required ng-model="newExpense.category">
                  <option name="Food" id="Food">Food</option>
                  <option name="Travel" id="Travel">Travel</option>
                  <option name="Miscellaneous" id="Cosmetics">Miscellaneous</option>
                  <option name="Education" id="Education">Education</option>
                </select>
            </label>
            <label class="item item-input">
              <span class="input-label">Item</span>
                  <input type="text" class="form-control" name="item" placeholder="Expense Item Name" 
                      autocomplete="off" required ng-model="newExpense.item">
            </label>
            <label class="item item-input">
              <span class="input-label">Price</span>
                  <input type="text" class="form-control" name="price" placeholder="Expense Price" 
                      autocomplete="off" required ng-model="newExpense.price">
                   <input type="hidden" class="form-control" name="date" placeholder="Date" 
                       autocomplete="off" required ng-model="newExpense.expensedate">
           </label>
         </div>
               <br>
           <button class="btn btn-default" ng-disabled="expensesForm.$invalid">Add Expense</button>
         </form>
       </div>
     </ion-content>
    </ion-view>
  5. client/www/js/controllers.js ファイルに「Add Expense」REST API 呼び出しを追加します。さらに、このコントローラーに ExpenseController を追加します。
    .controller('ExpenseController', 
             [ '$scope','$rootScope', 'Expense', function($scope, $rootScope, Expense) {
        $scope.newExpense = {};
        $scope.newExpense.category = 'Food';
        $scope.newExpense.expensedate = new Date();
        //Method call to create the expense record
        $scope.addExpense = function()
        {
            Expense.create($scope.newExpense).$promise.then(function(expense)
            {
                $scope.newExpense = {};
                $scope.newExpense.category = 'Food';
    
            });
        };
    }])

カスタマイズした REST API を lb-services.js に追加する

ステップ 2 で追加したカスタマイズ済み REST API をアプリケーションに使用させるには、lb-services.js ファイルに変更を加える必要があります。

  1. client/www/js/lb-services.js を開きます。
  2. Expense モデル宣言の下にある findOne メソッド宣言を探します。
  3. findOne メソッドの直後に以下のコードを追加します。このコードにより、ステップ 2 で expense.js ファイル内に宣言したカスタマイズ済みメソッドが使用されるようになります。
    "getMonthlyCategoryBasedAnalysis": {
         url: urlBase + "/expenses/getMonthlyCategoryBasedAnalysis",
         method: "GET"
       },

angular-chart モジュールをアプリケーションに追加する

このアプリケーションでカテゴリー別の月間経費のチャートを表示するために、angular-chart モジュールを追加します。

  1. OS コマンド・ラインで、カレント・ディレクトリーを client ディレクトリーに変更します。
  2. 必須ライブラリーを client/www/lib フォルダーに含めるために、以下のコマンドを実行します。

    bower install angular-chart.js

    あるいは、angular-chart.js プロジェクト・サイトからライブラリーをダウンロードすることも可能です。
  3. Angular SDK を client/www/index.html ファイルの <head> セクションに追加します。
    <script src="js/lb-services.js"></script>
  4. angular-chart 関連の JavaScript を client/www/index.html ファイルの <head> セクションに追加します。
    <script src="lib/Chart.js/Chart.min.js"></script>
    <script src="lib/angular-chart.js/dist/angular-chart.js"></script>
  5. angular-chart 関連の CSS コードを index.html ファイルの <head> セクションに追加します。
    <link rel="stylesheet" href="lib/angular-chart.js/dist/angular-chart.css">
  6. chart モジュールをアプリケーションに追加するために、chart.js をモジュール宣言に追加します。
    angular.module('starter', ['lbServices','ionic', 'chart.js','starter.controllers'])
  7. chart.js を controllers.js の最初の行に追加します。
    angular.module('starter.controllers', ['chart.js'])

月間カテゴリー別チャートを追加する

カテゴリー別の月間経費を取得するには、getMonthlyCategoryBasedAnalysis メソッドを呼び出す必要があります。

  1. client/www/templates/tabs.html ファイルを開き、Charts タブの <ion-tab> を以下のように変更します。
     <!-- Charts Tab -->
     <ion-tab title="Charts" icon-off="ion-load-d" icon-on="ion-load-b" href="#/tab/charts">
        <ion-nav-view name="tab-charts"></ion-nav-view>
     </ion-tab>
  2. client/www/templates/tabs.html ファイル内の Account タブを削除するかコメント・アウトします。
  3. client/www/templates/tab-chats.html の名前を tab-charts.html に変更します。
  4. tab-charts.html ファイルに、以下のコードを追加します。
    <ion-view view-title="Charts" ng-init="drawCategoryMonthlyChart()">
      <ion-content>
            <canvas id="bar" class="chart chart-bar" chart-data="data" chart-series="series" 
                chart-labels="labels" responsive="false" height="100" chart-legend="true" 
                chart-options="{datasetFill: false, scaleBeginAtZero : false}">
            </canvas>
      </ion-content>
    </ion-view>
  5. client/www/js/controllers.js ファイルに、ExpenseController コントローラーの一部として以下のコードを追加します。
    //Method call to draw the chart. Calls the REST API & forms the angular chart based variables.
      $scope.drawCategoryMonthlyChart = function()
        {
            Expense.getMonthlyCategoryBasedAnalysis().$promise.then(function(results)
            {
                      expenseData = results.data;
                var foodPrice = 0, travelPrice = 0, eduPrice = 0, miscPrice = 0;
                for(i=0;i<4;i++)
                {
                     if(expenseData[i].category == "Food")
                         foodPrice = expenseData[i].price;
                                 if(expenseData[i].category == "Travel")
                        travelPrice = expenseData[i].price;
                                 if(expenseData[i].category == "Education")
                        eduPrice = expenseData[i].price;
                                if(expenseData[i].category == "Miscellaneous")
                        miscPrice = expenseData[i].price;
                }
    
    
            $rootScope.labels = ['Food','Travel','Education','Miscellaneous'];
            $rootScope.series = ['ThisMonth'];
               $rootScope.data = [
                  [foodPrice, travelPrice, eduPrice, miscPrice]
                   ];
              })
        };

ステップ 4. アプリケーションを Bluemix にプッシュする

サーバー・アプリケーションを Bluemix にプッシュして、クライアントが REST API を呼び出せるようにします。

  1. オプション: Bluemix にアップロードするコードの量を減らすには、クライアント・フォルダーを別の場所に移動し、(ステップ 5 の手順で) その新しい場所からクライアント・アプリケーションを実行します。
  2. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker ディレクトリーに変更して、以下のコマンドを実行します。

    cf push ExpenseTracker -c "node server/server.js"

  3. http://<アプリ名>.mybluemix.net/explorer (ここで、<アプリ名> はステップ 1 で Bluemix 内に作成した expense-tracker Node.js アプリケーションの名前です) にアクセスし、REST API が実行されていることを確認します。

ステップ 5. クライアント・ハイブリッド・アプリケーションを実行する

クライアント・アプリケーションはハイブリッド・アプリケーションであるため、ブラウザー、エミュレーター、またはモバイル端末内で実行することができます。このセクションでは、ブラウザーまたは iOS 端末内で実行する方法を紹介します。

ブラウザーでアプリケーションをテストする

  1. client/www/js/lb-services.js ファイル内で、urlBase が Bluemix の経路 http://<アプリ名>.mybluemix.net/api を指すように変更します。
  2. OS コマンド・ラインで、カレント・ディレクトリーを ExpenseTracker/client ディレクトリーに変更して、以下のコマンドを実行します。

    ionic serve

  3. ブラウザーで http://localhost:8080/resources/docs にアクセスします。「Add Expense (経費の追加)」をクリックして、経費を追加するためのフォームをテストします。「Add Expense (経費の追加)」Web UI のスクリーンショット
    「Add Expense (経費の追加)」Web UI のスクリーンショット
  4. 「Charts (チャート)」をクリックして、経費レポートを表示します。「Charts (チャート)」Web UI のスクリーンショット
    「Charts (チャート)」Web UI のスクリーンショット

iOS 端末でアプリケーションをテストする (オプション)

  1. OS コマンド・ラインで、カレント・ディレクトリーをアプリケーションの client フォルダーに変更して、以下のコマンドを実行します。

    ionic platform add ios

    このコマンドにより、iOS プラットフォームのサポートがクライアント・アプリケーションに追加されます (同様に、ionic platform add android を実行すると、Android プラットフォームのサポートがクライアント・アプリケーションに追加されます)。
  2. ionic build ios を実行して、iOS 端末用プロジェクトをビルドします。
  3. 前述のコマンドによって、Xcode プロジェクトを格納する client/platforms/ios という名前のフォルダーが作成されます。このプロジェクトを Xcode ツールで開きます。USB で端末を接続し、この端末を選択してプロジェクトを実行します。Xcode ツールで端末を選択する部分のスクリーンショット
    Xcode ツールで端末を選択する部分のスクリーンショット
  4. 経費を追加して経費チャートを表示するためのアプリケーションのインターフェースをテストします。「Add Expense (経費の追加)」モバイル UI のスクリーンショット
    「Add Expense (経費の追加)」モバイル UI のスクリーンショット
    「Charts (チャート)」モバイル UI のスクリーンショット
    「Charts (チャート)」モバイル UI のスクリーンショット

: このアプリケーションは REST API を呼び出すことから、HTTP トランスポートにアクセスする必要があります。「App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure (平文による HTTP (http://) リソースのロードはセキュアでないため、アプリのトランスポート・セキュリティーによってブロックされました)」というメッセージを受け取る可能性があります。その場合、アプリケーションの client/platforms/ios/client/Info.plist ファイルに以下のコードを追加して、一時的な例外を構成することができます。

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>  </dict>

まとめ

このチュートリアルで、StrongLoop LoopBack フレームワークと Ionic フレームワークを使用してサンプル・アプリケーションを開発したことで、適切なツールを使用すれば、いかに簡単に REST API を公開して、それらの API をハイブリッド・アプリケーションで使用できるかを理解できたことと思います。さらにモデル間の関係を定義し、本番に対応できるエンタープライズ品質のアプリケーションを作成して、このチュートリアルで学んだ知識を広げてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Web development, Cloud computing
ArticleID=1034438
ArticleTitle=経費追跡用ハイブリッド・アプリケーションを作成する
publish-date=06302016