A ideia principal desse projeto é entender como funcionam os QrCodes!
Lembrando que existem diversas maneiras de realizar o que foi feito e eu estou trazendo apenas duas soluções!
Um QR Code (Quick Response Code) é um tipo de código de barras bidimensional que armazena informações de maneira rápida e acessível. Ele pode ser lido por dispositivos como smartphones, que utilizam a câmera para decodificar os dados. O QR Code é composto por uma matriz de quadrados pretos e brancos, organizados em um padrão específico.
Quando um dispositivo escaneia o código, o software de leitura converte os padrões em uma sequência de dados, que pode ser um texto, URL, número de telefone, ou qualquer outro tipo de informação. Esses códigos são amplamente utilizados por sua capacidade de armazenar grandes volumes de dados em um pequeno espaço e sua facilidade de leitura em múltiplas direções (360º).
A primeira forma de criar seu código QR é por meio de um simples site e pela API de QrCodes!
1.Primeiramente abra seu editor de código e crie oindex.htmle oscript.js.1.1.Como eu utilizei TailwindCSS não existe umstyle.css.1.2.DICA: no seu arquivo HTML ao digitar!e pressionar a teclaEntera estrutura HTML já é auto completada!.Assim:
Agora que o básico foi feito e explicado vamos comecar pelo código HTML!
-
1.Altere o título para QrCode Generator que está dentro da tag<head.<title>QrCode Generator</title>
-
2.Importe o TailwindCSS dentro da tag<head>.<script src="https://cdn.tailwindcss.com"></script>
-
3.Crie a estrutura simples do site!
<body>
<div >
<p >Enter your text or URL</p>
<input type="text" placeholder="Text or URL" id="qrText">
<div id="imgBox">
<img src="" id="qrImage">
</div>
<button onClick="GenerateQR()">
Generate QR Code
</button>
</div>
<script src="./script.js"></script>
</body>4.Estilize usando Taliwind.css
<body class="bg-gray-600 flex justify-center items-center h-screen">
<style>
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-2px);
}
50% {
transform: translateX(2px);
}
75% {
transform: translateX(-2px);
}
}
.animate-shake {
animation: shake 0.5s linear;
}
</style>
<div class="w-3/5 p-6 bg-white rounded-lg">
<p class="font-semibold text-sm mb-2">Enter your text or URL</p>
<input type="text" placeholder="Text or URL" id="qrText" class="w-full h-12 border border-indigo-500 outline-none p-2 mb-5 rounded-md">
<div id="imgBox" class="w-52 mx-auto rounded-md max-h-0 overflow-hidden transition-[max-height] duration-1000 ease-in-out">
<img src="" id="qrImage" class="w-full p-2 mx-auto">
</div>
<button onClick="GenerateQR()" class="w-full h-12 bg-indigo-500 text-white rounded-md shadow-md cursor-pointer mt-3 font-medium transition-colors duration-300 hover:bg-indigo-700">
Generate QR Code
</button>
</div>
<script src="./script.js"></script>
</body>Agora vamos a criar a funcao do botão
5.Crie o arquivo script.js e crie a função do botão.
function GenerateQR() {
const qrText = document.getElementById("qrText");
const qrImage = document.getElementById("qrImage");
const imgBox = document.getElementById("imgBox");
// Remove shake class if it's already present
qrText.classList.remove("animate-shake");
if (qrText.value) {
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrText.value)}&size=200x200`;
qrImage.src = qrUrl;
// Exibe a imagem
imgBox.classList.add("max-h-60");
} else {
// Adiciona a classe de animação de shake
qrText.classList.add("animate-shake");
// Remove a classe após a animação para que possa ser usada novamente
setTimeout(() => {
qrText.classList.remove("animate-shake");
}, 500); // Duração do shake em milissegundos
}
}- Os 3 primeiros
constsão as váriaveis presentes HTML, sendo buscadas pelo seu ID, que são respectivamente o valor do input( a URL ou o Texto), a imagem do QrCode, e adivdo QrCode. - Depois removemos a classe de
.animate-shakedo qrText. - Se o valor do input não for vazio, a gente pega usando a API de QrCode com o valor do input (urlDaAPI + input).
- Coloca a imagem no src da imagem no HTML.
- Coloca a classe para aumentar a altura do container do QrCode.
- Se o input tiver vazio
- Adiciona ao input a animação de shake por um tempo de 500ms
Podemos também criar o QrCode em PYTHON.
import qrcode
import osimport qrcode: Importa o móduloqrcode, que facilita a geração de QR codes.import os: Importa o móduloos, que oferece funções para interagir com o sistema operacional, como obter e manipular caminhos de diretórios.
def generate_qrcode(text, filename):
"""Gera um QR code a partir de um texto e salva na pasta atual como um arquivo PNG."""def generate_qrcode(text, filename):: Define a funçãogenerate_qrcodeque recebe dois parâmetros:text(o conteúdo que será transformado em QR code) efilename(o nome do arquivo onde o QR code será salvo).""" Gera um QR code a partir de um texto e salva na pasta atual como um arquivo PNG. """: Um comentário (docstring) que descreve o que a função faz.
try:
current_directory = os.path.dirname(os.path.abspath(__file__))try:: Inicia um blocotrypara capturar possíveis exceções (erros) durante a execução.current_directory = os.path.dirname(os.path.abspath(__file__)): Obtém o diretório onde o script Python está sendo executado e o armazena na variávelcurrent_directory. __file__é o nome do arquivo atual, eos.path.abspathobtém o caminho absoluto desse arquivo.
filepath = os.path.join(current_directory, f"QrCodes/{filename}.png")filepath = os.path.join(current_directory, f"QrCodes/{filename}.png"): Constrói o caminho completo do arquivo onde o QR code será salvo. A funçãoos.path.joincombina o diretório atual com o subdiretório "QrCodes" e o nome do arquivo (passado como argumento). O arquivo será salvo com a extensão.png.
img = qrcode.make(text)
img.save(filepath)-
img = qrcode.make(text): Cria um QR code com o conteúdo fornecido no parâmetrotext. A funçãoqrcode.makeconverte o texto ou URL em uma imagem de QR code e armazena essa imagem na variávelimg. -
img.save(filepath): Salva a imagem gerada do QR code no caminho especificado porfilepath.
print(f"QR code gerado e salvo com sucesso em: {filepath}")print(f"QR code gerado e salvo com sucesso em: {filepath}"): Exibe uma mensagem no console informando que o QR code foi gerado e salvo com sucesso, mostrando o caminho onde ele foi armazenado.
except Exception as e:
print(f"Erro ao gerar o QR code: {e}")except Exception as e:: Captura qualquer exceção que possa ocorrer no bloco try e armazena o erro na variávele.print(f"Erro ao gerar o QR code: {e}"): Exibe uma mensagem de erro no console se algo der errado, mostrando detalhes do erro (e).
def main():
textQR = input("Digite um texto ou URL para o QR code: ").strip()def main():: Define a função principalmain, que será executada quando o programa for iniciado.textQR = input("Digite um texto ou URL para o QR code: ").strip(): Solicita ao usuário que insira o texto ou URL que será convertido em QR code. O método.strip()remove espaços em branco no início e no final do texto.
if not textQR:
print("Erro: O texto ou URL não pode estar vazio.")
returnif not textQR:: Verifica se o usuário não inseriu nenhum texto. Se o campo estiver vazio, a condição é verdadeira.print("Erro: O texto ou URL não pode estar vazio."): Exibe uma mensagem de erro caso o campo de texto esteja vazio.return: Termina a execução da funçãomainse o texto estiver vazio.
save = input("Digite o nome do arquivo (sem a extensão .PNG): ").strip()save = input("Digite o nome do arquivo (sem a extensão .PNG): ").strip(): Solicita ao usuário o nome do arquivo para salvar o QR code, sem a extensão.png. O método.strip()remove espaços desnecessários no início e no fim.
if not save:
print("Erro: O nome do arquivo não pode estar vazio.")
returnif not save:: Verifica se o usuário não inseriu um nome de arquivo. Se estiver vazio, exibe uma mensagem de erro.return: Termina a funçãomainse o nome do arquivo estiver vazio.
save = "".join([c for c in save if c.isalnum() or c in (' ', '.', '_')]).rstrip()save = "".join([c for c in save if c.isalnum() or c in (' ', '.', '_')]).rstrip(): Remove quaisquer caracteres inválidos no nome do arquivo, permitindo apenas letras, números, espaços, pontos e underscores.rstrip()remove espaços em branco à direita.
generate_qrcode(textQR, save)generate_qrcode(textQR, save): Chama a funçãogenerate_qrcodecom o texto fornecido e o nome do arquivo para gerar o QR code.
if __name__ == "__main__":
main()if __name__ == "__main__":: Verifica se o script está sendo executado diretamente (não importado como módulo). Se for o caso, chama a funçãomainpara iniciar o programa.
Assim o código em python gera o QrCode baseado no seu texto, salvando o QrCode na pasta de QrCodes!
Um QR code é uma grade de módulos (pequenos quadrados) que representam dados. Esses módulos formam um padrão específico, que é organizado em diferentes regiões, cada uma com uma função própria. A estrutura básica inclui:
Posicionamento: Existem três grandes quadrados em três cantos do QR code (exceto o canto inferior direito), chamados "marcadores de posição". Eles ajudam os leitores de QR code a identificar a orientação e os limites do código.Alinhamento: Há pequenos quadrados espalhados dentro do QR code para garantir que a leitura seja precisa, mesmo que o código esteja distorcido ou inclinado.Dados: A maior parte do QR code é composta por blocos de dados, onde a informação real é armazenada em forma de padrões binários (zeros e uns).Correção de erros: QR codes possuem redundância embutida. Isso significa que, mesmo que partes do código sejam danificadas ou ocultas, ele ainda pode ser lido corretamente, graças a algoritmos de correção de erros (como Reed-Solomon).
Os dados armazenados em um QR code podem variar de texto simples, URLs, informações de contato (vCards), números de telefone, links para aplicativos ou até mesmo transações financeiras. Esses dados são convertidos em um padrão binário que é compactado e codificado de acordo com o padrão do QR code. O processo envolve:
Entrada de dados: O conteúdo (como uma URL) é convertido para um formato binário.Divisão em blocos: Os dados binários são divididos em blocos, que são dispostos na grade do QR code.Nível de correção de erros: Dependendo do nível de tolerância ao erro escolhido (existem quatro níveis: L, M, Q, H), mais ou menos blocos de redundância são incluídos para permitir a leitura mesmo com partes danificadas.
Quando um QR code é escaneado por um dispositivo, o processo de leitura envolve várias etapas:
Detecção: A câmera detecta o código por meio dos padrões de posicionamento. Como esses marcadores são sempre em locais fixos, o software do scanner pode determinar a orientação e o tamanho do código rapidamente.Digitalização: O software do leitor de QR code transforma a imagem capturada em uma grade de módulos preto-e-branco, comparando-os com o padrão binário (0 para módulos brancos e 1 para módulos pretos).Decodificação: Com a estrutura da matriz de dados identificada, o leitor começa a decodificar os blocos binários. Isso envolve a conversão do padrão binário de volta ao formato original (por exemplo, um URL ou texto), levando em consideração o nível de correção de erros.Correção de erros: Se alguma parte do QR code estiver corrompida ou suja, o leitor usa a redundância para corrigir os dados danificados e completar a leitura.
Os QR codes incorporam diferentes níveis de correção de erros. Estes níveis permitem que uma parte do código seja danificada ou obscurecida e ainda assim possa ser lida corretamente:
L (Baixo): Pode corrigir até 7% dos erros. Ideal para códigos que precisam ser compactos, mas que não enfrentam muita interferência.M (Médio): Corrige até 15% dos erros. Este é o nível padrão e balanceia bem entre a quantidade de dados e a resistência a danos.Q (Alta): Corrige até 25% dos erros. Usado quando a leitura é crítica e a redundância é necessária.H (Muito Alta): Corrige até 30% dos erros. Usado em ambientes onde há alta probabilidade de o código ser danificado, como em outdoors ou produtos que podem ser arranhados.
A quantidade de dados que um QR code pode armazenar varia dependendo do nível de correção de erros e do tipo de dado que está sendo codificado:
- Números: Até 7.089 caracteres numéricos.
- Texto alfanumérico: Até 4.296 caracteres (letras e números).
- Bytes (dados binários): Até 2.953 bytes.
- Kanji/Kana (caracteres japoneses): Até 1.817 caracteres.
Quanto mais informação for armazenada, maior será o QR code, pois mais módulos são necessários para representar os dados.
URLs: QR codes frequentemente codificam URLs que levam a sites, aplicativos ou landing pages.Pagamentos: Em aplicativos como Alipay e PayPal, QR codes são usados para transações de pagamento.Marketing: Campanhas publicitárias utilizam QR codes para conectar o público a mais conteúdo.Logística: QR codes são usados para rastrear pacotes e gerenciar inventários.VCard: Um QR code pode armazenar informações de contato que, ao serem lidas, automaticamente criam um novo contato no dispositivo do usuário.
Capacidade de armazenamento: Eles podem armazenar mais dados do que códigos de barras tradicionais.Leitura rápida: Leitores de QR code são rápidos e eficazes, reconhecendo o código em frações de segundo.Tolerância a danos: Graças à correção de erros, QR codes podem ser lidos mesmo quando parcialmente danificados.Versatilidade: Podem ser usados para armazenar diferentes tipos de dados (URLs, textos, informações de contato, etc.)
Apesar de serem simples de usar, QR codes também podem apresentar riscos de segurança, como redirecionamento para sites maliciosos. Por isso, é recomendável que os usuários verifiquem a origem dos QR codes antes de escaneá-los.
Em resumo, QR codes funcionam convertendo dados em um formato binário que é organizado em uma matriz de módulos. Eles são projetados para serem robustos e lidos de forma rápida e eficiente por dispositivos com câmeras, oferecendo uma ampla gama de aplicações, desde o marketing até a logística.