Khóa Luận Tốt Nghiệp ĐH: Xây Dựng Website Học Tập SQuiz với MERN Stack Môn Toán thống kê | Trường Đại học Huế

ĐẠI HỌC HUẾ
TRƯỜNG ĐẠI HỌC KHOA HỌC
KHOA CÔNG NGHỆ THÔNG TIN (in đậm) KHOÁ LUẬN
TỐT NGHIỆP ĐẠI HỌC Đề tài:
XÂY DỰNG WEBSITE HỌC TẬP
VÀ THI TRẮC NGHIỆM SQUIZ VỚI STACK MERN
Sinh viên thực hiện: LÊ XUÂN TOÀN PHAN ÁNH NHẬT Khóa: K-45
Huế 21, tháng 05 – năm 2025 ĐẠI HỌC HUẾ
TRƯỜNG ĐẠI HỌC KHOA HỌC
KHOA CÔNG NGHỆ THÔNG TIN (in đậm) KHOÁ LUẬN
TỐT NGHIỆP ĐẠI HỌC Đề tài:
XÂY DỰNG WEBSITE HỌC TẬP
VÀ THI TRẮC NGHIỆM SQUIZ VỚI STACK MERN
Sinh viên thực hiện: LÊ XUÂN TOÀN PHAN ÁNH NHẬT Khóa: K-45
Giáo viên hướng dẫn: NGUYỄN HOÀNG HÀ
Huế 21, tháng 05 – năm 2025 2 LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến toàn thể quý thầy cô
trong khoa Công nghệ thông tin, trường Đại học Khoa Học, những người đã
truyền đạt cho em những kiến thức quý báu và hỗ trợ em trong suốt quá trình
học tập và thực hiện khóa luận.
Đặc biệt, em xin bày tỏ lòng biết ơn sâu sắc đến giảng viên hướng dẫn
Nguyễn Hoàng Hà, người đã luôn đồng hành, định hướng và góp ý tận tình
để em có thể hoàn thành đề tài một cách tốt nhất.
Khóa luận với đề tài “Xây dựng website học tập và thi trắc nghiệm Squiz
với stack MERN” là kết quả của quá trình tìm hiểu, nghiên cứu và ứng
dụng công nghệ mà em đã tích lũy trong suốt thời gian học. Mặc dù đã cố
gắng hết sức, nhưng chắc chắn không thể tránh khỏi những thiếu sót. Em rất
mong nhận được những ý kiến đóng góp quý báu từ quý thầy cô để hoàn
thiện hơn trong tương lai.
Em xin chân thành cảm ơn!
CHƯƠNG 1: MỞ ĐẦU
1. Phát biểu bài toán
Hiện nay, nhu cầu học tập và kiểm tra trực tuyến ngày càng tăng cao, đặc
biệt trong bối cảnh giáo dục trực tuyến phát triển mạnh mẽ. Các nền tảng
như Quizizz, Kahoot! đã chứng minh hiệu quả trong việc tạo ra môi
trường học tập tương tác, sinh động. Tuy nhiên, việc xây dựng một hệ
thống tương tự với đầy đủ tính năng như tạo đề thi, làm bài trắc nghiệm,
chấm điểm tự động, và quản lý người dùng vẫn còn là thách thức về mặt kỹ thuật.
Do đó, bài toán đặt ra là: Xây dựng một trang web học tập và thi trắc
nghiệm trực tuyến sử dụng stack MERN (MongoDB, Express.js,
React.js, Node.js) để cung cấp một giải pháp tối ưu, dễ sử dụng, có khả
năng mở rộng và đáp ứng nhu cầu của cả người dạy và người học.
2. Lý do chọn đề tài
Việc phát triển một hệ thống như Quizizz không chỉ đáp ứng nhu cầu thực
tiễn về học và thi trực tuyến mà còn mang lại nhiều lợi ích tiềm năng. Cụ thể:
- Tính cấp thiết của chuyển đổi số trong giáo dục: Đại dịch
COVID-19 đã thúc đẩy mạnh mẽ quá trình chuyển đổi số trong
giáo dục, tạo ra nhu cầu bức thiết về các công cụ học tập và đánh giá từ xa.
- Nâng cao chất lượng giảng dạy và học tập: Hệ thống giúp sinh
viên tự ôn luyện, kiểm tra kiến thức mọi lúc mọi nơi; hỗ trợ giảng
viên dễ dàng tạo bài kiểm tra, chấm điểm tự động và phân tích kết
quả, từ đó đưa ra đánh giá chính xác hơn.
- Tính ứng dụng cao của MERN Stack: Việc lựa chọn MERN
Stack (MongoDB, Express.js, React, Node.js) mang lại nhiều ưu
điểm vượt trội như khả năng xây dựng ứng dụng nhanh chóng, hiệu 4
suất cao, dễ dàng mở rộng và cộng đồng hỗ trợ lớn. Đây là một bộ
công nghệ hiện đại, phù hợp để xây dựng các ứng dụng web động và tương tác.
- Cơ hội học hỏi và phát triển kỹ năng: Đề tài này cung cấp cơ hội
tuyệt vời để em áp dụng kiến thức đã học vào thực tế, củng cố kỹ
năng lập trình full-stack với MERN,
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
1. Tổng quan về MERN Stack
MERN Stack là một tập hợp các công nghệ JavaScript mã nguồn mở
được sử dụng để xây dựng các ứng dụng web động và mạnh mẽ. MERN
là từ viết tắt của MongoDB, Express.js, React và Node.js. Sự kết hợp của
chúng cho phép phát triển các ứng dụng toàn diện từ frontend đến
backend chỉ với JavaScript, tạo ra một luồng phát triển liền mạch và hiệu quả. 1.1. MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL (Not Only SQL)
mã nguồn mở, được thiết kế để lưu trữ dữ liệu dạng tài liệu
(document-oriented database) với cấu trúc linh hoạt. Khác với cơ
sở dữ liệu quan hệ truyền thống, MongoDB lưu trữ dữ liệu dưới
dạng các tài liệu BSON (Binary JSON), cho phép các tài liệu trong
cùng một tập hợp (collection) có thể có cấu trúc khác nhau. - Ưu điểm:
o Tính linh hoạt: Cấu trúc schema dynamic cho phép dễ dàng
thay đổi cấu trúc dữ liệu mà không cần migration phức tạp.
o Khả năng mở rộng: Hỗ trợ sharding (phân mảnh dữ liệu) và
replication (nhân bản dữ liệu) để xử lý lượng lớn dữ liệu và
đảm bảo tính sẵn sàng cao.
Hiệu suất cao: Tối ưu cho việc đọc/ghi dữ liệu lớn, đặc biệt khi dữ
liệu có cấu trúc phân cấp.
Dễ tích hợp: Dễ dàng làm việc với JavaScript/JSON, phù hợp với MERN Stack.
- Cấu trúc dữ liệu:
Document (Tài liệu): Đơn vị dữ liệu cơ bản trong MongoDB, tương
tự một hàng trong cơ sở dữ liệu quan hệ, nhưng lưu trữ dưới dạng JSON.
Collection (Tập hợp): Nhóm các document có cấu trúc tương tự,
tương tự một bảng trong cơ sở dữ liệu quan hệ.
Tương tác với MongoDB: Trong Node.js, thư viện Mongoose được
sử dụng làm ODM (Object Data Modeling) để tương tác với
MongoDB. Mongoose cung cấp một cách tiếp cận dựa trên schema
để mô hình hóa dữ liệu ứng dụng, giúp việc thao tác dữ liệu trở nên
trực quan và mạnh mẽ hơn. 1.2. Express
Express.js là một framework ứng dụng web tối giản và linh hoạt
cho Node.js. Nó cung cấp một tập hợp các tính năng mạnh mẽ để
xây dựng các ứng dụng web và API RESTful một cách nhanh
chóng. Express.js không ép buộc một cấu trúc kiến trúc cụ thể nào,
mang lại sự tự do trong việc thiết kế ứng dụng.
- Khái niệm cốt lõi:
o Router: Hệ thống định tuyến cho phép định nghĩa các
endpoint API và các hàm xử lý tương ứng với từng yêu cầu
HTTP (GET, POST, PUT, DELETE). 6
o Middleware: Các hàm được thực thi giữa lúc nhận yêu cầu
và gửi phản hồi. Middleware có thể thực hiện nhiều tác vụ
như xác thực người dùng, ghi log, xử lý lỗi, phân tích cú pháp dữ liệu yêu cầu.
o Xử lý Request và Response: Express.js cung cấp các đối
tượng req (request) và res (response) để dễ dàng truy cập dữ
liệu từ yêu cầu gửi đến (query parameters, body data,
headers) và gửi phản hồi lại client (JSON, HTML, status codes).
o Vai trò: Trong MERN Stack, Express.js đóng vai trò là
xương sống của backend, xử lý các yêu cầu HTTP từ
frontend, tương tác với cơ sở dữ liệu MongoDB và gửi dữ
liệu phản hồi về client. 1.3. ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở do Facebook phát
triển, được sử dụng để xây dựng giao diện người dùng (User
Interface - UI) tương tác và hiệu quả. React tập trung vào việc tạo
ra các thành phần UI có thể tái sử dụng, giúp đơn giản hóa quá
trình phát triển các ứng dụng web phức tạp.
• Khái niệm chính:
o Component (Thành phần): Đơn vị cơ bản của React. Một ứng dụng
React được xây dựng từ nhiều component nhỏ, độc lập và có thể tái
sử dụng. Mỗi component có thể có logic và giao diện riêng.
o JSX (JavaScript XML): Một cú pháp mở rộng của JavaScript, cho
phép viết cấu trúc UI theo kiểu XML/HTML trực tiếp trong mã
JavaScript. JSX giúp việc mô tả giao diện trở nên trực quan hơn.
o State (Trạng thái): Dữ liệu nội bộ của một component, có thể thay
đổi theo thời gian và gây ra việc re-render component khi thay đổi.
o Props (Thuộc tính): Dữ liệu được truyền từ component cha
xuống component con, chỉ đọc (read-only) và giúp các
component giao tiếp với nhau.
o Virtual DOM: React sử dụng một bản sao ảo của DOM
(Document Object Model) để tối ưu hóa việc cập nhật giao
diện. Khi trạng thái thay đổi, React sẽ so sánh Virtual DOM
cũ và mới để tìm ra điểm khác biệt và chỉ cập nhật những
phần cần thiết trên DOM thật, giúp tăng hiệu suất.
o Quản lý trạng thái: Đối với các ứng dụng lớn, việc quản lý
trạng thái có thể trở nên phức tạp. Có nhiều giải pháp như
Context API (tích hợp sẵn trong React) hoặc các thư viện bên
thứ ba như Redux (được sử dụng phổ biến cho các ứng dụng
quy mô lớn) để quản lý trạng thái toàn cục của ứng dụng.
o Routing trong React: Thư viện React Router DOM được sử
dụng để quản lý việc điều hướng (routing) trong ứng dụng
React, cho phép tạo các URL thân thiện và chuyển đổi giữa
các trang mà không cần tải lại toàn bộ trang. 1.4. NodeJS
Node.js là một môi trường runtime JavaScript mã nguồn mở, đa
nền tảng, cho phép thực thi mã JavaScript ở phía máy chủ (server-
side). Node.js sử dụng engine JavaScript V8 của Google Chrome,
nổi tiếng với hiệu suất cao và khả năng xử lý bất đồng bộ.
- Kiến trúc bất đồng bộ, non-blocking I/O: Node.js hoạt động dựa
trên mô hình sự kiện (event-driven) và kiến trúc non-blocking I/O
(vào/ra không chặn). Điều này cho phép Node.js xử lý nhiều yêu
cầu đồng thời mà không cần tạo ra nhiều luồng (thread) mới, giúp 8
tiết kiệm tài nguyên và tăng hiệu suất, đặc biệt phù hợp cho các ứng
dụng có nhiều tác vụ I/O (như đọc/ghi file, truy vấn database, gọi API).
- Vai trò: Trong MERN Stack, Node.js là môi trường mà Express.js
chạy trên đó. Nó đóng vai trò là cầu nối giữa frontend (React) và cơ
sở dữ liệu (MongoDB), xử lý các yêu cầu từ client, thực hiện logic
nghiệp vụ, và trả về dữ liệu.
1.5. Các công nghệ và kĩ thuật bổ trợ
Để xây dựng một ứng dụng web toàn diện và an toàn, ngoài các
thành phần cốt lõi của MERN Stack, còn cần áp dụng các công
nghệ và kỹ thuật bổ trợ khác.
1.5.1. Authentication và Authorization
- Authentication (Xác thực): Quá trình kiểm tra danh tính của người dùng.
- Authorization (Phân quyền): Quá trình xác định quyền truy cập của
người dùng đối với các tài nguyên cụ thể sau khi đã được xác thực.
Trong khóa luận này, Clerk được lựa chọn để xử lý xác thực người dùng.
1.5.2. Web Sockets (nếu có ứng dụng cho tính năng phòng thi trực tuyến)
Web Sockets là một giao thức truyền thông cung cấp kênh giao tiếp
hai chiều, full-duplex (song công) qua một kết nối TCP duy nhất.
Khác với HTTP (giao thức request-response), Web Sockets cho
phép server đẩy dữ liệu đến client và ngược lại mà không cần client phải gửi yêu cầu.
- Ứng dụng: Web Sockets lý tưởng cho các tính năng tương tác thời gian thực như:
o Thi trắc nghiệm trực tiếp giữa nhiều người chơi. Thông báo tức thì.
Cập nhật điểm số trực tiếp.
- Thư viện: Socket.IO là một thư viện phổ biến để triển khai Web
Sockets trong Node.js (phía server) và trình duyệt (phía client),
cung cấp khả năng tự động reconnect, fallback về polling, và đơn giản hóa API.
1.5.3. Các công nghệ khác
- Thư viện hỗ trợ UI/UX:
Tailwind CSS: Một framework CSS utility-first, cho phép
xây dựng giao diện tùy chỉnh bằng cách kết hợp các class tiện ích
nhỏ gọn trực tiếp trong HTML/JSX, thay vì viết CSS truyền thống.
- Thư viện HTTP Client:
Axios: Một thư viện JavaScript dựa trên Promise được sử
dụng để thực hiện các yêu cầu HTTP (GET, POST, PUT,
DELETE) từ trình duyệt hoặc Node.js. Axios cung cấp các tính
năng mạnh mẽ như interceptors (chặn request/response), tự động
chuyển đổi JSON, xử lý lỗi.
2. Kiến trúc và thiết kế hệ thống
2.1. Bố cục kiến trúc tổng thể
Hệ thống học tập và thi trắc nghiệm trực tuyến được xây dựng theo kiến
trúc Client-Server với mô hình API RESTful.
- Mô hình Client-Server:
o Client (Frontend): Được phát triển bằng React, chịu trách
nhiệm hiển thị giao diện người dùng, xử lý tương tác từ phía
người dùng và gửi các yêu cầu (requests) đến Server (Backend). 10
o Server (Backend): Được xây dựng bằng Node.js và
Express.js, đóng vai trò xử lý các yêu cầu từ Client, thực hiện
logic nghiệp vụ, tương tác với cơ sở dữ liệu MongoDB, và
trả về phản hồi (responses) cho Client.
- Kiến trúc API RESTful:
o Tất cả các giao tiếp giữa Client và Server đều thông qua các
API RESTful. Các tài nguyên (ví dụ: người dùng, bài thi, câu
hỏi, kết quả) được truy cập thông qua các URL duy nhất và
các phương thức HTTP tiêu chuẩn (GET, POST, PUT, DELETE).
o Mỗi endpoint API được thiết kế để thực hiện một hành động
cụ thể trên một tài nguyên, đảm bảo tính rõ ràng, dễ hiểu và dễ mở rộng. Ví dụ:
o GET /api/quizzes: Lấy danh sách tất cả các bài thi.
o POST /api/quizzes: Tạo một bài thi mới.
o GET /api/quizzes/:id: Lấy thông tin chi tiết của một bài thi cụ thể.
2.2. Các thành phần chính của ứng dụng
2.2.1. Thành phần Frontend (React)
Cấu trúc thư mục của dự án React được tổ chức một cách logic
để dễ quản lý và mở rộng:
• src/: Thư mục chính chứa mã nguồn của ứng dụng React.
o assets/: Chứa các tài nguyên tĩnh như hình ảnh, biểu tượng.
o components/: Chứa các thành phần UI có thể tái sử dụng và
độc lập (ví dụ: Button.jsx, Input.jsx, Modal.jsx, Navbar.jsx, LoadingSpinner.jsx).
o pages/: Chứa các component cấp cao nhất đại diện cho các
trang riêng biệt trong ứng dụng (ví dụ: HomePage.jsx,
LoginPage.jsx, QuizDetailPage.jsx, AdminDashboard.jsx).
o contexts/ hoặc redux/ (nếu dùng Redux): Chứa logic quản lý
trạng thái toàn cục của ứng dụng (ví dụ: AuthContext.jsx để
quản lý thông tin người dùng đăng nhập).
o services: Chứa các hàm để gọi API đến backend (ví dụ:
authService.js, quizService.js). Sử dụng thư viện Axios để
thực hiện các HTTP request.
o utils: Chứa các hàm tiện ích chung (ví dụ: helpers.js, constants.js, validator.js).
o routes: Định nghĩa các route cho ứng dụng sử dụng React Router DOM.
o App.js: Component gốc của ứng dụng, nơi tập hợp các route và cấu hình chung.
o index.js: Điểm khởi đầu của ứng dụng React.
- Cách thức quản lý trạng thái và luồng dữ liệu:
o Stateful Components (Container Components): Các
component cấp cao (thường là trong thư mục pages) sẽ quản
lý trạng thái phức tạp, gọi API, và truyền dữ liệu xuống các
component con thông qua props.
o Stateless Components (Presentational Components): Các
component nhỏ hơn, chỉ nhận props từ cha và hiển thị UI,
không quản lý trạng thái nội bộ.
o Context API: Được sử dụng để quản lý các trạng thái toàn
cục (ví dụ: thông tin người dùng đang đăng nhập, trạng thái
thông báo) mà không cần truyền props thủ công qua nhiều cấp.
2.2.2. Thành phần Backend (Node.js/Express)
Cấu trúc thư mục của dự án Node.js/Express cũng được tổ chức
chặt chẽ theo nguyên tắc phân tách trách nhiệm (Separation of Concerns): 12
- server.js hoặc app.js: File khởi tạo server Express và cấu hình các middleware cơ bản.
- config/: Chứa các file cấu hình ứng dụng (ví dụ: db.js để kết nối
MongoDB, config.js cho các biến môi trường).
- models/: Chứa các Schema và Model Mongoose để định nghĩa cấu
trúc dữ liệu và tương tác với MongoDB (ví dụ: User.js, Quiz.js, Question.js, Result.js).
- routes/: Chứa các Router Express định nghĩa các endpoint API và
ánh xạ chúng tới các Controller (ví dụ: authRoutes.js,
userRoutes.js, quizRoutes.js).
- controllers/: Chứa các hàm xử lý logic nghiệp vụ cho từng route.
Các hàm này nhận yêu cầu từ client, thực hiện các thao tác với cơ
sở dữ liệu thông qua Model, và trả về phản hồi (ví dụ:
userController.js, quizController.js).
- middlewares/: Chứa các hàm middleware Express để xử lý các tác vụ chung như:
o authMiddleware.js: Kiểm tra và xác thực JWT.
- utils/: Chứa các hàm tiện ích, helpers (ví dụ: generateToken.js, validation.js). -
- Thiết kế API Routes:
o Sử dụng cú pháp RESTful, ví dụ: ▪ GET /api/users ▪ GET /api/users/:id ▪ POST /api/users ▪ PUT /api/users/:id ▪ DELETE /api/users/:id
o Các route được bảo vệ bằng middleware xác thực và phân
quyền (ví dụ: chỉ Admin mới có thể truy cập các route quản lý người dùng).
2.3. Các chức năng chính của ứng dụng
Hệ thống được thiết kế để hỗ trợ ba vai trò người dùng chính:
Khách (Guest), Sinh viên (User) và Giảng viên/Quản trị viên
(Admin), với các chức năng tương ứng.
2.3.1. Chức năng chung (Dành cho Khách và Người dùng đã đăng nhập)
- Đăng ký tài khoản: Cho phép người dùng mới tạo tài khoản để trở thành "Sinh viên".
- Đăng nhập/Đăng xuất: Xác thực người dùng bằng email/tên đăng
nhập và mật khẩu, cấp/hủy bỏ phiên làm việc (JWT).
- Quên mật khẩu: Cung cấp cơ chế khôi phục mật khẩu thông qua email.
- Đổi mật khẩu: Cho phép người dùng đã đăng nhập thay đổi mật khẩu của mình.
- Xem/Cập nhật thông tin cá nhân: Người dùng có thể xem và chỉnh
sửa các thông tin cơ bản về hồ sơ của mình.
2.3.2. Chức năng dành cho Sinh viên (User)
- Tìm kiếm và tham gia bài thi:
o Tìm kiếm bài thi: Sinh viên có thể tìm kiếm bài thi theo tên,
chủ đề, hoặc mã bài thi.
o Tham gia phòng thi trắc nghiệm: Nhập mã phòng thi để tham
gia trực tiếp một bài kiểm tra được tạo bởi giảng viên.
- Làm bài thi trắc nghiệm:
o Hiển thị câu hỏi: Trình bày các câu hỏi theo thứ tự hoặc ngẫu
nhiên (nếu được cài đặt). 14
o Đa dạng loại câu hỏi: Hỗ trợ các loại câu hỏi phổ biến:
▪ Chọn một đáp án: Câu hỏi trắc nghiệm có một lựa chọn đúng duy nhất.
▪ Chọn nhiều đáp án: Câu hỏi trắc nghiệm có thể có nhiều lựa chọn đúng.
▪ Điền vào chỗ trống (nếu có thể triển khai): Yêu cầu
người dùng nhập văn bản vào chỗ trống.
o Đồng hồ đếm ngược: Hiển thị thời gian còn lại của bài thi.
o Lưu đáp án tạm thời: Cho phép sinh viên chuyển đổi giữa các
câu hỏi mà không làm mất đáp án đã chọn.
o Nộp bài: Hoàn tất bài thi và gửi đáp án lên server.
- Xem kết quả bài thi:
o Kết quả tức thì: Hiển thị điểm số ngay sau khi nộp bài.
o Phân tích chi tiết: Cho phép sinh viên xem lại bài làm, bao
gồm câu hỏi, đáp án đã chọn, đáp án đúng và giải thích (nếu có).
- Xem lịch sử làm bài: Danh sách các bài thi đã làm, bao gồm điểm
số, thời gian làm bài, và trạng thái.
- Lưu bài thi yêu thích: Đánh dấu các bài thi để dễ dàng truy cập lại sau này.
2.3.3. Chức năng dành cho Quản trị viên (Admin)
- Quản lý người dùng:
o Xem danh sách người dùng: Hiển thị tất cả người dùng trong
hệ thống (sinh viên, giảng viên khác).
o Thêm, sửa, xóa người dùng: Cấp quyền tạo, chỉnh sửa thông
tin, và xóa tài khoản người dùng.
o Phân quyền người dùng: Thay đổi vai trò của người dùng (ví
dụ: nâng cấp sinh viên lên giảng viên).
- Quản lý bài thi (Quiz Management):
o Tạo bài thi mới: Giảng viên có thể thiết lập các thông tin cơ
bản của bài thi (tên, mô tả, chủ đề, thời gian làm bài, số
lượng câu hỏi, chế độ xáo trộn câu hỏi/đáp án).
o Sửa/Xóa bài thi: Chỉnh sửa thông tin hoặc xóa bài thi đã tạo.
o Xem danh sách bài thi: Hiển thị tất cả các bài thi đã tạo.
- Quản lý câu hỏi (Question Management):
o Tạo câu hỏi: Thêm câu hỏi mới vào một bài thi cụ thể. Hỗ trợ
nhập nội dung câu hỏi, các lựa chọn đáp án, đánh dấu đáp án
đúng, và thêm giải thích cho đáp án.
o Sửa/Xóa câu hỏi: Chỉnh sửa nội dung hoặc xóa câu hỏi đã có.
- Quản lý kết quả và báo cáo:
o Xem thống kê kết quả bài thi: Tổng hợp điểm số, số lượng
người làm bài, tỷ lệ đỗ/trượt cho từng bài thi.
o Xem chi tiết kết quả từng sinh viên: Xem bài làm cụ thể của từng sinh viên.
o Xuất báo cáo: Xuất dữ liệu kết quả bài thi ra các định dạng
phổ biến (ví dụ: CSV, Excel) để phân tích ngoại tuyến.
- Quản lý danh mục/chủ đề: Tạo, sửa, xóa các danh mục hoặc
chủ đề để phân loại bài thi và câu hỏi.
2.4. Tổ chức lưu trữ dữ liệu
Cơ sở dữ liệu MongoDB sẽ được thiết kế để lưu trữ tất cả thông tin
của hệ thống một cách có tổ chức và hiệu quả. Việc thiết kế schema
linh hoạt của MongoDB rất phù hợp với cấu trúc dữ liệu dạng cây
(tree-like structure) của các bài thi và câu hỏi. 16
2.4.1. Thiết kế cơ sở dữ liệu MongoDB
Dưới đây là các Collections chính và cấu trúc schema của chúng:
- users Collection: Lưu trữ thông tin người dùng.
- quizzes Collection: Lưu trữ thông tin về các bài thi.
- questions Collection: Lưu trữ các câu hỏi.
- results Collection: Lưu trữ kết quả làm bài của sinh viên.
(Cho phép em bổ sung sau ạ)
3. Triển khai và kết quả
3.1. Môi trường phát triển và công cụ
Để đảm bảo tính nhất quán và hiệu quả trong quá trình phát triển, các
công cụ và môi trường sau đã được sử dụng:
- Hệ điều hành: Windows 10/11 hoặc macOS.
- IDE (Integrated Development Environment): Visual Studio Code
(VS Code), với các extension hỗ trợ phát triển Node.js, React,
MongoDB (như Prettier, ESLint, MongoDB for VS Code).
- Hệ thống quản lý phiên bản: Git và GitHub để quản lý mã nguồn,
theo dõi thay đổi và cộng tác (nếu có).
- Môi trường runtime Node.js: Phiên bản Node.js 18.x hoặc cao hơn.
- Trình quản lý gói: npm (Node Package Manager) hoặc Yarn để
quản lý các thư viện và dependency của dự án.
- Cơ sở dữ liệu: MongoDB Community Server (phiên bản cục bộ)
hoặc MongoDB Atlas (dịch vụ cloud MongoDB).
- Thư viện và Framework chính:
o Frontend: React 18.x, React Router DOM v6, Axios, TailwindCSS.
o Backend: Node.js, Express.js, Mongoose, Clerk, dotenv (để
quản lý biến môi trường), cors.
- Công cụ kiểm thử (tùy chọn): Postman hoặc Insomnia để kiểm thử API backend.
3.2. Triển khai các chức năng tiêu biểu
Phần này sẽ trình bày chi tiết về luồng hoạt động của một số chức năng
cốt lõi trong ứng dụng, minh họa cách thức frontend và backend tương tác với nhau.
Cho phép em bổ sung sau ạ vì hiện tại em vẫn đang trong quá trình fix
bug và các tệp sẽ còn sự thay đổi.
3.3. Mô tả các giao diện người dùng (Screenshots)
- Trang chủ (Homepage):
- Trang Đăng nhập/Đăng ký: 18
- Giao diện Tạo bài thi (Admin/Lecturer):
- Giao diện Làm bài thi (Student):
- Giao diện Xem kết quả bài thi:
- Giao diện Xem lại bài làm chi tiết:
- Giao diện Quản lý người dùng/bài thi (Admin Dashboard):
Em xin phép được bổ sung sau ạ.
4. Những kết quả đạt được
Thông qua quá trình nghiên cứu và triển khai, khóa luận đã đạt được
những kết quả quan trọng sau:
- Xây dựng thành công hệ thống học tập và thi trắc nghiệm trực
tuyến toàn diện: Đề tài đã hoàn thành việc xây dựng một ứng dụng
web đầy đủ các chức năng cốt lõi cho cả người học và người quản
lý. Các chức năng từ đăng ký/đăng nhập, làm bài thi đa dạng loại
câu hỏi, xem kết quả tức thì cho đến quản lý người dùng, bài thi,
câu hỏi và báo cáo đã được triển khai và hoạt động ổn định. Hệ
thống cung cấp một nền tảng linh hoạt, giúp tự động hóa quy trình
kiểm tra, đánh giá, và nâng cao trải nghiệm học tập của người dùng.
- Ứng dụng thành công MERN Stack trong dự án thực tế: Khóa
luận đã chứng minh được tính hiệu quả và ưu việt của MERN Stack
(MongoDB, Express.js, React, Node.js) trong việc phát triển một
ứng dụng web tương tác cao. Việc sử dụng cùng một ngôn ngữ
JavaScript xuyên suốt từ frontend đến backend đã tối ưu hóa quá
trình phát triển, tăng tốc độ xử lý và đơn giản hóa việc bảo trì hệ
thống. Kiến trúc RESTful API và việc quản lý dữ liệu với
MongoDB đã thể hiện khả năng mở rộng tốt cho các tính năng trong tương lai.
- Nâng cao kiến thức và kỹ năng chuyên môn: Quá trình thực hiện
khóa luận đã giúp em củng cố và mở rộng sâu sắc các kiến thức về
lập trình full-stack, kiến trúc ứng dụng web hiện đại. Em đã có cơ
hội thực hành và làm chủ các công nghệ quan trọng như React
(quản lý trạng thái, component lifecycle), Node.js/Express.js (xây
dựng API, middleware), MongoDB (thiết kế schema, thao tác dữ
liệu), Clerk (xác thực/phân quyền), và các thư viện hỗ trợ UI/UX
(TailwindCss). Đây là những kỹ năng thực tế rất cần thiết cho sự
nghiệp phát triển sau này.
- Đảm bảo tính bảo mật cơ bản: Hệ thống đã tích hợp tính năng
xác thực, phân quyền người dùng, giúp bảo vệ dữ liệu nhạy cảm và
ngăn chặn truy cập trái phép.
5. Những hạn chế và điều chưa đạt được 20