Sending Push Notifications to a device

What are we going to build

This tutorial will show you how to set up Push Notifications feature.

Before you start

Tutorial level: advanced

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create.

Configuring Push

1. Open Project > App settings > Push notifications
2. Check ‘Use push notification’ checkbox
3. In ‘Push Settings’ check all three items:
   1. Push sound
   2. Show alert
   3. Badge
      This means that all of the above will happen when a new push notification arrives. For example, checking ‘Push sound’ option will make a sound, Badge will show number of unread notifications.
      
4. Save.

Next we are going to configure device settings.

Configuring the device for Push notifications

Depending on your device and OS, you have to initialize Android settings and/or iOS settings or both of them.

Android

1. Go to https://code.google.com/apis/console/ and sign in.
2. Click Create project… button
3. You will see a list of services. From the list, find Google Cloud Messaging for Android service and turn it on (you will need to accept terms and conditions)
   
4. Scroll up and click API Access item in the left menu:
   
5. Now, copy the project id (75199255876), from the URL: https://code.google.com/apis/console/#project:75199255876:access, and paste it into Sender ID field in Push notifications tab in Tiggzi
6. Copy the API key:
   
   and paste it into API key field
   

That’s it for Android configuration.

iOS

Before yous start, to enable Push Notifications for an iOS app, you must have a Development Certificate if your app registered in Development mode and Production Certificate if your app registered in Distribution mode.

1. In Push notifications tab in Tiggzi, check Production check box if application is in Distribute stage, otherwise leave it unchecked
2. Upload Push Certification file
   For generating Push Notification Certificate you need to open App Ids page, find desired App ID, click Configure button and Check Enable for Apple Push Notification service check box. Then, click Configure button (Select either Development or Production stage)
   Note that Bundle ID shouldn’t have a wild card character otherwise you cannot configure Push Notification properties)
3. Fill the Certificate password that was specified during p12 certificate creation

That’s it for iOS configuration.

Assigning Push Notifications

1. Build the following simple UI:
   
   1. Insert a Grid component and then add a third row
   2. In the first column insert labels and rename the text as shown
   3. The second column also has label. Change the labels names (Name property) as follows:
      1. initLabel
      2. registerLabel
      3. messageLabel
2. Open Events tab
3. For Component select: startScreen
4. For Event select: Push initialize
5. For Action select: Set property
   1. Component name: initLabel
   2. Property name: select Text
   3. Value: DONE
6. Click the green plus button to save event:
   
7. Repeat the steps above (3 - 6) for Push registration fail and Push registration success
   1. Push registration fail
      
      Don’t forget to save the event.
   2. Push registration success
      
      Don’t forget to save the event.You should end up with three events after above steps:
      
8. We need to add one more event. Select startScreen as component, Push notification in Event and Run JavaScript for action. Enter the following code:

   alert (data.aps.alert);
   Tiggzi("messageLabel").text(data.aps.alert);

9. Save.

Subscribe to Channels

1. From app builder, click the Backend Services button (left to Test)
2. A new page will open. Click the PUSH NOTIFICATIONS link in the menu
3. Enter the channel’s name in the Channels Info field (e.g. ‘Channel1′) and click the Add Channel button
4. Open the Projects tab
5. Select one of the channels you have just created
6. Check the app that need to be subscribed to this channel (e.g. ‘pushTestChannels’)
7. Click the Subscribe button

To send the a notification to the channel follow the next steps:

1. On the Push Notifications page, go to the Send Push Notification tab and select the channels:
   
2. Apps selected previously will get the message as push notification.

Unsubscribe from Channels

1. On the Push Notifications page, go to the Projects tab and select the application (e.g. pushTestChannels):
2. Click the “x” icon for those channels that shouldn’t get notifications anymore:
   

Handle Push Notifications from the app

Depending on your app target functionality, you can allow users to handle notifications directly from the application. To do this create following REST Services.

Creating FileDB_settings

When creating choose “Settings (REST settings)”:

The main settings:

Creating RegisterDevice service

The RegisterDevice service is used for registering device ID and token. The main settings of the service present under the Settings tab:

The user request parameters are displayed under the Request tab:

 

deviceId is a device serial number. You can get it calling JS function:

PushNotification.getDeviceUniqueIdentifier();

 

Creating GetChannels service

The GetChannels service is used for getting the list of the added channels to the Push Notifications. The main settings of the service present under the Settings tab:

The Settings file contains the service URL for describing services: https://api.tiggzi.com/rest/push/reg/channel

The user request parameters are displayed under the Request tab:

To generate the response parameters navigate to the Test tab and click the Test button:

The following parameters will be returned: channel ID, channel name, subscription status:

Creating SubscribeChannel service

The SubscribeChannel service is used for adding the channels to the subscription list.

The main settings of the service present under the Settings tab:

The request parameters of the service present under the Request tab:

To generate the response parameters navigate to the Test tab and click the Test button:

All the added channels will get the ‘true’ subscription status.

Creating UnsubscribeChannel service

The UnsubscribeChannel service is used for subtracting the channels from the subscription list.

The main settings of the service present under the Settings tab:

The request parameters of the service present under the Request tab:

To generate the response parameters navigate to the Test tab and click the Test button:

All the subtracted channels will get the ‘false’ subscription status: