reveal.js

# บทที่ 5

REST API และ Web Service

---

## เป้าหมาย

- เข้าใจ **REST API** และ **Web Service**
- อธิบายการสื่อสารระหว่าง front-end/back-end/database
- ใช้ **HTTP Methods**, **Status Codes** และ **JSON**
- ออกแบบ endpoint สำหรับ **CRUD**
- ทดสอบ API ด้วย **Postman**
- สื่อสาร API ด้วย **Swagger/OpenAPI**

---

## API Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
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
</pre>

---

## REST Principles

- ใช้ **Resource** เป็นคำนาม เช่น `/products`
- ใช้ **HTTP Method** บอกการกระทำ
- แต่ละ request ควรเป็น **Stateless**
- Response ควรมี status code ชัดเจน
- URL อ่านง่ายและคาดเดาได้

---

## URL Design

| URL | ความหมาย |
|---|---|
| `GET /products` | อ่านรายการสินค้า |
| `GET /products/10` | อ่านสินค้ารหัส 10 |
| `POST /products` | เพิ่มสินค้า |
| `GET /getAllProducts` | ควรปรับ |
| `POST /deleteProduct` | ควรปรับ |

---

## JSON

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

---

## CRUD + HTTP

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
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]
</pre>

---

## CRUD Table

| งาน | Method | Endpoint |
|---|---|---|
| Read list | `GET` | `/products` |
| Read one | `GET` | `/products/1` |
| Create | `POST` | `/products` |
| Replace | `PUT` | `/products/1` |
| Partial update | `PATCH` | `/products/1` |
| Delete | `DELETE` | `/products/1` |

---

## Status Codes

| Code | ความหมาย |
|---|---|
| `200` | สำเร็จ |
| `201` | สร้างข้อมูลสำเร็จ |
| `204` | สำเร็จแต่ไม่มี body |
| `400` | request ไม่ถูกต้อง |
| `401` | ยังไม่ได้ยืนยันตัวตน |
| `404` | ไม่พบข้อมูล |
| `500` | server error |

---

## Error Response

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

---

## Product Endpoints

```text
GET    /products
GET    /products/{id}
POST   /products
PUT    /products/{id}
PATCH  /products/{id}
DELETE /products/{id}
GET    /products?keyword=keyboard
```

---

## Request / Response

```http
POST /products
Content-Type: application/json

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

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

{
  "id": 1,
  "name": "Keyboard",
  "price": 850
}
```

---

## Request Parts

| ส่วน | ตัวอย่าง | ใช้เมื่อ |
|---|---|---|
| Path | `/products/10` | ระบุรายการ |
| Query | `?keyword=mouse` | ค้นหา/กรอง |
| Body | `{ "name": "Keyboard" }` | สร้าง/แก้ไข |
| Header | `Authorization` | token/metadata |

---

## Swagger/OpenAPI

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
 A[API Design ออกแบบ] --> B[OpenAPI Spec เอกสาร]
 B --> C[Swagger UI หน้า API]
 C --> D[Front-end Team เรียกใช้]
 C --> E[Back-end Team ตรวจสัญญา]
</pre>

---

## OpenAPI Example

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

---

## Postman

1. เลือก method
2. ใส่ URL
3. กำหนด header
4. ใส่ body หากจำเป็น
5. กด Send
6. ตรวจ status code และ response
7. บันทึกเป็น collection

---

## API Response Time

- **T**: เวลารวมของ response
- **N**: เวลา network
- **P**: เวลา back-end process
- **D**: เวลา database

---

## Angular Service

```ts
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

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

getProducts() {
    return this.http.get('/api/products');
  }
}
```

---

## Checklist

- Endpoint เป็นคำนาม
- CRUD จับคู่กับ method ถูกต้อง
- Request/response เป็น JSON ชัดเจน
- Status code สอดคล้องผลลัพธ์
- Error response มี code/message/field
- ทดสอบด้วย Postman
- มีเอกสาร Swagger/OpenAPI

---

## กิจกรรม

ออกแบบ REST API สำหรับ **Product Management**

1. Endpoint สำหรับ CRUD
2. Request/response อย่างน้อย 3 endpoint
3. Status code ที่เหมาะสม
4. Error response
5. Query parameter สำหรับค้นหา/กรอง
6. ขั้นตอนทดสอบด้วย 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 ช่วยทีมพัฒนาอย่างไร