Ionic 3 - Barcode QR skener

Ionic 3 – Barcode QR skener

Zahvaljujući Ionic Native pluginovima moguće je u vrlo kratkom vremenu napraviti konkretnu Ionic aplikaciju koja će služiti svrsi. U ovom slučaju riječ je o aplikaciji za skeniranje barkoda što je posebno korisno u skladištima trgovina.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

$ ionic start BarcodeScannerApp blank
$ cd BarcodeScannerApp 
$ ionic cordova platform add android

Barcode Scanner

Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

Ovim je pluginom moguće skenirati sljedeće formate: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, PDF_417, AZTEC i MSI.

Nakon toga referencu na plugin dodajem i unutar app.module.ts datoteke

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 { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

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

Tek sada mogu implementirati funkcionalnost za skeniranje barkoda.

Ekran će se sastojati od gumba za pokretanje skeniranja i prostora iznad njega za prikaz skeniranih podataka.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Barcode Scanner App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-row *ngIf="rezultat">
    <ion-col>
         {{rezultat.text}}
    </ion-col>
    <ion-col>
        {{rezultat.format}}
      </ion-col>
  </ion-row>
 
  <button ion-button full (click)="skeniraj()">Skeniraj</button>

</ion-content>

Funkcionalnost se sastoji od jedne funkcije.

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

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

  rezultat:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

  }

  skeniraj(){
    this._barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

U praksi to izgleda ovako:

Ionic 3 – Barcode QR skener

Prilikom klika na gumb za skeniranje aplikacija traži pristup kameri kako bi mogla skenirati barkod, nakon odobrenja prikazuje se ekran kamere uz poruku “Place a barcode inside the viewfinder to scan it.“. Nakon uspješnog skeniranja čuje se glasan beep zvuk i na dnu ekrana kratko se prikaže sadržaj skeniranog barkoda nakon čega se ekran kamere zatvara i aplikacija se vraća na početni ekran.

Ali to nije sve. Moguće je koristiti objekt za dodatnim opcijama pomoću kojih se ponašanje plugina može prilagoditi.

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

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

  rezultat:any;
  opcije:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

    this.opcije = {
            preferFrontCamera: false,
            showFlipCameraButton: true,
            showTorchButton: true,
            disableAnimations: false,
            disableSuccessBeep: true,
            prompt: "Postavite okvir na barkod kako bi ga skenirali.",
            formats: 'QR_CODE, DATA_MATRIX', 
            orientation: 'portrait',
            torchOn: false,
            resultDisplayDuration: 3000
    };

  }

  skeniraj(){
    this._barcodeScanner.scan( this.opcije).then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

Ionic 3 – Barcode QR skener

Zaključak

{
  "name": "BarcodeScannerApp",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/barcode-scanner": "^4.9.2",
    "@ionic-native/core": "4.9.1",
    "@ionic-native/splash-screen": "4.9.1",
    "@ionic-native/status-bar": "4.9.1",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "phonegap-plugin-barcodescanner": "^8.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Barcode Scanner App project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *