2. Les applications web
2.1. Définition :
Une application web est un logiciel applicatif,
hébergé sur un serveur et accessible via les navigateurs Internet
(Explorer, Mozilla Firefox, Safari...) ou sur un réseau intranet.
Contrairement à un logiciel classique, les applications web n'ont pas
besoin d'être installées sur les ordinateurs de leurs utilisateurs
: il leur suffit en effet de se connecter à l'application à
l'aide de leurs navigateurs favoris pour pouvoir y accéder. Leur but ?
Offrir une expérience à l'utilisateur et des
fonctionnalités équivalentes aux logiciels habituellement
installés sur les ordinateurs, en utilisant de technologies de
développement identiques à celles employées habituellement
dans la création des sites internet. [9]
La création de web apps demande la maitrise parfaite de
différents langages de codage, comme le HTML, le CSS, Javascript, PHP...
Le dynamisme et l'ergonomie des web apps tiennent dans le fait qu'elles
contiennent divers widgets qui permettent de les manipuler et d'envoyer de
nouvelles requêtes. En résumé, les web apps sont des pages
vivantes qui réagissent à vos sollicitations et vous
obéissent « au doigt et à l'oeil ». Cela
nécessite donc deux critères d'utilisation : simplicité et
efficacité !
2.2. Importance d'une Application web
Les applications web se déclinent sous de multiples
formes : jeux, moteurs de recherche, géolocalisation, messagerie,
logiciels professionnels... Elles présentent de nombreux atouts, que
nous allons vous détailler.
Les applications web offrent donc de nombreux avantages aux
utilisateurs : système ouvert et libre de droit, coûts de
développement réduits, compatibilité totale avec les
navigateurs, adaptation à tous les formats d'écrans, consultation
possible hors connexion, facilité du référencement et
excellent SEO, mises à jour immédiates ou encore
indépendance totale des apps stores.
L'avantage majeur des web apps utilisant par exemple des
langages modernes comme HTML 5 est qu'elles n'ont pas besoin d'utiliser
d'autres composants comme Google Gears, Adobe Flash Player ou Microsoft
Silverlight pour fonctionner. Elles peuvent afficher des vidéos et des
plages sonores, ou intégrer le drop and drag, ce qui les rend
consultables depuis n'importe quel terminal. De plus, leurs coûts de
développement sont très réduits et elles sont aussi
plus rapides à mettre en place. Enfin, elles ne cessent d'évoluer
et proposent sans cesse de nouvelles fonctionnalités. Par exemple, le
stockage des fichiers et la gestion du mode hors-ligne sont maintenant
possibles.
Par ailleurs, l'annonceur est indépendant
vis-à-vis de ses web apps et de son app store. En effet, il ne subit pas
le contrôle et la pression permanents des plateformes d'application comme
Appstore ou Android Market, et ne doit pas leur verser de commission
prohibitive.
Les applications sont donc désormais incontournables
pour toutes les entreprises, et permettent de s'imposer face à la
concurrence en offrant de nombreuses possibilités d'exploitation.
2.3. Avenirdes applications web
L'informatique et Internet étant totalement
incontournables de nos jours, tout le monde est amené à utiliser
des applications web au quotidien. Au travail, on communique par exemple via
intranet et utilise des web apps comme Outlook, des applications de paie, de
saisie de congés ou de pointage et de comptabilisation des horaires...
Sur internet, à la maison, onse divertis en jouant ou bien en achetant
en ligne grâce à ces mêmes applications web. Elles ne
cessent de se développer, aussi bien sur les ordinateurs de bureau que
sur les smartphones, et sont en pleine expansion. Grâce à des
langages de codage de plus en plus poussés, comme HTML5 cité plus
haut, les web apps ne cesseront d'évoluer, pour garantir toujours plus
de performances, de maniabilité et de plaisir.
2.4. Vision externe d'une application web
Lorsqu'un utilisateur souhaite « surfer » sur le web
afin d'accéder à un site web, il utilise un outil appelé
navigateur. Un navigateur est un outil permettant
d'accéder à des ressources sur le web. Les plus utilisés
à l'heure actuelle sont Google Chrome, Mozilla Firefox, Internet
Explorer, Safari et Opera.
Ce navigateur affiche un document d'accueil dans lequel une
fenêtre de pilotage permet la saisie de l'adresse web.
L'adresse web du serveur identifie le serveur web de façon
unique sur le web.
Elle est aussi appelée URL (Uniform Ressource
Locator).Du serveur. Le document affiché est appelé «
page ».[10]
2.5. Vision interne d'une application web
L'exécution d'une application web met donc en oeuvre un
certain nombre d'actionsinternes qui font intervenir :
· Des requêtes émises par
le client ;
· Des réponses fournies par le
serveur ;
· Un protocole de communication ;
· Un ensemble de pages.
2.6. Structure d'une Application web
Une application web est organisée autour de trois
composants : un client, un serveur et un réseau.
Généralement, ces applications manipulent des données
stockées dans des bases de données.
ü Le serveur web désigne tout
à la fois le serveur matériel (hardware) et le serveur
logiciel composé du système d'exploitation (compilateurs,
interpréteurs de code), des applications (Apache, Java, NodeJS) et des
données (les ressources).
ü Le réseau est composé
par l'interconnexion mondiale Internet et l'utilisation pour les applications
web du protocole HTTP.
ü Le client web désigne tout
à la fois le client matériel (hardware) et le client logiciel
à savoir le navigateur.
2.7. Le Web Statique
L'architecture client-serveur
Internet est l'exemple extrême d'architecture
client-serveur : chaque serveur est potentiellement accessible par des millions
de clients. On peut dire que le Web illustre de manière aiguë les
avantages de l'architecture client-serveur : chacun est libre de décider
de ce qu'il met en ligne, chacun possède en permanence le droit
d'accéder à un volume de données plus d'un million de fois
supérieur à ses capacités de stockage personnelles.
Sur le web,
ü Le serveur s'appelle « serveur internet ». Le
programme le plus utilisé est Apache.
ü Le client s'appelle navigateur, (ou bien browser, ou
butineur). Les programmes les plus utilisés sont Google Chrome et
Firefox, puis Opera de fois aussi Internet Explore.
2.8. Le web dynamique
Le Web que nous avons décrit jusqu'ici est purement
statique : chaque adresse correspond à une page, et chaque page est un
fichier qui s'affiche de manière univoque sur votre navigateur. Avec le
web dynamique, nous allons avoir des pages qui pour une même adresse
peuvent prendre des formes différentes selon les actions de
l'utilisateur.
Pour obtenir une page changeante, nous disposons de deux
techniques :
ü Soit c'est le serveur qui construit une nouvelle page,
qu'il envoie au client (scripts côté serveur)
ü Soit le client reçoit une page fixe, et il
modifie cette page (scripts côté client)
Accès aux bases de données
MySQL est un SGBD (Système de Gestion de Base de
Données), c'est-à-dire un programme qui assure la
cohérence, le stockage et l'interrogation des données dans une
base de données.
Toutes les données importantes d'un site web doivent
être stockées dans une base de données.
Parmi les nombreux SGBD du marché, il faut en
connaître quelques-uns de nom :
ü Oracle est le SGBD historique. C'est
la solution la plus robuste, la solution commerciale la plus utilisée.
C'est aussi la plus chère.
ü MySQL est un SGBD relativement simple,
gratuit et très populaire. Il est recommandé pour les prototypes
et pour les applications simples.
ü PostgreSQL est un peu plus
compliqué que MySQL. Il est gratuit lui aussi. Il comporte un module
spatial (la cartouche spatiale) qui permet de manipuler de l'information
géographique. Le module spatial de PostgreSQL se nomme PostGIS.
2.9. Les Architectures des Applications
Une architecture est un modèle générique
et conceptuel qui se rapporte à un sujet et qui représente une
fonctionnalité, une structure, un positionnement, l'interrelation des
différents types d'éléments (hardware, logiciels,
infrastructure) qui la composent.
En règle générale, une application est
découpée en 3 niveaux (couches) d'abstraction :
· La couche présentation : c'est
la partie de l'application visible par les utilisateurs (d'interface
utilisateur). Composée de formulaire, de bouton, des images, etc.
· La couche métier : correspond
à la partie fonctionnelle de l'application, celle qui implémente
la logique, et qui décrit les opérations que l'application
opère sur les données, en fonction des requêtes d'un
utilisateur effectué au travers de la couche présentation.
· La couche accès aux données :
elle consiste en la partie gérant l'accès à la
base de données du système.
Il existe différentes architectures pour une
application :
1. Architecture 1-tiers
Dans une application un tiers les couches applicatives sont
liées et s'exécutent sur le même ordinateur. On ne parle
pas ici d'architecture client-serveur, mais d'informatique centralisée.
Dans ce contexte plusieurs utilisateurs se partagent des fichiers de
données stockés sur un serveur commun.
2. Architecture 2-tiers
L'architecture à deux niveaux (aussi appelée
architecture 2-tiers) caractérise les systèmes clients/serveurs
pour lesquels le client demande une ressource et le serveur la lui fournit
directement, en utilisant ses propres ressources. Cela signifie que le serveur
ne fait pas appel à une autre application afin de fournir une partie du
service.
L'échange de messages transite à travers un
réseau reliant les deux machines (client et serveur), il met en oeuvre
des mécanismes relativement complexes qui sont, en
général, pris en charge par un middleware. L'architecture
2-tiers présente de nombreux avantages qui lui permettent de
présenter un bilan globalement positif : elle permet l'appropriation des
applications par l'utilisateur, l'utilisation d'une interface utilisateur riche
et elle introduit la notion d'interopérabilité.
Figure 2. I. Architecture
2-tiers
3. Architecture 3-tiers
L'architecture 3-tier aussi appelée architecture
à trois niveaux ou architecture a trois couches, est l'application
du modelé plus général qu'est le multi-tiers.
L'architecture logique est divisée en trois niveaux ou couches :
ü Couche de présentation :
La présentation de données correspond à l'affichage, la
restitution sur le poste de travail, le dialogue avec l'utilisateur ;
ü Couche de traitement : Le
traitement métier de données, correspond à la mise en
oeuvre des règles de gestion et de la logique applicative ;
ü Couche d'accès aux
données : L'accès aux données persistantes
correspond aux données qui sont destinées à être
conservées sur la durée, voire de manière
définitive
C'est une architecture basée sur l'environnement
client-serveur.
Voici comment se présente cette architecture
trois-tiers que nous avons utilisé dans notre travail.
Figure 3. I. Architecture
3-tiers
2.10. Quelques langages de réalisation des
Application Web
A. Le langage HTML (Hypertexte Markup
Langage)
C'est un langage de description permettant de structurer et
d'afficher différents objets surun écran (qu'on appellera
abusivement "page"). Ces objets peuvent être du texte, destableaux, des
images voire de la vidéo et des sons. Ils peuvent être aussi les
élémentsdevenus classiques des environnements graphiques,
à savoir les boutons, pop-listes, listesà ascenseurs,
boîtes de dialogue... Sur la plupart de ces objets, il est possible de
placerdes liens qui vont permettre de se connecter à d'autres pages. Ce
langage est donc à l'origineessentiellement statique. Sur le serveur, le
fichier HTML décrit une "scène" qui seraenvoyée à
la demande vers un client (le browser, logiciel de navigation
présent sur leposte de consultation). Ce client va décoder les
instructions HTML pour afficher la scènequi restera ensuite la
même ; seule une nouvelle requête vers le serveur sera à
même d'enmodifier l'apparence.[11]
B. Le langage JavaScript
Crééà l'origine par Netscape, ce langage
de programmation est conçu pour traiter localementdes
événements provoqués par le lecteur (par exemple, lorsque
le lecteur fait glisserla souris sur une zone de texte, ce dernier change de
couleur). C'est un langage interprété,c'est-à-dire que le
texte contenant le programme est analysé au fur et à mesure
parl'interprète, partie intégrante du browser, qui va
exécuter les instructions.Ce langage a fait l'objet d'une normalisation
sous le nom de ECMAScript.[12]
Depuis l'origine, il est possible de faire exécuter par
les serveurs des programmes dont lerésultat est une page Web.
Contrairement à ces programmes, les "JavaScripts" sont chargés
avec la page Web pour êtreexécutés sur le poste client par
le logiciel de navigation. Cette notion d'exécution locale est
importante. En effet, avec HTML le posteclient n'avait pas d'intelligence ; il
se bornait à afficher une page telle qu'elle était
décritedans le fichier provenant du serveur. Avec JavaScript, on
exécute localement un programmetéléchargé lui aussi
depuis le serveur ; ce programme est par définition uneentité
capable de prendre des décisions en fonction d'événements
survenant localement,une partie de l'intelligence résidant sur le poste
client.Les browsers intègrent donc un interpréteur qui
décode les instructions et les exécute aumoment opportun, soit
par exemple au chargement de la page dans le browser, soit àl'apparition
d'un événement particulier (clic sur un bouton, saisie d'une
valeur, mouvementde souris, etc.).
C. PHP
PHP est un langage de script HTML exécuté du
côté du serveur. Il veut dire « PHP : HyperText
Preprocessor ». Sa syntaxe est largement inspirée
du langage C, de Java et de Perl, avec desaméliorations
spécifiques. Le but du langage est d'écrire rapidement des pages
HTML dynamiques.
L'origine de PHP remonte à 1995 quand RasmusLerdorf a
créé PHP/FI, une librairie de scripts Perlutilisés pour la
publication de son CV sur son site personnel. Au fur et à mesure des
évolutions, lalibrairie a été portée en C et
agrémentée de nouvelles fonctionnalités pour créer
des pagesdynamiques simples pour le web et accéder à quelques
sources de données. PHP/FI signifiePersonal Home Page/Forms
Interpreter.[13]
PHP est un langage de programmation Orienté objet, qui
facilite aussi la connexion aux bases des données que l'on peut
gérer à partir des SGBD, il propose des différentes
manières de se connecter aux basses des donnes comme le PDO, MySQL qui
n'est plus utiliser actuellement qui est une ancienne version, on peut aussi
utiliser Mysqli pour la connexion.
2.11. PayPal
PayPal Intégral Évolution est une plateforme de
paiement permettant aux marchands de recevoir sur le site des paiements par
carte et par compte PayPal. Cette solution est hébergée par
PayPal. On n'ani donc à collecter ni à stocker d'informations
relatives aux cartes des acheteurs sur le site, ce qui contribue à la
conformité PCI.[14]
Intégral Évolution est le meilleur choix pour
les marchands qui préfèrent une solution où les
informations financières sont gérées par PayPal.Outre
Intégral Évolution, PayPal recommande de mettre un bouton PayPal
Express surle site. Le bouton apparaît beaucoup plus tôt dans le
flux de paiement et donne auxtitulaires de compte PayPal la possibilité
d'utiliser PayPal, augmentant ainsi le taux deconversion.
Si PayPal est la seule solution de paiement proposée
sur le site, les transactions traitées viaIntégral
Évolution peut bénéficier de la Protection des Marchands
PayPal. Cette protection couvre les paiements effectués par
l'intermédiaire du flux de paiement du site pour des objets vendus en
France comme à l'étranger. Ceux-ci peuvent être
payés à l'aide d'une carte ou d'un compte PayPal. Pour
bénéficier de la Protection des Marchands PayPal, l'objet
acheté doit être expédié à l'adresse que l'on
communiquée à PayPal.
Pour bénéficier de la Protection des Marchands
PayPal, on doit procéder à l'intégration en activant la
vérification instantanée de paiement. La vérification de
paiement est une fonction qui identifie les transactions à haut risque
et nous avertit pour que nous puissions reporter l'expédition ou la
livraison jusqu'à ce que le risque ait été
évalué par PayPal. Cette fonction est disponible pour tous les
marchands. Elle nous aide à réduire nos pertes et nous permet de
faire bénéficier les transactions de la Protection des
Marchands.
Lorsqu'une transaction est initiée, PayPal effectue une
évaluation supplémentaire du risque présenté par
l'acheteur. PayPal évalue toutes les transactions (Autorisations et
Ventes) de façon immédiate et identifie les transactions à
haut risque comme étant « En cours de vérification »,
et vous en êtes immédiatement averti. Vous ne devez pas envoyer
les biens ou, s'il s'agit d'un support électronique, que vous ne devez
pas autoriser l'accès au téléchargement tant que le
paiement est en cours de vérification. Les spécialistes de la
fraude PayPal étudient la transaction dans un délai de 24 heures
et vous indiquent s'il s'agit d'une transaction Terminée (validée
par la vérification de paiement) ou Annulée (rejetée par
la vérification de paiement).
Pour les transactions à risque, nous vous conseillons
de ne pas expédier les objets avant que la transaction ne soit
Terminée. Les paiements validés sont admissibles à la
Protection des
Marchands PayPal.
Pour intégrer Intégral Évolution à
votre site, identifiez un point du flux de paiement de votresite où vous
souhaitez placer un bouton sur lequel l'acheteur clique pour effectuer le
paiement.
L'intitulé du bouton doit être
Continuer, Payer ou un texte similaire et un
clic sur le boutondoit déclencher l'envoi d'un formulaire POST à
PayPal. Le clic sur ce bouton redirigeégalement le navigateur de
l'acheteur vers la page de paiement de PayPal, où il peut
procéderau paiement avec une carte ou son compte PayPal.
2.12. Orange Money
Orange Money est un « porte-monnaie électronique
» qui permet de transférer de l'argent, recevoir de l'argent, payer
des factures et des recharges téléphoniques, payer des
commerçants, et retirer de l'argent dans n'importe quel point de vente
Orange Money, le tout directement depuis le téléphone mobile.
Quel que soit l'opérateur mobile, la ligne mobile
permet d'ouvrir un compte Orange Money.Il suffit de disposer d'une ligne mobile
souscrite auprès d'un opérateur télécom
établi dans son pays.Dans le cas contraire, achetez une SIM Orange en
point de vente lors de l'inscription.
L'ouverture du compte Orange Money est immédiate.
Juste après la réception du SMS qui confirme l'ouverture du
compte, va permettred'effectuerla première transaction.
Conclusion
Dans cette partie nous avons présenté la
méthodologie, le language de modélisation, les applications web
et les outil ou technologie qui en compagne ses application.
| 
