RHMAP BPM-Mobile-App – IoT Demo

April 14, 2016

In this blog I would like to demonstrate how easy it is to develop a mobile app with AngularJS and NodeJS. The goal is to develop the app locally and build an Android application with RHMAP later on.

‘RHMAP’ stands for ‘Red Hat Mobile Application Plattform‘. Maybe you know it as ‘FeedHenry’.

What’s the target of this mobile app?
The target is to communicate with a BPM Suite, collect user specific tasks and interact with them. So, you can start, claim or complete tasks in your mobile app. You can also have a look at the content of a task.

Preparing your system

You need the following tools installed on your system

  • NodeJs
  • Grunt -> ‘sudo npm install -g grunt-cli’
  • Git

Note: I’m a MAC OS X user and working with the ‘Atom Editor‘ to edit HTML and Javascript files. Atom is available for other platforms, too.

Getting the code

mkdir YOUR_FOLDER_NAME

cd YOUR_FOLDER_NAME

git clone https://github.com/Sifa91/IoT_Demo_App_Cloud.git
git clone https://github.com/Sifa91/IoT_Demo_App_Client.git

If you did it correctly, then GIT created two folders. One for the client app and one for the cloud app.
Why do we need these two parts?
The first one is for the frontend and the second one for the backend of your mobile app. In RHMAP you always have these two parts. The frontend is written in AngularJS and the backend in NodeJS.

Starting the local development journey

So, lets go!
Open two shells  and navigate in the first one to your cloud app folder and in the second one to the client app folder.

Execute the following command in both shells:

npm install

Maybe you will see some errors in your cloud shell. Ignore them 😉

Again, execute the following commands in both shells:

grunt serve:local

Now your shells should look like this and your browser is running a new instance of your app.

shells

If you want you can open ‘Atom’ now and do some changes in your  client app. If you did everything correctly, then your changes should be shown automatically in your browser.

Building the mobile app

Now it’s time to build the mobile app. Why we are doing this with RHMAP?
RHMAP can build your app for all well known mobile operating systems like iOS, Android, WindowsPhone and so on. Additionally the RHMAP can host the cloud app and mBaaS (mobileBackendAsAService).

Requirements

  • Create an account on https://openshift.feedhenry.com/
  • Select a domain name for your RHMAP (choose what ever you want)

A new project is born

Now it is time to interact with the RHMAP! Login to your RHMAP on https://openshift.feedhenry.com and follow the steps shown on the screenshots.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15_1 16 17 18

Work is done! You see, it was very easy to create a new project with a cloud and a client app. Now it is time to build the app!

Note: RHMAP creates a new GIT repository for every project! So, it is highly recommended to create a new remote in your local GIT repository for both applications. Have a look at the screenshot and see where to find the URLs. 

19

 

cd NAVIGATE_TO_YOUR_CLOUD_APP

git remote add <NAME> <URL_YOU_COPIED_FROM_RHMAP>

Note: Every git push to your RHMAP GIT repository will be automatically recognized by the RHMAP.

Building the mobile app

Just follow the steps shown on the screenshots.

120212223242526

Now you have the choice. You can download the .apk-File or scan the QR-Code with your smartphone and install the mobile app directly on your mobile device.

Leave a Reply

close

Subscribe to our newsletter.

Please select all the ways you would like to hear from Open Sourcerers:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our newsletter platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.