Ionic 5: Como criar aplicativo com Leitor Código de Barras?

Neste artigo vou mostrar como ler código de barras utilizando o Ionic Framework. Ler um código de barras ou um código QR é uma requisito de negócios bastante comum. Felizmente, quase todos os usuários andam por aí com dispositivos capazes de ler códigos de barras: seus smartphones. Neste artigo, mostro como criar um aplicativo para escanear códigos de barras utilizando o framework Ionic com cordova.

Aqui estão alguns casos de uso em que seria útil uma funcionalidade desta:

Produtos de supermercado - Aplicativos com leitor de código de barras podem fornecer informações do produto aos consumidores
Ofertas - Disponibilizar acesso rápido a ofertas através da leitura de códigos QR apontando para página na Web
Autenticação da Web de um aplicativo móvel - Semelhante ao aplicativo Whatsapp Web
Aplicativo de eventos - Verificar entradas de eventos

Formatos de Código de barras compatíveis

Nesta lista,podemos ver quais formatos de código de barras nosso aplicativo poderá ler. Para explicação sobre cada formato de código de barras, acesse este link.

Formato de código de barras	Android	iOS	Windows
QR_CODE	✔	✔	✔
DATA_MATRIX	✔	✔	✔
UPC_A	✔	✔	✔
UPC_E	✔	✔	✔
EAN_8	✔	✔	✔
EAN_13	✔	✔	✔
CODE_39	✔	✔	✔
CODE_93	✔	✔	✔
CODE_128	✔	✔	✔
CODABAR	✔	✖	✔
ITF	✔	✔	✔
RSS14	✔	✖	✔
PDF_417	✔	✔	✔
RSS_EXPANDED	✔	✖	✖
MSI	✖	✖	✔
AZTEC	✔	✔	✔

Criando o projeto

Iniciando o projeto através do comnando:

ionic start leitorCodigoBarras blank

Navegando para diretório criado:

cd leitorCodigoBarras

Instalando plugins do Cordova e Ionic Native necessários

Instalando plugin do cordova para ler código de barras:

ionic cordova plugin add phonegap-plugin-barcodescanner

Instalando plugin ionic-native

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

Configurando Leitor de código de barras

Abra o projeto ionic criado num editor de textos. Edite o arquivo /app/app.module.ts ,importando o plugin leior de código de barras e o adicionando à lista de providers do projeto, código deve ficar semelhante:

/* ... */

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

/* ... */

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

Criando interface para leitura de código de barras

Abra o arquivo src/pages/home/home.html e crie um botão para escanear código de barras:

<ion-header>

<ion-navbar>
    <ion-title>Leitor de Código de Barras v1.0 </ion-title>
</ion-navbar>

</ion-header>

<ion-content padding>
    <button ion-button (click)="escanear()">Ler Código de Barras</button>
    <div *ngIf="dadosLidos">
        <p>Código escaneado: {{codigo}}</p>
        <p>Formato do código: {{formato}} </p>

    </div>
</ion-content>

Ao acionar o botão ,será executada a função escanear.Sempre quando um código for escaneado (variável codigoEscaneado com valor true) , aparecerá na tela qual o código escaneado e em qual formato ele se encontra.

Implementando Lógica para leitura do código de barras

Vamos agora implementar a lógica da interface criada, editando o arquivo src/pages/home/home.ts e implementando a função escanear() .

A primeira modificação no arquivo src/pages/home/home.ts é adicionar o plugin do ionic native:

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

Depois, injetamos o plugin importando no construtor:

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

Finalmente, criamos nossa implementação da função scan():

escanear(){
    
    this.opcoes = {
        prompt : "Escanear código de Barras "
    }
    this.dadosLidos = null;
    this.barcodeScanner.scan(this.opcoes).then((dadosLidos) => {

        console.log(dadosLidos);
        this.dadosLidos = dadosLidos;
        this.codigo = dadosLidos.text;
        this.formato = dadosLidos.format

    }, (err) => {
        console.log("Um erro ocorreu : " + err);
    });         
}

Conclusão

Basta fazer o build para a plataforma que deseja e testar a leitura de código de barras. Neste artigo, apenas mostrei a funcionalidade básica deste plugin do cordova, caso queira saber mais sobre todas as possibilidades dele ,acesse a documentação oficial disponível aqui