Panduan Lovable: Hasilkan Aplikasi Web Sedia Lancar dengan Hanya Satu Ayat, Siap Sync ke GitHub

Seorang kawan saya yang merupakan generasi kedua perniagaan tradisional di Taichung, tahun lalu telah membelanjakan 180,000 TWD untuk mencari pihak luar bagi membangunkan sistem dalaman "laporan kemajuan jurujual". Selepas empat bulan dibangunkan dan dilancarkan, jurujual merungut bahawa ia sukar digunakan dan tiada siapa yang mahu mengisi data.

Bulan lalu, dia menghantar pautan kepada saya, mengatakan ia adalah pengganti yang dibuat sendiri dalam masa separuh hari. Apabila saya klik untuk masuk, antaramukanya bersih, mempunyai fungsi log masuk, data dapat disimpan, dan jurujual benar-benar menggunakannya. Katanya: "Saya hanya taip apa yang saya mahu, dan ia terus terhasil."

Alat itu ialah Lovable.

Apakah itu Lovable

Definisi rasmi mereka ialah "platform pembangunan AI penuh (full-stack), membina, mengemas kini dan menggunakan aplikasi web menggunakan bahasa tabii, menghasilkan kod sebenar, serta dilengkapi dengan keselamatan dan tadbir urus korporat."

Jika dipecahkan, ia merangkumi tiga perkara: anda cakap, ia tulis kod sebenar, dan kod itu milik anda.

Titik ketiga adalah kuncinya. Banyak alat no-code di pasaran menghasilkan barangan yang terkunci di dalam platform, dan jika anda ingin memindahkannya, ia bermaksud anda perlu menulis semula. Aliran kerja rasmi Lovable secara jelas merangkumi langkah "disegerakkan ke GitHub", yang bermaksud anda boleh membawa kod anda pergi pada bila-bila masa.

Apa yang boleh dibikannya

Jenis aplikasi yang disenaraikan dalam dokumentasi rasmi adalah sangat luas:

• Produk SaaS dan papan pemuka perniagaan
• Platform pengguna dan tapak web komuniti
• Alat pasaran dan e-dagang
• Aliran kerja dalaman dan sistem operasi
• Tapak web pemasaran dan halaman pendaratan (landing page)
• Platform pendidikan dan alat pembelajaran
• Permainan web dan kandungan interaktif

Penilaian saya sendiri ialah: Alat dalaman dan pengesahan MVP adalah titik manisnya. Perkara seperti "keperluan yang jelas, tidak ramai pengguna, tetapi mencari pihak luar adalah tidak berbaloi" jatuh tepat ke dalam julat ini.

Cara Penggunaan: Proses empat langkah rasmi

Dokumentasi Lovable menerangkan proses itu dengan sangat ringkas, hanya empat langkah:

Langkah 1: Describe — Terangkan apa yang anda mahu menggunakan bahasa tabii

Langkah ini menentukan sama ada proses seterusnya akan berjalan lancar atau tidak. Sama seperti memberi prompt kepada bot sembang, lebih spesifik anda menerangkannya, lebih dekat hasil akhirnya dengan apa yang anda mahukan.

struktur penerangan yang praktikal:

Saya mahu membuat sistem dalaman "laporan kemajuan jurujual".
Pengguna: Kira-kira 15 jurujual, memerlukan log masuk akaun.
Skrin utama: (1) Jurujual melihat senarai pelanggan di bawah tanggungjawab mereka selepas log masuk (2) Klik pada pelanggan untuk menambah rekod lawatan baharu, medan termasuk tarikh, kaedah lawatan, perkara yang dibincangkan, langkah seterusnya (3) Akaun penyelia boleh melihat rekod semua jurujual dan menapis mengikut tarikh.
Gaya: Ringkas, berasaskan jadual, dan mesti boleh digunakan pada telefon bimbit.

Berbanding dengan "bantu saya buat CRM", penerangan seperti ini boleh menjimatkan banyak masa pengubahsuaian bolak-balik.

Langkah 2: Review and iterate — Lihat hasil, ubah suai, dan lihat semula

Lovable akan menghasilkan aplikasi yang boleh dikendalikan secara langsung, anda boleh klik untuk mengetahui sama ada ia betul atau tidak. Tempat yang salah boleh diubah terus dengan bercakap: "Senarai pelanggan perlu menambah satu kolum 'tarikh hubungan terakhir'", "Paparkan rekod bulan ini secara lalai selepas log masuk".

Terdapat kunci penjimatan di sini: Cakap sekali gus untuk sekumpulan pengubahsuaian, jangan ubah satu persatu. Setiap mesej yang dihantar adalah penggunaan satu build, menggabungkan tiga pengubahan kecil ke dalam satu mesej akan menjadikan kosnya tiga kali ganda lebih murah.

Langkah 3: Sync to GitHub — Sambungkan kod ke aliran kerja anda

Apabila prototaip sudah betul, selaraskan ke GitHub. Maksud langkah ini ialah:

• Anda mempunyai kawalan versi dan sandaran
• Jurutera boleh mengambil alih dan mengubah suai menggunakan penyunting mereka sendiri (Cursor, Zed kedua-duanya boleh)
• Boleh menyambungkan CI/CD anda sendiri dan pengimbasan keselamatan
• Tidak akan terikat oleh platform

Saya amat mengesyorkan agar anda mengambil langkah ini selagi projek itu agak rasmi.

Langkah 4: Deploy and govern — Pemasangan dan tadbir urus

Laksanakan mengikut piawaian organisasi anda. Lovable menyediakan pengehosan Cloud bina dalam (termasuk pangkalan data, storan, trafik), dan anda juga boleh menyambungkannya sendiri.

Cara pengiraan mata (credits): Tiga kegunaan, jangan keliru

Di situlah kebanyakan orang sering tersandung. Dokumentasi rasmi membahagikan mata kepada tiga kegunaan:

• Build usage: Menghantar mesej dalam Lovable untuk merancang, menjana, menyunting atau mengemas kini aplikasi anda
• Cloud usage: Pengehosan, pangkalan data, storan, dan sumber rangkaian
• AI gateway usage: Panggilan model oleh fungsi AI dalam aplikasi yang telah anda gunakan

Sumber mata juga dibahagikan kepada dua jenis: kuota eksklusif kegunaan (kuota bina harian, kuota Cloud dan AI bulanan, yang akan dikemas kini secara automatik) dan mata am (kuota bulanan pelan, pembelian tambahan, ganjaran, yang boleh digunakan secara fleksibel). Dokumentasi rasmi jelas menyatakan bahawa ia akan menggunakan kuota eksklusif kegunaan dahulu, kemudian mata am, dan mengutamakan penggunaan mata yang paling cepat tamat tempoh.

struktur kuota yang disenaraikan dalam dokumentasi rasmi:

Pelan	Build Harian	Cloud Bulanan	AI Bulanan	Harga Seunit Tambahan
Free	5 kali/hari (had bulanan 30)	20 mata	4 mata	—
Pro	5 kali/hari	20 mata	4 mata	0.30 USD setiap mata
Business	5 kali/hari	20 mata	4 mata	0.60 USD setiap mata

Penggunaan build berbeza-beza mengikut kerumitan, contoh yang diberikan secara rasmi ialah pengubahsuaian kecil adalah kira-kira 0.5 mata, dan penambahan fungsi yang lebih besar seperti fungsi log masuk adalah kira-kira 1.2 mata.

Perkara yang paling mudah meletup ialah Cloud. Pengehosan dicaj mengikut penggunaan dan tidak termasuk dalam yuran bulanan pelan. Jika aplikasi anda digunakan secara meluas, atau pangkalan data menyimpan sejumlah besar fail, jumlah ini akan terus terkumpul. Pastikan anda menyemak papan pemuka penggunaan sekali sebelum pelancaran, jangan tunggu bil tiba baru tahu.

Petua lanjutan: Empat kaedah untuk mengurangkan kos separuh

1. Lukis dahulu sebelum buat. Sebelum mula, lukis skrin yang anda mahu dengan kertas dan pen atau Excalidraw. Fikirkan dengan jelas tentang bilangan skrin dan medan setiap skrin sebelum mula menerangkan, yang boleh mengurangkan banyak pengubahsuaian bolak-balik.

2. Gabungkan arahan pengubahsuaian. Telah disebutkan sebelum ini tetapi patut disebut sekali lagi. "Besarkan tajuk, tukar butang kepada biru, tambah butang eksport" ditulis dalam satu mesej, jangan bahagikan kepada tiga kali.

3. Bahagikan fungsi rumit kepada peringkat bebas. Buat versi asas yang boleh berfungsi terlebih dahulu (senarai + tambah), sahkan bahawa struktur data adalah betul, kemudian tambah log masuk, dan kemudian tambah kebenaran. Meminta ia melakukan semuanya sekaligus apabila berlaku ralat akan membuatkan anda tidak tahu di mana yang rosak, dan kos untuk mengulanginya adalah yang tertinggi.

4. Gunakan versi percuma pada peringkat prototaip, bayar hanya apabila anda pasti mahu melakukannya. 5 build sehari kedengaran sedikit, tetapi jika penerangan anda cukup tepat, lima kali sebenarnya boleh membawa banyak kemajuan. Gunakan versi percuma terlebih dahulu untuk mengesahkan sama ada idea ini berbaloi untuk dilakukan, kemudian tentukan sama ada mahu melaburkan wang.

Langkah berjaga-jaga: Pembangun Malaysia sila beri perhatian khusus

Keselamatan maklumat tidak boleh hanya bergantung pada AI. Pemasaran rasmi Lovable memang menekankan bahawa output mempunyai pertimbangan keselamatan, tetapi kod yang dijana AI mungkin masih mempunyai masalah seperti tetapan kebenaran yang terlalu luas dan input yang tidak disahkan. Selagi aplikasi anda memproses data peribadi (senarai pelanggan, data pekerja, nombor pengenalan), anda mempunyai kewajipan perlindungan mengikut undang-undang privasi tempatan. Pastikan anda menarik semula kod itu ke GitHub dan minta jurutera menjalankan pemeriksaan keselamatan, atau sekurang-kurangnya menjalankan pengimbasan automatik sekali. Ini bukan pilihan.

Jangan anggap ia sebagai penawar mujarab yang tidak perlu memahami teknologi. Ia membolehkan orang yang tidak tahu menulis kod untuk membuat sesuatu, tetapi apabila barang itu rosak, prestasi menjadi perlahan, atau reka bentuk pangkalan data tidak betul, anda masih memerlukan seseorang yang faham. Jangkaan yang munasabah ialah: ia mengurangkan ambang "dari sifar kepada ada" sebanyak 90%, tetapi "dari ada kepada stabil" masih memerlukan profesional.

Kos mesti dipantau secara dinamik. Yuran langganan bulanan adalah tetap, tetapi bahagian pengehosan berasaskan penggunaan tidak. Tetapkan peringatan dan semak penggunaan seminggu sekali, jangan biarkan aplikasi ujian yang tiada siapa gunakan membazirkan wang di latar belakang.

Bila masanya patut menggunakan alat lain

• Laman web rasmi atau halaman pendaratan statik tulen: Lebih pantas menggunakan Framer atau Webflow, dan kebebasan reka bentuk juga lebih tinggi
• Borang dan pengumpulan data mudah: Borang Google ditambah helaian sudah memadai, jangan lakukan kejuruteraan berlebihan
• Pembangunan fungsi pangkalan kod sedia ada: Terus gunakan pembantu AI dalam editor seperti Cursor atau Cline
• Produk rasmi yang memerlukan logik perniagaan yang rumit: Lovable membuat prototaip, kemudian cari jurutera secara jujur selepas itu

Bacaan lanjut: Untuk memahami gambaran keseluruhan kategori pengaturcaraan AI, anda boleh melihat Panduan Pembantu Pengaturcaraan AI; untuk membina alat dalaman perniagaan, Pembinaan Alat Dalaman AI menerangkannya dengan lebih lengkap; untuk menukar antara pelbagai model bagi menjimatkan kos, Tutorial OpenRouter patut dirujuk. Lebih banyak alat yang serupa berada dalam Klasifikasi Alat Pembangun AI, dan anda juga boleh melayari Pustaka Templat Prompt untuk mencari templat penerangan sedia ada.

Ulasan Akademi TheAI

Pandangan saya tentang Lovable ialah: Apa yang benar-benar diubah bukanlah "kelajuan pembangunan", tetapi "siapa yang layak untuk mula melakukannya".

Pada masa lalu, seorang pengurus jabatan yang ingin membuat alat kecil terpaksa menulis keperluan, mencari bajet, beratur untuk menunggu IT, dan mendapatkan produk yang sedikit tersasar tiga bulan kemudian. Kini dia boleh membuat versi kasar tetapi boleh digunakan sendiri, dan mencari jurutera untuk membuat versi rasmi selepas mengesahkan arahnya betul. Perubahan urutan ini jauh lebih penting daripada wang yang dijimatkan.

Tetapi saya juga mahu berterus terang: Iklan "membuat produk bertaraf pasaran dalam masa separuh hari" itu sekadar untuk dibaca sahaja. Kisah kejayaan yang saya lihat semuanya adalah alat dalaman dengan keperluan yang jelas, skala kecil, dan pengguna yang terkawal. Ini bukan kelemahan, ini sememangnya tempat ia sepatutnya berada.

Ulasan: Nilai terbesar Lovable ialah menurunkan kos "buat dulu dan tengok" kepada hampir sifar. Apa yang paling kekurangan bagi PKS di Malaysia bukanlah idea, tetapi kos untuk mengesahkan idea yang terlalu tinggi — perkara ini kini telah diselesaikan separuh jalan.

Cadangan khusus untuk pembaca Malaysia: Cari satu perkara di syarikat anda di mana "semua orang merungut leceh, tetapi sentiasa menggunakan Excel untuk menyelesaikannya" (pendaftaran cuti, pinjaman peralatan, laporan jurujual semuanya boleh), gunakan versi percuma untuk membuat prototaip dan biarkan rakan sekerja mencubanya selama seminggu. Jika seseorang benar-benar menggunakannya, barulah bincangkan sama ada mahu melabur untuk membuat versi rasmi; jika tiada siapa yang menggunakannya, anda hanya menghabiskan masa separuh hari sahaja.

Sumber Data

• Dokumentasi Rasmi Lovable: Pengenalan Platform
• Dokumentasi Rasmi Lovable: Penjelasan Mata dan Penggunaan

Disusun mengikut maklumat awam, tertakluk kepada maklumat rasmi. Yuran langganan bulanan dan kuota mungkin berubah pada bila-bila masa, sila semak halaman penetapan harga rasmi sebelum membuat pembayaran.