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

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

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

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

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

ทำตาม [คู่มือติดตั้ง Claude Code, Codex, Claude Desktop และ ChatGPT Desktop](../labs/install-ai-tools.md) เพื่อเลือกวิธีติดตั้งตามระบบปฏิบัติการ ลงชื่อเข้าใช้ และเก็บหลักฐานตรวจความพร้อม เลือก 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](https://nodejs.org/en/download), [Wrangler installation](https://developers.cloudflare.com/workers/wrangler/install-and-update/) และ [Workers pricing](https://developers.cloudflare.com/workers/platform/pricing/) ก่อนเริ่มรุ่นอบรมใหม่

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

![แผนภาพคำขอเว็บจากเบราว์เซอร์ แยกเส้นทางไฟล์หน้าเว็บไปยัง Static Assets และเส้นทาง API ไปยัง Worker ซึ่งตรวจข้อมูลก่อนอ่านเขียน D1](/diagrams/web-request.svg)

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

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

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

| คำ | ลองนึกเป็น | ตัวอย่างในโปรเจกต์ |
| --- | --- | --- |
| HTML | โครงสร้างและป้ายชื่อห้อง | `examples/company/index.html` |
| CSS | การจัดพื้นที่ สี และตัวอักษร | `examples/company/style.css` |
| JavaScript | วิธีตอบสนองต่อการกระทำ | `examples/company/main.js` |
| HTTP | ซองคำขอและคำตอบ | POST `/api/contact` และ HTTP 201 |
| API | ช่องทางที่ตกลงรูปแบบข้อมูลกัน | GET `/api/catalog` |
| Worker | คนตรวจเอกสารก่อนเข้าหลังบ้าน | `src/worker.ts` |
| D1 | ตู้ข้อมูลแบบตารางที่ค้นด้วย SQL | `migrations/0001_initial.sql` |
| Build | แปลงต้นฉบับเป็นของพร้อมเสิร์ฟ | `npm run build` → `dist/` |
| Deploy | ส่งชุดที่ตรวจแล้วขึ้น cloud | `npm run deploy` |

คำเปรียบเทียบมีไว้เริ่มเข้าใจ ไม่ได้แทนรายละเอียดของระบบ อ่านพื้นฐานเว็บเพิ่มเติมจาก [MDN: How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)

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

การเตรียม Cloudflare account สำหรับวัน 2 อยู่ใน [Wrangler login / API token](../labs/cloudflare-wrangler-auth.md) ผู้เรียนเริ่ม local lab ด้านล่างได้ก่อนโดยไม่ต้องมี deployment token

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

```bash
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 อีกหน้าต่าง:

```bash
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 ให้เริ่มที่โฟลเดอร์โปรเจกต์ของตัวเอง:

```bash
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 พร้อมใช้

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

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

| อาการ | ตรวจอะไร | แก้อย่างไร |
| --- | --- | --- |
| `npm: command not found` | Node ถูกติดตั้งและ terminal เห็น PATH หรือไม่ | ติดตั้งจากแหล่งทางการ เปิด terminal ใหม่ ตรวจ `node --version` |
| `ENOENT package.json` | อยู่ใน directory ใด | เปิดโฟลเดอร์ source root แล้วรันใหม่ |
| database ไม่มีตาราง | apply local migrations แล้วหรือยัง | `npm run db:local` แล้วเริ่ม Wrangler ใหม่ |
| port 3320 ถูกใช้อยู่ | มี Wrangler เดิมรันอยู่หรือไม่ | ใช้ instance เดิมของงานนี้หรือหยุดของตนเองด้วย Ctrl+C; อย่าปิด process ที่ไม่รู้เจ้าของ |
| แก้ข้อความแล้วไม่เปลี่ยน | แก้ source หรือ dist; build หรือยัง | แก้ source, `npm run build`, refresh |
| font โหลดไม่ขึ้น | Network ขอไฟล์ `/fonts/` ได้ไหม | ตรวจโฟลเดอร์ public และ build output; browser มี fallback font ให้เนื้อหายังอ่านได้ |

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

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

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