(Đồ án hcmute) xây dựng mạng xã hội bằng mern stack

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 XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK GVHD: TS NGUYỄN THÀNH SƠN SVTH: NGUYỄN HOÀNG HUY PHẠM NHỰT TRƯỜNG S K L0 Tp Hồ Chí Minh, 2022 ccBỘ 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 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK GIÁO VIÊN HƯỚNG DẪN: TS NGUYỄN THÀNH SƠN NHĨM SINH VIÊN THỰC HIỆN NGUYỄN HỒNG HUY 18110294 PHẠM NHỰT TRƯỜNG 18110385 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 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK GIÁO VIÊN HƯỚNG DẪN: TS NGUYỄN THÀNH SƠN NHÓM SINH VIÊN THỰC HIỆN NGUYỄN HOÀNG HUY 18110294 PHẠM NHỰT TRƯỜNG 18110385 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc KHOA CNTT ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294 Họ tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK Họ tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ư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 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 202 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc KHOA CNTT ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294 Họ tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK Họ tên Giáo viên phản biện: ThS LÊ THỊ MINH CHÂU NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ư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 Giáo viên phản biện (Ký & ghi rõ họ tên) năm 202 LỜI CẢM ƠN Lời đầu tiên, chúng em xin chân thành cảm ơn Thầy Nguyễn Thành Sơn, người trực tiếp giảng dạy, truyền đạt kiến thức quý báu tận tình giúp cho nhóm chúng em suốt q trình thực đề tài Chúng em xin gửi lời cảm ơn sâu sắc đến tất giảng viên khoa Công Nghệ Thông Tin thuộc trường đại học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh dẫn dắt tạo điều kiện cho chúng em hồn thành khố luận tốt nghiệp Với hạn chế kinh nghiệm thời gian, đồ án tránh thiếu sót Chúng em mong nhận bảo, đóng góp ý kiến thầy để bọn em bổ sung nâng cao kiến thức nhằm phục vụ tốt đồ án sau Xin chân thành cảm ơn Tp Hồ Chí Minh, ngày 23 tháng 12 năm 2022 Nhóm sinh viên thực Nguyễn Hoàng Huy & Phạm Nhựt Trường ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc KHOA CNTT ******* ******* ĐỀ CƯƠNG CHI TIẾT CỦA KHOÁ LUẬN Họ tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294 Họ tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385 Ngành: Công nghệ thông tin Chuyên ngành: Hệ thống thông tin Thời gian thực hiện: Từ ngày 15/08/2022 đến ngày 23/12/2022 Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK Họ tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN NHIỆM VỤ CỦA KHOÁ LUẬN: Tiếp tục tìm hiểu, nghiên cứu cơng nghệ MERN STACK, bao gồm: MongoDB, ExpressJS, ReactJS NodeJS Kiểm tra, sửa lỗi, hoàn thành chức giao diện phát triển Tiểu Luận Chuyên Ngành Tìm hiểu, phân tích cơng nghệ, API để áp dụng vào đề tài mạng xã hội phát triển thêm tính khác cho trang web như: • Phát triển tính chặn từ ngữ tiêu cực cách áp dụng công nghệ AI • Phát triển tính tìm kiếm giọng nói • Thống kê lượt xem hình ảnh, video đăng • Bổ sung tính trị chuyện nhóm • Bổ sung tính gọi điện thoại gọi điện video người dùng KẾ HOẠCH THỰC HIỆN: STT THỜI GIAN CÔNG VIỆC 15/08/2022 - 30/09/2022 Lên kế hoạch thực 2/10/2022 - 15/10/2022 Hoàn thành tính 16/10/2022 - 05/11/2022 Xây dựng tính tìm kiếm giọng nói, audio/video call Xây dựng tính chặn nội dung 10/11/2022 - 03/12/2022 tiêu cực, chat group, đếm lượt view 04/12/2022 - 23/12/2022 Hoàn code, làm báo cáo GHI CHÚ MỤC LỤC DANH MỤC HÌNH DANH SÁCH CÁC TỪ VIẾT TẮT PHẦN 1: MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Nhiệm vụ đề tài Cách tiếp cận phạm vi nghiên cứu Ý nghĩa khoa học thực tiễn PHẦN 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu MERN Stack 1.2 MERN Stack hoạt động nào? 19 1.3 Cấu trúc MERN Stack 20 1.4 Tại chọn MERN Stack 21 1.5 Xử lý tiếng nói 22 1.6 Nội dung tiêu cực 25 1.7 Audio / Video Call 28 CHƯƠNG 2: TÌM HIỂU VỀ CÁC MẠNG XÃ HỘI ĐANG HOẠT ĐỘNG 32 2.1 Facebook 32 2.2 Twitter 34 2.3 Instagram 36 2.4 TikTok 37 2.5 YouTube 39 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG THÔNG TIN DỰ ÁN WEBSITE MẠNG XÃ HỘI 42 3.1 Đặc tả đề tài 42 3.2 Mơ hình Usecase 43 3.3 Thiết kế thành phần liệu 46 3.4 Phân tích thiết kế thành phần chức 53 3.5 Phân tích, thiết kế giao diện chức giao diện 57 CHƯƠNG 4: CÀI ĐẶT DEMO 66 4.1 Các yêu cầu môi trường cài đặt phiên phần mềm 66 4.2 Tổ chức mã nguồn chương trình 66 4.3 Cài đặt Server 67 4.4 Cài đặt Client 68 4.5 Cài đặt Admin 70 PHẦN 3: KẾT LUẬN 71 Kết đạt 71 Hạn chế 71 Hướng phát triển 71 DANH MỤC TÀI LIỆU THAM KHẢO 72 PHỤ LỤC 1: HƯỚNG DẪN CÀI ĐẶT ĐỂ CHẠY ỨNG DỤNG LOCAL 74 PHỤ LỤC 2: HƯỚNG DẪN SỬ DỤNG DEMO 75 Giao diện thơng báo: Hiển thị thơng báo có người theo dõi, thích, bình luận, chia sẻ đăng Hình 52 Giao diện thơng báo Giao diện trị chuyện nhóm: Người dùng cần nhập tên nhóm, tìm thêm thành viên để tạo trò chuyện nhóm Hình 53 Giao diện tạo trị chuyện nhóm 65 CHƯƠNG 4: CÀI ĐẶT DEMO 4.1 Các yêu cầu môi trường cài đặt phiên phần mềm - Mơi trường phát triển tích hợp (IDE): Microsoft Visual Studio - Quản lý mã nguồn: Github - Hệ quản trị sở liệu: MongoDB Atlas - Thiết kế Usecase biểu đồ: Draw.io - Phiên MongoDB: 5.0.14 - Phiên ExpressJS: 4.17.1 - Phiên ReactJS: 18.2.0 - Phiên NodeJS: 16.16.0 4.2 Tổ chức mã nguồn chương trình Hình 54 Tổ chức mã nguồn chương trình Chương trình bao gồm bao phần: - Server: sử dụng expressJS để phát triển API - Client: sử dụng reactJS, redux để thiết kế giao diện người dùng - Admin: sử dụng reactJS, react-admin để thiết kế giao diện, chức quản lí dành cho admin 66 4.3 Cài đặt Server Cài đặt package dành cho Server: @speechly/speech-recognition-polyfill: (github:speechly/speech-recognition-polyfill), @tensorflow-models/toxicity (1.2.2), @tensorflow/tfjs (4.1.0), @types/react (18.0.25), @types/react-dom (18.0.9), bcrypt (5.0.1), concurrently (6.0.0), cookie-parser (1.4.5), cors (2.8.5), dotenv (8.6.0), express (4.17.1), jsonwebtoken (8.5.1), mongoose (5.12.10), peer (0.6.1), react (18.2.0), reactdom (18.2.0), react-speech-recognition (3.10.0), socket.io (3.1.2) Tổ chức thư mục file: Hình 55 Tổ chức thư mục tệp Server Bao gồm: - controllers: để chứa code function xử lý cho routes - middleware: chứa middleware (Middleware hàm khác gọi [Route Express] trước yêu cầu hoàn tất.) - models: dùng để cung cấp liệu, thực kết nối, trích lọc, chèn, chỉnh sửa liệu database, tương tác với file system, network - routes: dùng để chuyển hướng URL đến hàm xử lý tương ứng - env: chứa tham số cấu hình - server.js: tạo kết nối đến express, mongoDB socket.io - socketServer.js: chứa phương thức socket.io Tạo kết nối đến sở liệu MongoDB: 67 Hình 56 Kết nối với MongoDB atlas Cấu hình file env để tạo tham số với đường dẫn tới mongoDB: Hình 57 Cấu hình biến kết nối với mongodb 4.4 Cài đặt Client Cài đặt package dành cho Client: @speechly/speech-recognition-polyfill (1.2.0), @tensorflow-models/toxicity (1.2.2), @tensorflow/tfjs (4.1.0), @testinglibrary/jest-dom (5.11.9), @testing-library/react (11.2.3), @testing-library/user-event (12.6.2), @types/react (18.0.25), @types/react-dom (18.0.9), axios (0.21.1), moment (2.29.1), peerjs (1.3.2), react (18.2.0), react-dom (18.2.0), react-redux (7.2.4), reactrouter-dom (5.2.0), react-scripts (4.0.1), react-share (4.3.1), react-speech-recognition 68 (3.10.0), react-text-toxicity (0.1.0), redux (4.1.0), redux-devtools-extension (2.13.9), redux-thunk (2.3.0), socket.io-client (3.1.2), web-vitals (0.2.4) Tổ chức thư mục file: Hình 58 Tổ chức thư mục tệp Client Bao gồm: - audio: chứa file âm cho ứng dụng (ví dụ âm thông báo) - components: chứa thành phần giao diện tái sử dụng - customRouter: dùng để tạo Router tuỳ chỉnh - images: chứa file hình ảnh - pages: trang giao diện ứng dụng trang chủ, trang nhắn tin, - redux: chứa actions reducers để quản lí state - styles: chứa file css dùng để tạo “style” cho ứng dụng - utils: chứa file tiện ích hỗ trợ q trình cấu hình, gửi yêu cầu http, xác thực thông tin 69 - App.js: file chứa route dùng để render page - socketClient.js: chứa phương thức socket.io-client 4.5 Cài đặt Admin Cài đặt package dành cho Admin: @testing-library/jest-dom (5.11.4), @testing-library/react (11.1.0), @testing-library/user-event (12.1.10), axios (0.24.0), radata-simple-rest (3.19.3), react (17.0.2), react-admin (3.19.3), react-dom (17.0.2), reactscripts: 4.0.3), web-vitals (1.0.1) Tổ chức thư mục file: Hình 59 Tổ chức thư mục tệp Admin Bao gồm: - components: chứa thành phần giao diện tái sử dụng - Posts: chứa giao diện để quản lí đăng - Users: chứa giao diện để quản lí người dùng - App.js: file chứa route dùng để render page 70 PHẦN 3: KẾT LUẬN Kết đạt Đề tài đạt kết theo mục tiêu đề ra, học thêm kiến thức, kỹ mới, công nghệ áp dụng điều để xây dựng nên website mạng xã hội: - Đếm số lượt view viết - Tìm kiếm giọng nói - Chặn nội dung tiêu cực - Audio/Video call - Chat group Hạn chế Do thời gian thực đề tài tương đối hạn chế nên chương trình khơng thể tránh thiếu sót định Vẫn cịn có số trang chưa hồn thành đầy đủ xác ràng buộc liệu chưa đầy đủ Hướng phát triển Việc phát chặn nội dung tiêu cực hạn chế chỗ phát tiếng Anh, nhóm chúng em mong muốn tìm hiểu phát triển tảng tiếng Việt nhiều ngơn ngữ khác Bên cạnh cơng nghệ hỗ trợ tải website yếu, cần phương pháp giải vấn đề Từ em mong muốn tìm hiểu phương pháp giúp hệ thống mạnh mẽ ổn định 71 DANH MỤC TÀI LIỆU THAM KHẢO [1] H Mirs, “VIBLO,” 12 2017 [Trực tuyến] Available: https://viblo.asia/p/gioithieu-mern-stack-bWrZnv4vZxw [2] “jobpro,” 2017 [Trực tuyến] Available: https://jobpro.vn/bai-viet/node-js-la-gi/ [3] “openplanning.net,” 2020 [Trực tuyến] Available: https://openplanning.net/11921/cai-dat-nodejs-tren-windows [4] L Nguyen, “Itnavi,” 26 2021 [Trực tuyến] Available: https://itnavi.com.vn/blog/expressjs-la-gi/?amp [5] “Expressjs,” [Trực tuyến] Available: https://expressjs.com/en/starter/installing.html [6] H T Hieu, “Viblo,” 24 2017 [Trực tuyến] Available: https://viblo.asia/p/reactjsuu-diem-va-nhuoc-diem-V3m5WzexlO7 [7] T Vuong, 29 2018 [Trực tuyến] Available: https://viblo.asia/p/cai-dat-moitruong-de-chay-reactjs-oOVlY1Pvl8W [8] “Mongodb,” [Trực tuyến] Available: https://www.mongodb.com/mern-stack [9] H Mirs, “Viblo,” 12 2017 [Trực tuyến] Available: https://viblo.asia/p/gioi-thieumern-stack-bWrZnv4vZxw [10] “Thpanorama,” 2019 [Trực tuyến] Available: https://vi.thpanorama.com/articles/tecnologa/14-ventajas-y-desventajas-de-usarfacebook.html [11] “Sunbook,” 2021 [Trực tuyến] Available: https://blog.sunbook.vn/marketingtwitter-uu-va-nhuoc-diem [12] “24h.com,” 17 10 2018 [Trực tuyến] Available: https://www.24h.com.vn/khampha-cong-nghe/vi-sao-tiktok-la-mot-trong-nhung-mang-xa-hoi-hot-nhat-hien-nayc675a997708.html [13] “Nguyen Thi Ngoc Thu,” 13 2020 [Trực tuyến] Available: https://namkylan.com/kien-thuc/kinh-doanh/tik-tok-la-gi/ 72 [14] D Thien, “Aflex,” 11 2020 [Trực tuyến] Available: https://adflex.vn/youtube-lagi-kiem-tien-tu-youtube-nhu-the-nao/ [15] Thanh, “Viblo,” 2018 [Trực tuyến] Available: https://viblo.asia/p/mongodb-lagi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N [16] “thpanorama,” 2019 [Trực tuyến] Available: https://vi.thpanorama.com/articles/cultura-general/las-8-ventajas-y-desventajas-deinstagram-ms-relevantes.html [17] “Wikipedia,” [Trực tuyến] Available: https://vi.wikipedia.org/wiki/TikTok [18] https://www.npmjs.com/package/react-speech-recognition [19] https://blog.loginradius.com/engineering/quick-look-at-react-speech-recognition/ [20] https://github.com/aralroca/react-text-toxicity [21] https://www.sciencedirect.com/science/article/pii/S1877050922007256 73 PHỤ LỤC 1: HƯỚNG DẪN CÀI ĐẶT ĐỂ CHẠY ỨNG DỤNG LOCAL - Cài đặt Node JS, chi tiết cài đặt có hướng dẫn chương - Clone soure tại: https://github.com/binoe-dev/MERN-Social-media - Setup cluster MongoDB với hướng dẫn tại: https://www.mongodb.com/basics/clusters/mongodb-cluster-setup - Setup tài khoản Cloudinary tại: https://cloudinary.com/documentation/how_to_integrate_cloudinary - Trong file env dán đường dẫn mongoDB vào API key: MONGODB_URL - Mở terminal chạy lệnh: ‘npm install’ để cài đặt package cần thiết - Mở terminal chạy lệnh: ‘cd client && npm install’ để cài đặt package cần thiết cho client - Chạy lệnh ‘npm run dev’ để chạy ứng dụng local bên - Server chạy cục địa chỉ: http://localhost:5000 - Client chạy cục địa chỉ: http://localhost:3000 - Admin chạy cục địa chỉ: http://localhost:3001 74 PHỤ LỤC 2: HƯỚNG DẪN SỬ DỤNG DEMO - Link website mạng xã hội: https://social-media-mearn.onrender.com/ - Link website admin: https://social-media-mearn-dasboard.onrender.com/ - Tài khoản admin: admin@gmail.com/123456 Sử dụng tài khoản mật để đăng nhập vào mạng xã hội, chưa có tài khoản bấm vào Register Now để đăng ký tài khoản 75 Trên trang home ta có thao tác Menu người dùng để vào trang cá nhân đăng xuất Danh sách người dùng đề xuất Thanh tìm kiếm dùng để tìm kiếm người dùng Thanh status để tạo viết bấm vào Trên giao diện message ta có danh sách lịch sử chat button 76 Giao diện tạo group chat Giao diện thông báo hiển thị trạng thái user mà ta theo dõi 77 Trang cá nhân hiển thị thông tin cá nhân button edit profile, report 78