Exercice 06 - Utilisation de Vue.js

Mise en situation

Vous avez compris le pourquoi et la raison d'être de Vue.js, maintenant il est temps de le mettre en pratique avec un exercice pratique!

Projet: Création d’une Wishlist de Jeux Steam avec Vue.js 3 et TypeScript

Objectif

Dans cet exercice, on va créer une wishlist de jeux Steam qui permettra :

• D’afficher dynamiquement une liste de jeux.
• D’ajouter et supprimer des jeux de la wishlist via un formulaire interactif.
• D’explorer la réactivité et la gestion d'événements avec Vue.js 3 et l’API Composition.
• D’utiliser des composants Vue.js pour structurer l’application.
• D’intégrer TypeScript pour garantir un typage strict et éviter les erreurs.

Modalités

• Exercice seul
• Réaliser durant le cours
• Durée approximative le reste du cours
• Remettre le tout sur Léa dans Exercice 06 pour le prochain cours!
  • IMPORTANT: Supprimer le dossier node_modules

À faire (étapes)

Étape 1 : Mise en place du projet

Objectif : Installer et configurer un projet Vue.js 3 avec Vite et TypeScript.

Actions à réaliser :

1. Ouvrir un terminal et exécuter la commande pour créer un projet Vue.js avec TypeScript en utilisant Vite.
2. Entrer dans le dossier du projet et installer les dépendances.
3. Démarrer le serveur de développement.
4. Ouvrir le projet dans VS Code.
5. Vérifier que la page de démarrage Vue.js s'affiche correctement dans le navigateur.

Résultat attendu : Une page de démarrage Vue.js affichée dans ton navigateur.

Étape 2 : Création des composants Vue.js avec typage TypeScript

Objectif : Structurer l’application en plusieurs composants réutilisables avec TypeScript.

Actions à réaliser :

1. Créer un fichier Wishlist.vue dans le dossier src/components/.
2. Importer et utiliser Wishlist.vue dans App.vue pour afficher l'interface de la Wishlist.
3. Créer un fichier GameItem.vue dans src/components/ pour représenter un jeu individuel.
4. Définir une interface Game dans types.ts pour structurer les données du jeu.
   NOTE: types.ts dois être créé dans le dossier scripts (c'est comme posts.ts de l'atelier)
5. Utiliser props typés dans GameItem.vue pour recevoir les données du jeu.
6. Importer et utiliser GameItem.vue dans Wishlist.vue pour afficher chaque jeu.

Concepts abordés :

• Création de composants Vue.js avec TypeScript.
• Utilisation d’interfaces pour structurer les données.
• Communication entre composants avec props typés.

Étape 3 : Affichage de la liste des jeux avec typage

Objectif : Afficher dynamiquement la wishlist en utilisant un composant avec TypeScript.

Actions à réaliser :

1. Déclarer un tableau de jeux en utilisant la définition de type Game.
2. Afficher chaque jeu à l’aide du composant GameItem.vue en utilisant v-for.
3. Ajouter une condition pour afficher un message lorsque la liste est vide.

Concepts abordés :

• Utilisation de v-for pour générer dynamiquement la liste.
• Utilisation de v-if / v-else pour afficher un message si la liste est vide.
• Typage du tableau des jeux avec TypeScript.

Étape 4 : Gestion des événements avec typage

Objectif : Ajouter une fonctionnalité pour supprimer un jeu de la wishlist avec un typage strict.

Actions à réaliser :

1. Ajouter un bouton "Supprimer" à chaque jeu affiché dans GameItem.vue.
2. Créer un événement @click qui émettra un événement de suppression vers Wishlist.vue.
3. Définir un type strict pour l’identifiant du jeu à supprimer.
4. Dans Wishlist.vue, écouter cet événement et supprimer le jeu correspondant de la liste.

Concepts abordés :

• Gestion des événements entre composants avec des types définis.
• Utilisation de types explicites pour éviter les erreurs.

Étape 5 : Ajouter un formulaire interactif avec TypeScript

Objectif : Permettre d’ajouter un nouveau jeu à la wishlist avec des types définis.

Actions à réaliser :

1. Ajouter un champ de texte permettant de saisir un nouveau jeu.
2. Ajouter un bouton "Ajouter" pour valider l’ajout.
3. Créer une fonction qui ajoute un jeu à la liste avec un identifiant unique typé (number).
4. Lier l’input à une variable réactive avec v-model en utilisant un typage strict (ref<string>).

Concepts abordés :

• Liaison bidirectionnelle avec v-model.
• Ajout dynamique d’éléments à la liste .
• Gestion des événements avec @click.

Étape 6 : Amélioration de l’expérience utilisateur (UX) avec TypeScript

Objectif : Ajouter des validations pour empêcher les actions non valides avec un typage fort.

Actions à réaliser :

1. Vérifier que le champ de texte n’est pas vide avant d’ajouter un jeu.
2. Désactiver le bouton "Ajouter" si le champ est vide.

3. Utiliser des types stricts pour gérer la validation des entrées utilisateur.

   Concepts abordés :

• Validation en temps réel pour éviter les entrées vides avec des types explicites.
• Gestion d’état dynamique avec l’attribut :disabled et typage strict.

Vérifications finales

Utilisation des composants Vue.js avec TypeScript (Wishlist.vue et GameItem.vue)
Affichage dynamique de la wishlist (v-for) avec typage strict
Affichage conditionnel (v-if) avec des types explicites
Gestion des événements (@click) avec typage défini
Utilisation de ref() pour la réactivité avec TypeScript
Formulaire interactif avec v-model et typage strict
Validation des entrées utilisateur avec des types définis

Mode Expert

Si vous avez du temps ;)

• Ajoute une fonctionnalité pour modifier un jeu existant avec un typage strict.
• Personnalise le design avec Bootstrap.
• Ajoute un lien vers la page Steam du jeu en utilisant des types définis.

Remise finale

• Remettre le tout sur Léa dans Exercice 06 pour le prochain cours!
  • IMPORTANT: Supprimer le dossier node_modules

Solution