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

GIỚI THIỆU VỀ FLUTTER

Giới thiệu ngôn ngữ lập trình 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 do Google phát triển và đã được tổ chức Ecma công nhận (ECMA-408) Ngôn ngữ này được sử dụng để xây dựng nhiều loại ứng dụng, bao gồm web, server và di động trên cả hai nền tảng iOS và Android.

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

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:

Dart sở hữu cú pháp rõ ràng, dễ hiểu và súc tích, giúp nâng cao năng suất lập trình Với tính năng type-safe, ngôn ngữ này cho phép lập trình viên phát hiện lỗi sớm Hệ sinh thái của Dart cũng rất phong phú, cung cấp hàng nghìn gói (packages) hỗ trợ phát triển ứng dụng.

Dart tối ưu hóa quá trình biên dịch trước thời hạn, giúp nâng cao hiệu suất và rút ngắn thời gian khởi động cho các thiết bị di động và web.

Dart có cú pháp tương tự như C/C++, giúp người dùng dễ dàng làm quen và học hỏi Nếu bạn đã có kinh nghiệm với C++, C# hoặc Java, bạn sẽ có thể làm việc hiệu quả với Dart chỉ sau vài ngày.

Dart là ngôn ngữ lập trình lý tưởng cho lập trình Reactive, nhờ vào khả năng quản lý các đối tượng tạm thời như widget UI thông qua việc phân bổ đối tượng nhanh và garbage collector hiệu quả Ngôn ngữ này hỗ trợ lập trình không đồng bộ với các tính năng như Future và Stream, giúp tối ưu hóa quy trình xử lý.

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 chạy đa nền tảng.

Giới thiệu framework Flutter

Flutter được thiết kế để giải quyết hai vấn đề quan trọng trong phát triển ứng dụng: phát triển nhanh chóng và hiệu suất tối ưu cho từng nền tảng Trong khi React Native chỉ tập trung vào việc phát triển nhanh, thì ngôn ngữ gốc đảm bảo hiệu suất tốt nhất cho ứng dụng.

Performance thì Flutter làm được cả 2 điều trên

Phiên bản đầu tiên của Flutter, mang tên "Sky", đã được giới thiệu tại hội nghị nhà phát triển Dart năm 2015 và hoạt động trên hệ điều hành Android, cho phép các ứng dụng chạy với tốc độ lên tới 120 khung hình trên giây.

Tại hội nghị Google Developer Days diễn ra ở Thượng Hải, Google đã công bố phiên bản Flutter Release Preview 2, đánh dấu phiên bản lớn cuối cùng trước khi phát hành Flutter 1.0.

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

Hì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 ứng dụng Flutter, cho phép lập trình viên tùy chỉnh và chỉnh sửa theo ý muốn Tầng Framework này hỗ trợ thay đổi mã nguồn ứng dụng ngay tại thời điểm biên dịch, giúp tối ưu hóa và cá nhân hóa trải nghiệm lập trình.

- Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn ngữ

Tầng Shell của C++ bao gồm các công cụ hỗ trợ ứng dụng Flutter trong quá trình chạy, cùng với máy ảo Dart VM Máy ảo này hoạt động song song với mã nguồn chính của ứng dụng, đóng vai trò quan trọng trong việc thực thi mã Dart VM có ba nhiệm vụ chính, góp phần nâng cao hiệu suất và tính linh hoạt của ứng dụng.

+ 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 các đoạ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, đồng thời cung cấp hệ thống runtime bao gồm garbage collector và các thư viện cần thiết 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

Flutter hỗ trợ tính năng hot reload, cho phép các sửa đổi trong mã nguồn được cập nhật trực tiếp lên ứng dụng đang chạy Đặc biệt, tính năng stateful hot reload giúp cập nhật ngay lập tức các thay đổi mà không cần khởi động lại ứng dụng, đồng thời giữ nguyên trạng thái hiện tại Điều này giúp các nhà phát triển tiết kiệm thời gian đáng kể trong quá trình phát triển ứng dụng.

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

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

So sánh Flutter và React Native

Khả năng tái sử dụng

Flutter cho phép overwriting code Hỗ trợ tốt cho việc tái sử dụng về sau

React Native cho phép bạn sử dụng lại code, nhưng điều này lại bị giới hạn trong một vài components cơ bản

Khi sử dụng Flutter, các nhà phát triển có thể thực hiện mọi thao tác trên cùng một màn hình mà không cần chuyển đổi giữa mã code và chế độ thiết kế, giúp tiết kiệm thời gian và nâng cao trải nghiệm làm việc.

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

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

Việc cài đặt Flutter diễn ra nhanh chóng, tiện lợi với sự hỗ trợ của câu lệnh flutter doctor -v giúp chẩn đoán lỗi trong quá trình cài đặt

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

Các thư viện hỗ trợ

Có nhiều các third-party packages đang được sử dụng và đang ngày càng được phát

Từ khi React Native trở lên phổ biến, đã có rất nhiều các third- party packages được phát triển và

7 triển, và chúng thực sự rất hữu dụng được sử dụng rất nhiều trong ứng dụng Độ phổ biến Số lượng người sử dụng

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

React Native có lượng developer sử dụng đang nhiều hơn bởi vì lượng developer sử dụng JavaScript rất dễ dàng để sử dụng với các thư viện của React

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

Tìm kiếm tài liệu trên Facebook đôi khi gặp khó khăn, vì người dùng phải sử dụng các công cụ phát triển bên ngoài và tìm tài liệu cho từng bộ riêng lẻ, mặc dù Facebook đã nỗ lực xây dựng một kho tài liệu trực quan.

Bảng 1-1 So sánh giữa Flutter và React Native

CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER

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

- Hệ điều hành: Windows 7, Windows 8.1, Windows 10

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

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

- Tải Flutter tạ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 bạ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

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

Để cấu hình biến môi trường, bạn cần chọn mục Environment Variables, sau đó trong phần System Variables, tìm và chọn PATH rồi nhấn Edit Tiếp theo, trong cửa sổ Edit System Variable, bạn chọn New và dán đường dẫn tới thư mục Flutter mà bạn đã giải nén trước đó.

+ Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi chạy sau đó nhập lệnh flutter doctor -v

Hì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

Hình 2-3 Extension Flutter trên Visual Studio

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

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

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

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

Hình 2-5 Nhập tên project Flutter mới

- Sau khi hoàn tất quá trình tạo project mới Chúng ta sẽ thấy Visual Studio

Code có giao diện tương như sau

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

PHÁT TRIỂN ỨNG DỤNG QUẢN LÍ THU CHI CÁ NHÂN VỚI

Đặt vấn đề

Hiện nay, nhiều bạn trẻ, đặc biệt là học sinh, sinh viên và những người mới ra trường, đang gặp khó khăn trong việc quản lý chi tiêu Điều này dẫn đến việc không kiểm soát được nguồn tiền vào và ra, gây khó khăn trong sinh hoạt hàng ngày và lập kế hoạch tiết kiệm Nhận thấy đây là một vấn đề thực tế và cần thiết, nhóm đã quyết định chọn chủ đề này để 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 nhóm được định hướng đến những người có nhu cầu ghi lại, xem thống kê lịch sử các giao dịch tiền mặt, nhất là các bạn trẻ sống tại thành thị Đây là nhóm người thường xuyên chi tiêu nhiều khoản nhỏ Do đó 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ọ luôn có thể kiểm tra lịch sử chi tiêu của mình Từ đó có thể kiểm soá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

Phần mềm cần có chức năng hiển thị danh sách giao dịch trong một khoảng thời gian nhất định, cho phép người dùng thêm, xóa và sửa thông tin giao dịch Nó cũng phải tính toán và thể hiện tổng thu, tổng chi, cũng như số dư sau khi cập nhật thông tin giao dịch Ngoài ra, tất cả thông tin này cần được trình bày dưới dạng biểu đồ để người dùng có cái nhìn tổng quát nhất.

Yêu cầu phi chức năng của phần mềm bao gồm khả năng tương thích 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 và sinh động, thao tác đơn giản, cùng với tốc độ đáp ứng và phản hồi ở mức khá, nhằm tạo cảm giác thân thiện cho người sử dụng.

- 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 Xoá 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.1 Lược đồ phân cấp chức năng

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

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

Hình 3-2 Use case tổng quát

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

Hình 3-4 Use case thêm giao dịch

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

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

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

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

Hình 3-7 Màn hình chính

Tên Mô tả Chi tiết Thao tác người dùng

Màn hình bắt đầu khi mở ứng dụng, chứa các thông tin như tổng thu nhập, tổng chi tiêu và danh sách các giao dịch

• Thống kê tổng thu dùng để hiển thị tổng số tiền thu vào

• Thống kê tổng chi dùng để hiển thị tổng số tiền thu ra

• Hiệu của phần tổng thu chi là số tiền còn lại

• Danh sách các giao dịch được liệt kê theo ngày, trong 1 ngày có thể liệt kê từng loại giao dịch

• Người dùng có thể xem các thống kê trên màn hình này

• Người dùng có thể chọn vào từng giao dịch để xem thông tin chi tiết

• Người dùng có thể chọn các chức năng khác như Thêm mới giao dịch bằng cách chọn icon

“+” hoặc xem thống kê theo dạng biểu đồ

Bảng 3-1 Mô tả giao diện màn hình chính

Hình 3-8 Màn hình Thêm mới thông tin giao dịch

Màn hình thao tác cho chức năng Thêm mới giao dịch

• Có các trường dữ liệu về thông tin giao dịch người dùng có thể nhập vào như:”Số tiền, danh mục, ghi chú, ngày diễn ra giao dịch”

• Nút “Lưu” để xác nhận thêm giao dịch vào hệ thống

• Người dùng nhập vào thông tin giao dịch

• Người dùng kiểm tra thông tin và bấm vào nút “Lưu” để xác nhận lưu giao dịch vào hệ thống

• Người dùng có thể huỷ bỏ thao tác bằng cách bấm vào quay lại trên góc trái màn hình

Bảng 3-2 Mô tả màn hình thêm giao dịch

Hình 3-9 Màn hình Thống kê lịch sử dưới dạng biểu đồ

Thống kê giao dịch nạp rút dưới dạng biểu đồ

Màn hình thao tác cho chức năng Thống kê giao dịch nạp rút dưới dạng biểu đồ

• Một biểu đồ tròn thể hiện cho giao dịch nạp Trong đó các giao dịch khác nhau được thể hiện bằng các màu khác nhau và được ghi chú

• Một biểu đồ tròn thể hiện cho giao dịch rút Trong đó các giao dịch khác nhau được thể hiện bằng các màu khác nhau và được ghi chú

Người dùng có thể lựa chọn xem biểu đồ theo hai cách: theo tỷ lệ hoặc theo số tiền, bằng cách chuyển đổi trạng thái của thanh gạt màu xanh ở góc phải của mỗi loại biểu đồ.

Bảng 3-3 Mô tả màn hình xem lịch sử giao dịch dưới dạng biểu đồ

Hình 3-10 Màn hình Xác nhận xoá thành công thông tin giao dịch

Xoá thông tin giao dịch thành công

Màn hìnhThông báo cho chức năng Xoá thông tin giao dịch đã thực hiện thành công

• Màn hình chính với thông báo rằng Thông tin giao dịch đã được xoá thành công

• Người dùng xem thông báo và xác nhận thông tin giao dịch đã được xoá thành công

Bảng 3-4 Mô tả thông báo xoá thành công giao dịch

Hình 3-11 Màn hình chọn danh mục rút

Danh sách các danh mục rút

Màn hình chọn danh mục rút

• Các danh mục chính và danh mục con với Icon và Tiêu đề để thể hiện cho các danh mục rút

• Người dùng chọn danh mục phù hợp với thông tin giao dịch của mình

Bảng 3-5 Mô tả giao dịch rút tiền

Hình 3-12 Màn hình chọn danh mục nạp

Danh sách các danh mục nạp

Màn hình chọn danh mục nạp

• Các danh mục chính và danh mục con với Icon và Tiêu đề để thể hiện cho các danh mục nạp

Bảng 3-6 Mô tả màn hình chọn danh mục nạp

Chương 4 KẾT LUẬN 5.1 Kết quả thu được

- Căn bản vận dụng Dart và Flutter vào việc phát triển ứng dụng di động

- Sử dụng được SQLite làm cơ sở dữ liệu

- Nắm được nhu cầu của đối tượng khách hàng chủ yếu là người trẻ đối với ứng dụng quản lý thu chi

- Gặp khó khăn trong việc kết nối SQLite với ứng dụng Flutter

- Khó khăn trong việc chuyển đổi các bảng trong CSDL thành các kiểu dữ liệu tương ứng trong Dart

- Bố cục code khó theo dõi, khó khăn trong việc quản lý code, bảo trì và phát triển

- Yêu cầu cấu hình cao để phát triển ứng dụng, chiếm nhiều tài nguyên khi Debug

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

- Hoàn thiện hơn về mặt giao diện, cải thiện tốc độ phản hồi, cung cấp trải nghiệm chạm vuốt mượt mà

- Sắp xếp bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản và trực quan hơn

- Tổ chức quản lý Cơ sở dữ liệu hợp lý và khoa học hơn

- Thêm tính năng Tạo kế hoạch tiết kiệm cho tương lai

- Vận dụng các công nghệ mới để mang lại nhiều chức năng thiết thực và hữu ích hơn

Trong quá trình phát triển ứng dụng, nhóm đã sử dụng Github để lưu trữ cũng như quản lí mã nguồn

- Github: https://github.com/hieuvts/money_manager

Mô tả bài toán

Phần mềm cơ bản yêu cầu hiển thị danh sách giao dịch trong một khoảng thời gian nhất định, cho phép người dùng thêm, xóa và sửa thông tin giao dịch Nó cần thể hiện tổng thu, tổng chi và số dư sau khi cập nhật thông tin giao dịch Bên cạnh đó, tất cả thông tin này nên được trình bày dưới dạng biểu đồ để người dùng có cái nhìn tổng quát nhất về tình hình tài chính.

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

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