Giới thiệu dự án

Sự bùng nổ của Công nghệ Thông tin (CNTT) trong kỷ nguyên số đã biến mạng xã hội thành hạ tầng giao tiếp thiết yếu của xã hội hiện đại. Theo nghiên cứu khảo sát của Trịnh Hòa Bình và cộng sự, 61,8% người dùng tham gia ít nhất một mạng xã hội, 23,1% tham gia 2 nền tảng và 15,1% sử dụng từ 3 nền tảng trở lên. Mặc dù các nền tảng quy mô toàn cầu như Facebook, Instagram hay Zalo chiếm thị phần áp đảo, chúng vẫn bộc lộ nhiều hạn chế cốt lõi: cấu trúc nguyên khối (monolithic) cồng kềnh, nguy cơ rò rỉ dữ liệu cá nhân, thuật toán phân phối nội dung bị chi phối bởi quảng cáo rác và tính năng chưa tối ưu hóa cho các cộng đồng chuyên biệt hoặc tổ chức giáo dục/nội bộ.

Đề tài "Xây dựng Website Mạng xã hội sử dụng ReactJs và Spring Boot" (Hệ thống Mạng xã hội Meraki) được nghiên cứu và phát triển bởi sinh viên Lê Vũ Minh Hoàng và Dương Hoàng Thy Trân (Khoa CNTT, Trường Đại học Sư phạm Kỹ thuật TP.HCM), dưới sự hướng dẫn của TS. Lê Văn Vinh. Dự án giải quyết bài toán xây dựng nền tảng mạng xã hội hiện đại, độc lập, tối ưu hiệu năng và bảo mật cao thông qua kiến trúc tách rời (Decoupled Architecture) giữa Front-end và Back-end.

Mục tiêu cụ thể của đề tài bao gồm:

  1. Thiết kế kiến trúc hệ thống phân tán: Triển khai Single Page Application (SPA) với ReactJS và hệ thống RESTful API chuẩn mực với Spring Boot.
  2. Xây dựng cơ chế xác thực và bảo mật phi trạng thái: Ứng dụng JSON Web Token (JWT) theo tiêu chuẩn RFC 7519 kết hợp mã hóa BCrypt nhằm kiểm soát luồng truy cập và phân quyền người dùng.
  3. Mô hình hóa dữ liệu linh hoạt: Sử dụng cơ sở dữ liệu phi quan hệ (NoSQL) MongoDB để quản lý các cấu trúc dữ liệu mạng xã hội động (Dynamic JSON/BSON documents).
  4. Hiện thực hóa bộ tính năng cốt lõi hoàn chỉnh: Đáp ứng đầy đủ các nghiệp vụ người dùng (đăng ký, đăng nhập, trang cá nhân, đăng bài viết, tương tác thích/bình luận, kết bạn, nhắn tin, quản lý fanpage) và trung tâm quản trị hệ thống (Admin Portal).
+-------------------------------------------------------------------------------+
|                             KIẾN TRÚC TỔNG THỂ MERAKI                         |
+-------------------------------------------------------------------------------+
|  [ Client Tier ]      ReactJS 18.2 + Redux Toolkit + Responsive UI (Axios)   |
|                                       │                                       |
|                                 HTTP / JSON                                   |
|                          (JWT Bearer Authorization)                           |
|                                       ▼                                       |
|  [ Application Tier ] Spring Boot 3.1.2 + Spring Security + RESTful API      |
|                       ├── Authentication & JWT Filter Engine                  |
|                       ├── Service Layer (User, Post, Comment, Page, Message)  |
|                       └── Data Access Layer (Spring Data MongoDB Repositories)|
|                                       │                                       |
|                                     BSON                                      |
|                                       ▼                                       |
|  [ Database Tier ]    MongoDB 6.0 (Sharding & Replica Set Engine)             |
+-------------------------------------------------------------------------------+

Chỉ số kỳ vọng đo lường của hệ thống: thời gian phản hồi API (Latency) duy trì ở mức $\le 200\text{ ms}$ (ngưỡng tối đa chấp nhận $\le 5\text{ s}$ khi tải nặng), tỉ lệ lỗi hệ thống (Error Rate) $< 5%$, và sai số dữ liệu (Data Inconsistency) $< 0,05%$. Phạm vi dự án tập trung vào môi trường Web Application đa nền tảng, hỗ trợ đầy đủ các độ phân giải màn hình thông qua thiết kế Responsive.

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

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

Khảo sát thực tế các nền tảng mạng xã hội hiện hành cung cấp cơ sở quan trọng để xác định khoảng trống công nghệ và định hình hướng tiếp cận cho dự án Meraki:

Tiêu chí Facebook Instagram Zalo Hệ thống Meraki
Mô hình kiến trúc Microservices phân tán lớn Service-Oriented (SOA) Hybrid Client-Server Decoupled SPA + RESTful API
Trải nghiệm giao diện Phức tạp, nhiều thông tin thừa Tập trung hình ảnh/video Tối ưu chat/nhóm việc Tối giản, tập trung nội dung cốt lõi
Bảo mật & Quyền riêng tư Nguy cơ lộ dữ liệu từ bên thứ 3 Bản quyền hình ảnh chưa chặt chẽ Tin nhắn media tự hủy sau thời gian Xác thực JWT stateless, mã hóa đầu cuối
Độ phức tạp cơ sở dữ liệu Graph DB + RDBMS + NoSQL Sharded RDBMS + NoSQL In-memory DB + File Storage NoSQL MongoDB linh hoạt, tối ưu BSON
Khả năng mở rộng nội bộ Đóng, phụ thuộc hệ sinh thái Meta Đóng, phụ thuộc Meta Giới hạn nền tảng Việt Nam Mã nguồn mở, dễ dàng đóng gói Docker

Dựa trên phương pháp phân loại yêu cầu MoSCoW, hệ thống xác định các tính năng ưu tiên:

  • Must Have (Bắt buộc): Xác thực tài khoản (JWT), quản lý hồ sơ cá nhân (Avatar/Cover/Info), Newsfeed đăng bài (Text/Images), hệ thống Like/Comment, quan hệ Bạn bè (Send/Accept/Reject Friend Request), Chat văn bản, Trang cộng đồng (Fanpage), Bảng điều khiển Quản trị (Admin Panel).
  • Should Have (Nên có): Tìm kiếm người dùng và trang theo thời gian thực (Full-text Search), khôi phục mật khẩu tự động qua Email OTP Confirmation.
  • Could Have (Có thể có): Lọc bài viết vi phạm tự động, gắn thẻ bài viết (Hashtags).
  • Won't Have (Chưa thực hiện): Cuộc gọi thoại/video WebRTC trực tiếp, Livestreaming đa luồng.

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình 3 tầng độc lập (Three-tier Architecture), tối ưu hóa tính mô-đun và khả năng mở rộng:

  1. Presentation Layer (Front-end): Xây dựng trên nền tảng ReactJS (v18.2.0), quản lý trạng thái tập trung với Redux Toolkit, định tuyến thông qua React Router DOM, và giao tiếp dữ liệu bất đồng bộ qua Axios HTTP Client.
  2. Business Logic Layer (Back-end): Khởi tạo từ Spring Boot (v3.1.2 / Java 17 LTS), áp dụng nguyên lý Inversion of Control (IoC) và Dependency Injection (DI). Lớp bảo vệ bao gồm Spring Security (v6.1.2) tích hợp bộ lọc OncePerRequestFilter xử lý JWT Header.
  3. Data Layer (Database): MongoDB (v6.0.8) đóng vai trò hệ quản trị CSDL NoSQL, xử lý các tài liệu BSON phân tán với khả năng sharding và indexing tự động trên các trường truy vấn khóa ngoại.
+---------------------------------------------------------------------------------------------------+
|                                 SƠ ĐỒ CẤU TRÚC THỰC THỂ CƠ SỞ DỮ LIỆU                              |
+---------------------------------------------------------------------------------------------------+
|  +-------------------+       1:N       +-------------------+       1:N       +-----------------+  |
|  |     users         |---------------->|      posts        |---------------->|    comments     |  |
|  +-------------------+                 +-------------------+                 +-----------------+  |
|  | _id (PK, ObjectId)|                 | _id (PK, ObjectId)|                 | _id (PK)        |  |
|  | email (Unique)    |                 | user_id (FK)      |                 | post_id (FK)    |  |
|  | password (BCrypt) |                 | content (Text)    |                 | user_id (FK)    |  |
|  | full_name         |                 | images (Array)    |                 | content (Text)  |  |
|  | friends (Array)   |                 | likes_count (Int) |                 | created_at      |  |
|  | roles (Admin/User)|                 | created_at (Date) |                 +-----------------+  |
|  +-------------------+                 +-------------------+                                      |
|           │                                      │                                                |
|           │ 1:N                                  │ 1:N                                            |
|           ▼                                      ▼                                                |
|  +-------------------+                 +-------------------+                                      |
|  |     messages      |                 |    post_likes     |                                      |
|  +-------------------+                 +-------------------+                                      |
|  | _id (PK, ObjectId)|                 | _id (PK, ObjectId)|                                      |
|  | sender_id (FK)    |                 | post_id (FK)      |                                      |
|  | receiver_id (FK)  |                 | user_id (FK)      |                                      |
|  | content (Text)    |                 | created_at (Date) |                                      |
|  | timestamp (Date)  |                 +-------------------+                                      |
|  +-------------------+                                                                            |
+---------------------------------------------------------------------------------------------------+

Thiết kế hệ thống API RESTful tiêu biểu

Phương thức Endpoint URI Chức năng Yêu cầu xác thực
POST /api/v1/auth/signup Đăng ký tài khoản mới kèm gửi mã xác nhận Public
POST /api/v1/auth/signin Xác thực đăng nhập, phát hành JWT token Public
GET /api/v1/users/profile/{id} Truy xuất thông tin người dùng Bearer Token
PUT /api/v1/users/profile/update Cập nhật thông tin/ảnh đại diện/ảnh bìa Bearer Token
GET /api/v1/posts/feed Lấy danh sách bảng tin phân trang ($O(\log N)$) Bearer Token
POST /api/v1/posts/create Tạo bài viết mới kèm upload mảng hình ảnh Bearer Token
POST /api/v1/posts/{id}/like Toggle trạng thái thích/bỏ thích bài viết Bearer Token
POST /api/v1/posts/{id}/comment Gửi bình luận mới vào bài viết Bearer Token
POST /api/v1/friends/request/{id} Gửi lời mời kết bạn Bearer Token
POST /api/v1/messages/send Gửi tin nhắn văn bản giữa hai người dùng Bearer Token
DELETE /api/v1/admin/posts/{id} Xóa bài viết vi phạm (Quyền Admin) Role ADMIN

Methodology

Dự án áp dụng mô hình phát triển phần mềm linh hoạt (Agile Scrum), chia lộ trình thực hiện từ ngày 05/09/2023 đến 25/12/2023 thành 4 Sprint chính:

  • Sprint 1 (Tuần 1 - 4): Phân tích khảo sát hiện trạng, đặc tả usecase, thiết kế kiến trúc hệ thống, cài đặt môi trường Spring Boot và cấu hình MongoDB kết nối.
  • Sprint 2 (Tuần 5 - 8): Xây dựng Authentication Service (JWT + Spring Security), phát triển API lõi cho User, Post, Interaction (Like/Comment).
  • Sprint 3 (Tuần 9 - 12): Thiết kế giao diện ReactJS, tích hợp Redux Toolkit, hiện thực hóa các trang chức năng (Timeline, Profile, Friends, Chat, Fanpage).
  • Sprint 4 (Tuần 13 - 16): Xây dựng Admin Dashboard, kiểm thử hệ thống (Unit/Integration/Security Testing), tối ưu hóa hiệu năng truy vấn và đóng gói sản phẩm.

Ma trận đánh giá và kiểm soát rủi ro dự án:

Rủi ro kỹ thuật Mức độ Kế hoạch giảm thiểu rủi ro
Tràn bộ nhớ do token JWT không thu hồi được Trung bình Đặt thời gian hết hạn hợp lý (TTL 24h), lưu blacklist tạm thời
Nghẽn cổ chai khi tải danh sách bài viết lớn Cao Triển khai phân trang (Pageable), lập chỉ mục (Indexes) trường createdAt
Bất đồng bộ dữ liệu trạng thái Redux trên UI Thấp Chuẩn hóa Redux State slices với @reduxjs/toolkit createAsyncThunk

Implementation và kết quả

Development process

Quá trình lập trình áp dụng các nguyên tắc thiết kế mã nguồn chuẩn: Back-end tuân thủ mô hình Controller-Service-Repository kết hợp DTO pattern; Front-end áp dụng mô hình Atomic Design kết hợp React Custom Hooks.

1. Xử lý xác thực Back-end với Spring Security và JWT Filter

Hệ thống chặn mọi HTTP Request thông qua JwtAuthenticationFilter để giải mã tiêu đề Authorization: Bearer <token>, trích xuất Claims và nạp thông tin người dùng vào SecurityContextHolder:

@Component
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    @Autowired
    private JwtTokenProvider tokenProvider;
    @Autowired
    private CustomUserDetailsService customUserDetailsService;

    @Override
    protected void doFilterInternal(HttpServletRequest request, 
                                    HttpServletResponse response, 
                                    FilterChain filterChain) throws ServletException, IOException {
        try {
            String jwt = getJwtFromRequest(request);
            if (StringUtils.hasText(jwt) && tokenProvider.validateToken(jwt)) {
                String userId = tokenProvider.getUserIdFromJWT(jwt);
                UserDetails userDetails = customUserDetailsService.loadUserById(userId);
                UsernamePasswordAuthenticationToken authentication = 
                    new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
                authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                SecurityContextHolder.getContext().setAuthentication(authentication);
            }
        } catch (Exception ex) {
            logger.error("Could not set user authentication in security context", ex);
        }
        filterChain.doFilter(request, response);
    }

    private String getJwtFromRequest(HttpServletRequest request) {
        String bearerToken = request.getHeader("Authorization");
        if (StringUtils.hasText(bearerToken) && bearerToken.startsWith("Bearer ")) {
            return bearerToken.substring(7);
        }
        return null;
    }
}

2. Xử lý trạng thái bất đồng bộ Front-end với Redux Toolkit

Quản lý luồng dữ liệu một chiều (One-way Data Binding) khi người dùng khởi tạo bài viết mới:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axiosClient from '../../api/axiosClient';

export const createNewPost = createAsyncThunk(
  'posts/createNewPost',
  async (postPayload, { rejectWithValue }) => {
    try {
      const response = await axiosClient.post('/api/v1/posts/create', postPayload);
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

const postSlice = createSlice({
  name: 'posts',
  initialState: { items: [], loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(createNewPost.pending, (state) => {
        state.loading = true;
      })
      .addCase(createNewPost.fulfilled, (state, action) => {
        state.loading = false;
        state.items.unshift(action.payload); // Đưa bài viết mới lên đầu Newsfeed
      })
      .addCase(createNewPost.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

export default postSlice.reducer;

3. Thuật toán truy xuất Bảng tin (Newsfeed Pagination Algorithm)

Tại tầng Service của Spring Boot, truy vấn dữ liệu bảng tin kết hợp phân trang nhằm giảm thiểu độ phức tạp tính toán và bộ nhớ:

@Service
public class PostServiceImpl implements PostService {
    @Autowired
    private PostRepository postRepository;

    @Override
    public Page<PostResponseDTO> getFeedPosts(String currentUserId, int page, int size) {
        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
        Page<Post> postsPage = postRepository.findAllByOrderByCreatedAtDesc(pageable);
        
        return postsPage.map(post -> {
            boolean isLiked = post.getLikedUserIds().contains(currentUserId);
            return new PostResponseDTO(post, isLiked);
        });
    }
}

Độ phức tạp thuật toán truy vấn được tối ưu ở mức $\mathcal{O}(\log N + K)$ với $N$ là tổng số bài viết trong CSDL và $K$ là kích thước trang (size = 10), nhờ thiết lập Compound Index:

db.posts.createIndex({ "createdAt": -1 });
db.comments.createIndex({ "postId": 1, "createdAt": -1 });

Testing và validation

Hệ thống trải qua quy trình kiểm thử toàn diện gồm Unit Testing (JUnit 5, Mockito), API Testing (Postman Test Scripts) và User Acceptance Testing (UAT).

+-------------------------------------------------------------------------------+
|                      KẾT QUẢ KIỂM THỬ ĐỘ PHỦ MÃ NGUỒN (CODE COVERAGE)          |
+-------------------------------------------------------------------------------+
| Layer                    | Statements (%) | Branches (%) | Functions (%)      |
+--------------------------+----------------+--------------+--------------------+
| Controllers              | 91.2%          | 85.0%        | 94.1%              |
| Service Business Logic   | 88.5%          | 82.4%        | 89.0%              |
| Security & Interceptors  | 95.0%          | 90.0%        | 100.0%             |
| Repositories (Data Mock) | 84.0%          | 78.0%        | 85.5%              |
+--------------------------+----------------+--------------+--------------------+
| TOTAL OVERALL            | 89.6%          | 83.8%        | 92.1%              |
+-------------------------------------------------------------------------------+

Các chỉ số kiểm thử hiệu năng đạt được:

  • Tốc độ phản hồi trung bình (Average Latency): 115 ms cho các API đọc (GET) và 185 ms cho các API ghi (POST/PUT).
  • Tải đồng thời (Concurrent Requests): Xử lý ổn định 500 requests/giây mà không phát sinh lỗi tràn luồng (Thread Starvation).
  • Tỉ lệ lỗi (Error Rate): Ghi nhận ở mức $0,12%$ trong điều kiện mạng thông thường (đạt yêu cầu $< 5%$).
  • Điểm hài lòng người dùng (UAT Score): Đạt $4.6/5.0$ qua khảo sát thực nghiệm trên 50 người dùng thử nghiệm tại Trường ĐH Sư phạm Kỹ thuật TP.HCM.

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

Hệ thống đã hoàn thiện $100%$ các tính năng cam kết trong bản đặc tả yêu cầu:

  1. Module Người dùng: Đăng ký xác thực qua mã, đăng nhập JWT, chỉnh sửa hồ sơ, tải ảnh đại diện/ảnh bìa responsive, tìm kiếm người dùng.
  2. Module Tương tác & Nội dung: Đăng bài kèm ảnh, bày tỏ cảm xúc Thích/Bỏ thích, bình luận đa cấp, quản trị bài viết cá nhân.
  3. Module Mạng lưới & Liên lạc: Gửi/Hủy/Chấp nhận lời mời kết bạn, hiển thị danh sách bạn bè, gửi tin nhắn văn bản tức thời.
  4. Module Trang (Fanpage): Khởi tạo trang cộng đồng, đăng bài viết riêng biệt trên Fanpage, quản lý thành viên theo dõi.
  5. Module Quản trị viên (Admin): Khóa/mở tài khoản vi phạm, xóa bài viết và bình luận bị báo cáo, thống kê dữ liệu hệ thống.

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

  1. Kiến trúc Tách rời Không Trạng thái (Stateless Decoupled Architecture): Thay thế cơ chế Session truyền thống bằng JSON Web Token kết hợp Spring Security, giúp giảm $45%$ mức độ chiếm dụng bộ nhớ RAM máy chủ tại các thời điểm tải cao và cho phép mở rộng quy mô bề ngang (Horizontal Scaling) mà không gặp trở ngại về Session Replication.
  2. Lược đồ Dữ liệu Tài liệu Linh hoạt (Polymorphic Document Schema): Tận dụng cấu trúc JSON/BSON của MongoDB để lưu trữ các bài viết đa dạng (văn bản, mảng hình ảnh, danh sách ID tương tác) trong một Document duy nhất. Giải pháp này loại bỏ hoàn toàn các phép toán phức tạp (JOIN) của cơ sở dữ liệu quan hệ, giúp tốc độ đọc Bảng tin tăng $52%$ so với giải pháp RDBMS truyền thống trên cùng tập dữ liệu.
  3. Tối ưu hóa Hiển thị với Virtual DOM & Redux State Normalization: Cấu trúc giao diện mô-đun hóa với ReactJS giúp chỉ render lại đúng thành phần giao diện có dữ liệu thay đổi. Trạng thái Redux được chuẩn hóa loại bỏ hoàn toàn hiện tượng "Prop Drilling", duy trì tốc độ khung hình ổn định $60\text{ FPS}$ ngay cả trên các thiết bị di động cấu hình trung bình.

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

Tình huống ứng dụng thực tế

  • Mạng xã hội học đường/Nội bộ trường đại học: Ứng dụng làm kênh thông tin và thảo luận chính thức cho sinh viên, giảng viên và các câu lạc bộ đội nhóm thuộc Trường ĐH Sư phạm Kỹ thuật TP.HCM.
  • Cổng thông tin tương tác doanh nghiệp (Enterprise Social Network): Triển khai trong môi trường mạng nội bộ (Intranet) nhằm tăng cường gắn kết nhân viên, chia sẻ tài liệu và quản lý các nhóm dự án thông qua Fanpage.
  • Nền tảng cộng đồng chuyên ngành: Phục vụ các cộng đồng nghiên cứu khoa học, lập trình viên cần không gian trao đổi học thuật không bị chi phối bởi các luồng tin thương mại rác.

Chiến lược triển khai và vận hành

# Quy trình đóng gói và triển khai hệ sinh thái Meraki với Docker Compose

# 1. Khởi chạy cụm cơ sở dữ liệu MongoDB
docker run -d --name meraki-mongodb -p 27017:27017 -v mongo_data:/data/db mongo:6.0.8

# 2. Đóng gói và chạy Back-end Spring Boot
cd meraki-backend
./mvnw clean package -DskipTests
docker build -t meraki-api:1.0.0 .
docker run -d --name meraki-backend-service -p 8080:8080 --link meraki-mongodb:mongodb meraki-api:1.0.0

# 3. Đóng gói và phục vụ Front-end ReactJS qua Nginx
cd ../meraki-frontend
npm install && npm run build
docker build -t meraki-web:1.0.0 .
docker run -d --name meraki-frontend-service -p 80:80 meraki-web:1.0.0

Hệ thống có khả năng mở rộng thông qua cụm cân bằng tải Nginx Reverse Proxy kết hợp cơ chế MongoDB Replica Set & Sharding. Với việc sử dụng hoàn toàn các công nghệ mã nguồn mở (ReactJS, Spring Boot, MongoDB Community), chi phí bản quyền phần mềm là $0\text{ VNĐ}$, mang lại hiệu quả đầu tư (ROI) vượt trội cho các tổ chức giáo dục hoặc doanh nghiệp vừa và nhỏ.

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

Hạn chế kỹ thuật hiện tại

  • Cơ chế Nhắn tin: Đang sử dụng phương thức Short Polling qua RESTful API, gây tiêu tốn tài nguyên băng thông hơn so với giao thức kết nối 2 chiều liên tục (Full-duplex).
  • Xử lý Đa phương tiện: Chưa tích hợp hệ thống máy chủ đa phương tiện chuyên dụng (CDN / Video Transcoding Pipeline) để hỗ trợ chia sẻ video dung lượng lớn hoặc livestream.
  • Kiểm duyệt tự động: Việc phát hiện nội dung tiêu cực hoặc hình ảnh nhạy cảm vẫn phụ thuộc vào báo cáo thủ công từ người dùng và quyết định của Quản trị viên.

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

  1. Nâng cấp Real-time Engine: Chuyển đổi toàn bộ module tin nhắn và thông báo tương tác sang chuẩn giao thức WebSocket kết hợp giao thức truyền thông điệp STOMP và RabbitMQ Message Broker.
  2. Tích hợp Trí tuệ Nhân tạo (AI/ML): Xây dựng hệ thống khuyến nghị nội dung bài viết (Recommendation System) dựa trên thuật toán Lọc cộng tác (Collaborative Filtering), tích hợp mô hình Computer Vision để lọc hình ảnh độc hại tự động.
  3. Mở rộng Đa nền tảng: Chuyển đổi mã nguồn Front-end sang React Native để phát hành ứng dụng di động gốc (Native Mobile App) trên iOS và Android.

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

  • Sinh viên & Người học CNTT: Cung cấp tài liệu tham khảo thực tế về việc áp dụng kiến trúc Full-stack hiện đại (ReactJS + Spring Boot + MongoDB) vào một bài toán thực tế quy mô lớn; hiểu rõ quy trình đặc tả nghiệp vụ, mô hình hóa dữ liệu NoSQL và thiết kế API bảo mật chuẩn mực.
  • Lập trình viên (Developers): Nhận được bộ khung kiến trúc chuẩn (Boilerplate) cho hệ thống xác thực JWT phân quyền trên Spring Security 6 và cách tổ chức quản lý trạng thái Redux Toolkit chuẩn mực.
  • Doanh nghiệp & Tổ chức: Sở hữu giải pháp mạng xã hội nội bộ tiết kiệm chi phí, độc lập công nghệ, bảo mật dữ liệu tuyệt đối và dễ dàng tùy biến giao diện theo nhận diện thương hiệu.
  • Nhà nghiên cứu: Tài liệu cung cấp số liệu thực nghiệm về độ trễ, khả năng chịu tải và hiệu năng so sánh giữa cấu trúc NoSQL Document so với cơ sở dữ liệu quan hệ truyền thống trong các ứng dụng mạng xã hội.

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

1. Cấu hình phần cứng tối thiểu để triển khai toàn bộ hệ thống là gì?

Máy chủ triển khai (Server/VPS) tối thiểu cần 2 vCPU, 4GB RAM, 40GB SSD dung lượng lưu trữ, chạy hệ điều hành Linux (Ubuntu Server 20.04/22.04 LTS), đã cài đặt Docker Engine $\ge 24.0$ và Docker Compose $\ge 2.20$.

2. Hệ thống xử lý bài toán nghẽn cổ chai khi số lượng người dùng tăng đột biến như thế nào?

Hệ thống xử lý phân tán tải thông qua 3 tầng: Tầng Front-end được phân phối qua Nginx/CDN; Tầng Application Spring Boot là stateless nên có thể nhân bản thành nhiều container phía sau Nginx Load Balancer; Tầng Database MongoDB hỗ trợ cấu hình Sharding theo userId và Replica Sets để chia tải truy vấn đọc/ghi.

3. Làm thế nào để tích hợp hệ thống xác thực của Meraki vào hệ thống Đăng nhập tập trung (SSO) có sẵn?

Spring Security trong kiến trúc Meraki hỗ trợ mở rộng thêm OAuth2ResourceServer hoặc OAuth2LoginConfigurer. Khi tích hợp, hệ thống có thể dễ dàng kết nối với Google Identity Platform, Azure Active Directory hoặc Keycloak thông qua giao thức OpenID Connect (OIDC).

4. Hệ thống đảm bảo an toàn dữ liệu như thế nào khi gặp sự cố phần cứng?

MongoDB hỗ trợ cơ chế Replica Set với ít nhất 3 nodes (1 Primary, 2 Secondaries). Khi node Primary gặp sự cố, hệ thống tự động bầu cử (Election) một Secondary node lên làm Primary trong vài giây mà không làm gián đoạn dịch vụ. Đồng thời, hệ thống có kịch bản sao lưu dữ liệu tự động (Mongodump) định kỳ lên dịch vụ lưu trữ đám mây độc lập.

5. Chi phí ước tính để vận hành hệ thống trong quy mô 10.000 người dùng hoạt động hàng tháng (MAU) là bao nhiêu?

Nhờ kiến trúc tối ưu hiệu năng không trạng thái, một cụm máy chủ Cloud VPS trị giá khoảng $40 - $60 USD/tháng kết hợp MongoDB Atlas Dedicated Tier ($57 USD/tháng) hoàn toàn đáp ứng tốt lưu lượng truy cập của 10.000 MAU với thời gian hoàn vốn đầu tư (ROI) ước tính chỉ trong vòng 6 tháng nếu áp dụng cho doanh nghiệp.

Kết luận

Đồ án tốt nghiệp "Xây dựng Website Mạng xã hội sử dụng ReactJs và Spring Boot" của sinh viên Lê Vũ Minh Hoàng và Dương Hoàng Thy Trân đã hoàn thành xuất sắc các mục tiêu nghiên cứu và thực nghiệm đề ra. Dự án không chỉ chứng minh tính khả thi và hiệu năng vượt trội của sự kết hợp giữa ReactJS, Spring Boot và MongoDB trong việc xây dựng các ứng dụng web phức tạp, mà còn mang lại một sản phẩm hoàn chỉnh, giàu tính ứng dụng thực tiễn cho cộng đồng giáo dục và doanh nghiệp.

Hệ thống mạng xã hội Meraki là minh chứng rõ nét cho việc làm chủ công nghệ Full-stack hiện đại, mở ra tiềm năng lớn để tiếp tục nâng cấp thành nền tảng truyền thông số toàn diện với thời gian thực và trí tuệ nhân tạo trong tương lai.