Đồ án xây dựng website mạng xã hội kreat

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 ĐỒ ÁN ĐỀ TÀI: Xây dựng Website Mạng xã hội - KreaT Giảng viên hướng dẫn: Cô Trần Thị Hồng Yến Sinh viên thực hiện: Trần Quang Tin Trần Duy Khơi 20522018 20521483 TP Hồ Chí Minh, ngày 06 tháng 07 năm 2023 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Cơng nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, nhóm em trang bị kiến thức kỹ thực tế để hồn thành Đờ án nhóm Để hồn thành đờ án này, với lịng biết ơn sâu sắc nhóm xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thơng tin với hệ thống thư viện đại, đa dạng loại sách tài liệu Gần gũi lời tốt đẹp xin gửi đến đến cô Trần Thị Hồng Yến tận tình giúp đỡ, định hướng cách tư hướng làm việc khoa học Đó góp ý hết sức q báu khơng q trình thực đờ án mà cịn hành trang tiếp bước cho em trình học tập làm việc sau Sau cùng, xin chúc quý Thầy Cơ khoa Cơng nghệ Phần mềm nói riêng giáo viên trường Công nghệ thông tin nói chung thật dời sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp Thành phố Hờ Chí Minh, 06 tháng 07 năm 2023 Trần Quang Tin & Trần Duy Khôi NHẬN XÉT CỦA GIẢNG VIÊN Mục Lục Chương 1: MỞ ĐẦU 10 1.1 Lý chọn đề tài 10 1.1.1 Tại bạn nên sử dụng mạng xã hội KreaT 10 1.2 Đối tượng hướng đến 11 1.3 Khảo sát trạng 11 1.3.1 Facebook 11 1.3.2 Instagram 12 1.4 Mục tiêu đề tài 14 1.5 Phương pháp thực 15 Chương 2: GIỚI THIỆU VỀ CÔNG NGHỆ SỬ DỤNG 16 2.1 Tởng quan ngơn ngữ lập trình JavaScript 16 2.2 Tổng quan ReactJS 17 2.3 Tổng quan NodeJS 19 2.4 Tổng quan ExpressJS 21 2.5 Tổng quan MongoDB 23 2.6 Tổng quan Mongoose 24 2.7 Tổng quan JSON Web Token 26 2.8 Tổng quan Socket.IO 28 Chương 3: PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 31 3.1 Kiến trúc ứng dụng 31 3.2 Phân tích thiết kế 32 3.2.1 Sơ đồ Use-case 32 3.2.2 Bảng danh sách Use-case 32 3.2.3 Đặc tả Use-case 34 3.2.4 Sơ đồ lớp 56 Chương 4: XÂY DỰNG ỨNG DỤNG 67 4.1 Giao diện ứng dụng 67 4.1.1 Màn hình đăng nhập 67 4.1.2 Màn hình đăng ký 67 4.1.3 Màn hình 68 4.1.4 Màn hình hờ sơ cá nhân 70 Chương 5: TỔNG KẾT 76 5.1 Đánh giá 76 5.1.1 Thuận lợi 76 5.1.2 Khó khăn 76 5.2 Kết luận 76 5.2.1 Kết đạt 76 5.2.2 Ưu điểm ứng dụng 77 5.2.3 Nhược điểm ứng dụng 77 5.3 Hướng phát triển 77 TÀI LIỆU THAM KHẢO 78 Danh Mục Hình Ảnh Hình 1.1 Giao diện Facebook 12 Hình 1.2 Giao diện Instagram 13 Hình 2.1 Javascript 16 Hình 2.2 React 18 Hình 2.3 NodeJS 19 Hình 2.4 ExpressJS 21 Hình 2.5 MongoDB 23 Hình 2.6 Mongoose 25 Hình 2.7 Jason Web Token 27 Hình 2.8 Socket.io 28 Hình 3.1 Kiến trúc ứng dụng 31 Hình 3.2 Use-case tởng qt 32 Hình 4.1 Màn hình đăng nhập 67 Hình 4.2 Màn hình đăng ký 68 Hình 4.3 Màn hình 69 Hình 4.4 Màn hình post 70 Hình 4.5 Màn hình timeline 71 Hình 4.6 Màn hình timeline 71 Hình 4.7 Màn hình about 72 Hình 4.8 Màn hình cập nhật thơng tin 73 Hình 4.9 Màn hình quản lý bạn bè 74 Hình 4.10 Màn hình lịch sử ảnh video 75 Danh Mục Bảng Bảng 3.1 Danh sách User-case 32 Bảng 3.2 Đặc tả use-case đăng nhập 34 Bảng 3.3 Đặc tả use-case đăng ký 35 Bảng 3.4 Đặc tả use-case cập nhật ảnh đại diện 37 Bảng 3.5 Đặc tả use-case xem thông tin 38 Bảng 3.6 Đặc tả use-case cập nhật thông tin 39 Bảng 3.7 Đặc tả use-case đăng 40 Bảng 3.8 Đặc tả use-case chỉnh sửa đăng 41 Bảng 3.9 Đặc tả use-case xóa đăng 42 Bảng 3.10 Đặc tả use-case bình luận 43 Bảng 3.11 Đặc tả use-case chỉnh sửa bình luận 44 Bảng 3.12 Đặc tả use-case xóa bình luận 45 Bảng 3.13 Đặc tả use-case thả cảm xúc 46 Bảng 3.14 Đặc tả use-case chỉnh sửa cảm xúc 47 Bảng 3.15 Đặc tả use-case hủy cảm xúc 49 Bảng 3.16 Đặc tả use-case xem thông tin bạn bè 50 Bảng 3.17 Đặc tả use-case quản lý lời mời kết bạn 51 Bảng 3.18 Đặc tả use-case hủy kết bạn 52 Bảng 3.19 Đặc tả use-case trò chuyện 54 Bảng 3.20 Đặc tả use-case thông báo 55 Bảng 3.21 Bảng ACCOUNT 57 Bảng 3.22 Bảng REACT 58 Bảng 3.23 Bảng CONVERSATION 58 Bảng 3.24 Bảng MESSAGE 59 Bảng 3.25 Bảng FRIEND_REQUEST 60 Bảng 3.26 Bảng NOTIFICATION 60 Bảng 3.27 Bảng EDUCATION_INFO 61 Bảng 3.28 Bảng PERSONAL_INFO 62 Bảng 3.29 Bảng FAVORITE_INFO 63 Bảng 3.30 Bảng OTHER_INFO 64 Bảng 3.31 Bảng POST 64 Bảng 3.32 Bảng VISUAL_MEDIA 65 Bảng 3.33 Bảng COMMENT 66 Tóm Tắt Đồ Án Sau đây, nhóm chúng em trình bày phần mềm, quy trình thiết kế giao diện giao diện hoàn chỉnh qua chương sau: • Chương 1: Mở Đầu • Chương 2: Giới Thiệu Về Cơng Nghệ Sử Dụng • Chương 3: Phân tích thiết kế ứng dụng • Chương 4: Xây dựng ứng dụng • Chương 5: Tởng kết Chương 1: MỞ ĐẦU 1.1 Lý chọn đề tài Lý nhóm em chọn đề tài nhận thấy sinh viên khác thường làm ứng dụng thiên quản lý, mua bán, Nhóm em muốn làm mợt thứ mẻ, lạ lẫm Đồng thời muốn cho thân một thử thách làm mợt ứng dụng có quy mơ khơng nhỏ mạng xã hợi Vì vậy, thành viên bàn bạc đưa đến quyết định xây dựng ứng dụng website mạng xã hội KreaT 1.1.1 Tại bạn nên sử dụng mạng xã hội KreaT -Giao tiếp kết nối: Mạng xã hội cho phép bạn giao tiếp kết nối với bạn bè, gia đình người thân khắp nơi thế giới Bạn gửi tin nhắn, chia sẻ ảnh, video thông tin cá nhân để trì mối quan hệ với người quan trọng cuộc sống bạn -Chia sẻ thông tin ý kiến: Mạng xã hội một nơi để chia sẻ thông tin, suy nghĩ, ý kiến quan điểm bạn với người Bạn tham gia đóng góp vào c̣c thảo luận chủ đề quan tâm, nhận thông tin tiếp cận với nhiều quan điểm khác -Tiếp cận thơng tin nhanh chóng: Mạng xã hợi cung cấp cho bạn cập nhật nhanh tin tức, kiện, xu hướng thông tin quan trọng khác từ khắp nơi thế giới Bạn theo dõi trang tin, trang fanpage trang cá nhân tổ chức, người nổi tiếng, người bạn quan tâm để thông tin -Quảng bá xây dựng thương hiệu cá nhân: Nếu bạn một nhà kinh doanh, nghệ sĩ người muốn xây dựng một thương hiệu cá nhân, mạng xã hội một tảng hữu ích để quảng bá sản phẩm, dịch vụ tài bạn Bạn tạo nội dung sáng tạo, chia sẻ thông tin công việc bạn tương tác với khách hàng, người hâm mợ cợng đờng -Học tập nghiên cứu: Mạng xã hội cung cấp một nguồn tài nguyên phong phú để học tập nghiên cứu Bạn tham gia vào nhóm chuyên đề, theo dõi trang 10 Bảng 3.30 Bảng OTHER_INFO Tên Kiểu liệu Ý nghĩa id_account ObjectId Id tài khoản listFriend Array Danh sách bạn bè 3.2.4.11 POST Bảng 3.31 Bảng POST Tên Kiểu liệu Ý nghĩa id_post ObjectId Id đăng id_account ObjectId Id người đăng id_visualMedia Array Các hình ảnh video đăng postContent String Nội dung văn đăng postPrivacy String Quyền riêng tư đăng postTime Datetime Thời gian đăng id_friendTag Array Danh sách người gắn thẻ đăng 64 location String Địa điểm isShared Boolean Xác định đăng gốc hay đăng chia sẻ shareId ObjectId Id đăng gốc shareContents Object Nội dung đăng gốc 3.2.4.12 VISUAL_MEDIA Bảng 3.32 Bảng VISUAL_MEDIA Tên Kiểu liệu Ý nghĩa id_visualMedia ObjectId Id hình ảnh video id_post ObjectId Id viết có hình ảnh video id_account ObjectId Id người đăng ảnh video url Object Đường dẫn hình ảnh video 3.2.4.13 COMMENT 65 Bảng 3.33 Bảng COMMENT Tên Kiểu liệu Ý nghĩa id_comment ObjectId Id bình luận id_post ObjectId Id đăng chưa bình luận id_account ObjectId Id tài khoản bình luận commentContent String Nợi dung bình luận isReply Boolean Kiểm tra bình luận phản hời hay gốc id_repliedComment ObjectId Id bình luận gốc phản hời commentTime Datetime Thời gian đăng bình luận 66 Chương 4: XÂY DỰNG ỨNG DỤNG 4.1 Giao diện ứng dụng 4.1.1 Màn hình đăng nhập Hình 4.1 Màn hình đăng nhập Màn hình gờm thành phần xử lý chính: - Nút “Register” để chuyển qua hình đăng ký - Hai ô input để nhập email mật Người dùng phải nhập định dạng hệ thống yêu cầu: trường email phải nhập định dạng email, trường password phải nhập ký tự - Nút đăng nhập để tiến hành đăng nhập vào hệ thống - Nút quên mật để giúp người dùng thay đổi mật nếu quên mật (trải qua bước xác thực otp gửi email) 4.1.2 Màn hình đăng ký 67 Hình 4.2 Màn hình đăng ký Màn hình gờm thành phần xử lý chính: - Nút “Login” để chuyển qua hình đăng nhập - Bốn ô input để nhập họ tên, email, mật xác nhận mật Người dùng phải nhập định dạng hệ thống yêu cầu: trường full name không để trống, trường email phải nhập định dạng email, trường password phải nhập ký tự, trường nhập lại mật phải giống trường password - Nút đăng ký để tiến hành đăng ký tài khoản mới, nếu email tồn hệ thống khơng đăng ký 4.1.3 Màn hình 68 Hình 4.3 Màn hình chính Màn hình gờm thành phần chính: - Header: ● Logo ứng dụng KreaT ● Thanh search để tìm kiếm tài khoản tảng ● Nút tin nhắn để xem lịch sử nhắn tin mở chatbox ● Nút thông báo để xem thông báo ● Ảnh đại diện người dùng: hover vào để thực hành động xem profile, cài đặt, đăng xuất - Sidebar trái: gồm thành phần gợi ý kết bạn, bấm vào account item để xem thơng tin người nút gửi lời mời kết bạn - Sidebar phải: gồm thành phần contact: hiển thị danh sách bạn bè, người dùng chọn vào để tiến hành trị chuyện Người dùng tìm kiếm - Newsfeed: ● Postform để người dùng đăng ● Danh sách đăng: người dùng xem đăng người khác thực hành đợng lên xem danh sách người thả cảm xúc, thả cảm 69 xúc lên bài, bình luận xem bình luận, chia sẻ, xem thơng tin người gắn vào Người dùng xóa sửa viết Hình 4.4 Màn hình bài post 4.1.4 Màn hình hồ sơ cá nhân Nhóm hình gờm tabs: Timeline (xem đăng chia sẻ), About (xem thông tin bản), Friends (xem danh sách bạn bè), Photos & Videos (xem ảnh video đăng) 70 Hình 4.5 Màn hình timeline Hình 4.6 Màn hình timeline Màn hình gờm thành phần chính: - Header: đề cập hình - Ảnh bìa người dùng - Ảnh đại diện người dùng 71 - Tên người dùng - Danh sách đăng - Combobox lựa chọn chế độ xem tất viết viết gắn thẻ vào Hình 4.7 Màn hình about 72 Hình 4.8 Màn hình cập nhật thông tin Màn hình gờm thành phần chính: - Header: đề cập hình - Ảnh bìa người dùng - Ảnh đại diện người dùng - Tên người dùng - Các thông tin người dùng - Các nút chỉnh sửa hồ sơ cá nhân 73 Hình 4.9 Màn hình quản lý bạn bè Màn hình gờm thành phần chính: - Header: đề cập hình - Ảnh bìa người dùng - Ảnh đại diện người dùng - Tên người dùng - Danh sách bạn bè người dùng Người dùng tìm kiếm thực hủy kết bạn - Danh sách lời mời kết bạn người dùng Người dùng xác nhận từ chối lời mời hình 74 Hình 4.10 Màn hình lịch sử ảnh và video Màn hình gờm thành phần chính: - Header: đề cập hình - Ảnh bìa người dùng - Ảnh đại diện người dùng - Tên người dùng - Danh sách ảnh video đăng - Combobox lựa chọn chế độ xem ảnh đăng post lịch sử avatar cập nhật 75 Chương 5: TỔNG KẾT 5.1 Đánh giá 5.1.1 Thuận lợi - Trên thị trường có nhiều ứng dụng mạng xã hợi để nhóm tham khảo, từ giúp nhóm có nhiều ý tưởng thiết kế chức năng, giao diện liệu - Các tài liệu công cụ thực đờ án có đầy đủ chi tiết Internet Cộng đồng lớn giúp giải quyết vấn đề thường gặp phải sử dụng công nghệ liên quan đờ án mợt cách nhanh chóng - Các thành viên nhóm biết từ trước nên hiểu rõ điểm mạnh điểm yếu Từ đó, phân chia công việc giúp phát huy tối đa khả thành viên làm việc hiệu 5.1.2 Khó khăn - Mất nhiều thời gian để học tìm hiểu cơng nghệ - Vì ứng dụng mạng xã hội nên việc quản lý liệu phức tạp để đạt độ hợp lý hiệu cao cho ứng dụng 5.2 Kết luận 5.2.1 Kết quả đạt Sau thời gian thực đề tài, nhóm đạt mợt số kết sau: - Xây dựng thành công ứng dụng mạng xã hợi có chức năng: - Tạo một cộng đồng trực tuyến: Mạng xã hội cho phép người dùng kết nối với người có sở thích quan điểm tương tự chia sẻ một mục đích chung Các ứng dụng mạng xã hợi giúp tạo mợt cợng đờng tương tác, giúp người dùng trao đổi thông tin hỗ trợ - Tăng tương tác giao tiếp: Mạng xã hợi giúp người dùng tăng hợi giao tiếp tương tác với Người dùng chia sẻ thơng tin, bình luận thảo luận với chủ đề chung Ngoài ra, người dùng nhắn tin gọi điện riêng cho tạo nhóm trị chuyện 76 - Cung cấp giải trí: Ứng dụng mạng xã hợi cung cấp giải trí cho người dùng, ví dụ chia sẻ video, ảnh, âm nhạc, nội dung giải trí khác - Sinh viên thực nắm cách thức làm một ứng dụng web - Thông qua đờ án, nhóm tìm hiểu thêm cơng nghệ ReactJS, NodeJS, MongoDB, nhằm phục vụ cho cơng việc tương lai nhóm sau Nhóm cịn củng cố vững kiến thức học quy trình làm phần mềm, cách phân tích, thiết kế mợt hệ thống thơng tin - Nâng cao kỹ lập trình, làm việc nhóm giải quyết vấn đề 5.2.2 Ưu điểm ứng dụng - Giao diện đơn giản, tươi sáng, người dùng dễ dàng theo tác ứng dụng - Tốc độ phản hồi thao tác nhanh, tối ưu hóa suất người dùng - Tính bảo mật cao - Quyền riêng tư người dùng bảo vệ 5.2.3 Nhược điểm ứng dụng - Chưa xây dựng hệ thống hỗ trợ cho phía admin - Chưa thể hiển thị viết theo sở thích, thói quen người riêng biệt - Chưa hỗ trợ đa ngôn ngữ - Chưa thể đăng tải video - Người dùng tùy chọn phong cách giao diện khác 5.3 Hướng phát triển - Hoàn thiện UI/UX chức có - Xây dựng thêm chức chat nhóm, call video call - Cho phép người dùng tùy chọn phong cách giao diện khác - Đề suất đăng cho người dùng riêng biệt - Đăng video 77 TÀI LIỆU THAM KHẢO [1] MongoDB, MongoDB documentation [Online] Available: https://www.mongodb.com/docs/ [Truy cập lần cuối 30/06/2023] [2] NodeJS, NodeJS documentation [Online] Available: [Online] Available: https://nodejs.org/en/docs [Truy cập lần cuối 15/06/2023] [3] Socket.io, Socket.io documentation https://socket.io/docs/v4/ [Truy cập lần cuối 30/06/2023] [4] React, React documentation [Online] Available: https://react.dev/ [Truy cập lần cuối 30/05/2023] [5] Mongoose, Mongoose documentation [Online] Available: https://mongoosejs.com/ [Truy cập lần cuối 30/06/2023] [6] JWT, JWT documentation [Online] Available: https://jwt.io/ [Truy cập lần cuối 15/06/2023] [7] ExpressJS, ExpressJS documentation [Online] Available: https://expressjs.com/ [Truy cập lần cuối 15/06/2023] 78