(Đồ án hcmute) xây dựng hệ thống hỗ trợ phỏng vấn ngành it

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGÀNH IT GVHD: THS NGUYỄN THANH PHƯỚC SVTH: HÀ MINH TRÍ SVTH: NGUYỄN XN HỒNG SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT GHVD: THS NGUYỄN THANH PHƯỚC SVTH: Hà Minh Trí 16110545 Nguyễn Xn Hồng 16110077 KHĨA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT GHVD: THS NGUYỄN THANH PHƯỚC SVTH: Hà Minh Trí 16110545 Nguyễn Xn Hồng 16110077 KHĨA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm 2020 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày tháng năm 2020 NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ tên: Nguyễn Xuân Hoàng MSSV: 16110077 Lớp: 161100CLST2 Họ tên: Hà Minh Trí MSSV: 16110545 Lớp: 161100CLST2 Ngành: Cơng nghệ thơng tin Giảng viên hướng dẫn: ThS Nguyễn Thanh Phước Ngày nhận đề tài: 20/2/2020 Ngày nộp đề tài: 1/7/2020   Tên đề tài: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT Nội dung thực đề tài: Tìm hiểu cơng nghệ thuộc MERN Stack (mySQL, ExpressJS, ReactJS, NodeJS) Tìm hiểu cơng nghệ hỗ trợ cho cơng nghệ (Redux, Hosting, Ant Design, …)  Xây dựng lên công cụ hỗ trợ cho nhân viên nhân việc tạo tin tuyển dụng, lấy đơn ứng tuyển ứng viên đăng kí để đưa vào đợt vấn tương ứng (do người vấn đảm nhiệm việc chọn lọc ứng viên thông qua kiểm tra nhanh)  Xây dựng lên phần mềm kiểm tra trắc nghiệm để hỗ trợ cho người vấn tạo đưa ứng viên vào kiểm tra để kiểm tra nhanh trình độ, từ đưa kết luận việc đậu rớt cho ứng viên Sản phẩm: Source code, Document TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày tháng năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên: Nguyễn Xn Hồng MSSV: 16110077 Họ tên: Hà Minh Trí MSSV: 16110545 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT Họ tên giáo viên hướng dẫn: ThS Nguyễn Thanh Phước NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không ? …………………………………………………………………………………………… Đánh giá loại: …………………………………………………………………………………………… Điểm:……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng năm 2020 Giảng viên hướng dẫn an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày tháng năm 2020 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên: Nguyễn Xuân Hoàng MSSV: 16110077 Lớp: 161100CLST2 Họ tên: Hà Minh Trí MSSV: 16110545 Lớp: 161100CLST2 Ngành: Cơng nghệ thông tin Tên đề tài: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT Họ tên giáo viên hướng dẫn: ThS Nguyễn Thanh Phước NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không ? …………………………………………………………………………………………… Đánh giá loại: …………………………………………………………………………………………… Điểm:……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng năm 2020 Giảng viên phản biện an LỜI CẢM ƠN Trên thực tế khơng có thành cơng mà khơng gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, chúng em nhận nhiều quan tâm, giúp đỡ q Thầy, bạn bè Với lịng biết ơn sâu sắc nhất, chúng em xin gửi đến quý Thầy Cô Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập trường Chúng em xin chân thành cảm ơn Thầy Nguyễn Thanh Phước tận tâm giảng dạy hướng dẫn chúng em qua buổi học lớp buổi thực hành Nếu khơng có lời hướng dẫn, dạy bảo thầy chúng em nghĩ đồ án em khó hồn thiện Một lần nữa, chúng em xin chân thành cảm ơn thầy Đồ án thực khoảng thời gian gần tháng Bước đầu vào thực tế, tìm hiểu lĩnh vực này, kiến thức chúng em hạn chế nhiều bỡ ngỡ Do vậy, khơng tránh khỏi thiếu sót điều chắn, em mong nhận ý kiến đóng góp q báu q Thầy Cơ bạn học lớp để kiến thức chúng em lĩnh vực hoàn thiện Sau cùng, em xin kính chúc q Thầy Cơ Khoa Cơng Nghệ Thơng Tin tồn thể q Thầy Cơ Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Trân trọng kính chào! Nhóm Sinh Viên an Mục lục LỜI CẢM ƠN .6 Mục lục Danh mục từ viết tắt 10 Danh mục bảng 11 Danh mục hình 13 CHƯƠNG TỔNG QUAN 15 1.1 Khảo sát trạng 15 1.2 Tính cấp thiết đề tài 15 1.3 Mục tiêu nhiệm vụ đề tài 16 1.3.1 Mục tiêu .16 1.3.2 Nhiệm vụ 16 1.4 Cơng nghệ lập trình 17 1.5 Phạm vi nghiên cứu 17 CHƯƠNG 2.1 CƠ SỞ LÝ THUYẾT 18 Giới thiệu MERN Stack [1] 18 2.1.1 Stack gì, đời? 18 2.1.2 MERN Stack [2] 18 2.2 Các công nghệ hỗ trợ khác 27 2.2.1 Redux [3] 27 2.2.2 Sequelize ORM [4] 29 2.2.3 Ant Design [5] 30 2.2.4 Cloudinary [6] 30 CHƯƠNG 3.1 XÁC ĐỊNH YÊU CẦU BÀI TỐN .32 Mơ hình hóa yêu cầu 32 3.1.1 Do Online Test For Interview 35 3.1.2 Manage quiz 37 3.1.3 Manage account 39 3.1.4 Manage candidates 41 3.1.5 Manage campaigns 42 CHƯƠNG THIẾT KẾ PHẦN MỀM .45 an 4.1 Thiết kế CSDL 45 4.1.1 user: Người dùng hệ thống 46 4.1.2 user_role: loại người dùng (HR / Candidate/ Interviewer) .46 4.1.3 subject : thể loại 47 4.1.4 question_table: quiz .47 4.1.5 questiontable_question: bảng nối question_table question 48 4.1.6 question: bảng câu hỏi 48 4.1.7 question_choices: bảng câu trả lời 49 4.1.8 answer_record: bảng ghi nhận lần thi user với quiz 49 4.1.9 level: trình độ 50 4.1.10 work_type: loại làm việc 50 4.1.11 campaign: tin tuyển dụng 50 4.1.12 interview: đợt vấn 51 4.1.13 group_candidate: ứng viên tham gia vấn 52 4.1.14 company : Công ty 52 4.1.15 multichoice_choices: bảng nối multichoice _table choices 53 4.2 Thiết kế giao diện, Mô tả mục đích hình 54 4.2.1 Join 54 4.2.2 Activity/Created 56 4.2.3 Thumbnail (quiz detail) .57 4.2.4 Activity/Completed 58 4.2.5 Setting Profile 59 4.2.6 Pre-Game 62 4.2.7 Review .63 4.2.8 Start game 65 4.2.9 Do Quiz .65 4.2.10 Pause 67 4.2.11 Creator popup 68 4.2.12 Quiz 69 4.2.13 Create question popup .70 4.2.14 Preview Popup 72 an 4.2.15 Teleport Popup 72 4.2.16 Admin/My Quizz .73 4.2.17 Admin/quizz control 75 4.2.18 Host Game 75 4.2.19 Report 76 4.2.20 Report/Interview/detail 77 4.2.21 Home 80 4.2.22 Search Campaign 81 4.2.23 Recruit detail .82 4.2.24 HR Manage 84 4.2.25 Assign interview 90 4.3 Thiết kế thư mục .95 CHƯƠNG KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 99 5.1 Hệ thống Back-end 99 5.2 Hệ thống Front-end 99 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 101 6.1 Những điểm đạt 101 6.2 Những khó khăn cách khắc phục .101 6.3 Ưu điểm 101 6.4 Hướng phát triển .102 Tài liệu tham khảo 103 an Thumbnail Bài quiz Select Thời gian vấn Label Thời gian đợt Button Thêm ứng viên Button Thêm đợt Button Xem cv thông tin 91 an 4.2.26 Create and Publish CV Hình 4.36 Giao diện Create and Publish CV Bảng 4.53 Đặc tả giao diện Create and Publish CV Tên Kiểu Mô tả/Ghi TextBox Nhập thông tin cần có Picture Mapping liệu qua từ 92 an 4.2.27 Invite Candidate Hình 4.37 Giao diện Invite Candidate Bảng 4.54 Đặc tả giao diện Invite Candidate Tên Kiểu Mô tả/Ghi Button Các ứng viên Button Nút invite Filter Filter ứng viên theo loại 93 an 4.2.28 Candidate invitation Hình 4.38 Giao diện Candidate invitation Bảng 4.55 Đặc tả giao diện Candidate invitation Tên Kiểu Mô tả/Ghi Button Danh sách tuyển dụng Button Thông tin chi tiết tuyển dụng button Accept invitation button Decline invitation 94 an 4.3 Thiết kế thư mục - Front End (ReactJS, Redux) o Components: Chứa components (chia nhỏ từ phần cần làm trang web để dễ quản lý, phát triển sửa lỗi components có tính tái sử dụng) Hình 4.39 Thiết kế thư mục components o Layouts: Gồm page dùng để bọc tất component thành phần bên Hình 4.40 Thiết kế thư mục layouts 95 an o Utils: Chứa component, hình ảnh dùng lại nhiều lần custom control Text Editor, PopUp, Tabs… Hình 4.41 Thiết kế thư mục utils o Redux:  Actions: Action hàm mô tả cách ta muốn thay đổi state hình dung action API cho state  Reducers: chứa sub-reducers root-reducer quản lý chung, root-reducer tham số để truyền vào tạo store, mục đích để truyền state thay đổi dựa vào actions Hình 4.42 Thiết kế thư mục redux - Back End (NodeJS, ExpressJS): 96 an Hình 4.43 Thiết kế thư mục Back End o Models: Chứa file mapping với database (Sequelize ORM) Hình 4.44 Thiết kế thư mục models o Routers: Chứa API connect với database FrontEnd 97 an Hình 4.45 Thiết kế thư mục routers 98 an CHƯƠNG KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 5.1 Hệ thống Back-end - Dựa vào mơi trường trang web mạng, lấy liệu thực tế để đưa vào sở liệu Đã tạo API hợp lý cho chức cụ thể có project với độ bảo mật cao với Json Web Token Việc lưu trữ lưu file có dung lượng lớn gây nên lỗi cho Backend hình ảnh, pdf,… xử lý cách sử dụng cloudinary Sử dụng Sequelize ORM để giúp model cho sở dụng liệu, từ giúp cho Backend sử dụng liệu cách hợp lý nhanh chóng 5.2 Hệ thống Front-end o o o o o o o o o o o o o o o o o o Ứ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 yêu cầu tải lại trang Candidate: Đăng ký account gmail Nộp hồ sơ, cv vào tin tuyển dụng Thi kiểm tra trình độ theo ngành mà ứng tuyển Xem kết làm Có thể làm lại bị trục trặc Xem quiz làm Quản lý tài khoản cá nhân Tìm kiếm tuyển dụng HR: Từ candidate đăng kí thành HR Quản lý tin tuyển dụng, đợt vấn Quản lý ứng viên dựa vào tin tuyển dụng mà ứng viên nộp hồ sơ Đưa ứng viên vào đợt vấn cụ thể theo thời gian, Interviewer mà HR định Xem xét đợt vấn hoàn thành, dựa vào xem ứng viên đậu rớt, từ liên hệ với ứng viên Quản lý tài khoản cá nhân Interviewer: Quản lý ứng viên tuyển dụng, cụ thể đợt tuyển dụng, Quản lý quiz để ứng viên tham gia ghi nhận lại điểm mà ứng viên hoàn thành quiz Hosting quiz lên để ứng viên tham gia đưa ứng viên đường link cụ thể Chỉnh sử trạng thái cho đợt vấn hoàn thành 99 an o Đưa điểm sàn cho ứng viên để xét theo điểm mà ứng viên kiểm tra, từ loại ứng viên kiểm tra điểm thấp 100 an CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Những điểm đạt - - o o      o Hoàn thành tiến độ hoàn chỉnh phần mềm Xử lý củng thực đầy đủ ý tưởng, thuật tốn nhóm đề Sau thời gian tìm hiểu nghiên cứu thực hiện, đề tài “HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT” thành công tốt đẹp Mục tiêu nhóm đạt được, khơng vậy, nhóm cịn đưa vào sử dụng cơng nghệ kỹ thuật mà ban đầu chưa đặt Cụ thể điểm mà nhóm đạt sau: Tìm hiểu công nghệ liên quan đến javacript – tổng hợp tạo nên cơng nghệ MERN Stack Tìm hiểu công nghệ hỗ trợ khác như: Redux để lưu state dễ dàng Ant design, Font awesome, Sweet Alert hỗ trợ component có sẵn cho Frontend DraftJS để tạo nên text editor (WYSIWYG editor) Bảo mật tốt với Json Web Token Cloudinary để lưu hình ảnh dung lượng lớn Hiện thực usecase hệ thống 6.2 Những khó khăn cách khắc phục - - Khó khăn khâu thiết kế liệu cho quán, khâu thiết kế giao diện form cho phù hợp với đề tài Xử lý code, thuật toán, bắt kiện form chưa tối ưu Mặc dù cố gắng việc thực tồn số điểm chưa đạt thời gian có hạn Cách khắc phục: Tham khảo tài liệu sách củng internet, nhờ vào hướng dẫn, góp ý, đóng góp ý tưởng giảng viên hướng dẫn Nguyễn Thanh Phước mà nhóm hoàn thành tốt tiến độ 6.3 Ưu điểm - Thông tin lưu trữ trực quan, quán Có độ bảo mật tốt json web token Giao diện đại, dễ nhìn, thân thiện với người dùng Ứng dụng đơn giản, dễ sử dụng Áp dụng công nghệ Hệ thống chạy code online, tốc độ phản hồi nhanh 101 an - Khả bảo trì, mở rộng dễ dàng, nhanh chóng 6.4 Hướng phát triển - Cải thiện, phát triển nhiều tính khác Hỗ trợ kết nối API từ bên thứ ba Tối ưu hóa nghiệp vụ Thêm animation cho kiện Responsive cho tất page Thêm nghiệp vụ thu phí theo tháng đưa vào quảng cáo Hỗ trợ nhiều ngôn ngữ Thêm nhiều loại câu hỏi cho phần kiểm tra Thi theo thời gian thực cho tất người 102 an Tài liệu tham khảo Tiếng Việt [1] Technical Stack gì? (2017, May 23) Retrieved https://toidicodedao.com/2017/05/23/giai-thich-technical-stack-la-gi/ from [2] Giới thiệu MERN Stack (n.d.) Retrieved from https://niviki.com/gioi-thieumern-stack/ [3] Le Van Giang (2018, September 15) Redux Retrieved from https://viblo.asia/p/redux-co-ban-m68Z00JdZkG [4] NodeJS – Lưu trữ liệu MySQL với Sequelize (2016, October 13) Retrieved from https://phocode.com/javascript/nodejs/nodejs-luu-tru-du-lieu-voimysql-voi-sequelize/ [5] Nguyen Nhat Anh (2018, November 24) Giới thiệu Ant Design Retrieved from https://viblo.asia/p/gioi-thieu-ant-design-L4x5xwzblBM [6] Nguyễn, N (2016, March 27) Su dung Cloudinary để Quan ly anh cho ung dung cua ban Viblo https://viblo.asia/p/su-dung-cloudinary-de-quan-ly-anh-cho-ungdung-cua-ban-E7bGoxggv5e2 Đường dẫn đến nơi lưu trữ phần mềm: https://github.com/hhtclc4/interviewtools/tree/dev Ghi giai đoạn hoàn thành: https://trello.com/b/NpnOKE7U/ute-interview-tools 103 an 104 an S an K L 0 ... đề tài: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT Nội dung thực đề tài: Tìm hiểu cơng nghệ thuộc MERN Stack (mySQL, ExpressJS, ReactJS, NodeJS) Tìm hiểu công nghệ hỗ trợ cho công nghệ (Redux,... TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT GHVD: THS NGUYỄN THANH PHƯỚC SVTH: Hà Minh Trí 16110545 Nguyễn Xn Hồng 16110077 KHĨA: 2016 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng năm... THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CƠNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ PHỎNG VẤN NGHÀNH IT GHVD: THS NGUYỄN THANH PHƯỚC SVTH: Hà Minh