Sending Push Notifications through Appcelerator Cloud API

How to send Push Notifications from a Titanium application by using the Appcelerator Cloud Services.

An in depth tutorial including “iOS Push Notifications” and “Goolge Cloud Messaging for Android” services setup and configuration.


This tutorial demonstrates how to use the Push Notification Cloud API in Titanium Mobile. Specifically, the demo project will allow you to send a push notification to any subscribed device.

Download source files

Prerequisites

This tutorial assumes that you are running Titanium Studio and have the latest SDK updates installed, which was 3.3.0 at the time of this writing.

Step 1: Creating a New Project

In Studio, select File > New Mobile Project.

  1. Select the Classic > Single Window Applications template and click Next.
  2. On the Project Location screen, enter push-notifications for the Project name and com.your-domain.pushnotifications. Replace your-domain with your personal or organization’s domain. Leave the other fields at their default values.
  3. Check the “Cloud-enable this application” option.
  4. Click OK.

The new project opens in Studio.

Step 2: Creating the User Interface

Edit the FirstView, which is located within the FirstView.js file under the “Resources/ui/common” folder. Delete any existing content and replace it with that in the following link:

FirstView source code

Edit the strings.xml file, which is located under the “i18n/en” folder. Delete any existing content and replace it with that in the following link:

strings.xml source code

Step 3: Waiting for Push notifications

Edit the TiApp.xml file and add the “ti.cloud” and “ti.cloudpush” modules.

Edit the app.js file, which is located under the “Resources” folder. Delete any existing content and replace it with that in the following link:

app.js source code

Step 4: Configuring push services for iOS devices

Please read first the related section in Appcelerator Documentation pages.

iOS Development Certificate

Log in to the Apple Developer Member Center as the Team Agent or Admin and create a new Development Certificate.

Please note that if you have already created a Development Certificate in the past there is no need to create a new one. You could use that for the steps that follow.

Select “iOS Development” for the “type of certificate you need”.

Download the certificate and store the file in a safe location. It will be needed in the steps that follow.

iOS Application Identifier

Create a new App ID by selecting the button that is marked in the next screen.

Set the Name of the app and its Bundle ID

Pay attention to the Bundle ID value. It should be the value of the <id> element in your project’s tiapp.xml file.

In the “App Services” section enable the “Push Notifications” service and click “Continue”

Review the provided information and click “Submit”

You are ready now to proceed and generate an Apple Push Notification Certificate for that Application

Apple Push Notification Certificate

In the Apple Developer Member Center locate the Certificates, Identifiers & Profiles area, click Certificates, then click the add (+) button near the top-right corner.

Select “Apple Push Notification service SSL (Sandbox) and click “Continue”

Select our App Id and click “Continue”

Follow the remaining steps and generate the Certificate.

Download it and store it in safe location. We will use this file in order to generate the so-called “.p12" file.

The .p12 certificate file

Double-click the downloaded “aps_development-pushnotifications.cer” file to install it into your keychain.

The Keychain Access application will open. If not you can start it manually (Applications > Utilities > Keychain Access).

Select the “login” keychain and the “Certificates” category and locate the entry that corresponds our App.

Select the certificate you installed previously and select File > Export Items….

Select Personal Information Exchange (.p12) from the File Format menu and click Save.

Enter a password for the certificate, then click Save.

Keep that .p12 file and the password you have set in a safe location. They will be needed when we will configure the Appcelerator Cloud Service.

Step 5: Configuring push services for Android devices

Please read first the related section in Appcelerator Documentation pages.

Google API project for push notifications

Login into the Google API Console by using your Google Account and create a new project.

Select “APIs & auth > APIs” in the sidebar on the left. Locate and turn on the “Goolge Cloud Messaging for Android” service.

Select “APIs & auth > Credentials” in the sidebar on the left and create a new “Public API Access” key.

Select the creation of a “Server Key

Left the “IP ADDRESSES” text field empty and click “Create”

Keep note of the “API KEY” and the “Project Number”. These values will be needed when we will configure the Appcelerator Cloud Service.

Step 6: Configuring the Cloud Service

Login to App Console

Log in to your Appcelerator App Console, locate the “push-notification” app and click on the “Manage ACS” link

Check first that the “Development” mode is turned on and then visit the “Settings” tab. Then locate the iOS and Android Push configuration blocks.

iOS Configuration

Click on the “Choose File” button and select the .p12 certificate file you have created in Step 4.

Enter the password you have set for this file and click on the “Save Push Certificate Changes” button.

Android Configuration

Use the “API KEY” and “Project Number” values you end up with in the Step 5. Use the former for the “GCM API Key” field and the latter for the “GCM Sender ID”.

Step 7: Sending a push notification

Check first that the “Development” mode is turned on and then visit the “Push Notifications” tab. Enter a message into the “Alert” field and click the “Send Push Notification” button.

Step 8: Test our application

Enjoyed this Post?

Follow us on Twitter, or Google+ or even check our Titanium App Templates

References

Titanium.Cloud.PushNotifications API, Titanium.CloudPush API, Titanium Push Notification Guide, Source code of this tutorial, Jaysin Trevino for the cover photo.

/Stavros Kounis, skounis.github.io