Filière Sience Mathématrique et Informatique

Projet Tutoré
Semestre S6

Mémoire

Intitulé : RZ Delivering
Présenté par:

AYOU Elmahdi
MOUHSSINE Youssef
Encadrant : Pr. EL FAR Mohamed

Soutenu le : Lundi 05 juillet 2021

Jury : Examinateur 1 : PR. EL MOHAJIR Mohammed

Examinateur 2 : PR. LAMRINI Mohamed

Encadrant : PR. EL FAR Mohamed

Année Universitaire : 2020/2021

1
2
AVANT TOUT, NOUS TENONS à REMERCIER TOUTE PERSONNE QUI
NOUS A AIDÉ à LA RÉALISATION DU PROJET ET DE CE RAPPORT AU
LONG DE CES DEUX
DERNIERS MOIS DU PRES OU DE
LOIN.

PARTICULIEREMENT, NOUS ADRESSONS NOS REMERCIEMENTS à

NOTRE PROFESSEUR MR ELFAR MOHAMED
QUI N’A PAS CESSÉ DE NOUS ENCOURAGER
PENDANT LA DURÉE DU PROJET, ET
NOUS LE REMERCIONS POUR SON ENCADREMENT,
POUR SA MODESTIE,
POUR SES CONSEILS ET SON SOUTIENS.

FINALEMENT,
NOUS TENONS à REMERCIER L’ENSEMBLE DU CORPS PROFESSORAL
DU DÉPARTEMENT INFORMATIQUE SPÉCIALEMENT
A NOS PROFESSEURS ET MEMBRES DES JURES PRÉSENT QUI NOUS
FONT L’HONNEUR D’EXAMINER NOTRE TRAVAIL.

3
 Ce projet est réalisé sous la demande de la société RZ business
sous forme d’une application Mobile Géographique (Client /
Vendeur) et une interface web.

Cette application est destinée d’un côté pour ses vendeurs

qui travaillent dans des trajets spécifiques afin de faciliter leurs
travails, et pour l’autre côté aux clients qui veulent passer des
demandes et des réservations depuis leurs maisons et avoir une
livraison à domicile , et finalement une interface web gérable par
le gestionnaire de l’application, afin d’ajouter, modifier ou
supprimer : des vendeurs, produits, dépots…, et réaffecter les
trajets aux vendeurs de l’entreprise, ainsi d’autres fonctionnalités.

Cette étude traite en particulier deux points principaux qui

rassemble de un le client et de deux les vendeurs des services

Pour tout ça, une conception très détaillée sera obligatoire

pour le bon fonctionnement du projet, une conception réalisée
d’après les acquis du cours de modélisation UML.

4
 T he Project carries out at the request of the company RZ

business aims to set up a geographic mobile application with the

intension of creating a delivery system.

On one hand, this application will allow visitors to have more

information on our products and customers to enter their
reservation requests.

In addition, this application will allow staff to better manage

their work, and the most important thing is to deliver the product
as soon as possible by following the path shown in the
application. They can validate or refute the delivery of the
product in the application.

This study deals in particular with two main points which bring
together the client and service providers

For all this, a very detailed design will be mandatory for the
proper functioning of the project, a design carried out according
to the knowledgeof the UML modeling course.

5
LISTE DES FIGURES................................................................................................................................................. 8
LISTE DES TABLEAUX ........................................................................................................................................... 10
INTRODUCTION GENERALE .................................................................................................................................. 11
CHAPITRE 1 : ANALYSE ET ETUDE DE CAHIER DES CHARGES .................................................................................. 12

I. INTRODUCTION .................................................................................................................................................... 12
II. ÉTUDE DE CAHIER DES CHARGES .............................................................................................................................. 12
II.1. Problématique ....................................................................................................................................... 12
II.2. Les objectifs ........................................................................................................................................... 12
II.3. Étude de faisabilité ................................................................................................................................ 12
II.4. Nomination d’équipe de travail ............................................................................................................. 13
II.5. La solution proposée .............................................................................................................................. 13
III. SPECIFICATION DES BESOINS ................................................................................................................................... 14
III.1. Spécification des besoins fonctionnels ................................................................................................... 14
III.2. Spécification des besoins non fonctionnels ............................................................................................ 15
III.3. Avantages de notre solution .................................................................................................................. 15

CHAPITRE II. CONCEPTION ET MODELISATION............................................................................................... 18

I. INTRODUCTION .................................................................................................................................................... 18
II. PRESENTATION UML ............................................................................................................................................ 18
III. LES ACTEURS : ..................................................................................................................................................... 19
IV. DIAGRAMME DE CAS D’UTILISATION ......................................................................................................................... 19
V. DIAGRAMME DE CLASS .......................................................................................................................................... 27
VI. DIAGRAMMES DE SEQUENCE :................................................................................................................................. 28
VII. CONCLUSION : ................................................................................................................................................ 32
CHAPITRE III. LA TECHNOLOGIE UTILISEE ET REALISATION .............................................................................. 33
I. INTRODUCTION : .................................................................................................................................................. 33
II. ENVIRONNEMENT DE TRAVAIL : ............................................................................................................................... 33
II.1. Environnement logiciel .......................................................................................................................... 33
II.1.a. Environnement de développement ................................................................................................................... 33
II.1.b. Système de gestion de base de données ........................................................................................................... 34
II.1.c. Logiciel de retouche d'image ............................................................................................................................ 34
II.1.d. Logiciel de modélisation .................................................................................................................................... 34
II.2. CHOIX TECHNIQUE ................................................................................................................................. 35
II.2.a. Les langages de programmation ........................................................................................................................ 35
II.2.b. Les langages de description ............................................................................................................................... 36
II.3. L’architecture de l’application Android .................................................................................................. 37
II.4. Architecture MVC de l’application web ................................................................................................. 39
II.5. La base de données ................................................................................................................................ 40
III. LES INTERFACES GRAPHIQUES.................................................................................................................................. 41
III.1. L’application Client ............................................................................................................................... 42
III.1.a. L’inscription et l’Authentification....................................................................................................................... 43

6
 III.1.b. Demander .......................................................................................................................................................... 45
III.2. L’application Vendeur ............................................................................................................................ 48
III.2.a. Authentification ................................................................................................................................................. 49
III.3. Interface web pour le gestionnaire ........................................................................................................ 51
III.3.a. Gestion des vendeurs......................................................................................................................................... 54
III.3.b. Gestion des dépôts ............................................................................................................................................ 57
III.3.c. Gestion de produits............................................................................................................................................ 58
IV. CONCLUSION ....................................................................................................................................................... 60

CONCLUSION GENERALE ...................................................................................................................................... 61

WEBOGRAPHIE.................................................................................................................................................... 62

7
 Liste des figures

FIGURE 1:DIAGRAMME DE CAS D’UTILISATION ---------------------------------------------------------------------------------------------------- 19

FIGURE 2:CAS D’UTILISATION « CREATION DE COMPTE CLIENT » --------------------------------------------------------------------------- 20
FIGURE 3:CAS D’UTILISATION « CONNEXION » -------------------------------------------------------------------------------------------------- 21
FIGURE 4:CAS D’UTILISATION « DÉTAILS DE VENDEUR » ------------------------------------------------------------------------------------- 22
FIGURE 5:CAS D’UTILISATION « DÉTAILS DE CLIENT » ---------------------------------------------------------------------------------------- 23
FIGURE 6:CAS D’UTILISATION « AJOUTER UNE DEMANDE » ---------------------------------------------------------------------------------- 24
FIGURE 7:CAS D’UTILISATION « CONFIRMATION PAR CLIENT »------------------------------------------------------------------------------ 25
FIGURE 8:CAS D’UTILISATION « VOIR LA CARTE »---------------------------------------------------------------------------------------------- 26
FIGURE 9:DIAGRAMME DE CLASS ------------------------------------------------------------------------------------------------------------------ 27
FIGURE 10:SEQUENCE DE LA « CRÉATION DE COMPTE CLIENT » --------------------------------------------------------------------------- 28
FIGURE 11:SEQUENCE DE LA « CONNEXION » -------------------------------------------------------------------------------------------------- 29
FIGURE 12:SEQUENCE DE LA «DÉTAILS VENDEUR» ------------------------------------------------------------------------------------------- 30
FIGURE 13:SEQUENCE DE LA « DEMANDE CLIENT » ------------------------------------------------------------------------------------------- 31
FIGURE 14:SÉQUENCE DE LA « L’AFFICHAGE DE LA CARTE » ----------------------------------------------------------------------------- 32
FIGURE 15:ARCHITECTURE CLIENT/SERVEUR ----------------------------------------------------------------------------------------------------- 37
FIGURE 16:ARCHITECTURE MVC ------------------------------------------------------------------------------------------------------------------ 39
FIGURE 17:LA BASE DE DONNEES ------------------------------------------------------------------------------------------------------------------ 40
FIGURE 18: WELCOME INTERFACE ---------------------------------------------------------------------------------------------------------------- 43
FIGURE 19: INTERFACE DE LOGIN ------------------------------------------------------------------------------------------------------------------ 43
FIGURE 20: INTERFACE D’INSCRIPTION ------------------------------------------------------------------------------------------------------------ 44
FIGURE 21:INTERFACE PROFILE -------------------------------------------------------------------------------------------------------------------- 44
FIGURE 22:INTERFACE D’ACCUEIL ------------------------------------------------------------------------------------------------------------------ 45
FIGURE 23:INTERFACE DEMANDE ----------------------------------------------------------------------------------------------------------------- 46
FIGURE 24:INTERFACE DEMANDE(SUITE) ---------------------------------------------------------------------------------------------------------- 47
FIGURE 25:INTERFACE LOGIN ---------------------------------------------------------------------------------------------------------------------- 49
FIGURE 26:INTERFACE D’AUTHENTIFICATION------------------------------------------------------------------------------------------------------ 49
FIGURE 27:INTERFACE DE MENU PRINCIPALE ------------------------------------------------------------------------------------------------------ 50
FIGURE 28:INTERFACE D’ACCEUIL ------------------------------------------------------------------------------------------------------------------ 50
FIGURE 29: LES INTERFACES DES DÉTAILS D’UNE COMMANDE ------------------------------------------------------------------------------------ 51
FIGURE 30:PAGE D’AUTHENTIFICATION ---------------------------------------------------------------------------------------------------------- 53
FIGURE 31:PAGE D’ACCUEILLE --------------------------------------------------------------------------------------------------------------------- 53
FIGURE 32:PAGE DES VENDEURS ------------------------------------------------------------------------------------------------------------------ 54
FIGURE 33:PAGE DE DÉTAILS D’UN VENDEUR ----------------------------------------------------------------------------------------------------- 54
FIGURE 34:PAGE DES PRODUITS ------------------------------------------------------------------------------------------------------------------- 55
FIGURE 35:FORMULE D’AJOUT D’UN VENDEUR --------------------------------------------------------------------------------------------------- 56
FIGURE 36:RECHERCHER UN VENDEUR ------------------------------------------------------------------------------------------------------------ 57
FIGURE 37:PAGE DES DÉPÔTS DISPONIBLES ------------------------------------------------------------------------------------------------------- 57
FIGURE 38:FORMULE D’AJOUT D’UN DÉPÔT ------------------------------------------------------------------------------------------------------ 58
FIGURE 39:PAGE DES PRODUITS ------------------------------------------------------------------------------------------------------------------- 58
FIGURE 40:FORMULE D’AJOUT D’UN PRODUIT ---------------------------------------------------------------------------------------------------- 59
FIGURE 41:RECHERCHER UN PRODUIT ------------------------------------------------------------------------------------------------------------- 60
FIGURE 42:FORMULE DE MODIFIER UN PRODUIT ------------------------------------------------------------------------------------------------- 60

8
9
 Liste des tableaux

TABLEAU 1 : CREATION DE COMPTE CLIENT ________________________________________________________________ 20

TABLEAU 2 : CONNEXION DES UTILISATEURS _______________________________________________________________ 21
TABLEAU 3 : DETAILS DE VENDEUR _____________________________________________________________________ 22
TABLEAU 4: DETAILS DE CLIENT _______________________________________________________________________ 23
TABLEAU 5: CREATION DEMANDE ______________________________________________________________________ 24
TABLEAU 6 : CONFIRMATION PAR CLIENT _________________________________________________________________ 25
TABLEAU 7 : VOIR LA CARTE __________________________________________________________________________ 26

10
 Introduction Générale

Vous l’avez probablement remarqué si vous prenez le temps d’observer ce qui se passe
autour de vous, une nouvelle génération de consommateurs adore naviguer sur leurs
appareils mobiles. Que ce soit pour magasiner, consulter une source d’information ou
simplement pour discuter avec des amis, les applications mobiles prennent de plus en plus
de place dans nos vies. Si la tendance se maintient, les applications mobiles deviendront le
meilleur moyen afin de rejoindre une clientèle grandissante.

Maintenant des petites et grandes entreprises veulent profiter de cette tendance et mettre
en disposition de leurs clients des applications qui les offrent certains services selon le type
de l’entreprise, afin de satisfaire les clients, et augmenter le chiffre d’affaire.

Parmi ces services on trouve le service de livraison. Le client, grâce à son smartphone,
sa tablette peut choisir et commander le produit qu’il veut et le vendeur, engagé avec
l’entreprise, va le livrer la commande à la maison.

Dans ce contexte vienne l’importance de notre projet intitulé RZ Delivering, qui a pour

le but de réaliser une application client/serveur avec une interface web simple pour la

gestion de différents composants, afin de mettre en place un service de livraison pour

l’entreprise RZ Business, Le présent rapport synthétise tout le travail que nous avons

effectué, il est composé de :

I. Chapitre 1 : présente le contexte général du projet, la description du projet, la

problématique.

II. Chapitre 2 : concerne l’analyse et la conception, dans laquelle on présente la

méthode de modélisation et les différents diagrammes.

III. Chapitre 3 : expose l’environnement matériel et logiciel utilisé et le résultat

final de l’application

11
Chapitre 1 : Analyse et étude de cahier des charges

I. Introduction
Ce chapitre introduit le contexte général du projet. On va présenter le projet, la
problématique et la planification du projet.

II. Étude de cahier des charges

II.1. Problématique
Le service de livraison devient un outil très connu par les entreprises pour gagner des
nouveaux clients, facilite la manière de vente et augmenter le chiffre d’affaire, alors c’est un
élément crucial de la réussite de l'entreprise.

Alors qu’il est le meilleur procédé pour livrer les achats?

II.2. Les objectifs

RZ Business demande une application SMART pour la Gestion des vendeurs, et
Application Client/Serveur, le client est une application SMART géographique et le serveur
contient la base de données Centralisée. L’application Smart permette de :

Gérer les quantités stockées chez chaque vendeur.

Savoir s’il y a une rupture de stock ou non chez un vendeur, dans le cas d’une rupture
l’application informe le vendeur d’alimenter son stock dans le plus proche dépôt.

Informer le vendeur par la position des plus proches clients potentiel

Valider le client ayant un code de demande.

Enregistrer le client, sa position et les quantités achetées

II.3. Étude de faisabilité

D’après l’analyse de cahier de charge et les différentes réunions avec le maitre d’ouvrage
MOA, nous sortons par deux besoins afin de réaliser ce projet : le 1er est matériel et le

12
 Chapitre I

deuxième est logiciel. Côté matériel, l’application a besoin d’un serveur dans lequel se
trouve une base de données contient toutes les informations et un ordinateur. Coté
développement, on a besoin des logiciels pour développer l’application mobile, et les scripts
de communications avec le serveur.

Donc l’application demandée est faisable, mais avec des petites modifications accordées
par le MOA.

D’une part le vendeur n’a pas besoin de choisir un trajet car les trajets sont affectés
automatiquement et d’une manière aléatoire aux vendeurs, avec un changement de l’ordre
d’affectation quotidienne.

II.4. Nomination d’équipe de travail

Pour le but de réaliser ce projet, et après une discussion entre l’équipe de travail, on a
décidé de travailler ensemble et de se collaborer dans les différents taches du projet en
donnant le rôle de CHEF pour un entre nous dans chaque grande phase, pour éviter tous type
de conflit.

II.5. La solution proposée

Notre solution consiste á réaliser deux applications mobiles Client et Vendeur et une
interface web pour gérer les vendeurs, produits … :

Application Client : destinée pour les clients de l’entreprise, á partir de quelle le client
peut demander un produit d’une manière moderne chaque jour.

Application Vendeur : destinée à chaque vendeur de l’entreprise, avec laquelle il sait

les demandes á livrées, en visualisant la position exacte de chaque demande ainsi que la
position de dépôt s’il veut charger son stock.

Interface web : pour le gestionnaire de l’entreprise, il gère avec cette interface la plupart
des composants de ce système (gestion des vendeurs, dépôts, produits).

13
 Chapitre I

III. Spécification des besoins

La spécification de besoins constitue la phase de départ de toute application à développer
dans laquelle nous allons identifier les besoins de notre application. Nous distinguons des
besoins fonctionnels qui présentent les fonctionnalités attendues de notre application et les
besoins non fonctionnels pour éviter le développement d’une application non satisfaisante.

III.1. Spécification des besoins fonctionnels

Dans cette partie nous désignons les différents services offerts par notre projet :

Application Client :

L’authentification de client.

Création de compte client.

Consultation des produits.

Demande d’un produit.

Visualisation des produits déjà demandés.

Application Vendeur :

L’authentification de vendeur.

Consultation de stock.

Visualisations des demandes d’aujourd’hui.

Visualisation l’ensemble des positions des demandes dans la carte.

Interface web :

L’authentification de gestionnaire.

Gestion des vendeurs.

Gestion des dépôts.

Gestion des produits.

14
 Chapitre I

III.2. Spécification des besoins non fonctionnels

Les besoins non fonctionnels décrivent toutes les contraintes techniques, ergonomiques
et esthétiques auxquelles est soumis le système pour sa réalisation et pour son bon
fonctionnement. Et ce qui concerne nos applications, nous avons dégagé les besoins
suivants:

La disponibilité : l’application doit être disponible pour être utilisé par n’importe
quel utilisateur.

La sécurité de l’accès aux informations critiques : nous devons prendre en

considération la confidentialité des données de clients surtout au niveau de
l’authentification.

La fiabilité : les données fournies par l’application doivent être fiables.

La convivialité de l’interface graphique : l’application doit fournir une interface

conviviale et simple pour tout type d’utilisateur.

Une solution ouverte et évoluée : l’application peut être améliorée par l’ajout
d’autres fonctionnalités pour garantir la souplesse, l’évolutivité et l’ouverture de la
solution.

III.3. Avantages de notre solution

Notre solution répond exactement au cahier de charge, et il apport plus d’amélioration
sur le projet, parmi ses avantages :

Gérer l’affectation des points au vendeur d’une manière dynamique.

Améliorer la façon de travail des vendeurs.

Gestion des vendeurs, produits et dépôts depuis une interface web.

Simple à manipuler notre application par l’utilisateur.

La connaissance des besoins des clients.

Consulter, acheter et recevoir le produit par un simple clic.

15
 IV. Qualité de projet
IV.1. Cycle de vie
Nous avons choisi le cycle en V. Car
ce modèle est caractérisé par le
parallélisme. Dans ce modèle
verticalement nous trouvons les
étapes du développement et
horizontalement la vérification.

IV.2. Planification
Pour mieux planifier, analyser et contrôler le bon déroulement de la réalisation du
projet, ainsi qu’assurer une bonne qualité du produit dans des délais fixés et une
conformité entre ce qui est définie et ce qui est obtenu, nous avons utilisé les notions
de la gestion des projets informatiques et le respect des normes qualité. Dans ce
cadre nous allons présenter le diagramme de GANTT.

16
17
Chapitre II. Conception et modélisation

I. Introduction
Dans cette partie on présente quelques diagrammes qui schématisent les fonctionnalités
offertes par notre solution ainsi que leurs déroulements. Loin du code, cette représentation
est un moyen de communication entre le maître d’ouvrage et le développeur.

II. Présentation UML

UML ( Unified Modelling Language ) est un langage standard, pour spécifier, visualiser,
concevoir et documenter tous les aspects d'un système d'information, il fournit un support
de communication : un langage graphique comportant 13 diagrammes standards (pour UML
2.0) représentant des 'vues' d'un système d'information, et il permet aussi d'exprimer et
d'élaborer des modèles objet, indépendamment de tout langage de programmation.

Nous allons présenter comme exemple de cette modélisation un ensemble de diagramme

de cas d'utilisation, diagramme de classe et diagramme de séquence.

Diagramme de cas d'utilisation : Un diagramme de cas d'utilisation capture le

comportement d'un système, permettent d'exprimer le besoin des utilisateurs d'un système,
ils sont donc une vision orientée utilisateur de ce besoin au contraire d'une vision
informatique.

Diagramme de classe : Un diagramme de classes fournit une vue globale d'un système
en présentant ses classes, interfaces et collaborations, et les relations entre elles. Les
diagrammes de classes sont statiques : ils affichent ce qui interagit mais pas ce qui se passe
pendant l'interaction.

Diagramme de séquence: représentation graphique des interactions entre les acteurs et le

système selon un ordre chronologique dans la formulation Unified Modeling Language

18
 Chapitre II
III. Les acteurs :
Un acteur est l’archétype de l’utilisateur (personne, processus externe, ...) qui interagit
avec le système.

Client : son rôle consiste à demander des produits à partir de l’application client.

Vendeur : il a le rôle de livrer les produits aux clients.

Le gestionnaire : il gère les vendeurs, produits et dépôts.

IV. Diagramme de cas d’utilisation

Figure 1:Diagramme de cas d’utilisation

19
 Chapitre II
Description du cas d’utilisation « création de compte client »

Figure 2:cas d’utilisation « création de compte client »

SOMMAIRE
Titre : Création de compte client
But : La création d’un nouveau compte client.
Résumé : Le client clique sur le bouton « Sign Up » pour crée un nouveau compte client.
Acteur : Client.
DESCRIPTION DES ENCHAINEMENTS

Pré conditions Post conditions

- la création d’un nouveau compte client et
l’ajout de ce client á la base de données.
Scénario nominal
1. Le client clique sur le bouton « Sign Up»
2. Le client remplir tous les champs qui sont affiché par le système.
3. Le client clique sur le bouton validé pour envoyer ces informations.
4. Le système va vérifier les informations des champs.
5. Le système va ajouter les informations à la base de données.
6. Le client va connecter à son espace.
Enchaînement alternatif
1.11.1.a Client n’a pas rempli un champ ou les données sont incorrectes.
1. Le système affiche un message d’erreur.
2. Retour à l’étape 1 du scénario nominal.1

Tableau 1 : Création de compte client

20
 Chapitre II
Description du cas d’utilisation « connexion »

Figure 3:cas d’utilisation « connexion »

SOMMAIRE
Titre : Connexion des utilisateurs
But : La connexion des utilisateurs soit le client soit le vendeur.
Résumé : L’utilisateur clique sur le bouton « connexion vendeur » ou « connexion client » pour la
connexion a son espace.
Acteur : Vendeur, client.
DESCRIPTION DES ENCHAINEMENTS

Pré conditions Post conditions

- l’utilisateur avoir déjà un compte.
Scénario nominal
1. Le système affiche les champs pour faire la connexion.
2. L’utilisateur va remplir les champs qui sont affiché.
3. L’utilisateur clique sur le bouton « connexion »
4. Le système va vérifier si cette espace existe ou non.
5. Le système affiche l’espace de cet utilisateur s’il existe.

Enchaînement alternatif
1.11.1. Client ou vendeur n’a pas rempli champ ou les données sont incorrectes.
1. Le système affiche un message d’erreur.
2. Retour à l’étape 1 du scénario nominal pour lancer à nouveau la connexion.1

Tableau 2 : Connexion des utilisateurs

21
 Chapitre II
Description du cas d’utilisation « détails de vendeur »

Figure 4:cas d’utilisation « détails de vendeur »

SOMMAIRE
Titre : Détails de vendeur
But : Le vendeur peut savoir ses détails concernant le client
Résumé : Le vendeur clique sur le bouton « affiche détails » le système lui affiche une liste des
clients.
Acteur : Vendeur.
DESCRIPTION DES ENCHAINEMENTS
Pré conditions Post conditions
- vendeur est authentifié - affichage des détails de client.
Scénario nominal
1. Le vendeur se connecte à son application mobile par email et un mot de passe.
2. Le système affiche un bouton « affiche détails » et un bouton de position sur les clients.
3. Le vendeur clique sur « affiche détails » pour afficher ces clients et puis il clique sur un client
pour afficher ces détails.
4. Le système expose l’affichage de ses produits avec la quantité de chacune.

Enchaînement alternatif

Tableau 3 : Détails de vendeur

22
 Chapitre II
Description du cas d’utilisation « détails de client »

Figure 5:cas d’utilisation « détails de client »

SOMMAIRE
Titre : Détails de client
But : Le client peut savoir ses informations
Résumé : Le client clique sur le bouton « affiche plus » le system lui affiche une liste de ses
informations.
Acteur : Client.
DESCRIPTION DES ENCHAINEMENTS
Pré conditions Post conditions
- client est authentifié - affichage des détails de client.

Scénario nominal
1. Le client se connecte à son application mobile par email et un mot de passe.
2. Il clique sur un bouton « affiche plus ».
3. Le système expose l’affichage de ses informations (nom, prénom, email, adresse, tele).

Enchaînement alternatif

Tableau 4: Détails de client

23
 Chapitre II
Description du cas d’utilisation « ajouter une demande »

Figure 6:cas d’utilisation « ajouter une demande »

SOMMAIRE
Titre : Demande
But : Le client peut Demander une quantité d’un produit à partir de l’application.
Résumé : Le client clique sur le bouton « ajouter » dans le fragment « demande » le système liste les produits le
client sélectionner un produit et de déterminer la quantité pour cette demande et la position et valider son
choix.
Acteur : Client.
DESCRIPTION DES ENCHAINEMENTS

Pré conditions Post conditions

- client est authentifié -l’enregistrement de la demande pour la livraison.

Scénario nominal
1. Le client se connecte à son application mobile par l’email et un mot de passe.
2. Le client click sur le bouton « ajouter » dans le fragment « demande ».
3. Le système expose l’affichage des produits disponible selon leur catégorie.
4. Le client click sur un des produits affiché.
5. Le système affiche une fenêtre pour le choix de la quantité.
6. Le client choisi la quantité et définir par suite sa position.
7. Le système ajoute sa demande et l’affecter à un vendeur.

Enchaînement alternatif

Tableau 5: Création demande

24
 Chapitre II

Description du cas d’utilisation « confirmation par client »

Figure 7:cas d’utilisation « confirmation par client »

SOMMAIRE
Titre : Confirmation
But : Le client peut confirmer une demande.
Résumé : Le client clique sur le bouton de la confirmation.

Acteur : Client.
DESCRIPTION DES ENCHAINEMENTS

Pré conditions Post conditions

- client est authentifié - la demande sera confirmer.
Scénario nominal
1. Le client se connecte à son application mobile par email et un mot de passe.
2. Le client choisit les produits.
3. Le système expose l’affichage de toutes les produits choisit.
4. Puis le client clique sur le bouton de la confirmation.

Enchaînement alternatif
Tableau 6 : Confirmation par client

25
 Chapitre II

Description du cas d’utilisation « voire la carte »

Figure 8:cas d’utilisation « voir la carte »

SOMMAIRE

Titre : Voir la carte

But : Le vendeur peut naviguer vers la carte pour plus d’informations.

Résumé : Le vendeur clique sur la carte pour voir le trajet de travail.

Acteur : Vendeur.

DESCRIPTION DES ENCHAINEMENTS

Pré conditions Post conditions

- vendeur est authentifié - la connaissance de plus de détails dans la

carte.
Scénario nominal

1. Vendeur se connecte à son application mobile par l’email et un mot de passe, et basculer vers
le fragment de la carte.
2. Le système va afficher la carte, et des marqueurs représentent les demandes et les vendeurs.

Enchaînement alternatif

Tableau 7 : Voir la carte

26
 Chapitre II
V. Diagramme de class

Figure 9:Diagramme de class

27
 Chapitre II
VI. Diagrammes de séquence :
Diagramme de séquence de la « création de compte client »

Figure 10:séquence de la « création de compte client »

28
 Chapitre II
Diagramme de séquence de la « connexion »

Figure 11:séquence de la « connexion »

29
 Chapitre II
Diagramme de séquence de la « détails vendeur »

Figure 12:séquence de la «détails vendeur»

30
 Chapitre II

Diagramme de séquence de la « demande client »

Figure 13:séquence de la « demande client »

31
 Chapitre II

Diagramme de séquence de la « l’affichage de la carte »

Figure 14:séquence de la « l’affichage de la carte »

VII. Conclusion :
Au cours de ce chapitre, nous avons conçu les différents composants de notre système.

Maintenant, nos applications sont prêtes à être codées. Le prochain chapitre concerne la
mise en place de nos applications.

32
 Chapitre III

Chapitre III. La technologie utilisée et réalisation

I. Introduction :
La phase de réalisation est une étape très importante dans le cycle de vie de nos
applications, cette phase permet de concrétiser notre projet par le développement des
interfaces et par des réalisations concrètes des fonctionnalités du système. Pour réaliser ces
applications nous avons en recourt à plusieurs outils de développement.

Dans cette dernière partie on va présenter l’environnement logiciel utilisé pour

développer notre application, et le résultat final.

II. Environnement de travail :

II.1. Environnement logiciel
II.1.a. Environnement de développement
Android Studio : Android Studio est un environnement de développement des
applications Android, est un des plus puissants éditeurs de code, il offre des
solutions plus rapides pour développer des applications performantes et de
qualité destinée aux appareils Android. De même il inclut tout ce dont vous
avez besoin pour développer une application : éditeur de code et débogueur
intelligents, outils d'analyse des performances, émulateurs, et bien plus

SUBLIM TEXT est un éditeur de texte conçu principalement pour

l’édition d’extraits de code, de plugiciels et de balisage. Il est aussi
accompagné de tout le nécessaire pour écrire des articles ou taper on
prose normale.

33
 Chapitre III

II.1.b. Système de gestion de base de données

PostgreSQL est un système de gestion de base de données relationnelle et objet
(SGBDRO). C'est un outil libre disponible selon les termes d'une licence de type BSD.\

Ce SGBDRO utilise des types de données modernes, dits composés ou

enrichis suivant les terminologies utilisées dans le vocable informatique
usuel. Ceci signifie que PostgreSQL peut stocker plus de types de données
que les types simples traditionnels entiers, caractères, etc. L'utilisateur peut
créer des types, des fonctions, utiliser l'héritage de type, etc.

PostgreSQL est largement reconnu pour son comportement stable,

proche d’Oracle, mais aussi pour ses possibilités de programmation étendues, directement
dans le moteur de la base de données, via PL/pgSQL. Le traitement interne des données peut
aussi être couplé à d'autres modules externes compilés dans d'autres langages.

II.1.c. Logiciel de retouche d'image

Adobe Photoshop est un puissant programme d'édition d'images, retouche
d'image et de création graphique. Il en résulte un résultat de meilleure qualité.
Édité par la société Adobe. Constitue maintenant l'outil de base dans la plupart
des secteurs de l'industrie graphique.

II.1.d. Logiciel de modélisation

Enterprise Architect est un outil complet d'analyse et de conception d'UML, édité par la
société australienne Sparx Systems. Il comporte le rendement de
documentation de haute qualité de flexibilité, il est l'un des logiciels
de conception et de modélisation les plus reconnus.

34
 Chapitre III

II.2. CHOIX TECHNIQUE

II.2.a. Les langages de programmation

Java est un langage de programmation inspiré du langage C++, avec un

modèle de programmation orienté objet. Le Java permet de créer des applications
interactives avec l’utilisateur, Une fois que vous avez écrit votre page elle ne
bouge plus. On ne peut pas gérer les clics ni rien donc c’est ce que va nous
permettre le java : créer l’interaction avec l’utilisateur.

Plusieurs caractéristiques nous ont motiver à utiliser ce langage. D’abord il est Orienté-
objet, java intègre l'encapsulation, l'héritage, une gestion automatique de la mémoire …,
ensuite il est indépendant de la machine, sécurisé, et simple.

XAMPP est un ensemble de logiciel permettant de mettre en place un serveur

web local, un serveur FTP et un serveur de messagerie électronique .Il s'agit d'une
distribution de logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne
souplesse d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la
portée d'un grand nombre de personnes puisqu'il ne requiert pas de connaissances
particulières et fonctionne, de plus, sur les system d’exploitation les plus répandus.

PHP est un langage de script côté Serveur. Il permet d’écrire des scripts qui
s’exécutent sur le serveur web afin de générer des pages HTML qui seront
envoyés par la suite vers le navigateur d’un côté, ou de générer un format
de données textuel JSON, qui sera envoyée au client, l’application mobile,
d’autre côté.

PHP est un module supporté par le serveur web Apache, le plus répandu
dans le monde, il permet d'exploiter facilement de très nombreuses bases
de données comme Oracle, MySQL, dBase, Sybase, PostgreSQL et MSQL, il s'exécute
rapidement avec une stabilité à toute épreuve, et il est multi plates-formes : Windows, UNIX
…

35
 Chapitre III

II.2.b. Les langages de description

HTML: désigne un type de langage informatique descriptif. Il s'agit plus
précisément d'un format de données utilisé dans l'univers d'Internet pour la mise
en forme des pages Web. Il permet, entre autres, d'écrire de l'hypertexte, mais aussi
d'introduire des ressources multimédias dans un contenu.

CSS: est un acronyme pour Cascading Style Sheets ou feuille de style en

cascade en français. c’est le langage de balisage basé sur le Web utilisé pour
décrire l’apparence et la mise en forme d’un site Web dans le navigateur, le
plus couramment utilisé en HTML

XML:(Extensible Markup Language) est un langage qui permet de décrire des

données à l'aide de balises et de règles que l'on peut personnaliser.

36
 Chapitre III

II.3. L’architecture de l’application Android

Client/ Serveur

Figure 15:Architecture Client/Serveur

Dans l’architecture à trois niveaux, les applications au niveau serveur sont délocalisées,
c’est-à-dire que chaque serveur est spécialisé dans une tâche (serveur web/ serveur de base
de données par exemple). Il permet :

Une plus grande flexibilité/souplesse.

Une sécurité accrue car la sécurité peur être définie indépendamment pour chaque
service, et à chaque niveau.

De meilleures performances, étant donné le partage des tâches entre les différents
serveurs.

Cette architecture (appelée 3 tiers) fait intervenir trois parties indépendantes les unes des
autres :

La couche de données liée au serveur de base de données (SGBD) : stockage et

accès aux données. Le système de stockage des données a pour but de conserver
une quantité plus ou moins importante de données de façon structurée. Nous
pouvons utiliser pour cette partie des systèmes très variés qui peuvent être des
systèmes de fichiers, des systèmes de bases de données relationnelles, etc.

37
 Chapitre III

La logique applicative : il se compose généralement d’un script ou d’un

programme qui constitue les traitements métier nécessaires sur l’information afin
de le rendre exploitable par chaque utilisateur.

La couche présentation (ou affichage) associé au client qui de fait est dit « léger »
dans la mesure où il n’assume aucune fonction de traitement à la différence du
modèle 2-tiers. C’est la partie la plus immédiatement visible pour l’utilisateur.
Elle a donc une importance primordiale pour rendre l’information lisible,
compréhensible et accessible.

Protocol et format de données

Dans notre projet, nous avons utilisé le protocole HTTP, afin de communiquer les
données entre la partie cliente mobile et le serveur web. En effet, Le HTTP est un protocole
qui définit la communication entre un serveur et un client (facilite le dispatch des fonctions).
En général, nous utilisons la méthode Post et Get, Dans notre cas la requête Get envoyée à
partir de l’application client vers le serveur est de la forme suivante :

Format de données communiquées

JSON (JavaScript Object Notation) est un format de données textuel, générique, dérivé
de la notation des objets du langage ECMAScript. Il permet de représenter de l’information
structurée. Un document JSON ne comprend que deux éléments structurels : des ensembles
de paires nom/valeur ; des listes ordonnées de valeurs. Ces mêmes éléments représentent 3
types de données :

Des objets.

Des tableaux.

Des valeurs génériques de type tableau, objet, booléen, nombre, chaîne ou null.

Le principal avantage de l’utilisation de JSON, dans notre application, est qu’il est simple
à mettre en œuvre. Au rang des avantages, nous pouvons également citer :

Facile à apprendre, car sa syntaxe est réduite et non-extensible.

Ses types de données sont connus et simples à décrire.

38
 Chapitre III

II.4. Architecture MVC de l’application web

Figure 16:Architecture MVC

MVC, abréviation de Model, View, Controller, est un modèle de conception qui régit la
loi fondamentale selon laquelle la logique d'application doit être distincte de la présentation.

Il est un cadre architectural et également connu sous le nom de modèle de conception qui
divise une application en trois composants logiques principaux tels que:

Le modèle

La vue

Le control

Les trois composants sont très importants pour toute application car ils gèrent tous les
aspects de développement spécifiques de cette application. MVC fait partie des frameworks
de développement Web standard les plus utilisés pour la création de projets évolutifs et
extensibles.

MODÈLE: Il appartient à toutes les logiques liées aux données avec lesquelles
l'utilisateur travaille. Il peut être utilisé pour représenter:

39
 Chapitre III

Données en cours de transfert entre les composants View et Controller

Données liées au logique métier

Par exemple, un objet Client récupère les informations client de la base de données, puis
les manipule et met à jour ses données dans la base de données.

VUE: Il est utilisé pour toute la logique UI de l'application.

Par exemple, la vue Client contient tous les composants de l'interface utilisateur tels que
les listes déroulantes, les zones de texte, etc. avec lesquels l'utilisateur final interagit.

CONTRÔLEUR: Il appartient à l'interface entre les composants Model et View pour

traiter toutes les demandes entrantes et logiques de l'entreprise. Avec l'aide du composant
Contrôleur, nous sommes en mesure de manipuler les données à l'aide du composant Modèle
et de recevoir le résultat final.

Par exemple, le contrôleur client détient toutes les interactions et entrées de la vue client
et met à jour la base de données à l'aide du modèle client. Et ce contrôleur est également
utilisé pour afficher les données client.

II.5. La base de données

Nous avons utilisé une base de données locale :

Figure 17:La base de données

40
 Chapitre III

III. Les interfaces graphiques

L’interface graphique est une partie très importante pour la réalisation d’une application
convenable, et conviviale offrant un certain plaisir l’utilisateur lors de sa navigation. Ainsi
ce critère peut faire la différence entre une application et un autre bien qu’elles aient les
mêmes fonctionnalités. Voici maintenant un ensemble de captures d’écrans de nos
applications.

41
 Chapitre III

III.1. L’application Client

Cette application permet au client d’abord de créer son compte, par son nom, prénom,
email, numéro de téléphone, et le mot de passe. Ensuite il peut se connecter en utilisant son
email et mot de passe.

Dans son espace il y a un fragment :

Demande : qui contient tous les produits à demandés, le client peut les confirmer.

Le client peut demander un seul produit à la fois parmi les produits disponibles, après le
choix d’une quantité dans le cas de demande, le client va valider la demande puis cette
dernière va être ajouté dans le system, le client va finalement sélectionner la position dans
la carte géographique où il va reçu sa demande.

42
 Chapitre III

III.1.a. L’inscription et l’Authentification

La première interface de notre application

montre ou s’affiche le bouton login sur lequel
les clients doivent cliquer afin qu’ils saisissent
les informations nécessaires.

Figure 18: Welcome Interface

Pour pouvoir accéder aux différentes

fonctionnalités de l’application, le client doit
taper son adresse-email et son mot de passe
dans les champs correspondant, le système
vérifie les données entrées, en cas d’échec il
affiche la page d’authentification avec un
message d’erreur. Mais il doit passer tout
d’abord par l’interface d’inscription comme la
montre la figure 20 et remplir tous les champs
afin qu’il puisse passer au menu principal.
Figure 19: interface de login

43
 Chapitre III

Figure 20: interface d’inscription

Afin de conforter le client, la capture

à droite expose les linéaments principaux de
l’application sous forme d’un menu
contenant les liens vers les interfaces des
différentes fonctionnalités que supporte
l’application y compris la page d’accueil, le
profile. Le menu Récupère en addition la
photo et le nom d’utilisateur sur quel
compte l’application est ouverte. Sur le
menu, on distingue la proposition de
déconnexion pour des raisons de sécurité de
l’utilisateur.
Figure 21:interface profile

44
 Chapitre III

III.1.b. Demander

Parmi les fonctionnalités suggérées par

notre application, on peut distinguer
principalement l’interface d’accueil qui
représente la vise essentielle du projet : un
bouton pour les clients qui vont faire une
demande des produits et l’autre pour qu’ils
puissent envoyer leurs position.

Figure 22:interface d’accueil

45
 Chapitre III

Figure 23:interface demande

Cette interface indique que le client a le droit de choisir un parmi les

produits disponibles, puis le système lui demande de choisir une quantité,
à la suite une interface s’affiche afin que le client puisse confirmer la
demande.

46
 Chapitre III

Figure 24:interface demande(suite)

Après avoir confirmé la demande, le client doit cliquer sur le bouton

«Livraison » pour envoyer sa position avec ses informations personnelles.

47
 Chapitre III
III.2. L’application Vendeur
Cette application permet au vendeur de s’identifier par son email et mot de passe, son
compte doit être créé par le gestionnaire de l’entreprise.

Dans son espace il voit sa photo de profile qu’il peut la changer, son nom, son prénom et
son téléphone, dans son espace aussi il y a un fragments :

Fragment Livraison : où il existe tous les clients d’aujourd’hui, et aussi on peut

cliquer sur un client pour afficher ses détails, après on clique sur le bouton «
Produit» qui ramène le vendeur vers une interface qui présente les détails de son
produit. Aussi il a le choix de cliquer sur le bouton « Location » pour voir la
position de client avec le plus court chemin qui est tracé en vert.

48
 Chapitre III

III.2.a. Authentification

Nous commençons tout d’abord par la

première interface que nous avons déjà
démontrée dans l’application des clients
Comme illustre la figure 25

Figure 25:interface login

La figure à droite représente l’interface

d’authentification dans laquelle doit saisir
l’adresse email et le mot de passe donner
Par le système pour accéder au menu
principal de l’application

Figure 26:interface d’authentification

49
 Chapitre III

La capture à gauche expose les

linéaments principaux de l’application
sous forme d’un menu contenant les
liens vers les interfaces des différentes
fonctionnalités que supporte
l’application y compris la page
d’accueil, le profile. Le menu Récupère
en addition la photo et le nom de
vendeur sur quel compte l’application
est ouverte. Sur le dit menu, on
distingue au surplus la proposition de
déconnexion pour des raisons de
sécurité de vendeur.

Figure 27:interface de menu principale

Cette interface est la page d’accueil pour

accueillir le vendeur, ce dernier a le choix de
cliquer sur « Livraison » pour consulter la
liste des clients.

Figure 28:interface d’acceuil

50
 Chapitre III

Quand le vendeur clique sur un client il

accède directement à la figure au-dessus
à droite qui représente les détails de
client. Cette interface offre au vendeur
soit de cliquer sur le bouton « Produit »
pour voir les détails de son produit
comme illustre l’image au-dessus, soit de
voir le plus court chemin possible de
vendeur vers le client comme illustre
l’image à droite.

Figure 29: les interfaces des détails d’une commande

51
 Chapitre III
III.3. Interface web pour le gestionnaire
Dans cette interface, le gestionnaire peut gérer plusieurs composants du system :

La gestion des vendeurs: le gestionnaire peut ajouter un vendeur, il a aussi la

possibilité de supprimer ou voir tous les détails d’un vendeur, finalement le
gestionnaire peut modifier les informations d’un vendeur.

La gestion des dépôts: Ici il peut ajouter un dépôt à condition qu’il y a un agent
pour travailler dans ce dernier, ce dépôt contient les différents produits de
l’entreprise, chaque produit peut être stocké dans des différents dépôts avec des
quantités différents, ces dernières se trouve partout dans la carte géographique, de
même le gestionnaire peut supprimer un dépôt.

La gestion des produits : Dans cette partie le gestionnaire a la possibilité de voir

les produits, il peut ajouter un nouveau produit en choisissant son catégorie, nom,
prix ,… , et il peut aussi supprimer ou modifier un produit.

52
 Chapitre III

Figure 30:Page d’authentification

Ici le gestionnaire doit saisir son nom et mot de passe pour entrer à
l’accueille.

Figure 31:Page d’accueille

Voici une page simple d’accueille

53
 Chapitre III

III.3.a. Gestion des vendeurs

Figure 32:Page des vendeurs

En cliquant « Gestion des vendeurs » le gestionnaire voit un tableau de tous les vendeurs
et le nombre totale des vendeurs

Figure 33:Page de détails d’un vendeur

On peut savoir tous les détails d’un vendeur en cliquant sur « nom de vendeur »

54
 Chapitre III

Figure 34:Page des produits

On peut lister les produits

55
 Chapitre III

Figure 35:formule d’ajout d’un vendeur

On peut ajouter un nouveau vendeur

56
 Chapitre III

Figure 36:rechercher un vendeur

On peut rechercher un vendeur par son nom et afficher le nombre des vendeurs trouvés

III.3.b. Gestion des dépôts

Figure 37:Page des dépôts disponibles

En cliquant « Gestion des dépôts » le gestionnaire voit un tableau de tous les dépôts et le
nombre totale des dépôts

57
 Chapitre III

Figure 38:formule d’ajout d’un dépôt

Il peut ajouter un dépôt comme il peut le supprimer

III.3.c. Gestion de produits

Figure 39:Page des produits

58
 Chapitre III

En cliquant « Gestion des produits » le gestionnaire voit un tableau de tous les produits et le
nombre totale des produits

Figure 40:formule d’ajout d’un produit

Il peut ajouter un produit avec son nom, son prix, son catégorie, son id et l’id de son dépôt

59
 Chapitre III

Figure 41:rechercher un produit

On peut rechercher un produit et son catégorie

Figure 42:Formule de modifier un produit

Et il peut modifier un produit

IV. Conclusion
Dans ce chapitre nous avons présenté en détails le développement de notre système, Nous
avons commencé par présenter l’environnement logiciel, les choix techniques et les outils
de travail sur lesquels se base notre application, et enfin nous avons conclu par les scénarios
de test et de validation de l’application.

60
 Conclusion générale

En effet, ce projet était une étape très importante dans notre cycle de formation vu qu’il
était une occasion très intéressante et bénéfique pour savoir comment appliquer sur le plan
pratique des connaissances théoriques déjà acquises et aussi il nous a permis d’acquérir de
nouvelles connaissances techniques.

Au même temps, nous avons appris l’importance de la recherche et de la communication

pour l’obtention des bonnes informations. Ainsi que l’importance de la gestion du temps et
de la planification des tâches pour le bon déroulement des travaux. Et grâce à un
environnement favorable pour le travail et la coordination d’efforts, nous avons pu réaliser
le projet demandé dans le cahier de charge et l’enrichi avec autre fonctionnalités afin de le
rendre plus efficace, et adorable.

C’est vrai que notre projet couvre tous les besoins de la société mais on peut ajouter des
nouvelles fonctionnalités comme les algorithmes décisionnels pour évaluer le rende de
chaque trajet, savoir le besoin de clients, et donne des suggestions pour le maximum
bénéfice.

61
 Webographie

MAPBOX pour la gestion des cartes :

https://www.mapbox.com/ (site officiel)

https://docs.mapbox.com/ (documentation mapbox)

Documentation utile:
https://developer.android.com/docs

https://developer.android.com/guide/components/fragments (les fragments)

https://developer.android.com/guide/topics/ui/dialogs (les dialogs)

https://javaee.github.io/javamail/docs/api/ (API pour envoi des emails)

https://phpfrom0.blogspot.com/2016/08/organiser-son-code-selon-larchitecture.html
(documentation sur MVC)

Outils techniques :
https://developer.android.com/studio/ (Android Studio)

https://sparxsystems.com/products/ea/15.1/ (Enterprise Architect)

https://www.sublimetext.com/ (sublime text)

https://www.adobe.com/products/photoshop.html (Photoshop)

62