Đang tải... (xem toàn văn)
Untitled 1 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 NGHÀNH IT 16110545 Nguyễn Xuân Hoàng 16110077 KHÓ[.]
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 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 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 đỡ quý Thầy, cô 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 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ế cịn 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 quý báu quý 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 quý Thầy Cơ Khoa Cơng Nghệ Thơng Tin tồn thể quý 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 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 TOÁ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 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 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 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 104 S K L 0