Ministère de l’Enseignement Supérieur et ‫ﻭﺯﺍﺭﺓﺍﻟﺘﻌﻠﻴﻢﺍﻟﻌﺎﻲﻟو اﻟبحث اﻟﻌﻠمي‬

de la Recherche Scientifique
Université de Gabès ‫جامعة قابس‬
Institut Supérieur de Gestion ‫املعهد العايل للتصرف‬
Direction des études et des stages ‫ادارة الدراسات و الرتبصات‬

Projet de fin d’études pour

l’obtention du Diplôme de Licence
Nationale en Informatique de Gestion

Spécialité : E-Business (EB)

Réalisation d’une application Web « Ejrili »

Réalisé par : Mohamed Ali BEN JABER

Encadré par : Mme Olfa JABRI

Année universitaire : 2022-2023

Institut Supérieur de Gestion de Gabès
Rue Jilani Habib, Gabès 6002
Tél. : + 216 75 272 280
Fax : + 216 75 270 686
Site web :www.isggb.rnu.tn
 Réalisation d’une application Web « Ejrili »
Mohamed Ali BEN JABER

‫الخالصة‬
‫العمل المقدم كجزء من مشروع نهاية الدراسة في إطار الحصول على دبلوم الترخيص الوطني في إدارة‬
‫ يهدف إلى إنشاء تطبيق ويب مخصص لتوفير خدمة‬،‫ تخصص التجارة اإللكترونية‬،‫تقنية المعلومات‬
‫للعمالء لسحب سياراتهم إلصالحها عند حدوث عطل‬

:‫المفاتيح‬
‫ العطب‬,‫سيارة سحب‬

Résumé
Le projet de fin d'études proposé dans le cadre du diplôme de Licence Nationale en Gestion
des Technologies de l'Information, spécialisation en Commerce électronique, vise à créer une
application web dédiée à fournir un service aux clients pour la récupération des voitures en
panne en vue de leur réparation.

Mots clés :
Remorquage, Panne
 Dédicaces
Je dédie ce travail à tous ceux que j’aime.

A DIEU LE TOUT PUISSANT :

A dieu qui m’a donné l’effort et le courage, pour la réalisation de ce travail.
MON CHER PAPA « BELGACEM JABER »
Le roi de mon cœur, pas seulement un père, c’est mon frère et mon ami, c’est le meilleur père
de l’univers et le meilleur soutien qui m’accompagne toujours et ne jamais se lasser de mettre
en place les meilleures conditions de réussite, et par son amour éternel, il m'a appris le vrai
sens de la vie, le respect et la générosité, et j'espère toujours donner ce qui fait son bonheur.
Que Dieu te garde pour nous, mon amour
MA CHERE MAMAN « AMEL REHOUMA »
Elle est la lumière de ma vie, elle est la plus belle fleur de mon jardin d’amour, tu m’as donné
la vie, t'es battu pour moi. Mais tu m'as surtout aimé inconditionnellement. II n'y a pas assez
de mots pour décrire à quel point tu es importante pour moi. « L'amour de la mère est le seul
amour invincible, éternel comme la naissance. – André Malraux. » Je t'aime maman
MES CHERS SOEURS « MOUNA ET AMINA »
Les sœurs sont la deuxième version d’une maman. Elles te donneront des conseils et te
protégeront. J’aime mes sœurs. Elles sont simplement adorables et je ne peux imaginer ma
vie sans elles. Je vous souhaite une vie pleine de succès, de joie et que Dieu nous garde unis.
MA NIÈCE « MAYLINE»
Avoir une nièce est le plus beau cadeau qu’une sœur puisse vous faire. Tes petites mains, ton
envie de parcourir le monde, ton enthousiasme, tes sourires, tes yeux brillants sont
incomparables. Tu as apporté beaucoup de bonheur à notre famille. Je t’aime

MES CHERS AMIS

Merci pour les mots doux, et pour tous vos conseils. Merci d’être toujours à mes côtés, j’ai de
la chance d’avoir des amis comme vous. Que dieu garde notre amitié pendant de nombreux
jours et de nombreuses années.Que Dieu vous protège.

MOHAMED ALI
 Remerciements
C'est un grand plaisir de réserver cette page pour marquer ma sincérité.

Je remercie tous ceux qui m'ont aidé de près ou de loin dans le bon déroulement de ce travail.

Je voudrais exprimer ma profonde reconnaissance à mon encadrante interne Mme. Olfa

JABRI ; qui m'a suivi tout au long du projet, pour son encouragement, sa direction, sa rigueur

dans son travail et en particulier ses qualités humaines qui m'ont permises de travailler avec

confiance dans une atmosphère détendue.

Je suis conscient du grand honneur que notre chef de Département M. Rafik KHEMAKHEM

et tous les membres de jury me font part pour avoir accepté d’examiner mon projet de fin

d’études. Mes remerciements s’adressent également à l’ensemble de nos chers professeurs

pour leurs générosités et la grande patience dont ils ont fait preuve malgré leurs charges

académiques et professionnelles.

Mes profondes reconnaissances vont également à tous les serviables, braves et attentionnés

personnels de notre Institut Supérieur de Gestion.

MOHAMED ALI
 Table des matières

INTRODUCTION GENERALE ............................................................................................ 1

CHAPITRE 1 – ETUDE PREALABLE ................................................................................ 4

Introduction ................................................................................................................................ 5

1. Recueil................................................................................................................................... 5
1.1. Objectif à atteindre.............................................................................................................. 5
1.2. Planning prévisionnel ......................................................................................................... 5
2. Etude de l’existant ................................................................................................................. 6
2.1. Analyse de l’existant ........................................................................................................... 6
2.1.1. MyBootlid ........................................................................................................................ 6

2.1.1.1. Les avantages ................................................................................................................ 7

2.1.1.2. Les inconvénients.......................................................................................................... 7
2.1.2.TowinGo ........................................................................................................................... 7

2.1.2.1. Les avantages ................................................................................................................ 7

2.1.2.2. Les inconvénients.......................................................................................................... 8
2.1.3. AUTOCOPAIN................................................................................................................ 8

2.1.3.1. Les avantages ................................................................................................................ 8

2.1.3.2. Les inconvénients.......................................................................................................... 8
2.2. Critique de l’existant ........................................................................................................... 9
2.3. Solution proposée ............................................................................................................... 9
Conclusion ................................................................................................................................. 9

CHAPITRE 2 - ETUDE CONCEPTUELLE ...................................................................... 10

Introduction .............................................................................................................................. 11

1. Description de la méthodologie de conception .................................................................... 11

2. Spécifications des besoins.................................................................................................... 12

2.1. Les besoins fonctionnels ................................................................................................... 12

2.2. Les besoins non fonctionnels ............................................................................................ 13
3. Diagramme de cas d’utilisation ........................................................................................... 14

3.1. Identification des acteurs et des cas d’utilisation.............................................................. 14

3.2. Description graphique ....................................................................................................... 15
3.3. Raffinement de cas d’utilisation ....................................................................................... 16
4. Description textuelle ............................................................................................................ 20

5. Diagramme de séquence ...................................................................................................... 23

5.1. Diagramme de séquence du cas d’utilisation «S’authentifier» ......................................... 24

5.2. Diagramme de séquence du cas d’utilisation « Demander remorquage » ........................ 25
6. Diagramme de classe ........................................................................................................... 25

6.1. Dictionnaire des données .................................................................................................. 25

6.2. Représentation des méthodes/classe ................................................................................. 27
6.3. Représentation des associations ........................................................................................ 28
6.4. Représentation graphique ................................................................................................. 29
6.4.1 Règle de passage ............................................................................................................. 29

6.4.2 Schéma relationnel .......................................................................................................... 30

Conclusion ............................................................................................................................... 30

CHAPITRE 3 - REALISATION .......................................................................................... 31

Introduction .............................................................................................................................. 32

1. Architecture Mvc (Modèle-Vue-Contrôleur) ....................................................................... 32

2. Environnement de travail ..................................................................................................... 33

3. Description des interfaces .................................................................................................... 37

3.1. Interface d’accueil............................................................................................................. 37

3.2. Processus de s’inscrire pour les Clients ............................................................................ 37
3.3. Interface de se connecter................................................................................................... 38
3.4. Interface de demander remorquage................................................................................... 39
3.5. Interface de Remorquage .................................................................................................. 40
3.6. Interface de contact ........................................................................................................... 41
3.7. Interface profile................................................................................................................. 41
3.8. Interface Administrateur ................................................................................................... 42
3.9. Interface Garagiste ............................................................................................................ 43
CONCLUSION GENERALE ............................................................................................... 44

WEBLIOGRAPHIE .............................................................................................................. 45
 Liste des figures

Figure 1: Table de planning ....................................................................................................... 5

Figure 2: Logo de MyBootlid .................................................................................................... 6
Figure 3: Logo de TowinGo ...................................................................................................... 7
Figure 4: Logo d’AutoCopain .................................................................................................... 8
Figure 5: Logo de UnifiedModelingLanguage ........................................................................ 11
Figure 6: Diagramme de cas d’utilisation initiale .................................................................... 15
Figure 7: Diagramme de cas d’utilisation « administrateur» ................................................... 16
Figure 8: Diagramme de cas d’utilisation «client» .................................................................. 17
Figure 9: Diagramme de cas d’utilisation « garagiste» ........................................................... 18
Figure 10: Diagramme de cas d’utilisation «chauffeur».......................................................... 19
Figure 11: Diagramme de séquence « s’authentifier » ............................................................ 24
Figure 12: Diagramme de séquence « demander remorquage » .............................................. 25
Figure 13: Diagramme de classe .............................................................................................. 29
Figure 14: Architecture de MVC ............................................................................................. 33
Figure 15: Technologie MEAN STACK ................................................................................. 33
Figure 16: Logo Star UML ...................................................................................................... 34
Figure 17: Logo MongoDB ..................................................................................................... 34
Figure 18: Logo Node.js .......................................................................................................... 34
Figure 19: Logo Express.js ...................................................................................................... 34
Figure 20: Logo Angular ......................................................................................................... 35
Figure 21: Logo Postman ......................................................................................................... 35
Figure 22: Logo Visual Studio Code ....................................................................................... 35
Figure 23: Logo Bootstrap ....................................................................................................... 36
Figure 24: Logo HTML ........................................................................................................... 36
Figure 25: Logo CSS ............................................................................................................... 36
Figure 26: Logo Javascript....................................................................................................... 37
Figure 27: Interface d’accueil .................................................................................................. 37
Figure 28: Interface d’inscription ............................................................................................ 38
Figure 29: Interface d’authentification .................................................................................... 38
Figure 30: Interface d’erreur d’authentification ...................................................................... 39
Figure 31: Interface Demander Remorquage ........................................................................... 40
Figure 32: Interface Remorquage ............................................................................................ 40
Figure 33: Interface contact ..................................................................................................... 41
Figure 34: Interface profil ........................................................................................................ 41
Figure 35: Interface nouveau camion ...................................................................................... 42
Figure 36: Interface Ajouter Chauffeur ................................................................................... 42
Figure 37: Interface Consulter Demande ................................................................................. 43
Figure 38: Interface Ajouter Intervention ................................................................................ 43
 Liste des tableaux

Tableau 1:identification des acteurs......................................................................................... 15

Tableau 4: Cas d’utilisation "S’inscrire " ................................................................................ 20
Tableau 2: cas d’utilisation "S’authentifier" ............................................................................ 20
Tableau 4:Cas d’utilisation "demander remorquage" .............................................................. 21
Tableau 5: cas d’utilisation "Consulter demande" ................................................................... 21
Tableau 6: cas d’utilisation "Modifier profil" .......................................................................... 22
Tableau 8: cas d’utilisation "Gérer chauffeur" ........................................................................ 23
Tableau 5: cas d’utilisation "Exprimer avis" ........................................................................... 23
Tableau 9: Dictionnaire apuré des données ............................................................................. 26
Tableau 10: Représentation des méthodes/classe .................................................................... 27
Tableau 11: Représentation des associations ........................................................................... 28
Introduction générale

INTRODUCTION GENERALE

1
Introduction générale

Introduction générale

L'architecture des applications modernes dans les entreprises doit être adaptable, modulaire,
maintenable et efficace pour répondre aux besoins spécifiques et aux changements rapides du
marché. L'évolutivité est un critère essentiel pour permettre aux entreprises de s'adapter
rapidement sans refaire entièrement leur système d'information. La maîtrise de l'information
est un enjeu crucial dans ce contexte concurrentiel.

Ces applications aident à augmenter la rentabilité des entreprises et aussi d’assurer une
communication avec ces clients afin de rendre pratique les différents services offerts. Parmi
ces services nous avons choisi le service de remorquage pour mieux intervenir sur les lieux
de panne du véhicule.

C'est dans ce cadre que s'est déroulé notre travail qui comprenait la conception et la mise en
place d'une application web « Ejrili » pour le service de remorquage qui est un élément clé
pour aider les conducteurs à faire face aux imprévus sur la route et à assurer leur sécurité tout
en minimisant les perturbations du trafic.

En effet, notre application « Ejrili » est une application web conçue pour résoudre les
problèmes de pannes de véhicules en proposant des services de dépannage en temps réel. Elle
permet aux conducteurs de signaler une panne à tout moment et en tout lieu, et de recevoir
une assistance rapide de la part d'un professionnel du dépannage. L'application offre
également des fonctionnalités telles que la géolocalisation, ainsi que des informations sur les
garages et les mécaniciens disponibles à proximité.

L'objectif de ce rapport est d'avoir une vision claire des travaux réalisés au cours du projet. Il
se compose de trois chapitres.

Le premier chapitre intitulé « Contexte du projet », nous allons présenter l’organisme

d’accueil, le contexte général, les objectifs et les défis à relever, ainsi que la spécification des
besoins de l'application.

Le deuxième chapitre intitulé « Conception » où nous allons décrire les détails de l'approche
adoptée pour la conception de l'application, en présentant les différents diagrammes.

Le troisième chapitre intitulé « Réalisation » où il décrit les étapes de réalisation de

l'application, les outils et les technologies utilisés.

2
Introduction générale

Nous terminerons par une conclusion générale et perspectives qui résume nos travaux et
tracera les perspectives.

3
Chapitre1 : Etude préalable

CHAPITRE 1 – ETUDE
PREALABLE

4
Chapitre1 : Etude préalable

Introduction
Dans ce chapitre, nous allons présenter, tout d'abord, le cadre du projet. Ensuite, nous allons
définir les concepts fondamentaux sur lesquels s'appuie notre projet. Par ailleurs, nous allons
exposer une étude de l'existant qui permet de remettre en question les fonctionnalités des
systèmes existants et leurs limites.

1. Recueil
1.1. Objectif à atteindre
Notre objectif est de créer une application web de dépannage de voiture pour fournir un
service de qualité aux conducteurs en difficulté. Grâce à notre application, les conducteurs
pourront signaler leurs emplacements et leurs problèmes pour que notre équipe puisse les
localiser rapidement et les diriger vers le garage le plus proche pour une réparation efficace.
Nous visons à offrir une expérience sans stress et rapide pour aider les conducteurs à
reprendre la route en toute sécurité.

1.2. Planning prévisionnel

La réussite d'un projet dépend largement d'une planification adéquate, qui comprend
notamment l'établissement d'un calendrier pour s'assurer que toutes les tâches sont réalisées
dans les délais impartis. Le calendrier définit les délais de chaque tâche et joue un rôle
essentiel dans la supervision et le suivi du projet. Dans notre projet, la commande peut être
vérifiée depuis environ un mois, et le tableau ci-dessous présente le calendrier adapté pour
suivre les différentes étapes du projet.

Figure 1: Table de planning

5
Chapitre1 : Etude préalable

a. Étape d’étude : Consistant à définir le but du projet et à l’inclure dans une stratégie
globale.
b. Analyse de l’existant : Il a d’abord été nécessaire d’effectuer des analyses préalables,
par l’exploration du sujet et des analyses internes et externes, pour identifier les
besoins fonctionnels et non fonctionnels de l’application.
c. Spécification : Le but du cahier des charges est d’établir une description initiale du
système à venir.
d. Conception : Consistant à définir précisément chaque sous-ensemble du logiciel.
e. Réalisation : (Implémentation ou programmation), soit la traduction dans un langage
de programmation des fonctionnalités définies lors de phases de conception.
f. Test et Validation : Pendant la phase d'intégration des différents programmes qui
permettent de créer le logiciel final, il est également nécessaire d'effectuer un
ensemble de tests rigoureux pour s'assurer que le logiciel correspond parfaitement aux
spécifications prévues. En d'autres termes, la vérification approfondie du logiciel est
essentielle pour garantir que toutes les fonctionnalités ont été intégrées correctement
et que le logiciel répond aux exigences spécifiques de l'utilisateur final.

2. Etude de l’existant
L'étude de 1'existant est le point de passage qui matérialise le premier contact du concepteur
avec un domaine ignore. II y a lieu donc de parvenir à une vue claire des besoins c'est à dire
la connaissance à la fois des objectifs poursuivis et le terrain sur lequel ils s'appliquent.

2.1. Analyse de l’existant

2.1.1. MyBootlid
MyBootlid est une application mobile qui met en relation les particuliers ayant besoin d’un
dépannage automobile et les professionnels de proximité pouvant leur apporter assistance.
Développée par l’agence Tiz, l’application MyBootlid est accompagnée d’une stratégie
webmarketing de lancement. Elle génère plus de 2 000 téléchargements le mois de sa sortie
[1].

Figure 2: Logo de MyBootlid

6
Chapitre1 : Etude préalable

2.1.1.1. Les avantages

• Accès facile et rapide à une variété de services de dépannage automobile
• Géo localisation pour trouver les conducteurs en difficulté et les emmener rapidement
au garage le plus proche
• Grande disponibilité de chauffeurs et de garages pour un dépannage efficace et sans
stress

2.1.1.2. Les inconvénients

• La plateforme MyBootlid peut avoir des temps d'attente plus longs pendant les
périodes de forte demande de dépannage, ce qui peut frustrer les clients.
• Le coût des services de dépannage proposés par MyBootlid peut être plus élevé que
ceux des concurrents locaux, ce qui peut dissuader certains clients.
• Le service de dépannage de MyBootlid peut être limité géographiquement, ce qui peut
poser des problèmes aux clients qui ont besoin d'une assistance dans des zones non
couvertes.
• La qualité des services de dépannage peut varier en fonction des prestataires de
service, ce qui peut rendre difficile pour les clients de choisir un prestataire fiable.

2.1.2. TowinGo
TowinGo est une application mobile qui permet aux utilisateurs de commander un
remorquage en quelques minutes, 24h/24, 7j/7. Avec TowinGo, un clic suffit pour
commander un camion de remorquage et conduire le véhicule à l’adresse de son choix :
domicile, garage, etc.[2].

Figure 3: Logo de TowinGo

2.1.2.1. Les avantages

• Facilité d'utilisation grâce à une interface utilisateur intuitive et conviviale
• Géolocalisation pour trouver rapidement les conducteurs en détresse et les diriger vers
le service de dépannage le plus proche
• Disponibilité 24/7 pour offrir une assistance en cas d'urgence à tout moment de la
journée ou de la nuit

7
Chapitre1 : Etude préalable

2.1.2.2. Les inconvénients

• Peut être limité à certaines régions ou pays
• Peut avoir des temps d'attente plus longs en raison de la disponibilité limitée des
prestataires de services
• Les coûts peuvent être élevés pour les longues distances ou les services de
remorquage spécialisés
• Les utilisateurs peuvent rencontrer des problèmes de compatibilité avec certains types
de Smartphones ou de systèmes d'exploitation.

2.1.3. AUTOCOPAIN
AutoCopain est une application mobile permettant de demander une assistance automobile
rapide n'importe où et à n'importe quel moment.
Pour les petits tracas, AutoCopain vous permet d'obtenir l'assistance d'autres automobilistes
qui se déplaceront pour vous aider : panne d'essence, de batterie ou roue crevée, un membre
de la communauté AutoCopain a forcément un moyen de vous aider [13].

Figure 4: Logo d’AutoCopain

2.1.3.1. Les avantages

• Interface utilisateur intuitive et facile à utiliser pour une expérience utilisateur
agréable.
• Grande variété de services offerts, y compris le dépannage, la maintenance, le lavage
et la réparation automobile.
• Service de géo localisation pour trouver rapidement les fournisseurs de services les
plus proches.

2.1.3.2. Les inconvénients

• La disponibilité de l'application est limitée géographiquement, car elle n'est
actuellement disponible qu'en France ;
• Certains utilisateurs peuvent trouver l'interface utilisateur de l'application un peu
confuse ou difficile à naviguer ;

8
Chapitre1 : Etude préalable

• AutoCopain peut ne pas avoir autant de prestataires de services de dépannage que

d'autres applications plus établies, ce qui peut limiter les options pour les utilisateurs
en cas d'urgence.

2.2. Critique de l’existant

Après avoir étudié l'application web de remorquage d'automobiles existante, il est possible de
relever certaines limites. Tout d'abord, l'interface utilisateur peut parfois être confuse et
difficile à naviguer, ce qui peut entraver l'expérience utilisateur. De plus, le service de
remorquage peut être limité géographiquement, ce qui peut poser des problèmes aux
utilisateurs ayant besoin d'une assistance dans des zones non couvertes. Enfin, la qualité des
services de remorquage proposés peut varier considérablement en fonction des prestataires de
service, ce qui peut rendre difficile pour les utilisateurs de choisir un prestataire fiable.

2.3. Solution proposée

Une application web fait référence à un logiciel d’application hébergé sur un serveur
accessible via un navigateur web. Cela implique la conception et le déploiement d’application
complexes. Ces applications sont conçues pour s’intégrer dans les systèmes d’information et
fournir des services aux utilisateurs. On peut retrouver des applications web pour réserver des
services, beaucoup des difficultés apparaissent, pendant le processus de remorquage
d’automobile, nécessite la résolution. Dans le cadre que s’inscrit notre projet de fin d’étude
intitulé "Ejrili" qui a pour but de concevoir un web, dédié aux gens et de fournir diverses
solutions au client qui ne lui permettent pas de se déplacer pour résoudre le problème, mais
plutôt qu'il reçoit la voiture de la meilleure façon et est satisfait du service complet
satisfaction côté matériel, malgré l'existence d'assurances, cela reste des points négatifs
comme toute prestation du secteur Par conséquent, nous nous efforçons de fournir le meilleur
et de couvrir ces points pour le confort et la sécurité du client.

Conclusion
Dans ce premier chapitre, nous esquissons le périmètre de notre étude suivi d'une étude de la
situation actuelle afin de définir nos objectifs à atteindre. L'étude en cours nous a permis de
préparer une bonne conception des améliorations que nous apporterons à la solution proposée
pour répondre à nos besoins. Dans le chapitre suivant, nous présenterons les spécifications
des besoins fonctionnels et non-fonctionnels de la société et les méthodes de développement
et de conception de notre projet.

9
Chapitre2 : Etude conceptuelle

CHAPITRE 2 - ETUDE
CONCEPTUELLE

10
Chapitre2 : Etude conceptuelle

Introduction
C’est une phase importante et indispensable dans le cycle de vie d’une application. Elle a
pour but d’expliquer le déroulement de notre projet, ainsi qu’assurer une bonne
compréhension des besoins des utilisateurs.

Dans ce chapitre nous allons commencer par tout montrer les méthodologies de conception.
Ensuite nous allons présenter les diagrammes de cas d’utilisation et le diagrammes de classe .
Enfin, nous terminerons ce chapitre par une conclusion.

1. Description de la méthodologie de conception

Le choix d’un langage de modélisation est important Pour mieux présenter l’architecture de
notre application, nous reproduirons les différentes exigences avec le langage de
modélisation le plus adopté UML.

Le langage UML (UnifiedModelingLanguage, ou langage de modélisation unifié) a été

pensé pour être un langage de modélisation visuelle commun, et riche sémantiquement et
syntaxiquement. Il est destiné à l'architecture, la conception et la mise en œuvre de systèmes
logiciels complexes par leur structure aussi bien que leur comportement. L'UML a des
applications qui vont au-delà du développement logiciel, notamment pour les flux de
processus dans l'industrie.

Il ressemble aux plans utilisés dans d'autres domaines et se compose de différents types de
diagrammes. Dans l'ensemble, les diagrammes UML décrivent la limite, la structure et le
comportement du système et des objets qui s'y trouvent.

L'UML n'est pas un langage de programmation, mais il existe des outils qui peuvent être
utilisés pour générer du code en plusieurs langages à partir de diagrammes UML. L'UML a
une relation directe avec l'analyse et la conception orientées objet [3].

Figure 5: Logo de UnifiedModelingLanguage

11
Chapitre2 : Etude conceptuelle

2. Spécifications des besoins

Nous décrivons ci-dessous les exigences fonctionnelles, qui correspondent aux
fonctionnalités prévues de notre application, ainsi que les exigences non fonctionnelles, afin
d'éviter tout développement insatisfaisant. L'objectif est de parvenir à un consensus entre les
spécialistes et les utilisateurs, assurant ainsi le succès du projet.

2.1. Les besoins fonctionnels

Les besoins fonctionnels sont les actions et les réactions que le système doit faire suite à une
demande d’un acteur principal, tenant compte de la nature de

L’application, on distingue :

o Tous les acteurs s’authentifier : e-mail et mot de passe

Administrateur :

• Consulter Demande : cette fonctionnalité offre aux utilisateurs la possibilité de consulter

l’état de chaque demande. Elle facilite la gestion et le suivi des demandes de
remorquage, permettant aux utilisateurs de prendre des décisions éclairées et d'agir en
conséquence.
• Gérer Garagistes : permet à l’administrateur de gérer les informations relatives aux
garagistes partenaires. Facilite ainsi la collaboration entre les utilisateurs de l'application
et les garagistes partenaires, en assurant une gestion efficace de ces relations.
• Gérer Camions : le système permet à l’administrateur de gérer ses camions avec les
fonctionnalités (Ajout, Suppression)
• Gérer Chauffeurs : le système permet à l’administrateur de gérer ses chauffeurs avec les
fonctionnalités (Ajout, Suppression)
• Consulter Avis : permet aux administrateurs d'accéder et de visualiser les avis laissés par
les utilisateurs sur les services de remorquage. Cette fonctionnalité aide ainsi les
administrateurs à prendre des décisions informées et à assurer la satisfaction des
utilisateurs de l'application.

Client :

• S’inscrire : permet aux nouveaux utilisateurs de créer un compte et de s'inscrire pour

accéder à l'ensemble des fonctionnalités et des services de l'application. Cette
fonctionnalité offre aux clients potentiels la possibilité de fournir les informations
nécessaires. Une fois inscrits, les clients peuvent accéder à leur compte personnel.

12
Chapitre2 : Etude conceptuelle

• Consulter Etat Demande : permet aux utilisateurs de vérifier l'état actuel de leurs
demandes de remorquage, contribue à améliorer la satisfaction des clients en leur offrant
une visibilité sur le processus de remorquage et en leur permettant de prendre les
mesures nécessaires en cas de besoin.
• Demander Remorquage : permet aux utilisateurs de soumettre une demande de
remorquage lorsque leur véhicule rencontre un problème ou nécessite d'être déplacé. Une
fois la demande soumise, l'application peut envoyer une demande aux chauffeurs
disponibles.
• Exprimer Avis : permet aux utilisateurs de partager leur expérience et de donner leur avis
sur les services de remorquage qu'ils ont reçus pour contribuer à l'amélioration continue
des services de remorquage proposés.
• Modifier Profil : l’application offre l’opportunité au client pour supprimer et modifier un
compte.

Garagiste :

• Modifier Profil : Modifier les informations souhaitées et de sauvegarder les

modifications.
• Gérer Intervention : facilite la gestion efficace des interventions de remorquage, en
offrant aux utilisateurs une vue d'ensemble des activités en cours et en leur permettant de
prendre les mesures nécessaires pour assurer le bon déroulement des opérations.

Chauffeur :

• Gérer Mes Remorquages : permet aux chauffeurs de remorquage d'accéder et de gérer les
missions qui leur sont assignées. Cette fonctionnalité offre aux chauffeurs une vue
d'ensemble de leurs missions en cours, de leurs détails et de leur statut.
• Consulter demande : permet aux chauffeurs de remorquage d'accéder et de consulter les
demandes de remorquage qui leur sont attribuées. Cette fonctionnalité offre aux
chauffeurs une vue d'ensemble des demandes en attente et leur permet de sélectionner
celles qu'ils souhaitent accepter et traiter.

2.2. Les besoins non fonctionnels

Les besoins non fonctionnels correspondent à la manipulation de l’application et précisent
l’environnement de celle-ci.

13
Chapitre2 : Etude conceptuelle

Sécurité et confidentialité :

L’application doit être protégée en termes de droits d’accès, ce qui mène à la protection des
données de chaque utilisateur.

Rapidité :

L’application doit optimiser les traitements pour avoir un court temps de réponse.

Ergonomie et souplesse :

L’application doit fournir une interface facile à utiliser et ergonomique.

Efficacité :

L’application doit être fonctionnelle quelle que soit la situation dans laquelle se trouve
l’utilisateur.

3. Diagramme de cas d’utilisation

L'objectif du diagramme de cas d'utilisation est de représenter le comportement souhaité de
l'application. Ce diagramme, qui constitue un élément crucial de la modélisation orientée
objet, permet de décrire les fonctionnalités de l'application du point de vue des besoins des
utilisateurs. Il est également utilisé pour définir et modéliser le produit à développer.

3.1. Identification des acteurs et des cas d’utilisation

L’identification des acteurs est présentée dans le tableau suivant :

Acteurs Cas d’utilisation

Administrateur •Gérer Garagistes
•Gérer Camions
•Gérer Chauffeurs
•Consulter Avis
•Consulter Demande
Client •S’inscrire
•Consulter Etat Demande
•Demander Remorquage
•Exprimer Avis
•Modifier Profil
Garagiste •Modifier Profil

14
Chapitre2 : Etude conceptuelle

•Gérer Intervention
Chauffeur •Consulter Demande
•Gérer Mes Remorquages

Tableau 1:identification des acteurs

3.2. Description graphique

Figure 6: Diagramme de cas d’utilisation initiale

15
Chapitre2 : Etude conceptuelle

3.3. Raffinement de cas d’utilisation

Figure 7: Diagramme de cas d’utilisation « administrateur »

➢ Administrateur : Utilisateur de l’application web (partie back office) réalise la

majorité des tâches et qui est en contact avec les utilisateurs via notre application.

16
Chapitre2 : Etude conceptuelle

Figure 8: Diagramme de cas d’utilisation «client»

➢ Client : En cas de panne de voiture, l'utilisateur de l'application peut demander un

remorquage via celle-ci. Sa demande sera ensuite transmise au chauffeur disponible
qui sera chargé de remorquer le véhicule jusqu'au garage le plus proche et disponible.

17
Chapitre2 : Etude conceptuelle

Figure 9: Diagramme de cas d’utilisation « garagiste »

➢ Garagiste : L'application travaille avec plusieurs garagistes pour offrir les meilleurs
services aux clients. Les garagistes utilisent l'application pour donner des détails sur
leurs interventions afin d'être transparents avec les clients.

18
Chapitre2 : Etude conceptuelle

Figure 10: Diagramme de cas d’utilisation « chauffeur»

➢ Chauffeur : répondre aux demandes de remorquage transmises par les utilisateurs. Il

doit être disponible pour se rendre sur le lieu de la panne et remorquer le véhicule
jusqu'au garage le plus proche et disponible. Le chauffeur doit également fournir des
informations sur son statut, son emplacement et le temps estimé d'arrivée aux
utilisateurs.

19
Chapitre2 : Etude conceptuelle

4. Description textuelle
• Cas d’utilisation S’inscrire

Cas d’utilisation S’inscrire

Acteurs Le client
Pré-condition L’utilisateur doit être connecté
1.Le client accède au page d’accueil
————————– «Inscription»————————————
2.Le client choisit l’ongle d’inscription
3.Le système affiche un formulaire à remplir
4.Le client remplit les données et valide
5.Le système vérifie les données et l’ajout dans la base de BD
Scénario nominal 6.Le sytème envoit un message de validation
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 2: Cas d’utilisation "S’inscrire "

• Cas d’utilisation s’authentifier

Cas d’utilisation S’authentifier

Acteurs L’administrateur , le client , le garagiste et le chauffeur
Pré-condition L’utilisateur doit êtreprésent dans la base de données
Post-condition La page d’accueil s’affiche
1. L’utilisateur choisit d’ouvrir l’application
2. Le système affiche le formulaire d’authentification
Scénario nominal 3. L’utilisateur écrit son login et mot de passe et valide
4. Le système vérifie l’existence des données saisies
5. Le système affiche la page d’accueil
Login ou mot de passe incorrect , champ vide ou non conforme au
Scénario alternatif champ : un retour vers la page d’authentification sera effectué un
message d’erreur

Tableau 3: cas d’utilisation "S’authentifier"

20
Chapitre2 : Etude conceptuelle

• Cas d’utilisation demander remorquage

Cas d’utilisation Demander remorquage

Acteurs Le client
Pré-condition L’utilisateur doit être connecté
1.Le client accède au page d’accueil
————————– «Demander»————————————
2.Le client sélectionne l’ongle des demandes
Scénario nominal 3.Le système affiche le formulaire de demande
4.Le clientremplit le formulaire
5.Le client clique sur le bouton « demander service »
6.Le système demande la confirmation
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 4:Cas d’utilisation "demander remorquage"

• Cas d’utilisation Consulter demande

Cas d’utilisation Consulter demande

Acteurs Le chauffeur et l’administrateur
Pré-condition L’utilisateur doit être connecté
1.L’acteur accède au page d’accueil
————————– «Consulter»————————————
Scénario nominal 2. L’acteur choisit la liste des demandes existantes
3. Le système Afficher la liste.
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 5: cas d’utilisation "Consulter demande"

21
Chapitre2 : Etude conceptuelle

• Cas d’utilisation Modifier profil

Cas d’utilisation Modifier profil

Acteurs Le client ,le garagiste
Pré-condition L’utilisateur doit être connecté
1.L’acteur accède au page d’accueil
————————– «Modifier»————————————
1.L’acteur acceder au profil
2.Le système affiche le profil
3.L’acteur choisit modifier
4.Il clique sur le bouton « modifier »
Scénario nominal 5.Le système affiche un formulaire de modification
6.L’acteur modifie les données voulues
7.Le système enregistre les modifications
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 6: cas d’utilisation "Modifier profil"

• Cas d’utilisation Gérer chauffeur

Cas d’utilisation Gérer chauffeur

Acteurs L’administrateur
Pré-condition L’utilisateur doit être connecté
1.L’administrateur accède au dashboard
————————– «Ajouter»————————————
2. .L’administrateur choisit l’ongle ajoter chauffeur
3.Le système affiche un formulaire à remplir
4. .L’administrateur remplit les données et valide
5.Le système vérifie les données et l’ajout dans la base de BD
Scénario nominal 6.Le sytème ajouter le chauffeur
————————– «Consulter»————————————
2. L’administrateur choisit la liste des chauffeurs existant
3. Le système Afficher la liste.
————————– «Suppression»———————————

22
Chapitre2 : Etude conceptuelle

1.L’acteur acceder au liste de chauffeurs existant

2.Le système affiche la liste
3. L’administrateur choisit supprimer
4. Il clique sur le bouton « Delete »
5.Le système supprime le chauffeur de la BD
6.Le système actualise la liste des chauffeurs
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 7: cas d’utilisation "Gérer chauffeur"

• Cas d’utilisation Exprimer Avis

Cas d’utilisation Exprimer avis

Acteurs Le client
Pré-condition L’utilisateur doit être connecté
1.Le client accède au page d’accueil
————————– «Expression»————————————
2.Le client choisit l’ongle d’exprimer avis
3.Le système affiche un formulaire d’evaluation
4.Le client evaluer le service et valide
5.Le système envoyer l’avis et l’ajout dans la base de BD
Scénario nominal 6.Le sytème affiche un avis
Scénario alternatif Champ vide ou non conforme au type :
Un message d’erreur s’affiche

Tableau 8: cas d’utilisation "Exprimer avis"

5. Diagramme de séquence
Avec les diagrammes de séquences, l’UML fournit un moyen graphique pour représenter les
interactions entre les objets à travers le temps. Ces diagrammes montrent typiquement un
acteur, les objets et les acteurs avec lesquels il interagit au cours de l’exécution du cas
d’utilisation. Dans ce paragraphe, nous présentons quelques diagrammes de séquences
permettant de décrire les différentes interactions entre l’utilisateur et l’application [4].

23
Chapitre2 : Etude conceptuelle

5.1. Diagramme de séquence du cas d’utilisation « S’authentifier »

Figure 11: Diagramme de séquence « s’authentifier »

▪ Le diagramme de séquence « s'authentifier » : illustre le processus par lequel un

utilisateur se connecte à un site web en utilisant ses identifiants pour accéder à son
compte personnel.

24
Chapitre2 : Etude conceptuelle

5.2. Diagramme de séquence du cas d’utilisation « Demander remorquage »

Figure 12: Diagramme de séquence « demander remorquage »

▪ Le diagramme de séquence « Demander remorquage » : consiste à solliciter un

service de dépannage pour déplacer un véhicule immobilisé vers un lieu
désigné.

6. Diagramme de classe
Après avoir terminé la phase de conception préliminaire, nous allons maintenant détailler
d’avantage cette conception en présentant aussi bien les diagrammes de classes [7].

6.1. Dictionnaire des données

Le tableau suivant représente les attributs de toutes les classes qui forment mon système ainsi
que leur description :

25
Chapitre2 : Etude conceptuelle

Attribut Type
Classe Personne
Id L’identifiant (client, chauffeur, garagiste) Entier
Nom Le nom complet (client, chauffeur, garagiste) Chaine de caractère
Prénom Le prénom complet (client, chauffeur, garagiste) Chaine de caractère
CIN La carte d'identité (client, chauffeur, garagiste) Chaine de caractère
Téléphone Le téléphone (client, chauffeur, garagiste) Chaine de caractère
Email L’email (client, chauffeur, garagiste) Chaine de caractère
Motdepasse Le mot de passe (client, chauffeur, garagiste) Chaine de caractère
Ville La ville (client, chauffeur, garagiste) Chaine de caractère
Image L’image de profil (client, chauffeur, garagiste) Chaine de caractère
Classe Client
Position La position de client Chaine de caractère
Classe Chauffeur
Disponibilité L’etat de chauffeur Chaine de caractère
Classe Camion
Id L’identifiant de camion Entier
Type Le type de camion Chaine de caractère
Marque La marque de camion Chaine de caractère
Matricule Le matricule de camion Chaine de caractère
Classe Intervention
Date Date de l’intervention Chaine de caractère
Type Type de l’intervention Chaine de caractère
Description Description de l’intervention Chaine de caractère
Classe Demande
Id L’identifiant de demande Entier
Heure L’heure de demande Chaine de caractère
Destination La destination de demande Chaine de caractère
Etat Le Statut de demande Chaine de caractère
Voiture La Voiture de demande Chaine de caractère
Classe Avis
Id L’identifiant d’avis Entier
Texte Le texte d’avis Chaine de caractère
Evaluation L’évaluation d’avis Chaine de caractère

Tableau 9: Dictionnaire apuré des données

26
Chapitre2 : Etude conceptuelle

6.2. Représentation des méthodes/classe

Une classe est une description formelle d’un ensemble d’objets ayant une sémantique et des
caractéristiques communes. Elle contient les informations nécessaires à la construction de
l’objet (des attributs et des méthodes).

— Attributs : Définissent des données dont les valeurs représentent l’état de l’objet (Le nom
de l’attribut doit être unique dans la classe).

— Méthodes : Il s’agit des opérations applicables aux objets. Les méthodes peuvent différer
d’un objet à un autre.

Après avoir extrait le dictionnaire de données purifié, nous pouvons également extraire les
classes, les méthodes et les attributs de notre application qui sont présentées dans le tableau
suivant :

Nom de classe Liste des attributs Méthode

Personne Id Authentification()
Nom
prenom
Téléphone
CIN
Email
Mot de passe
Ville
Image
Client Position S’inscrire()
Modifier_profil()
Chauffeur Disponibilité AjouterChauffeur()
ConsulterChauffeur ()
SupprimerChauffeur()
Garagiste GérerGaragiste()
EnvoyerDemande()
Demande Id AjouterDemande()
Heure ConsulterDemande()
Destination ModifierDemande()
Etat DéciderDemande()
Voiture
Avis Id AjouterAvis()
Texte ModifierAvis()
Evaluation SupprimerAvis()
Intervention Date Consulter Intervention ()
Type Ajouter Intervention ()
Description
Camion Id AjouterVehicule ()
Type Supprimer Vehicule ()
Marque Consulter Vehicule ()
Matricule AffecterCamion ()
Tableau 10: Représentation des méthodes/classe

27
Chapitre2 : Etude conceptuelle

6.3. Représentation des associations

Une association est une relation logique entre deux classes (association binaire) ou plus
(association n-aire) qui définit un ensemble de liens entre les objets de ces classes.

Une association est nommée, généralement par un verbe. Une association peut avoir des
propriétés (à l'instar d'une classe). Une association définit le nombre minimum et maximum
d'instances autorisée dans la relation (on parle de cardinalité).

Associations simples :

Les associations simples sont des liaisons logiques entre les classes. Chaque association
simple possède un nom qui permet de nous informer de l’intérêt de cette relation et des
cardinalités qui précisent combien d’objets de classe considérés peuvent être liés à un objet
de l’autre classe.

Le tableau suivant présente les associations simples en notant leurs désignations et les classes
participantes :

Désignation Classe participantes Cardination

Envoyer Client 1
Demande 1..*
Intervenir Garagiste 1
Intervention 1..*
Répondre Intervention 0..*
Demande 1
Donner Avis 1..*
Client 1
Élaborer Camion 1
Demande 1..*
Affecter Chauffeur 1
Demande 1..*
Tableau 11: Représentation des associations

28
Chapitre2 : Etude conceptuelle

6.4. Représentation graphique

Figure 13: Diagramme de classe

6.4.1 Règle de passage

Les règles de passage du diagramme de classe vers la base de données relationnelle
sont les suivantes :

R1 : Chaque classe devient une table.

R2 : Chaque attribut devient une colonne dans la table correspondante.

R3 : La colonne de la clé primaire représente l'identificateur unique de la table.

R4 : Chaque instance de la classe est représentée par une ligne dans la table.

R5 : Pour les associations un-à-un, une clé étrangère est intégrée dans la table de
la classe "fille".

29
Chapitre2 : Etude conceptuelle

R6 : Pour les associations un-à-plusieurs, une clé étrangère est ajoutée dans la
table de la classe "fille".

R7 : Pour les associations plusieurs-à-plusieurs entre deux classes, une nouvelle

table est créée, utilisant la concaténation des clés primaires des deux classes
comme clé primaire de la table.

Ces règles permettent de transformer la structure et les relations du diagramme de

classe en une représentation relationnelle adaptée pour une base de données.

6.4.2 Schéma relationnel

• Client (id_client, nom, prenom, telephone, CIN, email, motdepasse, ville, image,
position);
• Chauffeur (id_chauffeur, nom, prenom, telephone, CIN , email, motdepasse, ville,
image, disponibilité);
• Garagiste (id_garagiste, nom, prenom, telephone, CIN, email, motdepasse, ville,
image);
• Intervention (id_int, date, type, description, # id_garagiste, # id_demande);
• Camion (id_camion, type, matricule, marque);
• Demande (id_demande, heure, destination, état, voiture, # id_client, #id_chauffeur,
#id_camion);
• Avis (id_avis, texte, Evaluation, # id_client).

Conclusion
Dans ce chapitre, nous avons présenté l’étude conceptuelle du système. Le diagramme de cas
d’utilisation illustre la vue fonctionnelle. La vue dynamique nous permet d’avoir une vue
générale du cas d’utilisation.

Enfin, la vue statique est présentée par le diagramme de classes, qui permet de définir la
structure du système. Dans le chapitre suivant, nous détaillerons certains aspects de la
réalisation.

30
Chapitre 3 : Réalisation

CHAPITRE 3 -
REALISATION

31
Chapitre 3 : Réalisation

Introduction
La phase de réalisation se concentre sur les interfaces graphiques de l’application. Nous
commençons donc par identifier les langages et les outils de développement. Nous
présenterons ensuite les différentes phases d’implémentation et quelques interfaces de notre
application web pour décrire leurs fonctionnements.

1. Architecture Mvc (Modèle-Vue-Contrôleur)

Mvcest un modèle d'organisation du code couramment utilisé dans le développement de
logiciels, en particulier dans le développement d'applications web. Il vise à séparer les
différentes responsabilités de l'application en trois composants principaux :

1. Le modèle (Model) : Il représente les données et la logique métier de l'application. Le

modèle contient les structures de données, les classes, les méthodes et les fonctions qui
manipulent les données et effectuent les opérations spécifiques de l'application.

2. La vue (View) : Elle est responsable de l'affichage des données à l'utilisateur. La vue est
généralement constituée de l'interface utilisateur, telle qu'une page web ou une interface
graphique, qui présente les informations provenant du modèle de manière compréhensible
pour l'utilisateur.

3. Le contrôleur (Controller) : Il agit comme un intermédiaire entre le modèle et la vue. Le

contrôleur reçoit les entrées de l'utilisateur à travers la vue, traite ces entrées et met à jour le
modèle en conséquence. Il est également responsable de la coordination entre la vue et le
modèle, en veillant à ce que les changements apportés au modèle soient reflétés dans la vue.

L'architecture MVC favorise la séparation des préoccupations (separation of concerns) en

organisant le code de manière modulaire et en définissant clairement les responsabilités de
chaque composant. Cela facilite la maintenance, l'extension et la réutilisation du code, ainsi
que la collaboration entre développeurs travaillant sur différents aspects de l'application.

32
Chapitre 3 : Réalisation

Figure 14: Architecture de MVC

2. Environnement de travail

Te c h n o l o g i e ME A N S t a c k :
La MEAN Stack est une technologie très populaire utilisée pour développer des applications
web Full Stack. Cette pile technologique est basée sur le langage JavaScript et comprend les
éléments suivants : MongoDB pour la base de données, Express pour la gestion des serveurs
et des applications, Angular pour le développement frontal, et Node.js pour le développement
backend. L'utilisation de cette pile de technologies permet un développement et un
déploiement rapides de l'application Web. Angular est utilisé pour le développement frontal,
tandis que Node.js, Express et MongoDB sont utilisés pour le développement backend. Cette
combinaison permet de créer des applications web robustes et efficaces.

Figure 15: Technologie MEAN STACK

33
Chapitre 3 : Réalisation

• Les outils et les langages utilisés pour le développement de ce projet sont :

StarUML : est un outil de génie logiciel dédié à la modélisation UML et édité par la société
coréenne MKLabs. Il est multiplateforme et fonctionne sous Windows, Linux et MacOs.

Figure 16: Logo Star UML

MongoDB : est un système de gestion de base de données orienté documents, répartissable

sur un nombre quelconque d'ordinateurs et ne nécessitant pas de schéma prédéfini des
données. Il est écrit en C++.

Figure 17: Logo MongoDB

Node.js : est une plateforme logicielle libre en JavaScript, orientée vers les applications
réseau évènementielles hautement concurrentes qui doivent pouvoir monter en charge [8].

Figure 18: Logo Node.js

Express.js:est un framework pour construire des applications web basées sur Node.js. C'est
de fait le framework standard pour le développement de serveur en Node.js [9].

Figure 19: Logo Express.js

Angular : est un Framework de développement d'applications web créé par Google. Il s'agit
d'un ensemble d'outils et de bibliothèques logiciels qui permettent aux développeurs de
concevoir des applications web évolutives, dynamiques et interactives. Angular utilise le

34
Chapitre 3 : Réalisation

langage TypeScript, qui est une extension de JavaScript, pour développer des applications
web côté client. Le Framework offre des fonctionnalités telles que la liaison de données, la
gestion des formulaires, le routage, l'animation, la communication avec des API, etc. Angular
est largement utilisé dans l'industrie pour créer des applications web complexes, notamment
des applications monopages (Single Page Applications) et des Progressive Web Apps [6].

Figure 20: Logo Angular

Postman: est un outil populaire utilisé par les développeurs pour tester, développer et
documenter les API (Application Programming Interfaces). Il s'agit d'une plateforme
complète pour envoyer des requêtes HTTP et HTTPS à des serveurs web et recevoir les
réponses correspondantes. Postman permet aux développeurs de collaborer, d'explorer, de
déboguer et de surveiller les API de manière efficace [12].

Figure 21: Logo Postman

Visual Studio Code : est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et MacOs. Les fonctionnalités incluent la prise en charge du débogage, la
mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la
refactorisation du code et Git intégré [5].

Figure 22: Logo Visual Studio Code

Bootstrap : est une collection d’outils utiles à la création du design (graphisme, animation et
interactions avec la page dans le navigateur, etc.) de sites et D’applications web. C’est un

35
Chapitre 3 : Réalisation

ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de
navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

Figure 23: Logo Bootstrap

HTML5: Le HyperText MarkupLanguage, 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 [11].

Figure 24: Logo HTML

CSS3 : Cascading Style Sheets, c’est un autre langage qui vient compléter le HTML. Il
permet de : choisir la couleur de votre texte, sélectionner la police utilisée sur votre site et
définir la taille du texte, les bordures, le fond [10].

Figure 25: Logo CSS

JavaScript : est un langage de programmation qui permet de créer du contenu mis à jour de
façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi
on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques
lignes de JavaScript [7].

36
Chapitre 3 : Réalisation

Figure 26: Logo Javascript

3. Description des interfaces

3.1. Interface d’accueil
Lorsque vous ouvrez l'application, la première page que vous voyez est la page d'accueil, qui
est accessible à tous les utilisateurs dès le lancement de l'application.

Figure 27: Interface d’accueil

3.2. Processus de s’inscrire pour les Clients

La figure ci-dessous présente l’interface d’inscription de notre application web :

37
Chapitre 3 : Réalisation

Figure 28: Interface d’inscription

3.3. Interface de se connecter

Une fois connecté, l'utilisateur est redirigé vers la page d'authentification. Il est nécessaire de
remplir deux champs pour accéder aux interfaces de l'application : le champ du login
(identifiant) et le champ du mot de passe.

La figure ci-dessous présente l’interface de connexion de notre application Web :

Figure 29: Interface d’authentification

38
Chapitre 3 : Réalisation

Si les champs saisis ne sont pas valides, alors un message d’erreur s’affiche, comme l’indique
cette capture d’écran :

Figure 30: Interface d’erreur d’authentification

3.4. Interface de demander remorquage

Dans cette interface, il faut remplir les deux champs obligatoires pour soumettre votre
demande de remorquage.

39
Chapitre 3 : Réalisation

Figure 31: Interface Demander Remorquage

3.5. Interface de Remorquage

Si le conducteur est disponible, la demande de service lui sera envoyée et il peut l’accepter.

Figure 32: Interface Remorquage

40
Chapitre 3 : Réalisation

3.6. Interface de contact

Dans cette partie de la page Web, l'utilisateur peut contacter le service client :

Figure 33: Interface contact

3.7. Interface profile

C’est la page de profil où l'utilisateur et le chauffeur peuvent modifier les
informations suivantes :

Figure 34: Interface profil

41
Chapitre 3 : Réalisation

3.8. Interface Administrateur

• Sur cette page, vous devez remplir les champs requis, puis cliquer sur le bouton
« Ajouter » pour ajouter un camion supplémentaire :

Figure 35: Interface nouveau camion

• Sur cette page, vous devrez cliquer sur le bouton « Ajouter Chauffeur », puis remplir
le formulaire proposé. Le chauffeur sera automatiquement ajouté.
Cette procédure est la même pour l’interface garagiste.

Figure 36: Interface Ajouter Chauffeur

42
Chapitre 3 : Réalisation

• Sur cette page, les demandes seront surveillées et l’administrateur les approuvera si le
chauffeur est disponible :

Figure 37: Interface Consulter Demande

3.9. Interface Garagiste

• Sur cette page, le garagiste ajoutera la description de son intervention :

Figure 38: Interface Ajouter Intervention

43
Conclusion générale

CONCLUSION GENERALE

Au terme de notre cursus en licence informatique de gestion, nous avons entrepris un projet
de fin d'études visant à développer une application web pour le dépannage d'automobile. Ce
projet nous a permis de découvrir une nouvelle plateforme de développement et d'enrichir nos
connaissances et notre expérience dans le domaine du développement web.
Dans le cadre de notre licence en informatique de gestion à l'Institut Supérieur de Gestion de
Gabes, nous avons suivi une méthodologie rigoureuse pour mener à bien ce projet. Nous
avons débuté par une étude préalable qui a jeté les bases de l'analyse et de la spécification des
besoins. Une fois nos objectifs définis, nous avons procédé à la phase de conception, en
choisissant les technologies appropriées, notamment le langage de modélisation unifié
"UML".
La phase de réalisation nous a permis de nous familiariser avec « Angular » et de mettre en
pratique nos compétences acquises. Tout au long de ce processus, nous avons veillé à
respecter les bonnes pratiques de développement pour garantir la qualité de notre application.
Il est important de noter que notre travail peut être étendu à l'avenir. Nous envisageons
notamment d'ajouter un magasin pour améliorer la rapidité du service. Cette perspective
d'extension témoigne de notre volonté de continuer à développer et à améliorer notre
application, en tenant compte des besoins des utilisateurs et des évolutions du marché.
Ce projet de fin d'études a été une occasion précieuse de consolider nos compétences
techniques et de mieux comprendre le processus de développement d'applications web. Il
marque une étape significative dans notre parcours universitaire et nous prépare à une
carrière future dans le domaine de l'informatique de gestion.
Nous sommes fiers du travail accompli et reconnaissants pour l'opportunité qui nous a été
donnée de réaliser ce projet. Nous sommes confiants quant à notre capacité à apporter des
contributions positives à l'industrie du dépannage d'automobile grâce à notre application
"Ejrili".
Nous sommes impatients de poursuivre notre cheminement professionnel et de relever de
nouveaux défis.

44
 WEBLIOGRAPHIE

(1) https://www.tiz.fr/portfolio/mybootlid-application-mobile/ (01 Mars 2023)

(2) https://towingo.co/ (10 Mars 2023)
(3) https://www.ionos.fr/digitalguide/sites-internet/developpement-web/uml-un-langage-
de-modelisation-pour-la-programmation-orientee-objet/ (06 mars 2023)
(4) http://www.volle.com/travaux/uml.htm#:~:text=Le%20diagramme%20de%20s%C3%
A9quence%20repr%C3%A9sente,un%20objet%20%C3%A0%20l'autre (01 Avril
2023)
(5) https://framalibre.org/content/visual-studio-code (19 mars 2023)
(6)https://definitions-digital.com/developpeur/angular (19 mars 2023)
(7) https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript
(29 mars 2023)
(8) https://www.ansi.tn/fr/assistance/outils-de-securite/nodejs (07 mars 2023)
(9) https://expressjs.com/fr/ (16 Avril 2023)
(10) https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203277-css-
cascading-style-sheets-definition-traduction (09 mars 2023)
(11) https://fr.wikibooks.org/wiki/Le_langage_HTML (09 mars 2023)
(12) https://welovedevs.com/fr/articles/postman (09 mars 2023)
(13) https://autocopain.fr/ (09 mars 2023)

45