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.
C’est une étape obligatoire pour créer vos applications avec Ionic pour iOS et Android.
Ionic est un outil gratuit, qui permet à n’importe quel développeur de créer et publier des applications pur iOS et Android.
Pour installer Ionic sur votre ordinateur PC et Mac, nous allons suivre les étapes suivantes:
- Étape 1 : Rendez-vous sur le site d’Ionic
- Étape 2 : Téléchargez et installez Node JS
- Étape 3 : Installez le framework Ionic
- Étape 4 : Créez le dossier pour vos applications
- Étape 5 : Créez votre première application
- Étape 6 : Lancez votre application
Vous aurez également de plusieurs logiciel et framework sur votre ordinateur dont nous allons détailler l’utilisation.
Outils et logiciels nécessaires :
- Explorateur de fichier
- Navigateur internet
- Invite de commande
- Node JS
Étape 1 : Rendez-vous sur le site officiel avant d‘installer Ionic
Il est important en informatique de toujours garder comme référence la documentation officielle d’Ionic.
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.
Gardez également à l’esprit qu’Ionic ne fonctionne pas tout seul, il utilise d’autre outils et framework pour fonctionner.
Les tutos Ionic que je propose utilisent notamment le framework Angular JS de Google pour développer la base de nos applications mobiles.
D’autres framework comme Cordova sont indispensables également pour accéder aux fonctionnalités natives de nos smartphones (appareil photo, mémoire internet, etc).
L’installation d’Ionic comprend en fait l’installation de plusieurs framework vous allez le voir.
tape 2 : Téléchargez Node JS pour installer Ionic et Cordova
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/
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.
Ce que vous devez retenir de Node JS, c’est que c’est une bibliothèque JavaScript qui va vous permettre d’ajouter des tas de fonctionnalités dans vos application Ionic.
Mais également de gérer les mises à jour d’Ionic ou encore l’ajout de plugin dans votre application, bref un outil incontournable.
Étape 3 : Installez les frameworks Ionic et Cordova
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, je vous propose d’ailleurs un autre article de blog et une vidéo à son sujet:
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 téléchargement complet d’Ionic et de Cordova peut prendre une dizaine de minutes mais il n’est à faire qu’une seule fois.
Après son installation sur votre ordinateur, vous pourrez travailler et créer des applications hors connexion, ce qui est très pratique.
Étape 4 : Créer le dossier pour vos applications Ionic
Cette partie est optionnelle, mais je vous la conseille pour bien repérer vos applications Ionic sur votre ordinateur.
Par défaut, le terminal s’ouvre « tout en haut » de votre ordinateur, j’entends par là au niveau des dossiers racines de votre ordinateur.
La console s’ouvre 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.
À l’avenir vous pourrez avoir un dossier Appli-React ou encore Site-Web, cela d’accéder rapidement à vos applications depuis la console.
Si vous ne parvenez pas à créer un dossier manuellement, vous pouvez le faire depuis le terminal. 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
Encore je vous parle plus en détail de toutes les commandes les plus utiles dans cet article: https://drissas.com/ligne-de-commande/
Même si cela paraît complexe au départ, la maîtrise de la ligne de commande est vraiment importante pour devenir un bon développeur Ionic.
Étape 5 : Créer votre première application Ionic
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
En fait, maintenant que Ionic est installé sur votre ordinateur, vous pouvez entrer de nombreuses commandes Ionic qui vont faire le travail pour vous.
La principale commande Ionic est effectivement celle permettant de créer une nouvelle application.
Cette commande va vous permettre de créer trois types d’applications, comme vous pouvez le voir ci-dessous:
Voilà quelques exemples de commandes à entrer pour créer une nouvelle application Ionic:
ionic start Startuper tabs ionic start Cuisine menu ionic start Test blank
Si on regarde en détail les trois types d’applications voilà ce qu’on remarque.
Le type Blank (vierge)
Le type blank permet de créer une application d’une seule page pour commencer. Bien sûr rien ne vous empêche de rajouter des page à votre application.
Ce type est intéressant pour les applications qui se lancent en plein écran, comme les jeux vidéo ou les applications comme Snapchat.
L’application SnapLike que vous retrouvez dans Ionic Facile est une application de type blank, notamment pour afficher la caméra en fond de l’écran.
Le type Tabs
Le type d’application Tabs est encore aujourd’hui le type d’application le plus répandu sur iOS et Android.
Des applications mythiques comme Instagram et Spotify font usage de ce type d’affichage.
Il permet notamment la navigation rapide entre les différents pages de votre application, par exemple la page profil et la page recherche.
Le type Sidemenu (Menu Latéral)
Le type d’application Sidemenu est un bon compromis entre les deux précédent. Il permet l’affichage d’un menu en glissant sur le côte de votre application.
Cela permet de garder la totalité de l’écran disponible pour afficher du contenu, et de proposer dans son menu les pages les plus importantes.
Le menu latéral est utiliser par d’autres applications très populaires comme celle d’Amazon ou encore de Google Maps.
Mon application Miracle que vous pouvez télécharger sur l’App Store et le Play Store utilise ce type de menu car elle ne comporte qu’un page principale.
Étape 6 : Lancer une application Ionic dans votre navigateur
Les applications Ionic fonctionnent avec la technologie web, ce qui signifie que vous pouvez visualiser votre application en direct dans votre navigateur.
Pour travailler et tester votre application sur votre ordinateur, vous devez la lancer dans votre navigateur.
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, vous pouvez directement lancer votre application en entrant la commande suivante:
ionic serve
Cette commande va vous créer un serveur locale et vous permettre de tester votre application à l’adresse suivante: http://localhost:8100/
C’est la commande que j’utilise au quotidien pour tester et travailler mes applications.
Il existe une petite option pour cette commande, qui permet de visualiser en même temps la version iOS et Android de votre application: l’Ionic Lab.
Vous pouvez ainsi installer Ionic Lab dans votre application pour visualiser les versions iOS et Android.
Tapez maintenant dans le terminal de Visual Studio Code (+sudo sur Mac):
npm install @ionic/lab
Une fois que Ionic Lab installé, lancez la commande suivante:
ionic serve -l
La seule variante provient de l’option -l pour –lab. Dans les commandes du terminal, les options sont toujours écrites avec un tiret.
Comment aller plus loin ?
Je propose sur mon site internet Driss AS des dizaines d’articles et de tuto Ionic pour vous permettre de créer des applications mobiles complètes.
En complément je propose des cours en ligne gratuits et payants pour vous aider à aller plus loin et plus vite dans votre apprentissage.
Enfin, je propose aux développeurs et entrepreneurs les plus engagés dans leur projet, des cours particuliers et des sessions de consultation pour les aider à développer leur propre applications.
Si vous êtes intéressé par les cours particulier contactez-moi à l’adresse: contact@drissas.com
Je vous laisse également la liste des article et tuto Ionic les plus importants selon moi:
- https://drissas.com/ionic-4-firebase/
- https://drissas.com/navigation-pages-ionic-4/
- https://drissas.com/ionic-design/
- https://drissas.com/connexion-mail-ionic-firebase/
Ces tuto Ionic vous permettront de maîtriser les bases d’Ionic, comme la création de différente page et la navigation à travers celle-ci: https://drissas.com/navigation-pages-ionic-4/
L’élément essentiel de vos applications Ionic est l’ajout de base de données à celle-ci, cela permet de les dynamiser et de proposer du contenu unique à chaque utilisateur.
Pour cela consulter le tuto sur Firebase, la création de votre base de données et l’association à Ionic: https://drissas.com/ionic-4-firebase/
Un autre élément incontournable du développement d’application est la partie design et contenu.
J’ai créé un tuto complet avec vidéo et code source pour vous permettre de maîtriser les bases du design dans Ionic et notamment du CSS: https://drissas.com/ionic-design/
Pour aller plus loin encore une fois, je vous invite à consulter mes différents cours:
Le premier cours que je vous invite à suivre est IONIC STARTER, c’est un programme gratuit pour apprendre les bases d’Ionic.
Vous pourrez apprendre les fondamentaux d’Ionic et passer à la pratique en créer deux applications complète.
Vous avez accès à toutes les étapes de développement par écrit et en vidéo ainsi qu’au code source des applications.
Le suivant est un cours plus avancé, plus complet qui va plus loin dans le développement mobile, il s’agit de IONIC FACILE.
Le format du cours est le même, 5 applications à développer étapes par étapes avec en bonus le code source de celle-ci.
Dans IONIC FACILE, les applications sont beaucoup plus avancées et utilisent toutes Firebase pour proposer des interfaces sociales.