Just when I thought I was out, they pulled me back in! After a year off of iOS programming, who knew that all the Angular work would bring me back to mobile.
After hearing about Ionic Framework on ng-air I decided to check it out. Ionic is a mobile framework based on Cordova. It allows us to write multi-platform mobile apps with a native feel by using angular and custom ionic directives. You can read plenty on their site for more information, so let’s get into it!
The Project
Of course, I have to make some sort of sample project when I’m learning a new platform, so I decided to write a basic barcode scanner app.
First things first, let’s install ionic:
$ npm install -g cordova ionic
When creating a new project, Ionic has a few different base templates to choose from. I created the ion-scanner project based off the tabs template:
$ ionic start ion-scanner tabs
Then we can add the ios platform simply by running:
$ ionic platform add ios
Since we don’t want to write the barcode scanning software from scratch, we can use a plugin from NgCordova, a site that contains angular extensions for cordova.
$ bower install ngCordova
Once that is installed, we can add the barcode scanner plugin found here:
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
That is all the setup we need to be capable of making a barcode scanning application with Angular.
The Code
My view is very simple. I’ve ripped out all but one tab from the sample project and emptied it (thinking about it now, I probably could have just used the empty template!). The main view has a “scan” button and a results area.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="card"> | |
| <div class="item"> | |
| <button class="button button-block button-positive"> | |
| <i class="icon ion-qr-scanner"></i> | |
| Scan Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="item item-divider">Scan Results</div> | |
| <div class="item item-text-wrap">{{vm.scanResults}} | |
| </div> | |
| </div> |
As you can see, there are some custom ionic directive that we are utilizing to give our application a more natural look. There are also lots of built in icons as well, you see we are using ion-qr-scanner on our button above.
In our controller, the most complicated thing about using the cordova plugins is knowing when the device is ready. Luckily, Ionic gives us $ionicPlatform.ready() function to throw our code into. Our controller with scanner looks like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('scanner.controllers', []) | |
| .controller('HomeController', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform) { | |
| var vm = this; | |
| vm.scan = function(){ | |
| $ionicPlatform.ready(function() { | |
| $cordovaBarcodeScanner | |
| .scan() | |
| .then(function(result) { | |
| // Success! Barcode data is here | |
| vm.scanResults = "We got a barcoden" + | |
| "Result: " + result.text + "n" + | |
| "Format: " + result.format + "n" + | |
| "Cancelled: " + result.cancelled; | |
| }, function(error) { | |
| // An error occurred | |
| vm.scanResults = 'Error: ' + error; | |
| }); | |
| }); | |
| }; | |
| vm.scanResults = ''; | |
| }); |
Funny how there are more lines of code devoted to displaying scan results and errors than actually scanning. I’ve written this code in Objective-C before and even with the built in scanner for iOS 7, it was never this easy!
Deploying
Ionic allows us to test our code in a browser window, but since we are doing a barcode scanner, we really need to run our project on hardware. If you have an Apple developer account, you can simply run ionic build ios and then open the XCode project in the platforms folder. I imagine most Angular developers are not though, but there’s an easy solution for that as well. Ionic now has ionic.io, a deployment service that in conjunction with Ionic View allows you to run apps on any device without having to do a native build.
We won’t go through the ionic.io setup process here because the documentation is so good. If you want to try it out follow along there.
Once installed we can actually scan barcodes!
Finally
Our first steps into native mobile development with Ionic are complete. I’m looking forward to utilizing it some more!
You can download my barcode scanner app here: https://github.com/adamweeks/ion-scanner
If you have any questions, feel free to contact me on twitter @AdamWeeks. I also hang out with a great group on slack called Angular Buddies, so join us there!
Adam Weeks 
Hi Adam, thanks for the plugin. Yours is much better than the other barcode plugin. It can scan longer barcode, this is essential for my app. Thanks a bunch !
LikeLike
hola adam , necesito una ayuda al ejecutar la app me genera un error diciendo que hace falta cordova como solucionarlo gracias.
LikeLike
I test in ios pad2 device.. IT CANRUN .. BUT IT NOT START CAMMERA WHEN I CLICK Scan Now ….
LikeLike
I’m having trouble integrating the code into my app. I downloaded your github code which works fine seperately but when I add ‘ionic.service.core’, or ‘ionic.service.push’ or ‘ionic.service.deploy’,my app goes blank. I made sure I had all the javascript files assoicated with these so I’m really not sure what’s going one. Any help you can provide is greatly appreciated!
LikeLike
I haven’t had a chance to compile this lately, so I’m not sure what the status of the code base is. I’ll retouch it in a bit and see.
LikeLike
Adam I’m getting a “Error: Cannot find module ‘cordova-common'” when trying to add a platform do you know what could be happening? thanks a lot
LikeLike
Hey sorry, I haven’t run the project lately. If you see some changes that needs to be fixed, please submit a PR.
LikeLike
Hi Adam, is there any way to only scan Qr codes? i dont need scan Barcodes and others just need Qr codes.
Thanks for share!
LikeLike
You should be able to scan QR codes with this plugin, I think.
LikeLike
Hi Adam, i want to store the scan result in a SQLite db in my iphone. I tried it myself but it doesn’t work… any help please ?
LikeLike
HI Adam and thanks for this nice tuto. Now i want to store the scan result in my SQLite database but it doesn’t work when i added to the current code. any help please ?
LikeLike
HI Adam and thanks for this nice and clear tuto. Now i want to store the scan result into may SQLite database but it doesn’t work when addind it to this current project.any help please ?
LikeLike
Hi,
$cordovaBarcodeScanner.scan() opens the camera. But when I scan any QR/Bar code no results are coming back. The camera window is opened but nothing happens. When I press the back button, I get an object with cancelled: true. Have you faced this issue or is there any way you can help to debug? Thanks.
LikeLike
Hi,
$cordovaBarcodeScanner.scan() – this line opens the camera but nothing happens when I try to scan any barcode or QR code. But when I press the back button I get an object with cancelled:true. I am using android phone. Have you faced this issue or can you help me debug this issue? Thanks.
LikeLike
Does it work for QR code scanning..?
LikeLike
Yes!
LikeLike