If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to set up push notifications.

To test your app, you need to build the binary and install it on your device.

Before you begin

Tutorial level: advanced.
Prerequisites: at least one intermediate tutorial.

Creating a new app

Create a new app in the app builder. From the Apps page, click Create new app, enter an app name and click Create.

Configuring Push

1. Switch to the Push Notifications tab and check Enable push notifications.

2. Select the database with which app should be linked:

Device info about where the app is installed will be saved in the Devices collection of the selected database, as soon as the device is running the app. If you don’t have a database, create one (read database to learn how) and link the app with it. You only need to link your app with a database once.

  1. Switch to Settings and check all three items:
    • Push sound.
    • Show alert.
    • Badge.

This means that each of these checked items will happen when a new push notification arrives. For example, checking Push sound will make a sound, and with the Badge checked (only on iOS) the number of unread notifications will be shown.

Configuring the push

Depending on your device and OS, you’ll have to initialize Android or iOS settings, or both.

Android

1. Go to https://code.google.com/apis/console/ and sign in.

2. Then continue to the Google Developers Console:

3. Click Create Project.

4. Enter project name. For instance, ApperyIOPush:

5. Click Create; the project will now be listed:

6. Click on the project name to open its details:

7. Copy the Project Number to Sender ID in the push notifications Settings tab of your app:

8. To get the API key, on the left-hand side menu, click Products  & services and select API Manager:

9. You will see a long list of APIs. Find Google Cloud Messaging and click Enable. You will get the following message:

10. Click Go to Credentials.

11. In a window, that opens, click the API key link to open another window. CreateaNewKey

12. Click Server key, then click Create again to generate the API Key:

13. Copy the API key to the  API key field in the push notifications Settings tab of the app:

iOS

Before you begin, to enable push notifications for an iOS app, you must have a Development Certificate if your app is registered in Development mode, and a Production Certificate if your app is registered in Distribution mode.

1. In Push Notifications > Settings view in Appery.io App Settings, check Production if the application is in the distribution stage, otherwise leave it unchecked:
iOSSettings

2. Upload the Push Certification file:
To generate a Push Notification Certificate, you need to open the App Ids page, find the desired App ID, click Configure, check the Enable for Apple Push Notification service check box. Click Configure (select either development or production stage):

Bundle ID shouldn’t have a wild card character, otherwise you cannot configure push notification properties.

3. Fill in the Certificate password that was specified during p12 certificate creation.

After you have defined the Push settings, save the project, and check whether the push data was saved correctly.

Assigning push notifications

Build the following UI:

1. Insert a Grid component, and then add another row.

2. In the first column, insert Labels, and change the Text properties as shown above.

3. The second column also has Labels. Change the label names (Name property) as follows:

  1. initLabel
  2. registerLabel
  3. messageLabel

4. Open the EVENTS tab.

5. For component, select startScreen.

6. For event, select Push initialize.

7. For action, select: Set property.

  1. Component name initLabel.
  2. Property name = Text.
  3. Value = DONE.

8. Click Save to add the event:
initLabelEventt

9. Repeat steps 5 – 8 for push registration fail:
Fail

And push registration success:
Done

The component name is registerLabel.

You should end up with three events after the above steps:3Events

10. We need to add one more event. Select startScreen as Сomponent, Push notification as Event, and Run JavaScript as Action. Enter the following code, and save:

Sending push notifications

To send the notification follow the steps:

1. Go to the Send push notification tab, and select the devices. You can select all devices or use a query string or builder (read Using a query builder for more info).

2. Define the Badge (for iOS), enter the Title (optional) and the message:

3. Click Send.

4. Switch to the Scheduled and history view. You can find information about delivered, undelivered, and planned-for messages:

To learn how to get deviceID and token, click here.

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 the following REST services:

Registering the device

You need to create a service to register devices:

1. Select CREATE NEW > Service:
CreateNewService

2. Create REST service:
RegisterDevice

3. The main settings:
Settings

You can use the following URL:

4. Request parameters:

ResponseHeaders

Where:

X-Appery-App-Id is a unique identifier of an Appery.io app.  It can be found on the Appery.io. app URL:

type is an app platform type (A – Android, I – iOS).
token is a unique app instance identifier.
deviceID is a unique device identifier.

Response parameters can be created automatically from the Test view.

Updating the device

You need to create a service for updating the device:

1. Create a new REST service.

2. The main settings:
UpdateService

3. You can use the following URL:

Where: 

deviceID is a unique device identifier, one of the request parameters.

4. Request parameters:
UpdateQuery

UpdateHeaders

Where:

X-Appery-App-Id is a unique identifier of an Appery.io app.
type is an app platform type (A – Android, I – iOS).
token is a unique app instance identifier.
deviceID is a unique device identifier.

Response parameters may be created automatically from the Test view.

Unregistering the device

You need to create a service for unregistering your device:

1. Create a new REST service.

2. The main settings:
Unregister

3. You can use the following URL:

Where: 

deviceID is a unique device identifier, one of the request parameters.

4. Request parameters:
DeviceId

RequestUnregister

Where:

X-Appery-App-Id is a unique identifier of an Appery.io app.
deviceID is a unique device identifier.

The service needs no response parameters.

Receiving the device information

You need to create a service for receiving device information:

1. Create a new REST service.

2. The main settings:
GetDeviceInfo

3. You can use the following URL:

Where: 

deviceID is a unique device identifier, one of the request parameters.

4. Request parameters:
GetDeviceInfoQuery

GetDeviceInfoHeaders

Where:

X-Appery-App-Id is a unique identifier of an Appery.io app.
deviceID is a unique device identifier.

Response parameters may be created automatically from the Test view.

Sending push notifications

You need to create a service for sending push notifications:

1. Create a new REST service.

2. The main settings:
SendPush

3. You can use the following URL:

4. Request parameters:
SendPushRequest

SendPushHeaders

Where:

X-Appery-Push-API-Key is a unique key, issued by server, which allows the sending of push notifications.
message is the message text (mandatory).
badge is the number shown with app icon in iOS (optional, if empty – badge will be not changed on device).
deviceID is a unique device identifier.
scheduledTime is the date and time when the push notification should be sent (it is always truncated to minute).
useDeviceTimeZone boolean – parameter indicating whether the PN should be sent in the device’s time zone.
timeZone is the offset in minutes of time zone.
Custom fields can be added.

Response parameters may be created automatically from the Test view.

Read more about sending push notifications from 3rd party apps via the link.