Aujourd’hui, nous allons voir comment installer la dernière version d’Ionic sur votre ordinateur, qu’il s’agisse d’un PC ou d’un Mac.

Outils et logiciels nécessaires :

  • Explorateur de fichier
  • Navigateur internet
  • Invite de commande
  • Node JS

Étape 1 : Rendez-vous sur le site d’Ionic

Il est important en informatique de toujours garder comme référence la documentation officielle.

Je vous invite donc à ouvrir dans une autre page, la documentation d’Ionic pour installer le framework : https://ionicframework.com/getting-started#cli

Vous verrez notamment qu’Ionic propose trois étapes très simples pour installer le framework, que nous détaillerons un peu plus pour que tout soit bien clair pour vous.

La documentation officielle d’Ionic pour installer le framework

Étape 2 : Téléchargez et installez Node JS

La première étape que nous propose Ionic, est d’installer la bibliothèque Node JS. Si vous êtes débutant en informatique, vous allez probablement froncer les sourcils et vous dire que ça commence mal…

Mais rassurez-vous, sachez que je suis passé par là, et que je vais précisément tout vous expliquer pour que cela reste accessible, facile et rapide pour vous.

Regardons rapidement la définition Wikipédia de Node JS :

Node.js est une plateforme logicielle libre et événementielle en JavaScript orientée vers les applications réseaux qui doivent pouvoir monter en charge.

Wikipedia.org/

Concrètement, Node JS vous permet d’accéder à des milliers d’outils informatiques, fonctionnalités ou plugins et va nous aider dans le développement de vos applications.

Par exemple, aujourd’hui Node JS va nous aider à installer rapidement Ionic sur votre ordinateur.

Rendez-vous sur le site de Node JS : https://nodejs.org/fr/

Le site officiel de la bibliothèque Node JS

Si vous êtes sur Windows, cliquez sur le bouton « Téléchargement » pour Windows (x64) (Recommandé pour la plupart des utilisateurs) et suivez la procédure d’installation classique sur votre ordinateur.

Si vous êtes sur Mac, cliquez sur le bouton « Téléchargement » pour macOS (x64) (Recommandé pour la plupart des utilisateurs) et suivez la procédure d’installation classique sur votre ordinateur.

Étape 3 : Installer Ionic

Nous allons maintenant utiliser un logiciel très important dans l’installation d’Ionic et même par la suite du développement d’application mobile, il s’agit du Terminal ou de la Console de votre ordinateur.

En fait, c’est un logiciel qui va vous permettre de communiquer directement avec votre ordinateur, et de lui donner des ordres. Vous allez lui entrer des commandes, comme nous allons le faire juste après, et il exécutera ensuite des instructions de manière autonome.

Par exemple la commande d’installation d’Ionic, consiste en fait à télécharger sur votre ordinateur tout un tas de dossier et fichiers utiles au développement d’applications mobiles.

Sur Windows, ouvrez le logiciel « Console » en faisant une recherche dans votre explorateur de fichier.

Sur Mac, ouvrez votre logiciel « Terminal », en faisant une recherche dans le finder.

Une fois ouvert, le terminal ou la console devrait vous afficher :

C:\Users\votre_prenom>

Vous vous trouvez au départ à la racine de votre ordinateur, mais dans une session bien précise, par exemple dans mon cas dans ma session utilisateur : drissalaoui-sosse.

Copiez maintenant cette première ligne de commande, pour installer Ionic :

npm install -g ionic

Attention, si vous êtes sur Mac, vous devez entrer le mot clé « sudo » devant la commande utilisant la bibliothèque npm (Node JS), car cela consiste à télécharger des paquets et donc MacOS a besoin de votre autorisation.

Sur Mac, entrez la commande suivante :

sudo npm install -g ionic

Le Terminal vous demandera ensuite votre mot de passe :

Password: 

Tapez votre mot de passe (qui ne s’affichera pas) puis appuyez sur Entrer pour valider le téléchargement.

Le terminal de mon Mac en train d’installer Ionic

Étape 4 : Créer le dossier pour vos applications

Cette partie est optionnelle, mais je vous la conseille pour bien repérer vos applications Ionic sur votre ordinateur.

Par défaut, la commande s’ouvre « tout en haut » de votre ordinateur, j’entends au niveau des dossiers racines de votre ordinateur. Notamment au niveau du dossier de votre session actuelle.

Je vous invite donc à créer un nouveau dossier ‘Appli-ionic’, dans lequel vous allez stocker tout le code de vos applications.

Pour créer ce dossier, exécutez la commande:

mkdir appli-ionic

Pour vous rendre dans ce dossier, exécutez la commande:

cd appli-ionic

Étape 5 : Créer votre première application

Maintenant que vous vous trouvez dans votre dossier ‘appli-ionic’, vous pouvez exécutez la commande pour créer une application :

ionic start leNomDeVotreApp LeStyleDeVotreApp

Quelques exemples:

ionic start Startuper tabs
ionic start Cuisine menu
ionic start Test blank
Les trois types d’applications par défauts d’Ionic

Étape 6 : Lancer votre application

Une fois l’application créée sur votre ordinateur, rendez-vous dans le dossier de cette application, en exécutant la commande:

cd leNomDeVotreApp

par exemple:

cd Startuper
cd Cuisine
cd Test

Une fois dans le dossier de votre application, nous allons maintenant installer Ionic Lab dans votre application pour visualiser les versions iOS et Android.

Tapez maintenant dans le terminal de Visual Studio Code:

npm install @ionic/lab

Une fois Ionic Lab installé,  lancez la commande:

ionic serve -l
Ionic Lab, l’interface pour visualiser son application sur iOS et Android