Project Structure - konlawatit/SWDEV-BBP-PLUS GitHub Wiki

Frontend

HTML Protocol

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

_app.js

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

Router

  • ส่วนที่ใช้ในการนำทางไปยังหน้าต่างๆที่มีอยู่โดยถูกกำหนดไว้ด้วย URL path ที่ตรงกับที่ประกาศไว้ใน Route แล้วะทำการ Router ไปยัง page นั้นๆ

Dashboard Page

  • แสดงภาพรวมการใช้เงินโดยจะทำเป็นการสรุปการใช้จ่ายเงินในแต่ละเดือน รายการผ่อนที่กำลังดำเนินอยู่ รายการจ่ายที่ดูจะเป็นปัญหา โดยประกอบด้วย PieChart, AccountingList

Accouting List

  • เป็น component ที่รวมรายการรายรับรายจ่ายที่ได้ทำการบันทึกไว้ ทั้งจากการ query จาก email ธนาคารกรุงไทย และรายการที่บันทึกไว้ มาแสดงเป็น list

PieChart

  • เป็น component แผนภูมิวงกลมสรุปรายการที่ต้องผ่อนในแต่ละเดือนโดยใช้ library ของ recharts ในการสร้าง

LineChart

  • เป็น component แผนภูมิเส้นสรุปรายรับ-รายจ่ายรายเดือนใน 1 ปีโดยนำข้อมูลรายรับ-รายจ่าย จาก data base ผ่าน API

BarChart

  • เป็น component แผนภูมิแท่งสรุปรายรับ-รายจ่ายรายเดือนใน 1 อาทิตย์โดยนำข้อมูลรายรับ-รายจ่าย จาก data base ผ่าน API

Accounting List

  • เป็น component ที่รวมรายการรายรับรายจ่ายที่ได้ทำการมาทำเป็น list ที่มี scrollbar ในการเลื่อนอ่าน และมีในส่วนของการ filter ข้อมูลว่าเป็น รายรับ, รายจ่าย, ทั้งหมด รวมถึงเวลาที่ต้องการให้แสดงโดยจะมีการ query มาจาก data base ผ่าน API

AddList modal

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

Installment Page

  • เป็นหน้าที่รวบรวมข้อมูลของการผ่อนที่โดยประกอบไปด้วย InstallmentInfo Card , Add Installment Modal และ Installment List ข้อมูล

Installment List

  • เป็นหน้าที่รวบรวมข้อมูลของการผ่อนที่โดยประกอบไปด้วย InstallmentInfo Card , Add Installment Modal

Add Installment Modal

  • เป็น component ที่ใช้ในการกรอกข้อมูลเพื่อเพิ่มเข้ารายการการผ่อนโดยจะกรอกข้อมูล ชื่อรายการผ่อน , วงเงิน , ประเภทของการผ่อน และ ระยะเวลาในการผ่อน

InstallmentInfo Card

  • เป็น component ที่ใช้ในการแสดงผลข้อมูลจาก Installment List เมื่อผู้ใช้งานกดเลือกจากรายการการผ่อน

Backend

API Get Accounting List By Email

  • Controllers Layer
    • เป็น API ที่ใช้ในหน้า Accounting สำหรับการดึงข้อมูลรายรับ-รายจ่าย ของผู้ใช้งาน โดยจะรับ Email เพื่อไปดึงข้อมูลรายรับ-รายจ่ายที่มี Email ที่ตรงกันจาก Database และส่งข้อมูลกลับให้ Frontend
  • Service Layer
    • นำ Email ของ User ไปค้นหาใน Database เพื่อดึงข้อมูลรายการรายรับ-รายจ่ายของ User นั้นๆ และทำการส่งข้อมูลกลับ Frontend ในรูปแบบ json
  • Data Access Layer
    • ใช้ Repository เพื่อดึงข้อมูลที่ต้องการใน Database

API Add Accounting By Email

  • Controllers Layer
    • เป็น API ที่ใช้ในหน้า Accounting สำหรับการเพิ่มข้อมูลรายรับ-รายจ่าย ของผู้ใช้งาน โดยจะรับ Email, Title, Date, Amount, Type, Description เพื่อไปเพิ่มข้อมูลรายรับ-รายจ่าย ใน Database ตาม Email ที่ได้รับมา และตอบกลับ Frontend เพื่อยืนยันว่าเพิ่มข้อมูลสำเร็จ
  • Service Layer
    • นำ Email ที่ได้รับมา ไปค้นหาใน Database และทำการเพิ่มข้อมูล Title, Date, Amount, Type, Description เข้า Database และตอบกลับฝั่ง Frontend เมื่อเพิ่มข้อมูลเสร็จสิ้นหรือมีปัญหา
  • Data Access Layer
    • ใช้ Repository เพื่อดึงข้อมูลที่ต้องการใน Database

API Get Accounting By Bank

  • Controllers Layer
    • เป็น API ที่ใช้ในหน้า Accounting สำหรับการดึงข้อมูลรายรับ-รายจ่าย จาก Statement การโอนเงินที่ได้มีการแจ้งเตือนเข้า Email ของผู้ใชงาน โดยจะรับข้อมูล Email และส่งข้อมูลกลับให้ Frontend
  • Service Layer
    • นำ Email ที่ได้รับมา ไปยัง token ที่ไดเก็บใน Database เพื่อใช้สำหรับการขอการเขาถึงข้อมูลใน Email ของผู้ใช้งาน และทำการนำข้อมูลที่ได้มาจัดรูปแบบ โดยจะเก็บเฉพาะข้อมูล Statement การโอนเงิน และนำข้อมูลบนทุกเข้าฐานข้อมูล และส่งข้อมูลกลับฝั่ง Frontend ในรูปแบบ json
  • Data Access Layer
    • ใช้ Repository เพื่อดูข้อมูลที่ต้องการใน Database