Skip to content
Extend REST DSL in action use case to run the project as a Mobile application (Cordova, ...)
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend-service
client-ionic
images
faq.md
readme.md

readme.md

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

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

Create Ionic Mobile Application

  • 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

Create Ionic Mobile 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

Git repositories

  • And clone the mobile client and the backend application using the git clone command as such
git clone git@git.openshift.feedhenry.com:fuse/demo-mobile-client.git client
git clone git@git.openshift.feedhenry.com: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,

Cloud Server 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

Local Mobile Server

  • 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

Local Mobile Server

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

Use Ionic Mobile framework

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

Local Mobile Server

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

You can’t perform that action at this time.