Vibe Coding: Membangun Software Bersama AI dengan Aman

Belum masuk. Progresmu tidak tersimpan.

Masuk
  • Bab 2 dari 6
  • 30 menit
  • 1 latihan kode
  • 4 soal kuis

Siklus Kerja dan Anatomi Prompt

Di bab ini (7 bagian)
  1. Tujuan
  2. Siklus inti vibe coding
  3. Peranmu bergeser: dari penulis kode ke sutradara
  4. Anatomi prompt yang efektif
  5. Dari kriteria selesai ke pemeriksaan
  6. Kesalahan umum
  7. Rangkuman

Tujuan bab ini

  • Menjalankan siklus inti vibe coding: deskripsikan, hasilkan, jalankan, nilai dan arahkan.
  • Memahami pergeseran peranmu dari penulis kode menjadi sutradara.
  • Menyusun prompt dengan lima elemen: konteks, tujuan, batasan, contoh, dan kriteria selesai.
  • Mengubah kriteria selesai menjadi pemeriksaan yang bisa dijalankan.

Siklus inti vibe coding

Vibe coding berjalan dalam putaran pendek yang diulang terus. Setiap putaran punya empat tahap:

  1. Deskripsikan. Jelaskan apa yang kamu inginkan: fitur, tampilan, perilaku.
  2. Hasilkan. AI menulis atau mengubah kode, sering di banyak file sekaligus.
  3. Jalankan. Buka aplikasinya, klik, dan coba seperti pengguna sungguhan.
  4. Nilai dan arahkan. Tempel error, minta revisi, atau lanjut ke fitur berikutnya.

Satu putaran bisa hanya beberapa menit. Kuncinya ada di tahap ketiga: dalam vibe coding, hasil divalidasi dengan menjalankan, bukan dengan memeriksa kode baris demi baris.

Ada dua pelajaran praktis dari siklus ini. Pertama, kegagalan paling umum biasanya bukan karena AI-nya buruk, melainkan karena konteks yang kurang. AI tidak tahu proyekmu memakai apa, siapa penggunanya, atau bagian mana yang tidak boleh disentuh, kecuali kamu memberitahunya. Kedua, semakin kecil langkahnya, semakin mudah melacak kalau ada yang rusak. Kalau kamu meminta lima fitur sekaligus lalu aplikasinya error, kamu tidak tahu fitur mana penyebabnya. Kalau kamu meminta satu fitur, tersangkanya cuma satu.

Menilai lebih dari sekadar "jalan"

Tahap "jalankan" sering diartikan sempit: buka aplikasi, lihat tidak ada error, selesai. Supaya penilaianmu lebih tajam, biasakan mencoba tiga jenis input setiap kali menguji:

  • Input normal, misalnya menambah barang "Susu".
  • Input kosong atau aneh, misalnya nama barang kosong atau hanya spasi.
  • Input berulang atau ekstrem, misalnya menambah barang yang sama dua kali, atau seratus barang sekaligus.

Banyak bug kode AI bersembunyi di dua jenis terakhir, karena contoh di prompt biasanya hanya menyebut kasus normal.

Peranmu bergeser: dari penulis kode ke sutradara

Analogi yang sering dipakai: kamu berpindah dari tukang batu menjadi arsitek, atau dari aktor menjadi sutradara. Kamu tidak lagi menyusun setiap bata, tetapi kamu yang menentukan bangunannya seperti apa dan memeriksa apakah hasilnya sesuai.

Cara lamaCara vibe coding
Mengetik sintaks baris demi barisMenjelaskan tujuan dan hasil yang diharapkan
Mencari solusi di dokumentasiMemberi AI konteks: file, contoh, dokumentasi
Debug dengan membaca kodeMenempel error dan menguji perilaku aplikasi
Fokus pada "bagaimana"Fokus pada "apa" dan "mengapa"
Keahlian utama: bahasa pemrogramanKeahlian utama: berpikir jernih dan menilai hasil

Artinya, kemampuan memecah masalah, menulis spesifikasi, dan menilai kualitas menjadi lebih penting daripada hafal sintaks. Namun perhatikan: sutradara yang baik tetap paham cara kerja kamera. Kamu tidak perlu hafal semua sintaks, tetapi kamu perlu cukup paham kode untuk tahu kapan AI keliru.

Anatomi prompt yang efektif

Prompt yang baik untuk fitur baru biasanya punya lima elemen:

ElemenPertanyaan yang dijawab
KonteksProyek apa, teknologi apa, siapa penggunanya?
TujuanSatu hal spesifik apa yang ingin dicapai sekarang?
BatasanApa yang tidak boleh diubah atau dipakai?
ContohSeperti apa perilaku atau tampilan yang diharapkan?
Kriteria selesaiBagaimana cara mengecek bahwa hasilnya sudah benar?

Tidak semua prompt butuh kelimanya. Untuk memperbaiki salah ketik, satu kalimat cukup. Tetapi untuk fitur baru, struktur ini sangat mengurangi bolak-balik revisi.

Contoh: prompt lemah dan prompt kuat

Prompt lemah:

Tambahin fitur centang di daftar belanja.

AI harus menebak banyak hal: centangnya disimpan di mana, apa yang terjadi dengan barang yang dicentang, boleh tidak mengubah struktur data. Tebakan yang salah berarti putaran revisi tambahan.

Prompt kuat:

Konteks: Aplikasi web daftar belanja keluarga, React + Tailwind.
Tujuan: Tambahkan fitur menandai barang yang sudah dibeli.
Batasan: Jangan ubah struktur data; simpan di localStorage.
Contoh: Barang yang dicentang dicoret dan pindah ke bawah daftar.
Selesai bila: Bisa centang/batal, dan data tetap ada setelah refresh.

Lihat bagaimana setiap baris menutup satu celah tebakan. Baris "Batasan" mencegah AI merombak struktur data yang sudah dipakai di bagian lain. Baris "Selesai bila" memberi kamu daftar uji yang jelas saat tahap "jalankan".

Dari kriteria selesai ke pemeriksaan

Kriteria selesai paling berguna kalau bisa diubah menjadi pemeriksaan otomatis. Misalkan logika "tandai sudah dibeli" dipisah menjadi satu fungsi. Kriteria dari prompt tadi bisa ditulis seperti ini:

// Spesifikasi: toggleDibeli(daftar, id)
// - membalik nilai dibeli pada barang dengan id tersebut
// - barang yang belum dibeli tampil di atas, yang sudah dibeli di bawah
// - urutan di dalam tiap kelompok tetap
// - tidak mengubah array aslinya

const awal = [
  { id: 1, nama: "Susu", dibeli: false },
  { id: 2, nama: "Roti", dibeli: false },
];
const hasil = toggleDibeli(awal, 1);
hasil[1].nama === "Susu" && hasil[1].dibeli === true; // harus true
awal[0].dibeli === false;                              // harus true

Dengan pemeriksaan seperti ini, kamu tidak perlu membaca setiap baris kode AI untuk tahu apakah perilakunya sesuai spesifikasi. Kamu cukup menjalankan pemeriksaannya. Ini jembatan antara vibe coding yang cepat dan pengembangan yang bisa dipercaya.

Pemeriksaan juga berguna untuk percakapan berikutnya dengan AI. Daripada menulis "masih salah", kamu bisa menulis "pemeriksaan awal[0].dibeli === false gagal, artinya fungsimu mengubah array asli". Pesan yang spesifik seperti ini membuat putaran perbaikan jauh lebih pendek.

Kesalahan umum

  • Prompt terlalu besar. "Buatkan aplikasi lengkap dengan login, keranjang, dan pembayaran" dalam satu prompt membuat hasilnya sulit diuji.
  • Tidak menyebut batasan. AI dengan senang hati mengganti library atau struktur data kalau tidak dilarang.
  • Tidak punya kriteria selesai. Tanpa kriteria, kamu tidak tahu kapan harus berhenti merevisi.
  • Hanya menguji jalur normal. Coba juga input kosong, berulang, dan ekstrem.

Rangkuman

  • Siklus inti vibe coding: deskripsikan, hasilkan, jalankan, nilai dan arahkan, diulang dalam langkah kecil.
  • Kegagalan paling umum datang dari konteks yang kurang, bukan dari AI yang buruk.
  • Peranmu bergeser dari penulis kode menjadi sutradara yang fokus pada "apa" dan "mengapa".
  • Prompt efektif memuat konteks, tujuan, batasan, contoh, dan kriteria selesai.
  • Kriteria selesai yang diubah menjadi pemeriksaan membuat hasil AI bisa dinilai dengan cepat dan pasti.

Selesaikan bab ini

  1. 1. Baca materi
  2. 2. Latihan kode (1)
  3. 3. Kuis (4 soal)

Latihan kode: Kode dari spesifikasi: tandai barang sudah dibeli

AI menulis toggleDibeli untuk aplikasi daftar belanja, tetapi hasilnya belum sesuai kriteria selesai di prompt. Perbaiki fungsinya sesuai spesifikasi:

  • toggleDibeli(daftar, id) membalik nilai dibeli pada barang dengan id tersebut.
  • Barang yang belum dibeli ada di atas, yang sudah dibeli di bawah. Urutan di dalam tiap kelompok tetap.
  • Array asli dan objek di dalamnya tidak boleh diubah. Kembalikan array baru.
  • Bila id tidak ditemukan, kembalikan daftar dengan isi yang sama tanpa error.

Cek pemahaman

  1. 1Urutan siklus inti vibe coding yang benar adalah...

  2. 2Elemen prompt mana yang menjawab pertanyaan "bagaimana cara mengecek bahwa hasilnya sudah benar"?

  3. 3Menurut deck, kegagalan paling umum dalam vibe coding biasanya disebabkan konteks yang kurang, bukan AI yang buruk.

  4. 4Pada prompt ini, baris mana yang mencegah AI merombak struktur data?

    Konteks: Aplikasi web daftar belanja keluarga, React + Tailwind.
    Tujuan: Tambahkan fitur menandai barang yang sudah dibeli.
    Batasan: Jangan ubah struktur data; simpan di localStorage.
    Contoh: Barang yang dicentang dicoret dan pindah ke bawah daftar.
    Selesai bila: Bisa centang/batal, dan data tetap ada setelah refresh.