29INTER Converted Pages Deleted
29INTER Converted Pages Deleted
An Internship Report On
“'Web UI development for Machine”
Submitted in partial fulfillment for the award of the degree of
BACHELOR OF NGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING
Submitted by
HARSHITHA V
USN: 1KS17CS029
Internship Carried
Out at
ABB Global Industries and Services Private Limited
Bhoruka Tech Park, Bangalore
CERTIFICATE
This is to certify that the Internship Training entitled “'Web UI development for Machine”
presented by HARSHITHA V, USN: 1KS17CS029 of 8th semester in partial fulfillment of
the award of Bachelor of Engineering in CSE in Visvesvaraya Technological University,
Belagavi during the academic year 2020-21. The Internship Training has been approved as it
satisfies the academic requirements in respect of Internship Training work prescribed for the
Bachelor of Engineering degree.
External Viva
Name of the Examiners Signature with date
1.
2.
DECLARATION
I, Harshitha V (USN: 1KS17CS029) student of eight semester B.E, Computer Science and
Engineering, K. S. Institute of Technology, hereby declare that the Internship Report entitled
“Web UI development for Machine” submitted to the Visvesvaraya Technological University,
Belagavi during the academic year 2020-2021, is a record of original work based on the
Internship carried out at. Under the External Guidance of Ms. Beethika Dhar, Associate
Project Manager, ABB Global Industries and Services Private Limited, Digital R&D, MOSE
and Internal Guidance of Dr. Dayananda R B, Professor, Computer Science & Engineering,
K. S. Institute of Technology. The Internship Report has been submitted in partial fulfillment
of the requirements for the award of the degree of Bachelor of Engineering in Computer
Science and Engineering. The results embodied in this report have not been submitted to any
other University or Institute for the award of any degree.
Date: Harshitha V
Place: Bengaluru 1KS17CS029
EXECUTIVE SUMMARY
The internship training at ABB Global Industries and Services Private Limited was a Abundant
source of knowledge on Full stack development related activities. The university provided us an
opportunity to work in any reputed organization as a part of the curriculum to get hands on
experience of practical issues in real time situations. I went through ABB Global Industries and
Services Private Limited as I was interested in research. As a part of training, I was introduced to
various domains of the company and few resource persons of the organization. I was allotted a
Project Manager as my guide and I followed all instructions given by her. The guide made me
more comfortable and the environment was student friendly. All the technical and non- technical
staff were very helpful and co-operative.
I was exposed to various tasks and was keen to learn the concepts. The internship program
consisted of learning the technical aspects about manual process related to huge motors can be
automated . I learnt the basics of Node.js, Html, CSS & MongoDB to store data.
Finally, the company let me apply my skills to a real-world problem by assigning this task of
“Web UI development for Machine”. All the people in the organization supported me to
successfully complete my internship training.
HARSHITHA V
1KS17CS029
ACKNOWLEDGEMENT
The successful internship training would be incomplete without the mention of the people who
made it possible and whose constant guidance crowned my effort with success.
I would express my gratitude to Dr. K.V.A. Balaji C.E.O. K.S. Institute of Technology,
Bengaluru, for facilitating me to present the Internship.
I would like to extend my gratitude to the Principal/Director, Dr. Dilip Kumar K, K.S. Institute
of Technology, Bengaluru, for facilitating me to present the Internship.
I thank Dr. Rekha B. Venkatapur, Professor and Head Department of Computer Science
and Engineering K.S. Institute of Technology, Bengaluru for her encouragement.
I would also like to thank my external guide, Ms. Beethika Dhar, Associate Project
Manager, ABB Global Industries and Services Private Limited for her constant guidance and input.
I would like to thank all the teaching and non-teaching staff of the college for their co-
operation.
Finally, I extend my heart-felt gratitude to my family for their encouragement and support
without which I wouldn’t have come so far. Moreover, I thank all my friends for their invaluable
support and co-ordination.
I
ABSTRACT
The full stack development field, can be briefly defined a person who can develop both client
and server software. In addition to mastering HTML and CSS, The filed requires you to know how to
Program a browser (like using JavaScript, jQuery, Angular, or Vue), Program a server (like using
PHP, ASP, Python, or Node) and Program a database (like using SQL, SQLite, or MongoDB).
The project involved understanding the current data collection process and designing a user-
friendly UI to replace it. This UI also runs the first-level validations and has been coded to be scalable
in future. It formed the basis of further back-end validations for easy filtering of meaningful data for
algorithm development..
LIST OF CONTENTS
ABSTRACT II
1 INTRODUCTION 1
2 COMPANY PROFILE 2
3 TASK PERFORMED 3
4 REQUIREMENT SPECIFICATION 4
5 CREATING APPLICATION 5
7 SNAP SHOTS
IV
Web UI development for Machine Data collection 2020-2021
CHAPTER 1
INTRODUCTION
The goal of this system is to automate process which was earlier a manual process. In manual
process it requires a human to push it through every step and know whom to send it to. Every Motor
in the Lab or Site has certain parameters like voltage, temperature etc such values for every motor
were earlier entered into an excel sheet and shared via email. This is a very tedious process and
time consuming. The proposed system is programmed to auto-assigns tasks. Therefore the system
or the project I worked on solved this problem. The process was automated and now the people
working on theses motors could enter parameter values in a user Interface and save them in
database for further use. The user interface developed was very easy to understand and upload
data. It was user friendly. All data related to motor are kept in the same place and can be retrieved
whenever needed. This makes the process more fast and efficient. The project also makes it easy to
share the data with others in the industry. This project also reduces the data redundancy and
consumes less time to store thedata.
Dept. of CSE, 1
CHAPTER 2
COMPANY PROFILE
ABB Power Products are the key components to transmit and distribute electricity. The
division incorporates ABB's manufacturing network for transformers, switchgear, circuit
breakers, and cables and associated equipment. It also offers all the services needed to ensure
products' performance and extend their lifespan. The division is subdivided into three business
units.
ABB Power Systems offers turnkey systems and services for power transmission and
distribution grids, and for power plants. Substations and substation automation systems are
key areas. Additional highlights include flexible alternating current transmission systems
(FACTS), high-voltage direct current (HVDC) systems and network management systems. In
power generation, ABB Power Systems offers the instrumentation, control and electrification
of power plants.
ABB Discrete Automation and Motion provides products, solutions and related services that
increase industrial productivity and energy efficiency. ABB's motors, generators, drives,
programmable logic controllers (PLCs), power electronics and robotics provide power,
motion and control for a wide range of automation applications. The leading position in wind
generators and a growing offering in solar complement ABB's industrial focus, leveraging
joint technology, channels and operations platforms.
ABB Low Voltage Products manufactures low-voltage circuit breakers, switches, control
products, wiring accessories, enclosures and cable systems to protect people, installations and
electronic equipment from electrical overload. The division further makes KNX systems that
integrate and automate a building's electrical installations, ventilation systems, and security
and data communication networks.
ABB Process Automation provides customers with products and solutions for
instrumentation, automation and optimization of industrial processes. The industries served
include oil and gas, power, chemicals and pharmaceuticals, pulp and paper, metals and
minerals, marine and turbo-charging. Key customer benefits include improved asset
productivity and energy savings
CHAPTER 3
TASK PERFORMED
Used Figma Board for from wireframing website before coding
Used HTML, CSS, JavaScript for developing a web form.
HTML form validation was carried out by using JavaScript.
If a form field is empty, functions were developed to alerts a message, to prevent the form
from being submitted Mandatory functions were marked with red.
JavaScript was also used to validate numeric input. Fields like voltage was validated before
the form was submitted to ensure such parameters dint contain alphabets or wrong entry.
The web form also had an option to upload csv files
Nodejs was used web site and back-end API services, but was designed with real-time, push-
based architectures in mind.
npm is the package manager for the Node JavaScript platform. It puts modules in place so that
node can find them, and manages dependency conflicts intelligently. Thus npm was used to
install several dependencies like csv parser
Python Scripts were run from Node.js with basic but efficient inter-process communication
and better error handling
The form data was given as argument to python scripts
The python scripts returned multiple values after execution. These value were stored in a csv
and were also uploaded to MongoDB
Mongoose was used to build schemas for saving data into mongodb.
Express methods was used to specify what function is called for a particular HTTP verb (
GET , POST , SET , etc.) and URL pattern ("Route").
Data from database was fetched using primary keys of those particular tables and diaplyed in
the user interface
EJS was used as the view engine for all the html pages
CHAPTER 4
REQUIREMENT SPECIFICATION
Hardware Requirements:
• Processor : Intel Core i5 or AMD FX 8 core series with clock speed of 2.4 GHz or above
• RAM : 2 GB or above
• Hard Disk : 40GB(approx)
Software Requirements:
• Operating System: Windows 7/8/10 or Linux
• Tools :Visual Studio Code, Any browser, Bootstrap Studio, Node.js
• Coding language : HTML, CSS, Javascript, Bootstrap,
Front End
1. HTML
The HyperText Markup Language, or HTML is the standard markup language for documents
designed to be displayed in a web browser.Web browsers receive HTML documents from a
web server or from local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the
appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements are
delineated by tags, written using angle brackets.
2. CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language such as HTML. CSS is a simple mechanism for
adding style (e.g., fonts, colors, spacing) to Web documents. CSS saves a lot of work. It can
control the layout of multiple web pages all at once.
CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file which reduces complexity and
repetition in the structural content as well as enabling the .css file to be cached to improve the
page load speed between the pages that share the file and its formatting.
3. JavaScript
JavaScript, often abbreviated as JS, is a programming language that conforms to the
ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-
paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and
first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide
Web. Over 97% of websites use it client-side for web page behavior, often incorporating
third-party libraries. All major web browsers have a dedicated JavaScript engine to execute
the code on the user's device.
4. Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-
end web development. It contains CSS and JavaScript-based design templates for typography,
forms, buttons, navigation, and other interface components.Bootstrap is developed mobile
first, a strategy in which we optimize code for mobile devices first and then scale up
components as necessary using CSS media queries.
Web UI development for Machine Data collection 2020-2021
CHAPTER 5
CREATING APPLICATION
5.1 SETTING UP NODE.JS
Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js
is the runtime and npm is the Package Manager for Node.js modules. Node.js applications are
written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows,
and Linux.
Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as
well as Node.js debugging. However, to run a Node.js application, you will need to install the
Node.js runtime on your machine. By using the .js file extension, VS Code interprets this file as
JavaScript and will evaluate the contents with the JavaScript language service.
npm is the world's largest software registry.Open source developers from every continent use
npm to share and borrow packages, and many organizations use npm to manage private
development as well.
Before starting any new Node.js project we should run npm init to create a new package.json file
for our project. Create a new empty directory in your development environment and run npm init.
File named Index.js or app.js becomes the starting point of the application.
package.json file holds various metadata relevant to the project. This file is used to give
information to npm that allows it to identify the project as well as handle the project's
dependencies. It can also contain other metadata such as a project description, the version of the
project in a particular distribution, license information, even configuration data - all of which can
be vital to both npm and to the end users of the package. The package.json file is normally
located at the root directory of a Node.js project.
Dept. of CSE, 6
Web UI development for Machine Data collection 2020-2021
Dept. of CSE,
VIEW ENGINE
A template engine enables you to use static template files in your application. At runtime, the
template engine replaces variables in a template file with actual values, and transforms the
template into an HTML file sent to the client. This approach makes it easier to design an HTML
page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express
application generator uses Jade as its default, but it also supports several others.
To render template files, the following application setting properties were changed, in app.js in
the default app created by the generator:
views, the directory where the template files are located. Eg: app.set('views', './views'). This
defaults to the views directory in the application root directory.
view engine, the template engine to use. For example, to use the EJS template
engine: app.set('view engine', 'EJS').
EJS simply stands for Embedded JavaScript. It is a simple template language or engine. EJS has
its own defined syntax and tags. It offers an easier way to generate HTML dynamically.
If you want to render a static page then go for an HTML file and if you want to render a
dynamic page where your data coming from various sources then you must choose an EJS file.
EJS is way faster than Jade and handlebars. EJS has a really smart error handling mechanism
built right into it. It points out to you, the line numbers on which an error has occurred so that
you don’t end up looking through the whole template file wasting your time in searching for
bugs.EJS uses Simple template tags such as <% %> to display dynamic data coming from the
database .
MongoDB makes use of records which are made up of documents that contain a data structure
composed of field and value pairs. Documents are the basic unit of data in MongoDB.
Express apps can use any database supported by Node (Express itself doesn't define any specific
additional behavior/requirements for database management). There are many popular options,
including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.
Customer experience has quickly become the most important competitive differentiator and
ushered the business world into an era of monumental change. As part of this revolution,
enterprises are interacting digitally – not only with their customers, but also with their employees,
partners, vendors, and even their products – at an unprecedented scale. This interaction is
powered by the internet and other 21st century technologies – and at the heart of the revolution
are a company’s cloud, mobile, social media, big data, and IoT applications.
NoSQL databases are specifically designed for unstructured data which can be document-
oriented, column-oriented, graph-based, etc. In this case, a particular data entity is stored
together and not partitioned. So performing read or write operations on a single data entity is
faster for NoSQL databases as compared to SQL databases.
Mongoose requires a connection to a MongoDB database. You can require() and connect to a
locally hosted database with mongoose.connect(), as shown below.
5.4 Connecting to mongoDB using mongoose
You can get the default Connection object with mongoose.connection. Once connected, the open
event is fired on the Connection instance.
Models are defined using the Schema interface. The Schema allows you to define the fields stored
in each document along with their validation requirements and default values. In addition, you
can define static and instance helper methods to make it easier to work with your data types, and
also virtual properties that you can use like any other field, but which aren't actually stored in the
database (we'll discuss a bit further below).
Schemas are then "compiled" into models using the mongoose.model() method. Once you have a
model you can use it to find, create, update, and delete objects of the given type. Everything in
Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the
shape of the documents within that collection.
To use our schema definition, we need to convert our Schema into a Model we can work with. To
do so, we pass it into mongoose.model(modelName, schema)
By default, Mongoose adds an _id property to your schemas. Mongoose models provide several
static helper functions for CRUD operations. Each of these functions returns
a mongoose Query object.
MongoDB functions include Create Operations Read Operations, Update Operations, Delete
Operations. MongoDB provides the methods such as db.collection.insertOne() and
db.collection.insertMany() to insert documents into a collection.
Connect to Your Atlas Cluster In Atlas, you can connect to your cluster using the following
connection methods Connect with the MongoDB Shell to interact with your cluster using the
Javascript interface of mongosh. Connect your application to your cluster using the Node.js
driver, or the PyMongo driver. Connect to your cluster using MongoDB Compass to explore,
modify, and visualize your data with Compass.
A promise is what is returned when the save to the database completes. This save will either
finish successfully or it will fail. A promise provides two methods that will handle both of these
scenarios. If this save to the database was successful it will return to the .then segment of the
promise. In this case we want to send text back the user to let them know the data was saved to
the database.
• String − This is the most commonly used datatype to store the data. String in MongoDB must
be UTF-8 valid.
• Integer − This type is used to store a numerical value. Integer can be 32 bit or 64 bit depending
upon your server.
• Boolean − This type is used to store a boolean (true/ false) value.
• Double − This type is used to store floating point values.
• Min/ Max keys − This type is used to compare a value against the lowest and highest BSON
elements.
• Arrays − This type is used to store arrays or list or multiple values into one key.
• Timestamp − ctimestamp. This can be handy for recording when a document has been
modified or added.
• Object − This datatype is used for embedded documents.
• Null − This type is used to store a Null value.
• Symbol − This datatype is used identically to a string; however, it's generally reserved for
languages that use a specific symbol type.
• Date − This datatype is used to store the current date or time in UNIX time format. You can
specify your own date time by creating object of Date and passing day, month, year into it.
• Object ID − This datatype is used to store the document’s ID.
• Binary data − This datatype is used to store binary data.
• Code − This datatype is used to store JavaScript code into the document.
• Regular expression − This datatype is used to store regular expression.
Web UI development for Machine Data collection 2020-2021
CHAPTER 7
SNAP SHOTS
Dept. of CSE, 15
Web UI development for Machine Data collection 2020-2021
CHAPTER 8
Dept. of CSE, 17
REFERENCES
https://www.tutorialsteacher.com/nodejs/nodejs-tutorials
https://docs.npmjs.com/
https://expressjs.com/
https://www.npmjs.com/package/express
https://docs.mongodb.com/manual/
https://global.abb/group/en/about
https://new.abb.com/service/rapid-response?
_ga=2.133717966.1331623465.1626720082- 1197196784.1624365447
https://new.abb.com/service/performance?
_ga=2.192460650.1331623465.1626720082- 1197196784.1624365447