Développer des applications mobiles avec Ionic 2

Ionic logo

Qu’est ce que Ionic ?

Ionic est un framework de développement d’applications mobiles hybrides. Il s’est entouré de précieux alliés, tels que Apache Cordova (ex Phonegap) et AngularJS.

Pour pouvoir développer ses applications mobiles, Ionic se base donc sur Cordova, ce qui veut dire que tous les plugins Cordova permettant d’accéder aux fonctionnalités natives des mobiles peuvent être utilisés dans un projet Ionic. Avec Cordova, il est également possible de packager son application HTML et de la déployer sur les smartphones Android, iOS ou Windows Phone.
Mais il y rajoute une surcouche, et y joint notamment AngularJS, permettant l’ajout du MVC, ainsi que le CSS permettant de se rapprocher au mieux du style des applications natives (Android et iOS).

cordova-ng-ionic

Ionic c’est également une plate-forme offrant tout un panel d’outils destiné à faciliter la tache au développeur (plus de détails ci-dessous).

Applications mobiles : développement natif ou hybride ?

Lorsque l’on veut développer une application mobile, cette question est souvent l’une des premières que l’on se pose.

Une application mobile native permettra de mieux intégrer toutes les fonctionnalités du smartphone (GPS, appareil photo, …), et permettra également de mieux gérer la mémoire de l’appareil. Le développement natif est la solution qui offrira de meilleurs résultats en ce qui concerne la performance en terme de fonctionnalités.

Cependant, cela pose des soucis en terme de développement et de déploiement. En effet, aujourd’hui les applications sont le plus souvent destinées aux personnes possédant des appareils iOS et Android (voire Windows Phone). Le développement natif impliquera de doubler (voire tripler) le code source des applications, et il faudra également maintenir ces trois applications différentes (tout ça induit un coût supplémentaire).

Une application hybride est une application développée en HTML5/CSS3, qui s’exécute ensuite sur les smartphones dans une Webview. Cela permet d’avoir une application déployable sur tous les appareils, téléchargeable sur les différents stores (Google Play, App Store) et permettant d’utiliser les fonctionnalités du téléphone.
De plus, avec des frameworks comme Cordova, il est possible d’accéder aux APIs natives des smartphones pour utiliser appareil photo, notifications push,…
Cela permet d’avoir un seul code source pour toutes les plateformes mobiles (réduction du coût de développement et du coût de maintenance).

Mais il reste tout de même des freins à ce type de développement. En effet,il n’existe pas de composants UI standardisés, c’est-à-dire qu’il est possible de faire des applications pas (ou peu) adaptées à l’écran des smartphones. Et comme il n’y a non plus pas de standardisation dans la manière de développer, il faut également faire attention au contenu que l’on met dans nos pages HTML, en prenant en compte le fait qu’un smartphone n’a pas la même puissance qu’un ordinateur (même si aujourd’hui ils le sont de plus en plus). C’est moins de performance que les applications natives.

La solution Ionic

Ionic se base sur Cordova. Il va donc intégrer les outils permettant de builder l’application HTML en exécutable (pour Android, iOS ou Windows Phone). Il est également possible d’utiliser tous les plugins Cordova existant et d’accéder aux fonctions natives des smartphones.

A tout ça, on ajoute les fonctionnalités d’AngularJS : le modèle Vue/Contrôleur, ainsi que les différentes directives permettant de faciliter le développement.

Ionic propose ses propres outils en plus de Cordova et AngularJS.
En effet, avec Ionic, nous avons la standardisation des applications hybrides qu’il nous manquait. Ionic propose des styles CSS propres à chaque plateforme, permettant de développer des application au design très ressemblant à celui des applications natives. Ces styles CSS sont très facilement personnalisables, car la technologie utilisée est SASS (Syntactically Awesome Stylesheets, plus d’info ici: http://sass-lang.com/). Un système de variables Sass a été mis en place afin de pouvoir très facilement personnaliser le style de composants précis.
Par exemple, pour modifier la couleur de fond de l’application, il suffira de modifier la valeur de la variable: $background-color
Si vous voulez modifier la couleur seulement pour l’application iOS: $background-ios-color
Avec Sass, vous pouvez également ajouter très facilement vos propres feuilles de styles.
Et tout ce système est indépendant du code source javascript/HTML de votre application !

Ionic propose également des composants UI déjà tous faits, prêts à être utilisés, et dont le style est adapté en fonction de la plateforme sur laquelle sera déployée l’application. Cela permet un gain de temps dans le développement des interfaces.

Les outils Ionic mis à la dispotion du développeur

Ionic a mis au point son CLI (Command Line Interface), permettant d’utiliser plusieurs outils capables de faciliter la vie aux développeurs. Voici une liste non exhaustive de ces outils :

$ ionic start myApp [template]

Cette commande permet de démarrer très vite une application Ionic. Elle vous construira une application en fonction d’un template (celui par défaut, ou bien celui de votre choix parmi les templates proposés). Vous aurez très vite une application fonctionnelle avec laquelle démarrer.

$ ionic serve

Cette commande vous permet de lancer votre application sur votre localhost. Elle sera accessible dans le navigateur de votre ordinateur, mais elle pourra également l’être sur le navigateur de votre Smartphone si celui-ci est connecté au même réseau. Cela permet de tester très rapidement les développements faits.

$ ionic serve –lab

Cette commande fait la même chose que celle décrite ci-dessus, mais en plus elle vous ouvre une page “Lab” dans votre navigateur, à partir de laquelle vous aurez l’aperçu du rendu de votre application mobile sur les 3 plateformes : iOS, Android et Windows Phone.

Capture d’écran 2016-10-10 à 21.42.53

$ ionic build ios/android
Permet de construire le fichier exécutable pour les plateformes iOS ou Android

$ ionic emulate ios/android
Permet de lancer un émulateur afin de tester votre application.

$ ionic run ios/android
Permet de lancer votre application sur un vrai appareil. Si aucun n’est disponible, cela lancera un émulateur.

Pour plus d’informations, c’est par ici : https://ionicframework.com/docs/v2/cli/

Bilan

Ionic est un framework permettant de réaliser de manière très rapide et avec un résultat plus que satisfaisant des applications mobiles hybrides.
Il pourra vous convenir si vous avez besoin de lancer une application mobile très vite sur tous les stores, ou si l’application que vous souhaitez développer ne comprend pas de fonctionnalités très évoluées devant utiliser avec précision les composants natifs des smartphones (c’est-à-dire, si votre application reste une simple application de consultation de données par exemple).

Pour exemple, l’application InTech Mobile a été réalisée avec Ionic 2:
Play Store
App Store

Camille Thomassin, Pierrick Bena et Laurine Schuster

Sources

http://ionicframework.com/
http://ionicframework.com/present-ionic/slides/#/
https://adamdbradley.github.io/building-with-ionic2/#/
http://www.latreebu.com/blog/application-mobile-native-ou-web-3-solutions/

About laurine.schuster

Mail User
This entry was posted in Non classé and tagged , , , , . Bookmark the permalink.

2 Responses to "Développer des applications mobiles avec Ionic 2"

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*