Cours 10.2 PHASE FONDATION¶

Révision¶

Cours: Arborescence (architecture) des `components` et ses `views`¶

L'arborescence des composants d'une application est la structure hiérarchique qui organise les différents éléments réutilisables de l'interface utilisateur (UI).

Elle représente la manière dont les composants sont imbriqués les uns dans les autres, comme des éléments HTML, pour construire une application complète.

Cette structure permet de créer des applications complexes en divisant l'interface en morceaux plus petits, indépendants et gérables.

L'Arborescence de composants

Views: pages entières liées à un URL

Quiz composantes¶

Rencontre prof et étudiants (par équipe)¶

Montrez-moi votre configuration Vite+Vue avec .gitignore.

De plus, chaque membre de l'équipe doit être prêt à développer: chacun a fait son git pull, son npm install et son node_modules est complet et prêt à développer avec Vite via npm run dev.

Démo de projets¶

Pour vous aider à visualiser l'objectif du projet, voici des projets assez achevés qui démontrent bien l'objectif du projet App web créative. En tout temps en classe, vous pouvez me demander de l'essayer sur mon ordinateur sans regarder le code source, juste pour vous faire une idée du fonctionnement.

Pour "Mémoires interactives", voici 1 projet en démo¶

Pour "Trace ton chemin", voici 2 projets en démo¶

SCRUM¶

Rencontre de 10 minutes pour la mêlée (SCRUM) hebdomadaire.
N'oubliez pas dajouter votre résumé de SCRUM dans votre équipe Teams.
- 🌹 Mes accomplissements
- 🚀 Prochaine semaine
- 🌵 Problèmes
- 🎉 Ce qui me motive

Travail en classe et DEVOIR¶

À COMPLÉTER POUR LE PROCHAIN COURS

Afin de suivre le processus, il est de votre responsabilité de compléter cette partie pour le prochain cours. Ce travail fait partie partiellement de la remise prévue le 19 novembre.

Créer un diagramme de votre hiérarchie de composants
- Utilisez draw.io, Figma/Figjam ou papier/crayon

Créer la structure de dossiers dans votre projet

src/
├── assets/
├── components/
│   ├── common/
│   ├── layout/
│   └── specific/
├── data/
├── router/
├── stores/
├── views/

Créer vos composants et vos views ainsi que les balises de base <template>, <script>, <styles>.
- Créez les fichiers vides avec structure de base
- Exemple: AppHeader.vue, RoomCard.vue, BaseButton.vue, RoomView.vue, HomeView.vue
Documenter vos composants et vos views
- Liste dans un fichier COMPONENTS.md (sauvegarder dans le dossier src de votre projet)
- Pour chaque composant: nom, responsabilité, props attendues, événements émis (emits)
Mettre à jour votre Trello: en fonction des composants et views découpées dans votre plan, allez ajouter ou mettre à jour vos tâches dans le Trello. Déjà vous pouvez prioriser et vous distribuer des composants à développer.
Pour Trace ton chemin, rédaction de vos chapitres dans un Word ou document textuel collaboratif.