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

Trong thời đại mà thông tin cá nhân dễ bị lạm dụng và nội dung độc hại tràn lan, việc xây dựng một trang web mạng xã hội với các chức năng tiên tiến là vô cùng cấp thiết.. Do đó, việc xâ

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

GVHD: LÊ VĨNH THỊNH SVTH: ĐỖ DUY NHỰT

HÀ HỒ THANH LÂM XÂY DỰNG WEBSITE MẠNG XÃ HỘI

Báo cáo đồ án tốt nghiệp

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

NGÀNH CÔNG NGHỆ THÔNG TIN

-🙞🙞🕮🙞🙜 -

KHÓA LUẬN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI

GVHD: TS Lê Vĩnh Thịnh

SVTH: Đỗ Duy Nhựt - 20110298

Hồ Hà Thanh Lâm - 20110667

Báo cáo đồ án tốt nghiệp

TP.HCM, tháng 7 năm 2024

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

NGÀNH CÔNG NGHỆ THÔNG TIN

-🙞🙞🕮🙞🙜 -

KHÓA LUẬN TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP

Họ và tên sinh viên 1: Đỗ Duy Nhựt

Họ và tên sinh viên 2: Hồ Hà Thanh Lâm

Ngành: Công Nghệ Thông Tin

MSSV: 20110298 MSSV: 20110667

Giảng viên hướng dẫn: TS Lê Vĩnh Thịnh ĐT:

Ngày nhận đề tài: …/ /2024 Ngày nộp đề tài: 12/07/2024

1 Tên đề tài: XÂY DỰNG WEBSITE MẠNG XÃ HỘI

2 Nội dung thực hiện đề tài:

- Nghiên cứu tổng quan về mạng xã hội

- Phân tích thiết kế website mạng xã hội

- Xây dựng và triển khai website mạng xã hội

- Đánh giá và cải tiện website mạng xã hội

3 Đề cương luận văn: Gồm 3 phần: phần mở đầu, phần nội dung và phần kết luận Trong

phần nội dung 5 chương:

Chương 1: Cơ sở lý thuyết

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

Chương 3: Thiết kế ứng dụng

Chương 4: Thiết kế giao diện

Chương 5: Cài đặt và kiểm thử

Thời gian thực hiện: Bắt đầu từ …/…/2024 đến 12/07/2024

Chữ ký của SV1: ………

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên: Đỗ Duy Nhựt MSSV: 20110298

Họ và tên Sinh viên: Hồ Hà Thanh Lâm MSSV: 20110667

Ngành: Công nghệ Thông tin

Tên đề tài: : Xây dựng website mạng xã hội

Họ và tên Giáo viên hướng dẫn: TS Lê Vĩnh Thịnh

2 Ưu điểm:

Tính năng đa dạng: Hệ thống được trang bị nhiều tính năng hiện đại như nhận diện khuôn mặt, tự động gắn thẻ, nhận diện nội dung toxic và chatbot, giúp nâng cao trải nghiệm người dùng Thái độ làm việc nghiêm túc: Nhóm sinh viên đã thể hiện thái độ làm việc chăm chỉ, chủ động tìm hiểu và áp dụng các công nghệ mới, luôn hoàn thành công việc đúng hạn và có tinh thần học hỏi cao

3 Khuyết điểm: tìm hiểu thêm các biện pháp bảo mật thông tin người dùng

4 Đề nghị cho bảo vệ hay không? Cho bảo vệ

5 Đánh giá loại: Giỏi

6 Điểm: 9

Tp Hồ Chí Minh, ngày … tháng 07 năm 2024

GIÁO VIÊN HƯỚNG DẪN

(Ký và ghi rõ họ tên)

Lê Vĩnh Thịnh

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Đỗ Duy Nhựt MSSV: 20110298

Họ và tên Sinh viên: Hồ Hà Thanh Lâm MSSV: 20110667

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website mạng xã hội

Họ và tên Giáo viên phản biện: Th.S Huỳnh Xuân Phụng

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày … tháng 07 năm 2024

GIÁO VIÊN PHẢN BIỆN

(Ký và ghi rõ họ tên)

DANH MỤC

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP 1

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 1

NHẬN XÉT 1

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN 1

NHẬN XÉT 1

DANH MỤC 2

DANH MỤC BẢNG 9

DANH MỤC ẢNH 12

LỜI NÓI ĐẦU 15

PHẦN MỞ ĐẦU 16

1 Tính cấp thiết của đề tài 16

2 Mục đích của đề tài 17

3 Cách tiếp cận và nghiên cứu 17

PHẦN NỘI DUNG 19

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 19

1 Tổng quan về mạng xã hội 19

1.1 Khái niệm mạng xã hội 19

1.2 Mục đích của mạng xã hội 19

1.3 Đặc điểm của mạng xã hội 19

2 Giới thiệu về NodeJS 20

2.1 NodeJS là gì? 20

2.2 Cách thức hoạt động của NodeJS 20

2.3 NodeJS làm được những gì ? 21

3.Giới thiệu về ReactJS 22

3.1 ReactJS là gì ? 22

3.2 Các tính năng của ReactJS 22

3.3 Tại sao lại chon ReactJS 23

4.Giới thiệu về Socket.IO 24

4.1 Socket.IO là gì ? 24

4.2 Socket.IO hoạt động trong NodeJs 24

5.Giới thiệu về WebRTC 25

5.1 WebRTC là gì ? 25

5.2 Cách thức hoạt động WebRTC 25

5.3 WebRTC làm được những gì? 26

6.Giới thiệu về Python 27

6.1 Python là gì ? 27

6.2 Cách thức hoạt động Python 27

6.3 Python làm được những gì? 27

7.Technical stack 28

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 29

1 Khảo sát hiện trạng 29

1.1 Xác định yêu cầu 30

1.1.1 Yêu cầu chức năng 30

1.1.2 Yêu cầu phi chức năng 31

2 Xác định yêu cầu 32

2.1 Lược đồ usecase 32

2.2 Đặc tả Usecase (Khách) 33

2.2.1 Đăng ký 33

2.2.2 Đăng nhập 34

2.3 Đặc tả Usecase(Người dùng đã đăng nhập) 35

2.3.1 Đăng xuất 35

2.3.3 Đổi mật khẩu 35

2.3.4 Quản lý thông tin cá nhân 36

2.3.5 Tìm kiếm tài khoản 38

2.3.6 Quản lý bài viết 40

2.3.7 Xem thông báo 45

2.3.8 Nhắn tin 46

2.3.9 Quản lý bản tin 48

2.4 Đặc tả Usecase (Admin) 50

2.4.1 Đăng xuất (admin) 50

2.4.2 Quản lý tài khoản người dùng 51

2.4.3 Quản lý bài viết user 52

2.4.4 Thống kê 55

CHƯƠNG III: THIẾT KẾ ỨNG DỤNG 56

1 Class Diagram 56

1.1 Class Diagram 56

1.2 ERD 57

2 Mô tả sơ đồ thiết kế dữ liệu 58

2.1 Users 58

2.2 Posts 58

2.3 Likes 59

2.4 Comments 59

2.5 Stories 59

2.6 Publicgroups 60

2.7 Membergroups 60

2.8 Relationships 60

2.9 Conversations 61

2.10 Conversations_members 61

2.11 Messages 61

2.12 Reaction_message 61

2.13 Notifications 62

2.14 Reports 62

2.15 Posts_images 62

2.16 Storage 63

2.17 UserOfTag 63

3 Sơ đồ tuần tự (Sequence Diagram) 64

3.1 Sequence đăng ký 64

3.2 Sequence đăng nhập 65

3.3 Sequence đổi mật khẩu 65

3.4 Sequence tìm kiếm tài khoản 66

3.5 Sequence quản lý thông tin cá nhân 66

3.5.1 Sequence cập nhật thông tin cá nhân 66

3.5.2 Sequence xem trang cá nhân 67

3.5.3 Sequence theo dõi / hủy theo dõi 67

3.6 Sequence quản lý bài viết 68

3.6.1 Sequence đăng bài viết 68

3.6.2 Sequence tương tác 68

3.6.3 Sequence bình luận 69

3.6.4 Sequence chia sẻ bài viết 69

3.6.5 Sequence báo cáo bài viết 70

3.6.6 Sequence xóa bài viết (role: user) 70

3.7 Sequence xem thông báo 71

3.8 Sequence quản lý bản tin 71

3.8.1 Xem bản tin 71

3.8.2 Đăng bản tin 72

3.9.1 Tạo cuộc trò chuyện 72

3.9.2 Xem tin nhắn 73

3.9.3 Gửi tin nhắn 73

3.9.4 Cuộc gọi 74

3.10 Sequence đăng xuất 74

3.11 Sequence quản lý bài viết user 75

3.11.1 Xem danh sách bài viết 75

3.11.2 Xem chi tiết bài viết 75

3.11.3 Xóa bài viết 76

3.12 Sequence quản lý tài khoản 76

3.12.1 Xem danh sách tài khoản 76

3.12.2 Xóa tài khoản 77

3.13 Sequence thống kê 77

3.14 Sequence đề xuất kết bạn 78

3.15 Sequence nhận diện ngôn từ phản cảm 79

3.16 Sequence nhận diện vũ khí 80

3.17 Sequence đề xuất gắn thẻ bằng nhận diện khuôn mặt 81

3.18 Sequence Bộ sưu tập 82

3.19 Sequence Chatbot 83

4 Sơ đồ hoạt động (Activity Diagram) 84

4.1 Activity đăng ký 84

4.2 Activity đăng nhập 85

4.3 Activity đổi mật khẩu 86

4.4 Activity tìm kiếm tài khoản 87

4.5 Activity quản lý thông tin cá nhân 87

4.5.1.Activity cập nhật thông tin cá nhân 87

4.5.2 Activity xem trang cá nhân 88

4.5.3 Activity theo dõi / hủy theo dõi 88

4.6 Activity quản lý bài viết 89

4.6.1 Activity đăng bài viết 89

4.6.2 Activity tương tác 89

4.6.3 Activity bình luận 90

4.6.4 Activity chia sẻ bài viết 90

4.6.5 Activity báo cáo bài viết 91

4.6.6 Activity xóa bài viết (role:user) 91

4.7 Activity xem thông báo 92

4.8 Activity quản lý bản tin 92

4.8.1 Activity xem bản tin 92

4.8.2 Activity đăng bản tin 93

4.9 Activity nhắn tin 93

4.9.1 Activity tạo cuộc trò chuyện 93

4.9.2 Activity xem tin nhắn 94

4.9.3 Activity gửi tin nhắn 94

4.10 Activity đăng xuất 95

4.11 Activity quản lý bài viết user 96

4.11.1 Activity xem danh sách bài viết 96

4.11.2 Activity xem chi tiết bài viết 96

4.11.3 Activity xóa bài viết 97

4.11.4 Activity tìm kiếm bài viết 97

4.12 Activity quản lý tài khoản 98

4.12.1 Activity xem danh sách tài khoản 98

4.12.2 Activity xóa tài khoản 98

4.13 Activity thống kê 99

4.14 Activity đề xuất kết bạn 99

4.15 Activity nhận diện ngôn từ phản cảm 100

4.16 Activity nhận diện vũ khí 101

4.17 Activity đề xuất gắn thẻ bằng nhận diện khuôn mặt 102

4.18 Activity Bộ sưu tập 103

4.19 Activity Chatbot 104

CHƯƠNG IV: THIẾT KẾ GIAO DIỆN 105

1 Screen flow cho web phía người dùng chưa đăng nhập (khách) 105

1.1 SCP001 Giao diện đăng nhập 105

1.2 SCP002 Giao diện đăng ký 106

2 Screen flow cho web phía người dùng đã đăng nhập 107

2.1 SCP003 Trang chủ 107

2.2 SCP004 Trang chủ Chế độ tối 110

2.3 SCP005 Trang người theo dõi (Follower) 110

2.4 SCP006 Trang Cá nhân 111

2.5 SCP007 Trang Cá nhân người dùng khác 112

2.6 SCP008 Trang Thông tin Group 113

2.7 SCP009 Trang All Group 114

2.9 SCP011 Tìm kiếm user 116

2.10 SCP012 Xem thông báo 117

2.11 SCP013 Form đổi mật khẩu 117

2.12 SCP014 Form cập nhật thông tin cá nhân 118

2.13 SCP015 Form tạo nhóm mới 119

2.14 SCP016 Form cập nhật thông tin nhóm 120

2.15 SCP017 Form đăng bản tin 121

2.16 SCP018 Form Chia sẻ bài viết 122

2.17 SCP019 Form thành viên nhóm 123

2.17 SCP020 Xem hình ảnh 124

2.18 SCP021 Xem bình luận 125

2.19 SCP022 Xem bản tin 126

2.20 SCP023 Tạo cuộc trò chuyện mới 127

2.21 SCP028 Chatbot 128

2.29 SCP029 Nhận diện khuôn mặt và đề xuất gắn thẻ 129

2.30 SCP030 Nhận diện ngôn ngữ phản cảm và cảnh báo 130

2.31 SCP032 Nhận diện vũ khí 131

1 Screen flow cho web phía admin 133

1.1 SCP024 Trang chủ admin 133

2.1 SCP025 Trang quản lý bài viết 134

2.1 SCP026 Trang quản lý tài khoản 135

2.1 SCP027 Xem chi tiết bài viết 136

CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ 137

1 Cài đặt ứng dụng 137

2 Kiểm thử phần mềm 137

2.1 Chức năng đăng ký 138

2.2 Chức năng đăng nhập 138

2.3 Chức năng đổi mật khẩu 138

2.4 Chức năng tìm kiếm tài khoản 139

2.5 Chức năng quản lý thông tin cá nhân 139

2.5.1 Chức năng cập nhật thông tin cá nhân 139

2.5.2 Chức năng xem trang cá nhân 139

2.5.3 Chức năng theo dõi / hủy theo dõi 140

2.6 Chức năng quản lý bài viết 140

2.6.1 Chức năng đăng bài viết 140

2.6.2 Chức năng tương tác 141

2.6.3 Chức năng bình luận 141

2.6.4 Chức năng chia sẻ bài viết 141

2.6.5 Chức năng báo cáo bài viết 142

2.6.6 Chức năng xóa bài viết (role:user) 142

2.7 Chức năng xem thông báo 142

2.8 Chức năng quản lý bản tin 142

2.8.1 Chức năng xem bản tin 142

2.8.2 Chức năng đăng bản tin 143

2.9 Chức năng nhắn tin 143

2.9.1 Chức năng tạo cuộc trò chuyện 143

2.9.2 Chức năng xem tin nhắn 143

2.9.3 Chức năng gửi tin nhắn 143

2.10 Chức năng đăng xuất 144

2.11 Chức năng quản lý bài viết user 144

2.11.1 Chức năng xem danh sách bài viết 144

2.11.2 Chức năng xem chi tiết bài viết 144

2.11.3 Chức năng xóa bài viết 144

2.12 Chức năng quản lý tài khoản 145

2.12.1 Chức năng xem danh sách tài khoản 145

2.12.2 Chức năng xóa tài khoản 145

2.13 Chức năng thống kê 145

CHƯƠNG VI: KẾT LUẬN 146

1 Kết quả đạt được 146

2 Ưu và nhược điểm 146

2.1 Ưu điểm 146

2.2 Nhược điểm 147

2.3 Kinh nghiệm đạt được 147

2.4 Hướng phát triển trong tương lai 147

TÀI LIỆU THAM KHẢO 148

DANH MỤC BẢNG

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

Bảng 1 1 So sánh Facebook và Instagram 29

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU Bảng 2 1 Đặc tả usecase Đăng ký 33

Bảng 2 2 Đặc tả usecase Đăng nhập 34

Bảng 2 3 Đặc tả usecase Đăng xuất (user) 35

Bảng 2 4 Đặc tả usecase Đổi mật khẩu 36

Bảng 2 5 Đặc tả usecase Xem trang cá nhân người dùng 37

Bảng 2 6 Đặc tả usecase Theo dõi / Hủy theo dõi 37

Bảng 2 7 Đặc tả usecase Cập nhật thông tin cá nhân 38

Bảng 2 8 Đặc tả usecase Tìm kiếm tài khoản 39

Bảng 2 9 Đặc tả usecase Đăng bài viết 40

Bảng 2 10 Phát hiện ngôn từ phản cảm và các hình ảnh liên quan tới vũ khí 41

Bảng 2 11 Đặc tả usecase Tương tác 42

Bảng 2 12 Đặc tả usecase Bình luận 42

Bảng 2 13 Đặc tả usecase Chia sẻ bài viết 43

Bảng 2 14 Đặc tả gắn thẻ tag theo tên 43

Bảng 2 15 Đặc tả Đề xuất tag bằng nhận diện khuôn mặt 44

Bảng 2 16 Đặc tả usecase Báo cáo bài viết 44

Bảng 2 17 Đặc tả usecase Xóa bài viết 45

Bảng 2 18 Đặc tả usecase Xem thông báo 45

Bảng 2 19 Đặc tả usecase Tạo cuộc trò chuyện 46

Bảng 2 20 Đặc tả usecase Xem tin nhắn 47

Bảng 2 21 Đặc tả usecase Gửi tin nhắn 47

Bảng 2 22 Đặc tả Cuộc gọi 48

Bảng 2 23 Đặc tả usecase Xem bản tin 49

Bảng 2 24 Đặc tả usecase Đăng bản tin 49

Bảng 2 25 Đặc tả Usecase Đăng xuất (admin) 50

Bảng 2 26 Xem danh sách tài khoản người dùng 51

Bảng 2 27 Đặc tả usecase Xóa tài khoản người dùng 52

Bảng 2 28 Đặc tả usecase Xem danh sách bài đã đăng 53

Bảng 2 29 Đặc tả usecase Xem chi tiết bài viết 53

Bảng 2 30 Đặc tả usecase Xóa bài viết 54

Bảng 2 31 Đặc tả tìm kiếm bài viết 54

Bảng 2 32 Đặc tả usecase Thống kê 55

CHƯƠNG III: THIẾT KẾ ỨNG DỤNG Bảng 3 1 Mô tả dữ liệu Users 58

Bảng 3 2 Mô tả dữ liệu Posts 59

Bảng 3 3 Mô tả dữ liệu Likes 59

Bảng 3 4 Mô tả dữ liệu Comments 59

Bảng 3 5 Mô tả dữ liệu Stories 59

Bảng 3 6 Mô tả dữ liệu Publicgroups 60

Bảng 3 7 Mô tả dữ liệu Membergroups 60

Bảng 3 8 Mô tả dữ liệu Relationships 60

Bảng 3 9 Mô tả dữ liệu Conversations 61

Bảng 3 10 Mô tả dữ liệu Conversations_members 61

Bảng 3 11 Mô tả dữ liệu Messages 61

Bảng 3 12 Mô tả dữ liệu Reaction_message 62

Bảng 3 13 Mô tả dữ liệu Notifactions 62

Bảng 3 14 Mô tả dữ liệu Reports 62

Bảng 3 15 Mô tả dữ liệu Posts_images 63

Bảng 3 16 Mô tả dữ liệu Storage 63

Bảng 3 17 Mô tả dữ liệu UserOfTag 63

CHƯƠNG IV: THIẾT KẾ GIAO DIỆN Bảng 4 1 Mô tả SCP001 105

Bảng 4 2 Mô tả SCP002 106

Bảng 4 3 Mô tả SCP003 109

Bảng 4 4 Mô tả SCP004 110

Bảng 4 5 Mô tả SCP005 111

Bảng 4 6 Mô tả SCP006 112

Bảng 4 7 Mô tả SCP007 113

Bảng 4 8 Mô tả SCP008 114

Bảng 4 9 Mô tả SCP009 114

Bảng 4 10 Mô tả SCP010 115

Bảng 4 11 Mô tả SCP011 116

Bảng 4 12 Mô tả SCP012 117

Bảng 4 13 Mô tả SCP013 118

Bảng 4 14 Mô tả SCP014 119

Bảng 4 15 Mô tả SCP015 120

Bảng 4 16 Mô tả SCP016 121

Bảng 4 17 Mô tả SCP017 121

Bảng 4 18 Mô tả SCP018 123

Bảng 4 19 Mô tả SCP019 124

Bảng 4 20 Mô tả SCP020 124

Bảng 4 21 Mô tả SCP021 126

Bảng 4 22 Mô tả SCP022 126

Bảng 4 23 Mô tả SCP023 127

Bảng 4 24 Mô tả SCP024 134

Bảng 4 25 Mô tả SCP025 135

Bảng 4 26 Mô tả SCP026 135

Bảng 4 27 Mô tả SCP027 136

CHƯƠNG V CÀI ĐẶT VÀ KIỂM THỬ Bảng 5 1 Testcase Đăng ký 138

Bảng 5 2 Testcase Đăng nhập 138

Bảng 5 3 Testcase Đổi mật khẩu 139

Bảng 5 4 Testcase Tìm kiếm tài khoản 139

Bảng 5 5 Testcase Cập nhật thông tin cá nhân 139

Bảng 5 6 Testcase Xem trang cá nhân 140

Bảng 5 7 Testcase theo dõi / hủy theo dõi 140

Bảng 5 8 Testcase Đăng bài viết 141

Bảng 5 9 Testcase Tương tác 141

Bảng 5 10 Testcase Bình luận 141

Bảng 5 11 Testcase Chia sẻ bài viết 141

Bảng 5 12 Testcase Báo cáo bài viết 142

Bảng 5 13 Testcase Xóa bài viết (role:user) 142

Bảng 5 14 Testcase Xem thông báo 142

Bảng 5 15 Testcase Xem bản tin 142

Bảng 5 16 Testcase Đăng bản tin 143

Bảng 5 17 Testcase Tạo cuộc trò chuyện 143

Bảng 5 18 Testcase Xem tin nhắn 143

Bảng 5 19 Testcase Gửi tin nhắn 144

Bảng 5 20 Testcase Đăng xuất 144

Bảng 5 21 Testcase Xem danh sách bài viết 144

Bảng 5 22 Testcase Xem chi tiết bài viết 144

Bảng 5 23 Testcase Xóa bài viết (role:admin) 144

Bảng 5 24 Testcase Xem danh sách tài khoản 145

Bảng 5 25 Testcase Xóa tài khoản 145

Bảng 5 26 Testcase Thống kê 145

DANH MỤC ẢNH

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Hình ảnh 2 1 Lượt đồ Usecase 32

Hình ảnh 2 3 Usecase Đăng ký 33

Hình ảnh 2 4 Usecase Đăng nhập 34

Hình ảnh 2 5 Usecase Đổi mật khẩu 35

Hình ảnh 2 6 Usecase Quản lý thông tin cá nhân 36

Hình ảnh 2 7 Usecase Tìm kiếm tài khoản 38

Hình ảnh 2 8 Usecase Quản lý bài viết 40

Hình ảnh 2 9 Usecase Xem thông báo 45

Hình ảnh 2 10 Usecase Nhắn tin 46

Hình ảnh 2 11 Usecase Quản lý bản tin 48

Hình ảnh 2 12 Usecase Đăng xuất (Admin) 50

Hình ảnh 2 13 Usecase Quản lý tài khoản người dùng 51

Hình ảnh 2 14 Usecase Quản lý bài viết của tất cả user 52

Hình ảnh 2 15 Usecase Thống kê 55

CHƯƠNG III: THIẾT KẾ ỨNG DỤNG Hình ảnh 3 1 Class Diagram 56

Hình ảnh 3 2 ERD 57

Hình ảnh 3 3 Sequence Đăng ký 64

Hình ảnh 3 4 Sequence Đăng nhập 65

Hình ảnh 3 5 Sequence Đổi mật khẩu 65

Hình ảnh 3 6 Sequence Tìm kiếm tài khoản 66

Hình ảnh 3 7 Sequence Cập nhật thông tin cá nhân 66

Hình ảnh 3 8 Sequence Xem trang cá nhân 67

Hình ảnh 3 9 Sequence Theo dõi / Hủy theo dõi 67

Hình ảnh 3 10 Sequence Đăng bài viết 68

Hình ảnh 3 11 Sequence Tương tác 68

Hình ảnh 3 12 Sequence Bình luận 69

Hình ảnh 3 13 Sequence Chia sẻ bài viết 69

Hình ảnh 3 14 Sequence Báo cáo bài viết 70

Hình ảnh 3 15 Sequence Xóa bài viết (role: user) 70

Hình ảnh 3 16 Sequence Xem thông báo 71

Hình ảnh 3 17 Sequence Xem bản tin 71

Hình ảnh 3 18 Sequence Đăng bản tin 72

Hình ảnh 3 19 Sequence Tạo cuộc trò chuyện 72

Hình ảnh 3 20 Sequence Xem tin nhắn 73

Hình ảnh 3 21 Sequence Gửi tin nhắn 73

Hình ảnh 3 22 Cuộc gọi 74

Hình ảnh 3 23 Sequence Đăng xuất 74

Hình ảnh 3 24 Sequence Xem danh sách bài viết 75

Hình ảnh 3 25 Sequence Xem chi tiết bài viết 75

Hình ảnh 3 26 Sequence Xóa bài viết 76

Hình ảnh 3 27 Sequence Xem danh sách tài khoản 76

Hình ảnh 3 28 Sequence Xóa tài khoản 77

Hình ảnh 3 29 Sequence Thống kê 77

Hình ảnh 3 31 Sequence nhận diện ngôn từ phản cảm 79

Hình ảnh 3 32 Sequence nhận diện vũ khí 80

Hình ảnh 3 33 Nhận diện khuôn mặt và đề xuất gắn thẻ 81

Hình ảnh 3 34 Bộ sưu tập 82

Hình ảnh 3 35 Sequence Chatbot 83

Hình ảnh 3 36 Activity Đăng ký 84

Hình ảnh 3 37 Activity Đăng nhập 85

Hình ảnh 3 38 Activity Đổi mật khẩu 86

Hình ảnh 3 39 Activity Tìm kiếm tài khoản 87

Hình ảnh 3 40 Activity Cập nhật thông tin cá nhân 87

Hình ảnh 3 41 Activity Xem trang cá nhân 88

Hình ảnh 3 42 Activity Theo dõi / Hủy theo dõi 88

Hình ảnh 3 43 Activity Đăng bài viết 89

Hình ảnh 3 44 Activity Tương tác 89

Hình ảnh 3 45 Activity Bình luận 90

Hình ảnh 3 46 Activity Chia sẻ bài viết 90

Hình ảnh 3 47 Activity Báo cáo bài viết 91

Hình ảnh 3 48 Activity Xóa bài viết (role:user) 91

Hình ảnh 3 49 Activity Xem thông báo 92

Hình ảnh 3 50 Activity Xem bản tin 92

Hình ảnh 3 51 Activity Đăng bản tin 93

Hình ảnh 3 52 Activity Tạo cuộc trò chuyện 93

Hình ảnh 3 53 Activity Xem tin nhắn 94

Hình ảnh 3 54 Activity Gửi tin nhắn 94

Hình ảnh 3 55 Activity Cuộc gọi 95

Hình ảnh 3 56 Activity Đăng xuất 95

Hình ảnh 3 57 Activity Xem danh sách bài viết 96

Hình ảnh 3 58 Activity Xem chi tiết bài viết 96

Hình ảnh 3 59 Activity Xóa bài viết 97

Hình ảnh 3 60 Activity Tìm kiếm bài viết user 97

Hình ảnh 3 61 Activity Xem danh sách tài khoản 98

Hình ảnh 3 62 Activity Xóa tài khoản 98

Hình ảnh 3 63 Activity Thống kê 99

Hình ảnh 3 64 Activity Đề xuất kết bạn 99

Hình ảnh 3 65 Activity nhận diện ngôn từ phản cảm 100

Hình ảnh 3 66 Activity nhận diện vũ khí 101

Hình ảnh 3 67 Activity Nhận diện khuôn mặt 102

Hình ảnh 3 68 Activity Bộ sưu tập 103

Hình ảnh 3 69 Activity Chatbot 104

CHƯƠNG IV: THIẾT KẾ GIAO DIỆN Hình ảnh 4 1 SCP001 Giao diện Đăng nhập 105

Hình ảnh 4 2 Giao diện đăng ký 106

Hình ảnh 4 3 SCP003 Trang chủ 107

Hình ảnh 4 4 SCP004 Trang chủ chế độ tối 110

Hình ảnh 4 5 SCP005 Follower 110

Hình ảnh 4 6 SCP006 Trang cá nhân 111

Hình ảnh 4 7 SCP007 Trang cá nhân người dùng khác 112

Hình ảnh 4 8 SCP008 Trang chủ Group 113

Hình ảnh 4 9 SCP009 Trang Tất cả Group 114

Hình ảnh 4 10 SCP010 Trang Tin nhắn 115

Hình ảnh 4 11 SCP011 Tìm kiếm người dùng 116

Hình ảnh 4 12 SCP012 Xem thông báo 117

Hình ảnh 4 13 SCP013 Đổi mật khẩu 117

Hình ảnh 4 14 SCP014 Cập nhật thông tin 118

Hình ảnh 4 15 SCP015 Tạo nhóm mới 119

Hình ảnh 4 16 Cập nhật thông tin nhóm 120

Hình ảnh 4 17 SCP017 Đăng bản tin 121

Hình ảnh 4 18 SCP018 Chia sẻ bài viết 122

Hình ảnh 4 19 SCP019 Thành viên nhóm 123

Hình ảnh 4 20 SCP020 Xem hình ảnh 124

Hình ảnh 4 21 SCP021 Xem bình luận 125

Hình ảnh 4 22 SCP022 Xem bản tin 126

Hình ảnh 4 23 SCP023 Tạo cuộc trò chuyện mới 127

Hình ảnh 4 24 SCP028 128

Hình ảnh 4 25 SCP029 129

Hình ảnh 4 26 SCP030 130

Hình ảnh 4 27 SCP031 131

Hình ảnh 4 28 SCP0033 132

Hình ảnh 4 29 SCP024 Trang chủ admin 133

Hình ảnh 4 30 SCP025 Trang quản lý bài viết 134

Hình ảnh 4 31 SCP026 Trang quản lý tài khoản 135

Hình ảnh 4 32 SCP027 Xem chi tiết bài viết 136

LỜI NÓI ĐẦU

Để hoàn thành tốt đề tài này, nhóm em xin gửi lời cám ơn chân thành đến các quý thầy cô trong khoa Công nghệ thông tin vì đã luôn tận tình truyền đạt những kiến thức cũng như các kỹ năng bổ ích trong học tập

Đặc biệt, nhóm em xin chân thành cảm ơn đến giảng viên, tiến sĩ Lê Vĩnh Thịnh, người đã hỗ trợ trực tiếp cho nhóm em trong thời gian thực hiện đề tài Nhóm em cám ơn thầy đã ra những lời khuyên từ kinh nghiệm cũng như hướng phát triển đề tài Nhờ có những chỉ dẫn của thầy, nhóm em cũng đã định hướng được về việc triển khai đài tài thế nào Xin chân thành cám ơn thầy

Dự án được thực hiện trong vòng một học kỳ, khoảng thời gian cũng không nhiều, với những hạn chế về mặt kiến thức cũng như kỹ thuật, trong quá trình thực hiện đề tài có những điều thiếu sót là khó tránh khỏi nên nhóm em rất mong nhận được những

ý kiến đóng góp quý báu từ quý thầy cô để có thể cải thiện về sau Chúng em xin chân thành cảm ơn và trân trọng kính chào

PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

Là một người dùng mạng xã hội lâu năm, tôi nhận thấy rằng nhu cầu của chúng ta đối với các nền tảng này ngày càng trở nên đa dạng và phức tạp Chúng ta không chỉ mong muốn kết nối và chia sẻ thông tin mà còn đòi hỏi một môi trường an toàn, bảo mật và thân thiện Trong thời đại mà thông tin cá nhân dễ bị lạm dụng và nội dung độc hại tràn lan, việc xây dựng một trang web mạng xã hội với các chức năng tiên tiến là vô cùng cấp thiết

Một trang web mạng xã hội hiện đại không chỉ cần bảo mật tốt mà còn phải dễ sử dụng Giao diện trực quan và thân thiện với người dùng giúp chúng ta dễ dàng đăng bài, theo dõi (follow) bạn bè và nhắn tin Tôi đã trải nghiệm nhiều nền tảng khác nhau và nhận ra rằng một giao diện dễ nhìn, cùng với các thao tác đơn giản, là yếu tố quan trọng quyết định sự hài lòng của người dùng Khi mọi thứ trở nên dễ dàng hơn, từ việc chia sẻ hình ảnh, video đến cập nhật trạng thái, chúng ta có xu hướng sử dụng nền tảng đó thường xuyên hơn

Đề tài xây dựng trang web mạng xã hội của tôi cũng đặc biệt chú trọng đến các tính năng hiện đại như nhận diện khuôn mặt và tự động gắn thẻ Những tính năng này không chỉ tăng cường bảo mật mà còn giúp quản lý và chia sẻ hình ảnh trở nên thuận tiện hơn Nhận diện nội dung toxic là một bước tiến lớn trong việc bảo vệ người dùng khỏi các nội dung có hại như quấy rối, xúc phạm và bạo lực, góp phần xây dựng một môi trường giao tiếp an toàn và lành mạnh

Hơn nữa, tích hợp chatbot tìm kiếm bạn bè thông qua các tiêu chí như sở thích, nơi ở, trường học và sở trường mang lại trải nghiệm tìm kiếm và kết nối tự nhiên hơn Tôi đã từng gặp khó khăn trong việc tìm kiếm những người có cùng sở thích hoặc nền tảng trên các mạng xã hội hiện tại Chatbot thông minh sẽ giúp giải quyết vấn đề này một cách hiệu quả, tăng cường sự kết nối và tương tác giữa người dùng

Không thể không kể đến việc tuân thủ các quy định và luật pháp liên quan đến bảo vệ thông tin cá nhân và ngăn chặn nội dung có hại Các tính năng hiện đại này không chỉ giúp tuân thủ các quy định một cách hiệu quả mà còn tạo ra sự tin tưởng cho người dùng Công nghệ AI và machine learning đang ngày càng phát triển và trở nên phổ biến trong nhiều lĩnh vực, bao gồm mạng xã hội Việc áp dụng những công nghệ này không chỉ đáp ứng nhu cầu hiện tại mà còn mở ra nhiều cơ hội phát triển và sáng tạo trong tương lai Trong bối cảnh cạnh tranh khốc liệt giữa các nền tảng mạng xã hội, tích hợp các tính

năng tiên tiến như nhận diện khuôn mặt, lọc nội dung toxic và chatbot tìm kiếm bạn bè

sẽ tạo ra lợi thế cạnh tranh, thu hút và giữ chân người dùng

Do đó, việc xây dựng một trang web mạng xã hội với giao diện dễ nhìn, thao tác đơn giản, cùng các chức năng nhận diện khuôn mặt, tự động gắn thẻ, nhận diện nội dung toxic và chatbot tìm kiếm bạn bè không chỉ đáp ứng nhu cầu hiện tại của người dùng mà còn góp phần vào sự phát triển bền vững và lâu dài của nền tảng mạng xã hội Điều này không chỉ tạo ra một môi trường an toàn, kết nối và tương tác mạnh mẽ mà còn thúc đẩy

sự cạnh tranh và đổi mới trong lĩnh vực mạng xã hội

2 Mục đích của đề tài

WebSocialMedia là một website mạng xã hội tạo ra một nền tảng hiện đại và tiện ích, đáp ứng được nhu cầu đa dạng của người dùng ngày nay Trang web sẽ được thiết kế với giao diện người dùng thân thiện và hấp dẫn, giúp người dùng dễ dàng thực hiện các hoạt động như đăng bài, theo dõi bạn bè và giao tiếp

Các tính năng tiên tiến như nhận diện khuôn mặt, tự động gắn thẻ và nhận diện nội dung toxic sẽ được tích hợp để tăng cường tính bảo mật và giúp người dùng tránh xa các mối

đe dọa trực tuyến Đặc biệt, việc phát triển chatbot thông minh sẽ hỗ trợ người dùng tìm kiếm bạn bè dựa trên các sở thích và tiêu chí khác, nâng cao khả năng kết nối và tương tác trên nền tảng

Chính sách bảo mật và quản lý dữ liệu sẽ được đặt lên hàng đầu, đảm bảo tuân thủ các quy định pháp luật để bảo vệ thông tin cá nhân của người dùng Đồng thời, việc áp dụng các công nghệ mới như AI và machine learning sẽ giúp nền tảng mạng xã hội ngày càng phát triển, cung cấp trải nghiệm người dùng tối ưu và đổi mới liên tục để đáp ứng nhu cầu ngày càng đa dạng của cộng đồng mạng

Tổng thể, mục tiêu của WebSocialMedia là xây dựng một môi trường mạng xã hội an toàn, thân thiện và hiệu quả, giúp thúc đẩy sự kết nối xã hội và tạo ra giá trị thực cho người dùng

3 Cách tiếp cận và nghiên cứu

❖ Đối tương nghiên cứu

Mọi người dùng trên toàn quốc có nhu cầu kết nối, giao tiếp qua mạng:

- Người Dùng Trẻ Tuổi: Đây là nhóm đối tượng chính của hầu hết các nền

tảng mạng xã hội Họ thường xuyên sử dụng các mạng xã hội để kết nối với bạn bè, chia sẻ thông tin và giải trí Việc nghiên cứu nhu cầu và thói quen sử

dụng của họ sẽ giúp định hình các tính năng và giao diện của trang web để phù hợp với sở thích và mong muốn của họ

- Người Dùng Trung Niên: Nhóm đối tượng này sử dụng mạng xã hội chủ yếu

để giữ liên lạc với gia đình, bạn bè và cập nhật tin tức Họ có xu hướng quan tâm đến các tính năng bảo mật và sự đơn giản trong sử dụng Nghiên cứu nhóm này sẽ giúp phát triển các tính năng dễ sử dụng và an toàn

- Người Dùng Lớn Tuổi: Mặc dù không phải là nhóm người dùng chủ yếu,

nhưng số lượng người dùng lớn tuổi sử dụng mạng xã hội ngày càng tăng Họ cần một giao diện dễ hiểu và các hướng dẫn rõ ràng Nghiên cứu đối tượng này sẽ giúp trang web trở nên thân thiện và dễ tiếp cận hơn với mọi lứa tuổi

- Người Dùng Quan Tâm Đến Quyền Riêng Tư: Trong bối cảnh các vấn đề

về bảo mật và quyền riêng tư ngày càng được quan tâm, việc nghiên cứu đối tượng này sẽ giúp hiểu rõ hơn về những lo ngại và yêu cầu của người dùng liên quan đến quyền riêng tư Điều này sẽ giúp phát triển các tính năng bảo mật mạnh mẽ và chính sách bảo vệ dữ liệu cá nhân

Thông qua việc nghiên cứu kỹ lưỡng các đối tượng này, trang web mạng xã hội

sẽ được thiết kế để đáp ứng tốt nhất nhu cầu của người dùng, đảm bảo trải nghiệm người dùng tối ưu, và tạo ra một môi trường trực tuyến an toàn, thân thiện và hiệu quả

❖ Phạm vi nghiên cứu

Phạm vi nghiên cứu của WebSocialMedia bao gồm các mặt sau:

- Tính Năng và Giao Diện Người Dùng: Nghiên cứu sẽ tập trung vào phân

tích và thiết kế giao diện người dùng sao cho dễ sử dụng và hấp dẫn, đáp ứng

đa dạng nhu cầu của các nhóm người dùng

- An Toàn và Bảo Mật: Phát triển các tính năng bảo mật như nhận diện khuôn

mặt, tự động gắn thẻ và nhận diện nội dung toxic để bảo vệ người dùng khỏi các mối đe dọa trực tuyến

- Tích Hợp Công Nghệ Mới: Nghiên cứu áp dụng các công nghệ như AI và

machine learning để cải thiện trải nghiệm người dùng và hiệu quả quản lý nội dung

- Chính Sách và Quyền Riêng Tư: Nghiên cứu các yêu cầu về quyền riêng tư

và tuân thủ các quy định pháp luật để đảm bảo sự an toàn và đáng tin cậy cho người dùng.

PHẦN NỘI DUNG CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1 Tổng quan về mạng xã hội

1.1 Khái niệm mạng xã hội

- Mạng xã hội là một loại trang web hoặc ứng dụng trực tuyến mà cho phép mọi người kết nối, chia sẻ thông tin và tương tác với nhau thông qua các hội nhóm, cộng đồng và trò chuyện (chat) trực tuyến, chia sẻ âm thanh, hình ảnh và các hình thức dịch vụ tương tự khác

1.2 Mục đích của mạng xã hội

- Mạng xã hội được tạo ra với mục đích cho phép người dùng có thể kết nối, giao lưu với nhau qua nền tảng Internet Ngoài ra, mạng xã hội còn có mục tiêu là tạo nên một cộng đồng có giá trị, nâng cao vai trò của mỗi người dùng trong việc xây dựng các mối quan hệ

- Mạng xã hội còn mang đến cho con người rất nhiều ích lợi như: Cập nhật tin tức, duy trì các mối quan hệ, kinh doanh, quảng cáo trên mạng xã hội,

1.3 Đặc điểm của mạng xã hội

Mạng xã hội tuy tồn tại dưới nhiều hình mô hình khác nhau nhưng nhìn chung, mạng xã hội đều có những điểm chung sau:

- Mạng xã hội là một ứng dụng được sử dụng trên nền tảng Internet

- Tất cả nội dung trên mạng xã hội đều do người dùng tự tạo ra, tự chia sẻ

- Mỗi người dùng trên mạng xã hội đều phải tạo tài khoản, hồ sơ riêng

- Mạng xã hội sẽ kết nối tài khoản người dùng đến các tài khoản cá nhân, tổ chức khác thông qua các tài khoản ảo do người dùng tạo ra

2 Giới thiệu về NodeJS

2.1 NodeJS là gì?

NodeJS là một môi trường thực thi mã JavaScript dựa trên Chrome's V8 JavaScript engine Nó cho phép chạy mã JavaScript nền (server-side) thay vì chỉ chạy trên trình duyệt như thông thường NodeJS được thiết kế để xây dựng các ứng dụng mạng có thể

mở rộng và hiệu quả

Điểm mạnh của NodeJS:

- JavaScript Everywhere: NodeJS cho phép phát triển ứng dụng với JavaScript

không chỉ trên phía máy chủ (server-side) mà còn cả phía máy khách side)

(client Event(client Driven và Non(client blocking I/O: NodeJS sử dụng mô hình lập trình bất đồng

bộ (asynchronous programming), giúp ứng dụng xử lý nhiều yêu cầu mà không

bị chặn lại trong quá trình chờ đợi I/O (input/output)

- Hiệu suất cao: Vì sử dụng động cơ JavaScript V8 của Chrome, NodeJS có hiệu

suất cao, đặc biệt là trong việc xử lý các yêu cầu I/O nhanh chóng

- Cộng đồng lớn: NodeJS có cộng đồng rộng lớn, cung cấp nhiều thư viện và công

cụ hỗ trợ giúp phát triển ứng dụng dễ dàng hơn

2.2 Cách thức hoạt động của NodeJS

NodeJS hoạt động dựa trên mô hình non-blocking, event-driven I/O (input/output) để xử

lý các yêu cầu Điều này có nghĩa là NodeJS không chờ đợi một hoạt động I/O hoàn thành trước khi tiếp tục thực hiện các hoạt động khác Thay vào đó, nó sử dụng callback hoặc Promise để xử lý các yêu cầu và thông báo khi chúng hoàn thành

Một số điểm chính trong cách hoạt động của NodeJS:

- Single-threaded, Non-blocking: NodeJS sử dụng mô hình single-threaded (một

luồng) để xử lý các yêu cầu Điều này không có nghĩa là NodeJS chỉ sử dụng một CPU, mà nó sử dụng non-blocking I/O để xử lý nhiều yêu cầu mà không chặn lại luồng chính

- Event Loop: NodeJS có một event loop (vòng lặp sự kiện) để xử lý các sự kiện

và yêu cầu Event loop này giúp NodeJS theo dõi các sự kiện I/O hoặc công việc

đã hoàn thành và thực hiện các callback tương ứng khi cần

- Callback hoặc Promise: NodeJS sử dụng callback hoặc Promise để xử lý kết

quả của các hoạt động bất đồng bộ Khi một hoạt động I/O hoàn thành, NodeJS gọi callback hoặc trả về một Promise để xử lý kết quả

- Các Modules: NodeJS hỗ trợ các modules và thư viện phong phú Người dùng

có thể sử dụng các modules được cung cấp sẵn hoặc tự tạo các modules của riêng

họ để mở rộng chức năng của ứng dụng

- V8 Engine: NodeJS sử dụng động cơ V8 của Chrome để thực thi mã JavaScript,

cung cấp hiệu suất và tốc độ xử lý cao

NodeJS phù hợp cho việc xây dựng các ứng dụng có yêu cầu về độ phản hồi nhanh, xử

lý nhiều kết nối đồng thời, và các ứng dụng realtime Điều này làm cho nó trở thành một lựa chọn phổ biến trong việc phát triển ứng dụng web hiệu suất cao

2.3 NodeJS làm được những gì ?

NodeJS là một môi trường thực thi mã JavaScript dựa trên Chrome's V8 engine, và nó

có khả năng thực hiện nhiều công việc khác nhau:

- Xây dựng ứng dụng web: NodeJS cho phép xây dựng các ứng dụng web hiệu suất cao, bao gồm các trang web động, ứng dụng single-page, và ứng dụng web real-time như chat applications hoặc streaming applications

- APIs và Microservices: NodeJS rất phù hợp để xây dựng các dịch vụ API hoặc microservices, đặc biệt là khi cần phản hồi nhanh và xử lý nhiều kết nối đồng thời

- Ứng dụng real-time: Với tính chất non-blocking và sự hỗ trợ cho các thư viện như Socket.IO, NodeJS được sử dụng rộng rãi cho các ứng dụng real-time như trò chơi online, chat, video call, và các ứng dụng đòi hỏi truyền thông nhanh

- Xử lý I/O nhanh: NodeJS thích hợp cho việc xử lý I/O nhanh chóng như đọc/ghi vào cơ sở dữ liệu, xử lý tập tin, hoặc giao tiếp với các API và dịch vụ khác trên mạng

- Ứng dụng desktop: Dùng các công cụ như Electron, NodeJS cũng được sử dụng

để phát triển ứng dụng desktop multi-platform

- IoT (Internet of Things): NodeJS có thể được sử dụng trong lĩnh vực IoT để kết nối, điều khiển các thiết bị thông qua Internet

NodeJS có thể sử dụng các thư viện và frameworks như ExpressJS để xây dựng các ứng dụng web một cách dễ dàng và linh hoạt Sự linh hoạt cùng với hiệu suất cao đã khiến

NodeJS trở thành một trong những lựa chọn phổ biến cho việc phát triển các ứng dụng web và dịch vụ backend

Áp dụng vào đề tài: Xây dựng API

3.Giới thiệu về ReactJS

3.1 ReactJS là gì ?

ReactJS là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI - User Interface) động và linh hoạt trong các ứng dụng web Được phát triển bởi Facebook, ReactJS đã trở thành một công cụ quan trọng trong việc phát triển các ứng dụng web hiện đại

ReactJs tuân theo kiến trúc Model View Controller (MVC), và view layer chịu trách nhiệm xử lý các ứng dụng web và thiết bị di động

3.2 Các tính năng của ReactJS

JSX - Tiện ích mở rộng cú pháp JavaScript

- JSX là lựa chọn ưu tiên của nhiều nhà phát triển web Không cần thiết phải sử dụng JSX trong quá trình phát triển React, nhưng có sự khác biệt lớn giữa việc viết tài liệu Reac.js bằng JSX và JavaScript JSX là phần mở rộng cú pháp của JavaScript Bằng cách sử dụng điều đó, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mã JavaScript

Luồng và luồng dữ liệu một chiều

- React.js được thiết kế sao cho nó chỉ hỗ trợ dữ liệu đang chảy xuôi dòng, theo một hướng Nếu dữ liệu phải chảy theo hướng khác, bạn sẽ cần các tính năng bổ sung

- React chứa một tập hợp các giá trị bất biến được truyền tới trình kết xuất thành phần dưới dạng thuộc tính trong thẻ HTML Các thành phần không thể sửa đổi trực tiếp bất kỳ thuộc tính nào nhưng hỗ trợ chức năng gọi lại để thực hiện sửa đổi

Virtual DOM (VDOM)

- React chứa một biểu diễn nhẹ của DOM thực trong bộ nhớ có tên Virtual DOM Thao tác với DOM thực chậm hơn nhiều so với VDOM vì không có gì được vẽ trên màn hình Khi trạng thái của bất kỳ đối tượng nào thay đổi, VDOM chỉ sửa đổi đối tượng đó trong DOM thực thay vì cập nhật toàn bộ đối tượng

- Điều đó làm cho mọi thứ diễn ra nhanh chóng, đặc biệt so với các công nghệ giao diện người dùng khác phải cập nhật từng đối tượng ngay cả khi chỉ một đối tượng duy nhất thay đổi trong ứng dụng web

Tiện ích mở rộng

- React hỗ trợ nhiều phần mở rộng khác nhau cho kiến trúc ứng dụng Nó hỗ trợ rộng rãi kết xuất phía máy chủ, Flux và Redux trong phát triển ứng dụng web React Native là một framework phổ biến được phát triển từ React để tạo các ứng dụng di động tương thích chéo

Gỡ lỗi

- Việc thử nghiệm ứng dụng React rất dễ dàng nhờ sự hỗ trợ của cộng đồng lớn Ngay cả Facebook cũng cung cấp một tiện ích mở rộng trình duyệt nhỏ giúp việc

gỡ lỗi React dễ dàng hơn và nhanh hơn

3.3 Tại sao lại chon ReactJS

- Nhanh chóng - Cảm thấy nhanh chóng và phản hồi thông qua các Ứng dụng

được tạo trong React có thể xử lý các bản cập nhật phức tạp

- Mô-đun - Cho phép bạn viết nhiều tệp nhỏ hơn, có thể tái sử dụng thay vì viết

các tệp mã lớn, dày đặc Tính mô-đun của React là một giải pháp hấp dẫn cho các vấn đề về khả năng hiển thị của JavaScript

- Có thể mở rộng - React hoạt động tốt nhất trong trường hợp các chương trình

lớn hiển thị nhiều thay đổi dữ liệu

- Linh hoạt - React tiếp cận theo cách khác bằng cách chia chúng thành các thành

phần trong khi xây dựng giao diện người dùng Điều này cực kỳ quan trọng trong các ứng dụng lớn

- Phổ biến - ReactJS cho hiệu suất tốt hơn các ngôn ngữ JavaScript khác do triển

khai DOM ảo

- Dễ học - Vì nó yêu cầu hiểu biết tối thiểu về HTML và JavaScript nên thời gian

học tập thấp

- Kết xuất phía máy chủ và thân thiện với SEO - Các trang web ReactJS nổi

tiếng với tính năng kết xuất phía máy chủ Nó làm cho ứng dụng nhanh hơn và tốt hơn nhiều để xếp hạng trên công cụ tìm kiếm so với các sản phẩm có kết xuất phía máy khách React thậm chí còn tạo ra nhiều cơ hội hơn cho SEO trang web

và có thể chiếm vị trí cao hơn trên trang kết quả tìm kiếm

- Các thành phần UI có thể tái sử dụng - React cải thiện quá trình phát triển và

gỡ lỗi

- Cộng đồng - Số lượng công cụ và tiện ích mở rộng có sẵn dành cho nhà phát

triển ReactJS là rất lớn Cùng với các chức năng sẵn dùng ấn tượng, sẽ có nhiều

cơ hội hơn khi bạn khám phá thiên hà React khổng lồ như thế nào React có một cộng đồng sôi động và được hỗ trợ bởi Facebook Do đó, nó là một công cụ đáng tin cậy để phát triển trang web

4.Giới thiệu về Socket.IO

4.1 Socket.IO là gì ?

Socket.IO là một thư viện JavaScript cho phép việc thực hiện giao tiếp real-time (thời gian thực) giữa máy chủ (server) và trình duyệt (client) Nó cung cấp một cơ chế cho việc truyền thông hai chiều giữa máy chủ và trình duyệt web, cho phép dữ liệu được gửi

và nhận ngay lập tức mà không cần phải làm mới trang web

Các Đặc Điểm Chính Của Socket.IO:

- Real-Time Communication: Socket.IO cho phép thiết lập các kết nối hai chiều

giữa client và server, cho phép truyền thông thời gian thực, ví dụ như chat trực tuyến, cập nhật dữ liệu real-time

- WebSocket và Fallbacks: Nó sử dụng WebSocket nếu trình duyệt hỗ trợ, nhưng

nếu không hỗ trợ, nó sẽ tự động chuyển sang các phương pháp thay thế như long polling hoặc server-sent events để duy trì kết nối real-time

- Event-Based Communication: Socket.IO dựa trên mô hình giao tiếp dựa trên

sự kiện Bạn có thể gửi và lắng nghe các sự kiện từ cả server và client, cho phép hành động linh hoạt khi có dữ liệu mới

- Dễ Dàng Sử Dụng: Thư viện này có cú pháp đơn giản và dễ sử dụng, cung cấp

API để gửi và nhận dữ liệu một cách thuận tiện

4.2 Socket.IO hoạt động trong NodeJs

Trong Node.js, Socket.IO được sử dụng như một thư viện cho phép xây dựng các ứng dụng real-time bằng cách tạo và quản lý các kết nối real-time giữa server và client Đây

là cách Socket.IO hoạt động trong môi trường Node.js:

- Khởi Tạo Một Máy Chủ Socket.IO:

+ Bắt đầu bằng việc tạo một máy chủ Socket.IO trong Node.js Điều này thường được thực hiện thông qua việc tạo một máy chủ HTTP thông thường (ví dụ: http.createServer()) và gắn kết Socket.IO với máy chủ này

+ Một khi máy chủ Socket.IO được khởi tạo, nó lắng nghe các kết nối đến từ các client

- Kết Nối Với Client:

+ Khi một trình duyệt (client) kết nối đến server, trình duyệt sẽ gửi yêu cầu tạo kết nối Socket.IO

+ Server sẽ xác nhận yêu cầu và thiết lập kết nối giữa client và server thông qua WebSocket hoặc các kỹ thuật fallback như long polling hoặc server-sent events

- Giao Tiếp Real-Time:

+ Khi kết nối được thiết lập, client và server có thể gửi và nhận dữ liệu real-time thông qua các sự kiện (events)

+ Server có thể phát các sự kiện (emit events) và client có thể lắng nghe (listen) các sự kiện này, và ngược lại, client cũng có thể phát sự kiện và server lắng nghe

- RTCPeerConnection: Thành phần chính giúp thiết lập, duy trì và giám sát kết nối ngang hàng Nó chịu trách nhiệm cho việc xử lý các luồng phương tiện (media streams) như âm thanh và video

- ICE (Interactive Connectivity Establishment): Một framework giúp thiết lập kết nối ngang hàng bằng cách tìm kiếm các đường dẫn tốt nhất giữa các peers thông qua các kỹ thuật như STUN (Session Traversal Utilities for NAT) và TURN (Traversal Using Relays around NAT)

Signaling:

- WebRTC không quy định cách thức signaling, nhưng signaling là cần thiết để trao đổi thông tin giữa các peers nhằm thiết lập kết nối Quá trình này thường bao gồm việc trao đổi SDP (Session Description Protocol) để mô tả thông tin kết nối

- Live Streaming: Phát trực tiếp các sự kiện, buổi hội thảo hoặc nội dung giải trí

- Real-Time Data Transfer: Truyền tải dữ liệu thời gian thực giữa các peers, như trong các ứng dụng chat, chia sẻ file, hoặc chơi game trực tuyến

IoT (Internet of Things): Kết nối các thiết bị IoT với nhau để chia sẻ dữ liệu và điều khiển từ xa

6.Giới thiệu về Python

6.2 Cách thức hoạt động Python

Python là một ngôn ngữ thông dịch (interpreted language), nghĩa là mã nguồn Python được thực thi bởi một trình thông dịch mà không cần biên dịch trước Quá trình thực thi

mã nguồn Python bao gồm các bước chính sau:

- Lexical Analysis (Phân tích từ vựng): Mã nguồn Python được chia thành các token (như từ khóa, toán tử, tên biến, v.v.)

- Parsing (Phân tích cú pháp): Các token được phân tích để tạo ra một cấu trúc cây

cú pháp trừu tượng (Abstract Syntax Tree - AST)

- Bytecode Compilation (Biên dịch Bytecode): AST được chuyển đổi thành bytecode, một dạng mã trung gian

- Execution (Thực thi): Trình thông dịch Python (Python Interpreter) thực thi bytecode, và từ đó chương trình Python được chạy

- Data Science và Machine Learning (Khoa học dữ liệu và học máy): Python là ngôn ngữ lựa chọn hàng đầu trong lĩnh vực này với các thư viện mạnh mẽ như NumPy, pandas, scikit-learn, TensorFlow, và PyTorch

- Automation and Scripting (Tự động hóa và viết kịch bản): Python thường được

sử dụng để viết các script tự động hóa các tác vụ lặp đi lặp lại và quản lý hệ thống

- Software Development (Phát triển phần mềm): Python hỗ trợ phát triển các ứng dụng phần mềm, từ các ứng dụng nhỏ đến các hệ thống phức tạp

- Game Development (Phát triển game): Với thư viện như Pygame, Python có thể được sử dụng để phát triển các trò chơi 2D

- Networking (Mạng): Python có thể được sử dụng để viết các ứng dụng mạng, phân tích và quản lý mạng

- Desktop Applications (Ứng dụng máy tính để bàn): Python có các thư viện như Tkinter, PyQt, và Kivy để phát triển các ứng dụng GUI trên desktop

- IoT (Internet of Things): Python có thể được sử dụng trên các thiết bị nhỏ như Raspberry Pi để phát triển các dự án IoT

7.Technical stack

Hình ảnh 1 1 Technical stack

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU

CẦU

1 Khảo sát hiện trạng

Hiện nay, có rất nhiều trang web mạng xã hội phổ biến Chỉ cần với từ khóa “các mạng

xã hội thông dụng” thì Google đã trả về rất nhiều trang web mạng xã hội thích hợp kể cả trong nước và ngoài nước Để đảm bảo tính phổ biến và cách vận hành, nhóm em tiến hành khảo sát các trang web mạng xã hội

Hai trang web mạng xã hội được chọn để khảo sát là Facebook và Instagram

- Facebook là phương tiện truyền thông xã hội và dịch vụ mạng xã hội trực tuyến thành lập vào năm 2004 của Mỹ thuộc sở hữu của Meta Platforms có trụ sở tại Menlo Park, California

- Instagram là một mạng xã hội chia sẻ ảnh và video lớn và phổ biến nhất hiện nay bên cạnh 2 mạng xã hội lớn là Facebook và Twitter Đây cũng là một ứng dụng miễn phí trên nền tảng iOS và Android với tính năng cung cấp rất nhiều các chế độ chỉnh sửa ảnh và video khác nhau dựa trên sở thích của người dùng

- Đăng bài viết, nhật ký, tương tác bình luận,

chia sẻ, gắn thẻ, bạn bè, nhắn tin, xem video,

nhóm cộng đồng, trang, tìm kiếm tài khoản,

trang thông tin cá nhân, game

- Đăng bài viết, nhật ký, tương tác bình luận, chia sẻ, gắn thẻ, theo dõi, nhắn tin, xem video, tìm kiếm tài khoản, trang thông tin cá nhân

Cách sử

dụng

Bảng 1 1 So sánh Facebook và Instagram

Kết luận sau khi khảo sát:

- Các website mạng xã hội hiện nay hầu hết đều có những tính năng:

- Đăng bài viết, nhật ký, tương tác bình luận, chia sẻ, gắn thẻ

- Theo dõi

- Nhắn tin

- Tìm kiếm tài khoản

- Quản lý thông tin cá nhân

- Xem video

- Ngoài ra các website còn đáp ứng đầy đủ cho người dùng các yếu tố:

- Đảm bảo tính ổn định, mượt mà, thân thiện và dễ sử dụng

- Bảo mật thông tin

1.1.1 Yêu cầu chức năng

Từ khảo sát trên, nhóm em nhận thấy được trang web mạng xã hội WebSocialMedia tất yếu cần có những chức năng chính như sau:

- Đối với người dùng:

+ Xử lý đăng nhập, đăng ký, đăng xuất, phân quyền

+ Đăng bài viết, tương tác bình luận

+ Chia sẻ bài viết, báo cáo bài viết

+ Theo dõi người dùng

+ Nhắn tin, cuộc gọi

+ Tìm kiếm tài khoản

+ Quản lý tài khoản cá nhân

+ Tìm kiếm bạn bè bằng Chatbot

+ Đề xuất theo dõi

+ Đề xuất gắn thẻ bằng nhận diện khuôn mặt

quan đến vũ khí

- Đối với quản trị viên:

+ Đăng nhập, đăng xuất

+ Quản lý tài khoản người dùng

+ Quản lý bài viết

1.1.2 Yêu cầu phi chức năng

Dưới đây là một số yêu cầu phi chức năng đối với hệ thống, trình duyệt chạy hệ thống:

- Tốc độ truy cập ổn định

- Hệ thống phải được bảo mật, dễ dàng bảo trì

- Giao diện thân thiện với người dùng, dễ dàng sử dụng

2 Xác định yêu cầu

2.1 Lược đồ usecase

Hình ảnh 2 1 Lượt đồ Usecase

• Không chính xác: Tới bước 4

• User không tồn tại: Tới bước 4

• Mail chưa xác thực: Tới bước 6

4 Thông báo sai

5 Đăng nhập thành công và chuyển về trang homepage người dùng

6 Gửi mail xác thực, tới bước 7

7 Người dùng xác nhận mail, tới bước 8

8 Tới bước 5

Alternative Flow 5.1 Nếu người dùng là admin thì sẽ chuyển đến trang homepage admin Bussiness rule Không có

Bảng 2 2 Đặc tả usecase Đăng nhập