Ir para o conteúdo principal

QR Code: inventário de bens móveis pelo celular

Realizar estudo de viabilidade técnica de implementação de uso do QR Code no processo de inventário de bens móveis em e-Patrimônio.

OBJETIVO

Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript.

 

JUSTIFICATIVA

Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript.

 

RESULTADOS ESPERADOS

Permitir a interação com o sistema atras de leituras de Qr-codes, reduzindo a necessidade de digitação e melhorando o uso de sistemas em dispositivos moveis.

  

ENVOLVIDOS:
  • Assessor:
    • Diego Gonçalves de Almeida (Assessor)
  • Equipe Técnica:
    • Diego Barros de Oliveira
    • Alef Carvalho da Silva
    • Anderson Soares Cardoso
  • Gerente de Desenvolvimento:
    • Janderson de Castro Thomaz
  • Product Owner:
    • Jônatas Justiniano Lima
  • Scrum Master:
    • Edson Masami Hiraçaka

 

GLOSSÁRIO
  • NPM - Node Package Manager;
  • Node.js - é um ambiente de execução JavaScript open-source que funciona utilizando o mecanismo Chrome V8;
  • JavaScript - é uma linguagem de programação de alto nível que segue as especificações ECMAScript;
  • WebWorker -   é uma forma de rodar código javascript em um processo separado em segundo plano;
  • QR-Code - Código QR é um código de barras bidimensional que pode ser escaneado com uma camera;
  • ReactJS - Biblioteca de desenvolvimento de aplicações front end;
  • HTML - Linguagem de Marcação de Texto;

 

DESENVOLVIMENTO

REACT-QR-READER (https://www.npmjs.com/package/react-qr-reader)

    • Componente pronto para utilização em aplicações react;
    • Utiliza WebWorker para computar dados do qr-code evitando que a interface fique lenta;
    • Publicado no NPM 2 anos atras;
    • Ultima atualização do repositório 2 anos;

A biblioteca 'react-qr-reader' fornece um componente pronto para utilização em aplicações react, ela tem com dependência (core) a jsQR (https://github.com/cozmo/jsQR), uma biblioteca que realiza a conversão da imagem com o qr-code  para o dado esperado.

Apesar da react-qr-reader não receber atualizações a muito tempo ela se mostrou uma opção viável em aplicações React pois o core da biblioteca se mantem atualizado.

import React, { Component } from 'react'
import QrReader from 'react-qr-reader'
 
const Scanner = () => {
  	const [result, setResult] = React.useState('')
 
 	const handleScan = data => {
    	if (data) {
      		setResult(data)
      	}
    }
  
  	const handleError = err => {
    	console.error(err)
  	}
  
    return (
      	<div>
        	<QrReader
          		delay={300}
          		onError={handleError}
          		onScan={handleScan}
          		style={{ width: '100%' }}
            />
        	<p>{result}</p>
      </div>
    )
}

 

QR-SCANNER (https://www.npmjs.com/package/qr-scanner)

    • Biblioteca javascript agnóstica a frameworks, pode ser usada com React, Vue, Svelte, Vanilla, etc...;
    • Utiliza WebWorker para computar dados do qr-code evitando que a interface fique lenta;
    • Publicado no NPM 6 anos atras;
    • Ultima atualização do repositório a 7 dias;

Apesar da abordagem mais 'low level' a biblioteca se mostrou muito boa, utiliza também o jsQR como engine de decodificação de qr-code e também WebWorkers, o que torna a leitura muito fluida. Ela e agnóstica a frameworks, permitindo assim a implementação em diversas especies de aplicações front end, seja usando algum framework ou implementações utilizando apenas HTML e Javascript.

Exemplo utilizando ReactJS:

import { useEffect, useRef } from "react";
import QrScanner from "qr-scanner";
import QrWorker from "!!file-loader!../node_modules/qr-scanner/qr-scanner-worker.min.js";

import "./modal.css";

QrScanner.WORKER_PATH = QrWorker;

export const Modal = ({ onRead, onClose }) => {
  const videRef = useRef(null);
  const selectRef = useRef(null);

  useEffect(() => {
    console.log("montando qrscanner");
    const scanner = new QrScanner(
      videRef.current,
      (result) => {
        console.log(result);
        onRead(result);
        onClose();
        return scanner.stop();
      },
      (err) => {
        console.log(err);
      },
      (video) => {},
    );

    scanner.start().then(() => {
      QrScanner.listCameras(true).then((cameras) =>
        cameras.forEach((camera) => {
          const option = document.createElement("option");
          option.value = camera.id;
          option.text = camera.label;

          selectRef.current?.add(option);
        }),
      );
    });

    return () => {
      scanner.stop();
      console.log("desmontando qrscanner");
    };
  }, []);

  return (
    <div className="modal" onClick={onClose}>
      <div>
        <video ref={videRef}></video>
        <select ref={selectRef}></select>
      </div>
    </div>
  );
};

 

CONCLUSÃO

Ambas as bibliotecas estudadas trouxeram resultados satisfatórios:

  • react-qr-reader: melhor em aplicações react pois e de fácil implementação;
  • qr-scanner: utilizar em aplicações que utilizam javascript puro em seu front end;

 

REFERÊNCIAS

[1] REACT-QR-READER. Disponível em: https://www.npmjs.com/package/react-qr-reader. Acesso em: 31 ago. 2021.

[2] QR-SCANNER. Disponível em: https://www.npmjs.com/package/qr-scanner. Acesso em: 31 ago. 2021.



Voltar ao topo