![ionic](https://ionicframework.com/img/meta/ionic-framework-og.png)
>[Source](https://ionicframework.com)
#### Repository
https://github.com/ionic-team/ionic

#### What Will I Learn?
In the [previous tutorial](https://steemit.com/utopian-io/@hsynterkr/ionic-framework-tutorial-1-qr-code-generator-app) I explained how to generate QR Code with Ionic. In this tutorial I will try to show you how to read any QR Code with Ionic and how to parse the data in QR Code.

- You will learn how to generate Scan barcodes with Ionic Framework
- You will learn how to parse data from scanned barcode with Ionic Framework

#### Requirements

- NodeJS & NPM
- Ionic NPM Package
- Typescript & Angular Knowledge

#### Difficulty
- Intermediate / Advanced

#### Start with a Blank App
First, start a simple Ionic application with following command, this command will create a simple Ionic application with  starter template.

````
$ ionic start myApp blank
````

#### Add Barcode Scanner Package with NPM
I will use the Ionic Native Barcode Scanner plugin to scan the barcodes. Barcode Scanner Plugin opens the camera of phone and scans barcodes automatically, then returning scanned data back. You can easily read the raw data by assigning the returned data to a variable. Now download the barcode scanner plugin from NPM with the following commands.
````
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner
````
Once you have completed downloading the library with NPM, you need to import this library into the app.module.ts file and add it to the providers list.
````
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    BarcodeScanner,
    ...
  ]
})
export class AppModule {}
````
Once you have imported the libraries, you can start working on the home page to read the barcodes, QR codes etc.
Reading barcodes with Ionic is really easy. You only need to define a variable for scanned data and assign the returned data from scanCode() function to the scanned_code variable.

````
export class HomePage {
  private scanned_code = null;

  constructor(public navCtrl: NavController,
    private barcodeScanner: BarcodeScanner) { }

  scanCode() {
    this.barcodeScanner.scan().then(data => {
      this.scanned_code = data;
     }).catch(err => {
         console.log('Error', err);
     });
  }
}
````
I just created a scanCode() function and defined a variable(scanned_code) to assign scanned data. I initially defined the scanned_code variable to be null. I have defined this variable as null because if there is no barcode data read from the camera, it will not be shown on the home page. So on the home page only the data read from a real barcode will be displayed.
The scanCode() function is also simple, it just triggers the camera, if there is any data from the barcode, it takes the data and assigns it to the scanned_code variable.

Now, you just need to add a button on the home page to trigger the scanCode() function.
````
<button (click)='scanCode()' color="dark"><ion-icon name="qr-scanner"></ion-icon></button>
````
#### Deploying to an Android Phone 
You can test the app on your Android phone with the following commands.
````
$ ionic cordova build android
````
 I installed my own phone and made a short gif. I just scanned the QR code of my Litecoin wallet on the phone. Yeah, it's working :)

 
[Click to watch via IPFS](https://steemia.net/ipfs/QmZThh73Xh2cN8k1tPE6VyWM9vedrP2DVNhhzwZXr1fWMF)

#### Curriculum
[[Ionic Tutorial #1] - QR Code Generator App](https://steemit.com/utopian-io/@hsynterkr/ionic-framework-tutorial-1-qr-code-generator-app)

#### Proof of Work Done
https://github.com/hsynterkr/Ionic-QR-Code-Generator-Scanner