Introducao ao Supabase - Construindo Backend com BaaS

O que voce vai aprender neste tutorial

✓ Criar projeto Supabase
✓ Operacoes de banco de dados
✓ Autenticacao
✓ Storage
✓ Funcionalidades em tempo real

Step 1: Criar Projeto

1. Criar conta em supabase.com
2. Clicar em New Project
3. Definir nome do projeto e senha
4. Selecionar regiao (Tokyo recomendado)

Step 2: Configuracao do Cliente

npm install @supabase/supabase-js

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

Step 3: Operacoes de Banco de Dados

// Buscar
const { data, error } = await supabase
  .from('posts')
  .select('*')
  .order('created_at', { ascending: false });

// Inserir
const { data, error } = await supabase
  .from('posts')
  .insert({ title: 'Hello', content: 'World' })
  .select();

// Atualizar
const { data, error } = await supabase
  .from('posts')
  .update({ title: 'Updated' })
  .eq('id', 1);

// Deletar
const { error } = await supabase
  .from('posts')
  .delete()
  .eq('id', 1);

Step 4: Autenticacao

// Cadastro
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
});

// Login
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
});

// OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
});

// Logout
await supabase.auth.signOut();

// Obter sessao
const { data: { session } } = await supabase.auth.getSession();

Step 5: Storage

// Upload
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`public/${userId}.png`, file);

// Obter URL de download
const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`public/${userId}.png`);

// Deletar
await supabase.storage
  .from('avatars')
  .remove([`public/${userId}.png`]);

Step 6: Tempo Real

// Monitorar alteracoes
const channel = supabase
  .channel('posts')
  .on('postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => {
      console.log('Change received:', payload);
    }
  )
  .subscribe();

// Cancelar inscricao
supabase.removeChannel(channel);

Step 7: Row Level Security

-- Criar politica (SQL Editor)
CREATE POLICY "Users can view own posts"
ON posts FOR SELECT
USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own posts"
ON posts FOR INSERT
WITH CHECK (auth.uid() = user_id);

Resumo

Supabase e uma alternativa open source ao Firebase, sendo um BaaS poderoso baseado em PostgreSQL. Ele permite gerenciar autenticacao, banco de dados e storage de forma integrada.