Version Finale Rapport Hssine Maaoui

Mastère professionnel Co-construit en
Ingénierie des Applications Web-Nuagique

MPWIN
Rapport de soutenance
Présenté par
Hssine MAAOUI
Pour l’obtention du
Diplôme de mastère professionnel
Développement d’une plateforme de communication

interne
Réalisé à
Redlean Services
Soutenu le ..
Devant le Jury :
Président : M./Mme Prénom NOM

Rapporteur : Mme Prénom NOM
Encadrant académique : Mme Alia MAALOUL
Encadrant professionnel : Mme Nader BAHROUN
Année Universitaire : 2019/2020

Dédicaces
A la mémoire de mon père,

Votre image et vos sourires ne m’ont jamais quitté.
Je prie tous les jours pour que Dieu vous récompense pour tous les efforts et
les sacrifices que vous avez consentis pour mon succès.
Dans mon cœur et mes pensées, tu resteras toujours présent …
A ma précieuse mère,
Pour l’être le plus cher, pour celle qui m’a donné la force dans les
moments de faiblesse …
Nulle expression ne peut traduire les sentiments les plus nobles que j’ai
à vos égards.
Vous m’avez sans cesse soutenu dans les moments les plus délicats en
m’inspirant toujours un nouveau souffle et un perpétuel élan. Veuillez-y
trouver l’expression de mon grand amour et de ma profonde affection.
A mes chères sœurs,

Pour leur infinie patience et indéfectible soutien, que Dieu vous protège et
vous donne la joie et le bonheur.
A mes chers Mpwiners,

Pour tous ceux qui m’ont soutenu et encouragé, pour vous tous, que Dieu
vous assure une bonne continuation.
Je dédie ce travail.
Remerciements
Au terme de ce travail,
Je voulais remercier profondément mon encadrante Mme. Alia MAALOUL.

Autant de phrases aussi expressives soient-elles ne sauraient montrer ma
gratitude d’avoir accepté de m’encadrer tout au long de ce projet.
Votre compétence professionnelle, votre pertinence pédagogique et vos
qualités humaines suscitent toute mon admiration. Vos conseils judicieux et
votre soutien, quand le découragement me guettait, m’ont été amplement
bénéfiques.
Que dieu vous bénisse, et vous donne le bonheur et le succès. Et que ce
travail soit le reflet du respect et l’estime que j’ai envers vous.
Je remercie également M. Nader BAHROUN, le Manager de la société

Redlean et mon superviseur. Vous m’avez honoré de m’avoir confié ce travail
et je suis très fier de l’avoir travaillé avec vous. Je suis énormément
reconnaissant pour tout le temps que vous m’avez consacré. Que ce travail
soit le reflet du respect et l’estime que j’ai envers vous.
J’adresse également des remerciements particuliers à M. Aymen

MEDIMAGH et M. Hani CHALOUATI les directeurs de la société Redlean
pour vos encouragements et votre soutien.
Mes sincères remerciements à Mme. Afef DEMNI, ma collègue à Redlean

pour votre disponibilité, pour la générosité de votre effort et pour tout le
temps que vous m’avez consacré.
Résumé
Dans un environnement en turbulence, l'entreprise a plus que jamais besoin
de soigner sa communication interne pour apporter une certaine stabilité au
sein de ses équipes. Souvent négligée face à la communication externe, sa
grande sœur, la communication interne est toutefois devenue une
compétence stratégique. L'enjeu pour les organisations est en effet de taille :
il s'agit de savoir communiquer sur leurs valeurs et objectifs communs.
Ce projet consiste à développer une plateforme de communication interne
pour la société redlean qui permet de maintenir un lien avec les
collaborateurs et facilite les échanges internes et ce, en utilisant les
technologies suivantes : Angular – React Native – Firebase – Node Js -
Javascript.
Abstract
In a turbulent environment, the company more than ever needs to take care
of its internal communication to bring a certain stability to its teams. Often
overlooked in the face of external communication, its big sister, internal
communication has nevertheless become a strategic skill. The stakes for
organizations are indeed high: it is about knowing how to communicate on
their common values and objectives.
This project consists of developing an internal communication platform for the
redlean company which allows to maintain a link with collaborators and
facilitates internal exchanges, using the following technologies: Angular -
React Native - Firebase - Node Js – Javascript.
Table des matières
Introduction générale .................................................................................................................. 1

Chapitre 1 : Cadre général du projet .......................................................................................... 3
Introduction ................................................................................................................................ 4
1. Présentation de redlean .......................................................................................................... 4
2. Présentation de projet ............................................................................................................ 4
3. Etude de l’existant ................................................................................................................. 5
3.1. Présentation de projet ..................................................................................................... 5
3.2. Critique de l’existant ....................................................................................................... 5
3.3. Solution proposée ............................................................................................................ 5
4. Méthodologie de gestion du projet adoptée ........................................................................... 6
5. Mise en œuvre la méthode Scrum ......................................................................................... 6
6. Choix de langage de modélisation ......................................................................................... 7
Conclusion .................................................................................................................................. 7
Chapitre 2 : Analyse & spécification des besoins ..................................................................... 8
Introduction ................................................................................................................................ 9
1. Identification des besoins ....................................................................................................... 9
1.1. Besoins fonctionnels ....................................................................................................... 9
1.1.1. Application mobile « Android » .............................................................................. 9
1.1.2. Application Web « Back office » ............................................................................ 9
1.2. Besoins non fonctionnels .......................................................................................... 10
2. Description détaillée des cas d’utilisations ......................................................................... 10
2.1. Définition ...................................................................................................................... 10
2.2. Identification des acteurs du système ............................................................................ 11
2.3. Identification de cas d’utilisation .................................................................................. 11
2.3.1. Diagramme de cas d’utilisation général ................................................................. 12
2.3.2. Diagramme de cas d’utilisation « Authentification administrateur » .................... 13
2.3.3. Diagramme de cas d’utilisation « Gérer comptes administrateurs » ..................... 14
2.3.4. Diagramme de cas d’utilisation « Gérer évènement » .......................................... 15
2.3.5 Diagramme de cas d’utilisation « Gérer formation » ............................................. 16
2.3.6 Diagramme de cas d’utilisation « Gérer certificat » ............................................... 17
2.3.7 Diagramme de cas d’utilisation « Gérer collaborateur » ....................................... 18
2.3.8 Diagramme de cas d’utilisation « Gérer note de frais » ......................................... 19
2.3.9 Diagramme de cas d’utilisation « Gérer demande administrative » ...................... 20
2.3.10 Diagramme de cas d’utilisation « Inscription utilisateur » ................................... 21
2.3.11 Diagramme de cas d’utilisation « Authentification utilisateur » .......................... 22
2.3.12 Diagramme de cas d’utilisation « Gérer réclamation » ....................................... 23
2.3.13 Diagramme de cas d’utilisation « Gérer demande administrative » .................... 24
2.3.14 Diagramme de cas d’utilisation « Gérer note de frais » ....................................... 25
Conclusion ............................................................................................................................... 26
Chapitre 3 : Conception........................................................................................................... 27
Introduction .............................................................................................................................. 28
1.Diagramme de classes ........................................................................................................... 28
2. Identification des classes ...................................................................................................... 29
2.1. Dicitionnaire de données ............................................................................................... 29
3. Les diagrammes de séquences ............................................................................................. 32
3.1. Diagramme de séquence « authentification » .............................................................. 32
3.2. Diagramme de séquence « ajouter événement » .......................................................... 33
3.3. Diagramme de séquence « ajouter certificat » ............................................................. 34
3.4. Diagramme de séquence « ajouter formation » ............................................................ 35
3.5. Diagramme de séquence « ajouter collaborateur » ...................................................... 36
3.6. Diagramme de séquence « inscription utilisateur » ..................................................... 37
3.7. Diagramme de séquence « authentification utilisateur » ............................................. 38
3.8. Diagramme de séquence « Ajouter réclamation » ....................................................... 39
3.9. Diagramme de séquence « ajouter demande administrative » ..................................... 40
3.10. Diagramme de séquence « ajouter note de frais » ...................................................... 41
Conclusion ............................................................................................................................... 42
Chapitre 4 : Réalisation ............................................................................................................ 43
Introduction .............................................................................................................................. 44
1. Environnement logiciel ....................................................................................................... 44
2. Choix technologiques ........................................................................................................... 45
2.1. Partie Back-office .......................................................................................................... 45
2.2. Partie Mobile ................................................................................................................. 46
3. Architecture de système ....................................................................................................... 47
3.1. Architecture MVC ......................................................................................................... 47
3.2. Architecture fonctionnelle ............................................................................................. 47
4. Présentation des principales interfaces de la plateforme ...................................................... 49
4.1. Partie Back-office .......................................................................................................... 49
4.1.1. Dashboard............................................................................................................... 49
4.1.2. Espace service administratif ................................................................................... 50
4.1.3. Espace service formation continue ......................................................................... 55
4.1.4. Espace service financier ......................................................................................... 58
4.1.5. Espace gestion administrateur ................................................................................ 59
4.2. Partie Mobile ................................................................................................................. 60
4.2.1. Inscription............................................................................................................... 60
4.2.2. Authentification ...................................................................................................... 61
4.2.3. Interface d’accueil .................................................................................................. 62
4.2.4. Evénement .............................................................................................................. 63
4.2.5. Demande administrative ......................................................................................... 64
4.2.6. Réclamation ............................................................................................................ 65
4.2.7. Formation continue ................................................................................................ 66
4.2.8. Note de frais ........................................................................................................... 67
4.2.9. Liste collaborateurs ................................................................................................ 68
4.2.10. Contact ................................................................................................................. 69
Conclusion ................................................................................................................................ 69
Conclusion générale et perspectives......................................................................................... 70
Netographie .............................................................................................................................. 71
Liste des figures
Figure 1: logo Redlean services ................................................................................................. 4

Figure 2: Dashboard trello - backlog du projet .......................................................................... 6
Figure 3 - Diagramme de cas d’utilisation général « administrateur » ................................... 12
Figure 4 - Diagramme de cas d’utilisation « Authentification administrateur » ..................... 13
Figure 5 - Diagramme de cas d’utilisation « gérer comptes administrateur » ........................ 14
Figure 6 - Diagramme de cas d’utilisation « gérer événement » ............................................. 15
Figure 7 - Diagramme de cas d’utilisation « gérer formation » .............................................. 16
Figure 8 - Diagramme de cas d’utilisation « gérer certificat » ................................................ 17
Figure 9 - Diagramme de cas d’utilisation « gérer collaborateur » ......................................... 18
Figure 10 - Diagramme de cas d’utilisation « gérer note de frais - administrateur » .............. 19
Figure 11 - Diagramme de cas d’utilisation « gérer demande - administrateur » ................... 20
Figure 12 - Diagramme de cas d’utilisation « Inscription utilisateur » ................................... 21
Figure 13 - Diagramme de cas d’utilisation « authentification utilisateur » ........................... 22
Figure 14 - Diagramme de cas d’utilisation « Gérer réclamation - utilisateur » ..................... 23
Figure 15 - Diagramme de cas d’utilisation « Gérer demande administrative- utilisateur » .. 24
Figure 16 - Diagramme de cas d’utilisation utilisateur « gérer note de frais - utilisateur » .... 25
Figure 17: Diagramme de classes ............................................................................................. 28
Figure 18: Diagramme de séquence « Authentification ........................................................... 32
Figure 19: Diagramme de séquence « Ajouter événement....................................................... 33
Figure 20: Diagramme de séquence « Ajouter certificat »....................................................... 34
Figure 21: Diagramme de séquence « Ajouter formation » ..................................................... 35
Figure 22: Diagramme de séquence « Ajouter collaborateur » ................................................ 36
Figure 23: Diagramme de séquence « Inscription utilisateur » ................................................ 37
Figure 24: Diagramme de séquence « authentification utilisateur » ...................................... 38
Figure 25: Diagramme de séquence « Ajouter réclamation » .................................................. 39
Figure 26: Diagramme de séquence « Ajouter demande administrative » .............................. 40
Figure 27: Diagramme de séquence « Ajouter note de frais » ............................................... 41
Figure 28: Architecture logiciel solution back office ............................................................... 47
Figure 29: Architecture fonctionnelle ...................................................................................... 48
Figure 30: Interface authentification administrateur application back-office .......................... 49
Figure 31: Interface Dashboard ................................................................................................ 50
Figure 32: Interface liste événements back-office ................................................................... 50
Figure 33: Interface ajouter événement back-office................................................................. 51
Figure 34: Interface modifier événement back-office .............................................................. 51
Figure 35: Interface liste demandes administrative back-office .............................................. 52
Figure 36: Interface validation demande administrative back-office....................................... 52
Figure 37: Interface liste collaborateurs back-office................................................................ 53
Figure 38: Interface ajouter collaborateur back-office ............................................................. 53
Figure 39: Interface modifier collaborateur back-office .......................................................... 54
Figure 40: Interface liste réclamations back-office .................................................................. 54
Figure 41: Interface liste formations back-office ..................................................................... 55
Figure 42: Interface ajouter formation back-office .................................................................. 55
Figure 43: Interface ajouter formation back-office .................................................................. 56
Figure 44 : Interface liste certificats back-office ..................................................................... 56
Figure 45 : Interface recherche certificat « mot de recherche salesforce » ............................. 57
Figure 46 : Interface ajouter certificat back-office ................................................................... 57
Figure 47 : Interface liste notes des frais back-office .............................................................. 58
Figure 48 : Interface validation note des frais back-office ....................................................... 58
Figure 49 : Interface liste administrateurs back-office............................................................. 59
Figure 50 : Interface ajouter administrateur back-office .......................................................... 59
Figure 51 : Interface modifier administrateur back-office ....................................................... 60
Figure 52 : Interface d’inscription - mobile ............................................................................. 60
Figure 53 : Interface d’authentification - mobile ..................................................................... 61
Figure 54 : Interface Home - mobile ........................................................................................ 62
Figure 55 : Interfaces liste événements et détails événement - mobile .................................... 63
Figure 56 : Interface demande administrative ......................................................................... 64
Figure 57 : Interface ajouter demande administrative - mobile ............................................... 64
Figure 58 : Interface liste réclamations - mobile...................................................................... 65
Figure 59 : Interface ajouter réclamation - mobile ................................................................... 65
Figure 60 : Interface liste formations – mobile ........................................................................ 66
Figure 61 : Interface liste certificats - mobile .......................................................................... 66
Figure 62 : Etapes d’ajout note de frais - mobile ..................................................................... 68
Figure 63 : Interface listes collaborateur - mobile ................................................................... 68
Figure 64 : Interface contact - mobile ...................................................................................... 69
Liste des tableaux
Tableau 1 : Description textuelle du diagramme de cas d’utilisation authentification ............ 13

Tableau 2 : Description textuelle du diagramme « gérer comptes » ....................................... 14
Tableau 3 : Description textuelle du diagramme « gestion événements » .............................. 15
Tableau 4 : Description textuelle du diagramme « gérer formation » ..................................... 16
Tableau 5 : Description textuelle du diagramme « gérer certificat » ...................................... 17
Tableau 6 : Description textuelle du diagramme « gérer collaborateur » ............................... 18
Tableau 7 : Description textuelle du diagramme « Valider note de frais » ............................. 19
Tableau 8 : Description textuelle du diagramme « Valider une demande » ........................... 20
Tableau 9 : Description textuelle du diagramme « Inscription utilisateur» ............................ 21
Tableau 10 : Description textuelle du diagramme « Authentification utilisateur» ................. 22
Tableau 11 : Description textuelle du diagramme « Envoyer réclamation » .......................... 23
Tableau 12 : Description textuelle du diagramme « envoyer demande » ............................... 24
Tableau 13 : Description textuelle du diagramme « envoyer note de frais » .......................... 25
Tableau 14 : Identification des classes ..................................................................................... 29
Tableau 15 : Dictionnaire de données ...................................................................................... 31
Tableau 16 : Présentation environnement logiciel ................................................................... 45
Introduction générale
Les applications mobiles sont à la mode : elles permettent de toucher les collaborateurs
déconnectés (ceux qui n’ont toujours pas d’adresse mail professionnelle ni même d’accès à
l’intranet), de créer des rappels grâce aux notifications push, de communiquer de manière
interactive… bref, les applications mobiles pallient les désavantages de bien d’autres canaux et
médias.
Actuellement, nous constatons une forte évolution en termes de l’utilisation des applications
mobiles par les employés. Même si les outils de collaboration servent à tenir les équipes de projet
à jour, ils ne répondent pas encore à tous les besoins de communication interne. Bon nombre
d’entreprises doivent maîtriser plusieurs logiciels séparés, avec des applications distinctes pour les
RH, le marketing et les ventes, la formation, l’intranet, ou la gestion de projets, ce qui crée un
fossé au sein de l’organisation.
Par ailleurs, un nouveau type d’applications mobiles internes devient de plus en plus populaire,
en grande partie grâce à son potentiel pour garder les équipes connectées. Les applications mobiles
internes pour les collaborateurs peuvent être utilisées pour faciliter les activités RH, faire avancer
les projets plus vite, et permettre aux employés de rester en contact.
Redlean Service « entreprise de services du numérique (ESN) » étant spécialisée dans la création
des solutions digitales, propose la réalisation d’une plateforme de communication interne appelée
« redleaners » pour répondre à ses besoins spécifiques.
C’est dans ce cadre que s’inscrit notre projet de fin d’études intitulé développement d’une
plateforme de communication interne qui se compose d’une application mobile « Android » et une
application web « back office » qui permet de gérer le contenu et les différentes fonctionnalités de
la plateforme.
Le présent rapport est organisé en quatre chapitres :

Dans le premier chapitre « Cadre général du projet », nous présenterons le cadre de notre projet
de fin d’études ainsi que le sujet traité et la méthodologie de travail adoptée. Par la suite, nous
critiquerons l’existant et proposerons une solution.
1
Dans le second chapitre intitulé « Analyse et spécifications des besoins », nous proposerons de
présenter les besoins fonctionnels et non fonctionnels suivis par les diagrammes des cas
d’utilisation.
Dans le troisième chapitre « Conception », nous élaborerons une conception de diagramme de

classes complet ainsi que les diagrammes de séquences.
Dans le quatrième chapitre intitulé « Réalisation », nous présenterons l’environnement matériel

et logiciel ainsi que les choix techniques. Nous introduirons également la phase de test et la
validation avec la présentation des principales interfaces de l’application.
Enfin, nous clôturons ce mémoire par une conclusion dans laquelle nous résumons notre solution
et exposons quelques perspectives futures.
2
Chapitre 1 :
Cadre général du projet
3
Introduction
Le présent chapitre a pour but de définir le contexte général afin de situer le projet dans son
environnement organisationnel et méthodologique.
Tout d’abord, nous allons commencer par la présentation de l’organisme d’accueil et du contexte
général du projet. Ensuite, nous allons faire une étude de l’existant en présentant les principales
solutions de communication interne utilisées par la société et terminer cette partie par la critique
de l’existant et la proposition d’une solution. Enfin nous allons choisir une méthodologie de la
gestion du projet et un langage de modélisation.
1) Présentation de Redlean
Figure 1 – logo Redlean services
Redlean Services est une SARL, fondée en 2016 et située à Monastir. Comme son nom l’indique,
elle suit pour son évolution la méthode Lean. Cette méthode adaptée par Toyota, se base sur le
principe de l’amélioration continue.
Redlean Services cherche à concevoir et à mettre en œuvre les meilleures solutions
technologiques pour améliorer la productivité, la rentabilité et la réactivité des entreprises sur le
marché, en favorisant l’excellence, la réussite sécurisée et en améliorant la valeur des équipes de
ses clients.
2) Présentation de projet
La réalisation de ce projet s’inscrit dans le cadre de projet de fin d’études qui vise à l’obtention
du diplôme de master professionnel en informatique « ingénierie des applications web nuagiques».
Notre projet porte sur l’étude, la conception, le développement et l’intégration d’une plateforme
d'actualité interne à la société redlean pour faire en sorte que les collaborateurs (Tunis, Monastir &
Paris) restent à la fois informés et engagés.
La plateforme « redleaners » est dédiée aux collaborateurs afin de communiquer les actualités de
la société. Cette dernière permet notamment de toucher les collaborateurs déconnectés (ceux qui
ne sont pas connectés sur leur adresse email professionnelle ou bien ceux qui ne possèdent ni
adresse email professionnelle ni accès à l’intranet).
3) Etude de l’existant
Dans cette phase, nous allons présenter les principales solutions de communication interne
utilisées par la société en l’absence de la plateforme à développer. En effet, cette phase permet une
compréhension approfondie de besoins de la société en matière de communication afin d’élaborer
un bilan critique et proposer une solution pertinente.
4
3.1 Présentation de l’existant
De nos jours, il existe des applications mobiles pour pratiquement tout, divertissement, actualités,
sport… et même pour faciliter la vie des entreprises ! Ce dernier type d’application est
communément appelé “application d’entreprise” ou “application interne”.
Les moyens de communication interne dans la société redlean sont :
● Hangout : est une plateforme de vidéoconférence et de messagerie instantanée créée
par Google.
● G-mail: est un service de messagerie électronique, gratuit pour les particuliers, proposé par
Google.
● BoondManager: est un outil de gestion permettant de gérer et de suivre l’ensemble des
informations liées aux services opérationnels notamment le pilotage commercial, la gestion
administrative et la gestion des Ressources Humaines de la société.
● Slack: est une plate-forme de communication collaborative propriétaire ainsi qu'un logiciel
de gestion de projets créé par Stewart Butterfield. [01]
3.2 Critique de l’existant

Les outils de communication utilisés par la société présentent un certain nombre d’insuffisances
qu’on va essayer d’énumérer ultérieurement. Notons néanmoins que ces difficultés ne peuvent être
réglées d’une manière définitive qu’à travers une refonte du système existant.
Les principales insuffisances et limites du système existant se présentent comme suit :
● Absence d’un système automatisé pour la gestion des évènements.
● Absence d’un système automatisé pour la gestion des réclamations.
● Absence d’un système automatisé pour la gestion des documents administratifs (toute
demande administrative doit être envoyée par email).
● Nombre d'utilisateurs limité dans la version gratuite de BoondManger.
● La circulation de nouveautés au sein de l’organisme se fait d’une manière traditionnelle ce
qui engendre un mauvais partage des informations entre les collaborateurs.
● L'utilisation du G-mail comme messagerie interne risque d’ouvrir le réseau intranet à tous
les dangers de l’internet (virus, piraterie etc. …).
3.3 Solution proposée

Après une étude approfondie de l'existant, nous avons constaté plusieurs limites des logiciels de
communication interne. Dans cette partie, nous essayons de trouver une solution. De ce fait, nous
proposons la conception et le développement d'une plateforme de communication interne
répondant aux besoins fonctionnels de la société.
La plateforme « redleaners » à développer devrait se composer de :
● Application mobile : Elle offre aux employés de la société redlean propriétaires d’un
téléphone Android une solution pour communiquer les actualités et accéder à d’autres
fonctionnalités. Cette application vise à toucher tous les collaborateurs pour qu’ils restent à
la fois informés et engagés.
5
● Application Back office : Une application web qui n'est visible que pour les
administrateurs et qui permet de gérer le contenu et les différentes fonctionnalités de la
plateforme. Cette application est administrée par plusieurs départements (service financier
- service administratif - service formation continue).
4) Méthodologie de gestion du projet adoptée

La gestion du projet a un rôle important dans l’exécution, elle aide à organiser le projet de
manière structurée et rationalisée. Souvent, plusieurs méthodologies de gestion de projet existent,
mais, ne sont pas toutes efficaces pour différentes tâches.
Nous avons opté pour Scrum comme méthode de gestion pour notre projet, vu que cette méthode
permet d’améliorer la productivité et assure une livraison de hautes qualités.
5) Mise en œuvre la méthode Scrum

Nous avons planifié la réalisation de notre projet selon Scrum. La définition du « Backlog »
tableau de tâches est la première étape. Chaque matin, le DSM « Daily meeting » nous permet de
suivre l’évolution de chacune des tâches, de visualiser l’avancement de notre projet, de réorienter
les priorités des tâches et d’agir en cas de besoin. Nous avons utilisé l’outil de gestion de projet
« Trello » qui facilite le suivi des projets, et assure leurs avancements.
Figure 2 – Dashboard trello - backlog du projet
6
6) Choix de langage de modélisation
Nous avons fait recours à la modélisation UML dans notre projet en considérant son caractère
polyvalent et sa souplesse. Le langage de modélisation unifié est un langage visuel constitué d’un
ensemble de schémas, appelés des diagrammes, qui donnent chacun une vision différente du projet
à traiter. UML nous fournit donc des diagrammes pour représenter le logiciel à développer : son
fonctionnement, sa mise en route, les actions susceptibles d’être effectuées par le logiciel, etc.
Réaliser ces diagrammes revient donc à modéliser les besoins du logiciel à développer.
Conclusion
Dans ce chapitre, nous avons commencé par la présentation de l’organisme d’accueil et du
contexte général du projet en premier lieu. En second lieu, nous avons fait une étude de l’existant
en présentant les principales solutions de communication interne utilisées par la société pour
terminer cette partie par la critique de l'existant ainsi que la proposition d'une solution. Nous avons
clôturé ce chapitre par le choix de la méthodologie de gestion du projet et du langage de
modélisation.
7
Chapitre 2 :
Analyse & spécification des besoins
8
Introduction
Ce chapitre représente l’analyse des besoins qui constitue une phase d’analyse du projet. C’est
une étape déterminante avant d’entamer la phase de conception. Elle permet une bonne
compréhension des besoins et facilite l’identification des fonctionnalités demandées d’une façon
pertinente à travers l’étude des outils déjà existants.
1) Identification des besoins

Cette première étape permet d’obtenir une vision générale de notre projet en exposant les besoins
fonctionnels et non fonctionnels.
1.1 Besoins fonctionnels
L’analyse des besoins fonctionnels consiste à traduire les objectifs du projet en un ensemble de
fonctionnalités cibles par l’outil à réaliser. Ceci procurera une compréhension plus approfondie
des tâches à mettre en œuvre.
Les différents services ou/et fonctionnalités offerts par notre plateforme aux utilisateurs sont :
1.1.1 Application mobile « Android »
- Envoyer des réclamations au service administratif de la société.
- Recevoir les événements à venir de la société (nouveaux projets - réunions - participation
aux foires - dîner d'intégration - fête de fin de l’année - journée de recrutement, etc).
- Recevoir les détails des sessions de formations et certifications programmées par la société
(notification de chaque formation/certification).
- Envoyer des demandes de documents administratifs (fiche de paie, attestation de travail,
attestation de stage, etc).
- Envoyer les notes de frais des collaborateurs au service financier de la société et les
soumettre pour approbation. Une note de frais, doit contenir les éléments suivants :
montant total + date + photo du justificatif (reçu de caisse / facture / ticket de transport/
etc).
- Utiliser l'appareil photo et la galerie du mobile pour ajouter les photos relatives aux notes
de frais.
- Afficher la liste des collaborateurs de la société redlean (Paris, Monastir et Tunis) avec les
détails de chaque collaborateur (nom, poste, équipe, …).
- Recevoir des notifications sur le smartphone pour chaque (événement – formation /
certification / collaborateur) ajouté.
- Accéder aux éléments natifs du smartphone (géolocalisation - code MEI - appareil photo -
galerie photo).
- Limiter l’accès uniquement aux collaborateurs de la société redlean tout en proposant une
expérience utilisateur simple et efficace.
9
1.1.2 Application Web « Back office »
- Gérer les utilisateurs de l’application back office : (Super administrateur -
Administrateur service administratif - Administrateur service financier -Administrateur
service formation continue)
- Consulter les réclamations par le responsable du service administratif.
- Gérer les événements par le responsable du service administratif.
- Gérer les collaborateurs par le responsable du service administratif.
- Gérer les sessions de formation et de certifications programmées par la société redlean
par le responsable de service formation continue.
- Valider les notes de frais par le responsable du service financier.
- Valider les demandes administratives par le responsable du service administratif.
- Afficher les statistiques des 3 services sur le Dashboard de l’application.
1.2 Besoins non fonctionnels
Outre les besoins fonctionnels précédemment établis, notre application devra respecter la liste
des besoins non fonctionnels qui suit :
- Portabilité : l’application doit être facile à utiliser dans n’importe quel environnement.
- L’ergonomie : Les interfaces ajoutées doivent être conviviales et faciles à utiliser.
- La sécurité : L’utilisateur doit être connecté s’il veut accéder à l’une des fonctionnalités
ajoutées.
- La clarté : pour permettre des futures évolutions ou améliorations.
- L’intégrité et la cohérence des données à chaque mise à jour.
2) Description détaillée des cas d’utilisation

Dans cette partie, nous exposons l’ensemble des acteurs et par la suite nous allons présenter les
fonctionnalités de notre système, en commençant par donner une vue globale des cas d’utilisation
de notre système par la présentation du diagramme des cas d’utilisation global et nous étudierons
par la suite chaque sous cas en détail.
2.1 Définition
Le diagramme de cas d’utilisation est utilisé pour donner une vision globale du comportement
fonctionnel d'un système logiciel. L’étude des cas d’utilisation a pour objectif de déterminer ce
que chaque acteur attend du système.
La détermination des besoins est basée sur la représentation de l’interaction entre l’acteur et le
système, cette approche présente l’avantage de forcer l’utilisateur à définir précisément ce qui
l’attend du système.
La représentation d’un cas d’utilisation en jeu se divise en trois concepts :
- L’acteur : La première étape de Modélisation consiste à définir le périmètre extérieur du
système. Toutes les entités qui sont en dehors du système qui interagissent avec lui sont :
ACTEUR.
10
- Le cas d’utilisation : est l’ensemble des actions réalisées par le système en réponse à une
action d’un acteur. Il définit ainsi une fonctionnalité utilisable par un acteur.
- L’interaction : soit entre l’acteur et les cas d’utilisation, soit entre les différents cas
d’utilisation.
2.2 Identification des acteurs du système

Notre projet comporte deux acteurs qui sont : l’administrateur de l’application back office et
l’utilisateur de l’application mobile.
▪ Administrateur : Est un personnel qui gère les données du service administratif,
financier ainsi que le service de formation continue. Nous avons également un super
administrateur qui peut gérer tous les services en plus de la gestion des administrateurs.
▪ Utilisateur : Est celui qui bénéficie de l’application mobile et de toutes ses
fonctionnalités.
En se basant sur la description fonctionnelle précédente et l’identification des acteurs, nous avons
regroupé nos cas d’utilisation par modules :
 Administrateur
 Utilisateur
2.3 Identification de cas d’utilisation

L'étude de cas d'utilisation a pour objectif de déterminer ce que chaque utilisateur attend du
système. La détermination des besoins est basée sur la représentation de l'interaction entre l'acteur
et le système.
La figure mentionnée ci-après présente le diagramme de cas d’utilisation dans son cas général.
Elle décrit les différentes tâches pouvant être exécutées par notre plateforme. Par la suite, ces
tâches seront présentées dans d’autres diagrammes de cas d’utilisation plus détaillé.
11
2.3.1 Diagramme de cas d’utilisation général
Figure 3 - Diagramme de cas d’utilisation général « administrateur »
12
2.3.2 Diagramme de cas d’utilisation « Authentification administrateur »
Figure 4 - Diagramme de cas d’utilisation « Authentification administrateur »
Description textuelle du diagramme de cas d’utilisation Authentification administrateur

Nom Authentification Administrateur
Ce cas d’utilisation permet de vérifier l'identité de l’administrateur de
Objectif
l’application back office.
Acteurs principaux Administrateur (application back office)
Précondition Accéder à l’interface Authentification
1. Le système demande à l’administrateur de saisir son login et son mot
de passe.
2. L’administrateur saisit son login et mot de passe et clique sur le
Scénario nominal
bouton « Connexion ».
3. Exception : si les données saisies sont fausses alors le système affiche
un message d’erreur « Login ou Mot de passe incorrect ! ».
Post-condition Affichage de l’interface Dashboard
Tableau 1 - Description textuelle du diagramme « authentification administrateur »
13
2.3.3 Diagramme de cas d’utilisation « Gérer comptes administrateurs »
Figure 5 - Diagramme de cas d’utilisation « gérer comptes administrateur »
Description textuelle du diagramme de cas d’utilisation « Gérer comptes administrateur »

Nom Gérer comptes administrateurs
Ce cas d’utilisation permet au super administrateur de gérer les comptes
Objectif administrateurs de l’application back-office (affichage, recherche,
suppression, ajout et modification).
Acteurs principaux Super Administrateur
Précondition Accéder à l’interface Gestion administrateurs
1. L’administrateur s’authentifie.
2. L’administrateur choisit l’opération qu’il souhaite effectuer
(affichage, recherche, ajout, suppression ou modification) des comptes
Scénario nominal
administrateurs.
3. Exception : Si les données saisies sont invalides, le système affiche
un message d’erreur.
Post-condition L’opération souhaitée par l’administrateur sera effectuée.
Tableau 2 – Description textuelle du diagramme « gérer comptes »
14
2.3.4 Diagramme de cas d’utilisation « Gérer évènement »
Figure 6 - Diagramme de cas d’utilisation « gérer événement »
Description textuelle du diagramme de cas d’utilisation « Gérer événement »
Nom Gérer événement

Ce cas d’utilisation permet à l’administrateur de gérer les événements
Objectif
(suppression, ajout, modification, affichage et recherche).
Acteurs principaux Administrateur
Précondition Accéder à l’interface Evénements
(affichage, recherche, ajout, suppression ou modification) des
Scénario nominal
évènements.
Tableau 3 – Description textuelle du diagramme « gestion événement »
15
2.3.5 Diagramme de cas d’utilisation « Gérer formation »
Figure 7 - Diagramme de cas d’utilisation « gérer formation »
Description textuelle du diagramme de cas d’utilisation « Gérer formation »
Nom Gérer formation

Ce cas d’utilisation permet à l’administrateur de gérer les formations
Objectif
(suppression, ajout, modification, affichage, recherche).
Précondition Accéder à l’interface Formations
Scénario nominal
formations.
Tableau 4 – Description textuelle du diagramme « gérer formation »
16
2.3.6 Diagramme de cas d’utilisation « Gérer certificat »
Figure 8 - Diagramme de cas d’utilisation « gérer certificat »
Description textuelle du diagramme de cas d’utilisation « Gérer certificat »
Nom Gérer certificat

Ce cas d’utilisation permet à l’administrateur de gérer les certificats
Objectif
(affichage, recherche, ajout, suppression ou modification).
Précondition Accéder à l’interface Certifications
Scénario nominal (affichage, recherche, ajout, suppression ou modification) des certificats.
3. Exception : Si les données saisies sont invalides, le système affiche un
message d’erreur.
Tableau 5 – Description textuelle du diagramme « gérer certificat »
17
2.3.7 Diagramme de cas d’utilisation « Gérer collaborateur »
Figure 9 - Diagramme de cas d’utilisation « gérer collaborateur »
Description textuelle du diagramme de cas d’utilisation « Gérer collaborateur »
Nom Gérer certification

Ce cas d’utilisation permet à l’administrateur de service administrative
Objectif de gérer les collaborateurs (ajout, modification, suppression, affichage,
recherche).
Précondition Accéder à l’interface Collaborateurs
Scénario nominal
collaborateurs.
Tableau 6 – Description textuelle du diagramme « gérer collaborateur »
18
2.3.8 Diagramme de cas d’utilisation « Gérer note de frais »
Figure 10 - Diagramme de cas d’utilisation « gérer note de frais - administrateur »
Description textuelle du diagramme de cas d’utilisation « Gérer note de frais »
Nom Gestion note de frais

Ce cas d’utilisation permet à l’administrateur de service financier de
Objectif gérer les notes des frais (afficher note de frais – rechercher note de frais
- valider une note de frais).
Précondition Accéder à l’interface Note de frais
Scénario nominal (affichage, recherche, validation) des notes de frais.
Tableau 7 – Description textuelle du diagramme « Gérer note de frais - administrateur »
19
2.3.9 Diagramme de cas d’utilisation « Gérer demande administrative »
Figure 11 - Diagramme de cas d’utilisation « gérer demande administrative - administrateur »
Description textuelle du diagramme de cas d’utilisation « Gérer demande administrative»
Nom Valider demande administrative

Ce cas d’utilisation permet à l’administrateur de service administratif de
Objectif gérer les demandes de documents administratifs (afficher demande –
rechercher demande - validation demande).
Précondition Accéder à l’interface Demandes administratives
Scénario nominal (affichage, recherche, validation) des demandes administratives.
Tableau 8 – Description textuelle du diagramme « gérer demande administrative - administrateur »
20
2.3.10 Diagramme de cas d’utilisation « Inscription utilisateur »
Figure 12 - Diagramme de cas d’utilisation « Inscription utilisateur »
Description textuelle du diagramme de cas d’utilisation « Inscription utilisateur »
Nom Inscription utilisateur

Ce cas d’utilisation permet à l’utilisateur de l’application mobile de
Objectif
s'inscrire pour avoir l'accès aux différentes fonctionnalités.
Acteurs principaux Utilisateur (application mobile)
Précondition Accéder à l’interface Inscription
1. Le système demande à l’utilisateur la saisie de son nom et prénom, e-
mail, numéro de téléphone, poste actuelle et le mot de passe.
2. L'utilisateur remplit toutes les informations demandées et clique sur le
Scénario nominal
bouton « S’inscrire ».
3. Exception : si les données saisies sont fausses, le système affiche un
message d’erreur.
Post-condition L’utilisateur est inscrit avec succès.
Tableau 9 – Description textuelle du diagramme « Inscription utilisateur »
21
2.3.11 Diagramme de cas d’utilisation « Authentification utilisateur »
Figure 13 - Diagramme de cas d’utilisation « authentification utilisateur »
Description textuelle du diagramme de cas d’utilisation « Authentification utilisateur »
Nom Authentification Utilisateur

Ce cas d’utilisation permet de vérifier l'identité de l’utilisateur de
Objectif
l’application mobile.
Acteurs principaux Utilisateur (application mobile)
Précondition Accéder à l’interface Authentification
1. Le système demande à l’utilisateur de saisir son login et son mot de
passe.
Scénario nominal 2. L’utilisateur saisit ses données et clique sur le bouton « S’identifier »
3. Exception : si les données saisies sont fausses, le système affiche un
message d’erreur « Login ou Mot de passe incorrect ! ».
Post-condition L’utilisateur sera redirigé vers la page Home
Tableau 10 – Description textuelle du diagramme « Authentification utilisateur »
22
2.3.12 Diagramme de cas d’utilisation « Gérer réclamation »
Figure 14 - Diagramme de cas d’utilisation « Gérer réclamation - utilisateur »
Description textuelle du diagramme de cas d’utilisation « Gérer réclamation »
Nom Gérer réclamation

Ce cas d’utilisation permet à l’utilisateur de l’application mobile
Objectif d’ajouter une réclamation et de consulter ces réclamations envoyées au
service administratif de la société.
Acteurs principaux Utilisateur
Précondition Accéder à l’interface Réclamation
1. Le système demande à l’utilisateur de remplir le sujet et le message
de la réclamation.
2. L'utilisateur remplit les informations demandées et clique sur le
Scénario nominal
bouton « Envoyer réclamation ».
Post-condition La réclamation est envoyée avec succès.
Tableau 11 – Description textuelle du diagramme « gérer réclamation - utilisateur »
23
2.3.13 Diagramme de cas d’utilisation « Gérer demande administrative »
Figure 15 - Diagramme de cas d’utilisation « Gérer demande administrative- utilisateur »
Description textuelle du diagramme de cas d’utilisation « Gérer demande administrative »
Nom Gérer demande administrative

Objectif d’ajouter une demande de document administratif et de consulter ses
demandes envoyées au service administratif de la société.
Précondition Accéder à l’interface Demande administrative
1. Le système demande à l’utilisateur de choisir le document demandé et
de remplir le motif de la demande.
Scénario nominal
bouton « Envoyer demande ».
Post-condition La demande de document administratif est envoyée avec succès.
Tableau 12 – Description textuelle du diagramme « gérer demande administrative- utilisateur »
24
2.3.14 Diagramme de cas d’utilisation « Gérer note de frais »
Figure 16 - Diagramme de cas d’utilisation utilisateur « gérer note de frais - utilisateur »
Description textuelle du diagramme de cas d’utilisation « Gérer note de frais »

Nom Demande document administratif
Objectif d’ajouter une note de frais et de consulter ses notes envoyées au service
financier de la société.
Précondition Accéder à l’interface Note de frais
1. Le système demande à l’utilisateur de prendre une photo de la facture
(ou bien reçu de caisse) à travers la caméra de l’application mobile, par
la suite il devrait remplir les données suivantes (type de la note,
référence facture, date facture, montant tva, montant total).
Scénario nominal
bouton « Envoyer note ».
Post-condition La note de frais est envoyée avec succès.
Tableau 13 – Description textuelle du diagramme « Gérer note de frais - utilisateur »
25
Conclusion
Ce chapitre a été consacré à l’analyse des besoins fonctionnels et non fonctionnels et à leur
modélisation à travers des diagrammes de cas d’utilisation, assurant une visibilité meilleure des
fonctionnalités et permettant l’introduction au chapitre suivant qui sera dédié à la phase de la
conception.
26
Chapitre 3 : Conception
27
Introduction
On s'intéressera dans ce chapitre à la présentation de la conception des différentes parties menant
à la réalisation de notre application. Dans cette phase, nous allons analyser les différents
diagrammes :
 Diagramme de classes : est la représentation de la structure statique en termes de
classes et de relations entre les classes.
 Diagrammes de séquences : sont la représentation graphique des interactions entre
les acteurs et le système selon un ordre chronologique dans la formulation UML.
1) Diagramme de classes
Les diagrammes de classes sont des diagrammes UML utilisés pour modéliser les entités
(classes) intervenant dans le système ainsi que les différentes relations entre celle-ci. D’après
l’étude du système existant et de différents diagrammes de cas d’utilisation, nous avons pu
dégager les principales classes illustrées dans la figure 17 pour avoir une vue plus claire du
système étudié.
Figure 17 – Diagramme de classes
28
2) Identification des classes
Nom de la classe Désignation
Administrateur Représente les administrateurs de l’application back office

Utilisateur Représente les utilisateurs de l’application mobile
Représente les sessions de formation programmées par la société
Formation
redlean
Evénement Représente les événements programmés par la société redlean
Représente les notes de frais envoyées par les utilisateurs de
Note de frais
l’application mobile
Représente les demandes de documents administratifs envoyées par
Demande administrative
les utilisateurs de l’application mobile
Collaborateur Représente la liste des collaborateurs de la société redlean
Représente les sessions de certifications programmées par la
Certificat
société redlean
Représente les réclamations envoyées par les utilisateurs de
Réclamation
l’application mobile
Tableau 14 - Identification des classes
2.1 Dictionnaire de données
Classe Champ Type Désignation

Id_admin string Identificateur de
l’administrateur
Nom_admin String Nom de l’administrateur
Prenom_admin String Prénom de l’administrateur
Administrateur Email_admin String Email de l’administrateur

Num-tel_admin Number Téléphone de l’administrateur
Role_admin Enumération Rôle de l’administrateur
Login_admin String Identifiant de l’administrateur
Password_admin String Mot de passe de l’admin
Id Long Identificateur de l’utilisateur
Utilisateur
nom String Nom utilisateur
29
prenom String Prénom utilisateur
email String Email utilisateur
poste String Poste de l’utilisateur
Num_tel Number Numéro téléphone utilisateur
login String Identifiant utilisateur
password String Mot de passe utilisateur
Id_evenement String Identificateur événement
Theme_evenement String Thème de l’événement

Date_evenement Date Date début événement
Evènement heure_evenement Date Heure début événement
lieu_evenement String Lieu événement
description_evenement String Description de l’événement
url_affiche_evenement String Url Affiche événement
Id_certificat String Identificateur certificat
nom_certificat String Nom certificat
Date_exam_certificat Date Date examen certificat
Certification heure_exam_certificat Date Heure examen certificat

lieu_exam_certificat String Lieu examen certificat
niveau_certificat String Niveau certificat
url_logo__certificat String Url logo certificat
Id_collaborateur String Identificateur collaborateur
nom_collaborateur String Nom de collaborateur
prenom_collaborateur String Prénom du collaborateur
Collaborateur email_collaborateur String Email collaborateur
poste_collaborateur String Poste collaborateur
equipe_collaborateur String Equipe collaborateur

url_photo_collaborateur String Url photo collaborateur
Id_demande String Identificateur demande
Demande date_demande Date Date de la demande
administrative Type__demande String Type de la demande
motif_demande String Motif de la demande
30
statut_demande Enumération Statut de la demande
type_document_demande String Type document demander
Id_note_de_frais String Identificateur note de frais
type_note_de_frais String Type note de frais
referance_note_de_frais String Référence de la note de frais
Note de frais date_note_de_frais Date Date de la note de frais
Montant_tva_note_de_frais Number Montant TVA de la note
Montant_total_note_de_frais Number Montant total de la note de frais

url_photo_facture String Url photo de la note de frais
Id_formation String Identificateur Formation
theme_formation String Thème de la formation
niveau_formation String Niveau de la formation
date_debut_formation Date Date début formation

Formation
date_fin_formation Date Date fin formation
nom_formateur String Nom formateur

lieu_formation String Lieu formation
url_affiche_formation String Url affiche formation
Id_reclamation String Identificateur réclamation
sujet_reclamation String Sujet de la réclamation
Réclamation message_reclamation String Message de la réclamation
date_reclamation Date Date de la réclamation
heure_reclamation Date Heure de la réclamation
Tableau 15 - Dictionnaire de données
31
3) Les diagrammes de séquences
Les diagrammes de séquence permettent de décrire le déroulement des scénarios bien définis afin
de présenter les interactions entre les acteurs et les différents composants d’un système.
3.1 Diagramme de séquence « authentification »

Avant d'utiliser l'application back office et de faire l'ensemble des autres scénarios,
l'administrateur doit se connecter en utilisant son login et son mot de passe. Le diagramme qui suit
présente l'enchainement de la phase authentification administrateur.
Figure 18 – Diagramme de séquence « Authentification »
32
3.2 Diagramme de séquence « ajouter événement »
La figure suivante montre le diagramme de séquence du scénario ajouter événement. Après son
authentification, l’administrateur peut ajouter un événement. Ce dernier doit saisir les informations
nécessaires (thème évènement, date événement, lieu événement, description événement) et les
enregistrer.
Une fois les informations sont validées, l’évènement est ajouté et les utilisateurs de l’application
mobile seront notifiés de l’ajout du nouvel événement.
Figure 19 – Diagramme de séquence « Ajouter événement »
33
3.3 Diagramme de séquence « ajouter certificat »
La figure suivante montre le diagramme de séquence du scénario ajouter certificat. Après son
authentification, l’administrateur peut ajouter un certificat. Ce dernier doit saisir les informations
nécessaires (nom certificat, niveau certificat, lieu examen certificat, date examen certificat, heure
examen certificat) et les enregistrer.
Une fois les informations sont validées, le certificat est ajouté et les utilisateurs de l’application
mobile seront notifiés de l’ajout d’un nouveau certificat.
Figure 20 – Diagramme de séquence « Ajouter certificat »
34
3.4 Diagramme de séquence « ajouter formation »
La figure suivante montre le diagramme de séquence du scénario ajouter formation. Après son
authentification, l’administrateur peut ajouter une formation. Ce dernier doit saisir les
informations nécessaires (date début formation, date fin formation, lieu formation, nom formateur,
thème formation) et les enregistrer.
Une fois les informations sont validées la formation est ajoutée et les utilisateurs de l’application
mobile seront notifiés de l’ajout d’une nouvelle formation.
Figure 21 – Diagramme de séquence « Ajouter formation »
35
3.5 Diagramme de séquence « ajouter collaborateur »
La figure suivante montre le diagramme de séquence du scénario ajouter collaborateur. Après son
authentification, l’administrateur peut ajouter un collaborateur. Ce dernier doit saisir les
informations nécessaires (nom, prénom, email, poste, équipe) et les enregistrer.
Une fois les informations sont validées, le collaborateur est ajouté et les utilisateurs de
l’application mobile seront notifiés de l’ajout d’un nouveau collaborateur.
Figure 22 – Diagramme de séquence « Ajouter collaborateur »
36
3.6 Diagramme de séquence « inscription utilisateur »
La figure suivante montre le diagramme de séquence du scénario Inscription utilisateur. Pour
s’inscrire à l’application mobile, l’utilisateur doit saisir les informations nécessaires (nom et
prénom, email, poste, login, mot de passe, numéro de téléphone, équipe) et cliquer sur le bouton
enregistrer.
Une fois les informations sont validées, l’utilisateur sera redirigé vers la page authentification.
Figure 23 – Diagramme de séquence « Inscription utilisateur »
37
3.7 Diagramme de séquence « authentification utilisateur »
Avant de bénéficier des fonctionnalités de l'application mobile et de faire l'ensemble des autres
scénarios, l’utilisateur doit se connecter en utilisant son login et son mot de passe.
Le diagramme qui suit, présente l'enchainement de la phase d'authentification de l’utilisateur.
Figure 24 – Diagramme de séquence « authentification utilisateur »
38
3.8 Diagramme de séquence « Ajouter réclamation »
La figure suivante montre le diagramme de séquence du scénario ajouter une réclamation. Après
son authentification, l’utilisateur peut ajouter une réclamation. Ce dernier doit saisir les
informations nécessaires (Sujet, message réclamation) et les enregistrer.
Une fois les informations sont validées, la réclamation est envoyée au service administratif de la
société redlean et l’administrateur de l’application back office sera notifié de l’ajout d’une
nouvelle réclamation.
Figure 25 – Diagramme de séquence « Ajouter réclamation »
39
3.9 Diagramme de séquence « ajouter demande administrative »
La figure suivante montre le diagramme de séquence du scénario ajouter une demande
administrative. Après son authentification, l’utilisateur peut envoyer une demande de document
administratif, il doit saisir les informations nécessaires (type document demandé, motif de la
demande) et les enregistrer.
Une fois les informations sont validées, la demande est envoyée au service administratif de la
société redlean et l’administrateur de l’application back office sera notifié de l’ajout d’une
nouvelle demande administrative.
Figure 26 – Diagramme de séquence « Ajouter demande administrative »
40
3.10 Diagramme de séquence « ajouter note de frais »
La figure suivante montre le diagramme de séquence du scénario ajouter une note de frais. Après
son authentification l’utilisateur peut ajouter une note de frais. Ce dernier doit saisir les
informations nécessaires (date, référence facture, montant total, montant tva, photo facture) et les
enregistrer.
Une fois les informations sont validées, la note de frais est envoyée au service financier de la
société redlean et l’administrateur de l’application Back-office sera notifié de l’ajout d’une
nouvelle note de frais.
Figure 27 – Diagramme de séquence « Ajouter note de frais »
41
Conclusion
Nous avons consacré ce chapitre à la description détaillée de la solution. Une fois notre étude
approfondie est terminée, nous pouvons passer à l'étape finale de notre projet, celle de la
réalisation, qui sera présentée dans le chapitre suivant avec la spécification de nos choix
technologiques.
42
Chapitre 4 : Réalisation
43
Introduction
Ce chapitre a pour objectif de présenter le produit final. Il détaille les étapes du processus de
développement concernant l’implémentation de l’application en fonction des technologies
choisies.
Nous commençons, tout d’abord, par la présentation de l’environnement de développement.
Ensuite, nous présenterons les principales interfaces graphiques de l’application qui montrent les
différentes fonctionnalités mises en place.
1) Environnement logiciel
Pendant les différentes phases de notre projet, nous avons utilisé les environnements logiciels
suivants :
Environnement
Présentation
logiciel
Visuel studio code

Visual Studio Code est un éditeur de code extensible développé
par Microsoft pour Windows, Linux et macOS2.
Les fonctionnalités incluent la prise en charge du débogage,
la mise en évidence de la syntaxe, la complétion intelligente du
code, les snippets, la refactorisation du code et Git intégré. [02]
Android Studio
Android Studio est un environnement de développement pour
développer des applications mobiles Android. Il est basé
sur IntelliJ IDEA et utilise le moteur de production Gradle. Il
peut être téléchargé sous les systèmes
d'exploitation Windows, macOS, Chrome OS et Linux17. [03]
Un outil SaaS taillé pour la gestion des versions de vos projets de

Bitbucket développement. Il est compatible avec les dépôts sous licence Git
et Mercurial. Ce service web se démarque par sa flexibilité pour
s’adapter aux besoins des petites structures comme ceux des
multinationales [04]
Trello Trello est un outil de gestion de projet en ligne, lancé

en septembre 2011 et inspiré par la méthode Kanban de
Toyota. Il repose sur une organisation des projets en planches
listant des cartes, chacune représentant des tâches. Les cartes
sont assignables à des utilisateurs et sont mobiles d'une planche à
l'autre, traduisant leur avancement. [05]
44
StartUml Est un outil de modélisation UML open source qui vient se
substituer aux outils payants tels que « IBM Rational Rose » ou «
Borland Together » et qui a fait l’objet de mon étude sur les
logiciels de « conception – implémentation », étude portant sur
l’utilisation d’un logiciel ou d’un plug-in « Eclipse » open source
pouvant faire de la modélisation UML ainsi que de
l’implémentation Java (avec rétro-ingénierie). [06]
Tableau 16 – Présentation environnement logiciel
2) Choix technologiques
Les choix technologiques représentent l’étape la plus critique dans la phase de réalisation d’un
projet, ou plusieurs critères tels-que le coût, le temps de réaction et le langage de programmation
impactent les choix technologiques.
Pour pouvoir répondre aux besoins techniques cités auparavant, nous allons nous baser sur des
plateformes et des outils de développement bien spécifiques. Nous diviserons ces outils en deux
catégories :
 Technologies utilisées pour la partie back-office.
 Technologies utilisées pour la partie mobile.
2.1 Partie Back-office

Angular
Angular est une plateforme de développement qui permet de créer des applications web
dynamiques et immersives. Dans ce cours, vous apprendrez rapidement à créer les composantes
de base d'une application Angular, avant d'enrichir vos applications en approfondissant vos
connaissances de ce framework. Vous apprendrez également à faire communiquer votre
application avec un backend afin de créer une application web complète. [07]
TypeScript
TypeScript est un langage de programmation libre et open source développé par Microsoft qui a
pour but d'améliorer et de sécuriser la production de code JavaScript. Il s'agit d'un sur-ensemble
syntaxique strict de JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec
TypeScript). Le code TypeScript est transcompilé en JavaScript, et peut ainsi être interprété par
n'importe quel navigateur web ou moteur JavaScript. TypeScript a été cocréé par Anders
Hejlsberg, principal inventeur de C#. [08]
Firebase Authentication
Firebase Authentication fournit des services de backend, des SDK et des bibliothèques d'interface
utilisateur prêtes à l'emploi pour authentifier les utilisateurs auprès de votre application. Il prend
en charge l'authentification à l'aide de mots de passe, de numéros de téléphone, de fournisseurs
d'identité fédérés populaires tels que Google, Facebook et Twitter, etc. [09]
45
Firebase Database RealTime
La base de données Firebase Realtime est une base de données NoSQL hébergée dans le cloud
qui vous permet de stocker et de synchroniser des données entre vos utilisateurs en temps réel.
[10]
Node js
Une plateforme logicielle libre en JavaScript orientée vers les applications réseau
événementielles hautement concurrentes qui doivent pouvoir monter en charge.
Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements, et implémente
sous licence MIT les spécifications CommonJS. [11]
2.2 Partie Mobile

React native 0.60
React Native est un framework créé par Facebook à la suite d'un Hackaton en 2015. React Native
est basé sur React, une librairie Javascript développée deux ans auparavant par un ingénieur
Facebook (Jordan Walke). Vous découvrirez pourquoi Facebook, Instagram, Skype, Discord et
bien d'autres ont fait le choix de ce framework pour leurs applications mobiles [12]
Redux
Redux est une bibliothèque open-source JavaScript de gestion d'état pour applications web. Elle
est plus couramment utilisée avec des bibliothèques comme React ou Angular pour la construction
d'interfaces utilisateur. [13]
Firebase Cloud Functions
Cloud Functions for Firebase est un framework sans serveur qui vous permet d'exécuter
automatiquement du code backend en réponse aux événements déclenchés par les fonctionnalités
Firebase et les requêtes HTTPS. [14]
Firebase Cloud Messaging
Firebase Cloud Messaging (FCM) fournit une connexion fiable et économe en batterie entre
votre serveur et vos appareils, ce qui vous permet de transmettre et de recevoir des messages et
des notifications sur iOS, Android et sur le Web sans frais. [15]
Node js
(Présenté dans la partie back-office)
Firebase Authentication
Firebase RealTime Database
46
3) Architecture de système
Dans cette section, nous présentons l'architecture fonctionnelle de notre système ainsi que
l’architecture logicielle.
3.1 Architecture MVC

Notre système s’appuie sur l’architecture logicielle MVC (Modèle-Vue-Contrôleur) qui est une
architecture destinée à répondre aux besoins des applications interactives en séparant les
problématiques liées aux différents composants en les regroupant par couches.
Figure 28 – Architecture logiciel solution back office
Ce concept peut très bien être appliqué pour notre solution. Il est bien évident que l’utilisateur
qui va utiliser ce système pour créer des nouveaux utilisateurs ne doit pas modifier la structure
complète du système, ni les actions ni l’affichage.
3.2 Architecture fonctionnelle

L’architecture fonctionnelle permet d’analyser les fonctionnalités attendues ou existantes du
système, l’organisation des différents éléments ainsi que la relation entre eux. La figure 29 met
l’accent sur l’architecture globale de la solution proposée
47
Figure 29 – Architecture fonctionnelle
Note système est composé de 3 éléments :

- Le frontend (application back-office et application mobile) utilisant des Service Workers
pour la mise en cache hors ligne et la réception de notifications push alors que l'application
n'est pas au premier plan.
- Les données seront stockées dans une base de données (Firebase Database). Les règles de
validation feront en sorte qu'un utilisateur ne peut modifier que ses propres
données. Firebase fournira également le service d'authentification (Firebase
48
Authentification) qui sert à connaitre l'identité d'un utilisateur ce qui permet à une
application d'enregistrer en toute sécurité les données utilisateur dans le cloud et de fournir
la même expérience personnalisée sur tous les appareils de l'utilisateur.
- Firebase Cloud Function
(Présenté dans la partie Choix technologiques)
4) Présentation des principales interfaces de la plateforme

Dans cette section, nous présentons notre travail réalisé en exposant des interfaces de notre
plateforme. Nous avons pris quelques scenarios d’interaction au niveau de l’application mobile et
l’application back-office.
4.1 Partie Back-office

4.1.1 Dashboard
Lors de l’authentification, l’administrateur de l’application back-office reçoit un Dashboard qui
affiche les statistiques du service administratif, financier et formation continue comme illustré
dans les deux figures qui suivent:
Figure 30 – Interface authentification administrateur application back-office
49
Figure 31 – Interface Dashboard
4.1.2 Espace service administratif

Cet espace est dédié au responsable de service administratif de la société redlean celui qui peut
gérer les événements programmés par la société. Les figures suivantes montrent les interfaces
assurant la gestion des événements :
Figure 32 – Interface liste événements back-office
50
Figure 33 – Interface ajouter événement back-office
Figure 34 – Interface modifier événement back-office
Le responsable du service administratif peut également consulter la liste des demandes

administratives, et les valider. Les figures suivantes montrent les interfaces de gestion d’une
demande de document administratif :
51
Figure 35 – Interface liste demandes administratives back-office
Figure 36 – Interface validation demande administrative back-office
De même le responsable du service administratif peut consulter la liste des collaborateurs, ajouter
des nouveaux collaborateurs ou modifier les collaborateurs existants. Les figures suivantes
montrent les interfaces de gestion des collaborateurs :
52
Figure 37 – Interface liste collaborateurs back-office
Figure 38 – Interface ajouter collaborateur back-office
53
Figure 39 – Interface modifier collaborateur back-office
L’espace Service administratif permet aussi au responsable du service administratif de consulter

et de rechercher les réclamations reçues. La figure suivante montre l’interface assurant la
consultation des réclamations.
Figure 40 – Interface liste réclamations back-office
54
4.1.3 Espace service formation continue
Cet espace est dédié au responsable du service formation continue de la société redlean qui peut
gérer les sessions de formations programmées par la société. Les figures suivantes montrent les
interfaces assurant la gestion des formations :
Figure 41 – Interface liste formations back-office
Figure 42 – Interface ajouter formation back-office
55
Figure 43 – Interface ajouter formation back-office
Le responsable du service formation continue peut également afficher, rechercher, ajouter et

modifier les sessions de certifications. Ceci est représenté par les interfaces qui suivent :
Figure 44 – Interface liste certificats back-office
56
Figure 45 – Interface recherche certificat « mot de recherche salesforce »
Figure 46 – Interface ajouter certificat back-office
57
4.1.4 Espace service financier
Cet espace est dédié au responsable du service financier de la société redlean qui peut consulter,
rechercher et valider les notes de frais. Les figures suivantes montrent les interfaces assurant la
gestion des notes de frais :
Figure 47 – Interface liste notes des frais back-office
Figure 48 – Interface validation note des frais back-office
58
4.1.5 Espace gestion administrateurs
Cet espace est dédié au super administrateur de l’application back-office. Il peut ajouter,
rechercher et modifier les comptes administrateurs. Les figures suivantes montrent les interfaces
assurant la gestion des comptes administrateurs :
Figure 49 – Interface liste administrateurs back-office
Figure 50 – Interface ajouter administrateur back-office
59
Figure 51 – Interface modifier administrateur back-office
4.2 Partie Mobile

4.2.1 Inscription
L’interface inscription s'affiche après l'installation de l'application, elle permet à l'utilisateur de
créer un profil.
Figure 52 – Interface d’inscription - mobile
60
4.2.2 Authentification
Cette capture présente l'interface d'authentification dans laquelle l’utilisateur doit choisir le nom
d'utilisateur et entrer le mot de passe pour commencer à utiliser notre application. Cette interface
constitue la fenêtre d'accueil de l’application.
Cette étape met en valeur l'aspect sécurité : nous vérifions la disponibilité du compte utilisateur et
nous lui attribuons les droits et privilèges nécessaires.
Figure 53 – Interface d’authentification - mobile
61
4.2.3 Interface d’accueil
Lors de son authentification, l'utilisateur sera redirigé vers la page Home. A partir de cette
interface l’utilisateur pourrait accéder à toutes les fonctionnalités de l’application mobile
(événement – demande administrative – réclamation – formation/certificat – note de frais –
collaborateur).
Figure 54 – Interface Home - mobile
62
4.2.4 Evénement
Cette interface permet aux utilisateurs d’afficher la liste des événements programmés par la
société redlean. Les figures suivantes montrent les interfaces liste événements et détails
événement.
Figure 55 – Interfaces liste événements et détails événement - mobile
63
4.2.5 Demande administrative
Cette interface permet aux utilisateurs d’ajouter une demande administrative et de visualiser la
liste des demandes comme illustré dans les figures qui suivent :
Figure 56 – Interface demande administrative
Figure 57 – Interface ajouter demande administrative - mobile
64
4.2.6 Réclamation
Cette interface permet aux utilisateurs d’ajouter des réclamations qui seront par la suite envoyées
au service administratif de la société redlean. Les figures suivantes montrent les interfaces liste
réclamations et ajouter réclamation
Figure 58 – Interface liste réclamations - mobile Figure 59 – Interface ajouter réclamation - mobile
65
4.2.7 Formation continue
Cette interface permet aux utilisateurs d’afficher la liste des formations et des certifications
ajoutées par le service formation interne. Les figures suivantes montrent les interfaces liste
formation et liste certificat
Figure 60 – Interface liste formations – mobile
Figure 61 – Interface liste certificats – mobile
66
4.2.8 Note de frais
Cette interface permet aux utilisateurs d’ajouter des notes de frais qui seront validées par le
service financier. Les figures suivantes montrent les étapes d’ajout d’une note de frais.
67
Figure 62 – Etapes d’ajout note de frais - mobile
4.2.9 Liste collaborateurs

Cette interface affiche la liste des collaborateurs de la société redlean. Les figures suivantes
montrent l’affichage des collaborateurs.
Figure 63 – Interface liste collaborateurs - mobile
68
4.2.10 Contact
Cette interface affiche les coordonnées des locaux de la société redlean (Paris, Monastir et
Tunis).
Figure 64 – Interface contact - mobile
Conclusion
Dans ce dernier chapitre, nous avons présenté les choix techniques que nous avons adoptés, ainsi
que l’environnement d’implémentation et les interfaces de notre application.
69
Conclusion générale et perspectives
Ce projet de fin d’études, qui s’est déroulé au sein de la société Redlean

Services avait pour but de réaliser une plateforme de communication interne. La
difficulté principale liée à ce projet était sa pluridisciplinarité et l’hétérogénéité
d’outils et de technologies auxquels il a été nécessaire de recourir. Nous avons mené
ce projet de bout en bout, de la conception à l’implémentation.
La plateforme « redleaners » est composée essentiellement de deux parties

dont la première est l’application back-office qui permet de gérer le contenu et les
différentes fonctionnalités de la plateforme. Cette application est administrée par les
responsables des services administratif, financier, et formation continue.
La deuxième partie est l’application mobile qui est destinée aux employés de
la société Redlean services propriétaires d’un téléphone Android offrant une
solution pour communiquer les actualités et accéder à d’autres fonctionnalités telles
qu’envoyer des réclamations, des demandes administratives ou bien des notes de
frais aux différents services concernés.
Ce projet présente une opportunité d'approfondir nos connaissances en

technologies de développement et en méthodologie de conception UML d’une part.
D'autre part, il nous a donné l'occasion de contribuer au travail concret et de faire
face aux différents problèmes de développement.
Finalement, et comme perspectives futures pour notre projet, nous avons

pensé à améliorer et à enrichir l'application en offrant des nouvelles fonctionnalités
aux utilisateurs tels qu'intégrer le machine learning et l’intelligence artificielle pour
examiner les photos des notes de frais qui sont prises à travers l’application mobile
pour détecter la date, la référence et le montant total de la facture automatiquement.
Nous avons pensé aussi à intégrer un système de messagerie instantanée pour les
utilisateurs de l’application mobile.
70
Netographie
[01] https://fr.wikipedia.org/wiki/Slack_(plateforme)
[02] https://fr.wikipedia.org/wiki/Visual_Studio_Code
[03] https://fr.wikipedia.org/wiki/Android_Studio
[04] https://www.journaldunet.fr/web-tech/guide-de-l-entreprise-collaborative/1443816-bitbucket-
outil-saas-de-gestion-de-versions-flexible-base-sur-git/
[05] https://fr.wikipedia.org/wiki/Trello
[06] https://projet-plume.org/fr/fiche/staruml
[08] https://openclassrooms.com/fr/courses/4668271-developpez-avec-angular
[09] https://fr.wikipedia.org/wiki/TypeScript
[10] https://firebase.google.com/docs/auth
[11] https://firebase.google.com/products/realtime-database
[12] Thomas PARISOT,. Node.js - Apprendre par la pratique < https://oncletom.io/node.js/ >
[13] https://www.my-mooc.com/fr/mooc/developpez-une-application-mobile-react-native/
[14] https://fr.wikipedia.org/wiki/Redux_(biblioth%C3%A8que_JavaScript)
[15] https://firebase.google.com/docs/functions
[16] https://firebase.google.com/products/cloud-messaging
[24] https://firebase.google.com/docs/cli
71

Version Finale Rapport Hssine Maaoui

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Version Finale Rapport Hssine Maaoui

Transféré par

Droits d'auteur :

Formats disponibles

Mastère professionnel Co-construit en

Ingénierie des Applications Web-Nuagique

Développement d’une plateforme de communication

Président : M./Mme Prénom NOM

Année Universitaire : 2019/2020

A la mémoire de mon père,

A mes chères sœurs,

A mes chers Mpwiners,

Je voulais remercier profondément mon encadrante Mme. Alia MAALOUL.

Je remercie également M. Nader BAHROUN, le Manager de la société

J’adresse également des remerciements particuliers à M. Aymen

Mes sincères remerciements à Mme. Afef DEMNI, ma collègue à Redlean

Introduction générale .................................................................................................................. 1

Figure 1: logo Redlean services ................................................................................................. 4

Liste des tableaux

Tableau 1 : Description textuelle du diagramme de cas d’utilisation authentification ............ 13

Le présent rapport est organisé en quatre chapitres :

Dans le troisième chapitre « Conception », nous élaborerons une conception de diagramme de

Dans le quatrième chapitre intitulé « Réalisation », nous présenterons l’environnement matériel

Figure 1 – logo Redlean services

3.2 Critique de l’existant

3.3 Solution proposée

4) Méthodologie de gestion du projet adoptée

5) Mise en œuvre la méthode Scrum

Figure 2 – Dashboard trello - backlog du projet

1) Identification des besoins

2) Description détaillée des cas d’utilisation

2.2 Identification des acteurs du système

2.3 Identification de cas d’utilisation

Figure 3 - Diagramme de cas d’utilisation général « administrateur »

Figure 4 - Diagramme de cas d’utilisation « Authentification administrateur »

Description textuelle du diagramme de cas d’utilisation Authentification administrateur

Tableau 1 - Description textuelle du diagramme « authentification administrateur »

Figure 5 - Diagramme de cas d’utilisation « gérer comptes administrateur »

Description textuelle du diagramme de cas d’utilisation « Gérer comptes administrateur »

Tableau 2 – Description textuelle du diagramme « gérer comptes »

Figure 6 - Diagramme de cas d’utilisation « gérer événement »

Description textuelle du diagramme de cas d’utilisation « Gérer événement »

Nom Gérer événement

Tableau 3 – Description textuelle du diagramme « gestion événement »

Figure 7 - Diagramme de cas d’utilisation « gérer formation »

Description textuelle du diagramme de cas d’utilisation « Gérer formation »

Nom Gérer formation

Tableau 4 – Description textuelle du diagramme « gérer formation »

Figure 8 - Diagramme de cas d’utilisation « gérer certificat »

Description textuelle du diagramme de cas d’utilisation « Gérer certificat »

Nom Gérer certificat

Tableau 5 – Description textuelle du diagramme « gérer certificat »

Figure 9 - Diagramme de cas d’utilisation « gérer collaborateur »

Description textuelle du diagramme de cas d’utilisation « Gérer collaborateur »

Nom Gérer certification

Tableau 6 – Description textuelle du diagramme « gérer collaborateur »

Figure 10 - Diagramme de cas d’utilisation « gérer note de frais - administrateur »

Description textuelle du diagramme de cas d’utilisation « Gérer note de frais »

Nom Gestion note de frais

Tableau 7 – Description textuelle du diagramme « Gérer note de frais - administrateur »

Figure 11 - Diagramme de cas d’utilisation « gérer demande administrative - administrateur »

Description textuelle du diagramme de cas d’utilisation « Gérer demande administrative»

Nom Valider demande administrative

Tableau 8 – Description textuelle du diagramme « gérer demande administrative - administrateur »

Figure 12 - Diagramme de cas d’utilisation « Inscription utilisateur »

Description textuelle du diagramme de cas d’utilisation « Inscription utilisateur »

Nom Inscription utilisateur