Hannah Mathot — Rapport de stage n°1

HEAJ DWT 2022–2023 B3G1 — 14/11/2022 — 27/11/2022

Entreprise :

SWCS

Poste :

Développeur Web Frontend (Stagiaire)

Première semaine :

L’entreprise SWCS :

Logo de la SWCS

Bâtiment de la SWCS

Son but premier : Aider au financement des logements (achat, construction ou rénovation) en Wallonie.

Cellules/sections :

L’entreprise comprend plusieurs sections à buts différents dont une cellule de développement web. Celle-ci est composée d’une dizaine de personnes et est gérée par un chef de projet.

Horaires :

Les bâtiments sont ouverts de 7h à 18h30. Les employés doivent y être présents 7h36 (+ 30 minutes de pause midi). Afin de respecter cela, j’arrive les matins vers 8h18, repars vers 16h18 et fais une pause de midi moins longue pour pouvoir prendre mes bus à ces heures convenues.

Accueil en entreprise :

Le premier jour, je suis arrivée vers 7h40 pour prendre mes repères dans le quartier. Les portes du bâtiment de l’entreprise étant verrouillées sans carte d’accès, un employé gentil et souriant est venu m’ouvrir la porte. Il m’a fait visiter un peu le bâtiment puis m’a conduite à la salle ‘IT’. Dans cette pièce, le responsable IT m’a souhaité la bienvenue dans l’entreprise. Il m’a fourni un ordinateur de société et expliqué les différents logiciels utilisés sur ce dernier (Slack, Outlook et Teams). J’ai ensuite rencontré plusieurs personnes de sections différentes avec qui j’ai discuté. L’ambiance décontractée m’a rassurée. Le chef de projet et responsable des stagiaires de la section de développement web m’a présentée à la cellule. Celle-ci compte une dizaine de personnes. J’étais impressionnée : je me trouvais dans une vraie entreprise, à un vrai stage, dans une cellule avec des employés professionnels qui travaillent sur des projets pour des clients. N’ayant jamais fait de stage de ma vie, c’est en entrant dans cette salle de travail que ma motivation s’est accrue.

Formations :

La première partie de mon apprentissage consiste en 3 longues formations sous format vidéo. Toutes ciblent des domaines différents : framework CSS, javascript général et ‘React.js’. Si je n’ai aucune connaissance en ‘React.js’ et en ‘Tailwind CSS’ (le framework CSS), la deuxième formation allait servir à revoir le JS depuis le début afin d’être sûre que j’ai le niveau attendu et qu’on parte sur de bonnes bases.

Lundi matin :

• 1ère formation (durée 1h44) :

Celle-ci porte sur le framework CSS ‘Tailwind’. Elle aura été la plus aisée à comprendre. Cependant, comme je l’ai synthétisée, j’aurai pris environ 4h50 pour la visionner entièrement.

J’en ai réalisé une synthèse personnelle mais, comme la formation est payante hors entreprise, je listerai simplement ci-dessous mes conclusions pour ne pas dévoiler tout son contenu.

Concept du framework :

1. Ce dernier utilise ses propres propriétés CSS (une propriété CSS est par exemple ‘margin’, ‘width’, ‘overflow’, etc.) et les écrit directement dans le HTML, à l’intérieur de class.

Exemples de propriétés Tailwind (Dégradé et couleurs)

Rendu des propriétés

2. Il impose l’utilisation de ses propres valeurs selon une hiérarchie qu’il suit (valeurs de width, height, margin, etc.)

Hiérarchie pour le texte (avec ses équivalents en px)

Résultat dans le browser

Points intéressants de Tailwind :

1. Une des particularités de ce framework est qu’il réinitialise tous les designs des éléments. Ainsi, un h1 aura le même visuel qu’un lien ou qu’un bouton.

Design des éléments sans Tailwind

Design des éléments avec Tailwind

2. Les propriétés Tailwind sont assez intuitives et permettent de créer des sites simples.

Ici, on comprend facilement que si ‘m’ signifie ‘margin’, ‘mt’ correspond à ‘margin-top’, ‘mr’ à ‘margin-right’, etc.

Résultat de l’HTML

Points un peu plus négatifs :

1. Comme Tailwind suit une hiérarchie, certaines combinaisons ne sont pas possibles. Par exemple, il est impossible de donner une width ‘w-50’ car 50 n’entre pas dans la hiérarchie. Il faut alors faire le raccourci ‘ctrl enter’ pour savoir toutes les combinaisons disponibles pour ‘w-’. Cela n’est pas pratique et prend plus de temps.

Exemple de valeurs qui marchent et ne marchent pas

En résumé, j’ai trouvé que Tailwind était intéressant, notamment grâce à sa réinitialisation de design d’éléments HTML, et qu’il était assez intuitif.

Lundi après-midi + Mardi + Mercredi :

• 2ème formation (durée 18h14) :

Cette formation reprend à 0 l’apprentissage du JS afin d’avoir une connaissance solide du langage. Elle aura été la plus difficile à comprendre.

Un début facile :

Au commencement, le cours était aisé car j’utilise le JS dans mes projets depuis le début de mes études. Je découvrais cependant certaines notions ou astuces utiles. Celles-ci m’ont grandement intéressées et fait sourire.

J’ignorais par exemple qu’on pouvait écrire directement dans la console, alors que c’est une connaissance de base

Difficulté minime :

La manière de coder étant propre à chacun, celle du formateur était différente de la mienne donc j’ai appris à la comprendre. J’ai apprécié la découvrir et élargir mes horizons.

Le formateur utilise des fonctions avec paramètres alors que je n’ai jamais utilisé de paramètres dans aucun projet

Il utilise des fonctions dans des variables alors que je dissocie toujours variable et fonction

Difficulté croissante :

Le cours s’est ensuite grandement compliqué. Si j’étais confiante en mes capacités, je suis tombée de haut en redécouvrant le concept de “programmation orientée objet”. N’ayant réalisé aucun projet personnel avec cette manière de coder, j’ai poursuivi la formation en comprenant le cours mais en sachant bien que je ne saurais l’appliquer efficacement sans m’entrainer longtemps au préalable. Cette formation étiquetée “pour débutant” était devenue plus ardue.

Je n’ai jamais réellement codé en orienté objet jusqu’ici

Mais toujours de la découverte et de l’émerveillement :

Quelques éléments m’ont cependant fait sourire dans cet océan de difficultés, tels que les fonctions pratiques (ex: .filter() .forEach() etc.) ou les templates. Ayant déjà codé dans mes projets de multiples lignes de code en JS afin de créer des balises HTML dans le DOM, ces templates seront bien utiles à l’avenir.

Dans l’app du projet ‘Ilab’ (voir lien ci-dessous), dans la partie “montage”, j’ai dû créer beaucoup d’éléments en JS mais utiliser une template aurait été plus aisé

Projet Ilab (HEAJ DWT B3G1 2022–2023)

En conclusion :

Toute cette formation était très intéressante car j’ai encore tant de choses à apprendre. Je la regarderai encore de nombreuses fois car je dois réussir à la comprendre et appliquer tout ce qu’elle enseigne.

Note : fermeture de l’établissement le mardi :

Le jour de la fête du Roi, le 15 novembre, l’entreprise était fermée. Afin de ne pas perdre le rythme, j’ai continué de visionner les vidéos chez moi ce jour-là.

Jeudi :

Réunion :

Une à deux fois par semaine, à 9h15, il y a une réunion générale. Chacun peut y parler de ses problèmes ou émettre un commentaire particulier. Tous ont dialogué de problèmes que je ne comprenais pas car il s’agit seulement de ma première semaine. Une fois la réunion finie, chacun est retourné à son poste. Mes collègues de travail ont continué leurs projets et j’ai poursuivi les formations.

• 3ème formation (durée 7h76) :

La dernière formation instruit sur React.js.

Motivée ! :

Après avoir entendu parlé plusieurs fois de ‘React’, j’avais hâte d’enfin voir de quoi il s’agit !

Progression pas à pas :

Comme déjà énoncé plus tôt, j’ai peu d’expérience en programmation orientée objet. Tout au long de cette formation, je me suis alors familiarisée petit-à-petit avec les ‘class’, le ‘constructor’ et les fonctions. Je réétudierai ce type de programmation ultérieurement mais j’étais très satisfaite de comprendre les class en React malgré mon faible niveau.

Langage fort apprécié :

Comme son nom l’indique, React est un langage qui permet un code réactif grâce à ses propriétés, variables, fonctions et composants. Je trouve cela incroyablement intéressant !

Réflexion :

Je suis intriguée et me demande quel type d’algorithme une société ou un étudiant peut créer en React et quel serait son résultat. A quoi ressemblerait un site web codé en React en entreprise.

Vendredi

• Révision de la formation 2 :

Une fois les 3 formations visionnées, j’avais une meilleure compréhension des class en orienté objet. J’ai alors regardé une deuxième fois les parties de la 2ème formation que je ne comprenais pas. Petit-à-petit, j’ai de mieux en mieux compris son contenu. J’étais très rassurée d’enfin assimiler ces notions abstraites pour moi. J’ai réalisé des codepen pratiques à revisiter pour chaque notion importante de la formation (orienté objet, promise, fetch, templates, commentaires et raccourcis syntaxiques)

Relation avec les autres :

Tout au long de la semaine, j’essaie de retenir les noms, visages et postes des personnes que je croise : directrice générale, collègues, employés d’autres sections, etc. Les premiers jours, j’ai eu évidemment un peu de mal avec les visages et les lieux donc il m’est arrivé d’entrer dans une pièce en étant incertaine de me trouver dans la bonne, de me tromper d’étage, et de parler à des gens en ayant aucune idée de leur identité. Mais, avec le temps, j’ai fini par repérer les salles importantes. Il ne me manque plus maintenant que de retenir les visages et les noms.

Pendant que je travaille, je rigole avec mes collègues, les écoute et réponds à ce qu’ils me disent mais je reste très silencieuse car c’est dans mes habitudes. Etant la seule stagiaire de la cellule actuellement (ceux d’autres écoles arrivant en janvier) et également la seule fille de la pièce, ils aiment en plaisanter, ce qui me fait rire. N’ayant pas de voiture, ils me demandent si j’ai besoin de quelque chose à manger le midi. Ils sont tous bienveillants.

Deuxième semaine :

Lundi matin

Réunion avec la section web :

La 2ème semaine, j’ai été intégrée dans les réunions de la section (il s’agit là d’une réunion spécifique à la cellule web et non pas une générale). Ils ont expliqué leurs avancées dans ce qu’ils ont à faire et ont réalisé leur horaire partagé de la semaine ensemble. De nouveau, durant la réunion, ils utilisent des logiciels et termes que je ne comprends pas mais je parviens à saisir approximativement de quoi ils parlent. Assister à cette réunion m’a motivée à en savoir davantage sur la gestion de projets en groupe et sur le management d’équipe en général.

Révision et exercices :

Après cette première semaine de formations, la deuxième aura elle consisté en une révision des vidéos pour lesquelles j’avais besoin de plus de révision, compréhension et assimilation. Le chef de projet m’a également proposé des exercices pour que je pratique les différentes notions apprises.

Lundi après-midi :

Exercice Tailwind :

Pour entrainer mes connaissances du framework Tailwind, j’ai essayé de reproduire un design. Même si je me sens plus libre et à l’aise en utilisant SASS, j’étais émerveillée à chaque fois qu’une class Tailwind produisait le résultat voulu !

Visuel à imiter avec Tailwind

Mardi et mercredi :

Révision formation React et JS :

J’ai revisionné les formations de React et JS général pour être certaine de bien tout comprendre. Je me rends alors compte que la 3ème formation était en réalité davantage plus complexe que je ne le pensais.

Jeudi :

Réunion :

Lors de cette seconde réunion générale, j’ai enfin compris un peu mieux de quoi les employés discutent et ai su mettre le doigt sur certains noms et visages.

Exercices React :

Exercice 1 :

Après avoir revisionné la formation, j’ai essayé de réaliser mon premier exercice seule. Le but ici était de coder une liste à partir d’un tableau et une barre de recherche qui filtre celle-ci. N’ayant jamais codé seule en React auparavant, ce travail m’a pris la matinée entière. J’ai d’abord essayé de coder tous les “composants” (voir définition ci-dessous) séparément mais je n’arrivais pas à trouver comment poursuivre par la suite. J’ai alors mis tout mon code dans un seul composant et ai finalement pu finaliser l’exercice.

Un composant est du code qui représente un élément d’un site web. Ex: un composant qui regroupe le code pour créer une image, un champ de texte, une liste, etc. On peut utiliser ce composant quand on veut sur la page.

Ici, 2 est le composant d’une image, 3 également, 1 est du texte. On utilise 3 et 1 deux fois sur cette page. 4 est une image utilisée 3 fois.

Exercice 2:

Le deuxième challenge était facile à réaliser. Cet exercice consistait en la création d’un compteur.

Exercice 3:

J’ai adoré réaliser le 3ème exercice et comprendre de mieux en mieux certaines notions (forEach, push, raccourci syntaxique de if, etc). Celui-ci consistait en l’affichage de texte au clic de bouton. J’ai volontairement mis les contenus dans un objet pour me familiariser avec ce concept.

Vendredi :

Exercices React :

Exercice 4:

J’ai réalisé un 4ème challenge : un slider. J’ai adoré le coder. Le moment où j’ai eu plus difficile était lorsqu’il fallait gérer le changement d’image. Il y avait quelques bugs mais j’ai su les résoudre à la fin.

Exercice 5 :

J’ai continué sur ma lancée. Pour cet exercice, il fallait créer des checkbox qui modifient une valeur “oui” ou “non” selon leur état. Le défi était qu’elles devaient être indépendantes les unes des autres (cliquer sur une ne devait pas toutes les cocher). J’ai réussi à lier checkbox et texte mais j’ai eu plus difficile à dissocier les checkbox. Cependant, je me rends compte que cet algorithme pourra être utile dans le futur si je dois créer un formulaire réactif.

Exercice 6 :

Le 6ème challenge est un formulaire de connexion. Je commence petit à petit à comprendre de mieux en mieux la logique des composants mais j’ai tout de même pris beaucoup de temps pour le réaliser. Ayant toujours voulu savoir coder un formulaire de connexion, j’ai adoré faire cet exercice !

Challenge 6 react

Exercice 7 :

Le dernier exercice a été rapide à réaliser. Il s’agit d’un générateur de fun fact à partir d’une base de données trouvée sur le web. Il m’aura fallu plus de temps pour trouver la base de données que pour coder l’algorithme.

Rétrospective de ces 2 semaines :

Deux semaines seulement viennent de passer mais j’ai l’impression d’avoir déjà beaucoup évolué.

Je suis entrée pour la première fois dans une vraie entreprise, j’ai rencontré des employés, j’ai participé à leurs réunions. J’ai pu mettre un pied dans l’univers des entreprises.

J’ai également pu changer mon avis quant à l’atmosphère générale d’une entreprise. Je suis contente de voir que les employés ici sont accueillants et bienveillants.

Ma progression majeure aura évidemment été toutes les connaissances que je suis en train d’acquérir grâce aux formations : Tailwind.CSS, React.JS, orientation objet, fetch, fonctions, etc. Après ces deux semaines de formations et d’exercices, j’ai hâte de voir comment je pourrai mettre ces connaissances en application pour les projets futurs de l’entreprise et personnels.