Ionic - QR Code Scan Example

[IONIC Example] 

QR Code Scan Example

IONIC에서 QRCode를 스캔하고, 스캔을 위해 카메라 권한을 얻어 오는 방법을 소개한다.

IONIC 설치 등은 앞 글(설치 및 새로운 앱 시작)을 참조

우선 만들어진 화면부터 보자

하단 두개의 탭으로 구성된 두개의 화면 "Home" 과 "Scan" ...

"Scan" 탭을 누르면 QR을 스캔할 수 있고, Home에서는 QR을 생성할 수 있도록 구성한다.

IONIC Blank 앱을 시작한다. 홈에서 버튼을 클릭하면 QR 스캐너 화면으로 이동하게 구성할 것이며 메뉴나 탭이 필요하지 않다. blank 탬플릿을 선택한다.

> ionic start QRCodeScannerApp blank

 QRCodeScannerApp이 만들어지면 바로 시작!

> cd QRCodeScannerApp
> ionic serve

QR Scan을 위해 플러그인을 설치한다.

https://ionicframework.com/docs/native/qr-scanner/

> ionic cordova plugin add cordova-plugin-qrscanner
> npm install --save @ionic-native/qr-scanner

QR Scan은 새로운 페이지에서 카메라를 활성화하여 코드를 스캔한다. 이를 위한 ScanPage를 추가한다.

> ionic g page Scan

준비는 끝났다. 

app.module.ts에 추가한 QRScanner를 provide 해야하며, 추가한 ScanPage도 잊어선 안됀다.

./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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ScanPage } from '../pages/scan/scan';

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

다음으로 홈 화면에 QR Scan 버튼을 생성하고, 생성된 버튼을 클릭하면 ScanPage가 열리도록 한다.

./src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic QR
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button full icon-left (click)="openQRScanner()" color="secondary">
    <ion-icon name="qr-scanner"></ion-icon>QR SCAN
  </button>
</ion-content>

./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 {

  constructor(public navCtrl: NavController) {
  }

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

}

여기까지 완성된 그림이다. 

QR Scan 버튼은 ICON을 포함하고 있으며, 버튼 태그에 icon-left 속성으로 배치했다.

ICON은 IONICONS에서 찾아서 사용한다.

이제 ScanPage를 코딩한다.

QR Code Scanner는 카메라 모듈을 이용한다. 따라서 카메라 모듈 사용 권한을 획득해야 하며 이는 필요한 시점에 자동으로 획득을 위해 사용자에게 묻는다.

물론  Android Permissions 플러그인 등으로 사전에 사용자로 부터 획득할 수 있다.

자 아래를 따라서 ScanPage를 작성한다. 

./src/pages/scan/scan.html의 헤더 부분을 제외하고 불필요한 것은 모두 지운다. 어차피 카메라는 전체 화면으로 뜰 예정이니..

<ion-header>
  <ion-navbar>
    <ion-title>
      QR Scan
    </ion-title>
  </ion-navbar>
</ion-header>

./src/pages/scan/scan.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, AlertController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@IonicPage()
@Component({
  selector: 'page-scan',
  templateUrl: 'scan.html',
})
export class ScanPage {

  constructor(public navCtrl: NavController,
    public qrScanner: QRScanner,
    public platform: Platform,
    public alertCtrl: AlertController,
    public navParams: NavParams) {

    platform.ready().then(() => {
      this.openScanner();
    });
  }

  showCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
  }

  hideCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
  }

  openScanner() {
    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) {
        // camera permission was granted
        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
          console.log('Scanned something', text);
          // this.vibration.vibrate(500);
          this.scanned(text);
          this.qrScanner.hide(); // hide camera preview
          scanSub.unsubscribe(); // stop scanning
          this.hideCamera();
          this.navCtrl.pop();
        });
        this.qrScanner.resumePreview();
        this.showCamera();
        // show camera preview
        this.qrScanner.show();
      }
    })
    .catch((err: any) => {
      if(err.code == 1){
        this.alertCtrl.create({
          title: "Camera Permission",
          message: "QR 스캔을 위한 카메라 권한이 거부되었습니다. 설정에서 허용해 주세요.",
          buttons: [{
            text:'확인',
            handler: () => {
              this.navCtrl.pop();
              this.qrScanner.openSettings();
            }
          }]
        }).present();
      }
    });
  }

  scanned(data: any) {
    window.open(data, '_blank');
  }
}

IONIC은 웹 기반의 Native App으로 구성되며 기본은 흰색의 배경색을 가진다. 이 배경을 투명하게 하지 않는다면 카메라 모듈이 활성화 되어 스캔할 준비가 되어도 단말기 화면에는 그냥 IONIC의 흰 배경 등의 현재 화면이 그대로 나타나며 카메라가 활성화 됬음을 인지하기 어렵다. 

실제 화면이 흰색이지만 QR Scanner Plugin이 정상 동작된 경우 카메라를 QRCode가 적절히 찍힐 위치로 옮기다 보면 QR을 읽어냄을 알 수 있다. 

여하간 이 배경색을 투명하게 만드는 CSS를 추가 할 필요가 있다.

/src/app/app.scss

.cameraView {
    background: transparent none !important; 
}

app.scss는 빈 파일이다. 위 scan.ts의 23, 27라인의 두 함수는 .cameraView class를 ion-app 태그에 추가함으로서 투명 효과를 낼 예정이다. ion-app에 해당하는 app.scss에 추가하자

모두 끝났으니 이제 폰 테스트를 위해 빌드한다.

> ionic cordova build android

빌드 후 폰에 배포하면 아래 그림처럼 카메라가 실행되어 스캔할 QR을 기다린다.

보다 QR을 스캔하는것 스럽게 QR 스캐너 스럽게 만들어보자.

우리가 원하는건 가이드라인이 있는 아래 그림 아닌가 ... ??

./src/pages/scan/scan.html을 열어 아래처럼 img를 추가한다.

<ion-header>
  <ion-navbar>
    <ion-title>QR Scan</ion-title>
  </ion-navbar>
</ion-header>
<div>
  <img src="assets/imgs/qrscanner.png" style="display:block;width:100%;height:auto;margin-left:auto;margin-right:auto;" />
</div>

이 이미지 qrscanner.png는 투명 배경에 빨간 가이드라인만을 그려놓은 이미지 이며 이 글의 첨부파일이다.

qrscanner.zip

qrscanner.png를 ./assets/imgs하위에 복사해 넣는다.

이제 다시 빌드 후 실행하여 스캔해보자.

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

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

* 이 글 내의 소스코드 작성, 편집은 TypeScript 작성이 용이한 Visual Studio Code를 이용하였다.