Ionic - QR Code Creation (ngx-qrcode) Example

[IONIC Example] 

ngx-qrcode Example

앞 글에서 QRCode를 스캔했다면, 이번엔 QR코드를 생성해보도록 하자

이번 예제는 새로운 앱을 만들지 않고 앞글(QR Code Scan Example)의 소스를 활용하도록 한다. 원한다면 앞글의 기억을 되살려 새로운 blank앱을 만들어 진행해도 좋겠다.

앞 예제의 홈화면에 QR에 들어갈 Text를 직접 입력받고 생성 버튼을 클릭하면 즉시 화면에 QR이 출력되도록 한다.

먼저 ngx-qrcode를 설치 한다.

> npm install --save ngx-qrcode2

다음으로 NgxQRCodeModule을 app.module.ts에 import한다.

./src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { QRScanner } from '@ionic-native/qr-scanner'

import { NgxQRCodeModule } from 'ngx-qrcode2';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ScanPage } from '../pages/scan/scan';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ScanPage
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ScanPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    QRScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

다음 home.html에 qrText를 받을 input박스 하나와 QR을 생성할 button을 만든다.

그리고 생성된 QR이 그려질 Ionic Card를 하나 추가한다.

./src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic QR
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-item>
    <ion-input type="text" placeholder="My QR Text" [(ngModel)]="qrText">
    </ion-input>
  </ion-item>
  <button ion-button full icon-left (click)="createQR()" color="primary">
      Create QR
  </button>
  <button ion-button full icon-left (click)="openQRScanner()" color="secondary">
    <ion-icon name="qr-scanner"></ion-icon>QR SCAN
  </button>

  <ion-card *ngIf="confirmedQR">
    <ngx-qrcode [qrc-value]="confirmedQR"></ngx-qrcode>
    <ion-card-content>
      <p>{{ confirmedQR }}</p>
    </ion-card-content>
  </ion-card>

</ion-content>

끝으로 QR 생성할 버튼을 클릭하면 동작한 이벤트 핸들러 createQR()을 home.ts에 만든다.

./src/pages/home/home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  qrText = null;
  confirmedQR = null;

  constructor(public navCtrl: NavController) {
  }

  openQRScanner() {
    this.navCtrl.push(ScanPage);
  }

  createQR() {
    this.confirmedQR = this.qrText;
  }

}

이제 잘 동작 하는지 확인해보자.

이 글의 소스코드는 아래에서

https://github.com/lugam/ionic-qrcode-exam