Quick Recruitment Web system by React and

Azure platform

Hoang Anh, Vo

2020 Laurea

Laurea University of Applied Sciences

Quick Recruitment Web system by React and Azure platform

Hoang Anh, Vo

Business Information Technology

Thesis

February, 2020

Laurea University of Applied Sciences Abstract

Degree Programme in Business Information Technology

Bachelor’s Thesis

Hoang Anh Vo

Quick Recruitment Web system by React and Azure platform

Year 2020 Number of pages 43

The aim of this thesis project was to complete a Quick Recruitment Web system using the Re-

act and Azure platform for Kassavirtanen Oy.

To achieve this goal, several objectives were established. These involved designing the UI,

the UX of the product, implementing create-, update-, delete- functions of the job advertise-

ment as well as a survey and creating APIs and SQL databases corresponding with those func-

tions. At the end of this project the system had a complete UI from the front-end and back-

end with APIs. Many features were implemented. The company was able to create, delete,

and update the survey and get the URL link from a created survey, while jobseekers were

able to get the public URL link in order to complete a list of questionnaires. As a result, all

features would be operated properly.

The React library and Azure function framework for development could be utilized. Following

the official React and Azure documentation would keep the project implementation on track.

A case study approach was carried out in this thesis with qualitative research method through

gathering feedback from two target user groups via interviews. By analyzing the collected

data, the project was developed successfully in terms of functionality, user experience and

performance with minor needed improvements in user interface in the next development

phrase.

Keywords: Web Development, Recruitment, Recruitment Platform

Table of Contents

1 Introduction ............................................................................................ 5

2 Literature review ...................................................................................... 5

3 Using React in Front-end development ............................................................ 8

3.1 React foundation. ............................................................................ 8

3.2 Lifecycle of component. .................................................................... 9

3.3 Styling with JSX............................................................................. 11

3.4 State and Props managements. .......................................................... 12

4 Using Azure platform in back-end development. ............................................... 14

4.1 Azure platform fundamental. ............................................................ 14

4.2 API server with Azure function ........................................................... 15

4.3 Database with Azure SQL ................................................................. 16

5 Case Study: Kassavirtanen Oy - Building a Quick recruitment system with React and Azure

platform. ................................................................................................... 16

5.1 Functional requirement. .................................................................. 17

5.2 Non-functional requirement. ............................................................. 17

5.3 Application design ......................................................................... 18

5.4 Application initial installation ............................................................ 21

5.5 Front-end react implementation ......................................................... 24

5.6 Back-end application implementation. ................................................. 30

5.7 Application testing. ........................................................................ 35

6 Suggestions and conclusion. ....................................................................... 38

Figures ..................................................................................................... 42

Tables ...................................................................................................... 43

Appendices .............................................................. Error! Bookmark not defined.

5

1 Introduction

This thesis topic will focus on the usage of React and Azure platform in Quick recruitment sys-

tem development in Kassavirtanen Oy.

Firstly, the history of recruitment would be mentioned as extended information with the

technologies involved in the nearest century. The recruitment process and system have

evolved during the decades stemming from the World War II to the current decade. However,

the changes of technologies and services since 1999 would be discussed more since it captures

the overall recruitment situation over nearly 20 years.

Then, there are overviews of React fundamentals and Azure platform basics in which fea-

tures, characteristics of those technologies will be revealed. The advantages of React and Az-

ure will be specified, which are also the reasons they are chosen rather than other platforms.

Finally, this research conducts the summary of Quick recruitment application development

through three main stages which are planning, implementing and testing phrase. Specifically,

planning stage will be divided into functional requirement, non-functional requirement and

application design while implementation stage includes front-end and back-end development

following by the testing phrase.

2 Literature review

Recruitment process originated from World War II period. The primary motivation behind this

was the lack of men who have been called for War supplement. In order to fulfil the gap of

vacancies of serviceman during the war, recruitment agencies have been established to solve

the existing issues. Even though there was an end of the war, job agency companies still

played a pivotal role in landing the job market for returning solders. (PrincePerelson 2019)

After that, the presence of job paper applications appeared few decades later. Due to the

limitation of jobs in the market, those organizations have started figuring out the best poten-

tial matched demand of employers. Therefore, the invention of paper resumes was born in

which skillsets and competences of applicants are showed in writing style. At this stage of his-

tory, recruiters have to publish the job vacancies in newspaper and parallelly save uncounta-

ble non-digital applications while jobseekers are supposed to apply through post or approach

directly to employer’s address. This illustrated the ponderation of precedent recruitment pro-

cess in regards paper applications. (PrincePerelson 2019)

6

In 1948, The first programing computer was invented by Frederic Williams altering entirely

recruitment system (Computer Hope 2019). Application Tracking System or ATS working with

digital database allowed recruiters to query suitable applications faster and more convenient.

On 6 August 1991(Bryant 2011), World Wide Web was publicly exposed literally boosting the

potential power of traditional recruitment process. The previous hiring activities only influ-

enced locally while the Internet enabled agencies to access numerous candidates globally re-

gardless of their locations. Many online sites and social platforms generated during Internet

era have offered the great opportunities for recruiters to have the wider search in seeking the

most talent employees on global scale.

At this stage, most recruitment companies pursued to become tech-driven companies which

were heavily depend on the latest technology in order to figure out the most suitable candi-

dates for their clients. This provided alternative ways of applying to job application remotely

easier and faster. They were likely to submit their resume online via some websites of compa-

nies or agencies instead of heading to placement firm with their non-digital resumes. (Prin-

cePerelson 2019)

Specifically, the recruitment technology and services have been changing dramatically since

1999. There were 3 waves of recruitment innovation in term of processes of seeking candi-

dates, tracking the application process and performing the process.

Figure 1. Recruitment innovation from 1999 to 2016

For finding the candidates, many online job boards have been formed in the late 1990s imme-

diately attracting a huge number of job seekers from traditional newspapers and printed ma-

terials. Giant companies born in this era were CareerBuilder, Monster or Cragslist bringing the

7

fresh experience for both recruiters and those candidates. Even though there were more

emerging recruitment platforms releasing later, those flatforms still accounted for from 10 to

approximately 15 percent of US hires. Then, the second wave of job aggregators and profes-

sional network have disrupted the former one in the beginning of 2000s. At this stage, social

network literately formed two types of job seeker, namely active and passive applicants.

While job portals were the suitable places for active job seekers but there was lack of traffic

transactions involved, job aggregators such as Indeed company offer “Pay per click” service

where they were capable of embedding ads from other web platforms to current system. In-

deed would receive the financial merits based on the number of people clicking on those ad-

vertisements. This kind of services became dominant in the job market contributing nearly

60% of US hires from external sources. Meanwhile, LinkedIn was also a trending company at

that time with numerous profile data available online. The unique selling point of this busi-

ness is that recruiters are able to sort out the potential candidates whether they are in de-

mand of looking for job or not. Free data of applicants are valuable for those recruiters with

proper searching skill. The third wave of recruitment evolution soon appeared with the role

of company branding and ranking. Glassdoor, for example, was company review platform

which was the great combination Yelp with user-centred content and aggregator business

from Indeed turning into the fastest growing job platform with more than 50% of visitors in

US.

Another part is tracking application process in which many traditional organizations opted ATS

or application tracking system as their preferences. The first wave of innovation from 1999-

2004, however, is observed to be the presences of on-premise system. Specifically, the instal-

lations of ATS software have been performed at the working places. The notable company

emerging from this era was Taleo which was acquired later by Oracle accounting for 36% of

the market share. After that, SaaS stands for Software as a Services has come to the competi-

tive market as the second wave. Many firms have become successful during this wave includ-

ing Jobvite and iCIMS. Meanwhile, full packages of HR solution software have been conducted

by two giant companies, namely Orable and SAP. Few years later from 2012, many companies

strived to deliver better user experience. They were likely to create user-friendly and respon-

sive applications in order to make users feel more comfortable and accessible when using

those services. Companies itself provided not only the products but full package of services.

Finally, performing the process also be discussed beginning with the golden era of recruit-

ment agencies in the 1990s. Because of the exclusiveness of applicant’s data, recruiters were

able to offer premium services for their clients with higher package price. Many organizations

have exploited these advantages to become more profitable. Few of them exceptionally grew

into publicly listed companies with strategies of sale-centred content. Then, the wave two

came with two major contrast trends with internal recruitment and outsourcing. The former

one was far more popular when LinkedIn entering the market. It enabled companies to less

8

depend on external recruitment firms and operate their own recruitment process. There was

also the shift from agencies to cooperate firm with more stable working environment. Re-

cruitment process outsourcing (RPO), on the other hand, experienced the fast growth since

there were huge recruitment demands from medium to large organizations. Those firms had

more benefits from cost reduction from outsourcing entire recruitment process. RPO market

would be expected to grow sustainably with 10% per year. Finally, third wave presented

firstly with individual recruiters. Those people had more flexibilities of using recruitment

tools and platforms as well as the working hours along with varieties of working models in

which they have been paid hourly or project based.

As a result, there are many Job Portal platforms emerged as the job hub for jobseeker and

money generation machine for recruitment agencies. However, they are missing some critical

features such as short Job Advertisement with call-to-action button and Quick Survey that

would make the service more attractive to the user. The time for finishing the Job applica-

tion survey is around 30 seconds to 1.5 minutes which is far better than median time of 13

minutes to complete a job application in 500 Fortune Companies. Many of them take nearly 1

hour to finish the job application. (Newton Software)

The shorter time doing the job application, the better chances to get more qualified appli-

cants. If the job application takes longer than 10 minutes, 50% qualified applicants are missed

out. (Newton Software). By doing this, it will shorten the recruitment process with quick re-

sponse from Jobseekers when filling the survey. Therefore, Kassavirtanen Oy has intention to

build Quick Recruitment System to fulfil that gap.

3 Using React in Front-end development

3.1 React foundation.

According Gackenheimer (2015), React is front-end library framework backed up by giant tech

company Facebook. It was first published in 2013 creating the surprise for world developer. It

is built by JavaScript language with an attempt to deal with mutable dynamic dataset and the

complexity of web interface. React itself was born in one of Facebook’s department where

Model-View-Controller architecture is utilized. This model performs two-way data binding

with template rendering. Once React released, it drastically alters the web development with

advanced ideas and algorithms.

React is well-known because of its Virtual Dom. Recognizing the lack of performance in tradi-

tional website technology, Facebook was interested in rebuilding interface performance.

Then, reconciliation was invented in which a set of DOM (Document Object Model) mutates

whenever there is a data change. Traditionally, if developers want to manipulate the content

9

and the style of every single of element in the page, they have to inspect specific HTML DOM

to achieve that. React technology, however, uses Virtual DOM as layers separating the real UI

representation and programming code to display data into the screen.

Figure 2. Comparing the Browser DOM and the Virtual DOM

Performance of Virtual DOM is far more efficient than rendering the real DOM. With outstand-

ing feature of Virtual DOM, its algorithm will compute the difference when data is changed,

resulting in the minimal updates of rendered data in real DOM.

3.2 Lifecycle of component.

React lifecycle of component also plays an essential role in project development. Each React

lifecycle method is automatically triggered during certain period of time in component life

span. Currently, there are three main stages involved in one lifecycle of each React compo-

nent beginning with mounting phrase, updating phrase and ending with unmounting phrase.

(React Component 2020)

Mounting stage is the first step in lifecycle indicating the initial state of component. The”

constructor()” method will be called first before component literally renders. This is the suit-

able place where local state is initiated, and event handler is bind with an instance or

10

element. Then, “render()” method will be triggered with props and state examination before

rendering React elements as JSX type. (React Component 2020)

After mounting state completes, updating phrase starts processing with “ComponentDid-

Mount()” method. In case if developers are intended to manipulate the state or call APIs con-

necting with backend, this is the appropriate place for that. “ComponentDidUpdate()” func-

tion then will be triggered instantly after there is an updating process. Developers often per-

ceive this as an opportunity to make some condition algorithms in regard to current props and

previous props comparison. This state also consists of few uncommon methods such as

“shouldComponentUpdate()” or “static getDerivedStateFromProps()” which are seldomly used

by developers. (React Component 2020)

Finally, when certain components are not in use, it will enter the unmounting phrase. “Com-

ponentWillUnmount()” would be provoked to execute clearing the method of this component,

namely time interval or APIs request cancellation in “ComponentDidMount()” function. (React

Component 2020)

Figure 3.Component Lifecycle in React

11

3.3 Styling with JSX.

Figure 14 Snippet of JSX syntax

This is JSX which is an XML-like or precisely HTML-like extension syntax of JavaScript. It is

highly recommended by Facebook to define the user interface of website. At the first glance,

it looks familiar with HTML. However, it literally is powered by JavaScript language. (Gacken-

heimer 2015)

JSX was born to achieve the conjugation of JavaScript logic and user interface. This interface

logic could concern the way of handling events, altering the local state or adjusting data be-

fore UI presentation. While UI files and logic files before are organized separately in folder

structure, JSX allows developers to store both logic and presentation files in one place consti-

tuting one unit called “component”.

Figure 4. Styling in react app

In term of styling functionality of JSX, it completely inherits almost features from HTML.

However, it is noticeable that there some differences in attribute specification. Because of

12

“camelCase” naming convention in JavaScript, “class” in HTML has been changed into “class-

Name” in React or “tabindex” becomes “tabIndex” in JSX.

3.4 State and Props managements.

This chapter will emphasis on state and props management which illustrates the data manipu-

lation in React application. Any updates occurred in props and state will trigger component

re-render JSX again.

For props, it stands for properties referring the immutable data displayed in UI presentation.

Props data is supposed not to be changed during the lifecycle of component and usually is

used to pass data from parent to its children. If there is a need of data adjustment, state ob-

jects should be used instead.

// Parent component

export default class Parent extends React.Component {

render() {

return (

<View>

<Child content={'This is a content for page'} />

</View>

)

}

}

// Child component

export default class Child extends React.Component {

render() {

return (

<View>

<Text>{this.props.content}</Text>

</View>

)

}

}

As can be seen from the code, Parent component has one child component where it renders

the content. However, the content of the page is not rendered from the child itself but its

parent. The data of content is passed to Child component via props object called “content”

which is declared in Parent component. In order to get data from its parent, “this.props” will

be called within Child component to retrieve values.

13

As mentioned above, state is another approach for manipulating data in React. it is mutable

object in which data will be altered during the component lifecycle. Software developer

could initialize the state of component and change it properly if needed. Furthermore, This

data has only been accessed within one single component. It is highly recommended not to

have local state in component since it would bring the complexity of the react app because of

an increasing number of states.

To tackle with this issue, third library for state management is utilized, namely Redux. Redux

consists of 4 main components which are Actions Creator, Reducer, Store and React compo-

nent. First, user will trigger events from UI component, leading to the dispatched action to

the store. This is where the global state of application is saved and updated, corresponding

the user’s events. Then, reducer with 2 intake arguments, namely initial state and actions,

will receive given dispatched actions. Base on the type of input actions, reducer will perform

some updates with the state. Once the new state has returned, Redux approximately sent it

back to React component where web presentation would be re-rendered.

Figure 5. Redux workflow.

14

4 Using Azure platform in back-end development.

Microsoft Azure platform is a service of cloud computing with the purpose of building, deploy-

ing and testing applications or services. It was firstly announced in 2010 with surrounding

products of virtual machine hosting, web hosting and data related to services. (Klaffenbach

2018)

4.1 Azure platform fundamental.

As evolving during the year, Window Azure was renamed into Microsoft Azure in 2014. From

that onward, their strategy is to emphasis on offing variety of services ranging from Infra-

structure as a service (IaaS) to software as a service (SaaS) as illustration bellow:

Figure 6. Azure cloud computing types

The first type of cloud service is Infrastrcuture as a service, in which users are mainly

responsible for most configuration of the system without hardware. This including router,

SSD, supplies of podwer and system of cooling will be handle by Azure Microsoft. Azure Virtual

Machines, Azure Virtual Networks, for example, are under this catergory. With this option,

users have more accessibilty of sytem covering operating system, antivitus software, network

installation and other confituration. However, there is a time-saving business logic value

contribution. (The Developer’s Guide to Microsoft Azure 2017)

Another cloud services type is Platform as a service or Paas. In this type, users are allowed to

control their system and installation while hardward and Operating system installation and

maintainance are belong to Azure’s responsibitlities. Users still have less time for adding

business logic values. Azure Redis Cache, Azure SQL Databases as well as Azure App Service

are key components in the Paas section. (The Developer’s Guide to Microsoft Azure 2017)

15

Function as a services (FaaS) is the next category of cloud service. By using this service, users

just need to concern about adding business logic and application. The remaining tasks

including hardware, Operating system or scalability of system are handled by Azure.

Nowaday, It is well-known as serverless computing. Azure function, for instance, is one of

Faas groups in which user only need to initialize application or embed together business logics

and finally execute it. The app will be automatically scalable, conresponding the request

from client sides. Fee is charged based on number of requests instead of entire system which

always lives and waits for the demands from clients. (The Developer’s Guide to Microsoft Az-

ure 2017)

The last type of Azure serives is Software as a service or SaaS. This refers to a service where

user only need to perform application installation while the rest are Azure’s tasks. This is

regarded as the highest abtraction layer of Azure services. This consits of Azure IoT suit or

Azure Cognitive service. (The Developer’s Guide to Microsoft Azure 2017)

4.2 API server with Azure function

As mentioned above, Azure Function is a Function as a service of Azure platform. It enables

developers to focus on business logic without concerning about infrastructure design or devel-

opment configuration. A unit of this service is composed by one single function activated via

HTTP request from front-end. By using Azure function, it provides the convenience to devel-

oper in order to build small parts of REST APIs in automatically scalable development environ-

ment. The huge advantage when it comes to Azure function usage is financial saving. The fee

is only paid for the number of functions built and executed rather than server application op-

erating 24/7. This service is served in multiple languages including F#, C#, NodeJS, PHP or

Java. (The Developer’s Guide to Microsoft Azure 2017)

public static class Function1 { [FunctionName("Function1")] public static async Task<HttpResponseMessage> Run([HttpTrigger(Authoriza-tionLevel.Anonymous, "get", "post", Route = null)]HttpRequestMessage req, Trace-Writer log) { log.Info("C# HTTP trigger function processed a request."); // parse query parameter string name = req.GetQueryNameValuePairs() .FirstOrDefault(q => string.Compare(q.Key, "name", true) == 0) .Value; if (name == null) { // Get request body dynamic data = await req.Content.ReadAsAsync<object>(); name = data?.name;

16

} return name == null ? req.CreateResponse(HttpStatusCode.BadRequest, "Please pass a name on the query string or in the request body") : req.CreateResponse(HttpStatusCode.OK, "Hello " + name); }

}

Above lines of code is an example of one function unit in this Azure service. The name values

from front-end are assigned to variable “name” via GET or POST method of HTTPS request.

Then a condition is established illustrating that if there is defined name from client side, it

will be sent as a response to client with the text “Hello” going with the name specified previ-

ously. Otherwise, back-end will send “"Please pass a name on the query string or in the re-

quest body” to the front-end.

4.3 Database with Azure SQL

Azure SQL is Platform as a service in the bundle Azure cloud computing software. It is com-

pletely similar with relational database Microsoft SQL server. Due to its cloud nature, it is de-

veloped, maintained and performed through Azure application. Additionally, it has brought

many added values. Geographical replication, for example, create a copy of data instance

into another region in real time following by audit feature where data is automatically

checked and tracked into audit log. (The Developer’s Guide to Microsoft Azure 2017)

Since it is developed by Microsoft, it is compatible with SQL Server Management Studio and

Entity Framework, enabling developer to publish the business logic faster.

5 Case Study: Kassavirtanen Oy - Building a Quick recruitment system with React and Azure

platform.

Case study is the most suitable approach for research methods. It discovers the answers of

questions “Why” and “How” in the specific event with supportive indications from docu-

ments, observation or interviews (Rowley 2002). Firstly, the project requirement of Kassavir-

tanen Oy will be discussed to determine the needs of business.

Quick recruitment platform acts as additional values for traditional Job Portal online platform

for existing internal HR recruitment platform. It provides better interactions and time saving

for jobseekers and company in demand of hiring employees.

The Survey questionnaires created by company will be created via Quick Recruitment Web

system. After that, the system will publicly generate the url link for jobseekers to access and

17

complete the survey. Once jobseeker completely fill in the survey, there is an email which is

sent to the company HR email. Based on the given information from the survey responses, the

company HR department will contact the suitable applicants.

The deadline for this project is the middle of February 2020 with starting point 1.11.2019.

Then, it would constitute a part of internal project HR recruitment platform.

5.1 Functional requirement.

In order to create functional web application for Quick recruitment system, HR representa-

tives as users are able to create, read, update and delete (CRUD) job posts. Following by

that, each job post has one survey of questionnaires attached to it. This survey also is per-

formed CRUD activities by user similarly with job post. Once job post and survey have been

created, there is one url link generated to display the job post linked with form of question-

naires.

With this link, jobseekers through this system have access to apply the job application by fill-

ing question’s answers. Finally, there will be the functions in which there would be an email

sent to HR representatives automatically when jobseekers instantly click the submit button.

5.2 Non-functional requirement.

While functionalities of software establish convivence and automaton, making users life eas-

ier, non-functional aspects are also needed to be aware of determine the quality of system.

This would include security, easy maintenance, sustainability and user-friendly interface. By

achieving all these requirements, the system will be certainly satisfying customer’s needs and

beneficial for the business in the long run.

In term of user experience, the design of project should offer user-friendly interaction and

accessibility for users. According to Garett, Chiu, Zhang and Young (2017), there are some

key principle of design that software developer should be pay attention which are navigation,

graphic design, organization, Utility of content, Site purpose, simplicity and readability. With

navigation, it should be consistent and easily visible for user with possibilities of search func-

tion and navigation aids such as visible links. In regards graphic design, color palette, the

quality of image resolution, typography of text, unique logos and icons, white space effec-

tiveness and visual time loading optimization are key factors determining the branding of

product while system has followed logically structure, consistent architecture via suitable

keywords, headings and titles. For content utilities, it requires effort of creating qualified

content, updating information and offering information sufficiency followed by requirement

of purpose with identity position, interaction types, contract, service policy and organization

visibility. Finally, the system should be aligned with simplified design in its layout, titles, ease

18

of usage and be readable through appreciated content in suitable font size, ease of reading,

customer-centered content.

5.3 Application design

By understanding thoroughly business needs, the mockup of entire application was developed

and designed in order to offer the best experiences for users. This include the mockup of

every single page, feature working flow and system architecture. This initial prototype will be

beneficial for the company in term of time and cost saving as well as user engagement. With

strong quality of prototype, it allows user to project the potential cost, necessary updates

and predicted disaster possibilities resulting in time and cost reduction. Furthermore, it also

enhances the user interaction to the Quick Recruitment system. It enables customers to have

a glance on the project and interact simultaneously with the virtual product. Once feedback

from customers are collected, it is used for application modification in regards UI or certain

functionalities. Well-conducted prototype would prevent business from misunderstanding and

miscommunication during project implementation. (The Pros & Cons Of Prototyping)

Figure 7. The mock-up version of login screen

19

Figure 8. The mock-up version of dashboard

Figure 9. The mock-up version of creating post

20

Figure 10. The mock-up version of design survey

Figure 11. Quick recruitment workflow and infrastructure.

21

As illustration in figure 10, HR representatives will login to the dashboard of application

where they perform creating, updating and remove the post. Each post has one survey at-

tached to it as the key feature of the app. When every single action of post or survey such as

creating or deleting is triggered, this request is sent to Azure function via APIs call. After

that, Azure function will determine which kind of data should be added in Azure SQL. Once

successful request takes place, the Azure function will deliver the success in response to

Front-end. Otherwise, the error message would be sent instead.

The goal of this application is the link generation when post and survey are successfully cre-

ated. Through this, jobseeker could be able to access the job post then complete the survey

of questionnaires. The response of application will be instantly forwarded to recruiter’s

email.

5.4 Application initial installation

As initial state of application development, it is pivotal to select a suitable IDE and extension

package for project. In this system, Visual Studio Code is opted for this due to its powerful

developer tools and third-party software integrations. It offers code auto completion called

IntelliSence for time-saving coding and robust debugging feature where developers can in-

spect single step of functions, view values of variables and perform command lines in built-in

terminal panels. Moreover, Git tools for coding version control is also integrated in Visual Stu-

dio Code. It enables developers to execute the changes in coding version without installing

another Git software. As developer, Visual Studio could be install via organization website at

“https://code.visualstudio.com/” in Download section.

Figure 12. Home page for Visual Studio Installation

22

Since application of react development has been running in NodeJS which is JavaScript

runtime environment, NodeJS and its packages are required before project implementation.

Then, Node Package Manager built on top of NodeJS is also integrated for numerous free

open-sourced softwares,

Figure 13. Different versions of NodeJS

Once NodeJS installation is successfully operated, many internal libraries are downloaded

through some command line executions. As recommendation from Facebook, create-react-

app library is firstly installed since it is one of the best boilerplates for react app develop-

ment.

Listing 1. Command line for create-react-app installation

Listing 2. Command line for project initialization

23

Listing 3. Redux library installation

Listing 4. Material UI installation

Material UI elements is considered as the most common UI libraries for react development. It

provides full features of UI components in web development leading to less time-consumption

and more productivity.

It is noticeable that there is alternative approach for third-party libraries installation which is

called Yarn. It could easily be achieved for installing packages via similar command line:

“Yarn install <Name of package>”. The guidance of installation could be found in their official

website: https://yarnpkg.com/getting-started/install.

Listing 5. Yarn package manager installation

For side effect management which includes APIs connection, data fetching or browser cache

access, Redux saga is chosen for this purpose. With this library, it offers more convenient way

of debugging when errors occurred, and it also provides easy management with observation of

actions in Redux feature.

Listing 6. Redux saga installation

24

For back-end development, there are two primary local software for that. Firstly, visual stu-

dio 2019 IDE developed by Microsoft for Azure function development is installed as their rec-

ommendation. This application could be downloaded at “https://visualstudio.mi-

crosoft.com/vs/”. As being under Microsoft platform environment, Microsoft SQL server man-

agement studio software is also involved to perform querying SQL statements with system da-

tabase. This software could be found at their official site at “https://www.mi-

crosoft.com/en-us/sql-server/sql-server-downloads”. However, there are multiple versions

with difference in features. In this case, express one is opted since its free licence and rich

functionalities.

Figure 14. Microsoft SQL server management download page

5.5 Front-end react implementation

After development preparation, the project could be started by executing “npm start” in ter-

minal command line leading to a website automatically opened in the new page beginning

with “localhost:3000” address.

25

Figure 15. initial page of react application

As mentioned from the page, App.js in src folder is the first file needed to be updated for fu-

ture development. This is considered one of the highest components in React component par-

ent-child relationship hierarchy.

After that, all libraries in the project initialization will be integrated with the existing boiler-

plate created by “create-react-app” helper tool resulting in folder architecture as figure bel-

low.

26

Figure 16. Application architecture

For build folder, it is the place for storing complied files when project is finished and ready

for publish. This folder is established when “npm run build” is executed following by node_

modules where all JavaScript libraries installed via Node Package Management are saved.

The static file of the webpage would be located at public folder. The name of those files in

this directory will be remained when it comes to production version. Therefore, files within

this folder are utilized for performance enhancement by caching it at client-side.

The dynamic files will be placed in src folder. This is primary place that most developers

spend their time on. There are numerous react folder structure designs. In this project, file

grouping by features or routes is opted as Facebook recommendation (Reactjs 2019). In Ac-

tions directory, all action creators of Redux library will be specified in here and correspond-

ing string constants is declared in constants folder. With asset folder, as its name, this is a

place in which all images are saved. Next section is component folder which is the most vital

factor in react application. Component could be presented as stateful component or stateless

component. The former one involves local react state and react lifecycle while the later one

is just used for UI presentation without previous features in stateful component.

27

Another element in application folder structure is container. It is defined as the logic wrapper

of corresponding component where consists of logic of business and state management from

Redux. The component will establish the connection with its container through “connect”

method provided by Redux and access those values from store via mapStateToProps and map-

StateToActions. Then, locale folder is responsible for translation in the upcoming version, but

it is not implemented in this phrase. Consequently, root reducer and element reducers will be

storied in one place under reducer directory. As been discussed in state and props manage-

ment, reducer of Redux will receive given actions triggered from UI to return the new state of

data. Next part of this architecture is saga folder where APIs asynchronous requests are called

and observed, following by styling folder and utilities directory.

There are also some separate files outside those folders. Index.js, for example, is the file en-

try of react component similar behaviour of App.js when initializing the project with “create-

react-app” library. Then, Route.js is formed for routing purpose, handling the transition from

one page to another page. The final importance file in src folder is store.js with Redux store

configuration with middleware’s Redux such as Redux Saga

The entry view for in this system is login page which has been illustrated in figure 6. The pro-

vided information from user are user email and password. The component for login page ren-

dering is stateless component since there is no need of business logic handling in this place

and performance enhancement purpose.

Figure 17. Login component

Likewise, register page also has similar programming structure because of the similar nature

of logic but extra input data such as first name, last name and confirm password fields

28

Figure 18. Register page

When user successfully login into the site, it leads user to dashboard page where all posts are

shown. For better user experience, all interactions with the post are operated and placed in

here. Therefore, stateful component with react lifecycle and local state is chosen for building

dashboard component. This is where, APIs functions are called via Redux, namely “get all

posts”, “update posts” as well as “remove posts”.

It is also noticeable that there is possibility to place both css and business logic in one single

component. This could be achieved through withStyles method of Material UI library, in which

styles is the first argument along with the name of component as second argument.

Figure 19. add style method in component

Then, the name of the classes will be declared in styles constant and could be used via props

named “classes” of the component. For example, in figure 18, grid component has been

styled by class name called container which is initialized in style constant.

Figure 20. display style via props of component

29

For rendering all posts received from back-end, map function is ultilized instead of normal

“for loop” functon as it returns the new array of data rather than mutating existing data.

Each rendered element should has key property for performance purpose. Furthermore, it is

also recommended to apply ternary operator when performing condition agorithirm since it is

shortcut of using if-else statement. If active property is true, for instance, class name called

“status_open” is activated and the text changes to “OPEN”. Otherwise, the text shows

“CLOSED” with style accordingly.

Figure 21. map function and ternary operator

Create post page is the next stage of user interface development as shown in figure 8. There

are main input fields including title, description and upload in the section with data control

via Redux. Only title input field is mandatory to fill to the determine the title of the post.

When information needed is ready, next button is triggered leading to the next step of creat-

ing survey in the figure bellow.

Figure 22. Create survey page

A normal survey would consist of survey title, survey description and the main questionnaire

part. The question section is beginning with the question value and then type of the ques-

tions. Depending on the types of the question, the types of answer would be altered corre-

spondingly. Since there are more than 3 cases of condition, it is referred to use switch-case

statement to manipulate the business logic. In case that user is intended to increase or de-

crease the number of answers, either plus or minus button is clicked to accomplish that. Once

30

satisfied with the questionnaire contents, then next button again is clicked to move to the

preview page.

Figure 23. Preview page

This page is created for the demand of HR representative that they would like to see the ap-

pearance of survey in the job seekers perspectives. Additionally, user could easily do the

demo test by clicking the answer of specific question. Once question is ticked, it automati-

cally animates to the next question and blur the rest of irrelevant questions. If all require-

ment of user is meet, user could click next button to perform the page transition to the final

page which simply just display the url link available with copy functionality.

Figure 24. Url link generated by the system

5.6 Back-end application implementation.

Database design is the first initial stage of back-end development since it plays an important

role as backbone of the application. Once the data structure is fixed and finalized, it is

31

difficult to trace back and correct existing database.

Figure 25. Database structure

From the figure 24, this illustrates the database structure of Quick recruitment system. For

user management, there is only one primarily type of user of this system, which is HR recruit-

ers, thus only user_info table is defined. However, if there is a demand of storing another

type of user in upcoming future, RoleID field will be determined with different values. Re-

cently, it is 1 as default for HR recruiters. As key principle of relation database, each table

must have one primary as an identity of mentioned table. For user_info table, primary key is

UUID field.

For posting job advertisement and survey, Posts table is established along with 1-1 relation-

ship with Surveys table via Foreign key called PostID. While primary key demonstrates the

identity of table, foreign key identifies itself as connection bridge between two tables. In or-

der to know this user has which posts, this could be retrieved via the establishment of foreign

key UUID in Posts having connection with UUID field in user_info table. Since one post has one

picture attached to it, Documents table is created to save picture data as base64 and path of

the picture. Finally, Questions table have 1-many relationship with survey via SurveyID field

due to the fact that one survey might have more than two questions accordingly.

When database structure design is ready, SQL stored procedure would be implemented as the

gateway to Azure Function. It was invented for reusable code purpose; thus, it could be uti-

lized over many times in the SQL system. It offers the feature of receiving parameter as an

32

input and send back the multiple of responses as a form output. Importantly, it acts as a mid-

dleman for database manipulation such as create, edit or updating database with additional

feature of triggering other procedures. Finally, there is a debug feature where it indicates the

status of successfully operating that procedure.

Figure 26. GetAllPosts stored procedure

Figure 26 shows the stored procedure script for getting all posts from the database. It re-

ceived the UUID as an input and return the output table with the fields of ID, Title, Descrip-

tion, Path of the picture along with IsActive, CreateDate and UpdateDate status. All selected

posts must fulfil the requirements of matching exactly with provided ID and not being de-

leted. Similarly, there many stored procedures are created for Post and Survey with the basic

CRUD functionalities.

Figure 27. List of stored procedures

33

The next step is building APIs via Azure Function via Visual Studio Code 2019. The figure bel-

low is the project structure of Azure Function. Beginning with QrApiLayer, this is the place to

store the business logic of data validation of Azure Functions accordingly with Posts or Sur-

veys. For QrDALayer, it has responsibilities of Database connection when data is validated in

the previous layer. Additionally, common.cs file is where to define the all class object that is

used in this project in C# language. There is also one more pivotal file named local.set-

tings.json for saving connection string purposes which are normally used for database commu-

nication or Key api of third party services

Figure 28. Azure folder structure

For each object which is either Post or Survey, Create, Read, Update and Delete function are

built or called CRUD. Post in figure 28, for example, will consist of CRUD APIs and other pri-

mary APIs such as UpdatePostActive or GetPostByID. When business logic is handled via Api

layer completely, the data stream then is passed forward to Data layer.

Figure 29. APIs of post

Data layer is literately a C# object contains multiple of methods with the name corresponding

the names of APIs in the figure 28. Each method also has similar structure in order to send the

data to SQL system.

34

Figure 30. Data layer for post

class Program { static void Main() { string connectionString = "Data Source=(local);Initial Catalog=Northwind;" + "Integrated Security=true"; // Provide the query string with a parameter placeholder. string queryString = "SELECT ProductID, UnitPrice, ProductName from dbo.products " + "WHERE UnitPrice > @pricePoint " + "ORDER BY UnitPrice DESC;"; // Specify the parameter value. int paramValue = 5; // Create and open the connection in a using block. This // ensures that all resources will be closed and disposed // when the code exits. using (SqlConnection connection = new SqlConnection(connectionString)) { // Create the Command and Parameter objects. SqlCommand command = new SqlCommand(queryString, connection); command.Parameters.AddWithValue("@pricePoint", paramValue); // Open the connection in a try/catch block. // Create and execute the DataReader, writing the result // set to the console window. try { connection.Open(); SqlDataReader reader = command.ExecuteReader(); while (reader.Read()) { Console.WriteLine("\t{0}\t{1}\t{2}", reader[0], reader[1], reader[2]); } reader.Close();

35

} catch (Exception ex) { Console.WriteLine(ex.Message); } Console.ReadLine(); }

}

Above block of code is an example of data layer to database connection. Firstly, the connec-

tion string should be declared as a destination for the connection. After that, Query string

which is the Stored procedure that has been established in the SQL server management tool is

also taken place. Then, new connection is opened with pricePoint as parameter object. For

debugging purpose, try catch block are utilized in which if there is a response from SQL sys-

tem, it would be then delivered to front-end side while errors will be printed in the terminal

if there are problems occurred.

5.7 Application testing.

Testing is the process of tracking processes of services working properly according to its pre-

vious plans. Normally testing includes unit testing by developers and usability testing by us-

ers. However, due to the lack of tester position within the company, unit testing has been

handled also by developers with less professional skills. Unit testing or functional testing is

programing testing automation executed by the lines of code written by its authors. One-unit

test involves the input data to perform some interaction with the system producing some ex-

pected outcomes. The result of testing is matched with the intended outcome, resulting in

one successful test. This phrase normally takes places in 3-5 days, including backup days for

urgent situation. Once the application reaches its standard by passing all unit test cases, it

will be delivered to the users via usability testing.

In this stage, users have been through the testing experience about the combination of func-

tionalities as well as overall interface. This testing could be done by internal users within the

company, since there were some recruiters in the operation, without the needs of recruiting

external users from other service providers. The method implemented in this testing, in

which those results were analyzed to have better user experience product, was user interview

via demo scenarios.

There are two types of user in this system including HR representatives and job seekers. Four

targeted interviewees for the former group have been discussed and opted randomly in the

human resource department, while the latter group would be interviewed similarly but in the

remaining employees of the company. For the recruiters, they have been requested to use

the system in 10 minutes in order to create 2 demo job advertisements via the system with

36

the given description for faked IT and finance position jobs. After that, they have been inter-

viewed face-to-face to get the feedback regarding to functionality and user experience of the

application. It took two days in order to accomplish this targeted group since 2 interviews

were performed per days.

The table 1 displays the prior information about the recruiters in this testing phrase. There

was only one participant from the age group of 29-38 while the remaining testers were origi-

nally from 18-28 age group. In term of gender, there was one male with less than 1 year of

experience and three females in this group accordingly with exceptionally one was senior

with more 7 years of experience in recruitment field.

Table 1. HR interviewees background info

Age group Gender Experience year

Recruiter 1 18-28 Female 2 years

Recruiter 2 18-28 Male 1 years

Recruiter 3 29-38 Female 7 years

Recruiter 4 18-28 Female 1 years

After data collection from those interviewees, there were three aspects from which an appli-

cation is needed to be improved including the functionality, user experience and perfor-

mance.

With functionality, four interviewees demonstrated that all features of application which

were inspecting the post, creating the post, editing the post and deleting the post features

working properly as intended. Furthermore, they were really interested in the all-in-one

short-cut menu with get link post and activate or disable the link function. They found easily

performing system commands within the homepage instead of making an extra step of going

to post detail doing similar actions.

In term of user interface, all interviewees agreed about the simplicity and readability of the

application. Recruiter 1 stated in detail that this website had simple headings with suitable

text size and one flow of creating post in which all steps were informatively declared in navi-

gation bar. The active step was also be highlighted with different colour and underline border

indicating where users were performing their actions. However, senior recruiter 3 reported

that there was a need of user profile page where users could manage their profile such as

37

name or password adjustment. Additionally, the logout button should have its label in order

to make user understanding its purpose before triggering that button.

The last one was performance perspective in which interviewees evaluate the general speed

of application processes. Four recruiters had satisfaction about the performance of the Quick

recruitment system. Recruiter 4 reported that all processes have been completed within less

than 1 second. However, she also stated that the image of post was not loaded entirely at the

same time due to the huge size of image. Similarly, recruiter 1 was amazed about the appli-

cation performance compared with the other services she used in her previous working place.

The responses from the system was almost instant when there were interactions with the sys-

tem.

After HR interviews, job seekers’ group feedback has also been conducted in the following

days. With 2 faked posts created by previous recruiters, those have been passed forward to 4

random employees in the company. Table 2 illustrates the background info about those inter-

views through this research.

Table 2. Employees background info

Age group Gender Completion time

Employee 1 18-28 Male 54 s

Employee 2 18-28 Female 1m 04 s

Employee 3 29-38 Female 35 s

Employee 4 39-48 Male 1m 23 s

Three aspects regarding functionality, user interface and performance have also been con-

ducted in this group. Each person had assumption of applying the job with the given link

within 3 minutes. The results were outstanding with the questionnaire completion less than

one and half minutes. The outcome also displayed that senior people spend more time on

reading and filling the information compared with other age group.

For functionality, all fundamentals feature such as filling, choosing and submitting answers

were working properly according to the response from employees’ interviewees. Since the

functionality for job seekers was not complicated as recruiters with only one single page,

they found easily evaluating this system.

38

With user experience part, they also demonstrated that Quick recruitment system had im-

proved its great simplicity and readability via suitable font size, question-highlighted anima-

tion. Nonetheless, employee 2 mentioned that one out of three questions was not highlighted

as it should be. Finally, responses from all employees concerning about performance were ex-

cellent with good network connection.

6 Suggestions and conclusion.

This chapter will discuss about the upcoming development after feedback collection and sum-

marize the Quick recruitment system project.

From the data analysis from interviews, this system was deployed successfully in term of

functionality. All features functioned properly meeting both demands of HR representatives

and job seekers. However, there were the needs of application interface improvement for

better user experience including navigation bar content enhancement or profile section provi-

sion. From interface for job seekers, there was few bugs occurred during the process of con-

tent fulfilment in which focused question was not highlighted. Finally, overall performance

was excellent except the improvement in image loading speed. All mentioned issues would be

noted into backlog for further improvement in the next phrase of the production develop-

ment.

This thesis topic illustrates the usage of React in Front-end and Azure cloud platform as back-

end in Quick recruitment platform. Recruitment platform has been evolved during the history

from physical printed document to digital one. In order to acquire more potential talents that

meet the client’s needs, Quick recruitment application was born with possibilities of attract-

ing more applicants by reducing the time of filling in job application. React as a library for

front-end development was opted to build this application since it is a light-weight library

with impressive performance when putting virtual DOM into practice. Along with that, Azure

platform has been chosen from back-end development because of its scalability and cost effi-

ciency. Consequently, React and Azure platform literately remain their position in web appli-

cation development in promising future.

39

References

Printed

Gackenheimer C. 2015. Introduction to React. 1st edition. New York: Apress.

Garett, R., Chiu, J., Zhang, L. and Young, S. 2017. Website Design and User Engagement

Klaffenbach, F. 2018. Deployment of Microsoft Azure Cloud Solutions: A complete guide to

cloud development using Microsoft Azure

40

Electronic

Bryant, M. 20 years ago today, the World Wide Web opened to the public. Accessed 13 March

2020.

https://thenextweb.com/insider/2011/08/06/20-years-ago-today-the-world-wide-web-

opened-to-the-public/

Computer Hope. When was the first computer invented? Accessed 13 March 2020.

https://www.computerhope.com/issues/ch000984.htm

File structure. 2020. Accessed 13 March 2020.

https://reactjs.org/docs/faq-structure.html

Overell, M. 2016. The history of innovation in recruitment technology and services. Accessed

16 March 2020

https://techcrunch.com/2016/10/29/the-history-of-innovation-in-recruitment-technology-

and-services/

PrincePerelson. 2019. The History and Evolution of the Recruitment Industry. Accessed 13

March 2020.

https://PrincePerelson .com/the-history-and-evolution-of-the-recruitment-industry/

The Developer’s Guide to Microsoft Azure. 2017. Second Edition

https://azure.microsoft.com/en-us/campaigns/developer-guide/

41

The Pros & Cons Of Prototyping. 2018. Accessed 13 March 2020.

https://rapidsrepro.com/advantages-disadvantages-prototyping/

React component. 2020. Accessed 13 March 2020.

https://reactjs.org/docs/react-component.html

Rowley, J. 2002. Using Case Studies in Research.

http://psyking.net/HTMLobj-3843/using_case_study_in_research.pdf

Why did we build Visual Studio Code? 2020. Accessed 13 March 2020.

https://code.visualstudio.com/docs/editor/whyvscode

42

Figures

Figure 1. Comparing the Browser DOM and the Virtual DOM ......................................... 9

Figure 2.Component Lifecycle in React ............................................................... 10

Figure 3. Styling in react app ........................................................................... 11

Figure 4. Redux workflow. .............................................................................. 13

Figure 5. Azure cloud computing stypes ............................................................... 14

Figure 6. The mock-up version of login screen ....................................................... 18

Figure 7. The mock-up version of dashboard ......................................................... 19

Figure 8. The mock-up version of creating post ...................................................... 19

Figure 9. The mock-up version of design survey ..................................................... 20

Figure 10. Quick recruitment workflow and infrastructure. ........................................ 20

Figure 11. Home page for Visual Studio Installation ................................................. 21

Figure 12. Different versions of NodeJS ............................................................... 22

Figure 13. Microsoft SQL server management download page ..................................... 24

Figure 14. initial page of react application ........................................................... 25

Figure 15. Application architecture .................................................................... 26

Figure 16. Login component ............................................................................ 27

Figure 17. Register page ................................................................................. 28

Figure 18. add style method in component ........................................................... 28

Figure 19. display style via props of component ..................................................... 28

Figure 20. map function and ternary operator ....................................................... 29

Figure 21. Create survey page .......................................................................... 29

Figure 22. Preview page ................................................................................. 30

Figure 23. Url link generated by the system .......................................................... 30

Figure 24. Database structure .......................................................................... 31

Figure 25. GetAllPosts stored procedure .............................................................. 32

Figure 26. List of stored procedures ................................................................... 32

Figure 27. Azure folder structure ...................................................................... 33

Figure 28. APIs of post ................................................................................... 33

Figure 29. Data layer for post........................................................................... 34

Listing 1. Command line for create-react-app installation ......................................... 22

Listing 2. Command line for project initialization ................................................... 22

Listing 3. Redux library installation .................................................................... 23

43

Tables

Table 1. HR interviewees background info ............................................................ 36

Table 2. Employees background info .................................................................. 37