Industry_Project_Report

PROJECT REPORT
Department of Information Technology, H.Dipin Software Design and Development
(Industry Stream)
StudentName:EannaHegerty
StudentID:12232385
Supervisor:EndaBarrett
Date of Submission:18/04/2016

1 | P a g e
Table of Contents
Introduction.................................................................................................................................3
Document Overview ................................................................................................................. 3
Personal Statement................................................................................................................... 3
Personal Goal and Objectives........................................................................................................4
Stakeholders ................................................................................................................................ 4
Statement of Problem................................................................................................................... 5
Software Purpose......................................................................................................................... 5
Industrial Project Technologies & Concepts.................................................................................... 7
Company requested technologies & concepts ............................................................................ 7
Supervisors requested technologies & concepts.........................................................................7
Self-imposed technologies & concepts....................................................................................... 7
Keyfeatures of the application......................................................................................................8
Requirements............................................................................................................................... 9
Main challenges ......................................................................................................................... 10
No prior experience with:........................................................................................................ 10
No prior knowledge of: ........................................................................................................... 10
How did I overcome these challenges ...................................................................................... 10
Research & Training:................................................................................................................... 13
Technologies Overview............................................................................................................... 14
Stack: MEAN........................................................................................................................... 14
Node.js................................................................................................................................... 14
Express .js............................................................................................................................... 15
MongoDB............................................................................................................................... 15
Angular.js............................................................................................................................... 16
AWS....................................................................................................................................... 17
Passport................................................................................................................................. 17
Brackets................................................................................................................................. 17
Postman................................................................................................................................. 18
D3.......................................................................................................................................... 18
GitHub................................................................................................................................... 18
Use Case Diagrams ..................................................................................................................... 19
Mongoose Models...................................................................................................................... 22
System Functional Development ................................................................................................. 26
Iteration 1.............................................................................................................................. 26
Iteration 2.............................................................................................................................. 26
Iteration 3.............................................................................................................................. 26
GUI Development....................................................................................................................... 27

2 | P a g e
Low fidelity Design.................................................................................................................. 27
Iteration 1.............................................................................................................................. 29
Iteration 2.............................................................................................................................. 31
Key Functionality & Code Break Down ......................................................................................... 33
Analytical Charts for Customer Orders ..................................................................................... 33
Login System & Security.......................................................................................................... 36
Create Product Document....................................................................................................... 38
Update Customer.................................................................................................................... 41
Delete Customer documents................................................................................................... 43
Application on the cloud............................................................................................................. 46
Testing....................................................................................................................................... 50
Black Box Testing.................................................................................................................... 50
White box testing....................................................................................................................... 62
Future developments.................................................................................................................. 69
Conclusion ................................................................................................................................. 70
Bibliography............................................................................................................................... 71
Appendixes ................................................................................................................................ 72
Requirement document.............................................................................................................. 73
Learning Journal......................................................................................................................... 81
Week1 ................................................................................................................................... 81
Week 2................................................................................................................................... 82
Week 3 what work have you undertaken on your project this week? ......................................... 83
Week 4................................................................................................................................... 83
Week 5................................................................................................................................... 84
Week 6................................................................................................................................... 84
Week 7................................................................................................................................... 85
Week 8................................................................................................................................... 85
Week 9................................................................................................................................... 86
Week 10................................................................................................................................. 86
Week 11................................................................................................................................. 87

3 | P a g e
Introduction
Document Overview
This documents purpose is to outline all the activities, goals, experiences and processes that
were undertaken throughout the 3 months in which it took to complete my industry project.
On completion of this document; the reader should have gained a full understanding of the
journey undertaken by me the developer in regards to the technical skills that I developed
and my overall conceptual understanding in regards to the IT sector over the past 3 months.
The reader should also gain an insight into the inner workings of my web application and
learn about the concepts and technologies used throughout the project. Most importantly
the reader should walk away understanding the overall concept of application and
understand its key functional activities.
Personal Statement
Before undertaking the industry project my prior experience in web technologies was very
limited. I had a good understanding of MySQL and had just done a full semester of Java and
internet programming (HTML & CSS). I had never built any application from start to finish or
had any real programming experience outside of what I had learnt from semester 1. I had
never written a line of code in JavaScript and by the end of the project I had created a fully
functioning web application that not only used JavaScript, D3.js and Angular.js in the front
end; but I also had created a backend that consisted of Node.js, Express.js, Passport.js and
Mongoose.js, all of which are either libraries or frameworks for JavaScript. These personal
developments are also paired with creating a MongoDB database based on NoSQL, which I
had never experienced before. These technologies and languages were all self-taught and
used to create an application that included several instances of RESTFUL CRUD API’s and
hosted on a virtual machine on the AWS cloud. I found this industry project invaluable in
regards my confidence to tackle problems, teaching myself new languages , concepts and
hopefully preparing me for the working world.

4 | P a g e
Personal Goal and Objectives
My personal goal and objects for this project from the outset were:
1. To build a product that achieves and surpasses my functional requirements.
2. To incorporate as many technologies that I will be using during my internship at
AltoCloud.
3. To develop my understanding of design patterns.
4. To become experienced in as many real world third party development software’s.
5. To broaden by general information technology knowledge.
6. To implement testing, as to prepare me for real world development.
Stakeholders
The stakeholders involved in this industry project are as follows:
1. Developer: Eanna Hegerty
2. Supervisor: Enda Barret
3. Industry Partner: AltoCloud
4. Course Administrator: Enda Howley
5. University: NUIG
6. End Users

5 | P a g e
Statement of Problem
In my initial Project Definition Document I defined the below statement of problem:
Create an online application that will allow top level management to view reports generated
through analytics in regards to current stock levels, orders, employee details etc. Different
users should be able to view different reports depending on their administration rights or
personally assigned reports.
At the time of writing this document I have not only solved the above problem but I have
addressed the following issues also.
The application should be fully portable device friendly, incorporate a single page
application design, allow users to edit reports (like Excel) and display analytics in a graphic
form.
Software Purpose
In today’s world, companies and individuals are demanding more from their software. The
general public can now access their personal emails and documents anywhere they have a
browser. Gone are the days of downloading your email to your desktop, or having a vital
piece of software on one computer in one location. Applications must be real time, available
across multiple devices (portal and non-portable). This is no more true, than with top level
management software, which need access to their companies performance data (sales
analytics). Top level management are often on the go and not always at their desk when
they need to know employee performances, best/worst customers, top selling products,
order information or delivery status of important orders.
As it stands, this demand has not been meet by most head office software for the retail
industry. Head office software is often located on a server in an office space. So what does
this outdate practise mean for the clients?
 Buying an expensive server
 Maintaining server upkeep
 Poor physical environment for server
 Clients are tied to accessing Head Office software in one location (intranet).
 No back-up plan in case of server error (hard-drive failure).

6 | P a g e
So how do we address these issue; Hego Analytics is how. Hego Analytics software is hosted
on the cloud with AWS, no need to buy a physical server and place it on site. This also
means users have access to reports anywhere anytime as long as they have a browser and
have internet access. Hego Analytics software is device friendly so users can view reports on
the go from their personal devices. Hego clients have the option of requesting additional
reports via the ticketing service, where they can also view updates to their ticket status.
Hego databases uses MongoDB database which means that reports & analysis are much
quicker than traditional SQL databases. Because of our partnership with AWS your database
and HO application is guaranteed 99.99% uptime. Database mirroring is also an option that
is available to our customers; meaning you do not have to fear losing important information
if the server fails.
Competitors HegoAnalytics
Software availability 1 location Anywhere
ServerPurchase &
maintenance
Yes No
Reports& Analyticsspeed Slow Quick
Backup security USB key Automatic
Online TicketingService No Yes
Visual Analytics No Yes
Guaranteed application
uptime
?? 99.99%

7 | P a g e
Industrial Project Technologies & Concepts
From the outsetof my industryproject,bothmyindustrypartnerandsupervisorhadseveral
technologiesandconceptsthatthe systemmustincorporate duringthe developmentprocess.Iam
gladto say I incorporatedall the technologies&conceptsrequiredof me.Inadditionto these
requirementsIaddedseveral of myownwhichare listedbelow.
Company requested technologies & concepts
Technologies IncorporatedYes/No
AWS (Amazon web Services) Yes
Ubuntu OS Yes
Node.js Yes
RESTful APIs Yes
Virtual Machines Yes
NPM Yes
Supervisors requested technologies & concepts
MongoDB Yes
Express.js Yes
Angular.js Yes
D3.js Yes
Self-imposed technologies & concepts
GitHub Yes
Putty Yes
WinSCP Yes
Postman Yes
Bootstrap Yes
VMC (viewmodel controller) Yes
Single page application Yes

8 | P a g e
Key features of the application
1. Single a page application.
2. Several Create, Read, Update, and Delete API’s included.
3. Several analytical API created and results displayed in chart form.
4. Secure login system.
5. Application is built in MVC design pattern.
6. Hosted on virtual machine on the cloud.
7. Full MEAN stack implementation.
8. Personal profile screen.
9. Different layer of access right for users (API’s & pages).
10. Fully mobile and desktop friendly.

9 | P a g e
Requirements
Primary RequirementsAchieved Achieved
Yes/No
Create a web application that can be accessed from distributed devices. Yes
Create a web application is both desktop and mobile friendly. Yes
Create API’s that Created, Read, Update and Delete from a database Yes
Host the Web Application with AWS on an Ubuntu instance Yes
Construct the application with the MEAN stack Yes
Secondary RequirementsAchieved
The application must be a single page application Yes
The application must be built using source code management tools that a hear
to dev-ops best standards
Yes
The application must be built using the MVC design pattern Yes

10 | P a g e
Main challenges
The main challengesImetduringmyprojectwasthe lack of familiaritywithmostof the technologies
usedinmy web-application.Ihave listedbelow all the applicationusedthatIhad eithernoprior
experience withorevenknowledge of before undertakingthisproject.
No prior experience with:
 JavaScript
 Angular
 PairKeyAuthentication
 MongoDB
 Virtual Machine
 Angular
No prior knowledge of:
 Node.js
 Express.js
 AWS
 MVC
How did I overcome these challenges
To overcome mylack of experience andknowledgewiththe above conceptsandtechnologiesIused
several strategies.
 Online courses
 Group discussions(classmate brainstorming)
 Self-discovery(experimenting&testing)
 Course material
 Online forums

11 | P a g e
Development challenges
The sectionof the reportdiscussessome of the issuesthatwere inparticularlytroublesome.Fora
full breakdownof weeklyissuespleasesee appendices.
Challenge: Concept’s & Technologies
Duringweek1, I reachedone of the largeststumblingblocksof thisproject.Ifoundteachingmyself
newthe conceptsand technologiesthatwere involvedwithinthe projectverydifficult.Thisincluded
Node.js,Express.js,API’setc.
Solution
I workedoutthe above issue bywritingdefinitionsof the conceptandtechnologiesasIresearched
them.I alsoreadextensivelyintomycourse material comparingjavaconceptsthatIwas familiar
withand conceptswithinmyproject.Mostimportantly,IundertookonlinecoursesinJavaScriptand
Node whichclearedupa lotof mymisunderstanding.
Challenge: DisplayingAPIresults visually.
On week5 I hadmy secondmajorissue of my industryproject.Atthisstage Ihad developedseveral
APIswiththe helpof myUdemy course.The issue now wastryingto displaythe JSON datainview
form.I spenta longtime tryingto figure differentmethodsandwithoutanonline course toguide
me I was lost.
Solution
ThankfullyIhada weeklymeetingwithmysupervisorwhoshowedme anapplicationinwhichhe
builtthatdisplayedJSON dataretrievedfromanAPIina table.Thisexample guidedme inthe right
directionandI wassoonreadingup onAngularon W3Schoolsand enrolledtoanUdemy course
whichI foundhugelyhelpful.
Challenge: Graphingdata
Up until thispointI hadonlybeenworkingwithtablesthatshowedmyAPIresult.Andthe majority
of JavaScriptIwas writing waswithinAngularandExpressFrameworks.Butnow Ihad to create D3
charts that consistedof JavaScriptwithinthe views.All the tutorialsIfoundonline expectedthe
studenttohave a previousunderstandingof the D3,SVG whichI had not.For 2 daysI triedto follow
stepby stepbuildingguidestochartswithnosuccess.
Solution
I stoppedlookingatonline example andD3tutorials,Ithenread upon SVG’splayedaroundwith
differentimagesandfeedingthemfake datatochange the image shape.Once I hada good

12 | P a g e
understandingof these fundamentalsIwasable to follow tutorialsand notbe lostabout whatwas
occurring.Withinnotime I had builtmyself chartsthatwaspopulatedwithJSON datafrommyAPIs

13 | P a g e
Research& Training:
I undertook extensive training prior and during development of this industry project. Before
I started coding my project I started getting familiar with AWS (Amazon Web Service), as it
was one of the requirements of my project that my application would be hosted on this
cloud hosting vender. I spent the best part of 2 weeks with this application and the
surrounding concept and supporting applications. Some of these research activities include
setting up an AWS account, getting familiar with its GUI. Also learning concepts and
technology such as virtual machines, images, PuTTY, WinSCP, instances, public and private
key authentication. All of the above I used prior to coding and hosting my project which
allowed me to easily carry out hosting my application 3 months later after it was developed.
Prior to development I also under took training from several online services such as the New
Boston website (Node.js & MongoDB), Udemy (Angular, Node.js,MongoDB,Expressjs and
JavaScript). Along with this training I also took part in serval YouTube courses in order to
further my knowledge. In particular the most beneficial resources I found was the Udemy
courses which in total took 20 hours of training material and easily another 30 hours of
implementing, exploring and understanding the material. I also attended a meetup
organised by Docker and participated in training of the Docker product but because of my
previous experience and configuration with AWS I did not use Docker in my project.

14 | P a g e
Technologies Overview
In thissectionIwill walkthroughthe maintechnologiesIusedthroughoutmyproject.Iwill give a
brief explanation of the technologiesthemselvesandtheirrole withinmyapplication.
Stack: MEAN
The MEAN stack is a collectionof technologiesthatwhenusedtogethermake upthe components
required fora web-application.The MEAN stackis comprisedof 4 components:
 Mongo (Database)
 Express.js(JavaScriptframeworkforserverside)
 Angular(JavaScriptframeworkforclientside)
 Node (runtime environment)
Node.js
“Node.js® isaJavaScriptruntime builtonChrome'sV8JavaScriptengine.Node.jsusesanevent-
driven,non-blockingI/Omodel thatmakesitlightweightandefficient.Node.js'package ecosystem,
NPM, isthe largestecosystemof opensource librariesinthe world”(“Node.js”,2016).Above isan
explanationof node.jsfromthe nodejs.orgwebsite.Myunderstandingof node isthatitis a runtime
environmentthatallowsJavaScripttobe readon the serverandnot juston clientbrowsers which
JavaScriptwastraditionallyonlycapableof.Thiswasmade possible because node.jsconsistsof
Chrome'sV8 JavaScriptengine readsJavaScript;whichalsolocated inChrome browserstorender
JavaScript.
Benefitsof node.js
 Node.jsis considered tobe a cross platformapplication,meaningthatitcan be usedon
multiple differentOSsystem,includingthe big 3, IOS,Linux andWindows.
 Node.jshasvastlibraryof JavaScriptmodules,makingiteasytodevelopwebapplication
quickly.Node.jslibraryhascome aboutviaitsopensource nature,leadingtomany
contributorsandinturn its growthinpopularitysince itslaunchin2009.
 Node.jsis AsynchronousandEventDriven,whichmeansforapplicationsbuiltonnode.js
they do notwaitfor a response fromAPI request(querying adatabase) andblockingthe
entire applicationfromcarryingoutrequests.Butinsteadnode handlesthe next API request
and movesontothe next eventthatneedshandling.Node.js usesaneventloopthatlistens
for requestsand responseshandlingthemwhenrequired.

15 | P a g e
 Because of itsNon-blockingnature node.jsonlyuses1threadand can handle a large
numberof requestscompare totraditional servertechnologieslike Apacheserver. (“Node.js
– Introduction”,2016)
The role in whichNode.jsplayedinmyprojectissimple;itallowedme tocreate the serverside part
of my applicationusingonlyJavaScript,JavaScript basedtechnologies.Node.jsalsomade iteasyfor
me to buildmysingle page applicationeasilyandelegantlybecauseof the speed atwhichitworks.
Because of itsplatformportabilityitmeantthatmovingmyapplicationfromawindow environment
to an Ubuntu instance inthe cloudwasmuch easierthanfirstexpected.The mostimportantrole
Node.jsplayed inmy applicationwasthatitallowed be touse express.jsframeworkinwhichIbuilt
my server.
Express .js
“Expressisa minimal andflexibleNode.jswebapplicationframeworkthatprovidesarobustsetof
featuresforwebandmobile applications.”("Writingmiddleware foruse inExpressapps,"2015).
Above we see the explanationexpressjs.comof express.js. Express.jsisthe standardJavaScript
frameworkforbuildingthe backendof webapplicationsinthe node.jsruntime environment.
Express.js isusedtobuildthe serveraspectof anapplication,quicklyandeasily.Itcanrecieve http
requestformclientsandsendbackappropriate response.Express.jsisalsousedtocreate API’sfor
webapplicationsusingmiddleware thatthe developercantailorfromexpress.jsbasicstructure.
”Middleware functionscanperformthe followingtasks:
 Execute anycode.
 Make changesto the requestandthe response objects.
 End the request-response cycle.
 Call the nextmiddleware inthe stack.”
 ("Writingmiddleware foruse inExpressapps,"2015).
In myapplicationExpresswasusedtobuildmyAPI’sthatqueriedthe database andsent back
responsestothe clientdependentonthe resultof the query.Iwill gointofuture detailsonhow I
usedexpress.jsinthe code walkthroughsection.
MongoDB
MongoDB isa NoSQLdatabase,whichmeansthatisdoesnot follow the traditionalSQLrelational
database model.Asit NoSQLsuggestsitdoes notcontainany SQL or maintain anyrelationships
betweentablesorevenhave table. MongoDBismade of collections(comparedtotables),

16 | P a g e
documents(rows) andfields(columns). MongoDBstoresitsdata inBSON whichare JSON like
documents;thissimilaritymakes MongoDBvery compatiblewith applicationsthatuse JSON data.
MongoDB like Node.jsisopensource andcrossplatformapplicationcausingitpopularityinrecent
yearsgrow rAPIdly.Because itdoesnotadhere tostrictrelationdatabase rules MongoDBis
consideredveryflexible,documentsstoredwithinthe same collectioncanhave differentfields
because theyare independentof eachother.Withregardsto my application MongoDBwasusedto
store my data. The documentsstructure within MongoDBwere then mappedtoamongoose (a
package usedto query MongoDB fromthe application).
(“Laintimes”,2016)
Angular.js
The final part of the Mean stackis Angular,whichwasusedonthe clientside.Angular.jsisa
JavaScriptframeworkcommonlyusedonsinglepage application.Itisusedtomanipulate the views
(GUI) byusingMVC designpatternonthe frontend.Angulartreatsthe GUI as the view,the model
as it’s$scope variable andthe controllerwhichmanipulateitsassignedview.Iused Angularto
create a controllerforeachof my webapplicationsviews.The controllerswere incharge of
swappinginandout viewswithinthe profilepage usingthe ng-view directive.The Angular
controllerswere alsousedtomake anyhttprequestsmade bythe usersand manipulate the results
returnedtopresentthe requireddatatothe user. Angularng-show directivewasused todisplay
differentsectionswithinviewsthatwere hiddenfromthe usersuntil aparticularactionwastaken,
such as showa formto be filledwhenauserclickedona button.Particularaspectsof viewswere
alsoshowndependentonthe resultreturnbythe API request(useraddedmessage).

17 | P a g e
AWS
AmazonWebServicescommonlyreferredto AWSisa cloudplatformofferedbyAmazon.com. AWS
offersitscustomersquick accesstothe cloudinregardsto hosting, developingorstorage.Itmost
popularpackage isits EC2 (AmazonElasticCompute Cloud) package whichwe will be referringtoo
today. The EC2 service allowsuserstocreate virtual machinesfromimages,whichare snapshotsof
virtual machinesalongwithall theirsoftwareconfigurationsanddatastored.ES2 allows itusersto
scale up or downthe amountstorage or instance runningveryquickly;andinturnchange the
amountcharge by AWS.
I usedAWS’sEC2 to create a VMof an Ubuntu instance;fromthisinstance Iwas able to define the
ports inwhichI neededaccessto (port80 http,port 22 for ssh (secure shell)).Alongwiththis
functionalityIsetupthe pairkeyauthenticationwhichwasneededtocommunicate withmyVMvia
PuTTY & WinSCP.The lack of an interface for my MV meantthatI neededtolearnbashcommands
to install the requiredsoftware torunmyapplication.UsingPuTTyIinstalledNode.jsand MongoDB,
followingthisIusedNPMto installedthe packages requiredto runmyapplication.IusedWinSCPto
transfermyapplicationfilesandmydatabase whichwasstoredin .csv files.Finallywhenall
configurations wassetupIstoredmyUbuntuinstance as an image andcarriedon developmentof
my applicationlocally,transferringeachnew iterationtothe cloudtocarry out testing.
Passport
“Passportisauthenticationmiddleware forNode.js.Extremelyflexibleandmodular,Passportcanbe
unobtrusivelydroppedintoanyExpress-basedwebapplication.”(“Passport”,2016)
Passportisa JavaScriptpackage thatcan be usedto authenticate usersinmanydifferentforms.It
allowsuserstologin throughtheirpersonal social mediaaccountor throughtheirpersonallyweb
applicationaccount.ForthisprojectI useda Scotch tutorial towalkme through implementingmy
passportstrategies.Passporthasover300 strategiesthatcan be usedforauthentication,Iusedthe
local strategyfor myapplication.
https://scotch.io/tutorials/easy-node-authentication-setup-and-local
Brackets
Bracketswas usedto developmyapplicationlocally.IoriginallyusedJetBrainsWebstormbutfound
the configuration’sprocessestroublesome andthe amountof boilercode createdcrippledto my
understandingof Node.js,Express.jsandMVC core concepts.At thispointI move overtousing
Bracketsas it a verysimple touse texteditorandforcedme to learnand understandthe code that
Webstormhadcreatedfor me.

18 | P a g e
Postman
Postmanwasan integral partto the constructionof my application;itallowedme totestmy
applicationthroughoutthe developmentlife cycle.Postmancanbe usedto sendhttprequestto
endpointswithadatacapturedin it’s the bodyand header.Thisaspectof Postmanalone helpedme
greatly;as itallowed me todevelopAPI’sandtestindependently of the clientaspectsof my
application suchasmy angularcontrollersanditsviews.Postmanalsoallowedme tocreate unit
testsfor API’sthatassertif testeitherfailedorpass.Ifoundthistool unparalleled whencarrying
white box testingof software.
D3
D3js is a JavaScript library for creating visual images within a web page. It is often used to
represent data as images which transfers well when creating chart representations of
analytical data. D3 uses SVG (Scalable Vector Graphics) to represent the data in image form.
The SVG x and y axes are often populated with data, which in turn when used for charting
gives you different images sizes for different values. For my application I used D3js to
represent JSON data which was generated through analytics carried out on documents
stored in the database. I followed bl.ock.org tutorial to help create the visual look of my
charts. (“Usingd3”,2016)
GitHub
GitHubis a versioncontrol systemthatallowsthe developertostore versionof software locally
(desktop) orontheirpersonal GitHubrepository. GitHubtrackschangesmade to documentsand
allowsusers toaccesspreviousversiononcommand. GitHubisbasedonGit whichisa command
line tool forversioncontrol.GitHubwasusedinthisprojectto store andtrack differentversionsof
my software androll backchangesas needed.Itsonline repositorywasalsousedas it issafeguarded
againsthard drive failure.

19 | P a g e
Use Case Diagrams
Report and chartinteractions
Users,both adminandmanagers,will be able toview reportsandcharts,theyare alsoable to delete
and update documentsthatare displayed intable form.The usersare alsoable toadd new
documentstothe givencollections.

20 | P a g e
Ticket handling
Managers will be able tocreate ticketsaddingthe detailsinwhichtheywishtoreport,suchasnew
reportsor bugs.The adminuserwill be able tosee ticketsandupdate themwithnew statusand
comments.

21 | P a g e
Personaltickets
The adminuser will be able toassignnew reportstomanagerspersonal profilepage,which
managerswill be able toviewata laterdate.

22 | P a g e
Mongoose Models
Below isthe schema’screatedusingMongoose tomirrorthe collectionlocatedinthe MongoDB
Mongoose Models.
Employees
Users

24 | P a g e
Orders
OrderDetails

26 | P a g e
System Functional Development
The webapplicationhasbeenthrough several differentfunctional iterationsthatare described
below.
Iteration 1
The application’sfirstiterationwasfocusedon:
 Creatingthe Mongo database
 CreatingbasicCRUD API’susingExpress
 Creatinga loginsystem
 Creatingbasic.ejsfile toenhance API functionality
Iteration 2
The application’sseconditerationwasfocusedon
 Creatingmore CRUD APIs.
 Improvingthe userinterface.
 Creatingthe Analytics API andchartingthe information.
 Creatingthe administrationviewstodisplaythe forAPI’sresponse.
 Changingthe loginfunctionalitytoadhere todifferentlevels of administrationrights.
 Single page application&large amountof Angularfunctionality.
Iteration 3
The applicationsthirditerationwasfocusedon
 Personal profileaccessfunctionality
 Addingpersonal reportsfunctionality
 Refactoringandenhancing APIs
 Refactoringandenhancingangular
 Allowingintable editingof reports
Changingthe reporttablessothat theywere editable tookalotof workand meantmy entire
applicationneededtobe overhauled.Ihadthe applicationsplitsothatmanagerusersonlyhadread
and update accessto mostreports.If the manageruserwantedto update customer’sinformation
theywouldhave tofill outa formwiththe customer’sID andenterthe detailstheywishedto
change.All the delete rightswerewiththe administratorusersatthispoint.Butonce the
functionalityof editable tableswas giventobothlevel of users, itmeantthata large chunk of
functionalityonboththe managerand administratoruserwasobsolete.Several views &controllers
had to be pulledfrombothsectionsof the website.

27 | P a g e
GUI Development
The GUI designwasa constantdevelopment throughoutproject.Ibelievethere have been2major
GUI iterationsthathave resultedinthe finalproduct, since the creationof myoriginal prototype.
1. The firstiterationcame aboutthroughdevelopingthe applicationfromdaytoday activities
2. The second iterationcame aboutviausabilitytestingthatI hadcarriedout by Caroline
Whyte (HR managerinJury’s) & ConorKillilea(ex-banker).Bothof whichhadextensive
experience withweb-applicationforindustryusage.I tooknotesandaskedquestions;while
the two participantsusedthe systemandgave feedbackonhow itcouldbe improved. The
feedbackalsopushedme tomake the applicationafullysingle page application.
Low fidelity Design

29 | P a g e
Iteration 1
As we can see belowthe firstGUI iteration hasa verydifferentdesigntothe original prototype
design.
Black and whitecolourscheme
Menu bar runs across thetop of the screen
Forms and reports aredisplayed ina panelwith tabs displayingreports options
Button colour is blueinstead ofgrey

30 | P a g e
Tables has nocolumnborders
The profilescreen shows justthe users emailand a linkto the reports screen

31 | P a g e
Iteration 2
Withiteration 2 the GUI had several visual changesbutalsoimpactedthe APIswithsuggestionsthat
the table rowsbe searchable andeditable.
The colourschemehas changeto blue, whiteand lightershadeof blue.
The table headers havebeenfitted with orderby columns and the fields arenow editable.

32 | P a g e
Glyph icons havebeenadded toall the buttons of the systemhelpingusers to navigateand
use the application.
The Menu barhas becomemoreadvanced;theapplication sections havebeengrouped and
drop-downmenustoaccess the various subsections.
Systemno longer splitinprofileand reports page all userreports are availableintheir
profilepage

33 | P a g e
Key Functionality & Code Break Down
The followingsectionwill walkthroughthe differentaspectsof functionalityof the systemand
discussthe code usedto create thisfunctionality.
Analytical Charts for Customer Orders
Definition
Analytical Charts application’sfunctionality createsavisual representationof
data storedinthe MongoDB after ithad beenpassedthroughananalytical
API.
Technologies
used
MongoDB, D3js Express.js,Bootstrap
The usersare showna form thattheymust entervalues into.The userentersindate values, the
numberof resultstobe returnedandwhethertheywouldlike toview the customerswiththe
maximumorminimumnumberof ordersplaced.The userthenhitssubmitandtheyare showna
chart showingthe resultsof theirinput.

34 | P a g e
JavaScriptcode
If we lookat the above code we can see the JavaScriptfunctionthatisinvokedwhenthe userclicks
submit.3 variables are created,2 of whichare initializedwith the valuesenteredbythe user.The if
statementinitializesthe sortvariable dependingonthe stringvalue enteredbythe usereither -1or
1 dependingif resultswill be showingcustomermaximumorminimumcustomerorders.
JavaScriptcode
Followingthis,the variablesare sentinthe url get httprequesttoan API listener.

35 | P a g e
Once the JSON documentsare returned fromthe http request,aforeachloopassignsthe 2 fieldsof
each documentreturned (_idandOrders) tothe y andx axesof SVG bars. Thisfunctionalitywill give
each allowfordifferentbarlengthfordifferent documents.
Express code
The above code is the API listeneronthe server;ittakesinthe valuessentbythe client.The
parametervariablesvaluesare thencomparedusing if statementswhich dependingonthe result of
the statement,assignsthe variablewithadifferentvalue.Forexample,the variable thatisusedto
searchfor matchingdocuments tothe usersinput,mustfirstcheckif the userissearchingbya full
yearor bya monthwith ina year.
Once the variable valuesare assignedtheyare usedwithin anaggregate functionusedbyMongoose
to searchthe database.The $match variable is initializedwith documentsthatare returnedwitha
matchingorderdate.Thisgroup of documents thenare passed and grouped ($Group) by unique
CustomerIDand a count ismade of the timeseachID occurs. Thislistof documentsnow has2
columns,_id(CustomerID) andOrders(numberof ordereachcustomerhas forthe givendate). The

36 | P a g e
nextline of code sortsthe documentsbydescendingorascendingorderdependingonuserinput
and limitsthe numberof documentsreturnedagainbyuserinput.These documentsare then
returnedandas previouslyexplained,are usedtomapthe chart bars.
Login System & Security
Definition
Thisapplication functionality wasusedtostopaccessto the webapplication if
a user wasnot loggedin.Italsoprovidedthe ability foruserstologin withthe
correct details
Technologies
used
MongoDB, Passportjs,Express.js,Bootstrap
Express code
The above code is a middleware functionbuiltinexpress.js,thisfunctioncheckstosee is there a
sessionvariable foraclientattemptingtoaccessa webpage page or an API.If present,the function
allowsuserstoaccessthe requested url orelse the useris redirectedtothe index page.This
middlewarefunctioncan be seenpassed intoanExpresslistenerasan objectfunctionasa
parameterandis invokedwhenaneventoccurs.Forexample,the below code showsaget request
that ispickedupby an expresslistener, the isLoggedInfunctionis theninvoked.If successful,the
functionwill enterintothe waitingcall backfunction.
The secondpiece of functionalitythat isassociated withthe login andsecuritysystem isthe actual
logginginof a user.

37 | P a g e
The above logindesignwasdone with Bootstrap.
Angularcode
Once the user enterstheirdetailsanhttppost requestismade whichispickedupbyExpreses
middlewarelistenerfor/loginurl request.Atthispointpassport.authenticate strategyisinvoked
whichisa requiredmodule.
Express code

38 | P a g e
Once the passport.authenticatestrategyis invokedthe emailandpasswordfromthe loginattempt
are assignedtovariableswithinanewlocal strategyobject. Followingthis, the user’scollection
withinMongoDBissearchedfora matchingemail;thisfunctionalityisprovided usingthe Mongoose
scheme definedbelow.If the resultisanerror or no documentisfoundwithmatchingemail,the
functionsendsbackthe appropriate response (errornot foundmessage) before endingthe
function.
If the email addressisfoundthe function now checkstosee if the passwordmatches.If the
passworddoesnot match, the function endsafterinformingthe userthe passwordisincorrect.If
successful itreturnsthe usersessionvariable.Atthispointthe useris loggedinandbroughtto their
profile screen.
Create Product Document
Definition Create productdocumentsfunctionalityisusedtoaddproductsto the
MongoDB througha create API.The userentersproductinformationviaa
formthat then triggersan Angularfunctionthat makesa httppost request
whichispickedupby an Expressmiddleware listener,whichcreatesanew
productin the database and theninformsthe userif the productwas created
or not.
Technologiesused MongoDB, Express.js ,Bootstrap,Angularjs

39 | P a g e
The above form takesinputfrom the user,unlessthe userentersdata inall the fieldsthe save
buttonisdisabledusingthe Angulardirective ng-disable.
User inputisstoredto an Angularvariable usingthe ng-model directory.
Angularcode
Angularng-clickinvokesthe addProduct() functioninthe viewscontroller.
The addProduct() functionassignsthe valuesenteredbythe usertoa JSON object.

40 | P a g e
Thisobjectisthensentin a posthttp withotherheaderinformation.
The functionthenwaitsfora response whichwill be eithersuccessful andleadtothe userinput
beingcleared andProductAddedFunctionbeinginvoked(Displaysamessage touserinformingthem
producthas beenadded);orerror chainfunctioniscalledwhichkicksoff NotAddedFunctionbeing
invokedandusershownamessage informingthem the productwasnotadded.
Nowwe can followthe httprequesttoan express.jslistener.We cansee inthe below screenshot
that the listenerfirstcheckstosee the userloggedinasexplainedinloginsection.
Express code
The listenerfunction theninvokes middleware functionthatassigns the requestbodyvalues toa
newproductobject;the schemaof whichcan be seenbelow (createdusingmongoose).Using

41 | P a g e
Mongoose the product will be savedtothe MongoDB database.If there isan error, status500 is
sentback or else astatus 200 is sentas the response tothe Angularfunction.
Update Customer
Definition The Customerupdate functionality isusedtoupdate the MongoDBthroughan put
API.The userfirstclickson the fieldtheywishtoedit.Once the userhaseditedthe
requiredinformationandhit ‘saved’, anAngularfunctionthat invokes aputhttp
request,whichispickedupbyan expresslistener,whichupdates customer’s details
inthe database.
Technologiesused MongoDB, Express.js,Bootstrap Angularjs
The user picksa fieldwhichtheywanttoedit,the fieldthenbecomesaforminwhichtheycan
change the current value,the userthenclick ‘Save Edits’buttoncontaininganAngularng-clicks
directive,thatinvokesthe AngularfunctionUpdateCustomers,whichtakesinthe valuesof the table
row inwhichitis located as itparameters.

42 | P a g e
Angularcode
We can see above the table contentsbeingtakeninandassignedtoaJSON object. Followingthisa
put httprequestissent withthe update array beingsentinthe body of the request.
Chainingisthencarriedoutand if the http response returns successful anng-show functionis
invokedthatinformsthe userthatthe customer collectionhasbeenupdated.Orelse anerror
message isshownusingan ng-show function.
Express Code
If we followthe request tothe update customers API.,we cansee thatthe database is searchedby
the ID providedinthe bodyof the requestusing the Mongoose objectcustomers.If there isanerror
while searchingthe database, astatus500 issentback and the functionends.
If no documentisfound, status403 is sentback and the functionends..

43 | P a g e
If the documentisfound;checksare carriedout to see what a fieldhave beenupdatedbythe user
and assigns these newvaluestothe document.The objectisthensavedandstatus200 issentback
as the response orif an error occurs while saving the documentan errorstatus500 issent.
Delete Customer documents
Definition The delete customer’s functionalityis usedtodelete documents inMongoDB
customer’scollection throughadelete API.The userfirstclicksdelete onthe
delete buttonof the row of whichtheywishtodelete.AnAngularfunction
thenkicksoff a delete httprequestwhichispickedupbyanExpresslistener.
Technologiesused MongoDB, Express.js,Bootstrap,Angularjs

44 | P a g e
Once the user clicksonthe delete buttonof arow theywishto delete,amodal appearsthatasksthe
userare theysure theywishtodelete the customer.
If theychoose todelete an ng-clickdirectiveinvokesthe AngularfunctionDeleteCustomer() that
takesinthe ID of the documentto be deleted.A secondfunctionisalsoinvokedtoremove the row
fromthe viewremoveUser().
Angularcode
Above isthe code belongingto the DeleteCustomer() function,whichtakesinthe documentIDand
makesa http delete requestsendingthe iIDthroughthe url. Followingthisrequest there are 2
chainedfunctionsforbothsuccessanderror responses.If the API responsereturnssuccessful the
ng-showdirectiveforcustomerDeleteFun() istriggeredandthe userisinformedthata customerhas
beendeleted. If the response sends backanerror, the userisinformedthatthe customerwasnot
deletedvianotDeleteFunc().

45 | P a g e
Express code
In the above code snippet we cansee the ID sentduringthe url requestis assignedtoa variable
whichisusedto searchthe MongoDB database fora documentwiththe same ID. If an error occurs a
statusof 500 isreturnedandif the documentisnot found,astatus of 404 isreturned. If the search
returnsa documentthenthe database isqueriedagainandremoves the document.A successful
removal leadstostatus200 beingreturned.

46 | P a g e
Application on the cloud
Aftercreatingan accountwith AWS back inJanuaryof thissemester,Ispentseveral weekslearning
howthe cloud service workswhileatthe same time Idefinedthe specsof myapplication.Iused
AWS’smostcommon service EC2to create an instance of a virtual machine asmyindustrypartner
had informedme Iwouldbe usingitduringmyinternship.
My firststepwasto learnthe terminologyrequiredtonavigate throughthe application.Once this
was done, Iwentaboutcreatingmy firstinstance (virtual machine).Ihad chosen to create my VM
froma predefinedUbuntuAMI(AmazonMachine Image).
FollowingthisIhadto choose the instancesconfigurationsetting,suchasstorage capacity.Thisalso
includedsettingupa securitygroupwhichdefinedthe portsthatwere available forcommunication
and the type of communicationallowed.
As youcan see above Iopened2ports 22 and 80 for SHH and HTTP respectively.

47 | P a g e
The nextmajor phase before launchinganinstance wascreating apair keythat wouldbe usedfor
authenticationwhenclientstriedtocommunicate withthe instancethrough SSH.
At thispointI downloadedakeyandusedPuTTy generatortocreate a private keywhichwasthen
usedforauthenticationwhenItriedtoconnectwithPuTTY or WinSCP.

48 | P a g e
WinSCP allowedme totransferfilesontomyinstance frommydesktop.
PuTTY allowedme usingsshtogainaccess to myinstancescommandline.
Afterbecomingfamiliarwiththe differentapplicationsIwentaboutcreatingseveral instances
downloadingsoftware ontothe instancesusingPuTTY.EventuallyIcreatedanUbuntu instance that
had Node.jsand MongoDBinstalled.Isavedthisinstance asan image.

49 | P a g e
Thisimage was thenusedata laterdate to host mywebapplication;Itransferredthe application
filesand.csvversionsof mydatabase.IusedPuttyto NPMthe dependenciesof myapplicationand
importedthe csvfilesintomy MongoDB.Thisprocesswas made mucheasierbecause Ihad gaineda
full understandingof AWSandpreparedthe AMI requiredmonthsin advance of launchingthe
application.

50 | P a g e
Testing
In the followingportionof the reportIhave outlinedsome of the testingthathave some of the
differenttestingthatwascarriedoutthroughoutthe developmentof myapplication.
Black Box Testing
Test Title: TestAPI security
Test Description
The followingtestwasdesignedtotestthe securityof end points(API’s).Usersmustbe loggedin to
the systemto gainaccess to the systemAPI’sdata.Totest thisprocessI usedPostmantohitURLs
withappropriate datawhile nouserwas loggedin.
Expected result
 No API data shouldbe sentbackand the usershouldbe redirectedtologinpage.
Result Test
As we can see inthe belowimage no JSON datawas return,justthe html of the loginscreen
 TestPassed
Test Title: Testpage security

51 | P a g e
Test Description
The followingtestwasdesignedtotestthe securityof page access.Usersmust be loggedinto gain
access to anywebpages.TotestthisprocessI used Chrome,Safari andExplore webbrowsers totry
and gainaccess to givenwebpageswhile the nouserwas loggedin.
Expected result
 Users shouldbe redirectedtoindexpage where theyhave the optiontolog in.
Test Action
 No userwasloggedin whenthe followingurl washit
Result Test
The user didnotgain accessto theirprofile page andbroughtto the index page.
 TestPassed

52 | P a g e
Test Title: Testuseraccess rights
Test Description
The followingtestwasdesignedtotestthe administrationrightsof agivenuser.A userwith
managersecurityrightsdoesnothave access toadministrationpages.The testtriestogetaccessto
a page the userdoesnot have rightsto access.To testthisprocessI usedChrome,Safari andExplore
webbrowserstotry.
Expected result
 User shouldbe redirected tonoaccesspage.
Test Action
 User triedto hit/adminroute
Test Result:
The user didnotgain accessto the administrationpage andwere broughttono accesspage.
 TestPassed
Test Title: TestAPIsadminrights
Test Description
The followingtestwasdesignedtotestthe administrationrightsof usersinregardsto API access.A
userwithmanagersecurityrightsdoesnothave access toadministration API’s. TotestthisprocessI
usedchrome, safari andexplore webbrowsers.

53 | P a g e
Expected result
 User shouldbe shownthe noaccess page.
Test Action
 User entersAPI thattheydidnot have accesstoo.
Test Result
The user didnotgain accessto the GetAllOpenTickets APIsandwere kickedbacktonoaccess page.
 TestPassed
Test Title: Testloginfunctionality
Test Description
The followingtestwasdesignedtotestthe log infunctionalityof this application.
The firstpart of thistest is to assure that a userdoesnot gainaccessto the webapplicationwhen
theyenterthe incorrectlogindetailsfortheiraccount (email orpassword).The secondpartof the
testis to assure thatthe usergetsredirectedtotheirpersonal profile screen,withtheirpersonal
reportssetting. TotestthisprocessI usedChrome,Safari andExplore webbrowserstoensure that
the testworkedon several browsers.

54 | P a g e
Expected results
 Test1: The usershouldbe shownmessagesinformingthemtheyenteredthe wrongemail.
 Test2: User shouldbe shownmessagesinformingthemtheyenteredthe wrongpassword.
 Test3: The usershould be broughttotheirprofile screendisplayingtheiremail addressand
theirpersonal reports.
Test1 action:User enterwrongemail address
Test 1 Result:
Test 1: Passed
Test 2 action:Userenterwrongpassword

55 | P a g e
Test 2: Result
Test 2: passed
Test 3: action:Userenters correct details
Test 2: Result
Test 2: passed

56 | P a g e
Test Description
The followingtestwasdesignedtotestthe registration functionalityof the system. The firstpartof
thistestis to try and registera newuserwithan email andpassword. The secondpartof the testis
to assure that the usercan log in. To testthisprocessI usedChrome, Safari andExplore web
browserstotry and assureditworkedonseveral browsers.
Expected results
 Test 1: Message showinguserhasbeenregisteredshould appearandthe database should
include new users.
 Test 2: The user shouldbe able tologin withtheirdetailsandgetbroughttotheirprofile
page displayingtheirdetails.
Test 1 Action: Registernew userdetails
Test 1 Results:

57 | P a g e
Test 1: passed
Test2 Action:Loginas withuserdetails
Test Result: Sarah@live.ie displayedonprofile screen,userloggedintonewlycreatedaccount.
Test 2: Passed
Test Title: TestUser profile reportsgenerator
Test Description
The followingtestwasdesignedtotestthe assignmentof personal reportstousers(eachuserhas
personalizedreportsontheirprofile screen).The personalreportsare registeredtoa userviatheir
email address throughan adminprofile.Once the reportshave been registered,usershouldbe able
to access these reportsontheirprofile page. TotestthisprocessIusedChrome,Safari andExplore
webbrowserstoensure thatthe test workedonseveral browsers.
Expected results
 Test 1: The user shouldbe shownmessagesinformingthemthey registered reports&an
entryinthe database shouldshow the reportsassignedto the usersemail.
 Test 2: The user shouldbe able toaccessreportsfrom side menuontheirprofile page.

58 | P a g e
Test 1 action:registerreportstousersemail address
Test 1 results:Message has beenshown
Test 1: Passed
Test 2 action:Loginto profile screen
Test 2: result:Userhas nowaccess to personal reports
Test 2: Passed

59 | P a g e
Test Title: Testthe applicationdevice independence
Test Description
The followingtestwasdesignedto assure thatthe applicationcouldbe usedona wide range of
devices,fromdesktop,tabletsandmobile. TotestthisprocessIusedChrome,Safari and Explore
webbrowserstoensure thatthe test workedonseveral browsers. The testwasdone usingseveral
mobile devices alongwiththe differentdevice viewsofferedbyChrome inspecttool.
Expected results
 Test 1: The application’snavigationbarshouldresizeonsmallerscreen760;
 Test 2: Reportstable shouldbecome scrollableonscreensmallerthat760;
 Test 3: The users shouldbe able chart analyticsonany screensize.
Test 1, 2 & 3 action:Resizedthe browserwindow past760 in width.
Test 1 result: Navigationbarresize asexpected
Test 1: passed

60 | P a g e
Test 2 results:Table resize asexpected withscroll bar
Test 2: passed
Test 3 results:Table resize asexpected withscroll bar
Test 3: passed

61 | P a g e
Test Title: Table searching
Test Description
The followingtestwasdesignedto ensure thatthe applicationcouldsearchtable resultsreturned
froman API requestandonlyshowmatchingrows.Totest thisprocessIusedChrome,Safari and
Explore webbrowserstoensure thatthe testworkedonseveral browsers.
Expected results
Test 1: The rows displayedonlyshow rowswithstringthatmatchesuserentry.
Test 1 action:Enteredinstring‘Nancy’intosearchbar
Test 1 results:Table returnonlyrows withstring‘Nancy’
Test 1: passed

62 | P a g e
White box testing
Test Title: Testto get httprequeston API
Test Description
Thistestwas createdto assure that the correct JSON data are returnedfromthe API.Usersare able
to searchfor employeesby firstname,lastname orcity. As we can see below inPostman,fourtests
are created:
Test 1: Was to ensure thatwhenthe API was sentfirstname as the query fieldandcorrectdata that
it passedthe belowtests.Testif correctstatus,documentdata (first& lastname) andthe correct
objectreturned(_id).
Test 2: Was to ensure thatwhenthe API was sentlastname fieldqueryandcorrectdata that it
passedthe belowtests.Testif correctstatus,documentdata (first& lastname) and the correct
objectreturned(_id).

63 | P a g e
Test 3: Was to ensure thatwhenthe API was sentcityfieldqueryandcorrectdata that itpassedthe
belowtests. Testif correctstatus, documentdata(first& lastname) and the correct object
returned(_id).
Test 4: Was to ensure thatwhenthe API was sentwrongdata and thatthe API wouldsendback
status404.
Test Result: All fourtestswere passedandthe correct JSON objectwasreturned.
Test 1 Result:
Test 2 Results:

64 | P a g e
Test 3 Results:
Test 4 Results:
Test Title: Testto put httprequeston API
Test Description
These testswere createdtoassure that the correct response wasreturnedfrommyget API when
differentinformationwassenttothe above API.

65 | P a g e
Test 1: Was to ensure status404 was sentwhenuserwassentno informationinthe bodyof the put
request.(Notosearchup the database)
Test 2: Was to ensure status 200 was sentwhen the usersentcorrect information inthe body and
that the documentwasupdated.Thiswasdone bysendingbackthe updateddocumentinthe body
of the response andtestingwasthe update filedchanged(change TitletoSalesManager).
http body
Test 1 Result:

66 | P a g e
Test 2 Result:
Test Title: Testto post httprequeston API
Test Description
Thistestwas createdto assure that the correct response isreturnedfromthe above API.The above
API take JSON data in the bodyof a posthttp requestandtriestosave the objecttothe MongoDB.
Test 1: Testthat the API sendsbacka 200 statussentand the Stringsuccessful issentbackin the
body

67 | P a g e
Test Title: Testto delete httprequeston API
Test Description
Thistestwas createdto assure that the correct response isreturnedfromthe above API.The above
API takesan id value fromthe url and searchesthe MongoDBfor matchingdocumentwhichitthen
triesto delete.
Test 1: Testif the correct idissentto the API that a 200 statussentand the String“use has been
deleted”issentbackinthe body of the response.
Test 2: Testif the correct ID issentto the API that a 500 status sentandthe String“use has not
beendeleted”issentbackinthe bodyof the response.

68 | P a g e
Test 1 Result:
Test 1 Result:

69 | P a g e
Future developments
In thissectionIwill outlinethe differentaspectsIwouldlike todevelopinthe future
 I wouldlike torefactormycode,modularize mycode.
 I wouldlike toaddmore reportsoptionsforusers.
 I wouldlike toimprove myMongoDBskillsandcreate more advancedanalytical chartsfor
the user.
 I wouldlike toputinplace a strategythatmade personal reportsaccessible onlythrougha
userprofile.
 The developershouldbe able toview all the usercurrenttickets.
 The user shouldbe able toupdate theirpasswordonaccount issetup.

70 | P a g e
Conclusion
In the above reportI have outlinedthe journeythatIhave undertakenwhilebuildingmyweb
applicationoverthe past3 months.I have discussedmylackof knowledge inregardstoVMand
JavaScripttechnologiesfromthe outsetandhow Iovercame these challengestobuildaweb-
applicationusingthe MEAN stack,whichiscomprisedof solelyJavaScripttechnologies.Ihave also
outlinedmywebapplicationpurposeandhow itfillsthe voidinheadoffice software inregardto
beenavailableof site,mobile friendly,cloudbasedandreal time analytics.Thisreporthasalso
outlinedhowIhave achievedall myprimaryrequirementsandseveral secondaryrequirements.This
reportalsomentionhowIhave usedall the technologiesoutlinebybothmysupervisorandindustry
partneralongwithaddingseveral technologiesof myowntobestprepare me for real world
development.Thisreportalsoexplainedthe differenttechnologiesalongwithacode walkthrough
of howtheywere implementedforthe keyfunctional sectionsof mywebsite.Finallythisreport
showedthe readerhowtestedmyapplication.Iwouldlike tosignoff thisreportbysayingthatwhile
thisprojecthas beenhugelychallengingthroughoutthe 12,it has beenthe bestlearningexperience
that I have evenencountered.Ihope youthe readerfoundthisreportinformative andthatthe work
that inhas beentranscribedwithinthisreport.

71 | P a g e
Bibliography
Easy Node Authentication:SetupandLocal | Scotch. 2016. Easy Node Authentication:Setupand
Local | Scotch.[ONLINE] Available at: https://scotch.io/tutorials/easy-node-authentication-setup-
and-local.[LastAccessed17 April 2016].
Express - Node.jswebapplicationframework.2016.Express - Node.jswebapplicationframework.
[ONLINE] Available at:http://expressjs.com/.[LastAccessed17April 2016].
Node.js.2016. Node.js.[ONLINE] Available at:https://nodejs.org/en/.[LastAccessed15 April 2016].
Node.jsIntroduction.2016. Node.jsIntroduction.[ONLINE] Availableat:
http://www.tutorialspoint.com/nodejs/nodejs_introduction.htm.[LastAccessed14 April 2016].
Passport.2016. Passport.[ONLINE] Available at:http://passportjs.org/.[Accessed16April 2016].
Stack Overflow.2016. StackOverflow.[ONLINE] Available at:http://stackoverflow.com/.[Accessed
17 April 2016].
Usingd3-tipto add tooltipstoa d3 bar chart - bl.ocks.org.2016. Using d3-tipto add tooltipstoa d3
bar chart - bl.ocks.org.[ONLINE] Available at:http://bl.ocks.org/Caged/6476579. [Last Accessed13
April 2016].
Udemy:Online CoursesAnytime,Anywhere .2016. Udemy:Online CoursesAnytime,Anywhere .
[ONLINE] Available at:https://www.udemy.com/.[Accessed17April 2016].
Writingmiddleware foruse inExpressapps.2016. Writingmiddleware foruse inExpressapps.
[ONLINE] Available at:http://expressjs.com/en/guide/writing-middleware.html.[LastAccessed17
April 2016].
VideoTutorials - thenewboston.2016. VideoTutorials - thenewboston.[ONLINE] Availableat:
https://thenewboston.com/videos.php.[Accessed17April 2016].

73 | P a g e
Requirement document
1. Introduction
The purpose of this assignment is to give me an opportunity to upskill myself in the
technologies and processes that I need on a day to day bases in the working environment.
This project will incorporate in particular the technologies and processes used by my
business partner (Altocloud), with whom I will be interning with come May. This project will
also allow me to reduce my training time dramatically with Altocloud and hopefully make
me a productive member of their team.
2. Statement of Problem
The company and my supervisor agreed that my project must incorporate the below
technologies as to meet the requirements of both my company and NUIG.
 Become familiar with AWS (Amazon web Services)
 Create an Ubuntu instance on EC2 and become familiar with Ubuntu.
 Create a web application on an Ubuntu EC2 instance will be built using the MEAN stack
(MongoDB, Express.js, Angular.js, Node.js).
 Creation of RESTful APIs on the backend using Express (Node.js) which will read from the
MongoDB database and carry out analytics.
 Use Angular.js to make client side calls to the server side APIs which return JSON data
and display the data on the client.
With regards to the above list, I have designed the following problem area:
I have to create an online application that will allow users/retail staff to view reports
generated through analytics in regards to current stock levels, orders, employee details etc.
Different users will be able to view different reports depending on their administration
rights or personally requested reports. This problem area will allow me to incorporate the
required technologies and languages, while also giving me an enjoyable and clear project.

74 | P a g e
3. Key Challenges
What are the key challenges that I am facing as I embark in my industry project?
1. Unfamiliarity with the processes involved in carrying out an industry project, in
regards to paperwork, scheduling and expected output.
2. Lack of programming experience in outside of technologies incorporated in the HDip.
3. Time restriction, I only 12 weeks to become familiar with technologies, languages,
computing concepts, design, code and document my project progress. These
processes must be carried out parallel to carrying out my day to day college
commitments.
4. Stakeholders
The stakeholders of this project are listed below:
 Eanna Hegerty (Student)
 Enda Barret (Supervisor)
 NUIG (College)
 AltoCloud (Company)
 End users
5. Goals
The first goal of this project is to create the previously outlined software, which will
demonstrate my capabilities as a software developer. The second goal of this project is to
use this project as much as possible learning and training tool for me personally, and allow
me to enter AltoCloud with the amount of training required by them drastically reduced. My
final goal of this project is to produce high academic deliverable that will help me achieve
my desired grades.

75 | P a g e
6. Project Success & Evaluation Criteria
Below is a list that will evaluate if my industry project was a success:
 Working web application that incorporates the list technology
 That I become comfortable with the all technologies and concepts that are addressed
during the construction of the project.
 That the project is delivered on time.
 That the project adheres to good programming standards in regards to comments
cohesion and coupling, testing and documentation.
7. Requirements
The requirements for the web application are as follows:
1. Create a web applications that can be accessed from distributed devices
2. Create an web application is bout desktop and mobile friendly
3. Create a database that created, edits and stores user information a privileges
4. Host the Web Application with AWS on an Ubuntu instance
5. Construct the application with the MEAN stack

76 | P a g e
8. Use Cases
1. User searches reports
John logs on using his email address and password, he is then able to view the reports
that he has requested and had signed off previously by his manager. He choose monthly
sales and see a table that shows the stores monthly sales.
2. User requests new reports access
John logs onto the system but he has been informed he needs to track monthly sales
and monthly customer complaints totals, which he currently does not have access too.
He chooses to edit his reports list and selects the required report for sales. He sees that
there is no report option for complaints, so he enters in his complaints report request in
the report query forum and hit submit. He is informed that bout request have been
logged and that his manager will be contacted in regards to his request. He is also
informed that it is possible that such a report is possible to be generated (is information
stored on database) and that he will be emailed if this issue arises.
3. New user created
Mary is a first time user of the system; she chooses to register her details and enters her
name, address, email etc. She chooses the job title she holds and chooses the reports
that she wishes to access froma drop down box. She is then told that her reports have
to be signed off by a her manager and that an administrator will contact her manager to
confirm her access to reports the reports
4. User view reports through graphs
Mary logs on and chooses the web application page that shows the available graphs that
are available to her via previously signed off permissions. These graphs give her a visual
representation of reports that are available to her.

78 | P a g e
10. System Design

79 | P a g e
11. Deadlines &Deliverables
Below is a forecasted timeline for my industry devolvement project.

80 | P a g e
12. Conclusions
To conclude I will be constructing a web application that will be used to generate reports for
users. Each user will have their profile and a number of reports that they will be able to
access (they have requested and give granted access too previously). This web application
will be constructed using the MEAN stack and will be hosted on an Ubuntu instance provided
by AWS. I look forward to building this application as it will test and increase my current
software design and development skills. This project will also give me a chance make a
positive impression on Altocloud on completion.

81 | P a g e
Learning Journal
Week1
Whatworkhaveyou undertaken on yourproject this week?
 Overthe ChristmasperiodIwas informedbymysupervisoraboutthe technologiesthatIneededfor
my project.Istartedthe weekbyresearchingthese technologiesandconceptsthroughonline
videos,tutorials,forumsanddocumentation.
 Topicsthat I researched
1. MEAN stack (MongoDB,express.js,Angular.jsandnode.js)
2. AWS (AmazonWebService)
3. Ubuntu
4. API’s
 I setmyself upa free AWSwebtier
 I usedthe EC2 to setup several Ubuntuinstances
 I usedPuTTY to connectto my instance andinstall the MEAN stack
These stepstaughtme about:
1. pair keys
2. cmd commands
3. virtual machine
4. ssh
5. innerworkingof AWS
6.
Whatchallenges haveyou encountered onyour project this week?
 Findingithardto gain full understandof concepts(API’s,Node.js,Express.jsect)
 Findingithardto decide howtomake furtherprogressinlearning
Whatactions areyounow going to take to address thesechallenges?
 I am goingto readover Enterprise JavaNotesandunderstand the material anduse themas
reference pointtocompare andunderstandMEAN Technologies

82 | P a g e
 I am goingto create a documentfordefinitionsthatIwill write inandreferbackto regularlyand
update
 I am goingto finishanonline JavaScriptcourse thisweek
 FollowingthisIamgoingto do node.jstutorials
 I am goingto create a timeline inwhichImapout the technologiesandlanguagesI’mgoingtolearn
overgivenperiods
Week 2
Whatworkdid I undertake this week?
ThisweekIworkedonlearning NoSQLforMongoDB, I didthisthroughthe new Bostontutorialsand
downloadingmongobdontomydesktopforpractisingpurposes.
I thendownloadedinstalled MongoDBontomy AWSUbuntu instance usedputtytoconnectto
the Ubuntu terminal andeventuallyinstallMongoDB.
I thenuploadedandinstalledthe northwinddatabase onmyinstance using WinSCP and
the mongoShell.
AfterthisI startedteachingmyself node.jsframeworkagaindoingnew boston tutorials.
Whatissues did Iincounter?
The major issue Iran intowas tryingto connectthe robomongo ide tomy AWS instance.Eventually
I learntthat new versionof MongoDBdoes notsupportrobomongo and manyide donot support
pair keyauthentication.
How did Iovercomethis?
I overcame thisbydecidingthatI wouldlearnthe Ubuntuterminal cmdsandworkwiththe
MongoDB shell.Thiswill be agreatskill whenIenter the workplace.

83 | P a g e
Week 3
what workhaveyou undertakenonyourprojectthis week?
ThisweekIhave reallyconcentratedonunderstandingthe express.jsFramework.
 I tackledunderstandingthe mvcdesignpatternthatexpressuses,thistookawhile togetmyhead
aroundbecause itis verydifferenttothe traditionwaytobuilda website.
 I have alsostarteda personnel journal thatIenterinformation aboutthe new technologiesand
breakthrough Ihave.
 I have alsocreateda bibliography forall the tutorialsIfinduseful,soIcan returnto themat a latter
date.
 I have createda small web appthat’s connected tomy MongoDB on my local machine
 I have startedto implementGitwithnow thatI am starting to code myprojectup. Thisisa
technologythatIhave neverencountered before butwillbe invaluableinthe development of my
product.
Whatchallenges haveyouencountered onyourproject this week?
 The biggestchallenges IfeltIwasmeetingweekwasdirection,nothavingatool tom ensure whatI
was gettingdone orwhatI shoulddonext.
 I have startedto make a to-dolisteveryday that will me totarget differentareasof myprojectand
getthemdone everyday.
 I have alsostartedto keepmypersonnel journal thatIusestorecognize the workI have done.
Week 4
Whatworkhaveyouundertakenonyourproject this week?
 ThisweekI workedonfamiliarizing myself withthe CRUDAPI concepts
 I developedseveral API'sandatleast1 API eachof the CRUD html methodsandshowedthe results
on the browser
 I startedusingpostmastertotestmy API's
Whatchallenges haveyouencountered on yourproject this week?
 Thisweekthe majorchallenge Ifacedthisweekwastryingtodisplaythe resultsof mygetAPI's,I did
not knowwhatway of goingdisplayingtheseresultsuntil mymeetingwithmysupervisor who
informedme touse angular.

84 | P a g e
 I have signeduptooan udemy course inanglerwhichwill helpme learnangular
Week 5
WhatworkhaveI under taken this week?
 ThisweekIhave undertakena udemy course inangular
 I usedangulardisplaythe API resultsbackformattedintoatable.
Whatchallenges did Imeet?
 ThisweekIran intoissueswith Javascriptconcepts(call backfunctions)
WhatamI doingthis week to address it?
 I am goingto do a Java Scriptcourse by udemy
Week 6
WhatworkhaveI undertakenthis week?
ThisweekIconcentratedonthe doingnode.jstutorial withudemyandlearnedloadsonevent
emitters
I alsocreatedseveral API'sthatwill be usedinmyproject
Whatchallenges did Ifacethis week?
ThisweekIran intodifficultywithmongodbandandwritingto it.
I alsoran intomany issuestodowithtime.Ihad3 projectsdue thisweekanditstoppedme from
workingonmy project.
WhatamI doingto address theseissues?
I have clearedall myprojectsforthe comingweek,soIshouldbe able toget alotof hoursinto work
on myprojectthisweek.

85 | P a g e
Week 7
Whatworkhaveyou undertakenonyourproject this week?
 Thisweekafterclearingmyweekof assignmentslastweek,Iwasable to start buildingmore
of myproject
 I createdthe firstrenditionof myloginsystem, whichincorporatedPassport.io,bootstrap
and node.jsandtrackeduserswhoare loggedinand kickthemout of my applicationif they
are not.
 I alsocreateda reportspage that I have bootstrapped,andisdisplay API’resultsthatare
beingcalledthoughangular
 I alsospenta full daydoinga node.jscourse thatincreasedmyunderstandingof node.jsto
no end.
 Thisweek the mainissue Iran intowas joiningtooprojectsthatI have beenworkingonat
the same time together(reports&log-in).
 The actionsthat I am goingto take thisweektoaddressthese issuesare callingintodiskno
Monday andtalkingthroughmy issue
 I will carryon developinguntil itcompletelynecessarytojointhe 2projectstogether
Week 8
 ThisweekIresolvedmyissue of joiningmytwoprojectstogetherandwasable to
access the angularfilesthatwere notaccessible before.
 ThisweekIaddedmore functionalitytomyloginsystembyalteringthe userschema
and addeda fieldcalledadministrationlevel thatstoredthe level of administration
rightsof the userloggedin.Thisfieldisthenusedtoallow accessornot access to
certainpagesand reportsdependentontheiradminlevel.
 I alsocreatedseveral new pagesthatcontainformsandbuttonsthat are usedto
access CRUD API’sandtablesthat displaythe resultstothe user.

86 | P a g e
 Thisweekthe challengesIhave facedhave beenmainlyfatigue towardthe endof
the week.Ihave foundmyoutputhas sloweddownforthe lastfew daysbecause of
the large numberof hours I have putin lately.
 I will addressthisissue bytakingabreakfromthe projectfor at least1 dayand work
on otherassignments.
 I will alsotrydo some external activitiesfromcollegeworkthisweekend(exercise
and cinema) torefreshmybrainand mind.
Week 9
 ThisweekIaddedmore reportstoo bothadministrationview and staff view
 I Redesignedthe GUIof mysystemusingbootstrapinmake a more appealingview
 I researchedintocreatinggraphs
 I startedcreatinganalyticqueriesof mydatabase data
 Thisweek Istruggledwithlearningthe graphtechnologythatIneedtouse.
 I alsostruggle withthe size of code and mykeepingtrackof functionsandcontrollers
 I am goingto solve mygraph issue byfinishingthe reportsaspectof mysystemthisweekend
freeingmyself toinvestall mytime intolearninghow tographmy analyticdata
 In regardsto the size of my projectandkeepingtrackof mycontrollersandfunction,Ihave
alreadyrefactoredmy code,byrenamingandorganizingmycode
Week 10
 ThisweekIstartedworkingon graphsto chart the analyticsof myproject
 I was able tocreate 3 charts that graph infothatis storedinmy database
 I attendedaDocker meetupandpractisedusingDockerwhichIhope touse to transfermy
projectontomy AWS ECS2 instance easilyandquickly

87 | P a g e
 I refactoredmuchof my code and securedendpointsouserwithoutthe currentadmin
rightscannot access reports
 I createda charts sectionto myapplication
 I startedworkon a personnel home page forusersonce theylogin
 The major problemImeetthisweekwaswithearningd3,I eventuallyfoundagoodtutorial
that filledinthe gapsinmyknowledge
 As of todayI have ran intoan issue withcreatingthe personnel profileforeachuser.Iwas
hopingtoeditmy passportmodel butran intoissuesandwasunable to.
 I am goingto addressthistable bycreatinga collectioninmydatabase thatis connectedto
the userprofile throughemail address,whichisuniqueandthe use thiscollectionto
personalisetheirprofile page
Week 11
Whatworkhaveyouundertakenonyourproject this week?
 ThisweekIcarried outusertestingandredesignedthe lookof myapp
 I alsogot feedbackthatI shouldallow the usertoeditthe resultof reports
 I made the app full mobile friendly
 I addeda search functionalitywithinthe report
 I startedthe write up
 ThisweekIfoundmostchallengingwastryingtodo the write up,Know whatto include and
howto put my actionsduringthisprojectontopaper.
 I am goingto addressthisissue the weekbygivingmyself afew dayswhere all Idois
addressthe write upand spenda longperiodof time onit.

88 | P a g e
Weeklychallenges
The sectionof the reportdiscussessome of the issuesthatwere inparticularlytroublesome.Fora
full breakdownof weeklyissuespleasesee appendices.
Challenge:Concept’s&Technologies
Duringweek1, I reachedone of the largeststumblingblocksof thisproject.Ifoundteachingmyself
newthe conceptsand technologiesthatwere involvedwithinthe projectverydifficult.Thisincluded
Node.js,Express.js,API’setc.
Solution
I workedoutthe above issue bywritingdefinitionsof the conceptandtechnologiesasIresearched
them.I alsoreadextensivelyintomycourse material comparingjavaconceptsthatIwas familiar
withand conceptswithinmyproject.Mostimportantly,IundertookonlinecoursesinJavaScriptand
Node whichclearedupa lotof my misunderstanding.
Challenge:DisplayingAPIresultsvisually.
On week5 I hadmy secondmajorissue of my industryproject.Atthisstage Ihad developedseveral
APIswiththe helpof myUdemy course.The issue now wastryingto displaythe JSON datainview
form.I spenta longtime tryingto figure differentmethodsandwithoutanonline course toguide
me I was lost.
Solution
ThankfullyIhada weeklymeetingwithmysupervisorwhoshowedme anapplicationinwhichhe
builtthatdisplayedJSON dataretrievedfromanAPIina table.Thisexample guidedme inthe right
directionandI wassoonreadingup onAngularon W3Schoolsand enrolledtoanUdemy course
whichI foundhugelyhelpful.
Challenge:Graphingdata
Up until thispointI hadonlybeen workingwithtablesthatshowedmyAPIresult.Andthe majority
of JavaScriptIwas writingwaswithinAngularandExpressFrameworks.Butnow Ihad to create D3
charts that consistedof JavaScriptwithinthe views.All the tutorialsIfoundonline expectedthe
studenttohave a previousunderstandingof the D3,SVG whichI had not.For 2 daysI triedto follow
stepby stepbuildingguidestochartswithnosuccess.

89 | P a g e
Solution
I stoppedlookingatonline example andD3tutorials,Ithenread upon SVG’splayedaroundwith
differentimagesandfeedingthemfake datatochange the image shape.Once I hada good
understandingof these fundamentalsIwasable to follow tutorialsandnotbe lostabout whatwas
occurring.Withinnotime I had builtmyself chartsthatwaspopulatedwithJSON datafrommyAPIs

Industry_Project_Report

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Industry_Project_Report

Similar to Industry_Project_Report (20)

Industry_Project_Report