DÉDICACE

Je dédie ce travail
À Mes Très Chers Parents dont le mérite, les sacrifices et les qualités humaines m’ont
permis de vivre ce jour. À ceux qui ont attendu avec patience les fruits de leur bonne
éducation.

J’implore le Tout Miséricordieux Allah à vous protéger, et à vous procurer santé,

bonheur et vous récompense sans compter ses paradis pour vos bonnes œuvres.

À mon frère et ma sœur je ne peux manifester à travers ces lignes tout mon amour
envers vous. Que l’amour et la fraternité nous réunissent à jamais.

À toute ma famille pour leur patience et leur support qu’ils n’ont cessé de procurer au
cours de ma formation et pour leur appui à surmonter les épreuves redoutables.

À tous mes amis qui me font confiance et m’encoauragent à faire mieux. Pour tous les
moments inoubliables que nous avons passés ensemble. J’espère qu’on créera de
nouveaux souvenirs.

Projet fin d’études I 2023/2024

 REMERCIEMENTS

Au terme de ce travail, je tiens à remercier mon encadrant académique Mme. Farah

SNIBA, pour son assistance, son soutien, sa disponibilité et ses précieux conseils
durant la période de ce stage.

Mes remerciements à mon encadrante à OuzTechnology , M. Issam ELKHATTABI pour

sa disponibilité, son aide et sa confiance la plus attentionnée et le temps qu’elle m’a
alloué pour me guider.

Je remercie tous mes enseignants de l’EMSI MARRAKECH pour la qualité de

l’enseignement qu’ils ont bien voulu nous fournir, tout le personnel de l’administration
pour leurs assistances et leurs contributions.

Je tiens aussi à exprimer l’honneur qui m’est fait par les membres du jury, en acceptant
de juger mon travail.

Mes remerciements les plus sincères à tous celles et ceux qui m’ont apporté leurs aides,
leurs encouragements et leurs soutiens pour me permettre de mener à bien ce projet.

Projet fin d’études II 2023/2024

 ABSTRACT

This document summarizes the work carried out during my final year project at
OuzTechnology, for the completion of my State Engineer’s degree in Computer Science
and Networks, specializing in MIAGE (Applied Computer Methods for Business
Management).
The main objective of this project was the design and development of LINK, an
integrated vehicle rental management platform. This platform was designed to meet
the needs for digitalization and modernization of the vehicle rental process, enabling
more efficient and transparent management.
During this internship, my initial task was to study the previously used tools and
methods within the company. This analysis allowed me to identify weaknesses and
areas for improvement. Following this assessment, I proposed a design for the
application aimed at digitalizing the entire rental process. The next phase of my work
involved implementing this solution using the MERN (MongoDB, [Link], React,
[Link]) technology stack, which is particularly suited for developing modern and
responsive web applications.
To ensure the successful completion of the project, we adopted the Agile methodology,
specifically the SCRUM framework. This approach enabled us to work iteratively and
incrementally, promoting collaboration and adaptability to changes.
Additionally, the Unified Modeling Language (UML) was used for the system design.
Various UML diagrams helped structure and visualize the different components of the
application, thereby facilitating communication among team members and ensuring a
common understanding of the system to be developed.
This report provides an overview of OuzTechnology, detailing its activities and context.
It also describes the various stages and tasks carried out throughout my internship,
from the initial needs analysis to the implementation of the final solution. The report
highlights the challenges encountered and the solutions provided, illustrating the
development process of LINK and the skills acquired during this experience.
This internship has been an extremely enriching experience, allowing me to apply my
theoretical knowledge in a concrete professional setting, develop new technical skills,
and work as part of a team on a significant project.

Keywords :SCRUM, UML,MERN,LINK,Rental

Projet fin d’études III 2023/2024

 RÉSUMÉ

Ce présent document synthétise le travail réalisé durant mon projet de fin d’études
effectué au sein de l’entreprise OuzTechnology, dans le but d’obtenir le diplôme
d’ingénieur d’État en Informatique et Réseaux, option MIAGE (Méthodes
Informatiques Appliquées à la Gestion des Entreprises).
L’objectif principal de ce travail était la conception et le développement de LINK, une
plateforme intégrée de gestion de location de véhicules. Cette plateforme a été conçue
pour répondre aux besoins de digitalisation et de modernisation du processus de
location de véhicules, permettant une gestion plus efficace et transparente.
Durant ce stage, ma mission initiale consistait à étudier les outils et méthodes
précédemment utilisés par l’entreprise. Cela m’a permis d’identifier les faiblesses et les
points à améliorer. Suite à cette analyse, j’ai proposé une conception pour l’application
destinée à digitaliser l’ensemble du processus de location. La phase suivante de mon
travail a été l’implémentation de cette solution en utilisant la stack technologique
MERN (MongoDB, [Link], React, [Link]), qui est particulièrement adaptée au
développement d’applications web modernes et réactives.
Pour assurer le bon déroulement du projet, nous avons adopté la méthodologie Agile,
et plus spécifiquement la méthode SCRUM. Cette approche nous a permis de travailler
de manière itérative et incrémentale, en favorisant la collaboration et l’adaptabilité face
aux changements.
En outre, le langage de modélisation UML (Unified Modeling Language) a été utilisé
pour la conception du système. Les différents diagrammes UML ont aidé à structurer
et à visualiser les différentes composantes de l’application, facilitant ainsi la
communication entre les membres de l’équipe et assurant une compréhension
commune du système à développer.
Ce rapport présente une vue d’ensemble sur OuzTechnology, détaillant son activité et
son contexte. Il décrit également les différentes étapes et tâches effectuées tout au long
de mon stage, de l’analyse initiale des besoins à la mise en œuvre de la solution finale.
Le rapport met en lumière les défis rencontrés et les solutions apportées, illustrant ainsi
le processus de développement de LINK et les compétences acquises au cours de cette
expérience.

Projet fin d’études IV 2023/2024

 Ce stage a été une expérience très enrichissante, me permettant d’appliquer mes
connaissances théoriques dans un cadre professionnel concret, de développer de
nouvelles compétences techniques et de travailler en équipe sur un projet d’envergure.

Mots clés : SCRUM, UML,MERN,LINK,Location

Projet fin d’études V 2023/2024

 GLOSSAIRE
API : Application Programming Interface
BD : Base de Données
BLL : Business Logic Layer
CI/CD : Continuous Integration/Continuous Deployment
CSS : Cascading Style Sheets
DAL : Data Access Layer
DOM : Document Object Model
EMSI : École Marocaine des Sciences de l’Ingénieur
HTML : HyperText Markup Language
HTTP : Hypertext Transfer Protocol
IO : Input/Output
JS : JavaScript
JSON : JavaScript Object Notation
JWT : JSON Web Token
npm : node package manager
PL : Presentation Layer
UML : Unified Modeling Language
VS : Visual Studio

VI
 Liste des figures

1.1 Logo OuzTechnology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.2 Présentation de l’Entreprise . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Méthode SCRUM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4 L’outil Jira . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.5 Gantt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.6 Gantt (Suite) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.1 Diagramme détaillé de cas d’utilisation «Client+Visiteur» . . . . . . . 21

2.2 Diagramme détaillé de cas d’utilisation «Agence+Visiteur» . . . . . . 22
2.3 diagramme d’activité de la réservation . . . . . . . . . . . . . . . . . . . 23

3.1 Architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2 Architecture 3-tier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.3 Diagramme de séquence boîte blanche d’envoi de message . . . . . . 28
3.4 Diagramme de séquence boîte blanche du reservation . . . . . . . . . 30
3.5 Diagramme de séquence boîte blanche de renétialisation de mot de
passe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.6 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.7 Diagramme d’État de transition . . . . . . . . . . . . . . . . . . . . . . . 36

4.1 Processus CI/CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

5.1 Contenue du fichier DockerFile front end . . . . . . . . . . . . . . . . . 52

5.2 DockerFile du Back end . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.3 le contenue du fichier Dockerignore . . . . . . . . . . . . . . . . . . . . 54
5.4 le contenue du fichier Docker-compose . . . . . . . . . . . . . . . . . . 55
5.5 La page d’authentification client . . . . . . . . . . . . . . . . . . . . . . . 56
5.6 La page d’insciption client . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.7 E-mail de verification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.8 Comparaison des vérifications . . . . . . . . . . . . . . . . . . . . . . . . 58
5.9 Comparaison des pages d’accueil . . . . . . . . . . . . . . . . . . . . . . 59
5.10 Interface de Réclamation . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.11 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.12 Filtrage des agences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.13 Panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.14 Structure du profil d’agence (part 1) . . . . . . . . . . . . . . . . . . . . . 63
5.15 Structure du profil d’agence (part 2) . . . . . . . . . . . . . . . . . . . . . 64
5.16 Interface de messageries . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
5.17 Choix des chemins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
5.18 Page de réservation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.19 Calendrier pour la réservation . . . . . . . . . . . . . . . . . . . . . . . . 67

VII
 5.20 Processus de payement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
5.21 Confirmation de paiement . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.22 Profil utilisateur client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.23 Details Reservation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
5.24 Inscription d’agence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
5.25 Profil d’agence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.26 Details reservation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
5.27 Interface Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
5.28 Interface d’ajout de voiture . . . . . . . . . . . . . . . . . . . . . . . . . . 73
5.29 Interface de description . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
5.30 Button pour demander la page de renétialisation . . . . . . . . . . . . . 74
5.31 Formulaire destiné à saisir l’email pour réinitialiser le mot de passe . 75
5.32 Lien de renétialisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
5.33 Formulaire de renétialisation . . . . . . . . . . . . . . . . . . . . . . . . 75

Projet fin d’études VIII 2023/2024

 Liste des tableaux

1.1 Les membres de l’équipe de projet . . . . . . . . . . . . . . . . . . . . . . 9

1.2 Présentation des sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.3 Présentation des sprints (suite) . . . . . . . . . . . . . . . . . . . . . . . . 12

2.1 Description des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.2 Description des acteurs (suite) . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.1 Description du scénario « Envoi de message » . . . . . . . . . . . . . . . 29

3.2 Description du scénario « Reservation» . . . . . . . . . . . . . . . . . . . 31
3.3 Description du scénario « Réinitialisation de mot de passe » (Partie 1) . . 33
3.4 Description du scénario « Réinitialisation de mot de passe » (Partie 2) . . 34

4.1 Comparaison entre ReactJs et JavaScript . . . . . . . . . . . . . . . . . . . 39

4.2 Comparaison entre Authentification avec Cookies et Local Storage . . . 41

IX
 Table des matières

Dédicace I

Remerciements II

ABSTRACT III

Résumé IV

Introduction Générale 1

1 Contexte générale du projet 3

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Présentation de l’organisme d’accueil . . . . . . . . . . . . . . . . . . . . 4
1.2.1 Aperçu général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.2 Détails Juridiques de l’Entreprise . . . . . . . . . . . . . . . . . . . 5
1.3 Présentation du Projet "Link" . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.1 Context Générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.2 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.3 Solution Proposée . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 Méthodologie et planification . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.1 Equipe du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.4.2 La méthode agile SCRUM . . . . . . . . . . . . . . . . . . . . . . . 9
1.4.3 Outils de gestion du projet . . . . . . . . . . . . . . . . . . . . . . 12
1.5 Planning du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.6 Planning du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2 Etude fonctionnelle 15
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2 Spécifications des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.1 Besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.2 Besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . 18
2.2.3 Acteurs du système . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.2.4 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . 20
2.2.5 Diagramme d’activité . . . . . . . . . . . . . . . . . . . . . . . . . 22

3 Etude Conceptuel 24
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2 Spécifications des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.2.1 Architecture Logique du système . . . . . . . . . . . . . . . . . . . 25
3.2.2 Architecture physique du système . . . . . . . . . . . . . . . . . . 26

X
 3.2.3 Diagramme de séquence boîte blanche . . . . . . . . . . . . . . . 28
3.2.4 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2.5 Diagramme d’État de transition . . . . . . . . . . . . . . . . . . . 35

4 Etude techniques 37
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2 Spécifications techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.1 Présentation Langage de programmation "JavaScript" . . . . . . . 38
4.2.2 Présentation Bibliothèque ReactJs . . . . . . . . . . . . . . . . . . 38
4.2.3 Comparaison entre ReactJs et JavaScript . . . . . . . . . . . . . . . 39
4.2.4 Présentation NodeJs . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.2.5 Présentation Express . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.2.6 Présentation MongoDB . . . . . . . . . . . . . . . . . . . . . . . . 39
4.2.7 Présentation Authentification avec Cookies et Local Storage . . . 40
4.2.8 Présentation des [Link] . . . . . . . . . . . . . . . . . . . . . . 41
4.3 Environnement de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.3.1 Outils de communication et gestion du projet . . . . . . . . . . . 42
4.3.2 Outil de conception : . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.3.3 Outils et technologies de développement . . . . . . . . . . . . . . 46

5 Mise en œuvre 51
5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.2 Dockerisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.2.1 Dockerfile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.2.2 Dockerignore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.2.3 fichier [Link] . . . . . . . . . . . . . . . . . . . . . . 54
5.3 Réalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.3.1 Présentation Graphique . . . . . . . . . . . . . . . . . . . . . . . . 56
5.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Conclusion Générale 77

Projet fin d’études XI 2023/2024

 INTRODUCTION GÉNÉRALE

Actuellement, pour assurer une expérience optimale de location de voitures, il

est essentiel de disposer d’une plateforme performante et intuitive qui facilite les
interactions entre les clients et les agences de location de voitures. En effet, notre solution
s’efforce de répondre à ce besoin de manière novatrice et efficace, en intégrant des
fonctionnalités avancées et une interface conviviale. Nous reconnaissons l’importance
cruciale de la fluidité et de la simplicité dans les processus de recherche, de comparaison
et de réservation pour offrir une expérience utilisateur exceptionnelle.

La recherche et la réservation de voitures de location peuvent souvent s’avérer

compliquées et fastidieuses pour les clients. Ils doivent naviguer à travers une multitude
d’offres éparses et de plateformes variées, ce qui peut entraîner une perte de temps et
de frustration. De plus, les agences de location de voitures, bien qu’elles souhaitent
accroître leur visibilité et attirer davantage de clients, sont souvent confrontées à des
défis liés à la gestion efficace de leurs réservations et à la communication avec les
clients. C’est dans ce contexte que notre projet prend toute son importance. Nous
envisageons la création d’une plateforme centralisée et intuitive de location de voitures,
qui permettra aux clients de trouver facilement les meilleures offres correspondant à
leurs besoins spécifiques. Parallèlement, les agences pourront gérer leurs réservations,
améliorer leur visibilité et optimiser leur communication avec les clients. Notre objectif
est de simplifier et d’améliorer chaque étape du processus de location de voitures, afin
de garantir une satisfaction maximale des utilisateurs et de soutenir la croissance des
agences de location.

Ce présent rapport sera structuré en plusieurs chapitres :

Dans le premier chapitre, intitulé « Contexte général du projet », nous présenterons

le cadre de notre initiative, en détaillant les objectifs et les avantages de notre plateforme
tant pour les clients que pour les agences de location de voitures. Nous aborderons
également les défis actuels dans le processus de recherche et de réservation de voitures,
et proposerons des solutions innovantes pour y remédier.

Le second chapitre, intitulé « Étude et spécifications techniques », nous permettra

d’identifier les techniques avancées nécessaires à la mise en œuvre de notre plateforme.
Nous y détaillerons les spécifications et les contraintes techniques, en expliquant les

Projet fin d’études 1 2023/2024

choix technologiques adoptés pour garantir une expérience utilisateur optimale.

Le troisième chapitre, intitulé « Fonctionnalités et exigences du système », présen-

tera toutes les fonctionnalités de notre système pour chaque type d’utilisateur. Nous
recenserons les besoins fonctionnels et non fonctionnels, illustrés par des diagrammes
de cas d’utilisation, afin de modéliser le comportement attendu de notre plateforme.

Le quatrième chapitre, intitulé « Conception et modélisation du projet », concernera

l’étude conceptuelle répondant aux besoins fonctionnels identifiés. Nous y décrirons
la conception détaillée de notre système, en mettant l’accent sur l’architecture et les
modèles de données.

Enfin, dans le dernier chapitre, intitulé « Réalisation », nous nous intéresserons

à l’implémentation et à la réalisation de l’application. Nous terminerons par une des-
cription du système à travers les interfaces développées et conclurons ce rapport par
un résumé des résultats obtenus, ainsi que des perspectives pour de futurs développe-
ments.

Projet fin d’études 2 2023/2024

Chapitre 1 :

Contexte générale du projet

3
Chapitre 1 Contexte générale du projet

1.1 Introduction
Ce chapitre est consacré à présenter le cadre général du projet. Je commence par
présenter l’organisme d’accueil dans lequel j’ai effectué mon stage. Ensuite, je présente
une vue globale sur le projet de stage.

1.2 Présentation de l’organisme d’accueil

1.2.1 Aperçu général

F IGURE 1.1 – Logo OuzTechnology

OUZTECHNOLOGY est une Société A Responsabilité Limitée d’Associé Unique,

spécialisée dans le développement informatique, créée le 24 juillet 2023 et dirigée par
Monsieur Wail BOUZAHER. L’objet social de l’entreprise englobe le traitement de
données, l’hébergement, les autres activités connexes, ainsi que les portails Internet.
Animée par une passion pour l’innovation technologique, l’entreprise se consacre à
créer des expériences immersives et novatrices pour aider ses clients à établir une
communication nouvelle et stimulante avec leur public.

L’activité principale d’OUZTECHNOLOGY se concentre sur le développement

d’applications web sur mesure pour des entreprises de divers secteurs. En collaborant
étroitement avec leurs clients, ils s’efforcent de comprendre les objectifs spécifiques
et les besoins particuliers de ceux-ci. Cela leur permet de concevoir des expériences
personnalisées et adaptées.

Projet fin d’études 4 2023/2024

Chapitre 1 Contexte générale du projet

1.2.2 Détails Juridiques de l’Entreprise

F IGURE 1.2 – Présentation de l’Entreprise

Projet fin d’études 5 2023/2024

Chapitre 1 Contexte générale du projet

Cette fiche présente les informations légales et administratives de la société Ouz-

technologie, constituée en tant que Société à Responsabilité Limitée d’Associés Unique.
[4]

1.3 Présentation du Projet "Link"

1.3.1 Context Générale

Le but du projet Link est de réactiver le secteur de la location de voitures au Maroc
en lui donnant un nouvel élan et en facilitant l’accès à ses services. Selon ma propre
expérience et les entretiens avec des clients potentiels, le processus actuel de location
de voitures comporte de nombreux inconvénients, notamment la disponibilité peu
pratique des agences, des processus bureaucratiques et le manque de possibilité de
comparer les offres. Le but du projet Link est de réactiver le secteur de la location de
voitures au Maroc en lui donnant un nouvel élan et en facilitant l’accès à ses services.
Selon ma propre expérience et les entretiens avec des clients potentiels, le processus
actuel de location de voitures comporte de nombreux inconvénients, notamment la
disponibilité peu pratique des agences, des processus bureaucratiques et le manque de
possibilité de comparer les offres.

1.3.2 Problématique
La location de voitures au Maroc peut s’avérer être un véritable casse-tête pour
les clients, et un frein à la croissance pour les agences de location. Dispersion des
agences, lourdeurs administratives et difficultés d’accès physiques sont quelques-uns
des obstacles majeurs rencontrés par les usagers.

• Dispersion des agences : Les agences de location de voitures sont disper-

sées à travers le pays, ce qui rend difficile pour les clients de localiser et de
comparer les offres. Cette fragmentation empêche une vue d’ensemble du
marché et réduit la commodité pour les clients ;
• Processus bureaucratique complexe : Le processus de location de voi-
tures est souvent accompagné de formalités administratives lourdes et
chronophages. Les clients doivent remplir de nombreux documents et se
soumettre à des vérifications manuelles, ce qui rallonge le temps nécessaire
pour finaliser une location ;
• Difficulté d’accès physique aux agences : Les clients, en particulier ceux
qui ne sont pas familiers avec la région, peuvent avoir du mal à trouver les
agences de location. Cette difficulté d’accès réduit l’efficacité du processus
de location et peut dissuader les clients potentiels.

Projet fin d’études 6 2023/2024

Chapitre 1 Contexte générale du projet

Ce manque de centralisation et de transparence crée une fragmentation du marché,

entraînant une perte potentielle de clientèle pour les agences.

1.3.3 Solution Proposée

Link et une solution que nous avons construit. Il s’agit d’une application qui
rassemble tous les services de chaque agence de location de véhicules. La plateforme
dispose d’une interface utilisateur structurée qui permet à l’utilisateur de réaliser
diverses tâches qui nécessitent du temps et de l’effort telles que :

• Interface unique : Une plateforme où les utilisateurs peuvent rechercher,

comparer et réserver des voitures en toute simplicité ;
• Géolocalisation : Des fonctionnalités permettant aux clients de trouver
facilement les agences à proximité ;
• Gestion numérique des documents et paiements en ligne : Simplification
et automatisation des processus administratifs, réduisant ainsi les délais de
vérification et les formalités bureaucratiques ;
• Visibilité accrue des agences : Amélioration de la visibilité en ligne des
agences grâce à une présence sur la plateforme, des outils de marketing
digital et des avis clients ;
• Support client centralisé et services après-vente : Garantir une expérience
client positive en offrant un support centralisé et des services après-vente
efficaces ;
• Rechercher :Les utilisateurs ont la possibilité de chercher des véhicules
disponibles en se basant sur leurs critères particuliers (type de véhicule,
budget, localisation, etc.) ;
• Comparer : Les clients ont la possibilité de comparer aisément les offres de
diverses agences, en prenant en considération les tarifs, les avis des clients
et les conditions de location ;
• Réserver : La plateforme offre la possibilité de réserver des véhicules en
quelques clics, simplifiant ainsi la procédure de location.

Des fonctionnalités de géolocalisation seraient intégrées pour aider les clients à

trouver rapidement les agences à proximité, ce qui est particulièrement utile pour les
touristes et les personnes ne connaissant pas bien la région.
En outre, l’application permettrait une gestion numérique des documents de
location (contrats, permis de conduire, etc.) et des paiements en ligne sécurisés, auto-
matisant ainsi de nombreux aspects du processus de location et réduisant les délais de
vérification.

Projet fin d’études 7 2023/2024

Chapitre 1 Contexte générale du projet

L’application améliorerait également la visibilité des agences de location de voi-

tures grâce à :
• Une présence en ligne renforcée : Chaque agence aurait une page dédiée
sur la plateforme, avec des informations détaillées sur les services proposés ;
• Des avis clients : Les clients pourraient laisser des avis et des notes, aug-
mentant ainsi la transparence et aidant les futurs clients à faire des choix
informés.
En adoptant une telle approche, "Link" vise à répondre aux besoins croissants de
modernisation et de facilité d’accès dans le secteur de la location automobile au Maroc,
transformant ainsi l’expérience de location pour les clients et les agences.

1.4 Méthodologie et planification

Dans cette session j’entamerai la partie methodologie mise en place pour le traite-
ment de ce proget suivi pour sa realisation dont la methodologie agile SCRUM.

F IGURE 1.3 – Méthode SCRUM

Tout projet réussi nécessite une organisation rigoureuse et une méthodologie de

travail bien définie. Le travail en équipe ne doit pas être laissé au hasard, mais doit
être structuré et guidé par des règles claires. Un plan quotidien précis doit être suivi
pour éviter les difficultés et surmonter les imprévus. Étant donné que les besoins
ne sont souvent pas clairs dès le début du projet, nous avons décidé d’adopter une
méthodologie agile et flexible. Cela permettra de faciliter les modifications nécessaires
et de garantir la pérennité du projet.

Le framework Scrum permet de travailler en équipe pour faire de l’amélioration

Projet fin d’études 8 2023/2024

Chapitre 1 Contexte générale du projet

continue sur des livraisons itératives incrémentales de produits afin de satisfaire vos
clients. Scrum est fondé sur la théorie du contrôle empirique de processus et soutenu
par 3 piliers fondamentaux :

La transparence : le fait d’être honnête, de ne rien avoir à cacher, de travailler

ensemble au succès du produit/projet en rendant les aspects importants du processus
visibles à tous ceux qui sont responsables des résultats ;

L’inspection : le fait de pouvoir s’entraider et inspecter les artefacts Scrum et l’état

d’avancement par rapport à un Objectif de Sprint afin de détecter les écarts indésirables ;

l’adaptation : le fait de s’adapter aux changements en général, changements de

produit, changements de façon de faire.

Scrum est un cadre de travail et non une méthode Léger ,Simple, Empirique et
Itératif.

1.4.1 Equipe du projet

L’équipe de notre projet se constitue des membres suivants :

TABLE 1.1 – Les membres de l’équipe de projet

Membre Fonction
Wail BOUZAHER Product Owner
MOHAMED TAHIRI Ingénieur DevOps et Cloud AWS
Oussama Tahiri Scrum Master
Zakari Anas Ingénieur MERN
Issam ELKHATTABI Directeur Technique/Encadrant de stage

1.4.2 La méthode agile SCRUM

Nous avons adopté SCRUM comme méthode de gestion, afin de booster la productivité
de l’équipe, structurer le projet et gagner le temps. Cette méthode définit principalement trois
rôles :
• Product Owner : Est celui qui définit les fonctionnalités du produit à
réaliser, il garde l’interaction entre le client et l’équipe de développement ;

Projet fin d’études 9 2023/2024

Chapitre 1 Contexte générale du projet

• Scrum Master : Veille à l’application des principes de la méthode SCRUM,

il facilite la communication dans l’équipe, et s’intervient pour résoudre
toutes sortes de conflits entre les membres de l’équipe ;
• Equipe de développement : Est l’équipe de la réalisation qui s’occupe de
développement des fonctionnalités du produit, veille à la transformation
des besoins en service ou produit.

La méthode agile SCRUM est populaire, car ses enseignements et ses principes
sont valables pour tout type de travail en équipe. Parmi ces principes :

— Simplicité et légèreté ;
— Transformer le projet en un process incrémental et itératif ;
— Diviser le projet en plusieurs cycles appelés « Sprint » ;
— Définir les rôles et clarifier les responsabilités entre les intervenants du
projet.

Projet fin d’études 10 2023/2024

Chapitre 1 Contexte générale du projet

TABLE 1.2 – Présentation des sprints

Sprints Date
Sprint 0 04-03-2024 → 14-03-2024
- Se familiariser avec l’entourage ;
Tâches
- Se documenter à propos de Link ;
- Se documenter à propos des outils.
Sprint 1 15-03-2024 → 25-03-2024
- Formation sur les outils ;
Tâches
- Faire une simple application d’authentifica-
tion basée sur le stockage client.
Sprint 2 26-03-2024 → 15-04-2024
- Faire une conception initiale du projet ;
Tâches - Proposition et choix d’architecture du pro-
jet ;
- Dockerisation.
Sprint 3 16-04-2024 → 30-04-2024
- Création de la page d’accueil (Back-end +
Tâches Front-end) ;
- Création d’interface d’authentification et
d’inscription d’agence ;
- Création de la page d’accueil des agences
différentes.
Sprint 4 01-05-2024 → 31-05-2024
- Développement du profil des agences ;
Tâches - Création d’interface de location ;
- Implémentation de la logique de location
d’une voiture ;
- Intégration du paiement à l’aide d’API
Stripe.
Sprint 5 01-06-2024 → 17-06-2024
Tâches - Filtrage des agences ;
- Gestion des gérants.

Projet fin d’études 11 2023/2024

Chapitre 1 Contexte générale du projet

TABLE 1.3 – Présentation des sprints (suite)

Sprints Date
Sprint 6 22-06-2024 → 20-07-2024
- Création d’interface d’authentification et
d’inscription pour le client ;
Tâches
- Développement du profil client (Back-end +
Front-end) ;
- Tri des agences en se basant sur les avis +
présence des gérants ;
- Création d’interface de messagerie.
Sprint 7 25-07-2024 → 03-09-2024
- Implémentation de la logique de message-
Tâches rie ;
- Implémentation des sockets au niveau de la
messagerie ;
- Implémentation des sockets au niveau de
l’interface de réservation d’une voiture.

1.4.3 Outils de gestion du projet

Pour faciliter le déroulement du projet, et pour bien gérer le Sprint Backlog et le
Product Backlog, nous basant principalement sur des outils de gestion du projet, comme
l’outil Azure DevOps Boards, qui nous permet à mieux suivre le développement de
nos user-story, et d’avoir une idée claire sur les deadlines, les taches affectées à chaque
élément de l’équipe, les priorités de chaque tache.
Les taches actuelles de chaque sprint peuvent être soit :
• A faire : les taches à faire prochainement ;
• En cours : les taches en cours de développement ;
• Fini : Les taches Terminées et résolues ;
• Problème : Les taches où des problèmes sont rencontrés.

Projet fin d’études 12 2023/2024

Chapitre 1 Contexte générale du projet

F IGURE 1.4 – L’outil Jira

1.5 Planning du projet

F IGURE 1.5 – Gantt

Projet fin d’études 13 2023/2024

Chapitre 1 Contexte générale du projet

1.6 Planning du projet

F IGURE 1.6 – Gantt (Suite)

Pour assurer une gestion efficace du projet, nous avons utilisé le diagramme de
Gantt afin de planifier et suivre les différentes phases du développement. Le diagramme
de Gantt nous a permis de visualiser l’ensemble des tâches à accomplir, leurs durées
respectives, ainsi que les interdépendances entre elles. Cette méthode de planification
a facilité la répartition des ressources et le respect des délais, en fournissant une vue
d’ensemble claire et détaillée du calendrier du projet. En utilisant cet outil, nous avons
pu identifier rapidement les éventuels retards et ajuster le planning en conséquence,
assurant ainsi une progression fluide et organisée vers la réalisation des objectifs définis.

Conclusion
La mise en place d’une application de location de voitures en ligne, centralisant
les offres de multiples agences, répondra aux besoins croissants de modernisation et
de facilité d’accès dans le secteur de la location automobile au Maroc. Cette solution
permettra non seulement de simplifier et d’accélérer le processus de location, mais
aussi d’améliorer la satisfaction des clients et la visibilité des agences.

Projet fin d’études 14 2023/2024

Chapitre 2 :

Etude fonctionnelle

15
Chapitre 2 Etude Fonctionnelle et Technique

2.1 Introduction
Dans ce chapitre je vais détailler les exigences fonctionnelles et non fonctionnelles
du projet, et faire une analyse du besoin, ainsi la présentation des différents cas d’utili-
sation en se basant sur des diagrammes UML

2.2 Spécifications des besoins

2.2.1 Besoins fonctionnels

Les besoins fonctionnels sont les exigences fonctionnelles du projet, généralement
représente toutes les fonctionnalités concrètes que le produit ou le service délivré
par le projet devrait faire ou être. Tout notre effort concentre à répondre aux besoins
fonctionnels suivants :
Pour l’utilisateur « Client » :
• S’identifier : le système doit permettre à l’utilisateur de s’identifier, ce qui
signifie qu’il doit avoir la possibilité de créer un compte et de se connecter
pour accéder à ses informations personnelles et sécurisées ;
• Lister les agences : l’utilisateur doit pouvoir lister les agences, offrant une
vue d’ensemble de toutes les agences disponibles. ;
• Comparer les agences : La fonctionnalité de comparer les agences permet
à l’utilisateur de juxtaposer différentes agences en termes de services, prix,
et autres critères pertinents pour prendre une décision éclairée ;
• Filtrer les agences : Filtrer les agences est une autre fonctionnalité essen-
tielle, permettant à l’utilisateur de rechercher des agences spécifiques en
appliquant divers critères de filtrage comme la localisation, ou les évalua-
tions des clients ;
• Afficher la localisation exacte des agences :L’affichage de la localisation
exacte des agences permet à l’utilisateur de voir où se trouvent les agences
sur une carte, facilitant ainsi la planification de ses visites ;
• Afficher les détails d’une agence : fournit des informations complètes sur
chaque agence, y compris les services offerts, les heures d’ouverture, et les
avis des clients ;
• Lister les chemins disponibles vers l’agence : Lister les chemins dispo-
nibles vers l’agence désirée aide l’utilisateur à planifier son trajet de manière
efficace ;
• Afficher les détails d’une voiture : permet de voir les spécifications et les
caractéristiques des véhicules disponibles à la location ;

Projet fin d’études 16 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

• Voir la disponibilité d’une voiture : est crucial pour vérifier si le véhicule

souhaité est disponible aux dates nécessaires ;
• Réserver une voiture : cette fonctionnalité permet à l’utilisateur de réserver
le véhicule choisi directement via le système, simplifiant ainsi le processus
et évitant les démarches longues et fastidieuses ;
• Visualise son profil : donne à l’utilisateur accès à ses informations person-
nelles et historiques de réservation ;
• Visiter la liste des réservations : permet de consulter toutes les réservations
passées et futures ;
• Changer l’état de la réservation : permet de modifier ou annuler une
réservation en fonction des besoins ;
• Payer en ligne :Payer en ligne offre un moyen sécurisé et pratique pour
finaliser les transactions ;
• Contacter les agences : cette fonctionnalité permet à l’utilisateur de po-
ser des questions ou d’obtenir des informations supplémentaires via une
interface de messagerie en ligne ;
• Ajouter une agence au Panier : facilite la planification en sauvegardant les
options intéressantes pour une décision ultérieure ;
• Ajouter une agence au favori : permet de marquer les agences préférées
pour un accès rapide ;
• Ajouter des avis sur les agences : permet de partager son expérience et
aider les autres utilisateurs ;
• Ajouter des commentaire dans la page des agences : permet de poser des
questions ou interagir avec d’autres clients.
Pour l’utilisateur « Agence » :
• S’identifier : le système doit permettre à l’utilisateur de s’identifier, offrant
un accès sécurisé à ses informations et à la gestion de l’agence ;
• Lister les agences : permet de voir toutes les agences sous gestion ;
• Afficher les détails d’une agence : fournit des informations complètes sur
chaque agence, aidant à la gestion et à la présentation aux clients ;
• Ajouter une voiture : permet de mettre à jour l’inventaire des véhicules
disponibles ;
• Ajouter ou modifier le Gerant d’agence : permet de maintenir les informa-
tions à jour concernant la personne responsable de l’agence ;
• Ajouter ou modifier la description d’agence : permet de mettre à jour les
informations et les services offerts par l’agence ;

Projet fin d’études 17 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

• Visiter profil : donne accès aux informations personnelles et aux paramètres

de l’agence ;
• Consulter les réservations : permet de voir toutes les réservations faites
auprès de l’agence ;
• Gerer les réservations : offre la possibilité de modifier, approuver ou
annuler des réservations selon les besoins ;
• Modifier l’emplacement actuel de l’agence : permet de mettre à jour la
localisation en cas de déménagement ou de changement d’adresse ;
• Filtrer les agences : permet de rechercher des agences spécifiques en appli-
quant divers critères pour une gestion plus efficace.

2.2.2 Besoins non fonctionnels

Les besoins non fonctionnels représentent la performance, les propriétés et les
comportements du système telles que la performance, la flexibilité, les contraintes
d’environnement. Il aide généralement à améliorer la qualité et améliore le bon fonc-
tionnement du service ou du produit délivré par le projet.
Nous essayons à réaliser une solution qui répond aux exigences non fonctionnelles
suivants :

• Performance : Les services délivrés par le système doivent avoir un temps

d’exécution et de réponse très faibles. L’affichage et la consultation des
résultats doit être rapide et précis vu le nombre important des opérations
quotidiennes, il est impérativement nécessaire que la durée d’exécution des
traitements soit la plus courte possible ;
• Sécurité : Les mot de passe doivent etrecomplexe et stoke d’une mmaniere
crypte ;
• Fiabilité :Concevoir un environnement fiable ne risquant pas une mauvaise
manipulation des sources et serveurs ;
• Simplicité : l’application doit être facile à utiliser, elle doit avoir des inter-
faces simples ;
• Extensibilité : L’application a la capacité d’évoluer et de s’adapter de ma-
nière efficace à de nouvelles fonctionnalités, améliorations ou modifications
sans nécessiter une refonte complète.

Projet fin d’études 18 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

2.2.3 Acteurs du système

TABLE 2.1 – Description des acteurs

Acteur Description
Administrateur Maintenir l’application.
L’agence a la possibilité de :
• S’authentifier ;
• S’inscrire ;
• Visualiser les agences ;
• Gérer le profil ;
Agence • Gérer les reservations ;
• Gérer les voitures ;
• Envoyer des messages ;
• Recevoire des messages ;
• Lister les reservations.

Le client a la possibilité de :
• S’authentifier ;
• S’inscrire ;
• Visualiser les agences ;
• Visualiser les details de
Client chaque voiture ;
• Gérer le profil ;
• Gérer ses réservations ;
• Envoyer des messages ;
• Recevoire des messages.

Projet fin d’études 19 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

TABLE 2.2 – Description des acteurs (suite)

Acteur Description
• Lister les agences ;
• Afficher les detailles d’une
agance ;
• Afficher les detailles d’une
agance ;
visiteur • Filtrer les agence par ville
et prix ;
• lister les trajets dispo-
nibles ;
• Choisir un trajet.

2.2.4 Diagramme de cas d’utilisation

Les diagrammes de cas d’utilisation sont des diagrammes UML utilisés pour
une représentation du comportement fonctionnel d’un système logiciel. Ils sont utiles
pour des présentations auprès de la direction ou des acteurs d’un projet, mais pour le
développement, les cas d’utilisation sont plus appropriés. En effet, un cas d’utilisation
(use cases) représente une unité discrète d’interaction entre un utilisateur (humain ou
machine) et un système.[1]

[Link] Diagramme détaillé de cas d’utilisation «Client+Visiteur»

La figure ci-dessous présente le diagramme de cas d’utilisation du Client et du
Visiteur.

Projet fin d’études 20 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

F IGURE 2.1 – Diagramme détaillé de cas d’utilisation «Client+Visiteur»

Dans ce diagramme, on observe que le client peut effectuer plusieurs actions une
fois connecté, telles que créer des conversations, envoyer et recevoir des messages,
ajouter des agences au panier, et effectuer ainsi que payer une réservation.

[Link] Diagramme détaillé de cas d’utilisation «Agence+Visiteur»

La figure ci-dessous présente le diagramme de cas d’utilisation d’agence et du
Visiteur.

Projet fin d’études 21 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

F IGURE 2.2 – Diagramme détaillé de cas d’utilisation «Agence+Visiteur»

Le diagramme donne une idée des fonctionnalités de l’agence dans notre applica-
tion de location de vehicules, ajouter une description de l’agence, gérer l’emplacement
physique de l’agence, nommer un gérant, envoyer et recevoir des messages, et gérer
son profil...

2.2.5 Diagramme d’activité

La figure ci-dessous présente le diagramme d’activité de la réservation, où le
processus de réservation est détaillé. Le client commence par sélectionner la voiture
désirée, puis choisit les dates souhaitées, lesquelles doivent être disponibles, c’est-à-dire
que personne n’a réservé la voiture pendant cette période. Ensuite, le client procède au
paiement et reçoit la confirmation, ainsi que le changement de statut de la réservation.
En cas d’insatisfaction, le client a la possibilité de déposer une réclamation. L’agence
étudie alors le cas et, si la réclamation est validée, le remboursement est effectué. Dans
le cas contraire, le remboursement n’est pas effectué.

Projet fin d’études 22 2023/2024

Chapitre 2 Etude Fonctionnelle et Technique

F IGURE 2.3 – diagramme d’activité de la réservation

Conclusion
Dans ce chapitre j’ai détaillé les exigences fonctionnelles et non fonctionnelles
du projet, et j’ai fait une analyse du besoin, ainsi la présentation des différents cas
d’utilisation en se basant sur des diagrammes UML

Projet fin d’études 23 2023/2024

Chapitre 3 :

Etude Conceptuel

24
Chapitre 3 Conception de la solution

3.1 Introduction
En se basant sur l’analyse réalisée dans le chapitre précèdent, je présente dans ce
chapitre la conception proposée par l’équipe pour répondre aux besoins.

3.2 Spécifications des besoins

3.2.1 Architecture Logique du système

L’architecture Modèle/Vue/Contrôleur (MVC) est une façon d’organiser une in-
terface graphique d’un programme. Elle consiste à distinguer trois entités distinctes
qui sont, le modèle, la vue et le contrôleur ayant chacun un rôle précis dans l’interface.
L’organisation globale d’une interface graphique est souvent délicate. Bien que la façon
MVC d’organiser une interface ne soit pas la solution miracle, elle fournit souvent
une première approche qui peut ensuite être adaptée. Elle offre aussi un cadre pour
structurer une application. Dans l’architecture MVC, les rôles des trois entités sont les
suivants :
• Modèle : données (accès et mise à jour) ;
• Vue : interface utilisateur (entrées et sorties) ;
• Contrôleur : gestion des événements et synchronisation.

F IGURE 3.1 – Architecture MVC

Projet fin d’études 25 2023/2024

Chapitre 3 Conception de la solution

3.2.2 Architecture physique du système

L’architecture 3-tier (anglais tier : étage, niveau), ou encore appelée multi-tier, est
une architecture client-serveur dans laquelle une application est exécutée par plusieurs
composants logiciels distincts.

La séparation des couches dans une application permet de faciliter la maintenance

du code. Prenons comme exemple une application ayant trois couches, c’est-à-dire :
• Une couche d’accès aux données (DAL) ;
• couche Présentation (PL) ;
• Une couche métier(BLL).
Le role de chaque couche est :

Couche Présentation (Côté client) :

Technologie : [Link]
• UI : Présenter une interface conviviale pour les utilisateurs finaux ;
• UX : rendre les interactions entre l’utilisateur et l’application fluide ;
• Rendu et composants : dans notre cas, on a utilisé [Link] pour construire
les interfaces utilisateur à travers des composants pour rendre les données
dynamiquement et gérer l’état de l’application côté client ;
• Interaction avec le serveur : Envoyer des requêtes HTTP pour récupérer
ou envoyer des ressources.
Couche de Logique Métier (Côté serveur) :
Technologies : [Link], [Link]
• Gestion des requêtes : Gérer les requêtes envoyées de la part du client ;
• Logique Métier : un ensemble de règles et de processus qui régissent
les opérations de l’application. Elle est utilisée pour décrire les étapes
nécessaires pour accomplir une tâche particulière, ainsi que ses règles
et conditions pour que cette tâche soit considérée comme terminée avec
succès ;
• Authentification et Autorisation : L’authentification est la clé. L’autorisa-
tion est le fait de savoir si cette clé vous donne ou non des droits d’accès.
L’authentification est initiée par l’utilisateur tandis que l’autorisation est
déterminée par une politique et délivrée par l’application, le système ou la
ressource à laquelle on accède ;
• Gestion des Sessions : Gestion des Sessions : Chaque utilisateur connecté
a sa propre session qui lui permet de naviguer dans l’application. Ces
sessions sont gérées par les cookies ;

Projet fin d’études 26 2023/2024

Chapitre 3 Conception de la solution

• Communication avec la Base de Données : À travers les requêtes reçues

de la part d’utilisateurs, une communication avec la base de données se
produit. Ces requêtes peuvent ajouter, supprimer ou modifier dans la base
de données ;
• Gestion des Erreurs : Gérer les erreurs et envoyer les réponses au client.
Couche de Données(BD) :
Technologies : MongoDB
• Stockage des Données : Stocker les données de l’application de manière
non structurée ;
• Requêtes et Indexation : Fournir l’exécution efficace des requê[Link]
index, MongoDB doit effectuer une analyse de collection , c’est-à-dire ana-
lyser chaque document d’une collection, pour sélectionner les documents
qui correspondent à l’instruction de requête ;
• Gestion des Collections : Enregistrer et organise les données dans des
collections et documents pour faciliter l’accès ;
• Sécurité des Données : Protéger les données via des mécanismes de sécu-
rité, comme le contrôle d’accès et le chiffrement.
En résumé, le rôle de la couche d’accès aux données est la sélection et la persis-
tance de données en base de données. La couche métier permet quant à elle d’appliquer
les règlesmétiers et règles de gestion. Elle ne communique qu’avec la couche d’accès
aux données. Le rôle de la couche Présentation est de représenter les données via l’in-
terface utilisateur. C’est la couche UI qui interroge la couche métier pour avoir l’accès
au traitement et à la représentation des données. Cette séparation permet d’intervenir
indépendamment sur chacune des couches de l’application sans que les autres soient
impactées.

F IGURE 3.2 – Architecture 3-tier

Projet fin d’études 27 2023/2024

Chapitre 3 Conception de la solution

3.2.3 Diagramme de séquence boîte blanche

Le diagramme de séquence représente l’interaction des acteurs avec notre sys-
tème selon un enchaînement chronologique. Ceci dit, que la représentation des cas
d’utilisation par des diagrammes de séquence va nous permettre de schématiser la
collaboration entre les objets du système d’un point de vue temporel. Dans ce qui suit,
on va présenter les diagrammes de séquences.

[Link] Diagramme de séquence boîte blanche d’envoi de message

Le diagramme ci-dessous va représenter le processus pour envoyer un message
accompagné par un tableau descriptif pour bien détailler et comprendre le diagramme.

F IGURE 3.3 – Diagramme de séquence boîte blanche d’envoi de message

Projet fin d’études 28 2023/2024

Chapitre 3 Conception de la solution

TABLE 3.1 – Description du scénario « Envoi de message »

Sommaire
Présentation générale Description textuelle du processus d’envoi d’un message.
Acteurs
• Client ;
• Agence ;
• Base de données ;
• Serveur Express ;
• [Link].

Acteurs
• Authentification ;
• E-mail Verifier qui donne le privilège d’accéder
à la section de messagerie.

Scenario nominal L’emetteur : envoie un HTTP POST qui contien comme

corps le message.
Le serveur : reçoit cette demande, il fait l’extraction des don-
nées nécessaires pour enregistrer le message.
• Identifiant d’Emmeteur ;
• Identifiant du récepteur ;
• le message.
Le serveur : essai de trouver une conversation dont les iden-
tifiants des participants conviennent aux identifiants reçus
dans la requête ;
La Base de données : essaie de trouver le résultat qui
convient avec la requête, s’il n’y a pas de conversation, une
va être créée entre les deux. Mais s’il y a une :
• Le message va être enregistré dans la collection
des messages ;
• puis identifiant du message va être enregistrer
dans la conversation qui correspond.
Le serveur :
• va notifier l’emmeteur que le message est en-
voyé ;
• vérifier si le récepteur est en ligne, si il n’est pas
en ligne le message va être modifié avec non lu
comme status s’il est en ligne.
[Link] : va notifier le récepteur qu’il a reçu un nouveau
message.
Enchainements d’erreur Cookie | Token du stockage local non valide .
Projet fin d’études 29 2023/2024
Chapitre 3 Conception de la solution

[Link] Diagramme de séquence boîte blanche de reservation

Le diagramme de séquence boite blanche suivant, c’est pour le cas d’utilisation
d’affectation d’une réservation bien détaillée et expliquée à travers une description
textuelle.

F IGURE 3.4 – Diagramme de séquence boîte blanche du reservation

Projet fin d’études 30 2023/2024

Chapitre 3 Conception de la solution

TABLE 3.2 – Description du scénario « Reservation»

Sommaire
Présentation générale Description textuelle du processus de réservation
Acteurs
• UtilisateursOnline «client En-ligne» ;
• Client ;
• serveur ;
• BD ;
• webSocket.

Acteurs
• Authentification ;
• E-mail Verifier qui donne le privilège de réserver
une voiture.

Scenario nominal Client : demande la page des réservations ;

Le serveur : reçoit cette demande, vérifie s’il y a une session,
puis si l’e-mail est vérifié, si tout ça est valide, valide la page
pour réserver la voiture et afficher ;
Serveur : verifie si le contrat est signé et la date choisie de
cette voiture par le client est disponible. Si tout ça est valide,
il envoie une requête à la base de données pour enregistrer
cette nouvelle réservation ;
La Base de données : envoie une réponse de succès au ser-
veur si la réservation est enregistrée avec succès et le
contraire s’il y a une erreur ;
Le serveur : : récupérer les clients qui sont en ligne ;
[Link] : va notifier les clients récupérés par le serveur
qu’une nouvelle réservation est affectée à la voiture X durant
la date X ;
Le serveur : : renvoyer les nouvelles dates disponibles pour
la voiture concernée.
Enchainements d’erreur
• Cookie | Token du stockage local non valide ;
• date choisie déjà réservée ;
• date début supérieure à date fin ;
• Contract non signé ;
• Date de début de réservation inférieure à la date
d’aujourd’hui.

Projet fin d’études 31 2023/2024

Chapitre 3 Conception de la solution

[Link] Diagramme de séquence boîte blanche de renétialisation de

mot de passe
Ce diagramme ci-dessous représente une description de taille sur le processus de
renétialisation d’un mot de passe d’un utilisateur en cas de perte de mot de passe ou
bien l’oubli.

F IGURE 3.5 – Diagramme de séquence boîte blanche de renétialisation de mot de

passe

Projet fin d’études 32 2023/2024

Chapitre 3 Conception de la solution

TABLE 3.3 – Description du scénario « Réinitialisation de mot de passe » (Partie 1)

Sommaire
Présentation générale Description textuelle du processus de réinitialisation de mot
de passe.
Acteurs
• Utilisateur ;
• Application Web ;
• Serveur d’API ;
• Base de données ;
• Service d’email.

Préconditions
• L’utilisateur a accès à l’application web ;
• L’utilisateur a une adresse email enregistrée.

Scénario nominal L’utilisateur : demande la réinitialisation du mot de passe

via l’application web ;
L’application web : envoie cette demande au serveur d’API
en incluant le nom d’utilisateur ;
Le serveur d’API : recherche l’utilisateur dans la base de
données en utilisant le nom d’utilisateur ;
La base de données : retourne les informations de l’utilisa-
teur si trouvé, sinon retourne une erreur ;
Le serveur d’API : génère un token de réinitialisation et l’en-
registre pour l’utilisateur dans la base de données ;
Le serveur d’API : envoie un email de réinitialisation avec
le lien contenant le token via le service d’email ;
Le service d’email : envoie le lien de réinitialisation à l’uti-
lisateur ;
L’utilisateur : clique sur le lien de réinitialisation reçu dans
l’email.

Projet fin d’études 33 2023/2024

Chapitre 3 Conception de la solution

TABLE 3.4 – Description du scénario « Réinitialisation de mot de passe » (Partie 2)

Scénario nominal (suite) L’application web redirige l’utilisateur vers l’interface de

réinitialisation de mot de passe où il remplit les champs
nécessaires.
L’application web : envoie la demande de réinitialisation
avec le token et le nouveau mot de passe au serveur d’API ;
Le serveur d’API : vérifie le token et réinitialise le mot de
passe dans la base de données ;
La base de données : confirme la réinitialisation du mot de
passe au serveur d’API ;
Le serveur d’API : retourne le statut de succès de la réinitia-
lisation à l’application web ;
L’application web : affiche la confirmation de la réinitialisa-
tion réussie à l’utilisateur.
Enchainements d’erreur
• Utilisateur non trouvé : retour d’une erreur indi-
quant que l’utilisateur n’existe pas ;
• Token invalide : retour d’une erreur indiquant
que le token est invalide ou expiré ;
• Échec de l’envoi de l’email : informer l’utilisa-
teur que l’email n’a pas pu être envoyé.

Projet fin d’études 34 2023/2024

Chapitre 3 Conception de la solution

3.2.4 Diagramme de classe

Le diagramme de classes est un schéma utilisé pour présenter les classes et les
interfaces des systèmes ainsi que leurs relations. Ce diagramme fait partie de la partie
statique d’UML, ne s’intéressant pas aux aspects temporels et dynamiques.
Une classe décrit les responsabilités, le comportement et le type d’un ensemble
d’objets. Les éléments de cet ensemble sont les instances de la classe.
Une classe est un ensemble de fonctions et de données (attributs) qui sont liées
ensemble par un champ sémantique. Les classes sont utilisées dans la programmation
orientée objet. Elles permettent de modéliser un programme et ainsi de découper une
tâche complexe en plusieurs petits travaux simples.[2]

F IGURE 3.6 – Diagramme de classe

3.2.5 Diagramme d’État de transition

Un diagramme d’état de transition (également appelé diagramme d’états, dia-
gramme d’automate ou diagramme d’état) est un outil utilisé en modélisation de
systèmes, pour représenter les différents états qu’un objet ou un système peut avoir
ainsi que les transitions entre ces états. Ce type de diagramme est particulièrement utile
pour décrire le comportement dynamique d’un système.[3]

Projet fin d’études 35 2023/2024

Chapitre 3 Conception de la solution

F IGURE 3.7 – Diagramme d’État de transition

Le diagramme de transition d’état décrit le parcours d’un visiteur sur un site web,
depuis la création de son compte jusqu’à l’utilisation de la plateforme.
Le processus d’inscription commence lorsque le visiteur clique sur le bouton "Créer
un compte". Cette action le redirige vers un formulaire d’inscription qu’il doit remplir et
soumettre. Si le formulaire est correctement rempli, un e-mail de vérification est envoyé
à l’adresse fournie. En cas d’erreur dans le formulaire, une notification est affichée au
visiteur, l’informant de la nécessité de corriger les informations.
Le visiteur doit ensuite vérifier sa boîte de réception pour trouver le lien de vé-
rification envoyé par e-mail. En cliquant sur ce lien, le visiteur confirme son adresse
e-mail. Si le lien de vérification est invalide ou expiré, il sera redirigé vers une page
indiquant une erreur. Si le lien est toujours valide, le visiteur est alors officiellement
enregistré en tant qu’utilisateur de la plateforme.

Conclusion
Préciser les objectifs et les fonctionnalités du système avant d’entamer la phase
de réalisation semble une étape primordiale visant à reconnaitre les frontières de
l’utilisation, les services ainsi que les solutions que présente ce système à l’utilisateur.
A la fin de ce chapitre nous avons pu modéliser le fonctionnement du système. Ceci est
fait à travers différents diagrammes permettant de bien spécifier la composition et le
comportement du système.

Projet fin d’études 36 2023/2024

Chapitre 4 :

Etude techniques

37
Chapitre 4 Spécifications techniques

4.1 Introduction
Dans ce chapitre, je vais faire une étude technique approfondie, en détaillant les
spécifications et les contraintes techniques de notre système. Ensuite, je présenterai les
choix techniques adoptés.

4.2 Spécifications techniques

4.2.1 Présentation Langage de programmation "JavaScript"

JavaScript est un langage de programmation de haut niveau, souvent utilisé pour
le développement web. Il permet de créer des pages web interactives et dynamiques.
JavaScript est un langage interprété, ce qui signifie qu’il est exécuté par le navigateur
web sans nécessiter de compilation préalable. Il est également utilisé côté serveur grâce
à des environnements d’exécution comme [Link].[5]

4.2.2 Présentation Bibliothèque ReactJs

ReactJs est une bibliothèque JavaScript développée par Facebook pour faciliter
la création d’interfaces utilisateur interactives et réactives. Elle permet de construire
des composants d’interface utilisateur encapsulés qui gèrent leur propre état. React
utilise un DOM virtuel pour optimiser les mises à jour et rendre le développement plus
performant.

Projet fin d’études 38 2023/2024

Chapitre 4 Spécifications techniques

4.2.3 Comparaison entre ReactJs et JavaScript

TABLE 4.1 – Comparaison entre ReactJs et JavaScript

Critère JavaScript ReactJs

Type Langage de programmation Bibliothèque JavaScript
Génération de pages web dy- Création de composants réutili-
Usage namiques et manipulation du sables pour les interfaces utilisa-
DOM teur
Nécessite des connaissances en
Nécessite la connaissance des
Apprentissage JavaScript, plus facile avec des
bases de la programmation web
bases solides en JS
Directement lié aux capacités du Utilise un DOM virtuel pour
Performances
navigateur améliorer les performances
Fais partie de l’écosystème JavaS-
Très vaste avec de nombreuses
Écosystème cript, souvent utilisé avec Redux,
bibliothèques et frameworks
React Router

Cette table présente une comparaison entre ReactJs et JavaScript.

4.2.4 Présentation NodeJs

[Link] est un environnement d’exécution JavaScript côté serveur. Il utilise un
modèle non-bloquant, basé sur des événements, ce qui le rend très performant pour les
applications d’E/S intensives. [Link] permet aux développeurs de créer des applica-
tions réseau rapides et évolutives en utilisant JavaScript.

4.2.5 Présentation Express

Express est un framework web minimaliste pour [Link]. Il fournit un ensemble
robuste de fonctionnalités pour développer des applications web et mobiles. Avec
Express, les développeurs peuvent gérer les requêtes HTTP avec des routes définies,
simplifiant ainsi la construction d’applications web et d’API.

4.2.6 Présentation MongoDB

MongoDB est une base de données NoSQL orientée documents. Elle stocke les
données sous forme de documents JSON, ce qui permet une grande flexibilité et une
facilité d’utilisation. MongoDB est bien adapté aux applications nécessitant une base
de données évolutive et performante.

Projet fin d’études 39 2023/2024

Chapitre 4 Spécifications techniques

4.2.7 Présentation Authentification avec Cookies et Local Storage

L’authentification avec cookies et local storage est une méthode couramment utili-
sée pour gérer les sessions utilisateur et sécuriser les applications web. Voici comment
ces mécanismes fonctionnent :

[Link] Authentification avec Cookies

1. Connexion initiale : Lors de l’authentification d’utilisateur au niveau de la page
d’authentification, les informations de l’utilisateur sont transmises au serveur.
2. Création du cookie : Si le mot de passe et le nom d’utilisateur dans le cas de
l’agence ou bien l’e-mail dans le cas d’utilisateur, le serveur génère un JWT qui contient
des champs spécifiques choisis à partir de ces informations personnelles et le serveur
l’envoie au client sous forme de cookie.
3. Stockage et Vérification du cookie : Ce cookie qui est stocké au niveau du
navigateur va être envoyé au serveur avec chaque requête qui nécessite la vérification
d’authentification et d’identité de l’utilisateur qui veut utiliser cette ressource.
4. Expiration et déconnexion : Chaque création de cookie est accompagnée par
un temps d’expiration , quand le temps arrive à sa fin, par défaut, le cookie va être
supprimé du navigateur, dans l’autre cas, l’utilisateur se déconnecte manuellement et
ça aussi va causer la suppression de cookie.

[Link] Authentification avec Local Storage

1. Connexion initiale : De la même façon que les cookies, les informations de
connexion de l’utilisateur (e-mail/nom d’utilisateur + mot de passe) sont transmises
vers le serveur.
2. Stockage du token : Le serveur renvoie un jeton d’authentification (token) que
le navigateur stocke dans le local storage.
3. Utilisation et Vérification du token : Ce jeton va être utilisé lors de l’envoi des
requêtes qui nécessitent la vérification de l’authentification de l’utilisateur, même chose
pour la vérification d’autorisation pour accéder à certaines routes.
4. Expiration et déconnexion : Contrairement aux cookies, les tokens stockés dans
le local storage n’expirent pas automatiquement, mais peuvent être programmés pour
être invalidés par le serveur. L’utilisateur peut également supprimer le token du local
storage pour se déconnecter à travers une requête ou bien manuellement naviguer vers
Appli => Stockage local => « Nom de votre jeton » puis le supprimer.

Projet fin d’études 40 2023/2024

Chapitre 4 Spécifications techniques

[Link] Comparaison entre Cookies et Local Storage

TABLE 4.2 – Comparaison entre Authentification avec Cookies et Local Storage

Critère Cookies Local Storage

Stockage de petits morceaux de Stockage côté client, accessible
Type
données envoyés par le serveur via JavaScript
Principalement utilisé pour la Utilisé pour stocker des données
Usage gestion de sessions et la person- persistantes, telles que les jetons
nalisation de l’utilisateur d’authentification
Peut être sécurisé via des cookies
Plus vulnérable aux attaques XSS
Sécurité HttpOnly et Secure, mais vulné-
car accessible via JavaScript
rable aux attaques XSS
Ne s’expire pas automatique-
Peut être configuré pour expirer
Expiration ment, doit être géré manuelle-
automatiquement
ment
Peut stocker jusqu’à 5MB par do-
Capacité de stockage Limité à environ 4KB par cookie
maine

La différence principale entre les cookies et le Local Storage réside dans la manière
dont les données sont stockées, leur durée de vie et la façon dont elles sont envoyées
aux travers des requêtes HTTP.

Les cookies et local storage sont très populaires quand ça arrive à l’authentification,
à cause de leur simplicité à configurer et de leur flexibilité dans vous pouvez stocker
seulement les informations dont vous avez besoin. Les cookies sont généralement
utilisés par les sites Web pour collecter des informations sur les utilisateurs, améliorer
l’expérience de navigation et fournir des fonctionnalités personnalisées avec une durée
de vie spécifique. Par contre local storage qui n’a pas de durée spécifique avant d’être
automatiquement supprimé.

4.2.8 Présentation des [Link]

[Link] est une bibliotheque JS de communication temps réel entre un serveur et
un client, cette bibliotheque n’est pas propre à JS, mais elle est supportée par plusieurs
langages (C++, Java, Python, Rust. . .). L’avantage d’utiliser [Link], c’est que le
serveur pourra envoyer des messages au client sans que le client ait besoin de contacter
le serveur (communication temps réel).

Projet fin d’études 41 2023/2024

Chapitre 4 Spécifications techniques

[Link] Fonctionnalités Principales

1. [Link] donne la main à votre application pour faire des échanges d’infor-
mation en temps réel où les clients peuvent recevoir d’une manière automatique des
données qui sont mises à jour de la part du serveur, au cas où elles sont modifiées de la
part de quelqu’autre, sans être forcés à redemander chaque fois manuellement.
2. Les développeurs peuvent définir et émettre des événements personnalisés, ce
qui simplifie la gestion de différentes actions au sein de l’application.
3. En cas de perte de connexion, [Link] gère automatiquement les tentatives de
reconnexion, assurant une communication continue.

[Link] Cas d’Utilisation

[Link] est souvent utilisé dans les applications qui nécessitent une mise à jour
temps réel des données, par exemple :
1. Pour mettre en place une communication entre deux ou plusieurs utilisateurs
instantanée,
2. Dans des applications en ligne où plusieurs utilisateurs ont accès aux mêmes
ressources dans le même temps.
Certainement, il y a d’autres occasions où [Link] est utilisé, mais on a précisé
ce que on a utilisé pour atteindre nos objectifs.

4.3 Environnement de travail

4.3.1 Outils de communication et gestion du projet

Google Meet :

Google Meet Lancée en 2017, Google Meet est une plateforme de visioconférence.
Les utilisateurs peuvent créer ou planifier des réunions et inviter des membres d’orga-
nisations professionnelles ou scolaires, ou d’autres contacts Gmail. Elle est accessible
depuis l’application mobile sur les appareils Android et iOS, ou en ligne via un naviga-
teur Web. Google Meet permet aux utilisateurs de partager leur écran, de désactiver
ou d’épingler des membres spécifiques et d’enregistrer des réunions pour référence
ultérieure. [6]

Projet fin d’études 42 2023/2024

Chapitre 4 Spécifications techniques

Vercel :

Render CI/CD est un système robuste conçu pour rationaliser les processus de
développement et de déploiement des applications web modernes. Il automatise le flux
de travail, depuis la validation du code jusqu’au déploiement, garantissant que chaque
modification est testée, construite et mise en production de manière transparente.

F IGURE 4.1 – Processus CI/CD

Postman :

Postman est un outil qui permet aux développeurs de tester et de documenter

les API (Application Programming Interface). Il permet de créer des requêtes HTTP
(GET, POST, PUT, etc.), de gérer les paramètres et les entêtes, de vérifier les réponses et
les statuts de retour, et de sauvegarder des requêtes pour une utilisation ultérieure. Il
permet également de créer des collections de requêtes pour organiser et partager les
tests avec d’autres développeurs. Il est disponible en tant qu’application de bureau et
en tant qu’extension de navigateur. [7]

Projet fin d’études 43 2023/2024

Chapitre 4 Spécifications techniques

Docker :

Docker est une plate-forme logicielle qui vous permet de concevoir, tester et
déployer des applications rapidement. Docker intègre les logiciels dans des unités
normalisées appelées conteneurs, qui rassemblent tous les éléments nécessaires à leur
fonctionnement, dont les bibliothèques, les outils système, le code et l’environnement
d’exécution. Avec Docker, vous pouvez facilement déployer et dimensionner des appli-
cations dans n’importe quel environnement, avec l’assurance que votre code s’exécutera
correctement. [8]

Github :

Github est une plate-forme basée sur le cloud sur laquelle vous pouvez stocker,
partager et travailler avec d’autres pour écrire du code. Sur GitHub vous permet de :
Présenter ou partager votre travail. Suivez et gérez les modifications apportées à votre
code au fil du temps.[9]

Git :

Git est un système de contrôle de version le plus largement utilisé aujourd’hui.

Git est un projet open source avancé, qui est activement maintenu. À l’origine, il a été
développé en 2005 par Linus Torvalds, le créateur bien connu du noyau du système
d’exploitation Linux. [10]

Projet fin d’études 44 2023/2024

Chapitre 4 Spécifications techniques

JIRA :

JIRA est une plateforme qui vous permet de décomposer votre travail en tâches
gérables, de l’attribuer à la bonne personne et de le faire progresser via un flux de
travail personnalisable jusqu’à ce qu’il soit terminé. Ajoutez des statuts, des priorités,
des commentaires et des pièces jointes pour vous assurer de disposer de toutes les
informations nécessaires pour effectuer votre travail. [11]

GanttProject :

GanttProject est un outil libre de gestion de projet écrit en Java, ce qui permet
de l’utiliser sur de nombreux OS tel que Windows, Linux, MacOS. [12]

4.3.2 Outil de conception :

StarUML :

StarUML est un logiciel de modélisation UML, qui a été « cédé comme open
source » par son éditeur, à la fin de son exploitation commerciale (qui visiblement
continue ...), sous une licence modifiée de GNU GPL. StarUML gère la plupart des
diagrammes spécifiés dans la norme UML 2.0.[13]

Projet fin d’études 45 2023/2024

Chapitre 4 Spécifications techniques

4.3.3 Outils et technologies de développement

[Link] Outils de développement

Visual Studio Code :

VSCode est un éditeur de code source et un environnement de dévelop-

pement intégré de Microsoft. Il est open-source et cross-platform, c’est-à-dire qu’il
fonctionne sur Windows, Linux et Mac. Il a été conçu pour les développeurs web, mais
il prend en charge de nombreux autres langages de programmation tels que C++, C,
Python, Java, etc.[14]

MongoDB

MongoDB est une base de données orientée documents. En clair,

vous bénéficiez de la scalabilité et de la flexibilité que vous voulez, avec les fonctions
d’interrogation et d’indexation qu’il vous faut.[15]

Projet fin d’études 46 2023/2024

Chapitre 4 Spécifications techniques

[Link] Technologies de développement

JS

JS est un langage de programmation de scripts principalement employé

dans les pages web interactives et à ce titre est une partie essentielle des applications
web. Avec les langages HTML et CSS, JavaScript est au cœur des langages utilisés par
les développeurs web4. Une grande majorité des sites web l’utilisent5, et la majorité
des navigateurs web disposent d’un moteur JavaScript6 pour l’interpréter.

React

[Link] est une bibliothèque JavaScript libre. Elle est maintenue par Meta
(anciennement Facebook) ainsi que par une communauté de développeurs individuels
et d’entreprises depuis 2013.
Le but principal de cette bibliothèque est de faciliter la création d’application web
monopage, via la création de composants dépendant d’un état et générant une page
(ou portion) HTML à chaque changement d’état. [16]

NodeJS

[Link] est un environnement d’exécution open-source et multi-plateforme

permettant de créer des applications rapides et évolutives côté serveur et en réseau. Il
fonctionne avec le moteur d’exécution JavaScript V8, ce qui le rend efficace et adapté
aux applications en temps réel. [17]

Projet fin d’études 47 2023/2024

Chapitre 4 Spécifications techniques

Npm

npm est le plus grand registre de logiciels au monde. Les développeurs

open source de tous les continents utilisent npm pour partager et emprunter des
packages, et de nombreuses organisations utilisent npm pour gérer le développement
privé également.[18]

Vite

Vite est un outil front-end JavaScript qui vise à améliorer la rapidité de dévelop-
pement en offrant un serveur de développement rapide et une compilation optimisée
pour la production.

Express

[Link] est le framework backend le plus populaire pour [Link], il est

conçu pour construire des applications web monopages, multipages et hybrides, il
est également devenu la norme pour le développement d’applications backend avec
[Link].[19]

daisyUI

daisyUI est une bibliothèque de composants pour Tailwind CSS. Alors que Tail-
wind CSS fournit des classes utilitaires pour chaque règle CSS, daisyUI ajoute des noms
de classes de composants supplémentaires à Tailwind CSS, ce qui permet de créer des
pages web plus rapidement et plus facilement.[20]

Projet fin d’études 48 2023/2024

Chapitre 4 Spécifications techniques

tailwindcss

tailwindcss est un framework permettant aux développeurs de personnaliser

totalement et simplement le design de leur application ou de leur site web. Avec ce
framework CSS, il est possible de créer un design d’interface au sein même du fichier
HTML. Cette façon de programmer n’interfère pas avec les pratiques recommandées
par le W3C comme celle de séparer le HTML des feuilles de style CSS. En effet, pour
utiliser Tailwind il faut prendre les classes CSS prédéfinies par le framework en les
appelant dans un fichier HTML.[21]

HTML

Le HyperText Markup Langage, généralement abrégé HTML ou dans sa

dernière version HTML5, est le langage de balisage conçu pour représenter les pages
web. Ce langage permet : d’écrire de l’hypertexte, d’où son nom, de structurer sémanti-
quement la page, de mettre en forme le contenu, de créer des formulaires de saisie.

CSS

Cascading Style Sheets, généralement appelées CSS de l’anglais Cascading Style

Sheets, forment un langage informatique qui décrit la présentation des documents
HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web
Consortium.

Projet fin d’études 49 2023/2024

Chapitre 4 Spécifications techniques

Conclusion
Ce chapitre a présenté une étude technique des principales technologies utilisées
dans notre système, notamment JavaScript, ReactJs, NodeJs, Express, MongoDB, l’au-
thentification avec cookies et local storage, ainsi que [Link]. Chaque technologie
offre des avantages spécifiques : JavaScript et ReactJs pour le développement d’inter-
faces utilisateur dynamiques, NodeJs et Express pour une gestion efficace côté serveur,
MongoDB pour la flexibilité des données, et [Link] pour la communication en temps
réel. L’intégration de ces outils permet de construire une architecture performante et
évolutive, adaptée aux besoins de notre projet.

Projet fin d’études 50 2023/2024

Chapitre 5 :

Mise en œuvre

51
Chapitre 5 Mise en œuvre

5.1 Introduction
Grâce à la conception détaillée, nous pouvons passer à l’implémentation du code de
notre application. Dans ce chapitre, nous allons présenter les fonctionnalités principales
de notre application réalisée.

5.2 Dockerisation
Docker nous permet d’installer et d’exécuter facilement des logiciels sans se soucier
de la configuration ou des dépendances et éliminer les problèmes de machine lorsque
nous travaillons sur du code avec des collègues. On a dockerisé la partie front end,
back end et base de données dans le but de faciliter l’usage de ces derniers par un
autre développeur sans problème de dépendances ou configurations et aussi faciliter le
déploiement dans le cloud.

5.2.1 Dockerfile
Dockerfile est un script texte qui contient une série d’instructions pour assembler
une image Docker. Ces instructions sont lues par le moteur Docker pour automatiser
le processus de création d’une image, qui peut ensuite être utilisée pour déployer des
applications de manière cohérente et reproductible.

[Link] Front end

F IGURE 5.1 – Contenue du fichier DockerFile front end

• FROM node : Utilise l’image de base officielle de [Link] ;

• WORKDIR /usr/src/app : Définit le répertoire de travail dans le conteneur ;

Projet fin d’études 52 2023/2024

Chapitre 5 Mise en œuvre

• COPY package*.json ./ : Copie les fichiers [Link] et [Link]

dans le répertoire de travail ;
• RUN npm install : Installe les dépendances définies dans [Link] ;
• COPY . . : Copie tous les fichiers du répertoire courant sur la machine hôte
vers le répertoire de travail du conteneur ;
• EXPOSE 3000 : Expose le port 3000 pour permettre l’accès à l’application
depuis l’extérieur du conteneur ;
• CMD [ "npm", "run", "dev" ] : Définit la commande à exécuter lorsque le
conteneur démarre.

[Link] Back end

F IGURE 5.2 – DockerFile du Back end

• FROM node : Utilise l’image de base officielle de [Link] ;

• WORKDIR /app : Définit le répertoire de travail dans le conteneur ;
• COPY package*.json ./ : Copie les fichiers [Link] et [Link]
dans le répertoire de travail ;
• RUN npm install –include=optional : Installe les dépendances définies
dans [Link], y compris les dépendances optionnelles ;
• COPY . . : Copie tous les fichiers du répertoire courant sur la machine hôte
vers le répertoire de travail du conteneur ;

Projet fin d’études 53 2023/2024

Chapitre 5 Mise en œuvre

• EXPOSE 3005 : Expose le port 3005 pour permettre l’accès à l’application

depuis l’extérieur du conteneur ;
• CMD ["npm", "start"] : Définit la commande à exécuter lorsque le conteneur
démarre.

5.2.2 Dockerignore
Le fichier .dockerignore est utilisé pour spécifier quels fichiers et répertoires
doivent être exclus lors de la construction d’une image Docker. Cela permet de ré-
duire la taille de l’image et d’éviter d’inclure des fichiers inutiles ou sensibles. Le format
du fichier .dockerignore est similaire à celui du fichier .gitignore.

F IGURE 5.3 – le contenue du fichier Dockerignore

5.2.3 fichier [Link]

Ce fichier contient toutes les règles et configurations nécessaires pour l’exécution de
vos conteneurs. La syntaxe YAML est conçue pour être humainement compréhensible
tout en étant optimisée pour les ordinateurs.

Projet fin d’études 54 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.4 – le contenue du fichier Docker-compose

• version : Version de Docker Compose ;

• image : Utilise l’image officielle de MongoDB ;
• mongo-data :/data/db : Monte le volume mongo-data pour persister les
données de MongoDB ;
• ./Back-end : Contexte de construction, le répertoire contenant le Dockerfile ;
• Dockerfile : Nom du Dockerfile à utiliser pour construire l’image ;
• 3006 :3005 : Mappe le port 3005 du conteneur au port 3006 de la machine
hôte ;
• ./Back-end :/app : Monte le répertoire Back-end de la machine hôte dans le
conteneur ;
• mongodb : Dépendance, garantit que le service mongodb démarre avant
ce service ;
• ./Front-end : Contexte de construction, le répertoire contenant le Dockerfile ;
• Dockerfile : Nom du Dockerfile à utiliser pour construire l’image ;
• 3000 :3000 : Mappe le port 3000 du conteneur au port 3000 de la machine
hôte ;
• ./Front-end :/app : Monte le répertoire Front-end de la machine hôte dans
le conteneur ;
• mongo-data : Déclare un volume nommé mongo-data pour persister les
données de MongoDB.

Projet fin d’études 55 2023/2024

Chapitre 5 Mise en œuvre

5.3 Réalisation
Dans cette section, nous allons voir les fonctionnalités de la plateforme, nous
présentons l’enchaînement de quelques interfaces accompagnées par leurs descriptions :

5.3.1 Présentation Graphique

Page de connexion :
Pour accéder aux différentes fonctionnalités de l’application en tant que client, il
faut s’authentifier dans l’interface d’authentification propre au client.

F IGURE 5.5 – La page d’authentification client

processus d’inscription client :

Si le visiteur ne possède pas d’un compte client pour s’authentifier, en créer un à
partir de l’interface d’inscription.

Projet fin d’études 56 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.6 – La page d’insciption client

Quand un utilisateur s’inscrit, il reçoit un e-mail sur Ca boit pour qu’il vérifie son
e-mail.

F IGURE 5.7 – E-mail de verification

Quand vous cliquez sur le lien pour vérifier votre mail, vous serez redirigé vers
une page qui vous informe que vous avez vérifié votre mail avec succès ou non.

Cette figure représente le message de succès si vous arrivez à vérifier votre e-mail.

Projet fin d’études 57 2023/2024

Chapitre 5 Mise en œuvre

(a) Verification avec success

Cette figure représente le message d’échec si vous n’arrivez pas à vérifier votre e-mail.

(b) Verification échoue

F IGURE 5.8 – Comparaison des vérifications

Page d’accueil :
la page d’accueil peut être visitée avec ou sans authentification. Cependant, si un
client est authentifié, il aura accès à des fonctionnalités supplémentaires auxquelles
un visiteur n’aura pas accès. Cette page donne la main à visualiser les agences avec
leur emplacement en cliquant sur le bouton au dessous de la page, leur évaluation par
d’autres clients et la date où cette agence a rejoint l’application.

Projet fin d’études 58 2023/2024

Chapitre 5 Mise en œuvre

(a) Page d’accueil pour Visiteur

La page d’accueil du client permet d’ajouter une agence à ses favoris ou de l’ajouter au
panier pour louer une voiture.

(b) Page d’accueil pour Visiteur

F IGURE 5.9 – Comparaison des pages d’accueil

En cas de problème avec une agence, le client peut signaler l’agence en envoyant
un message à l’administrateur.

Projet fin d’études 59 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.10 – Interface de Réclamation

Cette interface représente la deuxième page d’accueil sous format d’une carte qui
contient l’emplacement des agences sous format d’un marqueur.

F IGURE 5.11 – Page d’accueil

Projet fin d’études 60 2023/2024

Chapitre 5 Mise en œuvre

Filtrage des agences :

Dans l’interface d’accueil, le client ou bien le visiteur a la possibilité de filtrer les
agences selon son besoin. Ce filtrage peut être fait soit avec l’emplacement dans quelle
ville seulement, ou bien il peut ajouter une contrainte sur le prix s’il veut des agences
où le prix est entre X et Y.

F IGURE 5.12 – Filtrage des agences

Contenu du panier :
Quand un client ajoute une agence au panier, il peut la revisiter facilement, seule-
ment en cliquant sur l’icône du panier, puis en cliquant sur l’agence qui l’intéresse.
Après, il va être rediriger vers le profil d’agence.

Projet fin d’études 61 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.13 – Panier

Profile d’agence :
Quand un utilisateur souhaite visiter une agence et consulter les offres disponibles,
il est redirigé vers une interface spécifique. Cette interface affiche diverses informations
sur l’agence, telles que son nom et les voitures disponibles, présentées dans une grille.
Si l’agence possède plus de cinq voitures, un maximum de cinq voitures est initialement
affiché, avec un bouton permettant de voir les autres véhicules disponibles. De plus,
une description de l’agence, rédigée par un éditeur de texte, est présentée, ainsi qu’un
système de notation par étoiles. Une carte est également incluse pour montrer les
itinéraires possibles pour se rendre à l’agence. L’interface offre également la possibilité
de communiquer avec l’agence via un système de messagerie intégré à l’application, et
les utilisateurs peuvent ajouter des commentaires pour partager leurs impressions.

Projet fin d’études 62 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.14 – Structure du profil d’agence (part 1)

Projet fin d’études 63 2023/2024
Chapitre 5 Mise en œuvre

F IGURE 5.15 – Structure du profil d’agence (part 2)

Messagerie :
Si un client est intéressé par une agence et souhaite obtenir plus de détails, il peut
utiliser le système de messagerie proposé par notre application. En cliquant simplement
sur le bouton « Envoyer un message », le client est redirigé vers la page de messagerie.
Sur cette page, une conversation dédiée entre le client et l’agence est initiée, permettant
aux deux parties d’échanger des messages en temps réel.
Ce système de messagerie intégré facilite la communication directe et rapide entre
le client et l’agence. Le client peut poser des questions spécifiques sur les véhicules
disponibles, demander des informations supplémentaires sur les services offerts, ou
discuter des conditions de location. L’agence, de son côté, peut répondre aux questions,
fournir des détails supplémentaires, et clarifier les doutes du client. Cette interaction
permet de construire une relation de confiance et de répondre efficacement aux besoins
et attentes du client, améliorant ainsi son expérience utilisateur et augmentant les
chances de réservation ou de vente.

Projet fin d’études 64 2023/2024

Chapitre 5 Mise en œuvre

(a) Émetteur

(b) Récepteur

F IGURE 5.16 – Interface de messageries

Le chemin convenable :
Chaque agence dispose de son propre emplacement géographique. Pour faciliter
l’accès à ces agences, notre application offre à l’utilisateur une sélection d’itinéraires
variés. Ainsi, l’utilisateur peut choisir l’itinéraire qui lui convient le mieux en fonction
de ses préférences personnelles et de ses critères, tels que la durée du trajet, la distance...
Lors de la consultation de l’emplacement d’une agence, l’utilisateur peut visualiser

Projet fin d’études 65 2023/2024

Chapitre 5 Mise en œuvre

une carte interactive qui affiche plusieurs options de parcours. Chaque itinéraire pro-
posé est accompagné d’informations détaillées telles que le temps estimé pour arriver à
destination, les distances à parcourir.
Grâce à cette fonctionnalité, les utilisateurs peuvent planifier leur visite à l’agence
de manière plus efficace et personnalisée. Qu’ils privilégient un trajet rapide ou une
route panoramique, l’application répond à leurs besoins et améliore leur expérience
de navigation. En offrant une telle flexibilité, nous garantissons que chaque utilisateur
trouve le chemin le plus adapté à ses préférences et contraintes, rendant ainsi leur visite
à l’agence aussi agréable et sans stress que possible.

(a) Route 1 (b) Route 2

(c) Route 3

F IGURE 5.17 – Choix des chemins

Projet fin d’études 66 2023/2024

Chapitre 5 Mise en œuvre

Reservation :

F IGURE 5.18 – Page de réservation

Pour réserver une voiture, l’utilisateur doit sélectionner une date disponible à
travers le calendrier et signer le contrat pour que tout soit valide. Après, l’utilisateur
peut payer en ligne ou en espèces.

F IGURE 5.19 – Calendrier pour la réservation

Projet fin d’études 67 2023/2024

Chapitre 5 Mise en œuvre

(a) Payement espèces (b) Payement enligne

F IGURE 5.20 – Processus de payement

Lorsque le paiement est effectué avec succès, l’utilisateur reçoit une notification
par e-mail confirmant la réussite du paiement.

Projet fin d’études 68 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.21 – Confirmation de paiement

Profile user :
Chaque utilisateur possède son propre profil où il peut visualiser ses informations
personnelles , modifier sa photo de profil, gérer ses réservations.

F IGURE 5.22 – Profil utilisateur client

Chaque reservation a un status :

• cancelled : c’est-à-dire que cette réservation est annulée.
• Pending : c’est que cette réservation est en cours de traitement.
• Confirmed : après que le client effectue le paiement, statut de la réservation
passe automatiquement à "confirmé".

Projet fin d’études 69 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.23 – Details Reservation

L’interface suivante représente la page d’inscription pour l’agence où il peut spéci-

fier l’emplacement exact de l’agence à l’aide de places API de Google.

F IGURE 5.24 – Inscription d’agence

Projet fin d’études 70 2023/2024

Chapitre 5 Mise en œuvre

Profil d’agence
Chaque agence dispose de son propre profil où elle peut modifier sa photo de
profil, consulter les voitures disponibles et les réservations, et même changer leur
statut. Cette section permet aux agences de gérer efficacement leur inventaire et leurs
interactions avec les clients. En accédant à leur profil, les agences peuvent mettre à jour
les informations essentielles, assurant ainsi une présentation professionnelle et une
gestion fluide des opérations quotidiennes. Les fonctionnalités de modification et de
consultation offrent une flexibilité accrue, facilitant ainsi l’administration des ressources
et des services proposés.

F IGURE 5.25 – Profil d’agence

La figure ci-dessous présente les détails d’une réservation.

Projet fin d’études 71 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.26 – Details reservation

La figure suivante présente l’interface pour ajouter un gérant d’une agence.

F IGURE 5.27 – Interface Manager

Cette figure va présenter le formulaire d’ajout de voiture.

Projet fin d’études 72 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.28 – Interface d’ajout de voiture

Pour qu’une agence puisse ajouter une description, notre application offre un
éditeur de textes qui l’aide à en créer une avec n’importe quelle structure désirée.

F IGURE 5.29 – Interface de description

Projet fin d’études 73 2023/2024

Chapitre 5 Mise en œuvre

Renétialisation du mot de passe

La réinitialisation du mot de passe est une fonctionnalité cruciale qui permet aux
utilisateurs de modifier leur mot de passe en cas de perte ou d’oubli, ou simplement
par mesure de sécurité. En utilisant cette fonction, les utilisateurs peuvent demander
un lien sécurisé ou un code de vérification envoyé à leur adresse email. En suivant
les instructions fournies, ils peuvent définir un nouveau mot de passe. Ce processus
est conçu pour être rapide et facile à utiliser tout en maintenant un niveau élevé de
sécurité pour protéger les informations personnelles des utilisateurs et garantir un
accès sécurisé à leurs comptes.

F IGURE 5.30 – Button pour demander la page de renétialisation

Dans la page de connexion, l’utilisateur peut démarrer le processus de réinitialisa-

tion en cliquant sur le bouton "Mot de passe oublié".

Projet fin d’études 74 2023/2024

Chapitre 5 Mise en œuvre

F IGURE 5.31 – Formulaire destiné à saisir l’email pour réinitialiser le mot de passe

Après que l’utilisateur clique sur le bouton "Mot de passe oublié", il sera redirigé
vers cette interface où il pourra saisir son adresse email pour recevoir un lien de
réinitialisation de mot de passe.

F IGURE 5.32 – Lien de renétialisation

Après que l’utilisateur reçoit ce lien, il peut réinitialiser son mot de passe en
cliquant dessus. Il sera redirigé vers une interface où il pourra saisir son nouveau mot
de passe.

F IGURE 5.33 – Formulaire de renétialisation

Projet fin d’études 75 2023/2024

Chapitre 5 Mise en œuvre

5.4 Conclusion
Dans ce chapitre, nous décrivons la phase de réalisation en détaillant les interfaces
de notre site. Nous présentons et illustrons les principales fonctionnalités de la plate-
forme, en expliquant comment chaque interface contribue à l’expérience utilisateur
et à l’accomplissement des tâches essentielles. Les différentes sections de ce chapitre
couvriront la conception visuelle, la navigation, les interactions de l’utilisateur avec les
composants, ainsi que les flux de travail pour les principales actions.

Projet fin d’études 76 2023/2024

 CONCLUSION GÉNÉRALE

Mon projet de Fin d’Études consiste à créer une application web pour la location
de vehicule de l’entreprise OUZTechnologie.

Pour mener à bien notre mission dans ce projet, nous avons opté pour la méthode
agile Scrum en découpant les projets en sept sprints après une étape de préparation
des rapports pour les validés avec le PO et précision des besoins.

L’application répond aux exigences du cahier de charge imposée par le PO et elle

a donnée satisfaction, comme toute autre application, elle nécessite certainement des
améliorations qui seront déduites au fur et à mesure après son intégration.

L’application web que nous avons développé pourrait être enrichie par des fonc-
tionnalités avancées telles que la tracabiliter temps reel des vehicules d’une agence a
travers un gps.

Ce stage a été pour moi non seulement une opportunité de consolider mes com-
pétences techniques, et mettre en pratique ce que j’ai appris théoriquement durant
les cours de classe, mais c’est une opportunité de découvrir le monde professionnel,
travailler en équipe, assumer des responsabilités et collaborer afin de mettre en œuvre
un projet en participant a toutes les étapes de ce dernier.

Projet fin d’études 77 2023/2024

 Références

[1] [Link]
27utilisation
[2] [Link]
[3] [Link]
A9tats-transitions
[4] [Link]
[5] [Link]
[6] [Link]
[7] [Link]
[8] [Link]
20syst%C3%A8me%20d’exploitation%20(ou%20environnement%20d’
,d%C3%A9marrer%20ou%20arr%C3%AAter%20des%20conteneurs.
[9] [Link]
about-github-and-git
[10] [Link]
[11] [Link]
[12] [Link]
[13] [Link]
[14] [Link]
[15] [Link]
/overview
[16] [Link]
[17] [Link]
[18] [Link]

78
[19] [Link]
[20] [Link]
[21] [Link]

Projet fin d’études 79 2023/2024