Cet exercice, sous forme de tutoriel, a l'objectif de vous apprendre les technologies utilisées pour le laboratoire de LOG210. On vous propose d'ajouter une fonctionnalité au Jeu de Dés, un squelette de code que votre vrai projet de LOG210 doit suivre. Le squelette est une application minimaliste permettant d'intégrer correctement plusieurs technologies (interface utilisateur, serveur web avec couches logicielles, etc.). En apprenant avec le squelette, vous pouvez aller plus vite, sans nécessairement tout comprendre au début. Vous pouvez vous concentrer sur la méthodologie d'analyse et de conception qui est le sujet principal de LOG210.
Ce travail est individuel, soumis dans un dépôt privé, pour que chaque personne puisse comprendre et contribuer efficacement dans son équipe.
⚠️ Les points pour ce laboratoire sont dans le volet de travail de nature individuelle. L'évaluation de ce travail déterminera en partie si vous passez le seuil pour la note minimale pour l'ensemble des éléments évalués individuellement. Alors chaque point est très important!
Dans les cours préalables à LOG210, vous devriez avoir déjà vu:
- Les dépôts de code source en git (ici, c'est GitHub)
- La programmation orientée objet (ici, c'est TypeScript)
- Les tests (ici, c'est Jest et SuperTest)
La date de remise du rapport et du code est avant la séance 03 de laboratoire. Notez que le calendrier des séances est différent pour chaque groupe-cours. Vérifiez avec votre auxiliaire d'enseignement (chargé.e de laboratoire).
Cet exercice permet de comprendre les bases des technologies suivantes:
Le déploiement de la solution fonctionne comme le diagramme suivant:
⚠️ Les bases de données et les cadriciels (Angular, React, etc.) sont des sujets traités dans d'autres cours des programmes de LOG et de GTI. Donc, vous ne pouvez pas utiliser ces technologies dans les laboratoires de LOG210.
Quant à la méthodologie de travail, ce tutoriel vous permettra aussi de savoir comment utiliser les outils suivants:
- VisualStudio Code
- PlantUML (pour les modèles UML)
- GitHub Markdown (pour la documentation)
Cet exercice vous amènera à travers des étapes à ajouter une nouvelle fonctionnalité au Jeu de Dés. Vous devez réaliser le cas d'utilisation Redémarrer qui va simplement redémarrer le jeu. Pour respecter le processus de génie logiciel enseigné dans LOG210, il faudra passer par les étapes suivantes:
- actualiser la documentation de la fonctionnalité (cas d'utilisation)
- actualiser des modèles de conception (diagrammes de séquence système et réalisations de cas d'utilisation);
- écrire des tests pour la fonctionnalité;
- écrire le code source;
- remettre (anglais commit) les changements.
Les auxiliaires d'enseignement pourront vous aider si vous avez des questions.
Vous pouvez cocher chaque étape dans la liste suivante:
-
jeter un œil sur la documentation du squelette
-
installer node.js sur votre machine
-
installer VSCode sur votre machine
-
configurer l'extension PlantUML pour utiliser plantuml.com comme serveur en ajoutant/modifiant les "User settings" en VSCode:
"plantuml.server": "https://www.plantuml.com/plantuml", "plantuml.render": "PlantUMLServer",
(Si vous avez les droits d'administrateur Windows) installer GraphViz pour utiliser un serveur local de PlantUML plutôt que le serveur sur Internet et configurer
"plantuml.render": "Local"selon la documentation. -
installer GitHub Desktop sur votre machine
-
cloner le dépôt de code de ce laboratoire sur votre machine
⚠️ Ne pas cloner le code dans un chemin qui contient des espaces ou des accents.
-
faire un build du code
-
Ouvrir le dossier du projet en VSCode File > Open Foler...
-
Dans VSCode, ouvrir un terminal dans le menu Terminal > New Terminal
Sur Windows, utiliser
Node.js Command Promptsi les étapes suivantes ne fonctionnent pas -
Dans le terminal, taper
npm installpour installer les bibliothèques node du projet (une fois seulement). -
Dans le terminal, taper
npm run buildpour compiler le code source.Normalement, on devrait voir les messages comme:
... [2:52:01 p.m.] Projects in this build: * tsconfig.json [2:52:01 p.m.] Project 'tsconfig.json' is out of date because output file 'dist/app.js' does not exist [2:52:01 p.m.] Building project 'C:/Users/Moi/Documents/GitHub/log210-enonce-lab0/tsconfig.json' ...
-
-
exécuter les tests
-
Dans le terminal, taper
npx jest --colors lab0.test.tspour exécuter les tests du lab 0.Normalement, on devrait voir les messages comme:
... Test Suites: 16 failed, 16 total Tests: 45 failed, 1 passed, 46 total Snapshots: 0 total Time: 9.908 s Ran all test suites matching /lab0.test.ts/i.Certains tests valident le contenu de vos fichiers (la documentation) et d'autres valident les fonctionnalités (la programmation). Puisque vous commencez le lab 0, c'est normal d'avoir beaucoup de tests "failed". Le but est de faire passer tous les tests au fur et à mesure que vous apprenez des aspects technologiques du laboratoire.
Veuillez noter que pour les tests qui valident les fonctionnalités, vous devez avoir une couverture de test de 100% pour obtenir tous vos points.
La rétroaction de ce laboratoire ne viendra pas d'un auxiliaire d'enseignement, car c'est un travail individuel. Ce sont des tests automatiques qui vont diagnostiquer les problèmes pour vous. Si vous avez une difficulté que vous n'arrivez pas à résoudre, vous devez poser des questions aux auxiliaires d'enseignement.
-
Pour voir la liste des tests pour le lab0, taper
npx jest --listTests lab0.test.ts -
Pour exécuter un test individuel, p. ex.
identification-lab0.test.ts-- très utile pour ne pas avoir trop d'informations avec tous les tests -- tapernpx jest --colors identification-lab0.test.ts(il n'est pas nécessaire de spécifier tout le chemin du fichier):$ npx jest --colors identification-lab0.test.ts FAIL test/squelette/identification-lab0.test.ts README identification × devrait trouver votre nom (2 ms) × devrait trouver votre courriel × devrait trouver Votre code moodle × devrait trouver votre compte github ● README identification › devrait trouver votre nom expect(received).toBeFalsy() Received: true 11 | describe('README identification', () => { 12 | it('devrait trouver votre nom', () => { > 13 | expect(content.includes("Entrer votre nom")).toBeFalsy(); | ^ 14 | }); 15 | 16 | it('devrait trouver votre courriel', () => { at Object.<anonymous> (test/squelette/identification-lab0.test.ts:13:50) ● README identification › devrait trouver votre courriel expect(received).toBeFalsy() Received: true 15 | 16 | it('devrait trouver votre courriel', () => { > 17 | expect(content.includes("Entrer votre courriel")).toBeFalsy(); | ^ 18 | }); 19 | 20 | it('devrait trouver Votre code moodle', () => { at Object.<anonymous> (test/squelette/identification-lab0.test.ts:17:55) ● README identification › devrait trouver Votre code moodle expect(received).toBeFalsy() Received: true 19 | 20 | it('devrait trouver Votre code moodle', () => { > 21 | expect(content.includes("Entrer votre code moodle obtenu à partir de Signets")).toBeFalsy(); | ^ 22 | }); 23 | 24 | it("devrait trouver votre compte github", () => { at Object.<anonymous> (test/squelette/identification-lab0.test.ts:21:85) ● README identification › devrait trouver votre compte github expect(received).toBeFalsy() Received: true 23 | 24 | it("devrait trouver votre compte github", () => { > 25 | expect(content.includes("Entrer l'identifiant de votre compte github")).toBeFalsy(); | ^ 26 | }); 27 | }); 28 | at Object.<anonymous> (test/squelette/identification-lab0.test.ts:25:77) Test Suites: 1 failed, 1 total Tests: 4 failed, 4 total Snapshots: 0 total Time: 1.34 s, estimated 2 sUne croix (rouge), p. ex.
× devrait trouver votre nomsignifie qu'un test échoue, tandis qu'un test réussi s'affiche avec une coche√(verte).
-
-
exécuter le serveur sur localhost
- Dans le terminal,
npm start
- Dans le terminal,
-
exécuter l'application avec un navigateur moderne à l'URL http://localhost:3000
- démarrer une partie avec un joueur
- essayer le bouton pour jouer
- regarder la page Classement
- revenir à la page d'accueil pour voir le jeu
-
regarder dans VSCode la structure des pages statiques dans
views/ainsi que la barre de navigation (views/includes/navbar.pug) qui est incluse dans les pages statiques (views/index.pug,views/stats.pug). -
regarder comment dans
src/app.tsun gabarit Pugviews/index.pugest utilisé:// Route pour jouer (index) router.get('/', (req, res, next) => { res.render('index', // passer objet au gabarit (template) Pug { title: `${titreBase}`, user: user, joueurs: JSON.parse(jeuRoutes.controleurJeu.joueurs) }); });
-
La barre de navigation
views/includes/navbar.pugvient de Bootstrap. Elle est personnalisée selon les valeurs dans l'objet (user) passé grâce à la fonctionnalité de mixins de Pug. Cet objet est initialisé plus haut danssrc/app.ts:// Extrait de src/app.ts user = { nom: 'Pierre Trudeau', hasPrivileges: true, isAnonymous: false };
Cet objet sera un mécanisme de gérer les vues. Par exemple, si
objet.isAnonymousest vrai,navbar.pugn'affiche pas de lien, car l'utilisateur n'est pas connu et donc doit se connecter pour avoir plus d'accès.Dans cet exercice, vous n'avez pas à gérer les connexions, mais sachez que le squelette supporte cette dimension. Ça sera utile pour votre projet en équipe.
-
la technologie Bootstrap est chargée dans un en-tête (
views/includes/head.pug) qui, lui, est inclus dans chaque page statique. Sachez que les versions de Bootstrap ont évoluées assez rapidement et il faut faire attention à la version si vous trouvez un exemple intéressant que vous voulez réutilisez. La documentation de Bootstrap est excellente, donc vérifiez toujours avec ça. -
les pages statiques définies avec Pug permettent de créer facilement une interface humain-machine, mais il doit y avoir des routes définies dans
src/app.tspour que les fichiers.pugsoient bien rendus au navigateur. -
repérer dans le fichier
src/app.tsla définition des route handlers pour les pages statiques, p. ex./versviews/index.puget/statsversviews/stats.pug. Cela est important pour étendre le squelette dans le cadre du projet en équipe. Il y a aussi des pages statiques pour aider avec la gestion des connexions (views/signin.pugetviews/signout.pug) qui sont intégrées également dans le squelette (routes et barre de navigation). -
noter que la syntaxe des fichiers Pug est sensible à l'indentation (comme en Python). Si vous trouvez un exemple de code Pug à intégrer dans votre projet, l'éditeur VSCode va (par défaut) utiliser une indentation de 4 espaces, tandis que beaucoup d'exemples sur internet utilisent 2 espaces.
-
Note: il est fortement recommandé de faire un commit (et push) du code (au moins) à la fin de chaque étape à partir de maintenant. Les auxiliaires d'enseignement auront accès à votre dépôt de code source et pourraient vous aider (surtout à distance) si votre code est synchronisé souvent avec le dépôt.
La documentation des fonctionnalités se trouve dans le fichier docs/Squelette.md. Dans cette étape, vous devez:
-
dans le fichier
docs/Squelette.mdqui sert de documentation, ajouter les informations pour vous identifier dans la section Identification de l'étudiant.
Vérifier le travail avec le test,npx jest --colors dcu-puml-lab0.test.ts -
dans le fichier
docs/Squelette.md, ajouter le cas d'utilisation Redémarrer (texte) juste après le texte du cas d'utilisation Jouer aux dés:#### Redémarrer 1. Le Joueur demande à redémarrer l'application. 2. Le Système termine tous les jeux en cours et redémarre l'application.
-
ajouter le cas d'utilisation au diagramme UML (PlantUML)
-
installer l'extension PlantUML dans VSCode
-
visionner cette vidéo (activer les sous-titres en français) pour savoir comment créer et modifier un diagramme PlantUML
-
modifier
docs/modeles/dcu.pumlpour inclure un nouveau cas d'utilisation(Redémarrer) as R #powderblueet le lien avec l'acteurJ -- Rcomme dans l'exemple partiel suivant:
... rectangle "Système" { (Jouer aux dés) as JP #powderblue (Redémarrer) as R #powderblue J -- JP J -- R } ...Vous devriez voir un diagramme comme ceci:
Facultatif : faire en sorte que la documentation soit correctement liée aux fichiers `.puml`
Question: Comment faire en sorte que
docs/Squelette.mdaffiche la version modifiée du fichierdocs/modeles/dcu.pumlaprès un push des fichiers vers GitHub? Réponse: Il faut modifier le markdown suivant dansdocs/Squelette.md:### Diagramme de cas d'utilisation 
La partie de l'URL
src=https://raw.githubusercontent.com/profcfuhrmanets/log210-jeu-de-des-node-express-ts/master/docs/modeles/dcu.pumldoit pointer sur le fichier dans votre dépôt plutôt que sur celui duquel ce projet a été copié.Pour obtenir l'URL "raw" d'un fichier sur GitHub, naviguez vers le fichier, cliquez sur le bouton Raw, puis copiez l'URL du navigateur. Finalement, cela doit être fait une seule fois pour chaque diagramme
.pumlet les changements vont suivre automatiquement dans la documentation. Cependant, il peut prendre quelques minutes avant que le cache du navigateur se rafraîchisse. Pour en savoir plus, lire la question sur StackOverflow.Facultatif : faire en sorte que la documentation soit correctement liée aux fichiers `.svg`
Question: Comment faire en sorte que
Squelette.mdaffiche la version modifiée du fichierdocs/modeles/dcu.pumlaprès un push des fichiers vers GitHub? Réponse: Il faut exporter les diagrammes puml à l'aide du menu contextuel "Export current file diagrams" et modifier le markdown suivant dansdocs/Squelette.md:### Diagramme de cas d'utilisation 
L'avantage de cette méthode est que votre documentation locale est immédiatement à jour.
Vérifier le travail avec le test,
npx jest --colors dcu-puml-lab0.test.ts:PASS test/modeles/dcu-puml-lab0.test.ts docs/modeles/dcu.puml √ should contain (Redémarrer) as R #powderblue (1 ms) √ should contain J -- R (1 ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.375 s Ran all test suites matching /dcu-puml-lab0.test.ts/i.Repérer et valider le(s) test(s) individuellement à la fin de chaque étape.
-
2. actualiser des modèles de conception (diagrammes de séquence système et réalisations de cas d'utilisation)
Les modèles de conception guident l'implémentation. Vous aurez à revenir à cette section durant ce tutoriel.
-
ajouter un nouveau DSS
docs/modeles/dss-redemarrerJeu.pumlpour le cas d'utilisation (PlantUML)Faire un diagramme en PlantUML qui ressemble à ceci:
-
prendre connaissance des postconditions du contrat d'opération
Toutes les instances de Joueur en cours ont été supprimées.
-
ajouter une nouvelle réalisation de cas d'utilisation (RDCU)
docs/modeles/rdcu-redemarrerJeu.pumlpour l'opération systèmeredemarrerJeu()(PlantUML)Faire un diagramme en PlantUML qui ressemble à ceci:
Valider avec les test
test/modeles/rdcu-redemarrerJeu-puml-lab0.test.tsettest/modeles/dss-redemarrer-puml-lab0.test.ts.
À partir de maintenant, consultez le code existant pour vous aider à compléter les étapes
-
ajouter de nouveaux cas de test pour Redémarrer (Jest/SuperTest)
-
ouvrir le fichier
test/routes/jeuRouter-redemarrerJeu-lab0.test.ts -
y créer une suite de tests nommée
'GET /api/v1/jeu/redemarrerJeu'avecdescribeTous les tests reliés au cas d'utilisation y seront contenus
-
y utiliser
beforeAllpour créer deux joueurs avant l'exécution des testsCette méthode s'exécutera avant tous les tests, pour satisfaire la précondition du cas d'utilisation (un joueur doit exister)
-
y créer un test afin de tester le scénario principal (succès) avec
itet le nommer adéquatementLe test doit appeler la route
GET /api/v1/jeu/redemarrerJeu, qui correspond à l'opération systèmeredemarrerJeudu DSS. Puisque l'opération n'a aucun retour, le test doit uniquement valider le succès de l'opération, c'est-à-dire, que le code HTTP (status) est 200 et que la réponse est duJSON. -
y créer un autre test pour valider la postcondition du contrat d'opération.
Le test doit vérifier qu'il n'y a plus de joueurs.
-
-
vérifier que les tests ne passent pas (Jest/SuperTest)
npx jest --colors jeuRouter-redemarrerJeu-lab0.test.tsva indiquern failedCela est normal, car nous avons écrit plusieurs tests avant d'avoir écrit les fonctionnalités, selon la pratique Développement piloté par les tests.
-
ajouter l'opération système
redemarrerJeudans le contrôleur GRASPsrc/core/jeuDeDes.ts(TypeScript)Cette méthode correspond à l'opération système (unique) définie dans le diagramme de séquence système (DSS).
-
coder l'opération
redemarrerJeuselon la RDCU (TypeScript)Pour la logique du code, consulter le diagramme de séquence (RDCU) créé à l'étape précédente.
-
ajouter une nouvelle route, dans
src/routes/jeuRouter.ts(Express)-
ajouter la fonction
redemarrerJeu, juste avant la fonctioninit()Elle doit :
- avoir les mêmes paramètres que les autres fonctions.
- appeler l'opération système créée précédemment
- afficher à l'utilisateur (
flash) que l'application redémarre - retourner à l'utilisateur l'état du système, le code HTTP 200 (Ok) et le
message:'Success'
-
ajouter, à la fin de la fonction
init(), une routeGET /redemarrerJeupour lier l'URI àredemarrerJeuIl s'agit d'une définition de route dans Express. Lorsqu'il y aura une requête HTTP
GETavecapi/v1/jeu/redemarrerJeu, la fonctionredemarrerJeudans la même classe sera appelée (callback). Cette fonction est aussi appelée un route handler en anglais.
-
-
faire un build (Node.js)
npm run builddevrait passer sans erreurs. Si vous avez des erreurs, essayer de lire et de comprendre pourquoi. Si vous êtes bloqués pendant plus de 5 minutes, demandez de l'aide à un auxiliaire d'enseignement. -
vérifier que les tests pour redémarrerJeu passent:
npx jest --colors jeuRouter-redemarrerJeu-lab0.test.ts. (Node.js) -
vérifier que TOUS les tests de fonctionnalités passent (Node.js)
npx jest --colors --coverage "[^lab0].test.ts"devrait indiquer que tous les tests passent. -
ajouter le bouton dans
views/index.pug(PugJS.org)Facultatif : pour une explication de PUG (anciennement Jade) avec Express, il y a cette vidéo.
Dans
views/index.pugaprès le texte ici, ajouter la lignebutton#redemarrer Redémarrer(:warning: attention au niveau d'indentation):ul.entries each joueur in joueurs li.joueur -var nom = joueur.nom; strong(id=nom) #{nom} = ' ' | tentatives: #{joueur.lancers}, réussites: #{joueur.lancersGagnes} = ' ' button.lancer(id=nom) Lancer dés = ' ' button.terminer(id=nom) Terminer else li em Pas de joueurs encore. button#redemarrer Redémarrer
-
ajouter le JavaScript pour le bouton afin d'invoquer le nouveau service
Dans
public/lib/main.json trouve le code pour les boutons. Après la logique pour traiter le clic sur le bouton Démarrer (demarrer.addEventListener("click", function(){...});, ajouter une nouvelle logique pour le bouton Redémarrer qui fait unGETsur/api/v1/jeu/redemarrerJeu:document.getElementById("redemarrer").addEventListener("click", function () { fetch("/api/v1/jeu/redemarrerJeu") .then(function() { location.reload(); }); });
Refaire le build et relancer le serveur dans le terminal. Recharger la page web et vérifier que le bouton fonctionne comme il le faut en créant une nouvelle partie pour un joueur et ensuite cliquant sur Redémarrer.
Il existe un lien dans la barre de navigation «Classement» pour la page /stats. Cependant, cette page n'affiche pas la colonne Ratio, car l'information n'est pas encore calculée.
-
Modifier le route handler dans
src/app.tset le gabaritview/stats.pugpour que le ratio se calcule et s'affiche. La classesrc/core/Joueur.tsne contient pas de propriétératio, mais on peut la calculer dans le route handler. Il faut passer un nouveau tableau de joueurs, mais les objets doivent contenir une propriétératioqui est le nombre de succès divisé par le nombre de tentatives. Astuce sur stackoverflow.const joueurs: Array<Joueur> = JSON.parse(jeuRoutes.controleurJeu.joueurs); const joueursAvecRatio = /* à compléter en ajoutant joueur.ratio */; res.render('stats', // passer objet au gabarit (template) Pug { title: `${titreBase}`, user: user, // créer nouveau tableau de joueurs qui est trié par ratio joueurs: joueursAvecRatio /* à modifier */
Pour afficher le ratio, il faut modifier le gabarit
views/stats.pug(la ligne à modifier est en commentaire):each joueur in joueurs tr td #{joueur.nom} td(style="text-align: right") #{joueur.lancers} td(style="text-align: right") #{joueur.lancersGagnes} //- td(style="text-align: right; font-family: monospace") #{joueur.ratio.toFixed(8)}
-
Trier le tableau de
joueursAvecRatiopour que le classement s'affiche en ordre décroissant par ratio. Astuce sur stackoverflow.Puisqu'il s'agit simplement d'une nouvelle vue sur les informations déjà présentes dans le système, on ne doit pas faire une RDCU. C'est-à-dire qu'on ne modifie pas l'état des objets du domaine.
- Générer un diagramme de classes pour la solution avec le script
npm run uml-classes-pumlqui utilise l'outiltplant. Par défaut, le diagrammeApp.pumlest placé dans le répertoiredocs/modeles. Chaque fois que vous modifiez votre code source, c'est une bonne idée d'actualiser ce diagramme avec ce script. - Visualiser le fichier généré
App.pumldans VS Code avec l'extension de PlantUML. Comprendre le design du jeu de dés. - Intégrer ce diagramme dans votre rapport
Squelette.mddans une section nommée Diagramme de classes logicielles.
- Modifier le cas d'utilisation Jouer aux dés pour que le joueur lance trois dés plutôt que deux et la condition pour gagner soit que le total soit inférieur ou égal à 10. Il faut passer par toutes les étapes, y compris modifier le MDD, les contrats, les RDCU, les tests et le code. Cependant, cette fois-ci vous devez vous débrouiller, en vous référant à des étapes plus haut.
⚠️ Les tests de base du squelette lancés parnpx jest --colors --coverage "[^lab0].test.ts"ne seront plus bons, car ils valident les fonctionnalités du jeu avec deux dés. Il faut les modifier pour la nouvelle fonctionnalité avec trois dés. Certains de ces tests sont plus difficiles à faire passer, notamment ceux danstest/core/jeuDeDes.test.tsqui valident les valeurs retournées par la méthodebrasser(). En fait, la probabilité d'avoir certaines valeurs (ex. 3 et 18) avec trois dés est faible (ex. 1/216 ≈ 0.5 %). Il faut donc faire plus d'essais (jusqu'à 2000?) pour obtenir toutes les valeurs dans le test. Faire autant d'essaies dans un test n'est pas idéal puisque ça prend du temps. Il serait plus efficient si on utilisait des mocks, mais cela est hors du cadre du cours.
- Assurez-vous de générer une version PDF de votre fichier
docs/Squelette.mdnommédocs/lab0.pdfun menu contextuel devrait vous permettre de réaliser cette tâche dans Visual Studio Code si vous avez installé les bonnes extensions. Il se peut que vous ayez à installer d'autres modules (un exporter pour Chromium). Il se peut que le fichier soit créé dans un répertoire
out/docs/aussi avec le nomSquelette.pdf.
Il peut arrive qu'une équipe soit composée des personnes qui travaillent beaucoup moins que les autres. Pour vous sensibiliser aux problèmes typiques et vous outiller à agir rapidement en cas de difficultés, il y a un texte à lire et à intérioriser.
- Lisez le texte Faire face aux parasites et aux mollassons dans une équipe
- Écrivez une réponse dans le fichier
docs/experience-parasites-mollassons.mddu dépôt.
Cet exercice sera noté quasi automatiquement lorsque vous transférez votre code dans GitHub Classrooms. Les tests associés à ce projet permettent de vérifier que la majorité des modifications que vous deviez réaliser ont été faites. Il y a deux volets de la correction automatique avec les tests automatiques:
- Documentation:
npx jest --colors lab0.test.ts(exécuter tous les tests ayantlab0.test.tsdans le nom) - Fonctionnalités:
npx jest --colors --coverage "[^lab0].test.ts"(exécuter tous les tests n'ayant paslab0.test.tsdans le nom et mesurer la couverture)
Assurez-vous qu'aucun test n'est en échec et que la couverture de test est de 100% pour la partie fonctionnalité.
Important: La seule rétroaction pour ce laboratoire est à travers les commandes ci-dessus. Vous n'aurez pas de rétroaction individuelle après la date de remise, alors si vous avez des tests qui ne passent pas ou des questions concernant les technologies, c'est votre responsabilité de demander de l'aide de l'auxiliaire de laboratoire avant la remise.
- À l'aide de Zoom ou de tout autre outil d'enregistrement vidéo, enregistrez une démonstration du fonctionnement de l'interface utilisateur avec au moins 2 joueurs. Sauvegarder le résultat dans le fichier demo.mp4 et placer ce fichier dans le même répertoire que README.md.
- faire une remise de la solution du projet (GitHub) incluant votre réponse dans
docs/experience-parasites-mollassons.md
Félicitations! Vous avez réussi les défis technologiques nécessaires pour être performant dans les laboratoires de LOG210! Ce tutoriel vous sera sûrement utile pendant le développement du projet itératif à suivre, car il y a des liens pour la documentation des technologies différentes.
Si vous avez terminé rapidement grâce à votre expérience, pensez à aider vos coéquipiers qui pourraient toujours avoir des questions. Mais ne faites pas le travail à leur place, car le but est que toute l'équipe soit performante sur le plan technologique. Cherchez à augmenter le facteur de bus (voir les notes de cours pour l'explication) de l'équipe! En plus, le mentorat est une caractéristique importante du leadership.
Le calcul de la note du laboratoire se fait à partir des résultats des tests automatiques et une évaluation faite par l'auxiliaire d'enseignement:
| variable | explication |
|---|---|
| e | 10 points si vous avez complété un texte d'au moins 300 mots dans docs/experience-parasites-mollassons.md (sinon 0 point) |
| b* | nombre de nouveaux boutons fonctionnels (max 1) |
| c* | 10 points si la page de classement fonctionne correctement (sinon 0 point) |
| C* | 10 points multipliés par la couverture de test de toutes les branches |
| v | nombre de tests valides ("passed") |
| d | nombre de tests déjà valides au début du projet |
| t | nombre total de tests |
*évaluation faite par l'auxiliaire d'enseignement