แอปจัดการหนังสือ (Book App)

เว็บแอป Next.js สำหรับจัดการคลังหนังสือ เชื่อมต่อกับ Classroom API ที่รันผ่าน Docker ผู้ใช้สามารถสมัครสมาชิก, เข้าสู่ระบบ และจัดการข้อมูลหนังสือ (เพิ่ม/ดู/แก้ไข/ลบ) พร้อมอินเทอร์เฟซที่ออกแบบด้วย Material UI

ภาพรวมหน้าจอ

หน้า	ตัวอย่าง
หน้าหลัก – แสดงรายการหนังสือทั้งหมด พร้อมปุ่มเพิ่มหนังสือเมื่อเข้าสู่ระบบ
หน้าเข้าสู่ระบบ – ฟอร์มล็อกอินพร้อมปุ่มลัดไปสมัครสมาชิก
หน้ารายละเอียดหนังสือ – แสดงข้อมูลหนังสือแต่ละเล่ม และปุ่มแก้ไข/ลบสำหรับผู้ที่เข้าสู่ระบบ

---

ความสามารถหลัก

• ระบบสมาชิก
  • สมัครสมาชิกด้วยชื่อผู้ใช้ อีเมล และรหัสผ่าน
  • เข้าสู่ระบบ / ออกจากระบบ พร้อมเก็บสถานะผ่าน localStorage
• การจัดการหนังสือ
  • แสดงรายการหนังสือทั้งหมดจาก API
  • เปิดดูรายละเอียดหนังสือแต่ละเล่ม
  • เพิ่มหนังสือใหม่ (POST /api/books)
  • แก้ไขข้อมูลหนังสือ (PUT /api/books/{id})
  • ลบหนังสือ (DELETE /api/books/{id})
• ประสบการณ์ใช้งาน
  • UI ตอบสนองต่ออุปกรณ์ (Responsive) ด้วย Material UI 7
  • ฟอร์มมีการตรวจสอบข้อมูลเบื้องต้นและแสดง error/success
  • Dialog ยืนยันก่อนลบหนังสือ

---

การติดตั้งและเริ่มต้นใช้งาน

1. ติดตั้ง dependency

   npm install

2. ตั้งค่าไฟล์ .env.local ที่โฟลเดอร์ book-app

   NEXT_PUBLIC_API_URL=http://localhost:3000

   ค่าเริ่มต้นของ Classroom API ที่ Docker เปิดให้ใช้งานคือพอร์ต 3000

3. รันฝั่ง frontend (แนะนำให้เลือกพอร์ตอื่นจาก API เช่น 3001)

   npm run dev -- -p 3001

4. เปิดเบราว์เซอร์ที่ http://localhost:3001

ต้องเปิด Docker stack ของ Classroom API พร้อมฐานข้อมูล MongoDB ให้เรียบร้อยก่อนจึงจะใช้งานได้

---

สคริปต์ที่มีให้

คำสั่ง	อธิบาย
npm run dev	รัน Next.js โหมดพัฒนา (Turbopack)
npm run build	สร้างไฟล์โปรดักชัน
npm run start	เปิดเซิร์ฟเวอร์ด้วยไฟล์โปรดักชัน

---

โครงสร้างโปรเจ็กต์หลัก

book-app/
├─ src/
│  ├─ app/
│  │  ├─ page.tsx               # หน้า Home
│  │  ├─ login/page.tsx         # หน้าเข้าสู่ระบบ
│  │  ├─ register/page.tsx      # หน้าสมัครสมาชิก
│  │  ├─ books/new/page.tsx     # ฟอร์มเพิ่มหนังสือ
│  │  ├─ books/[id]/edit/page.tsx # ฟอร์มแก้ไขหนังสือ
│  │  └─ book/[id]/page.tsx     # หน้ารายละเอียดหนังสือ
│  ├─ libs/AuthService.ts       # ฟังก์ชันเรียก API ด้าน auth
│  └─ types/                    # ชนิดข้อมูล TypeScript
├─ image/                       # รูปตัวอย่างหน้าจอ
├─ package.json
└─ README.md

---

เคล็ดลับและการแก้ปัญหา

• หากเพิ่ม/แก้ไข/ลบหนังสือไม่ได้ ให้ตรวจสอบว่า token ยังอยู่ใน localStorage และ Docker API ทำงานอยู่
• ถ้าเจอปัญหาพอร์ตชนกัน (API ใช้ 3000) ให้ระบุ -p เมื่อรัน npm run dev
• สามารถล้างสถานะผู้ใช้ได้ด้วยการลบ key user ใน localStorage

---

แนวทางต่อยอด

• เพิ่มการยืนยันรหัสผ่านและข้อกำหนดความยาว/ความซับซ้อน
• รองรับการค้นหาและกรองหนังสือจากหน้าแรก
• เพิ่มการเก็บ token ใน cookie พร้อม refresh token
• เขียนชุดทดสอบ (เช่น Vitest/Playwright) สำหรับ flow หลัก

---

โปรเจ็กต์นี้เป็นส่วนหน้า (frontend) เท่านั้น การทำงานสมบูรณ์ขึ้นอยู่กับ Classroom API ที่รันอยู่ในเครื่องหรือเซิร์ฟเวอร์ของคุณเอง