3.1.6.1. Usecase Đ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.
Actor Sinh viên
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
Bảng 4:Usecase Điểm danh
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.
Actor Giảng viên
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.
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.
Actor Sinh viên
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
3.2.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ụ).
3.2.2. Thiết kế xử lý
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.
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
Mô tả: Phần tải lên tài liệu được thể hiện với 3 thao tác người dùng và hệ thống thực hiện tạo và lưu trữ file.
o Sau khi đăng nhập thành công (1), giảng viên chọn chức năng tạo tài liệu (2) o Giảng viên thực hiện nhập các thông tin cơ bản (3) cho tài liệu sắp tải lên. o Chọn chức năng tải tài liệu từ máy tính (4) và chọn tài liệu cần thiết.
o Hệ thống hiển thị tiến trình tải lên (5) và thực hiện tạo, lưu trữ file vào database. (6) o Hiển thị thông báo kết quả. (7)
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
o Đầu tiên, trạng thái của hệ thống phải là đang thực hiện buổi học. o Giảng viên thực hiện chọn Vùng điểm danh. (1)
o Hệ thống hiển thị thông tin cần cài đặt (2).
o Giảng viên nhấn bắt đầu chức năng điểm danh. (3)
o Vùng điểm danh được hiển thị lên giao diện của sinh viên. (4)
o Sinh viên thực hiện điểm danh theo hướng dẫn của giảng viên trên lớp. (5) o Hệ thống thực hiện lưu trữ dữ liệu điểm danh. (6)
o Thông báo kết quả cho sinh viên và giảng viên. (7)
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 Mô tả: Sinh viên thực hiện đánh giá Giảng viên
o Đầu tiên, trạng thái của hệ thống phải là đang thực hiện buổi học. o Giảng viên thực hiện kết thúc buổi học. (1)
o Hệ thống hiển thị form đánh giá cho sinh viên. (2). o Sinh viên thực hiên, và nộp form đánh giá. (3)
o Hệ thống thực hiện lưu trữ dữ liệu kết quả đánh giá. (4) o Thông báo kết quả cho sinh viên. (5)
3.2.4. Thiết kế cơ sở dữ liệu
3.2.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ị
5 Email String Tên email
6 Password String Mật khẩu
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
10 Role Enum[STUDE NT] Vai trò 11 Status Enum[ACTIVE ] Trạng thái user 12 Degree Enum[UNDER GRADUATE] Học vị 13 Created_at Timestamp 14 Updated_at Timestamp 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
4 Subject String Mô tả
5 Semester Enum[1] Học kì
6 Year String Năm học
7 Participants Integer Giới hạn số lượng
8 Additional_info Jsonb
Thông tin thêm
9 Status Enum[ACTIV
E]
10 Created_at Timestamp
11 Updated_at Timestamp
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
4 Created_at Timestamp
5 Updated_at Timestamp
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
4 Created_at Timestamp
5 Updated_at Timestamp
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
3 User_id UUID Không rỗng Mã người tạo
4 Name String Tên bài kiểm tra
5 Duration integer Thời lượng
6 Expiration_date Timestamp Ngày hết hạn
7 Created_at Timestamp
8 Updated_at Timestamp
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
4
Question String 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
10 Created_at Timestamp
11 Updated_at Timestamp
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
3 Path String Đường dẫn
4 Type String Loại file
5 File_name String Tên file
6 Destination String
7 Meta Jsonb
8 Class_id UUID Không rỗng Mã lớp
9 Created_at Timestamp
10 Updated_at Timestamp
3.2.5. Thiết kế kiến trúc hệ thống 3.2.5.1. Kiến trúc tổng thể 3.2.5.1. Kiến trúc tổng thể
Hình 4.2: Kiến trúc tổng thệ hệ thống
Back – end server: Được viết bằng NestJs sử dụng cơ sở dữ liệu PostgreSQL để lưu trữ thông tin người dùng, lớp học,… Được hosting sử dụng Azure web service.
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
Hình 4.3: Kiến trúc thư mục ứng dụng web
package.json: Lưu trữ các thư viện sử dụng trọng ứng dung.
mock: Tạo ra các mock API
public: Lưu trữ các file như hình ảnh, icon,…
src: Thư mục chứa tất cả logic của ứng dụng bao gồm các layout, model, service,…
3.2.6. +Thiết kế giao diện.
3.2.6.1. Danh sách giao diện
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
2 Danh sách lớp học Danh sách lớp học của Giảng viên
trong học kì hiện tại. Nút “Vào lớp” nhằm để giáo viên thực hiệ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 “Tải lên tài liệu”.
5 Màn hình buổi học - chọn slide trình chiếu
Khi đã bắt đầu buổi học, giảng viên sẽ chọn tài liệu mà mình muốn trình chiếu cho cả lớp xem. (Các tài liệu này đã được tải lên từ 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
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.
2 Danh sách lớp học Màn hình hiển thị tất cả lớp học
của sinh viên và nút “Vào lớp” nhằm để sinh viên vào 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.
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 “Trở lại”.
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 “Trở lại”
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”.
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-4 Giao diện khảo sát
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-14 Quản lý Giảng viên
Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1.Kết quả đạt được
Thông qua việc nghiên cứu và tìm hiểu các công nghệ, đặc biệt là các công nghệ mới, em đã phát triển được ứng dụng chia sẻ và trao đổi sách hoàn chỉnh. Do giới hạn về kinh phí đăng ký tài khoản nhà phát triển, ứng dụng đang dừng lại ở giai đoạn chạy thử, chưa thể đẩy lên chợ ứng dụng App Store. Tuy nhiên kết quả chạy thử cho thấy hệ thống hoạt động tốt, và có thể mở rộng, phát triển thêm trong tương lai.
Về mặt kỹ thuật, nhóm em đã đạt được các kết quả như sau:
- Tìm hiểu, áp dụng được framework NestJS cùng database mã nguồn mở PostgreSQL trong việc thao tác CRUD với dữ liệu, upload file. PostgreSQL tuân theo tiêu chuẩn SQL nhưng không mâu thuẫn với các tính năng truyền thống hay có thể dẫn đến các quyết định kiến trúc gây hại. NestJS chính là sự kết hợp giữa ExpressJS và Fastify. Một hệ thống ổn định, nhanh chóng và hiệu suất cao. - Tìm hiểu được ReacJs, một công nghệ lập trình giao diện web. Ngoài ra, còn áp
dụng được một thư viện UI khá phổ biến Ant Design để tạo ra một giao diện web đơn giản, dễ nhìn.
- Học được nhiều kiến thức, có thêm kinh nghiệm trong việc sử dụng Firebase khi triển khai một ứng dụng Web.
- Tìm hiểu được dịch vụ lưu trữ dữ liệu của Microft Azure do Microsoft cung cấp, và Firebase Hosting của Google.
- Tìm hiểu và biết cách triển khai máy chủ lên nền tảng đám mây để có thể sử dụng không chỉ ở mạng cục bộ.
Về mặt thực tiễn em đã đạt được:
- Rèn luyện được kĩ năng nhận dạng bài toán, nghiên cứu và khảo sát thực tế, phân tích các chức năng và thực hiện tài liệu mô tả.
- Nâng cao khả năng tìm hiểu và nghiên cứu công nghệ, đặc biệt là các công nghệ mới.
- Kinh nghiệm khi áp dụng thực tế quy trình phát triển phần mềm gồm cả Waterfall và Scrum.
- Phát triển các kỹ năng mềm cá nhân như lên kế hoạch, trình bày văn bản, dự trù thời gian,.. và kỹ năng làm việc nhóm như khả năng tranh luận, thuyết phục và hỗ trợ lẫn nhau.
- Hiểu được sản phẩm mình thực hiện sẽ có tác động đến thực tế tại UIT như thế nào qua những góp ý của thầy cô, bạn bè trong khoa.
4.2.Thuận lợi và khó khăn 4.2.1. Thuận lợi 4.2.1. Thuận lợi
- Cả 2 đều có kinh nghiệm trong 1 dự án làm product thực tế từ công ty thực tập GEEK Up.
- Giảng viên hướng dẫn có tâm huyết cùng nhóm quyết tâm thực hiện từ ý tưởng ra thành phẩm (MVP) có khả năng áp dụng vào thực tế. Giảng viên có nhiều góc nhìn thực tế và kinh nghiệm dày dặn đã dẫn dắt nhóm đi đúng hướng ngay từ đầu. - Được giảng viên hướng dẫn quan tâm, cho lời khuyên để cải thiện tiến độ những
lúc nhóm bị “trôi”.
- Nhận được sự giúp đỡ nhiệt tình của giảng viên, sinh viên trong khoa Công nghệ Phần mềm khi thực hiện khảo sát hiện trạng.
4.2.2. Khó khăn
- Tự đặt ra thử thách với những chức năng yêu cầu real-time đã khiến nhóm mất nhiều thời gian tìm giải pháp từ internet, các mentor cũ và giảng viên hướng dẫn. - Dự án được thực hiện trong giai đoạn mà cả 2 thành viên đều đã đi làm, nên đòi hỏi khả năng sắp xếp công việc, họp online và trao đổi về các ý tưởng làm sao để