Flow 2 - trabnm1313/SDTP GitHub Wiki

User Flow (feature getfood and Store discription)

ผู้ใช้งานหลัก: Customer

  • โดยลูกค้าจะมี 2 เส้นทางที่สามารถใช้งาน Feature นี้ได้
  1. เข้าใช้งานโดยตรงผ่านทางหน้า Main Page โดยเลือกสั่งซื้อ เเล้วทำการค้นหาชื่อเมนูอาหารที่ user ต้องการ UserFlow-Way1
  2. เข้าใช้งานได้ผ่านทางการใช้งานระบบสุ่ม หลังจากที่ลูกค้าพอใจกับเมนูที่ระบบสุ่มขึ้นมาให้ แล้วเลือกสั่งซื้อ ระบบจะทำการค้นหาร้านค้าที่มีเมนูนั้นขายให้โดยอัติโนมัติ UserFlow-Way1

UI Flow

Main Page

เป็นหน้าแรกที่ผู้ใช้งานจะได้เจอที่เมื่อเข้ามาในเว็บไซต์ ทำหน้าที่เป็นหน้าหลักในการเชื่อมไปยังหน้าอื่นๆต่อไป (อ่านเพิ่มเติมได้ที่ Flow 1 Main Page)

Random Menu Display Page

เป็นหน้าที่จะแสดงผลการสุ่มเมนูอาหารของระบบ โดยจะนำเสนอให้ผุ้ใช้งานเลือก 3 เมนู (อ่านเพิ่มเติมได้ที่ Flow 1 Random Menu Display Page)

Search Food in Store

เป็นหน้าค้นหาร้านค้าที่มีเมนูอาหารต่างๆขาย โดยจะสามารถค้นหาได้โดยระบุชื่อเมนูอาหารที่ต้องการสั่งซื้อลงในช่องค้นหาที่ด้านบนของหน้าเว็บ จะประกอบไปด้วย 2 ส่วนด้วยกันก็คือ

  1. ส่วนช่องการค้นหาด้านบน เป็นส่วนที่เอาไว้ให้ผู้ใช้งานกรอกชื่อเมนูอาหารเพื่อค้นหาร้านอาหารที่มีเมนูนั้นๆขายอยู่
  2. ส่วนของการแสดงผลการค้นหา เป็นจุดที่อยู่ตรงกลางหน้าจอโดยจะแสดงร้านค้าต่างๆ ที่มีเมนูอาหารที่ผู้ใช้ได้ค้นหาให้ผู้ใช้งานได้เลือกซื้ออาหารจากร้านค้านั้นๆ ในส่วนนี้จะมีการแสดงข้อมูลรายละเอียดร้านค้าดังนี้ ชื่อร้านค้า ชื่อเมนูอาหาร(แต่ละร้านค้าอาจจะเรียกไม่เหมือนกัน) รูปภาพเมนูนั้นๆ ที่อยู่ของร้านค้า ราคาของอาหาร และคะแนนของอาหารจานดังกล่าว หรือหากไม่มีร้านค้าที่มีอาหารที่ค้นหาอยู่เลย ก็จะแสดงผลการค้นหาว่าไม่มีร้านค้าที่ขายอาหารนั้นๆแทน

ข้อมูลที่จำเป็นต้องใช้สำหรับหน้านี้

  • ข้อมูลของร้านอาหารที่มีอาหารที่ค้นหาอยู่

Acceptance Test

Case No Case Name Case Description Input Expected Result Test Result
1 หาอาหารจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search แบบเจาะจง {name: "ข้าวผัดหมู"} {
storeID: "75bce362-1439-430e-affb-33e9ee175c80",
storeName: "รัศมีขายอาหาร",
menu: [a62efc05-373e-4308-a834-1d8940803a6a]
}		 แสดงเมนูอาหารทั้งหมดที่มีชื่อ "ข้าวผัดหมู"
2 หาอาหารหลายๆชนิดจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search โดยไม่เจาะจงชื่อเมนู {name: "ข้าวผัด"} {
storeID: "75bce362-1439-430e-affb-33e9ee175c80",
storeName: "รัศมีขายอาหาร",
menu: [a62efc05-373e-4308-a834-1d8940803a6a, eb0f912c-ca6a-4144-af30-caf31b8dbfb6]
}		 เมนูอาหารทั้งหมดที่มีชื่อว่า "ข้าวผัด"
3 หาอาหารจากชื่่อที่ไม่มีอยู่จริง หาอาหารจากชื่อที่ใส่ไปในช่อง Search {name: "บ๋วยโชยุราดวาซาบิ"} {error: {status: 404, err: "Not Found" }} Error ว่าไม่พบอาหารที่ Search

Data Sample for Acceptance Test

Store ID Store Name Store Description Menu Location
"75bce362-1439-430e-affb-33e9ee175c80" "รัศมีขายอาหาร" “ร้านอาหารไทย รสเด็ด ราคาถูก วิวสวย” 1. ข้าวผัดหมู
2. ข้าวผัดไก่
3. ก๋วยเตี๋ยว
4. ส้มตำ
“10-2/12 ถนนเทพารักษ์ อำเภอบางพลี ตำบลบางปลา จังหวัดเลย”
"55404108-c90c-4922-960c-fe801ff7002c" “สมชายก๋วยเตี๋ยว” “ร้านอาหารตะวันออก สวยหรูถูกใจคุณผู้ชาย” 1. แฮมเบอร์เกอร์
2. สปาเก็ตตี้
3. ซุปเห็ดแชมปิยอง
4. หมูอบทรัฟเฟิล
 “52/51 กรุงเทพมหานคร” ถนนศรีนครินทร์ Chin”

Technical

Frontend

Frontend flow2

  • HTML
  • CSS
  • Bootstrap
  • Vue.js
  • Axios

Backend

Backend Flow2

  • Node.js
  • Express.js

BackendLogo

Store API

ใข้สำหรับค้นหาเมนูอาหารโดยใช้ ชื่อเมนูอาหาร ที่ User ใส่เข้ามา

End Point "/search/menu"
Port 9494
Request GET
Parameters ชื่อเมนูอาหาร ที่รับเข้ามา
Response JSON Array[Object]
Status Message
 200 OK
400 Bad Request: หากไม่ได้รับ Parameter ที่ถูกต้อง
404 Not Found: หากไม่มีผลลัพธ์การค้นหา
500 Internal Server Error: หาก Server backend เกิดข้อผิดพลาด

Flow

GetStore Flow

Database: Firebase Cloud-FireStore

Store Data Structure

Attributes Datatype
storeID String (Auto generate)
storeName String
menu Array[Menu]

Examples

  • Collection: Store

  • Attributes:

      `Store: { 

  storeID: “dff1dba8-df57-4819-8c8e-a6859247aac1”, 

  storeName: “รัศมีขายอาหาร”, 

  menu: [{  ID: "a62efc05-373e-4308-a834-1d8940803a6a", 
                    name: "ข้าวผัดหมู", 
                    description: "ข้าวที่นำไปผัดกับหมูใส่ซอสปรุงรสและเครื่องเขียง", 
                    recipe: { "Steps": ["เตรียมวัสถุดิบ", "นำข้าวลงไปผัด", "ใส่น้ำตาล และ น้ำปลา 2 ช้อนโต๊ะ", "ใส่หมู"],  
                              "Ingredient": Array [{ "item": "หมู", "value": 500g },{ "item": "ข้าว" "value": 100g }] }, 
                    tags: ["ข้าว", "หมู", "ผัด"] },
                 {  ID: "eb0f912c-ca6a-4144-af30-caf31b8dbfb6", 
                    name: "ข้าวผัดไก่", 
                    description: "ข้าวที่นำไปผัดกับไก่คลุกกับซอสปรุงรส", 
                    recipe: { "Steps": ["เตรียมวัสถุดิบที่ใช้ในการประกอบอาหาร", "นำข้าวลงไปผัด", "ใส่น้ำตาลและซอสปรุงรส 1 ช้อนโต๊ะ", "ใส่ไก่"], 
                              "Ingredient": Array [{ "item": "ไก่", "value": 600g },{ "item": "ข้าว" "value": 100g }] }, 
                    tags: ["ข้าว", "ไก่", "ผัด"] }]
         }`
⚠️ **GitHub.com Fallback** ⚠️