Saatnya kita benar-benar menyiapkan “lemari arsip” permanen untuk aplikasi kita. Pelajaran ini akan memandumu langkah demi langkah, mulai dari membuat akun hingga menghubungkan proyek Express.js kita ke database Supabase.

Bagian 1: Membuat Akun Supabase

Langkah pertama adalah memiliki akun di Supabase.

1. Kunjungi Situs Supabase: Buka browser dan pergi ke supabase.com.
2. Mulai Proyek: Klik tombol “Start your project”.
3. Daftar dengan GitHub: Kamu akan melihat beberapa pilihan untuk mendaftar. Sangat disarankan untuk memilih “Continue with GitHub”. Ini adalah cara yang paling umum dan praktis bagi developer.
4. Otorisasi: Ikuti proses otorisasi untuk menghubungkan akun GitHub-mu dengan Supabase.

Bagian 2: Membuat Proyek dan Tabel students

Setelah berhasil login, saatnya membuat proyek pertama kita.

Membuat Proyek Baru:

1. Di dashboard Supabase, klik tombol “New project”.
2. Kamu akan diminta untuk memilih sebuah Organization. Kamu bisa menggunakan organization default yang sudah ada sesuai nama akunmu.
3. Isi detail proyek:
   • Name: Beri nama proyekmu, misalnya bootcamp-backend.
   • Database Password: Buat password yang kuat. Kamu bisa klik “Generate a password”. PENTING: Salin dan simpan password ini di tempat yang aman, karena akan sulit untuk melihatnya lagi nanti.
   • Region: Pilih lokasi server yang paling dekat dengan lokasimu atau target penggunamu (misalnya, ap-southeast-1 untuk Singapura/Asia Tenggara).
4. Klik “Create new project” dan tunggu beberapa saat hingga Supabase selesai menyiapkan semuanya untukmu.

Membuat Tabel students:

Setelah proyek siap, kita akan membuat “laci” atau tabel untuk data siswa.

• Di menu sebelah kiri, klik ikon Table Editor (ikon tabel).
• Klik tombol “Create a new table”.
• Isi detail tabel:
  • Name: Ketik students (gunakan huruf kecil).
  • Description: Boleh dikosongi atau diisi deskripsi singkat.
  • PENTING: Hilangkan centang pada kotak “Enable Row Level Security (RLS)” untuk saat ini. Ini untuk mempermudah kita di tahap belajar. Kita akan membahas keamanan lebih lanjut di lain waktu.
• Di bagian Columns (Kolom), kita akan definisikan struktur data kita:
  • Kolom id dan created_at sudah ada secara default. Biarkan saja.
  • Klik “Add column” untuk menambahkan kolom baru:
    • Name: nama
    • Type: Pilih varchar atau text.
  • Klik Save untuk menyimpan tabel.

Bagian 3: Menemukan Kunci API dan URL Proyek

Untuk bisa menghubungkan aplikasi kita ke Supabase, kita butuh 3 hal: URL proyek dan dua Kunci API (API Keys).

• Di menu sebelah kiri bawah, klik ikon Project Settings (ikon gerigi).
• Pilih tab API.
• Di halaman ini, kamu akan menemukan:
  • Project URL: Di bawah bagian Configuration. Salin URL ini.
  • Project API Keys: Di bawahnya, kamu akan melihat dua kunci. Untuk sekarang, kita hanya butuh kunci anon public. Salin kunci ini. Kunci service_role bersifat rahasia dan jangan pernah dibagikan atau digunakan di sisi frontend.

Bagian 4: Menghubungkan Proyek Express ke Supabase

Terakhir, mari kita “kenalkan” proyek Express kita dengan Supabase.

1. Install Library Supabase: Buka terminal di proyek Express-mu (di VSCode) dan jalankan perintah:

   npm install @supabase/supabase-js

2. Buat File Konfigurasi: Untuk menjaga kerapian, buat folder baru di dalam src bernama config. Di dalam folder config tersebut, buat file baru bernama supabaseClient.js.
3. Isi File Konfigurasi: Salin dan tempel kode berikut ke dalam src/config/supabaseClient.js, lalu ganti dengan URL dan Kunci API yang sudah kamu salin tadi.

   // src/config/supabaseClient.js
   
   const { createClient } = require('@supabase/supabase-js');
   
   // Ganti dengan URL dan Key dari proyek Supabase-mu
   const supabaseUrl = 'URL_PROYEK_SUPABASE_ANDA';
   const supabaseKey = 'KUNCI_ANON_PUBLIC_ANDA';
   
   // Membuat koneksi ke Supabase
   const supabase = createClient(supabaseUrl, supabaseKey);
   
   // Export koneksi agar bisa digunakan di file lain
   module.exports = supabase;

   • File ini membuat satu koneksi (client) ke Supabase yang bisa kita impor dan pakai di bagian mana pun dari aplikasi kita, misalnya di dalam controller.

Selesai! Proyek Express kita sekarang sudah siap secara teknis untuk berkomunikasi dengan database Supabase. Di pelajaran selanjutnya, kita akan mempraktikkan cara melakukan operasi CRUD menggunakan koneksi ini.