- เป็นส่วนที่ Vue นั้น Render ออกมาเป็น UI ที่แสดงผลให้กับ User และเป็นส่วนหลักที่ User จะใช้ติดต่อกับ Pages และ Components ต่างๆ
- เป็น Root ของหน้าทุกหน้า โดยมีหน้าที่เปรียบเสมือน Renderer ที่จะแสดงผล Components ในทุกครั้งที่มีการเปลี่ยนหน้าผ่านตัว Router
- เป็นส่วนที่คอยทำหน้าที่เปลี่ยนเส้นทางไปในหน้าต่าง ๆ โดยทุกหน้าที่จะแสดงผลจะต้องมาลงทะเบียนที่ Router เพื่อระบุ Path ที่จะใช้ในการแสดงผลก่อนเสมอ
- เป็นส่วนที่แสดงผลหน้า Home คือ หน้าแรกที่ใช้ในการเข้าสู่ ตัวโปรแกรมสุ่มอาหาร
FilterMenu.Vue
- เป็นส่วนที่แสดงผลลัพธ์ ก็ต่อเมื่อ User กดปุ่ม สุ่มเลย! จากหน้า Home จากนั้นก็จะแสดงตัวเลือก เพื่อให้ User ทำการป้อน Input ในการเลือกประเภทของอาหารต่าง ๆ เพื่อใช้ในการสุ่มเมนูอาหาร
- เป็นส่วนที่แสดงผลหน้าผลลัพธ์ของการสุ่มที่ User ได้ทำการป้อน Input มาก่อนหน้านี้ โดยมี Components ภายในหลัก ๆ แบ่งเป็น 2 ส่วนคือ Pop Up และ Food Card และในหน้านี้จะมีการเชื่อมต่อกับ API เพื่อใช้ในการดึงข้อมูลผลลัพธ์การสุ่ม โดยจะทำการเรียก API ทันทีหลังจากการ Mounted ของ Vue
- ปุ่มกดแต่ละปุ่มจะถูกกำหนด Path เพื่อ Link ไปยังหน้าอื่น ๆ ผ่านการ Routing
- เป็นส่วนที่ให้ User เลือกรูปแบบต่าง ๆ ของอาหารประกอบด้วย ประเภทอาหาร วิธีการประกอบหาร และ วัตถุดิบหลักที่ใช้ เพื่อใช้ในการเรียก API สุ่มเมนูอาหาร
- เป็นหน้าต่างที่เด้งขึ้นมาเมื่อกดเมนูอาหารที่สุ่มได้ Pop Up จะแสดงชื่อเมนูอาหาร คำอธิบายเกี่ยวกับอาหาร และ ตัวเลือกว่าต้องการทำเองหรือสั่งซื้อจากร้านอาหาร
- เป็น API ของหน้าสุ่มอาหาร มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ ประเภทอาหารและส่วนประกอบของอาหาร โดยจะนำข้อมูลไปค้นหาอาหารที่ตรงกับ User ต้องการใน Database และส่งข้อมูลของอาหารจำนวน 3 เมนูในรูปแบบของ JSON มาแสดงยังฝั่งของ Frontend
- เป็น API ของหน้าสุ่มอาหาร มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ ประเภทอาหารและส่วนประกอบของอาหาร โดยจะนำข้อมูลไปค้นหาอาหารที่ตรงกับ User ต้องการใน Database และส่งข้อมูลของอาหารจำนวน 3 เมนูในรูปแบบของ JSON มาแสดงยังฝั่งของ Frontend
Menu Model
{
"menus": [
{
"IDStore": <String>,
"name": <String>,
"description": <String>,
"recipe": <Object>,
"tags": Array<String>,
"calorie": <Double>,
"imageURL": <String>,
},
{ ... },
{ ... }
]
}
- เป็นส่วนที่ใช้เก็บข้อมูล Database เมนูอาหาร (Menu) สำหรับให้ Random Menu Service เรียกใช้เพื่อทำการสุ่มเมนูอาหาร
- เป็นตัวควบคุมการรับ Request จากหน้าบ้านและส่งออก Response ในรูปแบบ JSON โดยจะรับ Request จากหน้าบ้านพร้อมชื่อร้านค้าที่ต้องการจะค้นหาและ Response ข้อมูลของร้านค้าแต่ละร้านที่มีชื่อตรงกันกับที่รับมา
- เป็น API ของหน้าร้านค้า มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ ชื่อของอาหารที่ User เลือก โดยจะนำข้อมูลไปค้นหาร้านอาหารที่มีอาหารชื่อตรงกับข้อมูลที่ได้รับมาใน Database และส่งข้อมูลเป็นหน้าร้านค้าที่มีอาหารที่ User ต้องการทั้งหมดในรูปแบบ JSON มาแสดงยังฝั่งของ Frontend
{
"stores": [
{
"name": <String>,
"description": <String>,
"location": <String>,
"rating": <Double>,
"joinDate": <Date>,
"phone": <String>,
"menus": Array<String>
}
]
}
- เป็นส่วนที่ใช้เก็บข้อมูล Database ร้านค้า (Store) สำหรับให้ GET Store Service เรียกใช้ข้อมูลของร้านค้า
- เป็นตัวควบคุม Request ที่ส่งมาจากหน้าบ้านและส่งออก Response กลับไปในรูปแบบของ JSON โดยจะรับ Order ที่ถูกสั่งจากหน้าบ้านมาและบันทึกเก็บลงไปในระบบและทำการเรียก API สำหรับการจัดการ Order และส่งข้อมูลสถานะคืนให้กลับหน้าบ้านผ่านทางตัว Response
- เป็น API มีไว้สำหรับการสั่งซื้ออาหาร มีการรับข้อมูลรายละเอียดทั้ง วิธีการชำระเงิน รายการหรือจำนวนอาหาร และส่งข้อมูลให้กับฝั่งของ User เป็นผลลัพธ์สรุปรายละเอียดการส่งอาหารในรูปแบบ JSON
{
userID: <String>
menu: [<String1>, <String2>, ...]
totalPrice: <Double>,
paymentMethod: <String>
}
- สำหรับการเก็บข้อมูลรายละเอียดของฝั่ง User เช่น ข้อมูลบัตรเครดิต ข้อมูลที่อยู่ และเก็บข้อมูลของฝั่งร้านค้า เช่น อาหาร ที่อยู่ของร้านอาหาร