\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}
\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}