reveal.js

# บทที่ 6

Back-end Development

---

## เป้าหมาย

- เข้าใจบทบาทของ **Back-end**
- สร้าง API ด้วย **Node.js/Express** หรือ **Node-RED**
- ใช้ **Routing** และ **Middleware**
- แยก **Controller** และ **Service Layer**
- จัดการ **Error Handling**
- ใช้ **Environment Variables**

---

## Back-end Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
 A[Client Angular/Postman] --> B[HTTP Request คำขอ]
 B --> C[Route เลือก endpoint]
 C --> D[Middleware ตรวจข้อมูล]
 D --> E[Controller จัดการคำสั่ง]
 E --> F[Service Business Logic]
 F --> G[Data Source ฐานข้อมูล/API]
 G --> F
 F --> H[HTTP Response JSON]
 H --> A
</pre>

---

## Node.js + Express

```bash
mkdir product-api
cd product-api
npm init -y
npm install express
node server.js
```

---

## Basic Server

```js
const express = require('express');

const app = express();
const port = 3000;

app.use(express.json());

app.get('/api/health', (req, res) => {
  res.json({ status: 'ok' });
});

app.listen(port);
```

---

## Routing

```js
app.get('/api/products', (req, res) => {
  res.json(products);
});

app.get('/api/products/:id', (req, res) => {
  const id = Number(req.params.id);
  const product = products.find((item) => item.id === id);

if (!product) {
    return res.status(404).json({
      error: { code: 'PRODUCT_NOT_FOUND', message: 'ไม่พบสินค้า' }
    });
  }

res.json(product);
});
```

---

## Routes Table

| Method | Route | หน้าที่ |
|---|---|---|
| `GET` | `/api/products` | อ่านรายการ |
| `GET` | `/api/products/:id` | อ่านรายการเดียว |
| `POST` | `/api/products` | เพิ่มข้อมูล |
| `PUT` | `/api/products/:id` | แก้ไขทั้งหมด |
| `PATCH` | `/api/products/:id` | แก้ไขบางส่วน |
| `DELETE` | `/api/products/:id` | ลบข้อมูล |

---

## Middleware Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
flowchart LR
 A[Request คำขอ] --> B[Logger บันทึก]
 B --> C[JSON Parser อ่าน body]
 C --> D[Validation ตรวจข้อมูล]
 D --> E[Route Handler ทำงานหลัก]
 E --> F[Response ผลลัพธ์]
</pre>

---

## Middleware Example

```js
function requestLogger(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next();
}

app.use(requestLogger);
```

| Middleware | ใช้ทำอะไร |
|---|---|
| `express.json()` | อ่าน JSON body |
| Logger | บันทึก request |
| Validation | ตรวจข้อมูล |
| Authentication | ตรวจ token |
| Error Handler | จัดรูปแบบ error |

---

## Create Resource

```js
app.post('/api/products', (req, res) => {
  const { name, price } = req.body;

if (!name) {
    return res.status(400).json({
      error: { code: 'PRODUCT_NAME_REQUIRED', message: 'กรุณาระบุชื่อสินค้า' }
    });
  }

const product = { id: products.length + 1, name, price };
  products.push(product);

res.status(201).json(product);
});
```

---

## Controller / Service

```js
// product.service.js
function findAllProducts() {
  return products;
}

function createProduct(data) {
  const product = { id: products.length + 1, ...data };
  products.push(product);
  return product;
}
```

```js
// product.controller.js
function getProducts(req, res) {
  res.json(productService.findAllProducts());
}
```

---

## Error Handling

```js
function errorHandler(error, req, res, next) {
  console.error(error);

res.status(error.status || 500).json({
    error: {
      code: error.code || 'INTERNAL_SERVER_ERROR',
      message: error.message || 'เกิดข้อผิดพลาดในระบบ'
    }
  });
}

app.use(errorHandler);
```

---

## Error Codes

| Status Code | ใช้เมื่อ |
|---|---|
| `400` | request ไม่ถูกต้อง |
| `401` | ยังไม่ได้ยืนยันตัวตน |
| `403` | ไม่มีสิทธิ์ |
| `404` | ไม่พบข้อมูล |
| `409` | ข้อมูลขัดแย้ง |
| `500` | server error |

---

## Environment Variables

```text
PORT=3000
DATABASE_URL=postgres://user:password@localhost:5432/appdb
JWT_SECRET=change-this-secret
NODE_ENV=development
```

```js
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});
```

---

## Node-RED Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
 A[HTTP In รับ endpoint] --> B[Function เตรียมข้อมูล]
 B --> C[Database/API Node เชื่อมข้อมูล]
 C --> D[HTTP Response ส่งผลลัพธ์]
</pre>

---

## Processing Time

- **T**: เวลารวมของ server
- **M**: เวลา middleware
- **L**: เวลา business logic
- **D**: เวลา data source
- **R**: เวลา response

---

## Mini Project

```text
product-api/
  server.js
  routes/product.routes.js
  controllers/product.controller.js
  services/product.service.js
  middlewares/error-handler.js
  .env
```

---

## Product API

| Endpoint | หน้าที่ |
|---|---|
| `GET /api/products` | อ่านรายการสินค้า |
| `GET /api/products/:id` | อ่านสินค้ารายการเดียว |
| `POST /api/products` | เพิ่มสินค้า |
| `PUT /api/products/:id` | แก้ไขสินค้า |
| `DELETE /api/products/:id` | ลบสินค้า |
| `GET /api/health` | ตรวจสถานะ server |

---

## Checklist

- มี endpoint สำหรับ resource
- ใช้ middleware สำหรับ JSON/logging/validation
- ตรวจข้อมูลก่อนสร้างหรือแก้ไข
- error response มี status code และ message
- ใช้ environment variables
- ทดสอบด้วย Postman
- แยก route/controller/service อ่านง่าย

---

## กิจกรรม

สร้าง **Product API** ด้วย Node.js/Express หรือ Node-RED

1. มี endpoint อย่างน้อย 1 resource
2. รองรับ `GET` และ `POST`
3. ตรวจสอบข้อมูลก่อนสร้าง resource
4. ส่ง status code และ JSON response
5. มี error response
6. ทดสอบด้วย Postman

---

## คำถามท้ายบท

1. Back-end ทำหน้าที่อะไร
2. Route และ middleware ต่างกันอย่างไร
3. ทำไมควรแยก controller และ service layer
4. Environment variables เหมาะกับค่าใด
5. Error handling ที่ดีควรตอบกลับอย่างไร