Add tools used and pre-internship section

main
Shad Amethyst 2 years ago
parent 6db94e4cb4
commit 625f7910d6

@ -6,7 +6,7 @@ Report for my fourth-year internship, in latex.
```sh ```sh
# Download required programs and libraries # Download required programs and libraries
sudo pacman -S texlive-core texlive-latexextra texlive-fontsextra texlive-langextra sudo pacman -S texlive-core texlive-latexextra texlive-fontsextra texlive-langextra inkscape
git clone https://aur.archlinux.org/ttf-tahoma.git git clone https://aur.archlinux.org/ttf-tahoma.git
git clone https://aur.archlinux.org/ttf-adobe-source-sans-fonts.git git clone https://aur.archlinux.org/ttf-adobe-source-sans-fonts.git
git clone https://github.com/pinam45/utbm-latex-internship-report-covers git clone https://github.com/pinam45/utbm-latex-internship-report-covers
@ -33,3 +33,7 @@ cd ..
cd ST40-report cd ST40-report
make make
``` ```
## Licensing
The gitlab logo belongs to GitLab and is used in accordance to its [license](https://gitlab.com/gitlab-org/gitlab-svgs/-/blob/main/LICENSE).

@ -0,0 +1 @@
<svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg"><path d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z" fill="#E24329"/><path d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5Z" fill="#FC6D26"/><path d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584Z" fill="#FCA326"/><path d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632Z" fill="#FC6D26"/></svg>

After

Width:  |  Height:  |  Size: 862 B

@ -59,3 +59,48 @@
pages={85--94}, pages={85--94},
note="[En ligne; accédé le 04 Février 2023]" note="[En ligne; accédé le 04 Février 2023]"
} }
@misc{solidjs,
author={SolidJS project},
title={SolidJS - Reactive Javascript Library},
howpublished="\url{https://www.solidjs.com/}",
year=2023,
month=01,
day=14,
note="[En ligne; accédé le 05 Février 2023]"
}
@misc{gitlab,
title={GitLab},
author={GitLab},
howpublished="\url{https://about.gitlab.com/}",
note="[En ligne; accédé le 05 Février 2023]"
}
@misc{npm,
author={npm Inc.},
title={Node Package Manager},
howpublished="\url{https://www.npmjs.com/}",
note="[En ligne; accédé le 05 Février 2023]"
}
@misc{gitlabsvgs,
title={gitlab-svgs},
author={GitLab},
howpublished="\url{https://gitlab.com/gitlab-org/gitlab-svgs}",
note="[En ligne; accédé le 05 Février 2023]"
}
@misc{git,
title={Git},
author={Software Freedom Conservancy},
howpublished="\url{https://git-scm.com/}",
note="[En ligne; accédé le 05 Février 2023]"
}
@misc{nx,
title={Nx: Smart, Fast and Extensible build system},
author={Nrwl},
howpublished="\url{https://nx.dev/}",
note="[En ligne; accédé le 05 Février 2023]"
}

@ -12,6 +12,8 @@
\usepackage{float} \usepackage{float}
\usepackage{cite} \usepackage{cite}
\usepackage{subcaption} \usepackage{subcaption}
\usepackage{wrapfig}
\usepackage{svg}
\usepackage{hyperref} \usepackage{hyperref}
\hypersetup{ \hypersetup{
@ -290,6 +292,105 @@ Durant ce stage, j'ai surtout travaillé sur les applications suivantes:
\item Mint TV et Mood TV \item Mint TV et Mood TV
\end{itemize} \end{itemize}
\section{Organisation du stage}
% Durant ce stage, j'ai rejoint l'équipe \entity{Développement Full-Stack - Recherche \& Développement},
% afin de contribuer au développement des applications front-end et back-end de l'entreprise,
% à l'assurance de qualité de ces applications et aux choix techniques faits pour ces applications.
\subsection{Thèmes définis avant le stage}
% Note: commencé avec 9 personnes, puis est passé à 7 personnes
% TODO: vérifier sur le portail des stages notre mission
Durant mes échanges avec mon tuteur de stage et le directeur des ressources humaines de \entity{Moment},
nous nous étions convenus que j'allais intégrer l'équipe \entity{Développement Full-Stack - Recherche \& Développement} en tant que développeur.
Mes tâches au sein de cette équipe seraient de:
% https://utbm.jobteaser.com/en/job-offers/8878261-moment-developpeur-se-web-fullstack-stage-ou-alternance
% TODO: clarifier qu'est ce qui constitue un projet R&D
\begin{itemize}
\item Développer de nouvelles fonctionnalités (notamment de nouvelles \term{API} (interfaces de programmation) et de leur intégration côté client)
\item Documenter le code (sous forme de commentaires et sous forme de documentation technique)
\item Participer aux choix fonctionnels (quelles technologies utiliser, comment organiser des librairies, etc.),
et participation à leur implémentation
\item Participer à la définition de la roadmap technique, et au suivi de cette roadmap
\item Aider à améliorer les solutions déjà existantes (amélioration de performances, de maintenabilité, etc.)
\item Participation aux projets Recherche \& Développement
\end{itemize}
Au moment de mes entretiens pour ma candidature de stage,
les thèmes principaux sur lesquels l'équipe travaillaient étaient le développement de \entity{Flymingo Digital}
et de \entity{Mood TV}, ainsi qu'un peu de développement pour \entity{Mint}.
J'ai aussi pu apprendre que l'équipe utilise la librairie \entity{React} et le framework \entity{Next.JS} pour ses applications front-end,
et le moteur javascript \entity{Node.JS} avec le framework \entity{Nest.JS} pour ses applications back-end.
J'espérais avant le stage pouvoir surtout travailler sur la partie back-end,
car j'avais jusqu'à ce moment-là peu d'expérience avec \entity{React},
et le peu d'expérience que j'avais ne m'inspirait pas confiance en cette technologie.
J'ai néanmoins décidé d'apprendre en amont du stage la librairie \entity{Solid.JS} \cite{solidjs},
car je n'avais jusqu'à maintenant que fait du développement front-end \og vanilla \fg (sans librairie ou framework).
\entity{Solid.JS} se veut être une librairie de développement front-end plus simple, plus réactive et plus efficace que \entity{React},
et l'apprendre m'a permis d'avoir une première expérience avec la programmation réactive.
\subsection{Premiers jours de stage}
À mon arrivée au stage, j'ai récupéré l'ordinateur portable qui m'a été préparé avec une installation d'Ubuntu,
puis j'ai installé un environnement de développement d'applications dessus (différents outils en ligne de commande,
un éditeur de texte et un gestionnaire de fenêtre avec lequel je suis plus à l'aise).
J'ai aussi reçu la documentation d'\og onboarding \fg,
qui contient une liste de documentations avec lesquelles je devais me familiariser afin de pouvoir travailler efficacement.
J'ai parcouru ces documentations et ai testé certaines des fonctionnalités décrites dans celles-cis dans un mini-projet de test.
L'équipe se réunit chaque matin pour discuter des nouveautés et du travail de la veille,
et pour annoncer sur quoi chaqu'un prévoit de travailler ce jour-ci.
J'ai participé à ces réunions dès mon premier jour,
ce qui m'a permis de rapidement construire une compréhension des problématiques récurrente et de la dynamique des différentes applications.
Nous sommes encouragés dans l'équipe à travailler en \og pair programming \fg,
et en général à collaborer ensemble.
Ma première contribution au code a été faite en pair programming,
après avoir remarqué que la logique pour la complexité des mots de passe dans \entity{Mint Admin} était fausse.
Faire cette contribution en pair programming m'a permis d'être guidé dans le processus d'envoi et de vérification de contributions,
ainsi que d'être guidé dans l'organisation de la repository.
\subsection{Outils utilisés}
\entity{Git} \cite{git} est utilisé pour gérer le versionage du code: cet outil permet de stocker les modifications
apportées au code sous forme de \og commits \fg, et de facilement rassembler et gérer les modifications faites par plusieures personnes.
% wrapfigure does not work with my \entity :(
\begin{wrapfigure}[5]{R}{0.1\textwidth}
\centering
\includesvg[width=0.1\textwidth]{gitlab_logo.svg}
\caption*{GitLab \cite{gitlabsvgs}}
\end{wrapfigure}
\textbf{GitLab} \cite{gitlab} est utilisé pour stocker les repositories de l'entreprise en ligne,
pour stocker en ligne les packages npm \cite{npm} et pour lancer automatiquement les tâches de \term{Continuous Integration}.
\textbf{VSCode} \cite{vscode} est un éditeur de texte utilisé par presque toute l'équipe pour modifier ou naviger le code.
\textbf{NX} \cite{nx} est un outil simplifiant la gestion de \og monorepositories \fg (des repositories contenant plusieures applications et librairies).
\textbf{NX} est utilisé pour la repository de l'équipe qui contient Mint Service, Mint Admin et Mood TV.
L'objectif au long terme et de migrer l'ensemble des projets de l'équipe sur cette repository,
car elle permet de facilement réutiliser du code entre les projets et de synchroniser des modifications entre projets.
\textbf{Typescript} est une extension au langage \textbf{Javascript}, qui ajoute un système de vérification de types.
Typescript permet d'éviter une classe de bugs causés par des valeurs passées à des fonctions attendant un certain type en entrée.
\\
Typescript existe aujourd'hui en tant que langage qui doit être transpilé en javascript avant de pouvoir être utilisé dans Node.JS ou dans un navigateur,
mais certains interpréteurs (comme \textbf{Bun} \cite{bun}) supportent le typescript,
et il existe une initiative pour standardiser un système permettant d'ajouter des types en javascript sans devoir le traduire.
% Agile, poker planning
% Backlog, recettes, versioning
\section{Travail réalisé sur Mint Service} \section{Travail réalisé sur Mint Service}
Mint Service est une application construite avec \entity{NestJS}. Mint Service est une application construite avec \entity{NestJS}.

Loading…
Cancel
Save