Push Notifications - Mobile Application

IFML Modeling with WebRatio Mobile Platform
262 views Published on Apr 08, 2015 | Time 9 min
Applies to: 8.0 or higher

One of the most common features of a mobile application is the receive of Notifications. Notifications are sent from an external server on the Internet to the device on which the mobile application is installed. This lesson shows you how to enable your mobile application to receive Notifications using WebRatio Mobile Platform.

Transcript

Table of contents

Prerequisites

In order to understand the content of this lesson, make sure you watched the following lesson:

Introduction

One of the most common features of a mobile application is the receive of Notifications. Notifications are sent from an external server on the Internet to the device on which the mobile application is installed. This lesson shows you how to enable your mobile application to receive Notifications using WebRatio Mobile Platform.

How to Model the receive of a Push Notification

Let's suppose you want to model a mobile application showing events and receiving Notifications for them. Let's create the "CRM" mobile project. Click on the "File" menu, choose the "New", then the "Mobile Project" option. Give a meaningful name for the Mobile Project, such as "CRM" and press the "Finish" button.

The mobile application requires a Back-end storing the information about events and sending Notifications. For this purpose review the "Push Notification - Back End services" online lesson. In the Properties View of the "Project" node, set the URL at which the back-end is listening: http://localhost:8080/CRMDataService.

You also want to have events data aligned with the Back-end server ones, so you need to map the Mobile Project with the DataService Project publishing REST Web Services. Let's open the Domain Model and synchronize it. Right-click on the "Domain Model" node in the Outline View, choose the "Synchronize Domain Model..." option. In the dialog, choose the "CRMDataService" project and press the "Next" button. To import in the Domain Model all the published classes, press the "Import All Elements" button and then on the "Finish" button to confirm.

Let's open the "App View" of the Mobile Project and start to model. Let's create a couple of screen showing events and their details.

To show the list of all the events, let's use the "List" view component. Click "View Components", choose the "List" item and click inside the Home Screen to add it. Type a name for the "List" component, such as "Events List". The list of elements to be shown can be defined by using a "Data Binding". Let's now define the "Data Binding" property. Press the "Select" button next to the "Data Binding" property to choose the class, in this case choose the "Event" class and then press the "OK" button. Now let's select which information of the event will be shown to the user in the list. We can use the "Display Attributes" property for this purpose. Press the "Select" button next to the "Display Attributes" property to choose the desired attributes, in this example select the "Title" and the "Start Date", and then press the "OK" button. Let's suppose that we want the list to be sorted by "Start Date". We can use the "Sort Attributes" property for this purpose. Press the "Sort" button next to the "Sort Attributes" property to choose the List's sorting, in this case choose the "Start Date" attribute with ascending sort and then press the "OK" button.

Let's add another "Screen" view container where you show the event details. Click "View Container", choose the "Screen" and place it in the work area. Type a meaningful name for the screen, such as "Details". Protect also this screen, checking the "Protected" property in its Properties View.

To show the details of an event, let's use the "Details" view component. Click "View Components", choose "Details" component and then click inside the "Details" screen to add it. Type a name for the "Details" component, such as "Details Event". The "Details" view component displays the information of a single instance of a given class. Let's now define the "Data Binding" property. Press the "Select" button next to the "Data Binding" property to choose the class, in this case choose the "Event" class and press the "OK" button to confirm. Now let's select all information of the event will be shown to the user in the details. Let's use the "Display Attributes" property for this purpose. Press the "Select" button next to the "Display Attributes" property, choose the desired attributes and then press the "OK" button.

In order to let the user select an event from the list and see its details, let's use the On Select Event with a "Navigation Flow". Click "Flows", choose "Navigation Flow", click first on the "List" component and then on the "Details" component. Type a name for the event, such as "Details".

To state that the mobile application is enabled for receiving Push Notifications you need to add at least a "Notification Event". Click "Events", choose "Notification Event" and place it in the work area to add it.

Remember that the "Notification Event Name" identifies the notification for which the event is listening. Its name should be one of the names used in the DataService Project if any.

Once placed the Event you have to model what happens when the user taps on the Notification Message. In this example let's suppose you want the user to see the details about the notified Event. Click "Flows", choose "Navigation Flow", click first on the "Notification Event" and then on the "Details" component.

In order to see the event details, the notification must contain an information about which is the event to be shown. Let's suppose that the notification has a parameter containing the server key of the event. Right-click on the "Notification Event" in the Outline View, choose the "Add" and then "Notification Event Parameter" option. Type a name for the parameter, such as "Event Oid".

The server key sent along with the notification must be used to retrieve the correct event in the "Details" screen. Let's add an attribute condition working on the remote oid for this purpose. Right-click on the "Details Component", choose the "Add" and then "Attributes Condition" option. Type a name for the "Attribute Condition", such as "remoteOid". In its Properties View, press the "Select" button next to the "Attributes" property to choose the attribute to associate, in this case choose the "remoteOid" attribute and then press the "OK" button. The "Details" screen must work both when receiving a Notification and when selecting an item from the list. So you need to adjust the conditions on the component in order to be mutually exclusive and not mandatory. Set the "False" value as Required. Select the "Key Condition" in the Outline View and set the "False" value as Required. Then, select the "Conditional Expression" in the Outline View and set the "Or" value as Boolean Operator.

Finally let's bind the information coming from the Notification to the condition on the Details component. Double-click on the "Navigation Flow" to open the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the Event Key provided by the web service, bind the "Event Oid" attribute with the "Attribute Condition" and then press the "OK" button to confirm.

How to Emulate the receive of a Push Notification on the PC

Generate and run the "CRMDataService" project to have a listening Back-end.

Generate the project to emulate the mobile application, by pressing the "Generate and Run" button.

Let's start emulating the mobile application on the computer. Press on the "OPEN EMULATOR" button to run the application on your PC.

Login using credentials of a user existing on the Back-end. If you don't have users in the database the login doesn't work. Back to the "Push Notification - Back End services" online training. Press the "Login" button to make access.

You can see the events list, which is the list of events synchronized with the Back-end. Now you can emulate the receive of a Notification, using the Notification group of properties. Open the "Notifications" panel.

The emulation you are doing is to send a fake notification directly from this panel to the mobile application. The Back-end is not involved. Select the notification you want to receive from the drop down. Remember that you have an option for each "Notification Event" modeled. Choose the "notificationEvent".

The panel shows you all the fields necessary to emulate the send of the selected notification. "Title" and "Message" are there by default; then you have all parameters you added to the "Notification Event". In this example there's the additional "Event Oid". Fill in the form with sample data. Remember to use the oid of an existing event on the Back-end for the "Event Oid" field.

Press the "Send" button to send the fake Notification to the mobile application.

You can see the Notification shown in a box at the top of the screen. Press on the Notification to open it up. As you can see , the screen showing the event details is shown.

How to Emulate the receive of a Push Notification on the Device

Generate and run the "CRMDataService" project to have a listening Back-end.

Generate the project to emulate the mobile application, by pressing the "Generate and Run" button.

It's possible to emulate better the Push Notifications using the WebRatio Mobile Developer App. In this way you can test both the behavior of the mobile application and of the Back-end that sends the Notifications. Scan the QR Code to connect to the local server and emulate the mobile application.

Login using credentials of a user existing on the Back-end. If you don't have users in the database the login doesn't work. Back to the "Push Notification - Back End services" online training. Click on the "Login" button. You can see the events list, which is the list of events synchronized with the Back-end.

To force the send of a Notification you can make a call to the web service modeled in the Back-end. First of all, we need to login on the Back-end with the current user. Expand the "User Services" node in the Swagger Page. Click on the "/users/login" POST User Service to login on the DataService Project. Use the same credentials used to access to the mobile app, also to login in the Back-end. To call the Web Service, press on the "Try it out!" button.

Let's now send a Notification using the "forceNotification" GET NotificationEvents. Expand the "NotificationEvents" node. Click on the "/Notifications/NotificationEvents/forceNotification" GET service to send the Notification Message to the device. Set the "eventOid" parameter, such as "1". To call the Web Service, press the "Try it out!" button.

You can see the Notification shown in a box at the top of the screen. Press on the Notification to open it up.

As you can see , the screen showing the event details is shown. The Notification Message is displayed also if the mobile application is running in background. Press on the "Home" button. Call again the Web Service, open the Notification Bar and then press on the Notification to open it up.