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

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

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

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

![หน้าแรกของเว็บ “เล ไปกัน” พร้อมภาพทะเลอันดามันและช่องค้นหาบน hero](/images/site-hero.webp)

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

![หน้าแรกเต็มของเว็บ “เล ไปกัน” แสดง hero ช่องค้นหาพร้อมตัวกรองจังหวัดและประเภท และการ์ดสถานที่](/images/site-home-full.webp)

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

![มุมมองมือถือของหน้าแรก “เล ไปกัน” เรียงเป็นคอลัมน์เดียวตั้งแต่ header hero จนถึงช่องค้นหา](/images/site-mobile-home.webp)

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

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

| ขั้น | ทำอะไร | เวลาที่ agent ใช้ | บทเรียน |
| --- | --- | --- | --- |
| 1 | ติดตั้ง find-skills แบบ global | 27 วินาที | [บท 01](01-install-skills.md) |
| 2 | ถามหา skill สำหรับทำเว็บสวย | 31 วินาที | [บท 01](01-install-skills.md) |
| 3 | ติดตั้ง ui-ux-pro-max และอ่านผลตรวจความปลอดภัย | 1 นาที 38 วินาที | [บท 01](01-install-skills.md) |
| 4 | สร้างเว็บทริปภูเก็ตพร้อมภาพจาก GPT Image | 13 นาที 52 วินาที | [บท 02](02-design-and-build.md) |
| 5 | เพิ่ม contact form (FormSubmit) + ระบบค้นหา 20 สถานที่ | 19 นาที 30 วินาที | [บท 03](03-contact-form.md) · [บท 04](04-search-system.md) |
| 6 | เติมรูปจริงในการ์ด พร้อมเครดิตภาพ | 13 นาที 28 วินาที | [บท 05](05-card-images.md) |
| เตรียม | สร้าง Cloudflare API token แบบกำหนดสิทธิ์เฉพาะงาน | ทำบนเครื่องเราเอง | [บท 06](06-create-cloudflare-token.md) |
| 7 | deploy ขึ้น Cloudflare ด้วย API token จาก `.env` | 6 นาที 6 วินาที | [บท 07](07-deploy-cloudflare.md) |
| 8 | ผูกโดเมน lay-pai-gun.rawinlab.com | 7 นาที 30 วินาที | [บท 08](08-custom-domain.md) |
| 9 | ระบบหลังบ้าน `/admin` + user management แล้ว deploy | 22 นาที 32 วินาที | [บท 09](09-admin-cms.md) |

รวมเวลาที่ 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](01-install-skills.md)