75 Figure 4.14 Submit leave request Collaboration Diagram .... 77 Figure 4.19 Change leave request status Collaboration Diagram .... 33 Table 3.4 Submit leave request use case descriptio
INTRODUCTION
The urgency of the project
Many companies have used simple and separate systems for years to handle their human resource work and employee information But as companies got bigger in recent years, these messy methods became a problem It's hard to find all the details about one employee when files are all over the place Bosses struggle to do normal HR jobs like hiring people, paying employees, and planning training sessions quickly Time and money get wasted on paperwork that machines could do instead
Recognizing the urgency of this need, our team is strategically focusing on developing an integrated HR management system to address the challenges many organizations face A joined-up digital system will help streamline processes, ensure secure and accurate data, and provide leaders with clear insights through reporting and analytics Managers can spend more time on strategy instead of documents Staff will find it easier to track their records and careers The new system will also help comply with regulations by automating tasks like managing benefits and reviews Overall, an
HR solution is crucial for supporting growing teams and enabling continued business success
The main purpose of this project is to develop an HR management application that allows companies to efficiently manage employee attendance, time tracking, and leave requests using biometric check-in/out and automated timesheets By streamlining these core HR processes, the system aims to support growing workforces with an easy-to-use centralized solution.
Problem definition
From the current situation, we can define some major problems that we need to solve:
➢ Employee attendance management through an intelligent system
➢ Manage employees' work schedules, the jobs/tasks employees have done to facilitate timesheet processing and performance evaluation
➢ Manage employees' leave schedules in the most visual/intuitive way, employees can request leaves online
➢ All features must be centralized in one easy-to-use application
Proposed solution
The goal of this project is to develop a centralized mobile and web-based HRM system to streamline and automate key HR processes
The system will have the following core modules:
➢ Employee Database - A centralized repository to store all employee data like records, qualifications, attendance, etc This avoids manual files
➢ Attendance Management - Includes biometric/facial recognition check-in/out and automated attendance marking
➢ Leave Management - Enables employees to apply for different leave types online Managers can view, accept, or reject applications from a single dashboard
➢ Timesheet Tracking - Allows employees to log work hours and jobs done Managers can review and approve timesheets digitally
The integrated digital HRM system aims to address current inefficiencies, bring all
HR data onto one platform, and drive better decision-making through analytics.
Objective
Build a centralized employee management system that makes analysis, evaluation, and management of employees easier This facilitates timesheet processing and developing future development directions for employees
The main objects to achieve the purpose:
- Auto creates employees' work calendars based on settings
- Employees can only check-in/out within a valid time range
- Check-in/out is based on face recognition for security purposes
- Employees can manage their leave budget and leave requests
- Employees can sign timesheets so managers can easily know what they did
Technology
Front-end mobile app: Flutter
Front-end web app: Angular
Requirements
- Face recognition needs to be fast and accurate
- Employees can submit reports if there are issues with the recognition system
- Automatically create leave budgets for employees and update them whenever there are changes Allow employees to request leaves or have leaves assigned by managers
- Automatically generate work schedules for employees and allow employees to fill timesheets for each working day
- The system has an intuitive interface, is easy to use, and displays information completely and accurately.
TECHNOLOGIES AND APPLICATION REFERENCE
Application reference
To have an overview of the current process, our team will evaluate the website based on a table of criteria and lessons learned from the website, thereby serving the topic
Website URL: https://duyhoang-trials713.orangehrmlive.com/
The main reason that we chose OrangeHRM to review: OrangeHRM is a pioneering enterprise in human resource management software with over 5 million users across 100 countries and 25 global partners
To serve the project’s topic, we have summarized some important lessons that we learned while using this website and mobile app:
User Interface Clear, easy to understand and use
User Experience User-friendliness and versatility
User Service Manage employee data, recruitment, performance management, training, and other HR functions
- User interface for mobile and web
Website URL: https://hoang.bamboohr.com/home
The main reason that we chose BambooHR to review: BambooHR is a comprehensive HR platform that consolidates all employee, payroll, time, and benefits data into a single, centralized location, providing users with the data accuracy, security, and coordination they need for peace of mind
To serve the project’s topic, we have summarized some important lessons that we learned while using this website and mobile app:
User Interface Clean and intuitive in most areas
User Experience User-friendliness and every action seamlessly align with user expectations
User Service Track hours worked, manage benefits enrollment, and run payroll all from a single platform
Website URL: https://app.factorialhr.com/dashboard
The main reason that we chose Factorial to review: Factorial is an HR software company dedicated to helping businesses of all sizes realize their full potential by automating their HR processes
To serve the project’s topic, we have summarized some important lessons that we learned while using this website and mobile app:
User Interface Simple user interface, catching layout
User Experience It is very intuitive to use for employees and is adjustable to a certain level for admins
Time control, clocking in, holiday and absence management, payroll incidents, search process, recruitment and induction of personnel, cost control, and internal communication, among others
Figure 2.7 Face recognition fails (Factorial)
Figure 2.8 Time off request (Factorial)
The conclusion is based on the content of the website that supports the need of the project’s requirements
Technologies
- The Angular is open-source and helps us build dynamic and single-page applications (SPAs)
- Angular is a development Platform and framework for building single-page client applications using HTML and TypeScript
- As a framework, Angular has clear advantages while also providing a standard structure for developers to work with It enables users to create large applications in a maintainable manner
- Custom Components: Angular allows users to build their components and can encapsulate functionality and rendering logic into reusable parts It also works well with web components
- Data Binding: Angular allows users to easily move data from JavaScript code to views and respond to user events without having to write any code manually
- Dependency Injection: Angular allows users to write modular services and put them wherever they need to This improves the testability and reusability of the same services.
- Testing: Easily Unit test every part of your application
- Browser Compatibility: Angular provides cross-platform and cross-browser compatibility An Angular app can typically run on all browsers (For example: Chrome, and Firefox) and operating systems, such as Windows, macOS, and Linux
- Express.js, built on top of Node.js, is a minimal and flexible web application framework designed to make the development of web applications and APIs in Node.js easier
- Express.JS allows for a rapid and adaptable development cycle, making Express.js an ideal choice for building scalable and dynamic web applications with JavaScript on the server side
- Middleware Support: Easily implement middleware functions for tasks like authentication, logging, and error handling
- Routing: Simplify the creation of routes, enhancing code organization and readability
- Error Handling: Streamline error handling through middleware for consistent management across the application
- Scalability: Designed for scalability, suitable for both small projects and large- scale applications, thanks to its lightweight and modular architecture
Flutter is an open-source mobile application development framework created by Google It allows developers to write high-performance, native mobile applications for iOS and Android from a single codebase
- Cross-Platform Capability: Developers can write the core application logic once in Dart and deploy it to both major mobile platforms without rewriting code or maintaining separate codebases
- Open Source: Since Flutter is fully open source, developers can access its source code, contribute to its community, and customize it for special requirements
- Rich Tooling: Flutter provides rich IDE plugins, code editors, and other tools to improve the developer experience for both mobile platforms
TensorFlow.js is a JavaScript library for training and deploying machine learning models in the browser and on Node.js It brings the power of TensorFlow to the web, allowing developers to use machine learning directly within the browser
By leveraging TensorFlow and TensorFlow.js, our team can integrate face- api.js to implement facial recognition for employee check-in/check-out
- Client-side computation: Train and deploy models directly in the browser, leveraging the user's hardware
- Easy integration: Use with existing web technologies like React, Angular, or plain JavaScript
- Pre-trained models: Access a variety of pre-trained models for common tasks like image classification, object detection, and more
- Custom model building: Create and train models using the high-level Layers
API or the lower-level Core API
REQUIREMENT SPECIFICATION
Functional Requirements
The system has the following main features:
• Employee management based on user roles
• Employees can assign leave requests for another employee or request leave to the manager
• Working days management and filling timesheets for each working day
The HRM system has the common structure below:
Admin: is the person responsible for managing all employees, leaves, attendances, and work calendars
Employee: Employees can manage their subordinates, view their own work schedules, and days off, request time off, and submit timesheets
System Functions Main use cases Use case #
Submit leave request UC_03 Edit leave request UC_04
Approve/Reject attendance report UC_10
Training face model UC_11 View notifications UC_12 View report schedule UC_13 View work calendar UC_14 Edit working hours/type UC_15
Figure 3.1 Unauthorized user's use case diagram
Figure 3.2 Amin and the employee use a case diagram
Use Case No UC_01 Use Case Version 1.0
- This case allows unauthorized users to access the system
- Unauthorized users can log in successfully and access the system
- At the login page, when the unauthorized user enters the email, password and then clicks on the login button
- Unauthorized user needs to be able to access the login page of the system and provide their correct email and password
• Success: o Unauthorized users will be redirected to the home page of the system depending on the permissions
• Fail: o The system will notify unauthorized users that the login failed
Step Actor Action System Response
1 The unauthorized user enters the login page
The system will redirect to the login page
2 The unauthorized user enters their email and password and clicks on the "Login" button in the login form
The system checks the email and password, notifying the user that the login is successful
The system will redirect to the system's home page
1 The unauthorized user entered an invalid email or password
The system will notify the unauthorized user login failed
Table 3.2 Login use case description
Figure 3.4 Forgot password use case
Use Case No UC_02 Use Case Version 1.0
Use Case Name Forgot password
- This case allows users to reset the password of an existing account by sending an email
- Unauthorized users can reset the password of an existing account with email
- At the login page, when the unauthorized user clicks on forgot password link and then enters the email, and then clicks on the register button
- Unauthorized users need to be able to access the login page of the system and provide their email
• Success: o Unauthorized users will receive a success notification and the account’s password with the related email will be changed
• Fail: o The account’s password won’t be reset o The system will notify that some error has occurred or the link has been outdated
Step Actor Action System Response
1 The unauthorized user enters the login page
The system will redirect to the login page
2 Unauthorized users click on the forgot password link
The system will redirect to the forgot password page
3 The unauthorized user enters the email and then clicks on the “Send request” button
The reset password email will be sent to the corresponding email
4 An unauthorized user opens the email and then enters a new password, and then clicks on the
The system checks the new password, notifying the user that the password change is successful
1 The unauthorized user entered an invalid email
The system will notify the unauthorized user that the email is invalid
Table 3.3 Forgot password use case description
Figure 3.5 Submit leave request use case
Use Case No UC_03 Use Case Version 1.0
Use Case Name Submit leave request
- This case allows users to submit leave requests
- Employees can submit leave requests
- On the leave request screen, the user clicks on the “Add” icon button
- The user needs to log in to the system
• Success: o A new leave request will be submitted
• Fail: o The system will notify that an error occurred
Step Actor Action System Response
1 The user enters the home page The system will redirect to the home page
2 The user clicks on the “Leave” button
The system will redirect to the leave requests list page
3 The user fills in the required fields and clicks on the “Submit leave” button
The system will save leave requests
The system shows a successful message
1 The system encountered a problem when performing saving
The system will notify the user that an error occurred
Table 3.4 Submit leave request use case description
Figure 3.6 Edit leave request use case
Use Case No UC_04 Use Case Version 1.0
Use Case Name Edit leave request
- This case allows employees and admin to edit leave request information
- The leave request information will be updated
- At the add/edit leave request page, change information then click on the save button
- The user needs to log in to the system
- The user has a leave request
• Success: o Leave request information will be updated o The system notifies that the leave request has been successfully updated in the system
• Fail: o Leave request is not updated in the system o The system will notify the leave request that an error occurred
Step Actor Action System Response
1 The user opens the leave request in the Leave Request page
The system will redirect to the add/edit leave request page
2 The user changes the information of the leave request and then clicks on the “Save change” button
The leave request information will be updated
The system shows an updated successful message
1 Invalid leave request entered information
The system shows an error message and requires the user to change information
Table 3.5 Edit leave request use case description
Figure 3.7 Edit profile use case
Use Case No UC_05 Use Case Version 1.0
Use Case Name Edit profile
- This case allows employees and admin to edit profile information
- The user profile information will be updated
- At the profile page, change information then click on the save button
- The user needs to log in to the system
• Success: o User information will be updated
38 o The system notifies that the user account has been successfully updated into the system
• Fail: o User information is not updated in the system o The system will notify the user that an error occurred
Step Actor Action System Response
1 The user opens the profile The system will redirect to the profile page
2 The user changes information and then clicks on the “Save change” button
The user information will be updated
The system shows an updated successful message
1 Invalid entered user information The system shows an error message and requires the user to change information
Table 3.6 Edit profile use case description
Figure 3.8 Edit employee profile use case
Use Case No UC_06 Use Case Version 1.0
Use Case Name Edit employee
- This case allows the employee and admin to edit other employees’ profile information
- The user profile information will be updated
- At the home page, click on view all employees, choose the employee then change the information and click on the save button
- The user needs to log in to the system
• Success: o User information will be updated o The system notifies that the user account has been successfully updated into the system
• Fail: o User information is not updated in the system o The system will notify the user that an error occurred
Step Actor Action System Response
1 The user opens the profile list The system will redirect to the employee list page
2 The user selects an employee The system will redirect to the profile page
3 The user changes information and then clicks on the “Save change” button
The user information will be updated
The system shows an updated successful message
1 Invalid user entered information The system shows an error message and requires the user to change information
Table 3.7 Edit employee profile use case description
Figure 3.9 Log work use case
Use Case No UC_07 Use Case Version 1.0
Use Case Name Log work
- This case allows the user to log work
- The user can log their activities for each day
- On the work calendar screen, click on the working day, then click on the “Add” icon button and log work
- The user needs to log in to the system
• Success: o Log work for the user o A work log will be created
• Fail: o The system will notify the user that an error occurred o Work log can’t be saved
Step Actor Action System Response
1 The user opens the work calendar screen
The system will redirect to the work calendar screen
2 The user clicks on one working day
The system will open the list work log
3 The user clicks on the add icon button
The system will open the work log form
4 The user fills in the information and clicks on the “Save” button
The work log will be saved
The system shows a saved successful message
1 Invalid entered information The system shows an error message and requires the user to change information
Table 3.8 Log work use case description
Figure 3.10 Punch-in/out use case
Use Case No UC_08 Use Case Version 1.0
Use Case Name Punch-in/out
- This case allows the user to punch in or punch out
- Users can punch in/out
- On the web page, use face recognition to punch in/out
• Success: o Punch in/out record will be saved o The system shows a successful message on the web page and mobile
• Fail: o The system will notify the user that an error occurred o Job application can’t be canceled
Step Actor Action System Response
1 The user opens the web page and shows their face
The system will check the face
2 The user submits a punch-in/out record
The system saves punch-in/out records
The system shows successful messages on the web page and mobile app
1 The system can’t recognize the user's face
The system will ask the user to send an attendance report
Table 3.9 Punch in/out use case description
Figure 3.11 Report attendance use case
Use Case No UC_09 Use Case Version 1.0
Use Case Name Report attendance
- This case allows the user to send a report when the system fails to recognize their face
- Users can access an attendance report
- On the web page, use face recognition to punch in/out and click the “Cancel” button three times
- The system fails to recognize the user's face
• Success: o Attendance report will be saved
45 o The system shows a successful message on the web page
• Fail: o The system will notify the user that an error occurred o Attendance report can’t be saved
Step Actor Action System Response
1 The user opens the web page and shows their face
The system will check the face
2 The user clicks the “Cancel” button three times
The system will open an alert dialog
3 The user clicks the “Send report” button
The system will open the attendance report form
4 The user fills in the information and clicks on the “Submit” button
The attendance report will be saved
The system shows a saved successful message
1 Invalid entered information The system shows an error message and requires the user to change information
Table 3.10 Report attendance uses case description
Figure 3.12 Approve/Reject attendance report use case
Use Case No UC_10 Use Case Version 1.0
Use Case Name Approve/Reject attendance report
- This case allows the manager to approve or reject an attendance report
- The attendance report status will be updated
- At the attendance report management page, the user clicks on the “Approve” or “Reject” attendance report button
- The user needs to log in to the system
• Success: o Attendance report status will be updated
47 o The system notifies that the attendance report status has been changed to the user
• Fail: o The system will notify the user that an error occurred o Attendance report status can’t be changed
Step Actor Action System Response
1 The user opens the attendance report management page
The system will redirect to the attendance report management page
2 the user clicks on the “Approve” or “Reject” attendance report button
The attendance report status will be updated
The system shows an updated successful message
Table 3.11 Approve/Reject attendance report use case description
Figure 3.13 Train face recognition model use case
Use Case No UC_11 Use Case Version 1.0
Use Case Name Train face recognition model
- This case allows the user to add facial recognition to an account
- The facial recognition will be added to an account
- At the employee management page, the user clicks on the “Training” icon button
- The user needs to log in to the system
• Success: o Facial recognition will be added to an account
• Fail: o The system will notify the user that an error occurred o Facial recognition can’t be added to an account
Step Actor Action System Response
1 The user opens the employee management page
The system will redirect to the employee management page
2 the user clicks on the “Training” icon button
The system will open the face- scanning dialog
3 The user clicks on the “Start step
1” button and follows the instructions
The system starts to capture 10 pictures
4 The user clicks on the “Start step
2” button and follows the instructions
The system starts to capture 10 pictures
5 The user clicks on the “Start step
3” button and follows the instructions
The system starts to capture 10 pictures
6 The user clicks on the “Start step
4” button and follows the instructions
The system begins the training model
The system shows a successful message after finishing
1 The training model failed The system shows an error message
2 The user is not allowed to open the camera or does not have a camera
The system can’t open the camera and shows an error message
Table 3.12 Approve/Reject attendance report use case description
Figure 3.14 View notification use case
Use Case No UC_12 Use Case Version 1.0
Use Case Name View notification
- This case allows the user to see notifications and redirect to notification corresponding pages
- The user can see the notification and click on it to redirect to the corresponding pages
- At the home page, click on the bell icon, then click on one notification
• Success: o Notification will change the total unread number
51 o The system shows an error message o Notification won’t redirect the user to the corresponding page
Step Actor Action System Response
1 The user opens the home page The system will redirect to the home page
2 The user clicks on the bell icon The system shows all notifications
Table 3.13 View notification use case description
Figure 3.15 View report schedule use case
Use Case No UC_13 Use Case Version 1.0
Use Case Name View report schedule
- This case allows employees and admin to view report schedule information
- Report schedule is a summary of attendance and leave request information like duration, number of hours leave
- On this page, the user can view report attendance, report leave requests, or both of them
- Users can see an overview of information about attendance and leave requests
- Attendance and leave requests can be quickly edited
- At the report schedule page, click on the cell with data on attendance or leave requests, then change information and click on the save button
- The user needs to log in to the system
• Success: o Attendance or Leave request information will be updated o The system notifies that the attendance or leave request has been successfully updated into the system
• Fail: o Attendance or Leave request is not updated in the system o The system will notify the attendance or leave request that an error occurred
Step Actor Action System Response
1 The user opens the Report
The system will redirect to the report schedule page
2 The user changes information about attendance or leave requests and then clicks on the
The attendance or leave request information will be updated
The system shows an updated successful message
1 Invalid attendance or leave request entered information
The system shows an error message and requires the user to change information
Table 3.14 View report schedule use case description
Figure 3.16 View work calendar use case
Use Case No UC_13 Use Case Version 1.0
Use Case Name View work calendar
- This case allows employees and admin to view the work calendar and log work information
- On this page, the user can view the work calendar and log work information
- Users can see an overview of information about the work calendar and log work
- Users can quickly edit the working hours or working type of the work calendar
- Users can quickly add or edit log work
- At the work calendar page, change the working type or working hours in the dropdown
- Click on the add new icon to write log work
- Choose log work want to edit information, then change information then click on the save button
- The user needs to log in to the system
• Success: o The working type or Working hours of the work calendar will be updated o Log work will be created or updated o The system notifies that the work calendar or log work has been successfully created or updated in the system
• Fail: o Work calendar or Log work is not created or updated in the system o The system will notify the Work calendar or Log work that an error occurred
Step Actor Action System Response
1 The user opens the Work
The system will redirect to the work calendar page
2 The user changes information on the work calendar or log work and then clicks on the “Save change” button
The work calendar or log work information will be updated
The system shows an updated successful message
1 Invalid work calendar or log work entered information
The system shows an error message and requires the user to change information
Table 3.15 View work calendar use case description
Figure 3.17 Edit working hours/type use case
Use Case No UC_15 Use Case Version 1.0
Use Case Name Edit working hours/type
- This case allows employees and administrators to edit working hours and types of work on the calendar
- The working hours or type will be updated
- At the work calendar page, select the working type in the dropdown of the cell
- The user needs to log in to the system
• Success: o Working hours or type will be updated o The system notifies that the work calendar has been successfully updated into the system
• Fail: o The working type is not updated in the system o The system will notify the work calendar that an error occurred
Step Actor Action System Response
1 The user opens the work calendar page
The system will redirect to the work calendar page
2 The user chooses the working hours/type and wants to change in the dropdown of a cell
The working type will be updated The system shows an updated successful message
Table 3.16 Edit working type use case description
Figure 3.18 Edit settings use case
Use Case No UC_16 Use Case Version 1.0
Use Case Name Edit settings
- This case allows the admin to add/edit settings information
- The setting information will be updated
- At the add/edit settings page, change information then click on the save button
- The user needs to log in to the system
- The user is an admin
• Success: o Setting information will be updated o The system notifies that the setting has been successfully updated into the system
• Fail: o The setting is not updated in the system o The system will notify the setting that an error occurred
Step Actor Action System Response
1 The user opens the setting on the
The system will redirect to the add/edit settings page
2 The user changes the information of settings and then clicks on the
The setting information will be updated
The system shows an updated successful message
The system shows an error message and requires the user to change information
Table 3.17 Edit settings use case description
Figure 3.19 Edit roles use case
Use Case No UC_16 Use Case Version 1.0
Use Case Name Edit roles
- This case allows the admin to edit role information
- The role information will be updated
- At the add/edit role page, change information then click on the save button
- The user needs to log in to the system
- The user is an admin
• Success: o Role information will be updated
60 o The system notifies that the role has been successfully updated into the system
• Fail: o Role is not updated in the system o The system will notify the role that an error occurred
Step Actor Action System Response
1 The user opens the role in the
The system will redirect to the add/edit role page
2 The user changes the information of the role and then clicks on the
The role information will be updated
The system shows an updated successful message
1 Invalid role entered information The system shows an error message and requires the user to change information
Table 3.18 Edit settings use case description
Non-functional requirements
The response time of an application request must be minimized The amount of additional memory and hard drive that the application uses needs to be optimized to ensure the performance of the application
The system needs to save the user's information through a token form to avoid revealing the user's information.
The system needs to encrypt the user's password so that when the database is attacked, the hacker cannot know the user's exact password.
The system needs to provide some business rules to temporarily lock the account when logging in incorrectly too many times to prevent users from being hacked by hackers.
The system needs to provide a business rule about the login part that if the user logs in with the wrong password 3 times, the account needs to be locked for 5 minutes, after
5 minutes, the user can log back in normally.
SYSTEM DESIGN
System architecture
Angular is a popular framework for building web applications It follows a component-based architecture and provides developers with a comprehensive set of tools and features
Key features of Angular include powerful data binding capabilities, a rich set of directives for extending HTML syntax, and modules for organizing code into cohesive units
Angular Component is a vital building block in Angular architecture, combining a JavaScript/TypeScript class, an HTML template, and optional CSS Styles It enables data interaction and composition of components within an Angular application
Angular offers excellent tooling, including a command-line interface (CLI) for automating common development tasks It also has a strong community and ecosystem, making it a preferred choice for developers
Here are some important concepts following the Angular Architecture:
Components: Components are the building blocks of an Angular application They encapsulate the data, behavior, and UI elements of a specific part of the application Each component is responsible for its logic and rendering Components are reusable and can be composed together to form the application's structure
Modules: Modules in Angular are used to organize the application into cohesive functionality They group related components, services, and other assets Modules help with code organization, and separation of concerns, and provide a way to lazy load parts of the application for better performance An Angular application typically consists of multiple modules
Templates: Templates in Angular define the UI and layout of a component They are written in HTML with additional Angular-specific syntax and directives Templates bind to component properties and provide the structure for displaying data and handling user interactions
Data Binding: Data binding is a powerful feature in Angular that enables synchronization between the component and its template There are two types of data binding: property binding and event binding
- Property Binding: Property binding allows you to bind a component property to a value or expression in the template Changes in the property value are reflected in the template, and vice versa It is denoted by square brackets, e.g., [property]="value"
- Event Binding: Event binding enables you to bind a component event, such as a button click or input change, to a method in the component's class When the event occurs, the associated process is executed Event binding is denoted by parentheses, e.g., (event)=" method()"
Directives: Directives are a way to extend HTML syntax with custom functionality
Angular provides two types of directives: structural directives and attribute directives Structural directives, such as *ngIf and *ngFor, modify the structure of the DOM Attribute directives, like ngStyle and ngClass, change the appearance or behavior of an existing element
Metadata: Metadata in Angular is used to decorate classes and provide additional information to the Angular compiler It is defined using decorators, such as
@Component and @Injectable Metadata allows Angular to understand and process various aspects of the application, such as component selectors, dependencies, and routing configurations
Services: Services in Angular are used to share data and functionality across multiple components They encapsulate reusable code and provide a way to centralize data access, business logic, and communication with external APIs Services are typically injected into components through dependency injection, making them easily testable and maintainable
Clean Architecture is a software design paradigm introduced by Robert C Martin, and it aims to create maintainable and scalable software by organizing the codebase into distinct layers with clear dependencies and responsibilities
Here are some important concepts following the Flutter Clean Architecture:
Presentation Layer: This layer, as its name implies, is in charge of presenting data to the user via widgets This layer is also responsible for listening for states and connecting to the Provider class, which will delegate all work to the specific use case
In most cases, the presentation layer's primary task is to handle basic input validations, animations, and user interactions
Domain: This is the glue layer that connects the other two layers It will use business objects (entities) and use cases to implement our application's business logic In addition, every use case relies on the Repository to retrieve data
• Entity: Encapsulate the enterprise-wide high-level business rules Only the fields that make sense from a "business standpoint" are held by an entity
• Use case: A use case, in its most basic form, represents a user action such as retrieving weather data by city, retrieving weather information by coordinates, and so on
• Repository: A repository class serves as a single source of truth, separating the logic that retrieves data and maps it to the entity model
Data layer: This layer is responsible for data retrieval from multiple sources It consists of a repository class that implements the domain contract and determines whether to return fresh or cached data and when to cache it Additionally, the data source class handles fetching data from a specific source, typically a remote API or local database
The backend is responsible for processing client requests and sending responses back In the context of web development, it typically refers to the server side of an application One popular framework for building backend applications is NodeJS
Node.js is a powerful runtime environment for building backend applications It allows developers to efficiently handle client requests, process data, and send responses With its JavaScript-based approach, extensive module ecosystem, and support for asynchronous programming, Node.js is widely used for developing scalable and performant backend systems
Entity relational diagram (ERD)
Database diagram
Class diagram
Component diagram
Collaboration diagram
Figure 4.13 Forgot password Collaboration Diagram
- Use case Submit a leave request
Figure 4.14 Submit leave request Collaboration Diagram
Figure 4.15 Edit profile Collaboration Diagram
Figure 4.16 Log work Collaboration Diagram
- Use case Punch-in/out
Figure 4.17 Punch in/out Collaboration Diagram
Figure 4.18 View notification Collaboration Diagram
- Use case Change leave request Status
Figure 4.19 Change leave request status Collaboration Diagram
Figure 4.20 View report schedule Collaboration Diagram
Figure 4.21 View work calendar Collaboration Diagram
- Change working hours/working type
Figure 4.22 Change working hours/working type Collaboration Diagram
Sequence diagram
Figure 4.24 Forgot password Sequence Diagram
- Use case Submit a leave request
Figure 4.25 Submit leave request Sequence Diagram
Figure 4.26 Edit profile Sequence Diagram
Figure 4.27 Log work Sequence Diagram
- Use case Punch-in/out
Figure 4.28 Punch in/out Sequence Diagram
Figure 4.29 View notification Sequence Diagram
- Use case Change leave request Status
Figure 4.30 Change leave request status Sequence Diagram
Figure 4.31 View report schedule Sequence Diagram
Figure 4.32 View work calendar Sequence Diagram
- Change working hours/working type
Figure 4.33 Change working hours/working type Sequence Diagram
User interfaces
Figure 4.34 Login screen UI (Mobile)
Figure 4.35 Login screen UI (Web)
Figure 4.36 Home page screen (Mobile)
Figure 4.37 Home page screen (Web)
Figure 4.39 Attendance management screen (Web)
Figure 4.40 Attendance report screen (Web)
Figure 4.41 Leave request management screen (Mobile)
Figure 4.42 Leave request management screen (Web)
Figure 4.43 Submit leave request screen (Mobile)
Figure 4.44 Submit leave request screen (Web)
Figure 4.45 Employee profile screen (Mobile)
Figure 4.46 Employee profile screen (Web)
Figure 4.47 Employee management screen (Mobile)
Figure 4.48 Employee management screen (Web)
Figure 4.49 Work calendar screen (Mobile)
Figure 4.50 Work calendar screen (Web)
Figure 4.51 Report schedule screen (Web)
Figure 4.52 Log work screen (Mobile)
Figure 4.53 Log work screen (Web)
4.8.12 Punch-in/punch-out screen
Figure 4.54 Punch-in/punch-out screen (Web)
Figure 4.55 Alert punch-in/punch-out screen (Web)
Figure 4.56 Report attendance screen (Web)
SYSTEM IMPLEMENTATION AND TESTING
System implementation
Internet Connection Cable, Wi-fi (20 Mbps) Cable, Wi-Fi (50 Mbps or more)
Computer Memory 2GB RAM 4GB or more
Storage Space 15GB 35GB or more
Environment NodeJS 18.17.0 Specification for developing web application
Flutter 3.19.6 Specification for developing mobile application
Operating System Debian Operating system and platform for development
Database Management MySQL Used to create & manage the database for the system
Redis Caching user device token for notifications
Web server Docker Deployment environment
Web browser Chrome Testing browser
5.1.3.1 Config Dockerfile for all project
Because the system has many sub-project that use many services So the team decided to use Docker in the deployment process To make the process go smoothly, in each small application we will create a Dockerfile which will be configured as shown below a Config Dockerfile for Web Application Backend
Because in the process of running the backend, we have reloaded the previous migration so we do not use the build file but will use the run command with a combination of add migration and project run command
Figure 5.1 Dockerfile for Web Application Backend b Config Dockerfile for Web Application Frontend
For the front-end part, the system is sometimes under high load with a large number of response messages So the team uses Nginx to handle some caching and redirection when something goes wrong In addition, using Nginx will make setting up domains more convenient
Figure 5.2 Dockerfile for Web Application Frontend
With editing subprojects with Dockerfile and some other software, creating Docker Compose is completely simple First, you need to set up the services (4 projects and 2 databases) then we need to create networks so that the projects use the same network Also, every project needs “depend_on” on the project backend for everything to work as expected With that, we need to edit the env files to be suitable for the project
We connect to the VPS with SSH mode After that, we use the “SCP” command to upload the full project folder above to the VPS Then we run Docker and enjoy the result!
Testing
Function to test such as:
- Employee management and employee profile
- Leave entitlement and leave type management
5.2.1.2 Outside the scope of testing
- In addition to the functions listed above
- Test the performance of the system
- Test the load capacity of the system
When coding, developers can inadvertently introduce bugs or errors into their code It is crucial to identify and address these issues to ensure the quality and reliability of the final product
Here are some common bugs that developers may encounter: Syntax Errors, Logic
Errors, Null Pointer Exceptions, Memory Leaks, Input Validation Errors,
To prevent or address these bugs, developers can adopt various strategies: Writing clean and readable code, Unit testing, Code reviews, and finding bugs created by developers when coding
Gain confidence and provide information on quality levels Ensure that the result meets business and user requirements
To gain the trust of customers by providing them with a quality product By actively addressing and preventing bugs, developers can build trust with customers by delivering a high-quality product that meets business and user requirements
CONCLUSION
Result archived
- Build an HRM system website using Angular framework and Flutter for mobile applications
- Learn more about website testing knowledge to become perfect
- Learn about the Test Case writing and design process
- Practice skills in researching, surveying, and analyzing application issues
- Practice teamwork, self-study, and time management skills
- Practice skills in drawing diagrams such as use case, ERD, database diagram, sequence diagram,
Strength
- The site does a good job of completing some simple tasks
- In addition, the website also completes complex tasks such as: leave management, work calendar, and attendance using face recognition,
Throwback
- The website is not yet complete in terms of user experience
- There are not many revolutionary features yet
- The code is still not optimized
- The performance of the system is not good.
Future works
- Improve and upgrade the website for a better user experience
- Optimizing code makes it easier to read and use, helping to reuse code
- Develop a few more modules for the web: payslip, chatbot,…
- Deploy the website so everyone can access and use it.
BẢNG LIỆT KÊ KHỐI LƯỢNG CÔNG VIỆC CỦA TỪNG THÀNH VIÊN
[1] "Angular docs" [Online] Available: https://angular.io/docs
[2] "Flutter" [Online] Available: https://docs.flutter.dev/
[3] "NodeJS" [Online] Available: https://nodejs.org/en.