Como criar um gerador de código QR usando React

Um código de resposta rápida (QR) é um código de barras bidimensional que tem a capacidade de armazenar e transmitir dados num formato legível por máquinas. Estes dados podem incluir ligações Web para o sítio de uma empresa, o menu de um restaurante, especificações de artigos ou conteúdos de instrução.

O objetivo da tecnologia de código QR é dar às empresas a oportunidade de oferecer acesso imediato a dados, o que pode conferir uma vantagem competitiva.

Um guia sobre a construção de um criador de códigos QR utilizando React, acompanhado de ilustrações de códigos funcionais.

Antes de começar

Para construir o gerador de código QR, é necessário um conjunto de componentes necessários.

Um indivíduo deve possuir uma compreensão elementar dos elementos de entrada HTML, JavaScript e a utilização do gancho React useState para gerir eficazmente o estado numa aplicação Web.

É crucial uma apreciação dos mecanismos necessários para a execução do gerenciamento de exibição baseado em condições em um aplicativo React.

Foi configurada uma aplicação node no seu computador pessoal e espera-se que tenha um bom conhecimento de gestores de pacotes, como o npm ou o yarn, para poder utilizar eficazmente esta ferramenta.

O projeto concluído pode ser acedido no GitHub para referência e investigação adicional.

Tecnologia de código QR explicada

O aspeto dos códigos QR pode parecer simples e indiscriminado à primeira vista, mas estes formatos possuem vários atributos inteligentes que permitem o armazenamento e a recuperação eficientes de uma quantidade significativa de informações, mantendo a legibilidade.

Design e estrutura

O código QR acima mencionado é um exemplo de um código de barras matricial que pode ser lido por uma câmara de smartphone para direcionar o utilizador para um sítio Web específico, neste caso, a página inicial do All Things N. Estes códigos QR são normalmente utilizados em vários contextos, como embalagens de produtos, menus de restaurantes e painéis publicitários, para um acesso rápido e eficiente à informação.

Os aspectos estéticos de um código QR são frequentemente considerados na sua conceção, abrangendo factores como a cor, a dimensão e a inclusão de um logótipo de marca no código. Além disso, podem ser utilizados gráficos personalizados ou efeitos visuais especiais para melhorar o aspeto geral do código QR.

A composição estrutural de um código QR baseia-se na disposição espacial dos elementos constituintes na sua matriz. Estes componentes obedecem a um desenho prescrito para garantir uma descodificação precisa.Os elementos que compõem um código QR são os seguintes:

Os módulos de dados servem como os blocos de construção de um código QR, funcionando como repositórios para as informações exibidas aos utilizadores.

Os padrões de localização, também conhecidos como os olhos do código QR, são um componente essencial para facilitar o reconhecimento exato e rápido do código QR pelos dispositivos de leitura.

Os separadores desempenham um papel crucial para permitir aos leitores distinguir entre padrões de localização genuínos e outras formas de dados, facilitando assim o processamento e a classificação eficientes da informação.

A zona de silêncio, que serve de fundo branco para o código QR, desempenha um papel importante na orientação do scanner para identificar os padrões do localizador dentro do código.

Os marcadores de alinhamento, que têm um tamanho diminuto quando comparados com os padrões localizadores, permitem a leitura omnidirecional dos códigos QR.

Codificação e descodificação

O primeiro processo implica a transformação de entradas, como URLs, num formato de matriz utilizando um código QR. Por outro lado, o segundo processo envolve a recuperação de dados ou informações armazenadas a partir de um código QR, utilizando uma câmara de smartphone ou leitores de código QR especializados.

Introdução à biblioteca de códigos QR

QRCode é uma biblioteca de terceiros utilizada para gerar códigos de barras 2D. O QRCode é atualmente a biblioteca de códigos QR mais popular, com mais de um milhão de instalações semanais e suporte para aplicações cliente e servidor.

Para incorporar a funcionalidade do QR Code em um aplicativo React atual, siga estas etapas:1. Abra uma janela de terminal e navegue até a pasta do projeto.2. No terminal, execute o seguinte comando:

(o comando vai para aqui).3. Depois de executar o comando, deverá conseguir gerar os ficheiros necessários para utilizar o QR Code na sua aplicação React.

 yarn add qrcode 

Ou se preferir o npm, use:

 npm i qrcode 

Configurar o projeto

O repositório do projeto tem dois ramos distintos, nomeadamente “starter” e “final”. Pode-se utilizar o primeiro como uma base sobre a qual construir o projeto ou, em alternativa, utilizar o segundo para obter uma compreensão da demonstração concluída.

Clonar a aplicação de arranque

A aplicação de arranque, com uma interface de utilizador concebida para fins de implementação, foi disponibilizada no GitHub.Para aceder a ele, abra o terminal e execute o seguinte comando, que facilitará a clonagem do ramo inicial do repositório para o seu computador local:

 git clone -b starter https://github.com/makeuseofcode/qr-code-generator.git 

 yarn 

Ou:

 npm install 

Para iniciar a aplicação, execute:

 yarn start 

Ou:

 npm start 

A interface gráfica do utilizador, que é tipicamente apresentada através de um navegador Web, foi processada de forma excecional e o seu aspeto visual é digno de nota.

Implementando a lógica em etapas

Abra o arquivo thesrc/App.jsx e substitua seu conteúdo pelo código a seguir:

 import { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";

const App = () => {
  const [url, setUrl] = useState("");
  const [dataUrl, setDataUrl] = useState("");

  const handleQRCodeGeneration = () => {
    QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
      if (err) console.error(err);

      // set dataUrl state to dataUrl
      setDataUrl(dataUrl);
    });
  };

  return (
    <div className="app">
      <h1>QR Code Generator</h1>

      <form onSubmit={handleQRCodeGeneration}>
        <input
          required
          type="url"
          placeholder="Enter a valid URL"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
        />

        <input type="submit" value="Generate" />
      </form>

      {
        /* code to conditionally display the QR code and a download button
        would go here */
      }
    </div>
  );
};

export default App;

 

Este trecho de código faz o seguinte:

⭐ Importa QRCode no nível superior.

O componente cria dois estados, um para armazenar o URL introduzido e outro para armazenar o código QR gerado na sua representação DataURL.

⭐ Cria uma função de seta de comandoQRCodeGeneration, na qual invoca o métodotoDataURL do objectoQRCode com os seguintes argumentos:

O parâmetro inicial submetido para codificação é especificado como o endereço web.

O segundo parâmetro de entrada é um objeto que contém opções, o que nos permite especificar as dimensões do código QR.

O terceiro parâmetro fornecido é uma função que, quando invocada, devolve a representação dataURL do URL submetido.

Aquando da submissão do formulário, a função handleQRCodeGeneration é chamada através de uma função de seta no elemento do formulário.

O componente actualiza o estado do URL para refletir a entrada fornecida pelo utilizador final.

Quando o valor do estado dataUrl se altera, a vista gerada pode ser apresentada num elemento div condicionado ao cumprimento de determinadas condições.

 {dataUrl && (
  <div className="generated-view">
    <img src={dataUrl} alt="qr code" />
    <a href={dataUrl}

Demonstrar a funcionalidade do seu software através de um navegador Web, verificando se produz o resultado pretendido:

Digitalização segura de um código QR

A utilização da tecnologia de código QR tem como objetivo facilitar o acesso rápido à informação, mas implica simultaneamente algumas considerações de segurança latentes.

Depois de dominar a geração de códigos QR em um aplicativo React, é imperativo familiarizar-se com a leitura segura desses códigos.