บทเรียน 00 — ภาพรวม: จาก prompt แรก สู่เว็บที่ deploy แล้ว

workshop นี้ถอดจาก session จริงหนึ่ง session ที่ใช้ AI agent (ChatGPT) สร้างเว็บไซต์ทริปภูเก็ตชื่อ “เล ไปกัน” ตั้งแต่ไม่มีอะไรเลย จนได้เว็บที่ deploy บน Cloudflare ผูกโดเมนของตัวเอง และมีระบบหลังบ้านสำหรับจัดการข้อมูล — ผลลัพธ์เปิดดูได้จริงที่ lay-pai-gun.rawinlab.com

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

ผลลัพธ์ปลายทางที่เราจะสร้างร่วมกัน

หน้าแรกของ “เล ไปกัน” — ภาพ hero จาก GPT Image, ช่องค้นหาบนภาพ และทางลัดไปสิมิลัน กระบี่ และเกาะรอบภูเก็ต โทนสีเขียวทะเลตัดขาว อ่านสบายทั้งคอมพิวเตอร์และมือถือ

ลำดับหน้าเต็ม: hero → ช่องค้นหาพร้อมตัวกรอง จังหวัด และ ประเภทสถานที่ → การ์ดสถานที่ท่องเที่ยว 20 แห่งในภูเก็ต พังงา กระบี่ และระนอง แต่ละการ์ดมีชื่อไทย–อังกฤษ ป้ายหมวด และตำแหน่งจังหวัด

บนมือถือทุกส่วนเรียงเป็นคอลัมน์เดียว กดเมนูและค้นหาได้สะดวก — ความ responsive นี้ไม่ได้สั่งแยก แต่เกิดจาก skill ออกแบบที่ agent เลือกใช้

9 ขั้นของ session จริง

รวมเวลาที่ agent ทำงานจริงประมาณ 1 ชั่วโมงครึ่ง — เวลาที่เหลือของ workshop คือส่วนที่มนุษย์ต้องทำเอง: อ่านผลตรวจก่อนติดตั้ง skill, ยืนยันอีเมล FormSubmit, ตรวจไซต์หลังแต่ละขั้น และรักษาความปลอดภัยของ token กับรหัสผ่าน

สิ่งที่ต้องมีก่อนเริ่ม

• บัญชี ChatGPT ที่เปิดใช้ agent mode หรือ AI coding agent ที่ติดตั้ง skills ได้
• บัญชี Cloudflare ที่มีโดเมนของตัวเองอยู่ในระบบ (สำหรับขั้น 7–8)
• อีเมลที่ใช้รับข้อความจาก contact form (ขั้น 5)

ข้อควรระวังของทั้ง workshop

• อย่าเชื่อผลลัพธ์โดยไม่เปิดดู — ทุกขั้นจบด้วยการเปิดเว็บจริงและทดลองใช้ ไม่ใช่แค่เห็นข้อความ “เสร็จแล้ว”
• ความปลอดภัยเป็นขั้นตอน ไม่ใช่ตัวเลือก — ผลตรวจ skill, API token ใน .env และรหัสผ่านหลังบ้าน คือสามจุดที่ต้องระวังที่สุดของ session นี้
• ข้อมูลสถานที่ในเว็บใช้เพื่อการเรียนรู้ — เว็บไม่มีการรับชำระเงิน และรายละเอียดการเดินทางควรตรวจสอบอีกครั้งก่อนใช้จริง

พร้อมแล้วเริ่มจาก บท 01 — ติดตั้งและคัดเลือก skills