Deploy Zero to Hero: App com Worker e botão PIX no Cloudflare

Criar ferramentas de utilidade pública (como calculadoras judiciais, cruzadores de dados ou simuladores de notas de concursos) é uma das melhores formas de construir portfólio. Mas quando a ferramenta viraliza, a conta de servidor chega, e de repente você está pagando centenas de reais na AWS.

O Cloudflare Workers acaba com esse problema. Com a cota gratuita de 100.000 requisições diárias, você hospeda o app inteiro de graça. E para manter o projeto vivo, adicionar um botão de doação PIX é a estratégia mais direta.

O Fluxo do Deploy (Zero to Hero)

1. Desenvolva Localmente Sua aplicação (HTML/JS) e sua API do Worker. Certifique-se de que tudo roda localmente (npm run dev).
2. Crie a Infra na Cloudflare Usamos o comando:

npx wrangler pages deploy dist --project-name seu-app

(Ou para Workers completos, usamos o wrangler deploy). 3. Cuidado com as Chaves! NUNCA faça deploy de chaves de API cruas hardcoded no frontend. Se o seu app consome uma IA ou um serviço de e-mail, as chaves de ambiente devem ficar isoladas no servidor do Worker (env.API_KEY). O Cloudflare permite cadastrar segredos de forma segura no painel web (Settings -> Variables and Secrets).

O Botão de Doação PIX

Não complique usando gateways de pagamento pesados para doações simples. A forma mais eficaz é o Copia e Cola PIX.

Na sua página final (ex: na tela de assinatura ou após entregar o resultado simulado ao usuário), insira o botão.

Para gerar o QR Code dinâmico do PIX, você nem precisa de banco de dados. Existem bibliotecas open-source e APIs gratuitas (como a gerencianet/pix-dict) onde você passa sua chave (ex: e-mail) e o valor, e ela te devolve a Payload copia-e-cola e a imagem Base64 do QR.

<div class="pix-donation-card">
  <h3>Apoie este projeto! ☕</h3>
  <p>Esta ferramenta ajudou você? Considere fazer uma doação de qualquer valor.</p>
  
  <img src="URL_DO_SEU_QR_CODE_FIXO" alt="QR Code PIX">
  
  <div class="pix-copy-area">
    <input type="text" value="00020126...SUA_PAYLOAD_FIXA..." id="pixKey" readonly>
    <button onclick="copiarPix()">Copiar Código PIX</button>
  </div>
</div>

<script>
function copiarPix() {
  const pixInput = document.getElementById("pixKey");
  pixInput.select();
  document.execCommand("copy");
  alert("Chave PIX copiada! Abra o app do seu banco.");
}
</script>

Hospedar no Edge e usar pagamentos P2P via PIX é o suprassumo do desenvolvimento indie sem custos iniciais.