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

cmoulliard@redhat.com

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