1. Ministry of Higher Education and Scientific Research
La Manouba University
National School of Computer Science
Internship Project Report
Performed by
Adel Belasker
Subject
MOBILE AND WEB APPLICATION FOR TIME
MEASUREMENT IN A PRODUCTION ENVIRONMENT
Host Organisation : ISyE-PD department - Ghent University
Supervised By : Prof. Dieter Claeys
Address : Technologiepark 903 9052 Zwijnaarde (Gent) Belgium
Academic Year : 2016/2017

2. Abstract
This work was carried out in order to achieve the summer engineer training which is a part
of the second year engineering formation of the National School of Computer Sciences. The
objective of this project consists in designing and implementing a Mobile and Web application
that make a Time Measurement study in industrial environment in order to get a clearer view
of production process and to improve productivity. I have realized a Mobile application that
lets the user to create and fill time sampling surveys which will be automatically sent to a
remote Database then the user can view surveys results into meaningful charts via The Web
app that I also realized
Key words : Work Measurement, Work Sampling, Ionic 2 , Angular 2 , CouchDB , PouchDB
, Django , Python , D3 charts .

3. 1

4. Signatures

5. Acknowledgement
Iwould like to express my gratitude to all those who supported me and provided me the
possibility to complete and accomplish this research Internship. I would like to show my
greatest appreciation to Prof.El-Houssaine Aghezzaf , Prof. Dieter Claeys and Prof. Stijn De
Vuyst for giving me the opportunity to join the Industrial Systems Engineering and Product
Design team, and providing me the support that made me complete this project on time. I
also would like to extend my sincere gratitude to Mr. Karel Bauters and Mr. Kurt De Cock for
the help and discussions we had during the internship. And I am grateful to all the ISyE-PD
family for creating a positive and confortable work environment.
Finally I acknowledge with much appreciation the jury members for having honored me by
agreeing to evaluate this work.

6. Contents
Glossary of Acronyms 1
General Introduction 2
1 The general context 3
1.1 Presentation of the host Institution . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.1 Ghent University . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1.2 ISyE-PD department . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Preliminary Study 6
2.1 State of the art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.1 Scientific Terms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Study of existing solutions and critics . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Our proposed solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3 Requirements Analysis and Specification 14
3.1 Requirement Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.1 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.2 Non-Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Requirement Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2.1 Actors identification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
i

7. CONTENTS
3.2.2 Use Case Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2.3 Description of the most relevant nominal scenarios . . . . . . . . . . . . . 16
4 Design 19
4.1 Global design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.1 Physical architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.2 Web application Physical architecture . . . . . . . . . . . . . . . . . . . 19
4.1.3 Logical architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Detailed Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.2.1 Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.2.2 Activity Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5 Achievement 27
5.1 Developing Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.1.1 Hardware Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.1.2 Software and development Environment . . . . . . . . . . . . . . . . . . 28
5.2 Technical Choices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.2.1 Development Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.2.2 Development Framework . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.3 Achieved Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.3.1 Mobile Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.3.2 CouchDB Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.3.3 Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
General Conclusion 42
Netography 43
ii

8. List of Figures
1.1 Ghent University Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 The Faculty of Engineering and Architecture . . . . . . . . . . . . . . . . . . . . 4
2.1 « Work Measurement Techniques » . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Record sheet example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Data recording Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Data Capture on Mobile Phone . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5 Reporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1 System’s Use Case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2 Mobile Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3 Web Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.1 Physical Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Hybrid Mobile application Physical architecture . . . . . . . . . . . . . . . . . . 21
4.3 Logical Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.4 Database Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.5 Activity Diagram for Web Application . . . . . . . . . . . . . . . . . . . . . . . 24
4.6 Activity Diagram for Mobile Application . . . . . . . . . . . . . . . . . . . . . . 25
5.1 CouchDB Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
iii

9. LIST OF FIGURES
5.2 CouchDB replication Protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.3 Ionic Framework Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.4 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
5.5 Add Survey Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.6 Start Survey Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.7 Observation Form Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.8 Survey Database documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.9 Survey attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.10 Register Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.11 Account Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.12 Home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.13 Surveys resume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.14 Observations analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
iv

10. Glossary of Acronyms
API : Application programming interface, a particular set of rules (’code’) and specifications
that software programs can follow to communicate with each other.
JSON : JavaScript Object Notation
HTML : HyperText Markup Language is the main markup language for displaying web
pages and other information that can be displayed in a web browser.
NoSQL : (originally referring to "non SQL" or "non relational") database provides a mech-
anism for storage and retrieval of data
HTTP : The Hypertext Transfer Protocol is an application protocol for distributed, col-
laborative, and hypermedia information systems
IDE : Integrated Development Dnvironment is a software suite that consolidates the basic
tools developers need to write and test software .
1

11. General Introduction
W
ith today’s increasing global competition among producers of products or providers of
services , there has been an increasing efforts towards Work Measurement techniques
and tools that help industries knowing accurately the state of their workers and/or machines
in their production environment ,in the interest of increasing productivity .
That’s why many large companies are engaging in research studies which focus on getting
an accurate picture of their productive time in order to establish time standards based on facts
and scientific methods rather than the use of estimates based on judgment or experience .
Therefore the department of Industrial Systems Engineering and Product Design in GHENT
University is engaged and is putting some of its efforts on designing new and innovative Time
measurement tools and methods .
In this context me, as a research Intern , I worked on creating a Mobile and Web applica-
tion for time measurement that intend to get an accurate picture of the productive time in a
production environment to reveal the root causes behind ineffective/idle time .
My work is presented throughout this report accordingly to the following plan:
In the first chapter, I shed the light on some of the most important keywords of the work
and provide a brief literature review. Then I studied the existing solutions, evaluate their
efficiency and present our solution. In the second chapter, I made a list of the functional and
the non-functional requirements related to our application. In addition, Ipresent several use-
case diagrams to clarify the main features of our solution. In the third chapter, I described
the application’s architecture and its design. In the last chapter, I detailed the description of
different technologies used to build the project and present the main interfaces using screen-
shots.
Finally, I conclude this report by giving future prospects and potentials upgrades for my
work .
2

12. Chapter 1
The general context
The interest of this first chapter is to situate the project in its general framework, and to set
the context and the goals for our work. In this chapter, I will present the host research and
development centre, its services and areas of research.
1.1 Presentation of the host Institution
1.1.1 Ghent University
Located in Flanders, the Dutch-speaking part of Belgium and the cultural and economical heart
of Europe, Ghent University is an active partner in national and international educational,
scientific and industrial cooperation .
Figure 1.1: Ghent University Logo
[N1]
Ghent University (UGent) was founded in 1817 by King William I of Orange. As a Flemish
3

13. CHAPTER 1. THE GENERAL CONTEXT
university, most of UGent’s 230 degree programs are taught in Dutch, although a few of its
graduate degrees are offered in English. Ghent University is a top 100 university and one
of the major Belgian universities counting over 41,000 students and 9,000 employees. Its 11
faculties offer a wide academic portfolio, including courses in every scientific discipline, while
its research investment averages around £180million annually. UGent prides itself on being
among the leading universities in the world with a global reputation that attracts talented
students and teachers. It boasts associations with several Nobel Prize winners, among them
Joseph Guislain, Walter Fiers, Marc Van Montagu and Peter Piot. While its alumni include
such notables as Robert Cailliau, who collaborated with Tim Berners-Lee in developing the
internet, and the astronaut Dirk Frimout.
The university’s main campus is located close to the city centre. It also has a campus by
the sea in Ostend, home to the GreenBridge incubation and innovation center that provides
facilities for start-up technology companies, and conducts sustainability research into seas and
oceans.[N0]
1.1.2 ISyE-PD department
ISyE-PD works on design and optimization methods for factory systems, including logistic
systems, quality systems, facilities design and work methods. The lab is equipped with state-
of-the-art CAE systems for factory and work design, and simulation and optimization work-
benches.
The ISyE-PD department belongs to The Faculty of Engineering and Architecture which is one
Figure 1.2: The Faculty of Engineering and Architecture
[N2]
of the largest faculties of Ghent University. It combines state-of-the-art research with top-notch
education in all significant engineering and architecture fields. The faculty strongly focusses
on international relations. It offers a wide array of master’s programmes taught in English and
4

14. CHAPTER 1. THE GENERAL CONTEXT
is active in all major exchange programmes. Through research collaboration and educational
links with top European institutions, the faculty strives to further enhance its international
perspective.
5

15. Chapter 2
Preliminary Study
In this chapter, I start by studying the state of the art and I’ll present the most important
concept used in my project .Then I’ll study the existing solutions by defining their efficiency
and their imperfections. Then I’ll criticize these solutions and present my own .
2.1 State of the art
To be able to develop my project, a state of art study is required. It helps understand the
theoretical parts and steps behind my work that will be used to accomplish this work. I devote
this part to explain some Scientific terms .
2.1.1 Scientific Terms
Ë Work measurement :
As the name suggests , provides us with means of measuring the time taken in performing
an operations or series of operations in such way that ineffective time is shown up and can
be separated from effective time . Then we can reveal the existing causes of ineffective
time where previously where concealed /hidden within the total .
Also work measurement has another role to play , it can be used to set standard times for
carrying a work , which will be very useful to immediately detect an excess over standard
time due to ineffective time .
6

16. CHAPTER 2. PRELIMINARY STUDY
We use Work measurement to :
• To discover and eliminate lost or ineffective time.
• To balance the work of members of teams ,so that, each member has a task which
takes an equal time to perform .
• To establish standard times for performance measurement.
• To provide information that enable estimates to be made for selling prices and de-
livery dates .
• To set operating goals and objectives.
Work measurement techniques :
Figure 2.1: « Work Measurement Techniques »
[N3]
Ë Work sampling :
In order to obtain a complete and accurate picture of the productive time and idle time
of the machines in a specific production area , it would be quite impossible to do this
unless a large number of workers spent the whole of their time on this task alone which is
an unrealistic proposition . That’s why we opt to use Work sampling to have a picture of
the productive time which is defined as : “ a method of finding the percentage occurrence
of a certain activity by statistical sampling and random observations .”
7

17. CHAPTER 2. PRELIMINARY STUDY
One important usage of the work sampling technique is the determination of the standard
time for a manual manufacturing task. Similar techniques for calculating the standard
time are time study, standard data, and predetermined motion time systems.[wiki]
Work sampling is :
• Simple ,fast and low cost technique .
• Can be used advantageously in a wide variety of situations ,such as manufacturing,
service ,office operations , healthcare , kindergarten and even for self observation .
• Effective for determining machine and personnel utilization and production stan-
dards .
Work sampling steps :
1. Determine the activities to be sampled
2. Take a preliminary estimates of the activities on which information is sought
3. Compute of sample size required
4. Prepare a schedule for random observations
5. Designing a record sheet to meet the objectives of the study
6. Observations and data recording
1. Determine the activities to be sampled :
Make a study for the working environment and select the job to be studied and determine
the objectives of the study .
2. Take a preliminary estimates of the activities on which information is
sought :
This estimates can frequently be made from historical data . If the analyst cannot make
reasonable estimates then he should work sample the area for two or three days and use
that information as the basis for these estimates .
3. Compute of sample size required :
Before determining the sample size (the number of observations ) the analyst must know
the desired accuracy of the results (confidence level) which is most commonly 95 per cent .
Work sampling is based on Binomial distribution , but when n (number of observations )
is sufficiently large the Binomial distribution can very closely approximated to the normal
8

18. CHAPTER 2. PRELIMINARY STUDY
distribution .
Then for each activity we can compute N (the sample size that should be ) as mentioned
below :
N =
Zp(1 − p)
l2
(2.1)
Where :
p = preliminary estimate
l = tolerated error
Z = for 95 per cent confidence level is 1.96 which can be rounding to 2 in such cases
4. Prepare a schedule for random observations :
To ensure that the observations are valid and not biased the analyst have to make random
observations schedule ,using certain techniques like random tables , that adequates the
time available and the number of observations required .
5. Designing a record sheet to meet the objectives of the study :
The analyst should design a personalized observation form ,that meets the study objec-
tives , to record the data that will be gathered during the work sampling study .
Figure 2.2: Record sheet example
[N4]
9

19. CHAPTER 2. PRELIMINARY STUDY
6. Data recording Observations :
After recording the data using different means , the analyst can start to analyze the data
and calculate daily and cumulative results then prepare graphs and charts to extract
meaningful results .
Figure 2.3: Data recording Flow
[N4]
2.2 Study of existing solutions and critics
In order to present a good understanding of the Time measurement science and to meet the
real needs of Companies, I think it is essential to start this project with a study of existing
solutions .That’s why I proceed to a critical and comparative study and enumerate some of the
existing projects :
• UTMplus :
10

20. CHAPTER 2. PRELIMINARY STUDY
Collecting data on a mobile device with UmtPlus is more than 50 % faster than using a
stopwatch. Furthermore, by eliminating the step of manual data entry, you minimize the
risk of potential error.
UmtPlus is your essential tool to identify waste, optimize your resources, and increase
your productivity. It’s easy, we’ll show you how.
Its main functionalities are :
Data Capture :
– Program your own set of elements to observe
– Times captured to 1/100th of a second
– View and edit all observations at any time while on the floor
– Use multiple mobile devices at once to collect data
Figure 2.4: Data Capture on Mobile Phone
[N5]
Reporting :
UMT Plus comes with a sophisticated statistical analyses module. Numerous options to
11

21. CHAPTER 2. PRELIMINARY STUDY
help you share results automatically and simultaneously with your organization. Data
can be directly sent to any MS Excel template or to an ODBC data base, or can be used
in any of the included report template [N5].
Figure 2.5: Reporting
[N5]
The major drawbacks of using such applications is that their services are paid and not
available all the time. In addition to that, its user interface is not ergonomic and friendly.
Also UMT plus do not fellow the exact scientific Work Sampling steps mentioned above .
12

22. CHAPTER 2. PRELIMINARY STUDY
2.3 Our proposed solution
My solution’s purpose is to implement the same main features of the UTM Plus application
mentioned above . The major features that can differentiate my work from the competitor are
:
Non-paid Application based on open source technologies .
Sampling tool based on an accurate scientific method
Offline mobile database and automatic synchronization with a remote Database
Conclusion
In this chapter I went through a conceive study of the state of the art by mentioning the
important aspects used in our project . Besides I enumerates the existing solution by presenting
its advantages and drawbacks . In the next chapter I will present the specification and analysis
of the requirements in order to discern the functionalities of the project I aim to set up .
13

23. Chapter 3
Requirements Analysis and Specification
This chapter is intended to present and analyze our project in a formal way. I will specify the
functional and non functional requirements of our application. Then I will enumerate the main
actors of our work . Finally, I will formalize the main features using Use Case diagrams and
then I show the project’s principal scenarios using system sequence diagrams.
3.1 Requirement Analysis
Within this section, I identify and present the different functional and non functional require-
ments that our application should realize.
3.1.1 Functional Requirements
Functional requirements refer to primary functions that the application once developed must
fulfil. The services that our application should provide are :
Survey Creation The Mobile application must provide the user/analyst with an inter-
face where he can create custom survey .
Random observation generation The Mobile application must be generate randomly
and within a certain period of time a certain number of observations where the user/an-
alyst can record its sampling observations .
14

24. CHAPTER 3. REQUIREMENTS ANALYSIS AND SPECIFICATION
Surveys Storage The Mobile application must be able to must be able to store surveys
and samples locally and synchronize with a remote database .
Surveys resume and analytics The Web application must be able to list all created
surveys and make a resume with analytics for each one .
3.1.2 Non-Functional Requirements
Non-functional requirements refer to several key features that are beyond of the application’s
main goals, but vital for its operation. These features ensure user’s satisfaction.
Extensibility In order to take growth into consideration, it is possible to add new func-
tionalities or extend the capabilities of the application without having to modify and
adapt a lot of code.
Security The user can’t access the web application unless he has been authenticated. He
should already be registered in the database .
Reliability and Fiability The Mboile application must work without breakdown and
in case of connection failure it had to offer available services .
Ergonomy The graphic interface must be ergonomically designed so that even novice
user can use the software properly.
3.2 Requirement Specification
This section offers a better understanding of the requirements mentioned above by declaring
them in a semi-formal way. Also this part of report will show the interactions between actors
and our application using use case diagram.
3.2.1 Actors identification
The Observer he is the primary user of the Mobile application where he can create ,
delete and list surveys and where he record the random observations .
15

25. CHAPTER 3. REQUIREMENTS ANALYSIS AND SPECIFICATION
The Administrator he has the full control of the Web application and the remote
Database , he can add , delete or modify the database.
The Analyst he is the primary user of the Web application as he is the prime beneficiary
of all the services the application must provide .
3.2.2 Use Case Diagrams
Figure 3.1 describes the Use Case diagram which illustrates main functional requirements .
Figure 3.1: System’s Use Case
3.2.3 Description of the most relevant nominal scenarios
In this section, I present the important nominal scenarios in our application using the System
Sequence Diagrams. In a brief description, System Sequence Diagram gives the sequence of
16

26. CHAPTER 3. REQUIREMENTS ANALYSIS AND SPECIFICATION
actions between the user and the our application which is composed of Mobile and Web part .
This scenario is illustrated by Figure 3.2 and 3.2 .
Figure 3.2: Mobile Sequence Diagram
17

27. CHAPTER 3. REQUIREMENTS ANALYSIS AND SPECIFICATION
Figure 3.3: Web Sequence Diagram
Conclusion
In this chapter, I have detailed functional and non-functional requirements of our web applica-
tion and its main actors then I use a Use Case Diagram to describe our system main functional
requirements . In the next chapter I will go through design phase that meet the requirements
mentioned above .
18

28. Chapter 4
Design
Specifying basics requirements is crucial to any software development , but what’s more
important is to be able to model and to express these requirements in meaningful way . In
this context and throughout this chapter I am going to focus on design phase by clarifying
our projects main architecture as well as its components’ architecture , which will prepare the
ground for the implementation phase . I start by specifying the global design.
4.1 Global design
In this section, I will study our architecture choices in order to prove that it correlates with our
project’s goals.
4.1.1 Physical architecture
4.1.2 Web application Physical architecture
The multi-tier architecture: In software engineering, multi-tier architecture (often referred
to as n-tier architecture) is a client–server architecture in which the presentation, the appli-
cation processing, and the data management are logically separate processes. For example,
an application that uses middleware to service data requests between a user and a database
employs multi-tier architecture. The most widespread use of multi-tier architecture is the three-
19

29. CHAPTER 4. DESIGN
tier architecture. N-tier application architecture provides a model for developers to create a
flexible and reusable application.[Wikipedia]
By breaking up our application into tiers, I opt to use The Three-tier architecture.
The three tiers in a three-tier architecture are:
• Presentation Tier: Occupies the top level and displays information related to services
available on a website. This tier communicates with other tiers by sending results to the
browser and other tiers in the network.
• Application Tier: Also called the middle tier, logic tier, business logic or logic tier, this tier
is pulled from the presentation tier. It controls application functionality by performing
detailed processing.
• Data Tier: Houses database servers where information is stored and retrieved. Data in
this tier is kept independent of application servers or business logic. [Quora]
Figure 4.1: Physical Architecture
[N6]
20

30. CHAPTER 4. DESIGN
Hybrid Mobile application Physical architecture
Hybrid application – a web application “encased” in a native shell. Hybrid applications are
installed from the online shop (just like the native ones) and have access to the same functions
of the mobile device, but are developed using HTML5, CSS and JavaScript. Unlike the na-
tive applications, hybrid applications can migrate between different platforms, although their
performance is not as good as that of the native applications.
Figure 4.2: Hybrid Mobile application Physical architecture
[N7]
The mobile application uses the capabilities of the Cordova framework to create hybrid
applications that are treated as native on a mobile device. The Cordova framework provides
access to the mobile application API for interacting with the database or hardware, such as
cameras and memory cards. Cordova also provides so-called native plug-ins for working with
the APIs of different mobile platforms (iOS, Android, Windows Phone, etc.). Additionally,
developing custom plug-ins enables adding new functions and expanding the API. [N12]
4.1.3 Logical architecture
Due to that my project is composed of different component with different architecture ,I used
a non traditional Logical architecture which can resumed in the Figure 4.3 .
21

31. CHAPTER 4. DESIGN
Figure 4.3: Logical Architecture
4.2 Detailed Design
4.2.1 Database
I used a Database architecture a bit different from traditional applications architectures , this
difference is due to that my project is composed of different parts . The figure 4.4 illustrates
my database architecture in a semi-formal way .
22

32. CHAPTER 4. DESIGN
Figure 4.4: Database Architecture
As the figure is illustrating the Mobile application is using Pouchdb as a local NoSQL
Database which is synchronizing with a remote Database called CouchDB , the two NoSQL
Databases are using Replication Protocol in order to have the exact database image in both
Databases .
In the second part of the project , the web Application is invoking REST service provided by
CouchDB in order to retrieve surveys Database . Also The Web Application is using Post-
greSQL to store registration details .
4.2.2 Activity Diagrams
Figure 4.5 describes the work-flow of the entire process of the web application.
23

33. CHAPTER 4. DESIGN
Figure 4.5: Activity Diagram for Web Application
24

34. CHAPTER 4. DESIGN
Figure 4.6 describes the work-flow of the entire process of the Mobile application.
Figure 4.6: Activity Diagram for Mobile Application
25

35. CHAPTER 4. DESIGN
Conclusion
All along this chapter I detailed the design of our application while presenting its physical and
logical architecture and different UML diagrams that I used in our prototype .
All the above work is in order to prepare for the upcoming chapter .
26

36. Chapter 5
Achievement
This chapter discusses the implementation of the application’s components.
We begin by presenting the development tools supporting the choices made then proceed
to the software environment and end the chapter by displaying some interfaces of the achieved
work.
5.1 Developing Environment
5.1.1 Hardware Environment
During the realization of the application, one computer was used. The characteristic of this
computer is provided in the below Table 5.1.1.
Laptop1 : Lenovo G50
Processor 2.4 GHz
Ram 16 GB
Hard Drive 1 TB
Table 5.1: Characteristic of used computer
27

37. CHAPTER 5. ACHIEVEMENT
5.1.2 Software and development Environment
In this part, I list the different software products I used throughout the development of the
application :
Ë ShareLaTeX
ShareLaTeX is an open-source online real-time collaborative LaTeX editor. We run a
hosted version at http://www.sharelatex.com .
Ë Visual Studio Code
VS Code is a new type of tool that combines the simplicity of a code editor with what de-
velopers need for their core edit-build-debug cycle. Code provides comprehensive editing
and debugging support, an extensibility model, and lightweight integration with existing
tools.
Ë Pycharm IDE
PyCharm is an Integrated Development Environment (IDE) used in computer program-
ming, specifically for the Python language. It is developed by the Czech company Jet-
Brains. It provides code analysis, a graphical debugger, an integrated unit tester, integra-
tion with version control systems (VCSes), and supports web development with Django.
[Wiki]
Ë CouchDB :
Apache CouchDB is open source database software that focuses on ease of use and
having a scalable architecture. It has a document-oriented NoSQL database architec-
ture and is implemented in the concurrency-oriented language Erlang; it uses JSON to
store data, JavaScript as its query language using MapReduce, and HTTP for an API
.[https://en.wikipedia.org/wiki/CouchDB]
Figure 5.1: CouchDB Logo
[N8]
28

38. CHAPTER 5. ACHIEVEMENT
Apache CouchDBTM
lets you access your data where you need it by defining the Couch
Replication Protocol that is implemented by a variety of projects and products that span
every imaginable computing environment from globally distributed server-clusters, over
mobile phones to web browsers.
The Couch Replication Protocol lets your data flow seamlessly between server clusters
to mobile phones and web browsers, enabling a compelling, offline-first user-experience
while maintaining high performance and strong reliability.[http://couchdb.apache.org/]
Figure 5.2: CouchDB replication Protocol
[N9]
Ë JSON
JSON is designed to be a data interchange format which is human readable and easy for
computers to parse and use. JSON is directly supported inside JavaScript and is best
suited for JS applications; thus providing significant performance gains over XML, which
requires extra libraries to retrieve data from Document Object Model (DOM) objects.
JSON is estimated to parse up to one hundred times faster than XML in modern browsers.
Also, JSON uses context to avoid ambiguity, just as programming languages do,” that
validation of inputs is the responsibility of individual domain applications .[N11]. the next
lines describes an example where JSON is used to encode a firstname and a lastname.
{ "firstname" : "John",
"lastname" : "Smith" }
29

39. CHAPTER 5. ACHIEVEMENT
5.2 Technical Choices
In this section, we discuss the technical choices we made to achieve our application. We start
by presenting the languages used in the development of the project. Afterwards, we defend our
choice for the frameworks we used.
5.2.1 Development Language
The programming languages we used throughout the development phase are:
• Python : Python is an interpreted, object-oriented programming language similar to
PERL, that has gained popularity because of its clear syntax and readability. Python is
said to be relatively easy to learn and portable, meaning its statements can be interpreted
in a number of operating systems, including UNIX-based systems [http://whatis.techtarget.com/defin
. I used python to develop the Django web application .
• Typescript: TypeScript is a free and open-source programming language developed and
maintained by Microsoft. TypeScript is a typed superset of JavaScript that compiles
to plain JavaScript. It offers classes, modules, and interfaces to help you build robust
components.
" TypeScript is a language for application-scale JavaScript development. " [https://www.typescriptlan
. I used Typescript language in Angular 2 framework to develop the Ionic 2 Mobile ap-
plication .
5.2.2 Development Framework
• Ionic Framework : Ionic is a complete open-source SDK for hybrid mobile app de-
velopment . The original version was released in 2013 and built on top of AngularJS
and Apache Cordova. The more recent releases, known as Ionic 2 or simply "Ionic", are
built on Angular. Ionic provides tools and services for developing hybrid mobile apps
using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web
technologies and then distributed through native app stores to be installed on devices by
leveraging Cordova .
30

40. CHAPTER 5. ACHIEVEMENT
Figure 5.3: Ionic Framework Architecture
[N10]
• Angular 2 :
Angular 2 is the next version of Google’s massively popular MV* framework for building
complex applications in the browser (and beyond).
Angular 2 comes with almost everything you need to build a complicated frontend web
or mobile apps, from powerful templates to fast rendering, data management, HTTP
services, form handling, and so much more.
• Apache Cordova :
Apache Cordova is an open-source mobile development framework. It allows you to use
standard web technologies - HTML5, CSS3, and JavaScript for cross-platform devel-
opment. Applications execute within wrappers targeted to each platform, and rely on
standards-compliant API bindings to access each device’s capabilities such as sensors,
data, network status
• Django Framework :
Django is a high-level Python Web framework that encourages rapid development and
clean, pragmatic design. Built by experienced developers, it takes care of much of the
hassle of Web development, so you can focus on writing your app without needing to
reinvent the wheel. It’s free and open source.
31

41. CHAPTER 5. ACHIEVEMENT
5.3 Achieved Work
In this section, I will present the most important interfaces of the Mobile and Web Application
. These Interfaces can give a clearer idea of the results of my work. They are in fact the fruit
of the phases of analysis, design and coding.
5.3.1 Mobile Application
Home Page
The User can view and manage all already created surveys via below interface .
Figure 5.4: Home Page
32

42. CHAPTER 5. ACHIEVEMENT
Add Survey Page
The user can create a survey by filling a dynamic form which is illustrated in the below figures.
Figure 5.5: Add Survey Interface
Start Survey
When the User clicks on Start Survey there is a scheduler that runs in background that will
generate random observations , then the User will be automatically redirected to Survey Lab
page where he can see pending surveys .
33

43. CHAPTER 5. ACHIEVEMENT
Figure 5.6: Start Survey Interfaces
Survey Observation Interfaces
The below Interface pops up in a random moment where the User at first choose the status
type of the Worker/Machine and then choose the estimated reason behind an Idle status or
choose the type of operation in case if the User chose the Working Status .
34

44. CHAPTER 5. ACHIEVEMENT
Figure 5.7: Observation Form Interfaces
5.3.2 CouchDB Database
CouchDB Interface
The below Interface shows the Survey database’s documents where we can add, manage and
configure databases and its documents .
Figure 5.8: Survey Database documents
35

45. CHAPTER 5. ACHIEVEMENT
The Figure 5.9 illustrates one survey attributes in CouchDB
Figure 5.9: Survey attributes
36

46. CHAPTER 5. ACHIEVEMENT
5.3.3 Web Application
Register Page
To benefit from the services of the application, the user is invited to create an account User,
by completing the form described in Figure 5.10 and by confirming
Figure 5.10: Register Page
Authentification and Home page
The user must access his Account by entering their Username and Password, and then clicking
on the button Submit , then he will be redirected to the home page .
37

47. CHAPTER 5. ACHIEVEMENT
Figure 5.11: Account Login
Figure 5.12: Home page
38

48. CHAPTER 5. ACHIEVEMENT
Surveys resume page
After the authentication,User can see all created surveys and some of its details as shown below
:
Figure 5.13: Surveys resume
Surve’s observations analytics
When the user chose one survey among created ones , the application computes some statistics
and shows into charts the percentage of Idle and Working status of the worker/machine .
39

49. CHAPTER 5. ACHIEVEMENT
Figure 5.14: Observations analytics
40

50. CHAPTER 5. ACHIEVEMENT
Conclusion
During this chapter, we presented the technologies and software environments that were chosen
to implement our project . We also presented the frameworks and technical choices that was
used and I finished by displaying the main features and interfaces of the application.
41

51. General Conclusion
M
any organizations aren’t sure how much time studies can improve their operations, and
therefore profit. And, some of those who do recognize how critical the studies are still
perform them the "old way" with a stopwatch and notepad. Our proven time measurement
app replaces the long process of using stopwatches and notepads, eliminating the tedious task
of data entry, making time studies and work sampling easier and more efficient . This tool is
among best solutions to see where time is being spent and measure non value adding activities
to identify wasted time and to help in setting standards and performance ratings that enables
continuous improvement .
As an effort to put the project idea into practise , I focused on creating a Mobile applica-
tion that helps in creating custom surveys and in generating random observations that will be
recorded by the user of the app ,also the project is composed of a web application that retrieves
created surveys from a remote database and computes some statistics then show it to the User
into meaningful charts .
To be able to do this we pass through a detailed work flow .The first step was to collect infor-
mation about some theoretical aspects related to our project . Secondly we start looking into
existing solutions , understand its main features and its technical choices . Next we specified
our application’s requirements by enumerating its functional and non-functional requirements
and elaborating some UML diagrams . The fourth part was to discuss our architecture patterns
choices and detailed our design with sequence and activity diagram . The last part to talk about
used software environments and finally illustrate our solution main features bu showing some
screen shots .
To conclude ,I hope to continue working on this project and add new features and
upgrades . I could enhance my app results by displaying other charts and graphs , and try to
implement a Machine Learning algorithm that uses observations flow related to Worker/Ma-
chine and other external parameters in order to determine the most efficient schedule .
42

52. Netography
[N0]: www.timeshighereducation.com
[N1]:http://www.books-not-bombs.com/ugent
[N2]:https://www.elis.ugent.be/en
[N3]:http://kalyan-city.blogspot.com/2013/02/work-measurement-techniques-methods-or.html
[N4]:Methods Time Measurement: Harold Bright Maynard
[N5]:http://www.laubrass.com/umtplus
[N6]:http://www.cardisoft.gr/frontend/article.php?aid=87cid=96
[N7]:https://cordova.apache.org/docs/en/latest/guide/overview/)
[N8]:https://svn.apache.org/repos/asf/couchdb/supplement/logo/
[N9]http://blogtech.soprasteria.com/2016/09/05/synchronisation-multi-client-avec-couchdb-
et-pouchdb/
[N10]:https://www.slideshare.net/Codemotion/lucio-grenzi-use-ionic-framework-to-develop-
mobile-application
43

53. [N11]:https://en.wikipedia.org/wiki/JSON
[N12]:https://academy.bpmonline.com/documents/technic-sdk/7-10/mobile-app-architecture
44