FluentStack

Supabase or Prisma Basics

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced60 menitBahasa Indonesia

Supabase or Prisma Basics

Membandingkan backend platform dan ORM mental model supaya frontend tahu kapan akses data berada pada client, service server, atau backend team.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan Supabase sebagai platform yang menyediakan Postgres dan layanan backend terkait
  • Menjelaskan Prisma sebagai ORM/tooling untuk aplikasi Node.js atau TypeScript di server
  • Membedakan browser configuration yang publishable dari secret server
  • Menentukan pertanyaan boundary sebelum mengintegrasikan data
SupabasePrismaORMRow Level SecurityServer Boundaries

Isi lesson

6 blok
  1. 1.
    Platform dan ORM menyelesaikan peran yang berbedaBelum selesaiWajib
  2. 2.
    Boundary data Course AdminBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Client convenience tidak menghapus backend responsibilityBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Platform dan ORM menyelesaikan peran yang berbeda

Wajib

Supabase adalah backend platform yang dibangun di atas PostgreSQL dan menyediakan layanan seperti Auth, Storage, Realtime, serta database access. Dalam arsitektur tertentu, browser dapat memakai client Supabase dengan configuration publishable, tetapi hanya bila table dan Row Level Security policy dirancang benar. Secret atau service role key tetap hanya berada pada server environment.

Prisma adalah ORM untuk aplikasi Node.js atau TypeScript. Ia membantu kode server memakai model dan client yang typed untuk mengakses database. Prisma bukan database dan tidak membuat browser aman mengakses data. Baik memakai Supabase, Prisma, atau backend service lain, pertanyaan frontend tetap sama: siapa yang menegakkan permission, endpoint atau service apa yang mengirim data, data mana yang boleh berada di browser, dan bagaimana loading/error state dipulihkan.

Bagian ini memengaruhi progres lesson.

Boundary data Course Admin

Wajib
ts
const dataBoundary = {
  supabaseBrowserClient: "Publishable configuration with RLS-protected access",
  prismaServerService: "Server-side application code queries the database",
  privateSecret: "Server environment only",
  frontendRole: "Render allowed data and recover from loading or error states",
};

Contoh ini adalah peta peran, bukan configuration yang bisa langsung dipaste. Supabase dan Prisma dapat dipakai pada project berbeda atau bersama service lain. Yang penting, public browser configuration bukan secret, policy tidak dipindah ke UI, dan access data yang sensitif tidak dibuktikan hanya dengan menyembunyikan button.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Choose course data boundary

Nyatakan peran browser, server service, dan secret agar integration tidak menggeser boundary data.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Pernyataan mana yang paling tepat untuk Supabase client yang dipakai browser?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Client convenience tidak menghapus backend responsibility

SDK yang mudah dipakai bukan alasan untuk menaruh service role key, DATABASE_URL, atau credential provider di browser. Demikian juga ORM typed tidak menggantikan validation, authorization, atau observability. Bila architecture belum jelas, hentikan sebelum integration dan konfirmasi client boundary, RLS/policy, owner data, serta server environment variable.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Supabase adalah backend platform dengan PostgreSQL dan layanan terkait.
  • Prisma adalah ORM/tooling untuk kode server, bukan database atau browser security layer.
  • Browser hanya memakai configuration yang memang publishable dan tetap tunduk pada policy.
  • Secret dan service access berada pada server environment.
  • Berikutnya, kita melihat Redis sebagai infrastruktur untuk cache, session-like state, atau pekerjaan antrian pada level konsep.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Platform dan ORM menyelesaikan peran yang berbeda.

Memuat progresReview module