♪
I. Introduction▲
Les applications mobiles sont désormais omniprésentes en commençant par les smartphones et les tablettes, en passant par les montres intelligentes, la voiture connectée et bientôt sur toute unité communicante. Le développement d'applications mobiles devient une tâche récurrente pour une multitude de plateformes. Trois solutions, plus ou moins complexes, se présentent pour les environnements mobiles :
- Une application native est développée pour une seule plateforme avec des outils qui lui sont propres. Le langage de développement est spécifique au système d’exploitation. La distribution et la mise à jour se font par l’intermédiaire d'un store dédié ;
- Une webapp est développée avec les technologies Web HTML5, CSS3 et JavaScript. L'application est distribuée via un serveur Web et est exécutée via le navigateur Web du mobile. Contrairement aux applications natives, une webapp est développée une seule fois pour être exécutée sur n'importe quelle plateforme mobile via Internet. C'est une économie importante de temps et de coût de développement. L'inconvénient majeur toujours mis en avant est l'absence d'accès aux fonctions natives du mobile, ce qui réduit le champ fonctionnel d'une webapp ;
- Une application hybride est un mix des deux premières solutions. Le développement combine des éléments web sous forme de webapp et des éléments de l'application native en compilant l'exécutable compatible avec le système d'exploitation. Les plateformes Phonegap et Cordova permettent de créer une application indépendante à partir de pages Web et l'utilisation des fonctions natives de l'appareil mobile. L'approche hybride permet de mutualiser le développement sur plusieurs systèmes d'exploitation. Développer en hybride contribue à l'optimisation du temps et du coût de développement.
Le développement pour chaque plateforme mobile s'avère une tâche complexe par la diversité des supports et langages impliqués et demande un effort de toute une équipe. Une nette simplification de cette tâche apporte la technique Apache Cordova qui fournit un moyen de développer des applications mobiles en utilisant les technologies Web standard, notamment HTML5, CSS3 et JavaScript.
Une application hybride développée Apache Cordova s'installe comme une application native sans aucune limite pour les récents systèmes d'exploitation mobiles : iOS, Android, Windows Phone, Firefox OS, Ubuntu Phone. Apache Cordova fournit un ensemble de plugins qui donnent l’accès à la caméra de l'appareil mobile, le GPS, le système de fichiers, etc. La pérennité de l'environnement technologique est assurée par des mises à jour et le développement de nouveaux plugins pour tout nouvel appareil mobile.
La Figure 1 illustre le principe relativement simple de création d'une application hybride basée Cordova. Une Webview traite les fichiers HTML en communication avec les API (accéléromètre, boussole, géolocalisation, caméra ou autres) par le biais du plugin correspondant au système d'exploitation de l'appareil mobile.
L'essentiel de la technique Cordova est une API JavaScript. Elle joue le rôle de « wrapper » (enveloppeur) pour le code natif afin de rendre cohérente l'application avec les dispositifs mobiles. On peut considérer Cordova comme un conteneur d'application qui s'intègre avec WebView pour l'affichage de la page Web quel que soit son contenu (jQuery, AngularJS). Suivant le système d'exploitation Cordova s'adresse par exemple à la classe native Objective-C UIWebView sur iOS, ou à la classe native Android android.webkit.WebView.
II. Travaux pratiques avec Cordova▲
Prérequis : une bonne connaissance de HTML5, CSS3, JavaScript et des principes du Responsive Web Design (site web adaptatif) est souhaitable.
II-A. Exercice 1 : installation de Cordova▲
Avant tout, il faut installer NodeJS. C'est est une plateforme événementielle en JavaScript orientée vers les applications réseau avec une bibliothèque de serveur HTTP intégrée
Cordova s'installe avec le Node Package Manager (npm) depuis l'invité de commandes (cmd) par le script suivant :
npm install -g cordova@latestL'étape suivante installe le SDK spécifique à la plateforme cible. Pour nos travaux pratiques nous allons cibler les smartphones et les tablettes sous Android. L'installation du SDK Android demande en premier l'installation du Java Development Kit. Pour éviter les problèmes ultérieurs, il faut créer une nouvelle variable d'environnement JAVA_HOME pointant vers la racine du dossier C:\Program Files\Java\jdk1.8.0_73. Après installation du SDK Android il faut ajouter les dossiers tools et platform-tools dans le PATH des variables d'environnement. Une dernière étape est l'installation d’Apache Ant et son ajout au PATH du système. Ant gère la compilation de l’application native. Les récentes versions de SDK Android comportent une version de Ant.
Note : les exercices présentés comme travaux pratiques sont testés avec Cordova version 8.1.1 et SDK Android 7.1.1, API 27.
Information sur la version installée de Cordova que l’on obtient avec la commande :
cordova -vII-B. Exercice 2 : une Première Application▲
On choisit un nom (projet/répertoire) pour créer le projet Cordova avec la commande :
cordova create bonjourOn accède au répertoire du projet :
cd bonjourOn ajoute la plateforme cible :
cordova platform add android --saveLa configuration du projet est ainsi sauvegardée dans le fichier bonjour/config.xml. Le fichier bonjour/www/index.html contient un squelette d'application parfaitement opérationnel qu’on peut remplacer avec le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Cordova Android</title>
<script type="text/javascript" src="cordova.js"> </script>
<script type="text/javascript">
var showMessageBox = function () {
document.write("<h2>Bonjour<br/>tout le monde<br/>de Cordova</h2><img src='img/logo.png' height='auto' width='auto'/>");
}
function init() {
document.addEventListener("deviceready", showMessageBox, true);
}
</script>
</head>
<body onload="init();">
</body>
</html>
La compilation du projet :
cordova build androidPour tester l'application, on peut lancer le simulateur intégré dans le SDK Android (AVD) :
cordova emulate androidou sur un appareil mobile par connexion USB :
cordova run android
Les pilotes USB pour smartphone et tablette sont accessibles à installer à partir du répertoire android-sdk.
Le nom de l'application Cordova réside dans le fichier config.xml et par défaut est <name>HelloCordova</name>. Il est préférable de le changer avec un nom correspondant au contexte de l'application. Autrement, on se retrouve toujours avec une seule application sur l'émulateur ou le smartphone au nom de « HelloCordova ».
Note : la structure d'un projet Cordova.
À la création du projet « bonjour », l'arborescence présentée à la Figure 3 contient tous les éléments du projet.
La balise <meta> dans la section <head> du fichier index.html spécifie le codage du document avec l'attribut charset et son adaptabilité vis-à-vis des différentes tailles et résolutions d'écrans mobiles avec l'attribut viewport.
La bibliothèque JavaScript nécessaire au fonctionnement de Cordova est introduite dans la section <head> avec la balise <script> :
<script type="text/javascript" src="cordova.js"></script>Les fonctionnalités Cordova ne sont pas disponibles immédiatement. La réception d'une notification est nécessaire. Un appel à la fonction init() est effectué au chargement de la page HTML par l'événement onload référencé par la balise <body>.
La fonction init() installe l'écouteur d'événement document.addEventListener de type deviceready. Le dispositif se déclenche en appelant la fonction showMessageBox lorsque cordova.js est complètement chargée et les variables initialisées. Cet événement est essentiel à toute application pour signaler la disponibilité de l'API Cordova. La fonction showMessageBox fournit le résultat présenté à la Figure 2.
III. Les plugins Cordova▲
Un plugin Cordova est un code d'extension (add-on) qui fournit l’interface JavaScript pour communiquer avec les composants natifs de l'appareil mobile. Ainsi, le plugin permet à l'application d'utiliser les capacités natives du périphérique au-delà de ce qui est disponible pour une application Web classique.
Par exemple : pour ajouter la dernière version du plugin pour la caméra :
cordova plugin add cordova-plugin-camera@latest --saveLe cas échéant, on peut enlever le plugin de la caméra :
cordova plugin rm cordova-plugin-camera --saveIII-A. Exercice 3 : l'API Cordova Device▲
L'objet Cordova Device fournit des informations sur l'application et l'unité mobile. Pour utiliser cette API dans une application Cordova il faut installer le plugin cordova-plugin-device. Le code suivant fait appel à la fonction JavaScript onBodyLoad() lorsque l'événement onload est déclenché. Après notification du chargement de l'API une liste non ordonnée compacte les informations dans la fonction onDeviceReady(). L'attribut innerHTML remplace le contenu identifié par devInfo sur la page.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/w3.css">
<script src="cordova.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
var tmpStr = '';
tmpStr += '<ul class="w3-ul">';
tmpStr += '<li> Cordova Version: ' + device.cordova + '</li>';
tmpStr += '<li> Operating System: ' + device.platform + '</li>';
tmpStr += '<li> OS Version: ' + device.version + '</li>';
tmpStr += '<li> Device Model: ' + device.model + '</li>';
tmpStr += '<li> Universally Unique Identifier: ' + device.uuid + '</li>';
tmpStr += '</ul>';
document.getElementById('devInfo').innerHTML = tmpStr;
}
</script>
</head>
<body onload="onBodyLoad()">
<h2 class="w3-container w3-center w3-teal"> Information sur <br />l'API Cordova</h2>
<p class="w3-center">L'application fait appel à cordova-plugin-device</p>
<p class="w3-center" id="devInfo">En attente d'initialisation de l'API Cordova</p>
</body>
</html>
Le script affiche à la Figure 4 des informations sur la version de Cordova (device.cordova), le système d'exploitation (device.platform) et la version (device.version), le modèle de l'appareil (device.model), l'UUID associé à l'appareil (device.uuid).
Note : Application Stylée Adaptative.
Les feuilles de style (CSS3) permettent l'obtention d'une présentation élaborée et adaptative (responsive) à l'écran d'un appareil mobile. La norme CSS3 déclare la mise en forme des pages HTML et exploite ainsi les avantages de la séparation du contenu et de la forme. La spécification CSS3 Media Queries définit les techniques pour adapter la présentation en fonction du périphérique utilisé. Une aide précieuse pour la réalisation de belles applications mobiles est proposée par Adobe avec Topcoat. C'est un ensemble de fichiers CSS open source prêts à l'utilisation. Un autre projet CSS est proposé sur le site de W3Schools [11]. W3.CSS est un framework compact, rapide et plus petit par rapport à d'autres du même type. Facile à apprendre, il est basé entièrement sur la norme CSS, (aucune bibliothèque jQuery ou JavaScript n'est nécessaire). L'application de la Figure 4 est réalisée avec la feuille de style w3.css.
III-B. Exercice 4 : l'API Cordova Connect▲
L'objet Cordova Connect fournit des informations sur la connexion réseau de l'appareil et la nature de cette connexion : Wi-Fi, 4G, 3G, ou autre. Une application se sert de cette information pour déterminer le moment de transfert de données volumineux depuis ou vers un serveur, ainsi que pour la prise en compte de la précision d'une géolocalisation.
Pour utiliser l'objet Cordova Connect il faut ajouter le plugin correspondant dans le projet :
cordova plugin add cordova-plugin-network-information@latest --saveLa propriété navigator.connection.type de l'objet Connection renvoie l'information sur la connexion disponible pour l'application. À cet usage l'objet expose un ensemble de constantes pour la définition du type de connexion : Connection.CELL_4G, Connection.Wi-Fi…
Dans la fonction onDeviceReady() on définit le tableau associatif states initialisé avec les éléments d'une connexion à identifier par le retour de l'instruction suivante :
var networkState = navigator.connection.type;Le code présenté et le résultat obtenu à la Figure 5 montrent l'identification du type de connexion en cours orientée au transfert de données.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
<!DOCTYPE html>
<html>
<head>
<title>navigator connection type</title>
<script type="text/javascript" charset="utf-8" src="cordova.js">
</script>
<link rel="stylesheet" href="css/w3.css">
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Inconnue';
states[Connection.ETHERNET] = 'Ethernet';
states[Connection.Wi-Fi] = 'Wi-Fi';
states[Connection.CELL_2G] = 'cellulaire 2G';
states[Connection.CELL_3G] = 'cellulaire 3G';
states[Connection.CELL_4G] = 'cellulaire 4G';
states[Connection.CELL] = 'générique';
states[Connection.NONE] = 'aucune';
document.getElementById('netInfo').innerHTML = "Connexion " + states[networkState];
}
</script>
</head>
<body onload="onBodyLoad()">
<h2 class="w3-container w3-center w3-teal">Cordova Connection API</h2>
<p class="w3-center">l'objet <b>Connection</b> est accessible via<br /> <i>navigator.connection.type</i> pour
afficher <br />l'état de connexion de l'appareil.</p>
<hr />
<p class="w3-center" id="netInfo"></p>
</body>
</html>
L'affichage sur le terminal Android :
III-C. Exercice 5 : l'API Cordova Geolocation▲
L'API Geolocation est basée sur la spécification de W3C. L'objet navigator.geolocation permet l'accès aux données de localisation du capteur GPS (Système de Positionnement Global) de l'appareil. Ces données peuvent être déduites aussi des signaux du réseau mobile (les ID cellulaires GSM/CDMA) ou Wi-Fi (l'adresse IP, RFID, les adresses MAC), ou Bluetooth.
Les données de géolocalisation sont considérées comme sensibles. Ces données révèlent l'endroit d'utilisation du GPS. Une application devrait afficher une notice avant d'accéder aux données par respect de confidentialité et ainsi permettre de recueillir l'autorisation de l'utilisateur de poursuivre comme montré sur la Figure 6.
Pour implémenter cette fonctionnalité, il faut ajouter le plugin cordova-plugin-geolocation dans le projet Cordova prévu à cet usage. Pour une application Cordova-Android des commandes sont appliquées à la plateforme cible en modifiant les paramètres de configuration spécifiques. À la compilation les autorisations nécessaires à la géolocalisation sont rapportées au fichier : platforms/android/res/xml/config.xml
2.
3.
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>
et au fichier : platforms/android/AndroidManifest.xml.
2.
3.
<uses-permission android:name = "android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name= "android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name= "android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
Pour détecter la position de l'appareil, on fait appel à la fonction asynchrone getCurrentPosition (par1, [par2], [par3]) dans la fonction onDeviceReady() de l'application Cordova. La fonction renvoie la position de l'appareil sous la forme d'objet :
navigator.geolocation.getCurrentPosition(onSuccess, onError);La fonction (callback) onSucces est appelée si les mesures de géoposition sont transmises. Dans le cas contraire, la fonction onError est appelée. La fonction onSuccess prend en paramètre l'objet de la localisation pour exposer les coordonnées à travers la propriété coords.
L'objet géolocalisation fournit des informations sur la mesure d'un ensemble de propriétés incluant : Latitude, Longitude, Altitude, Accuracy, Altitude Accuracy, Heading, Speed, Timestamp.
Le code suivant illustre l'implémentation de l'API Geolocation dans une application Cordova.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<link rel="stylesheet" href="css/w3.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(pos) {
document.getElementById('geoloc').innerHTML = 'Latitude: ' + pos.coords.latitude + '<br />' + 'Longitude: ' + pos.coords.longitude;
}
function onError(error) {
document.getElementById('geoloc').innerHTML = 'code: ' + error.code + '<br />message: ' + error.message;
}
</script>
</head>
<body onload="onBodyLoad()">
<h2 class="w3-container w3-center w3-teal"> Géolocalisation</h2>
<hr />
<p class="w3-center" id="geoloc">
A la recherche de la géolocalisation...</p>
</body>
</html>
L'affichage sur le terminal Android :
III-D. Exercice 6 : l'API Cordova Camera▲
L’API Camera peut prendre des photos avec la caméra de l'appareil mobile, ou peut choisir des images à partir d’une bibliothèque multimédia. Pour implémenter ses fonctionnalités il faut ajouter le plugin cordova-plugin-camera dans le projet. L’objet navigator.camera donne l'accès aux fonctions de la caméra.
La collecte et l'utilisation des images de la caméra d'un appareil mobile concernent la vie privée. Si l'utilisation de la caméra n'est pas apparente dans l'interface utilisateur, l’application devrait afficher une notice avant d'accéder aux fonctionnalités de l’API, par respect de la confidentialité et ainsi permettre de recueillir l'autorisation de l'utilisateur de poursuivre.
Le code fait appel à la fonction getPictures pour ouvrir l'application par défaut de l'appareil mobile permettant à l’utilisateur de prendre des photos ou de consulter la galerie photo. Trois options sont disponibles :
navigator.camera.getPicture(onSuccess, onError, [Options]);- Camera.PictureSourceType.CAMERA active l'application caméra pour la prise de photos ;
- Camera.PictureSourceType.SAVEDPHOTOALBUM, ouvre une boîte de dialogue pour accéder à une image existante.
La fonction passe au « callback » (onSuccess) l'image comme une chaîne de caractères encodée en base64 ou l'URI du fichier image (Figure 8).
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
<title>Camera</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.camera.getPicture(onSuccess, onFail, { quality: 25, destinationType: Camera.DestinationType.DATA_URL });
}
function onSuccess(imageData) {
var image = document.getElementById('monImage');
image.style.display = 'block';
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Camera</h1>
<p>Cette application utilise l'API camera de Cordova pour prendre des photos avec l'appareil mobile.</p>
<img style="display:block;width:10.000em;height:12.500em;" id="monImage" src="" />
</body>
</html>
Pour éviter les problèmes de mémoire il faut privilégier la destination Camera.destinationType.FILE_URI au lieu de DATA_URL à cause d'une résolution des photos assez bonne pour les appareils récents. Les photos sélectionnées de la galerie de l'appareil mobile ne sont pas réduites en taille et qualité, même si un paramètre est spécifié.
IV. Conclusion et remerciements▲
Une étude récente montre que le nombre de requêtes saisies dans les moteurs de recherche sur navigateurs mobiles est supérieur au nombre saisi sur ordinateur de bureau. Ainsi, le mobile devient le premier moyen de connexion à Internet. Les sites ont réagi pour s'adapter au phénomène en se rendant « responsive ». C'est le cas des applications Web.
Le développement d’applications mobiles est aujourd'hui au cœur des préoccupations des entreprises et des sociétés de développement informatique pour satisfaire les besoins professionnels de leurs collaborateurs. Le développement mobile inclut majoritairement les smartphones et les tablettes. Pour la plupart, les appareils mobiles fonctionnent sur iOS et Android. Ce dernier contrôle environ 80 % du marché des systèmes d’exploitation mobiles et Apple détient les 20 autres pour cent.
Le développement d'applications hybrides pour les mobiles possède plusieurs avantages liés aux coûts de production, au temps de développement et une facilité accrue de la maintenance. Comparées aux difficultés du développement natif étroitement lié à une plateforme et a un système d'exploitation ou à l'absence de capacités d'accès aux fonctionnalités natives des mobiles des applications Web, les applications hybrides se démarquent avec plus de souplesse.
Il est cependant évident que cela n'est pas une règle générale, les spécificités locales, professionnelles ou autres déterminent souvent le choix.
Cet article a été publié avec l'aimable autorisation de Ivan MADJAROV.
Nous tenons à remercier jacques_jean pour sa relecture orthographique attentive de cet article et Mickael Baron pour la mise au gabarit.
V. Références▲
- Apache Cordova, https://cordova.apache.org/.
- NodeJS, https://nodejs.org/.
- Java Development Kit (jdk), http://www.oracle.com/technetwork/java/javase/downloads/index.html.
- SDK Android, http://developer.android.com/sdk/index.html.
- Apache Ant, http://ant.apache.org/bindownload.cgi.
- Ivan Madjarov, Arnaud Février, Responsive Web Design: une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives, Les cahiers pédagogiques R&T, Actes du 3e Workshop, pp. 245-250, Saint Pierre de La Réunion, 17-20 novembre 2014.
- W3C, Cascading Style Sheets, https://www.w3.org/Style/CSS/.
- Topcoat, http://topcoat.io.
- W3.CSS, http://www.w3schools.com/w3css/default.asp.
- MDN, https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML.
- Apache Corodva Geolocation, https://cordova.apache.org/docs/.