Báo cáo đồ án 2 xây dựng phần mềm chat

ĐẠ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 - BÁO CÁO ĐỒ ÁN XÂY DỰNG PHẦN MỀM CHAT Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Hữu An Nhiên – 19520207 Vũ Đặng Khương Duy - 19520496 Tp Hồ Chí Minh, tháng 12 năm 2022 ĐẠ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 - BÁO CÁO ĐỒ ÁN XÂY DỰNG PHẦN MỀM CHAT Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Hữu An Nhiên – 19520207 Vũ Đặng Khương Duy - 19520496 Tp Hồ Chí Minh, tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG PHẦN MỀM CHAT Tên đề tài tiếng Anh: BUILDING A MESSAGING APPLICATION Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 7/9/2022 đến 31/12/2022 Sinh viên thực hiện: Nguyễn Hữu An Nhiên - 19520207 Vũ Đặng Khương Duy - 19520496 Nội dung đề tài: Giới thiệu: Chat (trò chuyện) giao tiếp dựa văn thực trực thời gian thực Ví dụ: nói chuyện với trị chuyện, văn nhập người tham gia khác nhận Ngày nay, chat phần thiếu sống Với ứng dụng chat hỗ trợ người làm việc từ xa, nơi lúc Hiệu rõ ràng có lẽ đến từ lúc đại dịch Covid vừa qua, ứng dụng chat Viber, Zalo, Line,… kết nối người với Để mở rộng khả kết nối mạng Internet, nhóm chúng tơi thực đề tài Xây dựng ứng dụng Chat với chức đa dạng, tối ưu thiết bị Mục tiêu: - Hiểu rõ cấu trúc framework React Facebook phát triển cách áp dụng vào đồ án - Xây dựng ứng dụng chat gồm tính phục vụ vào đời sống công việc người Phạm vi: • Phạm vi mơi trường: • Ứng dụng hoạt động thiết bị Windows Mac • Phạm vi chức năng: • Nhắn tin P2P • Nhắn tin nhóm • Chia sẻ file • Chia sẻ ảnh/video • Thư viện ảnh • Tìm kiếm hội thoại • Kết bạn • Tìm kiếm tin nhắn • Chỉnh sửa ảnh • Quản lý thơng tin người dùng Đối tượng: - Người dùng có nhu cầu sử dụng để trao đổi công việc nhắn tin với người thân gia đình Phương pháp thực hiện: - Tìm hiểu ReactJs, NodeJs, Nestjs, MongoDb, Typescript - Khảo sát thực trạng ứng dụng chat có ví dụ: WhatApps, Viber, Messenger chat, Zalo, Telegram, ứng dụng có nhiều người dùng, từ tiến hành phân tích, xác định u cầu cụ thể cho đề tài đưa tính cải thiện (nếu có) - Phân tích thiết kế ứng dụng, thiết kế hệ thống - Tham khảo, lên ý tưởng giao diện cho ứng dụng - Xây dựng ứng dụng cho người dùng sử dụng nhiều hệ điều hành khác (các hệ điều hành nêu mục phạm vi môi trường) - Tiến hành triển khai kiểm thử ứng dụng Công nghệ: - Frontend: ReactJs, ElectronJs - Backend: Nestjs - Database: IndexDb, MongoDb Kết mong đợi • Nắm bắt áp dụng công nghệ sử dụng để xây dựng đề tài • Hiểu rõ chức năng, cách sử dụng cơng nghệ nêu • Xây dựng ứng dụng dễ dàng nâng cấp, chỉnh sửa • Tin nhắn đảm bảo thứ tự • Đảm bảo tin nhắn ln gửi thành cơng • Ứng dụng hoạt động trơn tru, hạn chế lỗi sử dụng triển khai Kế hoạch thực Thời gian Nội dung 05/09/2022 – 11/09/2022 Tất cả: tìm hiểu đề tài, chuẩn bị khảo sát ứng dụng khác Tất cả: tìm hiểu, nghiên cứu ReactJs Nodejs 12/09/2022 – 18/09/2022 Phân tích, thiết kế hệ thống, lên kịch sử dụng (bussiness process) 19/09/2022 – 02/11/2022 xây dựng giao diện (Đăng nhập, đăng kí, gửi tin nhắn, ) Xây dựng Api (Đăng nhập, đăng kí, gửi tin nhắn, ) Tất cả: tiếp tục xây dựng giao diện nâng cao (hệ thống thông báo, retry gửi tin nhắn, load file ảnh, video, parse link, ) 03/11/2022 – 03/12/2022 Hoàn chỉnh hệ thống Api (gửi tin nhắn, gửi thông báo lỗi, lưu trữ ảnh, file) 04/10/2022 – 20/12/2022 Tất cả: Ghép Api, kiểm thử ứng dụng 21/12/2022 – 31/12/2022 Hoàn thiện báo cáo Xác nhận CBHD (Ký tên ghi rõ họ tên) TP HCM, ngày 24 tháng 12 năm 2022 Sinh viên (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Nguyễn Hữu An Nhiên Vũ Đặng Khương Duy LỜI MỞ ĐẦU Thuật ngữ “Chat” khơng cịn xa lạ với người dùng Internet ngày Trong chúng ta, hàng ngày phải giải công việc thông qua việc giao tiếp người với người Và nhờ phát triển công nghệ thông tin, ứng dụng nhắn tin dần thay cho hoạt động giao tiếp face-to-face truyền thống Theo định nghĩa, Chat (trò chuyện) giao tiếp dựa văn thực trực thời gian thực Ví dụ: nói chuyện với trị chuyện, văn nhập người tham gia khác nhận Chat thường có loại text-chat, voice chat, video chat Hiện nay, thị trường có nhiều tảng ứng dụng nhắn tin phổ biến Trong bật với người dùng Việt Nam ứng dụng Zalo, Messenger, Viber, … Tuy nhiên, ứng dụng có ưu nhược điểm riêng Ví dụ Zalo khả đồng đa thiết bị, Messenger khả phản hồi chậm ứng dụng thường xun xảy lỗi,… Vì vậy, cần có giải pháp ứng dụng chat đáp ứng yêu cầu chức đảm bảo hiệu năng, khả tương tác người dùng Đó lí do, nhóm chúng em lựa chọn đề tài “Xây dựng phần mềm chat” phát triển ứng dụng WhatChat LỜI CẢM ƠN Chúng em xin chân thành gửi lời cảm ơn đến cô Trần Thị Hồng Yến - giảng viên hướng dẫn Đồ án nhóm thuộc khoa Cơng nghệ Phần mềm hướng dẫn bước nghiên cứu, thực đề tài Tuy nhiên trình nghiên cứu đề tài này, nhóm chúng em cịn số nhược điểm, hạn chế tìm hiểu, thực Rất mong nhận nhận xét, góp ý từ thầy cô giảng viên trường để đề tài nhóm chúng em hồn thiện Chúng em xin chân thành cảm ơn! Nhóm sinh viên thực Nguyễn Hữu An Nhiên – Vũ Đặng Khương Duy MỤC LỤC Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG CHAT 1.2 Lí chọn đề tài 1.4 Khảo sát đề tài: 10 1.5 Môi trường phát triển ứng dụng 12 1.5 Các yêu cầu hệ thống 13 Chương 2: CƠ SỞ LÍ THUYẾT 14 Chương 3: MƠ HÌNH USE-CASE 22 3.2 Danh sách actor 23 3.3 Danh sách use-case 23 Chương 4: PHÂN TÍCH 35 4.1 Sơ đồ lớp (mức phân tích) 35 4.2 Danh sách lớp đối tượng quan hệ 36 4.3 Thiết kế liệu: 37 Chương 5: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 41 5.1 Danh sách hình 41 5.2 Mô tả chi tiết hình 42 KẾT LUẬN 50 Ưu điểm 50 Nhược điểm 50 Hướng phát triển 50 TÀI LIỆU THAM KHẢO 51 Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG CHAT 1.2 Lí chọn đề tài Hiện nay, thị trường có nhiều tảng ứng dụng nhắn tin phổ biến Trong bật với người dùng Việt Nam ứng dụng Zalo, Messenger, Viber, … Tuy nhiên, ứng dụng có ưu nhược điểm riêng Ví dụ Zalo khả đồng đa thiết bị, Messenger khả phản hồi chậm ứng dụng thường xun xảy lỗi,… Vì vậy, cần có giải pháp ứng dụng chat đáp ứng yêu cầu chức đảm bảo hiệu năng, khả tương tác người dùng Đó lí do, nhóm chúng em lựa chọn đề tài “Xây dựng phần mềm chat” phát triển ứng dụng WhatChat Theo thống kê câu hỏi tàng mạng xã hội Người dùng mong muốn ứng dụng chat có tính gồm: nhắn tin, nhắn nhóm, kết bạn, gửi ảnh, gửi file, tìm kiếm tin nhắn Do WhatChat tập trung vào tính tối ưu trải nghiệm người dùng 1.3 Lí chọn cơng nghệ Theo thống kê từ trang công nghệ Hongkiat, tảng hệ điều hành Windows MacOS chiếm đến 97% thị phần máy tính tồn cầu Do muốn phát triển ứng dụng cho tất người sử dụng u cầu phải hỗ trợ tảng Tuy nhiên, việc phát triển ứng dụng native cho tảng yêu cầu nhiều chi phí thời gian đội ngũ phát triển Chính thế, nhóm chúng em định sử dụng framework ReactJS nhằm giúp cho ứng dụng chạy tảng phổ biến Windows MacOS, giúp cho đa số người dùng thiết bị máy tính sử dụng cách mượt mà nhanh chóng 4.3 Thiết kế liệu: Hình 4.2 Sơ đồ liệu tổng quát ứng dụng 37 STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi Private Message Lớp Lớp tin nhắn User Lớp Lớp tài khoản UserChats Lớp Lớp hội thoại User FriendRequest Lớp Lớp lời mời kết bạn Bảng 4.2 Danh sách lớp mối quan hệ ứng dụng 4.4 Mô tả chi tiết kiểu kiệu sơ đồ logic 4.4.1 Lớp “User” STT Tên thuộc tính Loại Ràng buộc id String username String Not null Tài khoản người dùng password String Not null Mật người dùng name String Not null Tên người dùng avatar String Not null Khố chính, Not null Ý nghĩa/ghi Id người dùng Địa URL ảnh đại diện người dùng Bảng 4.3 Bảng mơ tả thuộc tính lớp "User" 38 4.4.2 Lớp “FriendRequest” STT Tên thuộc tính Loại Ràng buộc Khố chính, Ý nghĩa/ghi id String receiverID String Not null ID người nhận lời mời senderID String Not null ID người gửi lời mời createdAt String Not null Thời gian gửi lời mời updatedAt String Not null Thời gian cập nhật lời mời Not null Id lời mời kết bạn Bảng 4.4 Bảng mơ tả thuộc tính lớp " FriendRequest" 4.4.3 Lớp “UserChats” STT Tên thuộc tính Loại Ràng buộc id String firstUser String Not null ID người tham gia thứ secondUser String Not null ID người tham gia thứ hai lastMessage String Not null Tin nhắn cuối updatedAt String Not null Thời gian cập nhật lời mời createdAt String Not null Thời gian gửi lời mời Khố chính, Not null Ý nghĩa/ghi Id hội thoại Bảng 4.5 Bảng mơ tả thuộc tính lớp " UserChats " 39 4.4.4 Lớp “PrivateMessages” STT Tên thuộc tính Loại Ràng buộc id String text String Not null Nội dung tin nhắn sender String Not null Người gửi receiver String Not null Người nhận type Enum Not null Loại tin nhắn(text, photo, file) attachments Array updatedAt String Not null Thời gian cập nhật lời mời createdAt String Not null Thời gian gửi lời mời Khố chính, Not null Ý nghĩa/ghi Id tin nhắn Mảng lưu loại đính kèm Bảng 4.6 Bảng mơ tả thuộc tính lớp " PrivateMessages " 40 Chương 5: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 5.1 Danh sách hình STT Tên hình Ý nghĩa / Ghi Đăng nhập Cho phép người dùng đăng nhập vào hệ thống Đăng ký Màn hình Màn hình chat Hiển thị thơng tin hội thoại Màn hình bạn bè Cho phép người dùng tìm kiếm thêm bạn bè Màn hình thông tin Chứa thông tin hội thoại Cho phép người dùng đăng ký tài khoản để tương tác với hệ thống Hiển thị hình hệ thống để người dùng sử dụng Bảng 5.1 Bảng mơ tả hình ứng dụng 41 5.2 Mơ tả chi tiết hình 5.2.1 Đăng nhập Hình 5.1 Màn hình đăng nhập STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi Kiểm tra email đăng Kiểm tra Người dùng bấm Kiểm tra chuỗi nhập email đăng vào nút “Log in” rỗng email có nhập khả dụng hay khơng Kiểm tra mật Kiểm tra mật Người dùng bấm Kiểm tra chuỗi vào nút “Log in” rỗng mật có khả dụng hay không 42 Xác nhận đăng nhập Tạo tài khoản Xác nhận Người dùng bấm đăng nhập vào nút “Log in” Chuyển sang Khi người dùng hình tạo click vào nút khoản Bảng 5.1 Bảng mơ tả thao tác hình đăng nhập 5.2.2 Đăng ký Hình 5.2 Màn hình đăng ký 43 STT Tên xử lí Kiểm tra email Ý nghĩa Điều kiện gọi Ghi Kiểm tra Khi người dùng Kiểm tra format email chuỗi email bấm vào “Sign rỗng, không thỏa báo lỗi up” Kiểm tra Kiểm tra Khi người dùng Kiểm tra độ mạnh mật mật mật bấm vào “Sign chuỗi rỗng, không thỏa up” báo lỗi Kiểm tra xác Kiểm tra Khi người dùng Kiểm tra xác nhận mật nhận mật xác nhận bấm vào “Sign phải trùng với mật đăng mật up” ký Đăng ký Đăng ký tài Khi người dùng Xử lý gửi email verification khoản cho bấm vào “Sign cho người dùng lưu thông người dùng up” tin tài khoản vào database Bảng 5.2 Bảng mô tả thao tác hình đăng ký 44 5.2.3 Màn hình Hình 5.3 Màn hình STT Tên xử lí Hiển thị danh sách trò chuyện Hiển thị tin nhắn trò chuyện Ý nghĩa Điều kiện gọi Hiển thị trị chuyện theo thứ Ln ln gọi tự thời gian Hiển thị tin nhắn Người dùng có tin nhắn với người trò chuyện khác 45 Ghi Hiển thị tìm Hiển thị tìm kiếm kiếm giúp người dùng tìm tin nhắn, người dùng khác Bảng 5.3 Bảng mô tả thao tác hình trang chủ 5.2.4 Màn hình chat Hình 5.4 Màn hình chat 46 STT Tên xử lí Ý nghĩa Hiển thị tin nhắngiữa người dùng Điều kiện gọi Hiển thị trò chuyện theo thứ Luôn gọi tự thời gian Hiển thị Các button gồm button theo gửi ảnh, file, gửi hành động tin nhắn Bảng 5.5 Bảng mô tả thao tác hình chat 5.2.5 Màn hình bạn bè Hình 5.5 Màn hình bạn bè 47 Ghi STT Tên xử lí Ý nghĩa Điều kiện gọi Hiển thị tìm Hiển thị kiếm để người tìm kiếm dùng tìm kiếm bạn bè Hiển thị lời mời kết bạn Hiển thị lời mời kết bạn nhận Hiển thị danh Hiển thị danh sách sách bạn bè bạn bè có Có người dùng khác gửi lời mời kết bạn đến Người dùng có bạn bè Bảng 5.6 Bảng mơ tả thao tác hình bạn bè 48 Ghi 5.2.6 Màn hình thơng tin Hình 5.6 Màn hình thơng tin STT Tên xử lí Ý nghĩa Hiển thị thông Hiển thị thông tin tin hội hội thoại thoại Hiển thị file Hiển thị file hình ảnh gần hình ảnh đươc gửi gần Điều kiện gọi Cuộc hội thoại gửi file/hình ảnh 49 Ghi KẾT LUẬN Ưu điểm - Xây dựng ứng dụng chat với tính đáp ứng yêu cầu người dùng - Ứng dụng hoạt động Windows - Giao diện dễ sử dụng cho người bắt đầu sử dụng Nhược điểm - Chưa có tính nâng cao - Hiện hỗ trợ ngôn ngữ tiếng Anh Hướng phát triển Hiện tại, ứng dụng đáp ứng nhu cầu ứng dụng chat bao gồm nhắn tin, kết bạn, gửi ảnh, gửi file Tuy nhiên để nâng cao bảo mật trải nghiệm người dùng, ứng dụng nâng cấp thêm tính gọi Video, tin nhắn mã hố đầu cuối Trong tươi lai, nhóm phát triển hỗ trợ tính để giúp cho người dùng có trải nghiệm tốt 50 TÀI LIỆU THAM KHẢO [1] Giới thiệu React JS:https://www.javatpoint.com/react-introduction - Lần truy cập cuối cùng: 17/10/2022 [2] Giới thiệu Electron JS:https://viblo.asia/p/xay-dung-desktop-app-bangelectron-maGK78wxZj2 - Lần truy cập cuối cùng: 17/10/2022 [3] Hashing Password: https://auth0.com/blog/hashing-passwords-one-way-road-tosecurity/ - Lần truy cập cuối 25/12/2022 [4] Những ứng dụng chat phổ biến: https://www.thegioididong.com/game-app/top10-ung-dung-phan-mem-chat-voi-nguoi-la-mien-phi-pho-bien-1306035 - Lần truy cập cuối 19/10/2022 [5] Socket.IO introduction: https://socket.io/docs/v4/ - Lần truy cập cuối 13/11/2022 [6] MongoDB documentation: https://www.mongodb.com/docs/atlas/security/addip-address-to-list/ - Lần truy cập cuối 02/12/2022 [7] NestJS Documentation: https://docs.nestjs.com/ - Lần truy cập cuối 23/12/2022 51 ... 03/11 /20 22 – 03/ 12/ 2 022 Hoàn chỉnh hệ thống Api (gửi tin nhắn, gửi thông báo lỗi, lưu trữ ảnh, file) 04/10 /20 22 – 20 / 12/ 2 022 Tất cả: Ghép Api, kiểm thử ứng dụng 21 / 12/ 2 022 – 31/ 12/ 2 022 Hoàn thiện báo. .. 19/09 /20 22 – 02/ 11 /20 22 xây dựng giao diện (Đăng nhập, đăng kí, gửi tin nhắn, ) Xây dựng Api (Đăng nhập, đăng kí, gửi tin nhắn, ) Tất cả: tiếp tục xây dựng giao diện nâng cao (hệ thống thông báo, ... NGHỆ PHẦN MỀM - BÁO CÁO ĐỒ ÁN XÂY DỰNG PHẦN MỀM CHAT Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nguyễn Hữu An Nhiên – 19 520 207 Vũ Đặng Khương Duy - 19 520 496