CHAPTER ONE
1.0 Introduction
This is a technical report on the Student Industrial Work Experience scheme (SIWES) with Nignox Hub
(NHub) Foudation Jos Plateau State. This chapter explains the purpose of the report, History of SIWES,
its aims and objectives, the managing bodies of SIWES. It also explains the history of the institution and
organization of the Industrial attachment.
1.1 Overview of SIWES
SIWES stands for Student Industrial Work Experience Scheme. Its problem of lack of adequate practical
skills preparatory for employment in industries by Nigerian graduates of tertiary Institutions. The scheme
is aimed at exposing students to industry based skills necessary for a smooth transition from the
classroom to the world of work. It affords students of tertiary institution the opportunity of being
familiarized and exposed to the needed experience in handling machinery and equipment which are
usually not available in the educational institutions.
1.2 History and Role of Industrial Training Fund (ITF)
The ITF was established in 1971, it has operated consistently within the context of its enabling laws, i.e.
Decree 47 of 1971. The ITF has not only raised training consciousness in the economy, but has also
helped in generating a corps of skilled indigenous man-power which has been manning and managing
various sector of the economy. As part of its responsibilities, the ITF administers the students industrial
work experience scheme (SIWES) and disburses allowances to students.
1.3 Scope and Importance of SIWES
The scheme covers all science and technological based students in Mono technic, polytechnics and
universities in Nigeria, resulting in a high population of students which is easily managed because of the
1|Page
public and private industries that partake in the scheme. SIWES enables students to acquire industrial
know-how their field of study particularly in technological based courses. It enables students experience
the application of theoretical knowledge in solving real life problems.
1.4 Aims and Objectives of SIWES
1. To provide an avenue for students in the Nigerian universities to acquire skills and experience
during their course of study.
2. To prepare students for the work situation they are likely to meet after graduation.
3. To expose students to work on methods and techniques in handling equipment and machinery that
may not be available in their universities.
4. To provide students with an opportunity to apply their theoretical knowledge in real work situation
thereby bridging the gap between theory and practice.
1.5 Managing Bodies of SIWES
The bodies involved in the management are the Federal government, the ITF, the coordinating agencies
include the: Nigerian university commission (NUC), National Council for colleges of Education (NCCE),
National Board for technical Education (NBTE). The functions of the agencies include among others to:
1. Review programs qualified from SIWES regularly.
2. Supervise students on industrial attachment.
3. Provide logistic material needed to administer the scheme.
4. Establish SIWES and accredit SIWES unit in the approved institutions.
5. Ensure payment of allowances for the students and the supervisors.
6. Formulate policies and guidelines for participating bodies and institutions as well.
2|Page
Therefore, the growth, success or otherwise of the SIWES depends on the efficiency of the ministries,
ITF, institutions, general public involved in the articulation and management of the program.
3|Page
CHAPTER TWO
2.0
Overview of the organization
NHub is the first technology centre in Northern Nigeria and the finest in west Africa which empowers
entrepreneurs on their journey to build great ideas out of little or nothing. They work with start-ups at
every stage of maturity to provide the tools, resources, knowledge and expertise the need to succeed.
They help start-ups scale their business, bring innovative services to the market and reach new customers
through the hub’s connections. Their work span from conceiving ideas, incubation, collaboration and
creation of services.
2.1 MISSION
To build great ideas out of little or nothing, work with start-ups to provide tools, resources, knowledge
and expertise and also bring innovative services to the market and research new customers through our
connection.
2.2 VISION
To have a generation of young people using technology in ruling the world with cutting edge ideas and
providing the best and fully tested products and solutions for their clients. To have a large community of
techies who will be solution givers.
2.3 Nignox Hub(NHub) BELIEF
That a better world evolves through the combined accomplishment of creative, committed and passionate
individuals focused on a common purpose. Joining our diverse community of members and collaborators
will inspire and enable you to develop your best work.
4|Page
2.4 MOTTO
Start-up, Innovation and Community
2.5 SERVICES RENDERED
1. Software development
2. Augmented Reality/ Virtual Reality
3. Entrepreneurship
4. Incubation and acceleration
2.6 ORGANOGRAM
CHAIRMAN
BOD(Board Of Directors)
ED(Executive Director)
+
RD
VOLUNTEER
CORP MEMBERS
INTERNS
5|Page
LEGAL
CFO(Chief Financial Officer)
LEAD
URBAN
STREET
LEAD
RURAL
STREET
CBO
DEVELOPERS
CHAPTER THREE
Activities/Experiences Acquired
3.1 Preamble
This chapter covers the activities and experiences I acquired during my SIWES I was exposed to what
web development is all about and the difference between building a website and building a web
application, the technology to be used and how to go about designing before building.
3.2 Activities During The Training
I resumed at Nignox Hub(nHub) on January 6, 2020, where I was first assigned to the Software
Development & Engineering Department. The department is responsible for building and deploying
software, some of the services which include developing web applications, mobile apps, Data Analytics,
Augmented reality and virtual reality(AR/VR), entrepreneurship, and Rural & Urban Strengthening with
technological tools.
During this period, I was exposed to various software and technological tools and languages. Each week
after each exposure, I along sides with other interns were assigned to focus on problems revolving around
the SDGs, and provide solutions to them using available technological tools. Then we began to work in
groups with those tools and languages which we were acquainted with.
The foundation had built several applications through this medium of involving the interns in providing
solutions. I was assigned as the group leader twice, developing and creating platforms that would help
solve the problems. The work we did was mostly Programming and our applications were web-based. Our
major activities were the development and deployment of web applications, adding functionality, database
queries, connecting web applications to MongoDb database and creating dashboards for each user for
good user experience.
The principal industrial training exercise I engaged in was Software Development. The applicability of
the software we built is mostly for Web Apps and Android Users. Therefore, we made use of numerous
6|Page
software mechanisms such as Linux Operating System(Ubuntu), Visual Studio Code(VS Code) and
Google Chrome, etc. Web-based application development requires special languages hence, we made use
of languages like HTML, JavaScript, CSS(Bootstrap Framework), Jquery, Node Js, and MongoDB.
While for Mobile Application we made use of React-Native(Javascript library for building mobile
applications). With all these tools, we created web applications, added functionality and behaviour to
them, wrote our server-side codes, created databases, and connected our web applications to our
databases.
3.3 HYPER TEXT MARK-UP LANGUAGE (HTML):
HTML is a standard mark-up language that is used for designing the structure of web pages, it is a
language that web browsers use to interpret and then compose text, images, videos, audio into visual and
audible web pages. A mark-up language is made up of mark-up tags and hence HTML documents can be
described by these Boiler plate and Tags
<! DOCTYPE html>
<html lang=”en”>
<meta charset=”UTF-8” />
<meta name=”viewport” content=”width=device-width, initialscale=”1.0” />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<head>
<title> TITLE OF PAGE GOES IN HERE</title>
7|Page
</head>
<body>
<!-- this is a comment -->
<h1>THIS IS A HEADING ONE TAG</h1>
<p>THIS IS A PARAGRAPH TAG!!</p>
</body>
</html>
Syntax of Html Page
HTML elements are the building blocks of HTML pages.
•
The <!DOCTYPE html> declaration defines this document to be HTML5
•
The <html> element is the root element of an HTML page
•
The lang attribute defines the language of the document
•
The <meta> element contains meta information about the document
•
The charset attribute defines the character set used in the document
•
The <title> element specifies a title for the document
•
The <body> element contains the visible page content
•
The <h1> element defines a large heading
•
The <p> element defines a paragraph
8|Page
3.3.1 IMPORTANT HTML TAGS:
HTML codes are basically made up of tags, these tags are keywords (tag names) surrounded by angle
brackets and they are represented below:
<tag name>content</tag name>
HTML tags normally come in pairs like <p> and </p>, the first tag in a pair is the start tag which is
also call the (opening tag), the second tag is the end tag (closing tag), the end tag is written like the start
tag, but with a slash before the tag name. There are many HTML tags but some examples of the tags are
listed in the table below;
S/N
HTML TAGS
USE
1
<p></p>
Paragraph tag used for inserting paragraphs
2
<h1></h1>
Heading one tag used for inserting a large
header
3
<pre></pre>
Preformatted tag used for displaying text on
web browser exactly as they are written in the
text editor
4
<form></form>
Form tag, they are used when we want to
insert form elements into webpages (e.g.
input box, submit button etc.)
5
<a href=”#”></a>
Anchor tag to link one webpage to another
6
<!-- -->
Comment tag used for commenting codes in
the text editor
7
<li></li>
List tag used for inserting list of items in
webpage which could be ordered list(ol) or
unordered list(ul)
9|Page
3.3.2 Link Elements In HTML
It is normal for HTML documents to contain links to other documents, which can be located anywhere on
the Web. These links are provided by URLs (Uniform Resource Locators) , which give the location and
filename of a document, and the method used to access it. The following elements represent links to other
documents:
<a href=”URL”> </a>: The HREF attribute of the anchor element specifies a URL. If this attribute has a
value, the contents of the <a> </a> element will be highlighted when the document is displayed in a
browser window, and {Clicking} on this content will cause the browser to attempt to open the file
specified by the URL.
E.g.<A HREF=http://nhubfoundation.org>Nhubfoundation</A>. In this example the text
“Nhubfoundation” represents the contents that would be highlighted as a link to the file named as the
value of the HREF.
3.3.3 Link Types
There are three major types of links:
1. Internal Links: are links within a document. They help in the navigation of large documents.
2. Local Links: are links to documents on the local web server. Local
links can be the full URL (Complete e.g. http://www.yourdomain.com/sales/report.htm) or partial
(Relative to your current directory e.g. /sales/report.htm).
3. External Links: links to pages on other web servers. External links are always the full URL.
NOTE: Remember that the colors of the links to be displayed in the
browser are controlled by attributes of the body element. E.g.
<BODY BGCOLOR=”#FFFFFF” TEXT=”#FF0000” LINK=”#0000FF”
VLINK=”#FF00FF” ALINK=”FFFF00”>
10 | P a g e
3.3.4 URLs - Uniform Resource Locators
A URL is a standard way of referencing a Service, a Host name, a Port,
and a Directory-path.
Service:// Host name : Port / Directory-path
E.g. http://www.1stvirtual.com:80/default.htm
Not all of these components appear in each URL, as you will see when you learn about the different types
of URLs for different services. But the preceding example is a good general guide.
1. HTTP – HyperText Transport Protocol
E.g. http://www.1stvirtual.com/default.html
• The type of service is identified as http. It is the standard protocol for
linking to web pages with multimedia content.
• The Host name is www, in the domain 1stvirtual, in the zone com (that
identifies it as a US commercial site.)
2. FTP – File Transfer Protocol
• The type of service is identified as ftp. This service is used to create
links to files to be downloaded from ftp servers.
3.4 CASCADING STYLE SHEET:
CSS is used in website design and development to determine the presentation of HTML documents, just
from the name it can be used to apply styles to the structure which is written down with HTML (i.e. it
describes how elements must be rendered on screen, on paper, or in other media). There are three ways of
applying the style sheet which are;
11 | P a g e
1. EXTERNAL STYLING: In the external styling, the style sheet that contains the codes for the
effect to be applied to the HTML is saved in an external CSS document and connected to the
HTML document using the link tag as shown below;
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”> </head>
Where rel stands for relationship, the type shows that we are working with CSS, and the href stands
for hypertext reference which specifies the CSS document.
2. INTERNAL STYLING: In internal styling, the style sheet codes are written in the same page
where the HTML document exist, they are always defined within the <style> tags that are located
in between the section where the <head> tag is located in the HTML document we are working
with.
<head>
<style type=”text/css”>
P {text-align: centre; font-size:100px;…}
</style>
</head>
3. INLINE STYLING: From the name “inline”, the stylesheet is written on the same line as the
HTML element that we want to apply the styling to, as shown below;
<body>
<h3 style=”margin-left:300px; font-size:400px;”>
Welcome
</h3>
12 | P a g e
</body>
This will only change the particular tag you are styling.
3.4.1 CSS SELECTORS
Two basic ways in which CSS elements can be referenced is through the use of class and id where
the classes can be referenced using a dot (.) within the style tag and the id are referenced using the hash
(#) within the style tag.
<h2 class=”heading”> welcome </h2>when styling is referenced using .heading{…}
<p id=”para”> programmers’ hub </p> is referenced using #para {…}
Figure 3.0: CSS style format
3.5 BOOTSTRAP
Bootstrap is the most popular HTML and CSS framework for developing responsive, mobile-first
web sites. It is a frame work that was designed with the aim of making webpages of website responsive
(i.e. ability to run on different platforms without losing form or shape).
13 | P a g e
3.5.1 BOOTSTRAP GRID SYSTEM
Bootstrap grid system are made up of four classes which are xs extra-small (for phones), SM small (for
tablets), MD medium (for desktops), and LG large
(For larger desktops). Bootstrap grid system allows up to 12 columns across the whole webpage and it
can be divided as (12), (6,6), (8,4), (7,5),(9,3), (4,4,4), (3,3,3,3) and so much more which in all cases must
count to total of 12.
3.6 What Is JAVASCRIPT?
Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a
part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities. JavaScript
was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the
excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the
name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers. The ECMA-262 Specification defined a standard version of the core
JavaScript language.
JavaScript is a lightweight, interpreted programming language.
Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform.
3.6.1 Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
14 | P a g e
It means that a web page need not be a static HTML, but can include programs
that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts.
For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form
field. The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server. JavaScript can be used to trap user-initiated events such as
button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.
3.6.2 Advantages of JavaScript
The merits of using JavaScript are:
Less server interaction: You can validate user input before sending the
page off to the server. This saves server traffic, which means less load on
your server.
Immediate feedback to the visitors: They don't have to wait for a
page reload to see if they have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as dragand-drop components and sliders to give a Rich Interface to your site
visitors.
3.6.3 Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features:
Client-side JavaScript does not allow the reading or writing of files. This
has been kept for security reason.
15 | P a g e
JavaScript cannot be used for networking applications because there is no
such support available.
JavaScript doesn't have any multithreading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that
allows you to build interactivity into otherwise static HTML pages.
3.6.4 Comments in JavaScript
JavaScript supports both C-style and C++-style comments. Thus:
Any text between a // and the end of a line is treated as a comment and
is ignored by JavaScript.
Any text between the characters /* and */ is treated as a comment. This
may span multiple lines.
JavaScript also recognizes the HTML comment opening sequence <!--.
JavaScript treats this as a single-line comment, just as it does the //
comment.
The HTML comment closing sequence --> is not recognized by JavaScript
so it should be written as //-→.
The following example shows how to use comments in JavaScript.
<script language="javascript" type="text/javascript">
<!-// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
16 | P a g e
*/
//-->
</script>
JavaScript in <head>...</head> Section
If you want to have a script run on some event, such as when a user clicks somewhere, then you will place
that script in the head as follows.
<html>
<head>
<script type="text/javascript">
<!-function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
This code will produce the following results:
Hello World
17 | P a g e
This is web page body
3.6.5 JavaScript Reserved Words
A list of all the reserved words in JavaScript are given in the following table.
They cannot be used as JavaScript variables, functions, methods, loop labels, or any object names.
abstract
else
instanceof
switch
boolean
enum
init
synchronized
break
export
interface
this
byte
extends
long
throw
case
false
native
throws
catch
final
new
transient
char
finally
null
true
class
float
package
try
const
for
private
typeof
continue
function
protected
var
debugger
goto
public
void
default
if
return
volatile
delete
implements
short
while
do
import
static
with
double
in
super
18 | P a g e
3.6.6 JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of data types it
supports. These are the type of values that can be represented and manipulated in a programming
language. JavaScript allows you to work with three primitive data types:
Numbers, e.g., 123, 120.50 etc.
Strings of text, e.g. "This text string" etc.
Boolean, e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single
value. In addition to these primitive data types, JavaScript supports a composite data type known as
object. We will cover objects in detail in a separate chapter.
3.7 What is React?
React.js is a JavaScript library that was created by Facebook. It is often thought of as the “view”
in a model-view-controller (MVC) user interface. This makes sense when you consider the fact
that the only function that must be implemented in React is the “render” function. The render
function provides the output that the user sees (the “view”).
3.7.1 Why React is better with JSX
Most React implementations make use of JSX, which allows you to put XML-like syntax right
within JavaScript. Since React displays output as it’s main function, we will be using HTML in
just about every component. JSX simplifies the code that would normally have to be written in
JavaScript, which makes your code much more readable and simplified.
JSX is not required, but consider the difference between two very simple statements. The
following statement is created without JSX:
19 | P a g e
3.7.2 Understanding React components
React is based on components and states. This is what makes React such a popular library.
When you want to create an application, you usually break it into simpler parts. When
programming with React, you will want to break your interface into its most basic parts, and
those will be your React components.
Components are wonderful because they are modular and reusable. You can take a basic
component used in one area of an application and reuse it in others without having to duplicate
code. This helps to speed up development.
Components can be nested, so that the most basic components can be grouped into a parent
component. For example, if you were to create a home listing interface with React, the top level
component would be the home list itself. Within the list, you would have a description of a single
home. Within the home component, you would have the address of the home, as well as other
small components such as a photo, perhaps a favorite or save button, and a link to view details
and a map.
3.7.3 React component states
Component states are what give React its name. Any time a component’s state changes, its
“render” function is called, updating the output. In essence, each component “reacts” to
changes, which is handy for any user interface. Data stored in a state should be information that
will be updated by the component’s event handlers (changes that should update in real time as
the interface is being used).
If we were to have a home listing, any number of things may change in the database. New
photos could be added, and a home can be bought and sold. You wouldn’t necessarily want any
20 | P a g e
of these things to update in real time in the interface.
One thing that may change very quickly, however, would be the number of times a home is
saved (or favorited or liked) by a user. The little component that displays the number of saves could
update as soon as the person clicks the Save button by updating the state the moment
the button is clicked. Let’s build the Saves component to show what this would look like:
3.7.4 How to use props
Components pass properties to their children components through the use of props. One thing
to keep in mind is that props should never be used to determine the state of a component. A
property would be something such as the address of a home, passed from the listing
component to the individual home component. The state, on the other hand, should depend on data that
may be updated, such as the number of times people have saved the home.
Let’s look at the rest of this basic example. Taking into account the proper use of props and
states, you may notice that there are some problems with this code:
3.8 Brief Introduction to NODE.JS
NODE is JavaScript library for server side or back-end. It is mostly used in web applications. In
development with node, we build a server that listens to requests such as Get or Post Requests.
We use a dependency and library called “express” to build the server. Express contains built in methods
such as ROUTER, ROUTE, USE, SET, etc. So express saves us from the stress of writing these methods
ourselves from scratch. Once we have the server setup, we bring in the whole front-end project into the
node project as templates using any convenient template engine such as EJS, JADE, HBS, and PUG.
From there, we build functionalities to such as registration, login, admin dashboard functionalities, etc.
21 | P a g e
3.8.1 GET and POST Requests
The best simplest way of defining these two are as follows
GET: It requests the data from a specified resource
POST: It submits the processed data to a specified resource
S/N
GET
POST
1
In case of Get request, only limited
In case of post request, large amount
amount of data can be sent because data
of data can be sent because data is
is sent in header.
sent in body.
Get request is not secured because data is
Post request is secured because data
exposed in URL bar.
is not exposed in URL bar.
3
Get request can be bookmarked.
Post request cannot be bookmarked.
4
Get request is idempotent. It means
Post request is non-idempotent.
2
second request will be ignored until
response of first request is delivered
5
Get request is more efficient and used
Post request is less efficient and used
more than Post.
less than
3.8.2 Building and deployment of Web Applications with NodeJs
When building a web application, NodeJs is one of the server-side frameworks that allow us to add
functionality to our web application, thereby making it a dynamic web application. NodeJs allows page
rendering(to make the pages accessible by the browser), asynchronously allows smooth and non-blocking
functionality on the web app, very fast to deploy as it was built on Google Chrome's V8 Javascript engine
which is very memory efficient, well licensed under the MIT License, handles error in a developer22 | P a g e
friendly manner, and does not buffer any information that has been requested or responded to, on the app.
It is a cross-platform environment and can run on Microsoft Windows Linux, FreeBSD, and IBM. It
provides an event-driven architecture and non-blocking I/O that is optimized & scalable.
Node.js is a server-side JavaScript allowing us to create applications that send and receive information.
You get to use the same language on the front-end and back-end!
Node.js is designed to quickly deal with multiple tasks (for example, receiving messages, updating
databases, processing data) simultaneously.
It's open-source with thousands of packages available for use!
NodeJs has its package manager that is installed alongside with NodeJs runtime environment called Node
Package Manager, it manages each of the Modules and packages involved in building and deploying
different functionality on the web app.
3.8.3 Notions About NodeJs
The following diagram portrays some essential characters of Node.js which we are inclined to review in
detail in the succeeding chapters.
23 | P a g e
Figure 3.1: NodeJs Functional Diagram
Fig 3.2: NodeJs Event Handling Diagram
24 | P a g e
Figure 3.3: NodeJs Full Functional Diagram
3.8.4 Where to Apply Node.js?
The following are the areas where Node.js proves itself as a perfect technological tool;
Input/Output (I/O) Bound Applications: Application that sends and receives requests from its users.
Data Streaming Applications: Applications that allow the transfer of data without loss of any, since it
handles error in a developer-friendly manner.
Data-Intensive Real-time Applications (DIRT): It allows a server to hold a number of connections
open while handling many requests and keeping a small memory footprint. It’s designed to be responsive,
like the browser.
JSON APIs based Applications: its support an application program interface to specifies how software
component should interact when programming graphical interface component.
25 | P a g e
3.8.5 Node Package Manager(npm)
Npm is a package manager for Node.js packages or modules which is a command-line utility for
interacting with repositories that aids in package installation, version management, and dependency
management. These are libraries built by the remarkable developer community which will solve most of
your generic problems. NPM (Node package manager) has packages you can use in your apps to make
your development faster and efficient. These packages include:
1. Express Handle Bar for rendering pages
2. Bcrypt for hashing user’s password to avoid being hacked
3. Passport.Js for user authentication
4. Body-Parser to alert users.
5. Logger to allow the developer to see the usage of his web application.
6. Mongoose to allow the developer to link its Web app to its MongoDB database etc.
And these packages are often installed when creating a web application or installed globally on the
system.
3.8.6 NodeJs Play-ground Environment
Linux Operating System(Ubuntu) has an inbuilt terminal that allows its user to install packages and
software through the terminal without getting crossed upon installation. To get this version, you can use
the apt package manager. Refresh your local package index by typing this on your system terminal:
$ sudo apt update
//to refresh the system local package index
Install Node.js from the repositories:
$ sudo apt install nodejs
26 | P a g e
//to Install NodeJs
If the package in the repositories suits your needs, this is all you need to do to get set up with Node.js. In
most cases, you’ll also want to also install npm, the Node.js package manager. You can do this by typing:
$ sudo apt install npm //to install Node Package Manager
This will allow you to install modules and packages to use with Node.js and Because of a conflict with
another package, the executable from the Ubuntu repositories is called NodeJS instead of node. Keep this
in mind as you are running software. To check which version of Node.js you have installed after these
initial steps, type:
$ nodejs -v
$ sudo npm install express-HandleBars -g --save //To install any packages
Figure 3.4: Installation of NodeJs on Ubuntu
27 | P a g e
Visual Studio Code is oftentimes recommended to every developer who will love to use the command
line utility while deploying and building an app. NodeJs root files are typically identified with extension
“.js”.
3.8.7 Writing Web application with NodeJs
Writing web applications with Node involves writing function handlers that get called when certain Node
events occur, like a request and response actions between the client and the server-sides. Nodejs
Application programming logic evolves around importing modules(packages), creating a server.js file,
and writing routes for each of the actions taken on the web page. The following actions take place when
writing web apps with NodeJs.
1. Create a new folder, cd into the folder with your terminal or command prompt.
2. Open the folder through you Visual Studio Code, and open the embedded terminal and type
3. $ npm init
4. And hit enter till you successfully create a package.json file in the root of the folder.
5. You will be asked to enter the package name(the name of the app you are developing), Version,
Description, its entry point(oftentimes renamed to Server.js), test command, git repository, major
keywords, author and license. After running these commands, you will see a node_modules folder
containing all of the project dependencies specified in the package.json
28 | P a g e
Figure
3.5: Visual Studio Code interface showing a server-side with nodejs
3.8.8 Deploying to heroku:
Deploying to Heroku works via Git. It's very simple once you understand how it works. In essence you
can deploy to Heroku by pushing to a remote repo, just like pushing to GitHub.Because this is a new
project, Git needs to be initialized:
Figure 3.6: Initializing a new heroku project
29 | P a g e
Now, we're ready to add and commit all the project files. Though, before doing that, we'll add
a .gitignore file because we don't want the node_modules directory to be committed. It should be
generated by npm upon deployment rather than committed to source control.
In your .gitignore file, simply add:
Figure 3.7: adding our node_modules to our .gitignore file
With that out of the way, we can add and commit:
Figure 3.6: adding the project to be deployed
Once the project is commited, we need to create a Heroku app that'll correspond to our Node app:
Figure 3.7: application name successfully created
Once complete, Heroku returns the newly created app name . If you browse to the URL you'll see a
Heroku welcome page.This still isn't our app, simply a public Heroku app to which we'll deploy our own
3.8.9 Deploying the App
30 | P a g e
In the previous heroku create command, a new remote will have been added to my Git repository,
allowing me to deploy to Heroku with a simple command like this:
Figure 3.8: application deployed using the git push command
Since the application is successfully deployed, we can go ahead and start it up:
31 | P a g e
CHAPTER FOUR
THE DEVELOPMENT PROCESS OF A APPOINTMENT MANAGEMENT
SYSTEM FOR HOSPITALS
USCHEDULE is an appointment management system for hospitals that enables booking of appointment
by patients easy and stress free. Both Hospitals and Patients will have to register on the platform to have
access to the appointments .Any apointment booked by any registered patient to any registered hospital
will been seen by the hospital and then the hospital can approved the appointment.This project was built
using HTML,CSS and Bootstrap for the user interface and NODEJS for the server-side and MONGODB
as database for data storage.
Fig. 4.0: Home page of the hospital appointment management application(USCHEDULE).
32 | P a g e
This is the Regitration form that allows patient register on the platform however the data collected is sent
to the server for validation and therefore saved to the mongodb database. Upon registration a unique
patient ID is generated for the patients so they can be easily distinguished by their ID number
Fig. 4.1: Registeration form for all patients.
After registering, the patient is therefore prompted to login so that he/she can be able to book appointment
to his or her perfered hospital registered on the platorm as well and therefore after login the patients can
view their profile.
33 | P a g e
Fig. 4.2:Patients Dashboard after login
The appointments booking form that enables the patient book for appointments
Fig. 4.3: Appointment form that enables patient book for appointments
34 | P a g e
This is the Regitration form that allows hospitals register on the platform however the data collected is
sent to the server for validation and therefore saved to the mongodb database and then they can proceed to
login to view their dashboard
Fig. 4.4:Registration for all Hospitals
After registering the hospital is therefore prompted to login to their profile so they can see the information
the register with and as well see the list of appointments sent to them so they can either approve or
decline
35 | P a g e
Fig. 4.5: Hospital dashboard after login.
The list of all appointment sent to this particular hospital registered on the platform
Fig. 4.6: Hospital viewing all appointments booked for them
The list of all Doctors associated with this particular hospital
36 | P a g e
Fig. 4.7: Hospitals viewing the list of Doctors they have in their hospoital
This is the admin dashboard that monitors the activities of both the hospital and the patients registered on
the platform. The admin sees the total number of hospital registered on the platform, the total number of
patients registered as well and the total number on appoitments booked across the platform to all
registered hospital.
37 | P a g e
Fig. 4.8: Admin Dashboard
The view of mongodb database and the data it storing from the application all in their respective
collections.
Fig. 4.9: Mongodb database showing all the data stored
38 | P a g e
CHAPTER FIVE
RECOMMENDATIONS AND PROBLEMS ENCOUNTERED
5.1 Recommendations
Humbly, I would like to suggest the Student Industrial Work Experience Program to all students from
different tertiary institutions as it helps shape the future of students and allows them to see the nature of
their studies as well as to give them confidence that they can succeed in a real-world of the environment
of their area of study. I would also recommend that ITF strengthen its relationship with all students
involved in the program to give the student more confidence that what they are doing is worth it. Finding
the right place to do the training is also one of the biggest challenges. Consequently, I will suggest that
ITF should help aspiring students to identify a well-organized and trusted institution to help them in
attaining the right experience that worth their pay/stay in various institutions. Furthermore I would like to
suggest the following
1. Most of us student only get to know of IT report format at our respective base, therefore each
department should orientate and outline what is expected by the students before proceeding for the IT.
2. SIWES should make available a stipend to aid student movement to and fro in their places of
attachment
3. Students should seek internship in establishments with goals similar to their aims
4. Students should show positive disposition to all tasks assigned during the period
5. Institutions should collaborate with establishments for ease of placement for students
5.2 Problems encountered
During the course of the Industrial training various problems were encountered but most of them solved
at the end, these problems encountered include:
39 | P a g e
1. Installation of linux operating system: During the course of my IT, I was asked to install a linux
based operating system which is the UBUNTU which was difficult to install and after successful
installation I found it difficult to use as I was used to the windows based operating system. But I
later found a way of using it efficiently by downloading tutorials on the commands available for
the operating system then I had to practice day and night to be good at it.
2. Learning new programming languages for the first time was difficult for me as I need to
understand a new syntax and semantic for a new language but was able to find my way around it
by downloading books and tutorial videos on the language I needed to learn
3. Learning how to use the programming languages I learnt to built real-world appliactions was
difficult at first as I lack thinking outside the box but was able to overcome that by using the
language to solve simple problems before advancing to building real-world applications
40 | P a g e
CHAPTER SIX
SUMMARY AND CONCLUSION
6.1 Summary
My industrial training experience report covers the activities undertaken during my industrial attachment
at Nignox Hub(nHub) Foundation on software Development. Every Friday, the hub observes Pitch
Friday, a weekly assessment program on my skills and know-how evolving basically on the system
development life cycle(SDLC).
Furthermore, with the impact of the weekly pitch Friday, I was able to deepen my understanding of
software development and user interface designs as aforementioned in chapter 3.
6.2 Conclusion
It is of a great need to express my pleasure, to be granted the opportunity to undertake my one(1) year
industrial training program at the Nignox Tech Hub (nHub) Foundation, which is part of academic
standard and a requirement for successful completion and award of Bachelor of Technology Degree in
Nigeria. The most important thing I left my place of industrial training attachment with is discovering to
work as an individual before working as a team member and also as a team leader because this is when
you can effectively acquire skills to contribute to your team as a whole, my investigation and research
skills much improved. The Vastest lesson I have discovered from the SIWES’s program is that one should
have a Growth Mindset and discard the Fixed Mindset because it doesn’t allow one to grow and try new
ideas.
Also, I was privileged to work and volunteer with the field professionals that cross my path, and that
helped me narrow down my research and training moments to what I love to do for a successful and
flourishing career.
41 | P a g e
Reference:
the complete beginners-guide to react byDyrr
42 | P a g e