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.

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.

Angular : Toute l’intelligence de l’app est en Javascript et conçu à l’aide d’angular.

Cordova : C’est la couche système qui assure la liaison avec les systèmes natifs (iOS, Android, Windows)

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