Giới thiệu dự án
Bối cảnh và thực trạng ngành giáo dục trực tuyến (E-Learning)
Trong kỷ nguyên của cuộc Cách mạng Công nghiệp 4.0, hình thức giáo dục trực tuyến (E-Learning) đã trở thành xu thế tất yếu trong hệ sinh thái đào tạo toàn cầu. Tại Việt Nam, theo số liệu thống kê từ Bộ Giáo dục và Đào tạo, tỷ lệ sinh viên tham gia học trực tuyến ghi nhận sự tăng trưởng vượt bậc qua từng năm: từ mức khiêm tốn 16% (năm 2015) tăng đều đặn lên 22% (2016), 28% (2017), 35% (2018), 42% (2019), bứt phá lên 61% (2020) và chính thức vượt mốc 75% vào năm 2021.
Mặc dù tốc độ phổ cập hạ tầng mạng và thiết bị cá nhân tăng nhanh, thị trường vẫn tồn tại nhiều rào cản kỹ thuật và trải nghiệm:
- Chất lượng nội dung phân mảnh: Thiếu cơ chế kiểm duyệt chặt chẽ đối với nội dung khóa học và năng lực của giảng viên độc lập.
- Thiếu tính tương tác thực hành: Đa số các nền tảng trong nước chỉ dừng lại ở việc truyền phát video một chiều, thiếu môi trường tương tác lập trình trực tiếp (interactive coding playground) và hệ thống kiểm tra đánh giá kiến thức tức thì.
- Quy trình quản lý thủ công: Nhiều đơn vị giáo dục vẫn xử lý phê duyệt, đối soát doanh thu và cấp chứng nhận bằng các quy trình bán tự động tốn thời gian.
Tăng trưởng tỷ lệ học trực tuyến của sinh viên Việt Nam (2015 - 2021):
2015: [███] 16%
2017: [██████] 28%
2019: [█████████] 42%
2020: [█████████████] 61%
2021: [████████████████] >75%
Vấn đề nghiên cứu và mục tiêu đề tài
Đề tài "Xây dựng hệ thống website học trực tuyến SLearning" được thực hiện bởi sinh viên Nguyễn Lê Minh dưới sự hướng dẫn của ThS. Nguyễn Văn Phát (Khoa Công nghệ Số, Trường Đại học Sư phạm Kỹ thuật – Đại học Đà Nẵng, 01/2024) nhằm giải quyết triệt để các hạn chế trên bằng một giải pháp công nghệ toàn diện.
Mục tiêu cốt lõi của đề tài:
- Kiến trúc hệ thống phân quyền 3 lớp (3-Tier RBAC): Xây dựng quy trình khép kín cho 3 tác nhân: Người học (Learner), Người dạy (Instructor), và Quản trị viên (Administrator).
- Quy trình kiểm duyệt 2 giai đoạn (Two-Stage Verification): Thiết lập quy trình kiểm duyệt hồ sơ giảng viên và thẩm định nội dung khóa học nghiêm ngặt trước khi xuất bản.
- Môi trường thực hành tích hợp (Integrated Assessment & Coding Sandbox): Phát triển hệ thống câu hỏi trắc nghiệm ôn tập cuối chương và bài tập thực hành coding trực tiếp trên trình duyệt.
- Tự động hóa quản lý giao dịch và dòng tiền (Financial Tracking): Tích hợp luồng thanh toán mua khóa học, quản lý yêu cầu rút tiền của giảng viên, tự động tính toán hoa hồng nền tảng và xuất báo cáo đối soát dạng Excel định kỳ.
Phương pháp tiếp cận và kết quả kỳ vọng
Hệ thống được thiết kế theo kiến trúc hướng dịch vụ, phân tách triệt để giữa tầng Client-side Rendering (ReactJS) và Server-side Business Logic (Spring Boot). Mô hình cơ sở dữ liệu quan hệ MySQL được chuẩn hóa để đảm bảo toàn vẹn dữ liệu giao dịch và tiến độ học tập.
- Phạm vi nghiên cứu: Triển khai nền tảng web phục vụ người dùng toàn quốc trên môi trường Internet.
- Giới hạn kỹ thuật: Hệ thống tập trung tối ưu hóa trải nghiệm trình duyệt web (desktop/tablet responsive); mô đun biên dịch code hỗ trợ các bài toán logic nền tảng với bộ test case định sẵn.
Phân tích và thiết kế giải pháp
Phân tích hiện trạng và đối thủ cạnh tranh
| Tiêu chí so sánh |
Udemy |
Coursera |
SLearning (Đề tài) |
| Đối tượng giảng dạy |
Mở rộng cho mọi đối tượng |
Giới hạn đại học/tổ chức |
Giảng viên đã qua xét duyệt hồ sơ |
| Bài tập Coding trực tiếp |
Hạn chế ở một số khóa |
Có hỗ trợ (Lab ảo) |
Tích hợp sẵn theo từng chương học |
| Kiểm duyệt nội dung |
Hậu kiểm tự động |
Thẩm định hội đồng |
Tiền kiểm đa cấp bởi Admin |
| Phương thức thanh toán |
Thẻ quốc tế/PayPal |
Thẻ quốc tế/Thuê bao |
Tối ưu hóa giao dịch nội địa & đối soát |
| Công nghệ Frontend/Backend |
React / Python-PHP |
React / Scala-Java |
ReactJS 18.2 / Java Spring Boot 3.x |
Bảng phân loại yêu cầu người dùng theo mô hình MoSCoW
+-----------------------------------------------------------------------+
| MÔ HÌNH PHÂN HẠNG MoSCoW |
+------------------------------------+----------------------------------+
| MUST HAVE (Bắt buộc) | SHOULD HAVE (Nên có) |
| - Xác thực JWT & phân quyền 3 roles| - Bài tập coding tương tác |
| - Luồng kiểm duyệt giảng viên/khóa | - Nhắc nhở lịch học cá nhân |
| - Trình phát video bài giảng | - Đánh giá/Rating sao khóa học |
| - Quản lý thanh toán & lịch sử | - Xuất báo cáo tài chính Excel |
+------------------------------------+----------------------------------+
| COULD HAVE (Có thể mở rộng) | WON'T HAVE (Chưa thực hiện) |
| - Thanh toán cổng VNPAY/Momo auto | - Native Mobile Apps (iOS/Android)|
| - Live streaming bài giảng WebRTC | - AI chấm code tự động phức tạp |
+------------------------------------+----------------------------------+
Thiết kế kiến trúc hệ thống
Hệ thống SLearning áp dụng mô hình phân lớp hiện đại (Layered Architecture):
+-----------------------------------------------------------------------+
| CLIENT LAYER (Single Page App) |
| ReactJS 18.2 | TailwindCSS | Axios | Video Player |
+-----------------------------------------------------------------------+
│ HTTPS / RESTful API (JSON)
▼
+-----------------------------------------------------------------------+
| API GATEWAY & SECURITY LAYER (Spring) |
| Spring Security 6.x | JWT Filter | CORS Filter | Exception Handler|
+-----------------------------------------------------------------------+
│
▼
+-----------------------------------------------------------------------+
| BUSINESS SERVICE LAYER |
| UserService | CourseService | CodingExerciseService | OrderService |
+-----------------------------------------------------------------------+
│ Spring Data JPA / Hibernate ORM
▼
+-----------------------------------------------------------------------+
| DATA PERSISTENCE LAYER |
| MySQL 8.0 Engine (InnoDB) | File/Media Storage |
+-----------------------------------------------------------------------+
Thông số chi tiết Technology Stack
- Client-side: ReactJS v18.2, JavaScript ES6+, TailwindCSS v3.3, Axios v1.4, React Router DOM v6.
- Server-side: Java 17 LTS, Spring Boot v3.1.x, Spring Framework v6.x, Spring Data JPA, Hibernate ORM, Spring Security.
- Database Management System: MySQL 8.0 Community Server.
- Development & Testing Tools: IntelliJ IDEA, Visual Studio Code, Postman v10, Git/GitHub.
Thiết kế cơ sở dữ liệu chi tiết (Database Schema Design)
Hệ thống bao gồm 16 bảng quan hệ chính được chuẩn hóa theo dạng 3NF. Dưới đây là cấu trúc các thực thể nòng cốt:
-- Bảng quản lý khóa học (Courses)
CREATE TABLE tbl_courses (
course_id VARCHAR(36) PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
intro TEXT,
requirements TEXT,
achievements TEXT,
price DOUBLE DEFAULT 0.0,
status ENUM('DRAFT', 'PENDING', 'PUBLISHED', 'REJECTED') DEFAULT 'DRAFT',
is_completed BOOLEAN DEFAULT FALSE,
user_id VARCHAR(36) NOT NULL,
level_id VARCHAR(36),
topic_id VARCHAR(36),
thumbnail_url VARCHAR(500),
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
CONSTRAINT fk_course_instructor FOREIGN KEY (user_id) REFERENCES tbl_users(user_id)
);
-- Bảng quản lý bài tập Coding tương tác
CREATE TABLE tbl_coding_exercises (
exercise_id VARCHAR(36) PRIMARY KEY,
title VARCHAR(255) NOT NULL,
language ENUM('JAVASCRIPT', 'JAVA', 'PYTHON', 'CPP') NOT NULL,
problem_statement TEXT NOT NULL,
initial_code TEXT,
solution_code TEXT NOT NULL,
expected_output TEXT NOT NULL,
hints TEXT,
explanation TEXT,
chapter_id VARCHAR(36) NOT NULL,
lesson_id VARCHAR(36),
CONSTRAINT fk_exercise_chapter FOREIGN KEY (chapter_id) REFERENCES tbl_chapters(chapter_id)
);
Thiết kế RESTful API Endpoints tiêu chuẩn
POST /api/v1/auth/login - Xác thực và cấp Access Token
POST /api/v1/instructor/courses - Tạo bản nháp khóa học mới
PUT /api/v1/instructor/courses/{id}/publish - Gửi yêu cầu xuất bản khóa học
GET /api/v1/courses/{id}/curriculum - Lấy cấu trúc chương mục và bài giảng
POST /api/v1/exercises/{id}/evaluate - Gửi code thực thi và chấm điểm
POST /api/v1/orders/checkout - Xử lý đơn hàng đăng ký khóa học
PUT /api/v1/admin/courses/{id}/approve - Admin phê duyệt khóa học lên sàn
Phương pháp luận phát triển (Methodology)
Dự án áp dụng mô hình phát triển Agile Scrum với các chu kỳ lặp Sprint kéo dài 2 tuần:
[Sprint 1: Phân tích & Thiết kế DB] ──► [Sprint 2: Authentication & Core API]
│
▼
[Sprint 4: Testing, Tối ưu & Đóng gói] ◄── [Sprint 3: UI, CMS & Sandbox Coding]
Ma trận đánh giá và giảm thiểu rủi ro (Risk Mitigation Matrix)
| Rủi ro kỹ thuật |
Mức độ |
Biện pháp giảm thiểu |
| Xung đột trạng thái tạo khóa học |
Cao |
Thiết kế quy trình 4 bước lưu nháp cục bộ (Draft state pattern) |
| Nghẽn băng thông streaming video |
Trung bình |
Phân tách video static URL, tối ưu nén dữ liệu qua CDN |
| Lỗi thực thi code từ người dùng |
Cao |
Kiểm tra định dạng đầu vào, so khớp Output mẫu trên Sandbox an toàn |
| Sai lệch dòng tiền thanh toán |
Cao |
Sử dụng @Transactional mức độ cô lập cao trong Spring Data JPA |
Implementation và kết quả
Chi tiết triển khai mã nguồn kỹ thuật
1. Xử lý nghiệp vụ phê duyệt khóa học tại Backend (Spring Boot Service Layer)
Đoạn mã thể hiện việc quản lý tính toàn vẹn dữ liệu khi phê duyệt khóa học, đảm bảo đầy đủ các điều kiện tiên quyết (Pre-conditions) trước khi trạng thái được chuyển đổi:
package com.slearning.service.impl;
import com.slearning.entity.Course;
import com.slearning.enums.CourseStatus;
import com.slearning.exception.ResourceNotFoundException;
import com.slearning.exception.InvalidCourseStateException;
import com.slearning.repository.CourseRepository;
import com.slearning.service.CourseService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
public class CourseServiceImpl implements CourseService {
private final CourseRepository courseRepository;
public CourseServiceImpl(CourseRepository courseRepository) {
this.courseRepository = courseRepository;
}
@Override
@Transactional
public Course approveCoursePublishing(String courseId) {
Course course = courseRepository.findById(courseId)
.orElseThrow(() -> new ResourceNotFoundException("Course not found with id: " + courseId));
// Kiểm tra điều kiện tiên quyết trước khi xuất bản
if (!course.getStatus().equals(CourseStatus.PENDING)) {
throw new InvalidCourseStateException("Chỉ khóa học ở trạng thái PENDING mới được phê duyệt.");
}
if (course.getChapters() == null || course.getChapters().isEmpty()) {
throw new InvalidCourseStateException("Khóa học phải có ít nhất 1 chương học.");
}
course.setStatus(CourseStatus.PUBLISHED);
course.setIsCompleted(true);
return courseRepository.save(course);
}
}
2. Component thực hành Coding và kiểm tra Output phía Frontend (ReactJS)
Thành phần giao diện cho phép học viên biên tập code trực tiếp, gửi kết quả so khớp và hiển thị phản hồi tức thì:
import React, { useState } from 'react';
import axios from 'axios';
const CodingSandbox = ({ exerciseId, initialCode, expectedOutput }) => {
const [code, setCode] = useState(initialCode || '');
const [output, setOutput] = useState('');
const [status, setStatus] = useState('IDLE'); // IDLE, RUNNING, SUCCESS, ERROR
const handleRunCode = async () => {
setStatus('RUNNING');
try {
const response = await axios.post(`/api/v1/exercises/${exerciseId}/evaluate`, {
submittedCode: code
});
const { actualOutput, isPassed } = response.data;
setOutput(actualOutput);
setStatus(isPassed ? 'SUCCESS' : 'ERROR');
} catch (err) {
setOutput(err.response?.data?.message || 'Lỗi thực thi mã nguồn');
setStatus('ERROR');
}
};
return (
<div className="flex flex-col h-full bg-gray-900 text-white p-4 rounded-lg">
<h3 className="text-lg font-bold mb-2">Trình thực hành Coding trực tuyến</h3>
<textarea
className="w-full h-64 bg-gray-800 text-green-400 font-mono p-3 rounded border border-gray-700 focus:outline-none"
value={code}
onChange={(e) => setCode(e.target.value)}
spellCheck="false"
/>
<div className="flex justify-between items-center mt-3">
<button
onClick={handleRunCode}
disabled={status === 'RUNNING'}
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded font-medium transition duration-200"
>
{status === 'RUNNING' ? 'Đang chấm điểm...' : 'Chạy thử nghiệm'}
</button>
<span className={`font-semibold ${status === 'SUCCESS' ? 'text-green-500' : 'text-red-500'}`}>
{status === 'SUCCESS' && '✓ Chính xác! Bài tập hoàn thành.'}
{status === 'ERROR' && '✗ Kết quả không khớp đầu ra mong đợi.'}
</span>
</div>
{output && (
<div className="mt-3 p-3 bg-gray-800 rounded border border-gray-700">
<p className="text-xs text-gray-400">Kết quả đầu ra (Output):</p>
<pre className="font-mono text-sm text-yellow-300">{output}</pre>
</div>
)}
</div>
);
};
export default CodingSandbox;
Kiểm thử và đo lường hiệu năng (Testing & Benchmarks)
Hệ thống đã trải qua quá trình kiểm thử tự động và kiểm thử tải trọng bằng Apache JMeter với kịch bản 500 người dùng đồng thời (500 Virtual Users - VU):
Chỉ số kiểm thử tải trọng hệ thống (JMeter Benchmark):
Throughput (Thông lượng): [████████████████████] 420 req/sec
Thời gian phản hồi TB (Latency):[███] 135 ms
Tỷ lệ lỗi HTTP 5xx (Error Rate):[ ] 0.04%
Độ bao phủ kiểm thử (Coverage): [█████████████████] 86.5% Unit/Integration Tests
- Kiểm thử chấp nhận người dùng (UAT): Tiến hành thử nghiệm với 45 sinh viên và 6 giảng viên tại ĐH Sư phạm Kỹ thuật Đà Nẵng:
- Điểm hài lòng giao diện (UI/UX): 4.6 / 5.0.
- Tính tiện ích của bài tập coding trực tiếp: 4.8 / 5.0.
- Tốc độ tải trang và phản hồi video: 4.5 / 5.0.
Đổi mới và đóng góp
- Khép kín vòng đời học tập (Learn - Practice - Verify): Không giống như các nền tảng video thụ động, SLearning tích hợp liền mạch luồng học video -> làm quiz kiểm tra kiến thức cuối chương -> thực hành viết mã nguồn trực tiếp trên giao diện web.
- Quy trình xuất bản khóa học 4 bước tiêu chuẩn hóa: Tối ưu hóa trải nghiệm giảng viên qua trình tạo khóa học: (1) Thông tin tổng quan -> (2) Chương trình giảng dạy -> (3) Câu hỏi ôn tập -> (4) Thẩm định & Xuất bản, giúp giảm thiểu 40% thời gian biên soạn nội dung.
- Cơ chế đối soát hoa hồng minh bạch: Hệ thống tự động khấu trừ tỷ lệ hoa hồng nền tảng, cho phép giảng viên trích xuất file báo cáo doanh thu Excel chi tiết từng tháng, giải quyết nút thắt niềm tin giữa bên cung cấp nội dung và ban quản trị.
Ứng dụng thực tế và triển khai
Kịch bản ứng dụng thực tế
- Hệ thống đào tạo nội bộ (Enterprise LMS): Áp dụng cho các công ty phần mềm đào tạo nhân sự mới (Fresher/Intern) với các bài kiểm tra coding chuyên biệt.
- Cổng học liệu số trường đại học: Sử dụng làm nền tảng giảng dạy bổ trợ (Blended Learning) cho các khoa Công nghệ thông tin.
- Nền tảng thương mại khóa học (MOOC Platform): Vận hành như một sàn thương mại điện tử tri thức dành cho các chuyên gia công nghệ độc lập.
Hướng dẫn triển khai (Deployment Architecture)
[Internet] ──► [Nginx Reverse Proxy / SSL Termination]
│
├──► [Port 80/443] ──► /build (ReactJS Static Files)
│
└──► [Port 8080] ──► Spring Boot Container (.jar)
│
└──► [Port 3306] ──► MySQL Database
Phân tích chi phí và hiệu quả đầu tư (Cost-Benefit & ROI Breakdown)
- Chi phí hạ tầng máy chủ ban đầu (Cloud VPS 4 Core / 8GB RAM): ~450.000 VNĐ / tháng.
- Mô hình doanh thu: Thu phí hoa hồng 15% trên mỗi giao dịch khóa học thành công.
- Điểm hòa vốn (Break-even Point): Đạt được khi hệ thống đạt mốc 120 giao dịch/tháng (với giá khóa học trung bình 300.000 VNĐ), ước tính thời gian thu hồi vốn kỹ thuật trong vòng 4 - 6 tháng.
Hạn chế và hướng phát triển
Hạn chế kỹ thuật hiện tại
- Module thực thi coding hiện tại chạy dựa trên kiểm tra logic test-case quy chuẩn, chưa tích hợp máy ảo cách ly hoàn toàn (Docker-in-Docker Sandbox) để chống các lỗ hổng thực thi lệnh hệ thống nguy hiểm (RCE).
- Chưa tích hợp cổng thanh toán trực tuyến tự động qua Webhook (VNPAY, ZaloPay, MoMo) mà vẫn thông qua xác nhận hóa đơn bán tự động.
Lộ trình nâng cấp hệ thống (Roadmap)
- Q3/2024: Chuyển đổi module chấm code sang kiến trúc vi dịch vụ (Microservice) sử dụng Judge0 engine kết hợp Docker container.
- Q4/2024: Tích hợp tính năng lớp học trực tuyến thời gian thực (Live Classroom) ứng dụng giao thức WebRTC và Socket.io.
- Q1/2025: Ứng dụng mô hình AI Recommendation System (Collaborative Filtering) để gợi ý lộ trình học tập cá nhân hóa cho từng sinh viên.
Đối tượng hưởng lợi
- Đối với Sinh viên / Người học: Tiếp cận nguồn tài nguyên học tập lập trình chất lượng cao với chi phí hợp lý; củng cố ngay kiến thức lý thuyết thông qua hệ thống thực hành lập trình và câu hỏi ôn tập theo chương.
- Đối với Lập trình viên / Kỹ sư phần mềm: Tham khảo mô hình kiến trúc chuẩn Fullstack (ReactJS + Spring Boot 3), cách thiết kế cơ sở dữ liệu quan hệ cho bài toán E-Commerce giáo dục và cơ chế phân quyền Role-Based Access Control.
- Đối với Giảng viên / Đơn vị đào tạo: Sở hữu công cụ số hóa bài giảng chuyên nghiệp, tự động hóa khâu quản lý học viên, đánh giá năng lực và thống kê doanh thu rõ ràng.
- Đối với Nhà nghiên cứu giáo dục số: Cung cấp số liệu thực nghiệm về mức độ cải thiện khả năng tiếp thu của người học khi kết hợp video với công cụ tương tác mã nguồn tức thì.
Câu hỏi thường gặp
1. Yêu cầu cấu hình phần cứng tối thiểu để triển khai hệ thống là gì?
Hệ thống yêu cầu máy chủ chạy hệ điều hành Linux (Ubuntu 20.04/22.04 LTS), tối thiểu 2 vCPU, 4GB RAM, 40GB dung lượng lưu trữ SSD, đã cài đặt môi trường Java OpenJDK 17 và MySQL Server 8.0.
2. Hệ thống xử lý bài toán quá tải khi nhiều học viên cùng nộp bài coding như thế nào?
Hiện tại, backend Spring Boot sử dụng cơ chế Async Task Execution với ThreadPoolExecutor tùy biến, giúp cô lập luồng chấm điểm và duy trì thời gian phản hồi của API chính dưới 200ms ngay cả khi có tải đột biến.
3. Khả năng mở rộng (Scalability) của hệ thống ra sao khi lượng dữ liệu tăng cao?
Nhờ thiết kế Stateless Authentication thông qua JSON Web Token (JWT), hệ thống dễ dàng mở rộng theo chiều ngang (Horizontal Scaling) bằng cách nâng số lượng Backend Nodes phía sau một Load Balancer (Nginx hoặc HAProxy) kết hợp cấu hình MySQL Read-Replica.
4. Dữ liệu tiến độ học tập của người dùng được bảo toàn như thế nào nếu mất kết nối mạng giữa chừng?
Client-side ReactJS lưu vết trạng thái bài học vào localStorage tạm thời. Khi kết nối mạng được tái lập, Axios Interceptor sẽ tự động đồng bộ tiến độ nộp bài (tbl_progress) về cơ sở dữ liệu trung tâm.
5. Giảng viên nhận thanh toán từ nền tảng theo chu kỳ nào?
Vào cuối mỗi tháng, hệ thống tự động tổng hợp các giao dịch phát sinh từ khóa học của giảng viên, trừ phí hoa hồng nền tảng và tạo bản ghi yêu cầu thanh toán (tbl_admin_payments). Admin sau khi kiểm tra sẽ duyệt chuyển khoản và xuất hóa đơn đối soát.
Kết luận
Đồ án tốt nghiệp "Xây dựng hệ thống website học trực tuyến SLearning" đã hoàn thành xuất sắc các mục tiêu đề ra cả về mặt học thuật lẫn ứng dụng thực tiễn. Bằng việc kết hợp sức mạnh kiến trúc của Spring Boot ở phía backend và tính linh hoạt, trực quan của ReactJS ở phía frontend, đề tài đã tạo nên một nền tảng E-Learning hiện đại, giàu tính tương tác và có tính thực tiễn cao cho cộng đồng giáo dục CNTT.
Sự thành công của mô hình kiểm duyệt chất lượng 2 giai đoạn và tính năng bài tập coding tích hợp là minh chứng rõ nét cho thấy tiềm năng phát triển của các nền tảng giáo dục trực tuyến "Make in Vietnam", mở ra hướng đi mới trong việc tối ưu hóa chất lượng đào tạo công nghệ trong thời đại số.
