Modal 0 Rupiah! Cara Bikin Aplikasi Lovable Punya "Ingatan" dengan Supabase (Panduan Hemat Kuota)

Sebelum memulai artikel ini, kalian harus membaca artikel ini terlebih dahulu

https://buildwithangga.com/tips/panduan-lengkap-lovable-ai-cara-membuat-web-apps-tanpa-coding-untuk-pemula-2025

Pernahkah Anda mengalami ini? Anda sudah capek-capek membuat aplikasi To-Do List cantik di Lovable. Anda mengetik 10 tugas, lalu tidak sengaja me-refresh browser... dan semuanya hilang.

Sakit hati, bukan?

Tenang, aplikasi Anda tidak rusak. Itu terjadi karena aplikasi Anda saat ini hanya punya "Memori Jangka Pendek" (Local State). Begitu browser ditutup, ia lupa segalanya. Agar aplikasi Anda "pintar" dan punya "Ingatan Jangka Panjang", kita butuh sebuah Database.

Di tutorial ini, kita akan menyambungkan Lovable dengan Supabase. Kabar baiknya:

1. Gratis Seumur Hidup (untuk proyek hobi).
2. Tanpa Coding (kita pakai trik manual agar kuota chat Lovable Anda awet).

Mengapa Supabase?

Bagi developer, Supabase adalah "Google Firebase versi Open Source". Bagi kita pengguna Lovable, Supabase adalah "Excel Sakti" yang hidup di awan. Ia menyimpan data user, login, dan file gambar dengan aman.

Strategi "Kaum Gratisan"

Lovable versi gratis memiliki batasan jumlah chat. Jika Anda menyuruh AI: "Buatkan saya akun Supabase, buatkan tabel, lalu sambungkan...", AI akan bingung, minta konfirmasi berkali-kali, dan Kuota chat Anda habis sebelum fitur jadi.

Solusinya: Kita akan menjadi "Arsitek Cerdas". Kita siapkan database-nya secara manual (cuma 3 menit), lalu kita beri AI satu perintah pamungkas (One-Shot Prompt) untuk menyambungkannya.

Langkah 1: Siapkan Supabase

Lakukan ini di laptop Anda, jangan minta AI.

1. Buka supabase.com dan Sign Up.
2. Klik "New Project".
3. Beri nama (misal: ZenFocus-DB), buat password database yang kuat, pilih region (Singapore/Jakarta agar cepat), lalu klik Create New Project.
4. Tunggu sekitar 1-2 menit hingga database siap.

Langkah 2: Buat Tabel Data (Manual Setup)

Kita akan membuat tempat untuk menyimpan tugas-tugas (Tasks) dari aplikasi ZenFocus kita.

1. Di menu kiri dashboard Supabase, klik ikon Table Editor (seperti gambar tabel).
2. Klik Create a New Table.
3. Isi data berikut:
   • Name: tasks
   • Enable RLS: Hapus centang ini dulu (Uncheck). (Catatan: Untuk keamanan level produksi, RLS harus aktif. Tapi untuk belajar agar tidak error "Permission Denied" yang bikin pusing, kita matikan dulu).
4. Di kolom bawah, tambahkan kolom baru:
   • Kolom 1: id (biarkan default: int8, primary key).
   • Kolom 2: created_at (biarkan default).
   • Kolom 3: Tambah kolom baru -> Name: title, Type: text.
   • Kolom 4: Tambah kolom baru -> Name: is_completed, Type: boolean, Default Value: FALSE.
5. Klik Save.

Sekarang Anda sudah punya tabel kosong yang siap diisi!

Langkah 3: Ambil Kunci Rahasia

Agar Lovable boleh masuk ke Supabase, ia butuh "Kunci Pintu".

• Di dashboard Supabase, klik ikon Settings (gerigi di bawah kiri).

• Pilih Data API, lihat Project URL

• Pilih API Keys, lalu pergi ke Anon untuk melihat key

• Biarkan tab ini terbuka, kita akan copy-paste sebentar lagi.

Langkah 4: Operasi Penyambungan (Di Lovable)

Kembali ke proyek Lovable Anda.

⚠️ PENTING: Jangan Buat Chat Baru! Lanjutkan proses ini di dalam session chat "ZenFocus" yang lama (proyek yang sudah Anda buat di artikel sebelumnya). Jika Anda membuat chat baru, Anda akan kehilangan desain cantik yang sudah dibuat dan harus mulai dari nol lagi. Boros kuota!

• Cari menu Settings.

• Klik Integrations, lalu klik Supabase

• Klik Connect Supabase, masukkan Project URL dan Anon Key yang tadi Anda dapatkan di Langkah 3.

• Sekarang, saatnya menggunakan Prompt Sakti Bahasa Inggris agar Lovable langsung paham tanpa banyak tanya.

Copy-paste prompt ini ke chat Lovable:

I have set up a Supabase project and connected it to this app.I have manually created a table named 'tasks' with the following schema:id (int8, primary key)title (text)is_completed (boolean, default false)Task:Please refactor the app to use this Supabase table instead of the local state.Fetch tasks from Supabase on load.When I add a task, insert it into Supabase.When I toggle a task, update the 'is_completed' status in Supabase.Keep the UI exactly as it is. Just change the data source.

Langkah 5: Testing

Setelah Lovable selesai memproses kode (biasanya butuh 1-2 menit):

• Coba tambah satu tugas baru: "Beli Kopi".

• Cek di dashboard Supabase Anda (Table Editor), lalu klik refresh tabelnya. Apakah tulisan "Beli Kopi" muncul di sana?

• Kembali ke aplikasi Lovable, lalu Refresh Browser.
• Apakah tugas "Beli Kopi" masih ada?

Jika jawabannya YA, selamat! Aplikasi Anda sekarang sudah resmi menjadi aplikasi Full-Stack dengan memori permanen.

Tips Tambahan untuk Pengguna Free Tier

1. Jangan Lupa Pause: Jika Anda tidak menggunakan proyek Supabase selama seminggu, Supabase Free Tier akan "menidurkan" database Anda. Tenang, datanya tidak hilang. Anda cukup login ke Supabase untuk membangunkannya lagi.
2. Hemat Kolom: Di Free Tier Lovable, semakin sedikit perubahan UI yang Anda minta saat integrasi database, semakin kecil kemungkinan error. Fokus fungsional dulu!

Apa Selanjutnya?

Sekarang aplikasi Anda sudah bisa mengingat data. Tapi, siapapun yang membuka link aplikasi Anda akan melihat tugas Anda. Bagaimana cara agar setiap orang punya daftar tugas masing-masing?

Di artikel selanjutnya, kita akan membahas: "Membuat Fitur Login Google & Data Privat User di Lovable".

Stay tuned!