Mendix Native Push Notification Practical

Push notification using firebase for ios and android which is more complicated than local notification. I am using Mendix versions 8.14, and create a new project with a Native QuickStart template. First of all, we need to have 2 modules installation in the Mendix Appstore.

• CommunityCommons
• Encryption

most of the app store modules will save under this folder, under the project

We need to configure the encryption key constant. You need to make 16 characters on the value.

The important module needs to be added is “Push Notification Connector”

Let’s start to make some configuration for the push notification module in the native template.

Add app event in Home_Native

call the same microflow for both “on load” and “on resume”

create a new entity, name it as “NativeNotification” and create an attribute as “objectGUID” with String(200).

create one nanoflow to create a NativeNotification object and return it at the end.

on the Home_Native page, add the “Data View” widget into the pages, set the data source as a nanoflow, and using the nanoflow above.

add the “Notifications” widget inside the data view. Simply right-click on the orange highlight rectangle, then choose add widget. You can enter the search for fast finding.

Now, double click on Notifications. Select an attribute for GUID. Enter Action Name as “push”. Then we will go back later to define what going to do with the action

We go to navigation, and add a new item menu in web responsive.

Should sync all unused entities, download all object at native profile

Create 2 nanoflows, ACT_OnReceive, and ACT_OnOpen. each action will create a piece of log information differently.

Now go back to Home_Native, double click on the “Notification” widget, and map the action with these 2 nanoflows above. Anyway, you need to remember the name of the notification action. We name it since the beginning as “push”.

Run local and open web responsive to configure firebase.

Open Firebase Console to create a new project, do not select analytic, cause it will cost some budget for this.

Open the push notification admin page, create a new FCM item in the FCM section.

To find the project id, go to firebase console and get it from this menu, and the

how about the key JSON. you can generate it from the project.

After all, just save it.

For both Android and IOS, please select this

Now, you need to create Github personal access token and app center token API key. This part due to the security, I could not show the picture. You can google how to do that.

Look at the Mendix reference document for the native builder and following the instruction

Native Builder — Studio Pro 8 Guide | Mendix Documentation

get the nativebuilder.exe file at this site

Native Builder

The command should be like this. Note that the icon should be at 1024x1024, and the splash screen should be at 1440x2560, and when you see — , this means 2 dashes.

Script to prepare the package to GitHub and the app center.

native-builder.exe prepare — github-access-token yourkeyhere — appcenter-api-token yourkeyhere — java-home “C:\Program Files\Java\jdk-11.0.8” — mxbuild-path “C:\Program Files\Mendix\8.14.0.6148\modeler\mxbuild.exe” — project-path “E:\Mendix\TestTrainingDay4-main\TestTrainingDay4.mpr” — projectName TestDay4 — app-identifier “io.mxapps.xxx.sandbox” — app-name “TestNotification” — mendix-version 8.14.0 firebase-ios-config-path E:\FireBase\GoogleService-Info.plist — firebase-android-config-path E:\FireBase\google-services.json — app-icon-path E:\Images\icon.png — app-round-icon-path E:\Images\icon-round.png — app-splash-screen-path E:\Images\splash.png — runtime-url https://testtrainingday4-sandbox.mxapps.io

if everything is fine you will have this result below

config entitlements for ios

native-builder.exe config ios add-entitlements — project-name TestDay4 — entitlements notification

config background modes for ios

native-builder.exe config ios add-background-modes — project-name TestDay4 — modes notification

now, we can build the application for the test

native-builder.exe build — project-name TestDay4 — app-version “1.0.0” — build-number 1

it takes some time to complete, I think around 5–10 minutes. This should be improved later, and the developer can build at studio pro.

if success then you will get the find on folder build which is the same directory as the native builder folder

Or you can go to the app center and make a build, it will take a few minutes, when it is completed, you can able to see the download button.

after your build is finished, you can able to download the apk file. and make the commit back to Github

There is a technical architecture that we need to consider in Push Notification with Firebase, we need the server communicates with the server with an SSL handshake. Therefore, you can not send the message via running Mendix locally. If you do so, it will give you an error 403.

We would able to deploy Mendix as a free cloud. However, I would like to introduce the Mendix Cloud node as a licensed one.

Under your organization account select Node. You should have the Node menu if you are on an enterprise license.

Make the node connect to your Mendix application. There is an important note I want to share, your application should be unlinked to the free cloud before the node could able to recognize like this

How to unlink your application and release it from the free cloud.

Go to “My Apps” in Mendix home under your developer account. At the “Environments” menu you can see the unlink your app on the top.

After click on this, the pop-up will show up, then press the button as I highlight. You will see a continuing pop up to as for authentication required.

Then you press the “Send text message”. It will send to your mobile which you add in your developer profile.

You will see the pop up to validate.

It will keep asking the confirmation

Then confirm it again

Everyone will think it is completed at this step. However, it is not finished yet. you need to click unlink one more time.

After you click on this popup, your free app is unlink

Now you can select Node

After selecting the node.

Your screen will look like this when your application is successfully connected to the node

In order to deploy, we need to create a new package as normal. Then on click to deploy. It will be the sequence to acceptance than production. My node is just a simple one, for the big one, you may have a test environment before the acceptance environment.

Let’s take a look a bit at the acceptance environment details. On the Model Options tab, it can be seen that all the information which we just configure at Mendix studio pro will populate on this screen.

Note for the native builder

Every time you make a change in Mendix Studio Pro and re-deploy, you need to run nativebuilder.exe prepare and build again. Otherwise, it won’t reflex what you have done.

Now you can test the push notification Android Application now.

Enter the message, then send it.

You will see the message look like this in the video below.

How about the iPhone.

iPhone is much more about security, this is its nature. We need a signing key in order to make a .ipa file.

The sign build need 2 files

• Provisioning Profile .mobileprovision
• Certificate .p12

We need an apple developer account and MacBook with Xcode 12 installation.

First of all, we need to make an identifier with the app id option that allows for push notification. Following these steps below

Identifiers on an apple developer account

Make the new profile contains identifiers, certificates, and devices

Export Developer Certificate via macOS Keychain

Finally, we have 2 files

Then add in-app center under build configuration, then press “Save and Build”.

How to build it manually

Copy your git hub source path, and clone it locally.

Install pod, if you do not have this on your machine

Open your project with VSCode

run this command

then cd to ios

run this command

oops, someone will get this error like me

why? because the path is not a point to Xcode.

to solve this, you much do this

then run this command below again

then run pod install again

now using Xcode to open all ios folder

then select signing

Then just press button Build

Now you can go back to the web back end to push the test message.

Oops, you got an error.

The explanation for this is. In order to let FCM push notification to IOS, we need APNS. This is a key service, and we need to create it in the Apple developer account. After you got the key download, you can add to the firebase project under the “cloud message” of the ios application

let’s do this

File format should be like this

Go back to your firebase console, upload .p8 to firebase console. Define your .p8 key id, and Apple Developer Team ID (under your profile). If it can not add right away, just refresh and come back to add it one more time.

Let’s push it again.

The result could be like this video below.

That is all.

See you next time for building on google play and apple store.