Angular + Cordova = application WEB & mobile "faciles" ...

Xavier NOPRE – 08/09/2015

GRENOBLE

Xavier NOPRE

@xnopre xnopre.blogspot.com

Indépendant

Artisan Développeur WEB & mobile

Agiliste

Développement

d'applications sur

mesure

Formations enentreprises

(développementagile, WEB, …)

Contexte

Client : cabinet d'architectes

Besoin : faire des audits d'accessibilité handicapés ERP

Objectif : développer une application pour simplifer cesaudits et gagner du temps

Solution : application WEB (riche, intuitive, effcace)

– En gros : avec un iPad, prendre des photos, saisir descommentaires et générer un rapport PDF

Bonus : pouvoir fonctionner hors-ligne (hors 3G-4G)

Aperçus IHM application WEB

Fonctionnement hors ligne ?

Bonus : pouvoir fonctionner hors-ligne (hors 3G-4G)

Bonus → devenu impératif !

Application WEB hors-ligne avec HTML5, cache, localstorage, etc … ?

– J'ai testé, je n'y crois pas ! :-(

Solution retenue → application mobile hybride iOS

– Avantages : ● Avoir en local toute la structures des pages

(HTML, CSS, JS) voire quelques données ● Compléments fonctionnels grâce aux API/plugins

Outils et Frameworks

The web's scaffolding tool for modern webapps

WEB application frameworkV 1.3.1 + Java

Usine logicielle

Serveur ClientServeur

Tests Mobile

Générations WEB & mobile

Sources partie serveur :Play, java, scripts, SQL, ...

Sources partie cliente :AngularJS, HTML, CSS, ...

« app » WEB

« Grunt build »

Packaging serveur

Serveur / cloud

Script (sync)

Scripts

App Store

Projet Xcode

« Ch#@ !§$£% Apple »

« cordova build... »« cordova run... »

● Deploy serveurX

● Deploy app mobile

Y

Y

Z

X

X

AngularJS et Cordova : couple idéal ?

AngularJS (ou autre framework SPA) :

– Un fchier de départ (ex : index.html)

– Chargement des JS (Angular et autre), des HTML(templates), des CSS, des images, ...

Cordova :

– Moteur de PhoneGap cédé à Fondation Apache

– Crée une application (Android, iOS, …) avec uneWebView

– Encapsule tout un répertoire (defaut : www)

– Avec un point de départ (défaut : index.html)

Et voilà ! :-)

Grunt ↔ Cordova

2 solutions :

– Grunt appelle Cordova qui est déclaré comme une“task”

– Cordova appelle Grunt via un “hook” etune “target” spécifque

hooks/before_prepare/010_grunt_build.js

Cordova : API & plugins

API : essentiellement des “events” : deviceready, pause,resume, backbutton, menubutton, searchbutton, …

Le reste par plugins :

– Battery Status, Camera, Console, Contacts, Device,Device Motion (Accelerometer), Device Orientation(Compass), Dialogs, FileSystem, File Transfer,Geolocation, Globalization, InAppBrowser, Media,Media Capture, Network Information (Connection),Splashscreen, Vibration, StatusBar, Whitelist,Legacy Whitelist

Conclusion ?● AngularJS : vraiment excellent :-)

– Injection de dépendance, tests unitaires, ...

● Investir dès le départ dans sa chaine de production !

● Application mobile ? Pas forcément “LA” solution...– → Appli WEB et/ou mobile : à bon escient

● Application hybride : une très bonne solution !– Simple, productivité, IHM unique, multi-plateforme, ...

● Cordova : – Appli mobile “basique” avec les standards (JS, AngularJS, …)

– Ajout de fonctionnalités spécifques grâce aux API/plugins

● Diffcultés ? Fonctionnement hors-ligne et synchro

Xavier NOPRE

@xnopre xnopre.blogspot.com

Indépendant

Artisan Développeur WEB & mobile

Agiliste

Développement

d'applications sur

mesure

Formations enentreprises

(développementagile, WEB, …)

MERCI !