Pular para o conteúdo principal

​
Boas-vindas ao Lovable

1

Começando pelos conceitos básicos do Lovable

2

Conhecendo a interface e os controles

3

Trabalhando com recursos de edição e histórico de versões

4

Implementando autenticação e gerenciamento de usuários

5

Usando bancos de dados Supabase e Funções de borda

6

Integração com GitHub e gerenciamento de código

7

Compartilhando Projetos e recebendo feedback da comunidade

8

Explorando recursos adicionais e modelos

​
Tutoriais da Lovable

Neste tutorial, vamos orientá-lo na criação de um aplicativo de rastreamento de calorias com inteligência artificial usando o Lovable, completo com autenticação, design responsivo elegante, integração com OpenAI e publicação em produção.
1

Configurando a base

A base de qualquer projeto no Lovable é um bom Prompt de IA. Para este app, veja este exemplo:
Crie um aplicativo de rastreamento de calorias com os seguintes recursos:
Página inicial, painel de controle e uma página de refeições.
Campos de entrada para descrições ou imagens de refeições, com análise alimentada pelo GPT-4.
Rastreamento de progresso diário e integração com Supabase para autenticação e gerenciamento de banco de dados.
Interface bonita e responsiva para dispositivos móveis.
Depois que o Lovable gerar o esqueleto da UI:
  • Revise a configuração da navegação e o design da landing page.
  • Itere no Prompt de IA para refinar o layout e garantir que ele seja responsivo em dispositivos móveis.
Seja explícito sobre começar pela UI. O Lovable funciona melhor quando as tarefas são divididas em etapas claras. Por exemplo, defina a navegação, as estruturas das páginas e os temas de design logo no início do Prompt de IA.
2

Design da interface do usuário

Lovable enfatiza uma abordagem passo a passo, semelhante à construção de um edifício:
  • Comece com o andaime (scaffolding): Planeje a estrutura do seu app (por exemplo, fluxo de experiência do usuário, layout das páginas).
  • Adicione a primeira camada: Crie páginas vazias com elementos básicos de design.
  • Refine os detalhes: Adicione cores, animações e responsividade para dispositivos móveis.
Se você tiver designs prontos no Figma, pode tirar capturas de tela e incluí-las no seu Prompt de IA do Lovable. Fornecer imagens em alta resolução garante melhores resultados.
3

Integre o Supabase como backend e para autenticação

Depois que a UI estiver pronta, é hora de adicionar a funcionalidade de backend:
  1. Crie uma conta no Supabase e um Projeto.
  2. Conecte-a ao Lovable pressionando o botão “Connect Supabase”.
  3. Para armazenamento de dados, o Lovable vai gerar tabelas SQL. Por exemplo:
  • Uma tabela profiles para armazenar informações de usuário.
  • Uma tabela meals vinculada aos usuários para acompanhar os registros diários.
Use regras de row-level security (RLS) no Supabase para garantir a privacidade dos usuários. O Lovable pode cuidar disso automaticamente para você.
4

Integração com a OpenAI para análise de refeições

A mágica deste app está nos seus recursos de IA. Para analisar refeições:
  1. Obtenha uma chave de API da OpenAI no seu painel de desenvolvedor.
  2. Use o GPT-4 para analisar descrições ou imagens de refeições.
  3. Garanta que as chaves de API sejam armazenadas com segurança em funções de borda para evitar acesso não autorizado.
Recursos a incluir:
  • Analisar descrições de refeições: Estimar valores nutricionais (calorias, proteína, carboidratos, gordura).
  • Reconhecimento de imagens: Envie uma foto de uma refeição e o GPT-4 extrairá uma descrição e dados nutricionais.
Dicas avançadas para integração com OpenAI:
  • Use function calling para respostas estruturadas, garantindo que os dados sejam formatados corretamente para inserção no banco de dados.
  • Teste esse recurso pedindo que o app analise entradas simples de refeições, como “2 ovos”.
5

Como implementar pagamentos com Stripe

Para monetizar o app, adicione pagamentos por assinatura:
  1. Crie uma conta na Stripe e configure um produto (por exemplo, “Plano Padrão” por US$ 12/mês).
  2. Integre a Stripe à Lovable adicionando a chave de API e o ID de preço do produto.
  3. Redirecione usuários não pagantes para a landing page. Apenas usuários pagantes podem acessar o app principal.
Dicas adicionais:
  • Ative o portal do cliente da Stripe para permitir que os usuários gerenciem suas assinaturas (por exemplo, cancelar ou atualizar métodos de pagamento).
  • Teste pagamentos no modo de teste da Stripe usando os dados de cartão de crédito de teste fornecidos.
6

Testes e depuração

Erros fazem parte natural do desenvolvimento, e o Lovable simplifica a depuração:
  • Use o botão “Try to Fix” sempre que ocorrer um erro de build.
  • Para problemas de backend, confira os registros de log do Supabase para relatórios de erro detalhados.
  • Se estiver publicando no Netlify, revise os registros de log de publicação para identificar problemas de build. Compartilhe os registros de log com o Lovable para obter correções sob medida.
Se você ficar preso, volte para uma versão anterior usando o recurso “Revert” do Lovable. Isso economiza créditos e tempo.
7

Publicando seu aplicativo

Quando seu app estiver pronto, publique-o com a Lovable ou com a Netlify:
  1. Use o recurso de publicação da Lovable para hospedar o app em um domínio padrão.
  2. Para domínios personalizados:
Atualize os metadados do seu app (favicon, meta tags, imagem OG) para fortalecer sua marca e melhorar o SEO.
Neste tutorial, vamos mostrar como criar uma landing page impressionante e totalmente interativa para um assistente de e-mail com tecnologia de IA usando Lovable, 21st.dev e Supabase — com animações, integrações de API e publicação simples e sem complicações!
  • Design com IA & aprimoramentos de UI
  • Adicionando animações & elementos interativos
  • Integrando aprimoramentos de e-mail com IA usando a Groq API
  • Configurando um formulário de contato com Resend
  • Publicando a página usando o Lovable Launch
A sessão apresentou as capacidades do Lovable para iterar rapidamente e entregar resultados prontos para produção.
1

Autenticação

  • Usuários podem se cadastrar, fazer login e gerenciar perfis usando a integração com Supabase.
  • Sessões de usuário seguras permitem experiências personalizadas.
2

Envio de Feedback e Votação

  • Usuários podem enviar feedback com títulos, descrições e imagens.
  • Cada item de feedback exibe a contagem de votos e permite votos positivos em tempo real.
3

Dashboard Administrativo com Resumos de IA

  • Administradores podem revisar todos os feedbacks, filtrar por número de votos e ordenar os itens.
  • Resumos com tecnologia de IA identificam insights acionáveis usando OpenAI e Supabase Edge Functions.
4

Monitoramento de Presença de Usuários

Indicadores de presença em tempo real mostram quais usuários estão ativos na plataforma.
5

Páginas de Feedback Detalhadas com Comentários

Cada item de feedback tem uma página dedicada para discussões, permitindo que as equipes colaborem e priorizem com eficiência.
6

Anexos de Arquivos

Usuários podem anexar imagens ao feedback, armazenadas com segurança usando os recursos de armazenamento do Supabase.
O objetivo desta sessão foi criar um app que permite que desenvolvedores, designers ou consultores ofereçam serviços por assinatura — um modelo de negócio inspirado em plataformas como a DesignJoy.
1

Autenticação e gerenciamento de usuários

A autenticação foi o primeiro recurso implementado, configurando uma base robusta para gerenciar usuários. A equipe enfatizou a importância de integrar a autenticação logo no início para evitar problemas ao escalar o app.
  • Integração com Supabase para cadastros, logins e gerenciamento de perfis de usuário.
  • Sessões de usuário persistentes para melhorar a usabilidade do app.
2

Integração de assinaturas com Stripe

A sessão demonstrou como integrar o Stripe para o gerenciamento de assinaturas:
  • Permitiu que usuários assinassem diferentes planos.
  • Gerenciou o status da assinatura, garantindo que apenas usuários pagantes acessem recursos premium.
3

Dashboard e gerenciamento de tarefas

  • Dashboards específicos por usuário com quadros de tarefas e funcionalidade de arrastar e soltar.
  • Atualizações de tarefas em tempo real para uma colaboração fluida.
4

Chatbot de IA

A sessão foi concluída com a integração de um chatbot de IA, ilustrando como a OpenAI pode adicionar funcionalidades dinâmicas aos apps. Esse recurso pode ser expandido para atuar como assistente virtual, concierge ou interface de consulta de dados.
  • Integração com a OpenAI para fornecer um chatbot capaz de responder de forma inteligente às dúvidas dos usuários.
  • Construído com um único Prompt de IA, demonstrando a eficiência da Lovable.
5

Depuração iterativa e refinamento

A equipe enfrentou desafios de depuração em tempo real, oferecendo insights valiosos sobre resolução de problemas. As técnicas incluíram:
  • Usar registros de log do console e mensagens de erro para identificar problemas.
  • Reverter para versões anteriores do app para evitar ficar preso em estados com erros.
  • Orientar a IA da Lovable com instruções detalhadas para garantir correções precisas.
Neste tutorial, fazemos um mergulho profundo no desenvolvimento de apps com IA, na engenharia de prompts de IA e na automação de fluxos de trabalho com o convidado especial da Lovable, ‪Mark Kashef‬!
  • Como entender e criar prompts de IA eficazes
  • Os quatro níveis da engenharia de prompts de IA
  • Técnicas de meta prompts de IA e boas práticas
  • Estratégias de depuração para fluxos de trabalho de IA
  • Como criar um app de IA usando Lovable e Make.com
  • Como integrar Visual Edits e Tailwind CSS ao design de UI
Neste tutorial, vamos criar uma plataforma de eventos ao estilo Luma usando Lovable e Supabase – ao vivo!
  • Como integrar Supabase ao Lovable
  • Configurar autenticação & gerenciamento de usuários
  • Configurar bancos de dados & comentários em tempo real
  • Testar o desempenho & lidar com vários usuários
  • Depurar em tempo real & otimizar o desempenho
Neste tutorial, vamos mostrar como usar o Lovable, um builder no-code com IA, para criar um app de diário full-stack sem escrever nenhuma linha de código!
  • Crie instantaneamente a interface do seu app
  • Carregue seu design e gere um app funcional
  • Conecte o Supabase para backend e autenticação
  • Implemente o GPT-4o para recursos com IA
  • Publique um app full-stack em poucos minutos!
Neste tutorial, vamos criar um CRM simples, mas poderoso, usando o Lovable para desenvolvimento, o Supabase para armazenamento de dados e o Resend para automação de e-mails.
  • Como o Resend funciona para automação de e-mails
  • Como configurar e-mails de autenticação com Supabase
  • Como criar um painel administrativo e um sistema de gerenciamento de contatos
  • Como criar e personalizar modelos de e-mail
  • Como adicionar um formulário de inscrição em newsletter e funcionalidade de envio em massa de e-mails
Criar experiências web envolventes e interativas ficou ainda mais fácil com as atualizações mais recentes do Lovable!
1

Personalização de UI sem esforço com edições visuais

Uma das maiores melhorias do Lovable é a capacidade de modificar elementos de UI instantaneamente sem consumir créditos de IA. Agora você pode:
  • Editar texto diretamente no seu projeto.
  • Ajustar cores e estilos de botões em tempo real.
  • Enviar e trocar imagens sem interrupções.
  • Passar o mouse sobre elementos para fazer ajustes rápidos.
Usuários agora podem selecionar texto, mudar cores ou trocar ícones com facilidade, sem precisar de intervenção de IA — permitindo um processo de iteração de design mais fluido.
2

Depuração avançada e tratamento de erros de API

Antes, os usuários enfrentavam desafios ao lidar com erros de integração com APIs de terceiros. Agora o Lovable:
  • Exibe mensagens de erro mais ricas para facilitar a depuração.
  • Elimina pop-ups irrelevantes, melhorando o foco em problemas críticos.
  • Habilita detecção de erros orientada por IA para correções automáticas.
Em vez de sobrecarregar os usuários com pop-ups genéricos, o Lovable agora envia o contexto do erro diretamente para sua IA, que pode decidir quando um problema precisa ser tratado e como corrigi-lo.
3

Criando fundos dinâmicos e animações

O Lovable agora oferece suporte à integração perfeita de elementos animados e interativos usando p5.js e outras bibliotecas.

​
Projeto de exemplo: site de agência de viagens com bandeiras interativas

Uma demonstração ao vivo recente mostrou como criar uma landing page de agência de viagens com:
  1. Uma seção hero animada com bandeiras aparecendo dinamicamente e se movendo em resposta às interações do mouse.
  2. Uma seção com rolagem fixa (sticky-scroll) que muda com base na posição de rolagem do usuário.
  3. Efeitos de hover interativos em que as imagens reagem aos movimentos do usuário.

​
Como implementar efeitos animados

Para criar esses efeitos, os usuários seguiram este processo simples:
  • Definir a animação desejada:
Deixe o plano de fundo interativo com elementos flutuantes que se afastam quando o cursor passa por cima.
  • Usar p5.js para gerar efeitos:
    • Implementar um padrão de fumaça cromática.
    • Trocar imagens estáticas por animações dinâmicas de bandeiras.
  • Aprimorar a experiência do usuário com interações baseadas em física:
    • Fazer com que os elementos se movam dinamicamente com base nas ações do usuário.
Se uma animação não estiver funcionando, use o chat mode do Lovable para depurar e refinar o efeito com orientação passo a passo da IA.
4

Importar elementos personalizados de bibliotecas externas

Com 21st.dev, os usuários agora podem integrar componentes de UI pré-construídos de forma integrada em Projetos Lovable.
  1. Navegue pelo 21st.dev em busca de um design de botão.
  2. Copie o prompt de IA gerado.
  3. Cole-o no Lovable e substitua um botão existente.
Essa abordagem acelera os fluxos de trabalho de design e permite interfaces mais polidas e visualmente coesas.
Esse mesmo método funciona para importar presets de animação do motion.dev, facilitando a adição de efeitos de movimento de alta qualidade sem necessidade de código personalizado.
Neste tutorial, vamos criar um CRM personalizado (sistema de gestão de relacionamento com clientes) usando Lovable e Clerk.
Neste tutorial, vamos mostrar como criar um CRM personalizado (Customer Relationship Management, ou sistema de gerenciamento de relacionamento com clientes) usando Lovable e Make.

​
Crie, dê sua marca e lance um micro-SaaS real, ao vivo!

Aprender espanhol nunca foi tão interativo! Imagine um app que não só ensina espanhol por meio de conversas, mas também cria interações de voz em tempo real, cursos dinâmicos e conteúdo visualmente atraente — tudo totalmente impulsionado por IA. Este tutorial pode ajudar você a acompanhar, passo a passo, o que Kristian e Harry construíram:
1

Construindo as bases

Antes de implementar recursos de IA, focamos em construir uma base sólida para o app usando o Lovable. Isso incluiu configurar a autenticação, estruturar o dashboard e implementar o gerenciamento de usuários.
2

Sistema de autenticação

  • Integramos o Supabase para autenticação no backend.
  • Habilitamos cadastro/login com e-mail e senha.
  • Criamos um sistema de perfis para armazenar preferências do usuário e progresso de aprendizado.
3

Dashboard e navegação

  • Projetamos uma barra lateral intuitiva para navegação.
  • Criamos seções para chat, cursos e configurações do usuário.
  • Garantimos uma UI responsiva para uma experiência fluida em todos os dispositivos.
4

Perfis de usuário e armazenamento de dados

  • Adicionamos uma estrutura de banco de dados para armazenar o progresso do usuário.
  • Configuramos opções de gerenciamento de perfil onde os usuários podem ajustar preferências de aprendizado.
1

Cursos gerados por IA

Para tornar o aprendizado interativo, implementamos um sistema de geração de cursos com IA usando o modelo GPT da OpenAI. Veja como funciona:
  1. Usuários selecionam um tópico (por exemplo, “Perguntas para fazer em um churrasco”).
  2. Lovable chama uma função de borda da OpenAI para gerar 10 perguntas envolventes em espanhol.
  3. Usuários fazem quizzes, acompanham o progresso e recebem feedback da IA sobre suas respostas.
2

Aumentando o engajamento do usuário

  • Perguntas geradas dinamicamente: Cada quiz é gerado por IA, garantindo conteúdo novo e exclusivo sempre.
  • Feedback interativo: A IA fornece explicações para respostas corretas e incorretas para melhorar o aprendizado.
  • Acompanhamento de progresso: Usuários podem salvar e revisitar cursos, aumentando a retenção e a prática.
3

Aprimorando o engajamento visual com Replicate

Para adicionar um elemento visual ao aprendizado, integramos o modelo de geração de imagens Flux Schnell da Replicate:
  • Banners de curso automatizados: Cada curso gera dinamicamente uma imagem que corresponde ao tópico.
  • Experiência visualmente imersiva: Visuais gerados por IA aumentam o engajamento e a retenção dos usuários.
  • Processamento rápido de imagens: Usando a API da Replicate, as imagens são geradas em tempo real sem deixar a experiência mais lenta.
4

Conversas por voz em tempo real

Um marco importante no desenvolvimento do app foi a adição de prática de conversação em espanhol em tempo real usando a API WebRTC em tempo real da OpenAI:
  • Tutor de IA interativo: Usuários podem falar diretamente com uma IA que responde dinamicamente em espanhol.
  • Ajuda com pronúncia: A IA fornece correções e sugestões em tempo real.
  • Conversas fluidas: O fluxo natural da conversa faz com que pareça uma interação com um tutor humano.
1

Definindo o conceito e o público-alvo

Antes de trabalhar a marca, definimos nossos objetivos centrais:
  • Chat com IA para conversas em espanhol em tempo real.
  • Quizzes automatizados para sessões rápidas de prática.
  • Aprendizado estruturado com armazenamento de aulas e acompanhamento de progresso.
Isso ajudou a moldar nossas escolhas de branding, garantindo que estivessem alinhadas com o propósito do app.
2

Escolha do nome e do domínio

Buscamos um nome curto e memorável que refletisse a jornada de aprendizado. Usando IA, fizemos um brainstorming e chegamos a Ruta (em espanhol, “rota” ou “caminho”).

​
Processo:

  • Fizemos brainstorming de nomes usando IA para encontrar palavras em espanhol marcantes.
  • Testamos opções como “Camino” e “Verbo”, mas “Ruta” se destacou.
  • Verificamos a disponibilidade do domínio e garantimos rutaapp.com imediatamente.
3

Criando uma identidade visual

Criamos a marca rapidamente:
  • Logo: Um ícone com tema de bússola obtido em bibliotecas de design e editado no Figma.
  • Combinação de fontes: Usamos uma tipografia moderna em negrito para o logo e uma fonte de UI legível para a interface do app.
  • Paleta de cores: Um esquema em azul Tailwind CSS para simbolizar viagem e descoberta.
  • Inspiração de estilo: Experimentamos com neo-brutalismo, ajustando contraste, sombras e bordas para criar uma UI visualmente envolvente.
4

Criando uma experiência de usuário coesa

Usando Lovable, garantimos consistência visual em todo o app:
  • Landing Page: Gerada por IA com uma seção hero dinâmica e envolvente.
  • Dashboard e páginas de curso: Estilizadas para combinar com a identidade da marca.
  • Estilização iterativa: Aplicamos elementos neo-brutalistas para testar diferentes estilos de design.
  • Teste de fluxo do usuário: Garantimos uma navegação fluida do cadastro até o chat em tempo real.

​
Tutoriais da comunidade

Confira os tutoriais da comunidade Lovable aqui.