Construa e publique seu primeiro app

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.

​

Antes de começar

• Construir com o Agent,
• Testar o app,
• Publicar e compartilhar.

​

Construa a primeira versão

1

Inicie um novo app

2

Peça ao Agent 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.

3

Explore antes de construir (opcional)

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.

4

Aguarde enquanto o Agent constrói

O Agent planeja, gera e conecta o app. Isso geralmente leva alguns minutos — você pode acompanhar no painel de chat enquanto ele trabalha.

5

Confirme que o app funciona no Preview

Quando o Agent terminar, abra o 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 para gerar looks alternativos lado a lado e aplicar o que você preferir.

6

Publique seu app

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.

7

Abra seu app publicado

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.

​

🎉 Parabéns — você publicou seu primeiro app

• 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.

​

Próximos passos