Hannah Mathot — Rapport de stage n°2

Hannah Mathot
12 min readDec 11, 2022

--

HEAJ DWT 2022–2023 B3G1–28/11/2022–11/12/2022

Entreprise :

SWCS

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).

Tailwind utilise ses propres valeurs mais on peut également importer celles qu’on souhaite

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.

Agencement qui bug

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.

Agencement réglé

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.

Champ de texte gardant sa taille par défaut

J’ai su régler cela en l’englobant dans un container.

Bonnes tailles de champ de texte grâce au 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.

Cards créées en React grâce à une base de données

J’ai alors découvert comment avoir un CSS variable grâce aux doubles accolades.

La balise style={{…}} permet de créer une mise en page variable

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.

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.

Les cards sont filtrées

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.

Version jour
Version nuit

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.

Version mobile
Version tablette

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.

Barre de recherche en mobile
Barre de recherche en 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.

Version pour ordinateur

Interactions

J’ai ajouté les états d’hover et ai recalibré le design général (background-position, couleurs de police, cursor, etc)

Ex: Checkbox normal
Ex: Checkbox hover
Ex: Checkbox checked

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.

Exemple de résultat après filtres

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é.

Un dossier Create React App a sa propre structure

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.

URL de l’accueil
Page d’accueil
URL des détails
Page des détails

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.

La méthode GET permet de récupérer les informations pour savoir quelle card charger
La card chargée est celle cliquée
Autre exemple de card chargée au clic de celle-ci
Autre exemple de card chargée au clic de celle-ci

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.

Page des détails en mobile
Page des détails en tablette
Page des détails en desktop
Version nuit

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.

J’aimerais que les cards soient alignées à gauche
Cards bien alignées

Bouton de chargement

J’ai ensuite ajouté la fonctionnalité de chargement.

Des éléments en plus sont chargés au clic du bouton

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.

Champ de texte sans bouton de filtres
Barre de recherche sans bouton de recherche

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.

Visuels du projet

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.

Exemple de problème lors de test : Malgré le fait d’avoir des min et max, l’utilisateur réussit toujours à aller au-delà de ces limites.

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.

Timer finalisé

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.

Après 1 seconde restante, le timer va s’arrêter

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.

Version desktop finale

Après la pause, j’ai eu fini de coder la version mobile.

Version mobile finale

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 !

--

--

Hannah Mathot
0 Followers

Elève à l'HEAJ Infographie de Namur.