Exercice 09 - Composants Vue.js et leurs interactions

Table des matières

Mise en situation

Vous avez compris le pourquoi et la raison d'être des composants Vue.js, maintenant il est temps de les mettre en pratique avec un exercice pratique!
Vous avez deux parties à faire pour cet exercice, ils seront remis dans deux répertoires distincts

Modalités

Partie 01 À faire (étapes)

Pour débuter cette partie:

Dans le terminal, on installe les dépendances et on lance le serveur:

npm install
npm run dev

En utilisant votre exercice 04, vous avez deux tâches:

  1. Intégration du code existant dans un projet Vue.js
  2. Découpage en composants du formulaire

Intégration du code existant dans un projet Vue.js

  1. Changer le title de la page pour Exercice 09
  2. Le code JavaScript index.ts de l'exercice 04 doit être transférer dans App.vue
    • les importations de bootstrap peuvent rester comme dans App.vue (vérifier style.css)
    • les autres fichiers ,ts peuvent être copié de l'exercice 04 jusqu'à l'exercice 09
    • les importations devraient tous fonctionner
  3. Le code HTML du formulaire doit être copié dans la zone template de App.vue
    • il y aura une erreur de html, à vous de la corriger ;)
    • Vous pouvez supprimer les lignes suivantes: 
      document.querySelector<HTMLDivElement>("#app")!.innerHTML = getHtmlForm();
import { getHtmlForm } from "./htmlForm.ts";

      NOTE: la dernière dépend de si vous prenez ma solution!

  4. Le code HTML de l'entête et du footer doit être intégré dans des composants. exemple Footer.vue / Header.vue
  5. Le CSS de l'exercice 04 doit être transférer et remplacer celui présent dans style.css (dé-commenter la ligne dans main.ts)
  6. Penser à l'endroit ou mettre le code HTML du formulaire (indice: App.vue) c'est ce html qui sera injecté dans la div#app!
    createApp(App).mount('#app')
  7. Intégrer l'image de l'entête de l'exercice 04
  8. Une erreur Javascript devrait se produire car l'élément HTML n'existe pas!
    • Les lignes suivantes doivent être effacées: 
      const CREATE_CHARACTER: HTMLElement | null =
document.getElementById("creerPersonnage");
CREATE_CHARACTER!.addEventListener("click", submitForm);
  9. La fonction submitForm doit être envoyé @click sur le bouton en Vue.js
  10. Votre projet devrait fonctionner à partir de ce moment! (npm run dev)

Découpage en composants du formulaire

Maintenant le cœur de l'exercice! Vous devez créer des composants qui permettront de séparer votre formulaire en composants!

Partie 02 - À faire (étapes)

Introduction

Pour débuter cette partie:

L’application vous permettra de choisir les composants d’un PC (processeur, carte mère, RAM, etc.) et d’afficher un récapitulatif du build avec un prix total.

Objectifs de cette partie

Structure du projet

N'oubliez pas de bien structurer votre projet:

Récits utilisateurs

1. En tant qu’utilisateur, je veux pouvoir sélectionner les composants de mon PC

2. En tant qu’utilisateur, je veux voir le récapitulatif de ma configuration

3. En tant qu’utilisateur, je veux modifier mes choix facilement

4. En tant qu’utilisateur, je veux un design moderne et clair

5. EXPERT: En tant qu’utilisateur, je veux pouvoir enregistrer ma configuration

Si vous voulez un peu de défi ce récit est pour vous ;)

TODO

1. Introduction et configuration du projet

Inclure les étapes pour initialiser un projet Vue avec Vite et TypeScript, ainsi que l’installation de Bootstrap 5

2. Création des modèles de données

Définir des interfaces pour représenter les composants et options disponibles

3. Mise en place de l’App.vue

Structurer l’application principale et intégrer un composant pour la configuration du PC

4. Création du composant ComputerBuilder

Gérer les catégories de composants, permettre la sélection et afficher un récapitulatif

5. Création du composant ComponentSelector

Afficher une liste déroulante ou des boutons pour sélectionner une option dans une catégorie. Fouillez pour des composants Bootsrap existants!

6. Utilisation de computed et de watch

Implémenter des propriétés calculées et surveiller les changements de configuration (Exemple calcul de total et taxes)

7. Cycle de vie et améliorations

Charger une configuration de PC existante au démarrage avec un hook comme onMounted

8. Tests et finalisation

Tester l’application pour s’assurer du bon fonctionnement des sélections et mises à jour

9. Mode EXPERT

Conclusion

Cette partie vous permet de revoir l’ensemble des notions de base en construisant une application interactive pour configurer un ordinateur personnalisé avec une interface moderne et réactive!

Remise finale

**Tout le monde:** Remettre le tout sur Léa dans **Exercice 09** pour le prochain cours!
  **  IMPORTANT: **Supprimer le dossier node_modules