Flow เพิ่มรายการผ่อน - konlawatit/SWDEV-BBP-PLUS GitHub Wiki

User Flow

  1. เมื่อผู้ใช้งานเข้าสู่หน้า Dashboard ที่เป็นหน้าหลักของแอพพลิเคชั่น ผู้ใช้งาน Click Tab Installment(รายการผ่อน) จาก Navigation Bar ของหน้า Dashboard จะเข้าไปสู่หน้าของ Installment(รายการผ่อน)
  2. ผู้ใช้งานเลือกกดปุ่ม เพิ่มรายการผ่อน จากหน้า Installment(รายการผ่อน) เพื่อเปลี่ยนไปยังหน้า Add Installment (กรอกมูลการผ่อน)
  3. เมื่อเข้ามาหน้า Add Installment (กรอกมูลการผ่อน) จะมีฟอร์มให้ผู้ใช้งานกรอกข้อมูลการผ่อนและเมื่อผู้ใช้งานกรอกข้อมูลเสร็จสื้นจะสามารถยืนยันข้อมูล เพื่อทำการบันทึกข้อมูลได้
  4. เมื่อผู้ใช้งานยืนยันบันทึกข้อมูลจะทำการเปลี่ยนหน้าไปหน้า Installment(รายการผ่อน) เพื่อแสดงข้อมูลการผ่อนที่มีอยู่และข้อมูลการผ่อนที่เพิ่มเข้าไป

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

Dashboard Page

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

Installment (รายการผ่อน)

  • ภายในหน้ารายการผ่อนจะเป็นหน้าที่มีข้อมูลรายละเอียดการผ่อนที่เคยบันทึกไว้อย่างเช่น ข้อมูลรายการผ่อนรถ และจะมีปุ่มกดเพิ่มรายการผ่อนจากหน้ารายการผ่อนไปยังหน้า Add Installment (กรอกมูลการผ่อน) เพื่อเพิ่มข้อมูลการผ่อน

Add Installment (กรอกมูลการผ่อน)

  • เป็นหน้าที่มีฟอร์มให้กรอกเพื่อต้องการข้อมูลของรายการผ่อนใหม่ที่จะบันทึกเข้ามา และโดยจะมีปุ่มยืนยันข้อมูลเพื่อทำการยืนยันในการบันทึกข้อมูล

UI Flow

Acceptance Test

Acceptance Tests Link

Case No. Case Description Case Name Input ชื่อรายการ Input ประเภทของสินทรัพย์ที่ผ่อน ( บ้าน, รถ ) Input ราคาสินทรัพย์ ( > 0 ) Input เงินดาวน์ % ( 1-100 ) Input จำนวนปีที่ผ่อน ( > 0 ) Input ดอกเบี้ย % ( 1-100 ) Expected Result
1 เพิ่มรายการผ่อนสำเร็จ เพิ่มรายการผ่อนประเภทบ้านสำเร็จ ผ่อนบ้าน บ้าน 1,200,000 30 6 2.8 แสดงผลรายละเอียดของรายการผ่อนที่เพิ่งเพิ่มเข้า
2 เพิ่มรายการผ่อนสำเร็จ เพิ่มรายการผ่อนประเภทรถสำเร็จ ผ่อนรถ รถ 1,200,000 30 6 2.8 แสดงผลรายละเอียดของรายการผ่อนที่เพิ่งเพิ่มเข้า
3 เพิ่มรายการผ่อนไม่สำเร็จ เพิ่มรายการผ่อนไม่สำเร็จ เนื่องจากไม่ได้ระบุประเภทของสินทรัพย์ที่ผ่อน ผ่อนบ้าน 1,200,000 30 6 2.8 แสดงข้อความว่าผู้ใช้ยังไม่ได้ระบุประเภทของการผ่อน
4 เพิ่มรายการผ่อนไม่สำเร็จ เพิ่มรายการผ่อนไม่สำเร็จ เนื่องจากไม่ได้ระบุราคาสินทรัพย์ ผ่อนบ้าน บ้าน 30 6 2.8 แสดงข้อความว่าผู้ใช้ยังไม่ได้กรอกราคาสินทรัพย์
5 เพิ่มรายการผ่อนไม่สำเร็จ เพิ่มรายการผ่อนไม่สำเร็จ เนื่องจากไม่ได้ระบุเงินดาวน์ ผ่อนบ้าน บ้าน 1,200,000 6 2.8 แสดงข้อความว่าผู้ใช้ยังไม่ได้กรอก % เงินดาวน์
6 เพิ่มรายการผ่อนไม่สำเร็จ เพิ่มรายการผ่อนไม่สำเร็จ เนื่องจากไม่ได้ระบุจำนวนปีที่ผ่อน ผ่อนบ้าน บ้าน 1,200,000 30 2.8 แสดงข้อความว่าผู้ใช้ยังไม่ได้กรอกจำนวนปีที่ผ่อน
7 เพิ่มรายการผ่อนไม่สำเร็จ เพิ่มรายการผ่อนไม่สำเร็จ เนื่องจากไม่ได้ระบุ % ดอกเบี้ย ผ่อนบ้าน บ้าน 1,200,000 30 6 แสดงข้อความว่าผู้ใช้ยังไม่ได้กรอก % ดอกเบี้ย

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