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

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

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

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

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

วงจรส่งมอบแบบย่อจาก brief ผ่านการจัดบริบท การสร้างและการตรวจ โดยผลไม่ผ่านย้อนกลับไปแก้จากหลักฐาน ส่วนผลผ่านจึง deploy และ smoke test — บนจอเล็ก เลื่อนแนวนอนเพื่ออ่านแผนภาพ หรือเปิดไฟล์ HTML จากลิงก์ใต้ภาพ

เปิดแผนภาพขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง

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

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

แบบฟอร์ม brief

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

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 นี้:

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

ใน terminal ที่สอง:

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 คะแนนอยู่ใน คู่มือประเมิน ให้อ่านหลังลองตอบด้วยตัวเอง

Prompt ส่งมอบ

ตรวจโปรเจกต์นี้สำหรับส่งมอบให้คนที่ไม่เคยเห็นบทสนทนา
อ่าน 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 สำหรับศึกษาต่อ — บนจอเล็ก เลื่อนแนวนอนเพื่ออ่านแผนภาพ หรือเปิดไฟล์ HTML จากลิงก์ใต้ภาพ

เปิดแผนที่ขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง

ใช้ภาพนี้ตรวจความครบถ้วนของ 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 และ ชุด prompt diagram-design ด้วย

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

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

อ้างอิงการส่งมอบระบบ: Cloudflare deployments, D1 Time Travel, Stripe fulfillment ข้อเสนอแนะการสอนในบทนี้เป็นแนวทางของหลักสูตร ไม่ใช่การรับรองจากผู้ให้บริการ

ความคืบหน้าบันทึกเฉพาะเบราว์เซอร์นี้ ไม่มีบัญชีผู้เรียนหรือการส่งข้อมูลการเรียนขึ้นเซิร์ฟเวอร์