báo cáo bài tập lớn môn học tương tác người máy thiết kế giao diện ứng dụng quản lý chi tiêu vtuc

Sau đây là một vài yêu cầu đối vớigiao diện:● Đơn giản và dễ sử dụng để đảm bảo tính thân thiện và thuận tiện cho người sửdụng.● Cho phép người dùng nhập thông tin chi tiêu hàng ngày một

TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO BÀI TẬP LỚN MÔN HỌC TƯƠNG TÁC NGƯỜI-MÁY

Họ và tên Sinh viên: Nguyễn Tuấn Vũ – 2051063451 Dương Văn Chính – 2051063555 Vũ Hoàng Việt – 2051063877 Đào Thị Kiều Trang – 2051063436 Bùi Thị Thu Uyên – 2051063470Lớp: 62TH-NB

Giảng viên phụ trách môn học: ThS Nguyễn Thị Thu Hương

Hà Nội – 2023

MỤC LỤC

I ĐỀ XUẤT ĐỀ BÀI 3

1.1.Giới thiệu vấn đề 3

1.2.Giải pháp 3

1.3.Phân công công việc giữa các thành viên 3

II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ 4

2.1 Giới thiệu 4

2.2.Phân tích người sử dụng 5

2.3.Phân tích nhiệm vụ 6

III PHÁC HỌA THIẾT KẾ 32

IV XÂY DỰNG STORYBOARD 32

V XÂY DỰNG PROTOTYPE MÁY TÍNH 32

I ĐỀ XUẤT ĐỀ BÀI 1.1 Giới thiệu vấn đề

Trong xã hội hiện đại, quản lý tài chính cá nhân là một nhiệm vụ quan trọng để đảmbảo sự ổn định tài chính và tiết kiệm cho tương lai Đối với nhiều người, việc quản lý chitiêu hàng ngày và theo dõi tình hình tài chính có thể gặp khó khăn Do đó, việc sử dụngmột ứng dụng quản lý chi tiêu là rất cần thiết

Về việc thiết kế giao diện ứng dụng quản lý chi tiêu là một nhiệm vụ quan trọng và phứctạp, đòi hỏi sự cân nhắc kỹ lưỡng để đảm bảo rằng ứng dụng sẽ đáp ứng được nhu cầu vàmong muốn của người sử dụng một cách hiệu quả Sau đây là một vài yêu cầu đối vớigiao diện:

● Đơn giản và dễ sử dụng để đảm bảo tính thân thiện và thuận tiện cho người sửdụng.

● Cho phép người dùng nhập thông tin chi tiêu hàng ngày một cách nhanh chóng vàdễ dàng.

● Thiết kế danh mục chi tiêu cần phải cho phép người dùng quản lý, thêm, sửa, xóadanh mục một cách thuận tiện.

● Cần phải hiển thị thông tin tài chính tổng quan một cách rõ ràng và trực quan quacác biểu đồ và đồ thị.

● Bảo mật thông tin cá nhân và dữ liệu tài chính của người sử dụng.1.2 Giải pháp

Ngôn ngữ lập trình: HTML CSSBộ công cụ xây dựng giao diện: FigmaMôi trường chạy ứng dụng: Website1.3 Phân công công việc giữa các thành viên

Các thành viên trong nhóm:

1 Nguyễn Tuấn Vũ - 2051063451

3

2 Dương Văn Chính - 20510635553 Vũ Hoàng Việt - 20510638774 Đào Thị Kiều Trang - 20510634365 Bùi Thị Thu Uyên - 2051063470Phân chia công việc:

Cả nhóm cùng thực hiện:

● Thảo luận để giới thiệu vấn đề.

● Chọn ra những giải pháp để giải quyết vấn đề.● Tìm ra những nhóm người sử dụng và phân tích chúng.Từng thành viên thực hiện:

trình bày một cái nhìn tổng quan về việc phân tích người sử dụng và nhiệm vụ của họ,bao gồm cả sinh viên, giới trẻ và một phần nhỏ người trung tuổi.

Phân tích người sử dụng sẽ giúp chúng ta hiểu rõ hơn về người dùng tiềm năng của ứngdụng, cung cấp thông tin về đặc điểm, thói quen tài chính và mục tiêu cá nhân của từngnhóm Điều này sẽ giúp tùy chỉnh ứng dụng để đáp ứng nhu cầu và mong đợi cụ thể củatừng đối tượng người dùng.

Ngoài ra, phân tích nhiệm vụ của người sử dụng sẽ xác định rõ ràng những công việc cụthể mà họ mong muốn thực hiện thông qua ứng dụng Điều này bao gồm quản lý tàichính hàng ngày, thiết lập mục tiêu tiết kiệm, theo dõi các khoản thu chi, và nhiều tác vụkhác Việc nắm vững những nhiệm vụ này sẽ định hình cách chúng ta thiết kế giao diệnvà tính năng của ứng dụng.

Trên cơ sở thông tin thu thập từ phân tích người sử dụng và nhiệm vụ, chúng ta sẽ tiếptục phát triển và tối ưu hóa ứng dụng quản lý chi tiêu cá nhân nhằm mang lại trải nghiệmtốt nhất cho người dùng và giúp họ quản lý tài chính cá nhân một cách hiệu quả.2.2 Phân tích người sử dụng

Vấn đề cần giải quyết:

Vấn đề chính mà nhóm đang giải quyết là cung cấp một ứng dụng quản lý chi tiêu cánhân hữu ích và dễ sử dụng cho đối tượng chủ yếu là sinh viên, giới trẻ và một phần nhỏngười trung tuổi.

Người sử dụng:- Sinh viên:

Đây là nhóm người sử dụng chủ yếu của ứng dụng Sinh viên thường có thu nhập hạnchế từ việc học hoặc làm thêm, do đó, quản lý tài chính là một vấn đề quan trọng đối vớihọ.

5

- Giới Trẻ:

Đây là nhóm người đã bước chân vào cuộc sống công việc và có thu nhập từ công việccủa mình Tuy nhiên, họ cũng cần một cách quản lý tài chính hiệu quả để đảm bảo sự ổnđịnh tài chính cá nhân.

Vai trò của người sử dụng:

- Vai trò chính của họ là người quản lý tài chính cá nhân.

- Người sử dụng không phải chuyên gia tài chính, vì vậy ứng dụng cần phải dễ sửdụng và hiểu được ngay khi cài đặt.

Mức độ kỹ năng của người sử dụng:

- Đa số sinh viên hay giới trẻ có mức độ kỹ năng sử dụng máy tính và điện thoạithông minh từ trung bình đến cao.

- Họ là những người quen thuộc với ứng dụng di động và sử dụng Internet hàngngày.

Nhiệm vụ của người sử dụng:

Nhiệm vụ của người sử dụng là sử dụng ứng dụng để quản lý tài chính cá nhân của họmột cách hiệu quả Điều này bao gồm:

● Theo dõi và ghi lại các giao dịch tài chính.

● Đặt ra các mục tiêu tiết kiệm và theo dõi tiến trình đạt được.

● Nhận cảnh báo và thông báo về các sự kiện liên quan đến tài chính cá nhân.● Xem báo cáo và phân tích tình hình tài chính tổng quan.

2.3 Phân tích nhiệm vụ2.3.1 Phân tích và báo cáo Mục tiêu:

- Tạo ra báo cáo chi tiết về các giao dịch: Mục tiêu chính là cung cấp cho ngườidùng cái nhìn tổng quan về các giao dịch của họ theo nhiều tiêu chí khác nhau,như tháng, năm, loại giao dịch, và mục tiêu tiết kiệm.

- Cung cấp biểu đồ và đồ thị hỗ trợ phân tích: Đảm bảo rằng người dùng có thể dễdàng hiểu thông tin về tình hình tài chính của mình qua các biểu đồ và đồ thị dễđọc.

Tiền điều kiện:

- Dữ liệu giao dịch phải được cập nhật đúng mức: Đảm bảo rằng dữ liệu về các giaodịch mới được cập nhật một cách chính xác và kịp thời để phản ánh tình hình tàichính hiện tại của người dùng.

Mô tả phân rã chức năng:1 Thống kê

1.1 Người dùng chọn mục thống kê trên thanh menu

1.2 Ứng dụng mặc định hiển thị các giao dịch chi tiêu theo tháng1.3 Chọn loại chi tiêu

1.3.1 Chọn chi tiêu1.3.2 Chọn thu nhập1.4 Chọn phạm vi thống kê

1.4.1 Chọn thống kê theo ngày 1.4.2 Chọn thống kê theo tháng1.4.3 Chọn thống kê theo năm1.5 Hiển thị kết quả thống kê

1.5.1 Hiển thị biểu đồ thống kê tổng chi tiêu theo phạm vi và hiểnthị danh sách các giao dịch.

1.5.2 Hiển thị biểu đồ thống kê tổng thu nhập theo phạm vi và hiểnthị danh sách các giao dịch.

7

1.6 Lọc kết quả thống kê

1.6.1 Lựa chọn hiển thị giao dịch hoặc danh mục

1.6.1.1 Nếu chọn giao dịch sẽ hiển thị ra danh sách số tiền củatừng giao dịch theo phạm vi đã chọn.

1.6.1.2 Nếu chọn danh mục sẽ hiển thị danh sách số tiền theodanh mục theo phạm vi đã chọn.

1.7 Sắp xếp thứ tự kết quả thống kê1.7.1 Nhấn biểu tượng sắp xếp

1.7.1.1 Nhấn lần 1: Danh sách giao dịch hoặc danh mục đangđược chọn để lọc sẽ hiển thị theo thứ tự giá tiền giảmdần

1.7.1.2 Nhấn thêm lần nữa: Danh sách giao dịch hoặc danhmục đang được chọn để lọc sẽ hiển thị theo thứ tự giátiền tăng dần

Dữ liệu đầu vào:

- Tên danh mục chi tiêu mà người dùng mong muốn.Xử lý:

- Thêm/ Sửa/ Xóa danh mục chi tiêu.- Xem danh sách các danh mục đã tạo.Kết quả:

- Hiển thị danh sách danh mục chi tiêu mà người dùng đã tạo.Mô tả phân rã chức năng:

1 Thêm danh mục:Mô tả:

- Chức năng này cho phép người dùng thêm một danh mục mới để quản lývà phân loại chi tiêu hợp lý.

Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các trường để nhập thông tin như là têndanh mục (Ví dụ: Ăn uống, Du lịch, Đi lại, ), mô tả, biểu tượng.Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.Đầu vào:

- Tên danh mục muốn thêm mới- Mô tả (tùy chọn).

Xử lý:

9

1 Thêm danh mục

1.1 Người dùng nhấn vào phần thiết lập trên thanh menu

1.2 Người dùng chọn phần danh mục trong giao diện màn hình thiết lập1.3 Ứng dụng hiển thị màn hình quản lý danh mục

1.4 Nhấn nút thêm danh mục mới.1.5 Form thêm mới danh mục sẽ hiện lên.1.6 Người dùng nhập thông tin danh mục mới.1.7 Người dùng nhấn nút thêm

1.8 Ứng dụng kiểm tra tính hợp lệ (ví dụ: kiểm tra xem tên danh mục cóbị trùng lặp không).

1.9 Phản hồi lại với người dùng.

1.9.1 Nếu thông tin hợp lệ thì thông báo với người dùng là: “Danhmục mới đã được thêm thành công” và trở lại giao diện quảnlý danh mục.

1.9.2 Nếu thông tin không hợp lệ thì thông báo với người dùng là:“Trùng danh mục”.

Đặc trưng liên quan:

- Khi người dùng chọn một danh mục cần xóa, hệ thống cần xác nhận xóa vàsau đó xóa dữ liệu của danh mục đó khỏi cơ sở dữ liệu.

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.

- Danh sách các danh mục phải có ít nhất 1 danh mục.Đầu vào:

- Danh mục cần xóa Xử lý:

2 Xóa danh mục

2.1 Người dùng nhấn vào phần thiết lập trên thanh menu

2.2 Người dùng chọn phần danh mục trong giao diện màn hình thiết lập2.3 Ứng dụng hiển thị màn hình quản lý danh mục

2.4 Người dùng chọn danh mục muốn xóa 2.5 Ứng dụng hiển thị giao diện chi tiết danh mục2.6 Người dùng nhấn nút xóa

2.7 Ứng dụng xác nhận lại: “Bạn có chắc chắn muốn xóa danh mục?”.2.7.1 Người dùng nhấn nút Đồng ý

2.7.1.1 Ứng dụng quay trở lại màn hình quản lý danh mục2.7.2 Người dùng nhấn nút Hủy

2.7.2.1 Ứng dụng hiển thị lại giao diện chi tiết danh mụcĐầu ra:

- Danh mục đã xóa sẽ xóa khỏi danh sách các danh mục.3 Sửa danh mục:

Mô tả:

11

- Chức năng này cho phép người dùng sửa một danh mục đang tồn tại trongdanh sách các danh mục hiện có.

Đặc trưng liên quan:

- Khi người dùng chọn một danh mục cần sửa, giao diện người dùng cầnhiển thị thông tin danh mục đó và cho phép người dùng chỉnh sửa cáctrường thông tin như là tên danh mục, mô tả (tùy chọn).

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.

- Danh sách các danh mục phải có ít nhất 1 danh mục.Đầu vào:

- Danh mục cần sửa.

- Thông tin sửa đổi: tên danh mục mới, mô tả, biểu tượng Xử lý:

3 Sửa danh mục

3.1 Người dùng nhấn vào phần thiết lập trên thanh menu

3.2 Người dùng chọn phần danh mục trong giao diện màn hình thiết lập3.3 Ứng dụng hiển thị màn hình quản lý danh mục

3.4 Người dùng chọn danh mục muốn sửa.3.5 Form sửa danh mục sẽ hiện lên.3.6 Người dùng thay đổi thông tin danh mục

3.6.1 Người dùng bắt buộc thay đổi thông tin danh mục thì nút Lưumới được kích hoạt

3.7 Nhấn nút Lưu.

3.8 Hệ thống kiểm tra tính hợp lệ (ví dụ: kiểm tra xem tên danh mục cóbị trùng lặp không).

3.9 Phản hồi lại với người dùng.

3.9.1 Nếu thông tin hợp lệ thì thông báo với người dùng là: “Sửadanh mục thành công” và hiển thị lại giao diện quản lý danhmục

3.9.2 Nếu thông tin không hợp lệ thì thông báo với người dùng là:“Trùng danh mục”.

4 Xem danh sách danh mục

4.1 Người dùng nhấn vào phần thiết lập trên thanh menu

4.2 Người dùng chọn phần danh mục trong giao diện màn hình thiết lập4.3 Ứng dụng hiển thị màn hình quản lý danh mục

4.4 Người dùng chọn danh mục muốn xem4.5 Ứng dụng hiển thị giao diện chi tiết danh mụcĐầu ra:

13

- Danh sách các danh mục chi tiêu được hiển thị cho người dùng Mỗi danhmục có thể đi kèm với thông tin như tên danh mục, mô tả và biểu tượng.2.3.3 Quản lý chi tiêu hằng ngày

Mục tiêu:

- Cho phép người dùng nhập và ghi lại chi tiêu, thu nhập hàng ngày một cách dễdàng và nhanh chóng.

Dữ liệu đầu vào:

- Số tiền chi tiêu/ thu nhậpXử lý:

- Thêm chi tiêu- Thêm thu nhập- Sửa chi tiêu/ thu nhập- Xóa chi tiêu/ thu nhập- Xem chi tiết chi tiêu/ thu nhập Mô tả phân rã chức năng:

1 Thêm chi tiêu:Mô tả:

- Chức năng này cho phép người dùng thêm một khoản chi tiêu trong ngàyvào hệ thống

Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các trường để người dùng nhập thôngtin như số tiền, danh mục (ví dụ: thực phẩm, đi lại), ghi chú và ngày thựchiện.

Tiền điều kiện:

- Người dùng đã đăng nhập vào ứng dụng Đầu vào:

- Ngày thực hiện- Số tiền chi - Ghi chú- Danh mụcXử lý:

2 Thêm chi tiêu

1.1 Người dùng chọn mục giao dịch trên menu

1.2 Ứng dụng hiển thị giao diện mặc định là nhập chi tiêuvới ngày giờ hiện tại

1.3 Người dùng nhập chi tiêu mới

1.3.1 Người dùng bắt buộc nhập số tiền và chọndanh mục thì nút thêm mới được kích hoạt1.4 Người dùng nhấn nút thêm

1.5 Ứng dụng hiện thông báo “Thêm thành công” và hiển thịlại giao diện nhập chi tiêu mới

- Chức năng này cho phép người dùng thêm một khoản thu nhập trongngày vào hệ thống.

Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các trường để người dùng nhập thôngtin như số tiền, danh mục (ví dụ: thực phẩm, đi lại), ghi chú và ngày thựchiện.

Tiền điều kiện:

- Người dùng đã đăng nhập vào ứng dụng.Đầu vào:

- Ngày thực hiện - Số tiền thu - Ghi chú- Danh mụcXử lý:

2 Thêm chi tiêu

2.1 Người dùng chọn mục giao dịch trên menu

2.2 Ứng dụng hiển thị giao diện mặc định là nhập chi tiêu 2.3 Người dùng chọn tab thu nhập để nhập thu nhập2.4 Người dùng nhập thu nhập mới

2.4.1 Người dùng bắt buộc nhập số tiền và chọndanh mục thì nút thêm mới được kích hoạt2.5 Người dùng nhấn nút thêm

2.6 Ứng dụng hiện thông báo “Thêm thành công” và hiển thịlại giao diện nhập thu nhập mới

Đầu ra:

- Thu nhập mới được thêm thành công3 Xóa chi tiêu/ thu nhập

Mô tả:

- Chức năng này cho phép người dùng xóa một khoản chi tiêu/ thunhập trong ứng dụng.

Đặc trưng liên quan:

- Khi người dùng chọn một giao dịch cần xóa, ứng dụng cần xácnhận xóa và sau đó xóa dữ liệu của giao dịch đó khỏi cơ sở dữliệu.

Tiền điều kiện:

- Người dùng đã đăng nhập vào ứng dụng.- Ứng dụng phải có ít nhất 1 giao dịchĐầu vào:

- Chọn giao dịch cần xóa từ màn hình thống kêXử lý:

3 Xóa chi tiêu/ thu nhập

3.1 Vào phần thống kê trên thanh menu

3.2 Chọn giao dịch thuộc phần chi tiêu/ thu nhập muốn xóa3.3 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập3.4 Người dùng nhấn nút xóa

3.5 Ứng dụng hiện thông báo xác nhận “Bạn có chắc chắnmuốn xóa chi tiêu”

17

3.5.1 Người dùng nhấn “Đồng ý”, ứng dụng hiểnthị thông báo “Xóa thành công” và quay trởlại màn thống kê trước đó

3.5.2 Người dùng nhấn “Hủy” ứng dụng hiển thịlại giao diện chi tiết chi tiêu/ thu nhập Đầu ra:

- Giao dịch được xóa thành công4 Sửa chi tiêu/ thu nhập

Mô tả:

- Chức năng này cho phép người dùng sửa một khoản chi tiêu/ thunhập trong ứng dụng.

Đặc trưng liên quan:

- Khi người dùng chọn một giao dịch cần sửa, giao diện cần hiển thịthông tin giao dịch đó và cho phép người dùng chỉnh sửa cáctrường thông tin như ngày thực hiện, số tiền, ghi chú, danh mục Tiền điều kiện:

- Người dùng đã đăng nhập vào ứng dụng.- Ứng dụng phải có ít nhất 1 giao dịchĐầu vào:

4.1 Vào phần thống kê trên thanh menu

4.2 Chọn giao dịch thuộc phần chi tiêu/ thu nhập muốn sửa4.3 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập4.4 Người dùng nhấn nút sửa

4.5 Ứng dụng hiển thị giao diện sửa chi tiêu/ thu nhập4.6 Người dùng thay đổi thông tin giao dịch

4.6.1 Người dùng bắt buộc thay đổi thông tin giaodịch đồng thời số tiền và danh mục khôngđược để trống thì nút Lưu mới được kíchhoạt

- Chức năng này cho phép người dùng xem chi tiết một khoản chitiêu/ thu nhập trong ứng dụng.

Đặc trưng liên quan:

- Khi người dùng chọn một giao dịch cần xem, ứng dụng cần hiểnthị thông tin chi tiết của giao dịch đó.

Tiền điều kiện:

- Người dùng đã đăng nhập vào ứng dụng.- Ứng dụng phải có ít nhất 1 giao dịch

19

Xử lý:

5 Xem chi tiết chi tiêu/ thu nhập

5.1 Vào phần thống kê trên thanh menu

5.2 Chọn giao dịch thuộc phần chi tiêu/ thu nhập muốn xem5.3 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập Đầu ra:

- Chi tiết giao dịch được hiển thị cho người dùng Mỗi giao dịch cóthể đi kèm với thông tin như ngày thực hiện, số tiền, ghi chú, danhmục.

6 Mục tiêu: Cho phép người dùng chỉnh sửa thông tin chi tiêu hàng ngày đãnhập.

7 Đặc trưng liên quan: Khi người dùng chọn một khoản chi tiêu cần sửa, giaodiện người dùng cần hiển thị thông tin chi tiêu hiện tại và cho phép ngườidùng chỉnh sửa các trường thông tin như số tiền, danh mục, mô tả và ngàythực hiện.

8 Tiền điều kiện: Người dùng đã đăng nhập vào tài khoản (nếu cần) và đãnhập ít nhất một khoản chi tiêu.

● Xóa Chi Tiêu Hàng Ngày:

- Mục tiêu: Cho phép người dùng xóa một khoản chi tiêu hàng ngày đã nhập.- Đặc trưng liên quan: Khi người dùng chọn một khoản chi tiêu cần xóa, hệthống cần xác nhận xóa và sau đó xóa dữ liệu của khoản chi tiêu đó khỏi cơsở dữ liệu.

- Tiền điều kiện: Người dùng đã đăng nhập vào tài khoản (nếu cần) và đãnhập ít nhất một khoản chi tiêu.

2.Xem thông tin chi tiêu đã nhập:

● Mục tiêu:Cho phép người dùng xem thông tin chi tiêu đã nhập trước đó để kiểm tra, xem lại hoặc quản lý.

● Đặc trưng liên quan:

○ Giao diện người dùng cần hiển thị danh sách các chi tiêu đã nhập và cung cấp các tùy chọn để xem chi tiêu theo ngày hoặc danh mục.

21

○ Cần hiển thị thông tin chi tiêu như số tiền, danh mục, mô tả và ngày thực hiện.

Tiền điều kiện : Người dùng đã nhập khoản chi tiêu2.3.4 Quản lý dự chi

Mục tiêu:

- Giúp người dùng đặt ra giới hạn chi tiêu cho một khoảng thời gian cụ thể- Đảm bảo rằng người dùng có thể dễ dàng theo dõi trạng thái ngân sách của mình.Dữ liệu đầu vào:

- Tên danh mục chi tiêu mà người dùng muốn đặt ngân sách.Xử lý:

- Thêm/ Sửa/ Xóa dự chi.- Xem thông tin các khoản dự chi.Kết quả:

- Hiển thị danh sách danh mục dự chi mà người dùng đã đặt ngân sách.

- Cung cấp thanh tiến độ hỗ trợ phân tích: Đảm bảo rằng người dùng có thể dễ dàngtheo dõi trạng thái duy trì ngân sách.

Mô tả phân rã chức năng:1 Thêm dự chi:Mô tả:

- Chức năng này cho phép người dùng thêm khoản dự chi vào một danh mụccụ thể.

Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các danh mục để nhập dự chi như làtên danh mục (Ví dụ: Ăn uống, Du lịch, Đi lại, )

- Khi nhấn vào một danh mục sẽ hiển thị phần đặt giới hạn chi tiêuTiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.Đầu vào:

- Tên danh mục muốn thêm dự chiXử lý:

1 Thêm dự chi

1.1 Nhấn vào phần dự chi1.2 Các danh mục sẽ xuất hiện1.3 Chọn danh mục cần đặt dự chi 1.4 Nhấn nút đặt giới hạn chi tiêu

1.5 Nhập khoản ước chừng sẽ dành cho danh mục đó trong tháng 1.5.1 Chỉ cho phép người dùng nhập số

- Chức năng này cho phép người dùng sửa ngân sách đã đặt cho một danhmục.

Đặc trưng liên quan:

- Khi người dùng chọn một danh mục đã đặt ngân sách cần sửa, giao diệnngười dùng cần hiển thị thông tin về ngân sách của danh mục đó (Tổng dựchi, tổng đã chi, số ngân sách còn lại) và cho phép người dùng chỉnh sửatổng dự chi

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.

- Danh sách các danh mục đã nhập dự chi phải có ít nhất 1 danh mục.Đầu vào:

- Danh mục cần sửa dự chi.

- Thông tin sửa đổi: Tổng dự chi trong tháng cho danh mục đóXử lý:

2 Sửa dự chi

2.1 Nhấn vào phần dự chi

2.2 Các danh mục với ngân sách đã đặt sẽ xuất hiện 2.2 Chọn danh mục dự chi muốn sửa.

2.3 Form sửa tổng dự chi sẽ hiện lên

2.4 Nhập số tiền dự chi cho danh mục muốn sửa đổi 2.4.1 Chỉ cho phép người dùng nhập số

2.5 Nhấn nút lưu.Đầu ra:

- Danh mục dự chi đã sửa được cập nhật lại trong danh sách các danh mụcdự chi.

3 Xem danh sách dự chi:Mô tả:

- Chức năng này cho phép người dùng xem tình trạng ngân sách trong tháng.- Xem chi tiết tình trạng ngân sách của từng danh mục

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.Xử lý:

3 Xem danh sách dự chi3.1 Nhấn vào phần dự chi 3.1 Thông tin dự chi sẽ xuất hiện

3.1.1 Hiển thị tổng dự chi đã đặt trong tháng, tổng đã chi, còn lại 3.1.2 Hiển thị danh mục đã đặt dự chi cùng số ngân sách đã đặt vàsố tiền còn lại cùng với thanh tiến độ ngân sách tạo cái nhìn trực quan cho ngườidùng

Đầu ra:

- Thông tin dự chi trong tháng được hiển thị cho người dùng - Đi kèm với thanh tiến độ ngân sách

25

2.3.5 Quản lý vay và cho vayMục tiêu:

- Giúp người dùng dễ dàng ghi chú và theo dõi các khoản vay của họ

- Tối giản hóa quá trình quản lý vay và cho vay, giúp người dùng hiểu rõ tình hình tài chính của mình và duy trì các giao dịch đúng hạn

Dữ liệu đầu vào:- Tên danh mục

- người cho vay và người vayXử lý:

- Thêm/ sửa/ xóa các khoản vay- Xem thông tin các khoản vayKết quả:

- Hiển thị danh sách các khoản vay mà người dùng đã tạoMô tả phân rã chức năng:

1 Thêm khoản vayMô tả:

- Chức năng này cho phép người dùng thêm một khoản vay vào danhsách quản lý vay của họ.

Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các trường để nhập thông tinvề khoản vay, bao gồm số tiền, lãi suất, thời hạn và các chi tiết khác.

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống.Đầu vào:

- Số tiền khoản vay- Lãi suất- Thời hạn vay- Thời gian bắt đầu vay

- Thông tin liên hệ của người cho vay (nếu áp dụng)Xử lý:

1 Thêm khoản vay

1.1 Nhấn vào phần quản lý vay1.2 Chọn "Thêm Khoản Vay"

1.3 Nhập số tiền khoản vay vào trường tương ứng1.4 Nhập lãi suất vào trường tương ứng

1.5 Nhập thời hạn vay vào trường tương ứng (ví dụ: 24 tháng)

1.6 Nhập thời gian bắt đầu vay (ngày/tháng/năm)1.7 Nhập thông tin liên hệ của người cho vay

27

1.8 Nhấn "Lưu" để hoàn tất quá trình thêm khoản vayĐầu ra:

- Thông tin về khoản vay được thêm vào danh sách quản lý vay của người dùng Người dùng có thể xem, sửa đổi hoặc xóa thôngtin về khoản vay này trong tương lai.

2 Sửa các khoản vayMô tả:

- Chức năng này cho phép người dùng chỉnh sửa thông tin của một khoản vay đã được thêm vào danh sách quản lý vay của họ.Đặc trưng liên quan:

- Giao diện người dùng cần cung cấp các trường để người dùng có thể chỉnh sửa thông tin về khoản vay, bao gồm số tiền, lãi suất, thời hạn và các chi tiết khác.

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống và đã thêm ít nhất một khoản vay vào danh sách quản lý vay.

Đầu vào:

- Chọn khoản vay muốn chỉnh sửa

- Các trường thông tin liên quan cần chỉnh sửa, bao gồm số tiền, lãi suất, thời hạn, thời gian bắt đầu vay và thông tin liên hệ của người cho vay.

Xử Lý:

2 Sửa Khoản Vay

2.1 Nhấn vào phần quản lý vay

2.2 Chọn khoản vay muốn chỉnh sửa từ danh sách hiển thị2.3 Chỉnh sửa các trường thông tin liên quan theo yêu cầu2.3.1 Nhập số tiền khoản vay vào trường tương ứng2.3.2 Nhập lãi suất vào trường tương ứng

2.3.3 Nhập thời hạn vay vào trường tương ứng (ví dụ: 36 tháng)2.3.4 Nhập thời gian bắt đầu vay (ngày/tháng/năm)

2.3.5 Chỉnh sửa thông tin liên hệ của người cho vay nếu cần thiết2.4.Nhấn "Lưu" để cập nhật các thay đổi

Đầu Ra:

- Thông tin về khoản vay đã được chỉnh sửa được cập nhật trong danh sách quản lý vay của người dùng Các thay đổi này có thể được xem lại hoặc tiếp tục chỉnh sửa trong tương lai.

3 Xóa khoản vayMô tả:

- Chức năng này cho phép người dùng xóa một khoản vay từ danh sách quản lý vay của họ.

Đặc trưng liên quan:

29

- Giao diện người dùng cần cung cấp tùy chọn để xác nhận việc xóa khoản vay và tránh việc xóa khoản vay một cách không chú ý.Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống và đã thêm ít nhất một khoản vay vào danh sách quản lý vay.

Đầu vào:

- Chọn khoản vay muốn xóa từ danh sách hiển thị Xử lý:

3 Xóa khoản vay

3.1 Nhấn vào phần quản lý vay.

3.2 Chọn khoản vay muốn xóa từ danh sách hiển thị.3.3 Hiển thị cảnh báo hoặc hộp thoại xác nhận xóa.3.4 Nhấn "Xác Nhận" hoặc "Xóa" trong hộp thoại xác nhận.3.5 Hệ thống xác nhận việc xóa và loại bỏ khoản vay khỏi danh sách.Đầu Ra:

- Khoản vay đã được xóa và không còn xuất hiện trong danh sách quản lývay của người dùng Họ không thể xem hoặc chỉnh sửa thông tin của khoản vay này sau khi xóa.

4 Xem các khoản vayMô tả:

- Chức năng này cho phép người dùng xem danh sách các khoản vay đã thêm vào hệ thống quản lý vay của họ.

Đặc trưng liên quan:

- Giao diện người dùng cần hiển thị thông tin chi tiết về các khoản vay, bao gồm số tiền, lãi suất, thời hạn và thông tin liên hệ của người cho vay.

Tiền điều kiện:

- Người dùng đã đăng nhập vào hệ thống và đã thêm ít nhất một khoản vay vào danh sách quản lý vay.

Đầu vào:

- Không có đầu vào cụ thể cho chức năng này.Xử lý:

4 Xem Các Khoản Vay

4.1 Nhấn vào phần quản lý vay.

4.2 Danh sách các khoản vay sẽ được hiển thị với các thông tin chi tiết.

4.3 Để xem thông tin chi tiết về một khoản vay, người dùng nhấn vào tên hoặc biểu tượng của khoản vay đó.

Đầu ra:

- Người dùng sẽ thấy danh sách các khoản vay của mình, mỗi khoản vay đi kèm với thông tin chi tiết như số tiền, lãi suất, thời hạn và thông tin

31

liên hệ của người cho vay Khi họ chọn một khoản vay cụ thể, họ có thểxem thông tin chi tiết về khoản vay đó.

- Các chức năng quản lý vay trong ứng dụng quản lý tiêu dùng đều đơn giản và dễ sử dụng Người dùng có thể thêm, sửa, xóa và xem các khoản vay một cách tiện lợi và linh hoạt Chức năng xem cho phép họ kiểm tra tình hình các khoản vay của mình mọi lúc, giúp họ duy trì tài chính cá nhân một cách thông minh và hiệu quả.

3.1 Giới thiệu tổng quan

Ứng dụng dụng quản lý chi tiêu cá nhân hữu ích và dễ sử dụng cho đối tượng chủ yếu làsinh viên, giới trẻ và một phần nhỏ người trung tuổi.

3 nhiệm vụ quan trọng có được sau khi phân tích nhiệm vụ: + Quản lý danh mục chi tiêu

+ Quản lý chi tiêu hàng ngày+ Thống kê

3.2 Thiết kế tổng quan

Bước 1: Người dùng vào ứng dụng:- Ứng dụng hiển thị giao diện đăng nhập

Hình 1: Giao diện đăng nhập

Bước 2: Người dùng nhập thông tin đăng nhập rồi ấn nút “Đăng nhập”:- Ứng dụng kiểm tra thông tin đăng nhập, nếu hợp lệ hiện giao diện trang chủ

Hình 2: Giao diện trang chủ

33

Bước 3: Người dùng vào phần thiết lập để xem thông tin tài khoản và các điều hướng đếncác nhiệm vụ quan trọng

Hình 3: Giao diện thiết lập

Bước 4: Người dùng thao tác với ứng dụng qua 3 nhiệm vụ quan trọng:Bước 4.1: Người dùng chọn mục giao dịch trên thanh menu:- Hệ thống hiển thị giao diện nhập chi tiêu (mặc định)

35

Hình 4: Giao diện nhập chi tiêu

Bước 4.2: Người dùng chọn phần “Danh mục” trên trang thiết lập- Hệ thống hiển thị giao diện quản lý danh mục

Hình 5: Giao diện quản lý danh mục

Bước 4.3: Người dùng chọn phần thống kê trên thanh menu:- Hệ thống hiển thị giao diện thống kê

37

Hình 6: Giao diện thống kê3.3 Thiết kế kịch bản mẫu

3.3.1 Chức năng quản lý danh mục chi tiêu

a Tiền điều kiện:

Người dùng đã đăng nhập vào hệ thống b Thêm danh mục

Bước 1: Người dùng vào trang thiết lập

Bước 2: Người dùng chọn phần “Danh mục” trên giao diện trang thiết lậpBước 3: Ứng dụng hiện giao diện quản lý danh mục

Hình 7: Giao diện quản lý danh mục

Bước 4: Người dùng nhấn nút thêm danh mục mới

Ứng dụng hiện giao diện điền thông tin gồm: Tên danh mục, mô tả(tùy chọn),chọn biểu tượng, chọn màu sắc

39

Hình 8: Giao diện thêm danh mục

Bước 2: Người dùng điền thông tin danh mục