Tujuan Pembelajaran

Bisa menggunakan Supabase Realtime
Mengimplementasikan file storage
Mengerti subscriptions dan presence

Analogi

Diagram


      Realtime:
supabase.channel('table').on('postgres_changes', callback).subscribe()

Storage:
supabase.storage.from('bucket').upload(path, file)
supabase.storage.from('bucket').getPublicUrl(path)

Supabase Realtime mengubah PostgreSQL menjadi database real-time dengan WebSocket subscriptions

Penjelasan Konsep

Dua fitur paling menarik Supabase setelah database dan auth adalah Realtime dan Storage. Keduanya membuka kemungkinan untuk aplikasi interaktif dan user-generated content.

Supabase Realtime

Realtime memungkinkan client mendengarkan perubahan database secara real-time. Cara kerjanya:

PostgreSQL logical replication mengirim perubahan ke Realtime server
Realtime server mengirim ke client via WebSocket
Client menerima event dan update UI

Tanpa perlu polling!

// Subscribe ke INSERT pada tabel 'todos'
const channel = supabase
  .channel('todos-channel')
  .on('postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'todos' },
    (payload) => {
      console.log('New todo:', payload.new);
    }
  )
  .subscribe();

channel.unsubscribe();

Event types: INSERT, UPDATE, DELETE, atau * untuk semua.

Supabase Storage

Storage untuk upload dan serve files (gambar, video, dokumen).

// Upload file
const { data, error } = await supabase
  .storage.from('avatars')
  .upload('user_123.png', file,

{ upsert: true });

// Get public URL
const { data } = supabase.storage.from('avatars').getPublicUrl('user_123.png');

// Delete file
await supabase.storage.from('avatars').remove(['user_123.png']);

Presence (Realtime Collaboration)

Supabase Realtime juga support presence — melihat siapa saja yang online:

const room = supabase.channel('room:1');
room
  .on('presence', { event: 'sync' }, () => {
    const users = room.presenceState();
    console.log('Online:', Object.keys(users).length);
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await room.track({ name: 'Budi', online_at: new Date().toISOString() });
    }
  });

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa menggunakan Supabase Realtime., mengimplementasikan file storage., dan mengerti subscriptions dan presence. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Supabase, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Supabase Realtime mengubah PostgreSQL menjadi database real-time dengan WebSocket subscriptions. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Set state langsung dari payload tanpa refetch — UI update instant. Upsert true menimpa file existing.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Real-time todo list
import { useEffect, useState } from 'react';
import { supabase } from './supabase';

function RealtimeTodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    supabase.from('todos').select('*').order('created_at', { ascending: false })
      .then(({ data }) => setTodos(data || []));

    const channel = supabase
      .channel('todos-realtime')
      .on('postgres_changes',
        { event: 'INSERT', schema: 'public', table: 'todos' },
        (payload) => setTodos(prev => [payload.new, ...prev])
      )
      .on('postgres_changes',
        { event: 'UPDATE', schema: 'public', table: 'todos' },
        (payload) => setTodos(prev => prev.map(t => t.id === payload.new.id ? payload.new : t))
      )
      .on('postgres_changes',
        { event: 'DELETE', schema: 'public', table: 'todos' },
        (payload) => setTodos(prev => prev.filter(t => t.id !== payload.old.id))
      )
      .subscribe();

    return () => { channel.unsubscribe(); };
  }, []);

  return <div>{/* render todos */}</div>;
}

// File upload
async function uploadAvatar(userId: string, file: File) {
  if (!file.type.startsWith('image/')) throw new Error('Must be image');
  if (file.size > 2 * 1024 * 1024) throw new Error('Max 2MB');
  const path = `${userId}/avatar.png`;
  const { error } = await supabase.storage.from('avatars').upload(path, file, { upsert: true });
  if (error) throw error;
  const { data } = supabase.storage.from('avatars').getPublicUrl(path);
  return data.publicUrl;
}

Penjelasan Kode

Set state langsung dari payload tanpa refetch — UI update instant. Upsert true menimpa file existing.

Prompt AI

Bangun collaborative whiteboard dengan Supabase Realtime. Setiap stroke disimpan dan sync real-time.

Pertanyaan Reflektif

Realtime subscriptions punya limit di free tier. Plan arsitektur-mu dengan mempertimbangkan batasan ini.