Đặc tả giao diện hộp thoại tùy chọn tin nhắn của người dùng khác .... Đặc tả giao diện hộp thoại tùy chọn của nhóm chat 2 thành viên .... Đặc tả giao diện hộp thoại tùy chọn của nhóm cha
Ý nghĩa khoa học và thực tiễn
CƠ SỞ LÝ THUYẾT
XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU
Phân tích yêu cầu
2.2.1 Yêu cầu chức năng nghiệp vụ
2.2.2 Danh sách yêu cầu chức năng nghiệp vụ
2.2.3 Yêu cầu chức năng hệ thống
2.2.4 Yêu cầu chức năng phi hệ thống
THIẾT KẾ HỆ THỐNG
Thiết kế cơ sở dữ liệu
3.2.3 Mô tả cơ sở dữ liệu
CÀI ĐẶT VÀ THỬ NGHIỆM
Cài đặt
STT Thời gian Công việc Ghi chú
- Xây dựng use case, đặc tả use case, sequence diagram
- Tìm hiểu về Spring Boot
- Xây dựng khung sườn cho hệ thống (phân lớp các tầng để thực hiện những chức năng nhất định)
- Phân tích, thiết kế database phục vụ cho những chức năng liên quan đến nhắn tin.
- Cài đặt database phục vụ cho chức năng liên quan đến nhắn tin
- Cấu hình websocket để giao tiếp thời gian thực giữa giao diện và server
- Thiết kế giao diện nhắn tin giữa người dùng với nhau
- Tiếp tục cải thiện giao diện nhắn tin người dùng
- Viết chức năng ở phía server để gửi và nhận tin nhắn
- Thiết kế giao diện nhắn tin trong một nhóm
- Viết chức năng cho phép gửi và nhận tin nhắn trong một nhóm
- Hoàn thiện các chức năng liên quan đến nhắn tin nhóm
- Viết chức năng video call
- Trao đổi với giảng viên về báo cáo Ý kiến của giảng viên hướng dẫn
(Ký và ghi rõ họ tên)
Người viết đề cương (Ký và ghi rõ họ tên)
Chúng em xin chân thành cảm ơn các thầy cô trong Khoa Công nghệ thông tin đã cung cấp kiến thức và kỹ năng quý báu, giúp chúng em hoàn thành đề tài và áp dụng vào công việc sau này Đồng thời, chúng em cũng cảm ơn Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh vì đã tạo môi trường học tập thuận lợi, hỗ trợ chúng em thực hiện đề tài hiệu quả.
Chúng em xin gửi lời tri ân chân thành đến thạc sĩ Nguyễn Trần Thi Văn, người đã tận tâm hỗ trợ và hướng dẫn chúng em trong suốt quá trình thực hiện đề tài Những lời khuyên và kinh nghiệm thực tế của thầy đã giúp chúng em nâng cao chất lượng và hiệu quả công việc Chúng em cảm ơn thầy đã kịp thời góp ý và chỉnh sửa, giúp chúng em vượt qua khó khăn và hoàn thành đúng tiến độ Dù thời gian thực hiện đề tài ngắn và kiến thức còn hạn chế, chúng em rất mong nhận được ý kiến đóng góp quý báu từ thầy cô để cải thiện sản phẩm trong tương lai Những đóng góp này sẽ mở ra cơ hội cho chúng em tiếp cận những góc nhìn mới và hoàn thiện hơn trong công việc của mình.
Cuối cùng, chúng em xin gửi lời chúc sức khỏe và thành công đến quý thầy cô trong sự nghiệp cao quý của mình Chân thành cảm ơn quý thầy cô!
1.1 Tính cấp thiết của đề tài 25
1.2 Mục tiêu của đề tài 25
1.5 Ý nghĩa khoa học và thực tiễn 27
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 28
1.1 Giới thiệu về Spring Framework 28
1.1.2 Các thành phần chính của Spring Framework 28
1.2 Giới thiệu về Spring Boot 29
1.2.2 Một số tính năng của Spring Boot 30
1.2.3 Lợi ích của việc sử dụng Spring Boot 30
1.3 Giới thiệu về Spring Security 30
1.3.2 Lợi ích của việc sử dụng Spring Security 31
1.4 Giới thiệu về Spring Data JPA 31
1.4.2 Lợi ích của việc sử dụng Spring Data JPA 32
1.5.3 Tính năng nổi bật của VueJs 33
1.5.4 Lợi ích của sử dụng VueJs 34
1.6.2 Lợi ích của việc sử dụng MySQL 35
1.7.2 Các đặc điểm chính của WebSocket 36
1.8.2 Các đặc điểm chính của WebRTC 37
CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.1 Yêu cầu chức năng nghiệp vụ 41
2.2.3 Yêu cầu chức năng hệ thống 46
2.2.4 Yêu cầu chức năng phi hệ thống 46
2.3 Danh sách các tác nhân và chức năng của hệ thống 47
2.5.6 UC_006 Xem, chỉnh sửa thông tin cá nhân 56
2.5.8 UC_008 Gửi lời mời kết bạn 58
2.5.9 UC_009 Thu hồi lời mời kết bạn 59
2.5.10 UC_010 Chấp nhận lời mời kết bạn 60
2.5.11 UC_011 Từ chối lời mời kết bạn 61
2.5.14 UC_014 Chỉnh sửa bài viết 65
2.5.16 UC_016 Xem chi tiết bài viết 67
2.5.18 UC_018 Bình luận bài viết 69
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 71
3.1.3 Gửi lời mời kết bạn 75
3.1.4 Thu hồi lời mời kết bạn 76
3.1.5 Chấp nhận lời mời kết bạn 77
3.1.6 Từ chối lời mời kết bạn 78
3.1.9 Chỉnh sửa bài viết 81
3.1.10 Bình luận bài viết 82
3.2 Thiết kế cơ sở dữ liệu 82
3.2.3 Mô tả cơ sở dữ liệu 88
3.3.1 Giao diện trang đăng ký 98
3.3.2 Giao diện trang nhập OTP đăng ký 99
3.3.3 Giao diện trang đăng nhập 102
3.3.4 Giao diện trang quên mật khẩu 103
3.3.5 Giao diện trang đổi mật khẩu 104
3.3.6 Giao diện hộp thoại tùy chọn tài khoản 105
3.3.7 Giao diện hộp thoại thông tin tài khoản 107
3.3.9 Giao diện trang lời mời kết bạn 109
3.3.10 Giao diện thanh điều hướng chính 111
3.3.11 Giao diện hộp thoại thêm bạn 114
3.3.12 Giao diện hộp thoại thông tin người dùng tìm được 115
3.3.13 Giao diện hộp thoại tùy chọn bạn bè 116
3.3.14 Giao diện trang bài đăng 118
3.3.15 Giao diện hộp thoại tạo bài viết 120
3.3.16 Giao diện hộp thoại chỉnh sửa ảnh và video tải lên 122
3.3.17 Giao diện hộp thoại gắn thẻ bạn bè 123
3.3.18 Giao diện hộp thoại chi tiết bài viết 125
3.3.19 Giao diện hộp thoại cập nhật thông tin tài khoản 129
3.3.20 Giao diện danh sách nhóm chat 131
3.3.22 Giao diện hộp thoại tùy chọn tin nhắn của người dùng khác 134
3.3.23 Giao diện hộp thoại tùy chọn tin nhắn của bản thân 135
3.3.24 Giao diện hộp thoại thông tin nhóm chat 2 thành viên 136
3.3.24 Giao diện hộp thoại thông tin nhóm chat nhiều hơn 2 thành viên 139
3.3.25 Giao diện hộp thoại tùy chọn của nhóm chat 2 thành viên 140
3.3.26 Giao diện hộp thoại tùy chọn của nhóm chat nhiều hơn 2 thành viên 141
3.3.27 Giao diện hộp thoại chấp nhận cuộc gọi video 141
3.3.28 Giao diện cuộc gọi video 142
3.3.29 Giao diện chỉnh sửa tin nhắn 143
3.3.30 Giao diện hộp thoại tạo nhóm mới 143
3.3.32 Giao diện hộp thoại xác nhận rời khỏi nhóm 147
3.3.33 Giao diện danh sách người dùng đã chặn 148
3.3.34 Giao diện hộp thoại tùy chọn đối với người dùng đã bị chặn 148
3.3.35 Giao diện trang thống kê hệ thống dành cho admin 149
3.3.36 Giao diện trang quản lý người dùng dành cho admin 150
3.3.37 Giao diện trang quản lý bài viết dành cho admin 152
3.3.38 Giao diện trang quản lý nhóm dành cho admin 153
CHƯƠNG 4: CÀI ĐẶT VÀ THỬ NGHIỆM 155
Bảng 1 Yêu cầu chức năng quản lý thông tin tài khoản 42
Bảng 2 Yêu cầu chức năng quản lý bạn bè 43
Bảng 3 Yêu cầu chức năng quản lý bài viết 43
Bảng 4 Yêu cầu chức năng quản lý tin nhắn 44
Bảng 5 Yêu cầu chức năng quản lý nhóm 45
Bảng 6 Yêu cầu chức năng quản lý hệ thống 46
Bảng 7 Yêu cầu chức năng hệ thống 46
Bảng 8 Yêu cầu chức năng phi hệ thống 47
Bảng 9 Danh sách các tác nhân và chức năng của hệ thống 49
Bảng 10 Usecase chức năng đăng ký 52
Bảng 11 Usecase chức năng đăng nhập 53
Bảng 12 Usecase chức năng đăng xuất 54
Bảng 13 Usecase chức năng quên mật khẩu 55
Bảng 14 Usecase chức năng đổi mật khẩu 56
Bảng 15 Usecase chức năng xem, chỉnh sửa thông tin cá nhân 57
Bảng 16 Usecase chức năng chặn người dùng 58
Bảng 17 Usecase chức năng gửi lời mời kết bạn 59
Bảng 18 Usecase chức năng thu hồi lời mời kết bạn 60
Bảng 19 Usecase chức năng chấp nhận lời mời kết bạn 61
Bảng 20 Usecase chức năng từ chối lời mời kết bạn 62
Bảng 21 Usecase chức năng xóa bạn 63
Bảng 22 Usecase chức năng đăng bài viết 65
Bảng 23 Usecase chức năng chỉnh sửa bài viết 66
Bảng 24 Usecase chức năng xóa bài viết 67
Bảng 25 Usecase chức năng xem chi tiết bài viết 67
Bảng 26 Usecase chức năng thích bài viết 69
Bảng 27 Usecase chức năng bình luận bài viết 70
Bảng 39 Bảng Group_chat_user 97
Bảng 41 Đặc tả giao diện đăng ký 99
Bảng 42 Đặc tả giao diện trang nhập OTP đăng ký 101
Bảng 43 Đặc tả giao diện trang đăng nhập 102
Bảng 44 Đặc tả giao diện trang quên mật khẩu 103
Bảng 45 Đặc tả giao diện trang đổi mật khẩu 105
Bảng 46 Đặc tả giao diện hộp thoại tùy chọn tài khoản 106
Bảng 47 Đặc tả giao diện hộp thoại thông tin tài khoản 108
Bảng 48 Đặc tả giao diện trang lời mời kết bạn 111
Bảng 49 Đặc tả giao diện thanh điều hướng chính 113
Bảng 50 Đặc tả giao diện hộp thoại thêm bạn 115
Bảng 51 Đặc tả giao diện hộp thoại thông tin người dùng tìm được 116
Bảng 52 Đặc tả giao diện hộp toại tùy chọn bạn bè 117
Bảng 53 Đặc tả giao diện trang bài đăng 119
Bảng 54 Đặc tả giao diện hộp thoại tạo bài viết 121
Bảng 55 Đặc tả giao diện hộp thoại chỉnh sửa ảnh và video tải lên 123
Bảng 56 Đặc tả giao diện hộp thoại gắn thẻ bạn bè 125
Bài viết cung cấp các bảng đặc tả giao diện cho nhiều tính năng khác nhau trong ứng dụng, bao gồm hộp thoại chi tiết bài viết, cập nhật thông tin tài khoản, danh sách nhóm chat, và các tùy chọn tin nhắn cho người dùng Nó cũng mô tả giao diện cho cuộc gọi video, chỉnh sửa tin nhắn, tạo nhóm mới, thêm thành viên vào nhóm, và xác nhận rời khỏi nhóm Ngoài ra, bài viết đề cập đến danh sách người dùng đã chặn và các tùy chọn liên quan, cùng với các trang quản lý dành cho admin như quản lý người dùng, bài viết và nhóm Cuối cùng, các công cụ, công nghệ và quá trình thử nghiệm hệ thống cũng được nêu rõ.
Bài viết này cung cấp định nghĩa cho các khái niệm quan trọng trong lập trình và phát triển ứng dụng, bao gồm Spring Framework, Spring Boot, Spring Security, Spring Data JPA, VueJs và MySQL Ngoài ra, bài viết cũng mô tả giao diện người dùng của ứng dụng Zalo và Facebook trong các chế độ sáng và tối Hệ thống được phân tích qua lược đồ use case và sơ đồ thiết kế (SD) cho các chức năng như đăng ký, đăng nhập, gửi và chấp nhận lời mời kết bạn, cũng như quản lý bài viết Cuối cùng, bài viết giới thiệu các sơ đồ ERD và class diagram để minh họa cấu trúc dữ liệu và mối quan hệ giữa các đối tượng trong hệ thống.
Bài viết này mô tả các giao diện và hộp thoại quan trọng trong ứng dụng, bao gồm trang nhập OTP đăng ký, trang đăng nhập, và trang quên mật khẩu Nó cũng đề cập đến các chức năng như đổi mật khẩu, thông tin tài khoản, danh sách bạn bè, và lời mời kết bạn Ngoài ra, bài viết giới thiệu thanh điều hướng chính, hộp thoại thêm bạn, và các tùy chọn bạn bè Các tính năng khác bao gồm trang bài đăng, hộp thoại tạo và chỉnh sửa bài viết, cũng như các tùy chọn gắn thẻ bạn bè Cuối cùng, bài viết trình bày giao diện danh sách nhóm chat và các hộp thoại tùy chọn cho tin nhắn cá nhân và nhóm chat, cung cấp cái nhìn tổng quan về cách tương tác trong ứng dụng.
Bài viết này trình bày các giao diện và hộp thoại quan trọng trong ứng dụng, bao gồm giao diện cuộc gọi video, chỉnh sửa tin nhắn, tạo nhóm mới, thêm thành viên vào nhóm, và xác nhận rời khỏi nhóm Ngoài ra, còn có danh sách người dùng đã chặn và các tùy chọn liên quan, cùng với trang thống kê và quản lý người dùng, bài viết, nhóm dành cho admin Những giao diện này đóng vai trò quan trọng trong việc quản lý và tương tác trong ứng dụng.
1.1 Tính cấp thiết của đề tài
Phát triển website mạng xã hội là một thách thức thú vị và cần thiết trong thời đại công nghệ hiện nay Các nền tảng này đóng vai trò quan trọng trong việc kết nối và tạo không gian trao đổi thông tin giữa cộng đồng người dùng Sự phát triển của Internet đã giúp mọi người dễ dàng kết nối và tương tác, từ đó làm phong phú thêm cộng đồng trực tuyến.
Vấn đề này mở ra cơ hội cho sự phát triển kinh tế và kinh doanh Các trang mạng xã hội thành công không chỉ thu hút người dùng mà còn cung cấp không gian quảng cáo và tiếp thị lý tưởng cho doanh nghiệp Nhờ đó, các doanh nghiệp có thể tận dụng nền tảng này để mở rộng cơ sở khách hàng và nâng cao hiệu quả kinh doanh.
Tạo ra một môi trường trực tuyến an toàn và tích cực là rất quan trọng trong việc đối phó với tin đồn và thông tin sai lệch Việc xây dựng một mạng xã hội chất lượng không chỉ giúp người dùng tránh xa thông tin độc hại mà còn góp phần xây dựng một cộng đồng trực tuyến năng động và có ý thức.
Trong bối cảnh công nghệ phát triển nhanh chóng, website mạng xã hội không chỉ là một nghiên cứu mà còn đóng góp tích cực cho sự tiến bộ xã hội Chúng tôi cung cấp giải pháp sáng tạo nhằm nâng cao hiệu quả trong tương tác, giao tiếp và trao đổi thông tin trong cộng đồng một cách bền vững.
1.2 Mục tiêu của đề tài
Trong bài viết này, nhóm chúng em nghiên cứu công nghệ Spring Boot và VueJs, đồng thời áp dụng hiệu quả để xây dựng một trang web Chúng em đã phát triển một website mạng xã hội với đầy đủ các chức năng cần thiết.
- Kết nối với bạn bè, người thân thông qua số điện thoại
- Đăng các bài viết tích hợp hình ảnh, video để có thể chia sẻ các khoảnh khắc trong cuộc sống
- Tương tác với những bài đăng của bạn bè một cách dễ dàng, thuận tiện
- Nhắn tin với bạn bè, hỗ trợ gọi video
- Tìm hiểu RESTful API với công nghệ Spring Boot
- Tìm hiểu cách quản lý cơ sở dữ liệu trên MySQL
- Tìm hiểu xây dựng giao diện với framework VueJs
- Tìm hiểu về websocket để xây dựng ứng dụng phản ứng thời gian thực
- Tìm hiểu Vercel để triển khai phần FrontEnd của website
- Tìm hiểu Railway để triển khai phần BackEnd của website
- Tìm hiểu Azure SQL để triển khai phần Database của website
- Tìm hiểu WebSocket để gửi thông báo cho người dùng khi có tin nhắn mới
- Tìm hiểu WebRTC để tích hợp chức năng gọi video cho trang web
1.4 Phương pháp nghiên cứu Để thực hiện đề tài, nhóm đã sử dụng các phương pháp sau:
Phương pháp phân tích yêu cầu đề tài bao gồm việc nghiên cứu các chức năng nghiệp vụ của các trang mạng xã hội lớn như Zalo và Facebook, đồng thời tìm hiểu nhu cầu thực tế của người dùng Việc này giúp xác định các tính năng cần thiết và cải thiện trải nghiệm người dùng trên các nền tảng mạng xã hội.
Phương pháp nghiên cứu tài liệu hiệu quả bao gồm việc tham gia các khóa học liên quan đến công nghệ, đọc tài liệu và các bài viết chuyên ngành, tham khảo các nguồn tài liệu uy tín, cũng như xem video hướng dẫn về công nghệ.
Phương pháp chuyên gia là việc nhận sự góp ý, hỗ trợ và tư vấn từ giảng viên hướng dẫn cùng các thầy cô trong khoa Công nghệ thông tin tại trường Đại học Sư phạm Kỹ thuật TP HCM.
1.5 Ý nghĩa khoa học và thực tiễn
Deploy
Bảng 82 Các công cụ deploy
Kết quả đạt được
Hướng phát triển
STT Thời gian Công việc Ghi chú
- Xây dựng use case, đặc tả use case, sequence diagram
- Tìm hiểu về Spring Boot
- Xây dựng khung sườn cho hệ thống (phân lớp các tầng để thực hiện những chức năng nhất định)
- Phân tích, thiết kế database phục vụ cho những chức năng liên quan đến nhắn tin.
- Cài đặt database phục vụ cho chức năng liên quan đến nhắn tin
- Cấu hình websocket để giao tiếp thời gian thực giữa giao diện và server
- Thiết kế giao diện nhắn tin giữa người dùng với nhau
- Tiếp tục cải thiện giao diện nhắn tin người dùng
- Viết chức năng ở phía server để gửi và nhận tin nhắn
- Thiết kế giao diện nhắn tin trong một nhóm
- Viết chức năng cho phép gửi và nhận tin nhắn trong một nhóm
- Hoàn thiện các chức năng liên quan đến nhắn tin nhóm
- Viết chức năng video call
- Trao đổi với giảng viên về báo cáo Ý kiến của giảng viên hướng dẫn
(Ký và ghi rõ họ tên)
Người viết đề cương (Ký và ghi rõ họ tên)
Chúng em xin chân thành cảm ơn các thầy cô trong Khoa Công nghệ thông tin đã cung cấp cho chúng em những kiến thức và kỹ năng quý báu, giúp chúng em hoàn thành tốt đề tài Bên cạnh đó, chúng em cũng xin gửi lời cảm ơn tới Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh vì đã tạo ra môi trường học tập và điều kiện thuận lợi để chúng em thực hiện đề tài một cách hiệu quả.
Chúng em xin chân thành tri ân giảng viên thạc sĩ Nguyễn Trần Thi Văn, người đã tận tâm hỗ trợ và hướng dẫn chúng em trong quá trình thực hiện đề tài Những lời khuyên và kinh nghiệm quý báu của thầy đã giúp chúng em nâng cao chất lượng và hiệu quả công việc Chúng em cũng cảm ơn thầy đã kịp thời góp ý, giúp chúng em vượt qua khó khăn và hoàn thành đúng tiến độ Dù thời gian thực hiện ngắn và kiến thức còn hạn chế, chúng em mong nhận được ý kiến đóng góp từ thầy cô để cải thiện đề tài trong tương lai Những đóng góp của thầy cô là cơ hội quý giá để chúng em tiếp cận những góc nhìn mới, từ đó hoàn thiện sản phẩm của mình.
Chúng em xin gửi lời chúc sức khỏe và thành công đến quý thầy cô trong sự nghiệp cao quý của mình Một lần nữa, chúng em chân thành cảm ơn!
1.1 Tính cấp thiết của đề tài 25
1.2 Mục tiêu của đề tài 25
1.5 Ý nghĩa khoa học và thực tiễn 27
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 28
1.1 Giới thiệu về Spring Framework 28
1.1.2 Các thành phần chính của Spring Framework 28
1.2 Giới thiệu về Spring Boot 29
1.2.2 Một số tính năng của Spring Boot 30
1.2.3 Lợi ích của việc sử dụng Spring Boot 30
1.3 Giới thiệu về Spring Security 30
1.3.2 Lợi ích của việc sử dụng Spring Security 31
1.4 Giới thiệu về Spring Data JPA 31
1.4.2 Lợi ích của việc sử dụng Spring Data JPA 32
1.5.3 Tính năng nổi bật của VueJs 33
1.5.4 Lợi ích của sử dụng VueJs 34
1.6.2 Lợi ích của việc sử dụng MySQL 35
1.7.2 Các đặc điểm chính của WebSocket 36
1.8.2 Các đặc điểm chính của WebRTC 37
CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.1 Yêu cầu chức năng nghiệp vụ 41
2.2.3 Yêu cầu chức năng hệ thống 46
2.2.4 Yêu cầu chức năng phi hệ thống 46
2.3 Danh sách các tác nhân và chức năng của hệ thống 47
2.5.6 UC_006 Xem, chỉnh sửa thông tin cá nhân 56
2.5.8 UC_008 Gửi lời mời kết bạn 58
2.5.9 UC_009 Thu hồi lời mời kết bạn 59
2.5.10 UC_010 Chấp nhận lời mời kết bạn 60
2.5.11 UC_011 Từ chối lời mời kết bạn 61
2.5.14 UC_014 Chỉnh sửa bài viết 65
2.5.16 UC_016 Xem chi tiết bài viết 67
2.5.18 UC_018 Bình luận bài viết 69
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 71
3.1.3 Gửi lời mời kết bạn 75
3.1.4 Thu hồi lời mời kết bạn 76
3.1.5 Chấp nhận lời mời kết bạn 77
3.1.6 Từ chối lời mời kết bạn 78
3.1.9 Chỉnh sửa bài viết 81
3.1.10 Bình luận bài viết 82
3.2 Thiết kế cơ sở dữ liệu 82
3.2.3 Mô tả cơ sở dữ liệu 88
3.3.1 Giao diện trang đăng ký 98
3.3.2 Giao diện trang nhập OTP đăng ký 99
3.3.3 Giao diện trang đăng nhập 102
3.3.4 Giao diện trang quên mật khẩu 103
3.3.5 Giao diện trang đổi mật khẩu 104
3.3.6 Giao diện hộp thoại tùy chọn tài khoản 105
3.3.7 Giao diện hộp thoại thông tin tài khoản 107
3.3.9 Giao diện trang lời mời kết bạn 109
3.3.10 Giao diện thanh điều hướng chính 111
3.3.11 Giao diện hộp thoại thêm bạn 114
3.3.12 Giao diện hộp thoại thông tin người dùng tìm được 115
3.3.13 Giao diện hộp thoại tùy chọn bạn bè 116
3.3.14 Giao diện trang bài đăng 118
3.3.15 Giao diện hộp thoại tạo bài viết 120
3.3.16 Giao diện hộp thoại chỉnh sửa ảnh và video tải lên 122
3.3.17 Giao diện hộp thoại gắn thẻ bạn bè 123
3.3.18 Giao diện hộp thoại chi tiết bài viết 125
3.3.19 Giao diện hộp thoại cập nhật thông tin tài khoản 129
3.3.20 Giao diện danh sách nhóm chat 131
3.3.22 Giao diện hộp thoại tùy chọn tin nhắn của người dùng khác 134
3.3.23 Giao diện hộp thoại tùy chọn tin nhắn của bản thân 135
3.3.24 Giao diện hộp thoại thông tin nhóm chat 2 thành viên 136
3.3.24 Giao diện hộp thoại thông tin nhóm chat nhiều hơn 2 thành viên 139
3.3.25 Giao diện hộp thoại tùy chọn của nhóm chat 2 thành viên 140
3.3.26 Giao diện hộp thoại tùy chọn của nhóm chat nhiều hơn 2 thành viên 141
3.3.27 Giao diện hộp thoại chấp nhận cuộc gọi video 141
3.3.28 Giao diện cuộc gọi video 142
3.3.29 Giao diện chỉnh sửa tin nhắn 143
3.3.30 Giao diện hộp thoại tạo nhóm mới 143
3.3.32 Giao diện hộp thoại xác nhận rời khỏi nhóm 147
3.3.33 Giao diện danh sách người dùng đã chặn 148
3.3.34 Giao diện hộp thoại tùy chọn đối với người dùng đã bị chặn 148
3.3.35 Giao diện trang thống kê hệ thống dành cho admin 149
3.3.36 Giao diện trang quản lý người dùng dành cho admin 150
3.3.37 Giao diện trang quản lý bài viết dành cho admin 152
3.3.38 Giao diện trang quản lý nhóm dành cho admin 153
CHƯƠNG 4: CÀI ĐẶT VÀ THỬ NGHIỆM 155
Bảng 1 Yêu cầu chức năng quản lý thông tin tài khoản 42
Bảng 2 Yêu cầu chức năng quản lý bạn bè 43
Bảng 3 Yêu cầu chức năng quản lý bài viết 43
Bảng 4 Yêu cầu chức năng quản lý tin nhắn 44
Bảng 5 Yêu cầu chức năng quản lý nhóm 45
Bảng 6 Yêu cầu chức năng quản lý hệ thống 46
Bảng 7 Yêu cầu chức năng hệ thống 46
Bảng 8 Yêu cầu chức năng phi hệ thống 47
Bảng 9 Danh sách các tác nhân và chức năng của hệ thống 49
Bảng 10 Usecase chức năng đăng ký 52
Bảng 11 Usecase chức năng đăng nhập 53
Bảng 12 Usecase chức năng đăng xuất 54
Bảng 13 Usecase chức năng quên mật khẩu 55
Bảng 14 Usecase chức năng đổi mật khẩu 56
Bảng 15 Usecase chức năng xem, chỉnh sửa thông tin cá nhân 57
Bảng 16 Usecase chức năng chặn người dùng 58
Bảng 17 Usecase chức năng gửi lời mời kết bạn 59
Bảng 18 Usecase chức năng thu hồi lời mời kết bạn 60
Bảng 19 Usecase chức năng chấp nhận lời mời kết bạn 61
Bảng 20 Usecase chức năng từ chối lời mời kết bạn 62
Bảng 21 Usecase chức năng xóa bạn 63
Bảng 22 Usecase chức năng đăng bài viết 65
Bảng 23 Usecase chức năng chỉnh sửa bài viết 66
Bảng 24 Usecase chức năng xóa bài viết 67
Bảng 25 Usecase chức năng xem chi tiết bài viết 67
Bảng 26 Usecase chức năng thích bài viết 69
Bảng 27 Usecase chức năng bình luận bài viết 70
Bảng 39 Bảng Group_chat_user 97
Bảng 41 Đặc tả giao diện đăng ký 99
Bảng 42 Đặc tả giao diện trang nhập OTP đăng ký 101
Bảng 43 Đặc tả giao diện trang đăng nhập 102
Bảng 44 Đặc tả giao diện trang quên mật khẩu 103
Bảng 45 Đặc tả giao diện trang đổi mật khẩu 105
Bảng 46 Đặc tả giao diện hộp thoại tùy chọn tài khoản 106
Bảng 47 Đặc tả giao diện hộp thoại thông tin tài khoản 108
Bảng 48 Đặc tả giao diện trang lời mời kết bạn 111
Bảng 49 Đặc tả giao diện thanh điều hướng chính 113
Bảng 50 Đặc tả giao diện hộp thoại thêm bạn 115
Bảng 51 Đặc tả giao diện hộp thoại thông tin người dùng tìm được 116
Bảng 52 Đặc tả giao diện hộp toại tùy chọn bạn bè 117
Bảng 53 Đặc tả giao diện trang bài đăng 119
Bảng 54 Đặc tả giao diện hộp thoại tạo bài viết 121
Bảng 55 Đặc tả giao diện hộp thoại chỉnh sửa ảnh và video tải lên 123
Bảng 56 Đặc tả giao diện hộp thoại gắn thẻ bạn bè 125
Bài viết này cung cấp mô tả chi tiết về các giao diện trong hệ thống, bao gồm hộp thoại chi tiết bài viết, cập nhật thông tin tài khoản, danh sách nhóm chat, và các tùy chọn tin nhắn cho cả người dùng khác và bản thân Ngoài ra, nó cũng đề cập đến thông tin nhóm chat cho 2 thành viên và nhiều hơn, cùng với hộp thoại chấp nhận cuộc gọi video và chỉnh sửa tin nhắn Các giao diện quản lý dành cho admin như thống kê hệ thống, quản lý người dùng, bài viết và nhóm cũng được nêu rõ Cuối cùng, bài viết liệt kê các công cụ, công nghệ, và quy trình thử nghiệm hệ thống được sử dụng.
Bài viết này cung cấp định nghĩa và hình ảnh minh họa cho các khái niệm quan trọng trong lập trình và phát triển ứng dụng, bao gồm Spring Framework, Spring Boot, Spring Security, Spring Data JPA, VueJs và MySQL Nó cũng trình bày giao diện người dùng của các nền tảng mạng xã hội như Zalo và Facebook, với các chế độ sáng và tối Ngoài ra, bài viết đề cập đến các sơ đồ use case, quy trình đăng ký, đăng nhập, gửi và chấp nhận lời mời kết bạn, cũng như các chức năng quản lý bài viết như đăng, chỉnh sửa và bình luận Cuối cùng, bài viết giới thiệu các sơ đồ ERD và class diagram, giúp người đọc hiểu rõ hơn về cấu trúc dữ liệu và mối quan hệ giữa các đối tượng trong hệ thống.
Bài viết này mô tả các giao diện và chức năng quan trọng của một ứng dụng, bao gồm trang nhập OTP đăng ký, trang đăng nhập, và trang quên mật khẩu Ngoài ra, nó cũng đề cập đến trang đổi mật khẩu, hộp thoại tùy chọn tài khoản và thông tin tài khoản Các tính năng như danh sách bạn bè, lời mời kết bạn, và thanh điều hướng chính cũng được giới thiệu Hơn nữa, bài viết cung cấp thông tin về hộp thoại thêm bạn, thông tin người dùng, và tùy chọn bạn bè Các trang bài đăng, tạo bài viết, chỉnh sửa ảnh và video, cũng như gắn thẻ bạn bè được trình bày chi tiết Cuối cùng, bài viết mô tả giao diện danh sách nhóm chat, nhóm chat, và các tùy chọn tin nhắn cho người dùng, bao gồm thông tin nhóm chat với hai thành viên và nhiều hơn thế.
Bài viết này trình bày các giao diện và hộp thoại quan trọng trong hệ thống quản lý, bao gồm giao diện cuộc gọi video và chỉnh sửa tin nhắn Nó cũng đề cập đến các hộp thoại như tạo nhóm mới, thêm thành viên vào nhóm, và xác nhận rời khỏi nhóm Ngoài ra, bài viết cung cấp thông tin về danh sách người dùng đã chặn, tùy chọn cho người dùng bị chặn, cùng với các trang thống kê và quản lý dành cho admin, bao gồm quản lý người dùng, bài viết và nhóm.
1.1 Tính cấp thiết của đề tài
Việc phát triển website mạng xã hội hiện nay không chỉ là một thách thức mà còn thể hiện sự cấp bách trong thời đại công nghệ Các nền tảng này đóng vai trò là cầu nối, tạo không gian cho người dùng trao đổi và chia sẻ thông tin Sự phát triển của Internet đã cho phép tạo ra những nền tảng mạng xã hội, giúp mọi người kết nối và tương tác dễ dàng, từ đó làm phong phú thêm cộng đồng trực tuyến.
Vấn đề này mở ra cơ hội phát triển kinh tế và kinh doanh, khi các trang mạng xã hội không chỉ thu hút người dùng mà còn cung cấp không gian quảng cáo và tiếp thị thuận lợi cho doanh nghiệp Nhờ vào các nền tảng này, doanh nghiệp có thể mở rộng cơ sở khách hàng và nâng cao hiệu quả kinh doanh.
Việc xây dựng một môi trường trực tuyến an toàn và tích cực là rất quan trọng để ngăn chặn tin đồn và thông tin sai lệch Điều này không chỉ bảo vệ người dùng khỏi thông tin độc hại mà còn góp phần hình thành một cộng đồng trực tuyến năng động và có ý thức.
Trong bối cảnh công nghệ phát triển nhanh chóng, website mạng xã hội không chỉ là một đề tài nghiên cứu mà còn góp phần tích cực vào sự tiến bộ xã hội Chúng tôi cung cấp các giải pháp sáng tạo nhằm nâng cao hiệu quả và tính bền vững trong quá trình tương tác, giao tiếp và trao đổi thông tin trong cộng đồng.
1.2 Mục tiêu của đề tài
Nhóm chúng em nghiên cứu công nghệ Spring Boot và VueJs, nhằm áp dụng hiệu quả vào việc xây dựng một trang web Chúng em đã phát triển một website mạng xã hội với đầy đủ các chức năng cần thiết.
- Kết nối với bạn bè, người thân thông qua số điện thoại
- Đăng các bài viết tích hợp hình ảnh, video để có thể chia sẻ các khoảnh khắc trong cuộc sống
- Tương tác với những bài đăng của bạn bè một cách dễ dàng, thuận tiện
- Nhắn tin với bạn bè, hỗ trợ gọi video
- Tìm hiểu RESTful API với công nghệ Spring Boot
- Tìm hiểu cách quản lý cơ sở dữ liệu trên MySQL
- Tìm hiểu xây dựng giao diện với framework VueJs
- Tìm hiểu về websocket để xây dựng ứng dụng phản ứng thời gian thực
- Tìm hiểu Vercel để triển khai phần FrontEnd của website
- Tìm hiểu Railway để triển khai phần BackEnd của website
- Tìm hiểu Azure SQL để triển khai phần Database của website
- Tìm hiểu WebSocket để gửi thông báo cho người dùng khi có tin nhắn mới
- Tìm hiểu WebRTC để tích hợp chức năng gọi video cho trang web
1.4 Phương pháp nghiên cứu Để thực hiện đề tài, nhóm đã sử dụng các phương pháp sau:
Phương pháp phân tích yêu cầu đề tài bao gồm việc nghiên cứu các chức năng nghiệp vụ của những trang mạng xã hội lớn như Zalo và Facebook, đồng thời tìm hiểu nhu cầu thực tế của người dùng để đảm bảo đáp ứng tốt nhất các mong đợi của họ.
Phương pháp nghiên cứu tài liệu bao gồm việc tham gia các khóa học công nghệ, đọc tài liệu và bài viết liên quan, tham khảo các nguồn tài liệu uy tín, cũng như xem video hướng dẫn về công nghệ.
Phương pháp chuyên gia là việc tìm kiếm ý kiến, sự hỗ trợ và tư vấn từ giảng viên hướng dẫn cũng như các thầy cô trong khoa Công nghệ thông tin tại trường Đại học Sư phạm Kỹ thuật TP HCM.
1.5 Ý nghĩa khoa học và thực tiễn