How to Scan QR Codes with Sencha Touch and PhoneGap

QR Codes and NFC (Near Field Communication) didn’t quite penetrate into the mobile world as much as they were perhaps expected to, a lot of people consider the technologies to be a bit of a flop. QR Codes definitely have their uses though (as well as NFC for that matter), and I think the main problem is that most people don’t have a QR Code reader installed on their phone. Nobody wants to download an app (or even just open one), and scan some companies QR code on a poster. If you’re marketing something to someone, you had better make it as easy as possible for them to get where you want them to go (and arguably, this is what QR Codes tried to do).

When people are motivated by some other factor to scan a QR code though I think it can be much more effective. I’ve seem a lot of apps popping up recently where QR codes are used as a means of identification for a user, so they can be awarded points for visiting or purchasing from stores. If they have some rewards app with a QR code reader built in, they have much more incentive to actually use it and it is already convenient for them to access.

Let’s see some code

That’s enough about the viability of QR codes though, let’s get into how to actually implement our own QR Code reader with PhoneGap Build (and in this instance, specifically Sencha Touch, but you can use any framework of your choice). In fact, we won’t just be creating a QR Code reader but a more general barcode reader that can read the following types of barcodes on iOS and Android:

• QR_CODE
• DATA_MATRIX
• UPC_E
• UPC_A
• EAN_8
• CODE_128
• CODE_39
• CODE_93
• CODABAR
• ITF

The Barcode Scanner is a third party plugin available from the plugins section on the PhoneGap Build website. Specifically, you can find it here:

https://build.phonegap.com/plugins/261

It is recommended that you currently use version 1.1.0 of this plugin, so let’s explicitly require that version in our config.xml file (if you don’t know how to set up PhoneGap Build yet, take a look at this post first!):

<gap:plugin name="com.phonegap.plugins.barcodescanner" version="1.1.0" />

but as is always the case with PhoneGap Build plugins, you can omit the version tag to always include the latest version of the plugin when you build. In most cases this will probably be fine, but it is possible that the plugin will be updated in a way that could break your application.

Side note: I did some pretty in depth research trying to figure out why the plugin wasn’t working for me until I realised I forgot to include the plugin in my config.xml file! Remember to check the simple stuff when debugging.

Now that you have the plugin included and available in your application, you can trigger the scanner (which will switch to the users camera with the scanner overlay) with the following code:

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);
  }
);

If you trigger this and scan a barcode, you should see the results passed back into the appliaction. As well as reading barcodes, we can also encode the following types with this plugin:

• TEXT_TYPE
• EMAIL_TYPE
• PHONE_TYPE
• SMS_TYPE

And to trigger the encode function, you can use the following code from the documentation:

cordova.plugins.barcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) {
cordova.plugins.barcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com", function(success) {
	alert("encode success: " + success);
	}, function(fail) {
		alert("encoding failed: " + fail);
	}
);

If you have any questions or if you want to chat about the usefulness of QR codes please feel free to comment below.