Ionic : une puissante alternative hybride au développement natif d’application mobile

Ionic : une puissante alternative hybride au développement natif d’application mobile

Qu’est ce que le framework Ionic ?

Ionic est un framework (comprendre “ensemble de composants et outils”) open-source basé sur AngularJS et Apache Cordova, pour faciliter le développement d’applications mobiles hybrides, développé par Drifty Co. depuis 2013.

Ionic est également agrémenté de plusieurs outils notamment :

  • CLI: interface de ligne de commande permettant de simuler, de déployer, d’installer des plugins
  • Ionicons: pack d’icônes présenté sous forme d’images vectorielles et police d’écriture
  • Ionic Creator : outil graphique de modélisation de page
  • Ionic Lab : outil graphique réunissant les rendus de styles d’Android et d’iOS
  • Ionic View App : outil permettant d’uploader et partager son application avec d’autres utilisateurs

Comment ça fonctionne ?

Ionic s’appuie sur NodeJS pour compiler l’ensemble des fichiers Web (i.e. HTML, JS, CSS) et NPM (Node Package Manager) pour installer des modules en dépendance (i.e. Apache Cordova, outils de test, outils de minification, …) et propose des éléments graphiques tels qu’un header, un menu, des listes, etc… – sous la forme de directives AngularJS et de feuilles de style – que nous retrouvons dans la plupart des applications mobiles.

Après avoir compilé l’ensemble des fichiers Web, Ionic se sert d’Apache Cordova/Phonegap afin de générer un code source pour l’OS demandé – iOS, Android, Windows Phone, etc… – puis compiler ce code source “natif” pour générer l’application. Natif ? Pas complêtement en fait. Il va en fait créer une “WebView” (un micro-navigateur en quelque sorte (mini-Chrome pour Android, mini-Safari pour iOS)) pour y placer tous les éléments graphiques. Pour tout le reste – notifications, appels système, appareil photo, … – il va faire des passerelles entre code natif et JavaScript afin que la WebView puisse appeller le code natif. Ces passerelles, ce sont les “Cordova Plugins” que vous pourrez installer selon vos besoins.

Et AngularJS dans tout ça ?

AngularJS est aussi un framework Javascript permettant de construire des applications web. Il repose sur le design pattern MVVM pour Model View ViewModel, où :

  • Model représente comme son nom l’indique la couche données/métier
  • View représente les pages et ses éléments DOM
  • ViewModel représente la couche reliant la vue et le modèle par un système de data-binding ; les changements de données impactent la vue qui se recharge automatiquement.

L’une des notions fortes dans AngularJS, c’est aussi les “directives” (ou plus récemment les “components” – AngularJS 1.5 et 2.0). Tous les éléments graphiques utilisables dans une application Ionic est proposé sous la forme de directives AngularJS composé d’un Controller (JS), d’une View (HTML) et d’une feuille de style (CSS). Ceci implique que vous pourrez surcharger très facilement JS, HTML et CSS si vous en avez besoin.

Pourquoi utiliser Ionic ?

Ionic présente divers avantages, le principal étant le gain de temps lors du développement.

En effet, plutôt que d’écrire une même application en Java (pour Android), puis en Objective-C ou Swift (pour iOS), nous allons développer en JS puis générer les codes sources des plateformes demandées.

De ce fait, imaginons que nous devons ajouter une fonctionnalité à notre application.

Avec Ionic, ceci est transparent, nous modifierons nos pages HTML, scripts JS et/ou styles CSS, ainsi cela impactera toutes les plateformes installées.

La création des pages et interfaces sont aussi facilité les feuilles de styles fournis avec Ionic.

Le responsive design peut être appliqué avec les mêmes techniques que pour un site web.

La communauté d’utilisateurs autour de Ionic est très active, il existe de nombreux forums, de sites de ressources (kits de démarrage, thèmes et plugins) et d’entraides.

Néanmoins, on notera quelques inconvénients à Ionic. Même s’il est vrai que développer avec ce framework peut nous faire gagner du temps, la courbe d’apprentissage d’AngularJS et de son écosystème est lente.

Nous avons ressenti un manque de fluidité / lenteur de la navigation lorsque l’application devient complexe.

Les performances d’exécution et de traitement n’égalent pas les performances que l’on peut trouver lorsque nous développons en natif.

Ionic s’avère très efficace lorsque l’application souhaitée n’est pas ou peu gourmande en ressource.

Pour une application avec des animations fluides et une gestion pointilleuse de la mémoire, il serait préférable de la développer en natif.

Comment installer Ionic ?

Commencez par installer l’environnement de base à savoir NodeJS (disponible à cette adresse : https://nodejs.org).

Une fois NodeJS installé, il suffit d’exécuter la commande suivante (dans un Terminal) :

Ionic 1

Cette commande installe et ajoute les commandes “ionic” et “cordova” dans votre système d’exploitation.

Note

Pour générer une application mobile, quelque soit les plate-formes souhaitées, il vous faudra au préalable installer leurs SDK. Ces derniers serviront à la compilation et à la génération de l’application.

Pour générer une application Android, il faut installer le SDK Java ainsi que le SDK Android.

Quant à une application iOS, il faut installer Xcode. Un environnement Mac OS est nécessaire.

À quoi ressemble une application hybride avec Ionic ?

Votre environnement est désormais prêt.

Pour créer votre première application Ionic, exécutez la commande dans un Terminal :

Ionic 2

En quelques mot, la commande ci-dessous, initialise un projet Ionic avec un menu latéral (sidemenu) nommé MyApp.

 

Note

Le framework Ionic fournit 3 différents templates :

  • blank : application vide
  • sidemenu : application avec un menu glissant sur le coté (accessible avec un bouton “hamburger”)
  • tabs : application avec des onglets

Si le nom template à utiliser n’est pas précisé, c’est le template tabs qui sera utilisé.

À l’heure où ces lignes sont écrites, l’architecture d’une application Ionic ressemble à l’image qui suit.

Ionic 3

Fig 1. Répertoire de l’application MyApp créée.

Nous y trouvons les éléments suivants :

  • json : annuaire de dépendances à installer avec Bower
  • xml : fichier de configuration de base
  • js : gestionnaire de tâches automatisées Gulp
  • hooks/ : répertoire de scripts qui sont déclenchés avant et après les commandes Cordova
  • project : fichier de projet Ionic
  • json : annuaire de dépendances et de plugins à installer avec NPM
  • platforms/ : répertoire des sources générées par plate-forme (iOS, Android…)
  • plugins/ : répertoire des plugins Cordova
  • scss/ : répertoire des feuilles de styles dynamiques (SCSS)
  • www/ : répertoire des pages web et JS

Avant de poursuivre notre découverte de Ionic, il est important de présenter deux dépendances de Ionic : Bower et Gulp.

Bower est un outil de gestion de paquets pour faciliter le développement coté client. Il repose sur NodeJS, NPM et utilise les dépôts Git pour installer les paquets nécessaires.

Gulp est un outil permettant d’automatiser les tâches de développement récurrentes. Il permet par exemple de minifier le CSS après avoir modifier un des fichiers SCSS.

Comment déployer sur les différentes plateformes mobiles ?

Commençons par déployer notre application dans un navigateur web.
Dès lors, nous pouvons lancer un serveur local de test à l’aide de la commande suivante :

Ionic 4

Votre navigateur par défaut devrait s’ouvrir avec votre application chargée.

Maintenant que tout fonctionne en local, nous allons ajouter le support d’une plate-forme afin de pouvoir la tester dans un émulateur puis sur téléphone/tablette.

Commençons par Android.

Pour ajouter une plate-forme, lancez la commande suivante :

Ionic 5

Pour vérifier que l’opération s’est bien déroulé, jetez un coup d’oeil dans le répertoire platforms, un dossier android doit être maintenant présent.

Si vous êtes sur Mac OS, vous pouvez aussi ajouter iOS, la commande est très similaire à celle pour Android :

Ionic 6

Pour supprimer la plate-forme iOS :

Ionic 7

Vous pouvez ajouter autant de plate-formes que vous le souhaitez, ci-dessous la liste de toutes celles que vous pouvez avoir :

  • amazon-fireos
  • android
  • blackberry10
  • browser
  • firefoxos
  • ios
  • osx
  • webos

Ainsi vous comprendrez aisément qu’ajouter une plate-forme ne rime pas avec développement fastidieux dans un langage que vous ne connaissez pas forcément.

Une fois la plate-forme ajoutée, nous allons pouvoir tester notre application.

Pour ce faire, dans un émulateur Android, lancez la commande suivante :

ionic 9

Note

L’émulateur Android peut s’avérer long à se lancer et lent à s’exécuter. Si vous rencontrez des difficultés à utiliser ce dernier, préférez alors une solution telle que Genymotion.

Lancez la commande suivante pour exécuter l’application sur un émulateur iOS (la plate-forme ios est requise pour cette opération) :

ionic 10

Si vous souhaitez lancer un iPad plutôt qu’iPhone, il faut préciser l’appareil cible comme ce qui suit :

 ionic 11

Pour lancer l’application sur un téléphone ou tablette, pensez à connecter votre appareil. Sur Android, il est nécessaire d’activer le mode de développement.

ionic 12

Qu’est ce qu’un plugin ? À quoi cela sert et comment en créer ?

Un plugin, ou communément plugin Cordova, est un module permettant de faire communiquer la partie web de notre application Ionic avec les parties logicielle et matérielle du téléphone.

ionic 13

Fig 2. Schéma de fonctionnement d’un plugin Cordova

Ainsi avec un plugin Cordova, nous pouvons recevoir des notifications Push, prendre des photos avec la caméra, se connecter avec les réseaux sociaux, utiliser le Bluetooth, l’accéléromètre etc…

Pour créer un plugin Cordova, plusieurs possibilités s’offrent à nous. La plus simple est d’utiliser le générateur de plugin avec Yeoman.

Commencez par installer le générateur avec la commande suivante :

> npm install -g generator-cordova-plugin

ionic 14

Créez un plugin avec la commande suivante :

> yo cordova-plugin

ionic 16

L’invité de commande vous demande alors les nom, description, identifiant et version initial pour votre plugin.

ionic 17

Fig 3. Aperçu du prompt de création de plugin avec Yeoman

Comme le montre l’image ci-dessous, un plugin Cordova se décompose en 3 parties :

  • xml : fichier de configuration, il décrit les plate-formes supportées ainsi que les fichiers à inclure.
  • src/ : répertoire contenant les codes natifs spécifiques pour chaque plate-forme.
  • www/ : répertoire contenant l’API Javascript qui fera le pont entre l’application web et la partie native.

ionic 18

Fig 4. Arborescence d’un plugin

Vous trouverez quelques exemples de plugins Cordova sur notre page Github Westudio.

Créer un plugin ne suffit pas lui seul pour être utiliser dans l’application Ionic. Pour l’installer, vous devez lancer la commande suivante :

>ionic plugin add MyCoolPlugin

ionic 20                                                                                                                               Fig 5. Ajout du plugin à l’application

Pour aller plus loin…

Le framework Ionic a su trouver sa communauté et il est relativement simple de se faire aider. Depuis sa sortie initiale de nombreux plugins Cordova ont vu le jour. Vous pouvez les retrouver sur leur marketplace : ngCordova.

L’équipe de Drifty Co n’est pas prête de s’arrêter en si bon chemin, si bien que la version 1.2 de Ionic vient de sortir (décembre 2015).

Ils annoncent aussi la sortie de Ionic 2 avec le support d’AngularJS 2.

Ressources et annexes

Ionic sur Github : https://github.com/driftyco/ionic

Framework Ionic : http://ionicframework.com/docs/guide/

Forum d’aide Ionic : https://forum.ionicframework.com/

Blog Ionic : https://blog.ionic.io/

Marketplace Ionic : http://market.ionic.io/

AngularJS : https://angularjs.org/

Marketplace NgCordova : https://ngcordova.com/docs/plugins/

Leave a Reply

Your email address will not be published. Required fields are marked *