This document discusses the development of a mobile application using hybrid HTML5 frameworks, tools for integration, and a REST backend. It emphasizes the use of Apache Cordova and Ionic for creating cross-platform applications, along with details on project setup, plugin management, and server integration. Various coding examples and demonstrations are provided to illustrate the integration of a Node.js proxy server with the mobile application.

1.
Développer une application
mobile connectée à un
backend REST
Charles Moulliard (@cmoulliard)
21 Jan 2016

2. Who
Apache Committer, Fuse Expert, Architect
Blog:
Twitter:
Email:
Committer on Apache Camel, Karaf, Fabric8, Hawtio … & PMC
Technology evangelist
Mountain Biker, Belgian Beer Fan, Blogger
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. HTML5
 

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. Ionic List
blog.controller('FindAllCtrl',function($scope,fhcloud,articleService){
$scope.articles={};
fhcloud('/articles/',null,'GET')
.then(function(response){
articleService.replaceArticles(response);
$scope.articles=response;
})
});
<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>

9. Apache Cordova
Web Based App wrapped into a
native Shell
Access to native feature through JS
Bridge
Multiplatform

10. Cordova Tooling
cordovacreate<PATH>[ID[NAME[CONFIG]]][options][PLATFORM...]
CreateaCordovaproject
PATH.........................Wheretocreatetheproject
ID...........................reverse-domain-stylepackagename-usedin<widgetid>
NAME.........................humanreadablefield
cordovaplugin<command>[options]
Manageprojectplugins
add<pluginid>|<directory>|<giturl>[...].....addspecifiedplugins
pluginidwillbematchedin--searchpath/registry
directoryisadirectorycontainingaplugin
giturlisagitrepocontainingaplugin

11. Ionic Tooling
_ _
(_) (_)
_ ___ ___ _ ___
||/_|'_||/__|
||(_)|||||(__
|_|___/|_||_|_|___| CLIv1.7.12
=======================
serve[options]............................... Startalocaldevelopmentserverforappdev/testing
[--port|-p] ............................ DevserverHTTPport(8100default)
[--livereload-port|-r] ................. LiveReloadport(35729default)
[--address] ............................ Usespecificaddressorreturnwithfailure
[--platform|-t] ........................ Startservewithaspecificplatform(ios/android)
platform[options]<PLATFORM>................. AddplatformtargetforbuildinganIonicapp
[--noresources|-r] .................. DonotadddefaultIoniciconsandsplashscreenresources
[--nosave|-e] ....................... Donotsavetheplatformtothepackage.jsonfile
package<command>[options]................... UseIonicPackagetobuildyourapp(alpha)
<command>buildandroid,buildios,list,info,ordownload
[--release] .......................... (build<platform>)Markthisbuildasarelease
[--profile|-p<tag>] ................. (build<platform>)SpecifytheSecurityProfiletousewith
[--destination|-d<path>] ............ (download)Specifythedestinationdirectorytodownloadyourpackagedap
----

13. How to integrate

14. Nodejs Proxy Server

15. 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;
};
});

16. 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,response,body)
if(!error&&response.statusCode==200){
console.log(body);
res.send(body);
}
})
};

17.
Demo - Part I

18.
Demo - Part II

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