Hannah Mathot — Rapport de stage n°3
HEAJ DWT 2022–2023 B3G1–12/12/2022–25/12/2022
Entreprise :
Poste :
Développeur Web Frontend (Stagiaire)
Cinquième semaine
Lundi
Réunion
La semaine a débuté par une réunion. J’y ai expliqué ma finition du timer, du code au design. Le chef de projet réexplique qu’il sera utilisé pour lancer le projet d’application mobile de l’entreprise. Il me reparle du premier site que j’ai réalisé. La base de données devait être gérée par des autres développeurs mais cela m’a été confié afin que j’apprenne à utiliser le CMS Strapi, à créer une base de données dedans et à reprendre le contenu de cette dernière dans un projet.
Aide et consignes
Après la réunion, il m’a prise à part pour m’expliquer ce que j’allais devoir faire. Il m’a expliqué que Strapi était un CMS connu, après Wordpress.
Il m’en a fourni la documentation. Dans Strapi, il a créé la structure de base pour que je puisse développer l’API.
Ensuite, il a fait un rappel sur les fetch avec promise, ceux asynchrones et ceux réalisés avec useEffect en React.JS.
Nota bene : Un fetch en React doit obligatoirement se faire avec une promise.
Une fois l’API créée et reprise avec fetch, je devrai alors modifier les noms en gras du site pour ceux de la base de données.
Je ne dois m’occuper que du nom en gras. Les autres données de la card seront fournies ultérieurement. Le lien gris sera cliquable et mènera à un lien placeholder. Le lien ‘Infos’ conduira lui à la page des détails.
Création de l’API sur Strapi
Interface
En allant sur Strapi, j’ai remarqué directement la ressemblance avec Wordpress.
Création des keys de l’API
J’ai commencé par créer des ‘Content Types Builder’ qui représentent chaque key de l’API.
Interface des produits
Lorsque je vais dans l’onglet Produits et que j’essaie de créer un nouveau produit, toutes les catégories s’affichent. Je trouve cela assez pratique ! Ces produits sont les équivalents des valeurs d’une key dans une API.
Cette disposition ressemble assez à celle des Custom Fields en Wordpress. Ayant déjà créé des Custom Posts Types et des Custom Fields en classe, j’avais alors plus facile à comprendre la mise en place des catégories générales et la création de leurs valeurs.
J’ai alors essayé de créer un premier produit par rapport à une liste qui m’a été fournie par le chef de projet.
Deux découvertes intrigantes
- Alors que j’ai effacé deux précédents produits que j’avais créés pour m’entrainer, je me suis rendue compte que l’id des nouveaux produits créés continuait de s’incrémenter, elle ne retombait pas à 0 même s’il n’y a aucun autre produit créé.
2. J’ai également remarqué que l’API gardait en mémoire les anciennes catégories effacées. J’ai alors planifié de demander ultérieurement comment corriger cela.
Mis à part ces deux problèmes, la création d’API est extrêmement intéressante ! Ces deux erreurs n’empêchant en rien la création de l’API, j’ai donc continué sur ma lancée.
Création des valeurs de l’API
J’ai continué en ajoutant tous les produits de la liste fournie par l’entreprise.
Fetch la nouvelle API
La première partie du fetch s’est bien passée. J’ai remplacé les keys de l’ancienne API par celles de la nouvelle base de données de Strapi. Deux-trois corrections en CSS, les éléments du JSON triés en JS pour que leurs id soient bien en ordre croissant et le tour est joué. Le fetch aura été plus simple à réaliser que j’imaginais.
La journée s’est ensuite finie.
Mardi
Réunion
A la réunion de cellule, j’ai expliqué mon avancée de la veille.
Après avoir découvert Strapi et avoir eu des étoiles dans les yeux en créant ma première base de données, j’allais aujourd’hui regarder aux bugs du site qui ont pu se créer lors du changement d’API.
Changements et problèmes à corriger
Les deux champs de recherche ne filtraient rien. La checkbox filtrait toujours le “Full Time” mais ce terme n’était plus pertinent avec la nouvelle API. Cependant, comme je n’ai pas eu de directives concernant quelles valeurs filtrées via ces barres de recherche/checkbox, je ne dois pas travailler dessus.
La page des détails possédait des erreurs console et n’affichait rien.
Corrections
Je suis parvenue à afficher le contenu fixe de la page des détails mais pas celui variable. J’ai alors fait davantage de recherches pour y parvenir.
Après de longues recherches, j’ai enfin résolu le problème d’affichage de la page des détails.
Après avoir vérifié que j’avais tout bien intégré, j’ai envoyé le résultat au chef de projet sur Slack et lui ai posé mes questions alors que la journée se terminait.
Mercredi
Réponses aux questions
Concernant les 2 questions que je me suis posée la veille, un de mes collègues de cellule y a regardé. Selon lui, pour y remédier, il faudrait recommencer les manipulations de création de structure depuis le début. Celle-ci avait été déterminée par le chef de projet donc je n’allais pas me permettre d’y toucher. Mon collègue me rassure en disant que la key index que j’ai créé faisait parfaitement l’affaire. Il a regardé aux performances de l’API pour voir si les catégories supprimées ralentissaient le serveur mais celles-ci sont optimales. A moins de ne recommencer la création de la structure de l’API, les deux problèmes persisteront mais j’ai su trouver des solutions pour les contourner et cela suffit selon lui.
Faciliter l’utilisation de React
Pour que j’aie plus facile à utiliser React.JS ainsi que ses props/composants, j’ai suivi deux formations sur Redux.
Il s’agit d’un ‘gestionnaire d’état’ qui centralise et permet de faire communiquer les infos d’un composant React à un autre même s’ils sont éloignés dans l’arborescence. Pour chaque formation, j’ai réalisé une synthèse.
Réunion
J’ai expliqué mes avancées concernant la création d’API et le fait que je suis actuellement une formation pour approfondir mes connaissances en React.JS et découvrir Redux.
Mercredi, Jeudi et Vendredi
1ère formation et difficulté de rendu
Durant tout mercredi et jeudi, j’ai suivi une 1ère formation sur Redux. Pour pouvoir la suivre et faire des exercices, j’avais besoin d’installer un package avec yarn/npm. Cependant, après avoir fait toutes les manipulations demandées, le rendu dans le browser ne fonctionnait pas. Après de nombreux tests, revisionnages, rien n’était concluant. Au soir, chez moi, je transfère les fichiers sur mon ordinateur personnel pour voir si cela marche mais rien. Jeudi midi, après avoir recommencé toute la manipulation depuis le début, le dossier a enfin fonctionné.
J’ai alors fini la 1ère formation une première fois jeudi. Je l’ai trouvée assez compliquée. Intéressante mais très abstraite.
2ème formation plus efficace
J’ai alors suivi une deuxième formation plus longue, moins compacte et donc plus facile à comprendre pour moi. Elle a été plus facile à suivre car le formateur prend plus son temps pour expliquer et que j’avais déjà suivi la première. Je comprenais alors mieux de quoi elle parlait.
A la fin de la journée de vendredi, j’avais bien avancé dans la formation et j’avais tout bien compris. Cette formation m’a vraiment motivée et donné envie d’utiliser Redux pour des projets futurs !
Principe de Redux
Redux centralise tous les états React pour qu’on puisse les utiliser où l’on souhaite. Normalement, un état React est difficile à utiliser à travers l’arborescence des éléments donc Redux aide à cela.
Après une action déterminée, l’état React va être mis à jour. Par exemple, Redux peut gérer une incrémentation de valeur au clic de bouton. La valeur aura comme valeur l’état et l’incrémentation sera l’action.
Redux peut être utilisé par tous les langages de programmation utilisant JS (JS Vanilla, React, Vue, Angular, etc). Il peut gérer autant des fonctions synchrones qu’asyncrones. Il possède un outil de debug et son code s’améliore et s’optimise au fil du temps.
Sixième semaine
Lundi, Mardi et Mercredi
J’ai terminé la formation sur Redux.
Raccourci pratique
Un raccourci clavier montré dans la vidéo mérite d’être retenu. Note: il faut installer l’extension ‘React Snippet’ pour que le raccourci soit applicable. En écrivant ‘rafce’ puis en cliquant sur enter dans notre fichier js/jsx, cela crée automatiquement un import React, un composant fonction React qui sera assigné à une variable et une exportation de ce dernier qui aura par défaut le nom du fichier dans lequel il est créé. A l’instar du ‘! + enter’ en html, ce raccourci est assez pratique et permet de gagner du temps.
J’ai eu fini de visionner la 2ème formation sur Redux. Il y avait beaucoup d’informations à assimiler mais j’ai adoré la formation et en apprendre davantage sur le développement plus poussé en React/Redux.
Exercices
En suivant la formation, j’ai réalisé 2 exercices intéressants : une interface avec des compteurs multiples et une vue admin et une autre interface proposant de rechercher des livres et d’en ajouter à sa liste. J’ai pu réviser React Router, les formulaires contrôlés par React, découvrir de nouvelles propriétés Tailwind/Bootstrap, etc.
Exercice 1 :
Exercice 2 :
Je me suis rendue compte que Redux a beau être pratique, il est davantage plus complexe que React.JS.
Exercices personnels
J’ai ensuite réalisé des exercices seule en Redux/Tailwind pour m’entrainer.
J’ai commencé en créant un compteur qui incrémente une valeur et un autre qui décrémente au clic du même bouton.
Enfin, j’ai réalisé un exercice de fetch d’api avec Redux Toolkit.
Réunion
J’ai expliqué que j’avais terminé la formation et que je faisais des exercices.
Echanges avec les stagiaires
Cette semaine, j’ai beaucoup échangé avec les autres stagiaires de la cellule. Nous avons discuté de nos formations respectives, nos compétences. Je leur ai parlé de mon école/option, des cours qui y sont organisés, des méthodes de travail et de tout ce que j’y apprenais. J’ai beaucoup apprécié parler avec eux pour avoir une idée d’expériences autres que celles de l’HEAJ.
Jeudi et Vendredi
Réunion générale
J’ai participé à la réunion générale où j’ai revu les employés d’autres cellules. J’ai écouté attentivement de quoi ils parlaient pour me rendre compte un peu et comprendre le quotidien et leurs projets comme je pouvais. Pour ma part, j’ai indiqué que tout se passait bien dans mon travail quotidien.
Révision
J’ai revisionné la première formation que j’avais moins bien comprise après avoir bien compris la 2ème. Même si certaines notions sont encore un tout petit peu compliquées pour moi, je les ai beaucoup mieux comprises.
Rétrospective des deux semaines
Durant ces deux semaines, j’aurai autant appris de nouvelles choses que de pratiquer. J’ai pu découvrir Strapi. Un CMS qui permet de créer ses propres API. Dans le monde du code, j’apprécie énormément l’utilisation de base de données car je trouve cela fascinant donc j’ai adoré utiliser ce CMS. Je trouve son interface claire : un onglet crée les keys, un autre les valeurs. J’ai donc pu expériencer la création et utilisation de ma propre API. J’ai réussi à modifier mon projet en utilisant les nouvelles key de la base de données malgré le fait que l’application soit codée en React (qui est le langage le plus nouveau pour moi).
J’ai découvert Redux, un gestionnaire d’états React. Malgré le fait qu’il soit encore assez complexe à utiliser pour le moment, son principe est très intéressant et je me sens capable de l’utiliser pour gérer certains états React spécifiques pour lesquels je sais gérer le code, à l’avenir. Grâce aux deux formations, j’ai pu aborder Redux de fond en comble et coder quelques exercices que je pourrai réutiliser dès que j’en aurai besoin. Ces derniers m’auront permis de revoir certaines notions comme le React Router, les états React, Tailwind/Bootstrap, les fetchs, etc.
Enfin, j’ai pu davantage partager et discuter avec mes collègues en leur posant des questions et en échangeant sur nos quotidiens/compétences respectifs.
