Tôi đã xây dựng một Hệ thống Quản lý Học thuật Full Stack

Translated for your language. Read the original.

AI-assisted draft.

GyaanSetu Editorial3 tuần trước2min read

In this article

Tôi đã xây dựng một Hệ thống Quản lý Học thuật Full Stack

Trường đại học của tôi từng sử dụng sổ đăng ký giấy để điểm danh và bảng tính Excel để quản lý điểm số. Các thông báo thì chỉ được dán trên bảng tin vật lý. Nhóm của tôi đã quyết định số hóa toàn bộ quy trình này.

Chúng tôi đã xây dựng Student Sphere.

Hệ thống sử dụng ba bảng điều khiển (dashboard) riêng biệt:

Bảng điều khiển dành cho Sinh viên:

Xem điểm danh và điều kiện thi
Kiểm tra điểm số
Tải tài liệu học tập
Nộp bài tập trực tuyến
Xem thông báo học kỳ

Bảng điều khiển dành cho Giảng viên:

Cập nhật điểm danh và điểm số
Tải lên tài liệu và báo cáo thực hành
Thiết lập thời hạn nộp bài
Đăng thông báo cho các học kỳ cụ thể
Xem xét bài nộp của sinh viên

Bảng điều khiển dành cho Quản trị viên:

Phê duyệt đăng ký mới
Quản lý tài khoản người dùng
Lên lớp cho toàn bộ học kỳ
Xem thống kê hệ thống
Quản lý tất cả thông báo

Công nghệ sử dụng (Technical Stack):

Frontend:

HTML5, CSS3 và Vanilla JavaScript
Không sử dụng các framework như React hay Vue
Một tệp CSS duy nhất cho tất cả các trang
Thiết kế đáp ứng (responsive) từ thiết bị di động đến màn hình 4K

Backend:

Node.js và Express.js v5
Xác thực JWT
Băm mật khẩu bằng Bcrypt
REST API với hơn 30 endpoint

Cơ sở dữ liệu và Triển khai:

MongoDB Atlas
Frontend được lưu trữ trên Netlify
Backend được lưu trữ trên Render
Ứng dụng Android được xây dựng bằng Java thông qua WebView

Chúng tôi đã đối mặt với hai rào cản kỹ thuật lớn.

Thách thức 1: Hiệu suất API Ban đầu, bảng điều khiển giảng viên thực hiện 46 lệnh gọi API riêng biệt để tải dữ liệu sinh viên. Điều này gây ra sự chậm trễ lên đến 14 giây. Tôi đã thay thế các lệnh gọi riêng lẻ bằng một truy vấn MongoDB $in duy nhất. Việc này đã giúp giảm thời gian tải xuống đáng kể.

Thách thức 2: Ứng dụng một trang (SPA) không dùng React Chúng tôi đã xây dựng một ứng dụng SPA dựa trên vai trò chỉ bằng Vanilla JavaScript. Chúng tôi tự quản lý định tuyến (routing) và trạng thái (state) một cách thủ công. Chúng tôi cũng sử dụng CSS media queries để đảm bảo không có hiện tượng cuộn ngang trên các thiết bị di động.

Bài học kinh nghiệm:

Xây dựng ứng dụng không dùng framework giúp bạn hiểu cách công nghệ web hoạt động ở tầng sâu bên dưới.
Tối ưu hóa hiệu suất quan trọng hơn việc thêm các tính năng mới.
Các quyết định về lược đồ cơ sở dữ liệu (database schema) từ sớm sẽ ảnh hưởng đến toàn bộ dự án.
Việc triển khai yêu cầu quản lý cẩn thận CORS và các biến môi trường.

Dự án này được thực hiện bởi năm sinh viên từ Viện Công nghệ Ramgovind, Koderma, dưới sự hướng dẫn của thầy Ajay Kumar Dangi.

Website trực tiếp: https://studentsphere0.netlify.app

GitHub Frontend: https://github.com/sumankumarsinghrajput/studentsphere-frontend

GitHub Backend: https://github.com/sumankumarsinghrajput/studentsphere-backend

Tôi đã xây dựng một hệ thống quản lý học thuật full-stack cho trường đại học của mình - đây là cách tôi đã làm

Trong những năm học đại học, tôi nhận thấy rằng việc quản lý các hoạt động học thuật như điểm số, sự hiện diện và thông tin sinh viên thường được thực hiện một cách thủ công hoặc thông qua các hệ thống rời rạc. Điều này dẫn đến sự kém hiệu quả và khả năng sai sót cao. Vì vậy, tôi đã quyết định xây dựng một hệ thống quản lý học thuật toàn diện (full-stack) để giải quyết vấn đề này.

Trong bài viết này, tôi sẽ chia sẻ về quá trình xây dựng, các công nghệ tôi đã sử dụng và những bài học mà tôi đã rút ra được.

Công nghệ sử dụng (Tech Stack)

Để xây dựng một ứng dụng mạnh mẽ và có khả năng mở rộng, tôi đã chọn MERN stack:

Frontend: React.js kết hợp với Tailwind CSS để xây dựng giao diện người dùng (UI) hiện đại và phản hồi nhanh.
Backend: Node.js và Express.js để xây dựng các API mạnh mẽ.
Database: MongoDB để lưu trữ dữ liệu dưới dạng tài liệu (document-based), giúp linh hoạt trong việc thay đổi cấu trúc dữ liệu.
Authentication: JSON Web Tokens (JWT) để đảm bảo tính bảo mật và xác thực người dùng.
Password Hashing: Bcrypt để mã hóa mật khẩu trước khi lưu vào cơ sở dữ liệu.

Các tính năng chính

Hệ thống được thiết kế với ba vai trò người dùng chính: Quản trị viên (Admin), Giảng viên (Faculty) và Sinh viên (Student).

1. Xác thực và Phân quyền (Authentication & Authorization)

Hệ thống sử dụng JWT để quản lý phiên làm việc của người dùng. Khi người dùng đăng nhập thành công, một token sẽ được tạo ra và gửi về client. Client sẽ lưu trữ token này (thường là trong localStorage hoặc cookie) và gửi kèm trong mỗi yêu cầu API tiếp theo để xác thực.

Ngoài ra, tôi đã triển khai Kiểm soát truy cập dựa trên vai trò (RBAC) để đảm bảo rằng người dùng chỉ có thể truy cập vào các chức năng phù hợp với vai trò của họ:

Admin: Có toàn quyền quản lý sinh viên, giảng viên và các khóa học.
Faculty: Có thể quản lý điểm số và sự hiện diện của sinh viên trong các lớp học họ giảng dạy.
Student: Có thể xem điểm số, lịch học và thông tin cá nhân của mình.

2. Quản lý Sinh viên và Giảng viên

Admin có thể thực hiện các thao tác CRUD (Create, Read, Update, Delete) đối với hồ sơ sinh viên và giảng viên. Điều này bao gồm việc thêm mới, cập nhật thông tin liên lạc và quản lý trạng thái hoạt động của họ.

3. Quản lý Khóa học và Lớp học

Hệ thống cho phép tạo các khóa học, gán giảng viên cho khóa học và đăng ký sinh viên vào các lớp học cụ thể.

4. Quản lý Điểm và Sự hiện diện

Giảng viên có thể nhập điểm cho sinh viên và ghi nhận sự hiện diện hàng ngày. Dữ liệu này sau đó sẽ được lưu trữ an toàn trong MongoDB và có thể được truy xuất nhanh chóng bởi sinh viên và admin.

Kiến trúc hệ thống

Hệ thống tuân theo kiến trúc Client-Server:

Client (Frontend): Một ứng dụng Single Page Application (SPA) được xây dựng bằng React. Nó giao tiếp với server thông qua các yêu cầu HTTP (RESTful API).
Server (Backend): Một ứng dụng Node.js/Express đóng vai trò là trung tâm điều phối. Nó xử lý các yêu cầu từ client, thực hiện logic nghiệp vụ và tương tác với cơ sở dữ liệu.
Database: MongoDB lưu trữ toàn bộ dữ liệu của hệ thống một cách có cấu trúc.

Triển khai (Implementation)

Backend: Thiết kế Schema

Tôi đã sử dụng Mongoose để định nghĩa các schema cho MongoDB. Dưới đây là ví dụ về schema cho người dùng:

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['admin', 'faculty', 'student'], required: true },
});

Frontend: Quản lý trạng thái

Để quản lý trạng thái người dùng và thông tin đăng nhập trên toàn bộ ứng dụng, tôi đã sử dụng React Context API. Điều này giúp tránh tình trạng "prop drilling" và giúp việc truy cập thông tin người dùng trở nên dễ dàng hơn ở bất kỳ component nào.

Những bài học rút ra

Xây dựng dự án này đã mang lại cho tôi nhiều kinh nghiệm quý báu:

Tầm quan trọng của thiết kế cơ sở dữ liệu: Việc thiết kế các mối quan hệ giữa sinh viên, khóa học và giảng viên ngay từ đầu là cực kỳ quan trọng để tránh việc phải tái cấu trúc (refactor) sau này.
Bảo mật là ưu tiên hàng đầu: Việc xử lý JWT và mã hóa mật khẩu (sử dụng bcrypt) là không thể thiếu để bảo vệ dữ liệu người dùng.
Trải nghiệm người dùng (UX): Việc sử dụng Tailwind CSS giúp tôi nhanh chóng tạo ra một giao diện sạch sẽ và dễ sử dụng, điều này rất quan trọng đối với một hệ thống quản lý.

Kết luận

Việc xây dựng hệ thống quản lý học thuật này không chỉ giúp tôi củng cố kiến thức về MERN stack mà còn giúp tôi hiểu rõ hơn về cách giải quyết các vấn đề thực tế thông qua công nghệ. Trong tương lai, tôi dự định sẽ tích hợp thêm các tính năng như thông báo thời gian thực (real-time notifications) và tích hợp cổng thanh toán cho học phí.