Aller au contenu principal

Informations générales

danger
  • Le code de chaque projet est à faire seul. Toute suspicion de copier/coller de code issu d'un autre projet sera sanctionné par un 0 pour les deux personnes.
  • Pensez à mettre votre dépôt en private
  • Le devoir sera basé sur une extension de ce projet. Donc si vous faites tout faire par une IA, vous aurez une bonne note (avec un tout petit coeff) au projet, mais une mauvaise note (avec gros coeff) au devoir machine (qui serra sans IA)

Modalités du rendu​

  • Projet à rendre sur moodle
  • À rendre pour le jeudi 12/03
  • Pas de vanilla. Tout doit être fait avec React et typescript
  • Commentez votre code avec la norme JSDoc

Notation :​

  • Respect du cahier des charges (3 points)
  • Fonctionnalité libre (5 points)
  • Qualité du code (12 points) :
    • Qualité globale du code (appels à l'API, déstructuration, programmation fonctionnelle, jsx, découpage en fichiers, JSDoc, ...) : 5 points
    • Gestion des hook : 3 points
    • Qualité de vos composants : 2 points
    • Qualité du TS : 2 points
astuce

La note finale de ce module est calculée de la manière suivante :

1/3 * (noteProjet * 1 + noteDevoirMachine * 5)

Projet Puzzle musical

Description​

L'objectif de ce projet est de créer un site web (avec REACT + TS) permettant de jouer à un puzzle musical collaboratif.

Page 1 : saisir votre UID​

Voici la page d'accueil de votre site. Vous pouvez vous en inspirer (en terme de template), vous vous pouvez faire mieux si vous le souhaitez.

Home Page

Cette page donne quelques informations sur le jeu et vous permet de saisir votre UID. Il sera utilisé pour toutes les requêtes.

Page 2 : Page du jeu​

Comme sur la vidéo :

  • on commence par indiquer sur quel puzzle on veut jouer
  • on peut écouter le liste des sons du puzzle sur la partie de gauche. Si on appuie sur le carré cela stoppe le son. Si on appuie sur le symbole à côté cela signifie qu'on sélectionne ce son pour répondre
  • la partie de droite est le puzzle. On peut écouter et arrêter chaque son. Pour pouvoir cliquer sur "answer" il faut avoir renseigné son UID (page d'accueil), être dans le gorupe A (car on a sélectionné le groupe A dans le liste au dessus du puzzle), et avoir sélectionné un son dans la partie de gauche.

Il faut afficher un message en fonction de la situation : bonne réponse, mauvaise réponse, erreur du serveur, vous n'êtes pas dans le groupe autorisé à répondre à ce puzzle, ....

Page 2 : Statistiques​

Comme on le voit sur la vidéo, la troisième page contient les statistiques d'avancées des 4 groupes de TD de S4. Sur la vidéo on voit que suel le groupe A a trouvé des pièces (2 exactement)

Attendus de la partie front​

Template du site​

Vous êtes libres de choisir le template de votre choix. Vous pouvez même en prendre un libre de droits sur internet. En S4 vous n'êtes pas notés sur vos compétences HTML/CSS. Faites quand même un petit effort pour que votre site soit un minimum ergonomique. Pensez aussi à faire passer l'outil d'audit de votre navigateur pour vérifier qu'il respecte les standards du web. Le site doit contenir un menu permettant d'accéder aux différentes pages décrites ci-dessous.

Fonctionalités supplémentaires​

Remue-méninge

Comme énoncé dans les informations générales, il faut que vous ajoutiez une ou des fonctionalités supplémentaires. Cela compte pour 5 points. Il ne faut donc pas la négliger.

info

Pour aider le correcteur, merci d'indiquer clairement dans le ReadMe de votre projet déposé sur moodle ce qui

  • marche / marche pas
  • les fonctionalités supplémentaires
  • comment vous avez utilisée l'IA (cela ne sera pas utilisé contre vous, c'est pour faire mes stats)

Voici quelques pistes possibles. Vous pouvez aussi proposer vos propres idées.

  • (simple) Stocker en local l'UID via localStorage

  • (un peu plus compliqué) En explorant l'API vous verrez qu'elle propose des données qui ne sont pas nécessaires à la réalisation des pages précédemment décrites. À vous d'explorer ces données et de trouver un bonne idée pour afficher plus d'informations (vous pouvez même ajouter une page).

  • (un peu plus compliqué) Si vous souhaitez intégrer des fonctionalités supplémentaires liées à la manipulation de sons, vous pouvez (par exemple) utiliser une librairie telle que tones.js.
info

Si vous souhaitez déployer votre site sur un vrai serveur web avec une adresse publique, un serveur nginx, un certificat https, ... c'est possible. J'ai des VPS pour vous (mais pas de nom de dommaine).

Pour un nom de domaine gratuit vous pouvez regarder sur Heroku (je n'ai pas testé récemment).

Déployer sur un serveur n'entre pas dans la notation.

API Puzzle​

Un swagger a été déployé sur cette url. Il vous permet de tester certaines routes de l'API et surtout d'avoir accès à la documentation.

astuce
  • Pensez à utiliser le .env à la racine de votre projet React pour préciser l'URL du serveur qui sera utilisée pour faire les requêtes fetch
VITE_API_SERVEUR=https://api.puzzle.codenestedu.fr/