N° ...

/23

Projet de Fin d’études

Présenté en vue de l’obtention de la
Licence Sciences et Techniques
En Informatique.

Réalisation d’une application pour

mettre en relation clients et agents de
services .

Réalisé par : Encadré par :

Hajar KHALLAS Mr.Nachaoui Mourad

SalahEddine Kadiri

Soutenu le 24 Juin 2023 devant les membres de jury :

Mr. Nachaoui Mourad Professeur à la FST Béni Mellal Encadrant

Mr. Elmoufidi Abdelali Professeur à la FST Béni Mellal Examinateur

Mr Afraites Lekbir Professeur à la FST Béni Mellal Examinateur

1
 Dédicaces
A nos chers parents,
On dédie ce modeste travail et nos profondes gratitudes à nos chers
parents pour l’éducation qu’ils nous ont prodigué, avec tous les moyens et
au prix de tous les sacrifices qu’ils ont consentis à notre égard, pour le
sens du devoir qu’ils nous ont enseigné depuis notre enfance.
A nos frères et sœurs,
Qu’ils trouvent en ce travail, l’’hommage de notre gratitude, qu’aucun
mot ne saurait l’exprimer, pour leur amour et leur attachement durant
ces longues années.
A nos amis,
Pour tous les moments que nous avons partagés ensemble et tous les
instants inoubliables qui nous ont réunis. Pour votre aide et pour votre
support.
A nos professeurs,
Pour votre encadrement, vos conseils, vos critiques, et vos jugements.
2
 Remerciement

Nous tenons à remercier toutes les personnes qui ont

contribué au succès de notre projet et qui nous ont aidés lors
de la rédaction de ce rapport. Tout d'abord, nous adressons nos
remerciements à notre encadrant, Mr. Mourad Nachaoui qui
nous a beaucoup aidé dans nos recherches pédagogiques et qui
nous a permis de découvrir beaucoup de connaissances
nécessaires à la réalisation de notre projet. Son écoute et ses
conseils nous ont permis de cibler un des thèmes les plus
importants dans le monde informatique, et de trouver la
meilleure façon et les meilleurs outils, qui étaient en totale
adéquation avec nos attentes, à la réalisation de ce modeste
travail. Nous tenons à remercier vivement les membres de
Jury pour leur temps.

3
Table des matières
Dédicace ............................................................................................................. 2
Remerciment ...................................................................................................... 3
Table des matières .............................................................................................. 4
Liste des figures ................................................................................................. 6
Introduction Générale......................................................................................... 7
Chapitre 1 : Contexte général du projet ................................................................ 8
Introduction ........................................................................................... 8
I Présentation et Problématique de projet ................................................ 8
II Gestion de projet .................................................................................... 9
1.1 Equipe de projet ..................................................................................... 9
1.2 Les tâches du projet ............................................................................... 9
1.3 Diagramme de Gantt .............................................................................. 9
1.4 Conclusion ........................................................................................... 10
Chapitre2 : Analyse Fonctionnelle et Conceptuelle ............................................ 11
Introduction............................................................................................. 11
I Cahier des charges .................................................................................. 11
II Spécifications des besoins ...................................................................... 12
2.1 Besoins fonctionnels......................................................................... 12
2.2 Besoins techniques ........................................................................... 14
III Conception de l’application .................................................................... 15
3.1 Le langage de modélisation UML .................................................... 15
3.2 Les Différentes Diagrammes d’UML .............................................. 15
IV Conclusion .............................................................................................. 23
Chapitre 3 : Etude Technique .............................................................................. 24
Introduction............................................................................................. 24
4
 I Architecture de l’application .................................................................. 24
1. Définition d’un Framework .............................................................. 24
1.1 Spring boot ....................................................................................... 25
1.2 Flutter ............................................................................................... 25
1.3 Web Services .................................................................................... 25
1.4 API (Application Programming Interface) ....................................... 26
1.5 JSON................................................................................................. 26
1.6 Architecture de développement :...................................................... 27
II Outils de développement ........................................................................ 28
2.1 Système de Gestion de la base de données ...................................... 28
2.2 Postman ............................................................................................. 29
2.3 Visual Code ...................................................................................... 29
2.4 IntteliJ ............................................................................................... 29
2.5 Astah UML ....................................................................................... 30
Conclusion .............................................................................................. 30
Chapitre 4 : Réalisation de l’application ............................................................. 31
Introduction............................................................................................. 31
I Présentation des interfaces ...................................................................... 31
1. Côté Utilisateur................................................................................. 31
2. Côté admin : ..................................................................................... 41
Conclusion : ........................................................................................... 44
Conclusion ........................................................................................................... 45
Références ........................................................................................................... 46

5
Listes des figures
Figure 1:Diagramme de Gantt ...................................................................................... 10
Figure 2:Logo UML ...................................................................................................... 15
Figure 3:Diagramme de cas d'utilisation client ............................................................ 17
Figure 4:Diagramme de cas d’utilisation administrateur ............................................. 18
Figure 5: Diagramme de Classe. ................................................................................... 20
Figure 6: Diagramme de Séquence pour l’inscription et l’authentification. ................ 21
Figure 7: Diagramme de Séquence pour poster une publication. ................................. 22
Figure 8: Logo Spring Boot .......................................................................................... 25
Figure 9: Logo Flutter .................................................................................................. 25
Figure 10: Consommation des API. .............................................................................. 26
Figure 11: Logo JSON. ................................................................................................. 26
Figure 12: Architecture de l'application........................................................................ 28
Figure 13: Logo MySQL. ............................................................................................. 28
Figure 14: Logo Postman. ............................................................................................. 29
Figure 15:Logo Visual Code. ........................................................................................ 29
Figure 16: Logo IntteliJ ................................................................................................ 30
Figure 17: Logo Astah Uml. ......................................................................................... 30
Figure 18:Page d’authentification ................................................................................. 32
Figure 19: Page d’inscription ........................................................................................ 33
Figure 20: Notification d’erreur d’un email qui existe déjâ ......................................... 34
Figure 21: Notification de confirmation d’inscription .................................................. 35
Figure 22:Page d’acceuil .............................................................................................. 36
Figure 23:Page de publication personnelle .................................................................. 37
Figure 24:Formulaire de publication . .......................................................................... 38
Figure 25:Interface des annotations . ............................................................................ 39
Figure 26:Interface du profil utilisateur ....................................................................... 40
Figure 27: Interface pour consulter et noter le profil d’un client ................................ 41
Figure 28:Interface d’acceuil d’administrateur............................................................. 42
Figure 29:Liste des utilisateurs ..................................................................................... 43
Figure 30:Interface des services ................................................................................... 44

6
 Introduction Générale

Le XXIe siècle est le siècle de l'évolution de la technologie, il est marqué par

l'apparition des technologies mobile de communication et de traitement de
l'information comme le téléphone mobile, l’ordinateur portable....

Une application mobile est un logiciel développé pour une installation sur un
périphérique électronique mobile, tel qu'un téléphone mobile « Smartphone »,
ainsi c'est un programme téléchargeable de façon payante ou gratuite, et
exécutable à partir d'un système d’exploitation téléphonique (comme Android,
IOS). Ces applications sont utilisées dans de nombreux domaines de notre vie
quotidienne, et parmi ces domaines la recherche en ligne des services et de la main
œuvre. Notre projet consiste à mettre en place une application mobile dont le but
est d'offrir aux utilisateurs la possibilité d’ajouter et chercher des services et
laisser une annotation sur chaque profil.

Ce présent rapport est divisé en quatre chapitres décrivant les étapes suivies pour
la réalisation de notre application mobile :

 Chapitre1 : Définit le contexte général du projet. Au cours de ce chapitre

nous allons présenter le projet d’une manière générale.
 Chapitre2 : Met en évidence le cahier des charges, les besoins fonctionnels
et techniques et les différents diagrammes utilisés dans la phase
conceptuelle de notre projet.
 Chapitre3 : Montre l’architecture de développement, les outils et les
technologies utilisés pour la réalisation de l’application.
 Chapitre4 : Aborde la partie réalisation et le résultat de ce projet.

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

Introduction
Dans ce premier chapitre, nous allons présenter le contexte général de notre
projet, au préalable nous allons décrire le cadre général du projet et finalement
nous allons préciser la méthodologie de travail suivie durant la réalisation de ce
projet.

I. Présentation et Problématique de projet

Au Maroc on retrouve partout des emplacements nommé « MOUKAF » où se

réunis plusieurs artisans, ouvriers et citoyens pour proposer leurs services et
prestations individuellement ou en groupe. Ces services à la personne et leur
contribution à la croissance économique ont été longtemps sous-estimés,
assimilés à de « petits boulots » et à des emplois domestiques, mal rémunérés et
sans perspective d’évolution. En gros c’est un secteur marginalisé et non organisé
où le/la prestataire peut passer toute une journée dans le « MOUKAF » en
attendant l’arrivée d’un client ou pas. Donc notre projet fin d’étude essayera de
créer une application qui va résoudre quelque problème et facilité la taches à ces
prestataires et aux clients aussi .

II. Gestion de projet

1.1 Equipe de projet
L’équipe de notre projet se compose de trois personnes :

8
  Mr. Mourad Nachaoui : Notre encadrant et gestionnaire du projet

 Khallas Hajar, Kadiri Salah Eddine : Analystes et développeurs

d’application web mobile.

1.2 Les tâches de projet

La réalisation de notre projet nécessite les tâches suivantes :

 Tâche A : L’installation de l’environnement de travail.

 Tâche B : Formation en Spring boot.

 Tâche C : Formation en flutter

 Tâche D : Conception du projet.

 Tâche E : Design des interfaces de l’application (partie front end).

 Tâche F : Codage du projet (partie back end).

 Tâche G : Rédaction du rapport.

 Tâche H : Réalisation de la présentation de soutenance du PFE.

1.3 Diagrammes de GANTT

Le diagramme de Gantt est une représentation graphique, très utilisée dans la

gestion des projets qui permet de visualiser dans le temps les diverses tâches
composant notre projet et l’avancement de sa réalisation.

9
 Figure 1:Diagramme de Gantt

Conclusion

Dans ce chapitre nous avons encadré le projet d’une manière générale, présenté la
problématique ainsi que la description des tâches du projet et la chronologie de
leur réalisation.

10
 Chapitre2 : Analyse
Fonctionnelle et Conceptuelle

Introduction
Après avoir encadré le sujet d’une manière générale, dans ce chapitre on va
présenter le cahier de charges de notre projet et les besoins spécifiques à réaliser,
ainsi que la partie de conception réalisée en utilisant le langage de modélisation
UML. Nous présenterons les diagrammes des cas d’utilisation, de classes, et de
séquences.

I. Cahier des charges

La rapidité de la croissance démographique et l’arrivée continue des

ruraux créent des déséquilibres profonds sur le marché de l’emploi.
L’écart important entre l’offre et la demande donne un surplus croissant
de main-d’œuvre disponible et prête à exécuter n’importe quel travail.

C’est dans un tel contexte qu’il faut situer le rôle significatif rempli par
ces places spontanées d’embauche que sont les moukef, espaces
d’accueil de tous les actifs cherchant à s’intégrer immédiatement et sans
aucune préparation préalable au monde du travail urbain. En tant que
premier et dernier recours, pour un grand nombre d’actifs luttant pour la
survie au sein de la ville, le moukef revêt une grande importance dans le
système informel. Si certaines activités appartenant à ce secteur
économique nécessitent pour leur entrée un minimum de capital et un
certain équipement, le moukef ne demande que la force de travail. Il
suffit d’être prêt à exécuter n’importe quelle occupation, ce qui est à la

11
 portée de tout le monde, surtout quand on n’a pas d’autres opportunités
immédiates en vue.

Initialement, le mot moukef signifie littéralement le « lieu où les

demandeurs d’emploi restent debout ». Il provient donc de l’idée
d’attente, accompagnée de la station debout ou d’arrêt pour les
personnes ou les véhicules. Les individus attendent, dans un lieu
particulier, l’opportunité de se faire embaucher. Des camions s’y
arrêtent, destinés à transporter les éventuels candidats au travail. Les
idées se recoupent, car il s’agit de l’attente et de la rencontre entre l’offre
et la demande d’emplois.

On essayera donc de créer une application en se basant sur les besoins

des clients et des prestataires .

II. Spécification des besoins

2.1 Besoins fonctionnels

 Proposition d’un espace de saisie de publications qui peuvent

être soit des demandes de service, soit des offres de prestations.
 L’application doit présenter aux utilisateurs comme interface d’accueil,
la liste des dernières publications.
 Afin de rendre la sélection de Prestataires la plus pertinente possible un
système d’appréciation et d’évaluation est mis en place .Les clients sont
par ailleurs invités à noter les prestataires qui ont réalisé pour eux des
prestations de services, pour renseigner les autres membres sur leur
sérieux et leur efficacité.
 L’application est gérée par un administrateur qui est un utilisateur

12
 membre qui a en plus l'avantage de gérer l'ensemble de fonctionnalités
de l'application.
 Les prestataires positionnent en totale liberté leurs annonces de
jobs qui leurs conviennent, en ayant à tout moment la possibilité
de retirer leurs annonces du site.
 Pour publier une annonce de job, tout internaute doit s’inscrire
sur notre site pour en devenir Membre.

Les deux principaux utilisateurs de l’application sont :

 L’utilisateur :

 L’utilisateur est l’axe de notre système. Ce dernier peut consulter

les publications autant que visiteur , modifier ou ajouter des
publications, et laisser des annotations , ou consulter ses propres
publications comme il peut les supprimer .

 Au moment de la consultation de son espace, l’utilisateur peut

publier de nouvelles publications. L’utilisateur a le droit aussi de
chercher des postes selon une catégorie spécifique (Offre,
Demande)

 Si l’utilisateur a déjà un compte, il suffit de se connecter avec son

email et son mot de passe, sinon il faut créer un compte.

13
 Ses fonctionnalités
 S’inscrire (s’il n’a pas un compte).
 S’authentifier
 Consulter ses propres publications.
 Consulter les prestations publiées des autres utilisateurs.
 Trier les publications par catégorie (offre, demande).
 Poster, modifier et supprimer ses publications que ça soit des
offres ou des demandes.
 Modifier son profil
Utilisateur
 Ajouter une annotation
 Gérer ses publications (Poster, Modifier ,Supprimer).
 Déconnexion.

 L’administrateur :
L’administrateur est l’utilisateur qui a la main de gérer les publications
indésirables et gérer les autres utilisateurs. Il est nécessairement de s’authentifier
par un email et un mot de passe pour qu’il ait le droit de gérer l’application.

Ses fonctionnalités

 S’authentifier.
Administrateur  Gestion des publications.
 Gestion des utilisateurs.

14
 2.2 Besoins techniques

 La convivialité : L'application doit proposer une interface relativement

simple et facile aux utilisateurs.
 La confidentialité : l’application vise à s'assurer que seules les personnes
autorisées ont le droit d'y accéder.
 L’extensibilité : L’application basée sur un code source ouvert à
l’extension et fermé à la modification ; ce qu’il nous permet d’ajouter
d’autres fonctionnalité ou modifier les fonctionnalités existantes
sans influer sur les autres fonctionnalités existantes.

III. Conception de l’application

3.1 Le langage de modélisation UML

UML (Unified Modeling Language ou «

langage de modélisation unifié ») est un
langage de modélisation graphique. Il est
apparu dans le monde de génie logiciel,
dans le cadre de la « conception orientée
objet ». Couramment utilisé dans les projets
logiciels il peut être appliqué à toutes sortes Figure 2:Logo UML

de systèmes ne se limitant pas au domaine informatique .

3.2 Les Différents Diagrammes d’UML

Un diagramme UML est une représentation graphique, chaque type de

diagrammes possède une structure et un schéma différent. Dans notre conception
de ce projet, nous avons utilisé les diagrammes suivants :

15
  Diagramme de Cas d’Utilisation
 Diagramme de Classes
 Diagramme de Séquences

a. Diagramme de cas d’utilisation

 Définition

Le diagramme de cas d’utilisation sert à identifier les interactions entre le système

et ses acteurs. Les cas d'utilisation et les acteurs dans les diagrammes de cas
d'utilisation décrivent ce que le système fait et comment les acteurs l'utilisent,
mais ne montrent pas comment le système fonctionne en interne.

 Les acteurs et leurs cas d’utilisation

L’utilisateur réalise les fonctions suivantes :

 S’inscrire (s’il n’a pas un compte).

 S’authentifier avec son email et son mot de passe.
 Consulter ses propres publications.
 Consulter les prestations publiées des autres utilisateurs.
 Trier les publications par catégorie (offre, demande).
 Poster, modifier et supprimer ses publications que ça soit des offres ou des
demandes.
 Modifier son profil
 Ajouter une annotation

L’administrateur réalise les fonctions suivantes :

 S’authentifier.
 Gérer l’application.
 Opération CRUD sur les publications.

16
  Opération CRUD sur les utilisateurs
La figure ci-dessous détermine le diagramme de cas d’utilisation (use case) :

Figure 3:Diagramme de cas d’utilisation Client

17
 Figure 4:Diagramme de cas d’utilisation Administrateur

b. Diagramme de classes

 Définition

Le Diagramme de Classes est le plan d’un système, il est utilisé pour afficher les
relations entre les objets et pour décrire ce que ces objets font et les services qu'ils
fournissent.

 Les différentes classes

Une classe représente un groupe d’objets ayant la même structure, c’est à dire les
mêmes attributs et les mêmes opérations. Les différentes classes de notre Projet
sont :

 La classe Utilisateur définit l’utilisateur de l’application. Il peut être un

simple utilisateur qui peut poster ou noter une publication ou un super

18
 utilisateur avec des fonctionnalités d’administration.
 La classe Publication représente tout post d’un utilisateur, il peut avoir
des annotations . Elle porte les informations décrivant une publication.
 La classe Annotation enregistre les impressions effectuées par un
utilisateur qui peut ajouter, modifier ou supprimer une annotation .
 La classe Catégorie a comme but de filtrer les publications par thème
(Offre , Demande )

 Les liens entre les classes

 L’utilisateur peut noter plusieurs publications.
 Une annotation concerne un seul utilisateur.
 L’utilisateur peut noter plusieurs publications.
 L’utilisateur poste plusieurs publications.
 Une ou plusieurs publications appartient à une catégorie
 Une catégorie contient plusieurs publications.

19
 Figure 5:Diagramme des classes

c. Diagramme de Séquences

 Définition

Le diagramme de séquences représente la séquence de messages transmise entre

des objets au cours d'une interaction. Il comprend un groupe d'objets, représentés
par des lignes de vie, et les messages que ces objets échangent lors de l'interaction.

20
 Le Scenario du cas d’utilisation : publier une publication
 L’utilisateur démarre l’application.
 L’utilisateur s’inscrit et saisie ses coordonnées personnelles
 L’application vérifie les cordonnées saisies par l’utilisateur.
 Si les informations sont erronées une alerte de vérification
d’email s’affiche sur la même page.
 Sinon les informations sont bien saisies.
 L’application affiche une notification de confirmation
d’inscription .
 L’application envoie une requête d’enregistrer les coordonnés au
niveau de la base de données (BDD).
 L’utilisateur doit s’authentifier .
 L’application affiche le formulaire d’authentification.
 L’utilisateur saisie son email et son mot de passe .
 Si les coordonnées sont incorrectes une notifications
d’erreurs est affichée .

Figure 6: Diagramme de Séquence pour l’inscription et l’authentification.

21
 Le Scenario du cas d’utilisation : commenter une publication :

 L'utilisateur démarre l’application.

 L’utilisateur s’authentifie avec son login et son mot de passe.
 L’application vérifie les coordonnes saisies par l’utilisateur.
 Si les informations sont erronées une alerte de vérification d’email et
de mot de passe s’affiche sur la même page.
 Sinon les informations sont bien saisies.
 L’utilisateur consulte la liste des publications.
 L’utilisateur ajoute une publication désirée.
 L’administrateur reçois la publication .
 L’administration approuve ou refuse la publication .
 La publication s’affiche automatiquement sur la page d’accueil et visible
même au visiteur sans authentification .

Figure 7: Diagramme de Séquence pour poster une publication.

22
 Conclusion
Nous nous sommes intéressés dans ce chapitre aux principales fonctionnalités de
l'application, et à l’analyse conceptuelle représentée sous forme de trois
diagrammes UML : cas d’utilisation, classes, Séquence. Dans le chapitre suivant
nous allons présenter l’environnement et les outils nécessaires pour la réalisation
de ce projet.

23
 Chapitre 3 : Etude Technique

Introduction

Après avoir présenté le cahier de charge, les fonctionnalités fonctionnelles et

techniques et la conception générale de notre application. Dans ce chapitre nous
allons déterminer les outils de travail qui ont été mis en place pour le
développement du projet.

I. Architecture de l’application
1. Définition d’un Framework

Un Framework de développement (infrastructure logicielle en français) est un

cadre de travail qui désigne un ensemble d'outils et de composants logiciels à la
base d'un logiciel ou d'une application, permettant de créer des applications web
et mobiles. Un Framework propose une bibliothèque de fonctionnalités que les
développeurs utilisent en fonction de leurs besoins.

En développement, l’utilisation d’un Framework permet donc de gagner du

temps, il s’agit d’un standard dans la construction d’un projet web ou mobile.
C’est pour cette raison qu’on a pour habitude de les comparer à une boite à outils.
Un Framework est construit autour d’un langage de programmation : PHP,
Python, JavaScript, etc.

L'objectif du Framework est d’organiser, simplifier et d'uniformiser le travail des

développeurs. Il fonctionne comme un cadre ou un patron. En général, une
infrastructure logicielle est associée spécifiquement à un langage de script ou de
programmation.

24
 1.1 Spring boot

Spring Boot (Figure 7) est un

Framework open source permet
de construire et définir
l’infrastructure d’une
application JAVA. L'objectif deghjn, ;kjhgfhjklkj FIGURE 8 : Logo Spring Boot fvgbhnjhj
Spring Boot n'est pas d'apporter de nouvelles solutions pour les nombreux
problèmes qui ont déjà été résolus, mais plus d'influencer la plateforme en
favorisant une expérience de développement qui simplifie l'utilisation de
technologies déjà existantes

1.2 Flutter/Dart

Flutter est un kit de développement d’interface utilisateur open-Source développé

par Google. Il permet le développement d’applications iOS/Android et utilise Dart
comme langage de programmation.

Dart est un langage de programmation côté client open-Source. Il est facile à

apprendre, stable et permet de créer des applications très performantes

FIGURE 9 : Logo Flutter

1.3 Web Services FRONT

Un Web Service est une application qui permet d'échanger des données avec
d'autres applications web. Même si ces dernières sont construites dans des

25
langages de programmation différents. Parmi les technologies des Web
Services les plus connus on peut citer SOAP, REST.

1.4 API (Application Programming Interface) BACK

Aujourd’hui, on parle d’API Web. Avant, nous parlions de « Web Services ».
C’est là même chose. Si on fait une recherche sur google de « instagram api » ou
« instagram api web » ou « instagram web services », on obtient le même résultat.

Une API web d’un site offre aux développeurs le moyen d'exploiter les données
et les services pour leur propre application.

Cette API, relié à Internet serait donc chargé de faire le lien entre la base de
données et l’application, que ce soit en envoi ou en réception des données.

Figure 3: Consommation des API.

1.5 JSON BACK

JSON (JavaScript Object Notation) est un format léger d'échange de données,
basé sur un sous-ensemble du langage JavaScript. Il est facile à comprendre par
les humains et est aisément généré par des machines.

26
 Figure 11: Logo JSON..

1.6 Architecture de développement : BACK

Lors de la mise en place de notre application, nous nous sommes basés sur des
services web qui fournissent des informations brutes à la plupart des utilisateurs,
en particulier les services web Restfull utilisant Rest (Representational State
Transfer), nous avons suivi les règles suivantes :

 Utilisation des méthodes http comme identifiant des méthodes par

exemple :
 La méthode POST Pour créer une ressource sur le serveur.
 La méthode GET Pour accéder à une ressource.
 La méthode PUT Pour modifier l'état d'une ressource ou pour
la mettre à jour.
 La méthode DELETE Pour annuler ou supprimer une
ressource.

 Identification des ressources par des URI ; par exemple pour accéder aux
10 dernière publications « http://192.168.137.23:8086/api/app/
publications ».
 Les réponses http en format JSON (javascript object notation) comme
représentation des ressources.

27
Et ensuite nous avons consommé cette API REST en React native à l’aide d’une
bibliothèque (Axios), destinée à créer des requêtes HTTP à présentation externe
pour récupérer, ajouter, modifier ou supprimer des données.

Figure 4: Architecture de l'application

II. Outils de développement

2.1 Système de Gestion de la base de données

 MySQL Workbench :

MySQL est un système de gestion de

base de données qui a vu le jour en
1995 sa licence est libre ou
propriétaire. Il fait partie des systèmes
des logiciels de gestion de base données Figure 13 :Logo MYSQL AAZETY

28
les plus utilisés au monde et il fonctionne indifféremment sur tous les systèmes
d'exploitation (Windows, Linux…).

Le principe d'une base de données est d'enregistrer les informations dans

des tables, qui représentent des regroupements de données par sujets (table des
utilisateurs, table des produits…). Les tables sont reliées entre elles par
des relations.

 Postman

Postman est une application créée en 2012, permettant d’appeler/ tester

des API, pour répondre à une problématique de test d'API partageable. C’est un
module complémentaire de Google Chrome, elle est à présent utilisée par plus de
500000 entreprises dans le monde.

Figure 5: Logo Postman.

 Visual Code

Visual Code est un éditeur de code léger,

rapide et développé par Microsoft en
2015, c’était l’un de ces produits open
source et gratuit, et surtout disponible sur
les systèmes d’exploitation Windows,
Linux et MacOs Figure 15 :Logo Visual Studio Code

 IntelliJ IDEA
29
IntelliJ IDEA également appelé « IntelliJ »,
« IDEA » ou « IDJ » est un environnement de
développement intégré (en anglais Integrated
Development Environment - IDE) destiné au
développement de logiciels informatiques
reposant sur la technologie Java. Il est développé
par JetBrains (anciennement « IntelliJ ») et
disponible en deux versions, l'une
communautaire, open source, sous licence Apache 2 et l'autre propriétaire,
protégée par une licence commerciale. Tous deux supportent les langages de
programmation Java, Kotlin, Groovy et Scala.

Figure 6: Logo IntelliJ

 Astah UML

ASTAH UML est un outil de modélisation

UML crée par la compagnie japonaise Change
Version, il fonctionne avec l’environnement
d’exécution java. Ainsi qu’il est parfait pour
ceux qui commencent à créer des diagrammes
UML, est gratuit pour les étudiants. Astah
supporte officiellement les systèmes Windows, kjkqsjk Figure17 :Logo Astah UML mais
mais peut aussi fonctionner sous Linux et MacOs.

Conclusion
Dans ce chapitre nous avons présenté l'environnement et les outils du travail qui
ont été employés pour la réalisation de ce projet.

Dans le prochain chapitre nous allons présenter les imprimés écran décrivant la
réalisation de notre travail.

30
 Chapitre 4 : Réalisation de
l’application

Introduction
Après avoir réalisé l’étude de la conception et présenter l’environnement de
développement de notre application. Dans ce chapitre nous allons montrer le
fonctionnement de chaque page de l’application.

I. Présentation des interfaces

1. Côté Utilisateur
a) Page d’authentification
Exactement spécifié dans le diagramme de cas d'utilisation, l'utilisateur
s'authentifie pour accéder à son propre compte.

L’utilisateur mentionne son mail et son mot de passe, si ces coordonnées sont
bien saisies l'authentification est réalisée avec succès, sinon le message d'erreur
suivant : "votre email ou votre mot de passe est incorrecte" sera affiché sur la
même page.

La page (figure 19) permet aux membres de l’application de s’authentifier et aux

nouveaux membres de créer un compte et remplir le formulaire présenté dans
la figure 20 avant l’authentification.

31
 Figure 18:Page d’authentification

b) Page d’inscription

32
Si l'utilisateur appuie sur le bouton "inscrivez-vous" un formulaire d'inscription
s'affiche, l'utilisateur rempli tous les champs du formulaire pour que
l'inscription sera réussie, et appuie sur le bouton "s'inscrire" pour créer son
propre compte.

Figure 19: Page d’inscription

33
En cas d’erreur une notification s’affiche pour signaler que l’email est déjà utilisé

Figure 20: Notification d’erreur d’un email qui existe déjà

34
Si tous les coordonnées sont correct une notification de confirmation
d’inscription se déclenche .

Figure 21: Notification de confirmation d’inscription

c) Page d’accueil
Le système affiche la page d’accueil de l’application systématiquement même
sans authentification autant que visiteur .

35
La page d’accueil contient une dizaine de publications de différents types (Offre
,Demande).

Cette interface permet à l’utilisateur de filtrer les publications selon son choix et
son besoin, ainsi qu’il peut apprécier, et laisser une annotation sur les
publications d’un autre utilisateur .

Une barre de navigation se déplace au-dessous de la page et permet à

l’utilisateur d’ajouter une publication, consulter ses publications personnelles,
consulter les annotations reçu concernant ses publications ;modifier son profil
ou quitter l’application vers la page d’authentification.

36
 Figure 22: Page d’acceuil

d) Page de publication personnelle

Cette interface (figure 24), permet à l’utilisateur de consulter l’état , de modifier
ou supprimer ses propres publications.

37
 Figure 23: Page de publication personnelle

e) Formulaire de publication
Cette interface , permet d’ajouter une offre ou une demande

38
 Figure 24: Formulaire de publication

f) Page des annotations

Cette interface permet au client de visualiser les annotations reçu sur ses
publications

39
 Figure 25: Interface des annotations

g) Page de profil d’utilisateur

40
Cette interface permet au client de consulter et modifier son profil et faire une
mise à jour de ses coordonnées (Sauf la CIN et son adresse email )

Figure 26: Interface du profil utilisateur

41
 h) Interface pour consulter et noter le profil d’un client
Cette interface permet de consulté un profil à partir de sa publication (Offre
,Demande ) et laisser une annotation ou la mettre à jour .

Figure 27: Interface pour consulter et noter le profil d’un client

2. Coté admin
Cette interface s’affiche quand l’admin de l’application s’authentifie avec son
email et son mot de passe.

Cette interface élabore à l’admin le nombre de publication , des utilisateurs et

les services enregistrer et le total des annotations .

42
 Figure 28: Interface d’acceuil d’administrateur

a) Interface des utilisateurs

Cette interface montre l’ensemble des clients enregistrer avec la possibilité de

supprimer un utilisateur .

43
 Figure 29: Liste des utilisateurs

b) Interface des services

Cette interface montre les services disponibles , l’administrateur peut ajouter

supprimer ou modifier un services .

44
 Figure 30: Interface des services

Conclusion :

Dans ce chapitre nous avons exposé le résultat de développement de notre

application à l’aide des captures d’écran illustrant le fonctionnement de notre
application, c’est le dernier chapitre de ce rapport

45
 Conclusion
En termes de ces 2 mois, nous avons réussi à réaliser une application mobile
consistant en « Réalisation d’un application pour mettre en relation clients et
agents de services ». Il s’agit de mettre en place un système permet aux utilisateurs
de publier des offres et des demandes de services d’une manière bien structurée.

La première phase de ce projet a ciblé la prise de conscience de la problématique

du sujet et par conséquent la définition d’un cadre général du projet ainsi que la
mise en évidence de la méthodologie de travail à suivre.

La phase suivante, a consisté en la définition du cahier des charges dont l’objectif

d’extraire les principaux besoins qui font partie importante du cycle de vie d’un
système d’information, où on a présenté quelques diagrammes permettent de bien
mettre en évidence la structure statique (diagramme de classes) et dynamique
(diagramme de séquence) du système.

La phase finale a consisté en la réalisation de l’application, à l’aide d’une

architecture séparant entre la partie front end de celle de back end. La partie front
end a été développée par Flutter alors que la partie back end a été réalisée par
Spring Boot. La communication entre les deux parties a été réalisée par les service
web de type REST.

Ce travail était une occasion pour enrichir nos connaissances en développement

mobile et en développement back end via des outils qui font la demande actuelle
du marché de travail.

Malheureusement, pris par le temps et le délai court qu’offre le PFE. Le

développement d’autres fonctionnalité telle que les systèmes de recommandation
intelligents, l’hébergement de notre application, et la messagerie, n’ont pas pu être
traités dans le cadre de ce projet. Ces fonctionnalités pourront néanmoins être
ajoutées ultérieurement.

46
 Références
[1] Spring Boot & web services & Flutter
 Craig Walls. Spring in Action 5th Edition covers
spring (November 5, 2018)
 Documentation officielle Spring Boot,
https://spring.io/projects/spring-boot
Youssef SAADI, Cours web service,
https://www.youtube.com/c/youssefsaadi99/videos
 Documentation officielle Flutter , https://docs.flutter.dev/
[2] IntelliJ
 Documentation officielle Expo :
https://www.jetbrains.com/idea/resources/
[3] Langage de Modélisation Unifié (Uml)
 Abdellatif HAIR. Cour UML. Faculté des Sciences et
Techniques B.P. 523, Béni-Mellal, MAROC.
[4] Base de donnée
 Prof Mourad Nachaoui . Cour Initiation aux bases de données.
Faculté des Sciences et Techniques Département d’informatique
Béni Mellal.
 Prof Garmani Hamid . Cour Oracle Faculté des Sciences et
Techniques Département d’Informatique Béni Mellal .

47