[Ionic Tutorial #1] - QR Code Generator App

Source

Repository

https://github.com/ionic-team/ionic

What Will I Learn?

• You will learn how to generate QR Code with Ionic Framework
• You will learn how to encode data to QR Code with Ionic Framework

Requirements

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

Difficulty

• Intermediate / Advanced

Start an App

First, start a blank Ionic application with the following command. This command will create a simple Ionic application.

$ ionic start myApp blank

The project structure will be as follows.

Add QR Code Generator Package with NPM

I will use the ngx-qrcode2 library to generate QR (Quick Response) code.
ngx-qrcode2 is an Angular 4+ Component Library for Generating QR (Quick Response) Codes.

This library is a nice option to generate the QR Code since the angular libraries can be used with the Ionic framework.

npm install ngx-qrcode2 --save

After downloading the library with NPM, you need to import this library in your app.module.ts file.

import { NgxQRCodeModule } from 'ngx-qrcode2';

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    NgxQRCodeModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule {}

Once you have imported the ngx-qrcode2 library, you can start working on the home page to generate QR codes.

Generate first QR Code

First, create 2 variables to create QR Code data. I will keep a simple billing object in QR Code containing amount, account and currency information. I recommend you keep it as JSON so you can parse it more easily.

    private created_code= null;
    private qr_data = {
    "amount": "",
    "account": "",
    "currency": ""
  }

Once you have created the variables, create a function to generate the QR Code. This function will encode the data for the QR Code to be created.
Stringify your data with JSON to write the data as QR Code. If you want to scan the QR Code, you can parse it with JSON easily.

  createCode() {
    this.qr_data.account = 'hsynterkr';
    this.qr_data.currency = 'USD';
    this.qr_data.amount = '25'

    this.created_code = JSON.stringify(this.qr_data);
  }

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    private created_code= null;
    private qr_data = {
    "amount": "",
    "account": "",
    "currency": ""
  }

  constructor(public navCtrl: NavController) { }


  /** 
  *  Method to issue QR Code
  */
  createCode() {
    this.qr_data.account = 'hsynterkr';
    this.qr_data.currency = 'USD';
    this.qr_data.amount = '25'

    this.created_code = JSON.stringify(this.qr_data);
  }
}

After completing the typescript tasks, you will write the html file and have a nice QR Code generator application, let's continue.

First, create a button to trigger the createCode() function. The createCode() function will assign the QR Code data to the created_code variable. The QR code will only be displayed when the value of the create_code variable is not null.
That's why we have initially set the create_code variable to null. When createCode() function is triggered, QR data will be assigned to create_code variable and QR Code will be displayed at homepage.

    <button ion-button round block color='primary' (click)='createCode()'>
        Create QR Code
    </button>

<ion-card *ngIf="created_code">

    <ngx-qrcode [qrc-value]="created_code"></ngx-qrcode>

    <ion-card-content>
        <h2>Encoded Data</h2>

        <p>{{ created_code }}</p>
        
    </ion-card-content>
</ion-card>

With the following command you can run your Ionic application and start to generate QR Code.

$ ionic serve --l

Curriculum

This is the first post of this curriculum.

Proof of Work Done

https://github.com/hsynterkr/Ionic-QR-Code-Generator-Scanner