Como usar o Lovable: crie seu primeiro aplicativo passo a passo
Um passeio completo pelo Lovable, reconstruído a partir de uma criação real de iniciante — prompts estruturados, modo Plan, Google Calendar, correção de bugs, verificação de segurança e publicação como PWA. Cada passo com captura de tela.
Lovable em resumo
- Estruture o primeiro prompt em torno de duas coisas: o que o app faz (o objetivo) e como o usuário o percorre (o fluxo). Uma ou duas funções bastam para começar.
- Antes de enviar, troque de Build para Plan. O Lovable primeiro faz perguntas de esclarecimento e escreve um plano que você pode corrigir antes de qualquer código.
- Quando algo sair errado, corrija com prompts precisos — "as tarefas devem começar no intervalo de 15 minutos mais próximo, nunca no passado" funciona muito melhor que "arrume os horários".
- Antes de publicar, rode a verificação de segurança aprofundada — "Try to fix all" é grátis. Uma frase em linguagem natural transforma o app em uma PWA instalável no celular.
Lovable AI Tutorial for Beginners - Build Your First App
Vídeo original de:Kevin Stratvert11:40
As capturas de tela vêm do vídeo original e são creditadas com links de marcação de tempo. O texto é redação própria baseada na transcrição completa — os fatos correspondem ao vídeo.
Este tutorial é um resumo ilustrado e independente para quem prefere ler. Para apoiar o criador, assista ao vídeo original do canal, ligado acima.
Crie um app no Lovable, passo a passo
- 1
Conheça o espaço de trabalho
Depois de se cadastrar, você chega ao espaço de trabalho do Lovable. A barra lateral reúne Home, Busca, Recursos e Conectores, com seus chats recentes abaixo. A caixa de prompt no centro é onde todo app começa; logo abaixo ficam as coleções de templates, caso precise de inspiração.
O espaço do Lovable: caixa de prompt no centro, chats e conectores à esquerda.Ver em 0:40 - 2
Escreva um primeiro prompt estruturado
Antes de digitar qualquer coisa, deixe claro duas coisas: o objetivo (o que o app faz) e o fluxo (como o usuário o percorre). Esta criação é um app de voz para o calendário: você despeja tarefas falando e ele as coloca no Google Calendar. Declare as restrições — cada tarefa dura 30 minutos salvo indicação contrária, o usuário confirma antes de salvar — e descreva o visual com palavras como clean, sleek, minimal. Termine com: "Faça-me todas as perguntas de que precisar para entender exatamente o que quero."
O primeiro prompt completo: objetivo, fluxo, restrições, visual e convite a perguntas.Ver em 3:20 - 3
Troque para o modo Plan antes de enviar
Abra o menu Build sob a caixa de prompt e escolha Plan — "discutir antes de construir" (alterne com Alt+P). No modo Plan, o Lovable faz perguntas e escreve um plano primeiro, o que impede que ele construa o app errado. Para um primeiro projeto, é o hábito de maior valor.
O menu Build/Plan: escolha Plan para discutir antes de construir.Ver em 2:40 - 4
Responda às perguntas de esclarecimento
O Lovable volta com perguntas — escolhas visuais como a cor de destaque e, depois, funcionais: usar a transcrição de voz gratuita embutida ou um serviço de terceiros, conectar o Google Calendar pelo conector do Lovable, e por aí vai. Responda com sinceridade; respostas vagas viram funções vagas depois.
Perguntas de esclarecimento: escolha a cor de destaque e responda às opções funcionais.Ver em 4:12 - 5
Leia o plano e aprove
O plano se divide em seções acessíveis — visual, telas e fluxo, como funciona — mais os detalhes técnicos. Mesmo sem saber código, confira telas e fluxo: é o seu app no papel. Se algo estiver errado, digite o que mudar na caixa de prompt em vez de aprovar; quando bater com a sua ideia, clique em Approve.
O plano gerado: revise, peça mudanças e depois aprove.Ver em 5:00 - 6
Conecte o Google Calendar quando pedido
No meio da construção, o Lovable pausa e pede para conectar seu Google Calendar. Clique no botão de conexão, entre com sua conta Google e vincule ao projeto. Nesta demo, o calendário fica fixado no seu; mais tarde você pode mudar para login por usuário e compartilhar o app.
No meio do caminho, o Lovable pede para vincular seu Google Calendar.Ver em 5:35 - 7
Teste falando suas tarefas
Quando a pré-visualização aparecer, clique no microfone e despeje de verdade: "Preciso enviar o relatório TPS com uma nova capa para o Bill, e o resumo da carteira de clientes para o Charles." Pare a gravação e o app transforma sua fala em cartões de tarefas aguardando aprovação.
Primeiro teste de voz: o app transforma o desabafo em tarefas.Ver em 5:50 - 8
Corrija o comportamento com prompts precisos
Primeiro bug: as tarefas foram marcadas no segundo exato em que você as falou. A correção é uma instrução precisa: "As tarefas devem começar no intervalo de 15 minutos mais próximo (e nunca no passado), não na hora atual." O Lovable registra a mudança num cartão pequeno — por isso valeu a pena acertar o plano no começo.
Um prompt preciso encaixa as tarefas em intervalos de 15 minutos.Ver em 8:00 - 9
Ensine o seu jeito de falar de datas
Diga "ligar para o Kevin amanhã às 10" e ele agenda às 3 da manhã — o app ainda não interpreta datas relativas. Dê as regras via prompt: reconhecer tomorrow, yesterday, Friday at 3 p.m.; morning significa antes das 11, afternoon vai de 13h às 16h; next Monday é o da semana seguinte, não o que vem aí. Quanto mais concretos os exemplos, menos retrabalho depois.
Regras de datas por voz: exemplos de momentos e de durações, um a um.Ver em 7:40 - 10
Depure com capturas no modo Plan
Os horários seguem sete horas atrasados — um bug de fuso horário. Cole a captura dos horários errados direto na caixa de prompt e diga o que observa: "Parece um problema de fuso, os horários estão uns 7 horas fora." Volte ao modo Plan para a correção; se o plano ficar técnico demais, acrescente: "Não sou técnico, você me explica com palavras que eu entenda?"
Capture o bug, descreva-o e o modo Plan produz a correção.Ver em 8:55 - 11
Publique e garanta sua URL
Antes de publicar, um último prompt troca o app do seu calendário para login por usuário, para que ninguém mexa nos seus eventos. Depois clique em Publish no canto superior direito: você recebe uma URL gratuita em lovable.app (domínios próprios são Pro), escolhe visibilidade pública e preenche título, descrição e imagem social.
Fluxo de publicação: sua URL gratuita em lovable.app e os metadados do app.Ver em 9:45 - 12
Rode a verificação de segurança e adicione a PWA
Antes de ir ao ar, o Lovable recomenda uma verificação de segurança aprofundada — valiosa em código gerado por IA. As correções via "Try to fix all" não custam créditos. Depois, acrescente o toque mobile com uma frase: "Faça com que eu possa instalar isto como ícone de app no meu celular. Use um microfone azul-petróleo como ícone." O Lovable gera o manifest PWA e os ícones de toque.
A verificação de segurança corrige de graça — e o prompt PWA o torna instalável.Ver em 10:40 - 13
Instale no seu celular
Publique a atualização, abra a URL no navegador do celular e toque no ícone de compartilhar. Escolha "Adicionar à tela de início" e confirme — e o ícone do app pousa na sua tela inicial. Toque nele e ele roda em tela cheia como um app nativo, sem passar pela loja de aplicativos.
"Adicionar à tela de início" transforma o app publicado em ícone no celular.Ver em 11:00