2021 / 2022

SPECIALTY : TWIN

SUBJECT OF THE INTERNSHIP REPORT:

Design and implementation of a time tracking and leave
management application
Realized by: Yassine Bayoudh

Supervised by:

Esprit Supervisor: Miss Salma Sayeh

Company Supervisor: Mr. Ahmed Habbachi

 Testimonials
As a token of love assignment and recognition I dedicate this work

To My Father

Who made master in me the love of work and desire to dedicate myself in
order to bring the best of me.

To My mother

Who surrounded me with her love, her assignment and who never ceases to
sacrifice herself for the good of her children

To my sisters

Who have always encouraged me to reach my goals

To me Case Tunisia Team members

Who helped me through my journey and made me increases my capacities

and defeat challenges

Yassine
 TABLE OF CONTENT
CHAPTER 1: SATE OF ART ................................................................................................................... 2
INTRODUCTION ......................................................................................................................................... 2
1.1. Presentation of the host organization .......................................................................................... 2
1.2. Problematic ................................................................................................................................... 3
1.3. Study and criticism of the existing ................................................................................................ 3
1.3.1. Analysis of Jira ....................................................................................................................... 3
1.3.2. Analysis of Gitlab ................................................................................................................... 4
1.4. Proposed solution.......................................................................................................................... 4
1.5. Adopted methodology .................................................................................................................. 5
1.5.1. Choice of the Methodology ................................................................................................... 5
1.5.2. SCRUM Presentation ............................................................................................................. 5
1.5.3. SCRUM Roles ......................................................................................................................... 6
CONCLUSION ............................................................................................................................................. 6
CHAPTER 2: PROJECT SCOPE AND PLANNING...................................................................................... 7
INTRODUCTION ......................................................................................................................................... 7
2.1. Capturing the needs ...................................................................................................................... 7
2.1.1. Identifying actors ................................................................................................................... 7
2.1.2. Identification of Project Needs.............................................................................................. 7
2.1.2.1. Functional requirements ............................................................................................... 7
2.1.2.2. Non-Functional requirements ....................................................................................... 8
2.2. Project management with scrum .................................................................................................. 8
2.2.1. Backlog functionalities........................................................................................................... 9
2.2.2. Global use case diagram ...................................................................................................... 11
2.2.3. Sprint Planning .................................................................................................................... 12
2.2.4. Interface Prototypes ............................................................................................................ 12
2.3. Work environment ...................................................................................................................... 14
2.3.1. Hardware environment ....................................................................................................... 14
2.3.2. Development environment ................................................................................................. 14
2.3.3. Software Environment......................................................................................................... 15
 2.4. GENERAL SYSTEM ARCHITECTURE .............................................................................................. 17
2.4.1. Physical System Architecture .............................................................................................. 17
2.4.2. Logical System Architecture ................................................................................................ 17
CONCLUSION ........................................................................................................................................... 18
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE ......................................................... 19
INTRODUCTION ....................................................................................................................................... 19
3.1. SPRINT 1 BACKLOG ...................................................................................................................... 19
3.1.1. Functional specification ....................................................................................................... 19
3.1.2. identity server ..................................................................................................................... 19
3.1.3. Authentication and Authorization ....................................................................................... 20
3.1.4. Use case diagram ................................................................................................................. 20
3.1.5. Textual description of use cases.......................................................................................... 21
3.1.5.1. Use Case “Authentication” .......................................................................................... 21
3.1.5.2. Use Case “Edit Profile .................................................................................................. 22
3.1.5.3. Use Case “Search Users” ............................................................................................. 23
3.1.6. Modeling and designing ...................................................................................................... 23
3.1.6.1. The Sequence Diagram ................................................................................................ 24
3.1.6.2. Authentication Use Case Sequence Diagram .............................................................. 24
3.1.6.3. Edit Profile Use Case Sequence Diagram..................................................................... 26
3.1.6.4. Search Client Use Case Sequence Diagram ................................................................. 26
3.1.6.5. Sprint 1Class Diagram .................................................................................................. 27
3.1.7. Implementation ................................................................................................................... 29
3.1.7.1. Login Interface ............................................................................................................. 29
3.1.7.2. Users List Interface ...................................................................................................... 30
3.2. SPRINT 2 BACKLOG ...................................................................................................................... 32
3.2.1. Functional specification ....................................................................................................... 32
3.2.2. Use cases diagrams.............................................................................................................. 32
3.2.3. Textual description of use cases .......................................................................................... 33
3.2.3.1. Use case “Add Tasks” .................................................................................................. 33
3.2.3.2. Use Case “Project Manage Teams” ............................................................................. 34
3.2.3.3. Use Case “Synchronize With Gitlab” ........................................................................... 34
3.2.4. Modeling and designing ...................................................................................................... 35
 3.2.4.1. Add Task Sequence Diagram ....................................................................................... 35
3.2.4.2. Manage Project Members Sequence Diagram ............................................................ 36
3.2.4.3. Delete Task Type Sequence Diagram .......................................................................... 37
3.2.4.4. Sprint 2 Class Diagram ................................................................................................. 38
3.2.5. Implementation ................................................................................................................... 39
3.2.5.1. Tasks Interface ............................................................................................................. 39
3.2.5.2. Add new Task Form Interface ...................................................................................... 39
3.2.5.3. Projects Interface ........................................................................................................ 41
CONCLUSION ........................................................................................................................................... 42
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE ..................................................... 43
INTRODUCTION ....................................................................................................................................... 43
4.1. SPRINT 3 BACKLOG ...................................................................................................................... 43
4.1.1. FUNCTIONAL SPECIFICATION .............................................................................................. 43
4.1.2. USE CASES DIAGRAMS ......................................................................................................... 43
4.1.3. TEXTUAL DESCRIPTION OF USE CASE .................................................................................. 44
4.1.3.1. Use Case “Save Time Entry “ ....................................................................................... 44
4.1.4. MODELING AND DESIGNING ............................................................................................... 45
4.1.4.1. Add Time Entry Sequence Diagram ............................................................................. 45
4.1.5. IMPLEMENTATION............................................................................................................... 47
4.1.5.1. Entry Time Interface .................................................................................................... 47
4.1.5.2. Entry Time Interface “Add new Entry Time” ............................................................... 48
4.1.5.3. Entry Time Interface “Day View” ................................................................................. 49
4.2. SPRINT 4 BACKLOG ...................................................................................................................... 50
4.2.1. FUNCTIONAL SPECIFICATION .............................................................................................. 50
4.2.2. USE CASE DIAGRAM ............................................................................................................ 50
4.2.3. TEXTUAL DESCRIPTION OF USE CASES ................................................................................ 51
4.2.3.1. Use Case “Send Report by Email “ ............................................................................... 51
4.2.4. MODELING AND DESIGNING ............................................................................................... 51
4.2.4.1. Add Time Entry Sequence Diagram ............................................................................. 52
4.2.4.2. Sprint 4 Class Diagram ................................................................................................. 53
4.2.5. IMPLEMENTATION............................................................................................................... 54
4.2.5.1. Report Page ................................................................................................................. 54
 4.2.5.2. Email Report Form Page .............................................................................................. 55
4.2.5.3. Report In Excel Format ................................................................................................ 56
CONCLUSION ........................................................................................................................................... 56
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE ........................................................ 57
INTRODUCTION ....................................................................................................................................... 57
5.1. SPRINT 5 BACKLOG ...................................................................................................................... 57
5.1.1. FUNCTIONAL SPECIFICATION ..................................................................................... 57
5.1.2. USE CASE DIAGRAM ...................................................................................................... 57
5.1.2.1. Sprint 5 Use Case Diagram .......................................................................................... 57
5.1.3. TEXTUAL DESCRIPTION OF USE CASE ...................................................................... 59
5.1.3.1. Use case “Add Leave” .................................................................................................. 59
5.1.3.2. Use case “Deny Leave Request” .................................................................................. 59
5.1.3.3. Use case “Export Leaves Report” ................................................................................ 60
5.1.4. MODELING AND DESIGNING ....................................................................................... 60
5.1.4.1. Add Leave Request Sequence Diagram ....................................................................... 60
5.1.4.2. Leave Request State Change State Chart Diagram ...................................................... 61
5.1.4.3. Leave Request State Change State Chart Diagram ...................................................... 62
5.1.5. IMPLEMENTATION ......................................................................................................... 63
5.1.5.1. Calendar View.............................................................................................................. 63
5.1.5.2. Submit leave request form .......................................................................................... 64
5.1.5.3. Pending Requests and Leave Requests ....................................................................... 65
5.1.5.4. Leave Management Reporting .................................................................................... 65
5.1.5.5. Leave Type Management ............................................................................................ 66
5.2. SPRINT 6 BACKLOG ...................................................................................................................... 67
5.2.1. DOCKER............................................................................................................................. 67
5.2.1.1. Docker vs. Virtual Machine.......................................................................................... 67
5.2.2. CONFIGURING DEPLOYMENT PROCESS ................................................................... 67
5.2.2.1. Installing development environment .......................................................................... 68
5.2.2.2. Creation of DockerFile ................................................................................................. 68
5.2.2.3. Creation of docker-compose ....................................................................................... 69
5.2.3. CONFIGURING CI/CD PROCESS .................................................................................... 70
5.2.3.1. Creation of the pipeline ............................................................................................... 70
 CONCLUSION ........................................................................................................................................... 71
GENERAL CONCLUSION ...................................................................................................................... 1
 LIST OF FIGURES
Figure 1 : Track IT Global Use Case Diagram .......................................................................................... 11
Figure 2 : Sprints Plan ................................................................................................................................ 12
Figure 3 : Time Entry Interface Prototype .................................................................................................. 13
Figure 4 : Physical System Architecture ..................................................................................................... 17
Figure 5 : three-layer application diagram ................................................................................................ 17
Figure 6 : Authentication Use Case Diagram ............................................................................................. 20
Figure 7 : User Management Use Case Diagram....................................................................................... 21
Figure 8 : Authentication Sequence Diagram ............................................................................................. 25
Figure 9 : Edit Profile Sequence Diagram.................................................................................................. 26
Figure 10 : Search Client Sequence Diagram ............................................................................................ 27
Figure 11 : Sprint 1 Class Diagram ............................................................................................................ 28
Figure 12 : TrackIt login Page.................................................................................................................... 29
Figure 13 : Admin Manage Navbar ............................................................................................................ 30
Figure 14 : Users List Page ........................................................................................................................ 31
Figure 15 : Manage Project of a User Modal ............................................................................................. 31
Figure 16 : Admin Management Use Case Diagram .................................................................................. 33
Figure 17 : Add Task Sequence Diagram ................................................................................................... 35
Figure 18 : Manage Project Team Use Case .............................................................................................. 36
Figure 19 : Delete Task Type Sequence Diagram....................................................................................... 37
Figure 20 : Sprint 2 Class Diagram ............................................................................................................ 38
Figure 21 : Tasks View ................................................................................................................................ 39
Figure 22 :Add new Task Form .................................................................................................................. 40
Figure 23 : Project Team management ....................................................................................................... 41
Figure 24 : Time Tracking Use Case Diagram ........................................................................................... 44
Figure 25 : Add time Entry Sequence Diagram .......................................................................................... 46
Figure 26 : Week View Entry Time ............................................................................................................. 47
Figure 27 : Add new Entry time .................................................................................................................. 48
Figure 28 : Entry Time Day View ............................................................................................................... 49
Figure 29 : Generate Report Use case Diagram ........................................................................................ 50
Figure 30 : Generate Report Sequence Diagram........................................................................................ 52
Figure 31 : Sprint 4 Class Diagram ............................................................................................................ 53
Figure 32 : Report page .............................................................................................................................. 54
Figure 33 : Email Report Form Page ......................................................................................................... 55
Figure 34 : Report in Excel Format ............................................................................................................ 56
Figure 35 : Sprint 5 Use Case ..................................................................................................................... 58
Figure 36 : Add Leave Request Sequence Diagram .................................................................................... 61
Figure 37 : Leave Request State Chart Diagram ........................................................................................ 62
Figure 38 : Leave Management Class Diagram ......................................................................................... 62
Figure 39 : Calendar View Interface .......................................................................................................... 63
Figure 40 : Leave Request submit form ...................................................................................................... 64
Figure 41 : Pending and Current Leave Requests ...................................................................................... 65
Figure 42 : Leave Report ............................................................................................................................ 66
Figure 43 : Leave Type View ...................................................................................................................... 66
Figure 44 : Leave Type Edit Form .............................................................................................................. 66
Figure 45 : deployment process .................................................................................................................. 68
Figure 46 : CI/CD pipeline visualization .................................................................................................... 71
Figure 47 : Deployment Diagram ............................................................................................................... 71
 LIST OF TABLES
Table 1 : Project Actors ................................................................................................................................ 9
Table 2 : Product backlog ........................................................................................................................... 10
Table 3 : Hardware Environment................................................................................................................ 14
Table 4 : 1st Sprint's Backlog...................................................................................................................... 19
Table 5 : Textual Description of User Authentication ................................................................................ 22
Table 6 : Textual Description of Edit Profile Use Case .............................................................................. 23
Table 8 : Textual Description of Search Entity Use Case ........................................................................... 23
Table 9 : 2nd sprint backlog........................................................................................................................ 32
Table 10 : Add Tasks Use Case Textual Description .................................................................................. 34
Table 11 : Project Manage Teams Use Case Textual Description ............................................................. 34
Table 12 : Synchronize with Gitlab Use Case Textual Description ............................................................ 35
Table 13 : Sprint 3 Backlog ......................................................................................................................... 43
Table 14 : Save Time Entry Textual Description ........................................................................................ 45
Table 16 : sprint 4 backlog.......................................................................................................................... 50
Table 18 : Send Report By Email Textual description ................................................................................ 51
Table 19 : Sprint 5 Backlog ......................................................................................................................... 57
Table 20 : Add leave Textual Description ................................................................................................... 59
Table 21 : Deny Leave Request Textual Description .................................................................................. 60
Table 22 : Export Leaves Report Textual Description ................................................................................ 60
Table 23 : Difference between Docker and VM .......................................................................................... 67
CHAPTER 1: SATE OF ART

GENERAL INTRODUCTION
In an industrial environment determined by fierce competition, the company is found
more than in the past, in the obligation to respect the requirements of productivity, quality, cost
and time. To maintain this balance, it seeks to return all existing distortions to the system of its
work, moving from the principle that any problem is an opportunity for improvement.

From an economic point of view, time management within companies is of enormous importance
in the interests of industrial enterprises. This operation, which is cumbersome in terms of human
resources, represents a vital artery for these companies that seek to best meet the demands of
customers.

In all fields companies seek to improve the management of their activities through computer tools
(website, mobile application) to ensure a potential and large clientele, which would help their
business to grow.

In this context, our graduation project is taking place at “Ecole Sup Privée d'Ingénierie et de
Technologies” (ESPRIT). Our project consists in designing and implementing a web application
dedicated to time tracking and vocation scheduling for employees.

This project is proposed by the company «CASE TUNISIA» and with the aim of enriching our
theoretical computer knowledge acquired throughout our educational journey as well as discovers
the professional field.

This manuscript is organized into five chapters. The first chapter, entitled general introduction of
the project, will be devoted to the description of the host organization and our project, studying
the possible problems while proposing our solution. In the second chapter, entitled Planning and
architecture, we define the Backlog of our product, and we present an architectural and
conceptual overview of our application. We will also present the tools and technologies used to
develop our solution.

The following chapters focus on the study and implementation of the various sprints of our
project, outlined in the previous chapter. In each sprint, we start with the current Sprint Backlog
which describes the tasks to be done and then we present the class diagram and sequence
diagrams. In the latter, we will expose our work through screenshots without forgetting the test
and validation part. Finally, we conclude this report with a general conclusion in which we
evaluate our solution and the objectives achieved, and we present the possible perspectives of our
application.

1
Yassine Bayoudh
CHAPTER 1: SATE OF ART

CHAPTER 1: SATE OF ART

INTRODUCTION
In this chapter, we present the company CASE Tunisia in which we performed our
internship. The latter also includes the presentation of our project including the study of
the existing and the proposed solution.

1.1. Presentation of the host organization

Historically, Chouikha Automation and System Engineering Tunisia SUARL, in brief
CASE Tunisia was founded in 2006 with the aim of developing individual software using
the most advanced technologies and development methods. Its headquarters are in Sousse,
a senior employee of CASE DEUTSCHLAND, and Braunschweig. It is exclusively active
for international markets which is also anchored solidly in legally chosen form and its
customs status (Company fully Exporter). The company’s activities are based in particular
on development and maintenance of software for PC and PDA (laptops) in the industrial
sector automation. The versatility and skills of the CASE Tunisia team give flexibility to
the company touching with a variety of services and multiple areas that are:

 Software Development Service

Development and design of applications according to specifications, custom
development and subcontracting projects.

 Web Development Service

Showcase sites, responsive design, turnkey solutions (based on CMS), specific
developments.

 Mobile Development Service

Mobile application adapted to the majority of platforms on the market android, IOS,
Windows phone, Black Berry.

 Software Development Department engaged

Design and develop embedded electronic and IT systems, develop real-time
applications.

2
Yassine Bayoudh
CHAPTER 1: SATE OF ART

 Service Upgradeable and corrective maintenance

Monthly backups, regular update of the CMS and these plug-ins/modules, change of
passwords (for security reasons).

 Hosting and Support Service

Domain name, hosting space, SSL certificate, VPS server configuration, outsourcing.

1.2. Problematic
A time tracker is a simple solution that can help you solve your employee productivity
and time organization problems. A time tracker app and time tracking tools help you keep
your entire team aligned with the project and with each other’s schedule but tracking time
softwares can sometimes be hard to use and complicated for many employees. First of all,
they end up not using them and forget to track their time so that can cause problems such
as decreasing capacity management, communication progress and time saving. Second of
all many other apps doesn’t remind users with their tasks and time tracking which is a big
disadvantage .Last of all those apps only focus on two things which are tasks and projects
perhaps they need to expand their options to many other management modules.

1.3. Study and criticism of the existing

The study of the existing is the heart of the analysis phase of a project. This step is
essential for the start of any IT or other project. It allows defining the operating context,
or the business process. In addition to this, it exposes the various imperfections in the
current system in order to correct them. There are several solutions I can mention and
most of them can serve the need but those applications are missing some features or they
can be complicated so in this section I will focus on two solutions.

1.3.1. Analysis of Jira

First there is Jira, we all know that Jira is used by many companies to manage their
work and projects but like any other application Jira has some cons which are the
following:

 The tool is hard to set up and get used to.

 It’s complicated user interface can make managing tasks difficult.
3
Yassine Bayoudh
CHAPTER 1: SATE OF ART

 No built-in timeline to track your project progress.

1.3.2. Analysis of Gitlab

Second, there is Gitlab which is web application that can serve many purposes such
as version management which is the main idea of it and also task and project
management which is too much easier comparing to Jira but the problem with Gitlab
is that tacking time is complicated it only works with command-line which is not
optimazable for a company to use.

1.4. Proposed solution

To remedy the shortcomings already mentioned in the previous paragraph, we propose as
a solution, the design and development of an application called “Track-it” so it’s a simple,
easy to use web-based Time Tracking and Vocation Scheduling system. Use it to track
time for yourself, your team, your project or your company. Track-it allows for tracking
the time by Clients, Projects and Tasks and to allow Case Tunisia employees to track their
tasks for a specific project in order to make the manager supervision easier and work
more organized and it also meets the same requirements as the Jira, Wrike and a part of
Gitlab application. In addition to this, it adds the new features such as:

 Vocation scheduling

 Synchronizing tasks and projects with Gitlab

 Manage Gitlab time tracking through a UI

 The mailing service

 Reports Generation

 System alerts;

 Advanced Filtering and searching

 Improved interface and security.

4
Yassine Bayoudh
CHAPTER 1: SATE OF ART

1.5. Adopted methodology

Before a computer project is carried out, it is necessary to choose a working methodology
and a follow-up process in order to end up with reliable and quality software. The aim of
the latter is to formalize the initial steps in the development of an application and to
ensure that it remains faithful to the customer’s needs.

1.5.1. Choice of the Methodology

After having spent an experience of mini-projects, within our institution, using
Scrum as a development methodology, we adopt Scrum as a working methodology
throughout the course of our final project. The choice of the latter as a development
methodology for our project was also based on its advantages which can be
summarized as follows:

 More flexibility and responsiveness.

 The great ability to adapt to change through short iterations.
 The most important thing is that Scrum brings together both theoretical and
practical and is very close to reality.
 Ongoing product and process quality control.

Then we have the second design choice. To design our application, we chose UML as the
modeling language, thanks to its strengths and its various diagrams

1.5.2. SCRUM Presentation

SCRUM is an agile method whose development team focuses on achieving of a set
of functionalities in an iterative manner, following iterations of duration of two to
four weeks, called Sprints. A sprint ends with the delivery of a partial product.

Working with the Scrum methodology involves:

 Discern, in the first place, the maximum number of functionalities to be realized to

form the product backlog.
 In a second place, prioritize the identified functionalities. According to these
priorities, the functionalities are listed in iterations.

5
Yassine Bayoudh
CHAPTER 1: SATE OF ART

 Then, focus the development team iteratively on the set of features to be performed,
in iterations called Sprints.
 A Sprint ends with the delivery of a functional partial product called increment.

1.5.3. SCRUM Roles

Working with Scrum reveals different roles including:

 The Product Owner (PO) is a person who officially represents our client in a
Scrum project. He is the main contact for the Scrum Master and the members
of the development team. He defines the needs of the product and writes the
specifications. They can be assisted by functional people in writing the
specifications. It is also responsible for defining and prioritizing user stories
for each sprint.
 The Scrum master is a facilitator, a facilitator of the technical team. This
person is responsible for implementing the method and meeting its objectives.
This is not a Project Leader, but someone who is responsible for removing any
potential obstacles that would prevent the team and the project from advancing
during the various sprints.
 The development team includes the people responsible for achieving the sprint
and a usable product at the end of the sprint. These are the developers, the
architects, and the people who do the various tests. The team communicates
directly with the client.

CONCLUSION
In this chapter, we have presented the general framework of our project by identifying the
problem and proposing the solution envisaged to face the current situation. We have also
unveiled the development methodology that will be used throughout the next chapters in
this report.

The next chapter will be devoted to the study of functional and non-functional
requirements, the specification of the final product backlog and the preparation of the
schedule of our work.

6
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

CHAPTER 2: PROJECT SCOPE AND PLANNING

INTRODUCTION
In this chapter, we will present the planning and architecture adopted in our project. First of
all, we see the actors in our application. Then, we identify functional and non-functional
needs by detailing the work by the methodology chosen in the previous chapter. Finally, we
provide a brief overview of the hardware used, technologies and programming languages
used to implement our solution.

2.1. Capturing the needs

2.1.1. Identifying actors
« An actor represents the abstraction of a role played by external entities (user, hardware
device or other system) that interact directly with the system under study. »

In our application we discern three actors:

 Employee: anyone who works in the company. He can register his own
tasks, create leave requests, consult and edit his profile and consult his leaves
calendar.
 Administrator (Manager): is the person who holds the highest level
privilege. He is able to manipulate all the features offered by the application.
It also has the right to manage users and give them roles.

2.1.2. Identification of Project Needs

2.1.2.1. Functional requirements

« Functional requirements or use cases in terms of UML can be defined as "A use
case represents a set of sequences of actions performed by the system and producing
an observable result of interest to a particular actor. »

Our application must therefore satisfy the requirements of its various

protagonists. The following outlines their business needs as well as the non-
functional needs common to all users of the application.

7
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

Our System has a lot of features to define part of them are member’s features
and the other part is administrator so we can mention:

An Administrator can Manage Users, Projects Tasks and Leaves these

features define the models that the member can manipulate and use in order
to track their projects and leaves.Members are allowed to Track project and
tasks time in the time tracking interface they can also request leaves which
can be approved or denied by the admin.

2.1.2.2. Non-Functional requirements

« Non-functional requirement are requirements that are visible to the user, but
are not directly related to the behavior of the system. The non-functional
requirements of our application are as follows »

 Needs of a Network Environment: The application will need to operate in

Single Panel or Network mode.
 Security requirements: Access to the application is strictly reserved for
the data entry operator, access with login and password must be required at
the start of the application.
 Performance requirements: The aim is to optimize page loading time by
creating indexes and using good development practices.
 Portability and compatibility requirements: our application must be
portable on all software environments (Windows, Mac OS, and Linux).
 Documentation requirements: when delivering the application, we must
provide the necessary documentation for end users (administrator,
employee, etc.) as well as future developers.

2.2. Project management with scrum

In the following we present the different actors involved in the different phases of our project,
namely the Scrum team, the Product Owner and the Scrum Master. We present the roles, the
associated actors and their missions.

8
Yassine Bayoudh
 CHAPTER 2: PROJECT SCOPE AND PLANNING

Role Mission Actor

Scrum team  Conception

 Development
 Testing and Validation YASSINE BAYOUDH
 Deploying

Product
 Definition of the needs and functionalities to
Owner AHMED HABBACHI
And Scrum develop.
Master
 Project Validation

Table 1 : Project Actors

2.2.1. Backlog functionalities

The product backlog is an important concept in the Scrum methodology. It is the functional
and technical characteristics of the desired product. The functional characteristics are user
story and technical features are called technical story.

It should be mentioned here that the technical stories are excluded namely the technical
model, the design work and test sets, etc...

I present in the table that follows the Backlog of our application. Each user story is
characterized by a rank inferred from its previously explained priority. For the treatment of
our user stories, I have chosen to start with the highest priority use cases. Here I will explain
the meaning of the different terms used.

 Id that represents the user story identifier;

 Theme to better order user stories as example management tools;
 User Story includes descriptions of user stories in the form as... I want...”

9
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

Id Name User Story Theme Priority

1 Authentication As a simple user or administrator I want Authentication and
to login into the application.
Authorization High

2 User Management As an administrator I want to manage the Users management

application users.
Profile management High
As a simple user I want to manage my
profile.
3 Client Management As an administrator I want to manage Clients Management High
projects clients.
4 Project As an administrator I want to manage Projects Management High
projects.
Management
5 Task Type As an administrator I want to manage Task Types and Tasks low
task types.
Management Management
6 Task Management As an administrator I want to manage Task Types and Tasks
tasks and assign them to projects and
Management High
members.

7 Tags Management As an administrator I want to assign tags Tags Management

to projects.
low
8 Leave Management As a simple user I want to consult my Leave Management
leaves and leave requests.
High

9 Leave Type As an administrator I want to manage Leave Type

leave types
Management Management High

10 Leave Request As a simple user I want to request a leave. Leave Request

As an administrator I want to
Management Management High
Approve leave requests and consult them.

11 Time Entry As a simple user or administrator I want Time Entry

to register my tasks in the time entry
Management Management
calendar.
As an administrator I want to consult all High
members’ time entries.

12 Report As an administrator I want to generate Report Management High

reports based on many characteristics
Management
Table 2 : Product backlog

10
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

2.2.2. Global use case diagram

Figure 1 : Track IT Global Use Case Diagram

11
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

The figure above presents a complete view of the functional behavior of our application and this
by representing the interactions between our different protagonists and the cases of use of our
system.

Remarque: Every use case has CRUD operations I intentionally added management to the name
of the use cases to put that in place and make it clear to the reader.

2.2.3. Sprint Planning

A sprint planning meeting is established following the completion of the Product Backlog
specification stage.

Figure 2 : Sprints Plan

2.2.4. Interface Prototypes

In the field of the web, a technique has appeared and takes a very important place in
the development of Web applications; it is prototyping.

12
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

The second interface illustrates the leave calendar for the current connected user so basically a
user can see all his leave requests, leaves, and statistics and of course create a new leave
request. Admins basically can do the same, but only they can see pending leave requests
and eventually accept or deny a leave request

Figure 3 : Time Entry Interface Prototype

The above Interface represents the main feature of our application. In there you are able to
track your tasks by selecting the date when you want to track your task after selecting the
project , task and time within a form which will appear when you click on create new
entry and finally a task will be created and will be viewable in the calendar as presented

In this interface you are able to switch the view to days or weeks and filter time entries by
projects in order to make your search easier and effective.

13
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

2.3. Work environment

The development environment refers to the set of tools and languages used for the implementation of
our solution.

2.3.1. Hardware environment

For the development of our application, I used the following environment:

Asus Laptop
Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz 2.90 GHz Processor
NVidia GeForce920M Graphic Card
500GB SSD Hard Drive
Windows 10 Operation System
Table 3 : Hardware Environment

2.3.2. Development environment

The necessary technologies and tools to implement Track IT are the following:

ASP.NET Core (1) is the new version of the ASP.NET web framework mainly targeted to
run on .NET Core platform.ASP.NET Core is a free, open-source, and cross-platform
framework for building cloud-based applications, such as web apps, IoT apps, and mobile
backend. It is designed to run on the cloud as well as on-premises. Same as .NET Core, it
was architected modular with minimum overhead, and then other more advanced features
can be added as NuGet packages as per application requirement. This result in high
performance, require less memory, less deployment size, and easy to maintain.

Entity Framework Core (2) is the new version of Entity Framework after EF 6.x. It is open-
source, lightweight, extensible and a cross-platform version of Entity Framework data
access technology. Entity Framework is an Object/Relational Mapping (O/RM) framework.

Angular (3) is an open-source JavaScript MVC framework for the web applications. It
extends the HTML and makes it dynamic. Angular is used to create Single Page
Applications. These tutorials will help you learn the essentials of the latest version of
Angular 2, starting from the basics to the advanced level. These tutorials are broken down
into sections, where each section contains a number of related topics that are packed with
easy to understand explanations, real-world examples, useful tips, informative notes section.

14
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

SQL Server (4) is a relational database management system (RDBMS) by Microsoft. It

supports SQL along with additional features known as T-SQL or Transact-SQL. Microsoft
provides set of tools to manage local or remote SQL Server databases such as SSMS (SQL
Server Management Studio), SQL Server Agent, SQL Server Analysis Services, SQL Server
Reporting Services, SQL Server Integration Services, etc.

Type Script (5) is an open-source object-oriented language developed and maintained by

Microsoft, licensed under Apache 2 license. It is a typed superset of JavaScript that compiles
to plain JavaScript. Typescript was developed under Anders Hejlsberg, who also led the
creation of the C# language. Typescript was first released in October 2012.

Sass (6) (which stands for Syntactically Awesome Style Sheets) is an extension to CSS. It
doesn't really change what CSS can do, you won't suddenly be able to use Adobe Photoshop
blend modes or anything-but it makes writing CSS a whole lot quicker and easier.

Docker (7) is a software platform that allows you to build, test, and deploy applications
quickly. Docker packages software into standardized units called containers that have
everything the software needs to run including libraries, system tools, code, and runtime.
Using Docker, you can quickly deploy and scale applications into any environment and
know your code will run.

Git (8) is a free and open source distributed version control system designed to handle
everything from small to very large projects with speed and efficiency. It is easy to learn and
has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion,
CVS, Perforce, and Clear Case with features like cheap local branching, convenient staging
areas, and multiple workflows.

2.3.3. Software Environment

To implement our solution, we used a set of software that are the following:

Balsamiq Mockups (9) is a small software tool to sketch out user interfaces, for websites
and web / desktop / mobile applications. With this service users can quickly come up with
mockups and easily share them with their clients. Balsamiq Mockups is a graphical user

15
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

interface mockup builder application. It allows the designer to arrange pre-built widgets
using a drag-and-drop WYSIWYG editor.

Postman (10) is an application used for API testing. It is an HTTP client that tests HTTP
requests, utilizing a graphical user interface, through which we obtain different types of
responses that need to be subsequently validated. Postman offers many endpoint interaction
methods. The following are some of the most used, including their functions:

Microsoft Visual Studio (11) is an integrated development environment (IDE) from

Microsoft. It is used to develop computer programs, as well as websites, web apps, web
services and mobile apps. Visual Studio uses Microsoft software development platforms
such as Windows API, Windows Forms, Windows Presentation Foundation, Windows Store
and Microsoft Silverlight. It can produce both native code and managed code.

Visual Studio Code (12) is a distribution of the Code - OSS repository with Microsoft-
specific customizations released under a traditional Microsoft product license.Visual Studio
Code combines the simplicity of a code editor with what developers need for their core edit-
build-debug cycle. It provides comprehensive code editing, navigation, and understanding
support along with lightweight debugging, a rich extensibility model, and lightweight
integration with existing tools.

SQL Server Management Studio (13) (SSMS) is an integrated environment for managing
any SQL infrastructure, from SQL Server to Azure SQL Database. SSMS provides tools to
configure, monitor, and administer instances of SQL Server and databases. Use SSMS to
deploy, monitor, and upgrade the data-tier components used by your applications, and build
queries and scripts.

Docker Desktop (14) is an easy-to-install application for your Mac or Windows

environment that enables you to build and share containerized applications and
microservices. Docker Desktop includes Docker Engine, Docker CLI client, Docker
Compose, Docker Content Trust, Kubernetes, and Credential Helper.

Fork (15) gently informs you about GitHub notifications without being annoying. Resolve
your merge-conflicts easily using the merge-conflict helper and built-in merge-conflict
resolver. Edit, reorder and squash your commits using visual interactive rebase. Fork allows
you to see diffs for the common image formats. Fork's Diff Viewer provides a clear view to

16
Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

spot the changes in your source code quickly. With history view you can find all commits
where a particular file or directory was changed. With blame view you can find the last
commit which changed a particular file line.

2.4. GENERAL SYSTEM ARCHITECTURE

The term architecture is very broad. In fact, we distinguish between logical architecture, physical
architecture, software architecture, etc. Generally, the architecture of an application refers in a
simplified way to its various components, as well as their interrelationships.

2.4.1. Physical System Architecture

A physical architecture (16) is an arrangement

of physical elements (system elements and
physical interfaces) which provides the design
solution for a product, service, or enterprise,
and is intended to satisfy logical architecture
elements and system requirements. It is
implementable through technologies. (ISO/IEC
2010)

Figure 4 : Physical System Architecture

Our system gives the user the opportunity to view the data from our Customer application, first through
the security layer provided by the Identity Server. The latter is responsible for providing access to the
resource in the API to access the database and then returning the requested data to our client application.

2.4.2. Logical System Architecture

The combination of MVC architecture and

layered architecture can yield several
results. One of these results is the
architecture of our Asp.Net and Angular
application broken down as follows into
three layers «Data Access Layer»,
«Business Layer» and «Presentation
Layer».

Figure 5 : three-layer application diagram 17

Yassine Bayoudh
CHAPTER 2: PROJECT SCOPE AND PLANNING

 Business Objects - Entity(Data Transfer Objects) layer: .NET Core class library
 Data Access layer: .NET Core class library
 Business Logic layer: .NET Core class library
 Presentation Layer: Angular Application

CONCLUSION
In this chapter, I captured the functional and non-functional needs of our application as well as the
roles of the different actors. Then, we detailed the first step the methodology we have chosen,
namely the identification of the work team, the achievement of the product backlog and the list of
sprints. Subsequently, I presented the hardware and software environment I have used throughout
the development of our application. Then, I have clarified the architecture of our application. In
the next chapter, I will begin the development of the first identified sprint.

18
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

CHAPTER 3: STUDY AND IMPLEMENTATION OF

FIRST RELEASE

INTRODUCTION
This chapter aims to provide a deliverable, tested and deployed at the end of this sprint. Indeed, I
will show the realization of the first sprint divided into four stages: specification, design, coding,
testing and retrospective.

3.1. SPRINT 1 BACKLOG

The Scrum team must meet to define the goal of the sprint before starting it. This goal must be
defined in business terms so that it is understandable by members outside the team. It’s about
answering a fundamental question, “Why are we doing this sprint?”

The purpose of this sprint is to perform the authentication and user management module. Now is
the time to decide which stories from our Backlog will be included in the Sprint Backlog. The
estimates of the stories are defined in day.

ID HISTORY Time Estimation

1 Authentication 252 hours
2 User Management 336 hours
Table 4 : 1st Sprint's Backlog

3.1.1. Functional specification

In this section, we present the analysis phase that answers the question “what does our system
do?” The answer to this question is the presentation of the use cases diagram and then the textual
description of a few. Before delving into this part, we clarify the basics of the concept of «Identity
Server» which makes it possible to secure access to a Web API ASP.NET Core. This step is essential
to secure our application.

3.1.2. Identity server

Identity Server (17) is an authentication server that implements Open ID Connect (OIDC) and
Oath 2.0 standards for ASP.NET Core. It's designed to provide a common way to authenticate
requests to all of your applications, whether they're web, native, mobile, or API endpoints.
Identity Server can be used to implement Single Sign-On (SSO) for multiple applications and

19
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

application types. It can be used to authenticate actual users via sign-in forms and similar user
interfaces as well as service-based authentication that typically involves token issuance,
verification, and renewal without any user interface. Identity Server is designed to be a
customizable solution. Each instance is typically customized to suit an individual organization
and/or set of applications' needs.

3.1.3. Authentication and Authorization

Authentication refers to the process used to determine if a user is what they claim to be.
Once authenticated, the authorization determines what resources a given user should be able
to access and what they are allowed to do with those resources. (18)

3.1.4. Use case diagram

With Scrum, one of the interesting practices is to cut a story into a set of tasks. The difference
between a story and a task is a deliverable that interests the product manager. The following
figure shows the authentication use case diagram.

The User Management Use Case Diagram is shown in the figure below.

Figure 6 : Authentication Use Case Diagram

20
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Figure 7 : User Management Use Case Diagram

3.1.5. Textual description of use cases

To make our diagram of use cases more readable and to describe the behavior of a system,
the designers of UML propose the use of a technique called the textual description of use
cases.

In the rest of this part, we I will describe in textual form the use cases of the diagrams
above, but I will limit myself to a few.

3.1.5.1. Use Case “Authentication”

Title Authenticate

Actor Member

Pre-Condition Member/User already registered

Post-Condition Connected User

 The User enter website URL.

21
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

 The System generates the login page.

 The User enters his email and password
and clicks on the login button.
Normal Scenario
 The System verifies user credentials and
generates an access token and stokes it in
browser storage.
 System redirects user to calendar view.

 The User inputs wrong credentials

 The System verifies credentials , return
Fail Scenario
error message and displays it in the view
Table 5 : Textual Description of User Authentication

3.1.5.2. Use Case “Edit Profile

Title Edit Profile

Actor Member

Pre-Condition Member/User already connected

Post-Condition User profile information updated in the database

 The User enters his profile by clicking on

his icon in the sidebar.
 The System generates the profile page.
 The User clicks on edit profile and the
system displays the edit form.
 The User changes the edit form and clicks
Normal Scenario
save.
 The System verifies content and payload
and then saves the changes
 The system returns code status 200OK and
displays a success notification.

22
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

 The User leaves some required fields

empty.
Fail Scenario
 The System returns Error notification.
Table 6 : Textual Description of Edit Profile Use Case

3.1.5.3. Use Case “Search Users”

In each management page in our application we do have some advanced search using OData .In other
word, this use case does not only include users but other parts of the system which I will briefly present in
the next sections

Title Search Users

Actor Administrator

Pre-Condition Administrator already connected

Post-Condition Displays the list of searched users in the view

 The Administrator clicks on the

management navigation link and clicks on
members / clients / users.
 Depends on the search criteria the user
Normal Scenario writes down the search information.
 The system displays the list of the users /
members /client.
PS: The admin can add many searching and
filtering criteria.
 User does not have authority to access the
page
Fail Scenario
 Server Error code status 500.

Table 7 : Textual Description of Search Entity Use Case

3.1.6. Modeling and designing

Design is the second activity in a sprint. It translates into the sequence diagram, the participant class
diagram.

23
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.1.6.1. The Sequence Diagram

UML Sequence Diagrams (19) are interaction diagrams that detail how
operations are carried out. They capture the interaction between objects in the
context of collaboration. Sequence Diagrams are time focus and they show the
order of the interaction visually by using the vertical axis of the diagram to
represent time what messages are sent and when.

Sequence Diagrams captures:

 the interaction that takes place in a collaboration that either realizes a use
case or an operation (instance diagrams or generic diagrams)
 high-level interactions between user of the system and the system,
between the system and other systems, or between subsystems
(sometimes known as system sequence diagrams)

3.1.6.2. Authentication Use Case Sequence Diagram

To access the application, the user who may be an administrator, a maintainer, or
an employee must provide his login and password, the system will recognize him
as a user otherwise, if any information is erroneous, he will be denied access. Of
course the specified domain must be the user domain

24
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Figure 8 : Authentication Sequence Diagram

25
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.1.6.3. Edit Profile Use Case Sequence Diagram

Figure 9 : Edit Profile Sequence Diagram

3.1.6.4. Search Client Use Case Sequence Diagram

This sequence Diagram depicts the object and messages scenarios of the search
client use case which describes the process which a client writes down the search
criteria and eventually the system displays the result if everything went without any
errors.

26
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Figure 10 : Search Client Sequence Diagram

3.1.6.5. Sprint 1Class Diagram

In software engineering, a class diagram (20) in the Unified Modeling Language (UML)
is a type of static structure diagram that describes the structure of a system by showing the
system's classes, their attributes, operations (or methods), and the relationships among
objects.

 Purpose of Class Diagrams

 Shows static structure of classifiers in a system
 Diagram provides a basic notation for other structure diagrams prescribed by
UML
 Helpful for developers and other team members too

27
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

 Business Analysts can use class diagrams to model systems from a business
perspective
Throughout our sprints, I try to build this diagram as I go along with adding the different classes
deduced. I will present in the following our class diagram relating to this sprint.

Figure 11 : Sprint 1 Class Diagram

28
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.1.7. Implementation
In this part, I will present some screenshots of different interfaces that were developed during
this sprint.

3.1.7.1. Login Interface

Once the application is loaded the user will navigate to the login page unless they
have already logged in.

This is entry page to our application, so every user must authenticate with his
email and password in order to access the features of our application and
eventually will receive a jwt token to keep him logged in until he decides to logout
or his session expires.

Once authenticated, the user and according to his rights will have the possibility to
do several tasks that we will describe them in the following.

Figure 12 : TrackIt login Page

29
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.1.7.2. Users List Interface

Through its space, the administrator has the possibility to add a user. It fills in the
various fields of the addition form and assigns a role to this user.

During validation, and if the fields are not empty, a confirmation message will be
displayed and the user will be added to the list and be able to login to his account.

In the following figure is the “Manage” link in the navbar only a user with role
admin is able to see that navigation link. Thus, the user clicks on the user’s link
and it will take him to the page like figure 41 illustrates.

Figure 13 : Admin Manage Navbar

In this page we are looking to the users list I highlighted the different parts to explain which each
one represent:

 The blue area represents the link to open a new modal to add a new user which I will
represent in figure 42.
 The red area represents which view you want to select which are 2 (Active Users, Inactive
Users).
 The green area in a link where you can manage projects users.

30
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Figure 14 : Users List Page

Figure 15 : Manage Project of a User Modal

31
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

The last figure of this page will be the” project management of a user” interface which allows
the admin to add a project to users so they can only work on the project assigned to them.

 The green area represents a search bar where the admin search in the list of available
projects
 The blue area represent the projects that already been assigned to that user. The admin has
the possibility to change the user’s access level and delete him from the project.
 The red area is the list of projects that an admin can assign to a user.

3.2. SPRINT 2 BACKLOG

The purpose of this sprint is to perform the different features that an admin can do which are the
management features. Now is the time to decide which stories from our Backlog will be included in
the Sprint Backlog. The estimates of the stories are defined in day.

ID HISTORY Time Estimation

1 Projects Management 252 Hours
2 Tasks Management 336 Hours
3 Task Types Management 84 Hours
4 Tags Management 70 Hours
Table 8 : 2nd sprint backlog

3.2.1. Functional specification

In the next section, again I present the analysis phase that answers the question “what does our
system do?” The answer to this question is the presentation of the use cases diagram and then the
textual description of a few like I did in the previous section.

3.2.2. Use cases diagrams

32
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Figure 16 : Admin Management Use Case Diagram

3.2.3. Textual description of use cases

3.2.3.1. Use case “Add Tasks”

Title Tasks Management

Actor Admin

Pre-Condition Admin already registered

Post-Condition Added Task

 The Admin enters tasks manage page.

 The Admin clicks on add new tasks
 The Admin fills the fields with valid
Normal Scenario
information.
 The Admin clicks on create.

33
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

 The server adds the task in the database.

Fail Scenario  The Admin inputs invalid information.
 Server error.
Table 9 : Add Tasks Use Case Textual Description

3.2.3.2. Use Case “Project Manage Teams”

Title Project Manage Teams

Actor Admin

Pre-Condition Admin already registered

Post-Condition Added / Remove Project Member

 The Admin enters projects manage page.

 The Admin clicks on existing project.
 The Admin chooses which team member
Normal Scenario
belongs to the project and add him from the
list.
 The server updates the changes in the
database.
Fail Scenario  Server error.

Table 10 : Project Manage Teams Use Case Textual Description

3.2.3.3. Use Case “Synchronize With Gitlab”

Title Synchronize With Gitlab

Actor Admin

Pre-Condition Admin already registered

Post-Condition Task Synchronized with Gitlab

 The Admin enters tasks manage page.

 The Admin clicks on existing task or create
a new one.

34
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

Normal Scenario  The Admin writes Gitlab issue Id and

submit the form.
 The server calls Gitlab API and
synchronizes the task with the issue.
Fail Scenario  Server error.

Table 11 : Synchronize with Gitlab Use Case Textual Description

3.2.4. Modeling and designing

3.2.4.1. Add Task Sequence Diagram

This Diagram illustrates the basic course of action of the “Add Task” use case.
Note how are we using the Gitlab API to synchronize the task with Gitlab issue
so, this diagram goes with synchronize with Gitlab use case as well.

Figure 17 : Add Task Sequence Diagram

35
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.2.4.2. Manage Project Members Sequence Diagram

Figure 18 : Manage Project Team Use Case

36
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.2.4.3. Delete Task Type Sequence Diagram

Figure 19 : Delete Task Type Sequence Diagram

37
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.2.4.4. Sprint 2 Class Diagram

Figure 20 : Sprint 2 Class Diagram

38
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.2.5. Implementation
In this part I will present screenshots of various interfaces developed during this sprint.

3.2.5.1. Tasks Interface

Once the admin is connected he is capable of managing every aspect of the application, first
of all we have the tasks view as presented in the following screenshot.

Figure 21 : Tasks View

In this page we have 3 main sections:

 The blue area represents the data in a data table so by convention our data is sortable by
any column of the user’s choosing for example, if he clicks on the little triangle next to
the column name the data will change order.
 The red area is for toggling between archived tasks and unachieved tasks (closed tasks).
 The green area is where the admin can perform different actions on the row which can
update, delete or archive the task and mark it as closed.
 A search bar is also provided to perform advanced searching mechanism.
 The create new task button is for as name saying, which is a form that I will represent in
the next point.

3.2.5.2. Add new Task Form Interface

39
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

The Create new task form is a form that can be called 2 times, which are when clicking on
the button create new tasks and when editing a task that’s when it appears again filled with
information of the clicked row.

Figure 22 :Add new Task Form

40
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

3.2.5.3. Projects Interface

This module provides various features for configuration and managing related entities.

First of all I will show the team management component.

Figure 23 : Project Team management

This interface is for controlling project team members and controlling their roles inside a
project.

This action can be also being done in the user’s management.

41
Yassine Bayoudh
CHAPTER 3: STUDY AND IMPLEMENTATION OF FIRST RELEASE

CONCLUSION
In this chapter, I presented the first Release through the analysis, the design, and the realization of
2 sprints User management & Authentication and Admin Management Module without forgetting
the test part. In the next chapters, we reveal the features of the rest of releases.

42
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

CHAPTER 4: STUDY AND IMPLEMENTATION OF

SECOND RELEASE

INTRODUCTION
In this release I’ll be focusing on 2 main sprints. The first sprint is a deliverable of the time
tracking module which is the base feature of trackIt. The second sprint is definitely no less
important than the first one which is the report generating of all time tracking.

4.1. SPRINT 3 BACKLOG

The purpose of this sprint is to create the time tracking module. Now is the time to decide which
stories from our Backlog will be included in the Sprint Backlog. The estimates of the stories are
defined in day.

ID HISTORY Time Estimation

1 Time Tracker 1460 Hours
Table 12 : Sprint 3 Backlog

4.1.1. FUNCTIONAL SPECIFICATION

In the next section, again I present the analysis phase that answers the question “what does
our system do?” The answer to this question is the presentation of the use cases diagram
and then the textual description of a few like I did in the previous section.

4.1.2. USE CASES DIAGRAMS

In this section of the report I will represent the use case diagram used during this sprint in
order to understand better of what our system is composed and the various features and
aspects of this sprint.

43
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

Figure 24 : Time Tracking Use Case Diagram

4.1.3. TEXTUAL DESCRIPTION OF USE CASE

4.1.3.1. Use Case “Save Time Entry “

Title Save Time Entry

Actor Any User

Pre-Condition User already Authenticated

Post-Condition Added time Entry

 The User enters Time Entry calendar page.

 The User clicks on add new time Entry
 The User select the project, task and write
Normal Scenario
the time from...to which hour.
 The server adds the task in the database.
Fail Scenario  Time Entry Already Exists.

44
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

 Time Entry Project Locked.

 Time Entry total time per day is not greater
than 24hours
 Server Error

Table 13 : Save Time Entry Textual Description

4.1.4. MODELING AND DESIGNING

In this section I will present the diagram that describes the scenario of inserting a new time entry.

4.1.4.1. Add Time Entry Sequence Diagram

This diagram represents the scenario of the Add Time Entry and the process and
interaction between the different actors.

45
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

Figure 25 : Add time Entry Sequence Diagram

46
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

In conclusion our system does the following to add a new time entry:
 Check if exists related entities.
 Check Lock Time Entries: User cannot Create Time Entry, if enable Lock Time Entry in
Project settings.
 Check correct timing values from TimeEntryView.
 Check that total time per day is not greater than 24 hours.
 Update values for Time Entry.

4.1.5. IMPLEMENTATION
In this part I will present screenshots of various interfaces developed during this sprint.

4.1.5.1. Entry Time Interface

Figure 26 : Week View Entry Time

 The red area allows the user to filter the page based on projects.

 The green area represents the view of the calendar as show in (figure 58).

 The purple area is the tasks duration of all tasks of every user in every project.

 The main page contains a calendar where you can view your entry time and add new ones

as shown in (figure 57)

47
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.1.5.2. Entry Time Interface “Add new Entry Time”

Figure 27 : Add new Entry time

 The red area is where you can choose the project you’re working on and then select one of

the tasks assigned to that project.

48
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

 The green area represents the time taken to finish a task it’s either manually where you

write the start time and the end time or you can start a runner and finishes when you click

it again.

 The yellow area is the time taken ( the difference between hours)

 The purple area is the estimation time (the estimation time is set when a task is created).

4.1.5.3. Entry Time Interface “Day View”

Figure 28 : Entry Time Day View

You can track a single or multiple tasks by viewing the day layout where it contains minimum of
information you can still filter by projects as well.

49
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2. SPRINT 4 BACKLOG

The purpose of this sprint is to create the time tracking report generation module. Now is the time
to decide which stories from our Backlog will be included in the Sprint Backlog. The estimates of
the stories are defined in day.

ID HISTORY Time Estimation

1 Report Generation 500 Hours
Table 14 : sprint 4 backlog

4.2.1. FUNCTIONAL SPECIFICATION

In the next section, again I present the analysis phase that answers the question “what does our
system do?” The answer to this question is the presentation of the use cases diagram and then the
textual description of a few like I did in the previous sections.

4.2.2. USE CASE DIAGRAM

Figure 29 : Generate Report Use case Diagram

50
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2.3. TEXTUAL DESCRIPTION OF USE CASES

4.2.3.1. Use Case “Send Report by Email “

Title Send Report to specific email

Actor Admin

Pre-Condition User already Authenticated

Post-Condition Email sent

 The User enters Report page.

 The User clicks on send email
 The system displays a form to enter email
Normal Scenario
information
 The User fills the fields and clicks send
 The system an email with an attached
report
 Email is not correct
 Required fields are not filled
Fail Scenario
 Server Error
Table 15 : Send Report By Email Textual description

4.2.4. MODELING AND DESIGNING

51
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2.4.1. Add Time Entry Sequence Diagram

Figure 30 : Generate Report Sequence Diagram

52
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2.4.2. Sprint 4 Class Diagram

Figure 31 : Sprint 4 Class Diagram

53
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2.5. IMPLEMENTATION
In this section I will present the end result of our report generation module.

4.2.5.1. Report Page

Figure 32 : Report page

The report page contains 4 main sections which allow us to control and visualize the report before
downloading it.

 The Red area is a feature to allow the user to create new query criteria to filter the report
page and get the exact desired result.

54
Yassine Bayoudh
CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

 The Purple area is the actions that can be made on this page. The first element is a
dropdown for months, weeks and days. The second element opens a form to send the
report to an email. The third element is a button to export the report the excel file. And
last but not least the admin can print the report.
 The green area contains some dropdown to control the page visualization.
 The Blue area is the pre-visualization of the report to export, of course when the admin
exports the report, it will consider all the settings and filters applied on the page.

4.2.5.2. Email Report Form Page

55
Yassine Bayoudh

Figure 33 : Email Report Form Page

CHAPTER 4: STUDY AND IMPLEMENTATION OF SECOND RELEASE

4.2.5.3. Report In Excel Format

Figure 34 : Report in Excel Format

As shown in figure 63 we can notice that the generated excel table is the same as the table we have seen in
figure 61.The generated table is depended on what the user has selected as settings and filters.

CONCLUSION
In this chapter, I presented the second Release through the analysis, the design, and the realization
of 2 sprints Time tracking module and reporting module. In the next chapters, we reveal the
features of the rest of releases.

56
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

CHAPTER 5: STUDY AND IMPLEMENTATION OF

THIRD RELEASE

INTRODUCTION
In this release I’ll be focusing on 2 last sprints of our application. The first sprint is a deliverable
of the leave management module. The second sprint we will take a look on the deployment
process of track it.

5.1. SPRINT 5 BACKLOG

The purpose of this sprint is to create the time tracking module. Now is the time to decide
which stories from our Backlog will be included in the Sprint Backlog. The estimates of the
stories are defined in day.

ID HISTORY Time Estimation

1 Leave management 1460 H
Table 16 : Sprint 5 Backlog

5.1.1. FUNCTIONAL SPECIFICATION

In the next section, again I present the analysis phase that answers the question “what does
our system do?” The answer to this question is the presentation of the use cases diagram
and then the textual description of a few like I did in the previous section.

5.1.2. USE CASE DIAGRAM

5.1.2.1. Sprint 5 Use Case Diagram

In this part I will reveal the class Diagram of the 5th sprint which is an important use
case because it represents a valuable module in the application. It is where
employees have the ability to ask for leaves by following a process proposed by the
company.

57
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Figure 35 : Sprint 5 Use Case

58
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.1.3. TEXTUAL DESCRIPTION OF USE CASE

5.1.3.1. Use case “Add Leave”

Title Add Leave

Actor Admin

Pre-Condition User already Authenticated and Leave Request

Created
Post-Condition Added Leave

 The Admin enters leaves page.

 The Admin checks whether there are
pending leave requests.
Normal Scenario
 The Admin clicks on accept leave request.
 The server adds the leave in the database
and change leave request status to
approved.
Fail Scenario  Server Error

Table 17 : Add leave Textual Description

5.1.3.2. Use case “Deny Leave Request”

Title Deny Leave Request

Actor Admin

Pre-Condition User already Authenticated and Leave Request

Created
Post-Condition Leave Request Denied

 The Admin enters leaves page.

 The Admin checks whether there are
pending leave requests.
Normal Scenario
 The Admin clicks on deny leave request.
 The system displays a rejection form to
mention the reason.

59
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

 The server change the status of leave

request to denied.
Fail Scenario  Server Error

Table 18 : Deny Leave Request Textual Description

5.1.3.3. Use case “Export Leaves Report”

Title Export Leaves Report

Actor Admin

Pre-Condition User already Authenticated

Post-Condition Leave Report Generated

 The Admin enters leaves page.

 The Admin clicks on export button.
 The system displays form containing a
Normal Scenario
calendar to select the leave period.
 The server generates a report and
downloads a file in excel.
Fail Scenario  Period is not specified.
 Server Error

Table 19 : Export Leaves Report Textual Description

5.1.4. MODELING AND DESIGNING

5.1.4.1. Add Leave Request Sequence Diagram

60
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Figure 36 : Add Leave Request Sequence Diagram

5.1.4.2. Leave Request State Change State Chart Diagram

It is important how our system work when an admin accepts or deny a leave
request. So for that I decided to create a state chart diagram to illustrate the
process of this feature.

61
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Figure 37 : Leave Request State Chart Diagram

5.1.4.3. Leave Request State Change State Chart Diagram

Figure 38 : Leave Management Class Diagram 62

Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.1.5. IMPLEMENTATION
This section will focus on presenting the leave management system using screenshots taken
from the application

5.1.5.1. Calendar View

Figure 39 : Calendar View Interface

So the dashboard bellow is divided into two main sections

The left section represents the calendar where any user can see their leave days in 3 different
layouts: month, week, and day, also they can navigate through all the dates using the arrows as presented
in the figure.

The right side is our statistics by leave types. Means that it shows you how many leaves you have
based on the type of the leave you have taken and just under it you can find how many days you got the
ask for leaves and next to it the number of days that have been left last year which will be eventually
added to this year’s days.

63
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.1.5.2. Submit leave request form

Figure 40 : Leave Request submit form

In this form you can ask for new leave request as a member so to do so it is important to fill the
required fields. This form contains 4 fields. The first one is for choosing the leave type which can be
configured from another module which I will represent in the next screenshots. The second and third date
selection fields are for choosing the start date and end date and of course a member cannot choose a date
that is already taken before. and last but not least a user has to mention their leave reason in order to make
the admin read it later on and based on that he would accept or reject the request.

64
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.1.5.3. Pending Requests and Leave Requests

Figure 41 : Pending and Current Leave Requests

So as mentioned before every user can make a leave request. In this part I will explain how an
admin can approve or deny a leave request and also will explain the information displayed in the screen
shot.

First of all there’s the pending requests, this section is only visible by the admin.The admin is the
only one who can manage leave requests so on each created leave request he can whether approve or deny
also he can view more readable information like the number of days , dates and leave type also some
details about the user. Each created leave request is initialized as pending until the admin changes its
status.

Second of all we have the requests that are where a user can visualize his requests and track them.
Users can modify a leave request when it’s on pending status but after that they are restricted from any
modification.

It is important to mention that the admin can add leaves directly without configurations. Means
that they can directly add leave without passing through the leave request process.

5.1.5.4. Leave Management Reporting

This section is very important because it helps to provide a better management system and records
for the company to track their employee’s leaves so in this part I will represent the leave management
report.

In order to generate a report in track it the admin must choose which date to generate a report.

65
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Figure 42 : Leave Report

As shown in the figures 68 you can generate a report in excel file which contains the information about
employees , dates and leave type keys and of course the corresponding day of each leave day.

5.1.5.5. Leave Type Management

Figure 43 : Leave Type View

Leave type is the entity that represent the leave so we

decided to make it configurable by making a management
system for it.Each leave type has 3 mains fields the name,
the abbreviation and the color and also another hidden
property which is isCount.this property decides whether
when selecting a day with a specific leave type should it be
subtracted leave days or not.

Figure 44 : Leave Type Edit Form

66
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.2. SPRINT 6 BACKLOG

The purpose of this sprint is to deploy the application. So I will illustrate the process of the
deployment and the different technologies used in this process.

Before diving in the deployment process I would like to present the various advantages of
deployment and the technologies used to deploy our application.

5.2.1. DOCKER
Docker is a tool to make software development and running easier through what we call
a container.

Docker is a tool designed to benefit from it developers and operating systems.

Developers will be only focusing on the code without worrying about the OS that the
software will work on or the tools needed to run the program and avoid any problem
within the OS, libraries and versions.

5.2.1.1. Docker vs. Virtual Machine

Docker Virtual Machine
Virtualize Application Layer. Virtualize Application and OS kernel Layer.

Docker Images sizes much smaller. VM images sizes are large.

Docker containers start and run much fast. Slow execution of containers and images.

Table 20 : Difference between Docker and VM

5.2.2. CONFIGURING DEPLOYMENT PROCESS

67
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Figure 45 : deployment process

5.2.2.1. Installing development environment

In this phase I needed to have SQL server installed in my machine so executing
this command in the command line:

Docker pull mcr.microsoft.com/mssql/server

Of course SQL server requires some configuration before connecting to SQL

server express. So I only needed to run this command in order to have it
configured.

Docker run -e "ACCEPT_EULA=Y" -e "MyPass" -p 1433:1433 -d sqlserver-container

Finally I could connect SQL server express using the username and password
provided

5.2.2.2. Creation of DockerFile

Now, after finishing the development process it is time to create our first docker
image of our application using DockerFile.

DockerFile is a script file where you can execute docker commands.

A basic DockerFile contains some mandatory commands in order to create your

docker image. So for that I will explain the commands I used in my DockerFile.

68
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

 FROM: you specify the base image in my case for frontend will be node
and for my backend will be dotnet 2.2.
 WORKDIR: sets the working directory.
 COPY: copies files from a directory to another.
 RUN: runs a Linux command.

We all know that angular works with node. In the first line I am trying to get node image from docker
repository to make my image based on node. Second I created a working directory app to place my
frontend image in it. After that I copied my package.json file in order to install all the dependencies
needed for the execution of the project which explains why I ran npm install just after it. And last but not
least I copy the frontend directory and run the project inside the image.

Figure 81 is basically the same thing as figure 80 but only here we are setting up the image differently
because it contains multiple projects in the same folder. So first I based the image on dotnet2.2 then
created my working directory. Second I copied all the .csproj. Second I ran dotnet restore to install all the
dependencies needed in every project and notice here that I only specified the main project Trackit.csproj
because it contains all the other project references so we don’t need to restore every project dependencies
one by one. Finally I ran the command to build and run the project.

5.2.2.3. Creation of docker-compose

In this part I will illustrate why do we need docker-compose file and explain the
docker-compose file that I have created.

In simple words, docker-compose is a file where you can execute multiple images
in the same container. We use this technique in order to execute a whole app
where this app depends on other images such as database images.

Here’s my docker-compose file:

Docker compose is a quite simple file you just have to specifies the images you want to run and it
executes them in the same container.

In my case I needed to execute my database image and project image because trackIt depends on SQL
server db and of course with specifying the proper environment variables to configure the images.

To run docker compose we need to execute this command:

Docker-compose [-f <arg>...] [--profile <name>...] [options] [COMMAND] [ARGS...]

69
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

5.2.3. CONFIGURING CI/CD PROCESS

Before diving in the process I want to give a small introduction of CI/CD and why do we
need it.

CI/CD (23) is a method to frequently deliver apps to customers by introducing

automation into the stages of app development. The main concepts attributed to CI/CD
are continuous integration, continuous delivery, and continuous deployment. CI/CD is a
solution to the problems integrating new code can cause for development and operations
teams (AKA "integration hell").

Specifically, CI/CD introduces ongoing automation and continuous monitoring

throughout the lifecycle of apps, from integration and testing phases to delivery and
deployment. Taken together, these connected practices are often referred to as a "CI/CD
pipeline" and are supported by development and operations teams working together in an
agile way with either a DevOps or site reliability engineering (SRE) approach.

In general there are various number of tools that implements CI/CD such as Jenkins and
Google cloud build In my case I will use Gitlab because it allows to create a pipeline and
run a CI/CD process.

5.2.3.1. Creation of the pipeline

A continuous integration and continuous deployment (CI/CD) pipeline (24) is a
series of steps that must be performed in order to deliver a new version of
software. CI/CD pipelines are a practice focused on improving software delivery
throughout the software development life cycle via automation.

That being said, my pipeline is composed of 3 stages: build, build-image and

deploy.

In the build stage all I do is building the frontend and backend to insure that the
application is running without any problem.

In build-tag-image stage, I am just deploying the application in docker with

specifying some scripts which will execute in the pipeline

Finally in deploy-tag-image stage I am just creating the right configuration to

allow the communication between Gitlab and docker.

70
Yassine Bayoudh
CHAPTER 5: STUDY AND IMPLEMENTATION OF THIRD RELEASE

Here’s a visualization of our pipeline:

Figure 46 : CI/CD pipeline visualization

In this paragraph, I created a diagram to focus on the physical architecture of our application translated by
the deployment diagram provided by the UML language. The latter shows the physical layout of the
materials that make up our system. The material resources are represented as nodes.

Figure 47 : Deployment Diagram

CONCLUSION
In this chapter, I presented the third and last release through the analysis, the design, and the
realization of 2 sprints leave module and deployment of the application where I showed the steps
to create DockerFile, docker Compose and the CI/Cd pipeline and the different stages in order to
deploy the application inside Gitlab container.

71
Yassine Bayoudh
 GENERAL CONCLUSION

Throughout the preparation of my graduation project, I have tried to put in practice the
knowledge acquired during my university studies in order to achieve an application of tracking
time and leave management. I dedicated the various chapters of this work on the detailed
description of each phase I have gone through.

I started first by understanding the general context of our application and identify the different
requirements of our future system. I then prepared our work schedule in accordance with the
priorities of our needs following a discussion between the development team.

Despite all the difficulties encountered in the development process mainly due to the use of new
technologies and time constraints, I have managed to meet our customer’s requirements while
respecting the safety aspect.

I cannot list the benefits gained from such experience. Except that this is our real opportunity to
experience working life with its constraints and obligations so this work has allowed us to deepen
our knowledge in good development practices.

Finally, my work does not stop at this level, indeed several features can be added to our
application, mainly the improvement of the mailing system, and the architecture of the
application.
 REFERENCES
1. ASP. [ONLINE] https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-6.0.

2. [ONLINE] https://docs.microsoft.com/en-us/ef/core/.

3. [ONLINE] https://en.wikipedia.org/wiki/Angular_(web_framework).

4. [ONLINE] https://en.wikipedia.org/wiki/Microsoft_SQL_Server.

5. [ONLINE] https://en.wikipedia.org/wiki/TypeScript.

6. [ONLINE] https://en.wikipedia.org/wiki/Sass_(stylesheet_language).

7. [ONLINE] https://www.docker.com/.

8. [ONLINE] https://git-scm.com/.

9. [ONLINE] https://crozdesk.com/software/balsamiq.

10. [ONLINE] https://www.encora.com/insights/what-is-postman-api-

test#:~:text=Postman%20is%20an%20application%20used,need%20to%20be%20subsequently%20valida
ted..

11. [ONLINE] https://en.wikipedia.org/wiki/Microsoft_Visual_Studio.

12. [ONLINE] https://github.com/microsoft/vscode.

13. [ONLINE] https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-

ssms?view=sql-server-ver15.

14. [ONLINE] https://www.docker.com/products/docker-desktop/.

15. [ONLINE] https://sourceforge.net/software/product/Fork/.

16. [ONLINE] https://acqnotes.com/acqnote/careerfields/physical-architecture.

17. [ONLINE] https://docs.microsoft.com/en-us/dotnet/architecture/cloud-native/identity-

server#:~:text=IdentityServer%20is%20an%20authentication%20server,%2C%20mobile%2C%20or%20
API%20endpoints..

18. [ONLINE] https://fullstackmark.com/post/21/user-authentication-and-identity-with-%20angular-

aspnet-core-and-identityserver..

19. [ONLINE] https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-

sequence-diagram/.

20. [ONLINE] https://www.visual-paradigm.com/cn/guide/uml-unified-modeling-language/what-is-class-

diagram/.
21. [ONLINE] https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm.

22. [ONLINE] https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm.

23. [ONLINE] https://www.redhat.com/en/topics/devops/what-is-ci-cd.

24. [ONLINE] https://www.redhat.com/en/topics/devops/what-cicd-pipeline.

25. [ONLINE] https://acqnotes.com/acqnote/careerfields/physical-architecture.

26. [ONLINE] https://nodramadevops.com/2019/06/what-are-application-containers-and-what-problems-

do-they-
solve/#:~:text=Docker%20solves%20problems%20like%3A,relies%20on%20an%20old%20glibc.