SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...

Paris, 10/01/2016

This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.

SETMO : Programmation WebMobile

Jean-Ferdy Susini et Olivier PonsMaîtres de Conférences - CNAM

Département Informatique

http://creativecommons.org/licenses/by-sa/3.0/

10/01/2016


J.-F. Susini & O. Pons

Explosion du trafic Web mobile : l’iPhone2

juin 2007 : iPhone première génération bouleverse les usages. Le modèle économique d’Apple à l’époque repose essentiellement sur :


10/01/2016





La vente de matériel (le téléphone lui même et quelques accessoires)Son Magasin de vente en ligne intégré au téléphone iTunes Store.


10/01/2016





La vente de matériel (le téléphone lui même et quelques accessoires)Son Magasin de vente en ligne intégré au téléphone iTunes Store.

Apple négocie très âprement avec les opérateurs de l’époque des abonnements offrant un trafic Internet «illimité». WebKit et Safari deviennent le standard du WebMobile.

Apple promet un kit de dev basé sur les technologies Web (HTML 5) pour les éditeurs partenaires.


10/01/2016



Explosion du trafic Web mobile : l’iPhone

juin 2008 : IOS 2, apparition de l’AppStore. Un SDK et un modèle économique différent (pub, magasin d’applications en ligne…).

Transforme profondément la conception des applications y compris des applications Web

3


10/01/2016



Explosion du trafic Web mobile : Android

WebKit est aussi au centre du système Android. Le modèle de programmation du système lui même reprend les grands principes des applications Web -> WebKit devient standard de fait.

4


10/01/2016



Explosion du trafic Web mobile

Côté client : la connexion devient quasi permanente et à coût raisonnable. Les débits augmentent :

EDGE (4* GPRS, débits théoriques descendant vers le mobile 384 Kbit/s pour de déplacements lents, 144 Kbit/s pour des déplacements rapides)3G (1.9 Mbit/s en point fixe, en pratique 384 Kbit/s) 3G+ (3.5G ou HSPA : 14.4 Mbit/s, en pratique ~3.5 Mbit/s) -> H+ (21 Mbit/s, en pratique 5 Mbit/s)4G (LTE, 150 Mbit/s, en pratique 40 Mbits/s)

Débits théoriques sont généralement donnés à l’arrêt, en pratique = en mouvement.

5


10/01/2016



Technologies Web mobile

WebKit est omniprésent et fixe des standards de fait en s’appuyant sur :

HTML5CSS3Javascript

Les performances sur plate-forme mobile sont confortées par le développement d’interprètes (VM Javascript) performants et un support matériel en très nette amélioration (processeur multi cœurs, accélération graphique 2D, 3D, vidéo…)

6


10/01/2016



Des applications Web sur terminal mobile

Pages web (classiques) qui s'adaptent à la taille de l’écran (ResponsiveWeb)

Pages web spécifiques (redirection sur la detection du terminal)

Pages web embarquées dans une application (WebKit, WebView dans l’application native…)

Applications complètes avec les technologie Web (Javascript comme langage de programmation : Cordova, ReactNative, …)

7


10/01/2016



La page Web adaptée

Ajout des informations : balise <meta> avec le nom viewport (popularisé par safari mobile de l’iPhone) intégré dans le WebKit

8

<meta name="viewport" content="width=device-width; user-scalable=0;">

paramètre rôle valeurs possibles

width largeur de la fenêtre d’affichage nombre de pixels ou le mot clé : device-width

height hauteur de la fenêtre d’affichage nombre de pixels ou le mot clé : device-height

user-scalable autorise ou non le zoom 1 : oui ; 2: noninitial-scale échelle initiale de zoom valeur entre 0 et 10.0

1.0 -> 1 pixel du viewport = 1 pixel de l’écran

minimum-scale échelle minimale de zoommaximum-scale échelle maximale de zoom


10/01/2016




Le viewport représente la largeur de la fenêtre d'affichage du navigateur => dépend du navigateur et de ses versions. Valeur par défaut en mode portrait (que de problèmes en vue !) :

Opera Mini : 850pxSafari : 980pxAndroid browser (jusqu’à ICS) : 800pxOpera Mobile : 980pxAndroid ICS et après : 980pxIE mobile : 1024pxChrome : 980pxFireFox : 800px

Niveau de zoom = largeur-device/largeur-viewport

9


10/01/2016



Exemple iPhone 4 et Safari

viewport par défaut : 980px

device-width : 320px

largeur physique : 640px

css-ppi : 192

ppi : 326

zoom ~ 0.3265

10

viewport: 980px

device-width:320px

phys-width:640px


10/01/2016



X

10/01/2016




Les iPhones 1G à 4S proposent tous un device-width de 320 pixels (quelque soient leur résolution) et un device-height de 460 (568px pour > G5) pixels aussi bien en mode portrait qu’en mode paysage => device-width ≠ de la largeur physique

Les iPads affichent un device-width de 768px par 1024px

11


10/01/2016




Sous Android différentes tailles sont présentés par les devices. Par exemple :

320x533 pour le Galaxy S et S2360x640 pour le Galaxy S3, S4 et S5400x640 pour le Galaxy Note360x640 pour le Note 2 et 3 …

12


10/01/2016




Les règles css :

Utiliser les unités de mesures relatives au viewport :vw (1% du viewport width)vh (1% du viewport height)vmin (1% de la plus petite dim du viewport)vmax (1% de la plus grande dim du viewport)

13

@media (orientation: portrait){ @viewport{ width:device-width; zoom:1; }}@media (orientation: landscape){ @viewport{ width:device-height; zoom:1; }}


10/01/2016




En javascript la fonction matchMedia() permet de vérifier des informations sur le navigateur afin de connaître ses capacités de rendu et d’interaction.

On retrouve les requêtes des média queries de CSS. Exemples :

min-device-width: (px,pt,em…)min-resolution : (dpi, dpcm, dppx…)pointer : none, coarse, finehoverluminosity : dim, normal, washed…

14

if(window.matchMedia("orientation: landscape")){ // affichage en mode paysage}else{ // affichage en mode portrait}


10/01/2016




Le choix de la feuille de style :

Adapter l’interface de son site à la navigation mobile : de nombreuses librairies existent et quelques bonnes pratiques:

une seule colonneveiller à l’espacement entre les éléments d’interactionréduire la taille des polices à 80% (écran sur-résolus…)

15

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />


10/01/2016



Redirection

Côté serveur technologies inchangées : on ajoute seulement des outils de détection du matériel du client

Détecter un terminal mobile pour rediriger vers une version mobile du site adaptation à la taille de l’écran (technologies responsive Web) et surtout à la méthode d’interaction. Plusieurs solutions :

Côté serveur :HTACCESSProgramme serveur (exemple : redirection PHP)

Côté client :code Javascript

16


10/01/2016



Redirection côté serveur

HTACCESS Simple, efficace et transparent

Programmation serveur : exemple de bibliothèque en PHP (il y en a plein d’autres) : http://code.google.com/p/php-mobile-detect/

17

RewriteEngine OnRewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad" [NC,OR]RewriteCond %{HTTP_USER_AGENT} "android|palm"RewriteRule (.*) http://www.SSSSSSSSSSS.fr/mobile/ [R=301,L]

require_once 'Mobile_Detect.php';$detect = new Mobile_Detect;if($detect->isMobile()){ if($detect->isTablet()){ header('http://tablet.monsite.com', true, 301); } else{ header('http://mobile.monsite.com', true, 301); }}


http://code.google.com/p/php-mobile-detect/

10/01/2016



Redirection côté client

Utilisation des informations de l’objet navigator pour avoir les informations sur la plate-forme : navigator.userAgent, navigator.vendor…suivit de la redirection classique : window.location = …

De nombreux scripts et libraries sont disponibles

18


10/01/2016



Intégration dans l’environnement natif

L’icône sur le bureau iOS : par défaut une miniature du site (viewport mappé sur la taille de l’icône) overture dans le navigateur…

19

<link rel="apple-touch-icon" href="logo.png" />

<link rel="apple-touch-startup-image" href="startup.png" />

<meta name="apple-mobile-web-app-capable" content="yes" />


10/01/2016





19

<link rel="icon" href="logo.png" />

<meta name="mobile-web-app-capable" content="yes" />

Support au moins temporaire dans Chrome (raccourcis sur le bureau)


10/01/2016





Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)

19





10/01/2016






Android propose une interopérabilité plus poussée avec la notion d’Intent

19





10/01/2016







19




startActivity(new Intent(Intent.ACTION_VIEW ,Uri.parse(« http://deptinfo.cnam.fr")));


http://deptinfo.cnam.fr

10/01/2016







19




[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://deptinfo.cnam.fr/"]];


http://deptinfo.cnam.fr/

J.-F. Susini & O. Pons 10/01/2016


X

CP48

10/01/2016



Le navigateur Web embarqué

Le WebKit présent au cœur d’iOS et d’Android propose un widget particulier : la WebView (Android) ou grace au XML :

Chargement d’une URL : ne pas oublier :

20

WebView webview = new WebView(this);this.setContentView(webview);

<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/main_web_wv" />

WebView webview = (WebView)this.findViewById(R.id.main_web_wv);

webview.loadUrl("http://jeanferdysusini.free.fr/Cours/CP48/");

<uses-permission android:name="android.permission.INTERNET" />


http://jeanferdysusini.free.fr/Cours/CP48/

10/01/2016




Par défaut, la WebView propose peu de chose : pas de JS, pas d’alert, pas d’erreur…). On rajoute des fonctionnalités par l’adjonction d’objets utilitaires :

WebChromeClient permettant de gérer le modifications de comportement de l’interface : les alertes -> Toast ou notifications

21

webview.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(WebView view, String url , String message, JsResult result){ Toast.makeText(view.getContext(),message,2000); return true; } });


10/01/2016




La sous classe WebViewClient : appelée quand quelque chose peu impacter le rendu du contenu (erreur de soumission de formulaire, interception d'url)

22

webview.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading (WebView view , String url) { Toast.makeText(view.getContext(), "On click pas là !" , Toast.LENGTH_SHORT).show(); return true; } });


10/01/2016




La classe WebSettings permet d’accéder aux différents réglages de la webView : activer JavaScript avec setJavaScriptEnabled(true)

La méthode addJavascriptInterface() permet d’accéder à des objets java depuis javascript

23

WebSettings settings = webview.getSettings();settings.setJavaScriptEnabled(true);


10/01/2016






23


class ObjetDeMonAppli{ @JavascriptInterface public String toString(){ return "mon objet dans JS"; }}


10/01/2016






23


webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");



10/01/2016






23


webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");


<script type="text/javascript"> document.write( monObjetDansJS.toString()); </script>


10/01/2016



Applications complètes : Web~natif…

Nombre de développeurs de nos jours savent programmer des applications Web : HTML/CSS/Javascript

Un très gros efforts a été consenti sur ces dernières années pour favoriser la portabilité d’un navigateur à un autre, l’adaptabilité à différents contexts d’utilisation, différents matériels (taille d’écran, langues…)

La programmation mobile => des cibles très différentes : différentes architectures matérielles, différents modes d’interaction, différents usages, différentes plate-formes OS, différents langages de programmation

24


10/01/2016




Comment programmer cette incroyable diversité ?Programmer pour les plus gros ? Les géants se font et se défont à un rythme effréné … Symbian, Blackberry, iOS, Android… En moins de 10ans…Programmer spécifiquement pour tous ? Cher et très difficile à maintenir…

Un point commun : le Web, presque toutes les plate-formes embarquées intègrent un navigateur !

Oui, mais ! Certaines fonctionnalités qui constituent tout l’intérêt des développements mobiles ne sont pas accessibles ou mal supportées.

25


10/01/2016




Un environnement de développement multiplate-forme :Apache CordovaAppcelerator TitaniumAppFurnaceiUINS Basic/App Studio…

Pour favoriser l’adoption : utiliser les technologies connues : HTML/CSS/Javascript. S’appuyer sur l’intégration facile des framework web dans des applications natives (cf. l’exemple du WebKit sous Android) pour fournir un nouveau framework. Ex : Phonegap/Cordova

26


10/01/2016



Phonegap/Cordova

Apache Cordova/PhoneGap, est un framework open-source, permettant de créer des applications mobiles pour différentes plateformes (iOS, Android, Windows Phone...) en utilisant les technologies du Web : HTML, CSS et JavaScript.

Initialement développé par la société Nitobi, rachetée en 2011 par Adobe.

Adobe a confié le développement du noyau à la fondation Apache devenu le projet Apache Cordova.

27

http://cordova.apache.org/ http://phonegap.com/


10/01/2016



Phonegap/Cordova

Permet de créer des applications natives, intégrées à un ensemble très riche de plate-formes embarquées mobiles : Android, iOS, Windows Mobile/Phone, Tizen, Bada, Blackberry, Symbian, Umbuntu Touch, Firefox OS…

Adobe fournit des outils au dessus tel que PhoneGap Build qui permet de «compiler» en ligne pour différentes plate-formes cibles les applications Phonegap (une compilation spécifique est nécessaire pour iOS, sur mac en passant par Xcode, ou sur Windows Phone…) ; ainsi que des produits dédiés aux entreprises : Adobe PhoneGap Enterprise

28


10/01/2016



Cordova

Mise en œuvre technique :s’appuie sur un fichier de configuration standard : config.xml édicté par le W3C dans les spécifications Packaged Web Apps (Widgets)l’application en elle même prend ensuite la forma d’une page Web classique : index.html associée à un ensemble de ressources HTML, CSS Javascript et différents média (images, vidéos, fichiers audio …)La partie native de l’application embarque l’équivalent d’une WebView et est distribuée par l’un des magasins en ligne de la plate-forme ciblée.Un fichier ressource javascript particulier est fourni pour gérer les aspects natifs : phonegap.js

29


10/01/2016



Cordova

Mise en œuvre technique :s’appuie sur un fichier de configuration standard : config.xml édicté par le W3C dans les spécifications Packaged Web Apps (Widgets)l’application en elle même prend ensuite la forma d’une page Web classique : index.html associée à un ensemble de ressources HTML, CSS Javascript et différents média (images, vidéos, fichiers audio …)La partie native de l’application embarque l’équivalent d’une WebView et est distribuée par l’un des magasins en ligne de la plate-forme ciblée.Un fichier ressource javascript particulier est fourni pour gérer les aspects natifs : phonegap.js

29

Phonegap fourni une API standardisée de communication entre l’application Web et le monde natif


10/01/2016



Command Line Interface

L’ensemble de l’environnement repose sur JavaScript et en particulier l’outil Node.js (http://nodejs.org/) ui doit-être installé sur votre poste de développement.

L’installation de Cordova passe par Node.js, à travers la ligne de commande :

sous UNIX (Linux ou MacOS) :sudo npm install -g phonegapSous windows :npm install -g phonegap

Pour pouvoir utiliser la compilation l’émulateur sous iOS, il faut installer un outil supplémentaire à l’aide de node.js :sudo npm install -g ios-sim

30


http://nodejs.org/

10/01/2016




Manipulation à l’aide de la ligne de commande :création d’un projet : cordova create hello com.example.hello HelloWorldcrée un dossier projet :

31


10/01/2016





31

chemin d’accès au dossier


10/01/2016





31


identifiant du projet(optionnel)


10/01/2016





31


identifiant du projet(optionnel)

Nom de l’application(optionnel)


10/01/2016





31

hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css

img/ logo.pngindex.htmljs/ index.js


10/01/2016





31



Points d’entrée pouraltérer le processus de

compilation


10/01/2016





31




10/01/2016





31



Éléments spécifiques àune plate-forme


10/01/2016





31




10/01/2016





31



Dossier contenantl’ensemble des sous

projets des≠ plate-formes


10/01/2016





31




10/01/2016





31



plugins étendantl’environnement de base


10/01/2016





31




10/01/2016





31



Elements classiques de l’application Web


J.-F. Susini & O. Pons 10/01/2016


config.xml32

1 <?xml version='1.0' encoding='utf-8'?> 2 <widget id="com.example.hello" version="0.0.1" 3 xmlns="http://www.w3.org/ns/widgets" 4 xmlns:cdv="http://cordova.apache.org/ns/1.0"> 5 <name>HelloWorld</name> 6 <description> 7 A sample Apache Cordova application. 8 </description> 9 <author email="[email protected]"10 href="http://cordova.io">11 Apache Cordova Team12 </author>13 <content src="index.html" />14 <access origin="*" />15 </widget>


J.-F. Susini & O. Pons 10/01/2016


index.html33

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="format-detection" 6 content="telephone=no" /> 7 <meta name="viewport" 8 content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 9 <link rel="stylesheet"10 type="text/css"11 href="css/index.css" />12 <title>Hello World</title>13 </head>


J.-F. Susini & O. Pons 10/01/2016


index.html34

14 <body>15 <div class="app">16 <h1>Apache Cordova</h1>17 <div id="deviceready" class="blink">18 <p class="event listening">19 Connecting to Device20 </p>21 <p class="event received">22 Device is Ready23 </p>24 </div>25 </div>26 <script type="text/javascript" src="cordova.js"></script>27 <script type="text/javascript" src="js/index.js"></script>28 <script type="text/javascript">29 app.initialize();30 </script>31 </body>32 </html>


J.-F. Susini & O. Pons 10/01/2016


index.css35

….app { background:url(../img/logo.png) no-repeat center top; position:absolute; left:50%; top:50%; height:50px; width:225px; text-align:center; padding:180px 0px 0px 0px; margin:-115px 0px 0px -112px;}@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { .app { background-position:left center; padding:75px 0px 75px 170px; margin:-90px 0px 0px -198px; }}…


J.-F. Susini & O. Pons 10/01/2016


index.js36

var app = { initialize: function(){ this.bindEvents(); }, bindEvents: function(){ document.addEventListener('deviceready' , this.onDeviceReady, false); }, onDeviceReady: function(){ app.receivedEvent('deviceready'); }, receivedEvent: function(id){ var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id); }};


10/01/2016



Ajouter des plate-forme cibles au projet

Pour chaque plateforme cible, il taut ajouter une entrée dans le projet au moyen de la commande : cordova platform add android cordova platform add ios …

En fonction de la plateforme de développement, différentes civles seront disponibles : cordova platform ls Installed platforms: android 3.4.0, ios 3.4.1 Available platforms: amazon-fireos, blackberry10, firefoxos

La compilation du projet se fera par la commande build :cordova build ou spécifiquement pour une plate-forme donnée : cordova build android cordova build ios

37


10/01/2016



Compilation et exécution

Exécution du projet : cordova emulate android ou encore :cordova run —emulator ios

38


J.-F. Susini & O. Pons 10/01/2016


Support Plate-formes39


J.-F. Susini & O. Pons 10/01/2016


Support APIs40


10/01/2016



Intégration dans les OS existants

L’interface s’appuie sur la WebView (WebKit est présent dans iOS et Android, pour les autres plate-formes on s’adapte à des équivalent de la WebView) -> Écran unique, activité unique. Interception des callbacks du cycle de vie. Par exemple, sur le système Android, Cordova défini une activité particulière : CordovaActivity, qui intercepte les méthode onCreate(), onPause() et onResume().Dans cette WebView, l’architecture Phonegap standard consiste à afficher une page Web unique (pas de notion de navigation au sens Web). Les données dynamiques sont affichées par transformation du DOM de la page et le chargement de nouvelles données se fait grâce aux techniques AJAX standard.

41


10/01/2016



Ripple et désormais le mode de devices

Extension du navigateur Google Chrome permettant de simuler le comportement d’une WebView dans un terminal mobile et ainsi d’exécuter et de débugger les programmes Phonegap.

42


10/01/2016





42

Utilisation du debuggueurintégré à Chrome


10/01/2016





42


10/01/2016



Projet

Implanter des claviers virtuels sous Android dédiés au Handicap (clavier à défilement…) dont des implantations sont proposées sur une base Web. Les clavier doivent pouvoir être intégrer nativement sous Android au moyen d’un InputMethodService (envisager un développement sous forme de plug-in cordova).

43


SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...

Documents

Transcript of SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...