Ionic https://ionicframework.com est mon framework frontend de prédilection. LeCoinDuProf v1 a été écrit avec la version 3 du framework. La version 2 est réécrite en version 4.

Pourquoi ce framework ?

La raison est double. D’abord parce qu’avec un seul code, vous pouvez créer à la fois une application Android, iOS, une WebApp (PWA inclus) et une application Electron (Windows, OSX ou Linux). Autant dire que vous pouvez créer en une seule fois une application virtuellement prête pour n’importe quel système d’exploitation récent. Mais soyons clairs immédiatement : la compatibilité totale demande quand même beaucoup d’adaptations et non, tout n’est pas possible dans tous les contextes. Mais pour un projet comme LeCoinDuProf qui a essentiellement besoin de proposer une application Android, une application iOS et un site internet, c’est vraiment l’idéal.

La deuxième raison, c’est que Ionic fonctionne depuis toujours avec Angular, et depuis la version 4 également avec React et Vue. Si ma préférence reste à Angular, c’est bon de savoir que je peux capitaliser sur ma compréhension de Ionic pour m’adapter plus rapidement aux autres grands frameworks. On peut également utiliser Ionic 4 hors framework, mais je ne l’ai jamais fait, et donc je ne parlerai pas de ce que je ne connais pas bien. Pour cette raison, d’ailleurs, LeCoinDuProf restera un projet sous Angular.

Installer le framework

Ionic tout comme Angular requière node. Pour installer node, je vous renvoie à l’ancien article Gérer de multiples versions de node avec nvm. Au jour de l’écriture de cet article, j’utilise node 11. La performance par rapport à node 10 est sensiblement supérieure. Je n’ai pas encore testé avec node 12 qui vient de sortir, mais c’est probablement encore un peu plus rapide.

Une fois node installé, installez les outils CLI (command line interface) via la commande :

npm install -g ionic

Notez que le -g signifie que vous installez le CLI comme un outil global, donc sous OSX ou Linux, un petit sudo s’impose.

Pour les projets Angular, vous devrez installer également en global le CLI Angular (voir Tutoriel Angular Hello World à ce sujet)

Initialiser le projet

La commande magique est la suivante :

ionic start myApp blank

Ionic va d’abord créer le répertoire `myApp`, puis y créer un fichier `package.json` qui servira à gérer les dépendances (Voir Gérer les dépendances avec NPM pour plus de détails).

Il passera ensuite la main à ng (le CLI d’Angular) pour créer l’arborescence du projet. Ensuite il créera les premières pages du projet de base et configurera le router en fonction.

Toutes les modifications apportées à LeCoinDuProf V2 sont visibles dans le commit suivant : https://github.com/AlanCrevon/LeCoinDuProf/commit/f7630f10a719f664371c857a02ee7f3df72cbec4

Lancer le projet

Pour lancer le projet et l’afficher pour la première fois dans votre navigateur, il faut d’abord entrer dans le répertoire de l’application :

cd myApp

Puis lancer le server de développement :

ionic serve

Le projet devrait s’afficher seul dans votre navigateur par défaut. Si ce n’est pas le cas, rendez-vous sur http://localhost:8100