<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO</b>

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>BÁO CÁO ĐỒ ÁN MÔN HỌCĐỀ TÀI:</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>Lời cảm ơn</b>

Lời đầu tiên, nhóm chúng em xin được cảm ơn thầy Lê Thanh Trọng đã tạo điều kiện chonhóm được thực hiện đồ án, và đã cung cấp những kiến thức hữu ích, những góp ý thựctế nhất để từ đó nhóm có thể phát triển thêm hiểu biết của mình trong mảng lập trìnhweb, nhất là trong dự án hiện tại này.

Dù có nhiều cố gắng thực hiện, song lượng kiến thức về mảng này cũng như thời gian đểphát triển dự án là có hạn, nên nhóm khơng thể tránh khỏi những thiếu sót. Nhómmong nhận được sự thơng cảm, những góp ý hữu ích nhất từ thầy để từ đó nhóm có thểhồn thiện sản phẩm hơn nữa.

Nhóm thực hiệnTrường Đại học Cơng nghệ Thơng tin, tháng 12 năm 2023

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>MỤC LỤC</b>

CHƯƠNG I. GIỚI THIỆU ĐỀ TÀI...

1.1. Giới thiệu chung...

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”...

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

CHƯƠ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...

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>CHƯƠNG I. GIỚI THIỆU ĐỀ TÀI</b>

<b>1.1.Giới thiệu chung</b>

- Kiểm định chất lượng giáo dục là một q trình đánh giá tồ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ìnhtự đánh giá và cải tiến chất lượng giáo dục.

<b>1.2.Mục tiêu đề tài</b>

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.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

- Phân tích u cầu bài tố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

<b>1.4.Tổng quan về chức năng</b>

- 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ễ ghi

nhớ hơn.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>CHƯƠNG II. PHÂN TÍCH THIẾT KẾ</b>

<b>2.1.Mơ hình Use-case:</b>

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

2.1.3. Chi tiết Use-case

Đăng ký Đăng ký tài khoản khi chưa có tàikhoả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

Nhập thông tin tài khoản và cập nhậtlại mật khẩu mới

Quản lý Filevà Folder

CRUD file và folder

Tải xuống Tải xuống file và folderUpload File và

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ắn

Ngườ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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Luồng đi chính

<b>-</b> Bước 1: Người dùng mở ứng dụng “Reporto” để đăng nhập

<b>-</b> Bước 2: Ứng dụng hiển thị màn hình đăng nhập để người dùng đó đăng nhập.

<b>-</b> 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>-</b> 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>-</b> Bước 5: Ứng dụng kiểm tra và xác nhận chấp nhận.

<b>-</b> Bước 6: Cho phép người dùng sử dụng hệ thống web ReportLuồng đi khác

Nếu người dùng chưa có tài khoản, đăng ký khoản mới.b. u cầu khác

Khơng có

c. Tiền điều kiệnUser đã 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.

<b>-</b> Trường hợp 2: Chưa đăng ký tài khoản mới.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

trạng thái được tự động lưu lạib. Luồng xử lý event

Luồng đi chính

<b>-</b> Bước 1: Người dùng click vào nút “Logout” trên phần mềm

<b>-</b> Bước 2: Ứng dụng hiển thị dạng cảnh báo.

<b>-</b> 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>-</b> Bước 4: Ứng dụng xác nhận và chuyển họ trở lại màn hình đăng nhậpLuồng đi khác

Khơng có

c. u cầu khácKhơ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ụngf. Extend points

Khơng có

g. Activity diagram

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Hình 2.3. Sơ đồ Activity Use-case Logout2.1.4.3. Đặc tả Use-case “Đổi mật khẩu”

a. Mô tả ngắn

Người dùng cho biết muốn đổi mật khẩu nếu thấy mật khẩu của mình khơng dùng được nữa

b. Luồng xử lý eventLuồng đi chính

- 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”.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

- Bước 9: Hệ thống thông báo người dùng đã đổi mật khẩu thành côngLuồ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 6c. 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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Hình 2.3. Sơ đồ Activity Use-case Đổi mật khẩu2.1.4.4. Đặc tả Use-case “Đăng ký”

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="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 loginLuồng đi khác

Khơng có

c. u cầu khácKhơng có

d. Tiền điều kiệnKhơng có

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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Hình 2.4. Sơ đồ Activity Use-case Register2.1.4.5. Đặc tả Use-case “Quên mật khẩu”

a. Mô tả ngắn

Nếu người dùng quên mật khẩu, người dùng có thể chuyển đến màn hình “qn mật khẩu” để xác nhận đổi mật khẩu mới qua email mà họ đã cung cấp

b. Luồng xử lý eventLuồng đi chính

- 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”

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="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. u cầu khácKhơ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ấpe. Hậu điều kiện

Người dùng đã đổi mật khẩu thành cơngf. Extend points

Khơng có

g. Activity diagram

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Hình 2.5. Sơ đồ Activity Use-case Đổi Password2.1.4.6. Đặc tả Use-case “Quản lý Folder”

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="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ơngc. u cầu khác

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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: 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

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

d. Tiền điều kiệnUser đã 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.f. Extend points

Khơng có

g. Activity diagram

Hình 2.7. Sơ đồ Activity Use-case Quản lý File

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

2.1.4.8. Đặc tả Use-case “Download”a. Mô tả ngắn

Trong use case này, user có thể tải về folder hoặc file report từ website quản lý báo cáo.b. 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: 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 q 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 q 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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

User đã có tài khoảne. Hậu điều kiện

User đã tải xuống folder/file thành côngf. Extend points

- 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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

Luồ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ơngc. u cầu khác

Khơng có

d. Tiền điều kiệnUser đã có tài khoản

e. Hậu điều kiện

User đã tải lên folder/file thành cơngf. Extend points

Khơng có

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

Hì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”a. Mô tả ngắn

Trong use case này, user có thể chọn và mở trang edit tài liệu, từ đó user có thể edit lại file report nếu cần thiết

b. Luồng xử lý eventLuồ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 chọn một file report trong màn hình chính (hoặc trong một folder nào đó).

- 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. u cầu khác

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

Khơng có

d. Tiền điều kiệnUser đã có tài khoản

e. Hậu điều kiện

User đã chỉnh sửa file report thành côngf. Extend points

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

b. Luồng xử lý eventLuồ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. u cầu khácKhơng có

d. Tiền điều kiệnUser đã có tài khoản

e. Hậu điều kiện

User đã vào trang chủ thành côngf. Extend points

Không có

g. Activity diagram

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

Hình 2.11. Sơ đồ Activity Use-case Trang chủ

<b>2.2.Mơ hình lớp</b>

2.2.1. Class diagram:

Hình 2.12. Sơ đồ Lớp của hệ thống

2.2.2. Danh sách các lớp và mối liên hệ

.No Class/Relationship Type Note

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa

1 userID Private Được sử dụng để lưu mã user2 email Private Được sử dụng để lưu email

của user

3 password Private Được sử dụng để lưu mậtkhẩu của user

STT Tên phươngthức

Kiểu trả về Tham số Ý nghĩa

1 createUser() Khơng có Khơng có Được sử dụng để tạo một tàikhoản user mới

2 eidtUser() Khơng có Khơng có Được sử dụng để chỉnh sửathông tin trong tài khoản user

2.2.3.2. Folder

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa

1 id Private Được sử dụng để lưu mã folder2 parentID Private Được sử dụng để lưu mã của

</div>