บทเรียน 00 — เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร

ผลงานเมื่อจบบท

เปิดห้องเรียนนี้บนเครื่องตนเองได้ อธิบายเส้นทาง browser → Worker → D1 ได้ และแยกไฟล์ต้นฉบับออกจาก build output เป็น เริ่มจากแบบฝึกหัดนี้ก่อนใช้ AI เปลี่ยนโค้ด เพื่อให้ตรวจได้ว่าอะไรเปลี่ยนจริง

AI Web Studio เป็น workshop 2 วัน × 4 ชั่วโมง รวมพักแล้ว 8 ชั่วโมง โดยผู้สอนเลือก exercise ตาม คู่มือผู้สอน ส่วน 12 บทและ full labs เป็นคลังให้เรียนต่อด้วยตัวเอง เหมาะกับผู้เริ่มต้นที่ใช้คอมพิวเตอร์และติดตั้งโปรแกรมได้ ผู้ที่ยังไม่เคยเขียนโปรแกรมควรเผื่อเวลาเพิ่มสำหรับพื้นฐาน HTML, CSS, JavaScript และ Git

ติดตั้งเครื่องมือ AI ก่อนเข้าเรียน

ทำตาม คู่มือติดตั้ง Claude Code, Codex, Claude Desktop และ ChatGPT Desktop เพื่อเลือกวิธีติดตั้งตามระบบปฏิบัติการ ลงชื่อเข้าใช้ และเก็บหลักฐานตรวจความพร้อม เลือก coding tool หนึ่งตัวเป็นเส้นทางหลัก ส่วน Desktop apps ใช้ตามงานและสิทธิ์บัญชีที่มี คู่มือนี้อธิบายครบทั้งสี่เครื่องมือเพื่อให้เปรียบเทียบและเรียนต่อได้

เตรียมบัญชีและติดตั้งก่อนวันอบรม ช่วง setup 25 นาทีในชั้นใช้ตรวจความพร้อมและแก้ปัญหาพื้นฐาน หากยังใช้เครื่องมือไม่ได้ ให้ทำการอ่านโค้ดและตรวจเว็บตัวอย่างกับคู่เรียนก่อน

สิ่งที่ต้องเตรียม

• คอมพิวเตอร์ Windows, macOS หรือ Linux, browser รุ่นปัจจุบัน, editor ที่เปิดโฟลเดอร์ได้ และ terminal
• Node.js ตามข้อกำหนดของแพ็กเกจใน package-lock.json โปรเจกต์นี้ตรวจด้วย Node.js 22.22.0; ตรวจเวอร์ชันก่อนอบรม ไม่จำเป็นต้องเปลี่ยนเครื่องที่ใช้งานได้โดยไม่มีเหตุผล
• Git สำหรับบันทึกและเทียบการเปลี่ยนแปลง และ AI coding tool ที่ผู้เรียนมีสิทธิ์ใช้ บทเรียนอธิบายแนวคิดทั่วไปและยก Codex เป็นตัวอย่าง
• บัญชี Cloudflare สำหรับบท deploy; การรัน local ใช้ D1 จำลองผ่าน Wrangler ได้โดยไม่ต้องสร้าง database บน cloud
• สำเนา source code ของห้องเรียน แตกไฟล์แล้วเปิด terminal ที่มี package.json อยู่ ห้ามเปิด terminal ใน dist/

ค่าใช้บริการ AI และ Cloudflare ขึ้นกับบัญชีและการใช้งาน ไม่รวมอยู่ในจำนวนชั่วโมงเรียน ตรวจข้อกำหนดเวอร์ชันและบริการจาก Node.js downloads, Wrangler installation และ Workers pricing ก่อนเริ่มรุ่นอบรมใหม่

ภาพรวมของระบบ

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

Browser ขอ HTML ซึ่งบอกโครงสร้างหน้า, CSS ซึ่งกำหนดหน้าตา และ JavaScript ซึ่งตอบสนองต่อการกดปุ่ม ในตัวอย่างเว็บบริษัท browser ส่ง JSON ไป /api/contact; Worker ตรวจข้อมูลก่อนเขียน D1 แล้วคืนรหัสรายการให้ browser แสดงผล ผู้ชมเว็บไม่ควรได้ secret หรือสิทธิ์อ่านข้อมูลผู้ติดต่อทั้งหมด

ฝึกอ่านภาพ: ลากนิ้วตามลูกศรของ POST /api/contact แล้วตอบว่า validation ต้องเกิดก่อนถึง D1 ที่จุดใด หากตอบว่า browser อย่างเดียว ให้ย้อนดูว่าผู้ใช้แก้ request จาก DevTools ได้อย่างไร

คำเปรียบเทียบมีไว้เริ่มเข้าใจ ไม่ได้แทนรายละเอียดของระบบ อ่านพื้นฐานเว็บเพิ่มเติมจาก MDN: How the web works

Lab A: เปิดเว็บนี้ในเครื่อง

การเตรียม Cloudflare account สำหรับวัน 2 อยู่ใน Wrangler login / API token ผู้เรียนเริ่ม local lab ด้านล่างได้ก่อนโดยไม่ต้องมี deployment token

คำสั่งต่อไปนี้รันจาก root ของ source code ไม่ต้องคัดลอกชื่อ directory เครื่องผู้สอน

node --version
npm --version
npm ci
npm run setup
npm run db:local
npm run build
npm run types
npm run typecheck
npm run preview

npm run setup สร้าง secret สำหรับ HMAC ใน .dev.vars เฉพาะเครื่องนี้โดยไม่พิมพ์ค่าหรือทับ secret เดิม อย่า commit ไฟล์นี้ ส่วน npm ci ใช้เวอร์ชันที่ล็อกไว้ ส่วน db:local apply schema และข้อมูลตัวอย่างลงฐานข้อมูลจำลองใน .wrangler/ ครั้งแรกต้องทำให้ครบก่อนเปิดหน้าเช่า preview เปิดเซิร์ฟเวอร์ที่ http://localhost:3320 และค้างอยู่ตามปกติ เปิด terminal อีกหน้าหากต้องรันคำสั่งอื่น

เปิดหน้าแรก แล้วทดลอง /examples/company/, /examples/rental/, /examples/store/ ข้อมูลแบบฟอร์มควรเป็นข้อมูลสมมติ เช่น learner@example.test โหมดสาธิตตรวจรูปแบบก่อนแทนชื่อ อีเมล และข้อความด้วยข้อมูลปกปิดก่อนเก็บใน D1 การกดส่งไม่ส่งอีเมลจริง ไม่จองอุปกรณ์จริง และไม่ตัดเงิน

ตรวจ API จาก terminal อีกหน้าต่าง:

curl -i http://localhost:3320/api/health
curl -i http://localhost:3320/api/catalog

ผลที่คาดหวังคือ HTTP 200 และ JSON; health มี ok: true กับ storage: "d1" หากเห็น HTML ให้ตรวจว่าใช้ URL /api/ ถูกต้องและ server เป็น Wrangler instance ของโปรเจกต์นี้

Lab B: เปลี่ยนหนึ่งข้อความแล้วตรวจผล

1. เปิด examples/company/index.html และหาหัวเรื่องแรก ลองอธิบายให้ AI ฟังก่อนว่าหัวเรื่องมีหน้าที่อะไร
2. เปลี่ยนข้อความที่มองเห็นหนึ่งประโยค โดยไม่เปลี่ยน id หรือชื่อ field ของ form
3. เปิดอีก terminal รัน npm run build แล้ว refresh หน้าเว็บ ตรวจด้วยสายตาว่าประโยคเปลี่ยนและปุ่มยังไปจุดเดิม
4. เปิด browser DevTools → Network แล้วส่ง form ด้วยข้อมูลตัวอย่าง ตรวจ request JSON และ response อย่าใช้ screenshot ปุ่มเป็นหลักฐานว่า database เขียนสำเร็จ
5. คืนข้อความหรือเก็บ diff ที่ตั้งใจไว้ จดว่าต้นฉบับอยู่ที่ไหนและทำไมไม่แก้ dist/ โดยตรง

ตัว build ทำงานครั้งเดียวหลังแต่ละการเปลี่ยน source ไม่ใช่ hot reload เต็มรูปแบบ หากแก้ Markdown/CSS/HTML แล้วไม่เห็นผลให้รัน build และ refresh ใหม่

Lab C: checkpoint ด้วย Git

หากสำเนาที่ใช้เรียนยังไม่เป็น Git repository ให้เริ่มที่โฟลเดอร์โปรเจกต์ของตัวเอง:

git init
git status
git add package.json package-lock.json src examples scripts docs public migrations wrangler.jsonc .gitignore
git commit -m "Start workshop baseline"
git switch -c lesson/company-copy

ก่อน git add ทุกครั้งตรวจว่าไม่มี .dev.vars, token หรือไฟล์ข้อมูลลูกค้าอยู่ในรายการ เมื่อ clone repo ที่มี Git อยู่แล้วไม่ต้อง init ซ้ำ การ commit บันทึกเครื่องตัวเอง; push ส่งไป remote; deploy ส่งเว็บไซต์ขึ้น Cloudflare ทั้งสามการกระทำมีผลต่างกัน

Prompt พร้อมใช้

ฉันเพิ่งเปิด source code หลักสูตรนี้ ช่วยอธิบายเส้นทางการทำงานของ
หน้า examples/company/index.html ไปจนถึง src/worker.ts และ D1
อ่านไฟล์จริงก่อนตอบ ใช้ภาษาสำหรับมือใหม่
ชี้ว่าไฟล์ใดเป็นต้นฉบับและไฟล์ใดเป็น build output
ยังไม่แก้โค้ด จบด้วยแบบทดสอบสั้น 3 ข้อให้ฉันลองตอบ

อาการและวิธีแก้

หลักฐานส่งท้ายบท

ส่ง screenshot หน้าแรก local, ผล health JSON, รายการ 3 ไฟล์ที่รับผิดชอบ HTML/CSS/JS ของเว็บบริษัท และ diff ของข้อความหนึ่งประโยค อธิบายด้วยคำตัวเองว่า client validation ต่างจาก server validation อย่างไร ครูควรให้ผู้เรียนชี้ไฟล์จริงแทนการท่องคำศัพท์

แหล่งอ้างอิง: MDN และ Cloudflare ตามลิงก์ในหัวข้อ; คำสั่งและโครงสร้างอิง source code ของชุดอบรมนี้ ตรวจเวอร์ชันที่ package-lock.json เมื่อทำซ้ำ