ZKT ATTENDANCE APPLICATION Jihen Hmaier

Dedication
To my family,
Thank you for being there for me, thank you for your sacrifices, efforts, encouragement and
investments. To my parents, Mohamed and Faiza, thank you for your continuous support and
encouragement. No word, no dedication can express my respect and my love.
To my sister, Nihel and my brother Mohamed, for their endless support and their
encouragements.
Thank you for the unconditional love. I know I made it difficult for you.
For all of those who love me. I dedicate this modest work.

To my husband,
Thank you for your patience, love, and your moral supports. Thank you for your encouragement,
which has always been most precious to me.
Thank you for being always by my side.

To my friends,
I was lucky to be blessed with you. Your support helped me to achieve most of my success.
To Jihen, Amira, Rawdha, Marwa, Abdellatif, Kais,
I have no expressions that could express my thanks for all your support.
Thank you for your understanding and encouragement in every step in my life. Your friendship
makes my life a wonderful experience.

To my professors,
Thank you all for the quality of training they gave us through our university course.

Jihen Hmaier

- Page i / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Acknowledgments

With the deepest gratitude and appreciation, I humbly give thanks to the people
who patiently helped me throughout this work.

I am particularly grateful for the patient guidance, framing, encouragement and

advice of Mrs. Imene LAHYANI my academic supervisor, Mr. Mohamed
ELLEUCH and Mr. Akram REKIK my company supervisors, they has provided
throughout my internship, also I would like to express my very great appreciation to
“Primatec Engineering” staff for their hospitality and encouragement. Without
forgetting Mr. Salmen AJILI, Primatec Engineering director, for welcoming us to
the company and for the efforts that he made to ensure that the internships are taking
place in excellent conditions.

I would also like to offer my special thanks to my parents for their unending love and
support for providing all my needs, for their pieces advice and for being there at all
times. To my sister and my brother who served as my inspiration, for keeping me
inspired to push myself to the limits and to make the best out of everything. To my
husband who never stopped encouraging me and believing in me .To all my friends
for their moral support all the time, that was important for the success of this project.
I would not have been able to complete this without some amazing people.

Finally, I would like to acknowledge my president of jury Mr. Mohamed ABID and
my examiner Mrs. Ines HOUIDI for the honor they gave me by agreeing to evaluate
this work.

- Page ii / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Table of contents

Acknowledgments ..........................................................................................................................................ii
Table of contents ........................................................................................................................................... iii
List of figures ................................................................................................................................................. vi
List of tables ................................................................................................................................................ viii
General introduction ..................................................................................................................................... 1
CHAPTER 1: PRELIMINARY STUDY ................................................................................................................. 2
I.1. Introduction......................................................................................................................................... 3
I.2. Presentation of the host organization................................................................................................. 3
I.2.1. Presentation of the company ....................................................................................................... 3
I.2.2. General presentation ................................................................................................................... 3
I.2.3. Business areas .............................................................................................................................. 4
I.2.4. Activities domain .......................................................................................................................... 5
I.2.4.1. Developing and validating tests ............................................................................................ 5
I.2.4.2. Software development .......................................................................................................... 5
I.2.4.3. Embedded solution ............................................................................................................... 6
I.2.4.4. Software maintenance .......................................................................................................... 6
I.3. Project framework............................................................................................................................... 6
I.3.1. Presentation of the project .......................................................................................................... 6
I.3.2. Existing solution for the studied problem .................................................................................... 7
I.3.3. Critique of the existing solution ................................................................................................... 9
I.3.4. Description of the proposed solution and its objectives............................................................ 10
I.4. Methodology adopted....................................................................................................................... 10
I.4.1. Presentation of SCRUM .............................................................................................................. 11
I.4.2. Scrum team ................................................................................................................................ 12
I.4.3. Product Backlog .......................................................................................................................... 14
I.5. Sprints backlog .................................................................................................................................. 16
I.5.1 Sprint 1 backlog ........................................................................................................................... 16
I.5.2 Sprint 2 backlog ........................................................................................................................... 17
I.5.3 Sprint 3 backlog ........................................................................................................................... 18
I.6. Conclusion ......................................................................................................................................... 19
CHAPTER 2: Analysis and design ................................................................................................................. 20

- Page iii / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

II.1. Introduction...................................................................................................................................... 21
II.2. Needs analysis .................................................................................................................................. 21
II.2.1. Actors identification .................................................................................................................. 21
II.2.2. Functional needs identification ................................................................................................. 21
II.2.3. Non-functional needs identification.......................................................................................... 22
II.3. Modeling language ........................................................................................................................... 22
II.4. General use case diagram ................................................................................................................ 23
II.4.1 Textual Description of ‘Authenticate’ ........................................................................................ 24
II.4.2 Textual Description of ‘Consult personnel Information’ ............................................................ 25
II.4.3 Textual Description of ‘Add department’................................................................................... 26
II.4.4 Textual Description of ‘Delete area’ ........................................................................................... 27
II.4.5 Textual Description of ‘Test connection’ .................................................................................... 28
II.5. Conceptual study .............................................................................................................................. 29
II.5.1 Class diagram.............................................................................................................................. 30
II.5.2 Sequence diagram ...................................................................................................................... 30
II.5.2.1 Sequence diagram: ‘Authentication’ use case .................................................................... 31
II.5.2.2 Sequence diagram: ‘Add personnel’ use case ..................................................................... 32
II.5.2.4 Sequence diagram: ‘Add department’use case................................................................... 33
II.5.2.4 Sequence diagram: ‘Test connection’ use case................................................................... 33
I.6. Conclusion ......................................................................................................................................... 34
CHAPTER 3: Realization ............................................................................................................................... 35
III.1. Technical study ................................................................................................................................ 36
III.1.1. Hardware environment ............................................................................................................ 36
III.1.2. Software environment ............................................................................................................. 36
III.1.3. Languages and frameworks...................................................................................................... 39
III.2. Global architecture .......................................................................................................................... 41
III.3. Realization ....................................................................................................................................... 42
III.3.1 Authentication ........................................................................................................................... 42
III.3.2 Personnel system management ................................................................................................ 44
III.3.2.1 Department management interface .................................................................................. 44
III.3.2.2 Personnel management interface ...................................................................................... 44
III.3.3 Device management.................................................................................................................. 45
III.3.3.1 Manage area interface ....................................................................................................... 45

- Page iv / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

III.3.3.2 Manage device ................................................................................................................... 46

III.3.3.2.1 Test connection to the device ...................................................................................... 47
III.3.3.2.2 Enable/Disable device ................................................................................................. 48
III.3.3.2.3 Get time from device ................................................................................................... 48
III.3.3.2.4 Get personnel information from device....................................................................... 49
III.3.3.2.5 Get attendance log file from device ............................................................................ 50
III.3.3.2.6. Get latest attendance ................................................................................................. 50
III.3.3.2.7. Get Serial number ....................................................................................................... 51
General conclusion ...................................................................................................................................... 52
Bibliography................................................................................................................................................. 53
Webography ................................................................................................................................................ 53

- Page v / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

List of figures

Figure 1. Logo Primatec Engineering ............................................................................................................ 3

Figure 2. Primatec Engineering main clients ................................................................................................. 4
Figure 3. ZKT access control terminals .......................................................................................................... 7
Figure 4. ZKAccess home page ...................................................................................................................... 8
Figure 5. ZKTime.Net Lite home page ........................................................................................................... 8
Figure 6. Scrum process .............................................................................................................................. 11
Figure 7. Trello dashboard .......................................................................................................................... 12
Figure 8. Scrum team .................................................................................................................................. 12
Figure 9.Sprint planning .............................................................................................................................. 14
Figure 10. Logo UML ................................................................................................................................... 23
Figure 11. General use case diagram .......................................................................................................... 24
Figure 12. Class diagram ............................................................................................................................. 30
Figure 13. Sequence diagram of ‘Authentication’...................................................................................... 31
Figure 14. Sequence diagram of ‘Add personnel’ ....................................................................................... 32
Figure 15. Sequence diagram of ‘Add personnel’ ....................................................................................... 33
Figure 16. Sequence diagram of ‘Test connection to device’ ..................................................................... 34
Figure 17. Logo StarUML ............................................................................................................................. 36
Figure 18. Logo Node.js ............................................................................................................................... 37
Figure 19. Logo WampServer ...................................................................................................................... 37
Figure 20. Logo PhpMyAdmin ..................................................................................................................... 37
Figure 21. Logo WebStorm.......................................................................................................................... 38
Figure 22. Logo Visual Studio Code ............................................................................................................. 38
Figure 23. Logo Postman ............................................................................................................................. 38
Figure 24. Logo Git ...................................................................................................................................... 39
Figure 25. Logo GitLab................................................................................................................................. 39
Figure 26. Logo npm.................................................................................................................................... 39
Figure 27. Logo NestJs ................................................................................................................................. 40
Figure 28. Logo Angular .............................................................................................................................. 40
Figure 29. Logo TypeScript .......................................................................................................................... 40
Figure 30. Logo MySQL................................................................................................................................ 41
Figure 31. Logo TypeORM ........................................................................................................................... 41
Figure 32. General architecture of the solution.......................................................................................... 42
Figure 33. Authentication interface ............................................................................................................ 43
Figure 34. Home page ................................................................................................................................. 43
Figure 35. Department interface ................................................................................................................ 44
Figure 36. personnel interface .................................................................................................................... 45
Figure 37. Area interface............................................................................................................................. 46
Figure 38.Manage device interface............................................................................................................. 47
Figure 39. Test connection .......................................................................................................................... 47
Figure 40. Enable/disable device interface ................................................................................................. 48
Figure 41. Get time from device interface .................................................................................................. 49
Figure 42. Get personnel information from device .................................................................................... 49

- Page vi / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 43. Get attendance log file from device ........................................................................................... 50

Figure 44. Get latest attendance................................................................................................................. 51
Figure 45. Get serial number from device .................................................................................................. 51

- Page vii / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

List of tables

Table 1. Advantages and limits of existing solutions .................................................................................... 9

Table 2. Project team .................................................................................................................................. 13
Table 3. Product backlog ............................................................................................................................. 14
Table 4. Sprint 1 backlog ........................................................................................................................... 186
Table 5. Sprint 2 backlog ............................................................................................................................. 17
Table 6. Sprint 3 backlog ............................................................................................................................. 18
Table 7. Authentication use case textual description ................................................................................. 24
Table 8. Consult personnel information use case textual description........................................................ 25
Table 9. Department management use case textual description ............................................................... 26
Table 10. Delete area use case textual description .................................................................................... 27
Table 11. Test connection case textual description .................................................................................... 28

- Page viii / vi -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

General introduction

Technological evolution is recognized as one of the main engines of growth in long term. It is
indisputable that technology and digitalization make production processes more efficient, thereby
increasing the competitiveness of countries and reducing their vulnerability by integrating
operation of safety procedures in the digital society.

However, one of the company's responsibility is to provide employees with a safe working
environment, because if the building does not have any security system then employees will slowly
back out of the company and the number of absentees will gradually increase.

Therefore, an appropriate security system should be established to monitor access. Using

biometric scanning or other such devices ensures that only employees can enter or leave the office
building and go where they need to go. It is also important to conduct security checks from time to
time and thus, the need for an access control system.

In this context, our end-of-study project consists of setting up a Web-based employee attendance
application. So, in this report we will present all the work done.

This report is organized around three main chapters. In the first chapter, we begin by introducing
the host organization “Primatec Engineering” and the project’s framework. Then, we continue by
presenting the field of the study by as well by an analysis of the existing solution. After that, we
identify the anomalies of the existed solution in order to evidence the goals that we are aming for
in our solution. Finally, we will end this chapter by presenting the methodology adopted in the
implementation of our application. The second chapter will be devoted to the description of the
funtional and non-functional needs.Then, we will present the general use case diagram and the
textual description of some use cases. After that, we will conduct to a conceptual study. In the last
chapter, we will present a description of the working environment used and the global architecture
of our application as well as a description of the implementation phase of our application.
Finally, we end our report with a general conclusion.

- Page 1 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

CHAPTER 1: PRELIMINARY STUDY

- Page 2 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.1. Introduction

The preliminary study constitutes a preliminary stage for the realization of an application.

In this chapter, we will introduce the host organization, “Primatec Engineering”, in which we
carried out our graduation project. Then we will focus on the study of our proposed application, so
we are going to present a synthesis of existing solutions by discussing their advantages and limits.
Next, we will propose the solution to the raised problem. After that we will present the
methodology adopted in our work. This study will help us to know more about the purpose of our
project.

I.2. Presentation of the host organization

In the following section, I will present the host organization in which my graduation project
took place, as well as its services, its fields of activity, and its organization chart.

I.2.1. Presentation of the company

“Primatec Engineering” is a newly founded company, launched on the 1st of May 2010, based in
Sfax Tunisia, and currently, with a number of collaborators that exceeds 200. “Primatec
Engineering” is specialized in the design, implementation and test of IT (Information Technology)
solutions, mainly for the automotive industry. the figure 1 presents the company logo.

Figure 1. Logo Primatec Engineering

I.2.2. General presentation

“Primatec Engineering” is an offshore outsourcing software development company based in

Sfax, Tunisia. The company provides customized, innovative and cost-efficient IT solutions to
automotive industry around the world.

- Page 3 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

“Primatec Engineering” is becoming well known in the automobile industry since it develops
innovative and efficient solutions for test, diagnostics and validation of ECUs in automobile
electronic systems.

Figure 2. Primatec Engineering main clients

I.2.3. Business areas

The activities of the company include creation, design and development of vehicle software or
ECUs, by implementing and testing them.

“Primatec Engineering” assists automobile manufacturers and their suppliers with development
and testing projects for the validation of vehicle technology systems using their own hardware and
software solutions.

Through the combination of engineering and consulting, “Primatec Engineering” supports the
development of new products and systems in the automotive sector and related high-tech industries
such as BMW, MAN, Lear Corporation, Valeo, etc...

Thanks to its partnership with “TECHNICA Engineering Gmbh” [2], the company participates
in the elaboration of several projects.

- Page 4 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.2.4. Activities domain

The company’s activities are spread over four main business segments.

I.2.4.1. Developing and validating tests

Automotive embedded systems require high quality, durable stability and reduced costs. For
these reasons, test software or electronic control units in this area occupy most of any software
development cycle. Therefore, “Primatec Engineering” applies a rigorous approach to the test
procedure. Such an approach improves reliability and ensures stability to validate all requirements.

The developers are also developing a wide range of test solutions and validation services for the
automotive and high technology industries.

The Test and Validation team in “Primatec Engineering” relies on the flexibility of its members
and the efficient management of the whole testing procedure in order to:

➢ Increase customer satisfaction through faster time-to-market.

➢ Improve products and software quality.

➢ Reduce costs and ensure efficiency during all validation steps.

I.2.4.2. Software development

To meet the requirements of its customers, “Primatec Engineering” develops its own testing
tools. For example, the Automotive Network Diagnosis (ANDI) is an environment for testing and
simulating Ethernet, CAN, LIN and FlexRay for ECUs. “Primatec Engineering” offers a range of
powerful, mission-critical tools and IT solutions that include:

➢ Client / Server Application

➢ Distributed Application

➢ Component Development

- Page 5 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.2.4.3. Embedded solution

Services and solutions offered by “Primatec Engineering” include the development of

embedded applications. Examples of different technologies and platforms mastered by its experts:
Embedded Linux, eCos, Android, Freescale, Atmel, Broadcom, Samsung, Wifi, Bluetooth, CAN,
Flex-Ray, Ethernet.

I.2.4.4. Software maintenance

The application maintenance includes:

➢ Implementation of new features/improvements

➢ Error and bug fixing

➢ Software application optimization

➢ Software application support

I.3. Project framework

This part consists of presenting the project in general. Then, we approach the study of the
existing solution to determine its weak points and its for points and finally we present the proposed
solution in order to achieve the goals while respecting user needs.

I.3.1. Presentation of the project

As part of our graduation project, we had the opportunity to carry out a four-month project
entitled “ZKT attendance application” within the company “Primatec Engineering”. This project
is a part of the “IT” department produced by the company and is supervised by Mr. Mohamed
ELLEUCH and Mr. Akram REKIK.

The project consists of creating an employee attendance web application which can also manage
personnel in “Primatec Engineering”, its departments and even its areas.

- Page 6 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Therefore, we will conduct a study of the existing solution, and then we will identify the main
imperfections of the current system which leads us to our proposed solution

I.3.2. Existing solution for the studied problem

Since security and employee management are an important aspect for modern enterprises,
“Primatec Engineering” uses ZKT eco products as a solution to manage its employees and secure
its building.

Our host company uses ZKT clock timing machine to access to personal or private places, also
to clock-in and clock-out when entering and quit work. The “MA300-BT” biometric fingerprint
reader and RFID card are used to lock and unlock doors inside the company and the “SilkBio-
101TC” fingerprint reader, face recognition and RFID card functions to record the employees
attendance as two access control terminals. (c.f. Figure 3)

Figure 3. ZKT access control terminals

To manage this two access control terminals, “Primatec Engineering” uses two different
software:

• ZKAccess3.5: a desktop software, which is designed to manage all ZKTeco’s access control
panels and standalone access control terminals (c.f. figure 4).

- Page 7 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 4. ZKAccess home page

• ZKTime.Net Lite: An attendance software which is used to generate attendance report and
directly manage device and employee in the home page (c.f. figure 5).

Figure 5. ZKTime.Net Lite home page

- Page 8 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.3.3. Critique of the existing solution

Continuous improvement is the main key to “Primatec’s Engineering” success. Thus, the leaders
of “Primatec” and more precisely “IT” team keeps setting perfection goals.

In fact, using a set of two applications to manage both employee attendance and access control
system is a waste of time and effort for the user since some functionalities are available in one of
the two software. So too, slow loading pages is another fact of performance problem.

Moreover, ZKT eco software used in our host organization are not extensible so it is hard to
meet the new needs of the company.

Besides, ZKAccess3.5 and ZKTime.Net3.0 software contain several functions and tools that are
complicated and not easy to maintain and to understand that make the use of the software more
difficult.

Furthermore, ZKTime.Net Lite application has a lack of modules and in order to use other
functionalities, it is necessary to use ZKTime.Net 3.0 software which needs to activate its license
that costs a lot of money (£443.90).

Table 1 summarizes the advantages and disadvantages of these two solutions.

Table 1. Advantages and limits of existing solutions

Software Advantages Limits

▪ Free. ▪ Maintenance and performance
▪ Menu-driven dashboard issues.
ZKAccess3.5
display. ▪ Difficult to handle
▪ Blocks while loading

▪ Free ▪ Maintenance and performance

▪ Easy to use issues.
ZKTime.Net
▪ Lack of module compared to
the paid version.

- Page 9 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.3.4. Description of the proposed solution and its objectives

After studying the two previous solutions and having noted their limits, “Primatec Engineering”
decides, by means of this end-of-study project, to create a web application to cope with the
limitations mentioned in the previous paragraph.

This project aims to design and implement a web application that is characterized by the ZKT
software’s functionalities, all in one single application, it might also integrate operation of safety
procedures, making access control management easier and more practical to improve efficiency
and rapidity.

In fact, the proposed web application will provide:

✓ The security of access to the data

✓ The extensibility of the application and the opportunity to add or update functionalities

✓ Making access control management easier and more practical

✓ Real time data transmission

✓ Real time monitoring of employees

✓ Export data into Excel form

I.4. Methodology adopted

Before carrying out an IT project, it is necessary to choose a work methodology and a

monitoring process in order to end up with reliable software. This methodology presents a process
which aims to formalize the preliminary stages of the development of a system to make this
development more responsive to the needs of the customer.

Among the Agile methods, we can cite “SCRUM” which will be used in the realization of our
project.

- Page 10 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

I.4.1. Presentation of SCRUM

Scrum is an agile method dedicated to “project management”. This management method, or

rather this project management framework, aims to improve the productivity of its team. The
principle of the agile SCRUM method is to focus the development team on a set of functionalities
to be carried out iteratively, in iterations lasting from two to four weeks, called sprints. Each sprint
must result in the delivery of each partial product.

Figure 6 below represent the Scrum process.

Figure 6. Scrum process

For the implementation of this methodology, we used as a management tool project “TRELLO”
which is based on the principle of agile and Scrum method. Trello is perfectly suited for this type
of Scrum implementation of the agile method, because we can display our board on a screen visible
to all, share its access with the whole team and specify the smallest detail of each task using
checklists, comments, deadlines, attachments, etc.

- Page 11 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 7. Trello dashboard

I.4.2. Scrum team

The Scrum team is designed to maximize flexibility, creativity and productivity. It defines three
main roles: Product Owner, Scrum Master and Development Team. (c.f. figure 8)

Figure 8. Scrum team

- Page 12 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Our Scrum team is made up of 4 members. Table 2 present the role of each member.

Table 2. Project team

Role Mission Actor

This is the official representative of the client
Product Owner within a project Scrum. He defines the needs of Akram REKIK
the product and writes the specifications
He is a person who is responsible for ensuring
the application of the SCRUM method and
compliance with its objectives. He for removing
Scrum Master Mohamed ELLEUCH
any obstacles that would prevent the progress of
the team on the project during the various
sprints.
These are the people responsible for carrying
out the sprint and of a product that can be used
Jihen HMAIER
Team Development at the end of the sprint. They can be developers,
Kais MASMOUDI
architects and people responsible for carrying
out tests functional.

The realization of this project lasted four month which is divided according to the following
sprint:

- Page 13 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 9.Sprint planning

I.4.3. Product Backlog

The Backlog is a very important artifact in Scrum. In this part, we have identified the tasks that
we will perform throughout this project and we have classified them according to their complexity.

Table 3. Product backlog

ID ID Actor User story Priority

Topic
sprint
1.1 Authenticate securely. High
1.2 User data must be safe. High
1 Authentication User User stay logged in if he exits the
1.3 application without exiting the High
browser.

- Page 14 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

User stay logged in if he exits the

1.4 application and the browser after a Medium
determined period.
- User can add, edit, delete
personnel.
-User can display all personnel
information.
Personnel -User can export a csv file
1.5 User High
management containing all personnel
information
-User can import a csv file
containing personnel information
and store it in the database.
-User can add, edit or delete
departments.
-User can display department
Department
2.1 User information in a TreeView. High
management
-User can export a csv file
containing department
information.
2.2 User -User can add, edit or delete areas. High
2
-User can display area information
Area management in a TreeView.
-User can export a csv file
containing area information.
-User can add, edit or delete
Device devices.
2.3 User High
management -User can display the list of
devices
Connection to 3.1 User User can connect to ZKT device. High
3
device

- Page 15 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

3.2 User can get time from device. Medium

User can enable and disable
3.3 Medium
Real time device.
User
monitoring 3.4 User can get users from device. High
3.5 User can get attendance log file High
and the latest attendance.

I.5. Sprints backlog

After introducing the product backlog, we will detail, in this section, the backlog of each sprint.

I.5.1 Sprint 1 backlog

In Agile scrum methodology, a sprint refers to a period during which a specific work must be
done by defining the goal of the latter. Following what we prepared during the initialization phase
of the project, the objectives of the sprint 1 are to implement the authentication and the personnel
topic. (c.f. table 4)

Table 4. Sprint 1 backlog

Topic ID User story Tasks

-Create the application logo with
Application Create the graphical charter of
1.0 Adobe Illustrator.
design the application.
-Download Angular 8 template.
-Implement the user authentication
component. (server-side)
-Implement the user authentication
Authentication 1.1 Authenticate securely.
component. (client-side)
-Realization of sign-in page with rule
validators.

- Page 16 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

User data must be safe. -Implement JWT in the

1.2
authentication component.
User stay logged in if he exits
-Implement the cookies option in the
1.3 the application without exiting
authentication component.
the browser.
User stay logged in if he exits
the application and the browser -Implement the cache option in the
1.4
after a determined period of authentication component.
time.
-Implement the personnel component
with all necessary attributes and
Personnel User can add, edit or delete methods. (server-side)
1.5
management personnel. -Implement the personnel component
with all necessary attributes and
methods. (client-side)

I.5.2 Sprint 2 backlog

According to the authentication and personnel topic, our mission in the second sprint is to
implement department, area and device topics.

Table 5. Sprint 2 backlog

Topic ID User story Tasks

-Implement the department component
with all necessary attributes and
Department User can add, edit and delete methods. (server-side)
2.1
management departments. -Implement the department component
with all necessary attributes and
methods. (client-side)

- Page 17 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

-Implement the area component with all

necessary attributes and methods.
Area User can add, edit and delete (server-side)
2.2
management areas. -Implement the area component with all
necessary attributes and methods.
(client-side)
-Implement the device component with
all necessary attributes and methods.
Device User can add, edit and delete (server-side)
2.3
management devices. -Implement the device component with
all necessary attributes and methods.
(client-side)

I.5.3 Sprint 3 backlog

Finally, we will focus on the third sprint which is reserved to implement the connection to device
and real time monitoring topics. (c.f. table 6)

Table 4. Sprint 3 backlog

Topic ID User story Tasks

-Search for a package to connect to
device.
Connection to User can connect to ZKT -Refactor package to make it
3.1
device device. compatible with MA300-BT device
model.
-Connect to device.
-Get time from device.
3.2 User can get time from device.
Real time -Display time. (client-side)
monitoring User can enable and disable -Enable device.
3.3
device. -Disable device.

- Page 18 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

-Display device status.

User can get users information -Get users information from device.
3.4
from device. -Display list of users. (client-side)
-Get attendance log file from device.
-Display attendance history. (client-
3.5 User can get attendance log file. side)
-Save attendance history in database.
(server-side)

I.6. Conclusion

In this chapter, we first presented the host organization “Primatec Engineering”, then we gave
a general overview of the presentation of the project, as well as the state of the art by specifying
the basic concepts of the subject, the work methodology adopted during the period of the project
and its sprint planning and finally we presented the product backlog and the backlog of each sprint.
The following chapter is devoted to explain the needs analysis of our project, present the general
use case diagram and the textual description of some use cases and finally will conduct to a
conceptual study.

- Page 19 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

CHAPTER 2: Analysis and design

- Page 20 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

II.1. Introduction

In this chapter, we begin by presenting the first phase of the software development cycle which
consists of the analysis and extraction of reactive actors, functional and non-functional needs of
our application. Then, we will present our global use case diagram, our class diagram and some
sequence diagrams.

II.2. Needs analysis

We will present the details of the project. Beginning with identifying the actors of this system.
Then the functional and non-functional needs analysis.

II.2.1. Actors identification

An actor is an external entity that acts on the system. In our application, we can identify a single
actor who is the user of the application who could be either a manager in the IT department or the
enterprise manager. The user has all the rights to access the application’s functionalities.

II.2.2. Functional needs identification

The functional needs are a description of the service that the software must perform. After a
detailed system study, the functional requirements can be summarized into:

• Authentication

• Display the list of employees and having the access to modify or delete an employee.

• Export the list of the employee in a csv file.

• Display departments and areas in a hierarchical view called Treeview.

• Each department/area can have a number of sub-departments/sub-areas.

• Delete node department/area and its children.

- Page 21 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

• Display the list of the access control terminals installed in the compony and having the
access to add, modify and delete a device.

• Connect the device with our web application and testing the connection.

• Getting users information from the access control panel.

• Getting attendance log file from the access control panel.

• Getting the latest attendance.

II.2.3. Non-functional needs identification

After identifying the functional needs of our system, we also ensured the consideration of certain
non-functional needs. In our project, the non-functional needs are as follows:

• Performance and rapidity: any instruction requested by the system will not exceed the
delay of 1 seconds of processing.

• Ergonomics: The system should be easy to use. Indeed, the interfaces of the administrator
must be user-friendly, simple, ergonomic and adapted to him.

• Efficiency: the application must be functional regardless of any circumstances that may
surround the user.

• Security: To ensure data security, an effective strategy for accessing these data must be
applied.

• Extensibility: The application can have extensions by integrating new modules to meet
additional functional needs without the need for modifying an existing module.

II.3. Modeling language

To model our application, we have chosen to use “UML”, which is a standardized modeling
language that enable us to specify, visualize, construct and document artifacts of our application.

- Page 22 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 10. Logo UML

II.4. General use case diagram

The use case model includes the actors, the system and the use cases. The full functionality of
the system is determined by examining the needs of each actor, expressed as a family of interactions
in use cases.

The figure below (c.f. figure 11) represents our application’s general use case diagram.

- Page 23 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 11. General use case diagram

II.4.1 Textual Description of ‘Authenticate’

Authentication functionality precedes all other functionalities, it allows the user to log in to the
application. Below is the textual description of the “authenticate” use case presented in Table 7.

- Page 24 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Table 7. Authentication use case textual description

Identification summary
Title Authenticate
Purpose Give permission to user to use the application’s functionalities.
Abstract User enters his credentials.
Actor User
Description of the sequences
Precondition User must have an account on the application.
Postcondition Application is accessible to the user.
Nominal sequences
1- The system displays the authentication interface.
2- User enters his email and password.
3- User clicks on “Connect” button.
4- The system checks the information entered.
5- If the information is correct, the system redirects the user to the home page.
Alternative sequences
E1: Empty fields
1- The system displays an error message “email is required” or “password is required”.
2- The scenario resumes by 1.

E2: The login and/or password does not match the registration.
1- The system displays an error message “Invalid email or password”.
2- The scenario resumes by 1.

II.4.2 Textual Description of ‘Consult personnel Information’

After authentication, the user is redirected to the home page where he can navigate in the
application. If the user chooses “Personal”, he can consult, add, modify or delete a user.

- Page 25 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Below is the textual description of the “Consult personnel information” use case presented in
Table 8.

Table 8. Consult personnel information use case textual description

Identification summary
Title Consult personnel information
Purpose Control of all employees in “Primatec Engineering” company.
Abstract After authenticating, user can consult personnel.
Actor User
Description of the sequences
Precondition User must be authenticated.
Postcondition Personnel data is visualized
Nominal sequences
1- User access to personnel page.
2- The system displays the list of employees.
Alternative sequences
E1: Connection to Server Failed on List Display
1- The system displays “Server connection failed”.
2- The scenario resumes by 1

II.4.3 Textual Description of ‘Add department’

To add new department, user must choose the department node to which he wants to associate
it. Below is the textual description of the “Add department” use case presented in Table 9.

- Page 26 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Table 9. Add department use case textual description

Identification summary
Title Add department
Purpose Add new department
Abstract After authenticating, user can add departments.
Actor User
Description of the sequences
Precondition User must be authenticated.
Postcondition Users get notified by the modifications that user made.
Nominal sequences
1- The system displays department as a TreeView.
2-User clicks on “add” button in front of the node chosen.
3- The system displays the add department form.
4- User fill in the form fields.
5- User clicks on “submit” button.
6- The system displays the changes.
Alternative sequences
E1: Connection to Server Failed
1- The system displays “Server down”.
2- The scenario resumes by 1

E2: The user entered an already existing department number

1- The system displays “Department number repeated”.
2- The scenario resumes by 4

II.4.4 Textual Description of ‘Delete area’

To delete an existing area, user must choose the area node that he wants to remove it with its
sub-areas. Below is the textual description of the “Delete area” use case presented in Table 10.

- Page 27 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Table 10. Delete area use case textual description

Identification summary
Title Delete area
Purpose Delete area
Abstract After authenticating, user can delete areas.
Actor User
Description of the sequences
Precondition User must be authenticated.
Postcondition Users get notified by the modifications that user made.
Nominal sequences
1- The system displays area as a TreeView.
2-User clicks on “delete” button in front of the node chosen.
3- The system displays a confirmation message.
4- User clicks on “OK” button.
5- The system displays the changes.
Alternative sequences
E1: Connection to Server Failed
1- The system displays “Server down”.
2- The scenario resumes by 1.

E2: The user clicks “Cancel” of the confirmation message.

1- The scenario resumes by 1.

II.4.5 Textual Description of ‘Test connection’

This feature allows the user to test the connection between the access control and the device
before adding it to the list of devices.

Below is the textual description of the “Delete area” use case presented in Table 11.

- Page 28 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Table 11. Test connection case textual description

Identification summary
Title Test connection
Purpose Test connection of the device from our application
Abstract After authenticating, user can test the connection of the device.
Actor User
Description of the sequences
Precondition User must be authenticated.
Postcondition User get notified by the connection state.
Nominal sequences
1- The system displays add device form.
3- User enter the IP address of the device.
4- User clicks on “Test Connection” button.
5- User get the message “Connection established”.
Alternative sequences
E1: Connection to Server Failed
1- The system displays “Server connection failed”.
2- The scenario resumes by 1

E2: Connection to device Failed

1- The system displays “Connection failed”.
2- The scenario resumes by 1

II.5. Conceptual study

After having analyzed our application, this last must mainly go through an indispensable phase
which is the design. It aims to explain how the operations takes place in the system and take the
needs of the applications into account in their operating environment.

- Page 29 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

II.5.1 Class diagram

In this part, we will present our class diagram to describe the structure of our system by showing
the system's classes, their attributes, methods, and the relationships among objects.

Figure 12. Class diagram

II.5.2 Sequence diagram

The sequence diagram is a good diagram to use to document a system’s requirements and to
flush out a system’s design. The reason that we use this diagram is because it shows the interaction
logic between the objects in our application in the time order that the interactions take place.

- Page 30 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

In this section, we will describe the sequence diagrams relating to some scenarios use cases of
our application.

II.5.2.1 Sequence diagram: ‘Authentication’ use case

The authentication step is an important phase to ensure the security of access to the application.

To do this, the user is required to enter his login and password. After that, the system will check
the validity of the data entred: If the data is valid, the system will open new session and redirect to
the home page, otherwise the system will display an error message.

The sequence diagram of the “authentication” use case is shown in figure 13.

Figure 13. Sequence diagram of ‘Authentication’

- Page 31 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

II.5.2.2 Sequence diagram: ‘Add personnel’ use case

After being authenticated, the user can add new personnel to the system. To do this, he must
visit the personnel page and click on “Add” button.Then he is called to complete the addition form
and click on “submit” button. The system will send the data entred with the session token to
PersonnelController web service.The latter will check if this token is valid. If it is, it will instanciate
a new personnel, save it in the database of our application and display a success message indicating
that the new personnel is created successfully, else it will return an error message indicating that
the user is not authorized.

Figure 14 shows the sequence diagram of the “Add personnel” use case.

Figure 14. Sequence diagram of ‘Add personnel’

In what follow, we will skep the process of sending and verifying the token in the representation
of sequence diagrams in order to lighten and not encumber them by a precess that repeats each time
when a method of a web service (controller) is invoked.

- Page 32 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

II.5.2.4 Sequence diagram: ‘Add department’use case

Once authenticated, the user can add new department. To do this, he must choose the department
section, click on the “TreeView” button, choose the department under which he will add the new
department and finally click on add button. The system will display the add form. The user will
enter the department number and other information, then he will click “submit” button.

The system will check if the number of department entered is already in use. If so, an error
message will be displayed otherwise a new department will be added to the database.

The sequence diagram of “Add department” use case is shown by figure 15.

Figure 15. Sequence diagram of ‘Add department’

II.5.2.4 Sequence diagram: ‘Test connection’ use case

After authentication and before adding new device, it’s advisable to test the connection with the
device. So to do this, user must open the addition for, enter the “IP address” of the access control

- Page 33 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

panel and click on “test connection” button. The system will test the connection by executing the
cmd code of the connection (CMD_CONNECT) relative to the type of the device and display a
message containing the connection status.

The sequence diagram of “Test connection” use case is shown by figure 15.

Figure 16. Sequence diagram of ‘Test connection to device’

I.6. Conclusion

In this chapter, we have analyzed our system needs. Then, we presented an overview of the
project’s use cases. After that, we identified the modeling language that we had used in introducing
our diagrams. Also, we introduce our general use case diagram and detailed some of its
functionalities. As well, we have modeled some diagrams of our application which clarified the
main features of the project. The following chapter is devoted to the presentation of the hardware
and software environment, the architecture followed and the implementation.

- Page 34 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

CHAPTER 3: Realization

- Page 35 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

III.1. Technical study

A good working environment is one of the most important elements while developing a mobile
and a web application. In the following headers we present the hardware and software
environments.

III.1.1. Hardware environment

In order to develop our solution, we used a Lenovo laptop with the following characteristics:

Computer model ASUS X556U

Processor Intel Core i5-7200U
Hard disk memory 1 To
RAM memory 8 Go
Graphic card NVIDIA GeForce GTX 900M
Operating system Windows 10 professional (64 bits)

III.1.2. Software environment

In order to implement our project, we used different softwares presented in the following.

• StarUML: a UML modeling software, the objective of this software is to replace

commercial solutions, and it handles most diagrams such as class diagram, sequence and
use case. This software was used in the second chapter to create the needed diagrams.

Figure 17. Logo StarUML

- Page 36 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

• Node.js: is a platform built on Chrome's V8 JavaScript engine which allows you to develop
applications using JavaScript. It is used to create JavaScript server side. It can be used in
database applications such as MySQL. It sets itself apart from other platforms thanks to a
non-blocking approach allowing input / output (I / O) to be performed asynchronously.

Figure 18. Logo Node.js

• WampServer: is a WAMP-based Web development platform, which makes it possible to

run PHP scripts locally without having to connect to an external server.

Figure 19. Logo WampServer

• PhpMyAdmin: This is one of the most famous interfaces for managing a MySQL database
on a PHP server. This interface makes it possible to run many queries, such as data table
creations, insertions, updates, deletions, changes in the structure of the database, very
easily. This system is very convenient for saving a database as a .sql file and thus easily
transfer its data. Moreover, this one accepts the formulation of SQL queries directly in SQL
language, this makes it possible to test its queries and thus to save precious time.

Figure 20. Logo PhpMyAdmin

- Page 37 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

• WebStorm: is an IDE for web languages( HTML , CSS and JavaScript ), developed by the
company JetBrains and based on the IntelliJ IDEA platform. It offers advanced support for
Node.js and popular frameworks like Angular, React, Vue.js, Ionic, Cordova, React Native,
Meteor and Electron. WebStorm provides powerful built-in tools to easily debug, test and
trace your code in the “IDE”.

Figure 21. Logo WebStorm

• Visual Studio Code: Visual Studio Code (later VSC) is an open-source, free, extensible,
and cross-platform (Windows, Mac, and Linux) code editor developed by Microsoft. Their
features include support for debugging, syntax highlighting, smart code completion,
snippets, code refactoring, and Git integration.

Figure 22. Logo Visual Studio Code

• Postman: is the Collaboration Platform for API Development makes the development of
the API faster and easier. It allows you to test web services before calling them in the
application code. Its focus on API testing and It’s become very popular for testing Micro
services, notably thanks to its simplicity.

Figure 23. Logo Postman

- Page 38 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

• Git: is decentralized version management software that records file versions of a project at
times accurate over time in the form of snapshots. Online hosting solutions for Git projects
are hugely successful, but their use is often paid for hosting private projects.

Figure 24. Logo Git

• GitLab: is a collaborative development project manager. In particular, it includes a range

of tools aimed at facilitating the various aspects related to the development of an
application, which are code version management, collaboration between several
contributors, documentation and sharing of the project.

Figure 25. Logo GitLab

III.1.3. Languages and frameworks

A programming language, and a good manipulation of a framework makes the implementation

of the project perfect. In this part we will present the frameworks and the programming languages
used.

• Npm: is the official package manager for Node.js. It is the world's largest software registry.
It allows you to manage the dependencies for an application and to install Node.js
applications available on its repository.

Figure 26. Logo npm

- Page 39 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

• NestJs: Nest (NestJS) is a framework for building efficient, scalable Node.js server-side
applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet
still enables developers to code in pure JavaScript) and combines elements of OOP (Object
Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive
Programming).

Figure 27. Logo NestJs

• Angular 8: is intended to simplify the creation of progressive web applications. Angular is

a platform and framework for building single-page client applications using HTML and
TypeScript. It is written in TypeScript and implemented core and optional functionality as
a set of TypeScript libraries that you import into your apps.

Figure 28. Logo Angular

• Typescript: is a compiled and typed language that generates JavaScript which is

understandable by all browsers. TypeScript allows a type to be associated with an element
and prevents that element from changing his type. This provides code level stability, so it
is possible to anticipate the type of an element and its different possible values.

Figure 29. Logo TypeScript

• MySQL: It is a relational database management system (RDBMS). It is free and open

source software developed with a concern for high reading performance, which means that

- Page 40 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

it is more oriented towards the service of data already in place than to that of frequent and
highly secure updates. It is multithread and multi-user.

Figure 30. Logo MySQL

• TypeORM: is an ORM that can run in NodeJS, Browser, Cordova, Phone Gap, Ionic,
React Native, Native Script, Expo, and Electron platforms and can be used with TypeScript
and JavaScript (ES5, ES6, ES7 and ES8). Its goal is to always support the latest JavaScript
features and provide additional features that help you to develop any kind of application
that uses databases from small applications with a few tables to large scale enterprise
applications with multiple databases.

Figure 31. Logo TypeORM

III.2. Global architecture

An application architecture describes the patterns and techniques used to design and build an
application. The architecture gives you a roadmap and best practices to follow when building an
application, so that you end up with a well-structured app. Figure 32 illustrates the general
architecture adopted for our application.

- Page 41 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 32. General architecture of the solution

• Frentend: Covers the presentation layer based on Angular 8. Our application uses scripts
to ensure the communication with the backend part and it is based on the HTTP protocol
and JSON interchange format.

• Backend: covers the server side of the application developed by NestJs technology. This
technology ensures ease of data exchange whether with the MySQL database or the
ZKTeco device.

III.3. Realization

In this part we present screenshots of the application in order to illustrate the work done.

III.3.1 Authentication

The authentication phase is an important phase in securing the application. To be able to access
to the different functionalities of the application, the user must type his login and password in the
corresponding fields.

- Page 42 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Once he clicked on the ‘Signin button, the system checks the data entered. (c.f. Figure 32 )

Figure 33. Authentication interface

If this fails, the system displays an error message. If the login and password are accepted, the
system goes to the home page (c.f. Figure 33).

Figure 34. Home page

- Page 43 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

III.3.2 Personnel system management

Before managing company personnel, the user must describe and manage the company
departmental organization chart.

III.3.2.1 Department management interface

The user must define the company departmental organization chart as a first step. Upon first use
of the system, by default it has a primary department named “Primatec Engineering” which can be
modified but cannot be deleted.

In this interface (c.f. figure 34), user can consult the list of departments saved, add department
(c.f. figure 34 (a)), edit (c.f. figure 34 (b)), delete (c.f. figure34 (c)). Added to that, user can display
the list of departments with a tree view (c.f. figure 34(d)).

(d)
(a)

(b)
(c)

Figure 35. Department interface

III.3.2.2 Personnel management interface

When starting to use this management program, the user shall register personnel in the system
or import personnel information from a csv file.

- Page 44 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

In this interface (c.f. figure 35), user can consult the list of personnel saved, add personnel (c.f.
figure 35 (a)), edit (c.f. figure 35 (b)) and delete (c.f. figure 35 (c)). He can also adjust a department
(c.f. figure 35 (d)), import personnel information from a csv file (c.f. figure 35 (e)) or export data
from the data base to a csv file (c.f. figure 35 (f)).

To add a personnel, it is required to enter his card number in the corresponding field. This digit
corresponds to the authentication of the personnel’s RFID badge.

(a) (b) (c) (d) (e) (f)

Figure 36. personnel interface

III.3.3 Device management

Tthe connection of the access control panels to our application, provides access control system
function. To use these functions, the user must first install devices and connect them to the network.
Second, set correspending parameters in the system so as to manage these devices,…………..

III.3.3.1 Manage area interface

The concept of area is made to enable the user to manage devices in a specific area.

- Page 45 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

In this interface (c.f. figure 36), user can consult the list of areas saved, add area (c.f. figure 36
(a)), edit (c.f. figure 36 (b)), delete (c.f. figure 36 (c)). Added to that, user can display the list of
areas with a tree view (c.f. figure 36 (d)).

(d)
(a)

(b)
(c)

Figure 37. Area interface

III.3.3.2 Manage device

Normal communication between the device and our web application will be possible, only when
communication parameters and device settings are correct. That’s why the user must enter the
correct information in the specific fields to guarantee a good connection.

In this interface (c.f. figure 37), user can consult the list of devices saved, add new device (c.f.
figure 37 (a)), edit (c.f. figure 37 (b)) and delete device (c.f. figure 37 (c)).

- Page 46 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

(a) (b) (c)

Figure 38.Manage device interface

III.3.3.2.1 Test connection to the device

Before adding a new access control panel, the user must enter its IP address and press on “test
connection” button to inquire about the connection status between the web application and the
device. A pop-up displays whether the connection is established or failed.

Figure 39. Test connection

- Page 47 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

III.3.3.2.2 Enable/Disable device

The user clicks on “Enable/Disable” to start/stop using the device. If the user selects a device
and clicks on “Enable” button, the device will be enabled and the corresponding field will be
colored with green (c.f. figure 39 (a)) and if he clicks “disable” button, the device will be disabled
and the correspanding field will be colored with red (c.f. figure 39 (b)).

(b) (a)

Figure 40. Enable/disable device interface

III.3.3.2.3 Get time from device

When user selects a device and clicks on “Get time from device” button, a pop-up displays the
time in the device.

- Page 48 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 41. Get time from device interface

III.3.3.2.4 Get personnel information from device

To display the list of personnel registered in each device, and who have the access to open the
door assigned to this access control panel, the user must choose the device and click on the button
“Get personnel data from device”. (c.f.figure 41)

Figure 42. Get personnel information from device

- Page 49 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

III.3.3.2.5 Get attendance log file from device

The MA300-BT device is used to control access to the area which is done using an
electromagnetic cards. Each personnel has his own RFID card with which he can access to a
specific area than others. The access to the area is done is controlled and all the data relating to this
access ( person, date and time …) are automatically saved.

This interface dispalys the log file containin all data saved. All you have to do is to choose the
device and a table will be displayed containing the Ip address of the device chosen, the name of the
personnel and the date of their check-in.(c.f.figure 42).

Figure 43. Get attendance log file from device

III.3.3.2.6. Get latest attendance

This function allows the user to consult just the last person who checked in.(c.f.figure 43)

- Page 50 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Figure 44. Get latest attendance

III.3.3.2.7. Get Serial number

When adding a new device, it is required to enter its serial number.the user has two choices:
enter the serial number manually or get it from the device just by clicking on “Get serial number”
and the field will be automatically filled

Figure 45. Get serial number from device

- Page 51 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

General conclusion

This document is a presentation of the work carried out during our end-of-study internship at
“Primatec Engineering”.

Our mission is to develop a web application for the attendance of the employees in the company
and the management of all access control panels and standalone access control terminals. We
started by understanding the general context of the project and identifying the different system
requirements. We then opted for the Scrum agile work methodology to prioritize our tasks and
draw a clear and detailed work plan.

Despite the time constraints and the technical difficulties that we encountered which are mainly
summed up in the understanding of the subject and in the complexity of its architecture, the work
carried out was of considerable importance insofar as we were able to achieve an important part of
our identified objectives.

Our solution has allowed to highlight the gaps of the existing application to develop another
more interactive and effective. It offers several features to facilitate the attendance management
process. Indeed, it offers the possibility to make access control management easier and more
practical to improve efficiency and rapidity.

Thus, we approached the modeling of the proposed solution using the UML design
methodologies. Finally, we presented the implemented interfaces of the proposed web application.

This project enables us to showcase our theoretical and practical knowledge.

As prospects, we plan to extend our application’s functionalities such as company calendar,

request forms, absence management, work reports etc.…

- Page 52 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

Bibliography

[1]: MA300UserManualV2.0_20150108 by ZKTeco enterprise

[2]: Unified Modeling Language course by Mr. Slim KANOUN in 2019

[3]: Communication_protocol_manual_CMD by ZKTeco enterprise

[4]: Web development front-end course by Mr. Imene LAHYANI in 2019

Webography

[A]: Scrum methodology: https://www.scrum.org/resources/what-is-scrum (visited on 02-2020)

[B]: Unified Modeling Language: https://www.technopedia.com/definition/3243/unified-

modeling-language-uml (visited on 03-2020)

[C]: Use case diagram: https://en.wikipedia.org/wiki/Use_case (visited on 03-2020)

[D]: StarUML: https://en.wikipedia.org/wiki/StarUML (visited on 03-2020)

[E]: Node.js: https://en.wikipedia.org/wiki/Node.js (visited on 02-2020)

[F]: WampServer: https://en.wikipedia.org/wiki/WampServer (visited on 02-2020)

[G]: PhpMyAdmin: https://www.phpmyadmin.net/ (visited on 02-2020)

[H]: WebStorm: https://en.wikipedia.org/wiki/JetBrains#WebStorm (visited on 02-2020)

[I]: Visual Studio Code: https://en.wikipedia.org/wiki/Visual_Studio_Code (visited on 02-2020)

[J]: Postman: https://www.geeksforgeeks.org/introduction-postman-api-development/ (visited on

03-2020)

[K]: Git: https://en.wikipedia.org/wiki/Git (visited on 03-2020)

[L]: GitLab: https://docs.gitlab.com/ee/user/index.html (visited on 03-2020)

[M]: Npm: https://www.w3schools.com/whatis/whatis_npm.asp (visited on 02-2020)

[N]: NestJs: https://docs.nestjs.com/ (visited on 02-2020)

- Page 53 / 54 -
ZKT ATTENDANCE APPLICATION Jihen Hmaier

[O]: Angular 8: https://www.javatpoint.com/angular-8-architecture (visited on 02-2020)

[P]: TypeScript: https://en.wikipedia.org/wiki/TypeScript (visited on 02-2020)

[Q]: MySQL: https://searchoracle.techtarget.com/definition/MySQL (visited on 02-2020)

[R]: TypeORM: https://typeorm.io/ (visited on 02-2020)

[S]: Sequence diagram: https://en.wikipedia.org/wiki/Sequence_diagram (visited on 03-2020)

[T]: Class diagram: https://en.wikipedia.org/wiki/Class_diagram (visited on 03-2020)

[U]: node_zklib: https://www.npmjs.com/package/zklib (visited on 04-2020)

- Page 54 / 54 -