Ticket Management System

1. INTRODUCTION

1.1 Overview
Kloc is a software solutions provider with a keen focus on customer satisfaction. We
partner with businesses to address all their IT requirements be it application development,
integration, maintenance or quality initiatives. We do not offer cookie cutter solutions but
tailor our offerings to adapt to our customers’ enterprise thereby ensuring high return on
investment. As our slogan goes — we don’t just develop solutions, – we think IT through.
Our vision is to be a technology enterprise that empowers organizations and
individuals to innovate, invent and inspire the world with their creative imagination and
technical brilliance.
KLoc Technologies to be recognized among the most innovative enterprises in the IT
business. We will offer our customers high quality & cost-effective services within
geographies and market segments that can benefit from our diverse talent base and process-
centric solution delivery.

1.2 Feasibility Study

1.2.1 Technical feasibility
Tickets Management will be a used to raise any issues in kloc’s application, which
provide various features to track the status of the raised issue’s. Various customer all over the
globe use this website for raising kloc applications issues. It provides a convenient way for
raising tickets.

1.2.2 Economic Feasibility

This application is built on NodeJS and ReactJS. As the frameworks used for
developing the application is open source the application can be easily developed in a cost-
effective manner. The project is divided among many teams, the development team which is
further divided into front-end and back-end.

1.3 Existing System

Previously if the user faces any problem in the application, they used to call or
mail to our collegues to handle the problem. Suppose at that point of time if we were
busy or spent time on any other work we couldn’t take or listen the problem of the
customer.

Department Of Computer Application 1 June 2020

Ticket Management System

1.3 Proposed System

Ticket Management System is web application is intended to provide complete
solutions for customers through a single gateway using the internet as the sole
medium. Ticket Management system is a multichannel ticketing system collects all
support tickets from different channels and organizes them in one tab. This helps
agent’s reply to all of them from the same tab.
The current system is developed using ReactJS, which is used to show the
graph in usage of the applications. How many tickets are raised and how many tickers
are solved. It provides more convenient way to manage errors. Debugging becomes
easier and even new features can be added in a more convenient manner.

Department Of Computer Application 2 June 2020

Ticket Management System

LITERATURE SURVEY

Department Of Computer Application 3 June 2020

Ticket Management System

2. LITERATURE SURVEY

“Ticket Management System” is developed using ReactJS as Front end and NodeJS
as the back end. The below described tools and technologies are used to developed the
proposed system.

2.1 ReactJS
React (also known as React.js or ReactJS) is a Javascript library for
building user interfaces. It is maintained by Facebook and a community of individual
developers and companies.
React can be used as a base in the development of single page or mobile
applications. However, React is only concerned with rendering data to the DOM, and
so creating React applications usually requires the use of additional libraries for state
management and routing. Redux and React Router are respective examples of such
libraries.
Notable Features:
Components
React code is made of entities called components. Components can be
rendered to a particular element in the DOM using the React DOM library. When
rendering a component, one can pass in values that are known as "props".

Functional components
Functional components are declared with a function that then returns some
JSX.

Class-based components
Class-based components are declared using ES6 classes. They are also known
as "stateful" components, because their state can hold values throughout the component
and can be passed to child components through props:

Virtual DOM
Another notable feature is the use of a virtual Document Object Model, or
virtual DOM. React creates an in-memory data-structure cache, computes the
resulting differences, and then updates the browser's displayed DOM efficiently. This

Department Of Computer Application 4 June 2020

Ticket Management System

process is called reconciliation. This allows the programmer to write code as if the

entire page is rendered on each change, while the React libraries only render
subcomponents that actually change. This selective rendering provides a major
performance boost. It saves the effort of recalculating the CSS style, layout for the
page and rendering for the entire page.

JSX
JSX, or JavaScript XML, is an extension to the JavaScript language syntax.
Similar in appearance to HTML, JSX provides a way to structure component
rendering using syntax familiar to many developers. React components are typically
written using JSX, although they do not have to be (components may also be written
in pure JavaScript). JSX is similar to another extension syntax created by Facebook
for PHP called XHP

2.2 NodeJS
Node.js is an open-source, cross-platform, JavaScript runtime environment
that executes JavaScript code outside of a web browser. Node.js lets developers use
JavaScript to write command line tools and for server-side scripting—running scripts
server-side to produce dynamic web page content before the page is sent to the user's
web browser. Consequently, Node.js represents a "JavaScript everywhere"
paradigm, unifying web-application development around a single programming
language, rather than different languages for server- and client-side scripts.
Though  .js  is the standard filename extension for JavaScript code, the name
"Node.js" doesn't refer to a particular file in this context and is merely the name of the
product. Node.js has an event-driven architecture capable of asynchronous I/O. These
design choices aim to optimize throughput and scalability in web applications with
many input/output operations, as well as for real-time Web applications

Technical Details:
Node.js operates on a single-thread event loop, using non-blocking I/O calls,
allowing it to support tens of thousands of concurrent connections without incurring
the cost of thread context switching. The design of sharing a single thread among all
the requests that use the observer pattern is intended for building highly concurrent
applications, where any function performing I/O must use a callback. To
accommodate the single-threaded event loop, Node.js uses the libuv library—which,
in turn, uses a fixed-sized thread pool that handles some of the non-blocking
asynchronous I/O operations.

Department Of Computer Application 5 June 2020

Ticket Management System

A thread pool handles the execution of parallel tasks in Node.js. The main
thread function call posts tasks to the shared task queue, which threads in the thread
pool pull and execute. Inherently non-blocking system functions such as networking
translate to kernel-side non-blocking sockets, while inherently blocking system
functions such as file I/O run in a blocking way on their own threads. When a thread
in the thread pool completes a task, it informs the main thread of this, which in turn,
wakes up and executes the registered callback.

V8
V8 is the JavaScript execution engine which was initially built for Google
Chrome. It was then open-sourced by Google in 2008. Written in C++, V8 compiles
JavaScript source code to native machine code at runtime. As of 2016, it also includes
Ignition, a bytecode interpreter.

Unified API
Node.js can be combined with a browser, a database that supports JSON data
(such as Postgres, MongoDB, or CouchDB) and JSON for a unified JavaScript
development stack. With the adaptation of what were essentially server-side
development patterns such as MVC, MVP, MVVM, etc., Node.js allows the reuse of
the same model and service interface between client side and server side.

Event loop
Node.js registers with the operating system so the OS notifies it of connections
and issues a callback. Within the Node.js runtime, each connection is a small heap
allocation. Traditionally, relatively heavyweight OS processes or threads handled
each connection. Node.js uses an event loop for scalability, instead of processes or
threads. In contrast to other event-driven servers, Node.js's event loop does not need
to be called explicitly. Instead, callbacks are defined, and the server automatically
enters the event loop at the end of the callback definition. Node.js exits the event loop
when there are no further callbacks to be performed.

Package management
Npm is the pre-installed package manager for the Node.js server platform. It
installs Node.js programs from the npm registry, organizing the installation and
management of third-party Node.js programs. Packages in the npm registry can range
from simple helper libraries such as Lodash to task runners such as Grunt.

Department Of Computer Application 6 June 2020

Ticket Management System

Department Of Computer Application 7 June 2020

 Ticket Management System

2.3 MongoDB
MongoDB is a document database, which means it stores data in JSON-like
documents. We believe this is the most natural way to think about data, and is much more
expressive and powerful than the traditional row/column model.
Rich JSON Documents

 The most natural and productive way to work with data.

 Supports arrays and nested objects as values.

 Allows for flexible and dynamic schemas.

Powerful query language

 Rich and expressive query language that allows you to filter and sort by any field, no
matter how nested it may be within a document.

 Support for aggregations and other modern use-cases such as geo-based search, graph
search, and text search.

 Queries are themselves JSON, and thus easily compassable. No more concatenating
strings to dynamically generate SQL queries.
All the power of a relational database, and more...

 Full ACID transactions.

 Support for joins in queries.

 Two types of relationships instead of one: reference and embedded.

Department Of Computer Application 8 June 2020

Ticket Management System

Hardware and Software Requirements

Department Of Computer Application 9 June 2020

Ticket Management System

3. Hardware and Software Requirements

3.1 Hardware Requirements

Ticket Management system is a web-based application, it can run on any
hardware platform capable of running modern browser. The following configuration
is the bare minimum required to run any modern browser.

 Processor : Intel Core i3 higher version

 RAM : 4 GB
 Hard Disk : 1 GB of free space
 Output : Color monitor
 Input : Keyboard, Mouse
 Network card with broadband connection

3.2 Software Requirements

3.2.1 For developer
• Front-end: ReactJS
• Backend: NodeJS
• Database: MongoDB

3.2.2 For end user

 Operating system: Ubuntu or macOS or windows
 Browser: Latest versions of Google chrome or Mozilla Firefox

Department Of Computer Application 10 June

2020
Ticket Management System

SOFTWARE REQUIREMENT
SPECIFICATION

Department Of Computer Application 11 June

2020
Ticket Management System

• 4. SOFTWARE REQUIREMENT
SPECIFICATION

• 4.1 Introduction
4.1.1 Purpose

 Ticket Management System is web application is intended to provide complete

solutions for customers through a single gateway using the internet as the sole
medium. Ticket Management system is a multichannel ticketing system collects
all support tickets from different channels and organizes them in one tab. This
helps agent’s reply to all of them from the same tab.

 This document is meant to discuss the features of Ticket Management system, so

as to serve as a guide to the developers on one hand and a software validation
document for the prospective client on the other.

4.1.2 Intended Audience and Reading Suggestions

This project is a prototype for Ticket management system and it is

restricted within the college premises. This has been implemented under the
guidance of senior software engineer. This project is useful for the Ticket
management system team as well as to the customers.

4.1.3 Product Scope

Initial functional requirements will be: -

 Secure registration and profile management facilities for Customers

 once an issue is raised, an email will be sent to the admin and to the issue raised
user

 The product users can see the matrices based on the different categorised issues
like issue redundancy based, particular issue based, particular tag based, particular
FAQ based.

 For developer, an auto generated link will be sent to the developer email, through
the link developer will register.

Department Of Computer Application 12 June

2020
Ticket Management System

 Initial non functional requirements will be: -

 Secure access of confidential data (user’s details).

 24x7 Availability

4.1.4 References

 https://docs.npmjs.com/creating-node-js-modules
 https://nodejs.org/en/
 https://www.npmjs.com/package/react-loader
 https://reactjs.org/community/support.html

• 4.2 Overall Description

4.2.1 Product Perspective

We are able to generate a ticket or raise an issue for the particular application
where the customer or merchant have been facing issues with the application features.
The issue will be managed until the issue get’s a resolution. And we can view the
metrics based on the tickets count, reccuring issues with the application, based on the
resolved duration, based on the issues.We can raise a ticket on an application and also
with the FAQ’s.

4.2.2 Product Functions

MODERATORS FEATURES (Module 2):

1. Moderators can modify the couple of status and priority of the tickets.
Moderators can change/update the ticket status and ticket priority values. But only
a few. They have some restricted permissions.

2. Moderators can create/read comments. He can comment and reply to the comments
and sub-comments.
Moderators can comment or reply to the comments and they’ll be having the
permissions to update their comments/sub-comments.

3. Moderators can search the applications / raise a ticket and can add the recipient’s
mails and can upload the images.

Department Of Computer Application 13 June

2020
Ticket Management System

Moderators can search the applications on which they need to raise a new ticket
and they can add the recipients mails to whom they want to let know that the
ticket has been raised and can also upload the images related to the ticket.

4. Moderators can read/update his profile details and can update his password.
a. Moderators can read/update his profile information and will be able to add a
mobile number. Moderator can change his old password with a new password.

5. Moderators can assign tickets to themselves.

Moderators can assign tickets from the list of unassigned tickets. Once the tickets
are assigned to a moderator that particular ticket will longer be available for any
other moderators to assign.

CUSTOMERS FEATURES:
1. A customer will be created through a sign up.
2. Customers can search through the applications and raise a ticket.
Customers can search through the applications and select the same to raise a
ticket.
A Customer can raise a ticket with his user id and application id attached.
Meaning we will obtain the user email and the application name respectively from
the ids. Along with a customer can add recipients and upload a few images with
the ticket.

3. Customers can view their tickets.

Customers can view their tickets under the My Tickets section. Where they will be
able to see all the tickets that they have raised.

4. Customers can view their resolved tickets.

Customers can view their tickets which have been resolved by the
moderators/admin under the Resolved Tickets section.

5. Customers can create feedback through react-slack-feedback.

Customers can give feedback through react-slack-feedback, where the feedback is
posted on to the specified slack channel.

6. Customers can rate and review the resolved tickets.

Department Of Computer Application 14 June
2020
Ticket Management System

Customers can rate the ticket and review the ticket if the ticket status is resolved.

7. Customers can re open the ticket.

Customers can re open the ticket if the ticket has been closed.

8. Customers can read/update his profile details and can update his password.
Customers can read/update their profile details. They can add a phone number to
their profile and can also be able to modify their old password with a new
password.

4.2.3 User Classes and Characteristics

 The user who is using the product which company provides, if the users are facing
any issue on the company product then they can use this ticket management system to
raise a ticket.
 The user should be familiar with the Internet.

4.2.4 Operating Environment

Operating environment for the ticket management system is as listed below.

 client/server system
 database: MongoDB(NoSQL)
 Framework: NodeJS, ReactJS
 Packages: Express, Mongoose

4.2.5 Design and Implementation Constraints

 Users should use web browser to use this applications

 Ticket management system is a website that shall operate in all famous browsers, for
a model we are taking Microsoft Internet Explorer versions 7.0, 8.0 and 9.0.

4.2.6 Assumptions and Dependencies

 Shopify users, who is using our product, can raise the issue.

Department Of Computer Application 15 June

2020
Ticket Management System

• 4.3 External Interface Requirements

4.3.1 Hardware Interfaces

 Any standard Operating system

 A browser which supports HTML, CSS & Javascript.

4.3.2 Software Interfaces

Tools/Packages Used in Ticket Management System:

 Linux
 Database: MongoDB(nosql)
 Tools:
o Gitlab – for version control
o Ngrok – for public URL’s
o Balsamiq – for wireframing
o DBDesigner.net – for database modelling.
o VSCode – for code editing.
o Postman – for developing API’s
 Packages (npm):
o JWT(json web token) for authentication and authorization
o Express for web application framework
o AWS s3 for file uploads
o React-Paginate for pagination
o Chrome debugger
o Mongoose for Database Design and Modelling Schema
o Bcrypt for encrypting the password

4.3.3 Communications Interfaces

 FTP for file uploading

 SMTP for sending an email
 HTTPS to transfer the data over the web

• 4.4 System Features

4.4.1 Description and priority

4.1.1.1 Functional Requirements

Department Of Computer Application 16 June
2020
Ticket Management System

 It maintains the information of various application issues. It also sorts the

issues according to the priority and status of the issues.
 The issues can be raised through the FAQ as well.

• 4.5 Other Nonfunctional Requirements

4.5.1 Safety Requirements

If there is extensive damage to a wide portion of the database due to

catastrophic failure, such as a disk crash, the recovery method restores a past copy of
the database that was backed up to archival storage (typically tape) and reconstructs a
more current state by reapplying or redoing the operations of committed transactions
from the backed up log, up to the time of failure.

4.5.2 Security Requirements

Security systems need database storage just like many other applications.
However, the special requirements of the security market mean that vendors must choose
their database partner carefully.

4.5.3 Software Quality Attributes

Availability - The products in the store should be available when the need of
the product is increased.
Correctness - When a customer is ordering a product then the correct product
should be shipped.
Maintainability - The administrator should maintain the product stock.
Usability - The product should satisfy the customer’s needs.

Department Of Computer Application 17 June

2020
Ticket Management System

SYSTEM DESIGN DESCRIPTION

Department Of Computer Application 18 June

2020
Ticket Management System

5 SYSTEM DESIGN DESCRIPTION

5.1 Introduction

5.1.1 Purpose
The purpose of this document is to provide an architectural design of Ticket
Management System, an e-commerce application, which provides options to raise an
ticket for kloc applications online. The document intends to serve as the graphical
representation of architecture put together after understanding the requirements
specified in the preceding document, the Software Requirement Specification.

5.1.2 Scope
The document will cover the design phase of the product. The objective of
Ticket Management System is to complete the software in the given period of time.
NodeJS is used in combination of ReactJS and MongoDB database to develop this
website with Model View Controller architecture.

5.1.3 Overview
This document will contain the general definition and feature of Itsy Bitsy, its
design constraint the overall system architecture. With the help of UML diagrams, the
design of the system and the sub-systems/modules will be explained visually in order
to help the programmer.

5.2 System Overview

5.3 Data Dictionary

Due to confidentiality of the databases maintained, the data dictionary cannot
be published in any form not owned by the company.

Department Of Computer Application 19 June

2020
Ticket Management System

5.4 Functional Design

Data Flow Diagram

Department Of Computer Application 20 June

2020
Ticket Management System

Use Case Diagram

Department Of Computer Application 21 June

2020
Ticket Management System

Activity Diagram

Department Of Computer Application 22 June

2020
Ticket Management System

Department Of Computer Application 23 June

2020
Ticket Management System

Department Of Computer Application 24 June

2020
Ticket Management System

IMPLEMENTATAION

Department Of Computer Application 25 June

2020
Ticket Management System

Department Of Computer Application 26 June

2020