Saltar para o conteúdo principal

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.

Este tutorial percorre o processo de “vibe coding” no Replit — levando uma ideia do conceito a um aplicativo totalmente publicado. Neste tutorial, você vai construir uma visualização de mapa interativo dos parques de San Francisco, usando dados externos e frameworks modernos. Você verá como usar o Replit Agent para o desenvolvimento inicial, refinamentos e depuração.

​
A filosofia do vibe coding

Vibe coding é menos sobre escrever cada linha de código e mais sobre guiar ferramentas de IA com sua visão e conhecimento de domínio. É um processo iterativo de criar prompts, revisar e refinar. Principais aprendizados do vídeo:
  • Conceitue Primeiro: Comece com uma ideia clara do que você quer construir. Visualizar o produto final ajuda, especialmente ao criar prompts para a IA.
  • Conhecimento de Domínio é Poder: Conhecer frameworks relevantes (como Leaflet.js para mapas) ou fontes de dados (como o OpenStreetMap) melhora significativamente os resultados gerados pela IA.
  • Desenvolvimento Iterativo: Espere depurar e refinar. Ferramentas de IA são poderosas, mas são colaboradoras, não varinha mágica.

​
Projeto: Mapa dos parques de San Francisco

O objetivo é construir um mapa interativo exibindo parques e espaços públicos em San Francisco. Declaração do Problema: O objetivo é um mapa interativo para descobrir parques e espaços públicos em San Francisco. Solução: Uma ferramenta interativa usando Leaflet.js e dados do OpenStreetMap. Lições principais:
  • Criar prompts eficazes para a IA.
  • Processar dados externos.
  • Depurar e tratar erros.

​
Construindo com o Replit Agent

O Replit Agent pode criar a estrutura de projetos inteiros, configurar ambientes e gerar o código inicial.
1

Criando o Prompt Inicial

Um bom prompt é específico. Dizemos ao Agent:
  • O objetivo: “Help me create a minimalist maps app to visualize San Francisco’s parks.”
  • Tecnologias principais: “You should use leaflet for map visualization and fetch data from OpenStreetMap.”
  • Tipos de dados específicos do OpenStreetMap (após pesquisa): Formações naturais (woods, beaches, islets, cave entrances) e locais de lazer (parks, gardens).
Para saber mais sobre como escrever prompts eficazes, consulte este artigo.
2

Anexando um Mockup

Recursos visuais ajudam o Agent a entender o layout e as funcionalidades desejadas. Um esboço ou mockup simples pode ser anexado diretamente ao prompt.
Esboço de wireframe do aplicativo de mapas
3

O Processo do Agent

  1. Criação do Plano: O Agent descreve as etapas que irá seguir. Revise e aprove este plano.
    Criação do plano pelo Replit Agent
  2. Pré-visualização Visual: O Agent transmite uma pré-visualização visual da interface do aplicativo.
    Pré-visualização visual do Replit Agent
  3. Configuração do Ambiente: O Agent configura o ambiente de desenvolvimento, instalando as linguagens e pacotes necessários — sem configuração manual.
  4. Construção do Aplicativo: O Agent escreve o código para o front-end e o back-end.
  5. Checkpoints: O Agent cria checkpoints (commits do Git) para que você possa reverter se algo der errado.
4

Depurando com o Agent

Erros acontecem. Use as DevTools do navegador (especificamente as abas Console e Network) para encontrar mensagens de erro.
  • Observe: O mapa carregou, mas nenhum ponto de dados apareceu.
  • Investigue: O console mostrou um erro: “Failed to fetch map features error cannot read properties of undefined reading natural.”
  • Informe o Agent: Cole a mensagem de erro diretamente no chat com o Agent. O Agent tentará depurar e corrigir o problema.
    Console do navegador mostrando um erro
No vídeo, o Agent identificou um problema ao analisar a resposta da API do Overpass e adicionou tratamento robusto de erros, o que resolveu o problema.

​
Refinando com o modo Lite

Depois que o Agent construir o MVP, use o modo Lite para edições menores e mais direcionadas e refinamentos. O modo Lite é otimizado para mudanças rápidas.
O mapa inicial era funcional, mas poderia ter uma aparência melhor. Prompt para o Agent: “Can you use a more minimalist carto style for OpenStreetMap? Carto lite.”Isso depende de saber que “Carto lite” é um tema conhecido para mapas Leaflet.
Um refinamento comum é adicionar um modo escuro. Prompt para o Agent: “Can you add a dark mode to my app and use, carto dark for the map in the dark mode?”
Replit Agent implementando o modo escuro
O Agent irá:
  • Ler os arquivos para contexto.
  • Fazer alterações nos arquivos necessários (por exemplo, provedores de tema, estilos).
  • Reiniciar o aplicativo para aplicar as mudanças.
Adicionar o modo escuro envolveu várias iterações:
  1. A implementação inicial tinha um toggle que funcionava para o mapa, mas depois desaparecia. Feedback: “The toggle theme button works for the map, but it disappears when clicked. The theme toggle should be in the side nav and the theme should be applied to the side nav.”
  2. Problemas com múltiplos botões de toggle e referências incorretas de componentes (side nav vs. sidebar). Feedback e Orientação: “Now there are two toggle themes. One controls the map, the other controls the side nav. Make them into one in the side. Now and update the CSS.” Quando o Agent faz uma suposição incorreta (por exemplo, componente SideNav), apontá-lo explicitamente para o arquivo correto (@Sidebar) ajuda.
  3. Correção final para garantir que o toggle de modo escuro na barra lateral alterne corretamente o tema do mapa para Carto Dark. Feedback: “Now the dark mode toggle in @Sidebar does not toggle the map to carto dark.”
Esse processo destaca o aspecto de “conversa” do vibe coding. Seja descritivo e guie a IA.

​
Publicando seu aplicativo

O Replit torna a publicação simples.
  1. Selecione o botão Publish.
  2. O Agent sugere uma configuração de publicação (por exemplo, nome do aplicativo, comandos de build e execução). Revise e confirme.
  3. Se seu aplicativo usa chaves de API ou outras informações sensíveis, armazene-as em Secrets. O Agent as usará com segurança.
  4. Selecione Publish. O Replit empacota seu aplicativo e o coloca no ar na web.
    Tela de deployment do Replit
Seu aplicativo publicado terá uma URL pública (por exemplo, park-mapper.replit.app). As alterações feitas no seu ambiente de desenvolvimento não afetarão a versão publicada até que você clique em Republish.

​
Recapitulação e próximos passos

Este tutorial foi desde uma ideia até um aplicativo de mapa interativo publicado sem escrever uma única linha de código manualmente. O Replit Agent foi usado para o trabalho pesado, com o modo Lite para refinamentos, aproveitando o conhecimento de domínio e um processo de depuração iterativo. Próximos Passos Possíveis para o App de Mapa de Parques:
  • Adicione um banco de dados para armazenar os dados dos parques de forma persistente (evitando nova busca a cada carregamento).
  • Permita que os usuários salvem ou marquem parques como favoritos.
  • Implemente filtragem avançada.
  • Melhore o estilo e adicione ícones personalizados para os marcadores do mapa.
  • Aprimore a responsividade mobile (por exemplo, garantindo que os filtros sejam acessíveis no celular).
Vibe coding é sobre iterar, experimentar e guiar a IA para dar vida às suas ideias. Não tenha medo dos erros; eles fazem parte do processo!