KOBE frontend

Kobe - แอปพลิเคชันงบประมาณมือถือ (Fronnd)

คำอธิบายทั่วไป

แอปพลิเคชันที่อนุญาตให้รวบรวมงบประมาณต่อเดือนซึ่งมีการเคลื่อนไหว 3 ประเภท: รายได้ค่าใช้จ่ายและการออม สำหรับการเคลื่อนไหวแต่ละประเภทสามารถกำหนดได้มากถึง 10 หมวดหมู่ ในเดือนที่กำหนดผู้ใช้สามารถกำหนดค่าที่คาดว่าจะกำหนดแต่ละหมวดหมู่ (งบประมาณ) ต่อจากนั้นในช่วงเดือนที่ผู้ใช้จะลงทะเบียนการเคลื่อนไหวของพวกเขาและจากสิ่งเหล่านี้ในแท็บสถิติคุณจะเห็นว่าแผนการที่ทำสำหรับเดือนนั้นกำลังดำเนินการอย่างไร

ลิงค์ Figma

ภาพอ้างอิง:

สภาพแวดล้อมการพัฒนา

ในการสร้างสภาพแวดล้อมการพัฒนาของเว็บแอปพลิเคชันที่มีการกระพือปีกบนชายแดนและ Express.js ในแบ็กเอนด์เพื่อติดตั้งคุณสามารถทำตามขั้นตอนเหล่านี้:

การกำหนดค่าชายแดน

1. การติดตั้ง Flutter - การพัฒนามือถือ
   • ก่อนอื่นให้ดาวน์โหลดและติดตั้ง Flutter จากหน้าอย่างเป็นทางการ: https://flutter.dev/docs/get-started/install ทำตามคำแนะนำเฉพาะสำหรับระบบปฏิบัติการของคุณ ต่อมาเพิ่มเส้นทางไปยังตัวแปรสภาพแวดล้อม
2. การกำหนดค่า Android Studio - เครื่องจำลองมือถือ Android เพื่อทดสอบแอปพลิเคชัน
   • ติดตั้ง Android Studio จากเว็บไซต์ทางการของ Android Studio: https://developer.android.com/studio
   • ภายใน Android Studio ติดตั้ง Android SDK และกำหนดค่าตัวจำลองบน AVD Manager เพื่อจำลองอุปกรณ์มือถือ
3. Visual Studio Code - การกำหนดค่า IDE ที่จะใช้ในโครงการ
   • ดาวน์โหลดและติดตั้ง Visual Studio Code (VSCODE) จากหน้าอย่างเป็นทางการ: https://code.visualstudio.com/
   • สามารถติดตั้งปลั๊กอินต่อไปนี้เพื่ออำนวยความสะดวกในการเข้ารหัสใน Flutter:
     • Flutter: เพื่อรวมการสนับสนุนสำหรับ VSCODE และรวมถึงฟังก์ชันการทำงานเช่นการดำเนินการของแอปพลิเคชันและการทำให้บริสุทธิ์
     • DART: จำเป็นต้องทำงานกับ Flutter เนื่องจากให้การสนับสนุนภาษาการเขียนโปรแกรม DART
     • ตัวอย่าง Flutter Flutter: ให้โค้ดที่มีประโยชน์เพื่อพัฒนาอย่างรวดเร็วยิ่งขึ้น
     • ตัวอย่างวิดเจ็ต Flutter: คอลเลกชันของตัวอย่างสำหรับวิดเจ็ตที่ใช้กันมากที่สุดใน Flutter

การกำหนดค่าแบ็กเอนด์

1. การติดตั้ง node.js
   • ดาวน์โหลดและติดตั้ง node.js จากหน้าอย่างเป็นทางการ: https://nodejs.org/ node.js จำเป็นต้องทำงานกับ Express.js ต่อมาเพิ่มเส้นทางไปยังตัวแปรสภาพแวดล้อม
2. การสร้างและการกำหนดค่าของโครงการ Express.js
   • เปิดเทอร์มินัลและใช้คำสั่งต่อไปนี้เพื่อติดตั้งตัวสร้างแอปพลิเคชันด่วน: NPM Install -G Express -Generator
   • สร้างโครงการด่วนใหม่ด้วยคำสั่ง: Express Name-of-Tu-Project
3. การพัฒนาใน Express.js
   • พัฒนาแอปพลิเคชันแบ็กเอนด์ของคุณโดยการแก้ไขไฟล์ในไดเรกทอรีโครงการ สามารถติดตั้งเพิ่มเติมได้ตามความจำเป็นติดตั้งด้วยชื่อติดตั้ง NPM
   • เครื่องมือเช่น Postman หรือ Insomnia สามารถใช้เพื่อทดสอบจุดสิ้นสุด API ของแอปพลิเคชัน Express.js ของคุณ

การดำเนินการและการทดสอบ

• สำหรับชายแดนให้เปิดรหัส VS นำทางไปยังไดเรกทอรีของโครงการ Flutter ของคุณและดำเนินการแอปพลิเคชันของคุณโดยใช้ Emulator ที่กำหนดค่าใน Android Studio
• สำหรับแบ็กเอนด์ในเทอร์มินัลนำทางไปยังไดเรกทอรีของโครงการด่วนของคุณและดำเนินการ npm start เพื่อเริ่มเซิร์ฟเวอร์

ความต้องการ

ข้อกำหนดการทำงาน

การระบุข้อกำหนด	RF1
ชื่อข้อกำหนด	การสร้างบัญชี
ลักษณะเฉพาะ	ผู้ใช้สามารถสร้างบัญชีกำหนดชื่อผู้ใช้และรหัสผ่าน
คำอธิบายของข้อกำหนด	ผู้ใช้สามารถสร้างบัญชีที่ให้ข้อมูล: อีเมลชื่อผู้ใช้ชื่อเต็มและรหัสผ่าน
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF5
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RF2
ชื่อข้อกำหนด	การรับรองความถูกต้องของผู้ใช้
ลักษณะเฉพาะ	ผู้ใช้ในการเข้าสู่ระบบจะต้องป้อนข้อมูลบัญชี
คำอธิบายของข้อกำหนด	ผู้ใช้ในการเข้าสู่ระบบจะต้องป้อนชื่อผู้ใช้และรหัสผ่านของพวกเขา
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF5
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RF3
ชื่อข้อกำหนด	การสร้างหมวดหมู่
ลักษณะเฉพาะ	ผู้ใช้สามารถสร้างหมวดหมู่
คำอธิบายของข้อกำหนด	ผู้ใช้จะสามารถสร้างสูงสุด 10 หมวดหมู่สำหรับรายได้ค่าใช้จ่ายและการออม
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF6
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RF4
ชื่อข้อกำหนด	การสร้างแผนงบประมาณ
ลักษณะเฉพาะ	ผู้ใช้จะสามารถสร้างแผนงบประมาณสำหรับแต่ละประเภทของรายได้ค่าใช้จ่ายและการออม
คำอธิบายของข้อกำหนด	ผู้ใช้จะสามารถสร้างแผนงบประมาณสำหรับแต่ละประเภทของรายได้ค่าใช้จ่ายและการออม
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF6, RNF7
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RF5
ชื่อข้อกำหนด	รายได้การเคลื่อนไหว
ลักษณะเฉพาะ	ผู้ใช้อาจเข้าสู่การเคลื่อนไหวทางการเงินตามแต่ละประเภทของรายได้ค่าใช้จ่ายและการออม
คำอธิบายของข้อกำหนด	ผู้ใช้อาจเข้าสู่การเคลื่อนไหวทางการเงินตามแต่ละประเภทของรายได้ค่าใช้จ่ายและการออม
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF6, RNF7
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RF6
ชื่อข้อกำหนด	การดูประวัติงบประมาณและการเคลื่อนไหว
ลักษณะเฉพาะ	ผู้ใช้สามารถเห็นงบประมาณที่ผ่านมา
คำอธิบายของข้อกำหนด	ผู้ใช้จะสามารถเห็นงบประมาณของช่วงเวลาก่อนหน้า (เดือนและปี)
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF6, RNF7
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RF7
ชื่อข้อกำหนด	เปลี่ยนรหัสผ่าน
ลักษณะเฉพาะ	ผู้ใช้สามารถขอเปลี่ยนรหัสผ่านได้
คำอธิบายของข้อกำหนด	ผู้ใช้สามารถขอเปลี่ยนรหัสผ่านที่ให้ชื่อผู้ใช้หรือชื่ออีเมลของคุณ
ข้อกำหนดที่ไม่ใช้งาน	RNF1, RNF2, RNF6, RNF7
ลำดับความสำคัญของข้อกำหนด	ต่ำ

ข้อกำหนดที่ไม่ใช้งาน

การระบุข้อกำหนด	RNF1
ชื่อข้อกำหนด	ผลงาน
ลักษณะเฉพาะ	การตอบสนองและประสิทธิภาพการประมวลผลทันที
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องตอบสนองต่ออินพุตของผู้ใช้อย่างรวดเร็วและจัดการการประมวลผลข้อมูลได้อย่างมีประสิทธิภาพ
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RNF2
ชื่อข้อกำหนด	ความพร้อม
ลักษณะเฉพาะ	การเข้าถึงอย่างต่อเนื่องและเวลาไม่ใช้งานขั้นต่ำ
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องใช้งานได้มากที่สุดเท่าที่จะเป็นไปได้โดยมีเวลาไม่ใช้งานขั้นต่ำ
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RNF3
ชื่อข้อกำหนด	การใช้งานได้
ลักษณะเฉพาะ	ใช้งานง่ายและเข้าถึงได้สำหรับผู้ใช้ทุกคน
คำอธิบายของข้อกำหนด	อินเทอร์เฟซผู้ใช้จะต้องใช้งานง่ายและใช้งานง่ายสำหรับผู้ที่ไม่มีประสบการณ์กับแอปพลิเคชันมาก่อน
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RNF4
ชื่อข้อกำหนด	ความเข้ากันได้
ลักษณะเฉพาะ	มันทำงานบนอุปกรณ์และระบบหลายเครื่อง
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องเข้ากันได้กับระบบปฏิบัติการมือถือหลายรุ่นเช่น Android และ iOS และปรับให้เข้ากับขนาดและความละเอียดที่แตกต่างกัน
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RNF5
ชื่อข้อกำหนด	ความปลอดภัย
ลักษณะเฉพาะ	การปกป้องและเข้ารหัสข้อมูล
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องปกป้องข้อมูลที่ละเอียดอ่อนของผู้ใช้เพื่อให้มั่นใจว่าข้อมูลทั้งหมดที่ส่งและจัดเก็บจะถูกเข้ารหัส
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RNF6
ชื่อข้อกำหนด	ความยืดหยุ่น
ลักษณะเฉพาะ	การเติบโตของผู้ใช้ที่มีประสิทธิภาพและการโหลดข้อมูล
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องสามารถจัดการกับการเพิ่มจำนวนผู้ใช้และในโหลดการประมวลผลข้อมูลโดยไม่ลดประสิทธิภาพอย่างมีนัยสำคัญ
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RNF7
ชื่อข้อกำหนด	การบำรุงรักษาได้
ลักษณะเฉพาะ	จัดระเบียบและอัปเดตรหัสได้อย่างง่ายดาย
คำอธิบายของข้อกำหนด	รหัสแอปพลิเคชันจะต้องได้รับการจัดระเบียบและบันทึกไว้อย่างดีเพื่ออำนวยความสะดวกในการอัปเดตและการบำรุงรักษาโดยนักพัฒนา
ลำดับความสำคัญของข้อกำหนด	ต่ำ

การระบุข้อกำหนด	RNF8
ชื่อข้อกำหนด	การบริโภคแบตเตอรี่
ลักษณะเฉพาะ	ประสิทธิภาพการใช้พลังงานและการบริโภคที่ดีที่สุด
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะต้องมีประสิทธิภาพในแง่ของการใช้แบตเตอรี่หลีกเลี่ยงการระบายน้ำมากเกินไปเมื่อใช้งานอยู่หรือมีพื้นหลัง
ลำดับความสำคัญของข้อกำหนด	เฉลี่ย

การระบุข้อกำหนด	RNF9
ชื่อข้อกำหนด	ตัวจัดการฐานข้อมูล
ลักษณะเฉพาะ	ความน่าเชื่อถือและความสามารถในการจัดการข้อมูลขั้นสูงด้วย PostgreSQL
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะใช้ PostgreSQL เป็นระบบการจัดการฐานข้อมูล
ลำดับความสำคัญของข้อกำหนด	สูง

การระบุข้อกำหนด	RNF10
ชื่อข้อกำหนด	รหัสการพัฒนา
ลักษณะเฉพาะ	การพัฒนาแบบครบวงจรและทวีคูณด้วยการกระพือ
คำอธิบายของข้อกำหนด	แอปพลิเคชันจะใช้ Flutter เป็นกรอบการพัฒนารหัส
ลำดับความสำคัญของข้อกำหนด	สูง

ไดอะแกรม

ไดอะแกรมเชิงสัมพันธ์

ตำนานตาราง:

• ประเภท: หมายถึงธุรกรรม 3 ประเภทมี: รายได้ค่าใช้จ่ายและการออม
• หมวดหมู่: หมายถึงลักษณะของรายได้/ค่าใช้จ่าย/เงินออม
  • ประเภท: รายได้ - หมวดหมู่: เงินเดือนดอกเบี้ยการชำระค่าธรรมเนียม ...
  • ประเภท: ค่าใช้จ่าย - หมวดหมู่: การขนส่ง, อาหาร, สาธารณูปโภค, สุขภาพ, การศึกษา, ความบันเทิง ...
  • ประเภท: การออม - หมวดหมู่: บ้าน, รถยนต์, ทริป, ผู้ประกอบการ ...
    • คำอธิบาย: ตัวอย่างเช่นในบันทึกประเภทอาจเป็นรายได้และหมวดหมู่อาจเป็นเงินเดือน
  • ปฏิทิน: ตารางนี้จะประกอบด้วยวันที่หลายวันและจะเชื่อมโยงกับตารางเดือน นี่คือส่วนใหญ่เพื่ออำนวยความสะดวกในการสร้างตัวกรองภายในแอปพลิเคชันและการจัดสรรวันที่ลงทะเบียนในตารางตัวติดตาม
  • เดือน: ตารางที่มีทุกปีด้วยรหัสอื่น ตารางนี้จะอำนวยความสะดวกในการเขียนโปรแกรมตัวกรอง
  • ปี: ตารางที่มีปีที่เป็นไปได้ภายในระยะเวลาที่กำหนด ตารางนี้จะอำนวยความสะดวกในการเขียนโปรแกรมตัวกรอง
  • งบประมาณ: เป็นจำนวนเงินที่วางแผนไว้สำหรับแต่ละหมวดหมู่และเดือน (เนื่องจากอาจแตกต่างกันระหว่างเดือน) มันเป็นเป้าหมายมันไม่จำเป็นต้องเป็นจริง
  • การลงทะเบียน (การติดตาม): เป็นตารางหลักที่มีการบันทึกรายได้ค่าใช้จ่ายหรือการออมทั้งหมดพร้อมหมวดหมู่บันทึกและวันที่ตามลำดับ
  • ผู้ใช้: เป็นตารางที่บันทึกข้อมูลของผู้ใช้ส่วนใหญ่ชื่อและนามสกุลของพวกเขานอกเหนือจากข้อมูลรับรองของพวกเขาเพื่อป้อนบัญชีแอปพลิเคชันของพวกเขา (อีเมลและรหัสผ่าน)

ใช้ไดอะแกรมเคส

ไดอะแกรมการปรับใช้