New Features - trabnm1313/SDTP GitHub Wiki

User Flow

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

New Feature User Flow

UI Flow

New Feature UI Flow

Main Page

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

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

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

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

  • ไม่มี

Search for Recipe

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

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

  • Search bar ที่มีไว้สำหรับใส่ชื่อเมนูที่ต้องการค้นหา
  • Filter ที่เป็นตัวกรอกสำหรับจำกัดการแสดงผลเมนูที่ค้นหามาได้

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

  • ข้อมูลเมนูอาหารที่มีชื่อตรงกันกับที่ค้นหา

Recipe

เป็นหน้าที่จะแสดงผลสูตรอาหารนั้นๆ รายละเอียดทั้งหมดของสูตรจะถูกแสดงอยู่ในหน้านี้

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

  • รูปอาหาร
  • ข้อมูลอาหาร ซึ่งประกอบไปด้วย
    • ชื่อเมนูอาหาร
    • ส่วนผสม
    • วิธีการทำ
  • ปุ่มหัวใจ (สำหรับ feature favorite ที่จะมีเพิ่มเติมในอนาคต)
  • ปุ่มย้อนกลับ

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

  • ข้อมูลของอาหารที่ถูกเลือก

Acceptance Test

Case No Case Name Case Description Input Expected Result Test Result
1 หาอาหารจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search {name: "ยำขนมจีน"} {"message": "OK","menu": [{"id": "14","name":"ยำขนมจีน",...}]} แสดงเมนูอาหารทั้งหมดที่มีชื่อ "ยำขนมจีน"
2 หาอาหารจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search {name: "ก๋วยเตี๋ยวไก่ตุ๋นมะระ"} {"message": "OK","menu": [{"id": "11","name": "ก๋วยเตี๋ยวไก่ตุ๋นมะระ",...}]} แสดงเมนูอาหารทั้งหมดที่มีชื่อว่า "ก๋วยเตี๋ยวไก่ตุ๋นมะระ"
3 หาอาหารจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search {name: "ขนมจีนผัดขี้เมากุ้ง"} {"message": "OK","menu": [{{"id": "12","name": "ขนมจีนผัดขี้เมากุ้ง",...}]} แสดงเมนูอาหารทั้งหมดที่มีชื่อว่า "ขนมจีนผัดขี้เมากุ้ง"
4 หาอาหารจากชื่อ หาอาหารจากชื่อที่ใส่ไปในช่อง Search {name: ""} {"status": 400,"err": "Missing name menu parameter."} แสดง Error status 400

Data Sample for Acceptance Test

id name
14 ยำขนมจีน
11 ก๋วยเตี๋ยวไก่ตุ๋นมะระ
12 ขนมจีนผัดขี้เมากุ้ง

Technical

Frontend

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

Backend

  • Node.js
  • Express.js

BackendLogo

Search Menu API

ใข้สำหรับค้นหาเมนูอาหารที่ User สนใจตาม ชื่ออาหาร และ Filters/Tags ที่ User ใส่เข้ามา

End Point "/searchMenu"
Port 3083
Request GET
Response JSON Array[Object]
Status Message
 200 OK
400 Missing name menu parameter
404 Not Found
500 Internal Server Error

Flow

flow backend

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** ⚠️