Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website mạng xã hộ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â

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

Nhu cầu sử dụng mạng xã hội ngày càng đa dạng và phức tạp, với mong muốn không chỉ kết nối và chia sẻ thông tin mà còn yêu cầu một môi trường an toàn và bảo mật Trong bối cảnh thông tin cá nhân dễ bị lạm dụng và nội dung độc hại gia tăng, việc phát triển một trang web mạng xã hội với các chức năng tiên tiến trở nên cấp thiết hơn bao giờ hết.

Một trang web mạng xã hội hiện đại cần đảm bảo bảo mật tốt và dễ sử dụng Giao diện trực quan và thân thiện giúp người dùng dễ dàng đăng bài, theo dõi bạn bè và nhắn tin Tôi nhận thấy rằng một giao diện dễ nhìn và thao tác đơn giản là yếu tố quan trọng để tạo sự hài lòng cho người dùng Khi việc chia sẻ hình ảnh, video và cập nhật trạng thái trở nên dễ dàng hơn, người dùng 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 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ẻ, giúp tăng cường bảo mật và quản lý hình ảnh hiệu quả Nhận diện nội dung toxic cũng 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, góp phần xây dựng môi trường giao tiếp an toàn và lành mạnh.

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

Việc tuân thủ quy định và luật pháp về bảo vệ thông tin cá nhân cùng với việc ngăn chặn nội dung có hại là rất quan trọng Những tính năng hiện đại này không chỉ giúp đảm bảo tuân thủ hiệu quả mà còn xây dựng niềm tin cho người dùng.

Công nghệ AI và machine learning đang ngày càng trở nên phổ biến trong các lĩnh vực như mạng xã hội Việc ứng dụng các công nghệ này không chỉ đáp ứng nhu cầu hiện tại mà còn tạo 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, việc tích hợp công nghệ tiên tiến là rất cần thiết.

Công nghệ tiên tiến như nhận diện khuôn mặt, lọc nội dung độc hại và chatbot tìm kiếm bạn bè sẽ mang lại lợi thế cạnh tranh, giúp thu hút và giữ chân người dùng hiệu quả.

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

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

WebSocialMedia là nền tảng mạng xã hội hiện đại, đáp ứng nhu cầu đa dạng của người dùng Với giao diện thân thiện và hấp dẫn, trang web giúp người dùng dễ dàng đăng bài, theo dõi bạn bè và giao tiếp hiệu quả.

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 độc hại sẽ được tích hợp để nâng cao tính bảo mật và bảo vệ người dùng khỏi các mối đe dọa trực tuyến Đặc biệt, sự phát triển của chatbot thông minh sẽ giúp người dùng tìm kiếm bạn bè dựa trên sở thích và tiêu chí khác, từ đó cải thiện 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 ưu tiên hàng đầu nhằm tuân thủ pháp luật và bảo vệ thông tin cá nhân của người dùng Việc áp dụng công nghệ mới như AI và machine learning sẽ thúc đẩy sự phát triển của nền tảng mạng xã hội, mang đến trải nghiệm người dùng tối ưu và đổi mới liên tục để đáp ứng nhu cầu đa dạng của cộng đồng mạng.

WebSocialMedia hướng đến việc tạo ra một môi trường mạng xã hội an toàn, thân thiện và hiệu quả, nhằm thúc đẩy kết nối xã hội và mang lại giá trị thực cho người dùng.

Cách tiếp cận và 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 là nhóm đối tượng chủ yếu trên hầu hết các nền tảng mạng xã hội, thường xuyên sử dụng để kết nối với bạn bè, chia sẻ thông tin và giải trí Nghiên cứu nhu cầu và thói quen sử dụng của họ là rất quan trọng để hiểu rõ hơn về hành vi và sở thích của nhóm này.

18 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 chủ yếu sử dụng mạng xã hội để kết nối với gia đình và bạn bè, cũng như cập nhật tin tức Họ đặc biệt quan tâm đến tính năng bảo mật và sự đơn giản trong việc sử dụng Nghiên cứu nhóm người dùng này sẽ hỗ trợ phát triển các tính năng an toàn và dễ sử dụng hơn.

Người dùng lớn tuổi đang ngày càng gia tăng trên mạng xã hội, mặc dù họ không phải là nhóm người dùng chính Để thu hút đối tượng này, cần thiết kế giao diện dễ hiểu và cung cấp các hướng dẫn rõ ràng Nghiên cứu nhu cầu của người dùng lớn tuổi sẽ giúp trang web trở nên thân thiện và dễ tiếp cận cho mọi lứa tuổi.

Người dùng ngày càng quan tâm đến quyền riêng tư và bảo mật thông tin cá nhân Nghiên cứu về đối tượng này giúp hiểu rõ những lo ngại và yêu cầu của họ, từ đó 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 hiệu quả.

Bằng cách nghiên cứu sâu sắc các đối tượng người dùng, trang web mạng xã hội sẽ được tối ưu hóa để đáp ứng nhu cầu của họ, mang lại trải nghiệm người dùng tốt nhất 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 của WebSocialMedia bao gồm các mặt sau:

Nghiên cứu sẽ tập trung vào việc phân tích và thiết kế giao diện người dùng, nhằm tạo ra một trải nghiệm dễ sử dụng và hấp dẫn Mục tiêu là đáp ứng đa dạng nhu cầu của các nhóm người dùng khác nhau.

Để đảm bảo an toàn và bảo mật cho người dùng, cần phát triển các tính năng như nhận diện khuôn mặt, tự động gắn thẻ và nhận diện nội dung độc hại Những công nghệ này sẽ giúp bảo vệ người dùng khỏi các mối đe dọa trực tuyến hiệu quả hơn.

Tích hợp công nghệ mới như AI và machine learning giúp nâng cao trải nghiệm người dùng và tối ưu hóa hiệu quả quản lý nội dung Việc ứng dụng những công nghệ tiên tiến này không chỉ cải thiện khả năng tương tác mà còn tăng cường sự chính xác trong việc cung cấp thông tin.

Chính sách và quyền riêng tư là yếu tố quan trọng trong việc 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 Điều này giúp đảm bảo sự an toàn và đáng tin cậy cho người dùng, tạo niềm tin và bảo vệ thông tin cá nhân của họ.

CƠ SỞ LÝ THUYẾT

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à nền tảng trực tuyến cho phép người dùng kết nối và chia sẻ thông tin thông qua các nhóm, cộng đồng và trò chuyện Người dùng có thể tương tác với nhau bằng cách chia sẻ âm thanh, hình ảnh và nhiều dịch vụ khác.

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

Mạng xã hội được thiết kế để kết nối và giao lưu người dùng qua Internet, đồng thời xây dựng một cộng đồng có giá trị Mục tiêu chính của nó là nâng cao vai trò của từng cá nhân trong việc phát triển các mối quan hệ xã hội.

Mạng xã hội cung cấp nhiều lợi ích cho con người, bao gồm khả năng cập nhật tin tức nhanh chóng, duy trì và phát triển các mối quan hệ cá nhân, cũng như hỗ trợ trong kinh doanh và quảng cáo hiệu quả.

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 cho phép người dùng kết nối tài khoản cá nhân với các tài khoản của tổ chức và cá nhân khác thông qua các tài khoản ảo mà họ tạo ra.

Giới thiệu về NodeJS

NodeJS là môi trường thực thi mã JavaScript dựa trên engine V8 của Chrome, cho phép chạy mã JavaScript trên máy chủ thay vì chỉ trong trình duyệt Được thiết kế để phát triển các ứng dụng mạng hiệu quả và có khả năng mở rộng, NodeJS mang lại nhiều lợi ích cho việc xây dựng ứng dụng.

- 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 (client- side)

NodeJS áp dụng mô hình lập trình bất đồng bộ (asynchronous programming) thông qua Event-Driven và Non-blocking I/O, cho phép ứng dụng xử lý nhiều yêu cầu đồng thời mà không bị chặn 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 theo mô hình non-blocking và event-driven I/O, cho phép xử lý các yêu cầu mà không cần chờ đợi hoàn thành của hoạt động I/O Thay vào đó, NodeJS sử dụng callback hoặc Promise để quản lý các yêu cầu và thông báo khi chúng đã hoàn tất.

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

NodeJS hoạt động theo mô hình single-threaded, cho phép xử lý nhiều yêu cầu mà không làm chậm luồng chính nhờ vào non-blocking I/O Điều này không có nghĩa là NodeJS chỉ sử dụng một CPU, mà nó tối ưu hóa khả năng xử lý đồng thời các yêu cầu hiệu quả hơn.

NodeJS sử dụng một vòng lặp sự kiện (event loop) để quản lý và xử lý các sự kiện cũng như yêu cầu Vòng lặp này cho phép NodeJS theo dõi các sự kiện I/O và các công việc đã hoàn thành, từ đó thực hiện các callback tương ứng khi cần thiết.

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 sẽ gọi callback hoặc trả về một Promise để xử lý kết quả đó.

NodeJS cung cấp một hệ thống modules phong phú, cho phép người dùng sử dụng các modules có sẵn hoặc tự tạo ra các modules riêng để nâng cao tính 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 là lựa chọn lý tưởng cho việc phát triển ứng dụng web hiệu suất cao nhờ khả năng xử lý nhiều kết nối đồng thời và yêu cầu độ phản hồi nhanh, đặc biệt là trong các ứng dụng realtime.

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:

NodeJS enables the development of high-performance web applications, including dynamic websites, single-page applications, and real-time web applications such as chat and streaming services.

NodeJS là nền tảng lý tưởng cho việc phát triển các dịch vụ API và microservices, nhờ vào khả năng phản hồi nhanh chóng và xử lý hiệu quả nhiều kết nối đồng thời.

NodeJS là nền tảng lý tưởng cho các ứng dụng real-time nhờ tính chất non-blocking và khả năng hỗ trợ các thư viện như Socket.IO Nó được sử dụng phổ biến trong các lĩnh vực như trò chơi trực tuyến, chat, video call, và những ứng dụng cần truyền thông nhanh chóng.

NodeJS là lựa chọn lý tưởng cho việc xử lý I/O nhanh chóng, bao gồm các tác vụ như đọc và ghi dữ liệu vào cơ sở dữ liệu, xử lý tập tin, cũng như giao tiếp với các API và dịch vụ trực tuyến khác.

- Ứ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 cho phép phát triển ứng dụng web một cách dễ dàng và linh hoạt nhờ vào việc sử dụng các thư viện và framework như ExpressJS Sự kết hợp giữa tính linh hoạt và hiệu suất cao đã làm cho NodeJS trở thành một lựa chọn phổ biến cho các nhà phát triển.

NodeJS đã trở thành một trong những lựa chọn hàng đầu cho phát triển ứng dụng web và dịch vụ backend, đặc biệt trong việc xây dựng API Sự linh hoạt và hiệu suất cao của NodeJS giúp các nhà phát triển tạo ra các giải pháp mạnh mẽ và hiệu quả cho các ứng dụng hiện đại.

ReactJS là thư viện JavaScript phổ biến, được Facebook phát triển, chuyên dùng để tạo ra giao diện người dùng (UI) động và linh hoạt cho các ứng dụng web Với vai trò quan trọng trong phát triển ứng dụng web hiện đại, ReactJS đã thu hút sự chú ý của nhiều lập trình viên.

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

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

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

Hiện nay, có nhiều trang web mạng xã hội phổ biến, và chỉ cần tìm kiếm với từ khóa “các mạng xã hội thông dụng”, Google sẽ trả về nhiều kết quả phù hợp cả trong và ngoài nước Để đảm bảo tính phổ biến và hiểu rõ cách vận hành, nhóm chúng tôi đã 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, một nền tảng mạng xã hội được thành lập vào năm 2004 tại Mỹ, thuộc sở hữu của Meta Platforms, có trụ sở chính tại Menlo Park, California.

Instagram là một trong những mạng xã hội chia sẻ ảnh và video lớn nhất hiện nay, cạnh tranh với Facebook và Twitter Ứng dụng miễn phí này có sẵn trên iOS và Android, cung cấp nhiều chế độ chỉnh sửa ảnh và video đa dạng, phù hợp với sở thích của người dùng.

- Giao diện đa dạng, bắt mắt, nhiều chức năng - Giao diện đơn giản, gần gũi với người dùng

Các chức năng nổi bật

Đăng bài viết và nhật ký là cách hiệu quả để tương tác với bạn bè trên mạng xã hội Người dùng có thể chia sẻ nội dung, gắn thẻ bạn bè, và tham gia vào các cuộc trò chuyện qua bình luận Ngoài ra, việc nhắn tin và xem video cũng tạo cơ hội kết nối trong các nhóm cộng đồng và trang thông tin cá nhân Tìm kiếm tài khoản và tham gia vào các trò chơi trực tuyến giúp nâng cao trải nghiệm giải trí và giao lưu xã hội.

- Đă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

- Đơn giản, dễ thực hiện - Đơn giản, dễ thực hiện

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ẻ

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

- 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

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:

+ 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

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

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

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

+ Kiểm duyệt bài viết: nhận diện ngôn từ phản cảm và các hình ảnh liên

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

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

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

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

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

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

Description Đăng ký tài khoản trang web

Basic Flow 1 Actor nhấn vào nút “Đăng ký” trên trang web “Đăng nhập” Chuyển trang web“Đăng ký”

2 Actor nhập các thông tin cá nhân

5 Người dùng xác thực mail

6 Chuyển sang trang đăng nhập Alternative Flow 4.1 Hiển thị thông báo tài khoản đã tồn tại khi trùng username

Bảng 2 1 Đặc tả usecase Đăng ký

Hình ảnh 2 3 Usecase Đăng nhập

Description Đăng nhập vào trang web

Pre-condition Có tài khoản

Basic Flow 1 Actor nhập username và password đã đăng ký

3 Kiểm tra các thông tin trên có chính xác hay không?

• 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

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

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

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

Description Đăng xuất tài khoản

Pre-condition Đã đăng nhập bằng tài khoản đăng ký

Basic Flow 1 Nhấn nút “Đăng xuất” ở thanh LeftBar

2 Chuyển sang trang Đăng nhập Alternative Flow Không có

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

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

Description Người dùng thay đổi mật khẩu

Basic Flow 1 Nhấn vào biểu tượng ảnh đại diện của người dùng ở thanh Navbar, hiển thị bảng tùy chọn chức năng ở ngay dưới biểu tượng

2 Nhấn nút “Đổi mật khẩu”, hiển thị form Đổi mật khẩu

3 Người dùng nhập thông tin mật khẩu cũ, mật khẩu mới và xác nhận mật khẩu mới

Alternative Flow 3 Nhấn nút “Close” để đóng form Đổi mật khẩu

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

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

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

2.3.4.1 Xem trang cá nhân người dùng

Name Xem trang thông tin cá nhân người dùng

Description Xem trang thông tin cá nhân của người dùng khác

Basic Flow 1 Người dùng nhấn vào tên của người dùng khác

2 Chuyển đến trang cá nhân của người dùng đó và xem các thông tin của người dùng đó được hiển thị

Alternative Flow 1 Người dùng nhấn vào biểu tượng ảnh đại diện, hiển thị menu chức năng

2 Nhấn vào nút ‘Trang cá nhân’

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

2.3.4.2 Theo dõi / Hủy theo dõi

Name Theo dõi / Hủy theo dõi

Description Theo dõi người dùng / Hủy theo dõi người dùng

Basic Flow 1 Người dùng nhấn vào tên người dùng khác

2 Chuyển đến trang thông tin cá nhân người dùng đó

3 Nhấn nút Follow để theo dõi người dùng Alternative Flow 3.1 Nhấn nút Following để hủy theo dõi người dùng

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

2.3.4.3 Cập nhật thông tin cá nhân

Name Cập nhật thông tin cá nhân

Description Chỉnh sửa các thông tin cá nhân người dùng

Basic Flow 1 Nhấn vào ảnh đại diện của người dùng trên thanh Navbar, nhấn nút

“Trang cá nhân” trong bảng menu

2 Nhấn nút “update”, mở form Cập nhật thông tin cá nhân

3 Người dùng nhập các thông tin các thông tin cá nhân vào

Alternative Flow 3 Nhấn nút “Close” để đóng form Cập nhật thông tin cá nhân

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

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

2.3.5.1 Tìm kiếm tài khoản bằng ký tự

Name Tìm kiếm tài khoản bằng ký tự

Description Tìm kiếm tài khoản người dùng theo tên

Basic Flow 1 Người dùng nhập tên người dùng cần tìm kiếm vào ô Tìm kiếm trên thanh Navbar của trang web

2 Hiển thị các tài khoản người dùng theo yêu cầu Alternative Flow Không có

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

Name Tài khoản đề xuất

Description Người dùng có thể theo dõi những người tài khoản do hệ thống đề xuất

Basic Flow 1 Hệ thống hiển thị các tài khoản được đề xuất để nguồi dùng

2.3.5.3 Tìm kiếm tài khoản bằng ChatBot

Name Tìm kiếm tài khoản bằng ChatBot

Description Người dùng tìm kiếm bạn bè bằng các thông tin như địa điểm, sở thích…

Pre-condition Đã đăng nhập bằng tài khoản Đăng ký

Basic Flow 1 Người dùng nhập thông tin của những người dùng mà mình tìm kiếm, sau đó nhấn gửi

2 Chatbot gửi về thông tin hoặc thông báo cho người dùng xem

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

Description Người dùng đăng bài viết

Basic Flow 1 Người dùng nhập nội dung bài viết vào form Đăng bài viết của trang web

3 Bài viết được đăng lên dòng thời gian Alternative Flow Không có

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

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

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

Pre-condition Đăng nhập bằng tài khoản đăng ký

Basic Flow 1 Người dùng nhập nội dung cần đăng tải

2 Hệ thống kiêm tra độ phản cảm của đoạn văn, nhận diện vũ khí trong hình ảnh và hiển thị cảnh báo phản cảm

3 Người dùng nhấn nút Đăng

4 Hệ thống hiển thị bài viết mới với nội dung phản cảm đã được che đi Alternative Flow Không có

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í

Description Người dùng thả tim (hoặc hủy thả tim) vào bài viết

Basic Flow 1 Người dùng nhấn like vào bài viết

2 Trái tim chuyển từ màu trắng sang màu đỏ

Alternative Flow 2.1 Trái tim chuyển từ màu đỏ sang màu trắng khi nhấn thêm lần nữa để hủy thả tim Bussiness rule Không có

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

Description Người dùng bình luận, đánh giá vào bài viết

Basic Flow 1 Nhấn nút “See comments”

2 Hiển thị các dòng bình luận và form bình luận

3 Người dùng nhập bình luận vào ô bình luận

5 Dòng bình luận mới được hiển thị bên dưới Alternative Flow Không có

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

Name Chia sẻ bài viết

Description Người dùng chia sẻ bài viết

Basic Flow 1 Nhấn nút “Share”, form Share bài viết được hiển thị

2 Người dùng nhập nội dung chia sẻ

4 Bài viết được đăng lên dòng thời gian Alternative Flow 2 Nhấn nút “Close” để đóng form Share bài viết

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

2.3.6.2.4 Gắn thẻ tag theo tên

Name Gắn thẻ tag theo tên

Pre-condition Đăng nhập bằng tài khoản đăng ký vả đang trong quá trình đăng bài viết

Basic Flow 1 Người dùng click vào nút Gắn thẻ

2 Hệ thống hiển thị hộp thoại tìm kiếm người dùng

3 Người dùng nhập từ khóa để tìm kiếm

4 Hệ thống hiển thị danh sách người dùng chứa từ khóa tìm kiếm

5 Người dùng chọn một hoặc nhiều người dùng cần gắn thẻ và nhấn Đăng bài viết

6 Hệ thống hiển thị bài viết mới có gắn thẻ người dùng khác Alternative Flow Không có

Bảng 2 14 Đặc tả gắn thẻ tag theo tên 2.3.6.2.4 Đề xuất tag bằng nhận diện khuôn mặt

Name Đề xuất tag bằng nhận diện khuôn mặt

Pre-condition Đăng nhập bằng tài khoản đăng ký

Basic Flow 1 Người dùng nhấn vào hình ảnh của bài viết

2 Hệ thống hiển thị chi tiết của bài viết, nhận diện khuôn mặt và hiển thị đề xuất gắn thẻ Alternative Flow Không có

Bảng 2 15 Đặc tả Đề xuất tag bằng nhận diện khuôn mặt 2.3.6.3 Báo cáo bài viết

Name Báo cáo bài viết

Description Người dùng báo cáo bài viết

Basic Flow 1 Nhấn nút tùy chọn trên góc phải bài viết, hiển thị nút báo cáo bài viết

2 Nhấn nút báo cáo bài viết

3 Hiển thị thông báo báo cáo bài viết thành công Alternative Flow Không có

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

Description Người dùng báo cáo bài viết

Basic Flow 1 Nhấn nút tùy chọn trên góc phải bài viết, hiển thị nút “Delete”

2 Nhấn nút “Delete” để xóa bài viết

3 Hiển thị thông báo xóa bài viết thành công Alternative Flow 2 Nhấn nút tùy chọn 1 lần nữa, ẩn nút “Delete”

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

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

Description Người dùng xem thông báo

Basic Flow 1 Người dùng nhấn biểu tượng trên thanh Navbar

2 Hiển thị bảng thông báo ở bên dưới biểu tượng Alternative Flow Không có

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

Hình ảnh 2 9 Usecase Nhắn tin

Name Tạo cuộc trò chuyện

Description Người dùng tạo cuộc trò chuyện mới

Basic Flow 1 Nhấn nút “Messenger” trên thanh LeftBar, chuyển sang trang tin nhắn

2 Nhấn nút “Tạo cuộc hội thoại mới”, hiển thị form Tạo cuộc hội thoại

3 Nhập tên cuộc hội thoại, chọn tài khoản thêm vào cuộc hội thoại

5 Hiển thị cuộc hội thoại mới trong danh sách các cuộc hội thoại Alternative Flow 3 Nhấn nút “Close”, đóng form Tạo cuộc hội thoại mới

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

Description Người dùng xem tin nhắn

Basic Flow 1 Nhấn vào nút “Messenger” trên thanh LeftBar, chuyển sang trang tin nhắn

2 Chọn 1 cuộc hội thoại để xem tin nhắn Alternative Flow Không có

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

Description Người dùng gửi tin nhắn

Basic Flow 1 Nhấn vào nút “Messenger” trên thanh LeftBar, chuyển sang trang tin nhắn

3 Nhập tin nhắn, hình ảnh hoặc đường link và nhấn biểu tượng gửi tin nhắn để gửi

4 Tin nhắn hiển thị trong hộp thoại tin nhắn Alternative Flow Không có

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

Basic Flow 1 Người gọi nhấn nút gọi tại giao diện Tin nhắn

2 Hệ thống hiển thị cửa sổ cuộc gọi và thêm người gọi giao diện Đồng thời, hệ thống gửi cuộc gọi đến cho người nhận

3 Người nhận chấp nhận cuộc gọi

4 Hệ thống hiển thị cửa sổ cuộc gọi và thêm người nhận vào giao diện Alternative Flow Không có

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

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

Description Người dùng xem bản tin

Basic Flow 1 Nhấn vào 1 bản tin ở trang chủ

2 Hiển thị bản tin toàn màn hình

3 Nhấn nút “→” để xem bản tin tiếp theo Alternative Flow 3 Nhấn nút “←” để xem bản tin trước đó

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

Description Người dùng đăng bản tin

Basic Flow 1 Nhấn vào nút “+” ở phần bản tin, hiển thị form thêm bản tin mới

2 Chọn hình ảnh, nhấn nút “Add”

3 Hiển thị bản tin mới trong danh sách bản tin Alternative Flow 2 Nhấn nút “Close”, đóng form thêm bản tin mới

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

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

Description Đăng xuất tài khoản

Pre-condition Đã đăng nhập bằng tài khoản admin

Basic Flow 1 Nhấn nút “Đăng xuất” ở thanh LeftBar

2 Chuyển sang trang Đăng nhập Alternative Flow Không có

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

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

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

2.4.2.1 Xem danh sách tài khoản người dùng

Name Xem danh sách tài khoản người dùng

Description Người dùng gửi tin nhắn

Basic Flow 1 Người dùng ấn vào “Tài khoản” trên thanh LeftBar

2 Danh sách các bài viết được hiển thị Alternative Flow Không có

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

2.4.2.2 Xóa tài khoản người dùng

Name Xóa tài khoản người dùng

Description Admin xóa tài khoản người dùng

Basic Flow 1 Người dùng ấn vào “Tài khoản” trên thanh LeftBar

2 Danh sách các tài khoản được hiển thị

3 Người dùng ấn vào nút “Delete” của tài khoản muốn xóa

4 Tài khoản đã được xóa đi Alternative Flow Không có

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

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

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

2.4.3.1 Xem danh sách bài viết đã đăng

Name Xem danh sách bài viết

Description Admin xem danh sách các bài viết của user

Basic Flow 1 Người dùng ấn vào “Bài viết” trên thanh LeftBar

2 Danh sách các bài viết được hiển thị Alternative Flow Không có

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

2.4.3.2 Xem chi tiết bài viết

Name Xem chi tiết bài viết

Description Admin xem chi tiết bài viết được đăng

2 Danh sách các bài viết được hiển thị

3 Người dùng ấn vào nút “View” của bài viết muốn xem

4 Form bài viết được hiển thị Alternative Flow Không có

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

Description Admin xóa bài viết của người dùng

3 Người dùng ấn vào nút “Delete” của bài viết muốn xóa

4 Bài viết đã được xóa đi Alternative Flow Không có

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

Name Tìm kiếm bài viết

Description Admin tìm kiếm bài viết

3 Người dùng ấn vào nút tùy chọn ( ) ở tiêu đề của cột

4 Hiển thị menu chức năng

5 Người dùng chọn chức năng ‘Filter’, chọn phép so sánh, nhập từ khóa cần tìm

6 Hiển thị danh sách các bài viết cần tìm

Không có Business rule Không có

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

Hình ảnh 2 14 Usecase Thống kê

Description Admin thống kê các số liệu

Basic Flow 1 Người dùng ấn nút “Dashboard” trên thanh LeftBar

2 Hiển thị số lượng bài viết, tài khoản và lượt truy cập trực tuyến Alternative Flow Không có

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

THIẾT KẾ ỨNG DỤNG

Class Diagram

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

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id ObjectId Giá trị ID được tạo tự động

2 username String Tài khoản người dùng

5 name String Tên người dùng

6 coverPic String Ảnh bìa người dùng

7 profilePic String Ảnh thông tin người dùng

8 city String Địa chỉ người dùng

9 website String Trang web người dùng

10 role String Quyền hạn của người dùng, giá trị mặc định khi tạo trên trang web là “user”

11 favourite String Sở thích của người dùng

12 school String Trường mà người dùng đang học hoặc đã học

13 career String Nghề nghiệp người dùng

14 talent String Sở trường của người dùng

Bảng 3 1 Mô tả dữ liệu Users

2 desc String Nội dung bài viết

3 img String Hình ảnh đính kèm trong bài viết

4 userId Int Id người dùng đăng bài viết

5 createdAt Date Thời gian tạo bài viết

6 groupId Int Id nhóm mà bài viết được đăng (nếu có)

7 sharePostId Int Id bài đăng mà bài viết chia sẽ (nếu có)

8 quantityTag Int Số lượng người Tag

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

2 userId Int Id người dùng like bài viết

3 postId Int Id bài viết mà người dùng đã like

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

2 desc String Nội dung bình luận

3 createdAt Date Thời gian bình luận

4 userId Int Id người dùng bình luận

5 postId Int Id bài viết mà người dùng bình luận

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

2 img String Hình ảnh nhật ký

3 userId Int Id người dùng đăng nhật ký

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

3 desc String Mô tả nhóm

4 coverPic String Hình ảnh bìa của nhóm

5 profilePic String Hình ảnh đại diện của nhóm

6 createdUserId Int Id người dùng tạo nhóm

7 createdAt Date Thời gian tạo nhóm

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

2 groupId Int Id của nhóm

3 userId Int Id của người dùng tham gia nhóm

4 postition String Chức vụ của người dùng trong nhóm

5 createdJion Date Thời gian người dùng tham gia nhóm

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

2 followerUserId Int Id người dùng theo dõi

3 followedUserId Int Id người dùng được theo dõi

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

2 name String Tên cuộc trò chuyện

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

1 conversationId Int Id của cuộc trò chuyện

2 userId Int Id người dùng tham gia cuộc trò chuyện

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

2 conversationId Int Id cuộc trò chuyện

3 senderId Int Id người gửi tin nhắn

4 text String Nội dung tin nhắn

5 type String Loại tin nhắn

6 createdAt Date Thời gian tạo tin nhắn

7 updatedAt Date Thời gian cập nhật tin nhắn

8 file_url String Địa chỉ url của file

9 title String Tiêu đề của file

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

2 messageId Int Id của tin nhắn

3 userId Int Id người dùng biểu cảm

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

2 senderId Int Id của người dùng tương tác (nếu có)

3 receiverId Int Id của người dùng nhận thông báo

4 type String Loại thông báo

5 create_at Datetime Thời gian thông báo

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

2 userId Int Id của người dùng

3 content String Nội dung báo cáo

4 postId Int Id của bài viết

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

3 img String Ảnh bài viết

4 isDangerous Boolean Id của bài viết

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

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

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

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

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

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

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

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

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

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

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

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

3.5.2 Sequence xem trang cá nhân

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

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

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

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

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

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

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

3.6.4 Sequence chia sẻ bài viết

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

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

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

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

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

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

3.8 Sequence quản lý bản tin

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

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

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

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

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

Hình ảnh 3 22 Cuộc gọi 3.10 Sequence đăng xuất

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

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

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

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

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

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

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

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

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

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

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

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

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

Hình ảnh 3 30 Sequence Đề xuất kết bạn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.5.2 Activity xem trang cá nhân

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

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

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

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

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

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

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

4.6.4 Activity chia sẻ bài viết

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

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

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

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

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

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

4.8 Activity quản lý bản tin

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

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

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

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

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

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

Hình ảnh 3 55 Activity Cuộc gọi 4.10 Activity đăng xuất

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

THIẾT KẾ GIAO DIỆN

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

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

Hình ảnh 4 1 SCP001 Giao diện Đăng nhập

No Name Required Type Reference Note

2 Mật khẩu True Input Hiển thị dưới dạng

Khi nhấn nút Enter, hệ thống sẽ xác nhận người dùng; nếu thành công, người dùng sẽ được chuyển đến trang web SCP003 Ngược lại, nếu xác nhận thất bại, sẽ hiển thị thông báo lỗi Đối với người quản trị, họ sẽ được truy cập vào trang web SCP02.

4 Đăng ký Button Khi click, chuyển đến trang web Đăng ký SCP002

1.2 SCP002 Giao diện đăng ký

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

3 Mật khẩu True Input Hiển thị dưới dạng

Khi người dùng nhấn nút xác nhận, nếu quá trình thành công, hệ thống sẽ hiển thị thông báo trên màn hình và chuyển hướng đến trang đăng nhập SCP001 Ngược lại, nếu có lỗi xảy ra, thông báo lỗi sẽ được hiển thị để người dùng biết.

4 Đăng nhập Button Khi click, chuyển đến trang web Đăng nhập SCP001

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

Hình ảnh 4 3 SCP003 Trang chủ

1 Home Link Khi click, chuyển đến

2 Tìm kiếm True Input SCP011

3 Chế độ tối Khi click, chuyển đến

4 Follower Link Khi click, chuyển đến

5 Tin nhắn Link Khi click, chuyển đến

6 Thông báo Khi click, chuyến

7 Ảnh đại diện người dùng

Image Data từ API Khi click, hiển thị 8 và

8 Trang cá nhân Link Khi click, chuyển đến

9 Đổi mật khẩu Link Khi click, hiển thị

10 Home Link Khi click, chuyển đến

11 Follower Link Khi click, chuyển đến

12 Group Link Khi click, chuyển đến

13 Messenger Link Khi click, chuyển đến

14 Add story Button Khi click, hiển thị

15 Ảnh story Image Data từ API Khi click vào, hiển thị

16 Tên người dùng đăng story

18 Nội dung đăng bài viết

19 Ảnh đăng kèm bài viết

True Input Chọn file ảnh

20 Share Button Khi click, bài viết sẽ được hiển thị phía dưới

21 Ảnh đại diện người dùng đăng bài viết

22 Tên người dùng đăng bài viết

23 Thời gian đăng bài viết

24 Nội dung bài viết được đăng

25 Like Data từ API Khi click sẽ đổi màu

26 See comments Khi click, hiển thị

27 Share Khi click, hiển thị

28 Menu Button Khi click, hiển thị menu chọn xóa và báo cáo

29 Logout Button Khi click, chuyển đến

30 Ảnh đại diện người dùng gợi ý

31 Tên người dùng gợi ý theo dõi

Link Data từ API Khi click, chuyển đến

32 Follow Button Khi click, tài khoản người dùng được hiển thị phía dưới

33 Ảnh đại người dùng mà tài khoản theo dõi

34 Tên người dùng tài khoản theo dõi

35 Ảnh người dùng đăng kèm bài viết

36 Thẻ người dùng đăng bài viết

Link Khi click, chuyển đến

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

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

1 Chế độ sáng Khi click, giao diện chuyển sang chế độ sáng

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

1 Thẻ người dùng theo dõi bạn

Link Khi click, chuyển đến trang cá nhân người theo dõi SCP007

2 Ảnh đại diện người dùng theo dõi bạn

3 Tên người dùng theo dõi bạn

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

1 Ảnh bìa Image Data từ API

2 Ảnh đại diện Image Data từ API

3 Tên Text Data từ API

4 Địa điểm Text Data từ API

5 Website Text Data từ API

6 Update Button Khi click, hiển thị

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

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

1 Ảnh bìa Image Data từ API Khi click, giao diện chuyển sang chế độ sáng

4 Địa điểm Text Data từ API

5 Website Text Data từ API

Button Khi click, tên button được chuyển đổi Follow -> Following (hoặc ngược lại)

2.6 SCP008 Trang Thông tin Group

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

1 Ảnh bìa nhóm Image Data từ APi

3 Tên nhóm Text Data từ API

4 Mô tả nhóm Text Data từ API

Link Data từ API Khi click, hiện SCP019

6 Cập nhật thông tin nhóm

Button Khi click, hiện SCP016

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

1 Tạo group Button Khi click, hiện SCP015

2 Ảnh đại diện nhóm đã tham gia

3 Ảnh đại diện chưa tham gia

4 Tên nhóm Link Data từ API Khi click, chuyển đến

5 Mô tả nhóm Image Data từ API

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

Button Khi click, hiển thị

Link Data từ API Khi click, hiển thị tin nhắn của cuộc trò chuyện đó

3 Tin nhắn Text Data từ API

4 Nhập nội dung tin nhắn

6 Gửi Button Khi click, tin nhắn sẽ được hiển thị phía trên

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

1 Ô tìm kiếm tài khoản bằng tên

True Input Khi nhập các ký tự thì sẽ hiển thị những tài khoản có tên chứa các ký tự đó

3 Tên người dùng Text Data từ API

4 Thẻ kết quả tìm kiếm

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

3 Thông báo Link Khi click, sẽ đóng thông báo

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

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

1 Mật khẩu cũ True Input Hiển thị dưới dạng

2 Mật khẩu mới True Input Hiển thị dưới dạng

3 Nhập lại mật khẩu mới

True Input Hiển thị dưới dạng

4 Change Button Thực hiện thao tác đổi mật khẩu, thành công thì đóng form, ngược lại sẽ báo lỗi

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

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

1 Ảnh bìa True Input Data từ API Chọn file ảnh

2 Ảnh đại diện True Input Data từ API Chọn file ảnh

3 Email True Input Data từ API

4 Tên True Input Data từ API

5 Thành phố True Input Data từ API

6 Website True Input Data từ API

7 Update Button Thực hiện thao tác đổi cập nhật thông tin user, đóng form

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

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

1 Ảnh đại diện True Input Chọn file ảnh

2 Ảnh bìa True Input Chọn file ảnh

4 Mô tả nhóm True Input

5 Add Button Khi click, thực hiện thao tác tạo nhóm, đóng form

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

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

1 Ảnh đại diện True Input Data từ API Chọn file ảnh

2 Ảnh bìa True Input Data từ API Chọn file ảnh

3 Tên nhóm True Input Data từ API

4 Mô tả nhóm True Input Data từ API

5 Update Button Khi click, thực hiện thao tác update nhóm, đóng form

2.15 SCP017 Form đăng bản tin

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

1 Ảnh bản tin True Input Chọn file ảnh

2 Add Button Khi click, thực hiện thao tác đăng bản tin, đóng form

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

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

1 Ảnh đại diện người chia sẻ

2 Tên người dùng chia sẻ

3 Nội dung chia sẻ True Input

4 Ảnh bài viết chia sẻ

5 Tên người đăng bài viết

7 Ảnh đại diện người đăng bài viết

8 Nội dung bài viết Text Data từ API

9 Share Button Khi click, bài viết được đăng lên trang cá nhân, đóng form

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

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

1 Tìm kiếm True Input Có chức năng để tìm người dùng và thêm người dùng vào nhóm

2 Ảnh đại diện người dùng tham gia nhóm

3 Tên người dùng tham gia nhóm

Link Data từ API Khi click, chuyển đến trang cá nhân người dùng

4 Delete Button Khi click, admin xóa thành viên ra khỏi nhóm

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

1 Ảnh Image Data từ API

2 Close Click vào vị trí bất kỳ trong vùng, đóng hình ảnh

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

1 See comments Text Khi click, đóng form bình luận

2 Ảnh đại diện tài khoản đang đăng nhập

4 Send Button Khi click, dòng bình luận sẽ hiển thị phía dưới các dòng đã bình luận

6 Ảnh đại diện tài khoản đã bình luận

7 Tên tài khoản đã bình luận

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

1 Ảnh bản tin Image Data từ API

2 Prevous Button Khi click, hiển thị bản tin phía trước

3 Next Button Khi click, hiển thị bản tin kế tiếp

4 Close Button Đóng xem bản tin

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

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

2 Thành viên cuộc trò chuyện

3 Next Button Khi click, thực hiện tạo cuộc trò chuyện và hiển thị cuộc trò chuyện phía dưới

4 Close Button Đóng tạo cuộc trò chuyện

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

2.30 SCP030 Nhận diện vũ khí

2.31 SCP031 Nhận diện ngôn tử phản cảm

Hình ảnh 4 27 SCP031 2.32 SCP032 Đề xuất kết bạn

Hình ảnh 4 28 SCP0033 2.33 SCP033 Xác thực gmail

Screen flow cho web phía admin

Hình ảnh 4 30 SCP024 Trang chủ admin

2 Ảnh đại diện tài khoản đang đăng nhập

3 Thẻ tài khoản đang đăng nhập

4 Đăng xuất Button Khi click, đăng xuất tài khoản, chuyến đến SCP001

5 Dashboard Khi click, chuyển đến

8 Thống kê lượt truy cập

9 Quản lý bài viết Khi click, chuyển đến

Khi click, chuyển đến SCP026

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

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

1 Id bài viết Text Data từ API

4 Ảnh đại diện tài khoản đăng bài viết

5 Tên tài khoản đăng bài viết

6 Ảnh đại diện nhóm mà bài viết được đăng

7 Tên nhóm mà bài viết được đăng

9 Xem chi tiết bài viết

Button Khi click, hiển thị

10 Xóa bài viết Button Khi click, xóa bài viết

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

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

1 Id tài khoản Text Data từ API

3 Tên tài khoản Text Data từ API

4 Email Text Data từ API

5 Xóa tài khoản Button Data từ API Khi click, xóa tài khoản

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

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

1 Ảnh đại diện tài khoản đăng bài viết

2 Tên tài khoản đăng bài viết

6 Close Khi click vào bất kỳ vùng này, đóng xem chi tiết bài viết

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt ứng dụng

- Máy phải có cài đặt npm

- Máy có cài đặt NodeJS

- Máy có cài đặt mySQL

- Có cài đặt Visual Stdio Code

- Clone from github: https://github.com/halo51102/WebSocialMedia

Mở terminal tại web_media\: npm i

- Mở terminal tại web_media\api\: npm i npm start

- Mở terminal tại web_media\socket\: npm i npm start

- Mở terminal tại web_media\client\: npm i npm start

Kiểm thử phần mềm

Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu

Description Test steps Expected Output Result

Nhập tên tài khoản đã có trong hệ thống

1 Nhập tên username có trong hệ thống

2 Nhập các thông tin còn lại

002 Đăng ký thành công tài khoản

1 Nhập đầy đủ các thông tin, tên username không trùng với username có đã có

2 Nhấn nút Xác nhận Đăng ký thành công và chuyển sang trang Đăng nhập

_001 Nhập tài khoản chưa có trong hệ thống

1 Nhập tên đăng nhập chưa có trong hệ thống

Hiện ra thông báo “User not found!”

1 Nhập tên đăng nhập đã có trong hệ thống, nhập mật khẩu sai

1 Nhập email và password của tài khoản user

2 Nhấn nút Enter Đăng nhập thành công hệ thống chuyển sang trang HomePage

1 Nhập email và password của tài khoản admin

2 Nhấn nút Enter Đăng nhập thành công hệ thống chuyển sang trang quản lý của admin

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

Nhập mật khẩu hiện tại sai

1 Nhập mật khẩu hiện tại sai, nhập mật khẩu mới và xác nhận mật khẩu mới

_002 Xác nhận mật khẩu mới khác với mật khẩu mới

1 Nhập mật khẩu hiện tại đúng, nhập mật khẩu mới, xác nhận mật khẩu mới sai

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

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

1 Nhấn vào thanh tìm kiếm trên Navbar

2 Nhập ký tự có trong tên tài khoản cần tìm kiếm

Hiển thị các tài khoản có tên chứa các ký tự hoặc từ trong thanh tìm kiếm

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

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

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

Cập nhật thông tin cá nhân

1 Nhập đẩy đủ các thông tin cần chỉnh sửa

Hiển thị “Đã cập nhật thông tin cá nhân”

1 Xóa thông tin hiển thị trên form

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

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

Xem trang cá nhân của bản thân

1 Nhấn vào avatar của tài khoản cá nhân trên thanh Navbar

2 Nhấn nút Thông tin cá nhân

Hiển thị trang cá nhân chứa thông tin tài khoản đang đăng nhập

Không chứa nút Follow (hoặc Unfollow)

Xem trang cá nhân của người dùng khác

1 Nhấn vào avatar của tài khoản khác

Hiển thị trang cá nhân chứa thông tin tài khoản của người dùng khác Không chứa nút update

Chứa nút Follow (hoặc Unfollow)

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

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

Thực hiện chức năng với người dùng chưa theo dõi

1 Nhấn nút Follow ở trang cá nhân của người dùng hoặc ở phần “Suggest for you” ở RightBar

Nút Follow ở trang cá nhân đổi thành Unfollow

Hiển thị người dùng vừa follow ở phần Following ở RightBar

Thực hiện chức năng với người dùng đã theo dõi

1 Nhấn nút Unfollow ở trang cá nhân của người dùng

Nút Unfollow ở trang cá nhân đổi thành Follow Ẩn người dùng vừa unfollow ở phần Following ở RightBar

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

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

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

_001 Đăng bài viết không có hình ảnh

1 Nhập nội dung trong form đăng bài viết, không chọn hình ảnh

Hiển thị bài viết mới không có hình ảnh, chỉ có nội dung

_002 Đăng bài viết có hình ảnh đi kèm

1 Nhập nội dung trong form đăng bài viết, nhấn nút Images để chọn hình ảnh từ máy tính

Hiển thị bài viết mới có hình ảnh và nội dung

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

_001 Like bài viết 1 Nhấn nút hình trái tim màu trắng trên bài viết

Trái tim màu trắng chuyển sang màu đỏ

_002 Unlike bài viết 1 Nhấn nút hình trái tim màu đỏ trên bài viết

Trái tim màu đỏ chuyển sang màu trắng

_001 Xem bình luận bài viết

1 Nhấn nút See comment của bài viết

Hiển thị khung bình luận và các bình luận về bài viết

1 Nhấn nút See comment của bài viết

2 Nhập nội dung bình luận

Bình luận được hiển thị Pass

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

1 Nhập nội dung bài viết

Bài viết chia sẻ được hiển thị

_002 Hủy chia sẻ bài viết 1 Nhấn nút X Đóng form chia sẻ bài viết

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

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

1 Nhấn vào nút bấm chấm trên bài viết

2 Nhấn “Báo cáo bài viết”

Hiển thị “Bài viết đã được báo cáo, hãy chờ xử lý của ADMIN”

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

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

1 Nhấn nút 3 chấm trên góc bài viết

2 Nhấn nút xóa bài viết

Hiển thị “Xóa bài viết thành công”

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

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

_001 Xem thông báo 1 Nhấn nút trên thanh Navbar

Hiển thị các thông báo

_002 Đóng thông báo 1 Nhấn nút trên thanh Navbar

Thông báo được đóng lại

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

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

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

1 Nhấn vào bản tin muốn xem

2 Ấn nút -> hoặc

Tiêu đề	Xây Dựng Website Mạng Xã Hội
Tác giả	Đỗ Duy Nhựt, Hồ Hà Thanh Lâm
Người hướng dẫn	TS. Lê Vĩnh Thịnh
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ố	TP. Hồ Chí Minh

Định dạng
Số trang	155
Dung lượng	6,41 MB