Neste artigo, vamos explorar o processo de criação de uma ferramenta online gratuita para gerar e compartilhar QR Codes usando Astro e JavaScript. Esta ferramenta permite aos usuários criar QR Codes facilmente, compartilhá-los no WhatsApp e baixá-los como imagens PNG.

Você pode experimentar a ferramenta em ação clicando aqui.

Tecnologias Utilizadas

• Astro: Um moderno gerador de sites estáticos que oferece excelente performance e flexibilidade.
• JavaScript: Para a lógica de geração e manipulação dos QR Codes.
• qrcode: Uma biblioteca JavaScript para gerar QR Codes.
• Tailwind CSS: Para estilização rápida e responsiva.

Estrutura do Projeto

O projeto consiste em uma única página Astro que contém toda a interface do usuário e a lógica necessária para gerar e manipular os QR Codes.

Componentes Principais

1. Input de Texto: Um campo de entrada onde os usuários digitam o conteúdo para o QR Code.
2. Botão de Geração: Inicia o processo de criação do QR Code.
3. Canvas: Onde o QR Code é renderizado.
4. Botões de Ação: Para compartilhar no WhatsApp, copiar o link e baixar o QR Code.

Funcionalidades Implementadas

Geração do QR Code

Utilizamos a biblioteca qrcode para gerar o QR Code baseado no texto inserido pelo usuário. O código é renderizado em um elemento canvas.

import QRCode from 'qrcode';

const generateQRCode = async () => {
  const input = document.getElementById('qr-input').value;
  const qrCanvas = document.getElementById('qr-canvas');
  QRCode.toCanvas(qrCanvas, input, (error) => {
    if (error) console.error(error);
  });
};

Compartilhamento no WhatsApp

Para compartilhar o QR Code no WhatsApp, usamos a URL do QR Code como base e adicionamos o número de telefone do destinatário.