Replit: criação de aplicações web com IA

Fundamentos da prototipagem com IA - Apresentação

Apresentando o curso e objetivos

Bem-vindas e bem-vindos a mais um curso na Alura.

Neste curso, vamos trabalhar com a Replit e criar um site de produto do CalMari SPA, com o objetivo de vender e realizar agendamentos para o nosso SPA.

Utilizaremos os recursos da Replit para desenvolver esse produto.

Transicionando do Vibecoding para um desenvolvimento estruturado

Sabemos que a Replit é conhecida por ter surgido como concorrente do Lovable, e muitas pessoas que não são da área de tecnologia utilizam a plataforma como Vibecoding para criar seus produtos.

Neste curso, nosso objetivo é sair do Vibecoding e ganhar estrutura e repertório para orientar o agente que trabalha conosco na criação do site, de modo que ele se comporte da maneira mais esperada e preditiva possível, mesmo sendo um componente com comportamento não determinístico.

Veremos técnicas para que, quando solicitarmos uma nova feature (funcionalidade), uma nova página ou uma alteração no site, tenhamos garantias de que o agente executará o que esperamos, como esperamos, reduzindo nosso tempo de revisão do sistema.

Exploraremos amplamente a ferramenta Replit: seus recursos, como funciona e como pode ajudar após a publicação do site. No entanto, o principal deste curso é migrar do Vibecoding para o Replit e criar o produto de maneira estruturada, com foco no comportamento do agente de forma preditiva.

Vamos lá?

Fundamentos da prototipagem com IA - Saindo do Vibecoding

Introdução ao curso

Vamos começar o curso de Replit, conhecendo a ferramenta e entendendo sua finalidade. Estamos na página de vendas do Replit, sem estar conectados à conta, pois é um local onde a solução é apresentada e onde podemos ter uma visão geral do que ela faz. Se houver dúvida sobre para que usar o Replit, podemos acessar a seção comercial no Replit.com para avaliar se ele atende ao caso de uso.

De maneira geral, o Replit tem sido utilizado no mercado por pessoas que desejam construir protótipos ou produtos sem, necessariamente, terem formação técnica. A ferramenta considera que o público é composto por pessoas de produto, de negócios ou empreendedoras que desejam criar um produto, um site (site) ou um aplicativo mobile (celular), mas que não possuem o conhecimento técnico de uma pessoa programadora ou alguém da área de tecnologia. É para esse público que vamos direcionar a conversa neste curso.

Vamos trazer também aspectos técnicos, pela nossa experiência prévia — nosso background (experiência) em programação —, sempre buscando facilitar, traduzir e contextualizar termos, considerando que o produto é mais voltado para quem é de negócios.

O que o Replit oferece

Quais são os modos principais? O Replit oferece interfaces básicas comuns a ferramentas que trabalham com IA. A interação ocorre como um chat (bate-papo). Teremos um chat (bate-papo), um prompt (instrução) e projetos que vamos construindo por meio da conversa com a ferramenta.

Como estamos falando de IA, o uso é baseado em tokens (unidades de texto). Podemos consultar também a precificação. No momento da gravação, o plano Core (Essencial) custa 20 dólares por mês, com menção a 18 dólares por mês quando cobrado anualmente. Assim, o plano anual oferece desconto; caso contrário, o valor é 20 dólares mensais. Há ainda o plano Pro (Profissional), a 100 dólares por mês, e o Enterprise (Empresarial), com preço personalizado.

Essas são as faixas de preço disponíveis e, para este curso, vamos utilizar o plano Core (Essencial).

Vamos trabalhar no plano mais simples do Replit, para que você entenda o que é possível fazer e quais são as limitações desse plano mais barato. Existe um plano gratuito, que não aparece destacado nesta página; é extremamente simples, bastante limitado e oferece poucos tokens (unidades de contagem de texto) por dia. É possível utilizá-lo, porém a experiência tende a ser demorada e insatisfatória, pois os tokens diários acabam rapidamente. No cenário atual da IA, o consumo de tokens é acelerado e o custo é elevado, de modo que o plano gratuito geralmente não compensa.

Aproveitando que saímos daquela página e acessamos a documentação, destacamos que ela é parte essencial de qualquer ferramenta de tecnologia. Uma vez que entendemos que o Replit atende ao que queremos fazer, a documentação se torna fundamental porque apresenta a lista de recursos disponíveis e fornece detalhes sobre o que podemos realizar, inclusive com exemplos de casos de uso que mostram o que a ferramenta é capaz de fazer. Como mencionamos, trata-se de uma ferramenta muito utilizada por quem deseja criar produtos, mas essa não é sua única função. Entre os casos de uso, encontramos análise e pesquisa, operações, criação de automações e publicação, além de outros que também podem ser contemplados, embora não sejam necessariamente o foco deste curso.

Apresentando o projeto e a abordagem do curso

Neste curso, nós vamos construir nosso site e nosso produto. Há um arquivo no Figma do projeto ao qual você terá acesso: trata-se do Calmaria SPA, a página de venda dos serviços desse SPA. Trabalharemos com essa página ao longo das atividades, pois é nesse contexto que vamos atuar.

A proposta é sair do Vibecoding. Nós sabemos que muitas pessoas utilizam o Replit como uma ferramenta de Vibecoding, porque ela surgiu nesse paradigma; concorrentes também apareceram seguindo a mesma linha. Agora, nossa ideia é ir além desse Vibecoding e mostrar como passamos de “apenas conversar com a IA para que ela faça algo de forma pouco assertiva” para uma estrutura em que a IA responde do modo esperado, com previsibilidade. Para isso, utilizamos a maior parte dos recursos disponíveis, a fim de obter respostas de melhor qualidade da IA.

Fundamentos da prototipagem com IA - Criando o projeto

Iniciando o projeto e organizando o espaço de trabalho

Vamos começar o projeto no Replit. Já estamos autenticados: criamos a conta, acessamos a plataforma e, ao entrar, visualizamos uma página inicial semelhante a esta. Pode haver pequenas diferenças caso já existam projetos em andamento, que aparecem nesta área.

Ponto importante: estamos usando o plano Core, o plano mais acessível do Replit no momento. Nesse plano, temos diferentes espaços de trabalho. Podemos criar um novo espaço de trabalho e nomeá-lo, por exemplo, "Calmaria SPA". Os espaços de trabalho são uma forma eficiente de organizar projetos, pois, dentro de um mesmo espaço — como o pessoal e agora o "Calmaria SPA" — podemos manter vários projetos distintos.

Podemos criar algo novo e escolher entre diversas categorias: podemos criar um site (site), um layout (disposição) para celular, um design (projeto visual), slides (apresentações), um jogo em 3D, um documento ou uma planilha. A ferramenta não se limita à criação de sites (sites), embora esse seja um uso bastante comum. Neste caso, vamos criar um site (site). Também é possível manter, em um mesmo espaço de trabalho, múltiplos projetos para finalidades diferentes ou até dois ou três sites (sites) distintos para o mesmo projeto.

Além disso, um espaço de trabalho pode ser compartilhado. Podemos convidar outras pessoas para visualizarem apenas os projetos pertencentes àquele espaço específico. Se tivermos colaboradoras(es) participando do "Calmaria SPA", podemos convidá-las(os) para esse espaço. Caso exista outro projeto com outra equipe, criamos um novo espaço de trabalho e convidamos as pessoas correspondentes. É uma forma de organizar tanto os projetos quanto o acesso de quem trabalha conosco.

No "Calmaria SPA", ao criar algo novo e selecionar a opção de site (site), o sistema indica que estamos criando um site (site) e adiciona uma etiqueta correspondente. Quanto ao Figma, já temos um projeto disponível, mas sabemos que nem todas as pessoas que trabalham com o Replit possuem um arquivo no Figma. Portanto, vamos solicitar a criação sem o Figma e, depois, trazeremos o Figma para comparar como é o fluxo de trabalho integrado ao Replit.

Enviando o prompt com o microfone e definindo o modo do agente

Para facilitar, podemos clicar no ícone de microfone. Ao clicar, o navegador solicitará permissão de acesso; após permitir, a plataforma passa a gravar nossa fala. Enquanto estivermos falando, o sistema registra o áudio; ao confirmar, ele transcreve; ao fechar, cancela a ação. Vamos usar o microfone para ditar nosso pedido.

Queremos que o agente crie um site (site) para o Calmaria SPA, um serviço de spa que estamos criando. Precisamos de um site (site) de vendas desses serviços, que incluem massagem, yoga e dias especiais — um daycare (cuidados durante o dia) para quem deseja um dia completo de relaxamento. Precisamos que o site (site) realize a venda desses serviços e tenha um formulário para a pessoa interessada se cadastrar, permitindo que nosso time entre em contato.

Usamos o microfone para enviar o prompt, mas também é possível digitar; o resultado é o mesmo. A transcrição tem funcionado muito bem atualmente, então não nos preocupamos com eventuais erros, pois o desempenho costuma ser consistente.

Antes de enviar o prompt, é possível escolher os modos do agente. Há um aviso indicando que esses modos foram renomeados recentemente. Estão disponíveis o modo gratuito, o modo Power e o modo Max. Vamos usar o modo gratuito, que utiliza os modelos padrão gratuitos. Depois, podemos comparar com modelos mais robustos.

Acompanhando a construção do site pelo agente

Ao iniciar, o agente começa a construir o site (site). Nesse momento, provavelmente o sistema fará perguntas para entender melhor o negócio, solicitar detalhes de design (projeto visual) e compreender nossas ideias, ou simplesmente montará uma proposta e criará uma visualização prévia. Também aparece um link de convite para chamarmos mais pessoas, além de uma promoção para obter créditos ao convidar novas(os) usuárias(os).

Na lateral, como na maioria dos agentes desse tipo — inclusive se estivermos usando o Claude, o Codex, outras IAs ou um harness (ferramenta de integração) de IA no computador —, temos uma interface comum em que o agente conversa conosco.

O agente identificou que estamos em um plano pago e questionou se queremos continuar no modo gratuito, sugerindo a troca para o modo Power, recomendado para quem tem plano pago. Podemos alternar para o Power ou permanecer no gratuito. Vamos continuar no gratuito para mostrar como ele funciona e observar que tipo de resposta oferece; depois, comparamos com o modo Power.

Vamos criar um site de vendas completo para o Calmaria Spa, com apresentação de serviços, experiências de relaxamento e um formulário para captar contatos, que foi exatamente o pedido que fizemos. Como estamos no plano gratuito, a execução pode demorar um pouco.

Enquanto o agente constrói, conseguimos ver todas as ferramentas em uso. Ao clicarmos, a ferramenta mostra tudo que está sendo executado, o que nos dá uma noção clara de como o agente está trabalhando e de como ele vai montar o plano.

Explicando a organização em projetos, artefatos e recursos

Enquanto isso, vale observar algumas terminologias que o Replit utiliza, para entendermos melhor o funcionamento do sistema. No Replit, há termos importantes que organizam projetos, sites e arquivos. Como frequentemente interagimos com o sistema pelo espaço de conversa (chat (bate-papo)), a ferramenta pode utilizar essa terminologia, e é essencial compreendê-la.

Já vimos no nosso login que é possível ter áreas de trabalho diferentes. Essa é a primeira camada de organização dos projetos. Dentro de uma área de trabalho, podemos ter vários projetos. E, dentro dos projetos, há um nível adicional de detalhamento, chamado artefatos.

No nosso projeto do Calmaria Spa, que é um projeto de site mais robusto, podemos ter diferentes artefatos dentro do mesmo projeto. Por exemplo: um conjunto de slides, o próprio site (como artefato publicável), um aplicativo para mobile (dispositivos móveis) e um design do sistema. Todos esses são artefatos que ficam dentro do projeto no Replit.

No Replit, a diferenciação é a seguinte: artefato é qualquer item publicável dentro do sistema; projeto é um contêiner onde as informações são agrupadas. Existe ainda um terceiro conceito: recursos. Recursos são tudo aquilo que os artefatos utilizam para buscar informação, como acesso ao back-end (camada de servidor), acesso ao banco de dados e acesso ao file storage (armazenamento de arquivos). Resumindo: o projeto é o grande contêiner; o artefato é a parte publicável; e os recursos são a camada não visível para a pessoa cliente.

Além disso, na ferramenta do Replit há funcionalidades de publicação e hospedagem embutidas. Isso a torna muito utilizada por quem deseja criar e publicar serviços rapidamente, sem precisar configurar uma cloud (nuvem), montar uma AWS ou montar uma Azure. Ao terminar a criação, a própria ferramenta oferece a publicação do trabalho e disponibiliza um domínio (por exemplo, mariawellnessspa.rept.web). Também é possível adicionar um domínio personalizado: podemos comprar um domínio e vinculá-lo aqui. Se estivermos de acordo com o que foi criado, basta publicar.

Alertando sobre alucinações ao usar prompts básicos

Aqui entra um ponto importante, que queremos trabalhar ao longo deste curso. Da forma como fizemos agora, fornecemos apenas um prompt (instrução) básico, genérico, com pouco contexto e poucas informações para o Replit. Com isso, o sistema tende a alucinar. Se seguirmos essa metodologia, muito próxima do estilo de Vibecoding, precisamos ter cuidado, trabalhando em partes pequenas da aplicação ou em incrementos pequenos a cada interação no chat (bate-papo). Não adianta pedir para fazer muitas coisas de uma vez, pois haverá alucinações.

Onde ocorreu a alucinação neste caso? Fornecemos um texto curto (um prompt (instrução) pequeno), e o sistema criou um site com muito texto, completando informações por conta própria. Exemplos: “luz natural”, “chá servido devagar” e “uma equipe que escuta antes de indicar”. Esse tipo de texto pode até ser aceitável, mas é genérico. Mais grave, porém, foi o trecho “o Calmaria nasceu em Pinheiros”. Em nenhum momento informamos que o Calmaria Spa fica em Pinheiros. Essa informação foi inventada pelo sistema.

Se trabalharmos apenas pedindo para o Rabbit criar sem fornecer muito contexto, sem organizar e sem detalhar, teremos de revisar cuidadosamente, pois haverá alucinações — e o produto criado é o nosso produto. A ideia, durante este curso, é trazermos metodologias e maneiras de controlar melhor o processo para evitar esse tipo de problema, fornecendo mais contexto ao assistente.

Vimos que, se pedirmos, a ferramenta cria. Fica até interessante visualmente, embora esteja diferente da nossa proposta no Figma — o que é esperado, já que não passamos o contexto do Figma para a ferramenta. Onde a ferramenta mais alucina é na parte textual. Se não tivermos o Figma e não aplicarmos as demais metodologias que veremos para orientar o assistente, as alucinações ocorrerão. Portanto, precisamos ter atenção.

Sobre o curso Replit: criação de aplicações web com IA

O curso Replit: criação de aplicações web com IA possui 112 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de IA para Desenvolvimento de Software em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Fundamentos da prototipagem com IA
• Design e identidade visual
• Skills e testes
• Conexões e escalabilidade
• Publicação e SEO