Replit: criando e refinando MVPs web com IA

Criando e editando um projeto - Apresentação

Apresentando o curso e seus objetivos

Bem-vindo a um novo curso da Alura. Este curso é destinado a quem tem uma ideia, deseja realizar um teste, pensar em um MVP (Produto Mínimo Viável) e precisa colocar isso em prática rapidamente. O objetivo é lançar o projeto para realizar testes e validar o MVP, além de testar uma hipótese. Para isso, é necessário utilizar uma ferramenta de low-code ou no-code que permita implementar tudo isso, transformando o que já foi desenvolvido no Figma em uma aplicação funcional. Essa ferramenta escreve o código por nós, sem a necessidade de conhecimento prévio em programação. Embora seja útil ter esse conhecimento, não é obrigatório, pois a ferramenta cuidará da criação.

Introduzindo o projeto "Jornada de Milhas" e ferramentas utilizadas

Neste curso, trabalharemos no projeto "Jornada de Milhas", que está disponível no GitHub. Teremos a referência do GitHub durante todo o curso para desenvolvermos o projeto com o nosso Replicate.

El Replicate é uma ferramenta semelhante ao Logable e ao Bolt, que utilizaremos para criar nosso projeto. Ele oferece uma visualização prévia dentro da própria plataforma, mas também permite que vejamos em tela cheia, o que é mais interessante e se assemelha à forma como outras pessoas também verão.

Explorando funcionalidades e integrações do Replicate

Além disso, podemos observar como funciona o modo de planejamento, quais são as habilidades disponíveis para nosso agente, e quais integrações são interessantes e podemos utilizar. Entre elas, está o servidor MCP e a integração com o GitHub para realizar o versionamento.

Faremos uma série de alterações no projeto, incluindo conexões com nosso projeto e a base de dados, para que possamos criar todo o projeto e colocar nosso MVP online o mais rápido possível. Com a interface de agente e de conversação do nosso Rapid, tudo se torna mais fácil e simples para criar sua prova e colocá-la online.

Apresentando o instrutor

Meu nome é Ricardo Bugan, serei seu instrutor neste curso e espero por você na próxima aula.

Criando e editando um projeto - Começando o projeto

Introduzindo a ferramenta Rept e o projeto "Jornada de Milhas"

Estamos aqui com nosso Rept aberto para que possamos iniciar o curso e entender o que vamos fazer, qual é o projeto, para que serve essa ferramenta e como ela nos ajuda. Rept é uma ferramenta semelhante ao Bolt para a criação de aplicações ou ao Lovable, ambos com propostas um pouco diferentes, sendo o Rept uma alternativa a esses dois. Lovable foi pensado principalmente para quem não é técnico, permitindo que se descreva a funcionalidade desejada e ele cuida da parte técnica. Já o Bolt apresenta uma abordagem mais técnica, mais integrada, sendo uma ferramenta mais orientada para a pessoa desenvolvedora. Diríamos que o Rept está em um ponto intermediário, com aspectos mais técnicos e outros que abstraem mais, mas inclui funcionalidades muito interessantes.

Durante este curso, trabalharemos com nosso projeto "Jornada de Milhas". Temos um site e um Figma, que estarão disponíveis para vocês também, e trabalharemos nesse Figma tentando montar essa página e entender como o Rept nos ajudará a chegar a esse resultado. Para isso, primeiro precisaremos criar nossa aplicação. No Rept, a página inicial já oferece a opção de criar uma app, sendo que por padrão é uma webapp, que é o site. Vamos criar uma webapp, mas poderíamos criar uma app móvel, uma app baseada em dados para visualizar dashboards, um jogo 3D, algo de automação, ou começar do zero e descrever toda a ideia. Como já sabemos que queremos uma webapp, deixaremos assim. Temos dois modos: modo build, que começa imediatamente a construir e gerar o código da aplicação desejada, e modo planejamento, que faz algumas perguntas antes de começar. Vamos usar o modo planejamento porque estamos iniciando nosso projeto e vamos tentar descrever essa página e a ideia do nosso produto.

Descrevendo a estrutura e funcionalidades do site

O Rept nos ajudará bastante quando quisermos fazer um MVP; todas as ferramentas — Rept, Lovable, Bolt — são úteis quando queremos criar um MVP ou testar algo rapidamente, pois aceleram muito o processo. A ideia é descrever um pouco a ferramenta e as funcionalidades que temos aqui. Por exemplo, teremos um menu superior com alguns botões como vender milhas, registrar-se, login. Depois, teremos um banner com uma foto de fundo de Machu Picchu e o texto principal "compartilhe milhas e compartilhe o mundo". Em seguida, haverá uma seção de busca, onde poderemos buscar passagens, voltar e filtrar, e depois a área de promoções. Vamos descrever tudo isso ao Rept para que ele comece a criar nossa aplicação.

Vamos começar a criar nosso site, o site da "Jornada de Milhas". Vamos criar apenas a homepage. Nesta homepage, teremos um menu superior com o logo da marca e três botões com o seguinte texto: vender milhas, sobre e registro. O login pode ser adicionado depois, então deixaremos apenas o registro. O último botão terá um fundo roxo, tudo com texto branco, fundo do menu preto e texto branco. A seguir, teremos um hero com uma foto de Machu Picchu e o texto "compartilhe milhas e compartilhe o mundo". Abaixo desse hero, teremos uma seção para mostrar promoções de viagens.

Explorando o planejamento e a interação com a IA

Resumimos um pouco; a ideia é que, conforme formos escrevendo as promoções, se forem muito longas, traremos já prontas para o curso, para não ter que escrever tudo o tempo todo, pois essa não é a parte mais interessante. Estamos tentando descrever o que há, algumas ideias que já estão no layout do Figma, para que o Rept tente entender alguns conceitos que teremos dentro da nossa aplicação. Então, o menu superior com o logo e os botões, nosso hero, que é essa parte, e depois teremos que trazer essas imagens. Apenas mencionamos a imagem de fundo e o texto, e a área de promoções de viagem que será colocada ali.

Poderíamos detalhar mais; por exemplo, fizemos scroll no menu e ele se deslocou. Poderíamos detalhar mais, então na área de promoções ignoramos a parte do filtro, faremos depois. Poderíamos dizer que cada promoção é um cartão com uma foto que mostra o destino, o preço e um botão de ver detalhes. Quanto mais detalhes dermos, melhor, mas como a ideia aqui também é explorar a ferramenta, queremos deixar mais aberto para ver como ela interpreta isso, pois ao usar uma IA, ela tentará interpretar o texto para gerar código, tendo suas próprias referências de como foi treinada. Assim, podemos ter uma ideia de como ela vai agir.

Interagindo com o sistema e ajustando detalhes

Além disso, estamos no modo planejamento, então ao descrever as funcionalidades que temos, podemos deixar claro "pergunte qualquer informação que faltar". Vamos pedir que execute. Como estamos no modo planejamento, esperamos que ele venha aqui e comece a conversar conosco para que possamos montar juntos. Agora está trabalhando, então começará a responder.

Percebemos que houve uma mudança de contexto. Fomos retirados da página inicial e levados a um projeto chamado "Jornada de Millas". O sistema entendeu "milla jornada" e apresentou de outra forma, mas nos direcionou para a área de planejamento. Estamos na parte de planejamento e, em seguida, passaremos para a construção.

O sistema nos informa: "Vou ajudar a criar uma homepage para o site Jornada de Millas. Entendi bem os requisitos que você escreveu. Antes de propor o plano, preciso esclarecer alguns pontos para garantir o resultado final."

Respondendo às perguntas do sistema e definindo o estilo visual

Sobre a seção de promoções, é questionado como gostaríamos que as promoções de viagem fossem apresentadas. Poderíamos ter descrito isso desde o início para evitar esse passo, ou, se não estivéssemos no modo de planejamento, deveríamos ter sido mais descritivos no prompt inicial. Caso contrário, o sistema nos perguntará nesta etapa de planejamento.

São levantadas questões sobre a carga de imagem, destino, preço, milhas, descrição e quantas promoções devem aparecer: 3, 6 ou 9 inicialmente. As promoções são estáticas, fixas no código, ou planejamos adicionar e editar depois? O site será estático ou dinâmico? Isso depende muito do nosso contexto. No nosso caso, queremos que seja dinâmico, mas deixaremos estático para observar como as modificações são feitas. Informaremos que será estático para ver como o sistema lida com essas mudanças, como passa de algo dinâmico para estático, ou de um menu dinâmico para nossas promoções, para entender melhor.

É perguntado se já temos um logo. Gostaríamos que fosse criado um logo simples. Por enquanto, deixaremos o logo como algo básico. Está no Figma, mas conectaremos o Figma depois.

Sobre o estilo visual, além do estilo do botão de registro e do preto e branco, há alguma paleta de cores? Podemos obtê-la do Figma também, observando a paleta no Figma. Temos uma paleta que podemos passar se fizer sentido. Podemos definir um roxo mais vibrante como cor primária, um roxo menos saturado como secundária e um laranja como cor de detalhe. Podemos deixar assim.

Finalizando o planejamento e iniciando a construção

Nesta interação, o sistema dialoga conosco. O título inclui o nome do lugar, preço e botão de detalhes. No nosso caso, se formos ao Figma, ele mostra seis de cada vez. Então, são seis aqui. Mostra apenas seis cartões por vez em um grid de 3x2. Colocamos um placeholder por enquanto.

O interessante é que, ao escrever para uma IA, podemos pensar que, se estivéssemos conversando com uma pessoa desenvolvedora, poderíamos dizer "enquanto resolvo algumas coisas que não tenho, comece o trabalho". Se estivermos fazendo um MVP ou testando um produto, pode ser que não tenhamos tudo; então, deixamos um placeholder. Coloque qualquer coisa por enquanto, queremos ver como entrega o resultado. Assim, podemos ir pedindo e organizando nosso discurso, nosso planejamento com a IA, de acordo com a informação que temos, e dizer "esta informação não a tenho. Coloque um substituto, algo temporário." E deixar claro que é temporário porque o substituiremos depois.

Sobre o estilo visual, que tipo de estilo? No nosso caso, diremos que seguiremos um estilo moderno e usaremos um roxo mais vibrante como cor principal, um roxo menos saturado como secundário e um laranja como cor de destaque. Para as imagens, também usaremos placeholders. Continuaremos com placeholders.

O bom do modo de planejamento é que ele vai conversando conosco, buscando detalhes. Não é apenas o que colocamos no prompt inicial. Pergunta o que falta. Às vezes, em algum modo de planejamento, a ferramenta pode pular etapas e fazer o plano que quer executar, pedindo apenas para validar. Então, não tem a intenção de perguntar o que falta. Como adicionamos essa última linha no primeiro prompt, é bom que tenha vindo realmente esclarecer algumas dúvidas que eram lacunas no primeiro prompt.

Agora que temos toda a informação necessária, o sistema criará um plano para a homepage da Jornada de Millas com um design moderno, conforme escolhemos. Aqui, o sistema propôs um web app moderno, uma homepage moderna para um site de milhas, um menu, seção hero, um grid de promoções de viagem. Também podemos ver que mudou para o inglês, então incluirá essas features e também fará isso. Estamos falando em português, mas o treinamento muitas vezes foi em inglês, então há essa mudança.

O sistema descreve: menu superior com logo de marcador, três botões com fundo preto e texto branco. O botão de registro será usado com fundo roxo vibrante para destacar. Aqui, está apenas revisando, esse foi o plano que fez. Podemos clicar, mudar o plano ou dizer "não, comece a construir", e ele começará a executar esse plano, passando essas ações para nossa IA, que construirá uma aplicação e já mostrará na janela de preview o que foi construído.

É uma interface simples, tipo chat, e esse modo de planejamento é justamente para que possamos colocar nossa ideia e a IA vá conversando, fazendo perguntas, permitindo que ajustemos lacunas que, às vezes, no nosso contexto, não ficam claras porque estamos imersos na ideia. Ao transmiti-la para a IA, algo pode faltar; então, ele construirá aqui. Deixaremos construindo e voltaremos no próximo vídeo com isso já construído.

Criando e editando um projeto - Modo Lite e correções em objetos selecionados

Descrevendo a estrutura do código HTML

A transcrição descreve o processo de criação e ajustes de uma página web, mencionando elementos visuais e funcionalidades que ainda precisam ser implementadas. Vamos integrar o snippet de código fornecido para ilustrar como alguns desses elementos são estruturados no código.

Na transcrição, é mencionado que a imagem de fundo no Atchimpitch contém a frase "compartilhe milhas, compartilhe o mundo", que não foi solicitada. Vamos ver como isso é representado no código:

<div data-testid="hero-title">
  Compartilhe milhas, <br />
  <span className="text-primary">compartilhe o mundo</span>
</div>

Este trecho de código HTML mostra como a frase "compartilhe milhas, compartilhe o mundo" é estruturada na página. O texto "compartilhe o mundo" está dentro de um elemento <span> com a classe text-primary, que provavelmente aplica um estilo específico, como uma cor ou tamanho de fonte diferente, para destacar essa parte do texto.

Ajustando cores e estilos para legibilidade

A transcrição também menciona a necessidade de ajustar cores para melhorar a legibilidade e garantir que o design siga a paleta de cores desejada. O snippet de código não aborda diretamente essas alterações de estilo, mas podemos inferir que a classe text-primary é onde tais ajustes de cor podem ser aplicados no CSS.

Revisando e ajustando o design

Continuando com a transcrição, é importante notar que, embora a página tenha sido criada rapidamente com um prompt, ainda há detalhes que precisam ser ajustados manualmente, como a remoção de elementos não solicitados e a correção de cores para garantir a consistência visual com o design original no Figma.

Esses ajustes são feitos utilizando modos diferentes, como o modo leve para mudanças rápidas e o modo autônomo para alterações mais complexas. A transcrição destaca a importância de revisar e ajustar o design para que ele atenda às expectativas e requisitos do projeto, mesmo quando se utiliza ferramentas automatizadas para acelerar o processo de desenvolvimento.

Sobre o curso Replit: criando e refinando MVPs web com IA

O curso Replit: criando e refinando MVPs web com IA possui 142 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de IA para Programação 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:

• capitulo