XÂY DỰNG HỆ THỐNG HỖ TRỢ TƯƠNG TÁC LỚP HỌC
Phân tích yêu cầu hệ thống
3.1.1 Phân tích yêu cầu chức năng
Cơ sở dữ liệu thời gian thực (Real-time Database):
Truyền dữ liệu tức thời là yếu tố quan trọng trong hệ thống hỗ trợ tương tác trực tiếp giữa giảng viên và sinh viên trong lớp học Nhiều chức năng thiết yếu đều phụ thuộc vào cơ sở dữ liệu thời gian thực.
Trình chiếu tài liệu là hình thức trình bày các tài liệu dưới dạng slide trong buổi học, giúp sinh viên dễ dàng theo dõi nội dung ngay trên điện thoại hoặc máy tính cá nhân.
- Vùng thảo luận: để sinh viên đặt câu hỏi (có thể ẩn danh) và trao đổi trực tuyến với nhau và với giảng viên
Vùng điểm danh cho phép giảng viên thực hiện việc điểm danh linh hoạt trong suốt thời gian diễn ra lớp học, trong khi sinh viên cần hoàn thành việc điểm danh trong khoảng thời gian quy định.
- Vùng đánh giá: sau khi buổi học kết thúc, sinh viên thực hiện đánh giá độ hài lòng và để lại góp ý (nếu có)
3.1.2 Yêu cầu về tính năng
Hệ thống hoạt động trên nền tảng website, cho phép người dùng truy cập từ mọi địa điểm và thời gian chỉ cần có kết nối internet Một số yêu cầu cần thiết mà hệ thống phải đáp ứng bao gồm khả năng truy xuất thông tin nhanh chóng và bảo mật dữ liệu người dùng.
- Chức năng truy vấn: Đáp ứng yêu cầu truy vấn của người dùng như tìm kiếm, xem lại tài liệu,
- Chức năng cập nhật: Chức năng cập nhật luôn được thực hiện và giảm thiểu tối đa sai sót của người dùng
- Chức năng tải lên: Hỗ trợ lưu trữ tài liệu bài giảng, bài kiểm tra và nhập thông tin hàng loạt
3.1.3 Phân tích yêu cầu phi chức năng Ứng dụng sử dụng tiếng Việt, hoạt động ổn định trên nền tảng website Để thu hút được sinh viên hứng thú sử dụng, các thao tác trên ứng dụng phải thật đơn giản Giao diện thân thiện, giúp sinh viên nhận thức được giá trị nhận lại khi sử dụng hệ thống
Tận dụng các tài nguyên đã có tại trường như dữ liệu người dùng, dữ liệu môn học
Thông tin người dùng được bảo mật chặt chẽ, chỉ những cá nhân có thẩm quyền mới được phép truy cập vào các tài nguyên nhất định.
3.1.4 Phân tích yêu cầu người dùng
Hệ thống dựa trên kết quả khảo sát và nghiên cứu hiện trạng để phân tích yêu cầu và chức năng, được thể hiện qua ngôn ngữ mô hình hóa UML.
3.1.5 Mô hình use case toàn hệ thống
Hình 3.1: Lược đồ Use case người dùng tổng quan
Hình 3.2: Lược đồ Use case người dùng chi tiết
STT Tên Actor Ý nghĩa/Ghi chú
1 Giảng viên Tạo các đối tượng tương tác
2 Sinh viên Tương tác với tài liệu, vùng thảo luận, vùng đánh giá, vùng kiểm tra do giảng viên tạo ra
3 Quản trị viên (Admin) Quản lý chính việc tạo Giảng viên, Sinh viên, Lớp học, và các chức năng khác
Bảng 2: Danh sách các Actors
• Danh sách các Use case
STT Tên Use-case Ý nghĩa/Ghi chú
1 Đăng nhập vào trang người dùng
Cho phép giảng viên, sinh đăng nhập vào hệ thống
2 Tạo đối tượng tương tác Giảng viên tạo các đối tượng tương tác: vùng điểm danh, vùng đánh giá, document,
3 Tạo vùng điểm danh Tạo nơi điểm danh cho sinh viên
4 Tạo vùng đánh giá Tạo nơi để sinh viên đánh giá giảng viên
5 Tạo document Tạo các tài liệu dạng docx,pdf,pptx,
6 Tạo vùng thảo luận Tạo nơi thảo luận cho các buổi học
7 Tạo vùng kiểm tra Tạo nơi để kiểm tra
8 Tương tác ở vùng thảo luận
Sinh viên, giảng viên có thể tương tác ở vùng thảo luận
9 Đặt câu hỏi Sinh viên đặt câu hỏi ở vùng thảo luận
10 Trả lời câu hỏi Giảng viên, sinh viên trả lời câu hỏi ở vùng thảo luận
11 Report người dùng Giảng viên, sinh viên report người dùng vi phạm
12 Đặt trạng thái pending Giảng viên đặt câu hỏi ở trạng thái chờ
13 Chấm điểm bài kiểm tra Giảng viên chấm bài kiểm tra
14 Xem điểm của từng lớp Giảng viên xem điểm của từng lớp mình dạy
15 Mở tài liệu Giảng viên, sinh viên có thể mở tài liệu do giảng viên tải lên
16 Tải tài liệu Giảng viên, sinh viên có thể tải ttài liệu về máy
17 Chọn chế độ ẩn danh Sinh viên có thể đặt cậu hỏi, đánh giá giảng viên ẩn danh
18 Đánh giá giảng viên Sinh viên đánh giá giảng viên sau mỗi buổi học
19 Điểm danh Sinh viên điểm danh ở mỗi buổi học
20 Đăng nhập vào trang quản trị
Quản trị viên đăng nhập vào trang quản trị
21 Tạo giảng viên Quản trị viên có thể Tạo giảng viên
22 Tạo sinh viên Quản trị viên có thể Tạo sinh viên
23 Tạo lớp học Quản trị viên có thể Tạo lớp học
24 Nhập danh sách lớp Quản trị viên có thể Nhập danh sách
25 Đặt lại mật khẩu cho tài khoản
Quản trị viên có thể Đặt lại mật khẩu cho Sinh viên, Giảng viên
26 Nhập danh sách từ file excel
Quản trị viên có thể tạo giảng viên, sinh viên, và nhập danh sách lớp bằng file excel
Bảng 3: Danh sách các Use case
3.1.6 Một số use case của hệ thống
Hình 3-3 Lược đồ Use case điểm danh
Tên use case Điểm danh
Mô tả Sinh viên điểm danh ở bắt đầu mỗi buổi học Kết quả đánh giá được thống kê theo từng buổi học
Tiền điều kiện Người dùng đã đăng nhập vào hệ thống
Hậu điều kiện Sinh viên điểm danh thành công
Luồng sự kiện chính • Sinh viên vào lớp học
• Giảng viên bấm bắt đầu điểm danh
• Sinh viện chọn vào con số chính xác
• Hệ thống thông báo thành công/thất bại
3.1.6.2 Usecase Tải lên dữ liệu
Hình 3-4 Lược đồ Use case Tạo tài liệu
Tên use case Tạo document
Mô tả Giảng viên upload tài liệu của từng môn học
Tiền điều kiện Giảng viên đã đăng nhập vào hệ thống
Hậu điều kiện Giảng viên upload tài liệu thành công
Luồng sự kiện chính • Giảng viên vào môn học
• Giảng viên chọn tài liệu muốn tải lên
• Tài liệu được tải lên
• Tài liệu được tải lên thành công
Bảng 5: Usecase Tải lên dữ liệu
3.1.6.3 Usecase Đánh giá giảng viên
Hình 3-5 Usecase Đánh giá giảng viên
Tên use case Đánh giá Giảng viên
Mô tả Sinh viên đánh giá Giảng viên sau mỗi buổi học, kết quả được thống kê vào hệ thống
Tiền điều kiện Sinh viên đã đăng nhập vào hệ thống
Hậu điều kiện Sinh viên thực hiện đánh giá thành công
Luồng sự kiện chính • Giảng viên kết thúc buổi học
• Sinh viên đánh giá trên mẫu đánh giá
• Sinh viên đánh giá thành công
Bảng 6: Usecase Đánh giá giảng viên
Thiết kế hệ thống
3.2.1 Thiết kế luồng sản phẩm
Sử dụng lược đồ Product Workflow với BPMN (ngôn ngữ mô hình hóa trực quan cho các ứng dụng trong phân tích nghiệp vụ)
Sử dụng lược đồ tuần tự (Sequence Diagram) để mô tả phương thức xử lý vấn đề của hệ thống
Hình 3-6 Sơ đồ luồng sản phẩm
3.2.2.1 Lược đồ tuần tự thao tác tải lên tài liệu
Hình 3.7: Lược đồ tuần tự cho thao tác tải lên tài liệu
Sau khi đăng nhập thành công, giảng viên chọn chức năng tạo tài liệu và nhập các thông tin cơ bản cho tài liệu sắp tải lên Tiếp theo, giảng viên chọn chức năng tải tài liệu từ máy tính và lựa chọn tài liệu cần thiết Hệ thống sẽ hiển thị tiến trình tải lên và thực hiện việc tạo, lưu trữ file vào cơ sở dữ liệu Cuối cùng, hệ thống sẽ hiển thị thông báo kết quả tải tài liệu.
3.2.2.2 Lược đồ tuần tự thao tác điểm danh
Hình 3.8: Lược đồ tuần tự cho thao tác điểm danh
Để thực hiện điểm danh, giảng viên cần đảm bảo rằng hệ thống đang trong trạng thái buổi học Sau đó, giảng viên chọn Vùng điểm danh và hệ thống sẽ hiển thị thông tin cần cài đặt Khi giảng viên nhấn bắt đầu chức năng điểm danh, Vùng điểm danh sẽ được hiển thị trên giao diện của sinh viên Sinh viên thực hiện điểm danh theo hướng dẫn của giảng viên trong lớp, và hệ thống sẽ lưu trữ dữ liệu điểm danh Cuối cùng, hệ thống sẽ thông báo kết quả điểm danh cho cả sinh viên và giảng viên.
3.2.3 Lược đồ tuần tự thao tác đánh giá Giảng viên
Hình 3-9 Lược đồ tuần tự cho thao tác đánh giá Giảng viên
Sinh viên thực hiện đánh giá giảng viên trong trạng thái hệ thống đang diễn ra buổi học Sau khi giảng viên kết thúc buổi học, hệ thống sẽ hiển thị form đánh giá cho sinh viên Sinh viên tiến hành hoàn thành và nộp form đánh giá Hệ thống sẽ lưu trữ dữ liệu kết quả đánh giá và thông báo kết quả cho sinh viên Cuối cùng, hệ thống điều hướng về trang chủ.
3.2.4 Thiết kế cơ sở dữ liệu
3.2.4.1 Lược đồ cơ sở dữ liệu
Hình 4.1: Lược đồ cơ sở dữ liệu
3.2.4.2 Mô tả các bảng dữ liệu
Bảng dữ liệu User: Lưu thông tin về tài khoản người dùng
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính, phân biệt giữa những người dùng
2 User_id String Là duy nhất Tài khoản đăng nhập
3 Name String Không rỗng Tên hiển thị
4 Avatar String Ảnh đại diện
7 Phone String Số điện thoại
8 City String Tên thành phố
9 Additional_info Jsonb Thông tin thêm
Bảng 7: Mô tả các bảng dữ liệu
Bảng dữ liệu Class: Lưu thông tin về các lớp học
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính
2 Class_id String Là duy nhất Mã lớp học
3 Class_name String Tên lớp
7 Participants Integer Giới hạn số lượng
Bảng 8: Lưu thông tin về các lớp học
Bảng dữ liệu Class_file: Lưu thông tin về bảng giữa Class & File
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id Integer Là duy nhất Khoá chính
2 Class_id UUID Không rỗng Mã lớp chứa file
3 File_id integer Không rỗng Mã file
Bảng 9: Lưu thông tin về bảng giữa Class & File
Bảng dữ liệu Class_users: Lưu thông tin giữa Class & User
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính
2 User_id UUID Không rỗng Mã user trong lớp
3 Class_id UUID Không rỗng Mã lớp
Bảng 10: Lưu thông tin giữa Class & User
Bảng dữ liệu Exams: Lưu thông tin các bài kiểm tra
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính, phân biệt giữa các thông báo
2 Class_id UUID Không rỗng Mã loại thông báo
3 User_id UUID Không rỗng Mã người tạo
4 Name String Tên bài kiểm tra
6 Expiration_date Timestamp Ngày hết hạn
Bảng 11: Lưu thông tin các bài kiểm tra
Bảng dữ liệu Exam_details: Lưu thông tin về các câu hỏi của Exams
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính
2 Exam_id String Không rỗng Mã bài kiểm tra
3 Order String Số thứ tự câu hỏi
5 Answer_1 String Câu trả lời thứ 1
6 Answer_2 String Câu trả lời thứ 2
7 Answer_3 String Câu trả lời thứ 3
8 Answer_4 String Câu trả lời thứ 4
9 Right_answer String Câu đúng
Bảng 12:Lưu thông tin về các câu hỏi của Exams
Bảng dữ liệu File: Lưu thông tin về các tài liệu
STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa
1 Id UUID Là duy nhất Khoá chính
2 Original_name String Tên file gốc
5 File_name String Tên file
8 Class_id UUID Không rỗng Mã lớp
Bảng 13:Lưu thông tin về các tài liệu
3.2.5 Thiết kế kiến trúc hệ thống
Hình 4.2: Kiến trúc tổng thệ hệ thống
The back-end server is developed using NestJS and utilizes PostgreSQL as the database to store user information and class details It is hosted on Azure Web Services for optimal performance and reliability.
Firebase: Cơ sở dữ liệu nonSQL của Google, được sử dụng để thực hiện những chức năng realtime trong lớp học
React web app: Được viết bằng Reactjs, sử dụng thư viện giao diện Ant Design Được hosting sử dụng Fireabase hosting.
3.2.5.2 Kiến trúc thư mục ứng dụng Web
Trong kiến trúc thư mục ứng dụng web, file package.json giữ vai trò quan trọng trong việc lưu trữ các thư viện sử dụng Thư mục mock được sử dụng để tạo ra các mock API, trong khi thư mục public lưu trữ các file như hình ảnh và biểu tượng Thư mục src chứa toàn bộ logic của ứng dụng, bao gồm layout, model và service Cuối cùng, thư mục config chứa các biến dùng chung cho toàn hệ thống.
3.2.6.1.1 Danh sách giao diện Giảng viên
STT Tên màn hình Mô tả chức năng
1 Màn hình đăng nhập Màn hình đăng nhập vào hệ thống
Tương tác lớp học Class Interaction
Danh sách lớp học hiện tại của giảng viên bao gồm các lớp mà họ đang giảng dạy trong học kỳ này Nút “Vào lớp” cho phép giáo viên bắt đầu một lớp học bất kỳ.
3 Popup Bắt đầu lớp học Tại màn hình này, giáo viên chọn lớp mình cần bắt đầu buổi học và nhấn “Bắt đầu”
4 Màn hình upload tài liệu Trường hợp giáo viên cần tải liên các bài giảng thì có thể nhấn vào
5 Màn hình buổi học - chọn slide trình chiếu
Khi buổi học bắt đầu, giảng viên sẽ lựa chọn tài liệu để trình chiếu cho cả lớp, những tài liệu này đã được tải lên trước đó.
6 Màn hình buổi học - trình chiếu slide Giao diện trình bày slide của bài giảng Trên màn hình của sinh viên cũng xem được slide một cách realtime
7 Màn hình Chuyên cần Giao diện để Giảng viên xem lại danh sách sinh viên điểm danh ở mỗi buổi học
8 Giao diện khảo sát Giao diện để Giảng viên xem lại thống kế các đánh giá, góp ý sau mỗi buổi học
9 Giao diện danh sách các bài kiểm tra Giao diện để Giảng viên xem danh sách các bài kiểm tra
10 Giao diện tạo bài kiểm tra Giao diện để Giảng viên tạo các bài kiểm tra
Bảng 14: Danh sách giao diện Giảng viên
3.2.6.1.2 Danh sách giao diện Sinh viên
1 Popup chat Giao diện chatbox của giảng viên
Danh sách lớp học hiển thị tất cả các lớp học của sinh viên, kèm theo nút “Vào lớp” để sinh viên có thể tham gia các buổi học đang diễn ra.
3 Danh sách tài liệu Tại màn hình này, sinh viên có thể tải về những tài liệu mà giảng viên đã upload
4 Slide của buổi học Màn hình buổi học có sinh viên có
3 tab Trong đó tab 1 dùng để xem slide mà giảng viên đang trình chiếu trên máy thông qua điện thoại hay laptop cá nhân
5 Vùng thảo luận Giao diện chatbox của sinh viên tại tab 2
6 Vùng kiểm tra Giao diện làm bài kiểm tra của sinh viên tại tab 3
7 Popup điểm danh Popup để sinh viên điểm danh
8 Popup đánh giá Popup để sinh viên đánh giá sau mỗi buổi học
Bảng 15: Danh sách giao diện Sinh viên
3.2.6.1.3 Danh sách giao diện Admin
1 Đăng nhập Màn hình đăng nhập vào trang quản lý
2 Quản lý Giảng viên Giao diện quản lý giảng viên với danh sách các giảng viên trên hệ thống
3 Modal tạo giảng viên Giao diện thêm một giảng viên mới cùng thao tác “Lưu” hoặc
4 Xem và chỉnh sửa Giảng viên Giao diện chỉnh sửa một giảng viên cùng thao tác “Lưu” hoặc
5 Quản lý sinh viên Giao diện quản lý sinh viên với danh sách các sinh viên trên hệ thống
6 Tạo sinh viên Giao diện thêm một sinh viên mới cùng thao tác “Lưu” hoặc “Trở lại”
7 Xem và chỉnh sửa sinh viên Giao diện chỉnh sửa một sinh viên cùng thao tác “Lưu” hoặc “Trở lại”
8 Quản lý các lớp học Giao diện các lớp học trên hệ thống
9 Tạo lớp học Giao diện thêm một lớp học mới cùng thao tác “Lưu” hoặc “Trở lại”
10 Xem và chỉnh sửa lớp học Giao diện chỉnh sửa một lớp học cùng thao tác “Lưu” hoặc “Trở lại”
11 Thêm thành viên vào lớp Giao diện thêm 1 giảng viên / sinh viên vào danh sách của lớp
Bảng 16: Danh sách giao diện Admin
3.2.6.2 Giao diện một số màn hình của ứng dụng
3.2.6.2.1 Giao diện một số màn hình của Giảng viên
Hình 5-2 Giao diện buổi học
Hình 5-3 Giao diện chuyên cần
Hình 5-4 Giao diện khảo sát
Hình 5-5 Giao diện kiểm tra
3.2.6.2.2 Giao diện một số màn hình của Sinh viên
Hình 5-6 Trang chủ Hình 5-7 Giao diện buổi học
Hình 5-8 Giao diện chat Hình 5-9 Giao diện kiểm tra
Hình 5-10 Giao diện làm bài kiểm tra Hình 5-11 Giao diện điểm danh
Hình 5-12 Giao diện đánh giá
3.2.6.2.3 Giao diện một số màn hình của Admin
Hình 5-13 Quản lý lớp học
Hình 5-14 Quản lý Giảng viên
Hình 5-15 Quản lý Sinh viên
