目次


Bluemix Push サービスを利用して Angular Ionic モバイル・アプリをデプロイする

Angular 流に Push 通知をセットアップ、構成、テストする

Comments

Ionic は、Web テクノロジーを使用したハイブリッドのクロスプラットフォーム・モバイル・アプリを作成するためによく使われているフレームワークです。Ionic は AngularJS フレームワークをベースに、Cordova を使用してネイティブ・モバイル端末の機能 (Push、カメラ、GPS など) を JavaScript コードに公開します。

このチュートリアルでは、IBM bms-push Cordova プラグインを介して IBM Bluemix Push サービスを利用するスターター Ionic モバイル・アプリを作成する方法を説明します。このようにプラグインを使用することで、Angular コントローラー内から Push サービスにアクセスできるようになります。このチュートリアルでは、Ionic AngularJS モバイル・アプリ内で bms-push プラグインを適切に使用するために必要な最小限の手順を案内します。プラグインを使用して Bluemix Push AngularJS サービスを作成してから、「Angular 流」にサービスを構成して呼び出す方法を学んでください。

以下に説明する手順に従うと、最終的に GitHub から入手するコードと同じコードが完成し、AngularJS アプリ内で IBM Bluemix Push サービスを利用するための実用的知識が身に付きます。

1

Bluemix 内でモバイル・バックエンドを作成する

以下の手順に従って、Bluemix 上に新しいモバイル・バックエンドを作成します。

  1. Bluemix ダッシュボードにログインし、新しいアプリケーションを作成します。
  2. 「Boilerplates (ボイラープレート)」を選択し、「Mobile First Starter」ボイラープレートを選択します。
  3. アプリケーションに固有の名前を入力してから「Finish (完了)」をクリックします。

新しく作成されたアプリには、StrongLoop を使用した Node.js ランタイム環境内で稼働するサンプル ToDo アプリが含まれている他、Cloudant NoSQL データベース用のサービス、Push 通知機能、そして IBM Bluemix App ID サービスも含まれています。

このうち、このチュートリアルでは Push 通知サービスだけを利用します。新しく作成されたアプリをテストするには、Web ブラウザーを開いてアプリのルートを表示してください。

2

Ionic アプリを作成する

Ionic をインストールし、Ionic のコマンド・ライン・ツールを使用して新しいアプリを作成します。

  1. Node.js をインストールします。
  2. コマンド npm install -g cordova ionic を使用して、Ionic および Cordova コマンド・ライン・ツールをインストールします。
  3. アプリを作成するフォルダーにカレント・ディレクトリーを変更し、コマンド ionic start APP-NAME side-menu を使用して新しい Ionic プロジェクトを作成します (side-menu コード・テンプレートを使用したのは、より実際的なサンプルにすることのみが目的です)。
  4. cd を使用して、新しく作成したプロジェクト・フォルダーにカレント・ディレクトリーを変更します。
  5. コマンド ionic platform add android ios を使用して、アプリケーションでターゲットとするモバイル・プラットフォームを追加します。
  6. コマンド cordova plugin add bms-push を使用して、IBM Bluemix Push cordova プラグインを追加します (これにより、IBM Bluemix Core プラグイン (bms-core) も追加されます)。
3

Angular Bluemix Push サービスを作成する

任意の IDE 内でアプリを開き、www/js フォルダー内に services.js という名前のファイルを作成します。作成したファイルに、以下のコードを追加します。

angular.module('starter.services', [])

.service('BluemixService', function ($window, $q) {

    this.connect = function (appGuid, clientSecret) {
        // create deferred object using $q
        var deferred = $q.defer();
        if (window.cordova) {
            $window.BMSClient.initialize(BMSClient.REGION_UK);
            $window.BMSPush.initialize(appGuid, clientSecret);
            var success = function (message) { //fires on success of MFPPush.registerDevice
                var deviceId = JSON.parse(message).deviceId;
                deferred.resolve(deviceId);
            };
            var failure = function (message) { //fires on failure of MFPPush.registerDevice         
                deferred.reject(message);
            };

            var options = {
                ios: {
                    alert: true,
                    badge: true,
                    sound: true
                }
            };

            var notification = function (notification) {
                //if we don't have this then alerts are NOT displayed at all when the app is open
                alert(notification);
                //this will just pop up a default alert box when the app is open. When the app is not open, the alert will be handled by the native alert process 
                //instead of the default alert pop up you could use something like the cordova toast plugin here
                // eg $cordovaToast.showShortTop(notification).then(function(success) {
                        // success
                      //}, function (error) {
                        // error
                      //});
            };
            $window.BMSPush.registerNotificationsCallback(notification);
            $window.BMSPush.registerDevice(options, success, failure);
            deviceId = deferred.promise;
        } else {
            deviceId = "Web View";
        }
        return $q.when(deviceId);
    };
})
4

services.js ファイルと新しく作成した Push サービスを利用するようにアプリをセットアップする

www/index.html ファイルを開き、新しく作成した services.js ファイルへのリンクを追加します。ファイル内に、app.js と controllers.js へのリンクが含まれているセクションがあるので、そこに新しいリンクを追加してください。

    <script src="js/app.js"/>
    <script src="js/controllers.js"/>
    <script src="js/services.js"/>

app.js ファイルを開き、angular.module で始まる行を angular.module('starter', ['ionic', 'starter.controllers']) から angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) に変更します。このように変更すると、アプリが services.js 内の新しいサービス・モジュールを認識するようになります。

上記で更新した行の下に、以下の定数を追加します。

.constant('appGUID', 'appGUIDFromBluemixServiceHere')	
.constant('clientSecret', 'clientSecretFromBluemixServiceHere')

appGUIDFromBluemixServiceHereclientSecretFromBluemixServiceHere の値は、Bluemix Push サービスから取得します。Bluemix ダッシュボード内で Push サービスを開いて「Configure (構成)」メニューを選択し、ページの右上近くにある「Mobile Options (モバイル・オプション)」ボタンをクリックして、これらの値を取得します。

本番アプリの場合の注意事項: 本番アプリ内では、これらの値をコード内に決して保管しないでください。これらの値は、アプリのバックエンドからアプリに提供する必要があり、通常はログイン成功に対するレスポンス内で提供します。

5

サービスを利用する

このサービスを利用するには、1 つ以上のコントローラーからサービスを呼び出します。この例では、スターター・テンプレートに含まれている AppCtrl コントローラー内の doLogin 関数に対する呼び出しを追加します。

www/js/controllers.js ファイルを開き、AppCtrl コントローラーを見つけます。新しい Bluemix サービスを AppCtrl コントローラーに注入するために、行 .controller('AppCtrl', function ($scope, $ionicModal, $timeout) {.controller('AppCtrl', function ($scope, $ionicModal, $timeout, BluemixService, appGUID, clientSecret) { に変更します。

ここでは、前に app.js 内で定義した appGUID および clientSecret 定数も注入していることに注意してください。本番アプリ内では、これらの定数がアプリのコード内に保管されないよう、何らかの動的な手段を使用して定数がコントローラーに渡されるようにする必要があります。

AppCtrl コントローラー内にある以下の doLogin 関数を見つけます。

// Perform the login action when the user submits the login form
    $scope.doLogin = function () {
        console.log('Doing login', $scope.loginData);

        // Simulate a login delay. Remove this and replace with your login
        // code if using a login system
        $timeout(function () {
            $scope.closeLogin();
        }, 1000);
    };

上記の関数を以下のように変更します。

// Perform the login action when the user submits the login form
    $scope.doLogin = function () {
        console.log('Doing login', $scope.loginData);

        BluemixService.connect(appGuid, clientSecret).then(function success(response) {
            //we were successful and the response contains the deviceID supplied by the Bluemix push service
            console.log("We registered OK. The deviceID of this device is: " + response);
        }, function failure(response) {
            //Registering for push did not work
            console.log("Registering for push did not work");
        });

        // Simulate a login delay. Remove this and replace with your login
        // code if using a login system
        $timeout(function () {
            $scope.closeLogin();
        }, 1000);
    };
6

プラグインを構成してテストする

残る作業は、選択したプラットフォームに応じて push および core プラグインを構成することだけです。このプロセスはかなり込み入っていて、プラットフォームによって異なるため、このチュートリアルでは取り上げません。このプロセスについては、GitHub 上で詳しく説明されています。ただし、プロセスのいくつかのステップは、このチュートリアルですでに取り上げました。

このアプリの成功または失敗は単にコンソールに記録されるだけで、Push 登録は端末またはエミュレーターから呼び出した場合にだけ行うことができます (ブラウザーから呼び出しても登録できないため、ionic serve コマンドを使用してアプリを実行する場合、Push 登録は呼び出されません)。このアプリが正常に機能しているかどうかを調べるには、エミュレーターまたは端末のログを確認する必要があります。

まとめ

Ionic と Cordova の組み合わせは、ハイブリッド・モバイル・アプリを構築する際によく使用されていますが、すべての Cordova プラグインが Ionic のような AngularJS フレームワーク内で使用されることを前提に設計されているわけではありません。このことは、Ionic をまだ使い慣れていない開発者にとっては特にもどかしい問題になることがあり、この 2 つをどのようにして連動させるのかを見つけ出すために何時間も無駄にしてしまう場合もあります。このチュートリアルが、Angular 流の正しい方法で Bluemix Push サービスを利用することを目指す開発者のお役に立つことを願います。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1046306
ArticleTitle=Bluemix Push サービスを利用して Angular Ionic モバイル・アプリをデプロイする
publish-date=05252017