Aula HANDs ON - Lovable Vibe Coding
Aula Hands ON para aprender a criar sua própria Landing Page utilizando a AI LOVABLE.
Esse conteúdo é exclusivo para assinantes da Comunidade Moovers.
Acesse nossa agenda completa de aulas online e imersões presencias AQUI.
Se você ainda não é membro da maior Comunidade de Future Skills do Brasil clique no botão abaixo e se INSCREVA para participar de aulas e imersões presenciais.
Lovable - O Vibe Coding
Na nossa Hands On de Agosto, exploramos como criar de forma rápida Websites, Aplicativos Simples e Landing Pages usando a plataforma Lovable, com foco em edição, integrações e melhores práticas. A sessão mostrou, na prática, como transformar ideias em protótipos funcionais, otimizar fluxos e integrar recursos externos de forma segura e escalável.
Abaixo, você confere os principais momentos e tópicos abordados durante a aula. Lembrando que essa é uma aula que exige um conhecimento técnico intermediário para total compreensão.
00:00 – 00:27 | Abertura e orientações iniciais
Apresentação da facilitadora Daniele Kretli e breve introdução à proposta da sessão. Orientações para os participantes sobre NPS, foto final e importância de permanecer até o final para avisos e próximos passos.
00:27 – 28:44 | Apresentação do MVP
Demonstração de um buscador de passagens, onde o usuário insere origem e data e recebe lista de destinos ordenados por preço. Valores mostrados são fictícios no protótipo; há intenção de integrar com APIs reais no futuro.
28:44 – 29:24 | Integrações e arquitetura
Discussão sobre integrações com APIs de passagem e sistemas bancários. Recomendação de encapsular integrações sensíveis no back-end (ex.: Supabase) para segurança e autenticação.
29:24 – 47:29 | Armazenamento, autenticação e planos
Explicação sobre como os dados são armazenados e logins gerenciados. Apresentação do modelo de créditos: plano básico a partir de US$25/mês, com créditos gratuitos limitados para testes. Sugestão de adquirir créditos para evitar bloqueios durante iterações.
47:29 – 53:42 | Perguntas e edição prática
Discussão sobre custo-benefício e viabilidade. Demonstração do painel de edição: chat, seleção direta de elementos, ajustes no código e upload de imagens.
50:38 – 58:00 | Publicação e testes
Momento de criação junto com a turma de uma página “Assista online” com vídeo incorporado do YouTube. Demonstração de exemplos com projetos em diferentes dispositivos e como usar preview responsivo.
53:42 – 01:09:31 | Checkpoints e meta-prompts
Explicação da importância de salvar checkpoints para evitar retrabalho. Compartilhamento de um meta-prompt usado por Daniele, que será disponibilizado no chat. Indicação de próximos passos: autenticação, banco de dados e integrações encapsuladas.
01:09:31 – 01:16:50 | Perguntas técnicas
Respostas sobre indexação e ranqueamento em IAs. Orientações para fornecer guias de design (cores, fontes, exemplos visuais) para maior fidelidade nas edições.
01:16:50 – 01:20:12 | Encerramento
Reforço do convite para compartilhar projetos no chat da comunidade. Disponibilização dos contatos de Daniele e encerramento com agradecimentos e foto final.
Principais aprendizados
Lovable é eficiente para prototipagem rápida de MVPs com edição visual e via chat.
É essencial planejar o banco de dados antes para reduzir custos e retrabalho.
Checkpoints salvam tempo e créditos.
Integrar APIs de forma segura usando back-end (ex.: Supabase) é fundamental.
Fornecer especificações de design aumenta a qualidade do resultado.
A partir daqui, o vídeo e os materiais compartilhados durante a aula são exclusivos para os membros, assine nossa Comunidade para ter acesso a esse e outros conteúdo :)
Se você já é membro clique no vídeo abaixo para assistir a aula completa e ter acesso aos materiais apresentados 🚀