Báo cáo đồ án: Tìm hiểu Flutter và xây dựng ứng dụng - Trần Ngọc Tiến

Tải tài liệu đồ án Flutter chi tiết, tìm hiểu và xây dựng ứng dụng quản lý chi tiêu cá nhân. Báo cáo đầy đủ các phần về Dart, Widget, Firebase.

• Tác giả: Trần Ngọc Tiến
• Người hướng dẫn: ThS. Nguyễn Công Hoan
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Tìm hiểu Flutter và xây dựng ứng dụng quản lý chi tiêu cá nhân trên di động
• Loại tài liệu: Đồ án 1
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về Flutter và ứng dụng quản lý chi tiêu

Flutter là một framework cross-platform hiện đại được phát triển bởi Google, cho phép lập trình viên xây dựng ứng dụng quản lý chi tiêu chất lượng cao cho cả Android và iOS chỉ từ một codebase duy nhất. Với sự phát triển nhanh chóng của smartphone và nhu cầu ngày càng tăng về các ứng dụng quản lý tài chính cá nhân, Flutter trở thành giải pháp tối ưu để tiết kiệm thời gian và chi phí phát triển. Ứng dụng quản lý chi tiêu được xây dựng trên nền tảng Flutter cung cấp trải nghiệm người dùng mượt mà, giao diện đẹp mắt và khả năng đồng bộ dữ liệu hiệu quả. Đây là một giải pháp hoàn hảo cho những người muốn kiểm soát và theo dõi chi tiêu hàng ngày một cách khoa học và hiệu quả.

1.1. Giới thiệu về framework Flutter

Flutter là framework open-source được Google công bố năm 2015 và phát hành phiên bản chính thức vào 2018. Nó sử dụng ngôn ngữ Dart để phát triển ứng dụng di động. Flutter nổi bật với khả năng tạo giao diện người dùng đẹp, responsive và hiệu suất cao. Một trong những ưu điểm chính của Flutter là khả năng code once, run everywhere, cho phép developers viết code một lần và chạy trên nhiều nền tảng khác nhau như Android, iOS, Web và Desktop.

1.2. Nhu cầu ứng dụng quản lý chi tiêu trong thời đại số

Trong bối cảnh kinh tế hiện đại, ứng dụng quản lý chi tiêu đã trở thành công cụ không thể thiếu cho mỗi cá nhân. Nhu cầu theo dõi chi tiêu hàng ngày, lập ngân sách và phân tích tài chính cá nhân ngày càng cao. Ứng dụng quản lý chi tiêu xây dựng bằng Flutter giúp người dùng dễ dàng ghi chép, phân loại và thống kê chi tiêu mọi lúc mọi nơi với độ bảo mật cao và giao diện thân thiện.

II. Kiến trúc và công nghệ cốt lõi của ứng dụng

Ứng dụng quản lý chi tiêu được xây dựng trên kiến trúc Flutter vững chắc bao gồm các layer giao diện người dùng (UI), logic xử lý (Business Logic) và lớp dữ liệu (Data Layer). Kiến trúc này đảm bảo ứng dụng có tính mở rộng cao, dễ bảo trì và nâng cấp trong tương lai. Flutter sử dụng kiến trúc widget tree tạo nên giao diện động và tương tác mượt mà. Ngôn ngữ Dart được sử dụng kết hợp với Firebase để lưu trữ dữ liệu đám mây, đảm bảo dữ liệu người dùng được bảo vệ an toàn. Hệ thống quản lý state hiệu quả giúp ứng dụng quản lý chi tiêu xử lý dữ liệu nhanh chóng và chính xác.

2.1. Widget và giao diện người dùng trong Flutter

Widget là thành phần cơ bản nhất trong Flutter, mỗi phần tử hiển thị trên màn hình đều là một widget. Ứng dụng quản lý chi tiêu sử dụng các widget như ListView, Column, Row để xây dựng giao diện trực quan. Flutter cung cấp hai loại widget: Stateless Widget (không có trạng thái) và Stateful Widget (có trạng thái). Các widget này kết hợp tạo nên giao diện đẹp mắt, responsive và tương tác tốt với người dùng trên cả Android và iOS.

2.2. Quản lý dữ liệu và cơ sở dữ liệu

Ứng dụng quản lý chi tiêu sử dụng Firebase Realtime Database hoặc Firestore để lưu trữ dữ liệu người dùng trên đám mây. Ngoài ra, SQLite được sử dụng để lưu trữ dữ liệu cục bộ, đảm bảo ứng dụng hoạt động được ngay cả khi không có kết nối internet. Quản lý state được thực hiện bằng Provider hoặc BLoC pattern giúp quản lý và truyền dữ liệu một cách hiệu quả giữa các màn hình khác nhau.

III. Các tính năng chính của ứng dụng quản lý chi tiêu

Ứng dụng quản lý chi tiêu xây dựng bằng Flutter cung cấp các tính năng toàn diện giúp người dùng kiểm soát tài chính cá nhân hiệu quả. Các tính năng chính bao gồm ghi chép chi tiêu chi tiết, phân loại chi tiêu theo danh mục (ăn uống, mua sắm, giao thông...), lập ngân sách hàng tháng, thống kê chi tiêu qua biểu đồ trực quan, tìm kiếm chi tiêu theo thời gian hoặc danh mục. Ứng dụng hỗ trợ xác thực người dùng an toàn thông qua đăng ký, đăng nhập, quên mật khẩu và đổi mật khẩu. Tính năng đổi ngôn ngữ giúp ứng dụng phục vụ người dùng đa quốc tế. Tất cả dữ liệu được mã hóa và đồng bộ tự động lên đám mây.

3.1. Ghi chép và phân loại chi tiêu

Người dùng có thể dễ dàng ghi chép chi tiêu hàng ngày thông qua giao diện đơn giản và thân thiện. Mỗi khoản chi tiêu được phân loại theo danh mục cụ thể như ăn uống, mua sắm, giao thông, giáo dục. Ứng dụng quản lý chi tiêu cho phép chỉnh sửa, xóa các khoản chi tiêu đã ghi. Tính năng tìm kiếm nhanh giúp người dùng dễ dàng tìm lại các giao dịch cũ. Giao diện hiển thị chi tiêu được sắp xếp theo ngày, tuần hoặc tháng tùy nhu cầu người dùng.

3.2. Phân tích và báo cáo chi tiêu

Ứng dụng cung cấp biểu đồ thống kê chi tiêu trực quan thể hiện chi tiêu theo danh mục và theo thời gian. Người dùng có thể lập ngân sách hàng tháng cho từng danh mục chi tiêu và nhận cảnh báo khi vượt quá ngân sách. Báo cáo chi tiêu chi tiết giúp người dùng hiểu rõ hơn về thói quen tiêu xài của mình. Tính năng so sánh chi tiêu giữa các tháng giúp theo dõi xu hướng chi tiêu và lập kế hoạch tài chính tốt hơn.

IV. Quy trình phát triển và triển khai ứng dụng

Phát triển ứng dụng quản lý chi tiêu bằng Flutter tuân theo quy trình phần mềm chuyên nghiệp gồm các bước: phân tích yêu cầu, thiết kế hệ thống, cài đặt, thử nghiệm và triển khai. Đầu tiên, thực hiện khảo sát và phân tích nhu cầu người dùng để xác định các tính năng cần thiết. Tiếp theo, thiết kế kiến trúc ứng dụng, cơ sở dữ liệu và giao diện người dùng. Giai đoạn cài đặt sử dụng Flutter SDK kết hợp với Android Studio hoặc Visual Studio Code. Thử nghiệm kỹ lưỡng trên cả thiết bị Android và iOS đảm bảo chất lượng. Cuối cùng, triển khai ứng dụng lên Google Play Store và Apple App Store để người dùng có thể tải về.

4.1. Thiết kế giao diện và trải nghiệm người dùng

Thiết kế giao diện ứng dụng quản lý chi tiêu tuân theo nguyên tắc Material Design giúp tạo nên trải nghiệm nhất quán trên các thiết bị khác nhau. Giao diện được thiết kế đơn giản, dễ sử dụng, với các màu sắc hài hòa và typography rõ ràng. Tất cả các nút nhấn, biểu mẫu đều được tối ưu cho cảm ứng. Flutter cung cấp các widget sẵn có giúp xây dựng giao diện nhanh chóng và nhất quán. Quá trình lặp lại (iteration) với người dùng giúp cải thiện giao diện dựa trên phản hồi thực tế.

4.2. Thử nghiệm triển khai và bảo trì ứng dụng

Thử nghiệm ứng dụng quản lý chi tiêu bao gồm thử nghiệm chức năng, hiệu suất, bảo mật và tương thích. Sử dụng Flutter test framework để viết unit test, widget test và integration test. Kiểm tra ứng dụng trên các thiết bị Android và iOS thực tế cũng như các emulator. Sau khi thử nghiệm thành công, ứng dụng được triển khai lên Google Play Store và Apple App Store. Bảo trì định kỳ bao gồm sửa lỗi, cập nhật tính năng mới và tối ưu hiệu suất dựa trên phản hồi người dùng.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN 1. Thông tin sinh viên: MSSV Họ tên Email 20520808 Trần Ngọc Tiến 20520808@gm. Tổng quan đề tài: 2.1 Giới thiệu đề tài: Với sự phát triển nhanh của smartphone như hiện nay với hai hệ điều hành phổ biến nhất là Android và IOS thì nhu cầu phát triển ứng dụng trên smartphone là rất lớn và việc phát triển riêng lẻ ứng dụng trên hai hệ điều hành trên bằng hai ngôn ngữ, hai framework khác nhau sẽ làm tốn rất nhiều chi phí và thời gian. Do đó việc có một framework cross-platform có thể code một lần và chạy trên cả hai hệ điều hành sẽ giúp tiết kiệm thời gian và tiền bạc hơn.

Hiện nay có rất nhiều framework cross-platform hỗ trợ phát triển ứng dụng trên cả hai hệ điều hành một cách nhanh chóng, tiện lợi nhưng vẫn đảm bảo tính bảo mật thông tin khách hàng. Và nổi bật trong những năm gần đây đó là Flutter.2 Phạm vi nghiên cứu: Trong đồ án lần này, em chủ yếu tập trung vào nghiên cứu tổng quan cách thức hoạt động và cách sử dụng các thư viện - package cũng như cách lưu trữ dữ liệu của Flutter. Đồng thời, em áp dụng các nghiên cứu trên vào một ứng dụng thực tế để giúp em có thể hiểu sâu hơn các kiến thức đã tìm hiểu.3 Nội dung nghiên cứu: Em sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động, ưu - khuyết điểm cũng như các thư viện - tính năng - package liên quan đến Flutter.4 Kết quả hướng tới: Với đề tài này, em đề ra hai mục tiêu chính: • Đối với các nhân: mở rộng kiến thức của mình về Flutter thông qua quá trình tìm hiểu và áp dụng vào ứng dụng thực tế. Các kiến thức tìm hiểu được thông qua đồ án thúc đẩy em phát triển thêm các ứng dụng khác bằng Flutter.

Đồng thời, em học được cách nghiên cứu và sử Trang 8 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 dụng một framework mới cần trải qua quá trình gì nhằm giúp em dễ dàng tiếp xúc với các công nghệ mới hơn trong tương lai. • Đối với các lập trình viên dùng đồ án nghiên cứu này làm tài liệu tham khảo: thông qua tài liệu nghiên cứu và ứng dụng em đã xây dựng, các lập trình viên khác có thể dễ dàng định hướng cần phải tìm hiểu gì khi sử dụng Flutter. Đồng thời em có ghi một số khái niệm, kiến thức cơ bản và thư viện phổ biến được đề xuất bởi cộng đồng khi sử dụng Flutter, các lập trình viên khác có thể tham khảo và tìm hiểu sâu hơn. Công cụ sử dụng: Trong quá trình xây dựng phần mềm, em đã sử dụng các phần mềm sau: • Android Studio: Code giao diện ứng dụng + khởi tạo máy ảo • Visual Studio Code: Code giao diện ứng dụng • Chrome: Tìm hiểu thông tin Trang 9 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 CHƯƠNG 2: FLUTTER 1.

Flutter là gì? Flutter là một bộ SDK đa nền tảng có thể hoạt động trên iOS và Android do Google phát triển được sử dụng để tạo ra các ứng dụng dành cho di động (native app). Flutter gồm 2 thành phần quan trọng: • Một SDK (Software Development Kit): Một bộ sưu tập các công cụ sẽ giúp bạn phát triển các ứng dụng của mình. • Một Framework (UI Library based on widgets): Một tập hợp các thành phần giao diện người dùng (UI) có thể tái sử dụng (button, text inputs, slider, v.) giúp bạn có thể cá nhân hóa tùy theo nhu cầu của riêng mình. Nói chung, tạo một ứng dụng di động là một công việc rất phức tạp và đầy thử thách.

Có rất nhiều framework có sẵn, cung cấp các tính năng tuyệt vời để phát triển các ứng dụng di động. Để phát triển các ứng dụng dành cho thiết bị di động, Android cung cấp một framework gốc dựa trên ngôn ngữ Java và Kotlin, trong khi iOS cung cấp một framework dựa trên ngôn ngữ Objective-C/Swift. Vì vậy, chúng ta cần hai ngôn ngữ và framework khác nhau để phát triển ứng dụng cho cả hai hệ điều hành. Ngày nay, để khắc phục sự phức tạp này, có một số framework đã được giới thiệu hỗ trợ cả hệ điều hành cùng với các ứng dụng dành cho máy tính để bàn.

Những loại framework này được gọi là công cụ phát triển đa nền tảng. Framework phát triển đa nền tảng có khả năng viết một code và có thể triển khai trên nhiều nền tảng khác nhau (Android, iOS và Máy tính để bàn). Nó tiết kiệm rất nhiều thời gian và nỗ lực phát triển của các nhà phát triển. Có một số công cụ có sẵn để phát triển đa nền tảng, bao gồm các công cụ dựa trên web.

Mỗi framework này có mức độ thành công khác nhau trong ngành công nghiệp di động. Gần đây, một framework công tác mới đã được giới thiệu trong họ phát triển đa nền tảng có tên là Flutter được phát triển từ Google. Flutter là một bộ công cụ giao diện người dùng để tạo các ứng dụng nhanh, đẹp, được biên dịch nguyên bản cho thiết bị di động, web và máy tính để bàn với một ngôn ngữ lập trình và cơ sở code duy nhất. Nó là miễn phí và code nguồn mở.

Trang 10 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 Ban đầu nó được phát triển từ Google và bây giờ được quản lý theo tiêu chuẩn ECMA. Ứng dụng Flutter sử dụng ngôn ngữ lập trình Dart để tạo ứng dụng. Flutter chủ yếu được tối ưu hóa cho các ứng dụng di động 2D có thể chạy trên cả nền tảng Android và iOS. Chúng ta cũng có thể sử dụng nó để xây dựng các ứng dụng đầy đủ tính năng, bao gồm máy ảnh, bộ nhớ, vị trí địa lý, mạng, SDK của bên thứ ba, v.

Điều gì làm Flutter trở nên độc đáo Flutter khác với các framework khác vì nó không sử dụng WebView cũng như các widget OEM (Original Equipment Manufacturer) đi kèm với thiết bị. Thay vào đó, nó sử dụng công cụ kết xuất hiệu suất cao của riêng mình để vẽ các widget. Nó cũng triển khai hầu hết các hệ thống của nó như hoạt ảnh, cử chỉ và widget bằng ngôn ngữ lập trình Dart cho phép các nhà phát triển đọc, thay đổi, thay thế hoặc loại bỏ mọi thứ một cách dễ dàng. Nó cung cấp khả năng kiểm soát tuyệt vời cho các nhà phát triển đối với hệ thống.

Các tính năng của Flutter Flutter cung cấp các phương pháp dễ dàng và đơn giản để bắt đầu xây dựng các ứng dụng dành cho thiết bị di động và máy tính để bàn đẹp mắt với một bộ thiết kế material design và widget phong phú. Ở đây, chúng ta sẽ thảo luận về các tính năng chính của nó để phát triển framework di động. Trang 11 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 Hình 1.1: Các tính năng của Flutter Code nguồn mở (Open-Source:): Flutter là một framework code nguồn mở và miễn phí để phát triển các ứng dụng di động. Đa nền tảng (Cross-platform): Tính năng này cho phép Flutter viết code một lần, duy trì và có thể chạy trên các nền tảng khác nhau.

Nó tiết kiệm thời gian, công sức và tiền bạc của các nhà phát triển. Tải lại nóng (Hot Reload): Bất cứ khi nào nhà phát triển thực hiện thay đổi trong code, thì những thay đổi này có thể được nhìn thấy ngay lập tức với Tải lại nóng. Nó có nghĩa là những thay đổi hiển thị ngay lập tức trong chính ứng dụng. Đây là một tính năng rất tiện dụng, cho phép nhà phát triển sửa các lỗi ngay lập tức.

Các tính năng và SDK gốc có thể truy cập (Accessible Native Features and SDKs): Tính năng này cho phép quá trình phát triển ứng dụng dễ dàng và thú vị thông qua code gốc của Flutter, tích hợp bên thứ ba và các API nền tảng. Do đó, chúng tôi có thể dễ dàng truy cập SDK trên cả hai nền tảng. Code tối thiểu (Minimal code): Ứng dụng Flutter được phát triển bởi ngôn ngữ lập trình Dart, sử dụng biên dịch JIT và AOT để cải thiện thời gian khởi động tổng Trang 12 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 thể, hoạt động và tăng tốc hiệu suất. JIT nâng cao hệ thống phát triển và làm mới giao diện người dùng mà không cần nỗ lực thêm vào việc xây dựng hệ thống mới.

Widget: framework công tác Flutter cung cấp các widget có khả năng phát triển các thiết kế cụ thể có thể tùy chỉnh. Quan trọng nhất, Flutter có hai bộ widget: Material Design và các widget Cupertino giúp mang lại trải nghiệm không có trục trặc trên tất cả các nền tảng. Kiến trúc của Flutter 4. Kiến trúc Flutter Trong phần này, chúng ta sẽ thảo luận về kiến trúc của Flutter framework.

Kiến trúc Flutter chủ yếu bao gồm bốn thành phần. Flutter Engine Nó là một cổng để giúp chạy các ứng dụng di động chất lượng cao và cơ bản dựa trên ngôn ngữ C ++. Nó triển khai các thư viện lõi Flutter bao gồm animation và đồ họa, tệp và mạng I / O, kiến trúc plugin, hỗ trợ trợ năng và thời gian chạy dart để phát triển, biên dịch và chạy các ứng dụng Flutter. Phải sử dụng thư viện đồ họa mã nguồn mở của Google, Skia, để hiển thị đồ họa cấp thấp.

Thư viện nền tảng (Foudation Library) Nó chứa tất cả các gói cần thiết cho các khối build cơ bản để viết một ứng dụng Flutter. Các thư viện này được viết bằng ngôn ngữ Dart. Widget Trong Flutter, mọi thứ đều là một widget, đó là khái niệm cốt lõi của framework. Widget trong Flutter về cơ bản là một thành phần giao diện người dùng ảnh hưởng và kiểm soát chế độ xem và giao diện của ứng dụng.

Nó đại diện cho một mô tả bất biến về một phần của giao diện người dùng và bao gồm đồ họa, văn bản, hình dạng và animation được tạo bằng các widget. Các widget tương tự như các thành phần React. Trang 13 ĐỒ ÁN 1 Trần Ngọc Tiến - 20520808 Trong Flutter, ứng dụng tự nó là một widget chứa nhiều widget con. Điều đó có nghĩa rằng ứng dụng là tiện ích con cấp cao nhất và giao diện người dùng của nó được xây dựng bằng cách sử dụng một hoặc nhiều tiện ích con, bao gồm các tiện ích con phụ.

Tính năng này giúp bạn tạo một giao diện người dùng phức tạp rất dễ dàng.2: Kiến trúc Flutter Trong ví dụ trên, chúng ta có thể thấy rằng tất cả các thành phần đều là các widget có chứa các widget con. Do đó, ứng dụng Flutter tự nó là một widget. Thiết kế các Widget cụ thể Framework Flutter có hai bộ widget phù hợp với các ngôn ngữ thiết kế cụ thể. Đây là Material Design cho ứng dụng Android và Cupertino Style cho ứng dụng IOS.

Giới thiệu về ngôn ngữ lập trình Dart 5.