Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Elabor par :
Encadr par :
BAKRI EMIRA
CHAABEN Koussai
Mr GUEDDANA Amor
Anne Universitaire
2011 2012
1
Remerciement
Ddicace
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
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 . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
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 . .
Conclusion et perspectives
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
86
86
87
87
89
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
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
et validation de
. . . . . . . . .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
la
. .
22
24
26
27
28
29
31
32
35
37
38
39
40
41
42
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
75
76
78
79
80
81
82
83
84
85
85
86
87
87
5.1
Architecture dAndroid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
92
10
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
21
25
27
30
31
36
3.1
3.2
3.3
3.4
3.5
3.6
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
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 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
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
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 de lexistant
19
2.1
Introduction
2.2
20
2.2.1
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
2.2.2
Tel quil est prsent par la figure 2.1 , les performances des OS pour mobile se rsument comme
suit :
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
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
Nous laborons dans cette une analyse approfondie de lapplication mCasino dun point de vue
graphique, technique, ergonomique et critique.
2.4.1.1
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
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
2.4.1.4
24
Dnotation
lment
Logo
Structure
Les liens
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.
Typographie
Les images
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.
Gamme de formes
Gamme de couleurs
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
26
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
27
2.4.2
En ce qui suit, nous prsentons une tude graphique et fonctionnelle de lapplication eBay.
2.4.2.1
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.
Analyse fonctionnelle
28
2.4.2.3
Analyse graphique
2.4.2.4
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
Le diagramme de cas dutilisation de lapplication eBay est reprsent par la figure 2.7
29
Elment
Logo
Structure
Dnotation
Connotation
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
Photo
Gamme de formes
Gamme de couleurs
30
Analyse critique
Aspect technique
Aspect graphique
Points forts
Points faibles
2.5
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
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
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
2.5.1.2
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
33
Contacter ladministrateur.
Par mail.
Contacter le magasin par tlphone
2.6
La spcification semi formelle peut tre reprsente par deux types de diagrammes : diagrammes
de cas dutilisations et diagramme de squence.
2.6.1
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
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.
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).
Systme :
Reprsente le domaine tudi.
Il permet de dterminer les limites au-del desquelles les fonctionnalits seront exclues.
34
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
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
Acteur
Cas dutilisation
Rle
Client
Titre1 : Sinscrire
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
36
2.6.3
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
2.6.3.2
2.6.3.3
Le diagramme de cas dutilisation dajout dun produit au panier (figure 2.14 ), suppose que le
client est dj connect son compte.
38
39
40
41
2.6.3.5
2.7
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
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
Contraintes esthtiques
44
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
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
49
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
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 %
C : 8%
M : 6%
Y : 6%
K:%
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
53
but de conserver le mme concept concern, le tableau 3.2contient les formes utilises et leurs
symbolismes.
La forme
Symbolisme
Convivialit
Un charriot
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
Dans le tableau3.3 nous prsentons les arguments et les critiques des propositions errons N1
Arguments
Critique
b. Les propositions errons N2 Dans la figure 3.4, nous prsentons les deuximes propositions
faites.
55
Dans le tableau 3.4 nous prsentons les arguments et les critiques des propositions errons N2
Arguments
Critique
c. Les propositions errons N3 La figure 3.5 , prsente les troisimes propositions faites.
Le tableau 3.5 prsente les arguments et les critiques des proposition errons N3
56
Arguments
Critique
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
Dnotation
Connotation
57
58
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
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
Gabarit
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
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
62
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
64
3.4.1.3
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.
3.4.2
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
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
* Diagramme de squence dtaill Authentification Client La figure 3.18 prsente le diagramme de squence dtaill de lauthentification dun client
68
* 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
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
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
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
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 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
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
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 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 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
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 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
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
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 :
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
La figure 4.4 prsente linterface dauthentification travers laquelle ladministrateur peut saisir
son login et son mot de passe pour accder au backoffice.
4.3.1.2
La figure 4.5 prsente linterface dadministration qui permet ladministrateur de grer les
clients, les magasins ainsi que les produits.
79
4.3.2
4.3.2.1
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
4.3.2.2
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
(b) Interface
dauthentification
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
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
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
Produit et Catgorie
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.
85
4.3.2.7
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.
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
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).
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
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
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.
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