Jam 11 malam. Saya lagi di dapur nunggu air rebus — bukan setup yang ideal untuk mulai membuat aplikasi.
Tapi saya punya masalah kecil yang sudah lama mengganggu: saya sering lupa deadline invoice ke klien karena saya track semuanya di spreadsheet yang berantakan. Saya mau sesuatu yang simpel — input nama klien, nominal, due date, dan dapat reminder di waktu yang tepat.
Saya lihat jam. “Paling 30 menit setup spreadsheet yang lebih rapi,” pikir saya.
Kemudian saya ingat artikel yang baru saya baca soal vibe coding. “Oke, eksperimen malam ini.”
Satu jam kemudian, ada aplikasi web kecil yang jalan di localhost saya. Bukan spreadsheet.
Ini cerita lengkapnya — termasuk bagian-bagian yang tidak semulus yang biasa diceritain di thread Twitter.
Setup: Apa yang Saya Pakai
Untuk eksperimen ini:
- Cursor sebagai editor utama
- Claude Sonnet sebagai model (via Cursor)
- Python + Flask untuk backend (karena ini yang paling saya familiar)
- HTML/CSS sederhana untuk frontend — saya sengaja tidak pakai framework berat
- SQLite untuk database — overkill mungkin, tapi biar ada persistence
Total setup: sudah terinstall semua, tidak perlu install apapun baru.
Menit 0-10: Mendeskripsikan Ide
Saya buka Cursor, buka folder kosong, dan langsung buka Composer (fitur AI Cursor yang bisa edit multiple file).
Instruksi pertama saya:
> “Membuat aplikasi web sederhana dengan Python Flask. Fungsinya: bisa tambah invoice (nama klien, nominal, due date, status). Ada halaman list invoice, bisa filter yang sudah lewat deadline. Simpan ke SQLite. Tidak perlu tampilan fancy, prioritaskan fungsi.”
Cursor mulai generate. Dalam beberapa detik, dia mulai buat beberapa file: app.py, templates/index.html, templates/add_invoice.html, database.py.
Saya baca sekilas kodenya sambil dia generate. Strukturnya masuk akal. Flask route-nya rapi. SQLite schema-nya simpel tapi fungsional.
Waktu: sekitar 3 menit untuk generate initial code.
Menit 10-25: Jalankan, Error, Iterate
Saya jalankan python app.py. Ada error.
ImportError: cannot import name 'datetime' from 'flask'Saya copy error-nya, paste ke Cursor chat.
> “Ada error ini: [error message]. Tolong fix.”
Cursor fix dalam 10 detik. Ternyata di kode yang di-generate, ada import yang salah cara penulisannya.
Jalanin lagi. Kali ini jalan — tapi halaman index-nya blank. Saya inspect di browser, ada console error JavaScript yang kecil.
Lagi, paste ke Cursor. Fix. Refresh. Halaman muncul.
Form “tambah invoice” muncul, saya coba isi dan submit — dan dapat error 500.
Buka terminal, baca traceback. Ternyata schema database ada kolom yang tidak match dengan yang diproses di route Flask. Ini jenis bug yang kadang di-generate AI karena dia “lupa” konsistensi antara beberapa file yang dia buat.
Pelajaran pertama: AI kadang membuat inkonsistensi antar file yang dia generate sendiri. Harus dicek.
Saya jelaskan ke Cursor: “Column name di database.py adalah due_date tapi di app.py kamu pakai deadline. Tolong konsistenkan.”
Fix, jalanin lagi. Form bisa submit. Data masuk ke database.
Menit 25-45: Tambah Fitur yang Saya Butuhkan
Setelah core functionality jalan, saya mulai tambah hal-hal spesifik yang saya mau:
Filter invoice overdue:
> “Tambah logika di halaman list: invoice yang due date-nya sudah lewat hari ini, beri highlight merah.”
Selesai dalam 2 menit.
Sort by due date:
> “By default, sort invoice by due date ascending, yang paling dekat deadline di atas.”
Selesai dalam 1 menit.
Status toggle:
> “Tambah tombol di setiap baris invoice untuk toggle status antara ‘Unpaid’ dan ‘Paid’ tanpa reload halaman.”
Ini sedikit lebih complex karena butuh JavaScript dan endpoint baru. Cursor generate keduanya — JavaScript fetch ke endpoint Flask baru yang di-create juga.
Waktu pertama jalan, CORS-nya berantakan (karena saya buka via localhost tapi port berbeda). Paste error ke Cursor, dia fix dengan tambahkan flask-cors.
Menit 45-60: Polish dan Sanity Check
Di 15 menit terakhir, saya:
- Review semua kode yang di-generate — bukan karena tidak percaya AI, tapi ini harus jadi kebiasaan. Saya cek logika filtering-nya, pastiin tidak ada SQL injection vulnerability di query-nya.
- Tambah basic validation — saya minta Cursor tambah validasi di form supaya nominal harus angka dan due date harus format yang valid.
- Coba edge case — bagaimana kalau nominal di-input text? Bagaimana kalau due date di masa lalu? Semua saya test manual.
- Tambahkan file
.gitignore— kebiasaan.
Jam 12 malam kurang beberapa menit, saya punya aplikasi yang:
- Bisa tambah invoice dengan nama klien, nominal, dan due date
- List semua invoice dengan highlight merah untuk yang overdue
- Bisa toggle status paid/unpaid tanpa reload
- Sorted by due date otomatis
Apa yang Saya Pelajari dari Eksperimen Ini
Yang berjalan sangat baik:
- Generasi kode awal itu genuinely cepat. Yang dulu butuh setup 1-2 jam (buat folder, init project, install dependencies, buat skeleton) sekarang jadi 10 menit.
- Iterasi dengan paste error ke AI sangat efisien untuk error yang straightforward.
- Bisa fokus ke “apa yang saya mau” daripada “bagaimana cara nulisnya”.
Yang tetap butuh perhatian:
- AI membuat inkonsistensi antar file. Kamu harus review, bukan langsung trust.
- Security adalah tanggung jawab kamu — AI tidak otomatis membuat kode yang aman. Saya harus explicitly minta dan verify.
- AI kadang over-engineer untuk usecase sederhana. Saya minta “simpel”, tapi beberapa bagian kodenya lebih complex dari yang perlu. Saya simplify manual.
Yang tidak bisa digantikan:
- Pemahaman tentang apa yang saya bangun. Karena saya paham Flask dan SQLite, saya bisa evaluate kode yang di-generate dengan cepat.
- Keputusan produk. AI tidak tau invoice apa yang paling penting buat saya. Saya yang tentukan itu.
Apakah Satu Jam Itu Realistic?
Untuk ukuran aplikasi ini — ya. Tapi ada beberapa catatan:
- Saya familiar dengan stack yang dipakai. Kalau saya pakai stack baru, estimasi waktunya beda.
- Aplikasinya sederhana. Kalau ada requirement yang lebih complex (auth, multi-user, real-time), butuh lebih lama.
- Saya belum deploy ke production. Itu cerita lain.
Tapi angka “1 jam” itu bukan fiksi. Dan yang lebih penting: kualitas hasilnya bisa saya pertanggung jawabkan karena saya review sendiri.
Punya ide aplikasi kecil yang pengen kamu build tapi tidak tau mulai dari mana? Atau mau coba vibe coding tapi butuh teman untuk diskusi prosesnya? Hubungi mafadev — saya senang bantu kamu dari ide sampai aplikasi jalan.
Leave a Reply