Hannah Mathot — Rapport de stage n°4
--
HEAJ DWT 2022–2023 B3G1–26/12/2022–8/1/2023
Entreprise :
Poste :
Développeur Web Frontend (Stagiaire)
Septième semaine
Fermeture de l’entreprise
En cette fin d’année, l’entreprise a été fermée toute la semaine du 26 décembre 2022. Les employés étaient alors en congé. Chaque année, en décembre, la société est fermée au minimum du jour de Noël au Nouvel An inclus.
Repos, entrainement et recherches
Pendant cette semaine, je n’ai pas totalement arrêté mes activités : en plus de me reposer, j’ai continué à m’entrainer en code et j’en ai profité pour avancer sur mon travail de fin d’études en recherchant des sujets (chose que je fais depuis plusieurs semaines déjà).
Huitième semaine
Lundi
Réunion
Après une semaine de vacances, nous nous sommes réunis pour souhaiter nos meilleurs vœux et pour parler du programme de la journée de chacun. L’ambiance post-fêtes est agréable et je suis contente de revoir tout le monde. Pour ma part, j’ai expliqué que j’ai eu fini la formation sur Redux durant la sixième semaine.
On m’a annoncé que j’allais être lancée sur un nouveau projet mardi.
Challenges
J’ai alors profité de la journée qu’on m’offrait pour entrainer mon Javascript et me challenger en codant des algorithmes nouveaux.
Challenge 1 : Fetch d’API et changement de police au clic
J’ai commencé par un exercice de police variable.
Mise en place
J’ai récupéré l’API de Google Fonts. Cela m’a permis d’utiliser les fetchs asyncrones que je venais de découvrir durant mon stage. Après avoir listé le nom de toutes les fonts, j’ai fait en sorte de donner comme police celle cliquée.
Utilisations futures
Avec un CSS correct, je pourrai alors dans le futur créer un drop-down menu de polices. Cette fonctionnalité est très intéressante, c’est pourquoi j’ai voulu m’entrainer à coder cela.
Challenge 2 : Card 3D
Cet exercice est en soi simple mais je n’avais jamais encore abordé la 3D en CSS. J’ai alors essayé de coder une card qui se retourne avec une rotation 3D.
Challenge 3 : Parallax au scroll
Des parallax, j’en ai déjà réalisé plusieurs lorsqu’il s’agit d’une simple image qui reste fixe.
Ici, j’ai été inspirée par un beau parallax de Codepen. J’ai alors essayé de le reproduire.
Mise en place
Le principe d’un parallax plus complexe repose sur des superpositions d’images qu’on va faire bouger à des intervalles différents pour donner un dynamisme à la composition.
Après avoir agencé les images de l’interface, j’ai utilisé les packages GSAP et son outil Scrolltrigger vus à l’école.
Ils auront permis l’animation des images au scroll. Plutôt que de donner une durée spécifique à l’animation, je l’ai laissée se jouer selon le scroll de l’utilisateur.
Fin de la journée
Je souhaitais continuer à me challenger mais la journée s’est finie.
Mardi
Projets possibles
Parmi la liste de projets de cellule en cours, certains sont de simples sites web en HTML/CSS. Selon le chef de projet, ils ne seraient pas très challengeants si je souhaite entrainer mes capacités. Une autre interface de la liste se prête elle bien à mes compétences actuelles.
Contexte du projet
Lorsque de nouveaux employés arrivent dans l’entreprise, ils doivent être formés. Afin de faciliter cela et de ne pas disperser les informations, il faudra créer une interface interne qui centralisera les formations.
Technologies et langages
Le site sera codé en HTML/CSS, React.JS et en utilisant Strapi. Une maquette Figma sera fournie pour le design. Les données seront d’abord fausses puis seront remplacées par les vraies.
Réalisation du projet
Analyse de la maquette Figma
Le fichier comportant 2 fois plus d’écrans que pour les précédents projets, j’ai bien pris le temps d’y regarder et de tout inspecter.
Merge React App et dossier fourni
Une fois fini, j’ai créé un dossier Create React App pour coder en React.JS et l’ai mergé avec le dossier de travail fourni par l’entreprise.
Reprise du UI-Kit et découvertes
J’ai ensuite parcouru l’UI-kit du Figma pour lister ses valeurs dans le CSS. Alors que je regardais au Figma, j’ai pu découvrir certaines astuces pratiques pour créer une maquette, telles que nommer les couleurs ou les hiérarchies de texte pour pouvoir mieux s’y retrouver. Cette découverte est très intéressante.
Version mobile
Après cette séquence de préparation, j’ai débuté la version mobile du projet.
Tailwind.CSS
Pour avoir plus facile à coder, j’ai installé Tailwind.CSS.
Menu
Ensuite, j’ai codé la barre de navigation.
Petites difficultés
Alors que je recherchais à redimensionner les icones, j’ai remarqué que Tailwind possédait bel et bien des valeurs de max-height/max-width contrairement à ce que je pensais.
Après plusieurs essais, j’ai enfin réussi à redimensionner les svg. Alors que je souhaitais faire pareil pour l’avatar, je me suis rendue compte que Tailwind ne marchait pas. J’ai recherché très longtemps pour savoir régler ce problème. Une fois fait, j’étais motivée à continuer sur de bonnes bases.
Finalisation du menu
J’ai finalisé le menu.
Barre de recherche
J’ai poursuivi le code de la page avec le design de la barre de recherche.
Fin de la journée
A la fin de la journée, j’avais bien avancé dans la construction de la structure de base de la page. J’avais envie de continuer mais la journée touchait à sa fin.
Mercredi
Réunion
A la réunion, mes collègues ont parlé de leur avancée et ont débattu longtemps. J’ai pu comprendre dans la conversation qu’un d’eux se renseignait sur les mises à jour des langages de programmation utilisés par la cellule et les testait pour voir ce que ces améliorations apportaient. Cela montre que les développeurs de l’entreprise se renseignent régulièrement des avancées dans le monde du web. Je trouve cela intéressant !
Pour ma part, j’ai expliqué que j’avais été lancée sur un nouveau projet la veille et que tout se passait bien pour le moment.
Accueil en mobile
Récupération de l’input
J’ai commencé en récupérant la valeur du champ de texte avec React.
Récupération de l’API
J’ai ensuite récupéré la base de données placeholder avec un fetch. Cela m’a pris plus de temps car j’avais codé mon composant avec une class et non une fonction. Mes précédents fetch de JSON en React ayant été réalisés avec des fonctions, je n’avais pas encore testé avec des class. Mais j’ai finalement réussi à y parvenir après plusieurs tentatives.
Barre de recherche
J’ai mis en marche la barre de recherche.
J’ai listé les films selon s’ils sont en tendance ou sont recommandés et vérifié que la recherche se fait bien. Ces keys ‘Trending’ et ‘Recommended’ seront évidemment remplacées par des termes propres à l’entreprise lorsque j’aurai l’API correcte.
Fin de la journée
Cards et design
J’ai terminé ma journée en ajoutant un visuel aux cards et en les ajustant en 2 colonnes.
Jeudi
Continuation de l’accueil en mobile
Design des cards
J’ai débuté la journée en finalisant le design des cards de la partie ‘Recommended’.
Puis, celles de la section ‘Trending’.
React Router
Ensuite, j’ai installé React Router dans le dossier de travail.
Interface de recherche
Ensuite, j’ai créé le design correct de l’interface de recherche.
Recherche de mise en place de bookmarks
J’ai ensuite fait de nombreux essais pour mettre en place les favoris (bookmarks) mais rien ne marchait. Voyant que je n’arrivais pas à régler ce problème, je l’ai laissé de côté et suis passée à autre chose.
Etats hover du menu
J’ai ajouté les états hover sur les liens du menu.
Continuation de la recherche
J’ai su trouver un début de piste concernant les bookmarks. Je devrai cependant les sauvegarder pour ne pas que la sélection de l’utilisateur se perde.
Fin de la journée
Après avoir continué à faire de nombreuses recherches, la journée s’est terminée.
Vendredi
Réunion
J’ai expliqué que j’avais bien avancé sur le projet.
Suite du projet
Reprise de la recherche du début
La veille, j’avais eu des difficultés à rechercher la mise en place des bookmarks. J’ai alors utilisé la méthode conseillée lorsqu’on bloque sur la construction d’un code : écrire et expliquer étape par étape comment on pourrait arriver au résultat voulu. Je me suis donc mise à écrire et réfléchir.
Cocher une bookmark
J’ai recommencé mon code pour les bookmarks depuis le début.
Pour un seul film, j’ai réussi à avoir un début de piste mais cela bugge lorsque je sélectionnais 2 films. Je ne comprenais pas d’où venait ce problème mais j’ai continué et ai cherché à le régler.
Cocher plusieurs bookmarks
Finalement, j’ai su régler cela facilement. C’était la première fois que je réalisais un système de favoris. J’étais tellement heureuse d’y être arrivée ! Cet algorithme sera très utile pour mes futurs projets.
Il ne restait plus qu’à garder les bookmarks en mémoire et les afficher comme étant cochés lors de l’arrivée sur le site.
Garder en mémoire et liaison des sections
Une fois fait pour la partie ‘Recommended’, j’ai fait pareil pour celle nommée ‘Trending’ et j’ai vérifié que les deux sections soient bien liées.
Réunion de planification
Depuis le début de mon stage, je participe aux réunions quotidiennes qui consistent en des feedbacks d’avancée, de problèmes, et questions, etc. Ce vendredi, j’ai également participé à une réunion de planification. Celle-ci était plus longue et plus sérieuse.
La cellule utilise une plateforme de planification pour archiver les retours de la réunion. Dessus, on a parcouru clairement tous les projets de l’équipe. Pour chaque réalisation, on a défini les étapes de projet qui sont terminées, celles qu’il faut commencer, leurs deadlines, les personnes qui s’en occupent selon leur poste et expérience, les projets en début de production, ceux qui sont clôturés et doivent être déposés sur un repos propre à la plateforme de planification, etc.
Concernant le premier projet que j’ai fait, on m’a demandé de le rendre disponible sur le repos dès que j’en aurai les accès.
Fin de la journée
Ma journée s’est alors terminée après avoir finalisé les bookmarks. Les accès du repos n’étant pas encore disponibles, je l’ai signalé au chef de projet. Je réaliserai donc cette demande la semaine prochaine. Celle-ci se concentrera sur le responsive du site web que je code actuellement et créer les 3 autres pages. Je suis impatiente de continuer !
Rétrospective des deux semaines
L’entreprise était fermée la première semaine, cela m’aura permis de me reposer mais aussi de travailler mon JS et de faire des recherches pour mon TFE.
Le lundi de la deuxième semaine, j’ai développé du code pratique que j’ai toujours voulu réaliser et qui sera intéressant à utiliser dans le futur. J’ai amélioré mon JS, CSS et je me suis entrainée à utiliser ScrollTrigger, package appris à l’école.
Dès mardi, j’ai été lancée sur un troisième projet challengeant mes compétences : une interface interne qui centralise les formations des nouveaux agents de l’entreprise. Petit à petit, j’ai codé la page d’accueil en mobile. Quand je faisais des erreurs, j’y regardais, les corrigeais et apprenais de nouvelles choses. Barre de recherche, cards, React Router, …, j’ai revu tout ce que j’ai appris depuis le début de mon stage. Les principales nouveautés dans ce projet pour le moment sont de créer une catégorie ‘Trending’, une ‘Recommended’ et d’y afficher des contenus différents, d’avoir un code optimisé et de créer un système de favoris (bookmarks). N’ayant jamais réalisé ce dernier auparavant, il s’agit là de la partie que je préfère dans le site. Cela m’aura fait revoir le localStorage et les états React. J’ai aussi appris à réfléchir calmement lorsqu’un code est trop compliqué et à trouver une solution pas à pas.
J’ai pu également apprendre que la cellule se renseigne régulièrement des avancées dans le monde du web.
Enfin, j’ai participé à une réunion de planification où chaque projet a été traité (lancement en production, finalisation/repos, étapes à faire/finies, etc). Je devrai faire ma part la semaine prochaine. J’ai trouvé cette réunion très intéressante au niveau de la gestion d’équipe et de projets.
Rétrospective au début de ce dernier mois.
Le dernier mois de stage débutant, je souhaitais faire un bilan général, également pour y ajouter les notions que j’ai oublié de mentionner dans les rapports de stage précédents, afin d’être la plus complète possible.
Entreprise
L’entreprise dans laquelle se déroule mes stages, la SWCS, à pour but d’ aider à financer des logements (achat, construction ou rénovation) en Wallonie. Elle comprend plusieurs cellules donc une section web.
Alentours
Le bâtiment se trouve à proximité de la rue marchande où se trouve notamment le Rive Gauche de Charleroi. La rue est animée et remplie de monde car il y a un arrêt de bus et de tram juste devant le bâtiment.
Horaires
Les locaux sont accessibles de 7h à 18h30. Chaque employé sous contrat doit indiquer ses heures d’arrivées et de départ pour que cela corresponde à 7h30 de présence dans l’enceinte + 30 minutes de pause. Pour ma part, j’arrive vers 8h10 ou 8h50 selon les jours. Je dine dans la salle de travail. Je repars vers 16h10.
Cellule web
Rôles
La cellule web a 2 rôles.
Le premier est interne : ils mettent à disposition des projets web de taille conséquente pour les employés de l’entreprise.
Le deuxième rôle se tourne vers le client citoyen en externe et se limite aux sites webs. Que ce soit en interne ou en externe, ils essaient d’avoir les projets les plus faciles à comprendre.
Employés
La cellule comporte : une dizaine d’employés à rôles différents (Front-End, Back-End, analyste, consultant), un chef de projet qui s’occupe également des stagiaires, 2 stagiaires d’IFAPME et moi.
Avec le temps, j’ai appris leurs noms/visages/voix, à les différencier et à connaitre un peu leurs réactions. Ils sont tous bienveillants.
Relation avec les clients
La section web communique avec les clients via la cellule de communication.
Relation avec les autres cellules
Elle travaille en collaboration avec la cellule sécurité et opérationnelle de la direction informatique mais également avec d’autres pour résoudre les demandes d’intervention technique ou logicielle.
Conditions de travail dans la cellule web
Salle de travail
Chacun travaille dans la même pièce dans une atmosphère agréable. Elle se trouve au dernier étage. Il s’agit d’une salle informatique comprenant une quinzaine d’écrans et une dizaine de tables collées ensemble. La pièce est lumineuse et chauffée. Je travaille avec un ordinateur prêté par la société.
Présence à l’agence
Au niveau de la présence en entreprise, certains sont en distanciel, d’autres en présentiel selon les jours. Ils ont également quelques formations organisées par l’entreprise qui les empêchent d’être là certains jours. Pour ma part, je preste en présentiel la plupart du temps.
Projets de cellule
Chaque collègue a une part de travail à réaliser selon son poste parmi plusieurs projets de la cellule. En plus de leurs projets, les employés se renseignent régulièrement sur les avancées dans le domaine du web.
Réunions
On discute tous ensemble des avancées de chacun et pose nos questions lors de réunions presque quotidiennes. Il y a également une réunion hebdomadaire générale avec des membres d’autres cellules et une réunion de planification plus longue qui retrace les différents projets, archive les étapes de production, les assigne aux employés qui ont le poste et l’expérience adéquats, indique quels projets sont à lancer, à clôturer, etc.
Ma formation personnelle
Pour ma part, comme chaque stagiaire et nouvel agent de la cellule, j’ai commencé par des formations pour accroitre mes connaissances et utiliser les technologies utilisées dans la section (Tailwind.CSS, JS, React.JS, Redux, etc).
J’ai réalisé jusqu’ici 2 projets, une API et je suis en train de produire un 3ème site web. J’ai réalisé chaque site web sans intervenant car le design avait déjà été mis en place dans Figma préalablement. Cependant, j’ai demandé de l’aide lors de la création d’API à mes collègues pour regarder à mes questions et bugs. Chaque projet sera concrètement utilisé : le premier pour les clients et nouveaux agents, le deuxième par la cellule et le troisième également pour les nouveaux agents.
Comportement
Au quotidien, je suis concentrée et calme. Je pose toutes mes questions dès que j’en ai et on communique aisément avec les autres employés car l’ambiance est agréable.
Connaissances anciennes et nouvelles
En stage : nouvelles notions et application
Tout au long de ces 8 semaines, j’ai appris énormément de nouvelles notions : Tailwind.CSS, React.JS, Strapi et Redux. J’ai développé des fonctionnalités qui me tiennent à coeur telles qu’une barre de recherche, des filtres, un router, un timer ou encore un système de favoris.
Acquis : précédents cours et projets
J’ai également approfondi des notions déjà vues en classe : JS, Router, Programmation Objet, Fetch/API, Data/Objects, méthode GET et GSAP/ScrollTrigger. Les projets réalisés en classe m’auront aidé lors de cet apprentissage, notamment mon TFA de 2021–2022 grâce auquel j’aurai développé mes connaissances en JS, mais également mon examen de Vue.JS qui m’aura aidé à mieux comprendre les fetchs, composants et les objects. Les cours de Vue Router et de CMS Wordpress m’auront également aidé pour respectivement comprendre React Router et Strapi.
Grâce aux cours à l’école, aux formations et projets de stage, j’ai pu découvrir plein de nouvelles notions très intéressantes que j’utiliserai à l’avenir !
Monde du travail
Même si je ne travaille pas encore réellement, venir en stage en entreprise m’aide déjà à avoir un aperçu d’une vie professionnelle. Travailler 8h/5 jours par semaine, avoir des réunions professionnelles en équipe, etc.
Apprendre à séparer le travail de la maison
Les premières semaines, je travaillais beaucoup. Je travaillais également en dehors des heures de bureau pour avancer davantage sur mes formations car je n’arrivais pas à me dire que le travail ne se passait que durant les 8 heures de bureau. Je me levais à 6 h et me couchais à minuit. Beaucoup de personnes m’ont alors expliqué que, pour avoir un quotidien sain, il fallait s’accorder des pauses et arrêter après les 8 heures de prestation. J’ai eu beaucoup de mal mais j’essaie actuellement de lâcher prise même si ce n’est pas évident de se dire qu’il faut arrêter de travailler. J’ai alors pris ce temps pour avancer sur mes examens et TFE.
Réflexions
Je me suis alors interrogée à savoir comment les adultes dans le monde du travail faisaient pour gérer leur travail ET leur vie privée. Cela semble très difficile. Cette expérience en entreprise me fait donc beaucoup réfléchir sur mon propre futur et sur le quotidien des gens autour de moi.
Avis plus positif
J’ai également un avis plus positif vis-à-vis des entreprises. Celle dans laquelle je travaille est agréable, les personnes sont gentilles. Le bâtiment est bien placé et la routine quotidienne est vivable. Je pensais qu’entreprise rimait automatiquement avec pression et sévérité mais j’ai pu y découvrir une facette plus accueillante et humaine.
J’ai encore beaucoup de choses à assimiler et d’introspections à réaliser mais cette expérience professionnelle m’aide beaucoup à avoir un aperçu de la réalité du métier/travail.
Conclusion
En résumé, après ces 8 semaines, j’ai pu avoir un aperçu du monde du travail, avoir une routine quotidienne, avoir un avis neuf sur les entreprises en général, apprendre beaucoup de nouvelles notions et utiliser mes connaissances dans de vrais projets d’entreprise. J’ai hâte de voir ce que me réserve la suite !
