Lovable AI: Panduan dengan Proyek Demo

Lovable adalah layanan text-to-app yang memungkinkan siapa pun membuat aplikasi fungsional tanpa keterampilan pemrograman. Kita dapat menggambarkan ide aplikasi melalui antarmuka chat, dan platform akan mengubah deskripsi tersebut menjadi aplikasi nyata yang berfungsi.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan Lovable dengan membangun sesuatu yang praktis—saya akan memandu Anda langkah demi langkah untuk membangun dan memublikasikan aplikasi seluler daftar tugas yang sederhana namun lengkap dengan persistensi data, autentikasi pengguna, pengingat email, dan langganan berbayar.

Di akhir, saya juga akan membahas beberapa keterbatasan Lovable, termasuk kekhawatiran keamanan, potensi kurangnya kecepatan bagi pengembang yang sudah memiliki alat dan pustaka mereka sendiri, serta tantangan yang mungkin dihadapi non-programmer saat melakukan debugging.

Apa itu Lovable AI?

Dengan AI, Lovable memungkinkan kita mengubah ide menjadi aplikasi yang sepenuhnya fungsional hanya dengan mendeskripsikannya. Ini berarti kita dapat dengan mudah melewati kompleksitas pengodean tradisional, menjadikan pembuatan aplikasi dapat diakses dan efisien bagi non-developer sekaligus bagi developer yang mencari cara lebih cepat untuk membuat prototipe aplikasi.

Lovable menggunakan React dan Vite untuk frontend. React adalah pustaka JavaScript populer untuk membangun antarmuka pengguna, dikenal karena fleksibilitas dan efisiensinya. Vite, di sisi lain, adalah alat build yang menawarkan pengalaman pengembangan yang lebih cepat dan ringkas. Kerangka kerja ini memudahkan pembuatan aplikasi kita dengan menangani logika UI yang kompleks, memastikan aplikasi tidak hanya fungsional tetapi juga responsif dan mulus.

Untuk backend, Lovable menggunakan Supabase, alternatif open-source untuk solusi backend tradisional. Supabase pada dasarnya adalah kumpulan alat yang membentuk sistem backend, termasuk penyimpanan database, autentikasi, dan fungsi cloud. Ini bekerja bersama aplikasi kita untuk mengelola data dan memungkinkan fungsionalitas real-time.

Lovable tidak memungkinkan kita mengedit kode yang dihasilkannya secara langsung di antarmukanya. Namun, kita dapat menautkan kode aplikasi ke repositori GitHub. Koneksi ini berarti perubahan apa pun yang dibuat pada kode di GitHub akan langsung tercermin di aplikasi, memungkinkan pengembangan kolaboratif dan kontrol versi.

Setup ini menggabungkan kemudahan antarmuka no-code dengan fleksibilitas dan kontrol yang ditawarkan GitHub. Namun, saya sering berharap bisa mengedit kode secara langsung untuk melakukan perubahan kecil.

Membangun Proyek Pertama Anda dengan Lovable

Mulai

Untuk mulai menggunakan Lovable, pertama kita perlu menuju ke situs web mereka dan membuat akun gratis.

Setelah akun gratis kita siap, kita dapat mengirim lima pesan per hari ke asisten AI platform. Ini tantangan yang bagus untuk melihat sejauh mana kita bisa melangkah dalam batasan ini.

Pada pesan pertama, kita memberikan deskripsi singkat tentang proyek kita. 

Perhatikan bahwa deskripsi saya cukup singkat. Saya juga mencoba memberikan deskripsi yang sangat detail di pesan pertama yang menguraikan semua fungsionalitas, tetapi ini tidak terlalu berhasil karena sebagian besar fungsionalitas tersebut memerlukan backend. Saat proyek awalnya dibuat, proyek belum otomatis terhubung ke Supabase, sehingga prompt akan gagal.

Ini hasil yang kami peroleh dengan prompt tersebut:

Aplikasi sudah cukup fungsional pada tahap ini. Aplikasi dapat membuat, menghapus, dan menandai item sebagai selesai dalam daftar tugas. Yang mengejutkan saya, data akan tetap ada saat aplikasi disegarkan!

Lovable melakukan ini menggunakan local storage, yang menyimpan data di database browser lokal. Metode ini memiliki keunggulan tidak memerlukan koneksi internet, tetapi juga memiliki kekurangan karena data tidak dibagikan lintas perangkat.

Mari kita lihat cara menggantinya dengan database backend dengan menghubungkan proyek kita ke Supabase.

Menghubungkan ke Supabase

Supabase adalah platform open-source yang menyediakan infrastruktur backend untuk aplikasi kita. Ini menawarkan berbagai layanan, termasuk penyimpanan database, autentikasi, dan API, menjadikannya solusi komprehensif untuk mengelola data aplikasi. 

Saat membangun aplikasi daftar tugas, misalnya, Supabase menjadi penting jika kita ingin data aplikasi bertahan di banyak perangkat dan pengguna. Berbeda dengan local storage yang menyimpan data hanya dalam browser satu perangkat, Supabase memungkinkan kita menyimpan data di cloud. Ini berarti pengguna kita dapat mengakses daftar tugas mereka dari perangkat apa pun dan melihat pembaruan secara real-time.

Selain itu, layanan autentikasi Supabase membantu kita mengelola pendaftaran dan login pengguna, memastikan data setiap pengguna tetap aman dan privat. Dengan menghubungkan aplikasi kita ke Supabase, kita membuka potensi penuh aplikasi kita.

Salah satu keunggulan menggunakan Supabase untuk membangun aplikasi adalah sifatnya yang open-source. Karena open-source, Supabase tidak mengunci kita pada penyedia cloud tertentu, menawarkan fleksibilitas lebih dalam mengelola backend aplikasi. Walaupun kita memiliki opsi memanfaatkan layanan hosted Supabase demi kemudahan, kita juga bebas melakukan self-host aplikasi menggunakan Docker jika kita mau. Fleksibilitas ini memungkinkan kita memilih lingkungan hosting yang paling sesuai dengan kebutuhan, baik dari segi efisiensi biaya, pertimbangan performa, maupun kepatuhan.

Untuk menghubungkan proyek kita ke Supabase, ikuti langkah-langkah berikut:

1. Klik tombol Supabase di pojok kanan atas.

2. Muncul pop-up yang meminta kita mendaftar ke Supabase.

3. Setelah mendaftar, klik tombol Supabase lagi untuk mengizinkan Lovable mengakses akun kita. Kita akan diminta membuat organisasi.

4. Setelah organisasi dibuat, kita dapat memilihnya dan mengizinkan Lovable mengakses akun Supabase kita melalui organisasi tersebut.

5. Klik tombol Supabase lagi dan buat proyek. Ini akan mengarahkan kita ke situs web Supabase untuk mengonfigurasi proyek.

6. Terakhir, kembali ke situs Lovable dan klik tombol Supabase untuk terakhir kalinya. Lalu, pilih proyek yang baru saja kita buat. Ini akan memicu AI memperbarui kode agar terhubung ke proyek tersebut.

Selesai, sekarang aplikasi kita memiliki backend!

Seperti disebutkan di atas, lebih baik menghubungkan proyek ke Supabase sebelum meminta Lovable menerapkan fungsionalitas apa pun yang memerlukan backend karena tampaknya ia tidak suka menulis kode sebelum terhubung. Perhatikan bahwa ini bukan cara kerja engineer pada umumnya—frontend engineer bisa menulis kode frontend tanpa backend yang sudah diimplementasikan.

Menambahkan autentikasi pengguna

Dengan aplikasi kita terhubung ke proyek Supabase, sekarang kita bisa meminta Lovable untuk menambahkan autentikasi pengguna.

Pertama, AI akan membuat tabel database untuk aplikasi kita. Setelah selesai, kita perlu menyetujuinya secara manual dengan mengeklik tombol "Apply Changes" di jendela chat.

Kita tidak akan selalu diminta menerima perubahan AI, tetapi dalam beberapa kasus ini diperlukan karena beberapa perubahan (seperti pembaruan database) dapat memengaruhi aplikasi di produksi bahkan tanpa dipublikasikan.

Setelah database diperbarui, AI akan mulai memperbarui kode untuk mengautentikasi pengguna dan menyimpan pembaruan to-do ke database.

Namun, kali ini muncul error: "Build unsuccessful". Saat ini terjadi, kita dapat melihat error-nya dan ada tombol "Try to fix it" di bagian atas untuk mencoba memperbaiki masalah secara otomatis.

Dalam kasus ini, mengeklik tombol tersebut memperbaiki masalah, dan aplikasi kini sepenuhnya fungsional dengan autentikasi pengguna dan penyimpanan data di database, sehingga jika kita menggunakan aplikasi di beberapa perangkat, kita tetap dapat mengakses daftar tugas kita.

Mempublikasikan aplikasi

Untuk memublikasikan aplikasi, kita dapat menggunakan tombol "Publish" di pojok kanan atas.

Setelah dipublikasikan, kita dapat mengaksesnya menggunakan tautan yang disediakan di bagian bawah menu.

Ini dapat diakses publik secara online dan memungkinkan siapa pun menggunakan aplikasi. Kita juga dapat menyiapkan domain kustom jika memilikinya.

Perhatikan bahwa kita perlu mengeklik tombol “Redeploy” setiap kali melakukan perubahan pada aplikasi. Jika tidak, perubahan tersebut hanya akan terlihat di antarmuka Lovable dan tidak oleh pengguna yang mengakses melalui URL aplikasi.

Kemampuan Lanjutan di Lovable

Menghubungkan ke GitHub

Lovable tidak memungkinkan kita melakukan perubahan kode secara langsung, hanya memungkinkan kita melihat kode dan perubahan yang dibuatnya.

Untuk dapat memodifikasi kode, kita perlu menghubungkan proyek ke GitHub, yang merupakan platform yang banyak digunakan untuk hosting dan kolaborasi proyek kode dengan kontrol versi. Ini memungkinkan banyak pengguna berkontribusi, meninjau, dan mengelola perubahan secara efisien.

Untuk terhubung ke GitHub:

1. Masuk ke akun GitHub Anda dan buat organisasi gratis.

2. Di Lovable, klik tombol "Edit Code" di pojok kanan atas.

3. Lalu klik "Connect to GitHub".

4. Pilih organisasi yang kita buat pada langkah pertama.

Dengan GitHub terhubung, kode akan tetap tersinkron dengan repositori GitHub. Ini berarti kita dapat menggunakan alat seperti VSCode untuk mengerjakan proyek secara lokal. Perhatikan bahwa Lovable memerlukan waktu untuk mengambil perubahan setelah didorong ke repositori.

Ingat bahwa aplikasi itu sendiri tidak melakukan redeploy secara otomatis. Untuk melihat perubahan di aplikasi, kita perlu memublikasikannya lagi.

Fungsi cloud

Apa yang sudah kita pelajari sejauh ini memungkinkan kita membuat aplikasi yang dapat mempertahankan database online dan antarmuka pengguna front-end untuk membuat, membaca, memperbarui, dan menghapus data tersebut, yang sering disebut aplikasi CRUD.

Cloud functions menawarkan cara yang kuat untuk menambahkan logika kustom dan operasi kompleks ke aplikasi kita tanpa perlu mengelola server fisik. Fungsi ini memungkinkan kita menjalankan kode backend sebagai respons terhadap peristiwa seperti perubahan database, permintaan HTTP, atau pemicu lainnya. Ini sangat berguna untuk tugas seperti mengirim notifikasi email, memproses data, atau menjalankan pekerjaan terjadwal.

Dengan menggunakan fungsi cloud, kita mendapatkan fleksibilitas untuk menangani fungsi yang rumit secara efisien dan melakukan skala sesuai kebutuhan, sekaligus memastikan pengalaman pengguna yang mulus dan responsif. Intinya, fungsi ini memungkinkan kita memperluas kemampuan aplikasi melampaui manajemen data sederhana, menjadikannya lebih dinamis dan bermanfaat.

Contoh yang bagus penggunaan fungsi cloud dalam aplikasi daftar tugas adalah mengirim pengingat email untuk tugas yang akan datang. Misalnya kita ingin mengingatkan pengguna tentang tugas yang segera jatuh tempo. Kita bisa menulis fungsi cloud yang memeriksa database untuk tugas dengan tenggat mendekat dan secara otomatis mengirim email pengingat ke pengguna.

Kita dapat meminta Lovable menerapkannya untuk kita:

Beberapa fungsi memerlukan akses ke API eksternal yang membutuhkan kunci API agar berfungsi. Dalam kasus ini, solusi yang diterapkan menggunakan Resend API, sehingga Lovable meminta kunci API untuk menyelesaikan penyiapan layanan. 

Menambahkan langganan dengan Stripe

Kurang ada gunanya membuat aplikasi jika pengguna tidak bisa berlangganan. Mari minta Lovable untuk menerapkan langganan di aplikasi menggunakan Stripe.

Kita dapat menggunakan prompt berikut:

Lovable meminta saya memberikan kunci Stripe, mirip seperti contoh sebelumnya. Kita bisa mendapatkan kunci ini dari akun Stripe kita.

Terakhir, disebutkan bahwa ID harga langganan belum ada. Untuk ini, kita dapat kembali ke Stripe, membuat produk langganan, dan menyalin ID harga. Karena Lovable tidak memiliki tombol untuk meminta ID harga seperti halnya untuk kunci API, kita bisa memberikannya melalui chat:

Untuk menyelesaikan penerapan, kita dapat memintanya agar hanya pengguna yang berlangganan yang dapat membuat to-do dan memublikasikan versi aplikasi yang diperbarui.

Semuanya berhasil pada percobaan pertama!

Membuat aplikasi seluler yang bisa diinstal

Aplikasi yang dibuat Lovable bukan progressive web app (PWA) secara default. Ini hanya sebuah situs web dan artinya kita tidak dapat memasangnya di perangkat seluler dan menggunakannya seolah-olah itu adalah aplikasi ponsel asli, bukan situs web.

Namun, ini sangat mudah diperbaiki dengan satu prompt:

Dengan perubahan ini, jika kita membuka tautan aplikasi di perangkat seluler, kita dapat memasangnya dan menggunakannya seolah-olah aplikasi tersebut terpasang secara native.

Keterbatasan Lovable

Terlepas dari potensinya, penting untuk mempertimbangkan keterbatasan Lovable.

Kekhawatiran keamanan

Walaupun Lovable menawarkan cara yang menarik untuk membangun aplikasi tanpa pengodean, ada kekhawatiran tentang keamanan aplikasi, terutama bagi mereka yang tidak memiliki pengalaman pengodean. Bagaimana pengguna dapat yakin bahwa database aplikasi mereka memiliki langkah pengamanan yang diperlukan untuk mencegah akses tidak sah, seperti satu pengguna menambahkan tugas ke daftar pengguna lain?

Aspek krusial ini tidak disebutkan dalam prompt selama proses pembuatan aplikasi, sehingga potensi kerentanan dibiarkan tidak diperiksa. Pengguna tanpa latar belakang teknis mungkin kesulitan menilai dan mengelola masalah keamanan ini.

Apakah Lovable benar-benar lebih cepat bagi developer?

Bagi developer yang sudah memiliki seperangkat alat dan pustaka kode sendiri, pertanyaannya menjadi: apakah Lovable benar-benar lebih cepat?

Banyak developer telah mengasah keahlian mereka dengan membuat pustaka internal berisi potongan kode dan modul yang mereka percayai dan kenal, sering kali mencakup fitur seperti pembayaran, autentikasi, dan operasi CRUD. Ini disesuaikan dengan gaya dan preferensi teknologi mereka.

Lovable mungkin tidak menawarkan tingkat kontrol yang sama atas teknologi yang digunakan, yang bisa menjadi kekurangan bagi mereka yang terbiasa dengan sistem dan alur kerja tertentu. Meskipun platform ini menyediakan cara mudah untuk cepat membuat prototipe, developer mungkin merasa lebih efisien tetap menggunakan alat dan metode yang sudah ada, terutama mengingat integrasi yang mulus dan tingkat keakraban yang ditawarkannya.

Debugging untuk non-programmer

Meskipun Lovable sangat memudahkan pembuatan aplikasi tanpa pengodean, ada kekhawatiran besar tentang bagaimana non-programmer diharapkan menangani situasi ketika solusi otomatis tidak memadai dan intervensi manual diperlukan. Apa yang terjadi ketika platform menghadapi masalah yang tidak dapat diselesaikan secara otomatis? Siapa yang menangani hambatan ini ketika pengguna yang dituju tidak memiliki keterampilan pengodean?

Tanpa kemampuan untuk masuk ke kode, seorang non-coder mungkin merasa buntu dan tidak yakin langkah apa yang harus diambil selanjutnya. Ketergantungan ini bisa menyebabkan proyek mandek dan frustrasi, yang berpotensi membuat mereka harus menyewa programmer atau mencari bantuan eksternal, yang mungkin melibatkan biaya dan penundaan tambahan.

Kesimpulan

Pada akhirnya, meskipun Lovable membuat pengembangan aplikasi menjadi aksesibel, keberhasilannya bagi non-programmer sangat bergantung pada bagaimana platform mendukung pengguna saat hal-hal menjadi kompleks melampaui sekadar pemberian prompt sederhana.

Saya percaya Lovable benar-benar memenuhi janjinya untuk membuat pengembangan aplikasi dapat diakses oleh semua orang. Terlepas dari batasan hanya lima prompt per hari, kita tetap dapat membangun aplikasi fungsional secara efektif.

Platform ini menunjukkan kemampuan kuat untuk mengelola alur kerja yang lebih kompleks, memungkinkan kita melakukan kustomisasi aplikasi secara mendetail. Ini berarti bahkan dalam interaksi yang terbatas, kita dapat mengubah ide aplikasi kreatif menjadi aplikasi yang berfungsi.