Building a Mobile App to Scan QR Codes

QR codes are everywhere. Ever wanted to build an app that could scan the QR codes you see all around you? With Telerik AppBuilder and the Telerik Verified Plugins Marketplace this task is simple. To get started, head to Telerik Platform solution at platform.telerik.com.

This tutorial assumes you have a Telerik Platform account. If you don't, you can create one at https://platform.telerik.com/#register. The Telerik Platform solution is a paid product, but everyone gets a free 30-day trial. After you create an account, you'll be taken through a guided tutorial that teaches you about the Platform. If you haven't used the Telerik Platform solution, I recommend completing the guided tutorial before continuing with this article.

Installing the Barcode Plugin

Within the Telerik Platform solution, start by creating a new AppBuilder project if you don't already have one. Feel free to use any template or library you'd like; the QR-reading code is library agnostic. Once you're in your AppBuilder, look for the Plugins link in the Project Navigator.

From there, scroll down until you see the Other Plugins section, and check the BarcodeScanner plugin from the list.

The BarcodeScanner plugin handles a large range of barcode types, including QR codes. To get an idea of how it works you can head over to http://plugins.telerik.com/plugin/barcodescanner to look at the plugin's API, which is a single method: cordova.plugins.barcodeScanner.scan(). You pass scan() a success callback, an error callback and an object that contains configuration variables (if you need them).

Using the Barcode Plugin

To show the plugin in action, add the following code to your app's index.html file:

<button style="font-size: 3em;">Scan</button></p>

<script>
    document.addEventListener( "deviceready", function() {       
        function scanCode() {
            cordova.plugins.barcodeScanner.scan(
                function() {}, // success
                function() {}  // error
            );
        }
       document.querySelector( "button" ).addEventListener( "click", scanCode );
    });
</script>

This adds a button that calls the BarcodeScanner plugin's scan() method on click. To test this in AppBuilder, you need to deploy your app to the AppBuilder companion app.

Deploying to the Companion App

Start by downloading the companion app on your iOS, Android or Windows Phone device (search for “AppBuilder”). Start up the companion app on your device and use a two-finger swipe to load the companion app's integrated QR reader. (Yes, it's a bit ironic that you're using a QR reader to load your QR-reading app.)

Next, you'll need to generate a QR code to scan from the browser. Back in your AppBuilder project and select Build from the Run menu.

In the dialog that comes up, choose your device's platform (Android/iOS/Windows Phone), select the “AppBuilder companion app” radio button, then click Next. This gives you a QR code that you can scan from the companion app to transfer your app to your device.

If you try out your app, the Scan button should now bring up your device's barcode reader. Cool, huh? But there's one problem, the barcode reader doesn't actually do anything. That is, it'll read barcodes and QR codes, but after it completes nothing happens. That's because you're not actually doing anything in the success callback of cordova.plugins.barcodeScanner.scan() yet. Let's change that.

Finishing Up

To make this example a bit more useful, switch your app's cordova.plugins.barcodeScanner.scan() call to use the one below:

cordova.plugins.barcodeScanner.scan(
    function( result ) {
        if ( !result.cancelled ) {
            window.open( result.text, "_blank" )
        }
    },
    function( error ) {
        navigator.notification.alert( "Unfortunately there was a problem reading the barcode." );
    }
);

This example implements both a success and error callback for the scan() call. The BarcodeScanner provides information about the barcode in the function's argument—in this case result. This code uses that information to open a QR code's URL in an in-app browser. For more information on the details of how this plugin's API works, refer to its documentation.

So, how do you update the companion app to use this new code? AppBuilder has a neat little feature called LiveSync that makes this process quite simple. All you have to do is perform a three-finger tap and hold within the AppBuilder companion app.

This gesture takes the code from your development environment and transfers it to your device. After refreshing, you should now have a completely functional QR reader. To test it, try scanning the QR code below. If you're taken to a URL in a browser, it worked!

Having issues? Let us know in the comments and we'll try to help out. You can also check out our BarcodeScanner sample app for a fully functional starting point.