Project Structure - Kanapakan/MoodMent-Project-SW-dev-tool GitHub Wiki

Frontend

HTML Protocol

• React จะประมวลผลออกมาให้เป็นหน้าต่าง UI เพื่อติดต่อกับ User ซึ่งจะทำให้ผู้ใช้งานสามารถเข้าถึง เว็บไซต์ในหน้าต่างๆได้

App.js

• ส่วนที่แสดงผล Component ต่าง ๆ ด้วยที่ React จะมีการจัดในรูปแบบเป็นลำดับชั้น App.js จึงเป็น Component บนสุดในลำดับชั้น และจะมีการ render ตามที่ได้ทำการกำหนดไว้ใน Router

Router

• ส่วนที่เอาไว้เปลี่ยนไปยังหน้าต่าง ๆ โดยกำหนดว่า URL ที่มี path ที่เข้ามาผ่านทาง Browser นั้นตรงกันกับที่ประกาศไว้ใน Route หรือไม่ ถ้าตรงก็จะทำการ render ตามหน้าที่ได้ทำการกำหนดไว้ โดยใช้ Hook ชื่อ useRoutes ในการทำ Router config

Main page with Start Assessment Modal

• แสดงผลในหน้า Main ที่มี card สำหรับให้ผู้ใช้กดเพื่อใช้งาน Feature ต่าง ๆ และมี Modal ขึ้นมาสำหรับให้ผู้ใช้เข้ามาทำแบบประเมินคัดกรองภาวะซึมเศร้า เพื่อดูสถานที่ให้บริการด้านสุขภาพจิตที่แนะนำ

Do Assessment Page

• แสดงผลในส่วนของประเมินคัดกรองภาวะซึมเศร้าที่ประกอบไปด้วยคำถามที่ใช้ในการประเมิน โดยก่อนที่จะมีการทำนั้นจะมี Disclaimer Modal เพื่อแจ้งข้อกำหนดและเงื่อนไขให้ผู้ใช้ทำการเลือกว่าจะยอมรับหรือไม่ยอมรับ เมื่อผู้ใช้เลือกยินยอมและทำแบบประเมินเรียบร้อยแล้ว ก็จะขึ้น Result Modal เพื่อแสดงผลการทำแบบประเมินและแสดงสถานที่ให้บริการที่แนะนำสำหรับผู้ใช้ โดยจะเป็นการแสดงข้อมูลของสถานที่นั้นแบบคร่าวๆ และจะมีการเชื่อมต่อกับ API เพื่อดึงข้อมูลรายละเอียดต่าง ๆ ของสถานที่ให้บริการด้านสุขภาพจิต ใช้ในการ filter สถานที่ให้บริการที่อยู่ใกล้ผู้ใช้

Service Center Info Page

• แสดงผลก็ต่อเมื่อผู้ใช้กดมาจาก Result Modal โดยจะแสดงข้อมูลรายละเอียดต่างๆของสถานที่ให้บริการด้านสุขภาพจิต เช่น วันเวลาทำการ แผนที่ของสถานที่ตั้ง และความคิดเห็นต่าง ๆ เป็นต้น และจะมีการเชื่อมต่อกับ API 2 อย่าง เพื่อดึงข้อมูลรายละเอียดต่าง และดึงข้อมูลความคิดเห็นของสถานที่ให้บริการด้านสุขภาพจิตนั้น ๆ

MainPageModal

• ส่วนที่ให้ผู้ใช้กดปุ่มในการเริ่มทำแบบประเมินคัดกรองภาวะซึมเศร้า เพื่อดูสถานที่ให้บริการด้านสุขภาพจิตที่แนะนำ โดยจะมีคำอธิบายสั้น ๆ ให้ผู้ใช้งานเข้าใจการทำแบบประเมินมากยิ่งขึ้น

MainPageCard

• ส่วนที่แสดง Feature ต่าง ๆ ทั้งหมดในระบบที่ผู้ใช้สามารถเลือกใช้งานได้ตามความต้องการ

DisclaimerModal

• ส่วนที่แสดงข้อกำหนดและเงื่อนไขของการทำแบบประเมิน ให้ผู้ใช้สามารถเลือกที่จะยอมรับหรือไม่ยอมรับ ถ้าผู้ใช้เลือกที่จะยอมรับก็จะไปยังหน้า Do Assessment เพื่อทำแบบประเมินต่อไป แต่ถ้าผู้ใช้เลือกไม่ยอมรับก็จะไปกลับไปยังหน้า Main

QuestionCardList

• ส่วนของคำถาม ประกอบไปด้วยคำถามและตัวเลือก โดยจะมีการกำหนดรูปแบบให้ดูเรียบง่าย สบายตาแก่ผู้ใช้

ResultModal

• ส่วนของผลการทำแบบประเมินและแสดงสถานที่ให้บริการที่แนะนำสำหรับผู้ใช้ โดยจะเป็นการแสดงข้อมูลของสถานที่นั้น ได้แก่ ชื่อสถานที่ จังหวัด ระยะทาง และประเภทการให้บริการแบบ Online หรือ On site และมีการเชื่อมต่อกับ API เพื่อดึงข้อมูลรายละเอียดของสถานที่ให้บริการด้านสุขภาพจิต

CommentBox

• ส่วนของช่อง Comment ที่ผู้ใช้งานสามารถเข้ามาเพิ่มความคิดเห็นของตนเอง

ReviewForm

• ส่วนของความคิดเห็นของผู้อื่นที่เข้ามาแสดงความคิดเห็นต่อสถานที่ให้บริการด้านสุขภาพจิต มีการเชื่อมต่อกับ API เพื่อดึงข้อมูลความคิดเห็นของสถานที่ให้บริการด้านสุขภาพจิตนั้น ๆ

GGMapCard

• ส่วนของแผนที่แสดงสถานที่ตั้งของสถานที่ให้บริการด้านสุขภาพจิต โดยจะสามารถกดเข้าไปดูเพิ่มเติมในรูปแบบของ Google Map ได้ มีการเชื่อมต่อกับ API เพื่อดึงข้อมูลรายละเอียดของสถานที่ให้บริการด้านสุขภาพจิตนั้น ๆ

ServiceInfoCard

• ส่วนของข้อมูลรายละเอียดต่างๆของสถานที่ให้บริการด้านสุขภาพจิต เช่น สถานที่ตั้งแบบคร่าวๆ ประเภทการให้บริการแบบ Online หรือ On site วันเวลาทำการ ช่องทางการติดต่อต่าง ๆ และราคาการเข้าใช้บริการ เป็นต้น มีการเชื่อมต่อกับ API เพื่อดึงข้อมูลรายละเอียดของสถานที่ให้บริการด้านสุขภาพจิตนั้น ๆ

Backend

API Get Service Center By Location

• Controller Layer
  • เป็น API ของ Do Assessment Page มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ latitude, longitude ของ ServiceCenter โดยจะนำข้อมูลไปค้นหา ServiceCenter ที่ตรงกับ User ต้องการใน Database และส่งข้อมูลของ ServiceCenter มาแสดงยังฝั่งของ Frontend
• Service Layer
  • function getServiceCenterByLocation ทำการคำนวนระยะทางของ ServiceCenter โดยใช้ latitude, longitude จากนั้นทำการ filter ServiceCenter ที่อยู่ใกล้ฉัน เรียงลำดับจากใกล้สุดไปไกลสุด
• Data Access Layer
  • เรียกใช้ Repository เพื่อจัดการข้อมูลใน Database

API Get Service Center By Id

• Controller Layer
  • เป็น API ของ Service Center Info Page มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ id ของ ServiceCenter โดยจะนำ id ไปค้นหาใน Database และส่งข้อมูลของ ServiceCenter ที่ตรงตาม id นั้น มาแสดงยังฝั่งของ Frontend
• Service Layer
  • function getServiceCenterById นำ id ของ ServiceCenter ไปค้นหาใน Database เพื่อดูข้อมูลของ ServiceCenter นั้น
• Data Access Layer
  • เรียกใช้ Repository เพื่อจัดการข้อมูลใน Database

API Get Review By Service Center Id

• Controller Layer
  • เป็น API ของ Service Center Info Page มีการรับข้อมูลและส่งข้อมูลให้กับฝั่งของ User โดยข้อมูลที่รับมาคือ id ของ ServiceCenter โดยจะนำ id ไปค้นหา Review ของ ServiceCenter ใน Database และส่งข้อมูลของ ServiceCenter ที่ตรงตาม id นั้น มาแสดงยังฝั่งของ Frontend
• Service Layer
  • function getReviewByServiceCenterId นำ id ของ ServiceCenter ไปค้นหาใน Database เพื่อดูข้อมูล Review ของ ServiceCenter นั้น
• Data Access Layer
  • เรียกใช้ Repository เพื่อจัดการข้อมูลใน Database