Technology illustrations by Storyset

QR code (Quick Response code) é um tipo de código de barras bidimensional que foi criado pela empresa japonesa Denso Wave em 1994. Ele é projetado para armazenar informações de forma eficiente e rápida. O QR code é constituído por uma matriz de pontos em preto e branco dispostos em um padrão quadrado. A informação é codificada dentro desses módulos, permitindo que seja lida rapidamente.

Diferentemente dos códigos de barras tradicionais, que armazenam informações na forma de linhas paralelas, o QR code pode armazenar informações em duas direções, horizontal e vertical, o que o torna capaz de conter uma quantidade significativamente maior de dados.

Os QR codes são amplamente utilizados para armazenar informações como:

• Links para websites.
• Informações de contato, como números de telefone e endereços de e-mail.
• Texto simples.
• Informações de localização (latitude e longitude).
• Cartões de visita digitais (vCard).
• Números de telefone para discagem rápida.
• Informações de Wi-Fi para conectar-se a uma rede.

O QR code é amplamente utilizado em diversas áreas, incluindo marketing, logística, automação industrial, controle de estoque, publicidade e muito mais. Ele ganhou popularidade devido à sua capacidade de armazenar uma grande quantidade de dados e à facilidade com que pode ser lido por dispositivos móveis, como smartphones e tablets, usando a câmera do dispositivo e aplicativos apropriados.

Graças à sua versatilidade e facilidade de uso, o QR code tornou-se uma ferramenta poderosa para facilitar interações com informações digitais de várias formas, proporcionando uma experiência mais conveniente e eficiente para os usuários.

A imagem de um QR code pode variar ligeiramente dependendo de vários fatores, mas em condições normais, duas imagens de QR codes idênticos gerados a partir dos mesmos dados devem ser visualmente idênticas.

As pequenas variações podem ocorrer devido a diferenças no tamanho ou na resolução do QR code, bem como nas configurações de codificação, correção de erros ou versão do QR code utilizado. No entanto, essas variações são geralmente insignificantes e não afetam a funcionalidade do código.

Os geradores de QR codes modernos são projetados para produzir imagens consistentes e precisas, garantindo que diferentes scanners sejam capazes de decodificar os códigos de forma confiável. Isso permite que a informação seja lida corretamente independentemente do dispositivo ou software utilizado para escanear o QR code.

Em resumo, dois QR codes gerados a partir dos mesmos dados devem resultar em imagens muito semelhantes, e ambos devem ser decodificados com sucesso para recuperar a mesma informação original.

VERSÕES

Os QR codes têm diferentes versões, que vão da versão 1 à versão 40. Cada versão representa um tamanho físico maior e pode armazenar mais dados. A versão 1 é o menor, com 21 módulos por lado, enquanto a versão 40 é o maior, com 177 módulos por lado.

POR QUE USAR?

Os QR codes são amplamente utilizados em sistemas por várias razões:

• Facilidade de uso: Eles podem ser lidos rapidamente por dispositivos móveis e câmeras, o que os torna uma forma fácil e rápida de compartilhar informações.
• Capacidade de armazenamento: Eles podem armazenar uma quantidade significativa de dados, tornando-os ideais para codificar URLs, informações de contato, instruções, etc.
• Integração com dispositivos móveis: Com a proliferação de smartphones, os QR codes se tornaram uma maneira eficaz de direcionar usuários para aplicativos, sites ou conteúdo específico.
• Rastreabilidade: Os QR codes também podem ser usados para rastrear produtos, autenticação de documentos e outras aplicações que requerem segurança e rastreamento de informações.

PARA QUE USAR?

Algumas das principais aplicações de QR codes em sistemas incluem:

• Pagamentos móveis: Usar QR codes para efetuar pagamentos é uma forma rápida e segura de realizar transações financeiras.
• Marketing: QR codes são frequentemente usados em campanhas de marketing para direcionar clientes para sites, promoções especiais ou informações adicionais sobre um produto.
• Controle de acesso: Os QR codes podem ser usados como ingressos virtuais ou passes de acesso para eventos, transporte público, etc.
• Autenticação de documentos: QR codes podem ser utilizados para autenticar documentos importantes e evitar falsificações.

LIBS JS E NODE

Alguns exemplos de bibliotecas JavaScript (JS) e Node.js que são frequentemente usadas para gerar ou decodificar QR codes são:

• qrcode: Uma popular biblioteca Node.js que permite gerar códigos QR em formato SVG, PNG ou no terminal.
• qr-image: Outra biblioteca Node.js para gerar imagens de QR code de forma simples.
• jsqr: Biblioteca JavaScript para decodificar códigos QR a partir de imagens, o que é útil para trabalhar com códigos QR em tempo real, como a partir de uma câmera.
• qrcode-generator: Uma biblioteca Node.js para gerar códigos QR em vários formatos, como SVG, PNG ou ASCII.
• qrcodejs: Uma biblioteca JavaScript leve para geração de códigos QR em navegadores web, com fácil integração e personalização.
• qrcode-with-logos: Uma biblioteca JavaScript leve para gerar códigos QR com suporte à incorporação de logotipos ou imagens personalizadas no centro do QR code.

Lembrando que a popularidade e disponibilidade das bibliotecas podem mudar com o tempo. É sempre bom verificar as bibliotecas mais atualizadas e de acordo com suas necessidades específicas.

EXEMPLO

Vou mostrar um exemplo bem simple mas didático de como gerar QR Code com a lib qrcode.

Primeiro de tudo é preciso instalar a lib no projeto.

<script type="module">
  import qrcode from "https://cdn.skypack.dev/qrcode@1.5.1";
</script>

Depois devemos preparar o HTML.

<body>
<input id="inputGerador" placeholder="Escreva aqui" />
<canvas id="canvasGerador"></canvas>
</body>

Vai renderizar este input.

Agora vou preparar o script.

<script type="module">
  import qrcode from "https://cdn.skypack.dev/qrcode@1.5.1";

  const inputGerador = document.getElementById("inputGerador");
  var canvasGerador = document.getElementById("canvasGerador");

  document.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      const value = inputGerador.value
      const CorrectionLevel = { errorCorrectionLevel: "H" }

      qrcode.toCanvas(canvasGerador, value, CorrectionLevel, (error) => {
        if (error) {
          console.error(error)
        } else {
          console.log('Sucesso!')
        }
      })
    }
  })
</script>

Agora ao testar o código, quando terminar de digitar e apertar ENTER:

Muito simples neh!

Ali no código tem uma coisa muito importante que é o:

const CorrectionLevel = { errorCorrectionLevel: "H" }

Este código seta qual o level de correção de erro, que citei lá no começo do artigo. Recomendo ler a doc da lib para ver as outras opções possíveis e até testar outras libs para ver como funcionam e qual melhor se adequa ao seu projeto e gosto.

Mas não se limita a somente isso, tem muita coisa que você pode fazer e implementar, vai ser preciso muita inspiração para testar em vários cenários e serviços.

Bom, espero que você tenha gostado das dicas e do tutorial. Que Deus abençoe você!