Thiết kế và xây dựng mạng xã hội nhắn tin

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN THIẾT KẾ VÀ XÂY DỰNG MẠNG XÃ HỘI NHẮN TIN GVHD: PGS.TS HOÀNG VĂN DŨNG SVTH : TRẦN NHẬT HÙNG TRẦN HỮU THANH SKL010936 Tp Hồ Chí Minh, tháng 5/2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO BÁO CÁO ĐỒ ÁN KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: THIẾT KẾ VÀ XÂY DỰNG MẠNG XÃ HỘI NHẮN TIN GVHD: PGS.TS Hoàng Văn Dũng SVTH: Trần Nhật Hùng 19110213 Trần Hữu Thanh 19110007 Tp HCM, tháng năm 2023 LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Đào Tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh đó, nhóm xin gửi lời cảm ơn chân thành đến thầy Hồng Văn Dũng, người tận tình bảo hướng dẫn nhóm thực đề tài Mặc dù nhóm cố gắng để hồn thành cách tốt nhất, thời gian hạn hẹp, khả cịn hạn chế nên khó tránh khỏi việc thiếu sót báo cáo Nhóm mong nhận thơng cảm, góp ý đóng góp thầy để đề tài hồn thiện hơn, để phát triển phục vụ cho tương lai Nhóm xin chân thành cảm ơn Nhóm thực Trần Nhật Hùng – 19110213 Trần Hữu Thanh – 19110007 MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH SÁCH HÌNH ẢNH DANH SÁCH BẢNG KẾ HOẠCH THỰC HIỆN CHƯƠNG 1: PHẦN MỞ ĐẦU 11 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 11 1.2 ĐỐI TƯỢNG NGHIÊN CỨU 11 1.3 PHẠM VI NGHIÊN CỨU 11 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 13 2.1 MERN [3] .13 2.2 MÃ OTP [6] 13 2.3 JWT & COOKIES [5] 13 2.4 REDUX & REDUX TOOLKIT [8] 14 2.5 SOCKET.IO & SOCKET.IO-CLIENT [7] .14 2.6 CLOUDINARY [9] 15 2.7 VIDEO-SDK [10] 15 CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 17 3.1 KHẢO SÁT HIỆN TRẠNG 17 3.1.1 Messenger 17 3.1.2 Zalo 17 3.2 PHÂN TÍCH YÊU CẦU 17 3.2.1 Yêu cầu chức 17 3.2.2 Yêu cầu phi chức 18 3.3 MƠ HÌNH HĨA U CẦU 19 3.3.1 Lược đồ Use Cases 19 3.3.2 Đặc tả Use Cases 20 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 33 4.1 LƯỢC ĐỒ LỚP 33 4.2 LƯỢC ĐỒ TUẦN TỰ 33 4.3 CHI TIẾT BẢNG DỮ LIỆU 42 4.3.1 File Model 42 4.3.2 Friend Model 42 4.3.3 Message Model 43 4.3.4 Notification Model 44 4.3.5 Room Model 44 4.3.6 User Model 45 4.4 GIAO DIỆN HỆ THỐNG 45 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 71 5.1 YÊU CẦU TÀI NGUYÊN .71 5.2 CÀI ĐẶT ỨNG DỤNG 71 5.3 KIỂM THỬ 72 5.3.1 Phương pháp kiểm thử 72 5.3.2 Kế hoạch kiểm thử 73 5.3.3 Kết kiểm thử 74 CHƯƠNG 6: TỔNG KẾT 79 6.1 KẾT QUẢ ĐẠT ĐƯỢC 79 6.2 ƯU ĐIỂM .79 6.3 NHƯỢC ĐIỂM 79 6.4 HƯỚNG PHÁT TRIỂN 79 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 80 DANH SÁCH HÌNH ẢNH Hình Lược đồ Use Cases 19 Hình Lược đồ lớp 33 Hình Lược đồ ĐĂNG NHẬP 33 Hình Lược đồ ĐĂNG KÝ 34 Hình Lược đồ TẠO NHÓM CHAT 34 Hình Lược đồ TÌM KIẾM NGƯỜI DÙNG 35 Hình Lược đồ XEM DANH SÁCH BẠN BÈ 35 Hình Lược đồ XEM THÔNG TIN CÁ NHÂN 35 Hình Lược đồ CHỈNH SỬA THÔNG TIN CÁ NHÂN 36 Hình 10 Lược đồ ĐỔI MẬT KHẨU 36 Hình 11 Lược đồ ĐỒNG Ý/TỪ CHỐI KẾT BẠN 36 Hình 12 Lược đồ THÊM BẠN BÈ 37 Hình 13 Lược đồ HỦY KẾT BẠN 37 Hình 14 Lược đồ NHẮN TIN 38 Hình 15 Lược đồ GỬI TỆP TIN 38 Hình 16 Lược đồ RỜI NHÓM CHAT 39 Hình 17 Lược đồ THU HỒI TIN NHẮN 39 Hình 18 Lược đồ XÓA TIN NHẮN 40 Hình 19 Lược đồ TRẢ LỜI TIN NHẮN .40 Hình 20 Lược đồ ĐỔI NGÔN NGỮ 41 Hình 21 Lược đồ MENTION 41 Hình 22 Lược đồ GỌI ĐIỆN 42 Hình 23 Giao diện ĐĂNG NHẬP 45 Hình 24 Giao diện ĐĂNG KÝ 46 Hình 25 Giao diện TRANG CHỦ 47 Hình 26 Giao diện TÙY CHỌN PHỊNG CHAT 49 Hình 27 Giao diện ĐỔI NICK NAME 50 Hình 28 Giao diện TÌM KIẾM 51 Hình 29 Giao diện PREVIEW FILE, HÌNH ẢNH 52 Hình 30 Giao diện CHỌN BIỂU CẢM 52 Hình 31 Giao diện INPUT-TYPING 53 Hình 32 Giao diện HIỂN THỊ FILE ĐÃ GỬI 54 Hình 33 Giao diện HIỂN THỊ HÌNH ĐÃ GỬI 55 Hình 34 Giao diện CHI TIẾT HÌNH ẢNH 56 Hình 35 Giao diện TIN NHẮN BỊ THU HỒI 57 Hình 36 Giao diện THƠNG TIN NGƯỜI DÙNG 57 Hình 37 Giao diện CHỈNH SỬA THÔNG TIN 58 Hình 38 Giao diện THƠNG BÁO 59 Hình 39 Giao diện XỬ LÝ CẮT ẢNH 60 Hình 40 Giao diện TẠO NHÓM CHAT 62 Hình 41 Giao diện HIỂN THỊ THÀNH VIÊN NHĨM .63 Hình 42 Giao diện THÊM THÀNH VIÊN NHÓM 64 Hình 43 Giao diện BẠN BÈ 65 Hình 44 Giao diện CÀI ĐẶT CHUNG 66 Hình 45 Giao diện CÀI ĐẶT BẢO MẬT 66 Hình 46 Giao diện PHẢN HỒI 68 Hình 47 Giao diện ĐỂ CẬP .68 Hình 48 Giao diện THƠNG BÁO CUỘC GỌI 69 Hình 49 Giao diện GỌI VIDEO/AUDIO 70 Hình 59 Giao diện mã nguồn kiểm thử hộp trắng 74 Hình 51 Giao diện đồ thị dịng điều khiển 75 DANH SÁCH BẢNG Bảng Kế hoạch thực 10 Bảng Yêu cầu CHỨC NĂNG 18 Bảng Yêu cầu PHI CHỨC NĂNG 19 Bảng Kịch ĐĂNG NHẬP 20 Bảng Kịch ĐĂNG KÝ 21 Bảng Kịch TẠO NHÓM 22 Bảng Kịch TÌM KIẾM USER 22 Bảng Kịch DANH SÁCH BẠN BÈ 23 Bảng Kịch XEM THÔNG TIN CÁ NHÂN .23 Bảng 10 Kịch CHỈNH SỬA THÔNG TIN CÁ NHÂN 24 Bảng 11 Kịch ĐỔI MẬT KHẨU 25 Bảng 12 Kịch ĐỒNG Ý/TỪ CHỐI KẾT BẠN 25 Bảng 13 Kịch THÊM BẠN 26 Bảng 14 Kịch XÓA BẠN 27 Bảng 15 Kịch NHẮN TIN 27 Bảng 16 Kịch GỬI HÌNH ẢNH, FILE 28 Bảng 17 Kịch RỜI NHÓM 29 Bảng 18 Kịch THU HỒI TIN NHẮN 29 Bảng 19 Kịch XÓA TIN NHẮN 30 Bảng 20 Kịch PHẢN HỒI TIN NHẮN 31 Bảng 21 Kịch ĐỔI NGÔN NGỮ 31 Bảng 22 Kịch ĐỀ CẬP 32 Bảng 23 Kịch GỌI VIDEO/AUDIO 32 Bảng 24 Mô tả FILE MODEL 42 Bảng 25 Mô tả FRIEND MODEL .43 Bảng 26 Mô tả MESSAGE MODEL 43 Bảng 27 Mô tả NOTIFICATION MODEL 44 Bảng 28 Mô tả ROOM MODEL 44 Bảng 29 Mô tả USER MODEL 45 Bảng 30 Mô tả giao diện ĐĂNG KÝ/ĐĂNG NHẬP 47 Bảng 31 Mô tả giao diện TRANG CHỦ 48 Bảng 32 Mô tả giao diện TÙY CHỌN PHÒNG CHAT 50 Bảng 33 Mô tả giao diện ĐỔI NICK NAME 50 Bảng 34 Mơ tả giao diện TÌM KIẾM 52 Bảng 35 Mô tả giao diện PREVIEW FILE, HÌNH ẢNH 52 Bảng 36 Mô tả giao diện CHỌN BIỂU CẢM 53 Bảng 37 Mô tả giao diện INPUT-TYPING 53 Bảng 38 Mô tả giao diện CHI TIẾT HÌNH ẢNH 56 Bảng 39 Mô tả giao diện THÔNG TIN NGƯỜI DÙNG 57 Bảng 40 Bảng mô tả giao diện chỉnh sửa thông tin 59 Bảng 41 Mơ tả giao diện THƠNG BÁO 59 Bảng 42 Mô tả giao diện XỬ LÝ CẮT ẢNH 61 Bảng 43 Mô tả giao diện TẠO NHÓM, BẠN BÈ, THÊM/XÓA THÀNH VIÊN NHÓM 66 Bảng 44 Mô tả giao diện CÀI ĐẶT 67 Bảng 45 Mô tả giao diện GỌI, NHẬN CUỘC GỌI 69 Bảng 46 Mô tả giao diện GỌI AUDIO/VIDEO 70 Bảng 47 Yêu cầu phần cứng 71 Bảng 48 Yêu cầu phần mềm 71 Bảng 49 Kế hoạch kiểm thử 74 Bảng 50 Vòng đời biến 77 Bảng 51 Test case nhập tin nhắn dài input chuyển thành scroll 77 Bảng 52 Test case kiểm thử Shift + Enter 78 Bảng 53 Test case kiểm thử giao diện sidebar 78 KẾ HOẠCH THỰC HIỆN Tuần Ngày 1+2 +3 19/02 11/03 Nhiệm vụ Tìm hiểu MERN Tìm hiểu Cloudinary, SocketIO, JWT, Thành viên đảm nhiệm - Trần Hữu Kết dự kiến - Vận dụng Thanh: 1, 2, 3, kiến thức tìm ,5 hiểu để setup dự - Trần Nhật Tailwind CSS, Hùng: 1, 2, 3, Video-SDK 4, Khảo sát trạng án - Hoàn thành Use Case lược đồ Thiết kế Use Cases Thiết kế lược đồ 4+5 +6 12/03 01/04 Thiết kế giao diện Cài đặt giao diện Thiết kế Model Cài đặt Database - Trần Hữu Thanh: 2, 3, - Trần Nhật Hùng: 1, 3, 4, 5 Cài đặt APIs - Hệ thống có giao diện với data mẫu - Hoàn thành Model cần thiết - Hoàn thành APIs trả kết quả, liệu cần thiết 7+8 02/04 15/04 Tích hợp Socket.IO - Trần Hữu Cài đặt kết nối giao Thanh: diện với API - Trần Nhật - Có tương tác thời gian thực người dùng Hùng: 9+ 10 + 11 16/04 06/05 Tính nâng cao trải nghiệm người dùng: Typing, Mention, Reply, … - Trần Hữu Thanh: 2, - Trần Nhật Hùng: - Có thêm chức tăng trải nghiệm - Hồn thiện tính