TÌM HIỂU FLUTTER và xây DỰNG ỨNG DỤNG QUẢN lý CHI TIÊU

Phương pháp nghiên cứu & phát triển Nhóm chúng em sẽ thực hiện đè tài này bằng ngôn ngữ Dart với côngnghệ ứng dụng là Flutter.. Cùng với đó là các ứng dụng có sẵn và phát triển thành c

ĐẠ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

ĐỀ TÀI: “TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG

QUẢN LÝ CHI TIÊU”

Giảng viên hướng dẫn: Thái Thụy Hàn Uyển

Sinh viên thực hiện:

1 Tạ Quang Tiến 17521129

2 Ngô Hà Thế Vĩ 17521255

Tp Hồ Chí Minh, tháng 01 năm 2021

LỜI CẢM ƠN

Nhóm em xin chân thành cảm ơn sự hướng dẫn tận tình của cô Thái ThụyHàn Uyển - giảng viên hướng dẫn môn Đồ án 2 đã hỗ trợ cho nhóm trongquá trình nghiên cứu để nhóm hoàn thành đề tài này

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ỏinhững thiéu sót trong quá trình thực hiện đồ án Vì vậy nhóm chúng emluôn mong đợi nhận được những ý kién đóng góp quý báu từ phía giảngviên để qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện bản thânmình trên tinh thần nghiêm túc, tự giác học hỏi Một lần nữa nhóm chúng

em xin chân thành cảm ơn

Nhóm nghiên cứu

NHẬN XÉT CỦA GIÁO VIÊN

.

MỤC LỤC

1 MỞ ĐẦU 6

1.1 Lí do chọn đề tài 6

1.2 Phương pháp nghiên cứu & phát triển 6

1.3 Đối tượng hướng đến 8

2 GIỚI THIỆU VỀ FLUTTER 9

3.1 Giới thiệu ngôn ngữ lập trình Dart 9

3.1.1 Ngôn ngữ lập trình Dart là gì? 9

3.1.2 Ưu điểm của Dart 10

3.2 Giới thiệu về framework Flutter 11

3.2.1 Flutter là gì? 11

3.2.2 Kiến trúc của Flutter 12

3.2.3 Ưu điểm của Flutter so với các framework khác13 3 CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER 15

3.1 Yêu cầu cấu hình phần cứng 15

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

3.3 Tạo project Flutter đầu tiên với Visual Studio Code 18

4 PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ CHI TIÊU CÁ NHÂN VỚI FLUTTER 20

4.1 Đặt vấn đề 20

4.2 Phạm vi ứng dụng 20

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

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

4.5 Phân tích thiết kế 22

4.5.1 Lược đồ phân cấp chức năng 22

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

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

4.6 Giao diện ứng dụng 24

5 KẾT LUẬN 34

5.1 Kết quả thu được 34

5.2 Khó khăn 35

5.3 Phương hướng phát triển 35

TÀI LIỆU THAM KHẢO 36

1 MỞ ĐẦU

1.1 Lí do chọn đề tài

Quản lý, kiểm soát thu nhập cũng như hạn mức chi tiêu cá nhân vẫn luôn

là một vấn đề nhức nhối đối với hầu hết mọi người Việc không lưu trữ, thống

kê các khoản thu chi làm chúng ta mất đi cái nhìn tổng thể cũng như khả năngphân tích đánh giá mức tiêu dùng cá nhân và phần nào đó, trực tiếp dẫn đếnnhiều vấn đề phát sinh liên quan đến tài chính

Sau thời gian tìm hiểu và cân nhắc, nhóm thấy đây là vấn đề mang tínhthực tế, vô cùng thiết yếu nên nhóm đã quyết định lựa chọn đề tài này đểnghiên cứu và phát triển cho môn học

1.2 Phương pháp nghiên cứu & phát triển

Nhóm chúng em sẽ thực hiện đè tài này bằng ngôn ngữ Dart với côngnghệ ứng dụng là Flutter

Trong quá trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo cácdiễn đàn vè quản lý tài chính trên mạng xã hội Cùng với đó là các ứng dụng

có sẵn và phát triển thành công trên chợ ứng dụng để có cái nhìn tổng quát vèđè tài đã chọn

• Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hiện hành.Nhóm đã thực hiện bài bản từng bước sau trong quá trình phát triển ứng dụng:

Bước 1: Nhóm tiến hành thu thập thông tin yêu cầu người dùng.

Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mô hình hoá yêu cầu

của người dùng

Bước 3: Nhóm tiến hành nghiên cứu các ứng dụng sẵn có (với chức

năng gần giống) trên thị trường để bắt kịp xu hướng

Bước 4: Nhóm thực hiện chỉnh sửa lại mô hình hoá yêu cầu người dùng

theo những gì đã thu thập được

Bước 5: Nhóm thực hiện thiết kế CSDL.

Bước 6: Nhóm tiến hành nghiên cứu các công nghệ sẵn có để lựa chọn

một môi trường phù hợp phát triển ứng dụng của mình Nhóm đã chọn Flutter(Cross platform) để phát triển ứng dụng vì phát huy tối đa được tốc độ thựcthi, đồng thời hỗ trợ các tính năng cấp phục vụ cho yêu cầu của người dùng

Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng Bước 8: Nhóm tiến hành công đoạn cài đặt cho ứng dụng.

Bước 9: Nhóm tiến hành công việc bảo trì (sửa chữa lỗi và phát triển

thêm những tính năng chưa được đề ra ban đầu)

Bước 10: Nhóm hoàn thành đồ án.

• Mô hình sử dụng để xây dựng đề tài: MVC

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

Nhóm đối tượng chủ yéu của ứng dụng 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

Cụ thể, ứng dụng của nhóm 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ẻ, học sinh, sinhviên sống tại thành thị Đây là nhóm người chi tiêu thường xuyên với cáckhoản phí lặt vặt phát sinh trong đời sống hàng ngày Do đó họ thường hayquên mất mình sử dụng tiền vào đâu, thời điểm nào và vì mục đích gì

Chính vì vậy, ứng dụng này sẽ là trợ thủ đắc lực giúp họ luôn có thể kiểmtra lịch sử chi tiêu của mình Từ đó có thể kiểm soát, nắm rõ những các khoảnthu chi của mình để nhận định mình đã sử dụng tiền hợp lý hay chưa và tiếnhành lên kế hoạch chi tiêu cho bản thân - vốn là một kỹ năng quan trọng khibắt đầu cuộc sống tự lập

2 GIỚI THIỆU VỀ FLUTTER

Hinh 1-1 Logo Dart

2.1 Giới thiệu ngôn ngữ lập trình Dart

2.1.1 Ngôn ngữ lập trinh Dart là gi?

- 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âydự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é garbagecollector, 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áirộ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

- 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àingà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ậptrình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đốitượ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 về framework Flutter

Hinh 1-2 Logo Flutter 2.2.1 Flutter là gi?

- Flutter được phát triển nhằm giải quyét bài toán thường gặp trong việcphá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ư ReactNative chỉ đảm bảo Fast Development còn Native language chỉ đảm bảo NativePerformance 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èuhà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

- Trong bài phát biểu chính ở hội nghị Google Developer Days tạiThượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiênbả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

Hinh 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ênmộ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ể đượctù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ônngữ 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ệmvè một ứng dụng chạy song song với mã nguồn chính như một phần của ứngdụng Máy ảo Dart VM có ba nhiệm vụ chính bao gồm:

+ 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 ngoài ứng dụng).

+ Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time) hoặcAOT (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ácruntime system, hõ trợ debugging hoặc hot reload cho các ứng dụng viét bằngFlutter

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ựctiép lên ứng dụng đang chạy Ngoài ra Flutter còn bổ sung thêm tính năngstateful 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 đặcbiệ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ặc120FPS tuỳ thiét bị) Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trảinghiệm người dùng

- Một đối thủ khác của Flutter là React Native Đây là framework đượctạo bởi Facebook Tương tự như Flutter, React Native cũng cho phép các lậptrì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

sử dụng Flutter cho phép Overwritingcode Hõ trợ tốt cho việc tái

sử dụng vè sau

React Native cho phép bạn

sử dụng lại code, nhưng đièunày lại bị giới hạn trong mộtvài components cơ bản

Cấu trúc mã

nguồn

Khi sử dụng Flutter, cácDeveloper có thể thực hiệnmọi thứ trên cùng một mànhình, trong đó đặc biệt khôngcần phải chuyển từ code sangché độ thiét ké hoặc ngượclại,

vì vậy các trải nghiệm trênFlutter khá tiét kiệm thờigian

Sử dụng React Native cần cóthêm JSX hoặc XML để tạogiao diện hay các công cụđặc biệt để tạo layout

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

doctor -v giúp chẩn đoán lõi

trong quá trình cài đặt

Cài đặt môi trường pháttriển React Native trông kháloằng ngoằng và khó khănđối với các lập trình viênmới

Các thư viện

hõ trợ Có nhièu các third-partypackages đang được sử dụng

và đang ngày càng được pháttriển, và chúng thực sự rất

Từ khi React Native trở lênphổ bién, đã có rất nhièucác thirdparty packagesđược phát triển và được sử

Độ phổ bién Số lượng người sử dụng

Flutter đang ngày càng giatăng Đặc biệt nhờ sự hậuthuẫn tích cực từ phía Google

React Native có lượngdeveloper sử dụng đangnhièu hơn bởi vì lượngdeveloper sử dụngJavaScript rất dễ dàng để sửdụng với các thư viện củaReact

Tài liệu tham

khảo

Cách viét tài liệu của Googleđơn giản, dễ hiểu nên việc tàiliệu hóa cho Flutter cơ bản làhiệu quả

Việc tìm kiém tài liệu có lúckhá khó khăn, phụ thuộcvào các công cụ dev bênngoài, yêu cầu người dùngphả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 khotài liệu trực quan nhất

Bang 1-1 So sánh giữa Flutter và React Native

3 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: https://flutter.dev/docs/get-started/install

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 ControlPanel tìm kiém từ khóa System và chọn vào mục Edit the system environmentvariables

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

+ Chọn Environment Variables, tại mục System Variables bạn chọnPATH và nhấn tiép chọn Edit Trong cửa sổ Edit System Variable bạn chọnNew 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

Hinh 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

Hinh 2-3 Extension Flutter trên Visual Studio

3.3 Tạo project Flutter đầu tiên với Visual Studio Code

- Mở Visual Studio Code

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

để tạo project mới

Hinh 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

Hinh 2-5 Nhập tên project Flutter mới

- Sau khi hoàn tất quá trình tạo project mới Chúng ta sẽ thấy VisualStudio Code có giao diện tương như sau.

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

Flutter

4 PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ CHI TIÊU CÁ NHÂN VỚI FLUTTER

4.1 Đặt vấn đề

Quản lý, kiểm soát thu nhập cũng như hạn mức chi tiêu cá nhân vẫn luôn

là một vấn đề nhức nhối đối với hầu hết mọi người Việc không lưu trữ, thống

kê các khoản thu chi làm chúng ta mất đi cái nhìn tổng thể cũng như khả năngphân tích đánh giá mức tiêu dùng cá nhân và phần nào đó, trực tiếp dẫn đếnnhiều vấn đề phát sinh liên quan đến tài chính

Sau thời gian tìm hiểu và cân nhắc, nhóm thấy đây là vấn đề mang tínhthực tế, vô cùng thiết yếu nên nhóm đã quyết định lựa chọn đề tài này đểnghiên cứu và phát triển cho môn học

4.2 Phạm vi ứng dụng

Nhóm đối tượng ứng dụng hướng đến 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

Cụ thể, ứng dụng của nhóm 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ẻ, học sinh, sinhviên sống tại thành thị Đây là nhóm người chi tiêu thường xuyên với cáckhoản phí lặt vặt phát sinh trong đời sống hàng ngày Do đó họ thường hayquên mất mình sử dụng tiền vào đâu, thời điểm nào và vì mục đích gì

Chính vì vậy, ứng dụng này sẽ là trợ thủ đắc lực giúp họ luôn có thể kiểmtra lịch sử chi tiêu của mình Từ đó có thể kiểm soát, nắm rõ những các khoảnthu chi của mình để nhận định mình đã sử dụng tiền hợp lý hay chưa và tiếnhành lên kế hoạch chi tiêu cho bản thân - vốn là một kỹ năng quan trọng khibắ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 giaodịch trong một đơn vị thời gian, có thể thêm xoá 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 tingiao dịch Cùng với đó, thể hiện tất cả thông tin đó dưới dạng biểu đồ để có cáinhìn tổng quát nhất

- Yêu cầu phi chức năng: Phần mèm đáp ứng được với kích cỡ màn hìnhcủa các thiét bị di động phổ biển, giao diện trực quan, sinh động, thao tác đơngiả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

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 các khoản thu chi

- 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 đồ

- Chức năng đặt lịch nhắc nhở thêm mới giao dịch