Bối cảnh và vấn đề nghiên cứu

Trong xu thế hội nhập toàn cầu, tiếng Anh đóng vai trò là ngôn ngữ giao tiếp quốc tế, được ứng dụng sâu rộng trong hầu hết các lĩnh vực trọng yếu như kinh tế, chính trị, khoa học kỹ thuật và du lịch. Đối với người học tại Việt Nam, việc nâng cao năng lực tiếng Anh là điều kiện tiên quyết để đáp ứng tiêu chuẩn tuyển dụng chuyên môn và tiếp cận nguồn tài liệu học thuật quốc tế. Trong cấu trúc phát triển kỹ năng ngôn ngữ, vốn từ vựng được xác định là nền tảng cốt lõi; tác giả viện dẫn quan điểm của nhà ngôn ngữ học David Wilkins: “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ải; nhưng không có từ vựng, không một thông tin nào có thể được truyền tải).

Song song với nhu cầu học tập, sự phổ biến của máy tính xách tay và các thiết bị số cá nhân đã tạo tiền đề chuyển dịch phương pháp học từ vựng truyền thống (ghi chép giấy bút) sang các ứng dụng học tập kỹ thuật số linh hoạt và thuận tiện hơn. Xuất phát từ bối cảnh đó, đề tài "Xây dựng website học tiếng Anh bằng Flashcard" được nhóm tác giả Nguyễn Hải Lâm và Nguyễn Duy Bảo thực hiện dưới sự hướng dẫn của ThS. Nguyễn Trần Thi Văn tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh (khóa 2016 – 2020).

Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:

  1. Nghiên cứu thói quen và nhu cầu học từ vựng tiếng Anh của người học để xây dựng mô hình học tập trực quan thông qua kỹ thuật flashcard.
  2. Thiết kế và hiện thực hóa một hệ thống website hoàn chỉnh cho phép người dùng tự tạo lập, chỉnh sửa, quản lý thẻ từ (card), bộ thẻ (deck), tham gia các chế độ luyện tập phản xạ và chia sẻ bài học trong cộng đồng người dùng.
  3. Xây dựng phân hệ quản trị hệ thống (Admin) phục vụ công tác kiểm duyệt nội dung chia sẻ, quản lý tài khoản và giám sát toàn bộ dữ liệu người dùng.

Đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Các phương pháp ghi nhớ từ vựng qua flashcard, thói quen học tập kỹ thuật số, kiến trúc ứng dụng web hiện đại (Single Page Application kết hợp Web API).
  • Phạm vi áp dụng: Đề tài hướng đến người học ở mọi độ tuổi, ngành nghề và trình độ có nhu cầu bồi dưỡng vốn từ vựng tiếng Anh.
  • Thời gian và tiến độ thực hiện: Đồ án được triển khai trong thời gian 15 tuần (từ ngày 30/03/2020 đến ngày 12/07/2020), hoàn thành báo cáo tổng kết vào tháng 8 năm 2020.

Cơ sở lý thuyết và phương pháp nghiên cứu

Để xây dựng hệ thống website học tập, đề tài kết hợp phương pháp nghiên cứu học thuật và phương pháp kỹ thuật phần mềm:

  • Phương pháp phân tích và tổng hợp: Thu thập, khảo sát và đánh giá ưu nhược điểm của các hệ thống flashcard trực tuyến đang hoạt động trên thị trường; phân tích các tài liệu kỹ thuật về công nghệ web.
  • Phương pháp thực nghiệm khoa học: Mô hình hóa yêu cầu, thiết kế kiến trúc cơ sở dữ liệu quan hệ, lập trình triển khai hệ thống phần mềm và tiến hành kiểm thử chức năng theo các kịch bản thực tế.

Về mặt công nghệ và khung lý thuyết, đề tài ứng dụng các công nghệ hiện đại bao gồm:

  • Nền tảng Backend - ASP.NET Core (.NET Core): Khung ứng dụng mã nguồn mở, đa nền tảng (hỗ trợ Windows, Linux, macOS) của Microsoft. Đề tài khai thác kiến trúc ASP.NET Core MVC để xây dựng hệ thống RESTful Web API; tận dụng cơ chế định tuyến (routing), đường ống xử lý yêu cầu HTTP (HTTP request pipeline) dạng module hóa, cơ chế ràng buộc mô hình (model binding) và xác thực dữ liệu tự động (model validation). Thư viện và gói mở rộng được quản lý thông qua hệ sinh thái NuGet.
  • Nền tảng Frontend - ReactJS: Thư viện JavaScript mã nguồn mở phục vụ xây dựng giao diện người dùng theo kiến trúc Component hóa động. Đề tài vận dụng cú pháp mở rộng JSX để liên kết biểu thức JavaScript với cấu trúc giao diện; sử dụng đối tượng Props để truyền dữ liệu một chiều từ component cha xuống component con, và State để lưu trữ, phản hồi trạng thái tương tác của người dùng trên DOM ảo.
  • Kiến trúc kết nối: Hệ thống được thiết kế theo mô hình phân tách độc lập giữa Frontend (Client-side) và Backend (Server-side), giao tiếp thông qua các giao thức HTTP API định dạng dữ liệu JSON.

Thiết kế và triển khai hệ thống

Hệ thống được thiết kế theo mô hình hướng đối tượng, chuẩn hóa dữ liệu quan hệ và mô hình hóa chi tiết luồng xử lý tương tác giữa người dùng và máy chủ.

1. Thiết kế cơ sở dữ liệu

Cơ sở dữ liệu của hệ thống gồm 13 bảng thực thể đảm bảo lưu trữ toàn vẹn thông tin người dùng, nội dung bài học và kết quả luyện tập:

Tên bảng dữ liệu Lớp mô hình tương ứng Mục đích và vai trò lưu trữ
User ApplicationUser Lưu trữ thông tin tài khoản người dùng, email, mật khẩu mã hóa, ảnh đại diện.
Role / UserRole ApplicationRole / ApplicationUserRole Quản lý vai trò và phân quyền hệ thống (User, Admin).
Deck Deck Quản lý thông tin bộ thẻ (tên deck, mô tả, màu sắc nhận diện, trạng thái công khai).
Card Card Lưu trữ mặt trước của thẻ (Front - từ vựng tiếng Anh).
Back Back Lưu trữ mặt sau của thẻ gồm nhiều nghĩa (Meaning), từ loại (Type), ví dụ (Example) và hình ảnh minh họa (Image).
CardAssignment CardAssignment Bảng trung gian thể hiện mối quan hệ giữa thẻ từ (Card) và bộ thẻ (Deck).
SharedDeck SharedDeck Quản lý danh sách các bộ thẻ được người dùng yêu cầu chia sẻ công khai lên hệ sinh thái chung (Market).
SharedCard SharedCard Quản lý danh sách các thẻ từ vựng được đề xuất công khai.
Test Test Lưu trữ thông tin từng phiên luyện tập ghi nhớ từ vựng của người dùng.
TestedCard TestedCard Lưu trữ trạng thái ghi nhớ của từng thẻ từ vựng trong phiên luyện tập (REMEMBER hoặc DON'T REMEMBER).
Match Match Lưu trữ thông tin các lượt chơi luyện tập phản xạ thông qua minigame ghép thẻ.
MatchedCard MatchedCard Lưu trữ chi tiết các cặp thẻ đã được người dùng ghép nối trong phiên chơi.

2. Thiết kế xử lý và giao diện

  • Phân hệ Người dùng (Guest & User): Hỗ trợ các chức năng đăng ký/đăng nhập (tài khoản hệ thống và tích hợp đăng nhập qua Facebook, Google); quản lý hồ sơ cá nhân (đổi tên, đổi mật khẩu, cập nhật ảnh đại diện). Người dùng có quyền tạo mới, chỉnh sửa, xóa, tìm kiếm, lọc card và deck; tùy biến thẻ từ với nhiều nghĩa và hình ảnh minh họa; thêm/bớt thẻ vào bộ thẻ; truy cập trang Market để tải deck, tải card, ghim deck vào mục truy cập nhanh (My shortcuts) hoặc gửi đề xuất công khai deck/card cá nhân.
  • Chế độ Luyện tập (Practice & Minigame):
    • Luyện tập ghi nhớ (Practice): Hiển thị thẻ từ lần lượt; người học chủ động đánh giá mức độ ghi nhớ qua hai lựa chọn REMEMBER và DON'T REMEMBER. Các từ chưa thuộc sẽ tự động lặp lại cho đến khi người học hoàn tất toàn bộ; hệ thống tích hợp xen kẽ các câu hỏi trắc nghiệm ngữ nghĩa để kiểm tra độ hiểu từ vựng.
    • Luyện tập ghép thẻ (Match Card): Hiển thị bảng 16 ô tương ứng với mặt trước (front) và mặt sau (back) của 8 thẻ từ vựng được xáo trộn; người học ghép đúng cặp từ - nghĩa để làm biến mất các thẻ tương ứng.
    • Thống kê học tập (Statistics): Ghi nhận và hiển thị lịch sử các lần luyện tập, tỷ lệ từ đã thuộc/chưa thuộc theo từng bộ thẻ.
  • Phân hệ Quản trị (Admin): Cung cấp bảng điều khiển quản lý danh sách người dùng, xem và xóa deck/card của từng tài khoản; tiếp nhận và xét duyệt danh sách yêu cầu công khai bộ thẻ (Approve hoặc Decline) và danh sách thẻ từ vựng do cộng đồng đóng góp.

3. Môi trường phát triển và kiểm thử

  • Môi trường lập trình: Visual Studio Code (soạn thảo mã nguồn backend C# ASP.NET Core và frontend ReactJS).
  • Quản trị cơ sở dữ liệu: Azure Data Studio (thiết kế, truy vấn và quản lý hệ thống dữ liệu).
  • Kiểm thử: Xây dựng các ca kiểm thử chức năng (Test cases), điển hình như bộ kiểm thử xác thực dữ liệu đầu vào cho biểu mẫu đăng ký tài khoản (kiểm tra trường rỗng, định dạng email, tính hợp lệ của mật khẩu xác nhận).

Nội dung chính theo từng chương

Bố cục khóa luận được cấu trúc thành 5 chương nội dung chuyên môn:

Chương 1: Cơ sở lý thuyết

Chương này tập trung trình bày tổng quan lý thuyết về các công nghệ được lựa chọn trong quá trình phát triển ứng dụng. Tác giả phân tích chi tiết nền tảng .NET Core và ASP.NET Core, làm rõ các ưu thế về tính đa nền tảng, hiệu năng cao, cấu trúc module hóa qua đường ống HTTP, khả năng tích hợp linh hoạt các hệ thống lưu trữ máy chủ (IIS, Nginx, Apache, Docker) và cơ chế đóng gói NuGet. Về phía client, chương 1 giới thiệu kiến trúc ReactJS, làm rõ nguyên lý hoạt động của các khối Component, cú pháp JSX, cơ chế luân chuyển dữ liệu qua Props và khả năng quản lý trạng thái động thông qua State.

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

Tác giả tiến hành khảo sát thực nghiệm 5 website học từ vựng bằng flashcard phổ biến trên thế giới để rút ra các ưu điểm cần kế thừa và nhược điểm cần khắc phục:

Website khảo sát Ưu điểm ghi nhận Nhược điểm ghi nhận
Tinycards Giao diện đơn giản, hiện đại; cho phép học không cần đăng nhập; nguồn thẻ phong phú; có mục theo dõi bài học của người khác. Mỗi thẻ chỉ thêm được 1 nghĩa duy nhất; thiếu thông tin từ loại và câu ví dụ mẫu.
Cram Có phân loại thẻ; hỗ trợ học không cần đăng nhập; có giới hạn số thẻ kiểm tra; tích hợp game ghi nhớ; hỗ trợ di động. Giao diện người dùng chưa thân thiện, bố cục thiếu trực quan.
BrainScape Giao diện hiện đại; hỗ trợ 5 mức độ tự đánh giá tiếp thu từ vựng; có chức năng mở lớp học chia sẻ bài học chung; hỗ trợ di động. Yêu cầu trả phí để sở hữu các bộ flashcard có sẵn trên hệ thống.
ProProfs Flashcard Giao diện hiện đại; hỗ trợ kiểm tra ghi nhớ và so khớp; cho phép chia sẻ qua mạng xã hội (Facebook, Twitter, Email); cho phép sao chép/chỉnh sửa thẻ có sẵn. Phải trả phí để mở khóa toàn bộ các tính năng nâng cao.
StudyBlue Cho phép tùy chỉnh số lượng thẻ và hình thức kiểm tra; có link chia sẻ mạng xã hội; hỗ trợ phím tắt thao tác nhanh; có tổng kết bài làm. Hiển thị toàn bộ thẻ trên màn hình thay vì phân trang; không có chế độ xem chi tiết từng thẻ; giao diện kiểm tra chưa tối ưu.

Trên cơ sở phân tích hiện trạng, chương 2 xác định đầy đủ các yêu cầu chức năng (quản lý deck/card, học tập, luyện tập trắc nghiệm/ghép thẻ, thống kê, chia sẻ Market), yêu cầu quản trị hệ thống và yêu cầu phi chức năng (tốc độ xử lý nhanh, mã nguồn dễ bảo trì).

Chương 3: Mô hình hoá yêu cầu

Chương này thực hiện mô hình hóa toàn bộ yêu cầu hệ thống thông qua:

  • Xây dựng lược đồ Use Case tổng quát phân định ranh giới chức năng của 3 tác nhân: Guest (khách vãng lai), User (người dùng đã đăng ký) và Admin (quản trị viên).
  • Thiết lập hệ thống bảng phân loại nghiệp vụ và bảng quy định nghiệp vụ chi tiết gồm 2 quy định cho Guest (QD_DangNhap, QD_DangKy), 33 quy định cho User (QD_DsCard, QD_ThemCard, QD_SuaCard, QD_LuyenTap, QD_GhepCard, QD_CKhaiDeck,...) và 29 quy định cho Admin (QD_DsUser, QD_XoaUser, QD_DuyetDeck, QD_DuyetCard,...).
  • Thiết kế hệ thống 22 biểu mẫu giao diện nghiệp vụ chuẩn hóa phục vụ quá trình tương tác (từ BM_DangNhap, BM_DsCard, BM_TrangChu đến các biểu mẫu duyệt nội dung của Admin).

Chương 4: Thiết kế hệ thống

Đây là chương trọng tâm về mặt kỹ thuật, bao gồm 3 phân phần:

  1. Thiết kế cơ sở dữ liệu: Đặc tả chi tiết cấu trúc trường, kiểu dữ liệu, khóa chính và khóa ngoại của 13 bảng dữ liệu quan hệ.
  2. Thiết kế giao diện: Thiết kế chi tiết các màn hình chức năng cho Guest (đăng nhập, đăng ký), User (trang chủ, chi tiết deck, quản lý card, luyện tập flashcard, luyện tập ghép thẻ, trang Market, trang thống kê) và Admin (quản lý người dùng, quản lý tài nguyên, duyệt bài).
  3. Thiết kế xử lý: Xây dựng 12 lược đồ tuần tự (Sequence Diagram) mô tả chi tiết dòng điều khiển và thông điệp giữa giao diện, bộ điều khiển API và cơ sở dữ liệu cho các tác vụ then chốt: tạo/sửa/xóa deck, tạo front, quản lý back (thêm/sửa nghĩa, tải/xóa ảnh), tìm kiếm và lọc card.

Chương 5: Cài đặt và kiểm thử

Chương 5 trình bày việc hiện thực hóa các lớp mô hình đối tượng C# tương ứng với cấu trúc thực thể cơ sở dữ liệu (ApplicationUser, Deck, Card, Back, CardAssignment, SharedDeck, Test, TestedCard, Match, MatchedCard), cấu hình môi trường phát triển trên Visual Studio Code và Azure Data Studio, đồng thời xây dựng các ca kiểm thử chức năng (test case) cho các màn hình giao tiếp quan trọng nhằm đảm bảo tính ổn định của hệ thống trước khi vận hành.

Kết quả và đóng góp

Khóa luận đã hoàn thành các mục tiêu nghiên cứu và kỹ thuật đề ra:

  • Kết quả ứng dụng: Xây dựng thành công website học tiếng Anh bằng Flashcard hoàn chỉnh trên nền tảng ReactJS và ASP.NET Core, đáp ứng đầy đủ các yêu cầu nghiệp vụ cho cả hai nhóm đối tượng người dùng (User) và quản trị viên (Admin).
  • Khắc phục nhược điểm của các hệ thống đi trước: Cho phép một thẻ từ vựng (Card) chứa nhiều tầng ngữ nghĩa (Back), có đầy đủ phân loại từ, ví dụ ngữ cảnh và hình ảnh minh họa đính kèm; hỗ trợ tạo lập và chia sẻ hoàn toàn miễn phí; kết hợp linh hoạt giữa phương pháp lặp lại chủ động và minigame ghép thẻ để tăng cường phản xạ ghi nhớ.
  • Tính năng tương tác cộng đồng: Thiết lập cơ chế chia sẻ tài nguyên bài học (Market) có quy trình kiểm duyệt nội dung chặt chẽ bởi quản trị viên, giúp hình thành kho dữ liệu từ vựng dùng chung.

Hạn chế và hướng nghiên cứu tiếp

Căn cứ trên phạm vi và kết quả thực hiện của đồ án, một số hạn chế và định hướng phát triển được xác định:

  • Hạn chế: Hệ thống hiện mới triển khai trên nền tảng giao diện website, chưa có ứng dụng di động độc lập (native mobile app); thuật toán lặp lại trong phiên học chủ yếu dựa trên logic lặp từ chưa thuộc tại thời điểm kiểm tra, chưa tích hợp các mô hình toán học ghi nhớ ngắt quãng dài hạn phức tạp; công tác kiểm thử chủ yếu tập trung vào kiểm thử giao diện và luồng chức năng cơ bản.
  • Hướng phát triển: Xây dựng phiên bản ứng dụng di động đa nền tảng; tích hợp thêm các dạng minigame luyện tập từ vựng mới; bổ sung tính năng phát âm tự động (text-to-speech) và mở rộng các hình thức bài tập tương tác đa phương tiện.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo có giá trị chuyên môn cho:

  • Sinh viên chuyên ngành Công nghệ thông tin, Công nghệ phần mềm đang thực hiện đồ án tốt nghiệp hoặc các dự án môn học liên quan đến xây dựng ứng dụng web theo kiến trúc phân tách Client-Server (ReactJS kết hợp ASP.NET Core Web API).
  • Các nhà phát triển muốn tham khảo quy trình phân tích và thiết kế hệ thống phần mềm giáo dục (EdTech), đặc biệt là kỹ thuật chuẩn hóa cơ sở dữ liệu cho flashcard nhiều nghĩa, phương pháp lập bảng quy định nghiệp vụ và xây dựng lược đồ tuần tự.

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

1. Website giải quyết nhược điểm cấu trúc dữ liệu của các nền tảng flashcard như Tinycards bằng cách nào?
Website tách biệt cấu trúc thẻ thành bảng Card (lưu mặt trước - từ vựng) và bảng Back (lưu mặt sau). Một Card có thể liên kết với nhiều bản ghi Back, cho phép người học lưu trữ nhiều tầng nghĩa khác nhau cho cùng một từ, kèm theo đầy đủ thông tin từ loại, ví dụ mẫu và hình ảnh minh họa riêng biệt cho từng nghĩa.

2. Quá trình luyện tập từ vựng (Practice) trên hệ thống diễn ra theo quy trình nào?
Người dùng chọn chế độ luyện tập trong chi tiết bộ thẻ. Khi thẻ hiển thị, người học đánh giá bằng 2 nút REMEMBER hoặc DON'T REMEMBER. Hệ thống tự động lặp lại các từ được chọn DON'T REMEMBER cho đến khi tất cả từ đều được ghi nhớ, đồng thời chèn xen kẽ các câu hỏi trắc nghiệm ngữ nghĩa và xuất bảng thống kê kết quả sau khi kết thúc bài học.

3. Cơ chế chia sẻ và công khai tài nguyên (Market) hoạt động như thế nào?
Người dùng có thể gửi yêu cầu công khai bộ thẻ cá nhân hoặc đề xuất thẻ mới lên hệ thống. Các yêu cầu này được chuyển vào danh sách chờ duyệt; Quản trị viên (Admin) sẽ kiểm tra nội dung và nhấn Approve để đưa lên kho tài nguyên chung hoặc Decline để từ chối. Người dùng khác có thể xem, tải về hoặc ghim (Pin) các bộ thẻ công khai này vào danh mục của mình.

4. Khóa luận sử dụng những công cụ và công nghệ chính nào để phát triển hệ thống?
Hệ thống sử dụng ASP.NET Core MVC (C#) để xây dựng Web API phía Backend, thư viện ReactJS cho giao diện Frontend phía Client, Visual Studio Code làm môi trường phát triển mã nguồn tích hợp và Azure Data Studio làm công cụ thiết kế, truy vấn và quản lý cơ sở dữ liệu.

Kết luận

Khóa luận tốt nghiệp "Xây dựng website học tiếng Anh bằng Flashcard" của sinh viên Nguyễn Hải Lâm và Nguyễn Duy Bảo đã giải quyết hoàn chỉnh bài toán xây dựng công cụ hỗ trợ học từ vựng trực tuyến linh hoạt và trực quan. Hệ thống khai thác hiệu quả kiến trúc công nghệ hiện đại giữa ASP.NET Core và ReactJS, kết hợp quy trình phân tích thiết kế hệ thống bài bản từ khảo sát hiện trạng đến chuẩn hóa cơ sở dữ liệu quan hệ. Đề tài đạt được đầy đủ các mục tiêu đề ra, mang lại giá trị ứng dụng thực tế trong học tập ngoại ngữ và cung cấp tài liệu tham khảo kỹ thuật rõ ràng cho sinh viên ngành công nghệ phần mềm.