Supabase: construção de backends robustos com IA

Fundamentos do Supabase - Apresentação

Apresentando o curso e o contexto do Supabase

Boas-vindas a um novo curso da Alura. Neste curso, vamos estudar o Supabase. Trata-se de um back-end como serviço que utilizaremos para percorrer suas principais funcionalidades, de modo que seja possível implementar um MVP (produto mínimo viável), uma prova de conceito ou um sistema utilizando essa ferramenta, que já é muito comum hoje em dia, especialmente para quem começou com o movimento conhecido como Vibe Coding e com assistentes de código, como Claude, Gemini e Codex.

Talvez estejamos em um momento em que a ferramenta realiza muito por nós e conseguimos solicitar diversas tarefas, mas sentimos falta de conhecer melhor o Supabase, nosso back-end: quais são as possibilidades, como organizar o sistema para que funcione melhor e como formular solicitações de maneira mais eficiente ao nosso assistente de código.

Detalhando o uso do Supabase e o foco em banco de dados

Se viemos do Vibe Coding, já temos um sistema ou queremos colocá-lo on-line e precisamos de um back-end, utilizaremos o Supabase como back-end como serviço e revisaremos as áreas de banco de dados, autenticação, Storage (armazenamento) e funções, entendendo para que serve cada uma dessas funcionalidades e como devemos pensar nelas.

Primeiro, vamos dedicar bastante tempo à parte de banco de dados, entendendo como modelar, planejar e normalizar, além de por que isso é importante. Depois, veremos outras funcionalidades ao longo do curso. O banco de dados é um dos principais componentes que vamos utilizar, pois toda aplicação tem dados que precisam ser armazenados de forma adequada para evitar duplicação, facilitar a manutenção e melhorar o desempenho do sistema.

Planejando o projeto e integrando ferramentas

Vamos ver tudo isso e, ao final, construiremos uma aplicação de uma agência de aluguel. Vamos criar essa agência de aluguel e integrá-la com o nosso front-end (camada de interface) e com um Back-end as a Service (back-end como serviço), tendo como foco, principalmente, o Supabase.

Se quisermos acompanhar o projeto, podemos usar qualquer assistente pessoal. Neste curso, nós vamos utilizar o Claude, mas não é necessário usar especificamente o Claude. Qualquer ferramenta que se conecte ao seu MCP (Protocolo de Contexto de Modelo) pode ser utilizada.

Vamos em frente e estudar o Supabase.

Fundamentos do Supabase - Conhecendo o Supabase

Apresentando o supabase e os objetivos do curso

Vamos começar nosso curso de Supabase, entendendo o que é essa ferramenta, para que serve e como vamos utilizá-la.

Aqui já temos o Supabase aberto. Você pode criar sua conta; é um serviço que, em princípio, é gratuito. Não é 100% gratuito, pois possui planos pagos, mas é possível optar por um plano gratuito e realizar bastante com ele. Vamos utilizar o plano gratuito aqui. Nós já estamos nele e estamos no painel que permite criar projetos.

Criando a organização e escolhendo o plano

Ao criar sua primeira conta, o sistema solicitará que criemos uma organização. Nós vamos seguir esse processo de criação de uma organização para manter a boa prática de separar nossos projetos em organizações distintas. Assim, você não terá todos os projetos do Supabase em um único lugar; eles ficarão separados por contexto para manter tudo organizado.

Para criar nossa organização, vamos utilizar o nome Hermes X, que é nossa agência de aluguel e o projeto com o qual trabalharemos ao longo deste curso. Já temos um projeto apenas de front-end (camada de interface), sem nenhuma funcionalidade de Supabase implementada, mas com algumas páginas criadas: é possível ver a reserva, ver a descrição do carro, acessar o formulário para confirmar a reserva e ir até a área de conta para fazer login e registrar-se. Vamos trabalhar com esse projeto Hermes X.

Vamos criar nossa organização no Supabase com esse nome. Em seguida, selecionamos o tipo de organização. As opções incluem Pessoal, Empresa educacional, Startup, Agência e Nenhum dos anteriores. Essa seleção serve para fornecer informações ao Supabase.

Quanto aos planos, utilizaremos o plano gratuito. Não usaremos nenhum plano pago, embora existam opções pagas, como PRO e Team. O plano gratuito permite fazer bastante coisa, sendo adequado para explorar projetos, iniciar uma prova de conceito ou um projeto pequeno para avaliar sua validade e viabilidade. Com a organização criada, teremos os projetos; dentro de cada organização, podemos manter vários projetos separados.

Conceituando o supabase e retomando a criação do projeto

Ao chegar na página de criação de projetos, apareceu a mensagem de que era necessário um permissão especial para criar o projeto. Por algum motivo, embora tenhamos criado a organização, não foi possível criar o projeto naquele momento — possivelmente ocorreu um erro no caminho. A plataforma informa que o projeto terá uma instância dedicada de Postgres (banco de dados) e uma API (interface de programação de aplicações) para configurar a base de dados com facilidade. Vamos voltar à seção de projetos e, a partir daqui, começar a discutir o que é o Supabase.

Podemos encarar o Supabase como um Backend as a Service (parte do servidor como serviço). Em vez de, ao montar um sistema e desenvolver uma aplicação, precisarmos configurar uma instância de servidor na nuvem, manter um código de servidor em funcionamento, ter um banco de dados online e organizar arquivos em serviços separados (como AWS, Google Cloud e Azure, da Microsoft), temos uma ferramenta que fornece tudo isso de forma integrada.

Criando o projeto e configurando credenciais, região e segurança

Ao clicar novamente em “Criar novo projeto”, a criação foi aberta corretamente. Vamos escolher a organização e definir o nome do projeto. Neste caso, ele será a nossa API principal, isto é, a API de produto, com a qual vamos interagir, e com a qual nosso front-end também interagirá via Supabase.

Definimos a senha do banco de dados. Podemos usar uma senha já configurada, aceitar a sugestão do LastPass ou gerar automaticamente. Boa prática: copiar essa senha e guardá-la em um editor de texto (por exemplo, no VS Code) para manter o registro separado e garantir acesso posterior.

Sobre a região, é recomendável selecionar uma região próxima, pois quanto maior a distância, maior a latência e o tempo de resposta. No Brasil, “Américas” costuma ser uma boa opção; há também a região de São Paulo, que pode funcionar bem. Há regiões gerais como “Américas”, nas quais a plataforma distribui recursos por vários data centers (centros de dados).

Na parte de segurança, teremos a Data API (API de dados), que é o ponto com o qual vamos interagir principalmente. A plataforma pode expor automaticamente novas tabelas, o que é uma conveniência útil. Outra boa prática é manter o RLS — Row Level Security (segurança por linha) — ativado, recurso que impõe políticas de segurança para cada linha da base de dados; veremos como isso funciona adiante. Com isso, criamos o projeto.

Explorando as facilidades e focando no table editor

Após a criação, o Supabase disponibiliza seus serviços. Como dissemos, trata-se de um backend (parte do servidor) como serviço: teremos uma API para interação (sem necessidade de criar uma API manualmente), um banco de dados já provisionado, autenticação pré-configurada, entre outras facilidades. Em muitos cenários, isso elimina a necessidade de uma equipe de back-end desenvolvendo um servidor personalizado. Há ressalvas: é um produto de uso geral, portanto a API é genérica e atende à maioria dos casos, mas pode haver situações específicas em que não se encaixa perfeitamente. De modo geral, a maioria dos casos — especialmente os de organização de informações e dados — é bem atendida.

Neste curso, vamos organizar e utilizar bastante a área de tabelas, com ênfase no Table Editor (editor de tabelas), que é onde interagiremos com o nosso backend (parte do servidor) como serviço para definir a estrutura da base de dados. Praticamente toda aplicação na internet precisa de um banco de dados para armazenar informações de produto, usuário, serviços, valores e transações. A parte de base de dados é fundamental e, embora existam vários outros recursos ao redor, a principal vantagem aqui é a facilidade de ter um banco de dados em operação online, mantido automaticamente pelo próprio serviço do Supabase.

Comparando abordagens e apresentando os serviços disponíveis

A grande vantagem é não precisarmos: criar instâncias na AWS, Azure ou Google Cloud; fazer o deploy de um servidor de backend (parte do servidor); subir código de backend; levantar uma instância de banco de dados; modelar esse banco nesses provedores; e conectar tudo. O Supabase entrega esses componentes prontos. O ponto mais personalizado — embora não seja o único — costuma ser a base de dados, com a qual vamos trabalhar intensamente ao longo do curso. Ainda assim, como é um Backend as a Service (parte do servidor como serviço), a base de dados não é o único recurso oferecido, apenas o principal, que usaremos prioritariamente.

Durante o provisionamento, a plataforma levanta as instâncias, o que pode levar algum tempo. Inicialmente, o status pode aparecer como “unhealthy” (unhealthy — instável). Já é possível ver a lista de serviços disponíveis, como Edge Functions (funções de borda), Storage (armazenamento), Realtime (tempo real), Authentication (autenticação), Postgres (banco de dados) e Database (banco de dados), entre outros. Neste curso, utilizaremos principalmente o serviço de banco de dados e veremos um pouco de autenticação. O foco será estruturar as bases de dados para modelar nosso produto — a agência de aluguel —, registrar as informações e deixar tudo online, sendo consumido diretamente a partir do banco de dados.

Fundamentos do Supabase - Nossa primeira tabela

Contextualizando o ambiente e foco no banco de dados

A instância terminou de subir e já está conectada, como indicado na parte superior. Já temos o projeto da API principal, e também é disponibilizado um link para conexão com essa API, caso desejemos utilizá-la. Neste momento, porém, vamos trabalhar principalmente com a parte de banco de dados.

Ao acessar a base de dados geral, são exibidas todas as opções relacionadas ao banco, incluindo o Database Management (gerenciamento de banco de dados), que utilizaremos bastante. No entanto, agora vamos usar o Table Editor (editor de tabelas), pois, como já temos uma base de dados, precisamos guardar informações ali para depois consumi-las, ou pelo menos registrar algumas informações para o nosso "asignador". Esse "asignador", neste momento, é uma aplicação de front-end (camada de interface) que está com valores hardcoded (definidos diretamente no código). Ou seja, todas as informações são inseridas manualmente no código; nada é lido de outra fonte.

Apresentando o array de veículos hardcoded

Embora a ideia deste curso não seja mostrar o código nem ficar analisando-o, por curiosidade, ao observarmos a parte de Home, na seção de veículos, encontramos um array que define os veículos, com título, subtítulo, preço, imagem e categoria. Essa informação foi copiada e colada dentro do código, portanto é sempre esse conjunto que a aplicação carrega e exibe.

Para ilustrar exatamente como esses dados estão hoje no front-end — todos hardcoded — segue o array utilizado na seção de veículos:

const VEHICLES: Vehicle[] = [
  {
    id: '1',
    title: 'Hyundai HB20 1.0',
    subtitle: 'Hatch Manual',
    pricePerDay: 120,
    imageUrl: imgHb20,
    category: 'hatch',
  },
  {
    id: '2',
    title: 'Honda City',
    subtitle: 'Hatch Automático',
    pricePerDay: 130,
    imageUrl: imgHondaCity,
    category: 'hatch',
  },
  {
    id: '3',
    title: 'Jeep Renegade 1.3',
    subtitle: 'SUV Automático',
    pricePerDay: 140,
    imageUrl: imgRenegade,
    category: 'suv',
  },
  {
    id: '4',
    title: 'Fiat Cronos',
    subtitle: 'Sedan Manual',
    pricePerDay: 130,
    imageUrl: imgCronos,
    category: 'sedan',
  },
  {
    id: '5',
    title: 'Onix LTZ 1.0',
    subtitle: 'Hatch Automático',
    pricePerDay: 130,
    imageUrl: imgOnix,
    category: 'hatch',
  },
  {
    id: '6',
    title: 'GM Spin 1.8',
    subtitle: 'Minivan Automática 7 lugares',
    pricePerDay: 320,
    imageUrl: imgSpin,
    category: 'minivan',
  },
  {
    id: '7',
    title: 'VW T-Cross 1.0 Turbo',
    subtitle: 'SUV Automático',
    pricePerDay: 150,
    imageUrl: imgTcross,
    category: 'suv',
  },
  {
    id: '8',
    title: 'Honda City Sedan AT',
    subtitle: 'Intermediário Automático',
    pricePerDay: 150,
    imageUrl: imgHondaCitySedan,
    category: 'sedan',
  },
  {
    id: '9',
    title: 'Fiat Mobi 1.0',
    subtitle: 'Compacto com ar',
    pricePerDay: 100,
    imageUrl: imgMobi,
    category: 'hatch',
  },
]

Esse array evidencia por que a aplicação mostra sempre os mesmos dados: tudo está fixo no código. Nosso próximo passo será migrar essas informações para o banco de dados da Supabase para que a interface passe a carregar dados dinamicamente.

Definindo o objetivo e preparando a modelagem relacional

Nosso objetivo é transferir essas informações para a base de dados no serviço da Supabase, para que a aplicação carregue dados de forma dinâmica. A grande vantagem é que, ao carregar a informação a partir do banco, a página também se atualiza. Se alterarmos o banco de dados, a página muda junto, tornando-se dinâmica.

Para isso, vamos criar uma tabela, pois toda informação armazenada aqui no banco de dados é salva dentro de uma tabela. A base de dados utilizada pela Supabase é o PostgreSQL, que é um tipo de banco de dados relacional. Nesse modelo, temos opções como MySQL, SQL Server, PostgreSQL e MariaDB, entre outras. No modelo relacional, a entidade básica onde guardamos a informação é a tabela. Podemos pensar nela como uma grande planilha do Excel, em que cada tabela corresponde a uma aba da planilha.

Criando a tabela de veículos e considerando segurança por linha

Vamos criar nossa primeira tabela, referente aos carros (veículos), já que temos uma lista de veículos disponíveis para carregar. Vamos criar a tabela de veículos. Observamos que não colocamos acentos no nome da tabela, pois, ao trabalhar com bancos de dados e essas ferramentas, acentos costumam causar problemas em nomes de tabelas e colunas. É um padrão comum evitar acentuação em identificadores. Podemos adicionar uma descrição explicando o significado da tabela, como “Tabela principal para a organização dos veículos”. Na descrição, podemos usar acentos normalmente, pois é apenas um texto informativo e não serve como referência técnica.

O projeto já está com RLS ativo, indicado por RLS, que significa Row Level Security (segurança em nível de linha). Vamos configurar as políticas relacionadas a isso mais adiante.

Definindo colunas e restrições da tabela

A seguir, definimos as colunas. Cada coluna representa um tipo de informação a ser armazenada. Toda tabela de um banco relacional deve ter um id. O tipo desse id pode ser INT8 ou, preferencialmente, UUID. Anteriormente existia um tipo de dado específico para id, que possivelmente foi removido, mas o UUID é o mais recomendado por ser um identificador gerado aleatoriamente, com baixíssima probabilidade de repetição.

Por padrão, podemos ter um campo que registra quando o registro foi criado. Assim, sempre que adicionarmos uma linha na base de dados, essa coluna será preenchida com o valor do momento atual, utilizando a função now() para capturar a data e a hora no instante da criação do registro.

Podemos então adicionar novas colunas conforme necessário. Queremos armazenar o nome do veículo e, por exemplo, o modelo e a marca. Vamos adicionar a coluna modelo, e o tipo dessa coluna será texto.

Aqui temos o texto como Text ou o texto como Varchar. A diferença entre Text e Varchar é o tamanho do conteúdo que podemos armazenar. Como estamos tratando textos pequenos, como o nome do modelo e a marca, Varchar é suficiente e podemos manter assim. Também temos o valor padrão, o valor pré-definido que será utilizado quando alguém tentar adicionar uma linha nesta tabela. Podemos deixar como nulo, o que significa que não tem nenhum valor. Porém, podemos ir às configurações e, nas opções, definir que esse campo, essa coluna que estamos criando, não pode ser nula; sempre deve ter um valor. Nesse caso, para o campo de modelo do nosso veículo, ele sempre terá que ter um valor. Não podemos ter um veículo registrado sem um modelo. Vamos deixar desmarcada a opção de aceitação de nulo (campo não nulo), ou seja, precisa ser um modelo válido.

Vamos adicionar outra coluna, que é a marca. A marca também será do tipo Varchar e também será marcada como não nula. Isso significa que deve haver alguma informação registrada ali. Basicamente, na parte de colunas é onde vamos colocar todas as informações necessárias para essa tabela, para os dados que queremos guardar no banco de dados. Vamos fazer isso e salvar; o restante não precisa nos preocupar por agora, organizaremos depois.

Acelerando com assistentes de inteligência artificial e editando na interface de tabelas

Agora está sendo criada a nossa tabela Veículos. Enquanto a criação acontece, sabemos que hoje em dia é raro precisarmos fazer tudo isso manualmente, campo por campo, como estamos fazendo. Para facilitar e avançar mais rápido, podemos utilizar um assistente de IA. Estamos aqui com o Claude, mas não precisa necessariamente ser o Claude. Pode ser o Codex, o Gemini, o Lovable, o Bolt, ou qualquer sistema que consiga se conectar ao MCP da Supabase (Model Context Protocol, protocolo de contexto de modelo). No caso do Claude, em Personalização, Conectores, ao buscar e navegar pelos conectores, encontramos o da Supabase. Qualquer ferramenta que se conecte ao MCP da Supabase é suficiente para vincular e operar via assistente. Vamos deixar vinculando aqui; será aberta uma aba para concluir a vinculação.

Mostramos como criar uma tabela manualmente porque pode ocorrer um erro, ou podemos querer editar algo que a IA fez. É nesse local da interface que faremos essas alterações. Com a tabela criada, no Table Editor (Editor de Tabelas), podemos criar uma nova tabela clicando no '+', o que abre o formulário de criação. Se já tivermos uma tabela de veículos e quisermos editar um campo, podemos editar uma tabela existente, adicionando novos campos ou alterando o que a IA fez por nós. É importante saber onde estão as funcionalidades na ferramenta da Supabase para não depender apenas da ferramenta de IA.

No painel lateral, acessamos o Table Editor (Editor de Tabelas) e visualizamos as tabelas. Já temos a tabela definida: nosso primeiro ID foi criado, há o campo de data de criação, o modelo e a marca. Podemos inserir uma nova linha e os campos serão exibidos. Por padrão, nosso id será gerado automaticamente. Por padrão, nosso createdAt (data de criação) será a data de hoje. No campo de modelo, podemos inserir HB20, e na marca, Hyundai. Ao salvar esse registro, já teremos um registro no banco de dados, que poderá ser consumido pela nossa aplicação. O id que configuramos, do tipo UUID, é aquele valor estranho, grande, difícil de repetir. A importância de um id ser único é justamente identificar uma linha específica do banco de dados. Por isso, normalmente usamos esses identificadores “gigantes”.

Concluindo a autorização do assistente e próximos passos

Agora que temos a tabela e o registro, vamos concluir a conexão e a autorização do Claude para acessar a organização Airman que acabamos de criar. É importante configurar a qual organização o assistente terá acesso. Vamos autorizar; o Claude estará configurado e poderemos solicitar que ele crie tabelas e continuar conversando com ele. A partir de agora, vamos interagir com o assistente e entender mais, destacando os pontos importantes a considerar ao usarmos nosso MCP da Supabase criado aqui.

Reforçando: não precisa ser o Claude; pode ser qualquer outra ferramenta que se conecte ao MCP da Supabase. O assistente fará por nós a conexão com o banco de dados, com nosso Backend as a Service (back-end como serviço).

Sobre o curso Supabase: construção de backends robustos com IA

O curso Supabase: construção de backends robustos com IA possui 70 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Fundamentos do Supabase
• Modelagem de dados com IA
• Políticas e segurança
• Autenticação, funções e armazenamento
• Edge Functions e integração da aplicação