SOFTWARE ENGINEERING

Designing, Building, and Deploying

MindLinks website

realized by: Sofien Khalifa

Academic supervisor: Mrs. Wided

Mathlouthi

Corporate Internship Supervisor: Mr.

Ramzi Mahmoudi

1
 Signature

Signature of Signature of the

Academic supervisor Company Internship
Supervisor

2
 Dedications

I dedicate this modest work:

To my mother,
To my father,
For their support, their patience, their
sacrifices and their loves, you deserve all
praise.
may God keep you and bless you.
I dedicated it too
to my dear friends who never stopped
believing in me and supported me in my hard
time.

3
 Acknowledgment

At the end of this work, I would like to extend my sincere

thanks to all those who have helped me to accomplish my work.

First of all, I would like to address the members of the jury who
I thank for agreeing to evaluate this project.

I would like to warmly thank my supervisor, Ms. Wided

Mathlouthi, who was very helpful and who was able to devote
her time to me when I needed it. I thank her very much for her
advice and remarks.

Also I would like to thank Mr. Mohamed Montassar Laribi and

Mr. Chokri Chaaraoui for supporting and guiding me to reach
this level in MERN development .

I would particularly like to thank my internship supervisor Mr.

Ramzi Mahmoudi for the quality of the supervision he provided
me, for his availability, his advice and judicious remarks, and
especially for his confidence and his continual encouragement
which allowed me to move forward.

Last but not the least, I wanna thank me. I wanna thank me for
believing in me, I wanna thank me for doing hard work, I
wanna thank me for having no days off, I wanna thank me for
never quitting, I wanna thank me for always being a giver and
trying to give more, I wanna thank me for doing more right
and wrong, I wanna thank me for being me all time

I will not let this opportunity pass without expressing my

gratitude to all my teachers at the Private Higher School of
Engineering and Technology.

4
 Table of Contents
CHAPTER I: CONTEXT AND OBJECTIVES OF THE PROJECT……………………………….……………….……………10
1. Introduction.................................................................................................................. 11
2. General context ............................................................................................................. 11
3. Presentation of the host company................................................................................... 11
4. Problematic .................................................................................................................. 12
5. Study of the existing ...................................................................................................... 15
5.1. Existing Solutions................................................................................................... 15
5.1.1. Solutions in Tunisia......................................................................................... 15
5.1.2. Solutions abroad ............................................................................................. 15
5.2. Criticisms of the existing ........................................................................................ 17
6. Proposed solution .......................................................................................................... 18
7. Development methodology ............................................................................................. 19
7.1. Development Methodology Study............................................................................ 19
7.2. Presentation of some methodologies ........................................................................ 19
7.2.1. Agile ............................................................................................................... 19
7.2.2. Scrum ............................................................................................................. 19
7.2.3. 2TUP(Two Track Unified Process): ................................................................. 20
7.2.4. RUP(Rational Unified Process): ....................................................................... 20
7.3. Comparative study between the different methodologies: ........................................ 21
7.4. Choice of methodology ........................................................................................... 22
7.4.1. Putting the 2TUP process into practice ............................................................ 22
8. Gantt chart ................................................................................................................... 24
CHAPTER II: CAPTURE OF NEEDS ……………………………………………………………………………………25
1. specification of requirements ......................................................................................... 26
1.1 Functional requirements ........................................................................................ 26
1.2 Non-functional requirements .................................................................................. 27
2. Technical requirements ................................................................................................. 29
2.1 Technological choice .............................................................................................. 29
2.1.1 Front-End - REACT ....................................................................................... 29
2.1.2 Back-End........................................................................................................ 33
2.1.3 Technological choice of our application ............................................................ 35
2.2 Choice of Data Base ............................................................................................... 36
2.2.1 MongoDB ....................................................................................................... 36

5
 2.2.2 Postgres .......................................................................................................... 36
2.2.3 Why MongoDB ? ............................................................................................ 37
Conclusion ..................................................................................................................... 38
CHAPTER III: ANALYSIS AND DESIGN……… .…………………….………………………………………………40
Introduction .................................................................................................................... 40
1. ANALYSIS ................................................................................................................... 40
1.1 Functional Analysis ................................................................................................ 40
1.2 Dynamic Analysis................................................................................................... 41
1.3 Static Analysis ....................................................................................................... 42
2. DESIGN ....................................................................................................................... 43
2.1 Dynamic Design ..................................................................................................... 43
2.2 Static Design .......................................................................................................... 45
2.3 Architectural design ............................................................................................... 48
Conclusion ..................................................................................................................... 49
CHAPTER IV :APPLICATION REALIZATION...……………………………………………………………………51
Introduction .................................................................................................................... 51
1. Development environment ................................................................................. 51
2. Presentation of the web solution ....................................................................... 55
Conclusion ..................................................................................................................... 70
General conclusion ........................................................................................................... 71

6
 Table of Figures

Figure I. 1 : Logo GPRO Consulting .................................................................................. 112

Figure I. 1 : Obstacles to participation in adult training activities [1] ................................... 113
Figure I. 2 : Impact of the use of e-learning among participants in training activities [1] ..... 114
Figure I. 3 : Incidence of online learning, by level of digital problem solving skills [1] ......... 114
Figure I. 4 : : Home page - Study.tn [2] .............................................................................. 115
Figure I. 5 : Home page – Coursera [3] ............................................................................. 116
Figure I. 6 : Home page Openclassrooms [4] .................................................................... 116
Figure I. 7 : Home Page – Udemy [5] ................................................................................ 117
Figure I. 8 : Graphic representation of the proposed solution............................................. 118
Figure I. 9 : The Agile methodology [6] .............................................................................. 119
Figure I. 10 : The Scrum methodology [7] ........................................................................... 20
Figure I. 12 : The RUP agile methodology [9] ..................................................................... 21
Figure I. 13: The 2TUP methodology [8]………………………………………………………….23
Figure I. 14: Gantt chart and provisional schedule………………………………………………24
Figure II. 1:Functional vs non Functional …………………………………….…………………..27
Figure II. 2 : Les technologies Front-End les plus populaires [10] ........................................ 29
Figure II. 3 : Architecture d'une application utilisant React [11] ............................................ 30
Figure II. 4 : Architecture d'une application utilisant Angular [12] ......................................... 31
Figure II. 5 : Architecture d'une application utilisant Vue JS [13] .......................................... 32
Figure II. 6: most popular technlogies Backend [14]…………………………………………….34

Figure III. 1:User Case Diagram ……………………………………………………………..40

Figure III. 2:System Sequence Diagram …..…………………………………………………….41
Figure III. 3:Class Diagram ………………………………..………………………………………42
Figure III. 4:Object Sequence Diagram of Trainning .…..………………………………………43
Figure III. 5:Object Sequence Diagram of Certification ………………………………………..43
Figure III. 6:Object Sequence Diagram of Messenger Login ………………………………….44
Figure III. 7:Object Sequence Diagram of Login ………………………………………………..44
Figure III. 8:React Js architecture Diagram ……………………………………………………..45
Figure III. 9:Redux X Middleware architecture Diagram ……………………………………….45
Figure III. 10:Nest Js architecture Diagram ..………….………………………………………..46
Figure III. 11:mongoDB architecture Diagram ………………………………………………….47
Figure III. 12:Component Diagram ……………………………………………………………….48
Figure III. 13:Deployment Diagram ………………………………………………………………49

Figure IV. 1:Home interfaces …………………………………………………………………….56

Figure IV. 2:Training interfaces …………………………………………………………………..58
Figure IIV. 3:User Login interfaces ……………………...……………………………………….59
Figure IV. 4:Admin Login interfaces ………………………………………………………...…...59
Figure IV. 5:Avatar ………………………………………………………………………………...60
Figure IV. 6:Certification interfaces ……………………………………………………………...60
Figure IV. 7:Training interfaces …………………………………………………………………..62

7
Figure IV. 8:FAQ interfaces ……………………………………………………………………64
Figure IV. 9:Scientific Stay interfaces ……………………………………………………….. 66
Figure IV. 10:Press interfaces ………………………………………………………………….67
Figure IV. 11:GUI USER interfaces ……………………………………………………………68
Figure IV. 12:Tef & TefAQ interfaces ………………………………………………………….69
Figure IV. 13:Sign Up interface ………………………………………………………………..69

8
 Table of tables

Table I. 1: Identity of the company………………………………………………………………………….11

Table I. 2: Comparative table of existing web applications……………………………………….18
Table I. 3: Comparative table of development methodologies…………………………………..22
Table II. 1: Table of non-functional requirements……………………………………………………29
Table II. 2: Comparative table of the different Front-End technologies……………………..33
Table IV. 1: The characteristics of the hardware environment…………………………………51

9
CHAPTER I: CONTEXT AND OBJECTIVES OF
THE PROJECT

10
 1. Introduction

This chapter is a preliminary step to outline the preliminary study before implementing
the envisaged solution. Its purpose is to define the general context of the project and the
problem, as well as to criticize the existing solutions and to propose the orientations of
our future solution. Finally, it presents the working method to be adopted, and the
planning of the application.

2. General context
This part presents the general framework of the project as well as its main objectives.
This work is part of the end-of-study project for obtaining the National Diploma of Computer
Engineering from the university ...... (ESPRIT). Our internship took place within the company
"GPRO Consulting" for a period of six months from 02.01.21 to 30.06.21.

3. Presentation of the host company

GPRO Consulting, see Figure I.1, is based in Sousse and has a dynamic team, consultants and
a large network of partners to offer a global IT service in different areas using the majority of
technologies known on the market. Its business is a quality IT service for SMEs / SMIs, with
very high added value, focusing on innovation and expertise. The company that is committed
to ensuring the satisfaction of its customers.

Table I. 1: Identity of the company

Social reason GPRO Consulting

Manager's name Ghazi Atroussi
Address Avenue Mohamed Attia Khzema
Ouest – Sousse
Phone 58 100 435 / 73 276 175
Email contact@gproconsulting.com
Website www.gproconsulting.com
Skills Java JEE - Spring MVC Framework -
AngularJS - Intégration ERP - Android
et IOS

11
The company provides solutions in various fields related to::
 ERP system
 Industrial and manufacturing management software solutions
 Technical assistance in the various industrial processes
 Study and consulting in the implementation of information systems
 Expertise in terms of certification preparation
 Outsourcing
 Specific development adapted to customer needs
 Outsourcing for the European market, in particular the French market

Figure I. 1 : Logo GPRO Consulting

4. Problematic

Nowadays, current school programs are not always adapted to the reality of companies and
some students who do not have the opportunity to do internships in a company must find ways
to take their training further.

This is the reason why online training is interesting for students, because they can learn things
not taught in school curricula and which meet the real needs of companies. In addition, these
training courses can help them enrich their training without being confined to the school
program by following free online training to complete their course.
Being certified for a student is also proof that he is curious and that he wants to go further in
his learning, which is positive for its employability. A candidate who has followed certifying
training will have more chances of obtaining an internship or his first job, because for the same
training he will have the advantage of having something other than his university degree.
Indeed, the certification represents the best testimony from an independent body that the
candidate has a certain mastery of the sector approached.

12
Thus today an employee will change companies several times in his career so it is important
that he can train and obtain certifications in order to maintain a level of employability that
favors his career in different companies.

Take the example of the sectors where the adoption of AI technologies is the most important,
we find IT (63%), followed by industry (47%) and financial insurance (40%). Certification in
this sector is therefore essential.

Figure I. 2 : Obstacles à la participation aux activités de formation des adultes [1]

The statistics of the curves (I.1, I.2 and I.3) bear witness to this. Indeed, the first represents the
reasons why adults do not participate in training, in other words the percentages of adults who
wanted to participate but did not do so, certainly the constraints of time, schedule and distance
as well as the Financial constraints are among the main obstacles mentioned by those who do
not take any training (Figure I. 1). Almost 28% of adults say that they do not participate in any
training because they lack time due to their professional commitments and 15% say they do not
have time because of their family responsibilities. Finally, 16% mention a lack of financial
means and 12% of adults report that the training took place at an inconvenient time and place.
In coordination with Figure 1, the second displays the percentages of participants in non-formal
training activities who have attended at least one distance training in the past 12 months, despite
the possibilities offered by e-learning, few adults take advantage of this type of education for
training. Only one in five adults participating in non-formal training has taken it online.
However, the percentage of participants who train online varies greatly from country to another,
ranging from 6% in France to over 40% in Lithuania and Poland (Figure I. 2). Finalizing with
the last figure which shows the percentages of participants in adult training activities who
attended at least one distance education in the last 12 months, by level of competence in
numerical problem solving found in the OECD area , on average, 23% of training participants
with high digital problem solving skills took online training, compared to 14% of participants
with very low ICT skills. In the Netherlands and New Zealand, the number of adults with low

13
ICT skills taking online training exceeds the number of adults with strong digital problem-
solving skills (Figure I. 3).

However, learners do not have time to return to school desks for training. This is where online
certifications come in, where they can continue to learn while working, and take training at
their own pace and in addition maintain their employability.

The question that arises is how to overcome this remote certification problem without resorting
to foreign services or payment in foreign currency.

Figure I. 3 : Impact of the use of e-learning among participants in training activities [1]

Figure I. 4 : Incidence of online learning, by level of digital problem solving skills [1]

14
 5. Study of the existing
The study of the existing is a preliminary step for project realization. In this section, we conduct
a detailed analysis of the existing, followed by a review and a comparative study of already
existing web platforms in order to identify the weaknesses and strengths and user needs to take
them into consideration during design and production phases. We then propose some solutions
in Tunisia and abroad which offer the same concept as our web portal.
5.1.Existing Solutions
5.1.1. Solutions in Tunisia

 Application1: Study.tn

Study.tn is an online teaching platform in Tunisia allowing its members to purchase video
lessons.

Figure I. 5 : : Home page - Study.tn [2]

The main strengths of Study.tn are the ease of use of the platform and the prices of its courses
are accessible to all. But unfortunately it has weak points such as the uneven quality of the
courses and the lack of certification.
5.1.2. Solutions abroad

 Application 1: Coursera

It is an online education platform that allows you to take 2,000 courses for free online.
These are courses from leading universities like Stanford or Harvard, in various fields
such as computer science, humanities or languages.

15
 Figure I. 6 : Home page – Coursera [3]

The main advantage of Coursera is that the certificates and the diplomas it provides are
recognized. The platform is also in partnership with very large schools and the courses are of
excellent quality which greatly facilitate learning. But all these good features do not neglect
that some trainings are really expensive.

 Application2: OpenClassrooms

It is the largest online training platform in France and in Europe. It allows free training
in digital professions (programming and design).

Figure I. 7 : Home page Openclassrooms [4]

16
Among the strengths of OpenClassrooms are: the good quality of courses, the possibility of being
followed by a mentor and the diploma certificates. Despite all these advantages, OpenClassrooms
requires great attendance.

 Application 3 : Udemy
Udemy is an online learning platform that offers over 60,000 free and paid courses on a
variety of topics.

Figure I. 8 : Home Page – Udemy [5]

Udemy's strengths mostly show up in the good UI experience, which makes it easy to use. But
all these advantages do not abandon the presence of many disadvantages such as the uneven
quality of the courses and that there is no certification.
5.2.Criticisms of the existing
We can classify the result of the analysis of the existing web platforms mentioned above
according to six criteria [Cx] taken into consideration in the evaluation process of these
platforms:
[C1] Ergonomic interface: Is the application easy to use and does it present a more or less
attractive visual aspect?
[C2] Certification: The courses are certified.
[C3] Quality of course: The courses are of good quality.
[C4] Training cost: Training costs are affordable.
[C5] Follow-up: Possibility of follow-up by the mentor.
[C6] Dynamicity : The speed of loading of the website according to a test carried out by
www.gtmetrix.com

17
 C1 C2 C3 C4 C5 C6

Study.tn High NO LOW YES NO 29%

Coursera High YES Very high NO YES 66%

Openclassroom average YES High NO NO 50%

Udemy Very high NO average YES NO 84%

Table I. 2: Comparative table of existing web applications

⇨ According to this study, it turns out that none of the previous solutions adequately
responds to our problem and our needs.

6. Proposed solution
Given the analysis of the constraints detected and the fact that there is no 100% online
certification site in the IT sector in Tunisia, we propose to design and implement a
platform that fills these gaps by offering innovative tools encouraging Internet users
either to learn or to teach and by facilitating the mode of education.

Figure
Figure I. 9 : Graphic I. : Pictogramme
representation of the proposed solution

18
 7. Development methodology
7.1.Development Methodology Study
The development methodology aims to find the best way to structure, plan and control the
development of an application. It is the act of modeling a system before its realization in order
to better understand how it works and to ensure its consistency. There are several development
methods so in order to choose the most optimal method, it is always obvious to know the
characteristics of each method and then proceed to a multicriteria analysis to detect the most
adequate one. In this part, we will study some methodologies and compare them to make the
right choice.
7.2.Presentation of some methodologies
7.2.1. Agile
Agile is a methodology that anticipates the need for flexibility and applies a level of pragmatism
in the delivery of the finished product. Agile requires a culture change in many companies, it
focuses on the clean delivery of individual parts or parts of the software and not the entire
application, see Figure I.9.
Agile methods advocate 4 fundamental values:
❖ Individuals and Interactions on processes and tools
❖ Work software on complete documentation
❖ Customer collaboration in contract negotiation
❖ Respond to change about a plan

Figure I. 10 : The Agile methodology [6]

7.2.2. Scrum
Scrum is the best known of the agile methodologies. It provides a project management
framework with roles, meetings, artifacts, business rules, and an iterative development
cycle. The Scrum framework is simple, transparent and pragmatic.

19
 Figure I. 11 : The Scrum methodology [7]

7.2.3. 2TUP(Two Track Unified Process):

2 Tracks Unified Process (2TUP) is a unified process. The principle of 2TUP is that any
evolution imposed on a software can be broken down and processed in parallel, according to
a functional axis and a technical axis. And the realization of the software consists in merging
the results of these two branches of the process.

7.2.4. RUP(Rational Unified Process):

The Unified Process (PU) method is concerned with the life cycle of software and manages it.
Regarding object-oriented software, she will focus on its development. The RUP method, for its
part, is one of the offshoots of the PU method, which seeks to provide a precise framework for
the development of the software. It is a rather heavy generic, iterative and incremental method

20
but which adapts very easily to the processes and to the development needs.

Figure I. 12 : The RUP agile methodology [9]

7.3.Comparative study between the different methodologies:

Methodology (+) Advantages (-) Disadvantages

Agile Agile offers multiple - He was less successful in

opportunities for stakeholder
and team engagement. By
involving the client in every
step of the project, there is a
high degree of collaboration
between the client and the
project team, which allows the
team to better understand the
client's vision.
integrating tests and operations
into this mix.
- Lack of emphasis on
technology, which can make it
difficult to sell the concept to
senior executives who do not
understand the role culture
plays in software development.

Scrum -Iterative - Team size

- Update of priorities - Quality of developments
- Faster and cheaper - Lack of practice to obtain the
- Integrated and simple 'DONE' in the software context
concept.
- More flexibility and creativity
- Result in line with
expectations

21
 2TUP - Iterative - Does not offer standard
- Emphasizes technology and documents
risk management - Superficial on the phases
- Define stakeholder profiles, located upstream and
deliverables, schedules, downstream of the
prototypes development

RUP - Traceability from use cases to - Often high customization cost

deployment - Very focused process
- Architecture-based approach -Vision not obvious or
- Risk management in projects immediate
- Framework conducive to
reuse
Table I. 3: Comparative table of development methodologies

7.4.Choice of methodology
Our project is based on a well-defined development process that goes from determining the
expected functional needs of the system through to design and final coding. This is why we
need a development cycle that separates the technical aspects from the functional aspects while
starting with a preliminary study. Thus, following a comparative study, our choice then fell
towards the 2TUP method since it is characterized by a new and original approach and that it
respects the framework of our project.

7.4.1. Putting the 2TUP process into practice

The 2TUP is a unified process that offers a Y development cycle by separating the
technical aspects from the functional aspects as shown in the following figure:

22
 Figure I. 13: The 2TUP methodology [8]

 According to 2TUP, the realization of the software revolves around 2 essential

branches which their merger will necessarily take us to go through the following
phases throughout our work:
 The preliminary study: which contains a description of the service and the main
use cases, this is a first version of the general specification.
 The capture of functional needs: the objective of which is to define the functional
boundary between the system and its environment and the activities expected of
the various users in relation to the system.
 Analysis: where the study of the data and the study of the treatments to be carried
out are carried out simultaneously.
 Capture of technical needs: This step identifies all the constraints on the choice
of technologies for the design of the system. The tools (and Frameworks) and
equipment selected as well as taking into account the constraints of integration
with the existing (technical architecture prerequisite).
 Generic design: This is the breakdown into components necessary for the
construction of the technical architecture. It is generally advisable to make a
prototype to ensure the validity of the architecture.
 Detailed design: which specifies the technical implementation of the application.
It consists of the merging of the detailed specification and the generic design, to
determine how to do the what to do in detail. It contains the database schema,
class diagrams, and additional sequence diagrams that detail the interactions
between the components of the software[8].

23
  Coding and Tests: which describe how the application is carried out and installed
on an execution environment and how the validation strategy is carried out

8. Gantt chart
The Gantt chart, commonly used in project management, is one of the most effective tools for
visually representing the status of the various activities (tasks) that make up a project. The left
column of the diagram lists all the tasks to be performed, while the header row represents the
most suitable time units for the project (days, weeks, months etc.). Each task is represented by
a horizontal bar, the position and length of which represent the start date, duration and end date.
The Figure below therefore allows you to visualize at a glance:
● The different tasks to consider
● The start date and the end date of each task
● The expected duration of each task

Figure I. 14: Gantt chart and provisional schedule

Conclusion:
In this first chapter, we made a study of the existing situation allowing us to start our project
well with an illustration of the desired solution. We compared the different development
methods in order to close this chapter with a presentation of the 2TUP methodology that we
will adopt for the development of our project. The next chapter will be devoted to capturing
needs.

24
CHAPTER II: CAPTURE OF NEEDS

25
 Introduction
In this chapter we will conduct a preliminary study of the different aspects of our project. We
start by presenting the field of application. Then, we will present a technical study followed by
an in-depth functional study while respecting the 2TUP development methodology.

1. specification of requirements
1.1 Functional requirements
Any interactive system must ensure and facilitate the interaction between users "actors" and the
"system". An actor represents the role of an external entity operating the system through its
various interfaces. For our system, we have identified the following actors:
Internet user: This is a site visitor, he can consult the courses on the home page, as he can search
for them. He also has the right to create a profile and thus become a subscriber to the site.
 E-Learner (subscriber): It is an Internet user who has a profile on the site. He can
register for courses, comment on them, and take exams.
 Teacher: It is an Internet user who has a profile on the site. He can publish, modify and
delete his courses.
 Administrator: This is a site subscriber who can access the site administration area. It
can handle subscriber complaints, block them, and check teacher courses before
posting.

In the following, we will expose the functional needs of our application in close relation with
the actors previously mentioned.
We recall that these needs must meet the requirements of the future system.

The Internet user (Visitor) has the right to:

 Consult the site: The Internet user can consult several courses.

The subscriber (E-Learner) has the right to:

 Register for a course: The subscriber can register for one or more courses.
 Evaluate a course: The subscriber can give his opinion on the published courses.
 Take an exam: The subscriber can take an exam in a course in which he is registered in
order to obtain certification.
 Manage Favorites: The subscriber can save courses of interest to his favorites or delete
them.

 Send a complaint: The subscriber can send a complaint to the administrator via a form
in which he explains his request.

26
The administrator has the right to:
 Manage published courses: The administrator checks all published courses. He can
either validate them or delete them.
 Manage subscriber accounts: The administrator has access to the list of subscribers on
the site. He has the right to delete or block them.
 Process complaints: The administrator consults complaints from subscribers. He can
delete the course or block the subscriber who initiated the signaling.
 Validate teacher accounts: The administrator must validate teacher accounts.

The teacher has the right to:

 Manage their courses: The teacher can view, publish, modify or delete their courses.
It is important to point out that there are many common functional needs between the actors. In
what follows, we will detail them:
Common functionalities between the Internet user” and “E-Learner”:
 Find a course: The 2 actors can search for courses according to their choice.
Common functionalities between the Teacher” and “E-Learner”:
 Manage mailbox: The 2 actors can exchange messages in order to follow up.
Common functions between the “E-Learner”, “Administrator” and “Teacher”:
 Authenticate: They must enter their login and password to each access their space on
the site.

Figure II. 1:Functional vs Non Functional logo

1.2 Non-functional requirements

When the functional needs express the concrete functionalities of the product, the non-
functional needs are indicators of the quality of the execution of functional requirements, so
our website must be able to satisfy the user through the following options.

Non-functional requirements Description

27
 Confidentiality Authentication is mandatory in order to benefit
from the available services.

Ergonomic All ergonomics standards must be respected,

including the user-friendliness and
comprehensibility of graphical interfaces. In
addition, the choice of colors, the density and
organization of the elements on the screen and
also the use of informative messages and well-
formed and well-readable error messages.

Availability and Maintainability
The website must be accessible at all times and
must be extensible, that is to say easily
maintainable and adapt to new requirements in
the event of modification or addition of a
feature.

Performance We want to achieve a single page web

application (SPA) that optimizes the loading time
of the application and avoids page reloading with
each action requested by the user, resulting in a
smooth user experience with regard to
navigation in the site.

The security constraints to take into account

when making our application are the assignment
Security of roles to each group of users to ensure that
access to the different spaces is protected.

28
 Simplicity Our application must be simple to the user and
does not require extensive knowledge since it is
aimed at an audience of different ages including
non-computer scientists.

Table II. 1: Table of non-functional requirements

2. Technical requirements
We are interested here in the right branch of the Y-cycle "Capture of technical needs" which
capitalizes technical know-how. In order to fully explain our technological choices, we used a
comparative study between the different technologies that can be used during our project.
2.1 Technological choice
In the following part we present the Front-End and Back-End frameworks that we will use for
the development of our website.
2.1.1 Front-End - REACT

Today, JavaScript (JS) is the only language used to create dynamic user interfaces. But to set up
complex UIs, you have to use what are called JavaScript Frameworks. These are libraries
designed in JavaScript that allow you to build more advanced frontend infrastructures.

There are 3 main JavaScript frameworks for frontend development:

 React
 Angular
 Vue.js

Figure II. 2: The most popular Front-End technologies [10]

29
2.1.1.1. React
React is a free JavaScript library developed by Facebook since 2013. The main purpose of this
library is to facilitate the creation of single page web application (SPA), through the creation
of state dependent components and generating an HTML page. Figure II. 2 illustrates the
architecture of an application using React JS and Redux.
The major benefits of using React are :
 DOM virtuel
 Easy to learn
 High level of flexibility and responsiveness
 100% open source JavaScript library
And their basic drawbacks are:
 Very little official documentation
 Long to master
 Requires in-depth knowledge

Figure II. 3: Architecture of an application using React [11]

30
2.1.1.2. Angular
Angular is an open-source JavaScript framework developed by Google in 2016. It allows the
creation of single page web applications (SPA).
The framework is based on the Type Script language and on an architecture of the MVC type,
illustrated in Figure II. 3, allows you to structure the code and separate the view (Interface)
from the models.
Benefits :
 Very extensive documentation
 MVVM model (Model - View- View Model)
 Bid The bidirectional association of data which minimizes the risk of possible errors
 New improved features like RX-JS, faster compilation
Disadvantages:
 Problems migrating from one version to another
 The inability to change frameworks along the way

Figure II. 4: Architecture of an application using Angular [12]

31
2.1.1.3. Vue.js
Vue JS is a JavaScript framework. It was created by Evan You in 2014, a developer who worked
at Google. It has practically the same functionality as these main competitors React and
Angular. Figure II. 4 illustrates the architecture of an application using Vue JS.
Benefits :
 Optimized HTML
 Detailed documentation
 Impressive integration
Disadvantages:
 Lack of resources
 There may be integration issues in huge projects

Figure II. 5: Architecture of an application using Vue JS [13]

32
2.1.1.4. Comparative study and summary

Angular React VueJS

Performance average High High

Scalability High High low

Apprentices Difficult average easy

Developer availability High High easy

Developer community Big Very big small

Acceptance and trust High High low

Table II. 2: Comparative table of the different Front-End technologies

2.1.2 Back-End

2.1.2.1 Nest Js

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications.
It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables
developers to code in pure JavaScript) and combines elements of OOP (Object Oriented
Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).
Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default)
and optionally can be configured to use Fastify as well.
Nest provides a level of abstraction above these common Node.js frameworks
(Express/Fastify), but also exposes their APIs directly to the developer. This gives developers
the freedom to use the myriad of third-party modules which are available for the underlying
platform.[12]

33
 2.1.2.2 Symfony

Symfony is a set of PHP components as well as a free MVC framework written in PHP. It
provides modular and adaptable features that make it easier and faster to develop a website.

2.1.2.3 Nest Js vs other Frameworks

Figure II. 6: most popular technlogies Backend [14]

From Figure II. 6 we see that the highest membre of professional Developers use Node Js
And Nest Js is a framework from Node Js .
Our choice was based on the best Backend Technologies that offer a stable relation with React
Js, and depends on my experinice Nest Js was the best choice.

34
 2.1.3 Technological choice of our application

2.1.3.1 React JS (Frontend)

React looks like a good choice for someone getting started with front-end
JavaScript frameworks, startups and developers who like some flexibility. The ability to
integrate with other frameworks seamlessly gives it a great advantage for those who would
like some flexibility in their code.

 DOM virtuel
 Easy to learn
 High level of flexibility and responsiveness
 100% open source JavaScript library

2.1.3.2 Nest Js

Java as a programming language is more than 20 years old. For many years, it was the main
framework for creating business applications, but recently, the focus shifted towards Node.js.
Because of its speed, Node.js took the developer world by storm allowing to enjoy all the
benefits of JavaScript and writing both frontend and backend in the same programming
language. Since Nest JS is the fastest-growing framework for Node.js, let’s talk about the
reasons why choose Nest JS over your current framework?

 A quick and efficient development process.

 Highly scalable and easy to maintain applications.
 Fastest growing Node.js framework for the past 3 years.
 Large community and support system.

35
  Nest has positioned itself at a unique crossroad of front end and mid-tier development
that many languages have struggled to find.
 The use of TypeScript helps ensure that Nest will remain relevant in the rapidly
changing JavaScript landscape and gives developers less context switching.
 Great documentation.
 Easy unit testing.
 Built for large scale enterprise applications.
 Nest provides an out of the box application architecture that allows developers and
teams to create highly testable, scalable, loosely coupled and easily maintainable
applications.
 With Nest JS you can build Rest API’s, MVC applications, microservices, Graph QL
applications, Web Sockets or CLI’s and CRON jobs.
 It uses the best of Node.js, TypeScript, and bullet-proof architectural patterns.[13]

2.2 Choice of Data Base

2.2.1 MongoDB

MongoDB (from humongous English which can be translated as "huge") is a document-

oriented database management system that can be distributed over any number of
computers and does not require a predefined data schema. It is written in C ++. The server
and tools are distributed under the SSPL license, the drivers under the Apache license and
the documentation under the Creative Commons4 license. It is part of the NoSQL
movement.[14]

2.2.2 Postgres

PostgreSQL is a relational and object database management system (RDBMS). It is a free

tool available under the terms of a BSD-type license.

36
This system competes with other database management systems, whether free (like MariaDB
and Firebird), or proprietary (like Oracle, MySQL, Sybase, DB2, Informix and Microsoft SQL
Server). Like the free Apache and Linux projects, PostgreSQL is not controlled by a single
company, but is founded on a global community of developers and companies.[15]

2.2.3 Why MongoDB ?

Between all databases that they were available we agreed on MongoDB,
Since MongoDB is as popular as it is today, there should be more good than the bad and the
ugly. If not, developers wouldn't accept it. Below are a few good things about MongoDB.

Benefits of MongoDB:

 Flexible Data Model: In today's dynamic use cases and ever-changing applications,
having a flexible data model is a boon. A flexible data model means that there is no
predefined schema, and the document can hold any set of values based on any key.

 Expressive Query Syntax: the query language of MongoDB is very expressive and is
easy to understand. Many would say that it's not like SQL. But why should we stick to
a SQL-like query language when we can move forward and be more expressive and
simpler.

 Easy To Learn: MongoDB is easy to learn and quick to start with. The basic
installation, setup, and execution doesn't take more than a few hours. The more
robust setup might be complex, but I will talk about it later, you should be able to use
the MongoDB database with ease in your project.

 Performance: Query performance is one of the strong points of MongoDB. It stores

most of the workable data in RAM. All data is persisted in the hard disk, but during
a query, it does not fetch the data from the hard disk. It gets it from the local RAM
and, hence, is able to serve much faster. Here, it is important to have the right
indexes and enough RAM to benefit from MongoDB's performance.

 Async Drivers: Nonblocking IO using async drivers are essential in all modern
applications that are built for speed. MongoDB has async driver support for most of
the popular languages.

 Documentation: all the documentation for MongoDB is available for free on many
websites.

 Text Search: if you are building a website needs all of your data, text search is
essential, there no database better than MongoDB for that.

 Server-Side Script: If you need some operations to be performed on the server side
and not in your application, you can do that in MongoDB. Put your list of mongo
statements in a .js file and execute mongo yourFile.js.[16]

37
 Conclusion

In this chapter we have introduced our functional and non functional reequipment, going next
to represent the technologies that will be used in our project, and type of database.
So, I’m using ReactJS, NestJS and MongoDB as the base of building this project, in the next
chapter I will represent the analysis and design of my project.

38
III CHAPTER III: ANALYSIS AND DESIGN

39
Introduction
This chapter is divided into two important parts: Analysis and Design , And each part is divided
into three parts
As usual we will represent all the graphs that will make the details of project clear.
For the analysis part we go with Functional analysis moving to Dynamic analysis ending with
Static analysis.
For the design part we start with Dynamic design to Static design ending with Architectural
design.

1. ANALYSIS
1.1 Functional Analysis
1.1.1 Use case Diagram

Figure III. 1:User Case Diagram

In functional analysis I represent the user case diagram to explain our modules and
objective from creating like :
 Functionality visible from outside the system whose operation is to be
described.
 Response to a need for a service rendered to the user.

40
  Involves more basic series of actions.
 Express a service carried out from start to finish, with an initiation, an unfolding
and an end, for the actor who initiates it.

1.2 Dynamic Analysis

1.2.1 System Sequence Diagram

The sequence diagram is an interaction diagram.

However, an adaptation of this diagram is used for the description of a use case:
system sequence diagram.
It represents interactions (information flow) between actors and the systemand it
describes a scenario for a given use case.

Figure III. 2:System Sequence Diagram

41
1.3 Static Analysis

1.3.1 Class Diagram

For class Diagram It can be used in the analysis and design phases:

 Analysis: preliminary description of the structure of entities and the name of some
attributes and methods.
 Design: detailed description of all classes. The attributes and methods must appear
in detail with all types of parameters and return types.
 Representation of the static structure of the system.
 Set of classes and relationships between them (associations, generalizations, etc.).

Figure III. 3:Class Diagram

42
 2. DESIGN

2.1 Dynamic Design

2.1.1 Object Sequence Diagram
This part of dynamic design I used some of many examples of object sequence diagrams
to explain the functional model of our system objects :

 Training Diagram

Figure III. 4:Object Sequence Diagram of Trainning

 Certification Diagram

Figure III. 5:Object Sequence Diagram of Certification

43
 SignIn messenger

Figure III. 6:Object Sequence Diagram of Messenger Login

 Login Diagram

Figure III. 7:Object Sequence Diagram of Login

44
2.2 Static Design

2.2.1 React JS architecture diagram

React has no opinion on how you order your files within your folders. That said, you may
want to consider one of the popular ecosystem approaches.

Figure III. 8:React Js architecture Diagram

Figure III. 9:Redux X Middleware architecture Diagram

45
2.2.2 Nest JS architecture diagram

Nest (NestJS) est un framework MVC permettant de créer des applications côté serveur
Node.js efficaces et évolutives. Il utilise du JavaScript progressif, est construit avec et
prend entièrement en charge TypeScript.

Figure III. 10:Nest Js architecture Diagram

46
2.2.3 MongoDB architecture diagram

This diagram represent MongoDB architecture :

Figure III. 11:mongoDB architecture Diagram

47
2.3 Architectural design
2.3.1 Component diagram

Component diagram is offering :

 Offers a high-level view of the system architecture
 Used to describe the implementing system from a point of view
 Used to describe the components of a system and the interactions between them
 Illustrates how to concretely and physically group the elements (objects,
interfaces, etc.) of the system into modules called components

Figure III. 12:Component Diagram

48
 2.3.2 Deployment diagram

A deployment diagram provides a static view of the topology of the hardware on which
the system is running.
Represents the physical architecture of the system:
 Set of nodes
 Correspond to physical media (servers, routers, environments, etc.)
 Nesting nodes
 Connections between nodes
 Distribution of artifacts on each node
 A deployment diagram does not show interactions between nodes

Figure III. 13:Deployment Diagram

Conclusion

In this chapter, we have presented the detailed design of both our database and our web
application. At this point, we have completed an important phase which is the general design.
This is how we can approach an essential step which is the application realization. In the next
chapter, we will go into more detail about this phase.

49
CHAPITRE IV : APPLICATION REALIZATION

50
Introduction
The phase which follows a design is possibly the implementation. After the three
previous chapters, we come to gather our information and realize our system.
We begin this chapter by describing the hardware development environment and
software that we adopted. We then present some screenshots of our application.

1. Development environment

To set up our application, we chose to expose the environment of development which allowed
the success of our application and which ensured the good progress of the implementation
phase.
This environment includes hardware software tools.

1.1 Hardware environment

For the realization of our project, we had an MSI laptop characterized by:

Operating system Windows 10

Processor Intel I7 10GEN

RAM 16GO

ROM 512 GO SSD

Table IV. 1:The characteristics of the hardware environment

1.2 Software environment

This section describes the software environment with which we carried out this project.

1.2.1 Frontend Part

 React JS is a free JavaScript library developed by Facebook since 2013. The main
purpose of this library is to facilitate the creation of a single-page web application, via
the creation of state-dependent components and generating an HTML page (or portion)
at each change of state.

51
 Redux is an open-source state management JavaScript library for web applications. It
is most commonly used with libraries like React or Angular for building user interfaces.

 MATERIAL-UI is React components for faster and easier web development. Build your
own design system, or start with Material Design.

1.2.2 Backend Part

 Node Js is a free software platform in JavaScript oriented towards competing large

event network applications that must be able to load up.

 Nest Js is a framework for building efficient, scalable Node.js server-side applications.

 MongoDB is a distributed, universal, document-based database designed for modern

application developers and for the start of the cloud. No other database offers such
productivity.

52
1.2.3 Other tools used

❖ Visual studio code

We used Visual Studio Code as the IDE to edit our application code. It is an extensible
code editor developed by Microsoft for Windows, Linux and MacOs.

❖ Postman

We used it to test the proper functioning of the API. Postman is the collaboration
platform for API development. Postman simplifies every step of building an API and
streamlines collaboration so you can build better APIs, faster.

❖ StarUML

We used StarUML for the UML design of our application. It is a UML modeling software,
StarUML manages most of the diagrams specified in the UML 2.0 standard.

❖ GITHUB

GitHub is built for collaboration. Set up an organization to improve the way your team
works together, and get access to more features.

53
❖ ROBOT 3T

The Robo 3T (formerly Robomongo) tool has been acquired by 3T Software Labs, the
creators of the MongoDB client Studio 3T (formerly MongoChef).
3T will continue development of Robo 3T in parallel with its own MongoDB GUI and
the good news is that it will be making Robo 3T free for all users from now on. This is
an exciting new step for Robo 3T and its community, which will benefit users and the
wider MongoDB ecosystem.

❖ OVH

OVHcloud, formerly OVH, is a French company. She initially practiced server hosting,
and was an Internet service provider, then a telecommunications operator for
businesses. It developed, at the end of the 2010s, in cloud computing.[17]

❖ FileFizella

FileZilla Client is an FTP, FTPS and SFTP client, developed under the GNU General
Public License. It is included in the list of free software recommended by the French
state as part of the overall modernization of its information systems.

54
2. Presentation of the web solution
In this part, we will expose some interfaces of our web application in
trying to present the most important features in our work.

2.1 home interface

This figures represent our home page

55
Figure IV. 1:Home interfaces

56
 Our home page is divded to many parts HeadingBar and TopBar going to an animated
interface, after that we find the top categories of courses moving to upcoming events
ending by footBar that inculdes all the center informations and buttons leads to different
pages.

2.2 trainning interface

now moving to training interfaces with register interface that u find it when you open any
courses interface.

57
 Figure IV. 2:Training interfaces

In training interfaces we used many of avanced ReactJS modules to create them, also
I add EmailJS API to help the user and the admin to receive all the informations needed
to register or to start the training.

58
 2.3 User signIn interface

Figure IV. 3:User Login interfaces

For SignIn interface we used material ui components to create it , this page is related to nest
API by hooks to use material interface all what you need to do is using “ npm install @material-
ui/core ” and use the needed component from “ https://material-ui.com/ “.

2.4 Admin Login interface

Figure IV. 4:Admin Login interfaces

To be able to use this interface you need to have the access to Postman API , This interface
is protected and only the admin have the access to reach it .

59
2.5 Avatar

Figure III. 5:Avatar

Avatar is an API that show up after you login and it shows the first letter of your username,
you finds avatar in TopBar of every interface in our web application .

2.6 Certification interface

Figure IV. 6:Certification interfaces

60
 In certification interfaces we used many of avanced ReactJS modules to create them,
also we add EmailJS API to help the user and the admin to receive all the informations
needed to register or start the certification

2.7 Boot Camp interface

I used an empty interface because we are not allowed to add any Boot Camp without
permission.

61
 Figure IV. 7:Training interfaces

Boot Camp is one of the most important modules in this project , here as we see the
admin can upload pictures and videos also we see here an avanced tool as Rich Text
Editor that offer all the possible text edition.

62
2.8 FAQ interfaces
FAQ interfaces are created to answer some of questions that we receive on our email

63
 Figure IV. 8:FAQ interfaces

As the usal every web application needs an FAQ page where you are able to find a possible
answers on many of your questions, these modules like any other modules it starts from
backend to API to admin interface to show up in the end on our frontend Client.

64
2.9 Scientific Stay

65
 Figure IV. 9:Scientific Stay interfaces

Scientific Stay is the innovative module in our project, that it created to offer a new
level in E Learning world by adding the travel option in our suggestion not just that it
also help to add a new reward for our county by increase the number of tourists in
Tunisia ( traviling + learning ).

2.10 Press interfaces

66
 Figure IV. 10:Press interfaces

Like any web application , we need a publicity for our app so by creating Press module now
we can show our important events through it.

67
 2.11 GUI USER interfaces

Figure IV. 11:GUI USER interfaces

These interfaces are only allowed to the admin, it offers him the abilty to create and delete the
fake users, when admin receive an request to register, he create an account and the user
receive an email with all the login details.

2.12 TEF & TEFAQ Interfaces

These interfaces are related to season of temporary certifications

68
 Figure IV. 12:Tef & TefAQ interfaces

These interfaces are created for the admin to allow the users to register in TEF and TEFAQ
season to be able to pass ( English or French ) exams , also we can add many other languages
by adding them to the enumrated class.

2.13 Sgin Up Interface

SignUp interface is created by material ui .

Figure IV. 13:Sign Up interface

For SignUP interface i used material ui components to create it , this page is related to Gmail
API by EMAILJS. to use material interface all what you need to do is using “ npm install
@material-ui/core ” and use the needed component from “ https://material-ui.com/ “.

69
Conclusion
In this chapter, we have presented the hardware and software environment used during the
implemntation of our web application. Then, we presented some screenshots showing the
proper functioning of our application.

70
 General conclusion
This report is produced as part of our end of studies project with a view to
obtaine the National Diploma of Computer Engineering

This work aims to design and develop a website for a training center.

To be able to complete our mission, we have detailed the different stages

of analysis, design and implementation of our application.

The first chapter was devoted to the general framework of the project. It
began with a research and documentation phase, thus tracing the
benchmarks for the work to be accomplish.

The second chapter was devoted to the study of the existing and the
conceptual study where we identified the shortcomings of the pre-
existing applications and we highlighted the implementation of the
general architecture of our system.

Once our objectives were set in the third chapter we followed in the third
chapter a design study in order to carry out our project. We used UML
as a modeling language.

We end with the fourth chapter which was dedicated to the implementation
aspect containing the choice of the working environment as well as
some interfaces made from the web application.

This project was beneficial for us in several ways. It opened us to the

professional world which involves responsibility and discipline as well
as collaborative teamwork, it was an opportunity to improve our
knowledge in work environments and to master programming
languages for who will be certainly useful at the professional level.

This application will upgrade more by adding an payment module,

Facebook Login, online rewards and virtual classrooms.

71
Finally, we hope that we have succeeded in achieving a functional website
that meets the needs of future users and meets their expectations.

72
Bibliography
[1] «Oecd,» 5 Mars 2021. [Online]. Available: http://www.oecd.org/coronavirus/policy-
responses/les-possibilites-de-l-apprentissage-en-ligne-pour-les-adultes-premiers-
enseignements-de-la-crise-du-covid-19-0ef7c9bf/.
[2] «Study.tn,» [Online]. Available: https://www.study.tn/. [Accès le 12 Mars 2021].
[3] «Coursera,» [Online]. Available: https://www.coursera.org/. [Accès le 8 Mars 2021].
[4] «Openclassrooms,» [Online]. Available: https://openclassrooms.com/fr/. [Accès le 8
Mars 2021].
[5] «Udemy,» [Online]. Available: https://www.udemy.com/. [Accès le 8 Mars 2021].
[6] «Embaucherapide,» [Online]. Available: http://www.embaucherapide.com/9-conseils-
de-recrutement-agile-pour-votre-equipe-dembauche/. [Accès le 9 Mars 2021].
[7] «Invensislearning,» [Online]. Available: https://www.invensislearning.com/blog/stages-
of-agile-transformation/. [Accès le 9 Mars 2021].
[8] «Memoireonline,» [Online]. Available:
https://www.memoireonline.com/10/18/10437/m_Developpement-d-une-application-d-
apprentissage-de-langue3.html. [Accès le 9 Mars 2021].
[9] «Ambysoft,» [Online]. Available: http://www.ambysoft.com/unifiedprocess/agileUP.html.
[Accès le 9 Mars 2021].
[10] «Medium,» [Online]. Available: https://medium.com/swlh/vue-vs-react-vs-angular-what-
framework-would-you-choose-5d77a3680b0d. [Accès le 26 03 2021].
[11] «Soat,» [Online]. Available: https://blog.soat.fr/2016/04/larchitecture-flux-avec-react/.
[Accès le 26 03 2021].

[12] «Nest,» [Online]. Available : https://docs.nestjs.com/. [Acces 30 03 2021]

[13] «Nest,» [Online]. Available : https://selleo.com/blog/why-choose-nest-js-as-your-
backend-framework/. [Acces 30 03 2021]
[14] «mongodb,» [Online]. Available : https://en.wikipedia.org/wiki/MongoDB/. [Acces 30 03
2021]
[15] «PostgreSQL,» [Online]. Available : https://en.wikipedia.org/wiki/PostgreSQL [Acces 30
04 2021]
[16] «mongodb,» [Online]. Available : https://dzone.com/articles/mongodb-the-good-the-bad-
and-the-ugly/. [Acces 30 03 2021]
[17] «ovh,» [Online]. Available : https://en.wikipedia.org/wiki/OVHcloud/. [Acces 30 05 2021]

73
74