Design a Mobil Hybrid Application connected to a REST Backend
0 likes421 views
This document discusses the development of a mobile application using hybrid HTML5 frameworks, tools for integration, and a REST backend. It emphasizes the use of Apache Cordova and Ionic for creating cross-platform applications, along with details on project setup, plugin management, and server integration. Various coding examples and demonstrations are provided to illustrate the integration of a Node.js proxy server with the mobile application.
![Ionic List
blog.controller('FindAllCtrl',function($scope,fhcloud,articleService){
$scope.articles={};
fhcloud('/articles/',null,'GET')
.then(function(response){
articleService.replaceArticles(response);
$scope.articles=response;
})
});
<ion-viewview-title="Articles">
<ion-content>
<ion-list>
<ion-itemng-repeat="articleinarticles|orderBy:['user','title']"href="#/app/article/{{article.id
{{article.title}},posted{{article.postDate}},by{{article.user}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>](https://image.slidesharecdn.com/snowcamp-mobile-2016-160121153802/85/Design-a-Mobil-Hybrid-Application-connected-to-a-REST-Backend-8-320.jpg)
![Cordova Tooling
cordovacreate<PATH>[ID[NAME[CONFIG]]][options][PLATFORM...]
CreateaCordovaproject
PATH.........................Wheretocreatetheproject
ID...........................reverse-domain-stylepackagename-usedin<widgetid>
NAME.........................humanreadablefield
cordovaplugin<command>[options]
Manageprojectplugins
add<pluginid>|<directory>|<giturl>[...].....addspecifiedplugins
pluginidwillbematchedin--searchpath/registry
directoryisadirectorycontainingaplugin
giturlisagitrepocontainingaplugin](https://image.slidesharecdn.com/snowcamp-mobile-2016-160121153802/85/Design-a-Mobil-Hybrid-Application-connected-to-a-REST-Backend-10-320.jpg)
![Ionic Tooling
_ _
(_) (_)
_ ___ ___ _ ___
||/_|'_||/__|
||(_)|||||(__
|_|___/|_||_|_|___| CLIv1.7.12
=======================
serve[options]............................... Startalocaldevelopmentserverforappdev/testing
[--port|-p] ............................ DevserverHTTPport(8100default)
[--livereload-port|-r] ................. LiveReloadport(35729default)
[--address] ............................ Usespecificaddressorreturnwithfailure
[--platform|-t] ........................ Startservewithaspecificplatform(ios/android)
platform[options]<PLATFORM>................. AddplatformtargetforbuildinganIonicapp
[--noresources|-r] .................. DonotadddefaultIoniciconsandsplashscreenresources
[--nosave|-e] ....................... Donotsavetheplatformtothepackage.jsonfile
package<command>[options]................... UseIonicPackagetobuildyourapp(alpha)
<command>buildandroid,buildios,list,info,ordownload
[--release] .......................... (build<platform>)Markthisbuildasarelease
[--profile|-p<tag>] ................. (build<platform>)SpecifytheSecurityProfiletousewith
[--destination|-d<path>] ............ (download)Specifythedestinationdirectorytodownloadyourpackagedap
----](https://image.slidesharecdn.com/snowcamp-mobile-2016-160121153802/85/Design-a-Mobil-Hybrid-Application-connected-to-a-REST-Backend-11-320.jpg)
Design a Mobil Hybrid Application connected to a REST Backend
- 1. Développer une application mobile connectée à un backend REST Charles Moulliard (@cmoulliard) 21 Jan 2016
- 2. 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
- 3. Agenda Requirements Hybrid HTML5 Mobile Frameworks Tools Integration Technology Cloud Mobile Platform Demo - Part I / Local Demo - Part II / Backend
- 5. HTML5
- 6. JavaScript Model View Controller Improve project design Reduce coding lines
- 7. Ionic Fully integrated with AngularJS Provide AngularJS Extension Huge collection of Widgets (List, Buttons, Footers, …)
- 9. Apache Cordova Web Based App wrapped into a native Shell Access to native feature through JS Bridge Multiplatform
- 11. Ionic Tooling _ _ (_) (_) _ ___ ___ _ ___ ||/_|'_||/__| ||(_)|||||(__ |_|___/|_||_|_|___| CLIv1.7.12 ======================= serve[options]............................... Startalocaldevelopmentserverforappdev/testing [--port|-p] ............................ DevserverHTTPport(8100default) [--livereload-port|-r] ................. LiveReloadport(35729default) [--address] ............................ Usespecificaddressorreturnwithfailure [--platform|-t] ........................ Startservewithaspecificplatform(ios/android) platform[options]<PLATFORM>................. AddplatformtargetforbuildinganIonicapp [--noresources|-r] .................. DonotadddefaultIoniciconsandsplashscreenresources [--nosave|-e] ....................... Donotsavetheplatformtothepackage.jsonfile package<command>[options]................... UseIonicPackagetobuildyourapp(alpha) <command>buildandroid,buildios,list,info,ordownload [--release] .......................... (build<platform>)Markthisbuildasarelease [--profile|-p<tag>] ................. (build<platform>)SpecifytheSecurityProfiletousewith [--destination|-d<path>] ............ (download)Specifythedestinationdirectorytodownloadyourpackagedap ----
- 13. How to integrate
- 17. Demo - Part I
- 18. Demo - Part II
- 19. Questions Twitter : Mobile Backend github.com/FuseByExample/mobile-rest-in-action REST with Camel github.com/FuseByExample/rest-dsl-in-action @cmoulliard