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.
|
1 2 3 |
$ ionic start BarcodeScannerApp blank $ cd BarcodeScannerApp $ ionic cordova platform add android |
Barcode Scanner
Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:
|
1 2 |
$ 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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); }); } } |
Zaključak
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
{ "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" ] } } |
