Bonjour à tous ! Dans cet article nous allons aborder la ligne de commande sur ordinateur, qui peu paraître impressionnante pour les débutants.

En effet il n’est pas évident de prendre en main le terminal de son ordinateur au début et les erreurs peuvent être courantes.

Pourtant, son utilisation est indispensable à la création d’application avec Ionic, pour créer l’application ou pour la publier sur les stores.

Néanmoins rassurez-vous, moi aussi le terminal m’a paru insurmontable, mais à force de persévérance j’ai réussi à maîtriser la bête.

Je vous livre aujourd’hui toute mon expérience et mes astuces pour maîtriser la ligne de commande sur Mac ou PC.

https://blog.ionicframework.com/new-to-the-command-line/

Qu’est-ce que le terminal d’un ordinateur ?

Pour commencer, qu’est-ce que le terminal, ou la console de votre ordinateur ?

Il s’agit tout d’abord d’un logiciel, présent sur tous les ordinateurs de la planète (Mac, PC ou Linux) qui permet de communiquer directement avec son ordinateur.

Mais que peut-on bien dire à son ordinateur ?

En fait, le terminal va vous permettre de donner des instructions directes à votre ordinateur, par exemple d’installer un outil informatique.

Il peut également vous servir à obtenir des informations sur les versions actuelles de vos outils comme les frameworks par exemple.

À quoi nous sert le terminal dans le cadre du développement d’application mobile ?

Mais alors, pourquoi devons-nous utiliser le terminal pour développer des applications Ionic ?

Par exemple si vous avez suivi le tutoriel pour installer Ionic sur votre ordinateur, vous avez remarqué que le terminal nous sert à installer Ionic.

De manière plus générale, il va nous permettre de télécharger des outils informatiques, comme Ionic mais aussi comme des paquets ou des plugins.

La deuxième fonctionnalité indispensable du terminal est qu’il nous permet de tester et de lancer localement notre application. Vous pouvez en effet visualiser en direct votre application dans le navigateur grâce à la commande :

ionic serve

Enfin, le terminal va ni plus ni moins nous permettre de créer toutes nos nouvelles applications, et à l’intérieur d’elles de leur ajouter de nouvelles pages par exemple.

La ligne de commande est donc un outil indispensable à la création d’application avec Ionic.

Comment ouvrir un Terminal sur votre ordinateur ?

La ligne de commande est accessible sous plusieurs logiciels, peu importe votre système d’exploitation vous y aurez toujours accès.

Sur Windows, tapez console dans la barre de recherche de votre PC puis ouvrez le logiciel suivant:

Sur Mac, tapez Terminal dans la barre de recherche de votre ordinateur puis ouvrez le logiciel suivant:

Vous pouvez également utiliser l’éditeur de code Visual Studio Code pour utiliser la ligne de commande. Ce logiciel que vous pouvez déjà télécharger est présent sur tous les systèmes d’exploitation.

Dans le menu de votre éditeur, ouvrez le menu “Terminal” et cliquez sur “New Terminal”:

Une fenêtre apparaîtra alors en bas de votre écran et vous permettra d’utiliser la ligne de commande directement dans le dossier de votre projet en cours.

Nous allons voir dans la prochaine partie la gestion de la navigation dans le terminal.

Comment naviguer dans votre ordinateur ?

Le principe de la ligne de commande est relativement simple, le logiciel s’ouvre et vous pouvez entrer une commande à la fois à votre ordinateur.

Nous verrons juste après les principales commandes d’Ionic utiles au développement d’applications.

Mais l’une des spécificités de la ligne de commande est qu’elle s’exécute à un endroit précis de votre ordinateur. Par exemple lorsque j’ouvre mon terminal sur mon Mac, il m’ouvre la ligne de commande dans le dossier de ma session utilisateur.

En revanche si je veux lancer mon application sur mon navigateur avec la commande ionic serve, il faut que je me trouve dans le dossier de mon application en question.

Le principe de la navigation dans la ligne de commande est très simple, elle se fait dossier par dossier. Par exemple pour vous rendre dans un dossier à l’intérieur de votre dossier, entrez:

cd dossier

Pour naviguer à travers deux dossiers à la fois, tapez:

cd dossier/sous_dossier

Vous pouvez naviguer dans autant de dossier que vous le souhaitez:

cd dossier/sous_dossier/sous_sous_dossier

Pour revenir en arrière dans le dossier parent tapez:

cd ..

Vous pouvez également naviguer plus rapidement à travers deux dossiers avec:

cd ../..

Si vous souhaitez ouvrir un dossier (ou un fichier) dans votre dossier actuel, tapez:

open sous_dossier

Enfin, si vous souhaitez créer un nouveau dossier comme je vous le conseille de le faire dans le tutoriel de l’installation d’Ionic, vous pouvez taper:

mkdir sous_dossier

Les principales commandes du terminal et d’Ionic

Maintenant que vous êtes capables de naviguer à travers le terminal de votre ordinateur, voyons les principales commandes que vous serez amené à utiliser avec Ionic.

Pour commencer, l’installation d’Ionic se fait avec la ligne de commande suivante:

npm install -g ionic

Attention, vous devez télécharger Node JS comme indiqué dans le tutoriel de l’installation d’Ionic pour exécuter une commande NPM.

Pour créer une nouvelle application Ionic, entrez la commande suivante avec les deux paramètres du nom et du type de l’application:

ionic start myApp tabs

Ici myApp est le nom de mon application et tabs est le type de celle-ci.

Vous pouvez également créer une application avec un menu latéral:

ionic start myApp menu

Ou encore une application vierge avec une seule page et sans menu:

ionic start myApp blank

Attention, lorsque vous entrez cette commande votre application est créée dans le dossier dans le lequel vous vous trouvez.

Je vous conseille donc de créer un dossier contenant toutes vos applications que j’ai appelé “appli-ionic”. Je m’y rend à chaque fois que je crée une nouvelle application.

Pour lancer votre application sur votre navigateur, rien de plus simple, rendez-vous dans le dossier de votre application avec la commande:

cd myApp

Puis entrez la commande suivante pour créer un serveur local et visualiser votre application sur votre navigateur par défaut:

ionic serve

Pour visualiser en même temps les versions Android et iOS, vous pouvez installer l’Ionic Lab avec la commande suivante:

npm install @ionic/lab

Il vous suffit alors d’entrer la commande ionic serve avec comme paramètre –lab ou -l pour lancer le Lab:

ionic serve -l

Une fois à l’intérieur de votre application, la ligne de commande vous permet de créer toute sorte d’objet dans votre application. La plus utile de ces commandes est par exemple de demander la création d’une nouvelle page :

ionic g page Home

Ici Home est le nom de ma page, mais vous pouvez l’appelez comme vous voulez: Contact, Messages, Videos.

Passons maintenant aux commandes un peu plus avancées. Par exemple lorsque vous concevez votre application, viendra le moment où il faudra exporter vos applications sur iOS et Android.

Ionic va vous construire deux dossiers chacun contenant les informations, fichiers et dossiers relatifs à chaque plateforme.

Pour ajouter et créer la plateforme iOS, entrez la commande:

ionic cordova platform add ios

Pour ajouter la plateforme Android:

ionic cordova platform add android

Il peut être utile parfois de supprimer une plateforme puis de la recréer. Pour cela, entrez simplement la commande “remove” ou en plus court “rm” avec la plateforme de votre choix:

ionic cordova platform rm ios

Voyons maintenant comment générer les icônes et les splashscreen de votre application avec la ligne de commande. Vous pouvez utiliser la commande suivante pour générer absolument tous les fichiers nécessaires:

ionic cordova resources

Mais si vous ne souhaitez générer que les icônes de l’application iOS, entrez plutôt la commande suivante:

ionic cordova resources ios -i

Vous l’avez compris, pour générer le splashcreen on utilise le paramètre “-s” et pour la version Android “android”, exemple:

ionic cordova resources android -i
ionic cordova resources android -s
ionic cordova resources ios -s

Enfin, l’une des dernières commandes à utiliser est celle pour construire votre application. Par exemple pour mettre à jour votre application iOS, vous devez entrer la commande suivante:

ionic cordova build ios

Celle-ci mettra à jour votre application iOS et votre projet Xcode associé, avec tous les nouveaux codes et nouvelles ressources.

Les spécificités de MacOS (utilisation de sudo)

Voyons maintenant l’une des spécificités de MacOS et de l’environnement de développement d’Apple. L’une des différences avec Windows est que par défaut MacOS vous demande votre autorisation pour absolument tout.

Tandis que Windows peut installer librement des paquets, vous devrez vous identifier sur Mac pour télécharger ces mêmes paquets.

Concrètement sur la ligne de commande, cela se traduit par l’utilisation du mot clé “sudo” avant chaque commande impliquant une installation ou un téléchargement:

sudo [...]

Par exemple lorsque vous installez Ionic sur votre ordinateur Mac, vous devez entrer la commande suivante:

sudo npm install @ionic/lab

Toutes les commandes impliquant NPM devront posséder le mot “sudo” en début de commande.

Il vous arrivera peut-être de devoir utiliser sudo sur d’autres types de commandes, comme ce fut le cas pour moi lors de la construction de mon application iOS.

sudo ionic cordova build ios

Installer des paquets avec NPM

Prenons maintenant l’exemple de l’installation d’un nouveau plugin dans votre application. Disons que vous souhaitez utiliser Firebase en utilisant le plugin natif suivant: https://ionicframework.com/docs/native/firebase

Ionic vous proposera alors une ou deux lignes de commandes à entrer. La première sous la forme d’une commande cordova:

ionic cordova plugin add cordova-plugin-firebase

La deuxième sous la forme d’une commande NPM:

npm install @ionic-native/firebase

N’oubliez pas, sur Mac utilisez le mot “sudo” avant chaque commande NPM.

Quelques astuces pour mieux gérer le terminal

Lorsque vous entrez une commande dans votre terminal, elle s’exécute à un endroit bien précis de votre ordinateur.

Par exemple lorsque vous installez un nouveau plugin, vous devez le faire dans le dossier de votre application.

En revanche, il peut être utile d’exécuter des commandes pour qu’elles agissent sur l’ensemble de votre ordinateur, par exemple pour une mise à jour.

Lorsque vous installez Ionic, la commande par défaut contient le paramètre “-g” qui veut dire global, et indique qu’Ionic doit être installé et par la suite accessible sur l’ensemble de votre ordinateur.

npm install -g ionic

Donc pour installer un paquet ou un framework de manière globale sur votre ordinateur il vous suffit d’ajouter le paramètre -g après la commande npm install:

npm install -g

La version complète du paramètre est la suivante:

npm install --global

Comment gérer les erreurs de notre terminal ?

Pour terminer ce tutoriel, je vous laisse quelques liens et méthodes de recherche pour résoudre vos erreurs dans la ligne de commande.

Première chose, vous n’êtes jamais le premier à rencontrer cette erreur et c’est valable dans 99 % des cas. Votre erreur a donc probablement déjà été résolue par quelqu’un d’autre sur internet.

Deuxièmement, tout problème à une solution. Même si la difficulté vous paraît insurmontable sur le moment, absolument tout problème informatique possède une solution.

Même si c’est dur, même si c’est long et compliqué, n’abandonnez jamais car c’est ce genre de moments et d’épreuves qui font la différence avec ceux qui persévèrent et réussissent.

Troisièmement, si c’est dur pour vous, c’est dur aussi pour les autres. Résultat si vous essayez de créer une application ambitieuse est que c’est difficile, ça le sera aussi pour les autres et cela éliminera un grand nombre de concurrents potentiels.

Voilà donc pour finir les meilleurs sites pour rechercher vos erreurs Ionic et de la ligne de commande en général, le plus important étant Google: