Dec 11, 2022
Hannah Mathot — Rapport de stage n°2
HEAJ DWT 2022–2023 B3G1–28/11/2022–11/12/2022
Entreprise :
Poste :
Développeur Web Frontend (Stagiaire)
Troisième semaine :
Lundi :
Ce début de semaine, j’ai pu commencer à réaliser un premier projet.
Premier projet :
Consignes
Intégrer le design d’une maquette Figma fournie par la cellule pour mobile, tablette, ordinateur ainsi qu’en mode jour/nuit. Les langages à utiliser sont HTML, CSS/SASS, React.JS et Tailwind.CSS.
Ce projet est à faire seule.
Ce site web a pour but de montrer aux clients les logiciels et applicatifs de l’entreprise. Pour ma part, je dois le coder à partir d’une base de données fictives, les données réelles seront fournies postérieurement par un responsable back-end de la cellule.
Importation des valeurs
J’ai commencé par retranscrire les valeurs de l’UI-kit en Tailwind (couleurs, typo, taille de police, taille d’interlignage).
Je ne savais pas qu’on pouvait utiliser ses propres valeurs avec Tailwind. Cela me donne encore plus envie de l’utiliser pour des projets futurs car ça le rend plus intéressant !
Page d’accueil sur mobile
Header
Je me mets ensuite à coder l’accueil en HTML, React.JS et Tailwind.
Un premier problème me complique directement la situation : les flexbox. Dès que j’en mets une, les valeurs de tailles de tous les éléments buggent.
Malgré le fait que j’ai mis des tailles pour chaque élément, le problème persiste. Finalement, j’ai su régler cela avec des tailles maximales et minimales.
Cela n’aurait pas été un problème avec du CSS simple mais Tailwind, quant à lui, n’a pas de valeurs définies pour les tailles max et min. Je devais alors systématiquement importer une taille et cela était une perte de temps, ce qui m’a assez ralentie.
Un deuxième problème d’agencement aura été au niveau de la taille du champ de texte. Il continue de garder sa hauteur par défaut malgré le fait que je lui assigne des hauteurs.
J’ai su régler cela en l’englobant dans un container.
Récupération de la base de données
Après avoir finalisé le header, j’ai récupéré les données de la base fournie. J’arrive de mieux en mieux à gérer le concept de fetch et de JSON.
Mardi matin :
Utilisation et mise en page des données
J’ai commencé ma journée en essayant d’ afficher les données de la base sous forme de card.
Puis, j’ai recherché comment mettre un arrière-plan coloré variable pour les logos de chaque card selon ce que la base de données me fournissait.
J’ai alors découvert comment avoir un CSS variable grâce aux doubles accolades.
Finalisation de la version mobile
Vers midi, j’ai eu enfin fini de coder le design de base de la page d’accueil en mobile.
Mardi après-midi :
Barre de recherche
J’ai mis en place le système de recherche en utilisant la barre.
Dark Mode
J’ai ensuite codé le dark mode et l’ai rendu persistant. J’ai pu en apprendre davantage sur la mise en place de dark mode avec Tailwind : il suffit juste d’ajouter une class ‘dark’ sur la balise ‘html’ du fichier index.html, dans le tailwind-config.JS (fichier où l’on peut importer nos propres valeurs pour Tailwind) et on peut ensuite paramétrer les thèmes qu’on souhaite très facilement. J’ai trouvé cela très simple et pratique.
Page d’accueil sur tablette
J’ai poursuivi par le responsive sur tablette. Je me suis rendue compte à quel point avoir une bonne maquette Figma était important pour coder plus facilement un design.
Après avoir revu tout ce que j’ai codé aujourd’hui, j’étais contente de mes progrès et d’avoir appris de nouvelles choses.
J’ai fini ma journée en modifiant la barre de recherche sur tablette.
Mercredi
La journée a débuté par une réunion de cellule. Chacun a parlé de ce qu’il a fait. Je leur ai fait part de mes avancées concernant le projet donné.
Après avoir fait la version mobile et tablette + le dark mode ces deux derniers jours, j’ai poursuivi mon avancée.
Page d’accueil sur ordinateur
Je réalise la version desktop.
Interactions
J’ai ajouté les états d’hover et ai recalibré le design général (background-position, couleurs de police, cursor, etc)
Les 3 filtres
J’ai poursuivi par la mise en place du système de recherche (title, location, checkbox). J’ai eu beaucoup de mal. Après de nombreuses heures de recherches sans résultat, c’était déjà la fin de la journée.
Jeudi :
J’ai débuté ma journée en continuant ma recherche de la veille. J’ai fini par y arriver grâce aux propriétés React.
Page des détails
Je me suis mise à réfléchir à l’affichage de la page des détails. J’ai très longtemps recherché en utilisant les paramètres GET ou en me documentant sur React Router mais je ne réussis rien de concluant.
Vendredi :
De CDN à NPM
Pendant plusieurs heures, j’ai transvasé tout le contenu de mon dossier de travail dans un dossier ‘Create React App’ vierge utilisant Tailwind, tous les deux étant compilés avec npm. Je l’ai seulement fait maintenant car je n’avais pas les accès d’administrateur pour pouvoir installer Node.JS sur mon ordinateur d’entreprise. J’ai donc utilisé des CDN jusqu’à ce que l’administration de l’entreprise vienne me donner l’accès. J’étais extrêmement fière d’avoir réussi à transvaser mon dossier de base dans le nouveau. Vu que le premier contenait pas mal de code, j’aurais pu rencontrer des bugs ou complications mais tout s’est bien passé.
Naviguer entre les pages
Après plusieurs heures, j’ai réussi à mettre en place un router React qui navigue entre des pages sans chargement grâce à sa construction en ‘Single Page’. J’adore ce concept et je compte le réutiliser de nombreuses fois pour mes futurs projets.
Après avoir réussi à afficher un contenu variable selon la card cliquée, je me mets à coder petit à petit la page des détails.
Quatrième semaine :
Lundi
Me sentant bien évoluer, j’ai commencé cette 4ème semaine avec de la motivation !
Nouveaux stagiaires
La cellule a accueilli deux nouveaux stagiaires de l’IFAPME. Notre équipe est passée de 10 à 12 devs sans compter le chef de projet. N’étant plus la seule stagiaire désormais, ça m’a fait plaisir d’aiguiller les nouveaux arrivants en leur donnant des conseils, notamment sur les problèmes que j’ai rencontré en tant que stagiaire au début de mon stage (comment se connecter au wifi, quel programme demande des autorisations d’administrateur, etc)
Réunion
Un par un, les devs ont présenté leurs projets devant tout le monde, expliqué leurs avancées/problèmes et ceux qui voulaient pouvaient y réagir. Ils ont ensuite réalisé leur horaire partagé. J’y ai présenté avec précision mes avancées.
Page des détails
Pendant toute la journée, j’ai réalisé toute la page des détails (mobile, tablette, desktop, interactions au clic, dark mode). Cela a été plus rapide que la première page car je maitrise mieux le projet.
Mardi
On commence le matin par une réunion de cellule pour expliquer notre avancée.
Eléments à finir
Pour le projet, il ne me restait plus que le bouton ‘Load’ à mettre en place, le bouton de filtre sur mobile et celui de recherche. Ne sachant pas comment j’allais pouvoir y parvenir, je me suis lancée d’abord seule et gardais en tête que je pourrais demander de l’aide à mes collègues si besoin.
Problème d’affichage
J’ai d’abord commencé par régler un problème d’affichage et un problème au clic de bouton.
Bouton de chargement
J’ai ensuite ajouté la fonctionnalité de chargement.
Retours
Le chef de projet est passé voir mon avancée en profondeur. Je lui ai montré la page d’accueil, la page des détails, le dark mode, le responsive, les filtres et le load. Il a été satisfait de ce que j’ai produit et m’a félicitée pour mon avancée. Il a ajouté que mon niveau correspondait à ce qui est attendu d’un nouvel arrivant en entreprise. Cela m’a rassuré.
Il m’a dit que le bouton de recherche pouvait être retiré car la recherche se fait directement lorsque l’utilisateur écrit dans le champ de texte et cela est suffisant. Je l’ai donc enlevé ainsi que le bouton de filtre en mobile et ai harmonisé les différentes dimensions.
Pour finir, le bouton Load marchait bien. Cependant, lorsqu’on faisait une recherche par filtres, seulement les éléments visibles étaient filtrés. (ex: s’il y a 12 éléments visibles et 12 cachés par le bouton Load, seulement les 12 visibles étaient triés et pas ceux cachés). Comme ce bouton n’avait pas beaucoup d’utilité, le chef de projet m’a également dit de le supprimer.
Projet finalisé
Après ces derniers changements, j’avais enfin fini le projet.
Ce site que j’ai codé sera envoyé à un responsable back-end qui se chargera de fournir les véritables données de l’entreprise. Enfin, le site sera disponible pour les clients.
C’est donc avec une certaine fierté et des remarques positives que se conclut ce premier projet à destination de clients.
Deuxième mini-projet
Comme deuxième atelier, mon travail est de teaser la future application mobile de l’entreprise en réalisant un timer de maintenant jusqu’au jour J du lancement.
Recherches
En plus de m’entrainer à manipuler les date() en JS, je commence à faire des recherches en React.
Mercredi
Réunion
Nous commençons par une réunion de cellule. Les employés qui ne les avaient pas encore vus en profitent pour faire connaissance avec les nouveaux stagiaires. Chacun parle de son avancée.
Recherches sans résultat
J’ai continué ma recherche de la veille pour réaliser la page de timer. Je souhaitais vraiment m’y appliquer et la rendre flexible.
Après avoir essayé d’utiliser des objets créés manuellement et plusieurs if, ceux-ci ne sont pas efficaces. Je décide donc de continuer à rechercher de fond en comble.
J’ai fait des tests avec des objets, des states react, mon envie de faire plus que demandé n’aboutit pas. Je décide alors de réaliser simplement le projet comme demandé et de rechercher comment faire un timer flexible ultérieurement.
Ma journée se clôturera après un jour complet de recherches peu fructueuses.
Jeudi
Après une journée et demie de tests sans résultats concluants, j’arrive dans la salle de la cellule motivée et prête à réussir le timer sous une forme simple pour commencer.
Formule efficace
Après plusieurs heures de recherche, j’ai enfin réussi à trouver une formule de calcul efficace. Par la suite, je l’ai finalisée et vérifiée avec toutes les possibilités existantes. Après avoir fini de coder le timer comme il fallait, j’ai continué en ajoutant un peu de CSS en attendant d’avoir accès aux vraies valeurs de style.
Petites corrections
Je repasse en vue le projet timer pour être sûre que tout va bien. Je remarque alors que, dans le browser, à la troisième ligne, les secondes gardaient leur “s” à la fin, même s’il n’en restait qu’une seule. J’ai alors changé cela en code en omettant les “s” pour 1 et 0 secondes. J’ai appliqué ce changement également pour les jours, heures et minutes.
Ensuite, j’ai stoppé le timer quand il arrive à 0.
Ayant enfin trouvé une équation correcte, j’ai tenté de coder un timer plus flexible le reste de la journée mais cela n’a pas aboutit.
Vendredi
Ayant eu accès au Figma du projet, j’ai commencé à coder le véritable style de la page. J’ai débuté en mergeant mon fichier de travail avec celui fourni par l’entreprise.
J’ai ensuite commencé à retranscrire le style en desktop jusque midi.
Après la pause, j’ai eu fini de coder la version mobile.
J’ai envoyé mon avancée au chef de projets sur Slack car il était en distanciel ce jour-là. Le reste de la journée, en attendant ses retours d’ici fin de semaine/lundi, je refais des exercices en React.JS et en utilisant des objets. J’essaie de revoir un peu le concept de propriétés pour lesquelles j’ai plus de mal.
Rétrospective des 2 semaines :
Durant ces deux semaines, j’ai pu coder un projet de 2 pages responsives en React, Tailwind et React Router et une page responsive plus mathématique également en React et Tailwind.
Grâce à ces deux projets, j’ai pu améliorer mes capacités dans ces langages, y déceler de nouveaux points positifs et négatifs (ex: installer un dark mode en Tailwind est très simple mais appliquer une taille max ou min avec ce framework est peu pratique), apprendre de mes erreurs lorsque j’en faisais, etc. Ma réalisation préférée aura été de coder la barre de recherche car cette fonctionnalité est très impressionnante à utiliser. Je me suis également familiarisée avec les fetch, objets et leur utilisation (ex: récupérer le contenu d’un fetch et le mettre dans une card qu’il faudra boucler ou bien l’utiliser dans le style pour avoir un design variable). J’aurai également découvert React Router (au cours de Vue.JS, à l’HEAJ DWT de Namur, nous avions déjà travaillé avec Vue Router donc j’ai su comprendre React Router plus facilement) et j’utiliserai cette fonctionnalité à l’avenir sans l’ombre d’un doute car elle est user-friendly. J’ai aussi revu la méthode GET que je trouve extrêmement intéressante. Pour le deuxième projet, j’ai su réaliser un timer. Auparavant, pour le projet Ilab (toujours à l’HEAJ), j’ai dû initialement coder un minuteur mais il n’arrivait pas à fonctionner convenablement donc j’ai dû abandonner l’idée après de nombreuses tentatives de corrections. Désormais, je saurai coder un timer en React.JS et pourrai pallier ce problème pour chaque projet nécessitant un minuteur.
Je me suis également rendue compte qu’une maquette Figma bien réalisée était vraiment importante pour bien coder.
Enfin, j’ai rencontré les 2 nouveaux stagiaires et me suis davantage intégrée avec les collègues de la cellule.
Grâce à ces deux projets, j’aurai donc bien progressé et mis en pratique ce que j’ai appris les deux premières semaines. J’ai hâte de voir ce que je devrai produire par la suite. Je commencerai cette 5ème semaine avec de la motivation !
