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

Data de elaboração	18/10/21
Responsável pelo estudo	Diego Gonçalves de Almeida (Assessor)
Equipe do estudo	Esquadrão Suicida
Alvo	e-Estado - Inventário
Origem	Implementação: Definir melhor forma para implementar leitura de Qr-code com javascript.
Objetivo	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. Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript.
Documentação correlata (opcional)	https://www.npmjs.com/package/react-qr-reader https://github.com/cozmo/jsQR https://www.npmjs.com/package/qr-scanner
Observações	Não possui.

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;

1. Introdução

Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript. 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.

2. Desenvolvimento

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

        2.1.1 Componente pronto para utilização em aplicações react;

        2.1.2 Utiliza WebWorker para computar dados do qr-code evitando que a interface fique lenta;

        2.1.3 Publicado no NPM 2 anos atras;

        2.1.4 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>
    )
}

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

        2.2.1 Biblioteca javascript agnóstica a frameworks, pode ser usada com React, Vue, Svelte, Vanilla, etc...;

        2.2.2 Utiliza WebWorker para computar dados do qr-code evitando que a interface fique lenta;

        2.2.3 Publicado no NPM 6 anos atras;

        2.2.4 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>
  );
};

3. Conclusão

Ambas as bibliotecas estudadas trouxeram resultados satisfatórios:

    3.1 react-qr-reader: melhor em aplicações react pois e de fácil implementação;

    3.2 qr-scanner: utilizar em aplicações que utilizam javascript puro em seu front end;

4. 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.