พื้นฐาน API & Backend Basics

มาถึงส่วนที่เป็น "ระบบหลังบ้าน" และ "ท่อส่งข้อมูล" ครับ ถ้าเปรียบเทียบหน้าเว็บที่เราทำมาทั้งหมด (HTML/CSS/JS/React) เป็น "หน้าร้าน" ที่สวยงาม Backend และ API ก็คือ "ห้องครัวและพนักงานส่งอาหาร" ที่คอยจัดการข้อมูลอยู่เบื้องหลังครับ

ในยุค Agentic Coding การเข้าใจพื้นฐานนี้สำคัญมาก เพราะ AI สามารถช่วยคุณเขียน Code เชื่อมต่อ API ได้ในพริบตา แต่คุณต้องเข้าใจ Logic ว่าข้อมูลมันไหลไปไหน

1. API คืออะไร?

API (Application Programming Interface) คือ "ตัวกลาง" ที่ทำให้แอปพลิเคชันคุยกันได้

ตัวอย่าง: เว็บของคุณ (Frontend) อยากรู้พยากรณ์อากาศ มันจะส่งคำขอไปหา API ของกรมอุตุฯ แล้ว API ก็จะส่งข้อมูลอุณหภูมิกลับมาให้

2. ภาษาที่ API คุยกัน (JSON)

ปัจจุบัน API ส่วนใหญ่คุยกันด้วยรูปแบบที่เรียกว่า JSON (JavaScript Object Notation) ซึ่งหน้าตาเหมือน Object ใน JavaScript ที่เราเรียนไปเลยครับ AI เข้าใจรูปแบบนี้ได้ดีที่สุด

{
  "user_id": 1,
  "name": "MilerDev",
  "status": "online"
}

3. วิธีการสั่งงาน API (HTTP Methods)

เวลาเราคุยกับ Backend เราต้องบอก "กริยา" ที่เราจะทำด้วย (เรียกว่า HTTP Verbs):

GET: ขอข้อมูล (เช่น ไปดึงรายการสินค้ามาดู)
POST: ส่งข้อมูลใหม่ไปเก็บ (เช่น สมัครสมาชิก, โพสต์สเตตัส)
PUT / PATCH: แก้ไขข้อมูลที่มีอยู่ (เช่น เปลี่ยนรหัสผ่าน)
DELETE: ลบข้อมูล

4. Backend Basics: ทำหน้าที่อะไรบ้าง?

ตัว Backend (Server) มีหน้าที่หลักๆ 3 อย่าง:

Authentication: เช็กว่า "คุณคือใคร" (ระบบ Login/Session)
Business Logic: คำนวณสิ่งสำคัญ (เช่น การตัดสต็อกสินค้า, คำนวณราคาส่วนลด)
Database Management: คุยกับฐานข้อมูลเพื่อบันทึกหรือดึงข้อมูลออกมา

5. ตัวอย่างการดึงข้อมูลใน Next.js (Frontend -> API)

ใน Next.js การดึงข้อมูล (Fetch) ทำได้ง่ายมากครับ:

// ตัวอย่างการดึงข้อมูลจาก API มาแสดงผล
async function UserProfile() {
  // 1. ยิงคำขอไปที่ API
  const response = await fetch('https://api.example.com/user/1');
  const data = await response.json();

  return (
    <div>
      <h1>ชื่อผู้ใช้: {data.name}</h1>
      <p>สถานะ: {data.status}</p>
    </div>
  );
}

6. ยุค Agentic Coding กับ Backend

ทำไมยุคนี้ Backend ถึง "ง่าย" ขึ้นสำหรับมือใหม่?

BaaS (Backend as a Service): คุณไม่ต้องตั้ง Server เอง แต่ใช้เครื่องมืออย่าง Supabase หรือ Firebase ซึ่ง AI สามารถเขียนคำสั่งเชื่อมต่อให้คุณได้ทันที
AI API Generation: คุณสามารถสั่ง Agent (เช่น Cursor) ว่า "ช่วยสร้าง API Route สำหรับบันทึกรายชื่อผู้ติดต่อลงฐานข้อมูลให้หน่อย" แล้วมันจะเจนทั้งตัวรับข้อมูลและตัวเชื่อมฐานข้อมูลให้เสร็จสรรพ

Roadmap การเรียนรู้ต่อจากนี้:

Database: เรียนรู้การเก็บข้อมูล (SQL เช่น PostgreSQL หรือ NoSQL เช่น MongoDB)
Supabase: ลองใช้ตัวนี้เป็น Backend ตัวแรก เพราะมันมีหน้า UI ให้จัดการข้อมูลง่ายมาก
Postman: เครื่องมือเอาไว้ "ลองยิง API" เพื่อทดสอบว่าข้อมูลที่ได้ถูกต้องไหม