# ขอบเขตเว็บไซต์ “สะเร็น มาร์เก็ต”

แพลตฟอร์มร้านค้าออนไลน์สำหรับผลิตภัณฑ์ OTOP และผลิตภัณฑ์ชุมชนจังหวัดสุรินทร์ พัฒนาขึ้นเพื่อให้ผู้ผลิตรายย่อยมีช่องทางขายที่ดูแลเองได้ง่าย และช่วยให้ลูกค้าทั่วประเทศค้นพบเรื่องราวของสินค้า ซื้อสินค้า และติดตามคำสั่งซื้อได้ในที่เดียว

## 1. เป้าหมายของระบบ

- สร้างช่องทางจำหน่ายออนไลน์ที่ใช้งานได้บนมือถือ แท็บเล็ต และคอมพิวเตอร์
- รวมข้อมูลสินค้า OTOP ให้เป็นระบบ ค้นหาและแยกหมวดหมู่ได้
- ลดขั้นตอนการรับออเดอร์ การตรวจสอบการชำระเงิน และการแจ้งสถานะจัดส่ง
- แสดงรายงานยอดขายที่ผู้ประกอบการชุมชนอ่านและนำไปใช้ได้ง่าย
- เชื่อมการซื้อสินค้าเข้ากับการเดินทาง ผ่านคำแนะนำคาเฟ่ สถานที่ท่องเที่ยว ที่พัก และกิจกรรมชุมชน
- รองรับการทดลองกับกลุ่ม OTOP 5 กลุ่ม และสินค้าเริ่มต้น 10–50 รายการ

## 2. กลุ่มผู้ใช้งาน

### ลูกค้า

- ดูสินค้าใหม่ สินค้าขายดี และสินค้าตามหมวดหมู่
- ค้นหาจากชื่อสินค้า ชุมชน หรือประเภทสินค้า
- ดูรายละเอียด ราคา สต็อก วิธีดูแล และเรื่องราวผู้ผลิต
- เพิ่มสินค้าในตะกร้า ปรับจำนวน และดูยอดรวม
- กรอกข้อมูลจัดส่งและชำระผ่าน QR PromptPay
- ตรวจสอบสถานะคำสั่งซื้อด้วยเลขคำสั่งซื้อ
- ค้นหาและกรองคาเฟ่ สถานที่ท่องเที่ยว และที่พักตามประเภทหรืออำเภอ
- บันทึกสถานที่ เพิ่มจุดแวะ จัดลำดับทริป และเปิดเส้นทางในแผนที่ภายนอก
- ค้นพบสินค้าและผู้ผลิตที่อยู่ใกล้สถานที่ในเส้นทาง

### ผู้ขาย/กลุ่ม OTOP

- ดูภาพรวมยอดขาย ออเดอร์ใหม่ และสินค้าที่ใกล้หมด
- เพิ่ม แก้ไข ปิดการขาย หรือลบสินค้า พร้อมอัปโหลดรูปภาพ
- เปลี่ยนสถานะคำสั่งซื้อ: รอตรวจสอบ → เตรียมสินค้า → จัดส่งแล้ว → สำเร็จ
- บันทึกเลขพัสดุและแจ้งลูกค้า
- ดูรายงานยอดขายตามวัน เดือน หมวดสินค้า และสินค้าขายดี
- ส่งข้อมูลคาเฟ่ ที่พัก จุดท่องเที่ยว เวิร์กช็อป หรือสถานที่ของตนเพื่อให้ทีมตรวจสอบ
- ดูสถิติผู้เข้าชม การบันทึกเข้าทริป และการคลิกจากสถานที่ไปยังสินค้า

### ผู้ดูแลระบบ

- อนุมัติและจัดการบัญชีกลุ่ม OTOP
- จัดการหมวดหมู่ พื้นที่ชุมชน และข้อมูลส่วนกลาง
- ตรวจสอบรายการสินค้า คำสั่งซื้อ และสถานะระบบ
- ตรวจสอบ แก้ไข อนุมัติ ปิดเผยแพร่ และจัดหมวดหมู่สถานที่ใน Local Guide
- ส่งออกรายงานภาพรวมเป็น CSV/PDF ในระยะพัฒนาระบบจริง

## 3. โครงสร้างหน้าจอ

| พื้นที่ | หน้าจอหลัก | ความสามารถสำคัญ |
|---|---|---|
| หน้าร้าน | หน้าแรก | แบนเนอร์โปรโมชัน หมวดหมู่ สินค้าแนะนำ/มาใหม่ และร้านค้าในชุมชน |
| หน้าร้าน | รายการสินค้า | ค้นหา กรองหมวด ช่วงราคา เรียงสินค้า และแบ่งหน้า |
| หน้าร้าน | รายละเอียดสินค้า | รูปสินค้า เรื่องราวชุมชน ราคา สต็อก เพิ่มลงตะกร้า |
| หน้าร้าน | ตะกร้าและชำระเงิน | ปรับจำนวน ที่อยู่จัดส่ง สรุปยอด QR PromptPay |
| หน้าร้าน | ติดตามคำสั่งซื้อ | ค้นหาด้วยเลขออเดอร์และแสดงลำดับสถานะ |
| บัญชีลูกค้า | ภาพรวมสมาชิก | สถานะออเดอร์ล่าสุด สิทธิ์สมาชิก และสินค้าแนะนำ |
| บัญชีลูกค้า | คำสั่งซื้อ/รายการโปรด | กรองประวัติออเดอร์ ดูรายละเอียด ซื้อซ้ำ และบันทึกสินค้า |
| บัญชีลูกค้า | ที่อยู่/โปรไฟล์ | จัดการที่อยู่หลัก ข้อมูลติดต่อ และการแจ้งเตือน |
| บัญชีลูกค้า | ทริปของฉัน | ดูสถานที่ที่บันทึก เส้นทาง และกลับไปจัดลำดับทริป |
| Local Guide | ค้นพบสถานที่ | ค้นหาและกรองคาเฟ่ ที่เที่ยว ที่พัก อำเภอ และบรรยากาศ |
| Local Guide | รายละเอียดสถานที่ | เวลาเปิด ค่าใช้จ่าย สิ่งอำนวยความสะดวก แผนที่ และสินค้าใกล้เคียง |
| Local Guide | แผนที่ | หมุดสถานที่และร้านค้าบนแผนที่จริง กรองตามประเภท และเปิดรายละเอียดจากหมุด |
| Local Guide | Trip Planner | เพิ่ม/นำจุดแวะออก ดูเส้นทางตามถนนจริง ระยะทาง เวลาขับรถ เล่นเส้นทาง และส่งต่อไป Google Maps |
| Seller Center | เริ่มเปิดร้าน | กรอกข้อมูลร้าน สินค้าชิ้นแรก และบัญชีรับเงินใน 3 ขั้นตอน |
| Seller Center | ภาพรวมร้าน | ยอดขาย งานที่ต้องทำ สุขภาพร้าน และออเดอร์ล่าสุด |
| Seller Center | สินค้า/ออเดอร์ | จัดการเฉพาะสินค้าและออเดอร์ของร้าน พร้อมอัปเดตสถานะ |
| Seller Center | รายรับ/Insight | ดูรอบโอนเงิน ค่าธรรมเนียม แนวโน้ม และสินค้าทำเงิน |
| Seller Center | หน้าร้าน/ตั้งค่า | แก้เนื้อหาหน้าร้าน บัญชีรับเงิน การจัดส่ง และสมาชิกทีม |
| Seller Center | สถานที่ของฉัน | ส่งข้อมูลสถานที่/กิจกรรม ปักหมุดบนแผนที่ เพิ่มรูปสถานที่ และดูสถิติจาก Local Guide |
| Seller Center | ตำแหน่งบนแผนที่ | ปักหมุดร้านของตัวเองให้ขึ้นใน Local Guide หรือเลือกไม่แสดงที่อยู่ |
| หลังร้าน | ภาพรวม | ยอดขาย ออเดอร์ใหม่ กราฟ และแจ้งเตือนสต็อก |
| หลังร้าน | สินค้า | ค้นหา เพิ่ม แก้ไข สถานะ และจัดการสต็อก |
| หลังร้าน | คำสั่งซื้อ | กรองออเดอร์ เปลี่ยนสถานะ และบันทึกเลขพัสดุ |
| หลังร้าน | ร้านค้า/กลุ่ม OTOP | ตรวจสอบคำขอเปิดร้าน อนุมัติ ปฏิเสธ และดูสถานะร้าน |
| หลังร้าน | สถานที่แนะนำ | ตรวจสอบ อนุมัติ ปักหมุด และจัดการรูปของ Local Guide ทุกแห่ง |
| หลังร้าน | ลูกค้า | ดูจำนวนลูกค้า ประวัติการสั่งซื้อ และมูลค่ารวมรายคน |
| หลังร้าน | การเงิน | สรุปรายรับ ค่าธรรมเนียม ยอดรอโอน และรายการธุรกรรม |
| หลังร้าน | รายงาน | แนวโน้มยอดขาย หมวดขายดี และยอดเฉลี่ยต่อออเดอร์ |
| หลังร้าน | แบนเนอร์หน้าแรก | อัปโหลดรูป ตั้งลิงก์ ลำดับ และช่วงเวลาแสดงผลของแบนเนอร์ |
| หลังร้าน | ตั้งค่า | ข้อมูลแพลตฟอร์ม การแจ้งเตือน การชำระเงิน และความปลอดภัย |

## 4. กติกาการทำงานหลัก

- ระบบต้องไม่ให้สั่งเกินจำนวนคงเหลือ
- ออเดอร์จะถูกสร้างหลังลูกค้ายืนยันข้อมูลจัดส่งและการชำระเงิน
- QR PromptPay ต้องสร้างจากยอดสุทธิของออเดอร์และมีเวลาหมดอายุ
- ผู้ขายเห็นเฉพาะสินค้าและออเดอร์ของกลุ่มตนเอง ส่วนผู้ดูแลเห็นข้อมูลรวม
- ทุกการเปลี่ยนสถานะออเดอร์ต้องบันทึกวันเวลาและผู้ดำเนินการ
- สินค้าที่ปิดการขายหรือหมดสต็อกยังคงอยู่ในประวัติออเดอร์เดิม
- สถานที่จากผู้ประกอบการต้องผ่านการตรวจสอบก่อนเผยแพร่ และต้องบันทึกผู้แก้ไข/วันเวลา
- เวลาเปิด ราคา และข้อมูลติดต่อของสถานที่ต้องแสดงวันที่อัปเดตล่าสุดและมีช่องทางรายงานข้อมูลผิด
- ระยะทางและเวลาใน Trip Planner เป็นค่าประมาณ ผู้ใช้ต้องตรวจสอบเส้นทางจริงก่อนเดินทาง

## 5. ข้อมูลหลักของระบบ

- `users`: บัญชีผู้ใช้ บทบาท และสถานะ
- `communities`: กลุ่ม OTOP ที่อยู่ ผู้ติดต่อ และบัญชีรับเงิน
- `categories`: หมวดสินค้า
- `products`: ข้อมูลสินค้า ราคา สต็อก รูปภาพ และสถานะ
- `orders`: ผู้ซื้อ ที่อยู่ ยอดรวม สถานะการชำระเงินและจัดส่ง
- `order_items`: รายการสินค้า จำนวน และราคาขณะสั่งซื้อ
- `payments`: เลขอ้างอิง QR จำนวนเงิน หลักฐาน และสถานะตรวจสอบ
- `shipments`: ผู้ให้บริการขนส่ง เลขพัสดุ และประวัติสถานะ
- `places`: ชื่อสถานที่ ประเภท รายละเอียด ที่อยู่ พิกัด เวลาเปิด ค่าใช้จ่าย สถานะ และเจ้าของข้อมูล
- `place_media`: รูปภาพ คำบรรยาย ลำดับ และสิทธิ์การใช้งาน
- `place_amenities`: สิ่งอำนวยความสะดวกและข้อจำกัดของสถานที่
- `place_favorites`: สถานที่ที่ลูกค้าบันทึกไว้
- `itineraries`: แผนทริป วันที่ เจ้าของ และสถานะการแชร์
- `itinerary_items`: จุดแวะ ลำดับ เวลาโดยประมาณ และหมายเหตุ
- `place_product_links`: ความสัมพันธ์ระหว่างสถานที่ ร้านค้า และสินค้าใกล้เคียง

## 6. ข้อกำหนดด้าน UI และคุณภาพ

- Mobile-first และรองรับหน้าจอตั้งแต่ 320px ขึ้นไป
- ภาพลักษณ์ต้องสื่อถึง local marketplace รุ่นใหม่ ไม่ใช้รูปแบบราชการหรือ OTOP แบบดั้งเดิมเป็นภาษาภาพหลัก
- ใช้ bottom navigation บนมือถือเพื่อเข้าถึงช้อป ตะกร้า เปิดร้าน และติดตามออเดอร์ได้ด้วยนิ้วโป้ง
- ผู้ขายใหม่ต้องเปิดร้าน ลงสินค้าชิ้นแรก และผูกช่องทางรับเงินได้ภายใน flow เดียวไม่เกิน 3 ขั้นตอน
- ขนาดตัวอักษรและปุ่มเหมาะกับผู้ใช้งานสูงอายุ ปุ่มสัมผัสไม่น้อยกว่า 44px
- ใช้ภาษาไทยที่ตรงไปตรงมา พร้อมสถานะและข้อความผิดพลาดที่บอกวิธีแก้
- ใช้งานด้วยคีย์บอร์ดได้ มี focus state ชัดเจน และรองรับ `prefers-reduced-motion`
- ภาพสินค้าต้องมี alt text; สีข้อความและปุ่มต้องมี contrast ตาม WCAG 2.1 AA
- หน้าแรกควรโหลดเนื้อหาหลักภายใน 2.5 วินาทีบนเครือข่ายมือถือทั่วไปเมื่อขึ้นระบบจริง
- ใช้ HTTPS, hash รหัสผ่าน, ป้องกัน SQL injection/XSS/CSRF และสำรองฐานข้อมูล

## 7. เทคโนโลยีเป้าหมาย

- Frontend: HTML5, CSS3, JavaScript (สามารถย้ายเป็น framework ภายหลัง)
- Backend: PHP หรือ Node.js แบบ REST API
- Database: MySQL
- Payment: PromptPay QR ผ่านผู้ให้บริการที่รองรับ callback/webhook
- รูปภาพ: Object storage หรือพื้นที่จัดเก็บที่มีการย่อและบีบอัดภาพอัตโนมัติ

## 8. เกณฑ์รับมอบ MVP

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

## 9. สิ่งที่ยังไม่รวมใน MVP

- ระบบหลายภาษา สกุลเงินต่างประเทศ และการขายข้ามประเทศ
- ระบบสมาชิกสะสมแต้ม คูปองซับซ้อน และ affiliate
- การเชื่อม marketplace ภายนอกหรือระบบบัญชี
- ระบบขนส่งหลายผู้ให้บริการแบบคำนวณราคา real-time
- ระบบจองห้องพัก จองโต๊ะ ตั๋วเข้าชม การยืนยันห้องว่าง และชำระค่าบริการสถานที่
- ระบบนำทาง turn-by-turn หรือการรับรองว่าเวลาเปิด/ราคาเป็นข้อมูล real-time
- แอปพลิเคชัน iOS/Android แบบ native

## 10. ขอบเขตของต้นแบบใน repository นี้

ต้นแบบนี้เป็น responsive frontend ที่มีข้อมูลจำลองและ interaction สำหรับการนำเสนอ/ทดสอบ UX ครบตามผู้ใช้งานหลัก 3 กลุ่ม:

- ลูกค้า/ผู้เยี่ยมชม: `index.html` สำหรับเลือกซื้อ, `discover.html` สำหรับ Local Guide และ Trip Planner และ `account.html` สำหรับบัญชีสมาชิก ออเดอร์ รายการโปรด ทริป ที่อยู่ และโปรไฟล์
- ผู้ขาย/กลุ่ม OTOP/ผู้ประกอบการท่องเที่ยว: `seller.html` สำหรับเริ่มเปิดร้านใน 3 ขั้นตอน จัดการร้าน สินค้า ออเดอร์ รายรับ Insight หน้าร้าน สถานที่ และการตั้งค่า
- ผู้ดูแลระบบ: `admin.html` สำหรับดูภาพรวม Marketplace อนุมัติร้านค้าและสถานที่ จัดการออเดอร์ สินค้า ลูกค้า การเงิน รายงาน และตั้งค่าระบบ

ทุกพื้นที่มีเมนูสลับบทบาทสำหรับสาธิต แต่ระบบจริงต้องตรวจสอบสิทธิ์จาก session ฝั่ง server และห้ามอนุญาตให้เข้าถึงด้วยการเปลี่ยน URL เพียงอย่างเดียว

ย่อหน้านี้อธิบายสถานะของต้นแบบ HTML ใน `prototype/` เท่านั้น ระบบที่ใช้งานจริงในโฟลเดอร์หลัก
ได้เชื่อม backend แล้วทั้งหมด: บันทึกลง MySQL, ตรวจสิทธิ์ตามบทบาทจาก session ฝั่งเซิร์ฟเวอร์,
ยืนยันตัวตนด้วยรหัสผ่านที่ hash, พิกัดจริงของสถานที่, QR พร้อมเพย์ตามมาตรฐาน EMVCo
ที่สแกนจ่ายได้จริง, อัปโหลดรูปสินค้าและสลิปจริง และส่งออกรายงานเป็น CSV/Excel ได้

ส่วนที่ยังไม่ได้ทำคือ webhook ตัดยอดอัตโนมัติจากผู้ให้บริการพร้อมเพย์ — ปัจจุบันใช้การอัปโหลด
สลิปแล้วให้ร้านค้าตรวจสอบ พร้อมระบบตรวจจับสลิปซ้ำด้วย hash และ perceptual fingerprint