Luồng đi chính- Bước 1: Người dùng mở ứng dụng “Reporto” để đăng nhập - Bước 2: Ứng dụng hiển thị màn hình đăng nhập để người dùng đó đăng nhập.. Tiền điều kiện Người dùng đã đăng nhập v
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
BÁO CÁO ĐỒ ÁN MÔN HỌC
ĐỀ TÀI:
XÂY DỰNG ỨNG DỤNG
HỖ TRỢ VIẾT BÁO CÁO TỰ ĐÁNH GIÁ
TRONG KIỂM ĐỊNH CHẤT LƯỢNG ĐÀO TẠO
Giảng viên hướng dẫn: ThS Lê Thanh Trọng
Sinh viên: Nguyễn Công Đoàn - 20520447
Phan Nhật Lâm - 20520608
Tp.Hồ Chí Minh, tháng 12 năm 2023
Trang 2Nhóm thực hiệnTrường Đại học Công nghệ Thông tin, tháng 12 năm 2023
Trang 3MỤC LỤC
CHƯƠNG I GIỚI THIỆU ĐỀ TÀI
1.1 Giới thiệu chung
1.2 Mục tiêu đề tài
1.2.1 Lý thuyết
1.2.2 Mục tiêu
1.3 Quá trình hiện thực
1.4 Tổng quan về chức năng
CHƯƠNG II PHÂN TÍCH THIẾT KẾ
2.1 Mô hình Use-case:
2.1.1 Use-case diagram
2.1.2 Actor
2.1.3 Chi tiết Use-case
2.1.4 Đặc tả Use-case
2.1.4.1 Đặc tả Use-case “Login”
2.1.4.1.1 Mô tả ngắn
2.1.4.2 Đặc tả Use-case “Logout”
2.1.4.3 Đặc tả Use-case “Đổi mật khẩu”
2.1.4.4 Đặc tả Use-case “Đăng ký”
2.1.4.5 Đặc tả Use-case “Quên mật khẩu”
2.1.4.6 Đặc tả Use-case “Quản lý Folder”
2.1.4.7 Đặc tả Use-case “Quản lý File report”
2.1.4.8 Đặc tả Use-case “Download”
2.1.4.9 Đặc tả Use-case “Upload”
2.1.4.10 Đặc tả Use-case “Chỉnh sửa nội dung file report”
2.1.4.11 Đặc tả Use-case “Trang chủ”
2.2 Mô hình lớp
2.2.1 Class diagram:
2.2.2 Danh sách các lớp và mối liên hệ
2.2.3 Chi tiết các lớp
2.2.3.1 User
Trang 4CHƯƠNG III CÔNG NGHỆ SỬ DỤNG
& KẾT QUẢ SẢN PHẨM
3.1 Công nghệ sử dụng
3.1.1 ReactJS
3.1.1.1 Tổng quan
3.1.1.2 Đặc trưng của ReactJS
3.1.1.3 Ưu điểm và nhược điểm
3.1.2 NodeJS
3.1.2.1 Tổng quan
3.1.2.2 Lý do nên sử dụng NodeJS
3.1.2.3 Ưu điểm và nhược điểm
3.1.3 Firebase
3.1.3.1 Tổng quan
3.1.3.2 Cách thức hoạt động
3.1.3.3 Ưu điểm và nhược điểm
3.2 Kết quả sản phẩm
3.2.1 Màn hình đăng nhập
3.2.2 Màn hình đăng ký
3.2.3 Màn hình quên mật khẩu
3.2.4 Màn hình trang chủ
3.2.5 Màn hình chỉnh sửa văn bản
CHƯƠNG IV: KẾT LUẬN
4.1 Kết quả đạt được
4.2 Ưu điểm
4.3 Nhược điểm và giải pháp
Trang 5CHƯƠNG I GIỚI THIỆU ĐỀ TÀI
1.1 Giới thiệu chung
- Kiểm định chất lượng giáo dục là một quá trình đánh giá toàn diện, khách quan,
có hệ thống về các hoạt động của cơ sở giáo dục nhằm xác định mức độ đáp ứngyêu cầu của tiêu chuẩn chất lượng giáo dục Trong kiểm định chất lượng giáo dục,báo cáo tự đánh giá là một trong những sản phẩm quan trọng nhất, phản ánh đầy
đủ, chính xác và khách quan về thực trạng của cơ sở giáo dục
- Việc xây dựng báo cáo tự đánh giá đòi hỏi sự tham gia của nhiều cán bộ, giảngviên, viên chức và người học trong cơ sở giáo dục Tuy nhiên, quá trình nàythường gặp phải một số khó khăn, hạn chế như:
- Thiếu kinh nghiệm trong việc xây dựng báo cáo tự đánh giá theo chuẩnquốc tế;
- Khó khăn trong việc thu thập, phân tích và xử lý dữ liệu;
- Thời gian và nguồn lực hạn chế
- Để giải quyết những khó khăn trên, nhóm đã xây dựng và phát triển đồ án “XÂYDỰNG ỨNG DỤNG HỖ TRỢ VIẾT BÁO CÁO TỰ ĐÁNH GIÁ TRONG KIỂM ĐỊNHCHẤT LƯỢNG ĐÀO TẠO” là một giải pháp cần thiết, góp phần nâng cao chấtlượng báo cáo tự đánh giá, tiết kiệm thời gian và nguồn lực, hỗ trợ cho quá trình
tự đánh giá và cải tiến chất lượng giáo dục
1.2 Mục tiêu đề tài
1.2.1 Lý thuyết
- Nghiên cứu về ngôn ngữ lập trình Javascript và framework ReactJS
- Nghiên cứu về các thao tác làm việc và phát triển ứng dụng web trên VisualStudio Code
- Nghiên cứu và sử dụng ứng dụng lưu trữ cơ sở dữ liệu trên đám mây - Firebase
Trang 6- Trải qua quá trình tìm hiểu và thực hiện đề tài, nhóm đã giải quyết được các vấn
đề đặt ra ban đầu, từng bước giải quyết và liên tục đặt ra những vấn đề mới đểngày càng hoàn thiện sản phẩm Những bước thực hiện:
- Phân tích yêu cầu bài toán
- Lựa chọn nền tảng công nghệ phù hợp với yêu cầu
- Nghiên cứu cơ sở lý thuyết của công nghệ lựa chọn
- Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn
- Kiểm tra và khám phá các ứng dụng tương tự để tối ưu hóa trải nghiệmngười dùng và cải thiện các tính năng cho ứng dụng
1.4 Tổng quan về chức năng
- Người dùng có thể quản lý các tệp báo cáo
- Người dùng có thể chỉnh sửa báo cáo, thêm các nguồn tham khảo cần thiết
- Người dùng có thể sắp xếp các tệp báo cáo vào các thư mục để người dùng dễ ghinhớ hơn
Trang 7CHƯƠNG II PHÂN TÍCH THIẾT KẾ
2.1 Mô hình Use-case:
2.1.1 Use-case diagram
Hình 2.1 Sơ đồ Use-case
2.1.2 Actor
User Người viết báo cáo kiểm định chất
Trang 82.1.3 Chi tiết Use-case
Đăng ký Đăng ký tài khoản khi chưa có tài
khoảnĐăng nhập Đăng nhập bằng tài khoản đã đăng kýĐăng xuất Đăng xuất ra tài khoản đang sử dụngĐổi mật khẩu Đổi mật khẩu đã lưu trước đó khi cần
thiếtQuên mật
CRUD file và folder
Tải xuống Tải xuống file và folderUpload File và
Folder
Upload file và folder từ thiết bị
Chỉnh sửa nộidung file báocáo
Chỉnh sửa nội dung có trong các filebáo cáo
2.1.4 Đặc tả Use-case
2.1.4.1 Đặc tả Use-case “Login”
2.1.4.1.1 Mô tả ngắnNgười dùng khi mở ứng dụng sẽ được dẫn đến trang đăng nhập đầu tiên Họ sẽ phải sử dụng tên người dùng và mật khẩu của mình để truy cập ứng dụng
a Luồng xử lý event
Trang 9Luồng đi chính
- Bước 1: Người dùng mở ứng dụng “Reporto” để đăng nhập
- Bước 2: Ứng dụng hiển thị màn hình đăng nhập để người dùng đó đăng nhập
- Bước 3: Người dùng nhập tên người dùng và mật khẩu của mình
- Bước 4: Người dùng nhấn nút “Đăng nhập” để thể hiện muốn truy cập vào hệ thống
- Bước 5: Ứng dụng kiểm tra và xác nhận chấp nhận
- Bước 6: Cho phép người dùng sử dụng hệ thống web Report
Luồng đi khác
Nếu người dùng chưa có tài khoản, đăng ký khoản mới
b Yêu cầu khác
Không có
c Tiền điều kiện
User đã có tài khoản
d Hậu điều kiện
Kết quả đăng nhập là “Accepted” thì người dùng đó mới có thể truy cập vào hệ thống
e Extend points
- Tình huống 1: Sai tên người dùng, sai mật khẩu hoặc cả hai
- Phần mềm “Reporto” thông báo cho Người dùng rằng tên người dùnghoặc mật khẩu của họ hoặc cả hai đều bị nhập sai
- Nếu người dùng quyết định không sử dụng hệ thống, phần mềm sẽ xácnhận và chấm dứt use case đó
- Ngược lại nếu Người dùng muốn đăng nhập lại, phần mềm sẽ xóa thôngtin trước đó và khởi động lại use case
- Trường hợp 2: Chưa đăng ký tài khoản mới
Trang 10- Nếu người dùng quyết định không sử dụng hệ thống, phần mềm sẽ xácnhận và chấm dứt use case đó.
- Ngược lại nếu người dùng muốn sử dụng hệ thống lần đầu tiên thì phầnmềm sẽ thực hiện theo Luồng đi khác
Trang 11trạng thái được tự động lưu lại
b Luồng xử lý event
Luồng đi chính
- Bước 1: Người dùng click vào nút “Logout” trên phần mềm
- Bước 2: Ứng dụng hiển thị dạng cảnh báo
- Bước 3: Người dùng nhấn nút “Xác nhận” để thông báo muốn thoát khỏi ứng dụng
- Bước 4: Ứng dụng xác nhận và chuyển họ trở lại màn hình đăng nhập
Luồng đi khác
Không có
c Yêu cầu khác
Không có
d Tiền điều kiện
Người dùng đã đăng nhập vào ứng dụng “Reporto”
e Hậu điều kiện
Người dùng đã đăng xuất thành công ứng dụng
f Extend points
Không có
g Activity diagram
Trang 12Hình 2.3 Sơ đồ Activity Use-case Logout2.1.4.3 Đặc tả Use-case “Đổi mật khẩu”
- Bước 1: Người dùng điều hướng đến thanh menu
- Bước 2: Người dùng click vào nút “Cài đặt”
- Bước 3: Phần mềm hiển thị màn hình “Cài đặt”
- Bước 4: Người dùng kéo xuống phần cài đặt “Mật khẩu”
- Bước 5: Người dùng chọn “Đổi mật khẩu”
- Bước 6: Phần mềm hiển thị màn hình “Đổi mật khẩu”
- Bước 7: Người dùng nhập mật khẩu cũ và mật khẩu mới để xác nhận
- Bước 8: Người dùng click vào nút “Thay đổi”
Trang 13- Bước 9: Hệ thống thông báo người dùng đã đổi mật khẩu thành công
Luồng đi khác
- Bước 1: Người dùng điều hướng đến thanh menu
- Bước 2: Người dùng click vào nút “Cài đặt”
- Bước 3: Phần mềm hiển thị màn hình “Cài đặt”
- Bước 4: Người dùng kéo xuống phần cài đặt “Mật khẩu”
- Bước 5: Người dùng chọn “Đổi mật khẩu”
- Bước 6: Phần mềm hiển thị màn hình “Đổi mật khẩu”
- Bước 7: Người dùng nhập mật khẩu cũ và mật khẩu mới nhưng mật khẩu cũ sai
- Bước 8: Người dùng click vào nút “Thay đổi”
- Bước 9: Hệ thống báo Đổi mật khẩu không thành công và quay lại Bước 6
c Yêu cầu khác
Không có
d Tiền điều kiện
Người dùng đã đăng nhập vào phần mềm “Reporto” và vào màn hình “Đổi mật khẩu”
e Hậu điều kiện
Người dùng đã đổi mật khẩu thành công
f Extend points
- Tình huống: Người dùng nhập sai mật khẩu cũ
- Phần mềm “Reporto” thông báo người dùng nhập sai mật khẩu
- Nếu người dùng quyết định không thay đổi mật khẩu, phần mềm sẽ xác nhận và chấm dứt trường hợp sử dụng đó
- Ngược lại nếu người dùng muốn thực hiện lại thì phần mềm sẽ xóa các thông tin trước đó và khởi động lại use case
g Activity diagram
Trang 14Hình 2.3 Sơ đồ Activity Use-case Đổi mật khẩu2.1.4.4 Đặc tả Use-case “Đăng ký”
a Mô tả ngắn
User muốn đăng ký tài khoản mới để sử dụng website
b Luồng xử lý event
Luồng đi chính
- Bước 1: User chuyển tới màn hình đăng ký
- Bước 2: Web hiển thị màn hình đăng ký
- Bước 3: User nhập các thông tin của mình (username, email, password, confirm
Trang 15- Bước 4: User nhấn nút đăng ký
- Bước 5: Hệ thống xác nhận user đăng ký thành công
- Bước 6: Web chuyển hướng người dùng sang màn hình login
e Hậu điều kiện
Người dùng đăng ký thành công
f Extend points
Không có
g Activity diagram
Trang 16Hình 2.4 Sơ đồ Activity Use-case Register2.1.4.5 Đặc tả Use-case “Quên mật khẩu”
- Bước 1: Người dùng mở website "Reporto"
- Bước 2: User chuyển đến phần “Quên mật khẩu”
Trang 17- Bước 3: Hệ thống hiển thị màn hình “Đổi mật khẩu”.
- Bước 4: User nhập email và mật khẩu mới để xác nhận rằng user muốn đổi mật khẩu
- Bước 5: Website xác nhận user đổi mật khẩu thành công
Luồng đi khác
Không có
c Yêu cầu khác
Không có
d Tiền điều kiện
Người dùng đã đăng ký tài khoản hoặc được Quản lý cung cấp
e Hậu điều kiện
Người dùng đã đổi mật khẩu thành công
f Extend points
Không có
g Activity diagram
Trang 18Hình 2.5 Sơ đồ Activity Use-case Đổi Password2.1.4.6 Đặc tả Use-case “Quản lý Folder”
Trang 19- Bước 4: Phần mềm hiển thị dữ liệu file và folder mà người dùng đã tạo và quản lýLuồng đi khác
- Luồng đi khác 1: User muốn thêm folder mới
- Bước 1: Người dùng click vào nút “Thêm” Phần mềm sẽ hiển thị màn hình
“Thêm folder mới”
- Bước 2: Người dùng nhập tên folder
- Bước 3: Người dùng click vào nút “Add new”
- Bước 4: Phần mềm thông báo người dùng đã thêm folder mới thành công
- Luồng đi khác 2: Người dùng muốn thay đổi tên folder
- Bước 1: Người dùng tiến hành chọn folder sau đó nhấn nút “Rename”
- Bước 2: Phần mềm hiển thị màn hình “Rename” với tên folder có sẵn
- Bước 3: Người dùng chỉnh sửa tên folder
- Bước 4: Người dùng click vào nút “Save”
- Bước 5: Phần mềm thông báo người dùng đã chỉnh sửa tên folder thành công
- Luồng đi khác 3: Người dùng muốn xóa folder
- Bước 1: Người dùng tiến hành folder sau đó nhấn nút “Xóa”
- Bước 2: Phần mềm hiển thị thông báo cảnh báo để đảm bảo
- Bước 3: Người dùng xác nhận bằng cách nhấn vào nút “Xác nhận”
- Bước 4: Phần mềm thông báo người dùng đã xóa folder thành công
c Yêu cầu khác
Không có
d Tiền điều kiện
User đã có tài khoản
e Hậu điều kiện
Trang 21Luồng đi chính
- Bước 1: Người dùng mở website "Reporto"
- Bước 2: Phần mềm hiển thị màn hình chính
- Bước 3: Người dùng chuyển sang màn hình file và folder
- Bước 4: Phần mềm hiển thị dữ liệu file và folder mà người dùng đã tạo và quản lýLuồng đi khác
- Luồng đi khác 1: User muốn thêm file report mới
- Bước 1: Người dùng click vào nút “Thêm” Phần mềm sẽ hiển thị màn hình
“Thêm file mới”
- Bước 2: Người dùng nhập tên file
- Bước 3: Người dùng click vào nút “Add new”
- Bước 4: Phần mềm thông báo người dùng đã thêm file report mới thành công
- Luồng đi khác 2: Người dùng muốn thay đổi tên file
- Bước 1: Người dùng tiến hành chọn file sau đó nhấn nút “Rename”
- Bước 2: Phần mềm hiển thị màn hình “Rename” với tên file có sẵn
- Bước 3: Người dùng chỉnh sửa tên file
- Bước 4: Người dùng click vào nút “Save”
- Bước 5: Phần mềm thông báo người dùng đã chỉnh sửa tên file thành công
- Luồng đi khác 3: Người dùng muốn xóa file report
- Bước 1: Người dùng tiến hành file report sau đó nhấn nút “Xóa”
- Bước 2: Phần mềm hiển thị thông báo cảnh báo để đảm bảo
- Bước 3: Người dùng xác nhận bằng cách nhấn vào nút “Xác nhận”
- Bước 4: Phần mềm thông báo người dùng đã xóa file thành công
Trang 22d Tiền điều kiện
User đã có tài khoản
e Hậu điều kiện
Người dùng đã tạo, đọc, cập nhật hoặc xóa file
Trang 23- Bước 3: Người dùng chuyển sang màn hình file và folder.
- Bước 4: Phần mềm hiển thị dữ liệu file và folder mà người dùng đã tạo và quản lý
- Bước 5: Chọn folder hoặc file bất kỳ để tải về
Luồng đi khác
- Luồng đi khác 1: User muốn tải folder về
- Bước 1: Người dùng tiến hành chọn folder sau đó nhấn nút “Download”
- Bước 2: Website hiển thị cảnh báo (nếu folder có kích thước quá lớn)
- Bước 3: Người dùng nhấn nút “Confirm”
- Bước 4: Hệ thống sẽ tải về folder
- Bước 5: Phần mềm thông báo người dùng đã tải folder thành công
- Luồng đi khác 2: User muốn tải file report về
- Bước 1: Người dùng tiến hành chọn file report sau đó nhấn nút
“Download”
- Bước 2: Website hiển thị cảnh báo (nếu folder có kích thước quá lớn)
- Bước 3: Người dùng nhấn nút “Confirm”
- Bước 4: Hệ thống sẽ tải về file
- Bước 5: Phần mềm thông báo người dùng đã tải file thành công
c Yêu cầu khác
Trang 24User đã có tài khoản
e Hậu điều kiện
User đã tải xuống folder/file thành công
- Bước 3: Người dùng chuyển sang màn hình file và folder
- Bước 4: Phần mềm hiển thị dữ liệu file và folder mà người dùng đã tạo và quản lý
- Bước 5: Người dùng chọn upload folder hoặc file report
Trang 25Luồng đi khác
- Luồng đi khác 1: User muốn upload folder
- Bước 1: Người dùng tiến hành nhấn nút “Upload folder”
- Bước 2: Website hiển thị màn hình upload chung
- Bước 3: Người dùng kéo thả/nhấn nút “Browse”
- Bước 4: Hệ thống hiển thị màn hình Select trên thiết bị để người dùng chọn folder
- Bước 5: User chọn folder và nhấn “Upload”
- Bước 6: Website xác nhận user upload folder thành công
- Luồng đi khác 2: User muốn upload file
- Bước 1: Người dùng tiến hành nhấn nút “Upload file”
- Bước 2: Website hiển thị màn hình upload chung
- Bước 3: Người dùng kéo thả/nhấn nút “Browse”
- Bước 4: Hệ thống hiển thị màn hình Select trên thiết bị để người dùng chọn file report
- Bước 5: User chọn file report và nhấn “Upload”
- Bước 6: Website xác nhận user upload file report thành công
c Yêu cầu khác
Không có
d Tiền điều kiện
User đã có tài khoản
e Hậu điều kiện
User đã tải lên folder/file thành công
f Extend points
Không có
Trang 26Hình 2.9 Sơ đồ Activity Use-case Đổi Password2.1.4.10 Đặc tả Use-case “Chỉnh sửa nội dung file report”
- Bước 4: Hệ thống chuyển user sang trang edit file report
- Bước 5: User chỉnh sửa file report
- Bước 6: Website cập nhật trạng thái file và thông báo cho người dùng biết.Luồng đi khác
Không có
c Yêu cầu khác
Trang 27Không có
d Tiền điều kiện
User đã có tài khoản
e Hậu điều kiện
User đã chỉnh sửa file report thành công
Trang 28b Luồng xử lý event
Luồng đi chính
- Bước 1: Người dùng mở website "Reporto"
- Bước 2: Phần mềm hiển thị màn hình chính
- Bước 3: User đi đến phần đăng nhập
- Bước 4: User thực hiện từ bước 3 trong use case “Login”
Luồng đi khác
Không có
c Yêu cầu khác
Không có
d Tiền điều kiện
User đã có tài khoản
e Hậu điều kiện
User đã vào trang chủ thành công
f Extend points
Không có
g Activity diagram
