SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...
Transcript of 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
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.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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 :
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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 :
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
X
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.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
La page Web adaptée
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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); }}
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.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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="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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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…
Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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…
Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)
Android propose une interopérabilité plus poussée avec la notion d’Intent
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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…
Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)
Android propose une interopérabilité plus poussée avec la notion d’Intent
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)
startActivity(new Intent(Intent.ACTION_VIEW ,Uri.parse(« http://deptinfo.cnam.fr")));
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.
J.-F. Susini & O. Pons
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…
Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)
Android propose une interopérabilité plus poussée avec la notion d’Intent
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)
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://deptinfo.cnam.fr/"]];
J.-F. Susini & O. Pons 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.
X
CP48
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.
J.-F. Susini & O. Pons
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" />
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.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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);
class ObjetDeMonAppli{ @JavascriptInterface public String toString(){ return "mon objet dans JS"; }}
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.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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);
webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");
class ObjetDeMonAppli{ @JavascriptInterface public String toString(){ return "mon objet dans JS"; }}
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.
J.-F. Susini & O. Pons
Le navigateur Web embarqué
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);
webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");
class ObjetDeMonAppli{ @JavascriptInterface public String toString(){ return "mon objet dans JS"; }}
<script type="text/javascript"> document.write( monObjetDansJS.toString()); </script>
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.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Applications complètes : Web~natif…
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Applications complètes : Web~natif…
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
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.
J.-F. Susini & O. Pons
Command Line Interface
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Command Line Interface
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
chemin d’accès au dossier
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.
J.-F. Susini & O. Pons
Command Line Interface
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
chemin d’accès au dossier
identifiant du projet(optionnel)
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.
J.-F. Susini & O. Pons
Command Line Interface
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
chemin d’accès au dossier
identifiant du projet(optionnel)
Nom de l’application(optionnel)
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
Points d’entrée pouraltérer le processus de
compilation
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
Éléments spécifiques àune plate-forme
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
Dossier contenantl’ensemble des sous
projets des≠ plate-formes
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
plugins étendantl’environnement de base
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
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.
J.-F. Susini & O. Pons
Command Line Interface
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
hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css
img/ logo.pngindex.htmljs/ index.js
Elements classiques de l’application Web
J.-F. Susini & O. Pons 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.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
Compilation et exécution
Exécution du projet : cordova emulate android ou encore :cordova run —emulator ios
38
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.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
Support Plate-formes39
J.-F. Susini & O. Pons 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.
Support APIs40
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.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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
Utilisation du debuggueurintégré à Chrome
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.
J.-F. Susini & O. Pons
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
This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.
J.-F. Susini & O. Pons
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