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

Lý do chọn đề tài và bối cảnh thực tiễn

Sự phổ cập Internet ngày càng rộng rãi đã kéo theo nhu cầu học tập trực tuyến tăng lên đáng kể. Các nền tảng mua bán khóa học trực tuyến hiện có trên thị trường như Udemy và Coursera, dù được sử dụng phổ biến toàn cầu, vẫn bộc lộ nhiều hạn chế khi tiếp cận người dùng Việt Nam: giá khóa học cao so với mức chi tiêu trong nước, hệ thống thường xuyên gặp sự cố kết nối, giao diện chưa thực sự thân thiện, thiếu tương tác giữa giáo viên và học sinh, và chứng chỉ được cấp chưa có giá trị vật lý (Udemy chỉ ghi nhận kết quả học tập cá nhân mà không cấp chứng chỉ thật sự). Xuất phát từ những khoảng trống đó, nhóm tác giả đề xuất xây dựng một website mua bán khóa học online hướng đến trải nghiệm người dùng tốt hơn, hệ thống ổn định hơn và có khả năng cấp chứng chỉ hoàn thành khóa học.

Đề tài được thực hiện bởi hai sinh viên Nguyễn Trương Nhân (MSSV 20110690) và Bùi Văn Hữu Phước (MSSV 20110701), thuộc Khoa Công nghệ Thông tin, Bộ môn Công nghệ Phần mềm, Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE), khóa 2020–2024, dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo. Thời gian thực hiện từ 01/03/2024 đến 09/07/2024.

Mục tiêu và nhiệm vụ nghiên cứu

Đề cương xác định hai nhóm nhiệm vụ chính:

  1. Mục tiêu lý thuyết: Nghiên cứu chuyên sâu các công nghệ được lựa chọn (Node.js, ExpressJS, ReactJS, TypeScript, MySQL, Redux, Axios, ORM Prisma, FFMPEG), hiểu tổng quan và khả năng ứng dụng của từng công nghệ vào bài toán thực tế.
  2. Mục tiêu thực hành: Xây dựng hệ thống website mua bán khóa học trực tuyến hoàn chỉnh với đầy đủ chức năng cho ba vai trò người dùng (học sinh, giảng viên, quản trị viên), đồng thời nâng cao kỹ năng làm việc nhóm và thái độ tích cực trong học tập, nghiên cứu.

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

  • Đối tượng nghiên cứu: Hệ thống website mua bán khóa học trực tuyến, tập trung vào cả phía frontend và backend.
  • Phạm vi công nghệ: ReactJS, TypeScript, Redux (frontend); Node.js, ExpressJS, TypeScript (backend); MySQL (cơ sở dữ liệu); ORM Prisma (giao tiếp backend–database); Axios (giao tiếp frontend–backend); FFMPEG (xử lý video).
  • Phạm vi thời gian: Từ 01/03/2024 đến 09/07/2024.
  • Phạm vi so sánh: Nghiên cứu và phân tích hai nền tảng tham chiếu là Udemy (udemy.com) và Coursera (coursera.org).

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

Khung công nghệ và nền tảng lý thuyết

Nhóm tác giả sử dụng tổ hợp công nghệ theo kiến trúc phân tách frontend–backend rõ ràng:

Thành phần Công nghệ Lý do lựa chọn
Frontend UI ReactJS Component-based, Virtual DOM, cộng đồng lớn, hỗ trợ React Native
Ngôn ngữ TypeScript Kiểu dữ liệu tĩnh, kiểm soát lỗi tại biên dịch, dễ bảo trì
Quản lý trạng thái Redux Quản lý trạng thái toàn cục, đồng bộ hóa dữ liệu hiệu quả
Backend runtime Node.js (V8 engine) Bất đồng bộ, đơn luồng với event loop, tốc độ cao
Web framework ExpressJS Middleware linh hoạt, routing mạnh, phù hợp xây dựng RESTful API
Cơ sở dữ liệu MySQL Ổn định, hiệu suất cao, hỗ trợ Replication và Sharding
ORM Prisma Giao tiếp giữa backend và MySQL
Giao tiếp API Axios Kết nối frontend–backend
Xử lý video FFMPEG Chuyển đổi độ phân giải video theo điều kiện mạng

ReactJS được mô tả với bốn đặc điểm nền tảng: JSX, Component-based, Virtual DOM, và One-Way Data Binding. Node.js được phát triển bởi Ryan Dahl năm 2009, xây dựng trên V8 JavaScript engine của Chrome theo mô hình hướng sự kiện (event-driven) không đồng bộ. TypeScript là ngôn ngữ mã nguồn mở do Microsoft phát triển, được coi là phiên bản nâng cao của JavaScript với kiểu dữ liệu tĩnh, lớp và module.

Phương pháp nghiên cứu

Nhóm áp dụng ba phương pháp chính:

  1. Nghiên cứu tài liệu: Tìm hiểu các công nghệ sử dụng trong dự án (React, Redux, Node.js, MySQL, TypeScript), xem xét các mô hình thiết kế phổ biến cho ứng dụng web, nghiên cứu giải pháp tối ưu hóa hiệu suất và bảo mật.
  2. Phân tích yêu cầu: Xác định yêu cầu chức năng (đăng ký, đăng nhập, tìm kiếm, quản lý giỏ hàng, thanh toán…) và yêu cầu phi chức năng (hiệu suất, bảo mật, trải nghiệm người dùng, khả năng mở rộng và bảo trì).
  3. Phân tích các trang web liên quan: Nghiên cứu điểm mạnh và yếu của Udemy và Coursera để làm cơ sở cải thiện dự án.

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

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

Chương này trình bày tổng quan và lý do lựa chọn từng công nghệ trong stack kỹ thuật của dự án. Với ReactJS, nhóm phân tích các đặc điểm JSX, mô hình phát triển dựa trên component, cơ chế Virtual DOM giúp giảm tải trình duyệt, và luồng dữ liệu một chiều (one-way data binding). Với Node.js, nhóm làm rõ mô hình lập trình hướng sự kiện không đồng bộ, cơ chế đơn luồng với event loop, và khả năng mở rộng cao so với server truyền thống. Với ExpressJS, chương phân tích cơ chế Middleware, hệ thống Routing, xử lý JSON và form data, điều hướng tệp tĩnh, và phản hồi tùy chỉnh từ server đến client. Với MySQL, chương trình bày các đặc điểm về kiểu dữ liệu đa dạng, quản lý quyền truy cập, Replication và Sharding. Với TypeScript, nhóm nhấn mạnh tính năng kiểu dữ liệu tĩnh, lập trình hướng đối tượng với lớp và kế thừa, hỗ trợ IntelliSense trong Visual Studio Code, và khả năng tương thích ngược với JavaScript.

Phần cuối chương tổng hợp kết quả phân tích hai nền tảng tham chiếu: Udemy có giao diện hiện đại nhưng hay gặp sự cố kết nối, giá cao và không cấp chứng chỉ thật; Coursera có giao diện hàn lâm, khóa học phân nhóm theo ngành nghề nhưng cũng có vấn đề tương tự về kết nối và giá cả. Từ đó, nhóm xác định các hướng cải thiện cho hệ thống của mình.

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

Chương này là phần thiết kế kỹ thuật trọng tâm của đồ án, bao gồm:

Use Case Diagram được xây dựng cho bốn actor: Guest (khách), Student (học sinh), Teacher (giảng viên), và Admin (người quản trị). Tổng cộng 21 use case được đặc tả chi tiết, bao gồm:

Nhóm tác nhân Các use case chính
Người dùng / Học sinh Tìm kiếm khóa học (UC01), Thêm/Xóa/Chuyển khóa học vào giỏ hàng (UC02–UC04), Thanh toán VNPay (UC05), Kiểm tra coupon (UC06), Học tập–ghi nhận kết quả (UC08), Kiểm tra–ghi nhận kết quả (UC07), Học thử (UC13), Báo cáo khóa học (UC12), Tìm kiếm blog (UC15)
Giảng viên Thêm/Xóa/Sửa khóa học (UC09), Thêm/Xóa/Sửa bài giảng (UC10), Cấp chứng chỉ (UC11), Yêu cầu duyệt khóa học (UC14), Thống kê giảng viên (UC16)
Quản trị viên Thống kê hệ thống (UC17), Duyệt/Ẩn khóa học (UC18), Ra quyết định trên khóa học (UC19), Thêm/Xóa/Sửa sự kiện (UC20), Chỉnh sửa tỉ lệ phần thưởng sự kiện (UC21)

Mỗi use case được đặc tả đầy đủ mục đích, mô tả, tác nhân, điều kiện trước/sau, và luồng sự kiện chính lẫn phụ. Đáng chú ý là luồng thanh toán UC05 tích hợp cổng thanh toán VNPay; luồng UC06 áp dụng cơ chế captcha xác nhận khi dùng mã coupon; luồng UC08 ghi nhận tiến độ học tập tự động; và luồng UC11 tự động tạo và gửi chứng chỉ qua email khi học viên đạt bài kiểm tra toàn khóa.

Thiết kế cơ sở dữ liệu bao gồm lược đồ ERD với các bảng quan trọng như Test_history_detail (lưu lịch sử làm bài kiểm tra) và Reply_comment_lecture (lưu bình luận và phản hồi trong bài giảng).

Thiết kế giao diện được trình bày qua hơn 80 màn hình (GD), bao gồm: trang chủ, tất cả khóa học, chi tiết khóa học, trang cá nhân, nội dung khóa học, giỏ hàng, thanh toán, kết quả thanh toán, lịch sử giao dịch, trang xem video bài học, trang làm bài kiểm tra, thông báo hoàn thành khóa học, trang chứng chỉ, trang thống kê (cho giảng viên và quản trị viên), quản lý danh mục, quản lý người dùng, xét duyệt khóa học, quản lý phản hồi, quản lý sự kiện, và quản lý coupon.

Chương 3: Kiểm thử

Chương trình bày cả lý thuyết kiểm thử lẫn quá trình thực thi. Về lý thuyết, nhóm đề cập ba cấp độ: kiểm thử đơn vị (Unit Testing), kiểm thử tích hợp (Integration Testing), và kiểm thử hệ thống (System Testing). Về thực hành, nhóm thực hiện kiểm tra API và kiểm thử tự động hệ thống với Selenium WebDriver.

Quá trình kiểm thử tự động bao gồm cài đặt công cụ Selenium, xây dựng file test-selenium và chạy ít nhất 5 test case trên giao diện thật. Kết quả kiểm thử được tổng hợp thành bảng và hình minh họa trong báo cáo.

Thiết kế và triển khai

Kiến trúc hệ thống

Hệ thống được xây dựng theo kiến trúc MVC (Model–View–Controller) phía backend, với sự phân tách rõ ràng giữa hai lớp:

  • Frontend: ReactJS + TypeScript + Redux, triển khai giao diện người dùng với quản lý trạng thái toàn cục qua Redux.
  • Backend: Node.js + ExpressJS + TypeScript, cung cấp RESTful API, xử lý xác thực và phân quyền (authentication & authorization).
  • Giao tiếp: Axios làm cầu nối giữa frontend và backend qua các endpoint RESTful API.
  • Cơ sở dữ liệu: MySQL, truy cập thông qua ORM Prisma.
  • Xử lý video: FFMPEG thực hiện chuyển đổi độ phân giải video để thích ứng với các điều kiện mạng khác nhau.

Công nghệ và tính năng triển khai

Hệ thống được phát triển theo lịch trình 10 giai đoạn từ 01/03/2024 đến 09/07/2024. Giai đoạn đầu (01–20/03) tập trung nghiên cứu công nghệ và tham khảo Coursera, Udemy. Giai đoạn giữa (26/03–01/05) hoàn thành thiết kế database, các diagram, đặc tả use case, và cài đặt phần giao diện học sinh kèm API xác thực phân quyền. Tiếp theo (01–20/05) triển khai giao diện và API phía giảng viên, rồi (20/05–10/06) hoàn thành phần quản trị viên. Giai đoạn cuối (10–20/06) thực hiện kiểm thử toàn hệ thống, deploy, và viết báo cáo.

Các tính năng đặc trưng bao gồm:

  • Hệ thống tùy chỉnh chất lượng video theo điều kiện mạng thông qua FFMPEG.
  • Tích hợp cổng thanh toán VNPay.
  • Hệ thống sự kiện (event) với tỉ lệ phần thưởng có thể cấu hình, cho phép học viên săn coupon.
  • Hệ thống chatbot hỗ trợ người dùng trong quá trình sử dụng.
  • Cấp chứng chỉ tự động qua email khi học viên hoàn thành bài kiểm tra toàn khóa.
  • Kiểm soát nội dung bình luận và cơ chế báo xấu khóa học để quản trị viên xử lý.

Kiểm thử

Nhóm áp dụng hai hình thức kiểm thử chính: kiểm tra API thủ công và kiểm thử tự động giao diện bằng Selenium WebDriver. Ít nhất 5 test case được thiết kế, thực thi và ghi nhận kết quả. File test-selenium được đưa vào phụ lục của báo cáo. Ngoài ra, nhóm tiến hành deploy hệ thống trong giai đoạn từ 15 đến 20/06/2024.

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

Kết quả chính

Theo kết quả dự kiến mà nhóm đề ra và đã thực hiện, hệ thống đạt được các thành phần sau:

Hệ thống con Mô tả kết quả
Giao diện người dùng Thiết kế thân thiện, dễ sử dụng với hơn 80 màn hình giao diện
Quản lý khóa học Thêm, sửa, xóa khóa học; thống kê số liệu liên quan
Hệ thống thanh toán Tích hợp VNPay; hỗ trợ coupon săn được qua sự kiện
Hệ thống học tập Ghi nhận tiến độ học; tùy chỉnh chất lượng video bằng FFMPEG
Hệ thống bài viết (blog) Quản trị viên tạo bài viết; người dùng tìm kiếm theo từ khóa và danh mục
Đánh giá và phản hồi Đánh giá chất lượng khóa học; báo xấu khóa học; kiểm soát bình luận
Quản lý tài khoản Đăng ký, đăng nhập, phân quyền ba vai trò; bảo mật thông tin cá nhân
Chatbot Hỗ trợ người dùng trong quá trình sử dụng website
Thống kê Thống kê cho giảng viên và quản trị viên (doanh thu theo danh mục, theo tháng, tổng số khóa học, tổng số người dùng, xếp hạng giảng viên, xếp hạng khóa học)
Chứng chỉ Tạo và gửi chứng chỉ tự động qua email khi học viên vượt qua bài kiểm tra toàn khóa

Kiến nghị và hướng phát triển

Nhóm tác giả đề xuất trong phần Kết luận rằng hệ thống có thể phát triển thêm các tính năng nâng cao và mở rộng quy mô theo phản hồi thực tế từ người dùng.

Đóng góp so với nghiên cứu trước

So với các nền tảng được phân tích (Udemy, Coursera), hệ thống được xây dựng trong đồ án hướng đến: (1) cấp chứng chỉ hoàn thành khóa học có giá trị xác thực gửi qua email — điều mà Udemy không thực hiện; (2) tích hợp cơ chế sự kiện và coupon để giảm giá khóa học, phù hợp hơn với túi tiền người dùng Việt; (3) tùy chỉnh chất lượng video theo điều kiện mạng thực tế thông qua FFMPEG; (4) xây dựng hệ thống chatbot hỗ trợ người dùng — chức năng không có trong phạm vi phân tích hai nền tảng tham chiếu.

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

Hạn chế được đề cập trong văn bản

Nhóm tác giả tự nhận thức về hai giới hạn chính: thứ nhất, đề tài được thực hiện trong khoảng thời gian ngắn (khoảng 4 tháng, từ 01/03 đến 09/07/2024); thứ hai, kiến thức và kinh nghiệm của nhóm về phát triển dự án web còn hạn chế, không tránh khỏi thiếu sót trong quá trình nghiên cứu và triển khai. Nhóm đã nêu rõ điều này trong phần Lời cảm ơn.

Hướng phát triển tiếp theo

Đồ án có phần riêng về "Hướng phát triển" ở cuối báo cáo (trang 114), tuy nhiên nội dung chi tiết của phần này không có trong fulltext được cung cấp. Dựa trên phạm vi thực hiện, hệ thống có thể được mở rộng theo các hướng như: cải thiện hiệu suất và tối ưu tốc độ tải trang, tăng cường cơ chế tương tác theo thời gian thực giữa giảng viên và học viên, bổ sung tính năng học trên thiết bị di động thông qua React Native (được đề cập trong phần lý do chọn ReactJS), và mở rộng phương thức thanh toán ngoài VNPay.

Giá trị tham khảo

Đồ án phù hợp để tham khảo cho các nhóm đối tượng sau:

  • Sinh viên CNTT, Công nghệ Phần mềm đang học hoặc bắt đầu làm quen với bộ công nghệ Node.js + ReactJS + TypeScript + MySQL có thể tham khảo Chương 1 như một tài liệu tổng hợp lý do lựa chọn và đặc điểm từng công nghệ, cùng Chương 2 để học cách xây dựng use case diagram và đặc tả use case cho hệ thống nhiều vai trò người dùng.
  • Sinh viên làm đồ án phát triển web với các nền tảng tương tự có thể học cách tổ chức kế hoạch triển khai theo tuần (10 giai đoạn cụ thể), cách phân chia chức năng theo actor, và cách tích hợp thanh toán VNPay vào hệ thống.
  • Nhóm làm đề tài kiểm thử phần mềm có thể tham khảo Chương 3 về cách thiết kế test case và triển khai kiểm thử tự động với Selenium WebDriver cho ứng dụng web.
  • Sinh viên muốn xây dựng nền tảng e-learning cho thị trường Việt Nam có thể tham khảo phần phân tích điểm mạnh/yếu của Udemy và Coursera, cùng danh sách tính năng được xây dựng để cải thiện những hạn chế đó.

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

1. Hệ thống hỗ trợ những vai trò người dùng nào và mỗi vai trò có quyền gì? Hệ thống có bốn actor: Guest (khách chưa đăng nhập, chỉ học thử và xem thông tin công khai), Student (học sinh đã đăng nhập: mua khóa học, học, làm bài kiểm tra, nhận chứng chỉ, báo xấu), Teacher/Giảng viên (tạo và quản lý khóa học, thêm/xóa/sửa bài giảng, yêu cầu duyệt, xem thống kê của mình), và Admin/Quản trị viên (duyệt/ẩn khóa học, quản lý người dùng, danh mục, sự kiện, coupon, xem toàn bộ thống kê hệ thống).

2. Quy trình để một khóa học được hiển thị công khai trên website là gì? Giảng viên sau khi tạo khóa học và thêm bài giảng sẽ vào tab "Tình trạng khóa học", nhấn "Gửi yêu cầu" để gửi yêu cầu duyệt đến quản trị viên (UC14). Hệ thống hiển thị trạng thái "Đang chờ duyệt". Quản trị viên vào tab "Phê duyệt khóa học", chọn khóa học, xem trạng thái và nhấn nút "Duyệt khóa học" (UC18) để công khai. Quản trị viên cũng có thể "Ẩn khóa học" đã duyệt để đưa về trạng thái bị hạn chế.

3. Hệ thống cấp chứng chỉ cho học viên theo quy trình như thế nào? Theo UC11, sau khi người dùng hoàn thành bài kiểm tra toàn khóa (final exam) và đạt điểm yêu cầu, hệ thống tự động ghi nhận kết quả, tạo chứng chỉ và gửi qua email cho người dùng. Giao diện hiển thị thông báo chúc mừng hoàn thành khóa học. Người dùng có thể xem trang chứng chỉ trực tiếp trên website. Đây là điểm khác biệt so với Udemy, nền tảng mà theo phân tích của nhóm chỉ ghi nhận kết quả học tập cá nhân mà không cấp chứng chỉ thật sự.

4. Hệ thống xử lý video bài giảng bằng công nghệ nào và có tính năng gì? Hệ thống sử dụng FFMPEG để xử lý chuyển đổi độ phân giải video. Trong quá trình học (UC08), người dùng có thể tương tác với video player bao gồm tùy chọn chất lượng video, âm thanh, tua video. Tính năng chuyển đổi độ phân giải này nhằm đảm bảo trải nghiệm học tập ổn định với các điều kiện mạng khác nhau của người dùng — đây là một trong những hạn chế mà nhóm nhận thấy ở Udemy và Coursera.

5. Cơ chế sự kiện (event) và coupon trong hệ thống hoạt động như thế nào? Quản trị viên có thể thêm, xóa, sửa sự kiện (UC20) và chỉnh sửa tỉ lệ phần thưởng trong từng sự kiện (UC21). Người dùng tham gia sự kiện để săn coupon (mã giảm giá). Khi thanh toán (UC05–UC06), người dùng nhập hoặc chọn mã coupon đã có trong ô mã giảm giá tại trang giỏ hàng. Hệ thống áp dụng cơ chế captcha để xác nhận mã, sau đó cập nhật tổng giá trị đơn hàng nếu coupon hợp lệ.

Kết luận

Đồ án tốt nghiệp "Xây dựng website mua bán khóa học online" của nhóm sinh viên Nguyễn Trương Nhân và Bùi Văn Hữu Phước (HCMUTE, 2024) là một công trình xây dựng phần mềm thực hành toàn diện, sử dụng bộ công nghệ Node.js + ExpressJS + ReactJS + TypeScript + MySQL với tích hợp các thư viện và công cụ bổ trợ như Redux, Prisma, Axios, FFMPEG và Selenium. Hệ thống được thiết kế cho bốn vai trò người dùng với 21 use case chi tiết, tích hợp thanh toán VNPay, cấp chứng chỉ tự động, xử lý video đa chất lượng và kiểm thử tự động bằng Selenium WebDriver. Đồ án phản ánh quá trình vận dụng kiến thức kỹ thuật phần mềm vào bài toán thực tiễn của thị trường học trực tuyến tại Việt Nam, đồng thời cung cấp tài liệu tham khảo có giá trị cho sinh viên CNTT đang tiếp cận phát triển ứng dụng web theo mô hình phân tách frontend–backend.