Create A Barcode Scanner Using Ionic Framework
Implement A Barcode Scanner Using Ionic Framework
Recently, I needed to scan barcodes in one of my apps.
Actually, scanning of quick response (QR) codes was required. After some research, I found that ngCordova had an extension for the Apache Cordova plugin BarcodeScanner which has the ability to scan barcodes in the following formats:
1. QR Code
2. Data Matrix
3. UPC E
4. UPC A
5. EAN 8
6. EAN 13
7. Code 128
8. Code 39
9. ITF
I realised that all the formats would be needed at some or the other point of time. The very popular ZXing library is used by the plugin itself.
We will need to create a a new Ionic Framework project for implementing the barcode scanner in our Android and iOS application.
New Ionic Project With Android And iOS SupportShell
ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios
Here, you need to note that if you’re not using a Mac, you cannot add and build for the iOS platform.
The next thing we want to do is add the barcode scanner plugin into our project. This can be done by doing the following from a command line:
Apache Cordova Barcode ScannerShell
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
To make things easier and simpler, we will install the AngularJS ngCordova extension instead of continuing to build our application with just the plugin.
Start by downloading the latest ngCordova release and copying the ng-cordova.min.js file into your project’s www/js directory.
The script is to be included before the cordova.js line in our index.html file.This is to add the extension
set into our application. And it will look something like this:
index.htmlXHTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
With your index.html file set up, now we need to add the extension set to our app.js file. Alter your angular.module line to look something like the following:
app.jsJavaScript
angular.module('starter', ['ionic', 'ngCordova'])
It is now time to work some programming magic. Create a controller and include the following method to initialize the barcode scanner.
You can do something like this:
app.jsJavaScript
exampleApp.controller("ExampleController", function($scope, $cordovaBarcodeScanner) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
});
If you noticed, we had to include $cordovaBarcodeScanner in our controller.
The scanner returns an AngularJS promise, so if there is an error or success we’ll know about it.
And here, you’ve got a very simple barcode scanner in your Ionic Framework application.
0 comments