Giới thiệu dự án

Trong kỷ nguyên chuyển đổi số giáo dục (EdTech), việc tiếp cận ngoại ngữ qua nền tảng trực tuyến đã trở thành xu thế tất yếu với hơn 600 triệu người học trên toàn cầu. Các phương pháp đào tạo truyền thống tại trung tâm ngoại ngữ thường bộc lộ nhiều rào cản: chi phí đắt đỏ (trung bình 25–50 USD/tháng), thời gian biểu cứng nhắc, thiếu tính cá nhân hóa và thiếu cơ chế duy trì động lực liên tục cho học viên.

Đồ án tốt nghiệp "Xây dựng trang web học tiếng Anh online" của nhóm tác giả Nguyễn Trọng Đạt và Nguyễn Duy Lâm (ngành Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh, dưới sự hướng dẫn của ThS. Nguyễn Trần Thi Văn) được phát triển nhằm giải quyết triệt để các rào cản trên. Hệ thống kết hợp mô hình học ngữ pháp chuyên sâu, luyện tập kỹ năng tương tác, cơ chế thi đấu xếp hạng (Tournament) và hệ sinh thái phần thưởng kết hợp thương mại điện tử (E-commerce).

+-----------------------------------------------------------------------+
|                           NGƯỜI HỌC (CLIENT)                          |
|  [Học Ngữ Pháp]  <->  [Luyện Tập]  <->  [Đấu Trường]  <->  [Cửa Hàng]  |
+-----------------------------------------------------------------------+
                                   | HTTP/HTTPS (RESTful API)
+-----------------------------------------------------------------------+
|                       HỆ THỐNG BACKEND (.NET CORE)                    |
|      [Xác Thực JWT]     [Engine Đề Thi]     [Quản Lý Giao Dịch]       |
+-----------------------------------------------------------------------+
                                   | Entity Framework Core
+-----------------------------------------------------------------------+
|                        CƠ SỞ DỮ LIỆU (SQL SERVER)                     |
|  (Users, Exams, Questions, Options, Tournaments, Products, Bills)     |
+-----------------------------------------------------------------------+

Mục tiêu dự án

  1. Xây dựng nền tảng học tập trực tuyến toàn diện: Cung cấp kho lý thuyết ngữ pháp chuẩn hóa, ngân hàng câu hỏi phân loại đa tầng và hệ thống bài tập trắc nghiệm tương tác thời gian thực.
  2. Ứng dụng cơ chế Gamification & E-Commerce: Thiết lập hệ thống tích lũy điểm kinh nghiệm, danh hiệu thành tích (Achievements), đấu trường trực tiếp và cửa hàng đổi/mua vật phẩm hỗ trợ học tập.
  3. Hiện thực hóa kiến trúc phần mềm hiện đại: Kết hợp Single Page Application (SPA) trên nền tảng Angular 8 CLI với Web API đa nền tảng hiệu năng cao trên ASP.NET Core 3.1.
  4. Tối ưu hóa chi phí và trải nghiệm: Giảm chi phí học tập xuống dưới 2 USD/tháng (tiết kiệm hơn 90% so với học trực tiếp), đồng thời đảm bảo thời gian phản hồi giao diện dưới 1.5 giây.

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

  • Phạm vi chức năng: Quản trị hệ thống (CRUD câu hỏi, đề thi, cấu hình Metadata, quản lý người dùng, xử lý đơn hàng) và tương tác người dùng (làm bài thi, tra cứu ngữ pháp, thi đấu, mua sắm vật phẩm, quản lý lịch sử).
  • Giới hạn kỹ thuật: Chưa tích hợp module nhận dạng giọng nói AI để chấm phát âm tự động; luồng thanh toán hiện hỗ trợ phương thức COD (Cash on Delivery) và mô phỏng cổng thẻ tín dụng.

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

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

Tiêu chí Trung tâm truyền thống Nền tảng học tĩnh (Web 1.0) Giải pháp Đồ án (Angular + .NET Core)
Chi phí đào tạo 25 – 50 USD/tháng Miễn phí hoặc 5 USD/tháng ~2 USD/tháng (Tiết kiệm >90%)
Tính linh hoạt Cố định theo lịch học Tùy chọn nhưng thiếu tương tác Học mọi lúc, mọi nơi, đa thiết bị
Trải nghiệm tương tác Trực tiếp với giáo viên Đọc tài liệu thụ động (PDF/HTML) Tương tác SPA tức thì, Gamification
Khả năng mở rộng Giới hạn theo phòng học Khó quản lý tiến độ học viên Kiến trúc Web API tải lượng lớn

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

  • Must have: Hệ thống xác thực người dùng (Auth), module học ngữ pháp, làm bài thi/luyện tập tính giờ, bảng thành tích cá nhân, trang quản trị Admin quản lý câu hỏi/đề thi.
  • Should have: Chức năng thi đấu đối kháng (Tournament), hệ sinh thái cửa hàng vật phẩm, quy trình đặt hàng và xuất hóa đơn tự động.
  • Could have: Bộ lọc động Metadata Type/Value cho câu hỏi, chức năng xem lại chi tiết lời giải bài thi.
  • Won't have (giai đoạn này): Chấm phát âm bằng Speech-to-Text AI, phòng học trực tuyến qua WebRTC.

Thiết kế hệ thống

Hệ thống được thiết kế theo mô hình phân tầng hướng dịch vụ (Multi-tier Architecture), tách biệt hoàn toàn giữa tầng Client-side và Server-side qua giao tiếp RESTful API.

+------------------------------------------------------------------------------------+
|                                FRONTEND (Angular 8 CLI)                            |
|  +--------------------+  +----------------------+  +----------------------------+  |
|  |   Auth / Profile   |  |   Grammar & Exam     |  |   Store & Tournament       |  |
|  +--------------------+  +----------------------+  +----------------------------+  |
|  +------------------------------------------------------------------------------+  |
|  |     Shared UI Components (Ng-Zorro-Antd) | RxJS Services | HTTP Interceptors |  |
|  +------------------------------------------------------------------------------+  |
+------------------------------------------------------------------------------------+
                                          | JSON over HTTPS
+------------------------------------------------------------------------------------+
|                             BACKEND (ASP.NET Core Web API)                         |
|  +------------------------------------------------------------------------------+  |
|  | Controllers (Account, Question, Exam, Tournament, Product, Bill, Metadata)   |  |
|  +------------------------------------------------------------------------------+  |
|  | Business Logic Layer (Services, Data Validation, Dynamic Query Engine)       |  |
|  +------------------------------------------------------------------------------+  |
|  | Data Access Layer: Entity Framework Core 3.1 (Repository / Unit of Work)     |  |
|  +------------------------------------------------------------------------------+  |
+------------------------------------------------------------------------------------+
                                          | SQL Native Driver
+------------------------------------------------------------------------------------+
|                         DATABASE LAYER (Microsoft SQL Server)                      |
|  [Users] [Exams] [Question] [Options] [Gramars] [Products] [Bills] [Metadata]      |
+------------------------------------------------------------------------------------+

Ngăn xếp công nghệ (Technology Stack)

  • Client-side: Angular 8.2 CLI, TypeScript 3.4, Ng-Zorro-Antd (Ant Design UI kit), RxJS 6.5, CSS3/SCSS.
  • Server-side: ASP.NET Core 3.1 Web API, C# 8.0, Entity Framework Core 3.1 ORM, Kestrel Web Server.
  • Cơ sở dữ liệu: Microsoft SQL Server 2019 Enterprise.
  • Bảo mật & Tiêu chuẩn: JSON Web Token (JWT), BCrypt Password Hashing, CORS Policy, REST Standard.

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

Hệ thống quản lý 18 thực thể dữ liệu chính được chuẩn hóa mức 3NF, tiêu biểu gồm:

-- Bảng lưu trữ cấu trúc câu hỏi động
CREATE TABLE Question (
    QuestionId INT IDENTITY(1,1) PRIMARY KEY,
    Content NVARCHAR(MAX) NOT NULL,
    QuestionType INT NOT NULL, -- 1: Trắc nghiệm, 2: Điền từ, 3: Ngữ pháp
    MetadataValueId INT FOREIGN KEY REFERENCES Metadatavalue(Id),
    CreatedDate DATETIME DEFAULT GETDATE()
);

-- Bảng các lựa chọn đáp án
CREATE TABLE Options (
    OptionId INT IDENTITY(1,1) PRIMARY KEY,
    QuestionId INT FOREIGN KEY REFERENCES Question(QuestionId) ON DELETE CASCADE,
    OptionText NVARCHAR(MAX) NOT NULL,
    IsCorrect BIT NOT NULL DEFAULT 0
);

-- Bảng liên kết đề thi và người dùng
CREATE TABLE UserExamsMapping (
    Id INT IDENTITY(1,1) PRIMARY KEY,
    UserId INT FOREIGN KEY REFERENCES Users(UserId),
    ExamId INT FOREIGN KEY REFERENCES Exams(ExamId),
    Score FLOAT NOT NULL,
    CompletedTime DATETIME NOT NULL,
    DurationSeconds INT NOT NULL
);

Thiết kế RESTful API Endpoints

POST   /api/v1/auth/login               -> Xác thực và cấp phát JWT token
POST   /api/v1/auth/register            -> Đăng ký tài khoản người dùng mới
GET    /api/v1/grammar/topics           -> Lấy danh sách chuyên đề ngữ pháp
GET    /api/v1/exams/{id}/questions     -> Lấy toàn bộ câu hỏi của đề thi theo ID
POST   /api/v1/exams/submit             -> Nộp bài thi, tính điểm và ghi nhận thành tích
GET    /api/v1/store/products           -> Lấy danh mục vật phẩm học tập
POST   /api/v1/orders/checkout          -> Tạo đơn hàng và lập hóa đơn thanh toán
POST   /api/v1/admin/questions/create   -> [Admin] Thêm mới câu hỏi vào ngân hàng đề

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 điều chỉnh trong thời gian 15 tuần (từ ngày 24/02/2020 đến ngày 01/07/2020).

Tuần 1-3: Nghiên cứu cơ sở lý thuyết (Angular 8, .NET Core) & Khảo sát yêu cầu.
Tuần 4-6: Thiết kế kiến trúc, Database ERD, Usecase Specification và UI Mockup.
Tuần 7-10: Hiện thực hóa Backend API (ASP.NET Core) & Xây dựng Client SPA (Angular 8).
Tuần 11-13: Tích hợp hệ thống, kiểm thử Unit Test/Integration Test & Sửa lỗi.
Tuần 14-15: Đánh giá nghiệm thu UAT, hoàn thiện báo cáo và bảo vệ đồ án.

Hiện thực hóa và kết quả thực nghiệm

Quy trình phát triển và kỹ thuật triển khai

Hệ thống tận dụng tối đa các tính năng mới trên Angular 8 CLI:

  • Angular Ivy Compiler: Giảm kích thước bundle biên dịch ban đầu, tối ưu hóa quá trình kiểm tra kiểu dữ liệu (template type-checking).
  • Differential Loading: CLI tự động sinh ra hai gói bundle riêng biệt: ES2015 cho trình duyệt hiện đại (giảm kích thước tải xuống 20–30%) và ES5 tương thích trình duyệt cũ.
  • Lazy Loading Modules: Tối ưu hóa thời gian phản hồi trang bằng cách chỉ tải các module khi người dùng điều hướng.
// Cấu hình Lazy Loading Router tối ưu trong Angular 8
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'grammar',
    loadChildren: () => import('./modules/grammar/grammar.module').then(m => m.GrammarModule)
  },
  {
    path: 'exam',
    loadChildren: () => import('./modules/exam/exam.module').then(m => m.ExamModule)
  },
  {
    path: 'store',
    loadChildren: () => import('./modules/store/store.module').then(m => m.StoreModule)
  },
  {
    path: 'admin',
    loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Tại tầng Backend, ASP.NET Core 3.1 áp dụng mô hình Controller-Service-Repository kết hợp cơ chế Dependency Injection (DI) gốc:

[ApiController]
[Route("api/v1/[controller]")]
public class ExamsController : ControllerBase
{
    private readonly IExamService _examService;

    public ExamsController(IExamService examService)
    {
        _examService = examService;
    }

    [HttpPost("submit")]
    [Authorize]
    public async Task<IActionResult> SubmitExam([FromBody] SubmitExamDto submission)
    {
        if (!ModelState.IsValid)
            return BadRequest(ModelState);

        var result = await _examService.EvaluateExamAsync(submission, User.GetUserId());
        return Ok(new ApiResponse<ExamResultDto>(result));
    }
}

Kiểm thử và đánh giá hiệu năng (Testing & Benchmarks)

Hệ thống đã trải qua 5 bộ kiểm thử kịch bản chính với 120 test cases chi tiết:

Kịch bản kiểm thử Số lượng Test Cases Tỷ lệ Pass (%) Lỗi phát hiện Thời gian phản hồi TB
Xác thực & Phân quyền (Auth) 24 100% 0 120 ms
Học Ngữ pháp & Luyện tập 35 100% 1 (Đã fix) 145 ms
Thi đấu & Tính giờ làm bài 26 96.1% 1 (Đã fix) 180 ms
Giỏ hàng & Đặt hàng (Store) 20 100% 0 210 ms
Quản trị CRUD Admin 15 100% 0 165 ms 
Kích thước Bundle Frontend (Build Production):
- Main Bundle (Không có Ivy):  2.45 MB
- Main Bundle (Bật Ivy Engine): 1.68 MB  (Giảm 31.4%)
- First Contentful Paint (FCP):  0.92 giây
- Time to Interactive (TTI):     1.38 giây

Kết quả tính năng đạt được

  • Hoàn thành 100% các module lõi: Quản trị đề thi, ngân hàng câu hỏi phân cấp Metadata, quản trị đơn hàng và tài khoản.
  • Giao diện Client trực quan xây dựng trên Ng-Zorro-Antd, tương thích tốt trên cả Desktop và Mobile Web Browser.
  • Tỷ lệ hài lòng qua khảo sát thử nghiệm người dùng đạt 92.4% trên thang điểm đánh giá độ khả dụng hệ thống (SUS).

Đổi mới và đóng góp kỹ thuật

  1. Tích hợp mô hình Gamification - E-Commerce vào EdTech: Khác biệt với các trang web học tập tĩnh, hệ thống gắn kết quá trình làm bài tập với hệ thống điểm thưởng, tích lũy huy hiệu thành tích và quy đổi vật phẩm học tập thực tế.
  2. Kiến trúc dữ liệu Metadata linh hoạt: Bảng Metadatatype và Metadatavalue cho phép phân loại và mở rộng không giới hạn các chủ đề, cấp độ khó và dạng thức bài tập mà không cần thay đổi cấu trúc bảng SQL cốt lõi.
  3. Ứng dụng công nghệ đón đầu (Ivy Engine & ASP.NET Core): Tận dụng cơ chế biên dịch thế hệ mới của Angular 8 và pipeline xử lý HTTP siêu nhẹ của Kestrel Server, tăng tốc độ xử lý I/O lên 40% so với ASP.NET MVC truyền thống.
Tính năng kỹ thuật Web học tiếng Anh thông thường Nền tảng EdTech thương mại (Duolingo) Hệ thống Đồ án
Cơ chế tải trang Tải lại trang (SSR cũ) SPA chuyên biệt SPA với Differential Loading
Mở rộng dạng bài Cố định theo code Động đa định dạng Động qua Metadata Mapping
Hệ thống thương mại Thường không có Mua vật phẩm ảo Đặt hàng vật phẩm thực tế (Bills)
Mã nguồn & Tự chủ Mã nguồn đóng Mã nguồn đóng Mã nguồn mở, dễ dàng đóng gói

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

Kịch bản sử dụng thực tế (Use Cases)

  • Học sinh/Sinh viên: Tự ôn tập ngữ pháp theo lộ trình chuẩn hóa, tham gia làm bài thi trắc nghiệm có bấm giờ để đánh giá năng lực định kỳ trước các kỳ thi chứng chỉ.
  • Doanh nghiệp / Trung tâm ngoại ngữ nhỏ: Sử dụng làm nền tảng quản lý ngân hàng câu hỏi, tổ chức thi đấu nội bộ và phân phối tài liệu học tập với chi phí đầu tư hạ tầng thấp.
[Máy chủ Web Nginx (Reverse Proxy / SSL)]
                 |
  +--------------+--------------+
  |                             |
  v                             v
[Angular 8 Static Host]    [ASP.NET Core Web API (Kestrel Server)]
(Dist Files / CDN)              |
                                v
                   [Microsoft SQL Server 2019]

Phân tích hiệu quả kinh tế (ROI)

  • Chi phí vận hành: Hệ thống có thể triển khai trên hạ tầng Cloud/VPS cơ bản (2 vCPU, 4GB RAM) với mức chi phí khoảng 15–20 USD/tháng, phục vụ đồng thời 500–1.000 người dùng hoạt động cùng lúc.
  • Khả năng sinh lời: Tích hợp module bán tài liệu/sách/vật phẩm trực tiếp mang lại dòng tiền phụ trợ bên cạnh việc thu phí dịch vụ hội viên.

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

Hạn chế kỹ thuật

  • Chưa hỗ trợ xử lý âm thanh thời gian thực (Audio Streaming / Speech Analysis) để đánh giá kỹ năng Speaking.
  • Module thanh toán trực tuyến mới dừng ở mức giả lập thẻ và COD, chưa tích hợp SDK của các cổng thanh toán nội địa như VNPay, MoMo, ZaloPay.

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

  1. Nâng cấp công nghệ: Di chuyển nền tảng lên .NET 8 LTS và Angular 17+ nhằm ứng dụng Signals và Server-Side Rendering (SSR) nâng cao cho SEO.
  2. Trí tuệ nhân tạo (AI): Ứng dụng mô hình ngôn ngữ lớn (LLM) để tự động giải thích chi tiết lỗi sai trong câu hỏi ngữ pháp và gợi ý lộ trình học tập cá nhân hóa.
  3. Ứng dụng di động đa nền tảng: Đóng gói ứng dụng di động cho iOS/Android sử dụng Capacitor hoặc Flutter kết nối chung hệ thống Backend API.

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

  • Sinh viên & Học viên: Tiếp cận môi trường học tập ngữ pháp và luyện đề trắc nghiệm chuẩn mực, không tốn kém chi phí, dễ dàng theo dõi tiến độ học tập cá nhân qua Dashboard.
  • Lập trình viên & Kỹ sư phần mềm: Nguồn tài liệu tham khảo thực tế về cách tích hợp Angular CLI với ASP.NET Core Web API, cách triển khai Ng-Zorro-Antd và thiết kế hệ thống quan hệ phân cấp bằng Entity Framework Core.
  • Cơ sở đào tạo & Doanh nghiệp EdTech: Mô hình giải pháp mẫu giúp tiết kiệm 60% thời gian nghiên cứu và phát triển một nền tảng E-learning tích hợp Gamification từ con số không.

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

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

  • Server Web/API: 1 vCPU, 2GB RAM, 20GB SSD lưu trữ, cài đặt .NET Core Runtime 3.1 và Nginx/IIS.
  • Database Server: 2 vCPU, 4GB RAM, Microsoft SQL Server 2017/2019 Express hoặc Standard.
  • Phía Client: Bất kỳ trình duyệt nào hỗ trợ HTML5/ES6 (Chrome 70+, Edge, Firefox, Safari).

2. Angular Ivy Engine mang lại lợi ích cụ thể nào cho ứng dụng?

Ivy giúp tối ưu kích thước bundle nhỏ hơn 30%, tăng tốc độ biên dịch ứng dụng, hỗ trợ kiểm tra lỗi type chặt chẽ ngay trong template HTML khi build và cho phép debug trực tiếp trên template của Component.

3. Hệ thống đảm bảo an toàn thông tin người dùng như thế nào?

Toàn bộ mật khẩu được băm (hash) bằng thuật toán an toàn trước khi lưu vào database. Quá trình giao tiếp giữa Angular và Web API được bảo vệ qua giao thức HTTPS và xác thực không trạng thái (stateless) bằng JSON Web Token (JWT) có thời hạn.

4. Hệ thống có thể mở rộng xử lý cho 10.000 người dùng đồng thời không?

Có thể mở rộng thông qua: (1) Cấu hình cân bằng tải (Load Balancer) nhiều phiên bản ASP.NET Core Web API chạy không trạng thái; (2) Tích hợp Redis Caching cho ngân hàng câu hỏi và bảng xếp hạng; (3) Lưu trữ file đính kèm/hình ảnh trên Cloud Object Storage (S3/Azure Blob).

5. Chi phí đầu tư ban đầu và thời gian hoàn vốn (ROI)?

Với mã nguồn mở và nền tảng .NET Core miễn phí bản quyền runtime, chi phí phát triển ban đầu chỉ tập trung vào hạ tầng server (~200–300 USD/năm). Hệ thống có thể hoàn vốn sau 3–6 tháng nếu triển khai thu phí khóa học hoặc kinh doanh tài liệu học tập.

Kết luận

Đồ án tốt nghiệp "Xây dựng trang web học tiếng Anh online" đã hoàn thành xuất sắc các mục tiêu đề ra về mặt học thuật lẫn kỹ thuật ứng dụng. Dự án chứng minh tính hiệu quả vượt trội khi kết hợp framework hiện đại Angular 8 CLI và nền tảng mạnh mẽ ASP.NET Core, tạo ra một hệ thống học trực tuyến tốc độ cao, giao diện thẩm mỹ và giàu tính tương tác. Đây là tiền đề vững chắc để phát triển thành một sản phẩm EdTech thương mại hoàn chỉnh phục vụ cộng đồng học tiếng Anh trong kỷ nguyên số.