IONIC - 2.2 Installation IONIC

Bienvenue dans cette vidéo sur l'installation d'Ionic. Après avoir installé Node.js, nous pouvons installer Ionic sur notre système via la CLI (Command Line Interface, ou interface en ligne de commande), qui permet d'interagir avec le système. Récupérez le lien d'installation d'Ionic et exécutez-le dans votre terminal :

npm install -g @ionic/cli

Sur Mac ou Linux, n'oubliez pas de préfixer la commande par sudo (et entrez votre mot de passe si demandé). Sous Windows, ce n'est pas nécessaire. Une fois le téléchargement effectué, vous pouvez utiliser la CLI Ionic depuis n'importe quel répertoire dans votre terminal pour créer de nouveaux projets, les exécuter et bien plus encore.

Créer et lancer un premier projet Ionic

Une fois la CLI installée, vous pouvez créer une nouvelle application. Naviguez dans votre terminal vers le dossier où vous souhaitez créer le projet, puis exécutez :

ionic start

La CLI vous pose alors quelques questions. D'abord le nom du projet (par exemple ionic-angular-cours, ou tout autre nom de votre choix). Ensuite, choisissez le framework : Angular ou React (ici Angular). Vient ensuite le starter template :

  • blank : projet totalement vide à construire du début à la fin
  • sidemenu : page avec un menu latéral
  • tabs : page avec un menu d'onglets

Choisissez blank pour partir d'un projet vide. Ionic va générer le nouveau projet et installer toutes les dépendances (Angular, Ionic, etc.). Attendez la fin du téléchargement avant de continuer. Ensuite, naviguez dans le dossier créé et exécutez :

ionic serve

Le service Ionic démarre un serveur de développement qui exécute votre application : voilà votre première application Ionic ! C'est tout pour cette première partie sur l'installation. Si vous avez des difficultés, n'hésitez pas à revoir la vidéo et à consulter la documentation officielle (vous trouverez aussi beaucoup d'aide sur Stack Overflow). Rendez-vous dans la prochaine vidéo pour personnaliser notre application Ionic. À bientôt !

En résumé

Cette leçon couvre l'installation de Ionic CLI sur votre système via npm, suivie de la création d'un premier projet Ionic. Vous apprendrez à configurer votre application en choisissant le framework cible (Angular ou React) et le modèle de démarrage (blank, sidemenu ou tabs), puis à lancer le serveur de développement avec `ionic serve` pour tester votre application en temps réel.

Points clés

  • Installation d'Ionic CLI globalement sur le système avec `npm install -g ionic`, avec sudo sur Mac/Linux
  • Création d'un nouveau projet via `ionic start` en spécifiant un nom et en sélectionnant le framework (Angular ou React)
  • Choix du starter template : blank pour partir de zéro, sidemenu pour une navigation latérale, ou tabs pour une navigation par onglets
  • Lancement du serveur de développement avec `ionic serve` pour prévisualiser l'application dans le navigateur
  • Installation automatique des dépendances du projet (Angular, npm/yarn, etc.) lors de la création

Questions fréquentes

Dois-je utiliser `sudo` pour installer Ionic CLI ?

Oui, sur Mac et Linux, vous devez ajouter `sudo` avant la commande d'installation. Sur Windows, ce n'est pas nécessaire.

Quel starter template dois-je choisir comme débutant ?

Le modèle 'blank' est recommandé pour les débutants car il offre une base minimale et vous permet de construire votre application de zéro jusqu'à la fin.

Comment puis-je visualiser mon application Ionic lors du développement ?

Utilisez la commande `ionic serve` pour lancer un serveur de développement local qui exécutera votre application dans le navigateur, avec rechargement en direct des modifications.