develop a mobile application coonected to a rest backend
TRANSCRIPT
![Page 1: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/1.jpg)
Develop a MobileApplication connected toa REST Microservice
Charles Moulliard (@cmoulliard)17 June 2016
![Page 2: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/2.jpg)
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
![Page 3: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/3.jpg)
Agenda
Requirements
Hybrid HTML5 Mobile
Frameworks
Tools
Integration Technology
Cloud Mobile Platform
Demo - Part I / Local
Demo - Part II / Backend
![Page 4: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/4.jpg)
Hybrid Mobile Dev
![Page 5: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/5.jpg)
What Hybrid means ?
![Page 6: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/6.jpg)
JavaScript
Model View Controller
Improve project design
Reduce coding lines
![Page 7: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/7.jpg)
Ionic
Fully integrated withAngularJS
Provide AngularJS Extension
Huge collection of Widgets(List, Buttons, Footers, …)
![Page 8: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/8.jpg)
JBoss Mobile Eclipse
![Page 9: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/9.jpg)
Ionic ListView<ion-view view-title="Articles"> <ion-content> <ion-list> <ion-item ng-repeat="article in articles | orderBy:['user','title']" href="#/app/article/{{article.id}}"> {{article.title}}, posted {{article.postDate}}, by {{article.user}} </ion-item> </ion-list> </ion-content> </ion-view>
Controllerblog.controller('FindAllCtrl', function ($scope, fhcloud, articleService) { $scope.articles = {}; fhcloud('/articles/', null, 'GET') .then(function (response) { articleService.replaceArticles(response); $scope.articles = response; }) });
![Page 10: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/10.jpg)
Apache Cordova
Web Based App wrapped into anative Shell
Access to native feature throughWebView & Plugins
Multiplatform : iOS, Android,Blackberry, MS Phone
Plugins : camera, geo, contacts, file
![Page 11: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/11.jpg)
Architecture
![Page 12: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/12.jpg)
Cordova Tooling
Install npm install -g cordova
Command line Tool to manage Hybrid Apps
cordova create <PATH> [ID [NAME [CONFIG]]] [options] [PLATFORM...] Create a Cordova project PATH ......................... Where to create the project ID ........................... reverse-domain-style package name - used in <widget id> NAME ......................... human readable field
cordova plugin <command> [options] Manage project plugins add <pluginid>|<directory>|<giturl> [...] ..... add specified plugins pluginid will be matched in --searchpath / registry directory is a directory containing giturl is a git repo containing
![Page 13: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/13.jpg)
Examplecordova create myApp org.apache.cordova.myApp myApp cordova plugin add cordova-plugin-camera --save cordova platform add android --save cordova requirements android cordova build android --verbose cordova run android cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
![Page 14: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/14.jpg)
Ionic Tooling _ _ (_) (_) _ ___ _ __ _ ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___| CLI v1.7.12 ======================= serve [options] ............................... Start a local development server for [--port|-p] ............................ Dev server HTTP port (8100 default [--livereload-port|-r] ................. Live Reload port (35729 default) [--address] ............................ Use specific address or return with failure [--platform|-t] ........................ Start serve with a specific platform platform [options] <PLATFORM> ................. Add platform target for building an Ionic app [--noresources|-r] .................. Do not add default Ionic icons and splash screen resources [--nosave|-e] ....................... Do not save the platform to the package package <command> [options] ................... Use Ionic Package to build your app <command> build android, build ios, list, info, or download [--release] .......................... (build <platform>) Mark this build as a release [--profile|-p <tag>] ................. (build <platform>) Specify the Security Profile to use with [--destination|-d <path>] ............ (download) Specify the destination directory to download your packaged app. ----
![Page 15: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/15.jpg)
![Page 16: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/16.jpg)
How to integrate
![Page 17: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/17.jpg)
Nodejs Proxy Server
![Page 18: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/18.jpg)
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()
![Page 19: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/19.jpg)
JS Front Serviceblog.service('fhcloud', function ($q) { return function (cloudEndpoint, data, operation) { var defer = $q.defer(); var params = { path: cloudEndpoint, method: operation, contentType: "application/json", data: data, timeout: 15000 }; $fh.cloud(params, defer.resolve, defer.reject); return defer.promise; }; });
![Page 20: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/20.jpg)
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("Service FindById called"); var id = 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); } }) };
![Page 21: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/21.jpg)
Demo - Part I
![Page 22: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/22.jpg)
Demo - Part II
![Page 23: Develop a Mobile Application coonected to a REST backend](https://reader031.vdocument.in/reader031/viewer/2022030311/58ef3aee1a28ab6e248b4681/html5/thumbnails/23.jpg)
Questions
Twitter : @cmoulliard
Mobile Backend github.com/FuseByExample/mobile-rest-in-action
REST with Camel github.com/FuseByExample/rest-dsl-in-action