Design a Mobil Hybrid Application connected to a REST Backend
-
Upload
charles-moulliard -
Category
Technology
-
view
364 -
download
2
Transcript of Design a Mobil Hybrid Application connected to a REST Backend
![Page 1: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/1.jpg)
Développer une applicationmobile connectée à unbackend REST
Charles Moulliard (@cmoulliard)21 Jan 2016
![Page 2: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/2.jpg)
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
![Page 3: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/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: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/4.jpg)
Hybrid Mobile Dev
![Page 5: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/5.jpg)
HTML5
![Page 6: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/6.jpg)
JavaScript
Model View Controller
Improve project design
Reduce coding lines
![Page 7: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/7.jpg)
Ionic
Fully integrated withAngularJS
Provide AngularJS Extension
Huge collection of Widgets(List, Buttons, Footers, …)
![Page 8: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/8.jpg)
Ionic Listblog.controller('FindAllCtrl', function ($scope, fhcloud, articleService) { $scope.articles = {}; fhcloud('/articles/', null, 'GET') .then(function (response) { articleService.replaceArticles(response); $scope.articles = response; }) });
<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>
![Page 9: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/9.jpg)
Apache Cordova
Web Based App wrapped into anative Shell
Access to native feature through JSBridge
Multiplatform
![Page 10: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/10.jpg)
Cordova Toolingcordova 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 a plugin giturl is a git repo containing a plugin
![Page 11: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/11.jpg)
Ionic Tooling _ _ (_) (_) _ ___ _ __ _ ___ | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__ |_|\___/|_| |_|_|\___| CLI v1.7.12
======================= serve [options] ............................... Start a local development server for app dev/testing [--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 (ios/android)
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.json file
package <command> [options] ................... Use Ionic Package to build your app (alpha) <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 12: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/12.jpg)
![Page 13: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/13.jpg)
How to integrate
![Page 14: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/14.jpg)
Nodejs Proxy Server
![Page 15: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/15.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 16: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/16.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 17: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/17.jpg)
Demo - Part I
![Page 18: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/18.jpg)
Demo - Part II
![Page 19: Design a Mobil Hybrid Application connected to a REST Backend](https://reader031.fdocuments.us/reader031/viewer/2022021923/5a64fd467f8b9a93328b475f/html5/thumbnails/19.jpg)
Questions
Twitter :
Mobile Backend github.com/FuseByExample/mobile-rest-in-action
REST with Camel github.com/FuseByExample/rest-dsl-in-action
@cmoulliard