[ionic] barcode scanner

플랫폼

http://localhost:8100/?ionicplatform=android

프로젝트 생성

Run the following command to generate a new Ionic 2 application

ionic start ionic-todo blank --v2

페이지 생성

Run the following command to generate a new add-item page:

ionic g page AddItem

프로바이더 생성

Run the following command to generate a Data service:

ionic g provider Data

10 Minutes with Ionic 2: Using the Camera with Ionic Native

http://blog.ionic.io/10-minutes-with-ionic-2-using-the-camera-with-ionic-native/

http://www.gajotres.net/ionic-2-making-rest-http-requests-like-a-pro/

barcode scanner

https://www.thepolyglotdeveloper.com/2016/02/add-barcode-scanning-functionality-to-your-ionic-2-app/

book-barcode.html

<!--
  Generated template for the BookBarcodePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>BookBarcode</ion-title>
  <ion-buttons end>
    <button (click)="scan()">
      <ion-icon name="add"></ion-icon>
      scan
    </button>
  </ion-buttons>
</ion-navbar>


<ion-content padding class="book-barcode">  
  <ion-input [(ngModel)]="barcode" ></ion-input>
  <ion-input [(ngModel)]="format" ></ion-input>  
  <img [src]="imgSrc" *ngIf="imgSrc"/>
  <ion-input [(ngModel)]="title" ></ion-input>
  <ion-input [(ngModel)]="subtitle" ></ion-input>
</ion-content>

book-barcode.ts

import {Page, NavController, Platform} from 'ionic-angular';
import {BarcodeScanner} from 'ionic-native';
import {Http} from 'angular2/http';
/*
  Generated class for the BookBarcodePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Page({
  templateUrl: 'build/pages/book-barcode/book-barcode.html',
})
export class BookBarcodePage {
  public barcode;
  public barcodeText;
  public format;
  public imgSrc;
  public title;
  public subtitle; 

  constructor(public nav: NavController, public platform: Platform, public http: Http) {
    this.nav = nav;
    this.platform = platform;
    this.http = http;
  }

  scan() {
    BarcodeScanner.scan().then((result) => {
      this.barcode = result.text;
      this.format = result.format;

      let link = "http://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=" + this.barcode;
      this.http.get(link)
        .subscribe(data => {
          var parser = new DOMParser();
          var doc = parser.parseFromString(data.text(), "text/html");
          let imgSrc = 
          this.imgSrc = doc.querySelector('.cover a img').getAttribute('src');
          this.title = doc.querySelector('.title strong').innerHTML.trim();
          this.subtitle = doc.querySelector('.title .back strong').innerHTML.trim();
        });
    });
  }
}

참고

• http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/

android-debug.apk