Primeiros passos

Do primeiro prompt ao aplicativo full-stack

Visão Geral do Lovable

Bem-vindo a este guia passo a passo sobre como criar uma aplicação full-stack usando Lovable:

Visão Geral da Plataforma Lovable

Crie seu Primeiro Projeto

1. Passo 1

   Para começar, acesse lovable.dev e crie uma conta.

2. Passo 2

   Após se registrar, você poderá criar seu primeiro projeto.

3. Passo 3

   Simplesmente digite um prompt inicial para começar, e o Lovable fará o resto! Este é o ponto de partida para qualquer projeto no Lovable, onde você pode dar vida às suas ideias instantaneamente.

   

Dashboard do Lovable

No Lovable, a simplicidade é fundamental:

• Aqui você inicia seu projeto com um único prompt.
• Explore todos os projetos, incluindo os mais recentes e em destaque.
• Comece rapidamente com um template da nossa seleção curada.
• Personalize sua experiência visualizando e editando seu perfil.
• Gerencie sua conta para verificar créditos mensais e ajustar configurações.
• Experimente recursos do Labs como o modo Chat—ative ou desative-os.
• Faça upgrade ou downgrade do seu plano facilmente.

Visão Geral do Projeto

No Lovable, cada projeto segue um fluxo de trabalho estruturado:

• Edite com facilidade usando uma interface baseada em chat.
• Anexe imagens para edições precisas e inspiração.
• Selecione e edite componentes visualmente para uma experiência de design fluida.
• Alterne facilmente entre modo de edição e modo de chat.
• Acompanhe mudanças com histórico de versões e restaure qualquer versão anterior.
• Navegue pelas páginas do seu projeto com facilidade.
• Habilite remixing ou renomeie seu projeto conforme necessário.
• Integre com Supabase para capacidades de backend.
• Colabore via GitHub para editar e gerenciar seu código.
• Publique, implante e compartilhe seu projeto com um link de visualização (lembre-se de republicar após mudanças).
• Alterne entre visualização web e mobile para design responsivo.
• Atualize o modal de visualização para ver atualizações instantaneamente.
• Abra seu projeto diretamente usando o link de visualização.

Configurações do Projeto

As configurações de cada projeto permitem que você:

• Visualize detalhes importantes do projeto como total de edições e data de criação.
• Configure conhecimento personalizado para adaptar o contexto do seu projeto.
• Conecte a um repositório GitHub para colaboração fluida.
• Ajuste a visibilidade do projeto de público para privado.
• Gerencie a exibição do badge (disponível apenas para planos pagos).
• Renomeie seu projeto a qualquer momento.
• Exclua seu projeto (⚠️ Zona de Perigo).

Acesso Rápido do Projeto

Você sempre pode acessar rapidamente:

• Dashboard para uma visão geral dos seus projetos.
• Configurações da conta para gerenciar seu perfil e preferências.
• Documentação, Portal de Feedback e Suporte para orientação e assistência.
• Sair com segurança da sua conta Lovable.

Inicie seu Projeto

Existem várias maneiras de começar com o Lovable, dependendo das suas preferências e recursos:

Prompt

O sistema baseado em prompts do Lovable torna a criação de aplicativos simples.

• Apenas descreva o que você quer construir na caixa de prompt.
• Quanto mais específico você for, melhores serão os resultados.
• Comece com prompts claros e detalhados.
• Você pode refinar e ajustar seu projeto conforme avança.

Exemplo:

“Crie um dashboard com login de usuário, vendas mensais em um gráfico de linha e dados demográficos de clientes em um gráfico de pizza.”

Templates

1. Passo 1

   O Lovable oferece templates para ajudá-lo a começar rapidamente em tipos de projetos populares, como dashboards, sites de e-commerce ou aplicativos sociais, para uma configuração rápida.

2. Passo 2

   Assim que o template carregar, use prompts para ajustar recursos, adicionar novos elementos ou ajustar o design para corresponder à sua visão.

Remixar um Projeto Existente

Você pode remixar um projeto público existente ou um dos seus próprios. Remixar permite que você reutilize o estado atual de um projeto como ponto de partida e construa sobre ele. É uma ótima maneira de explorar novas ideias, fazer ajustes ou iterar com diferentes mudanças preservando a versão original.

Note que não é possível remixar projetos quando o Supabase está conectado.

Usando Figma

Se você tem um design no Figma,

1. Usando capturas de tela: Tire uma captura de tela de qualquer parte dele. Você pode colar a captura de tela diretamente no Lovable ou arrastar e soltar o arquivo de imagem. Assim que você pressionar Enter, o Lovable converterá seu design em código funcional.
2. Usando integração Builder.io: Primeiro, estruture seu design do Figma usando Auto-Layout e nomenclatura clara de camadas. Em seguida, abra o plugin Builder.io no Figma, selecione seu design e clique em “Open in Lovable” para gerar um aplicativo totalmente funcional. Mais informações aqui.

Usando um Esboço

1. Passo 1

   Use Excalidraw ou qualquer ferramenta similar para esboçar sua UI.

2. Passo 2

   Tire uma captura de tela do seu desenho, então cole ou arraste e solte no Lovable.

3. Passo 3

   A plataforma transformará seu esboço em código funcional.

Mais informações aqui.

Clonando um Site ou Aplicativo

Se você quer replicar uma página web existente,

1. Passo 1

   Tire uma captura de tela usando atalhos como Cmd+Shift+4 no Mac ou ferramentas como a Extensão GoFullPage do Chrome.

2. Passo 2

   Cole ou arraste a captura de tela no Lovable

3. Passo 3

   O Lovable recriará a estrutura da página web no seu projeto.

Mais informações aqui.

Edite seu Projeto

Adicionar um Conhecimento Personalizado ao seu Projeto

A Base de Conhecimento no Lovable atua como o blueprint do seu projeto, organizando funcionalidade, design e objetivos em um só lugar.

Siga estes passos para configurá-la e gerenciá-la efetivamente.

1. Passo 1

   Vá para a seção Base de Conhecimento no seu painel.

2. Passo 2

   Clique em “Adicionar Entrada” e categorize-as em:

   • 📌 Visão Geral do Projeto – Defina objetivos e escopo.
   • 🚀 Recursos Principais – Liste funcionalidades centrais.
   • 🎨 Diretrizes de Design – Documente princípios de UI/UX.

   Isso ajuda a manter consistência nos resultados.

3. Passo 3

   Mantenha Atualizado: Revise regularmente e atualize entradas conforme seu projeto evolui. Isso garante que o desenvolvimento permaneça no caminho certo.

Selecionar e Editar Visualmente

Edições Visuais permite desenvolvimento orientado por IA com controles visuais nativos do Tailwind para refinamento fácil.

Reverter uma Alteração

Velocidade importa ao construir aplicativos orientados por IA, mas estabilidade e controle também. É por isso que atualizamos o versionamento para tornar o rastreamento de mudanças sem esforço.

1. Restaurar Versões Passadas Instantaneamente

   Se você quiser voltar para uma versão anterior do seu aplicativo, clique em ‘restaurar’ na versão para a qual deseja reverter.

2. Marcar Edições Importantes

   Mantenha seu trabalho organizado marcando edições importantes, facilitando encontrá-las e revisitá-las depois.

3. Histórico de Versões Intuitivo

   O painel de histórico agora funciona como o Google Docs, tornando o rastreamento de mudanças mais fácil.

   

Adicionar Componente de Animação com 21st dev

Adicionar Imagens ao Prompt

Anexe imagens diretamente ao chat para adicionar contexto aos seus prompts. Isso facilita ilustrar ideias ou conceitos que são melhor mostrados do que descritos.

Adicionar uma Nova Página ao seu Projeto

Refatorar Código

Conectar ao GitHub

Integre seu projeto com o GitHub para iterar em sua aplicação de forma contínua. Você pode fazer alterações no código no GitHub ou em sua IDE preferida mantendo tudo sincronizado com o Lovable.

Mais informações aqui.

Adicione Capacidades Fullstack ao seu Projeto

Conectar um Backend

Supabase é uma plataforma backend-as-a-service que se integra perfeitamente com Lovable para adicionar recursos poderosos de backend à sua aplicação.

1. Configurar Supabase

   Crie uma conta no Supabase e crie um novo projeto.

2. Vincular ao Lovable

   No Lovable, vá para Configurações -> Conectar Supabase e siga os passos.

3. Gerenciar Dados

   Configure tabelas, gerencie dados de usuário e configure notificações por email.

Começando com Supabase

Após configurar seu projeto Supabase, você precisará conectá-lo ao seu projeto Lovable. Esta conexão permite que o Lovable aproveite os serviços de backend do Supabase de forma integrada.

Simplifique a Autenticação do Seu App com Supabase

Implementar autenticação segura é crucial para qualquer aplicação. Com o construtor de formulários AI do Lovable e a integração com Supabase, você pode criar facilmente formulários robustos de login e cadastro.

Aqui está um guia passo a passo:

1. Criar uma Conta Supabase

   • Visite Supabase e cadastre-se.​
   • Acesse o painel para gerenciar seus projetos e bancos de dados.​
2. Integrar Supabase com Lovable

   • No Lovable, navegue até as configurações de integração.​
   • Insira a URL do seu projeto Supabase e as chaves da API para estabelecer uma conexão.
3. Projetar Formulários de Autenticação com Lovable

   • Use o construtor de formulários AI do Lovable para criar formulários intuitivos de login e cadastro.​
   • Personalize a interface para alinhar com a marca da sua aplicação.
4. Implementar Fluxos de Autenticação

   • Configure Supabase Edge Functions para lidar com tarefas como validação de token e sessões de usuário.
   • Garanta o armazenamento seguro das credenciais do usuário e gerencie a persistência da sessão.
5. Habilitar Verificação por Email

   • Configure o Supabase para enviar emails de verificação após o registro do usuário.​
   • Isso adiciona uma camada extra de segurança confirmando as identidades dos usuários.
6. Testar e Implantar

   • Teste minuciosamente os fluxos de autenticação para garantir experiências de usuário perfeitas.​
   • Uma vez satisfeito, implante sua aplicação com confiança.

Mais informações sobre Supabase aqui.

Supabase Edge Functions

Aprimore seu app com Supabase Edge Functions, habilitando recursos de IA, pagamentos e integração de email com facilidade. Siga este guia para construir seu primeiro app full-stack no Lovable:

Você pode adicionar capacidades de IA à sua aplicação, por exemplo:

• OpenAI
• Gemini
• Groq

Adicione Capacidades de Pagamento à sua Aplicação

Existem muitas maneiras de conectar o Stripe ao Lovable, mas a forma mais direta é utilizar os links de pagamento integrados do Stripe. Use este recurso para garantir que você faça isso corretamente!

Adicione Capacidades de Email com Resend

Implante e Publique seu Projeto

Configurar SEO

Você pode verificar esta seção da documentação para garantir que todas as capacidades de SEO estejam devidamente habilitadas.

Adicionar um Domínio Personalizado

Você pode adicionar um domínio personalizado usando:

• Entri (nativo do Lovable)
• Netlify
• Vercel
• Namecheap

Você pode verificar esta seção da documentação para mais informações.

Publicar meu Projeto

Quando seu projeto estiver pronto, publique-o para gerar uma URL compartilhável. Isso facilita a apresentação da sua aplicação ou o compartilhamento com colaboradores e partes interessadas.

Você pode consultar esta seção da documentação para mais informações.