Lovable: Integrasikan sisi server dengan Supabase

Integrasi ini memberi aplikasi Lovable-mu backend yang dikelola sepenuhnya. Tanpanya, Lovable tetap bisa membangun UI-mu, tetapi kamu tidak punya tempat siap pakai untuk menyimpan data atau mengelola pengguna. Dengan Supabase terhubung, Lovable bisa membuat akun pengguna (autentikasi), menyimpan dan mengambil data di database, mengunggah file, menjalankan kode sisi server, dan lainnya — semuanya secara otomatis. Pada dasarnya, Supabase menyediakan database dan server di balik aplikasimu, dan Lovable mengendalikannya melalui instruksi.

Ya. Lovable dan Supabase adalah dua platform terpisah. Anda memerlukan akun Supabase (untuk menghosting basis data Anda) selain akun Lovable Anda. Kabar baiknya, keduanya memiliki paket gratis, jadi Anda bisa mulai tanpa biaya apa pun. Ingat saja bahwa jika nanti Anda meningkatkan paket untuk penggunaan atau fitur yang lebih banyak, penagihan untuk tiap layanan akan ditangani secara terpisah.

Di editor Lovable, buka bagian Integrasi. Klik Hubungkan ke Supabase dan ikuti langkah-langkah autentikasi. Jika diperlukan, buat proyek Supabase baru di dalam Lovable. Lovable akan otomatis membuat skema basis data yang diperlukan dan menghubungkannya ke proyek Anda.

Tentu saja. Saat Anda menggunakan Lovable + Supabase, data Anda tersimpan di basis data Supabase, dan Supabase juga menyediakan API RESTful yang dibuat otomatis untuk tabel Anda, beserta pustaka klien. Artinya, Anda dapat menggunakan alat seperti Zapier, Make.com, atau layanan lain untuk berinteraksi dengan data backend aplikasi Anda melalui permintaan HTTP. Misalnya, Zapier dapat mengambil atau menambahkan catatan ke tabel Supabase aplikasi Anda. Selain itu, Anda dapat membuat endpoint API khusus menggunakan Supabase Edge Functions (yang dapat Lovable bantu buat) untuk memicu alur kerja yang lebih kompleks. Singkatnya, integrasi dengan layanan otomatisasi pihak ketiga sangat memungkinkan, meski mungkin perlu sedikit konfigurasi dengan kunci API atau webhook Supabase.

Supabase dibangun di atas PostgreSQL, yang mampu menangani data dalam jumlah besar dan lalu lintas tinggi. Tanpa pengaturan tambahan, database gratis Anda dapat menangani beban kerja yang cukup besar (jutaan baris, banyak koneksi). Seiring bertambahnya kebutuhan Anda, Anda dapat meningkatkan paket Supabase untuk penyimpanan, throughput, dan fitur yang lebih banyak. Banyak aplikasi produksi yang berjalan sepenuhnya di Supabase, jadi Anda berada di tangan yang tepat. Perhatikan saja batas penggunaan pada paket gratis (yang didokumentasikan Supabase di situs mereka) dan rencanakan untuk meningkatkan skala jika Anda mendekati batas tersebut.

Supabase memiliki langganan real-time bawaan pada basis data Anda. Artinya, aplikasi Anda dapat memantau perubahan (penambahan, pembaruan, penghapusan) pada tabel tertentu dan langsung bereaksi. Untuk memanfaatkannya, Anda dapat merancang fitur aplikasi Lovable seperti biasa, misalnya ruang obrolan yang menulis pesan ke tabel messages. Lovable memahami kemampuan real-time Supabase, sehingga dapat mengatur frontend untuk berlangganan perubahan pada tabel tersebut. Dalam praktiknya, setelah Anda membuat tabel untuk pesan obrolan, Anda dapat meminta Lovable untuk “mengaktifkan pembaruan real-time untuk obrolan” dan Lovable akan menggunakan API real-time Supabase di balik layar. Pengguna kemudian akan melihat pesan baru muncul secara langsung tanpa perlu menyegarkan halaman. Ini berlaku untuk skenario apa pun yang membutuhkan pembaruan langsung, seperti komentar, notifikasi, dasbor, dan sebagainya.

Pada paket gratis, Supabase membatasi ukuran unggahan file individual hingga 50MB. Ini mencakup sebagian besar kasus penggunaan seperti gambar, audio, atau video pendek. Jika Anda perlu menangani file yang lebih besar (seperti video panjang atau kumpulan data besar), peningkatan ke paket berbayar memungkinkan unggahan yang lebih besar dan bahkan unggahan yang dapat dilanjutkan. Perlu dicatat juga bahwa ada kuota penyimpanan keseluruhan per proyek (misalnya total GB yang dapat Anda simpan) yang meningkat pada paket yang lebih tinggi.

Lovable otomatis mengatur autentikasi, tetapi Anda mungkin perlu: Buka Dasbor Supabase > Autentikasi. Aktifkan Masuk/Daftar dengan email. Nonaktifkan konfirmasi email agar pengujian lokal lebih mudah.

Ya, bisa. Anda dapat membangun beberapa aplikasi frontend di Lovable yang semuanya terhubung ke proyek Supabase yang sama (dan dengan demikian berbagi basis data serta autentikasi yang sama). Ini tergolong tingkat lanjut, tetapi memungkinkan – misalnya, sebuah aplikasi utama dan dasbor admin sebagai proyek Lovable terpisah yang menggunakan satu basis data bersama. Saat menghubungkan Supabase di setiap proyek, cukup pilih proyek Supabase yang sama. Perlu diingat bahwa semua aplikasi tersebut akan membaca/menulis data yang sama, jadi rancanglah dengan mempertimbangkan hal ini.

Saat ini, setiap proyek Lovable terhubung ke satu proyek Supabase, dan Lovable belum memiliki mode pengujian bawaan. Jika kamu ingin tempat aman untuk bereksperimen, Supabase menawarkan fitur bernama Branching yang memungkinkanmu membuat salinan sementara dari database-mu (seperti cabang git) untuk menguji perubahan. Kamu bisa menghubungkan proyek Lovable terpisah ke cabang atau duplikat database-mu untuk pengujian. Secara umum, untuk proyek serius, berhati-hatilah saat membuat perubahan skema pada aplikasi yang sedang berjalan — sebaiknya buat cadangan atau gunakan Branching, lalu gabungkan perubahan saat sudah siap. Integrasi Lovable terus berkembang, jadi pembaruan di masa depan mungkin menghadirkan alur kerja pengujian yang lebih mulus.

Ya. Antarmuka web Supabase menyertakan AI SQL Assistant yang dapat menghasilkan kueri SQL dari bahasa alami. Jadi jika kamu butuh kueri yang kompleks atau belum nyaman menulis SQL, kamu bisa mencoba alat tersebut di editor SQL Supabase. Di sisi Lovable, biasanya kamu tidak perlu menulis SQL secara manual sama sekali — AI menangani sebagian besar pembuatan skema dan kueri untukmu. Tetapi jika kamu pengguna tingkat lanjut dan ingin melakukan sesuatu yang khusus, kamu selalu bisa menggunakan integrasi GitHub Lovable untuk memeriksa atau mengedit kode, atau menjalankan SQL mentah pada database sesuai kebutuhan.

Pembayaran ditangani melalui integrasi seperti Stripe, yang bisa kamu gunakan bersama Supabase Edge Functions. Misalnya, kamu bisa meminta Lovable: “Tambahkan tombol checkout dan proses pembayaran dengan Stripe.” Lovable kemudian akan membuat Edge Function yang berkomunikasi dengan API Stripe (menggunakan kunci rahasia Stripe-mu yang disimpan sebagai rahasia) dan mungkin menyimpan detail transaksi di database Supabase-mu. UI akan diperbarui untuk menyertakan tombol checkout/pembayaran. Pada dasarnya, Supabase menyediakan lingkungan (Edge Functions, database) untuk menerapkan pembayaran, dan Lovable bisa menyusun kerangka kodenya untukmu. Untuk detail lebih lanjut, kamu juga bisa merujuk ke panduan integrasi Stripe dan Pembayaran dalam dokumentasi Lovable, yang membahas pengaturan Stripe secara khusus.