Digital Vacation Management
Total Page:16
File Type:pdf, Size:1020Kb
Digital Vacation Management An Electronic Vacation Management System for Karlstad Municipality Heidi Pykäläinen Faculty of Health, Science and Technology Computer Science Bachelor of Science Supervisor: Karl-Johan Grinnemo Examiner: Johan Eklund Date: 2020-06-02 Abstract The digitization of manual handling of paper forms is an ongoing project at Karlstad municipality, and their management of vacation exchanges is one of the first business processes to be digitized. This process involves applicants printing and filling in a vacation exchange paper form, which is submitted to a depart- ment manager for processing, and then forwarded to a payroll administrator for registering. The goal of this thesis was to develop a Proof-of-Concept (PoC) e-service for vacation exchange management at Karlstad municipality. The design of the PoC is based on requirements gathered by interviewing end-users and investigating technical constraints imposed by current systems in place at Karlstad municipality. The PoC is designed as a Web application managing resources from an object database, and an account directory. The implementation was carried out using open source and standardized frameworks. Open source tools were used for the object database and the account directory. The PoC was evaluated against set requirements. Avenues for future work include a more thorough investigation of the account directory at Karlstad municipality. i Contents 1 Introduction 1 1.1 Goal . 2 1.2 Disposition . 2 2 Preliminaries 3 2.1 Basic Technologies . 3 2.1.1 HTML . 3 2.1.2 CSS . 4 2.1.3 JavaScript . 4 2.2 The MERN Stack . 4 2.2.1 MongoDB . 5 2.2.2 Express . 8 2.2.3 React . 9 2.2.4 Node.js . 10 2.3 Axios . 11 2.4 LDAP . 12 2.4.1 OpenDJ . 13 2.5 Passport . 13 3 Requirements 15 iii iv CONTENTS 3.1 Requirements Gathering . 15 3.2 Researching Integration Possibilities . 16 3.3 Discussing the Usual Method of Creating E-services . 18 3.4 Interviews . 19 3.5 Current Systems . 22 3.6 Requirements for the PoC . 22 4 Design 25 4.1 System Architecture . 25 4.2 REST API . 26 4.3 Front-end . 27 4.3.1 User Interfaces . 27 4.4 Back-end . 30 4.5 Application Database . 30 4.5.1 Applications . 30 4.6 Login and Authorization . 31 4.7 Heroma . 32 5 Implementation 33 5.1 Application Database . 34 5.1.1 Storing Applications . 36 5.1.2 Fetching Applications . 37 5.1.3 Updating Applications . 38 5.2 Account Directory . 39 5.3 Passport . 40 5.4 Front-end Client . 42 5.4.1 Front-End to Back-End Communication . 44 CONTENTS v 5.4.2 Managing Users . 45 5.4.3 Submitting Applications . 46 5.4.4 Processing Applications . 47 6 Evaluation 49 6.1 Understanding the Process . 49 6.2 Requirements Gathering . 50 6.3 Comparison Against Requirements . 51 6.4 PoC Demonstration . 53 7 Conclusions 55 List of Figures 2.1 Overview of the MERN stack [39] . 5 2.2 Replication in MongoDB [36] . 6 2.3 LDAP directory information tree example [43] . 12 4.1 The pages in the AUI and the MUI . 27 5.1 Overview of the system architecture . 34 5.2 Account directory information tree in OpenDJ . 40 5.3 The front-end components . 44 vii List of Tables 3.1 General requirements. 23 3.2 Requirements for submitting applications. 23 3.3 Requirements for processing applications. 24 6.1 Unmet requirements for submitting applications. 51 6.2 Unmet requirements for processing applications. 52 ix Chapter 1 Introduction At Karlstad municipality, vacation exchange is today carried out through paper forms. The paper forms are processed by the department managers and manu- ally registered into Heroma, their personnel administrative system, by the payroll administrators. Vacation exchange entails exchanging vacation pay for additional vacation days with pay. The processing and handling of the vacation exchange pa- per forms once a year might not have a big impact on smaller departments, where the employees, department managers and the payroll department are located in close proximity to each other. However, in larger departments, in which employees might not have a designated work space, or in which a hundreds of applications are submitted, the issues regarding the handling of paper forms are more prominent. When applying for vacation exchange, the applicants are required to down- load and print a paper form found on the municipality’s intranet. The form is thereafter to be filled in, and forwarded to their department manager. Inorder to be approved for vacation exchange, the applicant needs to meet the criteria for vacation exchange. In addition to the criteria, the department manager also decides whether an applicant is approved or denied vacation exchange, based on the department’s projected workload and need for personnel. 1 2 CHAPTER 1. INTRODUCTION Karlstad municipality has launched a project to investigate the usage and man- ual handling of paper forms, to which the present project could provide valuable insight. Because a vacation exchange application needs to be printed and filled in by an applicant, processed by a department manager as well as registered by a payroll administrator, digitizing the process should aid all roles involved. 1.1 Goal The goal of this thesis is to compile requirements for, design, and implement a Proof-of-Concept (PoC) e-service for vacation exchange at Karlstad municipality, in order to investigate a possible solution for digitizing the vacation exchange process. 1.2 Disposition In Chapter 2, the dissertation starts by presenting the tools and terms used in this project. Next, Chapter 3 details the requirements gathering process and its final goal, the requirements specification. On the basis of the requirements specification, Chapters 4 and 5 present a design and implementation of aPoC.The PoC implementation is evaluated in Chapter 6. Finally, Chapter 7 concludes the thesis by summarizing the thesis work and compiling conclusions, and proposing avenues for future work. Chapter 2 Preliminaries In this chapter, the relevant techniques used in this bachelor thesis project are described. To start with, the basic technologies HTML, CSS and JavaScript are introduced. Next, the MERN stack and an overview of it’s components are pre- sented in Section 2.2 and its following subsections. After this, the HTTP client Axios is presented. Finally, the Lightweight Directory Access Protocol (LDAP) is described together with the software used to simulate Karlstad municipality’s account directory, OpenDJ and the Node.js middleware Passport. 2.1 Basic Technologies 2.1.1 HTML The standard markup language for documents to be displayed in a Web browser is Hypertext Markup Language (HTML) [15] [40] [59] [62]. HTML is used to define the structure and semantics of the document by using a tree of elements and text. The HTML elements are usually denoted by a start and an end tag, e.g., <html> as the start tag and </html> as the end tag [60]. 3 4 CHAPTER 2. PRELIMINARIES 2.1.2 CSS Cascading Style Sheets (CSS) [15] [57] is a style sheet language which allows apply- ing of styles to and specifying the layout of HTML documents. Styles are applied selectively using rules, which specify the groups of styles that are applied to ele- ments or groups of elements on the Web [5] [11] [32]. Using CSS the documents font, color, size, and spacing can be altered, as well as splitting the content into columns, adding animations and other decorative features [30]. Within the scope of this project, CSS styles are applied manually and generated using Material-UI [27], a React UI framework. 2.1.3 JavaScript JavaScript is used as the scripting language for Web pages as well as in many non- browser environments. JavaScript is a lightweight, interpreted, object-oriented language with first-class functions, meaning that functions are treated likeany other variable [1] [20] [29]. Functions can be passed as arguments to, and returned by other functions, and may also be assigned as a value to a variable [28]. EC- MAScript is the standard for JavaScript. The sixth major version, published in 2015 by ECMA International, officially called ECMAScript 2015, is referred toas ECMAScript 6 or ES6. ES6 introduced classes and ES6 modules to JavaScript [61]. 2.2 The MERN Stack The MERN stack [22] [56] is a combination of four technologies, namely: Mon- goDB, Express, React, and Node.js [63]. The MERN stack is a variant of the MEAN stack [24], which is an open source stack for the development of web appli- cations. The difference between the MEAN and MERN stack is that MERN uses 2.2. THE MERN STACK 5 React instead of Angular as the front-end framework. One of the main advantages of using these stacks is that they are end-to-end JavaScript stacks, meaning that every part of the stack uses the same language. While React is used as the front- end framework, Express is used as the Web framework for the back-end Node.js platform, as illustrated in Figure 2.1. Figure 2.1: Overview of the MERN stack [39] Using the MERN stack, also a common object representation is used every- where within the project, i.e., in the server, on the client, and in the database. This object representation is JSON (JavaScript Object Notation) [6] [56]. In the following subsections, each part of the MERN stack is described in further detail. 2.2.1 MongoDB MongoDB [10] [14] is a NoSQL (“non relational”) document database. This means that the data records stored in MongoDB are documents, which are composed of field and value pairs [34]. Documents are stored as BSON (Binary JSON) objects, which are similar to JSON objects, but contain more data types [12].