> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Construa e publique seu primeiro app
> Construa um rastreador de corrida premium com o Agent, teste-o no Preview e publique-o em uma URL que você pode compartilhar.
export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
const ensureLZString = () => {
if (typeof document === "undefined") return;
if (window.LZString) return;
if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
const s = document.createElement("script");
s.src = LZ_SRC;
s.async = true;
document.head.appendChild(s);
};
const handleCopy = async e => {
const btn = e.currentTarget;
if (!prompt) return;
try {
await navigator.clipboard.writeText(prompt);
} catch {
const ta = document.createElement("textarea");
ta.value = prompt;
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
} catch {}
document.body.removeChild(ta);
}
const original = btn.dataset.label || btn.innerText;
btn.dataset.label = original;
btn.innerText = "Copied!";
setTimeout(() => {
if (btn.isConnected) btn.innerText = original;
}, 1500);
};
const handleBuild = () => {
if (!prompt || typeof window === "undefined") return;
const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
let url;
if (window.LZString) {
const encoded = window.LZString.compressToEncodedURIComponent(prompt);
url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
} else {
url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
}
window.open(url, "_blank", "noopener,noreferrer");
};
ensureLZString();
const baseButtonStyle = {
display: "inline-flex",
alignItems: "center",
gap: "6px",
padding: "8px 16px",
borderRadius: "8px",
fontSize: "14px",
fontWeight: 500,
cursor: "pointer",
lineHeight: 1.2,
fontFamily: "inherit",
textDecoration: "none"
};
return
;
};
export const RUNWELL_PROMPT = `Crie um app premium de rastreador de corrida chamado Runwell.
## Contexto
Runwell é um rastreador de corrida para corredores que querem registrar corridas, acompanhar o progresso, monitorar a quilometragem dos tênis e manter a motivação.
A primeira versão deve parecer polida e útil, mas manter o foco. Use dados de amostra realistas. Não exija login ou banco de dados ainda.
## Direção visual
O app deve parecer premium, atlético, motivador, moderno, escuro e de alto contraste, e projetado para corredores. Use fundos pretos ou quase pretos, acentos verde-limão neon, cards arredondados, gradientes e sombras sutis, tipografia limpa, cards de métricas compactos, prévias de rotas estilo mapa e cards de tênis com progresso de quilometragem.
## Escopo
Construa três telas: Início, Adicionar Corrida e Progresso. Não construa Atividade ou Perfil ainda.
A tela Início deve mostrar uma saudação, a recomendação de corrida de hoje, a distância total desta semana, o progresso da meta semanal, corridas recentes e cards de quilometragem dos tênis. A tela Adicionar Corrida deve permitir que um corredor adicione uma corrida com tipo (ao ar livre ou esteira), distância, duração, ritmo médio, frequência cardíaca média, tênis usado e notas; ao salvar deve atualizar as corridas recentes, os totais semanais e a quilometragem dos tênis. A tela Progresso deve mostrar a distância semanal, contagem de corridas, tempo total, ritmo médio, um gráfico de distância semanal, um gráfico de tendência de ritmo e um insight encorajador.
## Dados e navegação
Use dados de amostra realistas. Mantenha os dados apenas na sessão atual. No mobile, use navegação inferior para Início, Adicionar Corrida e Progresso; no desktop, use um layout estilo dashboard. Destaque a ação Adicionar Corrida em ambos.`;
⏰ *Tempo estimado: 10 minutos*
Ao final deste guia, você terá um pequeno app publicado em uma URL que pode compartilhar.
Você vai construir um rastreador de corrida. O app tem foco no propósito: ele fornece uma primeira construção completa sem precisar planejar um projeto grande.
## Antes de começar
Você precisa de uma [conta Replit](https://replit.com).
O objetivo é completar um loop completo:
* Construir com o [Agent](/pt/references/agent/overview),
* Testar o app,
* Publicar e compartilhar.
Agent é o construtor de IA do Replit. Você descreve o que quer, e Agent ajuda a criar, explicar e corrigir o app.
## Construa a primeira versão
O prompt está dividido em quatro seções curtas para que o Agent receba uma intenção clara em vez de um bloco de texto:
* **Contexto** — o que o app é e para quem é.
* **Direção visual** — como deve parecer e se sentir.
* **Escopo** — quais telas construir e o que cada uma deve mostrar.
* **Dados e navegação** — quais dados de amostra usar e como o layout se adapta ao mobile e desktop.
O Agent pode mostrar um plano antes de construir. Verifique se o plano inclui as telas Início, Adicionar Corrida e Progresso, corridas de amostra e quilometragem dos tênis, e os layouts mobile e desktop.
Se algo importante estiver faltando, peça ao Agent para atualizar o plano antes de começar a construir.
Se você quiser que o Agent pense no design antes de escrever qualquer código, ative o **Plan** ao lado da entrada do prompt. O modo Plan permite que o Agent faça perguntas de esclarecimento e produza um plano estruturado que você pode revisar antes de aprovar a construção — útil para projetos maiores do que este.
Saiba mais em [Modo Plan](/pt/references/agent/plan-mode).
O Agent planeja, gera e conecta o app. Isso geralmente leva alguns minutos — você pode acompanhar no painel de chat enquanto ele trabalha.
Quando o Agent terminar, abra o [Preview](/pt/core-concepts/project-editor/editor-and-tools/preview) e use o app como um visitante. Preview é onde você testa o app enquanto está construindo, antes de publicá-lo.
Verifique se você consegue:
* Abrir Adicionar Corrida e escolher ao ar livre ou esteira.
* Inserir distância, duração e notas.
* Salvar a corrida.
* Ver a corrida aparecer em Corridas Recentes.
* Ver a distância semanal e a quilometragem dos tênis atualizarem.
* Ver uma recomendação ou insight encorajador.
* Recarregar a página e usar o app novamente.
* Redimensionar o Preview para a largura de um telefone.
Se algo quebrar, descreva o sintoma ao Agent. Você não precisa diagnosticar o código por conta própria.
Quer explorar variações visuais antes de publicar? Veja [Design com Canvas](/pt/build/design-with-canvas) para gerar looks alternativos lado a lado e aplicar o que você preferir.
Quando o Preview funcionar, você pode publicar de duas formas:
* **Do chat do Agent:** após o Agent terminar a construção, ele sugere o deploy com um card inline de **Publicar**. Confirme seu subdomínio, escolha quem pode acessar o app e selecione **Publicar**.
* **Do painel de Ferramentas e arquivos:** abra **Publicação** para configurar as mesmas opções. Use este caminho se você dispensou o card inline ou quer publicar mais tarde.
De qualquer forma, publicar cria uma versão pública do seu app com uma URL que você pode compartilhar.
Abra a URL pública em uma nova aba do navegador e repita as mesmas verificações. O app deve funcionar fora do Editor de Projeto antes de você compartilhá-lo.
Se o app publicado se comportar de forma diferente do Preview, verifique os logs de publicação e quaisquer configurações de produção que o app precisa. Para problemas comuns de publicação, veja [Solução de problemas de publicação](/build/troubleshooting).
## 🎉 Parabéns — você publicou seu primeiro app
Você foi de um único prompt até uma URL ao vivo e compartilhável. Ao longo do caminho você:
* Descreveu o Runwell ao Agent e recebeu de volta uma primeira versão funcional.
* Testou no Preview para confirmar que as corridas são salvas e os totais semanais são atualizados.
* Publicou o app e o abriu em sua URL pública.
Esse é o loop que todo projeto Replit segue — prompt, testar, melhorar, publicar.
## Próximos passos
Explore variações visuais do Runwell e aplique um novo design sem reconstruir.
Execute várias tarefas do Agent ao mesmo tempo para que diferentes partes do app avancem juntas.
Aprenda como guiar o Agent da ideia ao app funcional.
Salve o histórico de corridas após a recarga da página.
