CM APP-Mobile-ENSI3a-2015-16

18/01/2016
Application Web
le Web Mobile
Hubert Segond – Orange Labs ENSI 2015-16
Plan du cours
Introduction
Web mobile
OS mobile
Application native
WebApp
Développement applications mobiles
Application mobile hybride
2
1
18/01/2016
Introduction
Le Web mobile a depuis quelques années envahie
le quotidien de concepteur de sites web.
Aujourd'hui, smartphones et tablettes font partie
intégrante du parc de terminaux sur lesquels nous
consultons différents sites web avec plus ou
moins d’efficacité quand ces derniers ne
s’affichent pas correctement.
Le Web mobile requiert ainsi une conception et un
développement adapté pour pouvoir être efficace
sur les terminaux.
3
Web mobile
Le Web mobile a été initialement proposé pour la
productivité et la récupération d’information, tel que le
mail, calendrier, contacts, marchés boursiers et
informations météorologiques (souvent en technologie
Wap au départ).
La demande du public et la disponibilité d’outils de
développement ont conduit à une expansion rapide
dans d’autres domaines, comme les jeux mobiles, les
GPS, les opérations bancaires, applications médicales
et de divers domaines.
Le nombre de téléchargements d’applications mobiles
est actuellement en forte hausse.
4
2
18/01/2016
Statistiques
Systèmes d’exploitation mobiles 1/2
Il existe plusieurs systèmes d’exploitation mobiles
(OS) dont les plus répandus sont les suivants:
– Android (Google) qui anime un grand nombre de
smartphones tels que Samsung, HTC, LG,
Motorola…
– iOS (Apple) utilisé sur iPhone et iPad.
– Blackberry OS
– Firefox OS
– Windows Phone (Microsoft)
– Symbian (Nokia)
– Bada (Samsung)
6
3
18/01/2016
Systèmes d’exploitation mobiles 2/2
iOS, Android et Windows Phone représentent les
systèmes les plus courants avec chacun leurs propres
propriétés et interface utilisateur.
Windows Phone propose une interface similaire au PC
et Tablette et peut faciliter la prise en main pour un
néophyte.
BlackBerry OS se recentre sur l’offre entreprise
A chaque OS mobile correspond une technologie et un
« store » où les applications peuvent être téléchargées,
de manière gratuite ou payante.
7
Application native vs. Application web mobile
Deux principales directions:
– Application native
– ou Application Web mobile ou Web App.
Les applications natives sont téléchargées et
installées au cœur du système.
A l’inverse les Applications Web mobile sont
accessibles via le navigateur web de l’appareil et
nécessite aucune installation.
8
4
18/01/2016
Qu’est ce qu’une Application native ?
Une application native est une application dédiée à un
périphérique mobile (Smartphone, Tablette…).
Est installée directement sur l’appareil dès la
conception ou par la suite par Les utilisateurs par le
biais d’une boutique en ligne ou un store en ligne
comme l’App Store ou Google Play.
Des exemples d’applications natives avec la
messagerie, la vidéo (Camera), GPS (Waze ou Mappy)
etc…
Une partie des applications disponibles sont gratuites
tandis que d’autres sont payantes.
9
Qu’est ce qu’une Application Web Mobile ?
Une application web mobile (ou WebApp) est une
application utilisée via Internet et possédant des
fonctionnalités spécifiques pour les appareils mobiles.
Elles sont accessibles via le navigateur Web de
l’appareil mobile (Safari sur iPhone par exemple) et
n’ont pas besoin d’être téléchargés et installées sur
l’appareil pour fonctionner.
une WebApp est donc un site internet créé
spécialement pour les Smartphones.
10
5
18/01/2016
Comparaison entre Application native et WebApp
Principaux critères de comparaison entre Application
native et WebApp
–
–
–
–
–
–
Expérience utilisateur
Interface utilisateur
Fonctionnalités
Développement/coût
Mise à jour
Points forts / faiblesses
Le processus de développement et donc le coût vont
être impactant dans le choix.
L’expérience utilisateur est également différente entre
les deux approches.
11
Interface utilisateur
Peu de différence générale entre les deux, pour une expérience
utilisateur cohérente.
12
Application native (iPhone)
WebApp (Safari sur iPhone)
source Internet
source Internet
interne Orange
6
18/01/2016
Développement Applications natives
Chaque plate-forme de développement d'applications
mobiles (iOS, Android) nécessite son propre processus de
développement.
Chaque plate-forme de développement d'applications
mobiles possède son propre langage de programmation
natif: Java (Android), Objective-C (iOS), Visual C++
(Windows Phone), etc.
Les kits de développement de logiciels (SDK), les outils de
développement et des éléments d'interface utilisateur
standard (boutons, champs de saisie de texte, etc) sont
souvent fournis par le fabricant de la plate-forme.
13
Développement WebApps
Chaque navigateur possède ses propres
fonctionnalités et interprétation de certains codes.
Les applications Web mobiles sont écrites en
HTML5, CSS3, JavaScript côté client et au choix
du client ou du développeur côté serveur (par
exemple, PHP).
Pas de kits de développement de logiciels (SDK)
que les développeurs doivent absolument utiliser
pour créer une application web mobile.
14
7
18/01/2016
Coûts de développement
Une application native va être propre à un système
d’exploitation (selon le téléphone mobile).
Une application native pour iPhone n’est pas du tout faite
comme une application native pour Android ou Windows
Phone. Il faut d’ailleurs bien souvent reprendre toute la
partie “création” à zéro (ou presque). Le coût de
développement s’en fait donc ressentir.
De plus, les processus de soumission sur les stores étant
parfois longs, les mises à jour d’application peuvent être
longues.
Une Web App quant à elle fonctionne dans un navigateur
Internet, et peut donc théoriquement s’exécuter sur
n’importe quel téléphone disposant d’un navigateur. Sa
mise à jour se fait de manière transparente pour l’utilisateur.
15
Installation Applications natives
Doit être téléchargés pour ensuite être installée sur le
téléphone.
Une fois installée, fonctionne comme une application
autonome.
Les utilisateurs doivent télécharger et installer manuellement
les mises à jour.
Les stores des fabricants aident les utilisateurs à trouver
votre application
16
8
18/01/2016
Installation WebApp
Pas besoin d'installer un nouveau logiciel, elle fonctionne
via la navigateur de l’appareil.
Les mises à jour sont effectuées sur le serveur Web sans
intervention de l'utilisateur
Toutefois, il peut être nécessaire d’utiliser le bon navigateur
ou sa dernière version
17
Applications natives
Points forts
– S’exécute généralement plus rapidement.
– Les App Stores aident les utilisateurs à trouver des applications
natives.
– Le processus d'approbation des applications mis en place par
l’App Store peut contribuer à rassurer les utilisateurs sur la
qualité et la sécurité de l'application.
– Les outils, le soutien et la mise à disposition de bonnes pratiques
fournies par les fabricants de périphériques peuvent aider à
accélérer le développement.
Points faibles
– Généralement plus coûteuses à développer, surtout si le
développement porte sur de multiples appareils mobiles.
– Prendre en charge plusieurs plates-formes nécessite la gestion
de plusieurs codes et peut entraîner des coûts plus élevés en
matière de développement, de maintenance, de mise à
disposition des mises à jour.
– Les versions présentes sur les mobiles peuvent être différentes,
ce qui peut rendre la maintenance difficile et ne facilite pas le
support utilisateurs.
– Le processus d'approbation App Store peut retarder le
lancement de l'application ou d'empêcher la mise à disposition
de l'application pour les utilisateurs
18
9
18/01/2016
Web Apps
Points forts
– Base de code commune sur toutes les plateformes.
– Les utilisateurs n'ont pas à aller sur un store, ils utilisent l’application
depuis le navigateur web.
– Peut être lancée sous n'importe quelle forme et à n'importe quel
moment, aucun tiers (App Store) devant au préalable approuver
l'application.
Points faibles
– Ne peuvent pas toujours accéder à toutes les fonctionnalités de
l'appareil.
– Supporter plusieurs navigateurs Web mobiles peut se traduire par
des coûts plus élevés en matière de développement et de
maintenance.
– Difficulté pafois de trouver une application web mobile en raison de
l'absence d'un store centralisé
19
Expérience utilisateur 1/2
Une application native sera généralement plus
rapide et réactive qu’une Web App selon le
téléphone (iPhone vs, Android par exemple)
L’application native va également pouvoir
accéder aux fonctionnalités du téléphone :
répertoire, SMS, appareil photo, GPS…
Possible d’envoyer à l’utilisateur des
notifications (notifications Push, car
« poussées » depuis un serveur vers le
smartphone) pour communiquer des
informations diverses, ce que ne permet pas
globalement une Web App.
20
10
18/01/2016
Expérience utilisateur 2/2
La Web App s’exécute dans le navigateur du
téléphone, et il n’est pas toujours possible de masquer
les éléments de navigation (barre d’adresse en haut,
barre de navigation en bas par exemple).
Contrairement à une application native qui elle va
s’exécuter en plein écran.
La Web App a un avantage majeur pour la navigation de
l’utilisateur : il peut facilement passer d’un site internet à
la Web App, puis repartir sur un autre site internet, sans
avoir à quitter son navigateur.
Avantages de l’application native : une exécution en plein
écran, une réactivité et une rapidité plus agréable, accès
aux fonctionnalités du téléphone
Avantage de la Web App : continuité dans la navigation
de l’utilisateur.
21
Marketing et communication
Les applications sont maintenant des outils connus de
tous, et le public est habitué à en entendre parler, et à
en installer.
Il est donc simple dire que l’on est disponible sur
iPhone ou Android.
La WebApp quant à elle est moins connue du grand
public, et donc plus difficile à expliquer et marketer.
Le public peut ne pas comprendre et se mélanger
entre site internet et application, ne sachant pas
vraiment comment trouver cette web-application.
22
11
18/01/2016
En résumé
Que l’on décide de choisir une application native ou une WebApp, il
n’y a pas de miracles : elle ne marchera pas sur tous les téléphones du
marché.
Dans le cas de la WebApp, tous les navigateurs sont différents et
interprètent de manière différente, donc de petites différences peuvent
survenir. Les diverses tailles d’écran peuvent aussi réserver quelques
surprises.
Dans le cas des applications natives, les outils de développement
évoluent et deviennent plus puissants. Les applications qu’ils
permettent de créer demandent de plus en plus de ressources, et les
téléphones les plus anciens sont de plus en plus inexploitable.
Plutôt que de choisir entre WebApp et Application native il est
judicieux de propose les deux alternatives aux utilisateurs (ex
Facebook)
23
Développement Application Mobile 1/2
PhoneGap: est un framework open-source développé
par Adobe et basé sur Apache Cordova. Il permet de
créer des applications mobiles pour différentes
plateformes (Android, iOS, Windows Phone…) en
HTML, CSS et JavaScript.
AngularJS: est un framework JavaScript open-source
développé par Google. Il est fondé sur l’extension du
langage HTML par de nouvelles balises (tags) et
attributs pour aboutir à une définition déclarative des
pages web.
24
12
18/01/2016
Développement Application Mobile 2/2
ionic: est un open-source pour le développement de
l’application hybride. Construit sur angularjs et
Cordova, ionic fournit des outils et des services pour
le développement d’applications mobiles hybrides
utilisant les technologies web comme le HTML5, CSS.
Les applications peuvent être construits avec ces
technologies web et ensuite distribués par le biais des
stores d’applications natives
Cordova: est un framework open-source développé
par la Fondation Apache. Il permet de créer des
applications pour différentes plateformes (Android,
Firefox OS, iOS, Ubuntu, Windows 8…) en HTML, CSS
et JavaScript
25
Réalisation d’une application mobile
Analyse: Identifier les besoins des utilisateurs
potentiels de l’application mobile. Déterminer les
usages, les fonctionnalités pertinentes.
Modélisation: Définir de manière formelle et
exhaustive, chaque composant de l’application
mobile.
MOODLE MOBILE
Guillaume
Blot
26
[email protected]
13
18/01/2016
Exemple de réalisation avec WebIDE et émulateur
Firefox OS
WebIDE permet de créer, éditer, lancer et déboguer des
applications web en utilisant le Simulateur Firefox OS ou un
appareil sous Firefox OS.
Il permet également de connecter les outils de développement de
Firefox à certains navigateurs, dont : Firefox pour Android, Chrome
pour Android, et Safari dans iOS.
27
Exemple de réalisation avec HTML5, CSS3 et
JavaScript
HyperText Markup langage (HTML) est le socle de tout processus
de développement web. Son rôle est de formaliser l'écriture d'un
document avec des balises de formatage. Les balises permettent
d'indiquer la façon dont doit être présenté le document et les liens
qu'il établit avec d'autres documents. Sa version 5.0 apporte de
nouvelles possibilités en termes de création d'applications Web
riches bénéficiant de l'intégration d'éléments multimédias et
d'interactivité.
Les feuilles de style en cascade, généralement appelées CSS,
forment un langage informatique qui décrit la présentation des
documents HTML et XML.
JavaScript est un langage de programmation orienté évènement
qui est utilisé pour la transformation des pages web statiques en
interfaces dynamiques.
28
14
18/01/2016
29
Application mobile Hybride
Une application hybride combine des éléments HTML5 sous forme de web
application et des éléments d’une application native,
Ceux-ci permettent d’utiliser les fonctionnalités natives des Smartphones.
De plus elle pourra être distribuée en tant qu’application sur les plateformes
d’applications (App Store, Android Market, etc.).
Le principe de l’application hybride permet de réduire les coûts et délais de
développement. Cependant la qualité, la performance, et la résolution de ces
applications sont nettement inférieures à celles des applications natives. En effet
l’application hybride peut ne pas bien s’adapter au système d’exploitation utilisé
par le smartphone du mobinaute (interface polluée par des widgets inutiles,
mauvaise résolution etc.).
En plus les applications hybrides ne sont accessibles que sur iPhone et Android,
et sont parfois refusées sur certaines plateformes d’applications.
30
15
18/01/2016
Application mobile Hybride architecture
31
Application mobile Hybride architecture
PhoneGap fournit une API JavaScript multi-plateforme pour accéder aux
fonctions des appareils (ex. appareil photo, GPS, carnet des contacts…).
32
interne Orange
16
18/01/2016
Comparaison
(source IBM)
33
Typologie des interfaces
34
17