Để tài website mạng xã hội

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN _ BÁO CÁO CUỐI KÌ ĐỒ ÁN MÔN HỌC : ĐỒ ÁN ĐỂ TÀI: WEBSITE MẠNG XÃ HỘI Giảng viên hướng dẫn : GV Thái Thụy Hàn Uyển Nhóm sinh viên thực hiện: Võ Minh Tuấn – 19522487 Võ Xuân Tú – 19522461 Thành phố Hồ Chí Minh,…tháng…năm 2022 trang NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… trang MỤC LỤC KHẢO SÁT HIỆN TRẠNG: I Lý chọn đề tài: Mục tiêu phần mềm: Phương pháp nghiên cứu: Người dùng: QUY TRÌNH NGHIỆP VỤ VÀ NGƯỜI DÙNG HỆ THỐNG: II Quy trình nghiệp vụ: Người dùng hệ thống: CÁC YÊU CẦU CHUNG III Yêu cầu môi trường Yêu cầu giao diện Yêu cầu chức MƠ HÌNH USECASE IV Danh sách usecase 10 Đặc tả usecase 11 THIẾT KẾ CƠ SỞ DỮ LIỆU 27 V VI THIẾT KẾ GIAO DIỆN 32 VII CÔNG NGHỆ SỬ DỤNG 42 NextJS 42 NestJs 43 Socket IO 46 Tailwind CSS 47 MongoDB 48 Firebase 49 Cloudinary 51 MQTT 51 VIII KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN: 53 Kết đạt 53 Hướng phát triển 53 IX TÀI LIỆU THAM KHẢO: 53 trang DANH MỤC BẢNG BIỂU Bảng Yêu cầu môi trường Bảng Yêu cầu giao diện Bảng Danh sách usecase 10 Bảng 4.Usecase đăng nhập với số điện thoại 11 Bảng Usecase đăng nhập với Google 11 Bảng 6.Usecase đăng ký với số điện thoại 12 Bảng 7.Usecase đăng ký với Google 13 Bảng 8.Usecase tạo viết 13 Bảng 9.Usecase chỉnh sửa viết 14 Bảng 10.Usecase xóa viết 15 Bảng 11.Usecase thả cảm xúc viết 15 Bảng 12.Usecase xem viết người khác 16 Bảng 13.Usecase xem bạn bè người khác 16 Bảng 14.Usecase xem album người khác 17 Bảng 15.Usecase kết bạn 17 Bảng 16.Usecase hủy kết bạn 17 Bảng 17.Usecase chat đơn 18 Bảng 18.Usecase tạo nhóm chat 18 Bảng 19.Usecase thêm thành viên 19 Bảng 20.Usecase xóa thành viên khỏi nhóm chat 19 Bảng 21.Usecase rời nhóm chat 20 Bảng 22.Usecase chuyển đổi Admin 20 Bảng 23.Usecase thay đổi tên nhóm chat 21 Bảng 24.Usecase thay đổi avatar 21 Bảng 25.Usecase thay đổi ảnh bìa 22 Bảng 26.Usecase thay đổi thông tin cá nhân 23 Bảng 27.Usecase thay đổi mật 23 Bảng 28.Usecase quên mật 24 Bảng 29.Usecase thông báo 24 Bảng 30.Usecase tạo bình luận 25 Bảng 31.Usecase chỉnh sửa bình luận 25 Bảng 32.Usecase xóa bình luận 26 Bảng 33.Usecase thả cảm xúc bình luận 26 Bảng 34.Comment schema 27 Bảng 35.SubMessage schema 28 Bảng 36 Education schema 28 Bảng 37 Feeling schema 28 Bảng 38 Reacion schema 28 Bảng 39 Message schema 29 trang Bảng 40 Post schema 29 Bảng 41 Conversation schema 29 Bảng 42 User schema 30 Bảng 43 FriendRequest schema 31 Bảng 44 Notification schema 31 Bảng 45 Enum 32 DANH MỤC HÌNH ẢNH Hình Sơ đồ usecase tổng qt 10 Hình Sơ đồ logic sở liệu 27 Hình Màn hình đăng nhập 32 Hình Màn hình gửi OTP 33 Hình Màn hình xác minh OTP 34 Hình Màn hình đăng ký 34 Hình Màn hình trang chủ 35 Hình Màn hình tin nhắn 36 Hình Màn hình thơng báo 37 Hình 10 Màn hình cài đặt 38 Hình 11 Màn hình cài đặt 38 Hình 12 Màn hình trang cá nhân 39 Hình 13 Màn hình trang cá nhân 40 Hình 14 Màn hình trang cá nhân 40 Hình 15 Màn hình chi tiết viết 41 Hình 16 Màn hình tìm kiếm bạn bè 42 Hình 17 NextJs 42 Hình 18 NestJs 43 Hình 19 Module nestjs 44 Hình 20 Controller nestjs 44 Hình 21 Provider nestjs 45 Hình 22 Socket.io 46 Hình 23 Tailwind CSS 47 Hình 24 MongoDB 48 Hình 25 Kiểu liệu Json 49 Hình 26 Firebase 49 Hình 27 Cloudinary 51 Hình 28 MQTT 51 trang I II KHẢO SÁT HIỆN TRẠNG: Lý chọn đề tài: - Mạng xã hội dần trở thành phần thiếu sống đại Nó mang lại cho người khả dễ dàng kết nối, chia sẻ sở thích, thói quen suy nghĩ - Mạng xã hội ngày phát triển rộng rãi chứng tỏ sức hấp dẫn vai trị mặt đời sống xã hội thương mại, học tập, giải trí - Muốn tìm hiểu sâu cơng nghệ trợ giúp thời gian thực, nhóm chọn đề tài “Xây dựng trang web mạng xã hội” Mục tiêu phần mềm: - Tạo trang web cho phép người dùng đăng tải viết, chia sẻ khoảnh khắc đẹp, cảm xúc với người xung quanh - Giúp cho người trị chuyện với nhanh chóng Phương pháp nghiên cứu: - Thu thập thông tin từ tài liệu sở liệu có liên quan - Tiếp cận số phần mềm mạng xã hội có sẵn Người dùng: Website hướng tới người dùng Giúp cho họ trao đổi thơng tin với cách nhanh chóng hiệu quả QUY TRÌNH NGHIỆP VỤ VÀ NGƯỜI DÙNG HỆ THỐNG: Quy trình nghiệp vụ: 1.1 Quản lý người dùng Mỗi người dùng lưu lại thông tin: họ tên, email, ngày sinh, địa chỉ, ảnh đại diện, ảnh bìa, bạn bè Các thơng tin hệ thống sử dụng cho việc đăng viết, tìm kiếm bạn bè, xem trang cá nhân, chỉnh sửa thông tin cá nhân, chat,… 1.2 Quản lý viết: Mỗi viết đề có thơng tin như: ảnh đại diện, tên chủ sở hữu viết, ngày đăng, nội dung viết, cảm xúc viết (nếu có), hình ảnh viết (nếu có), cảm xúc thả cho viết,… Bên cạnh việc tạo viết người dùng chỉnh sửa xóa viết 1.3 Quản lý thơng tin người dùng Người dùng thay đổi thơng tin cá nhân họ tên, ngày sinh, ảnh đại diện, ảnh bìa,… trang III Người dùng hệ thống: 2.1 Người dùng bản: Là người có nhu cầu sử dụng mạng xã hội để giao lưu, kết bạn với người khác Người dùng đăng viết để tâm tư, tình cảm, cảm xúc lúc họ Bên cạnh việc đăng viết người dùng cịn bình luận thả cảm xúc cho viết người khác Người dùng tìm kiếm bạn bè, xem trang cá nhân họ kết bạn với họ Từ người nhắn tin trực tuyến với 2.2 Người quản lý: Là người quản lý tất cả người dùng hệ thống Công việc họ quản lý thông tin tài khoản người dùng bản CÁC YÊU CẦU CHUNG Yêu cầu môi trường Bảng Yêu cầu môi trường Mã 01.01 01.02 01.03 Mô tả yêu cầu Chạy trình duyệt web Chạy hệ điều hanh, tảng khác Cơ sở liệu dùng MongoDB Yêu cầu giao diện Bảng Yêu cầu giao diện Mã 02.01 02.02 Mô tả yêu cầu Giao diện trực quan Các điều khiển trang web phải quen thuộc, dễ thao tác với người dùng 02.03 Giao diện hình ảnh linh động, tránh đơn điệu 02.04 Font chữ phải đồng với toàn giao diện Yêu cầu chức 3.1 Chức đăng nhập: Chức giúp cho người dùng đăng nhập vào hệ thống thông qua tài khoản mật để có thơng tin viết bạn bè người lạ, thông tin cá nhân, thông báo, tin nhắn,… 3.2 Chức đăng ký: trang 3.3 3.4 3.5 3.6 3.7 Chức giúp cho người dùng tự tạo tài khoản để đăng nhập vào hệ thống sử dụng dịch vụ mà hệ thống cung cấp Chỉnh sửa thông tin cá nhân: Chức giúp cho người dùng cập nhập chỉnh sửa số thơng tin cá nhân Ví dụ họ tên, ngày sinh, địa chỉ, ảnh đại diện, ảnh bìa,… Đối với việc cập nhập ảnh đại diện ảnh bìa tạo viết mới, post có cấu trúc giống viết binh thường bố cục xếp hình ảnh khác với xếp hình ảnh viết bình thường Kết bạn: Chức giúp cho người dùng gửi lời mời kết bạn tới người mà họ mong muốn kết bạn Để gửi lời mời kết bạn người dùng phải tìm kiếm người muốn kết bạn thơng qua việc tìm kiếm xem trang cá nhân người gửi lời mời kết bạn người dùng chưa bạn bè chưa gửi lời mời kết bạn Xem viết: Chức giúp cho người dùng xem viết bạn bè người dùng khác mà họ chưa kết bạn Ưu tiên xếp viết bạn bè lên trước viết người lạ Bên cạnh việc xem nội dung viết hình ảnh viết đó, người dùng xem bình luận có viết Đăng viết: Chức giúp cho người dùng tạo viết để diễn đạt trạng thái cảm xúc, tâm tư, tình cảm người tạo viết bào thời điểm Trong viết phải có phần cảm xúc viết, hình ảnh nội dung viết ( phần chữ ) Trong phần cảm xúc viết phải có nhiều cảm xúc mà người bình thường trải qua buồn, vui, hạnh phúc, bất hạnh, hào hứng,… bên cạnh tên cảm xúc phải có biêt tượng icon kèm theo để làm cho viết trở nên sinh động Đối với hình ảnh người dùng định đưa lên viết phải có số bố cục xếp hình ảnh ví dụ hình, hình, hình,… có các tổ hợp xếp hình khác để giúp cho người dùng bớt thầy nhàm chán xem viết Xóa viết: trang IV Chức giúp người dùng xóa viết thuộc họ mà họ không muốn tồn hệ thống Sau xóa hình ảnh bình luận, cảm xúc có viết bị xóa hết 3.8 Chỉnh sửa viết: Chức giúp người dùng chỉnh sửa viết mà họ đăng trước Người dùng thay đổi nội dung, hình ảnh cảm xúc viết 3.9 Thả cảm xúc với viết: Chức cho phép người dùng thả cảm xúc minh cho viết mà họ nhìn thấy Các cảm xúc thả phải giới hạn 4-5 cảm xúc ví dụ thích, yêu, haha, buồn, phẫn nộ Và người dùng gỡ cảm xúc muốn 3.10 Tạo bình luận: Chức giúp cho người dùng để lại bình luận cho viết mà họ nhìn thấy Bình luận tạo kèm với hình ảnh Các bình luận phân theo cấp vào tối đa cấp 3.11 Chỉnh sửa bình luận: Chức cho phép người dùng chỉnh sửa lại bình luận mà họ tạo Người dùng chỉnh sửa nội dung bình luận hình (nếu có) 3.12 Xóa bình luận: Chức cho phép người dùng xóa bình luận họ viết Khi xóa bình luận mà có binh luận bình luận bị xóa theo 3.13 Thả cảm xúc với bình luận: Chức cho phép người dùng thả cảm xúc cho bình luận mà họ nhìn thấy Số lượng cảm xúc thả giống thả cảm xúc với viết 3.14 Nhắn tin: Chức cho phép người dùng nhắn tin trò chuyện trực tuyến với người dùng khác Bên cạnh nhắn tin chữ người dùng gửi hình ảnh Bên cạnh việc nhắn tin với người tạo nhóm chat nhắn tin với nhiều người Khi tạo nhóm chat có tên nhóm người quản lý nhơm chat MƠ HÌNH USECASE trang Hình Sơ đồ usecase tổng quát Danh sách usecase Bảng Danh sách usecase STT Usecase Đăng nhập Đăng ký Bài viết Bạn bè Usecase phụ Đăng nhập số điện thoại Đăng nhập Google Đăng ký với số điện thoại Đăng ký với Google Tạo viết Chỉnh sửa viết Xóa viết Thả cảm xúc viết Xem bạn bè Xem album Xem viết trang 10 Hình 12 Màn hình trang cá nhân trang 39 Hình 13 Màn hình trang cá nhân Hình 14 Màn hình trang cá nhân Màn hình chi tiết viết Mơ tả chung xử lý kiện hình: Màn hình chi tiết viết gồm phần: trang 40 - Phần 1: hiển thị hình ảnh viết Người dùng chuyển qua lại hình cách nhấn nút dấu “>” “