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 để
nhau hiểu trong thời gian ngắn nhất là rất quan trọng.
- Ý tưởng sản phẩm cùng loại trên thị trường rất hiếm, nên việc tham khảo về giao diện các chức năng trở nên hạn chế. Nhóm đã chia ra tham khảo từng loại chức năng trên từng nhóm sản phẩm khác nhau để có giải pháp về giao diện hợp lý nhất.
4.3.Hướng phát triển
Đề tài còn có thể mở rộng và phát triển thêm nhiều tính năng tích hợp với cơ sỡ dữ liệu của trường học và tối ưu hóa giá trị của dữ liệu như:
- Tích hợp tài khoản của giảng, viên sinh viên trên hệ thống nhà trường để tiện lợi đăng nhập, nhận dạng, theo dõi, đánh giá,…
- Tích hợp dữ liệu tính điểm kiểm tra, điểm danh của sinh viên và độ hài lòng trên của buổi học của giảng viên.
- Trình bày dữ liệu thu nhập được thành các biểu đồ nhằm giúp giảng viên, nhà trường hiểu rõ nhất tình trạng của sinh viên:
• Độ hài lòng giữa các môn học.
• Phổ điểm của sinh viên trong các bài kiểm tra. • Phổ điểm danh giữa các ngày trong tuần. • Tỉ lệ sinh viên tương tác trong các buổi học.
- Hệ thống hướng dẫn cách đặt câu hỏi, cách nêu thắc mắc với những chủ đề được từ xuất khi sinh viên sử dụng Vùng thảo luận như #thắcmắckiếnthứccũ, #thắcmắcvềbàiđanghọc, #câuhỏibênngoài,… và template trình bày.
Ví dụ: Chào thầy, em là …, em muốn đặt câu hỏi về phần … như sau … - Hình thức kiểm tra đa dạng, gây hứng thú hơn như ý tưởng từ Kahoot,
Sau khi golive, mỗi chức năng đều sẽ được tiếp tục nghiên cứu, khảo sát và sửa đổi sao cho phù hợp với nhu cầu của giảng viên, sinh viên tại trường nhất. Kế hoạch nhân rộng mô hình sang các trường tiềm năng sẽ được thực hiện sau khi sản phẩm chạy ổn định khoảng 2 năm.
TÀI LIỆU THAM KHẢO Tài liệu Tiếng Việt
1. B. T. Niên, “Kỹ năng mềm VÀ THƯƠNG HIỆU cá NHÂN,” Báo Thanh Niên, 10-Dec-2009.
[Online]. Available: https://thanhnien.vn/gioi-tre/ky-nang-mem-va-thuong-hieu-ca-nhan- 108706.html. [Accessed: 04-Aug-2021].
2. chaupm, “Postgresql là GÌ? TÌM hiểu về Cơ sở dữ liệu mã NGUỒN MỞ tiên tiến nhất thế
giới,” Bizfly, 20-Sep-2018. [Online]. Available: https://bizflycloud.vn/tin-tuc/postgresql-la- gi-tim-hieu-ve-co-so-du-lieu-ma-nguon-mo-tien-tien-nhat-the-gioi-
20180919175924611.htm. [Accessed: 04-Aug-2021].
3. “Tổng Quan về TRƯỜNG Đh Công nghệ Thông tin,” Trường Đại học Công nghệ Thông tin.
[Online]. Available: https://www.uit.edu.vn/tong-quan-ve-truong-dh-cong-nghe-thong-tin. [Accessed: 04-Aug-2021].
4. H. Linh, “ReactJS là gì? TẠI sao ReactJS native lại Được Ưa chuộng ĐẾN VẬY?,” Wiki Hỏi Đáp. [Online]. Available: https://wikihoidap.org/reactjs-la-gi. [Accessed: 04-Aug-2021].
Tài liệu Tiếng Anh
1. “# 介绍,” DvaJS. [Online]. Available: https://dvajs.com/guide/. [Accessed: 04-Aug-2021].
2. “Ant design of React - Ant Design,” of React. [Online]. Available:
https://ant.design/docs/react/introduce. [Accessed: 04-Aug-2021].
3. D. R. onM. 23 and D. Rathore, “Building a real-time chat app with React and Firebase,” CSS, 25-Mar-2020. [Online]. Available: https://css-tricks.com/building-a-real-time-chat-app-with- react-and-firebase/. [Accessed: 04-Aug-2021].
4. “Documentation: Nestjs - a PROGRESSIVE Node.js framework,” NestJS. [Online]. Available: https://docs.nestjs.com/. [Accessed: 04-Aug-2021].
5. T. I. E. P. K. H. U. Y. E. N. DO, “NestJs - framework backend for Nodejs: Briswell vietnam,”
株式会社ブリスウェル, 19-Aug-2020. [Online]. Available: https://briswell- vn.com/news/what-is-nestjs/. [Accessed: 04-Aug-2021].