ĐỒ án ỨNG DỤNG QUẢN lí THU CHI cá NHÂN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

ỨNG DỤNG QUẢN LÍ THU CHI CÁ NHÂN

Đồ án 2 – SE122.L11.PMCL – VN
Giảng viên hướng dẫn: Thầy HUỲNH NGUYỄN KHẮC HUY
Sinh viên thực hiện:

Phạm Như Hiếu

– 17520482

Trương Hoàng Vinh

– 17521266

TP HỒ CHÍ MINH, 06/01/2021


ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

PHẠM NHƯ HIẾU

– 17520482

TRƯƠNG HOÀNG VINH – 17521266

ĐỒ ÁN 2

ỨNG DỤNG QUẢN LÍ THU CHI CÁ NHÂN
MONEY MANAGEMENT APLLICATION

KỸ SƯ/ CỬ NHÂN NGÀNH KĨ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN
Thầy HUỲNH NGUYỄN KHẮC HUY

TP HỒ CHÍ MINH, 2021


LỜI CẢM ƠN
Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến thầy Huỳnh Nguyễn
Khắc Huy – giảng viên hướng dẫn chúng em thực hiện Đồ án 2. Thầy đã cùng đồng
hành và tận tình hướng dẫn cho chúng em qua từng giai đoạn của đồ án. Nhờ có sự
giúp đỡ nhiệt tình của thầy mà chúng em có thể hồn thành được được đồ án này
một cách tốt nhất.
Vì kiến thức của chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi những
thiếu sót trong quá trình thực hiện đồ án. Tuy nhiên, chúng em đã cố gắng hoàn
thành đúng hạn và hạn chế các lỡi nhiều nhất có thể. Nhóm chúng em ln mong
đợi nhận được những ý kiến đóng góp quý báu từ thầy và qua đó có thể rút kinh
nghiệm, tự sửa chữa, hồn thiện bản thân mình trên tinh thần nghiêm túc, tự giác
học hỏi.
Trong quá trình làm đề tài báo cáo, sẽ khơng thể tránh khỏi các thiếu sót, rất

mong nhận được phản hồi từ thầy và các bạn để góp phần làm cho bản báo cáo
thêm hồn thiện hơn.
Chân thành cảm ơn thầy!


LỜI NHẬN XÉT CỦA GIẢNG VIÊN

…..……………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

…………………………………………………………………………………


MỤC LỤC
Chương 1 MỞ ĐẦU .................................................................................................... 1
1.1

Lí do chọn đề tài ......................................................................................... 1

1.2

Phương pháp nghiên cứu............................................................................ 1

1.3

Đối tượng hướng đến ................................................................................. 1

Chương 2 GIỚI THIỆU VỀ FLUTTER ..................................................................... 2
2.1

Giới thiệu ngơn ngữ lập trình Dart ............................................................. 2

2.1.1

Ngơn ngữ lập trình Dart là gì? ............................................................ 2

2.1.2

Ưu điểm của Dart ................................................................................ 2

2.2

Giới thiệu framework Flutter ..................................................................... 3

2.2.1

Flutter là gì?......................................................................................... 3

2.2.2

Kiến trúc của Flutter ............................................................................ 4

2.2.3

Ưu điểm của Flutter so với các framework khác ................................ 5

Chương 3 CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER .............................. 8
3.1

Yêu cầu cấu hình phần cứng ...................................................................... 8

3.2

Hướng dẫn cài đặt Flutter........................................................................... 8

3.3 Tạo project Flutter mới với Visual Studio Code ............................................. 10
Chương 4 PHÁT TRIỂN ỨNG DỤNG QUẢN LÍ THU CHI CÁ NHÂN VỚI
FLUTTER ................................................................................................................. 12
4.1

Đặt vấn đề ................................................................................................ 12

4.2

Phạm vi ứng dụng .................................................................................... 12

4.3

Mô tả bài tốn........................................................................................... 12

4.4

Các chức năng chính ................................................................................ 13

4.5

Phân tích thiết kế ...................................................................................... 13


4.5.1

Lược đồ phân cấp chức năng............................................................. 13

4.4.2

Sơ đồ use case và đặc tả use case ...................................................... 14

4.4.3

Sơ đồ cơ sở dữ liệu ............................................................................ 16

4.6

Giao diện và mô tả giao diện ứng dụng ................................................... 17

Chương 5 KẾT LUẬN .............................................................................................. 29
5.1

Kết quả thu được ...................................................................................... 29

5.2

Khó khăn gặp phải ................................................................................... 29

5.3

Hướng phát triển trong tương lai ............................................................. 29


3.3 Tạo project Flutter mới với Visual Studio Code
-

Mở Visual Studio.

-

Nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ “new project” và ấn Enter để
tạo project mới.

Hình 2-4 Tạo project Flutter mới trong Visual Studio Code

-

Sau đó chọn thư mục đích nơi chứa project, và nhập tên project như hình
dưới.

Hình 2-5 Nhập tên project Flutter mới
-

Sau khi hồn tất q trình tạo project mới. Chúng ta sẽ thấy Visual Studio
Code có giao diện tương như sau.

10


DANH MỤC BẢNG

Bảng 2-1 So sánh giữa Flutter và React Native ..........................................................7
Bảng 4-1 Mơ tả giao diện màn hình chính ................................................................18
Bảng 4-2 Mơ tả màn hình thêm giao dịch .................................................................20
Bảng 4-3 Mơ tả màn hình xem lịch sử giao dịch dưới dạng biểu đồ ........................22
Bảng 4-4 Mô tả thông báo xố thành cơng giao dịch ...............................................24
Bảng 4-5 Mơ tả giao dịch rút tiền .............................................................................26
Bảng 4-6 Mơ tả màn hình chọn danh mục nạp .........................................................28


Chương 1 MỞ ĐẦU
1.1 Lí do chọn đề tài
Hiện nay, giới trẻ, đặc biệt là các bạn học sinh sinh viên và các bạn vừa ra
trường gặp khó khăn trong việc quản lý chi tiêu. Dẫn đến không kiểm soát được
nguồn tiền vào và ra. Từ đó, gặp khó khăn trong việc sinh hoạt ngày thường và lên

kế hoạch tiết kiệm. Nhận thấy vấn đế này là vấn đề thực tế và thiết yếu, nhóm đã
chọn đây là đề tài nghiên cứu và ứng dụng vào Đồ án 2.

1.2 Phương pháp nghiên cứu
Nhận thấy nhóm đối tượng chủ yếu là các bạn trẻ địi hỏi tính di động cao, cùng
với đó là sự bùng nổ của nền tảng ứng dụng di động. Nhóm chúng em sẽ thực hiện
đề tài này bằng ngôn ngữ Dart, công nghệ ứng dụng là Flutter. Q trình tìm hiểu
nghiệp vụ nhóm chúng em có tham khảo các diễn đàn về quản lý tài chính trên mạng
xã hội. Cùng với đó là tham khảo các ứng dụng có sẵn trên chợ ứng dụng để có cái
nhìn tổng quát về đề tài đã chọn.

1.3 Đối tượng hướng đến
Ứng dụng của nhóm được định hướng đến những người có nhu cầu ghi lại, xem
thống kê lịch sử các giao dịch tiền mặt, nhất là các bạn trẻ sống tại thành thị. Đây là
nhóm người thường xuyên chi tiêu nhiều khoản nhỏ. Do đó họ có khả năng sẽ quên
mất mình đã tiêu tiền vào đâu, vào thời điểm nào, vào mục đích gì. Ứng dụng này
sẽ là trợ thủ đắc lực giúp họ ln có thể kiểm tra lịch sử chi tiêu của mình. Từ đó có
thể kiểm soát được các khoản thu chi, vốn là một kỹ năng quan trọng khi bắt đầu
cuộc sống tự lập.

1


Chương 1 GIỚI THIỆU VỀ FLUTTER
2.1 Giới thiệu ngôn ngữ lập trình Dart

Hình 1-1 Logo Dart
2.1.1 Ngơn ngữ lập trình Dart là gì?
-

Dart là ngơn ngữ lập trình mới, được phát triển bởi Google, hiện đã được
chấp thuận bởi tổ chức Ecma (ECMA-408). Nó được sử dụng để xây dựng
các loại ứng dụng: web, server, di động (IOS và Android).

-

Dart là ngơn ngữ lập trình hướng đối tượng, với cơ chế garbage collector, cú
pháp kiểu C. Nó hỡ trợ những khái niệm lập trình hiện đại như interface,
mixin, abstract, generic, và type-safe. Đây là ngơn ngữ lập trình mã nguồn
mở, được công bố trên Github.

2.1.2 Ưu điểm của Dart
Một số ưu điểm vượt trội của Dart so với các ngôn ngữ lập trình khác:
-

Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp lập
trình viên có thể xác định sớm các lỡi. Bên cạnh đó Dart có hệ sinh thái rộng
lớn lên đến hàng nghìn packages.

-

Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được
dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.

2


-

Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Nếu bạn đã

biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài
ngày.

-

Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỡ trợ để quản lý
các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI,
thông qua phân bổ đối tượng nhanh và garbage collector. Dart hỡ trợ lập
trình khơng đồng bộ thơng qua các tính năng ngơn ngữ và API sử dụng các
đối tượng Future và Stream.

Từ ngơn ngữ lập trình Dart, Google giới thiệu Framework Futter sử
dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng.

2.2 Giới thiệu framework Flutter

Hình 1-2 Logo Flutter
2.2.1 Flutter là gì?
-

Flutter được phát triển nhằm giải quyết bài toán thường gặp trong việc phát
triển ứng dụng là Fast Development (phát triển ứng dụng nhanh) và Native
Performance (hiệu suất tối ưu cho từng nền tảng). Nếu như React Native chỉ
đảm bảo Fast Development cịn Native language chỉ đảm bảo Native
Performance thì Flutter làm được cả 2 điều trên.

-

Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành
Android. Nó được công bố tại hội nghị nhà phát triển Dart 2015, hỗ trợ các

ứng dụng hoạt động ở mức 120 khung hình trên giây.

3


-

Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng
Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản
lớn cuối cùng trước Flutter 1.0.

-

Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện
Flutter Live, là phiên bản "ổn định" đầu tiên framework này.

2.2.2 Kiến trúc của Flutter

Hình 1-3 Kiến trúc Flutter
Flutter được viết chia làm hai tầng:
-

Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên một
ứng dụng Flutter. Các đoạn mã này cung cấp phương tiện để có thể thay đổi
và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có thể được tùy
chỉnh theo mong muốn. Tầng Framework này giúp lập trình viên thay đổi
mã nguồn ứng dụng ở thời điểm compile time.

-

Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn ngữ
C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong quá
trình chạy. Ở tầng này cịn có máy ảo Dart VM. Khái niệm máy ảo là khái
niệm về một ứng dụng chạy song song với mã nguồn chính như một phần
của ứng dụng. Máy ảo Dart VM có ba nhiệm vụ chính bao gồm:

4


+ Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết
bị phần cứng (hoặc phần mềm nằm ngồi ứng dụng).
+ Thơng dịch các đoạn mã Dart theo phương thức JIT (Just in time)
hoặc AOT (Ahead of Time).
+ Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như
cung cấp các runtime system bao gồm garbage collector, và các thư
viện cần có khác.
 Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các
runtime system, hỗ trợ debugging hoặc hot reload cho các ứng dụng
viết bằng Flutter.
2.2.3 Ưu điểm của Flutter so với các framework khác
-

Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web.

-

Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực tiếp
lên ứng dụng đang chạy. Ngoài ra Flutter cịn bổ sung thêm tính năng
stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang
chạy mà không cần phải khởi động lại và giữ trạng thái đang có. Tính năng

này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiết kiệm rất nhiều thời
gian.

-

Ứng dụng được viết bằng Flutter hỗ trợ hiển thị lên đến 60FPS (hoặc
120FPS tuỳ thiết bị). Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải
nghiệm người dùng.

5


-

Một đối thủ khác của Flutter là React Native. Đây là framework được tạo
bởi Facebook. Tương tự như Flutter, React Native cũng cho phép các lập
trình viên sử dụng JavaScript để làm ứng dụng di động đa nền tảng, trên cả
Android và iOS.

So sánh Flutter và React Native
Flutter

React Native

Khả năng tái

Flutter cho phép overwriting

React Native cho phép bạn sử

sử dụng

code. Hỗ trợ tốt cho việc tái

dụng lại code, nhưng điều này lại

sử dụng về sau.

bị giới hạn trong một vài
components cơ bản.

Cấu trúc mã

Khi sử dụng Flutter, các

Sử dụng React Native cần có

nguồn

Developer có thể thực hiện

thêm JSX hoặc XML để tạo giao

mọi thứ trên cùng một màn

diện hay các cơng cụ đặc biệt để

hình, trong đó đặc biệt khơng

tạo layout.

cần phải chuyển từ code sang
chế độ thiết kế hoặc ngược lại,
vì vậy các trải nghiệm trên
Flutter khá tiết kiệm thời gian.
Cài đặt môi

Việc cài đặt Flutter diễn ra

Cài đặt mơi trường phát triển

trường phát

nhanh chóng, tiện lợi với sự

React Native trông khá loằng

triển

hỗ trợ của câu lệnh flutter

ngoằng và khó khăn đối với các

doctor -v giúp chẩn đoán lỗi lập trình viên mới.

trong quá trình cài đặt.
Các thư viện

Có nhiều các third-party

Từ khi React Native trở lên phổ

hỗ trợ

packages đang được sử dụng

biến, đã có rất nhiều các third-

và đang ngày càng được phát

party packages được phát triển và

6


triển, và chúng thực sự rất hữu được sử dụng rất nhiều trong ứng
Độ phổ biến

dụng.

dụng.

Số lượng người sử dụng

React Native có lượng developer

Flutter đang ngày càng gia

sử dụng đang nhiều hơn bởi vì

tăng. Đặc biệt nhờ sự hậu

lượng developer sử dụng

thuẫn tích cực từ phía Google.

JavaScript rất dễ dàng để sử dụng
với các thư viện của React.

Tài liệu tham Cách viết tài liệu của Google
khảo

Việc tìm kiếm tài liệu có lúc khá

đơn giản, dễ hiểu nên việc tài

khó khăn, phụ thuộc vào các

liệu hóa cho Flutter cơ bản là

công cụ dev bên ngoài, yêu cầu

hiệu quả.

người dùng phải kiếm tài liệu cho
từng bộ mặc dù Facebook đã khá
nỗ lực để xây dựng một kho tài
liệu trực quan nhất.

Bảng 1-1 So sánh giữa Flutter và React Native

7


Chương 2 CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER
3.1 Yêu cầu cấu hình phần cứng
-

Hệ điều hành: Windows 7, Windows 8.1, Windows 10

-

Dung lượng ổ cứng: 1GB

-

Công cụ: Visual Studio Code, Android Studio, IntelliJ,…

3.2 Hướng dẫn cài đặt Flutter
-

Tải Flutter tại đường dẫn: rồi giải
nén. Tránh giải nén thư mục flutter vào ổ C:\Program Files\

-

Sau khi giải nén xong bạn nên thiết lập biến mơi trường, vào Control Panel
tìm kiếm từ khóa System và chọn vào mục Edit the system environment
variables.

Hình 2-1 Chỉnh sửa biến môi trường

8


+ Chọn Environment Variables, tại mục System Variables bạn chọn PATH
và nhấn tiếp chọn Edit. Trong cửa sổ Edit System Variable bạn chọn New và
dán đường dẫn tới thư mục Flutter đã giải nén trước đó.
+ Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi chạy
sau đó nhập lệnh flutter doctor -v

Hình 2-2 Chẩn đoán Flutter với flutter doctor
-

Cài đặt extension/plugin hỡ trợ cho IDE. Ví dụ như extension Flutter (sẽ tự
động cài thêm Dart) trên Visual Studio Code.

Hình 2-3 Extension Flutter trên Visual Studio

9


3.3 Tạo project Flutter mới với Visual Studio Code
-

Mở Visual Studio.

-

Nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ “new project” và ấn Enter để

tạo project mới.

Hình 2-4 Tạo project Flutter mới trong Visual Studio Code
-

Sau đó chọn thư mục đích nơi chứa project, và nhập tên project như hình
dưới.

Hình 2-5 Nhập tên project Flutter mới
-

Sau khi hồn tất q trình tạo project mới. Chúng ta sẽ thấy Visual Studio
Code có giao diện tương như sau.

10


Hình 2-6 Giao diện Visual Studio Code sau khi tạo thành công project Flutter

11


Chương 3 PHÁT TRIỂN ỨNG DỤNG QUẢN LÍ THU CHI CÁ NHÂN
VỚI FLUTTER
4.1 Đặt vấn đề
Hiện nay, giới trẻ, đặc biệt là các bạn học sinh sinh viên và các bạn vừa ra
trường gặp khó khăn trong việc quản lý chi tiêu. Dẫn đến không kiểm soát được
nguồn tiền vào và ra. Từ đó, gặp khó khăn trong việc sinh hoạt ngày thường và lên
kế hoạch tiết kiệm. Nhận thấy vấn đế này là vấn đề thực tế và thiết yếu, nhóm đã chọn
đây là đề tài nghiên cứu và ứng dụng vào Đồ án 2.

4.2 Phạm vi ứng dụng
Ứng dụng của nhóm được định hướng đến những người có nhu cầu ghi lại,
xem thống kê lịch sử các giao dịch tiền mặt, nhất là các bạn trẻ sống tại thành thị.
Đây là nhóm người thường xuyên chi tiêu nhiều khoản nhỏ. Do đó họ có khả năng sẽ
quên mất mình đã tiêu tiền vào đâu, vào thời điểm nào, vào mục đích gì. Ứng dụng
này sẽ là trợ thủ đắc lực giúp họ ln có thể kiểm tra lịch sử chi tiêu của mình. Từ đó
có thể kiểm soát được các khoản thu chi, vốn là một kỹ năng quan trọng khi bắt đầu
cuộc sống tự lập.

4.3 Mô tả bài toán
-

Yêu cầu chức năng: Phần mềm cơ bản hiển thị được danh sách các giao dịch
trong một đơn vị thời gian, có thể thêm xố sửa thơng tin giao dịch, thể hiện
được tổng thu và tổng chi, thể hiện được số dư sau khi cập nhật thông tin
giao dịch. Cùng với đó, thể hiện tất cả thông tin đó dưới dạng biểu đồ để có
cái nhìn tổng qt nhất.

-

u cầu phi chức năng: Phần mềm đáp ứng được với kích cỡ màn hình của
các thiết bị di động phổ biển, giao diện trực quan, sinh động, thao tác đơn
giản, tốc độ đáp ứng và phản hồi ở mức khá, tạo cảm giác thân thiện cho
người sử dụng.

12


4.4 Các chức năng chính

-

Chức năng Hiển thị lịch sử giao dịch, thống kê được nguồn tiền ra vào

-

Chức năng Thêm mới giao dịch vào lịch sử.

-

Chức năng Xem chi tiết thông tin giao dịch.

-

Chức năng Sửa thông tin giao dịch.

-

Chức năng Xoá thông tin giao dịch.

-

Chức năng Thống kê thơng tin giao dịch bằng biểu đồ.

4.5 Phân tích thiết kế
4.5.1 Lược đồ phân cấp chức năng

Hình 3-1 Lược đồ phân cấp chức năng

13

4.4.2 Sơ đồ use case và đặc tả use case

Hình 3-2 Use case tổng quát

Hình 3-3 Use case hiển thị lịch sử giao dịch

14


Hình 3-4 Use case thêm giao dịch

Hình 3-5 Use case xem biểu đồ thống kê

15


4.4.3 Sơ đồ cơ sở dữ liệu

Hình 3-6 Sơ đồ cơ sở dữ liệu

16


4.6 Giao diện và mô tả giao diện ứng dụng

Hình 3-7 Màn hình chính

17