Publicar online

Pôr online: o que isso quer dizer

Até aqui, a tua app vive na tua ferramenta ou no teu computador: só tu podes usá-la. Implementar (deploy) é copiar a tua app para um servidor acessível a partir da Internet, que a serve a quem quer que abra o endereço certo. O resultado concreto: um URL do tipo minha-app.vercel.app que o Tom pode escrever no quadro, e que cada aluno abre no telemóvel.

Boa notícia para uma app como a tua: é grátis, rápido e largamente automatizado. As apps «estáticas» (HTML, CSS, JavaScript, sem servidor próprio) são as mais simples do mundo de alojar — é exatamente por isso que escolhemos esta base técnica no capítulo 3. As escolhas simples do início pagam-se agora.

As plataformas gratuitas

Três grandes nomes dominam o alojamento gratuito de apps web, e não podes verdadeiramente enganar-te: são todos fiáveis, rápidos e usados por milhões de projetos. Eis como escolher:

Caso particular: se construíste a tua app no Lovable, v0, Bolt ou Replit, estas plataformas propõem um botão «Publish» ou «Deploy» integrado que faz tudo num clique. É o caminho mais simples — usa-o para a tua primeira publicação online, explorarás a Vercel ou o Netlify quando precisares.

O método mais simples: sem linha de comandos

Se o Git e o terminal ainda te intimidam, existe um caminho sem nenhum comando: o arrastar e largar do Netlify. Pedes à tua ferramenta que exporte ou descarregue os ficheiros da tua app (uma pasta com o teu index.html e o resto), abres a página de upload do Netlify, e arrastas a pasta para a zona prevista. Trinta segundos depois, a tua app tem um URL público.

Este método tem um limite: a cada modificação da tua app, tens de voltar a arrastar a pasta à mão. É ótimo para uma primeira publicação ou uma app que muda pouco. Assim que modificares com frequência, o caminho Git torna-se mais confortável — cada commit enviado atualiza automaticamente o site.

O caminho completo com Git e Vercel

A implementação «profissional» segue sempre a mesma lógica: o teu código vive num repositório Git alojado no GitHub, e a plataforma (Vercel ou Netlify) vigia esse repositório. Sempre que envias uma atualização, ela reconstrói e republica o teu site automaticamente. É o famoso «push to deploy» — nunca mais te ocupas da publicação, ela acompanha o teu trabalho.

Não precisas de memorizar o procedimento: pede à IA que te guie, passo a passo, indicando o teu nível. Eis o prompt que o Tom usa:

Guia-me para implementar esta app na Vercel, passo a passo, partindo do zero.
Nunca usei Git nem Vercel. Tenho uma conta GitHub acabada de criar.
Para cada passo: diz-me onde clicar ou que comando escrever, e explica numa frase para que serve.
Espera pela minha confirmação antes de passar ao passo seguinte.

A última linha é uma dica preciosa: ao pedir à IA que avance um passo de cada vez, transformas um procedimento intimidante numa conversa tranquila onde podes assinalar o mínimo bloqueio no momento em que surge. Para referência, os comandos que vais ver passar parecem-se com isto:

# Ligar o teu projeto local ao repositório criado no GitHub:
git remote add origin https://github.com/a-tua-conta/minha-app.git

# Enviar o teu código para o GitHub:
git push -u origin main

# Depois, em vercel.com: « Add New Project » → importar o repositório → Deploy.

flowchart LR
  L["App no teu computador"] --> G["Repositório Git"]
  G --> V["Vercel / Netlify"]
  V --> U["URL público"]
  U --> F["Feedback dos utilizadores"]
  F -.->|"Melhorias"| L

Verificar a tua app online

A implementação bem-sucedida não significa que tudo funciona: o ambiente online difere ligeiramente da tua pré-visualização local. Reserva cinco minutos para uma verificação séria. Abre o URL público num navegador em navegação privada (para partir do zero, sem dados locais), refaz o percurso completo de um utilizador, e depois abre o URL no teu telemóvel — é lá que os teus utilizadores estarão.

• A app carrega, sem página branca nem erro 404?
• O percurso principal funciona de ponta a ponta (adicionar, marcar, ver o streak)?
• Os dados persistem depois de recarregar a página?
• A apresentação está correta no telemóvel: textos legíveis, botões clicáveis com o polegar?

Se algo partir online quando funcionava localmente, não entres em pânico: é um grande clássico. Copia o erro da consola (F12, mesmo online) e descreve à IA a diferença: «localmente funciona, online na Vercel obtenho este erro: …». As causas habituais — um caminho de ficheiro incorreto, uma maiúscula num nome de ficheiro — corrigem-se numa mensagem.

Partilhar e recolher feedback

Uma vez online, partilha o URL. O feedback real é o melhor combustível para progredir: o Tom dá o link a alguns alunos e observa como o usam. E aí, surpresa garantida — os utilizadores nunca fazem o que esperamos. Um aluno tenta adicionar vinte hábitos, outro procura um botão «anular» que não existe, um terceiro pergunta porque é que os dados dele não estão no computador de casa (lembra-te: localStorage = dados por aparelho).

Recolhe esse feedback de forma simples: observa as pessoas a usar a app sem as ajudar, anota o que as bloqueia, e faz duas perguntas — «o que te incomodou?» e «o que te faz mais falta?». Três utilizadores chegam para detetar 80 % dos problemas evidentes. Acrescenta as respostas deles à tua lista «mais tarde», e ordena: o que aparece várias vezes passa para o topo.

E depois?

Tens uma verdadeira app online. Itera: vai buscar à tua lista «mais tarde» enriquecida com o feedback dos utilizadores, adiciona uma funcionalidade por sessão seguindo o método do capítulo 4, e republica — com o «push to deploy», cada melhoria validada vai para o ar sozinha. Os estaleiros clássicos de uma v2: um design melhor, um nome de domínio personalizado, a exportação dos dados, ou a sincronização entre aparelhos (a famosa conta de utilizador, agora que sabes o que ela custa).

E sobretudo, recomeça. Escolhe um segundo projeto, um pouco mais ambicioso, e refaz o percurso completo: mini-PRD, construção iterativa, depuração metódica, implementação. Cada projeto torna-te mais à vontade a pilotar a IA, mais rápido a diagnosticar, mais preciso nas tuas descrições. É exatamente assim que se aprende a construir hoje — e acabaste de dar a volta completa uma primeira vez. Bem-vindo ao clube.