Ionic, un framework à suivre

ionic

Comme je vous l'avais annoncé dans l'article présentant le DevFest Nantes 2015, j'ai eu l'occasion d'assister, en autre, à la conférence Ionic un framework fun et productif. Cette conférence m'ayant particulièrement interpellée, la mobilité étant au cœur de nos métiers, j'ai décidé d'approfondir le sujet. En effet créer une application mobile en moins de 10mn, temps d'installation compris, cela peut faire rêver plus d'un développeur , je vais donc vous présenter dans cet article ce framework. 

Ionic, Angular Mobile First

Create incredible apps ! Ionic is the beautiful,open source front-en SDK for developing hybrid mobile apps with web technologies.

A la bannière du site ionicframework.com le ton est donné, ce framework est édité par la start-up Drifty et possède une communauté très active.

Ionic se base sur d'autres frameworks / technologies qui ont fait leurs preuves :

  • Gulp, pour la partie automatisation des compilations.
  • L'utilisation de Sass pour la gestion de thèmes
  • AngularJS, pour la partie front-end avec l'utilisation d'Angular UI Router pour la gestion des stats.
  • Apache Cordova, pour la création d'une application fonctionnelle sur mobile.
  • Et beaucoup de widgets facilitant le développement d'une interface graphique.

Ce framework open source permet de développer une application déployable sur plusieurs environnements tels qu’un site web ou une application mobile pour des systèmes tels que Android ou iOS ou Windows Phone…

Et c'est bien là l'avantage de Ionic ! Oubliez les problèmes de compatibilité ....

Passons donc au chrono, si vous le voulez bien !

3...2...1 ! c'est parti !

19h18 : Installation

Je vous fais grâce de l'installation de nodeJs, vous en êtes sûrement déjà équipé !

Pour commencer :

$ npm install -g ionic cordova

3 minutes plus tard, 19h21, l'ensemble des packages est installé, l'environnement est opé !

Continuons avec cette ligne de commande afin de créer un nouveau projet nous permettant de créer une application contenant un menu sur le côté

$ ionic start MySideMenuApp sidemenu

Pour information, Ionic nous propose 3 templates :
- tabs (application avec des onglets, template par défaut),
- sidemenu (application avec un menu sur le côté)
- et blank (application vide)
 

Voici le projet installé

Arborescence projet Ionic

Arborescence projet Ionic

J'attire votre attention sur les répertoires suivants :

  • ./hooks : pour la gestion des plateformes cibles,
  • ./plugins : pour les plugins à utiliser par l’application,
  • ./scss : pour customiser le “look and feel” de Ionic.

19h24, Démarrage du serveur

$ ionic serve

Et nous voici, avec une 1ère application fonctionnant en local :

 

Projet exemple Ionic

Projet exemple Ionic

Menu apparent

Menu apparent

Il nous reste 4 minutes, allons maintenant installer la plateforme Android afin de tester l'émulation d'Ionic!

Pour information, il est nécessaire d'installer  votre SDK android  
 
$ ionic platform add android
$ ionic emulate ios

 

Après un chargement plus ou moins rapide, le lancement de l'émulation peut, lui, prendre jusqu'à 10mn....

Je vous invite à aller visiter votre répertoire C:\IonicProjet\MySideMenuApp\platforms\android afin d'y observer les changements. 

Une fois fait, voici votre émulateur!

Emulator de Ionic

Emulator de Ionic

Pour conclure

Il nous aura fallu effectivement 10 minutes pour installer un environnement complet, une application prête à être implémentée et un simulateur.

Le développement hybride, ici permis par Ionic, implique le développement d'applications Web qui fonctionneront donc dans un navigateur, mais aussi comme des applications natives sur les systèmes d'exploitation mobiles comme iOS et Android.
Cette base de code unique simplifie grandement la gestion du cycle de vie de votre application et enfin les versions hybrides de l'application Web peuvent être enregistrées auprès de l'Apple App Store and Play Store de Google (impossible avec juste une application Web).

Cette 1ère tentative avec Ionic fut donc réellement enthousiasmante et suscite maintenant d'autres envies :Découvrir les performances, intégrer Firebase, découvrir les librairies de composants, personnaliser son CSS etc...

A suivre dans un prochain article sur Ionic, partie 2!

 

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.