Xây dựng ứng dụng mạng xã hội trên nền tảng di động

Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA KỸ THUẬT - CÔNG NGHỆ ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI TRÊN NỀN TẢNG DI ĐỘNG Trình độ đào tạo Ngành Chuyên ngành :Đại học quy :Cơng nghệ thơng tin :Lập trình Ứng dụng di động & Game Giảng viên hướng dẫn :TS Phan Ngọc Hoàng Sinh viên thực :Nguyễn Tất Tiến Mã số sinh viên :19033948 Lớp :DH19LT Vũng Tàu, ngày 08 tháng năm 2023 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu LỜI NĨI ĐẦU Trong q trình gần năm học tập Trường Đại học Bà Rịa – Vũng Tàu, trải qua nhiều môn học, thân gặp gỡ nhận nhiều giúp đỡ quý giá từ thầy Đó khơng kiến thức chun mơn, mà cịn kiến thức bên lề, kỹ mà sinh viên cần hành trang vào đời Tơi xin gửi lời tri ân chân thành tới quý thầy cô Trường Đại học Bà Rịa – Vũng Tàu đặc biệt quý thầy cô Khoa Công nghệ thông tin nói riêng phần hành trình tìm kiếm tri thức tơi Qua đó, tơi xin gửi lời cảm ơn sâu sắc đến Thầy, Tiến Sĩ Phan Ngọc Hồng, người hướng dẫn tơi trình xây dựng sản phẩm tốt nghiệp Cảm ơn thầy dành nhiều thời gian tận tình bảo, định hướng cho thân tơi hoàn thành trọn vẹn luận văn tốt nghiệp Xin kính chúc thầy nhiều sức khỏe, giữ lửa đam mê để dẫn dắt hệ sinh viên nối bước thành công Chúc Trường Đại học Bà Rịa – Vũng Tàu điểm đến hàng đầu hệ trẻ sau này, môi trường để dẫn dắt bạn trở thành công dân hàng đầu tương lai Với hạn chế thời gian kinh nghiệm thực tế, sản phẩm cịn thiếu sót khó tránh khỏi Kính mong nhận góp ý từ q thầy để tơi có hội hồn thiện tốt cho sản phẩm tích lũy thêm kinh nghiệm sau Xin chân thành cảm ơn! Thành phố Vũng Tàu, ngày 01 tháng 12 năm 2021 Sinh viên thực Nguyễn Tất Tiến Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Vũng Tàu, ngày … tháng … năm 20… Người hướng dẫn TS Phan Ngọc Hoàng Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu Menu LỜI NÓI ĐẦU DANH MỤC CÁC TỪ VIẾT TẮT/TỪ TIẾNG ANH DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH CHƯƠNG GIỚI THIỆU ĐỀ TÀI 1.1 Đặt vấn đề 1.2 Các công nghệ lựa chọn 1.2.1 Frontend - Flutter (Cross-platform UI framework) 1.2.2 Backend - Firebase CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Khảo sát sơ 2.1.1 Các đối tượng sử dụng 2.1.2 Các dòng thiết bị 2.2 Phân tích Hệ thống 2.2.1 Các tác nhân 2.2.2 Usecase tổng quát 2.2.3 Các Usecase chi tiết 10 2.3 Thiết kế Hệ thống 40 2.3.1 Thiết kế Giao diện 40 2.3.2 Thiết kế Cơ sở Dữ liệu 41 CHƯƠNG XÂY DỰNG PHẦN MỀM 49 3.1 Cấu trúc dự án 49 3.2 Các hình chức 50 3.2.1 Đăng ký 50 3.2.2 Đăng nhập 51 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu 3.2.3 Chức Quản lý hồ sơ cá nhân 52 3.2.4 Quản lý viết 55 3.2.5 Tương Tác viết/ video ngắn 60 3.2.6 Quản lý bạn bè 63 3.2.7 Nhắn tin 65 3.2.8 Quản lý nhóm chat 67 3.2.9 Quản lý thành viên nhóm chat 71 3.2.10 Giao diện xem video ngắn 74 3.2.11 Giao diện thông báo 75 CHƯƠNG KẾT LUẬN 77 4.1 Kết đạt 77 4.2 Hạn chế tồn 77 4.3 Hướng phát triển tương lai 78 TÀI LIỆU THAM KHẢO 79 PHỤ LỤC 80 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu DANH MỤC CÁC TỪ VIẾT TẮT/TỪ TIẾNG ANH STT Các kí hiệu/Từ CSDL DB Frontend Backend Authentication Authorization Token Đầy đủ Cơ sở liệu Database Ý nghĩa Nơi lưu trữ thông tin Nơi lưu trữ thông tin Giao diện người dùng Máy chủ/Phần xử lý Logic Xác minh người dùng Phân quyền người dùng Chuỗi thông tin mã hóa Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu DANH MỤC BẢNG BIỂU Bảng Đặc tả chức đăng ký 10 Bảng Đặc tả chức đăng nhập 13 Bảng Đặc tả chức nhắn tin 15 Bảng Đặc tả chức xem thông báo bảng tin 18 Bảng Đặc tả chức quản lý hồ sơ cá nhân 20 Bảng Đặc tả chức quản lý viết 22 Bảng Đặc tả chức quản lý bạn bè 27 Bảng Đặc tả chức quản lý nhóm chat 29 Bảng Đặc tả chức quản lý thành viên nhóm chat 35 Bảng 10 Đặc tả chức tương tác viết video ngắn 38 Bảng 11 Bảng sở liệu người dùng 44 Bảng 12 Bảng sở liệu viết 44 Bảng 13 Bảng sở liệu video ngắn 45 Bảng 14 Bảng sở liệu bạn bè 45 Bảng 15 Bảng sở liệu nhắn tin nhóm 45 Bảng 16 Bảng sở liệu nhắn tin cá nhân 46 Bảng 17 Bảng sở liệu nhắn tin 46 Bảng 18 Bảng sở liệu thành viên nhóm chat 47 Bảng 19 Bảng sở liệu gọi video 47 Bảng 20 Bảng sở liệu yêu thích viết video 47 Bảng 21 Bảng sở liệu bình luận viết video 48 Bảng 22 Bảng sở liệu thông báo 48 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu DANH MỤC HÌNH ẢNH Hình 1.1 Trang chủ https://flutter.dev Hình 1.2 Các ứng dụng tiếng xây dựng Flutter Hình 2.1 Các phiên Android hỗ trợ Hình 2.2 Mức phổ biến phiên Android (Tháng 10/2021) Hình 2.3 Mức phổ biến phiên iOS (Tháng 10/2021) Hình 2.4 Biểu đổ UseCase tổng quát Hình 2.5 Biểu đồ Usecase chức Đăng ký 12 Hình 2.6 Biểu đồ Activity chức Đăng ký 12 Hình 2.7 Biểu đồ Usecase chức Đăng nhập 14 Hình 2.8 Biểu đồ Activity chức Đăng nhập 15 Hình 2.9 Biểu đồ Usecase chức Nhắn tin 17 Hình 2.10 Biểu đồ Activity chức Nhắn tin 17 Hình 2.11 Biểu đồ Usecase chức Xem thơng báo 19 Hình 2.12 Biểu đồ Activity chức Xem thông báo 19 Hình 2.13 Biểu đồ Usecase chức Quản lý thông tin cá nhân 21 Hình 2.14 Biểu đồ Activity chức Xem thơng tin cá nhân 21 Hình 2.15 Biểu đồ Activity chức Chỉnh sửa thông tin cá nhân 22 Hình 2.16 Biểu đồ UseCase chức Quản lý viết 24 Hình 2.17 Biểu đồ Activity chức Thêm viết 24 Hình 2.18 Biểu đồ Activity chức Chỉnh sửa viết 25 Hình 2.19 Biểu đồ Activity chức Xóa viết 25 Hình 2.20 Biểu đồ UseCase chức Quản lý bạn bè 26 Hình 2.21 Biểu đồ Activity chức Kết bạn 28 Hình 2.22 Biểu đồ Activity chức Xóa bạn 29 Hình 2.23 Biểu đồ UserCase chức Quản lý nhóm chat 31 Hình 2.24 Biểu đồ Activity chức Tạo nhóm chat 32 Hình 2.25 Biểu đồ Activity chức Sữa nhóm chat 33 Hình 2.26 Biểu đồ Activity chức Xóa nhóm chat 34 Hình 2.27 Biểu đồ UserCase chức Quản lý thành viên nhóm 36 Hình 2.28 Biểu đồ Activity chức Thêm thành viên nhóm 37 Hình 2.29 Biểu đồ Activity chức Xóa thành viên nhóm 37 Hình 2.30 Biểu đồ UserCase chức tương tác viết video ngắn 39 Hình 2.31 Biểu đồ Activity chức Like viết video ngắn 39 Hình 2.32 Biểu đồ UserCase chức Comment viết video ngắn 40 Hình 2.33 Ví dụ Security Rule – Chặn cập nhậ trường định 42 Hình 2.34 Biểu đồ ERD bảng CSDL 43 Hình 3.1 Cấu trúc thư mục dự án 49 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu Hình 3.2 Màn hình đăng ký 51 Hình 3.3 Màn hình đăng nhập 52 Hình 3.4 Màn hình ứng dụng 53 Hình 3.5 Màn hình hồ sơ cá nhân 53 Hình 3.6.Màn hình sửa thông tin cá nhân 54 Hình 3.7 Màn hình hồ sơ cá nhân 54 Hình 3.8 Màn hình ứng dụng 55 Hình 3.9 Màn hình tạo nội dung viết 56 Hình 3.10 Màn hình ứng dụng 57 Hình 3.11 Màn hình ứng dụng 57 Hình 3.12 Màn hình chỉnh sửa viết 58 Hình 3.13 Màn hình hồ sơ cá nhân 59 Hình 3.14 Màn hinh hồ sơ cá nhân 59 Hình 3.15 Màn hình ứng dụng 60 Hình 3.16 Màn hình comment 61 Hình 3.17 Màn hình video 62 Hình 3.18 Màn hình video comment 63 Hình 3.19 Màn hình kết bạn 64 Hình 3.20 Màn hình kết bạn 64 Hình 3.21 Màn hình cá nhân danh sách bạn bè 65 Hình 3.22 Màn hình danh sách trị chuyện 66 Hình 3.23 Màn hình nhắn tin 66 Hình 3.24 Màn hình nhắn tin 67 Hình 3.25 Mã tài sản danh sách trị chuyện 68 Hình 3.26 Màn hình nhóm chat 69 Hình 3.27 Màn hình nhóm chat 70 Hình 3.28 Màn hình tin nhắn nhóm chat 70 Hình 3.29 Màn hình sửa nhóm chat 68 Hình 3.30 Màn hình hiển thị xóa nhóm chat 71 Hình 3.31 Màn hình hiển thị viên nhóm chat 72 Hình 3.32 Màn hình thêm thành viên nhóm chat 73 Hình 3.33 Màn hình hiển thị thành viên nhóm chat 74 Hình 3.34 Màn hình hiển thị video ngắn 75 Hình 3.35 Màn hình hiển thị thông báo 76 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu String? userId; int? type; String?objectType; DateTime? createDate; Like({this.id,this.objectId,this.userId,this.type,this.objectType,this.createDate}); Like.fromJson(Map json) : id = json['Id'], objectId = json['ObjectId'], userId = json['UserId'], type = json['Type'], objectType = json["ObjectType"], createDate = json['CreateDate'].toDate(); Map toJson() => { 'Id': id, 'ObjectId': objectId, 'UserId':userId, "Type":type, "ObjectType":objectType, 'CreateDate':createDate }; } Code model comment class CommentObject{ String? id; String? postId; String? userId; String? parentId; 88 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu String? content; String? receiver; String? type; DateTime? createDate; CommentObject({this.id,this.postId,this.userId,this.parentId,this.content,this.rec eiver,this.type,this.createDate}); CommentObject.fromJson(Map json) : id = json['Id'], postId = json['ObjectId'], userId = json['UserId'], parentId = json['ParentId'], receiver = json['Receiver'], content = json['Content'], type = json['Type'], createDate = json['CreateDate'].toDate(); Map toJson() => { 'Id': id, 'ObjectId': postId, 'UserId':userId, 'ParentId':parentId, "Receiver":receiver, 'Content':content, "Type":type, "CreateDate":createDate, }; } Code model kết bạn class FriendShip{ 89 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu String? id; String? requester; String? addressee; bool? status; FriendShip({this.id,this.addressee,this.requester,this.status}); FriendShip.fromJson(Map json) : id = json['Id'], requester = json['Requester'], addressee = json['Addressee'], status = json['Status']; Map toJson() => { 'Id': id, 'Requester': requester, 'Addressee':addressee, 'Status':status, }; } class OtherShip{ User? user; int? status; OtherShip({this.user,this.status}); } 10 Code model video ngắn class ShortVideo{ String? id; String? content; String? videoURL; String? createById; 90 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu String? createByName; String? createByImage; int? commentCount; int? likeCount; DateTime? createDate; DateTime? updatedDate; ShortVideo({this.id,this.content,this.videoURL,this.commentCount,this.likeCou nt,this.createById,this.createByName,this.createByImage,this.createDate,this.up datedDate}); ShortVideo.fromJson(Map json) : id = json['Id'], content = json['Content'], videoURL = json['VideoURL'], likeCount = json['LikeCount'], commentCount = json['CommentCount'], createById = json['CreateById'], createByName = json['CreateByName'], createByImage = json['CreateByImage'], createDate = json['CreateDate'].toDate(), updatedDate = json['UpdateDate'].toDate(); Map toJson() => { 'Id': id, 'Content': content, 'VideoURL':videoURL, 'LikeCount':likeCount, 'CommentCount':commentCount, 'CreateBy':createById, 91 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu 'CreateByName':createByName, 'CreateByImage':createByImage, "CreateDate":createDate, 'UpdateDate':updatedDate }; } 11 Code model thông báo class NotificationObject{ String? id; String? content; String? receiver; String? idObject; String? sender; DateTime? createDate; NotificationObject({this.id,this.content,this.receiver,this.idObject,this.sender,thi s.createDate}); NotificationObject.fromJson(Map json) : id = json['Id'], content = json['Content'], receiver = json['Receiver'], idObject = json['ObjectId'], sender = json['Sender'], createDate = json['CreateDate'].toDate(); Map toJson() => { 'Id': id, 'Content': content, 'Receiver':receiver, 'Sender':sender, 92 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu 'ObjectId':idObject, "CreateDate":createDate, }; } 12 Code xử lý việc đăng ký tài khoản Future SignUp() async{ if(controllerEmail.text!=""&&controllerFirstName.text!=""&&controllerLastNa me.text!=""&&controllerConfirmPassword.text!=""&&controllerPassword.text! =""){ if(EmailValidator.validate(controllerEmail.text)){ if(controllerPassword.text==controllerConfirmPassword.text){ if(await checkUserByEmail(controllerEmail.text)){ Fluttertoast.showToast(msg: "Email sử dụng!"); } else{ try{ User user = User( id: usercreate.user!.uid,firstName:controllerFirstName.text,lastName: controllerLastName.text,email:controllerEmail.text,password: controllerPassword.text,createDate:DateTime.now(),phoneNumber: "",image: "https://firebasestorage.googleapis.com/v0/b/projectcb943.appspot.com/o/image%2FlogoPreson%2FUnknown_person.jpg?alt=medi a&token=061d880a-9464-41e4-af7e-c259aedcaef7",status: false); CreateData("User",user); } catch(e){ Fluttertoast.showToast(msg: "Email không tồn tại!"); this.dispose(); } 93 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu } } else{ Fluttertoast.showToast(msg: "Vui lịng nhập lại mật xác!"); } } else{ Fluttertoast.showToast(msg: "Vui lòng nhập định dạng email!"); } } else{ Fluttertoast.showToast(msg: "Vui lịng nhập đầy đủ thơng tin!"); } } 13 Code xử lý việc like viết likePost(Post post,int index) async{ Like getlike = await checkLike(auth.FirebaseAuth.instance.currentUser!.uid,post.id!); // ignore: unnecessary_null_comparison if(getlike.id!=null){ getlike.type = index; updateLikePost(getlike); setState(() { ((posts.firstWhere((element) => (element["post"] as Post).id==post.id)["listUserLikePost"]) as List).firstWhere((element) => element.userId==auth.FirebaseAuth.instance.currentUser!.uid).type=index; 94 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu }); } else{ Like like = Like(id: "",objectId: post.id,userId: auth.FirebaseAuth.instance.currentUser!.uid,type: index,objectType: "post",createDate: DateTime.now()); post.likeCount=post.likeCount! + 1; updatePost(post); CreateNewData("Like", like); if(post.createBy!=auth.FirebaseAuth.instance.currentUser!.uid){ User user= await getUserById(auth.FirebaseAuth.instance.currentUser!.uid); NotificationObject notification = NotificationObject(id: "",content: "${user.firstName} ${user.lastName} thích viết bạn",receiver: post.createBy,createDate: DateTime.now(),idObject: post.id,sender: user.id); CreateNewData("Notification", notification); User userPost = await getUserById(post.createBy!); PushNotification.sendPushNotification(User(),"${user.firstName} ${user.lastName} thích viết bạn",userPost.token!); } setState(() { ((posts.firstWhere((element) => (element["post"] as Post).id==post.id)["post"]) as Post).likeCount! + 1; ((posts.firstWhere((element) => (element["post"] as Post).id==post.id)["listUserLikePost"]) as List).add(like); }); } 95 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu } 14 Code xử lý việc comment viết void commentPost(String parentId,User userReceiver) async{ if(commentController.text!=""){ // ignore: unnecessary_null_comparison String userid = userReceiver != null ? userReceiver.id! : ""; CommentObject comment = CommentObject(id: "",userId: auth.FirebaseAuth.instance.currentUser!.uid,postId:(jsonPost!["post"] as Post).id,parentId: parentId,receiver: userid,content: commentController.text,type: "post", createDate: DateTime.now()); CreateNewData("Comment", comment); if(parentId!=""){ ((jsonListComment!.firstWhere((element) => (element["parentComment"] as CommentObject).id==parentId))["jsonSubComment"] as List).add({"subComment":comment,"userSubComment" :user}); NotificationObject notification = NotificationObject(id: "",content: "${user.firstName} ${user.lastName} nhắc bạn viết bạn quan tâm.",receiver: (jsonPost!["post"] as Post).createBy,createDate: DateTime.now(),idObject: (jsonPost!["post"] as Post).id,sender: user.id); CreateNewData("Notification", notification); PushNotification.sendPushNotification(User(),"${user.firstName} ${user.lastName} bình luận viết bạn.",userReceiver.token!); } else{ jsonListComment!.insert(0,{"parentComment":comment,"userComment":user,"j sonSubComment":[]}); if((jsonPost!["post"] as Post).createBy != auth.FirebaseAuth.instance.currentUser!.uid){ NotificationObject notification = NotificationObject(id: "",content: "${user.firstName} ${user.lastName} bình luận viết 96 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu bạn.",receiver: (jsonPost!["post"] as Post).createBy,createDate: DateTime.now(),idObject: (jsonPost!["post"] as Post).id,sender: user.id); CreateNewData("Notification", notification); PushNotification.sendPushNotification(User(),"${user.firstName} ${user.lastName} bình luận viết bạn.",userReceiver.token!); } } (jsonPost!["post"] as Post).commentCount = (jsonPost!["post"] as Post).commentCount! + 1; updatePost((jsonPost!["post"] as Post)); setState(() { jsonListComment; jsonPost; }); } } 15 Code xử lý lấy danh sách trò chuyện RealTime title: StreamBuilder( stream: _firestore.collection("User").doc(userMap.id).snapshots(), builder: (context, snapshot) { if (snapshot.data != null) { return Container( child: Column( children: [ // ignore: prefer_interpolation_to_compose_strings Container( width: 120, 97 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu child: RichText( textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, strutStyle: const StrutStyle(fontSize: 22.0), text: TextSpan( text: "${userMap.firstName!} ${userMap.lastName!}", style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold) ),)), Text( (snapshot.data!['Status'] as bool) ==true?"Online":"Offline", style: TextStyle(fontSize: 14), ), ], ), ); } else { return Container(); } }, ), ), body: SingleChildScrollView( child: Column( children: [ Container( height: size.height / 1.35, width: size.width, child: StreamBuilder( 98 Đồ án tốt nghiệp khóa 2019-2023 Trường Đại học Bà Rịa- Vũng Tàu stream: _firestore collection('UserChat') doc(chatRoomId) collection('Message') orderBy("CreateDate", descending: true).limit(30) snapshots(), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.data != null){ var listTime = []; for(int i = ;i