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'application...
Contexte
 Client : cabinet d'architectes
 Besoin : faire des audits d'accessibilité handicapés ERP
 Objectif : développ...
Aperçus IHM application WEB
Fonctionnement hors ligne ?
 Bonus : pouvoir fonctionner hors-ligne (hors 3G-4G)
 Bonus → devenu impératif !
 Applicati...
Outils et Frameworks
The web's scaffolding tool
for modern webapps
WEB application framework
V 1.3.1 + Java
Usine logiciel...
Générations WEB & mobile
Sources partie serveur :
Play, java, scripts, SQL, ...
Sources partie cliente :
AngularJS, HTML, ...
AngularJS et Cordova : couple idéal ?
 AngularJS (ou autre framework SPA) :
– Un fchier de départ (ex : index.html)
– Cha...
Grunt ↔ Cordova
 2 solutions :
– Grunt appelle Cordova qui est déclaré comme une
“task”
– Cordova appelle Grunt via un “h...
Cordova : API & plugins
 API : essentiellement des “events” : deviceready, pause,
resume, backbutton, menubutton, searchb...
Conclusion ?
●
AngularJS : vraiment excellent :-)
– Injection de dépendance, tests unitaires, ...
●
Investir dès le départ...
Xavier NOPRE
@xnopre xnopre.blogspot.com
Indépendant
Artisan Développeur WEB & mobile
Agiliste
Développement
d'application...
Prochain SlideShare
Chargement dans…5
×

Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et mobile "faciles"...

696 vues

Publié le

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

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
696
Sur SlideShare
0
Issues des intégrations
0
Intégrations
32
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et mobile "faciles"...

  1. 1. Angular + Cordova = application WEB & mobile "faciles" ... Xavier NOPRE – 08/09/2015 GRENOBLE
  2. 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. 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. 4. Aperçus IHM application WEB
  5. 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. 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. 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. 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. 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. 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. 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. 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 !

×