Flow 1 (Feature: RANDOM MENU) - trabnm1313/SDTP GitHub Wiki

User Flow

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

Flow 1 User Flow

UI Flow

Flow 1 UI Flow

Main Page

เป็นหน้าแรกที่ User จะได้เจอเมื่อเข้ามาในเว็บไซต์ ทำหน้าที่เป็นหน้าหลักในการเชื่อมไปยังหน้าอื่นๆต่อไป

ประกอบไปด้วยปุ่ม 3 ปุ่มที่สำคัญ คือ

  • ปุ่มสุ่ม โดยเมื่อกดจะแสดงผลไปที่หน้า Filter เพื่อที่ใช้งาน Feature Random Menu
  • ปุ่มสั่งซื้อ โดยเมื่อกดจะแสดงผลไปที่หน้า Food inStore Search เพื่อให้ User ค้นหาร้านอาหารตามเมนูที่ User ต้องการเลือกซื้อ
  • ปุ่มทำเอง โดยเมื่อกดจะแสดงผลไปที่หน้า Search for Recipe เพื่อให้ User ค้นหาสูตร/วิธีทำเมนูอาหารที่มีอยู่ในระบบ

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

  • ไม่มี

Menu Filtering

เป็นหน้าที่เข้ามาหลังจากการกดปุ่มสุ่มที่อยู่หน้า Main Menu โดยหน้านี้เป็นหน้าที่จะให้ User ป้อนเลือกตัวเลือกต่าง ๆ เกี่ยวกับเมนูที่ User ต้องการอยากจะให้ระบบสุ่มขึ้นมาให้

องค์ประกอบที่สำคัญ คือ

  • Form ของเหล่าตัวกรองต่าง โดยจะมาในรูปแบบของ Radio Button เช่น เมนูเส้น เมนูข้าว
  • ปุ่มย้อนกลับ ทำหน้าที่เป็นปุ่มสำหรับย้อนกลับไปที่หน้า Main Page

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

  • ข้อมูลตัวกรองทั้งหมดที่มีอยู่ในระบบ
  • ความสัมพันธ์กันของแต่ละตัวกรอง หมวดหมู่ ประเภทของตัวกรอก

Random Menu Display Page

เป็นหน้าที่จะแสดงผลการสุ่ม โดยจะนำเสนอให้ User เลือก 3 เมนู (หากมีเมนูที่เข้าข่ายกับตัวกรอกมากกว่า 2 เมนูขึ้นไป)

องค์ประกอบที่สำคัญ คือ

  • Card เมนูอาหาร ที่จะมีรูปภาพของอาหารนั้น ๆ อยู่
  • ปุ่มสุ่มใหม่ เพื่อให้ User ได้ทำการสุ่มเมนูขึ้นมาใหม่ หากเมนูที่ปรากฏนั้นยังไม่ถูกใจ User
  • Logo เป็นรูปภาพขนาดเล็กที่มีไว้เพื่อให้ User สามารถกดเพื่อกลับไปที่หน้า Main Page ได้
  • Pop-up Card ที่จะปรากฏขึ้นมาเมื่อ User กดไปที่เมนูอาหารที่ปรากฏอยู่บนหน้าจอ
    • รูปภาพอาหาร
    • ชื่อเมนูอาหาร
    • รายละเอียดสั้น ๆ ของอาหาร
    • ปุ่มวิธีทำ ที่จะทำหน้าที่แสดงผลไปที่หน้า Search for Recipe
    • ปุ่มซื้อ ที่จะทำหน้าที่แสดงผลไปที่หน้า Food inStore Search

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

  • ข้อมูลของอาหารที่ผ่านการคัดกรองมาเเล้ว ทั้งหมด 3 เมนู

Acceptance Test

Case No Case Name Case Decription Input Expected Result Test Result
1 สุ่มอาหารทั้งหมด สุ่มอาหารโดยไม่กำหนดเงื่อนไขใดๆ { tag1: *, tag 2: *, tag3: *} { randomList: [ {id: 1}, {id: 3}, {id: 6} ] } แสดงรายการเมนูสุ่มจำนวนไม่เกิน 3 เมนู
2 สุ่มอาหารเมนูข้าว สุ่มอาหารโดยกำหนดประเภทเป็นข้าว ไม่ระบุวิธีการปรุง และไม่กำหนดวัตถุดิบหลัก { tag1: ข้าว, tag 2: *, tag3: *} { randomList: [ {id: 1}, {id: 5}, {id: 6} ] } แสดงรายการเมนูสุ่มจำนวนไม่เกิน 3 เมนู
3 สุ่มอาหารเมนูข้าวกับผัด สุ่มอาหารโดยกำหนดประเภทเป็นเส้น กำหนดวิธีปรุงเป็นผัด และกำหนดวัตถุดิบหลักเป็นหมู { tag1: ข้าว, tag 2: ผัด, tag3: *} { randomList: [ {id: 1}, {id: 5}] } แสดงรายการเมนูสุ่มจำนวนไม่เกิน 3 เมนู
4 สุ่มอาหารเมนูเส้นกับหมู สุ่มอาหารโดยกำหนดประเภทเป็นเส้น ไม่ระบุวิธีการปรุง และกำหนดวัตถุดิบหลักเป็นหมู { tag1: เส้น, tag2: *, tag3: หมู} { randomList: [ {id: 2}, {id: 3} ] } แสดงรายการเมนูสุ่มจำนวนไม่เกิน 3 เมนู
5 สุ่มอาหารเมนูเส้นกับก๋วยเตี๋ยวและหมู สุ่มอาหารโดยกำหนดประเภทเป็นเส้น กำหนดประเภทของเส้นเป็นก๋วยเตี๋ยว และกำหนดวัตถุดิบหลักเป็นหมู { tag1: เส้น, tag2: ก๋วยเตี๋ยว, tag3: หมู} { randomList: [ {id: 2} ] } แสดงรายการเมนูสุ่มจำนวนไม่เกิน 3 เมนู
6 สุ่มอาหารเมนูเส้นกับขนมจีนและไก่ สุ่มอาหารโดยกำหนดประเภทเป็นเส้น กำหนดประเภทของเส้นเป็นขนมจีน และกำหนดวัตถุดิบหลักเป็นไก่ { tag1: เส้น, tag2: ขนมจีน, tag3: ไก่} { error: {status: 404, err: "Not Found"} } แสดงข้อความว่า "ไม่มีผลลัพธ์"

Data Sample for Acceptance Test

id name tag 1 tag 2 tag 3
1 ข้าวผัดกะเพราไก่ ข้าว ผัด ไก่
2 เส้นเล็กหมูน้ำตก เส้น ก๋วยเตี๋ยว(ไทย) หมู
3 ราเมงหมูมิโซะ เส้น ราเมงและอูด้ง หมู
4 สปาเก็ตตี้กุ้ง เส้น พาสต้า กุ้ง
5 ข้าวผัดหมูกรอบ ข้าว ผัด หมู
6 ข้าวแกงกะหรี่ไก่ ข้าว แกง ไก่

Technical

Frontend

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

Backend

  • Node.js
  • Express.js

BackendLogo

Random Menu API

ใข้สำหรับสุ่มเมนูอาหารมากสุด 3 เมนูโดยใช้ Filters/Tags ที่ User ใส่เข้ามา

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

Flow

Database: Firebase Cloud-FireStore

Menu Data Structure

Attributes Datatype
ID String (Auto generate)
name String
description String
recipe Object
tags Array[String]

Examples

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