文档章节

Send a Push notification from a mobile app in 5 m

cyper
 cyper
发布于 2014/06/26 23:07
字数 1488
阅读 48
收藏 0

IBM BlueMix is a beta-level product, and it will be changing as we continually make things better and easier to use. We'll do our best to keep this article up to date, but it will not always be perfectly aligned. Thanks for understanding.

You may already know about some of the benefits of IBM Bluemix™, IBM's open platform for developing and deploying mobile and web applications. The many pre-built services in Bluemix make it easy to build and enhance applications. In this article, we'll cover the steps for how to use JavaScript APIs to send a Push notification from your mobile app.

This article uses the open source Apache Cordova hybrid mobile application project. Apache Cordova enables mobile app developers to access native device functions through JavaScript. Cordova apps are written using standard web technologies, such as HTML, CSS, and JavaScript.

As a mobile application developer, I want to get up and running with traditional native features like Push notifications as fast as possible. With open technologies like Apache Cordova and Cloud Foundry as part of IBM Bluemix, I found a way.

What you'll need for your application

0
 

Get the code

Create an Apache Cordova project

0
 

If you already have an existing hybrid mobile project, such as an IBM Worklight® project, skip this section.

  1. If you haven't already done so, download the node packaged module for Apache Cordova and set up your environment for Apache Cordova.
  2. After Cordova is installed, open a command prompt.
  3. Create a new project in your current working directory by running the following command:
    cordova create bluemixpush com.example.bluemixpush BluemixPush
  4. Change to the new project directory by running the following command:
    cd bluemixpush
  5. Add the platforms you want to test on, by running the following command:
    ex. cordova platform add android

Note: If this is your first time developing a Cordova project for a specific platform, you need to perform some additional steps to set up the platform's development environment.

For example, to configure an Android environment, perform the following steps:

  1. Install the Android SDK.
  2. Add the Androidtoolsandplatform-toolslocation to yourPATHenvironment variable.
  3. Download ANT and add it to yourPATHenvironment variable.
  4. Ensure that the Java™ path is set in yourPATHenvironment variable. Note: Ensure that it's a full JDK, not just a JRE.
  5. Optionally, download and install Eclipse with ADT to run the emulator and debug your application using the Eclipse LogCat capabilities.

READ:Apache Cordova plugins

Install the ibmbaas npm package

0
 

The Push service used in this article, along with many mobile cloud services provided as part of Bluemix, is available as a node packaged module. Install the ibmbaas package to initialize the Push service with the Bluemix mobile app.

  1. On a command line, change to the hybrid mobile project's www directory.
  2. As stated in the npm documentation for the ibmbaas module, to install for a web or hybrid application, use the bower package manager by running the following command:
    bower install https://hub.jazz.net/git/mobilec/ibmbaas/.git

Install the ibmpush npm package

0
 

Install the IBM Push service from npm:

  1. On a command line, change to the hybrid mobile project's www directory.
  2. As stated in the npm documentation for the ibmpush module, to install for a web or hybrid application, use the bower package manager by running this command:
    bower install https://hub.jazz.net/git/mobilec/ibmpush/.git

Successful installation of the Bluemix ibmpush package results in the following response.

Image shows successful response for installation of Bluemix ibmpush package

Click to see larger image

Set up Bluemix

0
 

Now that you have a hybrid application ready to go and your own IBM Push service installed from npm, you need to set up Bluemix to use the service:

  1. Sign in to Bluemix.
  2. On the dashboard under Applications, click Add an application.
  3. On the new page, select Mobile Cloud under Boilerplates.
  4. Click Create Application. Screenshot shows Boilerplate tab window with Create Application highlighted
  5. In the new dialog box, choose the space and give your application a name. Screenshot shows dialog box where you enter space and a name for your app
  6. Click Create.
  7. You are redirected to the Dashboard, where you now see your application. The green status indicator for the new mobile application running in Bluemix indicates that the app moved through the staging process and started. Screenshot shows dashboard now showing your app and that it started
  8. Click on your application. You are redirected to the Applications page, where you can see the application ID and determine which services are bound to the application. The application ID, as shown in the following figure, is required to connect to the Bluemix services. Make a note of the ID. Screenshot shows your app's ID shown on the Applications page

Familiarize yourself with the Push service

0
 

On the mobile application information page in Bluemix for your new mobile app under Services, see the Push service bound to the application.

Screenshot shows the Services section and the Push service bound to the application

Click the Push service.

This Services section is your dashboard for all Push-related issues for your Bluemix app. You can even use this screen to send a test notification to registered devices.

Integrate Bluemix Push in the mobile app

0
 

Now that you have created a Bluemix app and saved the app ID, go back into development mode. Add the Bluemix Push JavaScript APIs to your hybrid mobile application to push messages:

  1. Open your hybrid application within your favorite IDE.
  2. Point your browser to the index.html page (or main HTML page) within your www directory.
  3. Include the following script tag to begin using the npm Push component installed previously.
    <script src="bower_components/ibmpush/js/IBMPush.min.js"></script>
  4. Include the JavaScript file to initialize the IBM Mobile Backend as a Service (IBMBaas).
    <script src="bower_components/ibmbaas/js/IBMBaaS.min.js"></script>
  5. Initialize the IBMBaas SDK.
    IBMBaaS.initializeSDK(__YOUR_APP_ID__);
  6. Before calling any Push commands, initialize the Push service by including the following JavaScript in your application.
    var push = IBMPush.initializeService();
  7. Send a test message from within the application by invoking the following JavaScript:
    // Push Notification content
    var message = {
        alert : "Hello Bluemix World",
        url : "https://www.ng.bluemix.net"
    }
    
    // Send the notification
    push.sendBroadcastNotification(message).then(function(response) {
        alert("Push sent!" + JSON.stringify(response));
    },function(err) {
        console.log(err);
    	alert('error sending push message: ' + JSON.stringify(err));
    });

For more complicated Push examples using the IBM Push JavaScript APIs, see the JavaScript API section of the IBM Mobile Cloud Services SDK Developer Guide.

Test the app

0
 

Now you're ready to test the app. If you're using a pure Apache Cordova application, use the command line. For example, I am testing an Android application and using Eclipse to monitor the log output using LogCat.

  1. Run the application, for example:
    cordova emulate android
  2. You might see the GCM & APNS credentials error message, as shown. Screenshot shows an example of the GCM & APNS credentials error message
    As the error states, the Bluemix mobile application ismissing GCM & APNS credentials. The Google Cloud Messaging or Apple Push Notification Service credentials (or both) have not been entered for the application in Bluemix. If you receive this error, see Enter Push notification credentials in Bluemix. If you do not see this error, skip to the next step.
  3. After any errors are resolved, you will see a Push success message in the LogCat console. Screen shot shows a success message example
    If you have devices registered with the Push service, you see your message pushed to those devices. To view the list of registered devices, go to the Bluemix console for your application, click on the Push service, and switch to the Registrations tab.

If devices are registered, they are displayed in a table.

With the JavaScript SDK for Bluemix Mobile Backend as a Service Push APIs, it is not possible to register devices to receive Push messages; you must use the Android and iOS native Bluemix SDK.

To register a device with Push to view Push notifications, see "Extend an Android app using the Push cloud service," which includes a complete code example that can be downloaded and installed on your device to test the ability to receive Push messages.

Enter Push notification credentials in Bluemix

0
 

If an error message indicates that the GCM & APNS credentials are missing, follow these steps to correct the problem:

  1. Return to the Bluemix dashboard for your mobile application page.
  2. Select the Push service to open the Push dashboard.
  3. Click the Configuration tab. If no credentials are entered, you see no Push credentials. Screenshot shows the configuration tab page for your applicatin showing no configurations entered
  4. Click Edit for the Push service you want to enable.
  5. If you have your credentials, enter them into the appropriate fields and save. If you do not have credentials and are not sure how to get these credentials, click the informational icon next to the field, as shown. Screenshot shows the info icon that can provide help for entering credentials
    The information dialog box includes a link to how to sign up for Push credentials.

    Note: You can enter two different sets of credentials: one for Sandbox and another for Production. It is easy to toggle the service mode between Sandbox and Production when you're ready to switch.

  6. After the credentials are saved, you are ready to retest the mobile application by using the previous steps.

Conclusion

0
 

You can now add Bluemix Push capabilities to an existing or new hybrid mobile application using the npm ibmpush module and available JavaScript APIs.

本文转载自:http://www.ibm.com/developerworks/library/mo-push-apache-cordova-app/index.html

下一篇: 安装pip
cyper

cyper

粉丝 59
博文 685
码字总数 143352
作品 0
武汉
前端工程师
私信 提问
用 Houston 在本地调试远程通知

Houston 的背景 在 GitHub 上的地址:https://github.com/nomad/Houston,作者又是,简直是惨无人道啊,又高产,又有质量 Houston 能让我们在本地、甚至终端很方便的调试远程通知。 安装 首先...

zhangao0086
2015/05/03
0
0
使用 Windows Azure 和 Windows Push Notification Service 来推送提醒

Over the past little while I have had the pleasure of building the Windows Azure Toolkit for Windows 8. The following is a re-post of my official post on the Windows Azure Blog.......

鉴客
2012/01/23
1K
0
Working (19.12.2017) Push Notifications to Android with C# over Firebase Cloud Messaging

Introduction Here is the full working code that shows up, how to send a push notification from .NET to your Android device(s) over new Google's Firebase Cloud (FCM) Service. All......

infal
2017/12/19
0
0
Using MQTTWarn to monitor server or device

How do your servers talk to you? Most of us monitor what our servers do, in some way or another. We might use Icinga/Nagios for some tasks, or use any of what feels like a myria......

openthings
2015/05/25
156
0
iOS 消息推送原理及实现Demo

一、消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1、Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provi...

Bob_Zheng
2015/11/30
63
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部