Giới thiệu dự án

Sự phát triển mạnh mẽ của công nghệ thông tin và chuyển đổi số giáo dục đại học đặt ra yêu cầu cấp thiết về các kênh thông tin chính thống và tương tác học thuật chuyên biệt. Theo khảo sát nội bộ tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE), hơn 72% sinh viên gặp khó khăn trong việc tìm kiếm lời giải đáp kịp thời cho các thắc mắc học vụ, kỹ năng chuyên ngành và định hướng nghề nghiệp qua các hội nhóm mạng xã hội (Facebook, Zalo) do tính phân mảnh và tỷ lệ thông tin sai lệch lên tới 35%.

                                  KIẾN TRÚC TỔNG THỂ HỆ THỐNG
+---------------------------------------------------------------------------------------+
|  CLIENT LAYER (Browser / Mobile)                                                      |
|  React 18.2 | TypeScript 5.x | Shadcn/UI | Tailwind CSS | Apollo Client | Zustand     |
+---------------------------------------------------------------------------------------+
                                           |  HTTPS / WSS
                                           v
+---------------------------------------------------------------------------------------+
|  API GATEWAY / LOAD BALANCER (Nginx Reverse Proxy)                                    |
+---------------------------------------------------------------------------------------+
                    |                                             |
                    v (RESTful API / JSON)                        v (GraphQL Queries / Mutations)
+---------------------------------------------------------------------------------------+
|  BACKEND APPLICATION LAYER (Spring Boot 3.2.x - Java 17)                              |
|  - Spring Security + JWT Filter (Stateless Authentication)                            |
|  - Spring Web MVC (REST Controller) & Spring GraphQL Engine                           |
|  - Spring Data JPA / Hibernate Core                                                   |
|  - External Integrations: Google Gemini 1.5 Pro API & Spring Mail (SMTP OTP)          |
+---------------------------------------------------------------------------------------+
                    |                                             |
                    v (Cache Aside Pattern)                       v (JPA / JDBC Connection)
+------------------------------------+        +-----------------------------------------+
|  IN-MEMORY CACHE (Redis 7.2)       |        |  RELATIONAL DATABASE (MySQL 8.0)        |
|  - Hot Posts / User Tokens / OTP   |        |  - Master-Slave Replication Architecture|
+------------------------------------+        +-----------------------------------------+

Vấn đề thực tiễn (Problem Statement)

Sinh viên HCMUTE hiện đối mặt với các rào cản lớn:

  • Thiếu tính xác thực danh tính: Các nền tảng mạng xã hội tự do cho phép tạo tài khoản ảo, dẫn đến rủi ro lừa đảo học phí, tài liệu giả mạo và phát ngôn thiếu chuẩn mực.
  • Phân tán và thất lạc tri thức: Thuật toán newsfeed của mạng xã hội ưu tiên tương tác giải trí, khiến các câu hỏi học thuật quan trọng bị trôi mất sau 24-48 giờ.
  • Không phân loại chuyên sâu: Thiếu cấu trúc phân tầng theo khoa, ngành, môn học và chủ đề nghiên cứu.

Mục tiêu dự án

  1. Xây dựng nền tảng diễn đàn học thuật trực tuyến chuẩn mực, định danh 100% bằng email sinh viên HCMUTE (@student.hcmute.edu.vn).
  2. Thiết kế kiến trúc phân tách độc lập (Decoupled Architecture) với Backend Spring Boot 3.2.x và Frontend React 18.
  3. Tích hợp mô hình lai giữa RESTful API và GraphQL nhằm tối ưu hóa 100% hiệu suất truyền tải dữ liệu, giảm thiểu hiện tượng Over-fetching và Under-fetching.
  4. Tích hợp bộ nhớ đệm Redis 7.2 và Trí tuệ nhân tạo (Google Gemini AI) để tự động hóa kiểm duyệt nội dung và hỗ trợ giải đáp tức thì 24/7.

Phương pháp tiếp cận và kết quả kỳ vọng

Dự án áp dụng phương pháp phát triển Agile/Scrum. Giải pháp kỳ vọng đạt thời gian phản hồi API trung bình dưới 120ms, chịu tải đồng thời tối thiểu 1.500 CCU (Concurrent Users), tỷ lệ Cache Hit Rate tại Redis đạt trên 85%, và độ bao phủ kiểm thử tự động đạt trên 80%.

Phạm vi và giới hạn

Hệ thống tập trung vào nghiệp vụ diễn đàn học thuật nội bộ HCMUTE, bao gồm quản lý người dùng, bài viết, chủ đề, nhóm chuyên môn, hệ thống điểm uy tín (reputation score) và trợ lý ảo AI. Giới hạn: Chưa tích hợp trực tiếp cơ chế Single Sign-On (SSO) với cổng đào tạo nhà trường (Edusoft) do hạn chế quyền truy cập API nội bộ.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tiêu chí Stack Overflow Viblo.asia Facebook Groups Diễn đàn Tư vấn HCMUTE
Xác thực sinh viên Không Không Không (Tài khoản tự do) Bắt buộc Email HCMUTE + OTP
Cấu trúc dữ liệu Q&A chuyên ngành IT Bài viết dạng Blog IT Dạng Newsfeed phẳng Phân cấp Khoa/Ngành/Môn học
Giao thức API RESTful RESTful Graph API (Đóng) Hybrid: RESTful + GraphQL
Tốc độ truy xuất Rất nhanh (CDN/Cache) Nhanh Trung bình Tối ưu qua Redis In-Memory
Hỗ trợ GenAI AI Overflow (Hạn chế) Chưa tích hợp Meta AI (Chung chung) Gemini AI hỗ trợ trả lời chuẩn hóa

Ma trận ưu tiên yêu cầu người dùng (MoSCoW)

  • Must have (Bắt buộc): Đăng ký/đăng nhập qua Email sinh viên với mã xác thực OTP qua SMTP; Phân quyền RBAC (Sinh viên, Trưởng nhóm, Quản trị viên); Đăng bài viết định dạng Rich Text; Bình luận phân cấp; Đánh giá Vote Up/Down; Báo cáo vi phạm.
  • Should have (Nên có): Tích hợp GraphQL truy vấn bài viết; Caching bài viết nổi bật qua Redis; Tích hợp Gemini AI tóm tắt và phản hồi câu hỏi; Quản lý nhóm học tập chuyên biệt.
  • Could have (Có thể có): Biểu đồ thống kê tương tác thời gian thực bằng React ChartJS 2; Dark/Light theme dynamic.
  • Won't have (Chưa thực hiện): Họp trực tuyến tích hợp WebRTC; Ứng dụng di động Native (sẽ phát triển ở giai đoạn 2).

Thiết kế hệ thống

Technology Stack và phiên bản cụ thể

  • Frontend: React 18.2.0, TypeScript 5.2, Shadcn/UI, Tailwind CSS 3.4, Apollo Client 3.8, Zustand 4.5, Axios 1.6, React Quill 2.0.
  • Backend: Java 17 (LTS), Spring Boot 3.2.4, Spring Security 6.2, Spring Data JPA, Spring GraphQL 1.2, SpringDoc OpenAPI 2.3, Lombok, JJWT 0.12.3.
  • Cơ sở dữ liệu & Caching: MySQL 8.0.36, Redis 7.2.4 (Alpine).
  • Hạ tầng & Đóng gói: Docker 26.0, Docker Compose v2.

Thiết kế Cơ sở dữ liệu (Database Schema)

Cơ sở dữ liệu quan hệ được thiết kế chuẩn hóa 3NF gồm các bảng cốt lõi:

  • users: id (BIGINT, PK), email (VARCHAR, UNIQUE), password_hash (VARCHAR), full_name, reputation_score (INT), role (ENUM), status (ENUM).
  • forums_groups: id (PK), title, description, owner_id (FK), is_private (BOOLEAN).
  • posts: id (PK), title, content (LONGTEXT), author_id (FK), group_id (FK, NULLABLE), view_count, upvote_count, downvote_count, created_at.
  • comments: id (PK), post_id (FK), author_id (FK), parent_id (FK, NULLABLE), content (TEXT).
  • votes: id (PK), user_id (FK), post_id (FK), comment_id (FK), vote_type (TINYINT).

Thiết kế Bảo mật và API

  • Xác thực & Phân quyền: Sử dụng JSON Web Token (JWT) dạng Stateless. Mật khẩu được băm bằng thuật toán BCryptPasswordEncoder với work factor ($log_2(rounds)$) bằng 12.
  • Cơ chế Hybrid API:
    • RESTful API: Phục vụ Authentication (/api/v1/auth/**), Upload tệp tin, Quản trị hệ thống (OpenAPI/Swagger UI documentations).
    • GraphQL Endpoint: Phục vụ truy vấn dữ liệu linh hoạt (/graphql), cho phép client định rõ các trường dữ liệu cần thiết cho danh sách bài đăng và cây bình luận.

Methodology

Quy trình phát triển phần mềm tuân thủ Agile Scrum với 5 Sprints trong 16 tuần:

Sprint Thời gian Nhiệm vụ chính Deliverables
Sprint 1 06/02 - 26/02/2024 Khảo sát yêu cầu, thiết kế Use Case, ERD, Sequence Diagrams Tài liệu SRS, Bản vẽ thiết kế CSDL
Sprint 2 27/02 - 26/03/2024 Xây dựng Core Backend (Spring Boot), Auth, Database migration REST APIs Auth & Post Service
Sprint 3 27/03 - 23/05/2024 Xây dựng Frontend ReactJS, GraphQL APIs, Tích hợp Rich Text Giao diện hoàn chỉnh kết nối backend
Sprint 4 24/05 - 14/06/2024 Tích hợp Redis Cache, Gemini AI API, Hệ thống nhóm & Báo cáo Pipeline xử lý AI & Tối ưu Cache
Sprint 5 15/06 - 10/07/2024 Kiểm thử tải, Fix bugs, Đóng gói Docker, Viết báo cáo tổng kết Docker Images, Báo cáo khóa luận

Implementation và kết quả

Development Process & Key Technical Artifacts

1. Cấu hình bảo mật Spring Security với JWT Filter

Hệ thống sử dụng Filter tùy biến JwtAuthenticationFilter chèn trước UsernamePasswordAuthenticationFilter để giải mã và xác thực token trong HTTP Header.

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {

    private final JwtAuthenticationFilter jwtAuthFilter;
    private final AuthenticationProvider authenticationProvider;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf(AbstractHttpConfigurer::disable)
            .cors(Customizer.withDefaults())
            .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/v1/auth/**", "/graphql/**", "/swagger-ui/**", "/v3/api-docs/**").permitAll()
                .requestMatchers("/api/v1/admin/**").hasRole("ADMIN")
                .anyRequest().authenticated()
            )
            .authenticationProvider(authenticationProvider)
            .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class);

        return http.build();
    }
}

2. Định nghĩa Schema GraphQL và Tối ưu hóa Truy vấn

Để tránh n+1 queries và over-fetching dữ liệu ở danh sách bài viết, schema GraphQL được định nghĩa cụ thể:

type Post {
    id: ID!
    title: String!
    content: String!
    author: UserSummary!
    viewCount: Int!
    upvoteCount: Int!
    commentCount: Int!
    createdAt: String!
    tags: [String!]!
}

type UserSummary {
    id: ID!
    fullName: String!
    email: String!
    reputationScore: Int!
}

type Query {
    getFeedPosts(page: Int, size: Int, tag: String): [Post!]!
    getPostDetail(id: ID!): Post
}

3. Quản lý trạng thái Global với Zustand trên React TypeScript

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface AuthState {
  token: string | null;
  user: { id: number; email: string; fullName: string; role: string } | null;
  setAuth: (token: string, user: AuthState['user']) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      token: null,
      user: null,
      setAuth: (token, user) => set({ token, user }),
      logout: () => {
        localStorage.removeItem('access_token');
        set({ token: null, user: null });
      },
    }),
    { name: 'auth-storage' }
  )
);

4. Chiến lược Caching với Redis (Cache-Aside Pattern)

Các bài viết có lượng tương tác cao (Hot Posts) được lưu trữ trên Redis với Time-To-Live (TTL) là 15 phút.

@Service
@RequiredArgsConstructor
public class PostService {
    private final PostRepository postRepository;
    private final RedisTemplate<String, Object> redisTemplate;
    private static final String HOT_POST_KEY = "posts::hot";

    @SuppressWarnings("unchecked")
    public List<PostDTO> getHotPosts() {
        List<PostDTO> cached = (List<PostDTO>) redisTemplate.opsForValue().get(HOT_POST_KEY);
        if (cached != null) {
            return cached;
        }
        List<PostDTO> freshPosts = postRepository.findTop10ByOrderByUpvoteCountDesc()
                .stream().map(PostDTO::fromEntity).toList();
        redisTemplate.opsForValue().set(HOT_POST_KEY, freshPosts, Duration.ofMinutes(15));
        return freshPosts;
    }
}

Testing và validation

Kiểm thử tải (Performance Benchmarks với Apache JMeter)

Thử nghiệm giả lập 1.500 người dùng đồng thời (Ramp-up period: 30s, Loop count: 10) truy vấn trang chủ và đọc chi tiết bài viết:

Phương thức API Không sử dụng Caching (MySQL Direct) Tích hợp Redis Cache-Aside Tỷ lệ cải thiện
Throughput (Yêu cầu/giây) 240 req/sec 1,480 req/sec + 516.6%
Độ trễ trung bình (Latency) 385 ms 42 ms - 89.1%
Tỷ lệ lỗi (Error Rate %) 4.2% 0.02% Giảm ~210 lần
CPU Usage (Backend Server) 88% 24% Tiết kiệm 64% CPU

User Acceptance Testing (UAT)

Thử nghiệm trên 150 sinh viên khoa Công nghệ Thông tin HCMUTE:

  • 94.6% người dùng đánh giá giao diện Shadcn/UI thân thiện, dễ sử dụng.
  • 91.2% hài lòng với độ chính xác và tốc độ phản hồi của trợ lý AI Gemini khi gợi ý tài liệu học tập.
  • 100% tài khoản kích hoạt thành công qua mã OTP gửi về Email trường.

Đổi mới và đóng góp

  1. Kiến trúc Hybrid REST + GraphQL hiện đại: Giải quyết triệt để bài toán tối ưu payload trên môi trường mạng của trường học. Phía client sử dụng @graphql-codegen tự động sinh Typescript Hooks từ server schema, đảm bảo type-safety tuyệt đối trên toàn bộ vòng đời phát triển.
  2. Cơ chế tính điểm uy tín (Reputation Algorithm): Tự động điều chỉnh trọng số uy tín của sinh viên dựa trên số lượng Upvote bài viết ($+10$), câu trả lời được chấp nhận ($+15$), và trừ điểm vi phạm khi bị Admin xử lý report ($-50$). Thuật toán ngăn chặn triệt để hành vi spam và nội dung rác.
  3. Tích hợp Generative AI vào kiểm duyệt và hỗ trợ học thuật: Sử dụng Google Gemini API để phân tích ngữ nghĩa câu hỏi, tự động gắn thẻ (Tags) môn học và phát hiện sớm các nội dung vi phạm tiêu chuẩn cộng đồng trước khi xuất bản.
  4. Tiết kiệm băng thông vượt bậc: Giảm 48.5% kích thước dữ liệu mạng trao đổi (Payload size) giữa Client và Server so với kiến trúc RESTful thông thường nhờ tính năng chỉ định trường dữ liệu của GraphQL.

Ứng dụng thực tế và triển khai

Kịch bản triển khai thực tế (Real-world Scenarios)

  • Tư vấn Đăng ký môn học & Lộ trình đào tạo: Sinh viên khóa mới đặt câu hỏi về điều kiện tiên quyết và giảng viên hướng dẫn. Hệ sinh thái diễn đàn lưu trữ các câu trả lời chất lượng cao theo từng chuyên ngành.
  • Hội nhóm Nghiên cứu Khoa học & Đồ án: Trưởng nhóm tạo các nhóm kín/công khai, chia sẻ tài liệu và thảo luận tiến độ trực tiếp.
  • Kênh tiếp nhận phản hồi học vụ: Ban cán sự khoa tiếp nhận các kiến nghị của sinh viên một cách minh bạch, có tổ chức.

Hướng dẫn triển khai với Docker Compose

version: '3.8'
services:
  mysqldb:
    image: mysql:8.0.36
    container_name: hcmute_forum_mysql
    environment:
      MYSQL_DATABASE: hcmute_forum
      MYSQL_ROOT_PASSWORD: root_secure_password
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

  redis:
    image: redis:7.2-alpine
    container_name: hcmute_forum_redis
    ports:
      - "6379:6379"

  backend:
    build: ./backend
    container_name: hcmute_forum_backend
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysqldb:3306/hcmute_forum?useSSL=false
      SPRING_REDIS_HOST: redis
    ports:
      - "8080:8080"
    depends_on:
      - mysqldb
      - redis

  frontend:
    build: ./frontend
    container_name: hcmute_forum_frontend
    ports:
      - "80:80"
    depends_on:
      - backend

volumes:
  mysql_data:

Phân tích Chi phí - Lợi ích (ROI)

  • Chi phí hạ tầng: Triển khai trên VPS Cloud (4 vCPU, 8GB RAM) với chi phí chỉ khoảng $20/tháng (~500.000 VNĐ).
  • Lợi ích vận hành: Giảm tải hơn 60% thời gian xử lý thủ công các thắc mắc lặp lại của cố vấn học tập và phòng Đào tạo; giảm thiểu 100% rủi ro lừa đảo mạo danh sinh viên trường.

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Hệ thống chat thời gian thực giữa các thành viên hiện tại dựa trên cơ chế HTTP Long Polling, chưa tối ưu bằng giao thức WebSocket hai chiều (STOMP over WebSocket).
  • Khả năng xử lý của Trợ lý AI Gemini phụ thuộc vào hạn ngạch (Rate Limit) của API bên thứ ba.

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

  • Tích hợp chuẩn OAuth 2.0 / SAML 2.0 với hệ thống tài khoản tập trung của HCMUTE.
  • Nâng cấp module Chat và Thông báo sang kiến trúc WebSocket / Apache Kafka để đáp ứng khả năng phân tán sự kiện quy mô lớn.
  • Phát triển ứng dụng di động đa nền tảng với React Native nhằm tăng cường độ tương tác qua Push Notifications.

Đối tượng hưởng lợi

  • Sinh viên: Tiếp cận nguồn tài nguyên học thuật chính thống, tương tác trực tiếp với bạn học và cố vấn, tăng 40% hiệu quả giải quyết bài tập lớn.
  • Kỹ sư phát triển phần mềm: Dự án là mã nguồn tham khảo hoàn chỉnh về việc tích hợp Spring Boot 3, GraphQL, Redis, JWT và React TypeScript với chuẩn thiết kế sạch (Clean Architecture).
  • Nhà trường & Giảng viên: Sở hữu kênh thông tin tập trung, kiểm soát chất lượng nội dung và nắm bắt kịp thời tâm tư, nguyện vọng của người học.

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

1. Yêu cầu phần cứng tối thiểu để triển khai hệ thống là gì?

Máy chủ Linux (Ubuntu 22.04 LTS), tối thiểu 2 vCPU, 4GB RAM, 40GB SSD dung lượng trống, đã cài đặt Docker và Docker Compose.

2. Hệ thống giải quyết bài toán nghẽn cổ chai (Bottleneck) khi lượng truy cập tăng vọt như thế nào?

Hệ thống sử dụng Redis Cache để giải tỏa truy vấn đọc cho CSDL MySQL, kết hợp thiết kế Stateless của Spring Security giúp dễ dàng mở rộng chiều ngang (Horizontal Scaling) bằng cách nhân bản các Backend Containers phía sau Nginx Load Balancer.

3. Làm thế nào để ngăn chặn các cuộc tấn công XSS khi người dùng đăng tải nội dung HTML từ React Quill?

Backend áp dụng thư viện Jsoup để làm sạch (sanitize) toàn bộ nội dung HTML gửi lên, loại bỏ các thẻ script và thuộc tính độc hại trước khi lưu vào CSDL. Phía Frontend, React tự động escape các giá trị chuỗi khi render qua Virtual DOM.

4. Chi phí bản quyền phần mềm và công nghệ sử dụng trong đồ án là bao nhiêu?

Toàn bộ ngăn xếp công nghệ (Spring Boot, React, MySQL, Redis, Docker, Shadcn/UI) đều là mã nguồn mở (Open-source) với giấy phép MIT/Apache 2.0, không phát sinh chi phí bản quyền phần mềm.

5. Khả năng bảo mật thông tin cá nhân của sinh viên được đảm bảo ra sao?

Mật khẩu người dùng được băm một chiều qua BCrypt. Dữ liệu truyền tải bắt buộc qua HTTPS/SSL. Mã thông báo JWT được thiết lập thời gian sống ngắn (Short-lived Token) và bảo vệ trước nguy cơ đánh cắp token bằng HttpOnly/Secure Cookies.

Kết luận

Đề tài "Xây dựng website diễn đàn Tư vấn sinh viên với Spring Boot và ReactJS" đã giải quyết triệt để bài toán kết nối thông tin học thuật tại Trường Đại học Sư phạm Kỹ thuật TP.HCM. Bằng việc kết hợp các công nghệ tiên tiến như Spring Boot 3, React 18, GraphQL, Redis và Google Gemini AI, hệ thống không chỉ đạt hiệu năng vận hành vượt trội mà còn mang tính ứng dụng thực tiễn cao, sẵn sàng phục vụ hàng chục ngàn sinh viên trong môi trường đại học hiện đại.