# บทเรียน 08 — ระบบหลังบ้าน /admin จัดการสถานที่และข้อความติดต่อ

ขั้นสุดท้ายของ session: เปลี่ยนเว็บ “แก้ได้เฉพาะตอนสั่ง AI” ให้เป็นเว็บที่**เจ้าของบริหารเองได้** — ระบบหลังบ้านที่ `/admin` สำหรับจัดการข้อมูลสถานที่ท่องเที่ยว (รวมรูปภาพ) ดูข้อความจาก contact form และจัดการ user ของระบบหลังบ้าน จบด้วยการ deploy ขึ้นโดเมนที่ผูกไว้

เป้าหมายของบทนี้: ได้หลังบ้านครบสามส่วน และปิด workshop ด้วย checklist ความปลอดภัยก่อนเว็บออกสู่โลกจริง

## Prompt ที่ใช้

session จริงส่งรหัสผ่าน default ไปใน prompt ตรง ๆ — ในบทเรียนนี้เรา**ปิดบังรหัส**และใช้สูตรเดิมกับรหัสของคุณเองแทน (เหตุผลอยู่ในกล่องเตือนด้านล่าง)

> ต้องการระบบบริหารจัดการหลังบ้าน /admin ที่จะใช้ในการจัดการข้อมูลสถานที่ท่องเที่ยว ซึ่งจะต้องใส่ข้อมูลที่เป็นรูปภาพแล้วก็ข้อมูลของสถานที่ท่องเที่ยวได้ และส่วนที่ดูว่ามีใครกรอก Contact form มาบ้าง โดยระบบหลังบ้านให้มีระบบจัดการ user ด้วย และต้องการให้มีดีฟอลต์ยูเซอร์สำหรับการใช้งานก็คือ admin / (รหัสถูกปิดบัง — ตั้งรหัสของตัวเองเสมอ) ถ้าเสร็จแล้ว deploy ได้เลย.

![ภาพ capture ของ prompt ขอระบบหลังบ้าน /admin โดยส่วนรหัสผ่านถูกปิดบังไว้](/images/step9-admin-prompt.webp)

prompt นี้กำหนดความต้องการเป็นสามก้อนชัดเจน — (1) จัดการข้อมูลสถานที่ + รูปภาพ (2) ดูข้อความจาก contact form (3) จัดการ user พร้อมบัญชี default — และปิดท้ายด้วยคำสั่ง deploy เลย เมื่อความต้องการชัด เท่านี้ก็พอให้ agent ออกแบบระบบได้ทั้งหมด

> **อย่าวางรหัสผ่านจริงใน prompt** — prompt และบทสนทนาถูกเก็บ ส่งต่อ และนำมาสอนกันได้ (บทเรียนชุดนี้ก็มาจาก session จริง) ให้ตั้งรหัสผ่านหลังจากระบบพร้อม หรือใช้ตัวแปรสภาพแวดล้อม/secret แล้วเปลี่ยนทันทีหลัง login ครั้งแรก

## ผลลัพธ์

agent ทำงานยาวนานที่สุดของ session — **22 นาที 32 วินาที** — แก้ไฟล์ถึง **42 ไฟล์ (+427 บรรทัด)** แล้ว deploy ขึ้นโดเมนที่ผูกไว้ในบท 08

![ภาพ capture ของสรุปงาน 42 ไฟล์ที่แก้ไขหลังสร้างระบบหลังบ้านและ deploy](/images/step9-admin-result1.webp)

สิ่งที่ได้เพิ่มบนเว็บที่ lay-pai-gun.rawinlab.com:

| ส่วนของ /admin | ใช้ทำอะไร |
| --- | --- |
| จัดการสถานที่ท่องเที่ยว | เพิ่ม/แก้/ลบสถานที่ พร้อมอัปโหลดรูปภาพและข้อมูลประกอบ — เชื่อมกับโครงสร้างข้อมูล 20 สถานที่จากบท 04 |
| กล่องข้อความ contact | ดูว่ามีใครกรอกฟอร์มจากบท 03 มาบ้าง |
| จัดการ user | สร้างบัญชี กำหนดสิทธิ์ และเปลี่ยนรหัสผ่านได้เอง |

## Checklist ความปลอดภัยก่อนใช้งานจริง

ระบบหลังบ้านคือประตูที่มีค่าที่สุดของเว็บ — เช็กสามข้อนี้เสมอ ก่อนและหลัง deploy ทุกครั้ง:

| รายการ | ทำอย่างไร |
| --- | --- |
| **เปลี่ยนรหัสผ่าน default ทันที** | login ครั้งแรกแล้วเปลี่ยนรหัสเป็นของตัวเอง ใช้รหัสที่ยาวและไม่ซ้ำกับที่อื่น แล้วเก็บใน password manager |
| **ตรวจ skill ก่อนติดตั้ง / อัปเดต** | อ่านผลตรวจทุกแหล่ง (อย่าลืมบทเรียนจากบท 01: ผลตรวจบางชุดผ่าน บางชุดไม่ผ่าน) แล้วค่อยตัดสินใจ |
| **ระวัง API token ทุกช่องทาง** | token อยู่ใน `.env` เท่านั้น ไม่ commit ไม่ log ไม่ติดไปกับไฟล์ deploy — และเพิกถอนทันทีเมื่อสงสัยว่ารั่ว (บท 06–07) |

เพิ่มเติมสำหรับระบบที่โตขึ้น: เปิด two-factor authentication ถ้าผู้ให้บริการรองรับ และแยกบัญชีผู้ใช้เป็นรายคนแทนการใช้บัญชี admin ร่วมกันหลายคน

## สรุปท้าย workshop: สิ่งที่ได้และสิ่งที่ควรฝึกต่อ

เมื่อทำครบ 9 ขั้น คุณมีในมือ:

- **เว็บไซต์จริงบนโดเมนของตัวเอง** พร้อม hero, ระบบค้นหา 20 สถานที่ ไทย–อังกฤษ, ฟอร์มติดต่อที่ส่งถึงอีเมลจริง, การ์ดพร้อมภาพจริงและเครดิต และหลังบ้าน /admin
- **กระบวนการทำงานกับ AI agent ที่ทำซ้ำได้**: เตรียมเครื่องมือ (skills) → สั่งด้วย prompt ที่มีบริบท → รอจุดที่ agent ต้องถามกลับ → ตรวจผลจริงทุกขั้น → รักษาความปลอดภัยของสิ่งที่ agent แตะไม่ได้ (อีเมล โดเมน token รหัสผ่าน)
- **ต้นแบบ prompt 9 ชุด** ที่คัดลอกไปปรับกับธุรกิจของคุณได้ทันที

สิ่งที่ควรฝึกต่อ:

1. **เปลี่ยนที่นั่งคนขับ** — ลองสร้างเว็บหัวข้อที่คุณสนใจจริงด้วย prompt ชุดเดียวกัน แล้วสังเกตจุดที่คุณต้องเสริมบริบทเพิ่มจากตัวอย่างนี้
2. **ฝึกอ่านผลตรวจและผลทดสอบ** — ลองตั้ง acceptance criteria ง่าย ๆ ก่อนสั่งงาน (เช่น “ค้นหาไทย–อังกฤษได้ กรองจังหวัดได้ ฟอร์มเก็บข้อความสำรอง”) แล้วตรวจทุกข้อเอง
3. **ทำความรู้จัก Cloudflare ให้ลึกขึ้น** — ต่อยอดจาก static site ไปสู่ Workers, D1 และระบบที่มีข้อมูลจริง

ย้อนดูภาพรวมทั้ง 9 ขั้นได้ที่ [บท 00 — ภาพรวม](00-overview.md) และเปิดผลงานจริงที่ [lay-pai-gun.rawinlab.com](https://lay-pai-gun.rawinlab.com/)