Fév 16, 2016 Ionic

Ionic : présentation

De plus en plus les applications mobiles deviennent prédominantes dans le monde d’Internet. Lorsqu’on est passionné de codage et qu’on s’est plutôt intéressé aux applications classiques, on ne peut rester indifférent à cette évolution. Je me suis donc un peu promené dans cet Univers et le moins qu’on puisse dire est que ce qui domine est la variété des solutions. Le principal écueil réside dans le fait qu’on se trouve en présence de systèmes natifs très éloignés les uns des autres. Par exemple avec Android on code en Java, avec Apple on code en Objective-C et avec Microsoft c’est du C#. Mais ces différences de langage ne sont pas la vraie difficulté, c’est bien plutôt le fait d’avoir affaire avec des écosystèmes totalement différents !

Il est bien entendu toujours avantageux de développer en natif pour accéder à tout le potentiel d’un système mais on se limite alors en matière de diffusion, sauf à coder plusieurs fois en natif sur différentes plateformes la même application. Reconnaissez que c’est tout de même laborieux !

On peut aussi créer une application web qu’on peut lancer à partir d’un navigateur dont tous les mobiles sont équipés. Mais cela implique une connexion et n’est pas toujours une réussite en matière d’affichage et d’ergonomie… je m’y suis un peu frotté avec un jeu.

La dernière solution consiste à créer une application hybride. C’est quoi cette bête ? Tout simplement le meilleur des deux mondes : on code comme pour une application web, donc avec des techniques classiques (HTML, CSS et Javascript) et on utilise un autre composant qui transforme tout ça pour que ce soit reconnu par les mobiles. On voit tout de suite les avantages de cette approche parce qu’on ne code qu’une fois avec des langages classiques et qu’on déploie sur toutes les plateformes. Mais évidemment on n’arrive pas à la précision des applications natives. On va dire que c’est le meilleur compromis.

Une application hybride peut s’installer sur un mobile et ainsi figurer sur les différents « App stores ». Elle peut aussi accéder aux fonctionnalités des mobiles comme la caméra, le GPS, l’accéléromètre…

Pour développer une application hybride facilement il vaut mieux utiliser un framework. Il en existe plusieurs mais celui qui semble le plus performant est ionic. Regardez par exemple ce comparatif récent. La seule contrainte réelle est l’obligation d’utiliser AngularJS mais même si je n’aime pas trop ce framework à cause de sa lourdeur et de sa complexité je luis reconnais une grande richesse !

Ionic

ionic-logo-blue

Donc Ionic est un framework qui permet de créer des applications hybrides qui ressemblent à s’y méprendre à des applications natives. Il est totalement open source. Il est bâti à partir d’AngularJS et utilise Apache Cordova pour la création des applications à partir du contenu web. Tout cela étant aussi open source.

Ionic propose des composants tout prêts pour l’interface des applications mobiles. Pour vous en faire une idée regardez cette page de la documentation. D’autre part ils s’adaptent automatiquement au système dans lequel ils sont visualisés : Android ou iOS.

Un ide

xdk-banner-badge

Choisir un framework c’est bien mais trouver un IDE qui permet de travailler simplement et efficacement c’est encore mieux. J’ai fait quelques essais avec Visual Studio, que je trouve un peu lourd, NetBeans, qui ne me convainc pas dans ce contexte. Finalement j’ai opté pour Intel XDK, le X signifiant qu’il s’adresses à d emultiples plateformes. Il possède tout le nécessaire pour le développement d’applications pour mobiles, en particulier hybrides :

  • un éditeur (brackets)
  • un émulateur
  • une connexion facilitée à un mobile pour les tests
  • l’intégration de Cordova
  • un outil de création et de publication…

Donc tout ce qu’il faut pour aller de l’idée du projet à sa publication !

Ionic creator

Même si Intel XDK est efficace il n’est pas équipé spécifiquement pour Ionic. Pour la réalisation de l’interface il existe en ligne un outil fantastique : Ionic Creator. Dans la version gratuite on a droit à un projet public qu’on peut exporter, ce qui est largement suffisant pour se faire la main !

On construit l’interface directement sur une seule page avec des glisser-déposer et le renseignement des propriétés :

ionic-creator

Une fois que l’interface est réalisée il suffit de l’importer et de la gérer directement dans Intel XDK pour mettre au point le code de fonctionnement.

Cet article est juste une mise en bouche. J’ai planté le décors et dans les prochains articles je montrerai comment utiliser tout ça pour créer facilement une application hybride. On commencera par comprendre comment utiliser efficacement Ionic Creator puisque très logiquement toute application doit commencer par la définition de son interface.

Laisser un commentaire