API คืออะไร และทำงานอย่างไร?
ส่วนนี้จะอธิบายหลักการทำงานพื้นฐานของ API (Application Programming Interface) ซึ่งเปรียบเสมือนพนักงานเสิร์ฟที่รับคำสั่งจากผู้ใช้ (Front-End) ไปส่งให้ห้องครัว (Back-End) และนำอาหาร (ข้อมูล) กลับมาเสิร์ฟ ทดลองกดปุ่มเพื่อดูการจำลองกระแสข้อมูล
แบบจำลอง Client-Server Architecture
กดปุ่ม "จำลองการส่งข้อมูล (Simulate Request)" เพื่อดูการทำงาน
เปรียบเทียบสถาปัตยกรรม API
ส่วนนี้จะเปรียบเทียบรูปแบบการออกแบบระบบที่ได้รับความนิยม RESTful API (มาตรฐานอุตสาหกรรม) และ GraphQL (เทคโนโลยีทางเลือกที่เน้นความยืดหยุ่น) เพื่อให้ Front-End เลือกใช้หรือทำความเข้าใจข้อจำกัดได้อย่างถูกต้อง
Radar Chart: REST vs GraphQL
🌐 RESTful API
ใช้ URL แยกตาม Resource (เช่น /users, /posts) และใช้ HTTP Methods ในการสั่งงาน
- ข้อดี: มาตรฐานชัดเจน, แคช (Cache) ข้อมูลง่าย, เรียนรู้เร็ว
- ข้อเสีย: อาจได้ข้อมูลเกินจำเป็น (Over-fetching) หรือต้องเรียกหลายครั้ง (Under-fetching)
⚡ GraphQL
เรียกข้อมูลผ่าน Endpoint เดียว โดย Front-End เป็นผู้ระบุรูปแบบข้อมูลที่ต้องการใน Query
- ข้อดี: ได้ข้อมูลครบถ้วนและตรงสเปคในการเรียกครั้งเดียว, ยืดหยุ่นสูง
- ข้อเสีย: การตั้งค่า Server ซับซ้อน, จัดการแคชยาก, Learning Curve สูง
HTTP Methods (คำสั่งจัดการข้อมูล)
ส่วนนี้เป็นแบบจำลองการใช้งาน HTTP Methods ซึ่งทำหน้าที่เปรียบเสมือนคำกริยาที่สั่งให้ Back-End ทำงานตามหลักการ CRUD (Create, Read, Update, Delete) คลิกที่ปุ่มด้านซ้ายเพื่อดูรายละเอียดและโค้ดตัวอย่าง
การร้องขอข้อมูล
ใช้สำหรับดึงข้อมูลจากเซิร์ฟเวอร์ โดยไม่มีการปรับปรุงหรือเปลี่ยนแปลงข้อมูลใดๆ ในฐานข้อมูล (Safe Operation)
fetch('https://api.example.com/users/1')
.then(res => res.json())
.then(data => console.log(data));
รูปแบบข้อมูล & รหัสสถานะ
ส่วนนี้แสดงข้อมูลเชิงสถิติที่สำคัญ JSON คือภาษากลางที่ใช้สื่อสารมากที่สุด และ HTTP Status Codes คือรหัสที่ Front-End ต้องตรวจเช็คทุกครั้งเพื่อจัดการการแสดงผลให้เหมาะสม
ความนิยมรูปแบบข้อมูล (Data Formats)
สัดส่วนการใช้งานใน Web API สมัยใหม่
การแจกแจง HTTP Status Codes
ความถี่ที่นักพัฒนา Front-End พบเจอโดยประมาณ