TÌM HIỂU FLUTTER và xây DỰNG ỨNG DỤNG sổ TAY GIA ĐÌNH

Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CƠNG NGHÊ THƠNG TIN BÁO CÁO ĐỒ ÁN CUỐI KỲ TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG SỔ TAY GIA ĐÌNH Đồ Án – SE122.M11.PMCL Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh Nhóm thực hiện: 18521051 – Phạm Thăng Long Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh TP HCM, tháng 12 năm 2021 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM giúp cho nhóm chúng em có kiến thức làm tảng để thực đồ án Đặc biệt, nhóm chúng em xin gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh (Giảng viên hướng dẫn đồ án 2) Thầy giúp chúng em hiểu kiến thức di dộng hướng dẫn em kiến thức nâng cao Flutter để chúng em hồn thành tốt báo cáo mơn học Trong thời gian ngắn thực đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi, tham khảo nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía Thầy nhằm hoàn thiện kiến thức mà em học tập hành trang để thực tiếp đề tài khác tương lai Xin chân thành cảm ơn Thầy Thành phố Hồ Chí Minh, tháng 12 năm 2021 Phạm Thăng Long Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh ĐÁNH GIÁ KẾT QUẢ Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh MỤC LỤC Tổng quan đề tài 1.1 Mục tiêu đề tài 1.1.1 Lý chọn đề tài 1.1.2 Mục tiêu 1.2 Đối tượng nghiên cứu 1.2.1 Công nghệ 1.2.2 Đối tượng phạm vi đề tài hướng đến Kiến thức tảng 2.1 Kiến trúc hệ thống 2.2 Tổng quan Flutter 2.3 Tổng quan Firebase 12 Mô tả hệ thống 14 3.1 Mục đích hệ thống 14 3.2 Mô tả yêu cầu hệ thống 14 3.2.1 Các yêu cầu nghiệp vụ cho hệ thống: 14 3.2.2 Yêu cầu chất lượng 14 Phân tích thiết kế 15 4.1 Mơ hình Use case 15 4.2 Sơ đồ lớp (mức phân tích) 17 4.3 Thiết kế liệu 22 4.4 Giao diện 26 Kết luận, hướng phát triển 50 5.1 Kết luận 50 5.1.1 Ưu điểm 50 5.1.2 Nhược điểm 50 Thăng Long Lớp: SE122.M11.PMCL 5.2 GVHD: Huỳnh Tuấn Anh Hướng phát triển 50 Tài liệu tham khảo 50 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Tổng quan đề tài 1.1 Mục tiêu đề tài 1.1.1 Lý chọn đề tài • Trong bối cảnh tại, phát triển ứng dụng điện thoại di động xu hướng công nghệ thông tin Vậy nên ngơn ngữ lập trình có khả cross-platform Flutter hoan nghênh có khả tiết kiệm chi phí, nhân cơng sản xuất phần mềm Với lý đó, em lựa chọn nghiên cứu cơng nghệ Flutter sử dụng Flutter để phát triển đề tài • Trong bối cảnh xã hội đại, người ngày bận rộn với công việc việc học bên ngồi có thời gian để xử lí cơng việc gia đình Đặc biệt thời gian giãn cách xã hội đại dịch Covid-19 khiến cho nhiều người công tác xa gia đình khơng thể Nhu cầu quản lý cơng việc, kiện gia đình tương tác với thành viên gia đình tăng cao • Đứng góc độ này, ý tưởng giúp việc quản lý công việc, kiện tương tác với thành viên gia đình dần hình thành Đó việc ứng dụng cơng nghệ vào việc xây dựng ứng dụng sổ tay gia đình hỗ trợ tương tác giúp tăng hiệu quản lý công việc tính tương tác từ xa cho gia đình Chính vậy, em định thực đề tài 1.1.2 Mục tiêu • Tìm hiểu ngơn ngữ Dart cơng nghệ Flutter • Sử dụng Flutter để xây dựng hệ thống với tiêu chí mang lại tính hiệu cao, dễ sử dụng • Lên danh sách cơng việc gia đình phân cơng cơng việc cho thành viên gia đình Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh • Hỗ trợ lưu trữ đăng gia đình • Hỗ trợ tương tác nhắn tin thành viên gia đình 1.2 Đối tượng nghiên cứu 1.2.1 Cơng nghệ • Backend service and Database: Firebase • Mobile: Flutter • Source Control: Github 1.2.2 Đối tượng phạm vi đề tài hướng đến • Những người có nhu cầu tương tác với gia đình quản lý cơng việc, kiện, tương tác với thành viên khác Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Kiến thức tảng 2.1 Kiến trúc hệ thống Hình 2.1 Kiến trúc hệ thống Hệ thống sử dụng mơ hình MVVP phía Mobile có lớp repository để giao tiếp với Firebase lấy đồng hóa liệu Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh 2.2 Tổng quan Flutter • Lập trình cross platform ngày trở nên phổ biến Đặc biệt, với xuất React Native (RN) vào năm 2015 mở xu hướng xây dựng ứng dụng đa tảng lần code Các công ty lớn UberEats, Discord Facebook chuyển sang React Native – phần tất yếu dịch chuyển cơng nghệ • Google Họ nhận thấy độ phủ sóng React Native Sau năm, Google cho mắt phiên alpha Flutter Giao diện người dùng khởi chạy vào năm 2017 dự định tạo ứng dụng gốc chất lượng cao phiên iOS Android thời gian ngắn • Flutter Google giới thiệu người giới ứng dụng di động Là SDK Google dành cho thiết bị di động giúp developers designers xây dựng nhanh chóng ứng dụng dành cho thiết bị di động (Android, iOS) Flutter dự án mã nguồn mở giai đoạn thử nghiệm Flutter bao gồm Reactive framework công nghệ hiển thị 2D (2D rendering engine) công cụ phát triển (development tool) Các thành phần làm việc giúp ta thiết kế, xây dựng, test, debug Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh ứng dụng Khơng có ngạc nhiên Flutter giúp nhà phát triển tạo ứng dụng native đẹp mắt giúp họ phát triển ứng dụng đa tảng cách dễ dàng • Ưu điểm Flutter o Ngơn ngữ Dart: Dart - OOP, dài, người quen viết Java / C # hài lịng với Dart o Ít phải viết config tạo project theo cách thủ công, ngược lại với React Native o Chỉ cần tải Flutter từ git, chạy “flutter doctor”, cho bạn biết loại vấn đề bạn có hệ thống Sau đó, tạo project từ Android Studio IDE sau cài đặt Flutter Plug-in sơ start project Ngồi cịn có Hot-reload giống React-Native o Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode) o Trình điều hướng tích hợp sẵn Sau tạo ứng dụng Flutter, bạn thấy có Navigator xây dựng sẵn Bạn tạo route mà khơng cần kết nối thứ (khơng giống RN, nơi bạn cần kết nối package điều hướng gốc vv); o Giải pháp quản lý liệu tạo sẵn, ví dụ Flutter "Mọi thứ có Widget" cho Có StatefulWidget đặc biệt, với giúp đỡ mà quản lý trạng thái widget thay đổi cách động • Nhược điểm Flutter o Có rào cản lớn cho người học JS, đến từ RN Do thực tế Dart sử dụng với thừa kế, đa hình tất thứ OOP 10 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.13 Giao diện task 37 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.14 Lọc task 38 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.15 Thêm task 39 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.16 Gắn task cho thành viên gia đình 40 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.17 Gắn thời gian hạn chót cho task 41 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.18 Xem chi tiết xóa task 42 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.19 Chi tiết cho task 43 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.20 Giao diện post 44 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.21 Tạo post 45 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.22 Xem post comments 46 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.23 Giao diện chat 47 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.24 Giao diện hình profile 48 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Hình 4.25 Chỉnh sửa thơng tin người dùng 49 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh Kết luận, hướng phát triển Thông qua đồ án em hoàn thành phần thiết kế đề cho ứng dụng, nhiên em chưa thực chức nâng cao đăng nhập google, facebook account Link source code: drive_source_code Link build apk: drive_apk_release Link video demo: drive_vid_demo 5.1 Kết luận 5.1.1 Ưu điểm • Học sử dụng cơng nghệ Flutter kiến trúc MVVP • Hiểu thêm tự xây dựng backend firebase • Sản phẩm trực quan dễ nhìn Cài đặt chức cần thiết 5.1.2 Nhược điểm • Một số tính ứng dụng chưa tối ưu hồn thiện • Do khơng tiếp xúc nhiều phần backend nên có số tính bị loại bỏ chưa thực 5.2 Hướng phát triển • Nâng cao trình độ backend để hồn thành tính ban đầu tiếp tục phát triển mở rộng hướng khác theo dõi vị trí trực tuyến Tài liệu tham khảo https://viblo.asia/p/tong-quan-ve-flutter-Eb85oyAkZ2G 50 Thăng Long Lớp: SE122.M11.PMCL GVHD: Huỳnh Tuấn Anh https://wiki.tino.org/firebase-la-gi/ https://pub.dev https://www.youtube.com/watch?v=uXGOrHBB1c&list=PLZqHbMxF8mzbcMAjOtClkRcEIkhvV3ZtL 51 Thăng Long ... tin cá nhân tài khoản Tạo gia User tạo gia đình đình Tham gia vào User tham gia vào gia đình có sẵn gia đình Chỉnh sửa thơng Chỉnh sửa thơng tin chung gia đình tin gia đình tên, avatar, quyền edit... 3.1 Mục đích hệ thống Ứng dụng công nghệ FLutter vào việc xây dựng ứng dụng sổ tay gia đình hỗ trợ tương tác giúp tăng hiệu quản lý công việc tính tương tác từ xa cho gia đình 3.2 Mô tả yêu cầu... đình dần hình thành Đó việc ứng dụng công nghệ vào việc xây dựng ứng dụng sổ tay gia đình hỗ trợ tương tác giúp tăng hiệu quản lý công việc tính tương tác từ xa cho gia đình Chính vậy, em định thực