Cara Membina Aplikasi dengan Vibe Coding: Daripada Idea kepada Aplikasi Diterbitkan

Untuk membina aplikasi dengan vibe coding, tulis penerangan satu halaman tentang versi pertama, berikannya kepada pembina aplikasi AI sebagai prompt pertama anda, kemudian kembangkan aplikasi dalam langkah kecil yang diuji: data, log masuk, aliran kerja utama, penggilapan, semakan keselamatan dan akhirnya terbitkan. Panduan ini mengikuti satu projek contoh, aplikasi tempahan kelas untuk studio yoga kecil, melalui setiap peringkat, dengan prompt yang digunakan pada setiap langkah.

Jika anda belum pernah membina sesuatu dengan cara ini, tutorial vibe coding untuk pemula kami bermula dengan lebih kecil. Untuk gambaran yang lebih luas yang tidak terikat kepada vibe coding, lihat cara membina aplikasi dengan AI.

Projek

Bayangkan pemilik studio yoga, Sara, yang mengendalikan lapan kelas seminggu. Tempahan datang melalui WhatsApp; dia menyimpan senarai kertas bagi setiap kelas dan sering terlebih tempah. Dia mahu:

• Pelajar melihat jadual minggu itu dan menempah tempat.
• Setiap kelas mempunyai kapasiti.
• Senarai bagi setiap kelas yang boleh dia semak di pintu.
• Pelajar boleh membatalkan sehingga dua jam sebelum.

Itulah keseluruhan versi pertama. Tiada pembayaran, tiada keahlian, tiada kedai aplikasi. Semua itu datang kemudian, atau tidak sama sekali.

Langkah 1: Tulis spesifikasi satu halaman

Sebelum membuka sebarang alat, tuliskan versi pertama dalam kata-kata biasa. Sepuluh minit di sini menjimatkan berjam-jam bolak-balik. Bentuk yang berguna:

• Siapa yang menggunakannya: pelajar (menempah dan membatalkan), Sara (mengurus kelas, melihat senarai).
• Skrin: jadual, butiran kelas, tempahan saya, kelas admin, senarai kelas admin.
• Data: kelas (nama, guru, masa mula, tempoh, kapasiti), tempahan (pelajar, kelas, status), pelajar (nama, e-mel, telefon).
• Peraturan: tiada tempahan untuk kelas penuh; satu tempahan setiap pelajar bagi setiap kelas; batal sehingga dua jam sebelum; hanya Sara boleh melihat halaman admin.
• Tidak dalam v1: pembayaran, pakej kelas, senarai menunggu, peringatan.

Senarai “tidak dalam v1” paling penting. Ia yang memastikan binaan itu boleh disiapkan. Panduan kami tentang menulis dokumen keperluan produk dengan AI pergi lebih jauh jika anda mahukan spesifikasi yang lebih lengkap.

Langkah 2: Pilih alat yang mengendalikan keseluruhan kitaran

Untuk aplikasi dengan pangkalan data, log masuk dan URL awam, gunakan pembina aplikasi AI yang menjalankan kod, melampirkan pangkalan data dan menerbitkan, bukannya pembantu sembang yang menyerahkan fail kepada anda. Perbandingan alat vibe coding kami menyenaraikan pilihannya. Kami akan menggunakan Mythex di sini kerana ia meliputi setiap langkah di satu tempat: sembang, pratonton langsung, pangkalan data sebenar dan storan fail, serta penerbitan dengan satu klik.

Langkah 3: Prompt pertama

Tukar spesifikasi kepada satu perenggan. Jangan tampal keseluruhan dokumen sekaligus dengan setiap butiran; berikan terasnya dan tambah yang lain secara berperingkat.

Bina aplikasi tempahan kelas untuk studio yoga saya. Pelajar mendaftar dengan nama, e-mel dan telefon, melihat jadual minggu ini, dan menempah tempat dalam kelas. Setiap kelas mempunyai nama, guru, masa mula, tempoh dan kapasiti; kelas yang penuh memaparkan “Penuh” dan tidak boleh ditempah. Pelajar melihat tempahan mereka dan boleh membatalkan sehingga dua jam sebelum kelas. Saya admin: saya boleh menambah dan mengedit kelas dan melihat senarai siapa yang telah menempah bagi setiap kelas. Reka bentuk yang tenang dan ringkas yang berfungsi dengan baik di telefon.

Jika anda tidak pasti pembina memahaminya, minta pelan dahulu. Dalam Mythex, mod Plan menggariskan skrin dan data sebelum menulis kod, dan anda meluluskannya.

Langkah 4: Dapatkan gelung teras berfungsi

Gelung teras ialah perkara tunggal yang menjadi tujuan aplikasi itu: pelajar menempah kelas, dan Sara melihatnya. Uji hanya perkara itu:

1. Daftar sebagai pelajar, tempah kelas.
2. Buka paparan admin. Adakah tempahan itu ada di sana?
3. Tempah kelas yang sama sekali lagi. Ia sepatutnya menolak.
4. Tetapkan kapasiti kelas kepada 2, tempah dari dua akaun pelajar, cuba yang ketiga.

Dua masalah biasanya muncul pada peringkat ini. Jadual memaparkan masa mengikut zon masa pelayan, bukan studio. Dan semakan “Penuh” hanya berlaku di halaman, jadi klik dua kali dengan pantas boleh mencipta dua tempahan.

Paparkan semua masa kelas dalam zon masa studio, [Asia/Dubai], tanpa mengira tetapan peranti pelawat.

Semak kapasiti dan tempahan pendua di pelayan apabila tempahan dicipta, bukan hanya dalam halaman. Jika dua permintaan tiba serentak untuk tempat terakhir, hanya satu sepatutnya berjaya.

Betulkan gelung teras sebelum menambah apa-apa. Semua yang lain bergantung padanya.

Langkah 5: Tambah baki peraturan, satu setiap mesej

Kini semak peraturan dalam spesifikasi satu demi satu:

Pelajar boleh membatalkan tempahan sehingga dua jam sebelum kelas bermula. Selepas itu, sembunyikan butang batal dan tolak pembatalan di pelayan dengan mesej yang jelas.

Hanya akaun saya boleh membuka halaman admin. Pastikan ini disemak di pelayan bagi setiap tindakan admin, bukan hanya dengan menyembunyikan menu.

Selepas setiap satu, uji, dan teruskan hanya apabila ia berfungsi. Jika satu perubahan merosakkan sesuatu, kembali ke pusat semakan yang baik terakhir dan cuba permintaan yang lebih jelas daripada menimbun pembetulan di atasnya.

Langkah 6: Gilapkan apa yang akan diperhatikan oleh pengguna sebenar

Pengguna sebenar perasan perkara kecil. Senarai ringkas untuk aplikasi Sara:

• Keadaan kosong: “Tiada kelas lagi minggu ini” dan bukannya halaman kosong.
• Pengesahan: “Anda telah ditempah untuk Vinyasa, Selasa 18:00” selepas tempahan.
• Susun atur telefon: butang besar, jadual boleh dibaca pada skrin 375px.
• Tempat yang tinggal: “3 tempat tinggal” pada setiap kad kelas, supaya pelajar menempah lebih awal.

Pada setiap kad kelas, tunjukkan tempat yang tinggal, contohnya “3 daripada 12 tinggal”. Selepas tempahan, paparkan pengesahan dengan nama kelas, hari dan masa, serta butang ke tempahan saya.

Langkah 7: Uji seperti orang asing

Sebelum sesiapa lain menggunakannya, luangkan setengah jam cuba memecahkannya:

Anda juga boleh meminta AI melalui kes tepi:

Senaraikan sepuluh perkara yang pelajar sebenar boleh lakukan yang mungkin merosakkan tempahan atau pembatalan, uji setiap satu dan betulkan yang gagal. Beritahu saya apa yang anda tukar.

Langkah 8: Semakan keselamatan

Aplikasi ini menyimpan nama, e-mel dan nombor telefon, jadi semakan keselamatan ringkas berbaloi. Soalan utamanya:

• Bolehkah seorang pelajar melihat tempahan atau butiran hubungan pelajar lain?
• Adakah sebarang kunci atau kata laluan dalam kod yang berjalan dalam pelayar?
• Adakah borang pendaftaran dilindungi daripada bot?
• Adakah ada sandaran data?

Halaman kami tentang sama ada vibe coding selamat menerangkan setiap semakan dan memberikan prompt untuknya, dan senarai semak keselamatan untuk aplikasi yang dibina dengan AI ialah versi panjangnya.

Langkah 9: Terbitkan

Apabila gelung teras, peraturan dan semakan lulus, terbitkan. Pada Mythex ia satu klik, dan aplikasi mendapat URL awam dengan pangkalan data serta hosting sedia ada. Pada Pro, anda boleh menyambungkan domain sendiri, seperti book.sarasyoga.com; lihat cara menyambungkan domain tersuai.

Sebelum anda menghantar pautan itu, semak versi yang diterbitkan sekali lagi. Tempah kelas dari telefon anda. Pengeluaran dan pratonton sepatutnya berkelakuan sama, tetapi sahkan.

Langkah 10: Pengguna pertama dan versi seterusnya

Beri pautan kepada lima pelajar tetap dahulu, bukan semua sekali. Minta mereka menempah kelas seterusnya melalui pautan itu dan beritahu anda apa yang mengelirukan. Kemudian betulkan tiga perkara teratas yang mereka sebutkan.

Selepas beberapa minggu penggunaan sebenar, senarai v2 untuk aplikasi seperti ini biasanya tertulis dengan sendirinya: senarai menunggu untuk kelas penuh, peringatan e-mel pada waktu petang sebelumnya, dan pakej kelas yang dibayar secara dalam talian. Setiap satu mendapat layanan yang sama: nyatakannya dalam beberapa baris, berikan prompt, uji, terbitkan. Untuk menambah pembayaran, lihat cara menambah pembayaran pada aplikasi anda. Untuk mendapatkan perhatian, cara melancarkan aplikasi dan mendapatkan pengguna pertama.

Menukarnya menjadi aplikasi telefon

Banyak studio mahu ikon di telefon pelajar mereka. Pada Mythex Pro, aplikasi yang diterbitkan boleh menjadi aplikasi Android (fail yang boleh anda muat naik ke Google Play) dan aplikasi iPhone yang dihantar ke TestFlight dengan kunci App Store Connect anda sendiri, tanpa Mac. Aplikasi telefon itu membuka aplikasi web yang diterbitkan, jadi setiap kali anda menerbitkan kemas kini, aplikasi telefon turut memilikinya.

Apa yang perlu dibawa pulang

Binaan itu sendiri ialah bahagian yang pendek. Yang menjadikan aplikasi itu boleh digunakan ialah senarai “tidak dalam v1” dalam spesifikasi, menguji gelung teras sebelum apa-apa lain, peraturan di pelayan untuk kapasiti dan akses, dan lima pengguna sebenar sebelum lima puluh. Itulah rupa vibe coding apabila aplikasi perlu berfungsi untuk orang lain.

Bersedia untuk mencuba sendiri? Tulis spesifikasi satu halaman anda, kemudian tampalkan perenggan pertama ke dalam pembina aplikasi AI. Jika anda ingin melihat lebih banyak jenis aplikasi dan prompt di sebaliknya, baca contoh vibe coding kami.

Soalan lazim