Flow บันทึกข้อมูลรายรับ รายจ่าย - konlawatit/SWDEV-BBP-PLUS GitHub Wiki

User Flow

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

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

Dashboard Page

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

Accounting (รายรับรายจ่าย)

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

Add Accounting (กรอกข้อมูลรายรับรายจ่าย)

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

UI Flow

Acceptance Test

Acceptance Tests Link

Case No. Case Name Case Description Input วัน/เดือน/ปี Input ชื่อรายการ Input ประเภทรายการ(รายรับ, รายจ่าย) Input จำนวนเงิน( > 0 ) Expected Result
1 เพิ่มรายการสำเร็จ เพิ่มรายการค่าอาหารกลางวัน ที่เป็นรายจ่ายสำเร็จ 01/01/2022 ค่าอาหารกลางวัน รายจ่าย 100 แสดงผลรายละเอียดการเพิ่มข้อมูลรายรับ-รายจ่ายที่ได้ทำการเพิ่มเข้ามา
2 เพิ่มรายการสำเร็จ เพิ่มรายการเงินเดือนที่ได้รับ เป็นรายรับสำเร็จ 02/01/2022 เงินเดือน รายรับ 15,000 แสดงผลรายละเอียดการเพิ่มข้อมูลรายรับ-รายจ่ายที่ได้ทําการเพิ่มเข้ามา
3 เพิ่มรายการไม่สำเร็จ เพิ่มรายการเงินเดือนที่ได้รับไม่สำเร็จ เนื่องจากไม่ได้เลือกประเภทของรายการ 03/01/2022 เงินเดือน 15,000 แสดงการแจ้งเตือนว่าผู้ใช้ต้องทำการเลือกประเภทรายการ
4 เพิ่มรายการไม่สำเร็จ เพิ่มรายการค่าอาหารกลางวัน ที่เป็นรายจ่ายไม่สำเร็จ เนื่องจากไม่ได้ระบุจำนวนเงิน 04/01/2022 ค่าอาหารกลางวัน รายจ่าย แสดงการแจ้งเตือนว่าผู้ใช้ไม่ได้กรอกจำนวนเงิน
5 เพิ่มรายการไม่สำเร็จ เพิ่มรายการไม่สำเร็จ เนื่องจากไม่ได้ระบุชื่อรายการ 05/01/2022 รายรับ 15,000 แสดงการแจ้งเตือนว่าผู้ใช้ไม่ได้กรอกชื่อรายการ
6 เพิ่มรายการไม่สำเร็จ เพิ่มรายการค่าเดินทาง ที่เป็นรายจ่ายไม่สำเร็จ เนื่องจากไม่ได้ใส่วันที่ทำรายการ ค่าเดินทาง รายจ่าย 200 แสดงการแจ้งเตือนว่าผู้ใช้ไม่ได้ระบุวันที่ทำรายการ

Technical

  • Frontend

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

  • 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 จะใช้ Heroku

Database