Vibe Coding untuk Pemula: Cara Memulai, Langkah demi Langkah

Vibe coding untuk pemula terdiri dari lima langkah: pilih alat yang menjalankan aplikasi untukmu, jelaskan satu aplikasi kecil dengan kata-kata biasa, cobalah seperti pengguna, minta satu perbaikan dalam satu waktu, dan publikasikan saat sudah berfungsi. Kamu tidak perlu bisa coding. Tutorial ini menelusuri tiap langkah dengan proyek pertama yang nyata, prompt persis yang perlu diketik, dan kesalahan yang hampir semua pemula buat di minggu pertamanya.

Jika kamu ingin latar belakangnya dulu — dari mana istilah ini berasal dan mengapa orang memperdebatkannya — baca apa itu vibe coding. Halaman ini membahas sisi praktisnya.

Yang kamu butuhkan sebelum mulai

Lebih sedikit dari yang kamu kira:

• Browser dan akun di alat vibe coding. Pemula sebaiknya memilih pembuat aplikasi AI, yang menulis kode, menjalankan, dan meng-host-nya, bukan asisten coding yang mengharapkanmu mengelola file dan server sendiri.
• Satu ide kecil. Bukan startup-mu. Alat untuk satu orang (kamu) dengan satu atau dua layar.
• Satu atau dua jam tanpa gangguan. Sesi pertama mengajarkan iramanya.

Itu saja. Tanpa instalasi, tanpa kursus pemrograman, tanpa terminal.

Alat mana yang dipilih sebagai pemula

Alatnya kurang penting dibanding kebiasaannya, tetapi harus bisa tiga hal: menampilkan pratinjau langsung saat membangun, membiarkanmu membatalkan perubahan yang buruk, dan mempublikasikan ke tautan yang bisa dibagikan. Perbandingan kami tentang alat vibe coding terbaik membahas opsi utamanya secara jujur. Mythex adalah salah satunya: kamu menjelaskan aplikasi lewat chat, ia membangun aplikasi full-stack sungguhan dengan pratinjau langsung, menambahkan database saat aplikasi perlu mengingat sesuatu, dan mempublikasikan dengan satu klik. Paket Free tanpa kartu.

Langkah 1: Pilih proyek pertama yang bisa kamu selesaikan

Pemula biasanya gagal karena membidik terlalu besar. Proyek pertama yang baik:

• Berguna bagimu secara pribadi, sehingga kamu akan mengujinya dengan serius.
• Muat di satu atau dua layar.
• Menyimpan sedikit data milikmu sendiri.
• Tanpa pembayaran, tanpa tim, dan tanpa data pribadi sensitif.

Proyek pertama yang bagus:

Kita akan memakai daftar bacaan di sisa tutorial ini.

Langkah 2: Tulis prompt pertamamu

Pesan pertamamu menentukan bentuk semuanya. Sebutkan untuk siapa, apa yang dilakukannya, dan seperti apa tampilannya. Cukup satu paragraf pendek.

Prompt pertama yang lemah:

Buatkan aku aplikasi buku.

Prompt pertama yang baik:

Buatkan aku aplikasi daftar bacaan. Aku bisa menambah buku dengan judul, penulis, dan status (ingin dibaca, sedang dibaca, selesai). Tampilkan buku sebagai kartu yang dikelompokkan menurut status, yang terbaru di atas. Aku bisa mengubah status buku atau menghapusnya. Buat bersih dan sederhana: latar putih, satu warna aksen, berfungsi di ponselku. Simpan bukunya agar tetap ada setelah aku refresh.

Perhatikan apa yang dilakukan yang kedua. Ia menyebut kolom, tindakan, tata letak, dan satu aturan yang selalu dilupakan pemula: simpan data agar bertahan setelah refresh. Tanpa kalimat itu, banyak alat membuat halaman yang tampak selesai tetapi lupa semuanya saat dimuat ulang.

Untuk titik awal lainnya, lihat contekan prompt vibe coding kami.

Minta rencana saat kamu ragu

Jika kamu tidak yakin cara menjelaskan sesuatu, minta AI merencanakan sebelum membangun:

Sebelum membangun apa pun, jelaskan dengan kata-kata biasa layar apa yang akan kamu buat, data apa yang akan kamu simpan, dan hal apa saja yang perlu kuputuskan.

Di Mythex, inilah gunanya mode Plan: agen menyusun pendekatan dan kamu menyetujuinya sebelum file apa pun berubah.

Langkah 3: Uji seperti pengguna, bukan seperti orang yang membuatnya

Saat pratinjau muncul, jangan hanya mengaguminya. Pakai:

1. Tambahkan tiga buku, termasuk satu dengan judul yang sangat panjang.
2. Ubah satu status. Apakah kartunya pindah ke kelompok yang benar?
3. Refresh halaman. Apakah bukunya masih ada?
4. Coba tambah buku dengan judul kosong. Apa yang terjadi?
5. Buka pratinjau di ponselmu, atau persempit jendela browser.

Tulis apa yang salah dengan kata-kata biasa. "Judul panjang merusak tata letak kartu" adalah laporan bug yang sempurna. "Rusak" bukan.

Langkah 4: Perbaiki satu hal per pesan

Ini kebiasaan yang membedakan orang yang menyelesaikan dari orang yang menyerah. Kirim satu perubahan, periksa, lalu kirim berikutnya.

Judul panjang "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" meluap dari kartu. Bungkus judul panjang menjadi dua baris dan potong sisanya dengan "…".

Lalu:

Jika aku mengirim formulir dengan judul kosong, tidak terjadi apa-apa dan tidak ada pesan. Tampilkan "Tambahkan judul" di bawah kolom dan jangan simpan bukunya.

Mengapa satu per satu? Saat kamu meminta lima perubahan dalam satu pesan, AI mungkin mengerjakan empat dengan baik dan diam-diam merusak hal lain, dan kamu tidak tahu perubahan mana penyebabnya. Langkah kecil juga membuat undo berguna: jika satu perubahan salah, kembalikan ke versi tepat sebelumnya dan coba permintaan yang lebih jelas.

Saat sesuatu rusak

Pasti akan rusak. Setiap pembuat aplikasi menemui error. Salin teks error persisnya, atau jelaskan persis apa yang kamu klik dan apa yang kamu lihat, lalu tempel kembali:

Saat aku klik Hapus pada kartu, muncul "Something went wrong" dan bukunya tetap ada. Cari tahu penyebabnya dan perbaiki. Beri tahu aku apa penyebabnya.

Meminta penyebab itu penting. Itu mengajarkanmu cara kerja aplikasi, dan mencegah AI menebak-nebak. Panduan kami tentang cara men-debug aplikasi buatan AI membahasnya lebih dalam.

Langkah 5: Jadikan milikmu

Setelah berfungsi, tingkatkan dengan langkah kecil yang sama:

• "Tambahkan rating bintang 1–5 yang tampil pada buku yang sudah selesai."
• "Tambahkan kotak pencarian di atas kartu yang memfilter menurut judul atau penulis."
• "Pakai latar putih gading hangat dan aksen hijau tua."
• "Tambahkan penghitung di atas: buku yang selesai tahun ini."

Masing-masing adalah satu perubahan yang bisa diuji.

Langkah 6: Publikasikan dan bagikan

Saat sudah melakukan yang kamu butuhkan, publikasikan. Di Mythex itu satu klik, dan kamu mendapat URL publik yang bisa dibuka di perangkat apa pun atau dikirim ke teman. Jika nanti kamu ingin domain sendiri, itu fitur Pro, dan panduan kami tentang menghubungkan domain kustom menjelaskannya.

Sebelum membagikan lebih dari sekadar ke beberapa teman, baca apakah vibe coding aman?. Untuk daftar bacaan pribadi risikonya rendah. Untuk aplikasi tempat orang asing mendaftar dan menyimpan data, ada pemeriksaan yang harus dilakukan lebih dulu.

Kesalahan pemula yang harus dihindari

• Meminta semuanya sekaligus. "Buatkan Goodreads" menghasilkan sesuatu yang tampak mengesankan tetapi bekerja buruk. Mulailah dari versi paling kecil yang berguna.
• Tidak menguji refresh. Data yang hilang saat dimuat ulang adalah kejutan pemula yang paling umum.
• Menulis ulang permintaan dari nol setiap kali. Katakan apa yang diubah dan apa yang dipertahankan: "Pertahankan tata letak, hanya ubah warnanya."
• Memercayai "sudah diperbaiki." AI sering mengatakan bug sudah diperbaiki. Periksa sendiri setiap kali.
• Menempelkan kata sandi atau kunci API ke chat. Jika aplikasimu butuh kunci untuk layanan luar, taruh di pengaturan secret alat, jangan di pesan atau kode. Lihat cara menjaga kunci API tetap aman.
• Berhenti setelah error pertama. Error itu normal. Tempel kembali dan tanyakan penyebabnya.

Yang perlu dipelajari sambil jalan

Kamu tidak butuh kursus, tetapi beberapa konsep akan membuat setiap permintaan lebih tajam. Minta AI menjelaskannya dalam konteks aplikasimu sendiri:

• Frontend dan backend: apa yang berjalan di browser pengunjung versus di server. (Frontend vs backend)
• Database: tempat aplikasimu menyimpan datanya. (Apa itu database?)
• Autentikasi: bagaimana aplikasi tahu siapa seseorang.
• Secret: kunci privat yang dipakai aplikasi dan tidak boleh terlihat pengunjung.

Prompt yang bagus untuk ini: "Jelaskan bagaimana daftar bacaanku menyimpan buku, dari klik Tambah sampai data tersimpan. Pakai kata-kata biasa dan rujuk file yang sebenarnya."

Proyek kedua dan ketigamu

Setelah aplikasi pertama, pilih sesuatu yang satu tingkat lebih sulit. Pelacak kebiasaan dengan diagram mingguan. Formulir booking yang mengirim email kepadamu. Dashboard kecil yang membaca dari Google Sheet. Contoh vibe coding kami menunjukkan jenis aplikasi nyata dengan prompt di baliknya dan apa yang salah, dan cara membuat aplikasi dengan vibe coding membawa proyek yang lebih besar dari ide sampai aplikasi terpublikasi dengan pengguna.

Saat siap memulai, buka pembuat aplikasi AI, tempel prompt daftar bacaan di atas, dan ubah menjadi ideamu sendiri.

Pertanyaan