République Islamique de Mauritanie Ministère de l’Enseignement Supérieur et de la

Recherche Scientifique Institut Supérieur du numérique

PROJET INTEGRATEUR S5

Thème

Mise en place d’une application mobile

KHIDMA pour la mise en relation entre les
artisans et clients

Réalisé par :
Esma M’hadi 22039
Cheikh Abidine 22084

Mohamed Mahmoud Sidi Echeikh 22034

Ebou Oubeideta Mohamed Vall 22003

Année Universitaire : 2024 – 2025

 Dédicaces

Tout d’abord, Nous tenons à remercier DIEU De

nous avoir donné la force et le courage de
mener à bien ce modeste travail. Nous tenons à
dédier ce travail aux honorables parents.

i
 Remerciements

Nous souhaitons exprimer notre profonde reconnaissance à

toute l’équipe pédagogique et administrative de l’Institut
Supérieur du Numérique pour leur engagement, leur
dévouement et leur professionnalisme tout au long de notre
parcours académique. En fin nous tenons également à
remercier tous nos enseignants pour leur passion et leur
engagement dans l’enseignement, ainsi que pour leur aide et
leurs conseils précieux qui ont façonné notre avenir
académique et professionnel. Nous sommes fiers de faire partie
de cette grande institution et nous vous remercions pour
l’expérience enrichissante que nous avons vécue.

ii
 ‫ملخص‬

‫المشروع المقدم في إطار أطروحة الليسانس يهدف إلى تطوير تطبيق هاتفي محمول يُم ّكن من الربط بين الحرفيين المؤهلين‬
‫‪.‬والزبناء الباحثين عن خدمات محلية متخصصة‬
‫إلنشاء ‪ Django REST Framework‬مع ‪Django‬لتطوير الواجهة األمامية‪ ،‬و ‪ Flutter‬تم تصميم التطبيق باستخدام‬
‫‪.‬الواجهة الخلفية التي تدير قواعد البيانات وتعالج طلبات المستخدمين‬
‫‪.‬لضمان تخزين منظم وآمن للبيانات ‪ MySQL‬تعتمد قاعدة البيانات على‬
‫تصف الوثيقة كذلك الخطوات التفصيلية لتطوير التطبيق‪ ،‬من التحليل والتصميم إلى التنفيذ‪ ،‬مع التركيز على ضمان جودة‬
‫الخدمات وتيسير التواصل بين األطراف‬

‫‪iii‬‬
 Résumé

Le projet présenté dans le cadre du mémoire de licence vise à développer une application mobile permettant de
mettre en relation des artisans qualifiés avec des clients recherchant des services de proximité.
L’interface utilisateur est développée avec Flutter pour assurer une expérience fluide sur Android et iOS, tandis que
le backend est construit avec Django et Django REST Framework pour gérer les données et les requêtes.
La base de données utilisée est MySQL, garantissant une gestion fiable et sécurisée des informations.
Ce document décrit en détail les différentes étapes du projet, de l’analyse à la conception puis à la mise en œuvre,
avec un accent particulier sur la qualité du service et la facilité d’utilisation.

iv
 Abstract

The project presented as part of the bachelor’s thesis aims to develop a mobile application that connects
skilled artisans with clients seeking local services.
The user interface is developed using Flutter to provide a smooth experience on Android , while the
backend is built with Django and Django REST Framework to manage data and requests.
The database used is MySQL, ensuring reliable and secure data management.
This document details the various stages of the project, from analysis and design to implementation, with a
focus on service quality and user-friendliness.

v
 Table des matières

Dédicaces ....................................................................................................................................i
Remerciements ........................................................................................................................ ii
‫ صخ لم‬....................................................................................................................................... iii
Resumé ..................................................................................................................................... iv
Abstract ..................................................................................................................................... v
Liste des figures ...................................................................................................................... vi
Liste des abréviations ............................................................................................................ vii
Introduction générale .............................................................................................................. 1
I. CONTEXTE DU PROJET ................................................................................... 2
I.1 Introduction ..................................................................................................................... 3
I.2 Présentation de projet ...................................................................................................... 3
I.3 Objectifs de l’application................................................................................................. 4
I.4 Problématique................................................................................................................. 4
I.5 Solution proposée ........................................................................................................... 4
I.6 Conclusion ..................................................................................................................... 5
II. ANALYSE ET CONCEPTION ........................................................................... 6
II.1 Introduction .................................................................................................................... 7
II.2 Analyse des besoins........................................................................................................ 7
II.2.1 Les besoins fonctionnels......................................................................................... 7
II.2.2 Les besoins non fonctionnels .................................................................................. 8
II.3 Conception de la base de données ................................................................................... 9
II.3.1 Modèle conceptuel (MCD) ........................................................................ ................ 9
II.3.2 diagramme de cas d’utilisation principaux………………………………………………………………..10
II.4 Conclusion .............................................................................................................. 11
III RÉALISATION ET MISE EN ŒUVRE ................................................. 12
III.1 Introduction ................................................................................................................ 13
III.2 Technologies et outils utilisés ...................................................................................... 13
III.3 Présentation de l’application ........................................................................................ 18
III.4 Conclusion .................................................................................................................. 29
Conclusion générale et perspectives .................................................................................. 30
Biblioghraphie ........................................................................................................................ 31

vi
 Liste des figures 1

Figure 1 MCD ........................................................................................................................................... 9

Figure 2 Diagramme d’utilisation ............................................................................................................. 10
Figure 3 Flutter ...................................................................................................................................... 11
Figure 4 Python...................................................................................................................................... 12
Figure 5 Django ..................................................................................................................................... 13
Figure 6 Mysql ....................................................................................................................................... 15
Figure 7 Vscode ..................................................................................................................................... 16
Figure 8 Postman ................................................................................................................................... 16

Figure 9 Github ...................................................................................................................................... 17

Figure 10 Page Acceuil ......................................................................................................................... 18

Figure 11 Création du compte -client ................................................................................................... 18
Figure 12 Connexion ............................................................................................................................. 18
Figure 13 Acceuil-client ........................................................................................................................ 19
Figure 14 Demande service-client ........................................................................................................ 20
Figure 15 Profile-client ......................................................................................................................... 21
Figure 16 Demande-client ..................................................................................................................... 22
Figure 17 Création du compte -artisan ................................................................................................. 23
Figure 18 Inscription -artisan................................................................................................................ 24

Figure 19 Solde -artisan ........................................................................................................................ 25

Figure 20 Demande-artisan ................................................................................................................... 26

Figure 21 commandes -artisan .............................................................................................................. 25

Figure 22 Recharge-compte-artisan ..................................................................................................... 28

vi
 Liste des abréviations

SupNum : Institut Supérieur du

Numéri
que

vii
 Introduction générale

Le présent projet représente une étape clé du programme deTroiseme année de licence en
informatique. Il se concentre sur la conception et le développement d’une application mobile
innovante, baptisée KHIDMA, dédiée à la mise en relation entre artisans qualifiés et clients
particuliers.

L’application vise à répondre aux besoins croissants des citoyens en matière de services
domestiques et techniques (plomberie, électricité, etc.), tout en créant un espace de visibilité et
d’opportunité pour les artisans, notamment les jeunes diplômés de la formation professionnelle.
KHIDMA propose ainsi un système simple, sécurisé et géolocalisé, permettant aux utilisateurs
de rechercher un service, de consulter les profils disponibles et de contacter directement un
prestataire.

Ce projet a été réalisé en équipe, permettant la collaboration autour de l’analyse, de la

conception et du développement. La répartition claire des tâches et la coordination continue
entre les membres de l’équipe ont été des facteurs essentiels pour mener à bien ce travail.

L’application a été développée à l’aide de technologies modernes et performantes :

 Flutter pour la partie mobile (frontend), garantissant une interface fluide,

multiplateforme et ergonomique.
 Django, avec le framework Django REST, pour le backend, assurant une API robuste,
sécurisée et évolutive.
 MYSQL comme base de données relationnelle pour la gestion des utilisateurs,
commandes et services.

Le présent rapport s’articule autour de trois chapitres principaux :

 Chapitre I – Contexte du projet : une introduction aux objectifs, à la problématique

rencontrée et à la solution proposée par l’application.
 Chapitre II – Analyse et conception : une étude détaillée des besoins fonctionnels et
non-fonctionnels, accompagnée de la modélisation de la base de données (MCD, MLD)
et des cas d’utilisation.
 Chapitre III – Mise en œuvre : une présentation des outils, technologies utilisés, des
interfaces développées et des principales fonctionnalités intégrées dans l’application.

Ce projet représente non seulement une application utile dans un contexte réel, mais aussi une
opportunité d’appliquer concrètement les compétences acquises en programmation, modélisation
et gestion de projet.

1
_______________________________________________________

I. Contexte du projet

_______________________________

2
 I.1 Introduction
Dans ce chapitre, nous vous présentons notre application et le contexte général de
notre projet, ainsi que son objectif principal. Nous commençons par expliquer en quoi
consiste cette application et les raisons qui nous ont poussés à la développer. Ensuite, nous
vous présentons le contexte dans lequel le projet s'inscrit, en mettant en évidence les
enjeux et les défis que nous devons relever. Enfin, nous définissons l'objectif principal que
nous cherchons à atteindre tout au long de ce projet, en expliquant les résultats que nous
espérons obtenir grâce à cette application.

I.3 Présentation du projet

Le projet KHIDMA consiste à concevoir et développer une application mobile destinée à

faciliter la mise en relation entre artisans qualifiés et clients particuliers recherchant des
prestations de services dans leur zone géographique.

L’objectif de cette plateforme est double :

 D’une part, offrir aux artisans, souvent issus de la formation professionnelle, un

canal numérique pour présenter leurs services, développer leur activité, et atteindre
une clientèle plus large.
 D’autre part, permettre aux clients, grâce à une interface simple et intuitive, de
trouver rapidement un prestataire de confiance, selon le type de service souhaité
(plomberie, électricité, coiffure, ménage, etc.), leur localisation, et les évaluations
laissées par d’autres utilisateurs.

3
 I.4 Objectif du projet

L’objectif du projet KHIDMA est de développer une application mobile intuitive qui facilite
la mise en relation entre artisans qualifiés et clients à la recherche de services de proximité,
tout en garantissant fiabilité, accessibilité et valorisation des compétences artisanales à
travers une plateforme numérique moderne.
Le projet KHIDMA vise à :
- Mettre en place une application mobile intuitive et sécurisée.
- Offrir un canal numérique de visibilité pour les artisans.
- Faciliter la recherche de services fiables pour les clients.
- Favoriser l’emploi des jeunes diplômés issus de la formation professionnelle.

I.5 Problématique
Comment concevoir une solution numérique locale, simple et sécurisée, permettant de
connecter efficacement artisans et clients, tout en valorisant les compétences artisanales et en
garantissant la satisfaction des deux parties ?

I.6 Solution proposée

• KHIDMA est une application mobile intuitive qui permet de connecter
efficacement artisans et clients à travers une interface simple, sécurisée et
géolocalisée. Elle offre aux artisans une vitrine numérique pour valoriser leurs
compétences et aux clients un accès rapide à des services de proximité fiables. La
plateforme repose sur un modèle économique basé sur des crédits pour les artisans
et intègre des fonctionnalités clés telles que l’évaluation, le filtrage par zone, et la
validation des profils pour garantir confiance et professionnalisme.sélectionner les
sujets qui les intéressent et les soumettre pour approbation.

4
 I.7 Conclusion

Ce premier chapitre nous a permis de poser les bases du projet KHIDMA en définissant
clairement le besoin auquel répond l’application, le contexte social et technologique, ainsi
que les objectifs visés.

Nous avons identifié une problématique réelle : la difficulté d’accès à des artisans fiables
pour les citoyens, et le manque de visibilité pour ces derniers. En réponse, nous avons
proposé une solution numérique locale : une application mobile moderne et accessible,
destinée à faciliter la mise en relation entre clients et prestataires, tout en garantissant la
sécurité, la transparence et la satisfaction des deux parties.

5
_____________________________________________________

II. Analyse et Conception

__________________________________

6
 II.1 Introduction
Dans cette partie du projet, nous présenterons de manière concise notre approche
d'analyse des besoins et de conception du modèle de base de données pour notre
application KHIDMA

II.2 Analyse des besoins

L’analyse de ce projet nous a permis l’identification des différents besoins auxquels
doit répondre notre plateforme. Ces besoins dégagés sont classés en deux catégories, à
savoir les besoins fonctionnels et les besoins non fonctionnels.

II.2.1 Les besoins fonctionnels

Les besoins fonctionnels définissent les fonctionnalités principales que le système doit
assurer. Pour KHIDMA, ces besoins sont :

👤 Utilisateur (client/artisan) :

 S’inscrire et se connecter à l’application

 Modifier ses informations personnelles
 Accéder à une interface adaptée à son rôle (client ou artisan)

📱 Côté client :

 Rechercher un artisan par service et localisation

 Consulter les profils des artisans (nom, service, zone, photo…)
 Voir les évaluations laissées par d'autres utilisateurs
 Envoyer une demande de prestation à un artisan
 Évaluer un service après son exécution

🛠 Côté artisan :

 Créer un profil complet (nom, service, photo, carte d’identité…)

 Voir les demandes de prestations reçues
 Accepter ou refuser une demande
 Gérer son portefeuille de crédits
 Voir l’historique des prestations

7
 II.2.2 Les besoins non fonctionnels

Les besoins non fonctionnels décrivent les qualités attendues de l’application, sans parler
directement de ses fonctions.

1. Sécurité

 Protéger les données personnelles des utilisateurs (nom, numéro, carte d’identité…)
 Utiliser des mots de passe sécurisés

2. Simplicité d’utilisation
 Interface facile à utiliser, même pour les personnes non habituées aux applications
 Boutons et pages claires, avec peu d’étapes pour chaque action

3. Rapidité
 L’application doit répondre vite, sans longs temps de chargement
 Les recherches et les clics doivent être immédiats

8
 II.3 Conception de la base de données

II.3.1 Modèle conceptuel de données (MCD)

Le modèle conceptuel de données (MCD) représente les entités principales manipulées par
l’application KHIDMA, ainsi que les relations entre elles.
Il a pour but de modéliser l’organisation des données de manière claire et indépendante de
tout système de gestion de base de données.

Dans le cas de KHIDMA, nous avons identifié les entités suivantes :

 Utilisateur : représente toute personne ayant accès à l’application (client ou artisan).

 Artisan : spécialisé dans un service, lié à un secteur géographique et à un utilisateur.
 Service : type de prestation (plomberie, électricité, etc.).
 Secteur : zone géographique avec longitude et latitude.
 Order : une commande passée par un client vers un artisan.
 Payement : suivi des paiements liés aux prestations.

Les relations cardinalisées entre ces entités permettent de représenter les dépendances entre
un artisan et son utilisateur, son secteur d’intervention, ainsi que les paiements et commandes
qu’il reçoit.

FIGURE 1

9
 II.3.2 diagramme de cas d’utilisation principaux

Le diagramme de cas d’utilisation décrit les principales interactions entre les

différents utilisateurs du système KHIDMA et les fonctionnalités qu’ils
peuvent exécuter.

On distingue trois types d’acteurs :

 Client : il peut créer un compte, se connecter, rechercher un service,

envoyer une demande à un artisan, suivre la commande.
 Artisan : il s’inscrit, attend la validation, se connecte, accepte/réalise
des commandes, et recharge son compte.
 Administrateur : il valide les comptes artisans, gère les services, les
secteurs, les utilisateurs, et consulte le tableau de bord.

Ce diagramme permet d’avoir une vue globale sur les fonctionnalités

accessibles à chaque profil.

FIGURE 2

10
 II.4 Conclusion
En conclusion, ce chapitre consiste à développer une application mobile permettant de gérer
de manière efficace et centralisée tous les aspects liés à la mise en relation entre artisans et
clients.
À partir de l’analyse des besoins fonctionnels et non fonctionnels, nous avons identifié les
exigences du système et les attentes des utilisateurs.
Sur cette base, nous avons conçu une architecture logicielle claire et un modèle de base de
données structuré, permettant d'assurer une communication fluide entre les différentes
entités de l'application, et de garantir un fonctionnement optimal du système.

11
_______________________________________________________

III. Mise en place

__________________________

12
 III.1 Introduction

Après avoir défini les besoins fonctionnels et conçu la base de données de l’application
KHIDMA, l’étape suivante consiste à passer à sa mise en œuvre technique. Cette phase
correspond à la réalisation concrète du projet à travers le développement mobile et serveur.

L’implémentation de l’application KHIDMA nécessite l’utilisation de technologies

modernes capables de garantir à la fois performance, sécurité et accessibilité
multiplateforme. Nous avons donc sélectionné un ensemble cohérent d’outils pour faciliter
le développement, assurer une bonne communication entre les différentes parties du système,
et garantir une expérience utilisateur fluide.

Dans ce chapitre, nous présentons :

 Les technologies utilisées pour le frontend (Flutter), le backend (Django), et la base

de données (MySQL)
 Les outils employés pour le développement, les tests et la gestion du code (Postman,
GitHub, VS Code)
 Les interfaces principales de l’application côté client, artisan

Cette étape permet de concrétiser le projet en traduisant la conception théorique en une

application fonctionnelle et prête à être utilisée.

III.2 Outils et Technologies utilisées

Le développement de l’application KHIDMA repose sur un ensemble de technologies

modernes, choisies pour leur efficacité, leur compatibilité mobile, et leur facilité de mise en
œuvre. Ces outils couvrent le frontend, le backend, la base de données, ainsi que les outils
de test et de développement.

13
📱 Frontend (Côté client – mobile)

• Flutter

Flutter est un framework open-source développé par Google, qui permet de créer des
applications mobiles multiplateformes (Android et iOS) à partir d’un seul code source. Il
offre des performances élevées, une interface fluide et un rendu natif. Grâce à ses widgets
personnalisables, Flutter permet de concevoir des interfaces modernes, intuitives et réactives,
adaptées à tous les types d’utilisateurs.

FIGURE 3

🔙 Backend (Côté serveur)

• Python

Python est un langage de programmation clair, lisible et puissant, très utilisé dans le
développement web et l’intelligence artificielle. Sa syntaxe simple permet de développer
rapidement des applications robustes et évolutives.

FIGURE 4

14
• Django

Django est un framework web Python permettant de créer des applications web sécurisées et
bien structurées. Dans le projet KHIDMA, Django est utilisé avec Django REST
Framework (DRF) pour construire une API RESTful qui assure la communication entre le
frontend Flutter et la base de données.

FIGURE 5

• MySQL

MySQL est un système de gestion de base de données relationnelle (SGBDR) très

populaire, utilisé pour stocker et organiser les données : utilisateurs, artisans, services,
commandes, évaluations, etc. Il est fiable, performant et bien intégré à Django.

FIGURE 6

15
⚙️ Outils de développement et de test

• Visual Studio Code (VS Code)

VS Code est un éditeur de code source moderne, utilisé pour écrire le code backend en
Python et le code Flutter pour le frontend. Il offre des fonctionnalités utiles telles que la
coloration syntaxique, l’auto-complétion, le débogage intégré et une large bibliothèque
d’extensions.

FIGURE 7

• Postman

Postman est un outil utilisé pour tester les API REST développées avec Django. Il permet
d’envoyer des requêtes HTTP (GET, POST, PUT, DELETE) et de vérifier les réponses du
serveur afin de s’assurer que la communication entre le frontend et le backend est correcte.

FIGURE 8

16
• GitHub

GitHub est une plateforme de gestion de version utilisée pour sauvegarder, collaborer et
suivre l’évolution du projet. Elle permet aussi de travailler en équipe en toute sécurité,
d’éviter la perte de code et de maintenir une organisation claire du dépôt.

Figure 9

17
 III.3 Présentation de l’application

L'application présentée est une plateforme mobile destinée à la gestion et à

l'utilisation des services artisanaux.

📱 Côté client :

La première image montre le formulaire d'inscription pour un client , avec des champs clairs et accessibles
pour saisir le prénom, nom, téléphone, mot de passe et confirmation du mot de passe
La dexiéme montre la page d’acceuil de l’application

FIGURE 11 FIGURE 10

18
La première présente la page login

Cette interface présente un moteur de recherche simple en haut, permettant à

l'utilisateur de rechercher un service spécifique.

FIGURE 12 FIGURE 13

19
Cette page affiche les demandes de services disponibles, avec un filtre en haut permettant de
sélectionner différentes catégories. Lorsqu'aucune demande n'est trouvée, un message clair
"Aucune demande trouvée" s'affiche avec un pictogramme illustrant l'absence de résultats,
pour informer l'utilisateur.

FIGURE 14

20

Page Profil utilisateur :

L'écran profil affiche les informations principales de l'utilisateur connecté, incluant son nom
complet et son rôle (exemple : Client). Il contient également des paramètres pour modifier la
langue (français ou arabe) ainsi que ses informations personnelles telles que le
numéro de téléphone. Un bouton rouge permet la déconnexion sécurisée de
l'application.

FIGURE 15

21
 Cette page permet à l'utilisateur de confirmer le service choisi (ici « plombier »)
avant d'envoyer une demande de service via le bouton en bas. L'interface est
simple et claire, avec une hiérarchie visuelle nette. Le bouton d'envoi en bas
facilite l'action principale.

FIGURE 16

22
🛠 Côté artisan :

La première image montre le formulaire d'inscription pour un client , avec des champs clairs et
accessibles pour saisir le prénom, nom, téléphone, mot de passe et confirmation du mot de passe

Figure 17

23
Cet écran présente une interface utilisateur destinée à la gestion des informations
spécifiques à un artisan dans l'application. La structure est claire et organisée en
sections déroulantes permettant une saisie facile et structurée des données.

FIGURE 18

24
cette interface sert à informer l'utilisateur sur l'état de son compte, son solde, et
l'informer de la nécessité d'activer son compte pour pouvoir utiliser pleinement
les fonctionnalités.

FIGURE 19

25
Elle affiche un solde actuel à zéro et propose un bouton pour recharger le compte. En dessous,
elle informe que aucune commande n’est disponible à proximité, mais invite à consulter les
nouvelles commandes ultérieurement

FIGURE 20

26
Cette page "Commandes" montre l’historique des commandes complétées par
l’utilisateur.

FIGURE 21

27
Cette page "Recharger mon compte" permet à l’utilisateur d’effectuer une recharge via
BPay.
Elle présente un formulaire simple avec le numéro de téléphone, le montant et un code, ainsi
qu’un bouton pour envoyer la demande de recharge. Le code commerçant est indiqué pour
référence.

FIGURE 22

28
III.4 Conclusion

En conclusion, ce chapitre nous a permis d’avoir une vision globale des différents
aspects du projet, des technologies utilisées et des outils de développement impliqués. De
plus nous avons brièvement présenté les interfaces de l’application, qui ont été développées
en utilis2ant les technologies et Framework mentionnés précédemment.

29
 Conclusion générale et perspectives

❖
Conclusion :

Ce projet nous a offert une excellente opportunité de mettre en pratique et d’approfondir nos
compétences en développement d’applications mobiles et en gestion de projet. Grâce à
l’utilisation efficace et créative des ressources disponibles, nous avons pu concevoir et
réaliser une application innovante, KHIDMA, répondant aux besoins concrets de mise en
relation entre artisans et clients.

Ce travail nous a également permis de renforcer notre esprit d’équipe, d’améliorer notre
communication et de développer notre capacité à prendre des décisions réfléchies. Nous
avons appris à faire preuve de flexibilité face aux défis rencontrés, tout en gardant un objectif
clair et ambitieux.

❖
Perspectives :

À l’avenir, nous envisageons plusieurs axes d’amélioration pour l’application KHIDMA afin
d’enrichir l’expérience utilisateur et de renforcer sa performance :

 Intégration d’un système de paiement en ligne sécurisé, facilitant la gestion

financière entre clients et artisans.
 Développement d’une version web complémentaire pour toucher un plus large public.
 Ajout de fonctionnalités avancées comme un chat en temps réel entre clients et
artisans.
 Mise en place d’un système de notification intelligente pour améliorer le suivi des
commandes.

30
 Bibliographie

Références

1] https://flutter.dev/.

2] https://docs.djangoproject.com/en/5.2/intro/

31