cordova에서 스마트 폰 앱 개발 6

바코드 리더

모처럼의 스마트 폰 앱이므로, 스마트 폰만의 기능

라고 말하면 바코드 리더를 사용해 보자.

카메라는 네이티브의 기능이므로 할 수 있는 거야?

그리고 궁금해서, 조사해 보면 cordova에서 플러그인이 제공되고있는 모습

h tps // 이오니 cf 라메를 rk. 코 m / 도 cs / 나치 ゔ / 바 r 코데 - s Kane r
htps : // 기주 b. 이 m / p 네가 p / p

샘플 코드에서는 실제 거동을 모르기 때문에 구현하고 움직여 보겠습니다.

실행 환경

우선, 환경을 확인

C:\cordova_app>ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.2.3

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   NodeJS : v10.16.0
   npm    : 6.9.0
   OS     : Windows 10

병아리가 되는 애플리케이션 만들기

새 블랭크로 애플리케이션 만들기

C:\cordova_app>ionic start helloReader

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
√ Preparing directory .\helloReader - done!
√ Downloading and extracting blank starter - done!

Installing dependencies may take several minutes.

...

바코드 리더를 실행하는 페이지도 작성합니다.

C:\cordova_app>cd helloReader

C:\cordova_app\helloReader>ionic g page reader
> ng.cmd generate page reader
CREATE src/app/reader/reader.module.ts (543 bytes)
CREATE src/app/reader/reader.page.html (125 bytes)
CREATE src/app/reader/reader.page.spec.ts (691 bytes)
CREATE src/app/reader/reader.page.ts (256 bytes)
CREATE src/app/reader/reader.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (548 bytes)
[OK] Generated page!

화면 전환하고 싶습니다.

이전 cordova에서 스마트 폰 앱 개발 5은 링크 태그로 무리한 전환 (게다가 돌아갈 수 없음)했기 때문에

ionic 와 같은 전환을 구현해보십시오.

우선 라우팅 확인

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  { path: 'reader', loadChildren: './reader/reader.module#ReaderPageModule' },
];

reader 페이지가 명령에서 생성되었으므로 자동으로 루트 정의에 추가됩니다.

수동으로 만든 경우 여기에 추가가 필요합니다.

초기 페이지에 버튼 추가

home.page.html

  <div class="ion-padding">
    <ion-button (click)="send('/reader')">Scanner</ion-button>
  </div>

추가한 버튼의 처리를 스크립트에 기재

home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  send(page: string){
    this.navCtrl.navigateForward(page);
  }

}

전환 대상 페이지로 돌아가기 전환 추가

reader.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>reader</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

전환할 수 있는지 확인



바코드 리더 구현

cordova 플러그인 설치

C:\cordova_app\helloReader>ionic cordova plugin add phonegap-plugin-barcodescanner

패키지도 설치

C:\cordova_app\helloReader>npm install @ionic-native/barcode-scanner

리더 페이지에 실행 버튼 배치

reader.page.html

<ion-content>
  <ion-button (click)="scan()">すきゃん</ion-button>
</ion-content>

리더에 바코드 리더 스크립트 작성

reader.page.ts

import { Component, OnInit } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-reader',
  templateUrl: './reader.page.html',
  styleUrls: ['./reader.page.scss'],
  providers: [ BarcodeScanner ],
})
export class ReaderPage implements OnInit {

  constructor(private barcodeScanner: BarcodeScanner) { }

  ngOnInit() { }

  scan() {
    this.barcodeScanner
      .scan()
      .then(barcodeData => {
        alert("Barcode data " + JSON.stringify(barcodeData));
      })
      .catch(err => {
        console.log("Error", err);
      });
  }

}

실행해보기



버튼이 깨져

말하자면, 일본어를 처음 사용했다고 생각하면서 설정이 있는지 알아본다

일본어 설정이 필요하지는 않지만 html 문자 코드 문제입니다.

html 파일의 문자 코드를 UTF-8로 저장하고 다시 확인하면 일본어가 깨지지 않고 표시되는 것을 확인할 수 있었다



버튼을 눌러 보면 개발자 도구가 오류가 발생합니다.

바코드 리더가 cordova의 플러그인이기 때문에 ionic 단독으로는 동작하지 않는 것일까



에뮬레이터에서의 동작 확인

그렇다면 에뮬레이터로 시작하십시오.



버튼을 누르면 카메라? 가 시작되었습니다 ... Poi?

뭔가, 가상의 세계를 카메라로 비추는 모습

※ALT+마우스 이동으로 시점 변경, ALT+WASDQE로 이동할 수 있습니다

… 버려, 그렇다.

살펴보면 Android Studio의 AVD Manager에서 에뮬레이터 카메라 설정이 가능합니다.

AVD Manager에서 사용하는 기기의 설정 변경을 선택하고 하단의 Show Advanced Settings를 선택합니다.



Camera 항목의 Back:을 VirtualScene에서 Webcam0으로 변경
※ 노트북 PC의 카메라를 이용하기 위해 Webcam0을 설정합니다.



Finish를 눌러 저장을 잊지 않도록

다시 에뮬레이터를 실행해보십시오.



오~

뭔가 가로로 되어 있었기 때문에 에뮬레이터를 회전시켜 바코드를 읽어 봅니다.

왼쪽 : WikiPedia에서 QR 코드 페이지에 있던 QR 코드를로드 한 결과

오른쪽: 카메라 시작 후 취소한 경우의 결과



JSON 형식으로 text, format, cancelled가 돌아왔다는 것을 알 수 있습니다.

그건 그렇고, 실제 기계에 앱을 설치해도 제대로 작동했습니다.

개발 환경에 카메라가 없으면 실제 기계에서 부탁드립니다.