Hannah Mathot — Rapport de stage n°5
HEAJ DWT 2022–2023 B3G1–9/1/2023–22/1/2023
Entreprise :
Poste :
Développeur Web Frontend (Stagiaire)
Neuvième semaine
Réunion
J’ai expliqué que j’avais bien avancé la semaine passée et que j’allais commencer le responsive ainsi que les autres pages.
Suite du projet
Flexbox VS Grid
Durant le responsive, j’ai revu le principe des grids vu à l’école. Les cards de la partie ‘Recommended’ s’alignaient mal car elles étaient codées avec une flexbox.
Il est facile de bien les agencer en utilisant cette dernière méthode mais les cards de la dernière rangée seraient alors éparpillées, comme durant mon premier projet de stage.
Pour ce projet-ci, je n’ai pas laissé une flexbox, j’ai optimisé le code en utilisant une grid. Cela a permis d’avoir des espaces identiques et une mise en page plus convenable que la précédente. Cela a aussi réduit le nombre de lignes de code, passant de 9 à 5 propriétés Tailwind.CSS.
Après avoir appris de mon erreur, je me suis davantage renseignée sur ce qui différencie flexbox et grid et leurs utilités.
Accueil en tablette
Après avoir redimensionné les cards, je finis le responsive en tablette.
Singulier/pluriel
Lors de la recherche, je me rends compte que le mot ‘results’ garde un ‘s’ même lorsqu’il n’y a qu’un seul résultat. Je corrige cela.
Accueil en desktop
J’ai ensuite fait la version pour ordinateur.
Recherche d’optimisation de code
Afin d’avoir le meilleur code possible, j’ai réfléchi à comment présenter le multipages. Est-ce qu’un router est vraiment nécessaire ou est-ce que d’autres méthodes peuvent être utilisables ?
Grâce aux paramètres de l’url, je parviens petit à petit à créer une page convenable. Cependant, React Router mène à un dossier et non à un paramètre (à ma connaissance) donc je me résous à utiliser comme path un dossier plutôt qu’un paramètre.
Multipages
J’ai mis en place le router et ai créé les 3 pages ‘Movies’, ‘TV Series’ et ‘Bookmarks. Elles sont disponibles en responsive.
J’ai remarqué que des bugs étaient apparus alors que ma journée se clôturait.
Mardi
Réunion
J’ai expliqué que j’ai mis en place le responsive et le multipages mais que j’avais obtenu des bugs et que j’allais donc chercher à les corriger.
Recherche des bugs
La recherche ne se passait vraiment pas comme prévu. Elle triait bien les cards comme elle devrait mais le titre qui devrait changer ne le faisait pas toujours. Parfois, il le faisait après avoir tapé 2 caractères, après 1 comme il faut, sinon jamais. Lorsqu’il n’y a pas de résultats, il se changeait comme il fallait. Certains caractères entrainaient une recherche parfaite tandis que d’autres la rendaient imprévisible. A d’autres moments, il était indiqué qu’il y avait un résultat alors que cela était faux, aucune card de la liste ne correspondait à la valeur de l’input. Sur la page d’accueil, la section ‘Trending’ ne disparaissait pas systématiquement lors de la recherche.
En résumé, cette recherche était totalement imprévisible.
Repos GitHub
J’ai mis la recherche de côté pour envoyer sur repos le code de mon premier projet. Après plusieurs recherches, le chef de projet m’a expliqué qu’il ne sait pas me donner accès au repos de travail sur la plateforme habituelle. Comme le projet doit être traité et utilisé sous peu, il m’a alors proposé d’utiliser Git/Github.
Il m’a demandé si j’avais un compte GitHub et si j’avais déjà utilisé Git, j’ai acquiescé. J’ai alors pushé mon code de projet sur le repos GitHub fourni par la cellule.
J’aurai alors pu participer à un procédé total de mise en place de projet :
1. Consignes du projet.
2. Dossier de travail et Figma fournis.
3. Création du code.
4. Retours et aide.
5. Débriefings quotidiens et réunion de planification.
6. Push sur repos.
Mardi et Mercredi
Correction du bug de recherche
Contrairement à tous les bugs que j’ai pu coder jusqu’à présent, je n’avais ici véritablement aucune idée de quel problème de code il s’agissait. La recherche était tellement improbable que je ne savais pas par quoi commencer.
Je suis repartie alors pas à pas en listant et analysant pour dénouer le problème.
J’ai finalement trouvé comment tout régler après de nombreux essais. La recherche se faisait désormais parfaitement.
Slider
J’ai continué en recherchant comment faire slider les cards de la section ‘Trending’. La fin de la journée arrivait petit à petit.
Jeudi
Réunion
J’ai expliqué que j’avais réglé mes bugs de la veille et qu’il me restait quelques éléments à finaliser.
Slider
Pour réaliser le mouvement du slider, j’ai analysé de nombreux codepen pour comprendre comment cela pouvait se mettre en place. Cependant, aucuns n’étaient compatibles avec le projet. J’ai fait plusieurs tests toute la journée mais rien n’était concluant. Certaines parties du code fonctionnaient mais le tout ne se jouait pas.
La journée s’est terminée avec de la motivation et une envie de réussir.
Vendredi et Lundi
Réunion
J’ai expliqué que j’avançais bien dans le projet.
Recherche de slider
J’ai trouvé un codepen qui fonctionnait beaucoup mieux que les précédents.
Mon code n’était toujours pas entièrement compatible donc j’ai dû effacer la quasi totalité du modèle. J’avais analysé plusieurs sliders et la logique était souvent similaire donc je me suis mise à réfléchir par moi-même et créer mon propre code sur base du modèle. J’ai fini par trouver une équation correcte. Il ne restait alors plus qu’à poser des limites à gauche et à droite pour ne pas swiper à l’infini.
Si j’ai réussi assez facilement pour stopper la gauche, la droite me paraissait plus compliquée à mettre en place. J’ai alors écrit calmement pour trouver une solution.
Interactions
J’ai continué en ajoutant les états hover/active.
Dixième semaine
Mardi
Finitions du projet
Il ne me restait plus qu’à mettre un état hover sur les bookmarks, sur les cards, séparer films et séries sur la page ‘Bookmarks’ et vérifier la recherche post-séparation sur cette page.
Interaction bookmarks
Interaction cards
Après de nombreux tests, j’ai enfin réussi.
Bookmarked movies / TV series et recherche
Dernier petit bug
J’ai réussi à séparer films de séries et à faire fonctionner la recherche mais cela a créé un bug : quand on souhaite cliquer sur des bookmarks pour les décocher, elles restent cochées si elles font partie de la catégorie ‘Trending’. Cela se produit sur cette page uniquement, les autres fonctionnent parfaitement. J’ai alors corrigé ce bug.
La journée s’est ensuite clôturée.
Mercredi
La veille, j’avais fini de réaliser le site web entièrement comme il fallait. Cependant, le code n’était pas toujours optimisé et cela pour plusieurs raisons : je n’avais jamais codé de slider qui se déplace au slide avec la souris, de cards avec des designs/propriétés différents (‘Trending’ VS ‘Recommended’ VS bookmarked), de bookmarks et de cards liées entre elles.
Je ne voulais pas rendre un code qui ne me semblerait pas assez optimisé alors j’ai décidé d’essayer de l’examiner et le corriger si j’en ai les capacités.
Réunion
J’ai expliqué que je souhaitais essayer d’optimiser mon code.
Optimisation
J’ai commencé et je me suis sentie petit à petit plus à l’aise avec React. Avec un code non-optimisé et expérimental, je ne me sentais pas à l’aise de présenter un tel projet. Mais maintenant qu’il est correct selon moi, je me sens mieux car j’ai appris de mes erreurs et qu’il est plus facile à comprendre.
Jeudi
Réunion de planification
Durant la réunion de planification, j’ai présenté le visuel de mon projet devant tout le monde. J’ai expliqué toutes ses pages et fonctionnalités. J’ai indiqué que j’avais optimisé le code.
D’autres collègues avaient également fini ce qu’ils avaient à faire. Le chef de projet nous a informé qu’il avait plusieurs réunions et qu’il nous tiendrait au courant le plus tôt de la suite.
Optimisation du premier projet
En attendant, j’en ai profité pour reprendre le premier projet que j’ai réalisé et pour l’améliorer. Je souhaitais faire ça depuis un petit temps déjà pour voir ma progression. Le projet a déjà été envoyé donc ces changements ne seront pas utilisés mais je tenais tout de même à optimiser ce code pour moi.
Tout au long de la journée, j’ai inspecté tout le code attentivement. J’ai pu alors résoudre quelques problèmes que j’avais connu auparavant :
- La manière dont j’avais codé l’interface me forçait à utiliser constamment des min/max-width/height. Avec plus de recul, j’ai su corriger cela en simples width/height.
- J’ai remplacé les class React n’utilisant pas de state par des fonctions React pour une meilleure lisibilité.
- J’ai mieux compris les imports des fichiers de Create React App et ai supprimé ceux qui sont superflus.
- Comme pour mon dernier projet, j’ai remplacé la flexbox des cards par une grid.
- J’ai amélioré l’HTML en remplaçant les balises div par des Fragment React pour éviter trop d’imbrication et j’ai revu l’indentation de certaines lignes trop longues.
- J’ai supprimé le code qui se répétait, les commentaires, les lignes obsolètes.
- etc.
La journée s’est ensuite tout doucement terminée.
Vendredi
Réunion
Maintenant que le site est codé, il faut créer l’API qui contiendra ultérieurement les données correctes et la lier au code.
Présentations entre collègues
Depuis ce mois-ci, les employés de la cellule doivent préparer une présentation sur un sujet libre : une actualité, un retour de veille, un service, un framework, etc. Ces présentations se déroulent individuellement, une personne une fois toutes les deux semaines. Ces ateliers viennent de démarrer alors que mon stage se termine bientôt donc je n’aurai pas le temps de montrer quelque chose. J’ai cependant écouté attentivement la personne qui animait aujourd’hui. Elle a présenté un gestionnaire d’API qu’elle et d’autres développeurs de la section ont utilisé pour leur projet actuel. Elle en a listé les points positifs/négatifs, les cas d’utilisations, a expliqué sa documentation et a regardé à son utilisation à long terme pour des projets de grande ampleur. Tout le monde a réagi, posé ses questions et débattu sur le gestionnaire en question. J’ai écouté avec attention pour les comprendre tandis qu’ils échangeaient. Cette présentation était remplie de nouvelles infos et m’a permis de suivre les choix de la cellule concernant l’utilisation future de ce gestionnaire.
Revenir sur Strapi
Pour le premier projet, la structure de base de l’API était déjà créée. Ici, je devrai faire cela par moi-même pour m’entrainer.
Content Types Builder
J’ai commencé par créer un onglet qui regroupera les Content Types Builder puis j’ai continué en ajoutant ces derniers.
Fetch d’API
J’ai ensuite créé un faux élément d’API pour tester de la récupérer dans le projet.
J’ai su fetch l’API et afficher correctement le rendu.
La journée s’est ensuite finie.
Rétrospective des deux semaines
Durant ces deux semaines, j’ai revu la différence d’utilisation entre les grids et les flexs pour ne pas reproduire la même erreur que dans le premier projet. J’ai réalisé le responsive du site. J’ai réfléchi aux différences d’utilisation entre les paramètres d’url et les paths de router. J’ai mis en place en multipages.
J’ai pu push mon premier projet sur Github afin qu’il soit utilisé par la cellule. J’ai alors pu participé à un cycle de création de projet : idée, design, création du code, retours, repos.
J’ai ensuite longtemps cherché pour régler des bugs comme le bug de recherche. J’ai analysé de nombreux codepen et ai compté sur mes capacités en JS pour créer un slider correct. J’ai ajouté les états hover-active-checked. J’ai lié les bookmarks pour qu’ils se (dé)cochent comme il faut.
J’ai optimisé tout le site web pour qu’il soit plus lisible et compréhensible et j’ai fait de même pour le premier projet afin de m’améliorer.
Une journée, un collègue a présenté un gestionnaire d’API qu’il utilisait et nous avons tous débattu et discuté pour voir ses points positifs/négatifs et son utilisation future dans la cellule.
J’ai fini par créer une API sur Strapi et la lier au projet.
Cette semaine aura donc été très variée : CSS, responsive, paramètres/Router, Github, JS, analyses/recherches, optimisation, présentation/débat, Strapi/fetch, etc. J’aurai pu revoir de nombreuses notions et m’améliorer grâce aux analyses, recherches, corrections de bugs et optimisation. J’ai hâte de continuer à développer de nouveaux algorithmes et d’apprendre à avoir un code bien optimisé.
