Slides de ma présentation aux Human Talks Grenoble du 08/09/2015, avec un REX sur mon usage de AngularJS et Cordova pour générer simplement une application WEB et une application mobile

1. Angular + Cordova =
application WEB & mobile "faciles" ...
Xavier NOPRE – 08/09/2015
GRENOBLE

2. Xavier NOPRE
@xnopre xnopre.blogspot.com
Indépendant
Artisan Développeur WEB & mobile
Agiliste
Développement
d'applications sur
mesure
Formations en
entreprises
(développement
agile, WEB, …)

3. Contexte
 Client : cabinet d'architectes
 Besoin : faire des audits d'accessibilité handicapés ERP
 Objectif : développer une application pour simplifer ces
audits et gagner du temps
 Solution : application WEB (riche, intuitive, effcace)
– En gros : avec un iPad, prendre des photos, saisir des
commentaires et générer un rapport PDF
 Bonus : pouvoir fonctionner hors-ligne (hors 3G-4G)

4. Aperçus IHM application WEB

5. Fonctionnement hors ligne ?
 Bonus : pouvoir fonctionner hors-ligne (hors 3G-4G)
 Bonus → devenu impératif !
 Application WEB hors-ligne avec HTML5, cache, local
storage, 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

6. Outils et Frameworks
The web's scaffolding tool
for modern webapps
WEB application framework
V 1.3.1 + Java
Usine logicielle
Serveur ClientServeur
Tests Mobile

7. 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 serveur
X
● Deploy app mobile
Y
Y
Z
X
X

8. 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 une
WebView
– Encapsule tout un répertoire (defaut : www)
– Avec un point de départ (défaut : index.html)
 Et voilà ! :-)

9. Grunt ↔ Cordova
 2 solutions :
– Grunt appelle Cordova qui est déclaré comme une
“task”
– Cordova appelle Grunt via un “hook” et
une “target” spécifque
hooks/before_prepare/010_grunt_build.js

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

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

12. Xavier NOPRE
@xnopre xnopre.blogspot.com
Indépendant
Artisan Développeur WEB & mobile
Agiliste
Développement
d'applications sur
mesure
Formations en
entreprises
(développement
agile, WEB, …)
MERCI !