KHÓA LUẬN tốt NGHIỆP xây DỰNG ỨNG DỤNG QUẢN lý QUY TRÌNH THỰC HIỆN KHÓA LUẬN tốt NGHIỆP

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN ĐÌNH PHÚ THỊNH KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP BUILD AN APP TO MANAGE THE THESIS IMPLEMENTATION PROCESS KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN ĐÌNH PHÚ THỊNH – 16521178 KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP BUILD AN APP TO MANAGE THE THESIS IMPLEMENTATION PROCESS KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN THS LÊ THANH TRỌNG TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ĐHQG TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc TP HCM, ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP Nhóm SV thực hiện: Nguyễn Đình Phú Thịnh Cán hướng dẫn: 16521178 ThS Lê Thanh Trọng Đánh giá Khóa luận: Về báo cáo: Số trang: Số chương: Số bảng số liệu: Số hình vẽ: Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Đánh giá chung: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Điểm sinh viên: Nguyễn Đình Phú Thịnh: /10 Người nhận xét (Ký tên ghi rõ họ tên) ĐHQG TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc TP HCM, ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP Nhóm SV thực hiện: Nguyễn Đình Phú Thịnh Cán phản biện: 16521178 Đánh giá Khóa luận: Về báo cáo: Số trang: Số chương: Số bảng số liệu: Số hình vẽ: Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đánh giá chung: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Điểm sinh viên: Nguyễn Đình Phú Thịnh /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Sau trình học tập rèn luyện Trường Đại học Công nghệ Thông tin, em nhận giảng dạy hướng dẫn tận tình của quý thầy cô, đặc biệt thầy cô Khoa Công nghệ Phần mềm Nhờ giúp đỡ thầy cơ, em có lượng kiến thức cần thiết để hồn thành Khóa luận tốt nghiệp với đề tài “Xây dựng ứng dụng Quản lý Quy trình thực Khóa luận tốt nghiệp” Em xin chân thành cảm ơn thầy Lê Thanh Trọng cô Trần Hạnh Xuân hướng dẫn tận tình, khơng ngần ngại bỏ thời gian để giải thích quy trình nghiệp vụ, đóng góp ý kiến để em hồn thành khóa luận tốt nghiệp cách tốt Bên cạnh giúp đỡ thầy cơ, q trình thực Khóa luận em cịn nhận lời góp ý, lời động viên từ bạn bè, anh chị đồng nghiệp gia đình Em xin cảm ơn tất người Trong suốt trình em tìm hiểu thực khóa luận, sử dụng cơng nghệ tìm hiểu, thời gian nhân lực lại có hạn, nên khơng thể tránh sai sót Do em mong nhận thơng cảm ý kiến đóng góp chân thành từ quý thầy cô bạn Một lần nữa, em xin chân thành cảm ơn người Thành phố Hồ Chí Minh, ngày tháng năm 2021 Nguyễn Đình Phú Thịnh ĐHQG TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP Cán hướng dẫn: Ths Lê Thanh Trọng Thời gian thực hiện:Từ ngày 08/03/2021 đến ngày 30/06/2021 Sinh viên thực hiện: Nguyễn Đình Phú Thịnh - 16521178 Nội dung đề tài: Mục tiêu đề tài: ● Xây dựng ứng dụng hỗ trợ Giảng viên, Cán khoa dễ dàng thực công việc Quản lý Sinh viên thực Khóa luận, q trình đề xuất, đăng ký thực đề tài trình phản biện chấm đề tài ● Giúp Sinh viên dễ dàng theo dõi thông tin quan trọng liên quan đến khóa luận, đăng ký đề tài, nộp file ghi lại trình thực đề tài Phạm vi: ● Ứng dụng triển khai mơi trường Web ● Ứng dụng có tính năng: ○ Quản lý thông tin Sinh viên thực khóa luận, Giảng viên hướng dẫn ○ Quản lý trình đề xuất, xét duyệt, thay đổi thơng tin đề tài ○ Hỗ trợ Cán khoa đăng thông báo, quản lý file nộp Sinh viên, Giảng viên ○ Quản lý Hội đồng chấm Phản biện ○ Giảng viên thực đề xuất Đề tài, nộp file cách tương tác trực tiếp với đăng thơng báo ○ Tương tự, Sinh viên thực đăng ký Đề tài, nộp file dễ dàng cách tương tác trực tiếp với đăng thông báo ○ Sinh viên ghi lại q trình thực khóa luận để dễ dàng theo dõi Đối tượng sử dụng: Đối tượng sử dụng phần mềm Sinh viên, Giảng viên, Cán Khoa Phương pháp thực hiện: ● Nghiên cứu nghiệp vụ: ○ Quy trình triển khai thực khóa luận tốt nghiệp UIT ○ Vai trò đơn vị thực bước quy trình ○ Điểm cần cải thiện việc thực quy trình ● Nghiên cứu công nghệ: ○ Front-end: React ○ Back-end: NodeJS ○ Database: MongoDB Kết mong đợi: ● Hồn thiện tính đặt ● UI/UX tốt, mang lại trải nghiệm tốt cho người dùng ● Dễ dàng bảo trì, mở rộng, có khả đưa vào thực tiễn Hình 4.37 Màn hình Đề tài Kỳ thực Khóa luận 73 4.5.6 Màn hình Quản lý Giảng viên Hình 4.38 Màn hình Quản lý Giảng viên 4.5.7 Màn hình Quản lý Sinh viên Hình 4.39 Màn hình Quản lý Sinh viên 74 4.5.8 Màn hình Quản lý Đề tài Hình 4.40 Màn hình Quản lý Đề tài 75 4.5.9 Màn hình Thơng tin Đề tài Hình 4.41 Màn hình Thơng tin Đề tài (1) 76 Hình 4.42 Màn hình Thơng tin Đề tài (2) Hình 4.43 Màn hình Thơng tin Đề tài (3) 77 4.5.10 Màn hình Quản lý Thơng báo Hình 4.44 Màn hình Quản lý Thơng báo 78 4.5.11 Màn hình Quản lý file nộp Hình 4.45 Màn hình Quản lý File nộp 79 4.5.12 Màn hình Danh sách File Thư mục Hình 4.46 Màn hình Danh sách File Thư mục 4.5.13 Màn hình Quản lý Hội đồng chấm Hình 4.47 Màn hình Quản lý Hội đồng chấm 80 4.5.14 Màn hình Quản lý Biểu mẫu Hình 4.48 Màn hình Quản lý Biểu mẫu 4.5.15 Màn hình Quản lý User Hình 4.49 Màn hình Quản lý User 4.6 Triển khai hệ thống Chỉnh sửa file index.js server 81 Chỉnh sửa PORT: Bình thường server node dùng PORT 5000, deploy ứng dụng lên Heroku, port khơng có, nên cần phải chỉnh sửa port source const PORT = process.env.PORT || 5000; Tạo Production Build: chạy lệnh npm run build thư mục client để tạo thư mục build Thư mục thư mục tĩnh chứa file index.html Tiếp đến, sử dụng path module để làm việc với file đường dẫn, thêm đoạn code sau đây: import path, { dirname } from 'path'; import { fileURLToPath } from 'url'; const filename = fileURLToPath(import.meta.url); const dirname = dirname( filename); app.use(express.static(path.resolve( dirname, "./client/build"))); app.get("*", function (request, response) { response.sendFile(path.resolve( dirname, "./client/build", "index.html")); }); Đoạn code import thư mục build client vào server đảm bảo route định nghĩa React Router hoạt động bình thường ứng dụng deploy lên Heroku Nó xử lý request cách điều hướng chúng index.html Chỉnh sửa file package.json Heroku dựa vào file package.json để cài đặt module cần thiết Thêm dòng sau vào object “script” file json: "build": "cd client && npm run build", "install-client": "cd client && npm install", "heroku-postbuild": "npm run install-client && npm run build", "server": "nodemon index.js", "develop": "concurrently kill-others-on-fail \"npm run server\" \"npm run start prefix client\"", "start": "concurrently kill-others-on-fail \"npm run server\" \"npm run start prefix client\"" “heroku-postbuild” chạy trình deploy hoàn thành Tạo Procfile 82 Đây file mà Heroku chạy Tạo file thư mục project với nội dung: web:npm start Deploy lên Heroku Trên terminal, thư mục project, chạy lệnh: $ heroku create quan-ly-khoa-luan Để tạo ứng dụng heroku có tên quan-ly-khoa-luan Sau ta push project nên heroku: $ git add $ git commit -am "Deploy Heroku" $ git push heroku main Cài đặt biến môi trường Truy cập vào Heroku dashboard, chọn thư mục quan-ly-khoa-luan Đi đến tab setting tìm phần “config vars” Nhấn “reveal config vars” sau thêm biến môi trường cần thiết với key tên biến value giá trị biến Hình 4.50 Cài đặt biến môi trường Heroku Cuối chạy lệnh sau terminal truy cập link ứng dụng Heroku để xem thành $ heroku open 83 Chương KẾT LUẬN 5.1 Kết đạt Thông qua việc nghiên cứu tìm hiểu đề tài, sinh viên phát triển triển khai thành công ứng dụng Quản lý quy trình thực Khóa luận Tốt nghiệp Tuy hệ thống dừng lại tính thời gian nhân lực nhóm có hạn Nhưng hệ thống cịn hoạt động tốt có khả mở rộng phát triển thêm tương lai Về mặt kĩ thuật, cơng nghệ, nhóm đạt kết quả: ● Hiểu thêm Quy trình thực Khóa luận UIT ● Tìm hiểu MongoDB, cách mà MongoDB diễn tả mối quan hệ, cú pháp để thao tác với data cách cải thiện tốc độ truy xuất liệu ● Tìm hiểu Google Drive API, phương pháp sử dụng API để có khả tích hợp dịch vũ lưu trữ thơng tin Google Drive vào ứng dụng để giảm bớt gánh nặng cho database ● Tìm hiểu MERN Stack vận dụng để xây dựng ứng dụng với tốc độ nhanh ● Nâng cao kỹ lập trình Về mặt thực tiễn, nhóm đạt được: ● Nâng cao khả tìm hiểu, nghiên cứu cơng nghệ ● Học kỹ mềm: giao tiếp, thu thập thông tin từ khách hàng ● Cải thiện kỹ quản lý thời gian, lên kế hoạch 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi Sinh viên có kiến thức tảng React đề tài trước nên khơng gặp nhiều khó khăn việc sử dụng framework để phát triển frontend 84 Được hỗ trợ tận tình giảng viên nên cơng việc tìm hiểu nghiệp vụ diễn dễ dàng 5.2.2 Khó khăn Vì trước chủ yếu làm phần front-end nên kỹ liên quan đến back-end sinh viên chưa tốt, phải nhiều thời gian tìm hiểu cơng nghệ Express, MongoDB Vì chất đề tài, phần mềm hệ thống tương tự hầu hết phần mềm nội nên Sinh viên thực việc tìm hiểu đối sánh để cải thiện ứng dụng thân Tuy nhận giúp đỡ giảng viên dịch Covid-19 nên liên lạc online, làm giảm giao tiếp dẫn đến khả số quy trình khơng chuẩn hồn tồn Nhân lực nhóm ít, phải thực đề tài song song với việc làm fulltime nên Sinh viên gặp nhiều khó khăn quản lý thời gian, dẫn đến Ứng dụng chưa thật hồn chỉnh, cịn tồn đọng bug 5.3 Hướng phát triển Nếu có thêm nhiều thời gian, Đề tài cho phép cải thiện, nâng cao tính mở rộng thêm tính khác như: ● Tích hợp AI vào hệ thống: giúp nhận biết đề tài có tên đề tài tương tự để tránh trùng lặp ● Tính push notification: Khi có thơng báo quan trọng deadline đến gần, gửi push notification đến trình duyệt User ● Mở rộng tính ghi Log cho Sinh viên: Cho phép sinh viên tạo công việc lên lịch cho cơng việc ● Tính nhắn tin Giảng viên hướng dẫn Sinh viên thực đề tài ● Tìm sửa bug 85 ● Trau dồi giao diện để trải nghiệm người dùng tốt 86 TÀI LIỆU THAM KHẢO ▪ Tài liệu Tiếng Việt [1] Các Biểu mẫu liên quan đến Quy trình Khóa luận, loại biên https://se.uit.edu.vn/vi/biểu-mẫu-3/266-mẫu-trình-bày-báo-cáo-kltn-và-hướngdẫn.html [2] MongoDB gì? Cơ sở liệu phi quan hệ https://viblo.asia/p/mongodb-la-gico-so-du-lieu-phi-quan-he-bJzKmgoPl9N [3] Giới thiệu MERN Stack https://viblo.asia/p/gioi-thieu-mern-stack- bWrZnv4vZxw ▪ Tài liệu Tiếng Anh [1] Introduction to Google Drive API https://developers.google.com/drive/api/v3/about-sdk [2] MongoDB Guides https://docs.mongodb.com/guides/ [3] mongoose Getting Started https://mongoosejs.com/docs/ [4] Learn the MERN stack by building an exercise tracker https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-anexercise-tracker-mern-tutorial-59c13c1237a1 [5] How to link your React application with Google Drive API (V3), list and search files https://medium.com/@willikay11/how-to-link-your-react-application-withgoogle-drive-api-v3-list-and-search-files-2e4e036291b7 [6] Recoil.js — A New State Management Library for React https://medium.com/habilelabs/recoil-js-a-new-state-management-library-forreact-3319ca42356f 87 ... ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP Nhóm SV thực hiện: Nguyễn Đình Phú Thịnh... ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUY TRÌNH THỰC HIỆN KHĨA LUẬN TỐT NGHIỆP Nhóm SV thực hiện: Nguyễn Đình Phú Thịnh... để viết API TĨM TẮT KHĨA LUẬN Khóa luận với đề tài ? ?Xây dựng ứng dụng quản lý quy trình thực khố luận tốt nghiệp? ?? tập trung vào tìm hiểu, nghiên cứu quy trình thực Khóa luận Khoa Công nghệ Phần