17 Phần 1 : MỞ ĐẦU 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" không chỉ là một nhiệm vụ học thuật thông thường mà còn là một thách thức qua
NỘI DUNG
MongoDB là một hệ thống quản lý cơ sở dữ liệu (Database Management System
- DBMS) thuộc loại NoSQL, được thiết kế theo mô hình hướng tài liệu (document) MongoDB không sử dụng cấu trúc dữ liệu theo mô hình bảng như các hệ thống quản lý cơ sở dữ liệu quan hệ, mà thay vào đó, nó sử dụng mô hình dữ liệu linh hoạt gọi là BSON (Binary JSON) BSON là một định dạng lưu trữ dựa trên JSON, giúp MongoDB lưu trữ và truy xuất dữ liệu một cách linh hoạt
Mỗi bảng trong MongoDB được gọi là "collection," và mỗi bản ghi là một
"document" Điều đặc biệt là mỗi document trong một collection có thể có cấu trúc khác nhau, do đó, không có yêu cầu cứng nhắc về schema như trong các hệ thống quan hệ
Vì dữ liệu được lưu trữ dưới dạng document JSON, các truy vấn có thể được thực hiện một cách nhanh chóng và hiệu quả MongoDB hỗ trợ nhiều tính năng như indexing, tìm kiếm phức tạp, và khả năng mở rộng ngang để đáp ứng nhu cầu xử lý lớn và phức tạp
Hình 1.1: Logo MongoDB Hình 1.1: Logo MongoDB Hình 1.2
CƠ SỞ LÝ THUYẾT
NODE.JS
Chương 2 : KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ
2.2 THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG
Chương 3 : MÔ HÌNH HÓA YÊU CẦU
3.1 DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG
3.2 LƯỢC ĐỒ CHỨC NĂNG (USECASE DIAGRAM)
3.5 LƯỢC ĐỒ QUAN HỆ THỰC THỂ ERD
Chương 4 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Chương 5 CÀI ĐẶT VÀ KIỂM THỬ
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
5 NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN
STT Thời gian Công việc
Phân tích hướng phát triển
Thống kê nghiệp vụ và quy định cho từng đối tượng, vẽ biểu mẫu cho các chức năng mới
Vẽ mô hình thực thể ERD
Front_end: Xây dựng, cập nhật giao diện hiển thị bài viết, đăng bài
Back_end: Cập nhật api đăng bài viết, xem bài viết
Front_end: Xây dựng giao diện tạo đăng ký, đăng nhập có xác thực OTP qua mail
Back_end: Cập nhật api đăng ký, quên mật khẩu có xác thực OTP qua mail
Front_end: Xây dựng giao diện tạo nhóm, trang nhóm
Back_end: Xây dựng api tạo nhóm, api xem thông tin nhóm
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của guest(khách)
Back_end: Xây dựng api truy cập nhóm của guest(khách)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của member(thành viên nhóm)
Back_end: Xây dựng api truy cập nhóm của member(thành viên nhóm)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của admin(quản trị viên)
Back_end: Xây dựng api truy cập nhóm của admin(quản trị viên)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của super admin(quản trị viên tạo nhóm)
Back_end: Xây dựng api truy cập nhóm của super admin (quản trị viên tạo nhóm)
Kiểm thử và sửa lỗi
Tp Hồ Chí Minh, ngày 04 tháng 03 năm 2024
Huỳnh Hùng Phú Ý kiến của giáo viên hướng dẫn
(Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 17
2 MỤC ĐÍCH CỦA ĐỀ TÀI 18
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 20
Chương 1 : CƠ SỞ LÝ THUYẾT 22
Chương 2 : PHÂN TÍCH VÀ THIẾT KẾ 32
2.2 THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG 34
Chương 3 : MÔ HÌNH HÓA YÊU CẦU 95
3.1 DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG 95
3.2 LƯỢC ĐỒ CHỨC NĂNG(USECASE DIAGRAM) 100
3.5 LƯỢC ĐỒ CƠ SỞ DŨ LIỆU 119
Chương 4 : THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 120
4.4 MÀN HÌNH NHẬP OTP ĐĂNG KÝ 123
4.5 MÀN HÌNH CHÍNH CỦA NGƯỜI DÙNG 124
4.7 MÀN HÌNH TRANG CÁ NHÂN 126
4.8 MÀN HÌNH DANH SÁCH LỜI MỜI KẾT BẠN 127
4.9 MÀN HÌNH TẠO BÀI VIẾT MỚI 128
4.10 MÀN HÌNH CHI TIẾT BÀI VIẾT 129
4.11 MÀN HÌNH TRANG CÁ NHÂN CỦA BẠN BÈ 130
4.12 MÀN HÌNH TRANG CÁ NHÂN CỦA NGƯỜI LẠ 131
4.14 MÀN HÌNH DANH SÁCH TÀI KHOẢN NGƯỜI DÙNG 133
4.15 MÀN HÌNH TÙY CHỌN NHÓM 134
4.17 MÀN HÌNH XEM NHÓM BẠN ĐÃ THAM GIA 136
4.18 MÀN HÌNH BÀI VIẾT TRONG NHÓM 137
4.19 MÀN HÌNH NỘI QUY NHÓM 138
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT 139
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM 140
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT 141
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO 142
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM 143
Chương 5 : CÀI ĐẶT VÀ KIỂM THỬ 144
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 148
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 150
NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN 153
Bảng 2.1: Bảng thống kê nghiệp vụ guest 34
Bảng 2.2: Bảng thống kê các quy định cho từng nghiệp vụ của guest 34
Bảng 2.3: Bảng thống kê nghiệp vụ của member 37
Bảng 2.4: Bảng thống kê các quy định cho từng nghiệp vụ của member 39
Bảng 2.5: Bảng thống kê nghiệp vụ của admin 59
Bảng 2.6: Bảng thống kê các quy định cho từng nghiệp vụ của admin 60
Bảng 2.7: Bảng thống kê nghiệp vụ của guest(khi vào nhóm) 67
Bảng 2.8: Bảng thống kê các quy định cho từng nghiệp vụ của guest(khi vào nhóm) 68 Bảng 2.9: Bảng thống kê nghiệp vụ của member(khi vào nhóm) 68
Bảng 2.10: Bảng thống kê các quy định cho từng nghiệp vụ của member(khi vào nhóm) 69
Bảng 2.11: : Bảng thống kê nghiệp vụ của admin(khi vào nhóm) 73
Bảng 2.12: Bảng thống kê các quy định cho từng nghiệp vụ của admin(khi vào nhóm) 75
Bảng 2.13: Bảng thống kê nghiệp vụ của super admin(khi vào nhóm) 85
Bảng 2.14: Bảng thống kê các quy định cho từng nghiệp vụ của super admin(khi vào nhóm) 87
Bảng 3.1: Danh sách các tác nhân và chức năng của hệ thống 95
Bảng 3.5: Usecase gửi yêu cầu 103
Bảng 3.6: Usecase xem trang cá nhân 104
Bảng 3.7 : Usecase chỉnh sửa bài viết 104
Bảng 3.8: Usecase chỉnh sửa thông tin tài khoản 105
Bảng 3.9: Usecase đặt lại mật khẩu 106
Bảng 3.10: Usecase quên mật khẩu 106
Bảng 3.11 : Usecase xóa bài viết 107
Bảng 3.12: Usecase vô hiệu tài khoản 107
Bảng 3.13: Usecase xem báo cáo 108
Bảng 3.14: Usecase chấp nhận yêu cầu vào nhóm 109
Bảng 3.15: Usecase chỉnh sửa quyền 109
Bảng 4.1: Mô tả màn hình trang chủ 120
Bảng 4.2: Mô tả màn hình đăng nhập 121
Bảng 4.3: Mô tả mà hình đăng ký 122
Bảng 4.4: Mô tả màn hình nhập otp đăng ký 123
Bảng 4.5: Mô tả màn hình chính của người dùng 124
Bảng 4.6: Mô tả màn hình thông báo 125
Bảng 4.7: Mô tả màn hình trang cá nhân 126
Bảng 4.8: Mô tả màn hình danh sách lời mời kết bạn 127
Bảng 4.9: Mô tả màn hình tạo bài viết mới 128
Bảng 4.10: Mô tả màn hình tạo bài viết 129
Bảng 4.11: Mô tả màn hình trang cá nhân của bạn bè 130
Bảng 4.12: Mô tả màn hình trang cá nhân của người lạ 131
Bảng 4.13: Mô tả màn hình của admin 132
Bảng 4.14: Mô tả màn hình danh sách bài viết của người dùng 133
Bảng 4.15 : Mô tả màn hình tùy chọn nhóm 134
Bảng 4.16: Mô tả màn hình tạo nhóm 135
Bảng 4.17: Mô tả màn hình xem nhóm bạn đã tham gia 136
Bảng 4.18: Mô tả màn hình thông tin nhóm với vai trò admin 137
Bảng 4.19: Mô tả màn hình nội quy nhóm 138
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết 139
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm 140
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt 141
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo 142
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm 143
Bảng 5.1: Phạm vi kiểm thử 145
Bảng 5.2: Kết quả kiểm thử 146
Hình 2.1: Biểu mẫu đăng ký 35
Hình 2.2: Biểu mẫu đăng nhập 36
Hình 2.3: Biểu mẫu theo dõi 46
Hình 2.4: Biểu mẫu xác nhận 47
Hình 2.5: Biểu mẫu hủy kết bạn 48
Hình 2.6: Biểu mẫu xem bài viết đã lưu 48
Hình 2.7: Biểu mẫu xem bài viết đã đăng 49
Hình 2.8: Biểu mẫu xem thông báo 50
Hình 2.9: Biểu mẫu tìm kiếm tài khoản 51
Hình 2.10: Biểu mẫu thống kê bạn bè 52
Hình 2.11: Biểu mẫu thống kê người theo dõi 53
Hình 2.12: Biểu mẫu thống kê người đang theo dõi 53
Hình 2.13: Biểu mẫu đăng tải bài viết 54
Hình 2.14: Biểu mẫu xóa bài viết 54
Hình 2.15: Biểu mẫu xem trang chủ 55
Hình 2.16: Biểu mẫu xem bài viết 55
Hình 2.17: Biểu mẫu yêu thích bình luận 56
Hình 2.18: Biểu mẫu tạo nhóm 57
Hình 2.19: Biểu mẫu xem danh sách nhóm 58
Hình 2.20: Biểu mẫu xem trang nhóm 59
Hình 2.21: Biểu mẫu chỉnh sửa thông tin 62
Hình 2.22: Biểu mẫu đăng xuất 63
Hình 2.23: Biểu mẫu:đặt lại mật khẩu 63
Hình 2.24: Biểu mẫu quên mật khẩu 64
Hình 2.25: Biểu mẫu xóa bài viết 65
Hình 2.26: Biểu mẫu bài viết theo tháng 66
Hình 2.27: Biểu mẫu vô hiệu tài khoản 67
Hình 2.28: Biểu mẫu báo cáo bài viết 71
Hình 2.29: Biểu mẫu xem bài viết chờ duyệt 72
Hình 2.30: Biểu mẫu rời nhóm 73
Hình 2.31: Biểu mẫu mời vào nhóm 79
Hình 2.32: Biểu mẫu chỉnh sửa nội quy 80
Hình 2.33: Biểu mẫu thống kê thành viên 80
Hình 2.34: Biểu mẫu xem bài viết chờ duyệt 81
Hình 2.35: Biểu mẫu duyệt bài viết 82
Hình 2.36: Biểu mẫu xem yêu cầu vào nhóm 83
Hình 2.37: Biểu mẫu xem tất cả bài viết 84
Hình 2.38: Biểu mẫu báo cáo bài viết 84
Hình 2.39: Biểu mẫu xem tất cả thành viên 85
Hình 2.40: Biểu mẫu xem tất cả admin 93
Hình 2.41: Biểu mẫu cài đặt 94
Hình 3.1: Lược đồ chức năng phạm vi ứng dụng 100
Hình 3.2: Lược đồ chức năng trong phạm vi xem trang nhóm 101
Hình 3.3: Lược đồ đăng ký 111
Hình 3.4: Lược đồ đăng nhập 112
Hình 3.5: Lược đồ theo dõi 112
Hình 3.6: Lược đồ gửi yêu cầu kết bạn 113
Hình 3.7: Lược đồ xem trang cá nhân 113
Hình 3.8: Lược đồ chỉnh sửa bài viết 114
Hình 3.9: Lược đồ chỉnh sửa thông tin tài khoản 114
Hình 3.10: Lược đồ đặt lại mật khẩu 115
Hình 3.11: Lược đồ quên mật khẩu 116
Hình 3.12: Lược đồ xóa bài viết 116
Hình 3.13: Lược đồ vô hiệu tài khoản 117
Hình 3.14: Lược đồ xem báo cáo bài viết 117
Hình 3.15: Lược đồ chấp nhận yêu cầu vào nhóm 118
Hình 3.16: Lược đồ chỉnh sửa quyền 118
Hình 3.17: Lược đồ quan hệ thực thể 119
Hình 4.1: Màn hình trang chủ 120
Hình 4.2: Màn hình đăng nhập 121
Hình 4.3: Màn hình đăng ký 122
Hình 4.4: Màn hình nhập otp đăng ký 123
Hình 4.5: Màn hình chính của người dùng 124
Hình 4.6: Màn hình thông báo 125
Hình 4.7: Màn hình trang cá nhân 126
Hình 4.8: Màn hình danh sách lời mời kết bạn 127
Hình 4.9: Màn hình tạo bài viết mới 128
Hình 4.10: Màn hình chi tiết bài viết 129
Hình 4.11: Màn hình trang cá nhân của bạn bè 130
Hình 4.12: Màn hình trang cá nhân của người lạ 131
Hình 4.13: Màn hình của admin 132
Hình 4.14: Màn hình danh sách bài viết của người dùng 133
Hình 4.15: Màn hình tùy chọn nhóm 134
Hình 4.16: Màn hình tạo nhóm 135
Hình 4.17: Màn hình xem nhóm bạn đã tham gia 136
Hình 4.18: Màn hình bài viết trong nhóm 137
Hình 4.19: Màn hình nội quy nhóm 138
Hình 4.20: Cửa sổ báo cáo bài viết 139
Hình 4.21: Màn hình duyệt thành viên vào nhóm 140
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt 141
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo 142
Hình 4.24: Màn hình thống kê thông số của nhóm 143
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" không chỉ là một nhiệm vụ học thuật thông thường mà còn là một thách thức quan trọng đối với sinh viên công nghệ thông tin chuyên ngành công nghệ phần mềm Trong trình bày khóa luận này, chúng ta sẽ thảo luận về tính cấp thiết của dự án này, nhấn mạnh những khía cạnh quan trọng về sự phổ biến của mạng xã hội và lợi ích của việc sử dụng MERN Stack
1.1 Sự phổ biến và quan trọng của mạng xã hội
Trong xã hội hiện đại, mạng xã hội không chỉ là một phương tiện giải trí mà còn là một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Đây là nơi mà con người chia sẻ, kết nối và tương tác với nhau, không gian mà đòi hỏi sự linh hoạt và đồng thuận từ các ứng dụng công nghệ
1.2 Lợi ích của website mạng xã hội sử dụng MERN Stack
1.2.1 MERN Stack và tính linh hoạt
MERN Stack, bao gồm MongoDB, Express.js, React.js, và Node.js, là sự kết hợp hoàn hảo giữa khả năng linh hoạt và hiệu suất cao Mỗi thành phần đều đóng vai trò quan trọng trong việc xây dựng một hệ thống mạng xã hội động và mạnh mẽ
1.2.2 Tương tác thời gian thực và giao diện người dùng
React.js, với khả năng xử lý tương tác thời gian thực, mang lại trải nghiệm người dùng tốt nhất Giao diện người dùng đẹp và tương tác sẽ giúp thu hút người sử dụng và tăng cường tính tương tác
1.2.3 An toàn dữ liệu và quản lý thông tin
MongoDB, với tính năng không SQL, không chỉ giúp quản lý dữ liệu một cách hiệu quả mà còn đảm bảo an toàn thông tin cá nhân của người dùng Các biện pháp bảo mật cần được tích hợp để ngăn chặn các rủi ro đe dọa an ninh
1.3 Thách thức và cơ hội trong xây dựng mạng xã hội
1.3.1 Thách thức: Quản lý dữ liệu và bảo mật
Trong quá trình phát triển, việc quản lý dữ liệu và đảm bảo an toàn thông tin là một thách thức đáng kể Cần xem xét kỹ lưỡng về vấn đề bảo mật để ngăn chặn bất kỳ rủi ro nào có thể xâm phạm quyền riêng tư của người dùng
1.3.2 Cơ hội: Tạo cộng đồng và kết nối
Xây dựng một mạng xã hội không chỉ là về công nghệ mà còn là về việc tạo ra một không gian nơi mọi người có thể kết nối và chia sẻ Cơ hội này mang lại giá trị lâu dài cho cả người phát triển và người sử dụng
Tổng kết lại, xây dựng một website mạng xã hội sử dụng MERN Stack không chỉ mang lại những lợi ích về mặt công nghệ mà còn mở ra cơ hội xây dựng cộng đồng và tạo nên sự kết nối trong xã hội ngày nay Đây là một dự án không chỉ đòi hỏi kiến thức chuyên sâu mà còn đòi hỏi sự sáng tạo và tinh thần đổi mới
2 MỤC ĐÍCH CỦA ĐỀ TÀI
Mục tiêu của đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" là tập trung vào việc phát triển và triển khai một hệ thống mạng xã hội hiện đại, linh hoạt, và mạnh mẽ dành cho giảng viên, nhân viên và sinh viên trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh
2.1 Xây dựng một nền tảng mạng xã hội hoạt động mượt mà và linh hoạt
Phát triển hệ thống để đảm bảo sự ổn định và độ mượt mà trong quá trình sử dụng, nhất là khi đối mặt với số lượng người dùng lớn
Thiết kế với khả năng mở rộng dễ dàng để có thể đáp ứng được nhu cầu ngày càng tăng về sự tham gia từ cộng đồng
2.2 Tối ưu hóa trải nghiệm người dùng
Tạo ra giao diện người dùng thân thiện, hiện đại và dễ sử dụng, giúp người dùng dễ dàng tương tác, chia sẻ thông tin và tạo cộng đồng trực tuyến, tạo trải nghiệm mượt mà và thú vị cho người dùng
2.3 Quản lý dữ liệu hiệu quả với MongoDB
Sử dụng MongoDB để lưu trữ và quản lý dữ liệu người dùng một cách linh hoạt và hiệu quả, đảm bảo sự an toàn và bảo mật thông tin cá nhân
2.4 Tích hợp công nghệ MERN Stack một cách hiệu quả
Kết hợp các thành phần của MERN Stack (MongoDB, Express.js, React.js, và Node.js) một cách hiệu quả để tận dụng lợi ích của từng công nghệ và tạo ra một hệ thống hoàn chỉnh và mạnh mẽ
2.5 Tạo cộng đồng trực tuyến mang lại giá trị
Xây dựng không chỉ là việc kỹ thuật, mà còn là việc tạo ra một không gian trực tuyến nơi mọi người có thể kết nối, giao tiếp và chia sẻ ý kiến, tạo ra một cộng đồng trực tuyến có giá trị
Liên tục tối ưu hóa mã nguồn và cơ sở dữ liệu để đáp ứng yêu cầu của một hệ thống mạng xã hội quy mô lớn
2.7 Phát triển tương lai Đặt ra kế hoạch cho phát triển và mở rộng tương lai dựa trên những đóng góp và trải nghiệm người dùng để duy trì tính cập nhật và hấp dẫn của nền tảng
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
PHÂN TÍCH VÀ THIẾT KẾ
THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG
Chương 3 : MÔ HÌNH HÓA YÊU CẦU
3.1 DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG
3.2 LƯỢC ĐỒ CHỨC NĂNG (USECASE DIAGRAM)
3.5 LƯỢC ĐỒ QUAN HỆ THỰC THỂ ERD
Chương 4 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Chương 5 CÀI ĐẶT VÀ KIỂM THỬ
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
5 NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN
STT Thời gian Công việc
Phân tích hướng phát triển
Thống kê nghiệp vụ và quy định cho từng đối tượng, vẽ biểu mẫu cho các chức năng mới
Vẽ mô hình thực thể ERD
Front_end: Xây dựng, cập nhật giao diện hiển thị bài viết, đăng bài
Back_end: Cập nhật api đăng bài viết, xem bài viết
Front_end: Xây dựng giao diện tạo đăng ký, đăng nhập có xác thực OTP qua mail
Back_end: Cập nhật api đăng ký, quên mật khẩu có xác thực OTP qua mail
Front_end: Xây dựng giao diện tạo nhóm, trang nhóm
Back_end: Xây dựng api tạo nhóm, api xem thông tin nhóm
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của guest(khách)
Back_end: Xây dựng api truy cập nhóm của guest(khách)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của member(thành viên nhóm)
Back_end: Xây dựng api truy cập nhóm của member(thành viên nhóm)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của admin(quản trị viên)
Back_end: Xây dựng api truy cập nhóm của admin(quản trị viên)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của super admin(quản trị viên tạo nhóm)
Back_end: Xây dựng api truy cập nhóm của super admin (quản trị viên tạo nhóm)
Kiểm thử và sửa lỗi
Tp Hồ Chí Minh, ngày 04 tháng 03 năm 2024
Huỳnh Hùng Phú Ý kiến của giáo viên hướng dẫn
(Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 17
2 MỤC ĐÍCH CỦA ĐỀ TÀI 18
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 20
Chương 1 : CƠ SỞ LÝ THUYẾT 22
Chương 2 : PHÂN TÍCH VÀ THIẾT KẾ 32
2.2 THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG 34
Chương 3 : MÔ HÌNH HÓA YÊU CẦU 95
3.1 DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG 95
3.2 LƯỢC ĐỒ CHỨC NĂNG(USECASE DIAGRAM) 100
3.5 LƯỢC ĐỒ CƠ SỞ DŨ LIỆU 119
Chương 4 : THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 120
4.4 MÀN HÌNH NHẬP OTP ĐĂNG KÝ 123
4.5 MÀN HÌNH CHÍNH CỦA NGƯỜI DÙNG 124
4.7 MÀN HÌNH TRANG CÁ NHÂN 126
4.8 MÀN HÌNH DANH SÁCH LỜI MỜI KẾT BẠN 127
4.9 MÀN HÌNH TẠO BÀI VIẾT MỚI 128
4.10 MÀN HÌNH CHI TIẾT BÀI VIẾT 129
4.11 MÀN HÌNH TRANG CÁ NHÂN CỦA BẠN BÈ 130
4.12 MÀN HÌNH TRANG CÁ NHÂN CỦA NGƯỜI LẠ 131
4.14 MÀN HÌNH DANH SÁCH TÀI KHOẢN NGƯỜI DÙNG 133
4.15 MÀN HÌNH TÙY CHỌN NHÓM 134
4.17 MÀN HÌNH XEM NHÓM BẠN ĐÃ THAM GIA 136
4.18 MÀN HÌNH BÀI VIẾT TRONG NHÓM 137
4.19 MÀN HÌNH NỘI QUY NHÓM 138
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT 139
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM 140
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT 141
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO 142
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM 143
Chương 5 : CÀI ĐẶT VÀ KIỂM THỬ 144
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 148
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 150
NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN 153
Bảng 2.1: Bảng thống kê nghiệp vụ guest 34
Bảng 2.2: Bảng thống kê các quy định cho từng nghiệp vụ của guest 34
Bảng 2.3: Bảng thống kê nghiệp vụ của member 37
Bảng 2.4: Bảng thống kê các quy định cho từng nghiệp vụ của member 39
Bảng 2.5: Bảng thống kê nghiệp vụ của admin 59
Bảng 2.6: Bảng thống kê các quy định cho từng nghiệp vụ của admin 60
Bảng 2.7: Bảng thống kê nghiệp vụ của guest(khi vào nhóm) 67
Bảng 2.8: Bảng thống kê các quy định cho từng nghiệp vụ của guest(khi vào nhóm) 68 Bảng 2.9: Bảng thống kê nghiệp vụ của member(khi vào nhóm) 68
Bảng 2.10: Bảng thống kê các quy định cho từng nghiệp vụ của member(khi vào nhóm) 69
Bảng 2.11: : Bảng thống kê nghiệp vụ của admin(khi vào nhóm) 73
Bảng 2.12: Bảng thống kê các quy định cho từng nghiệp vụ của admin(khi vào nhóm) 75
Bảng 2.13: Bảng thống kê nghiệp vụ của super admin(khi vào nhóm) 85
Bảng 2.14: Bảng thống kê các quy định cho từng nghiệp vụ của super admin(khi vào nhóm) 87
Bảng 3.1: Danh sách các tác nhân và chức năng của hệ thống 95
Bảng 3.5: Usecase gửi yêu cầu 103
Bảng 3.6: Usecase xem trang cá nhân 104
Bảng 3.7 : Usecase chỉnh sửa bài viết 104
Bảng 3.8: Usecase chỉnh sửa thông tin tài khoản 105
Bảng 3.9: Usecase đặt lại mật khẩu 106
Bảng 3.10: Usecase quên mật khẩu 106
Bảng 3.11 : Usecase xóa bài viết 107
Bảng 3.12: Usecase vô hiệu tài khoản 107
Bảng 3.13: Usecase xem báo cáo 108
Bảng 3.14: Usecase chấp nhận yêu cầu vào nhóm 109
Bảng 3.15: Usecase chỉnh sửa quyền 109
Bảng 4.1: Mô tả màn hình trang chủ 120
Bảng 4.2: Mô tả màn hình đăng nhập 121
Bảng 4.3: Mô tả mà hình đăng ký 122
Bảng 4.4: Mô tả màn hình nhập otp đăng ký 123
Bảng 4.5: Mô tả màn hình chính của người dùng 124
Bảng 4.6: Mô tả màn hình thông báo 125
Bảng 4.7: Mô tả màn hình trang cá nhân 126
Bảng 4.8: Mô tả màn hình danh sách lời mời kết bạn 127
Bảng 4.9: Mô tả màn hình tạo bài viết mới 128
Bảng 4.10: Mô tả màn hình tạo bài viết 129
Bảng 4.11: Mô tả màn hình trang cá nhân của bạn bè 130
Bảng 4.12: Mô tả màn hình trang cá nhân của người lạ 131
Bảng 4.13: Mô tả màn hình của admin 132
Bảng 4.14: Mô tả màn hình danh sách bài viết của người dùng 133
Bảng 4.15 : Mô tả màn hình tùy chọn nhóm 134
Bảng 4.16: Mô tả màn hình tạo nhóm 135
Bảng 4.17: Mô tả màn hình xem nhóm bạn đã tham gia 136
Bảng 4.18: Mô tả màn hình thông tin nhóm với vai trò admin 137
Bảng 4.19: Mô tả màn hình nội quy nhóm 138
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết 139
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm 140
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt 141
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo 142
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm 143
Bảng 5.1: Phạm vi kiểm thử 145
Bảng 5.2: Kết quả kiểm thử 146
Hình 2.1: Biểu mẫu đăng ký 35
Hình 2.2: Biểu mẫu đăng nhập 36
Hình 2.3: Biểu mẫu theo dõi 46
Hình 2.4: Biểu mẫu xác nhận 47
Hình 2.5: Biểu mẫu hủy kết bạn 48
Hình 2.6: Biểu mẫu xem bài viết đã lưu 48
Hình 2.7: Biểu mẫu xem bài viết đã đăng 49
Hình 2.8: Biểu mẫu xem thông báo 50
Hình 2.9: Biểu mẫu tìm kiếm tài khoản 51
Hình 2.10: Biểu mẫu thống kê bạn bè 52
Hình 2.11: Biểu mẫu thống kê người theo dõi 53
Hình 2.12: Biểu mẫu thống kê người đang theo dõi 53
Hình 2.13: Biểu mẫu đăng tải bài viết 54
Hình 2.14: Biểu mẫu xóa bài viết 54
Hình 2.15: Biểu mẫu xem trang chủ 55
Hình 2.16: Biểu mẫu xem bài viết 55
Hình 2.17: Biểu mẫu yêu thích bình luận 56
Hình 2.18: Biểu mẫu tạo nhóm 57
Hình 2.19: Biểu mẫu xem danh sách nhóm 58
Hình 2.20: Biểu mẫu xem trang nhóm 59
Hình 2.21: Biểu mẫu chỉnh sửa thông tin 62
Hình 2.22: Biểu mẫu đăng xuất 63
Hình 2.23: Biểu mẫu:đặt lại mật khẩu 63
Hình 2.24: Biểu mẫu quên mật khẩu 64
Hình 2.25: Biểu mẫu xóa bài viết 65
Hình 2.26: Biểu mẫu bài viết theo tháng 66
Hình 2.27: Biểu mẫu vô hiệu tài khoản 67
Hình 2.28: Biểu mẫu báo cáo bài viết 71
Hình 2.29: Biểu mẫu xem bài viết chờ duyệt 72
Hình 2.30: Biểu mẫu rời nhóm 73
Hình 2.31: Biểu mẫu mời vào nhóm 79
Hình 2.32: Biểu mẫu chỉnh sửa nội quy 80
Hình 2.33: Biểu mẫu thống kê thành viên 80
Hình 2.34: Biểu mẫu xem bài viết chờ duyệt 81
Hình 2.35: Biểu mẫu duyệt bài viết 82
Hình 2.36: Biểu mẫu xem yêu cầu vào nhóm 83
Hình 2.37: Biểu mẫu xem tất cả bài viết 84
Hình 2.38: Biểu mẫu báo cáo bài viết 84
Hình 2.39: Biểu mẫu xem tất cả thành viên 85
Hình 2.40: Biểu mẫu xem tất cả admin 93
Hình 2.41: Biểu mẫu cài đặt 94
Hình 3.1: Lược đồ chức năng phạm vi ứng dụng 100
Hình 3.2: Lược đồ chức năng trong phạm vi xem trang nhóm 101
Hình 3.3: Lược đồ đăng ký 111
Hình 3.4: Lược đồ đăng nhập 112
Hình 3.5: Lược đồ theo dõi 112
Hình 3.6: Lược đồ gửi yêu cầu kết bạn 113
Hình 3.7: Lược đồ xem trang cá nhân 113
Hình 3.8: Lược đồ chỉnh sửa bài viết 114
Hình 3.9: Lược đồ chỉnh sửa thông tin tài khoản 114
Hình 3.10: Lược đồ đặt lại mật khẩu 115
Hình 3.11: Lược đồ quên mật khẩu 116
Hình 3.12: Lược đồ xóa bài viết 116
Hình 3.13: Lược đồ vô hiệu tài khoản 117
Hình 3.14: Lược đồ xem báo cáo bài viết 117
Hình 3.15: Lược đồ chấp nhận yêu cầu vào nhóm 118
Hình 3.16: Lược đồ chỉnh sửa quyền 118
Hình 3.17: Lược đồ quan hệ thực thể 119
Hình 4.1: Màn hình trang chủ 120
Hình 4.2: Màn hình đăng nhập 121
Hình 4.3: Màn hình đăng ký 122
Hình 4.4: Màn hình nhập otp đăng ký 123
Hình 4.5: Màn hình chính của người dùng 124
Hình 4.6: Màn hình thông báo 125
Hình 4.7: Màn hình trang cá nhân 126
Hình 4.8: Màn hình danh sách lời mời kết bạn 127
Hình 4.9: Màn hình tạo bài viết mới 128
Hình 4.10: Màn hình chi tiết bài viết 129
Hình 4.11: Màn hình trang cá nhân của bạn bè 130
Hình 4.12: Màn hình trang cá nhân của người lạ 131
Hình 4.13: Màn hình của admin 132
Hình 4.14: Màn hình danh sách bài viết của người dùng 133
Hình 4.15: Màn hình tùy chọn nhóm 134
Hình 4.16: Màn hình tạo nhóm 135
Hình 4.17: Màn hình xem nhóm bạn đã tham gia 136
Hình 4.18: Màn hình bài viết trong nhóm 137
Hình 4.19: Màn hình nội quy nhóm 138
Hình 4.20: Cửa sổ báo cáo bài viết 139
Hình 4.21: Màn hình duyệt thành viên vào nhóm 140
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt 141
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo 142
Hình 4.24: Màn hình thống kê thông số của nhóm 143
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" không chỉ là một nhiệm vụ học thuật thông thường mà còn là một thách thức quan trọng đối với sinh viên công nghệ thông tin chuyên ngành công nghệ phần mềm Trong trình bày khóa luận này, chúng ta sẽ thảo luận về tính cấp thiết của dự án này, nhấn mạnh những khía cạnh quan trọng về sự phổ biến của mạng xã hội và lợi ích của việc sử dụng MERN Stack
1.1 Sự phổ biến và quan trọng của mạng xã hội
Trong xã hội hiện đại, mạng xã hội không chỉ là một phương tiện giải trí mà còn là một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Đây là nơi mà con người chia sẻ, kết nối và tương tác với nhau, không gian mà đòi hỏi sự linh hoạt và đồng thuận từ các ứng dụng công nghệ
1.2 Lợi ích của website mạng xã hội sử dụng MERN Stack
1.2.1 MERN Stack và tính linh hoạt
MERN Stack, bao gồm MongoDB, Express.js, React.js, và Node.js, là sự kết hợp hoàn hảo giữa khả năng linh hoạt và hiệu suất cao Mỗi thành phần đều đóng vai trò quan trọng trong việc xây dựng một hệ thống mạng xã hội động và mạnh mẽ
1.2.2 Tương tác thời gian thực và giao diện người dùng
React.js, với khả năng xử lý tương tác thời gian thực, mang lại trải nghiệm người dùng tốt nhất Giao diện người dùng đẹp và tương tác sẽ giúp thu hút người sử dụng và tăng cường tính tương tác
1.2.3 An toàn dữ liệu và quản lý thông tin
MongoDB, với tính năng không SQL, không chỉ giúp quản lý dữ liệu một cách hiệu quả mà còn đảm bảo an toàn thông tin cá nhân của người dùng Các biện pháp bảo mật cần được tích hợp để ngăn chặn các rủi ro đe dọa an ninh
1.3 Thách thức và cơ hội trong xây dựng mạng xã hội
1.3.1 Thách thức: Quản lý dữ liệu và bảo mật
Trong quá trình phát triển, việc quản lý dữ liệu và đảm bảo an toàn thông tin là một thách thức đáng kể Cần xem xét kỹ lưỡng về vấn đề bảo mật để ngăn chặn bất kỳ rủi ro nào có thể xâm phạm quyền riêng tư của người dùng
1.3.2 Cơ hội: Tạo cộng đồng và kết nối
Xây dựng một mạng xã hội không chỉ là về công nghệ mà còn là về việc tạo ra một không gian nơi mọi người có thể kết nối và chia sẻ Cơ hội này mang lại giá trị lâu dài cho cả người phát triển và người sử dụng
Tổng kết lại, xây dựng một website mạng xã hội sử dụng MERN Stack không chỉ mang lại những lợi ích về mặt công nghệ mà còn mở ra cơ hội xây dựng cộng đồng và tạo nên sự kết nối trong xã hội ngày nay Đây là một dự án không chỉ đòi hỏi kiến thức chuyên sâu mà còn đòi hỏi sự sáng tạo và tinh thần đổi mới
2 MỤC ĐÍCH CỦA ĐỀ TÀI
Mục tiêu của đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" là tập trung vào việc phát triển và triển khai một hệ thống mạng xã hội hiện đại, linh hoạt, và mạnh mẽ dành cho giảng viên, nhân viên và sinh viên trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh
2.1 Xây dựng một nền tảng mạng xã hội hoạt động mượt mà và linh hoạt
Phát triển hệ thống để đảm bảo sự ổn định và độ mượt mà trong quá trình sử dụng, nhất là khi đối mặt với số lượng người dùng lớn
Thiết kế với khả năng mở rộng dễ dàng để có thể đáp ứng được nhu cầu ngày càng tăng về sự tham gia từ cộng đồng
2.2 Tối ưu hóa trải nghiệm người dùng
Tạo ra giao diện người dùng thân thiện, hiện đại và dễ sử dụng, giúp người dùng dễ dàng tương tác, chia sẻ thông tin và tạo cộng đồng trực tuyến, tạo trải nghiệm mượt mà và thú vị cho người dùng
2.3 Quản lý dữ liệu hiệu quả với MongoDB
Sử dụng MongoDB để lưu trữ và quản lý dữ liệu người dùng một cách linh hoạt và hiệu quả, đảm bảo sự an toàn và bảo mật thông tin cá nhân
2.4 Tích hợp công nghệ MERN Stack một cách hiệu quả
Kết hợp các thành phần của MERN Stack (MongoDB, Express.js, React.js, và Node.js) một cách hiệu quả để tận dụng lợi ích của từng công nghệ và tạo ra một hệ thống hoàn chỉnh và mạnh mẽ
2.5 Tạo cộng đồng trực tuyến mang lại giá trị
Xây dựng không chỉ là việc kỹ thuật, mà còn là việc tạo ra một không gian trực tuyến nơi mọi người có thể kết nối, giao tiếp và chia sẻ ý kiến, tạo ra một cộng đồng trực tuyến có giá trị
Liên tục tối ưu hóa mã nguồn và cơ sở dữ liệu để đáp ứng yêu cầu của một hệ thống mạng xã hội quy mô lớn
2.7 Phát triển tương lai Đặt ra kế hoạch cho phát triển và mở rộng tương lai dựa trên những đóng góp và trải nghiệm người dùng để duy trì tính cập nhật và hấp dẫn của nền tảng
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
MÔ HÌNH HÓA YÊU CẦU
LƯỢC ĐỒ TUẦN TỰ
3.5 LƯỢC ĐỒ QUAN HỆ THỰC THỂ ERD
Chương 4 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Chương 5 CÀI ĐẶT VÀ KIỂM THỬ
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
5 NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN
STT Thời gian Công việc
Phân tích hướng phát triển
Thống kê nghiệp vụ và quy định cho từng đối tượng, vẽ biểu mẫu cho các chức năng mới
Vẽ mô hình thực thể ERD
Front_end: Xây dựng, cập nhật giao diện hiển thị bài viết, đăng bài
Back_end: Cập nhật api đăng bài viết, xem bài viết
Front_end: Xây dựng giao diện tạo đăng ký, đăng nhập có xác thực OTP qua mail
Back_end: Cập nhật api đăng ký, quên mật khẩu có xác thực OTP qua mail
Front_end: Xây dựng giao diện tạo nhóm, trang nhóm
Back_end: Xây dựng api tạo nhóm, api xem thông tin nhóm
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của guest(khách)
Back_end: Xây dựng api truy cập nhóm của guest(khách)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của member(thành viên nhóm)
Back_end: Xây dựng api truy cập nhóm của member(thành viên nhóm)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của admin(quản trị viên)
Back_end: Xây dựng api truy cập nhóm của admin(quản trị viên)
Front_end: Xây dựng giao diện, chức năng khi vào trang nhóm của super admin(quản trị viên tạo nhóm)
Back_end: Xây dựng api truy cập nhóm của super admin (quản trị viên tạo nhóm)
Kiểm thử và sửa lỗi
Tp Hồ Chí Minh, ngày 04 tháng 03 năm 2024
Huỳnh Hùng Phú Ý kiến của giáo viên hướng dẫn
(Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 17
2 MỤC ĐÍCH CỦA ĐỀ TÀI 18
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 20
Chương 1 : CƠ SỞ LÝ THUYẾT 22
Chương 2 : PHÂN TÍCH VÀ THIẾT KẾ 32
2.2 THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG 34
Chương 3 : MÔ HÌNH HÓA YÊU CẦU 95
3.1 DANH SÁCH CÁC TÁC NHÂN VÀ CHỨC NĂNG CỦA HỆ THỐNG 95
3.2 LƯỢC ĐỒ CHỨC NĂNG(USECASE DIAGRAM) 100
3.5 LƯỢC ĐỒ CƠ SỞ DŨ LIỆU 119
Chương 4 : THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 120
4.4 MÀN HÌNH NHẬP OTP ĐĂNG KÝ 123
4.5 MÀN HÌNH CHÍNH CỦA NGƯỜI DÙNG 124
4.7 MÀN HÌNH TRANG CÁ NHÂN 126
4.8 MÀN HÌNH DANH SÁCH LỜI MỜI KẾT BẠN 127
4.9 MÀN HÌNH TẠO BÀI VIẾT MỚI 128
4.10 MÀN HÌNH CHI TIẾT BÀI VIẾT 129
4.11 MÀN HÌNH TRANG CÁ NHÂN CỦA BẠN BÈ 130
4.12 MÀN HÌNH TRANG CÁ NHÂN CỦA NGƯỜI LẠ 131
4.14 MÀN HÌNH DANH SÁCH TÀI KHOẢN NGƯỜI DÙNG 133
4.15 MÀN HÌNH TÙY CHỌN NHÓM 134
4.17 MÀN HÌNH XEM NHÓM BẠN ĐÃ THAM GIA 136
4.18 MÀN HÌNH BÀI VIẾT TRONG NHÓM 137
4.19 MÀN HÌNH NỘI QUY NHÓM 138
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT 139
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM 140
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT 141
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO 142
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM 143
Chương 5 : CÀI ĐẶT VÀ KIỂM THỬ 144
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 148
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 150
NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN 153
Bảng 2.1: Bảng thống kê nghiệp vụ guest 34
Bảng 2.2: Bảng thống kê các quy định cho từng nghiệp vụ của guest 34
Bảng 2.3: Bảng thống kê nghiệp vụ của member 37
Bảng 2.4: Bảng thống kê các quy định cho từng nghiệp vụ của member 39
Bảng 2.5: Bảng thống kê nghiệp vụ của admin 59
Bảng 2.6: Bảng thống kê các quy định cho từng nghiệp vụ của admin 60
Bảng 2.7: Bảng thống kê nghiệp vụ của guest(khi vào nhóm) 67
Bảng 2.8: Bảng thống kê các quy định cho từng nghiệp vụ của guest(khi vào nhóm) 68 Bảng 2.9: Bảng thống kê nghiệp vụ của member(khi vào nhóm) 68
Bảng 2.10: Bảng thống kê các quy định cho từng nghiệp vụ của member(khi vào nhóm) 69
Bảng 2.11: : Bảng thống kê nghiệp vụ của admin(khi vào nhóm) 73
Bảng 2.12: Bảng thống kê các quy định cho từng nghiệp vụ của admin(khi vào nhóm) 75
Bảng 2.13: Bảng thống kê nghiệp vụ của super admin(khi vào nhóm) 85
Bảng 2.14: Bảng thống kê các quy định cho từng nghiệp vụ của super admin(khi vào nhóm) 87
Bảng 3.1: Danh sách các tác nhân và chức năng của hệ thống 95
Bảng 3.5: Usecase gửi yêu cầu 103
Bảng 3.6: Usecase xem trang cá nhân 104
Bảng 3.7 : Usecase chỉnh sửa bài viết 104
Bảng 3.8: Usecase chỉnh sửa thông tin tài khoản 105
Bảng 3.9: Usecase đặt lại mật khẩu 106
Bảng 3.10: Usecase quên mật khẩu 106
Bảng 3.11 : Usecase xóa bài viết 107
Bảng 3.12: Usecase vô hiệu tài khoản 107
Bảng 3.13: Usecase xem báo cáo 108
Bảng 3.14: Usecase chấp nhận yêu cầu vào nhóm 109
Bảng 3.15: Usecase chỉnh sửa quyền 109
Bảng 4.1: Mô tả màn hình trang chủ 120
Bảng 4.2: Mô tả màn hình đăng nhập 121
Bảng 4.3: Mô tả mà hình đăng ký 122
Bảng 4.4: Mô tả màn hình nhập otp đăng ký 123
Bảng 4.5: Mô tả màn hình chính của người dùng 124
Bảng 4.6: Mô tả màn hình thông báo 125
Bảng 4.7: Mô tả màn hình trang cá nhân 126
Bảng 4.8: Mô tả màn hình danh sách lời mời kết bạn 127
Bảng 4.9: Mô tả màn hình tạo bài viết mới 128
Bảng 4.10: Mô tả màn hình tạo bài viết 129
Bảng 4.11: Mô tả màn hình trang cá nhân của bạn bè 130
Bảng 4.12: Mô tả màn hình trang cá nhân của người lạ 131
Bảng 4.13: Mô tả màn hình của admin 132
Bảng 4.14: Mô tả màn hình danh sách bài viết của người dùng 133
Bảng 4.15 : Mô tả màn hình tùy chọn nhóm 134
Bảng 4.16: Mô tả màn hình tạo nhóm 135
Bảng 4.17: Mô tả màn hình xem nhóm bạn đã tham gia 136
Bảng 4.18: Mô tả màn hình thông tin nhóm với vai trò admin 137
Bảng 4.19: Mô tả màn hình nội quy nhóm 138
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết 139
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm 140
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt 141
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo 142
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm 143
Bảng 5.1: Phạm vi kiểm thử 145
Bảng 5.2: Kết quả kiểm thử 146
Hình 2.1: Biểu mẫu đăng ký 35
Hình 2.2: Biểu mẫu đăng nhập 36
Hình 2.3: Biểu mẫu theo dõi 46
Hình 2.4: Biểu mẫu xác nhận 47
Hình 2.5: Biểu mẫu hủy kết bạn 48
Hình 2.6: Biểu mẫu xem bài viết đã lưu 48
Hình 2.7: Biểu mẫu xem bài viết đã đăng 49
Hình 2.8: Biểu mẫu xem thông báo 50
Hình 2.9: Biểu mẫu tìm kiếm tài khoản 51
Hình 2.10: Biểu mẫu thống kê bạn bè 52
Hình 2.11: Biểu mẫu thống kê người theo dõi 53
Hình 2.12: Biểu mẫu thống kê người đang theo dõi 53
Hình 2.13: Biểu mẫu đăng tải bài viết 54
Hình 2.14: Biểu mẫu xóa bài viết 54
Hình 2.15: Biểu mẫu xem trang chủ 55
Hình 2.16: Biểu mẫu xem bài viết 55
Hình 2.17: Biểu mẫu yêu thích bình luận 56
Hình 2.18: Biểu mẫu tạo nhóm 57
Hình 2.19: Biểu mẫu xem danh sách nhóm 58
Hình 2.20: Biểu mẫu xem trang nhóm 59
Hình 2.21: Biểu mẫu chỉnh sửa thông tin 62
Hình 2.22: Biểu mẫu đăng xuất 63
Hình 2.23: Biểu mẫu:đặt lại mật khẩu 63
Hình 2.24: Biểu mẫu quên mật khẩu 64
Hình 2.25: Biểu mẫu xóa bài viết 65
Hình 2.26: Biểu mẫu bài viết theo tháng 66
Hình 2.27: Biểu mẫu vô hiệu tài khoản 67
Hình 2.28: Biểu mẫu báo cáo bài viết 71
Hình 2.29: Biểu mẫu xem bài viết chờ duyệt 72
Hình 2.30: Biểu mẫu rời nhóm 73
Hình 2.31: Biểu mẫu mời vào nhóm 79
Hình 2.32: Biểu mẫu chỉnh sửa nội quy 80
Hình 2.33: Biểu mẫu thống kê thành viên 80
Hình 2.34: Biểu mẫu xem bài viết chờ duyệt 81
Hình 2.35: Biểu mẫu duyệt bài viết 82
Hình 2.36: Biểu mẫu xem yêu cầu vào nhóm 83
Hình 2.37: Biểu mẫu xem tất cả bài viết 84
Hình 2.38: Biểu mẫu báo cáo bài viết 84
Hình 2.39: Biểu mẫu xem tất cả thành viên 85
Hình 2.40: Biểu mẫu xem tất cả admin 93
Hình 2.41: Biểu mẫu cài đặt 94
Hình 3.1: Lược đồ chức năng phạm vi ứng dụng 100
Hình 3.2: Lược đồ chức năng trong phạm vi xem trang nhóm 101
Hình 3.3: Lược đồ đăng ký 111
Hình 3.4: Lược đồ đăng nhập 112
Hình 3.5: Lược đồ theo dõi 112
Hình 3.6: Lược đồ gửi yêu cầu kết bạn 113
Hình 3.7: Lược đồ xem trang cá nhân 113
Hình 3.8: Lược đồ chỉnh sửa bài viết 114
Hình 3.9: Lược đồ chỉnh sửa thông tin tài khoản 114
Hình 3.10: Lược đồ đặt lại mật khẩu 115
Hình 3.11: Lược đồ quên mật khẩu 116
Hình 3.12: Lược đồ xóa bài viết 116
Hình 3.13: Lược đồ vô hiệu tài khoản 117
Hình 3.14: Lược đồ xem báo cáo bài viết 117
Hình 3.15: Lược đồ chấp nhận yêu cầu vào nhóm 118
Hình 3.16: Lược đồ chỉnh sửa quyền 118
Hình 3.17: Lược đồ quan hệ thực thể 119
Hình 4.1: Màn hình trang chủ 120
Hình 4.2: Màn hình đăng nhập 121
Hình 4.3: Màn hình đăng ký 122
Hình 4.4: Màn hình nhập otp đăng ký 123
Hình 4.5: Màn hình chính của người dùng 124
Hình 4.6: Màn hình thông báo 125
Hình 4.7: Màn hình trang cá nhân 126
Hình 4.8: Màn hình danh sách lời mời kết bạn 127
Hình 4.9: Màn hình tạo bài viết mới 128
Hình 4.10: Màn hình chi tiết bài viết 129
Hình 4.11: Màn hình trang cá nhân của bạn bè 130
Hình 4.12: Màn hình trang cá nhân của người lạ 131
Hình 4.13: Màn hình của admin 132
Hình 4.14: Màn hình danh sách bài viết của người dùng 133
Hình 4.15: Màn hình tùy chọn nhóm 134
Hình 4.16: Màn hình tạo nhóm 135
Hình 4.17: Màn hình xem nhóm bạn đã tham gia 136
Hình 4.18: Màn hình bài viết trong nhóm 137
Hình 4.19: Màn hình nội quy nhóm 138
Hình 4.20: Cửa sổ báo cáo bài viết 139
Hình 4.21: Màn hình duyệt thành viên vào nhóm 140
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt 141
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo 142
Hình 4.24: Màn hình thống kê thông số của nhóm 143
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" không chỉ là một nhiệm vụ học thuật thông thường mà còn là một thách thức quan trọng đối với sinh viên công nghệ thông tin chuyên ngành công nghệ phần mềm Trong trình bày khóa luận này, chúng ta sẽ thảo luận về tính cấp thiết của dự án này, nhấn mạnh những khía cạnh quan trọng về sự phổ biến của mạng xã hội và lợi ích của việc sử dụng MERN Stack
1.1 Sự phổ biến và quan trọng của mạng xã hội
Trong xã hội hiện đại, mạng xã hội không chỉ là một phương tiện giải trí mà còn là một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Đây là nơi mà con người chia sẻ, kết nối và tương tác với nhau, không gian mà đòi hỏi sự linh hoạt và đồng thuận từ các ứng dụng công nghệ
1.2 Lợi ích của website mạng xã hội sử dụng MERN Stack
1.2.1 MERN Stack và tính linh hoạt
MERN Stack, bao gồm MongoDB, Express.js, React.js, và Node.js, là sự kết hợp hoàn hảo giữa khả năng linh hoạt và hiệu suất cao Mỗi thành phần đều đóng vai trò quan trọng trong việc xây dựng một hệ thống mạng xã hội động và mạnh mẽ
1.2.2 Tương tác thời gian thực và giao diện người dùng
React.js, với khả năng xử lý tương tác thời gian thực, mang lại trải nghiệm người dùng tốt nhất Giao diện người dùng đẹp và tương tác sẽ giúp thu hút người sử dụng và tăng cường tính tương tác
1.2.3 An toàn dữ liệu và quản lý thông tin
MongoDB, với tính năng không SQL, không chỉ giúp quản lý dữ liệu một cách hiệu quả mà còn đảm bảo an toàn thông tin cá nhân của người dùng Các biện pháp bảo mật cần được tích hợp để ngăn chặn các rủi ro đe dọa an ninh
1.3 Thách thức và cơ hội trong xây dựng mạng xã hội
1.3.1 Thách thức: Quản lý dữ liệu và bảo mật
Trong quá trình phát triển, việc quản lý dữ liệu và đảm bảo an toàn thông tin là một thách thức đáng kể Cần xem xét kỹ lưỡng về vấn đề bảo mật để ngăn chặn bất kỳ rủi ro nào có thể xâm phạm quyền riêng tư của người dùng
1.3.2 Cơ hội: Tạo cộng đồng và kết nối
Xây dựng một mạng xã hội không chỉ là về công nghệ mà còn là về việc tạo ra một không gian nơi mọi người có thể kết nối và chia sẻ Cơ hội này mang lại giá trị lâu dài cho cả người phát triển và người sử dụng
Tổng kết lại, xây dựng một website mạng xã hội sử dụng MERN Stack không chỉ mang lại những lợi ích về mặt công nghệ mà còn mở ra cơ hội xây dựng cộng đồng và tạo nên sự kết nối trong xã hội ngày nay Đây là một dự án không chỉ đòi hỏi kiến thức chuyên sâu mà còn đòi hỏi sự sáng tạo và tinh thần đổi mới
2 MỤC ĐÍCH CỦA ĐỀ TÀI
Mục tiêu của đề tài "Xây dựng website mạng xã hội sử dụng MERN Stack" là tập trung vào việc phát triển và triển khai một hệ thống mạng xã hội hiện đại, linh hoạt, và mạnh mẽ dành cho giảng viên, nhân viên và sinh viên trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh
2.1 Xây dựng một nền tảng mạng xã hội hoạt động mượt mà và linh hoạt
Phát triển hệ thống để đảm bảo sự ổn định và độ mượt mà trong quá trình sử dụng, nhất là khi đối mặt với số lượng người dùng lớn
Thiết kế với khả năng mở rộng dễ dàng để có thể đáp ứng được nhu cầu ngày càng tăng về sự tham gia từ cộng đồng
2.2 Tối ưu hóa trải nghiệm người dùng
Tạo ra giao diện người dùng thân thiện, hiện đại và dễ sử dụng, giúp người dùng dễ dàng tương tác, chia sẻ thông tin và tạo cộng đồng trực tuyến, tạo trải nghiệm mượt mà và thú vị cho người dùng
2.3 Quản lý dữ liệu hiệu quả với MongoDB
Sử dụng MongoDB để lưu trữ và quản lý dữ liệu người dùng một cách linh hoạt và hiệu quả, đảm bảo sự an toàn và bảo mật thông tin cá nhân
2.4 Tích hợp công nghệ MERN Stack một cách hiệu quả
Kết hợp các thành phần của MERN Stack (MongoDB, Express.js, React.js, và Node.js) một cách hiệu quả để tận dụng lợi ích của từng công nghệ và tạo ra một hệ thống hoàn chỉnh và mạnh mẽ
2.5 Tạo cộng đồng trực tuyến mang lại giá trị
Xây dựng không chỉ là việc kỹ thuật, mà còn là việc tạo ra một không gian trực tuyến nơi mọi người có thể kết nối, giao tiếp và chia sẻ ý kiến, tạo ra một cộng đồng trực tuyến có giá trị
Liên tục tối ưu hóa mã nguồn và cơ sở dữ liệu để đáp ứng yêu cầu của một hệ thống mạng xã hội quy mô lớn
2.7 Phát triển tương lai Đặt ra kế hoạch cho phát triển và mở rộng tương lai dựa trên những đóng góp và trải nghiệm người dùng để duy trì tính cập nhật và hấp dẫn của nền tảng
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
LƯỢC ĐỒ CƠ SỞ DŨ LIỆU
Hình 3.17: Lược đồ cơ sở dữ liệu
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
MÀN HÌNH TRANG CHỦ
Bảng 4.1: Mô tả màn hình trang chủ
STT Chức năng Mô tả
1 Xem trang chủ Xem trang chủ
2 Nhóm thực hiện Giới thiệu thành viên trong nhóm
3 Đăng nhập Đăng nhập vào hệ thống với 2 vai trò chủ yếu là admin và user
Hình 4.1: Màn hình trang chủ
MÀN HÌNH ĐĂNG NHẬP
Bảng 4.2: Mô tả màn hình đăng nhập
STT Chức năng Mô tả
1 Nhập số điện thoại Nhập số điện thoại đã đăng ký với đầy đủ 10 chữ số
2 Nhập mật khẩu Nhập mật khẩu đúng như đã đăng ký trong hệ thống
3 Đăng ký tài khoản Chuyển sang màn hình đăng ký khi không có tài khoản
4 Đăng nhập Đăng nhập thành công nếu đúng số điện thoại và mật khẩu còn sai thì đăng nhập không thành công
6 Quên mật khẩu Chuyển đến màn hình quên mật khẩu
7 Xem trang chủ Trở về trang chủ
Hình 4.2: Màn hình đăng nhập
MÀN HÌNH ĐĂNG KÝ
Bảng 4.3: Mô tả mà hình đăng ký
STT Chức năng Mô tả
1 Nhập họ của người dùng Nhận thông tin về họ người dùng
2 Nhập tên người dùng Nhập thông tin về tên người dùng
3 Nhập email của người dùng
Nhập thông tin email của người dùng
4 Nhập số điện thoại Nhập thông tin số điện thoại người dùng
5 Mật khẩu Mật khẩu của người dùng
6 Chọn vai trò Người dùng chọn vai trò của mình với 2 tùy chọn :
Nhân viên và sinh viên
7 Mã số người dùng Nhập mã số nhân viên hoặc mã số sinh viên theo vai trò đã chọn
8 Chọn phòng ban/khoa Với vai trò sinh viên chọn loại khoa
Với vai trò nhân viên chọn phòng ban
9 Tiếp theo Nhấn vào khi người dùng nhận được email mã otp
10 Đăng nhập Đăng nhập khi tài khoản đã có sẳn
Hình 4.3: Màn hình đăng ký
MÀN HÌNH NHẬP OTP ĐĂNG KÝ
Bảng 4.4: Mô tả màn hình nhập otp đăng ký
STT Chức năng Mô tả
1 Nhập OTP của người dùng
Nhập vào otp có trong mail
2 Thời gian đợi người dùng nhập otp
Thời gian cho otp có hiệu lực
3 chuyển hướng người dùng đến form đăng nhập
Nhấn vào nút tiếp theo để đăng nhập vào tài khoản đã đăng ký
Hình 4.4: Màn hình nhập otp đăng ký
MÀN HÌNH CHÍNH CỦA NGƯỜI DÙNG
Bảng 4.5: Mô tả màn hình chính của người dùng
STT Chức năng Mô tả
1 Xem trang chủ Nhấn để quay về trang chính của bản thân
2 Tìm kiếm người dùng Hiển thị modal để tìm kiếm người dùng
3 Thông báo Hiển thị popover để xem các thông báo của bản thân khi bấm vào
4 Xem trang cá nhân Chuyển đang trang cá nhân của bản thân
5 Xem yêu cầu kết bạn Chuyển đến trang xem danh sách yêu cầu kết bạn
6 Tạo bài viết Tạo bài viết mới của bản thân
7 Đăng xuất Đăng xuất khỏi tài khoản và trở về trang đăng nhập
8 Xem tài khoản của người dùng
Chọn vào username của người dùng để chuyển tới trang cá nhân của họ
9 Xem các sự lựa chọn của bài viết
Nhấn vào để có thể yêu thích hoặc lưu hoặc xóa bài viết nếu bài viết đó là của mình
10 Nhóm Tạo nhóm mới hoặc xem các nhóm đã tham gia
Hình 4.5: Màn hình chính của người dùng
MÀN HÌNH THÔNG BÁO
Bảng 4.6: Mô tả màn hình thông báo
STT Chức năng Mô tả
1 Nhấn vào để xem chi tiết của thông báo
Chuyển tới trang chứa nội dung chi tiết của thông báo đó
2 Xem thông báo chưa đọc Nhấn vào để hiện danh sách các thông báo chưa đọc
Hình 4.6: Màn hình thông báo
MÀN HÌNH TRANG CÁ NHÂN
Bảng 4.7: Mô tả màn hình trang cá nhân
STT Chức năng Mô tả
1 Danh sách bài viết của bản thân
Nhấn vào để xem danh sách các bài viết của bản thân
2 Danh sách story của bản thân
Nhấn vào để xem danh sách các story của bản thân
3 Danh sách bạn bè của bản thân
Nhấn vào để xem danh sách các bạn bè của bản thân
4 Danh sách bài viết đã lưu của bản thân
Nhấn vào để xem danh sách các bài viết đã lưu của bản thân
5 Chỉnh sửa thông tin cá nhân
Hiển thị modal để chỉnh sửa thông tin của cá nhân
6 Thay đổi mật khẩu Hiển thị modal để thay đổi lại mật khẩu của bản thân
Hình 4.7: Màn hình trang cá nhân
MÀN HÌNH DANH SÁCH LỜI MỜI KẾT BẠN
Bảng 4.8: Mô tả màn hình danh sách lời mời kết bạn
STT Chức năng Mô tả
1 Chấp nhận yêu cầu kết bạn
Trở thành bạn bè nếu nhấn nút chấp nhận
2 Hủy yêu cầu Sẽ không trở thành bạn bè
Hình 4.8: Màn hình danh sách lời mời kết bạn
4.9 MÀN HÌNH TẠO BÀI VIẾT MỚI
Bảng 4.9: Mô tả màn hình tạo bài viết mới
STT Chức năng Mô tả
1 Hiển thị ảnh người dùng thêm vào
Hiển thị ảnh xem trước khi đăng bài viết mới
Chuyển hướng sang form tạo bài viết
3 Hiển thị số lượng ảnh Hiển thị số lượng ảnh đã thêm vào
4 Hiển thị các ảnh Hiển thị các ảnh được người chơi thêm vào
Hình 4.9: Màn hình tạo bài viết mới
4.10 MÀN HÌNH CHI TIẾT BÀI VIẾT
Bảng 4.10: Mô tả màn hình tạo bài viết
STT Chức năng Mô tả
1 Yêu thích bài viết Thả yêu thích bài viết muốn yêu thích
2 Bình luận bài viết Bình luận bài viết muốn bình luận
3 Chia sẻ bài viết Chia sẻ địa chỉ của bài viết
4 Nhập bình luận muốn bình luận
Nhận bình luận dạng chuỗi, số
5 Lưu bài viết Lưu bài viết muốn lưu
6 Hiển thị thêm sự lựa chọn Hiển thị thêm sự lựa chọn
7 Tắt bài viết Chuyển ra màn hình chính và thoát khỏi bài viết hiện tại
Hình 4.10: Màn hình chi tiết bài viết
4.11 MÀN HÌNH TRANG CÁ NHÂN CỦA BẠN BÈ
Bảng 4.11: Mô tả màn hình trang cá nhân của bạn bè
STT Chức năng Mô tả
1 Hủy kết bạn Bấm vào sẽ chuyển trạng thái bạn bè thành thêm kết bạn
2 Hủy theo dõi Bấm vào sẽ chuyển trạng thái đang theo dõi thành theo dõi
3 Xem các bài viết có trong trang
Xem danh sách các bài viết có trong trang
4 Xem chi tiết bài viết Bài viết sẽ hiện ra trong một cái modal bao gồm các phần bình luận hay yêu thích bình luận
Hình 4.11: Màn hình trang cá nhân của bạn bè
4.12 MÀN HÌNH TRANG CÁ NHÂN CỦA NGƯỜI LẠ
Bảng 4.12: Mô tả màn hình trang cá nhân của người lạ
STT Chức năng Mô tả
1 Kết bạn Bấm vào sẽ chuyển trạng thái thêm bạn bè thành bạn bè
2 Theo dõi Bấm vào sẽ chuyển trạng thái theo dõi thành đang theo dõi
3 Xem các bài viết có trong trang
Xem danh sách các bài viết có trong trang
4 Xem chi tiết bài viết Bài viết sẽ hiện ra trong một cái modal bao gồm các phần bình luận hay yêu thích bình luận
Hình 4.12: Màn hình trang cá nhân của người lạ
Bảng 4.13: Mô tả màn hình của admin
STT Chức năng Mô tả
1 Yêu thích bài viết Thả yêu thích bài viết muốn yêu thích
2 Bình luận bài viết Bình luận bài viết muốn bình luận
3 Chia sẻ bài viết Chia sẻ địa chỉ của bài viết
4 Nhập bình luận muốn bình luận
Nhận bình luận dạng chuỗi, số
5 Lưu bài viết Lưu bài viết muốn lưu
6 Hiển thị thêm sự lựa chọn Hiển thị thêm sự lựa chọn
Hình 4.13: Màn hình của admin
4.14 MÀN HÌNH DANH SÁCH TÀI KHOẢN NGƯỜI DÙNG
Bảng 4.14: Mô tả màn hình danh sách bài viết của người dùng
STT Chức năng Mô tả
1 Vô hiệu hóa tài khoản Tài khoản sẽ không sử dụng được nếu vô hiệu hóa
2 Chuyển trang trong bảng Mỗi lần chuyển sang trang mới thì dữ liệu sẽ khác so với trang trước
Hình 4.14: Màn hình danh sách bài viết của người dùng
4.15 MÀN HÌNH TÙY CHỌN NHÓM
Bảng 4.15 : Mô tả màn hình tùy chọn nhóm
STT Chức năng Mô tả
1 Tạo nhóm mới Nhấn để tạo nhóm mới
2 Xem nhóm Xem nhóm mà người dùng đã tham gia
Hình 4.15: Màn hình tùy chọn nhóm
Bảng 4.16: Mô tả màn hình tạo nhóm
STT Chức năng Mô tả
1 Nhập tên nhóm Nhập thông tên về tin nhóm mà người dùng muốn tạo
2 Chọn quyền riêng tư trong nhóm
Người dùng chọn quyền riêng tư cho nhóm khi tạo nhóm mới
3 Nhấn để tạo nhóm mới Nhấn vào để tạo nhóm mới từ thông tin đã nhập phía trên
Hình 4.16: Màn hình tạo nhóm
4.17 MÀN HÌNH XEM NHÓM BẠN ĐÃ THAM GIA
Bảng 4.17: Mô tả màn hình xem nhóm bạn đã tham gia
STT Chức năng Mô tả
1 Chọn vai trong nhóm Có 3 lựa chọn :
Tất cả ( vai trò chung các người dùng khác ) Super admin ( admin quyền hành tối cao Admin ( admin hỗ trợ quản lý nhóm )
2 Rời nhóm Nhấn vào để rời khỏi nhóm
3 Xem nhóm Xem nhóm mà người dùng đã tham gia
Hình 4.17: Màn hình xem nhóm bạn đã tham gia
4.18 MÀN HÌNH BÀI VIẾT TRONG NHÓM
Bảng 4.18: Mô tả màn hình thông tin nhóm với vai trò admin
STT Chức năng Mô tả
1 Tạo bài viết mới Nhấn vào để tạo bài viết mới
2 Tùy chọn thêm Hiển thị 2 tùy chọn cho người dùng :
3 Thích bài viết Nhấn để thích bài viết đang xem
4 Bình luận bài viết Nhấn bình luận vào bài viết đang xem
5 Chia sẻ bài viết Nhấn để chia sẻ bài viết đến người khác
6 Báo cáo bài viết Nhấn để báo cáo cho admin về nội dung bài viết
7 Xóa bài viết Nhấn để xóa bài viết đã đăng
8 Lưu bài viết Lưu bài viết đang xem
9 Ảnh trong bài viết Ảnh người dùng đăng trong bài viết
10 Ảnh đại diện của người dùng
Hiển thị ảnh đại diện cho người dùng đăng bài
11 Tên người dùng Hiển thị tên người dùng đăng bài
Hình 4.18: Màn hình bài viết trong nhóm
4.19 MÀN HÌNH NỘI QUY NHÓM
Bảng 4.19: Mô tả màn hình nội quy nhóm
STT Chức năng Mô tả
1 Hiển thị nội quy nhóm Hiển thị nội quy của nhóm người dùng đang xem
Hình 4.19: Màn hình nội quy nhóm
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết
STT Chức năng Mô tả
1 Nhập Báo cáo về bài viết Nêu lí do báo cáo bài viết
2 Tố cáo bài viết Nhấn để báo cáo với admin về nội dung bài viết
3 Hủy tố cáo Nhấn để hủy báo cáo bài viết
Hình 4.20: Cửa sổ báo cáo bài viết
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm
STT Chức năng Mô tả
1 Xem yêu cầu Hiển thị yêu cầu vào nhóm
2 Đồng ý Đồng ý cho người khác tham gia vào nhóm
3 Từ chối Từ chối cho người dùng tham gia nhóm
Hình 4.21: Màn hình duyệt thành viên vào nhóm
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt
STT Chức năng Mô tả
1 Hiển thị yêu cầu duyệt bài viết
Hiển thị các bài viết chờ duyệt
2 Duyệt bài viết Duyệt bài viết của người đăng
3 Từ chối bài viết Từ chối bài viết của người đăng
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo
STT Chức năng Mô tả
1 Xem bài viết bị báo cáo Xem các bài viết đã bị báo cáo trong nhóm
2 Giữ bài viết Giữ lại bài viết bị tố cáo
3 Xóa bài viết Xóa bài viết bị tố cáo
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm
STT Chức năng Mô tả
1 Thống kê số liệu Thống kê các chi tiết bài viết
2 Hiển thị biểu đồ biểu đồ biểu diễn thông số
3 Số lượng thành viên Số lượng thành viên có trong nhóm
4 Số lượng bài viết Số lượng bài viết đã đăng trong nhóm
5 Số lượng yêu thích Số lượng yêu thích các bài viết trong nhóm
6 Số lượng bình luận Số lượng bình luận các bài viết trong nhóm
Hình 4.24: Màn hình thống kê thông số của nhóm
MÀN HÌNH TRANG CÁ NHÂN CỦA BẠN BÈ
Bảng 4.11: Mô tả màn hình trang cá nhân của bạn bè
STT Chức năng Mô tả
1 Hủy kết bạn Bấm vào sẽ chuyển trạng thái bạn bè thành thêm kết bạn
2 Hủy theo dõi Bấm vào sẽ chuyển trạng thái đang theo dõi thành theo dõi
3 Xem các bài viết có trong trang
Xem danh sách các bài viết có trong trang
4 Xem chi tiết bài viết Bài viết sẽ hiện ra trong một cái modal bao gồm các phần bình luận hay yêu thích bình luận
Hình 4.11: Màn hình trang cá nhân của bạn bè
MÀN HÌNH TRANG CÁ NHÂN CỦA NGƯỜI LẠ
Bảng 4.12: Mô tả màn hình trang cá nhân của người lạ
STT Chức năng Mô tả
1 Kết bạn Bấm vào sẽ chuyển trạng thái thêm bạn bè thành bạn bè
2 Theo dõi Bấm vào sẽ chuyển trạng thái theo dõi thành đang theo dõi
3 Xem các bài viết có trong trang
Xem danh sách các bài viết có trong trang
4 Xem chi tiết bài viết Bài viết sẽ hiện ra trong một cái modal bao gồm các phần bình luận hay yêu thích bình luận
Hình 4.12: Màn hình trang cá nhân của người lạ
MÀN HÌNH CỦA ADMIN
Bảng 4.13: Mô tả màn hình của admin
STT Chức năng Mô tả
1 Yêu thích bài viết Thả yêu thích bài viết muốn yêu thích
2 Bình luận bài viết Bình luận bài viết muốn bình luận
3 Chia sẻ bài viết Chia sẻ địa chỉ của bài viết
4 Nhập bình luận muốn bình luận
Nhận bình luận dạng chuỗi, số
5 Lưu bài viết Lưu bài viết muốn lưu
6 Hiển thị thêm sự lựa chọn Hiển thị thêm sự lựa chọn
Hình 4.13: Màn hình của admin
MÀN HÌNH DANH SÁCH TÀI KHOẢN NGƯỜI DÙNG
Bảng 4.14: Mô tả màn hình danh sách bài viết của người dùng
STT Chức năng Mô tả
1 Vô hiệu hóa tài khoản Tài khoản sẽ không sử dụng được nếu vô hiệu hóa
2 Chuyển trang trong bảng Mỗi lần chuyển sang trang mới thì dữ liệu sẽ khác so với trang trước
Hình 4.14: Màn hình danh sách bài viết của người dùng
MÀN HÌNH TÙY CHỌN NHÓM
Bảng 4.15 : Mô tả màn hình tùy chọn nhóm
STT Chức năng Mô tả
1 Tạo nhóm mới Nhấn để tạo nhóm mới
2 Xem nhóm Xem nhóm mà người dùng đã tham gia
Hình 4.15: Màn hình tùy chọn nhóm
MÀN HÌNH TẠO NHÓM
Bảng 4.16: Mô tả màn hình tạo nhóm
STT Chức năng Mô tả
1 Nhập tên nhóm Nhập thông tên về tin nhóm mà người dùng muốn tạo
2 Chọn quyền riêng tư trong nhóm
Người dùng chọn quyền riêng tư cho nhóm khi tạo nhóm mới
3 Nhấn để tạo nhóm mới Nhấn vào để tạo nhóm mới từ thông tin đã nhập phía trên
Hình 4.16: Màn hình tạo nhóm
MÀN HÌNH XEM NHÓM BẠN ĐÃ THAM GIA
Bảng 4.17: Mô tả màn hình xem nhóm bạn đã tham gia
STT Chức năng Mô tả
1 Chọn vai trong nhóm Có 3 lựa chọn :
Tất cả ( vai trò chung các người dùng khác ) Super admin ( admin quyền hành tối cao Admin ( admin hỗ trợ quản lý nhóm )
2 Rời nhóm Nhấn vào để rời khỏi nhóm
3 Xem nhóm Xem nhóm mà người dùng đã tham gia
Hình 4.17: Màn hình xem nhóm bạn đã tham gia
4.18 MÀN HÌNH BÀI VIẾT TRONG NHÓM
Bảng 4.18: Mô tả màn hình thông tin nhóm với vai trò admin
STT Chức năng Mô tả
1 Tạo bài viết mới Nhấn vào để tạo bài viết mới
2 Tùy chọn thêm Hiển thị 2 tùy chọn cho người dùng :
3 Thích bài viết Nhấn để thích bài viết đang xem
4 Bình luận bài viết Nhấn bình luận vào bài viết đang xem
5 Chia sẻ bài viết Nhấn để chia sẻ bài viết đến người khác
6 Báo cáo bài viết Nhấn để báo cáo cho admin về nội dung bài viết
7 Xóa bài viết Nhấn để xóa bài viết đã đăng
8 Lưu bài viết Lưu bài viết đang xem
9 Ảnh trong bài viết Ảnh người dùng đăng trong bài viết
10 Ảnh đại diện của người dùng
Hiển thị ảnh đại diện cho người dùng đăng bài
11 Tên người dùng Hiển thị tên người dùng đăng bài
Hình 4.18: Màn hình bài viết trong nhóm
4.19 MÀN HÌNH NỘI QUY NHÓM
Bảng 4.19: Mô tả màn hình nội quy nhóm
STT Chức năng Mô tả
1 Hiển thị nội quy nhóm Hiển thị nội quy của nhóm người dùng đang xem
Hình 4.19: Màn hình nội quy nhóm
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết
STT Chức năng Mô tả
1 Nhập Báo cáo về bài viết Nêu lí do báo cáo bài viết
2 Tố cáo bài viết Nhấn để báo cáo với admin về nội dung bài viết
3 Hủy tố cáo Nhấn để hủy báo cáo bài viết
Hình 4.20: Cửa sổ báo cáo bài viết
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm
STT Chức năng Mô tả
1 Xem yêu cầu Hiển thị yêu cầu vào nhóm
2 Đồng ý Đồng ý cho người khác tham gia vào nhóm
3 Từ chối Từ chối cho người dùng tham gia nhóm
Hình 4.21: Màn hình duyệt thành viên vào nhóm
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt
STT Chức năng Mô tả
1 Hiển thị yêu cầu duyệt bài viết
Hiển thị các bài viết chờ duyệt
2 Duyệt bài viết Duyệt bài viết của người đăng
3 Từ chối bài viết Từ chối bài viết của người đăng
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo
STT Chức năng Mô tả
1 Xem bài viết bị báo cáo Xem các bài viết đã bị báo cáo trong nhóm
2 Giữ bài viết Giữ lại bài viết bị tố cáo
3 Xóa bài viết Xóa bài viết bị tố cáo
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm
STT Chức năng Mô tả
1 Thống kê số liệu Thống kê các chi tiết bài viết
2 Hiển thị biểu đồ biểu đồ biểu diễn thông số
3 Số lượng thành viên Số lượng thành viên có trong nhóm
4 Số lượng bài viết Số lượng bài viết đã đăng trong nhóm
5 Số lượng yêu thích Số lượng yêu thích các bài viết trong nhóm
6 Số lượng bình luận Số lượng bình luận các bài viết trong nhóm
Hình 4.24: Màn hình thống kê thông số của nhóm
MÀN HÌNH NỘI QUY NHÓM
Bảng 4.19: Mô tả màn hình nội quy nhóm
STT Chức năng Mô tả
1 Hiển thị nội quy nhóm Hiển thị nội quy của nhóm người dùng đang xem
Hình 4.19: Màn hình nội quy nhóm
4.20 CỬA SỔ BÁO CÁO BÀI VIẾT
Bảng 4.20: Mô tả cửa sổ báo cáo bài viết
STT Chức năng Mô tả
1 Nhập Báo cáo về bài viết Nêu lí do báo cáo bài viết
2 Tố cáo bài viết Nhấn để báo cáo với admin về nội dung bài viết
3 Hủy tố cáo Nhấn để hủy báo cáo bài viết
Hình 4.20: Cửa sổ báo cáo bài viết
4.21 MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm
STT Chức năng Mô tả
1 Xem yêu cầu Hiển thị yêu cầu vào nhóm
2 Đồng ý Đồng ý cho người khác tham gia vào nhóm
3 Từ chối Từ chối cho người dùng tham gia nhóm
Hình 4.21: Màn hình duyệt thành viên vào nhóm
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt
STT Chức năng Mô tả
1 Hiển thị yêu cầu duyệt bài viết
Hiển thị các bài viết chờ duyệt
2 Duyệt bài viết Duyệt bài viết của người đăng
3 Từ chối bài viết Từ chối bài viết của người đăng
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo
STT Chức năng Mô tả
1 Xem bài viết bị báo cáo Xem các bài viết đã bị báo cáo trong nhóm
2 Giữ bài viết Giữ lại bài viết bị tố cáo
3 Xóa bài viết Xóa bài viết bị tố cáo
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm
STT Chức năng Mô tả
1 Thống kê số liệu Thống kê các chi tiết bài viết
2 Hiển thị biểu đồ biểu đồ biểu diễn thông số
3 Số lượng thành viên Số lượng thành viên có trong nhóm
4 Số lượng bài viết Số lượng bài viết đã đăng trong nhóm
5 Số lượng yêu thích Số lượng yêu thích các bài viết trong nhóm
6 Số lượng bình luận Số lượng bình luận các bài viết trong nhóm
Hình 4.24: Màn hình thống kê thông số của nhóm
MÀN HÌNH DUYỆT THÀNH VIÊN VÀO NHÓM
Bảng 4.21: Mô tả màn hình duyệt thành viên vào nhóm
STT Chức năng Mô tả
1 Xem yêu cầu Hiển thị yêu cầu vào nhóm
2 Đồng ý Đồng ý cho người khác tham gia vào nhóm
3 Từ chối Từ chối cho người dùng tham gia nhóm
Hình 4.21: Màn hình duyệt thành viên vào nhóm
4.22 MÀN HÌNH HIỂN THỊ TẤT CẢ CÁC BÀI VIẾT CHỜ DUYỆT
Bảng 4.22: Mô tả màn hình hiển thị tất cả các bài viết chờ duyệt
STT Chức năng Mô tả
1 Hiển thị yêu cầu duyệt bài viết
Hiển thị các bài viết chờ duyệt
2 Duyệt bài viết Duyệt bài viết của người đăng
3 Từ chối bài viết Từ chối bài viết của người đăng
Hình 4.22: Màn hình hiển thị tất cả các bài viết chờ duyệt
4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO
Bảng 4.23: Mô tả màn hình hiển thị bài viết bị báo cáo
STT Chức năng Mô tả
1 Xem bài viết bị báo cáo Xem các bài viết đã bị báo cáo trong nhóm
2 Giữ bài viết Giữ lại bài viết bị tố cáo
3 Xóa bài viết Xóa bài viết bị tố cáo
Hình 4.23: Màn hình hiển thị bài viết bị báo cáo
4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM
Bảng 4.24: Mô tả màn hình thống kê thông số của nhóm
STT Chức năng Mô tả
1 Thống kê số liệu Thống kê các chi tiết bài viết
2 Hiển thị biểu đồ biểu đồ biểu diễn thông số
3 Số lượng thành viên Số lượng thành viên có trong nhóm
4 Số lượng bài viết Số lượng bài viết đã đăng trong nhóm
5 Số lượng yêu thích Số lượng yêu thích các bài viết trong nhóm
6 Số lượng bình luận Số lượng bình luận các bài viết trong nhóm
Hình 4.24: Màn hình thống kê thông số của nhóm
CÀI ĐẶT VÀ KIỂM THỬ
CÀI ĐẶT
5.1.1 Yêu câu hệ thống Để có thể chạy được ứng dụng:
- Cài đặt sẵn Visual Studio Code
- Bước 1: Tải và giải nén thư mục Nhom2_KLTN_HK2_CLC
- Bước 2: Mở Visual Studio Code và vào File → Open Folder, chọn đường dẫn đến thư mục được giải nén, chọn Select
- Bước 3: Sau khi màn hình Visual Studio Code hiện lên, nhấn tổ hợp phím
- Bước 4: Tại terminal, gõ “cd front_end”, nhấn enter để vào thư mục front_end Tiếp tục gõ “cd social_ute”, nhấn enter để vào thư mục social_ute
- Bước 5: Sau khi đã vào thư mục social_ute, gõ tiếp lệnh “npm i” để cài đặt các thư viện của front_end
- Bước 6: Nhấn tổ hợp phím “Ctrl + Shift + `” để mở terminal mới, gõ lệnh “cd back_end” để vào thư mục back_end
- Bước 7: Sau khi đã vào thư mục back_end, gõ tiếp lệnh “npm i” để cài đặt các thư viện của back_end
- Bước 8: Sau khi cài xong thư viện ở back_end, gõ lệnh “npm run dev” để khởi chạy trang web, trang web sẽ được mở ở trình duyệt mặc định
KIỂM THỬ
Bảng 5.1: Phạm vi kiểm thử
Tên modul Mô tả Đăng nhập Người dùng đăng nhập được vào hệ thống bằng số điện thoại đã đăng ký Chỉnh sửa thông tin tài khoản Người dùng có thể chỉnh sửa thông tin cá nhân Đăng bài Người dùng có thể tạo bài viết mới
Cập nhật bài viết Người dùng có thể chỉnh sửa bài viết đã đăng
Yêu thích bài viết Người dùng có thể yêu thích các bài viết
Bình luận bài viết Người dùng có thể bình luận các bài viết
Kết bạn Người dùng có thể kết bạn với người dùng khác
Quên mật khẩu Người dùng có thể đặt lại mật khẩu mới cho tài khoản
- Integration test: Kết hợp các module của ứng dụng và kiểm thử như một ứng dụng hoàn chỉnh
- System test: Kiểm thử xem thiết kế và toàn bộ hệ thống có thỏa mãn yêu cầu đặt ra hay không
- Usability test: Xác minh ứng dụng có khả năng ứng dụng cao và dễ sử dụng, giao diện thân thiện với người dùng
Quá trình kiểm thử sẽ bắt đầu khi tất cả các điều sau được thỏa mãn:
- Phần mềm đã sẵn sàng để kiểm thử
- Đặc tả kiểm thử được xác định
- Môi trường kiểm thử được xây dựng
- Đủ nhân lực cho quá trình kiểm thử
Bảng 5.2: Kết quả kiểm thử
STT Mô tả Các bước thực hiện
Kết quả mong đợi Kết quả thực tế Trạng thái
1 Kiểm thử chức năng đăng nhập
- Nhập số điện thoại, mật khẩu
- Chọn đăng nhập Đăng nhập thành công, chuyển đến trang chủ mạng xã hội Đăng nhập thành công, chuyển đến trang chủ mạng xã hội Đạt
2 Kiểm thử chức năng chỉnh sửa thông tin tài khoản
- Truy cập vào trang cá nhân
- Chọn biểu tượng cài đặt ở đầu trang
- Cập nhật thông tin cần chỉnh sửa
Thông báo cập nhật thông tin thành công
Thông báo cập nhật thông tin thành công Đạt
3 Kiểm thử chức năng đăng bài
- Chọn tạo trên thanh công cụ
- Chọn hình ảnh và nhập cảm nghĩ
Thông báo đăng bài thành công
Hiển thị bài viết vừa đăng
Thông báo đăng bài thành công
Hiển thị bài viết vừa đăng Đạt
4 Kiểm thử chức năng cập nhật bài viết
- Chọn cập nhật bài viết ở bài viết muốn cập nhật
- Cập nhật hình ảnh và cảm nghĩ
Thông báo cập nhật thành công
Thông báo cập nhật thành công
Hiển thị bài viết Đạt
5 Kiểm thử chức năng yêu thích bài viết
- Chọn biểu tượng hình trái tim ở bài viết muốn yêu thích
Biểu tượng hình trái tim chyển sang màu đỏ, số lượt yêu thích
Biểu tượng hình trái tim chyển sang màu đỏ, số lượt yêu thích Đạt
6 Kiểm thử chức năng bình luận bài viết
- Chọn biểu tượng bình luận ở bài viết muốn bình luận
Hiển thị bình luận lên khung bình luận
Hiển thị bình luận lên khung bình luận Đạt
7 Kiểm thử chức năng kết bạn
- Truy cập trang cá nhân của người muốn kết bạn
Gửi lời mời kết bạn đến người muốn kết bạn
Gửi lời mời kết bạn đến người muốn kết bạn Đạt
8 Kiểm thử chức năng quên mật khẩu
- Chọn quên mật khẩu ở trang đăng nhập
- Nhập số điện thoại và gmail đã đăng ký
- Nhập mã otp được gửi qua gmail
Thông báo đặt lại mật khẩu thành công, chuyển đến trang đăng nhập
Thông báo đặt lại mật khẩu thành công, chuyển đến trang đăng nhập Đạt
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
Về kiến thức, mỗi thành viên của nhóm đã học hỏi và trau dồi được thêm rất nhiều cho chính bản thân mình
- Hiểu được rõ cách viết các APIs và phát triển server back-end bằng Node.js, MongoDB
- Phát triển phần mềm bằng Reactjs
- Ứng dụng sử dụng tailwindCSS và NextUI
- Xây dựng back-end theo mô hình MVC
- Xử lý bất đồng bộ
- Rèn luyện kỹ năng làm việc nhóm, giải quyết vấn đề chung
- Tư duy phản biện, kỹ năng giao tiếp giữa các thành viên trong nhóm
- Kỹ năng đọc tài liệu tiếng anh, tự học, tự nghiên cứu để giải quyết khó khăn
Sau khi thực hiện đề tài nhóm đã có được Web mạng xã hội cho sinh viên trường Đại học Sư Phạm Kỹ Thuật
Chức năng cho người dùng:
- Xem thông báo và đọc thông báo
- Thống kê bạn bè, người theo dõi, người đang theo dõi
- Đăng tải bài viết, chỉnh sửa bài viết, xóa bài viết
- Yêu thích, lưu bài viết, bình luận bài viết và yêu thích bình luận bài viết
- Tương tác với người khác như: kết bạn, hủy kết bạn, theo dõi, đang theo dõi, gửi lời mời kết bạn
- Xem danh sách bài viết của bản thân và người đang theo dõi
- Tạo trang nhóm để kết nối một nhóm người dùng
- Quản lý tài khoản và bài viết
- Thống kê bài viết của tháng
- Thống kê tài khoản người dùng
- Kinh nghiệp lập trình website bằng React.js
- Kinh nghiệm lập trình Node.js, MongoDB
- Kinh nghiệm phát triển, triển khai API
- Kỹ năng giải quyết vấn đề, làm việc nhóm
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
- Đáp ứng được các tính năng cơ bản của một trang mạng xã hội
- Giao diện đơn giản, thân thiện với người dùng
- Dễ dàng sử dụng, thao tác
- Sử dụng design pattern Provider và Reuse component để giảm thiểu thời gian viết code và tăng tính linh hoạt cho nhiều trường hợp
- Mô hình MVC tiện dụng
- Hệ thống chức năng của Admin hệ thống còn hạn chế
- Chưa hoàn thành chức năng nhắn tin nhắn thời gian thực đã đặt ra ban đầu
- Các chức năng cho phép người dùng được cá nhân hóa nội dung còn hạn chế và chưa hỗ trợ tùy chỉnh được giao diện
Dễ dàng tiếp cận và phát triển phần mềm do đã có kinh nghiệm lập trình với React.js, Node.js
Nhờ có sự hướng dẫn nhiệt tình của thầy Nguyễn Hữu Trung cũng như các thầy cô trong Khoa Công Nghệ Thông Tin trường Đại học Sư Phạm Kỹ Thuật giúp đỡ nhóm trong thời gian thực hiện đề tài
Kinh nghiệm và kỹ năng của nhóm còn thiếu sót và non trẻ cũng dẫn đến không ít khó khăn để giải quyết các vấn đề
Chưa nắm vững được công nghệ nên quá trình xử lý và giải quyết vấn đề gặp nhiều khó khăn
Trong quá trình thực hiện đề tài, về mặt thời gian cũng như kiến thức đã khiến cho nhóm có nhiều trở ngại trong việc hiện thức hóa nhiều tình năng cho hệ thống, do đó nhóm đã đề ra hướng phát triển cho hệ thống như sau:
- Xây dựng thêm các chức năng cho Admin hệ thống
- Xây dựng thêm các chức năng đặc trưng cho người dùng với các vai trò giảng viên/nhân viên, sinh viên
- Phát triển tính năng quản lý công việc, lịch trình cho người dùng
- Xây dựng chức năng nhắn tin thời gian thực
[1] Expressjs là gì? Tại sao nên sử dụng Expressjs trong lập trình?, ITNavi, 26/07/2021 https://itnavi.com.vn/blog/expressjs-la-gi
[2] MongoDB là gì? Cơ sở dữ liệu phi quan hệ, thanh, 03/09/2018 https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N
[3] MongoDB là gì? Định nghĩa đầy đủ và chi tiết nhất về MongoDB https://topdev.vn/blog/mongodb-la-gi/
[4] NodeJS là gì? Những kiến thức cơ bản liên quan tới NodeJS https://aptech.fpt.edu.vn/nodejs-la-gi.html#NodeJS_la_gi
[5] [Phần 1] Tìm hiểu Express js Framework, Le Van Liem, 01/07/2017 https://viblo.asia/p/phan-1-tim-hieu-express-js-framework-Qbq5Qq7m5D8
NHẬT KÝ LÀM VIỆC VỚI GIÁO VIÊN HƯỚNG DẪN
STT Thời gian Công việc
1 10/03/2024 Nhóm trình bày về hướng phát triển cho giáo viên hướng dẫn
Giáo viên hướng dẫn kiểm tra và góp ý
2 28/04/2024 Nhóm báo cáo các chức năng đã hoàn thành với giáo viên hướng dẫn
Giáo viên hướng dẫn kiểm tra và góp ý
3 12/05/2024 Nhóm báo cáo các chức năng đã hoàn thành với giáo viên hướng dẫn
Giáo viên hướng dẫn kiểm tra và góp ý
4 26/05/2024 Nhóm báo cáo các chức năng đã hoàn thành với giáo viên hướng dẫn
Giáo viên hướng dẫn kiểm tra và góp ý
5 16/06/2024 Nhóm báo cáo các chức năng đã hoàn thành với giáo viên hướng dẫn
Giáo viên hướng dẫn kiểm tra và góp ý.