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

ĐẠ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 ĐỀ 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: Tạ Quang Tiến 17521129 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 hướng dẫn tận tình cô Thái Thụy Hàn Uyển - giảng viên hướng dẫn mơn Đồ án hỗ trợ cho nhóm q trình nghiên cứu để nhóm hồn thành đề tài Vì kién thức chúng em cịn hạn hẹp nên khơng thể tránh khỏi thiéu sót quá trình thực đồ án Vì nhóm chúng em mong đợi nhận ý kién đóng góp quý báu từ phía giảng viên để qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện thân tinh thần nghiêm túc, tự giác học hỏi Một lần 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 MỞ ĐẦU 1.1 Lí chọn đề tài 1.2 Phương pháp nghiên cứu & phát triển 1.3 Đối tượng hướng đến GIỚI THIỆU VỀ FLUTTER 3.1 Giới thiệu ngơn ngữ lập trình Dart 3.1.1 Ngơn ngữ lập trình Dart gì? 3.1.2 Ưu điểm Dart 10 3.2 Giới thiệu framework Flutter 11 3.2.1 Flutter gì? 11 3.2.2 Kiến trúc Flutter 12 3.2.3 Ưu điểm Flutter so với framework khác13 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 với Visual Studio Code 18 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ả tốn 21 4.4 Các chức 21 4.5 Phân tích thiết kế 22 4.5.1 Lược đồ phân cấp chức 22 4.5.2 Sơ đồ use case đặc tả use case 22 4.5.3 Sơ đồ sở liệu 23 4.6 Giao diện ứng dụng 24 KẾT LUẬN .34 5.1 Kết thu 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 MỞ ĐẦU 1.1 Lí chọn đề tài Quản lý, kiểm soát thu nhập hạn mức chi tiêu cá nhân vấn đề nhức nhối hầu hết người Việc không lưu trữ, thống kê khoản thu chi làm nhìn tổng thể khả phân tích đánh giá mức tiêu dùng cá nhân phần đó, trực tiếp dẫn đến nhiều vấn đề phát sinh liên quan đến tài Sau thời gian tìm hiểu cân nhắc, nhóm thấy vấn đề mang tính thực tế, vơ thiết yếu nên nhóm định lựa chọn đề tài để nghiên cứu 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 thực đè tài ngôn ngữ Dart với công nghệ ứng dụng Flutter Trong trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo diễn đàn vè quản lý tài mạng xã hội Cùng với đó ứng dụng có sẵn phát triển thành cơng chợ ứng dụng để có nhìn tổng qt vè đè tài chọn • Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hành Nhóm thực bước sau trình phát triển ứng dụng: Bước 1: Nhóm tiến hành thu thập thơng tin u cầu người dùng Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố u cầu người dùng Bước 3: Nhóm tiến hành nghiên cứu ứng dụng sẵn có (với chức gần giống) thị trường để bắt kịp xu hướng Bước 4: Nhóm thực chỉnh sửa lại mơ hình hố u cầu người dùng theo thu thập Bước 5: Nhóm thực thiết kế CSDL Bước 6: Nhóm tiến hành nghiên cứu cơng nghệ sẵn có để lựa chọn mơi trường phù hợp phát triển ứng dụng Nhóm chọn Flutter (Cross platform) để phát triển ứng dụng phát huy tối đa tốc độ thực thi, đồng thời hỗ trợ tính cấp phục vụ cho yêu cầu 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 phát triển thêm tính chưa đề ban đầu) Bước 10: Nhóm hồ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 ứng dụng bạn trẻ địi hỏi tính di động cao, với đó bùng nổ nèn tảng ứng dụng di động Cụ thể, ứng dụng nhóm hướng đén người có nhu cầu ghi lại, xem thống kê lịch sử giao dịch tièn mặt, bạn trẻ, học sinh, sinh viên sống tại thành thị Đây nhóm người chi tiêu thường xuyên với khoản phí lặt vặt phát sinh đời sống hàng ngày Do đó họ thường hay quên sử dụng tiền vào đâu, thời điểm mục đích Chính vậy, ứng dụng trợ thủ đắc lực giúp họ ln kiểm tra lịch sử chi tiêu Từ đó có thể kiểm soát, nắm rõ khoản thu chi để nhận định sử dụng tiền hợp lý hay chưa tiến hành lên kế hoạch chi tiêu cho thân - vốn kỹ quan trọng bắt đầu sống tự lập 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 gi? - Dart ngơn ngữ lập trình mới, phát triển Google, chấp thuận tổ chức Ecma (ECMA-408) Nó sử dụng để xây dựng loại ứng dụng: web, server, di động (IOS Android) - Dart ngơn ngữ lập trình hướng đối tượng, với ché garbage collector, cú pháp kiểu C Nó hõ trợ khái niệm lập trình đại interface, mixin, abstract, generic, type-safe Đây ngơn ngữ lập trình mã nguồn mở, công bố Github 2.1.2 Ưu điểm Dart Một số ưu điểm vượt trội Dart so với ngơn ngữ lập trình khác: - Năng suất: Dart có cú pháp dễ hiểu, rõ ràng súc tích Type-safe giúp lập trình viên xác định sớm 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ó dự đoán hiệu suất cao khởi động nhanh thiét bị di động web - Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên dễ học Néu bạn biét C ++, C # Java, bạn làm việc hiệu với Dart sau vài ngày - Reactive: Dart phù hợp với lập trình Reactive, với hõ trợ để quản lý các đối tượng tồn tại thời gian ngắn, chẳng hạn các widget UI, thông qua phân bổ đối tượng nhanh garbage collector Dart hõ trợ lập trình khơng đồng thơng qua các tính ngơn ngữ API sử dụng đối tượng Future 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 10 4.5 Phân tích thiết kế 4.5.1 Lược đồ phân cấp chức Hinh 3-1 Lược đồ phân cấp chức 4.5.2 Sơ đồ use case đặc ta use case Hinh 3-2 Use case tổng quát 22 Hinh 3-3 Use case hiển thị lịch sử giao dịch Hinh 3-4 Use case thêm giao dịch Hinh 3-5 Use case xem biểu đồ thống kê 4.5.3 Sơ đồ sở liệu 23 4.6 Giao diện ứng dụng  Màn hình trang chủ ** Mô tả cách sử dụng xử lý hình: - Màn hình hình khởi chạy ứng dụng giúp người dùng nhận diện phần mềm - Màn hình thứ hình ứng dụng Ở hình này, ta chia làm phần: + Phần danh sách Tag (thẻ) cho phép người dùng chọn để hiển thị theo tháng cách nhấn vào thẻ Thẻ chọn đổi sang màu xanh ngược lại màu xám Dữ liệu phần phía hiển thị dựa tháng chọn 24 + Phần thứ Panel Hiển thị tổng số tiền thu nhập chi tiêu tháng cho biết số dư khả dụng lại + Phần thứ ListView hiển thị danh sách giao dịch tháng Nếu khơng có giao dịch xảy hiển thị giao diện hình Khi nhấn giữ vào giao dịch hiển thị giao diện cho phép chỉnh sửa thơng tin giao dịch xóa giao dịch + Phần thứ BottomNavigation gồm Tab: Thống kê, Nhắc nhở FloattingAction Button  FloattingAction Button: nhấn vào mở giao diện chọn loại giao dịch cần thêm Bên cạnh đó, người dùng cuộn ListView giao dịch hình theo hướng xuống nút FloattingAction Button tự động ẩn để không làm che khuất thông tin giao dịch hiển thị trở lại người dùng cuộn hình lên  Tab Thống kê: nhấn vào mở giao diện biểu đồ thống kê chi tiêu dựa giao dịch người dùng  Tab Nhắc nhở: nhấn vào mở giao diện cài đặt lịch nhắc nhở cập nhật giao dịch hàng ngày 25  Màn hình Chọn loại giao dịch cần thêm mới: 26 ** Mô tả cách sử dụng xử lý hình: Màn hình ứng dụng chia làm phần chính: - Phần 1: AppBar gồm BackButton dùng để quay lại hình trang chủ DropdownList để chọn loại giao dịch Khi nhấn vào xổ xuống danh sách loại giao dịch để lựa chọn VD: Tiền vào, Tiền - Phần 2: Một ListView Card(thẻ) dùng để lựa chọn loại hình chi tiết giao dịch VD: Mua sắm, Quần áo, Ăn uống,… Khi người dùng nhấn vào thẻ mở giao diện thêm giao dịch  Màn hình Thêm giao dịch: 27 ** Mô tả cách sử dụng xử lý hình: Màn hình gồm thành phần chính: - Phần gồm AppBar với BackButton dùng để quay lại hình trang chủ nhấn vào dịng thơng tin hiển thị lọai giao dịch - Phần gồm ô TextField dùng để điền thông ghi cho giao dịch IconButton hình chữ X để xóa ghi nhanh có thao tác nhấn Ở phía dưới, bên trái thích bên phải giới hạn số lượng ký tự cho ghi - Phần gồm ô TextField dùng để nhập số tiền giao dịch Khi người dùng nhấn vào ô hiển thị bàn phím số cho phép nhập số tiền giao dịch Bên cạnh có IconButton hình chữ X phần để xóa nhanh số tiền giao dịch Ở phía dưới, bên trái thích bên phải giới hạn số lượng ký tự cho số tiền - Phần gồm Button cho phép hiển thị DateTimePicker để chọn ngày cho giao dịch người dùng thực thao tác nhấn DateTimePicker hiển thị lịch PopUp với nhiều phương thức nhập chọn ngày lịch cho phép nhập bàn phím - Phần gồm Button cho phép Thêm thông tin giao dịch sau người dùng điển đầy đủ thông tin Nếu trường thông tin cịn bỏ trống hiển thị thơng báo lỗi yêu cầu người dùng nhập đủ thông tin cịn thiếu 28  Màn hình Chi tiết thơng tin giao dịch: ** Mô tả cách sử dụng xử lý hình: Màn hình gồm phần chính: - Phần gồm AppBar chứa IconButton Thùng rác dùng để xóa giao dịch Khi người dùng nhấn vào hiển thị thông báo xác nhận người dùng có muốn xóa giao dịch hay khơng - Phần gồm Card (Thẻ) chứa chi tiết thông tin giao dịch FloattingAction Button mở hình chỉnh sửa thông tin giao dịch người dùng thực thao tác nhấn 29  Màn hình Chỉnh sửa thơng tin giao dịch: 30 Màn hình gồm thành phần chính: - Phần gồm AppBar với BackButton dùng để quay lại hình trang chủ nhấn vào - Phần gồm ô TextField dùng để cập nhật thơng ghi cho giao dịch IconButton hình chữ X để xóa ghi nhanh có thao tác nhấn Ở phía dưới, bên trái thích bên phải giới hạn số lượng ký tự cho ghi - Phần gồm ô TextField dùng để cập nhật số tiền giao dịch Khi người dùng nhấn vào hiển thị bàn phím số cho phép nhập số tiền giao dịch Bên cạnh có IconButton hình chữ X phần để xóa nhanh số tiền giao dịch Ở phía dưới, bên trái thích bên phải giới hạn số lượng ký tự cho số tiền - Phần gồm Button cho phép hiển thị DateTimePicker để chọn ngày cho giao dịch người dùng thực thao tác nhấn DateTimePicker hiển thị lịch PopUp với nhiều phương thức nhập chọn ngày lịch cho phép nhập bàn phím - Phần gồm Button cho phép Lưu tin giao dịch cập nhật sau người dùng điển đầy đủ thông tin Nếu trường thơng tin cịn bỏ trống hiển thị thông báo lỗi yêu cầu người dùng nhập đủ thơng tin cịn thiếu 31  Màn hình Thống kê: ** Mơ tả cách sử dụng xử lý hình: Màn hình gồm phần chính: - Phần 1: Chứa danh sách Tag(thẻ) theo tháng để người dùng chọn tháng cần hiển thị liệu thống kê 32 - Phần 2: Chứa thẻ Loại giao dịch: Tiền vào, Tiền để chọn loại giao dịch cần hiển thị liệu thống kê - Phần 3: Chứa biểu đồ tròn thể giao dịch phần thích biểu đồ phía bên phải  Màn hình Nhắc nhở: 33 ** Mơ tả cách sử dụng xử lý hình: Màn hình gồm phần chính: - Phần 1: Chứa AppBar với BackButton dùng để quay lại hình thực thao tác nhấn nút - Phần 2: Chứa dịng hiển thị thơng tin lịch nhắc thông báo IconButton chỉnh sửa Khi người dùng nhấn vào nút chỉnh sửa TimePicker cho phép chọn thời gian theo phút với phương thức: chọn theo đồng hồ nhập từ bàn phím Sau chọn thời gian nhấn nút OK ứng dụng tự động hiển thị thơng báo nhắc nhở người dùng thêm giao dịch ngày đến khung chọn KẾT LUẬN 5.1 Kết thu - Căn vận dụng Dart Flutter vào việc phát triển ứng dụng di động - Sử dụng Moor làm sở liệu - Nắm nhu cầu đối tượng khách hàng chủ yéu người trẻ ứng dụng quản lý chi tiêu - Kết thúc mơn học, nhóm tìm hiểu hoàn thành ứng dụng tương đối hoàn chỉnh Với hướng dẫn từ cô, kiến thức mà cô cung cấp, chúng em áp dụng design pattern tốt quy chuẩn phát triển ứng dụng để có ứng dụng tốt Trong khoảng thời gian hạn chế, nhóm phát triển phần mềm 34 tương đối hoàn thiện Phần mềm đáp ứng tốt chức người sử dụng thông thường việc quản lý chi tiêu thiết bị 5.2 Khó khăn - Gặp khó khăn việc két nối Moor với ứng dụng Flutter - Khó khăn việc chuyển đổi bảng CSDL thành kiểu liệu tương ứng Dart - Bố cục code khó theo dõi, khó khăn việc quản lý code, bảo trì phát triển - Yêu cầu máy tính có cấu hình cao để phát triển ứng dụng, chiém nhièu tài nguyên Debug 5.3 Phương hướng phát triển - Hoàn thiện vè mặt giao diện, cải thiện tốc độ phản hồi, cung cấp trải nghiệm chạm vuốt mượt mà - Sắp xép bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản trực quan - Tổ chức quản lý Cơ sở liệu hợp lý khoa học - Thêm tính Tạo ké hoạch tiét kiệm cho tương lai - Vận dụng công nghệ để mang lại nhièu chức thiét thực hữu ích 35 TÀI LIỆU THAM KHẢO Nhóm có dùng tài liệu tham khảo từ trang chủ Flutter Bên cạnh đó nhóm chúng em tham khảo nhièu chủ đè thảo luận, ví dụ minh hoạ vè Dart, Flutter các trang web Stackoverflow, Github,… https://pub.dev/ https://github.com/flutter/samples https://flutter.dev/docs https://stackoverflow.com/ https://youtube.com/ Ứng dụng liên quan: MoneyLover, MoneyManager Link Source Code: https://github.com/Tiensp/MoneyManagement 36 ... vận dụng Dart Flutter vào việc phát triển ứng dụng di động - Sử dụng Moor làm sở liệu - Nắm nhu cầu đối tượng khách hàng chủ yéu người trẻ ứng dụng quản lý chi tiêu - Kết thúc mơn học, nhóm tìm. .. Studio Code sau tạo thành công project Flutter 19 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 hạn mức chi tiêu cá nhân vấn đề nhức nhối hầu... công nghệ ứng dụng Flutter Trong q trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo diễn đàn vè quản lý tài mạng xã hội Cùng với đó ứng dụng có sẵn phát triển thành cơng chợ ứng dụng để