1. Trang chủ
  2. » Luận Văn - Báo Cáo

Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website mạng xã hội sử dụng Mern stack

154 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây dựng website mạng xã hội sử dụng MERN stack
Tác giả Nguyễn Đình Quang Huy, Huỳnh Hùng Phú
Người hướng dẫn ThS. Nguyễn Hữu Trung
Trường học Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành Công nghệ Thông tin
Thể loại Đồ án tốt nghiệp
Năm xuất bản 2024
Thành phố Thành phố Hồ Chí Minh
Định dạng
Số trang 154
Dung lượng 10,59 MB

Cấu trúc

  • Phần 1 MỞ ĐẦU (17)
  • Phần 2 NỘI DUNG (22)
  • Chương 1 CƠ SỞ LÝ THUYẾT (22)
    • 1.1 MONGODB (7)
    • 1.2 EXPRESS.JS (7)
    • 1.3 REACT.JS (7)
    • 1.4 NODE.JS (7)
  • Chương 2 PHÂN TÍCH VÀ THIẾT KẾ (32)
    • 2.1 PHÂN TÍCH HIỆN TRẠNG (7)
    • 2.2 THỐNG KÊ NGHIỆP VỤ VÀ QUY ĐỊNH CHO TỪNG ĐỐI TƯỢNG (7)
  • 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 (7)
    • 3.2 LƯỢC ĐỒ CHỨC NĂNG(USECASE DIAGRAM) (7)
    • 3.3 ĐẶC TẢ USECASE (7)
    • 3.4 LƯỢC ĐỒ TUẦN TỰ (7)
    • 3.5 LƯỢC ĐỒ CƠ SỞ DŨ LIỆU (119)
  • Chương 4 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ (0)
    • 4.1 MÀN HÌNH TRANG CHỦ (120)
    • 4.2 MÀN HÌNH ĐĂNG NHẬP (121)
    • 4.3 MÀN HÌNH ĐĂNG KÝ (122)
    • 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.6 MÀN HÌNH THÔNG BÁO (125)
    • 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 (0)
    • 4.10 MÀN HÌNH CHI TIẾT BÀI VIẾT (0)
    • 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.13 MÀN HÌNH CỦA ADMIN (132)
    • 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.16 MÀN HÌNH TẠO NHÓM (135)
    • 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 (0)
    • 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 (0)
    • 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 (0)
    • 4.23 MÀN HÌNH HIỂN THỊ BÀI VIẾT BỊ BÁO CÁO (0)
    • 4.24 MÀN HÌNH THỐNG KÊ THÔNG SỐ CỦA NHÓM (0)
  • Chương 5 CÀI ĐẶT VÀ KIỂM THỬ (144)
    • 5.1 CÀI ĐẶT (144)
    • 5.2 KIỂM THỬ (145)
  • Phần 3 KẾT LUẬN (0)
  • TÀI LIỆU THAM KHẢO (152)

Nội dung

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 ý.

Ngày đăng: 19/11/2024, 08:38