Université Hassan 1er

Faculté des sciences

et techniques settat

Mémoire de projet de fin d’études

De License professionnelle
Option : License ingénierie des applications mobiles

Thème

Conception et réalisation d’une

plateforme mobile pour l’achat et le
vente enligne

Promotion 2018 - 2019

 -Résumé-

Ce rapport présent l’état du travail effectue sur le sujet de réalisation d’application

de vente et achat en ligne, ce projet a eu lieu la promotion 2018/2019 comme projet
de fin d’études au License professionnel en ingénierie des application mobiles a la
faculté des sciences de Settat

1
 Remerciement

2
 Table des matières
-RESUME- ............................................................................................................................................................ 1
REMERCIEMENT ............................................................................................................................................ 2
TABLE DES MATIERES .............................................................................................................................................. 3
LISTE DES FIGURES ........................................................................................................................................ 6
LISTE DES TABLES .......................................................................................................................................... 6
LISTE DES ABBREVIATION .............................................................................................................................. 7
INTRODUCTION GENERALE............................................................................................................................ 8
1 ..................................................................................................................................................................10

PRESENTATION DU PROJET ET METHODOLOGIE DE CONCEPTION ................................................................10

1. INTRODUCTION .......................................................................................................................................... 11
2. CADRE DU TRAVAIL ..................................................................................................................................... 11
3. PRESENTATION DE PROJET ............................................................................................................................ 11
4. ETUDE DE EXISTENT ..................................................................................................................................... 12
a. Avito .................................................................................................................................................. 12
b. Opensooq .......................................................................................................................................... 12
c. Babaliste ........................................................................................................................................... 13
d. JumiaDeals ........................................................................................................................................ 13
5. CRITIQUE DE EXISTENT ................................................................................................................................. 13
a. Avito .................................................................................................................................................. 14
b. Babalist ............................................................................................................................................. 14
c. OpenSooq .......................................................................................................................................... 14
d. Jumia Deals ....................................................................................................................................... 14
6. SOLUTION PROPOSE .................................................................................................................................... 14
7. METHODOLOGIES ET FORMALISME ADOPTE...................................................................................................... 15
8. CONCLUSION ............................................................................................................................................. 16
2 ..................................................................................................................................................................17

ÉTUDE DES PLATEFORMES DE DEVELOPPEMENT ..........................................................................................17

1. INTRODUCTION .......................................................................................................................................... 18
2. ÉTUDE PRELIMINAIRE ................................................................................................................................... 18
a. Smartphones et systèmes d’exploitation pour mobiles .................................................................... 18
3. LES PLATEFORMES DE DEVELOPPENT MOBILE .................................................................................................... 20
a. Problématique .................................................................................................................................. 20
b. Plateforme de développement des applications native .................................................................... 20
c. Plateforme de développement des application hybride.................................................................... 21
d. Comparaison technique .................................................................................................................... 21
4. SOLUTION ENVISAGES .................................................................................................................................. 22
5. ARCHITECTURE ADOPTEE .............................................................................................................................. 22
a. Une partie client :.............................................................................................................................. 22
b. Une partie serveur : .......................................................................................................................... 22
6. CONCLUSION ............................................................................................................................................. 23
3 ..................................................................................................................................................................24

SPECIFICATION ET ANALYSE DES BESOINS ....................................................................................................24

3
 1. INTRODUCTION .......................................................................................................................................... 25
2. CONTEXTE STATIQUE ................................................................................................................................... 25
a. Description des Auteurs .................................................................................................................... 25
3. BESOINS FONCTIONNELS ET NON FONCTIONNELS ............................................................................................... 27
a. Spécification des besoins fonctionnels .............................................................................................. 27
b. Spécifications des besoins non fonctionnels ..................................................................................... 27
4. DIAGRAMME DE CAS D’UTILISATION ............................................................................................................... 28
5. RAFFINEMENT DES CAS D’UTILISATION ............................................................................................................ 29
a. Affectation des priorités.................................................................................................................... 29
b. Raffinement des cas d’utilisation <<Consultation d’une annonce>> ................................................ 30
c. Raffinement des cas d’utilisation <<Contacter le vendeur>> ............................................................ 31
d. Raffinement des cas d’utilisation <<Déposer une annonce>> .......................................................... 31
e. Raffinement des cas d’utilisation <<Créer un magasin>> ................................................................. 32
f. Raffinement des cas d’utilisation <<Valider la création du magasin>> ............................................ 32
g. Raffinement des cas d’utilisation <<Valider l’annonce>> ................................................................. 32
h. Raffinement des cas d’utilisation <<Géré le magasin>> ................................................................... 33
6. CONCLUSION ............................................................................................................................................. 33
4 ..................................................................................................................................................................34

CONCEPTIONS ..............................................................................................................................................34
1. INTRODUCTION .......................................................................................................................................... 35
2. CONCEPTION DETAILLE ................................................................................................................................. 35
a. Diagramme de classe ........................................................................................................................ 35
b. La base de données de l’application ................................................................................................. 37
c. Diagrammes de séquences ............................................................................................................... 38
i. Le cas d’utilisation - s’authentifier - ...............................................................................................................38
ii. Le cas d’utilisation - s’inscrire - ......................................................................................................................38
iii. Le cas d’utilisation “Rechercher des annonces” ............................................................................................39
iv. Le cas d’utilisation “Déposer une annonce” ..................................................................................................40
3. CONCLUSION ............................................................................................................................................. 40
5 ..................................................................................................................................................................41

REALISATION ET DEVELOPPEMENT ...............................................................................................................41

1. INTRODUCTION .......................................................................................................................................... 42
2. ENVIRONNEMENT DE DEVELOPPEMENT ........................................................................................................... 42
a. Android Studio .................................................................................................................................. 42
b. Eclipse ............................................................................................................................................... 42
c. XAMPP .............................................................................................................................................. 43
d. PhpMyAdmin .................................................................................................................................... 43
e. Apache .............................................................................................................................................. 43
3. LANGAGES DE DEVELOPPEMENT..................................................................................................................... 43
a. JAVA .................................................................................................................................................. 43
b. JSON .................................................................................................................................................. 44
4. FRAMEWORKS ........................................................................................................................................... 44
a. Spring boot........................................................................................................................................ 44
b. JPA .................................................................................................................................................... 45
5. ARCHITECTURE DU PROJET ............................................................................................................................ 45
a. Architecture de l’application mobile ................................................................................................. 45
b. Architecture de web service .............................................................................................................. 47
6. QUELQUES INTERFACES DE NOTRE SYSTEME ..................................................................................................... 48

4
 a. Accueil ............................................................................................................................................... 48
b. Authentification ................................................................................................................................ 49
c. Déposer une Annonce ....................................................................................................................... 50
i. Capture des images ........................................................................................................................................50
ii. Détails Produit................................................................................................................................................51
d. Magasin ............................................................................................................................................ 51
e. Consulter Produit .............................................................................................................................. 52
CONCLUSION GENERALE ET PERSPECTIVES ...................................................................................................53

5
 Liste des figures
Figures Titre Page
Figure 1 Interface utilisateur de l’application mobile Avito 13
Figure 2 Interface utilisateur de l’application mobile Opensooq 13
Figure 3 Interface utilisateur de l’application mobile BabaListe 14
Figure 4 Interface utilisateur de l’application mobile JumiaDeals 14
Figure 5 L’itératif combiné à l’incrémentale 16
Figure 6 Part de marché mondiale des OS mobiles (%) 20
Figure 7 L'architecture à adopter pour l'application 24
Figure 8 Diagramme de contexte statique 27
Figure 9 Diagramme de cas d'utilisation 30
Figure 10 Diagramme de classes 36
Figure 11 Modèle Logique de données 38
Figure 12 Diagramme de séquence pour le cas d’utilisation “s’authentifier” 39
Figure 13 Diagramme de séquence pour le cas d’utilisation “s’inscrire” 40
Figure 14 diagramme de séquence pour le cas d’utilisation “Rechercher des annonces” 40
Figure 15 diagramme de séquence pour le cas d’utilisation “Déposer une annonce” 41
Figure 16 Architecture de l’application Mobile 47
Figure 17 Corps d’une repense HTTP sous format JSON 47
Figure 18 Architecture du web service 48
Figure 19 Interface d’accueil de l’application mobile 49
Figure 20 Interface d’accueil de l’application mobile (navigateur) 49
Figure 21 Interface des catégories 50
Figure 22 Interface d’authentification. 50
Figure 23 Interface d’inscription. 50
Figure 24 Demande de permission. 51
Figure 25 Interface de capture d’image. 51
Figure 26 Interface de formulaire d’une annonce 52
Figure 27 Interface utilisateur magasin 52
Figure 28 interface de détails du produit - voiture 53
Figure 29 interface de détails du produit - moniteur 53

Liste des Tables

Tableaux Titre Page
Tableau 1 comparatif entre les trois types des application mobiles 22

6
 Liste des abbreviation
-A-
ADT : Android Development Tools
APK : Android Package
API : Application Programming Interface
-C-
CSS : Cascade style sheet
-D-
DAO : Data Access Object
-C-
Ftp : File transfer protocol
-H-
HTTP : Hypertext Transfer Protocol
HTML : Hypertext Markup Language
-I-
IDE : Integrated Development Environment
IOS : Internetworking Operating System
-J-
JEE : Java Enterprise Edition
JPA : Java Persistence API
JPQL : Java Persistence Query Language
JSP : Java Server Pages.
JSON : JavaScript Object Notation.
JDK : Java Development Kit.
-M-
MVC : Modele Vue Controler
MLD : Modèle Logique de Données
-O-
OS : Operating system
-P-
PHP : Hyprttext Preprocessor.
-R-
RUP : Rational Unified Process
-S-
SDK : Sotfware Development Kit
SWT : Standard Widget Toolkit,
SQL : Structured Query Language.
-U-
UP : Unified Process
UML : Unified Modeling Language
-X-
XML : eXtensible Markup Language.
XAMPP : X (cross) Apache Maria DB Perl PHP
-2-
2TUP : 2 Tracks Unified Process

7
 Introduction générale

Aujourd’hui c’est l’époque des smartphones, comme elle était une fois l’erra des
ordinateur, presque tout le monde dans la planète tient un smartphone dans ses
mains, presque un milliard et demi de smartphone ont été vendu en 2017 dans le
monde .dans un monde actif et continuellement évolutif les smartphones jouent un
rôle très important dans la communication et l’échange d’information ce qui devient
plus en plus fondamentale ,cette motivation a donné naissance à une révolution
favorisant le travail à distance et l’accès aux besoins en temps réduit à l’aide
d’internet qui a bouleversée les habitudes de travail dans de nombreux métiers.

D’après l’analyse effectué il s’avère que de plus en plus d’internautes se connectent

désormais à l’internet via leurs téléphones portables, Nous remarquons ces
dernières années un développement exponentiel des appareils mobiles qui sont
répondus comme une trainée de poudre dans le monde en développement et
révolutionnant le domaine des communications. Les appareils mobiles deviennent
plus performés avec une grande capacité mémoire ainsi que le développement de la
4 éme génération d’internet. Aujourd’hui l’exploitation de ce boom technologique
dans les autres domaines est une obligation qui va permet de les développer.

C’est dans ce cadre qu’entre le sujet de notre PFE, il s’agit en fait, de concevoir et
développer une solution informatique dédié au personnel dans le cadre de la
simplification des actions de vente et d’achat entre les particuliers et / ou les
professionnels, pour une meilleur accès au information, nous avons l’intention de
réaliser une application mobile simple à utiliser et qui offre une expérience
utilisateur satisfaisante avec une interface graphique simplifie afin de rependre au
besoin des utilisateurs, cette application est dédié au particulier même qu’à la
professionnelle c’est simplement une plateforme ou en peut commercialiser, vendre
ou acheter tous ce qui est annoncé cette application capable de gérer et d’exploiter
toutes ces informations et synchroniser à travers la communication avec une
application web dédiée.

En effet les applications mobiles ne cessent d’enregistrer une croissance de plus en

plus importante, qui facilite la vie des internautes, Par conséquent, il doit y avoir
une montée rapide en compétence afin de s’adapter aux nouveaux besoins, en
adaptant les diffèrent technologie disponible afin de fournir à l’utilisateur une
expérience idéale.

8
Le présent rapport abordera donc les différentes phases dont nous avons passé, afin
d’aboutir à une application fiable est satisfaisante.

Le premier chapitre s’article autours de l’étude de quelques applications mobiles de

vente et achat en ligne et la présentation de leurs fonctionnalités offertes. Nous
nous sommes basés sur cette étude pour faire la spécification de notre application,
qui fera l’objet du troisième chapitre.

Le second chapitre sera consacré sur l’étude préliminaire sur les smartphones, puis
les différentes plateformes dédiées au développement des application mobiles et par
la suite le choix de la solution technique à adopter.

Le troisième chapitre sera consacré sur l’analyse des besoins fonctionnels et non
fonctionnels. les principaux acteurs et leurs rôles. puis présenter le diagramme de
cas d’utilisation du system et décrire les différents cas d’utilisation.

Le quatrième chapitre abordera la partie conception du projet, dans laquelle, nous

détaillons les différents éléments de conception

Le cinquième chapitre s’article autours d’environnement de développement ainsi

qu’au taches réalisés des taches réaliser

9
 1
Présentation du projet et méthodologie de
conception

10
1. Introduction

Ce chapitre est consacré à la précision du cadre du projet, la problématique,

l’énumération des étapes de travail à réaliser pour achever ce projet puit la
présentation de quelques applications mobiles d’achat et vente encline, en exposant
leurs fonctionnalités.

2. Cadre du travail

Ce projet s’inscrit dans le cadre d’un projet de fin d’études pour l’obtention d’une
License d’ingénierie des application mobiles de la Faculté des sciences du Settat. Le
sujet est intitulé “Conception des développements d’une application d’achat et
vente en ligne”.

3. Présentation de projet

Dans un monde qui se développe au domaine des nouvelle technologie ainsi qu’au
domaine de commerce il est très difficile pour les individu d’accéder au monde du
commerce suite aux plusieurs obstacles parmi ces obstacle les grand supermarché
qui ont des ressource monétique importante et qui peuvent s’adresser à une large
communauté, grâce à l’énorme évolution dans les smartphone ainsi que la facilité
d’accès à l’internet maintenant chaque personne physique à la possibilité d’adresser
aux autres.

L’idée générale du projet consiste à concevoir une plateforme applicative qui pourra
de façon concrète permettre à un utilisateur de déposer leurs produits ou des
annonces afin qu’ils puissent les vendre, de même pour des utilisateurs -
professionnels - ont la possibilité de créer des magasins virtuels et les gérer,
l’administrateur utilisera une interface web pour gérer la partie administrative qui
inclue la gestion des validations des annonces.

11
4. Etude de l’existant

Parmi les produits existants sur le marché, nous retrouvons :

a. Avito

- Cette application offre une interface

simple qui facilite la consultation
de toutes les annonces déposées
- La possibilité de télécharger plus d’une image
pour chaque annonce
- Création des boutiques pour les professionnels
- Toutes les annonces son catégorisé
- Support de recherche et filtrage des annonces

Figure1 : interface de
l’application mobile Avito

b. Opensooq
- Cette application offre une interface
condensé avec un affichage des
annonces par catégorie.
- Création des boutiques pour les professionnels.
- Toutes les annonces son catégorisé.
- Chaque annonce a ces propres spécifications
en se basant sur la catégorie du produit annoncé.
- Option de chat avec les annonceurs.
Figure2 : interface de
l’application mobile
Opensooq

12
 c. Babaliste
- Une interface simple et moderne
Permet au particulier de crée des boutiques
- Dépôt des annonces très simple et rapide
- Support de recherche et filtrage des annonces
- Option de chat avec les annonceurs

Figure3 : interface de
l’application mobile
BabaListe

d. JumiaDeals
- Cette application offre une interface simple
et moderne qui facilite la consultation de
toutes les annonces déposées et
les filtrer par catégorie sur la même interface
- Toutes les annonces son catégorisé
- Support de recherche et filtrage des annonces

Figure 4 : interface de
l’application mobile
JumiaDeals

5. Critique de l’existant

Une analyse des application existantes montre que la plupart de ces applications
offrent plusieurs fonctionnalités de base et les services que l’utilisateur peut les
bénéficier mais non toutes utilisateur.

13
 Au regard de ces informations, nous pouvons relever qu’elles rependent au besoin
principale des utilisateurs. Néanmoins, nous pouvons aussi noter les inconvénients
suivants :

a. Avito

- Service magasin en ligne pas disponible pour tous les utilisateurs

b. Babalist

- Ne donne pas la possibilité de saisir plus de détails sur les produits à

déposer
- L’utilisateur est obligé d’attacher une et une seule image pour son
annonce
- Le support de recherche est traditionnel
- Ne fonctionne pas hors line

c. OpenSooq

- Interface Utilisateur très condensée et mauvaise exploitation d’espace

- Ne fonctionne pas hors line
- Chaque utilisateur est obligé d’inscrire avant qu’il puisse utiliser
l’application

d. Jumia Deals

- Service magasin en ligne n’est pas disponible pour tous les utilisateurs de
l’application
- Ne donne pas plus de détails sur les produits déposé

6. Solution Proposé

Après une étude comparative sur les différentes solutions existantes, il est donc
primordial au regard des inconvénients recensés de proposer une solution qui
pourra rependre à nos besoins.

14
 L’application doit nous offre une interface utilisateur simple est moderne qui ne
contient que les informations qu’on a besoins avec une assistance vocale qui
permettre de faciliter la recherche, procédure dynamique de dépôt des annonces
basé sur la catégorie de produit, avec la possibilité de prendre plusieurs images plus
d’un vidéo d’une minute, service magasin en ligne disponible pour cheque
utilisateur inscrit avec la possibilité d’abonner chez les autres magasins,

7. Méthodologies et formalisme adopté

Nous allons adopter la méthode agile : Rational Unifie Procès comme un processus
de développement logiciel. Nous avons opté pour ce choix dû à ces caractéristiques
car il est :

- Le processus unifié est à base de composants,

- Le processus unifié utilise le langage UML (ensemble d'outils et de
diagramme),
- Le processus unifié est piloté par les cas d’utilisation,
- Centré sur l’architecture,
- Itératif et incrémentale.

Figure5 : l’itératif combiné à l’incrémentale.

Processus unifié à deux branches (2TUP) :

- Le processus 2TUP n'apporte pas directement de solution sur les étapes
cruciales de conception et de réalisation, il nous semble intéressant d'un point
de vue pédagogique car il sépare les analyses en deux aspects : la branche
fonctionnelle (métier) et la branche technique

- le processus 2TUP met en valeur les études techniques, qui sont noyées
dans les autres cycles de développement.

15
8. Conclusion

Dans ce chapitre nous avons présenté le projet à réaliser ainsi que quelques
applications similaires qui existent dans le marché dans le but d’avoir une idée sur le
fonctionnement de ces dernières et de ressortir leurs points fort et point faible, sur
la base de cette étude nous allons élaborer la spécification de notre application.

16
 2
Étude des plateformes de développement

17
1. Introduction

Ce chapitre a pour objet de présenter une d’étude préliminaire sur les smartphones,
puis les différentes plateformes dédiées au développement des application mobiles
et par la suite le choix de la solution technique à adopter.

2. Étude préliminaire
a. Smartphones et systèmes d’exploitation pour mobiles

Un smartphone est un téléphone mobile disposant des fonction d’un assistant

numérique personnel et de certain fonction d’un ordinateur portable, il peut
exécuter divers logiciels/applications grâce à un system d’exploitation spécialement
conçu pour mobiles, et donc en particulier fournit des fonctionnalités en plus de
celles des téléphone mobiles classique comme : l’agenda, le calendrier, la
navigation sur le web, la consultation et l’envoi de courrier électronique, la
géolocalisation et la cartographie numérique ,etc.

Il est possible de personnaliser son smartphone en y installant des applications

additionnelles, ces applications peuvent être développées par l’opérateur ou par
n’importe quel autre éditeur du logiciel.

Vue la grande importance des smartphones une grande variété d’entreprises ont été
placé dans ce marché en développant des systèmes d’exploitation pour mobile. Vers
l’année 2007, les systèmes d’exploitation les plus répandus dans le monde sont :

- Symbian (racheté par Nokia) tout en occupant 67 % de parts de marché.

- Windows Mobile (développé par Microsoft) avec 13 % de parts de marché.
- BlackBerry avec 10 % de parts de marché.
- iOS développé par Apple sur l'iPhone avec 7 % de parts de marché.

En 2008, le nouveau système d'exploitation open source Android, développé par

Google, a fait son apparition.

En 2009, Palm Inc lance le Palm pré-équipé du Palm webOS. D'autres systèmes
d’exploitation sortent sous Linux. Microsoft, Symbian et Blackberry mettent à jour
leurs systèmes pour rester au niveau de l’iOS et d'Android. Au début de 2010, une

18
autre enquête sur les systèmes d'exploitation les plus courants en France, indique
que Symbian est le grand perdant dans le développement du marché durant ces
deux dernières années et que BlackBerry, Windows Mobile, iOS et Android sont
devenus les systèmes d'exploitation les plus utilisés :

- iOS tout en occupant près de 30% du marché

- Windows Mobile avec environ 20 % du marché
- Android avec environ 20% du marché
- BlackBerry avec environ 20% du marché
- Symbian avec environ 10% du marché
- Palm web OS, Linux et autres avec des parts négligeables du marché

La puissance incontestée à ce jour d’Android et iOS ne laisse pas de place à une

plateforme alternative. En 2017 Android a capturé presque 85,1% de la part du
marché, d’autre coté iOS avec 14,8% et 0,1% pour les autres systèmes en 2021 les
études prévoient que Android va capturera 85,3% du marché des smartphones, iOS
14,6% et les autres systèmes d’exploitation 0%

Figure 6 : Part de marché mondiale des OS mobiles (%)

19
3. Les plateformes de développent mobile
a. Problématique

Cette diversité au niveau des plateformes mobiles met les éditeurs des logiciels dans
l’embarras du choix de l’environnement de développement qui est lui-même a trois
type majeure les quels :

- Applications native:
Application écrite avec le langage de programmation
spécifique à une plateforme particulière, Java ou Kotlin
pour Android et Swift ou objective-c pour iOS.

- Application web mobile:

C’est un site web adapté pour une utilisation sur
appareil mobile, il est accessible via le navigateur
web de l’appareil mobile et basée sur
les langages HTML 5, CSS3 et JavaScript

- Application mobile hybride:

Des applications développés en HTML, JavaScript
et CSS puis enveloppées dans une application native.
Installées comme des applications natives. Phone Gap
et sa version open source Cordova est la plateforme
la plus connue pour développer ce type d’application.

b. Plateforme de développement des applications native

Malgré le fait que le développement natif est limité au niveau du plateformes ciblé
ainsi que le cout élevé de développement et de maintenance, au contraire des autre
Platform hybride et web mobile les applications natives offre plus d’avantage en
termes de puissance, qualité et performance optimale, Sur mesure et adapté aux
usages mobiles de chaque OS. Accès à 100% des fonctionnalités du téléphone.
Utilisable en mode offline. Publiée sur un tore, alors le référencement se fait via un
classement sur le store. Deux modes de monétisation : vente du téléchargement de
l’application et la publicité. Accès aux données et aux fichiers. Très bonne gestion
de ressources.

20
 c. Plateforme de développement des application hybride

Le point fort des application hybride c’est le multiplateforme alors elles sont moins
couteuses au niveau de développement pour plusieurs plateforme, aussi elles sont
publiable dans les marquet Play store, App store etc., Car ce sont des
application web enveloppées dans des applications natives , mais les inconvénient
de ce type d’application qu’il prend pas réellement en compte l’expérience
utilisateur, aussi elles ont moins performante que les applications native avec un
accès limité au fonctionnalité du téléphone.

d. Comparaison technique
Le tableau suivant représente un comparatif entre les trois types des application
mobiles

NATIVE HYBRIDE WEB

Cout Généralement le plus
couteux des trois choix en
cas de développement pour
multiplateformes
Portabilité / Code pour une plate-forme
Réutilisation fonctionne seulement sur
cette plate-forme
accès aux Le SDK de plate-forme
appareils permet d'accéder à toutes
les API de l’appareil
Expérience La plate-forme est livrée
utilisateur avec des composants
d'interface utilisateur
familiers et originaux
Distribution Les App stores offrent des
avantages marketing, mais
ont également des
exigences et des restrictions
Performance Le code natif a un accès
direct aux fonctionnalités
de la plate-forme, ce qui
améliore les performances
monétisation Plus d'opportunités de
monétisation, mais les
magasins prennent un
pourcentage
Tableau 1 : comparatif entre les trois types des application mobiles
Similaire au coût Web, Coût le plus bas en raison
mais des compétences de la base de code unique
supplémentaires sont et des compétences
nécessaires pour les communes
outils hybrides
La plupart des outils La compatibilité et les
hybrides permettront la performances du
portabilité d'une base de navigateur sont les seules
code unique vers les préoccupations
principales plates-formes
mobiles
De nombreuses API de Seules quelques API de
périphérique fermées périphérique telles que la
aux applications Web géolocalisation sont
sont accessibles, en accessibles, mais leur
fonction de l'outil nombre augmente
Les Framework Les Framework d'interface
d'interface utilisateur utilisateur peuvent donner
peuvent donner une une apparence assez
apparence assez native native
Les App stores offrent Aucune restriction à
des avantages lancer, mais il n'y a pas
marketing, mais ont d'avantage sur l'App Store
également des exigences
et des restrictions
Pour les applications La performance est basée
complexes, la couche sur le navigateur et la
d'abstraction empêche connexion réseau
souvent les
performances de natives
Plus d'opportunités de Pas de commissions ni de
monétisation, mais les coûts d'installation, mais il
magasins prennent un existe peu de méthodes de
pourcentage monétisation

21
4. Solution envisages

Tenant compte des deux parties précédentes nous avons jugé que ces Framework
sont des solutions non fiables surtout avec des applications complexe et
gourmandes en ressources plus que ça le marché des smartphones n’offre que deux
systèmes d’exploitation l’un est dominant par plus de 85% du marché. Alors, la
sélection d’une de ces plateformes de développement serait un risque potentiel qui
pourra engendre des résultats inattendus.

Suite à cette constatation nous avons choisi de travailler avec la plateforme Android
native.

5. Architecture adoptée

La figure 7 illustre l’architecture à adopter pour notre application. Tout d’abord, notre
projet sera déflaqué en trois modules :

a. Une partie client :

Elle consiste à la réalisation des différentes interfaces de l’application mobile,

l’interprétation des données fournis par le serveur et leurs affichages ainsi que le contrôle
et le traitement des données saisie par l’utilisateur avant l’envoyer au serveur.

b. Une partie serveur :

Cette partie permet l’alimentation de la partie client avec les données de plus, elle
permet l’insertion, la consultation des données et la mise à jour de l’application cliente.

22
 Figure 7 : l’architecture à adopter pour l'application

6. Conclusion

Nous avons présenté dans ce chapitre une idée sur l’architecture a adopté dans
notre projet. De plus, nous avons présenté la solution retenue et les technologies à
utiliser. Une étude plus approfondie sera présentée dans les prochains chapitres.
L’analyse des besoins et la spécification feront l’objet du chapitre suivant.

23
 3
Spécification et analyse des besoins

24
1. Introduction

Après la présentation de l’architecture a adopté dans le projet les technologies à

utiliser, il est temps à présent de se focaliser sur une analyse des besoins de notre
application. Il sera question de présenter dans un premier temps les principaux
acteurs et leurs rôles. Ensuite nous allons définir les besoins fonctionnels et non
fonctionnels, puis présenter le diagramme de cas d’utilisation du system et décrire
les différents cas d’utilisation.

2. Contexte statique

C’est l’étape initiale qui consiste à faire un recensement sur les différents acteurs
qui vont interagir de près ou de loin avec le système. Mais avant d’aller plus loin, il
est important de définir au préalable certain terme important pour la suite.

o Acteur : Constitue une entité physique capable d’interagir avec le système.

Notons juste que cette entité peut être humaine ou d’autre systèmes.
o Système : c’est l’entité à concevoir, dans notre cas il s’agit de l’application
en elle-même.

a. Description des Auteurs

Cette section a pour objet de présenter les acteurs et leurs fonctionnalités à

lesquelles doit répondre notre application. Nous commençons notre analyse par
l’identification des acteurs qui agissent sur notre système à savoir :

- L’administrateur : joue un rôle primordial dans l’assurance du bon

fonctionnement du système. C’est le super utilisateur qui intervient seulement
dans la partie web, ayant le droit d’effectué tout sort d’opération telle que la
validation des annonces déposé d’après les particuliers ou les professionnels et la
suppression des annonces et des produits non convenables ainsi que la révision
des reports de signalisation
- Visiteur : il a le droit de rechercher et consulter les annonces ainsi que les
magasins et contacter les vendeurs, créé une liste d’intérêt.
- Annonceur : plus que les droits d’un Visiteur, il peut créer et gérer les annonces,
s’abonner chez un magasin, reçoive des notifications et chater avec d’autre
Annonceur ou professionnels ainsi que la signalisation des professionnels ou
d’autre annonceurs et l’ajout des avis sur un produit ou le signaler, évaluer un
magasin.

25
- Professionnel : plus que les droits d’un Annonceur, il peut créer et gérer un
magasin.

La figure ci-dessus illustre parfaitement ces différents acteurs ainsi que leurs
interactions avec le système qui se présente sous forme de trait relient les acteurs
concernés au système.

système

Figure 8 : Diagramme de contexte statique

Nous apercevons donc clairement le système -Application Mobile et Application

web- représenté, ainsi que les différents acteurs, néanmoins cette représentation est
encore incomplète car le système ainsi représenté constitue une sorte de

“boite noir” dont nous ne connaissons en rien le fonctionnement. Il est donc

nécessaire de passer par une représentation un peu plus détaillée et c’est ce qui fera
l’objet de la partie suivante.

26
3. Besoins fonctionnels et non fonctionnels
a. Spécification des besoins fonctionnels
i. Le visiteur :
Il accède à l’application sur son téléphone mobile pour :
- Ouvrir un compte sur cette application s’il n’est pas encore inscrit.
- Rechercher des annonces ou des produits.
- Gérer une liste locale d’intérêts (ajouter ou supprimer des annonces
ou des produit)
- Géo localiser les magasins ou les annonces proches.
ii. L’annonceur :
Il accède à l’application sur son téléphone mobile pour :
- Gérer les annonces : dépôt d’une nouvelle annonce, modification
d’une annonce, suppression d’une annonce lors le produit est vendu.
- Créer un magasin
- S’abonner chez un magasin
iii. Le professionnel :
Il accède à l’application sur son téléphone mobile pour :
- Gérer le stock de son magasin : ajout des nouveaux produits,
modifier un produit et supprimer un produit.

b. Spécifications des besoins non fonctionnels

Après avoir déterminé les besoins fonctionnels nous présentons ci-dessus

l’ensemble des contraintes à respecter pour garantir la performance du système,
donc de fournir un produit performant qui respecte les exigences de l’utilisateur et
qui peut faire face à des risques de panne ou de non fonctionnement.

o Performance : afin d’être accepté par le client notre application doit respecter ce
critère tout en assurant un temps de réponse minimum et des fonctionnalités
rependant aux besoins de l’utilisateur.

o Ergonomie : l’interface de l’application doit être simple et utilisable afin que

l’utilisateur puisse l’exploiter sans se référer à des connaissances particulières,
en d’autres termes, notre application doit être lisible et facile à manipuler par
n’importe quelle utilisatrice.

o Besoin de sécurité : l’application devra assurer la sécurité des utilisateurs en

assurant la confidentialité de leurs données et leurs activités

o L’extensibilité : c’est à dire qu’il doit y avoir une possibilité d’ajouter de

nouvelles fonctionnalités ou de modifier celles existantes

27
 o Besoins de haute disponibilité : Au final il est important que notre application
puisse fonctionner sur une plateforme hautement disponible et pouvant gérer un
nombre élevé de requête.

4. Diagramme de cas d’utilisation

Nous parvenons à une étape clé du processus. C’est elle qui grâce à l’étude réalisée
dans la partie précédente mettra en valeur le rôle de chaque acteur du système ainsi
que les fonctionnalités présentées plus haut.

Le diagramme de cas d’utilisation décrit les grandes fonctions d’un system du point
de vue des acteurs mais n’expose pas de façon détaillé le dialogue entre les acteurs
et les cas d’utilisation.

Les cas d’utilisation sont un moyen d’exprimer le besoin des utilisateurs d’un
système informatique vis-à-vis de ce système. Ils ont une vision -orienté utilisateur-
de ce besoin et non une vision informatique.

28
 Figure 9 : Diagramme de cas d'utilisation

5. Raffinement des cas d’utilisation

a. Affectation des priorités

A cette étape de cycle de développement, il est nécessaire de déterminer les cas

d’utilisation les plus prioritaires.

29
 Cas d’utilisation Acteurs Priorité
S’authentifié Annonceur 2
S’inscrire Visiteur 2
Consultation d’une annonce Visiteur/Annonceur 1
Contacter le vendeur Visiteur/Annonceur 2
Déposer une annonce Annonceur 1
Créer un magasin Annonceur 1
Valider la création du magasin Administrateur 1
Valider l’annonce Administrateur 1
Géré le magasin Professionnel 1

b. Raffinement des cas d’utilisation <<Consultation d’une annonce>>

Nom du cas d’utilisation Consulter une annonce
Acteurs Visiteur / Annonceur

Pré condition Le système fonctionne et le téléphone connecté à l’internet

L’utilisateur peut contacter le vendeur (Apelle, SMS, Email), il

peut consulter le magasin ou ajouter l’annonce a une liste
Post condition
d’intérêts, si l’utilisateur est authentifié il peut ouvrir une
session de chate avec l’annonceur,
Le système présente les différentes annonces de toutes les
catégories
L’utilisateur peut filtrer par catégorie ou effectué une
Scénario principale recherche normale comme il peut utiliser l’assistante vocale.
L’utilisateur peut consulter le magasin ou ajouter l’annonce a
une liste d’intérêts (si l’utilisateur est authentifié il peut
s’abonner chez le magasin)

30
 c. Raffinement des cas d’utilisation <<Contacter le vendeur>>
Nom du cas d’utilisation Contacter le vendeur
Acteurs Visiteur / Annonceur
Le système fonctionne et le téléphone connecté à l’internet et
Pré condition
l’utilisateur a choisi une annonce
L’utilisateur peut appeler le vendeur ou lui envoyer un SMS ou
Email s’il s'agit un magasin l’utilisateur peut consulter la
Post condition
géolocalisation du vendeur, si l’utilisateur est authentifié il peut
ouvrir une session de chate avec l’annonceur,

d. Raffinement des cas d’utilisation <<Déposer une annonce>>

Nom du cas d’utilisation Poster une annonce
Acteurs Annonceur
Pré condition Le système fonctionne et l’utilisateur est authentifié
L’utilisateur peut prendre des photos à partir de l’outil du
camera comme il peut importer une image d’après sa galerie, il
Post condition
a aussi la possibilité d’importer une vidéo de moins d’une
minute
L’annonceur Capture au maximum 6 images et une vidéo
Le système télécharge les images ainsi que le vidéo au serveur
L’annonceur sélectionne la catégorie de son produit el remplit
Scénario principale
les champs obligatoires.
Le système envoie les données insérées au serveur
L’administrateur doit vérifier l’annonce puit la valider si ok
Le système affiche un message d’erreur dans le cas où :
- Les données introduites par l’annonceur sont incohérentes.
Exception - l’annonceur ne remplit pas tous les champs obligatoires.
- le nombres des images sélectionné est plus que 6.

31
 e. Raffinement des cas d’utilisation <<Créer un magasin>>
Nom du cas d’utilisation Créer un magasin
Acteurs Annonceur
Le système fonctionne
Pré condition L’annonceur est authentifié et a déjà déposé plus de 10
annonces
L’annonceur peut faire la demande de création du magasin en
Post condition
fournissant son adresse et géolocalisation.
L’annonceur fait la demande de création du magasin
Scénario principale
L’administrateur doit vérifier la demande puis il la valider
Le système affiche un message d’erreur dans le cas où :
Exception
- Les données introduites par l’annonceur sont incohérentes.

f. Raffinement des cas d’utilisation <<Valider la création du magasin>>

Nom du cas d’utilisation Valider la création des magasins
Acteurs Administrateur
Pré condition Le système fonctionne et l’utilisateur est authentifié
L’utilisateur peut consulter l’historique des annonces et
Post condition
vérifier les données fournis par le demandeur
Le système présente les différentes demandes des utilisateurs
Scénario principale
L’administrateur vérifie chaque demande

g. Raffinement des cas d’utilisation <<Valider l’annonce>>

Nom du cas d’utilisation Valider l’annonce
Acteurs Administrateur
Pré condition Le système fonctionne et l’utilisateur est authentifié
Post condition L’utilisateur peut consulter le contenu de annonces
Le système présente les différentes annonces des utilisateurs
Scénario principale
L’administrateur vérifie chaque annonce

32
 h. Raffinement des cas d’utilisation <<Géré le magasin>>
Nom du cas d’utilisation Géré le magasin
Acteurs Professionnel
Pré condition Le système fonctionne et l’utilisateur est authentifié
L’utilisateur peut ajouter, supprimer ou modifier les détails de
Post condition
ces produits
1. Le système présente tous les produits.
Scénario principale Le client pourra ajouter un nouveau produit.
5. Le client peut modifier ou supprimer les produits existantes
Le système affiche un message d’erreur dans le cas où :
-Les données introduites par l’utilisateur sont incohérentes.
Exception -l’utilisateur ne remplit pas tous les champs obligatoires.
-le existe déjà dans la liste des produits.

6. Conclusion

Dans ce chapitre, nous avons énuméré les différents besoins fonctionnels et non
fonctionnels de notre application. Ensuite, nous avons fait une étude des différents
cas d’utilisation de notre solution. Ce chapitre a été d’une importance cruciale
surtout pour la compréhension des besoins et attentes d’utilisateur.

33
 4
Conceptions

34
1. Introduction

Dans ce chapitre nous abordons la partie conception du projet, dans laquelle, nous
détaillons les différents éléments de conception, à savoir les diagrammes de
séquences, et les diagrammes de classes.

2. Conception détaillé

La conception est la plus importante étape du cycle du développement logiciel, elle

se base essentiellement sur la bonne spécification et l’analyse des besoins. Notre
démarche débute par la compréhension du problème. Ensuite nous analysons le
problème pour donner une solution adéquate. A présent, nous somme dans la phase
de concevoir la solution. Notre conception doit obéir à l’architecture déjà choisie
pour les différentes parties du système d’où cette phase préliminaire qui nous
permettra de définir les composantes globales de notre système.

a. Diagramme de classe

Le diagramme de classe est une modélisation statique du système en tenant en

termes de classes et de relations entre ces classes. Son intérêt réside dans la
modélisation des entités du système d’information.

35
Figure 10 : Diagramme de classes
36
A partir du diagramme du classes on peut dégager les classes principales suivantes :

- Utilisateur : est la classe qui représente tous type d’utilisateur

- Visiteur : est la classe qui contient les informations des visiteurs
- Annonceur : est la classe qui contient les information à-propos des annonceurs
- Professionnel : est la classe qui contient les informations des annonceurs
professionnels
- Particulier : est la classe qui contient les informations des annonceurs particulier
- Store : est la classe qui représente un magasin
- Géolocalisation : est la classe qui contient toutes les informations liées aux
localisations
- Adresse : est la classe qui contient toutes les informations liées aux adresses
- wishList : est la classe qui contient toutes les informations d’une liste d’intérêt.
- Annonce : est la classe principale qui lie entre le produit et son annonceur.
- Produit : est la classe qui représente tous les types des produits.
- Catégorie : est la classe qui contient toutes les informations de catégorie du
produit.
b. La base de données de l’application

La Figure 11 représente le schéma des tables utilisé dans notre base des données
Ces tables représentent l’unité de persistance de notre application.

Figure 11 : Modèle
Logique de données

37
 c. Diagrammes de séquences

Le diagramme de séquence décrit l’aspect dynamique du système. Il modélise les

interactions entre les objets ou entre utilisateur et objet, c’est-à-dire ils représentent
une vue dynamique du système qui permet de montrer en évidence les interactions
entre les acteurs et le système selon un ordre chronologique. Ci-après quelques-uns
des principaux diagrammes de séquences qui décrivent le déroulement du cas
d’utilisation précédemment cité. Pour un cas d’utilisation donne du système, on fait
apparaitre l’ordre temporel des actions. Dans ce qui suit, nous allons dresser les
diagrammes de séquences de chaque cas d’utilisation :

i. Le cas d’utilisation - s’authentifier -

C’est le premier scénario qui se déroute lors le déclanchement de l’application.

Selon la figure ci-dessous l’utilisateur est invité à saisir ses paramètres de
connexion. Le système vérifie la disponibilité du login et du mot de passe pour
donner ensuite accès aux fonctionnalités de l’application.

Figure 12 : Diagramme de séquence pour le cas d’utilisation “s’authentifier”

ii. Le cas d’utilisation - s’inscrire -

Selon la figure 13, le système invite l’utilisateur à choisir ses paramètres d’accès
(email et mot de passe). il essaie ensuite de vérifier l’unicité de l’adresse email.
Lorsque tout est réglé, un message de confirmation évoque le succès de l’opération.

38
 Figure 13 : Diagramme de séquence pour le cas d’utilisation “s’inscrire”

iii. Le cas d’utilisation “Rechercher des annonces”

Après la procédure d’authentification, l’utilisateur pourrait consulter la leste des

annonces récemment déposées, il peur effectué une recherche globale ou par
catégorie.

Visiteur

Figure 14 : diagramme de séquences pour le cas d’utilisation “Rechercher des annonces”

39
 iv. Le cas d’utilisation “Déposer une annonce”

La figure 15 illustre les interactions entre un utilisateur et l’application lorsque ce

dernier veut déposer une nouvelle annonce

Figure 15 : Diagramme de séquences pour le cas d’utilisation “Déposer une annonce”

3. Conclusion

Tout au long de ce chapitre, nous avons détaillé la conception de notre application à

travers le diagramme de classes ainsi que les diagrammes de séquences associées
afin que la phase réalisation et la mise en place de l’application soit plus souple et
plus aisée. Le chapitre suivant mettra en évidence, le fruit de ce passage et les
différents résultats du développement de l’application demandée.

40
 5
Réalisation et développement

41
1. Introduction

Dans ce chapitre, nous allons faire des choix sur le codage. Nous sommes arrivées
pratiquement à la fin du processus de développement. Nous commençons par la
présentation de l’environnement de développement, les outils et langages de
programmation, ainsi que les services web utilises dans notre application. Enfin,
nous terminons par la présentation des réalisations effectuées au cours de ce projet.

2. Environnement de développement
a. Android Studio

Android Studio est un nouvel environnement pour le développement et

programmation entièrement intègré qui a enté récemment lance par Google pour
les systèmes Android, il a été conçu pour fournir un environnement de
développement et une alternative à Éclipse qui est l’IDE le plus utilisé. Android
Studio permet de voir chacun des changements visuels que vous effectuez sur votre
application et en temps réel, vous pourrez voir aussi son effet sur différents
appareils Android.

Android Studio offre aussi d’autres choses :

- Un environnement de développement robuste.
- Une manière simple pour tester les performances sur d’autres types
d’appareils.
- Des assistants et des modèles pour les éléments communs trouvés sur tous
les programmateurs Android.
- Un éditeur complet avec une panoplie d’outils pour accélérer le
développement de votre application.

b. Eclipse

Éclipse est un environnement de développement intègré libre extensible, universel

et polyvalent, permettant potentiellement de créer des projets de développement
mettant en œuvre n’importe quel langage de programmation. Éclipse est
principalement écrit en Java (à l’aide de la bibliothèque graphique SWT, d’IBM), et
ce langage, grâce à des bibliothèques spécifiques, est également utilisé pour écrire
des extensions. La spécificité d’Eclipse vient du fait de son architecture totalement
développée autour de la notion de plug-in : toutes les fonctionnalités de cet atelier
logiciel sont développées en tant que plug-in.

42
 c. XAMPP

XAMPP est un ensemble de logiciels permettant de mettre en place facilement

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 Maria DB 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 systèmes
d'exploitation les plus répandus.

d. PhpMyAdmin

PhpMyAdmin est un outil logiciel gratuit écrit en PHP, destiné à gérer

l’administration de MySQL sur le Web. Prend en charge une large gamme
d’opérations sur MySQL tel que la gestion des bases de données, des tableaux, des
colonnes, des relations, des index, des utilisateurs, des autorisations, etc. ses
opérations peuvent entre effectuées via l’interface utilisateur, alors il offre aussi la
possibilité́ d’exécuter directement une instruction SQL.

e. Apache

Le logiciel libre Apache HTTP est un serveur HTTP créé et maintenu au sein de la
fon- dation Apache. C’est le serveur HTTP le plus populaire du World Wide Web. Il
est distribué́ selon les termes de la licence Apache.

3. Langages de développement
a. JAVA

C’est un langage de programmation orienté objet, développé par Sun Microsystems.

Il permet de créer des logiciels compatibles avec de nombreux systèmes
d’exploitation (Windows, Linux, MacOs, Solaris). Java donne aussi la possibilité́ de
développer des programmes pour téléphones portables et assistants personnels.
Enfin, ce langage peut être utilisé sur internet pour des petites applications intégrées
à la page web (applet) ou encore comme langage serveur (JSP).

43
 b. JSON

JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un

format léger d’échange de données. Il est facile à̀ lire ou à̀ écrire pour des humains.
Il est aisément analysable ou générable par des machines. Il est basé sur un sous-
ensemble du langage de programmation JavaScript. JSON est un format texte
complètement indépendant de tout langage, mais les conventions qu’il utilise seront
familières à tout programmeur habitué aux langages descendant du C, comme par
exemple : C lui-même, C++, C#, Java, JavaScript, Perl, Python et bien d’autres. Ces
propriétés font de JSON un langage d’échange de données idéal.
JSON se base sur deux structures :

- Une collection de couples nom/valeur. Divers langages la réifient par un objet, un

enregistrement, une structure, un dictionnaire, une table de hachage, une liste typée
ou un tableau associatif.

- Une liste de valeurs ordonnées. La plupart des langages la réifient par un tableau,
un vecteur, une liste ou une suite.

4. Frameworks
a. Spring boot

Spring est effectivement un conteneur dit « léger », c’est-à-dire une infrastructure

similaire à un serveur d'applications JEE. Il prend donc en charge la création
d’objets et la mise en relation d’objets par l’intermédiaire d’un fichier de
configuration qui décrit les objets à fabriquer et les relations de dépendances entre
ces objets. Le gros avantage par rapport aux serveurs d’application est qu’avec
Spring, les classes n’ont pas besoin d’implémenter une quelconque interface pour
être prises en charge par le Framework (au contraire des serveurs
d'applications JEE et des EJBs). C’est en ce sens que Spring est qualifié de
conteneur « léger ».

44
 b. JPA

La Java Persistence API (abrégée en JPA), est une interface de programmation Java
permettant aux développeurs d'organiser des données relationnelles dans des
applications utilisant la plateforme Java. La Java Persistence API est à l'origine issue
du travail du groupe d'experts JSR 220. La persistance dans ce contexte recouvre
trois zones :

• l'API elle-même, définie dans le paquetage javax.persistence

• le langage Java Persistence Query (JPQL)
• l'objet/les métadonnées relationnelles

5. Architecture du projet
a. Architecture de l’application mobile

La figure ci-dessous montre l’architecture qui a été mise en place dans le cadre de
ce projet, cette architecture et largement et largement admis comme la plus efficace
et généralisable à n’importe quel projet Application Mobile et aussi Application
Web en utilisant le patron de conception MVC au lieu de l’architecture n-tiers.

Le pattern MVC permet de bien organiser son code source. Il va vous aider à savoir
quels fichiers créer, mais surtout à définir leur rôle. Le but de MVC est justement de
séparer la logique du code en trois parties que l'on retrouve dans des fichiers
distincts.

• Modèle : cette partie gère les données de votre site. Son rôle est d'aller
récupérer les informations « brutes » dans la base de données, de les
organiser et de les assembler pour qu'elles puissent ensuite être traitées par
le contrôleur.
• Vue : cette partie se concentre sur l'affichage. Elle ne fait presque aucun
calcul et se contente de récupérer des variables pour savoir ce qu'elle doit
afficher. On y trouve essentiellement du code XML.
• Contrôleur : cette partie gère la logique du code qui prend des décisions.
C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le
contrôleur va demander au modèle les données, les analyser, prendre des
décisions et renvoyer le texte à afficher à la vue. Le contrôleur contient
exclusivement du JAVA.

45
 DAO

Modèles

Contrôleurs

Vues

Figure 16 : Architecture de l’application Mobile

En plus de l’architecture MVC on ajoute un autre composant, c’est l’accès aux

données DAO (Data Access Object), cette couche nous permet de récupérer les
données dont l’application est besoin sous format JSON on envoie des requetés
HTTP.

Figure 17 : corps d’une repense HTTP sous format JSON

46
 b. Architecture de web service

Figure 18 : Architecture du web service

La figure ci-dessus montre l’architecture MVC du service web (Restful) chaque

paquetage est responsable à un type spécifique des taches comme le tableau suivant
la montre.

paquetage rôle
com.omicron.sodevrsapp. contient les classes persistantes qui représente les tables de la base de données
entity
com.omicron.sodevrsapp. contient l'ensemble des exceptions qui correspond à l'interface de
exception programmation de l'application
com.omicron.sodevrsapp. contient l'ensemble des propriété utiles dans l'application ex "le chemin de
properties téléchargement des fichiers"
com.omicron.sodevrsapp.r contient l'ensemble des interfaces responsable à la manipulation des données
epositories (ajout, mise à jour, suppression, recherche)
com.omicron.sodevrsapp.s contient les interfaces des méthodes obligatoires à implémenter dans chaque
ervice service implémentation de chaque entité
com.omicron.sodevrsapp.s contient les implémentations de chaque service
ervice.implementation
com.omicron.sodevrsapp.s contient l'ensemble des modèles de transfert des données c’est-à-dire ce
hared.dto paquetage qui garantit le bon transfert des données entre les classes
persistantes, les classes de requête et les classes de repense
com.omicron.sodevrsapp. contient les classes qui traite les requêtes des clients et qui prend des décisions,
ui.controller ce paquetage qui est responsable de réception et l'envoie des données du client.
com.omicron.sodevrsapp. contient l'ensemble des modèles du requête HTTP
ui.model.reqest
com.omicron.sodevrsapp. contient l'ensemble des modèles du repense HTTP
ui.model.response
Tableau 2 : les rôles des paquetages du service web

47
6. Quelques interfaces de notre système
a. Accueil

C’est la première interface qui s’aperçoit après

le démarrage de l’application, elle affiche
l’ensembles des annonces de différents
catégories et emplacements, l’interface nous
permet de filtrer par catégorie à l’aide du
ruban des catégories ou d’effectué une
recherche simple d’après le champ de saisie ou
à l’aide d’assistante vocale

Figure 19 : interface d’accueil de l’application mobile

Cette interface nous permet aussi de naviguer aux autres

interfaces par un glisse à gauche pour ouvrir le navigateur
-Figure 20-, comme la figure suivante l’illustre. Le
navigateur nous permet de naviguer au compte
d’utilisateur si l’utilisateur est authentifié sinon il nous
envoie vers l’interface d’authentification (Figure 22) il
nous permet aussi de sélectionner une catégorie pour
filtrer les annonces de l’accueil -figure 21-, consulter
les conversations, consulter la liste d’intérêts et visualiser
les notifications.

Figure 20 : interface d’accueil de l’application mobile

(navigateur)

48
 Figure 21 : interface des catégories

b. Authentification

Cette interface permet à l’utilisateur de s’authentifié s’il n’est pas encore inscrit il
peut créer un compte en cliquant sur le lien « create new account » qui vas nous
diriger vers l’interface d’inscription, comme la figure 23 l’indique.

Figure 22 : interface d’authentification. Figure 23 : interface d’inscription.

49
 c. Déposer une Annonce
i. Capture des images

La procédure de dépôt d’une annonce est la plus importante des fonctionnements

de l’application nous avons l’intention de réaliser une interface claire est simple à
utiliser

Figure 24 : Demande de permission. Figure 25 : interface de capture d’image.

La figure 24 illustre la demande des permissions pour accéder au périphérique du

camera pour prendre des photos.

La figure 25 illustre l’interface de capture des photos, les images capturées sont
listées en bas de l’interface et numéroté par ordre de capture, si l’utilisateur veut
annuler la sélection d’une image il suffit de cliquer sur le numéro d’ordre. Après,
l’utilisateur peut confirmer la sélection des images en cliquant sur le bouton « ».

50
 ii. Détails Produit

Après la sélection des images l’utilisateur doit

sélectionner une catégorie et après renseigner
les champs obligatoire -titre et prix du produit-,
puis il a le choix de remplir les autres champs
de détails. Ces champs sont générés
dynamiquement en se basant sur la catégorie du
produit.

Enfin l’utilisateur peut déposer son annonce

lorsqu’il clique sur le bouton poster.

Figure 26 : interface de formulaire d’une annonce

d. Magasin

Notre application via les magasins offre une

plateforme aux utilisateurs de représenté leurs
produits aux visiteurs sans avoir des magasin
réel, l’interface e affiche en premier les derniers
produits ajoutés par le gestionnaire du magasin,
et elle donne à l’utilisateur le choix de
s’abonner chez un magasin pour recevoir les
dernières actualités.

Figure 27 : interface utilisateur Magasin

51
 e. Consulter Produit

Au moment du clique sur une annonce ou un produit que ça soit dans l’accueil ou
lors de consultation d’un magasin l’interface de détails du produit s’affiche comme
l’interface suivante l’illustre.

Figure 28 : interface de détails d’un produit de type Voiture.

Figure 28 : interface de détails d’un produit de type Moniteur.

Figure 28 : interface de détails du produit. Figure 29 : interface de détails du produit.

52
 Conclusion générale et perspectives

Pour mettre en œuvre ce projet, nous avons étudié, conçu et réalisé́ à travers de ce
travail un système (application) mobile qui permet aux de concevoir et développer
une solution informatique dédié au personnel dans le cadre de la simplification des
actions de vente et d’achat entre les particuliers et / ou les professionnels.

Nous avons dans un premier temps exposé les applications disponibles dans le
marché. Nous avons présenté dans la deuxième partie l’univers Android, en parlant
les différentes plateformes dédiées au développement des application mobiles et par
la suite le choix de la solution technique à adopter. Ensuite nous avons entamé les
différentes étapes du processus de développement UP, afin de mettre en œuvre
notre solution à la problématique.

Nous avons commencé par l’identification des besoins qu’on a ensuite modélisé
sous, forme de diagrammes de cas d’utilisation, diagrammes de séquences,
diagramme de classe et terminer par la réalisation de notre application.

Lors de ce travail, Nous avons pu mettre en pratique nos connaissances théoriques

acquises durant notre formation.

Ce projet a fait l’objet d’une expérience intéressante, Il nous a permis de réaliser

que le projet de réalisation d’une application mobile est un ensemble de plusieurs
actions planifiées et dépendantes les unes des autres. Toutes les étapes de ce projet
nous a permis d’enrichir notre expérience notamment dans les différents outils et
langages dédiés à la programmation mobile.

Nous avons retenu également que la réalisation d’une application mobile demande
une bonne organisation et une cohérence entre les différents acteurs du projet.
Étant donné que tout travail informatique a été toujours l’œuvre d’une équipe.

Bien que notre application n’est pas encore fini, nous avons l’attention de la
compléter et l’améliorer en terme design (ergonomie), et quelques fonctionnalités
tel que les notifications, l’itinéraire, recherche avancé, sécurité́ et la déployer au
niveau de Play store afin de pouvoir l’exploiter.

53