1. Trang chủ
  2. » Luận Văn - Báo Cáo

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

97 5 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Thiết Kế Giao Diện Ứng Dụng Quản Lý Chi Tiêu Vtuc
Tác giả Nguyễn Tuấn Vũ, Dương Văn Chính, Vũ Hoàng Việt, Đào Thị Kiều Trang, Bùi Thị Thu Uyên
Người hướng dẫn ThS. Nguyễn Thị Thu Hương
Trường học Trường Đại Học Thủy Lợi
Chuyên ngành Công Nghệ Thông Tin
Thể loại báo cáo
Năm xuất bản 2023
Thành phố Hà Nội
Định dạng
Số trang 97
Dung lượng 1,44 MB

Cấu trú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 (73)
  • V. XÂY DỰNG PROTOTYPE MÁY TÍNH (79)

Nội dung

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

ĐỀ XUẤT ĐỀ BÀI

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 để đảm bả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ý chi tiê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ụng mộ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ức tạ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ới giao 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óa danh 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 qua cá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.

Giải pháp

Ngôn ngữ lập trình: HTML CSS

Bộ công cụ xây dựng giao diện: Figma

Môi trường chạy ứng dụng: Website

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:

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:

● Phân tích nhiệm vụ về “Phân tích và báo cáo”.

● Phân tích nhiệm vụ về “Quản lý chi tiêu hàng ngày”.

● Phân tích nhiệm vụ về “Quản lý vay và cho vay”.

● Phân tích nhiệm vụ về “Quản lý danh mục chi tiêu”.

● Phân tích nhiệm vụ về “Quản lý dự chi”.

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

Giới thiệu

Phân tích người sử dụng và nhiệm vụ là một phần quan trọng trong quá trình phát triển ứng dụng quản lý chi tiêu cá nhân Điều này nhằm đảm bảo rằng ứng dụng được thiết kế và phát triển để đáp ứng tốt nhất các nhu cầu cụ thể của người dùng cuối Báo cáo này sẽ 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 ứng dụ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ừng nhó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ủa từ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ài chí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ện và tính năng của ứng dụng.

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.

- 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ạn chế 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ới họ.

- 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ệc củ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ại thô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àng ngà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.

Phân tích nhiệm vụ

2.3.1 Phân tích và báo cáo

- 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ười dù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.

- 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 giao dị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ài chính hiện tại của người dùng.

Mô tả phân rã chức năng:

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áng 1.3 Chọn loại chi tiêu

1.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áng

1.4.3 Chọn thống kê theo năm

1.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ển thị 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ển thị danh sách các giao dịch.

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ủa từ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 theo danh 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ảm dần

1.7.1.2 Nhấn thêm lần nữa: 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 tăng dần

1.8.1 Nhấn vào biểu tượng tải xuống thống kê

1.8.2 Hiển thị thông báo xác nhận tải xuống

1.8.2.1 Chọn đồng ý thì sẽ tải xuống kết quả thống kê 1.8.2.2 Chọn hủy thì sẽ quay lại màn hình thống kê

2.3.2 Quản lý danh mục chi tiêu

- Cung cấp cho người dùng khả năng quản lý danh mục chi tiêu một cách hiệu quả và dễ dàng Giúp họ có thể theo dõi, ghi chép và phân loại các khoản chi tiêu một cách rõ ràng, cụ thể.

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

- Thêm/ Sửa/ Xóa danh mục chi tiêu.

- Xem danh sách các danh mục đã tạo.

- 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:

- 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ên danh 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

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ập 1.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à: “Danh mục mới đã được thêm thành công” và trở lại giao diện quản lý 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”. Đầu ra:

- Danh mục mới được thêm mới vào danh sách các danh mục.

- Chức năng này cho phép người dùng xóa một danh mục đang tồn tại trong danh 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 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.

- 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:

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ập 2.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ục

2.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ục 2.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.

- 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 trong danh 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ần hiển thị thông tin danh mục đó và cho phép người dùng chỉnh sửa các trường thông tin như là tên danh mục, mô tả (tùy chọ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:

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

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ập 3.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ưu mới được kích hoạt

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ửa danh mục thành công” và hiển thị lại giao diện quản lý danh mụ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”. Đầu ra:

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

4 Xem danh sách danh mục:

- Chức năng này cho phép người dùng xem danh sách các danh mục hiện có. Tiền điều kiện:

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

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ập 4.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 xem

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

- Danh sách các danh mục chi tiêu được hiển thị cho người dùng Mỗi danh mụ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

- 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.

- Số tiền chi tiêu/ 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:

- Chức năng này cho phép người dùng thêm một khoản chi tiêu trong ngà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ông tin như số tiền, danh mục (ví dụ: thực phẩm, đi lại), ghi chú và ngày thực hiện.

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

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êu vớ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ọn danh mục thì nút thêm mới được kích hoạt 1.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 Đầu ra:

- Chi tiêu mới được thêm thành công

- Chức năng này cho phép người dùng thêm một khoản thu nhập trong ngà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ông tin như số tiền, danh mục (ví dụ: thực phẩm, đi lại), ghi chú và ngày thực hiện.

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

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ập 2.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ọn danh mục thì nút thêm mới được kích hoạt 2.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ông

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

- Chức năng này cho phép người dùng xóa một khoản chi tiê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 xóa, ứng dụng cần xác nhận xóa và sau đó xóa dữ liệu của giao dịch đó khỏi cơ sở dữ liệu.

- 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ê

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óa 3.3 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập 3.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ắn muốn xóa chi tiêu”

3.5.1 Người dùng nhấn “Đồng ý”, ứng dụng hiển thị 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ông

4 Sửa chi tiêu/ thu nhập

- Chức năng này cho phép người dùng sửa một khoản chi tiê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 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ác trườ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:

- Thông tin sửa đổi: ngày thực hiện, ghi chú, số tiền, danh mục

4 Sửa chi tiêu/ thu nhập

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ửa 4.3 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập 4.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ập 4.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 giao dị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ích hoạt

4.7 Người dùng nhấn nút Lưu 4.8 Ứng dụng hiện thông báo lưu thành công và quay lại màn hình thống kê trước đó. Đầu ra:

- Giao dịch được sửa thành công

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

- Chức năng này cho phép người dùng xem chi tiết một khoản chi tiê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ển thị thông tin chi tiết của giao dịch đó.

- 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

PHÁC HỌA THIẾT KẾ

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

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ủ

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 đến cá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)

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ê

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ập

Bướ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

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

Hình 9: Thao tác thêm danh mục

Bước 3: Người dùng nhấn thêm để thêm danh mục mới: Ứng dụng kiểm tra tính hợp lệ

Nếu thông tin hợp lệ thì hiện thông báo là: “Tạo danh mục thành công”

Hinh 10: Thông báo thêm thành công

Nếu thông tin bị trùng với danh mục đã có sẵn thì hiện thông báo là

Hình 11: Thông báo “Trùng danh mục

Bước 3.1: Người dùng xác nhận đóng thông báo

43 Ứng dụng quay trở lại giao diện nhập thông tin danh mục với thông tin danh mục vừa nhập

Hinh 12: Giao diện thêm danh mục với thông tin danh mục vừa nhập c Xóa danh mục

Tiền điều kiện: Danh sách danh mục phải có ít nhất 1 mục

Bước 1: Người dùng nhấn vào danh mục cần xóa Ứng dụng hiện giao diện chi tiết với thông tin danh mục vừa chọn gồm tên danh mục, mô tả (tùy chọn), biểu tượng

Hình 13: Giao diện xóa danh mục

Bước 2: Người dùng nhấn nút “Xóa”

Hệ thống hiện thông báo “Bạn có chắc chắn muốn xóa danh mục?”

Hình 14: Thông báo xác nhận xóa

Bước 2.1: Người dùng xác nhận “Xóa” Ứng dụng hiện giao diện quản lý danh mục với thông báo “Xóa danh mục thành công”

Hình 15: Giao diện quản lý danh mục đã xóa thành công

Bước 2.2: Người dùng xác nhận “Hủy”

47 Ứng dụng quay trở lại giao diện chi tiết danh mục với thông tin danh mục gồm tên danh mục, mô tả (tùy chọn), biểu tượng

Hình 16: Quay trở lại giao diện xóa danh mục d Sửa danh mục

Tiền điều kiện: Danh sách danh mục phải có ít nhất 1 mục

Bước 1: Người dùng nhấn vào danh mục cần sửa Ứng dụng hiện giao diện chi tiết với thông tin danh mục vừa chọn gồm tên danh mục, mô tả (tùy chọn), biểu tượng

Bước 2: Nhấn nút sửa Ứng dụng hiện giao diện chỉnh sửa

Hình 17: Giao diện sửa danh mục

Bước 2: Người dùng sửa thông tin danh mục

Bước 3: Người dùng nhấn “Lưu” Ứng dụng kiểm tra thông tin hợp lệ

Nếu thông tin hợp lệ thì hiện màn quản lý danh mục với danh mục đã được sửa và hiện thông báo là “Sửa danh mục thành công”

Hình 19: Thông báo sửa thành công

Nếu thông tin bị trùng với danh mục đã có sẵn thì hiện thông báo là “Trùng danh mục”

Hình 20: Thông báo trùng danh mục

Bước 3.1: Người dùng xác nhận đóng thông báo o Ứng dụng quay trở lại giao diện sửa thông tin danh mục với thông tin danh mục vừa nhập

Hình 21: Quay lại giao diện sửa danh mục

3.2.2 Chức năng quản lý chi tiêu hàng ngày a Tiền điều kiện

Người dùng chọn mục giao dịch trên menu b Nhập tiền chi

Bước 1: Người dùng chọn phần chi tiêu Ứng dụng hiện giao diện điền thông tin gồm: Ngày, ghi chú, tiền chi, danh mục

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

Bước 2: Người dùng nhập thông tin chi tiêu

Hình 20: Thao tác nhập chi tiêu

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

Bước 4: Ứ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 c.Nhập tiền thu

Tương tự phần nhập tiền chi. d Sửa chi tiêu/ thu nhập

Bước 1: Từ giao diện thống kê, người dùng chọn chi tiêu/ thu nhập muốn sửa

59 Ứng dụng hiển thị giao diện sửa chi tiêu với thông tin chi tiêu vừa chọn gồm: ngày, ghi chú, tiền chi (tiền thu), danh mục

Hình 22: Giao diện sửa chi tiêu

Bước 2: Người dùng chỉnh sửa chi tiêu/ thu nhập:

Hình 23: Thao tác sửa chi tiêu Bước 3: Người dùng lưu lại chỉnh sửa d Xóa chi tiêu/ thu nhập

Bước 1: Từ giao diện thống kê người dùng chọn chi tiêu/ thu nhập muốn xóa

61 Ứng dụng hiển thị giao diện chi tiết chi tiêu/ thu nhập với thông tin vừa chọn gồm: ngày, ghi chú, tiền chi (tiền thu), danh mục

Hình 25: Giao diện xóa chi tiêu

Bước 2: Người dùng nhấn “Xóa” Ứng dụng hiển thị thông báo “Bạn có chắc chắn muốn xóa chi tiêu?”

Hình 26: Thông báo xác nhận xóa

Bước 2.2: Người dùng xác nhận xóa

63 Ứng dụng xóa chi tiêu

Bước 2.3: Người dùng xác nhận hủy Ứng dụng quay trở lại giao diện màn hình xóa chi tiêu

Hình 28: Quay trở lại giao diện xóa chi tiêu

3.2.3 Chắc năng quản lý thống kê a Tiền điều kiện

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

- 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 giao dị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ài chính hiện tại của người dùng. b Thống kê chi tiêu

Người dùng chọn mục thống kê trên menu ng d ng Ứ ụ m c đ nh hi n th cácặ ị ể ị giao d ch chi tiêu theo ị tháng

Hình 29: Thống kê theo giao dịch theo tháng

Người dùng chọn phạm vi thống kê là “Tháng” và chọn lọc kết quả thống kê theo “Danh mục” Ứng dụng hiện giao diện Thống kê theo danh mục trong tháng

Hình 30: Thống kê theo danh mục trong tháng

Người dùng chọn phạm vi thống kê là “Ngày” và chọn lọc kết quả thống kê theo “Giao dịch” Ứng dụng hiện giao diện Thống kê chi tiêu (ngày - giao dịch)

Hinh 31: Thống kê chi tiêu (ngày - giao dịch)

Người dùng chọn phạm vi thống kê là “Ngày” và chọn lọc kết quả thống kê theo “Danh mục” Ứng dụng hiện giao diện Thống kê chi tiêu (ngày – danh mục)

Hình 32: Thống kê chi tiêu (ngày - giao dịch) c Thống kê thu nhập

Tiền điều kiện: Người dùng chọn phần “Thu nhập” trên giao diện Thống kê Người dùng chọn phạm vi thống kê là “Tháng” và chọn lọc kết quả thống kê theo “Giao dịch” Ứng dụng hiện giao diện thống kê giao dịch thu nhập theo tháng

Hình 33: Thống kê thu nhập (tháng - giao dịch)

Người dùng chọn phạm vi thống kê là “Tháng” và chọn lọc kết quả thống kê theo “Danh mục” o Ứng dụng hiện giao diện thống kê danh mục thu nhập theo tháng

Hình 34: Thống kê thu nhập (tháng – danh mục)

Người dùng chọn phạm vi thống kê là “Ngày” và chọn lọc kết quả thống kê theo “Giao dịch” o Ứng dụng hiện giao diện thống kê giao dịch thu nhập theo ngày

Hình 35: Thống kê thu nhập (ngày– giao dịch)

Người dùng chọn phạm vi thống kê là “Ngày” và chọn lọc kết quả thống kê theo “Danh mục” o Ứng dụng hiện giao diện thống kê danh mục thu nhập theo ngày

Hình 36: Thống kê thu nhập (ngày - danh mục)

XÂY DỰNG STORYBOARD

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

IV.2 Chức năng quản lý chi tiêu hàng ngày

4.3 Chức năng quản lý thống kê

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

1 Màn hình Nhập chi tiêu

2 Màn hình thêm chi tiêu thành công

3 Màn hình nhập Thu nhập

4 Màn hình Thêm thu nhập thành công

5 Màn hình chi tiết chi tiêu

6 Màn hình chi tiết chi tiêu – xác nhận xóa

7 Màn hình Sửa chi tiêu

9 Màn hình Quản lý danh mục

10 Màn hình chi tiết danh mục

11 Màn hình chi tiết danh mục – xác nhận xóa

12 Màn hình thêm danh mục

13 Màn hình thêm danh mục thành công

14 Màn hình thêm danh mục – trùng danh mục

15 Màn hình sửa danh mục

16 Màn hình sửa danh mục thành công

17 Màn hình sửa danh mục – trùng danh mục

Ngày đăng: 15/05/2024, 18:45

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w