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 chire 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 lachage des produits
selon la catgorie et les produits du mois. Lapplication proposera lachat sur site du Passion
Beaut.
Augmenter le trac 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-oce 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 eet, 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 gure of 21.6 billion downloads. These
are of course trade online tops. Our project presented here specically application designed to
run on the Androd platform. The project allows the marketing of products of a company
acting in the beauty products eld. The application allows the display of products by category
and oers of month. The application oers on-site purchase of Passion Beauty.
Increase site trac 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 Oce), which should provide an
interface for management and updating the product catalog through a Back-oce. 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 n 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 eet 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 torir ne pourra exprimer lamour et la reconnaissance que je te
porte. En tmoignage, je tore ce modeste travail pour te remercier pour
tes sacrices et pour laection 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 aection 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 eorts quils
ont consenti pour laccomplissement de mes tudes. Je leur ddie ce modeste
travail en tmoignage de mon grand amour et ma gratitude innie. A tous
mes amis,
Pour leur aide et leur soutien moral durant llaboration du travail de n
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 ocielle pour Andrd . . . 6
1.4.1 Prsentation gnrale . . . . . . . . . . . . . . . . . 7
1.4.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 7
1.4.3 Analyse technique . . . . . . . . . . . . . . . . . . . 9
1.5 Analyse du lapplication Best Buy pour Androd . . . . . 9
1.5.1 Prsentation de Best Buy . . . . . . . . . . . . . . . 9
1.5.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 10
1.5.3 Analyse technique . . . . . . . . . . . . . . . . . . . 12
1.6 Spcication des besoins fonctionnels . . . . . . . . . . . . . 12
1.6.1 Identication 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-oce . . . . . . . . . . . . . 21
2.4.2 Base de donnes Application . . . . . . . . . . . . . 21
2.4.3 Diagramme de classe du Back-oce . . . . . . . . . 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 dachage 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 dachage 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 Certication 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 gures
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-oce . . . . . . . . . . . . . . . . . 21
2.3 Base de donnes Application . . . . . . . . . . . . . . . . . 21
2.4 Diagramme de Classe du Back-oce . . . . . . . . . . . . . 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
2.20 Diagramme de squence dachage des produits tries par
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.23 Capture dcran : galerie des marques . . . . . . . . . . . . 65
3.24 Capture dcran : galerie des marques . . . . . . . . . . . . 66
3.25 Capture dcran : galerie des marques . . . . . . . . . . . . 67
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 ocielle. . 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 n 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-
tion Androd 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 n dtudes pour
lobtention du diplme universitaire en Informatique et Multimdias eectu
au sein de la Socit NETISSE. Au cours de ce stage la socit NETISSE
nous a con 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 an de dgager les besoins de notre application. Ensuite, nous d-
taillerons les spcications 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 enn 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 eectues 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 gure 1.1, lapplication Amazon ore plusieurs fonc-
tionnalits au visiteur. Il lui permet de :
1. Eectuer 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 ocielle pour Andrd 6
La gure 1.1 (a) illustre la page daccueil de lapplication Amazon
La gure 1.1 (b) illustre la liste des produits propos par lapplication
Amazon
La gure 1.1 (c) illustre les informations dtaill dun produit
La gure 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 ocielle pour Andrd
Dans cette section nous prsentons lapplication eBay.fr. Ensuite nous
procdons une analyse fonctionnelle, technique et graphique.
1.4 Analyse de lapplication eBay ocielle pour Andrd 7
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
Aaires suivre se terminent bientt.
1.4.2 Analyse fonctionnelle
Cette application permet aux utilisateurs de :
1. Accder facilement au compte eBay.
2. Consulter la description et les dtails de lobjet.
3. Recevoir des notications lorsquune de vos Aaires suivre se termine
bientt.
4. Acher les dtails sur le vendeur, notamment son prol dvaluation et
ses valuations rcentes par les autres utilisateurs.
1.4 Analyse de lapplication eBay ocielle pour Andrd 8
(a) (b)
(c) (d)
Figure 1.2 Application eBay
1.5 Analyse du lapplication Best Buy pour Androd 9
La gure 1.3 (a) illustre la page daccueil de lapplication eBay
La gure 1.3 (b) illustre les votes des clients pour le produit HARLEY
DAVIDSON
La gure 1.3 (c) illustre la liste des produits gagns
La gure 1.3 (d) illustre le rsultat de la recherche pour pantech 7000

1.4.3 Analyse technique

Lapplication eBay est dvelopp avec le langage Java (SDKANDROD).
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 typographie utilise est
sans empattement.
Cette typographie facilite la lecture de la page
de lapplication.
Table 1.2 Connotation et dnotation du lapplication eBay ocielle.
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.
1.5 Analyse du lapplication Best Buy pour Androd 10
Lapplication de Best Buy ore une nouvelle faon dachat des tech-
nologies dernire cri.Elle permet ainsi de parcourir le catalogue de produits
complet Best Buy, comparer les spcications 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 dacher vos derniers achats, le
suivi des points, et le dcouvert des dernires ores.
1.5.2 Analyse fonctionnelle
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 notications lorsquune de vos Aaires suivre se termine
ou lorsquun membre a surenchri
4. Achez les dtails sur le vendeur, notamment son prol dvaluation
et ses valuations rcentes
5. Achez les autres objets du vendeur
1.5 Analyse du lapplication Best Buy pour Androd 11
(a) (b)
(c) (d)
Figure 1.3 Application BestBuy
1.6 Spcication des besoins fonctionnels 12
La gure 1.5 (a) illustre la page de la description dtaill dun produit
La gure 1.5 (b) illustre la page de la comparaison entre deux produit
La gure 1.5 (c) illustre la liste des services oertes par lapplication
La gure 1.5 (d) illustre le rsultat dune recherche
1.5.3 Analyse technique
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.
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 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 Spcication des besoins fonctionnels
Dans cette partie nous identions les acteurs de notre boutique en ligne
an de pouvoir dgager les besoins fonctionnels.
1.6.1 Identication des acteurs
Lapplication doit fournir un ensemble de fonctionnalits aux clients.
En eet, lapplication Permettra aux clients deectuer leurs achats et de
lancer des commandes. Cependant, nous Parvenons dgager deux acteurs
1.6 Spcication 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.
Modier 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.
Modier une catgorie.
Supprimer une catgorie.
1.7 Modle de navigation 14
Lister les catgories.
2. Grer les marques
Ajouter une marque.
Modier une marque.
Supprimer une marque.
Lister les marques.
3. Grer les produits
Ajouter un produit.
Modier un produit.
Supprimer un produit.
Lister les produits.
1.7 Modle de navigation
Le modle de navigation permet de dnir 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 Modle de navigation 15
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 Modle de navigation 16
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 gure 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 trac 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 dirents lments graphiques
qui peuvent tre utiliss sur les dirents 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 eet 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 gure 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 gures ci-dessous montre le diagramme
de classes de notre application
2.4 Description de la vue statique 21
2.4.1 Base de donnes Back-oce
La gure 2.2 illustre la base de donn du Back-oce.
Figure 2.2 Base de donnes Back-oce
2.4.2 Base de donnes Application
La gure 2.3 illustre la base de donn de lapplication.
Figure 2.3 Base de donnes Application
2.4 Description de la vue statique 22
2.4.3 Diagramme de classe du Back-oce
La gure 2.4 illustre le diagramme de Classe du Back-oce :
Figure 2.4 Diagramme de Classe du Back-oce
2.4.4 Diagramme de classe de lapplication
La gure2.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 gure 2.6, illustre le cas dutilisation global de lapplication Androd
et du Back-oce.
2.5 Cas dutilisation global relatif un client
La gure 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 eectuer 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 gure 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
che 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 gure 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 gure 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 sauthentier
Post-condition Partager sur Facebook et twitter ou par mail et
sms
Scnario Principal. -Le client sauthentie.
-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 gure 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 authenti
Post-condition Mettre jour les catgories, les marques et les
produits
Scnario Principal. -Ladministrateur met jour les produits.
-Ladministrateur modie,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 gure 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 gure 2.13 illustre le diagramme de composant, les composants de
notre projet sont back-oce(cot administrateur) et application Androd(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 authenti
Post-condition Mettre jour les donnes de back-oce
Scnario Principal. -Ladministrateur sauthentie.
-Ladministrateur consulte les produits, il peut
modier ou supprimer un ou plusieurs produits.
-Ladministrateur consulte les catgories, il peut
modier ou supprimer un ou plusieurs cat-
gories.
-Ladministrateur consulte les marques, il peut
modier 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 dirents 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 spcique
daction dont la description devrait tre renforce.
2.14 Diagramme de squence dachage de galerie des images
La gure 2.14 illustre le scnario dachage de la catgorie dimage.
2.15 Diagramme de squence dtail produits 28
2.15 Diagramme de squence dtail produits
La gure 2.15 illustre la procdure dachage de dtailles des produits.
Comme montre la gure, le client slectionne lune des produit, la classe
dtail prend la main et ache la che dtaille de ce produit.
2.16 Diagramme de squence grer panier du site
La gure 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 gure 2.17 illustre le diagramme de squence dajout, suppression et
modication dune catgorie.
2.18 Diagramme de squence de mise jour des marques
La gure 2.18 illustre le diagramme dajout, suppresion et modication
des marques.
2.19 Diagramme de squence de mise jour des produits
La gure 2.19 illustre le diagramme dajout, suppression et modication
des produits.
2.20 Diagramme de squence dachage des produits tries par marque 29
2.20 Diagramme de squence dachage des produits tries par
marque
La gure illustre le scnario dachage de dtaille de produit en choisis-
sant le classement des produits par marque.
2.21 Diagramme de squence de partage
Le bouton menu ache 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 gure 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 n quon puisse raliser notre solution
dans le chapitre suivant.
2.21 Diagramme de squence de partage 30
Figure 2.6 Cas dutilisation global
2.21 Diagramme de squence de partage 31
Figure 2.7 Diagramme de cas dutilisation global relatif un client
2.21 Diagramme de squence de partage 32
Figure 2.8 Cas dutilisation recherche et slection des produits
2.21 Diagramme de squence de partage 33
Figure 2.9 Diagramme de cas dutilisation accder au site passion-beaut.com
Figure 2.10 Cas dutilisation partage de lapplication
2.21 Diagramme de squence de partage 34
Figure 2.11 Cas dutilisation global administrateur
2.21 Diagramme de squence de partage 35
Figure 2.12 Cas dutilisation mise jour produits, catgories et marques
2.21 Diagramme de squence de partage 36
Figure 2.13 Diagramme de composants
Figure 2.14 diagramme de Squence galerie image
2.21 Diagramme de squence de partage 37
Figure 2.15 Diagramme de Squence dtail produits
2.21 Diagramme de squence de partage 38
Figure 2.16 Diagramme de squence grer panier du site
2.21 Diagramme de squence de partage 39
Figure 2.17 diagramme de squence de mise jour des catgories
2.21 Diagramme de squence de partage 40
2.21 Diagramme de squence de partage 41
Figure 2.19 Diagramme de squence de mise jour des produits
2.21 Diagramme de squence de partage 42
Figure 2.20 Diagramme de squence dachage des produits tries par marque
2.21 Diagramme de squence de partage 43
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 gure suivante :
Figure 3.1 Diagramme de dploiement
3.3 Tests et ralisation 47
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-oce. En eet, pour sinscrire, lutilisateur doit choisir
un login et un mot de passe.
Capture dcran : page inscription
Figure 3.2 Capture dcran : page inscription
3.3 Tests et ralisation 48
Capture dcran : page connexion
Figure 3.3 Capture dcran : page connexion
La gure 3.3 illustre la page de connexion du Back-oce. Comme montre
la gure, lutilisateur doit saisir un login et un mot de passe valides pour
accder aux interfaces qui suivent.
Capture dcran : ajout catgorie
La gure 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 gure 3.5 illustre les direntes catgorie existantes. partir du
champ action on peut modier ou supprimer les catgories.
Capture dcran : ajout marque
Comme le montre la gure 3.6 lajout dune marque, se fait par le saisi
du nom de la marque et lappui sur le bouton submit pour la validation.
3.3 Tests et ralisation 49
Figure 3.4 Capture dcran : ajout catgorie
Figure 3.5 Capture dcran : page catgorie
3.3 Tests et ralisation 50
Figure 3.6 Capture dcran : ajout marque
Capture dcran : page marque
La gure 3.7 illustre toutes les marques existantes. Dans le champ action
on a deux boutons qui nous permet de supprimer ou modier les marques.
Capture dcran : ajout produit
La gure 3.8, mentionne, lajout dun produit. En eet, 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 gure 3.9 illustre la page des produits du Passion Beaut. Chaque
ligne identie un produit. Le champ action permet de supprimer un produit
ou modier ses donnes relative.
3.3 Tests et ralisation 51
Figure 3.7 Capture dcran : page marque
Figure 3.8 Capture dcran : page produit
3.3 Tests et ralisation 52
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 gures 3.10 et 3.11, Au cours du chargement
lapplication se connecte au Back-oce via le Web service et met jour la
base SQLite du tlphone.
3.3 Tests et ralisation 53
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 gure 3.12 reprsente la page daccueil de lapplication. Le menu de
lapplication contient des sous menu qui donne lutilisateur lopportunit
3.3 Tests et ralisation 54
Figure 3.12 Capture dcran : page daccueil de lapplication embarqu
de partager lapplication, visualiser les produits, les marques et la galerie
dimages.
3.3 Tests et ralisation 55
Capture dcran : page propo
Figure 3.13 Capture dcran : page propos
La gure 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.
3.3 Tests et ralisation 56
Capture dcran : page des catgories
Figure 3.14 Capture dcran : page des catgories
La gure 3.14 ache les direntes catgories des produits commercial-
iss par la socit. En choisissant une catgorie on aura la listes des produits
qui sinscrivent sous cette catgorie.
3.3 Tests et ralisation 57
Capture dcran : liste des accessoires
Figure 3.15 Capture dcran : liste des accessoires
la gure 3.15 illustre la liste des produits accessoires.
3.3 Tests et ralisation 58
Capture dcran : liste des pinceaux
Figure 3.16 Capture dcran : liste des pinceaux
La gure 3.16 illustre les pinceaux disponible. En choisissant un pinceau
on passe vers la page dtaille de ce produit.
3.3 Tests et ralisation 59
Capture dcran : liste des produits de bain
Figure 3.17 Capture dcran : liste des produits de bain
La gure 3.17 illustre la liste des produits qui existe sous la catgorie
produit de bain. La liste est mise jour moyennant un back-oce.
3.3 Tests et ralisation 60
Capture dcran : page de partage
Figure 3.18 Capture dcran : page de partage
La gure 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.
3.3 Tests et ralisation 61
Capture dcran : partage sur facebook
Figure 3.19 Capture dcran : partage sur facebook
La gure 3.19 reprsente linterface de connexion sur le site facebook an
de partager lapplication.
3.3 Tests et ralisation 62
Capture dcran : partage sur twitter
Figure 3.20 Capture dcran : partage sur twitter
La gure 3.20 illustre linterface de connexion sur le site twitter an de
partager lapplication.
3.3 Tests et ralisation 63
Capture dcran : envoyer un mail
Figure 3.21 Capture dcran : envoyer un mail
La gure 3.21 illustre linterface de lenvoie de lapplication par mail.
3.3 Tests et ralisation 64
Capture dcran : Page des marques
Figure 3.22 Capture dcran : galerie des marques
La gure 3.22 illustre les marques des produits. En choisissant une mar-
que on passe vers les produits de cette marque.
3.3 Tests et ralisation 65
Capture dcran : Produits de la marque lacoste
Figure 3.23 Capture dcran : galerie des marques
La gure 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.
3.3 Tests et ralisation 66
Capture dcran : Produits de la marque Dior
Figure 3.24 Capture dcran : galerie des marques
La gure 3.24 illustre la liste des produits qui sincrivent sous la marque
Dior. En choisissant un produit on passe vers la page dtaille de ce produit.
3.3 Tests et ralisation 67
Capture dcran : Produits de la marque Boss
Figure 3.25 Capture dcran : galerie des marques
La gure 3.25 illustre la liste des produits qui sincrivent sous la marque
Boss. En choisissant un produit on passe vers la page dtaille de ce produit.
3.3 Tests et ralisation 68
Capture dcran : galerie dimage
Figure 3.26 Capture dcran : galerie dimage
La gure 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 trac du site passion-beaut.com.
Fidliser les abonns de Passion Beaut.
Attirer des prospects en leur facilitant lacte dachat.
3.3 Tests et ralisation 70
Fournir une information pertinente et frache sur les produits disponibles.
Malgr son intrt comme solution indispensable pour dvelopper les
chires de ventes de Passion Beaut et malgr la dicult de la tche dau-
tocritique, nous ne pouvons pas prtendre que ce travail est une solution
complte et dnitive. Nous mentionnons que notre projet de n dtude
sarrte ltape ou le client accde au catalogue du produits car Passion
Beaut sest rserv le droit deectuer totalement et seul cette tche. En
eet, 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 diuse 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 lUnied-
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 Unied Modeling Language et en franais langage de modlisation
uni
4.2 Les diagrammes 72
temporel, architectural, gographique, Logique, etc. En combinant toutes
ces vues il est possible de dnir (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
direntes vues qui peuvent se Superposer pour collaborer la dnition du
systme.
Figure 4.1 Les vues
4.4 Les diagrammes 73
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 dnition du
systme vu de lintrieur. Elle explique comment peuvent tre satisfaits
les besoins des acteurs (cest le COMMENT).
Vue dimplmentation : cette vue dnit 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 dni 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
4.4 Les diagrammes 74
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 dnitions.
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 didentier 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 nis le comportement du systme
ou de ses composants.
Diagramme dactivit :(cf. Activity Diagram) : permet de dcrire sous
forme de ux 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 Certication 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 simplie 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 identis 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 Certication 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 certication
la pratique et La connaissance dUML : OCUP (OMG Certied 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 Spcication, 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 dirents types de dia-
grammes dnis 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.