Cordova et les plugins

Comme vous le savez déjà, Cordova permet d’utiliser des technologies web pour développer des applications pour smartphone ou tablette.

Il fut un temps où ces technologies web limitaient l’arsenal du développeur : certaines fonctionnalités étaient inutilisables. Entre autres, l’accès au carnet d’adresses, au système de fichier ou encore aux périphériques tels que l’accéléromètre ou le gps.

Grâce à la magie des plugins Cordova, ce temps est désormais révolu.

Un plugin Cordova n’est ni plus, ni moins qu’une librairie additionnelle dédiée à une fonctionnalité particulière installable à la demande lorsque vous en avez besoin.

Simples à installer, simples à configurer, et simples à utiliser tels sont les plugins Cordova.

Je vais donc vous montrer comment :
– les trouver;
– les installer;
– les configurer et les l’utiliser.

Pour les aspects relatifs à l’installation de Cordova ainsi qu’à l’initialisation d’un projet Cordova, je vous invite à vous reporter à l’article Initialiser un projet Cordova.

**Où trouver un plugin Cordova ?**

Premier réflexe, vous rendre sur le site officiel Cordova . En effet, cela reste le lieu le plus fiable.

Vous y trouverez une liste de plugins Cordova, les plus communs, notamment pour gérer :
– la batterie;
– la caméra embarquée;
– les contacts;
– l’accéléromètre;
– le gyroscope;
– le système de fichiers;
– la géolocalisation;
– etc….

Et d’autres encore.

Second réflexe, passez par un moteur de recherche dédié cordova.apache.org plugins.

Un simple recherche et vous trouverez le plugin Cordova correspondant à vos besoins : évitez les plugins en version beta, ainsi que ceux qui ne sont pas maintenus.

La communauté des développeurs étant très active, il se peut que vous trouviez pour un même besoin plusieurs plugins. Choisissez celui qui est ni en version alpha, ni en version beta et qui est maintenu par le ou les développeurs.

Le moteur de recherche renvoie une liste de plugins, chacun pointant vers une page dédiée dans laquelle vous trouverez la doc et les sources.

Installer un plugin Cordova

Lorsque vous installez un plugin, son installation est rattachée à un projet. Vous devez donc au préalable, créer votre projet Cordova avant d’y installer votre plugin Cordova. Référez vous à l’article pour la création d’un projet Cordova.

Pour installer le plugin Cordova, placez en ligne de commande dans le dossier de votre projet, par exemple.

cd monProjet

Puis, une simple commande suffit.

cordova plugin add nom_du_plugin

Des messages de téléchargement et d’installation apparaissent suite à l’exécution de cette commande.

Le nom_du_plugin est souvent en notation pointée débutant par

org.apache.cordova

En prenant l’exemple de l’accéléromètre (plugin device), le plugin device-motion s’installerait avec la commande suivante.

cordova plugin add org.apache.cordova.device-motion

La réponse serait.

Fetching plugin "org.apache.cordova.device-motion" via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.device-motion
npm http 200 http://registry.cordova.io/org.apache.cordova.device-motion
npm http GET http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apache.cordova.device-motion/-/org.apache.cordova.device-motion-0.2.11.tgz
npm http 200 http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apache.cordova.device-motion/-/org.apache.cordova.device-motion-0.2.11.tgz
Installing "org.apache.cordova.device-motion" for android

Vous voyez que jusqu’à présent, il n’y a rien de complexe et vous en prendrez vite l’habitude.

Utiliser un plugin Cordova

Ici, rien de complexe non plus pour le développeur qui connait un minimum javascript.

L’usage d’un équipement d’un smartphone ou d’une tablette nécessite qu’il soit au préalable initialisé et donc prêt à être utilisé.

Cordova facilite une fois de plus la tâche du développeur puisqu’il met à disposition un événement qui est levé dès que les périphériques sont initialisés. Encore mieux, cet événement est le même quelque soit le device utilisé. S’il y a plusieurs devices, l’événement ne sera levé que lorsque tous seront prêt à l’utilisation.

Remarquez que c’est tout de même sympa.

Le nom de l’événement est deviceready qui s’utilise comme suit.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("Devices are ready");
}

addEventListener indique la fonction à appeler (onDeviseReady) lorsque l’événement (deviceready) est levé. Ni plus, ni moins.

A vous ensuite d’effectuer vos traitements à partir de la fonction onDeviceReady.

Cordova et les plugins