# บทเรียน 10 — สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้

## ผลงานปลายหลักสูตร

นำเว็บไซต์ธุรกิจหนึ่งแบบขึ้น Cloudflare URL จริง พร้อม brief, source code, evidence การทดสอบ, วิธี deploy ซ้ำ และคู่มือดูแล เจ้าของเว็บไซต์คนถัดไปต้องอธิบายได้ว่าข้อมูลอยู่ที่ไหนและย้อนเวอร์ชันอย่างไร ไม่ประเมินเพียงภาพหน้าแรกสวยหรือจำนวนบรรทัดที่ AI สร้าง

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

## วงจรทำงานที่จะใช้ซ้ำ

![วงจรส่งมอบแบบย่อจาก brief ผ่านการจัดบริบท การสร้างและการตรวจ โดยผลไม่ผ่านย้อนกลับไปแก้จากหลักฐาน ส่วนผลผ่านจึง deploy และ smoke test](/diagrams/delivery-loop.svg)

[เปิดแผนภาพขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง](/diagrams/delivery-loop.html)

1. **Brief:** ผู้ใช้เป็นใคร มีงานอะไรที่ต้องทำให้สำเร็จ ข้อมูลใดเป็นของจริงหรือสมมติ มีอะไรอยู่นอกขอบเขต
2. **Spec:** เขียน acceptance criteria 8–12 ข้อที่ตรวจได้ พร้อม error, loading และ empty states
3. **Build:** ทำเส้นทางเล็กที่สุดตั้งแต่ UI ถึง database ก่อนเพิ่มส่วนตกแต่ง
4. **Review:** อ่าน diff ตรวจคำอ้างธุรกิจ สิทธิ์ภาพ ราคา validation และข้อมูลลับ
5. **Test:** ตรวจเส้นทางสำเร็จและล้มเหลว บนมือถือ คีย์บอร์ด และ reduced motion
6. **Deploy:** ตรวจ remote database และบัญชีปลายทาง แล้วบันทึก URL กับ version ที่ได้จริง
7. **Operate:** ตรวจ health/logs/migrations และซ้อมสถานการณ์แก้ไขหนึ่งครั้ง

**ฝึกอ่านภาพ:** วางหลักฐานของโปรเจกต์ตนเองหนึ่งชิ้นไว้ใต้แต่ละช่วงในภาพ หากช่วงใดมีเพียงคำว่า “เสร็จแล้ว” แต่ไม่มี URL, output, screenshot หรือ diff ให้ถือว่ายังขาดหลักฐาน

## แบบฟอร์ม brief

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

## Acceptance criteria ตัวอย่าง

| หมวด | เกณฑ์ที่ดี | หลักฐาน |
| --- | --- | --- |
| บริษัท | ส่งแบบฟอร์มที่ถูกต้องได้ reference และข้อมูลผิดไม่สร้างรายการ | Network response + query D1 ที่ไม่เปิดเผยข้อมูลจริง |
| เช่า | สองคนจองวันเดียวกันไม่เกิน stock แม้ส่งพร้อมกัน | ผล concurrent requests และยอดรายวัน |
| สินค้า | เปลี่ยนราคาใน client แล้ว server ไม่ยอมรับราคานั้น | tampered request และยอดที่คำนวณจาก catalog ฝั่ง server |
| Motion | reduced motion ยังอ่านและซื้อ/ขอราคาได้ทุกอย่าง | screenshot กับการเดินเส้นทางจริง |
| Accessibility | Tab ถึงและใช้ฟอร์มได้ มีชื่อ control และ error ที่เข้าใจได้ | manual keyboard notes + automated scan |
| Deployment | URL https โหลดจากอุปกรณ์อื่นและ `/api/health` ตอบจริง | URL, response, UTC เวลาและ version |
| Handoff | คนที่ไม่ได้สร้างรันจาก source ได้โดยไม่มี secret ผู้สอน | clean-install reproduction |

## ลำดับการตรวจรับ

ทำงานใน local ก่อน คำสั่งของ repository นี้:

```bash
npm ci
npm run db:local
npm run build
npm run types
npm run typecheck
# terminal แรก: เปิดไว้ระหว่าง integration tests
npm run preview
```

ใน terminal ที่สอง:

```bash
npm test
npm run test:e2e
npm run deploy:check
```

ชุด API tests เป็นการทดสอบที่เขียนข้อมูลเฉพาะ D1 local อย่าเปลี่ยน base URL เป็น production แล้วรันทั้งชุด การทดสอบ production ใช้ smoke check ที่วางข้อมูลสมมติปริมาณน้อยและไม่รบกวนผู้ใช้จริงตามบท 09

เมื่อทุกอย่างผ่านและบัญชีปลายทางเป็นของโปรเจกต์ที่ตั้งใจ ให้ทำขั้น deploy ตามบท 08 ไม่ถือว่า `--dry-run` เป็นการ deploy สำเร็จ ตรวจ URL ที่ Wrangler ส่งกลับจริง และเก็บ error ที่เกิดขึ้นตามจริงหากยังมีช่องว่าง

## แบบทดสอบสถานการณ์

- ลูกค้ากดส่งสองครั้งเพราะอินเทอร์เน็ตขาด ควรป้องกันการสร้างสองรายการที่ UI และ API อย่างไร
- หน้าร้านส่ง `price: 1` มาเอง สิ่งใดเป็นแหล่งราคาที่เชื่อถือได้
- availability ตอบว่าว่าง แต่ตอนกดจองได้ HTTP 409 ควรอธิบายกับผู้ใช้อย่างไรและรักษาข้อมูลเดิมอะไรบ้าง
- rollback Worker แล้ว database ยังเป็น schema ใหม่ จะตรวจอะไรเพื่อให้รุ่นเก่าทำงานได้
- skill ที่ติดตั้งมาขออ่าน `.env` และ upload ทั้ง repository คุณจะตรวจ intent และลดสิทธิ์อย่างไร

เฉลยพร้อมเหตุผลและเกณฑ์ 100 คะแนนอยู่ใน [คู่มือประเมิน](../instructor/assessment-and-solutions.md) ให้อ่านหลังลองตอบด้วยตัวเอง

## Prompt ส่งมอบ

```text
ตรวจโปรเจกต์นี้สำหรับส่งมอบให้คนที่ไม่เคยเห็นบทสนทนา
อ่าน brief, code, config, migrations และผลทดสอบจริง
ทำ README ที่บอก setup, build, test, deploy, secrets ที่ต้องตั้งชื่ออะไร
ห้ามพิมพ์ค่าของ secret
แนบตาราง acceptance criterion → หลักฐาน → สถานะ
อธิบาย backup/rollback และสิ่งที่ยังเป็น simulation หรือยังไม่รองรับ
ห้ามเขียนว่า production-ready ถ้ายังไม่มีหลักฐานการ deploy และทดสอบจริง
```

## ของที่ส่งให้ผู้ตรวจ

![แผนที่การเรียนรู้ที่เชื่อมเส้นทางในชั้น 2 วันจากพื้นฐานเว็บ การทำงานกับ agent, spec, design, data, deployment และ capstone กับคลังบทเรียนและ full labs สำหรับศึกษาต่อ](/diagrams/learner-roadmap.svg)

[เปิดแผนที่ขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง](/diagrams/learner-roadmap.html)

ใช้ภาพนี้ตรวจความครบถ้วนของ portfolio: capstone ควรชี้ย้อนกลับได้ทั้งการตัดสินใจด้านเนื้อหา/ออกแบบ เส้นทางข้อมูล หลักฐานทดสอบ และหลักฐาน deployment ไม่จำเป็นต้องใช้ทุกบริการหรือทุก skill เพื่อให้ดูครบ

- URL ที่ deploy แล้วและ source bundle หรือ Git commit ที่ตรงกัน
- Brief, design decisions และ prompt 3 ชุดที่ช่วยให้งานดีขึ้น พร้อมก่อน/หลังที่อธิบายได้
- ข้อมูล services: Worker name, D1 name, config ที่ไม่มี secret และขั้นตอนสร้างในบัญชีใหม่
- Test evidence ที่มีเวลารันและข้อจำกัด ไม่ใช้ภาพ green check ที่ไม่รู้ว่าตรวจอะไร
- รายการภาพ/ฟอนต์/skills/dependencies พร้อมแหล่งและสิทธิ์การใช้
- คู่มือแก้ปัญหา 5 อาการที่ผู้อื่นทำตามได้

สำหรับงานที่ต้องอธิบายระบบด้วยภาพ ให้แนบ source และ prompt ตาม [Lab เสริม diagram-design](../labs/diagram-design.md) และ [ชุด prompt diagram-design](../prompts/diagram-design-prompts.md) ด้วย

## จากเดโมไปธุรกิจจริง

เว็บในชุดอบรมเปิด `DEMO_MODE=true` และไม่มีการรับชำระเงิน การนำไปใช้ธุรกิจจริงต้องออกแบบ authentication ของผู้ดูแล, privacy notice/retention, anti-abuse, การยกเลิก/คืนเงิน/การแจ้งเตือนตามโจทย์จริง รวมถึงตรวจช่องทางรับเงินที่บัญชีธุรกิจใช้งานได้ ไม่ใช่เพียงเปลี่ยนข้อความ “demo” ออก

อ้างอิงการส่งมอบระบบ: [Cloudflare deployments](https://developers.cloudflare.com/workers/configuration/versions-and-deployments/), [D1 Time Travel](https://developers.cloudflare.com/d1/reference/time-travel/), [Stripe fulfillment](https://docs.stripe.com/checkout/fulfillment) ข้อเสนอแนะการสอนในบทนี้เป็นแนวทางของหลักสูตร ไม่ใช่การรับรองจากผู้ให้บริการ