# Thai Dessert Shop (เว็บไซต์ร้านขนมไทย)
เว็บไซต์ตัวอย่างสำหรับร้านขนมไทย — โครงงานแบบ static ที่ประกอบด้วย HTML, CSS, และ JavaScript (ไม่มี backend จริงในโค้ดต้นฉบับ: ข้อมูลตัวอย่างอยู่ในโฟลเดอร์ `mock/`).
## คำอธิบายสั้น ๆ
โปรเจ็คนี้เป็นเว็บไซต์หน้าร้านตัวอย่างสำหรับร้านขนมไทย (mock/demo). เหมาะสำหรับการสาธิต UI, การจัดการคำสั่งซื้อตัวอย่าง (mock data), และการทดลองกับ frontend logic เช่น POS และหน้าแอดมินแบบง่าย ๆ.
## โครงสร้างไฟล์ (สำคัญ)
- `index.html` — หน้าแรก (รายการสินค้า/หน้าแสดงผล)
- `admin.html` — หน้าแอดมิน (อาจมีฟีเจอร์จัดการ)
- `orders.html` — หน้าแสดงคำสั่งซื้อ
- `pos.html` — หน้าจอ POS สำหรับการขาย
- `css/` — ไฟล์สไตล์ (เช่น `styles.css`)
- `js/` — โค้ด JavaScript ของโปรเจ็ค
- `app.js`, `components.js`, `db.js`, `pos.js`, `orders.js`, `admin.js` — สคริปต์ frontend ต่าง ๆ
- `images/` — รูปภาพสินค้าและแบนเนอร์
- `mock/` — ข้อมูลตัวอย่างในรูปแบบ JSON
- `products.json`, `categories.json`, `orders.json`
## จุดประสงค์
- ตัวอย่างสำหรับการสร้าง storefront แบบ static
- โชว์การใช้งาน JavaScript ร่วมกับ JSON mock data
- ใช้เป็นฐานสำหรับขยายเป็นแอปที่มี backend/ฐานข้อมูลจริงในอนาคต
## วิธีรัน (ง่าย ๆ)
เว็บไซต์เป็น static file — คุณสามารถเปิด `index.html` โดยตรงในเบราว์เซอร์ได้ แต่เพื่อหลีกเลี่ยงปัญหา CORS เมื่อ fetch ไฟล์ `mock/*.json` แนะนำให้รันด้วย HTTP server แบบง่าย:
```bash
# Python 3
python3 -m http.server 8000
# แล้วเปิด http://localhost:8000 ในเบราว์เซอร์ (working directory ต้องเป็นโฟลเดอร์โปรเจ็ค)
```
หรือใช้ Node (http-server หรือ live-server):
```bash
# ถ้ามี npm ติดตั้ง
npx http-server -c-1 . 8000
# หรือ
npx live-server --port=8000
```
## พัฒนาและแก้ไข
- โค้ด frontend อยู่ใน `js/` — ดู `db.js` สำหรับการอ่าน/เขียนข้อมูลที่เชื่อมกับ `mock/*.json` (note: mock files เป็นไฟล์ static จึงไม่สามารถ "เขียน" ได้จาก browser จริง ๆ — การแก้ไขจำเป็นต้องทำบนฝั่งเซิร์ฟเวอร์หรือแก้ไฟล์ต้นฉบับใน repo)
- รูปภาพเก็บไว้ใน `images/` และไฟล์สไตล์ใน `css/styles.css`.
ข้อเสนอเพิ่มเติมถ้าจะขยายโปรเจ็ค:
- เพิ่ม backend (Express, Flask ฯลฯ) เพื่อให้ API สำหรับ CRUD ของสินค้าและคำสั่งซื้อ
- เปลี่ยน mock JSON เป็นฐานข้อมูลจริง (SQLite, PostgreSQL, MongoDB)
- เขียนชุดทดสอบ frontend เล็ก ๆ (เช่น Jest + jsdom ถ้าแยกเป็นโมดูล)
## ข้อจำกัดที่ควรทราบ
- ข้อมูลปัจจุบันเป็น mock JSON — ระบบไม่ได้เก็บคำสั่งซื้อแบบถาวร
- ไม่มีระบบล็อกอิน/สิทธิ์ผู้ใช้ (admin page อาจเปิดใช้งานโดยตรง)
## สิทธิ์ใช้งาน
ดูไฟล์ `LICENSE` ใน repository เพื่อดูข้อกำหนดลิขสิทธิ์