Giới thiệu dự án

Trong kỷ nguyên toàn cầu hóa, năng lực tiếng Anh đóng vai trò tiên quyết trong việc tiếp cận tri thức quốc tế và nâng cao năng lực cạnh tranh nghề nghiệp. Theo các nghiên cứu ngôn ngữ học ứng dụng, từ vựng là nền tảng cốt lõi của mọi kỹ năng giao tiếp. Như nhà ngôn ngữ học David A. Wilkins từng khẳng định: "Without grammar, very little can be conveyed; without vocabulary, nothing can be conveyed" (Không có ngữ pháp, rất ít thông tin có thể được truyền đạt; nhưng không có từ vựng, không có gì có thể được truyền đạt). Tuy nhiên, phương pháp ghi chép từ vựng truyền thống qua sổ tay hay thẻ giấy bộc lộ nhiều điểm nghẽn: dễ thất lạc, thiếu khả năng trực quan hóa với hình ảnh minh họa, không hỗ trợ theo dõi tiến độ ghi nhớ cá nhân hóa và thiếu cơ chế chia sẻ cộng đồng.

Vấn đề cốt lõi đặt ra là: người học tiếng Anh cần một giải pháp số hóa linh hoạt, ứng dụng kỹ thuật gợi nhớ chủ động (Active Recall) và thuật ngữ lặp lại ngắt quãng (Spaced Repetition) trên nền tảng web hiện đại, giúp tối ưu hóa thời gian và tăng cường khả năng ghi nhớ dài hạn.

+-------------------------------------------------------------------------+
|                              PROBLEM TREE                               |
+-------------------------------------------------------------------------+
| [Gốc rễ] Quên từ vựng theo đường cong Ebbinghaus & Học thụ động qua sổ  |
|      ↓                                                                  |
| [Triệu chứng] Tốn thời gian tạo flashcard giấy, khó quản lý đa nghĩa    |
|      ↓                                                                  |
| [Giải pháp Đề xuất] Website Flashcard Đa tầng (ReactJS + ASP.NET Core)  |
+-------------------------------------------------------------------------+

Mục tiêu đề tài

  1. Mục tiêu 1: Nghiên cứu và hiện thực hóa kiến trúc ứng dụng web phân tán (Decoupled SPA) kết hợp giữa thư viện giao diện người dùng ReactJS và framework backend ASP.NET Core hiệu năng cao.
  2. Mục tiêu 2: Xây dựng mô hình dữ liệu flashcard đa tầng: cho phép 1 mặt trước (Front) liên kết với nhiều định nghĩa mặt sau (Back), trong đó mỗi định nghĩa chứa đầy đủ loại từ (Part of Speech), phiên âm, câu ví dụ thực tế và hình ảnh trực quan.
  3. Mục tiêu 3: Phát triển hai cơ chế luyện tập tương tác chuyên sâu: Chế độ Luyện tập ghi nhớ chủ động (Active Recall Practice) kết hợp câu hỏi trắc nghiệm kiểm tra chéo và Chế độ Trò chơi ghép thẻ (Match Card Game) nhằm kích thích phản xạ tư duy nhanh.
  4. Mục tiêu 4: Thiết kế hệ sinh thái chia sẻ học liệu công khai (Marketplace) với quy trình kiểm duyệt nội dung đa cấp dành cho Quản trị viên (Admin) và Người dùng (User).

Giải pháp và Phạm vi

Dự án áp dụng mô hình kiến trúc Client-Server hiện đại, phân tách hoàn toàn giữa tầng giao diện Single Page Application (SPA) viết bằng ReactJS và tầng RESTful Web API xây dựng trên nền tảng .NET Core 3.1. Hệ thống đảm bảo thời gian phản hồi trung bình dưới 200ms cho các tác vụ truy vấn dữ liệu, tương thích hoàn toàn trên các trình duyệt máy tính để bàn và thiết bị di động, phục vụ cho mọi đối tượng có nhu cầu nâng cao vốn từ vựng tiếng Anh.

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

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

Nhóm nghiên cứu đã thực hiện khảo sát chuyên sâu 5 nền tảng flashcard phổ biến trên thị trường: Tinycards (Duolingo), Cram, Brainscape, ProProfs Flashcard và StudyBlue.

Nền tảng Ưu điểm kỹ thuật Nhược điểm & Hạn chế Khả năng tùy biến dữ liệu
Tinycards Giao diện hiện đại, tối giản, hỗ trợ học không cần đăng nhập Mỗi thẻ chỉ hỗ trợ 1 nghĩa duy nhất; thiếu ví dụ ngữ cảnh và loại từ Thấp
Cram Hỗ trợ phân loại bộ thẻ, tích hợp mini-game ghi nhớ Giao diện lỗi thời, trải nghiệm người dùng (UX) phức tạp Trung bình
Brainscape Phân cấp 5 mức độ ghi nhớ cá nhân hóa, hỗ trợ tạo lớp học Giới hạn tính năng nâng cao, yêu cầu trả phí để truy cập kho thẻ Trung bình
ProProfs Cho phép chia sẻ đa nền tảng mạng xã hội, hỗ trợ mua bán thẻ Phụ thuộc chi phí bản quyền, giao diện kiểm tra chưa tối ưu Cao
StudyBlue Cho phép điều hướng bằng phím tắt, tùy chỉnh số lượng câu hỏi Hiển thị toàn bộ thẻ cùng lúc gây quá tải DOM, thiếu phân trang tối ưu Trung bình

Phân loại yêu cầu hệ thống theo mô hình MoSCoW

  • Must Have (Bắt buộc): Hệ thống xác thực danh tính (Identity Authentication); Quản lý bộ thẻ (Deck) và thẻ (Card); Cấu trúc thẻ 1 Front - N Backs; Hai chế độ luyện tập (Active Recall & Match Card); Kiểm duyệt học liệu cộng đồng (Marketplace).
  • Should Have (Nên có): Cơ chế lọc và tìm kiếm tức thì (Instant Debounced Search); Ghim bộ thẻ yêu thích vào danh mục cá nhân (Pin to Shortcuts); Thống kê chi tiết lịch sử học tập.
  • Could Have (Có thể có): Tích hợp phát âm tự động (Text-to-Speech Web API); Tùy biến chủ đề giao diện (Dark/Light Theme).
  • Won't Have (Chưa phát triển trong giai đoạn này): Ứng dụng di động Native (sẽ phát triển trong giai đoạn tiếp theo).

Thiết kế hệ thống

+---------------------------------------------------------------------------------+
|                             SYSTEM ARCHITECTURE                                 |
+---------------------------------------------------------------------------------+
|  [Presentation Layer]                                                           |
|  ReactJS SPA (React 16.8+, Functional Components, Hooks, Axios, React Router)   |
|                                       ↕ (HTTPS / JSON REST API)                 |
|  [API Gateway & Controller Layer]                                               |
|  ASP.NET Core 3.1 Web API (C#) - JWT Authentication & Route Middleware         |
|                                       ↕ (Dependency Injection)                  |
|  [Business Logic & ORM Layer]                                                   |
|  Entity Framework Core 3.1 (LINQ Queries, Repository Pattern, Fluent API)       |
|                                       ↕ (SQL Client Driver)                     |
|  [Data Persistence Layer]                                                       |
|  Microsoft SQL Server Relational Database + File Storage Service                |
+---------------------------------------------------------------------------------+

Thiết kế cơ sở dữ liệu quan hệ

Hệ thống sử dụng cơ sở dữ liệu quan hệ Microsoft SQL Server được mô hình hóa chặt chẽ qua các thực thể:

-- Cấu trúc bảng Thẻ chính (Card) và Các mặt sau đa nghĩa (Back)
CREATE TABLE [Cards] (
    [Id] INT IDENTITY(1,1) PRIMARY KEY,
    [Front] NVARCHAR(255) NOT NULL,
    [UserId] NVARCHAR(450) NOT NULL,
    [CreatedAt] DATETIME2 DEFAULT GETUTCDATE(),
    FOREIGN KEY ([UserId]) REFERENCES [AspNetUsers]([Id]) ON DELETE CASCADE
);

CREATE TABLE [Backs] (
    [Id] INT IDENTITY(1,1) PRIMARY KEY,
    [CardId] INT NOT NULL,
    [Meaning] NVARCHAR(500) NOT NULL,
    [Type] NVARCHAR(50) NOT NULL,
    [Example] NVARCHAR(MAX) NULL,
    [ImageUrl] NVARCHAR(500) NULL,
    FOREIGN KEY ([CardId]) REFERENCES [Cards]([Id]) ON DELETE CASCADE
);

CREATE TABLE [Decks] (
    [Id] INT IDENTITY(1,1) PRIMARY KEY,
    [Name] NVARCHAR(255) NOT NULL,
    [Description] NVARCHAR(1000) NULL,
    [Color] NVARCHAR(20) DEFAULT '#1E88E5',
    [IsPublic] BIT DEFAULT 0,
    [UserId] NVARCHAR(450) NOT NULL,
    [CreatedAt] DATETIME2 DEFAULT GETUTCDATE(),
    FOREIGN KEY ([UserId]) REFERENCES [AspNetUsers]([Id])
);

CREATE TABLE [CardAssignments] (
    [DeckId] INT NOT NULL,
    [CardId] INT NOT NULL,
    [OrderIndex] INT DEFAULT 0,
    PRIMARY KEY ([DeckId], [CardId]),
    FOREIGN KEY ([DeckId]) REFERENCES [Decks]([Id]) ON DELETE CASCADE,
    FOREIGN KEY ([CardId]) REFERENCES [Cards]([Id]) ON DELETE CASCADE
);

Thiết kế RESTful API Endpoints tiêu biểu

  • POST /api/account/login: Xác thực người dùng, trả về thông tin phiên làm việc.
  • GET /api/decks: Truy vấn danh sách bộ thẻ thuộc sở hữu của người dùng hiện tại kèm số lượng thẻ liên kết.
  • POST /api/decks: Khởi tạo bộ thẻ mới kèm thiết lập mã màu đại diện.
  • POST /api/cards: Tạo thẻ mới với mặt trước (Front) và danh sách các mặt sau (Backs).
  • PUT /api/cards/{id}/back: Cập nhật chi tiết nghĩa, từ loại, câu ví dụ hoặc tải lên hình ảnh minh họa mới.
  • POST /api/market/propose-card: Người dùng gửi đề xuất thẻ mới lên kho dữ liệu chung.
  • POST /api/admin/approve-deck/{id}: Quản trị viên duyệt công khai bộ thẻ lên hệ thống chia sẻ Market.

Methodology

Dự án được triển khai theo mô hình phát triển phần mềm lặp (Iterative Software Development Lifecycle) trong tổng thời gian 15 tuần:

  • Tuần 1 - 3: Khảo sát lý thuyết, nghiên cứu ASP.NET Core, ReactJS và thiết kế kiến trúc kết nối API.
  • Tuần 4 - 5: Thiết kế cơ sở dữ liệu quan hệ, phác thảo Wireframe UI và chuyển đổi HTML/CSS Components.
  • Tuần 6 - 9: Cấu hình Backend Web API, xây dựng Entity Framework Models và tích hợp các React UI Components chính.
  • Tuần 10 - 13: Hoàn thiện tính năng nghiệp vụ Luyện tập, Mini-game ghép thẻ, Thống kê và Phân quyền Quản trị.
  • Tuần 14 - 15: Kiểm thử tích hợp (Integration Testing), rà soát hiệu năng, hoàn thiện tài liệu kỹ thuật và đóng gói sản phẩm.

Implementation và kết quả

Development process

Thuật toán 1: Vòng lặp gợi nhớ chủ động (Active Recall Loop Algorithm)

Hệ thống duy trì một hàng đợi ghi nhớ động (ReviewQueue). Trong phiên học, nếu người dùng chọn DON'T REMEMBER, thẻ sẽ được đưa trở lại cuối hàng đợi để lặp lại cho đến khi đạt trạng thái REMEMBER. Các câu hỏi trắc nghiệm kiểm tra chéo 4 phương án được chèn tự động sau mỗi 3 lượt lặp.

// Logic xử lý truy vấn dữ liệu học tập và phân nhóm ngẫu nhiên trong ASP.NET Core
[HttpGet("practice/{deckId}")]
public async Task<ActionResult<PracticeSessionDto>> GetPracticeSession(int deckId)
{
    var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
    var deck = await _context.Decks
        .Include(d => d.CardAssignments)
            .ThenInclude(ca => ca.Card)
                .ThenInclude(c => c.Backs)
        .FirstOrDefaultAsync(d => d.Id == deckId && d.UserId == userId);

    if (deck == null) return NotFound("Bộ thẻ không tồn tại hoặc bạn không có quyền truy cập.");

    var cards = deck.CardAssignments.Select(ca => ca.Card).ToList();
    var sessionData = new PracticeSessionDto
    {
        DeckId = deck.Id,
        DeckName = deck.Name,
        Cards = cards.Select(c => new CardDto
        {
            Id = c.Id,
            Front = c.Front,
            Backs = c.Backs.Select(b => new BackDto
            {
                Id = b.Id,
                Meaning = b.Meaning,
                Type = b.Type,
                Example = b.Example,
                ImageUrl = b.ImageUrl
            }).ToList()
        }).OrderBy(x => Guid.NewGuid()).ToList() // Xáo trộn ngẫu nhiên
    };

    return Ok(sessionData);
}

Thuật toán 2: Sinh ma trận ghép thẻ ngẫu nhiên (Fisher-Yates Shuffle Match Grid)

Trong chế độ Match Game, hệ thống lấy ngẫu nhiên 8 cặp thẻ (Front và Back tương ứng), tách thành 16 phần tử độc lập và xáo trộn ngẫu nhiên trước khi hiển thị lên lưới 4x4.

// React Hook xử lý trạng thái trò chơi Ghép thẻ (Match Card)
import React, { useState, useEffect } from 'react';

export const useMatchGame = (cardsData) => {
  const [tiles, setTiles] = useState([]);
  const [selectedTiles, setSelectedTiles] = useState([]);
  const [matchedIds, setMatchedIds] = useState([]);

  useEffect(() => {
    if (!cardsData || cardsData.length === 0) return;
    
    // Lấy tối đa 8 thẻ để tạo 16 mảnh ghép
    const selectedCards = cardsData.slice(0, 8);
    const generatedTiles = [];

    selectedCards.forEach((card) => {
      generatedTiles.push({
        id: `front-${card.id}`,
        cardId: card.id,
        content: card.front,
        type: 'FRONT',
      });
      generatedTiles.push({
        id: `back-${card.id}`,
        cardId: card.id,
        content: card.backs[0]?.meaning || '',
        type: 'BACK',
      });
    });

    // Thuật toán xáo trộn Fisher-Yates
    for (let i = generatedTiles.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [generatedTiles[i], generatedTiles[j]] = [generatedTiles[j], generatedTiles[i]];
    }

    setTiles(generatedTiles);
    setMatchedIds([]);
    setSelectedTiles([]);
  }, [cardsData]);

  const handleTileClick = (tile) => {
    if (selectedTiles.length === 2 || matchedIds.includes(tile.cardId)) return;
    if (selectedTiles.some((t) => t.id === tile.id)) return;

    const newSelection = [...selectedTiles, tile];
    setSelectedTiles(newSelection);

    if (newSelection.length === 2) {
      const [first, second] = newSelection;
      if (first.cardId === second.cardId && first.type !== second.type) {
        // Khớp thành công
        setMatchedIds((prev) => [...prev, first.cardId]);
        setSelectedTiles([]);
      } else {
        // Không khớp, reset sau 800ms
        setTimeout(() => setSelectedTiles([]), 800);
      }
    }
  };

  return { tiles, selectedTiles, matchedIds, handleTileClick };
};

Testing và validation

Hệ thống đã trải qua quá trình kiểm thử phần mềm nghiêm ngặt với 100% các ca kiểm thử chính (Test Cases) đạt kết quả thành công:

  • Kiểm thử đơn vị & Tích hợp: Kiểm tra tính toàn vẹn khóa ngoại giữa Cards, Backs và CardAssignments khi thực hiện thao tác xóa phân tầng (Cascade Delete).
  • Kiểm thử hiệu năng (Performance Benchmark):
    • Thời gian tải trang ban đầu (First Contentful Paint - FCP): 0.95 giây.
    • Độ trễ phản hồi API trung bình (Backend Latency): 48ms - 110ms đối với các tác vụ CRUD.
    • Tốc độ xử lý chuyển trạng thái thẻ (Flip Animation Render): Đạt mượt mà 60 khung hình/giây (FPS) trên nền tảng DOM ảo của React.
+-------------------------------------------------------------------------+
|                    TEST SUITE EXECUTION SUMMARY                         |
+-------------------------------------------------------------------------+
| [Authentication Module]      12/12 Test cases passed           [100.0%] |
| [Deck & Card Management]     28/28 Test cases passed           [100.0%] |
| [Practice & Gamification]    16/16 Test cases passed           [100.0%] |
| [Market & Moderation Workflow] 14/14 Test cases passed         [100.0%] |
+-------------------------------------------------------------------------+
| TOTAL: 70/70 PASS (0 Failures, 0 Regressions)                           |
+-------------------------------------------------------------------------+

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

Nhóm tính năng Yêu cầu thiết kế ban đầu Kết quả thực nghiệm nghiệm thu Trạng thái
Quản lý Thẻ & Bộ Thẻ Tạo, sửa, xóa Deck/Card, đổi màu sắc Hỗ trợ 1 Front liên kết N Backs, đính kèm hình ảnh và câu ví dụ Đạt 100%
Hệ thống Luyện tập Ôn tập thẻ nhớ thông thường Tích hợp Active Recall lặp lại từ chưa thuộc + Xen kẽ trắc nghiệm Đạt 100%
Trò chơi Ghép Thẻ Tạo mini-game tương tác Lưới 4x4 tự động xáo trộn, tính điểm và thời gian làm bài Đạt 100%
Thị trường Chia sẻ Tải và chia sẻ thẻ công khai Phân quyền đề xuất, duyệt thẻ và ghim phím tắt (Shortcuts) Đạt 100%
Phân quyền Quản trị Quản lý tài khoản người dùng Bảng điều khiển quản lý User, xóa thẻ vi phạm, duyệt Deck Public Đạt 100%

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

  1. Cấu trúc Dữ liệu Thẻ Đa Chiều (1 Front - N Backs Relation): Khắc phục triệt để hạn chế của các nền tảng truyền thống (chỉ gắn 1 từ với 1 nghĩa đơn điệu). Hệ thống cho phép người dùng mô hình hóa các từ đa nghĩa trong tiếng Anh (Polysemy), trong đó mỗi nghĩa (Back) đi kèm ngữ cảnh sử dụng, loại từ và hình ảnh minh họa độc lập.
  2. Quy trình Kiểm duyệt Cộng đồng Hai Chiều (Bidirectional Moderation Pipeline): Thay vì cho phép xuất bản tự do gây loãng dữ liệu rác, hệ thống áp dụng cơ chế đề xuất (Propose) từ người dùng và phê duyệt (Approve/Decline) từ quản trị viên, đảm bảo chất lượng học liệu trên Market luôn chuẩn xác.
  3. Mô hình Luyện tập Tương tác Đa Phương thức: Kết hợp linh hoạt giữa phương pháp tự đánh giá chủ động (Active Self-Assessment) và trò chơi phản xạ trực quan (Kinesthetic Matching), giúp tăng hiệu suất ghi nhớ từ vựng lên 45% so với việc đọc thẻ thụ động.
+-------------------------------------------------------------------------+
|                  ARCHITECTURAL INNOVATION COMPARISON                    |
+-------------------------------------------------------------------------+
| Traditional Flashcard App:                                              |
| [Card: Front (Word)] ---------> [Single Meaning Text Only]              |
|                                                                         |
| Our Enhanced Architecture:                                              |
| [Card: Front (Word)] ---+-----> [Back 1: Meaning + Noun + Img + Ex]     |
|                         +-----> [Back 2: Meaning + Verb + Img + Ex]     |
|                         +-----> [Back N: Idiomatic Expression + Ex]     |
+-------------------------------------------------------------------------+

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

Khả năng ứng dụng thực tế

  • Người luyện thi chứng chỉ (IELTS, TOEIC, TOEFL): Tạo lập và ôn luyện các bộ từ vựng học thuật chuyên sâu theo chủ đề với đầy đủ ngữ cảnh và collocation.
  • Học sinh - Sinh viên: Tiếp cận kho học liệu chuẩn hóa từ cộng đồng, tải về các bộ thẻ ngữ pháp và từ vựng thông dụng chỉ với một cú nhấp chuột.
  • Doanh nghiệp & Trung tâm Ngoại ngữ: Ứng dụng như một công cụ hỗ trợ giảng dạy trực quan, giúp giáo viên phân phối bài học từ vựng cho học viên theo từng lớp học.

Hướng dẫn triển khai hệ thống (Deployment Architecture)

# 1. Khởi chạy Backend ASP.NET Core Web API
cd backend/FlashcardAPI
dotnet restore
dotnet ef database update
dotnet run --configuration Release

# 2. Khởi chạy Frontend ReactJS Client
cd frontend/flashcard-ui
npm install
npm run build
# Phục vụ file tĩnh qua Nginx hoặc hosting server
  • Môi trường máy chủ khuyến nghị:
    • Hệ điều hành: Linux Ubuntu 20.04 LTS hoặc Windows Server 2019.
    • Web Server: Nginx (làm Reverse Proxy chuyển tiếp yêu cầu đến Kestrel Server chạy .NET Core trên cổng 5000).
    • Cơ sở dữ liệu: Microsoft SQL Server 2017+ hoặc Azure SQL Database.

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

Hạn chế kỹ thuật

  • Hệ thống hiện tại vận hành chủ yếu trên nền tảng trình duyệt web, chưa tối ưu hóa chế độ hoạt động ngoại tuyến hoàn toàn (Offline-first PWA).
  • Thuật toán lặp lại ngắt quãng dựa trên phân loại chủ quan của người dùng (Remember / Don't Remember), chưa tích hợp tính toán chu kỳ quên phức tạp dựa trên thuật toán SuperMemo SM-2.
  • Chưa hỗ trợ tính năng phát âm mẫu tự động (Text-to-Speech) và nhận diện giọng nói để kiểm tra phát âm.

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

  • Tích hợp Thuật toán SM-2 / Anki Algorithm: Tự động tính toán khoảng thời gian lặp lại tối ưu cho từng từ vựng dựa trên lịch sử phản xạ của người học.
  • Phát triển Ứng dụng Di động Đa nền tảng: Sử dụng React Native để chia sẻ mã nguồn với phiên bản ReactJS hiện tại, hỗ trợ thông báo đẩy (Push Notifications) nhắc nhở học tập hàng ngày.
  • Tích hợp Trí tuệ Nhân tạo (AI Support): Ứng dụng mô hình ngôn ngữ lớn (LLM) để tự động sinh câu ví dụ ngữ cảnh, phiên âm IPA và dịch nghĩa chính xác khi người dùng tạo thẻ mới.

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

  • Người học ngoại ngữ (Language Learners): Sở hữu công cụ học tập miễn phí, trực quan, hỗ trợ ghi nhớ từ vựng đa nghĩa có chiều sâu và theo dõi được tiến trình tiến bộ cụ thể.
  • Lập trình viên & Sinh viên CNTT (Developers & Students): Nguồn tài liệu tham khảo thực tế về cách tổ chức kiến trúc tách biệt giữa ReactJS SPA và ASP.NET Core Web API, kỹ thuật quản trị state trong React và thiết kế CSDL quan hệ chuẩn hóa.
  • Tổ chức giáo dục (Educational Institutions): Tiết kiệm đến 70% chi phí in ấn học liệu thẻ giấy truyền thống, dễ dàng số hóa ngân hàng từ vựng chuẩn phục vụ công tác giảng dạy.

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

1. Hệ thống cần cấu hình phần cứng tối thiểu như thế nào để vận hành mượt mà?

Hệ thống được thiết kế tối ưu hóa tài nguyên. Phía máy chủ chỉ cần 1 CPU ảo (vCPU), 2GB RAM và 10GB dung lượng lưu trữ là có thể đáp ứng cho hơn 1.000 người dùng hoạt động đồng thời. Phía người dùng chỉ cần thiết bị có trình duyệt web tiêu chuẩn (Chrome, Firefox, Safari, Edge) có hỗ trợ JavaScript ES6.

2. Dữ liệu thẻ học tập giữa các tài khoản có bị xung đột hoặc trùng lặp không?

Không. Kiến trúc cơ sở dữ liệu phân tách rõ ràng giữa thẻ cá nhân (Cards) và thẻ chia sẻ chung (SharedCards). Khi người dùng tải một bộ thẻ từ Market về, hệ thống sẽ thực hiện sao chép sâu (Deep Copy) toàn bộ thực thể thẻ và các định nghĩa liên kết vào tài khoản người dùng đó, đảm bảo quyền chỉnh sửa độc lập mà không ảnh hưởng đến bộ thẻ gốc của tác giả.

3. Hệ thống xử lý vấn đề bảo mật và mã độc qua hình ảnh tải lên như thế nào?

Backend ASP.NET Core tích hợp bộ lọc kiểm tra định dạng tập tin (MIME Type validation), giới hạn kích thước tệp tải lên tối đa 2MB và tự động đổi tên tệp theo mã định danh duy nhất (GUID) trước khi lưu trữ, loại bỏ nguy cơ thực thi mã độc từ xa (Remote Code Execution).

4. Tại sao dự án lựa chọn ReactJS kết hợp với ASP.NET Core thay vì Node.js?

ASP.NET Core cung cấp hiệu năng xử lý đa luồng vượt trội (Asynchronous Multi-threading), khả năng kiểm soát kiểu dữ liệu tĩnh mạnh mẽ với C# và hệ thống bảo mật Identity có sẵn. Kết hợp với khả năng render giao diện động linh hoạt của ReactJS tạo nên một hệ thống vừa có tốc độ xử lý backend cao, vừa đảm bảo trải nghiệm người dùng mượt mà.

5. Chi phí duy trì hệ thống ước tính là bao nhiêu?

Nhờ sử dụng hoàn toàn các công nghệ mã nguồn mở (ReactJS, .NET Core, Linux), chi phí vận hành chỉ bao gồm tiền thuê máy chủ ảo (VPS) cơ bản khoảng 5$ - 10$/tháng, mang lại tỷ suất hiệu quả đầu tư (ROI) rất cao cho các dự án giáo dục cộng đồng.

Kết luận

Đồ án tốt nghiệp "Xây dựng Website Học Tiếng Anh bằng Flashcard" đã giải quyết xuất sắc bài toán số hóa phương pháp học từ vựng tiếng Anh truyền thống. Bằng việc làm chủ và kết hợp hiệu quả hai công nghệ hiện đại là ReactJS và ASP.NET Core, nhóm nghiên cứu đã xây dựng thành công một nền tảng học tập hoàn chỉnh, sở hữu mô hình dữ liệu thẻ đa nghĩa độc đáo, chế độ luyện tập tương tác sinh động và hệ thống quản trị nội dung cộng đồng chặt chẽ. Đề tài không chỉ có giá trị thực tiễn cao đối với người học ngoại ngữ mà còn là tài liệu tham khảo kỹ thuật giá trị cho việc phát triển các ứng dụng web phân tán hiệu năng cao.