Rapport de projet de fin d'étude licence informatique et multimédia

Université de Manouba
Institut Supérieur des Art Multimèdias de Manouba

CONCEPTION ET RÉALISATION D’UNE APPLICATION
Androïd : Passion Beauté 1.0

Présenté par :

Encadré par :

Doufani Saif Allah

M. Waddey Moez (ISAMM)

EL Heni Nazih

M. Kaddour Ahmed (NETISSE)

Cycle de Formation LMD
Année universitaire :2010/2011

Résume
Le m-Commerce n’a pas de vocation pour remplacer les canaux traditionnels, y compris
l’Internet sur ordinateur, il convient particulièrement à certains types d’achat basés sur la simplicité des produits et l’urgence de la demande. D’après une étude Gartner, les consommateurs
vont dépenser cette année 6,2 milliards de dollars en téléchargements d’applications mobiles
Androïd, soit une progression de près de 60 % par rapport à 2010. La progression ne devrait
pas s’arrêter en si bon chemin puisqu’en 2013 qui devrait dépasser le chiffre de 21,6 milliards de
téléchargements. Le projet que nous présentons aborde précisément une application conçu pour
fonctionner sur la plate-formeAndroïd. Le projet permet la commercialisation des produits
d’une société qui agit dans le domaine de beauté. L’application permet l’affichage des produits
selon la catégorie et les produits du mois. L’application proposera l’achat sur site du Passion
Beauté.
– Augmenter le trafic du site passion-Beaute.com.
– Fidéliser les abonnés du Passion Beauté.
– Attirer des prospects en leur facilitant l’acte d’achat (produits du mois).
L’application nécessite un espace administrateur Back-office qui permet de faire des mises à
jour du catalogue de produit. L’espace administrateur nécessite également la mise en place des
interfaces de gestion des commandes. Par ailleurs, nous proposons dans notre application une
nouvelle forme d’achat et sélection des produits en vue d’améliorer les méthodes de navigation
dans l’application. En effet, il est nécessaire de disposer d’outils pour gérer les achats, les
commandes, les stocks, la logistique et tous les autres aspects liés à la gestion commerciale,
gestion du catalogue, gestion des achats, logistique, gestion du marque, gestion du contenu et
la logistique.

Abstract
M-Commerce is not intended to replace the traditional channels, including the Internet on
a computer, it is particularly suited to certain types of purchases based on product simplicity
and urgency of the request. According to Gartner, consumers will spend this year 6.2 billion
in Androïd mobile applications downloads, an increase of nearly 60 % over 2010. The growth
should not stop there way since 2013 should exceed the figure of 21.6 billion downloads. These
are of course trade online tops. Our project presented here specifically application designed to
run on the Androïd platform. The project allows the marketing of products of a company
acting in the beauty product’s field. The application allows the display of products by category
and offers of month. The application offers on-site purchase of Passion Beauty.
– Increase site traffic passion-beaute.com.
– Retain subscribers Passion Beauty.
– Attracting prospects in facilitating the act of purchase (products of month).
The application requires an administrator space (Back Office), which should provide an
interface for management and updating the product catalog through a Back-office. Furthermore, we propose a new form of purchasing and product selection to improve the methods of
navigation within the application. Indeed, it is necessary to have tools to manage purchasing, ordering, inventory and all other aspects of business management, catalog management, purchase
management, logistics, brand management and content management.

Remerciement
Avant d’entamer ce rapport de projet de ﬁn d’études, nous tenons à exprimer notre sincère
gratitude envers tous ceux qui nous ont aidé ou ont participé au bon déroulement de ce projet.
Tout d’abord, nous tenons à remercier NETISSE qui nous a bien accueillis. En eﬀet nous avons
eu le plaisir de travailler dans une entreprise de grande valeur. Nous nous devons remercier
M. Waddey Moez pour sa générosité, sa compréhension et son aide inestimable. Nous sommes
reconnaissant également à M. Ahmed Kadour notre encadreur durant le déroulement du projet
pour son aide à la mise en place de ce modeste travail.

Dédicace
A MA MÈRE
Tu m’as donné la vie, la tendresse et le courage pour réussir .Tout ce que
je peux t’offrir ne pourra exprimer l’amour et la reconnaissance que je te
porte. En témoignage, je t’offre ce modeste travail pour te remercier pour
tes sacrifices et pour l’affection dont tu m’as toujours entouré.
A MON PÈRE
L’épaule solide, l’œil attentif compréhensif et la personne la plus digne de
mon estime et de mon respect. Aucune dédicace ne pourrait exprimer mes
sentiments, que Dieu te préserve et te procure Santé et longue vie.
A mes frères
A ma sœur
A ma famille
A mes amis ...

Doufani Saif Allah

Dédicace
A mes chers parents, Que nulle dédicace ne puisse exprimer ce que je
leurs dois, pour leur bienveillance, leur affection et leur soutien Trésors de
bonté, de générosité et de tendresse, en témoignage de mon profond amour
et ma grande reconnaissance « Que Dieu vous garde ». A mes chers frères et
sœur, En témoignage de mes sincères reconnaissances pour les efforts qu’ils
ont consenti pour l’accomplissement de mes études. Je leur dédie ce modeste
travail en témoignage de mon grand amour et ma gratitude infinie. A tous
mes amis,
Pour leur aide et leur soutien moral durant l’élaboration du travail de fin
d’étude. A toute ma Famille
A tout ceux qui m’aiment

El Heni Nazih

Table des matières
Introduction générale

1

1 Etude préalable

3

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.2 Étude de l’existant . . . . . . . . . . . . . . . . . . . . . .

3

1.3 Analyse de l’application Amazon.fr

. . . . . . . . . . . . .

4

1.3.1

Présentation de l’application Amazon pour Androïd

4

1.3.2

Analyse fonctionnelle . . . . . . . . . . . . . . . . .

4

1.3.3

Analyse technique . . . . . . . . . . . . . . . . . . .

6

1.4 Analyse de l’application eBay officielle pour Andrïd

. . .

6

1.4.1

Présentation générale . . . . . . . . . . . . . . . . .

7

1.4.2


7

1.4.3


9

1.5 Analyse du l’application Best Buy pour Androïd . . . . .

9

1.5.1

Présentation de Best Buy . . . . . . . . . . . . . . .

9

1.5.2


10

1.5.3


12

1.6 Spécification des besoins fonctionnels . . . . . . . . . . . . .

12

1.6.1

Identification des acteurs . . . . . . . . . . . . . . .

12

TABLE DES MATIÈRES

1.6.2

ii

Description des exigences fonctionnelles . . . . . . .

13

1.7 Modèle de navigation . . . . . . . . . . . . . . . . . . . . .

14

1.7.1

Modèle linéaire . . . . . . . . . . . . . . . . . . . .

14

1.7.2

Modèle hiérarchique . . . . . . . . . . . . . . . . . .

15

1.7.3

Modèle composite . . . . . . . . . . . . . . . . . . .

16

2 Conception technique

17

2.1 introduction . . . . . . . . . . . . . . . . . . . . . . . . . .

17

2.2 Conception graphique . . . . . . . . . . . . . . . . . . . . .

17

2.2.1

Synopsis . . . . . . . . . . . . . . . . . . . . . . . .

17

2.2.2

Charte graphique . . . . . . . . . . . . . . . . . . .

18

2.2.3

Gabarit . . . . . . . . . . . . . . . . . . . . . . . . .

19

2.3 Conception détaillée . . . . . . . . . . . . . . . . . . . . . .

19

2.4 Description de la vue statique . . . . . . . . . . . . . . . .

20

2.4.1

Base de données Back-oﬃce

. . . . . . . . . . . . .

21

2.4.2

Base de données Application . . . . . . . . . . . . .

21

2.4.3

Diagramme de classe du Back-oﬃce . . . . . . . . .

22

2.4.4

Diagramme de classe de l’application

. . . . . . . .

22

2.4.5

Cas d’utilisation global . . . . . . . . . . . . . . . .

23

2.5 Cas d’utilisation global relatif à un client . . . . . . . . . .

23

2.6 Le diagramme de cas d’utilisation recherche et sélection des
produits . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

2.7 Cas d’utilisation gérer son panier du site Passion Beauté . .

24

2.8 Cas d’utilisation partage de l’application . . . . . . . . . . .

24

2.9 Cas d’utilisation global relatif à l’administrateur . . . . . .

25

TABLE DES MATIÈRES

iii

2.10 Cas d’utilisation mise à jour des produits, des catégories et
des marques . . . . . . . . . . . . . . . . . . . . . . . . . .

26

2.11 Cas d’utilisation diagramme de composants . . . . . . . . .

26

2.12 Description de la vue dynamique . . . . . . . . . . . . . . .

27

2.13 Les diagrammes de séquence . . . . . . . . . . . . . . . . .

27

2.14 Diagramme de séquence d’aﬃchage de galerie des images . .

27

2.15 Diagramme de séquence détail produits . . . . . . . . . . .

28

2.16 Diagramme de séquence gérer panier du site . . . . . . . . .

28

2.17 Diagramme de séquence de mise à jour des catégories . . . .

28

2.18 Diagramme de séquence de mise à jour des marques . . . .

28

2.19 Diagramme de séquence de mise à jour des produits . . . .

28

2.20 Diagramme de séquence d’aﬃchage des produits triées par
marque

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.21 Diagramme de séquence de partage

29

. . . . . . . . . . . . .

29

2.21.1 Conclusion : . . . . . . . . . . . . . . . . . . . . . .

29

3 Réalisation et Test

44

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . .

44

3.2 Environnement du travail . . . . . . . . . . . . . . . . . . .

44

3.2.1

Environnement matériel . . . . . . . . . . . . . . . .

44

3.2.2

Environnement logiciel . . . . . . . . . . . . . . . .

45

3.3 Tests et réalisation . . . . . . . . . . . . . . . . . . . . . .

46

3.3.1

Diagramme de déploiement . . . . . . . . . . . . . .

46

3.3.2

Scénario d’exécution . . . . . . . . . . . . . . . . . .

47

Conclusion et Perspectives

69

TABLE DES MATIÈRES

4 ANNEXES

iv

71

4.1 Le formalisme d’UML . . . . . . . . . . . . . . . . . . . . .

71

4.2 Les diagrammes . . . . . . . . . . . . . . . . . . . . . . . .

72

4.3 Les modèles d’élément . . . . . . . . . . . . . . . . . . . . .

72

4.4 Les diagrammes . . . . . . . . . . . . . . . . . . . . . . . .

73

4.4.1

Diagrammes Structurels ou Diagrammes statiques (cf.
Structure Diagram) . . . . . . . . . . . . . . . . . .

73

4.5 Standardisation et Certiﬁcation UML : . . . . . . . . . . . .

75

4.6 Exemple de séquence de création des diagrammes . . . . . .

75

4.7 Logiciels de modélisation UML . . . . . . . . . . . . . . . .

75

Bibliographie et Netographie

76

Table des figures
1.1 application Amazon . . . . . . . . . . . . . . . . . . . . . .

5

1.2 Application eBay . . . . . . . . . . . . . . . . . . . . . . .

8

1.3 Application BestBuy . . . . . . . . . . . . . . . . . . . . .

11

1.4 modele lineaire . . . . . . . . . . . . . . . . . . . . . . . . .

14

1.5 Modèle Hiérarchique . . . . . . . . . . . . . . . . . . . . . .

15

1.6 Modèle Composite . . . . . . . . . . . . . . . . . . . . . . .

16

2.1 Gabarit de notre boutique . . . . . . . . . . . . . . . . . .

20

2.2 Base de données Back-office . . . . . . . . . . . . . . . . .

21

2.3 Base de données Application . . . . . . . . . . . . . . . . .

21

2.4 Diagramme de Classe du Back-office . . . . . . . . . . . . .

22

2.5 Diagramme de Classe de l’application . . . . . . . . . . . .

22

2.6 Cas d’utilisation global . . . . . . . . . . . . . . . . . . . .

30

2.7 Diagramme de cas d’utilisation global relatif à un client . .

31

2.8 Cas d’utilisation recherche et sélection des produits . . . . .

32

2.9 Diagramme de cas d’utilisation accéder au site passion-beauté.com 33
2.10 Cas d’utilisation partage de l’application . . . . . . . . . . .

33

2.11 Cas d’utilisation global administrateur . . . . . . . . . . . .

34

2.12 Cas d’utilisation mise à jour produits, catégories et marques

35

TABLE DES FIGURES

vi

2.13 Diagramme de composants . . . . . . . . . . . . . . . . . .

36

2.14 diagramme de Séquence galerie image . . . . . . . . . . . .

36

2.15 Diagramme de Séquence détail produits . . . . . . . . . . .

37

2.16 Diagramme de séquence gérer panier du site . . . . . . . . .

38

2.17 diagramme de séquence de mise à jour des catégories . . . .

39

2.18 supprimer une ligne du panier . . . . . . . . . . . . . . . .

40

2.19 Diagramme de séquence de mise à jour des produits . . . .

41

2.20 Diagramme de séquence d’aﬃchage des produits triées par
marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

2.21 Diagramme de séquence de partage . . . . . . . . . . . . . .

43

3.1 Diagramme de déploiement . . . . . . . . . . . . . . . . . .

46

3.2 Capture d’écran : page inscription . . . . . . . . . . . . . .

47

3.3 Capture d’écran : page connexion . . . . . . . . . . . . . .

48

3.4 Capture d’écran : ajout catégorie . . . . . . . . . . . . . . .

49

3.5 Capture d’écran : page catégorie . . . . . . . . . . . . . . .

49

3.6 Capture d’écran : ajout marque . . . . . . . . . . . . . . .

50

3.7 Capture d’écran : page marque . . . . . . . . . . . . . . . .

51

3.8 Capture d’écran : page produit . . . . . . . . . . . . . . . .

51

3.9 Capture d’écran : page produit . . . . . . . . . . . . . . . .

52

3.10 Capture d’écran : la première page de chargement . . . . . .

53

3.11 Capture d’écran : la deuxième page de chargement . . . . .

53

3.12 Capture d’écran : page d’accueil de l’application embarqué .

54

3.13 Capture d’écran : page à propos . . . . . . . . . . . . . . .

55

3.14 Capture d’écran : page des catégories . . . . . . . . . . . .

56

3.15 Capture d’écran : liste des accessoires . . . . . . . . . . . .

57

TABLE DES FIGURES

vii

3.16 Capture d’écran : liste des pinceaux . . . . . . . . . . . . .

58

3.17 Capture d’écran : liste des produits de bain . . . . . . . . .

59

3.18 Capture d’écran : page de partage . . . . . . . . . . . . . .

60

3.19 Capture d’écran : partage sur facebook . . . . . . . . . . .

61

3.20 Capture d’écran : partage sur twitter . . . . . . . . . . . . .

62

3.21 Capture d’écran : envoyer un mail . . . . . . . . . . . . . .

63

3.22 Capture d’écran : galerie des marques . . . . . . . . . . . .

64


65


66


67

3.26 Capture d’écran : galerie d’image . . . . . . . . . . . . . . .

68

4.1 Les vues . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72

Liste des tableaux
1.1 Connotation et dénotation du l’application Amazon.fr. . . .

6

1.2 Connotation et dénotation du l’application eBay oﬃcielle. .

9

1.3 Connotation et dénotation du l’application Best Buy. . . . .

12

2.1 Description du cas d’utilisation global relatif à un client . .

23

2.2 Description du cas d’utilisation recherche et sélection des produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

2.3 Description de cas d’utilisation gérer son panier du site Passion Beauté . . . . . . . . . . . . . . . . . . . . . . . . . .

25

2.4 Description de cas d’utilisation partage de l’application . . .

25

2.5 Description du cas d’utilisation global relatif à l’administrateur 26
2.6 Description de cas d’utilisation mise à jour produits, catégories et marques . . . . . . . . . . . . . . . . . . . . . . .

27

Introduction Générale
Dans le cadre de notre projet de ﬁn d’étude, nous nous intéressons à
développer une application qui sert à l’achat en ligne des produits de beauté,
reconnu dans le domaine informatique par le nom ” E-commerce ”, cette application peut être développer sur plusieurs plate-forme notamment : Androïd , Mac OS et BlackBerry etc. Les supports de notre application Ecommerce sont les téléphones portable mené, d’un système d’exploitation
Androïd. L’OS 1 Aïndroïd est gratuit et open source fondé sur un noyau
Linux destiné aux Smartphones, PDA 2 et autres terminaux mobile comme
les tablettes tactiles. La plateforme 3 Androïd ne cesse d’accroitre sa part
du marché, il occupe la première place en terme de vente au niveau mondiale avec 33.3 million d’unité en 4 ème trimestre 2010 l’équivalant de 370
téléphones/jour.[1]
Le rythme de nos jours est accéléré et les gens ont besoin de réduire leurs déplacements, ainsi le nombre des utilisateurs d’Androïd ne cesse d’accroître
donc on a décidé de développer une application sur le système d’exploitation Androïd pour commercialiser les produits de beauté la société ’Passion
Beauté’

1. L’OS est l’acronyme de operaiting system
2. PDA est l’acronyme de Personal Digital Assistant
3. le mot plateforme dans ce manuscrit désigne l’ensemble des ressources logicielles qui sont fournies par les
systèmes embarqué

LISTE DES TABLEAUX

2

Cadre du projet
Ce travail s’inscrit dans le cadre de notre projet de fin d’études pour
l’obtention du diplôme universitaire en Informatique et Multimédias effectué
au sein de la Société NETISSE. Au cours de ce stage la société NETISSE
nous a confié la conception et la réalisation d’une application Androïd
dans un milieu pur professionnelle.
Organisation du Rapport
Au niveau de ce manuscrit, nous décrivons la mise en place d’une application Androïd permettant, grâce à un catalogue des produits, l’achat en
ligne via paiement sécurisé (carte de crédit, e-dinar). Le rapport présente
aussi les impacts opérationnels, internes et externes, du lancement d’une
boutique en Ligne. Dans un premier chapitre nous présentons le cadre général.
Dans le deuxième, nous Analyserons quelques applications spécialisés dans
la vente afin de dégager les besoins de notre application. Ensuite, nous détaillerons les spécifications des besoins. Dans le troisième Chapitre, nous
procéderons à la description de la conception de la solution. La réalisation
et Les tests se situeront au niveau du quatrième chapitre de notre rapport.
Nous terminons le rapport par une conclusion générale en nous présentons
quelques perspectives et futur améliorations concernant notre application.

Chapitre 1

Etude préalable
1.1

Introduction

Dans ce chapitre, nous présentons l’étude préalable qui doit être élaborer avant d’entamer la mise en place de notre application. Pour cela, nous
présenterons l’étude des applications de vente en ligne pour Androïd [4].
Nous détaillerons ensuite les exigences fonctionnelles de la boutique, à savoir
les fonctionnalités requises par l’utilisateur. Nous ajouterons enﬁn des exigences non fonctionnelles et des contraintes de conception pour nous placer
dans l’optique du démarrage d’un projet réel.
1.2

Étude de l’existant

L’étude de l’existant permet de déterminer les points faibles et les points
forts d’un produit actuel pour pouvoir déterminer les besoins du client, en
vue d’en prendre en considération lors de la conception et la réalisation
de la boutique en ligne. Dans cette section, nous présentons une analyse de
quelques exemples d’applications marchands. Ensuite, nous formulerons une
solution de la problématique.


1.3

4

Analyse de l’application Amazon.fr

Dans cette section, nous présentons l’application Amazon.fr. Ensuite
nous procédons à une analyse fonctionnelle, technique et graphique de l’application étudié.
1.3.1

Présentation de l’application Amazon pour Androïd

L’application Amazon permet aux consommateurs de chercher des produits, de lire des commentaires et de faire des achats sur Amazon.fr depuis
leur téléphone portable. Elle permet aussi à un produit d’obtenir immédiatement des informations sur celui-ci, dont son prix et sa disponibilité sur
Amazon.fr. Les consommateurs d’Amazon ont accès à leurs panier, leurs
listes d’envie, leurs options de paiement, l’historique de leurs achats. Toutes
les commandes sont effectuées via les serveurs sécurisés d’Amazon. Tous les
prix sont en euro et les produits se retrouvent sur le site Amazon.fr.
1.3.2

Analyse fonctionnelle

Tel que le montre la figure 1.1, l’application Amazon offre plusieurs fonctionnalités au visiteur. Il lui permet de :
1. Effectuer immédiatement des achats parmi la sélection des produits de
l’application Amazon.fr et ce ci via les serveurs sécurisés du site.
2. Consulter des images de produits et lire des commentaires de consommateurs où que vous soyez et au moment que vous choisirez.
3. Suivre le statut d’une commande récente depuis votre téléphone.
4. Obtenir immédiatement des informations sur le produit, dont son prix et
sa disponibilité (pour les téléphones avec un appareil photo autofocus)
compatible avec les versions 1.6, 2.0, 2.1, ou 2.2 d’Androïd.


(a)

5

(b)

(c)

(d)
Figure 1.1 – application Amazon


6

– La figure 1.1 (a) illustre la page d’accueil de l’application Amazon
– La figure 1.1 (b) illustre la liste des produits proposé par l’application
Amazon
– La figure 1.1 (c) illustre les informations détaillé d’un produit
– La figure 1.1 (d) illustre la page commentaires clients
1.3.3

Analyse technique

L’application Amazon.fr est développé avec le langage Java (SDK Androïd). Les images contenues dans l’application sont des images dont le
format est JPEG.
Dénotation

Connotation

La page d’accueil est disposée

Cette disposition donne un sens précis de lecture

en deux parties horizontales.

qui rend la page plus large.

Les formes utilisées sont des

Les formes rectangulaires donnent de la stabil-

formes rectangulaires avec des

ité à l’interface et les coins arrondis ajoutent du

coins arrondis.

dynamisme.

La gamme des couleurs util-

L’utilisation du contraste entre le bleu, le noir et

isées sont les tons du bleu, l’o-

l’orangé ravive l’interface. L’utilisation du noir

rangé et noir.

et de l’orangé pour réveiller le bleu et empêcher
sa continuité.

Table 1.1 – Connotation et dénotation du l’application Amazon.fr.

1.4

Analyse de l’application eBay officielle pour Andrïd

Dans cette section nous présentons l’application eBay.fr. Ensuite nous
procédons à une analyse fonctionnelle, technique et graphique.


1.4.1

7

Présentation générale

Avec l’application eBay, nous pouvons parcourir les annonces, achetez
des objets et consultez les activités eBay. Ainsi, l’application eBay permet
de recevoir des alertes lorsque les objets sont en ventraux enchère ou vos
Affaires à suivre se terminent bientôt.
1.4.2


Cette application permet aux utilisateurs de :
1. Accéder facilement au compte eBay.
2. Consulter la description et les détails de l’objet.
3. Recevoir des notifications lorsqu’une de vos Affaires à suivre se termine
bientôt.
4. Afficher les détails sur le vendeur, notamment son profil d’évaluation et
ses évaluations récentes par les autres utilisateurs.


8

(a)

(b)

(c)

(d)
Figure 1.2 – Application eBay

1.5 Analyse du l’application Best Buy pour Androïd

9

– La figure 1.3 (a) illustre la page d’accueil de l’application eBay
– La figure 1.3 (b) illustre les votes des clients pour le produit ”HARLEY
DAVIDSON”
– La figure 1.3 (c) illustre la liste des produits gagnés
– La figure 1.3 (d) illustre le résultat de la recherche pour ” pantech 7000
”
1.4.3

Analyse technique

L’application eBay est développé avec le langage Java (SDK ANDROÏD).
Les images contenues dans l’application sont des images dont le format est
JPEG.
Dénotation

Connotation




qui rend la page plus large





coins arrondis.

dynamisme.

La typographie utilisée est

Cette typographie facilite la lecture de la page

sans empattement.

de l’application.

Table 1.2 – Connotation et dénotation du l’application eBay officielle.

1.5

Analyse du l’application Best Buy pour Androïd

Dans cette section présentant l’application Best Buy, nous procédons à
une analyse fonctionnelle et technique.
1.5.1

Présentation de Best Buy

Acheteur Be Happy.


10

L’application de Best Buy offre une nouvelle façon d’achat des technologies dernière cri.Elle permet ainsi de parcourir le catalogue de produits
complet Best Buy, comparer les spécifications des produits, et créer une liste
de produit.
– l’application Best Buy est menu d’un système de recherche avancé qui
permet de trouver rapidement les produits préférés, lire les commentaires, et de trouver la disponibilité en magasin.
– Achat des téléphones et des produits qui sont livrés directement à
domicile.
– La fonction de mise à jour permet d’afficher vos derniers achats, le
suivi des points, et le découvert des dernières offres.
1.5.2


Recherchez, suivez et achetez des objets, où vous soyez
1. Accédez facilement à Best Buy
2. Consultez la description et les détails de l’objet
3. Recevez des notifications lorsqu’une de vos Affaires à suivre se termine
ou lorsqu’un membre a surenchéri
4. Affichez les détails sur le vendeur, notamment son profil d’évaluation
et ses évaluations récentes
5. Affichez les autres objets du vendeur


11

(a)

(b)

(c)

(d)
Figure 1.3 – Application BestBuy

1.6 Spécification des besoins fonctionnels

12

– La figure 1.5 (a) illustre la page de la description détaillé d’un produit
– La figure 1.5 (b) illustre la page de la comparaison entre deux produit
– La figure 1.5 (c) illustre la liste des services offertes par l’application
– La figure 1.5 (d) illustre le résultat d’une recherche
1.5.3

Analyse technique

L’application Best Buy est développée avec le langage Java (SDK Androïd). Les images contenues dans l’application sont des images dont le
format est JPEG et GIF.
Dénotation

Connotation




qui rend la page plus large.





coins arrondis.

dynamisme.

La typographie utilisée est

Cette typographie facilite la lecture de la page

sans empattement.

de l’application.

Table 1.3 – Connotation et dénotation du l’application Best Buy.

1.6

Spécification des besoins fonctionnels

Dans cette partie nous identifions les acteurs de notre boutique en ligne
afin de pouvoir dégager les besoins fonctionnels.
1.6.1

Identification des acteurs

L’application doit fournir un ensemble de fonctionnalités aux clients.
En effet, l’application Permettra aux clients d’effectuer leurs achats et de
lancer des commandes. Cependant, nous Parvenons à dégager deux acteurs

1.6 Spécification des besoins fonctionnels

13

principaux qui sont :
– Le client qui utilise l’application et procède à l’achat d’un article.
– L’administrateur qui doit gérer le bon fonctionnement de l’application.
1.6.2

Description des exigences fonctionnelles

L’application doit permettre au client de :
1. Rechercher des produits
– Trier par marque.
– Trier par catégorie
– Trier par produits de mois.
2. Visualiser des échantillons de produits
– Via le galerie d’image.
3. Gérer son panier
– Accéder au panier du site.
– Modifier le panier du site.
4. Partager l’application
– Sur twitter
– Sur facebook
– Par mail
– Par sms
L’application doit permettre à l’administrateur de :
1. Gérer les catégories
– Ajouter une catégorie.
– Modifier une catégorie.
– Supprimer une catégorie.

1.7 Modèle de navigation

14

– Lister les catégories.
2. Gérer les marques
– Ajouter une marque.
– Modifier une marque.
– Supprimer une marque.
– Lister les marques.
3. Gérer les produits
– Ajouter un produit.
– Modifier un produit.
– Supprimer un produit.
– Lister les produits.
1.7

Modèle de navigation

Le modèle de navigation permet de définir la manière de navigation dans
la boutique. Les principaux modèles de navigation sont les suivants :
1.7.1

Modèle linéaire

Dans le modèle linéaire la page comporte un lien qui nous amènera à la
page suivante (i.e., quand on ne peut pas naviguer de la même page aux
autres pages du site). En générale, les liens sont des pages dites page suivants
et page précédents.

Figure 1.4 – modele lineaire


1.7.2

15

Modèle hiérarchique

Dans le modèle hiérarchique la navigation est plus souple puisqu’elle
est une navigation verticale (i.e., ce modèle permet le passage d’un niveau
hiérarchique à un autre). En utilisant ce modèle on peut atteindre à partir
d’une seul page (exemple page d’accueil) toutes les autres pages présentées
par des liens.

Figure 1.5 – Modèle Hiérarchique


1.7.3

16

Modèle composite

C’est une navigation à la fois verticale et horizontale. C’est une combinaison du modèle linéaire et du modèle hiérarchique. Ce modèle permet
encore une navigation plus souple puisque nous pouvons accéder aux différentes pages d’un niveau hiérarchique inférieur et supérieur en plus d’une
navigation horizontale. Dans notre travail, nous avons eu recours au modèle
composite pour assurer une navigation plus souple pour l’utilisateur et un
minimum de clique pour atteindre une page. Après avoir analysé les modèles de navigation existants, nous avons opté pour le modèle composite car
il présente la navigation la plus pratique. La ﬁgure 1.7.3 illustre l’organigramme de notre boutique.

Figure 1.6 – Modèle Composite

Chapitre 2

Conception technique
2.1

introduction

Dans cette partie nous présentons une modélisation de notre futur application. Nous construisons une vue statique de la solution sous forme de
diagramme de classes et aussi une vue dynamique sous forme de diagramme
de séquence.
2.2

Conception graphique

Lors de cette étape, nous essayerons de mettre en harmonie les couleurs,
les formes, et la typographie. Nous présentons dans cette partie le produit
et la charte graphique de l’établissement.
2.2.1

Synopsis

Tout projet multimédia commence par la rédaction du synopsis, l’information qui le contient doit permettre au lecteur d’imaginer ce que pourrait
être le produit et de connaître ainsi son intérêt.

2.2 Conception graphique

18

Présentation du produit

Sujet : application mobile e-commerce sous Androïd.
Type et support : Smartphone.
Objectifs :
– Développer l’activité e-commerce et l’usage de l’achat en ligne sur site
Web Passion Beauté.
– Développer la rentabilité du site et favoriser le ROI.
– Augmenter le trafic du site Passion Beauté.
– Fidéliser les abonnés Passion Beauté.
– Contribuer au renouvellement du parc mobile.
– Attirer des prospects en leur facilitant l’acte d’achat.
– Fournir une information pertinente et fraîche sur les produits disponibles.
Public et marché visés

– Type de lecteurs visés : les internautes.
– Marché visé : Marché français.
– Contexte d’utilisation : vente de la gamme de produits via l’application
.
2.2.2

Charte graphique

La charte graphique est un document de travail comprenant les recommandations d’utilisation et les caractéristiques des différents éléments graphiques
qui peuvent être utilisés sur les différents supports de communication de l’entreprise. La charte graphique permet de garantir l’homogénéité de la communication visuelle au sein de l’entreprise. Certes Passion Beauté a déjà sa
propre charte graphique, cependant nous sommes obligés de la respecter.

2.3 Conception détaillée

19

Choix des couleurs

En vue du respect de la charte graphique imposée par la société, nous
avons été obligés de garder les mêmes couleurs de la charte.
Choix des formes et des lignes

Pour concevoir notre interface nous avons opté pour les formes rectangulaires à coins arrondis qui symbolisent la stabilité, la vérité et le dynamisme.
Ces formes sont utilisées pour contenir des informations, représenter l’animation et encadrer certains objets. Les rectangles sont présentés à l’horizontale
pour produire un eﬀet panoramique. Nous avons utilisé les coins arrondies
des formes pour dynamiser l’interface car ils symbolisent le mouvement et
l’interaction.
Choix de la typographie

Nous n’avons pas choisi de typographie pour la boutique, car nous avons
repris celle qui est utilisée par le site de Passion Beauté.
2.2.3

Gabarit

Avant de concevoir une page de point de vue couleurs, graphismes ou
animations, il faut concevoir un gabarit pour les pages principales du site
qui seront par la suite hérité par les autres pages du site. La ﬁgure 2.1 montre
le gabarit de notre boutique.
2.3

Conception détaillée

La conception détaillée de la boutique est composée de deux vues à
savoir la vue statique et la vue dynamique. Dans une première parti, nous

2.4 Description de la vue statique

20

Figure 2.1 – Gabarit de notre boutique

introduisons une modélisations des diagrammes statique(i.e., diagramme de
classe et diagramme d’objets). Par suite, nous décrivons le comportement
des classes et des entités dans les diagrammes dynamiques .
2.4

Description de la vue statique

Le diagramme de classes décrit l’architecture du système. Il représente les
classes et les relations entre elles. Les ﬁgures ci-dessous montre le diagramme
de classes de notre application


2.4.1

Base de données Back-office

La figure 2.2 illustre la base de donné du Back-office.

Figure 2.2 – Base de données Back-office

2.4.2

Base de données Application

La figure 2.3 illustre la base de donné de l’application.

Figure 2.3 – Base de données Application

21


2.4.3

Diagramme de classe du Back-office

La figure 2.4 illustre le diagramme de Classe du Back-office :

Figure 2.4 – Diagramme de Classe du Back-office

2.4.4

Diagramme de classe de l’application

La figure2.5 illustre le diagramme de classe de l’application :

Figure 2.5 – Diagramme de Classe de l’application

22

2.5 Cas d’utilisation global relatif à un client

2.4.5

23

Cas d’utilisation global

La figure 2.6, illustre le cas d’utilisation global de l’application Androïd
et du Back-office.
2.5

Cas d’utilisation global relatif à un client

La figure 2.7 illustre le cas d’utilisation global relatif au client.
Le tableau 2.1 décrit le cas d’utilisation global relatif à un client.
Acteur

Client

Pré-condition

Le client lance l’application.

Post-condition

Le client utilise manipule l’application

Principal Scénario

Le client consulte les produits et les ajoute au
panier et gère son panier.
Le client peut accéder à la galerie des images
qui contient des échantillons de produits.
Le client peut partager l’application sur twiter,
facebook, par mail et par sms.
Le client peut effectuer une commande
Le

client

peut

accéder

au

site

du

passion-beauté.com.
alternatif

Néant

Table 2.1 – Description du cas d’utilisation global relatif à un client

2.6

Le diagramme de cas d’utilisation recherche et sélection des
produits

La figure 2.8 illustre le diagramme de cas d’utilisation relatif à la fonction
recherche et sélection des produits.
Le tableau 2.2 décrit le cas d’utilisation recherche et sélection des produits.

2.7 Cas d’utilisation gérer son panier du site Passion Beauté

Nom du cas

24

Cas d’utilisation recherché et sélection des produits

Acteur

Client

Pré-condition

liste des produits Disponible.

Post-condition

Le client a trouvé le produit qu’il cherchait,il
peut accéder au site pour terminer la fonction
d’achat

Scénario Principal.

- Le client lister Les produits qui sont triés soit
par catégorie,marque ou produits du mois.
-Le client sélectionne le produit pour voir une
fiche détaille du produit.
-Le client a le choix d’ajouter d’accéder au site
et compléter la procédure d’achat.

Table 2.2 – Description du cas d’utilisation recherche et sélection des produits

2.7

Cas d’utilisation gérer son panier du site Passion Beauté

La figure 2.9 présente le diagramme de cas d’utilisation relatif à la
fonction accéder au site passion-beauté.com pour compléter la procédure
d’achat.
Le tableau 2.3 décrit le cas d’utilisation d’un client qui gère son panier
à partir du site passion beauté
2.8

Cas d’utilisation partage de l’application

La figure 2.10 illustre le diagramme de cas d’utilisation de partage sur
facebook, sur twitter, par mail ou par sms.
Le tabbleau 2.4 décrit le cas d’utilisation de partage de l’application.

2.9 Cas d’utilisation global relatif à l’administrateur

Nom du cas

Gérer son panier du site passion beauté

Acteur

Client

Pré-condition

25

Le client appuyé sur le bouton accéder au site
dans le page description détaillée de l’application.

Post-condition

- Le Client entré dans le site de la passion beauté
pour acheter un produit sélectionné dans l’application


-Le client entrer dans le site « passion-beauté ».
-le client terminer le procédure du commande
d’une produit dans le site.

Table 2.3 – Description de cas d’utilisation gérer son panier du site Passion Beauté

Nom du cas

Cas d’utilisation gérer l’option de partage

Acteur

Client

Pré-condition

Le client s’authentifier

Post-condition

Partager sur Facebook et twitter ou par mail et
sms


-Le client s’authentifie.
-le client partage l’application sur Facebook.
-le client partage l’application sur Twiter.
-le client partage l’application par mail.
-le client partage l’application par sms.

Table 2.4 – Description de cas d’utilisation partage de l’application

2.9

Cas d’utilisation global relatif à l’administrateur

La figure 2.11 représente le cas d’utilisation global relatif à l’administrateur.
Le tableau 2.5 décrit le cs d’utilisation global relatif à l’administrateur.

2.10 Cas d’utilisation mise à jour des produits, des catégories et des marques

Nom du cas

Utilisation global relatif a l’administrateur

Acteur

Administrateur

Pré-condition

L’administrateur est authentifié

Post-condition

26

Mettre à jour les catégories, les marques et les
produits


-L’administrateur met à jour les produits.
-L’administrateur modifie,ajoute ou supprime
des marques.
-L’administrateur met à jour les catégories.

Table 2.5 – Description du cas d’utilisation global relatif à l’administrateur

2.10

Cas d’utilisation mise à jour des produits, des catégories et
des marques

La figure 2.12 illustre le cas d’utilisation de la fonction de mise à jour
des produits, des catégories et des marques.
Le tableau 2.6 décrit le cas d’utilisation de mise à jour des produits, des
catégories et des marques.
2.11

Cas d’utilisation diagramme de composants

La figure 2.13 illustre le diagramme de composant, les composants de
notre projet sont back-office(coté administrateur) et application Androïd(coté
client).

2.12 Description de la vue dynamique

Nom du cas

27

Mettre les produits, les catégories et les marques
à jour

Acteur

Administrateur

Pré-condition

L’administrateur est authentifié

Post-condition

Mettre à jour les données de back-office


-L’administrateur s’authentifie.
-L’administrateur consulte les produits, il peut
modifier ou supprimer un ou plusieurs produits.
-L’administrateur consulte les catégories, il peut
modifier ou supprimer un ou plusieurs catégories.
-L’administrateur consulte les marques, il peut
modifier ou supprimer un ou plusieurs marques

Table 2.6 – Description de cas d’utilisation mise à jour produits, catégories et marques

2.12

Description de la vue dynamique

Dans ce paragraphe nous présentons une modélisation conceptuelle des
traitements moyennant les diagrammes de séquence qui mettent en œuvre
les différents objets.
2.13

Les diagrammes de séquence

Un diagramme de séquence présente une collaboration avec une interaction superposée. En général une séquence porte sur un type spécifique
d’action dont la description devrait être renforcée.
2.14

Diagramme de séquence d’affichage de galerie des images

La figure 2.14 illustre le scénario d’affichage de la catégorie d’image.

2.15 Diagramme de séquence détail produits

2.15

28

Diagramme de séquence détail produits

La figure 2.15 illustre la procédure d’affichage de détailles des produits.
Comme montre la figure, le client sélectionne l’une des produit, la classe
détail prend la main et affiche la fiche détaille de ce produit.
2.16

Diagramme de séquence gérer panier du site

La figure 2.16 présente le séquencement à suivre pour accéder au site et
gérer le panier du site.
2.17

Diagramme de séquence de mise à jour des catégories

La figure 2.17 illustre le diagramme de séquence d’ajout, suppression et
modification d’une catégorie.

2.18

Diagramme de séquence de mise à jour des marques

La figure 2.18 illustre le diagramme d’ajout, suppresion et modification
des marques.
2.19

Diagramme de séquence de mise à jour des produits

La figure 2.19 illustre le diagramme d’ajout, suppression et modification
des produits.

2.20 Diagramme de séquence d’affichage des produits triées par marque

2.20

29

Diagramme de séquence d’affichage des produits triées par
marque

La figure illustre le scénario d’affichage de détaille de produit en choisissant le classement des produits par marque.
2.21

Diagramme de séquence de partage

Le bouton menu affiche le menu de l’application, le bouton partager
lance une boite de dialogue, qui permet de faire le partage de l’application
sur facebook et twitter ou l’envoyer par mail ou sms. La figure 2.21 illustre
ce diagramme de séquence.
2.21.1

Conclusion :

Dans ce chapitre, nous avons détaillé les phases de conception : conception graphique et conception technique qui nous a permis de dégager la
structure de la base de données à fin qu’on puisse réaliser notre solution
dans le chapitre suivant.


Figure 2.6 – Cas d’utilisation global

30


Figure 2.7 – Diagramme de cas d’utilisation global relatif à un client

31


Figure 2.8 – Cas d’utilisation recherche et sélection des produits

32


Figure 2.9 – Diagramme de cas d’utilisation accéder au site passion-beauté.com

Figure 2.10 – Cas d’utilisation partage de l’application

33


Figure 2.11 – Cas d’utilisation global administrateur

34


Figure 2.12 – Cas d’utilisation mise à jour produits, catégories et marques

35


Figure 2.13 – Diagramme de composants

Figure 2.14 – diagramme de Séquence galerie image

36


Figure 2.15 – Diagramme de Séquence détail produits

37


Figure 2.16 – Diagramme de séquence gérer panier du site

38


Figure 2.17 – diagramme de séquence de mise à jour des catégories

39


40


Figure 2.19 – Diagramme de séquence de mise à jour des produits

41


Figure 2.20 – Diagramme de séquence d’aﬃchage des produits triées par marque

42


Figure 2.21 – Diagramme de séquence de partage

43

Chapitre 3

Réalisation et Test
3.1

Introduction

Ce chapitre est consacré à la présentation de l’environnement matériel
et logiciel utilisés pour le développement de la solution proposé, nous expliquerons éventuellement nos choix techniques relatif aux langages de programmation et des outils utilisés. Nous donnons ensuite une description des
résultats aboutis approuvés par quelques imprimes écrans.
3.2

Environnement du travail

Dans cette section nous décrirons l’environnement du travail.
3.2.1

Environnement matériel

L’application a été développée sur la machine possédant les caractéristiques suivantes :

3.2 Environnement du travail

45

Processeur Intel
Mémoire

1 Go

Ecran

15,4 ”

Fréquence d’horloge

1 .73 GHZ

Disque dur

230 Go

Processeur Intel

Centrino duo

Mémoire

4 Go

Ecran

17,4 ”

Fréquence d’horloge

3 GHZ

Disque dur

3.2.2

Centrino duo

640 Go

Environnement logiciel

Pour réaliser notre application de vente de produits en ligne, nous avons
eu recours aux logiciels suivants :
– Eclipse (l’environnement de développement Androïd [4]) : Outil de
développement d’application.
– Adobe Photoshop CS3 : Logiciel pour le traitement et les retouches
d’images.
– Apache 2.2.14 : Serveur web.
– MySQL : Sytème de gestion de base de donnée.
– notepad++ : Éditeur simple pour l’écriture du code PHP [5].
Pour réaliser notre rapport nous avons eu recours au logiciel suivant :
– kile : application sous Linux pour la rédaction du rapport en Latex
– Dia et Gimp : deux application dédiées à la gestion des images et la
génération des images vectorielles.

3.3 Tests et réalisation

3.3
3.3.1

46

Tests et réalisation
Diagramme de déploiement

Le diagramme de déploiement montre la disposition physique des matériels
qui composent le système. Les ressources matérielles sont représentées sous
forme de n’œuds. Notre application est hébergée sur un serveur Web et les
postes clients peuvent y accéder. Ceci est illustré dans la ﬁgure suivante :

Figure 3.1 – Diagramme de déploiement


3.3.2

47

Scénario d’exécution

À ce stade, nous présentons notre application à travers les divers imprimes écrans réalisés. Nous présentons, au début l’interface de la page d’inscription du Back-oﬃce. En eﬀet, pour s’inscrire, l’utilisateur doit choisir
un login et un mot de passe.
Capture d’écran : page inscription

Figure 3.2 – Capture d’écran : page inscription


48

Capture d’écran : page connexion

Figure 3.3 – Capture d’écran : page connexion

La figure 3.3 illustre la page de connexion du Back-office. Comme montre
la figure, l’utilisateur doit saisir un login et un mot de passe valides pour
accéder aux interfaces qui suivent.
Capture d’écran : ajout catégorie

La figure 3.4 illustre la page d’ajout d’une catégorie. une fois le champ
’libelle catégorie’ est remplis, on valide l’ajout par le bouton submit.
Capture d’écran : page catégorie

La figure 3.5 illustre les différentes catégorie existantes. À partir du
champ action on peut modifier ou supprimer les catégories.
Capture d’écran : ajout marque

Comme le montre la figure 3.6 l’ajout d’une marque, se fait par le saisi
du nom de la marque et l’appui sur le bouton submit pour la validation.


Figure 3.4 – Capture d’écran : ajout catégorie

Figure 3.5 – Capture d’écran : page catégorie

49


50

Figure 3.6 – Capture d’écran : ajout marque
Capture d’écran : page marque

La figure 3.7 illustre toutes les marques existantes. Dans le champ action
on a deux boutons qui nous permet de supprimer ou modifier les marques.
Capture d’écran : ajout produit

La figure 3.8, mentionne, l’ajout d’un produit. En effet, chaque produit
s’inscrit sous une catégorie et une marque. Ainsi chaque produit est caractérisé par un prix, la quantité disponible, une image, une description et un
libellé.
Capture d’écran : page produit

La figure 3.9 illustre la page des produits du Passion Beauté. Chaque
ligne identifie un produit. Le champ action permet de supprimer un produit
ou modifier ses données relative.


Figure 3.7 – Capture d’écran : page marque

Figure 3.8 – Capture d’écran : page produit

51


52

Figure 3.9 – Capture d’écran : page produit

À ce stade, nous présentons notre application embarquée à travers différentes imprimes écrans réalisés. Nous présentons, au début les deux pages
du chargement, illustré dans les ﬁgures 3.10 et 3.11, Au cours du chargement
l’application se connecte au Back-oﬃce via le Web service et met à jour la
base SQLite du téléphone.


53

Figure 3.10 – Capture d’écran : la première page de chargement

Figure 3.11 – Capture d’écran : la deuxième page de chargement
Capture d’écran : page d’acceuil de l’application embarqué

La ﬁgure 3.12 représente la page d’accueil de l’application. Le menu de
l’application contient des sous menu qui donne à l’utilisateur l’opportunité


54

Figure 3.12 – Capture d’écran : page d’accueil de l’application embarqué

de partager l’application, visualiser les produits, les marques et la galerie
d’images.


55

Capture d’écran : page à propo

Figure 3.13 – Capture d’écran : page à propos

La ﬁgure 3.13 représente la page A propos qui permet de passer à partir
de l’application vers le site Passion Beauté. Ainsi à partir de cette page on
peut avoir des renseignements concernant cette société.


56

Capture d’écran : page des catégories

Figure 3.14 – Capture d’écran : page des catégories

La figure 3.14 affiche les différentes catégories des produits commercialisés par la société. En choisissant une catégorie on aura la listes des produits
qui s’inscrivent sous cette catégorie.

Capture d’écran : liste des accessoires

Figure 3.15 – Capture d’écran : liste des accessoires

la ﬁgure 3.15 illustre la liste des produits accessoires.

57


58

Capture d’écran : liste des pinceaux

Figure 3.16 – Capture d’écran : liste des pinceaux

La ﬁgure 3.16 illustre les pinceaux disponible. En choisissant un pinceau
on passe vers la page détaille de ce produit.


59

Capture d’écran : liste des produits de bain

Figure 3.17 – Capture d’écran : liste des produits de bain

La ﬁgure 3.17 illustre la liste des produits qui existe sous la catégorie
produit de bain. La liste est mise à jour moyennant un back-oﬃce.


60

Capture d’écran : page de partage

Figure 3.18 – Capture d’écran : page de partage

La ﬁgure 3.18 illustre les choix de partage. À partir de cette page le client
peut partager l’application sur facebook et twiter, envoyer un mail ou un
sms.


61

Capture d’écran : partage sur facebook

Figure 3.19 – Capture d’écran : partage sur facebook

La ﬁgure 3.19 représente l’interface de connexion sur le site facebook aﬁn
de partager l’application.


62

Capture d’écran : partage sur twitter

Figure 3.20 – Capture d’écran : partage sur twitter

La ﬁgure 3.20 illustre l’interface de connexion sur le site twitter aﬁn de
partager l’application.

Capture d’écran : envoyer un mail

Figure 3.21 – Capture d’écran : envoyer un mail

La ﬁgure 3.21 illustre l’interface de l’envoie de l’application par mail.

63


64

Capture d’écran : Page des marques

Figure 3.22 – Capture d’écran : galerie des marques

La ﬁgure 3.22 illustre les marques des produits. En choisissant une marque on passe vers les produits de cette marque.


65

Capture d’écran : Produits de la marque lacoste


La ﬁgure 3.23 illustre la liste des produits qui s’incrivent sous la marque
lacoste. En choisissant un produit on passe vers la page détaille de ce
produit.


66

Capture d’écran : Produits de la marque Dior


Dior. En choisissant un produit on passe vers la page détaille de ce produit.


67

Capture d’écran : Produits de la marque Boss


Boss. En choisissant un produit on passe vers la page détaille de ce produit.


68

Capture d’écran : galerie d’image

Figure 3.26 – Capture d’écran : galerie d’image

La ﬁgure 3.26 illustre les images de quelques échantillons de produits.

Conclusion et Perspectives
Au cours de ce travail, nous avons tout d’abord mené une recherche sur
les applications e-commerce et leurs systèmes de fonctionnement (paiement,
livraison, etc..). Nous sommes intéressés en particulier à l’application des
opérateurs privés de télécommunication en France et en Amérique du nord.
Nous avons donc essayé de dégager leurs fonctionnalités et leurs choix adoptés, ce qui nous a permis de déterminer les grands axes que nous allons
suivre pour concevoir notre solution.
Notre problématique consiste donc à développer l’application en ligne de
Passion Beauté.
Pour atteindre ces objectifs nous avons choisi le langage UML pour modéliser notre Application, aussi bien dans les activités de capture des besoins,
de conception ou d’analyse. Nous avons cependant tenu à être plus simplistes
et moins exigeants en termes de méthodes de conception et de logistique,
dans le but de nous concentrer plus sur la pratique de la réalisation du
projet.
L’application que nous avons réalisé, permettra de :
– Développer l’activité e-commerce et l’usage de l’achat en ligne sur le
site Web.
– Augmenter le traﬁc du site passion-beauté.com.
– Fidéliser les abonnés de Passion Beauté.
– Attirer des prospects en leur facilitant l’acte d’achat.


70

– Fournir une information pertinente et fraîche sur les produits disponibles.
Malgré son intérêt comme solution indispensable pour développer les
chiffres de ventes de Passion Beauté et malgré la difficulté de la tâche d’autocritique, nous ne pouvons pas prétendre que ce travail est une solution
complète et définitive. Nous mentionnons que notre projet de fin d’étude
s’arrête à l’étape ou le client accède au catalogue du produits car Passion
Beauté s’est réservé le droit d’effectuer totalement et seul cette tâche. En
effet, il y a toujours des améliorations. Nous citons à titre d’exemple :
– Ajouter un module de paiement depuis l’application mobile.
– Développer un web service (côté serveur) pour rendre, la tâche de la
mise à jour (côté mobile), possible l’accés à l’application indépendamment du plateforme.
– Publier l’application Passion Beauté 1.0 sur Androïd marquet et
capter les améliorations possible à partir des réclamations clients.

Chapitre 4

ANNEXES
UML 1 est un Langage graphique de modélisation des données et des
traitements. C’est une formalisation très aboutie et non propriétaire de la
modélisation objet utilisée en génie logiciel. L’OMG diffuse depuis Novembre
2007 la version UML 2.1.2, et travaille à présent sur la version 2.2.
4.1

Le formalisme d’UML

Le modèle UML [2, 3] est composé de 13 types de diagrammes (9 en UML
1.3). UML n’étant pas une méthode, leur utilisation est laissée à l’appréciation de chacun, même si le diagramme de classes est généralement considéré
comme l’élément central d’UML, des méthodologies, telles que l’UnifiedProcess, axent elles l’analyse en tout premier lieu sur les diagrammes de
cas d’utilisation (Use Case). De même, on peut se contenter de modéliser
(seulement) Partiellement un système, par exemple certaines parties critiques. UML se décompose en plusieurs sous-ensembles
Les vues : Les vues sont les observables du système. Elles décrivent le système d’un point de Vue donné, qui peut être organisationnel, dynamique,
1. UML est l’acronyme de en anglais Unified Modeling Language et en français« langage de modélisation
unifié »

4.2 Les diagrammes

72

temporel, architectural, géographique, Logique, etc. En combinant toutes
ces vues il est possible de définir (ou retrouver) le système Complet.
4.2

Les diagrammes

Les diagrammes sont des éléments graphiques. Ceux-ci décrivent le Contenu des vues, qui sont des notions abstraites. Les diagrammes peuvent faire
partie de plusieurs vues.
4.3

Les modèles d’élément

Les modèles d’élément sont les briques des diagrammes UML, ces Modèles sont utilisés dans plusieurs types de diagramme. Exemple d’élément :
cas d’utilisation, classe, association, etc. Mise en œuvre d’une démarche à
l’aide d’UML : les vues Une façon de mettre en œuvre UML est de considérer
différentes vues qui peuvent se Superposer pour collaborer à la définition du
système.

Figure 4.1 – Les vues

4.4 Les diagrammes

73

– Vue des cas d’utilisation : c’est la description du modèle "vue" par les
acteurs du système. Elle correspond aux besoins attendus par chaque
acteur (c’est le QUOI et le QUI). Vue logique : c’est la définition du
système vu de l’intérieur. Elle explique comment peuvent Être satisfaits
les besoins des acteurs (c’est le COMMENT).
– Vue d’implémentation : cette vue définit les dépendances entre les modules.
– Vue des processus : c’est la vue temporelle et technique, qui met en
œuvre les notions de tâches concurrentes, stimuli, contrôle, synchronisation, etc.
– Vue de déploiement : cette vue décrit la position géographique et l’architecture physique de chaque élément du système (c’est le OÙ). Note :
le POURQUOI, n’est pas défini dans UML.
4.4

Les diagrammes

Les 13 diagrammes UML sont dépendants hiérarchiquement et se complètent La hiérarchie des diagrammes UML 2.0 sous forme d’un diagramme
de classes
4.4.1

Diagrammes Structurels ou Diagrammes statiques (cf. Structure Diagram)

– Diagramme de classes :(cf. Class Diagram) : il représente les classes
intervenant dans Le système.
– Diagramme d’objets :(cf. Object Diagram) : il sert à représenter les
instances de Classes (objets) utilisées dans le système.
– Diagramme de composants :(cf. Component Diagram) : il permet de
montrer les Composants du système d’un point de vue physique, tels

4.4 Les diagrammes

74

qu’ils sont mis en œuvre (Fichiers, bibliothèques, bases de données...).
– Diagramme de déploiement :(cf. Deployment Diagram) : il sert à représenter les Éléments matériels (ordinateurs, périphériques, réseaux, systèmes de stockage...) et la Manière dont les composants du système
sont répartis sur ces éléments matériels et Interagissent avec eux.
– Diagramme des paquetages :(cf. Package Diagram) : un paquetage
étant un conteneur Logique permettant de regrouper et d’organiser
les éléments dans le modèle UML, le Diagramme de paquetage sert à
représenter les dépendances entre paquetages, c’est à dire Les dépendances entre ensembles de définitions.
– Diagramme de structure composite :(cf. Composite Structure Diagram) : permet de Décrire sous forme de boîte blanche les relations
entre composants d’une classe.
– Diagrammes Comportementaux
– Diagramme des cas d’utilisation :(use cases) (cf. Use Case Diagram) :
il permet d’identifier les possibilités d’interaction entre le système et
les acteurs (intervenants extérieurs au système), c’est-à-dire toutes les
fonctionnalités que doit fournir le système.
– Diagramme états-transitions :(cf. State Machine Diagram) : permet de
décrire sous forme de machine à états finis le comportement du système
ou de ses composants.
– Diagramme d’activité :(cf. Activity Diagram) : permet de décrire sous
forme de flux ou d’enchaînement d’activités le comportement du système ou de ses composants.
– Diagramme d’interactions ou Diagrammes dynamiques : (cf. Interaction Diagram)
– Diagramme de séquence : (cf. Sequence Diagram) : représentation

4.5 Standardisation et Certification UML :

75

séquentielle du déroulement des traitements et des interactions entre
les éléments du système et/ou de ses acteurs.
– Diagramme de communication : (cf. Communication Diagram) : représentation simplifiée d’un diagramme de séquence se concentrant sur les
échanges de messages entre les objets.
– Diagramme global d’interaction : (cf. Interaction Overview Diagram) :
permet de décrire les enchaînements possibles entre les scénarios préalablement identifiés sous forme de diagrammes de séquences (variante
du diagramme d’activité).
– Diagramme de temps : (cf. Timing Diagram) : permet de décrire les
variations d’une donnée au cours du temps. Les modèles d’éléments.
4.5

Standardisation et Certification UML :

UML n’est pas un standard de fait mais un standard « industriel » de
l’OMG (novembre 1997). Ceci étant, vu le succès initial de ce langage, il
aurait Pu tout aussi bien être simplement « standard de fait ». Depuis
juillet 2005, la première Version 2.* de UML est validée par l’OMG. Par
ailleurs, depuis 2003, l’OMG a mis en place un programme de certification
à la pratique et La connaissance d’UML : OCUP (OMG Certified UML
Professional)
4.6

Exemple de séquence de création des diagrammes

4.7

Logiciels de modélisation UML

Il existe de nombreux outils logiciels de modélisation UML. Malheureusement aucun d’entre Eux ne respectent strictement aucune des versions d’UML,
particulièrement UML2 : beaucoup De ces outils introduisent des notations

4.7 Logiciels de modélisation UML

Diagramme de cas d’utilisation

76

Spécification, cahier des charges

Diagramme de séquence
Diagramme d’objet

Conception Architecturale

Diagramme d’activité
Diagramme de classe
Diagramme de communication
Diagramme de déploiement
Diagramme de composant

particulières non conformes, très peu supportent les différents types de diagrammes définis par le standard. Beaucoup en revanche incluent des Outils
de génération de squelette de code, particulièrement à partir du diagramme
de classes, qui est celui qui se prête le mieux à une telle automatisation. Les
outils plus réputés, à défaut d’être conformes, sont les outils d’openModelSphere.

Bibliographie
[1] Android numéro 1.
http

Disponible sur

Internet Ã

l’adresse

://www.infobidouille.com/actualites/2011/02/01/Android-est-

numero-un-mondial, 2010.
[2] Xavier Blanc. UML2 pour les pour les développeurs. EYROLLES, 2006.
[3] Xavier Blanc. UML 2 de l’apprentissage Ã la pratique. 2009.
[4] Cyril Mottier et Ludovic Perrier. Développez pour Android. 2010.
[5] Christophe Villeneuve. PHP et MySQL - MySQLi - PDO. 2008.

Rapport de projet de fin d'étude licence informatique et multimédia

Contenu connexe

Tendances (20)

En vedette (7)

Similaire à Rapport de projet de fin d'étude licence informatique et multimédia (20)

Plus de Nazih Heni (6)

Dernier (20)

Rapport de projet de fin d'étude licence informatique et multimédia