This talk will guide you through the process to design a Hybrid HTML5 Mobile application to interconnect it with your REST backend system using the project Ionic, Apache Cordova & Feedhenry.

1. Develop a Mobile
Application connected to
a REST Microservice
Charles Moulliard (@cmoulliard)
17 June 2016

2. Who
Committer, Coder, Architect
Work on Apache Camel, Karaf, Fabric8, Hawtio, Apiman, Drools
Mountain Biker, Belgian Beer Fan
Blog:
Twitter:
Email:
http://cmoulliard.github.io
@cmoulliard
cmoulliard@redhat.com

3. Agenda
Requirements
Hybrid HTML5 Mobile
Frameworks
Tools
Integration Technology
Cloud Mobile Platform
Demo - Part I / Local
Demo - Part II / Backend

4. Hybrid Mobile Dev

5.  
What Hybrid means ?

6. JavaScript
Model View
Controller
Improve project design
Reduce coding lines
 

7. Ionic
Fully integrated with
AngularJS
Provide AngularJS Extension
Huge collection of Widgets
(List, Buttons, Footers, …)

8. JBoss Mobile Eclipse

9. Ionic List
View
<ion-viewview-title="Articles">
<ion-content>
<ion-list>
<ion-itemng-repeat="articleinarticles|
orderBy:['user','title']"
href="#/app/article/{{article.id}}">
{{article.title}},posted{{article.postDate}},by{{article.user}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Controller
blog.controller('FindAllCtrl',function($scope,fhcloud,articleService){
$scope.articles={};
fhcloud('/articles/',null,'GET')
.then(function(response){
articleService.replaceArticles(response);
$scope.articles=response;
})
});

10. Apache Cordova
Web Based App wrapped into a
native Shell
Access to native feature through
WebView & Plugins
Multiplatform : iOS, Android,
Blackberry, MS Phone
Plugins : camera, geo, contacts, file

11. Architecture

12. Cordova Tooling
Install npm install -g cordova
Command line Tool to manage Hybrid Apps

cordovacreate<PATH>[ID[NAME[CONFIG]]][options][PLATFORM...]
CreateaCordovaproject
PATH.........................Wheretocreatetheproject
ID...........................reverse-domain-stylepackagename-usedin<widgeti
NAME.........................humanreadablefield
cordovaplugin<command>[options]
Manageprojectplugins
add<pluginid>|<directory>|<giturl>[...].....addspecifiedplugins
pluginidwillbematchedin--search
directoryisadirectorycontaining
giturlisagitrepocontaining

13. Example
cordovacreatemyApporg.apache.cordova.myAppmyApp
cordovapluginaddcordova-plugin-camera--save
cordovaplatformaddandroid--save
cordovarequirementsandroid
cordovabuildandroid--verbose
cordovarunandroid
cordovabuildandroid--release--
--keystore="..android.keystore"
--storePassword=android--alias=mykey

14. Ionic Tooling
_ _
(_) (_)
_ ___ ___ _ ___
||/_|'_||/__|
||(_)|||||(__
|_|___/|_||_|_|___| CLIv1.7.12
=======================
serve[options]............................... Startalocaldevelopmentserverfor
[--port|-p] ............................ DevserverHTTPport(8100default
[--livereload-port|-r] ................. LiveReloadport(35729default)
[--address] ............................ Usespecificaddressorreturnwithfai
[--platform|-t] ........................ Startservewithaspecificplatform
platform[options]<PLATFORM>................. AddplatformtargetforbuildinganIon
[--noresources|-r] .................. DonotadddefaultIoniciconsandspla
[--nosave|-e] ....................... Donotsavetheplatformtothepackage
package<command>[options]................... UseIonicPackagetobuildyourapp
<command>buildandroid,buildios,lis
[--release] .......................... (build<platform>)Markthisbuildasa
[--profile|-p<tag>] ................. (build<platform>)SpecifytheSecurity
[--destination|-d<path>] ............ (download)Specifythedestinationdire
----

16. How to integrate

17. Nodejs Proxy Server

18. Feedhenry SDK
Extend Cordova/Ionic JS Frameworks
Api to
Access Cloud Applications $fh.Cloud()
Push notifications $fh.push()
Auth User (OAuth) $fh.auth()
Sync data $fh.sync()

19. JS Front Service
blog.service('fhcloud',function($q){
returnfunction(cloudEndpoint,data,operation){
vardefer=$q.defer();
varparams={
path:cloudEndpoint,
method:operation,
contentType:"application/json",
data:data,
timeout:15000
};
$fh.cloud(params,defer.resolve,defer.reject);
returndefer.promise;
};
});

20. REST endpoint (Proxy)
app.get('/articles/searchid/:id',blogService.findById);
app.get('/articles',blogService.findAll);
app.get('/articles/searchuser/:user',blogService.findByUser)
app.post('/articles',blogService.newPost);
exports.findById=function(req,res,next){
console.log("ServiceFindByIdcalled");
varid=req.params.id;
request('http://BACKEND_SERVER:9191/blog/article/search/id/'+id,function(error,
if(!error&&response.statusCode==200){
console.log(body);
res.send(body);
}
})
};

21. Demo - Part I

22. Demo - Part II

23. Questions
Twitter : @cmoulliard
Mobile Backend github.com/FuseByExample/mobile-rest-in-action
REST with Camel github.com/FuseByExample/rest-dsl-in-action

