Flows ดูรายการดอกเบี้ยของธนาคารต่างๆ - konlawatit/SWDEV-BBP-PLUS GitHub Wiki

User Flow

  1. เมื่อผู้ใช้งานเข้าสู่หน้า Dashboard ที่เป็นหน้าหลักของแอพพลิเคชั่น ผู้ใช้งาน Click Tab Interest (รายการดอกเบี้ย) จาก Navigation Bar ของหน้า Dashboard จะเข้าไปสู่หน้า Interest (รายการดอกเบี้ย)
  2. เมื่อผู้ใช่งานเข้าสู่หน้ารายการดอกเบี้ยของธนาคารต่างๆ ผู้ใช้งานสามารถเลือก click ที่ธนาคารที่สนใจเพื่อที่จะเข้าไปสู่หน้าข้อมูลรายการดอกเบี้ยของธนาคารนั้นๆ
  3. เมื่อผู้ใช้งานเข้าสู่หน้าข้อมูลรายการดอกเบี้ยของธนาคารที่สนใจ หน้านั้นจะทำการแสดงรายละเอียดของดอกเบี้ยต่างๆที่มีอยู่ของธนาคารนั้นๆที่ผู้ใช้งานได้เลือก

โดยจะประกอบไปด้วย 3 หน้า ดังนี้

Dashboard Page

  • เป็นหน้าหลักของแอพพลิเคชั่นที่จะแสดงข้อมูลของรายการผ่อน,ข้อมูลรายรับรายจ่ายและรายการข้อมูลดอกเบี้ยของธนาคารต่างๆและมี Navigation Bar ในการไปหน้าอื่นๆคือหน้ารายการผ่อน, หน้ารายรับรายจ่าย และหน้ารายการดอกเบี้ย โดยสามารถ Click Tab จาก Navigation Bar เพื่อเข้าไปสู่หน้าที่ต้องการ

Interest (รายการดอกเบี้ย)

  • ภายในหน้ารายการดอกเบี้ยจะเป็นหน้าที่แสดงข้อมูลของรายการดอกเบี้ยของธนาคารอย่างคร่าวๆ และจะเป็นหน้าที่ให้เลือกธนาคาร เพื่อเข้าไปดูข้อมูลดอกเบี้ยโดยละเอียดจากธนาคารที่เลือก

หน้าแสดงข้อมูลดอกเบี้ยเฉพาะธนาคารโดยละเอียด

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

UI Flow

Acceptance Test

Acceptance Tests Link

Case No. Case Name Case Description Input เลือกธนาคาร Expected result
1 ดูรายการดอกเบี้ยสำเร็จ กดเลือกธนาคาร SCB เพื่อดูข้อมูลรายการดอกเบี้ย SCB ไปยังหน้าข้อมูลดอกเบี้ย และโปรโมชั่นของธนาคารไทยพาณิชย์
2 ดูรายการดอกเบี้ยสำเร็จ กดเลือกธนาคาร Kbank เพื่อดูข้อมูลรายการดอกเบี้ย Kbank ไปยังหน้าข้อมูลดอกเบี้ย และโปรโมชั่นของธนาคารกสิกรไทย
3 ดูรายการดอกเบี้ยสำเร็จ กดเลือกธนาคาร krungsri ดูข้อมูลรายการดอกเบี้ย krungsri ไปยังหน้าข้อมูลดอกเบี้ย และโปรโมชั่นของธนาคารกรุงศรี

Technical

  • Frontend

  1. Design UI ออกแบบหน้ารายการดอกเบี้ย และหน้าแสดงข้อมูลดอกเบี้ยเฉพาะธนาคารโดยละเอียด ด้วยการใช้ Figma
  2. Develop จะใช้ NextJS และความรู้ Javascript, CSS ในการสร้างหน้า Pages และ Compoents โดยมีการดึงข้อมูลจาก Backend ผ่าน Axios
  3. Test ทดสอบการทำงานจาก Acceptance Tests
  4. Deploy การ Deploy จะใช้ Docker ในการให้หน้ารายการดอกเบี้ย และหน้าแสดงข้อมูลดอกเบี้ยเฉพาะธนาคารโดยละเอียด ทำงานบน AWS

  • Backend

  1. Design API ออกแบบ API ในการจัดการข้อมูลของ รายการดอกเบี้ย ตามหลัก CRUD คือ Create, Read, Update, Delete และ มีการกำหนด Endpoint, รูปแบบการ Request โดยกำหนด API Method GET, POST, PUT, DELETE และรูปแบบการ Response ในรูปแบบของ JSON ของ API ในการทำ Request
  2. Develop จะใช้ NodeJS ในการสร้างและการทำงานของ API
  3. Test ทดสอบการ Request และ Response ของ API ว่าเป็นไปอย่างที่ออกแบบหรือไม่
  4. Deploy การ Deploy จะใช้ Docker ให้ API ทำงานบน AWS

Database