Enabling Push Notifications Part 2 of 3

This document is intended for the average Titanium Developer to enable push notifications. It is assumed that the reader already has a basic knowledge of Titanium and the APIs.

Today we will talk about Part 2 of 3 of Push Notifications, which begins with Google App Registration.

Register your application with Google

Android Setup

Create a Google API Project

Register with Appcelerator Cloud Services

Step 1 : Create a Google API Project

You will need to open the Google Developers Console by visiting https://cloud.google.com/console. From there you will need to sign in with your Google ID that you want associated with this project. Once signed in you will see a basic screen and a big red button that says ‘CREATE PROJECT’.

Enter a Project Name, and ignore Project ID. Project ID is randomly generated by Google to avoid duplication of IDs. Click the ‘Create’ button and the Google Developer.

Console should refresh. Now you should be on the projects Overview page. At the top of this page you will see Project ID and Project Number.

Copy the Project Number, since this will be used at a later point as the GCM Sender ID. On the left corner of the page there is an APIs & Auth section. Go to that page and a list of API items will populate. Turn On the Google Cloud Messaging for Android.

Again under APIs & Auth you will see ‘Credentials’, click there. Now you will see a section called ‘Public API Access’. Click the ‘CREATE NEW KEY’ button to generate an API Access Key.

A popup will appear, on that select ‘Server Key’. Another popup will appear asking you to enter IP Addresses in the text field, just click ‘Create’.

DO NOT ENTER ANY IP ADDRESSES

Now under the Public API access section there is a section for API key with a rather strange combination of letters & numbers. Copy that text and hang onto it. Now go to the Appcelerator Dashboard https://dashboard.appcelerator.com/.

As before select the app you are working with and click the ‘Cloud’ tab. On the left menu click ‘Settings & Configurations’. Then on the tabbed menu click ‘Android Push’. It will ask you for the GCM API Key and GCM Sender ID, which you should have saved. Enter those values in and click ‘Save Changes’.

Implement the code into a Common JS library

Ensure that you are using a Common JS library for notifications. Create a ‘notifications.js’ file inside the ‘lib’ folder. If the folder does not exists then create it.

iOS Code Setup

With iOS you must use Ti.Network.registerForPushNotifications the first time the user enters the application. After registering with the server, the function should return a device token. Save this device token in app properties.

Example : Ti.App.Properties.setString(‘deviceToken’, e.deviceToken);

However make sure you set the application properties on the callback and not inside the common JS library. These lib files can sometimes act strangely when it comes to saving app properties.

index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

//require the notifications common js lib file

varnotifications=require('notifications');

//check for a device token

vardeviceToken=Ti.App.Properties.getString('deviceToken');

//check to see if deviceToken exists

if(deviceToken===''){

//create a device token by registering for notifications

deviceToken=notifications.register();

//set the deviceToken app property

Ti.App.Properties.setString('deviceToken',deviceToken);

}

//open the index window

$.index.open();

//controller

varmainWindow=Alloy.createController('Main').getView();

//open the mainWindow

mainWindow.open();

notifications.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

//require ti.cloud for iOS Notifications

varCloud=require('ti.cloud');

//register the device and receive a token

exports.register=function(){

Ti.Network.registerForPushNotifications({

// Specifies which notifications to receive

types:[

Ti.Network.NOTIFICATION_TYPE_BADGE,

Ti.Network.NOTIFICATION_TYPE_ALERT,

Ti.Network.NOTIFICATION_TYPE_SOUND

],

success:deviceTokenSuccess,

error:deviceTokenError,

callback:receivePush

});

// Process incoming push notifications

functionreceivePush(e){

alert('Received push: '+JSON.stringify(e));

}

// Save the device token for subsequent API calls

functiondeviceTokenSuccess(e){

returne.deviceToken;

}

// Display an error upon failure to register

functiondeviceTokenError(e){

alert('Failed to register for push notifications! '+e.error);

}

};

The device token that is generated will allow the application to receive notifications. You will be able to register the device with ‘Channels’. The server can push information to certain Channels. Say you want sports news updates. Then a Channel called ‘sports_updates’ could be created. Channels are not done on the server side. Creation is done on the user side. There is not a way to manually add a channel on the ACS Dashboard. Once a user subscribes to a channel for the first time then it is created.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//subscribe to a specific channel

exports.subscribe=function(channel,token){

Cloud.PushNotifications.subscribeToken({

device_token:token,

channel:channel

},function(e){

if(e.success){

alert('Subscribed');

}else{

alert('Error:\n'+((e.error&amp;&amp;e.message)||JSON.stringify(e)));

}

});

};

Subscribing a device token to a channel is a function in the common JS library you created for Push Notifications. In this function we pass two variables. One being the channel and the other being the device token that was generated earlier. Each one is needed for the subscription.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//unsubsribe from a specific channel

exports.unsubscribe=function(channel,token){

Cloud.PushNotifications.unsubscribeToken({

device_token:token,

channel:channel,

},function(e){

if(e.success){

alert('Unsubscribed');

}else{

alert('Error:\n'+((e.error&amp;&amp;e.message)||JSON.stringify(e)));

}

});

};

You will also need to allow the user to unsubscribe from Channel based Pushed Notifications, which can be done using the unsubscribe function.

Main.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

//device token

vardeviceToken=Ti.App.Properties.getString('deviceToken');

//require notificiations lib file

varnotifications=require('notifications');

//create view to house label and buttons

varcontainer=Ti.UI.createView({

width:Ti.UI.FILL,

height:Ti.UI.FILL,

top:30,

layout:'vertical',

backgroundColor:'#FFFFFF'

});

//create label for title

varchannelLabel=Ti.UI.createLabel({

width:Ti.UI.FILL,

height:Ti.UI.SIZE,

text:'Select a Channel',

textAlign:'center'

});

//create sports channel button

varsportsButton=Ti.UI.createButton({

width:Ti.UI.FILL,

height:Ti.UI.SIZE,

top:10,

title:'Sports'

});

//sports button event listener

sportsButton.addEventListener('click',function(e){

if(deviceToken!==''){

notifications.subscribe('sports_updates',deviceToken);

}else{

alert('Error, device not registered for Push Notifications');

}

});

//add elements together

container.add(channelLabel);

container.add(sportsButton);

$.win.add(container);

Now we need to create a sample page to test this all out with. It will have a view, label, and button. Clicking this button will subscribe the user to sports updates from the ACS server.

This will create a basic view with a label and button on top of the window. It will say ‘Sports’ and upon click will call the register function from the notifications lib file.

notifications.js Again

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

exports.userLogin=function(){

// Log in to ACS

Cloud.Users.login({

login:'push_notifications',

password:'pushy'

},function(e){

if(e.success){

alert('Login successful');

}else{

alert('Error:\n'+

((e.error&amp;&amp;e.message)||JSON.stringify(e)));

}

});

};

You can also have users set up on the ACS server and log them in and subscribe to channels. However the user account must exist. Generally one user is created for the public, such as the ‘push_notifications’ user we see in the code. This is perfect for just a basic app with notifications. If you want user sessions and give the ability for people to create their own accounts you will have to look into Titanium.Cloud.Users on the documentation.

Try it and leave a comment below to let us know if you had any problems following these steps.