The gitlab logo belongs to GitLab and is used in accordance to its [license](https://gitlab.com/gitlab-org/gitlab-svgs/-/blob/main/LICENSE).
The gitlab logo belongs to GitLab and is used in accordance to its [license](https://gitlab.com/gitlab-org/gitlab-svgs/-/blob/main/LICENSE).
The typescript logo belongs to Microsoft and is used under the guidelines set out on the [typescript branding page](https://www.typescriptlang.org/branding/).
@ -359,42 +359,74 @@ ainsi que d'être guidé dans l'organisation de la repository.
\subsection{Outils utilisés}
\subsection{Outils utilisés}
\newcommand{\logowidth}{0.15\textwidth}
\entity{Git}\cite{git} est utilisé pour gérer le versionage du code: cet outil permet de stocker les modifications
\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.
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 :(
% wrapfigure does not work with my \entity :(
\begin{wrapfigure}[5]{R}{0.1\textwidth}
\begin{wrapfigure}{r}{\logowidth}
\centering
\centering
\includesvg[width=0.1\textwidth]{gitlab_logo.svg}
\includesvg[width=\logowidth]{gitlab_logo.svg}
\caption*{GitLab \cite{gitlabsvgs}}
\caption*{GitLab \cite{gitlabsvgs}}
\end{wrapfigure}
\end{wrapfigure}
\textbf{GitLab}\cite{gitlab} est utilisé pour stocker les repositories de l'entreprise en ligne,
\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}.
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{VSCode}\cite{vscode} est un éditeur de texte utilisé par presque toute l'équipe pour modifier ou naviguer le code.
\textbf{Slack}\cite{slack} est une plateforme de messagerie instantanée,
que l'entreprise préfère aux emails pour la communication indirecte.
\textbf{Jira}\cite{jira} est un logiciel de gestion et de suivi de tickets,
que notre équipe utilise pour suivre les tâches à faire durant la semaine,
quelles tâches sont en cours de développement, prêtes à être revues ou finies,
ainsi que pour garder un \term{backlog} des tâches à faible priorité.
\textbf{Confluence}\cite{confluence} est un logiciel qui permet à l'équipe de regrouper des documentations qui n'ont pas de place claire au sein du code.
\textbf{NX}\cite{nx} est un outil simplifiant la gestion de \og monorepositories \fg (des repositories contenant plusieures applications et librairies).
\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.
\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,
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.
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.
\begin{wrapfigure}{r}{\logowidth}
\centering
\includesvg[width=\logowidth]{ts-logo-128.svg}
\caption*{TypeScript \cite{typescriptlogo}}
\end{wrapfigure}
\textbf{Typescript}\cite{typescript} est une extension au langage 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 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,
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,
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.
et il existe une initiative pour standardiser un système permettant d'ajouter des types en javascript sans devoir le traduire.
% Agile, poker planning
\textbf{React}\cite{react} est une librairie JavaScript qui permet de facilement construire des interfaces graphiques fortement intéractives.
% Backlog, recettes, versioning
React permet d'encapsuler l'affichage et la gestion d'évenéments dans des \og composants \fg, qui peuvent être réutilisés de manière modulaire.
React propose aussi une extension de JavaScript, qui permet d'écrire du code HTML directement dans le code JavaScript,
ainsi que d'insérer des composants avec la même syntaxe.
\textbf{Next.JS}\cite{nextjs} est un framework simplifiant l'utilisation de React pour des plus grandes applications:
NextJS permet de séparer l'application en différentes pages,
et de naviguer de manière inintérompue entre ces pages.
NextJS a également pour but d'optimiser la vitesse de chargement de ces pages, en faisant un maximum du rendu de ces pages côté serveur.
\textbf{Nest.JS}\cite{nestjs} est un framework simplifiant la création d'applications back-end.
NestJS utilise l'injection de dépendance pour permettre de plus facilement faire grandir une application back-end,
et propose de nombreux outils pour gérer les requêtes, les bases de données et la documentation.
\subsection{Organisation de l'équipe}
% 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}.
NestJS est un framework permettant de construire des applications côté serveur en Javascript,
NestJS est un framework permettant de construire des applications côté serveur en JavaScript,
et de s'assurer que ces applications soient à la fois sûres, efficaces et flexibles \cite{nestjs}.
et de s'assurer que ces applications soient à la fois sûres, efficaces et flexibles \cite{nestjs}.
\subsection{NestJS et organisation du code}
\subsection{NestJS et organisation du code}
@ -557,6 +589,42 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema
\caption{Organisation initiale du système d'envoi de mail dans Mint-Service}
\caption{Organisation initiale du système d'envoi de mail dans Mint-Service}
\end{figure}
\end{figure}
% mjml
\subsection{Refactor du système de mails}
% - [ ] parler des désavantages de cette méthode
% - [ ] parler de ce qu'on prévoyait de faire
% - [ ] parler de comment on l'a fait (pour showcase l'avantage du monorepo), et des étapes prises
% - [ ] parler des améliorations futures qui pourront être faites
% (ajouter plus de providers, simplifier la logique pour choisir les providers, react.email, svelte, etc.)
\section{Travail sur Mood TV}
\subsection{Introduction?}
% Présentation de la plateforme, des télés (chrome 53 hehe), mentionner procentric
% Parler de l'hydration, du rendu, etc.
\subsection{Analyse des performances}
% Screenshot du panel des performances sur mood tv (avant et après)
% Parler de la loi du milieu, du Z-test, du test de normalité, de comment récupérer ces données
\subsection{Optimisation du temps de chargement}
% - [ ] Optimisation du nombre de requêtes faites (avec un dessin? ~ plus tard)
% - [ ] Optimisation de la taille du bundle
% - [ ] Optimisation du parsing des requêtes
% Avoir de jolis nombres, et un tableau final avec toutes les mesures
\subsection{Refactors}
% - keyboard handler
% - customisations (si ça passe à temps)
% - remise en place de l'ISR, avec un vrai système pour l'activer et le désactiver
\makeutbmbackcover{}
\newpage
\newpage
\section{Annexes}
\section{Annexes}
@ -567,5 +635,4 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema
