วิธีสร้างแอปด้วย Vibe Coding: จากไอเดียสู่แอปที่เผยแพร่แล้ว

การสร้างแอปด้วย vibe coding ให้เขียนคำอธิบายเวอร์ชันแรกของแอปหนึ่งหน้า ส่งให้เครื่องมือสร้างแอป AI เป็นพรอมต์แรก แล้วค่อยๆ ขยายแอปทีละขั้นที่ผ่านการทดสอบ ได้แก่ ข้อมูล การล็อกอิน ขั้นตอนหลักของการใช้งาน การขัดเกลา การตรวจสอบความปลอดภัย และสุดท้ายคือการเผยแพร่ คู่มือนี้ติดตามโปรเจกต์ตัวอย่างหนึ่งคือแอปจองคลาสสำหรับสตูดิโอโยคะขนาดเล็ก ผ่านทุกขั้นตอน พร้อมพรอมต์ที่ใช้ในแต่ละขั้น

หากคุณไม่เคยสร้างอะไรแบบนี้มาก่อน บทแนะนำ vibe coding สำหรับผู้เริ่มต้น ของเราเริ่มจากสิ่งที่เล็กกว่า และหากต้องการภาพรวมกว้างๆ ที่ไม่ผูกกับ vibe coding ดู วิธีสร้างแอปด้วย AI

โปรเจกต์

ลองจินตนาการถึงเจ้าของสตูดิโอโยคะชื่อซาร่า ที่จัดคลาส 8 คลาสต่อสัปดาห์ การจองมาทาง WhatsApp เธอเก็บรายชื่อกระดาษต่อคลาส และมักรับจองเกิน เธอต้องการ:

• ให้นักเรียนดูตารางเรียนของสัปดาห์และจองที่นั่งได้
• ให้แต่ละคลาสมีความจุที่กำหนดไว้
• มีรายชื่อต่อคลาสที่เธอตรวจได้หน้าประตู
• ให้นักเรียนยกเลิกได้ก่อนเริ่มคลาสสองชั่วโมง

นั่นคือเวอร์ชันแรกทั้งหมด ไม่มีการชำระเงิน ไม่มีสมาชิกภาพ ไม่มีแอปสโตร์ สิ่งเหล่านั้นจะมาทีหลัง หรืออาจไม่มีเลย

ขั้นที่ 1: เขียนสเปกหนึ่งหน้า

ก่อนเปิดเครื่องมือใดๆ ให้เขียนเวอร์ชันแรกเป็นภาษาธรรมดา การใช้เวลาสิบนาทีตรงนี้ช่วยประหยัดชั่วโมงของการโต้ตอบไปมา รูปแบบที่มีประโยชน์:

• ใครใช้: นักเรียน (จองและยกเลิก) ซาร่า (จัดการคลาสและดูรายชื่อ)
• หน้าจอ: ตารางเรียน รายละเอียดคลาส การจองของฉัน คลาสสำหรับแอดมิน รายชื่อคลาสสำหรับแอดมิน
• ข้อมูล: คลาส (ชื่อ ผู้สอน เวลาเริ่ม ความยาว ความจุ) การจอง (นักเรียน คลาส สถานะ) นักเรียน (ชื่อ อีเมล โทรศัพท์)
• กฎ: ห้ามจองคลาสที่เต็ม นักเรียนหนึ่งคนจองได้หนึ่งครั้งต่อคลาส ยกเลิกได้ถึงสองชั่วโมงก่อนเริ่ม มีเพียงซาร่าที่เห็นหน้าแอดมิน
• ไม่อยู่ใน v1: การชำระเงิน แพ็กคลาส รายชื่อรอ การแจ้งเตือน

รายการ "ไม่อยู่ใน v1" สำคัญที่สุด เพราะมันช่วยให้การสร้างเสร็จได้ คู่มือ การเขียนเอกสารความต้องการผลิตภัณฑ์ด้วย AI ลงลึกกว่านี้หากคุณต้องการสเปกที่ครบถ้วนกว่า

ขั้นที่ 2: เลือกเครื่องมือที่ครอบคลุมทั้งลูป

สำหรับแอปที่มีฐานข้อมูล การล็อกอิน และ URL สาธารณะ ให้ใช้เครื่องมือสร้างแอป AI ที่รันโค้ด แนบฐานข้อมูล และเผยแพร่ได้ ไม่ใช่ผู้ช่วยแชทที่ส่งไฟล์ให้คุณ การเปรียบเทียบเครื่องมือ vibe coding ของเราแสดงตัวเลือกต่างๆ ในที่นี้เราจะใช้ Mythex เพราะครอบคลุมทุกขั้นตอนในที่เดียว ได้แก่ แชท พรีวิวสด ฐานข้อมูลและที่จัดเก็บไฟล์จริง และการเผยแพร่ด้วยคลิกเดียว

ขั้นที่ 3: พรอมต์แรก

แปลงสเปกเป็นย่อหน้าเดียว อย่าวางเอกสารทั้งฉบับพร้อมรายละเอียดทุกอย่างในคราวเดียว ให้แกนหลักก่อนแล้วค่อยเพิ่มส่วนที่เหลือเป็นขั้นๆ

สร้างแอปจองคลาสสำหรับสตูดิโอโยคะของฉัน นักเรียนสมัครด้วยชื่อ อีเมล และโทรศัพท์ เห็นตารางเรียนของสัปดาห์นี้ และจองที่นั่งในคลาส แต่ละคลาสมีชื่อ ผู้สอน เวลาเริ่ม ความยาว และความจุ คลาสที่เต็มแสดงว่า "เต็ม" และจองไม่ได้ นักเรียนเห็นการจองของตัวเองและยกเลิกได้ถึงสองชั่วโมงก่อนคลาส ฉันเป็นแอดมิน: ฉันเพิ่มและแก้ไขคลาสได้ และดูรายชื่อคนที่จองในแต่ละคลาส ดีไซน์สงบ เรียบง่าย และใช้งานบนโทรศัพท์ได้ดี

หากคุณไม่แน่ใจว่าเครื่องมือเข้าใจหรือไม่ ให้ขอแผนก่อน ใน Mythex โหมด Plan จะวางโครงหน้าจอและข้อมูลก่อนเขียนโค้ด แล้วคุณอนุมัติ

ขั้นที่ 4: ทำให้ลูปหลักใช้งานได้

ลูปหลักคือสิ่งเดียวที่แอปมีไว้ทำ: นักเรียนจองคลาส และซาร่าเห็นการจองนั้น ทดสอบเฉพาะส่วนนั้น:

1. สมัครเป็นนักเรียน จองคลาส
2. เปิดมุมมองแอดมิน การจองอยู่ที่นั่นหรือไม่
3. จองคลาสเดิมอีกครั้ง ระบบควรปฏิเสธ
4. ตั้งความจุของคลาสเป็น 2 จองจากบัญชีนักเรียนสองบัญชี แล้วลองบัญชีที่สาม

ปัญหาสองอย่างมักปรากฏในขั้นนี้ ตารางเรียนแสดงเวลาตามเขตเวลาของเซิร์ฟเวอร์ ไม่ใช่ของสตูดิโอ และการตรวจ "เต็ม" เกิดขึ้นแค่ในหน้าเว็บ ดังนั้นการคลิกสองครั้งอย่างรวดเร็วจะสร้างการจองสองรายการ

แสดงเวลาของคลาสทั้งหมดตามเขตเวลาของสตูดิโอ [Asia/Dubai] ไม่ว่าอุปกรณ์ของผู้เยี่ยมชมจะตั้งค่าไว้อย่างไร

ตรวจสอบความจุและการจองซ้ำบนเซิร์ฟเวอร์เมื่อสร้างการจอง ไม่ใช่แค่ในหน้าเว็บ หากมีสองคำขอเข้ามาพร้อมกันสำหรับที่นั่งสุดท้าย ควรมีเพียงหนึ่งรายการที่สำเร็จ

แก้ลูปหลักให้เรียบร้อยก่อนเพิ่มอย่างอื่น ทุกอย่างขึ้นกับมัน

ขั้นที่ 5: เพิ่มกฎที่เหลือทีละข้อความ

ตอนนี้ไล่ดูกฎในสเปกทีละข้อ:

นักเรียนยกเลิกการจองได้ถึงสองชั่วโมงก่อนคลาสเริ่ม หลังจากนั้นให้ซ่อนปุ่มยกเลิกและปฏิเสธการยกเลิกบนเซิร์ฟเวอร์พร้อมข้อความที่ชัดเจน

มีเพียงบัญชีของฉันที่เปิดหน้าแอดมินได้ ตรวจสอบสิ่งนี้บนเซิร์ฟเวอร์สำหรับทุกการกระทำของแอดมิน ไม่ใช่แค่ซ่อนเมนู

หลังจากแต่ละข้อ ให้ทดสอบ และไปต่อเมื่อมันใช้งานได้ หากการเปลี่ยนแปลงทำให้บางอย่างพัง ให้ย้อนกลับไปยังจุดตรวจสอบที่ใช้งานได้ครั้งล่าสุด แล้วลองใช้คำขอที่ชัดเจนกว่า แทนที่จะซ้อนการแก้ไขทับกันไปเรื่อยๆ

ขั้นที่ 6: ขัดเกลาสิ่งที่ผู้ใช้จริงจะสังเกตเห็น

ผู้ใช้จริงจะสังเกตเห็นสิ่งเล็กๆ รายการสั้นๆ สำหรับแอปของซาร่า:

• สถานะว่าง: "ยังไม่มีคลาสในสัปดาห์นี้" แทนหน้าว่างเปล่า
• การยืนยัน: "คุณจองคลาส Vinyasa วันอังคาร 18:00 แล้ว" หลังจากจอง
• เลย์เอาต์บนโทรศัพท์: ปุ่มขนาดใหญ่ ตารางเรียนที่อ่านได้บนหน้าจอ 375px
• ที่นั่งที่เหลือ: "เหลือ 3 ที่นั่ง" ในแต่ละคลาส เพื่อให้นักเรียนจองเร็วขึ้น

ในการ์ดของแต่ละคลาส ให้แสดงที่นั่งที่เหลือ เช่น "เหลือ 3 จาก 12" หลังจองแล้ว ให้แสดงการยืนยันพร้อมชื่อคลาส วันและเวลา และปุ่มไปยังการจองของฉัน

ขั้นที่ 7: ทดสอบเหมือนคนแปลกหน้า

ก่อนที่คนอื่นจะใช้ ให้ใช้เวลาครึ่งชั่วโมงลองทำให้มันพัง:

คุณยังสามารถขอให้ AI ไล่ดูกรณีขอบได้ด้วย:

ลิสต์สิบสิ่งที่นักเรียนจริงอาจทำซึ่งอาจทำให้การจองหรือการยกเลิกพัง ทดสอบแต่ละข้อและแก้ไขสิ่งที่ล้มเหลว บอกฉันว่าคุณเปลี่ยนอะไรไปบ้าง

ขั้นที่ 8: ตรวจสอบความปลอดภัย

แอปนี้เก็บชื่อ อีเมล และเบอร์โทรศัพท์ ดังนั้นการตรวจสอบความปลอดภัยสั้นๆ คุ้มค่า คำถามหลักมีดังนี้:

• นักเรียนคนหนึ่งเห็นการจองหรือข้อมูลติดต่อของอีกคนได้หรือไม่
• มีคีย์หรือรหัสผ่านอยู่ในโค้ดที่รันในเบราว์เซอร์หรือไม่
• ฟอร์มสมัครสมาชิกมีการป้องกันบอทหรือไม่
• มีการสำรองข้อมูลหรือไม่

หน้าความปลอดภัยของการ vibe coding ของเราอธิบายแต่ละการตรวจสอบและให้พรอมต์สำหรับแต่ละเรื่อง และ เช็คลิสต์ความปลอดภัยสำหรับแอปที่สร้างด้วย AI เป็นฉบับเต็ม

ขั้นที่ 9: เผยแพร่

เมื่อลูปหลัก กฎ และการตรวจสอบผ่านแล้ว ให้เผยแพร่ ใน Mythex ทำได้ด้วยคลิกเดียว และแอปจะได้ URL สาธารณะพร้อมฐานข้อมูลและโฮสติ้งที่ตั้งค่าไว้แล้ว ใน Pro คุณเชื่อมโดเมนของตัวเองได้ เช่น book.sarasyoga.com ดู วิธีเชื่อมโดเมนที่กำหนดเอง

ก่อนส่งลิงก์ออกไป ให้ตรวจเวอร์ชันที่เผยแพร่แล้วอีกครั้ง จองคลาสจากโทรศัพท์ของคุณ พรีวิวและเวอร์ชันจริงควรทำงานเหมือนกัน แต่ให้ยืนยันด้วยตัวเอง

ขั้นที่ 10: ผู้ใช้กลุ่มแรกและเวอร์ชันถัดไป

ส่งลิงก์ให้นักเรียนประจำห้าคนก่อน ไม่ใช่ทั้งหมด ขอให้พวกเขาจองคลาสถัดไปผ่านแอปและบอกคุณว่ามีอะไรสับสน จากนั้นแก้สามสิ่งแรกที่พวกเขาพูดถึง

หลังจากใช้งานจริงไม่กี่สัปดาห์ รายการ v2 สำหรับแอปแบบนี้มักเขียนขึ้นเอง ได้แก่ รายชื่อรอสำหรับคลาสที่เต็ม การแจ้งเตือนทางอีเมลตอนค่ำก่อนคลาส และแพ็กคลาสที่ชำระออนไลน์ แต่ละรายการได้รับการจัดการแบบเดิม: เขียนสเปกเป็นไม่กี่บรรทัด ใส่พรอมต์ ทดสอบ เผยแพร่ สำหรับการเพิ่มการชำระเงิน ดู วิธีเพิ่มการชำระเงินให้แอปของคุณ สำหรับการประชาสัมพันธ์ ดู วิธีเปิดตัวแอปและได้ผู้ใช้กลุ่มแรก

เปลี่ยนเป็นแอปบนโทรศัพท์

สตูดิโอหลายแห่งต้องการไอคอนบนโทรศัพท์ของนักเรียน ใน Mythex Pro แอปที่เผยแพร่แล้วสามารถกลายเป็นแอป Android (ไฟล์ที่คุณอัปโหลดขึ้น Google Play ได้) และแอป iPhone ที่ส่งไปยัง TestFlight ด้วยคีย์ App Store Connect ของคุณเอง โดยไม่ต้องใช้ Mac แอปบนโทรศัพท์จะเปิดเว็บแอปที่เผยแพร่แล้ว ดังนั้นทุกครั้งที่คุณเผยแพร่การอัปเดต แอปบนโทรศัพท์ก็จะได้รับด้วย

สิ่งที่ควรนำไปใช้

การสร้างตัวแอปเองเป็นส่วนสั้นที่สุด สิ่งที่ทำให้แอปใช้งานได้คือรายการ "ไม่อยู่ใน v1" ของสเปก การทดสอบลูปหลักก่อนสิ่งอื่นใด กฎฝั่งเซิร์ฟเวอร์สำหรับความจุและการเข้าถึง และผู้ใช้จริงห้าคนก่อนห้าสิบคน นั่นคือลักษณะของ vibe coding เมื่อแอปต้องใช้งานได้สำหรับคนอื่น

พร้อมลองทำของคุณเองหรือยัง เขียนสเปกหนึ่งหน้า จากนั้นวางย่อหน้าแรกลงใน เครื่องมือสร้างแอป AI หากคุณอยากเห็นประเภทแอปอื่นๆ และพรอมต์ที่อยู่เบื้องหลัง อ่าน ตัวอย่าง vibe coding ของเรา

คำถาม