คู่มือเรียนรู้ REST API Server ด้วย Express.js

1. บทนำ

REST API (Representational State Transfer Application Programming Interface) เป็นรูปแบบการออกแบบสถาปัตยกรรมสำหรับการสื่อสารระหว่างระบบต่างๆ ผ่านโปรโตคอล HTTP โดยใช้ HTTP Methods เช่น GET, POST, PUT, DELETE ในการดำเนินการต่างๆ กับข้อมูล

2. วัตถุประสงค์การเรียนรู้

เมื่อศึกษาเอกสารฉบับนี้แล้ว นักเรียนจะสามารถ:

1. เข้าใจหลักการสร้าง API Server พื้นฐาน
2. เข้าใจการทำงานของ HTTP Methods (GET, POST, PUT, DELETE)
3. เข้าใจและสามารถนำไปประยุกต์ใช้การจัดการข้อมูลแบบ CRUD (Create, Read, Update, Delete)
4. เข้าใจและสามารถใช้งาน Express.js ในการสร้าง Web Server

3. การติดตั้งและเตรียมความพร้อม

3.1 สิ่งที่จำเป็นต้องมี

• Node.js ติดตั้งในเครื่องคอมพิวเตอร์
• ความรู้พื้นฐานเกี่ยวกับภาษา JavaScript
• โปรแกรม Text Editor หรือ IDE (แนะนำ Visual Studio Code)
• โปรแกรมทดสอบ API เช่น Postman, Insomnia หรือ Thunder Client

3.2 ขั้นตอนการติดตั้ง

เปิด Command Prompt หรือ Terminal แล้วพิมพ์คำสั่งดังนี้:

# สร้างโปรเจคใหม่
npm init -y

# ติดตั้ง Express
npm install express

4. คำอธิบายโค้ดทีละส่วน

4.1 การนำเข้า (Import) และการตั้งค่าเริ่มต้น

const express = require('express');

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

4.2 Middleware (ตัวกลางประมวลผล)

app.use(express.json());

4.3 In-Memory Data Store (ที่เก็บข้อมูลในหน่วยความจำ)

let items = [
    { id: 1, name: 'Item 1', description: 'First item' },
    { id: 2, name: 'Item 2', description: 'Second item' }
];

5. API Endpoints (จุดเชื่อมต่อ API)

5.1 GET - ดึงข้อมูลทั้งหมด

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

GET http://localhost:3000/api/items

Response (ผลลัพธ์):
[
  { "id": 1, "name": "Item 1", "description": "First item" },
  { "id": 2, "name": "Item 2", "description": "Second item" }
]

5.2 GET - ดึงข้อมูลตาม ID

app.get('/api/items/:id', (req, res) => {
    const item = items.find(i => i.id === parseInt(req.params.id));
    if (!item) return res.status(404).json({ message: 'Item not found' });
    res.json(item);
});

GET http://localhost:3000/api/items/1

Response (ผลลัพธ์):
{ "id": 1, "name": "Item 1", "description": "First item" }

5.3 POST - สร้างข้อมูลใหม่

app.post('/api/items', (req, res) => {
    const newItem = {
        id: items.length + 1,
        name: req.body.name,
        description: req.body.description
    };
    items.push(newItem);
    res.status(201).json(newItem);
});

POST http://localhost:3000/api/items
Content-Type: application/json

Request Body:
{
  "name": "Item 3",
  "description": "Third item"
}

Response (ผลลัพธ์):
{
  "id": 3,
  "name": "Item 3",
  "description": "Third item"
}

5.4 PUT - แก้ไขข้อมูล

app.put('/api/items/:id', (req, res) => {
    const item = items.find(i => i.id === parseInt(req.params.id));
    if (!item) return res.status(404).json({ message: 'Item not found' });
    
    item.name = req.body.name;
    item.description = req.body.description;
    res.json(item);
});

PUT http://localhost:3000/api/items/1
Content-Type: application/json

Request Body:
{
  "name": "Updated Item 1",
  "description": "Updated description"
}

Response (ผลลัพธ์):
{
  "id": 1,
  "name": "Updated Item 1",
  "description": "Updated description"
}

5.5 DELETE - ลบข้อมูล

app.delete('/api/items/:id', (req, res) => {
    const index = items.findIndex(i => i.id === parseInt(req.params.id));
    if (index === -1) return res.status(404).json({ message: 'Item not found' });
    
    items.splice(index, 1);
    res.json({ message: 'Item deleted' });
});

DELETE http://localhost:3000/api/items/1

Response (ผลลัพธ์):
{ "message": "Item deleted" }

5.6 เริ่มทำงานของเซิร์ฟเวอร์

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

6. วิธีการรันโปรแกรม

6.1 ขั้นตอนที่ 1: เริ่มเซิร์ฟเวอร์

เปิด Command Prompt หรือ Terminal ที่ directory ของโปรเจค แล้วพิมพ์:

node server-api.js

หากเซิร์ฟเวอร์ทำงานสำเร็จ จะเห็นข้อความ:

Server running on http://localhost:3000

6.2 ขั้นตอนที่ 2: ทดสอบ API

มีหลายวิธีในการทดสอบ API:

วิธีที่ 1: ใช้ Web Browser (สำหรับ GET Request เท่านั้น)

เปิด Browser แล้วพิมพ์ URL:

http://localhost:3000/api/items

วิธีที่ 2: ใช้โปรแกรม Postman

1. ดาวน์โหลดและติดตั้งโปรแกรม Postman
2. สร้าง Request ใหม่
3. เลือก HTTP Method (GET, POST, PUT, DELETE)
4. ใส่ URL ของ API
5. สำหรับ POST และ PUT ให้ใส่ข้อมูลใน Body ในรูปแบบ JSON
6. กดปุ่ม Send เพื่อส่ง Request

วิธีที่ 3: ใช้คำสั่ง curl (Command Line)

# GET ข้อมูลทั้งหมด
curl http://localhost:3000/api/items

# GET ข้อมูลตาม ID
curl http://localhost:3000/api/items/1

# POST สร้างข้อมูลใหม่
curl -X POST http://localhost:3000/api/items -H "Content-Type: application/json" -d "{\"name\":\"Item 3\",\"description\":\"Third item\"}"

# PUT แก้ไขข้อมูล
curl -X PUT http://localhost:3000/api/items/1 -H "Content-Type: application/json" -d "{\"name\":\"Updated\",\"description\":\"Updated desc\"}"

# DELETE ลบข้อมูล
curl -X DELETE http://localhost:3000/api/items/1

7. การใช้งาน API บนหน้าเว็บ (HTML)

หลังจากสร้าง REST API Server แล้ว ขั้นตอนต่อไปคือการเรียกใช้ API จากหน้าเว็บ (Frontend) มีวิธีหลักๆ 2 วิธี คือ การใช้ Fetch API (Built-in ใน JavaScript) และการใช้ Axios Library

7.1 การใช้งาน Fetch API

Fetch API เป็น API ที่มีมาพร้อมกับ JavaScript สมัยใหม่ ไม่ต้องติดตั้งเพิ่มเติม ใช้สำหรับส่ง HTTP Request และรับ Response

7.1.1 GET - ดึงข้อมูลทั้งหมด

// ดึงข้อมูล items ทั้งหมด
fetch('http://localhost:3000/api/items')
    .then(response => response.json())  // แปลง Response เป็น JSON
    .then(data => {
        console.log(data);  // แสดงข้อมูลใน Console
        // นำข้อมูลไปแสดงบนหน้าเว็บ
        displayItems(data);
    })
    .catch(error => {
        console.error('เกิดข้อผิดพลาด:', error);
    });

7.1.2 GET - ดึงข้อมูลตาม ID

// ดึงข้อมูล item ที่มี id = 1
const itemId = 1;
fetch(`http://localhost:3000/api/items/${itemId}`)
    .then(response => {
        if (!response.ok) {
            throw new Error('ไม่พบข้อมูล');
        }
        return response.json();
    })
    .then(data => {
        console.log('ข้อมูล item:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.1.3 POST - สร้างข้อมูลใหม่

// สร้าง item ใหม่
const newItem = {
    name: 'Item 3',
    description: 'Third item'
};

fetch('http://localhost:3000/api/items', {
    method: 'POST',  // ระบุ HTTP Method
    headers: {
        'Content-Type': 'application/json'  // บอกว่าส่งข้อมูลเป็น JSON
    },
    body: JSON.stringify(newItem)  // แปลง Object เป็น JSON String
})
    .then(response => response.json())
    .then(data => {
        console.log('สร้างสำเร็จ:', data);
        alert('เพิ่มข้อมูลสำเร็จ!');
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.1.4 PUT - แก้ไขข้อมูล

// แก้ไข item ที่มี id = 1
const updatedItem = {
    name: 'Updated Item 1',
    description: 'Updated description'
};

fetch('http://localhost:3000/api/items/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(updatedItem)
})
    .then(response => response.json())
    .then(data => {
        console.log('แก้ไขสำเร็จ:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.1.5 DELETE - ลบข้อมูล

// ลบ item ที่มี id = 1
fetch('http://localhost:3000/api/items/1', {
    method: 'DELETE'
})
    .then(response => response.json())
    .then(data => {
        console.log(data.message);  // "Item deleted"
        alert('ลบข้อมูลสำเร็จ!');
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.1.6 การใช้ Async/Await (วิธีที่สะดวกกว่า)

// GET ข้อมูลด้วย async/await
async function getItems() {
    try {
        const response = await fetch('http://localhost:3000/api/items');
        const data = await response.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// POST ข้อมูลด้วย async/await
async function createItem(itemData) {
    try {
        const response = await fetch('http://localhost:3000/api/items', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(itemData)
        });
        const data = await response.json();
        console.log('สร้างสำเร็จ:', data);
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// เรียกใช้งาน
getItems();
createItem({ name: 'Item 4', description: 'Fourth item' });

7.2 การใช้งาน Axios

Axios เป็น HTTP Client Library ที่นิยมใช้กัน มีฟีเจอร์มากกว่า Fetch API และใช้งานง่ายกว่า

7.2.1 การติดตั้ง Axios

วิธีที่ 1: ใช้ CDN (เหมาะสำหรับไฟล์ HTML เดี่ยว)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

วิธีที่ 2: ติดตั้งผ่าน npm (สำหรับโปรเจคที่ใช้ Node.js)

npm install axios

7.2.2 GET - ดึงข้อมูลทั้งหมด

// ดึงข้อมูล items ทั้งหมด
axios.get('http://localhost:3000/api/items')
    .then(response => {
        console.log(response.data);  // ข้อมูลอยู่ใน response.data
        displayItems(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.2.3 GET - ดึงข้อมูลตาม ID

// ดึงข้อมูล item ที่มี id = 1
axios.get('http://localhost:3000/api/items/1')
    .then(response => {
        console.log('ข้อมูล item:', response.data);
    })
    .catch(error => {
        if (error.response) {
            // Server ตอบกลับมาแต่มี Error (404, 500, etc.)
            console.error('Error status:', error.response.status);
            console.error('Error data:', error.response.data);
        } else if (error.request) {
            // ส่ง Request ไปแล้วแต่ไม่ได้รับ Response
            console.error('No response:', error.request);
        } else {
            // เกิด Error อื่นๆ
            console.error('Error:', error.message);
        }
    });

7.2.4 POST - สร้างข้อมูลใหม่

// สร้าง item ใหม่
const newItem = {
    name: 'Item 3',
    description: 'Third item'
};

axios.post('http://localhost:3000/api/items', newItem)
    .then(response => {
        console.log('สร้างสำเร็จ:', response.data);
        alert('เพิ่มข้อมูลสำเร็จ!');
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.2.5 PUT - แก้ไขข้อมูล

// แก้ไข item ที่มี id = 1
const updatedItem = {
    name: 'Updated Item 1',
    description: 'Updated description'
};

axios.put('http://localhost:3000/api/items/1', updatedItem)
    .then(response => {
        console.log('แก้ไขสำเร็จ:', response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.2.6 DELETE - ลบข้อมูล

// ลบ item ที่มี id = 1
axios.delete('http://localhost:3000/api/items/1')
    .then(response => {
        console.log(response.data.message);
        alert('ลบข้อมูลสำเร็จ!');
    })
    .catch(error => {
        console.error('Error:', error);
    });

7.2.7 การใช้ Async/Await กับ Axios

// GET ข้อมูลด้วย async/await
async function getItems() {
    try {
        const response = await axios.get('http://localhost:3000/api/items');
        console.log(response.data);
        return response.data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// POST ข้อมูลด้วย async/await
async function createItem(itemData) {
    try {
        const response = await axios.post('http://localhost:3000/api/items', itemData);
        console.log('สร้างสำเร็จ:', response.data);
        return response.data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// PUT แก้ไขข้อมูล
async function updateItem(id, itemData) {
    try {
        const response = await axios.put(`http://localhost:3000/api/items/${id}`, itemData);
        console.log('แก้ไขสำเร็จ:', response.data);
        return response.data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// DELETE ลบข้อมูล
async function deleteItem(id) {
    try {
        const response = await axios.delete(`http://localhost:3000/api/items/${id}`);
        console.log(response.data.message);
        return response.data;
    } catch (error) {
        console.error('Error:', error);
    }
}

// เรียกใช้งาน
getItems();
createItem({ name: 'Item 4', description: 'Fourth item' });
updateItem(1, { name: 'Updated', description: 'Updated desc' });
deleteItem(2);

7.3 ตัวอย่างหน้าเว็บ HTML สมบูรณ์

ตัวอย่างการสร้างหน้าเว็บที่เรียกใช้ API สำหรับจัดการข้อมูล Items

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Item Manager - Fetch API</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .item {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #5568d3;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>Item Manager (Fetch API)</h1>
    
    <!-- ฟอร์มเพิ่มข้อมูล -->
    <div>
        <h2>เพิ่ม Item ใหม่</h2>
        <input type="text" id="itemName" placeholder="ชื่อ Item">
        <textarea id="itemDesc" placeholder="คำอธิบาย"></textarea>
        <button onclick="addItem()">เพิ่ม Item</button>
    </div>

    <!-- แสดงรายการ Items -->
    <div>
        <h2>รายการ Items</h2>
        <button onclick="loadItems()">โหลดข้อมูล</button>
        <div id="itemsList"></div>
    </div>

    <script>
        const API_URL = 'http://localhost:3000/api/items';

        // โหลดข้อมูลทั้งหมด
        async function loadItems() {
            try {
                const response = await fetch(API_URL);
                const items = await response.json();
                displayItems(items);
            } catch (error) {
                console.error('Error:', error);
                alert('ไม่สามารถโหลดข้อมูลได้');
            }
        }

        // แสดงข้อมูลบนหน้าเว็บ
        function displayItems(items) {
            const container = document.getElementById('itemsList');
            container.innerHTML = '';
            
            items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'item';
                div.innerHTML = `
                    <h3>${item.name}</h3>
                    <p>${item.description}</p>
                    <button onclick="editItem(${item.id})">แก้ไข</button>
                    <button onclick="deleteItem(${item.id})">ลบ</button>
                `;
                container.appendChild(div);
            });
        }

        // เพิ่มข้อมูลใหม่
        async function addItem() {
            const name = document.getElementById('itemName').value;
            const description = document.getElementById('itemDesc').value;

            if (!name || !description) {
                alert('กรุณากรอกข้อมูลให้ครบถ้วน');
                return;
            }

            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name, description })
                });
                const data = await response.json();
                alert('เพิ่มข้อมูลสำเร็จ!');
                document.getElementById('itemName').value = '';
                document.getElementById('itemDesc').value = '';
                loadItems();
            } catch (error) {
                console.error('Error:', error);
                alert('เกิดข้อผิดพลาด');
            }
        }

        // ลบข้อมูล
        async function deleteItem(id) {
            if (!confirm('คุณต้องการลบข้อมูลนี้หรือไม่?')) return;

            try {
                await fetch(`${API_URL}/${id}`, {
                    method: 'DELETE'
                });
                alert('ลบข้อมูลสำเร็จ!');
                loadItems();
            } catch (error) {
                console.error('Error:', error);
                alert('เกิดข้อผิดพลาด');
            }
        }

        // โหลดข้อมูลเมื่อเปิดหน้าเว็บ
        window.onload = loadItems;
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Item Manager - Axios</title>
    <!-- เพิ่ม Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .item {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            background: #f9f9f9;
        }
        button {
            background: #764ba2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #623a85;
        }
        button.delete {
            background: #e74c3c;
        }
        button.delete:hover {
            background: #c0392b;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>Item Manager (Axios)</h1>
    
    <!-- ฟอร์มเพิ่มข้อมูล -->
    <div>
        <h2>เพิ่ม Item ใหม่</h2>
        <input type="text" id="itemName" placeholder="ชื่อ Item">
        <textarea id="itemDesc" placeholder="คำอธิบาย"></textarea>
        <button onclick="addItem()">เพิ่ม Item</button>
    </div>

    <!-- แสดงรายการ Items -->
    <div>
        <h2>รายการ Items</h2>
        <button onclick="loadItems()">โหลดข้อมูล</button>
        <div id="itemsList"></div>
    </div>

    <script>
        const API_URL = 'http://localhost:3000/api/items';

        // โหลดข้อมูลทั้งหมด
        async function loadItems() {
            try {
                const response = await axios.get(API_URL);
                displayItems(response.data);
            } catch (error) {
                console.error('Error:', error);
                alert('ไม่สามารถโหลดข้อมูลได้');
            }
        }

        // แสดงข้อมูลบนหน้าเว็บ
        function displayItems(items) {
            const container = document.getElementById('itemsList');
            container.innerHTML = '';
            
            items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'item';
                div.innerHTML = `
                    <h3>${item.name} <small>(ID: ${item.id})</small></h3>
                    <p>${item.description}</p>
                    <button onclick="editItem(${item.id})">แก้ไข</button>
                    <button class="delete" onclick="deleteItem(${item.id})">ลบ</button>
                `;
                container.appendChild(div);
            });
        }

        // เพิ่มข้อมูลใหม่
        async function addItem() {
            const name = document.getElementById('itemName').value;
            const description = document.getElementById('itemDesc').value;

            if (!name || !description) {
                alert('กรุณากรอกข้อมูลให้ครบถ้วน');
                return;
            }

            try {
                const response = await axios.post(API_URL, {
                    name,
                    description
                });
                alert('เพิ่มข้อมูลสำเร็จ!');
                document.getElementById('itemName').value = '';
                document.getElementById('itemDesc').value = '';
                loadItems();
            } catch (error) {
                console.error('Error:', error);
                alert('เกิดข้อผิดพลาด');
            }
        }

        // แก้ไขข้อมูล
        async function editItem(id) {
            const name = prompt('ชื่อใหม่:');
            const description = prompt('คำอธิบายใหม่:');

            if (!name || !description) return;

            try {
                await axios.put(`${API_URL}/${id}`, {
                    name,
                    description
                });
                alert('แก้ไขข้อมูลสำเร็จ!');
                loadItems();
            } catch (error) {
                console.error('Error:', error);
                alert('เกิดข้อผิดพลาด');
            }
        }

        // ลบข้อมูล
        async function deleteItem(id) {
            if (!confirm('คุณต้องการลบข้อมูลนี้หรือไม่?')) return;

            try {
                await axios.delete(`${API_URL}/${id}`);
                alert('ลบข้อมูลสำเร็จ!');
                loadItems();
            } catch (error) {
                console.error('Error:', error);
                alert('เกิดข้อผิดพลาด');
            }
        }

        // โหลดข้อมูลเมื่อเปิดหน้าเว็บ
        window.onload = loadItems;
    </script>
</body>
</html>

7.4 เปรียบเทียบ Fetch API vs Axios

7.5 การแก้ปัญหา CORS

Access to fetch at 'http://localhost:3000/api/items' from origin 'null' 
has been blocked by CORS policy

วิธีแก้: เพิ่ม CORS Middleware ใน server-api.js

// ติดตั้ง CORS
npm install cors

// เพิ่มในไฟล์ server-api.js
const express = require('express');
const cors = require('cors');  // เพิ่มบรรทัดนี้

const app = express();

// เพิ่ม CORS Middleware
app.use(cors());  // อนุญาตทุกโดเมน
// หรือ
app.use(cors({
    origin: 'http://localhost:8080'  // อนุญาตเฉพาะโดเมนนี้
}));

app.use(express.json());
// ... โค้ดส่วนอื่นๆ

8. HTTP Status Codes

รหัสสถานะ HTTP (HTTP Status Codes) เป็นตัวเลข 3 หลักที่เซิร์ฟเวอร์ส่งกลับมาเพื่อบอกผลลัพธ์ของการประมวลผล Request

9. CRUD Operations

CRUD เป็นตัวย่อของคำศัพท์ในการจัดการข้อมูลพื้นฐาน 4 ประเภท:

• Create (สร้าง) = POST
• Read (อ่าน) = GET
• Update (แก้ไข) = PUT
• Delete (ลบ) = DELETE

10. แนวทางการพัฒนาต่อ

สำหรับระดับพื้นฐาน

1. เพิ่ม Validation - ตรวจสอบความถูกต้องของข้อมูลที่ส่งเข้ามา
2. เพิ่ม Error Handling - จัดการข้อผิดพลาดที่อาจเกิดขึ้น
3. เพิ่ม CORS - อนุญาตให้ Frontend จากโดเมนอื่นเรียกใช้ได้

สำหรับระดับกลาง

4. เชื่อมต่อฐานข้อมูลจริง - ใช้ MongoDB, MySQL หรือ PostgreSQL
5. เพิ่มระบบ Authentication - ระบบ Login/Register และ JWT Token
6. เพิ่ม Pagination - แบ่งหน้าสำหรับข้อมูลจำนวนมาก

สำหรับระดับสูง

7. ใช้ TypeScript - เพิ่มประสิทธิภาพและความปลอดภัยของโค้ด
8. เพิ่ม Testing - ใช้ Jest หรือ Mocha ทดสอบโค้ด
9. Deploy - นำขึ้น Cloud เช่น Heroku, AWS หรือ Azure

11. เคล็ดลับการเรียนรู้

11. การใช้งาน REST API ร่วมกับ MySQL (XAMPP)

ในส่วนนี้จะสอนวิธีการเชื่อมต่อ REST API กับฐานข้อมูล MySQL โดยใช้ XAMPP เป็นเซิร์ฟเวอร์ฐานข้อมูล แทนการเก็บข้อมูลในหน่วยความจำ (In-Memory) ซึ่งจะทำให้ข้อมูลไม่หายเมื่อปิดเซิร์ฟเวอร์

11.1 การติดตั้งและเตรียมความพร้อม

ขั้นตอนที่ 1: ติดตั้ง XAMPP

1. ดาวน์โหลด XAMPP จาก https://www.apachefriends.org/
2. ติดตั้งตามขั้นตอนบนหน้าจอ
3. เปิดโปรแกรม XAMPP Control Panel
4. คลิกปุ่ม "Start" ที่ MySQL เพื่อเริ่มเซิร์ฟเวอร์ฐานข้อมูล

ขั้นตอนที่ 2: สร้างฐานข้อมูล

1. คลิกปุ่ม "Admin" ที่ MySQL ใน XAMPP Control Panel (จะเปิด phpMyAdmin)
2. คลิกแท็บ "New" หรือ "สร้างฐานข้อมูลใหม่"
3. ตั้งชื่อฐานข้อมูล: rest_api_db
4. เลือก Collation: utf8mb4_unicode_ci
5. คลิกปุ่ม "Create"

ขั้นตอนที่ 3: สร้างตาราง items

รัน SQL Command ต่อไปนี้ใน phpMyAdmin:

CREATE TABLE items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- เพิ่มข้อมูลตัวอย่าง
INSERT INTO items (name, description) VALUES
('Item 1', 'First item'),
('Item 2', 'Second item');

ขั้นตอนที่ 4: ติดตั้ง MySQL Driver สำหรับ Node.js

เปิด Terminal ที่โฟลเดอร์โปรเจค แล้วรันคำสั่ง:

npm install mysql2

11.2 การเชื่อมต่อกับ MySQL

สร้างไฟล์ใหม่ชื่อ server-mysql.js สำหรับเชื่อมต่อกับ MySQL:

แบบที่ 1: การเชื่อมต่อแบบพื้นฐาน

const express = require('express');
const mysql = require('mysql2');

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

app.use(express.json());

// สร้างการเชื่อมต่อกับ MySQL
const connection = mysql.createConnection({
    host: 'localhost',      // ที่อยู่เซิร์ฟเวอร์
    user: 'root',           // ชื่อผู้ใช้ (Default ของ XAMPP คือ root)
    password: '',           // รหัสผ่าน (Default ของ XAMPP คือว่างเปล่า)
    database: 'rest_api_db' // ชื่อฐานข้อมูล
});

// ทดสอบการเชื่อมต่อ
connection.connect((err) => {
    if (err) {
        console.error('เชื่อมต่อฐานข้อมูลล้มเหลว:', err);
        return;
    }
    console.log('เชื่อมต่อกับ MySQL สำเร็จ!');
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

แบบที่ 2: การใช้ Connection Pool (แนะนำ)

const express = require('express');
const mysql = require('mysql2');

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

app.use(express.json());

// สร้าง Connection Pool สำหรับจัดการการเชื่อมต่อหลายๆ ตัว
const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'rest_api_db',
    waitForConnections: true,  // รอถ้าการเชื่อมต่อเต็ม
    connectionLimit: 10,       // จำนวนการเชื่อมต่อสูงสุด
    queueLimit: 0              // ไม่จำกัดคิว
});

// ใช้ Promise API (สำหรับ async/await)
const promisePool = pool.promise();

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

11.3 CRUD Operations กับ MySQL

ตัวอย่างโค้ดเต็มรูปแบบของ REST API ที่เชื่อมต่อกับ MySQL:

11.3.1 GET - ดึงข้อมูลทั้งหมด

// GET /api/items - ดึงข้อมูลทั้งหมด
app.get('/api/items', async (req, res) => {
    try {
        const [rows] = await promisePool.query('SELECT * FROM items');
        res.json(rows);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการดึงข้อมูล' });
    }
});

11.3.2 GET - ดึงข้อมูลตาม ID

// GET /api/items/:id - ดึงข้อมูลตาม ID
app.get('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [id]
        );
        
        if (rows.length === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        res.json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการดึงข้อมูล' });
    }
});

// ❌ ไม่ปลอดภัย (เสี่ยง SQL Injection)
const query = `SELECT * FROM items WHERE id = ${id}`;

// ✅ ปลอดภัย (ใช้ Prepared Statement)
const query = 'SELECT * FROM items WHERE id = ?';
const [rows] = await promisePool.query(query, [id]);

11.3.3 POST - สร้างข้อมูลใหม่

// POST /api/items - สร้างข้อมูลใหม่
app.post('/api/items', async (req, res) => {
    try {
        const { name, description } = req.body;
        
        // Validation
        if (!name || !description) {
            return res.status(400).json({ 
                message: 'กรุณากรอกข้อมูลให้ครบถ้วน' 
            });
        }
        
        // Insert ข้อมูลเข้าฐานข้อมูล
        const [result] = await promisePool.query(
            'INSERT INTO items (name, description) VALUES (?, ?)',
            [name, description]
        );
        
        // ดึงข้อมูลที่เพิ่งสร้างกลับมา
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [result.insertId]
        );
        
        res.status(201).json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการสร้างข้อมูล' });
    }
});

11.3.4 PUT - แก้ไขข้อมูล

// PUT /api/items/:id - แก้ไขข้อมูล
app.put('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const { name, description } = req.body;
        
        // Validation
        if (!name || !description) {
            return res.status(400).json({ 
                message: 'กรุณากรอกข้อมูลให้ครบถ้วน' 
            });
        }
        
        // อัปเดตข้อมูล
        const [result] = await promisePool.query(
            'UPDATE items SET name = ?, description = ? WHERE id = ?',
            [name, description, id]
        );
        
        // ตรวจสอบว่ามีการอัปเดตหรือไม่
        if (result.affectedRows === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        // ดึงข้อมูลที่อัปเดตแล้วกลับมา
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [id]
        );
        
        res.json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการแก้ไขข้อมูล' });
    }
});

11.3.5 DELETE - ลบข้อมูล

// DELETE /api/items/:id - ลบข้อมูล
app.delete('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        
        const [result] = await promisePool.query(
            'DELETE FROM items WHERE id = ?',
            [id]
        );
        
        if (result.affectedRows === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        res.json({ message: 'ลบข้อมูลสำเร็จ' });
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการลบข้อมูล' });
    }
});

11.4 ไฟล์ server-mysql.js เต็มรูปแบบ

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

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

// Middleware
app.use(cors());
app.use(express.json());

// สร้าง Connection Pool
const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'rest_api_db',
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});

const promisePool = pool.promise();

// =============== API Endpoints ===============

// GET /api/items - ดึงข้อมูลทั้งหมด
app.get('/api/items', async (req, res) => {
    try {
        const [rows] = await promisePool.query('SELECT * FROM items');
        res.json(rows);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการดึงข้อมูล' });
    }
});

// GET /api/items/:id - ดึงข้อมูลตาม ID
app.get('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [id]
        );
        
        if (rows.length === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        res.json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการดึงข้อมูล' });
    }
});

// POST /api/items - สร้างข้อมูลใหม่
app.post('/api/items', async (req, res) => {
    try {
        const { name, description } = req.body;
        
        if (!name || !description) {
            return res.status(400).json({ 
                message: 'กรุณากรอกข้อมูลให้ครบถ้วน' 
            });
        }
        
        const [result] = await promisePool.query(
            'INSERT INTO items (name, description) VALUES (?, ?)',
            [name, description]
        );
        
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [result.insertId]
        );
        
        res.status(201).json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการสร้างข้อมูล' });
    }
});

// PUT /api/items/:id - แก้ไขข้อมูล
app.put('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const { name, description } = req.body;
        
        if (!name || !description) {
            return res.status(400).json({ 
                message: 'กรุณากรอกข้อมูลให้ครบถ้วน' 
            });
        }
        
        const [result] = await promisePool.query(
            'UPDATE items SET name = ?, description = ? WHERE id = ?',
            [name, description, id]
        );
        
        if (result.affectedRows === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        const [rows] = await promisePool.query(
            'SELECT * FROM items WHERE id = ?',
            [id]
        );
        
        res.json(rows[0]);
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการแก้ไขข้อมูล' });
    }
});

// DELETE /api/items/:id - ลบข้อมูล
app.delete('/api/items/:id', async (req, res) => {
    try {
        const { id } = req.params;
        
        const [result] = await promisePool.query(
            'DELETE FROM items WHERE id = ?',
            [id]
        );
        
        if (result.affectedRows === 0) {
            return res.status(404).json({ message: 'ไม่พบข้อมูล' });
        }
        
        res.json({ message: 'ลบข้อมูลสำเร็จ' });
    } catch (error) {
        console.error('Database error:', error);
        res.status(500).json({ message: 'เกิดข้อผิดพลาดในการลบข้อมูล' });
    }
});

// เริ่มเซิร์ฟเวอร์
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

11.5 การรันโปรแกรม

11.6 การแก้ปัญหาที่พบบ่อย

11.7 Best Practices

11.8 ตัวอย่างการแยกไฟล์ Config

สร้างไฟล์ db.config.js สำหรับการตั้งค่า:

// db.config.js
module.exports = {
    host: process.env.DB_HOST || 'localhost',
    user: process.env.DB_USER || 'root',
    password: process.env.DB_PASSWORD || '',
    database: process.env.DB_NAME || 'rest_api_db',
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
};

นำไปใช้ใน server-mysql.js:

const express = require('express');
const mysql = require('mysql2');
const dbConfig = require('./db.config');

const pool = mysql.createPool(dbConfig);
const promisePool = pool.promise();

12. เคล็ดลับการเรียนรู้

14. แบบฝึกหัด

GET /api/items/search?name=Item 1

15. แหล่งข้อมูลเพิ่มเติม

• Express.js Official Documentation
• MDN Web Docs - HTTP
• REST API Tutorial
• Node.js Documentation
• Postman Learning Center