Ajouter un plugin à votre projet Phonegap / Cordova

Devenir un lion dans la jungle du numérique

Ajouter un plugin à votre projet Phonegap / Cordova

 

Bien que Phonegap et Cordova repose sur le même code source, il est important de savoir quelle version est installée sur votre ordinateur.

Pour cela il vous suffit d’ouvrir votre CLI (taper cmd dans votre barre de recherche Windows ou ouvrir Terminal sur Mac) et entrer la commande:

Pour s’assurer que Cordova est bien installé

cordova -v

et pour s’assurer que Phonegap est bien installé

phonegap -v

Si en réponse vous avez un numéro de version, c’est que vous avez bien le logiciel installé sur votre ordinateur, si ce n’est pas le cas, je vous recommande d’installer au minima Cordova.

En effet les plugins sont généralement ajouteé via Cordova et NPM (GIT quelques fois).

Une fois vérifié que Cordova est installé sur votre machine, il vous faut naviguer vers votre dossier contenant le code source de votre application.

A l’ouverture de votre terminal, vous vous trouver à la racine de votre dossier utilisateur.

Pour Windows

Entrer la commande dans votre CLI

dir

Pour MAC

ls

Il vous indiquera alors les fichiers et les dossiers visibles dans le dossier ou vous vous trouvez.

Le but est de naviguer jusqu’à votre dossier contenant votre application Phonegap ou Cordova.

Si vous l’avez placé dans le bureau, entrer

cd Desktop

si vous l’avez placé dans mes documents

cd Documents

La commande ‘cd’ est l’abréviation change directory, ce qui permet de naviguer comme votre interface graphique dans vos dossiers.

Pour revenir au dossier parent il vous suffit de rentrer la commande :

cd ..

Vous remonter alors d’un niveau, vérifier à chaque fois que vous êtes dans le bon dossier à l’aide des commandes DIR pour Windows et LS pour mac.

Si votre dossier contenant l’application se nomme MyApp par exemple taper ensuite :

cd MyApp

Vous devriez alors avoir quelque chose comme ceci dans votre terminal:

CONTRIBUTING.md	config.xml	platforms	www
README.md	hooks		plugins

ce qui correspond dans votre interface graphique à cette fenêtre:

dossier MyApp

 

 

Une fois à la racine de votre application  prenons l’exemple d’ajout d’un plugin de scanner codebar:

https://www.npmjs.com/package/cordova-plugin-barcodescanner

En haut à gauche vous trouverez la commande:

npm i cordova-plugin-barcodescanner

Cette commande installera alors le plugin sur votre ordinateur.

Entrer maintenant la commande

cordova plugin add cordova-plugin-barcodescanner

Cette commande vous ajoutera alors le plugin à votre projet d’application.

Il ne vous reste plus qu’a vous servir des quelques lignes de javascript donné en dessous pour déclencher le lecteur de barcodescanner dans votre projet:

cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      },
      function (error) {
          alert("Scanning failed: " + error);
      }
   );

 

 

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.Plus d'informations ici

Fermer