One of my most popular posts is Ionic Framework Introduction – Barcode Scanner. Apparently, people like making barcode scanners! Who knew!?!

Today, we’re going to do a little update to that post and get our Ionic 2 on! Since the previous app was so basic, I’m not going to actually upgrade the code, we’ll just start from scratch. Since we only have “15 Minutes” (YMMV) let’s get going!

(Side note: Ionic 2 is currently in beta, check the actual Ionic docs before running any of the commands on this post, since they may be outdated! http://ionicframework.com/docs/v2/getting-started/installation/)

I HIGHLY recommend you pull down the code and follow along with the blog post with the code open in your favorite editor! This is not meant to be a step-by-step blog post, it is more of a “highlight reel”. https://github.com/adamweeks/ion-scanner-v2

First, we need to install Ionic 2’s great SDK Command Line Interface:

$ npm install -g ionic@beta

Next, let’s create our project application. Since we’re feeling adventurous, we’ll add “–ts” to the options, this generates our project in Typescript! The “blank” means we are starting with an empty project instead of a demo.

$ ionic start ion-scanner-v2 blank --v2 --ts

We’ll also add support for actually running our app on an iOS and android device

$ sudo npm install -g cordova
$ ionic platform add ios
$ ionic platform add android

Now, in order to get access to on device capabilities, like the camera or location data, we need to install a cordova plugin. With Ionic v1, we used ngCordova plugins. Now, with Ionic v2, the plugins can easily be installed via the CLI. Let’s install our barcode scanner plugin.

$ ionic plugin add phonegap-plugin-barcodescanner

Home Screen Editing

Let’s dive into the code. Our first view is the home screen. Its controller lives in app/pages/home/home.ts. In order to get access to our barcode scanner plugin, we’ll need to import it at the top of the file:
import {BarcodeScanner} from 'ionic-native';
Next, create a function that we will tie to a button that will open the barcode scanner and scan:
click() {
BarcodeScanner.scan()
.then((result) => {
if (!result.cancelled) {
const barcodeData = new BarcodeData(result.text, result.format);
this.scanDetails(barcodeData);
}
})
.catch((err) => {
alert(err);
})
}

You’ll notice that scanning is very simple. Just “scan()” and process the promise it returns. Since this is Typescript/ES2015, we’ll make a new “BarcodeData” class as well so we can use it in the app:

export class BarcodeData {
  constructor(
    public text: String,
    public format: String
  ) {}
}

On the home.html file, we can throw a button in that will open the scanner by calling our “click()” function:

<button block (click)="click()">Scan</button>

In order to give the user a little visual feedback, after our scan, we’ll push our result view (which we haven’t created yet) onto the navigation stack. In mobile applications, screens are pushed onto the main view of the app to give users a sense of a path that they are following into the app. Let’s create that view now.

The Scan Page

Create two files: app/pages/scan/scan.html and app/pages/scan/scan.ts. Our scan controller does this: accepts a BarcodeData object and displays it, that’s all. Data is passed from one page to another via NavParams. Our constructor for the controller looks like this:

barcodeData: BarcodeData;
constructor(private nav: NavController, navParams: NavParams) {
  this.barcodeData = navParams.get('details');
}

We’re assigning the BarcodeData object that is passed in via the “details” parameter on the NavParams object. Then, we’ll display it in scan.html file that we created:

<ion-list-header>Barcode</ion-list-header>
<ion-item>
{{ barcodeData.text }}
</ion-item>
<ion-list-header>Format</ion-list-header>
<ion-item>
{{ barcodeData.format }}
</ion-item>

Navigating

Now, we can push our newly created view with:

scanDetails(details) {
this.nav.push(ScanPage, {details: details});
}

The “{details:” parameter is what we are passing to the NavParams object in the Scan Page.

We should now have a working barcode scanner, but sadly, we cannot test it on our computers. We will have to deploy our code to the device.

Deployment

Ionic offers a lot of ways to deploy to a device. You can use the “Ionic View” app and view the app via $ ionic upload. But, being that I’m a former XCode developer, I simply run $ ionic build and open the resulting XCode project from platforms/ios

There are a lot more deployment options as well and you can read about them here: http://ionicframework.com/docs/v2/cli/

Conclusion

So, this may or may not have taken you 15 minutes, but if you do it again, it probably won’t take any longer. Ionic 2 with cordova plugins has make things extra simple to get started in the world of application development!