final2-140201101804-phpapp01

Universit de Manouba

Institut Suprieur des Art Multimdias de Manouba

CONCEPTION ET RALISATION DUNE APPLICATION

Androd : Passion Beaut 1.0

Prsent par : Encadr par :

Doufani Saif Allah M. Waddey Moez (ISAMM)

EL Heni Nazih M. Kaddour Ahmed (NETISSE)

Cycle de Formation LMD

Anne universitaire :2010/2011

Rsume

Le m-Commerce na pas de vocation pour remplacer les canaux traditionnels, y compris

lInternet sur ordinateur, il convient particulirement certains types dachat bass sur la sim-

plicit des produits et lurgence de la demande. Daprs une tude Gartner, les consommateurs

vont dpenser cette anne 6,2 milliards de dollars en tlchargements dapplications mobiles

Androd, soit une progression de prs de 60 % par rapport 2010. La progression ne devrait

pas sarrter en si bon chemin puisquen 2013 qui devrait dpasser le chiffre de 21,6 milliards de

tlchargements. Le projet que nous prsentons aborde prcisment une application conu pour

fonctionner sur la plate-formeAndrod. Le projet permet la commercialisation des produits

dune socit qui agit dans le domaine de beaut. Lapplication permet laffichage des produits

selon la catgorie et les produits du mois. Lapplication proposera lachat sur site du Passion

Beaut.

Augmenter le trafic du site passion-Beaute.com.

Fidliser les abonns du Passion Beaut.

Attirer des prospects en leur facilitant lacte dachat (produits du mois).

Lapplication ncessite un espace administrateur Back-office qui permet de faire des mises

jour du catalogue de produit. Lespace administrateur ncessite galement la mise en place des

interfaces de gestion des commandes. Par ailleurs, nous proposons dans notre application une

nouvelle forme dachat et slection des produits en vue damliorer les mthodes de navigation

dans lapplication. En effet, il est ncessaire de disposer doutils pour grer les achats, les

commandes, les stocks, la logistique et tous les autres aspects lis 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 Androd 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 Androd platform. The project allows the marketing of products of a company

acting in the beauty products 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. Further-

more, 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, or-

dering, inventory and all other aspects of business management, catalog management, purchase

management, logistics, brand management and content management.

Remerciement

Avant dentamer ce rapport de projet de fin dtudes, nous tenons exprimer notre sincre

gratitude envers tous ceux qui nous ont aid ou ont particip au bon droulement de ce projet.

Tout dabord, nous tenons remercier NETISSE qui nous a bien accueillis. En effet nous avons

eu le plaisir de travailler dans une entreprise de grande valeur. Nous nous devons remercier

M. Waddey Moez pour sa gnrosit, sa comprhension et son aide inestimable. Nous sommes

reconnaissant galement M. Ahmed Kadour notre encadreur durant le droulement du projet

pour son aide la mise en place de ce modeste travail.

Ddicace

A MA MRE

Tu mas donn la vie, la tendresse et le courage pour russir .Tout ce que

je peux toffrir ne pourra exprimer lamour et la reconnaissance que je te

porte. En tmoignage, je toffre ce modeste travail pour te remercier pour

tes sacrifices et pour laffection dont tu mas toujours entour.

A MON PRE

Lpaule solide, lil attentif comprhensif et la personne la plus digne de

mon estime et de mon respect. Aucune ddicace ne pourrait exprimer mes

sentiments, que Dieu te prserve et te procure Sant et longue vie.

A mes frres

A ma sur

A ma famille

A mes amis ...

Doufani Saif Allah

Ddicace

A mes chers parents, Que nulle ddicace ne puisse exprimer ce que je

leurs dois, pour leur bienveillance, leur affection et leur soutien Trsors de

bont, de gnrosit et de tendresse, en tmoignage de mon profond amour

et ma grande reconnaissance Que Dieu vous garde . A mes chers frres et

sur, En tmoignage de mes sincres reconnaissances pour les efforts quils

ont consenti pour laccomplissement de mes tudes. Je leur ddie ce modeste

travail en tmoignage de mon grand amour et ma gratitude infinie. A tous

mes amis,

Pour leur aide et leur soutien moral durant llaboration du travail de fin

dtude. A toute ma Famille

A tout ceux qui maiment

El Heni Nazih

Table des matires

Introduction gnrale 1

1 Etude pralable 3

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 tude de lexistant . . . . . . . . . . . . . . . . . . . . . . 3

1.3 Analyse de lapplication Amazon.fr . . . . . . . . . . . . . 4

1.3.1 Prsentation de lapplication Amazon pour Androd 4

1.3.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 4

1.3.3 Analyse technique . . . . . . . . . . . . . . . . . . . 6

1.4 Analyse de lapplication eBay officielle pour Andrd . . . 6

1.4.1 Prsentation gnrale . . . . . . . . . . . . . . . . . 7



1.5 Analyse du lapplication Best Buy pour Androd . . . . . 9

1.5.1 Prsentation de Best Buy . . . . . . . . . . . . . . . 9



1.6 Spcification des besoins fonctionnels . . . . . . . . . . . . . 12

1.6.1 Identification des acteurs . . . . . . . . . . . . . . . 12

TABLE DES MATIRES ii

1.6.2 Description des exigences fonctionnelles . . . . . . . 13

1.7 Modle de navigation . . . . . . . . . . . . . . . . . . . . . 14

1.7.1 Modle linaire . . . . . . . . . . . . . . . . . . . . 14

1.7.2 Modle hirarchique . . . . . . . . . . . . . . . . . . 15

1.7.3 Modle 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 dtaille . . . . . . . . . . . . . . . . . . . . . . 19

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

2.4.1 Base de donnes Back-office . . . . . . . . . . . . . 21

2.4.2 Base de donnes Application . . . . . . . . . . . . . 21

2.4.3 Diagramme de classe du Back-office . . . . . . . . . 22

2.4.4 Diagramme de classe de lapplication . . . . . . . . 22

2.4.5 Cas dutilisation global . . . . . . . . . . . . . . . . 23

2.5 Cas dutilisation global relatif un client . . . . . . . . . . 23

2.6 Le diagramme de cas dutilisation recherche et slection des

produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2.7 Cas dutilisation grer son panier du site Passion Beaut . . 24

2.8 Cas dutilisation partage de lapplication . . . . . . . . . . . 24

2.9 Cas dutilisation global relatif ladministrateur . . . . . . 25

TABLE DES MATIRES iii

2.10 Cas dutilisation mise jour des produits, des catgories et

des marques . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2.11 Cas dutilisation diagramme de composants . . . . . . . . . 26

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

2.13 Les diagrammes de squence . . . . . . . . . . . . . . . . . 27

2.14 Diagramme de squence daffichage de galerie des images . . 27

2.15 Diagramme de squence dtail produits . . . . . . . . . . . 28

2.16 Diagramme de squence grer panier du site . . . . . . . . . 28

2.17 Diagramme de squence de mise jour des catgories . . . . 28

2.18 Diagramme de squence de mise jour des marques . . . . 28

2.19 Diagramme de squence de mise jour des produits . . . . 28

2.20 Diagramme de squence daffichage des produits tries par

marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.21 Diagramme de squence de partage . . . . . . . . . . . . . 29

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

3 Ralisation et Test 44

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 44

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

3.2.1 Environnement matriel . . . . . . . . . . . . . . . . 44

3.2.2 Environnement logiciel . . . . . . . . . . . . . . . . 45

3.3 Tests et ralisation . . . . . . . . . . . . . . . . . . . . . . 46

3.3.1 Diagramme de dploiement . . . . . . . . . . . . . . 46

3.3.2 Scnario dexcution . . . . . . . . . . . . . . . . . . 47

Conclusion et Perspectives 69

TABLE DES MATIRES iv

4 ANNEXES 71

4.1 Le formalisme dUML . . . . . . . . . . . . . . . . . . . . . 71

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

4.3 Les modles dlment . . . . . . . . . . . . . . . . . . . . . 72

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

4.4.1 Diagrammes Structurels ou Diagrammes statiques (cf.

Structure Diagram) . . . . . . . . . . . . . . . . . . 73

4.5 Standardisation et Certification UML : . . . . . . . . . . . . 75

4.6 Exemple de squence de cration des diagrammes . . . . . . 75

4.7 Logiciels de modlisation 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 Modle Hirarchique . . . . . . . . . . . . . . . . . . . . . . 15

1.6 Modle Composite . . . . . . . . . . . . . . . . . . . . . . . 16

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

2.2 Base de donnes Back-office . . . . . . . . . . . . . . . . . 21

2.3 Base de donnes Application . . . . . . . . . . . . . . . . . 21

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

2.5 Diagramme de Classe de lapplication . . . . . . . . . . . . 22

2.6 Cas dutilisation global . . . . . . . . . . . . . . . . . . . . 30

2.7 Diagramme de cas dutilisation global relatif un client . . 31

2.8 Cas dutilisation recherche et slection des produits . . . . . 32

2.9 Diagramme de cas dutilisation accder au site passion-beaut.com 33

2.10 Cas dutilisation partage de lapplication . . . . . . . . . . . 33

2.11 Cas dutilisation global administrateur . . . . . . . . . . . . 34

2.12 Cas dutilisation mise jour produits, catgories et marques 35

TABLE DES FIGURES vi

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

2.14 diagramme de Squence galerie image . . . . . . . . . . . . 36

2.15 Diagramme de Squence dtail produits . . . . . . . . . . . 37

2.16 Diagramme de squence grer panier du site . . . . . . . . . 38

2.17 diagramme de squence de mise jour des catgories . . . . 39

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

2.19 Diagramme de squence de mise jour des produits . . . . 41


marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

2.21 Diagramme de squence de partage . . . . . . . . . . . . . . 43

3.1 Diagramme de dploiement . . . . . . . . . . . . . . . . . . 46

3.2 Capture dcran : page inscription . . . . . . . . . . . . . . 47

3.3 Capture dcran : page connexion . . . . . . . . . . . . . . 48

3.4 Capture dcran : ajout catgorie . . . . . . . . . . . . . . . 49

3.5 Capture dcran : page catgorie . . . . . . . . . . . . . . . 49

3.6 Capture dcran : ajout marque . . . . . . . . . . . . . . . 50

3.7 Capture dcran : page marque . . . . . . . . . . . . . . . . 51

3.8 Capture dcran : page produit . . . . . . . . . . . . . . . . 51

3.9 Capture dcran : page produit . . . . . . . . . . . . . . . . 52

3.10 Capture dcran : la premire page de chargement . . . . . . 53

3.11 Capture dcran : la deuxime page de chargement . . . . . 53

3.12 Capture dcran : page daccueil de lapplication embarqu . 54

3.13 Capture dcran : page propos . . . . . . . . . . . . . . . 55

3.14 Capture dcran : page des catgories . . . . . . . . . . . . 56

3.15 Capture dcran : liste des accessoires . . . . . . . . . . . . 57

TABLE DES FIGURES vii

3.16 Capture dcran : liste des pinceaux . . . . . . . . . . . . . 58

3.17 Capture dcran : liste des produits de bain . . . . . . . . . 59

3.18 Capture dcran : page de partage . . . . . . . . . . . . . . 60

3.19 Capture dcran : partage sur facebook . . . . . . . . . . . 61

3.20 Capture dcran : partage sur twitter . . . . . . . . . . . . . 62

3.21 Capture dcran : envoyer un mail . . . . . . . . . . . . . . 63

3.22 Capture dcran : galerie des marques . . . . . . . . . . . . 64




3.26 Capture dcran : galerie dimage . . . . . . . . . . . . . . . 68

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

Liste des tableaux

1.1 Connotation et dnotation du lapplication Amazon.fr. . . . 6

1.2 Connotation et dnotation du lapplication eBay officielle. . 9

1.3 Connotation et dnotation du lapplication Best Buy. . . . . 12

2.1 Description du cas dutilisation global relatif un client . . 23

2.2 Description du cas dutilisation recherche et slection des pro-

duits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.3 Description de cas dutilisation grer son panier du site Pas-

sion Beaut . . . . . . . . . . . . . . . . . . . . . . . . . . 25

2.4 Description de cas dutilisation partage de lapplication . . . 25

2.5 Description du cas dutilisation global relatif ladministrateur 26

2.6 Description de cas dutilisation mise jour produits, cat-

gories et marques . . . . . . . . . . . . . . . . . . . . . . . 27

Introduction Gnrale

Dans le cadre de notre projet de fin dtude, nous nous intressons

dvelopper une application qui sert lachat en ligne des produits de beaut,

reconnu dans le domaine informatique par le nom E-commerce , cette ap-

plication peut tre dvelopper sur plusieurs plate-forme notamment : An-

drod , Mac OS et BlackBerry etc. Les supports de notre application E-

commerce sont les tlphones portable men, dun systme dexploitation

Androd. LOS 1 Androd 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 Androd ne cesse daccroitre sa part

du march, il occupe la premire place en terme de vente au niveau mon-

diale avec 33.3 million dunit en 4 me trimestre 2010 lquivalant de 370

tlphones/jour.[1]

Le rythme de nos jours est acclr et les gens ont besoin de rduire leurs d-

placements, ainsi le nombre des utilisateurs dAndrod ne cesse daccrotre

donc on a dcid de dvelopper une application sur le systme dexploita-

tionAndrod pour commercialiser les produits de beaut la socit Passion

Beaut

1. LOS est lacronyme de operaiting system

2. PDA est lacronyme de Personal Digital Assistant

3. le mot plateforme dans ce manuscrit dsigne lensemble des ressources logicielles qui sont fournies par les

systmes embarqu

LISTE DES TABLEAUX 2

Cadre du projet

Ce travail sinscrit dans le cadre de notre projet de fin dtudes pour

lobtention du diplme universitaire en Informatique et Multimdias effectu

au sein de la Socit NETISSE. Au cours de ce stage la socit NETISSE

nous a confi la conception et la ralisation dune application Androd

dans un milieu pur professionnelle.

Organisation du Rapport

Au niveau de ce manuscrit, nous dcrivons la mise en place dune appli-

cation Androd permettant, grce un catalogue des produits, lachat en

ligne via paiement scuris (carte de crdit, e-dinar). Le rapport prsente

aussi les impacts oprationnels, internes et externes, du lancement dune

boutique en Ligne. Dans un premier chapitre nous prsentons le cadre gnral.

Dans le deuxime, nous Analyserons quelques applications spcialiss dans

la vente afin de dgager les besoins de notre application. Ensuite, nous d-

taillerons les spcifications des besoins. Dans le troisime Chapitre, nous

procderons la description de la conception de la solution. La ralisation

et Les tests se situeront au niveau du quatrime chapitre de notre rapport.

Nous terminons le rapport par une conclusion gnrale en nous prsentons

quelques perspectives et futur amliorations concernant notre application.

Chapitre 1

Etude pralable

1.1 Introduction

Dans ce chapitre, nous prsentons ltude pralable qui doit tre la-

borer avant dentamer la mise en place de notre application. Pour cela, nous

prsenterons ltude des applications de vente en ligne pour Androd [4].

Nous dtaillerons ensuite les exigences fonctionnelles de la boutique, savoir

les fonctionnalits requises par lutilisateur. Nous ajouterons enfin des exi-

gences non fonctionnelles et des contraintes de conception pour nous placer

dans loptique du dmarrage dun projet rel.

1.2 tude de lexistant

Ltude de lexistant permet de dterminer les points faibles et les points

forts dun produit actuel pour pouvoir dterminer les besoins du client, en

vue den prendre en considration lors de la conception et la ralisation

de la boutique en ligne. Dans cette section, nous prsentons une analyse de

quelques exemples dapplications marchands. Ensuite, nous formulerons une

solution de la problmatique.

1.3 Analyse de lapplication Amazon.fr 4

1.3 Analyse de lapplication Amazon.fr

Dans cette section, nous prsentons lapplication Amazon.fr. Ensuite

nous procdons une analyse fonctionnelle, technique et graphique de lap-

plication tudi.

1.3.1 Prsentation de lapplication Amazon pour Androd

Lapplication Amazon permet aux consommateurs de chercher des pro-

duits, de lire des commentaires et de faire des achats sur Amazon.fr depuis

leur tlphone portable. Elle permet aussi un produit dobtenir immdi-

atement des informations sur celui-ci, dont son prix et sa disponibilit sur

Amazon.fr. Les consommateurs dAmazon ont accs leurs panier, leurs

listes denvie, leurs options de paiement, lhistorique de leurs achats. Toutes

les commandes sont effectues via les serveurs scuriss dAmazon. 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, lapplication Amazon offre plusieurs fonc-

tionnalits au visiteur. Il lui permet de :

1. Effectuer immdiatement des achats parmi la slection des produits de

lapplication Amazon.fr et ce ci via les serveurs scuriss du site.

2. Consulter des images de produits et lire des commentaires de consom-

mateurs o que vous soyez et au moment que vous choisirez.

3. Suivre le statut dune commande rcente depuis votre tlphone.

4. Obtenir immdiatement des informations sur le produit, dont son prix et

sa disponibilit (pour les tlphones avec un appareil photo autofocus)

compatible avec les versions 1.6, 2.0, 2.1, ou 2.2 dAndrod.

1.3 Analyse de lapplication Amazon.fr 5

(a) (b)

(c) (d)

Figure 1.1 application Amazon

1.4 Analyse de lapplication eBay officielle pour Andrd 6

La figure 1.1 (a) illustre la page daccueil de lapplication Amazon

La figure 1.1 (b) illustre la liste des produits propos par lapplication

Amazon

La figure 1.1 (c) illustre les informations dtaill dun produit

La figure 1.1 (d) illustre la page commentaires clients

1.3.3 Analyse technique

Lapplication Amazon.fr est dvelopp avec le langage Java (SDK An-

drod). Les images contenues dans lapplication sont des images dont le

format est JPEG.

Dnotation Connotation

La page daccueil est dispose

en deux parties horizontales.

Cette disposition donne un sens prcis de lecture

qui rend la page plus large.

Les formes utilises sont des

formes rectangulaires avec des

coins arrondis.

Les formes rectangulaires donnent de la stabil-

it linterface et les coins arrondis ajoutent du

dynamisme.

La gamme des couleurs util-

ises sont les tons du bleu, lo-

rang et noir.

Lutilisation du contraste entre le bleu, le noir et

lorang ravive linterface. Lutilisation du noir

et de lorang pour rveiller le bleu et empcher

sa continuit.

Table 1.1 Connotation et dnotation du lapplication Amazon.fr.

1.4 Analyse de lapplication eBay officielle pour Andrd

Dans cette section nous prsentons lapplication eBay.fr. Ensuite nous

procdons une analyse fonctionnelle, technique et graphique.


1.4.1 Prsentation gnrale

Avec lapplication eBay, nous pouvons parcourir les annonces, achetez

des objets et consultez les activits eBay. Ainsi, lapplication eBay permet

de recevoir des alertes lorsque les objets sont en ventraux enchre ou vos

Affaires suivre se terminent bientt.


Cette application permet aux utilisateurs de :

1. Accder facilement au compte eBay.

2. Consulter la description et les dtails de lobjet.

3. Recevoir des notifications lorsquune de vos Affaires suivre se termine

bientt.

4. Afficher les dtails sur le vendeur, notamment son profil dvaluation et

ses valuations rcentes par les autres utilisateurs.


(a) (b)

(c) (d)

Figure 1.2 Application eBay

1.5 Analyse du lapplication Best Buy pour Androd 9

La figure 1.3 (a) illustre la page daccueil de lapplication 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 gagns

La figure 1.3 (d) illustre le rsultat de la recherche pour pantech 7000


Lapplication eBay est dvelopp avec le langage Java (SDKANDROD).

Les images contenues dans lapplication sont des images dont le format est

JPEG.





qui rend la page plus large



coins arrondis.



dynamisme.

La typographie utilise est

sans empattement.

Cette typographie facilite la lecture de la page

de lapplication.

Table 1.2 Connotation et dnotation du lapplication eBay officielle.

1.5 Analyse du lapplication Best Buy pour Androd

Dans cette section prsentant lapplication Best Buy, nous procdons

une analyse fonctionnelle et technique.

1.5.1 Prsentation de Best Buy

Acheteur Be Happy.


Lapplication de Best Buy offre une nouvelle faon dachat des tech-

nologies dernire cri.Elle permet ainsi de parcourir le catalogue de produits

complet Best Buy, comparer les spcifications des produits, et crer une liste

de produit.

lapplication Best Buy est menu dun systme de recherche avanc qui

permet de trouver rapidement les produits prfrs, lire les commen-

taires, et de trouver la disponibilit en magasin.

Achat des tlphones et des produits qui sont livrs directement

domicile.

La fonction de mise jour permet dafficher vos derniers achats, le

suivi des points, et le dcouvert des dernires offres.


Recherchez, suivez et achetez des objets, o vous soyez

1. Accdez facilement Best Buy

2. Consultez la description et les dtails de lobjet

3. Recevez des notifications lorsquune de vos Affaires suivre se termine

ou lorsquun membre a surenchri

4. Affichez les dtails sur le vendeur, notamment son profil dvaluation

et ses valuations rcentes

5. Affichez les autres objets du vendeur


(a) (b)

(c) (d)

Figure 1.3 Application BestBuy

1.6 Spcification des besoins fonctionnels 12

La figure 1.5 (a) illustre la page de la description dtaill dun 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 lapplication

La figure 1.5 (d) illustre le rsultat dune recherche


Lapplication Best Buy est dveloppe avec le langage Java (SDK An-

drod). Les images contenues dans lapplication sont des images dont le

format est JPEG et GIF.





qui rend la page plus large.



coins arrondis.



dynamisme.

La typographie utilise est

sans empattement.

Cette typographie facilite la lecture de la page

de lapplication.

Table 1.3 Connotation et dnotation du lapplication Best Buy.

1.6 Spcification des besoins fonctionnels

Dans cette partie nous identifions les acteurs de notre boutique en ligne

afin de pouvoir dgager les besoins fonctionnels.

1.6.1 Identification des acteurs

Lapplication doit fournir un ensemble de fonctionnalits aux clients.

En effet, lapplication Permettra aux clients deffectuer leurs achats et de

lancer des commandes. Cependant, nous Parvenons dgager deux acteurs

1.6 Spcification des besoins fonctionnels 13

principaux qui sont :

Le client qui utilise lapplication et procde lachat dun article.

Ladministrateur qui doit grer le bon fonctionnement de lapplication.

1.6.2 Description des exigences fonctionnelles

Lapplication doit permettre au client de :

1. Rechercher des produits

Trier par marque.

Trier par catgorie

Trier par produits de mois.

2. Visualiser des chantillons de produits

Via le galerie dimage.

3. Grer son panier

Accder au panier du site.

Modifier le panier du site.

4. Partager lapplication

Sur twitter

Sur facebook

Par mail

Par sms

Lapplication doit permettre ladministrateur de :

1. Grer les catgories

Ajouter une catgorie.

Modifier une catgorie.

Supprimer une catgorie.

1.7 Modle de navigation 14

Lister les catgories.

2. Grer les marques

Ajouter une marque.

Modifier une marque.

Supprimer une marque.

Lister les marques.

3. Grer les produits

Ajouter un produit.

Modifier un produit.

Supprimer un produit.

Lister les produits.

1.7 Modle de navigation

Le modle de navigation permet de dfinir la manire de navigation dans

la boutique. Les principaux modles de navigation sont les suivants :

1.7.1 Modle linaire

Dans le modle linaire la page comporte un lien qui nous amnera la

page suivante (i.e., quand on ne peut pas naviguer de la mme page aux

autres pages du site). En gnrale, les liens sont des pages dites page suivants

et page prcdents.

Figure 1.4 modele lineaire


1.7.2 Modle hirarchique

Dans le modle hirarchique la navigation est plus souple puisquelle

est une navigation verticale (i.e., ce modle permet le passage dun niveau

hirarchique un autre). En utilisant ce modle on peut atteindre partir

dune seul page (exemple page daccueil) toutes les autres pages prsentes

par des liens.

Figure 1.5 Modle Hirarchique


1.7.3 Modle composite

Cest une navigation la fois verticale et horizontale. Cest une com-

binaison du modle linaire et du modle hirarchique. Ce modle permet

encore une navigation plus souple puisque nous pouvons accder aux dif-

frentes pages dun niveau hirarchique infrieur et suprieur en plus dune

navigation horizontale. Dans notre travail, nous avons eu recours au modle

composite pour assurer une navigation plus souple pour lutilisateur et un

minimum de clique pour atteindre une page. Aprs avoir analys les mod-

les de navigation existants, nous avons opt pour le modle composite car

il prsente la navigation la plus pratique. La figure 1.7.3 illustre lorgani-

gramme de notre boutique.

Figure 1.6 Modle Composite

Chapitre 2

Conception technique

2.1 introduction

Dans cette partie nous prsentons une modlisation de notre futur ap-

plication. Nous construisons une vue statique de la solution sous forme de

diagramme de classes et aussi une vue dynamique sous forme de diagramme

de squence.

2.2 Conception graphique

Lors de cette tape, nous essayerons de mettre en harmonie les couleurs,

les formes, et la typographie. Nous prsentons dans cette partie le produit

et la charte graphique de ltablissement.

2.2.1 Synopsis

Tout projet multimdia commence par la rdaction du synopsis, linfor-

mation qui le contient doit permettre au lecteur dimaginer ce que pourrait

tre le produit et de connatre ainsi son intrt.

2.2 Conception graphique 18

Prsentation du produit

Sujet : application mobile e-commerce sous Androd.

Type et support : Smartphone.

Objectifs :

Dvelopper lactivit e-commerce et lusage de lachat en ligne sur site

Web Passion Beaut.

Dvelopper la rentabilit du site et favoriser le ROI.

Augmenter le trafic du site Passion Beaut.

Fidliser les abonns Passion Beaut.

Contribuer au renouvellement du parc mobile.

Attirer des prospects en leur facilitant lacte dachat.

Fournir une information pertinente et frache sur les produits disponibles.

Public et march viss

Type de lecteurs viss : les internautes.

March vis : March franais.

Contexte dutilisation : vente de la gamme de produits via lapplication

.

2.2.2 Charte graphique

La charte graphique est un document de travail comprenant les recom-

mandations dutilisation et les caractristiques des diffrents lments graphiques

qui peuvent tre utiliss sur les diffrents supports de communication de len-

treprise. La charte graphique permet de garantir lhomognit de la com-

munication visuelle au sein de lentreprise. Certes Passion Beaut a dj sa

propre charte graphique, cependant nous sommes obligs de la respecter.

2.3 Conception dtaille 19

Choix des couleurs

En vue du respect de la charte graphique impose par la socit, nous

avons t obligs de garder les mmes couleurs de la charte.

Choix des formes et des lignes

Pour concevoir notre interface nous avons opt pour les formes rectangu-

laires coins arrondis qui symbolisent la stabilit, la vrit et le dynamisme.

Ces formes sont utilises pour contenir des informations, reprsenter lanima-

tion et encadrer certains objets. Les rectangles sont prsents lhorizontale

pour produire un effet panoramique. Nous avons utilis les coins arrondies

des formes pour dynamiser linterface car ils symbolisent le mouvement et

linteraction.

Choix de la typographie

Nous navons pas choisi de typographie pour la boutique, car nous avons

repris celle qui est utilise 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 hrit par les autres pages du site. La figure 2.1 montre

le gabarit de notre boutique.

2.3 Conception dtaille

La conception dtaille de la boutique est compose de deux vues

savoir la vue statique et la vue dynamique. Dans une premire parti, nous

2.4 Description de la vue statique 20

Figure 2.1 Gabarit de notre boutique

introduisons une modlisations des diagrammes statique(i.e., diagramme de

classe et diagramme dobjets). Par suite, nous dcrivons le comportement

des classes et des entits dans les diagrammes dynamiques .

2.4 Description de la vue statique

Le diagramme de classes dcrit larchitecture du systme. Il reprsente les

classes et les relations entre elles. Les figures ci-dessous montre le diagramme

de classes de notre application


2.4.1 Base de donnes Back-office

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

Figure 2.2 Base de donnes Back-office

2.4.2 Base de donnes Application

La figure 2.3 illustre la base de donn de lapplication.

Figure 2.3 Base de donnes Application


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 lapplication

La figure2.5 illustre le diagramme de classe de lapplication :

Figure 2.5 Diagramme de Classe de lapplication

2.5 Cas dutilisation global relatif un client 23

2.4.5 Cas dutilisation global

La figure 2.6, illustre le cas dutilisation global de lapplication Androd

et du Back-office.

2.5 Cas dutilisation global relatif un client

La figure 2.7 illustre le cas dutilisation global relatif au client.

Le tableau 2.1 dcrit le cas dutilisation global relatif un client.

Acteur Client

Pr-condition Le client lance lapplication.

Post-condition Le client utilise manipule lapplication

Principal Scnario Le client consulte les produits et les ajoute au

panier et gre son panier.

Le client peut accder la galerie des images

qui contient des chantillons de produits.

Le client peut partager lapplication sur twiter,

facebook, par mail et par sms.

Le client peut effectuer une commande

Le client peut accder au site du

passion-beaut.com.

alternatif Nant

Table 2.1 Description du cas dutilisation global relatif un client

2.6 Le diagramme de cas dutilisation recherche et slection des

produits

La figure 2.8 illustre le diagramme de cas dutilisation relatif la fonction

recherche et slection des produits.

Le tableau 2.2 dcrit le cas dutilisation recherche et slection des pro-

duits.

2.7 Cas dutilisation grer son panier du site Passion Beaut 24

Nom du cas Cas dutilisation recherch et slection des pro-

duits

Acteur Client

Pr-condition liste des produits Disponible.

Post-condition Le client a trouv le produit quil cherchait,il

peut accder au site pour terminer la fonction

dachat

Scnario Principal. - Le client lister Les produits qui sont tris soit

par catgorie,marque ou produits du mois.

-Le client slectionne le produit pour voir une

fiche dtaille du produit.

-Le client a le choix dajouter daccder au site

et complter la procdure dachat.

Table 2.2 Description du cas dutilisation recherche et slection des produits

2.7 Cas dutilisation grer son panier du site Passion Beaut

La figure 2.9 prsente le diagramme de cas dutilisation relatif la

fonction accder au site passion-beaut.com pour complter la procdure

dachat.

Le tableau 2.3 dcrit le cas dutilisation dun client qui gre son panier

partir du site passion beaut

2.8 Cas dutilisation partage de lapplication

La figure 2.10 illustre le diagramme de cas dutilisation de partage sur

facebook, sur twitter, par mail ou par sms.

Le tabbleau 2.4 dcrit le cas dutilisation de partage de lapplication.

2.9 Cas dutilisation global relatif ladministrateur 25

Nom du cas Grer son panier du site passion beaut

Acteur Client

Pr-condition Le client appuy sur le bouton accder au site

dans le page description dtaille de lapplica-

tion.

Post-condition - Le Client entr dans le site de la passion beaut

pour acheter un produit slectionn dans lappli-

cation

Scnario Principal. -Le client entrer dans le site passion-beaut .

-le client terminer le procdure du commande

dune produit dans le site.

Table 2.3 Description de cas dutilisation grer son panier du site Passion Beaut

Nom du cas Cas dutilisation grer loption de partage

Acteur Client

Pr-condition Le client sauthentifier

Post-condition Partager sur Facebook et twitter ou par mail et

sms

Scnario Principal. -Le client sauthentifie.

-le client partage lapplication sur Facebook.

-le client partage lapplication sur Twiter.

-le client partage lapplication par mail.

-le client partage lapplication par sms.

Table 2.4 Description de cas dutilisation partage de lapplication

2.9 Cas dutilisation global relatif ladministrateur

La figure 2.11 reprsente le cas dutilisation global relatif ladministra-

teur.

Le tableau 2.5 dcrit le cs dutilisation global relatif ladministrateur.

2.10 Cas dutilisation mise jour des produits, des catgories et des marques 26

Nom du cas Utilisation global relatif a ladministrateur

Acteur Administrateur

Pr-condition Ladministrateur est authentifi

Post-condition Mettre jour les catgories, les marques et les

produits

Scnario Principal. -Ladministrateur met jour les produits.

-Ladministrateur modifie,ajoute ou supprime

des marques.

-Ladministrateur met jour les catgories.

Table 2.5 Description du cas dutilisation global relatif ladministrateur

2.10 Cas dutilisation mise jour des produits, des catgories et

des marques

La figure 2.12 illustre le cas dutilisation de la fonction de mise jour

des produits, des catgories et des marques.

Le tableau 2.6 dcrit le cas dutilisation de mise jour des produits, des

catgories et des marques.

2.11 Cas dutilisation diagramme de composants

La figure 2.13 illustre le diagramme de composant, les composants de

notre projet sont back-office(cot administrateur) et applicationAndrod(cot

client).

2.12 Description de la vue dynamique 27

Nom du cas Mettre les produits, les catgories et les marques

jour

Acteur Administrateur

Pr-condition Ladministrateur est authentifi

Post-condition Mettre jour les donnes de back-office

Scnario Principal. -Ladministrateur sauthentifie.

-Ladministrateur consulte les produits, il peut

modifier ou supprimer un ou plusieurs produits.

-Ladministrateur consulte les catgories, il peut

modifier ou supprimer un ou plusieurs cat-

gories.

-Ladministrateur consulte les marques, il peut

modifier ou supprimer un ou plusieurs marques

Table 2.6 Description de cas dutilisation mise jour produits, catgories et marques

2.12 Description de la vue dynamique

Dans ce paragraphe nous prsentons une modlisation conceptuelle des

traitements moyennant les diagrammes de squence qui mettent en uvre

les diffrents objets.

2.13 Les diagrammes de squence

Un diagramme de squence prsente une collaboration avec une inter-

action superpose. En gnral une squence porte sur un type spcifique

daction dont la description devrait tre renforce.

2.14 Diagramme de squence daffichage de galerie des images

La figure 2.14 illustre le scnario daffichage de la catgorie dimage.

2.15 Diagramme de squence dtail produits 28

2.15 Diagramme de squence dtail produits

La figure 2.15 illustre la procdure daffichage de dtailles des produits.

Comme montre la figure, le client slectionne lune des produit, la classe

dtail prend la main et affiche la fiche dtaille de ce produit.

2.16 Diagramme de squence grer panier du site

La figure 2.16 prsente le squencement suivre pour accder au site et

grer le panier du site.

2.17 Diagramme de squence de mise jour des catgories

La figure 2.17 illustre le diagramme de squence dajout, suppression et

modification dune catgorie.

2.18 Diagramme de squence de mise jour des marques

La figure 2.18 illustre le diagramme dajout, suppresion et modification

des marques.

2.19 Diagramme de squence de mise jour des produits

La figure 2.19 illustre le diagramme dajout, suppression et modification

des produits.

2.20 Diagramme de squence daffichage des produits tries par marque 29


marque

La figure illustre le scnario daffichage de dtaille de produit en choisis-

sant le classement des produits par marque.

2.21 Diagramme de squence de partage

Le bouton menu affiche le menu de lapplication, le bouton partager

lance une boite de dialogue, qui permet de faire le partage de lapplication

sur facebook et twitter ou lenvoyer par mail ou sms. La figure 2.21 illustre

ce diagramme de squence.

2.21.1 Conclusion :

Dans ce chapitre, nous avons dtaill les phases de conception : con-

ception graphique et conception technique qui nous a permis de dgager la

structure de la base de donnes fin quon puisse raliser notre solution

dans le chapitre suivant.

2.21 Diagramme de squence de partage 30

Figure 2.6 Cas dutilisation global


Figure 2.7 Diagramme de cas dutilisation global relatif un client


Figure 2.8 Cas dutilisation recherche et slection des produits


Figure 2.9 Diagramme de cas dutilisation accder au site passion-beaut.com

Figure 2.10 Cas dutilisation partage de lapplication


Figure 2.11 Cas dutilisation global administrateur


Figure 2.12 Cas dutilisation mise jour produits, catgories et marques


Figure 2.13 Diagramme de composants

Figure 2.14 diagramme de Squence galerie image


Figure 2.15 Diagramme de Squence dtail produits


Figure 2.16 Diagramme de squence grer panier du site


Figure 2.17 diagramme de squence de mise jour des catgories


Figure 2.19 Diagramme de squence de mise jour des produits


Figure 2.20 Diagramme de squence daffichage des produits tries par marque


Figure 2.21 Diagramme de squence de partage

Chapitre 3

Ralisation et Test

3.1 Introduction

Ce chapitre est consacr la prsentation de lenvironnement matriel

et logiciel utiliss pour le dveloppement de la solution propos, nous ex-

pliquerons ventuellement nos choix techniques relatif aux langages de pro-

grammation et des outils utiliss. Nous donnons ensuite une description des

rsultats aboutis approuvs par quelques imprimes crans.

3.2 Environnement du travail

Dans cette section nous dcrirons lenvironnement du travail.

3.2.1 Environnement matriel

Lapplication a t dveloppe sur la machine possdant les caractris-

tiques suivantes :

3.2 Environnement du travail 45

Processeur Intel Centrino duo

Mmoire 1 Go

Ecran 15,4

Frquence dhorloge 1 .73 GHZ

Disque dur 230 Go

Processeur Intel Centrino duo

Mmoire 4 Go

Ecran 17,4

Frquence dhorloge 3 GHZ

Disque dur 640 Go

3.2.2 Environnement logiciel

Pour raliser notre application de vente de produits en ligne, nous avons

eu recours aux logiciels suivants :

Eclipse (lenvironnement de dveloppement Androd [4]) : Outil de

dveloppement dapplication.

Adobe Photoshop CS3 : Logiciel pour le traitement et les retouches

dimages.

Apache 2.2.14 : Serveur web.

MySQL : Sytme de gestion de base de donne.

notepad++ : diteur simple pour lcriture du code PHP [5].

Pour raliser notre rapport nous avons eu recours au logiciel suivant :

kile : application sous Linux pour la rdaction du rapport en Latex

Dia et Gimp : deux application ddies la gestion des images et la

gnration des images vectorielles.

3.3 Tests et ralisation 46

3.3 Tests et ralisation

3.3.1 Diagramme de dploiement

Le diagramme de dploiement montre la disposition physique des matriels

qui composent le systme. Les ressources matrielles sont reprsentes sous

forme de nuds. Notre application est hberge sur un serveur Web et les

postes clients peuvent y accder. Ceci est illustr dans la figure suivante :

Figure 3.1 Diagramme de dploiement


3.3.2 Scnario dexcution

ce stade, nous prsentons notre application travers les divers im-

primes crans raliss. Nous prsentons, au dbut linterface de la page din-

scription du Back-office. En effet, pour sinscrire, lutilisateur doit choisir

un login et un mot de passe.

Capture dcran : page inscription

Figure 3.2 Capture dcran : page inscription


Capture dcran : page connexion

Figure 3.3 Capture dcran : page connexion

La figure 3.3 illustre la page de connexion du Back-office. Comme montre

la figure, lutilisateur doit saisir un login et un mot de passe valides pour

accder aux interfaces qui suivent.

Capture dcran : ajout catgorie

La figure 3.4 illustre la page dajout dune catgorie. une fois le champ

libelle catgorie est remplis, on valide lajout par le bouton submit.

Capture dcran : page catgorie

La figure 3.5 illustre les diffrentes catgorie existantes. partir du

champ action on peut modifier ou supprimer les catgories.

Capture dcran : ajout marque

Comme le montre la figure 3.6 lajout dune marque, se fait par le saisi

du nom de la marque et lappui sur le bouton submit pour la validation.


Figure 3.4 Capture dcran : ajout catgorie

Figure 3.5 Capture dcran : page catgorie


Figure 3.6 Capture dcran : ajout marque

Capture dcran : 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 dcran : ajout produit

La figure 3.8, mentionne, lajout dun produit. En effet, chaque produit

sinscrit sous une catgorie et une marque. Ainsi chaque produit est carac-

tris par un prix, la quantit disponible, une image, une description et un

libell.

Capture dcran : 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 donnes relative.


Figure 3.7 Capture dcran : page marque

Figure 3.8 Capture dcran : page produit


Figure 3.9 Capture dcran : page produit

ce stade, nous prsentons notre application embarque travers dif-

frentes imprimes crans raliss. Nous prsentons, au dbut les deux pages

du chargement, illustr dans les figures 3.10 et 3.11, Au cours du chargement

lapplication se connecte au Back-office via le Web service et met jour la

base SQLite du tlphone.


Figure 3.10 Capture dcran : la premire page de chargement

Figure 3.11 Capture dcran : la deuxime page de chargement

Capture dcran : page dacceuil de lapplication embarqu

La figure 3.12 reprsente la page daccueil de lapplication. Le menu de

lapplication contient des sous menu qui donne lutilisateur lopportunit


Figure 3.12 Capture dcran : page daccueil de lapplication embarqu

de partager lapplication, visualiser les produits, les marques et la galerie

dimages.


Capture dcran : page propo

Figure 3.13 Capture dcran : page propos

La figure 3.13 reprsente la page A propos qui permet de passer partir

de lapplication vers le site Passion Beaut. Ainsi partir de cette page on

peut avoir des renseignements concernant cette socit.


Capture dcran : page des catgories

Figure 3.14 Capture dcran : page des catgories

La figure 3.14 affiche les diffrentes catgories des produits commercial-

iss par la socit. En choisissant une catgorie on aura la listes des produits

qui sinscrivent sous cette catgorie.


Capture dcran : liste des accessoires

Figure 3.15 Capture dcran : liste des accessoires

la figure 3.15 illustre la liste des produits accessoires.


Capture dcran : liste des pinceaux

Figure 3.16 Capture dcran : liste des pinceaux

La figure 3.16 illustre les pinceaux disponible. En choisissant un pinceau

on passe vers la page dtaille de ce produit.


Capture dcran : liste des produits de bain

Figure 3.17 Capture dcran : liste des produits de bain

La figure 3.17 illustre la liste des produits qui existe sous la catgorie

produit de bain. La liste est mise jour moyennant un back-office.


Capture dcran : page de partage

Figure 3.18 Capture dcran : page de partage

La figure 3.18 illustre les choix de partage. partir de cette page le client

peut partager lapplication sur facebook et twiter, envoyer un mail ou un

sms.


Capture dcran : partage sur facebook

Figure 3.19 Capture dcran : partage sur facebook

La figure 3.19 reprsente linterface de connexion sur le site facebook afin

de partager lapplication.


Capture dcran : partage sur twitter

Figure 3.20 Capture dcran : partage sur twitter

La figure 3.20 illustre linterface de connexion sur le site twitter afin de

partager lapplication.


Capture dcran : envoyer un mail

Figure 3.21 Capture dcran : envoyer un mail

La figure 3.21 illustre linterface de lenvoie de lapplication par mail.


Capture dcran : Page des marques

Figure 3.22 Capture dcran : galerie des marques

La figure 3.22 illustre les marques des produits. En choisissant une mar-

que on passe vers les produits de cette marque.


Capture dcran : Produits de la marque lacoste


La figure 3.23 illustre la liste des produits qui sincrivent sous la marque

lacoste. En choisissant un produit on passe vers la page dtaille de ce

produit.


Capture dcran : Produits de la marque Dior



Dior. En choisissant un produit on passe vers la page dtaille de ce produit.


Capture dcran : Produits de la marque Boss



Boss. En choisissant un produit on passe vers la page dtaille de ce produit.


Capture dcran : galerie dimage

Figure 3.26 Capture dcran : galerie dimage

La figure 3.26 illustre les images de quelques chantillons de produits.

Conclusion et Perspectives

Au cours de ce travail, nous avons tout dabord men une recherche sur

les applications e-commerce et leurs systmes de fonctionnement (paiement,

livraison, etc..). Nous sommes intresss en particulier lapplication des

oprateurs privs de tlcommunication en France et en Amrique du nord.

Nous avons donc essay de dgager leurs fonctionnalits et leurs choix adop-

ts, ce qui nous a permis de dterminer les grands axes que nous allons

suivre pour concevoir notre solution.

Notre problmatique consiste donc dvelopper lapplication en ligne de

Passion Beaut.

Pour atteindre ces objectifs nous avons choisi le langage UML pour mod-

liser notre Application, aussi bien dans les activits de capture des besoins,

de conception ou danalyse. Nous avons cependant tenu tre plus simplistes

et moins exigeants en termes de mthodes de conception et de logistique,

dans le but de nous concentrer plus sur la pratique de la ralisation du

projet.

Lapplication que nous avons ralis, permettra de :

Dvelopper lactivit e-commerce et lusage de lachat en ligne sur le

site Web.

Augmenter le trafic du site passion-beaut.com.

Fidliser les abonns de Passion Beaut.

Attirer des prospects en leur facilitant lacte dachat.


Fournir une information pertinente et frache sur les produits disponibles.

Malgr son intrt comme solution indispensable pour dvelopper les

chiffres de ventes de Passion Beaut et malgr la difficult de la tche dau-

tocritique, nous ne pouvons pas prtendre que ce travail est une solution

complte et dfinitive. Nous mentionnons que notre projet de fin dtude

sarrte ltape ou le client accde au catalogue du produits car Passion

Beaut sest rserv le droit deffectuer totalement et seul cette tche. En

effet, il y a toujours des amliorations. Nous citons titre dexemple :

Ajouter un module de paiement depuis lapplication mobile.

Dvelopper un web service (ct serveur) pour rendre, la tche de la

mise jour (ct mobile), possible laccs lapplication indpendam-

ment du plateforme.

Publier lapplication Passion Beaut 1.0 sur Androd marquet et

capter les amliorations possible partir des rclamations clients.

Chapitre 4

ANNEXES

UML 1 est un Langage graphique de modlisation des donnes et des

traitements. Cest une formalisation trs aboutie et non propritaire de la

modlisation objet utilise en gnie logiciel. LOMG diffuse depuis Novembre

2007 la version UML 2.1.2, et travaille prsent sur la version 2.2.

4.1 Le formalisme dUML

Le modle UML [2, 3] est compos de 13 types de diagrammes (9 en UML

1.3). UML ntant pas une mthode, leur utilisation est laisse lapprcia-

tion de chacun, mme si le diagramme de classes est gnralement considr

comme llment central dUML, des mthodologies, telles que lUnified-

Process, axent elles lanalyse en tout premier lieu sur les diagrammes de

cas dutilisation (Use Case). De mme, on peut se contenter de modliser

(seulement) Partiellement un systme, par exemple certaines parties cri-

tiques. UML se dcompose en plusieurs sous-ensembles

Les vues : Les vues sont les observables du systme. Elles dcrivent le sys-

tme dun point de Vue donn, qui peut tre organisationnel, dynamique,1. UML est lacronyme de en anglais Unified Modeling Language et en franais langage de modlisation

unifi

4.2 Les diagrammes 72

temporel, architectural, gographique, Logique, etc. En combinant toutes

ces vues il est possible de dfinir (ou retrouver) le systme Complet.

4.2 Les diagrammes

Les diagrammes sont des lments graphiques. Ceux-ci dcrivent le Con-

tenu des vues, qui sont des notions abstraites. Les diagrammes peuvent faire

partie de plusieurs vues.

4.3 Les modles dlment

Les modles dlment sont les briques des diagrammes UML, ces Mod-

les sont utiliss dans plusieurs types de diagramme. Exemple dlment :

cas dutilisation, classe, association, etc. Mise en uvre dune dmarche

laide dUML : les vues Une faon de mettre en uvre UML est de considrer

diffrentes vues qui peuvent se Superposer pour collaborer la dfinition du

systme.

Figure 4.1 Les vues


Vue des cas dutilisation : cest la description du modle "vue" par les

acteurs du systme. Elle correspond aux besoins attendus par chaque

acteur (cest le QUOI et le QUI). Vue logique : cest la dfinition du

systme vu de lintrieur. Elle explique comment peuvent tre satisfaits

les besoins des acteurs (cest le COMMENT).

Vue dimplmentation : cette vue dfinit les dpendances entre les mod-

ules.

Vue des processus : cest la vue temporelle et technique, qui met en

uvre les notions de tches concurrentes, stimuli, contrle, synchroni-

sation, etc.

Vue de dploiement : cette vue dcrit la position gographique et lar-

chitecture physique de chaque lment du systme (cest le O). Note :

le POURQUOI, nest pas dfini dans UML.

4.4 Les diagrammes

Les 13 diagrammes UML sont dpendants hirarchiquement et se com-

pltent La hirarchie des diagrammes UML 2.0 sous forme dun diagramme

de classes

4.4.1 Diagrammes Structurels ou Diagrammes statiques (cf. Structure Dia-

gram)

Diagramme de classes :(cf. Class Diagram) : il reprsente les classes

intervenant dans Le systme.

Diagramme dobjets :(cf. Object Diagram) : il sert reprsenter les

instances de Classes (objets) utilises dans le systme.

Diagramme de composants :(cf. Component Diagram) : il permet de

montrer les Composants du systme dun point de vue physique, tels


quils sont mis en uvre (Fichiers, bibliothques, bases de donnes...).

Diagramme de dploiement :(cf. Deployment Diagram) : il sert reprsen-

ter les lments matriels (ordinateurs, priphriques, rseaux, sys-

tmes de stockage...) et la Manire dont les composants du systme

sont rpartis sur ces lments matriels et Interagissent avec eux.

Diagramme des paquetages :(cf. Package Diagram) : un paquetage

tant un conteneur Logique permettant de regrouper et dorganiser

les lments dans le modle UML, le Diagramme de paquetage sert

reprsenter les dpendances entre paquetages, cest dire Les dpen-

dances entre ensembles de dfinitions.

Diagramme de structure composite :(cf. Composite Structure Dia-

gram) : permet de Dcrire sous forme de bote blanche les relations

entre composants dune classe.

Diagrammes Comportementaux

Diagramme des cas dutilisation :(use cases) (cf. Use Case Diagram) :

il permet didentifier les possibilits dinteraction entre le systme et

les acteurs (intervenants extrieurs au systme), cest--dire toutes les

fonctionnalits que doit fournir le systme.

Diagramme tats-transitions :(cf. State Machine Diagram) : permet de

dcrire sous forme de machine tats finis le comportement du systme

ou de ses composants.

Diagramme dactivit :(cf. Activity Diagram) : permet de dcrire sous

forme de flux ou denchanement dactivits le comportement du sys-

tme ou de ses composants.

Diagramme dinteractions ou Diagrammes dynamiques : (cf. Interac-

tion Diagram)

Diagramme de squence : (cf. Sequence Diagram) : reprsentation

4.5 Standardisation et Certification UML : 75

squentielle du droulement des traitements et des interactions entre

les lments du systme et/ou de ses acteurs.

Diagramme de communication : (cf. Communication Diagram) : reprsen-

tation simplifie dun diagramme de squence se concentrant sur les

changes de messages entre les objets.

Diagramme global dinteraction : (cf. Interaction Overview Diagram) :

permet de dcrire les enchanements possibles entre les scnarios pral-

ablement identifis sous forme de diagrammes de squences (variante

du diagramme dactivit).

Diagramme de temps : (cf. Timing Diagram) : permet de dcrire les

variations dune donne au cours du temps. Les modles dlments.

4.5 Standardisation et Certification UML :

UML nest pas un standard de fait mais un standard industriel de

lOMG (novembre 1997). Ceci tant, vu le succs initial de ce langage, il

aurait Pu tout aussi bien tre simplement standard de fait . Depuis

juillet 2005, la premire Version 2.* de UML est valide par lOMG. Par

ailleurs, depuis 2003, lOMG a mis en place un programme de certification

la pratique et La connaissance dUML : OCUP (OMG Certified UML

Professional)

4.6 Exemple de squence de cration des diagrammes

4.7 Logiciels de modlisation UML

Il existe de nombreux outils logiciels de modlisation UML. Malheureuse-

ment aucun dentre Eux ne respectent strictement aucune des versions dUML,

particulirement UML2 : beaucoup De ces outils introduisent des notations

4.7 Logiciels de modlisation UML 76

Diagramme de cas dutilisation Spcification, cahier des charges

Diagramme de squence

Diagramme dobjet Conception Architecturale

Diagramme dactivit

Diagramme de classe

Diagramme de communication

Diagramme de dploiement

Diagramme de composant

particulires non conformes, trs peu supportent les diffrents types de dia-

grammes dfinis par le standard. Beaucoup en revanche incluent des Outils

de gnration de squelette de code, particulirement partir du diagramme

de classes, qui est celui qui se prte le mieux une telle automatisation. Les

outils plus rputs, dfaut dtre conformes, sont les outils dopenModel-

Sphere.

Bibliographie

[1] Android numro 1. Disponible sur Internet ladresse

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

numero-un-mondial, 2010.

[2] Xavier Blanc. UML2 pour les pour les dveloppeurs. EYROLLES, 2006.

[3] Xavier Blanc. UML 2 de lapprentissage la pratique. 2009.

[4] Cyril Mottier et Ludovic Perrier. Dveloppez pour Android. 2010.

[5] Christophe Villeneuve. PHP et MySQL - MySQLi - PDO. 2008.

final2-140201101804-phpapp01

Documents