Como criar e ler QR codes com Node.js

Como criar e ler QR codes com Node.js
AdsTerra, Junte-se ao AdsTerra

QR Code é uma forma eficiente e conveniente para armazenar a compartilhar dados. Com NodeJS podemos criar e ler QR Codes de forma fácil e rápida, veremos com detalhes a seguir.

Nesse passo a passo veremos cada etapa para criar e ler QR Codes usando Node.JS, para isso, faremos o uso de três populares bibliotecas: qrcode-reader e jimper para ler QR Codes e qrcode para gerar QR Codes.

Resumo:

  • Criando QR Codes em Node.JS
    Instalando a biblioteca qrcode
    Gerando imagem de QR Code
  • Lendo QR Codes em Node.JS
    Instalando as bibliotecas qrcode-reader e jimper
    Lendo QR codes a partir dos arquivos de imagens

Criando QR Codes em Node.JS

A biblioteca qrcode disponibiliza um API simples e fácil para criar QR Codes.

Instalando a biblioteca qrcode

Para instalar a biblioteca, vamos precisar de Node.JS e NPM (o gerenciador de pacotes do Node) - também podem ser utilizados outros gerenciados de pacotes do node, como Yarn, Pnpm etc... - instalados no computador. Caso você ainda não tenha essas ferramentas, você poderá baixar diretamente no site do Node.JS.

Após ter as ferramentas devidamente instaladas, podemos criar uma nova pasta para o projeto e instalar a biblioteca qrcode usando NPM, ou seu gerenciador de pacotes de preferência.

Então abra seu terminal e execute os seguinte comandos:

mkdir qrcode-tool && cd qrcode-tool

O comando mkdir cria uma nova pasta chamada qrcode-tool e em seguida navega para dentro da pasta com o comando cd.

Em seguida, podemos iniciar um novo projeto Node.JS com o comando:

npm init -y

Esse comando irá gerar um arquivo chamado package.json, que será o arquivo responsável por armazenar todas as referências de bibliotecas utilizadas na construção do projeto.

Em seguida, podemos abrir a pasta do projeto no editor de código de preferencia, no meu caso, estou utilizando o VSCode, então irei usar o comando:

code .

No VSCode, temos um terminal integrado, ao usar o atalho CTRL + J, um novo terminal irá abrir na parte inferior do editor.

Finalmente com a estrutura inicial do projeto pronta, podemos instalar a biblioteca qrcode com o seguinte comando:

npm install qrcode

Gerando imagem de QR Code

Para gerar uma imagem de QR Code, podemos usar o método toFile da biblioteca qrcode. Nesse método podemos enviar três parâmetros, o caminho do arquivo, o texto para transformar em QR Code e um objeto opcional de outros argumentos, e assim gerar a imagem de QR Code no caminho especificado.

Abaixo um exemplo de como usar o método toFile para gerar uma imagem QR Code:

const QRCode = require('qrcode');

QRCode.toFile('./output-file-path/file.png', 'Encode this text in QR code', {
  errorCorrectionLevel: 'H'
}, function(err) {
  if (err) throw err;
  console.log('QR code saved!');
});

Esse código irá gerar a imagem QR Code com o texto especificado e salvar no caminho de saída indicado.

Para fazer o teste, dentro da pasta do seu projeto crie um novo arquivo js, por exemplo, gerarQRCode.js e também uma pasta de nome output-file-path (o mesmo nome utilizado no exemplo acima), e então no terminal execute o código:

node gerarQRCode.js

Se tudo estiver correto, você verá no seu terminal a mensagem "QR Code saved!", e poderá ver a imagem de QR Code dentro da pasta output-file-path, caso queira ver o resultado em algum dispositivo, basta abrir a imagem e fazer a leitura com algum leitor de QR Code, você deve conseguir ver o texto "Encode this text in QR code".

Além de gerar arquivos de imagem de QR Code, a biblioteca qrcode também permite gerar imagens de QR Code em outros formatos, como JPEG ou SVG. Para fazer isso, você pode usar o método toString, que retorna uma string contendo os dados da imagem do QR Code no formato especificado.

Aqui está um exemplo de como usar o método toString para gerar uma imagem de QR Code no formato SVG:

const QRCode = require('qrcode');

QRCode.toString('Encode this text in QR code', {

  errorCorrectionLevel: 'H',

  type: 'svg'

}, function(err, data) {

  if (err) throw err;

  console.log(data);

});

Este código irá gerar uma imagem de QR Code com o texto especificado, e retorná-lo como uma string de dados SVG. Você pode então usar esses dados para exibir a imagem do QR Code em um navegador ou outra aplicação.

Você pode escanear o QR Code abaixo e ver a string que você deu como entrada para o método toString no trecho de código acima.

Está será a saída:

QR Code

Lendo QR Codes em Node.JS

Nesta seção, você irá ler o arquivo de QR Code que você gerou e salvou na seção anterior.

Para ler QR Code no Node, você usará as bibliotecas qrcode-reader e jimp. Essas bibliotecas fornecem APIs simples para analisar e ler QR Codes de imagens e fontes de vídeo.

Instalando as bibliotecas qrcode-reader e jimp

Para instalar as bibliotecas qrcode-reader e jimp, você precisará novamente instalar os pacotes npm necessários para ler códigos QR.

Abra uma janela de terminal e execute o seguinte comando:

npm install qrcode-reader jimp

Este comando irá instalar as bibliotecas qrcode-reader e jimp, permitindo que você use-as em sua aplicação. Lembre-se de estar na pasta do projeto quando executar este comando.

Lendo QR codes a partir dos arquivos de imagens

Para ler QR Codes de arquivos de imagem, você pode usar o método decode do módulo qrcode-reader e o método read do módulo jimp. O método read do jimp analisa a imagem, que será decodificada pelo método decode do módulo qrcode-reader.

Aqui está um exemplo de como usar os métodos read e decode para ler um código QR da imagem que salvamos anteriormente:

// __ Importing jimp __ \\
const Jimp = require("jimp");

// __ Importing filesystem = __ \\
const fs = require('fs')

// __ Importing qrcode-reader __ \\
const qrCodeReader = require('qrcode-reader');
 
// __ Read the image and create a buffer __ \\
const buffer = fs.readFileSync('./output-file-path/file.png');
 
// __ Parse the image using Jimp.read() __ \\
Jimp.read(buffer, function(err, image) {
    if (err) {
        console.error(err);
    }
// __ Creating an instance of qrcode-reader __ \\

    const qrCodeInstance = new qrCodeReader();

    qrCodeInstance.callback = function(err, value) {
        if (err) {
            console.error(err);
        }
// __ Printing the decrypted value __ \\
        console.log(value.result);
    };

// __ Decoding the QR code __ \\
    qrCodeInstance.decode(image.bitmap);
});

Este código lerá o QR Code do arquivo de imagem e registrará o resultado no console. Se o QR Code for decodificado com sucesso, o resultado será uma string contendo o texto do QR Code. Se o QR Code não puder ser decodificado, o resultado será nulo.

Para testar esse código, você pode criar um arquivo com nome readQRCode.js por exemplo e colar todo o código acima, em seguida basta rodar o comando:

node readQRCode.js

Na saída abaixo, você pode ver a string que codificamos usando a biblioteca qrcode.

Esse será o resultado:

Encode this text in QR code

É possível ver que a biblioteca qrcode é muito útil e pode ser usada com diferentes parâmetros para criar QR Codes. A melhor coisa sobre essa biblioteca é que ela pode funcionar tanto com aplicativos React.js quanto com servidores Node.js.

Conclusão

Neste tutorial, aprendemos como armazenar e compartilhar informações de maneira conveniente e eficiente usando QR Code. Seja para codificar dados para um aplicativo web ou móvel, isso pode ser facilmente realizado usando o ambiente do Node. Também aprendemos como codificar dados em diferentes formas em um QR Code, como um arquivo SVG.

Em resumo, aprendemos a usar a biblioteca qrcode no Node.js para gerar e ler QR Codes em vários formatos, como SVG e JPEG. Os QR Codes podem ser uma ferramenta útil para armazenar e compartilhar informações de maneira conveniente e eficiente em vários aplicativos.

AdsTerra, Junte-se ao AdsTerra