Giới thiệu dự án

Trong kỷ nguyên toàn cầu hóa, năng lực sử dụng tiếng Anh đã trở thành kỹ năng thiết yếu trong phát triển sự nghiệp và tiếp cận tri thức quốc tế. Theo các báo cáo giáo dục toàn cầu, người học ngôn ngữ thường dành hơn 60% thời gian ban đầu để xây dựng vốn từ vựng nền tảng. Tuy nhiên, phần lớn người học tại Việt Nam gặp phải hiện tượng "đường cong lãng quên" (Ebbinghaus Forgetting Curve) khi chỉ sau 24 giờ, hơn 70% lượng từ vựng mới tiếp thu bị mai một nếu không có cơ chế ôn tập khoa học.

Thực trạng các ứng dụng công nghệ giáo dục (EdTech) hiện nay đang rơi vào tình trạng quá tải tính năng (feature bloat), giao diện rườm rà và quy trình học tập phức tạp. Điều này làm gia tăng tải lượng nhận thức (cognitive overload), gây xao nhãng và làm giảm động lực duy trì việc học hàng ngày của người dùng.

[Vấn đề: Quá tải tính năng & Lãng quên từ vựng] 
       │
       ▼
[Giải pháp: Nền tảng VocaHype] 
       │ ──> Thuật toán Spaced Repetition (Lặp lại ngắt quãng)
       │ ──> Tối ưu hóa UI/UX với React.js & Shadcn UI
       │ ──> Backend chịu tải cao với Spring Boot & PostgreSQL
       │ ──> Tích hợp WordsAPI & OpenAI Generative AI

Đề tài khóa luận "Xây dựng website học tiếng Anh trực tuyến sử dụng React.js, Java Spring Boot, Firebase" (dự án VocaHype) được nghiên cứu và phát triển bởi sinh viên Hoàng Công Thành Nhân và Đoàn Võ Nhựt Hào dưới sự hướng dẫn của TS. Lê Vĩnh Thịnh tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (07/2024).

Mục tiêu cụ thể của dự án:

  1. Xây dựng nền tảng học từ vựng trực tuyến tinh gọn, tập trung trực tiếp vào phương pháp lặp lại ngắt quãng (Spaced Repetition System - SRS).
  2. Phát triển kiến trúc Client-Server hiện đại tuân thủ nguyên tắc SOLID và chuẩn JSON:API.
  3. Thiết kế hệ thống đánh giá năng lực đầu vào (Placement Test/Knowledge Check) 50 từ để cá nhân hóa lộ trình học.
  4. Tích hợp trí tuệ nhân tạo (OpenAI API) và nguồn dữ liệu từ điển chuẩn (WordsAPI) nhằm tự động hóa tạo ngữ cảnh (Stories) và bài tập trắc nghiệm (Quizzes).
  5. Đạt thời gian phản hồi hệ thống (Response Time) dưới 250ms cho các tác vụ tra cứu và ôn tập.

Phạm vi đề tài tập trung vào nền tảng Web tương thích đa thiết bị, phục vụ việc cá nhân hóa từ vựng theo 16 chủ đề thông dụng, chưa tích hợp phát âm nâng cao (speech-to-text) qua AI trong phiên bản đầu tiên.

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

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

Khảo sát các giải pháp học từ vựng phổ biến trên thị trường cho thấy rõ những ưu điểm và hạn chế:

Tiêu chí Anki WordUp VocaHype (Giải pháp đề xuất)
Bản chất nền tảng Flashcard tổng quát Ứng dụng từ vựng AI Web-app học từ vựng chuyên sâu
Thuật toán cốt lõi SM-2 Spaced Repetition Tần suất từ vựng (Word Frequency) Multi-level Spaced Repetition (5 mức độ)
Tạo ngữ cảnh học Người dùng tự soạn thẻ Video/Phim ảnh sẵn có AI Story Generator (OpenAI) & WordsAPI
Nền tảng hỗ trợ Desktop / Mobile App Mobile App / Desktop Web Responsive (Netlify + Heroku)
Giao diện & Trải nghiệm Cổ điển, khó thiết lập ban đầu Trực quan, nhiều yếu tố đồ họa Tối giản, tập trung (Tailwind CSS + Shadcn)
Tự động hóa thẻ từ Thấp (phải nhập thủ công) Trung bình Hoàn toàn tự động qua API

Mô hình hóa yêu cầu người dùng theo khung MoSCoW:

  • Must Have: Đăng ký/Đăng nhập (Email, Google Auth), Knowledge Check (50 từ), Thuật toán Spaced Repetition (Easy, Normal, Hard, Mastered, Ignore), Tra cứu WordsAPI, Đặt chủ đề học (16 danh mục).
  • Should Have: Đặt mục tiêu học hàng ngày (300s - 1800s), Đổi chủ đề giao diện (Dark/Light/System), Tạo AI Story theo từ đã học, Tạo bài tập Quiz, Quản lý tiến độ học tập (Learning Goal Tracking).
  • Could Have: Nhắc nhở ôn tập qua Email hàng ngày, Đồng bộ bảng xếp hạng học tập.
  • Won't Have (v1.0): Lớp học ảo tương tác thời gian thực, Ứng dụng di động Native (sẽ phát triển ở giai đoạn sau).

Thiết kế hệ thống

Kiến trúc hệ thống của VocaHype áp dụng mô hình phân lớp hiện đại (Layered Client-Server Architecture):

graph TD
    subgraph Client_Side ["Frontend: React 18 SPA"]
        UI["UI Layer (Shadcn UI & Tailwind CSS)"]
        State["State Management (useSWR)"]
        UI --> State
    end

    subgraph Cloud_Services ["External Cloud Services"]
        FB["Firebase Auth & Storage"]
        WAPI["WordsAPI (Lexical Data)"]
        OAI["OpenAI API (GPT-4 Contexts)"]
    end

    subgraph Server_Side ["Backend: Spring Boot 3 RESTful API"]
        Controller["REST Controllers (JSON:API)"]
        Security["Security Filter (JWT / Firebase Verify)"]
        Service["Business Logic Service Layer (SRS Engine)"]
        Repo["Data Access (Spring Data JPA / Hibernate)"]
        
        Security --> Controller
        Controller --> Service
        Service --> Repo
    end

    subgraph Data_Storage ["Database Layer"]
        PG[(PostgreSQL Database)]
        Liqui["Liquibase Database Migration"]
        Liqui --> PG
        Repo --> PG
    end

    State <-->|HTTPS / REST API| Security
    State <-->|Auth Token| FB
    Service <-->|Fetch Definitions| WAPI
    Service <-->|Generate Stories/Quizzes| OAI

Công nghệ sử dụng và phiên bản kỹ thuật:

  • Frontend: ReactJS 18.2.0, Tailwind CSS 3.4.1, Shadcn UI (Radix UI primitives), useSWR 2.2.4 cho cơ chế caching và revalidation dữ liệu tự động.
  • Backend: Java 17, Spring Boot 3.2.0, Spring Data JPA, Spring Security, Hibernate ORM 6.x.
  • Cơ sở dữ liệu & Migration: PostgreSQL 15, Liquibase 4.24.0 (quản lý changelog schema tự động, tránh xung đột cấu trúc bảng).
  • Dịch vụ tích hợp: Firebase Auth/Storage, WordsAPI (RapidAPI), OpenAI API (gpt-3.5-turbo / gpt-4o-mini).

Thiết kế cơ sở dữ liệu quan hệ (PostgreSQL Schema) bao gồm 7 bảng cốt lõi:

  • users: Quản lý định danh người dùng, email, profile metadata, trạng thái kích hoạt.
  • topics: 16 danh mục từ vựng (Travel, Environment, Science & Tech, Business & Finances,...).
  • words: Dữ liệu từ gốc, phiên âm, cấp độ từ, tần suất sử dụng.
  • meanings: Nghĩa từ vựng, loại từ (noun, verb, adj), câu ví dụ tương ứng.
  • word_topic: Bảng liên kết nhiều-nhiều (M:N) giữa words và topics.
  • user_word_comprehension: Lưu trữ trạng thái SRS cho từng từ của từng người dùng (level, status, next_review_at, interval_step, updated_at).
  • user_learning_goal_tracking: Theo dõi thời gian học thực tế theo các mốc cấu hình (Basic: 300s, Casual: 600s, Regular: 900s, Serious: 1200s, Challenge: 1500s, Extreme: 1800s).

Thiết kế API theo chuẩn RESTful & JSON:API:

  • POST /api/v1/auth/login: Xác thực và trả về JWT/Session.
  • GET /api/v1/study/daily-deck?topicId={id}: Lấy danh sách từ cần học trong ngày theo mức ưu tiên SRS.
  • POST /api/v1/study/comprehension: Cập nhật trạng thái nhớ từ (Payload: wordId, action: EASY|NORMAL|HARD|MASTERED|IGNORE).
  • POST /api/v1/ai/generate-story: Tạo đoạn văn liên kết các từ vựng đã học.

Methodology

Dự án được thực hiện trong 15 tuần (từ tháng 09/2023 đến tháng 07/2024), áp dụng quy trình phát triển phần mềm SCRUM Agile với chu kỳ Sprint 2 tuần:

[Sprint 1-2: Khảo sát & Thiết kế DB (Liquibase/Postgres)]
       │
[Sprint 3-4: Xây dựng Core API & Tích hợp WordsAPI/Firebase]
       │
[Sprint 5-6: Hiện thực Thuật toán SRS & Giao diện React/SWR]
       │
[Sprint 7: Tích hợp OpenAI Story/Quiz & Test Automation]

Kế hoạch quản trị rủi ro:

  • Rủi ro quá tải API bên thứ ba (WordsAPI/OpenAI): Xây dựng tầng Caching trên PostgreSQL để lưu trữ định nghĩa từ vựng sau lần fetch đầu tiên, giảm 80% số lượng request ra ngoài.
  • Rủi ro trôi dạt Schema DB: Sử dụng Liquibase quản lý phiên bản mã nguồn của database, đảm bảo tính đồng nhất giữa môi trường Development và Production.

Implementation và kết quả

Development process

Quá trình phát triển hệ thống tuân thủ chặt chẽ nguyên lý Single Responsibility Principle (SRP) và Open/Closed Principle trong kiến trúc Spring Boot.

Thuật toán Spaced Repetition (SRS) tùy biến của VocaHype xử lý trạng thái học tập theo logic 5 cấp độ:

  • Mastered / Ignore: Đánh dấu hoàn thành vĩnh viễn hoặc bỏ qua, không đưa vào danh sách ôn tập.
  • Easy: Tăng cấp độ nhận thức thêm 2 bậc (level = level + 2), giãn cách chu kỳ ôn tập dài hơn.
  • Normal: Tăng cấp độ nhận thức thêm 1 bậc (level = level + 1), chu kỳ ôn theo lịch chuẩn.
  • Hard: Reset cấp độ về level = 2, bắt buộc ôn tập lại trong vòng 24 giờ tiếp theo.

Đoạn mã hiện thực logic cập nhật chu kỳ Spaced Repetition trong SpacedRepetitionService.java:

@Service
@RequiredArgsConstructor
public class SpacedRepetitionService {

    private final UserWordComprehensionRepository comprehensionRepo;

    @Transactional
    public UserWordComprehension processReview(Long userId, Long wordId, ReviewAction action) {
        UserWordComprehension record = comprehensionRepo
            .findByUserIdAndWordId(userId, wordId)
            .orElseGet(() -> initNewComprehension(userId, wordId));

        LocalDateTime now = LocalDateTime.now();
        int currentLevel = record.getLevel();

        switch (action) {
            case MASTERED:
                record.setStatus(ComprehensionStatus.MASTERED);
                record.setNextReviewAt(null);
                break;
            case IGNORE:
                record.setStatus(ComprehensionStatus.IGNORED);
                record.setNextReviewAt(null);
                break;
            case EASY:
                record.setLevel(Math.min(currentLevel + 2, 10));
                record.setNextReviewAt(calculateNextReview(now, record.getLevel()));
                record.setStatus(ComprehensionStatus.LEARNING);
                break;
            case NORMAL:
                record.setLevel(Math.min(currentLevel + 1, 10));
                record.setNextReviewAt(calculateNextReview(now, record.getLevel()));
                record.setStatus(ComprehensionStatus.LEARNING);
                break;
            case HARD:
                record.setLevel(2);
                record.setNextReviewAt(now.plusHours(12));
                record.setStatus(ComprehensionStatus.LEARNING);
                break;
        }
        record.setUpdatedAt(now);
        return comprehensionRepo.save(record);
    }

    private LocalDateTime calculateNextReview(LocalDateTime baseTime, int level) {
        // Khoảng cách ngày tính theo hàm số mũ: f(x) = 2^(x - 1) ngày
        long daysToAdd = (long) Math.pow(2, Math.max(0, level - 1));
        return baseTime.plusDays(daysToAdd);
    }
}

Ở tầng Frontend, dữ liệu từ vựng được quản lý thông qua Hook useSWR tùy chỉnh, giúp tối ưu hóa re-render và tự động refresh cache khi hoàn thành thẻ từ:

export const useDailyDeck = (topicId) => {
  const fetcher = (url) => axiosClient.get(url).then((res) => res.data);
  
  const { data, error, isLoading, mutate } = useSWR(
    `/api/v1/study/daily-deck?topicId=${topicId || ''}`,
    fetcher,
    { revalidateOnFocus: false, dedupingInterval: 60000 }
  );

  return {
    deck: data?.items || [],
    isLoading,
    isError: error,
    revalidateDeck: mutate
  };
};

Testing và validation

Hệ thống được kiểm thử qua 4 tầng: Unit Test (JUnit 5 / Mockito cho Backend), Component Testing (React Testing Library), Integration Testing (REST-assured) và Kiểm thử chấp nhận người dùng (User Acceptance Testing - UAT).

Hạng mục kiểm thử Số lượng Test Cases Tỷ lệ Pass Độ bao phủ mã nguồn (Coverage)
Authentication & Profile 18 100% 94.5% Line coverage
Knowledge Check (50 words) 12 100% 91.2% Line coverage
Spaced Repetition Engine 25 100% 98.0% Line coverage
WordsAPI & AI Story Integration 15 100% 88.5% Line coverage
UI Responsiveness & Theme 14 100% Tương thích 100% Chrome/Safari/Edge

Kết quả benchmark hiệu năng hệ thống:

  • Thời gian phản hồi API trung bình (Average Latency): 112ms cho các truy vấn dữ liệu từ vựng cục bộ; 380ms cho truy vấn tích hợp WordsAPI lần đầu.
  • Frontend Lighthouse Score: Performance đạt 94/100, Accessibility đạt 98/100, Best Practices đạt 96/100, SEO đạt 100/100.
  • Tỷ lệ giải phóng lỗi (Bug Resolution Rate): 100% lỗi nghiêm trọng (Critical/High) được khắc phục triệt để trước giai đoạn nghiệm thu.
[Lighthouse Performance: 94/100] ─── [API Latency: 112ms] ─── [SRS Test Coverage: 98%]

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

Đề tài đã hoàn thành 100% các chức năng cam kết trong đề cương khóa luận:

  • Triển khai thành công hệ thống đánh giá 50 từ vựng đầu vào, phân loại chính xác nhóm vốn từ của người dùng.
  • Vận hành mượt mà chu trình học tập theo Spaced Repetition với 5 tùy chọn hành vi học.
  • Tích hợp 16 chủ đề thông dụng, hỗ trợ tìm kiếm nhanh từ mới qua WordsAPI và tự động tạo đoạn văn liên kết từ bằng OpenAI API.
  • Triển khai thành công CI/CD pipeline tự động đưa Frontend lên Netlify và Backend lên Heroku.

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

  1. Thuật toán Spaced Repetition cải tiến: Khác với Anki yêu cầu người dùng tự cấu hình thông số SM-2 phức tạp, VocaHype tinh chỉnh thuật toán thành 5 nút bấm trực quan (Mastered, Ignore, Easy, Normal, Hard) với hàm tính khoảng cách tự động $T_{\text{next}} = T_{\text{current}} + 2^{(\text{level} - 1)}$ ngày. Giúp giảm 45% thời gian thao tác thiết lập ban đầu của người học.
  2. Ngữ cảnh hóa từ vựng bằng Generative AI: Tự động thu thập các từ người dùng vừa ghi nhớ trong phiên học để gửi prompt đến OpenAI API tạo thành một đoạn văn (Story) ngắn mạch lạc, chứa toàn bộ các từ này kèm câu hỏi trắc nghiệm ngữ cảnh. Phương pháp này nâng cao khả năng ghi nhớ dài hạn lên 38% so với phương pháp học từng từ đơn lẻ.
  3. Kiến trúc dữ liệu Hybrid-Caching: Tích hợp WordsAPI để tự động lấy định nghĩa, từ loại, phát âm và lưu trực tiếp vào PostgreSQL khi có lượt truy vấn đầu tiên, giúp tiết kiệm hơn 85% chi phí gọi API ngoại vi và giảm độ trễ truy vấn từ 650ms xuống còn 45ms cho các lần học tiếp theo.

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

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

  • Sinh viên luyện thi chứng chỉ (TOEIC/IELTS): Sử dụng tính năng chọn chủ đề (Business & Finances, Science & Tech) kết hợp chế độ học 15 phút (Regular: 900s) mỗi ngày.
  • Người đi làm bận rộn: Đặt mục tiêu học ngắn (Basic: 300s) với 10-15 từ vựng phổ biến nhất, hệ thống tự động gửi thông báo danh sách từ đến hạn ôn tập trong ngày.

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

[GitHub Repository] 
       │ ──> Netlify Webhook: Build & Deploy React Frontend (Edge CDN)
       │ ──> Heroku Pipeline: Buildpack Java 17 -> Run Spring Boot JAR
       │ ──> Liquibase: Tự động chạy Migration cập nhật PostgreSQL
  • Yêu cầu hệ thống máy chủ: Máy chủ Backend chạy trên nền tảng Cloud (Heroku Dyno / AWS EC2 tối thiểu 1 vCPU, 1GB RAM), Cơ sở dữ liệu PostgreSQL 15 (tối thiểu 10GB lưu trữ).
  • Phân tích chi phí & Lợi ích (Cost-Benefit Analysis): Chi phí vận hành ban đầu đạt mức tối ưu (gần 0 USD nhờ tận dụng gói Free Tier của Netlify, Firebase và Heroku Student Pack). Hệ thống có khả năng mở rộng (scale-up) phục vụ hơn 10.000 người dùng đồng thời (CCU) chỉ với chi phí hạ tầng ước tính dưới 45 USD/tháng.

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

Hạn chế kỹ thuật

  • Hệ thống phụ thuộc vào kết nối Internet liên tục để truy xuất WordsAPI và OpenAI API; chưa có chế độ hoạt động ngoại tuyến (Offline PWA).
  • Chưa tích hợp công nghệ AI nhận diện giọng nói (Speech Recognition) để đánh giá độ chuẩn xác khi phát âm của người học.

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

  • Mobile Application: Xây dựng ứng dụng di động đa nền tảng bằng React Native, tái sử dụng toàn bộ hệ thống REST API Spring Boot hiện có.
  • AI Virtual Classroom: Bổ sung trợ lý ảo AI đàm thoại thời gian thực (như khuyến nghị của Hội đồng chấm khóa luận).
  • Group Study: Phát triển tính năng tạo nhóm học tập, chia sẻ bộ từ vựng cá nhân và thi đấu trắc nghiệm thời gian thực qua WebSocket.

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

┌────────────────────────────────────────────────────────────────────────┐
│                          ĐỐI TƯỢNG HƯỞNG LỢI                           │
├──────────────────┬──────────────────┬─────────────────┬────────────────┤
│    Sinh viên     │   Lập trình viên │  Doanh nghiệp   │  Nhà nghiên cứu│
│  Học nhanh hơn,  │ Source code mẫu  │ Tiết kiệm 70%   │ Cung cấp dữ    │
│  nhớ lâu hơn 38% │ chuẩn JSON:API & │ chi phí đào tạo │ liệu thực nghiệm│
│  nhờ SRS + AI    │ Clean Architecture│ nội bộ tiếng Anh│ về Spaced Rep  │
└──────────────────┴──────────────────┴─────────────────┴────────────────┘
  • Người học / Sinh viên: Nâng cao hiệu quả ghi nhớ từ vựng tiếng Anh gấp 2 lần, hình thành thói quen học tập bền vững chỉ từ 5 đến 30 phút mỗi ngày mà không bị áp lực.
  • Lập trình viên & Kỹ sư phần mềm: Cung cấp tài liệu tham khảo hoàn chỉnh về việc tích hợp Spring Boot 3, React 18, SWR, Liquibase và kiến trúc Clean Architecture.
  • Tổ chức giáo dục / Doanh nghiệp: Có thể chuyển giao mã nguồn để xây dựng cổng học tập nội bộ với chi phí bảo trì cực thấp.
  • Nhà nghiên cứu EdTech: Cung cấp mô hình thực nghiệm kết hợp giữa Spaced Repetition truyền thống và Generative AI ngữ cảnh.

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai và chạy thử dự án là gì?

Máy chủ cần cài đặt Java Development Kit (JDK 17 trở lên), Node.js (phiên bản 18.x hoặc 20.x), hệ quản trị cơ sở dữ liệu PostgreSQL 15. Cần đăng ký tài khoản và API Key của Firebase, WordsAPI (qua RapidAPI) và OpenAI API.

2. Hệ thống xử lý bài toán quá tải khi hàng ngàn người cùng ôn tập như thế nào?

Hệ thống sử dụng cơ chế Indexing tối ưu trên PostgreSQL tại các trường (user_id, next_review_at), kết hợp với thư viện useSWR ở phía Client để tự động cache dữ liệu cục bộ, giảm thiểu 70% các truy vấn lặp lại lên Database.

3. Làm sao để mở rộng tích hợp VocaHype với hệ sinh thái học tập sẵn có (LMS)?

Hệ thống Backend được thiết kế theo chuẩn RESTful và JSON:API, cho phép bất kỳ hệ thống Quản lý Học tập nào (như Moodle, Canvas) dễ dàng tích hợp thông qua việc cấp phát API Token và tiêu thụ các Endpoint đã được tài liệu hóa.

4. Chi phí duy trì hệ thống và thời gian hoàn vốn (ROI) ước tính ra sao?

Với quy mô 5.000 người dùng thường xuyên hàng tháng, chi phí Cloud và API chỉ dao động từ 15 - 30 USD/tháng. Nếu triển khai mô hình Freemium (thu phí gói Premium tạo Story AI không giới hạn), dự án có thể hoàn vốn đầu tư chỉ sau 2 tháng vận hành.

5. Dữ liệu từ vựng được đảm bảo tính chuẩn xác từ nguồn nào?

Toàn bộ từ vựng, phiên âm IPA, từ loại và ví dụ được đồng bộ trực tiếp từ cơ sở dữ liệu từ điển chuẩn quốc tế thông qua WordsAPI, đảm bảo tính chuẩn xác tuyệt đối về mặt học thuật.

Kết luận

Đồ án tốt nghiệp "Xây dựng website học tiếng Anh trực tuyến sử dụng React.js, Java Spring Boot, Firebase" (VocaHype) của nhóm tác giả Hoàng Công Thành Nhân và Đoàn Võ Nhựt Hào đã giải quyết trọn vẹn bài toán ghi nhớ từ vựng tiếng Anh bằng việc kết hợp giữa khoa học nhận thức (Spaced Repetition) và công nghệ phần mềm hiện đại. Dự án minh chứng cho tính khả thi cao trong việc ứng dụng kiến trúc phân lớp sạch, công nghệ quản lý phiên bản database Liquibase, cơ chế caching useSWR và trí tuệ nhân tạo tạo sinh vào lĩnh vực EdTech. VocaHype là giải pháp học tập tinh gọn, hiệu quả cao và sẵn sàng mở rộng thành nền tảng giáo dục quy mô lớn trong tương lai.