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

Trong bối cảnh công nghệ thông tin và mạng Internet phát triển mạnh mẽ, phương thức trao đổi kiến thức và học tập đã có những bước chuyển biến căn bản. Theo trình bày của nhóm tác giả, trước đây người học khi gặp các dạng bài tập khó thường phải tìm gặp trực tiếp giáo viên tại trường, tìm kiếm sách giải hoặc nhờ cậy bạn bè. Tuy nhiên, không phải học sinh hay sinh viên nào cũng có điều kiện thuận lợi về mặt di chuyển, thời gian và kinh phí để thực hiện việc này. Bên cạnh đó, sự bùng phát của đại dịch Covid-19 đã làm tăng tính ưu tiên cho việc hạn chế tiếp xúc trực tiếp nhằm phòng ngừa lây lan dịch bệnh, buộc hoạt động giáo dục và làm việc phải dịch chuyển sang hình thức trực tuyến. Xuất phát từ thực tiễn trên, đề tài "Xây dựng website cộng đồng hỗ trợ học tập Học Siêu Dễ - Easy Learn" được thực hiện nhằm xây dựng một mạng xã hội giáo dục trực tuyến kết nối học sinh và đội ngũ gia sư, trợ giảng với khẩu hiệu vận hành: "Học siêu dễ - Học siêu dễ mọi lúc - Học siêu dễ mọi nơi".

Mục tiêu và các nhiệm vụ nghiên cứu chính của đề tài được xác định cụ thể như sau:

  1. Mục tiêu nghiên cứu: Tạo lập một nền tảng học tập trực tuyến phổ biến kết nối gia sư và học sinh; xây dựng môi trường học tập đa dạng, hỗ trợ người học tiếp cận nguồn kiến thức nhanh chóng và nâng cao năng lực tự học.
  2. Nhiệm vụ lý thuyết: Nghiên cứu tổng quan và chi tiết các công nghệ phát triển ứng dụng web hiện đại bao gồm bộ công nghệ MERN Stack (MongoDB, Express.js, ReactJS, Node.js), cơ chế xác thực và phân quyền JSON Web Token (JWT), cùng các thư viện giao diện và tiện ích như Material UI, Tailwind CSS, React Query, Redux.
  3. Nhiệm vụ thực hành:
    • Xây dựng hệ thống giao diện lập trình ứng dụng RESTful API bằng Express.js và Node.js nhằm thực thi các thao tác khởi tạo, đọc, cập nhật và xóa (CRUD) trên hệ cơ sở dữ liệu.
    • Triển khai cơ sở dữ liệu phi quan hệ MongoDB để lưu trữ, truy xuất và quản lý dữ liệu vận hành từ RESTful API.
    • Xây dựng giao diện tương tác người dùng phía máy khách bằng ReactJS kết hợp Material UI và Tailwind CSS.
    • Tích hợp chuẩn JWT để xác thực định danh tài khoản và quản lý ủy quyền truy cập cho từng chức năng của API.

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

  • Đối tượng nghiên cứu: Nền tảng phân quyền gồm 3 nhóm người dùng chính: Người dùng học sinh (đăng bài hỏi đáp, xem lời giải, tham gia khóa học trực tuyến, hỏi trực tiếp gia sư, thực hiện nhiệm vụ tích điểm đổi quà và đua bảng xếp hạng); Trợ giảng/Gia sư (hỗ trợ giải đáp các khóa học, trả lời trực tiếp thắc mắc của học sinh, tích lũy điểm thưởng để đổi ra quà tặng hoặc tiền mặt sau khi được phê duyệt); Quản trị viên (quản trị tài khoản, kiểm duyệt nội dung bài đăng, quản lý thông báo, danh mục khóa học, vị trí quảng cáo và theo dõi thống kê truy cập).
  • Phạm vi nghiên cứu: Tập trung giải quyết các quy trình nghiệp vụ cốt lõi của một hệ thống mạng xã hội học tập, bao gồm: quy trình xác thực đăng ký tài khoản có xác nhận OTP qua email; tải lên bài đăng hỗ trợ đa định dạng hình ảnh/video; quản lý tiến trình học tập; chức năng giỏ hàng và thanh toán khóa học; cơ chế gamification (tích điểm danh, làm nhiệm vụ, xếp hạng) và hệ thống công cụ quản trị nội dung. Về mặt thời gian, đề tài được triển khai từ ngày 07/09/2022 đến ngày 08/07/2023 tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh.

Cơ sở lý thuyết và phương pháp

Khóa luận áp dụng phương pháp luận phát triển phần mềm theo mô hình hướng đối tượng, đi từ khảo sát thực tế, phân tích yêu cầu, thiết kế kiến trúc, thiết kế cơ sở dữ liệu đến cài đặt và kiểm thử chức năng. Dữ liệu nghiên cứu phục vụ khảo sát xuất phát từ việc đối chiếu, so sánh tính năng thực tế của các nền tảng học tập số tiêu biểu hiện hành (điển hình như hệ thống diễn đàn học tập diendan.vn) với các tiêu chí đánh giá về giao diện, tốc độ phản hồi, năng lực quản trị, tính bao quát của tính năng và khả năng mở rộng hệ thống.

Tiêu chí khảo sát Thực trạng hệ thống tương tự (diendan.vn) Hướng triển khai của hệ thống đề tài
Giao diện Web Giao diện còn thô sơ, chưa tối ưu cho người dùng mới, còn lỗi hiển thị hình ảnh. Thiết kế hiện đại bằng Tailwind CSS và Material UI, bảo đảm responsive co giãn đa màn hình.
Tốc độ phản hồi và tải trang Tốc độ tải trang nhanh nhưng thiếu chỉ báo trạng thái trực quan khi phản hồi chậm. Tối ưu hóa API qua Node.js, bổ sung cơ chế lưu bộ nhớ đệm (caching) và biểu tượng loading trạng thái.
Khả năng quản trị Cơ sở người dùng lớn, khó khăn trong kiểm soát bài viết rác và thành viên vi phạm. Thiết lập phân quyền chặt chẽ (Admin - Assistant - User), có bảng kiểm duyệt nội dung vi phạm riêng biệt.
Chức năng nâng cao Chủ yếu là hỏi đáp truyền thống, thiếu cơ chế tạo động lực học tập duy trì. Bổ sung hệ thống gamification: điểm danh, làm nhiệm vụ mỗi ngày, bảng xếp hạng và đổi điểm thưởng.

Khung công nghệ nền tảng được nhóm tác giả lựa chọn là kiến trúc phân tầng MERN Stack với các thành phần cốt lõi:

  • Node.js & Express.js: Đảm nhận tầng backend, thiết lập RESTful API xử lý các yêu cầu HTTP theo cơ chế non-blocking I/O hướng sự kiện, hỗ trợ xử lý đồng thời nhiều kết nối.
  • MongoDB & Mongoose: Đảm nhận tầng lưu trữ dữ liệu NoSQL hướng tài liệu (Document-oriented), hỗ trợ truy xuất linh hoạt, dễ dàng mở rộng và thao tác với các cấu trúc dữ liệu JSON phức tạp.
  • ReactJS: Thư viện tầng frontend, xây dựng giao diện ứng dụng đơn trang (Single-Page Application - SPA) dựa trên cấu trúc các Component có khả năng tái sử dụng cao. Quản lý trạng thái thông qua các React Hook chuyên dụng (useState, useEffect), thư viện Redux cho trạng thái hộp thoại toàn cục và React Query (useQuery, useMutation) để đồng bộ hóa trạng thái dữ liệu từ API.
  • Cloudinary: Dịch vụ lưu trữ đám mây đảm nhận lưu trữ, quản lý, xử lý và phân phối tài nguyên đa phương tiện (hình ảnh, video bài giảng) qua mạng phân phối nội dung (CDN).
  • JWT (JSON Web Token): Tiêu chuẩn mở dùng để tạo mã thông báo xác thực quyền truy cập giữa máy khách và máy chủ không cần lưu phiên trạng thái (stateless).

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc Client - Server tiêu chuẩn. Phía máy khách (Client) gửi các yêu cầu thông qua giao thức HTTP/HTTPS; phía máy chủ (Server) tiếp nhận, thực thi logic nghiệp vụ qua các tầng Middleware, Controller và tương tác với cơ sở dữ liệu MongoDB thông qua Model, sau đó trả về dữ liệu định dạng JSON để ReactJS render giao diện.

// Minh họa cấu hình Router, Middleware xác thực JWT và tải file trong Express.js (Trích từ khóa luận)
router.post(
  "/create-course",
  verifyTokenAndAdmin,
  upload.fields([{ name: "image", maxCount: 1 }, { name: "video", maxCount: 1 }]),
  courseController.createCourse
);

Hệ thống cơ sở dữ liệu được thiết kế gồm 24 collection (model) phân bổ thành 3 nhóm chức năng độc lập:

Nhóm dữ liệu Các Model thành phần trong hệ thống Chức năng nghiệp vụ chính
Nhóm người dùng User, Rank, OTP, Point, HistoryPoint, Mission, ViewMission, Notification Quản lý thông tin tài khoản cá nhân, mã OTP kích hoạt, cấp bậc, ví điểm thưởng, lịch sử biến động điểm, tiến độ thực hiện nhiệm vụ và hệ thống thông báo đẩy.
Nhóm bài viết & Tương tác Post, Comment, React, ObIClass, Subject, Assistant, Attachment, Advertise Lưu trữ bài đăng hỏi đáp (yêu cầu tối thiểu 10 điểm để tạo bài), bình luận, lượt bình chọn (upvote/downvote), danh mục khối lớp - môn học, hồ sơ trợ giảng, tệp đính kèm và banner quảng cáo.
Nhóm khóa học & Thương mại CategoryCourse, VideoCourse, ViewVideoCourse, RatingCourse, Cart, BillRecord, AssistantCourse, CourseWishList Phân loại khóa học, quản lý danh sách video bài giảng, thống kê lượt xem, điểm đánh giá, giỏ hàng, lịch sử hóa đơn thanh toán, phân công trợ giảng phụ trách và danh sách khóa học yêu thích.

Về quy trình xử lý nghiệp vụ, hệ thống đặc tả 27 ca sử dụng (Use case) chi tiết qua sơ đồ tuần tự (Sequence Diagram), tiêu biểu như:

  • Đăng ký và xác thực: Người dùng cung cấp email và số điện thoại; hệ thống kiểm tra tính duy nhất, tạo mã OTP gửi về hòm thư điện tử; người dùng xác thực mã OTP hợp lệ để hoàn tất khởi tạo bản ghi trong cơ sở dữ liệu.
  • Tạo bài viết hỏi đáp: Kiểm tra điều kiện tiên quyết về số dư điểm thưởng (tài khoản phải có từ 10 điểm trở lên). Người dùng tải nội dung và hình ảnh bài tập; hệ thống tiến hành kiểm tra hợp lệ, trừ điểm và hiển thị bài viết lên bảng tin cộng đồng.
  • Quy trình trợ giảng: Người dùng nộp đơn đăng ký làm gia sư kèm thông tin chuyên môn; Quản trị viên duyệt hồ sơ; Trợ giảng nhận giải đáp câu hỏi và hỗ trợ học viên trong khóa học để nhận điểm tích lũy quy đổi ra tiền mặt hoặc quà tặng.

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

Chương 1: Tổng quan ứng dụng

Chương 1 thiết lập tính cấp thiết của đề tài trong kỷ nguyên chuyển đổi số giáo dục hậu đại dịch Covid-19. Nội dung làm rõ mục tiêu phát triển website "Học Siêu Dễ - Easy Learn" theo định hướng mạng xã hội kết nối học tập. Tác giả phân định ranh giới trách nhiệm của 3 vai trò tác nhân (Khách/Học sinh, Trợ giảng, Quản trị viên) và xác định phạm vi xử lý nghiệp vụ tập trung vào tính tương tác cộng đồng, phân quyền API và quản trị nội dung.

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

Chương này thực hiện phân tích đối chuẩn hệ thống với diễn đàn học tập diendan.vn qua 2 bảng tổng hợp (Bảng 2-1 và Bảng 2-2). Từ các nhược điểm khảo sát được (giao diện chưa tối ưu, thiếu chức năng gamification, quản lý vi phạm lỏng lẻo), tác giả xây dựng danh mục đặc tả yêu cầu người dùng cho từng nhóm đối tượng và các yêu cầu kỹ thuật phi chức năng về giao diện đáp ứng (responsive), độ ổn định kết nối Internet và tính tương thích trên mọi hệ điều hành (Windows, Linux).

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

Chương 3 trình bày chi tiết lý thuyết nền tảng về cấu trúc MERN Stack và các công nghệ phụ trợ. Tác giả phân tích ưu, nhược điểm của từng công nghệ: Node.js (xử lý bất đồng bộ nhưng khó xử lý logic đa lõi), Express.js (cú pháp gọn nhẹ, phụ thuộc middleware), MongoDB (tốc độ đọc ghi cao trên RAM nhưng thiếu cơ chế transaction ngân hàng), Cloudinary (lưu trữ CDN tiện lợi nhưng giới hạn gói miễn phí), ReactJS (tái sử dụng component, đòi hỏi quản lý trạng thái bổ sung), Tailwind CSS và React Query. Mỗi công nghệ đều có dẫn chứng đoạn mã thực tế được tích hợp trong dự án (như kỹ thuật phân trang dữ liệu bằng Post.paginate() hay các hook useQuery, useMutation).

Chương 4: Thiết kế hệ thống phần mềm

Chiếm dung lượng lớn nhất trong báo cáo, Chương 4 thể hiện toàn bộ bản vẽ thiết kế phần mềm bao gồm: Sơ đồ phân rã chức năng; Sơ đồ lớp (Class Diagram); 4 sơ đồ ca sử dụng tổng quát (Khách, Người dùng, Trợ giảng, Quản trị); 22 sơ đồ tuần tự (Sequence Diagram) đi kèm bảng đặc tả luồng sự kiện chi tiết từ Bảng 4-1 đến Bảng 4-27; Thiết kế chi tiết cấu trúc thuộc tính của 24 Model dữ liệu (Bảng 4-28 đến 4-51) và thiết kế giao diện hoàn chỉnh của hơn 35 màn hình chức năng.

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

Chương 5 trình bày phương thức thiết lập môi trường phát triển ứng dụng thông qua Visual Studio Code và trình duyệt web. Nhóm tác giả xây dựng kế hoạch kiểm thử chức năng (Functional Testing) chi tiết, phân tích các rủi ro hệ thống (Bảng 5-1, Bảng 5-2) và tiến hành kiểm thử các kịch bản thực tế trên cả 4 phân hệ: người dùng chưa đăng nhập, người dùng đã đăng nhập, trợ giảng và quản trị viên (ghi nhận qua Bảng 5-3, 5-4, 5-5, 5-6).

Chương 6: Kết luận

Chương cuối tổng kết toàn bộ kết quả triển khai đề tài, đánh giá mức độ hoàn thành so với mục tiêu ban đầu, thẳng thắn chỉ ra những khiếm khuyết kỹ thuật còn tồn đọng trong quá trình xây dựng hệ thống và đề xuất các phương án mở rộng kiến trúc trong tương lai.

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

Về mặt sản phẩm, đề tài đã hoàn thành việc thiết kế và lập trình hoàn chỉnh website cộng đồng hỗ trợ học tập "Học Siêu Dễ - Easy Learn" theo đúng kế hoạch triển khai từ 07/09/2022 đến 08/07/2023. Hệ thống đáp ứng đầy đủ các yêu cầu chức năng đặt ra:

  • Kiến trúc phần mềm chuẩn hóa: Xây dựng thành công hệ thống RESTful API hoàn chỉnh chạy trên Node.js/Express.js kết nối cơ sở dữ liệu MongoDB gồm 24 collection dữ liệu chặt chẽ.
  • Bảo mật và phân quyền: Triển khai cơ chế xác thực JWT kết hợp mã OTP qua email, bảo vệ an toàn các router nghiệp vụ và phân định chính xác quyền hạn của Quản trị viên, Trợ giảng và Người dùng học sinh.
  • Tích hợp tính năng phong phú: Vận hành trơn tru các luồng nghiệp vụ mạng xã hội học tập gồm: đăng bài hỏi đáp đa phương tiện (tích hợp Cloudinary), bình luận, bình chọn câu trả lời, giỏ hàng, thanh toán khóa học video, theo dõi tiến độ bài giảng.
  • Cơ chế Gamification: Ứng dụng thành công mô hình tích điểm thưởng qua việc điểm danh hàng ngày, hoàn thành nhiệm vụ và hỗ trợ giải bài tập; cho phép học sinh đổi quà và trợ giảng quy đổi điểm thành tiền mặt.

So với các mô hình diễn đàn học tập truyền thống được khảo sát, đề tài đóng góp một giải pháp công nghệ toàn diện kết hợp giữa mạng xã hội hỏi đáp và nền tảng bán khóa học trực tuyến (E-learning), khắc phục tình trạng thiếu tính tương tác trực quan và bổ sung động lực học tập liên tục cho học viên thông qua hệ thống xếp hạng và điểm thưởng.

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

Dựa trên nội dung đánh giá của tác giả tại Chương 3 và Chương 6, hệ thống vẫn còn tồn tại một số hạn chế kỹ thuật:

  • Phụ thuộc hạ tầng mạng: Ứng dụng hoạt động phụ thuộc hoàn toàn vào đường truyền Internet liên tục, chưa có cơ chế lưu trữ ngoại tuyến (offline caching) cho người học khi mất kết nối.
  • Giới hạn lưu trữ bên thứ ba: Việc lưu trữ hình ảnh và video bài giảng đang sử dụng gói dịch vụ miễn phí của Cloudinary nên bị giới hạn về dung lượng và băng thông truyền tải, không phù hợp cho trường hợp hệ thống có lưu lượng truy cập lớn hoặc nhiều tệp dung lượng cao.
  • Quản lý trạng thái và cơ sở dữ liệu: MERN Stack đòi hỏi cấu trúc quản lý trạng thái phức tạp; cơ sở dữ liệu MongoDB không có cơ chế giao dịch (transaction) chặt chẽ như các hệ quản trị cơ sở dữ liệu quan hệ, tiềm ẩn nguy cơ thiếu nhất quán dữ liệu ở các quy trình giao dịch tài chính phức tạp nếu xảy ra sự cố đột ngột.
  • Giao diện người dùng: Mặc dù đã đáp ứng tính tương thích co giãn, một số vị trí hiển thị giao diện vẫn cần được tinh chỉnh để tối ưu hóa trải nghiệm người dùng mới.

Hướng phát triển tiếp theo được nhóm tác giả xác định:

  • Mở rộng phát triển ứng dụng di động đa nền tảng (sử dụng React Native) để tối ưu khả năng truy cập trên các thiết bị smartphone.
  • Tích hợp thêm các cổng thanh toán trực tuyến tự động (ví điện tử, ngân hàng) thay thế quy trình hiện tại.
  • Nâng cấp gói dịch vụ lưu trữ media đám mây chuyên dụng và tối ưu hóa hiệu năng các truy vấn API phục vụ số lượng lớn người dùng đồng thời.
  • Phát triển thêm các công cụ tương tác thời gian thực hỗ trợ gia sư và học sinh trao đổi bài giảng trực tiếp.

Giá trị tham khảo

Báo cáo khóa luận tốt nghiệp này là tài liệu tham khảo có giá trị cao cho sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm và Hệ thống thông tin, đặc biệt là các nhóm đề tài định hướng phát triển ứng dụng web quy mô hoàn chỉnh theo kiến trúc MERN Stack (MongoDB, Express.js, ReactJS, Node.js).

Những nội dung có giá trị tham khảo ứng dụng thực tế rõ nét bao gồm:

  1. Phương pháp mô hình hóa phần mềm: Hệ thống 27 bảng use case chi tiết đi kèm sơ đồ tuần tự (Sequence Diagram) chuẩn hóa, là mẫu tham khảo chuẩn mực cho sinh viên khi thực hiện tài liệu phân tích thiết kế hệ thống.
  2. Thiết kế cơ sở dữ liệu NoSQL: Cách thức tổ chức và thiết lập 24 model dữ liệu trong MongoDB để giải quyết các bài toán liên kết người dùng, bài viết, nhiệm vụ gamification và quản lý khóa học video.
  3. Thực hành triển khai mã nguồn: Các đoạn mã minh họa việc phân trang dữ liệu với Mongoose, cấu hình router với Middleware xác thực JWT, và việc sử dụng các hook của thư viện React Query (useQuery, useMutation) trong quản lý đồng bộ dữ liệu giữa Frontend và Backend.

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

1. Điều kiện tiên quyết để người dùng có thể tạo một bài viết hỏi đáp trên hệ thống là gì?
Theo đặc tả ca sử dụng Tạo bài viết (Bảng 4-6) và quy tắc nghiệp vụ của hệ thống, người dùng bắt buộc phải đăng nhập vào tài khoản và phải có số điểm thưởng tích lũy tối thiểu là 10 điểm.

2. Hệ thống lưu trữ và phân phối tệp hình ảnh, video khóa học bằng giải pháp nào?
Dự án sử dụng dịch vụ đám mây Cloudinary kết hợp với mạng phân phối nội dung (CDN) để tải lên, lưu trữ, tối ưu hóa và phân phối tài nguyên đa phương tiện tĩnh (hình ảnh bài viết, video bài giảng).

3. Cơ sở dữ liệu MongoDB của hệ thống được chia thành mấy nhóm và gồm bao nhiêu model?
Hệ thống thiết kế tổng cộng 24 model (collection) dữ liệu và được phân thành 3 nhóm nghiệp vụ chính: Nhóm cơ sở dữ liệu người dùng (8 model), Nhóm cơ sở dữ liệu bài viết (8 model) và Nhóm cơ sở dữ liệu khóa học (8 model).

4. Redux và React Query được phân chia vai trò như thế nào ở tầng giao diện máy khách (Front-end)?
Redux được sử dụng để quản lý trạng thái toàn cục của các thành phần giao diện (UI state) như trạng thái đóng/mở của các hộp thoại (dialog tạo bài viết, đổi mật khẩu, bình luận, phương thức thanh toán). Trong khi đó, React Query đảm nhận vai trò quản lý trạng thái dữ liệu máy chủ (server state), gửi yêu cầu gọi API và quản lý bộ nhớ đệm (caching) thông qua các hook useQuery và useMutation.

5. Quy trình để một người dùng trở thành Trợ giảng/Gia sư được hệ thống kiểm soát ra sao?
Người dùng phải gửi thông tin đăng ký làm trợ giảng qua biểu mẫu chuyên dụng. Yêu cầu này sẽ được chuyển tới phân hệ quản trị viên (Admin) để xét duyệt hồ sơ. Chỉ khi được Quản trị viên phê duyệt trên hệ thống, tài khoản mới được kích hoạt quyền trợ giảng để tham gia giải đáp câu hỏi và tích lũy điểm quy đổi.

Kết luận

Khóa luận tốt nghiệp "Xây dựng website cộng đồng hỗ trợ học tập Học Siêu Dễ - Easy Learn" của hai sinh viên Trương Ngọc Phương và Trần Lưu Thế Anh đã hoàn thành toàn diện các mục tiêu nghiên cứu và thực hành đặt ra. Đề tài vận dụng bài bản bộ công nghệ MERN Stack để giải quyết triệt để bài toán kết nối giáo dục giữa học sinh và đội ngũ trợ giảng thông qua mô hình mạng xã hội học tập trực quan. Công trình không chỉ cung cấp một sản phẩm phần mềm có tính ứng dụng cao mà còn thể hiện một quy trình kỹ thuật phần mềm chuẩn mực từ khâu khảo sát, mô hình hóa đến cài đặt và kiểm thử.