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