Projet Bestiaire

Le projet en bref

Vous allez créer une application qui présente les données d'un bestiaire d'espèces enregistrées dans une base de données NoSQL distante (MongoDB Atlas). L'application permet de consulter les espèces, mais aussi d'interagir avec chacune pour y ajouter des informations personnelles connues de vous seul : des étoiles, des mots-clés, des notes. Enfin, une connexion à une API intelligente l'enrichit de nouvelles descriptions ou de nouvelles espèces.

L'énoncé

Le diaporama du projet, à consulter en classe et à la maison : la règle des laboratoires en classe, les cinq étapes et leurs tags, les points bonus et les huit styles visuels fournis.

Pour démarrer

1. Créer votre dépôt GitHub : un dépôt pour le projet, où chaque étape se termine par son tag.
2. Télécharger le point de départ : bestiaire.zip, une application Electron préprogrammée (accesseurs, script populate-bestiaire, huit styles dans template/).
3. Préparer Node.js (Kubuntu 24.04) : installer Node.js 22 LTS directement par apt :

   sudo apt update && sudo apt install -y curl
   curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
   sudo apt install -y nodejs
   node -v

4. Ouvrir un compte MongoDB Atlas : gratuit, c'est là que vivra la base bestiaire.

Les étapes

1. Données NoSQL sur MongoDB Atlas (5 points) : créer la grappe ClusterDuMusee et la base bestiaire, récupérer la chaîne de connexion et ajouter 0.0.0.0/0 aux adresses IP permises, créer une collection de votre choix et y insérer 5 documents d'environ 5 champs. Remise : la capture d'écran dans Discord. Aucun point perdu si les noms ne sont pas respectés.
2. Accesseurs NoSQL en POC (5 points) - tag POC_NOSQL : dans une preuve de concept (pas la vraie application), installer le paquet mongodb, puis programmer une fonction qui LIT et retourne les données (appel et log) et une fonction qui AJOUTE une donnée. On teste avec node test-fleurs.js. Guide : Tutoriel 2 - Commandes importantes pour Bestiaire.
3. Intégration à l'application (5 points) - tag LIVRAISON_APP : afficher dans bestiaire.zip les données d'une nouvelle collection especes. Tester l'affichage de boites factices avec document.createElement(), configurer config.js et lancer npm run populate, programmer la lecture des espèces dans AccesseurBestiaire.js et l'appeler dans index.html, puis boucler dans les données pour remplir les boites déjà décorées. On lance avec npm run start. Guide : Tutoriel 3 - App Bestiaire.
4. Données locales (5 points) - tag LIVRAISON_COMPOSITE : programmer la navigation vers la page détail de chaque espèce (gabarit HTML fourni), y rendre une donnée personnalisée éditable (étoiles, favoris, notes d'observation, mots-clés) qui persiste en localStorage et se réaffiche quand on rouvre l'application. Une seule donnée affichée suffit. Guide : Tutoriel 4 - Données locales.
5. API intelligente (5 points) - tag LIVRAISON_AI : générer sa clé sur AI Studio, intégrer la page intelligente, tester la réponse de l'API, personnaliser le prompt différemment pour les deux sections, puis enregistrer les nouveaux animaux dans le cloud et les enrichissements localement. Guide : Semaines 10-12 : API et intelligence artificielle.

Points bonus

Après la remise de l'atelier tel que pratiqué en laboratoire, on peut intégrer des variations :

1. Intégrer un visuel au choix parmi les huit styles du dossier template/ (moderne, grimoire, matrix, nécromancien, nature, vintage, minimal, cabinet).
2. Intégrer une base de données locale autre que localStorage.
3. Ajouter une seconde donnée à l'application avec tous les éléments : page navigable, enregistrement Mongo, cache local.
4. Modifier la création des boites pour utiliser un mini-gabarit HTML.
5. Réafficher les favoris et les notes personnelles sur les cartes.

Ressources