Express REST API

API คืออะไร? ทบทวน

API (Application Programming Interface) คือ ประตู ที่ให้ Frontend คุยกับ Backend Frontend ส่ง request → Backend ตอบด้วย response (มักเป็นข้อมูล JSON)

REST API คืออะไร?

REST เป็นรูปแบบการออกแบบ API ที่ใช้ HTTP method บอกว่าจะทำอะไร:

URL มักเป็น คำนาม และใช้ method บอกการกระทำ:

• GET /products — ดูสินค้าทั้งหมด
• POST /products — เพิ่มสินค้า
• DELETE /products/5 — ลบสินค้า id 5

JSON — ภาษาของข้อมูล

API มักส่งข้อมูลเป็น JSON (ดูเหมือน JS object):

{
  "id": 1,
  "name": "กาแฟ",
  "price": 80
}

จริง ๆ คือข้อความ (text) ที่มีรูปแบบนี้ ทุกภาษาอ่านได้

สร้าง REST API ด้วย Express

mkdir shop-api
cd shop-api
npm init -y
npm install express

สร้าง index.js:

const express = require("express");
const app = express();

// สำคัญ! บอก Express ให้อ่าน JSON จาก body ของ request
app.use(express.json());

// เก็บข้อมูลในหน่วยความจำ (ชั่วคราว — บทหน้าจะใช้ database)
let products = [
  { id: 1, name: "กาแฟ", price: 80 },
  { id: 2, name: "ชา", price: 60 }
];

// GET /products — ดูทั้งหมด
app.get("/products", (req, res) => {
  res.json(products);
});

app.listen(3000, () => {
  console.log("API รันที่ http://localhost:3000");
});

รัน node index.js แล้วเปิด http://localhost:3000/products — เห็น JSON! 🎉

เพิ่ม: ดูรายการเดียว (GET /products/:id)

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

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

  res.json(product);
});

• :id = parameter ใน URL (เช่น /products/1)
• req.params.id = ค่าที่ส่งมา
• res.status(404) = ส่ง HTTP status 404 (ไม่พบ)

เพิ่ม: สร้างใหม่ (POST)

app.post("/products", (req, res) => {
  const newProduct = {
    id: products.length + 1,
    name: req.body.name,
    price: req.body.price
  };

  products.push(newProduct);
  res.status(201).json(newProduct);
});

ทดสอบด้วย Thunder Client (extension VS Code) หรือ Postman:

• Method: POST
• URL: http://localhost:3000/products
• Body (JSON):

  { "name": "โก๊ะ", "price": 50 }
  

เพิ่ม: แก้ไข (PUT) และ ลบ (DELETE)

// PUT /products/:id — แก้ทั้งหมด
app.put("/products/:id", (req, res) => {
  const id = Number(req.params.id);
  const index = products.findIndex(p => p.id === id);

  if (index === -1) {
    return res.status(404).json({ error: "ไม่พบสินค้า" });
  }

  products[index] = { id, ...req.body };
  res.json(products[index]);
});

// DELETE /products/:id — ลบ
app.delete("/products/:id", (req, res) => {
  const id = Number(req.params.id);
  products = products.filter(p => p.id !== id);
  res.status(204).send();
});

นี่คือ CRUD ครบ: Create, Read, Update, Delete

HTTP Status Code ที่ใช้บ่อย

CORS — เมื่อ Frontend คนละที่อยู่กับ Backend

ถ้า Frontend (เช่น บน localhost:5173) เรียก Backend (localhost:3000) เบราว์เซอร์จะ บล็อก เพื่อความปลอดภัย แก้ด้วย:

npm install cors

const cors = require("cors");
app.use(cors());

ทดสอบ API ยังไง?

• เบราว์เซอร์: ใช้ได้แค่ GET
• Thunder Client (extension VS Code) — แนะนำ ใช้ง่าย
• Postman — ทรงพลัง ใช้กันทั่วไป
• curl (terminal)

สรุป

บทหน้า: เก็บข้อมูลถาวรด้วย Database & SQL 🗄️