Gestion Des Tournées

Mémoire de Projet de Fin d’Études
Pour l’obtention du diplôme
Ingénieur d’État
Génie Informatique
Promotion 2020 - 2021
Mlle. Chaimae EL KHNISSI et Mlle. Chaimae FITIAN
Soutenu le :
XX Juillet 2021
Membres de jury :
M. Zakaria BOUANANI Encadrant société

M. Oussama EL HAJJAMY Encadrant ENSATé
M. Professeur ENSATé (Président)
M. Professeur ENSATé (Examinateur)
Année universitaire : 2020-2021

Avant-propos
Avant-propos
Ce mémoire est le résultat d’un stage de fin d’études de 4 mois effectué au sein
de la société STG Maroc, et qui rentre dans le cadre de l’obtention du diplôme Ingénieur
d’État Génie Informatique option Systèmes d’informations et Aide à la Décision par
l’École Nationale des Sciences Appliquées (ENSA) de Tétouan. Le projet était réalisé
en binôme. Ce stage était encadré par M. Zakaria BOUANANI directeur technique
chez STG Maroc, et M. Oussama EL HAJJAMY Enseignant à l’ENSA de Tétouan.
L’idée de ce mémoire est venue du constat que les clients de la grande
distribution de STG Maroc ont des difficultés dans le contrôle et la surveillance
journalière des tournées, la chose qui les impose à consulter d’autres fournisseurs pour
résoudre ce problème.
Ce rapport de stage a pour objectif de mettre en relief les différentes étapes de
notre mission qui ont consisté à la conception et le développement d’un module de
gestion des tournées logistiques et son intégration dans une plateforme de gestion de
flotte.
Certes, des difficultés n’ont pas manqué. Elles concernent le suivi des
différents tests de certaines fonctionnalités comme notre travail était séparément de
l’équipe du développement.
L’apport de ce projet a été d’une importance appréciable quant à
l’enrichissement de nos connaissances techniques, à l’apprentissage de nouvelles
technologies ainsi qu’à l’intégration dans le monde professionnelle.
Chaimae FITIAN - Chaimae EL KHNISSI I 2020-2021

Dédicaces
Dédicaces
Louange à Dieu tout puissant, qui nous a permis de voir ce jour tant attendu.
Avec l’expression de mes reconnaissances et ma profonde affection,
Je dédie ce travail
À mes très chers parents Mohamed & Latifa
Aucun mot et aucune dédicace ne serait capable d’exprimer mes sincères remerciements,
mes gratitudes, mon éternel amour et mon respect envers vos sacrifices, vos soutiens et
vos encouragements que vous me fournissez toujours pour mon bien être ; vous qui
donnez généreusement et faites toujours l’impossible pour mon éducation et ma
formation sans attente.
Qu’Allah, le très haut, vous accorde de la santé, du bonheur et de la longue vie.
À ma chère sœur Asmae et mon cher frère Yassin
À tous les moments de notre enfance ensemble, à vos enthousiasmes et vos sourires,
merci d’être part de ma vie. Vous apportez tout le bonheur et la joie à notre famille, je
vous aime et je vous souhaite tout bonheur, réussite et prospérité.
À ma belle tante Souad
Jamais de ma vie je serais capable de vous rendre pareille de ce que vous m’avez fait et
donné. J’apprécie toujours ta présence à mes côtés.
À mon binôme Chaimae
Qui, sans elle, ce travail n’a pas pu voir le jour. Vous êtes toujours ma source de joie et
d’encouragement. Je te dis merci pour avoir le courage et la patience d’achever ce travail
et le mener jusqu’au bout.
À toute ma famille,
À mes chères amies Hajar et Aya,
À mes chers professeurs et collègues de la filière génie informatique,
À tous ceux qui m’aiment,
À tous ceux que j’aime,
Je vous dis MERCI.
FITIAN Chaimae
Chaimae FITIAN - Chaimae EL KHNISSI II 2020-2021

Dédicaces
Louange à Dieu tout puissant, qui nous a permis de voir ce jour tant attendu.
À la femme la plus chère de ma vie, ma source d'encouragement,

Ma mère Fatiha
Qui m'a soutenu tout au long de ma vie.
Aucune dédicace ne pourrait être à la hauteur de tes efforts, ta confiance en moi et en mon
travail, tes sacrifices et tes prières qui m'ont accompagné à chaque pas de ma vie et à chaque
période de stress et de joie. Les mots me manquent pour t'exprimer toute la fierté et le profond
amour que je porte pour toi.
Que DIEU te préserve bonne santé, longue vie et bonheur.
À mon seul frère Achraf,
Mon soutien et mon premier ami d'enfance.
À mes chères sœurs Imane, Safae et Majda,
L'épaule sur laquelle je m'appuie.
Je vous remercie pour vos conseils, vos encouragements à tout moment et vos soutiens moral
constant, je me sens chanceuse de vous avoir à mes côtés.
À mon amie Sokaina
Pour la vie avec qui j'ai pris mon premier pas à l'Ensa
À mes meilleures amies Manal et Nouhaila ...
Avec qui j'ai partagé une période d'étude inoubliable, qui m'ont apporté aide, support et beaux
moments tout au long de mes études.
À ma chère amie, mon binôme Chaimae,
Avec qui j'ai partagé ces trois dernières années
Pour sa patience, sa compréhension, avec qui j'ai trouvé l'esprit d'équipe dont j'avais besoin.
À mon équipe de travail Hajar et Aya
À tous mes enseignants
À tous ceux qui ont participé à ma réussite et qui m'ont donné du courage pour atteindre ce
jour-là
MERCI Infiniment
EL KHNISSI Chaimae
Chaimae FITIAN - Chaimae EL KHNISSI II 2020-2021

I
Remerciements
Remerciements
Ce mémoire n’aurait pas pu voir le jour si Dieu, le tout puissant, nous n’a pas
donné la force et la patience pour terminer ce travail et dépasser les obstacles
rencontrés.
Tout d’abord, nous tenons à remercier M. Hakim BOULAASSAL, directeur
recherche et développement, de nous avoir acceptées pour effectuer notre projet de fin
d’études au sein de la société STG Maroc, ainsi que M. Zakaria BOUANANI,
directeur technique et qui est aussi notre encadrant professionnelle, pour son
encadrement et orientation technique, ses conseils et son temps précieux qu’il a sacrifié
pour nous assister tout au long du déroulement de notre stage.
Nous remercions sincèrement notre encadrant pédagogique, M. Oussama EL
HAJJAMY, pour sa disponibilité, son soutien, sa qualité d’écoute et ses discussions
intéressantes qui nous ont aidées à s’engager totalement dans notre projet.
Nos vifs remerciements aux membres du jury qui ont agréé d’évaluer et être les
rapporteurs de ce modeste travail.
Et nous profitons de l’occasion pour exprimer nos profondes gratitudes à tout
le corps professoral et administratif de l’ENSA de Tétouan, et surtout nos chers
professeurs du département génie informatique, aux membres de nos familles pour leurs
soutiens et à toute personne qui a contribué de près ou de loin dans le bon
accomplissement de ce travail.
Chaimae FITIAN - Chaimae EL KHNISSI IV 2020-2021

Résumé
Résumé
Dans le cadre de notre projet de fin d’études à l’École Nationale des Sciences
Appliquées (ENSA) de Tétouan, et afin d’obtenir le diplôme Ingénieur d’État Génie
Informatique option Systèmes d’informations et Aide à la Décision, nous avons
effectué notre stage de fin d’études de quatre mois au sein de la société STG Maroc.
Notre mission était de mettre en œuvre une solution de gestion de tournées en
faveur des clients de grande distribution comme le transport personnel et public pour
faciliter la gestion et la planification des tournées.
Dans un premier temps, nous avons commencé par l’analyse de l’outil
existant, ensuite la spécification des exigences fonctionnels et non fonctionnels de
l’application, après nous avons passé à l’étape de conception afin de réaliser les
différents diagrammes en utilisant la méthode de modélisation UML, et nous avons
fini par la réalisation de notre application. Ce travail a été conduit selon la
méthodologie SCRUM.
L’étude technique est basée principalement sur deux parties : Frontend et
Backend. C’est une combinaison des deux framework Laravel et Angular, avec
l’addition de certaines technologies comme Bootstrap, JavaScript...
Au cours de ce projet, nous avons pu atteindre la solution actuelle, tout en
prenant en considération l’importance de chaque étape de notre travail.
Mots clés: Gestion des tournées, feuilles de route, Laravel, Angular, STG Maroc.
Chaimae FITIAN - Chaimae EL KHNISSI V 2020-2021

Abstract
Abstract
As part of our project of end of studies at the National School of Applied
Sciences (ENSA) of Tetouan, and in order to obtain the State Engineer diploma in
Computer Engineering option Information Systems and Decision Support, we did our
four-month end-of-study internship at STG Maroc.
Our mission was to implement a route management solution for large
distribution customers such as personal and public transport to facilitate the
management and planning of routes.
First, we started with the analysis of the existing tool, then the specification
of the functional and non-functional requirements of the application, then we moved
on to the design stage in order to produce the different diagrams using the UML
modeling method, and we ended up building our application. This work was carried
out according to the SCRUM methodology.
The technical study is based mainly on two parts: Frontend and Backend. It is
a combination of the two frameworks Laravel and Angular, with the addition of
certain technologies like Bootstrap, JavaScript...
During this project, we were able to achieve the current solution, while taking
into consideration the importance of each step of our work.
Key words: route management, roadmaps, Laravel, Angular, STG Maroc.
Chaimae FITIAN - Chaimae EL KHNISSI V 2020-2021

Liste des tableaux
Liste des tableaux

Tableau 1 - Liste des acronymes ....................................................................................................8
Tableau 2 - Répartition des sprints...............................................................................................16
Tableau 3 - Calendrier prévisionnel .............................................................................................17
Tableau 4 - Calendrier réel ...........................................................................................................65
Tableau 5 - Description textuelle du cas d’utilisation : S’authentifier .........................................25
Tableau 6 - Description textuelle du cas d’utilisation : Gérer les modèles ..................................28
Tableau 7 - Description textuelle du cas d’utilisation : Gérer les points de passage ...................30
Tableau 8 - Description textuelle du cas d’utilisation : Gérer les feuilles de route......................33
Tableau 9 - Description textuelle du cas d’utilisation : Gérer les récurrences .............................36
Tableau 10 - Dictionnaire de données de la classe utilisateur ......................................................42
Tableau 11 - Dictionnaire de données de la classe véhicule ........................................................43
Tableau 12 - Dictionnaire de données de la classe modèle ..........................................................43
Tableau 13 - Dictionnaire de données de la classe point d’intérêt ...............................................43
Tableau 14 - Dictionnaire de données de la classe points de passage ..........................................44
Tableau 15 - Dictionnaire de données de la classe feuille de route .............................................44
Tableau 16 - Dictionnaire de données de la classe historique ......................................................44
Tableau 17 - Dictionnaire de données de la classe récurrence .....................................................45
Tableau 18 - Caractéristiques d'environnement matériel .............................................................61
Chaimae FITIAN - Chaimae EL KHNISSI VI 2020-2021

Liste des figures
Liste des figures

Figure 1- Services de STG Maroc .................................................................................... 8
Figure 2- Partenaires stratégiques de STG Maroc ............................................................ 8
Figure 3 - Chiffres Clés de STG Maroc ............................................................................ 9
Figure 4 - Partenaires stratégiques de STG Maroc ......................................................... 10
Figure 5 - Processus SCRUM ......................................................................................... 14
Figure 6 - Diagramme de Gantt prévisionnel ................................................................. 19
Figure 7 - Diagramme de Gantt réel ............................................................................... 68
Figure 8 - Diagramme de cas d’utilisation majeur ......................................................... 24
Figure 9 - Diagramme de séquences (niveau analyse) : S’authentifier .......................... 26
Figure 10 - Diagramme de cas d’utilisation : Gérer les modèles.................................... 27
Figure 11 - Diagramme de séquences (niveau analyse) : Gérer les modèles ................. 29
Figure 12 - Diagramme de cas d’utilisation : Gérer les points de passage ..................... 30
Figure 13 - Diagramme de séquences (niveau analyse) : Gérer les points de passage ... 31
Figure 14 - Diagramme de cas d’utilisation : Gérer les feuilles de route ....................... 32
Figure 15 - Diagramme de séquences (niveau analyse) : Gérer les feuilles de route ..... 34
Figure 16 - Diagramme de cas d’utilisation : Gérer les points de passage ..................... 35
Figure 17 - Diagramme de séquences (niveau analyse) : Gérer les récurrences ............ 37
Figure 18 - Diagramme de classes .................................................................................. 41
Figure 19 - Diagramme de séquences (niveau conception) : S'authentifier ................... 45
Figure 20 - Diagramme de séquences (niveau conception) : Consulter le détail d’un
modèle............................................................................................................................. 46
Figure 21 - Diagramme de séquences (niveau conception) : Ajouter un modèle ........... 46
Figure 22 - Diagramme de séquences (niveau conception) : Modifier un modèle ......... 47
Figure 23 - Diagramme de séquences (niveau conception) : Supprimer un modèle ...... 48
Figure 24 - Diagramme de séquences (niveau conception) : Gérer les points de passage
d'un modèle ..................................................................................................................... 49
Figure 25 - Diagramme de séquences (niveau conception) : Ajouter un point de passage
........................................................................................................................................ 50
Figure 26 - Diagramme de séquences (niveau conception) : Modifier un point de
Chaimae FITIAN - Chaimae EL KHNISSI VII 2020-2021

Liste des figures
passage ............................................................................................................................ 50
Figure 27 - Diagramme de séquences (niveau conception) : Supprimer un point de
passage ............................................................................................................................ 51
Figure 28 - Diagramme de séquences (niveau conception) : Filtrer un modèle ............. 51
Figure 29 - Diagramme de séquences (niveau conception) : Filtrer les points de passage
........................................................................................................................................ 52
Figure 30 - Diagramme de séquences (niveau conception) : Exporter les points de
passage sous format CSV ............................................................................................... 52
Figure 31 - Diagramme de séquences (niveau conception) : Consulter une feuille de
route ................................................................................................................................ 53
Figure 32 - Diagramme de séquences (niveau conception) : Ajouter une feuille de route
........................................................................................................................................ 54
Figure 33 - Diagramme de séquences (niveau conception) : Modifier une feuille de
route ................................................................................................................................ 54
Figure 34 - Diagramme de séquences (niveau conception) : Supprimer une feuille de
route ................................................................................................................................ 55
Figure 35 - Diagramme de séquences (niveau conception) : Exporter la liste des feuilles
de route sous format CSV ............................................................................................... 55
Figure 36 - Diagramme de séquences (niveau conception) : Filtrer une feuille de route 56
Figure 37 - Diagramme de séquences (niveau conception) : Ajouter une récurrence .... 56
Figure 38 - Diagramme de séquences (niveau conception) : Modifier une récurrence .. 57
Figure 39 - Diagramme de séquences (niveau conception) : Supprimer une récurrence 57
Figure 40 - Diagramme de séquences (niveau conception) : Arrêter une récurrence ..... 58
Figure 41 - Diagramme de séquences (niveau conception) : Filtrer une récurrence ...... 58
Figure 42 - Logo d'Angular ............................................................................................ 62
Figure 43 - Logo de Laravel ........................................................................................... 63
Figure 44 - Logo de GitHub ........................................................................................... 63
Figure 45 - Logo de BitBucket ....................................................................................... 64
Figure 46 -Logo de Postman ........................................................................................... 64
Figure 47 - Logo de Bootstrap ........................................................................................ 65
Figure 48 - Interface d'authentification........................................................................... 71
Figure 49 - Connexion échouée ...................................................................................... 71
Figure 50 - Interface d'accueil ........................................................................................ 72

Liste des figures
Figure 51 - Interface de gestion des feuilles de route ..................................................... 72

Figure 52 - Interface de création d'une feuille de route .................................................. 73
Figure 53 - Validation du formulaire de création ........................................................... 73
Figure 54 - Filtrage des feuilles de route selon un modèle ............................................. 74
Figure 55 - Interface de modification d'une feuille de route .......................................... 74
Figure 56 - Interface du détail d'une feuille de route ...................................................... 75
Figure 57 - Interface du détail d'un point de passage ..................................................... 75
Figure 58 - Interface de gestion d'un modèle .................................................................. 76
Figure 59 - Interface de gestion des points de passage d'un modèle .............................. 76
Figure 60 - Interface de création des points de passage ................................................. 77
Figure 61 - Interface de gestion des points de passage ................................................... 77
Figure 62 - Interface de gestion des récurrences ............................................................ 78

Liste des acronymes
Liste des acronymes

Tableau 1 - Liste des acronymes
Acronyme Désignation
API Application Programming Interface
CLI Command Line Interface
CSS Cascading Style Sheets
HTML HyperText Markup Langage
HTTP HyperText Transfer Protocol
MIT l'Institut de technologie du Massachusetts
MVC Model-View-Controller
MVVM Model -View – View Model
PHP HyperText Preprocessor
REST Representational State Transfer
RMA Royale Marocaine d’Assurance
STG Secure Technologies Group
TCI Technology Capital Invest
TI Texas Instruments
Chaimae FITIAN - Chaimae EL KHNISSI VIII 2020-2021

Tables des matières
Table des matières

Introduction générale ............................................................................................................ 1
Chapitre 1 : Contexte généraldu projet ............................................................................... 3
Introduction .............................................................................................................................. 4
I. Présentation de l’organisme d’accueil .................................................................................. 4

1. L’organisme d’accueil..................................................................................................... 4
1.1. STG ......................................................................................................................... 4
1.2. STG Maroc .............................................................................................................. 4
1.3. Mission et valeurs .................................................................................................... 5
2. Secteur d’activité ............................................................................................................. 6
2.1. Services de STG Maroc ........................................................................................... 6
2.2. Partenaires stratégiques ........................................................................................... 8
2.3. Chiffres clés ............................................................................................................. 9
3. Références ....................................................................................................................... 9
II. Présentation du projet ........................................................................................................ 11

1. Périmètre du projet ........................................................................................................ 11
1.1. Analyse de l’existant ............................................................................................. 11
1.2. Critiques de l’existant ............................................................................................ 12
1.3. Solution proposée .................................................................................................. 12
2. Equipe du projet ............................................................................................................ 13
3. Méthode de développement .......................................................................................... 13
4. Planification du projet ................................................................................................... 14
4.1. Calendrier prévisionnel ......................................................................................... 17
Conclusion ............................................................................................................................. 20
Chapitre 2 : Spécificationdes exigences ............................................................................. 21
Introduction ............................................................................................................................ 22
I. Spécification des exigences fonctionnelles ........................................................................ 22
Chaimae FITIAN - Chaimae EL KHNISSI IX 2020-2021

1. Analyse et identification des exigences ........................................................................ 22

2. Spécification des exigences ........................................................................................... 22
2.1. Identification des acteurs ....................................................................................... 22
2.2. Besoins fonctionnels.............................................................................................. 23
2.3. Définition des cas d’utilisation majeurs ................................................................ 23
2.4. Illustration des cas d’utilisation ............................................................................. 25
2.4.1.Cas d’utilisation 1 : S’authentifier .................................................................. 25
a. Description textuelle ....................................................................................... 25
b. Diagramme de séquences (niveau analyse) .................................................... 26
2.4.2.Cas d’utilisation 2 : Gérer les modèles ........................................................... 27
a. Diagramme de cas d’utilisation....................................................................... 27
b. Description textuelle ....................................................................................... 28
c. Diagramme de séquences (niveau analyse) .................................................... 29
2.4.3. Cas d’utilisation 3 : Gérer les points de passage ........................................... 30
2.4.4. Cas d’utilisation 4 : Gérer les feuilles de route ............................................. 32
2.4.5. Cas d’utilisation 5 : Gérer les récurrences ..................................................... 35
II. Spécification des exigences non-fonctionnelles................................................................ 38

Conclusion ............................................................................................................................. 39
Chapitre 3 : Conception ...................................................................................................... 40
Introduction ............................................................................................................................ 41
I. Modélisation statique .......................................................................................................... 41

1. Diagramme de classes ................................................................................................... 41
2. Dictionnaire de données ................................................................................................ 42
Chaimae FITIAN - Chaimae EL KHNISSI X 2020-2021

II. Modélisation dynamique ................................................................................................ 45

1. Diagrammes de séquence (niveau conception) ............................................................. 45
1.1. Cas d’utilisation 1 : s’authentifier ......................................................................... 45
1.2. Cas d’utilisation 2 : Gérer les modèles .................................................................. 46
1.2.1. Diagramme de séquences (niveau conception) de la fonctionnalité « Consulter
le détail d’un modèle » ............................................................................................ 46
1.2.2. Diagramme de séquences (niveau conception) de la fonctionnalité « Ajouter un
modèle » .................................................................................................................. 46
1.2.3. Diagramme de séquences (niveau conception) de la fonctionnalité « Modifier
un modèle » ............................................................................................................. 47
1.2.4. Diagramme de séquences (niveau conception) de la fonctionnalité « Supprimer
un modèle » ............................................................................................................. 48
1.2.5. Diagramme de séquences (niveau conception) de la fonctionnalité « Gérer les
points de passage d’un modèle » ............................................................................. 49
1.2.6. Diagramme de séquences (niveau conception) de la fonctionnalité « Filtrer un
modèle » .................................................................................................................. 51
1.3. Gérer les points de passage ...................................................................................... 52
1.3.1. Diagramme de séquences (niveau conception) de la fonctionnalité « Filtrer les
points de passage » .................................................................................................. 52
1.3.2. Diagramme de séquences (niveau conception) de la fonctionnalité « Exporter
les points de passage sous format CSV » ................................................................ 52
1.4. Gérer les feuilles de route ......................................................................................... 53
1.4.1. Diagramme de séquences (niveau conception) de la fonctionnalité « Consulter
une feuille de route » ............................................................................................... 53
1.4.2. Diagramme de séquences (niveau conception) de la fonctionnalité « Ajouter
1.4.3. Diagramme de séquences (niveau conception) de la fonctionnalité « Modifier
1.4.4. Digramme de séquences (niveau conception) de la fonctionnalité « Supprimer
1.4.5.Digramme de séquences (niveau conception) de la fonctionnalité « Exporter la
liste des feuilles de route sous format CSV » .......................................................... 55
1.4.6. Digramme de séquences (niveau conception) de la fonctionnalité « Filtrer une
Chaimae FITIAN - Chaimae EL KHNISSI XI 2020-2021

feuille de route » ...................................................................................................... 56

1.5. Gérer les récurrences ................................................................................................ 56
1.5.1.Digramme de séquences (niveau conception) de la fonctionnalité « Ajouter une
récurrence » ............................................................................................................. 56
1.5.2. .. Digramme de séquences (niveau conception) de la fonctionnalité « Modifier
une récurrence »....................................................................................................... 57
1.5.3. Digramme de séquences (niveau conception) de la fonctionnalité « Supprimer
une récurrence »....................................................................................................... 57
1.5.4.Digramme de séquences (niveau conception) de la fonctionnalité « Arrêter une
récurrence » ............................................................................................................. 58
1.5.5. Digramme de séquences (niveau conception) de la fonctionnalité « Filtrer une
récurrence » ............................................................................................................. 58
Conclusion ................................................................................................................................ 59
Chapitre 4 : Réalisation .......................................................................................................... 60
Introduction ............................................................................................................................... 61
I. Environnement de développement ........................................................................................ 61

1. Environnement matériel ................................................................................................... 61
2. Environnement logiciel .................................................................................................... 61
3. Choix des outils de développement .................................................................................. 61
3.1. Définition des frameworks ....................................................................................... 61
3.2. Choix du framework : Application Frontend ........................................................... 62
3.3. Choix du framework : Application Backend ............................................................ 63
3.4. Autres outils ............................................................................................................. 63
3.4.1. GitHub .............................................................................................................. 63
3.4.2. BitBucket .......................................................................................................... 64
3.4.3. Postman ............................................................................................................. 64
3.4.4. Bootstrap ........................................................................................................... 65
II. Application ........................................................................................................................... 65

1. Calendrier réel .................................................................................................................. 65
2. Architecture globale ......................................................................................................... 68
2.1. Application Frontend ................................................................................................ 69

I
2.2. Application Backend ................................................................................................ 70

3. Principales interfaces graphiques ..................................................................................... 71
3.1. Authentification ........................................................................................................ 71
3.2. Interface d’accueil .................................................................................................... 72
3.3. Gestion des feuilles de route .................................................................................... 72
3.4. Gestion des modèles ................................................................................................. 76
3.5. Gestion des points de passage .................................................................................. 77
3.6. Gestion des récurrences ............................................................................................ 78
Conclusion ................................................................................................................................ 79
Conclusion générale ................................................................................................................ 80
Références ................................................................................................................................ 81
Webographie ............................................................................................................................ 81

II
Introduction générale
De nos jours, l’évolution rapide du GPS et des nouvelles technologies a facilité
l’intégration de la géolocalisation au Maroc. Cette dernière est considérée comme un
facteur essentiel dans l’implémentation des logiciels de gestion de flotte.
En particulier, le secteur qui exige un besoin de gestion de flotte est celui du
transport et de la logistique. Maitriser donc son parc de véhicules revient à maintenir
une analyse régulière du comportement de chaque voiture pour une meilleure
amélioration de qualité de service et optimisation des coûts.
Une solution de géolocalisation et de gestion de flotte consiste à placer des
boîtiers de télématique embarquée à bord de véhicules afin de collecter des données
relatives au véhicule et au conducteur. Ces boîtiers ont apporté de plusieurs avantages
aux entreprises marocaines, notamment le suivi en temps réel des véhicules et leurs
historiques détaillés, la gestion et la réduction de la consommation de carburant, la
diminution du risque d’accident et l’amélioration de la productivité du parc logistique.
Cependant, certaines entreprises trouvent des difficultés dans la gestion
journalière du grand nombre des véhicules pour des raisons comme :
 L’organisation des tournées qui dure pour un longtemps ;
 La non-satisfaction des clients de l’entreprise envers l’irrespect des
horaires de livraison des commandes ;
 L’utilisation des véhicules d’une façon non optimale ;
 Le manque d’une vision claire sur les coûts des missions de transport.
C’est pour cela, notre organisme d’accueil STG a décidé d’inclure cette
solution dans la plateforme de gestion de flotte STG Fleet [1] vu la grande demande de
ses clients, d’où le thème de notre projet de fin d’études : « Développement d’un
module de gestion de tournées logistiques et son intégration dans une plateforme de
gestion de flotte ».
Cette application va permettre au client de planifier ses tournées d’une manière
ordonnancée pour éviter toute intersection entre eux et suivre leurs états. Aussi, elle va
aider le client à créer des trajets de points de passage et enregistrer le passage de chaque
véhicule par ses points, ainsi, elle va faciliter la récurrence d’un trajet
Chaimae FITIAN - Chaimae EL KHNISSI 1 2020-2021

spécifique.
Le présent mémoire a pour objectif de donner une vision claire sur le
déroulement du projet. Il est structuré en quatre chapitres principaux :
Le premier chapitre est consacré à la présentation de l’organisme d’accueil
STG Maroc [2] ainsi que le cadre général du projet qui va traiter l’étude de l’existant, la
problématique et la solution proposée ainsi que la méthodologie de travail adoptée et la
planification du projet.
Le deuxième chapitre est dédié à l’analyse des besoins fonctionnels et non
fonctionnels de l’application.
Dans le troisième chapitre, nous allons présenter l’étude conceptuelle de notre
solution en modélisant les besoins avec le langage UML.
La réalisation de l’application sera l’objet de notre dernier chapitre ; nous
allons traiter l’environnement de développement ainsi qu’un aperçu sur les différentes
interfaces obtenues de l’application.
Nous finirons notre mémoire par une conclusion générale qui va exposer notre
bilan de travail et quelques perspectives d’avenir.

Chapitre 1 : Contexte général du projet
Chapitre 1 : Contexte général

du projet
Ce premier chapitre porte sur le contexte général du projet. En premier lieu, il

décrit l’organisme d’accueil STG Maroc, ses activités, ses missions et ses références.
En deuxième lieu, il aborde le sujet de notre projet, la problématique ainsi que la
solution proposée. Il met en œuvre aussi la méthodologie et la planification de notre
travail.

Introduction
Au cours de ce chapitre, nous allons présenter l’organisme d’accueil tout en

citant ses activités de base, ses missions et ses valeurs. Aussi, nous allons consacrer ce
chapitre pour la présentation du cadre de notre projet, l’étude de l’existant et la
problématique et finir par l’énumération des étapes de travail à suivre pour achever ce
projet.
I. Présentation de l’organisme d’accueil

1. L’organisme d’accueil
1.1. STG
Fondée et présidée par Adnan Ouassini, un entrepreneur marocain natif de

Tanger, l’Américain STG a été créée en 2008 à la Silicon Valley, Californie, aux États-
Unis à travers la holding TCI, une holding américaine d’investissement dans les
nouvelles technologies.
STG a été fondée suite à la passion du fondateur pour la technologie. Ce dernier

a toujours voulu trouver une combinaison entre la technologie, la finance et l’assurance.
Ainsi, il a développé l’idée de l’assurance télématique. Ce nouveau concept a permet
d’avoir une approche proactive utilisant la technologie qui détecte les conducteurs dont
la conduite laissait à désirer, afin de réduire le risque des accidents.
Depuis 2008, STG trace sa route principalement dans la télécommunication, en

se positionnant comme leader dans la gestion des flottes et le suivi du comportement des
conducteurs, y compris la nouvelle technologie de la boîte noire, et en proposant des
solutions innovantes dans différents domaines, citant la robotique, la domotique, la
téléphonie, les accessoires high-tech, et bien d’autres.
1.2. STG Maroc
Le 29 juin 2018, la société américaine STG a procédé au lancement de sa filiale

STG Telecom au Maroc. Une somme de 150 millions de dirhams marocains a été
mobilisée dans le but de développer cette filiale pour la période 2018-2019.

Aujourd’hui, STG Maroc est une société opérant dans le secteur des nouvelles
technologies et spécialisée dans la télématique embarquée, la commercialisation et
l’installation de modules équipés de plusieurs composants de très haute performance en
matière de communication et de localisation.
La conception, le développement et la fabrication de ces modules sont assurés

aux Etats-Unis d’Amérique par le leader mondial de la télématique et subissent un
contrôle qualité très rigoureux sur toute la ligne de production. Ils ont fourni par :
 Une équipe spécialisée en R&D ;
 Une équipe spécialisée dans le développement logiciel ;
 Une équipe spécialisée dans le développement hardware.
STG Maroc a établi des partenariats durables avec les sociétés clés du marché
des semi-conducteurs (Intel, TI, STMicroelectronics, Infineon...) afin d’offrir à ses
clients les produits les plus performants et la technologie la plus avancée du marché.
Depuis le lancement de ses activités au Maroc, STG a aidé beaucoup

d’entreprises marocaines, dans différents secteurs, à maîtriser leurs coûts opérationnels
par la mise en place de solutions complètes de gestion de flotte, analyse de
comportement de conduite et boîte noire. Grâce à la qualité de ses produits et services,
STG connaît aujourd’hui une croissance très rapide au Maroc et renforce sa position de
leader avec plusieurs grandes références dans son portefeuille client.
1.3. Mission et valeurs
La mission de STG Maroc ne s’agit pas simplement de se positionner comme

un leader sur le marché de la télématique embarquée dans le royaume, mais aussi
d’atteindre des résultats remarquables dont, entre eux :
 Réduire le taux d’accident et la consommation du carburant ;
 Renforcer la prévention et la sécurité routière sur le territoire marocain ;
 Améliorer la productivité des collaborateurs ;
 Optimiser la gestion des flottes ;

 Gérer efficacement le parc logistique ;
 Accroître la rentabilité des entreprises marocaines et préserver leurs

images de marque.
Pour STG Maroc, le plus important facteur de réussite est le capital humain. Ce
dernier propulse le succès vers un seul et unique objectif : faire progresser la mobilité et
la sûreté en les rendant plus efficaces et plus responsables que jamais.
Et avec cette philosophie de travail, STG Maroc partage des valeurs

fondamentales d’où découlent toutes les politiques de STG. Cette dernière invite alors
l’ensemble de ses collaborateurs à réfléchir sur la mise en place de ses valeurs au
quotidien, dans le cadre de leur travail :
 Cultiver la satisfaction cliente ;
 Être créateur de valeur ;
 Générer des idées novatrices ;
 Anticiper les besoins ;
 Mobiliser les réseaux de compétences ;
 Créer la passion pour le métier.
2. Secteur d’activité
2.1. Services de STG Maroc
L’activité de STG Maroc s’articule autour de 6 pôles principaux :
 Géolocalisation et sécurisation : Grâce au boîtier STG doté des antennes

de communication GNSS/GPRS, le client peut savoir en temps réel la
situation exacte de son véhicule (la position précise, la vitesse, le nombre
de kilomètres parcourus...), la localiser et même communiquer

avec le chauffeur instantanément. Quant à la sécurité, le client peut

programmer des alarmes en fonction du besoin de son métier pour
détecter et agir rapidement en présence des évènements exceptionnels
venant du conducteur ou du véhicule, et ses alarmes prédéfinies arrivent
au client via e-mail ou SMS ;
 Gestion des services sur terrain : Avec la solution STG, le client peut
avoir toutes les informations de disponibilité, de proximité et de priorités
afin d’augmenter la productivité du personnel sur terrain et gérer son
intervention par un plan de travail plus optimisé. Ceci englobe des
fonctionnalités comme : élaborer des rapports de gestion de temps de
travail pour éliminer le temps inutile, informer le personnel par des
notifications des tâches sur la navigation embarquée ou par messagerie
pour devenir plus ponctuel sur les objectifs et analyser le comportement
de conduite suite à une plateforme (profil, vitesse, consommation...) ;
 Analyse du comportement de conduite : Pour chaque conducteur, la

plateforme d’analyse de comportement de conduite permet d’assurer une
bonne réduction des coûts de transport, diminuer les risques d’accident,
conduire en manière responsable et plus raisonnable ainsi qu’améliorer
l’impact des flottes sur l’environnement ;
 Gestion de flotte et des assets : À l’aide des données collectées des

véhicules tel que l’historique des positions, les heures de conduite, le
comportement du chauffeur..., le gestionnaire peut décider des actions
proactives afin d’optimiser la gestion de ses flottes et avoir par
conséquence une augmentation de la durée de vie et de la valeur
résiduelle ;
 Solution sur mesure : Selon le besoin du client, la solution STG peut

implémenter des fonctionnalités supplémentaires et les développer sur
mesure. Aussi, il s’occupe de l’intégration avec les plateformes logicielles
existantes du client ;

 Optimisation des coûts : La solution STG dispose d’un outil STG-

Planning qui offre de nombreuses fonctionnalités tant que la définition
des règles pour le temps de travail des chauffeurs, des modules
configurables pour une adoption à vos besoins, des rapports par email et
des services de cartographie. Avec cet outil, le client profite d’une
meilleure gestion de flotte, des plannings plus optimisé, une ponctualité
du personnel et une amélioration en qualité de service.
Gestion des
Analyse du
Géolocalisation services sur
comportement
et sécurisation terrain
de conduite
Services
Gestion de
Optimisation
flotte et des Solution sur
des coûts
assets mesure
Figure 1- Services de STG Maroc
2.2. Partenaires stratégiques
Volet Volet
assurances commercialisation
Volet Volet
transport carburant
Partenaire
mondiale
Figure 2- Partenaires stratégiques de STG Maroc
STG Maroc et ses partenaires collaborent pour proposer des solutions dont
l’objectif est de subventionner l’équipement des flottes. Ces alliances ont permis de
lancer de nouvelles solutions au niveau des assurances, de sécurité, de

commercialisation des services et de contrôle. Au mois de décembre 2013, la société

STG a renforcé son partenariat avec RMA dans le volet d’assurances. Ce partenariat a
lancé une solution novatrice qui a visé à réduire les coûts de gestion et d’entretien tout
en optimisant les coûts d’assurance. Afriquia et STG Maroc ont mis une solution
alliant sécurité et contrôle à disposition des clients disposant de cartes carburant
Afriquia pour un meilleur suivi de la consommation de carburant. Alors que le
partenariat de STG Maroc avec Maghrebail, le spécialiste du crédit-bail au Maroc, en a
résulté une solution pour les véhicules financés par Maghrebail. Quant à Orange, elle a
assuré, de sa part, la commercialisation des produits STG au Maroc.
2.3. Chiffres clés
La solution STG a fait sa place partout dans le monde ; elle est utilisée dans
près de 55 pays, avec plus de 3 millions de boîtiers installés au monde. Cette solution a
contribué dans la satisfaction des milliers de clients et la collaboration de plus de 1000
employés.
Figure 3 - Chiffres Clés de STG Maroc
3. Références
Grâce à la qualité des services proposés par STG Maroc, plusieurs entreprises
ont fait confiance à ce dernier, citant parmi eux :

Figure 4 - Partenaires stratégiques de STG Maroc

II. Présentation du projet
1. Périmètre du projet
1.1. Analyse de l’existant
À présent, STG Maroc dispose d’une application de gestion de flotte « STG

Fleet ». Cette dernière est développée par un fournisseur selon les besoins fonctionnels
des clients de STG.
Cette application se compose de plusieurs modules, citant :

 Module de gestion des utilisateurs ;
 Module de gestion des unités ;
 Module de gestion des alarmes ;
 Module de gestion des points d’intérêt ;
 Module d’outils d’import.
Chaque module existant regroupe certaines fonctionnalités nécessaires pour
certains clients. Par la suite, nous allons décrire chaque module de l’application.
 Gestion des utilisateurs
Ce module regroupe l’ensemble des utilisateurs de l’application, ainsi que
l’historique de connexion des utilisateurs et leurs groupes selon leurs compagnies.
 Gestion des unités
Ce module permet de gérer les véhicules et les personnes de chaque
compagnie, répartir les groupes des unités et gérer les coûts du carburant.
 Gestion des alarmes
Ce module concerne la gestion des alarmes de plusieurs types comme les
alarmes standard, les alarmes de service, les alarmes d’activité, les alarmes de
carburant...
 Gestion des points d’intérêt
Les opérations de ce module consistent à gérer l’ensemble des points d’intérêt
et leurs groupes.
 Outils d’import
Ces outils aident l’utilisateur à importer les véhicules, les personnes, les points
d’intérêt et les zones.

1.2. Critiques de l’existant
Les modules existants dans STG Fleet diffèrent d’un client à un autre selon le
besoin, et parfois, ce besoin n’ai pas toujours présent comme fonctionnalité dans
l’application, la chose qui nécessite le développement de nouveaux modules chaque fois
qu’un client le demande.
Parmi ces modules, il y avait un certain besoin en ce qui concerne la gestion

des tournées. La complexité de cette tâche représente toutefois un défi pour certains
clients pour plusieurs raisons, citant :
 La difficulté d’organiser plusieurs feuilles de route détaillée au même
temps ;
 Contraintes des horaires de passage de chaque feuille de route ;
 La non-rationalisation des coûts et des nombres de kilomètres parcourus ;
 Le problème de mettre en ordre un ensemble de feuilles de route et les
affecter simultanément aux conducteurs.
L’absence de certaines fonctionnalités dans l’application STG Fleet a poussé
les clients à s’engager avec des nouveaux fournisseurs pour équiper leurs véhicules,
chose qui a attiré l’attention de STG et a décidé par la suite d’intégrer un nouveau
module de gestion des tournées pour répondre à la demande des clients de la grande
distribution, du transport public inter villes et du transport de personnel et les aider à
gérer la masse des tournées planifiées chaque journée de travail.
1.3. Solution proposée
Après l’étude que nous avons faite, la solution était donc de développer une
application de gestion des tournées et l’intégrer au sein d’une plateforme de gestion de
flotte.
Cette application permet le contrôle de l’exécution de la tournée. Elle sert à la
création, l’enregistrement d’une liste de points de passage pour un véhicule et la
vérification automatisée de son exécution. Ces points de passage constituent des « check
points » par lesquels un véhicule doit passer dans le courant d’une journée de travail.
Parmi les fonctionnalités back-office de cette application, cette dernière doit
permettre de :
 Enregistrer une liste de points de passage sous forme d’une tournée

type, via la création, la modification et la suppression ;
 Affecter une ou plusieurs tournées à un véhicule pour un jour donné. En

cas d’affectation de plusieurs tournées à un véhicule, celles-ci seront
présentées de manière que les dates des tournées ne soient pas en même
temps ;
 Ajouter, modifier, supprimer des points de passage pour un jour donné ;
 Vérifier en temps réel l’exécution de la tournée par un contrôle de
passage du véhicule sur le point de passage.
2. Equipe du projet
Afin de mettre à jour l’application STG Fleet, nous avons intégré une équipe de
développement qui se compose d’un chef de projet, des développeurs Backend et
Frontend et des stagiaires.
Chacun d’entre nous a été chargé d’un module spécifique ; deux stagiaires ont
été chargés de développer le Backend d’une partie du module « Gestion des alarmes »,
une autre stagiaire a traité le module « Gestion des unités », alors que nous étions
chargés de la conception et du développement du module « Gestion des tournées ».
Ce module regroupe les quatre parties suivantes :
 Gestion des modèles ;
 Gestion des feuilles de route ;
 Gestion des points de passage ;
 Gestion des récurrences.
3. Méthode de développement
Pour mettre ce projet en œuvre, il était nécessaire de choisir une méthode
convenable de travail. C’est pourquoi la méthode optée par l’équipe du projet était celle
de la gestion de projet agile SCRUM [3].
La méthode SCRUM s’appuie sur des intervalles de temps (Sprints) assez

courts, d’une durée de 2 à 4 semaines, pendant laquelle l’équipe de développement
conçoit, teste et réalise de nouvelles fonctionnalités et au même temps, il livre les
versions intermédiaires du projet au client avant qu’il dispose du produit final.

Figure 5 - Processus SCRUM
2.1. Pourquoi SCRUM ?
Le choix de la méthodologie SCRUM dépendait de plusieurs raisons, parmi

lesquelles :
Avec SCRUM, l’équipe de développement profite d’une participation active

dans l’évolution du projet ; il peut s’exprimer librement et participer dans la prise des
décisions concernant le projet ainsi qu’à la planification des sprints et l’organisation du
travail, chose qui n’est pas possible avec les méthodes traditionnelles qui obligent
l’équipe à répondre seulement aux cahiers de charges.
Aussi, présenter plusieurs livraisons du produit aide à ajuster les défaillances,

signaler tout problème ou blocage et améliorer ou éliminer les fonctionnalités
nécessaires. Ainsi, découper le projet en des sprints rend le travail moins abstrait et
facilite la productivité de l’équipe tout au long du développement du projet.
4. Planification du projet
La planification du projet est sans aucun doute l’une des phases les plus
importantes. Elle consiste à déterminer les différentes tâches, les ordonnancer, estimer
le coût de réalisation de chaque tâche et prévoir les profils et les ressources nécessaires
pour l’évolution du projet. Cela aide à suivre proprement l’avancement du projet durant
son déroulement et respecter le délai prévisionnel de la fin du projet.

Pour notre projet, nous avons opté pour la méthode SCRUM, donc nous avons
découpé notre travail en 7 sprints :
 Sprint 0 : Initialisation du travail
Le premier sprint est un élément important pour partager une vision claire du
nouveau projet à développer, préparer l’environnement de développement, produire une
première version du backlog et définir l’architecture générale du projet.
Pour notre projet, le Sprint 0 a contenu :
- Étude préalable : cette étude a concerné des multiples réunions, avec

l’encadrant professionnel et les développeurs pour se familiariser avec les
fonctionnalités de l’application de la société STG ;
- Étude détaillée : cette étude a eu pour objectif de spécifier les exigences

et rédiger le cahier de charges du projet ;
- Étude technique : dans cette étude, nous avons spécifié le besoin

technique du projet en visant les deux technologies Angular et Laravel ;
 Sprint 1 : Conception générale et préparation de la partie Frontend et

Backend
Le sprint 1 a consisté à définir la conception générale du projet, choisir le

template de la partie Frontend que nous avons traité avec Angular et configurer
l’architecture de la partie Backend en utilisant Laravel ;
 Sprint 2 : Gestion des modèles
Le sprint 2 a eu pour but de développer le premier module de l’application :

« les modèles ». Il a consisté à une gestion totale de ce module (ajouter, modifier,
supprimer, filtrer, consulter le détail) ;
 Sprint 3 : Gestion des points de passage
Le sprint 3 a consisté à une gestion totale d’un deuxième module qui est « les

points de passage » ;
 Sprint 4 : Gestion des récurrences
Le sprint 4 a consisté à une gestion totale du troisième module de

l’application : « les récurrences » ;
 Sprint 5 : Gestion des feuilles de route
Le sprint 5 a consisté à une gestion totale du quatrième module de

l’application : « les feuilles de route » ;
 Sprint 6 : Intégration du Map
Le sprint 6 a eu pour but d’intégrer le package de cartographie d’Angular dans

notre projet.
 Sprint 7 : Authentification et gestion de profil
Le sprint 7 a consisté à une authentification et une gestion du profil.
 Planification des sprints
Tableau 2 - Répartition des sprints
N° Sprint Durée estimé
0 Initialisation. 32
1 Conception générale et préparation de la partie Frontend et Backend. 2
2 Gestion des modèles. 5
3 Gestion des points de passage. 4
4 Gestion des récurrences. 6

5 Gestion des feuilles de route. 8
6 Intégration du Map. 3
7 Authentification et gestion du profil. 4
4.1. Calendrier prévisionnel
Après avoir terminé notre étude, le calendrier prévisionnel que nous avons
établi est le suivant :
Tableau 3 - Calendrier prévisionnel
Activité Durée Date début Date fin

d’initiation
Phase
Intégration au sein de STG Maroc. 1 15/02/2021 15/02/2021
Étude préalable :
- Réunion avec l’encadrant.
4 16/02/2021 19/02/2021
- Réunion avec les développeurs pour se
familiariser avec les fonctionnalités de
l’application STG Fleet.
Sprint 0
Étude détaillée :
- Spécification des exigences. 2 22/02/2021 23/02/2021
- Réalisation de cahier de charges.

Étude technique :
Sprint 0
- Choix des technologies (Angular,

Laravel). 25 24/02/2021 30/03/2021
- Autoformation.
- Conception générale.
1 31/03/2021 31/03/2021
-Validation de la conception.
Sprint 1
- Choix du template de la partie

Frontend.
1 01/04/2021 01/04/2021
- Configuration de l’architecture de la
partie Backend.
Sprint 2
- Gestion des modèles. 5 02/04/2021 08/04/2021

Sprint 3
- Gestion des points de passage. 4 09/04/2021 14/04/2021

Sprint 4
- Gestion des récurrences. 6 15/04/2021 22/04/2021

Sprint 5
- Gestion des feuilles de route. 8 23/04/2021 04/05/2021

Sprint 6
- Intégration du Map. 3 05/05/2021 07/05/2021

- Authentification. 2 10/05/2021 11/05/2021

Sprint 7
- Gestion du profil. 2 12/05/2021 13/05/2021
Rédaction du rapport 62 01/04/2021 01/06/2021
La figure ci-dessous représente le diagramme de gant de notre planning

prévisionnel :
Figure 6 - Diagramme de Gantt prévisionnel

Conclusion
À travers ce chapitre, nous avons présenté l’organisme de l’accueil ainsi que le
contexte général de notre projet.
Dans le chapitre qui suit, nous allons entamer la prochaine étape qui consiste à
présenter les démarches de conception et de développement de notre solution.

Chapitre 2 : Spécification des exigences
Chapitre 2 : Spécification
des exigences
Ce chapitre décrit la phase d’analyse et de spécification des exigences en

spécifiant les besoins fonctionnels et non fonctionnels attendus du système.

Introduction
Dans le cadre de ce chapitre, nous allons présenter les fonctionnalités offertes

par notre application en détaillant les exigences spécifiques qui consistent en des besoins
fonctionnels et non fonctionnels auxquelles l’application doit répondre.
Pour le faire, nous allons enchaîner une étude des acteurs et identifier les
différents cas d’utilisation et les diagrammes de séquences de notre application à l’aide
de la modélisation UML.
Aussi, comme l’application doit être opérationnelle et satisfait les exigences de

l’utilisateur, nous décrivons par la suite les besoins non fonctionnels communs à tous
les acteurs.
I. Spécification des exigences fonctionnelles

1. Analyse et identification des exigences
L’analyse et la spécification des exigences (ou besoins) représentent la
première phase du cycle de développement d'un système. Elle sert à identifier les
acteurs réactifs du système et leur associer chacun l'ensemble d'actions avec lesquelles il
intervient.
Il s'agit donc de déterminer les fonctionnalités et les acteurs les plus pertinents,
de préciser les risques les plus critiques et d'identifier les cas d'utilisation initiaux.
2. Spécification des exigences

2.1. Identification des acteurs
Un acteur est un utilisateur, un matériel externe ou un autre système qui

déclenche la réalisation d’une activité afin de remplir ses obligations métiers, c’est celui
qui interagit directement avec le système étudié.
En réponse à l'action d'un acteur, le système fournit un service qui correspond à

son besoin.
Pour notre système, l’acteur principal est l’utilisateur de l’application, c’est-à-
dire chaque client disposant de l’accès à cette dernière.

2.2. Besoins fonctionnels
Les besoins fonctionnels expriment en général les fonctionnalités concrètes

qu’un acteur attend du système. Ils définissent l’ensemble des besoins utilisateur que
l’application doit satisfaire.
Notre application doit satisfaire les besoins fonctionnels suivants :
 Gestion des modèles ;
 Gestion des feuilles de route ;
 Gestion des points de passage ;
 Gestion des récurrences ;
 Gestion du profil ;
 Consultation du tableau de bord.
2.3. Définition des cas d’utilisation majeurs
Un cas d’utilisation est une technique qui permet d’exprimer les besoins
fonctionnels des utilisateurs d’un système. Il décrit les interactions entre les acteurs du
système et le système lui-même.
Les diagrammes des cas d’utilisation permettent donc de donner une vision
globale sur l’application à développer. Dans un diagramme de cas d’utilisation, les
utilisateurs du système s’appellent des acteurs et les actions s’appellent des cas
d’utilisation.
La figure ci-dessous représente le diagramme de cas d’utilisation majeur de
notre système.

Figure 7 - Diagramme de cas d’utilisation majeur

2.4. Illustration des cas d’utilisation
2.4.1. Cas d’utilisation 1 : S’authentifier
a. Description textuelle
Tableau 4 - Description textuelle du cas d’utilisation : S’authentifier
Identification :
 Nom du cas : S’authentifier ;
 Description : Permettre aux utilisateurs d’accéder à l’application
en utilisant leurs identifiants (Email et mot de passe) ;
 Acteur principal : Utilisateur.
Séquencement :
Le cas d’utilisation commence lorsque :
Pré-condition :
L'utilisateur a accédé à l’application.
Scénario nominal :
1. L’utilisateur accède à l’application ;
2. Le système présente un formulaire d’authentification ;
3. L’utilisateur saisit ses identifiants et il valide ;
4. Le système vérifie si les données saisies sont valides ;
5. Le système ouvre une session à l’utilisateur ;
6. Le système redirige l’utilisateur vers son espace.
Scénarios d’erreur :
E1. Identifiants erronés.
- L’enchaînement E1 démarre au point 4 du scénario nominal.
- L’utilisateur tente de s’authentifier en utilisant des identifiants
erronés, et le système lui affiche un message d’erreur.
- Le scénario nominal reprend au point 3.

b. Diagramme de séquences (niveau analyse)
Afin d’illustrer notre diagramme de cas d’utilisation, nous allons introduire le

diagramme de séquences relatif à l’authentification de l’utilisateur.
Le diagramme de séquences sert à représenter les successions particulières
d’enchaînement d’un scénario en utilisant des conventions graphiques. Il s’intéresse aux
interactions se produisant à l'intérieur d'un système, de façon qu’il présente les liens vitaux
d’un objet et comment il communique avec d’autres objets pour accomplir une action avant
que le lien vital s’interrompe.
2.4.2.
Figure 8 - Diagramme de séquences (niveau analyse) : S’authentifier

2.4.2. Cas d’utilisation 2 : Gérer les modèles
a. Diagramme de cas d’utilisation
Figure 9 - Diagramme de cas d’utilisation : Gérer les modèles

b. Description textuelle
Tableau 5 - Description textuelle du cas d’utilisation : Gérer les modèles
Identification :
 Nom du cas : Gérer les modèles ;
 Description : Permettre de créer un modèle et enregistrer une liste
des points de passage, aussi modifier et supprimer le modèle ainsi
que ses points de passage ;
Séquencement :
Pré-condition :
L'utilisateur s’est authentifié.
L’utilisateur a accédé à l’interface de gestion des modèles.
Scénario nominal :
1. L’utilisateur accède à l’interface de gestion des modèles ;
2. L’utilisateur choisit l’opération souhaitée ;
3. Le système lui affiche l’interface concernée ;
4. L’utilisateur remplit le formulaire nécessaire ;
5. L’utilisateur enregistre les modifications et se redirige vers
l’interface de gestion des modèles.
E1. Champs obligatoires.
5. L’utilisateur tente d’enregistrer ses modifications sans remplir les
champs concernés, et le système lui affiche un message d’erreur.

c. Diagramme de séquences (niveau analyse)
Figure 10 - Diagramme de séquences (niveau analyse) : Gérer les modèles

2.4.3. Cas d’utilisation 3 : Gérer les points de passage
Figure 11 - Diagramme de cas d’utilisation : Gérer les points de passage
Tableau 6 - Description textuelle du cas d’utilisation : Gérer les points de passage
Identification :
 Nom du cas : Gérer les points de passage ;
 Description : Permettre de consulter la liste des points de passage
avec la possibilité de les filtrer et les exporter sous format csv.
Séquencement :
Pré-condition :
L’utilisateur a accédé à l’interface de gestion des points de passage.
Scénario nominal :
1. L’utilisateur accède à l’interface de gestion des points de passage ;
3. L’utilisateur a effectué l’opération avec succès ;

Figure 12 - Diagramme de séquences (niveau analyse) : Gérer les points de passage

2.4.4. Cas d’utilisation 4 : Gérer les feuilles de route
Figure 13 - Diagramme de cas d’utilisation : Gérer les feuilles de route

Tableau 7 - Description textuelle du cas d’utilisation : Gérer les feuilles de route
Identification :
 Nom du cas : Gérer les feuilles de route ;
 Description : Permettre de créer une feuille de route, consulter son
détail, la modifier, la supprimer et filtrer ou exporter sous format
csv la liste des feuilles de route.
Séquencement :
Pré-condition :
L’utilisateur a accédé à l’interface de gestion des feuilles de route.
Scénario nominal :
1. L’utilisateur accède à l’interface de gestion des feuilles de route ;
4. L’utilisateur remplit le formulaire s’il est nécessaire ;
l’interface de gestion des feuilles de route.

Figure 14 - Diagramme de séquences (niveau analyse) : Gérer les feuilles de route

2.4.5. Cas d’utilisation 5 : Gérer les récurrences
Figure 15 - Diagramme de cas d’utilisation : Gérer les points de passage

Tableau 8 - Description textuelle du cas d’utilisation : Gérer les récurrences
Identification :
 Nom du cas : Gérer les récurrences ;
 Description : Permettre de créer une récurrence, la modifier, la
supprimer, la filtrer et l’arrêter.
Séquencement :
Pré-condition :
L’utilisateur a accédé à l’interface de gestion des récurrences.
Scénario nominal :
1. L’utilisateur accède à l’interface de gestion des récurrences ;
4. L’utilisateur remplit le formulaire s’il est nécessaire ;
l’interface de gestion des récurrences.

Figure 16 - Diagramme de séquences (niveau analyse) : Gérer les récurrences

II. Spécification des exigences non-fonctionnelles

Les exigences non-fonctionnelles sont des exigences qui ne concernent pas
spécifiquement le comportement du système. Elles peuvent concerner des contraintes
internes et externes du système.
Notre application doit assurer les besoins non-fonctionnels suivants :
 Sécurité : l’application doit être hautement sécurisée ; les interfaces de

l’application ne devront pas être accessibles par tout le monde, mais en
ayant un accès sécurisé basé sur l’authentification.
 Ergonomie et convivialité : l’application doit fournir une interface

simple et facile à utiliser avec un style attractif.
 Multiplateforme : l’application doit s’adapter à n’importe quelle

plateforme, soit les ordinateurs, les tablettes ou les téléphones.
 Extensibilité : l’application doit avoir la possibilité d’ajouter ou de

modifier certaines fonctionnalités.

Conclusion
Dans ce chapitre, nous avons défini les exigences de l'application en identifiant

les acteurs, les besoins fonctionnels et non fonctionnels, chose qui nous donne une
vision plus claire pour passer à la modélisation détaillée de ces fonctionnalités.
Dans le chapitre suivant, nous présenterons la conception de notre application.

Chapitre 3 : Conception
Ce chapitre a pour but de présenter la modélisation statique de l’application

en décrivant le schéma de base de données et l’architecture globale de l’application.
Par la suite, nous exposerons la modélisation dynamique des interfaces qui seront
développées dans le chapitre suivant.

Introduction
Pour modéliser l’aspect statique de notre application, nous allons faire recours
au diagramme de classes qui est un diagramme important dans toutes les méthodes
orientées objets. Quant à la modélisation dynamique, elle sera définie par les
diagrammes de séquences.
I. Modélisation statique
1. Diagramme de classes
Les diagrammes de classes sont les diagrammes les plus répandus dans les
systèmes de modélisation orientés objets, car ils fournissent une vue globale d'un
système en présentant ses classes, interfaces et collaborations, et les relations entre elles.
Un diagramme de classes met en œuvre des classes, contenant des attributs et
des opérations, et reliées par des associations ou des généralisations.
Une classe représente la description abstraite du comportement et du type d’un
ensemble d’objets possédant les mêmes caractéristiques. Les éléments de cet ensemble
définissent des instances de classe.
La figure ci-dessous montre le diagramme de classes qui collaborent au
fonctionnement de notre application.
Figure 17 - Diagramme de classes

 La classe « Utilisateur » regroupe les champs nécessaires pour l’authentification d’un

utilisateur.
 La classe « Feuille de route » contient l’ensemble des feuilles de route crées par
l’utilisateur connecté. Il fait la liaison entre les modèles et les véhicules.
 La classe « Modele» représente les trajets possibles qu’un utilisateur crée depuis les
points de passage.
 La classe « Point de passage » représente la plage de temps qu’un véhicule ait pour
passer par un point d’intérêt.
 La classe « Point d’intérêt » contient les informations qui définissent l’entourage de
passage d’un véhicule.
 La classe « Historique » concerne l’historique de passage de chaque véhicule utilisé dans
une feuille de route.
 La classe « Recurrence » est la classe qui comporte les feuilles de route dupliquées.
 La classe « Vehicule » concerne la liste des véhicules.
2. Dictionnaire de données
Après l’illustration des différentes classes de notre application, nous allons
établir le dictionnaire de donnée de chaque classe.
Les tableaux suivants définissent alors la désignation de chaque attribut ainsi

que son type.
 Classe utilisateur
Tableau 9 - Dictionnaire de données de la classe utilisateur
Attribut Désignation Type
id Identifiant de l’utilisateur Int

Nom Nom de l’utilisateur String
Email Email de l’utilisateur String
mot_de_passe Mot de passe de l’utilisateur String
token Jeton de sécurité de l’utilisateur String

 Classe véhicule
Tableau 10 - Dictionnaire de données de la classe véhicule
id Identifiant du véhicule Int

nom Nom du véhicule String
plaque Plaque du véhicule String
 Classe modèle
Tableau 11 - Dictionnaire de données de la classe modèle
id Identifiant du modèle Int

nom Nom du modèle String
 Classe point d’intérêt

Tableau 12 - Dictionnaire de données de la classe point d’intérêt
id Identifiant du point d’intérêt Int

nom Nom du point d’intérêt String
groupe Groupe du point d’intérêt String
rue Rue du point d’intérêt String
code_pos Code postale du point d’intérêt Int
ville Ville du point d’intérêt String
pays Pays du point d’intérêt String
long Longitude du point d’intérêt String
lat Latitude du point d’intérêt String
rayon Rayon du point d’intérêt Int

 Classe point de passage

Tableau 13 - Dictionnaire de données de la classe points de passage
id Identifiant du point de passage Int

ptp_heure_debut Heure de début du passage Time
ptp_heure_fin Heure de début du passage Time
ptp_jour_debut Jour de début du passage Int
ptp_jour_fin Jour de fin du passage Int
 Classe feuille de route

Tableau 14 - Dictionnaire de données de la classe feuille de route
id Identifiant de la feuille de route Int

rtroad_date_debut Date début de la feuille de route Date
rtroad_date_fin Date fin de la feuille de route Date
rtroad_heure_debut Heure début de la feuille de route Time
rtroad_heure_fin Heure fin de la feuille de route Time
 Classe historique
Tableau 15 - Dictionnaire de données de la classe historique
Identifiant d’historique des points

id Int
de passage
Date du passage d’un véhicule
date_passage DateTime
par un point de passage
Vaut 1 si un point de passage est
statutPlanification Boolean
définit dans une feuille de route
Vaut 1 si le point de passage est
statutRealisation Boolean
parcouru

 Classe récurrence
Tableau 16 - Dictionnaire de données de la classe récurrence
id Identifiant d’une récurrence Int

Les jours de répétition d’une
periodicite String
récurrence
debut Date début d’une récurrence Date
fin Date fin d’une récurrence Date
Vaut 1 si une récurrence en cours
statutArret Boolean
est arrêtée
II. Modélisation dynamique
1. Diagrammes de séquence (niveau conception)
1.1. Cas d’utilisation 1 : s’authentifier
Figure 18 - Diagramme de séquences (niveau conception) : S'authentifier

La figure 19 ci-dessus illustre les interactions nécessaires permettant à

l’utilisateur de s’authentifier.
1.2. Cas d’utilisation 2 : Gérer les modèles
1.2.1. Diagramme de séquences (niveau conception) de la

fonctionnalité « Consulter le détail d’un modèle »
Figure 19 - Diagramme de séquences (niveau conception) : Consulter le détail d’un modèle

La figure 20 ci-dessus illustre le scénario permettant à l’utilisateur de consulter
le détail d’un modèle.

fonctionnalité « Ajouter un modèle »
Figure 20 - Diagramme de séquences (niveau conception) : Ajouter un modèle

La figure ci-dessus illustre les interactions nécessaires pour qu’un utilisateur

ajoute un modèle.

fonctionnalité « Modifier un modèle »
Figure 21 - Diagramme de séquences (niveau conception) : Modifier un modèle
Le scénario illustré par la figure 22 ci-dessus correspond à la modification d’un

modèle par un utilisateur.


fonctionnalité « Supprimer un modèle »
Figure 22 - Diagramme de séquences (niveau conception) : Supprimer un modèle

Cette figure consiste à illustrer les interactions nécessaires pour supprimer un
modèle.


fonctionnalité « Gérer les points de passage d’un modèle »
Figure 23 - Diagramme de séquences (niveau conception) : Gérer les points de passage

d'un modèle
La figure 24 ci-dessus illustre le scénario pour gérer les points de passage d’un
modèle. Les trois figures ci-dessous représentent cette gestion qui consiste à ajouter,
modifier et supprimer un point de passage.

 Diagramme de séquences (niveau conception) de la fonctionnalité

« Ajouter un point de passage » :
Figure 24 - Diagramme de séquences (niveau conception) : Ajouter un point de passage

« Modifier un point de passage » :
Figure 25 - Diagramme de séquences (niveau conception) : Modifier un point de passage


« Supprimer un point de passage » :
Figure 26 - Diagramme de séquences (niveau conception) : Supprimer un point de passage

fonctionnalité « Filtrer un modèle »
Figure 27 - Diagramme de séquences (niveau conception) : Filtrer un modèle
La figure 28 ci-dessus illustre le scénario pour filtrer un modèle.

1.3. Gérer les points de passage
Les figures ci-dessous distinguent les différentes interactions pour filtrer les
points de passage et les exporter sous format CSV.

fonctionnalité « Filtrer les points de passage »
Figure 28 - Diagramme de séquences (niveau conception) : Filtrer les points de passage

fonctionnalité « Exporter les points de passage sous format
CSV »
Figure 29 - Diagramme de séquences (niveau conception) : Exporter les points de passage sous format CSV

1.4. Gérer les feuilles de route
Les figures ci-dessous montrent les différentes actions à faire pour consulter,
ajouter, modifier, supprimer, filtrer et exporter les feuilles de route.

fonctionnalité « Consulter une feuille de route »
Figure 30 - Diagramme de séquences (niveau conception) : Consulter une feuille de route


fonctionnalité « Ajouter une feuille de route »
Figure 31 - Diagramme de séquences (niveau conception) : Ajouter une feuille de route

fonctionnalité « Modifier une feuille de route »
Figure 32 - Diagramme de séquences (niveau conception) : Modifier une feuille de route

1.4.4. Digramme de séquences (niveau conception) de la

fonctionnalité « Supprimer une feuille de route »
Figure 33 - Diagramme de séquences (niveau conception) : Supprimer une feuille de route

fonctionnalité « Exporter la liste des feuilles de route sous
format CSV »
Figure 34 - Diagramme de séquences (niveau conception) : Exporter la liste des feuilles de

route sous format CSV


fonctionnalité « Filtrer une feuille de route »
Figure 35 - Diagramme de séquences (niveau conception) : Filtrer une feuille de route
1.5. Gérer les récurrences
Les figures ci-dessous illustrent la gestion des récurrences qui permet

d’ajouter, modifier, supprimer, filtrer et arrêter une récurrence.

fonctionnalité « Ajouter une récurrence »
Figure 36 - Diagramme de séquences (niveau conception) : Ajouter une récurrence


fonctionnalité « Modifier une récurrence »
Figure 37 - Diagramme de séquences (niveau conception) : Modifier une récurrence

fonctionnalité « Supprimer une récurrence »
Figure 38 - Diagramme de séquences (niveau conception) : Supprimer une récurrence

1.5.4. Digramme de séquences (niveau conception) de la fonctionnalité

« Arrêter une récurrence »
Figure 39 - Diagramme de séquences (niveau conception) : Arrêter une récurrence
1.5.5. Digramme de séquences (niveau conception) de la fonctionnalité

« Filtrer une récurrence »
Figure 40 - Diagramme de séquences (niveau conception) : Filtrer une récurrence

Conclusion
À travers ce chapitre, nous avons élaboré la conception de notre application.
À ce propos, nous avons suivi la méthode de conception UML pour illustrer les
interactions de nos acteurs et notre système par un diagramme de classes et des
diagrammes de séquences.
Dans ce qui suit, nous présenterons la description de l’état de réalisation de

notre application.

Chapitre 4 : Réalisation
Ce chapitre représente le dernier volet de ce rapport. Dans un premier temps,

nous y décrivons l’environnement de travail ainsi que les outils de développement
utilisés. Dans un second temps, nous illustrons les interfaces les plus importantes de
notre application.

Introduction
L’implémentation est la phase la plus importante après celle de la conception.
Cette phase consiste à choisir les outils de développement nécessaires pour la mise en
place de notre application, ainsi qu’à montrer ses interfaces principales.
I. Environnement de développement
1. Environnement matériel
Pour la réalisation de notre projet, nous disposons de deux ordinateurs
possédant les caractéristiques suivants :
Tableau 17 - Caractéristiques d'environnement matériel
Modèle Dell Inc. Latitude E5450 HP ProBook 4540s
Intel(R) Core(TM) I5-5300U Intel(R) Core(TM) I5-2450M

Processeur
CPU @ 2.30 GHz CPU @ 2.50 GHz
RAM 8,00 GO 8,00 GO
Système d’exploitation Windows 10 Professionnel Windows 10 Professionnel
2. Environnement logiciel
Pour mener à terme ce projet, nous avons utilisé l’environnement logiciel
suivant :
 Visual Studio Code comme éditeur de code ;
 Lucidchart comme logiciel de création de diagrammes et schémas ;
 Wampserver v3.2.2.2 comme un environnement serveur ;
3. Choix des outils de développement
3.1. Définition des frameworks
Un framework désigne un ensemble d’outils et de composants logiciels à la base d’un

logiciel ou d’une application. C’est un cadre de travail qui simplifie les taches des développeurs

informatiques et conditionne le processus de développement en offrant une architecture prête à

l’emploi. Parmi ses avantages, les frameworks aident à :
 Gagner plus de temps lors du développement ;

 Réutiliser des parties de codes ;
 Standardiser la programmation ;
 Formaliser une architecture adaptée aux besoins de chaque entreprise.
3.2. Choix du framework : Application Frontend
Figure 41 - Logo d'Angular
Contrairement à d’autres alternatives telles que React et Vue.js, Angular est

nativement un framework opensource JavaScript pour développer des applications web
et mobile.
Angular [4] offre plusieurs solutions et conceptions prêtes à l’emploi. Il adopte
une architecture orientée composants et profite de la flexibilité du langage Type Script.
C’est un framework complet avec une architecture élégante basée sur le
modèle MVVM qui facilite le travail des développeurs séparément sur la même section
d’application.
Il est enrichi par une grande communauté qui aide à l’amélioration du
framework grâce à des mises à jour récurrentes.
Angular est notamment apprécié par son outil CLI, qui le rend plus évolutif
dans la génération de ses services et composants depuis son propre terminal.
De cela, le choix d’Angular reste une meilleure solution pour développer notre
application.

3.3. Choix du framework : Application Backend
Figure 42 - Logo de Laravel
Selon Wikipédia : « Laravel est un framework web opensource écrit

en PHP1 respectant le principe modèle-vue-contrôleur et entièrement développé
en programmation orientée objet. Laravel est distribué sous licence MIT, avec ses
sources hébergées sur GitHub » [5].
Actuellement, Laravel [6] est devenu une solution reconnue partout dans le
monde informatique grâce à sa simplicité, sa documentation qui est riche et bien
détaillée, ses bibliothèques orientées objets, sa capacité de fournir une sécurité de haut
niveau et son prise en charge de l’architecture MVC.
Laravel intègre plusieurs services, citant :
 Un système de routage performant ;
 Un système d’authentification ;
 Un système de migrations pour les bases de données ;
 Une gestion des sessions ;
 Un système d’envoi de mail.
Le fait que Laravel est un framework très complet et très puissant le rend un choix
compatible au développement de notre application Backend.
3.4. Autres outils
3.4.1. GitHub
Figure 43 - Logo de GitHub

GitHub [7] est une plateforme open source de gestion de versions et de

collaboration destinée aux développeurs de logiciels. C’est à la fois un site web et un
service de Cloud qui aide les développeurs à stocker et à gérer leur code, à le partager
publiquement ou non ainsi qu’à suivre et contrôler les modifications qui lui sont
apportées.
GitHub est si vague qu’il accueille plus de 80 millions de projets, dont ils
s’agissent de logiciels, de sites Web, d’applications web ou mobile ou tous autres types
de projet quel que soit le langage de programmation utilisé.
3.4.2. BitBucket
Figure 44 - Logo de BitBucket
BitBucket [8] est un simple outil de gestion de versions logicielles basé sur
les systèmes open source de contrôle de révisions Git et Mercurial. Il dispose d’un
espace de gestion de projet, une forte intégration de Trello et Jira, un environnement de
collaboration autour du code source et offre des intégrations et livraisons continues.
C’est un service entièrement gratuit, permettant la création d’un nombre
illimité de dépôts et référentiels privés, accessibles par cinq utilisateurs au maximum.
Pour le fonctionnement privé, il offre des prix convenables aux enseignants et aux
étudiants.
3.4.3. Postman
Figure 45 -Logo de Postman
Postman [9] est l’une des solutions pour interagir avec les API REST et les
tester. Il présente une interface graphique conviviale pour construire et exécuter des

requêtes HTTP, les stocker dans un historique, les organiser en collections et lire ses
résultats.
3.4.4. Bootstrap
Figure 46 - Logo de Bootstrap
Bootstrap [10] est un framework open source qui regroupe plusieurs outils
dédiés à la création du design des sites et des applications web. C’est une combinaison
des codes HTML et CSS ainsi que des extensions JavaScript.
Ce framework facilite la création des sites compatibles avec tous les
navigateurs, tout en disposant d’un système de grille permettant le positionnement des
éléments HTML sur une page web et par conséquence, réduire le temps du
développement du site.
II. Application
1. Calendrier réel
Le calendrier réel est représenté comme suit :
Tableau 18 - Calendrier réel
Activité Durée Date début Date fin

d’initiation
Phase
Intégration au sein de STG Maroc. 1 15/02/2021 15/02/2021

Étude préalable :
- Réunion avec l’encadrant.
4 16/02/2021 19/02/2021
- Réunion avec les développeurs pour
se familiariser avec les fonctionnalités
de l’application STG Fleet.
Sprint 0
Étude détaillée :
- Spécification des exigences. 2 22/02/2021 23/02/2021
- Réalisation de cahier de charges.
Étude technique :
- Choix des technologies (Angular,

Laravel). 20 24/02/2021 23/03/2021
- Autoformation.
- Conception générale.
2 24/03/2021 25/03/2021
-Validation de la conception.
Sprint 1
- Choix du template de la partie

Frontend.
2 26/03/2021 29/03/2021
- Configuration de l’architecture de la
partie Backend.
Sprint 2
- Gestion des modèles. 8 30/03/2021 08/04/2021

Sprint 3
- Gestion des points de passage. 5 09/04/2021 15/04/2021

Sprint 4
- Gestion des récurrences. 7 16/04/2021 26/04/2021

Sprint 5
- Gestion des feuilles de route. 10 27/04/2021 10/05/2021

Sprint 6
- Intégration de Map. 3 11/05/2021 13/05/2021
- Authentification. 4 14/05/2021 19/05/2021

Sprint 7
- Gestion de profil. 2 20/05/2021 21/05/2021
Rédaction du rapport 30 21/04/2021 01/06/2021

La figure ci-dessous représente le calendrier réel sous format de diagramme

de Gantt :
Figure 47 - Diagramme de Gantt réel
2. Architecture globale
L’architecture logicielle consiste à décrire proprement l’organisation et la
structuration d’un système, sa décomposition en sous-systèmes et leurs interactions.
Contrairement aux spécifications de l’analyse fonctionnelle, l’architecture
logicielle répond à la question « comment faire ».

2.1. Application Frontend
Figure 48 - Architecture du dossier Frontend

Concernant notre application Frontend, notre dossier se compose des dossiers
et fichiers suivants :
 Le dossier node_modules : stocke toutes les dépendances du projet
installé via npm ;
 Le fichier package.json : c’est un fichier json situé à la racine de
l’application. Il contient la description de l’application, une liste des
scripts prédéfinis, l’ensemble des modules npm installés et utilisés ainsi
que les dépendances relatives au développement de l’application ;
 Le dossier src : va regrouper l’ensemble des dossiers et fichiers sources
de l’application, citant :
 Le dossier app : contient les composants, les vues et les services de
l’application. C’est dans ce dossier que nous allons passer la plupart du
temps ;
 Le dossier assets : ce dossier rassemble les images utilisées dans
l’application :
 Le fichier index.html : c’est le fichier principal qui permet l’accès aux
autres fichiers de l’application.

2.2. Application Backend
Figure 49 - Architecture du dossier Backend
L’application Backend suit l’architecture MVC. Cette dernière représente un

pattern architectural qui distingue trois entités différentes :
 Le modèle : assure la gestion des données manipulées par le programme.
Il contient des méthodes de mise à jour et de récupération de ces
données, et aussi il définit l’interaction avec la base de données et son
traitement ;
 La vue : représente l’interface utilisateur qui affiche les données
récupérées auprès du modèle.
 Le contrôleur : c’est l’intermédiaire entre le modèle et la vue. Il
demande au modèle les données pour les analyser et les renvoyer par la
suite à la vue pour les afficher.
Notre architecture Backend est représentée comme suit :
 Le fichier .env : il contient les données sensibles de l’application comme
l’adresse et le mot de passe de la base de données... ;
 Le dossier vendor : regroupe les dépendances installées par composer.
 Le dossier migrations : il décrit la base de données de l’application afin
que Laravel puisse gérer les tables et les colonnes automatiquement ;
 Le fichier api.php : il gère les urls.

3. Principales interfaces graphiques

Dans cette partie, nous allons présenter et décrire quelques interfaces de notre
application.
3.1. Authentification
Figure 50 - Interface d'authentification
Afin d’accéder aux différentes fonctionnalités de l’application, l’utilisateur doit

s’authentifier en utilisant son email et mot de passe. Si les identifiants sont incorrects,
un message d’erreur s’affiche :
Figure 51 - Connexion échouée

3.2. Interface d’accueil
3.2.1.
Figure 52 - Interface d'accueil
Après authentification, l’utilisateur se redirige vers son interface d’accueil qui

contient le menu principal de l’application. Ce menu lui donne la possibilité d’accéder
directement à la fonctionnalité souhaitée.
3.3. Gestion des feuilles de route
Figure 53 - Interface de gestion des feuilles de route

La figure ci-dessus représente l’interface qui permet à l’utilisateur de créer,

modifier, supprimer, filtrer, exporter et consulter les détails d’une feuille de route.
 Création d’une feuille de route
Figure 54 - Interface de création d'une feuille de route
La création d’une feuille de route dépend des horaires de cette dernière. Par
exemple, si l’utilisateur tente de créer une feuille de route dont le jour de début est le
même jour de création de cette feuille alors que l’heure de début est déjà passée, un
message d’erreur s’affiche.
Figure 55 - Validation du formulaire de création

 Filtrage d’une feuille de route
Figure 56 - Filtrage des feuilles de route selon un modèle
L’utilisateur peut filtrer la liste des feuilles de route selon le nom des véhicules
ou des modèles.
 Modification d’une feuille de route
Figure 57 - Interface de modification d'une feuille de route

 Consultation du détail d’une feuille de route
D’après ces deux interfaces, l’utilisateur peut savoir la date de passage de

chaque véhicule par un point de passage spécifique, ainsi que consulter l’historique de
passage de chaque véhicule.
Figure 58 - Interface du détail d'une feuille de route
Figure 59 - Interface du détail d'un point de passage

3.4. Gestion des modèles
Cette figure donne l’aperçu de l’interface de gestion des modèles, qui permet à
l’utilisateur de créer, modifier, supprimer, filtrer, et gérer les points de passage d’un
modèle pour l’utiliser par la suite dans la création d’une feuille de route.
Figure 60 - Interface de gestion d'un modèle
 Gestion des points de passage d’un modèle
La création d’un modèle nécessite la création d’au moins deux points de

passage.
Figure 61 - Interface de gestion des points de passage d'un modèle

 Création des points de passage d’un modèle
Figure 62 - Interface de création des points de passage
3.5. Gestion des points de passage
La figure 61 ci-dessous présente la liste des points de passage utilisés dans les
feuilles de route. L’utilisateur a la possibilité d’exporter ou filtrer les points de passage selon
les points d’intérêt ou les noms des véhicules, ou bien selon les points de passage planifiés,
réalisés ou non réalisés.
Figure 63 - Interface de gestion des points de passage

3.6. Gestion des récurrences
Dans cette interface, l’utilisateur peut créer, modifier, supprimer, filtrer une
récurrence selon les noms des véhicules ou des modèles ainsi qu’arrêter une récurrence
si elle est en cours.
Figure 64 - Interface de gestion des récurrences

Conclusion
À ce stade, nous arrivons à la fin de notre étude de projet. Ce dernier chapitre a
apporté sur la description des environnements matériels et logiciels ainsi que les outils
de développement avec lesquels nous avons construit notre application. Aussi, nous
avons illustré les principales fonctionnalités de notre application dans quelques
interfaces graphiques.
Par la suite, nous passerons à la conclusion générale de notre projet.

Conclusion générale
Conclusion générale
Dans notre projet de fin d’études, nous avions l’opportunité de mettre en œuvre
une application de gestion de tournées logistiques pour la société STG Maroc.
Afin de faciliter la planification journalière des tournées pour les clients de
STG, nous avons procédé à une étude de l’existant qui nous a aidés à analyser et
spécifier les différents besoins de l’application. Ensuite, nous avons détaillé notre étude
conceptuelle en utilisant le langage UML. Enfin, la dernière étape était d’identifier
l’environnement de développement et exposer les interfaces de notre application.
De toute façon, l’application de gestion de tournées a aidé à répondre à la
plupart de difficultés rencontrées par les clients de STG, dont l’organisation des
tournées est rendu plus simple et automatisée, la chose qui va donner une vision claire
sur toutes les missions du transport de chaque client.
En général, ce travail nous a permis de mettre en pratique et enrichir nos
connaissances techniques et informatiques acquises durant notre formation à l’ENSA. Il
a consisté non seulement à l’apprentissage et l’utilisation d’un nouveau framework et
suivre de multiples formations, mais aussi à la familiarisation avec la gestion d’un projet
d’une façon organisée et structurée et à l’intégration dans le monde professionnelle.
Cependant, les conditions de travail nous ont posé une certaine difficulté au
début de notre stage comme nous étions séparées de l’équipe de développement, la
chose qui nous a imposé des déplacements fréquents au département technique pour
suivre notre avancement de travail.
En perspectives, l’application peut être améliorée sous différents aspects,
notamment l’amélioration du design, l’implémentation des différents tests, le
développement de l’interface tableau de bord et l’ajout de nouvelles fonctionnalités
comme l’envoi des notifications.

Références
Webographie
[1] « STG Fleet » [En ligne]. Disponible sur : https://app.stgfleet.com/ui/login/
[Consulté le 31/05/2021]
[2] « STG Maroc » [En ligne]. Disponible sur : https://www.stg.ma/site2
[3] « Tuleap » [En ligne]. Disponible sur : https://www.tuleap.org/fr/agile/comprendre-
methode-agile-scrum-10-minutes/#outils-equipe-scrum [Consulté le 05/05/2021]
[4] « Angular » [En ligne]. Disponible sur : https://angular.io/ [Consulté le 1/05/2021]
[5] « Architecture logicielle _Wikipédia » [En ligne]. Disponible sur :
https://fr.wikipedia.org/wiki/Architecture_logicielle [Consulté le 26/05/2021]
[6] « Laravel » [En ligne]. Disponible sur : https://laravel.com/
[7] « GitHub » [En ligne]. Disponible sur : https://github.com/
[8] « BitBucket » [En ligne]. Disponible sur :
https://www.atlassian.com/fr/software/bitbucket [Consulté le 24/05/2021]
[9] « Postman » [En ligne]. Disponible sur : https://www.postman.com/
[10] « Bootstrap » [En ligne]. Disponible sur : https://getbootstrap.com/
[11] « Stackoverflow » [En ligne]. Disponible sur :
https://stackoverflow.com/questions/62349017/laravel-validation-enddate-after-start-
date-not-working [Consulté le 08/03/2021]
[12] « W3schools » [En ligne]. Disponible sur :
https://www.w3schools.com/angular/angular_validation.asp [Consulté le 04/03/2021]
https://stackoverflow.com/questions/47059484/laravel-carbon-see-if-date-is-in-the-past
[14] « Udemy » [En ligne]. Disponible sur : https://www.udemy.com/course/angular-
laravel-single-page-app-with-authentication-and-password-
reset/learn/lecture/10341588#overview [Consulté le 12/04/2021]
[15] « Positronx » [En ligne]. Disponible sur : https://www.positronx.io/laravel-angular-
token-based-authentication-with-jwt/ [Consulté le 12/04/2021]
[16] « WebfullStack » [En ligne]. Disponible sur :
https://webfullstack.medium.com/authentication-using-laravel-8-0-angular-11-0-
7fc7e9760044 [Consulté le 13/04/2021]
[17] « Ng-bootstrap » [En ligne]. Disponible sur : https://ng-bootstrap.github.io/#/home
[18] « GitHub » [En ligne]. Disponible sur : https://github.com/SinghDigamber/laravel-
angular-jwt-auth/tree/master/frontend [Consulté le 22/04/2021]
https://stackoverflow.com/questions/47400929/how-to-add-authorization-header-to-
angular-http-request/55469943 [Consulté le 27/04/2021]
[20] « Coreui » [En ligne]. Disponible sur :
https://coreui.io/angular/demo/free/2.11.1/#/dashboard [Consulté le 03/05/2021]
[21] « Jasonwatmore » [En ligne]. Disponible sur :
https://jasonwatmore.com/post/2019/06/22/angular-8-jwt-authentication-example-
tutorial [Consulté le 13/04/2021]
[22] « Section » [En ligne]. Disponible sur : https://www.section.io/engineering-
education/jwt-auth-angular/ [Consulté le 13/04/2021]
https://stackoverflow.com/questions/24680247/check-if-a-latitude-and-longitude-is-
within-a-circle-google-maps [Consulté le 13/03/2021]
[24] « Angular-maps » [En ligne]. Disponible sur : https://angular-maps.com/
https://stackoverflow.com/questions/12685420/array-push-in-laravel
[25] « Youtube » [En ligne]. Disponible sur :
https://www.youtube.com/watch?v=CtklHQUfNZQ [Consulté le 13/04/2021]
[26] « Stackoverflow» [En ligne]. Disponible sur :
https://stackoverflow.com/questions/55804747/how-to-validate-multiple-checkboxes-
in-angular-7-it-should-throw-a-message-th [Consulté le 24/03/2021]

Gestion Des Tournées

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Gestion Des Tournées

Transféré par

Droits d'auteur :

Formats disponibles

Mémoire de Projet de Fin d’Études

Pour l’obtention du diplôme

Mlle. Chaimae EL KHNISSI et Mlle. Chaimae FITIAN

M. Zakaria BOUANANI Encadrant société

Année universitaire : 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI I 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI II 2020-2021

À la femme la plus chère de ma vie, ma source d'encouragement,

Chaimae FITIAN - Chaimae EL KHNISSI II 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI IV 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI V 2020-2021

Key words: route management, roadmaps, Laravel, Angular, STG Maroc.

Chaimae FITIAN - Chaimae EL KHNISSI V 2020-2021

Liste des tableaux

Chaimae FITIAN - Chaimae EL KHNISSI VI 2020-2021

Liste des figures

Chaimae FITIAN - Chaimae EL KHNISSI VII 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI VII 2020-2021

Figure 51 - Interface de gestion des feuilles de route ..................................................... 72

Chaimae FITIAN - Chaimae EL KHNISSI VII 2020-2021

Liste des acronymes

Chaimae FITIAN - Chaimae EL KHNISSI VIII 2020-2021

Table des matières

Chapitre 1 : Contexte généraldu projet ............................................................................... 3

I. Présentation de l’organisme d’accueil .................................................................................. 4

II. Présentation du projet ........................................................................................................ 11

Chapitre 2 : Spécificationdes exigences ............................................................................. 21

I. Spécification des exigences fonctionnelles ........................................................................ 22

Chaimae FITIAN - Chaimae EL KHNISSI IX 2020-2021

1. Analyse et identification des exigences ........................................................................ 22

II. Spécification des exigences non-fonctionnelles................................................................ 38

Chapitre 3 : Conception ...................................................................................................... 40

I. Modélisation statique .......................................................................................................... 41

Chaimae FITIAN - Chaimae EL KHNISSI X 2020-2021

II. Modélisation dynamique ................................................................................................ 45

Chaimae FITIAN - Chaimae EL KHNISSI XI 2020-2021

feuille de route » ...................................................................................................... 56

Chapitre 4 : Réalisation .......................................................................................................... 60

I. Environnement de développement ........................................................................................ 61

II. Application ........................................................................................................................... 65

Chaimae FITIAN - Chaimae EL KHNISSI XI 2020-2021

2.2. Application Backend ................................................................................................ 70

Conclusion générale ................................................................................................................ 80

Chaimae FITIAN - Chaimae EL KHNISSI XI 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI 1 2020-2021

Chaimae FITIAN - Chaimae EL KHNISSI 2 2020-2021

Chapitre 1 : Contexte général

Ce premier chapitre porte sur le contexte général du projet. En premier lieu, il

Chaimae FITIAN - Chaimae EL KHNISSI 3 2020-2021

Au cours de ce chapitre, nous allons présenter l’organisme d’accueil tout en

I. Présentation de l’organisme d’accueil

Fondée et présidée par Adnan Ouassini, un entrepreneur marocain natif de

STG a été fondée suite à la passion du fondateur pour la technologie. Ce dernier

Depuis 2008, STG trace sa route principalement dans la télécommunication, en

1.2. STG Maroc

Le 29 juin 2018, la société américaine STG a procédé au lancement de sa filiale

Chaimae FITIAN - Chaimae EL KHNISSI 4 2020-2021

La conception, le développement et la fabrication de ces modules sont assurés

 Une équipe spécialisée en R&D ;

 Une équipe spécialisée dans le développement logiciel ;

 Une équipe spécialisée dans le développement hardware.

Depuis le lancement de ses activités au Maroc, STG a aidé beaucoup

1.3. Mission et valeurs