Tìm hiểu FLUTTER và phát triển ứng dụng trò chuyện ẩn danh (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN THÀNH TRUNG – 19522436 NGUYỄN QUỐC TRUNG – 19522429 ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG TRÒ CHUYỆN ẨN DANH LEARN ABOUT FLUTTER & BUILDING A ANONYMOUS CHATTING APP KHOA CÔNG NGHỆ PHẦN MỀM TP HỒ CHÍ MINH, 6,2023 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN THÀNH TRUNG – 19522436 NGUYỄN QUỐC TRUNG – 19522429 ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG TRÒ CHUYỆN ẨN DANH LEARN ABOUT FLUTTER & BUILDING A ANONYMOUS SOCIAL CHAT APP KHOA CÔNG NGHỆ PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TH.S HUỲNH TUẤN ANH TP HỒ CHÍ MINH, 6,2022 LỜI CẢM ƠN Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy khoa Cơng nghệ Phần mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian qua Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến ThS Huỳnh Tuấn Anh, cảm ơn thầy tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình thầy động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực đề tài Trong thời gian tháng thực đề tài, nhóm chúng em cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài môn học Tuy nhiên trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Sau cùng, nhóm tác giả xin kính chúc quý thầy cô khoa Công nghệ phần mềm thầy Huỳnh Tuấn Anh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Xin chân thành cảm ơn quí thầy cô ! NHẬN XÉT (Của giáo viên hướng dẫn) DANH SÁCH THÀNH VIÊN NHÓM Tên thành viên MSSV Trần Thành Trung 19522436 Nguyễn Quốc Trung 19522429 MỤC LỤC Chương TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề 1.1.1 Mục tiêu .2 1.1.2 Phạm vi 1.2 Công cụ sử dụng Chương CƠ SỞ LÝ THUYẾT .4 2.1 NodeJS 2.1.1 Giới thiệu .4 2.1.2 Lý sử dụng 2.2 MongoDB 2.2.1 Giới thiệu .6 2.2.2 Lý sử dụng 2.3 Flutter 2.3.1 Giới thiệu .7 2.3.2 Lý sử dụng Chương TÌM HIỂU VỀ FLUTTER 3.1 Giới thiệu chung 3.1.1 Lịch sử phát triển 3.1.2 Đối tượng hướng đến .10 3.1.3 Ngôn ngữ sử dụng .11 3.2 Công dụng Flutter 12 3.3 Điểm khác biệt Flutter 12 3.4 Cấu trúc ứng dụng Flutter 13 3.4.1.1 Widget 13 3.4.1.2 Cấu trúc theo Widget .14 3.4.1.3 Các nhóm Widget 15 3.4.1.4 Widget Layout .15 3.4.1.5 Stateless , Stateful 15 3.4.2 Gesture .16 3.4.3 State 16 3.4.4 Layout 17 3.4.4.1 Single Child Widget 18 3.4.4.2 Multiple Child Widget 19 3.4.5 Một số phần quan trọng khác 19 Chương KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU 20 4.1 Nhu cầu thực tế 20 4.2 Khảo sát Google Form 20 4.3 Usecase , đặc tả usecase 25 4.3.1 Sơ đồ usecase 25 4.3.2 Danh sách usecase .26 4.3.3 Đặc tả chi tiết (Activity, Sequence Diagram) 26 4.3.3.1 Đăng nhập 26 4.3.3.2 Đăng ký 29 4.3.3.3 Quên mật .32 4.3.3.4 Chỉnh sửa hồ sơ .35 4.3.3.5 Chỉnh sửa cài đặt 38 4.3.3.6 Ghép cặp 41 4.3.3.7 Chat 44 4.3.3.8 Nghe nhạc 47 4.3.3.9 Khiếu nại - Report 50 4.3.3.10 Thêm bạn bè 53 4.3.3.11 Tìm kiếm bạn bè 56 4.3.3.12 Xem hồ sơ bạn bè 59 4.3.3.13 Khiếu nại bạn bè 61 4.3.3.14 Xoá bạn bè 64 4.3.3.15 Mời bạn bè vào phòng chat 67 4.4 Sơ đồ lớp 71 4.4.1 Danh sách chi tiết đối tượng quan hệ 71 4.4.2 Mô tả chi tiết lớp đối tượng 72 4.4.2.1 User 72 4.4.2.2 Setting 72 4.4.2.3 Media .72 4.4.2.4 Message 73 4.4.2.5 Friend .73 4.4.2.6 Report 74 Chương THIẾT KẾ HỆ THỐNG .74 5.1 Kiến trúc hệ thống .74 5.2 Giao diện tổng quan .76 5.2.1 Màn hình đăng nhập 76 5.2.2 Màn hình đăng ký 77 5.2.3 Màn hình quên mật 78 5.2.4 Màn hình – Home 79 5.2.5 Hồ sơ người dùng 80 5.2.6 Cài đặt 81 5.2.7 Danh sách bạn bè .82 5.2.8 Hồ sơ bạn bè 83 5.2.9 Phòng chat 84 5.2.9.1 Nhắn tin 84 5.2.9.2 Nghe nhạc 85 5.2.10 Khiếu nại 86 Chương PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG 87 6.1 Môi trường phát triển ứng dụng 87 6.2 Môi trường triển khai ứng dụng 87 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 87 7.1 Kết luận 87 7.1.1 Kết đạt 87 7.1.1.1 Ưu điểm 87 7.1.1.2 Khuyết điểm 88 7.1.2 Điểm đặc sắc đề tài .88 7.2 Hướng phát triển 89 Chương TÀI LIỆU THAM KHẢO 90 DANH MỤC HÌNH Hình 2.1-1 NodeJS Hình 2.2-1 MongoDB Hình 2.3-1 Flutter Hình 2.3-1 FLutter Hình 3.1-1 Dart 11 Hình 3.3-1 Cấu trúc Engine Flutter 13 Hình 3.4-1 Cấu trúc Flutter theo Widget 14 Hình 3.4-2 Gesture Flutter 16 Hình 3.4-3 Layout FLutter 17 Hình 3.4-4 Sing Child Widget FLutter 18 Hình 3.4-5 Multiple Child Widget Flutter 19 Hình 4.2-1 Độ tuổi khảo sát 21 Hình 4.2- 21 Hình 4.2-3 Tỷ lệ giới tính khảo sát 21 Hình 4.2-4 Các app nhắn tin thường sử dụng 22 Hình 4.2-5 Khảo sát giao diện sử dụng 22 Hình 4.2-6 Khảo sát độ bảo mật 23 Hình 4.2-7 Khảo sát màu sắc app 24 Hình 4.2-8 Kết hợp trị chuyện phát nhạc 24 Hình 4.2-9 Độ tin cậy ứng dụng 25 Hình 4.3-1 Sơ đồ Usecase 25 Hình 4.3-2 Sơ đồ hoạt động 'Đăng nhập' 28 Hình 4.3-3 Sơ đồ 'Đăng nhập' 29 Hình 4.3-4 Sơ đồ hoạt động 'Đăng ký' 31 Hình 4.3-5 Sơ đồ 'Đăng ký' 32 Hình 4.3-6 Sơ đồ hoạt động 'Quên mật khẩu' 34 5.2 Giao diện tổng quan 5.2.1 Màn hình đăng nhập Hình 5.2-1 Màn hình đăng nhập 76 5.2.2 Màn hình đăng ký Hình 5.2-2 Màn hình đăng ký 77 5.2.3 Màn hình quên mật Hình 5.2-3 Màn hình quên mật 78 5.2.4 Màn hình – Home Hình 5.2-4 Màn hình 79 5.2.5 Hồ sơ người dùng Hình 5.2-5 Màn hình hồ sơ cá nhân 80 5.2.6 Cài đặt Hình 5.2-6 Màn hình cài đặt 81 5.2.7 Danh sách bạn bè Hình 5.2-7 Màn hình danh sách bạn bè 82 5.2.8 Hồ sơ bạn bè Hình 5.2-8 Màn hình thơng tin bạn bè 83 5.2.9 Phịng chat 5.2.9.1 Nhắn tin Hình 5.2-9 Màn hình Phịng chat 84 5.2.9.2 Nghe nhạc Hình 5.2-10 Màn hình nghe nhạc 85 5.2.10 Khiếu nại Hình 5.2-11 Màn hình khiếu nại 86 Chương PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG 6.1 Môi trường phát triển ứng dụng - Hệ điều hành: Windows 10,11 - Ngôn ngữ: Dart - Framework: Flutter, NodeJS, Express - Hệ quản trị sở liệu: MongoDB - Công cụ chạy ứng dụng: Visual Studio Code - Công cụ khởi tạo kiểm soát máy ảo : Android Studio – Android 8.1 Oreo, Smartphone Techno Pova 6.2 Môi trường triển khai ứng dụng - Hệ điều hành : Android - Ram 2GB+ - Yêu cầu có kết nối internet cài đặt app để sử dụng Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết luận 7.1.1 Kết đạt 7.1.1.1 Ưu điểm o Flutter : Hiểu cách hoạt động, cách lập trình sử dụng widget theo hình cho hợp lý o NodeJS : Hiểu cách khởi tạo server cho app, cách thức hoạt động, gọi hàm, dùng hàm bất đồng nhằm lấy kết 87 trả từ server cho app, ngồi cịn biết thêm kiến thức socketio (phục vụ cho mục đích tạo phòng chat ghép cặp), jwt (xác thực người dùng đăng nhập, đăng ký) o MongoDB : Hiểu cách hoạt động, cấu trúc CSDL NoSQL o Phần BackEnd FrontEnd tách biệt, dễ sử dụng, dễ hiểu o Đặt chức đề 7.1.1.2 Khuyết điểm o Vẫn chưa thể áp dụng BloC cấu trúc folder, nên đơi chỗ code khó nhìn o Chưa thể cấu hình thuật tốn ghép đơi cụ thể o Có vài hạn chế với việc phải thêm bạn bè UID o Khơng đủ thời gian tìm hiểu sâu, nên có số chức chưa hoàn thiện mục tiêu dề : Phát nhạc qua URL mạng mà người dùng tự thêm, số phần cài đặt bật tắt thông báo,… o Tối ưu code chưa tốt nên tốc độ phản hồi chưa đạt hiệu cao o Giao diện chưa thân thiện xét theo chuẩn thiết kế giao diện 7.1.2 - Điểm đặc sắc đề tài Có hướng phát triển cụ thể, hồn tồn khả thi cho đồ án 1, 2, khoá luận tốt nghiệp - Kết nối hai người lạ với mà chẳng cần thông qua bước kết bạn hay đề xuất - Có tính report tài khoản với nhau, hướng tới quản lý app thông qua website cho admin - Kết hợp nghe nhạc nhắn tin 88 7.2 Hướng phát triển - Cải thiện UI tốc độ phản hồi Sever, đồng thời tiếp nhận Bug, phản hồi, từ hồn thiện ứng dụng đưa vào sử dụng thực tiễn, hoạt động Store hay - Xây dựng website quản lý cho Admin - Tìm hiểu thuật tốn ghép cặp Tinder/LitMatch nhằm cải thiện độ tương thích ghép cặp khơng cịn ngẫu nhiên - Phát triển thêm vài tính gọi thường, gọi video, gửi hội thoại, …… - Lớn hướng đến mạng xã hội ẩn danh đa tảng 89 Chương TÀI LIỆU THAM KHẢO Theo chuẩn IEEE 1/ Flutter Documentary : Flutter documentation | Flutter Tham khảo code, widget, Flutter 2/ The Net Ninja Flutter : (2) The Net Ninja - YouTube Tham khảo video widget Flutter 3/ The Flutter Way : (2) The Flutter Way - YouTube Tham khảo số cách lập trình, thiết kế giao diện 4/ Flutter widget of week Playlist : (2) flutter widget of the week - YouTube Xem xét widget sử dụng đồ án 5/ SocketIO (tham khảo) : (2) Code app chat xem giá Bitcoin realtime 15 phút với ExpressJS Socket.io - YouTube Mở kết nối cho sever chat 6/ JWT : (2) JWT (JSON Web Token) gì? Hướng dẫn tạo JWT Auth NodeJS - YouTube Định danh, xác thực người dùng 7/ Wikipedia – Flutter : Flutter (software) - Wikipedia Lịch sử phát triển Flutter 8/Flutter Tutorial : Bài 1: Giới thiệu Flutter - Học lập trình Flutter (vncoder.vn) Học Flutter 90 ... 86 Chương PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG 87 6.1 Môi trường phát triển ứng dụng 87 6.2 Môi trường triển khai ứng dụng 87 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 87 7.1... MỀM TRẦN THÀNH TRUNG – 19522436 NGUYỄN QUỐC TRUNG – 19522429 ĐỒ ÁN TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG TRÒ CHUYỆN ẨN DANH LEARN ABOUT FLUTTER & BUILDING A ANONYMOUS SOCIAL CHAT APP KHOA CÔNG NGHỆ... Thêm vào đó, với thời này, ứng dụng nhắn tin phát triển rộng rãi, mạnh mẽ, kết nối người xa lạ hay gần gũi đến Đồng thời, Flutter lại ưa chuộng phát triển ngày Thế nên, chúng em định phát triển ứng