AI Web Studio977-121 · PSU PHUKET
คู่มือผู้สอน
ดาวน์โหลด Markdown

AI Web Studio · 977-121 · PSU Phuket

Glossary ผู้สอน: คำสำคัญ 38 คำสำหรับอธิบายในห้อง

ใช้คำอธิบายนี้กับผู้เริ่มต้นก่อนใช้ศัพท์อังกฤษใน code. เป้าหมายคือให้เขาเห็นว่าแต่ละสิ่ง “มีหน้าที่อะไร” และ “ไม่ใช่อะไร”

หน้านี้คงเป็น glossary แบบตารางเพราะผู้อ่านต้องค้นคำทีละคำ ไม่ใช่ตามเส้นทางเดียว เมื่อจะสอนความสัมพันธ์ ให้เปิด request จาก browser ถึง Worker/D1, context ที่ agent โหลดตามงาน และ release gates ประกอบ แล้วกลับมาตรวจความหมายของแต่ละ node จากตารางนี้

คำ ความหมายในหลักสูตร อุปมา/ตัวอย่างที่พูดในห้อง
Vibe coding การใช้ AI สนทนาเพื่อช่วยวางแผน/เขียน/ตรวจ software โดยมนุษย์ยังรับผิดชอบผล เหมือนมีช่างฝึกงานเร็วมาก: ทำงานไว แต่เจ้าของงานยังต้องอ่านแบบและตรวจรับ
Agent โปรแกรม AI ที่รับเป้าหมาย, อ่าน context และเรียก tools เพื่อทำงาน ผู้ช่วยที่มีโต๊ะทำงานและชุดเครื่องมือ ไม่ใช่เพียงกล่อง chat
Prompt คำสั่งสำหรับรอบงานหนึ่ง ใบสั่งงานวันนี้: เป้าหมาย, ขอบเขต, หลักฐาน, จุดหยุด
Spec ข้อตกลงตรวจได้ว่า product ต้องทำอะไรและไม่ทำอะไร แบบบ้านก่อนเริ่มก่อ; ไม่ใช่รูป facade อย่างเดียว
Acceptance criteria เงื่อนไข observable ว่างานผ่านหรือไม่ checklist ตรวจรับ เช่น “Tab ถึงปุ่มได้” ไม่ใช่ “ดูดี”
Evidence output ที่ยืนยัน claim: command/result, URL, screenshot พร้อม method ใบเสร็จ ไม่ใช่คำบอกว่า “ผมจ่ายแล้ว”
Assumption log รายการสิ่งที่ยังไม่ยืนยัน, owner และผลกระทบ ป้ายเตือนบนแบบว่า “ยังไม่รู้ขนาดประตู—ถามสถาปนิก”
Vertical slice งานชิ้นเล็กที่เดินครบจาก UI ถึงพฤติกรรมที่จำเป็น ทำประตูหนึ่งบานให้เปิดได้ แทนสร้างผนังทุกห้องพร้อมกัน
Scope สิ่งที่ตกลงทำในรอบนี้ รั้วเขตก่อสร้าง; นอกนั้นไม่ขุดแม้เครื่องมือทำได้
Out of scope สิ่งที่ตั้งใจไม่ทำตอนนี้ ป้าย “เฟส 2” ที่กัน feature creep
AGENTS.md กติกา repository ที่ agent ควรรู้เกือบทุกงาน ป้ายกฎความปลอดภัยหน้าห้องปฏิบัติการ
Context ข้อมูลที่ model เห็นระหว่างตัดสินใจ โต๊ะทำงาน: ถ้าวางของไร้เรื่องจนเต็ม จะหาเอกสารสำคัญไม่เจอ
Context hygiene ทำ context ให้สั้น ถูก และเกี่ยวข้อง เก็บโต๊ะก่อนเริ่มงานใหม่ ไม่ใช่กองเอกสารทุกโครงการไว้ด้วยกัน
Skill instructions/resources/scripts สำหรับ workflow เฉพาะที่โหลดเมื่อเกี่ยวข้อง คู่มือทำกาแฟสำหรับงานกาแฟ ไม่ใช่กฎติดผนังทุกงาน
SKILL.md entry file ของ Agent Skill ที่บอกชื่อ/trigger/instructions หน้าปกและวิธีใช้ของคู่มือ workflow
Progressive disclosure โหลด catalog ก่อน, body เมื่อ match, references เมื่อจำเป็น สารบัญ → บทที่เลือก → ภาคผนวกเฉพาะเรื่อง
Portable core ส่วน skill ที่หลาย host เข้าใจร่วมกัน เช่น name, description, Markdown ปลั๊ก USB-C: เสียบได้หลายที่ แต่ power profile อาจต่างกัน
Vendor extension ฟีเจอร์เพิ่มเฉพาะ Codex/Claude/host เช่น command syntax หรือ frontmatter ปุ่มพิเศษบนรถรุ่นหนึ่ง อย่าคาดว่ารถทุกคันมี
MCP server server ที่ให้ agent เรียก tool/data จากระบบภายนอก ปลั๊กพ่วงเครื่องมือ: ทำให้ผู้ช่วยเปิด Figma/Cloudflare ได้ แต่ไม่บอกว่าควรตัดสินใจอย่างไร
Plugin package ที่รวม skills, MCP, agents, hooks หรือ metadata กล่องเครื่องมือที่อาจมีหลายชิ้น จึงต้องเปิดตรวจทุกชิ้นก่อนใช้
Subagent agent แยก context/tool boundary เพื่อทำงานย่อย ให้คนหนึ่งไปค้นห้องสมุด แล้วส่งสรุปกลับ ไม่เอาหนังสือทั้งห้องมากองโต๊ะหลัก
Least privilege ให้ permission เท่าที่จำเป็น ให้กุญแจเปิดห้องประชุม ไม่ให้ master key ทั้งตึก
Secret credential ที่ให้เข้าถึงระบบ เช่น API token กุญแจตู้เซฟ; ห้ามแปะใน prompt, code, screenshot หรือ Git
Environment binding ชื่อ resource/secret ที่ Worker ได้รับจาก platform ป้ายหน้าลิ้นชัก “DB”; code รู้ชื่อ แต่ไม่ได้พิมพ์กุญแจลงในสมุด
Worker code ฝั่ง server ที่ Cloudflare เรียกเมื่อ request มา เคาน์เตอร์หลังร้านที่ตัดสินกฎธุรกิจ ไม่ใช่ป้ายเมนูหน้าเว็บ
Static assets HTML/CSS/JS/image ที่เสิร์ฟเป็นไฟล์ ชั้นโชว์สินค้า; ใน repo Worker ส่ง assets ที่ไม่ใช่ /api/* ผ่าน env.ASSETS.fetch
Route / endpoint address ที่ request เข้า code เฉพาะ หมายเลขช่องบริการ เช่น /api/quotes เป็นช่องรับใบเสนอราคา
HTTP method ชนิดการกระทำ เช่น GET อ่าน, POST ส่ง/สร้าง คำกริยาบนแบบฟอร์ม: ดูข้อมูล vs ยื่นคำขอ
API contract ชื่อ route, method, fields, response/errors ที่ตกลง แบบฟอร์มราชการ: ช่องไหนต้องกรอกและจะได้ใบตอบอะไร
Validation ตรวจว่า input มีรูปแบบและความหมายถูก เจ้าหน้าที่เช็กบัตรและวันเดินทาง ไม่รับแค่กระดาษที่มีตัวอักษร
Allow-list ยอมรับเฉพาะ fields/values ที่ระบุ รายชื่อแขกหน้าประตู; ชื่ออื่นไม่ผ่าน แม้หน้าตาคล้าย
D1 Cloudflare SQL database ในหลักสูตรนี้ ตู้ทะเบียนหลังร้าน เก็บ contacts, rentals, quotes และ idempotency records
Migration ไฟล์เปลี่ยน schema database แบบติดตามได้ คำสั่งปรับแบบตู้เอกสาร ไม่ใช่แค่ย้ายกระดาษด้วยมือ
Authority ฝั่งที่เชื่อถือได้ในการตัดสินข้อมูล เครื่องคิดเงินหลังร้านเป็น authority ของราคา; ป้ายราคาที่ลูกค้าพิมพ์เองไม่ใช่
Idempotency key key ที่ทำให้ request ซ้ำเดิมไม่สร้าง mutation ซ้ำ หมายเลขบัตรคิว: ยื่นซ้ำแล้วได้เรื่องเดิม ไม่เปิดเคสสองใบ
Race condition ผลผิดเมื่อหลาย request แข่งกันระหว่าง check กับ write คนสองคนเห็นเก้าอี้ว่างใบสุดท้ายแล้วนั่งพร้อมกัน
Atomic write / transaction กลุ่ม write สำเร็จครบหรือไม่สำเร็จเลย โอนเงินต้องหักและฝากพร้อมกัน ไม่ใช่หักได้แต่ฝากไม่ได้
Preview deployment version ออนไลน์สำหรับตรวจรับก่อน release จริง ห้องตัวอย่างก่อนเปิดร้าน ไม่ใช่หน้าร้านจริง
Production environment ที่ผู้ใช้จริง/ข้อมูลจริงได้รับผล หน้าร้านที่เปิดขาย; ทุก change มีผลกับคนจริง
Smoke test การตรวจ flow หลักสั้น ๆ หลัง deploy เปิดไฟและลองก๊อกน้ำก่อนเปิดบ้าน ไม่ใช่การตรวจทุกท่อ
Rollback กลับ code version ที่รู้ว่าใช้ได้ ถอยไปสูตรเมนูเดิม; ไม่ได้ย้อนข้อมูล D1 โดยอัตโนมัติ
CSP Content Security Policy ที่จำกัดแหล่ง script/frame/etc. รายชื่อแขกที่อนุญาตให้เข้าอาคาร ช่วยลดของแปลกที่ browser โหลด
Turnstile Cloudflare bot check สำหรับ form ด่านคัดคนกับบอต; ไม่ใช่ระบบ login หรือ authorization ทั้งหมด
Honeypot field field ซ่อนที่มนุษย์ไม่กรอก แต่ bot มักกรอก ประตูปลอมสำหรับจับคนที่เดินมั่ว
Rate limit จำกัดจำนวน action ในช่วงเวลา บัตรกดรับคิวจำกัด เพื่อกันคนกดจนระบบล้น
Responsive design layout ปรับตามพื้นที่/อุปกรณ์ โต๊ะพับที่ใช้งานได้ทั้งห้องเล็กและห้องใหญ่
Semantic HTML เลือก element ตามความหมาย เช่น button, nav, label ป้ายกำกับลิ้นชัก ทำให้คนและ screen reader หาเจอ
Focus จุดที่ keyboard จะส่ง input ไป ไฟฉายบอกว่าตอนนี้คุณกำลังกดอะไร
Reduced motion preference ที่ขอให้ลด animation ที่ไม่จำเป็น ขอให้ลิฟต์หยุดสั่น/เคลื่อนไหวหวือหวา ไม่ใช่ปิดเนื้อหา
GSAP / ScrollTrigger library สร้าง animation และผูกกับ scroll คนคุมไฟเวที; ต้องเก็บอุปกรณ์หลังจบฉาก (cleanup)
Progressive enhancement เนื้อหาหลักทำงานก่อน แล้วค่อยเพิ่ม JS/motion หนังสืออ่านได้ก่อน แล้วเพิ่มภาพ pop-up; ไม่ใช่หนังสือว่างจนกว่าจะเปิดแบต
Core Web Vitals field metrics LCP/INP/CLS จากประสบการณ์ผู้ใช้ คะแนนรถบนถนนจริง ไม่ใช่รอบทดสอบในอู่
LCP เวลาที่เนื้อหาชิ้นใหญ่ใน viewport แสดง เวลาจนป้ายหน้าร้านหลักติดไฟ
INP ความเร็วตอบสนองของ interaction ตลอด visit เวลาจากกดกริ่งจนได้ยินเสียงตอบรับ
CLS การขยับ layout ที่ผู้ใช้ไม่คาดคิด หนังสือเลื่อนลงตอนกำลังเอื้อมกดบรรทัดหนึ่ง

คำคู่ที่ผู้เรียนสับสนบ่อย

อย่าสับสน ความต่างที่ผู้สอนย้ำ
skill กับ MCP skill บอก process; MCP ให้ capability/tool
preview กับ production preview ใช้ตรวจ; production กระทบผู้ใช้จริง
client state กับ server authority cart แสดง/เก็บความตั้งใจ; Worker reprice/validate ก่อนบันทึก
201 success กับ commercial completion demo contact/rental/quote สำเร็จไม่ได้แปลส่งอีเมล, จองจริง หรือจ่ายเงินจริง
build passed กับ product verified build พิสูจน์ compilation; manual/browser/API checks ยังต้องทำ
rollback code กับ rollback data wrangler rollback ไม่ย้อน D1 rows/schema โดยตัวมันเอง

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