Xây dựng ứng dụng quản lý chi tiêu

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Lê Đức Trung – 19522422 Hồ Hữu Thịnh – 19522275 ĐỒ ÁN MÔN HỌC XÂY DỰNG ỨNG DỤNG QUẢN LÝ CHI TIÊU GIẢNG VIÊN GIẢNG DẠY THÁI THUỴ HÀN UYỂN TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Trước bước vào phần báo cáo đồ án, nhóm chúng em trân trọng gửi lời cảm ơn đến cô Thái Thị Hàn Uyển tạo điều kiện cho chúng em có hội thực đồ án nhiệt tình góp ý, giúp đỡ chúng em lớp, cung cấp cho chúng em nhiều kiến thức và kinh nghiệm hữu ích và ngoài mảng lập trình di động Dù vậy, trình học tập, làm đồ án thời gian kiến thức có hạn nên nhóm em khơng thể tránh khỏi thiếu sót Nhóm em mong nhận thơng cảm, đóng góp xây dựng từ để nhóm em có thêm nhiều kiến thức có ích ngày hồn thiện Monas Nhóm thực Trường Đại học Cơng nghệ Thơng tin, tháng 12 năm 2021 MỤC LỤC CHƯƠNG I GIỚI THIỆU ĐỀ TÀI Giới thiệu chung Mục tiêu đề tài 2.1 Lý thuyết 2.2 Mục tiêu Quá trình thực Tổng quan chức CHƯƠNG II CƠ SỞ LÝ THUYẾT Flutter 1.1 Tổng quan lịch sử 1.2 Thành phần Flutter 1.3 Một số đặc điểm bật 10 1.4 Ưu và nhược điểm Flutter: 11 Ngơn ngữ lập trình Dart 11 2.1 Tổng quan 11 2.2 Tại Flutter chọn Dart? 11 Hệ quản trị sở liệu Firebase 12 3.1 Firebase gì? 12 3.2 Firebase Realtime database 12 3.3 Firebase Authentication 12 3.4 Firebase Hosting 12 3.5 Ưu điểm Firebase 13 3.6 Nhược điểm Firebase 13 CHƯƠNG III XÂY DỰNG HỆ THỐNG 14 Xây dựng kiến trúc hệ thống 14 1.1 Công nghệ sử dụng 14 1.2 Kiến trúc hệ thống: Mơ hình Client-Server 14 1.3 Kiến trúc ứng dụng: Mơ hình MVVM 15 1.4 Mô tả thành phần hệ thống 16 1.5 Sơ đồ Use case 17 1.6 Mô tả Use case 18 1.7 Đặc tả use case 19 Mô tả hình 41 2.1 Màn hình đăng nhập 41 2.2 Màn hình đăng ký 42 2.3 Màn hình quên mật 43 2.4 Màn hình 44 2.5 Màn hình 45 CHƯƠNG IV KẾT LUẬN 56 DANH MỤC HÌNH ẢNH Hình Tổng quan chức Hình Một số ứng dụng tiếng viết Flutter Hình Kiến trúc Flutter 10 Hình Kiến trúc hệ thống client server 14 Hình Kiến trúc ứng dụng 15 Hình Sơ đồ use case 17 Hình Màn hình đăng nhập 41 Hình Màn hình đăng ký 42 Hình Màn hình quên mật 43 Hình 10 Màn hình trang chủ 44 Hình 11 Màn hình ví bạn 45 Hình 12 Màn hình thêm ví 46 Hình 13 Màn hình thêm giao dịch 47 Hình 14 Màn hình thêm ngân sách 48 Hình 15 Màn hình chi tiết ngân sách 49 Hình 16 Màn hình quản lý tài khoản 50 Hình 17 Sơ đồ lớp 51 Hình 18 Sơ đồ hoạt động đăng ký 52 Hình 19 Sơ đồ hoạt động thêm ví 53 Hình 20 Sơ đồ hoạt động thêm giao dịch 54 Hình 21 Sơ đồ hoạt động thêm ngân sách 55 DANH MỤC BẢNG Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Bảng Mô tả thành phần ứng dụng 16 Mô tả use case 19 Đặc tả chức đăng ký 20 Đặc tả chức đăng nhập với email mật 21 Đặc tả chức đăng nhập Google 23 Đặc tả chức quên mật 24 Đặc tả chức thêm ví 25 Đặc tả chức cập nhật ví 26 Đặc tả chức xố ví 27 10 Đặc tả chức thêm giao dịch 28 11 Đặc tả chức cập nhật giao dịch 30 12 Đặc tả chức xoá giao dịch 31 13 Đặc tả chức báo cáo chi tiêu 32 14 Đặc tả chức thêm ngân sách 34 15 Đặc tả chức sửa ngân sách 35 16 Đặc tả chức xoá ngân sách 36 17 Đặc tả chức chỉnh sửa thời gian thông báo 37 18 Đặc tả chức chỉnh sửa định dạng ngày tháng 38 19 Đặc tả chức bật tắt âm thông báo 39 20 Đặc tả chức đăng xuất 41 CHƯƠNG I GIỚI THIỆU ĐỀ TÀI Giới thiệu chung Tạo thu nhập khó, nhiên việc quản lý chi tiêu cá nhân lại càng khó Vậy nên, biết cách quản lý tài cá nhân, chủ động sống tạo thêm nhiều hội cho thân Tuy nhiên, việc quản lý tài cho hiệu lại vấn đề mà nhiều người gặp phải sống Quản lý tài cá nhân nghe dễ thực tế không đơn giản thực hai được, cần đầu tư nhiều thời gian cơng sức quản lý sát Chính nhiều cơng ty tiên phong áp dụng công nghệ vào lĩnh vực để đơn giản hoá việc quản lý chi tiêu mang đến cho người dùng trải nghiệm đơn giản Hiểu nhu cầu và xu hướng ấy, nhóm chúng em định làm ứng dụng hỗ trợ quản lý chi tiêu cá nhân – Monas Mục tiêu đề tài 2.1 Lý thuyết - Nghiên cứu Flutter ngơn ngữ lập trình Dart - Nắm rõ thao tác mơi trường phát triển tích hợp Android studio cơng cụ lập trình Visual studio code - Nghiên cứu sử dụng dịch vụ sở liệu tảng đám mây – Firebase - Nghiên cứu cách thức phát triển ứng dụng đa tảng 2.2 Mục tiêu - Người dùng lưu lại thông tin cá nhân giao dịch để phục vụ tốt việc quản lý chi tiêu - Ứng dụng hỗ trợ từ đến đầy đủ chức ứng dụng quản lý chi tiêu điển hình - Ứng dụng có giao diện thân thiện, dễ sử dụng Quá trình thực Trải qua trình tìm hiểu thực đề tài, nhóm giải vấn đề đặt ban đầu, bước giải liên tục đặt vấn đề để ngày hoàn thiện sản phẩm Những bước thực hiện: - Phân tích yêu cầu tốn - Lựa chọn tảng cơng nghệ phù hợp với yêu cầu - Nghiên cứu sở lý thuyết công nghệ lựa chọn - Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn - Kiểm tra khám phá ứng dụng tương tự để tối ưu hoá trải nghiệm người dùng cải thiện tính cho ứng dụng Tổng quan chức Hình Tổng quan chức CHƯƠNG II CƠ SỞ LÝ THUYẾT Flutter 1.1 Tổng quan lịch sử Flutter công cụ phát triển phần mềm mã nguồn mở tạo Google – công ty công nghệ lớn hành tinh Nó sử dụng với mục đích phát triển ứng dụng đa tảng cho Android, iOS, Linux, Windows, MacOS web từ tảng mã Flutter giới thiệu lần vào năm 2015 và đến tháng 5, 2017 phiên ổn định mắt thức Dù mắt trễ Flutter và phát triển mạnh mẽ, dần trở thành đối thủ nặng ký công cụ hỗ trợ lập trình đa tảng khác React Native (Facebook), Xamarin (Microsoft)… Tính đến thời điểm Flutter là công cụ hỗ trợ lập trình đa tảng sử dụng nhiều Một số ứng dựng tiếng viết Flutter: Hình Một số ứng dụng tiếng viết Flutter 1.2 Thành phần Flutter Flutter gồm có hai tầng Engine Framework: - - Tầng engine chứa thư viện đồ hoạ giúp render giao diện người dùng máy ảo Dart – môi trường để thực thi mã nguồn biên dịch mã lệnh Dart Đây là nơi thực việc kết nối với hệ thống Tầng framework viết mã lệnh Dart, cung cấp lớp, chức và tiện ích (widget) dùng để tạo ứng dụng Flutter Lập trình viên sử dụng chủ yếu tầng để lập trình Hình Kiến trúc Flutter - - - 1.3 Một số đặc điểm bật Fast Development: Tíng Hot Reload hoạt động milliseconds để thị giao diện tới bạn Sử dụng tập hợp widget customizable để xây dựng giao diện vài phút Ngồi Hot Reload cịn giúp bạn thêm tính năng, fix bug tiết kiệm thời gian mà không cần phải thông qua máy ảo, máy android iOS Expressive and Flexible UI: Có nhiều thành phần để xây dựng giao diện Flutter vô đẹp mắt theo phong cách Material Design Cupertino, hỗ trợ nhiều APIs chuyển động, smooth scrolling Native Performance: Các widget fluter kết hợp khác biệt tảng ví dụ scrolling, navigation, icons, font để cung cấp hiệu tốt tới iOS Android 2.3 Màn hình quên mật Hình Màn hình quên mật STT Biến cố Xử lý Chọn Tôi muốn đặt lại mật Tiến hành gửi email đổi mật đến địa email nhập bên 2.4 Màn hình Hình 10 Màn hình trang chủ STT Biến cố Xử lý Chọn Xem tất (Ví) Di chuyển qua hình xem ví Chọn Xem tất (Giao dịch) Chọn icon dấu + Di chuyển qua hình xem giao dịch Di chuyển qua hình thêm giao dịch 2.5 Màn hình xem ví Hình 11 Màn hình ví bạn STT Biến cố Xử lý Chọn icon chấm Hiển thị context menu để lựa chọn Chọn icon dấu + Di chuyển qua hình thêm Ví Chọn icon quay Quay hình 2.6 Màn hình thêm ví Hình 12 Màn hình thêm ví STT Biến cố Xử lý Chọn icon Ví Chọn icon V Hiển thị bottom sheet để thay đổi icon ví Hồn thành thêm ví Chọn icon X Hủy thêm ví 2.7 Màn hình thêm giao dịch Hình 13 Màn hình thêm giao dịch STT Biến cố Chọn icon Ví Chọn icon danh mục Chọn Hôm Chọn Với Chọn icon hình Chọn icon camera Chọn Lưu Chọn icon X Xử lý Di chuyển đến hình danh sách ví để chọn ví Di chuyển đến hình danh sách danh mục để chọn danh mục Mở date picker để chọn ngày thêm transaction Di chuyển đến hình danh sách liên hệ chọn người muốn nêu tên Mở thư viện hình ảnh nhớ điện thoại để chọn Mở ứng dụng chụp ảnh điện thoại Lưu giao dịch di chuyển hình Hủy thêm giao dịch di chuyển hình 2.8 Màn hình ngân sách Hình 14 Màn hình thêm ngân sách STT Biến cố Xử lý Chọn icon Ví Hiển thị hình để chọn ví Chọn icon “+” Chọn tháng tab bar Chọn năm Di chuyển đến hình thêm ngân sách Hiển thị danh sách ngân sách theo tháng năm chọn Hiển thị menu để chọn năm mong muốn 2.9 Màn hình chi tiết ngân sách Hình 15 Màn hình chi tiết ngân sách STT Biến cố Xử lý Chọn icon “X” Nhấn để hình ngân sách Chọn icon bút Chọn icon hình thùng rác Di chuyển đến hình chỉnh sửa ngân sách Xố ngân sách Nhấn nút danh sách giao dịch Di chuyển đến hình danh sách giao dịch 2.10 Màn hình tài khoản Hình 16 Màn hình quản lý tài khoản STT Biến cố Chọn gửi email xác thực Chọn Ví tơi Chọn Định dạng ngày tháng Chọn Nhắc thêm giao dịch hàng ngày Chọn Phát âm thông báo Chọn đăng xuất Xử lý Yêu cầu hệ thống gửi email xác thực tài khoản Di chuyển đến hình xem ví Mở dialog thay đổi định dạng ngày tháng Mở time picker chọn thời gian mong muốn thơng báo Switch bật/tắt âm thơng báo Thốt tài khoản khỏi ứng dụng, di chuyển người dùng đến hình đăng nhập Sơ đồ lớp Hình 17 Sơ đồ lớp Sơ đồ hoạt động 4.1 Hoạt động đăng ký Hình 18 Sơ đồ hoạt động đăng ký 4.2 Hoạt động thêm ví Hình 19 Sơ đồ hoạt động thêm ví 4.3 Hoạt động thêm giao dịch Hình 20 Sơ đồ hoạt động thêm giao dịch 4.4 Hoạt động thêm ngân sách Hình 21 Sơ đồ hoạt động thêm ngân sách CHƯƠNG IV KẾT LUẬN Kết đạt • Tạo sản phẩm hồn chỉnh • Áp dụng kiến thức quy trình phát triển phần mềm hướng đối tượng cách chun nghiệp • Tìm hiểu thêm cơng nghệ kiến trúc kỹ tḥt • Hiểu và nắm kiến thức ứng dụng Visual Studio Code • Hiểu và nắm cách xây dựng ứng dụng di động với Flutter • Nắm rõ Dart, Flutter, package, thiết kế giao diện ứng dụng di động • Phân cơng cơng việc hợp lý Ưu điểm • Dễ dàng sử dụng • Giao diện đẹp mắt thân thiện • Có nhiều chức khác phục vụ cho nhu cầu mục đích người dùng • Hồn tồn miễn phí • Có tính áp dụng thực tế cao Nhược điểm giải pháp - Báo cáo chưa chi tiết thực tế o Giải pháp: tìm hiểu kĩ nhu cầu xem báo cáo người dùng Tạo báo cáo đầy đủ thỏa mãn nhu cầu người dùng - Các chức phần cài đặt cịn hạn chế o Giải pháp: tìm hiểu nhiều nhu cầu thay đổi cài đặt người dùng - Chưa thể cho phép người dùng tự custom giao diện cho ứng dụng o Giải pháp: Tìm cách tạo container cho phép người dùng tự custom giao diện theo ý - Cịn chức đăng nhập khác o Giải pháp: tạo cách đăng nhập khác cho người dùng dễ dàng đăng nhập - Luồng xử lý kiện rườm rà, phức tạp o Giải pháp: tìm cách tối ưu thuật tốn lng xử lý kiện TÀI LIỆU THAM KHẢO - - Flutter document: https://docs.flutter.dev Youtube – Johannes Milke: https://www.youtube.com/c/JohannesMilke Youtube – Flutter: https://www.youtube.com/c/flutterdev Firebase Document: https://firebase.google.com/docs/build Stackoverflow: https://stackoverflow.com/ ... việc quản lý chi tiêu mang đến cho người dùng trải nghiệm đơn giản Hiểu nhu cầu và xu hướng ấy, nhóm chúng em định làm ứng dụng hỗ trợ quản lý chi tiêu cá nhân – Monas Mục tiêu đề tài 2.1 Lý thuyết... để phục vụ tốt việc quản lý chi tiêu - Ứng dụng hỗ trợ từ đến đầy đủ chức ứng dụng quản lý chi tiêu điển hình - Ứng dụng có giao diện thân thiện, dễ sử dụng Quá trình thực Trải qua trình tìm... cứu sở lý thuyết công nghệ lựa chọn - Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn - Kiểm tra khám phá ứng dụng tương tự để tối ưu hoá trải nghiệm người dùng cải thiện tính cho ứng dụng Tổng