Code : A19

PROJET DE FIN DETUDES

Dveloppement dune Application Androde :

BestShop

Elabor par :

Encadr par :

BAKRI EMIRA

Mme TRABELSI Ilef

CHAABEN Koussai

Mr GUEDDANA Amor

Anne Universitaire
2011 2012
1

Remerciement

En prambule ce projet, nous souhaitons adresser nos remerciements les plus

sincres aux personnes qui nous ont apport leur aide et qui ont contribu llaboration de ce projet ainsi qu la russite de cette formidable anne universitaire.
Nous tenons remercier sincrement Monsieur le Prsident-Directeur Gnral de la socit Cube 3D pour nous avoir accueillis et intgrs au sein de son
quipe. Nous souhaitons particulirement adresser nos remerciements les plus sincres Monsieur , qui en tant quencadreur, sest toujours montr lcoute et trs
disponible tout au long de la ralisation de ce projet.
Nos remerciements sadressent galement Monsieur GUEDDANA Amor et
Madame TRABELSI Ilf, enseignants encadrant lInstitut Suprieur des Arts
Multimdia de la Manouba (ISAMM), pour leurs disponibilits et nous tenons
leur exprimer notre profonde gratitude pour navoir cess de nous prodiguer leurs
prcieux conseils sans lesquels nous naurions pas pu raliser ce modeste travail.
Nous dsirons galement remercier tous les membres de lquipe Cube3D pour
leur esprit collaboratif et leur soutien moral qui nont pargn aucun effort pour
nous tre utile.
Nous adressons aussi nos vifs remerciements tous nos professeurs ainsi qu
lensemble du personnel du Dpartement Informatique et Multimdia et Communication Multimdia lISAMM pour leur dvouement durant les annes que nous
avons pass dans cette grande famille.
2

Ddicace

Je ddie ce modeste travail,

A la mmoire de Mon Pre
Que Dieu ait son me
A Ma Mre
Qui a claire mon chemin et qui ma encourag et soutenue toute au long de mes
tudes
A mes trs chres surs Donia et Imne
Pour tout lamour et le soutien que vous mavez offert
A mon frre Wissem
Jespre te voir faire les bons choix dans ta vie et je te souhaite tout le bonheur du
monde
A mes deux meilleurs amies
Marwa et Meriam
Pour tout les moments quon a partag ensemble, puisse dieu nous runir pour
toute la vie
A mes chers amis
Mohamed Ben Mokded, Ibtihel Toukebri et Amir torkhani
Vous mavez toujours normment soutenu et aid tout au long de mon parcours
lISAMM je vous en remercierais jamais assez
A tout ceux qui ont su mapporter aide et soutien aux moments propices, Je ddie
ce travail, reconnaissante et remerciant chaleureusement.
Bekri Amira

A mes parents
pour les sacrifices consentis a mon gard et
pour leurs confiances inestimables.
Je trouve jamais assez de mots pour les remercier,
que ce travail soit lhumable gratitude.
A mes 2 frres pour leur encouragement et leur soutien.
A tous mes amis Qui nont cess de mencourager et de me soutenir tout au long
de cette priode de stage.
A tous mes enseignants
depuis le primaire jusqu au suprieur
En reconnaissance des efforts quils ont fournis pour parfaire ma formation
qu la russite de cette formidable anne universitaire.
Chabaane Koussay

Table des matires

1

Cadre gnral
1.1 Introduction . . . . . . . . . . . . . . . . . .
1.2 Cadre du projet . . . . . . . . . . . . . . . .
1.3 Prsentation de lorganisme daccueil . . . .
1.3.1 Description de lorganisme daccueil
1.4 Prsentation du sujet . . . . . . . . . . . . .
1.5 Organisation du rapport . . . . . . . . . . . .
1.6 Conclusion . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

tude pralable et Spcification des besoins

2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Les systmes dexploitation mobiles (Mobile OS) . . . . . . . . . . . . . .
2.2.1 Comparaison entre les plateformes mobiles . . . . . . . . . . . . .
2.2.2 Performances des OS pour mobile . . . . . . . . . . . . . . . . . .
2.3 Description de la plateforme Android . . . . . . . . . . . . . . . . . . . .
2.4 tude de lexistant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.1 Analyse de lapplication mCasino . . . . . . . . . . . . . . . . . .
2.4.1.1 Prsentation de lapplication mCasino . . . . . . . . . .
2.4.1.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . . .
2.4.1.3 Analyse graphique . . . . . . . . . . . . . . . . . . . . .
2.4.1.4 Organigramme de lapplication mCasino . . . . . . . . .
2.4.1.5 Analyse ergonomique . . . . . . . . . . . . . . . . . . .
2.4.1.6 Analyse technique . . . . . . . . . . . . . . . . . . . . .
2.4.1.7 Diagramme de cas dutilisation de lapplication mCasino
2.4.1.8 Analyse Critique . . . . . . . . . . . . . . . . . . . . .
2.4.2 Analyse de lapplication eBay . . . . . . . . . . . . . . . . . . . .
2.4.2.1 Prsentation de lapplication eBay . . . . . . . . . . . .
2.4.2.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . . .
2.4.2.3 Analyse graphique . . . . . . . . . . . . . . . . . . . . .
2.4.2.4 Organigramme de lapplication eBay . . . . . . . . . . .

.
.
.
.
.
.
.

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

.
.
.
.
.
.
.

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

.
.
.
.
.
.
.

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

.
.
.
.
.
.
.

14
15
15
15
15
16
17
18

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

19
20
20
21
21
23
23
23
23
24
24
24
26
26
26
27
28
28
28
29
29

2.5

2.6

2.7

2.4.2.5 Analyse ergonomique . . . . . . . . . . . . . . . . . . . . . . .

2.4.2.6 Analyse technique . . . . . . . . . . . . . . . . . . . . . . . . .
2.4.2.7 Diagramme de cas dutilisation de lapplication eBay . . . . . .
2.4.2.8 Analyse critique . . . . . . . . . . . . . . . . . . . . . . . . . .
Spcification des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.1 Spcification des besoins fonctionnels . . . . . . . . . . . . . . . . . . . .
2.5.1.1 Identification des acteurs . . . . . . . . . . . . . . . . . . . . .
2.5.1.2 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . .
2.5.1.3 Exigences fonctionnelles de ladministrateur . . . . . . . . . . .
2.5.1.4 Exigences fonctionnelles du client . . . . . . . . . . . . . . . .
Spcification semi formelle des besoins . . . . . . . . . . . . . . . . . . . . . . .
2.6.1 Choix du langage de modlisation . . . . . . . . . . . . . . . . . . . . . .
2.6.2 Les diagrammes de Cas dutilisation . . . . . . . . . . . . . . . . . . . . .
2.6.2.1 Diagramme de cas dutilisation Client . . . . . . . . . . . . .
2.6.2.2 Diagramme de cas dutilisation Administrateur . . . . . . . .
2.6.3 Les diagrammes de squence . . . . . . . . . . . . . . . . . . . . . . . .
2.6.3.1 Diagramme de squence Inscription Client . . . . . . . . . . .
2.6.3.2 Diagramme de squence Authentification client . . . . . . . .
2.6.3.3 Diagramme de squence Localisation du magasin . . . . . . .
2.6.3.4 Diagramme de squence dajout dun produit au panier . . . . .
2.6.3.5 Diagramme de squence de consultation du contenu du panier et
validation de la commande . . . . . . . . . . . . . . . . . . . .
2.6.3.6 Diagramme de squence Authentification administrateur . . .
Spcification des besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . .
2.7.1 Contraintes ergonomiques . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7.2 Contraintes techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7.3 Contraintes esthtiques . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Conception
3.1 Introduction . . . . . . . . . . . . . . . . .
3.2 Scnarisation du Projet . . . . . . . . . . .
3.2.1 Synopsis . . . . . . . . . . . . . .
3.2.2 Scnario de lapplication . . . . . .
3.2.3 Schma de navigation . . . . . . .
3.3 Conception graphique . . . . . . . . . . . .
3.3.1 Charte graphique . . . . . . . . . .
3.3.1.1 Conception de linterface
3.3.1.2 Conception du logo . . .
3.3.1.3 Conception des boutons .

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

29
29
29
31
32
32
32
33
33
33
34
34
34
35
36
37
38
38
38
38
42
42
42
44
44
44
46
47
47
47
48
49
51
51
51
54
59

3.4

3.5
4

3.3.1.4 Gabarit . . . . . . . . . . . . . .
Conception technique . . . . . . . . . . . . . . . .
3.4.1 Modlisation statique du systme . . . . .
3.4.1.1 Diagramme de classe . . . . . .
3.4.1.2 Diagramme de composant . . . .
3.4.1.3 Conception de la base de donnes
3.4.2 Modlisation dynamique du systme . . . .
3.4.2.1 Diagramme de squence dtaills
Conclusion . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

Ralisation et Tests
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2 Environnement du travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.1 Environnement matriel . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2 Environnement, outils et logiciels de dveloppement . . . . . . . . . . .
4.2.2.1 Eclipse Indigo (3.7) . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.2 Andorid SDK (2.2) . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.3 Android Development Tools (ADT) : . . . . . . . . . . . . . .
4.2.2.4 Jdb (The Java Debogger) . . . . . . . . . . . . . . . . . . . .
4.2.2.5 JDK 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.6 Apache 2.2.14 . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.7 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.8 Illustrator CS3 . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2.9 Mozilla Firefox 3.5.9 . . . . . . . . . . . . . . . . . . . . . .
4.2.2.10 LYX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.3 Description du cycle de vie . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.3.1 Le cycle de vie linaire : . . . . . . . . . . . . . . . . . . . . .
4.2.3.2 Choix de modle de cycle de vie . . . . . . . . . . . . . . . .
4.3 Ralisation et Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3.1 Site Web de lapplication : Wordpress . . . . . . . . . . . . . . . . . . .
4.3.1.1 Capture dcran : Page authentification Administrateur . . . . .
4.3.1.2 Capture dcran : Interface dadministration . . . . . . . . . .
4.3.2 Scnario dexcution de lapplication . . . . . . . . . . . . . . . . . . .
4.3.2.1 Capture dcran : Lancement de lapplication . . . . . . . . . .
4.3.2.2 Capture dcran : Interface dintroduction et dauthentification
4.3.2.3 Capture dcran : Interface dinscription . . . . . . . . . . . .
4.3.2.4 Capture dcran : Interface Menu principal et SAV . . . . . . .
4.3.2.5 Capture dcran : Produit et Catgorie . . . . . . . . . . . . .
4.3.2.6 Capture dcran : Visite guide . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.

61
61
61
61
63
65
65
65
70

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

72
73
73
73
73
75
75
76
76
76
77
77
77
77
77
77
77
78
78
78
79
79
80
80
81
82
83
84
85

4.4
5

4.3.2.7
4.3.2.8
4.3.2.9
Conclusion . .

Capture dcran : Interface Contact et Partager . . .

Capture dcran : Ajout panier et Contenance Panier
Capture dcran Golocalisation . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Conclusion et perspectives

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

86
86
87
87
89

Table des figures

1.1

Logo de la socit Cube3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.13
2.11
2.12
2.14
2.16
2.15

Les performances des OS pour mobile . . . . . . . . . . . . .

Interfaces de lapplication mCasino . . . . . . . . . . . . . .
Lorganigramme de lapplication mCasino . . . . . . . . . . .
Diagramme de cas dutilisation de lapplication mCasino . . .
Interfaces de lapplication eBay . . . . . . . . . . . . . . . .
Organigramme de lapplication eBay . . . . . . . . . . . . . .
Diagramme de cas dutilisation de lapplication eBay . . . . .
Formalisation dun Acteur . . . . . . . . . . . . . . . . . . .
Diagramme de cas dutilisation du client . . . . . . . . . . . .
Diagramme de cas dutilisation de ladministrateur . . . . . .
Diagramme de squence Localisation client . . . . . . . . .
Diagramme de squence Inscription Client . . . . . . . . .
Diagramme de squence Authentification Client . . . . . .
Diagramme de cas dutilisation dajout dun produit au panier
Diagramme de squence Authentification administrateur . .
Diagramme de squence de consultation du contenu du panier
commande . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
et validation de
. . . . . . . . .

. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
la
. .

22
24
26
27
28
29
31
32
35
37
38
39
40
41
42

Schma de navigation de lapplication BestShop . . . .

Les couleurs utilises dans lapplication . . . . . . . .
Le propositions errons N1 du logo . . . . . . . . . .
Les propositions errons N2 . . . . . . . . . . . . . .
Les propositions errons N3 . . . . . . . . . . . . . .
Logo finale . . . . . . . . . . . . . . . . . . . . . . .
Les diffrentes tailles du logo . . . . . . . . . . . . . .
Les interdictions de lintgration du logo dans un fond
Les boutons Menu principal . . . . . . . . . . . . . .
Les premires propositions de boutons catgories . . .
Propositions retenues des icnes catgories . . . . . .

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

50
53
55
56
56
57
58
59
59
60
61

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

43

3.12
3.14
3.13
3.15
3.16
3.17
3.18
3.19

Gabarit . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le diagramme de composant . . . . . . . . . . . . . . . . . .
Diagramme de classe de lapplication BestShop . . . . . . . .
Modle conceptuel des donnes . . . . . . . . . . . . . . . .
Modle physique de donnes . . . . . . . . . . . . . . . . . .
Diagramme de squence dtaill Inscription Client . . . . . .
Diagramme de squence Authentification Client . . . . . . . .
Diagramme de squence dtaill dajout dun produit au panier

.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

62
63
64
66
67
68
69
70

4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14

Linterface de dveloppement sur Eclipse . . . .

Reprsentation de deux types dmulateur . . . .
Cycle de vie en V . . . . . . . . . . . . . . .
Page authentification Administrateur . . . . . . .
Interface dadministration . . . . . . . . . . . . .
Lancement de licne . . . . . . . . . . . . . . .
Les interfaces dintroduction et dauthentification
Capture dcran : Interface daccueil . . . . . . .
Interface Menu principal et SAV . . . . . . . . .
Interface Produit et Catgorie . . . . . . . . . . .
Interface Visite Guide . . . . . . . . . . . . . .
Interface Contact et Interface Partager . . . . . .
Interface Ajout Panier et Contenance Panier . . .
Vue statique et Vue Trafique . . . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

75
76
78
79
80
81
82
83
84
85
85
86
87
87

5.1

Architecture dAndroid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

92

10

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

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

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

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

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

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

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

Liste des tableaux

2.1
2.2
2.3
2.4
2.5
2.6

Tableau comparatif des plateformes mobiles . . . . . .

Connotation et dnotation du lapplication mCasino . .
Analyse critique de lapplication mCasino . . . . . . .
Connotation et dnotation du lapplication mCasino . .
Analyse critique de lapplication eBay . . . . . . . . .
Description du cas dutilisation global relatif un client

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

21
25
27
30
31
36

3.1
3.2
3.3
3.4
3.5
3.6

Tableau descriptif de la charte graphique des interfaces

Le choix des formes utilises dans la charte graphique .
Arguments et critiques des propositions N1 . . . . . .
Arguments et critiques des propositions N2 . . . . . .
Arguments et critiques des propositions N3 . . . . . .
Analyse Connotation/Dnotation du logo . . . . . . .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

52
54
55
56
57
57

4.1
4.2
4.3

Ordinateurs Portables 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ordinateur Portable 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Outils/Logiciels de dveloppements . . . . . . . . . . . . . . . . . . . . . . . . .

73
73
74

11

Liste des Abbrviations

OS : Operating System
MOS : Mobile Operating System
SAV : Service Aprs Vente
SDK : Software Developpement Kit
MCD : Modle de Conception de Donnes
MPD : Modle de Physique de Donnes
QR : Quick Reponse
AVD : Android Virtual Device
JDK : Java Development Kit

12

Introduction Gnrale

Depuis son invention en 1983, le tlphone mobile ne cesse de surprendre et dmerveiller grce
au progrs de ses diffrentes fonctionnalits. Ainsi, lusage du tlphone mobile touche un grand
nombre des habitants du monde entier. Son principal souci reste de faciliter la vie de ses utilisateurs.
Le dveloppement de ces applications sadapte donc lvolution de la vie de lhomme[13].
Cest dans cette perspective que nous assistons laccroissement du march mondial de dveloppement des applications destines aux mobiles pendant ces dernires annes. Cest cette varit
en applications qui a gnr la prosprit du tlphone mobile. Cet accroissement, compar celui du march mondial des ordinateurs et des tlviseurs runis, est beaucoup plus considrable.
Parmi les applications de la tlphonie mobile, nous retrouvons lapplication de boutique en ligne,
ces boutiques en ligne telles que Google Market et Apple Store, offrent plusieurs services dans
diffrents domaines notamment dans le secteur de la fonctionnalit GSM. Lapparition de ces applications a t facilite par lutilisation des systmes dexploitation mobiles (Operating System)
OS. Parmi ces systmes nous retrouvons Androde, la plate-forme mobile cre par Google. Son
usage est ddi essentiellement aux Smartphones et autres tlphones mobiles, mais on commence
le trouver galement sur quelques Netbooks (mini portable)[20].
La plate-forme Android est en train de rvolutionner le march de la tlphonie mobile. Android
offre des dizaines de fonctionnalits conues pour largir notre utilisation du tlphone mobile.
Grce Androde, le tlphone mobile devient presque un ordinateur de poche. Il donne laccs
plus de 200.000 applications disponibles sur Androde Market, dont Gmail ou Facebook, ainsi que
la possibilit de jouer, dcouter de la musique, de regarder des vidos, denvoyer des SMS et de
passer des appels tlphoniques.
Dans le cadre de notre projet de fin dtude, nous nous intresserons donc dvelopper une
application qui vise lachat en ligne de diffrents produits. Cette application est reconnue dans le
domaine informatique par le nom E-commerce . Cette application peut tre dveloppe sur une
seule plate-forme savoir : la plateforme Androde. Cette dernire ne cesse daccroitre sa part du
march, elle occupe la premire place en termes de vente au niveau mondial[5].
De nos jours, le rythme de vie sacclre de plus en plus et les gens ont besoin de limiter
leurs dplacements. Cest dans cette perspective que lapplication Androde prsente un moyen de
faciliter la vie quotidienne. Cest pour cette raison que cette application ne cesse de sduire de
plus en plus dutilisateurs chaque jour. Ainsi le nombre des utilisateurs dAndrode continue de
saccroitre. Nous avons donc dcid de dvelopper une application sur le systme dexploitation
Androde dans le but est de commercialiser les produits existants dans notre march national.

13

Chapitre 1

Cadre gnral
Cadre du projet

Prsentation de lorganisme daccueil

Prsentation du sujet

Organisation du rapport

14

1.1

Introduction

Nous dbutons notre travail par ce premier chapitre qui tourne autour de la prsentation de notre
projet ainsi qu sa situation par rapport son cadre gnral. En premier lieu, nous prsentons donc
lorganisme daccueil o nous avons ralis notre projet. En second lieu, nous parlons du projet
dans lequel sintgre notre application. Enfin, nous spcifions le but que nous voulons atteindre par
ce projet.

1.2

Cadre du projet

Dans le cadre de notre formation en multimdias, au sein de lInstitut Suprieur des Arts Multimdias de la Manouba (ISAMM), nous avons effectu un stage de quatre mois. Ce stage a t
ralis dans la socit Cube3D , une socit de prsentation de lorganisme daccueil. Durant ce
stage, nous a t confie la mission de concevoir et de raliser une application Androde. Ce travail
a t effectu dans un environnement purement professionnel et a t trs enrichissant sur le plan
personnel.
Dune part, lobjectif de ce stage a vis linitiation au dveloppement mobile et la maitrise de
la plateforme Androde. Dautre part, il a engendr le dveloppement dune application boutique
en ligne. Cette boutique en ligne est destine aux clients tunisiens et leur permet de consulter des
produits pouvant tre commercialis dans les grandes surfaces telles que Carrefour, Gant et Champion. Le premier avantage est que cette consultation va se faire sans dplacement dans les diffrents
magasins. Le client pourra donc consulter une multitude de produits en seulement quelques cliques.
Le deuxime avantage est la possibilit dconomiser en faisant une comparaison des prix de diffrents produits en vente dans diffrents magasins parfois trs loigns les uns des autres. Cette
application devrait donc offrir la plupart des services commerciaux ncessaires aux clients. Par
ailleurs, elle serait facile daccs et utilisable par tout type dusager. Le client peut aussi rserver
un produit donn avec son mobile et se dplacer par la suite sur place pour finaliser lachat comme
il lui est possible de commander le produit pour tre livr domicile.

1.3

Prsentation de lorganisme daccueil

Dans ce qui suit, nous prsentons notre organisme daccueil.

1.3.1

Description de lorganisme daccueil

Lorganisme daccueil dans lequel notre stage de PFE a t ralis est dcrit comme suit :
Nom : Cube3D 1.1
Slogan : 3D New technology Made Easy . . .
Adresse : 4 Rue de la Libert Sidi Amor 2010 La Manouba
Tl : +216- 50 35 77 74
Fax : 31 197 070
15

Site web : [21]

Mail : contact@cube3dtech.com

Figure 1.1: Logo de la socit Cube3D

Cube3D (figure 1.1) est une socit spcialise dans les nouvelles technologies ainsi que dans
leur dveloppement. Forts de leur savoir-faire dans diffrents domaines, ses quipes dingnieurs
et de techniciens spcialiss ont fait de Cube la seule socit tunisienne capable de produire des
ralisations lchelle mondiale et reconnues par un large publique. tant consciente quaujourdhui les entreprises ne voient plus la technologie comme une simple dpense mais plutt comme
un investissement court et long terme, que leur performance permettent daugmenter la notorit
de leur marque, de conqurir de nouveaux clients et ainsi de vendre plus, Cube3D dveloppe et propose aux entreprises un ensemble de solutions permettant ces dernires datteindre leurs objectifs
en faisant passer leur message.
De la production vido la ralisation de jeux vidos en 3D, en passant par la ralisation et
linstallation de laboratoire ddi, la ralit virtuelle et augmente, Cube3D aide ses clients
faire passer leur message dune faon innovante et cible.
Mdia part entire, les jeux vido font bnficier les clients de Cube3D du in-game-advertising
en dlivrant un message pour un produit ou une marque en proposant au client, annonceur, dacheter ou de louer un espace de communication au sein des visualisations du jeu vido. On verra ainsi
des sportifs en comptition portant des maillots limage de la marque, une voiture de course aux
couleurs de la marque, une ville ou se droule laction avec des panneaux publicitaires au nom de
la marque[12].

1.4

Prsentation du sujet

Notre Projet de Fin dtudes sintitule Conception et Ralisation dune application Androde :
Boutique en ligne : BestShop. Il a pour principal objectif de commercialiser tout type de produit, existant dans les grandes surfaces au niveau du march Tunisien, sur mobile. Le but de cette
application est de prsenter au client un moyen rapide et efficace afin de consulter les diffrents produits dans les grandes surfaces telles que Carrefour, Gant et Champion. Elle permet dexposer
distance la multitude de produits mis en vente dans les diverses grandes surfaces sur le march
tunisien.
Notre Boutique en ligne va comporter toute les informations ncessaires aux clients afin de leur
permettre de choisir le produit qui leur convient.
16

En plus, elle propose diffrents services tel que : le service aprs-vente, un forum de discussion,
la localisation gographique des magasins, un code Qr (une sorte de code barres en 2D Q : Quick
R :rponse) pour promouvoir ou sinformer sur un produit...
Notre application se compose de deux parties :
La premire partie est le Front-Office qui dsigne la partie frontale de lapplication et qui est
en relation direct avec le client. Cette partie est rserve la navigation des clients pour quils
puissent consulter les diffrentes rubriques de lapplication, les diffrentes offres proposes, toutes
les informations possibles sur les produits...
La deuxime partie est le Back-Office qui dsigne lensemble des parties de lapplication
auxquelles lutilisateur na pas accs. Cette partie est rserve ladministrateur de lapplication,
qui doit sidentifier pour pouvoir grer le contenu des produits consults par lapplication, faire des
modifications, ajouter supprimer ou encore modifier...

1.5

Organisation du rapport

Le prsent rapport donne une ide claire sur les diffrentes tapes par lesquelles nous devons
passer pour bien mener ce travail.
Pour bien dcrire notre travail, nous avons divis ce rapport en cinq chapitres comme suit :
Le premier chapitre prsente le cadre gnrale du projet, une prsentation des diffrents objectifs
atteindre est sollicite. Nous prsentons dans une deuxime partie lorganisme daccueil ou a t
ralis le travail.
Dans un deuxime chapitre, nous mettons en vidence limportance du domaine des applications
mobiles ainsi quune brve comparaison des plateformes mobiles. Ce chapitre expose ensuite une
tude des applications dj existantes ayant des objectifs proches de ceux de notre application.
Cette tude aura comme but de relever les avantages adopter et les inconvnients qui doivent tre
vits.
Suite ces tudes dapplications similaires, nous mettons en exergue lidentification des besoins fonctionnels, des besoins non fonctionnels et des besoins semi fonctionnels du projet avec les
diffrents types des diagrammes.
Dans un troisime chapitre, nous prsentons la scnaristique de notre projet. Ensuite, nous exposons la conception graphique et technique de notre application, ainsi que des extensions envisageables pour ce projet.
Le chapitre 4 est consacr limplmentation et la ralisation du projet ainsi quaux phases de
tests.
Un dernier chapitre rsume le travail du projet, pour ensuite conclure les diffrentes difficults
rencontres durant ce projet ainsi que les futurs perspectives.

17

1.6

Conclusion

Dans ce premier chapitre, nous avons prsent la socit dans laquelle nous avons effectu notre
stage, savoir Cube3D . Dans la suite, nous passons lanalyse des cas similaires pour bien
identifier les diffrentes fonctionnalits de notre application.

18

Chapitre 2

tude pralable et Spcification des besoins

Les systmes dexploitation mobiles

Description de la plateforme Androde

tude de lexistant

Spcification des besoins

19

2.1

Introduction

Au niveau de ce chapitre, nous mettons en vidence limportance du domaine des tlphones

mobiles et lapport de ces applications rvolutionnaires li au domaine des tlcommunications,
avant de prsenter les diffrentes plateformes mobiles et expliquer notre choix de la plateforme
mobile Androde. Ensuite nous prsentons une tude de produits similaires notre projet, qui est
lapplication Boutique en ligne, dans le but dadopter une meilleure solution pour notre application. Nous traitons donc ceci en nous basant sur ltude des points forts et des points faibles des
produits dj existants dun point de vue conceptuel, organisationnel et technique, dans le but de
trouver les solutions convenables pour le travail demand.Nous terminons par ltape de spcification des besoins qui est considr comme la base de dpart de notre travail.

2.2

Les systmes dexploitation mobiles (Mobile OS)

Le tlphone mobile tant un appareil lectronique semblable aux ordinateurs portable et de

bureau, a besoin dun systme dexploitation pour son bon fonctionnement. Celui-ci permettra
aussi de faire fonctionner ses diffrents priphriques.
On a donc besoin dun systme dexploitation pour grer les priphriques de poche. Les OS
mobiles sont donc conus spcialement pour les mobiles. De ce fait, ils sont simples et prsentent
des fonctionnalits limites.
Nous remarquons depuis quelques annes lvolution progressive de nouvelles plateformes qui
offrent des fonctionnalits toujours plus pousses et plus diversifies. Les constructeurs mobiles
se retrouvent donc dans lobligation dadopter ces nouvelles plateformes, par peur de la concurrence. De ce fait, le domaine souvre largement linnovation et la crativit. Cette ouverture
avec labsence dune plateforme complte ont engendr la diversification de loffre des systmes
dexploitation mobile[17].
Les Systmes les plus utiliss sur le march sont :
Android : Systme open source dvelopp par Google.
Bada : Systme ferm propritaire cr par Samsung
Black Berry OS : Systme ferm propritaire cr par RIM.
iOS : Systme ferm propritaire cr par Apple, il est la version mobile du Mac OS.
Windows Mobile 7 : Systme ferm propritaire cr par Microsoft.
Symbian OS : Systme licence publique libre cr par un consortium qui regroupe plusieurs
grands constructeurs travers le monde.
Nous remarquons que tous ces OS prsentent globalement les mmes fonctionnalits et les
mmes services lutilisateur. Cependant, leurs intgrations sont lgrement diffrentes dune plateforme une autre.

20

2.2.1

Comparaison entre les plateformes mobiles

Dans le tableau 2.1, nous tablissons un comparatif entre les diffrentes plateformes en mettant
en vidence les critres lis au dveloppement dapplications mobiles[8].

Critres/
Plateforme

Android

Bada

Black Berry
OS

iOS (iPhone
OS)

Langage de
dveloppement

Java

C++

Java

Objective-C

C/C++/C#

Open Source

Oui
(Apache)

Non

Non

Non

Non

Oui

Prix daccs au
SDK

Gratuit

Gratuit

Gratuit

99$/ ans

Gratuit

Gratuit

Plateformes pour
le SDK
Multitches

Multi
plateformes
Oui

Windows

Mac OS

Windows

Windows

Support Adobe
Flash
Part de March
Boutique en ligne

Windows

Windows
Mobile 7

Symbian OS

Java/C/QT,python

Oui

Oui

Oui limite
background
Api)

Oui

Oui

Oui

Oui

Non

Non

Non

Oui

25.5%
Android
Market

< 1.5%

16.7%

< 1.5%
Windows
Market

36.6%

Samsung Apps

Part de revenu
dveloppeur

70%

Ngociable

Conditions de
publications

Aucune

Aprs
vrification
Samsung

14.8%
Black Berry
App World
100% (200$/10
application)
AccordRIM

App Store

OVIStore

70%

Non fix

70%

Confirmation et
droit dApple

Accord

Accord

Table 2.1: Tableau comparatif des plateformes mobiles

2.2.2

Performances des OS pour mobile

Tel quil est prsent par la figure 2.1 , les performances des OS pour mobile se rsument comme
suit :

Part et prvision du march :

Ce critre sert dlimiter le nombre des utilisateurs potentiels de lapplication. De ce fait, cest
le critre le plus important. OS Symbian, la plus importante, connait une baisse sur le march
daprs les dernires statistiques. Contrairement OS Symbian, les deux plateformes Android et
iOS dApple subissent quant elles une grande progression de ventes.
Le choix sest de ce fait limit lune des deux plateformes Android ou iOS[11].
21

Figure 2.1: Les performances des OS pour mobile

Stratgie marketing :
Les deux firmes Google et Apple prsentent toutes les deux la plateforme de boutique en ligne.
Cependant leurs stratgies de marketing sont totalement diffrentes. En effet, Google incite les
dveloppeurs en liminant toutes les restrictions sur le nombre, la nature, ou la qualit des applications pour la publication des applications sur le Google Market. Apple quant lui se rserve le
droit daccepter ou de refuser les applications. Apple exige une longue procdure dans le but de
faire profiter ses utilisateurs dune meilleure qualit.
Etant dbutant du domaine, nous avons donc trouv plus judicieux de travailler avec la plateforme Android.
Prix daccs au SDK et plateformes disponibles pour SDK :
En ce qui concerne lenvironnement de dveloppement, la plateforme Google Android prsente
dans ce cas aussi, des avantages majeurs par rapport celle dApple. En effet, elle est multiplateforme et open source, donc presque gratuite. De plus, elle utilise le langage de programmation
JAVA qui est largement connu puisquil sagit dun langage acadmique. Par contre, le dveloppement dapplication IPhone ncessite une licence et une plateforme Apple ce qui engendre des
frais non ngligeables. La plateforme iOS utilise un langage spcifique qui est Objectif C donc
une longue priode dapprentissage et dadaptation est indispensable. Nous concluons donc que la
plateforme iOS constitue un point de ralentissement pour les dbutants, cest pour cette raison que
nous avons opt pour lutilisation de la plateforme Androde[18].

22

2.3

Description de la plateforme Android

Le systme dexploitation Androde est le premier OS mobile open sources dans le march destin aux Smartphones, PDA et terminaux mobiles. Android inclut plusieurs fonctionnalits les plus
communes aux OS mobiles, de plus il offre laccs aux diffrents services Google, tel que Google
Search, Gtalk et Google Map. Ce systme prsente plusieurs autres avantages en plus de la possibilit daccs aux diffrents services Google. Il est le seul systme mobile totalement paramtrable
jusqu aujourdhui. En effet, la plateforme Android est totalement personnalisable : aucune application installe sur le mobile nest indispensable son fonctionnement y compris lapplication
home. Pour favoriser les applications Android, Google a mis en place une boutique en ligne qui permet ses utilisateurs de tlcharger des milliers dapplications utiles telles que les services GSM,
la golocalisation, etc. Dans le mme but, Google encourage le dveloppement dapplications destin la plateforme Android, pour cela elle a annonc que tout nouveau service sera disponible en
version mobile avant la version web ou desktop[6].

2.4

tude de lexistant

Dans cette partie, nous faisons des analyses graphiques et techniques de quelques applications
dj dveloppes afin de relever les avantages et les inconvnients pour trouver les solutions convenables pour le travail demand.
Nous traitons deux types dapplications concernant notre sujet qui sont lapplication mCasino
[9] et lapplication eBay [22].
2.4.1

Analyse de lapplication mCasino

Nous laborons dans cette une analyse approfondie de lapplication mCasino dun point de vue
graphique, technique, ergonomique et critique.
2.4.1.1

Prsentation de lapplication mCasino

Lapplication mCasino,prsente dans la figure 2.2, facilite les courses et permet aux consommateurs de chercher des produits, de faire des achats partir dun tlphone portable, de trouver
un service ou un magasin ouvert proximit et de joindre le service client ou encore de trouver les
informations sur un produit. Lapplication mCasino prsente plusieurs interfaces dont on peut citer
linterface daccueil (figure 2.2a) qui contient les multiples liens des services mis la disposition
de lutilisateur. La figure 2.2b saffiche suite la consultation du produit. Elle contient les informations relatives aux produits (prix, quantit...).La figure 2.2c saffiche suite la consultation du
magasin. Elle contient les informations relatives aux magasins (adresse, plan, horaires...).

23

(a) Interface daccueil Casino

(b) Interface mes courses

(c) Interface dtails magasin

Figure 2.2: Interfaces de lapplication mCasino

2.4.1.2

Analyse fonctionnelle

Tel que le montre la figure 2.2, lapplication mCasino offre diffrents services. Elle permet ses
utilisateurs de :
- Rechercher un magasin en fonction de leurs positions gographiques.
- Transformer le mobile en carte de fidlit utilisable en magasin.
- Consulter le compte.
- Dcouvrir les meilleures promotions du moment dans les magasins.
- Complter les paniers e-commerce et suivre les commandes en cours.
- Appeler directement les services clients Casino depuis leurs Smartphone.
- Scanner les produits Casino ainsi que les informations accessibles.
- Utiliser les commandes prcdentes et les produits favoris pour crer un nouveau panier plus
rapidement.
2.4.1.3

Analyse graphique

La connotation et dnotation de lapplication mCasino sont illustres par le tableau 2.2 .

2.4.1.4

Organigramme de lapplication mCasino

Lorganigramme de lapplication mCasino est illustr par la figure 2.3

24

Dnotation

lment

Logo

Structure

Les liens

Utilisation dun panier noir,

dun texte situ en haut et dun
fond contient le dgrade du
couleur vert.
Linterface est simple et lisible.
La barre de menu dans le
premier
cran est sous forme dune
roulette verte, les autres crans
se basent sur les formes
rectangulaires dont les angles
sont arrondis.
Le est fond noir.
Les liens sont organiss
verticalement ils changent de
couleur chaque survol, ils se
manifestent sous la forme
rectangulaire dont les angles
sont arrondis, contenant un
fond noir avec une criture
blanche.

Connotation
Cest un logo simple et
significatif.
La couleur vert est inspir
du logo dandrode.
Le choix du couleur
sinspire du logo.
Lutilisation des formes
rectangulaires donne de
limportance
lapplication.
La structure est varie.

Cette disposition facilite et

encourager lutilisation.

Le choix de style dcriture

a donn a lapplication une
vue stable lisible sans
aucune empattement.
Utilisation dune police
stricte, rigoureuse,
gestuelle.

- Taille : 16 pour les boutons,

14 pour quelque information
- Police : Corbel -Style : gras
- Utilisation dune police
stricte, rigoureuse, gestuelle.

Typographie

Les images

Les images utilises sont

significatives et en
cohrence avec le contenu
de lapplication.

Domination de la forme
circulaire dans la page
daccueil et les pages
internes qui sont
dcoupes sous forme de
grands rectangles pour
insister sur la stabilit.

Le rapport entre ces

couleurs facilite la
lisibilit.

- Les images sont rels

Les images mettent laccent sur
les sujets dactualit.

Des formes gomtriques

simples (rectangles, carrs,
cercle)

Gamme de formes

Gamme de couleurs

-Les couleurs de cette page

sont : le vert, le blanc et le gris
-Arrire-plan : gris fonce

Table 2.2: Connotation et dnotation du lapplication mCasino

25

Figure 2.3: Lorganigramme de lapplication mCasino

2.4.1.5

Analyse ergonomique

a. Aspect graphique
Lemplacement du texte adapt avec la composition de linterface.
Ce portail respecte la dimension de licne et les interfaces qui sont imposes par la charte de
lAndrode.
Le choix de style dcriture a donn lapplication une vue stable lisible sans aucun empattement.
Lutilisation des formes rectangulaires donne de limportance lapplication.
b. Utilit de lapplication
Cette application permet un accs simple et facile aux informations.
Les informations et les fonctionnalits les plus importantes sont accessibles ds le premier et
le deuxime cran.
c. Navigation
La navigation est simple et comprhensible.
Les boutons de navigation comme <<prcdent>> et <<suivant>> sont intgrs.
2.4.1.6

Analyse technique

Lemplacement des boutons prsente un accs facile.

Le systme de navigation nest pas identique dans toutes les interfaces de lapplication.
2.4.1.7

Diagramme de cas dutilisation de lapplication mCasino

Le diagramme de cas dutilisation de lapplication mCasino est prsent par la figure2.7

26

Figure 2.4: Diagramme de cas dutilisation de lapplication mCasino

2.4.1.8

Analyse Critique

Une analyse critique de lapplication mCasino est reprsente par le tableau 2.3.

Aspect technique

Points forts
Structure simple,application unitive pour tout type dutilisateurs.
Rapidit et souplesse de la navigation entre les liens.
Possibilit de retourner facilement la page daccueil avec un
bouton back.
Composition simple est linaire.
Prsence du symbole graphique
pour guider lutilisateur.
Utilisation de la mme couleur
dans les diffrents onglets de lapplication.

Points faibles
Les pages sont trop charges.
Lapplication ne fonctionne pas
bien sur tout type de mobile.
lapplication fonction que dans
les grandes villes.

Aspect graphique

Un manque dinformation dans le

contenu des diffrentes pages.

Table 2.3: Analyse critique de lapplication mCasino

27

2.4.2

Analyse de lapplication eBay

En ce qui suit, nous prsentons une tude graphique et fonctionnelle de lapplication eBay.
2.4.2.1

Prsentation de lapplication eBay

Lapplication eBay permet de parcourir les annonces, acheter des produits et consulter les activits eBay. Ainsi, lapplication eBay permet de recevoir des alertes lorsque les produits sont en vente
aux enchres. La figure 2.5a cest linterface daccueil de lapplication qui contient les multiples
liens des services mis la disposition de lutilisateur. La figure 2.5b illustre linterface qui saffiche
au client suite la consultation du produit. Elle contient les informations relatives au produit (prix,
description...), la figure 2.5c est la page qui saffiche quand lutilisateur met un produit en vente.

(a) Interface daccueil

(b) Interface Item Vies

(c) Interface Sell an Item

Figure 2.5: Interfaces de lapplication eBay

2.4.2.2

Analyse fonctionnelle

Lapplication eBay permet a ses utilisateurs ( figure 2.5) de :

Accder facilement Best Buy
Consulter la description et les dtails de lobjet.
Recevoir des notifications lorsque des affaires suivre se termine ou lorsquun membre a
surenchri.
Afficher les dtails sur le vendeur, notamment son profil dvaluation et ses valuations rcentes.
Afficher les autres articles du vendeur.

28

2.4.2.3

Analyse graphique

Nous prsentons dans le tableau 2.4 la dnotation et la connotation de lapplication eBay.

2.4.2.4

Organigramme de lapplication eBay

Lorganigramme de lapplication eBay est prsent par la figure 2.6

Figure 2.6: Organigramme de lapplication eBay

2.4.2.5

Analyse ergonomique

La page daccueil permet lutilisateur de comprendre la vocation de lapplication et didentifier son contenu et les services proposs.
Les boutons sont bien identifies .
Lutilisateur comprend la navigation dans lapplication depuis la page daccueil.
Utilit de lapplication :
eBay est une application de vente en ligne darticles et dobjets neufs ou doccasion. Elle
reprsente un moteur de recherche interne pour que le client puisse trouver les produits existants.
En plus elle contient un espace client travers lequel linternaute peut se connecter sa session et
acheter des articles. avec un espace dinscription pour informer des nouveauts de lapplication .
2.4.2.6

Analyse technique

Permet une application de se lancer ds que le systme a fini de dmarrer. Cela peut allonger le temps ncessaire au dmarrage de lappareil et ralentir lensemble de lappareil lorsque
lapplication sexcute en continu.
Un bon emplacement des boutons prsente une meilleure utilisation pour le client.
2.4.2.7

Diagramme de cas dutilisation de lapplication eBay

Le diagramme de cas dutilisation de lapplication eBay est reprsent par la figure 2.7

29

Elment

Logo

Structure

Dnotation

Connotation

Le logo est compos dun texte de

couleur rouge,bleu,jaune et vert
Les lettres sont en minuscules
Un texte de couleur blanche qui signifie la puret et linnocence.

Cest un logo simple et significatif.

La varit des couleurs dans le logo
attire le regard et lattention.

La page daccueil est dispose en

deux parties, une partie horizontale et
une partie verticales.
Linterface est simple est lisible..

Les liens
Les liens sont organiss verticalement
ils changent de couleur chaque survol,
il se manifeste sous la forme
rectangulaire dont les angles sont
arrondis, contenant un fond noir avec
une criture blanche.

Cette disposition donne un sens prcis de lecture qui rend la page plus
large.
Le choix du couleur sinspire du
logo.
Lutilisation des formes rectangulaires donne de limportance lapplication.
La structure est varie.

Typographie

Cette disposition facilite et encourager lutilisation.

Typographie des liens :

-Typographie Arial
- Typographie de texte : typo standard
avec une taille plus petite.
La typographie utilise est sans empattement.

Cette typographie facilite la lecture

de la page de lapplication.

Les images mettent laccent sur les

sujets dactualit mais elles ne sont
pas bien traites au niveau de leur
harmonie avec les couleurs de linterface

Les images sont en rapport avec le

sujet et signifiantes.

Photo

Gamme de formes

Des formes gomtriques simples

(rectangle, carrs)

Gamme de couleurs

Les couleurs de cette page sont le

rouge, le blanc, le gris et le bleu. Arrire-plan : blanc

-Les formes utilises sont extraites

des formes de plan et refltent une
harmonie avec le thme. Des formes
qui voquent la stabilit, la base, la
solidit et la rsistance.
Le rapport entre ces couleurs facilite
la lisibilit.

Table 2.4: Connotation et dnotation du lapplication mCasino

30

Figure 2.7: Diagramme de cas dutilisation de lapplication eBay

2.4.2.8

Analyse critique

Nous prsentons lanalyse critique de lapplication eBay dans le tableau 2.5

Aspect technique

Aspect graphique

Points forts

Points faibles

Un quilibre entre le plein et le vide.

Le texte des liens est facile comprendre.

Les pages sont trs charge

Pour pouvoir accder un autre menu
,un passage par un menu droulant est
exig.

Les couleurs sont ergonomies

La prsence de logotype
La mme charte graphique est utilise
dans toutes les pages pour garder lharmonie de lapplication.

Lutilisation dune dgradation du bleu

donne un aspect timide la page.

Table 2.5: Analyse critique de lapplication eBay

31

2.5

Spcification des besoins

Cette partie reprsente ltape de spcification des besoins qui est considre comme la plus
importante puisquelle constitue la base de dpart de notre travail. En outre, la russite de lapplication et sa future utilit seront ralises si toute application est apte raliser les besoins des
utilisateurs et des traitement envisags au niveau de ses oprations. Pour ce faire, nous prsentons
le sujet raliser en dfinissant les besoins fonctionnels,non fonctionnels et semi-fonctionnels de
lapplication dans le but datteindre les rsultats souhaits.
2.5.1

Spcification des besoins fonctionnels

Ltude ralise pralablement des applications similaires, nous a permis didentifier plus clairement les besoins de notre projet et dcarter les inconvnients. Ceci a pour but de mieux rpondre
aux attentes et aux besoins du public cible. Pour cela, il faut dterminer les diffrentes actions qui
peuvent tre effectues par les acteurs lorsquils sont en face de lapplication.
2.5.1.1

Identification des acteurs

Un acteur reprsente un rle dune entit prsent dans le contexte du systme considr vis-vis de ce systme. Un acteur nest pas ncessairement une personne physique il peut tre un service,
une socit, un systme informatique...
La formalisation dun acteur est donne par la figure 2.8

Figure 2.8: Formalisation dun Acteur

Pour notre application nous avons identifi deux acteurs :

Exploitants backoffice : Administrateur
Cet acteur accde grce un login et un mot de passe. Son rle est fondamentalement technique.
En effet, cest le seul responsable de toute modification de lapplication et de ses fonctionnalits.
Exploitants Front-office Utilisateur
Cet acteur possde un nom dutilisateur et un mot de passe pour pouvoir accder aux diffrents
services de lapplication.
32

2.5.1.2

Les besoins fonctionnels

Les besoins fonctionnels expriment une action que doit effectuer le systme en rponse des
demandes sorties qui sont produites pour un ensemble donn dentres.
Notre systme est dcompos en deux sous domaines : le premier est rserv lutilisateur et le
deuxime est un espace rserv ladministrateur.
2.5.1.3

Exigences fonctionnelles de ladministrateur

Lapplication doit permettre ladministrateur de pouvoir effectuer les tche suivantes :

Gestion des clients
Consulter listes des clients.
Supprimer des clients.
Gestion des catalogues et produits
Ajouter un produit.
Modifier les caractristiques dun produit.
Lister les produits.
Supprimer un produit.
Gestion des commandes
Ajouter / Modifier / Supprimer une commande.
Grer les bons de livraison.
Gestion des offres et des actualits
Ajouter / Supprimer / Modifier des offres et des actualits.
Grer la base de donnes.
2.5.1.4

Exigences fonctionnelles du client

Lutilisateur doit avoir la possibilit de :

Consulter des produits
Trier par magasin.
Trier par catgorie .
Visualiser des chantillons de produits via le galerie dimage.
Grer son panier
ajouter un produit au panier
commander le contenu de son panier
modifier le contenu de son panier
Accder au panier de lapplication.
Modifier le panier de lapplication.
Partager lapplication
Partager par mail
Localiser la position du magasin

33

 Contacter ladministrateur.
Par mail.
Contacter le magasin par tlphone

2.6

Spcification semi formelle des besoins

La spcification semi formelle peut tre reprsente par deux types de diagrammes : diagrammes
de cas dutilisations et diagramme de squence.
2.6.1

Choix du langage de modlisation

La modlisation est trs importante puisquelle aide tout dveloppeur et concepteur grer la
complexit dune application. Il est alors essentiel de donner une description dtaille du systme
ainsi quune reprsentation simplifie qui permet de le comprendre. La modlisation de notre application sest base sur le formalisme UML [3] .
2.6.2

Les diagrammes de Cas dutilisation

Dfinition
Le diagramme de cas dutilisation reprsente les fonctionnalits du systme raliser. En effet,
il prsente les cas dutilisation, les acteurs et les relations entre ces derniers. En plus, il dcrit, sous
forme dactions et de ractions, le comportement dun systme selon le point de vue de ses futurs
utilisateurs [15].
1.

lments de base des cas dutilisation :

Acteur (actor) :
Entit externe qui agit sur le systme (oprateur, autre systme...).
Lacteur peut consulter ou modifier ltat du systme.
En rponse laction dun acteur, le systme fournit un service qui correspond son besoin.
Les acteurs peuvent tre classs (acteur principale, secondaire).

Cas dutilisation (use case)

Ensemble dactions ralises par le systme, en rponse une action dun acteur.
Les cas dutilisation peuvent tre structurs
Les cas dutilisation peuvent tre organiss en paquetages (packages).
Lensemble des cas dutilisation dcrit les objectifs du systme

Systme :
Reprsente le domaine tudi.
Il permet de dterminer les limites au-del desquelles les fonctionnalits seront exclues.

34

Figure 2.9: Diagramme de cas dutilisation du client

Association :
Cest une association entre acteurs, entre cas dutilisation ou entre acteur et cas dutilisation.
Pour nous faciliter la tache didentifier les diffrents cas dutilisation de notre application et vu le
grand nombre de fonctionnalits devant tre traits, nous rpartissons notre projet en deux principales parties savoir, une partie correspondant au le client et une deuxime partie concernant
lutilisateur.

2.6.2.1

Diagramme de cas dutilisation Client

En effet, le client de notre boutique BestShop qui est dj inscrit dans notre application doit
sidentifier par un nom dutilisateur et un mot de passe stocks au niveau de la base de donnes qui
sera notifi par ladministration, il doit sauthentifier pour avoir accs lapplication.
La figure 2.9 prsente le diagramme de cas dutilisation du client.

35

* Description du cas dutilisation

La description du cas dutilisation globale du client est illustre dans le tableau 2.6

Acteur

Cas dutilisation

Rle

Client

Titre1 : Sinscrire

Le client doit sinscrire pour crer un compte utilisateur

Le client est oblig de sauthentifier pour pouvoir utiliser les
fonctionnalits de lapplication
Ce cas dutilisation permet au client de consulter toutes les catgories de produits aprs avoir choisir le magasin souhait
Le client peut consulter les actualits et les nouveauts des magasins et des produits comme les nouvelles promotions des produits.
Ce cas dutilisation permet au client de consulter la position gographique du magasin
Ce cas permet de contacter ladministrateur en cas derreur,pour
poser des questions et aussi pour rinitialiser son mot de passe...

Titre2 : Sauthentifier
Titre3 : Consulter
produit
Titre4 : Consulter
actualits
Titre5 : Localiser la
position du magasin
Titre6 : Contacter
administrateur
Titre7 :Consulter
visite guid
Titre8 : Partager
lapplication
Titre9 : Consulter SAV
Titre10 : Scanner un
produit avec le code
QR

Cette action permet au client une visite virtuelle par une

vido qui montre les rayons du magasin
Le client peut partager lapplication sur facebook ou envoyer le
lien de tlchargement de lapplication un ami par mail
Le client aprs avoir achet un produit il peut contacter le magasin souhait pour changer ou poser des questions
Ce cas dutilisation permet au client dobtenir des informations
sur un produit partir de son code QR ou partir de son code
barre

Table 2.6: Description du cas dutilisation global relatif un client

2.6.2.2

Diagramme de cas dutilisation Administrateur

Ladministrateur possde un mot de passe et un nom dutilisateur, il gre distance lajout,les

modification....
La figure 2.10 illustre le diagramme de cas dutilisation de ladministrateur

36

Figure 2.10: Diagramme de cas dutilisation de ladministrateur

2.6.3

Les diagrammes de squence

Les diagrammes de squence permettent une reprsentation graphique des oprations dun systme en fonction de leur chronologie. Ils reprsentent le cycle de vie des objets sur une priode
particulire[7]. Ces diagrammes affichent une interaction sous la forme dun graphique bidimensionnel, la dimension verticale est laxe temporel et la dimension horizontale montre les rles des
objets qui reprsentent des objets individuels dans la collaboration.
Nous prsentons les diffrents scnarios des fonctionnalits de lutilisateur et de ladministrateur.

37

2.6.3.1

Diagramme de squence Inscription Client

La figure 2.11 prsente le diagramme dinscription client

2.6.3.2

Diagramme de squence Authentification client

Nous prsentons le diagramme de squence dauthentification client dans la figure 2.12

2.6.3.3

Diagramme de squence Localisation du magasin

Le diagramme de squence de localisation du magasin est illustr par la figure 2.13

Figure 2.13: Diagramme de squence Localisation client

2.6.3.4

Diagramme de squence dajout dun produit au panier

Le diagramme de cas dutilisation dajout dun produit au panier (figure 2.14 ), suppose que le
client est dj connect son compte.

38

Figure 2.11: Diagramme de squence Inscription Client

39

Figure 2.12: Diagramme de squence Authentification Client

40

41

2.6.3.5

Diagramme de squence de consultation du contenu du panier et validation de la commande

Le diagramme de cas dutilisation de la consultation du contenu (figure 2.15 ), suppose que

la connexion au compte du client t effectue au pralable et que le client a dj slectionn
quelques produits quil a ajout au panier suivant le diagramme prcdent (figure 2.14 ). Suite la
consultation du panier, le client peut valider la
2.6.3.6

Diagramme de squence Authentification administrateur

Dans la figure 2.16 , nous prsentons le diagramme dauthentification de ladministrateur

Figure 2.16: Diagramme de squence Authentification administrateur

2.7

Spcification des besoins non fonctionnels

En plus des besoins fonctionnels dvelopps ci-dessus nous devons tenir compte des besoins non
fonctionnels afin de bien russir notre projet. Il est tout aussi important de ne pas perdre de vue ses
besoins non fonctionnels. En effet, ces besoins ont pour but ltablissement dun langage graphique

42

Figure 2.15: Diagramme

de squence de consultation du contenu du panier et validation de la com-

mande

43

et dune ergonomie adapte au contenu. Dans ce projet, nous allons conserver et renforcer laspect
et le design graphique.
2.7.1

Contraintes ergonomiques

Lergonomie vise la comprhension entre les tres humains et les autres composants dun
systme. Elle a pour but de rendre compatible la conception et lvaluation des taches avec les
besoins des personnes. Pour cela il faut respecter les critres ergonomiques. Ces critres sont : le
guidage, lhomognit et la cohrence que nous dtaillons en suit :
Dvelopper une interface simple et comprhensible par lutilisateur.
Confort visuel et visibilit des caractres.
Permettre un accs rapide linformation.
Hirarchie logique des liens.
Texte dpourvu derreurs grammaticales, orthographiques et typographiques.
Visibilit et lisibilit de texte.
Garantir un certain reprage et aider lutilisateur se localiser par rapport lapplication.
Rduire la surcharge de lutilisateur grce la minimisation de nombre dinteractions de celuici avec le systme (un grand nombre de clic va gner lutilisateur).
2.7.2

Contraintes techniques

Les contraintes techniques se rsument comme suit :

Utilisation facile de lapplication.
Aspect Client Serveur dapplication.
Console Client indpendante quon pourra modifier selon les besoins.
Lapplication doit rpondre exactement aux besoins des utilisateurs.
Navigation guide.
Optimisation des photos de point de vue taille et qualit.
Animations tudies et non perturbantes .
2.7.3

Contraintes esthtiques

Les contraintes esthtiques sont les suivantes :

Minimiser le nombre de couleurs : lutilisation dun nombre limit de couleurs met en valeur
la force dune charte graphique.
Respect de la charte graphique de la socit .
Assurer le contraste entre le texte et le fond.
La mise en page du texte doit tre are.
Rapport texte image
Animations tudies et non perturbantes .
Au niveau de dimension de :

44

Licne de lancement 72pixels/72 pixels.

Licne de menu 48 pixels/48 pixels
La dimension de linterface de lAndrode 320 pixels/480 pixels

Conclusion
Dans ce chapitre,nous avons essay de dcrire les principales fonctionnalits du systme en
commenant par la prsentation des exigences fonctionnelles, non fonctionnelles et semi fonctionnelles. Nous avons enchain avec les contraintes du projet pour aboutir la mise en place des
diffrents intervenants du systme. Cette tude des spcifications des besoins nous a permis de fixer
les besoins de lapplication, le march cible et comment sera t-il possible de la dvelopper.

45

Chapitre 3

Conception
Scnarisation du projet

Conception graphique

Conception technique

46

3.1

Introduction

Au niveau de ce chapitre, nous prsentons en premier lieu la scnaristique de notre application

ainsi que la manire de lexcuter. Nous procdons en second lieu une reprsentation de la vue
statique de la solution sous forme de diagramme de classes dtaill mais aussi une reprsentation
de la vue dynamique sous forme de diagramme de squence. Pour finir, nous prsentons notre base
de donnes et nous dcrivons les diffrentes phases de la recherche graphique par lesquelles nous
sommes passs tout au long de notre travail.

3.2

Scnarisation du Projet

La scnarisation, comme tape de notre projet acquiert une dimension particulirement essentielle. Ainsi, elle se dfinit comme tant un travail dorganisation, un travail technique et ensuite un
travail pdagogique.
En gnral, tout projet doit suivre les tapes suivantes :
Analyse
Rcupration ou cration de contenus
Conception, ralisation, vrification...
Validation
Tests
La scnarisation comprend des rsolutions aussi bien importantes sur le plan technique que sur le
plan communicationnel. Nous allons donc commencer par la prsentation du produit.
3.2.1

Synopsis

Notre projet est une application mobile e-commerce excute sous la plate-forme Androde,
cest une boutique en ligne qui permet de consulter des diffrents types de produits existants dans
les grandes surfaces du march tunisien tel que Gant,Carrefour et Champion.
Titre de lapplication
Le titre de notre application est BestShop un nom compos de deux mot traduit en anglais.
Best : signifie meilleur,optimal,mieux,suprieur...
Shop : signifie magasin, boutique, vente des produits...
Type de lapplication
BestShop est une application mobile m-commerce dveloppe pour les Smartphones Android.
BestShop est un boutique en ligne qui propose des diffrents services.

47

Support de lapplication
Le support de notre application est les Smartphones qui possdent le systme dexploitation
Android.
Sujet de lapplication
Notre application est une boutique en ligne consacre lexposition des produits de toute catgories (vestimentaire, lectronique, informatique, librairie, esthtique... ) qui existent dans les
grandes surfaces du march tunisien tel que Gant, Carrefour et Champion, dans le but de faciliter
lachat aux clients.
March vis
Notre application est destin au march tunisien en premier lieu.
Objectifs
Cette application permet deffectuer plusieurs tache telles que :
q Objectifs gnraux
Faciliter laccs aux informations ncessaires des produits propos
Prsenter diffrents produits informatiques sous diffrents types et rubriques
Faciliter lachat des produits en proposant des services aprs-vente
Fournir une information pertinente et fraiche sur les produits disponibles.

q Objectifs spcifiques
Le client sera capable davoir plus dinformation possible sur les produits qui lintresse et il
a la possibilit de comparer les prix dans les 3 magasins
Le client accdera facilement a toutes les actualits informatiques et au produit disponibles
sur le march national.
Le client sinscrira et aura son propre compte avec son propre panier, et recevra les nouveauts.

3.2.2

Scnario de lapplication

Dans le but de bien comprendre le message qui dcoule de notre projet, nous devons bien analyser le scnario de notre application.
BestShop prsente les services les plus excellents sur les smartphones Androde. En effet, elle
facilite la vie quotidienne du client, lui simplifie les courses et rpond ses besoins.
Il a donc fallu concevoir des interfaces de lapplication qui soient significatives et qui respectent
la charte graphique du logo de la socit. Il faut donc que la composition et les couleurs soient

48

en relation direct avec le contenu de lapplication et du logo. Pour ce faire nous avons cre des
interfaces qui se rapportent licne du logo.
La premire interface est donc linterface daccueil. Son but est dexpliquer lintrt de lapplication. En effet, une petite animation du logo apparait au moment o le client accde lapplication.
Ensuite, apparait un texte qui explique lapplication dune faon gnrale.
La deuxime interface est une interface dauthentification. Son but est de permettre au client
daccder lapplication avec un login et un mot de passe.
Nous trouvons ensuite le menu principal. Celui-ci possde 9 boutons, chaque bouton possde
une icne.
Le bouton Produit permet lutilisateur de consulter tous les types de produit dans le
magasin quil choisit.
Le bouton Panier permet lutilisateur de slectionner des produits, les conserver dans
le panier pour les commander ultrieurement. Ce bouton permet aussi dafficher lhistorique des
produits quil a commands.
Le bouton Golocalisation permet de localiser la position gographique de lutilisateur et
de chercher un magasin partir et proximit de cette position gographique.
Le bouton Visite Guide permet une visite virtuelle du magasin choisie. Cette visite se fait
grce une vido qui montre en dtail le magasin concern ainsi que ce quil renferme comme
rayons et produits.
Le bouton Actualit permet dafficher les actualits comme les nouveaux vnements et les
nouvelles promotions des produits.
Le bouton SAV permet lutilisateur dentrer en contact avec le magasin par tlphone
dans le but de demander des informations.permet dafficher toutes les informations ncessaires
concernant les magasins. Ainsi quun formulaire remplir en donnant le nom, ladresse et lE-mail
et le message propos qui permet de poser des questions, de faire des suggestions. . . Il doit donc y
avoir trois boutons : un avec le numro de Carrefour, un avec celui de Gant et le dernier avec le
numro de Champion.
Le bouton Contact permet de contacter ladministrateur de lapplication dans le but de demander des informations, poser des questions ou bien faire des suggestions...
Le bouton Partager permet de partager lapplication avec un ami.
Le bouton QR code permet de transmettre rapidement les produits imprims des donnes
(url, etc. . .).
Les 9 boutons nous permettent donc un accs direct aux autres pages.
Si l utilisateur na pas un compte il peut sinscrire grce au lien situ au dessous dans linterface
dauthentification.
3.2.3

Schma de navigation

Le schma de navigation de lapplication est illustr par la figure 3.1

49

Figure 3.1: Schma de navigation de lapplication BestShop

50

3.3

Conception graphique

Dans la conception graphique, nous concevons notre application dun point de vue graphique et
essayons de mettre en harmonie les couleurs, les formes et la typographie. Pour cela, nous commenons par la prsentation de la charte graphique.
3.3.1

Charte graphique

La charte graphique est un document de travail qui contient lensemble des recommandations
dutilisation [19] et les caractristiques des lments graphiques (couleurs, symboles, logos, polices, icnes. . .) utilisables sur diffrents supports de communication dune entreprise. Le but de
cette charte graphique est essentiellement de conserver la cohrence et lhomognit de la communication visuelle dans une entreprise. Nous nous retrouvons donc dans lobligation de la respecter.
3.3.1.1

Conception de linterface

La conception des interfaces pour Smartphone doit respecter les contraintes esthtiques, ergonomiques et techniques en prenant en considration la taille des crans qui est petite et la clart
des informations qui est primordiale, le systme de navigation pour quil soit facile utiliser et interprtable. Linterface de lapplication demande llaboration des rgles donnant une unit et une
cohrence son contenu : Il sagit du gabarit gnral des pages, des illustrations et des animations,
du design de la navigation (boutons), des polices et des couleurs de caractres, etc.
Le tableau 3.1 explique les critres que nous avons choisis pour la ralisation graphique de notre
application.

1. Choix de nom :
Au dbut on a pens au AndroCube :
AndroCube : qui est compos de deux mots :
Android : La plateforme de notre application
Cube : le nom de notre organisme daccueil
Mais aprs une bonne priode de recherche on sest rendu compte que ce nom na aucun lien
avec le thme de lapplication mais aussi il est trs gnral.
Ensuite on a pens au nom BestBuy un nom compos de deux mots traduits en anglais.
Best signifie : meilleur,optimale, suprieur...
Buy signifie : commerce, vente, affaire...
Aprs une recherche on sest rendu compte que ce nom existe dj sur AndroidMarket [16].
Aprs une runion nous avons essay de choisir un nom qui pourra tre interprter mondialement. Lhors de notre recherche nous nous sommes bass sur les noms des applications de mme
catgories que notre application.

51

Description
Dynamisme
Convivialit
Le srieux
Lharmonie
Gamme de forme
La typographie
Mise en page

Gamme de
couleurs

Images

Le dynamisme est lun des concepts primordiaux de notre charte graphique

vu linteractivit, au sens propre du terme.
Toutes nos interfaces sont cres en visant prsenter toujours une meilleure
convivialit aux yeux des utilisateurs et des visiteurs.
Le srieux est un concept de base envisag pour symboliser le caractre professionnel de lapplication.
Nous avons assur une continuit entre les diffrentes gammes, pour garder
des compositions harmonieuses. Ce concept a t utilis ainsi au niveau du
choix des couleurs
Les formes de base de notre application sont des forme lisse et ronde Les
formes arrondies prennent une connotation innovante et contemporaine.
La typologie que nous avons utilise est Myriade Pro pour les titres et Myriad pro est parmi la petite liste impose par les normes typographiques de
lAndrode.
La structure suivi est verticale qui se compose par le header, content et footer.
Nous avons gard presque la mme structure pour le reste des pages internes
de lapplication
Les couleurs sont ncessaires pour mettre en valeur une interface graphique,
cest pour cette raison que leurs slections doit se faire avec une forte conformit.
Le degr de chaleur dune couleur peut tre modifi par des mlanges habiles
avec dautres couleurs. Il dpend galement des couleurs qui lentourent.
*Le vert : esprance, chance, stabilit, concentration,donne plus dintensit
pour les couleurs principal dans les supports imprimable et rend linterfaces
plus sobre et classe...
*Le gris : lgance,calme, douceur...
*Le blanc : puret, vertu et chastet
Les images sont prsentes dans 2 pages sur 9 : 20% des interfaces.La prsence
des images est indispensable pour identifier les attributs de page top et page
dtails.
Table 3.1: Tableau descriptif de la charte graphique des interfaces

52

A la fin on sest mis daccord sur le nom BestShop il dcrit clairement le thme de notre
application et il sera facile a dtect.
2. Choix des couleurs
Le choix du couleur constitue une tape importante pour russir la charte graphique,que la charte
graphique doit communiquer avec le public ou le prospect de la socit cliente, en cela, il est trs
important de tenir compte de la signification des couleurs utilises.
Notre application est au service des diffrents supermarchs tel que Gant, Carrefour et Champion. tant donn que chacun des supermarchs possde des logos avec des couleurs diffrentes il
a t difficile de crer un logo qui rfre en mme temps aux logos des trois supermarchs. Aprs
des ngociations avec la socit nous avons fini par choisir une couleur base sur la couleur du logo
de la plateforme Androde.
- Premire couleur : Le vert ( #8BC53F )
- Deuxime couleur : Le gris (#E6E7E8 ) pour les arrires plans
- Troisime couleur utilis dans lapplication le gris fonc pour la typographie avec la couleur
blanche
Les deux couleurs principale sont des couleurs de la vgtation luxuriante qui donnent lquilibre, la paix, le calme et la relaxation.
Le tableau 3.2 prsente les couleurs principales prsent dans lapplication

C : 51%
M : 0%
Y : 99%
K :0 %

Cest la couleur du logo de lAndroid.La couleur verte est la couleur la

plus prsente dans la nature. Associ juste titre au monde vgtal qui
est son plus digne reprsentant, le vert est une couleur apaisante,
rafraichissante et mme tonifiante aussi on lassocie lespoir et la
chance.
Signification positive : esprance, chance, stabilit, concentration...

C : 8%
M : 6%
Y : 6%
K:%

Cest une couleur apaisante

sobre, lgante, elle est une bonne allie
Signification positive : calme, douceur

C : 68%
M : 61%
Y : 59%
K :46 %

Le gris fonce est utilis pour la typographie, cette couleur est apaisante
est gnralement passe-partout et se prte bien avec quasiment toutes les
couleurs.
Signification positive : calme, douceur...
Figure 3.2: Les couleurs utilises dans lapplication

3. Le choix des formes

Certes les couleurs nous communiquent, Les formes aussi nous symbolisent des concepts. Alors,
on doit tre bien prcis dans le choix des formes que contient la charte graphique. Ainsi, dans le

53

but de conserver le mme concept concern, le tableau 3.2contient les formes utilises et leurs
symbolismes.

La forme

Symbolisme

Cercle (la forme

du logo et des
boutons de menu
principale de
lapplication).

Le cercle est le signe le plus commun et le plus universel on le trouve dans

toutes les cultures,il exprime lunit de toute les choses. Le cercle symbolise
la perfection, linfini et la continuit.
cest un synonyme de perfection,dabsolu et dinfini
Toutes nos interfaces sont cres en visant prsenter toujours une meilleure
convivialit aux yeux des utilisateurs et des visiteurs.
qui symbolise lachat,boutique,shopping,les grandes surfaces...

Convivialit
Un charriot

Table 3.2: Le choix des formes utilises dans la charte graphique

4. Le choix de la typographie
Comme les couleurs et les formes, les caractres aussi sont porteurs des messages et dterminant
de ladhsion et la lisibilit dun document.
Nous avons utilis des caractres qui semblent simple, lisible et visible, pour mettre en valeur
les informations et exprimer laspect srieux.
Pour cela nous choisissons la typographie :
Myriad pro : la plus utilis dans les applications mobiles.
3.3.1.2

Conception du logo

Le logo est le composant graphique le plus important dans lapplication. Car il permet dassurer lidentification de lapplication.Pour une identification plus aise on lui associe un nom, une
extension ou sous forme dun sigle. Nous prsentons dans ce qui suit les tapes suivies pour la
conception du logotype.
Nous commenons par prsenter les diffrentes propositions quon a conues pour aboutir un
logo et une icne refltant les concepts voulu.
a. Les propositions errons N1 Dans la figure3.3, nous prsentons les premires propositions
faites.

54

(a) proposition 1 du logo

(b) proposition 2 du logo

(c) proposition 3 du logo

(d) proposition 4 du logo

Figure 3.3: Le propositions errons N1 du logo

Dans le tableau3.3 nous prsentons les arguments et les critiques des propositions errons N1

Arguments

Critique

Les propositions N1 sont faites pour montrer

quil sagit dun logo dune application
Android

-Les formes ne sont pas trop rechercher.

-Lutilisation du logo de la plateforme Android est interdit sans
autorisation.

Table 3.3: Arguments et critiques des propositions N1

b. Les propositions errons N2 Dans la figure 3.4, nous prsentons les deuximes propositions
faites.

55

(a) proposition 4 du logo

(b) proposition 6 du logo

(c) proposition 7 du logo

Figure 3.4: Les propositions errons N2

Dans le tableau 3.4 nous prsentons les arguments et les critiques des propositions errons N2

Arguments

Critique

Les propositions N2 sont bases sur

des paniers et la couleur bleu.

- Utilisation dun bonne-homme ressemble au

bonne-homme dAndroid.
- Lutilisation de la couleur bleu ne respecte pas notre
charte graphique.

Table 3.4: Arguments et critiques des propositions N2

c. Les propositions errons N3 La figure 3.5 , prsente les troisimes propositions faites.

(a) proposition 8 du logo

(b) proposition 9 du logo

(c) proposition 10 du logo

Figure 3.5: Les propositions errons N3

Le tableau 3.5 prsente les arguments et les critiques des proposition errons N3

56

Arguments

Critique

Les propositions contient des paniers qui

reflte le sujet de notre application

Le titre a un mauvais emplacement puisque il drange le contour de

licne dans le cot design
Les couleurs et les formes sont fidles la charte graphique

Table 3.5: Arguments et critiques des propositions N3

On voulait tout simplement que notre logo reprsente directement le thme de notre application
et quen le regardant il donne lide gnral et met lutilisateur dans le vif de notre application.
d. Proposition retenu du logo La proposition finale abouti du logo est illustr dans la figure 3.6

Figure 3.6: Logo finale

e. Dnotation et connotation du logo :

On prsente une analyse dnotative/connotative de notre logo dans le tableau 3.6

Dnotation

Connotation

Iconique : notre logo est compos la fois dlments

graphique et de la typographie accompagn dun jeu de
contraste
Colorimtrique : il y a un contraste de couleur entre le
vert et le gris
Typographie : typographie de type gras caractre
Myriad Pro du style medium, sans empattement avec
des cots arrondies.
Slogan : pas de slogan, vue la complexit du logo

Iconique : lment graphique (charriot) qui dcrit le

thme de la vente de produits dans les grandes surfaces
Colorimtrique : ce contraste permet de dynamiser
notre composition et de guider notre regard
Typographie : BestShop est gras est situ en haut
droite pour attirer lattention de lutilisateur que dans
notre application il trouvera les meilleurs articles et
meilleur prix

Table 3.6: Analyse Connotation/Dnotation du logo

57

Figure 3.7: Les diffrentes tailles du logo

f. Les diffrents tailles du logo

Les diffrentes tailles de notre logo sont illustr dans la figure 3.7 , la taille maximale pour
rduire est 20%

g. Les interdictions de lintgration du logo dans un fond

Comme montre la figure 3.8 , il est interdit de mettre le logo sur certains fonds cause de sa
visibilit.

58

Figure 3.8: Les interdictions de lintgration du logo dans un fond

3.3.1.3

Conception des boutons

a. Les boutons de menu principal

Figure 3.9: Les boutons Menu principal

Comme montre la figure 3.9, les boutons quon a choisit ont la forme circulaire et la couleur
verte relative aux graphismes de notre charte graphique. Le vert symbolise lespoir, la vie et la
nature ainsi que le blanc relatifs aux graphismes significatifs utiliss dans les icnes.
Le bouton Produit consiste en un cercle vert avec une icne qui reprsente un charriot en
blanc.
Le bouton Panier consiste en un cercle vert avec une icne qui reprsente un sac de courses
en blanc.
Le bouton Golocalisation consiste en un cercle vert avec une icne qui reprsente un marker
de golocalisation en blanc.
59

Le bouton Partager consiste en un cercle vert avec une icne qui reprsente la silhouette de
deux individus en blanc.
Le bouton Visite Guide consiste en un cercle vert avec une icne qui reprsente une bobine
de film en blanc.
Le bouton Actualit consiste en un cercle vert avec une icne qui reprsente laction de ce
bouton savoir : donner les actualits.
Le bouton Contact consiste en un cercle vert avec une icne qui reprsente un enveloppe en
blanc.
Le bouton SAV consiste en un cercle vert avec une icne qui reprsente une icne de SAV en
blanc.
Le bouton Scanner consiste en un cercle vert avec une icne qui reprsente une icne qui
reprsente un scanner en blanc.
b. Les boutons du menu catgories
Les premires propositions des icnes des catgories sont illustrs par la figure 3.10

Figure 3.10: Les premires propositions de boutons catgories

Aprs une recherche avance relative aux diffrents icnes, quon a pu obtenir. Ces propositions
ne sont pas fidle au charte graphique ne respecte pas notre charte graphique.

60

c. Propositions retenues des icnes catgories

Aprs une recherche avanc relative aux diffrents icnes,on a russir a obtenir un modle expressif illustr dans la figure 3.11

Figure 3.11: Propositions

3.3.1.4

retenues des icnes catgories

Gabarit

L e gabarit de notre application est illustr dans la figure 3.12

La structure de la page est divise en bloc de rectangles en largeur qui suggre un tat statique.
Elle contient au sujet et elle respecte le contexte de lapplication. On a un rapport texte/image,
le logo est situ sur le bon emplacement pour sa visibilit, les boutons de menu sont au cur de
linterface pour faciliter la navigation. Les images choisies sont places rgulirement lorsquil est
ncessaire

3.4

Conception technique

Pour raliser notre application, nous avons effectu la modlisation avec langage UML.Dans
cette partie, nous dcrivons la vue statique et dynamique du site ainsi que notre base de donnes.
3.4.1

Modlisation statique du systme

Dans cette partie, nous modlisons la vue statique de notre application en utilisant les diagrammes de classe et le diagramme de composant.
3.4.1.1

Diagramme de classe

Le diagramme de classe reprsente la structure statique dun modle, il constitue un lment

trs important de la modlisation. Il reprsente les diffrentes entits intervenant dans un systme et
61

Figure 3.12: Gabarit

62

permet de structurer le travail de dveloppement de manire trs efficace. Un diagramme de classes

est un schma utilis en gnie logiciel pour prsenter les classes et les interfaces dun systme
ainsi que les diffrentes relations entre celles-ci. Dans notre application, le diagramme de classe est
donn par la figure 3.13.
Il est noter que, pour des raison de simplicit de reprsentation, les classes ayant une structure
commune (mme attributs et mmes mthodes) ne sont pas illustrs en totalit. ces classes reprsentent en majeure partie celles qui ont t dveloppes pour grer les diffrents produits. Dans le
diagramme, un exemple de ces classes est donne par la classe lectronique.

3.4.1.2

Diagramme de composant

Le diagramme de composant dcrit le systme modlis sous forme de modules. Ces derniers
sont les lments qui ralisent physiquement ce qui les diagrammes de classe reprsentent logiquement.
Le diagramme de composant comporte :
Les groupes dimplmentations : ils reprsentent une unit pour le regroupement de composant.
Les relations entre les diverses implmentations : reprsentent les relations des dpendances
entre modules.
Le diagramme de composants conforme notre application est prsent dans la figure 3.14

Figure 3.14: Le diagramme de composant

63

Figure 3.13: Diagramme de classe de lapplication BestShop

64

3.4.1.3

Conception de la base de donnes

Pour la conception des donnes, on a choisi loutil de modlisation Power AMC designer pour
diffrentes raisons :
Il est bas sur la sparation des donnes et des traitements effectuer en plusieurs modles
conceptuels et physiques.
Trs bien adopt aux bases de donnes conventionnelles et encore trs utile.
a. Modle Conceptuel des Donnes (MCD)
Le modle conceptuel de donnes dfinit clairement les donnes dfinit clairement les donnes
utilises par le systme dinformation laide des entits.
La figure 3.15 illustre le modle conceptuel des donnes de notre application base de donnes
utilis par lapplication BestShop.

b. Modle physique de Donnes (MPD)

Le modle physique est gnr partir du modle conceptuel des donnes en utilisant le logiciel
Power AMC Designer ou on doit appuyer sur la fonction generate physical data model sous le
menu Tools dans le but de gnrer le script de la base de donnes.
Le MPD de notre base de donnes est prsent par la figure 3.16

3.4.2

Modlisation dynamique du systme

La modlisation dynamique intervient aprs la modlisation statique. Elle est une vision microscopique du systme. Les diffrents diagrammes de cette vue sont :
- Diagramme de collaboration
- Diagrammes dtats transitions
- Diagrammes de squence
- Diagrammes dactivit.
Dans ce qui suit, nous choisissons les diagrammes de squence dtaills.
3.4.2.1

Diagramme de squence dtaills

Nous prsentons les diagrammes de squence des diffrents scnarios des fonctionnalits du
client.
* Diagramme de squence dtaill Inscription Client
La figure 3.17 prsente le diagramme de squence dtaill de linscription du client.

65

Figure 3.15: Modle conceptuel des donnes

66

Figure 3.16: Modle physique de donnes

67

Figure 3.17: Diagramme de squence dtaill Inscription Client

* Diagramme de squence dtaill Authentification Client La figure 3.18 prsente le diagramme de squence dtaill de lauthentification dun client

68

Figure 3.18: Diagramme de squence Authentification Client

* Diagramme de squence dtaill dajout dun produit au panier La figure 3.19 prsente le
diagramme de squence dtaill de lajout dun produit quelconque au panier par le client.

69

Figure 3.19: Diagramme de squence dtaill dajout dun produit au panier

3.5

Conclusion

La conception reprsente la phase la plus dlicate dans la mesure o toute erreur se rpercutera
sur la ralisation.Nous avons conu lapplication de point de vue apparence de linterface et du
70

point de vue contenu afin de bien raliser la partie implmentation.L e chapitre suivant est consacr
la mise en uvre de ce qui a t conu dans le prsent chapitre.

71

Chapitre 4

Ralisation et Tests
Environnement du travail

Environnement Outils/ Logiciels de dveloppement

Ralisation et Test

72

4.1

Introduction

Aprs des tudes thoriques faites dans les chapitres prcdents, cette partie a pour objectif dexposer notre travail achev. En premier lieu, nous prsentons lenvironnement matriel et logiciel
utilis pour le dveloppement de la solution propose, nous expliquons en second lieu nos choix
techniques relatifs aux langages de programmation et des outils utilises. Nous terminons enfin par
mettre en relief le travail effectu, en nous basant sur des figures dillustration.

4.2

Environnement du travail

Pour raliser notre projet, nous prsentons les ressources matrielles et logicielles mises notre
disposition pour la ralisation de notre projet.
4.2.1

Environnement matriel

Pour la ralisation de notre projet, nous avons utilis deux ordinateurs portables dont les caractristiques sont illustrs par le tableau 4.1 et le tableau 4.2 :

Processeur Intel
Mmoire
cran
Frquence dhorloge
Disque dur
Table 4.1: Ordinateurs

Processeur Intel
Mmoire
cran
Frquence dhorloge
Disque dur
Table 4.2: Ordinateur

4.2.2

Centrino Duo
4 Go
15.6
2.1 GHZ
640 Go
Portables 1

Centrino Duo
2 Go
17.4
2.10 GHZ
297 Go
Portable 2

Environnement, outils et logiciels de dveloppement

Nous prsentons dans cette partie tous les logiciels utiliss au cours du dveloppement de notre
Boutique en ligne
Pour le dveloppement de cette application nous avons utilis les outils donn par le tableau 4.3

73

Outil/Logiciels

Fonction

Eclipse
Reprsente lidentifiant dun administrateur
Android SDK 2.2
ADT
Jdb
JDK 6

Crer des applications pour la plateforme Androde

Android Dveloppement Tools
The Java Debogger
Lenvironnement dans lequel le code Java est
compil

Apache 2.2.14
Reprsente le mot de passe de ladministrateur
MySQL
Systme de gestion de base de donne
Illustrator CS3
Le traitement dimage
Mozilla Firefox
3.5.9

Navigateur web

LaTex
Rdaction du rapport

Table 4.3:

Outils/Logiciels de dveloppements

74

4.2.2.1

Eclipse Indigo (3.7)

Eclipse est lIDE utilis dans notre projet pour dvelopper notre code java [16]. Cest un environnement de dveloppement intgr, libre et extensible, permettant de crer des projets de dveloppement mettant en uvre nimporte quel langage de programmation. Eclipse IDE est principalement
crit en Java. Le point fort dEclipse est le fait quil se base sur la notion de plugins aussi dvelopps en java ce qui rend cet IDE extensible et volutif. De plus, Le plugin de Google ADT, est stable
avec cette version, moins avec la version 3.6 Helios.
Linterface de dveloppement sur Eclipse est illustr par la figure 4.1

Figure 4.1: Linterface de dveloppement sur Eclipse

4.2.2.2

Andorid SDK (2.2)

Un kit de dveloppement logiciel (Software Development Kit) permet aux dveloppeurs [14]
de crer des applications pour la plateforme Android. Le SDK Andorid inclut des exemples de
projets avec le code source, les outils de dveloppement dun mulateur, et les bibliothques ncessaires pour construire des applications Android. Les applications sont crites en utilisant le langage
de programmation Java et excutes sur Dalvik, une machine virtuelle personnalise conu pour
lutilisation embarqu, qui tourne au dessus dun noyau Linux. Les mulateurs de test :
Lmulateur
Puisque lAndroid est un systme pour les tlphones mobile, Google a dcid de dvelopper
un mulateur afin que tous le monde puisse tester son travail comme montre la figure 4.2
75

Figure 4.2: Reprsentation de deux types dmulateur

Lmulateur ragit exactement comme le vrai Smartphone, on peut lui crer un espace de stockage, simuler des appels ou des messages...
4.2.2.3

Android Development Tools (ADT) :

Android Development Tools est un plugin Eclipse IDE qui est utilis dans le dveloppement des
applications Androde [2]. Il fournit un environnement puissant et complet pour limplmentation,
le dbogage et les tests. ADT est compos de plusieurs outils, permettant de crer de nouvelles
applications Android, de les maintenir et rcemment dtendre la possibilit de publication sur le
Market Android. ADT tend les possibilits pour nous laisser rapidement installer de nouveaux
projets Android, crer une application UI, ajouter des composants bass sur les API dAndrode,
corriger nos applications en utilisant les outils dAndroid SDK, et exporter des APK31 afin de
distribuer notre application (voir Annexe pour plus de dtails).
4.2.2.4

Jdb (The Java Debogger)

Jdb aide trouver et rparer les erreurs de programmation dans les applications Java. Ses
capacits de suivi peuvent tre utilises pendant lexcution dune application Android.
4.2.2.5

JDK 6

Le Java Development Kit (JDK) est lenvironnement dans lequel le code Java est compil pour
tre transform en bytecode afin que la machine virtuelle Java (JVM32) puisse linterprter. Bref
76

cest lensemble doutils permettant de dvelopper une application en Java.

4.2.2.6

Apache 2.2.14

Apache HTTP Server, souvent appel Apache, est un logiciel de serveur HTTP produit par
lApache Software Foundation. Cest le serveur HTTP le plus populaire du Web. Cest un logiciel
libre avec un type spcifique de licence, nomme licence Apache.
4.2.2.7

MySQL

MySQL est un SGBD (Gestionnaire de base de donnes en franais). Il permet de stoker des
donnes en masse et pouvoir les utiliser volont en les triant comme on le souhaite.
4.2.2.8

Illustrator CS3

Nous avons utilis Adobe illustrateur qui nous permet de renforcer la crativit de la personne
et qui lui permet dexprimer rapidement ces ides. De plus il permet la conversation des images
Bitmap en dessin vectoriel.
4.2.2.9

Mozilla Firefox 3.5.9

Mozilla Firefox est un logiciel utilis pour afficher les pages Web. Il est disponible pour une
grande varit de systmes dexploitation tels que Windows XP et Vista.
4.2.2.10

LYX

Pour rdiger notre rapport, nous avons utilis le logiciel LYX de la version 2.0.2. LYX est un
logiciel de composition typographique adapt la production de documents scientifiques et mathmatiques de grande qualit typographique. Il permet galement de produire toutes sortes dautres
documents, quil sagisse de simples lettres ou de livres entiers. LYX est un logiciel libre WYSIWYM sous licence GNU GPL pour la cration de documents LATEX. Le logiciel LYX a t conu
pour que lutilisateur nait pas sa charge la mise en page, et quil puisse se concentrer sur le
contenu du texte et sur la structure du document [23].
4.2.3

Description du cycle de vie

Dans cette partie, nous prsentons le modle de cycle de vie choisi pour notre projet. Ensuite,
nous allons justifier notre choix.
4.2.3.1

Le cycle de vie linaire :

Dans ce cycle nous trouvons deux modles : le modle en cascade et le modle en V .

77

Le modle en V :
Un cycle de vie est un ensemble ordonn de phases dcrivant la vie dun projet : une phase ne
pouvant commencer que si la phase prside est termine. Il est prouv que le modle en V est trs
utilis pour les grands projets, il permet une organisation modulaire. Le modle en V tient davantage en compte de la ralit ce processus de dveloppement nest pas rduit a un enchainement
dtape squentielle. La figure 4.3 prsente les diffrentes tapes du modle de cycle de vie en V :

Figure 4.3: Cycle de vie en V

4.2.3.2

Choix de modle de cycle de vie

Le modle en V est un modle de vie cause de ses avantages. Il assure une validation intermdiaire, favorise la dcomposition fonctionnelle de lactivit et limite les risques par validation
de chaque tape. Ce modle est trs utilis pour de grands projets et il est idal quand les besoins
sont bien connus, quand lanalyse et la conception sont claires.

4.3
4.3.1

Ralisation et Test
Site Web de lapplication : Wordpress

WordPress est un outil ddi la cration de sites internet administrables (ou CMS, pour Content
Management System : systme de gestion de contenus).
Cest une plate-forme de publication web.
Logiciel libre (open-source) et gratuit, il permet de modifier facilement un site :
- Ajout et modification de pages
- Publications dactualits
78

- Insertion dimages et de vidos. . .

Dans ce qui suit nous prsentons notre site dvelopp avec Wordpress.
4.3.1.1

Capture dcran : Page authentification Administrateur

La figure 4.4 prsente linterface dauthentification travers laquelle ladministrateur peut saisir
son login et son mot de passe pour accder au backoffice.

Figure 4.4: Page authentification Administrateur

4.3.1.2

Capture dcran : Interface dadministration

La figure 4.5 prsente linterface dadministration qui permet ladministrateur de grer les
clients, les magasins ainsi que les produits.

79

Figure 4.5: Interface dadministration

4.3.2

Scnario dexcution de lapplication

4.3.2.1

Capture dcran : Lancement de lapplication

Au lancement de lapplication, une interface (figure 4.6a ) apparait contenant une animation
(figure 4.6b) du logo de lapplication. Au lancement de lapplication, le coin du cercle droite se
plie petit comme une tiquette coll qui se dtache. Le coin continue se dtacher au fur et au
mesure pour laisser apparaitre une partie de lcriture, lcriture dfile progressivement de gauche
droite pour enfin apparaitre en entier et devenir lisible, le mot en haut est crit en gris fonc et le
mot du bas est crit en vert. Pour obtenir en fin le logo final .

80

(a) Lancement de lapplication BestShop

(b) Animation du logo

Figure 4.6: Lancement de licne

4.3.2.2

Capture dcran : Interface dintroduction et dauthentification

Linterface prsente par la figure 4.7a prsente une page dintroduction lapplication. Elle
consiste en une page de bienvenue et donne une ide sur lapplication en question. Sur cette page,
nous avons une dfinition de lapplication. Le message que fait passer cette page est la demande
dinscription aux utilisateurs. Nous avons aussi dans cette page le logo de notre application ainsi
quune flche qui permet daccder la page suivante comme montre la figure 4.7a .
La figure 4.7b est linterface dauthentification qui permet lutilisateur daccder lapplication. Nous avons en haut de la page le logo de lapplication. Cette interface possde deux champs :
81

le champ login et le champ mot de passe dans lesquels lutilisateur introduit son login et son mot
de passe afin daccder lapplication dans le cas ou il est dj inscrit. Dans le cas contraire, nous
avons un lien inscriviez-vous qui permet aux utilisateurs non inscrit de sinscrire.
Aprs avoir introduit ces informations, lutilisateur doit appuyer sur le bouton login en vert
pour accder au menu.

(a) Interface

dintroduction

Figure 4.7: Les

4.3.2.3

(b) Interface

dauthentification

interfaces dintroduction et dauthentification

Capture dcran : Interface dinscription

Linterface dinscription permet lutilisateur de sinscrire lapplication. Cette interface (figure 4.8) possde dix champs qui doivent tre remplis par lutilisateur dans le but de fournir des
informations relatives sa personne et de crer par la suite un compte utilisateur. Ces dix champs
demandent les informations suivantes : Nom, Prnom, CIN, E-mail, Pays, Numro de tlphone,
adresse, nom dutilisateur, mot de passe. En bas de cette page nous avons deux boutons : un bouton
qui permet de valider lentr de ces informations et un bouton qui permet dannuler.

82

Figure 4.8: Capture

4.3.2.4

dcran : Interface daccueil

Capture dcran : Interface Menu principal et SAV

La consultation du menu est possible travers linterface de la figure 4.9a. Elle contient 9 boutons dinteraction qui permettent daccder aux divers services. Les divers services sont : produit,
panier, GPS, partage, visite guide, actualits, contact, SAV et enfin scanner code barre, dtaills
comme suit :
Le bouton Produit consiste en un cercle vert avec une icne qui reprsente un charriot en
blanc.
Le bouton Panier consiste en un cercle vert avec une icne qui reprsente un sac de courses
en blanc.
Le bouton Golocalisation consiste en un cercle vert avec une icne qui reprsente un marker
de golocalisation en blanc.
Le bouton Partage consiste en un cercle vert avec une icne qui reprsente la silhouette de
deux individus en blanc.
Le bouton Visite guide consiste en un cercle vert avec une icne qui reprsente une bobine
de film en blanc.
Le bouton Actualit consiste en un cercle vert avec une icne qui reprsente laction de ce
bouton savoir : donner les actualits.
Le bouton Contact consiste en un cercle vert avec une icne qui reprsente un enveloppe en
blanc.

83

Le bouton SAV consiste en un cercle vert avec une icne qui reprsente une icne de SAV en
blanc.
Le bouton Scanner consiste en un cercle vert avec une icne qui reprsente une icne qui
reprsente un scanner en blanc.
La figure 4.9b met la disposition de lutilisateur 3 boutons permettant chacun dentrer en
contact avec les services aprs vente des 3 magasins : Gant, Carrefour et champion.

(a) Interface

Menu principal
Figure 4.9: Interface

4.3.2.5

(b) Interface

SAV

Menu principal et SAV

Capture dcran : Produit et Catgorie

Linterface produit (figure 4.10a) prsente 3 boutons, chacun correspond lun des trois grandes
surfaces Gant, Carrefour ou Champion. Chaque bouton contient le logo du magasin.
Chaque bouton permet lutilisateur de consulter un produit dtermin dans lun des trois magasins.
Suite laccs de lun des magasins, il y a une interface qui prsente les diffrentes catgories
des produits tel que montre la figure 4.10b.
Nous avons 9 catgories, parmis lesquels nous citons :
Le bouton Vestimentaire est un bouton gris avec une icne qui prsente des vtements.
Le bouton Beaut est un bouton gris avec une icne qui prsente une jolie femme.
Le bouton Librairie est un bouton gris avec une icne qui prsente un livre ouvert.
Le bouton Alimentaire est un bouton gris avec une icne qui prsente de la nourriture.
Le bouton lectronique est un bouton gris avec une icne qui prsente une tlvision.
Le bouton Bazar est un bouton gris avec une icne qui prsente des femmes qui faisant leur
shopping.

84

(a) Interface

Produit

(b) Interface Catgorie

Figure 4.10: Interface

4.3.2.6

Produit et Catgorie

Capture dcran : Visite guide

Linterface visite guide (figure 4.11) prsente 3 boutons correspondant chacun un magasin.
Chaque bouton permet lutilisateur de visionner une visite du supermarch grce une vido.
Ce bouton consiste en un cercle vert avec une icne qui reprsent une bobine de film. Nous
avons de gauche droite : le bouton qui permet de visionner la visite guid de gant, ensuite le
bouton de Carrefour et enfin celui de Champion.

Figure 4.11: Interface Visite Guide

85

4.3.2.7

Capture dcran : Interface Contact et Partager

A travers linterface donne par la figure 4.12a, il est possible dentrer en contact avec ladministrateur par mail. Cette interface possde deux champs de texte avec deux boutons envoyer et
annuler.
Linterface de la figure 4.12b contient aussi deux champs de textes et deux boutons, le client
peut envoyer lUrl de notre application un ami par mail pour la tlcharger.

(a) Interface Contact

(b) Interface Partager

Figure 4.12: Interface Contact et Interface Partager

4.3.2.8

Capture dcran : Ajout panier et Contenance Panier

Chaque produit affich peut tre ajout au panier avec la bouton Ajouter au panier, ce bouton
se situe sous limage du produit tel que montre la figure 4.13a.
Linterface contenance panier comme montre la figure 4.13b , permet au client de consulter son
panier et visualiser les produits dj command

86

(a) Interface Ajout panier

(b) Interface Contenance Panier

Figure 4.13: Interface Ajout Panier et Contenance Panier

4.3.2.9

Capture dcran Golocalisation

Cest un interface qui permet au client de visualiser la position des diffrents magasins gant,
carrefour et champion dans la carte gographique ainsi que la position courante de lutilisateur. L a
carte gographique saffiche en vue statique (figure 4.14a) et une vue trafique (figure 4.14b).

(a) Vue Statique

(b) Vue trafique

Figure 4.14: Vue statique et Vue Trafique

4.4

Conclusion

Dans ce dernier chapitre, nous avons expos les rsultats des tests de validation de notre Back et
Front office de "lapplication BestShop". En effet, nous avons commenc par prsenter lenvironnement matriel et logiciel du travail, ensuite nous avons prsent une vue du produit final via des
87

prototypes dinterfaces utilisateurs ralises.

88

Chapitre 5

Conclusion et perspectives
Notre projet a t pour nous une exprience enrichissante qui nous a permis de :
Acqurir des connaissances graphiques.
Acqurir des connaissances fonctionnelles.
Arriver dans le monde du travail avec une connaissance approfondie dans le domaine.
Pendant toute la dure du stage dans lagence Cube 3D on a bien rglement le travail avec
une grande recherche sur le contenu du sujet, aussi, vu la particularit de notre public cible qui est
un public riche et large (les clients des grandes surfaces). Nous esprons, quavec la ralisation de
notre Application Androde, que nous avons pu atteindre notre but pour amliorer le service rendu
aux clients.
En passant par toutes les tapes telles que lanalyse de lexistant et la conception, nous avons
procd une spcification des besoins afin de faciliter la conception gnrale, dtaille, graphique
et technique. Cette ralisation nous a permis dacqurir les comptences suivants :
-La manipulation du logiciel Illustrateur CS3 et Flash CS3 de faon approfondie
-Nous avons acquis des nombreuses connaissances en infographie et amlior nos comptences
essentiellement grce lexprience enrichissante que nous avons vcue.
-Cette occasion nous a permis dexprimenter le travail de groupe, ce qui nous a initi au milieu
de travail.
-Comment dpasser les obstacles, bien organiss notre temps entre la disponibilit dans la socit et le travail chez nous.
- Nous avons alors dcouvert le monde plus profondment la cration des applications de systme embarqus qui tait au dpart un peu flou.
Ce projet nous a t une bonne exprience pour expliquer les diffrentes connaissances vues
dans la formation de trois ans reu lISAMM tout en tenant en compte les diffrentes tapes de
ralisation dun projet et en intgrant nos propres connaissances.
Il est primordial de noter que tout au long de la ralisation nous avons t confronts plusieurs
difficults. En ce qui suit, nous prsentons les principales difficults ainsi que les solutions apportes. La premire difficult tait de maitriser le concept Androde, pour cela nous avons commenc
par une phase de formation pousse. Durant cette phase, nous avons ralis des petites applications
89

de test ce qui nous a permis de maitriser les diffrents aspects de la plateforme. Dautre part, ctait
loccasion de dcouvrir le monde de programmation mobile et ses diffrentes contraintes. A titre
dexemple, nous citons les contraintes suivantes :
- La mmoire limite des tlphones portables.
- La limite en termes de puissance de calcul.
Ces contraintes nous mnent dvelopper une application qui rpond aux attentes dun utilisateur potentiel sans gner le fonctionnement du systme quelle tourne dessus.
Les perspectives de ce travail stendent lajout dun module de paiement lectronique qui
peut permettre au client non seulement de commander mais aussi de finaliser la commande tout en
prcdent au paiement partir de son application mobile.
Un modle de localisation gographique du client et de traage ditinraire vers le magasin peut
faire lobjet dune extension possible notre application afin de faciliter le tache au client pour se
diriger directement vers le magasin choisit.

90

Annexes

Dfinition dAndroid
La plate-forme Androde [1] est une pile logicielle pour les appareils mobiles, y compris un
systme dexploitation, middleware et des applications cls. Les dveloppeurs peuvent crer des
applications pour la plate-forme en utilisant le SDK Androde. Les applications sont crites en utilisant le langage de programmation Java et excut sur Dalvik, une machine virtuelle spcialement
conue pour une utilisation embarque, qui tourne au-dessus dun noyau Linux [8]. Androde est
open-source pour Smartphones, PDA et autres terminaux mobiles, conu par Androde, une start-up
rachete par Google en juillet 2005.

Architecture dAndroid
Comme lillustre la figure 5.1 , Android est compos de plusieurs couches bases sur un kernel
linux 2.6, au-dessus de cette couche on trouve les librairies C/C++ utilises par un certain nombre
de composants du systme Android, par la suite la couche Android Runtime qui comporte les
librairies curs du Framework ainsi que la machine virtuelle excutant les applications. Au-dessus
de cette couche on trouve le Framework qui permet au dveloppeur la cration des applications. Et
pour finir on retrouve les applications au sommet.

91

Figure 5.1: Architecture dAndroid

Linux Kernel Android

Linux Kernel Android est bas sur un kernel linux [4] pour les services systme de base tels que
la scurit, la gestion mmoire, gestion de processus pile rseau, et le modle de pilote. Le noyau
agit galement comme une couche dabstraction entre le matriel et le reste de la pile logicielle.
Bibliothques Android
Dispose dun ensemble de bibliothques C / C++ utilises par les diffrents composants de la
plateforme. La liste fournie ci-dessous numre quelques bibliothques qui sont accessibles aux
dveloppeurs via la couche Application Framework.
Systme de bibliothque C : Une mise en uvre drive de BSD (Berkeley Software Distribution) de la bibliothque C standard du systme, lcoute pour les systmes embarqus bass sur
Linux
Mdiathques : base surOpenCore(est un sous sous-systme multimdia pour Android fournit
par PacketVideo) ; les librairies permettant la lecture et lenregistrement audio et vido, ainsi que
la gestion des fichiers image.
Surface Manager : gre laccs au sous-systme daffichage et de faon transparente.
LibWebCore : un moteur de navigateur web moderne qui fait tourner, la fois le navigateur
Android et une vue web intgrable.
SGL :(Scene Graph Library)le moteur graphique 2D.
Bibliothques 3D : une implmentation base sur OpenGL (OpenGraphicsLibrary est une

92

spcification qui dfinit une API multiplate-formepour la conception dapplications gnrant des
images 3D) ; les bibliothques utilisent lacclration 3D matrielle.
SQLite : un moteur de base de donnes relationnelle puissant et lger, disponible pour toutes
les applications.
AndroidRuntime
Cette couche contient les librairies de base du langage de programmation java ainsi quune
machine virtuelle Dalvik pour excuter les applications. Cependant la diffrence de la machine
virtuelle java,Dalvik excute le Dalvikbytecode et non le java Bytecode, format optimis pour
ne pas encombrer la mmoire. La machine virtuelle est la base de registres, et fonctionne grce
aux classes compiles par un compilateur Java et transformes dans le format DEX. La machine
virtuelle Dalvik sappuie sur le noyau Linux pour les fonctionnalits de base telles que le filetage
et gestion de la mmoire de bas niveau. Chaque application Android sexcute dans son propre
processus, avec sa propre instance de la machine virtuelle Dalvik. Figure 83 : Machine virtuelle
Dalvik
Framework de dveloppement
Afin de pouvoir crer des applications riches et innovantes,Android a offert aux dveloppeurs la
libert de profiter du matriel priphrique et informations sur la localisation daccs, excuter des
services darrire-plan, dfinir des alarmes, ajouter des notifications dans la barre dtat, etc. Les
dveloppeurs ont un accs complet au mme Framework API utilis par les applications de base.
Larchitecture dapplication est conue pour simplifier la rutilisation des composants ; nimporte
quelle application peut publier ses capacits et nimporte quelle autre application peut alors faire
usage de ces capacits (soumis des contraintes de scurit appliques par le Framework).
Applications Android
est fourni avec un ensemble de programmes de base (applications natives) permettant daccder
des fonctionnalits comme les courriels, les SMS, le tlphone, le calendrier, les photos, les cartes
gographiques, le Web.... Ces applications sont dveloppes laide du langage de programmation
Java. Pour lutilisateur final, cest la seule couche accessible et visible.

Les Composants dune application Android

Le dveloppement sur Android sappuie sur des classes importantes du Framework [10]. Ces
classes sont, en quelque sorte,des bases sur lesquelles reposent toutes les applications Android.
Elles sont tellement indispensables quil est tout simplement impossible de dvelopper une application sans passer par au moins lune delles. Ces classes sont : Intent, View, Activity, Service,BroadcastReceiver.

93

Intent
Les Intents sont des objets permettant de faire passer des messages contenant de linformation
entre composants principaux. La notion dIntent peut tre vue comme une demande de dmarrage
dun autre composant, dune action effectuer. La raison dtre des Intents provient du modle de
scurit dAndroid. Chaque application est en effet sandboxe. Cela veut dire quune application ou
composant A ne peut accder aux donnes dune application ou composant B que grce aux Intents.
Les applications ont la possibilit de fournir leurs services ou donnes si elles le souhaitent.
View
Les Views sont les composants de base de linterface graphique. Elles permettent de construire
linterface utilisateur. Les widgets (nom donn des composants graphiques avancs, une barre
de progression par exemple est un widget), composants graphiques ou autres layout (composant
permettant de placer les diffrents composants graphiques lcran) hritent en fait de cette classe
lmentaire. Pour finir, les Views sont les principaux composants qui soccupent de grer les actions
utilisateurs (appui sur lcran, sur le clavier, etc.).
Activity
Le concept dActivity repose sur la notion dinteraction utilisateur. Une Activity reprsente la
fentre ou tout simplement lcran qui sera affich lutilisateur. Elle permet galement de grer
des fonctionnalits telles que lappui sur la touche MENU ou laffichage de messages dalerte.
Le cycle de vie dune activit
Lorsque lutilisateur lance une activit, la mthode onCreate() est appele. Elle sert initialiser
lactivit ainsi que toutes les donnes ncessaires cette dernire. Dans le cas o lapplication est
en arrire-plan et quelle repasse en avant-plan, la mthode onStart() sera excuter, si lactivit ne
peut pas aller en avant plan quel que soit la raison, lactivit sera transfre OnStop().La mthode
OnPause() est appele juste avant quune autre activit passe en OnResume. A ce stade, lactivit
na plus accs lcran, il est donc recommand darrter de faire toutes actions qui consomment
de la batterie ou du CPU. OnDestroy() est excute quand lapplication est totalement ferme. Le
diagramme dtat ci-dessous prsente les principaux tats du cycle de vie dune activit Androde.
Service
La notion de service Est un avantage certain sur liPhone. En effet, un Service est un programme
tournant en tche de fond et nayant pas dinterface graphique. Lexemple commun illustrant au
mieux cette notion est celui du lecteur mp3. Un lecteur mp3 ne ncessite pas, pour la plupart
du temps, dinterface graphique et doit tourner en tche de fond laissant la possibilit aux autres
applications de travailler/sexcuter librement. Comme tout objet dune application, un service est

94

excut dans le Thread principal du processus qui lhberge. Il est donc recommand de lexcuter
dans son propre Thread sil a une utilisation intensive du CPU ou de blocage.
BroadcastReceiver
Un BroadcastReceiver est une application qui est lcoute des autres applications. Ce type
dapplication tente de rpondre aux Intents qui lui sont adresss. Il ne fait donc rien dautres que
dtre lcoute des Intents envoys par dautres composants applicatifs.
Les interfaces graphiques
Dans une application Androde, linterface utilisateur est construite en utilisant des objets View
et ViewGroup. Les objets View sont les units de base de linterface utilisateur sur la plateforme
Android. La classe View sert de classe de base pour les sous-classes appeles widgets, qui offrent
des objets dinterface utilisateur entirement mis en uvre, comme les champs de texte et les boutons. Un objet View est une structure de donnes dont les proprits stockent les paramtres de
prsentation et le contenu dune zone rectangulaire spcifique de lcran. Un objet View gre sa
propre mesure, disposition et le dfilement pour la zone rectangulaire de lcran dans lequel il rside. Comme un objet dans linterface utilisateur, une View est galement un point dinteraction
pour lutilisateur et le rcepteur des vnements dinteraction.
Hirarchie des View
Sur la plate-forme Androde, il faut dfinir linterface utilisateur dune activit en utilisant une
hirarchie de nuds View et ViewGroup, comme. Cet arbre hirarchie peut tre aussi simple ou
aussi complexe selon les besoins, il peut tre construit laide dun ensemble de widgets et de
dispositions Android prdfinis, ou laide dune View personnalise. Figure 86 : Hirarchie des
Views
Layout
La faon la plus commune pour dfinir une disposition (Layout) et dexprimer la hirarchie des
View est dutiliser un fichier de configuration XML. XML offre une structure lisible pour la disposition, tout comme HTML. Chaque lment XML est soit un objet View ou ViewGroup (ou descendant de celui-ci). Le nom dun lment XML est respectif la classe Java quil reprsente. Ainsi, un
lment <TextView> cre une TextView dans linterface utilisateur, et un lment<LinearLayout>
cre un GroupViewLinearLayout. Lorsquune ressource Layout est change, le systme Android
initialise ces objets dexcution, correspondant des lments dans la mise en page dvelopper. La
figure 6 ci-dessous prsente un exemple dune disposition verticale simple avec un TextView et un
Bouton.

95

Le fichier AndroidManifest.xml
Toute application doit avoir un fichier Android Manifest .xml dans son rpertoire racine. Le
manifeste contient les informations essentielles de lapplication pour le systme Android, ces informations doivent tre prsentes avant lexcution du code. Entre autres, le manifeste effectue les
tches suivantes :
Il nomme le package Java de lapplication. Le nom du package sert didentifiant unique pour
lapplication.
Il dclare les autorisations que lapplication doit avoir pour accder des parties protges de
lAPI et dinteragir avec dautres applications.
Il dcrit les activits, services et les Broad cast Receiver.
Il dclare version minimale de lAPI Android que lapplication lexige.

96

Bibliographie
[1] http ://android france.fr/android.
[2] http ://developer.android.com/sdk/eclipse.
[3] http ://fr.wikipedia.org/wiki/UnifiedModelingLanguage.
[4] http ://linuxfr.org/news/android.
[5] http ://m.samsung.com/fr/article/android22osexplained.
[6] http ://nextere.wordpress.com/info.
[7] http ://perso.efrei.fr/ charroux/cours/uml.
[8] http ://socialcompare.com/fr/comparison/mobileoscomparisondeveloperview.
[9] https ://play.google.com/store/apps/details.
[10] http ://wiki.frandroid.com/wiki/Lescomposantsdunprojetandroid.
[11] http ://www.balancingactafrica.com/category/newsletter/newsletterfrancais.
[12] http ://www.cube3dtech.com/sitewp/.
[13] http ://www.djibitv.com/media/document/3778.
[14] http ://www.frandroid.com/developpement/19501android.
[15] http ://www.freewebs.com/fresma/Formation.
[16] http ://www.journaldunet.com/developpeur/javaj2ee/eclipse.
[17] http ://www.journaldunet.com/solutions/systemesreseaux/systemesdexploitation.
[18] http ://www.lemagit.fr/article/securitemacosxhackersstuxnet.
[19] http ://www.monarqueevolution.com/index.php/definitionchartegraphique.
[20] http ://www.scribd.com/doc/86960535/RapportMarketingMobile.
[21] www.cube3dtech.com.
[22] www.ebay.com.
[23] www.LyX.com.org.

97

98