Dashboard Supabase: Tur Singkat

Dashboard Supabase: Tur Singkat

Jangan bingung di markas Supabase! Kenali bagian-bagian penting di dashboard proyek Supabase Anda, seperti Table Editor, SQL Editor, Autentikasi, Storage, dan di mana menemukan API docs & keys.

"Tur Kantor" Supabase: Ngintip Fitur-Fitur Keren di Dashboard-mu!

Udah berhasil bikin proyek Supabase pertamamu? Selamat! Sekarang, kamu punya "dapur backend" canggih yang siap dipake. Tapi, sebelum kita mulai masak-masak (baca: ngoding interaksi), ada baiknya kita "tur keliling" dulu di Dashboard Proyek Supabase-mu.

Dashboard ini adalah pusat kendalimu buat ngatur semua aspek proyek Supabase-mu, dari ngelola tabel database, ngatur user, sampe liat dokumentasi API yang udah otomatis dibikinin buatmu!

Masuk ke Dashboard Proyek

  1. Login ke akun Supabase-mu di supabase.com.
  2. Kamu bakal dibawa ke halaman daftar organisasimu. Klik organisasi tempat proyekmu berada.
  3. Terus, klik nama proyek yang udah kamu bikin (misalnya, toko-kue-online yang kita buat untuk studi kasus).

Taraa! Sekarang kamu ada di halaman utama (Overview) dashboard proyek Supabase-mu.

Halaman Overview Dashboard Proyek Supabase

Yuk, kita liat beberapa menu penting di sidebar kiri yang bakal sering kamu kunjungi:

1. Table Editor (Editor Tabel - Ikon Tabel 📊)

Ini salah satu tempat yang paling sering kamu pake, apalagi pas awal-awal ngerancang database untuk Toko Kue kita.

  • Fungsinya:
    • Melihat semua tabel yang ada di database PostgreSQL-mu.
    • Membuat tabel baru secara visual (tanpa nulis SQL CREATE TABLE manual). Kamu bisa nentuin nama kolom, tipe datanya, apakah boleh null, nilai default, bahkan relasi dasar.
    • Melihat dan mengedit data yang ada di dalem tabel (mirip kayak di Prisma Studio atau spreadsheet).
    • Mengatur kolom: Nambah kolom baru, ngubah tipe kolom, ngapus kolom (hati-hati!).
    • Mengatur Row Level Security (RLS) buat tabel tertentu. (Ini fitur keamanan penting, nanti kita singgung).
  • Buat Toko Kue Kita: Nanti kita bisa pake Table Editor ini buat bikin tabel Kue, Pesanan, dan DetailPesanan.

Contoh Tampilan Table Editor Supabase

2. SQL Editor (Editor SQL - Ikon </>)

Kalau kamu lebih suka "ngomong" langsung sama database pake bahasa SQL, atau butuh ngejalanin query SQL yang lebih kompleks, ini tempatnya.

  • Fungsinya:
    • Menulis dan menjalankan query SQL apa pun langsung ke database PostgreSQL-mu.
    • Bisa buat SELECT, INSERT, UPDATE, DELETE, CREATE TABLE, ALTER TABLE, dll.
    • Ada fitur buat nyimpen query yang sering dipake (Saved Queries).
    • Nampilin hasil query dalam bentuk tabel.
  • Penting: Kalau kamu nanti memutuskan pake Prisma Migrate buat ngelola skema, sebisa mungkin hindari ngubah struktur tabel (kayak ALTER TABLE) manual lewat SQL Editor ini, karena bisa bikin skema Prisma-mu jadi gak sinkron. Pake SQL Editor lebih buat query SELECT data atau operasi data yang gak ngubah struktur jika skema dikelola alat lain.

Contoh Tampilan SQL Editor Supabase

3. Authentication (Autentikasi - Ikon Kunci 🔑 atau Perisai)

Ini markasnya buat ngatur semua yang berhubungan sama login dan manajemen pengguna untuk pelanggan Toko Kue kita.

  • Fungsinya:
    • Melihat daftar pengguna (Users) yang udah daftar di aplikasimu.
    • Mengatur Penyedia (Providers): Ngaktifin atau nonaktifin metode login apa aja yang mau kamu dukung (Email/Password, Google, GitHub, Facebook, dll.).
    • Mengatur Template Email: Ngustomisasi email yang dikirim ke pengguna (misal, buat konfirmasi akun, reset password).
    • Melihat Log Autentikasi.
    • Konfigurasi keamanan autentikasi lainnya (misal, Redirect URLs, MFA).
  • Buat Toko Kue Kita: Nanti kita bakal ke sini buat ngaktifin provider Email/Password dan mungkin Google Sign-In.

Contoh Halaman Autentikasi di Supabase

4. Storage (Penyimpanan File - Ikon Folder 📁 atau Awan ☁️)

Kalau Toko Kue kita butuh nyimpen file (terutama gambar-gambar produk kue yang menarik!), Supabase Storage ini solusinya.

  • Fungsinya:
    • Membuat "Bucket": Bucket itu kayak folder utama buat nyimpen file-filemu. Kita bisa bikin bucket gambar-produk-kue.
    • Mengunggah (Upload) File: Bisa upload manual dari dashboard atau nanti pake Supabase Client dari aplikasi kita.
    • Mengelola File: Liat daftar file, download, hapus.
    • Mengatur Hak Akses (Policies): Nentuin siapa aja yang boleh ngeliat atau ngunggah file ke bucket tertentu. Bisa dibikin publik atau privat.

5. API Docs (Dokumentasi API - Biasanya di bawah Settings > API, atau ikon Dokumen 📄)

Ini bagian yang super keren dan ngebantu banget! Supabase otomatis nge-generate dokumentasi API buat databasemu.

  • Fungsinya:
    • Nampilin semua tabel database-mu sebagai endpoint API.
    • Buat tiap tabel, dia ngasih tau:
      • Cara ngelakuin operasi CRUD (Create, Read, Update, Delete) pake RESTful API (HTTP request) atau pake Supabase JS Client.
      • Contoh kode dalam berbagai bahasa (JavaScript, Python, cURL, dll.).
      • Kamu bahkan bisa langsung nyobain API-nya dari halaman dokumentasi ini!
  • Ini "contekan" utama pas kamu mau ngoding interaksi database pake Supabase JS Client atau manggil API-nya langsung.

6. Settings (Pengaturan Proyek - Ikon Gerigi ⚙️)

Ini tempat buat ngatur berbagai aspek proyek Supabase-mu.

  • Beberapa Bagian Penting di Settings:
    • General: Info umum proyek.
    • Database: Info koneksi database PostgreSQL (termasuk connection string lengkap kalau butuh konek pake tool DB eksternal atau Prisma). Pengaturan password database.
    • API: DI SINI TEMPATNYA KAMU NEMUIN PROJECT URL DAN API KEYS (anon public key dan service_role secret key) YANG SUPER PENTING ITU!
    • Auth: Pengaturan detail buat Supabase Auth (misal, external OAuth providers, SMTP settings).
    • Storage: Pengaturan buat Supabase Storage.

Luangin waktu buat ngeklik-ngeklik menu di sidebar kiri dan liat apa aja yang ada di tiap bagian. Gak perlu langsung ngerti semua, tapi setidaknya kamu tau di mana nyari apa.


Dashboard Supabase ini dirancang biar gampang dipake. Dengan Table Editor, SQL Editor, pengaturan Auth, Storage, dan terutama dokumentasi API yang udah jadi, kamu punya "kokpit" yang lengkap buat ngelola semua aspek backend aplikasi Toko Kue kita.

Di bagian selanjutnya, kita bakal fokus nyiapin Supabase Client di proyek Next.js kita biar bisa mulai "ngobrol" sama "dapur" Supabase ini dari kode frontend!

Uji Pemahamanmu!

Memeriksa status login...

Mengintip Dapur Supabase: Tur Singkat Fitur-Fitur Utama di Dashboard Proyek Anda - Dasar Supabase (Backend as a Service) - Dasar Supabase (Backend as a Service)