บทที่ 5 REST API และ Web Service

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

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

1. อธิบายบทบาทของ REST API และ Web Service ในระบบ web application ได้
2. เข้าใจการสื่อสารระหว่าง Front-end, Back-end และ Database ได้
3. เลือกใช้ HTTP Methods, Status Codes และ JSON ได้เหมาะสม
4. ออกแบบ endpoint สำหรับงาน CRUD ได้
5. ทดสอบและสื่อสาร API ด้วย Postman และ Swagger/OpenAPI ได้

ภาพรวมบทเรียน

บทก่อนหน้าใช้ Angular สร้างส่วนติดต่อผู้ใช้ แต่แอปจริงต้องมีข้อมูลจาก server เช่น รายการสินค้า ผู้ใช้ คำสั่งซื้อ หรือผลการค้นหา บทนี้จึงอธิบายวิธีที่ front-end ติดต่อ back-end ผ่าน REST API โดยใช้ HTTP request/response และแลกเปลี่ยนข้อมูลด้วย JSON

คำสำคัญของบทเรียน

• API: ช่องทางให้ระบบหนึ่งเรียกใช้ความสามารถหรือข้อมูลจากอีกระบบหนึ่ง
• REST API: แนวทางออกแบบ API โดยใช้ resource, URL, HTTP methods และ stateless communication
• Web Service: บริการที่เปิดให้โปรแกรมอื่นเรียกใช้งานผ่าน network
• JSON: รูปแบบข้อมูลที่นิยมใช้แลกเปลี่ยนระหว่าง client และ server
• CRUD: งานพื้นฐานของข้อมูล ได้แก่ Create, Read, Update และ Delete
• Endpoint: URL ที่ใช้เรียก resource หรือ action ของ API
• Status Code: รหัสผลลัพธ์ของ HTTP response เช่น 200, 201, 400, 401, 404 และ 500

1. API คือสัญญาระหว่างระบบ

API เปรียบเหมือนสัญญาการสื่อสารระหว่าง front-end และ back-end โดย front-end ต้องรู้ว่า endpoint คืออะไร ต้องส่งข้อมูลแบบใด และจะได้รับ response แบบใดกลับมา หากสัญญานี้ชัดเจน ทีม front-end และ back-end สามารถพัฒนาคู่ขนานกันได้ง่ายขึ้น

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#83a598',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Front-end
Angular/Web UI] --> B[HTTP Request
คำขอ]
  B --> C[REST API
Web Service]
  C --> D[Database
ฐานข้อมูล]
  D --> C
  C --> E[HTTP Response
ผลลัพธ์ JSON]
  E --> A

2. หลักการของ REST API

REST หรือ Representational State Transfer เป็นแนวทางออกแบบ API ที่มองข้อมูลเป็น Resource เช่น products, users, orders แล้วใช้ URL แทน resource และใช้ HTTP method ระบุการกระทำ

หลักคิดสำคัญของ REST

1. ใช้ Resource เป็นคำนาม เช่น /products ไม่ใช่ /getProducts
2. ใช้ HTTP Method บอกการกระทำ เช่น GET, POST, PUT, DELETE
3. API ควรเป็น Stateless คือแต่ละ request มีข้อมูลพอให้ server ประมวลผลได้
4. Response ควรมี Status Code และ body ที่ชัดเจน
5. URL ควรอ่านง่ายและสื่อความหมายของข้อมูล

3. JSON: รูปแบบข้อมูลที่ API นิยมใช้

JSON หรือ JavaScript Object Notation เป็นรูปแบบข้อมูลที่อ่านง่ายและใช้ได้หลายภาษา เหมาะกับการส่งข้อมูลระหว่าง front-end และ back-end

{
  "id": 1,
  "name": "Keyboard",
  "price": 850,
  "category": "Device",
  "inStock": true
}

ตัวอย่าง response แบบรายการ

{
  "data": [
    {
      "id": 1,
      "name": "Keyboard",
      "price": 850
    },
    {
      "id": 2,
      "name": "Mouse",
      "price": 420
    }
  ],
  "total": 2
}

4. CRUD กับ HTTP Methods

CRUD เป็นงานพื้นฐานของระบบข้อมูล ได้แก่ เพิ่ม อ่าน แก้ไข และลบ REST API จะจับคู่ CRUD กับ HTTP methods เพื่อให้ API อ่านง่ายและเป็นมาตรฐาน

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#b8bb26',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart TD
  A[CRUD
งานจัดการข้อมูล] --> B[Create
เพิ่มข้อมูล]
  A --> C[Read
อ่านข้อมูล]
  A --> D[Update
แก้ไขข้อมูล]
  A --> E[Delete
ลบข้อมูล]
  B --> F[POST]
  C --> G[GET]
  D --> H[PUT/PATCH]
  E --> I[DELETE]

5. HTTP Status Codes

Status Code ช่วยบอกผลลัพธ์ของ request ให้ front-end รู้ว่าควรทำอะไรต่อ เช่น แสดงข้อมูล แสดง error หรือให้ผู้ใช้ login ใหม่

ตัวอย่าง error response ที่อ่านง่าย

{
  "error": {
    "code": "PRODUCT_NAME_REQUIRED",
    "message": "กรุณาระบุชื่อสินค้า",
    "field": "name"
  }
}

6. การออกแบบ Endpoint สำหรับระบบสินค้า

การออกแบบ endpoint ควรเริ่มจาก resource หลักของระบบ เช่น products, categories, orders แล้วกำหนด action ผ่าน HTTP method

GET    /products
GET    /products/{id}
POST   /products
PUT    /products/{id}
PATCH  /products/{id}
DELETE /products/{id}
GET    /products?keyword=keyboard&category=device

ตัวอย่าง request/response

POST /products
Content-Type: application/json

{
  "name": "Keyboard",
  "price": 850,
  "category": "Device"
}

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 1,
  "name": "Keyboard",
  "price": 850,
  "category": "Device"
}

7. Query Parameter, Path Parameter และ Request Body

API ต้องเลือกตำแหน่งการส่งข้อมูลให้เหมาะสม เพื่อให้ endpoint อ่านง่ายและคาดเดาได้

// Angular service เรียก API พร้อม query parameter
getProducts(keyword: string) {
  return this.http.get('/api/products', {
    params: { keyword }
  });
}

8. Swagger/OpenAPI สำหรับสื่อสาร API

Swagger/OpenAPI คือรูปแบบเอกสาร API ที่บอก endpoint, method, parameter, request body, response และ status code อย่างเป็นระบบ ทีม front-end สามารถดูเอกสารนี้เพื่อรู้วิธีเรียก API โดยไม่ต้องเดา

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#d3869b',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[API Design
ออกแบบ endpoint] --> B[OpenAPI Spec
เอกสารมาตรฐาน]
  B --> C[Swagger UI
หน้าเอกสาร]
  C --> D[Front-end Team
เรียกใช้งาน]
  C --> E[Back-end Team
ตรวจสัญญา API]

paths:
  /products:
    get:
      summary: Get product list
      responses:
        '200':
          description: Product list

9. Postman สำหรับทดสอบ API

Postman เป็นเครื่องมือสำหรับส่ง request ไปยัง API และดู response เหมาะกับการทดสอบ endpoint ก่อนนำไปเชื่อมกับ front-end

ขั้นตอนทดสอบ API ด้วย Postman

1. เลือก HTTP method เช่น GET หรือ POST
2. ใส่ URL เช่น http://localhost:3000/products
3. กำหนด header เช่น Content-Type: application/json
4. ใส่ request body หากเป็น POST, PUT หรือ PATCH
5. กด Send และตรวจ status code กับ response body
6. บันทึก request เป็น collection เพื่อใช้ซ้ำ

10. การประมาณเวลาตอบสนองของ API

เวลา response ของ API ส่งผลต่อประสบการณ์ผู้ใช้โดยตรง หาก API ช้า front-end ควรมี loading state และถ้าเกิด error ต้องมีข้อความแจ้งชัดเจน

• T คือ เวลารวมของ API response
• N คือ เวลา network ระหว่าง client กับ server
• P คือ เวลา back-end ประมวลผล business logic
• D คือ เวลา query หรือบันทึกข้อมูลใน database

11. ตัวอย่างเชื่อม Angular กับ REST API

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

// product-api.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

export interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({
  providedIn: 'root'
})
export class ProductApiService {
  private http = inject(HttpClient);

  getProducts() {
    return this.http.get<Product[]>('/api/products');
  }
}

// products.component.ts
import { Component, inject } from '@angular/core';
import { ProductApiService } from './product-api.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html'
})
export class ProductsComponent {
  private productApi = inject(ProductApiService);

  products$ = this.productApi.getProducts();
}

Checklist ก่อนส่งงานบทที่ 5

กิจกรรม

ออกแบบ REST API สำหรับระบบ Product Management โดยให้มี:

1. Endpoint สำหรับ CRUD ของสินค้า
2. ตัวอย่าง request/response อย่างน้อย 3 endpoint
3. Status code ที่เหมาะสมกับแต่ละกรณี
4. Error response สำหรับข้อมูลไม่ถูกต้อง
5. Query parameter สำหรับค้นหาและกรองข้อมูล
6. ทดสอบ endpoint ด้วย Postman หรืออธิบายขั้นตอนทดสอบ

คำถามทบทวน

1. REST API แตกต่างจากการเปิดหน้าเว็บปกติอย่างไร
2. CRUD จับคู่กับ HTTP methods ใดบ้าง
3. Status Code 200, 201, 400, 401, 404 และ 500 หมายถึงอะไร
4. Query parameter กับ path parameter ต่างกันอย่างไร
5. Swagger/OpenAPI ช่วยทีมพัฒนาอย่างไร

กลับรายวิชา