UNIVERSITÉ DE LA RÉUNION

Rapport de stage de Masters M2

INFORMATIQUE
pour obtenir le diplôme

Master Informatique

Présentée et soutenue par

Zakaria FAKHI

DEXTER/NEW SIGMA

Organisme d’accueil : Société française du radiotéléphone de Paris

Les Membres :

Tuteur SFR : BOUSHAB Youssef - SFR

Responsable Pédagogique : PR.Fred MESNARD - Université de La Réunion

6 juin 2020
 Je dédie, avec grand, plaisir ce travail avec un amour profond :
A ma chère mère Elmouhtadi hayat qui m’ baignée de tendresse et d’amour
et pour ces perpétuelles prières afin que je puisse grandir dans la paix, la
réussite. A mon père Fakhi said, support principal le long de ma vie. Il m’a
inculqué les valeurs qui m’ont aidées toute au long de ma carrière
d’enseignement. Il m’a dirigé vers la réussite malgré les difficultés de ce
chemin. A ma sœur fakhi Meriam et mon frère Hicham, qui m’ont devancé
dans le domaine informatique. Pour les moments vécus ensemble au sein
d’une chaleureuse et respectable famille. Ils n’ont ménagé auqu’un effort
pour m’aider, surtout durant mon stage à SFR en France.
 i

Remerciements
Le travail du présent rapport a été entrepris et exécuté dans le cadre de mon
projet de fin d’étude du master 2 informatique à l’université de la Réunion- France.
La réalisation du PFE a été accomplie entièrement au sein de la société française du
radiotéléphone (SFR). A cette occasion, je tiens à adresser mes sincères remercie-
ments à l’égard des responsables de la société SFR, sans oublier tout le personnel de
cet établissement. J’adresse notamment, mes vifs remerciements à Mr BOUSHAB
Youssef, Mr SIMON Edgar, Mr BENHARIRA Kader qui ont facilité mon intégration
grâce à leurs conseils et pour m’avoir permis dès le début de mon stage à assister
aux réunions quotidiennes pour la mise en œuvre de Dexter et New Sigma. Je les
remercie, également, pour la qualité des discussions portant essentiellement sur les
technologies concernant la réalisation des projets de mon stage au sein de SFR. Je
saisis cette occasion pour témoigner ma profonde reconnaissance à monsieur BOU-
SHAB Youssef, en tant que tuteur et Co-directeur de mon présent travail. Je le
remercie, pour m’avoir transmis, en outre, avec extrême gentillesse, les valeurs hu-
maines et pratiques qui ont facilité mon insertion à la vie professionnelle J’adresse
ma gratitude à Monsieur FRED MESNARD, Professeur à l’université de la Réunion
et responsable du Master Informatique, pour avoir accepté de diriger les travaux de
mon stage PFE. Permettez-moi Monsieur MESNARD à cette occasion pour vous
adresser mes remerciements les plus cordiaux, pour avoir accepté d’encadrer mon
PFE et pour votre entière disponibilité. Je tiens à vous exprimer ma gratitude pour
vous conseils et surtout pour les précieuses orientations scientifiques, et pédagogiques
qui m’ont permis de préciser mon propos. Pour finir, je tiens à adresser mes remer-
ciements les plus respectueux à l’ensemble des professeurs et enseignants du Master
2 informatique pour m’avoir enrichi mon cursus grâces un enseignement théoriques
et pratiques de grande qualité. Le savoir et le savoir-faire acquis durant cette for-
mation m’ont permis de s’acquitter convenablement des problématiques proposées
et entreprises par la société SFR durant mon stage en son sein.
Résumé : Le rapport de stage, effectué à SFR, s’inscrit dans le cadre du projet de
fin d’étude de master M2 informatique à l’université de la Réunion. Il est entamé,
en premier lieu, par la description de l’environnement du déroulement de mon
stage et les possibilités, en ressources humaines, en matériels et en logistiques,
offertes par la société française du radiotéléphone (SFR). La mission qui m’est
attribuée au sein de SFR, consiste à contribuer par le développement Front End
aux projets Dexter et New Sigma. Les projets consiste à créer, dans sa nouvelle
dynamique, une nouvelle plateforme qui simplifie les procédures de communication
et de monitoring entre les services de la société, ainsi que celle entre ces services
et le client. La méthode proposée repose sur les logiciels Dexter et New Sigma. La
mission, essentiel qui m’a été attribuée consiste à participer à la réflexion sur la
méthodologie à mettre en place tenant compte des compétences et les technologies
disponibles afin de développer progressivement, en commun Dexter et new Sigma.
Le rapport expose, également, les actions entreprises, sous forme d’interviews afin
de me familiariser avec l’environnement et les structures qui participent au projet
de SFR, notamment New Sigma et de connaître les technologies disponibles. Par la
suite, le rapport expose en détail, la problématique du projet Dexter et et les actions
entreprises jusqu’à maintenant sur New sigma. Pour Dexter il s’agit d’entamer le
développement une application Full Stack ascendante via Angular/NodeJS suite
à une étude qui couvre les besoins en méthode de travail, la problématique, et la
vision globale de projet Dexter.
Au sujet de New Sigma j’ai assisté à des réunions quotidiennes pour exposer et
discuter le projet New Sigma, il s’agit des maquettes à intégrer pour New Sigma,
objectifs, tâches, et planning. De plus une étude a été faite sur les technologies
Front End utilisées par les différentes équipes au sein de SFR. Une première
présentation en interne, a été exposée sur l’étude a été faite, Il s’agit de la synthèse
des interviews accomplies avec des développeurs Front End.

Mots clés : SFR, Front End, Dexter, New Sigma, Angular, NodeJS, Full Stack.
Abstract : The internship report, carried out at SFR, is part of the end-of-study
project for a master’s degree in computer science at the University of Reunion.
It is started, first of all, by the description of the environment of the course of
my internship and the possibilities, in human resources, materials and logistics,
offered by the French radiotelephone company (SFR). The mission assigned to
me within SFR, consists in contributing by Front End development to the Dexter
and New Sigma projects. The projects consist in creating, in its new dynamics, a
new platform which simplifies the procedures of communication and monitoring
between the services of the company, as well as that between these services and
the customer. The proposed method is based on Dexter and New Sigma software.
The mission, essential which has been assigned to me, consists in participating in
the reflection on the methodology to be implemented taking into account the skills
and the available technologies in order to develop gradually, jointly Dexter and
new Sigma. The report also describes the actions taken, in the form of interviews,
to familiarize myself with the environment and the structures involved in the SFR
project, in particular New Sigma, and to learn about the technologies available.
Subsequently, the report sets out in detail the problematic of the Dexter project and
and the actions taken so far on New sigma. For Dexter it is a question of starting
the development of an ascending Full Stack application via Angular / NodeJS
following a study which covers the needs in working method, the problematic, and
the global vision of Dexter project.
About New Sigma I attended daily meetings to expose and discuss the New
Sigma project, these are models to integrate for New Sigma, objectives, tasks, and
planning. In addition, a study was made on the Front End technologies used by the
different teams within SFR. A first internal presentation, was exposed on the study
was made, It is about the synthesis of the interviews accomplished with developers
Front End.

Keywords : SFR, Front End, Dexter, New Sigma, Angular, NodeJS, Full Stack.
 Table des matières

1 Introduction générale 1

2 La société d’accueil de stage : SFR 3

2.1 Présentation de SFR . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 L’équipe projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Moyens disponibles et ressources humaines . . . . . . . . . . . . . . 7
2.4 Communication au sein de l’équipe . . . . . . . . . . . . . . . . . . . 7

3 Dexter et New Sigma 8

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2 Description Dexter . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2.1 Méthodologies et Outils informatiques . . . . . . . . . . . . . 11
3.2.2 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.3 Réalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 New Sigma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3.1 Description de New Sigma . . . . . . . . . . . . . . . . . . . . 20
3.3.2 Actions entreprises . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3.3 Perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4 Synthèse des interviews 22

4.1 Chaîne de production de site web . . . . . . . . . . . . . . . . . . . . 22
4.2 Objectifs des interviews . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 Résultats des interviews . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.3.1 Interview avec LEFEBURE Jordan de l’équipe : FAST . . . . 24
4.3.2 Interview avec PRAUD, jean-Gwilherm (Outil de communi-
cation) (Site de Rennes) . . . . . . . . . . . . . . . . . . . . . 24
4.3.3 Interview avec ABOUCHI Aziz de l’équipe : OTT . . . . . . 25
4.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

A 30
A.1 Déroulement de stage et difficultés rencontrées . . . . . . . . . . . . . 30
A.2 Formation Mooc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Bibliographie 32
 Table des figures

2.1 Logo de la Société Française du Radiotéléphone (SFR). . . . . . . . . 4

2.2 Organigramme SI B2C . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Organigramme SI B2C . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.1 Architecture logique Dexter. . . . . . . . . . . . . . . . . . . . . . . . 10

3.2 Intérêt des développeurs pour les frameworks Front End.[1] . . . . . 12
3.3 Architecture logique de l’application . . . . . . . . . . . . . . . . . . 14
3.4 Diagramme de séquence pour l’authentification. . . . . . . . . . . . . 15
3.5 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.6 Créer un compte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.7 Se connecter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.8 Graphes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.9 Recherche paramétrée . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.10 Administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.11 Suppression d’un utilisateur . . . . . . . . . . . . . . . . . . . . . . . 19
3.12 Ajouter un nouveau utilisateur . . . . . . . . . . . . . . . . . . . . . 20

4.1 Description de la chaîne de production d’un site web. . . . . . . . . . 23

Liste des tableaux

2.1 Historique de SFR, premier opérateur alternatif à France Télécom en

plein renouvellement. . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Principales actions entreprise pour la promotion de SFR. . . . . . . . 6
 Chapitre 1

Introduction générale

De nos jours, être sur internet, constitue un moyen moderne inévitable, dy-
namique et efficace pour toute entreprise qui compte améliorer les interfaces ser-
vice/service et service/client. L’objectif étant de rendre pratiques et performants les
moyens de communication afin de toucher plus de clients et d’accroître le nombre de
leur adhésion. La maîtrise de ces aspects permet à la société de gagner en visibilité
par rapport à ses actions. Ceci permet de concurrencer, par le savoir, les sociétés
qui opèrent dans le même domaine et d’accroître, par conséquent, son chiffre d’af-
faire. Pour éviter les contraintes, liées au coût de la production des systèmes de
communication via les nouvelles technologies, la société SFR envisage de mettre en
place une plateforme intelligente à l’aide de deux logiciels à savoir Dexter et New
Sigma et en mobilisant et en recrutant diverses compétences qui travaille ensemble
afin de concevoir, en parfaite cohésion, une stratégie propice au développement de
leurs technologies. C’est dans ce cadre que j’étais recruté, en tant que stagiaire pour
participer, surtout avec ma spécialité de développeur Angular/NodeJs à la réflexion
et la réalisation du projet de SFR. Au cours de mon stage, j’ai réalisé les travaux
suivants :
 Analyse de l’existant en technologies et en compétences impliquées dans
étapes de production d’une application web. Pour ce faire, une série d’in-
terviews avec les représentants de ces équipes a été exécutée. Il s’agit dans
l’ordre de leur intervention : les Wireframers/Prototypeurs, les web designers,
les intégrateurs web (front end developers) et le Développeurs web (back end
developers).
 La participation à la réalisation du projet de son qui a fait l’objet de mon
embauche comme stagiaire.
 Pour participer au développement du projet de SFR, j’ai, en outre, participé
depuis le début de mon stage aux réunions quotidiennes organisées par SFR
afin de débattre l’approche, le programme et les conditions optimales pour la
réalisation, surtout de l’énorme projet New Sigma tenant compte de toutes
les contraintes susceptibles de paraître lors de son fonctionnement.
Ces aspects, ainsi que les résultats obtenus durant ce travail, sont présentés dans
ce rapport en quatre chapitres. Le chapitre 1 est réservé à l’introduction générale.
Le chapitre 2 est consacré à la présentation de SFR, comme société d’accueil. Le
chapitre 3 est réservé à la description de Dexter, des technologies associées, et la
méthodologie adoptée pour sa réalisation, selon les propositions successives des res-
ponsables de SFR. Tandis Que pour le projet Sigma, en cours de discussion, je
 2

mentionne les étapes discutés et élaborées. Dans le chapitre 4, nous avons tenu à
donner, aussi la synthèse exhaustive des interviews réalisées avec les équipes de la
chaîne de production d’une application web. Ce chapitre entre dans le cadre des
préparatifs du projet New Sigma. L’ensemble des chapitres sont chapeautés par une
introduction générale.
 Chapitre 2

La société d’accueil de stage : SFR

Contents
2.1 Présentation de SFR . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 L’équipe projet . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Moyens disponibles et ressources humaines . . . . . . . . . 7
2.4 Communication au sein de l’équipe . . . . . . . . . . . . . . . 7

Le stage concernant mon projet de fin d’étude de master m2 informatique à

l’université de la Réunion a été effectué auprès de la Société Française du Radioté-
léphone SFR (Opérateur de Téléphone d’Altice). Compte tenu de la problématique
et les objectifs du projet de mon stage, qui consiste à participer, en tant que déve-
loppeur au sein de l’équipe SI Back Fixe à concevoir et réaliser des applications qui
contribuent, en concertation, avec toutes les équipes qui participent dans la chaîne
de production d’une application web.
Cette offre m’a fortement intéressée pour plusieurs raisons :
Le stage dans SFR est en harmonieuse adéquation avec les compétences en techno-
logies acquises au cours de ma formation et les stages effectués, notamment au sein
du master 2 informatique à l’université de la réunion. La portée des projets proposés
consistent à développer la partie frontale au sein de l’équipe fonctionnelle, le côtoie-
ment des membres de cette équipe et ceux des équipes impliquées dans le la chaîne
de production de l’application web vont me permettre d’enrichir mes connaissances
en diverses technologies et surtout, d’acquérir une expérience du savoir et savoir-
faire, la culture et la discipline de fonctionnement d’une entreprise.
Pour concrétiser les aspects précités au sein du groupe SFR, il convient de présenter
succinctement l’environnement du déroulement de mon stage. Dans ce qui suit, je
donne un bref résumé sur la société SFR suivie par la description de l’équipe au sein
du quelle j’ai développé mon travail.

2.1 Présentation de SFR

La Société Française du Radiotéléphone, connu par le sigle SFR de logo repré-
senté sur la figure 2.1 a les coordonnées de son siège social situé aux 16 rues du
Général Alain de Boissieu 75015 Paris France. Depuis sa création en 1987, la société
SFR, est considérée parmi l’une des trois opérateurs majeurs dans le paysage fran-
çais.
2.1. Présentation de SFR 4

Figure 2.1: Logo de la Société Française du Radiotéléphone (SFR).

L’opérateur SFR dont l’essentiel de son historique et les actions entreprises pour
sa promotion sont résumés dans les tableaux 2.1 et 2.2, est l’un des fournisseurs
français les plus distingués d’accès à internet dans le marché des télécoms. SFR se
distingue par ses divers et nombreux offres destinées aux particuliers et aux entre-
prises, moyennant la marque SFR Business. En tant que filiale en France du groupe
Altice, SFR, occupe une place de choix, en tant qu’opérateur de télécommunications
en France avec le 1er réseau en fibre optique (fttb/ftth) et la plus grande couver-
ture 4G du territoire, tenant compte l’adaptation vers la 5G de réseau mobile. Elle
constitue, par ailleurs, un groupe Média de premier plan présent dans la presse,
l’information, le sport et le divertissement.

Date Principaux événements historiques

Création de la SFR : La société française du radiotélé-
Février 1987
phone, par la compagnie gnérale des eaux.
15 décembre 1992 SFR ouvre le deuxième réseau gsm mobile français.
1999 La compagnie générale des eaux est rebaptisée vivendi.
Suite à l’annonce de l’arrivée imminente de free mobile
sur le marché des télécoms, création de red by sfr. La
11 octobre 2011
filiale de l’opérateur au carré rouge propose des offres
low-cost, sans engagement de durée.
Après avoir indiqué vouloir vendre 60% de parts sfr, vi-
vendi annonce avoir choisi Numericable (détenu par al-
5 avril 2014
tice). Le montant de la transaction est de 13,5 milliards
d’euros.
Altice achète les 18% de parts restantes de sfr à vi-
27 février 2015 vendi. Quelques mois plus tard, numericable-sfr devient
sfr group, avec la disparition de la marque numericable.
Suite à la page suivante
2.1. Présentation de SFR 5

suite du tableau historique de SFR

Date Principaux événements historiques
Altice annonce enfin posséder 95% du capital de sfr
10 août 2017
groupf.
SFR disparaît officiellement de la bourse. Altice possède
9 octobre 2017
100% de sfr.

Table 2.1: Historique de SFR, premier opérateur alternatif à France Télécom en

plein renouvellement.

Date Actions entreprises

SFR est le premier opérateur à lancer une offre sur son
10 novembre 2004
nouveau réseau de téléphonie mobile UMTS (3G).
2007 L’opérateur lance sa première offre ADSL.
La société compte environ 21 millions de clients au ni-
août 2012
veau mobile et plus de 5 millions de clients dans le fixe.
SFR est le premier opérateur français à proposer la 4G,
novembre 2012
pour les entreprises et pour le grand public.
Vivendi affirme son intention de vendre l’opérateur. Le
5 avril, il annonce avoir choisi l’acheteur : Numericable.
2014
La marque appartient à Altice, le groupe de l’homme
d’affaires Patrick Drahi.
L’autorité de la concurrence française donne son accord
pour la fusion entre Numericable et SFR. Cette fusion
30 octobre 2014 donne alors naissance au groupe Numericable-SFR. Pa-
trick Drahi espère obtenir le contrôle total de l’opéra-
teur au carré rouge.
Vivendi accepte de vendre ses 18 % de parts restantes
27 février 2015
à Altice.
SFR disparaît officiellement de la bourse. Altice possède
9 octobre 2017
100% de SFR.
Altice contrôle 95% de Numericable-SFR. Quelques
mois plus tard, les marques Numericable et Virgin Mo-
Novembre 2015 bile (acquise en juin 2014) disparaissent. Les clients de
Virgin Mobile migrent vers SFR et RED by SFR. Le
groupe Numericable-SFR devient SFR Group.
Patrick Drahi négocie des accords d’échange et réussit
2017 à s’approprier 80 millions de titres Altice de l’action de
SFR.
10 août 2017 Altice annonce posséder 95% du capital de SFR Group.
Suite à la page suivante
2.2. L’équipe projet 6

suite du tableau Actions entreprises

Date Actions entreprises

Table 2.2: Principales actions entreprise pour la promotion de SFR.

2.2 L’équipe projet

SI B2C signifie (système d’information business to consumer) est sous la direction
de Sandra LECHER figure 2.2, cette branche désigne l’ensemble des architectures
techniques et logiciels informatiques permettant de mettre en relation l’entreprise
SFR directement avec les consommateurs, c’est à dire également le marketing orienté
vers le consommateur. Cette branche couvre plusieurs axes :

Figure 2.2: Organigramme SI B2C

Mon stage se déroule dans l’équipe de l’ingénierie CRM sous la direction de Edgard
SIMON figure 2.3, l’équipe du projet se compose de :
 Nada Ben ABDELKRIM, ingénieur CRM.
 Youssef BOUSHAB, ingénieur CRM.
 Karim SAKLY, ingénieur CRM.
 Zakaria FAKHI, ingénieur CRM.
Mon encadrant dans l’entreprise SFR pendant ce stage est Youssef BOUSHAB. La
figure ci-dessous clarifie plus de détails sur la hiérarchie de manière simple au sein
de mon équipe Back Fixe.
2.3. Moyens disponibles et ressources humaines 7

Figure 2.3: Organigramme SI B2C

2.3 Moyens disponibles et ressources humaines

Pour accomplir la première partie de mon projet PFE, j’utilise en concertation
avec mon tuteur les outils informatiques suivants
 Matériels : PC (système d’exploitation Windows)/clavier/écrans/salle de
réunion.
 Temps de travail : 7 heures par jour. (la méthode de travaille c-a-d on fixe
environ 30 min chaque matin (un point), pour discuté l’avancement et les
difficulté rencontrées et consignes...
 Ressources humaines : Youssef BOUSHAB, Edgard SIMON et Kader BEN-
HARIRA.

2.4 Communication au sein de l’équipe

Toutes les communications sont effectuées verbalement, en harmonie avec La
démarche de l’équipe. La disponibilité de membres de l’équipe favorise et facilite
l’obtention des réponses rapides à des questions ponctuelles ainsi que pour solliciter
des entretiens ou des réunions via des salles de réunions, Skype ou Microsoft Teams.
Par ailleurs, j’ai la possibilité de demander des informations, généralement par mail
et à défaut par téléphone à l’ensemble de l’équipe projet. Ceci pour avoir des réponses
rapides d’aspects techniques en rapport Durant la période qui a coïncidé avec la
En la contrainte du COVID-19, la communication été accomplie par skype, et les
réunions sont organisées sur Microsoft Teams chaque jours.
 Chapitre 3

Dexter et New Sigma

Contents
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2 Description Dexter . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2.1 Méthodologies et Outils informatiques . . . . . . . . . . . . . 11
3.2.2 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.3 Réalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3 New Sigma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3.1 Description de New Sigma . . . . . . . . . . . . . . . . . . . . 20
3.3.2 Actions entreprises . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3.3 Perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.1 Introduction
Suite aux réunions tenues, depuis le début de mon stage, avec les responsables
de SFR et de One point, en tant qu’organe conseiller, le projet proposé consiste à
pallier les anomalies et les difficultés dont souffrent les interfaces de communications
au sein de SFR et les relations entre ses services et le client. En effet, le projet
qui repose sur Dexter et New Sigma a pour objectif de rendre plus performant
l’ensemble des interfaces afin de faciliter l’accès aux divers services proposés et de
répondre aux attentes et questionnements des clients de manière simple et durable.
Le projet original de SFR constitue, par conséquent, une démarche qui vise, non
seulement l’amélioration de la problématique discutée avec les structures de SFR,
mais il constitue, surtout, une réforme très profonde de la refonte et l’organisation
des pratiques qui peuvent convaincre les particuliers et les entreprises de de la qualité
des services. Mise à part, les attentes escomptées par la société SFR, des deux
projets Dexter et New Sigma, développés séparément. Des essais ont été entamés
en intégrant Dexter dans la mise en œuvre de New Sigma. Dans ce qui suit, nous
donnons les étapes propices pour la réalisation des deux projets. Pour mettre en
œuvre les principes des projets Dexter et New Sigma nécessaire à leur mise en
œuvre, nous avons évoqué dans ce chapitre le contexte, les objectifs, la description de
chaque logiciel et les outils informatiques utilisés. Cette démarche est entreprise par
SFR, suites aux difficultés consignées au niveau de partages des informations entre
collègues des services techniques et surtout aux problèmes concernant les relations
avec les clients qui constitue une priorité stratégique et urgente de la société. Pour
3.2. Description Dexter 9

ce faire SFR s’appuie sur les technologies de Dextre et New Sigma initiées dans ce
travail. Le projet global vise à bâtir un socle fiable, dynamique et efficace pour la
mission qui incombe aux services de SFR. Il permet en outre d’offrir un meilleur
service à l’aide d’un outil de gestion convenable aux attente des clients. Pour réaliser
ces objectifs, la mission qui m’était attribuée qui repose sur la méthode agile a
pour objectif principal, de participer à mettre en route ces projets, en fonction des
tâches proposées, successivement par les responsables de SFR durant mon stage. Les
travaux préliminaires réalisés sur DEXTER et les actions entreprise sur New Sigma
feront l’objet des paragraphes sont détaillés dans ce qui suit.

3.2 Description Dexter

L’application Data Exchange Terminal connu sous le vocable DEXTER, joue
un rôle important, en forte adhérence avec les projets de SFR, à savoir les projets
LEONARD et VALENTINE, dans la simplification du système d’information, noté
(SI). LEONARD et VALENTINE se chargent de l’infrastructure et les actions à
communiquer à temps réel aux processus business, les informations client, les plus
fraîches. L’objectif consiste à communiquer des offres à temps réel avec les points
de vente. Sachant que les informations actuelles sont réalisées à l’aide de ce qu’on
appelle cache à J-1. L’information actuelle étant mise à disposition via un cache à
J-1. Le cache J-1 constitue une sauvegarde dans une base de données qui contient
l’ensemble des offres envoyées aux points de vente au temps t moins 1 (t-1). Alors
que le cache J possède toute les informations relatives à la totalité des offres en
s’appuyant sur la mise à jour du cache J-1. Le rôle de Dexter consiste à rendre
fluide les parcours des informations et à améliorer les ventes récemment ajoutées
en exposant des données offres en temps réel. Dexter permet la modernisation de
l’architecture du Système d’Information des Lignes Fixes (SI FIXE) en supprimant
ce que l’on appelle «Electronic Customer Relationship Management (ECRM)» et
le cache J-1. Parmi les missions qui m’étaient attribuées durant ce stage s’inscrit
dans ce contexte afin de surmonter les difficultés notées durant le transfert des in-
formations avec le client. En effet les problèmes liés aux transferts des actions et des
informations à temps réel d’un grand nombre de clients influence leurs adhésions à
SFR. Avant d’aborder la partie concernant l’apport de Dexter, ses avantages et ses
objectifs, je trouve important de rappeler le principe de déroulement et les incon-
vénients de l’ECRM, comme programme existant. L’ECRM exploité pour mouvoir
l’information à partir des données clients, est un programme qui couvre toutes les
fonctions de gestion des relations clients, notamment les ventes. Il permet de repérer
les tendances et à automatiser un bon nombre d’interactions qui ont lieu quotidien-
nement dans l’entreprise grâce aux technologies de l’information avec l’utilisation
de l’environnement internet. Mais L’ECRM a des inconvénients qui résident dans
le risque de la perte de données et dans les problèmes de sécurité. Par ailleurs,
sa manipulation nécessite une formation spécifique, dont le coup se répercute sur
la réalisation du support technique. C’est la raison pour laquelle, j’étais chargé à
3.2. Description Dexter 10

participer au développement Dexter au sein de SFR. Il s’agit de réaliser les points

suivants :
 Mise en place d’un cache SI Offre fixe temps réel pouvant tenir 10 millions
d’appels par jour.
 Mise à la disposition du client le socle cache SI FIXE et le flux d’alimentation
donnée.
 Les Web Services Cache Fixe iso SME sont réalisés avec un branchement.
 Mise en place du flux de consommation des données pour le projet LEO-
NARD.
 Migrations opportunistes des applications nécessitant les données offre en
temps réel.
Avant d’aborder la méthode et les outils informatiques nécessaires à entamer les
travaux proposés jusqu’à’ nos jours pour Dexter, nous donnons dans la figure 3.1.,
l’architecture logique qui élucide les interactions entre les composants logiques dis-
tincts nécessaire au déploiement de Dexter.

Figure 3.1: Architecture logique Dexter.

L’architecture logicielle qui décrit la faisabilité du Back End utilisé à l’aide de JDK
8, Kafka 0.11, Zookeeper 3.4.10, Nifi 1.4.0, MongoDB 3.4.5. Ce logiciel longuement
discuté et entrepris dans le projet de stage au sein de SFR a pour objet de dévelop-
per une application qui permet le monitoring (surveillance) des données à manier
par Dexter. La surveillance des données Dexter est une pratique commerciale dans
laquelle les données critiques sont régulièrement vérifiées par rapport aux règles de
contrôle de la qualité. Ceci pour s’assurer qu’elles sont toujours de haute qualité
et répondent aux normes précédemment établies pour le formatage et la cohérence.
Dexter comporte un web service qui vérifie de manière proactive les nouvelles don-
nées par rapport à une liste de règles à mesurer les données enregistrées. Si des
problèmes de qualité des données sont détectés, une alerte est envoyée aux ingé-
nieurs tout en fournissant des informations sur la violation des règles afin que les
3.2. Description Dexter 11

données puissent être vérifiées. Les règles des données peuvent être créées et modi-
fiées selon les besoins afin d’appliquer de nouveaux objectifs de qualité des données.
Le gain en temps et en coup est exploité pour vérifier et transformer les données
avant leur déplacement. La surveillance des données favorise l’agilité de l’entreprise,
car de nouvelles initiatives impliquant des données peuvent être entreprises immé-
diatement. Dans la suite de ce chapitre seront présentés la méthode, et les outils
informatiques utilisés.

3.2.1 Méthodologies et Outils informatiques

Méthodologies :
L’équipe SI Back fixe, au sein de laquelle j’effectue mon stage et se trouve dans le
même étage, adopte comme méthode de travail, la méthode dite agile dont la com-
munication verbale est le moyen privilégié. La méthode agile est appliquée pour le
projet Dexter de telle façons qu’elle progresse à travers la mise en place d’une série
de « sprints ». À chaque lancement de sprint, une réunion de planification est organi-
sée afin de définir les tâches à exécuter, ainsi que sur la création du « sprint backlog
», qui comporte la liste globale des tâches à réaliser lors du sprint. Chaque jour du
sprint, tous les membres de l’équipe doivent y participer. La réunion de durée de 15
minutes, permet aux membres des équipes de partager, les travaux réalisés la veille
et ceux qui se déroulent le jour même. Ce qui permet d’échanger les informations,
surtout relatives aux problèmes qui peuvent entraver le bon déroulement du sprint.
Elle permet par ailleurs, de synchroniser les travaux de tous les membres de l’équipe.
La fin d’un sprint est marquée par une session de débriefing permettant de présen-
ter le travail achevé au responsable, et de partager des informations pouvant influer
sur le sprint suivant. Pour accomplir Dexter, j’utilise en concertation avec mon tu-
teur une étude comparative et une analyse sur un grand nombre de technologies
dans le cadre web (fig 3.2). Cette étude repose sur une enquête annuelle réalisée en
2019 de Stack Overflow auprès des développeurs. Cette enquête couvre les technolo-
gies préférées des développeurs en conformité avec les compétences Professionnelles.
Après analyse nous avons choisi, au sein de notre équipe la pile Java script MEAN
composée par les technologies MongoDB, Express.js, Angular et Node.js. Après les
quatre technologies clés de la pile, MEAN suit le modèle de pile traditionnel à 3 ni-
veaux, y compris le niveau d’affichage (Angular), le niveau d’application (Express.js
et Node.js) et le niveau de base de données (MongoDB). Ceci permet de créer, et
maintenir une solution open source simple, lisible toute en évitant les grognements
inutiles et les pièges courants toute en gardant l’application organisée. Ceci en res-
pect avec la notion de l’informatique durable que SFR compte adopter pour assurer
la qualité et la sécurité de l’application.
3.2. Description Dexter 12

Figure 3.2: Intérêt des développeurs pour les frameworks Front End.[1]

Outils informatiques :
Pour accomplir les tâches selon la méthode agile précitée, nous donnons dans ce qui
suit les caractéristiques des outils informatiques utilisés. Il s’agit :
 MongoDB : est une base de données non relationnelle. Dans Mongodb,
les données sont modélisées sous forme de document selon un style JSON.
Les documents sont les unités de base dans une base MongoDB. Ils sont
équivalents aux objets JSON et sont comparables aux enregistrements d’une
table dans une base de données relationnelle. Tout document appartient à
une collection et à un champ appelé _id qui identifie le document dans
la base de données. MongoDB enregistre les documents sur le disque sous
un format BSON (Json Binaire) ; Chaque collection forme un ensemble de
documents. Contrairement aux bases de données relationnelles, les champs
des documents d’une collection sont libres et peuvent être différents d’un
document à un autre. Le seul champ commun et obligatoire est le champ
"_id".
 Express.js : C’est un Framework basé sur Node.js qui permet de construire
des applications web mature, flexible et légère. Express simplifie la création-
d’un serveur http. Il apporte un grand nombre de fonctions prédéfinis qui
nous permet de se concentrer sur la logique de notre Application (Serveur),
plutôt que sur ses rouages bas niveau. Les Middlewares est un point très
important chez Express, en tant que fonctions ayant accès à la requête et à
la réponse et qui sont appelées avant le routeur.
 Angular : C’est un Framework qui permet de créer la partie Frontend des
applications web de type SPA (Single Page Application réactive). Cet outil est
très bien réalisé, complet et dispose d’un énorme support. Angular dispose de
nombreuses fonctionnalités telle que le Databinding, les Directives, le Scope
3.2. Description Dexter 13

Management, la validation des formulaires, les animations, le Routing, les

filtres et bien d’autres. C’est l’un des framework les plus complets et cohérents
de sa génération.
 Node.js : Node.js (Node) est une plateforme de développement open source
pour exécuter du code JavaScript côté serveur. Node est utile pour développer
des applications qui nécessitent une connexion permanente du navigateur au
serveur et est souvent utilisé pour des applications en temps réel telles que
le chat, les flux d’actualités et les notifications push Web.
 Angular Material : C’est une bibliothèque de composants d’interface uti-
lisateur pour les développeurs Angular. Les composants Angular Material
aident à construire des pages Web et des applications Web attrayantes, co-
hérentes et fonctionnelles tout en respectant les principes de conception Web
modernes tels que la portabilité du navigateur, la responsivité, l’indépen-
dance des appareils et la dégradation gracieuse.
 Elasticsearch : c’est un moteur de recherche basé sur la bibliothèque Lu-
cene. Il fournit un moteur de recherche en texte intégral distribué et multi-
locataire avec une interface Web HTTP et des documents JSON sans schéma.
Elasticsearch est développé en Java.
 dc.js : Il constitue est une bibliothèque graphique JavaScript qui permet
l’affichage de données numériques sous une forme graphique dynamique. Il
s’agit d’un outil important pour la conformation aux normes W3C qui utilise
les technologies courantes SVG, JavaScript et CSS pour la visualisation de
données.
 JWT :JSON Web Token (JWT) est un standard ouvert, Il permet l’échange
sécurisée de jetons (tokens) entre plusieurs parties. Cette sécurité de l’échange
se traduit par la vérification de l’intégrité des données à l’aide d’une signature
numérique. Elle s’effectue par l’algorithme HMAC ou RSA.

3.2.2 Conception
Compte tenu de la nature du projet, qui ne repose pas sur la démarche clas-
sique connue pour toute conception et réalisation d’une application informatique, la
méthode proposée repose uniquement sur les propositions successives du tuteur et
les responsables de SFR. Les travaux, réalisés seront donc présentés, en accord avec
la stratégie imposée par la démarche tracée par SFR. La méthode comporte deux
grandes parties. Il s’agit de développer une application Full Stack, liée à Dexter,
destiné à l’équipe SI Back Fixe. Il permet la surveillance des données des processus
de révision, de la qualité et l’évaluation proactives des données manipulées dans
DEXTER. Il permet aussi de s’assurer qu’elles sont bien adaptées à leurs objectifs.
Le projet qui consiste à établir une IHM capable de localiser facilement les causes
qui peuvent nuire au bon déroulement des abonnements et agir pour d’améliorer les
démarches favorables au bon fonctionnement de l’interface société /clients afin et de
les convaincre par un service transparent et efficace. L’application est gérée grâce
un tableau de bord qui comporte plusieurs interfaces et fonctionnalités. Parmi les
3.2. Description Dexter 14

fonctionnalités conçus, il convient de citer :

 Une gestion sécurisée des utilisateurs de l’équipe SI Back Fixe.
 Une interface pour l’administration.
 Une interface qui permet d’afficher les données générées par d’autres APIs.
 Une interface qui permet de réaliser une recherche spécifique sur un client
SFR, et faire remonter les données client à partir de l’API REST qui produit
des informations générale, factures, adresse, matériels, services,..
 Une interface profile qui permet de modifier les coordonnées personnelles, et
une fonctionnalité pour la prise des notes.
 Une interface qui permet la génération des graphes en exploitant des données
clients.
Avant d’aborder le développement de cette application, j’ai jugé très utile de pré-
senter un ensemble d’architectures qui décrivent la logique utilisée :
 Architecture logique de l’application (Fig. 3.2) :
Lorsque l’utilisateur fait une demande, celle-ci est d’abord traitée par An-
gular, qui est un langage côté client en JavaScript. Par la suite, la demande
entre dans la phase 2 qui est NodeJS qui constitue un langage côté serveur
en JavaScript. Dans la phase 3, c’est ExpressJS qui fait la demande à la base
de données suivie ensuite par MongoDB qui récupère les données et renvoie
la réponse à ExpressJS. ExpressJS renvoie ensuite une réponse au NodeJS,
puis NodeJS la transmet à Angular pour afficher le résultat.

Figure 3.3: Architecture logique de l’application

 Architecture logique de l’authentification (Fig. 3.3)

L’accès au tableau de bord nécessite une authentification. Lorsque nous enre-
3.2. Description Dexter 15

gistrons ou nous connectons à un utilisateur, nous soumettons les détails de

l’utilisateur au serveur. L’API identifie les informations utilisateur à partir de
la base de données, qui crée un jeton et le renvoie au client. Le client stocke
ce jeton dans le stockage local et le définit également dans l’en-tête. Lors du
prochain appel HTTP, ce jeton est vérifié par le serveur et le serveur Web
renvoie la réponse au client. La figure 3.3 illustre les actions qui se déroulent
entre le Navigateur et le serveur.

Figure 3.4: Diagramme de séquence pour l’authentification.

La méthode développée en accord avec les attentes et propositions de SFR comporte

une phase capitale, durant laquelle, depuis le début de mon stage, des réunions sont
tenues chaque jour pour rassembler les données, discuter les besoins en matériels
et en technologies et l’attribution des tâches, dont fait partie celle destinée à mon
équipe SI Back Fixe. Compte tenu de la nature du projet, dans le développement ne
repose pas sur la démarche classique connue pour toute conception d’une application
informatique, la méthode proposée dite méthode agile, repose uniquement sur les
propositions successives du tuteur et les responsables de SFR. Les travaux, réalisés
seront donc présentés, en accord avec la stratégie imposée par SFR. La méthode
comporte deux grandes parties.
 Back End :
1. Configuration d’un serveur express.
2. Configuration de la base de données.
3. Création d’une API RESTFULL qui permet la gestion des utilisateurs.
 Front End :
1. Création d’une application angular via Angular CLI.
2. Création des composants nécessaire de l’application.
3. Création des services qui interagissent avec le Back End.
3.2. Description Dexter 16

3.2.3 Réalisation
Après avoir achevé l’étape de conception de l’application selon la méthode agile,
nous allons entamer dans ce paragraphe la partie réalisation et implémentation dans
laquelle on développe une étape du système destiné à l’exploitation par les utilisa-
teurs finaux. A la fin de cette partie, les objectifs des propositions des responsables
et du tuteur doivent avoir été atteints pour les utiliser dans la suite du projet glo-
bal de SFR. Dans le contexte de la réalisation de cette partie de Dexter, et son
déploiement, nous donnons successivement les interfaces conçus pour la réalisation
des objectifs des actions entreprises. Il s’agit l’interface page d’accueil (Fig. 3.4),
l’interface créer un compte (Fig. 3.5), interface se connecter (Fig. 3.6), interface
recherche paramétrée (Fig. 3.7), interface Administrateur (Fig. 3.8), Interface sup-
pression d’un utilisateur (Fig. 3.9) et interface Ajout d’un nouvel utilisateur (Fig.
3.10).
 Interface page d’accueil :

Figure 3.5: Page d’accueil

 Interface créer un compte :

3.2. Description Dexter 17

Figure 3.6: Créer un compte

 Interface se connecter :

Figure 3.7: Se connecter

 Interface recherche paramétrée :

3.2. Description Dexter 18

Figure 3.8: Graphes

 Interface recherche paramétrée :

Figure 3.9: Recherche paramétrée

 Interface administrateur :
3.2. Description Dexter 19

Figure 3.10: Administration

 Interface suppression d’un utilisateur :

Figure 3.11: Suppression d’un utilisateur

 Interface pour créer un nouveau utilisateur par l’administrateur :

3.3. New Sigma 20

Figure 3.12: Ajouter un nouveau utilisateur

3.3 New Sigma

New Sigma est le deuxième grand projet que compte réaliser SFR. Dès le début de
mon stage, j’étais informé de ma participation au développement de New Sigma au
sein de mon équipe SI Back Fixe, en concertation avec les autres équipes impliquées
dans ce projet. Dans ce cadre, j’ai assisté à l’ensemble des réunions quotidiennes
qui m’ont permis d’évaluer l’importance que présente New Sigma pour SFR. Ces
réunions continuent à distance à cause de covid 19. En attendant, j’ai réalisé à la
demande du responsable de mon équipe, des interviews avec des représentants des
équipes désignées pour participer à la réalisation de ce projet. L’objectif consiste
à connaître les technologies que comptent utiliser ces équipes dans le projet New
Sigma. Les résultats des interviews font l’objet du chapitre 4 du rapport.

3.3.1 Description de New Sigma

Le projet New Sigma consiste à mettre en œuvre un nouvel outil de diagnostic
ouvert, dynamique et évolutif pour la direction du Service Client (SC). L’outil es-
compté repose sur une nouvelle interface utilisateur qui facilite pour le service client
de type commercial et technique.

3.3.2 Actions entreprises

Le projet SFR a pour objet de penser et de mettre œuvre, en impliquant toutes
les équipes du système informatique (SI) un nouvelle plateforme DIAG dynamique
doté d’une nouvelle, simple et moderne interface utilisateur pour apporter plus de
malléabilité et aux entités métier pour déployer avec efficacité leur process. Selon
3.3. New Sigma 21

les discussions tenues à propos de ce projet, il est envisagé dans un premier temps
de concevoir une méthodologie afin de trouver une solution limitée au périmètre
fonctionnel. Il consiste à traité en premier lieu l’explication facture. Dans ce contexte,
le projet à impliquer aussi les équipes métier commerciales, techniques . . . Des
ateliers de conception ont été proposés dans ce sens.
Le projet qui vise à améliorer le quotidien des utilisateurs, repose sur l’existant afin
de maitriser les enjeux de New Sigma à tous les niveaux hiérarchiques. Pour mieux
comprendre ce projet et mettre en évidence les technologies les plus adaptés à sa
réalisation, plusieurs phases d’interview sont également menées à différents niveaux
de management qui permet en outre de comprendre l’intérêt d’un tel projet à tous
les niveaux hiérarchiques.

3.3.3 Perspectives
Compte tenus des aspects mentionnés dans les précédentes paragraphes et Suites
aux multiples réunions quotidiennes, il m’a été attribué, en tant qu’un développeur
intégrateur de participer à la réalisation du projet Sigma. Dans ce cadre je viens
d’avoir le code de travail et une réunion est fixée pour la deuxième semaine de juin
pour me mettre en phase avec les travaux déjà développés par les autres équipes et
pour me clarifier les phases réalisées et la mission précise qui m’incombe en tant que
développeur intégrateur.
 Chapitre 4

Synthèse des interviews

Contents
4.1 Chaîne de production de site web . . . . . . . . . . . . . . . 22
4.2 Objectifs des interviews . . . . . . . . . . . . . . . . . . . . . 23
4.3 Résultats des interviews . . . . . . . . . . . . . . . . . . . . . 24
4.3.1 Interview avec LEFEBURE Jordan de l’équipe : FAST . . . . 24
4.3.2 Interview avec PRAUD, jean-Gwilherm (Outil de communica-
tion) (Site de Rennes) . . . . . . . . . . . . . . . . . . . . . . 24
4.3.3 Interview avec ABOUCHI Aziz de l’équipe : OTT . . . . . . 25
4.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Le présent chapitre décrit les interviews que j’ai réalisées durant mon stage avec
des compétences des équipes qui participent au développement des projets de SFR.
dont fait partie New Sigma. Les interviews ont pour objectifs, la connaissance des
technologies utilisés par chaque équipe impliquée afin d’optimiser les outils néces-
saires à la mise en œuvre d’une stratégie de travail qui améliore le fonctionnement
des équipes et harmonise et coordonne les actions à entreprendre pour le dévelop-
pement du projet de SFR. La coordination des travaux des équipes a pour finalité
la promotion de la présence de l’entreprise sur le web. Avant de développer la partie
concernant les interviews, il convient de rappeler le contexte, les principales compé-
tences et les étapes requises dans la chaîne de production d’un site internet. Parmi
ces compétences inévitables à cette réalisation, figurent dans l’ordre de leur inter-
vention dans cette chaîne : les Wireframers / Prototypers, les web Designers, les
intégrateurs web et le Développeurs web.

4.1 Chaîne de production de site web

La chaîne de production d’une application web (Fig. 4.1), représente une plate-
forme de base qui évoque les équipes et les compétences impliquées dans ce projet,
leurs missions consécutives. Tenant comptes des spécialités nécessaires à la produc-
tion d’une application web représentées, dans l’ordre de leurs interventions dans la
figure 4.1, on constate que la réalisation du projet repose sur une suite de tâches
complémentaires à effectuer :
 Le projet commence par l’analyse de la concurrence suivi par une structura-
tion avant d’entamer la phase de développement du contenu selon la chaîne de
production de l’application web qui commence par une phase de wireframing,
4.2. Objectifs des interviews 23

Figure 4.1: Description de la chaîne de production d’un site web.

qui va conduire à la création de prototypes. Le prototype, ainsi réalisé, sous

forme de maquettes interactives permet de comprendre le fonctionnement du
site.
 Une fois validées, les wireframers qui sont des documents de référence pour
le designer et les développeurs, vont permettre aux développeurs de visuali-
ser l’arborescence et de déterminer l’organisation des contenus tels : Texte,
vidéos, images. . . Les wireframers sont ensuite transmis aux designers. Les
designers se chargent d’élaborer une identité visuelle du site internet. La
maquette de haute définition réalisée constitue un support de base pour les
travaux de l’intégrateur web.
 L’intégrateur web ou développeur front-end, a pour mission de mettre en
places les premières lignes du code et d’organiser la structure d’une appli-
cation internet. Ce code équivalent à un squelette visuel et fonctionnel sera
transmis au développeur web.
 Le développeur web exploite la maquette fonctionnelle réalisée par l’intégra-
teur web comme squelette visuel pour transformer ces données en forme de
contenus réels et de fonctionnalités nécessaires au projet.

4.2 Objectifs des interviews

L’analyse des données évoquées précédemment dans la chaîne de production
d’une application web montre que l’intégrateur web, appelé développeur front-end
joue un rôle important dans cette séquence. En effet l’intégrateur web est la première
4.3. Résultats des interviews 24

étape clé nécessaire à la mise en ligne d’un site internet. Il constitue le traducteur
du designer pour les navigateurs web. Il met en œuvre les premières bases du site
internet. C’est la raison pour laquelle, en tant qu’intégrateur web et en concertation
avec les responsables nous avons jugé utile d’entreprendre une série d’interviews
avec les équipes des autres compétences afin de connaître leur méthodes de travail et
identifier les technologies développées. Pour ce faire j’ai préparé un certain nombre de
questions en relation avec les travaux et technologies développés par les différentes
équipes. A la lumière des réponses à mes questions, je pourrais en premier lieu
connaître les technologies développées actuellement dans la chaîne de production de
l’application web de SFR. L’analyse de ces différentes technologies me permet de
comparer leur efficacité et leurs parts de contribution à la réalisation de l’application
web, ainsi que la facilité de leurs interactions avec les autres interfaces.

4.3 Résultats des interviews

4.3.1 Interview avec LEFEBURE Jordan de l’équipe : FAST
Cette interview a donné l’occasion à Monsieur LEFEBURE de détailler, suite à
des questions précises, le rôle que joue l’équipe FAST dans la chaîne de production
d’une application web et l’ensemble des technologies développées. La synthèse re-
trace uniquement les grandes lignes cette interview. D’après les réponses de Monsieur
LEFEBURE, cette étape équipe fait appel à la technologie reposant sur framework
frontal react. Le recours à cette technologie est dû à une étude accomplie sur de deux
framework frontale : angular et react. Le framework react a été choisie car angular
demande beaucoup de refonte, c’est à dire la migration de angularJs vers angular.
Ceci pour satisfaire le choix qu’a pris Google d’arrêter le framework angularJS. Par
ailleurs, monsieur LEFEBURE a mis en exergue les avantages et les risque de la
méthode de travail de l’équipe FAST :
 Parmi les avantages cités, j’ai noté que la technologie utilisant react reste la
plus performante et la mieux adaptée ces dernières années. Selon lui, C’est
une technique rapide à exécuter grâce à la disponibilité de documentation et
par l’évolution de la communauté.
 La critique émise pour le framework react concerne sa pérennité qui néces-
site l’amélioration de la technologie choisie, afin d’assurer la stabilité et la
durabilité de l’application.
Pour finir, Monsieur LEFEBURE Jordan à mentionner une panoplie d’autres tech-
nologie utilisées telles que : bootstrap, html, css, jquery. . .

4.3.2 Interview avec PRAUD, jean-Gwilherm (Outil de communi-

cation) (Site de Rennes)
Suite à l’interview, effectuée avec Monsieur PRAUD Jean-Gwilherm et l’analyse
des points soulevés, je donne dans ce qui suit les technologies employées par son
équipe, ainsi que les avantages et les risques associés à leur utilisation. En effet, l’in-
4.3. Résultats des interviews 25

tégration web chez l’équipe de PRAUD Jean-Gwilherm est entamée par l’intégration
directe, via des propositions, des pages du site sans adopter la phase de prototypage
et design graphique. Pour accomplir cette étape, l’équipe utilise le framework angu-
lar, depuis la quatrième version jusqu’au angular 9. Sachant que angular material
est une bibliothèque de composants, d’interface utilisateur pour les développeurs
angular. Les composants angular material aident à créer des pages web et des appli-
cations web attrayantes, cohérentes et fonctionnelles. Ceci en respectant les principes
de conception web modernes tels que la portabilité du navigateur et l’indépendance
de l’appareil. L’équipe assure une UI/UX (User Interface/User Expérience) consis-
tante en se basant sur le type du besoin (métier), le contenue et nombre de page
avant d’arriver à l’information. Par ailleurs, l’utilisation par l’équipe du plugin ligh-
thouse de Google qui est un outil open source et automatisé pour améliorer la qualité
des pages web. Ce dernier peut être exécuté sur n’importe quelle page web, publique
ou nécessitant une authentification. Il vérifie les temps de chargement, l’accessibilité
et l’optimisation des moteurs de recherche des pages web. Monsieur PRAUD Jean-
Gwilherm a mis, par la suite, l’accent sur les avantages et les risques des technologies
précitées :
 Parmi ces avantages il convient de citer :
1. Angular est modulaire / maintenabilité/ service/ nécessitent une réflexion
pour établir une architecture moderne.
2. L’architecture basée sur les composants d’angular permet de créer une
interface utilisateur avec des pièces uniques (composants). Elle permet
également de réutiliser ces composants dans l’application. Ces éléments
simplifient également les tests et la maintenance utilisateur.
 Les risques :
1. La complexité du framework angular, réside sur la difficulté de gestion
des composants. A titre d’exemple, les développeurs sont obligés d’avoir
plusieurs fichiers pour un composant angular (doc.html, doc.css, doc.ts,
doc.spec.ts) pour maintenir les interfaces du cycle de vie des éléments.
Durant cette interview Monsieur PRAUD Jean-Gwilherm a évoqué d’autres techno-
logies utilisées. Parmi ces technologies figurent : bootstrap, html, css, jquery, Outils
de teste,...

4.3.3 Interview avec ABOUCHI Aziz de l’équipe : OTT

Pour compléter mon projet d’investigation concernant l’apport et la performance
des technologies utilisées par les différentes équipes impliquées dans la chaîne de pro-
duction de l’application web, j’ai eu le plaisir d’organiser une séance de questions
réponses avec Monsieur ABOUCHI, membre de l’équipe OTT. La synthèse des di-
verses réponses précises exprimées par Monsieur ABOUCHI m’a permis de mieux
connaître la raison pour laquelle l’équipe OTT a opté pour les technologies et les
méthodes utilisée. Il s’agit du framework vue.js pour le développement frontal. Cette
4.4. Conclusion 26

technologie et la méthode de sa réalisation ont été retenues, suite à une étude ex-
haustive préliminaire sur trois frameworks, à savoir : « angular, vue.JS et react».
Cette étude a pris en considérations deux aspects, le premier à trait commercial
et le second a une portée technique. L’analyse des résultats de cette étude a per-
mis à l’équipe de conclure que react et angular s’adaptent à l’aspect commercial,
ce qui n’est pas le cas pour vue.js. L’étude a permis de déduire, également que les
technologies les mieux adaptées à l’aspect technique sont :
 React : Toutefois le développement à l’aide react repose sur des composants
externes et la gestion et leur choix précis.
 Angular : C’est un framework frontale complet, il adopte tous les composants
dont on a besoin.
 Vue.js : Comparée aux react et angular, vue.js se distingue par son dévelop-
pement. Par ailleurs, vue.js à l’avantage de posséder un code écrit très simple
à lire, à écrire et réutiliser.
Par ailleurs, Monsieur ABOUCHI a tenu de confirmer que l’équipe OTT, a adopté
une méthode en harmonie avec les autres équipes toute en respectant les démarches
de la chaîne de production d’une application web. Il a ensuite évoqué l’utilisation
d’autres technologies, en l’occurrence, la technologie Zeplin, Bootstrap, CSS.

4.4 Conclusion
Les interviews que j’ai réalisé avec les équipes qui participent à la production
d’une application web au sein de l’entreprise SFR m’ont permis de comprendre le
principe de fonctionnement de chaque équipe et à obtenir des informations sur les
technologies utilisées et sur les étapes de la chaîne de production d’une application
web. Les interviews, inscrites dans mon stage, en tant qu’intégrateur au sein de SFR,
ont pour objectif principal, l’établissement d’un modèle de planification stratégique
qui harmonise les actions entreprises par les différentes équipes afin de concevoir
une méthodologie fiable et favorable à la réalisation d’un site web performant et
dynamique. Pour réaliser ces interviews, une analyse préliminaire sur les compé-
tences qui interviennent dans les phases successives de la chaîne de production d’un
site internet a été accomplie. Une synthèse des principaux résultats de l’analyse des
données de ces interviews montre que :
 L’équipe FAST utilise une technologie basée sur framework frontal React
choisie au détriment du framework angular qui nécessite de nombreuses re-
fontes. Par conséquent la méthode basée sur framework frontal React est la
mieux adaptée pour ce genre de travaux, elle se distingue par sa performance
et sa rapidité d’exécution compte tenue la disponibilité des documents et
l’évolution de la compétence de la communauté. Cependant cette technolo-
gie est incapable d’assurer l’amélioration de la stabilité et la de la durabilité
de ses applications.
 Chez l’équipe Outil de communication (Site de Rennes), l’intégration web
commence par l’intégration directe des pages du trois site, sans adopter la
4.4. Conclusion 27

phase de prototypage et design graphique. Durant cette phase, l’équipe utilise

le framework angular, depuis la quatrième version jusqu’au Angular neuf. Les
composants de Angular Material permettent de créer des pages Web et des
applications Web attrayantes, cohérentes et fonctionnelles. L’équipe assure
une Interface/User Experience (UI/UX) consistante. L’utilisation du plu-
gin Lighthous de Google en tant que outil open source automatisée permet
d’améliorer la qualité des pages Web. La méthode permet, par ailleurs, de
vérifier les temps de chargement, l’accessibilité et l’optimisation des moteurs
de recherche des pages Web. Cette technologie a l’avantage de l’établissement
d’une architecture moderne grâce à l’angular et modulaire /maintenabilité/
service/. Sachant que l’architecture basée sur les composants d’angular per-
met de créer une interface utilisateur avec des pièces uniques (composants).
Les possibilités de la réutilisation de ces composants dans l’application, sim-
plifie les tests et la maintenance utilisateur. Les risques relatives à l’utilisation
de cette technologie résident dans la complexité du framework angular et la
difficulté rencontrée lors de la gestion des composants. Pour finir, il convient
de souligner que les équipes utilisent d’autres technologies pour participer
à la chaîne de production du site web, notamment : bootstrap, html, css,
jquery, outils de teste,...
4.4. Conclusion 28

Conclusion générale
J’ai effectué mon stage de Projet de Fin d’Etude du Master 2 informatique à
l’université de la réunion, auprès de la Société française du radiotéléphone (SFR).
Ma mission, ne se limitait pas à développer une application bien précise, mais j’étais
intégré en tant que développeur Angular, spécialité nécessaire pour (i) participer,
sur la réflexion de la mise en œuvre des éléments de base sur lesquels vont reposer
la plateforme du projet global de SFR via Dexter et New sigma. (ii) harmoniser et
promouvoir les compétences en technologies disponibles afin de les exploiter de ma-
nière efficace dans la réalisation du projet. (iii) En parallèle de cette mission, initiée
par plusieurs réunions, discussions et échange de connaissances, j’ai abordé l’exécu-
tion de mon travail comme suite : Pour les deux premiers points, j’ai participé aux
réunions et les actions entreprises pour le la conception du projet qui est en phase de
construction. Alors que pour le troisième point j’ai réalisé les travaux sur le projet
Dexter. Ces applications ont donné lieu à des résultats importants qui peuvent servir
dans l’application du projet global. gAu cours de ce stage, j’ai capitalisé sur mes
compétences acquises au cours de ma formation afin de les exploiter dans un milieu
professionnel, et sélectionner ce dont j’avais besoin pour réaliser, jusqu’à mainte-
nant ce qui était attendu de moi. C’est ainsi que j’ai aussi complété mon savoir avec
l’acquisition de nouvelles technologies nécessaires au développement de Dexter et de
New Sigma. Parmi ces technologies je cite : MongoDB, Express.js, Angular, Node.js,
Angular Material, Elasticsearch, . . . Au final, je considère que les applications réali-
sés jusqu’à rédaction de ce rapport, répondant au demande de mon tuteur seront de
grande utilité pour une progression de leur développement. En attendant le feu vert
pour entreprendre le projet Sigma, les applications Dexter réalisées dans le présent
travail ont permis de surmonter les difficultés notées durant le transfert des infor-
mations avec le client. par ailleurs, Ce stage m’aura permis d’avoir une expérience
très appliquée du monde professionnel, notamment en ce qui concerne, le côtoiement
des équipes de SFR la réflexion et la gestion de projet, tenant comptes des actions
pratiques des échange des idées et des connaissance en technologie nécessaires au
développement du projet global de SFR. C’est une opportunité qui me permettra
de continuer mon stage, me complétera les connaissances acquises à l’université et
me faciliter l’insertion dans le monde socio-économique.
Annexes
 Annexe A

A.1 Déroulement de stage et difficultés rencontrées

Le stage a débuté le 10 Février 2020 auprès de la société SFR par une réunion
avec Monsieur EDGARD Simon, cadre supérieur de SFR et Monsieur BOUSHAB
Youssef, désigné comme tuteur du projet. Au cours de cette réunion ont été discutés
la problématique du projet proposé, ses objectifs et les démarches de sa réalisation,
selon la méthode agile. Durant l’étape allant 10 Février au 15 Mars, j’ai participé
à toute les réunions quotidiennes au cours desquelles, je recevais les tâches à en-
treprendre et les résultats escomptés. A une cadence de travail de sept heures par
jour, au sein de mon équipe, j’ai abordé la conception des applications en relation
avec Dexter en attendant le Ok pour entamer New Sigma. Avec les autres équipes
j’ai programmé une série d’interviews inscrites dans le cadre du projet Sigma qui
a fait l’objet, entre autre d’une réunion tenue entre les responsables SFR et leur
conseiller One point. Une autre réunion a été programmée, mais reportée à cause
du Covid-19. Suite aux circonstances provoquées par Covid-19, j’étais contraint à
continuer à travailler à distance, avant de m’informer que mon stage est annulé à
partir du 24 mars. Malgré, cette fâcheuse contrariété, j’ai continué à développer chez
moi les travaux en rapport avec Dexter. Ceci m a rendu grand service après avoir
reçu l’ordre de reprendre mon stage à distance, avec un nouveau avenant à partir du
14 avril au 31 août. Malgré ces circonstances, je m’estime chanceux d’avoir repris
mon stage et j’ai doublé l’effort, je travaille jours et nuit, malgré les difficultés de
logement et les moyens électroniques de travail, qui ont été grâce à une commande
d’un kit et boitier de fibre optique que SFR m’a facilité les démarche pour l’avoir
en temps convenable. L’ensemble de ces travaux et ceux accomplis dans les parages
de SFR ont donné dans ce rapport.
A.2. Formation Mooc 31

A.2 Formation Mooc

Dans le besoin renforcer mes connaissances et améliorer mon savoir et savoir-faire
en technologies informatiques, j’ai suivi, en parallèle de mon stage, des formations
en rapport de développement informatique en ligne ou sur des vidéos (cours de
Monsieur Yousfi). Dans ce qui suit, je mentionne les principales formations suivies :
 Pluralsight :
1. Angular : Getting Started.
2. Building an Angular Application with NodeJS.
3. Angular Reactive Forms.
4. Introduction to MongoDB.
5. Using MongoDB with NodeJS.
6. Integrating Angular with Node.js RESTful Services.
 Youtube :
1. youssfi mohamed : Développement web Front End avec Angular.
2. Academind : Angular Material.
3. Codeevolution : Angular Authentication Tutorial.
 Livre : Become a NINJA with Angular/ Ninja Squad.
 Bibliographie
[1] Résultats du sondage auprès des développeurs sur les frameworks front End,
https://insights.stackoverflow.com/survey/2019 (Non cité.)
[2] Pluralsight,
https://app.pluralsight.com/library/ (Non cité.)
[3] Angular, Angular Material, Angular CLi, Nodejs, ExpressJS, Mongodb, Mon-
goose,
https://www.youtube.com/ (Non cité.)
Résumé : Le rapport de stage, effectué à SFR, s’inscrit dans le cadre du projet de
fin d’étude de master M2 informatique à l’université de la Réunion. Il est entamé,
en premier lieu, par la description de l’environnement du déroulement de mon
stage et les possibilités, en ressources humaines, en matériels et en logistiques,
offertes par la société française du radiotéléphone (SFR). La mission qui m’est
attribuée au sein de SFR, consiste à contribuer par le développement Front End
aux projets Dexter et New Sigma. Les projets consiste à créer, dans sa nouvelle
dynamique, une nouvelle plateforme qui simplifie les procédures de communication
et de monitoring entre les services de la société, ainsi que celle entre ces services
et le client. La méthode proposée repose sur les logiciels Dexter et New Sigma. La
mission, essentiel qui m’a été attribuée consiste à participer à la réflexion sur la
méthodologie à mettre en place tenant compte des compétences et les technologies
disponibles afin de développer progressivement, en commun Dexter et new Sigma.
Le rapport expose, également, les actions entreprises, sous forme d’interviews afin
de me familiariser avec l’environnement et les structures qui participent au projet
de SFR, notamment New Sigma et de connaître les technologies disponibles. Par la
suite, le rapport expose en détail, la problématique du projet Dexter et et les actions
entreprises jusqu’à maintenant sur New sigma. Pour Dexter il s’agit d’entamer le
développement une application Full Stack ascendante via Angular/NodeJS suite
à une étude qui couvre les besoins en méthode de travail, la problématique, et la
vision globale de projet Dexter.
Au sujet de New Sigma j’ai assisté à des réunions quotidiennes pour exposer et
discuter le projet New Sigma, il s’agit des maquettes à intégrer pour New Sigma,
objectifs, tâches, et planning. De plus une étude a été faite sur les technologies
Front End utilisées par les différentes équipes au sein de SFR. Une première
présentation en interne, a été exposée sur l’étude a été faite, Il s’agit de la synthèse
des interviews accomplies avec des développeurs Front End.

Mots clés : SFR, Front End, Dexter, New Sigma, Angular, NodeJS, Full Stack.
Abstract : The internship report, carried out at SFR, is part of the end-of-study
project for a master’s degree in computer science at the University of Reunion.
It is started, first of all, by the description of the environment of the course of
my internship and the possibilities, in human resources, materials and logistics,
offered by the French radiotelephone company (SFR). The mission assigned to
me within SFR, consists in contributing by Front End development to the Dexter
and New Sigma projects. The projects consist in creating, in its new dynamics, a
new platform which simplifies the procedures of communication and monitoring
between the services of the company, as well as that between these services and
the customer. The proposed method is based on Dexter and New Sigma software.
The mission, essential which has been assigned to me, consists in participating in
the reflection on the methodology to be implemented taking into account the skills
and the available technologies in order to develop gradually, jointly Dexter and
new Sigma. The report also describes the actions taken, in the form of interviews,
to familiarize myself with the environment and the structures involved in the SFR
project, in particular New Sigma, and to learn about the technologies available.
Subsequently, the report sets out in detail the problematic of the Dexter project and
and the actions taken so far on New sigma. For Dexter it is a question of starting
the development of an ascending Full Stack application via Angular / NodeJS
following a study which covers the needs in working method, the problematic, and
the global vision of Dexter project.
About New Sigma I attended daily meetings to expose and discuss the New
Sigma project, these are models to integrate for New Sigma, objectives, tasks, and
planning. In addition, a study was made on the Front End technologies used by the
different teams within SFR. A first internal presentation, was exposed on the study
was made, It is about the synthesis of the interviews accomplished with developers
Front End.

Keywords : SFR, Front End, Dexter, New Sigma, Angular, NodeJS, Full Stack.