Tutorial Lengkap Supabase: Dari Membuat Proyek sampai Memakai MCP agar Agen AI Langsung Mengelola Basis Data Anda

Seorang engineer yang membuat side project di Bandung bercerita, ia memakai AI untuk membuat sebuah situs berlangganan dan tiga hari sudah naik produksi, merasa dirinya jenius. Hari kelima ia menemukan ada yang mengunduh seluruh tabel data penggunanya — bukan diretas, melainkan ia lupa menyalakan Row Level Security, dan anon key-nya tertulis di JavaScript front-end, tekan F12 langsung terlihat.

Tutorial ini akan mengajari Supabase dari awal, tetapi saya ingin menaruh hal ini paling depan: Supabase mudah dipelajari, dan juga mudah bikin masalah.

Apa Itu Supabase

Supabase adalah platform layanan back-end open source, sering disebut "alternatif Firebase". Ia memaketkan satu set back-end lengkap untuk Anda: basis data PostgreSQL, autentikasi identitas, penyimpanan berkas, langganan real-time, Edge Functions, serta REST dan GraphQL API yang dihasilkan otomatis.

Beda paling krusialnya dari Firebase adalah: lapisan dasarnya PostgreSQL sungguhan. Yang Anda tulis adalah SQL standar, ada foreign key, ada transaction, ada view dan trigger. Ini berarti dua hal — pertama, pengetahuan SQL yang sudah Anda punya sepenuhnya bisa dipakai; kedua, kalau suatu hari ingin pindah, tinggal dump basis data lalu lempar ke Postgres mana pun, tak akan terkunci.

Perubahan Supabase 2026 yang paling patut dicermati adalah integrasi AI. MCP server resmi membuat coding agent seperti Claude Code, Cursor, Codex, dan Gemini CLI bisa langsung mengoperasikan proyek Anda; ada pula integrasi ChatGPT, dan dokumen resmi menyebut sekitar 29 alat, mencakup menjalankan SQL, mengubah schema, membuka branch, men-deploy Edge Function, dan melihat log real-time.

Apa yang Bisa Dilakukannya

Back-end yang dibutuhkan aplikasi web atau mobile pada umumnya, hampir semuanya dipaketkan Supabase:

• Database: PostgreSQL, termasuk REST API yang dihasilkan otomatis
• Auth: email, kata sandi, magic link, OAuth Google/GitHub/Apple, dll.
• Storage: unggah berkas dan distribusi CDN, dengan hak akses terintegrasi ke kebijakan basis data
• Realtime: perubahan data langsung didorong ke front-end
• Edge Functions: fungsi serverless di lingkungan eksekusi Deno
• Vector: ekstensi pgvector, bisa langsung dipakai untuk pencarian vektor RAG

Poin terakhir sangat praktis bagi aplikasi AI — Anda tak perlu membeli basis data vektor terpisah demi RAG, karena Postgres plus pgvector sepenuhnya cukup untuk aplikasi berskala kecil-menengah.

Cara Pakai: Dari Membuat Proyek sampai Kueri Pertama

Langkah pertama: membuat proyek

Daftar di supabase.com, buat organization dan project. Ada tiga hal yang harus dipilih:

• Region: pilih yang paling dekat dengan pengguna. Pengguna di Indonesia disarankan memilih Singapore, karena memilih us-east akan menambah latensi seratus-dua ratus milidetik
• Database password: ini kata sandi super user basis data, simpan di pengelola kata sandi, ini bukan API key
• Paket: Free bisa dipakai untuk memulai

Pembuatan butuh satu-dua menit. Setelah selesai, di Project Settings > API bisa dilihat dua kunci:

• anon key: dirancang untuk publik, akan ditaruh di dalam kode front-end
• service_role key: sama sekali tak boleh ditaruh di front-end, ia melewati semua pemeriksaan hak akses

Perbedaan dua kunci ini adalah konsep terpenting seluruh tutorial ini.

Langkah kedua: membuat tabel data

Di Table Editor tekan New table. Ambil contoh daftar tugas sederhana:

• Nama tabel todos
• Kolom: id (int8, primary key, auto-increment, sudah ada secara bawaan), user_id (uuid), title (text), done (bool, bawaan false), created_at (timestamptz, bawaan now())

Kolom user_id ini sangat krusial — ia akan dicocokkan dengan ID pengguna yang login, untuk menentukan siapa yang bisa melihat baris mana. Saat membuat tabel ingat centang Enable Row Level Security, dan Supabase sekarang secara bawaan akan mengingatkan Anda.

Bisa juga langsung membuatnya dengan SQL Editor:

create table todos (
  id bigint primary key generated always as identity,
  user_id uuid references auth.users(id) not null,
  title text not null,
  done boolean default false,
  created_at timestamptz default now()
);
alter table todos enable row level security;

Langkah ketiga: mengatur kebijakan RLS (langkah ini tak boleh dilewati)

Setelah RLS dinyalakan, bawaannya adalah semuanya tidak diizinkan. Anda harus menulis eksplisit siapa yang boleh melakukan apa.

Ke Authentication > Policies, atau langsung pakai SQL:

-- hanya bisa membaca todo milik sendiri
create policy "read own todos" on todos
  for select using (auth.uid() = user_id);

-- hanya bisa menambah data yang user_id-nya milik sendiri
create policy "insert own todos" on todos
  for insert with check (auth.uid() = user_id);

-- hanya bisa mengubah milik sendiri
create policy "update own todos" on todos
  for update using (auth.uid() = user_id);

-- hanya bisa menghapus milik sendiri
create policy "delete own todos" on todos
  for delete using (auth.uid() = user_id);

auth.uid() adalah fungsi yang disediakan Supabase, mengembalikan ID pengguna yang sedang login. Empat kebijakan ini memastikan setiap orang hanya menyentuh datanya sendiri.

Setelah menulis wajib diuji. Login dengan dua akun berbeda, pastikan A benar-benar tak bisa melihat data B. Jangan percaya "saya sudah menulis kebijakan jadi seharusnya benar".

Langkah keempat: menyambung dari front-end

Pasang SDK:

npm install @supabase/supabase-js

Buat client dan lakukan kueri:

import { createClient } from '@supabase/supabase-js'

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

// kueri (RLS otomatis hanya mengembalikan data orang ini)
const { data, error } = await supabase
  .from('todos')
  .select('*')
  .order('created_at', { ascending: false })

// menambah
await supabase.from('todos').insert({ title: 'tulis tutorial', user_id: user.id })

Perhatikan di sini dipakai anon key, dan hak aksesnya sepenuhnya ditentukan RLS. Front-end tak bisa mengambil data yang tak boleh diambil, karena lapisan basis data sudah memblokirnya.

Langkah kelima: menambahkan login

// Daftar email + kata sandi
await supabase.auth.signUp({ email, password })

// Login
await supabase.auth.signInWithPassword({ email, password })

// Login Google
await supabase.auth.signInWithOAuth({ provider: 'google' })

Penyedia OAuth harus lebih dulu dinyalakan di Authentication > Providers dan diisi client ID serta secret platform tersebut. Pengaturan Google harus membuat kredensial OAuth di Google Cloud Console, dan ingat mengisi alamat callback yang diberikan Supabase.

Teknik Lanjutan

Pakai MCP agar agen AI mengelola basis data

Ini hal baru paling praktis pada 2026. Setelah memasang Supabase MCP server, Claude (dipadukan Tutorial Claude Code) dan Cursor bisa langsung mengueri basis data Anda, menghasilkan migration, dan men-deploy Edge Function, dan resmi memaketkan agent skills sekaligus, sehingga agen bekerja mengikuti praktik terbaik alih-alih mengubah sembarangan.

Beda yang benar-benar terasa adalah: dulu Anda harus mendeskripsikan ke AI "tabel data saya begini, punya kolom ini", sekarang ia melihatnya sendiri. Saat mengubah schema ia akan menghasilkan berkas migration alih-alih langsung menjalankan ALTER TABLE.

Tetapi tolong hanya sambungkan ke branch pengembangan atau preview. Membiarkan agen AI langsung terhubung ke basis data produksi, satu instruksi yang disalahpahami bisa menghapus sesuatu. Alur yang benar adalah agen mengubah di branch, dan hanya migration yang sudah Anda review yang di-merge ke lingkungan produksi.

Branching basis data

Branching Supabase membuat Anda bisa membuka branch basis data mandiri untuk menguji perubahan schema, dan hanya menggabungkannya ke lingkungan produksi setelah dipastikan tak bermasalah. Dari sisi penagihan tak ada biaya bulanan tetap; branch preview berjalan di Micro compute sekitar 0,01344 dolar AS per jam — sehari buka delapan jam sekitar 0,11 dolar, sangat murah.

Dipakai bersama MCP adalah pasangan sempurna: agen mengubah sesuka hati di branch, toh kalau rusak tinggal hapus dan buka ulang.

Edge Functions

Logika yang perlu dijalankan di back-end (memanggil API pihak ketiga, memproses webhook, menyembunyikan kunci rahasia) ditaruh di sini:

supabase functions new send-notification
supabase functions deploy send-notification

Lingkungan eksekusinya Deno, ditulis dengan TypeScript. Operasi yang perlu memakai service_role key (misalnya fungsi admin) ditaruh di sini, sama sekali jangan ditaruh di front-end.

pgvector untuk RAG

create extension if not exists vector;

create table documents (
  id bigserial primary key,
  content text,
  embedding vector(1536)
);

create index on documents using ivfflat (embedding vector_cosine_ops);

Setelah itu tinggal lakukan pencarian kemiripan dengan SQL. Aplikasi RAG skala kecil-menengah sudah cukup begini, tak perlu mengimpor Pinecone atau Qdrant secara terpisah.

Hal yang Perlu Diperhatikan

RLS adalah satu-satunya garis pertahanan Anda. Sekali lagi: anon key itu publik, terlihat di kode sumber front-end, dan itu memang desainnya. Hak akses sepenuhnya bergantung RLS. Sebelum naik produksi periksa satu per satu setiap tabel sudah menyalakan RLS dan kebijakannya benar. Panel Supabase akan menampilkan peringatan untuk tabel publik yang tak menyalakan RLS, jangan mengabaikannya.

service_role key sama sekali tak boleh masuk front-end. Ia melewati semua RLS. Hanya boleh ditaruh di Edge Functions, server back-end, atau variabel lingkungan CI. Periksa sekali sebelum commit ke git.

Paket gratis akan dijeda. Proyek yang menganggur beberapa waktu akan di-pause, harus dibangunkan manual. Produk yang punya pengguna nyata setidaknya pakai Pro (25 dolar AS per bulan).

Perhatikan item tambahan berbayar. PITR pemulihan titik waktu 100 dolar per 7 hari, domain kustom 10 dolar, MFA lanjutan proyek pertama 75 dolar. Harga satuan ini tak rendah, pastikan benar-benar dibutuhkan sebelum menyalakannya.

Lokasi data. Saat memilih region yang dipertimbangkan bukan hanya latensi. Kalau layanan Anda menyangkut data pribadi dan ada persyaratan lokasi data, pastikan region yang dipilih sesuai aturan. Indonesia saat ini belum punya region Supabase, dan yang terdekat adalah Singapore.

Komentar TheAI Academy

Kontribusi terbesar Supabase beberapa tahun ini adalah membuat "satu orang menyelesaikan seluruh produk" benar-benar bisa dilakukan. Dulu Anda harus paham back-end, harus membangun basis data, harus menangani login, sekarang semua itu tinggal pengaturan. Ditambah integrasi MCP 2026, agen AI langsung mengelola basis data, dan kecepatan pengembangan naik lagi satu tingkat.

Tetapi saya harus jujur soal sisi lain: ia membuat orang yang tak paham basis data pun bisa mendorong basis data naik produksi, dan justru di situlah risikonya. Engineer di Bandung itu bukan bodoh, ia hanya tak tahu key di front-end itu publik. Alat menurunkan ambang batas, tetapi akibat kebocoran data tak ikut turun.

Saran saya sederhana: Anda boleh memakai AI menulis 90% kode, tetapi bagian kebijakan RLS itu tolong Anda pahami sendiri dan uji sendiri. Ini jenis hal yang "kalau salah tak ada kesempatan kedua".

Komentar: Supabase adalah pilihan back-end terkuat bagi pengembang perorangan saat ini, tetapi tolong jadikan "memeriksa RLS" sebagai item pertama daftar cek naik produksi, bukan yang terakhir.

Saran konkret untuk pembaca Indonesia: buat dulu proyek kecil dengan login memakai paket gratis, sengaja uji isolasi data dengan dua akun, dan lihat sendiri RLS berfungsi sebelum melangkah lebih jauh. Kalau ingin menyambung agen AI, buka dulu satu branch untuk berlatih, pastikan alurnya lancar baru pertimbangkan menyentuh lingkungan produksi. Konsep keamanan terkait bisa dipadukan dengan Daftar cek keamanan aplikasi LLM.

Sumber

• Dokumen resmi Supabase: MCP Server
• Supabase Changelog: Developer Update, June 2026

Dirangkum dari informasi publik, fitur dan harga mengacu pada dokumen resmi.