RedHat Mobile Application & JBoss Fuse Service

The purpose of this demo is to develop a Mobile Application using the Ionic, Feedhenry & Cordova Hybrid HTML5 Frameworks.

The project will be developed in 2 parts:

• The first part will explain how to setup the project using the openshift.feedhenry.com cloud portal and run it locally on your machine
• The second part will use the code part of this github repository to call the backend REST services designed for the JBoss Fuse Blog application developed here.

| | | | |

To access the backend from the backend-service nodejs application, new express routes have been added

app.get('/articles', blogService.findAll);
app.get('/articles/searchid/:id', blogService.findById);
app.get('/articles/searchuser/:user', blogService.findByUser)
app.post('/articles', blogService.newPost);

Each route is associated to a function that the server will use to call the Camel REST endpoint running into JBoss Fuse. By example, the findById function has been created as such

exports.findById = function (req, res, next) {
    console.log("Service FindById called");    
    var id = req.params.id;
    request('http://localhost:9191/blog/article/search/id/' + id, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            res.send(body);
        }
    })
};

The parameter that we need to use is retrieved using the javascript req.params.id function and next added within the url request http://localhost:9191/blog/article/search/id/' + id. When the response is received, it is returned back using the response object.

Remark : To run the project on Android, please use the code modified and pushed to the branch Android

Prerequisites

• Nodejs - v0.10.30 - npm install -g [email protected]
• Grunt
• Ionic - 1.7.7
• Cordova - 5.4.1

Create a Ionic Hello Mobile project - part I

Setup the project on openshift.feedhenry.com

• Log to openshift.feedhenry.com web site and click on the button to create a new project

• Select from the template list the IONIC HELLO WORLD PROJECT and click on the button choose

• Add your project name demo-mobile like also the name of the client and application

• Click on the button create

• Select the Cloud App of the demo-mobile project on the openshift.feedhenry.com web site and click on the cloud icon to start the deployment process of the nodejs application

• On your machine, open a terminal and create a folder with the name of your project demo-mobile

• When the project has been created on openshift.feedhenry.com, copy/paste the git urls

• And clone the mobile client and the backend application using the git clone command as such

git clone [email protected]:fuse/demo-mobile-client.git client
git clone [email protected]:fuse/demo-mobile-app.git application

• Move to the folder client and deploy the node packages

npm install

• Open another terminal and move to the application folder
• Deploy too the node packages and grunt

npm install
npm install grunt

• If the Cloud Application has been deployed successfully and is started,

• You can start locally on your machine the mobile application using the grunt:serve task that you will execute within the client project

grunt:serve

• Your browser will be called and this address will appear http://localhost:9002/#

• Add your name within the field and click on the button Say hello from the cloud

• You will receive a response from the nodejs server running in the cloud

• You can also make a test using your local backend server which is a nodejs application

• Within the client terminal, stop the grunt task and relaunch using using the local parameter

grunt serve:local

• The url displayed into the browser is different as it contains the hostname of the local backend server to call

http://localhost:9002/?url=http://localhost:8001#/

• Within the project application of the second terminal, launch the backend server using this grunt task

grunt serve

• Say hello using now your local backend server

• Everything is in place to use now Cordova/Ionic tools to play with the iPhone/Android/Browser emulator

Use Ionic Mobile framework

• To use the ionic client & the mobile framework developed by [http://ionicframework.com/]Ionic, we must install the node ionic package globally as such :

npm install -g ionic

• The Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. They must be installed within the project of the client.
• So run these commands

ionic hooks add
chmod +x hooks/

• Create the config.xml file needed by cordova and add it within the client folder. The two most important parameters are the id and the name

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="org.fuse.ionic.js" android-versionCode="23" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Fuse Ionic JS App</name>
  <description>This is simple Feedhenry Ionic JS App</description>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="permissions" value="none"/>
  <preference name="fullscreen" value="true"/>
  <preference name="webviewbounce" value="true"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
</widget>

• In order to add the cordova files required to use the HTML5 Mobile hybrid application running on IoS, Android, a Browser, we will add the required platforms using these commands

ionic platform add browser
ionic platform add ios
ionic platform add android

• We can now build the project (for a further deployment)

ionic build ios
ionic build android
ionic build browser

• To emulate the application running into a mobile browser, run this command within the client project

ionic run browser

• To run the iOS emulator, use this command

ionic run ios

Installation of the project - part II

• To run this project, open a unix/windows terminal and git clone the project or download the code
• Next move to the mentioned folders hereafter and follow the instructions in order to start the Mobile Client and the Backend server communicating with the Apache Camel REST Services.
• In order to use the nodejs javascript server, we have to install first the javascript packages required
• As the ionic client tool will be used to generate the HTML5 Hybrid code and emulate the iOS or Android Mobile application, then we will specify within the next section how to build and emulate the Mobile environment.

Mobile client

• Move to the client-ionic directory and execute these commands

npm install

• Add the Cordova platform specific config files

rm -rf resources/
rm -rf plugins
rm -rf platforms/
ionic hooks add
ionic platform add ios
ionic platform add browser

• Run the client using as target platform the browser or the iPhone

ionic run browser
ionic run ios   

• Build HTML5 Mobile hybrid code (optional- only required to deploy on a smartphone)

ionic build ios
ionic build browser

• To use and emulate Android locally on your machine. Use the branch android and install the node packages or grunt as done previously for the client-ionic and backend-service
• Next, run these commands within the client-ionic direcrory within a terminal

ionic platform add android
ionic emulate android

• You can create a customized device using android adv manager to by example use the Samsung S6 Galaxy Smartphone and next specify it to the emulator

ionic emulate --target=Samsung-Galaxy-S6

• To access the application using the browser of the device, use this command

ionic run browser 

and within the browser of the android browser

http://10.0.2.2:8000?url=http://10.0.0.2:8001/#app/articles

Backend server calling the Camel REST Services

• Move to the backend-service directory and execute these commands to install the node javascript modules and start the node js server

    npm install
    npm install grunt

• Run the nodejs server and emulate the browser or ios

    grunt serve

Remark : Don't forget to follow the installation procedure here of Rest DSL in Action in order to use the backend services.