Ionic Framework Introduction – Barcode Scanner

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.

IMG_4315

Our app after a scan is completed.

 

 

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.

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:

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!

IMG_4314

The barcode scanner in action!

 

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!

16 thoughts on “Ionic Framework Introduction – Barcode Scanner

  1. 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!

    Like

  2. 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

    Like

  3. 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 ?

    Like

  4. 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 ?

    Like

  5. 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.

    Like

  6. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s