Aller au contenu principal

Séminaire

Objectifs​

  • Créer une application Web avec Vue.js et Supabase selon un cahier des charges.

Rendu​

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âcheTemps estiméTemps passéCommentaire
Estimation10m15m...
............
Total2h1h30...

Cahier des charges​

Créer un quiz en Vue.js avec une base de données sur Supabase.

  • Utiliser Vue Router pour la navigation entre les pages.
  • L'application doit comporter au moins trois pages :
    • Page d'accueil qui propose de commencer le quiz (accès la page de quiz) ou de gérer les questions (accès à la page d'administration).
    • Page de quiz qui affiche les questions pour y jouer avec un bouton pour soumettre les réponses et afficher le score à la fin.
    • Page d'administration pour ajouter, modifier et supprimer des questions.
  • Le quiz doit comporter des questions à choix multiples avec 4 réponses possibles, dont une seule est correcte.
  • Les questions et les réponses doivent être stockées dans une base de données Supabase.
  • L'application doit être responsive et utilisable sur mobile et desktop.

Quelques idées d'améliorations possibles :

  • Un système de score pour les joueurs.
  • Une page de classement pour afficher les meilleurs scores.
  • Des catégories de questions.
  • Une recherche pour les questions dans la page d'administration.
  • Plusieurs types de questions (p. ex. vrai/faux, réponses ouvertes, nombre variables de réponses possibles, …).
  • Une pagination pour les questions dans la page d'administration.
  • Un système d'authentification pour restreindre l'accès à la page d'administration.
  • Statistiques sur les questions (p. ex. taux de réussite, …).
  • Ajout des questions via un fichier CSV ou Excel.

Test​

Dans eslint.config.ts, remplacer pluginVue.configs['flat/essential'] par pluginVue.configs['flat/recommended'].

Exécuter la commande npm install -D eslint-plugin-prettier.

Ajouter Prettier dans ESLint en modifiant le fichier eslint.config.ts (parfois caché sous package.json) :

eslint.config.ts
...
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default defineConfigWithVueTs(
  ...
  skipFormatting,
  eslintPluginPrettierRecommended,
)

Créer un fichier test.js à la racine du dépôt avec le contenu suivant :

test.js
import test from "node:test";
import assert from "node:assert/strict";
import fs from "node:fs";
import { execSync } from "child_process";

test("présence des fichiers et dossiers", () => {
  // Liste des chemins attendus dans le projet.
  const expectedPaths = [
    ".git",
    ".github/workflows/deploy.yml",
    ".gitignore",
    ".prettierrc.json",
    "eslint.config.ts",
    "index.html",
    "package.json",
    "README.md",
    "report.md",
    "src/App.vue",
    "src/main.ts",
    "test.js",
    "tsconfig.json",
    "vite.config.ts",
  ];
  // Vérifie que chaque chemin existe dans le projet.
  expectedPaths.forEach((path) => {
    assert.ok(
      fs.existsSync(path),
      `Le fichier ou dossier ${path} doit exister.`,
    );
  });
});

test("validation des fichiers", () => {
  // Exécute la validation en utilisant https://eslint.org/
  try {
    const output = execSync("npx eslint").toString();
    console.log(output);
  } catch (error) {
    assert.fail(error.output);
  }
});

test("construction du site", () => {
  try {
    const output = execSync("npm run build").toString();
    console.log(output);
  } catch (error) {
    assert.fail(error.output);
  }
});

Ajouter le script test dans le fichier package.json pour pouvoir exécuter les tests avec la commande npm test :

package.json
{
  ...
  "scripts": {
    ...
    "test": "node --test"
  }
}

Vérifier que les tests passent avec la commande npm test et corriger le code si cela n'est pas le cas.

Rapport​

  • Citer clairement les aides utilisées (Internet, personnes, IA, …).
  • Indiquer toutes les requêtes SQL utilisées pour créer la base de données et insérer des données de test.
  • Expliquer brièvement les étapes effectuées avec leurs principales difficultés rencontrées.
  • Indiquer les fonctionnalités supplémentaires implémentées et expliquer brièvement comment elles ont été réalisées.
  • Ajouter une auto-évaluation du projet en utilisant les critères d'évaluation.
  • Compléter les estimations.
  • Pousser tous les changements sur GitHub.
  • Copier le lien du dépôt GitHub dans le devoir sur Moodle.
report.md
## Auto-évaluation

| Critère                                                                       | Auto-évaluation (0, ½ ou 1) | Commentaire |
| ----------------------------------------------------------------------------- | --------------------------- | ----------- |
| Le rendu est correct avec un journal de bord complet.                         |                             |             |
| Le journal de bord est bien structuré et synthétique.                         |                             |             |
| Modélisation et mise en place correctes de la base de données.                |                             |             |
| L'application est configurée correctement et fonctionne sans erreur.          |                             |             |
| Bootstrap est utilisé pour améliorer l'apparence et le responsive.            |                             |             |
| Fonctionnalités supplémentaires avec de nouvelles tables.                     |                             |             |
| Fonctionnalités supplémentaires avec des jointures entre les tables.          |                             |             |
| Autres améliorations.                                                         |                             |             |
| Le code suit les conventions de codage (formatage, nommage, organisation, …). |                             |             |
| Le code est lisible et maintenable (nommage, commentaires, …).                |                             |             |

Évaluation​

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

  • Rapport
    • Le rendu est correct avec un journal de bord complet.
      • Rendu sur GitHub Classroom dans les délais avec tous les fichiers requis.
    • Le journal de bord est bien structuré et synthétique.
      • Bonne utilisation de Markdown et le rapport montre une bonne maîtrise du projet.
  • Fonctionnalités
    • Modélisation et mise en place correctes de la base de données.
      • La modélisation, le SQL et le DSL permettent de faire fonctionner l'application.
    • L'application est configurée correctement et fonctionne sans erreur.
      • Il est possible de répondre au quiz pour obtenir un score et de gérer les questions dans la page d'administration.
    • Bootstrap est utilisé pour améliorer l'apparence et le responsive.
      • Bootstrap est mis en place et utilisation des composants ainsi que de la grille pour le responsive.
    • Fonctionnalités supplémentaires avec de nouvelles tables.
      • ½ point par nouvelle table avec la fonctionnalité correspondante.
    • Fonctionnalités supplémentaires avec des jointures entre les tables.
      • ½ point par jointure avec la fonctionnalité correspondante.
    • Autres améliorations.
      • ½ point par fonctionnalité supplémentaire.
  • Code
    • Le code suit les conventions de codage (formatage, nommage, organisation, …).
      • Passe tous les tests ESLint et Prettier configurés correctement et sans erreurs.
    • Le code est lisible et maintenable (nommage, commentaires, …).
      • Le code est facile à comprendre et à maintenir avec un bon nommage (fichiers, fonctions, variables, …), des commentaires utiles, …
Note 1 1.5 2 2.5 3 3.5 4 4.5 5 5.5 6 
Nombre de critères validés012345678910
  • En gras : critères principaux.
  • En italique : critères secondaires.

Références​

Dernière mise à jour le