🔄 Integration (การเชื่อมต่อระบบ)

ยินดีด้วย! คุณได้เรียนรู้ส่วนประกอบทั้ง 3 ส่วนแล้ว:

1. React (Frontend): หน้าบ้านสวยงาม
2. Laravel (Backend): หลังบ้านทรงพลัง
3. MySQL (Database): คลังข้อมูล

ในบทนี้ เราจะมาดูภาพรวมว่าทั้ง 3 ส่วนนี้ทำงานร่วมกันอย่างไรให้เกิดเป็น Full Stack Web Application

---

🏗️ Architecture (สถาปัตยกรรมระบบ)

เราจะใช้รูปแบบ Client-Server Architecture โดยแยกส่วนกันชัดเจน (Decoupled)

sequenceDiagram
    participant User as 👤 User (Browser)
    participant React as ⚛️ React App (Frontend)
    participant Laravel as 🛠 Laravel API (Backend)
    participant MySQL as 🗄️ Database

    Note over React, MySQL: Request Cycle

    User->>React: 1. คลิกปุ่ม "ดูสินค้า"
    React->>Laravel: 2. Send HTTP Request (GET /api/products)
    Note right of React: Fetch / Axios
    
    Laravel->>MySQL: 3. Query Data (SELECT * FROM products)
    Note right of Laravel: Eloquent ORM
    
    MySQL-->>Laravel: 4. Return Result Rows
    Laravel-->>React: 5. Return JSON Response
    
    React-->>User: 6. Update UI (Show List)
    Note right of React: Re-render

---

🔑 Key Components

1. HTTP Request (การขอข้อมูล)

React จะส่งคำขอไปยัง Laravel ผ่าน API Endpoint (เช่น http://localhost:8000/api/users)

• Method: GET (ดึง), POST (เพิ่ม), PUT (แก้ไข), DELETE (ลบ)
• Headers: บอกประเภทข้อมูล (Content-Type: application/json)
• Body: ข้อมูลที่ส่งไป (เช่น ชื่อ, ราคา)

2. API Response (การตอบกลับ)

Laravel จะตอบกลับมาเป็น JSON Format เสมอ

• Status Code: บอกผลลัพธ์ (200 OK, 201 Created, 404 Not Found, 500 Server Error)
• Data: เนื้อหาข้อมูล

3. Authentication (การยืนยันตัวตน)

เพื่อความปลอดภัย เราจะไม่ให้ใครก็ได้มาลบข้อมูล React จะต้องแนบ Token (เหมือนบัตรผ่าน) ไปกับทุก Request

• เราจะใช้ Laravel Sanctum ในการออก Token
• React จะเก็บ Token ไว้ใน localStorage หรือ cookie

---

🚀 พร้อมรึยัง?

ทฤษฎีพอแล้ว! ไปลงมือทำจริงใน Workshop กันเถอะ เราจะสร้างระบบ "จัดการสินค้า (Product Management)" ตั้งแต่เริ่มต้นจนจบ