Séminaire

Objectifs

Faire un projet avec Vue.js.

Rendu

GitHub Classroom : https://classroom.github.com/a/bVgcQszS
Délai : 2 semaines
Séminaire noté

Mise en place

Cloner le nouveau dépôt GitHub Classroom dans le répertoire du cours.
Ouvrir le dossier du dépôt dans Visual Studio Code.

Estimation

Créer un ficher report.md dans le dossier du dépôt.
Estimer le temps nécessaire pour réaliser ce travail dans le rapport.
- Découper le travail en tâches pour faciliter l'estimation.
Une fois terminé, comparer le temps estimé avec le temps réellement passé.

Tâche	Temps estimé	Temps passé	Commentaire
Estimation	10m	15m	...
...	...	...	...
Total	2h	1h30	...

Semaine 1

Vue.js

Cloner le nouveau dépôt Git dans le répertoire du cours.
Ouvrir le répertoire du dépôt Git dans Visual Studio Code.
- Installer l'extension Vue - Official.
Créer le fichier report.md.
Créer un projet Vue.js depuis le répertoire du dépôt : npm create vue@latest
- Project name: quiz
- Use TypeScript? Yes
- Select features to include in your project:
  - Router (SPA development)
  - Linter (error prevention)
  - Prettier (code formatting)
- Select experimental features to include in your project:
  - Rien sélectionner
- Skip all example code and start with a blank Vue project? Yes

Vérifier où se trouve le projet :

./
├── .github/
├── quiz/
    └── ...
├── README.md
└── report.md

Copier tous les fichiers du projet Vue.js (dossier quiz) dans le répertoire du dépôt Git (dossier sem07-project-{pseudo}) en écrasant les fichiers existants et supprimer le dossier quiz :

./
├── .github/
├── .vscode/
├── public/
├── src/
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .oxlintrc.json
├── .prettierrc.json
├── env.d.ts
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── report.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Installer les dépendances et formater le code :
```
npm install
npm run format
```
Pour lancer le projet en mode développement :
```
npm run dev
```
Ouvrir le navigateur à l'adresse indiquée pour voir le projet.

Bootstrap

Installer Bootstrap et Bootstrap Icons :

npm install bootstrap @popperjs/core bootstrap-icons

Changer la langue et le titre de l'application en modifiant index.html :

<!doctype html>
<html lang="fr">
  <head>
    ...
    <title>Quiz</title>
  </head>
  ...
</html>

Dans eslint.config.js, remplacer pluginVue.configs['flat/essential'] par pluginVue.configs['flat/recommended'].
Supprimer tous les fichiers dans src/components et dans src/assets.
Créer ou modifier les fichiers suivants :

src/main.ts
import "bootstrap-icons/font/bootstrap-icons.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/main.css";

import "bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");

src/App.vue
<script setup lang="ts">
  import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <RouterLink class="navbar-brand" to="/">
        <i class="bi bi-question-square"></i>
        Quiz
      </RouterLink>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbar"
        aria-controls="navbar"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <RouterLink class="nav-link" to="/about">
              <i class="bi bi-info-square"></i>
              À propos
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <RouterView />
</template>

src/assets/main.css
/* https://getbootstrap.com/docs/5.3/components/buttons/#variables */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

src/views/AboutView.vue
<template>
  <div class="container mt-3">
    <h1>À propos</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
</template>

src/views/HomeView.vue
<script setup lang="ts">
  import QuizForm from "@/components/QuizForm.vue";
</script>

<template>
  <div class="container mt-3">
    <h1>Quiz</h1>
    <QuizForm />
  </div>
</template>

src/components/QuizForm.vue
<script setup lang="ts">
  import { computed, ref } from "vue";

  const cheval = ref<string | null>(null);
  const filled = computed<boolean>(() => cheval.value !== null);

  function submit(event: Event): void {
    event.preventDefault();
    if (filled.value) {
      alert(`Vous avez choisi la couleur ${cheval.value} !`);
    }
  }
</script>

<template>
  <form>
    De quelle couleur est le cheval blanc de Napoléon ?
    <div class="form-check">
      <input
        id="chevalBlanc"
        v-model="cheval"
        class="form-check-input"
        type="radio"
        name="cheval"
        value="blanc"
      />
      <label class="form-check-label" for="chevalBlanc">Blanc</label>
    </div>
    <div class="form-check">
      <input
        id="chevalBrun"
        v-model="cheval"
        class="form-check-input"
        type="radio"
        name="cheval"
        value="brun"
      />
      <label class="form-check-label" for="chevalBrun">Brun</label>
    </div>
    <div class="form-check">
      <input
        id="chevalNoir"
        v-model="cheval"
        class="form-check-input"
        type="radio"
        name="cheval"
        value="noir"
      />
      <label class="form-check-label" for="chevalNoir">Noir</label>
    </div>
    <button
      class="btn btn-primary"
      :class="{ disabled: !filled }"
      @click="submit"
    >
      Terminer
    </button>
  </form>
</template>

Vérifier que l'application fonctionne correctement.
- Voici le code source et le site web final.
Ne pas oublier de faire régulièrement des commits à chaque fois qu'on a un état stable du projet (code fonctionnel, comme ici).

Quiz

Modifier le quiz pour qu'il y ait deux-trois questions à choix multiples. Voici quelques idées :
- De quelle couleur est le cheval blanc de Napoléon ?
- Combien de pattes a un chat ?
- Quelle est la capitale de la Suisse ?
Proposer quatre réponses possibles pour chaque question.
Afficher le score à la fin du quiz (mettre la logique du calcul dans la fonction submit, juste après le event.preventDefault();).
Afficher un message de félicitations si le score est parfait.
Ajouter un bouton pour réinitialiser le quiz.
- Ajouter un bouton dans QuizForm.vue :
```
<button class="btn btn-secondary" @click="reset">Réinitialiser</button>
```
- Le bouton va appeler une fonction reset qu'il faudra créer.
Modifier la couleur des .btn-primary dans main.css.
Changer les icônes dans la bar de navigation (en haut) en utilisant Bootstrap Icons.

Aides

Nettoyage et vérification

Vérifier tout le projet et nettoyer les codes qui ne sont plus utilisés.
Vérifier que le code est correct localement, on peut construire le projet :
```
npm run build
```
Vérifier que le site est correct en ligne et fonctionne sur différents appareils (ordinateur, téléphone, …).
Vérifier que le rendu du rapport est correct.

Documentations

S'aider des documentations officielles pour réaliser le projet :

Évaluation

L'évaluation du projet se portera sur les critères suivants :

Rapport
- Le journal de bord est à jour et complet.
- Le journal de bord est bien structuré et synthétique.
Fonctionnalités
- L'application a les mêmes fonctionnalités que l'exemple.
- L'application est personnalisée.
- L'application a plus de fonctionnalités que l'exemple.
- L'application a encore plus de fonctionnalités que l'exemple.
- Bootstrap est correctement utilisé pour rendre l'application responsive.
Code
- Le code suit les conventions de codage (formatage, nommage, organisation, …).
- Le code est lisible et maintenable (nommage, commentaires, …).

Note	1	2	2.5	3	3.5	4	4.5	5	5.5	6
Nombre de critères validés	0	1	2	3	4	5	6	7	8	9

En gras : critères principaux.
En italique : critères secondaires.

Objectifs​

Rendu​

Mise en place​

Estimation​

Semaine 1​

Vue.js​

Bootstrap​

Quiz​

Aides​

Nettoyage et vérification​

Documentations​

Évaluation​