O Que e um Banco de Dados
Um banco de dados e um lugar organizado para guardar informacoes que seu aplicativo precisa lembrar. Quando alguem se cadastra no seu site, esse cadastro tem que ser salvo em algum lugar para ainda existir amanha. Esse lugar e o banco de dados. Ele guarda tudo em tabelas, parecidas com planilhas, e responde rapido quando voce pede uma informacao.
🧠 Analogia: Uma Planilha Turbinada
Imagine uma planilha do Excel: linhas, colunas, cada celula com uma informacao. Um banco de dados e essa planilha, so que turbinada. As diferencas:
- •Ela vive na nuvem, nao no seu computador. Esta sempre online.
- •Varios aplicativos consultam a mesma planilha ao mesmo tempo, sem brigar.
- •Ela aguenta milhoes de linhas e ainda responde em milissegundos.
- •Voce pede o que quer com uma "pergunta" (uma consulta) e ela devolve so o que importa.
💡 O que e o Supabase
O Supabase e um servico gratuito que entrega um banco de dados pronto para usar, sem voce precisar instalar nada. Por dentro, ele usa o PostgreSQL, um dos bancos mais respeitados do mundo. Mas voce nao precisa saber disso para comecar: o Supabase coloca uma interface visual bonita por cima, parecida com uma planilha, e ainda cria automaticamente uma API para o seu site falar com o banco. E o jeito mais rapido de um iniciante ter um banco de verdade no ar.
Criando Seu Projeto no Supabase
Antes de criar tabelas, voce precisa de um projeto no Supabase. Pense no projeto como a "caixa" que vai guardar tudo: o banco, os arquivos, a autenticacao. Tudo de um aplicativo fica dentro de um projeto. Vamos criar o seu passo a passo.
Crie sua conta
Acesse supabase.com e clique em "Start your project". O mais simples e entrar com sua conta do GitHub (a mesma que voce ja criou na Trilha 1). Um clique e voce esta dentro.
Crie uma organizacao
Na primeira vez, o Supabase pede o nome de uma organizacao. E so um agrupamento de projetos (ex.: "meus-estudos"). Escolha o plano Free: e gratis e suficiente para aprender e ate para projetos pequenos no ar.
Configure o projeto
Agora os dados do projeto. Tres campos importam:
- •Name: o nome do projeto, ex.:
meu-primeiro-app - •Database Password: uma senha forte para o banco. Salve essa senha, voce vai precisar dela depois.
- •Region: escolha a regiao mais perto de voce (ex.:
South America (Sao Paulo)) para o banco responder mais rapido.
Espere o banco "acordar"
Clique em "Create new project". O Supabase leva cerca de 1 a 2 minutos montando seu banco na nuvem. Quando terminar, voce cai no painel do projeto. Pronto: voce ja tem um banco de dados de verdade rodando.
👁 O que voce vai ver na tela
Ao abrir o painel do projeto, repare na barra lateral esquerda. E ali que voce vai trabalhar o curso inteiro:
- 📊Table Editor: sua "planilha" para criar e ver tabelas.
- 💻SQL Editor: onde voce escreve comandos para o banco.
- 🔑Authentication: cadastro e login de usuarios.
- ⚙️Settings > API: as chaves para o seu site se conectar.
⚠️ Erro Comum
Problema: "Perdi a senha do banco (Database Password) e agora nao sei conectar."
Solucao: Para a maioria das coisas no curso voce vai usar as chaves de API, nao essa senha. Mas se precisar dela e tiver perdido, va em Settings > Database e clique em "Reset database password" para gerar uma nova. Da proxima vez, salve a senha num gerenciador de senhas assim que criar o projeto.
Tabelas, Colunas e Tipos
Dentro do banco, os dados moram em tabelas. Cada tabela guarda um tipo de coisa: uma tabela usuarios, outra tarefas, outra mensagens. As colunas sao as informacoes de cada item, e cada coluna tem um tipo que diz que conteudo ela aceita.
🧠 Analogia: Tabela = Folha, Linha = Ficha, Coluna = Campo
Pense num fichario. A tabela e uma gaveta ("Usuarios"). Cada linha e uma ficha de uma pessoa. Cada coluna e um campo da ficha: "Nome", "Email", "Data de cadastro". O tipo e a regra do campo: "Idade" so aceita numero, "Cadastrado?" so aceita sim ou nao.
Os tipos que voce mais vai usar
text
Texto: nomes, emails, mensagens, qualquer palavra ou frase.
int (int8)
Numero inteiro: idade, quantidade, pontuacao.
bool
Verdadeiro ou falso: "ativo?", "concluido?". So aceita true/false.
timestamp
Data e hora: quando algo foi criado ou atualizado.
🔑 A chave primaria (Primary Key)
Toda tabela tem uma coluna especial, geralmente chamada id, que e a chave primaria. Ela e o numero de identidade de cada linha: nunca se repete e nunca fica vazia. E assim que o banco sabe que a linha "Ana com id 1" e diferente de outra "Ana com id 7". No Supabase, ao criar uma tabela, a coluna id ja vem pronta como chave primaria que se preenche sozinha.
Exemplo: a tabela tarefas
# Colunas e tipos
id int8 (chave primaria)
titulo text "Comprar pao"
concluida bool false
criada_em timestamp 2026-06-17 10:00
No Table Editor, voce monta isso clicando em "New table", dando o nome tarefas e adicionando cada coluna com seu tipo.
✓ O que FAZER
- ✓Nomes de tabela no plural e minusculo:
usuarios - ✓Escolher o tipo certo (numero em
int, texto emtext) - ✓Deixar a coluna
idcomo chave primaria automatica
✗ O que NAO fazer
- ✗Guardar numero em coluna
textse for fazer contas - ✗Usar acentos ou espacos no nome das colunas
- ✗Criar uma tabela gigante para tudo (separe por assunto)
Inserir e Consultar Dados
Tabela criada, agora vem a parte divertida: colocar dados dentro e pedir esses dados de volta. Voce pode fazer isso de dois jeitos no Supabase: clicando na interface (o Table Editor) ou escrevendo comandos SQL. Vamos ver os dois, comecando pelo mais facil.
👁 Pela interface: Table Editor
No Table Editor, e igual a editar uma planilha:
- •Clique na sua tabela
tarefasna lista da esquerda. - •Clique em "Insert" > "Insert row" para adicionar uma linha nova.
- •Preencha os campos (deixe o
idem branco, ele se preenche) e salve. - •A linha aparece na hora na tabela. Pronto, voce inseriu um dado.
Pelo SQL: insert (inserir dados)
No SQL Editor, voce escreve um comando para inserir. Le-se quase como ingles: "insira na tabela tarefas, nas colunas titulo e concluida, os valores...".
insert into tarefas (titulo, concluida)
values ('Comprar pao', false);
# O que o banco responde:
Success. 1 row inserted
Pelo SQL: select (consultar dados)
O select e como voce pergunta: "me mostra os dados". O * significa "todas as colunas".
# Pegar tudo da tabela
select * from tarefas;
# O que o banco devolve:
id | titulo | concluida
1 | Comprar pao | false
# So as tarefas ainda nao concluidas
select titulo from tarefas where concluida = false;
titulo
Comprar pao
💡 Dica: O where e seu filtro
Quase sempre voce nao quer TODOS os dados, so alguns. A palavra where e o filtro: where concluida = false traz so as nao concluidas. Sem where, vem tudo. Comece sempre testando com select antes de mexer pra valer nos dados.
⚠️ Erro Comum
Problema: "Escrevi o texto sem aspas e deu erro de sintaxe."
Solucao: No SQL, todo valor de texto (text) vai entre aspas simples: 'Comprar pao', nao Comprar pao. Numeros (int) e booleanos (true/false) vao sem aspas. E nao esqueca o ; no fim do comando.
A API Automatica do Supabase
Aqui vem a magica. Assim que voce cria uma tabela, o Supabase cria sozinho uma API para o seu site falar com o banco. Voce nao precisa programar servidor nenhum. Seu site no Vercel chama essa API e recebe os dados de volta. E como se o banco ganhasse um "telefone" para o seu app ligar.
🧠 Analogia: O banco ganhou um garcom
Imagine o banco de dados como a cozinha de um restaurante. Seu site nao entra na cozinha (seria perigoso). Em vez disso, ele fala com um garcom: a API. O site faz o pedido ("me traz as tarefas"), o garcom vai a cozinha, pega e volta com o prato. A API e esse garcom: organizada, segura e sempre disponivel.
🔑 Onde estao a URL e a chave (anon key)
Para o seu site se conectar, ele precisa de duas coisas, que ficam em Settings > API:
- •Project URL: o endereco do seu banco, algo como
https://abc123.supabase.co - •anon key: a chave publica, que o site usa no navegador. Pode aparecer no seu codigo do front-end.
A anon key e segura de expor porque sozinha ela so consegue o que voce permitir (e o tema do proximo topico). Ja a outra chave, a service_role, e secreta: nunca coloque no front-end.
Usando o cliente JS do Supabase
O jeito mais comum num site e usar a biblioteca supabase-js. Voce conecta uma vez com a URL e a anon key, depois pede os dados em uma linha:
// 1. conectar ao seu banco
const supabase = createClient(
'https://abc123.supabase.co',
'sua-anon-key-aqui'
)
// 2. pedir os dados (mesmo que: select * from tarefas)
const { data, error } = await supabase
.from('tarefas')
.select('*')
// 3. o que volta em "data":
[ { id: 1, titulo: 'Comprar pao', concluida: false } ]
💡 Tambem da pra usar via REST puro
Se voce nao usar a biblioteca, a mesma API responde por REST (HTTP). Uma chamada GET para /rest/v1/tarefas com a anon key no cabecalho devolve o mesmo JSON. Voce vai aprofundar isso no modulo 2.3, sobre APIs. Por enquanto, basta saber: tabela criada = API pronta, de graca.
Autenticacao Basica e RLS
Quase todo aplicativo precisa de login: um usuario cria conta, entra com email e senha, e ve so o que e dele. O Supabase ja traz isso pronto na secao Authentication. Voce nao precisa guardar senhas (o Supabase faz isso com seguranca), nem montar telas de cadastro do zero no servidor.
Cadastrar e entrar (sign up / sign in)
Com o cliente JS, criar conta e fazer login sao duas chamadas simples:
// criar uma conta nova (sign up)
await supabase.auth.signUp({
email: 'ana@email.com',
password: 'senha-secreta'
})
// entrar com conta existente (sign in)
await supabase.auth.signInWithPassword({
email: 'ana@email.com',
password: 'senha-secreta'
})
// resposta do sign in: um usuario logado
{ user: { id: 'uuid...', email: 'ana@email.com' } }
O usuario cadastrado aparece na lista em Authentication > Users no painel.
🔒 RLS em uma frase
RLS (Row Level Security, "seguranca por linha") e a regra que decide quem pode ver e mexer em cada linha da tabela. Sem RLS, ou tudo fica trancado, ou qualquer um com a anon key le tudo. Com RLS ligado, voce escreve uma regra do tipo "cada usuario so ve as proprias tarefas". E o cadeado que faz a anon key ser segura no navegador.
✓ O que FAZER
- ✓Ligar o RLS em toda tabela com dados de usuario
- ✓Usar a
anon keyno front-end (e a publica) - ✓Deixar o Supabase guardar as senhas por voce
✗ O que NAO fazer
- ✗Expor a chave
service_roleno site - ✗Deixar tabela com dados sensiveis sem RLS
- ✗Guardar senha em texto numa coluna sua
⚠️ Erro Comum
Problema: "Liguei o RLS e agora minha consulta volta vazia, mesmo tendo dados."
Solucao: Quando voce liga o RLS, por padrao tudo fica bloqueado ate voce criar uma policy (regra) que libere. Va em Authentication > Policies e crie uma regra de leitura. Para testar enquanto aprende, da pra criar uma policy simples de "permitir leitura para usuarios logados".
📚 Resumo do Modulo
Proximo Modulo:
2.3 - APIs: Como Sistemas Conversam (entender requisicoes, JSON e consumir dados de fora)