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

Embed Size (px)

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

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

    Xavier NOPRE 08/09/2015

    GRENOBLE

  • Xavier NOPRE

    @xnopre xnopre.blogspot.com

    Indpendant

    Artisan Dveloppeur WEB & mobileAgiliste

    Dveloppement

    d'applications sur

    mesure

    Formations enentreprises

    (dveloppementagile, WEB, )

    https://twitter.com/xnoprehttps://twitter.com/xnoprehttp://xnopre.blogspot.com/

  • Contexte

    Client: cabinet d'architectes Besoin: faire des audits d'accessibilit handicaps ERP Objectif : dvelopper 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 gnrer un rapport PDF

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

  • Aperus IHM application WEB

  • Fonctionnement hors ligne ?

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

    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 donnes Complments fonctionnels grce 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

  • Gnrations 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 idal ?

    AngularJS (ou autre framework SPA) : Un fchier de dpart (ex : index.html)

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

    Cordova : Moteur de PhoneGap cd Fondation Apache

    Cre une application (Android, iOS, ) avec uneWebView

    Encapsule tout un rpertoire (defaut : www)

    Avec un point de dpart (dfaut : index.html)

    Et voil ! :-)

  • Grunt Cordova

    2 solutions :

    Grunt appelle Cordova qui est dclar comme unetask

    Cordova appelle Grunt via un hook etune target spcifque

    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 dpendance, tests unitaires, ...

    Investir ds le dpart dans sa chaine de production !

    Application mobile ? Pas forcment LA solution... Appli WEB et/ou mobile : bon escient

    Application hybride : une trs bonne solution ! Simple, productivit, IHM unique, multi-plateforme, ...

    Cordova : Appli mobile basique avec les standards (JS, AngularJS, )

    Ajout de fonctionnalits spcifques grce aux API/plugins

    Diffcults ? Fonctionnement hors-ligne et synchro

  • Xavier NOPRE

    @xnopre xnopre.blogspot.com

    Indpendant

    Artisan Dveloppeur WEB & mobileAgiliste

    Dveloppement

    d'applications sur

    mesure

    Formations enentreprises

    (dveloppementagile, WEB, )

    MERCI !

    https://twitter.com/xnoprehttps://twitter.com/xnoprehttp://xnopre.blogspot.com/

    Diapo 1Xavier NOPREOK, a me passionne !Diapo 4Diapo 5Diapo 6Diapo 7Diapo 8Diapo 9Diapo 10Diapo 11Diapo 12