Đồ án buiding an attendance checking system applied face recognition

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION THESIS BUILDING AN ATTENDANCE CHECKING SYSTEM APPLIED FACE RECOGNITION NGUYEN PHAM QUOC THANG Student ID: 19110516 THACH DUONG DUY Student ID: 19110179 Course: 2019 Major: INFORMATION TECHNOLOGY Advisor: NGUYEN DUC KHOAN M.Sc Ho Chi Minh City, June 2023 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, June …, 2023 PROJECT ASSIGNMENT Student name: NGUYEN PHAM QUOC THANG Student ID: 19110516 Student name: THACH DUONG DUY Student ID: 19110179 Major: Information Technology Class: 19110CLST Advisor: Nguyen Duc Khoan M.Sc Date of assignment: 02-20-2023 Date of submission: 05-29-2023 Project title: Building an attendance checking system applied face recognition Initial materials provided by the advisor: Implementation using Express Framework, React, Chakra UI, faceapi.js, MySQL Content of the project: The system utilizes modern technologies such as Express, React, and the faceapi.js library to create an intuitive and user-friendly interface that allows users to have their own facial recognition attendance system to record and manage their attendance and have a simple Human Resource Management for the Manager or Admin can manage a data attendance from the Employee Final product: The system allows the employee can record their attendance by using facial recognition They also can see their attendances detail, have a leave request, have a work shift on the Human Resource Management website HEAD OF DEPARTMENT (Sign with full name) ADVISOR (Sign with full name) ii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, June …, 2023 ADVISOR’S EVALUATION SHEET Student name: NGUYEN PHAM QUOC THANG Student ID: 19110516 Student name: THACH DUONG DUY Student ID: 19110179 Major: Information Technology Class: 19110CLST Project title: Building an attendance checking system applied face recognition Advisor: Nguyen Duc Khoan M.Sc EVALUATION Content of the project: Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) Mark:……….(in words .) Ho Chi Minh City, June …, 2023 ADVISOR (Sign with full name) iii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, June …, 2023 PRE-DEFENSE EVALUATION SHEET Student name: NGUYEN PHAM QUOC THANG Student ID: 19110516 Student name: THACH DUONG DUY Student ID: 19110179 Major: Information Technology Class: 19110CLST Project title: Building an attendance checking system applied face recognition Name of Reviewer: EVALUATION Content and workload of the project Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) Mark:……….(in words ) Ho Chi Minh City, June …, 2023 REVIEWER (Sign with full name) iv ACKNOWLEDGEMENT First and foremost, the implementation team would like to express their heartfelt gratitude to the High-Quality Training Department of Ho Chi Minh City University of Technical Education for providing them with the best possible conditions to succeed The association has granted the team free access to resources, allowing them to broaden their knowledge in the field of Information Technology as a whole and specifically for their Graduation Thesis The team would also like to sincerely thank Mr NGUYEN DUC KHOAN, who has wholeheartedly devoted his enthusiasm and expertise as a teacher to guide, instruct, and create a supportive environment for the group Mr KHOAN's passion has been a great motivator for the team, inspiring them to persevere through the process of implementing their topic and discover new, interesting, and useful knowledge related to the subject Once again, the team would like to express their deepest gratitude to the department and Mr NGUYEN DUC KHOAN for their invaluable support Student group perform, Best regards v FOREWORD Today the technology is developing fast With the help of Machine Learning and Artificial Intelligent, the way people work in the world is in the process of being renewed Everything will be more convenient day by day and Machine Learning and Artificial Intelligent will replace manual work of humans The immediate example is the replacement of manual attendance with a biometric attendance process with the help of Machine Learning and Artificial Intelligent To put it more clearly, this is the process of attendance with integrated face recognition With the attendance system by face recognition, the attendance process will be much faster than manual attendance It helps employees to start their work faster than ever Therefore, building a attendance system that integrates facial recognition is more necessary than ever vi TABLE OF CONTENTS PROJECT ASSIGNMENT ii ADVISOR’S EVALUATION SHEET iii PRE-DEFENSE EVALUATION SHEET iv ACKNOWLEDGEMENT v FOREWORD vi TABLE OF CONTENTS vii ABSTRACT xiii LIST OF TABLES xiv LIST OF FIGURES xvii Chapter INTRODUCTION 1.1 The urgency of the project 1.2 Introduction 1.3 Objective 1.4 Technology 1.5 Scope Chapter SYSTEM SPECIFICATION 2.1 Application Review 2.1.1 Researching 2.1.3 What is the problem? 2.1.2 What is solution: 2.2 Technologies 2.2.1 Front-end: ReactJS with Charka UI component library 2.2.2 Back-end: NodeJS with Express – Typescript 2.2.3 Database: MySQL 2.2.4 Facial Recognition: faceapi.js Chapter REQUIREMENT SPECIFICATION 3.1 Description 3.1.2 Human resource management description vii 3.2 Functional Requirement 3.1.1 Face attendance system description 3.2.1 User requirements 3.2.1.1 Face attendance system 3.2.1.2 Human resource management system 3.2.2 System Requirement (Use Case) 10 3.2.2.1 Actors 10 3.2.2.2 Use case 10 3.2.2.3 Use case diagram 13 3.2.2.4 Use case description 14 3.2.2.4.1 Use case login 14 3.2.2.4.2 Use case take attendance by using facial recognition 15 3.2.2.4.3 Use case collect face data 17 3.2.2.4.4 Use case report attendance failure 19 3.2.2.4.5 Use case view organization detail 20 3.2.2.4.6 Use case view work shift 21 3.2.2.4.7 Use case view work shift detail 23 3.2.2.4.8 Use case create a personal leave request 24 3.2.2.4.9 Use case view the list of personal leave requests 26 3.2.2.4.10 Use case view annual leave days 28 3.2.2.4.11 Use case view a leave request detail 29 3.2.2.4.12 Use case view attendance history 30 3.2.2.4.13 Use case view a single attendance history detail 32 3.2.2.4.14 Use case view this month attendance 34 3.2.2.4.15 Use case view today attendance 35 3.2.2.4.16 Use case view profile information 37 3.2.2.4.17 Use case update profile information 38 3.2.2.4.18 Use case view list employee 40 3.2.2.4.19 Use case view face data photos 41 viii 3.2.2.4.20 Use case request employee to re-train 42 3.2.2.4.21 Use case modify work shift 43 3.2.2.4.22 Use case verify leave request 45 3.2.2.4.23 Use case report in-valid an attendance history .46 3.2.2.4.24 Use case view attendance exception 48 3.2.2.4.25 Use case view attendance exception detail 49 3.2.2.4.26 Use case verify attendance exception 51 3.2.2.4.27 Use case update organization detail 52 3.2.2.4.28 Use case create shift type 53 3.2.2.4.29 Use case delete shift type 55 3.2.2.4.30 Use case create leave type 57 3.2.2.4.31 Use case delete leave type 58 3.2.2.4.32 Use case view list department 60 3.2.2.4.33 Use case assign manager to department 61 3.2.2.4.34 Use case create employee 62 Chapter SYSTEM DESIGN 64 4.1 System Architecture 64 4.2 Entity Relation Diagram 65 4.3 Database Diagram 66 4.4 Sequence Diagram 68 4.4.1 Take attendance by using facial recognition 68 4.4.2 Report attendance failure 70 4.4.3 Collect face data 71 4.4.4 View face data photos 71 4.4.5 Request employee to re-train 72 4.4.6 Verify leave request 72 4.6 Activity Diagram 73 4.6.1 Take attendance by using facial recognition 73 4.6.2 Report attendance failure 74 ix 4.7 User Interfaces Design 75 4.7.1 Screens description 75 4.7.2 Screens design 76 4.7.2.1 Login screen 76 4.7.2.2 Dashboard screen 77 4.7.2.3 Organization details screen 78 4.7.2.3.1 Main screen 78 4.7.2.3.2 Modify shift type modal 80 4.7.2.3.3 Modify leave type modal 82 4.7.2.4 Department management screen 85 4.7.2.4.1 Add - Edit drawer 86 4.7.2.5 Assigning department management screen 87 4.7.2.5.1 Main screen 87 4.7.2.5.2 Add - Edit Drawer 88 4.7.2.6 Employee management screen 89 4.7.2.6.1 Main screen 89 4.7.2.6.2 Add - Edit drawer 91 4.7.2.6.4 View employee photo big picture 93 4.7.2.6.5 Request to retrain alert 93 4.7.2.7 Work shift screen 94 4.7.2.8 Leave request personal screen 97 4.7.2.8.1 Main screen 97 4.7.2.8.2 Add – Edit drawer 98 4.7.2.9 Leave request management screen 99 4.7.2.9.1 Main screen 99 4.7.2.9.2 Add – Edit drawer 101 4.7.2.10 Attendance screen 103 4.7.2.10.1 Main screen 103 4.7.2.10.2 Attendance history card detail 107 x