Xây dựng hệ thống hỗ trợ phỏng vấn ngành IT

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 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 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 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 Danh mục từ viết tắt HR: (Human Resources) nhân viên nhân Interviewer: Nhân viên vấn Candidate: Ứng viên API: Application Programming Interface 10 Danh mục bảng Bảng 3.1 Usecase decription .32 Bảng 3.2 Usecase detail 33 Bảng 3.3 Usecase Do Test Detail 35 Bảng 3.4 Usecase manage quiz 37 Bảng 3.5 Usecase manage account 39 Bảng 3.6 Usecase manage candidates 41 Bảng 3.7 Usecase manage campaigns 43 Bảng 4.1 Bảng user .46 Bảng 4.2 Bảng loại user 46 Bảng 4.3 Bảng chủ đề/chuyên ngành .47 Bảng 4.4 Bảng quiz 47 Bảng 4.5 Bảng quan hệ table question 48 Bảng 4.6 Bảng câu hỏi .48 Bảng 4.7 Bảng câu trả lời 49 Bảng 4.8 Bảng ghi nhận câu trả lời user 49 Bảng 4.9 Bảng level 50 Bảng 4.10 Bảng work_type .50 Bảng 4.11 Bảng campaign 50 Bảng 4.12 Bảng interview .51 Bảng 4.13 Bảng group_candidate 52 Bảng 4.14 Bảng company 52 Bảng 4.15 Bảng quan hệ multichoice_choices 53 Bảng 4.16 Đặc tả giao diện Home 55 Bảng 4.17 Đặc tả giao diện Created 57 Bảng 4.18 Đặc tả giao diện chi tiết quiz 58 Bảng 4.19 Đặc tả giao diện completed 59 Bảng 4.20 Đặc tả giao diện setting 60 Bảng 4.21 Đặc tả giao diện update role 61 Bảng 4.22 Đặc tả giao diện chuẩn bị thi 63 Bảng 4.23 Đặc tả giao diện xem kết thi 64 Bảng 4.24 Đặc tả giao diện bắt đầu thi 65 Bảng 4.25 Đặc tả giao diện thi quiz 66 Bảng 4.26 Đặc tả giao diện pause thi 67 Bảng 4.27 Đặc tả giao diện tạo quiz 68 Bảng 4.28 Đặc tả giao diện chỉnh sửa quiz 69 Bảng 4.29 Đặc tả giao diện tạo câu hỏi câu trả lời 71 Bảng 4.30 Đặc tả giao diện chỉnh sửa thông tin quiz 72 Bảng 4.31 Đặc tả giao diện chỉnh sửa thông tin quiz 73 Bảng 4.32 Đặc tả giao diện quản lý quiz 74 11 Bảng 4.33 Đặc tả giao diện quản lý chi tiết quiz 75 Bảng 4.34 Đặc tả giao diện host quiz 76 Bảng 4.35 Đặc tả giao diện Report 77 Bảng 4.36 Đặc tả giao diện Report 78 Bảng 4.37 Đặc tả giao diện Report 79 Bảng 4.38 Đặc tả giao diện 80 Bảng 4.39 Đặc tả giao diện search 81 Bảng 4.40 Đặc tả giao diện recruit detail 82 Bảng 4.41 Đặc tả giao diện recruit detail 83 Bảng 4.42 Đặc tả giao diện HR manage 84 Bảng 4.43 Đặc tả giao diện HR manage create 85 Bảng 4.44 Đặc tả giao diện HR manage edit 86 Bảng 4.45 Đặc tả giao diện HR manage candidate 87 Bảng 4.46 Đặc tả giao diện HR manage completed interview 88 Bảng 4.47 Đặc tả giao diện HR manage avalable candidates 89 Bảng 4.48 Đặc tả giao diện manage campaign interview interviewer 90 12 Danh mục hình Hình 2.1 Các phận cấu thành stack 18 Hình 2.2 MERN Stack .19 Hình 2.3 MySQL 21 Hình 2.4 NodeJS 22 Hình 2.5 NodeJS Components 23 Hình 2.6 ExpressJS 24 Hình 2.7 ReactJS 24 Hình 2.8 React lifecycle 26 Hình 2.9 Nguyên lý hoạt động Redux 28 Hình 2.10 Cấu trúc Redux 29 Hình 2.11 Sequelize ORM .30 Hình 2.12 Ant Design cho ReactJS 30 Hình 3.1 Usecase Diagram .32 Hình 3.2 Usecase Do Test Detail .35 Hình 3.3 Usecase manage quiz 37 Hình 3.4 Usecase manage account 39 Hình 3.5 Usecase manage candidates 41 Hình 3.6 Usecase manage campaigns 42 Hình 4.1 EER Diagram 45 Hình 4.2 Giao diện Home 55 Hình 4.3 Giao diện Created 57 Hình 4.4 Giao diện chi tiết quiz .58 Hình 4.5 Giao diện completed 59 Hình 4.6 Giao diện setting .60 Hình 4.7 Giao diện update role 61 Hình 4.8 Giao diện chuẩn bị thi .63 Hình 4.9 Giao diện giao diện xem kết thi 64 Hình 4.10 Giao diện bắt đầu thi 65 Hình 4.11 Giao diện thi quiz 66 Hình 4.12 Giao diện thi quiz với kiểu multichoice 66 Hình 4.13 Giao diện pause thi 67 Hình 4.14 Giao diện tạo quiz 68 Hình 4.15 Giao diện chỉnh sửa quiz 69 Hình 4.16 Giao diện tạo câu hỏi câu trả lời .71 Hình 4.17 Giao diện chỉnh sửa thông tin quiz 72 Hình 4.18 Giao diện teleport 73 Hình 4.19 Giao diện quản lý quiz 74 Hình 4.20 Giao diện quản lý chi tiết quiz 75 Hình 4.21 Giao diện host quiz 76 13 Hình 4.22 Giao diện Report .77 Hình 4.23 Giao diện Report .78 Hình 4.24 Giao diện Report .79 Hình 4.25 Giao diện 80 Hình 4.26 Giao diện search 81 Hình 4.27 Giao diện recruit detail 82 Hình 4.28 Giao diện recruit detail 83 Hình 4.29 Giao diện HR manage 84 Hình 4.30 Giao diện HR manage create 85 Hình 4.31 Giao diện HR manage edit 86 Hình 4.32 Giao diện HR manage candidate .87 Hình 4.33 Giao diện HR manage completed interview 88 Hình 4.34 Giao diện HR manage avalable candidates 89 Hình 4.35 Giao diện manage campaign interview interviewer 90 14 CHƯƠNG TỔNG QUAN 1.1 Khảo sát trạng - - - - - 1.2 Sự phát triển công nghệ thông tin làm thay đổi toàn giới Mọi ngành nghề, lĩnh vực kinh tế, y khoa, cơng nghiệp… tin học hóa làm cho công việc trở nên dễ dàng, nhanh chóng, xác Đặc biệt cơng tác giáo dục công tác thi cử tuyển nhân sự, việc tin học hóa góp phần nâng cao chất lượng dạy học kiểm tra Cho nên, hình thức thi trắc nghiệm hay trắc nghiệm kết hợp với tin học trở thành hình thức thi phổ biến giới Với ưu điểm khách quan, xác thuận tiện cho người đề thí sinh thi, hình thức thi áp dụng hầu khắp nước, đặc biệt kỳ thi tổ chức lớn có phạm vi tồn cầu ETS (Educational Testing Service) – tổ chức kỳ thi TOEFL, GMAT, GRE…, Microsoft – tổ chức kỳ thi MCSE, MCAD… Tại Việt Nam, năm gần đây, song song với việc đổi phương pháp dạy học, việc đổi hình thức thi cử trở thành việc làm cấp thiết Trong hình thức thi cử, trắc nghiệm khách quan hình thức nhiều người ý ưu điểm việc kiểm tra, đánh giá trình độ người dự thi như: khách quan, trung thực, kiểm tra nhiều kiến thức, tránh việc học tủ, học vẹt…Do đó, trắc nghiệm khuynh hướng hầu hết kỳ thi Việt Nam Chính việc áp dụng tính vào cơng tác tuyển nhân viên cho công ty để xác định trình độ chun mơn đà phát triển Tính cấp thiết đề tài - Việc vấn theo kiểu trực tiếp face to face chưa tối ưu mặt thời gian công sức o Người vấn gặp số lượng ứng viên định đợt vấn để hiểu rõ lực ứng viên o Bên cạnh người vấn phải kiểm tra người số họ để chọn lọc ứng cử viên sáng giá, làm tốn nhiều thời gian cho người vấn kinh phí cơng ty cho việc vấn - Vấn đề đặt ra: Vậy có nên đưa tất ứng viên vào kiểm tra cụ thể người vấn đặt ra, sau chọn lọc ứng viên sáng giá cách nhanh chóng? Từ sẻ giảm số lượng ứng viên cần phải vấn trực tiếp? - Giải vấn đề trên, việc thi giấy truyền thống cách, tiêu tốn nhiều chi phí cho việc setup tài liệu, đánh máy, khó chọn lọc câu hỏi theo loại câu hỏi từ kiểm tra trước, in ra,… 15 - - Chính việc cần phần mềm vừa giúp nhân viên nhân đăng tuyển dụng quản lý ứng viên nộp đơn ứng tuyển, vừa giúp cho người vấn dễ dàng việc tạo quiz, hosting quiz đưa cho ứng viên thực hiện, bên cạnh cịn import câu hỏi cần thiết từ file excel, chọn lọc câu hỏi cho quiz cách lấy lại câu hỏi quiz cũ theo keyword Cần có thứ mẻ giúp cho ứng viên ứng tuyển cảm giác có đặc biệt cơng ty, từ có nhiều ứng viên ứng tuyển 1.3 Mục tiêu nhiệm vụ đề tài 1.3.1 Mục tiêu o o o o o o o o o o o Xây dựng tính hỗ trợ nhân viên nhân cho việc vấn tuyển nhân viên cho công ty: Đăng tin tuyển dụng Sắp xếp ứng viên theo đợt vấn Đưa người vấn vào đợt vấn quiz cho ứng viên để kiểm tra kiến thức Xem xét thi sau ứng viên thi xong đưa kết vấn Xây dựng trang web trắc nghiệm trực tuyến, hỗ trợ cho việc kiểm tra trình độ, rèn luyện, ơn tập kiến thức cách với chức sau Quản lý thơng tin quiz: Cho phép thêm, xóa, sửa quiz, import file, lấy lại câu hỏi quiz trước,… Quản lý kết ứng viên tham gia vào quiz thông tin chi tiết quiz Quản lý câu hỏi: Cho phép thêm câu hỏi, xóa, chỉnh sửa câu hỏi, Quản lý nhóm câu hỏi: chia làm nhóm: dễ, bình thường khó Thực cho thành viên làm Lưu lại trình làm trường hợp máy tính gặp cố ngắt mạng Cũng kiểm tra lại lần kiểm tra trước gặp cố 1.3.2 Nhiệm vụ - Tìm hiểu, tham khảo chức giao diện hệ thống tương tự Tìm hiểu API để gửi trả liệu từ BackEnd vào FrontEnd ngược lại Tìm hiểu thêm cơng nghệ hỗ trợ khác để chỉnh sửa xây dựng tính Xây dựng trang web thân thiện, có liên kết account với Gmail Xây dựng thêm tính kiểm tra cho ứng viên thi qui định thời gian số lượt làm tập lấy lại cookie thi lỡ ứng viên khỏi thi cố 16 Progressbar Tổng điểm đợt vấn Progressbar Điểm ứng viên, chọn lọc đậu rớt Hình 4.34 Giao diện HR manage avalable candidates Bảng 4.51 Đặc tả giao diện HR manage avalable candidates Tên Kiểu Mô tả/Ghi label Thông tin ứng viên 89 Label Thời gian đợt Button Thêm ứng viên vào đợt vấn 4.2.25 Assign interview Hình 4.35 Giao diện manage campaign interview interviewer Bảng 4.52 Đặc tả giao diện manage campaign interview interviewer Tên Kiểu Mô tả/Ghi Label Thông tin tuyển dụng tin 90 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 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 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 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 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 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 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 Hình 4.45 Thiết kế thư mục routers 98 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 hồ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 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 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 hồ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 - 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 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 ... tham khảo chức giao diện hệ thống tương tự Tìm hiểu API để gửi trả liệu từ BackEnd vào FrontEnd ngược lại Tìm hiểu thêm cơng nghệ hỗ trợ khác để chỉnh sửa xây dựng tính Xây dựng trang web thân thiện,... o o o o o o o o o o Xây dựng tính hỗ trợ nhân viên nhân cho việc vấn tuyển nhân viên cho công ty: Đăng tin tuyển dụng Sắp xếp ứng viên theo đợt vấn Đưa người vấn vào đợt vấn quiz cho ứng viên... interviewer Preconditions Người dùng đăng ký đăng nhập thành công vào hệ thống Postconditions Main flow Người dùng đăng nhập vào hệ thống 37 Người dùng khởi tạo quiz với tên mơn học Sau hệ thống chuyển