Memahami Kode Buatan AI Tanpa Jadi Programmer

Di Level 1 jalur Vibe Coding, kamu membuat aplikasi yang jalan. Di level ini, aplikasinya mulai sungguhan: ada data, ada pengguna, ada fitur yang saling bergantung. Di titik ini, “yang penting jalan” mulai tidak cukup. Saat ada bug, AI butuh arahan. Saat AI mengubah sesuatu, kamu perlu tahu apakah perubahannya masuk akal.

Kabar baiknya, memahami kode tidak sama dengan bisa menulisnya. Kamu bisa membaca kontrak sewa tanpa menjadi ahli hukum, asalkan tahu pasal mana yang mengatur apa. Begitu juga dengan kode. Tutorial ini mengajarkan cara membaca kode buatan AI dalam enam langkah, dengan contoh dari aplikasi pencatat pengeluaran yang sudah kita buat.

Tiga tingkat pemahaman yang cukup

Kamu tidak perlu paham setiap baris. Targetkan tiga tingkat ini:

1. Peta. File apa saja yang ada, dan apa tugas masing-masing.
2. Alur. Apa yang terjadi, langkah demi langkah, saat pengguna melakukan sesuatu (misalnya menekan tombol).
3. Titik rawan. Bagian mana yang menyentuh data, uang, atau hak akses, karena kesalahan di situ paling mahal.

Kalau ketiganya sudah kamu pegang, kamu bisa memberi instruksi yang tepat ke AI, mengenali perubahan yang mencurigakan, dan menjelaskan aplikasimu ke developer kalau suatu saat butuh bantuan.

Langkah 1: Minta peta proyek

Mulailah dari gambaran besar. Minta AI membuat peta, bukan penjelasan baris per baris:

Buat peta proyek ini untuk pemula yang belum bisa ngoding:
1. Daftar file dan folder penting, masing-masing dengan tugasnya dalam satu kalimat.
2. Di mana data disimpan, dan bagaimana aplikasi membacanya.
3. Bagian mana yang paling berisiko kalau diubah, dan kenapa.
Jangan ubah kode apa pun.

Simpan jawabannya di file CATATAN.md di proyekmu. Peta ini berguna lagi nanti, untuk dirimu sendiri dan sebagai konteks untuk AI di sesi berikutnya.

Langkah 2: Telusuri satu alur dari awal sampai akhir

Pilih satu aksi pengguna, lalu ikuti jejaknya di kode. Untuk aplikasi pencatat pengeluaran, aksinya adalah menekan tombol Catat. Di kodenya, jejak itu terlihat seperti ini:

// 1. Saat form dikirim (tombol Catat ditekan)...
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  // 2. ...ambil isi kolom keterangan dan jumlah
  const keterangan = document.getElementById('keterangan').value.trim();
  const jumlah = Number(document.getElementById('jumlah').value);
  // 3. ...tolak kalau isinya tidak valid
  if (!keterangan || !Number.isInteger(jumlah) || jumlah <= 0) return;
  // 4. ...tambahkan ke daftar catatan, lalu simpan
  const semua = muat();
  semua.push({ id: Date.now(), tanggal: hariIni(), keterangan, jumlah });
  simpan(semua);
  // 5. ...kosongkan form, lalu gambar ulang daftar dan total
  e.target.reset();
  document.getElementById('keterangan').focus();
  tampilkan();
});

Komentar bernomor di atas adalah bentuk pemahaman yang kita cari: kalimat biasa untuk setiap langkah. Kalau AI belum menuliskannya, minta: “Tambahkan komentar bernomor dalam bahasa Indonesia yang menjelaskan alur saat tombol Catat ditekan. Jangan ubah logikanya.”

Setelah satu alur dipahami, alur lain jauh lebih mudah, karena aplikasi biasanya memakai pola yang sama berulang-ulang.

Langkah 3: Kenali kosakata minimum

Sebagian besar kode, dalam bahasa apa pun, tersusun dari beberapa konsep yang sama. Kenali bentuknya, dan kamu bisa membaca garis besar hampir semua kode:

Untuk aplikasi yang terhubung ke server, tambahkan dua istilah lagi: request (permintaan yang dikirim ke server) dan response (jawaban dari server).

Langkah 4: Baca perubahannya, bukan seluruh kodenya

Setiap kali AI mengubah kode, jangan langsung terima. Lihat apa yang berubah. Di editor dengan AI, perubahan biasanya ditampilkan berwarna: hijau untuk baris baru, merah untuk baris yang dihapus. Kalau proyekmu memakai Git, perintah git diff menampilkan hal yang sama. (Belum memakai Git? Baca Git dan GitHub untuk kerja tim.)

Kamu tidak perlu memahami setiap baris yang berubah. Cukup periksa lima hal ini:

1. File mana yang berubah? Kalau kamu minta mengubah warna tombol, tapi file yang mengatur penyimpanan data ikut berubah, tanyakan kenapa.
2. Ada yang dihapus? Baris merah dalam jumlah besar perlu dicurigai. Fitur lama bisa ikut hilang.
3. Ada library baru? Perhatikan perubahan di package.json atau requirements.txt. Setiap library baru perlu dicek: apakah memang ada, populer, dan masih dirawat?
4. Ada kunci rahasia? Pastikan tidak ada API key atau password yang tiba-tiba muncul di kode. Lihat environment variable dan secrets.
5. Ukurannya masuk akal? Fitur kecil seharusnya menghasilkan perubahan kecil. Contohnya ada di artikel satu fitur sekali jalan: fitur “total bulan ini” hanya mengubah sekitar delapan baris.

Langkah 5: Uji pemahamanmu dengan menebak

Cara tercepat untuk tahu apakah kamu benar-benar paham: tebak dulu, baru jalankan.

• Sebelum menekan tombol, tebak apa yang akan terjadi. Kalau tebakanmu meleset, ada bagian yang belum kamu pahami, dan itu bagus untuk ditanyakan.
• Ubah sendiri hal kecil yang aman, misalnya teks judul atau warna tombol. Kalau kamu tahu harus mengubah di mana dan hasilnya sesuai dugaan, berarti petamu sudah benar.
• Lihat apa yang terjadi di balik layar. Tekan F12, buka tab Console, lalu ketik localStorage dan tekan Enter. Kamu bisa melihat data aplikasi pencatat pengeluaran yang tersimpan di browser.

Langkah 6: Bertanya dengan pertanyaan yang tepat

Pertanyaan yang baik membuat AI menjelaskan, bukan sekadar menulis ulang kode:

• “Jelaskan fungsi tampilkan() baris per baris, dengan bahasa sederhana.”
• “Apa yang terjadi kalau pengguna mengisi jumlah dengan huruf?”
• “Asumsi apa saja yang dibuat kode ini? Kapan asumsi itu bisa salah?”
• “Kalau saya ingin mengubah X, bagian mana saja yang ikut terdampak?”

Satu peringatan: AI bisa menjelaskan dengan sangat meyakinkan, dan tetap salah. Kalau penjelasannya penting, buktikan dengan menjalankan aplikasinya. Penjelasan yang tidak cocok dengan perilaku aplikasi berarti salah satunya keliru.

Tanda-tanda yang perlu dicurigai

Saat membaca kode atau perubahan dari AI, berhenti dan tanyakan kalau menemukan:

• password, token, atau API key yang ditulis langsung di kode,
• innerHTML atau sejenisnya untuk menampilkan teks dari pengguna (lihat XSS dan CSRF),
• query database yang digabung dengan input pengguna (lihat SQL injection),
• pemeriksaan keamanan yang dimatikan atau di-comment “sementara”,
• kode yang menangkap semua error lalu diam saja, sehingga masalah tersembunyi,
• file baru atau library yang tidak pernah kamu minta.

Pertanyaan yang sering diajukan

Haruskah saya belajar bahasa pemrograman dulu?

Tidak harus untuk memulai, tapi belajar dasar-dasarnya sangat membantu. Setelah terbiasa membaca kode dengan cara di atas, belajar dasar JavaScript atau Python akan terasa jauh lebih ringan, karena konsepnya sudah kamu kenal. Kalau ingin mulai, ikuti jalur Mulai Ngoding dari Nol.

Bagaimana kalau proyeknya sudah terlalu besar untuk dipahami?

Jangan coba memahami semuanya sekaligus. Mulai dari peta (langkah 1), lalu pahami hanya alur yang sedang kamu kerjakan. Kalau proyek terasa terlalu besar untuk dipahami siapa pun, termasuk AI, itu tanda proyeknya mulai menabrak masalah 70%.

Apakah komentar di kode perlu dipertahankan?

Ya, untuk bagian yang tidak langsung jelas. Komentar yang menjelaskan kenapa sesuatu dibuat seperti itu sangat berharga, baik untukmu nanti maupun untuk AI di sesi berikutnya.

Kesimpulan

Kamu tidak perlu bisa menulis setiap baris kode. Yang perlu: tahu peta proyeknya, bisa menelusuri satu alur dari aksi pengguna sampai data tersimpan, mengenali kosakata dasarnya, dan membaca setiap perubahan sebelum menerimanya. Dengan begitu, kamu yang memimpin AI, bukan sebaliknya.

Langkah berikutnya di jalur Vibe Coding: kebiasaan yang membuat perubahan tetap kecil dan bisa diperiksa, yaitu satu fitur sekali jalan.