Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Develop a Mobile Application coonected to a REST backend

324 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Develop a Mobile Application coonected to a REST backend

  1. 1. Develop a Mobile Application connected to a REST Microservice Charles Moulliard (@cmoulliard) 17 June 2016  
  2. 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. 3. Agenda Requirements Hybrid HTML5 Mobile Frameworks Tools Integration Technology Cloud Mobile Platform Demo - Part I / Local Demo - Part II / Backend
  4. 4. Hybrid Mobile Dev
  5. 5.   What Hybrid means ?
  6. 6. JavaScript Model View Controller Improve project design Reduce coding lines  
  7. 7. Ionic Fully integrated with AngularJS Provide AngularJS Extension Huge collection of Widgets (List, Buttons, Footers, …)
  8. 8. JBoss Mobile Eclipse
  9. 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. 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. 11. Architecture
  12. 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. 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. 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 ----
  15. 15.  
  16. 16. How to integrate
  17. 17. Nodejs Proxy Server
  18. 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. 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. 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. 21. Demo - Part I  
  22. 22. Demo - Part II  
  23. 23. Questions Twitter : @cmoulliard Mobile Backend github.com/FuseByExample/mobile-rest-in-action REST with Camel github.com/FuseByExample/rest-dsl-in-action  

×