Dari Ide Buatan AI hingga Tayang dalam Hitungan Menit: Menerapkan Ulang Proyek Lovable Anda dengan Supabase di Zeabur

Panduan komprehensif tentang penerapan dan pembaruan berkelanjutan aplikasi AI Co-Create Anda dengan backend Supabase di Zeabur - Insinyur Agen AI Anda.

Artikel teknis ini akan memberikan panduan terstruktur bagi para pengembang tentang cara menerapkan aplikasi web yang dibuat dengan Lovable, sebuah pembangun aplikasi bertenaga AI, dan backend Supabase yang terintegrasi, ke Zeabur. Fokusnya adalah pada pembentukan pipeline penerapan berkelanjutan (CI/CD), yang memungkinkan pembaruan dan penerapan ulang yang lancar.

Trio Pengembangan Modern: Lovable, Supabase, dan Zeabur

Panduan ini berpusat pada tiga teknologi kuat yang menyederhanakan proses pengembangan:

• Lovable: Seorang insinyur perangkat lunak bertenaga AI yang dapat mengubah ide Anda menjadi aplikasi langsung dalam hitungan detik. Ini sangat kuat untuk menghasilkan frontend dan menghubungkannya dengan layanan backend.
• Supabase: Alternatif sumber terbuka yang populer untuk Firebase. Ini menyediakan serangkaian alat termasuk database Postgres, otentikasi, API, dan penyimpanan file, menjadikannya solusi backend yang tangguh.
• Zeabur: Platform cloud yang dirancang untuk menghilangkan gesekan dalam penerapan. Ini secara otomatis menganalisis kode Anda untuk menentukan bahasa dan kerangka kerja, lalu membangun dan menerapkannya tanpa konfigurasi.

Dengan menggabungkan alat-alat ini, Anda dapat beralih dari sebuah prompt sederhana menjadi aplikasi web yang berfungsi penuh dan diterapkan dengan pipeline CI/CD dalam hitungan menit.

Prasyarat: Apa yang Anda Butuhkan

Sebelum memulai, pastikan Anda memiliki yang berikut ini:

• Proyek Lovable dengan Supabase: Anda memerlukan proyek yang dibuat di Lovable.dev yang terintegrasi dengan proyek Supabase. AI Lovable dapat membantu Anda membangun aplikasi full-stack dengan otentikasi pengguna dan database.
• Akun GitHub: Ini penting untuk kontrol versi dan akan bertindak sebagai jembatan antara Lovable dan Zeabur.
• Akun Zeabur: Anda memerlukan akun di Zeabur untuk menerapkan aplikasi Anda. Anda dapat mendaftar menggunakan akun GitHub Anda.
• IDE: Anda memerlukan Lingkungan Pengembangan Terpadu (IDE) atau editor kode yang terpasang di mesin lokal Anda (seperti VS Code, WebStorm, atau Sublime Text) untuk mengkloning dan bekerja dengan repositori secara lokal.

Langkah 1: Menghubungkan Proyek Lovable Anda ke GitHub

Langkah pertama adalah memasukkan kode proyek Lovable Anda ke dalam repositori GitHub. Lovable memiliki integrasi bawaan yang membuat proses ini menjadi mudah.

1. Mulai Koneksi: Di editor proyek Lovable Anda, temukan ikon GitHub, biasanya di sudut kanan atas, dan klik "Connect to GitHub".
2. Otorisasi Lovable: Anda akan diarahkan ke GitHub untuk mengotorisasi aplikasi Lovable. Anda dapat memberikan akses ke semua repositori atau memilih yang spesifik.
3. Buat Repositori: Setelah diotorisasi, kembali ke Lovable dan klik "Create Repository". Lovable akan membuat repositori baru di akun GitHub Anda dan mendorong kode proyek awal ke dalamnya.

Sinkronisasi dua arah ini berarti setiap perubahan yang Anda buat di Lovable akan didorong ke GitHub, dan setiap perubahan yang Anda dorong ke GitHub akan tercermin di Lovable.

Langkah 2: Mengonfigurasi Integrasi Supabase

Untuk mengaktifkan komunikasi antara aplikasi frontend Anda di Zeabur dan backend Supabase Anda, Anda perlu mengonfigurasi integrasi Supabase dan variabel lingkungan dengan benar.

1. Terapkan Template Supabase: Di dalam dasbor proyek Zeabur Anda, klik tombol "Add Service" dan pilih template Supabase dari opsi yang tersedia.
2. Konfigurasi Gateway Kong: Navigasi ke panel layanan Kong. Anda akan menemukan Nama Pengguna Supabase dan Kata Sandi Supabase yang ditampilkan di sini. Selanjutnya, pergi ke bagian Domains di samping dan akses URL yang disediakan di sana. Gunakan Nama Pengguna Supabase dan Kata Sandi dari panel Kong untuk masuk ke Supabase.

3. Temukan Kunci API Supabase Anda: Di dasbor proyek Supabase Anda, navigasikan ke Settings → API untuk menemukan URL Proyek Anda dan kunci publik anon (juga dikenal sebagai SUPABASE_PUBLISHABLE_KEY). Pastikan nama variabel lingkungan di file .env Anda sama persis dengan nama variabel yang digunakan dalam basis kode Anda.

   1. Klik tombol connect

   

   2. Temukan Pasangan Kunci-Nilai yang benar untuk proyek Anda

   

Langkah 3: Klon Proyek Lovable Anda ke IDE Lokal Anda

1. Klon repositori ke mesin lokal Anda untuk memungkinkan pengembangan berkelanjutan dengan IDE pilihan Anda, mengakses alat debugging canggih, dan kemampuan untuk bekerja secara offline:

   git clone [url-repositori-anda]
   

   1. Navigasi ke direktori proyek:

      cd [nama-proyek-anda]
      

   2. Instal dependensi:

      npm install
      

   3. Buat file .env di root proyek Anda dan tambahkan kredensial dari Langkah 2.3:

      VITE_SUPABASE_URL=[url-anda-dari-langkah-2]
      VITE_SUPABASE_ANON_KEY=[kunci-anon-anda-dari-langkah-2]
      

   4. Jalankan server pengembangan secara lokal:

      npm run dev
      

2. Sinkronkan Skema Database: Jalankan perintah berikut di terminal Anda untuk mendorong skema database Anda ke Supabase (pastikan Anda telah mengkloning repositori secara lokal terlebih dahulu):

   supabase db push --db-url "[string-koneksi-postgresql-supabase-anda]" --debug
   

   

   1. Anda bisa mendapatkan string koneksi PostgreSQL dari panel layanan PostgreSQL Zeabur di dasbor proyek Anda.

   

   2. Kemudian masukkan string koneksi ke dalam perintah di atas.

Hint: Please make sure the credentials file such as .env is listed in your .gitignore file.

Langkah 4: Menyiapkan Proyek Anda di Zeabur

Dengan kode Anda sekarang ada di GitHub, Anda dapat menerapkannya menggunakan Zeabur.

1. Buat Proyek Baru: Di proyek supabase Anda yang sudah ada di dasbor Zeabur, klik Add Services di panel kiri atas.
2. Terapkan dari GitHub: Pilih untuk menerapkan layanan baru dari repositori GitHub.
3. Pilih Repositori Anda: Zeabur akan menampilkan daftar repositori GitHub Anda. Pilih yang baru saja Anda buat dengan Lovable.
4. Klik Configurable dan tempel kredensial supabase tersebut di dalam Environment Variables lalu klik next dan Deploy.
5. Tambahkan nama domain yang diinginkan: Di bagian publik Networking, klik Generate Domain lalu ketik nama domain yang Anda suka.

Langkah 5: Menerapkan Aplikasi Anda

Setelah menghubungkan repositori Anda dan mengonfigurasi variabel lingkungan, klik tombol terapkan. Zeabur akan secara otomatis membangun dan menerapkan aplikasi Anda. Pantau log penerapan untuk melacak kemajuan. Setelah selesai, Zeabur menyediakan URL publik tempat aplikasi Anda aktif.

Langkah 6: Pembaruan Berkelanjutan dengan CI/CD

Dengan pipeline penerapan Anda yang sudah mapan, pembaruan menjadi mudah.

1. Lakukan Perubahan di Lovable: Kembali ke proyek Lovable Anda dan lakukan perubahan yang diinginkan pada aplikasi Anda menggunakan editor bertenaga AI.
2. Dorong ke GitHub: Saat Anda menyimpan perubahan di Lovable, perubahan tersebut secara otomatis di-commit dan didorong ke repositori GitHub Anda yang terhubung.
3. Penerapan Ulang Otomatis: Zeabur akan mendeteksi commit baru di cabang utama repositori Anda dan secara otomatis memicu build dan penerapan baru.
4. Verifikasi Perubahan Anda: Setelah penerapan selesai, aplikasi Anda yang diperbarui akan aktif di URL Zeabur yang sama.

Alur kerja ini memungkinkan iterasi yang cepat dan penerapan perbaikan secara instan.

Penutup

Integrasi Lovable, Supabase, dan Zeabur ini menciptakan alur kerja pengembangan yang efisien. Anda dapat membangun aplikasi bertenaga AI dengan cepat dan menerapkannya dengan konfigurasi minimal, memungkinkan Anda untuk fokus pada pembuatan fitur daripada mengelola infrastruktur.