使用 Bluemix Push 服务开发 Angular Ionic 移动应用程序

内容简介：使用 Bluemix Push 服务开发 Angular Ionic 移动应用程序

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

本教程将展示如何通过 IBM bms-push Cordova 插件，创建一个使用 IBM Bluemix® Push 服务 的入门级 Ionic 移动应用程序。以这种方式使用该插件，可以从您的 Angular 控制器内部访问推送服务。本教程将介绍在 Ionic AngularJS 移动应用程序中正确使用 bms-push 插件所需的最少步骤。还将介绍如何使用该插件创建一个 Bluemix Push AngularJS 服务，以及如何以 “Angular 方式” 配置和调用该服务。

在 GitHub 上获取代码

执行以下步骤将获得相同的代码，并掌握在 AngularJS 应用程序中使用 IBM Bluemix Push 的实用知识。

要在 IBM Bluemix 上创建一个新的移动后端：

1. 登录到 Bluemix 仪表板 并创建一个新应用程序。
2. 选择 Boilerplates ，然后选择 Mobile First Starter 样板。
3. 为应用程序键入一个唯一名称并单击 Finish 。

该应用程序现在应该已经创建好了，而且将包含一个示例 To Do 应用程序，后者使用 StrongLoop 在 Node.js 运行时环境中运行。该应用程序还将包含 Cloudant NoSQL 数据库服务、推送通知功能和 IBM Bluemix App ID 服务 。

本教程将仅使用推送通知服务。要测试新创建的应用程序，可以打开 Web 浏览器并访问应用程序路径。

安装 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 Bluemix Push cordova 插件。（这还会添加 IBM Bluemix Core 插件 (bms-core)。）

在最喜欢的 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);
    };
})

打开 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')

appGUIDFromBluemixServiceHere 和 clientSecretFromBluemixServiceHere 的值是从 Bluemix Push 服务获得的。在 Bluemix 仪表板中打开该服务，选择 Configure 菜单并单击靠近页面右上角的 Mobile Options 按钮，以获取这些值。

请注意，对于生产应用程序：这些值绝不应存储在生产应用程序的代码中。应从后端将它们提供给该应用程序，通常作为对成功登录的响应。

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

打开 www/js/controllers.js 文件并找到 AppCtrl 控制器。通过将此行从 .controller('AppCtrl', function ($scope, $ionicModal, $timeout) { 更改为 .controller('AppCtrl', function ($scope, $ionicModal, $timeout, BluemixService, appGUID, clientSecret) { ，将新 BluemixService 注入 AppCtrl 控制器中。

请注意，我们还注入了之前在 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 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);
    };

现在只剩下为您选择的平台设置推送和核心插件了。此过程非常复杂，而且有可能发送变化，所以已超出了本教程的讨论范围。 GitHub 上详细介绍了该过程。请注意，本教程已介绍了一些步骤。

此应用程序的成功与否被记录到控制台，仅在从设备或模拟器调用时，推送通知才起作用（而不是从浏览器调用，所以使用 ionic serve 命令运行该应用程序不会调用推送注册功能）。您需要查看模拟器或设备日志，以确定此应用程序在正常工作。

结束语

Ionic 和 Cordova 是构建混合移动应用程序的流行组合，但不是所有 Cordova 插件都是为了在类似 Ionic 这样的 AngularJS 框架内使用而设计的。对于初学 Ionic 的开发人员，可能对此特别失望，而且最终可能会浪费您许多时间来尝试确定如何让它们协同工作。希望本教程对那些想以正确的 Angular 方式使用 Bluemix Push 服务的读者有所帮助。

以上所述就是小编给大家介绍的《使用 Bluemix Push 服务开发 Angular Ionic 移动应用程序》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• Flutter 是移动应用程序开发的未来？
• 进行移动安全测试，从而保障应用程序安全
• Flutter 是移动应用程序开发的未来？
• Ionic 4.4.0 发布，开源移动应用程序开发框架
• 构建移动 Web 应用程序来帮助流浪狗，第 1 部分
• 构建移动 Web 应用程序来帮助流浪狗，第 1 部分

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。