angular ionic_使用IBM Cloud Push服务开发Angular Ionic移动应用程序

免费试用IBM Cloud

使用IBM Cloud Lite快速轻松地构建您的下一个应用程序。 您的免费帐户永不过期，并且您将获得256 MB的Cloud Foundry运行时内存以及2 GB的Kubernetes Clusters。 获取所有详细信息，并了解如何开始。 如果您是IBM Cloud的新手，请在developerWorks上查看IBM Cloud Essentials课程 。

Ionic是使用Web技术创建跨平台混合移动应用程序的流行框架。 Ionic基于AngularJS框架，并使用Cordova将原生移动设备功能（例如Push，Camera或GPS）公开给JavaScript代码。

本教程说明如何通过IBM bms-push Cordova插件创建使用IBM Cloud Push服务的入门级​​Ionic移动应用程序。 以这种方式使用插件可以从Angular控制器中访问推送服务。 本教程将指导您完成在Ionic AngularJS移动应用程序中正确使用bms-push插件所需的最少步骤。 它描述了如何使用该插件创建IBM Cloud Push AngularJS服务，然后如何以“ Angular方式”配置和调用该服务。

在GitHub上获取代码

遵循以下步骤将得到相同的代码，并为您提供在AngularJS应用程序中使用IBM Cloud Push的实用知识。

在IBM Cloud中创建移动后端

要在IBM Cloud上创建新的移动后端：

1. 登录到IBM Cloud仪表板并创建一个新应用程序。
2. 选择样板 ，然后选择Mobile First Starter样板。
3. 输入应用程序的唯一名称，然后单击完成 。

现在应该创建该应用程序，并将包含一个使用StrongLoop在Node.js运行时环境中运行的示例To Do应用程序。 它还将包含针对Cloudant NoSQL数据库的服务，推送通知功能以及IBM Cloud App ID服务 。

在本教程中，我们将仅使用推送通知服务。 通过打开网络浏览器并转到应用路径来测试新创建的应用。

创建离子应用

要安装Ionic并使用其命令行工具来创建新应用，请执行以下操作：

1. 安装Node.js。
2. 使用npm install -g cordova ionic安装Ionic和Cordova命令行工具。
3. 转到您要在其中创建应用程序的文件夹，并使用ionic start APP-NAME side-menu创建一个新的ionic项目。 （我们选择使用侧面菜单代码模板只是为了使它更像是真实示例。）
4. 使用cd进入新创建的项目文件夹。
5. 使用ionic platform add android ios为您的应用程序添加目标移动平台。
6. 使用cordova plugin add bms-push添加IBM Cloud Push cordova插件。 （这还将添加IBM Cloud Core插件（bms-core）。）

创建Angular IBM Cloud 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);
    };
})

设置应用以使用services.js文件和我们新的推送服务

打开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行更改为angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) 。 这使应用程序知道了services.js文件中的新服务模块。

在上面更新的行下添加以下常量：

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

从IBM Cloud Push服务获取appGUIDFromBluemixServiceHere和clientSecretFromBluemixServiceHere的值。 在IBM Cloud仪表板中打开服务，选择“ 配置”菜单，然后单击页面右上方附近的“ 移动选项”按钮以获取这些值。

生产应用程序注意事项：这些值永远不应存储在生产应用程序的代码中。 通常应从成功登录到应用程序从后端将它们提供给应用程序。

使用服务

该服务将通过一个或多个控制器的调用来使用。 对于我们的示例，我们将在入门模板中包含的AppCtrl控制器内添加对doLogin函数的调用。

打开www / js / controllers.js文件，然后找到AppCtrl控制器。 注入新BluemixService通过从改变该行的AppCtrl控制器.controller('AppCtrl', function ($scope, $ionicModal, $timeout) {到.controller('AppCtrl', function ($scope, $ionicModal, $timeout, BluemixService, appGUID, clientSecret) { 。

请注意，我们还注入了appGUID在app.js中定义的appGUID和clientSecret常量。 在生产应用程序中，应通过某种动态方式将它们提供给控制器，以便它们不会存储在应用程序的代码中。

从以下位置更改doLogin函数（位于AppCtrl控制器内）：

// 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 IBM Cloud 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);
    };

配置插件并测试

现在剩下的就是为所选平台设置push和core插件。 该过程非常复杂，可能会发生变化，因此超出了本教程的范围。 该过程在GitHub上有详细描述。 请注意，本教程已经介绍了一些步骤。

该应用程序的成功或失败仅记录在控制台中，并且只有在从设备或仿真器（而不是浏览器）调用时，推送注册才有效。因此，使用ionic serve命令运行该应用程序不会调用推送注册。 您将需要查看模拟器或设备日志以查看此应用程序的运行情况。

结论

Ionic和Cordova是构建混合移动应用程序的流行组合，但并非所有Cordova插件都设计用于Ionic之类的AngularJS框架。 这对于Ionic新手开发人员而言尤其令人沮丧，并且最终可能会浪费您许多时间，试图弄清楚如何使他们一起工作。 我希望本教程对希望以正确的Angular方式使用IBM Cloud Push服务的人们有所帮助。

---

翻译自: https://www.ibm.com/developerworks/cloud/library/cl-develop-angular-ionic-mobile-applications-using-bluemix-push/index.html