Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 - Cree una aplicación de codificador / escáner de código de barras / QR

 En este tutorial, veremos cómo puede crear su propia aplicación de escáner de código de barras / código QR con Ionic 5, Ionic Native 5 y Cordova.

También vamos a aprender a codificar sus propios códigos de barras a partir de sus datos.

Entonces empecemos.

Crear un proyecto de Ionic 5

Primero comience generando un nuevo proyecto. También puede omitir esto para usar un proyecto existente:

ionic start CodeScanner blank 

Para obtener más información, consulte este tutorial sobre cómo crear su primer proyecto de Ionic 5

Navegue al directorio raíz de su proyecto:

cd CodeScanner 

A continuación, siga los pasos para instalar tanto el complemento Cordova como el contenedor Ionic Native 3.x + para escanear códigos de barras.

Instalación del complemento Cordova e Ionic Native 5 para escaneo de códigos de barras

Comience instalando el complemento del escáner de código de barras Cordova:

ionic cordova plugin add phonegap-plugin-barcodescanner

A continuación, instale el contenedor Ionic Native para este complemento desde npm:

npm install --save @ionic-native/barcode-scanner 

Añadiendo la plataforma Android

Dado que necesitamos ejecutar esta aplicación en un dispositivo real, necesitamos agregar una plataforma de destino. En nuestro caso, estamos agregando Android, pero no dude en agregar plataformas iOS o Windows Phone si se dirige a estas plataformas:

ionic cordova platform add android 

Ahora puede conectar su dispositivo móvil con un cable USB y luego ejecutar su aplicación para asegurarse de que todo esté bien:

ionic run android -l 

Agregamos el -linterruptor para habilitar la sincronización en vivo del código cuando lo cambiamos para que no tengamos que ejecutar el comando nuevamente.

Simplemente continúe creando su aplicación y observe los cambios en su dispositivo.

Configuración del escáner de código de barras Cordova

Hemos agregado el complemento del escáner de código de barras, pero antes de que podamos usarlo, tenemos que hacer un poco de configuración.

Así que adelante, abre tu proyecto con tu editor de cod favorito. Estamos usando Visual Code Studio:

code .

Abra el src/app/app.module.tsarchivo e importe el escáner de código de barras y agréguelo a la lista de proveedores de módulos:

/* ... */

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

/* ... */

providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Escaneo de códigos de barras

Dirígete al src/pages/home/home.htmlarchivo y agrega un botón para escanear códigos de barras:

<ion-header>

<ion-navbar>
    <ion-title>Barcode/QR Scanner v1.0 </ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
    <button ion-button (click)="scan()">Scan ... </button>
    <div *ngIf="scanData">
        <p>Scanned Text : </p>
        <p>Scanned Format : </p>

    </div>
</ion-content>

A continuación, abra el src/pages/home/home.tsarchivo y agregue una implementación para el scan()método que está vinculado al botón Escanear .

Empiece por importar BarcodeScanner:

import { BarcodeScanner ,BarcodeScannerOptions } from '@ionic-native/barcode-scanner';

A continuación, inyecte a BarcodeScannertravés del constructor del componente:

@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomerPage {
scanData : {};
options :BarcodeScannerOptions;
constructor(public navCtrl: NavController, public navParams: NavParams,private barcodeScanner: BarcodeScanner) {
}    

scan(){
    /* */
}

Finalmente, agregue una implementación para el scan()método:

scan(){
    this.options = {
        prompt : "Scan your barcode "
    }
    this.barcodeScanner.scan(this.options).then((barcodeData) => {

        console.log(barcodeData);
        this.scanData = barcodeData;
    }, (err) => {
        console.log("Error occured : " + err);
    });         
}    

También puede especificar otras opciones, como usar la cámara del dispositivo frontal en lugar de la cámara trasera, etc.

Consulte todas las opciones disponibles en la documentación del complemento en GitHub o su envoltorio Ionic Native.

Codificar sus datos como código de barras

Puede codificar sus propios datos, como una cadena de texto, un correo electrónico o un número de teléfono en un código de barras utilizando el complemento Barcode, así que continúe y agregue otro botón y luego vincule su clickevento al encodeText()método:

     <ion-input type="text" [(ngModel)]="encodeData" ></ion-input>   
     <button ion-button (click)="encodeText()">Encode Text</button>

A continuación, en el home.tsarchivo, agregue una encodeDatavariable de miembro de cadena para contener el resultado, luego agregue un método para codificar los datos de texto:

@IonicPage()
@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomerPage {
scanData : {};
encodeData : string ;
encodedData : {} ;
options :BarcodeScannerOptions;
constructor(public navCtrl: NavController, public navParams: NavParams,private barcodeScanner: BarcodeScanner) {
}    

scan(){
    /* */
}    
encodeText(){
    this.barcodeScanner.encode(this.barcodeScanner.Encode.TEXT_TYPE,this.encodeData).then((encodedData) => {

        console.log(encodedData);
        this.encodedData = encodedData;

    }, (err) => {
        console.log("Error occured : " + err);
    });                 
}

Conclusión

Gracias al complemento Cordova Barcode Scanner, puede escanear fácilmente códigos QR y códigos de barras y también codificar sus propios datos (texto, correo electrónico y números de teléfono) en un formato de código de barras.

Hemos visto cómo agregar el escáner de código de barras a nuestra aplicación Ionic 5 / Angular con Cordova e Ionic Native 5.

Publicar un comentario

0 Comentarios