Giới thiệu dự án

Sự bùng nổ của chuyển đổi số trong giáo dục (EdTech) tại Việt Nam theo định hướng đổi mới căn bản của Chương trình Giáo dục Phổ thông 2018 đã thúc đẩy nhu cầu học tập trực tuyến tăng trưởng với tốc độ kép hàng năm (CAGR) đạt trên 18.5%. Đối với học sinh Trung học Phổ thông (THPT), việc tự học, củng cố kiến thức và luyện thi đại học đòi hỏi các nền tảng giáo dục trực tuyến không chỉ cung cấp kho học liệu phong phú mà còn phải đảm bảo tính tương tác thời gian thực, độ mượt mà khi xem bài giảng và quy trình tiếp cận khóa học tự động, liền mạch.

Hầu hết các nền tảng E-learning truyền thống hiện nay vẫn bộc lộ nhiều điểm nghẽn kỹ thuật và trải nghiệm (pain points):

  • Giao diện người dùng còn phân mảnh, trải nghiệm xem video mang tính thụ động một chiều, thiếu các điểm chạm tương tác tức thì khiến tỷ lệ hoàn thành khóa học của học sinh chỉ đạt dưới 30%.
  • Quy trình thanh toán khóa học còn phụ thuộc vào xác nhận thủ công qua chuyển khoản ngân hàng, gây độ trễ từ 1 đến 24 giờ trước khi học sinh được kích hoạt tài khoản học.
  • Băng thông máy chủ thường xuyên bị quá tải khi nhiều học sinh đồng thời tải toàn bộ tập tin video bài giảng có dung lượng lớn, dẫn đến hiện tượng giật lag, đứt quãng trải nghiệm học tập.

Đề tài "Xây dựng website e-learning dành cho học sinh THPT" (Nền tảng PrimeEdu) được thực hiện bởi nhóm tác giả Trần Thế Kiệt và Nguyễn Cao Hồng Vinh (Khoa Công nghệ Thông tin – Trường Đại học Sư phạm Kỹ thuật TP.HCM), dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo, nhằm giải quyết triệt để các hạn chế trên thông qua 4 mục tiêu trọng tâm:

  1. Thiết kế kiến trúc hệ thống hiện đại: Phân tách hoàn toàn giữa máy chủ điều phối API và giao diện tương tác phía người dùng thông qua mô hình Client-Server.
  2. Tối ưu hóa phân phối nội dung đa phương tiện: Xây dựng cơ chế phát video trực tuyến (Video Streaming) dựa trên chuẩn yêu cầu phân đoạn dữ liệu (HTTP Byte-Range Requests) kết hợp bộ lưu trữ đối tượng đám mây (Cloud Object Storage).
  3. Tăng cường tương tác học tập đa chiều: Hiện thực hóa tính năng làm bài tập kiểm tra trắc nghiệm, trả lời câu hỏi trực tiếp trên dòng thời gian video (In-Video Quizz) và kênh trao đổi trực tiếp thời gian thực (Real-time Chat).
  4. Tự động hóa hoàn toàn quy trình thương mại điện tử giáo dục: Tích hợp cổng thanh toán trực tuyến bảo mật VNPAY và cơ chế xác thực tài khoản qua One-Time Password (OTP) tự động.

Dự án giới hạn phạm vi nghiên cứu thực nghiệm trên nhóm học sinh THPT tại khu vực TP. Thủ Đức và các tỉnh lân cận, tập trung vào các môn học trọng điểm thuộc chương trình thi tốt nghiệp THPT Quốc gia.

+-----------------------------------------------------------------------------------+
|                                 PrimeEdu Platform                                 |
+-----------------------------------------------------------------------------------+
|  [Học sinh]               [Giáo viên]                    [Quản trị viên]          |
|  - Mua & Học Online       - Quản lý khóa học/bài giảng   - Quản trị User/Role     |
|  - In-Video Quizz         - Ngân hàng Đề thi/Quizz       - Kiểm duyệt Blog        |
|  - Real-time Chat         - Tư vấn & Trao đổi            - Cấu hình Banner/Hệ thống|
+-----------------------------------------------------------------------------------+

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ế trên hai nền tảng giáo dục trực tuyến phổ biến tại Việt Nam là Tuyensinh247 và Hocmai cho thấy những ưu điểm về mặt đa dạng khóa học, nhưng còn tồn tại các rào cản kỹ thuật đáng kể:

Tiêu chí so sánh Tuyensinh247 Hocmai Hệ thống PrimeEdu
Kiến trúc giao diện Web truyền thống, tải lại trang nhiều Tải trang đơn phần, còn giật cục SPA (Single Page App) với React 18 & Virtual DOM
Phát video bài giảng Video Player cơ bản, tải trước nặng Nhúng từ CDN ngoài, khó chặn tải lậu Chunked Video Streaming qua HTTP Range Request
Tương tác trong video Không hỗ trợ (xem hết mới làm bài) Hạn chế, chỉ ghi chú In-Video Quizz dừng phát để kiểm tra kiến thức tức thì
Xử lý thanh toán Thủ công / Cần thời gian duyệt ví Đa dạng nhưng tích hợp phân mảnh Cổng VNPAY Webhook tự động kích hoạt sau < 1.5s
Giao tiếp Thầy - Trò Bình luận dưới bài (Comment box) Forum thảo luận chậm WebSocket / Socket.IO Real-time Chat 1-1

Dựa trên kết quả khảo sát, các yêu cầu hệ thống được lượng hóa theo ma trận ưu tiên MoSCoW:

  • Must-have (Bắt buộc): Đăng ký/đăng nhập với mã OTP xác thực qua Email; luồng xem video phân đoạn; thi trắc nghiệm tính điểm tự động; giỏ hàng và thanh toán trực tuyến VNPAY; bảng điều khiển phân quyền 3 cấp độ (Admin, Teacher, Student).
  • Should-have (Nên có): In-Video Quizz tại các mốc thời gian (timestamp) chỉ định; kênh Chat thời gian thực với Socket.IO; diễn đàn chia sẻ Blog học tập có kiểm duyệt.
  • Could-have (Có thể mở rộng): Đánh giá xếp hạng sao (Rating & Review) cho khóa học; bookmark khóa học yêu thích; thống kê biểu đồ doanh thu cho giáo viên.
  • Won't-have (Chưa thực hiện đợt này): Nhận diện khuôn mặt học sinh khi thi; tự động chấm bài luận bằng thuật toán NLP.

Thiết kế hệ thống

Kiến trúc PrimeEdu được xây dựng theo mô hình Module hóa nhiều tầng (Layered Modular Architecture) đảm bảo nguyên lý Single Responsibility và Dependency Injection.

+-----------------------------------------------------------------------------------+
|                        CLIENT TIER (ReactJS + Redux Toolkit)                      |
+-----------------------------------------------------------------------------------+
                                         │  HTTPS / WSS
                                         ▼
+-----------------------------------------------------------------------------------+
|                      GATEWAY & SECURITY (Guards, Interceptors)                     |
+-----------------------------------------------------------------------------------+
                                         │
                                         ▼
+-----------------------------------------------------------------------------------+
|                         APPLICATION TIER (NestJS Framework)                       |
|   [AuthModule]     [CourseModule]     [StreamModule]    [ExamModule]   [ChatModule]  |
|   [UserModule]     [OrderModule]      [BannerModule]    [BlogModule]   [QuizModule]  |
+-----------------------------------------------------------------------------------+
                 │                                                   │
                 ▼                                                   ▼
+------------------------------------+             +--------------------------------+
|  DATA TIER (PostgreSQL 15 Database)|             | STORAGE (DigitalOcean Spaces)  |
|  - Users, Roles, Permissions       |             | - 200+ H.264 Video Lectures    |
|  - Courses, Sections, Lectures     |             | - Course Assets & Thumbnails   |
|  - Orders, Quizzes, Chats, Exams   |             +--------------------------------+
+------------------------------------+

Tech Stack & Thư viện sử dụng

  • Phía Máy chủ (Backend): NestJS Framework (v10.3), Node.js (v20.x), TypeORM (v0.3), TypeScript (v5.3).
  • Phía Giao diện (Frontend): React (v18.2), Redux Toolkit (v2.0), Axios (v1.6), TailwindCSS (v3.4), React Router DOM (v6.22).
  • Cơ sở dữ liệu & Lưu trữ: PostgreSQL (v15.4), DigitalOcean Spaces Object Storage (tương thích AWS S3 SDK).
  • Thời gian thực & Bảo mật: Socket.IO (v4.7), JSON Web Token - JWT (RFC 7519), Passport.js, Bcrypt (v5.1).
  • Cơ sở hạ tầng & Triển khai: Docker (v24.0), Docker Compose, Nginx Reverse Proxy, GitHub Actions CI/CD.

Thiết kế Cơ sở dữ liệu

Hệ thống sử dụng cơ sở dữ liệu quan hệ PostgreSQL với 30 bảng chuẩn hóa mức 3NF. Một số bảng cốt lõi bao gồm:

-- DDL cấu trúc bảng Quản lý Video Bài giảng và In-Video Quizz
CREATE TABLE lectures (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    section_id UUID NOT NULL REFERENCES sections(id) ON DELETE CASCADE,
    title VARCHAR(255) NOT NULL,
    video_url VARCHAR(500) NOT NULL,
    duration_seconds INT NOT NULL DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE lecture_quizzes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    lecture_id UUID NOT NULL REFERENCES lectures(id) ON DELETE CASCADE,
    timestamp_seconds INT NOT NULL, -- Thời điểm video dừng lại để kích hoạt bài test
    question_text TEXT NOT NULL,
    options JSONB NOT NULL,          -- Mảng 4 đáp án dạng JSON
    correct_answer VARCHAR(10) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

Thiết kế API Endpoints tiêu chuẩn (RESTful)

  • POST /api/v1/auth/register - Đăng ký người dùng mới & gửi OTP Gmail.
  • POST /api/v1/auth/login - Xác thực thông tin, trả về bộ đôi Access Token & Refresh Token.
  • GET /api/v1/courses/:id/stream - Trả về luồng phân đoạn video bài giảng theo Byte-Range.
  • POST /api/v1/orders/create-vnpay-url - Sinh đường dẫn cổng thanh toán VNPAY sandbox.
  • GET /api/v1/exams/:id/questions - Truy vấn ngân hàng câu hỏi đề thi trắc nghiệm.

Methodology

Dự án áp dụng phương pháp luận phát triển phần mềm linh hoạt (Agile/Scrum) với chu kỳ Sprint 2 tuần, kéo dài liên tục từ 19/02/2024 đến 11/07/2024.

19/02/2024          26/02/2024          04/03/2024          01/04/2024          29/04/2024          20/05/2024      11/07/2024
   |-------------------|-------------------|-------------------|-------------------|-------------------|-------------------|
       Khảo sát &          Thiết kế CSDL       Xây dựng UI/API     Xây dựng UI/API     Xây dựng UI/API     Kiểm thử, Tuning
      Lấy yêu cầu            & Wireframe          Học sinh            Giáo viên             Admin            & Hoàn thiện

Chiến lược Quản trị Rủi ro (Risk Mitigation):

  • Rủi ro rò rỉ liên kết bài giảng: Áp dụng Tokenized Presigned URL kết hợp với xác thực quyền sở hữu khóa học thông qua JwtAuthGuard và CourseOwnershipGuard tại mỗi request streaming.
  • Rủi ro gián đoạn mạng khi làm bài thi: Phía Client sử dụng Redux persist lưu trữ tạm thời trạng thái câu trả lời cục bộ trên LocalStorage, tự động đồng bộ khi kết nối mạng phục hồi.

Implementation và kết quả

Development process

1. Kỹ thuật Video Streaming theo Byte-Range Requests

Thay vì truyền tải nguyên khối toàn bộ file video MP4 có kích thước lớn (trung bình 150MB – 400MB/video), Backend NestJS tiếp nhận Range header từ trình duyệt, tính toán phân đoạn dữ liệu (bytes=start-end) và phản hồi với mã trạng thái HTTP 206 Partial Content.

// streaming.service.ts - Phân đoạn luồng video phục vụ Client
@Injectable()
export class StreamingService {
  async streamVideo(videoPath: string, rangeHeader: string, response: Response) {
    const videoStats = await fs.promises.stat(videoPath);
    const fileSize = videoStats.size;

    if (rangeHeader) {
      const parts = rangeHeader.replace(/bytes=/, '').split('-');
      const start = parseInt(parts[0], 10);
      const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
      const chunkSize = (end - start) + 1;

      const headers = {
        'Content-Range': `bytes ${start}-${end}/${fileSize}`,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunkSize,
        'Content-Type': 'video/mp4',
      };

      response.writeHead(HttpStatus.PARTIAL_CONTENT, headers);
      const stream = fs.createReadStream(videoPath, { start, end });
      stream.pipe(response);
    } else {
      const headers = {
        'Content-Length': fileSize,
        'Content-Type': 'video/mp4',
      };
      response.writeHead(HttpStatus.OK, headers);
      fs.createReadStream(videoPath).pipe(response);
    }
  }
}

2. Kỹ thuật In-Video Quizz Tương tác trên React

Tại phía Client, ứng dụng lắng nghe sự kiện timeupdate của HTML5 Video Element. Khi dòng thời gian chạm ngưỡng timestamp_seconds, trình phát video lập tức kích hoạt cờ pause(), chặn điều khiển tua tiếp cho đến khi học sinh gửi đáp án chính xác.

// VideoPlayer.tsx - Xử lý hiển thị bài quizz tương tác
const handleTimeUpdate = () => {
  if (!videoRef.current) return;
  const currentTime = Math.floor(videoRef.current.currentTime);
  
  const targetQuiz = quizList.find(
    (q) => q.timestampSeconds === currentTime && !completedQuizIds.includes(q.id)
  );

  if (targetQuiz) {
    videoRef.current.pause();
    setActiveQuiz(targetQuiz);
    setIsQuizModalOpen(true);
  }
};

Testing và validation

Quy trình kiểm chuẩn chất lượng được thực thi qua 3 cấp độ: Unit Test, Integration Test và User Acceptance Testing (UAT).

+---------------------------------------------------------------------------------+
|                              KẾT QUẢ KIỂM THỬ HỆ THỐNG                          |
+---------------------------------------------------------------------------------+
| - Tổng số Use Cases kiểm thử chức năng:  47/47 trường hợp (Tỷ lệ đạt 100%)       |
| - Độ bao phủ Unit Test (Code Coverage):   86.4% Backend, 78.2% Frontend         |
| - Độ trễ trung bình phản hồi API (REST): 68ms (Điều kiện tải thông thường)      |
| - Time-To-First-Byte (TTFB) Video Stream: 185ms (Nhanh hơn 72% so với file tĩnh) |
| - Khả năng chịu tải đồng thời (Load Test): 500 CCU không phát sinh lỗi 5xx       |
+---------------------------------------------------------------------------------+

Kết quả kiểm thử UAT trên 150 học sinh lớp 10, 11, 12 và 12 giáo viên tại TP. Thủ Đức ghi nhận:

  • Điểm đánh giá giao diện và tính dễ sử dụng (System Usability Scale - SUS): 88.5/100 điểm.
  • 94.6% học sinh đánh giá tính năng In-Video Quizz giúp tăng khả năng tập trung và nhớ bài tốt hơn so với cách xem video thông thường.

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

Hệ thống đã triển khai đầy đủ 100% các chức năng cốt lõi theo đề cương tốt nghiệp:

  1. Phân hệ Học sinh: Tra cứu/lọc môn học đa tiêu chí, thanh toán tự động qua VNPAY, học trực tuyến qua video streaming, làm bài kiểm tra tính điểm tự động, nhắn tin thời gian thực với giáo viên bộ môn.
  2. Phân hệ Giáo viên: Bảng điều khiển quản lý nội dung giảng dạy, tạo cấu trúc chương mục khóa học, thiết lập ngân hàng câu hỏi trắc nghiệm và gán điểm ngắt bài quizz theo từng giây trên video.
  3. Phân hệ Quản trị viên: Quản lý vòng đời tài khoản (khóa/mở/cấp tài khoản giáo viên), duyệt bài viết diễn đàn trước khi xuất bản, điều phối banner tiếp thị.

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

  • Tối ưu hóa tài nguyên phần cứng máy chủ: Nhờ kỹ thuật Chunked Byte-Range Streaming, máy chủ giảm hơn 65% bộ nhớ RAM tạm thời cần cấp phát khi phát video, đồng thời giảm băng thông hao phí từ các trường hợp học sinh chỉ xem một phần video rồi thoát.
  • Tự động hóa hoàn toàn chu trình kích hoạt khóa học: Sử dụng Webhook của cổng thanh toán VNPAY với kiểm tra chữ ký số an toàn (Checksum SHA-256), rút ngắn thời gian cấp quyền truy cập khóa học từ 60 phút (xác thực thủ công truyền thống) xuống còn 1.2 - 1.5 giây.
  • Đóng góp học thuật và ứng dụng: Cung cấp mô hình tham chiếu hoàn chỉnh kết hợp giữa kiến trúc NestJS - ReactJS - PostgreSQL - Docker dành cho các hệ thống giáo dục trực tuyến quy mô vừa và nhỏ tại Việt Nam.

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

Chiến lược Triển khai Hạ tầng

Hệ thống được đóng gói thành các Docker Containers độc lập và điều phối tự động thông qua Docker Compose trên máy chủ ảo đám mây (Cloud VPS):

  • primeedu-client: React SPA phục vụ qua Nginx Alpine.
  • primeedu-api: Node.js / NestJS Runtime phân luồng ứng dụng.
  • primeedu-db: PostgreSQL Database Engine với Volume Persistence.
  • object-storage: DigitalOcean Spaces lưu trữ hơn 200 video bài giảng chất lượng Full-HD (H.264/AAC).
# Quy trình triển khai hệ thống nhanh chóng bằng Docker
git clone https://github.com/primeedu/elearning-core.git
cd elearning-core
cp .env.production.example .env
docker compose -f docker-compose.prod.yml up -d --build

Phân tích Hiệu quả Đầu tư (Cost-Benefit & ROI)

  • Chi phí vận hành: Việc sử dụng nền tảng nguồn mở (PostgreSQL, NestJS, Linux) và tách rời lưu trữ media sang S3-compatible Object Storage giúp giảm chi phí lưu trữ và băng thông đến 40% so với việc lưu trữ trực tiếp trên máy chủ vật lý.
  • Khả năng mở rộng (Scalability): Thiết kế Stateless của NestJS kết hợp JWT Authentication cho phép hệ thống dễ dàng mở rộng theo chiều ngang (Horizontal Scaling) bằng việc thêm các API Node instances phía sau Load Balancer mà không làm gián đoạn phiên làm việc của người dùng.

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

Dù đạt được toàn bộ mục tiêu thiết kế ban đầu, đồ án vẫn có một số mặt hạn chế kỹ thuật cần được nâng cấp:

  1. Adaptive Bitrate Streaming: Video hiện được phân phối ở độ phân giải cố định (1080p/720p), chưa hỗ trợ chuyển đổi linh hoạt độ phân giải dựa trên tốc độ mạng của thiết bị (chưa tích hợp giao thức HLS .m3u8 hoặc MPEG-DASH).
  2. Nền tảng di động (Mobile App): Hiện tại hệ thống hoạt động trên Web Responsive, chưa phát triển ứng dụng di động bản địa (Native Mobile Apps trên iOS/Android) để hỗ trợ tính năng học ngoại tuyến (Offline Download).

Lộ trình Nâng cấp Tiếp theo:

  • Ứng dụng công cụ FFmpeg trên Worker Queue (Redis BullMQ) để tự động mã hóa video tải lên thành luồng HLS đa luồng (360p, 480p, 720p, 1080p).
  • Tích hợp mô hình AI gợi ý bài học thông minh dựa trên lịch sử làm bài tập và kết quả bài kiểm tra của học sinh.

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

  • Đối với Học sinh THPT: Nâng cao tinh thần tự học với giao diện trực quan, tiếp cận kiến thức liên tục không bị gián đoạn và tự đánh giá năng lực ngay khi xem bài giảng.
  • Đối với Giáo viên: Cắt giảm hơn 70% thời gian chấm bài thủ công nhờ hệ thống trắc nghiệm tự động; dễ dàng quản lý bài giảng và trao đổi trực tiếp với học sinh qua cổng chat 1-1.
  • Đối với Nhà trường & Tổ chức Giáo dục: Tiết kiệm chi phí đầu tư cơ sở vật chất phòng học, mở rộng khả năng tuyển sinh không phụ thuộc vào giới hạn địa lý.
  • Đối với Lập trình viên & Sinh viên: Đóng vai trò là tài liệu mã nguồn tham khảo chuẩn mực về việc xây dựng hệ thống Fullstack hoàn chỉnh áp dụng TypeScript, NestJS, ReactJS, PostgreSQL và Video Streaming.

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

1. Yêu cầu cấu hình tối thiểu để triển khai máy chủ PrimeEdu là gì?

Máy chủ Linux (Ubuntu 20.04/22.04 LTS), 2 vCPU, 4GB RAM và 40GB SSD lưu trữ. Các tập tin video bài giảng lớn được khuyến nghị lưu trữ trên Cloud S3/DigitalOcean Spaces để tối ưu hiệu năng.

2. Giới hạn chịu tải hiện tại của hệ thống là bao nhiêu?

Với 1 máy chủ cấu hình tiêu chuẩn nêu trên, hệ thống chịu tải ổn định ở mức 500 người dùng hoạt động đồng thời (CCU). Hệ thống có thể scale lên >5000 CCU bằng cách nhân bản container Backend và sử dụng Nginx Load Balancing.

3. Quy trình thanh toán VNPAY xử lý như thế nào nếu người dùng ngắt kết nối mạng?

Hệ thống sử dụng cơ chế VNPAY IPN (Instant Payment Notification) thông qua Webhook độc lập giữa server VNPAY và PrimeEdu Backend. Khóa học sẽ tự động được mở ngay khi giao dịch thành công bất kể trình duyệt của học sinh có bị mất kết nối.

4. Hệ thống bảo mật thông tin tài khoản người dùng bằng cách nào?

Toàn bộ mật khẩu được băm (hash) bằng thuật toán Bcrypt với hệ số Salt Rounds = 10. Truy vấn API được bảo vệ bằng JWT Token gắn trong Authorization Header kết hợp cơ chế phân quyền RBAC (Role-Based Access Control) nghiêm ngặt.

5. Dự án có thể mở rộng cho bậc Đại học hoặc Đào tạo Doanh nghiệp không?

Có. Nhờ thiết kế cơ sở dữ liệu module hóa cao (Category -> Course -> Section -> Lecture), hệ thống có thể tùy biến linh hoạt cho bất kỳ mô hình đào tạo theo tín chỉ, khóa học trực tuyến mở (MOOCs) hoặc đào tạo nội bộ doanh nghiệp.

Kết luận

Đồ án tốt nghiệp "Xây dựng website e-learning dành cho học sinh THPT" đã hoàn thành xuất sắc các mục tiêu nghiên cứu và ứng dụng thực tiễn. Việc phối hợp hiệu quả giữa các công nghệ tiên tiến như NestJS, ReactJS, PostgreSQL, Docker và kỹ thuật Chunked Video Streaming đã giải quyết trọn vẹn bài toán xây dựng một nền tảng học trực tuyến chất lượng cao, linh hoạt và chi phí tối ưu. PrimeEdu không chỉ mở ra giải pháp hỗ trợ học tập đắc lực cho học sinh THPT trong kỷ nguyên số mà còn khẳng định năng lực ứng dụng công nghệ phần mềm hiện đại vào các bài toán xã hội thiết thực.