Ionicframework, Angular, Cordova – Découvrir ionicframework pour créer une application iOS

Si vous créez des applications mobiles sous Android, iOS, Windows, vous avez nécessairement dû entendre parler du projet Cordova connu aussi sous le nom de PhoneGap. L’objectif affiché de ionicframework est de résorber en un framework la difficulté à developer pour chaque plate-forme spécifique. En un mot, adopter c’est déjà s’imposer !
Voilà donc ce que propose ni plus ni moins Ionicframework à l’aide d’Angular et de Cordova adresser grosso modo toutes les plates-formes et donc tous les usages pour créer des applications dans les meilleures conditions possibles de développement. Ce phénomène est à suivre comme en son temps on devait suivre pour PHP l’émergence des frameworks. Voilà pour le contexte.

Plus concrètement, au regard de l’hétérogénéité des environnement mobiles, c’est le rêve du “product owner”, “scrum master” et de l’équipe développement que de gérer un même “socle” de code pour adresser toutes les environnements donc toutes les audiences et les usages.

Pour mémoire, un petit article de ce blog sur PhoneGap, HTML5, JavaScript, jQuery Mobile – Introduction au framework PhoneGap

La magie Ionic

Avant de plonger dans le concret, histoire de savoir qui fait quoi et de comprendre le plus simplement possible le fonctionnement technique.

  1. Ionicframework: Pétri au HTML et à la CSS. C’est qui s’affiche sur les écrans de l’ app. Un conseil, laisser Ionic choisir lui même la version d’Angular.
  2. Angular : Toute l’intelligence de l’app est en Javascript et conçu à l’aide d’angular.
  3. Cordova : C’est la couche système qui assure la liaison avec les systèmes natifs (iOS, Android, Windows)
  4. Le bénéfice attendu en terme de développement et donc en terme financier. C’est un bon développeur qui connait la javascript ou éventuellement un des environnements natifs peut se débrouiller pour adresser les 3 environnements du marché sur la même technologie. Ce qui peut faire un gain substantiel de temps et d’argent en terme de développement et de satisfaction client.

    La toute première chose à faire est d’installer node.js si ce n’est déjà fait sans oublier de mettre à jour le runtime de Node.

    Ensuite vous pouvez installer ionic et gulp comme ce qui indiqué sur la page d’installation de ionicframework.com

    npm install -g cordova ionic gulp

    Pour information, Gulp est un équivalent de Grunt. C’est un compiler utilisé par Ionic pour faire du sass.

    Vous lancez ensuite la création de votre application.La notre se nomme myAppMadeWithIonic

    ionic start myAppMadeWithIonic tabs

    Vous vous rendez dans le répertoire de votre application myAppMadeWithIonic

    cd myAppMadeWithIonic/

    Pour éviter des problèmes de droit, vous aurez sans doute à passer les commandes suivantes au besoin :

    sudo chown yourusername /Users/yourusername/.config/configstore/update-notifier-cordova.json
    sudo chown yourusername /Users/yourusername/.config/configstore/bower-github.json
    sudo chown yourusername /Users/yourusername/path/myAppMadeWithIonic/www/css/ionic.app.min.css

    Pour éviter l’absence ou l’obsolescence, vous aurez sans doute à passer les commandes suivantes au besoin :

    sudo npm update
    sudo npm install
    sudo ionic setup sass

    Voilà la séquence de commandes pour créer votre application une fois dans le bon répertoire

    ionic platform add ios
    ionic build ios
    ionic emulate ios

    Voilà la séquence de commandes pour modifier la css de votre application, toujours dans le bon répertoire

    gulp sass
    ionic build ios
    ionic emulate ios

    On va mettre en rouge, l’element de css nommé
    bar-stable dans le fichier tabs.html

    On ajoute cette ligne dans ionic.app.scss et on “rebuild”, en gros on refait pour chaque modification CSS, on refait la compilation.

    $stable:#ff0000;

    Puis on relance la compilation avec la transformation en sass avec l’aide de gulp.

    gulp sass
    ionic build ios
    ionic emulate ios
    	    <!-- <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    	    <link href="css/style.css" rel="stylesheet"> -->
    		<link href="css/ionic.app.css" rel="stylesheet">
    	    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->

    La commande pour créer l’application
    Ionicframework, Angular, Cordova,  - Découvrir ionicframework pour créer une application iOS

    Le premier écran de notre application dans l’émulateur à savoir le fichier index.html
    Ionicframework, Angular, Cordova,  - Découvrir ionicframework pour créer une application iOS

    La commande gulp sass pour défoncer la feuille de style
    Ionicframework, Angular, Cordova,  - Découvrir ionicframework pour créer une application iOS

    Notre élément en rouge $stable:#ff0000;
    Ionicframework, Angular, Cordova,  - Découvrir ionicframework pour créer une application iOS

    Un slide sérieux sur l’architecture de Ionic
    Ionicframework, Angular, Cordova,  - Découvrir ionicframework pour créer une application iOS

    Source : Case study: integrating azure with google app engine avec le slide 11 qui explique la fonctionnement Ionic/Cordova. http://fr.slideshare.net/MiguelScotter/case-study-integrating-azure-with-google-app-engine

    Des commandes qui vous seront sans doute utiles.

    brew update
    brew upgrade node
    npm install -g npm
    npm install -g ios-sim
    npm install -g ios-deploy

    En savoir plus