Vibe Coding untuk Pemula: Cara Bermula, Langkah demi Langkah

Vibe coding untuk pemula terdiri daripada lima langkah: pilih alat yang menjalankan aplikasi untuk anda, terangkan satu aplikasi kecil dengan perkataan biasa, cuba seperti pengguna, minta satu pembetulan pada satu masa, dan terbitkan apabila ia berfungsi. Anda tidak perlu tahu menulis kod. Tutorial ini menerangkan setiap langkah dengan projek pertama yang sebenar, prompt tepat untuk ditaip, dan kesilapan yang hampir semua pemula lakukan pada minggu pertama.

Jika anda mahu latar belakang dahulu, iaitu dari mana istilah ini datang dan mengapa orang berdebat tentangnya, baca apa itu vibe coding. Halaman ini mengenai sisi praktikal.

Apa yang anda perlukan sebelum bermula

Lebih sedikit daripada yang anda sangka:

• Pelayar dan akaun dengan alat vibe coding. Pemula patut memilih pembina aplikasi AI, yang menulis kod, menjalankannya dan mengehosnya, bukannya pembantu pengekodan yang mengharapkan anda mengurus fail dan pelayan sendiri.
• Satu idea kecil. Bukan startup anda. Alat untuk satu orang (anda) dengan satu atau dua skrin.
• Satu atau dua jam tanpa gangguan. Sesi pertama mengajar anda rentaknya.

Itu sahaja. Tiada pemasangan, tiada kursus pengaturcaraan, tiada terminal.

Alat mana yang dipilih sebagai pemula

Alat itu kurang penting berbanding tabiat, tetapi ia perlu melakukan tiga perkara: menunjukkan pratonton langsung semasa membina, membolehkan anda membuat asal perubahan yang buruk, dan menerbitkan ke pautan yang boleh dikongsi. Perbandingan kami tentang alat vibe coding terbaik membincangkan pilihan utama dengan jujur. Mythex salah satunya: anda menerangkan aplikasi dalam sembang, ia membina aplikasi full-stack sebenar dengan pratonton langsung, menambah pangkalan data apabila aplikasi perlu mengingati sesuatu, dan menerbitkan dengan satu klik. Pelan Free tidak memerlukan kad.

Langkah 1: Pilih projek pertama yang boleh anda siapkan

Pemula biasanya gagal kerana menyasarkan terlalu besar. Projek pertama yang baik:

• Berguna kepada anda sendiri, jadi anda akan mengujinya dengan betul.
• Muat pada satu atau dua skrin.
• Menyimpan sedikit data anda sendiri.
• Tiada pembayaran, tiada pasukan dan tiada data peribadi sensitif.

Projek pertama yang baik:

Kita akan menggunakan senarai bacaan dalam baki tutorial ini.

Langkah 2: Tulis prompt pertama anda

Mesej pertama anda menentukan bentuk segala-galanya. Katakan untuk siapa, apa yang ia lakukan dan rupanya. Kekalkan dalam satu perenggan pendek.

Prompt pertama yang lemah:

Buatkan saya aplikasi buku.

Prompt pertama yang baik:

Bina aplikasi senarai bacaan untuk saya. Saya boleh menambah buku dengan tajuk, pengarang dan status (nak baca, sedang baca, tamat). Tunjukkan buku sebagai kad yang dikumpulkan mengikut status, yang terbaru dahulu. Saya boleh menukar status buku atau memadamnya. Biar bersih dan ringkas: latar putih, satu warna aksen, berfungsi pada telefon saya. Simpan buku supaya masih ada selepas saya muat semula.

Perhatikan apa yang dilakukan prompt kedua. Ia menyenaraikan medan, tindakan, susun atur dan satu peraturan yang sentiasa dilupakan pemula: simpan data supaya ia kekal selepas muat semula. Tanpa baris itu, banyak alat membina halaman yang nampak siap tetapi melupakan segala-galanya apabila dimuat semula.

Untuk lebih banyak titik permulaan, lihat cheat sheet prompt vibe coding kami.

Minta pelan apabila anda tidak pasti

Jika anda tidak pasti cara menerangkan sesuatu, minta AI merancang sebelum membina:

Sebelum membina apa-apa, beritahu saya dengan perkataan biasa skrin yang akan anda buat, data yang akan disimpan dan apa-apa yang perlu saya putuskan.

Dalam Mythex inilah fungsi mod Plan: ejen menyusun pendekatan dan anda meluluskannya sebelum sebarang fail diubah.

Langkah 3: Uji seperti pengguna, bukan seperti pembinanya

Apabila pratonton muncul, jangan sekadar mengaguminya. Gunakannya:

1. Tambah tiga buku, termasuk satu dengan tajuk yang sangat panjang.
2. Tukar satu status. Adakah kad berpindah ke kumpulan yang betul?
3. Muat semula halaman. Adakah buku-buku itu masih ada?
4. Cuba tambah buku dengan tajuk kosong. Apa yang berlaku?
5. Buka pratonton pada telefon anda, atau sempitkan tetingkap pelayar.

Catat apa yang salah dengan perkataan biasa. "Tajuk panjang merosakkan susun atur kad" ialah laporan pepijat yang sempurna. "Ia rosak" bukan.

Langkah 4: Betulkan satu perkara bagi setiap mesej

Ini tabiat yang membezakan orang yang menyiapkan projek daripada yang berputus asa. Hantar satu perubahan, semak, kemudian hantar yang seterusnya.

Tajuk panjang "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" melimpah keluar daripada kad. Lipat tajuk panjang kepada dua baris dan potong selebihnya dengan "…".

Kemudian:

Jika saya hantar borang dengan tajuk kosong, tiada apa berlaku dan tiada mesej. Tunjukkan "Tambah tajuk" di bawah medan dan jangan simpan buku itu.

Mengapa satu demi satu? Apabila anda meminta lima perubahan dalam satu mesej, AI mungkin melakukan empat dengan baik dan secara senyap merosakkan sesuatu yang lain, dan anda tidak tahu perubahan mana yang menyebabkannya. Langkah kecil juga menjadikan undo berguna: jika satu perubahan tersasar, kembali ke versi sebelumnya dan cuba permintaan yang lebih jelas.

Apabila sesuatu rosak

Ia pasti berlaku. Setiap pembina menemui ralat. Salin teks ralat yang tepat, atau terangkan dengan tepat apa yang anda klik dan apa yang anda lihat, dan tampal semula:

Apabila saya klik Padam pada kad, saya nampak "Something went wrong" dan buku itu kekal. Cari puncanya dan betulkan. Beritahu saya apa puncanya.

Meminta punca itu penting. Ia mengajar anda cara aplikasi berfungsi, dan menghalang AI daripada meneka. Panduan kami tentang cara debug aplikasi yang dibina AI menyelami lebih dalam.

Langkah 5: Jadikan ia milik anda

Setelah ia berfungsi, tambah baiknya dengan langkah kecil yang sama:

• "Tambah penilaian bintang 1–5 yang dipaparkan pada buku yang tamat."
• "Tambah kotak carian di atas kad yang menapis mengikut tajuk atau pengarang."
• "Guna latar putih gading yang hangat dan aksen hijau gelap."
• "Tambah pembilang di atas: buku yang tamat tahun ini."

Setiap satu ialah perubahan tunggal yang boleh diuji.

Langkah 6: Terbitkan dan kongsi

Apabila ia melakukan apa yang anda perlukan, terbitkannya. Pada Mythex ia satu klik, dan anda mendapat URL awam yang boleh dibuka pada mana-mana peranti atau dihantar kepada rakan. Jika kemudian anda mahu domain sendiri, itu ciri Pro, dan panduan kami tentang menyambung domain tersuai menerangkannya.

Sebelum berkongsi dengan lebih daripada beberapa rakan, baca adakah vibe coding selamat?. Untuk senarai bacaan peribadi, risikonya rendah. Untuk aplikasi di mana orang asing mendaftar dan menyimpan data, ada semakan yang perlu anda lakukan dahulu.

Kesilapan pemula yang perlu dielakkan

• Meminta semuanya sekaligus. "Bina Goodreads untuk saya" menghasilkan sesuatu yang nampak mengagumkan tetapi berfungsi buruk. Mulakan dengan versi berguna yang paling kecil.
• Tidak menguji muat semula. Data yang hilang apabila dimuat semula ialah kejutan pemula yang paling biasa.
• Menulis semula permintaan dari awal setiap kali. Katakan apa yang perlu diubah dan apa yang perlu dikekalkan: "Kekalkan susun atur, ubah warna sahaja."
• Mempercayai "sudah dibetulkan." AI sering mengatakan pepijat sudah dibetulkan. Semak sendiri setiap kali.
• Menampal kata laluan atau kunci API dalam sembang. Jika aplikasi anda memerlukan kunci untuk perkhidmatan luar, letakkan dalam tetapan rahsia alat itu, jangan sekali-kali dalam mesej atau dalam kod. Lihat cara memastikan kunci API selamat.
• Berhenti selepas ralat pertama. Ralat adalah normal. Tampal semula dan tanya puncanya.

Apa yang perlu dipelajari sambil jalan

Anda tidak perlukan kursus, tetapi beberapa konsep akan menjadikan setiap permintaan lebih tajam. Minta AI menerangkannya dalam konteks aplikasi anda sendiri:

• Frontend dan backend: apa yang berjalan dalam pelayar pelawat berbanding di pelayan. (Frontend vs backend)
• Pangkalan data: tempat aplikasi anda menyimpan datanya. (Apa itu pangkalan data?)
• Pengesahan: cara aplikasi mengetahui siapa seseorang itu.
• Rahsia: kunci peribadi yang digunakan aplikasi dan tidak boleh dilihat pelawat.

Prompt yang baik untuk ini: "Terangkan bagaimana senarai bacaan saya menyimpan buku, dari klik Tambah hingga data disimpan. Guna perkataan biasa dan rujuk fail sebenar."

Projek kedua dan ketiga anda

Selepas aplikasi pertama, pilih sesuatu yang satu langkah lebih sukar. Penjejak tabiat dengan carta mingguan. Borang tempahan yang menghantar e-mel kepada anda. Papan pemuka kecil yang membaca daripada Google Sheet. Contoh vibe coding kami menunjukkan jenis aplikasi sebenar dengan prompt di sebaliknya dan apa yang silap, dan cara membina aplikasi dengan vibe coding membawa projek yang lebih besar dari idea hingga aplikasi terbitan dengan pengguna.

Apabila anda sedia untuk bermula, buka pembina aplikasi AI, tampal prompt senarai bacaan di atas, dan ubah kepada idea anda sendiri.

Soalan lazim