Ce projet est conçu comme un tp itératif te permettant de tester tes connaissances et d'apprendre ce qui te manque pour l'instant via des exemples simples.
ℹ️ INFO: Tu peux faire ce projet pour le fun si tu le souhaites. Rien ne t'engage si tu te lances dedans, donc sans pression 😄
⚠️ ATTENTION: N'aie crainte, tu n'as pas besoin de tout faire avant de revenir vers nous avec tes questions et ou l'envie de présenter ton projet. D'ailleurs, on t'invite à rejoindre notre Discord pour poser tes questions ou montrer où tu en es dans ton projet: https://discord.gg/8KdQZZCFNK
- Teolia - Get on your Apprenticeship !
- Table des matières
- Outils
- Découvre le projet
- Le projet
- But du projet
- Choisi ton parcours !
- ⭐ Affiche la liste des élèves de Poudlard
- ⭐ Eh mais attends, y a personne à Poudlard ou quoi ?!
- ⭐ Ils sont quand même un peu trop en fait. Tires en un au sort !
- ⭐ [AGILE/GESTION] Un peu de propre : Récurvite !
- 🔥 [FRONT/API] As you wish 😄
- 🔥 [FRONT] Claque ton plus beau CSS
- 🔥 [API] Implémente un système de filtre par maison
- 🔥 [FRONT/API] Implémente un système de pagination sur la liste des élèves
- 🔥 [DEVOPS] Dockerise les images front et API
- 🔥🔥 [DEVOPS/CLOUD] Déploie le front sur Github pages
- 🔥 [DEVOPS/CLOUD] Déploie l'API sur Netlify
- 🔥🔥 [DEVOPS] Met en place une pipeline Github Actions
- 🔥🔥 [FRONT] C'est la crise ! Il nous faut des stats
- 🔥🔥🔥 [API/DB/CLOUD] Utilise Google Cloud firebase pour stocker les données json
- 🔥🔥 [FRONT] Rend le site responsive pour pouvoir le visualiser sur un smartphone
- 🔥🔥🔥 [API] Met en place un système d'authentification avec Firebase Auth
- 🔥🔥 [FRONT] Met en place des tests fonctionnels avec Playwright
- 🔥🔥 [API] Met en place des tests unitaires avec jest sur l'API
- Pour faire le projet, tu peux utiliser les outils que tu souhaites (VSCode, vim, Atom, Sublime, ...). Si tu ne sais pas quel outil utiliser, je te conseille de prendre VSCode
- Les seuls prérequis pour faire le projet est d'avoir NodeJS installé sur son PC
- Git
- Et que l'API soit en TypeScript
- Si tu n'en as pas déjà un, créé toi un compte Github
- En haut de la page de ce projet, clique sur le bouton Fork. Cela te permettra de faire une copie de ce projet dans les repositories de ton compte personnel
- Récupère le projet localement via un
git clone
git clone https://github.com/<ton_id_github>/get-on-your-apprenticeship.gitcd api
npm install
npm run devL'API devrait alors être disponible à l'adresse suivante: http://localhost:3000
Pour vérifier qu'elle fonctionne correctement, tu peux charger l'URL suivante: http://localhost:3000/dummy/student (cela devrait te retourner le nom d'un sorcier célèbre).
Dans un autre terminal (on veut que le front et l'API soit démarrés en même temps)
cd front
npm install
npm run devLe front devrait alors être disponible à l'adresse suivante: http://localhost:5137
Maintenant que tu as démarré le front et l'API, tu dois pouvoir contempler un manifique site listant les élèves de l'école Poudlard
Bon, pour l'instant, c'est pas bien brillant, mais grâce à ton aide, je sens qu'on va faire mieux 😄
Le but est d'améliorer les fonctionnalités du front et de l'API afin d'obtenir les résultats demandés dans les items suivants.
ℹ️ INFO: Seuls les items de la liste marqués par ⭐ sont à faire a minima. Pour le reste, marqués par 🔥, tu dois choisir 5 items au minimum et essayer de les implémenter. Après, si t'es on fire et que tu veux en faire un maximum, c'est pas moi qui vais t'en empêcher 😄
J'ai essayé de représenter la difficulté de chaque tâche optionnelle en ajoutant des symbôles 🔥.
🔥 = facile
🔥🔥 = moyen
🔥🔥🔥 = dur
Pour commencer, tu vas devoir améliorer le front afin d'afficher la liste de tous les élèves en préinscription à Poudlard. Pour cela
- Commence par modifier l'appel API fait depuis le front pour appeler http://localhost:3000/dummy/students
- Puis, modifie le front en fonction pour afficher une belle liste d'étudiants, ainsi que leurs maisons
Libre à toi d'implémenter ce que tu veux pour l'affichage. Du temps que ça te plait, c'est le principal
Tu dois te rendre compte que la liste des élèves est un peu courte quand même. Pour pallier ce problème, on va aller chercher une liste un peu plus à jour disponible sur l'API du ministère de la magie: https://harry-potter-api-3a23c827ee69.herokuapp.com/api/characters ou https://api.potterdb.com/v1/characters
Ici, ton but va être de réaliser une nouvelle route dans l'API qui se chargera de récupérer la liste des élèves pour toi à chaque appel.
Pour cela, dans le dossier api:
- Créer un nouveau fichier appelé
real.ts(parce que c'est la vraie API qu'on est en train de créer) dans le repertoireroutes. Tu peux t'inspirer du contenu du fichier dummy pour remplir ton nouveau fichier - Référence ta nouvelle route dans le ficher
app.tspour qu'elle soit accessible lors d'un appel sur http://localhost:3000/real/students - Implémente le code qui va bien pour que cette fonction aille chercher la liste des élèves sur https://harry-potter-api-3a23c827ee69.herokuapp.com/api/characters ou https://api.potterdb.com/v1/characters puis la renvoie telle quelle.
Puis améliore ton front pour afficher quelques nouvelles informations que tu ne veux absolument pas manquer. Le surnom des élèves par exemple.
Tu peux afficher les infos comme tu le souhaites, essaye juste d'avoir une interface lisible (un tableau par exemple)
Cette année a lieu la coupe des trois sorciers à Poudlard. Afin que les directeurs puissent choisir un champion par école, il te demandent de créer une fonction leur permettant de tirer au sort une personne au hasard dans la base des élèves que tu as mis à disposition dans la question précédente.
Tu vas donc devoir créer une nouvelle route disponible à l'adresse: http://localhost:3000/real/randomstudent
Pour cela, tu peux ajouter une nouvelle route dans le fichier real.ts.
A toi de trouver quoi faire pour renvoyer un seul élève à partir de la liste disponible à travers l'API du ministère.
Cette salle sur demande est plutôt en désordre cette année, il faudrait mettre un coup de propre à l'intérieur pour qu'on puisse s'y retrouver.
Pour ce faire, penses à bien écrire tes "tickets de tâches" dans un tableau "Agile". Tu peux partir sur n'importe quelle méthode de ton choix (Scrum ou Kanban ou Scrumban).
Dobby te conseille d'utiliser Jira mais tu peux très bien utiliser autre chose comme Trello ou ClickUp par exemple.
🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨
Je le remet la parce que je sais que personne lis les consignes jusqu'au bout. A partir d'ici, tu n'es pas obligé de tout faire, choisis juste 5 options 🔥 et implémente les. Si tu veux en faire plus, go go go ! 🚀🚀🚀 (en vrai si tu arrives à faire tous les items, t'es chaud ! 🔥)
🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨
Avant de te donner pleins de trucs dont t'as jamais entendu parler, je t'encourage à implémenter ce qui te fait plaisir. Si le début de projet t'as donné des idées et que tu veux pousser à fond, vas y ! Ça comptera tout aussi bien pour une question optionnelle
Tu trouves mon front claqué ?! Bon, en vrai, tu as raison (même si j'ai tout donné 😞)
Je pense que ça va être l'occasion de montrer ce que tu es capable de faire en UI. Sort tes skills CSS et fait moi le plus beau front dont tu es capable.
On a plein d'élèves, c'est cool, mais quand il faut faire l'appel, c'est un peu compliqué. Ce qui serait top, c'est de pouvoir les filtrer pour pouvoir avoir uniquement les élèves de gryffondor lorsqu'on appelle l'API.
Pour cela, ajoute la possibilité de soumettre un critère de recherche sur la route real/students via les query params. Exemple d'appel http://localhost:3000/real/students?house=Gryffindor
En fait, on a vraiment trop d'élèves à Poudlard cette année, il faudrait pouvoir paginer le résultat de la recherche globale d'élèves depuis la route /real/students.
Normalement, ta route devrait ressembler àa ceci : /real/students?page=2.
La on commence à rentrer dans les sujets DevOps !!! Viens te frotter à la containerisation en essayant de containeriser ton front et ton API.
Le gain ? En dockerisant ton application, tu seras capable de la distribuer très facilement à n'importe qui ayant une commande Docker installée sur son ordi
Si tu veux en savoir plus sur Docker: https://www.docker.com/get-started
Un front dispo pour toi sur ton ordi, c'est bien. Mais le rendre disponible à tous les apprentis sorciers qui voudraient savoir qui sera à Poudlard cette année, c'est mieux !
Pour déployer ton site, tu vas devoir le builder (regarde du coté de npm run build)
Tu as maintenant une archive statique de site dans un répertoire build. Il ne te reste plus qu'a le déployer à l'aide de Github Pages (solution gratuite)
Normalement, si tu as réussi ton coup, tu devrais avoir un site déployé sur les internets avec une URL du style: https://<ton_id_github>.github.io/get-on-your-apprenticeship
Si tu as fait la question précédente, tu te demande surement comment déployer le code de ton API. Et bien, sache que c'est encore plus simple que ton front.
Pour déployer ton API, utilise la documentation de Netlify pour déployer des projets node (c'est gratuit et assez rapide)
Que serait la magie sans déploiement réelle automatisation de ton projet ?
Si tu t'en sens capable, le professeur d'automagie aimerait que tu puisses créer une CI Github Actions qui permettra de vérifier l'intégrité du code (linter/formatter) lors du déploiement sur la branche nommé "main".
Tu peux utiliser ce que tu veux pour les linter et formatter.
Pour t'aider, tu peux utiliser ESLint pour le linter et Prettier pour le formatter de code.
⚠️ 🔥 Tu peux aussi déployer depuis ta CI directement sur Netlify si tu t'en sens capable !
Les professeurs se sentent submergés par le nombre d'élèves dans la liste et aimeraient avoir quelques statistiques dessus.
Sors ta plus belle librairie front pour afficher les statistiques de ton choix dans un magnifique dashboard (tu peux trouver des exemples de dashboard ici)
Pour l'instant, tu appelles une API externe qui est rattachée au ministère de la magie. Cependant, Poudlard voudrait être maitre de ses données et entreprend donc de rapatrier les données dans une base de donnée Cloud, à savoir: Google Cloud firestore
Pour cela, instancie une database Firestore, puis copie les données de l'API dans la collection que tu auras créée. Enfin, modifie ton API pour qu'elle aille chercher dans ta database fraichement créée.
Tu peux utiliser la doc quickstart pour t'aider: https://cloud.google.com/firestore/docs/quickstart-servers#node.js
Les élèves de Poudlard voudraient avoir accès à la liste d'élèves en permanence et donc sur leur smartphone magique (non, non, jte jure, je force pas 😄)
Tu vas donc devoir faire en sorte de rendre ta/tes pages responsives afin qu'elles s'affichent sans problème sur un smartphone.
Tu peux utiliser les ressources suivantes pour t'aider:
Normalement, seul les professeurs et Dumbledore devraient avoir accès aux informations des élèves de Poudlard car les mange-morts rôdent autour de l'école ces temps-ci.
Pour ce faire, tu devras mettre en place une authentification via Firebase Auth.
Tu peux utiliser la ressource suivante pour t'aider à mieux comprendre et à mettre en place cette fonctionnalité
Ton appli a pris beaucoup plus d'ampleur que ce que tu avais imaginé à ses débuts ! Maintenant, tous les élèves de l'école l'utilise sans exception et tu galère donc à sortir de nouvelles fonctionnalités de peur d'introduire des bugs dans les fonctionnalités déjà présentes.
Eh mais attends, y a une solution pour ça non ? Je dis oui, oui, oUI, OUI, OUIIIIIIII ! Les tests automatisés bien sûr !
Ici, tu dois implémenter des tests fonctionnels (des tests qui simulent des cliques ou des chargements de page graphiquement) à l'aide de Playwright. Tu peux implémenter le ou les tests fonctionnels de ton choix (ex: vérifier qu'un composant soit la lors du chargement de la page)
Tu peux t'aider de ce genre d'article
Maintenant que tu as implémenté des tests automatisés dans ton front, il va falloir se pencher sur les tests automatisés de l'API.
Cette fois ci, les tests automatisés vont vérifier si les données attendues sont bien renvoyées, si le format de renvoi est bien respecté (tableau json par exemple), ou tout autre type de tests qui te donnent envie.
Encore un dernier petit tip. Tu peux t'aider avec cet article 😄