Bối cảnh và vấn đề nghiên cứu

Đồ án được thực hiện trong bối cảnh mạng xã hội ngày càng trở thành hạ tầng giao tiếp thiết yếu của người dùng internet. Nhóm tác giả xác định ba động lực chính: (1) nhu cầu kết nối cộng đồng ngày càng tăng trong môi trường trực tuyến; (2) tiềm năng kinh doanh và quảng cáo mà nền tảng mạng xã hội mang lại cho doanh nghiệp; (3) sự cần thiết xây dựng môi trường trực tuyến an toàn, hạn chế thông tin sai lệch.

Đồ án đặt ra các mục tiêu và nhiệm vụ nghiên cứu cụ thể như sau:

  1. Nghiên cứu và nắm vững công nghệ Spring Boot ở phía server (back-end), bao gồm RESTful API, Spring Security, Spring Data JPA.
  2. Nghiên cứu framework Vue.js để xây dựng giao diện người dùng (front-end).
  3. Nghiên cứu WebSocket nhằm xây dựng chức năng nhắn tin và thông báo thời gian thực.
  4. Nghiên cứu WebRTC để tích hợp chức năng gọi video.
  5. Xây dựng website mạng xã hội với đầy đủ chức năng: đăng ký, đăng nhập, quản lý thông tin cá nhân, kết bạn, đăng bài viết, nhắn tin, tạo nhóm, và gọi video.
  6. Triển khai hệ thống lên môi trường cloud.

Đối tượng nghiên cứu: Công nghệ Spring Boot, Vue.js, WebSocket, WebRTC và quy trình xây dựng ứng dụng web mạng xã hội hoàn chỉnh.

Phạm vi: Đồ án giới hạn ở việc thiết kế và triển khai một website mạng xã hội dạng prototype với các chức năng cốt lõi; không hướng đến quy mô thương mại. Thời gian thực hiện từ 04/03/2024 đến 10/07/2024 (khoảng 18 tuần).

Cơ sở lý thuyết và phương pháp

Khung công nghệ và lý thuyết

Đồ án sử dụng một stack công nghệ hoàn chỉnh cho ứng dụng web hiện đại, bao gồm:

Thành phần Công nghệ Vai trò
Back-end framework Spring Boot (mở rộng của Spring Framework) Xây dựng API server
Bảo mật Spring Security Xác thực (authentication), ủy quyền (authorization), quản lý phiên
Truy cập dữ liệu Spring Data JPA Tương tác với cơ sở dữ liệu quan hệ qua JPA
Front-end framework Vue.js Xây dựng giao diện người dùng theo mô hình MVVM
Cơ sở dữ liệu MySQL Lưu trữ dữ liệu theo mô hình quan hệ
Giao tiếp thời gian thực WebSocket Nhắn tin tức thì, thông báo push
Gọi video WebRTC Truyền thông âm thanh và video trực tiếp giữa trình duyệt

Về kiến trúc lý thuyết: Spring Framework áp dụng mô hình Inversion of Control (IoC) và Dependency Injection (DI); Vue.js hoạt động theo mô hình MVVM (Model–View–ViewModel), hỗ trợ two-way data binding và component-based development; WebSocket duy trì kênh giao tiếp toàn song công (full-duplex) qua một kết nối TCP duy nhất; WebRTC thực hiện truyền dữ liệu peer-to-peer với mã hóa end-to-end.

Phương pháp nghiên cứu

Nhóm sử dụng ba phương pháp kết hợp:

  • Phương pháp phân tích yêu cầu: Khảo sát, phân tích ưu nhược điểm của các mạng xã hội hiện có gồm Zalo và Facebook để xác định yêu cầu chức năng.
  • Phương pháp nghiên cứu tài liệu: Tham khảo tài liệu kỹ thuật (documentation) của từng công nghệ, các bài viết chuyên ngành, khóa học trực tuyến và video hướng dẫn.
  • Phương pháp chuyên gia: Tham vấn giảng viên hướng dẫn ThS. Nguyễn Trần Thi Văn và các giảng viên trong Khoa Công nghệ thông tin.

Nguồn dữ liệu

Dữ liệu sử dụng trong quá trình thiết kế và kiểm thử là dữ liệu do nhóm tự tạo ra trong quá trình thử nghiệm hệ thống. Không có dữ liệu thực tế từ người dùng bên ngoài.

Nội dung chính theo từng chương

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

Chương này trình bày nền tảng lý thuyết cho toàn bộ đồ án. Nhóm giới thiệu hệ sinh thái Spring Framework với các thành phần cốt lõi gồm IoC, DI, Spring MVC, Spring Boot, Spring Data và Spring Security. Với Spring Boot, chương làm rõ các tính năng như Embedded Server (hỗ trợ Tomcat, Jetty, Undertow), Auto-Configuration, Spring Boot Starter và Spring Boot Actuator — những tính năng giúp giảm thời gian cấu hình và tăng tốc độ phát triển.

Phần Vue.js trình bày mô hình MVVM, cơ chế two-way data binding, hệ thống component, Vue Router và Vuex. Phần MySQL nhấn mạnh tính tuân thủ nguyên tắc ACID, hiệu suất truy vấn và khả năng tích hợp với nhiều ngôn ngữ lập trình.

Phần WebSocket giải thích cơ chế duy trì kết nối mở để giảm độ trễ so với HTTP polling, phù hợp cho ứng dụng chat và thông báo thời gian thực. Phần WebRTC trình bày khả năng truyền âm thanh và video peer-to-peer, mã hóa end-to-end, và hỗ trợ đa nền tảng (Chrome, Firefox, Safari, Edge).

Chương 2: Xác định và mô hình hóa yêu cầu

Chương này mở đầu bằng khảo sát hiện trạng hai nền tảng tham chiếu là Zalo và Facebook, phân tích ưu nhược điểm của từng nền tảng về giao diện, tính năng và bảo mật. Từ đó, nhóm xác định yêu cầu hệ thống theo ba nhóm chính:

Yêu cầu chức năng nghiệp vụ được tổ chức thành sáu module:

Module Số lượng công việc
Quản lý thông tin tài khoản 3 (xem, cập nhật mật khẩu, chỉnh sửa thông tin)
Quản lý bạn bè 4 (xem, xóa, thêm, chặn)
Quản lý bài viết 7 (xem, đăng, chỉnh sửa, bình luận, bày tỏ cảm xúc, báo cáo, chia sẻ)
Quản lý tin nhắn 4 (xem, xóa, bày tỏ cảm xúc, gửi)
Quản lý nhóm 9 (xem danh sách, xem thành viên, thêm, xóa thành viên, chỉnh sửa, cấp quyền, giải tán, báo cáo, tạo nhóm)
Quản lý hệ thống (Admin) 7 (thống kê người dùng, bài viết, người trực tuyến, nhóm; khóa tài khoản; xóa nhóm; xóa bài viết)

Hệ thống phân quyền cho ba tác nhân: Khách vãng lai (đăng ký, đăng nhập, quên mật khẩu), Người dùng (đầy đủ chức năng xã hội), và Admin (quản lý hệ thống). Chương trình bày lược đồ Use Case tổng thể và đặc tả chi tiết 18 Use Case (UC_002 đến UC_018), kèm các Sequence Diagram cho các luồng nghiệp vụ chính như đăng nhập, gửi/thu hồi/chấp nhận/từ chối lời mời kết bạn, đăng bài, chỉnh sửa bài, bình luận bài viết.

Chương 3: Thiết kế hệ thống

Chương thiết kế trình bày ba phần lớn:

Thiết kế xử lý: Cung cấp các Sequence Diagram cho các luồng chính gồm đăng nhập (SD002), gửi lời mời kết bạn (SD003), thu hồi lời mời kết bạn (SD004), chấp nhận lời mời kết bạn (SD005), từ chối lời mời kết bạn (SD006), đăng bài viết (SD008), chỉnh sửa bài viết (SD009), và bình luận bài viết (SD010).

Thiết kế cơ sở dữ liệu: Xây dựng ERD với các bảng chính bao gồm Post_user, Comment_user, Message_chat, Group_chat, Group_chat_user. Cơ sở dữ liệu được mô tả chi tiết trong phần mô tả từng bảng.

Thiết kế giao diện: Đặc tả hơn 40 màn hình giao diện, bao gồm: đăng ký và nhập OTP, đăng nhập, quên/đổi mật khẩu, quản lý thông tin tài khoản, danh sách bạn bè và lời mời kết bạn, tìm kiếm và thêm bạn, trang bài đăng với hộp thoại tạo/chỉnh sửa/chi tiết bài viết, gắn thẻ bạn bè, danh sách nhóm chat, giao diện nhắn tin cá nhân và nhóm, tùy chọn tin nhắn, giao diện cuộc gọi video, quản lý người dùng bị chặn, và bốn trang quản trị dành cho Admin (thống kê hệ thống, quản lý người dùng, quản lý bài viết, quản lý nhóm).

Chương 4: Cài đặt và thử nghiệm

Chương trình bày danh sách công cụ, công nghệ và công cụ triển khai được sử dụng trong dự án, kèm kết quả thử nghiệm hệ thống. Phần thử nghiệm được tổ chức thành bảng ghi nhận kết quả kiểm thử các chức năng đã xây dựng.

Thiết kế và triển khai

Kiến trúc hệ thống

Hệ thống được phân tầng rõ ràng theo mô hình client–server:

  • Front-end: Vue.js với Vue Router (quản lý định tuyến) và Vuex (quản lý trạng thái toàn cục), triển khai lên Vercel.
  • Back-end: Spring Boot xây dựng RESTful API server, sử dụng Spring Security cho xác thực và phân quyền, Spring Data JPA cho tương tác cơ sở dữ liệu, triển khai lên Railway.
  • Cơ sở dữ liệu: MySQL, triển khai lên Azure SQL.
  • Giao tiếp thời gian thực: WebSocket kết nối front-end và back-end để xử lý nhắn tin và thông báo tức thì.
  • Gọi video: WebRTC thực hiện truyền thông peer-to-peer trực tiếp giữa trình duyệt.

Công nghệ sử dụng

Lớp Công nghệ
Back-end Spring Boot, Spring Security, Spring Data JPA, Spring Framework
Front-end Vue.js, Vue Router, Vuex
Cơ sở dữ liệu MySQL
Giao tiếp thời gian thực WebSocket
Gọi video WebRTC
Triển khai front-end Vercel
Triển khai back-end Railway
Triển khai database Azure SQL

Kiểm thử

Hệ thống được kiểm thử theo từng chức năng, kết quả ghi nhận trong bảng thử nghiệm hệ thống (Bảng thử nghiệm hệ thống trong Chương 4). Kế hoạch kiểm thử được thực hiện trong giai đoạn từ 03/06/2024 đến 02/07/2024, song song với việc triển khai hệ thống (03/07/2024–10/07/2024).

Kết quả và đóng góp

Kết quả lý thuyết

Nhóm tác giả nắm vững và có thể trình bày hệ sinh thái Spring (Spring Framework, Spring Boot, Spring Security, Spring Data JPA), framework Vue.js với mô hình MVVM, giao thức WebSocket và công nghệ WebRTC — bao gồm nguyên lý hoạt động, đặc điểm kỹ thuật và ứng dụng thực tế của từng thành phần.

Kết quả sản phẩm

Website mạng xã hội hoàn chỉnh với các chức năng sau đã được xây dựng và triển khai:

  • Quản lý tài khoản: Đăng ký (có xác thực OTP), đăng nhập, đăng xuất, quên mật khẩu, đổi mật khẩu, xem và chỉnh sửa thông tin cá nhân.
  • Kết nối xã hội: Tìm kiếm người dùng theo số điện thoại, gửi/thu hồi/chấp nhận/từ chối lời mời kết bạn, hủy kết bạn, chặn/hủy chặn người dùng.
  • Bài viết: Đăng bài (tích hợp hình ảnh, video), chỉnh sửa, xóa, xem chi tiết, thích, bình luận, chia sẻ, gắn thẻ bạn bè.
  • Nhắn tin: Nhắn tin cá nhân và nhóm theo thời gian thực (qua WebSocket), chỉnh sửa và xóa tin nhắn, bày tỏ cảm xúc với tin nhắn.
  • Nhóm: Tạo nhóm, thêm/xóa thành viên, cấp quyền, rời nhóm, giải tán nhóm.
  • Gọi video: Gọi video giữa hai người dùng qua WebRTC.
  • Quản trị hệ thống (Admin): Thống kê tổng số người dùng, bài viết, nhóm, người dùng trực tuyến; khóa tài khoản; xóa bài viết vi phạm; xóa nhóm.

Đóng góp

Nhóm tác giả tự nêu đóng góp ở hai khía cạnh: về mặt lý thuyết, đồ án tổng hợp và trình bày một cách có hệ thống các công nghệ hiện đại trong phát triển web full-stack; về mặt sản phẩm, đồ án xây dựng được một nền tảng mạng xã hội chức năng đầy đủ sử dụng Vue.js và Spring Boot, có thể phục vụ như một mô hình tham chiếu cho các dự án tương tự.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế

Nhóm tự nhận các hạn chế sau trong đồ án:

  • Lượng kiến thức còn hạn chế do đây là lần đầu tiếp cận các công nghệ WebSocket và WebRTC trong một dự án thực tế.
  • Thời gian thực hiện ngắn (khoảng 18 tuần) dẫn đến một số khía cạnh kỹ thuật chưa được tối ưu hóa hoàn toàn.
  • Còn hạn chế về mặt kỹ thuật trong quá trình xây dựng hệ thống.

Ngoài ra, xét theo phạm vi đồ án, hệ thống chưa bao gồm một số tính năng phổ biến trên mạng xã hội thực tế như thuật toán gợi ý nội dung, hỗ trợ đa ngôn ngữ, hay cơ chế kiểm duyệt nội dung tự động.

Hướng phát triển

Nhóm đề xuất các hướng tiếp tục phát triển bao gồm mở rộng chức năng hiện có, cải thiện hiệu năng hệ thống để đáp ứng lượng người dùng đồng thời lớn hơn, và tiếp tục hoàn thiện các tính năng còn thiếu sót dựa trên phản hồi từ giảng viên và người dùng thử nghiệm.

Giá trị tham khảo

Đồ án phù hợp để tham khảo cho các đối tượng sau:

  • Sinh viên ngành Công nghệ Phần mềm, Công nghệ Thông tin đang tìm hiểu quy trình xây dựng ứng dụng web full-stack với Spring Boot và Vue.js, đặc biệt là phần tích hợp WebSocket cho chức năng nhắn tin thời gian thực.
  • Sinh viên làm đồ án tốt nghiệp về xây dựng mạng xã hội, ứng dụng chat, hay hệ thống có tính năng gọi video — có thể tham khảo cách đặc tả Use Case, thiết kế ERD, và thiết kế giao diện chi tiết (hơn 40 màn hình được đặc tả).
  • Người mới bắt đầu học Spring Boot hoặc Vue.js có thể tham khảo Chương 1 để có cái nhìn tổng quan có hệ thống về cả hai hệ sinh thái công nghệ này.
  • Nhà phát triển muốn tham khảo cách triển khai ứng dụng full-stack lên môi trường cloud với ba dịch vụ phân tách: Vercel (front-end), Railway (back-end), Azure SQL (database).

Phần đáng tham khảo nhất là Chương 2 (đặc tả Use Case và phân tích yêu cầu cho mạng xã hội), Chương 3 (thiết kế giao diện và cơ sở dữ liệu), và phần trình bày về WebSocket và WebRTC trong Chương 1.

Câu hỏi thường gặp

1. Hệ thống sử dụng WebSocket như thế nào để hỗ trợ nhắn tin thời gian thực? WebSocket được cấu hình ở phía server (Spring Boot) và kết nối với front-end (Vue.js) để duy trì một kênh giao tiếp toàn song công qua TCP. Khi người dùng gửi tin nhắn, nội dung được truyền qua kênh WebSocket đến server và phân phối đến người nhận ngay lập tức mà không cần client liên tục gửi yêu cầu HTTP. Giai đoạn cấu hình WebSocket và xây dựng chức năng nhắn tin được thực hiện từ 22/04/2024 đến 02/06/2024 theo kế hoạch.

2. Chức năng gọi video được triển khai bằng cơ chế gì và hỗ trợ bao nhiêu người? Chức năng gọi video sử dụng WebRTC — công nghệ truyền thông peer-to-peer cho phép truyền tải âm thanh và video trực tiếp giữa hai trình duyệt, có mã hóa end-to-end, mà không cần máy chủ trung gian cho luồng media. Theo đặc tả giao diện trong đồ án, hệ thống hỗ trợ cuộc gọi video giữa hai người dùng (giao diện hộp thoại chấp nhận cuộc gọi video và giao diện cuộc gọi video được thiết kế cho hai người).

3. Ba nhóm tác nhân trong hệ thống có quyền hạn khác nhau như thế nào? Hệ thống phân quyền ba cấp: Khách vãng lai chỉ có thể đăng ký, đăng nhập và sử dụng chức năng quên mật khẩu. Người dùng đã đăng nhập có toàn quyền sử dụng chức năng xã hội (kết bạn, bài viết, nhắn tin, nhóm, gọi video). Admin có quyền quản lý hệ thống gồm xem thống kê (tổng người dùng, bài viết, người trực tuyến, nhóm), khóa tài khoản người dùng, xóa bài viết vi phạm và xóa nhóm — nhưng không có các quyền xã hội của người dùng thông thường.

4. Tại sao nhóm chọn triển khai cơ sở dữ liệu lên Azure SQL thay vì dùng cùng nền tảng với back-end? Theo phần nội dung nghiên cứu trong đề cương, nhóm tìm hiểu và sử dụng ba dịch vụ cloud độc lập: Vercel cho front-end, Railway cho back-end, và Azure SQL cho cơ sở dữ liệu. Cách tiếp cận này phân tách rõ ràng các tầng triển khai, cho phép mỗi thành phần được quản lý và mở rộng độc lập. Đây là lựa chọn thực hành được ghi nhận trong phần nội dung nghiên cứu của đồ án.

5. Cơ sở dữ liệu được thiết kế như thế nào để hỗ trợ đồng thời nhắn tin cá nhân và nhắn tin nhóm? ERD của hệ thống bao gồm các bảng chuyên biệt: Message_chat lưu trữ nội dung tin nhắn cùng thông tin người gửi và người nhận, Group_chat lưu thông tin nhóm, và Group_chat_user lưu quan hệ nhiều-nhiều giữa người dùng và nhóm (kèm phân quyền thành viên). Cấu trúc này cho phép hệ thống xử lý cả hai loại nhắn tin với cùng một cơ chế lưu trữ nhưng phân biệt qua các bảng liên kết riêng.

Kết luận

Đồ án tốt nghiệp này ghi nhận quá trình hai sinh viên Từ Thanh Thoại và Võ Giang Nam (Khóa 2020–2024, Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh) nghiên cứu và ứng dụng stack công nghệ hiện đại gồm Vue.js và Spring Boot để xây dựng một website mạng xã hội hoàn chỉnh. Sản phẩm đạt được bao gồm đầy đủ các chức năng cốt lõi của một mạng xã hội — từ quản lý tài khoản, kết bạn, đăng bài viết, nhắn tin thời gian thực qua WebSocket, đến gọi video qua WebRTC — và được triển khai lên môi trường cloud với ba dịch vụ phân tách (Vercel, Railway, Azure SQL). Đồ án có giá trị tham khảo thực tế cho sinh viên ngành Công nghệ Phần mềm muốn tiếp cận quy trình phát triển ứng dụng web full-stack, đặc biệt ở phần đặc tả yêu cầu và thiết kế giao diện chi tiết.