Lovable e Supabase: Como Criar Sistema de Gestão

Aprenda a criar um sistema de vendas completo do zero usando Lovable e Supabase. Veja como construir dashboards, cadastros e login sem programar.

Introdução

Fala, impressionador!

Se você quer criar um sistema de gestão completo sem precisar programar linha por linha, a combinação de Lovable e Supabase pode ser a solução perfeita.

O Lovable é uma ferramenta de inteligência artificial que cria sites e aplicativos completos a partir de comandos simples, enquanto o Supabase funciona como um banco de dados gratuito na nuvem para armazenar todas as suas informações.

Neste guia passo a passo, você vai aprender como construir um sistema completo de gestão de vendas, incluindo dashboard, registro de vendas, gerenciamento de produtos, clientes e usuários. E o melhor: tudo isso partindo do absoluto zero, mesmo sem conhecimento técnico avançado.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Lovable e Supabase formam uma dupla no-code para criar sistemas web completos sem programar linha a linha. O Lovable gera a interface e a lógica do app a partir de descrições em texto (IA), e o Supabase fornece o banco de dados, a autenticação e o backend. Juntos, permitem montar dashboards, cadastros e telas de login rapidamente.

O que é o Lovable?

O Lovable é uma ferramenta online que utiliza inteligência artificial para criar sites e aplicativos de forma automática. Na prática, você escreve um prompt (comando) explicando o que deseja, e a IA constrói o sistema para você.

A ferramenta funciona assim:

1. Você acessa o site lovable.dev;
2. Clique no botão Login caso tenha uma conta ou em Começar se for seu primeiro acesso;

3. Use um e-mail do Gmail ou Github para acessar;

4. Passa instruções em linguagem natural, da mesma forma como você conversa com o Chat GPT, por exemplo;

5. O Lovable gera todo o código necessário

O Lovable funciona com créditos. Na conta gratuita, você tem 5 créditos por dia. Cada instrução que você passa consome uma quantidade variável de créditos, dependendo da complexidade:

• Alterações simples (mudar cor de botão): menos de 1 crédito
• Criação de páginas básicas: 1 a 2 créditos
• Sistemas complexos: 2 a 5 créditos

Para projetos mais complexos, você pode considerar uma conta paga, que oferece créditos ilimitados e mais recursos. Caso queira, você pode consultar os preços e vantagens no site do Lovable.

O que é o Supabase?

Como dito também usaremos um banco de dados que será o Supabase. Esta ferramenta ajuda a criar banco de dados online e de forma gratuita que permite armazenar todas as informações do seu sistema de forma segura e organizada.

Por que usar o Supabase?

• Gratuito para começar;;
• Integração nativa com o Lovable;
• Não precisa programar para conectar;
• Armazena dados de forma segura na nuvem.

Criando o projeto

O primeiro passo para criar qualquer projeto no Lovable é preparar um prompt bem detalhado. Quanto mais específico você for, melhor será o resultado.

Um bom prompt deve conter:

• Objetivo: O que você quer criar
• Funcionalidades: Lista de recursos necessários
• Requisitos de layout: Como deve ser a aparência
• Estrutura de dados: Que informações precisam ser armazenadas

Caso queira acompanhar e criar o seu próprio sistema de gestão de vendas, você pode baixar o prompt que usaremos neste artigo no material disponível da aula.

Copie o prompt e ao final, escreva adicione: "Vamos conectar o Supabase depois". Isso evita que o Lovable tente conectar o banco de dados prematuramente, o que pode causar erros.

Ao enviar o prompt, na lateral esquerda conseguimos ver todos os passos que estão sendo executados pela IA para criar o conteúdo descrito no prompt. Esse processo pode levar alguns minutos, dependendo da complexidade do projeto.

Quando o Lovable finalizar, você terá: um sistema visual completo, um menu lateral com algumas opções como: "Dashboard", "Vendas", "Produtos", "Clientes", "Usuários", "Configurações", layout responsivo, páginas básicas criadas e a estrutura de código pronta.

Criando conta no Supabase

A estrutura visual do projeto foi construída pelo Lovable, agora precisamos de um espaço para armazenar os dados que vão ser inseridos no sistema. Neste caso, usaremos o Supabase!

O primeiro passo é acessar sua conta através dos passos abaixo:

1. Acesse supabase.com
2. Clique em Sign in no canto superior direito da tela. Caso não tenha uma conta você pode clicar em Start your project;

3. Use seu email ou conta do GitHub ara fazer login ou se cadastrar;

4. Ao criar a conta e acessar pela primeira vez, você precisará criar uma nova organização para armazenar os projetos. Preencha o campo Name com o nome da organização, por exemplo, "Base de dados". No campo Type mantenha o valor padrão "Personal", que representa projetos pessoais. Em Plan mantenha o plano de assinatura gratuito ou insira um plano que queira utilizar. Por fim, clique em Create organization;

5. O próximo passo é preencher as informações para criar um novo projeto. O campo Organization virá preenchido com a organização que você acabou de criar. Caso tenha outras organizações pode escolher na qual colocar o projeto. Dê um nome para o  projeto no campo Project Name, por exemplo, "Sistema de vendas". Escolha uma senha em Database password e preencha o campo Region com "South America (São Paulo)". Com todos os campos preenchidos clique em Create new project.

Integrando o Supabase com o Lovable

Agora que temos um projeto criado no Supabase para servir como a base de dados do sistema de vendas precisamos conectá-lo ao Lovable. Para isso:

1. Volte ao seu projeto no Lovable e use o atalho CTRL + .;
2. No menu lateral clique na opção Integration;
3. Selecione a opção Supabase;

4. Na seção Organization clique no botão Connect Supabase;
5. Uma tela vai abrir com uma lista de permissões e abaixo qual organização você quer conectar. Neste caso, selecione "Banco de dados" e clique em Authorize Lovable;

6. Clique em Continue para continuar a conexão. Caso queira você pode criar outra organização ao clicar no botão Add More Organization;

7. Finalmente clique em Connect para conectar o projeto do Supabase ao Lovable. Neste caso o projeto é "Sistema de vendas", mas caso queira, você pode criar outro projeto clicando no botão Create Project;

Ao clicar no botão Connect um comando será utilizado e o Lovable vai criar as conexões necessárias.

Criando o sistema de login

Com o Supabase conectado, podemos adicionar autenticação de usuários. No chat do Lovable, digite: "Crie uma tela de login e conecte com o Supabase".

O Lovable vai:

• Criar uma página de login bonita;
• Configurar a autenticação no Supabase;
• Criar opção de cadastro de novos usuários;
• Implementar o sistema de senha.

Durante esse processo,o Lovable pode pedir permissão para fazer modificações no Supabase. Sempre clique em Allow (Permitir) para autorizar as mudanças.

Para facilitar os testes, podemos desabilitar a confirmação por email no Supabase. Para isso:

1. Abra o Supabase em outra aba;
2. No menu lateral, clique em Authentication
3. Selecione Sign in/Providers
4. Desabilite a opção Confirm email.

Agora você pode criar contas sem precisar confirmar pelo e-mail.

Testando e fazendo ajustes

Todo sistema precisa de ajustes. É aqui que você vai refinar seu projeto.

1. Navegue por todas as páginas do sistema;
2. Clique em todos os botões;
3. Teste todas as funcionalidades;
4. Anote tudo que não funcionar ou que precise melhorar.

Exemplo de lista de ajustes:

• Botão "Nova Venda" não funciona
• Botão "Novo Produto" não funciona
• Botão "Novo Cliente" não funciona
• Card de vendas está desalinhado
• Gráfico não mostra dados reais

Você pode pedir vários ajustes de uma vez no chat na lateral esquerda da tela.

Por exemplo:

Vamos fazer alguns ajustes:

- O botão de nova venda não funciona

- O botão de novo produto não funciona

- O botão de novo cliente não funciona

Ou usar prints de tela para ser mais específico:

[Cole um print do problema]

Conforme o print, o card de vendas totais está desalinhado. O número está em uma linha e o símbolo R$ em outra. Por favor, ajuste para alinhar corretamente.

Populando o banco de dados com dados de teste

Para testar seu sistema adequadamente, você pode pedir para o Lovable criar dados fictícios com o seguinte prompt:

Quero que você crie uma base fictícia de produtos, vendas e clientes para que possamos testar o app. Portanto, adicione produtos, clientes e vendas no Supabase nas devidas tabelas.

Os produtos devem ser produtos eletrônicos como mouse, teclado, fones, microfones, caixas de som, etc.

O Lovable vai:

• Criar as tabelas necessárias no Supabase
• Pedir permissão para fazer as modificações;
• Inserir dados fictícios em cada tabela;
• Configurar relacionamentos entre tabelas.

Usando o modo chat para planejar melhor

O Lovable tem um recurso muito útil chamado "Modo Chat". Ele consome menos créditos e permite planejar antes de executar. Para usar esse modo:

1. Clique no ícone de chat na interface do Lovable
2. Descreva todos os problemas e ajustes necessários
3. Peça para a IA traçar um plano de implementação
4. Revise o plano;
5. Clique em Implementar plano;
6. Desabilite o modo Chat e envie o prompt.

Exemplo de uso:

Precisamos fazer ajustes no dashboard. Os gráficos não estão refletindo fielmente os dados que temos na base do Supabase.

A IA vai analisar tudo e criar um plano detalhado antes de começar a implementar. Isso garante melhores resultados e evita desperdício de créditos.

Publicando seu sistema

Quando seu sistema estiver pronto, é hora de colocá-lo no ar:

1. No Lovable, clique em Publish no canto superior direito;
2. Escolha as opções de publicação;
3. Clique em Continue;
4. Aguarde o processo de publicação;

Após a publicação, você receberá um link. Qualquer pessoa com esse link poderá acessar seu sistema!

Você pode:

• Enviar o link por email;
• Compartilhar em redes sociais;
• Incorporar em seu site;
• Usar para demonstrações de vendas.

Dicas importantes para o sucesso

As principais dicas para usar o Lovable em seu máximo potencial são:

1. Seja específico nos prompts: quanto mais detalhes você fornecer, melhor será o resultado. Em vez de "crie um botão", diga "crie um botão azul no canto superior direito para adicionar novos produtos";
2. Teste página por página: não tente ajustar tudo de uma vez. Foque em uma página, ajuste completamente, depois vá para a próxima;
3. Use o modo chat para economizar créditos: planeje os ajustes antes de executar. O modo chat consome menos créditos e produz melhores resultados;
4. Guarde sua senha do Supabase: você vai precisar dela se precisar acessar o banco de dados manualmente ou fazer configurações avançadas;
5. Faça backups regulares: publique versões do seu sistema regularmente. Assim você pode voltar para versões anteriores se algo der errado;
6. Aprenda com os erros: às vezes o Lovable comete erros ou entende mal uma instrução. Use o botão "Try to fix" quando isso acontecer, ou refaça o prompt com mais clareza.

Limitações do Lovable

O Lovable é uma excelente opção quando queremos criar protótipos rápidos, sistemas de gestão interna, MVPs (Produto Mínimo Viável) e dashboards e painéis administrativos. Contudo, esse sistema possui algumas limitações dentre elas:

• Sistemas muito específicos de indústrias reguladas;
• Aplicativos que precisam de performance extrema;
• Integrações muito complexas com sistemas legados;
• Customizações muito específicas.

Para esses casos, você pode começar no Lovable e depois migrar o código para desenvolvimento customizado.

Perguntas frequentes sobre Lovable e Supabase

Conclusão

Criar um sistema de gestão completo nunca foi tão acessível. Com a combinação de Lovable e Supabase, você pode construir aplicações profissionais sem precisar ser um programador experiente.

O segredo está em:

• Escrever prompts claros e detalhados;
• Testar constantemente;
• Fazer ajustes iterativos;
• Usar o modo chat para planejar;
• Ser paciente com o processo de aprendizado.

Se você gostou deste conteúdo e quer aprender mais sobre NoCode, automações e desenvolvimento sem programação, explore nosso curso de Inteligência Artificial.

Caso prefira esse conteúdo no formato de vídeo-aula, assista à playlist abaixo ou acesse o nosso canal do YouTube!

Curso de Lovable Completo para Iniciantes: Crie seu Projeto Completo em Apenas UMA AULA" aria-label="Reproduzir vídeo: Curso de Lovable Completo para Iniciantes: Crie seu Projeto Completo em Apenas UMA AULA">

O que você aprende neste vídeo

Resposta rápida: A aula constrói do zero, só por prompt, um sistema básico de gestão de vendas (login, dashboard, produtos, clientes e vendas) conectando o Lovable ao Supabase, e mostra o processo real: erros que aparecem, ajustes que pedem prompts mais específicos e um aviso de segurança que fica pendente ao publicar.

Neste vídeo (50 min):

• 1:35 - Mostra como acessar o Lovable pelo site lovable.dev, fazendo login com uma conta do Gmail, do Outlook ou do GitHub.
• 3:08 - Recomenda escrever um prompt detalhado, como um PRD: objetivo, detalhes do banco de dados, requisitos funcionais e de layout, montado antes com o ChatGPT.
• 4:25 - Aponta o botão nativo de Supabase dentro do Lovable: conecta as duas ferramentas sem escrever nenhuma linha de código.
• 13:04 - Usa o botão Publish para gerar um link que qualquer pessoa consegue abrir: o app já roda, mas os botões ainda não fazem nada, porque faltam o login e um lugar para guardar os dados.
• 15:35 - Cria o projeto no Supabase escolhendo o servidor mais perto do Brasil, South America, São Paulo.
• 19:20 - Sempre que o Lovable vai alterar alguma coisa dentro do banco de dados, ele para e pergunta se pode continuar (permitir ou negar), antes de agir.
• 22:12 - Desabilita a confirmação por e-mail no cadastro do Supabase, só para agilizar a criação de contas de teste.
• 26:49 - Tira um print de um card desalinhado com Windows + Shift + S e cola direto no chat, e o Lovable corrige o layout a partir da imagem.
• 31:18 - Pede vendas simuladas para o dashboard: o Lovable cria um botão que promete 20 vendas espalhadas pelos últimos 90 dias, e na primeira tentativa o botão dá erro.
• 35:25 - Muda para o modo chat: em vez de aplicar mudanças na hora, o Lovable primeiro discute e monta um plano de implementação, para você revisar antes de qualquer alteração.
• 45:55 - Reescreve o pedido dizendo que a coluna vai na tabela de vendas do Supabase (havia uma tabela de vendas em cada lugar), e o Lovable responde com um contraponto: uma venda pode ter vários produtos, então a coluna causaria problemas, e a mudança fica de fora.
• 47:05 - Ao publicar a versão final, a revisão de segurança avisa que o projeto está exposto a qualquer pessoa da internet, porque a aula não criou funções de administrador e de usuário.

Trechos do vídeo:

• Dá para pedir o projeto já conectado ao banco de dados logo no primeiro prompt, mas é mais fácil criar o projeto no Lovable primeiro e conectar o Supabase depois.
• Ajustar página por página (terminar o dashboard, depois vendas, depois produtos) deixa cada pedido mais específico do que ajustar o sistema inteiro de uma maneira geral.
• Quanto mais específico o prompt (dizendo exatamente qual tabela, qual tela, qual botão), menor a chance de a ferramenta de IA mexer no lugar errado.
• Nem todo erro precisa de você: às vezes o próprio Lovable percebe a falha e tenta corrigir sozinho; em outras aparece o botão Try to fix, e basta clicar nele.