Tutorial Lengkap Supabase: Daripada Membina Projek hingga Guna MCP Membolehkan Ejen AI Mengurus Pangkalan Data Anda Terus

Seorang jurutera yang membuat side project di Cyberjaya memberitahu saya, dia menjana sebuah laman langganan menggunakan AI dan melancarkannya dalam tiga hari, lalu merasakan dirinya seorang genius. Pada hari kelima dia mendapati ada orang memuat turun keseluruhan jadual data penggunanya — bukan digodam, tetapi dia terlupa membuka Row Level Security, dan anon key pula tertulis dalam JavaScript di bahagian hadapan, tekan F12 sudah nampak.

Tutorial ini akan mengajar cara menggunakan Supabase dari mula, tetapi saya mahu meletakkan perkara ini di paling depan dahulu: Supabase mudah dikuasai, dan juga mudah menimbulkan masalah.

Apa Itu Supabase

Supabase ialah platform perkhidmatan back-end sumber terbuka, sering dipanggil 'alternatif Firebase'. Ia membungkus satu set back-end yang lengkap untuk anda: pangkalan data PostgreSQL, pengesahan identiti, penyimpanan fail, langganan masa nyata, Edge Functions, serta API REST dan GraphQL yang dijana automatik.

Perbezaan paling kunci dengannya dan Firebase ialah: lapisan bawahnya ialah PostgreSQL sebenar. Yang anda tulis ialah SQL piawai, ada foreign key, ada transaction, ada view dan trigger. Ini bermakna dua perkara — pertama, pengetahuan SQL sedia ada anda boleh terus digunakan, dan kedua, jika suatu hari mahu berpindah, cukup dump pangkalan data keluar dan lemparkan ke mana-mana Postgres, tanpa terkunci.

Perubahan Supabase pada 2026 yang paling patut diperhatikan ialah integrasi AI. MCP server yang dikeluarkan secara rasmi membolehkan coding agent seperti Claude Code, Cursor, Codex dan Gemini CLI mengendalikan projek anda terus; selain itu ada juga integrasi ChatGPT, dan dokumen rasmi menyebut kira-kira 29 alat, merangkumi menjalankan SQL, menukar schema, membuka cabang, melancarkan Edge Function, dan melihat log masa nyata.

Apa yang Boleh Dibuatnya

Back-end yang diperlukan oleh sebuah aplikasi Web atau mudah alih yang tipikal, hampir semuanya dibungkus Supabase:

• Database: PostgreSQL, termasuk API REST yang dijana automatik
• Auth: email, kata laluan, magic link, OAuth Google/GitHub/Apple dan lain-lain
• Storage: muat naik fail dan pengedaran CDN, kebenaran bersepadu dengan dasar pangkalan data
• Realtime: perubahan data ditolak ke bahagian hadapan secara masa nyata
• Edge Functions: fungsi tanpa pelayan dalam persekitaran pelaksanaan Deno
• Vector: sambungan pgvector, boleh terus digunakan untuk pencarian vektor RAG

Butir terakhir ini sangat praktikal bagi aplikasi AI — anda tidak perlu membeli pangkalan data vektor lain demi RAG, dan Postgres ditambah pgvector sudah cukup untuk aplikasi berskala kecil dan sederhana.

Cara Menggunakannya: Daripada Membina Projek hingga Pertanyaan Pertama

Langkah Satu: Bina Projek

Ke supabase.com untuk mendaftar, bina organization dan project. Ada tiga perkara yang perlu dipilih:

• Region: pilih yang paling dekat dengan pengguna. Pengguna di Malaysia disyorkan memilih Singapore, jika pilih us-east kelewatan akan bertambah satu dua ratus milisaat
• Database password: ini kata laluan pengguna super pangkalan data, simpan ke pengurus kata laluan; ini bukan API key
• Pelan: Free boleh dimulakan dahulu

Pembinaan mengambil masa satu dua minit. Setelah selesai, di Project Settings > API anda boleh melihat dua kunci:

• anon key: direka untuk didedahkan kepada umum, akan diletak dalam kod bahagian hadapan
• service_role key: sekali-kali tidak boleh diletak di bahagian hadapan, ia memintas semua semakan kebenaran

Perbezaan dua kunci ini ialah konsep paling penting dalam seluruh tutorial.

Langkah Dua: Bina Jadual Data

Ke Table Editor tekan New table. Ambil satu senarai tugasan mudah sebagai contoh:

• Nama jadual todos
• Medan: id (int8, kunci utama, auto tambah, sudah ada secara lalai), user_id (uuid), title (text), done (bool, lalai false), created_at (timestamptz, lalai now())

Medan user_id ini sangat kunci — ia akan digunakan untuk dipadankan dengan ID orang yang log masuk, bagi menentukan siapa boleh melihat baris yang mana. Ketika membina jadual ingat tandakan Enable Row Level Security, dan Supabase kini akan mengingatkan anda secara lalai.

Boleh juga terus menggunakan SQL Editor untuk membinanya:

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 Tiga: Tetapkan Dasar RLS (Langkah Ini Tidak Boleh Dilangkau)

Selepas RLS dibuka, secara lalai semuanya tidak dibenarkan. Anda perlu menulis dengan jelas siapa boleh buat apa.

Ke Authentication > Policies, atau terus guna SQL:

-- hanya boleh baca tugasan sendiri
create policy "read own todos" on todos
  for select using (auth.uid() = user_id);

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

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

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

auth.uid() ialah fungsi yang disediakan Supabase, mengembalikan ID orang yang sedang log masuk. Empat dasar ini memastikan setiap orang hanya menyentuh data sendiri.

Setelah selesai menulis mesti diuji. Log masuk dengan dua akaun berbeza, sahkan A benar-benar tidak dapat melihat data B. Jangan percaya 'saya sudah tulis dasar jadi sepatutnya betul'.

Langkah Empat: Sambung dari Bahagian Hadapan

Pasang SDK:

npm install @supabase/supabase-js

Bina client dan buat pertanyaan:

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

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

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

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

Perhatikan di sini yang digunakan ialah anon key, dan kebenaran sepenuhnya ditentukan RLS. Bahagian hadapan tidak dapat mengambil data yang tidak sepatutnya diambil, kerana lapisan pangkalan data sudah menyekatnya.

Langkah Lima: Tambah Log Masuk

// Pendaftaran Email + kata laluan
await supabase.auth.signUp({ email, password })

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

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

Pembekal OAuth perlu dibuka dahulu di Authentication > Providers dan diisi dengan client ID serta secret platform tersebut. Tetapan Google perlu dibuat di Google Cloud Console untuk membina kelayakan OAuth, dan ingat isikan alamat callback yang diberi Supabase.

Teknik Lanjutan

Guna MCP Membolehkan Ejen AI Mengurus Pangkalan Data

Inilah perkara baharu paling praktikal pada 2026. Selepas memasang Supabase MCP server, ejen seperti Claude (bersama tutorial Claude Code) dan Cursor boleh terus membuat pertanyaan pangkalan data anda, menjana migration, dan melancarkan Edge Function; malah rasmi membungkus agent skills sekali, jadi ejen akan mengikut amalan terbaik dan bukan mengubah sesuka hati.

Perbezaan yang dirasai sebenar ialah: dahulu anda perlu menghuraikan kepada AI 'jadual data saya begini, ada medan-medan ini', kini ia sendiri pergi melihatnya. Ketika menukar schema ia akan menjana fail migration dan bukan terus melaksanakan ALTER TABLE.

Tetapi pastikan hanya sambung ke cabang pembangunan atau pratonton. Membiarkan ejen AI menyambung terus ke pangkalan data produksi, satu arahan yang disalahfahami boleh memadam sesuatu. Aliran yang betul ialah ejen mengubah di cabang, dan hanya migration yang telah anda review digabungkan ke persekitaran produksi.

Cabang Pangkalan Data

Branching Supabase membolehkan anda membuka satu cabang pangkalan data bebas untuk menguji perubahan schema, sahkan tiada masalah baru gabung kembali ke persekitaran produksi. Dari segi pengebilan tiada yuran bulanan tetap, dan cabang pratonton berjalan di atas Micro compute kira-kira US$0.01344 sejam — sehari buka lapan jam lebih kurang US$0.11, sangat murah.

Digunakan bersama MCP ialah gabungan sempurna: ejen mengubah sesuka hati di cabang, kalau rosak pun buang dan buka semula.

Edge Functions

Logik yang perlu berjalan di back-end (memanggil API pihak ketiga, memproses webhook, menyembunyikan kunci rahsia) letak di sini:

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

Persekitaran pelaksanaan ialah Deno, tulis TypeScript. Operasi yang perlu menggunakan service_role key (contohnya fungsi pentadbir) letak di sini, sekali-kali jangan letak di bahagian hadapan.

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);

Selepas itu cukup buat carian keserupaan menggunakan SQL. Aplikasi RAG berskala kecil dan sederhana ini sudah cukup, tidak perlu memasang Pinecone atau Qdrant lain.

Perkara Perlu Diberi Perhatian

RLS ialah satu-satunya benteng anda. Sekali lagi: anon key adalah awam, boleh dilihat dalam kod sumber bahagian hadapan, dan ini memang direka begitu. Kebenaran sepenuhnya bergantung pada RLS. Sebelum melancarkan sila semak satu demi satu setiap jadual sudah membuka RLS dan dasarnya betul. Panel belakang Supabase akan memaparkan amaran bagi jadual awam yang tidak membuka RLS, jangan abaikannya.

service_role key sekali-kali jangan masuk bahagian hadapan. Ia memintas semua RLS. Hanya boleh letak dalam Edge Functions, pelayan back-end atau pemboleh ubah persekitaran CI. Semak sekali sebelum commit ke git.

Pelan percuma akan digantung. Projek yang melahu satu tempoh akan di-pause, dan perlu dijaga bangun secara manual. Produk yang ada pengguna sebenar sila sekurang-kurangnya naik ke Pro (US$25 sebulan).

Item tambahan perlu diberi perhatian. PITR pemulihan titik masa US$100 setiap 7 hari, domain tersuai US$10, MFA lanjutan US$75 untuk projek pertama. Harga unit ini tidak rendah, sahkan benar-benar diperlukan sebelum membukanya.

Penempatan data. Ketika memilih region yang perlu dipertimbangkan bukan hanya kelewatan. Jika perkhidmatan anda melibatkan data peribadi dan ada keperluan penempatan setempat, pastikan region yang dipilih mematuhi peraturan. Malaysia buat masa ini tiada region Supabase, dan yang paling dekat ialah Singapore.

TheAI Academy — Ulasan

Sumbangan terbesar Supabase beberapa tahun ini ialah menjadikan 'seorang menyiapkan keseluruhan produk' benar-benar boleh dilaksanakan. Dahulu anda perlu tahu back-end, perlu memasang pangkalan data, perlu menguruskan log masuk; kini semua ini hanya tetapan. Ditambah integrasi MCP 2026, ejen AI mengurus pangkalan data terus, kelajuan pembangunan naik satu tahap lagi.

Tetapi saya mesti jujur menyebut sisi satu lagi: ia membolehkan orang yang tidak memahami pangkalan data pun menolak pangkalan data ke atas talian, dan inilah risikonya. Jurutera di Cyberjaya itu bukan bodoh, dia hanya tidak tahu key di bahagian hadapan adalah awam. Alat menurunkan ambang, tetapi akibat kebocoran data tidak turut menurun.

Cadangan saya sangat mudah: anda boleh menulis 90% kod menggunakan AI, tetapi bahagian dasar RLS itu sila faham sendiri, uji sendiri. Ini benda yang 'kalau salah tiada peluang kedua'.

Ulasan: Supabase ialah pilihan back-end paling hebat bagi pembangun individu buat masa ini, tetapi sila jadikan 'semak RLS' sebagai item pertama senarai semak pelancaran, bukan item terakhir.

Cadangan khusus untuk pembaca di Malaysia: gunakan pelan percuma dahulu untuk membuat satu projek kecil yang ada log masuk, sengaja uji pengasingan data dengan dua akaun, lihat sendiri RLS berkuat kuasa baru teruskan. Jika mahu menyambung ejen AI, buka satu cabang untuk berlatih dahulu, sahkan alirannya lancar baru pertimbangkan menyentuh persekitaran produksi. Konsep keselamatan berkaitan boleh dibaca bersama senarai semak keselamatan aplikasi LLM.

Sumber Rujukan

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

Disusun berdasarkan maklumat awam, dengan fungsi dan harga mengikut dokumen rasmi sebagai rujukan muktamad.