Xây dựng ứng dụng web quản lý đề tài nghiên cứu khoa học công nghệ cấp trường đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 Khảo sát trạng 1.2 Tính cấp thiết đề tài 1.3 Mục tiêu nhiệm vụ 1.3.1 Mục tiêu 1.3.2 Nhiệm vụ 1.4 Công nghệ sử dụng 1.5 Phương pháp nghiên cứu CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Java Spring Boot 2.1.1 Giới thiệu 2.1.2 Kiến trúc ứng dụng 2.1.3 Ưu điểm - Hạn chế 2.1.4 Lý sử dụng 2.2 MongoDB 2.2.1 Giới thiệu 2.2.2 Ưu điểm 10 2.2.3 Hạn chế 10 2.2.4 Lý sử dụng 10 2.3 Angular 11 2.3.1 Giới thiệu 11 2.3.2 Kiến trúc ứng dụng 12 2.3.3 Ưu điểm 13 2.3.4 Lý sử dụng 13 2.4 NG-ZORRO 14 2.4.1 Giới thiệu 14 2.4.2 Ưu điểm 14 2.4.3 Hạn chế 15 2.4.4 Lý sử dụng 15 ix CHƯƠNG XÁC ĐỊNH YÊU CẦU BÀI TOÁN 16 3.1 Phân tích tốn 16 3.2 Quy trình nghiệp vụ 16 3.2.1 Quy trình đăng ký đề tài 18 3.2.2 Quy trình kiểm tra đánh giá 19 3.2.3 Quy trình xét duyệt đề tài 20 3.2.4 Quy trình ký hợp đồng 21 3.2.5 Quy trình thực đề tài theo dõi tiến độ 22 3.2.6 Quy trình nghiệm thu 23 3.2.7 Quy trình toán triển khai ứng dụng 24 3.3 Mơ hình hóa chức 24 3.3.1 Danh sách Actor 24 3.3.2 Sơ đồ Usecase 25 3.3.3 Mô tả Usecase 25 3.3.4 Đặc tả Use Case 29 CHƯƠNG THIẾT KẾ PHẦN MỀM 59 4.1 Thiết kế kiến trúc 59 4.1.1 Front-End 60 4.1.2 Back-End 62 4.2 Thiết kế sở liệu 64 4.2.1 Database Schema 64 4.2.2 Mô tả chi tiết Database Schema 65 4.3 Thiết kế lược đồ 81 4.3.1 Tạo đề tài 81 4.3.2 Tạo thuyết minh 82 4.3.3 Kiểm duyệt đề tài khoa 83 4.3.4 Kiểm duyệt đề tài phòng KHCN 83 4.3.5 Chủ nhiệm đề tài chỉnh sửa yêu cầu 84 4.3.6 Tạo hội đồng kiểm duyệt 85 4.3.7 Tạo biên hội đồng kiểm duyệt 85 4.3.8 Tạo biểu điểm thành viên cho hội đồng 86 x 4.3.9 Báo cáo tiến độ thực 86 4.3.10 Xin hủy đề tài 87 4.3.11 Tạo hội đồng nghiệm thu 88 4.3.12 Trưởng đơn vị đề xuất hội đồng 89 4.3.13 Upload file 90 CHƯƠNG THIẾT KẾ GIAO DIỆN 91 5.1 Screen Chủ nhiệm đề tài 91 5.1.1 SCCNDT01 Trang đề tài 91 5.1.2 SCCNDT02 Trang đề xuất đề tài 92 5.1.3 SCCNDT03 Trang cập nhật mã đề tài 94 5.1.4 SCCNDT04 Màn hình sửa mã số đề tài 95 5.1.5 SCCNDT05 Màn hình bổ sung thuyết minh 96 5.1.6 SCCNDT06 Tiến độ thực 96 5.1.7 SCCNDT07 Màn hình danh sách báo cáo tiến độ 97 5.1.8 SCCNDT08 Màn hình danh sách xin huỷ đề tài 98 5.1.9 SCCNDT09 Màn hình modal thêm đề nghị hủy 99 5.1.10 SCCNDT10 Màn hình kết nghiên cứu 100 5.1.11 SCCNDT11 Màn hình kết nghiệm thu đề tài 101 5.1.12 SCCNDT12 Màn hình chi tiết kết nghiệm thu 102 5.1.13 SCCNDT13 Màn hình file tơi 103 5.1.14 SCCNDT14 Màn hình danh sách file 104 5.2 Screen Trưởng đơn vị 104 5.2.1 SCTDV01 Màn hình kiểm duyệt khoa 104 5.2.2 SCTDV02 Màn hình yêu cầu chỉnh sửa 105 5.2.3 SCTDV03 Màn hình yêu cầu chỉnh sửa 106 5.2.4 SCTDV04 Màn hình chỉnh sửa thành viên đề xuất hội đồng 107 5.3 Screen Admin (Phòng Khoa Học Công Nghệ) 108 5.3.1 SCKHCN01 Màn hình kiểm duyệt KHCN 109 5.3.2 SCKHCN02 Màn hình hội đồng kiểm duyệt 110 5.3.3 SCKHCN03 Màn hình hợp đồng 111 5.3.4 SCKHCN04 Màn hình tiến độ thực 112 xi 5.3.5 SCKHCN05 Màn hình hội đồng nghiệm thu 113 5.3.6 SCKHCN06 Màn hình chỉnh sửa hội đồng nghiệm thu 116 5.3.7 SCKHCN07 Màn hình thêm hội đồng nghiệm thu 117 5.3.8 SCKHCN08 Màn hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất 118 5.3.9 SCKHCN09 Màn hình hội đồng nghiệm thu duyệt đề xuất 119 5.3.10 SCKHCN10 Màn hình nghiệm thu đề tài 121 5.3.11 SCKHCN11 Màn hình quản lý file đề tài 122 5.3.12 SCKHCN12 Màn hình thay đổi thời gian đề tài 123 CHƯƠNG KẾT QUẢ VÀ THỰC NGHIỆM 124 6.1 Hệ thống Back-End 124 6.2 Hệ thống Front-End 124 6.3 Cài đặt hệ thống 125 6.3.1 Thư viện môi trường phát triển 125 6.3.2 Cài đặt chạy chương trình 126 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 126 7.1 Kết đạt 126 7.2 Ưu điểm 127 7.3 Hạn chế 127 7.4 Hướng phát triển 127 TÀI LIỆU THAM KHẢO 128 xii DANH MỤC CÁC CHỮ VIẾT TẮT DI: Depedency Injection IoC: Inversion of Control JWT: JSON Web Token HTTP: Hyper Text Transfer Protocol API: Application Programming Interface NCKH: Nghiên cứu khoa học CNDT: Chủ nhiệm đề tài TDV: Trưởng đơn vị xiii DANH MỤC CÁC BẢNG BIỂU Bảng 3.1 Bảng mô tả sơ đồ UseCase 29 Bảng 3.2 Bảng đặc tả Usecase xem thông tin viết (UCU01) 30 Bảng 3.3 Bảng đặc tả use case đề tài (UCU02) 31 Bảng 3.4 Bảng đặc tả use case cập nhật mã số đề tài (UCU03) .32 Bảng 3.5 Bảng đặc tả use case bổ sung thuyết minh (UCU04) 33 Bảng 3.6 Bảng đặc tả use case tiên độ thực 35 Bảng 3.7 Bảng đặc tả use case kết nghiên cứu (UCU06) 36 Bảng 3.8 Bảng đặc tả use case kết nghiệm thu (UCU07) 38 Bảng 3.9 Đặc tả use case file (UCU08) .39 Bảng 3.10 Đặc tả use case kiểm duyệt KHCN (UCA01) 40 Bảng 3.11 Đặc tả use case kiểm duyệt khoa (UCA02) .42 Bảng 3.12 Đặc tả Use Case “Thêm hội đồng xét duyệt” (UCA03.1) 44 Bảng 3.13 Đặc tả Use Case “Thêm biên hội đồng” (UCA03.2) 45 Bảng 3.14 Đặc tả Use Case “Thêm biểu điểm thành viên” (UCA03.3) .46 Bảng 3.15 Bảng đặc tả use case hợp đồng (UCA04) 47 Bảng 3.16 Bảng đặc tả use case quán lý tiến độ thực (UCA05) .49 Bảng 3.17 Bảng đặc tả use case đè xuất hội đồng nghiệm thu (UCA06) 50 Bảng 3.18 Đặc tả use case quản lý hội đồng nghiệm thu (UCA07) 52 Bảng 3.19 Bảng đặc tả nghiệm thu đề tài (UCA08) 54 Bảng 3.20 Bảng đặc tả use case toán (UCA09) 55 Bảng 3.21 Bảng đặc tả use case quản lý file .56 Bảng 3.22 Bảng đặc tả use case quản lý danh mục 57 Bảng 3.23 Đặc tả use case quản lý cấu hình .58 Bảng 4.1 Bảng mơ tả chi tiết thuộc tính bảng Lĩnh Vực 65 Bảng 4.2 Bảng mơ tả chi tiết thuộc tính bảng Loại Hình Nghiên Cứu .65 Bảng 4.3 Bảng mơ tả chi tiết thuộc tính bảng Kinh Phí .66 Bảng 4.4 Bảng mô tả chi tiết thuộc tính bảng Thời gian quy trình 67 Bảng 4.5 Bảng mô tả chi tiết thuộc tính bảng Sản phẩm 68 Bảng 4.6Bảng mơ tả chi tiết thuộc tính bảng Học hàm 68 Bảng 4.7 Bảng mơ tả chi tiết thuộc tính bảng Học vị 68 Bảng 4.8 Bảng mô tả chi tiết thuộc tính bảng Cấu hình biểu mẫu .69 Bảng 4.9 Bảng mô tả chi tiết thuộc tính bảng Cấu hình email 69 Bảng 4.10 Bảng mô tả chi tiết thuộc tính bảng File 70 Bảng 4.11 Bảng mơ tả chi tiết thuộc tính bảng Chuyên mục viết 70 Bảng 4.12 Bảng mơ tả chi tiết thuộc tính bảng Bài viết .71 Bảng 4.13 Bảng mô tả chi tiết thuộc tính bảng Văn biểu mẫu 71 xiv Bảng 4.14 Bảng mô tả chi tiết thuộc tính bảng Thơng báo 72 Bảng 4.15 Bảng mô tả chi tiết thuộc tính bảng Đề tài 75 Bảng 4.16 Bảng mô tả chi tiết thuộc tính bảng Hội đồng xét duyệt 76 Bảng 4.17 Bảng mơ tả chi tiết thuộc tính bảng Biên hội đồng xét duyệt 76 Bảng 4.18 Bảng mơ tả chi tiết thuộc tính bảng Hội đồng nghiệm thu 77 Bảng 4.19 Bảng mô tả chi tiết thuộc tính bảng document embeded 79 Bảng 5.1 Bảng đặc tả hình Danh sách đề tài .92 Bảng 5.2 Bảng đặc tả hình đề xuất đề tài 94 Bảng 5.3 Bảng đặc tả hình cập nhật mã đề tài 94 Bảng 5.4 Bảng đặc tả hình chỉnh sửa mã đề tài 95 Bảng 5.5 Bảng đặc tả hình bổ sung thuyết minh .96 Bảng 5.6 Bảng đặc tả hình bổ sung thuyết minh .97 Bảng 5.7 Bảng đặc tả hình danh sách báo cáo tiến độ .98 Bảng 5.8 Bảng đặc tả hình danh sách đề nghị hủy 99 Bảng 5.9 Bảng đặc tả hình đề nghị hủy 99 Bảng 5.10 Bảng đặc tả hình kết nghiên cứu .100 Bảng 5.11 Bảng đặc tả hình kết nghiệm thu đề tài 101 Bảng 5.12 Bảng đặc tả hình chi tiết kết nghiệm thu đề tài .103 Bảng 5.13 Bảng đặc tả hình file tơi 103 Bảng 5.14 Bảng đặc tả mà hình kiểm duyệt khoa 105 Bảng 5.15 Bảng mơ tả hình u cầu chỉnh sửa .106 Bảng 5.16 Bảng đặc tả hình chỉnh sửa thành viên đề xuất hội đồng 108 Bảng 5.17 Bảng đặc tả hình kiểm duyệt KHCN .109 Bảng 5.18 Bảng đặc tả hình hội đồng kiểm duyệt 111 Bảng 5.19 Bảng đặc tả hình hợp đồng 111 Bảng 5.20 Bảng đặc tả hình tiến độ thực 113 Bảng 5.21 Bảng đặc tả hình hội đồng nghiệm thu 115 Bảng 5.22 Bảng đặc tả hình chỉnh sửa hội đồng nghiệm thu 117 Bảng 5.23 Bảng đặc tả hình thêm hội đồng nghiệm thu 118 Bảng 5.24 Bảng đặc tả hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất .119 Bảng 5.25 Bảng đặc tả hình hội đồng nghiệm thu duyệt đề xuất .120 Bảng 5.26 Bảng đặc tả hình nghiệm thu đề tài 122 Bảng 5.27 Bảng đặc tả hình thay đổi thời gian đề tài .124 xv DANH SÁCH CÁC BIỂU ĐỒ VÀ HÌNH ẢNH Hình 2.1 Spring boot Hình 2.2 Mơ hình Three Tier Hình 2.3 Mơ hình MVC Hình 2.4 Sơ đồ kiến trúc tạo ứng dụng rest api sử dụng Spring Boot Hình 2.5 MongoDB .9 Hình 2.6 Angular .11 Hình 2.7 Kiến trúc angular 12 Hình 2.8 NG-Zorro Ant Design 14 Hình 2.9 Trình duyệt hỗ trợ 14 Hình 3.1 Flow ứng dụng 17 Hình 3.2 Quy trình đăng ký đề tài .18 Hình 3.3 Quy trình kiểm tra đánh giá đề tài 19 Hình 3.4 Quy trình xét duyệt đề tài theo hội đồng xét duyệt 20 Hình 3.5 Quy trình ký hợp đồng .21 Hình 3.6 Quy trình thực đề tài theo dõi tiến độ 22 Hình 3.7 Quy trình nghiệm thu 23 Hình 3.8 Quy tình toán triển khai ứng dụng .24 Hình 3.9 Sơ đồ Use Case 25 Hình 4.1 Kiến trúc ứng dụng nghiên cứu khoa học 59 Hình 4.2 Cấu trúc thư mục Fontend 60 Hình 4.3 Cấu trúc thư mục Back-End 62 Hình 4.4 Hình entity sở liệu 64 Hình 4.5 Hình embeded document sở liệu 65 Hình 4.6 Class Diagram 80 Hình 4.7 Sequence tạo đề tài .81 Hình 4.8 Sequence tạo thuyết minh 82 Hình 4.9 Sequence kiểm duyệt đề tài Khoa 83 Hình 4.10 Sequece kiểm duyệt đề tài phịng KHCN 83 Hình 4.11 Chủ nhiệm đề tài chỉnh sửa yêu cầu .84 Hình 4.12 Tạo hội đồng kiểm duyệt 85 Hình 4.13 Tạo biên hội đồng kiểm duyệt 85 Hình 4.14 Tạo biểu điểm thành viên cho hội đồng 86 Hình 4.15 Báo cáo tiến độ thực 86 Hình 4.16 Xin hủy đề tài 87 Hình 4.17 Tạo hội đồng nghiệm thu 88 Hình 4.18 Trưởng đơn vị đề xuất hội đồng .89 Hình 4.19 Upload file 90 xvi Hình 5.1 Trang đề tài tơi .91 Hình 5.2 Màn hình đề xuất đề tài 92 Hình 5.3 Màn hình đề xuất đề tài 93 Hình 5.4 Màn hình cập nhật mã số đề tài 94 Hình 5.5 Màn hình sửa mã số đề tài 95 Hình 5.6 Màn hình bổ sung thuyết minh 96 Hình 5.7 Màn hình tiến độ thực 96 Hình 5.8 Màn hình danh sách báo cáo tiến độ 97 Hình 5.9 Màn hình danh sách xin hủy đề tài 98 Hình 5.10 Màn hình thêm đề nghị hủy .99 Hình 5.11 Màn hình kết nghiên cứu 100 Hình 5.12 Màn hình kết nghiệm thu đề tài .101 Hình 5.13 Màn hình chi tiết kết nghiệm thu 102 Hình 5.14 Màn hình File .103 Hình 5.15 Màn hình danh sách file 104 Hình 5.16 Màn hình kiểm duyệt khoa .104 Hình 5.17 Màn hình yêu cầu chỉnh sửa 105 Hình 5.18 Màn hình đề xuất hội đồng 106 Hình 5.19 Màn hình chỉnh sửa thành viên đề xuất 107 Hình 5.20 Màn hình kiểm duyệt KHCN 109 Hình 5.21 Màn hình Hội đồng kiểm duyệt .110 Hình 5.22 Màn hình hợp đồng 111 Hình 5.23 Màn hình tiến độ thực 112 Hình 5.24 Màn hình hội đồng nghiệm thu 113 Hình 5.25 Màn hình chỉnh sửa hội đồng nghiệm thu 116 Hình 5.26 Màn hình thêm hội đồng nghiệm thu .117 Hình 5.27 Màn hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất 118 Hình 5.28 Màn hình hội đồng nghiệm thu duyệt đề xuất 119 Hình 5.29 Màn hình nghiệm thu đề tài 121 Hình 5.30 Màn hình quản lý file đề tài .122 Hình 5.31 Màn hình thay đổi thời gian đề tài 123 Hình 6.1 Các thư mục “quan-ly-tham-quan” 126 xvii CHƯƠNG 1.1 TỔNG QUAN Khảo sát trạng Trong thời kỳ cơng nghệ thơng tin đóng vai trị vơ quan trọng, khơng thể thiếu sống hàng ngày người Với phát triển Internet, công nghệ thông tin áp dụng mạnh nhằm thúc đẩy trình đổi đại hóa nhiều lĩnh vực kinh tế giáo dục Qua tạo nhiều ứng dụng để đáp ứng nhu cầu giải trí, thương mại, quản lý, y tế , giáo dục… Đặc biệt tình hình dịch bệnh căng thẳng nay, công việc gần phải chuyển sang xử lý trực tuyến Đối với việc quản lý thông tin vơ cần thiết, việc số hóa liệu xử lý tài liệu mạng thông qua ứng dụng web giúp giảm tải lượng lớn tài liệu lưu trữ, tìm kiếm chúng dễ dàng Trong lĩnh vực giáo dục áp dụng công nghệ thông tin vào nhiều vấn đề dạy học kiểm tra trực tuyến, hệ thống quản lý đăng ký môn học trực tuyến Đặc biệt giai đoạn dịch bệnh ngày căng thẳng việc quản lý giải vấn đề học vụ chuyển lên hệ thống trực tuyến Bằng cách lẫn sinh viên thầy cơ, cán nhân viên yêu cầu xử lý công việc nhà, tránh nguy bệnh dịch Việc đăng ký, xét duyệt chấm điểm cho đề tài nghiên cứu khoa học trường đại học năm vô quan trọng Các đề tài nghiên cứu khoa học nghiên cứu sinh chủ nhiệm đề tài thông qua hội đồng kiểm duyệt nghiệm thu từ có nhiều sản phẩm hữu ích Tuy nhiên việc đăng ký, xét duyệt chấm điểm cho đề tài nghiên cứu khoa học nhiều hạn chế nguyên nhân sau: ● Số lượng đề tài năm đăng ký lớn, khó quản lý xếp thời gian quy trình hợp lý, đặc biệt thời gian dịch bệnh căng thẳng việc để đăng ký đề tài nghiên cứu khó khăn ● Phải thông qua nhiều mốc thời gian quy trình để xử lý vấn đề liên quan đến đề tài Thiếu linh hoạt thay đổi bất ngờ gặp cố ý Tab hội đồng True chờ duyệt đề xuất thành viên Tab Tab hội đồng duyệt thành viên đề xuất True Tab Thời gian quy trình True Dropdown Box Tìm kiếm True Text Tạo hội đồng True Button Data từ api với trạng thái “Chưa đề xuất thành viên” Hiển thị bảng hội đồng với trạng thái chưa duyệt Hiển thị bảng hội đồng với trạng thái Chọn thời gian quy trình load lại bảng hội đồng theo thời gian quy trình Chọn thời gian quy trình load lại bảng hội đồng theo tìm kiếm Ấn vào nút “Generate” hiển thị hình tạo hội đồng 114 Bảng hội đồng True Table Xem thành viên True Button Chỉnh sửa thông tin hội đồng True Button 10 Phân trang True Button Data từ api Data từ api Bảng hiển thị hội đồng lọc theo điều kiện Khi ấn hiển thị modal chứa danh sách thành viên hội đồng Chỉnh sửa thông tin hội đồng Khi click chuyển đến trang cần chuyển Bảng 5.21 Bảng đặc tả hình hội đồng nghiệm thu 115 5.3.6 SCKHCN06 Màn hình chỉnh sửa hội đồng nghiệm thu Hình 5.25 Màn hình chỉnh sửa hội đồng nghiệm thu No Name Required Format Reference Note Tên hội đồng True Text Data từ api Tên hội đồng Số định True Text Data từ api Số định Ngày định True Date Data từ api Ngày định Picker Ngày họp True Date Data từ api Ngày họp Data từ api Khách Picker Khách mời True Text mời hội đồng Địa điểm họp True Text Đóng True Button Data từ api Địa điểm họp Nút đóng ấn vào khơng lưu lại thay đổi 116 Lưu lại True Nút lưu lại Button ấn lưu lại thay đổi Bảng 5.22 Bảng đặc tả hình chỉnh sửa hội đồng nghiệm thu 5.3.7 SCKHCN07 Màn hình thêm hội đồng nghiệm thu Hình 5.26 Màn hình thêm hội đồng nghiệm thu No Name Thời gian quy trình Danh sách đề tài Required True Thành viên hội đồng Nhập thành viên Format Dropdown Box Dropdown Box Reference Data từ api Data từ api True Dropdown Box Data từ api True Button True Note Thời gian quy tình Danh sách đề tài phù hợp để tạo hội đồng Danh sách giảng viên, cán trường (Lưu ý: Bắt buộc tạo thành viên với vai trò chủ tịch thư ký) Khi ấn thành viên chọn thêm vào bảng danh sách 117 True Table Danh sách thành viên hội đồng Đóng True Button Lưu lại True Button thành viên vừa thêm Bảng danh sách thành viên vừa thêm vào Nút đóng ấn vào khơng lưu lại thay đổi Nút lưu lại ấn lưu lại thay đổi Bảng 5.23 Bảng đặc tả hình thêm hội đồng nghiệm thu 5.3.8 SCKHCN08 Màn hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất Hình 5.27 Màn hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất No Name Required Bảng hội đồng True chờ đề xuất Format Reference Table Data từ api Xem danh sách True thành viên Button Note Bảng hội đồng với trạng thái “Đề xuất thành viên” Khi ấn hiển thị modal chứa danh sách thành viên vừa đề xuất 118 Phân trang True Button Duyệt thành viên True hội đồng Button Chỉnh sửa thông True tin bên hội đồng Button Upload danh sách True thành viên đề xuất Button Data từ api Khi ấn bảng danh sách hội đồng hiển thị hội đồng tương ứng với trang Khi ấn hiển thị modal cho phép xem chỉnh sửa danh sách thành viên Khi ấn hiển thị modal chỉnh sửa thơng tin hội đồng Khi ấn hiển thị chỗ upload file danh sách thành viên đề xuất Bảng 5.24 Bảng đặc tả hình hội đồng nghiệm thu chờ duyệt thành viên đề xuất 5.3.9 SCKHCN09 Màn hình hội đồng nghiệm thu duyệt đề xuất Hình 5.28 Màn hình hội đồng nghiệm thu duyệt đề xuất 119 No Name Bảng hội đồng duyệt đề xuất Xem danh sách thành viên Chỉnh sửa thông tin bên hội đồng Upload danh sách thành viên đề xuất Xem file đề xuất Required Format True Table Phân trang Reference Note Data từ Bảng hội đồng với api trạng thái “Đã duyệt thành viên” Khi ấn hiển thị modal chứa danh sách thành viên Khi ấn hiển thị modal chỉnh sửa thông tin hội đồng True Button True Button True Button Khi ấn hiển thị chỗ upload file danh sách thành viên đề xuất True Button True Button Khi ấn hiển thị modal cho phép xem file upload từ Khi ấn bảng danh sách hội đồng hiển thị hội đồng tương ứng với trang Data api Bảng 5.25 Bảng đặc tả hình hội đồng nghiệm thu duyệt đề xuất 120 5.3.10 SCKHCN10 Màn hình nghiệm thu đề tài Hình 5.29 Màn hình nghiệm thu đề tài No Name Required Format Bảng hội True Table đồng duyệt đề xuất Tìm kiếm True Text Xem True Button Phân trang True Button Tìm kiếm True thành viên Text Reference Data từ api Data từ api Note Bảng hội đồng với trạng thái “Đã duyệt thành viên” Tìm kiếm hội đồng theo mã số đề tài tên hội đồng Khi ân vào nút Xem hiển thị bảng điểm hội đồng nhận xét thành viên hội đồng chuyển text nút thành “Ẩn” Khi ấn load bảng hội đồng theo trang tương ứng Tìm kiếm thành viên theo tên 121 File điểm phiếu True Button Data từ api File phiếu đánh True giá Button Data từ api Danh sách True thành viên hội đồng Upload phiếu True điểm đánh giá Table Data từ api Button Xuất file phiếu điểm tất thành viên hội đồng Xuất file phiếu đánh giá cho tất thành viên hội đồng Danh sách thành viên hội đồng Khi ấn vào hiển thị modal upload file phiếu điểm đánh giá thành viên Bảng 5.26 Bảng đặc tả hình nghiệm thu đề tài 5.3.11 SCKHCN11 Màn hình quản lý file đề tài Hình 5.30 Màn hình quản lý file đề tài No Name Required Bảng đề True tài Format Table Reference Data từ api Note Bảng danh sách đề tài 122 Xem file đề True tài Button Phân trang Button Tab chọn xem True file Tập file cần True xem True Data từ api Tab Data từ api Khi ấn vào nút Xem load file đề tài bên Khi ấn vào load đề tài theo trang tương ứng Các tab để chọn xem file, ấn load file tương ứng Khi ấn load danh sách file tương ứng 5.3.12 SCKHCN12 Màn hình thay đổi thời gian đề tài Hình 5.31 Màn hình thay đổi thời gian đề tài No Name Required Thời gian True quy trình Tìm kiếm True Format Dropdown Box Text Bảng đề True tài chưa ký hợp đồng Chỉnh sửa True thời gian quy trình đề tài Table Button Reference Note Data từ Thời gian quy trình api để lọc đề tài Lọc đề tài theo tên đề tài Data từ Bảng đề tài chưa api ký hợp đồng Khi ấn modal chỉnh sửa thời gian quy trình đề tài 123 Phân trang True Button Data api từ Khi ấn load bảng đề tài theo trang tương ứng Bảng 5.27 Bảng đặc tả hình thay đổi thời gian đề tài CHƯƠNG KẾT QUẢ VÀ THỰC NGHIỆM 6.1 Hệ thống Back-End Hệ thống Back-end xây dựng ngôn ngữ Java sử dụng Spring Boot Framwork để lập trình 6.2 Hệ thống Front-End Ứng dụng Front-end sử dụng công nghệ Single Page Application giúp ứng dụng thao tác liệu nhanh mà khơng u cầu tải lại trang Chủ nhiệm đề tài: • Đề xuất đề tài • Thêm tuyết minh cho đề tài • Xem danh sách đề tài • Chỉnh sửa đề tài • Hủy đề tài • Bổ sung thuyết minh • Báo cáo tiến độ thực • Báo cáo kết nghiên cứu • Xem kết nghiệm thu • Xuất file liên quan đến đề tài • Đăng xuất Trưởng đơn vị: • Xét duyệt đề tài • Đề xuất hội đồng nghiệm thu • Đăng xuất Quản trị viên (Phịng khoa học cơng nghệ): • Đăng xuất • Xét duyệt đề tài • Quản lý hội đông kiểm duyệt 124 • • • • • • • • • • • • • • • • • Quản lý hợp đồng Quản lý tiến độ thực đề tài Quan lý hội đồng nghiệm thu Quản lý kết nghiệm thu đề tài Quản lý toán Quản lý lịch sử file Thay đổi thời gian quy trình đề tài Quản lý banner Quản lý chuyên mục viết Quản lý viết theo chuyên mục Quản lý học hàm Quản lý học vị Quản lý lĩnh vực nghiên cứu Quản lý loại hình nghiên cứu Quản lý sản phẩm Quản lý loại phí Quản lý cấu hình biểu mẫu 6.3 Cài đặt hệ thống Clone download project từ link github: https://github.com/stc-hcmute/nghien-cuu-khoa-hoc 6.3.1 Thư viện môi trường phát triển STT Library/Software Download URL Npm https://nodejs.org/en/download/ Apache https://tomcat.apache.org/tomcat-7.0doc/appdev/installation.html Jdk https://www.oracle.com/java/technologies/javase/javasejdk8-downloads.html Angular CLI https://cli.angular.io/ https://docs.mongodb.com/manual/administration/installMongoDB community/ 125 6.3.2 Cài đặt chạy chương trình Cơng cụ sử dụng để chạy project: • Visual Studio Code: dùng để chạy front-end • IntelliJ: dùng để chạy back-end Bước 1: Clone download project từ link github: https://github.com/stc-hcmute/nghien-cuu-khoa-hoc Bước 2: Trong thư mục “nghien-cuu-khoa-hoc” chứa thư mục là: “nghien-cuukhoa-hoc-fe”, “nghien-cuu-khoa-hoc-be” có clone project từ github giải nén file đính kèm báo cáo Tiến hành vào thư mục “nghien-cuu-khoa-hoc” Bước 3: Sau vào thư mục “nghien-cuu-khoa-hoc” (như hình) Hình 6.1 Các thư mục “quan-ly-tham-quan” Bước 4: Mở thư mục “tham-quan-be” IntelliJ, chọn run taskbar Bước 5: Mở thư mục “tham-quan-fe” Visual Studio Code, chọn termial taskbar Bước 6: Chạy lệnh “npm install” để cập nhật thư viện, package thiếu máy mà project cần Bước 8: Sau lệnh npm install kết thúc, gõ lệnh “ng serve” nhấn enter Bước 9: Sau compile xong, url project hiển thị dòng cuối, nhấn “ctrl + click” vào url, trình duyệt web hiển thị Hoặc chạy tay cách mở trình duyệt web nhập url: http://localhost:4200 Giao diện trang chủ khởi chạy đầu tiên: http://localhost:4200 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết đạt Về nhóm tìm hiểu xây dựng đạt được: • • Xây dựng RESTFul API ngôn ngữ Java sử dụng Spring Boot Áp dụng Angular để xây dựng giao diện phía khách 126 • • • • Sử dụng thư viện NG-ZORRO- ant design để xây dựng giao diện Tìm hiểu docker để sử dụng thư viện codewars-runner-cli Tìm hiểu deloy front-end Google Cloud, back-end Google Cloud Platform, Database MongoDB Cluster Xây dựng ứng dụng hỗ trợ việc thực quản lý đề tài Nghiên cứu khoa học cấp trường 7.2 Ưu điểm • • • • • • Giao diện đại, dễ nhìn, thân thiện với người dùng Áp dụng cơng nghệ Hệ thống có tốc độ phản hồi nhanh Khả bảo trì, mở rộng dễ dàng, nhanh chóng Có tính đặc thù nghiệp vụ Hỗ trợ đa ngôn ngữ 7.3 Hạn chế • Do liên quan đến nghiệp vụ lkhas nhiều nên khó sử dụng với người khơng nắm nghiệp vụ NCKH • Một số hình chưa hỗ trợ responsive • Vẫn có khả tồn lỗi • Chưa phải ứng dụng thời gian thực 7.4 Hướng phát triển Sau xây dựng phát triển tính khoảng tháng nhóm lên số ý tưởng để phát triển hệ thống lớn mạnh khắc phục số hạn chế hệ thống Tuy nhiên, khơng đủ thời gian nên nhóm lưu ý tưởng lại thực có thời gian • • • • • Tăng tính tương thích cho hình Hỗ trợ thời gian thực Xây dựng giao diện thân thiện dễ sử dụng Xây dựng tính thơng báo thay đổi hệ thống Xây dựng hệ thống cho tốc độ phản hồi cao 127 TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Tạo CRUD Rest API với Spring boot https://hocspringboot.net/2020/10/29/crud-don-gian-voi-restful-api-trong-springboot/ [2] Cài đặt MongoDB Ubuntu 20.04 https://cloudviet.com.vn/cai-dat-mongodb-tren-ubuntu-20-04/ Tiếng Anh: [1] Angular Documents https://angular.io/docs [2] Java Documents https://docs.oracle.com/en/java/ [3] Spring Boot Documents https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/ [4] NG-ZORRO Ant Design Documents https://ng.ant.design/docs/getting-started/en [5] MongoDB Documents https://docs.mongodb.com/ [6] Docker document https://docs.docker.com/ https://docs.docker.com/engine/install/ubuntu/ [7] SysAdmin, How to setup docker ubuntu https://phoenixnap.com/kb/how-to-install-docker-on-ubuntu-18-04 [8] NGING Document http://nginx.org/en/docs/ [9] grokonez, How to Deploy Angular on Nginx remote Server Example https://www.youtube.com/watch?v=iPYgCYb2tZg 128 ... cán nhân viên yêu cầu xử lý công việc nhà, tránh nguy bệnh dịch Việc đăng ký, xét duyệt chấm điểm cho đề tài nghiên cứu khoa học trường đại học năm vô quan trọng Các đề tài nghiên cứu khoa học. .. cần xuất đề tài UCA01 Kiểm duyệt KHCN Phong khoa học công nghệ kiểm duyệt đề tài UCA02 Kiểm duyệt Khoa Trưởng đơn vị kiểm duyệt đề tài UCA03 Hội đồng kiểm duyệt Tạo hội đồng cho đề tài, tạo biên... xử lý) 1.3 Mục tiêu nhiệm vụ 1.3.1 Mục tiêu ● Xây dựng ứng dụng web quản lý công nghệ Java Spring Boot Angular ● Hoàn thiện giao diện chức theo yêu cầu phòng Khoa Học Công Nghệ ● Hỗ trợ tạo quản