You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
16 KiB
400 lines
16 KiB
\documentclass[12pt, a4paper]{article}
|
|
|
|
\setlength{\parskip}{1em}
|
|
|
|
\usepackage[T1]{fontenc}
|
|
\usepackage[a4paper, margin=0.7in]{geometry}
|
|
\usepackage[french]{babel}
|
|
\usepackage{amsfonts}
|
|
\usepackage{mathabx}
|
|
\usepackage{listings}
|
|
\usepackage{xcolor}
|
|
% \usepackage{subcaption}
|
|
% \usepackage{multirow}
|
|
% \usepackage{makecell}
|
|
\usepackage{cite}
|
|
|
|
\usepackage{hyperref}
|
|
\hypersetup{
|
|
colorlinks=true,
|
|
linkcolor=blue,
|
|
urlcolor=blue,
|
|
pdftitle={Adrien Burgun - Rapport de stage ST40 - A2022}
|
|
}
|
|
|
|
% From https://github.com/pinam45/utbm-latex-internship-report-covers
|
|
% Requires xelatex to run (or maybe also lualatex)
|
|
\usepackage{utbmcovers}
|
|
|
|
% From https://tex.stackexchange.com/questions/89574/language-option-supported-in-listings
|
|
\lstdefinelanguage{JavaScript}{
|
|
keywords={
|
|
typeof, new,
|
|
abstract, class, interface, type, function, return,
|
|
try, catch, finally,
|
|
switch, case, break,
|
|
var, let, const,
|
|
if, else,
|
|
for, while, in, of, do,
|
|
true, false, null, undefined
|
|
},
|
|
keywordstyle=\color{blue}\bfseries,
|
|
ndkeywords={
|
|
export, implements, import, this,
|
|
private, public, readonly, constructor,
|
|
@Inject, @Injectable, @Controller, @Module
|
|
},
|
|
ndkeywordstyle=\color{darkgray}\bfseries,
|
|
identifierstyle=\color{black},
|
|
sensitive=false,
|
|
comment=[l]{//},
|
|
morecomment=[s]{/*}{*/},
|
|
commentstyle=\color{purple}\ttfamily,
|
|
stringstyle=\color{red}\ttfamily,
|
|
morestring=[b]',
|
|
morestring=[b]"
|
|
}
|
|
|
|
\definecolor{bgColor}{rgb}{0.95,0.95,0.92}
|
|
\lstdefinestyle{JavaScript}{
|
|
backgroundcolor=\color{bgColor},
|
|
commentstyle=\color{gray},
|
|
keywordstyle=\color{magenta},
|
|
numberstyle=\tiny\color{gray},
|
|
stringstyle=\color{purple},
|
|
basicstyle=\footnotesize,
|
|
breakatwhitespace=false,
|
|
breaklines=true,
|
|
captionpos=b,
|
|
keepspaces=true,
|
|
numbers=left,
|
|
numbersep=5pt,
|
|
showspaces=false,
|
|
showstringspaces=false,
|
|
showtabs=false,
|
|
tabsize=2,
|
|
language=JavaScript
|
|
}
|
|
|
|
\newfontfamily{\Tahoma}{Tahoma}
|
|
\newfontfamily{\SourceSans}{Source Sans Pro}
|
|
% Looks like the font from google fonts has a different case,
|
|
% so I'm stuck with scanning for existing fonts
|
|
\IfFontExistsTF{Source Sans Semibold}{
|
|
\newfontfamily{\SourceSansSB}[UprightFont={* Semibold}]{Source Sans Pro}
|
|
}{
|
|
\newfontfamily{\SourceSansSB}[UprightFont={* SemiBold}]{Source Sans Pro}
|
|
}
|
|
\setmainfont{Source Sans Pro}
|
|
% \newfontfamily{\ossb}[UprightFont={* Semibold}]{Open Sans}
|
|
\newcommand{\entity}[1]{{\SourceSansSB #1}}
|
|
\newcommand{\entityb}[1]{#1}
|
|
\newcommand{\person}[2]{#1 #2}
|
|
\newcommand{\term}[1]{\textit{#1}}
|
|
|
|
\title{Rapport de stage ST40 - A2022}
|
|
\author{Adrien Burgun}
|
|
\date{Automne 2022}
|
|
|
|
|
|
\setutbmfrontillustration{assets/priscilla-du-preez-BjhUu6BpUZA-unsplash}
|
|
\setutbmtitle{Stage développeur full stack}
|
|
\setutbmsubtitle{Rapport de stage ST40 - A2022}
|
|
\setutbmstudent{BURGUN Adrien}
|
|
\setutbmstudentdepartment{Département Informatique}
|
|
\setutbmstudentpathway{}
|
|
\setutbmcompany{Moment - T\&M}
|
|
\setutbmcompanyaddress{3 boulevard Richard Lenoir\\75011 Paris}
|
|
\setutbmcompanywebsite{\href{https://moment.tech/}{moment.tech}}
|
|
\setutbmcompanytutor{PERRIN Pierre}
|
|
\setutbmschooltutor{HOLWECK Frederic}
|
|
% From https://moodle.utbm.fr/pluginfile.php/117803/mod_book/chapter/595/CARNET-A22-20220711.pdf
|
|
\setutbmkeywords{Télécommunications - Informatique - Développement logiciel - Logiciel de gestion - Logiciel de réseaux}
|
|
\setutbmabstract{
|
|
J'ai effectué mon stage ST40 au sein du département de développement full-stack de l'entreprise \entity{Moment},
|
|
une start-up française basée à Paris et fondée en 2013.
|
|
\newline
|
|
|
|
% TODO: check wording (maritime)
|
|
Moment propose à ses clients des offres de divertissement pour l'aviation, le secteur maritime, les chemins de fer et
|
|
plus récemment le domaine de la santé. Leur offre principale, \og Flymingo \fg, permet d'accéder aux divertissements
|
|
directement depuis les appareils mobiles des passagers.
|
|
\newline
|
|
|
|
J'ai pu contribuer au développement de fonctionnalités pour la nouvelle offre déployée dans les cliniques de santé,
|
|
à l'optimisation de l'application tournant sur des télévisions connectées et au maintien du code front-end.
|
|
}
|
|
|
|
\begin{document}
|
|
% \maketitle
|
|
\makeutbmfrontcover{}
|
|
{
|
|
\Tahoma
|
|
\tableofcontents
|
|
}
|
|
\newpage
|
|
|
|
\section{Présentation}
|
|
|
|
\subsection{Présentation de l'entreprise}
|
|
|
|
\entity{Moment} est une entreprise fondée en 2013, avec pour but de rendre l'expérience des voyageurs plus simple,
|
|
plus plaisante et plus connectée \cite{momenttech}.
|
|
Pour y parvenir, \entity{Moment} propose une plateforme digitale déployée dans les avions, les trains, les bateaux
|
|
de croisière et plus récemment les cliniques de santé.
|
|
Cette plateforme permet aux voyageurs de se connecter à un réseau wifi avec leurs propres appareils, et de profiter
|
|
de divertissements directement sur ceux-cis.
|
|
|
|
% TODO: récupérer le vrai nombre d'employés et de projets
|
|
À ce jour, \entityb{Moment} s'apprête à compter 10 ans de travail dans ce domaine, et possède une trentaine d'employés.
|
|
\entityb{Moment} a lancé une cinquantaine de projets, dans 15 pays, et ses produits sont utilisés par plus de 10 millions
|
|
de passagers par jour.
|
|
|
|
% TODO: valider Air France?
|
|
\entityb{Moment} fournit ses services aujourd'hui à \entity{Air France}, l'\entity{Aéroport de Paris},
|
|
\entity{TGV InOui}, \entity{Air Belgium}, \entity{Brittany Ferries} et \entity{Air Senegal}.
|
|
|
|
L'entreprise \entityb{Moment} a lancé en 2021 une filiale nommée \entity{Moment Care}, qui se spécialise dans
|
|
le divertissement dans le domaine de la santé:
|
|
\entity{Moment Care} souhaite révolutionner le contenu des offres de divertissement dans les établissements
|
|
de santé, et la manière d'y accéder \cite{momentcare}.
|
|
|
|
\subsection{Présentation du lieu de stage}
|
|
|
|
Lors de mon stage, les locaux de \entityb{Moment} se trouvaient à Paris, près de la place de la Bastille.
|
|
Ces bureaux sont partagés par la grande majorité des employés de \entityb{Moment}, qui sont organisés en
|
|
différents pôles:
|
|
|
|
\begin{description}
|
|
\item[Développement full-stack:] C'est au sein de cette équipe que mon stage s'est déroulé,
|
|
sous la supervision de son chef d'équipe, Pierre Perrin.
|
|
|
|
\item[Marketing \& Design:] Ce pôle s'occupe de l'image de l'entreprise et des produits, à la fois sur
|
|
les réseaux sociaux et auprès des clients présents et futurs.
|
|
Cette équipe décide notamment du design des différentes applications, qui est envoyé à l'équipe
|
|
\entity{Fullstack R\&D} pour implémentation.
|
|
|
|
\item[PMO (Project Management Office):] Ce pôle est constitué de chefs de projets, qui gèrent les demandes
|
|
des clients, les dates limites, les statistiques à relayer aux clients et les difficultés techniques.
|
|
|
|
\item[Contenu:] L'équipe contenu s'occupe de maintenir la base de contenus disponibles sur les
|
|
différentes plateformes déployées. Elle négocie auprès des distributeurs de films, de séries
|
|
et de magazines, et elle maintient à jour le \term{Content Management System} (CMS).
|
|
|
|
\item[Business Developers:] Cette équipe est en contact avec nos clients actuels et de potentiels clients
|
|
futurs. Elle met en place le business plan, amène à l'entreprise de nouvelles opportunités
|
|
de partenariat et négocie les prix lors de la vente des produits de l'entreprise.
|
|
|
|
% TODO: reste
|
|
|
|
\end{description}
|
|
|
|
\newpage
|
|
|
|
% Moment -> Moment + Moment Care
|
|
% Fondateur? (TODO:)
|
|
% Chiffres? (TODO:)
|
|
% Équipes
|
|
% Agile, réunions
|
|
% Jira
|
|
% Gitlab
|
|
|
|
% TODO: valider tout ça
|
|
% Le groupe \entity{Moment} a été fondé en 2013, et est constitué à ce jour de deux entreprises:
|
|
|
|
% \begin{itemize}
|
|
% \item \entity{Moment}, qui se spécialise dans le développement de solutions de divertissement pour l'aviation, le secteur maritime,
|
|
% les chemins de fer et les aéroports.
|
|
% \item \entity{Moment Care}, qui se spécialise dans le développement de solutions de divertissement pour le domaine de la santé.
|
|
% \end{itemize}
|
|
|
|
% À ce jour, les deux entreprises partagent les mêmes bureaux à Paris.
|
|
|
|
% J'ai réalisé mon stage dans l'équipe \entity{développement full-stack}, qui maintient et développe les applications front-end pour
|
|
% \entityb{Moment} et \entityb{Moment Care}, ainsi qu'une partie des applications back-end (en grande partie pour \entityb{Moment Care}).
|
|
|
|
% Notre équipe est menée par mon tuteur de stage, \person{Pierre}{Perrin}, et nous travaillons en collaboration avec les chefs de projets
|
|
% de \entityb{Moment} et de \entityb{Moment Care}, l'équipe \entity{\og SysOps \fg} et l'équipe \entity{Design}.
|
|
|
|
% % TODO: trouver une source sur agile, utiliser la nomenclature associée
|
|
% Notre équipe fonctionne avec la méthode \term{agile}: chaque semaine, nous faisons une réunion présentant les sujets et taches de la semaine,
|
|
% ainsi que leurs priorités.
|
|
% Chaque matin, nous faisons également une courte réunion où chaqu'un présente le travail qu'iel a réalisé la veille,
|
|
% et ce qu'iel va faire ce jour.
|
|
|
|
% La distribution du travail se fait via \entity{Jira}: en début de semaine, le \term{backlog} est mis à jour pour contenir l'ensemble
|
|
% des taches retenues pour la semaine, ainsi que celles non-réalisées de la semaine dernière. Chaqu'un peut ensuite s'assigner
|
|
% des taches, travailler dessus, puis marquer la tache comme prête à être revue.
|
|
|
|
% L'assurance de qualité se fait via des revues sur \entity{GitLab}: chaque modification au code doit être mise dans une \term{Merge Request}
|
|
% (l'équivalent des \term{Pull Request} sur \entity{GitHub}), et un membre de l'équipe n'ayant pas contribué à cette modification
|
|
% doit approuver celle-ci avant qu'elle ne puisse être ajoutée à la branche principale de développement.
|
|
|
|
% Tests unitaires
|
|
%
|
|
|
|
\subsection{Produits de Moment}
|
|
|
|
\subsubsection{Flymingo}
|
|
|
|
\entity{Flymingo} est le produit principal de \entityb{Moment}:
|
|
% Pitch de Moment, dire sur quoi c'est déployé
|
|
|
|
Ce produit est composé d'un serveur, nommé \entity{Flymingo Box}, sur lequel tournent plusieures applications:
|
|
|
|
\begin{itemize}
|
|
\item Une application web, \entity{Flymingo Digital}, sur laquelle les passagers peuvent se connecter.
|
|
\item La \entity{Content API}, qui est une API pour accéder aux informations sur les différents divertissements
|
|
disponibles sur le serveur. Cette API permet aux clients d'avoir un certain degré de customabilité.
|
|
Cette API sert également les différents contenus (vidéo, musique, magazines).
|
|
% Zirock?
|
|
\end{itemize}
|
|
|
|
\subsubsection{Mint}
|
|
|
|
% TODO: add logo floating to the right
|
|
\entity{Mint} est le produit que \entityb{Moment} développe et déploie en ce moment dans les cliniques de santé:
|
|
|
|
\begin{description}
|
|
\item[Mint Admin] est une application web permettant aux clinique de fixer les prix
|
|
pour les offres que celles-cis souhaite mettre à disposition, ainsi que de gérer l'assignement des différents
|
|
appareils (comme les télévisions et les tablettes) aux chambres, des différents patients à ces chambres,
|
|
et des offres aux patients.
|
|
\item[Mint Digital] est une application web que les patients des cliniques utilisent
|
|
pour se connecter, acheter des offres en ligne, regarder des films, documentaires, magazines et écouter de la musique.
|
|
\item[Mint Service] est le back-end avec lequel \entity{Mint Admin} et \entity{Mint Digital} communiquent.
|
|
\entity{Mint Service} expose une API permettant à \entity{Mint Admin} de faire des modifications aux offres et aux patients,
|
|
et à \entity{Mint Digital} de permettre aux utilisateurs de se connecter et d'acheter des offres en ligne.
|
|
\item[Mint Tab] est une application pour tablettes \term{iPad}, qui permet aux patients des cliniques
|
|
d'accéder au même contenu que sur \entity{Mint Digital}.
|
|
\item[Mint TV] est une application tournant sur les télévisions connectées, qui permet aux patients des
|
|
cliniques d'accéder au même contenu que sur \entity{Mint Digital}.
|
|
\end{description}
|
|
|
|
|
|
|
|
\section{Travail réalisé}
|
|
|
|
Durant ce stage, j'ai surtout travaillé sur les applications suivantes:
|
|
|
|
\begin{itemize}
|
|
\item Mint Service
|
|
\item Mint Admin
|
|
\item Mint Digital
|
|
\item Mint TV et Mood TV
|
|
\end{itemize}
|
|
|
|
\subsection{Mint Service}
|
|
|
|
Mint Service est une application construite avec \term{NestJS}.
|
|
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}.
|
|
|
|
\subsubsection{NestJS et l'organisation du code dans Mint Service}
|
|
|
|
% TODO: hiérarchiser l'argumentaire
|
|
|
|
NestJS emploie à son coeur les principes de \term{modularité} et d'\term{inversion de contrôle} (\term{IoC}).
|
|
|
|
L'application est séparée en différents modules, permettant de faire une séparation claire entre les morceaux de codes utilisés
|
|
pour répondre à différents besoins.
|
|
|
|
Chaque module contient des \term{services}, aussi appelés \term{providers}, qui contiennent du code métier
|
|
(contacter la base de donnée, traiter de l'information, etc).
|
|
Les modules ont également des \term{controlleurs}, qui permettent de définir les différents chemins qui seront exposés
|
|
sur le réseau.
|
|
Un contrôleur est responsable pour transformer les requêtes, vérifier leur légitimité, puis il appele les méthodes
|
|
d'un ou plusieurs services avant de transformer la réponse puis l'envoyer au client.
|
|
|
|
% TODO: trouver une source
|
|
La séparation entre \term{contrôleur} et \term{service} permet d'avoir une claire \term{séparation des préoccupations}:
|
|
les contrôleurs s'occupent de gérer, valider et répondre aux requêtes faites par un client,
|
|
tandis que les services s'occupent de l'implémentation de la logique permettant de satisfaire la requête.
|
|
|
|
Il devient également plus simple avec ce système de modifier l'implémentation de la logique côté service
|
|
sans mettre en danger la fonctionnalité du service avec d'autres applications: la gestion et la vérification
|
|
des requêtes restant inchangée.
|
|
|
|
Pour limiter le couplage entre les services, et pour simplifier la réutilisation des services,
|
|
NestJS permet de faire de l'\term{injection de dépendances} dans les services et dans les contrôleurs,
|
|
d'une manière similaire framework \entity{Spring} en Java.
|
|
|
|
Par exemple, si un service \textit{ParentService} souhaite utiliser des méthodes d'un service \textit{ChildService},
|
|
alors au lieu de créer une instance de \textit{ChildService} dans \textit{ParentService}, \textit{ParentService}
|
|
indique qu'il aimerait recevoir une instance de \textit{ChildService}, et l'utilisateur de \textit{ParentService}
|
|
est responsable pour fournir à celui-ci une instance de \textit{ChildService}.
|
|
|
|
NestJS simplifie ce processus, en permettant aux modules de faire la liste des services disponibles,
|
|
et en détectant automatiquement quels services dépendent de quels services à partir des arguments du constructeur.
|
|
NestJS construit ensuite les instances de ces services et les \term{injecte} en paramètre aux services en dépendant.
|
|
|
|
\begin{lstlisting}[style=JavaScript]
|
|
export abstract class IChildService {
|
|
// ...
|
|
}
|
|
|
|
@Injectable(IChildService)
|
|
export class ChildService implements IChildService {
|
|
// ...
|
|
}
|
|
|
|
@Injectable()
|
|
export class ParentService {
|
|
private childService: IChildService;
|
|
|
|
constructor(
|
|
childService: IChildService
|
|
) {
|
|
this.childService = IChildService;
|
|
}
|
|
|
|
// ...
|
|
}
|
|
|
|
@Module({
|
|
providers: [
|
|
ChildService,
|
|
ParentService
|
|
],
|
|
exports: [
|
|
ParentService
|
|
]
|
|
})
|
|
export class ParentModule {}
|
|
\end{lstlisting}
|
|
|
|
Les modules peuvent enfin exporter un sous-ensemble de ces services, qui peuvent alors être facilement réutilisés
|
|
à d'autres endroits de l'application sans avoir à reconfigurer l'ensemble des dépendances de ces services:
|
|
|
|
\begin{lstlisting}[style=JavaScript]
|
|
@Injectable()
|
|
export class MyService {
|
|
constructor(
|
|
parentService: ParentService
|
|
) {
|
|
// ...
|
|
}
|
|
}
|
|
|
|
@Module({
|
|
imports: [
|
|
// Comme ParentModule exporte ParentService,
|
|
// ce service est facilement rendu disponible ici pour MyService:
|
|
ParentModule
|
|
],
|
|
providers: [
|
|
MyService
|
|
]
|
|
})
|
|
export class MyModule {}
|
|
\end{lstlisting}
|
|
|
|
\newpage
|
|
|
|
\bibliographystyle{plain}
|
|
\bibliography{references}{}
|
|
|
|
|
|
\makeutbmbackcover{}
|
|
\end{document}
|