quick recruitment web system by react and azure platform
TRANSCRIPT
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