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

Fundamentos da prototipagem com IA - Apresentação

Dando as boas-vindas e apresentando o curso

Boas-vindas a mais um curso na Alura.

Eu sou Ricardo Bugan, Head de Produto e Desenvolvedor, e serei sua pessoa instrutora neste curso de Lovable.

Neste curso, nós vamos explorar a ferramenta Lovable e criar nosso projeto da Hermex Locadora. O site já está publicado, então nós vamos avançar até a publicação desse site e revisar todos os passos que realizamos no Lovable, quais ferramentas foi necessário utilizar e qual foi nosso raciocínio para criar todo o site, colocá-lo em funcionamento e utilizá-lo da forma que desejamos, para que você tenha as funcionalidades necessárias e conheça esta ferramenta para criar seu produto.

Definindo o público e detalhando a proposta prática

Este curso é voltado para quem atua como builder (pessoa que constrói produtos), mas não tem tanta familiaridade com desenvolvimento e está aproveitando a IA para criar o próprio sistema por meio de Web Coding (codificação para a Web). Nosso objetivo é mostrar como aproveitar esse ponto de partida, sair do Web Coding e avançar com uma estrutura melhor para trabalhar com esse tipo de ferramenta.

Vamos desenvolver o site da Hermex e, para isso, utilizaremos o Lovable. Reunimos aqui todo o projeto e vamos explorar todos os conectores, entender como tudo funciona, identificar onde estão os códigos, quais arquivos são importantes, como criar as skills (habilidades) dentro da plataforma, quais skills são relevantes e como organizar tudo para sair do Web Coding, estruturar melhor as ideias e alcançar um formato mais próximo do desenvolvimento, mesmo sem atuar como pessoa desenvolvedora.

Este curso é para quem não tem familiaridade com desenvolvimento, mas deseja criar seu produto, tirar as ideias da cabeça e colocá-las online, exatamente como faremos ao longo das aulas. Vamos?

Fundamentos da prototipagem com IA - Lovable? Vibecoding?

Apresentando o curso e a proposta do Logable

Vamos começar nosso curso de Logable. Se você entrou neste curso, provavelmente já ouviu falar dessa ferramenta e talvez já conheça um pouco do que ela faz. Resumindo, trata-se de termos em mãos uma ferramenta que, com inteligência artificial e a chegada dos modelos de linguagem, pode atuar como uma pessoa desenvolvedora full-stack (pilha completa) para auxiliar no desenvolvimento de uma plataforma de maneira interativa. Conforme foi evoluindo, também incorporou outras funções dentro da própria plataforma. Portanto, não é apenas um ambiente para construir uma aplicação. Podemos observar que constrói aplicativos móveis, aplicações SaaS (Software como Serviço), sites e outros tipos de soluções. Além disso, hospeda esses serviços. Assim, depois de construir o serviço, também podemos hospedá-lo ali, usando o próprio Logable e sua infraestrutura. Por isso, é muito utilizada na etapa de criação, principalmente por quem empreende, quer tirar uma ideia do papel e validá-la. Nós vamos usar o Logable nesse sentido.

Iniciando, se você é uma pessoa desenvolvedora, conhece diversas tecnologias e já sabe manejar serviços como Amazon e Google Cloud, provavelmente este curso não será o mais adequado. Este curso é direcionado a quem deseja tirar uma ideia do papel, construir algo próprio, iniciar um negócio, mas ainda não possui o conhecimento técnico necessário. É nesse ponto que entra a plataforma Logable. É também onde costumamos ouvir que vamos fazer VibeCode (codificação junto com a IA): vamos codificando em conjunto com a IA, passando ideias e iterando sobre a aplicação, porém sem, necessariamente, ter uma estrutura muito consolidada para conduzir essa interação. Nossa proposta é ensinar um pouco dessa estrutura. Portanto, não será 100% VibeCode (codificação junto com a IA). Na verdade, não temos utilizado tanto esse termo, mas vamos trabalhar com uma ferramenta que nasceu para ajudar a tirar uma ideia do papel e colocá-la online (na internet).

Detalhando os públicos-alvo do Logable

Na documentação do Logable, vemos que a plataforma é voltada para quem atua como um(a) Builder (pessoa criadora) individual — aqui, “Builder” (pessoa criadora) é uma definição ampla para quem quer criar: pessoas empreendedoras e microempreendedoras; quem tem uma ideia e quer lançá-la; pessoas de produto; pessoas de design; ou equipes de Go-to-Market (entrada no mercado). Observe que a pessoa desenvolvedora nem aparece como o primeiro público-alvo da ferramenta.

Perfis de produto, de design ou de Go-To-Market (ir ao mercado), que se referem à equipe de marketing, são perfis que têm conexão principalmente com a área de tecnologia, mas não pertencem à área de tecnologia.

Também podemos ter agentes e equipes técnicas que podem usar a ferramenta para construir rapidamente um protótipo, pois sabemos que, se formos pessoas desenvolvedoras em um time ou parte de uma equipe de TI, normalmente as empresas estão muito sobrecarregadas. Para viabilizar um protótipo rápido, recomenda-se usar a própria ferramenta Logable em vez de toda a infraestrutura e o processo de uma equipe de TI completa.

Se você for uma pessoa desenvolvedora e o seu time estiver pedindo que use Logable, este curso pode ser para você, embora abordemos muitos pontos que provavelmente você já conhece. Nosso foco estará mais em pessoas de design, pessoas de produto e pessoas de marketing que desejam tirar uma ideia do papel, testá-la e usar Logable para isso.

Enumerando o que pode ser construído com Logable

O que podemos construir com Logable? De maneira geral, a ferramenta se propõe a viabilizar:

• Aplicações SaaS (software como serviço) e soluções para pequenas empresas.
• Aplicações web (na internet), como sites orientados a pessoas clientes, que podem ser apresentadas diretamente a elas.
• Marketplaces (mercados) de e-commerce (comércio eletrônico), ampliando a gama de possibilidades.
• Ferramentas internas, um caso de uso muito interessante para acelerar processos e aproveitar a plataforma.
• Sites e páginas de marketing.
• Ferramentas educativas.
• Jogos, contando com uma seção dedicada que pode criar esses conteúdos.

Consideramos que a parte mais interessante de criar uma ferramenta interna com Logable é que já a hospedamos dentro do próprio Logable; não é necessário um serviço de hospedagem separado.

Iniciando o projeto do site de aluguel de veículos

No nosso caso, vamos criar um site de frontend (camada de apresentação) orientado a pessoas clientes para uma empresa de aluguel de veículos. É isso que faremos.

Para isso, vamos acessar a página da Logable; já iniciamos sessão e estamos no nosso espaço para começar a construir. Podemos usar tanto a interface web (na internet) quanto o aplicativo. Estamos com o aplicativo da Logable aberto, e a interface é a mesma em ambos. A diferença é que, no aplicativo, podemos nos conectar aos nossos MCPs de forma mais direta, especialmente se tivermos MCPs locais, que vamos utilizar.

Vamos usar o aplicativo para começar a construir o site da nossa empresa de aluguel de veículos, junto com o nosso assistente, que é a Logable.

Fundamentos da prototipagem com IA - Modo construção vs. Modo planejamento

Apresentando a ferramenta e o objetivo do projeto

Estamos na ferramenta Logable, de volta à nossa aplicação de desktop. No painel, na barra lateral, já estamos com um prompt (instrução) muito básico, apenas descrevendo o que queremos construir. Queremos criar uma agência de aluguel de carros e precisamos de ajuda para montar a página principal dessa agência.

Podemos digitar o prompt (instrução) ou usar o microfone, ativando o modo de voz, que capta o que dissermos e transcreve. Por exemplo, ao clicar para gravar, descrevemos: nesta página, queremos um hero (faixa principal) com os padrões visuais da agência, uma seção de carros promocionais, uma área de busca em que a pessoa possa filtrar por modelo de carro, faixa de preço e algumas características do próprio carro e, abaixo, a lista de carros disponíveis para alugar. O sistema captura o que falamos e transcreve.

Em alguns casos, essa transcrição pode conter elementos da fala que o sistema não entende e, por isso, insere hifens. Em algumas aplicações, como Codex ou Claude, a transcrição costuma sair um pouco melhor; neste caso específico, pode não ficar tão precisa. Diante disso, podemos limpar esse prompt (instrução) antes de enviar ou optar por enviá-lo diretamente.

Submetendo o prompt e iniciando o projeto

Vamos submeter o prompt (instrução) para iniciar a criação de um projeto. Como não havia nenhum projeto criado, o sistema já pega o prompt, altera a interface e passa para a área de projeto. Ele cria o projeto e começa a elaborar a página principal solicitada, com todas as características mencionadas.

Podemos ver que o sistema atribuiu o nome Drive Home ao projeto, com base no prompt (instrução). Esse nome pode ser alterado. Em seguida, o sistema explora direções de design para montar a página principal da agência, considerando as funcionalidades que especificamos.

Gerenciando créditos e adotando o modo de planejamento

Todo esse processo consome crédito. Conforme formos enviando prompts (instruções) ao sistema, vamos gastar crédito para que ele construa o site, gere o código, monte a infraestrutura e avance na elaboração.

Precisamos ter cuidado ao usar o Lovable: ou avançamos em passos pequenos, para manter maior controle e gastar menos créditos por vez; ou, se formos executar um passo maior — como solicitar uma página inteira ou um sistema completo de uma só vez —, alternamos para o modo de planejamento.

Neste exemplo, começamos diretamente no modo de construção, mas podemos alternar para o modo de planejamento na parte inferior da interface. No modo de planejamento, o Lovable monta um plano de ação, que podemos validar antes de iniciar a construção. Nossa recomendação é iniciar pelo modo de planejamento, validar o plano e só então construir.

Selecionando a direção de design e gerando recursos visuais

Recebemos uma resposta sobre a direção de design que devemos seguir: há uma primeira opção; uma segunda, com estética mais voltada para academia; e uma terceira, mais limpa. Preferimos a primeira, então seguiremos com ela, e o sistema já começou a preencher essa página.

Como comentado, é recomendável começar pelo modo de planejamento, porque o Lovable entende todos os passos e os requisitos necessários para criar o site. Ele também está gerando as imagens para o site, o que mostra que é uma ferramenta bastante completa: gera as imagens e o layout (disposição). No entanto, todo esse processo — gerar imagens, criar layout (disposição) e produzir código — consome mais créditos do que gerar apenas o texto do planejamento. Uma vez que o plano estiver pronto, partimos para a construção.

Planejando próximos passos e organizando os projetos

O próximo passo, após concluir esta primeira versão, é entendermos o que foi feito e, em seguida, mudar para o modo de planejamento para organizar o que queremos, o que queremos alcançar e o que vamos fazer.

Esta ideia inicial foi apenas para criar o projeto. Se voltarmos ao início, veremos nosso primeiro prompt (instrução) e poderemos visualizar todos os projetos. Entre eles, foi criado o Drive Home, que é o que está sendo montado no momento. Ainda não há imagem de pré-visualização, mas é possível manter vários sites, vários projetos e várias ferramentas internas sendo construídos em paralelo, e todos podem ser encontrados em Todos os projetos.

Ao voltar, o Lovable abre uma nova aba onde está trabalhando. Vamos deixá-lo processar; depois voltamos, revisamos o que foi feito, mudamos para o modo de planejamento e pensamos com mais detalhes no que precisamos para fazer nosso sistema funcionar.

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

O curso Lovable: criação de aplicações web com IA possui 97 minutos de vídeos, em um total de 43 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
• Banco de dados com Supabase
• Base de conhecimento e skills
• Versionamento e testes
• Publicação e SEO