>_ DevTrendspt

Idioma

Início

Linguagens

Seções

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarcados Segurança
TypeScript

Como Parar de Pagar por Serviços Online para Gerar Códigos QR Básicos

Toda vez que um designer ou diagramador precisa de um código QR limpo para uma landing page ou materiais impressos, a mesma busca começa. Você abre o primeiro gerador que encontra na pesquisa, gasta cinco minutos ajustando cores, faz upload de um logo, clica no botão de download, e de repente o site exige registro, uma assinatura paga, ou gera um código dinâmico que redireciona através dos servidores lentos deles. Parece familiar?

Recentemente descobri um projeto de código aberto chamado mini-qr por um desenvolvedor conhecido como lyqht. É um aplicativo web leve que faz exatamente o que você esperaria: gera rapidamente belos códigos vetoriais sem marcas d'água, rastreadores ou assinaturas.

Por que este projeto é útil na prática

A maioria dos geradores de código aberto gera quadrados pretos e brancos sem graça em formato básico. O Mini QR vai além e oferece um editor de estilo visual com controle adequado sobre o resultado.

Aqui está o que esta ferramenta pode fazer:

  • Estilizar módulos e molduras. Você pode mudar o formato dos pontos, padrões de busca (marcadores de canto), arredondar os cantos e configurar a moldura externa com texto personalizado.
  • Inserir logos no centro. O aplicativo gerencia automaticamente o Nível de Correção de Erro para que os scanners continuem lendo o código de forma confiável mesmo com o centro coberto.
  • Modelos de dados para diferentes tarefas. Não há necessidade de montar manualmente strings brutas como WIFI:S:MyNet;T:WPA;P:secret;;. A interface tem formulários prontos para credenciais Wi-Fi, contatos vCard, eventos de calendário, geolocalizações, links e até pagamentos QR EPC (SEPA).
  • Exportar para qualquer formato. O resultado é entregue como SVG limpo para impressão, raster PNG/JPG, ou como caracteres ASCII/Unicode diretamente no terminal.

A exportação em lote merece menção especial. Você pode alimentar o aplicativo com uma tabela CSV com uma lista de links ou contatos, e ele gerará um lote inteiro de imagens com estilo consistente em um arquivo compactado. Para crachás de conferência ou etiquetas de inventário em um armazém, isso economiza um par de horas de trabalho rotineiro.

Scanner integrado e processamento local

Ao lado do gerador, o aplicativo inclui um scanner. Ele funciona diretamente via stream WebRTC de uma webcam ou analisa uma imagem enviada.

Se o código contém dados estruturados (por exemplo, uma senha Wi-Fi ou contato), o scanner reconhece o tipo e mostra um botão de ação rápida. Não há requisições para backends de terceiros aqui: toda análise e renderização acontecem estritamente no navegador, no lado do cliente. Seus dados não vão para lugar nenhum.

O aplicativo também suporta PWA, então você pode instalá-lo como um ícone separado na sua área de trabalho ou celular e usá-lo sem uma conexão de rede constante.

Por baixo dos panos

A pilha técnica do projeto parece moderna e limpa:

  • Vue 3 com TypeScript
  • Construído com Vite
  • Componentes baseados em shadcn-vue e Tailwind CSS
  • Localização em mais de 30 idiomas via Crowdin
  • Testes de componentes via Storybook

Os autores levaram a acessibilidade a sério: a interface atende aos requisitos básicos WCAG A, suporta temas de cores claro, escuro e do sistema, e lida corretamente com caracteres UTF-8 complexos (script árabe, caracteres CJK, emoji).

A biblioteca interna de renderização pode ser testada separadamente diretamente no Storybook público do projeto, o que facilita a integração de componentes semelhantes nos seus próprios serviços frontend.

Executando localmente

Se você não quer usar a demonstração pública no Vercel ou deseja implantar o gerador na rede interna da sua empresa com suas próprias predefinições de marca, o projeto é fácil de iniciar localmente.

Clone o repositório e instale as dependências:

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Para produção, o projeto é empacotado em um container Docker ou construído em uma pasta estática com o comando pnpm build, após o qual pode ser servido por qualquer servidor web como Nginx ou Caddy.

O projeto é licenciado sob GPL-3.0. Isso significa que o código está aberto para forks e auto-hospedagem, mas você não poderá fechar os fontes ao modificá-lo.

Para quem isso será útil

O Mini QR atende duas necessidades de uma vez.

Primeiro, é uma ferramenta de trabalho conveniente para tarefas do dia a dia: imprimir uma senha de Wi-Fi para a copa do escritório, preparar códigos SVG para uma apresentação, ou formatar links em crachás de participantes de conferência.

Segundo, é um bom exemplo de aplicação Vue 3 e Tailwind de qualidade. Aqui você pode ver como organizar fluxos de trabalho do Storybook para componentes gráficos especializados, como configurar exportações convenientes de arquivos e como automatizar visualizações para pull requests.

Se você lida regularmente com códigos QR, experimente a demonstração ou salve o projeto nos favoritos. Ele resolve a tarefa de forma limpa e sem ruído extra.

Projetos relacionados