Builder Toolkit · 10 / 11

Asas Supabase

Tentukan sama ada anda perlukan backend, buat satu table, dan fahami key serta row level security.

Asas Supabase

Apa ini

Supabase ialah backend yang dihoskan. Ia menyediakan database, authentication pengguna, dan storan file dalam satu project.

Copy

Frontend = what people see
Backend  = where the data lives

Satu idea utama

Tambah backend hanya bila project anda mesti ingat sesuatu selepas halaman di-reload.

Kenapa penting

Banyak project bagus tidak pernah perlukannya. Portfolio, landing page, menu, kalkulator: semuanya frontend sahaja.

Tambah database terlalu awal ialah salah satu cara paling pasti untuk tergendala. Anda akhirnya debug authentication sebelum ada apa-apa yang berbaloi untuk di-login.

Apa nak buat

Tentukan dengan jujur sama ada anda perlukannya

Tanya satu soalan:

Copy

Does this project need to save data that survives a refresh,
and be visible to someone else on another device?

Kalau tidak, langkau halaman ini. Storan browser meliputi lebih banyak daripada yang anda sangka, dan KDBM Lite bina app browser-local atas sebab itu.

Kalau ya, teruskan.

Buat project

Buat account di supabase.com.
Buat satu project.
Simpan password database di tempat peribadi, bukan dalam code anda.
Tunggu provisioning selesai.

Mula dengan satu table

Satu table. Tahan diri daripada skema yang anda bayangkan perlu enam bulan lagi.

Table contact atau booking nampak begini:

Column	Type	Maksud
`id`	uuid	Pengenal unik baris
`created_at`	timestamp	Bila baris dibuat
`name`	text	Siapa yang hantar
`email`	text	Cara nak balas
`message`	text	Apa yang mereka kata

Kalau anda mahu bantuan AI mereka bentuknya, hadkan permintaan:

Copy

I am a beginner using Supabase.

My app needs to save:
[describe the data in plain language]

Suggest ONE table only.
Explain each column simply.
Do not add authentication yet.

Fahami dua key

Ini bahagian paling penting untuk keselamatan anda.

Key	Boleh diletak di mana	Apa ia buat
Anon (public) key	Code browser, `NEXT_PUBLIC_`	Akses terhad, dikawal oleh row level security
Service role key	Server sahaja, tidak sekali-kali browser	Memintas setiap peraturan keselamatan

Service role key abaikan peraturan anda

Ia memang direka begitu. Sebab itulah ia tidak boleh muncul dalam frontend code, dalam variable public, atau dalam screenshot. Kalau ada tutorial suruh anda letak dalam browser untuk baiki error, tutorial itu salah.

Kekalkan row level security

Row level security menentukan baris mana yang sesuatu permintaan boleh baca atau tulis. Supabase hidupkannya pada table baharu, dan memang menggoda untuk matikan bila sesuatu tidak menjadi.

Biarkan ia mati bermakna sesiapa yang pegang public key anda boleh baca seluruh table anda. Tulis policy, jangan matikan peraturan.

Buat sekarang

Buka project Supabase anda dan cari Project Settings, kemudian API. Lihat dua key itu dan sebut dengan kuat yang mana boleh masuk code browser. Kalau anda teragak-agak, baca semula table di atas.

Check sendiri

Saya boleh terangkan kenapa project saya perlukan backend, atau saya langkau halaman ini.
Saya ada tepat satu table setakat ini.
Saya tahu key mana yang selamat untuk browser.
Row level security masih hidup.
Key saya ada dalam .env.local, yang Git abaikan.

Sambungkannya

Terminal command

npm install @supabase/supabase-js

Swipe sideways if a command is long.

Kemudian tambah nilainya di local dan pada host, ikut Environment Variables.

Kalau query tidak pulangkan apa-apa

Hasil kosong tanpa error biasanya bermakna row level security sedang buat kerjanya dan tiada policy yang benarkan permintaan anda. Itu policy untuk ditulis, bukan peraturan untuk dimatikan.

Common mistakes

Tambah backend sebelum frontend berfungsi.
Bina lima table sebelum simpan satu baris pun.
Mula dengan authentication dan bukan satu table ringkas.
Matikan row level security untuk hilangkan error.
Letak service role key dekat-dekat dengan code browser.
Set key di local dan lupa host, jadi site live gagal.

Next step

Data selesai. Kalau orang perlu sign in, teruskan ke Asas OAuth.