Đồ án 2 tìm hiểu công nghệ reactjs nodejs phần mềm quản lý trung tâm ngoại ngữ

ĐẠ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 TRẦN THẾ ANH – 19521220 ĐỒ ÁN – TÌM HIỂU CÔNG NGHỆ REACTJS & NODEJS PHẦN MỀM QUẢN LÝ TRUNG TÂM NGOẠI NGỮ (Language Center Management System) GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN CƠNG HOAN TP HỒ CHÍ MINH, THÁNG 12 NĂM 2022 ĐẠ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 TRẦN THẾ ANH - 19521220 ĐỒ ÁN – TÌM HIỂU CƠNG NGHỆ REACTJS & NODEJS PHẦN MỀM QUẢN LÝ TRUNG TÂM NGOẠI NGỮ (Language Center Management System) GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN CÔNG HOAN TP HỒ CHÍ MINH, THÁNG 12 NĂM 2022 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành tri ân đến thầy Nguyễn Công Hoan hướng dẫn, tạo điều kiện cho em hoàn thành đồ án – Tìm hiểu cơng nghệ ReactJS & Nodejs Trong khoảng thời gian thực đồ án, em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết quy trình để tạo sản phẩm phần mềm Bên cạnh đó, em xin cảm ơn bạn bè lớp thảo luận góp ý cho đề tài đồng thời khơi thêm nguồn động lực cho em suốt q trình đầy khó khăn Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song báo cáo em chắn không tránh khỏi thiếu sót, em mong nhận thơng cảm góp ý chân thành từ thầy Em xin chân thành cảm ơn Thành phố Hồ Chí Minh, tháng 12 năm 2022 Trần Thế Anh TÓM TẮT Đồ án với đề tài “Quản lý trung tâm ngoại ngữ” tập trung vào phân tích thực trạng ứng dụng cơng nghệ để từ xây dụng ứng dụng website sử dụng mà khơng u cầu nhiều phần cứng, phần mềm Đáp ứng nhu cầu quản lý trung tâm ngoại ngữ Đề tài việc tìm hiểu thực trạng, đưa vấn đề tồn đọng cải thiện Xác định mục tiêu, phạm vi đề tài chức cần có hệ thống Ngồi việc xử lý nghiệp vụ cho hệ thống, em tìm hiểu, so sánh lựa chọn công nghệ phù hợp giúp nâng cao trải nghiệm người dùng, tối ưu chi phí phát triển triển khai Nhờ việc phân tích yêu cầu rõ ràng, thời gian phát triển ngắn yêu cầu, tính thay đổi, trình phát triển đề tài sử dụng mơ hình V-model cho việc xây dựng hệ thống Kết thu giai đoạn thiết kế kiến trúc hệ thống, sở liệu, giao diện thể sơ đồ người dùng, sơ đồ thiết kế sử dụng công cụ Figma Draw.io Trong giai đoạn thực hiện, client server phát triển song song sử dụng thư viện React cho client Node.js với Express framework cho server, công cụ phát triển Visual Studio Code công cụ quản lý công việc Notion Công việc kiểm thử unit test thực xuyên suốt trình phát triển kiểm thử tích hợp cuối giai đoạn Trong giai đoạn vận hành, server triển khai lên máy chủ Google Cloud, hồn tồn truy cập liệu thông qua api từ thiết bị gửi yêu cầu có chứa trường xác thực liệu hợp lệ Phần cuối khoá luận trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho hệ thống tương lai Nội dung khoá luận trình bày chương: - Chương 01: Tổng quan Trình bày sơ thực trạng, nhu cầu thực tế Xác định mục tiêu phạm vi đề tài - Chương 02: Cơ sở lý thuyết, tổng quan công nghệ Giớ thiệu giải thuật, công nghệ, tảng sử dụng đồ án - Chương 03: Phân tích thiết kế ứng dụng Phân tích yêu cầu, thiết kế, thực triển khai ứng dụng - Chương 04: Kết luận Những kết đạt sau kết thúc đồ án Những hạn chế, khó khăn q trình phát triển đồ án nêu hướng phát triển tương lai MỤC LỤC Chương 1.1 TỔNG QUAN Hiện trạng .1 1.1.1 Nhu cầu thực tế đề tài 1.1.2 Hiện trạng đơn vị cần xây dựng phần mềm 1.1.3 Các phần mềm sẵn có .1 1.1.4 Các hạn chế, vấn đề tồn 1.2 Mục tiêu 1.2.1 1.3 Mục đích Phạm vi 1.3.1 Đối tượng sử dụng 1.3.2 Yêu cầu Chương 2.1 Thuật toán sử dụng 2.1.1 2.2 CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ Thuật toán Bcrypt Công nghệ sử dụng .8 2.2.1 React 2.2.2 React Redux 10 2.2.3 Ant Design 11 2.2.4 Firebase Storage 12 2.2.5 JSON Web Token 13 2.2.6 Sequelize .15 2.2.7 PostgreSQL 16 2.2.8 Vercel 18 2.2.9 Heroku 19 Chương PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 20 3.1 Yêu cầu nghiệp vụ 20 3.1.1 Phân loại yêu cầu phần mềm 20 3.1.2 Bảng trách nhiệm cho yêu cầu 44 3.2 Use case 58 3.2.1 Sơ đồ Use case 58 3.2.2 Danh sách Actors 59 3.2.3 Danh sách Use case 59 3.2.4 Đặc tả Use case 61 3.3 Activity diagram 84 3.3.1 Lược đồ hoạt động quản lý khóa học 84 3.3.2 Lược đồ hoạt động quản lý lớp học 85 3.3.3 Lược đồ hoạt động quản lý học viên 86 3.3.4 Lược đồ hoạt động quản lý nhân 87 3.3.5 Lược đồ hoạt động quản lý điểm 88 3.3.6 Lược đồ hoạt động quản lý trình độ 89 3.3.7 Lược đồ hoạt động cài đặt tham số, quy định 90 3.3.8 Lược đồ hoạt động báo cáo 91 3.4 Thiết kế sở liệu 92 3.4.1 Sơ đồ ERD 92 3.4.2 Mô tả chi tiết 92 3.5 Thiết kế giao diện 100 3.5.1 Danh sách hình 100 3.5.2 Sơ đồ liên kết hình 102 3.5.3 Mô tả chi tiết hình 102 3.6 Component Diagram 138 3.7 Deployment Diagram 139 Chương Kết luận 139 4.1 Kết đạt 139 4.2 Hạn chế 140 4.3 Hướng phát triển 141 BẢNG PHÂN CÔNG CÔNG VIỆC 142 TÀI LIỆU THAM KHẢO 143 Tài liệu tiếng Anh 143 Tài liệu tiếng Việt 144 DANH MỤC HÌNH Hình 2.1 Tốc độ băm số thuật toán phổ biến Hình 2.2 Mã giải thuật toán băm Bcrypt .7 Hình 2.3 Kết qủa cuối trình băm Hình 2.4 Logo thư viện React Hình 2.5 Logo thư viện React Redux 10 Hình 2.6 Các thành phần Redux 11 Hình 2.7 Logo thư viện Ant Design 11 Hình 2.8 Logo Firebase Storage 12 Hình 2.9 Logo JSON Web Token (JWT) 13 Hình 2.10 Nội dung header JWT .14 Hình 2.11 Nội dung Reserved claims 15 Hình 2.12 Ngun tắc chuỗi bí mật 15 Hình 2.13 Logo ORM Sequelize .16 Hình 2.14 Logo PostgreSQL .16 Hình 2.15 Minh hoạ liệu lưu bảng PostgreSQL .17 Hình 2.16 Logo Vercel 18 Hình 2.17 Logo Google Cloud Platform 19 Hình 3.1 Sơ đồ use case .59 Hình 3.2 Lược đồ hoạt động quản lý khóa học 84 Hình 3.3 Lược đồ hoạt động quản lý lớp học 85 Hình 3.4 Lược đồ hoạt động quản lý học viên 86 Hình 3.5 Lược đồ hoạt động quản lý nhân 87 Hình 3.6 Lược đồ hoạt động quản lý điểm 88 Hình 3.7 Lược đồ hoạt động quản lý trình độ 89 Hình 3.8 Lược đồ hoạt động cài đặt tham số, quy định .90 Hình 3.9 Lược đồ hoạt động báo cáo 91 Hình 3.10 Lược đồ quan hệ ERD 92 Hình 3.11 Sơ đồ liên kết hình 102 Hình 3.12 Màn hình đăng nhập 103 Hình 3.13 Màn hình quên mật 104 Hình 3.14 Màn hình quên mật 105 Hình 3.15 Màn hình trang chủ 106 Hình 3.16 Màn hình danh sách giảng viên 107 Hình 3.17 Màn hình thêm giảng viên 109 Hình 3.18 Màn hình danh sách nhân viên 110 Hình 3.19 Màn hình thêm nhân viên 112 Hình 3.20 Màn hình danh sách học viên 113 Hình 3.21 Màn hình thêm học viên 115 Hình 3.22 Màn hình chi tiết học viên 116 Hình 3.23 Màn hình chi tiết học viên – lớp 117 Hình 3.24 Màn hình chi tiết học viên – thời khóa biểu 118 Hình 3.25 Màn hình chi tiết học viên – điểm 118 Hình 3.26 Màn hình danh sách khóa học 119 Hình 3.27 Màn hình thêm khóa học - 121 Hình 3.28 Màn hình thêm khóa học - 122 Hình 3.29 Màn hình thêm khóa học 123 Hình 3.30 Màn hình chi tiết khóa học – thơng tin 124 Hình 3.31 Màn hình chi tiết khóa học – lớp 124 Hình 3.32 Màn hình loại khóa học 125 Hình 3.33 Màn hình mức độ khóa học 127 Hình 3.34 Màn hình danh sách cột điểm 128 Hình 3.35Màn hình khung 129 Hình 3.36 Màn hình danh sách lớp học 130 Hình 3.37 Màn hình thêm lớp học 132 Hình 3.38 Màn hình chi tiết lớp học 133 Hình 3.39 Màn hình chi tiết lớp học – lịch 133 Hình 3.40 Màn hình chi tiết lớp học – điểm 134 Not null, cao Điểm cao Input Button Hoàn thành Button Trở lại điểm thấp Bảng 3.135 Mô tả đối tượng hình danh sách cột điểm • Danh sách biến cố: STT Biến cố Xử lý Chọn chi tiết kiểm tra Hiển thị trang chi tiết Chọn chỉnh sửa Hiển thị trang chỉnh sửa kiểm tra Chọn Add Thêm kiểm tra vào danh sách Chọn cancel Đóng trang thêm kiểm tra Bảng 3.136 Biến cố xử lý hình danh sách cột điểm 3.5.3.17 Màn hình danh sách khung • Giao diện: Hình 3.35Màn hình khung • Các thành phần: 130 STT Kiểu Ràng buộc Ý nghĩa Button Chi tiết khung thời gian Button Xóa khung thời gian Select Thêm khung thời gian Button Lưu Bảng 3.137 Mô tả đối tượng hình khung thời gian • Danh sách biến cố: STT Biến cố Xử lý Chọn chi tiết khung thời gian Hiển thị trang chi tiết Chọn chỉnh sửa Hiển thị trang chỉnh sửa khung thời gian Chọn Save Thêm khung thời gian vào danh sách Bảng 3.138 Biến cố xử lý hình khung thời gian 3.5.3.18 Màn hình danh sách lớp học • Giao diện: Hình 3.36 Màn hình danh sách lớp học • Các thành phần: 131 STT Kiểu Ràng buộc Ý nghĩa Fillter Lọc theo tên lớp Fillter Lọc theo tên khóa Fillter Lọc theo ngày bắt đầu Fillter Lọc theo ngày kết thúc Fillter Lọc theo số lượng học viên Button Thêm khóa học Button Xuất file CSV Button Chỉnh sửa khóa học Button Xóa khóa học 10 Button Chi tiết khóa học 11 Table Danh sách khóa học Bảng 3.139 Mơ tả đối tượng hình danh sách lớp học • Danh sách biến cố: STT Biến cố Xử lý Search Lọc danh sách khóa theo tên nhập Add course Hiển thị hình thêm khóa học Export CSV Xuất danh sách khóa học file CSV Fillter fee Lọc danh sách khóa học theo học phí Edit Course Remove Course Xóa khóa học Chọn vào chi tiết khóa học Hiển thị hình chi tiết khóa học Hiển thị hình sửa thơng tin khóa học Bảng 3.140 Biến cố xử lý hình danh sách lớp học 3.5.3.19 Màn hình thêm lớp học • Giao diện: 132 Hình 3.37 Màn hình thêm lớp học • Các thành phần: STT Kiểu Ràng buộc Ý nghĩa Input Not null Nhập tên lớp Select Not null Nhập ngày bắt đầu Select Not null Nhập ngày kết thúc Select Not null Chọn khóa Input Not null Chọn phòng Button Thêm khung thời gian Button Lưu Bảng 3.141 Mô tả đối tượng hình thêm lớp học • Danh sách biến cố: STT Biến cố Xử lý Chọn Add Thêm lớp vào danh sách Bảng 3.142 Biến cố xử lý hình thêm lớp học 133 3.5.3.20 Màn hình chi tiết lớp học a Thơng tin • Giao diện: Hình 3.38 Màn hình chi tiết lớp học b Lịch • Giao diện: Hình 3.39 Màn hình chi tiết lớp học – lịch 134 c Điểm • Giao diện: Hình 3.40 Màn hình chi tiết lớp học – điểm • Các thành phần: STT Kiểu Ràng buộc Ý nghĩa Input Nhập số điểm học viên Button Xuất file CSV Button Lưu thông tin điểm học viên Bảng 3.143 Mơ tả đối tượng hình chi tiết lớp học – điểm • Danh sách biến cố: STT Biến cố Xử lý Export CSV Xuất file CSV Save Lưu điểm học viên vừa nhập Bảng 3.144 Biến cố xử lý hình chi tiết lớp học – điểm d Học viên • Giao diện: 135 Hình 3.41Màn hình chi tiết lớp học – học viên • Các thành phần: STT Kiểu Input Ràng buộc Ý nghĩa Tìm kiếm tên học viên Bảng 3.145 Mơ tả đối tượng hình chi tiết lớp học – học viên • Danh sách biến cố: STT Biến cố Xử lý Search Hiển thị danh sách học viên theo tên vừa nhập Bảng 3.146 Biến cố xử lý hình chi tiết lớp học – học viên e Bài thi • Giao diện: 136 Hình 3.42 Màn hình chi tiết lớp học – thi • Các thành phần: STT Kiểu Ràng buộc Ý nghĩa Button Thêm thi Button Sửa thơng tin thi Button Xóa thi Bảng 3.147 Mơ tả đối tượng hình chi tiết lớp học – thi • Danh sách biến cố: STT Biến cố Xử lý Add exam Hiển thị modal thêm thông tin thi Edit Hiển thị modal sửa thông tin thi Remove Xóa thi Bảng 3.148 Biến cố xử lý hình chi tiết lớp học – thi f Giảng viên • Giao diện: 137 Hình 3.43 Màn hình chi tiết lớp học – giảng viên • Các thành phần: STT Kiểu Ràng buộc Ý nghĩa Button Xóa giảng viên khỏi lớp học Check box Chọn giảng viên để thêm vào giảng dạy Button Xác nhận chọn giảng viên thêm vào lớp Bảng 3.149 Mơ tả đối tượng hình chi tiết lớp học – giảng viên • Danh sách biến cố: STT Biến cố Xử lý Submit Thêm giảng viên vào lớp Bảng 3.150 Biến cố xử lý hình chi tiết lớp học – giảng viên 138 3.6 Component Diagram Hình 3.44 Component diagram 139 3.7 Deployment Diagram Hình 3.45 Deployment diagram 140 CHƯƠNG 4.1 KẾT LUẬN Kết đạt Thông qua việc nghiên cứu tìm hiểu cơng nghệ, đặc biệt cơng nghệ mới, nhóm phát triển ứng dụng web quản lý trung tâm ngoại ngữ Ứng dụng triển khai tảng đám mây để truy cập thông qua mạng Internet Source code ứng dụng: lang-center Về việc tổ chức quản lý: - Hiểu vận dụng tốt kiến thức học lớp quy trình phát triển phần mềm để tăng tính hiệu việc làm teamwork - Sử dụng công cụ hỗ trợ Notion giúp việc quản lý trở nên đơn giản hơn, trực quan hơn, có định hướng - Sử dụng quản lý source code GitHub Về mặt kỹ thuật, em đạt kết sau: - Cách xây dựng website theo mơ hình Client-Server - Tìm hiểu biết cách triển khai máy chủ lên tảng đám mây để sử dụng khơng mạng cục Về mặt thực tiễn em đạt được: - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, đặc biệt công nghệ - Hiểu quy trình phát triển ứng dụng hồn chỉnh - Cải thiện kỹ lên kế hoạch điều phối công việc 4.2 Hạn chế Về việc tổ chức quản lý: - Có số cơng việc khơng hồn thành đặt Phải thay đổi linh hoạt sát để theo kịp tiến độ Về sản phẩm phần mềm: - Các cơng nghệ cịn chưa hoàn thiện, thường xuyên gặp vấn đề liên 141 quan đến mã nguồn Cùng với cộng đồng phát triển chưa lớn mạnh công nghệ cũ gây tốn nhiều thời gian để sửa lỗi - Khối lượng công việc cần thực nhiều nên chịu áp lực mặt thời gian - Nhiều thành phần giao diện chưa hỗ trợ, phải tự phát triển từ đầu - Ứng dụng thao tác thủ cơng, chưa tự động hóa nhiều thao tác 4.3 Hướng phát triển Đề tài cịn mở rộng phát triển thêm nhiều tính hữu ích cho người dùng như: - Cho phép học viên có tài khoản để truy cập vào ứng dụng để theo dõi tài liệu môn học, lịch học, lịch kiểm tra, đăng ký khóa học online Từ phát triển ứng dụng trở thành hệ thống E-learning - Cho phép người dùng chat, trao đổi cơng việc trực tiếp ứng dụng mà không cần thông qua tảng khác - Hỗ trợ đa ngôn ngữ đa chủ đề giao diện - Cho phép nhập liệu từ file Excel mẫu Gửi thông báo đến người dùng cập nhật hệ thống, chủ động đặt lịch thông báo 142 TÀI LIỆU THAM KHẢO Tài liệu tiếng Anh [1] P G D Group, "PostgreSQL: Documentation," The PostgreSQL Global Development Group, [Online] Available: https://www.postgresql.org/docs/ [2] Sascha Depold, "Manual | Sequelize," 2021 [Online] Available: https://sequelize.org/master/manual/assocs.html [3] BezKoder, "Node.js JWT Authentication with PostgreSQL example BezKoder," 10 December 2021 [Online] Available: https://www.bezkoder.com/node-js-jwt-authentication-postgresql/ [4] Bezkoder, "React JWT Authentication (without Redux) example - Bezkoder," December 2021 [Online] Available: https://www.bezkoder.com/react-jwtauth/ [5] Heroku, "Heroku Postgres | Heroku Dev Center," 17 November 2021 [Online] Available: https://devcenter.heroku.com/articles/heroku-postgresql [6] R C.Martin, Clean Code: A Handbook of Agile Software Craftsmanship, Prentice Hall, 2008 [7] BezKoder, "Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize," 11 2021 [Online] Available: https://www.bezkoder.com/nodeexpress-sequelize-postgresql/ [8] Comunity contributors, "Tutorial: Intro to React," [Online] Available: https://reactjs.org/tutorial/tutorial.html [Accessed 10 2021] [9] A Design, "Ant Design document," [Online] Available: https://ant.design/docs/react/introduce [Accessed 11 10 2021] 143 [10] A Yadav, "Customising Ant Design (antd) theme without using react eject or any unreliable packages," 21 2020 [Online] Available: https://medium.com/@aksteps/customising-ant-design-antd-theme-withoutusing-react-eject-or-any-unreliable-libraries-782c53cbc03b [Accessed 10 2021] 144 ... CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN THẾ ANH - 19 521 220 ĐỒ ÁN – TÌM HIỂU CÔNG NGHỆ REACTJS & NODEJS PHẦN MỀM QUẢN LÝ TRUNG TÂM NGOẠI NGỮ (Language Center Management... 1.1.3 Các phần mềm sẵn có • Hệ thống quản lý trung tâm ngoại ngữ Mono eLMS • Cơng cụ quản lý trung tâm ngoại ngữ Centre Online • Phần mềm quản lý đào tạo VnResource – EBMPro • Và nhiều phần mềm khác... 20 Xem danh sách học viên BM20 21 QĐ6 QĐ15 Ghi 21 Thiết lập thi lịch thi BM21 Q? ?21 22 Bổ nhiệm giáo viên BM 22 Q? ?22 BM23 Q? ?23 23 24 25 Thêm hiệu chỉnh thông tin nhân viên Tra cứu nhân viên BM24