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
Développer une applicationmobile connectée à unbackend REST
Charles Moulliard (@cmoulliard)21 Jan 2016
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
Agenda
Requirements
Hybrid HTML5 Mobile
Frameworks
Tools
Integration Technology
Cloud Mobile Platform
Demo - Part I / Local
Demo - Part II / Backend
Hybrid Mobile Dev
HTML5
JavaScript
Model View Controller
Improve project design
Reduce coding lines
Ionic
Fully integrated withAngularJS
Provide AngularJS Extension
Huge collection of Widgets(List, Buttons, Footers, …)
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>
Apache Cordova
Web Based App wrapped into anative Shell
Access to native feature through JSBridge
Multiplatform
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
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. ----
How to integrate
Nodejs Proxy Server
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; }; });
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); } }) };
Demo - Part I
Demo - Part II
Questions
Twitter :
Mobile Backend github.com/FuseByExample/mobile-rest-in-action
REST with Camel github.com/FuseByExample/rest-dsl-in-action
@cmoulliard