Mission 3: REST API และ JSON

เป้าหมายของ Mission นี้: ออกแบบ URL ของ API ให้เป็นระบบตามหลัก REST และเข้าใจว่า JSON คืออะไร

---

1. Learning Objective

จบ Mission นี้คุณจะ

• อธิบายได้ว่า API และ REST คืออะไร
• ออกแบบ Endpoint ของ API ให้ถูกหลัก REST ได้
• บอกความต่างระหว่าง JSON กับ JavaScript Object ได้

---

2. Theory — API คือ "เมนูอาหาร"

API (Application Programming Interface) คือ รายการสิ่งที่โปรแกรมหนึ่งยอมให้อีกโปรแกรมสั่งได้

เหมือนเมนูในร้านอาหาร — เมนูบอกว่าสั่งอะไรได้บ้าง ราคาเท่าไหร่ แต่ไม่ได้บอกว่าครัวทำยังไง คุณไม่จำเป็นต้องรู้ว่าเชฟผัดกี่นาที แค่สั่งตามเมนูก็ได้ของ

REST (REpresentational State Transfer) คือ สไตล์การตั้งชื่อเมนู ที่คนทั้งโลกตกลงใช้ร่วมกัน เพื่อให้เดาได้โดยไม่ต้องเปิดคู่มือ

กฎ REST ที่ต้องจำแค่ 3 ข้อ

ข้อ 1 — URL ใช้ "คำนาม พหูพจน์" ไม่ใช่คำกริยา

❌ /getBooks          ✅ /books
❌ /createBook        ✅ /books
❌ /deleteBookById/3  ✅ /books/3

ข้อ 2 — ให้ HTTP Method เป็นคนบอกว่าจะ "ทำอะไร"

URL บอกว่า กับอะไร (ทรัพยากรไหน) / Method บอกว่า ทำอะไร (การกระทำ)

ข้อ 3 — มี 2 ระดับเสมอ: ทั้งกอง กับ ตัวเดียว

/books      -> พูดถึงหนังสือ "ทั้งหมด"
/books/3    -> พูดถึงหนังสือ "เล่มที่ id = 3"

---

3. Diagram — ตาราง REST มาตรฐาน (ท่องให้ขึ้นใจ)

+--------+-------------+------------------------------+------------+
| Method | URL         | ความหมาย                       | CRUD       |
+--------+-------------+------------------------------+------------+
| GET    | /books      | ดูหนังสือทั้งหมด                  | Read       |
| GET    | /books/3    | ดูหนังสือเล่มที่ 3                 | Read       |
| POST   | /books      | เพิ่มหนังสือเล่มใหม่               | Create     |
| PUT    | /books/3    | แก้ไขหนังสือเล่มที่ 3              | Update     |
| DELETE | /books/3    | ลบหนังสือเล่มที่ 3                 | Delete     |
+--------+-------------+------------------------------+------------+

สังเกตว่า URL มีแค่ 2 แบบ (/books กับ /books/3) แต่ทำได้ 5 อย่าง — เพราะ Method เป็นคนแยกความหมาย นี่คือหัวใจของ REST

flowchart TD
    R["/books<br/>(ทรัพยากร)"]
    R -->|GET| A["ดูทั้งหมด"]
    R -->|POST| B["เพิ่มใหม่"]
    R2["/books/:id<br/>(ทรัพยากรตัวเดียว)"]
    R2 -->|GET| C["ดูตัวเดียว"]
    R2 -->|PUT| D["แก้ไข"]
    R2 -->|DELETE| E["ลบ"]
    style R fill:#1e3a5f,stroke:#38bdf8,color:#fff
    style R2 fill:#1e3a5f,stroke:#38bdf8,color:#fff

---

4. JSON — ภาษาที่ใช้ส่งข้อมูล

JSON (JavaScript Object Notation) คือรูปแบบข้อความสำหรับส่งข้อมูล อ่านง่ายทั้งคนและเครื่อง และทุกภาษาโปรแกรมอ่านได้ ไม่ใช่แค่ JavaScript

{
  "id": 1,
  "title": "แฮร์รี่ พอตเตอร์",
  "year": 1997,
  "available": true,
  "tags": ["fantasy", "novel"],
  "author": { "name": "J.K. Rowling" }
}

JSON ≠ JavaScript Object

หน้าตาคล้ายกันมาก แต่ต่างกันตรงนี้

	JavaScript Object	JSON
ชื่อ key	ใส่หรือไม่ใส่ quote ก็ได้	ต้อง ใส่ "double quote" เสมอ
ค่า string	'single' หรือ "double" ก็ได้	ต้อง "double quote" เท่านั้น
ใส่ฟังก์ชันได้ไหม	ได้	ไม่ได้
comment	ได้	ไม่ได้
คอมมาปิดท้าย ,}	ได้	ไม่ได้
สภาพจริงๆ	object ในหน่วยความจำ	ข้อความ (string)

สำคัญ: JSON คือ ข้อความ — เวลาส่งผ่านเน็ตทุกอย่างเป็นตัวอักษรหมด ต้องแปลงกลับไปกลับมา

JSON.stringify({ title: "Hi" }); // Object -> ข้อความ  '{"title":"Hi"}'
JSON.parse('{"title":"Hi"}');    // ข้อความ -> Object  { title: "Hi" }

โชคดีที่ Express กับ fetch แปลงให้อัตโนมัติเกือบทุกครั้ง — แต่ต้องรู้ว่าเบื้องหลังมันแปลงอยู่

---

5. Common Mistakes

ปัญหา	สาเหตุ / วิธีแก้
ตั้งชื่อ /getAllBooks	ผิดหลัก REST — ใช้ GET /books
ใช้ POST /books/delete/3 เพื่อลบ	ใช้ DELETE /books/3 ให้ตรงความหมาย
Unexpected token } in JSON	มีคอมมาเกินท้ายบรรทัดสุดท้าย หรือใช้ single quote
ตั้งชื่อเอกพจน์บ้างพหูพจน์บ้าง (/book กับ /users)	เลือกอย่างใดอย่างหนึ่งแล้วใช้ให้เหมือนกันทั้งโปรเจค (นิยมพหูพจน์)
ใส่คำกริยาใน URL เช่น /books/3/updateTitle	ให้ Method เป็นคนบอกการกระทำ → PUT /books/3

---

6. Summary

• API = รายการคำสั่งที่ระบบเปิดให้เรียกใช้ (เหมือนเมนูอาหาร)
• REST = ธรรมเนียมการตั้งชื่อ: URL เป็นคำนามพหูพจน์, Method เป็นคำกริยา
• จำตาราง 5 บรรทัดให้ได้ — Chapter 3 จะเขียนโค้ดตามตารางนี้ทีละบรรทัดเลย
• JSON = ข้อความสำหรับส่งข้อมูล key ต้องเป็น "double quote" ห้ามมี comment ห้ามมีคอมมาเกิน
• Mission ถัดไป: Server บอกผลลัพธ์ให้ Client รู้ยังไง — Status Code