Vous êtes sur la page 1sur 56

Facult des Sciences et

Techniques - Settat

DEDICACE
Nous ddions ce modeste travail :
En premier lieu ceux que personne ne peut compenser les sacrifices quils ont
consentis pour notre ducation et notre bien-tre nos parents qui se sont
sacrifis pour nous prendre en charge tout au long de notre formation et qui
sont lorigine de notre russite que dieu les garde et les protges.
A notre famille et nos chers amis qui nous ont accord leur soutien dans les
instants les plus difficiles.
Tous nos formateurs et toute lquipe pdagogique et administrative de CIGMA
pour laide quils ont toujours port aux tudiants.
Toute personne qui de prs ou de loin a particip notre formation.

1
Facult des Sciences et
Techniques - Settat

REMERCIEMENT
Cest un plaisir et un moment trs agrable de rendre hommage et de
formuler des remerciements aux personnes qui, dune manire ou dune autre,
ont apport leur soutien et contribu finaliser ce travail.

Nous tenons, tout dabord, exprimer nos sincres gratitudes envers


notre encadreur Mr. Smail NAMIRI, pour les conseils quil na cesss de nous
prodiguer, sa comprhension et la confiance quil a toujours tmoigne notre
gard.

Nous remercions aussi Mr. Mounir MAHFOUD responsable formation et


dveloppement pour ces conseils et ces coutes de nous problmes tout au
long de notre formation au sein du centre CIGMA.

Nous remercions galement Mr. EL ALAMI Semma directeur de centre


CIGMA.

Nous associons ces remerciements tous les enseignants qui ont


contribu notre formation ainsi qu toutes les personnes qui travaillent au
sein du CIGMA la FST de SETTAT.

2
Facult des Sciences et
Techniques - Settat

SOMMAIRE
DEDICACE ......................................................................................................................................................... 1

REMERCIEMENT ............................................................................................................................................... 2

SOMMAIRE ...................................................................................................................................................... 3

TABLE DE FIGURES............................................................................................................................................ 5

LISTE DES ABREVIATIONS ................................................................................................................................. 6

INTRODUCTION GENERALE .............................................................................................................................. 7

CHAPITRE-1: CADRE GENERAL .......................................................................................................................... 8

INTRODUCTION ................................................................................................................................................ 8

I. PRESENTATION DU CADRE DU PROJET ....................................................................................................... 9


1. Problmatique ....................................................................................................................................... 9
2. Prsentation de la solution SmartBusinessCard .................................................................................... 9
a. Le projet Web (Moteur de recherche des cartes de visite) ................................................................................ 9
b. Le projet Mobile (Gestionnaire de cartes de visite) ......................................................................................... 10
II. GESTION DU PROJET INFORMATIQUE ...................................................................................................... 11
3. Cycle de vie dun logiciel ...................................................................................................................... 11
4. Modle de cycle de vie dun logiciel .................................................................................................... 13
a. Modle de cycle de vie en cascade .................................................................................................................. 13
b. Modle de cycle de vie en V ............................................................................................................................. 13
5. Planning ............................................................................................................................................... 15
6. Mthodologie de conception .............................................................................................................. 15
a. Etude comparative entre MERISE et UML ........................................................................................................ 15
b. La dmarche adopte : .................................................................................................................................... 16

CONCLUSION .................................................................................................................................................. 17

CHAPITRE-2 : CAPTURE DES BESOINS ............................................................................................................. 18

INTRODUCTION .............................................................................................................................................. 18

I. IDENTIFICATION DES ACTEURS ................................................................................................................. 19


II. LES BESOINS FONCTIONNELS ................................................................................................................... 20
III. BESOINS NON FONCTIONNELS ................................................................................................................. 21
1. Contrainte ergonomique .................................................................................................................... 21
2. Contrainte non ergonomique .............................................................................................................. 21
IV. DIAGRAMMES DE CAS DUTILISATION GENERALE .................................................................................... 22

CONCLUSION .................................................................................................................................................. 24

CHAPITRE-3 : ANALYSE & CONCEPTION .......................................................................................................... 25

INTRODUCTION .............................................................................................................................................. 25

I. DIAGRAMMES DE CAS DUTILISATION ..................................................................................................... 26


1. Diagramme de cas dutilisation sidentifier ......................................................................................... 26
2. Diagramme de cas dutilisation crer un compte .......................................................................... 27
3. Diagramme de cas dutilisation lister les cartes visites par catgories .......................................... 27
II. DIAGRAMMES DACTIVITES ...................................................................................................................... 28

3
Facult des Sciences et
Techniques - Settat
1. Diagramme dactivits de cas dutilisation sidentifier ................................................................. 28
2. Diagramme dactivits de cas dutilisation crer un compte ........................................................ 29
3. Diagramme dactivits de cas dutilisation lister carte de visite par catgorie ............................ 30
III. DIAGRAMME DE CLASSES......................................................................................................................... 31

CONCLUSION .................................................................................................................................................. 31

CHAPITRE-5 : IMPLEMENTATION .................................................................................................................... 32

INTRODUCTION .............................................................................................................................................. 32

I. ENVIRONNEMENT MATERIEL ................................................................................................................... 33


1. Architecture du matriel .................................................................................................................... 33
2. Matriels utiliss ................................................................................................................................. 34
II. TECHNOLOGIES ........................................................................................................................................ 35
1. Dveloppement mobile ....................................................................................................................... 35
a. Prsentation de la plateforme Android............................................................................................................ 35
b. Architecture dAndroid .................................................................................................................................... 35
c. LAPI Zxing ....................................................................................................................................................... 36
2. Dveloppement Web........................................................................................................................... 37
a. La plateforme J2EE ........................................................................................................................................... 37
b. Mthodologie de dveloppement : la dmarche MVC .................................................................................... 37
c. La plateforme de prsentation Strusts ............................................................................................................. 39
d. La plateforme de mapping Objet/Relationnel HIBERNAT ................................................................................ 40
e. La technologie Ajax ......................................................................................................................................... 40
3. QR-Code ............................................................................................................................................... 40
III. OUTILS DE DEVELOPPEMENT............................................................................................................................ 41
1. Environnement de dveloppement Intgr : Eclipse .......................................................................... 41
2. Le serveur dapplication Appache Tomcat .......................................................................................... 41
3. Le serveur de base de donnes MySQL ............................................................................................... 41
4. Entreprise Architect ............................................................................................................................. 42
5. Le gestionnaire de version SVN ........................................................................................................... 42
a. Le serveur de version VisualSVN ...................................................................................................................... 42
b. Le client TurtoiseSVN ....................................................................................................................................... 42
IV. ECRANS ....................................................................................................................................................... 43
1. Ralisation Web ................................................................................................................................... 43
2. Ralisation Mobile ............................................................................................................................... 47

CONCLUSION .................................................................................................................................................. 54

CONCLUSION GENERALE ................................................................................................................................ 55

BIBLIOGRAPHIE .............................................................................................................................................. 56

4
Facult des Sciences et
Techniques - Settat

TABLE DE FIGURES
FIGURE 1 : MODELE DU CYCLE DE VIE EN CASCADE ............................................................................................................ 13
FIGURE 2 : MODELE DU CYCLE DE VIE EN V ...................................................................................................................... 14
FIGURE 3 : PLANING DU PROJET .................................................................................................................................... 15
FIGURE 4 : METHODOLOGIES DE CONCEPTION ADOPTEE .................................................................................................... 16
FIGURE 5 : DIAGRAMME DE CAS DUTILISATION GERER OBJET (COMPTE, CARTE VISITE, CATEGORIE ETC.) .................................... 22
FIGURE 6 : DIAGRAMME DE CAS DUTILISATION GLOBAL DE LAPPLICATION WEB..................................................................... 23
FIGURE 7 : DIAGRAMME DE CAS DUTILISATION GLOBAL DE LAPPLICATION MOBILE ................................................................ 24
FIGURE 8 : DIAGRAMME DE CAS DUTILISATION SIDENTIFIER ......................................................................................... 26
FIGURE 9 : DIAGRAMME DACTIVITES DE CAS DUTILISATION SIDENTIFIER ........................................................................ 28
FIGURE 10 : DIAGRAMME DACTIVITES DE CAS DUTILISATION CREER COMPTE ........................................................................ 29
FIGURE 11 : DIAGRAMME DACTIVITES DE CAS DUTILISATION LISTER CARTE DE VISITE PAR CATEGORIE ........................................ 30
FIGURE 12 : DIAGRAMME DE CLASSE GENERAL................................................................................................................. 31
FIGURE 13 : ARCHITECTURE MATERIEL DU SYSTEME .......................................................................................................... 33
FIGURE 14 : COMMUNICATION AVEC MYSQL DEPUIS LE MOBILE ......................................................................................... 34
FIGURE 15 : ARCHITECTURE DU SYSTEME DEXPLOITATION ANDROID.................................................................................... 35
FIGURE 16 : L'ARCHITECTURE MVC............................................................................................................................... 38
FIGURE 17 : SCHEMA DU FRAMEWORK STRUTS 2 ............................................................................................................. 39
FIGURE 18 : SCHEMA DU FRAMEWORK HIBERNAT ......................................................................................................... 40
FIGURE 19 : PAGE DE RECHERCHE(LES RESULTATS CE FORME DE CARTE DE VISITE) ................................................................... 43
FIGURE 20 : CODE A BARRE A DEUX DIMENSIONS DU LAFARGE (APRES LA CLIQUE SUR UNE CARTE). ......................................... 44
FIGURE 21 : DETAIL D'UNE CARTE DE VISITE..................................................................................................................... 45
FIGURE 22 : FORMULAIRE D'INSCRIPTION AU SITE WEB. ..................................................................................................... 45
FIGURE 23 : FORMULAIRE D'AUTENTIFICATION ................................................................................................................ 46
FIGURE 24 : FORMULAIRE DE CREATION D'UNE CARTE DE VISITE .......................................................................................... 46
FIGURE 25 : ACTIVITE D'ACCUEIL................................................................................................................................... 47
FIGURE 26 : ACTIVITE DE RECHERCHE CATEGORIES & CARTES DE VISITE(ONGLET CETGORIES).................................................... 47
FIGURE 27 : ACTIVITE DE RECHERCHE CATEGORIES & CARTES DE VISITE (ONGLET CARTES DE VISITE)........................................... 48
FIGURE 28 : MENU CONTEXTUEL DU CATEGORIE "DEVELOPPEURS MOBILE" ......................................................................... 48
FIGURE 29 : LISTE DES CARTES DE VISITE (APRES LA CLIQUE SUR LISTE DES CARTES DE VISITE) .................................................... 49
FIGURE 30 : MENU CONTEXTUEL DU CONTACT "MOBILE APPLICATION" ............................................................................... 49
FIGURE 31 : ACTIVITE DETAILS CARTE DE VISITE DU CONTACT "MOBILE APPLICATION" ............................................................. 50
FIGURE 32 : LA LISTE DEROULANTE DE CATEGORIES ........................................................................................................... 51
FIGURE 33 : MENU DE L'ACTIVITE DETAILS CARTES DE VISITES ............................................................................................. 52
FIGURE 34 : ACTIVITE D'APPEL APRES LA CLIQUE SUR L'ICONE D'APPEL. ................................................................................. 53
FIGURE 35 : MENU CONTEXTUEL DES DIFFERENTS APPLICATIONS ......................................................................................... 53
FIGURE 36 : MENU CONTEXTUEL DE PARTAGE AVEC LA LISTE DES DIFFERENTS ........................................................................ 54

5
Facult des Sciences et
Techniques - Settat

LISTE DES ABREVIATIONS


SBC SmartBusinessCard
QR Quick Response
UML Unified Modeling Language
MVC Model View Control
API Application Presentaion Interface
App Application
SVNSubversion version control system
JSP JavaServer Pages
JSON JavaScript Object Notation
XML Extensible Markup Language
http HyperText Transfer Protocol
URL Uniform Resource Locator
GET Requte de la ressource situe l'URL spcifie
POST Envoi de donnes au programme situ l'URL
spcifie
XMLHTTPREQUEST est un objet ActiveX ou JavaScript qui permet
d'obtenir des donnes au format XML, JSON, mais
aussi HTML, ou encore texte simple l'aide de
requtes HTTP
WEB Le World Wide Web (les pages avec liens et
contenus multimdia de ses sites Web

6
Facult des Sciences et
Techniques - Settat

INTRODUCTION GENERALE

Comme nous vivons dans un monde o le march informatique se dveloppe trs


rapidement, Le web et le mobile sont devenus deux canaux de prdilection afin d'acqurir et
largir une base client, fidliser des usagers, optimiser la mise en contact des entreprises
avec leur cible, mieux segmenter et comprendre les communauts qu'elles adressent.

Dans cette perspective, et dans le cadre de notre projet de fin dtude, nous avons
ralis une solution que nous souhaiterons quelle soit un Startup. La solution
SmartBusinessCard a pour but de rgler la problmatique de recherche des professionnels
et la gestion des cartes visite.

Nous avons divis cette solution en 2 parties :


Partie web : Moteur de recherche des cartes de visite.
Partie Mobile : Gestionnaire des cartes de visite.

Dans ce contexte, nous allons procder comme suit :

Chapitre1 : Cadre Gnral


Dans ce chapitre, notre projet est prsent comme suit : la problmatique rsoudre, la
solution propose et quelques concepts de gestion projet informatique.

Chapitre2 : Capture des besoins


Nous identifions les acteurs du futur systme, les besoins fonctionnels et non fonctionnels
ainsi que les diagrammes du cas dutilisation global de chaque application.

Chapitre3 : Analyse et conception


Dans ce chapitre nous laborons une conception dtaille des cas dutilisation, les
diagrammes dactivit ainsi que le diagramme de classe complet de notre application web et
mobile.

Chapitre4 : Implmentation
Dans le dernier chapitre intitul Implmentation , nous prsentons lenvironnement
matriel et logiciel, le passage vers le schma relationnel et quelques composantes
applicatives ralises, et les diffrentes chartes graphiques de chaque technologie.

7
Facult des Sciences et
Techniques - Settat

CHAPITRE-1: CADRE GENERAL

INTRODUCTION
Dans ce chapitre on va prsenter les diffrentes fonctionnalits de notre
solution savoir la partie web et la partie mobile.
Et nous concluons enfin par la dmarche de conception adopte.

8
Facult des Sciences et
Techniques - Settat

I. PRESENTATION DU CADRE DU PROJET


1. Problmatique
En tant que professionnels, il nest pas rare de recevoir trs rgulirement des cartes de visite :
clients, fournisseurs, partenaires. Mme si certaines cartes finiront leur vie au fond dune corbeille,
prs du bureau, dautres sont trs utiles pour votre business (heureusement la plupart !) et ainsi vous
avez le choix entre :

enregistrer les informations prsentes sur la carte en crant un nouveau contact,


mettre la carte dans un porte-carte,
utiliser votre Smartphone pour la sauvegarder,
utiliser un moteur de recherche qui facilite la recherche,
mettre les cartes dans un endroit afin de les consulter par un ordinateur ou un smarte
phone.

2. Prsentation de la solution SmartBusinessCard


a. Le projet Web (Moteur de recherche des cartes de visite)
Lapplication web est un moteur de recherche des cartes de visite ajout
par les visiteurs aprs inscription notre site web.
Ci-dessous les diffrentes fonctionnalits de lapplication web.

Networking : lapplication web permettra aux utilisateurs anonymes de :


Retrouver facilement les cartes de visite des mdecins, avocats, socits etc.
dans les diffrentes rgions du pays.
Retrouver la cartographie de chaque carte visite.
Retrouver les diffrents produits, services, contacts pour les carte visite des
socits.
Enrichir leurs porte-cartes par des cartes de visite sur le web.
Partager les cartes visite dans les rseaux sociaux comme Google+, Facebook,

WEB Twitter, LinkIn, Viadeo etc.

Business lapplication web permettra aux clients de :


Rendre les coordonnes personnelles et professionnelles visibles au monde
entier.
Faciliter le contact.
Grer leurs images sur le web.
Faciliter la reprsentation des produits, services, contacts.
Bnficier de la publicit dans le site web.
Golocalisation de leurs locaux,

9
Facult des Sciences et
Techniques - Settat
Gnrer un code barre deux dimensions (QRcode) qui peut tre tlcharg
et imprim dans leurs factures, cartes visites, affiches publicitaires pour
pouvoir reprsenter leurs activits.

b. Le projet Mobile (Gestionnaire de cartes de visite)


Lapplication mobile est un gestionnaire de cartes visite situ dans la base de
donne de lapplication web, lajout dune carte de visite se fait par le scanne
du code barre (QRcode) qui identifie la carte dans le system.

Organising : lapplication mobile(ou bien le porte-carte de cartes de visites) permet


de :
Grer les cartes visites qui pourront tre classes par des catgories
modifiables en fonction de besoins (exemple : Mdecins, Avocats etc.).
Scanner les QRcodes gnrs par lapplication web afin de les ajouter au

Mobile
mobile.
Faire des appels, envois des SMS, emails et accder au site web.
Partager les cartes visites dans les rseaux sociaux comme Google+,Facebook,
Twitter, LinkIn, Viadeo etc.
Sauvegarder les donnes locales dans un serveur distant, et les rcuprer en
cas de perte du smartphone.

10
Facult des Sciences et
Techniques - Settat

II. GESTION DU PROJET INFORMATIQUE


3. Cycle de vie dun logiciel
Le cycle de vie dun logiciel (en anglais software lifecycle), dsigne toutes les tapes
de dveloppement dun logiciel, de sa conception sa disparition. Lobjectif dun tel
dcoupage est de permettre de dfinir des jalons intermdiaires permettant la validation du
Dveloppement logiciel, cest--dire la conformit du logiciel avec les besoins exprims, et la
vrification du processus de dveloppement, cest--dire ladquation des mthodes mises
en uvre.

Lorigine de ce dcoupage provient du constat que les erreurs ont un cot dautant
plus lev quelles sont dtectes tardivement dans le processus de ralisation. Le cycle de
vie permet de dtecter les erreurs au plus tt et ainsi de matriser la qualit du logiciel, les
dlais de sa ralisation et les cots associs.

Le cycle de vie du logiciel comprend gnralement au minimum les tapes suivantes :

Dfinition des objectives:

Cette tape consiste dfinir la finalit du projet et son inscription dans une stratgie
globale.

Analyse des besoins et faisabilit:

Cest--dire lexpression, le recueil et la formalisation des besoins du demandeur (le client)


et de lensemble des contraintes, puis lestimation de la faisabilit de ces besoins.

Spcifications ou conception gnrale:

Il sagit de llaboration des spcifications de larchitecture gnrale du logiciel.

Conception dtaille:

Cette tape consiste dfinir prcisment chaque sous-ensemble du logiciel.

Codage (Implmentation ou programmation):

Cest la traduction dans un langage de programmation des fonctionnalits dfinies lors de


phases de conception.

Tests unitaires:

Ils permettent de vrifier individuellement que chaque sous-ensemble du logiciel est


implment conformment aux spcifications.

11
Facult des Sciences et
Techniques - Settat
Intgration :

Lobjectif est de sassurer de linterfaage des diffrents lments (modules) du logiciel. Elle
fait lobjet de tests dintgration consigns dans un document.

Qualification (ou recette) :

Cest--dire la vrification de la conformit du logiciel aux spcifications initiales,

Documentation :

Elle vise produire les informations ncessaires pour lutilisation du logiciel et pour des
dveloppements ultrieurs.

Mise en production :

Cest le dploiement sur site du logiciel.

Maintenance :

Elle comprend toutes les actions correctives (maintenance corrective) et volutives


(maintenance volutive) sur le logiciel.

La squence et la prsence de chacune de ces activits dans le cycle de vie dpend du choix
dun modle de cycle de vie entre le client et lquipe de dveloppement. Le cycle de vie
permet de prendre en compte, en plus des aspects techniques, lorganisation et les aspects
humains.

Ils existent plusieurs modles de cycles de vie dun logiciel tels que : Modle en cascade, en
V, en spiral, par incrment, etc.

12
Facult des Sciences et
Techniques - Settat
4. Modle de cycle de vie dun logiciel
a. Modle de cycle de vie en cascade
Le modle de cycle de vie en cascade a t mis au point ds 1966, puis formalis aux
alentours de 1970.

Dans ce modle le principe est trs simple : chaque phase se termine une date prcise par
la production de certains documents ou logiciels. Les rsultats sont dfinis sur la base des
interactions entre tapes, ils sont soumis une revue approfondie et on ne passe la phase
suivante que sils sont jugs satisfaisants.

Figure 1 : Modle du cycle de vie en cascade

Le modle original ne comportait pas de possibilit de retour en arrire. Celle-ci a t


rajoute ultrieurement sur la base quune tape ne remet en cause que ltape prcdente,
ce qui, dans la pratique, savre insuffisant.
Linconvnient majeur du modle de cycle de vie en cascade est que la vrification du bon
fonctionnement du systme est ralise trop tardivement: lors de la phase dintgration, ou
pire, lors de la mise en production.

b. Modle de cycle de vie en V


Le modle en V demeure actuellement le cycle de vie le plus connu et certainement le plus
utilis. Il sagit dun modle en cascade dans lequel le dveloppement des tests et des
logiciels sont effectus de manire synchrone.

13
Facult des Sciences et
Techniques - Settat

Figure 2 : Modle du cycle de vie en V

Le principe de ce modle est quavec toute dcomposition doit tre dcrite la


recomposition et que toute description dun composant est accompagne de tests qui
permettront de sassurer quil correspond sa description.
Ceci rend explicite la prparation des dernires phases (validation-vrification) par les
premires (construction du logiciel), et permet ainsi dviter un cueil bien connu de la
spcification du logiciel : noncer une proprit quil est impossible de vrifier
objectivement aprs la ralisation.

La reprsentation en V tient d'avantage compte de la ralit, le processus de


dveloppement n'est pas rduit un enchanement de tches squentielles. Elle montre
que:
C'est en phase de spcification que l'on se proccupe des procdures de qualification, C'est
en phase de conception globale que l'on se proccupe des procdures d'intgration, C'est en
phase de conception dtaille que l'on prpare les tests unitaires.
Le modle de cycle de vie en V permet d'anticiper sur les phases ultrieures de
dveloppement du produit.
En particulier le modle en V permet de commencer plus tt:
Plan de tests de qualification,
Plan d'valuation des performances.
Cependant, ce modle souffre toujours du problme de la vrification trop tardive du bon
fonctionnement du systme.

14
Facult des Sciences et
Techniques - Settat
5. Planning

Figure 3 : Planing du projet

6. Mthodologie de conception
a. Etude comparative entre MERISE et UML
MERISE (Mthode dEtude et de Ralisation Informatique pour les Systmes
dEntreprise) est une mthode d'analyse et de ralisation des systmes d'information qui est
labore en plusieurs tapes: schma directeur, tude pralable, tude dtaille et la
ralisation.
Alors que UML (Unified Modeling Langage), est un langage de modlisation des systmes
standard, qui utilise des diagrammes pour reprsenter chaque aspect d'un systme ie:
statique, dynamique,....en s'appuyant sur la notion d'orient objet qui est un vritable atout
pour ce langage.

Merise ou UML ?

Les "mthodologues" disent qu'une mthode, pour tre oprationnelle, doit avoir 3
composantes:
Une dmarche (les tapes, phases et tches de mise en uvre),
Des formalismes (les modlisations et les techniques de transformation),
Une organisation et des moyens de mise en uvre.

Merise se positionne comme une mthode de conception de SI organisationnel, plus


tourne vers la comprhension et la formalisation des besoins du mtier que vers la
ralisation de logiciel. En sens, Merise se rclame plus de l'ingnierie du SI mtier que du
gnie logiciel.
Jamais Merise ne s'est voulu une mthode de dveloppement de logiciel ni de
programmation.

UML, de par son origine (la programmation objet) s'affirme comme un ensemble de
formalismes pour la conception de logiciel base de langage objet.

15
Facult des Sciences et
Techniques - Settat
Merise est encore tout fait valable pour:
La modlisation des donnes en vue de la construction d'une base de donnes
relationnelle,
La modlisation des processus mtiers d'un SI automatis en partie par du logiciel.
La formalisation des besoins utilisateur dans le cadre de cahier des charges
utilisateur, en vue de la conception d'un logiciel adapt.

UML est idal pour :


Concevoir et dployer une architecture logicielle dveloppe dans un langage objet
(Java, C++, VB.net). Certes UML, dans sa volont "unificatrice" a propos des formalismes,
pour modliser les donnes (le modle de classe rduit sans mthodes et strotyp en
entits), mais avec des lacunes que ne prsentait pas l'entit relation de Merise, Pour
modliser le fonctionnement mtier (le diagramme d'activit et de cas d'utilisation) qui sont
des formalismes trs anciens.

b. La dmarche adopte :
Aprs cette tude comparative, il est certes que nous adoptons UML comme langage
de modlisation puisque nous allons utiliser le concept de lorienter objet, travers le SDK
Android qui est bas sur JAVA, pour dvelopper la solution BusinessSmarteCard.

Ainsi, la mthodologie de conception adopte se base sur le choix de diagrammes UML


adquats. Nous avons utilis quatre diagrammes : diagramme de cas dutilisation,
diagramme dactivits, diagramme de squence et diagramme de classes. Le schma suivant
reprsente notre mthodologie de conception :

Figure 4 : Methodologies de conception adoptee

Notre outil de conception UML est Entreprise Architect de SPARX SYSTEM. Cest une
rfrence pour la modlisation UML. Nous allons lutiliser pour raliser tous les diagrammes
UML.

16
Facult des Sciences et
Techniques - Settat

CONCLUSION
Aprs avoir prsent le cadre gnral du projet, une tude pralable simpose afin
dtudier le domaine de plus prs et de reprer la procdure de fonctionnement actuelle.

17
Facult des Sciences et
Techniques - Settat

CHAPITRE-2 : CAPTURE
DES BESOINS

INTRODUCTION
le prsent chapitre nous permet didentifier toutes les fonctionnalits de
notre futur systme pour chaque type dutilisateur, et ceci en recensant les
besoins fonctionnels et dapprhender la liste des exigences traduites par les
besoins non fonctionnels.
Ceci se fera par lidentification des acteurs et la dfinition de tous les
besoins qui seront modliss par des diagrammes de cas dutilisation
gnrales.

18
Facult des Sciences et
Techniques - Settat

I. IDENTIFICATION DES ACTEURS


Nous avons prsent dans cette partie les diffrents acteurs possibles de lapplication
Web et lapplication Mobile :

App. Web :
uc App. We... ac-web.utilisateurAnonyme : cest un acteur du site web qui peut
chercher des cartes visites, scanner le qrCode sil porte un mobile occup
de notre application mobile.

Utilisateur
Anonyme

uc App. W... ac-web.client cest un client qui peut sinscrire gratuitement dans notre
application afin de crer sa propre carte visite, il a les mmes droits du l
ac-web. utilisateurAnonyme.

Client

uc Primary U... ac-web.client : cest un client comme le client prcdent mais il a des
avantages comme la gestion de ces contacts et services, la gestion de ces
produits avec des images etc.
il ya des droits de lac-web. client mais linscription dans notre
application est paye et elle dpend de certains critres.
ClientAv ance

App. Mobile :
uc App. Mobile ac-mobile.clientMobile : cest un acteur qui a dj install notre
application dans son smartphone, pour le stock de ces propres cartes
visite et scanner partir de notre site web, une affiche publicitaire, ou
bien une facture, etc.

ClientMobile

19
Facult des Sciences et
Techniques - Settat

II. LES BESOINS FONCTIONNELS

Chercher les cartes visites par des critres,


Secteur dactivit : Sant, Juridique/Droit, Publicit, Tlcommunication etc.
Fonction : Mdecin, Avocat, Commercial, Consultant etc.
Sinscrire pour crer son propre compte,
Modifier son compte,
WEB Crer sa propre carte de visite et gnrer un QRcode,
Tlcharger QRCode sous format dimage,
Grer ses produits, services, contacts,
Gnrer un devis,
Payer sa facture.

Scanner le QR dune carte visite,


Sinscrire afin de stocker ses propres cartes de visite au serveur.
Grer ses cartes visite,

Mobile
Grer ses catgories,
Appeler Contact,
Envoyer SMS, e-mail,
Partager carte visite sur les diffrents rseaux sociaux
etc

20
Facult des Sciences et
Techniques - Settat

III. BESOINS NON FONCTIONNELS


1. Contrainte ergonomique
Ce projet est notre premire exprience en dveloppement mobile. Plusieurs
contraintes nous ont considrablement retards de:

Limitation de la dimension de l'cran : choisir un minimum de composants


essentiels afficher sur l'cran, pas comme celui des ordinateurs.
Mobile Sous Android, il faut grer la reprise de l'tat de l'application aprs une
perturbation du cycle de vie de celui-ci. C'est--dire si au cours de son
fonctionnement, nous avons un appel entrant ou un message, par ordre de
priorit, le systme peut arrter l'activit en cours pour librer de la mmoire.

2. Contrainte non ergonomique


Lapplication doit garantir la scurit travers la gestion des droits daccs,
Laccs la base de donnes doit tre souple et rapide,
Lapplication doit tre toujours fonctionnelle,
Web Le choix se fera parmi une liste de valeur rattach aux champs afin dassurer le
& contrle de la saisie,
Espace de stockage des donnes suffisant,
Mobile Lapplication doit dtecter la prsence dune connexion internet,
Temps de rponse minimum,
Communiquer des donnes entre deux environnements htrognes.
Communication, format des donnes...

21
Facult des Sciences et
Techniques - Settat

IV. DIAGRAMMES DE CAS DUTILISATION GENERALE


Chaque usage que les acteurs font du systme est reprsent par un cas dutilisation.
Chaque cas dutilisation reprsente une fonctionnalit qui leur t offerte afin de produire le
rsultat attendu.
Ainsi, le diagramme de cas dutilisation dcrit linteraction entre le systme et lacteur en
dterminant les besoins de lutilisateur et tout ce que doit faire le systme pour lacteur .

uc GererObj et

Chercher obj et

Modifier obj et

extend
extend
Supprimer obj et
Grer Obj ets extend

Actor include

S'authentifier

include
Aj outer obj et

Figure 5 : Diagramme de cas dutilisation Grer Objet (Compte, carte visite, Catgorie etc.)

22
Facult des Sciences et
Techniques - Settat
uc App. Web

Rechercher Carte Visite PartageCarteVisite


extend

Modifier Tlcharger
Scanner QRcode apartir de QRcode
l'ecran d'un ordinateur

Utilisateur Anonyme Tlcharger


extend extend
Carte v isite
extend
Tlcharger
Consulter extend

include

Crer carte v isite

include S'authentifier

Client

S'inscrir

include

Grer images
include
Grer produits extend

Grer serv ices

ClientAv ance extend


Grer respensables

GnererDev is

PayPal

Paiement

Versement

Figure 6 : Diagramme de cas dutilisation global de lapplication Web

23
Facult des Sciences et
Techniques - Settat
uc App. Mobile

Consulter les informarions


d'une Carte de v isite

include
Scanner un QRcode

include
Enregistrer une carte
de v isite
extend

ClientMobile

Grer les cartes v isites


include S'autentifier

include

Grer les catgorie


Modifier une
extend
catgorie

extend extend

Affecter les carte


v isites des Aj outer une catgorie
catgories

Figure 7 : Diagramme de cas dutilisation global de lapplication Mobile

CONCLUSION
Ce chapitre nous a permis de faire un dcoupage fonctionnel de notre futur systme
par le biais du diagramme de cas dutilisation et danticiper les interfaces qui seront
dveloppes ultrieurement.
Dans le chapitre suivant, nous prsentons une analyse dtaille pour les cas
dutilisation de notre systme.

24
Facult des Sciences et
Techniques - Settat

CHAPITRE-3 : ANALYSE &


CONCEPTION

INTRODUCTION
Dans ce prsent chapitre, nous proposons lanalyse des diffrents cas
dutilisation que nous venons de reprer travers lactivit de capture des
besoins afin de dterminer les diffrentes classes intervenant dans chacun des
cas et de reprer le squencement des flux pour chaque scnario de
ralisation.
Il sagit donc l dune activit importante, qui sert de base pour le
passage lactivit de conception.

25
Facult des Sciences et
Techniques - Settat

I. DIAGRAMMES DE CAS DUTILISATION


1. Diagramme de cas dutilisation sidentifier
uc Authentifer

Authentification

Actor

Figure 8 : Diagramme de cas dutilisation Sidentifier

SOMMAIRE DIDENTIFICATION
Titre : Sidentifier
But : Authentification et autorisation daccs.
Rsum : Le client Web/Mobile introduit son login et mot de passe pour accder
au systme.
Acteurs : ac.clientPotentiel,ac.clientMobile
DESCRIPTION DES ENCHAINEMENTS
Pr conditions Post conditions
Le client doit avoir un compte sur la BD Accs son espace priv.
SCENARIO NOMINAL
1. Le client demande laccs au systme,
2. Le systme affiche le formulaire dauthentification,
3. Lacteur saisit son login et son mot de passe,
4. Le systme vrifie les champs (champs obligatoires,..),
5. Le systme vrifie lexistence de lutilisateur,
6. Si le client est identifi, le systme affiche linterface adquate.

26
Facult des Sciences et
Techniques - Settat

2. Diagramme de cas dutilisation crer un compte

SOMMAIRE DIDENTIFICATION
Titre : crer compte
But : Crer un compte dans app. Web/Mobile
Rsum : Le client Web/Mobile doit remplir un formulaire dinscription puis
valide son action. Le systme effectue une vrification puis une mise
jour de la base de donnes
Acteurs : ac.clientPotentiel,ac.clientMobile
DESCRIPTION DES ENCHAINEMENTS
Pr conditions Post conditions
Lutilisateur doit accder au systme. Client inscrit
SCENARIO NOMINAL
1. Le client demande la cration dun nouveau compte,
2. Le systme affiche le formulaire dinscription,
3. Le client remplit le formulaire puis valide,
4. Le systme vrifie puis cre un nouveau compte avec les informations fournies,
5. Le client accde des interfaces prives.

3. Diagramme de cas dutilisation lister les cartes visites par


catgories
SOMMAIRE DIDENTIFICATION
Titre : Lister les cartes visites.
But : Trouver une liste des cartes de visites dune catgorie.
Rsum : Le client Web/Mobile doit choisir une catgorie puis il appuie sur le
bouton, recherche le systme, effectue une vrification et affiche la
liste des cartes de cette catgorie ,les choisie si elles sont existantes.
Acteurs : ac.clientPotentiel,ac.clientMobile
DESCRIPTION DES ENCHAINEMENTS
Pr conditions Post conditions
Lutilisateur doit choisir une catgorie. Le client avoir une liste de carte de visite
SCENARIO NOMINAL
1. Le client demande le formulaire de recherche,
2. Le systme affiche le formulaire de recherche,
3. Le client choisie une catgorie,
4. Le systme cherche toutes les cartes de visites de cette catgorie,
5. Le systme affiche le rsultat.

27
Facult des Sciences et
Techniques - Settat

II. DIAGRAMMES DACTIVITES


Un diagramme d'activits permet de modliser un processus interactif, global ou
partiel pour un systme donn (logiciel, systme d'information). Il est recommandable pour
exprimer une dimension temporelle sur une partie du modle, partir de diagrammes de
classes ou de cas d'utilisation, par exemple.
Le diagramme d'activits est une reprsentation proche de l'organigramme ; la
description d'un cas d'utilisation par un diagramme d'activits correspond sa traduction
algorithmique.
Une activit est l'excution d'une partie du cas d'utilisation, elle est reprsente par un
rectangle aux bords arrondis.
Dans ce qui suit, nous prsentons les diagrammes dactivits pour quelques cas dutilisation
dans notre systme.

1. Diagramme dactivits de cas dutilisation sidentifier


Pour accder notre application, lutilisateur doit sauthentifier en entrant son login
et son mot de passe. Le processus dauthentification peut tre rsum dans le diagramme
dactivits suivant :
act S''Identifier

demande la boite dialogue


de s'authentification

Aficher la boite dialogue


de s'authentification v ide

Saisire le login et le mot


de passe

[ Action = retour ]

v erfication des champs

[ Champs vide ]
Alert champs v ide
[ Action = retour ]

Verifier si l'utilisateur
existe dans la bas

[Utilisateur non existant ]


Alerte utilisateur n'existe
pas

Afficher l'interface de
l'acceuil

Figure 9 : Diagramme dactivits de cas dutilisation Sidentifier

28
Facult des Sciences et
Techniques - Settat
2. Diagramme dactivits de cas dutilisation crer un compte
act Creer compte

Demande le formulaire de
la cration d'un nouv eau
compte

Afficher la formulaire de la
cration d'un nouv eau
compte

Remplir la formulaire

[Action = retour]

Verification des champs

[Action = retour]

[ Champs obligatoires vides ou invalides ] Alerte champs


obligatoires v ides ou
inv alides

Verifier si le compte
existe dans la BD

[ Compte existe ]
Alerte le compte existe
dj dans la BD
[ Compte n'existe pas]

Aj outer un nouv eau compte


/ "ok" aj outer un nouv eau compte
/exit v ider la formulaire

Figure 10 : Diagramme dactivits de cas dutilisation crer compte

29
Facult des Sciences et
Techniques - Settat
3. Diagramme dactivits de cas dutilisation lister carte de
visite par catgorie
act App. ListeCarteVisiteParCategorie

Demande la liste des


catgories

Affiche la liste des


catgories

Choisir une catgorie

[Action = retour] v erifier les cartes v isite


de la catgorie choisit

[Pas de carte visite]


Alert pas de carte v isite

Afficher la liste des cartes


v isites

[carte visite trouv]


[Action = exit]
choisir une carte v isite

Afficher le details de la
carte v isite

Figure 11 : Diagramme dactivits de cas dutilisation lister carte de visite par catgorie

30
Facult des Sciences et
Techniques - Settat

III. DIAGRAMME DE CLASSES


Un diagramme de classes dans le langage de modlisation unifi (UML) est un type de
diagramme de structure statique qui dcrit la structure d'un systme en montrant le
systme de classes, leurs attributs, et les relations entre les classes.
Ci-dessouss, le diagramme de classes de notre systme :

class System

Utilisateur
Role enumDroitAccee
- droit: droitAccee
- designation: char
- email: char enum
- login: char 1 0..* + administrateur: char
- passe: char + anonyme: char
+ client: char
+ clientAvance: char
+ clientMobile: char

Client ClienMobile
ClientAv ance
- tailleMemoireInterne: char
- nbCarteVisite: int - versionOS: char

1
1 1
0..1 1..*
1..*

CarteVisiteAv ance CarteVisite Catgorie

- presentation: char - adresse: char - designation: char


- cercle: Catgorie - id: int
- codePostal: char
- email: char
1 1 - fax: char 1
- fonction: char
1..* - id: int
1..* - logo: byte 1..*
Serv ice - nomPrenom: char
Produit - packIHM: enumPackIHM
- designation: char - QRcode: byte
- autresDetails: char
- raisonSocial: char
- designation: char
- secteurActivite: int
- siteWeb: char
1 - telephone: char
1 - ville: char
+dirige
1..*
1..*

Contact
Image
- email: char
- nom: char
- fonction: char
- type: int
- nom: char
- numGSM: char

Figure 12 : Diagramme de classe gnral

CONCLUSION
Comme nous pouvons le constater, lactivit de la conception a facilit la
comprhension de notre systme qui bauche vers lactivit dimplmentation.

31
Facult des Sciences et
Techniques - Settat

CHAPITRE-5 :
IMPLEMENTATION

INTRODUCTION
Dans ce chapitre, nous prsentons l'architecture sur laquelle nous avons dvelopp
nos applications, les diffrents outils utiliss ainsi que les composantes applicatives ralises.

32
Facult des Sciences et
Techniques - Settat

I. ENVIRONNEMENT MATERIEL
1. Architecture du matriel
Notre solution web et mobile sont deux applications qui se connectent un serveur
de base de donnes distant, via Internet, afin de rcuprer les donnes, ce qui
ncessite aussi lintgration dun serveur web entre lapplication client et le serveur
de base de donnes.
Do larchitecture de notre application est 3 niveaux (architecture 3-tiers),
elle est partage entre:
Le client Web/Mobile : Conteneur dapplication et demandeur de ressources,
Le serveur Web : Vue que les donnes seront communiques entre deux
environnements htrognes, le rle principal du serveur web est de grer la
communication entre le client Web/Mobile et le serveur de base de
donnes,
Le serveur de base de donnes fournit les donnes au serveur web.

Requte Requte

Rponse Rponse

Client Web/Mobile Serveur Web Serveur de Donnes


donn
Figure 13 : Architecture matriel du systme

33
Facult des Sciences et
Techniques - Settat
Pour le client mobile la communication avec la base de donnes se droule on respectant le shama
suivant :

LAPI permet :
- daccepter une requte par les mthodes
GET/POST
- dinteragir avec les classes PHP pour
rcuprer les donnes.
- Ensuite les donnes seront encodes au
format JSON et envoyes lapp. Android

Figure 14 : Communication avec MySql depuis le mobile

2. Matriels utiliss
Pour la ralisation du projet, nous avons utilis :

Un Smartphone pour les tests.


Deux PC portable pour le dveloppement relis par un cble rseau afin de faciliter la
communication et la gestion de version :
PC1 :
- Processeur Intel Core 2 Duo 2.2 GHz,
- 2 Go de mmoire vive,
- Disque dur de capacit 300 Go,
- Systme dexploitation Microsoft Windows 7 Edition Familiale.

PC2 :
- Processeur Intel Core 2 Duo 2.2 GHz,
- 3 Go de mmoire vive,
- Disque dur de capacit 500 Go,
- Systme dexploitation Microsoft Windows 7 Edition Intgrale.

34
Facult des Sciences et
Techniques - Settat

II. TECHNOLOGIES
1. Dveloppement mobile
a. Prsentation de la plateforme Android
Android est un systme d'exploitation open source utilisant le noyau
Linux, pour smartphones, tablettes tactiles, PDA et terminaux mobiles
conu par Android, une startup rachete par Google, et annonc
officiellement le 5 novembre 20074. D'autres types d'appareils possdant
ce systme d'exploitation existent, par exemple des tlviseurs et des
tablettes.

b. Architecture dAndroid
Pour bien comprendre la plateforme Android, nous dtaillons par la suite
larchitecture du systme Android. Le portail des dveloppeurs Android nous prsente
larchitecture du systme avec le schma ci-contre

Figure 15 : Architecture du systme dexploitation Android

Linux Kernel : Android sappuie sur le noyau Linux 2.6 pour les services systme de base tels
que la scurit, la gestion de la mmoire et des processus, le rseau et la gestion des drivers.
Le noyau sert de couche dabstraction entre le matriel et le reste de la pile logicielle.
Android Runtime : Android inclut un ensemble de librairies fournissant la plupart des
fonctionnalits des librairies standard de Java. Chaque application Android sexcute dans un
processus, avec sa propre instance de la machine virtuelle Java, appele Dalvik. Dalvik a t
crit pour optimiser lexcution dune multitude dinstances de la machine virtuelle, avec

35
Facult des Sciences et
Techniques - Settat
une empreinte mmoire rduite. Dalvik sappuie sur le noyau Linux pour les fonctionnalits
bas-niveau tels que les threads ou la gestion de la mmoire.
Librairies: Android fournit un ensemble de librairies C/C++ utilises par diffrents
composants du systme. Ces fonctionnalits sont rendues disponibles aux dveloppeurs au
travers du framework dapplication dAndroid. On trouve parmi ces librairies: librairie C
standard, moteurs daffichage 2D et 3D, SQLite, rendu des polices de caractres etc.
Application Framework : Le framework dapplication est la couche qui nous intresse tout
particulirement. Cest elle qui fait le lien, grce un ensemble dAPIs Java, entre le systme
et lapplication. tant un systme ouvert, Android permet aux dveloppeurs de concevoir
des applications trs riches et de tirer partie dun maximum de fonctionnalits. Les
dveloppeurs ont donc accs aux mmes fonctionnalits que celles utilises par les
applications fournies avec Android. Toute application Android repose sur un ensemble de
services et systmes parmi lesquels :
Un ensemble de Views permettant de construire linterface graphique de
lapplication : listes, grilles, champs textes, images, et mme intgration dun navigateur web
ou dune vue Google Maps.
Des Content Providers qui permettent aux applications daccder des donnes
dautres applications ou de partager ses propres donnes,
Un Ressource Manager pour accder des lments autres que du code :
donnes textuelles traduites, images, descriptions XML dinterfaces graphiques etc.
Un Activity Manager pour grer le cycle de vie de lapplication.

Ce rapide survol de larchitecture du systme m a permis de mieux comprendre


comment fonctionne une application Android. Confine dans la couche la plus haute, elle
accde au systme uniquement via les APIs Java exposes par la couche Application
Framework.
Ainsi, si une fonctionnalit est prsente dans le noyau Linux (couche rouge sur le schma) ou
dans les librairies systme (couche verte), mais quelle nest pas relie au framework
dapplication, elle ne sera pas utilisable directement dans une application Android.

c. LAPI Zxing
ZXing (prononc "zebra crossing") est un open-source, multi-
format de bibliothque 1D/2D de traitement d'image code barres
implment en Java, avec les ports vers d'autres langues. Notre objectif
est d'utiliser la camra intgre sur les tlphones mobiles pour lire et
dcoder des codes barres sur l'appareil, sans communiquer avec un
serveur. Cependant, le projet peut tre utilis pour coder et dcoder
des codes barres sur les ordinateurs de bureau et serveurs ainsi. Nous supportons
actuellement les formats suivants:

UPC-A and UPC-E Code 93


EAN-8 and EAN-13 Code 128
Codabar Data Matrix
RSS-14 (all variants) Aztec ('beta' quality)
QR Code PDF 417 ('alpha' quality)

36
Facult des Sciences et
Techniques - Settat
2. Dveloppement Web
a. La plateforme J2EE
Lapplication Web J2EE est dveloppe entirement en
Java et utilise plusieurs Framework, bibliothques Open-source
dans les diffrentes parties du projet. Les Framework facilitent la
programmation dans le sens o la standardisation des processus
de programmation rend le code plus lisible et facilement
interprtable lors dventuelles modifications. Toutes les volutions du projet Dchterie
ont t ralises sous lenvironnement de dveloppement Eclipse. Ensuite divers Framework
tels que AppFuse 2, St ruts 2, Spring et Hibernante ont Base de donnes Microsoft SQL
Server 2005. Une prsentation des diffrents outils est Faite ci-aprs.

b. Mthodologie de dveloppement : la dmarche MVC


Architecture 3-tier et mise en place du modle MVC
Une application web possde souvent une architecture 3-tier :
la couche dao s'occupe de l'accs aux donnes, le plus souvent des donnes
persistantes au sein d'un SGBD.
la couche mtier implmente les algorithmes " mtier " de l'application. Cette
couche est indpendante de toute forme d'interface avec l'utilisateur. Ainsi elle doit
tre utilisable aussi bien avec une interface console, une interface web, une interface
de client riche. Elle doit ainsi pouvoir tre teste en-dehors de l'interface web et
notamment avec une interface console. C'est gnralement la couche la plus stable
de l'architecture. Elle ne change pas si on change l'interface utilisateur ou la faon
d'accder aux donnes ncessaires au fonctionnement de l'application.
la couche interface utilisateur qui est l'interface (graphique souvent) qui permet
l'utilisateur de piloter l'application et d'en recevoir des informations.

Les couches mtier et dao sont normalement utilises via des interfaces Java. Ainsi la
couche mtier ne connat de la couche dao que son ou ses interfaces et ne connat pas les
classes les implmentant. C'est ce qui assure l'indpendance des couches entre-elles :
changer l'implmentation de la couche dao n'a aucune incidence sur la couche mtier tant
qu'on ne touche pas la dfinition de l'interface de la couche dao. Il en est de mme entre
les couches interface utilisateur et mtier.
L'architecture MVC prend place dans la couche interface utilisateur lorsque celle-ci est une
interface web.

37
Facult des Sciences et
Techniques - Settat

Figure 16 : L'architecture MVC

Le traitement d'une demande d'un client se droule selon les tapes suivantes :
1. Le client fait une demande au contrleur. Celui-ci voit passer toutes les demandes
des clients. C'est la porte d'entre de l'application. C'est le C de MVC.

2. Le contrleur C traite cette demande. Pour ce faire, il peut avoir besoin de l'aide de la
couche mtier. Une fois la demande du client traite, celle-ci peut appeler diverses
rponses. Un exemple classique est :
une page d'erreurs si la demande n'a pu tre traite correctement
une page de confirmation.

3. Le contrleur choisit la rponse (une vue) envoyer au client. Choisir la rponse


envoyer au client ncessite plusieurs tapes:
choisir l'objet qui va gnrer la rponse. C'est ce qu'on appelle la vue V, le V
de MVC. Ce choix dpend en gnral du rsultat de l'excution de l'action
demande par l'utilisateur.
lui fournir les donnes dont il a besoin pour gnrer cette rponse. En effet,
celle-ci contient le plus souvent des informations calcules par le contrleur.
Ces informations forment ce qu'on appelle le modle M de la vue, le M de
MVC. L'tape 3 consiste donc en le choix d'une vue V et en la construction du
modle M ncessaire celle-ci.

4. Le contrleur C demande la vue choisie de s'afficher. Il s'agit le plus souvent de faire


excuter une mthode particulire de la vue V charge de gnrer la rponse au client.
5. Le gnrateur de vue V utilise le modle M prpar par le contrleur C pour initialiser
les parties dynamiques de la rponse qu'il doit envoyer au client. 6. la rponse est
envoye au client. La forme exacte de celle-ci dpend du gnrateur de vue. Ce peut tre
un flux HTML, PDF, Excel... Dans notre application, et pour plus de simplicit, la couche
mtier est intgre au gnrateur de vue.

38
Facult des Sciences et
Techniques - Settat
c. La plateforme de prsentation Strusts
Apache Struts 2 est un lgant et extensible Framework pour la cration
dapplications web Java. Le Framework a t conu pour rationaliser le cycle complet de
dveloppement dune application : de la construction puis du dploiement jusqu' la
maintenance. Pour atteindre cet objectif, Struts 2 fournit diffrentes caractristiques pour
rduire la configuration XML, utiliser des annotations et des conventions sur la
configuration.

Dun plus haut niveau, Struts 2 est un Framework implmentant le patron de


conception MVC 2 (Modle Vue Contrleur). Ce patron est lgrement diffrent du
design pattern classique MVC dans le sens o`u les actions prennent le rle de modle plutt
que de contrleur. MVC 2 est ralis avec 5 composants noyaux :
Les actions
Les intercepteurs
La pile de valeurs/OGNL
Les types de rsultat
Les vues technologiques/ rsultat

Le schma 7 la page 17 montre les composants principaux du patron de conception


MVC 2 dans larchitecture haut niveau de MVC. Le contrleur est implment avec un
ensemble de filtres dexpdition tout comme les intercepteurs, le modle est implment
avec des actions et la vue comme une combinaison de types de rsultat et de r rsultat. La
pile de valeurs et OGNL fournissent un processus commun, liant et activant lintgration
entre tous les composants.

Les actions doivent implmenter linterface Action. Elles hritent ainsi de mthodes
permettant laccs aux proprits et mthodes du modle pour retourner des chanes de
caractres (String). Ces String sont lies avec les noms rsult dfinies dans le fichier de
configuration struts.xml. Les actions ont typiquement une seule mthode
execute() permettant deffectuer les traitements sur la vue. Struts 2 utilise aussi

Figure 17 : Schma du framework Struts 2

39
Facult des Sciences et
Techniques - Settat
Les intercepteurs pour intercepter les traitements de requtes et de rponses des pages
Web. Les intercepteurs ressemblent `a des filtres de servlet lexception que lon peut
communiquer directement avec les actions.

d. La plateforme de mapping Objet/Relationnel HIBERNAT

Hibernate est un framework open source grant la


persistance des objets en base de donnes relationnelle.
Hibernate est adaptable en termes d'architecture, il
peut donc tre utilis aussi bien dans un dveloppement
client lourd, que dans un environnement web lger de type
Apache Tomcat ou dans un environnement J2EE complet :
WebSphere, JBoss Application Server et Oracle WebLogic
Server.
Hibernate apporte une solution aux problmes
d'adaptation entre le paradigme objet et les SGBD en
remplaant les accs la base de donnes par des appels
des mthodes objet de haut niveau. Figure 18 : Schma du framework HIBERNAT

e. La technologie Ajax
Cette technologie, base essentiellement sur le JavaScript,
permet daccder de manire asynchrone avec les actions de lutilisateur
la base de donnes et cen utilisant en plus du JavaScript, une classe
XMLHTTPREQUEST, qui comporte des mthodes permettant de
communiquer avec le serveur, offrant ainsi lutilisateur une rponse
rapide et instantane.

3. QR-Code
Le QRCode est un code barre 2 dimensions sous licence libre qui permet de stocker des
informations numriques (textes, adresses de site web, etc.). Il peut-tre dchiffr partir
d'un tlphone mobile quip d'un appareil photo et du lecteur appropri. Imprim sur un
support ou plac dans l'environnement urbain, il permet de relier l'espace physique et
l'espace numrique.

Le QRCode permettant de dclencher facilement des actions comme :

naviguer vers un site internet, ou mettre ladresse dun site en marque-page;


faire un paiement direct via son cellulaire (Europe et Asie principalement);
ajouter une carte de visite virtuelle (vCard, MeCard) dans les contacts, ou un vnement
(iCalendar) dans lagenda lectronique;
dclencher un appel vers un numro de tlphone ou envoyer un SMS;
montrer un point gographique sur Google Maps ou Bing Maps;

40
Facult des Sciences et
Techniques - Settat

III. OUTILS DE DEVELOPPEMENT


1. Environnement de dveloppement Intgr : Eclipse
Eclipse est un projet de la Fondation Eclipse visant dvelopper tout un
environnement de dveloppement libre, extensible, universel et polyvalent.
Son objectif est de produire et fournir divers outils gravitant autour de la ralisation de
logiciel, englobant les activits de codage logiciel proprement dites
(avec notamment un environnement de dveloppement intgr)
mais aussi de modlisation, de conception, de test, de reporting, etc.
Son environnement de dveloppement notamment vise la
gnricit pour lui permettre de supporter n'importe quel langage de
programmation.
Le projet Eclipse est pour cela organis en un ensemble cohrent de
projets logiciels distincts, sa spcificit tenant son architecture
totalement dveloppe autour de la notion de plugin (en conformit avec la norme OSGi) :
toutes les fonctionnalits de l'atelier logiciel doivent tre dveloppes en tant queplug-
in bti autour de l'IDE Eclipse Platform.
Eclipse recouvre donc notamment galement cet effet tout un Framework de
dveloppement logiciel fournissant des briques logicielles partir desquelles dvelopper
tous ces outils. C'est la raison pour laquelle Eclipse est prsent dans la littrature tout
autant comme un EDI ou comme un Framework.

2. Le serveur dapplication Appache Tomcat


Apache TomCat est un conteneur de servlet J2EE. Issu du projet Jakarta,
TomCat est dsormais un projet principal de la fondation Apache. Il
implmente les spcifications des servlets et des JSP de Sun
Microsystems. Il inclut des outils pour la configuration et la gestion,
mais peut galement tre configur en ditant des fichiers de
configuration XML. Comme TomCat inclut aussi un serveur HTTP
interne.

3. Le serveur de base de donnes MySQL


MySQL est un serveur de bases de donnes relationnelles SQL
dvelopp dans un souci de performances leves en lecture, ce
qui signifie qu'il est davantage orient vers le service de donnes
dj en place que vers celui de mises jour frquentes et
fortement scurises. Il est multi-thread et multi-utilisateur.

41
Facult des Sciences et
Techniques - Settat
4. Entreprise Architect
Sparx Systems Enterprise Architect est un outil de
modlisation visuelle et de conception base sur l'UML OMG. La
plate-forme prend en charge: la conception et la construction de
systmes logiciels, les processus oprationnels de modlisation,
et de l'industrie de modlisation base sur des domaines. Il est
utilis par les entreprises et les organisations de ne pas le
modle que l'architecture de leurs systmes, mais de traiter la
mise en uvre de ces modles travers le dveloppement d'applications cycle de vie
complet.

5. Le gestionnaire de version SVN


a. Le serveur de version VisualSVN
Subversion pour Windows. Il offre un systme de
contrle de version Subversion rgle spcifiquement pour
l'environnement Windows. VisualSVN Server est un produit
autonome et fonctionne hors de la bote. La version payante de
VisualSVN Server offre une intgration supplmentaire dans
l'environnement Active Directory.

b. Le client TurtoiseSVN
TortoiseSVN est un des logiciels client de SVN les plus populaires1.
C'est un logiciel libre distribu selon les termes de la licence GNU GPL.
En s'intgrant dans l'explorateur de Windows, il offre aux utilisateurs
de Windows une interface graphique permettant de raliser la plupart
des tches qu'offre SVN en ligne de commande.
L'explorateur Windows s'enrichit des fonctionnalits suivantes :

Superposition d'icne aux rpertoires et fichiers permettant de visualiser instantanment


l'tat ( jour, modifi, en conflit...)
Menu contextuel permettant de committer ou d'updater, l'chelle d'un fichier, d'une
slection de fichiers ou encore d'un rpertoire.
Possibilit d'ajouter en mode dtails de l'explorateur des colonnes de type numro de
rvision, tat

Il est disponible en version 32 et 64 bits. 34 packs langues sont actuellement en ligne.

42
Facult des Sciences et
Techniques - Settat

IV. ECRANS
1. Ralisation Web

Figure 19 : Page de recherche(les rsultats ce forme de carte de visite)

43
Facult des Sciences et
Techniques - Settat

Figure 20 : Code barre a deux dimensions du LAFARGE (Aprs la clique sur une carte).

44
Facult des Sciences et
Techniques - Settat

Figure 21 : Dtail d'une carte de visite

Figure 22 : Formulaire d'inscription au site web.

45
Facult des Sciences et
Techniques - Settat

Figure 23 : Formulaire d'autentification

Figure 24 : Formulaire de cration d'une carte de visite

46
Facult des Sciences et
Techniques - Settat

2. Ralisation Mobile

Figure 25 : Activit d'accueil

Figure 26 : Activit de recherche Catgories & Cartes de visite(onglet Ctgories)

47
Facult des Sciences et
Techniques - Settat

Figure 27 : Activit de recherche Catgories & Cartes de visite (onglet Cartes de visite)

Figure 28 : Menu Contextuel du catgorie "Dveloppeurs Mobile"

48
Facult des Sciences et
Techniques - Settat

Figure 29 : Liste des cartes de visite (aprs la clique sur Liste des Cartes de visite)

Figure 30 : Menu contextuel du contact "Mobile Application"

49
Facult des Sciences et
Techniques - Settat

Figure 31 : Activit dtails carte de visite du contact "Mobile Application"

50
Facult des Sciences et
Techniques - Settat

Figure 32 : La liste droulante de categories

51
Facult des Sciences et
Techniques - Settat

Figure 33 : Menu de l'activit dtails cartes de visites

52
Facult des Sciences et
Techniques - Settat

Figure 34 : Activit d'appel aprs la clique sur l'icne d'appel.

Figure 35 : Menu contextuel des diffrents applications


de messagerie install sur le smarte phone

53
Facult des Sciences et
Techniques - Settat

Figure 36 : Menu contextuel de partage avec la liste des diffrents


application de partage install sur le smarte phone.

CONCLUSION
Lactivit dimplmentation tait la plus dlicate dans le dveloppement de notre
systme. Enfin, nous nous intressons tester lapplication en rseau.

54
Facult des Sciences et
Techniques - Settat

CONCLUSION GENERALE
Ce projet avait pour objectif la ralisation dune application
SmartBusinessCard permettant de rechercher et de grer plus facilement nos
contacts professionnels.

Cette priode du PFE nous a permis dapprofondir nos connaissances


thoriques acquises le long de notre formation par la pratique des nouvelles
technologies.

Cette exprience nous a permis de matriser la plateforme J2EE,


Hibernate, le langage de modlisation UML, les outils de dveloppement
Android savoir le SDK Android, et lintgration de la technologie QRCode o le
dveloppement na pas t une tche facile.

Ce travail nous a donn lopportunit de sinitier la vie professionnelle,


et de travailler srieusement pour atteindre un bon rsultat.

Enfin, notre projet ne va pas se limiter cette tape, nous voudrions


encore amliorer notre application afin que les interfaces soient plus
ergonomiques et diminuent le temps de rponse.

55
Facult des Sciences et
Techniques - Settat

BIBLIOGRAPHIE

Ouvrages :

Programmation Android de la conception au dploiement avec le SDK


Google Android
Auteurs : Damien Guignard, Julien Chable, Emmanuel Robles.
Edition : Eyrolls.

Formations Interactive :

Devenez un dveloppeur Android VOL1.


Auteurs : Emmanuel Robles, Nicolas Sorel

Lynda - Android App Development with Java Essential Training.


Auteur Lee Brimelow : Emmanuel Robles, Nicolas Sorel

Rfrences Netographiques :

[1] : http://www.developpez.com [En ligne].


[2] : http://www.wikipedia.com [En ligne].
[3] : http://www.siteduzero.com/ [En ligne].
[4] : Encyclopdie en ligne comment a marche [En ligne].
http://www.commentcamarche.net/contents/genie-logiciel/cycle-de-vie.php3
[5] : Portail des dveloppeurs Android [En ligne].
http://developer.android.com/
[6] : Rfrence du SDK Android[En ligne].
http://developer.android.com/sdk/ndk/1.5_r1/index.htm
[7] : Zxing [En ligne].
http://code.google.com/p/zxing/
[8] : http://www.androidhive.info/2012/01/android-login-and-registration-with-php-mysql-
and-sqlite/

56