ทำเว็บจองคิวด้วย AI ตั้งแต่ศูนย์จนออนไลน์ (พร้อม prompt)

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

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

สรุปสั้นก่อนอ่าน
✅ ตอบ 5 คำถามให้ชัดก่อนเริ่ม: บริการอะไร เปิดกี่โมง รับได้กี่คิว เก็บข้อมูลอะไร และใครดูหลังบ้าน
✅ สร้างโปรเจกต์บน BrewInTH เลือกฐานข้อมูล PostgreSQL แล้วตั้งชื่อเว็บ
✅ ใช้ prompt ให้ AI สร้างเว็บ ทดสอบในเครื่อง แล้ว deploy ด้วยลิงก์ + token
✅ ลองจองเหมือนลูกค้าจริงตามเช็กลิสต์ โดยเฉพาะ การจองซ้อน และ เวลาไทย
✅ ปรับต่อในแชตเดิมได้เรื่อย ๆ เช่น ยกเลิกคิว ส่งออกรายการเป็นไฟล์

ก่อนเริ่ม: ตอบ 5 คำถามนี้ให้ชัด

AI ทำงานได้ดีที่สุดเมื่อรู้ว่า "เสร็จ" หน้าตาเป็นยังไง ใช้เวลา 10 นาทีเขียนคำตอบ 5 ข้อนี้ก่อน จะประหยัดการแก้ไปมาได้หลายรอบ

1. บริการอะไร ใช้เวลากี่นาที เช่น ตัดผม 45 นาที ทำสี 120 นาที
2. เปิดวันไหน กี่โมง เช่น อังคาร-อาทิตย์ 10:00-19:00 หยุดวันจันทร์
3. ช่วงเวลาหนึ่งรับได้กี่คิว ช่าง 1 คนรับได้ 1 คิว ถ้ามี 2 ช่างก็รับได้ 2
4. เก็บข้อมูลลูกค้าอะไร ชื่อ เบอร์โทร หมายเหตุ เก็บเท่าที่จำเป็น
5. ใครดูรายการจอง ปกติคือเจ้าของร้าน ต้องมีรหัสผ่านเข้าหน้าหลังบ้าน

ขั้นที่ 1: สร้างโปรเจกต์บน BrewInTH

1. สมัครที่ brewinth.com (แพ็กเกจฟรีได้ 1 โปรเจกต์พร้อมฐานข้อมูล 1 ตัว)
2. กด สร้างโปรเจกต์ ตั้งชื่อ เช่น "จองคิวร้านผม"
3. เทคโนโลยี เลือก ให้ระบบเลือกให้ (แนะนำ) ได้เลย ระบบจะดูจากโค้ดตอน deploy ครั้งแรก
4. ฐานข้อมูล เลือก PostgreSQL เพราะเว็บจองคิวต้องจำรายการจอง
5. ตั้ง ชื่อเว็บ ฟรี เช่น salonmai เว็บจะอยู่ที่ salonmai.host.brewinth.net (ชื่อฟรีตั้งได้ครั้งเดียว คิดให้ดีก่อน)

สร้างเสร็จจะได้ ข้อความสำเร็จรูปสำหรับ AI ที่มีลิงก์และ token เก็บไว้ใช้ในขั้นที่ 3

ขั้นที่ 2: ให้ AI สร้างเว็บและทดสอบในเครื่อง

เปิด AI ที่ทำงานบนคอมพิวเตอร์ เช่น Claude Code, Codex, Cursor หรือ Windsurf ในโฟลเดอร์ว่างที่สร้างไว้สำหรับโปรเจกต์นี้ แล้ววาง prompt นี้ (แก้ข้อมูลร้านเป็นของคุณ)

ช่วยสร้างเว็บจองคิวสำหรับร้านทำผม "ซาลอนใหม่" ให้ใช้งานได้จริงบนมือถือ

บริการ: ตัดผม 45 นาที, สระไดร์ 30 นาที, ทำสี 120 นาที
เวลาเปิด: อังคาร-อาทิตย์ 10:00-19:00 (หยุดวันจันทร์) เวลาไทย Asia/Bangkok
ช่าง 2 คน แต่ละช่วงเวลารับได้สูงสุด 2 คิว

หน้าลูกค้า:
- เลือกบริการ วัน และช่วงเวลาที่ยังว่าง (ช่วงที่เต็มแล้วต้องกดไม่ได้)
- กรอกชื่อ เบอร์โทร หมายเหตุ แล้วได้หน้ายืนยันพร้อมเลขที่การจอง
- ห้ามจองย้อนหลัง และห้ามจองซ้อนเกินจำนวนช่าง แม้มีคนกดพร้อมกัน

หน้าหลังบ้าน /admin:
- ต้องใส่รหัสผ่าน อ่านรหัสจากตัวแปร ADMIN_PASSWORD ห้ามเขียนรหัสไว้ในโค้ด
- ดูรายการจองแยกตามวัน และกดยกเลิกคิวได้

ใช้ PostgreSQL ผ่านตัวแปร DATABASE_URL
ทำให้รันและทดสอบในเครื่องได้ก่อน แล้วสรุปว่าทดสอบอะไรไปบ้าง ยังไม่ต้อง deploy

ประโยคที่ช่วยมากคือ "ห้ามจองซ้อนแม้มีคนกดพร้อมกัน" และ "เวลาไทย Asia/Bangkok" สองเรื่องนี้เป็นบั๊กที่พบบ่อยที่สุดของระบบจอง ถ้าไม่บอก AI อาจลืม

ขั้นที่ 3: นำขึ้นเว็บด้วยลิงก์ + token

เมื่อลองในเครื่องแล้วพอใจ ให้วางข้อความสำเร็จรูปจาก BrewInTH ต่อในแชตเดิม แล้วบอกเพิ่มอีกนิด

(วางข้อความสำเร็จรูปจาก BrewInTH ตรงนี้)

นำเว็บจองคิวนี้ขึ้น BrewInTH ให้ใช้งานได้จริง
- ใช้ฐานข้อมูล PostgreSQL ของโปรเจกต์ และสร้างตารางให้ครบ
- ตั้ง ADMIN_PASSWORD เป็นรหัสที่สุ่มยาว ๆ ในค่าตั้งแอปของโปรเจกต์ แล้วบอกฉันทางแชตนี้
- deploy เสร็จแล้วเปิดเว็บจริงตรวจว่าจองได้ และสรุปลิงก์ให้

ถ้าปิดหน้าต่างข้อความสำเร็จรูปไปแล้ว กดปุ่มสีเขียว สร้างลิงก์และ token สำหรับ AI (อัตโนมัติ) ในหน้าโปรเจกต์ได้ทุกเมื่อ อย่าลืมตั้งโหมดให้ AI ทำงานต่อเนื่องได้ (เช่น Bypass permissions ใน Claude Code) ไม่งั้น AI จะหยุดถามทุกคำสั่ง

AI จะอัปโหลดโค้ด สั่ง build ใส่ค่าที่จำเป็น และ deploy ให้ ระบบใส่ค่าเชื่อมต่อฐานข้อมูล (DATABASE_URL) ให้แอปเอง ไม่ต้องไปคัดลอกรหัสผ่านฐานข้อมูลเอง

ขั้นที่ 4: ลองจองเหมือนลูกค้าจริง

เว็บขึ้นแล้วอย่าเพิ่งส่งลิงก์ให้ลูกค้า ลองเองตามเช็กลิสต์นี้บนมือถือก่อน

• จองจากมือถือได้จนเห็นหน้ายืนยัน
• ช่วงเวลาที่เต็มแล้วกดไม่ได้
• เปิด 2 แท็บ จองเวลาเดียวกันพร้อมกัน ต้องไม่เกินจำนวนช่าง
• เวลาที่แสดงตรงกับนาฬิกาไทย ไม่เพี้ยนไป 7 ชั่วโมง
• จองวันหยุดหรือเวลาที่ผ่านไปแล้วไม่ได้
• เปิด /admin แล้วต้องถามรหัสผ่านก่อน

เจอข้อไหนไม่ผ่าน ส่งภาพหน้าจอหรือเล่าสิ่งที่เห็นให้ AI ในแชตเดิม แล้วบอกให้แก้และ deploy ใหม่ ถ้าเวอร์ชันใหม่มีปัญหา ย้อนกลับเวอร์ชันก่อนได้ในแท็บ เผยแพร่

ขั้นที่ 5: ปรับต่อหลังเปิดใช้

เมื่อลูกค้าเริ่มใช้จริง จะมีเรื่องอยากเพิ่มเสมอ สั่งทีละเรื่องในแชตเดิมได้เลย ตัวอย่าง prompt

เพิ่มให้ลูกค้ายกเลิกหรือเลื่อนคิวเองได้ ด้วยเลขที่การจอง + เบอร์โทร
ต้องยกเลิกล่วงหน้าอย่างน้อย 3 ชั่วโมง แล้ว deploy เวอร์ชันใหม่

ในหน้า /admin เพิ่มปุ่มดาวน์โหลดรายการจองของเดือนนี้เป็นไฟล์ CSV
ที่เปิดใน Excel แล้วภาษาไทยไม่เพี้ยน แล้ว deploy เวอร์ชันใหม่

อยากให้ระบบส่งอีเมลยืนยันถึงลูกค้า ต้องมีโดเมนของตัวเองและกล่องอีเมลบน BrewInTH ซึ่งใช้ได้ในแพ็กเกจแบบชำระเงิน สร้างกล่องแล้วกด ใช้กับแอป (ระบบเขียนค่า MAIL_* ให้) ในหน้าอีเมล ระบบจะใส่ค่าส่งอีเมลให้แอป จากนั้นบอก AI ให้ส่งอีเมลยืนยันหลังจอง

เรื่องที่ควรรู้ก่อนเปิดให้ลูกค้าใช้

• แพ็กเกจฟรีมีการพักเครื่อง ถ้าไม่มีคนเข้าเว็บสักพัก แอปจะพักไว้ คนแรกที่เข้าจะเห็นหน้ากำลังเปิดเว็บสักครู่ ถ้าเป็นร้านที่ลูกค้าจองทั้งวัน แพ็กเกจแบบชำระเงินเลือกไม่ให้พักได้
• เก็บข้อมูลลูกค้าเท่าที่จำเป็น ชื่อกับเบอร์โทรก็พอ และบอกลูกค้าว่าเก็บไว้ใช้ติดต่อเรื่องคิวเท่านั้น
• รหัสผ่านอยู่ใน ค่าตั้งแอป ไม่อยู่ในโค้ด อยากเปลี่ยนรหัสหลังบ้าน แก้ ADMIN_PASSWORD ในหน้า ค่าตั้งแอป ของโปรเจกต์ แล้วให้ AI deploy ใหม่
• อยากได้ที่อยู่ที่ดูเป็นร้าน เช่น www.salonmai.com เชื่อมโดเมนของตัวเองได้ในแพ็กเกจแบบชำระเงิน
• สำรองข้อมูลรายการจอง ใช้บริการเสริม Backups สำรองฐานข้อมูลทุกวันและกู้คืนได้

ดูวิดีโอประกอบ

▶ ตัวอย่างตั้งแต่สร้างโปรเจกต์จนเปิดเว็บ (1:30 นาที)
ดูบน YouTube

คำถามที่พบบ่อย

ต้องเขียนโค้ดเป็นไหม

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

ใช้เวลานานไหม

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

ทำจากมือถือได้ไหม

ขั้นให้ AI สร้างและนำโค้ดขึ้นเว็บต้องทำบนคอมพิวเตอร์ (PC หรือ Mac) ทำผ่านมือถือยังไม่เสถียร แต่ดูสถานะเว็บและลองจองจากมือถือได้ตามปกติ

token หมดอายุแล้ว จะให้ AI แก้เว็บต่อยังไง

กดปุ่ม สร้างลิงก์และ token สำหรับ AI (อัตโนมัติ) ในหน้าโปรเจกต์ แล้ววางข้อความใหม่ในแชตเดิม AI จะทำงานต่อจากที่ค้างไว้

รับเงินมัดจำผ่านเว็บได้ไหม

ทำได้ แต่เรื่องการเงินควรให้ผู้เชี่ยวชาญตรวจก่อนเปิดใช้จริง เริ่มจากระบบจองอย่างเดียวก่อน แล้วค่อยเพิ่มทีหลังจะปลอดภัยกว่า

สรุป

เว็บจองคิวเป็นโปรเจกต์แรกที่เหมาะมากสำหรับ Vibe Coding เพราะเห็นผลทันทีและช่วยงานร้านได้จริง เตรียมคำตอบ 5 ข้อ สร้างโปรเจกต์พร้อม PostgreSQL ใช้ prompt ในบทความนี้ให้ AI สร้างและ deploy แล้วลองตามเช็กลิสต์ก่อนส่งลิงก์ให้ลูกค้า

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง

• Vibe Coding คืออะไร? เริ่มสร้างเว็บด้วย AI จนใช้งานได้จริง
• หากเคยนำเว็บขึ้น BrewInTH แล้ว มีแก้ไขไฟล์ จะนำขึ้น BrewInTH ยังไง