Xây dựng ứng dụng chat online sử dụng reactjs

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 CÔNG NGHỆ THÔNG TIN XÂY DỰNG ỨNG DỤNG CHAT ONLINE SỬ DỤNG REACTJS GVHD: TS LÊ VĂN VINH SVTH : DIỆP TẤN LUÂN TRẦN DUY PHƯƠNG S K L0 1 Tp Hồ Chí Minh, tháng 07/2023 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM -🙞🙜🕮🙞🙜 - KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG CHAT ONLINE SỬ DỤNG REACTJS Giảng viên hướng dẫn TS LÊ VĂN VINH Sinh viên thực DIỆP TẤN LUÂN TRẦN DUY PHƯƠNG 19110055 19110439 Thành phố Hồ Chí Minh, tháng năm 2023 TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THƠNG TIN *** CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : Diệp Tấn Luân MSSV 1: 19110055 Họ tên Sinh viên : Trần Duy Phương MSSV 2: 19110439 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng Chat Online sử dụng ReactJS Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực Ưu điểm Khuyết điểm Đề nghị cho bảo vệ hay không Đánh giá loại Điểm TP Hồ Chí Minh, ngày … tháng … năm 2023 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN *** CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : Diệp Tấn Luân MSSV 1: 19110055 Họ tên Sinh viên : Trần Duy Phương MSSV 2: 19110439 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng Chat Online sử dụng ReactJS Họ tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng NHẬN XÉT Về nội dung đề tài & khối lượng thực Ưu điểm Khuyết điểm 10 Đề nghị cho bảo vệ hay không 11 Đánh giá loại 12 Điểm TP Hồ Chí Minh, ngày … tháng … năm 2023 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS LỜI CẢM ƠN Lời đầu tiên, nhóm xin phép gửi lời cảm ơn chân thành đến với Khoa Công nghệ Thông tin – 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 chúng em trau dồi, học tập phát triển tảng kiến thức vững để thực đề tài Bên cạnh đó, nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn chân thành sâu sắc Thầy tận tâm hướng dẫn nhiệt tình đưa góp ý q báu cho nhóm chúng em suốt q trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nhiệm yêu cầu thực tế ngồi xã hội thơng qua việc học trường thực tập công ty Tập thể thầy cô Khoa Công nghệ Thông tin đặc biệt thầy Lê Văn Vinh đem đến cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thúc chúng em hoàn thành đề tài Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hoàn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy (cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm thực Diệp Tấn Luân – 19110055 Trần Duy Phương – 19110439 Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THƠNG TIN *** CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên : Diệp Tấn Luân MSSV 1: 19110055 Họ tên Sinh viên : Trần Duy Phương MSSV 2: 19110439 Thời gian làm luận văn: từ ngày 01/03/2023 đến ngày 07/07/2023 Chuyên ngành: Công nghệ Phần mềm Tên luận văn: Xây dựng ứng dụng Chat Online sử dụng ReactJS Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ luận văn: Lý thuyết: Tìm hiểu công nghệ: ReactJS, Firebase, Web RTC, Socket.io API ZEGOCLOUD Thực hành: - Tạo dự án ReactJS cài đặt thư viện cần thiết rudux, firebase, socket.io-client, webrtc-adapter zegocloud-sdk - Tạo dự án Firebase kích hoạt tính Authentication, Realtime Database, Storage Lấy khóa API Firebase thêm vào file env dự án ReactJS - Sử dụng Firebase Authentication để xác thực người dùng đăng nhập đăng xuất Bạn sử dụng phương thức xác thực email/password, Google, Facebook số điện thoại - Sử dụng Realtime Database để lưu trữ thông tin người dùng, danh sách bạn bè, tin nhắn phòng chat thông qua sử dụng phương thức để tương tác với sở liệu như: firebase.database().ref(), firebase.database().set(), firebase.database().get(), firebase.database().update(), firebase.database().remove(), firebase.database().on() firebase.database().off() - Sử dụng Storage để lưu trữ truy xuất tập tin, hình ảnh, video, file ghi âm,… Sử dụng phương thức ref(), put(), getDownloadURL() delete() để tương tác với kho lưu trữ Sử dụng Socket.io để thiết lập kết nối hai chiều client server Sử dụng phương thức io(), socket.emit(), socket.on() socket.join() để gửi nhận kiện kết nối, ngắt kết nối, tin nhắn mới, gọi video, chia sẻ file tạo phòng chat - Sử dụng Web RTC để thiết lập kết nối peer-to-peer hai người dùng gọi video - Sử dụng UIKits tiền xây dựng ZEGOCLOUD xây dựng chức Zoom Meeting Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS MỤC LỤC Phần MỞ ĐẦU 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Cách tiếp cận phương pháp nghiên cứu - Đối tượng nghiên cứu - Phạm vi nghiên cứu 1.4 Kết dự kiến đạt Phần NỘI DUNG Chương 1: CƠ SỞ LÝ THUYẾT 1.1 ReactJS Framework 1.2 Firebase 1.3 Một số thư viện môi trường hỗ trợ khác Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Khảo sát trạng 2.2 Kiến trúc chung hệ thống 2.3 Xác định yêu cầu 2.4 Mơ hình hóa u cầu Chương 3: THIẾT KẾ PHẦN MỀM 3.1 Lược đồ 3.2 Thiết kế sở liệu 3.3 Thiết kế giao diện Chương 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt phần mềm 4.2 Kiểm thử phần mềm Phần KẾT LUẬN TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian 01/3/2023 – 10/4/2023 Công việc Ghi - Khảo sát trạng - Xác định chức hệ thống - Thiết kế usecase mơ hình hóa u cầu - Tìm hiểu firebase - Tìm hiểu thư viện ReactJS - Tiến hành kết nối với firebase, xây dựng sở liệu, Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS 10/4/2023 30/4/2023 Tiến hành kết nối với firebase, xây dựng sở liệu, chức login, logout, signup, reset password 01/5/2023 08/6/2023 02/5/2023 09/6/2023 Tiến hành xây dựng chức ứng dụng chat: nhắn tin, kết bạn, tạo group, xóa bạn,… - Tìm hiểu socket.IO, WebRTC API ZEGOCLOUD - Tiến hành xây dựng chức như: zoom meeting, gửi tin nhắn ghi âm giọng nói, chat video 10/6/2023 20/6/2023 Kiểm thử chương trình tiến hành sửa lỗi 21/6/2023 – 11/7/2023 Viết hoàn thiện báo cáo TP.HCM, ngày tháng 07 năm 2023 Người viết đề cương Ý kiến giáo viên hướng dẫn (Ký ghi rõ họ tên) Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP MỤC LỤC DANH MỤC CÁC HÌNH DANH MỤC CÁC BẢNG 11 PHẦN MỞ ĐẦU 13 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 13 ĐỐI TƯỢNG NGHIÊN CỨU 13 PHẠM VI NGHIÊM CỨU 14 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 14 PHẦN NỘI DUNG 16 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 16 1.1 Frontend - ReactJS Framework 16 1.2 Database - Firebase 17 1.3 Một số thư viện môi trường hỗ trợ khác 18 1.3.1 REDUX & REDUX TOOLKIT 18 1.3.2 ZEGOCLOUD API/SDK 20 1.3.3 Socket IO 21 1.3.4 WebRTC (Web Real-Time Communications) 22 1.3.5 Môi trường NodeJS 23 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 25 2.1 KHẢO SÁT HIỆN TRẠNG 25 2.1.1 Website “FACEBOOK MESSENGER ": http://messenger.com 25 2.1.2 Website “ZALO”: https://chat.zalo.me 26 2.1.3 Website Tawk.to: https://www.tawk.to 27 2.1.4 Website “TELEGRAM”: https://web.telegram.org/ 28 2.1.5 Kinh nghiệm rút 29 2.2 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 29 2.3 XÁC ĐỊNH YÊU CẦU 30 Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS 2.3.1 Yêu cầu chức hệ thống 30 2.3.2 Các Actor hệ thống 32 2.4 MƠ HÌNH HĨA U CẦU 33 2.4.1 Lược đồ usecase 33 2.4.2 Sơ đồ Activity 45 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 49 3.1 LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM 49 3.1.1 Sơ đồ trình đăng nhập tài khoản 49 3.1.2 Sơ đồ trình đăng ký tài khoản 50 3.1.3 Sơ đồ trình gửi yêu cầu kết bạn 51 3.1.4 Sơ đồ trình nhắn tin 52 3.1.5 Sơ đồ q trình chỉnh sửa thơng tin 53 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 54 3.2.1 Cấu trúc sở liệu 54 3.2.2 Lược đồ thực thể 60 3.2.3 Ví dụ sở liệu User 60 3.2.4 Ví dụ sở liệu Messages 61 3.3 THIẾT KẾ GIAO DIỆN 62 3.3.1 Giao diện người dùng (UI) 62 3.3.2 Màn hình giao diện thiết bị điện thoại 88 3.3.3 Trải nghiệm người dùng (UX) 107 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 108 4.1 Cài đặt 108 4.1.1 Yêu cầu hệ thống 108 4.1.2 Các bước tiến hành 108 4.2 Kiểm thử 108 4.2.1 Phạm vi kiểm thử 108 4.2.2 Các loại kiểm thử 110 4.2.3 Rủi ro hướng giải 110 Khóa luận tốt nghiệp – Xây dựng ứng dụng Chat Online sử dụng ReactJS