Curso Lovable

Parte 2 · Construir 20min

04 Cole no Lovable e veja o app nascer

Com o PRD e o schema prontos, abrimos o Lovable e colamos os dois. O sistema nasce nesta aula. Antes disso, mostramos o que acontece quando se pede um app em uma linha só.

O que acontece

  1. Apresentamos a tela do Lovable em um minuto: o chat de um lado, a preview do outro, o botão Publish no canto.
  2. Fazemos o contraexemplo: um pedido de uma linha, que gera um resultado genérico.
  3. Em um projeto novo, usamos o Prompt 3 com o PRD e o schema. O sistema aparece e mostramos como cada linha do PRD virou uma tela.
  4. Fazemos um ajuste com a ferramenta de selecionar elementos e outro com a edição de texto. Depois, quebramos o layout de propósito e voltamos para a versão anterior.
Na tela

Dois projetos no Lovable, a preview, a barra de edição e o histórico de versões.

Do Lovable

O chat, a preview, os modos Build e Plan, a barra da preview, o histórico de versões e o custo em créditos em tempo real.

Você sai com

O sistema funcionando, com as cinco telas e dados de exemplo. Ainda sem banco de dados e sem IA.

Na tela

Um slide nesta aula.

Apresentar ▶
  1. 01O pedido de uma linha

Prompts

Prompt 3 — construir no Lovable

Crie um projeto novo no Lovable. Cole este texto com o PRD e o schema no final.

Quero construir o sistema descrito abaixo. Seguem o PRD e o schema do
banco de dados.

Construa o sistema completo seguindo exatamente as telas, os papéis e
as regras do PRD, e usando o schema para a estrutura dos dados.

Onde o PRD não disser como algo deve ser, escolha a opção mais
simples e me avise o que escolheu. Não adicione funcionalidades que
não estão no PRD.

Use dados de exemplo para que eu consiga ver as telas funcionando.

--- PRD ---
[cole o PRD corrigido]

--- SCHEMA ---
[cole o schema Prisma]

Variante em camadas

Se o sistema tem banco de dados e IA, o Lovable costuma se sair melhor quando não constrói tudo de uma vez. Nesse caso, troque o segundo parágrafo por:

Nesta primeira etapa, construa apenas as telas e a navegação, com
dados de exemplo. Não conecte banco de dados nem IA ainda. Vou pedir
isso nos próximos passos.

E, nas aulas seguintes:

Agora conecte o banco de dados usando o schema que enviei. O formulário
precisa salvar de verdade, e o painel precisa ler do banco.
Agora a camada de IA. [descrição do que a IA faz, com o prompt do
diagnóstico]. Use o Lovable AI. A chamada precisa ser executada no
backend, nunca no navegador.

Para testar no ensaio: qual das duas versões do Prompt 3 produz o melhor resultado para o qualificador. No dia a dia, o instrutor cola tudo de uma vez. As aulas 05 e 06 assumem a variante em camadas. A decisão vem do resultado real, e a gravação segue o que funcionou.

Outro ponto a conferir: o Lovable usa Supabase, não Prisma. Ele lê o schema Prisma como uma descrição e o traduz. Se a tradução sair errada, peça o schema em SQL no Prompt 2.