Préparez votre environnement pour développer une application mobile multiplateforme avec Ionic

CLI

Interface en ligne de commande, c’est une interface permettant d’exécuter des commandes depuis la console (scripts). Sur Windows, si vous souhaitez utiliser l’invite de commande native il suffit d’ouvrir la fenêtre Exécuter en faisant Windows+R et en entrant cmd.

NODE.JS

Vous pouvez télécharger et installer la dernière version LTS de Node.js.

NPM

NPM est le gestionnaire de paquets officiel de Node.js qui gère les dépendances pour une application (librairies dont vous aurez besoin).

Pour installer NPM, il suffiet d’ouvrir la ligne de commadne (CLI)et taper la commande suivante :

npm install -g npm@latest

IONIC CORDOVA

Cordova (plus anciennement PhoneGap) est un Framework qui permet de créer des applications pour différentes plateformes en HTML, CSS et JavaScript. Veuillez installer Cordova de manière globale sur votre machine avec la commande suivante :

npm install -g ionic cordova

Création d’un nouveau projet

Vous pouvez créer un nouveau projet de type « blank » (c’est-à-dire sans contenu pré-généré), il suffit d’exécuter la commande suivante :

ionic start mon-projet-ionic blank

Lancer le serveur de développement

Il faut entrez dans le dossier créé :

cd mon-projet-ionic

Par la suite, veuillez exécuter la commande suivante pour lancer le projet :

ionic serve

ionic serve  lance un serveur de développement qui se recharge à chaque modification de fichier.

Pour visualiser l’application, il faut naviguer à  localhost:8100

Visual Studio Code

Personnellement, j’utilise Visual Studio Code comme IDE mais vous pouvez utiliser l’éditeur ou l’IDE de votre choix (comme WebStorm, Atom ou Sublime Text).

Structure du projet

Vous pouvez maintenant ouvrir votre projet avec Visual Studio Code et voir la structure de votre application.

Vous allez trouver dans la structure :

• Le dossier  node_modules  qui comporte tous les modules Angular, Ionic et Cordova installés par le CLI.
• Le dossier  platforms qui contient les ressources nécessaires au build final de votre application pour les plateformes différentes (comme iOS et Android).
• Le dossier  plugins qui contient les plugins Cordova qui permettent par exemple d’accéder aux fonctions natives des appareils (comme photo, le GPS, les outils médias).
• Le dossier  resources qui contient les ressources de votre applciation mobile comme les images correspondant à l’icône et au splash screen.
• Le dossier  www  géré par le CLI pour la création des packages finaux pour votre application.  
• Le dossier src qui nous concernera pour la création de notre application.

Dans le dossier src vous allez trouver :

• Le dossier  assets  contiendra les assets statiques de votre application (comme les images).
• Le dossier  theme qui permet de modifier le thème de votre application. 
• Le dossier environnement qui contient les variables d’environnement.

Dans le dossier src, vous allez trouver un dossier  app qui contient :

• Le dossier  home, qui contiendra la page principale de votre application.
• 6 fichiers : app-routing.module.ts, app.component.html, app.component.scss, app.component.spec.ts, app.component.ts et app.module.ts.

Maintenant, notre environnement est prêt 🙂