Création d’une application mobile hybride avec Ionic

PARTIE 1 : l’introduction

L’idée d’une application mobile a été lancée au moment de la refonte de notre portail Camping Street View.

Il s’agit d’un portail qui présente exclusivement des vidéos de camping.

Dans sa première version l’ensemble des vidéos étaient réalisées par des équipes de saisonniers. Ils partaient chaque été -une GoPro sur le front- faire le tour des campings d’Europe.

Dans un second temps pour élargir la base de contenus, nous avons offert la possibilité à nos clients d’ajouter des vidéos Youtube ou Dailymotion.

Pour cette nouvelle version, on réfléchissait alors au moyen d’augmenter à nouveau la quantité de contenu exclusif, de laisser plus de contrôle à nos clients et de proposer aux utilisateurs des images récentes.

C’est ainsi que l’idée de créer une application mobile fait son entrée.

Nos clients gérant ou personnel de camping, devraient pouvoir en un minimum d’effort créer des vidéos.

Décision prise, il nous faut choisir une technologie et créer une preuve de concept rapidement :

notre entreprise n'a pratiquement aucune expérience dans la création d’application mobile, aucun développeur dans notre équipe n’est familier des langages natifs sur mobile que ce soit sur Android ou iOS et nous souhaitons impérativement cibler les deux plate formes : on s’oriente vers une application dites hybride-

En tant qu’aficonados des technologies Microsoft, on aurait pu démarrer un projet Xamarin (qui semble plein d’atout). Mais comme je l’ai dis, il nous fallait un prototype rapidement pour démontrer la pertinence du projet.

C’est là qu’un petit gars arrive et dit : "Cordova"

Qu’est ce Cordova ?

Donc Cordova permet d’envelopper du code HTML/javascript dans un container natif.

Au delà de ça, il propose une API javascript qui permet d’écrire un code unique pour gérer toutes les plate-formes. Inutile de se soucier de la plate-forme cible (Android, iOS, …) l’application s'exécute dans un wrapper qui se charge de rediriger les fonctions Cordova vers leur équivalents natif.

De la même manière, il propose tout un tas de plugins pour accéder au composants natifs du mobile (camera, gps, bluetooth, boussole, ..).

Mais je connais aussi les limites de Cordova.

Si on se contente de Cordova, en codant directement "from scratch", on aura du mal à retrouver le look and feel d’une application native. Bootstrap ou jQuery UI étant clairement dépassés sur le sujet.

Il faut également savoir que le rendu des pages html dans Cordova se fait via un composant natif  - le webview : une version allégée du navigateur.
En fonction de la version de l’OS, ce composant est plus ou moins récent, le rendu des pages peut donc varier et certaines fonctions JS peuvent ne pas être prises en charge. On s’expose donc aux mêmes problèmes de compatibilité que l’on peut avoir avec différentes versions de navigateurs.

Il nous faut donc une technologie capable de nous éviter ces peines.

Ionic

Ionic est la solution qu’on a adopté. Il s’agit d’un framework pour la création d’applications mobiles qui utilise Cordova pour en faire une application native. Il nous apporte un cadre et une structure pour le développement de notre application. Il est construit autour d’Angular et du langage TypeScript.

On a donc droit aux composants, au data binding, à l’injection de dépendance, aux classes, au typage, …🙌😎

Mais il propose aussi à la manière de Bootstrap des composants d’interface qui vont faciliter le travail de design, et nous aider à produire un prototype en moins de deux.

Ces composants d’interface s’adaptent à la plate-forme cible. C’est à dire qu’un bouton Ionic aura une apparence sur iOS différente de celle qu’il aura sur Android, pour coller aux design guidelines de chaque plate-forme. Ionic pousse donc le concept hybride de Cordova jusque dans le design.

Maintenant que le contexte est posé, rendez-vous au prochain épisode pour mettre en place notre environnement de développement et démarrer un nouveau projet, on verra la CLI d’Ionic et les outils que propose Visual Studio 2017.