develop a mobile application coonected to a rest backend

Develop a MobileApplication connected toa REST Microservice

Charles Moulliard (@cmoulliard)17 June 2016

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

Agenda

Requirements

Hybrid HTML5 Mobile

Frameworks

Tools

Integration Technology

Cloud Mobile Platform

Demo - Part I / Local

Demo - Part II / Backend

Hybrid Mobile Dev

What Hybrid means ?

JavaScript

Model View Controller

Improve project design

Reduce coding lines

Ionic

Fully integrated withAngularJS

Provide AngularJS Extension

Huge collection of Widgets(List, Buttons, Footers, …)

JBoss Mobile Eclipse

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; }) });

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

Architecture

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

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

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. ----

How to integrate

Nodejs Proxy Server

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()

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 : @cmoulliard

Mobile Backend github.com/FuseByExample/mobile-rest-in-action

REST with Camel github.com/FuseByExample/rest-dsl-in-action