สัปดาห์ที่ 12 REST API และการเชื่อมต่อข้อมูล

สไลด์บทเรียน

วัตถุประสงค์

  1. อธิบายการทำงานของ REST API และ JSON ได้
  2. เรียกข้อมูลจาก API ด้วย Fetch API หรือ HttpClient ได้
  3. จัดการ loading, success และ error state ได้

หัวข้อย่อย

  1. Client-Server Data Flow
  2. REST API และ HTTP Methods
  3. JSON
  4. Fetch API
  5. Angular HttpClient
  6. Loading และ Error Handling
  7. API Integration UX

เนื้อหา

Front-end Application มักต้องดึงข้อมูลจาก server ผ่าน API เช่น รายการสินค้า ข่าว ผู้ใช้ หรือผลลัพธ์จากระบบหลังบ้าน ข้อมูลมักอยู่ในรูป JSON และต้องแปลงเป็น UI ที่ผู้ใช้เข้าใจ

การเชื่อม API ที่ดีไม่ใช่แค่แสดงข้อมูลได้ แต่ต้องจัดการสถานะระหว่างรอโหลด ข้อผิดพลาด การ retry และข้อความที่เหมาะสมกับผู้ใช้

ตัวอย่าง

async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  return users;
}

กิจกรรมในชั้นเรียน

สร้างหน้าเว็บที่ดึงข้อมูลจาก API จริงและแสดงผลเป็นรายการหรือการ์ด

ศึกษาค้นคว้านอกเวลา

ปรับ Mini Project ให้มี loading state และ error message ที่ชัดเจน

คำถามทบทวน

  1. REST API ทำหน้าที่อะไร
  2. JSON เหมาะกับการส่งข้อมูลบนเว็บเพราะอะไร
  3. ถ้า API ล้มเหลว ผู้ใช้ควรเห็นอะไร

กลับรายวิชา