Utilisation de La Technologie Sencha Touch Pour L'adaptation Des Ihm Au Format Mobile: Cas de L'erp My E-Sesame

REPUBLIC OF CAMEROON
REPUBLIQUE DU CAMEROUN
Paix - Travail - Patrie
Peace - Work - Fatherland
UNIVERSITE DE DOUALA
THE UNIVERSITY OF DOUALA
INSTITUT UNIVERSITAIRE DE
TECHNOLOGIE DE DOUALA
INTERFACE SA
Rapport de stage
THEME :
UTILISATION DE LA TECHNOLOGIE SENCHA

TOUCH POUR LADAPTATION DES IHM AU
FORMAT MOBILE: CAS DE LERP MY E-SESAME
En vue de lobtention de la Licence de Technologie(LT) option Gnie Logiciel lIUT de
Douala
Prsent par :
ENDEME OWONA Yvan Fabrice
(DUT en Gnie Informatique)
Sous lencadrement:
Professionnel de:
M. Patrick MVENG
Ingnieur Informaticien
Chef de projet INTERFACE SA
Anne acadmique:
2010-2011
Acadmique de:
Dr. AMOUGOU
NGOUMOU
Enseignant lIUT Douala
UTILISATION DE LA TECHNOLOGIE SENCHA

TOUCH POUR LADAPTATION DES IHM AU
FORMAT MOBILE: CAS DE LERP MY E-SESAME
Prsent par ENDEME OWONA Yvan Fabrice, tudiant en 3me anne GL lIUT de Douala
Remerciements
Mes remerciements vont droit mon encadreur acadmique le Docteur AMOUGOU

NGOUMOU pour sa disponibilit, sa rigueur et ses conseils.
Je tiens remercier mon encadreur professionnel Monsieur Patrick Adelphe
MVENG pour sa rigueur au travail et son entire disponibilit.
Ma gratitude va galement lendroit mon chef dquipe Monsieur Romualt
KEPDEM pour ses conseils.
Je dis merci tout personnel du dpartement Gnie Logiciel dINTERFACE SA pour
leur accueil, leur disponibilit et leurs prcieux conseils.
Je remercie spcialement mes parents et tuteurs qui ne cessent de croire en moi et me
soutiennent dans mes tudes.
Table des matires

Remerciements ................................................................................................................................... 3
Table des illustrations...................................................................................................................... 6
I.
INTRODUCTION ............................................................................................................................... 7
II.
LA STRUCTURE DACCUEIL ............................................................................................................... 9
III.
ETAT DE LART ........................................................................................................................... 15
1.
Analyse de la question............................................................................................................... 16
2.
Importance de la question ........................................................................................................ 16
3.
Etat de lart des ERP web mobiles ............................................................................................. 16

a)
Quest-ce quune application web ?...................................................................................... 16
b)
Architecture dune application web ...................................................................................... 17
c)
Quest-ce quun ERP ? ........................................................................................................... 18
d)
Quelques avantages et inconvnients dun ERP ................................................................... 19
e)
Le Web pour les mobiles ....................................................................................................... 19
f)
Les systmes dexploitation mobiles ..................................................................................... 20
g)
Les Frameworks ..................................................................................................................... 22
4.
Les protocoles de communication du mobile ........................................................................... 22

a)
GSM, 2G ................................................................................................................................. 22
b)
CDMA..................................................................................................................................... 23
c)
WAP ....................................................................................................................................... 23
d)
GPRS, 2,5G ............................................................................................................................. 23
e)
UMTS, 3G ............................................................................................................................... 23
5.
Versioning dune application web en application pour mobile ............................................. 24
6.
Adapter lapplication existante ................................................................................................. 24
7.
Crer une nouvelle application ................................................................................................. 25
IV.
CONCEPTION ............................................................................................................................. 27
1.
Quest-ce quune architecture ?................................................................................................ 28
2.
Architecture de lERP web My e-Ssame ! ................................................................................ 28
3.
Fonctionnalits de My e-Ssame ! ............................................................................................ 32
4.
Maquettes ................................................................................................................................. 33
V.
CHOIX TECHNOLOGIQUES ............................................................................................................. 36

1.
Pourquoi rutiliser les sources de lapplication de dpart ? ..................................................... 37
2.
Pourquoi sencha touch ? ........................................................................................................... 38
3.
Prsentation de sencha touch ................................................................................................... 38

4
a)
Petit historique ...................................................................................................................... 38
b)
Architecture Sencha Touch ................................................................................................... 39
4.
VI.
Les autres outils utiliss............................................................................................................. 40

a)
MS Project ............................................................................................................................. 40
b)
TortoiseSVN ........................................................................................................................... 42
c)
Visual Studio 2010 ................................................................................................................. 42
d)
MobiOne Studio .................................................................................................................... 43

IMPLEMENTATION .................................................................................................................... 44
1.
Structure des fichiers dun cran .............................................................................................. 45
2.
Ralisation dun cran ............................................................................................................... 45
VII.
CONCLUSION ............................................................................................................................. 49
ANNEXES................................................................................................................................................ 51
Annexe 1 ........................................................................................................................................ 52
Annexe 2 ........................................................................................................................................ 55
Annexe 3 ........................................................................................................................................ 59
Glossaire ............................................................................................................................................ 63
Bibliographie...................................................................................................................................... 66
Table des illustrations
FIGURE 1 REPRESENTATION INTERNATIONALE ET PERSPECTIVES .......................................................................................... 11

FIGURE 2 ORGANIGRAMME INTERFACE SA .................................................................................................................. 13
FIGURE 3 PLAN DE LOCALISATION INTERFACE SA .............................................................................................................. 14
FIGURE 4 ARCHITECTURE D'UNE APPLICATION WEB ........................................................................................................... 17
FIGURE 5 ARCHITECTURE DACCES A UNE APPLICATION WEB ............................................................................................... 18
FIGURE 6 APERU D'UN NEXUS S DE SAMSUNG PROPULSE PAR UN SYSTEME ANDROID ............................................................ 21
FIGURE 7 PARTS DE MARCHE DES FABRIQUANT D'OS MOBILES EN 2010 ............................................................................... 21
FIGURE 8 EBAUCHE DU FONCTIONNEMENT DE BKRENDER ................................................................................................. 25
FIGURE 9 DIAGRAMME DES CAS D'UTILISATION ................................................................................................................ 29
FIGURE 10 EXTRAIT D'UN DIAGRAMME DE CLASSES DE MY E-SESAME! ................................................................................. 30
FIGURE 11 EXTRAIT DU DIAGRAMME D'ETAT DE MY E-SESAME ........................................................................................... 31
FIGURE 12 DIAGRAMME DE DEPLOIEMENT...................................................................................................................... 32
FIGURE 13 APERU DE SAP MOBILE .............................................................................................................................. 33
FIGURE 14 ECRAN D'AUTHENTIFICATION A GAUCHE ET D'ACCUEIL A DROITE DE MY E-SESAME ! ................................................ 34
FIGURE 15 ECRANS DE RECHERCHE DES EMPLOYES A GAUCHE ET FICHE D'UN EMPLOYE A DROITE DE MY E-SESAME ! ..................... 35
FIGURE 16 MAQUETTE D'UNE PAGE DE MY E-SESAME MOBILE ........................................................................................... 35
FIGURE 17 RENDU DE LA PAGE D'IDENTIFICATION DE MY E-SESAME MOBILE SUR MOBIONE .................................................... 47
FIGURE 18 RENDU DE L'ECRAN DE RECHERCHE DES EMPLOYES SOUS CHROME ........................................................................ 47
FIGURE 19 RENDU DE L'ECRAN RESULTAT DE LA RECHERCHE DES EMPLOYES ........................................................................... 48
FIGURE 20 RENDU DE L'ECRAN PRESENTANT UNE FICHE D'UN EMPLOYE ................................................................................ 48
I.
INTRODUCTION
Dans le cadre de lobtention de la licence de Technologie en gnie rseau et

tlcommunication lInstitut Universitaire de Technologie (IUT) de Douala, il nous a t
demand deffectuer des stages acadmiques en entreprise afin dveiller en nous la facult de
concevoir, dlaborer et de conduire un projet en vue damliorer lexistant, la facult davoir
un regard critique, et la capacit se positionner en force de proposition.
Lpoque de linformation mute activement vers une poque dinformation mobile.

Avec l'mergence des Smartphones*, et tablettes tactiles, l'adaptation mtier aux terminaux
mobiles devient une priorit (pour certaines entreprises de dveloppement). Selon un rcent
sondage, 73% de dveloppeurs (dans une population de 350) prvoient de raliser des
extensions de logiciels d'entreprise pour le monde de la mobilit d'ici les 12 mois venir.
Dans le cas des sites web mobiles, un utilisateur quelconque les consulte son temps libre.
Pensons un trajet d'autobus ou encore une salle d'attente o l'utilisateur souhaite pouvoir
bnficier d'une exprience adapte son contexte numrique.
Cest cet effet que le dpartement Gnie Logiciel de la socit Interface SA opte
pour une ventuelle implmentation mobile de son ERP* web My e-Ssame !. Dans ce cadre,
le prsent rapport sarticule sur quatre principaux axes :
-
Ltude de lexistant qui consistera prsenter les technologies associes aux mobiles,
prsenter My e-Ssame ! et nous donner une base assez abstraite pour passer la
conception.
La conception qui nous donnera une base moins abstraite pour procder aux diffrents
choix technologiques.
Les choix technologiques qui eux nous permettrons de procder limplmentation de
notre systme.
Limplmentation qui est la phase de ralisation de ce projet.
II.
LA STRUCTURE DACCUEIL
1. INTERFACE SA
Pionnier dans la mise en place effective des solutions informatiques complexes, volutives et
adaptes aux spcifications locales, INTERFACE SA est un groupe qui applique les
technologies de linformation et de la communication au dveloppement de solutions mtiers
forte valeur ajoute. Au fil des annes, lentreprise a dvelopp une vritable matrise et une
forte expertise des diffrentes composantes technologiques de lindustrie informatique et sest
positionn comme un acteur de rfrence sur son march. Implante en France, en Afrique du
Sud, au Cameroun et au Congo Brazzaville, INTERFACE SA est dsormais reconnue comme
crateur et intgrateur de leviers de performances pour les entreprises oprant dans les
marchs forte croissance.
Tableau 1 Fiche signaltique
Nom
INTERFACE SA
Anne de cration
1994
Forme juridique
Socit Anonyme
Capital
553 000 Euros (359 450 000 Fcfa)
Effectif
103
Sige
Paris France
Agences
Tel: (33) 01 47 21 29 07
Johannesburg Afrique du Sud
Tel: + 27 11 608 2690

Douala Cameroun
BP: 12423
Tel: (237) 33.42.57.16
Yaound Cameroun
10
BP: 2708
Tel: (237) 22.22.31.66
Adresses lectroniques
Email: interface@interfacesa.com
Web: www.interfacesa.com
Administrateur Directeur Gnral
M. NYAMSI Martin
Figure 1 Reprsentation internationale et perspectives
Dans sa vision de leader de solutions informatiques conomiques, efficaces et personnalises

pour la croissance des pays mergents, INTERFACE SA sest fix des objectifs parmi
lesquels :
La cration de ples dexpertise technologique bass sur les nouvelles technologies de
linformation et de la communication(NTIC).
Loffre des services et solutions de pointe pour rpondre aux exigences croissantes du
march.
Laccompagnement des entreprises (PME/PMI, grands comptes) dans leur projets

afin daccrotre leur comptitivit.
Redfinir les standards de performance dans les solutions intgratives qui maximisent
le potentiel des industries et administrations publiques.
11
Pour assurer et garantir la performance de ses ralisations, INTERFACE SA est structure en

six ples dexcellence, dirigs par des experts certifis issus du monde de lindustrie :
Le ple conseil, infogrance et expertise en solutions de gestion dentreprise.
Le ple Gnie Technique assure des prestations dassistance technique en
design, installation, maintenance volutive dinfrastructure informatique.
Le ple Rseaux & Tlcoms, fournisseur de solutions bases sur les dernires
technologies CISCO, LINUX, GRANDSTREAM, ToIP
Le ple Gnie Logiciel pour ldition de solutions logicielles de gestion.
Le ple formation qui fournit laccompagnement ncessaire la monte en
comptences de nos clients et partenaires.
Le ple distribution, qui assure la reprsentation commerciale des grands
constructeurs : HP, DELL, EPSON, CANON...Par la vente de matriels et
consommables.
Pour y arriver, INTERFACE SA sest constitu dexperts en informatique et en systmes
dinformation, diplms des grandes coles et Universits occidentales certifis Oracle,
Microsoft, Cisco, Sun Solaris Pour mener bien ses missions, ce staff est align suivant
une organisation fonctionnelle bien structure :
12
Figure 2 Organigramme INTERFACE SA
13
2. Dpartement de Gnie Logiciel
Le dpartement de gnie logiciel o jai effectu mon sjour de stage est compos de deux
divisions : la production et la MSD.
La division Modlisation Support Documentation (MSD) intervient en amont et en aval de la
division la production. En amont de la production, le MSD se charge de la modlisation et de
la spcification fonctionnelle. En aval de la production, le MSD teste les applications ralises
et rdige la documentation utilisateur. Cette division accompagne galement les commerciaux
pour les dmos, et effectue le dploiement dapplications chez le client.
La division de production divise en deux ples de production (1 et 2) effectue les
spcifications techniques et se charge de la ralisation des solutions logicielles.
Plan de localisation
Figure 3 Plan de localisation Interface SA
14
III.
15
ETAT DE LART
1. Analyse de la question
De plus en plus, les entreprises optent pour des applications avec clients lgers pour des
soucis de cohrence des donnes (en provenance ou en direction des utilisateurs), de
compatibilit multiplateformes (Windows, Linux, iOS* ), administration plus aise et
centralise ; et certaines parmi elles choisissent mme dutiliser des rseaux privs virtuels (en
anglais VPN : Virtual Private Network) pour pouvoir partager les donnes entre les diffrents
points dlocaliss de lentreprise.
Avec lmergence de la technologie mobile et son gain de puissance exponentiel et dans le
souci doffrir un accs aux applications de lentreprise ses employs mobiles, le
dpartement Gnie Logiciel souhaite faire une implmentation de son ERP web pour les
mobiles ; ainsi il sagira dans un premier temps dacqurir une connaissance thorique des
outils et procds mettre en uvre et dans un deuxime temps de concevoir et danalyser la
solution retenue.
2. Importance de la question
Le choix dune application mobile nest pas anodin. En effet, bon nombre demploys
(commerciaux, managers) dentreprise sont de plus en plus mobile dans le but de rechercher
de nouveaux marchs et partenariats. Ceux-ci ont en gnral besoin davoir un accs
certaines donnes de leurs entreprises pour pouvoir convaincre de potentiels clients ou alors
donner leur accord sur certains dossiers de lentreprise.
Etant donn que la comptence et la productivit dun employ a toujours t un enjeu majeur
dans toute entreprise, force sera donc de constater quune solution mobile dans un systme
dinformation dcuple la comptence des ressources humaines qui accde ce type de
technologie. De plus, cette solution vise contribuer au dveloppement socio-conomique et
technologique des entreprises et de leurs employs.
3. Etat de lart des ERP web mobiles

a) Quest-ce quune application web ?
Une application web ou WebApps est un logiciel applicatif utilisable via un navigateur web.
De mme quun site web une application web est place sur un serveur (dapplications) et se
manipule en actionnant des widgets laide dun navigateur web via un rseau informatique.
La technologie des applications web permet de nombreux usages dont les plus populaires sont
les moteurs de recherche, le webmail, le commerce lectronique et les jeux en ligne.
16
Dans la technologie la plus courante, l'application web s'oriente autour d'un serveur web sur
lequel est install le logiciel applicatif, accompagns le plus souvent d'un serveur de base de
donnes. L'ensemble est appel serveur d'application.
Le code source du logiciel applicatif est plac directement (ou non)* dans des pages web. Ces
pages sont stockes par le serveur. Lorsque le client demande une page, le serveur web va
rechercher la page, puis excute les instructions qu'elle contient. Ces instructions peuvent
faire appel au serveur de base de donnes (ou dautres serveurs). Le serveur web transmet la
page avec le rsultat de l'excution au client.
b) Architecture dune application web
Une application web a trois composants principaux :

La vue il sagit du composant prsentation, ou IHM* (dans notre cas ce sont les pages html
que voit linternaute). Plusieurs vues peuvent fournir diffrentes prsentations dun modle
unique
Le contrleur Il sagit du composant qui rpond la saisie utilisateur. Le contrleur traduit les
vnements de lIHM en modifications du modle, puis dfinit la manire dont lIHM ragit
ces vnements
Le modle contient les donnes et la logique mtier, il dfinit toutes les contraintes
dintgrits cest le cur mme de lapplication.
Figure 4 Architecture d'une application web
17
Une application web est gnralement une application 3-tiers c'est--dire compose dun
client, dun serveur web et dun serveur dapplication. Cependant elle peut tre n-tiers comme
le montre
la figure 2 ci-dessous qui illustre un architecture 4-tiers (clients, serveurs web,
dapplication, de bases donnes) ; n tant le nombre de nuds.
Figure 5 Architecture daccs une application web
c) Quest-ce quun ERP ?

Enterprise Resource Planning (ERP), signifiant littralement en anglais, planification des
ressources de l'entreprise, et traduit en franais par progiciel de gestion intgr (PGI).
Un progiciel qui intgre les principales composantes fonctionnelles de l'entreprise:
gestion de production, gestion commerciale, logistique, ressources humaines, comptabilit,
contrle de gestion, paie.
A l'aide de ce systme unifi, les utilisateurs de diffrents mtiers travaillent dans un
environnement applicatif identique qui repose sur une base de donnes unique. Ce modle
permet d'assurer l'intgrit des donnes, la non-redondance de l'information, ainsi que la
rduction des temps de traitement.
Le principe d'un PGI ou ERP est de construire des applications informatiques (gestion des
commandes, des stocks, de la paie, de la comptabilit) :
18
de manire modulaire et intgre au niveau des traitements offerts (les diffrents

modules qui le composent sont indpendants mais parfaitement compatibles entre
eux) ;
de manire rigoureuse et cohrente au niveau des donnes gres (partage d'une base
de donnes unique et commune).
Cela comble une lacune importante quapportait un puzzle dapplications htrognes et

non communicantes cest--dire des applications sur mesure, d'origine diverse, coexistent tant
bien que mal, ne partagent pas ou peu leurs donnes, et ne sont pas forcment toujours
prvues pour travailler simplement et correctement ensemble.
d) Quelques avantages et inconvnients dun ERP

Avantages
Un ERP par rapport aux applications ddies prsente certains avantages :
- cohrence et homognit des informations (un seul fichier articles,
un seul fichier clients, etc.) ;
- intgrit et unicit du Systme d'information ;
- partage du mme systme dinformation facilitant la communication
interne et externe ;
- matrise des cots et des dlais de mise en uvre et de
dploiement ;
Inconvnients
De par ses avantages un PGI prsente nanmoins des inconvnients parmi
lesquels nous avons :
- mise en uvre pouvant tre complexe si le primtre est mal
dtermin ou trop mouvant ou le projet mal pilot ;
- primtre fonctionnel souvent plus large que les besoins de
l'organisation ou de l'entreprise : le PGI est parfois sous utilis
- lourdeur et rigidit de mise en uvre ;
- ncessit parfois d'adapter certains processus de l'organisation ou de
l'entreprise au progiciel ;
e) Le Web pour les mobiles

Le Web Mobile est une technologie qui permet d'accder Internet depuis un tlphone
mobile, on parle alors de l'Internet Mobile. Le web mobile se matrialise notamment par
l'utilisation de navigateurs mobiles ou d'applications pour Smartphones mais aussi par des
widgets*, la consultation de mails de faon instantane. C'est l'volution des quipements, des
usages et des forfaits de tlphone mobile qui ont permis le dmarrage du web mobile.
Le Web mobile est n avec le WAP (Wireless Application Protocol), langage de description
driv du HTML, qui permettait d'adapter les formats d'Internet aux contraintes des
19
tlphones portables. Cest en octobre 1999, grce au premier tlphone Nokia 7110, que le
grand public dcouvre cette nouvelle technologie. Ds les annes 2000, les premiers
navigateurs mobiles comme Blazer sur Palm et Pocket Internet Explorer sur Pocket PC font
leur apparition, vient ensuite la technologie Bluetooth qui permet de se connecter avec son
Palm ou Pocket PC avec un dbit de 5 kb/s mais un surcot important sur son forfait mobile.
En 2003, Nokia annonce la troisime gnration de tlphone mobile appele 3G avec son
modle 6100 qui permet laccs Internet en haut dbit et lanne 2005 voit se gnraliser
la technologie du WIFI (Wireless Fidelity). Le dveloppement des Smartphones, en 2010,
avec forfait Internet illimit a permis lessor du web mobile, ils fonctionnent en combinant
plusieurs technologies comme la 3G, le WIFI et le EDGE (Enhanced Data Rates for GSM
Evolution). En une dcennie le web mobile et les technologies qui lui sont associes ont
considrablement volu, aujourdhui les sites mobiles sont en plein dveloppement sur
Internet et un nombre toujours plus important dapplications pour Smartphone voit le jour sur
App Store et Android Market.
f) Les systmes dexploitation mobiles

Un systme d'exploitation mobile est un systme d'exploitation conu pour fonctionner sur un
appareil ayant des ressources limites et donc facilement transportable. Ce type de systme
d'exploitation se concentre entre autres sur la gestion de la connectivit sans fil et celle des
diffrents types d'interface.
Les systmes d'exploitation suivants sont retrouvs sur des Smartphones : Symbian OS de
Nokia, iOS de Apple's, BlackBerry OS de RIM's, Windows Phone de Microsoft, Android* de
Google, Bada de Samsung, WebOS.
N.B : La plus part des systmes dexploitation mobile sont tous bass sur les technologies
libres ainsi Android, Bada, WebOS et Maemo sont construits sur un noyau Linux par contre le
systme d'exploitation iPhone driv de BSD et de NeXTSTEP qui sont tous li Unix.
20
Figure 6 Aperu d'un Nexus S de Samsung propuls par un systme Android
Figure 7 Parts de march des fabriquant d'OS mobiles en 2010
21
g) Les Frameworks
Un framework est un ensemble d'outils et de composants logiciels organiss conformment
un plan d'architecture et des design patterns*. Il est souvent fourni sous la forme d'une
bibliothque logicielle, et accompagn du plan de l'architecture cible du framework.
Un framework est conu en vue d'aider les programmeurs dans leur travail. L'organisation du
framework vise la productivit maximale du programmeur qui va l'utiliser, gage de baisse des
cots de construction du programme. Le contenu exact du framework est dict par le type de
programme et l'architecture cible pour lequel il est conu.
On trouve diffrents types de frameworks :

-
Framework d'infrastructure systme : pour dvelopper des systmes d'exploitation,

des interfaces graphiques, des outils de communication. (exemple : Framework .Net,
Struts)
Framework d'intgration intergicielle (middleware) : pour fdrer des applications
htrognes. Pour mettre disposition diffrentes technologies sous la forme d'une
interface unique. (Exemple : Ampoliros avec ses interfaces RPC, SOAP, XML)
Frameworks d'entreprise : pour dvelopper des applications spcifiques au secteur
d'activit de l'entreprise.
Frameworks de gestion de contenu: Sont les fondations d'un systme de gestion de
contenu pour la cration, la collecte, le classement, le stockage et la publication de
biens numriss.
Seuls les framework dinfrastructure systme retiendront notre attention ici.
4. Les protocoles de communication du mobile

a) GSM, 2G
Le GSM (Global System for Mobile) correspond la norme actuelle des tlphones mobiles
cre dbut 1990.
Le territoire est divis en cellules de quelques centaines de mtres, chacune desservie par un
metteur faible porte, la station. La technologie de transmission est TDMA.
A l'origine, le GSM utilisait uniquement la bande de frquence de 900 MHz. Elle a t
tendue celle de 1800 MHz et la norme d'origine britannique DCS 1800 (Digital Cellular
System).
Le GSM, concurrent du CDMA, est employ en Europe, Amrique latine, Moyen-Orient et
Chine, par 1,2 milliard d'utilisateurs.
La famille GSM inclut le GPRS (General Packet Radio Services), EDGE (Enhanced Data for
GSM Evolution) et le 3GSM.
22
On parle aussi de 2G (tlphonie mobile de 2e Gnration), qui correspond au passage pour la

tlphonie mobile de la transmission analogique (les gros tlphones embarqus dans les
voitures) la transmission numrique (et l'apparition des tlphones portables).
b) CDMA
C'est le standard de tlphonie cellulaire utilisant la technologie CDMA qui est dploye aux
Etats-Unis et en Asie.
Le standard CDMA est donc concurrent du GSM.
L'volution 3G est le CDMA2000, dont l'organisateur est le 3GPP2, frre du 3GPP.
c) WAP
Ds lors qu'il existe un rseau de transport d'informations numriques public fiable et sans
trous, on pense ajouter au transport de la voix, le transport des donnes :
-
d'abord sous forme de pages Internet simplifies vers des terminaux tlphoniques
performants : le WAP.
en transfert IP vers les ordinateurs ou les PDA.
Le WAP (Wireless Application Protocol) est un protocole dfini pour afficher des pages sur
un tlphone portable.
Le WAP possde 5 couches protocolaires d'une manire semblable l'OSI.
d) GPRS, 2,5G
Le GPRS (General Packet Radio Service) est une version amliore de la norme GSM. La
voix est achemine de manire identique au GSM classique, mais les donnes sont transfres
par paquets, 3 fois plus vite. Le point fort du GPRS est la compatibilit globale avec l'ancien
rseau GSM.
L'arrive de l'UMTS se faisant dcidment attendre, le GPRS est vu comme une tape
transitoire et a t baptis 2,5G.
e) UMTS, 3G
La 3G doit apporter des dbits beaucoup plus importants, dsormais souhaitables pour :
-
la consultation de pages web sur les terminaux tlphoniques portables,

la visiophonie,
le transfert de donnes vers les ordinateurs et PDA.
En Europe, le 3GPP (3rd Generation Partnership Project) a choisi la norme UMTS W-CDMA
qui utilise des frquences entre 1900 et 2200 MHz et autorise des vitesses suprieures 1
Mbit/s (elles devraient tre plafonnes 128 kbps en mission et 384 kbps en rception.
23
5. Versioning dune application web en application pour mobile

Aprs avoir fait un bref tour dhorizon sur les technologies existantes la question qui pourrait
nous venir lesprit serait de savoir comment pourrait-on implmenter un ERP web pour les
terminaux mobiles ou mieux comment obtenir une version mobile dun ERP web existant ?
En effet, tant donn quun mobile ne pourrait pas supporter le format des donnes dun
ordinateur ordinaire il faudrait bien videment penser pouvoir soit adapter lapplication
existante, soit en construire une autre.
6. Adapter lapplication existante

Du fait quun ERP soit un trs gros logiciel contenant un grand nombre de modules, il serait
fastidieux de penser recrer lapplication ds le dbut.
A cet effet il existe un certain nombre doutils permettant le dveloppement en parallle pour
les PC et pour les mobiles.
Le framework Joshfire fait partie de ces outils. Celui-ci bas sur des standards tels que
HTML5 et JavaScript permet aux dveloppeurs et aux intgrateurs de crer
rapidement des Web-applications et applications natives qui seront multiplateformes et
adapt diffrents systmes dexploitation et diffrents types dcrans.
Il est noter que le framework Joshfire est une solution open source sous licences
GPLv2 (General Public License) dont voici le lien http://www.gnu.org/licenses/gpl2.0.htm(ne permettant pas un dploiement sur des appareils physiques) et commerciale
inspire de MIT permettant de dployer lapplication sans avoir copier son code.
WebORB est un serveur d'intgration il est utilis par SOAP et permet de connecter
les clients navigateurs java, .Net, Ajax, Json et les clients mobiles Android, Windows
phone etc. avec les services Bakend .Net, java, PHP etc. et les bases de donnes
MySQL, SQL Server, Oracle.
WebORB dispose de trois types de licences savoir :
WebORB en mode dveloppement qui est libre et ne ncessitant pas de
clef de la licence et dont la version est disponible en tlchargement
La Community Edition est toute aussi libre et peut tre utilise pour le
dveloppement en quipe et nest dploy que sur un seul serveur.
LEnterprise Edition est idale et peut tre dploy sur plusieurs
serveurs et ncessite donc une cl de licence pour le nombre de serveur
de dploiement
Les environnements de dveloppement Netbeans et Eclipse. Ces derniers dot du SDK
Android ou J2ME permettent aussi de procder au dveloppent mobile et donc
dutiliser lun des principaux principes orient objets : la rutilisation. En effet, il est
24
possible de rutiliser certaines classes J2SE ou J2EE sur J2ME ; ces classes seront
bien sre radaptes pour leur utilisation sur les mobiles.
Lenvironnement .NET tout comme Java, permet aussi la rutilisation de certaines
librairies dans le .NET Compact Edition. Il permet donc par consquent dadapter son
application web sur les mobiles en utilisant des technologies telles que SharePoint.
BKRender qui est une solution de Backelite permet notamment de crer un design
(seule la vue est concerne ici) adapt aux mobiles et par consquent est adapter
plusieurs types de terminaux mobiles. Cette solution est aussi adapte un grand
nombre de frameworks de dveloppement web PHP, .NET, JAVA.
Dispose lui aussi de trois types de licences :
Gratuite : donnant droit un seul site dans le domaine
xxx.bkrender.mobi sans scurisation SSL avec un trafic mensuel limit 10
Ko
Basic : avec les mmes caractristiques ci-dessus mais avec un trafic mensuel
limit 100 Ko pour le prix de 500 (soit 328.000 Frs CFA)
Licence excution donnant droit lillimit pour le prix de 25.000 (15.000 +

10.000) soit environ 16.400.000 Frs CFA pour deux licences.
N.B : la seule limite tant celle des dbits des terminaux.
1-
Connexion dun mobile lapplication
23-
BKRender transmet les informations au serveur web .NET, PHP, JAVA de votre systme din formation
BKRender adapte le rsultat de la requte selon les caractristiques du terminal
Figure 8 Ebauche du fonctionnement de BKRender
7. Crer une nouvelle application

Il est possible que lon veuille seulement dvelopper une application pour les mobiles de ce
fait toutes les solutions nonces plus haut peuvent donc tre prises en compte. Seuls les
25
problmes en terme de temps et de ressources humaines pourront se poser dans le cas o il

faudrait choisir cette mthode.
Il est noter que pour des raisons de scurit des donnes un troisime choix soffre nous
savoir le dveloppement dune application mobile native qui ne pourra tre complte car
pour des soucis de taille, la base de donnes ne pourra pas tre entirement embarque sur le
mobile de mme tous les programmes (contrleurs et interface utilisateur) permettant le bon
fonctionnement de lapplication sur les PC ne pourront galement tre implments car trop
volumineux. Par consquent on pourrait procder des synchronisations constantes entre les
terminaux mobiles et les serveurs pour effectuer des mises jour et conserver la cohrence
des donnes. On peut dore et dj constater linadquation de cette mthode car elle ne
respecte pas lun des canons dune application mobile savoir laccs aux donnes en temps
rel.
26
IV.
27
CONCEPTION
1. Quest-ce quune architecture ?

Larchitecture logicielle dcrit dune manire symbolique et schmatique les diffrents
lments dun ou de plusieurs systmes informatiques, leurs interrelations et leurs
interactions. Contrairement aux spcifications produites par lanalyse fonctionnelle, le modle
d'architecture, produit lors de la phase de conception, ne dcrit pas ce que doit raliser un
systme informatique mais plutt comment il doit tre conu de manire rpondre aux
spcifications. Lanalyse dcrit le quoi faire alors que larchitecture dcrit le comment
le faire .
Les deux objectifs principaux de toute architecture logicielle sont la rduction des cots et
l'augmentation de la qualit du logiciel; la rduction des cots est principalement ralise par
la rutilisation de composants logiciels et par la diminution du temps de maintenance
(correction d'erreurs et adaptation du logiciel). La qualit, par contre, se trouve distribue
travers plusieurs critres tels que la norme ISO 9126*.
Quelques critres de qualits dun logiciel :
-
L'intgrit exprime la facult du logiciel protger ses fonctions et ses donnes

d'accs non autoriss.
La fiabilit exprime la facult du logiciel grer correctement ses propres erreurs de
fonctionnement en cours d'excution.
La maintenabilit exprime la simplicit de correction et de modification du logiciel,
et mme, parfois, la possibilit de modification du logiciel en cours d'excution.
La rutilisabilit exprime la capacit de concevoir le logiciel avec des composants
dj conus tout en permettant la rutilisation simple de ses propres composants pour
le dveloppement d'autres logiciels.
L'extensibilit exprime la possibilit d'tendre simplement les fonctionnalits d'un
logiciel sans compromettre son intgrit et sa fiabilit.
L'efficacit exprime la capacit du logiciel exploiter au mieux les ressources offertes
par la ou les machines o le logiciel sera implant.
2. Architecture de lERP web My e-Ssame !

Comme tout ERP qui se respecte, My e-Ssame ! dispose dun certain nombre de modules
dont : la comptabilit, la gestion commerciale, la gestion des ressources humaines et la paie.
Pour notre cas nous allons nous limiter la gestion des ressources humaines.
Le module de la gestion des ressources humaines (module RH, que nous implmenterons) est
lui-mme divis en sous modules dont voici la hirarchie :
-
Gestion Administrative : cette section est rserve la gestion du personnel et de leur

poste (mutation, dpart, embauche, discipline), gestion de la prvoyance et de
lexpatriation.
Gestion du recrutement
Gestion du temps : ici est gre la planification horaire des employs
28
Gestion de la carrire : dans laquelle on gre lvaluation, la comptence, les

performances, les objectifs et la mobilit dun employ.
Formation
2.1.Architecture fonctionnelle
Vue cas dutilisation

Description :
1) Un utilisateur demande laccs lapplication
2) Le serveur demande son authentification
3) Lutilisateur sauthentifie
4) Le systme lui offre des menus au choix
5) Lutilisateur choisi lagence correspondant son profil
6) Sil est autoris travailler dans lagence slectionne il est redirig vers les
menus correspondants sinon cest vers la page de choix des agences quil est
redirig
7) Il peut consulter les donnes enregistres dans la base de donnes
8) Lutilisateur peut effectuer des enregistrements
9) Le systme vrifie toujours toutes les donnes en provenance et en direction de
lIHM pour des raisons de compatibilits.
Figure 9 Diagramme des cas d'utilisation
29
2.2.Architecture conceptuelle
Vue logique statique
Figure 10 Extrait d'un diagramme de classes de My e-Ssame!
30
Vue logique dynamique
Figure 11 Extrait du diagramme d'tat de My e-Ssame
31
2.3.Architecture physique
Vue dploiement
Figure 12 Diagramme de dploiement
3. Fonctionnalits de My e-Ssame !
Comme la plus part des ERP qui se respectent, My e-Ssame ! regorge de nombreuses
fonctionnalits pour la gestion dune entreprise dont les principales sont numres cidessous :
-
La gestion administrative dans laquelle on retrouve plusieurs sous modules tels la

gestion des ressources humaines, la gestion de la formation ou encore la gestion de la
carrire des employs
La gestion de la paie et de la comptabilit
De plus en dehors des services classiques quil offre comme tout autre ERP, My eSsame ! permet galement la gestion du Workflow
Il offre galement un portail web ses utilisateurs et aux personnes externes
lentreprise permettant ainsi de grer par exemple le recrutement en ligne
32
Une autre particularit de cet ERP est quil est bas sur les technologies web et par
consquent offre tous les avantages dune application web et, lui permet ainsi dtre
un ERP multiplateformes.
Voil donc quelques particularits et fonctionnalits de lERP web My e-Ssame ! qui est
un ERP qui se veut puissant et de qui hrite My e-Ssame Mobile.
4. Maquettes
Quelques aperus dcrans de SAP mobile et SAGE mobile
Figure 13 Aperu de SAP mobile
Maquettes de lERP web mobile My e-Ssame
33
Grce laperu ci-dessus, nous pouvons dore et dj savoir quoi pourra ressembler lIHM
de notre future application.
Avant de passer la production de nos maquettes il faudrait dj savoir qu l'inverse d'un
ordinateur mme portable, le propre d'un terminal mobile est la mobilit ; par consquent
vouloir porter une application faite pour un ordinateur traditionnel sans vraie rflexion mobile
est vou l'chec. Les contraintes d'une application mobile en termes d'ergonomie, de poids,
mais galement de fonctionnalits ne sont pas les mmes que pour une application desktop.
Les besoins ne sont pas les mmes selon que vous soyez assis votre bureau ou quelque part
dans la rue.
Mme si les terminaux mobiles ont fait beaucoup de progrs en termes d'utilisabilit et
d'ergonomie, leurs utilisateurs sont toujours handicaps par rapport ceux d'une machine de
bureau. La taille du clavier et de l'cran ne sont pas les seuls freins une utilisation productive
et efficace des applications mais aussi les capacits en termes de mmoire et processeur.
Les premires pistes de rflexion dans la cration ou le port d'une application Web
ou desktop classique doivent s'orienter vers la simplification :
-
Simplification fonctionnelle, en supprimant tout ce qui n'adresse pas directement les

utilisateurs mobiles, sans pour autant dnaturer l'application.
Simplification de l'interface, afin de rendre plus facilement accessibles les lments
importants.
Simplification du parcours utilisateur, afin notamment de rendre accessible l'ensemble
des fonctionnalits depuis le premier ou le second cran.
Pour continuer, voici donc un aperu des pages de My e-Ssame ! quil va nous falloir porter
vers les mobiles :
Figure 14 Ecran d'authentification gauche et d'accueil droite de My e-Ssame !
34
Figure 15 Ecrans de recherche des employs gauche et fiche d'un employ droite de My e-Ssame !
Etant donn toutes les restrictions des terminaux mobiles le choix des crans de notre
application va par consquent sorienter pour le moment vers la consultation des donnes
cest--dire que lon ne se limitera ici du moins pour le moment aux recherches et
consultations des donnes de My e-Ssame !.
Figure 16 Maquette d'une page de My e-Ssame mobile
35
V.
36
CHOIX TECHNOLOGIQUES
Dans la phase danalyse, nous avons pu constater que nous avions trois diffrentes approches
pour russir raliser notre projet. Il sagissait entre autre titre de rappel:
-
Ladaptation de notre application existante grce des outils tels que le framework
Joshfire, WebORB ou encore BKRender
Soit crer une nouvelle application native pour le mobile ce qui dans notre cas ne
saurait tre envisageable
Soit enfin une adaptation de lIHM au format mobile sans utilisation des outils susnumrs.
Seule la troisime solution sera ici retenue pour les raisons suivantes :
-
La premire raison est celle de la scurit. En effet outils numrs ci-dessus, ne

proposent que des solutions en ligne et de plus procdent au dploiement sur des
serveurs par eux ddis. Ce qui rend donc cette solution non scurisante pour notre
application car il y a trop des risque de se faire attaquer par des programmes
malveillants ou pire mme se faire pirater.
La seconde raison est conomique. En effet, les deux premires solutions ci-dessus
demanderaient beaucoup plus de moyens financiers que la troisime. Pour la premire,
les solutions en ligne qui y sont numrs sont toutes payantes avec des prix allant de
500 (soit 328.000 Frs CFA pour les moins scurises avec des accs limits
lapplication) 25.000 (soit environ 16.400.000 Frs CFA pour les plus scuriss
avec des accs illimits lapplication). La seconde solution qui consistait
dvelopper une application native quant elle sera coteuse tant donn que la plus
part des SGBD (Systme de Gestion de Base de Donnes : logiciel permettant la
cration et ladministration des bases de donnes) pour mobiles sont assez coteux en
terme de prix.
La troisime raison est celle li au temps. En effet vu le temps qui a t impartit pour
la ralisation de ce projet et du fait que lERP web dans sa version pour PC existe dj
il ne serait point judicieux de dvelopper ce progiciel ds le dpart si ce nest lui
trouver une adaptation sur les mobile soit rinventer son interface utilisateur.
La quatrime raison qui est lie aux ressources humaines est peu prs identique la
prcdente mais avec une vue cette fois-ci orient vers la ressource humaine. Ceci est
une vritable contrainte car celle-ci nest compose que de deux personnes.
La solution retenue pour ce projet est donc de lIHM au format mobile sans utiliser les
solutions payantes ci-dessus cites. Pour ce faire nous allons utiliser la version mobile de la
technologie qui a aide mettre en place My e-Ssame ! (Ext JS) : Sencha Touch.
1. Pourquoi rutiliser les sources de lapplication de dpart ?

My e-Ssame ! est un ERP qui a t conu avec des technologies orientes objets prsente
comme toute application oriente objet lavantage de la rutilisation des sources de
lapplication.
37
2. Pourquoi sencha touch ?

Le choix de la technologie Sencha Touch est trs simple. En effet, le framework JavaScript
Sencha Touch nest quune version rduite du framework Ext JS (toujours de la technologie
JavaScript) sur lequel est construite lIHM de My e-Ssame. Ceci permettrait par consquent
de conserver sinon presque toute larchitecture de My e-Ssame ! sur My e-Ssame mobile :
-
Les traitements ct contrleur resteront quasi identiques

Les traitements cot base de donnes le seront galement
Seuls les traitements au niveau de lIHM pourront tre rviss du fait de
lenvironnement compact des mobiles et de leurs ressources limits.
Cette technologie prsente galement comme avantage la conservation de presque toutes les
fonctionnalits dExt JS ainsi que dun trs beau graphisme et une bonne adaptation aux
Smartphones.
3. Prsentation de sencha touch

Sencha Touch est un framework JavaScript spcialement conu pour dvelopper des
applications web mobiles. Ce produit est dvelopp par l'entreprise Sencha, anciennement
nomme ExtJS.
La particularit de ce framework est son dveloppement presque exclusif en JavaScript.
Sencha touch est compatible avec les plateformes Android, iOS (iPhone, iPod touch, iPad)
ainsi que le tout dernier BlackBerry 6. Il est en particulier adapt toutes les rsolutions
d'cran. Il ne sexcute cependant que sur les navigateurs webkit. Le framework est
disponible en version 1.1 (sortie le 24 mars 2011), sous une licence open source GPL3 et une
licence commerciale gratuite.
Dans cet article, vous allez apprendre comment utiliser Sencha Touch pour construire des
"WebApps" riches et performantes pour votre mobile. Je reprendrai mon application Agenda
prcdemment dveloppe avec jQTouch et jQuery Mobile.
Ce framework peut tre utilis pour le dveloppement des applications web qui ressembleront
et se comporteront comme des applications natives sur les mobiles compatibles.
a) Petit historique
Comme nous lavons vu plus haut Sencha Touch qui est une combinaison des projets
jQTouch et Raphal est un produit de Sencha qui a t ralise aprs le projet Ext JS clbre
38
framework qui lui-mme est un mlange des technologies XHTML*, DOM* et AJAX. Dans
sa premire version (version 0.90 bta) sortie le 17 juillet 2010, Sencha Touch nest
compatible quavec les iOS et Android; puis en novembre 2010, Sencha Touch passe sa
premire version stable (1.0).
Avec sa toute dernire version 1.1 (du 24 mars 2011), Sencha Touch supporte dsormais aussi
les BlackBerry OS partir de la version 6.
Sencha Touch, est principalement bas sur WebKit*, ne peut supporter les navigateurs bass
sur WebKit, comme Google Chrome et Safari. Support pour d'autres navigateurs ou moteur
du navigateur Web n'est pas aujourdhui complte.
b) Architecture Sencha Touch

Sencha Touch comprend une interface utilisateur graphique GUI base sur des contrles ou
des "composants" pour une utilisation dans des applications web mobiles. Ces composants
sont hautement optimiss pour la saisie tactile. Voici une liste exhaustive de ces composants:
-
les boutons
les lments du formulaire
les listes
les barres d'outils et menus
les onglets dplaables
les barres d'outils de pieds de page
le composant de carte pour Google Map
De plus, Sencha Touch gre galement un ensemble d'vnements des environnements

tactiles: le dfilement, le tap (quivalent du clic), le double tap (quivalent du double clic),
dfilement, le pinch.
Sencha Touch tant framework JavaScript se compose de deux bibliothques UI et aussi des
bibliothques de donnes. Grce l'utilisation des bibliothques de donnes de l'application
Web mobile peut obtenir des donnes de serveur. Sencha Touch a des bibliothques de
donnes pour soutenir les standards du web pour l'change de donnes avec les serveurs telles
que l'Ajax* et JSONP*. Il supporte galement YQL*. Grace l'utilisation de ces technologies,
les donnes peuvent tre lies des composants visuels tels que les listes pour afficher les
donnes des serveurs sur l'IHM.
Les applications web mobile ncessitent une connexion au rseau pour servir les donnes aux
utilisateurs. Cependant, certains utilisateurs aimeraient utiliser les applications, mme s'ils ne
39
sont pas connects, et de synchroniser ces donnes avec les serveurs lorsqu'ils se
reconnectent. La capacit d'une application web de fonctionner en mode dconnect est une
caractristique importante du HTML5.
Le CacheManifest est utiliser par HTML 5 pour faire un rcuprer les donnes utiliser hors
connexion lorsque l'application est toujours connecte au serveur. Sencha Touch utilise cette
caractristique de l'HTML 5 pour faire de bonne application web en mode hors-ligne.
4. Les autres outils utiliss

a) MS Project
Microsoft Project (ou MS Project ou MSP) est un logiciel de gestion de projets dit par
Microsoft. Il permet aux chefs de projet et aux planificateurs de planifier et piloter les projets,
de grer les ressources et le budget, ainsi que d'analyser et communiquer les donnes des
projets.
Utilis aujourd'hui (2011) par plus de 20 millions de chefs de projet, Microsoft Project est le
logiciel de gestion de projet le plus utilis au monde. Plus de 10 000 entreprises ont aussi
dploy la version serveur de Microsoft Project, nomme Microsoft Project Server.
Fonctionnalits
Planification et pilotage des projets
Microsoft Project permet la planification des projets, cest--dire la cration dun plan. Il
permet la cration de tches et de jalons, leur hirarchisation, et de dfinir des liens entre les
tches. Une estimation de la dure et de la charge (ou travail) ncessaire la ralisation de
chaque tche peut ensuite tre ralise.
Des modles peuvent tre crs afin de proposer des plans types aux utilisateurs (par exemple,
si les projets ncessitent de suivre une mthodologie ou un processus prcis.
Microsoft Project propose diffrentes reprsentations graphiques du projet : diagramme de
Gantt, rseau des tches et bien dautres.
Les possibilits de pilotage des projets sont nombreuses : dfinition de la planification initiale
(cest--dire lenregistrement dune photographie de rfrence du plan de projet), saisie de
lavancement des tches, replanification.
Le chef de projet peut mettre jour lavancement du projet :
-
via la saisie dun pourcentage davancement (dlai ou charge) ;

via la mise jour de la dure relle et de la dure restante ;
40
via la mise jour du travail rel (ralis) et du travail restant (reste faire).
Gestion des ressources
Microsoft Project permet la gestion des ressources de chaque projet, cest--dire la cration de
lquipe projet puis laffectation des ressources dfinies.
Il est possible de crer diffrents types de ressources :
-
ressources travail , qui lon peut attribuer des charges de travail : individus, mais
aussi des machines-outils par exemple ;
ressources matrielles , correspondant des matriaux (ressources consommables
avec des units) : bton (m3), cble (km)...
ressources cot (apparue depuis la version 2007 de Microsoft Project), pour
pouvoir associer aux tches du projet des postes de dpense : frais de dplacement,
achat de prestation au forfait.
Les ressources, en particulier celles de type travail, peuvent tre types comme gnriques :
elles correspondent alors des profils de comptences.
Chaque ressource peut tre ensuite affecte aux tches du projet. Via le planificateur dquipe,
nouveaut de la version 2010, il est possible de grer un plan de capacit des ressources et
dallouer ainsi les tches du projet aux ressources.
Lorsque les ressources ont t affectes, Microsoft Project rend possible lanalyse des plans
de charge des ressources affectes, via par exemple laffichage dun graphe des ressources.
Une fonctionnalit, laudit des ressources, peut tre utilise pour rsoudre les problmes de
sur utilisation des ressources dtects, en rorganisation les tches du projet.
Gestion des cots

Chaque ressource peut avoir un cot : taux journalier pour une ressource de type travail, cot
unitaire pour une ressource matrielle. Ainsi, en fonction des affectations des ressources
ralises sur les tches du projet et de cots fixes pouvant tre dfinis pour chaque tche,
Microsoft Project calcule le cot du projet. Pour les individus, il est galement possible de
grer les heures supplmentaires.
Depuis la version 2007, des ressources budgtaires permettent par ailleurs de dfinir le budget
initial du projet, qui peut tre compar au cot du projet calcul.
Analyse et communication des informations du projet

Microsoft Project offre une palette de possibilits danalyse des donnes du projet et propose
de nombreux rapports. Il est mme possible dexporter les informations du projet dans
Microsoft Excel ou Microsoft Visio pour analyser le travail et les cots du projet en fonction
41
de diffrents axes danalyse (tches, ressources, affectation, temps), via des tableaux,
graphiques et diagrammes croiss dynamiques.
Microsoft Project permet de communiquer les informations des projets : copie du diagramme
de Gantt, impression et surtout, depuis la version 2010, possibilit de crer une frise
chronologique exportable vers Microsoft PowerPoint ou dans un message lectronique.
b) TortoiseSVN
TortoiseSVN est un des logiciels client de SVN les plus populaires.
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.
c) Visual Studio 2010

Microsoft Visual Studio est une suite de logiciels de dveloppement pour Windows conue
par Microsoft. La dernire version s'appelle Visual Studio 2010.
Visual Studio est un ensemble complet d'outils de dveloppement permettant de gnrer des
applications Web ASP.NET, des Services Web XML, des applications bureautiques et des
applications mobiles. Visual Basic, Visual C++, Visual C# et Visual J# utilisent tous le mme
environnement de dveloppement intgr (IDE, Integrated Development Environment), qui
leur permet de partager des outils et facilite la cration de solutions faisant appel plusieurs
langages. Par ailleurs, ces langages permettent de mieux tirer parti des fonctionnalits du
Framework .NET, qui fournit un accs des technologies cls simplifiant le dveloppement
d'applications Web ASP et de Services Web XML grce Visual Web Developer.
42
d) MobiOne Studio
MobiOne est un logiciel de simulation mobile complet et studio design pour applications
mobiles, sous Windows.
Il est dsormais possible de tester le rendu d'un site mobile ou d'une application mobile en
cours de dveloppement sur Windows grce ce logiciel.
La suite MobiOne permet de simuler compltement un iPhone, en utilisant votre connexion
Internet pour naviguer sur le web. Avec votre souris, un pointeur simule votre doigt, et en
utilisant la touche ALT, vous pourrez mme faire du multi-touch pour zoomer vos pages
Plusieurs outils sont intgrs au logiciel de simulation:
-
Inspecteur DOM
Monitoring des ressources utilises
Profiler JavaScript
Debugger
Gestion des donnes stockes sur l'iPhone
Il est aussi possible de simuler un Palm, et prochainement, ce sera le tour dAndroid et

BlackBerry Storm.
Un autre outil trs intressant, surtout pour les designers d'applications iPhone, est aussi
intgr la suite: MobiOne Visual Designer.
A l'aide de cet logiciel, vous pourrez crer facilement avec du Drag and Drop vos interfaces
iPhone sur Windows.
43
VI.
44
IMPLEMENTATION
Cette phase du travail qui ma t confi reste plus base sur la conception de lIHM pour les
clients web de lERP mobile My e-Ssame !.
En effet, tant donn la solution pour laquelle jai effectu le choix en phase conceptuelle,
pour les raisons qui y ont t mentionnes cette tape du travail ne sera en majeur partie
effectu que sur linterface graphique. Comme avec lERP My e-Ssame !, lIHM sera base
sur la technologie JavaScript pour des raisons galement mentionnes en phase conceptuelle.
Par ailleurs pour des raisons de convivialit des utilisateurs, particulirement ceux utilisant
des Smartphones cest le framework Sencha Touch (dans sa version 1.1.0 faudrait galement
noter que la version 2.0.0 est dj disponible depuis le dbut du mois doctobre celle-ci
apporte beaucoup de correction la version prcdente principalement la rotation de lcran)
qui a retenu toute mon attention.
Cependant vu le grand nombre de restrictions de la technologie mobile, nous allons devoir
apporter certaines petites retouches aux contrleurs de donne pour formater le retour des
donnes vers le client
1. Structure des fichiers dun cran

Un cran de notre ERP mobile comme ceux de son an est constitu dun minimum de deux
principaux fichiers :
-
Un fichier JavaScript (portant lextension .js) dans lequel est dessin lcran dans toute
sa forme avec tous les composants (formulaire, liste, panel et bien dautres) dont on a
besoin pour celui-ci.
Un fichier ASP (portant lextension .aspx ou un fichier HTML) dans lequel se fait le
rendu du code JavaScript qui aura t dfini dans le fichier JavaScript correspondant
lcran afficher.
N.B : A titre de rappel ces pages ne pourront tre visualiss qu partir des navigateurs
Google Chrome et Safari ou alors grce des mulateurs tels MobiOne ou Android.
2. Ralisation dun cran

La page html ou ASP
Dans cette page, au niveau de la balise Head, doivent tre rfrencs deux fichiers du
framework : "sencha-touch.js" et "sencha-touch.css". Trois autres fichiers CSS sont fournis
avec le framework: "apple", "android" et "bb6" (pour BlackBerry) qu'on peut utiliser pour
remplacer le thme "sencha-touch". Par ailleurs, la dernire version du framework fourni un
script "autotheme.js" qui permet de changer automatiquement de thme suivant la plateforme.
Le reste du document, Body, reste vide. A prsent, passons la cration des pages de
l'application avec les composants Sencha.
45
Le fichier JavaScript
On commence par initialiser l'application :
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
//cration du panel et des composants
}
});
La fonction Ext.setup organise l'application. Un certain nombre de paramtres peuvent tre

spcifis comme l'cran de dmarrage ou l'icne, et dans le paramtre onReady, on spcifie la
fonction qui sera excute quand le DOM est prt. C'est au sein de cette fonction qu'on dfinit
les lments qui seront affichs par le framework.
Voici comment on dfinit un composant Sencha Touch :
varnomObject = new Ext.nomComponent ({

/*definitionObject*/
});
Parmi ces composants, on peut crer un panel avec Ext.Panel :
var panel = new Ext.Panel({

fullscreen: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Identification'
}],
46
items: [{
html: '<h1>Bienvenue</h1>'
}]
});
L'objet docketItems permet d'organiser des lments en "dock" et est utilis pour afficher les
barres d'outils. Ce qu'il faut savoir, c'est que Sencha Touch permet d'ajouter des composants
de deux manires diffrentes : soit "anonymement" avec le paramtre xtype, soit en crant
l'objet du composant correspondant.
Plus gnralement, le paramtre items peut contenir n'importe quels composants du
framework. Pour les organiser, un paramtre doit tre configur : layout. Il existe plusieurs
types de layout : 'auto', 'card', 'fit', 'hbox', 'vbox'. D'autre part, on peut galement organiser
des panels en onglets avec Ext.TabPanel, ou en carrousel avec Ext.Carousel. Petite
prcision les composants pouvant contenir d'autres composants, comme Panel ou TabPanel,
hritent d'un conteneur plus gnral : Ext.Container.
Figure 17 Rendu de la page d'identification de My e-Ssame Mobile sur MobiOne
Figure 18 Rendu de l'cran de recherche des employs sous Chrome
47
Figure 19 Rendu de l'cran rsultat de la recherche des employs
Figure 20 Rendu de l'cran prsentant une fiche d'un employ
48
VII.
49
CONCLUSION
My e-Ssame ! est un ERP assez complexe (vu quil regroupe plusieurs mtiers dune grande
entreprise) et qui ncessite une comprhension globale afin de dvelopper correctement les
tches. En effet il arrive frquemment quil faille adopter une vision gnrique ce qui entraine
gnralement de retoucher des modules autres que celui sur lequel on travaille. Pour cela le
dbut du stage na pas t toujours vident aux vues du nombre de nouveaux outils et de
technologies quil a t ncessaire dapprendre utiliser et comprendre. Cependant les
tches qui mont t assignes ont t accomplies dans lensemble.
My e-Ssame mobile quant lui reste un mini ERP qui pourra aider dans lavenir le
dcisionnel de lentreprise consulter le pouls de lentreprise et la de prendre les dcisions
quils jugent opportunes. Etant donn la sensibilit de certaines donnes de lentreprise, cet
ERP reste un outil consultatif de celles-ci.
Ce stage ma permis de me familiariser avec les rgles techniques exigeantes dans des
dveloppements complexes comme ceux qui sont effectus sur My e-Ssame ! (et appliqus
sur My e-Ssame mobile) et qui ncessitent de bonnes connaissances avant de pouvoir
effectuer un travail efficace.
Enfin, mis part lapport technique, ce stage ma ouvert au travail dquipe.
50
ANNEXES
51
Annexe 1
Codes de cration de lcran dauthentification
Code HTML
<!doctypehtml>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<title>Identification</title>
<linkrel="stylesheet"href="../Scripts/sencha-touch/resources/css/senchatouch.css"type="text/css">
<scripttype="text/javascript"src="../Scripts/sencha-touch/sencha-touch.js"></script>
<scripttype="text/javascript"src="../Scripts/ressources/login.js"></script>
<style type="text/css">
.demos-loading {
background: rgba(0,0,0,.3)url(Scripts/senchatouch/resources/themes/images/default/loading.gif)centercenterno-repeat;
display: block;
width: 10em;
height: 10em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em;
margin-top: -5em;
-webkit-border-radius: .5em;
color: #fff;
text-shadow: #00001px1px;
text-align: center;
padding-top: 8em;
font-weight: bold;
}
</style>
</head>
<body></body>
</html>
Code JavaScript
Ext.setup({
icon: 'icon.png',
glossOnIcon: true,
onReady: function () {
var form;
Ext.regModel('User', {
fields: [
{ name: 'identifiant', type: 'string' },
{ name: 'mot_de_passe', type: 'password' },
{ name: 'langue', type: 'string' }
]
52
});
Ext.regModel('Ranks', {
fields: [
{ name: 'rank', type: 'string' },
{ name: 'title', type: 'string' }
]
});
var ranksStore = new Ext.data.JsonStore({
data: [
{ rank: 'francais', title: 'Francais' },
{ rank: 'anglais', title: 'Anglais' }
],
model: 'Ranks',
autoLoad: true,
autoDestroy: true
});
var formBase = {
scroll: 'vertical',
url: '',
standardSubmit: true,
items: [{
xtype: 'fieldset',
title: 'Identification',
instructions: 'Entrez votre identifiant et mot de passe',
defaults: {
// required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name: 'name',
label: 'identifiant',
required: true
}, {
xtype: 'passwordfield',
name: 'password',
label: 'mot de passe',
required: true
}, {
xtype: 'selectfield',
name: 'rank',
label: 'langue',
valueField: 'rank',
displayField: 'title',
required: false,
store: ranksStore
},
]
}
],
listeners: {
submit: function (form, result) {
console.log('succes', Ext.toArray(arguments));
},
exception: function (form, result) {
console.log('echec', Ext.toArray(arguments));
}
53
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'connexion',
ui: 'confirm',
id: 'connexion',
centered: true,
handler: function () {
if (formBase.user) {
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg: { message: 'connexion en cours', cls: 'chargement' }
});
window.location = 'Views/solution.aspx';
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 280,
width: 370
});
}
form = newExt.form.FormPanel(formBase);
form.show();
}
});
54
Annexe 2
Code de lcran derecherchedes employs
Code HTML
Il reste pareil au prcdent seule la ligne

<script type="text/javascript"src="../Scripts/ressources/login.js.js"></script>change
pour devenir
<script
type="text/javascript"src="../Scripts/ressources/recherche_employe/recherche_employe.j
s"></script>
Code JavaScript
Ext.setup({
icon: 'icon.png',
glossOnIcon: true,
onReady: function() {
var form;
var tapHandler = function (btn, evt) {
alert("Bouton '" + btn.text + "' presse.");
}
var boutonstoolbar = [
{
iconMask: true,
ui: 'back',
iconCls: 'left',
javascript: history.back();
}
},
{
iconMask: true,
ui: 'forward',
iconCls: 'right',
javascript: history.forward();
}
},
{ xtype: 'spacer' },
{ xtype: 'spacer' },
{
iconMask: true,
iconAlign: 'right',
ui: 'round',
iconCls: 'home',
handler: function() {
window.location = 'solution.aspx';
}
55
},
]
Ext.regModel('user', {
fields: [
{name:
{name:
{name:
{name:
]
});
'matriculeemploye',
type: 'string'},
'nomemploye', type: 'string'},
'numcontribuable',
type: 'string'},
'service',
type: 'string'}
Ext.regModel('entite_administratives', {
fields: [
{name: 'value',
type: 'string'},
{name: 'title',
type: 'string'}
]
});
var entite_administrativesStore = new Ext.data.JsonStore({
model: 'entite_administratives',
autoLoad :true,
autoDestroy :true,
proxy: {
type: 'ajax',
url: 'http://testserv/GA/RechercherEntiteAdmin',
reader: {
type: 'json',
root: 'entite_administratives'
}
}
});
var form_demande_stage = {
scroll: 'vertical',
url
: '',
standardSubmit :true,
items: [{
xtype: 'fieldset',
title: 'Critres de recherche',
// instructions: 'Renseignez tous les champs pour rechercher des employs',
defaults: {
labelAlign: 'left',
labelWidth: '45%'
},
items: [
{
xtype: 'textfield',
name :'matriculeemploye',
id :'matriculeemploye',
label: 'Matricule'
},
{
xtype: 'textfield',
name :'nomemploye',
id :'nomemploye',
label: 'Nom'
},
{
xtype: 'textfield',
name :'numcontribuable',
56
id :'numcontribuable',
label: 'N Contribuable'
},
{
xtype
label
store
displayField
valueField
name
itemType
: 'multiselectfield',
: 'Service',
: entite_administrativesStore,
:'title',
: 'value',
: 'service',
: 'picker'
}
]
}
],
listeners : {
submit :function(form, result){
console.log('succes', Ext.toArray(arguments));
},
exception :function(form, result){
console.log('echec', Ext.toArray(arguments));
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: boutonstoolbar
},
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Rechercher',
ui: 'confirm',
id: 'btn_afficher',
centered: true,
if(form_demande_stage.user){
// form.updateRecord(form_demande_stage.user, true);
}
form.submit({
waitMsg : {message:'chargement', cls : 'loading'}
});
}
},
{
text: 'Annuler',
ui: 'cancel',
id: 'btn_annuler',
centered: true,
form.reset();
}
}
]
}
57
]
};
if (Ext.is.Phone) {
form_demande_stage.fullscreen = true;
} else {
Ext.apply(form_demande_stage, {
autoRender: true,
floating: true,
modal: true,
centered: true,
height: 300,
width: 410
});
}
form = newExt.form.FormPanel(form_demande_stage);
form.show();
}
});
58
Annexe 3
Code de lcran du rsultat de la recherche des employs
Code HTML
Il reste pareil au premier seule la ligne

<script type="text/javascript"src="../Scripts/ressources/login.js.js"></script>change
pour devenir
<scripttype="text/javascript"src="../Scripts/ressources/liste_employe/liste_employe.js
"></script>
Code JavaScript
Listemploye = new Ext.Application({

name: "Listemploye",
launch: function () {
Ext.regModel('employe', {
fields: ['employeid', 'codeemploye', 'nomemploye', 'matricule',
'datecreationoemploye', 'effectifmaximal', 'statutemploye']
});
var ListemployeListStore = new Ext.data.Store({
fields: ['adresseemploye', 'adresseorigineexpatrie', 'agenceid', 'bpemploye',
'bporigineexp', 'civiliteid'
, 'cledipeemploye', 'clenumcontribuable', 'clenumsecsocial', 'cyclepaieemploye',
'dateacquisitionvisa', 'dateeffectiveemploye'
, 'dateembauche', 'dateexpirationvisa', 'datefinexpatriation', 'datenaisemploye',
'debutnumcontribuable'
, 'debutnumsecsocial', 'emailemploye', 'employeid', 'etatemploye', 'ethnieemploye'
, 'horairemensuel', 'indemniterapatriement', 'libagence', 'libville',
'lieunaisemploye'
, 'lignedipeemploye', 'matricule', 'methodepayement', 'nationaliteemploye',
'nbremaxperchg'
, 'nbreprevuexpatrie', 'nomconjoint', 'nomemploye', 'nouveldateretraite',
'numcontribuable', 'numerodipeemploye'
, 'numpermisconduire', 'numpermisejour', 'numpermitravail', 'numsecsocial',
'photoemploye'
, 'prenomemploye', 'primeexpatriation', 'prorogerexpatriation',
'prorogerretraite', 'salairebase'
, 'sexeemploye', 'signatureemploye', 'statutresidenceexp', 'sitmatrimonialid',
'telemploye', 'typeemploye'
, 'verou', 'villeorigineexpatrie', 'numpassport', 'libcivilite',
'libsitmatrimonial', 'posetid', 'libposte']
, autoLoad: true
, proxy: {
type: 'scripttag'
, url: 'http://testserv/GA/Rechercheeremploye'
, id: 'employe'
, extraParams: {
format: 'json'
}
, reader: {
type: 'json',
root: 'employe',
59
totalProperty: 'total_employes',
successProperty: 'success'
}
}
});
form_fiche_employe = new Ext.form.FormPanel({
id: 'form_fiche_employe',
scroll: 'vertical',
url: '',
items: [
{
xtype: 'fieldset',
title: 'employe',
defaults: {
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name: 'codeemploye',
id: 'codeemploye',
label: 'Refrence',
listeners: {
afterrender: function (ele) {
ele.fieldEl.dom.readOnly = true;
}
}
},
{
xtype: 'textfield',
name: 'nomemploye',
id: 'nomemploye',
label: 'Libelle',
listeners: {
}
}
},
{
xtype: 'textfield',
name: 'matricule',
id: 'matricule',
label: 'employe parent',
listeners: {
}
}
},
{
xtype: 'textfield',
name: 'datecreationoemploye',
id: 'datecreationoemploye',
label: 'Date cration',
listeners: {
}
}
60
},
{
xtype: 'numberfield',
name: 'effectifmaximal',
id: 'effectifmaximal',
label: 'Effectif maximal',
listeners: {
}
}
},
{
xtype: 'textfield',
name: 'statutemploye',
id: 'statutemploye',
label: 'Statut',
listeners: {
}
}
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
items: [{
ui: 'back',
iconMask: true,
iconCls: 'arrow_left',
badgeText: 'liste',
Listemploye.Viewport.setActiveItem('disclosurelist', { type: 'slide', direction:
'right' });
}
}]
}
]
});
if (Ext.is.Phone) {
form_fiche_employe.fullscreen = true;
} else {
Ext.apply(form_fiche_employe, {
autoRender: true,
floating: true,
modal: true,
centered: true,
height: 300,
width: 420
});
}
Listemploye.listPanel = new Ext.List({

id: 'disclosurelist',
store: ListemployeListStore,
itemTpl: '<div class="employe">{codeemploye} {nomemploye}</div>',
61
grouped: true,
emptyText: 'Pas de employe',
onItemDisclosure: function (record, btn, index) {
Ext.getCmp('codeemploye').setValue(record.get('codeemploye'));
Ext.getCmp('nomemploye').setValue(record.get('nomemploye'));
Ext.getCmp('matricule').setValue(record.get('matricule'));
Ext.getCmp('effectifmaximal').setValue(record.get('effectifmaximal'));
Ext.getCmp('datecreationoemploye').setValue(record.get('datecreationoemploye'));
Ext.getCmp('statutemploye').setValue(record.get('statutemploye'));
Listemploye.Viewport.setActiveItem('form_fiche_employe');
}
});
Listemploye.Viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [Listemploye.listPanel, form_fiche_employe],
dockedItems: [
{
xtype: 'toolbar',
items: [
{
ui: 'back',
iconMask: true,
iconCls: 'arrow_left',
var idForm = Listemploye.Viewport.getActiveItem().getId();
if (idForm == 'form_fiche_employe') {
Listemploye.Viewport.setActiveItem('disclosurelist', { type: 'slide', direction:
'right' });
} else {
javascript: history.back();
}
}
},
{
iconMask: true,
iconAlign: 'right',
iconCls: 'home',
window.location = 'solution.aspx';
}
}
]
},
{
xtype: 'toolbar',
dock: 'bottom',
items: []
}
]
});
}
});
62
Glossaire
Android est un systme d'exploitation open source pour Smartphones, PDA et terminaux
mobiles conu par Android, une entreprise rachete par Google, et annonc officiellement
le 5 novembre 2007. D'autres types d'appareils possdant ce systme d'exploitation existent,
par exemple des tlviseurs et des tablettes.
Ajax est un groupe de de technologies de dveloppement web utilises sur le client afin de
crer des applications web asynchrones. Avec Ajax, les applications web peuvent envoyer et
rcuprer les donnes d'un serveur de manire asynchrone (en arrire-plan) sans interfrer
avec l'affichage et le comportement de la page web existante.
Commiter : Anglicisme voulant signifier un enregistrement de la nouvelle version d'un

fichier sur un serveur central.
DOM est une recommandation du W3C qui dcrit une interface indpendante de tout langage
de programmation et de toute plate-forme, permettant des programmes informatiques et
des scripts d'accder ou de mettre jour le contenu, la structure ou le style de documents
XML. Le document peut ensuite tre trait et les rsultats de ces traitements peuvent tre
rincorpors dans le document tel qu'il sera prsent.
IHM : Linterface homme-machine, interaction humain-machine, intgration homme-systme

(IHS) ou interface personne-machine (IPM) dfinit, les moyens et outils mis en uvre, afin
qu'un humain puisse contrler et communiquer avec une machine. Les ingnieurs en ce
domaine tudient la faon dont les humains interagissent avec les ordinateurs ou entre eux
l'aide d'ordinateurs, ainsi que la faon de concevoir des systmes qui soient ergonomiques,
efficaces, faciles utiliser ou plus gnralement adapts leur contexte d'utilisation.
iOS : anciennement iPhone OS, est le systme d'exploitation mobile dvelopp par Apple
pour l'iPhone, l'iPod Touch, et l'iPad. Il est driv de Mac OS X dont il partage les fondations
(le kernel hybride XNU bas sur le micronoyau Mach, les services Unix et Cocoa, etc.).
ISO 9126 : cette norme dfinit un langage commun pour modliser les qualits d'un logiciel.
Le langage de description utilise des termes tels que "facteurs qualit" , "caractristiques,
"sous-caractristiques ,"mtriques" pour classer de faon arborescente et structure, sur la
63
base de dfinitions standardises, un vocable de plusieurs dizaines de proprits en "it"

(portabilit, maintenabilit, fiabilit, etc.)
JsonP est un format de donnes textuel, gnrique, driv de la notation des objets du langage
ECMAScript. Il permet de reprsenter de linformation structure. Cr par Douglas
Crockford
Smartphones : ordiphone, terminal de poche (TP) ou tlphone intelligent est un tlphone

mobile disposant aussi des fonctions d'un assistant numrique personnel. Il peut aussi fournir
les fonctionnalits d'agenda, de calendrier, de navigation sur le web, de consultation de
courrier lectronique, de messagerie instantane, de GPS.
Updater: Anglicisme voulant signifier une mise jour de la version d'un fichier situ sur un
serveur central.
WebKit: est une bibliothque logicielle permettant aux dveloppeurs d'intgrer facilement un
moteur de rendu de pages Web dans leurs logiciels. Elle est disponible sous licence BSD et
GNU LGPL. Originellement rserve au systme d'exploitation Mac OS X ( partir de la
version 10.3 Panther), elle a t porte vers Linux et Windows. WebKit intgrait un moteur
JavaScript qui portait le mme nom. Il a depuis t rcrit, le nouveau moteur s'appelle
dsormais SquirrelFish, beaucoup plus rapide que le prcdent.
Widget est une contraction des mots window et gadget. Il peut dsigner :
-
un composant d'interface graphique, un lment visuel d'une interface graphique

(bouton, ascenseur, liste droulante, etc.) ;
un widget interactif : un petit outil qui permet d'obtenir des informations (mto,
actualit, dictionnaire, carte routire, pense-bte en anglais post-it, traducteur etc.).
YQL(Yahoo! Query Language) est une sorte de langage SQL qui permet d'interroger, filtrer
et joindre des donnes entre des services Web. Avec YQL, applications s'excutent plus
rapidement avec moins de lignes de code et une plus petite empreinte de rseau.
XHTML: eXtensible HyperText Markup Language, est un langage de balisage servant

crire des pages pour le World Wide Web. Conu l'origine comme le successeur d'HTML,
XHTML se fonde sur la syntaxe dfinie par XML, plus rcente, mais plus exigeante que celle
dfinie par SGML sur laquelle repose HTML : il s'agit en effet de prsenter un contenu
64
affichable non seulement par les ordinateurs classiques, mais galement sans trop de
dgradation par des PDA bien moins puissants.
65
Bibliographie
Sencha Touch in Action, Jesus Garcia

www.evansdata.com
http://www.seocontest.fr/quels-sont-les-avantages-dun-site-mobile.html
http://www.journaldunet.com/developpeur/client-web/adapter-des-applications-dentreprise-aux-mobiles-0211.shtml
http://en.wikipedia.org/wiki/User:Sganta/Sencha_Touch_(mobile_app_framework)
http://en.wikipedia.org/wiki/Sencha_Touch
http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_Pho
neGap
http://www.technogadge.com/sencha-touch-open-source-html5-mobile-appframework/
http://www.stackoverflow.com/
66

Utilisation de La Technologie Sencha Touch Pour L'adaptation Des Ihm Au Format Mobile: Cas de L'erp My E-Sesame

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Utilisation de La Technologie Sencha Touch Pour L'adaptation Des Ihm Au Format Mobile: Cas de L'erp My E-Sesame

Transféré par

Droits d'auteur :

Formats disponibles

REPUBLIC OF CAMEROON

Peace - Work - Fatherland

THE UNIVERSITY OF DOUALA

UTILISATION DE LA TECHNOLOGIE SENCHA

UTILISATION DE LA TECHNOLOGIE SENCHA

Mes remerciements vont droit mon encadreur acadmique le Docteur AMOUGOU

Table des matires

LA STRUCTURE DACCUEIL ............................................................................................................... 9

ETAT DE LART ........................................................................................................................... 15

Importance de la question ........................................................................................................ 16

Etat de lart des ERP web mobiles ............................................................................................. 16

Quest-ce quune application web ?...................................................................................... 16

Architecture dune application web ...................................................................................... 17

Quest-ce quun ERP ? ........................................................................................................... 18

Quelques avantages et inconvnients dun ERP ................................................................... 19

Le Web pour les mobiles ....................................................................................................... 19

Les systmes dexploitation mobiles ..................................................................................... 20

Les Frameworks ..................................................................................................................... 22

Les protocoles de communication du mobile ........................................................................... 22

GPRS, 2,5G ............................................................................................................................. 23

Versioning dune application web en application pour mobile ............................................. 24

Adapter lapplication existante ................................................................................................. 24

Crer une nouvelle application ................................................................................................. 25

Quest-ce quune architecture ?................................................................................................ 28

Architecture de lERP web My e-Ssame ! ................................................................................ 28

Fonctionnalits de My e-Ssame ! ............................................................................................ 32

CHOIX TECHNOLOGIQUES ............................................................................................................. 36

Pourquoi rutiliser les sources de lapplication de dpart ? ..................................................... 37

Pourquoi sencha touch ? ........................................................................................................... 38

Prsentation de sencha touch ................................................................................................... 38

Petit historique ...................................................................................................................... 38

Architecture Sencha Touch ................................................................................................... 39

Les autres outils utiliss............................................................................................................. 40

Visual Studio 2010 ................................................................................................................. 42

MobiOne Studio .................................................................................................................... 43

Structure des fichiers dun cran .............................................................................................. 45

Ralisation dun cran ............................................................................................................... 45

Table des illustrations

FIGURE 1 REPRESENTATION INTERNATIONALE ET PERSPECTIVES .......................................................................................... 11

Dans le cadre de lobtention de la licence de Technologie en gnie rseau et

Lpoque de linformation mute activement vers une poque dinformation mobile.

Tableau 1 Fiche signaltique

553 000 Euros (359 450 000 Fcfa)

Johannesburg Afrique du Sud

Tel: + 27 11 608 2690

Administrateur Directeur Gnral

Figure 1 Reprsentation internationale et perspectives

Dans sa vision de leader de solutions informatiques conomiques, efficaces et personnalises

Laccompagnement des entreprises (PME/PMI, grands comptes) dans leur projets

Pour assurer et garantir la performance de ses ralisations, INTERFACE SA est structure en

Figure 2 Organigramme INTERFACE SA

2. Dpartement de Gnie Logiciel

Figure 3 Plan de localisation Interface SA

3. Etat de lart des ERP web mobiles

b) Architecture dune application web

Une application web a trois composants principaux :

Figure 4 Architecture d'une application web

Figure 5 Architecture daccs une application web

c) Quest-ce quun ERP ?

de manire modulaire et intgre au niveau des traitements offerts (les diffrents

Cela comble une lacune importante quapportait un puzzle dapplications htrognes et

d) Quelques avantages et inconvnients dun ERP

e) Le Web pour les mobiles