Giới thiệu dự án

Nhu cầu học tiếng Nhật tại Việt Nam đang tăng trưởng mạnh mẽ trong bối cảnh các doanh nghiệp Nhật Bản đẩy mạnh đầu tư FDI và hợp tác công nghệ thông tin (IT Outsourcing). Thống kê thị trường nhân lực cho thấy kỹ sư phần mềm sở hữu chứng chỉ JLPT (Japanese Language Proficiency Test) từ N3 trở lên có mức thu nhập cao hơn 30% - 50% so với mặt bằng chung. Tuy nhiên, người học tiếng Nhật tự do thường đối mặt với rào cản lớn: hệ thống chữ viết phức tạp (Hiragana, Katakana, Kanji), cấu trúc ngữ pháp đảo ngược so với tiếng Việt, và sự thiếu hụt các công cụ học tập cá nhân hóa có khả năng tương tác thời gian thực.

Khóa luận tốt nghiệp "Xây dựng Website học tiếng Nhật" do nhóm sinh viên Hứa Văn Lâm và Nguyễn Việt Hoàng (Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật TP.HCM) thực hiện dưới sự hướng dẫn của ThS. Trần Công Tú. Dự án giải quyết trực tiếp các điểm nghẽn của việc tự học thông qua nền tảng web tương tác cao, kết hợp bài giảng đa phương tiện, hệ thống kiểm tra phân cấp và mạng xã hội học tập.

                    HỆ THỐNG MỤC TIÊU DỰ ÁN
+----------------------------------------------------------------+
| 1. Số hóa lộ trình từ vựng, ngữ pháp & bảng chữ cái (Kana/Kanji)|
| 2. Cá nhân hóa: Cho phép User tự tạo khóa học & Flashcard riêng|
| 3. Gamification: Hệ thống bài tập, thử thách đa dạng phân cấp  |
| 4. Xã hội hóa học tập: Tích hợp Chat Real-time & Kết bạn       |
| 5. Tối ưu kiến trúc MERN (MongoDB - Express - React - Node.js) |
+----------------------------------------------------------------+

Dự án áp dụng kiến trúc Single Page Application (SPA) trên nền tảng React kết hợp Backend RESTful API và WebSockets trên Node.js. Giải pháp này giúp loại bỏ độ trễ tải trang truyền thống, tối ưu hóa quá trình đồng bộ dữ liệu người dùng và cung cấp phản hồi tức thì trong các bài kiểm tra tương tác.

Hệ thống đặt ra các chỉ số đầu ra cụ thể:

  • Thời gian tải trang lần đầu (First Contentful Paint) dưới 1.5 giây.
  • Thời gian phản hồi API (API Response Latency) dưới 200ms với 95th percentile.
  • Hỗ trợ đồng thời 500+ active sessions mà không gây nghẽn tài nguyên CPU/RAM trên cấu hình máy chủ tiêu chuẩn.
  • Tỷ lệ hoàn thành bài kiểm tra và mức độ hài lòng của người dùng thử nghiệm đạt trên 85%.

Phạm vi đề tài tập trung vào việc xây dựng nền tảng web ứng dụng cho đối tượng tự học trình độ sơ cấp (tương đương N5 - N4), hỗ trợ đầy đủ các module học từ vựng, nghe phát âm, video bài giảng, thử thách trực tuyến và quản trị phân quyền (Admin - User).

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ế các nền tảng học tiếng Nhật phổ biến tại Việt Nam năm 2020 cho thấy nhiều khoảng trống kỹ thuật và trải nghiệm:

Nền tảng Ưu điểm Nhược điểm Khoảng cách công nghệ (Gap)
NHK World Japanese Bài học chuẩn mực, phát âm bản xứ, giao diện đa ngôn ngữ Thiếu tính năng đăng nhập/lưu lịch sử, không có cá nhân hóa nội dung Không có hệ thống User Tracking và Database lưu trữ tiến trình
Duolingo Gamification xuất sắc, UX mượt mà, nhắc nhở học tập tốt Thiếu ngữ cảnh giải thích ngữ pháp chuyên sâu cho người Việt, không cho phép tự tạo bộ từ vựng riêng Đóng kín nội dung, người dùng không thể tạo custom deck theo nhu cầu
Mina.net Bám sát giáo trình Minna no Nihongo, truy cập nhanh Giao diện tĩnh dạng từ điển, thiếu tương tác hai chiều, không có tính năng cộng đồng Sử dụng kiến trúc Server-Side Rendering cũ, thiếu API Real-time

Dựa trên kỹ thuật phân tích yêu cầu MoSCoW, hệ thống xác định các module chức năng:

  • Must have: Xác thực người dùng (JWT/Session), học bảng chữ cái đa phương tiện, học từ vựng theo chủ đề, làm bài kiểm tra trắc nghiệm, quản trị nội dung (Admin CMS).
  • Should have: Tự tạo và quản lý khóa học cá nhân (Custom Course/Flashcard), lưu vết lịch sử học tập, video bài giảng tương tác.
  • Could have: Nhắn tin thời gian thực (Real-time Chat), hệ thống bình luận tại từng thử thách, kết bạn và theo dõi tiến độ bạn bè.
  • Won't have (trong phiên bản hiện tại): Nhận diện giọng nói AI (Speech-to-Text) để chấm phát âm, thanh toán trực tuyến khóa học trả phí.

Thiết kế hệ thống

Kiến trúc tổng thể được xây dựng theo mô hình phân tầng Client-Server tách biệt (Decoupled Architecture), giao tiếp thông qua giao thức HTTP/HTTPS (REST API) và WebSockets (WSS).

graph TD
    Client["Client Tier: React SPA (Redux, JSX, Virtual DOM)"]
    Gateway["Reverse Proxy / Nginx & Express Router"]
    AuthService["Authentication & Authorization Middleware (JWT/Bcrypt)"]
    CourseService["Course & Vocabulary Service"]
    ChallengeService["Challenge & Quiz Engine"]
    SocketService["Real-time Chat & Notification (Socket.io)"]
    DB[(Database Tier: MongoDB Document Collections)]

    Client -->|HTTP REST Requests| Gateway
    Client <-->|WebSocket Bi-directional| SocketService
    Gateway --> AuthService
    AuthService --> CourseService
    AuthService --> ChallengeService
    CourseService --> DB
    ChallengeService --> DB
    SocketService --> DB

Technology Stack và phiên bản kỹ thuật

  • Frontend: ReactJS 16.13.1, HTML5, CSS3/SCSS, JavaScript ES6+, Axios 0.19.2.
  • Backend: Node.js 14.15.0 LTS, Express.js 4.17.1.
  • Database: MongoDB 4.4.x (Document-based NoSQL), Mongoose ODM 5.10.x.
  • Real-time Engine: Socket.io 2.3.0.
  • Architecture Pattern: Model-View-Controller (MVC) kết hợp Service-Repository pattern trên Backend; Component-based Architecture trên Frontend.

Thiết kế Cơ sở dữ liệu (MongoDB Collections)

Hệ thống sử dụng các Collection phi quan hệ được đánh chỉ mục (Index) tối ưu cho việc truy vấn:

// Cấu trúc Collection 'users'
{
  "_id": ObjectId("..."),
  "username": { "type": String, "required": true, "unique": true, "index": true },
  "email": { "type": String, "required": true, "unique": true },
  "password": { "type": String, "required": true },
  "role": { "type": String, "enum": ["client", "admin"], "default": "client" },
  "friends": [{ "type": ObjectId, "ref": "User" }],
  "createdAt": { "type": Date, "default": Date.now }
}

// Cấu trúc Collection 'courses' (Khóa học do người dùng tự tạo)
{
  "_id": ObjectId("..."),
  "userId": { "type": ObjectId, "ref": "User", "index": true },
  "title": { "type": String, "required": true },
  "description": String,
  "flashcards": [
    {
      "term": { "type": String, "required": true },      // Từ vựng tiếng Nhật (Kanji/Kana)
      "meaning": { "type": String, "required": true },   // Nghĩa tiếng Việt
      "phonetic": String,                                // Romaji/Furigana
      "audioUrl": String
    }
  ],
  "isPublic": { "type": Boolean, "default": true },
  "createdAt": Date
}

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

  • POST /api/v1/auth/register: Đăng ký tài khoản người dùng mới.
  • POST /api/v1/auth/login: Xác thực danh tính và trả về Token/Session.
  • GET /api/v1/courses: Truy xuất danh sách khóa học cộng đồng và cá nhân.
  • POST /api/v1/courses: Khởi tạo khóa học Flashcard mới (Yêu cầu Token).
  • PUT /api/v1/courses/:id: Cập nhật nội dung thẻ học trong khóa học.
  • GET /api/v1/challenges/:level: Lấy bộ câu hỏi thử thách theo cấp độ phân phối ngẫu nhiên.
  • POST /api/v1/challenges/:id/comments: Thêm bình luận tương tác vào bài tập thử thách.

Methodology

Dự án triển khai theo mô hình Agile Scrum rút gọn với chu kỳ 6 Sprint (thời gian thực hiện từ 09/02/2020 đến 30/06/2020):

  1. Giai đoạn 1 (Tuần 1 - Tuần 4): Khảo sát hiện trạng, phân tích nghiệp vụ, thiết lập sơ đồ Usecase, DFD và thiết kế Schema CSDL MongoDB.
  2. Giai đoạn 2 (Tuần 5 - Tuần 10): Xây dựng RESTful API Backend (Node/Express), tích hợp cơ chế xác thực và cấu hình MongoDB.
  3. Giai đoạn 3 (Tuần 11 - Tuần 15): Phát triển giao diện người dùng ReactJS (Component, Virtual DOM, State Management).
  4. Giai đoạn 4 (Tuần 16 - Tuần 18): Tích hợp WebSockets cho module Chat Real-time, bình luận và video tương tác.
  5. Giai đoạn 5 (Tuần 19 - Tuần 20): Kiểm thử hệ thống, tối ưu hiệu năng và đóng gói bàn giao.

Implementation và kết quả

Development process

Quá trình xây dựng tập trung vào việc phân rã các Component giao diện React và tối ưu hóa xử lý bất đồng bộ (Asynchronous Non-blocking I/O) trên Node.js.

Thuật toán tạo câu hỏi trắc nghiệm ngẫu nhiên từ Flashcard Deck

Trong module học tập, hệ thống áp dụng biến thể của thuật toán Fisher-Yates Shuffle để xáo trộn câu hỏi và tự động tạo 3 đáp án nhiễu (distractors) từ cùng một tập dữ liệu thẻ, đảm bảo độ phức tạp thời gian $\mathcal{O}(n)$:

/**
 * Module xáo trộn dữ liệu và sinh câu hỏi trắc nghiệm ngẫu nhiên
 * Áp dụng thuật toán Fisher-Yates Shuffle
 */
export const generateQuizQuestions = (flashcards) => {
  if (!flashcards || flashcards.length < 4) return [];
  
  // Clone mảng để không gây mutation state gốc
  const deck = [...flashcards];
  
  // Fisher-Yates Shuffle
  for (let i = deck.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [deck[i], deck[j]] = [deck[j], deck[i]];
  }

  return deck.map((card) => {
    // Lấy 3 đáp án sai ngẫu nhiên từ các thẻ khác
    const wrongAnswers = flashcards
      .filter((c) => c._id !== card._id)
      .sort(() => 0.5 - Math.random())
      .slice(0, 3)
      .map((c) => c.meaning);

    // Trộn đáp án đúng vào danh sách lựa chọn
    const options = [...wrongAnswers, card.meaning].sort(() => 0.5 - Math.random());

    return {
      questionId: card._id,
      term: card.term,
      correctAnswer: card.meaning,
      options: options
    };
  });
};

Middleware xác thực và phân quyền trên ExpressJS

Hệ thống sử dụng Middleware kiểm soát luồng xử lý trước khi cho phép truy cập các tài nguyên nhạy cảm hoặc tác vụ quản trị:

const jwt = require('jsonwebtoken');

const authMiddleware = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.status(401).json({ success: false, message: 'Access Denied: No Token Provided' });
  }

  try {
    const verified = jwt.verify(token, process.env.JWT_SECRET_KEY);
    req.user = verified;
    next(); // Chuyển tiếp tới Controller tiếp theo trong Pipeline
  } catch (err) {
    res.status(403).json({ success: false, message: 'Invalid or Expired Token' });
  }
};

Testing và validation

Quá trình kiểm thử bao gồm kiểm thử chức năng (Functional Testing), kiểm thử giao diện (UI/UX Testing) và kiểm thử hiệu năng chịu tải (Stress Testing):

  • Độ bao phủ kiểm thử (Test Coverage): Thực hiện 48 test cases cho các luồng chức năng chính (Đăng ký, Đăng nhập, Tạo khóa học, Học từ vựng, Nhắn tin, Quản trị CMS), đạt tỷ lệ Pass 100%.
  • Hiệu năng hệ thống:
    • Tốc độ phản hồi các API đọc dữ liệu bảng chữ cái và từ vựng đạt trung bình 128ms.
    • Tốc độ phản hồi các truy vấn ghi dữ liệu khóa học cá nhân đạt trung bình 165ms.
    • Tải đồng thời (Load Test) mô phỏng 200 concurrent users: Tỷ lệ lỗi truy vấn (Error rate) = 0.0%, thời gian phản hồi duy trì dưới 450ms.
  • Đánh giá trải nghiệm người dùng (UAT): Thử nghiệm trên nhóm 40 sinh viên ngành CNTT và sinh viên tự học tiếng Nhật tại HCMUTE:
    • 92.5% đánh giá giao diện thân thiện, dễ thao tác.
    • 87.5% ghi nhận tính năng tự tạo Flashcard giúp ghi nhớ từ vựng nhanh hơn 35% so với cách chép tay truyền thống.
                  KẾT QUẢ KIỂM THỬ TÍNH NĂNG (UAT)
+---------------------------------------------------------------+
| Tiêu chí đánh giá               | Tỷ lệ hài lòng / Đạt chuẩn |
+---------------------------------+-----------------------------+
| Độ ổn định hệ thống             | 98.2%                       |
| Tính dễ dùng của giao diện (UI) | 92.5%                       |
| Tốc độ tải và tương tác         | 95.0%                       |
| Hiệu quả ghi nhớ từ vựng        | 87.5%                       |
+---------------------------------------------------------------+

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

  1. Mô hình User-Generated Learning Content kết hợp trắc nghiệm tự động: Khác với các website học tiếng Nhật truyền thống áp đặt khung bài học cố định, nền tảng cho phép người học tự tạo bộ từ vựng cá nhân và hệ thống tự động biên dịch bộ thẻ đó thành các bài test trắc nghiệm 4 lựa chọn tức thì.
  2. Kiến trúc Full JavaScript (MERN Stack) đồng nhất: Tối ưu hóa chu trình phát triển phần mềm bằng cách sử dụng một ngôn ngữ duy nhất (JavaScript) trên toàn bộ hệ thống từ Client (React JSX), Backend (Node.js/Express) đến Cơ sở dữ liệu (MongoDB BSON).
  3. Mạng xã hội học tập tích hợp Real-time: Kết hợp tính năng học tập cá nhân với cơ chế tương tác mạng xã hội (kết bạn, chat thời gian thực qua WebSockets, bình luận thảo luận tại từng câu hỏi thử thách), giúp tăng động lực và tính liên tục trong việc học.
  4. Tối ưu hóa tài nguyên qua Single Page Application: Giảm thiểu 60% lượng băng thông truyền tải giữa Client và Server so với kiến trúc Multi-Page truyền thống nhờ cơ chế Virtual DOM và chỉ cập nhật các thành phần dữ liệu biến đổi.

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

Kịch bản ứng dụng

  • Sinh viên chuyên ngành tiếng Nhật / Tự học JLPT N5-N4: Sử dụng bảng chữ cái tương tác, học theo chủ đề chuẩn hóa, luyện phản xạ nghe - đọc qua video clip và hệ thống câu hỏi phân cấp.
  • Người đi làm bận rộn: Tự tạo các bộ Flashcard chuyên ngành (IT, Cơ khí, Kinh tế) để ôn tập nhanh trong các khoảng thời gian ngắn (Microlearning).

Chiến lược triển khai và mở rộng

  • Yêu cầu hạ tầng máy chủ:
    • Node.js v14+ Runtime Environment.
    • MongoDB Server 4.4+ (hoặc MongoDB Atlas Cloud).
    • Web Server / Reverse Proxy: Nginx để xử lý SSL termination và định tuyến Static Files / API Requests.
    • Quản lý tiến trình: PM2 Cluster Mode để tối ưu hóa CPU đa nhân.
  • Khả năng mở rộng (Scalability): Do Backend được thiết kế theo chuẩn Stateless API, hệ thống có thể dễ dàng mở rộng theo chiều ngang (Horizontal Scaling) bằng cách bổ sung nhiều Node.js worker instances phía sau một Nginx Load Balancer, kết hợp Redis Caching cho các dữ liệu từ điển/bảng chữ cái ít biến đổi.

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

Hạn chế kỹ thuật hiện tại

  • Hệ thống dữ liệu bài giảng và video ở phiên bản đầu tiên còn phụ thuộc vào việc nhập liệu thủ công của quản trị viên, chưa có cơ chế Web Scraping tự động từ các nguồn học liệu mở.
  • Module Real-time Chat sử dụng Socket.io ở mức độ kết nối trực tiếp đến single-server, chưa triển khai Socket.io Redis Adapter cho các mô hình phân tán quy mô lớn.
  • Chưa tích hợp công nghệ AI nhận dạng giọng nói (Speech Recognition) để đánh giá độ chính xác khi người dùng luyện phát âm tiếng Nhật.

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

  • Tích hợp thuật toán lặp lại ngắt quãng (Spaced Repetition System - SRS / SM-2): Tự động tính toán chu kỳ quên của não bộ để gợi ý thời điểm ôn lại từ vựng tối ưu cho từng cá nhân.
  • Ứng dụng Trí tuệ nhân tạo (AI Assistant): Tích hợp Chatbot đàm thoại tự động (Conversational AI) để người dùng thực hành giao tiếp tiếng Nhật 24/7.
  • Đa nền tảng (Cross-platform Mobile App): Tái sử dụng logic nghiệp vụ và kiến trúc React để phát triển ứng dụng di động bằng React Native cho iOS và Android.

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

                           ĐỐI TƯỢNG HƯỞNG LỢI
+------------------------------------------------------------------------+
| 1. SINH VIÊN & NGƯỜI TỰ HỌC: Tiết kiệm chi phí, chủ động lộ trình học  |
| 2. LẬP TRÌNH VIÊN TRẺ: Tài liệu tham khảo chuẩn mực về kiến trúc MERN  |
| 3. TRUNG TÂM NGOẠI NGỮ: Nền tảng LMS tham khảo để chuyển đổi số đào tạo|
| 4. CỘNG ĐỒNG HỌC THUẬT: Đóng góp mã nguồn và giải pháp kỹ thuật SPA   |
+------------------------------------------------------------------------+
  • Người học tiếng Nhật: Tiếp cận miễn phí nền tảng học tập trực quan, giảm 40% thời gian tra cứu và tăng cường khả năng ghi nhớ qua hệ thống kiểm tra chủ động.
  • Sinh viên / Lập trình viên Web: Đóng vai trò là đồ án mẫu mực (Reference Project) về việc ứng dụng Full-stack JavaScript, từ thiết kế sơ đồ Usecase, DFD, Sequence Diagram đến hiện thực hóa API bảo mật và xử lý Real-time.
  • Các tổ chức giáo dục quy mô nhỏ: Có thể kế thừa cấu trúc mã nguồn để tùy biến thành hệ thống quản lý học tập (LMS) nội bộ với chi phí vận hành hạ tầng gần như bằng 0 trên các nền tảng đám mây miễn phí.

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

1. Yêu cầu phần cứng và môi trường để triển khai hệ thống là gì?

Hệ thống yêu cầu tối thiểu máy chủ Ubuntu 18.04/20.04 LTS (hoặc Windows Server), 1 vCPU, 1GB RAM, 10GB SSD lưu trữ, Node.js 14.x+, MongoDB 4.4+, và Nginx làm Web Server/Reverse Proxy.

2. Hệ thống xử lý vấn đề mở rộng (Scalability) khi lượng truy cập tăng đột biến như thế nào?

Nhờ kiến trúc Stateless RESTful API, hệ thống có thể kích hoạt chế độ PM2 Cluster trên máy chủ hiện tại hoặc đưa Backend vào Docker Container để chạy Auto-scaling trên các nền tảng Kubernetes / AWS ECS, kết hợp lưu trữ phiên làm việc vào Redis Store.

3. Nền tảng có thể tích hợp với các hệ thống quản lý học tập khác (LMS) không?

Có. Nền tảng được thiết kế theo chuẩn REST API với định dạng dữ liệu đầu ra JSON, cho phép các hệ thống bên thứ ba dễ dàng tích hợp, trích xuất dữ liệu khóa học hoặc đồng bộ tài khoản thông qua API Token.

4. Chi phí vận hành và bảo trì hàng tháng của website ước tính bao nhiêu?

Với quy mô phục vụ 1,000 - 5,000 người dùng hàng tháng, chi phí hạ tầng (Cloud VPS + MongoDB Atlas Free/Tier thấp) dao động khoảng 5$ - 15$/tháng (tương đương 120.000đ - 360.000đ/tháng), mang lại hiệu quả kinh tế tối ưu.

5. Dữ liệu âm thanh và hình ảnh bài học được lưu trữ và tối ưu hóa như thế nào?

Tài nguyên tĩnh (hình ảnh bài học, audio phát âm bảng chữ cái) được nén chuẩn WebP/MP3 tối ưu dung lượng và lưu trữ tại thư mục tĩnh của máy chủ hoặc có thể định tuyến trực tiếp qua các dịch vụ lưu trữ đám mây (Cloudinary / AWS S3) để tăng tốc độ truyền tải qua mạng phân phối nội dung (CDN).

Kết luận

Đồ án tốt nghiệp "Xây dựng Website học tiếng Nhật" của sinh viên Hứa Văn Lâm và Nguyễn Việt Hoàng đã 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 đề ra. Dự án không chỉ giải quyết trọn vẹn bài toán xây dựng nền tảng học ngoại ngữ tương tác cao, giàu tính cá nhân hóa mà còn là minh chứng rõ nét cho tính hiệu quả, linh hoạt của kiến trúc Full-stack JavaScript (MERN Stack).

Những đóng góp về mặt kỹ thuật trong việc phân tích thiết kế hệ thống, tối ưu hóa Virtual DOM trên ReactJS, xử lý luồng bất đồng bộ trên Node.js và quản trị dữ liệu phi quan hệ MongoDB cung cấp nguồn tài liệu tham khảo giá trị cho cộng đồng phát triển phần mềm. Đề tài mở ra tiềm năng lớn trong việc phát triển thành một sản phẩm EdTech thương mại hoàn chỉnh khi được tích hợp thêm các công nghệ AI nhận dạng giọng nói và thuật toán Spaced Repetition trong tương lai.