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
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.
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.
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.
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.
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.