ข้อมูลโครงการ
ชื่ออย่างเป็นทางการ
ระบบร้านค้าออนไลน์และคัสตอมสร้อยข้อมือ Bare & Bold
Bare & Bold (Custom Bracelet E-Commerce Platform)
หลักการและเหตุผล (RATIONALE)
ระบบที่รองรับการสั่งซื้อสินค้าออนไลน์และการคัสตอมสร้อยข้อมือเฉพาะบุคคล (Made-to-Order) โดยสามารถเลือกวัสดุชิ้นส่วนตกแต่งได้ตามความต้องการ พร้อมทั้งระบบหลังบ้านสำหรับพนักงานและผู้จัดการเพื่อความเป็นระเบียบและประสิทธิภาพในการดำเนินงาน
รายชื่อสมาชิกและบทบาท
| ลำดับ | รหัสนักศึกษา | ชื่อ-นามสกุล | บทบาทหน้าที่รับผิดชอบ | สถานะทีม |
|---|---|---|---|---|
| 1 | 67095025 | ณภัทร พลดงนอก | Project Manager / System Analyst | หัวหน้ากลุ่ม |
| 2 | 67136081 | ภาณุพัฒน์ อ่อนตา | Frontend Developer | นักพัฒนา |
| 3 | 67150301 | สุพิชญาณ์ ชื่นชม | Backend Developer | นักพัฒนา |
| 4 | 67146201 | ธราธร พัฒนพวงสิทธิ์ | Database Admin / Software Tester | นักทดสอบ/DBA |
วัตถุประสงค์โครงการ
01 / Requirement Analysis & Planning
วิเคราะห์ความต้องการและกำหนดขอบเขตระบบร้านค้าออนไลน์และการคัสตอมสร้อยข้อมือเฉพาะบุคคลของแบรนด์ Bare & Bold เพื่อตอบสนองความต้องการของผู้ใช้ในระบบได้ครบถ้วน
02 / System & Database Design
ออกแบบสถาปัตยกรรมระบบ โครงสร้างฐานข้อมูลเชิงสัมพันธ์ (PostgreSQL) และออกแบบประสบการณ์ผู้ใช้งาน (UI/UX) ทั้งส่วนหน้าร้าน (Storefront) และระบบหลังบ้าน (Backoffice)
03 / System Development
พัฒนาระบบด้วย Next.js และ Hono API ที่มีประสิทธิภาพ เชื่อมต่อระบบชำระเงิน Omise Payment Gateway และจำลองระบบขนส่งพัสดุด้วย Mock Shipping API ได้อย่างถูกต้องปลอดภัย
04 / System Testing
ดำเนินการทดสอบฟังก์ชันการทำงานหลัก (Functional Testing) และทดสอบ UAT ร่วมกับผู้ใช้งาน เพื่อป้องกันข้อผิดพลาดและความไม่ปลอดภัยของข้อมูลธุรกรรมการซื้อขาย
05 / Deployment & Maintenance
ติดตั้งระบบซอฟต์แวร์บนสภาพแวดล้อมจริงเพื่อเปิดบริการ และทำเอกสารข้อมูลจำเพาะเชิงเทคนิค (System Specification Doc) สำหรับนำมาใช้อ้างอิงเพื่อบำรุงรักษาและพัฒนาต่อยอดได้ง่าย
ผู้ใช้งานในระบบ (Actors)
1. ลูกค้า
- สมัครสมาชิก (Register)
- เข้าสู่ระบบ (Login)
- จัดการข้อมูลส่วนตัว (Profile Management)
- ค้นหาสินค้า และดูรายละเอียดสินค้า (สินค้าพร้อมส่ง และสินค้า Made-to-Order)
- เพิ่มสินค้าลงตะกร้า (Add to Cart)
- จัดการตะกร้าสินค้า (Cart Management)
- สั่งซื้อสินค้า (Place Order)
- ชำระเงิน (Payment)
- ติดตามคำสั่งซื้อ (Order Tracking)
- รายการโปรด (Wishlist)
- ติดต่อสอบถาม
2. พนักงาน (Staff)
- จัดการสินค้า (Product Management)
- จัดการหมวดหมู่สินค้า (Category Management)
- จัดการคำสั่งซื้อ (Order Management)
- จัดการการจัดส่ง (Shipping Management)
3. ผู้จัดการ (Manager / Admin)
- ★ ครอบคลุมสิทธิ์การทำงานทั้งหมดของพนักงาน (Staff)
- จัดการลูกค้า (Customer Management)
- จัดการการชำระเงิน (Payment Management)
- ดูรายงานและสถิติ (Reports & Analytics Dashboard)
- ตั้งค่าระบบ (System Settings)
ความสามารถหลักของระบบ
ระบบสมาชิก (Register / Login)
ระบบลงทะเบียนและเข้าใช้สำหรับ ลูกค้า ผู้ขาย และผู้ควบคุมแพลตฟอร์ม
ระบบจัดการสินค้า (Product Inventory)
อัปโหลดและอัปเดตข้อมูลรายการสินค้าปกติและสินค้าแบบคัสตอม (Made-to-Order)
ระบบค้นหาและซื้อขาย (Catalog, Cart & Payment)
ระบบกรองสินค้า ค้นหาด้วยคีย์เวิร์ด ตะกร้าสินค้า และหน้าชำระเงินที่สะดวกสบาย
ระบบจัดการสถานะคำสั่งซื้อ (Order Fulfillment)
อัปเดตกระบวนการทำรายการสั่งซื้อ ยืนยันคำสั่งซื้อคัสตอม และจำลองสถานะการขนส่งพัสดุ
ระบบรายงานยอดขาย (Revenue Dashboard)
สรุปยอดการขาย รายรับ และสถิติต่างๆ แบบกราฟกราฟฟิกเพื่อให้ร้านค้าวางแผนการผลิต
สถาปัตยกรรมระบบ
คลิกเลือกส่วนประกอบสถาปัตยกรรมเพื่อดูบทบาทการรับส่งข้อมูลในเชิงลึก
FRONTEND LAYERS
API SERVICES
INFRASTRUCTURE
ข้อมูลการทำงานของโหนด
buyer ui
หน้าเว็บส่วนของลูกค้า (Storefront) สำหรับเลือกชมสินค้า ค้นหา ออกแบบและสั่งทำกำไลคัสตอม รวมถึงชำระเงินออนไลน์ผ่านระบบ
เครื่องมือและเทคโนโลยี
FRONTEND LAYER
- React.js / Next.jsApp Router
- Tailwind CSS v4Styling
BACKEND & DATABASE
- Node.js / BunRuntime
- PostgreSQLNeon DB
- Cloudflare R2Object Storage
UTILITIES
- FigmaUI Design
- Git / GitHubVersion Control
- Mermaid DiagramVisualization
แนวทางการทดสอบระบบ
ทำการทดสอบระบบหยิบกำไลข้อมือใส่ตะกร้า คีย์ป้อนตัวเลือกแบบสั่งตัด ยืนยันการสั่งซื้อ การตรวจสอบค่า Request/Response ของ API โดยตรง และทดสอบฝั่ง Endpoint หลังบ้านร่วมกับ Postman เพื่อให้ส่งกลับข้อมูลที่ถูกต้องครบถ้วน
ให้ผู้ใช้งานจำลองสถานะบทบาทเพื่อสั่งซื้อและเปิดรับออเดอร์ร้านค้า (Manual Testing) ตรวจสอบความถูกต้องของแดชบอร์ดสรุปรายรับ การทำงานของปุ่ม ป้ายแจ้งสถานะ การแสดงผลหน้าสินค้า เพื่อการรับมอบงานและมอบหมายขั้นตอนการทำงานอย่างมีมาตรฐาน
ผลลัพธ์ที่คาดว่าจะได้รับ
ได้รับระบบตลาดซื้อขายกำไลข้อมือและข้อเท้าที่ครบวงจรและพร้อมเปิดให้บริการแก่ร้านค้าและลูกค้า
ฝั่งผู้ขายสามารถอัปโหลด อัปเดตรายการสินค้าแบบสั่งตัด (Made-to-Order) และตรวจสอบกราฟรายรับรวมอย่างสะดวก
ฝั่งผู้ซื้อได้รับประสบการณ์เข้าสู่ระบบ ออกแบบสีกำไล ขนาดข้อเท้า ส่งคำสั่งซื้อ และตรวจรับสถานะขนส่งพัสดุได้อย่างรวดเร็ว
จัดเตรียมเอกสารข้อมูลจำเพาะระบบ (SRS Specifications) ครบถ้วนเสร็จสมบูรณ์ถูกต้องตามกระบวนการซอฟต์แวร์วิศวกรรม
แผนการดำเนินงาน (Timeline)
SYSTEM ANALYSIS & DESIGN
วิเคราะห์ฟังก์ชันระบบ ออกแบบโครงร่างความต้องการ เขียน ER-Diagram ตารางความสัมพันธ์ฐานข้อมูล และจัดทำ UI Prototype (Figma)
FRONTEND FRAMEWORK DEVELOPMENT
ประกอบโครงร่างฝั่งไคลเอนต์ (Next.js) เขียนหน้าแสดงสินค้า ตะกร้าสะสม สั่งซื้อกำไลคัสตอม และหน้าแสดงรายงานผู้ขาย (Seller Dashboard)
BACKEND SERVICES & DB INTEGRATION
พัฒนาฝั่งหลังบ้านเชื่อมต่อ Node.js สร้าง API จัดเก็บลง Neon PostgreSQL บริหารจัดการอัปโหลดสลิปและรูปภาพผ่าน Cloudflare R2
SYSTEM TESTING & DEPLOYMENT
ทดสอบการทำงานของระบบ (UAT / Functional Testing) ทั้งฝั่ง API ด้วย Postman และ Manual UI Test แก้บัค และส่งโปรเจกต์รายวิชา