O que vais construir
Um gerador de QR Code a funcionar: escreves um link ou texto, vês o QR aparecer, e descarregas a imagem — feito com HTML, CSS, JavaScript e uma biblioteca aberta.
Usa a biblioteca aberta qrcode-generator (licença MIT — livre, até para uso comercial, mantendo o aviso de licença). O QR é gerado no teu navegador — sem serviços externos, sem rastreio.
Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.
Pomos na mesa: uma caixa para escreveres o link (ou qualquer texto), um quadrado onde o QR vai aparecer, e um botão para descarregar a imagem. Por agora, só o esqueleto.
<div class="qr" id="qr"><span class="vazio">o teu QR aparece aqui</span></div>
<input id="texto" placeholder="https://… ou qualquer texto" />
<button id="descarregar" disabled>⬇ Descarregar imagem</button>Acrescenta uma nota a explicar o que é um QR Code. Só os ossos.
Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».
O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou O Gerador de QR Code no teu telemóvel.