Lecteur de code à barre Ionic (android & IOS)

English English

 

Bienvenue, nous allons créer une application lecteur de code à barre pour Android et IOS en utilisant Ionic, Angular et Cordova avec le plugin BarcodeScanner qui est capable de scanner les code à bares des formats suivant :

  • QR Code
  • Data Matrix
  • UPC E
  • UPC A
  • EAN 8
  • EAN 13
  • Code 128
  • Code 39
  • ITF

Github Repo

À peu près tous les formats qui conque aurait jamais besoin. Le plugin lui-même fait usage de la bibliothèque de ZXing très populaire.
Pour mettre en œuvre le scanner de codes à barres dans notre application Android et iOS, on vas commencer par la création d’un nouveau projet Ionic.

Création d’un projet Ionic

Pour rendre les choses le plus facile à comprendre, nous allons commencer avec un nouveau projet «Blank».
On peut utiliser l’invite de commande (Windows) ou Terminal (Mac et Linux) pour exécutez les commandes suivante dans votre répertoire d’espace de travail:

ionic start BarcodeScanner blank
cd BarcodeScanner
ionic platform add android
ionic platform add ios

Rappelez-vous, si vous n’êtes pas sur Mac, vous ne pouvez pas ajouter et construire la plate-forme iOS.

La prochaine chose que nous voulons faire est d’ajouter le plugin du scanner de code à barres dans notre projet. Cela peut être fait en procédant comme suit à partir d’une ligne de commande:

Maintenant, techniquement, vous pouvez continuer à construire votre application avec juste le plugin, mais nous allons installer l’extension AngularJS ngCordova pour rendre notre vie un peu plus facile.

Commencez par télécharger la dernière release ngCordova et copier le fichier ng-cordova.min.js dans le répertoire de votre projet de www/js.

Pour que l’extension fonctionne il faut le script avant la ligne cordova.js dans notre fichier index.html. Il ressemblera à quelque chose comme ceci:

Avec votre fichier index.html mis en place, nous avons maintenant besoin d’ajouter le kit d’extension à notre fichier app.js. Après votre fichier angular.module dois ressembler à quelque chose comme ce qui suit:

It is now time to work some programming magic.  Create a controller and include the following method to initialize the barcode scanner.  For this example, I did the following:

Il est maintenant temps de travailler un peu d’Angular. Créer un contrôleur et inclure la méthode suivante pour initialiser le lecteur de codes barres. Pour cet exemple, je l’ai fait ce qui suit:

Vous remarquerez que nous avons dû inclure $cordovaBarcodeScanner dans notre contrôleur. Le scanner retourne une promesse AngularJS, donc s’il y a une erreur ou de succès, nous saurons à ce sujet.

Juste comme ça, vous avez un scanner de codes à barres très simple dans votre application Ionic Framework.

Github Repo

Video Demo