Development of cross-platform cloud application with AngularJS and NodeJS

86 Pages·2015·13.88 MB·English

MASARYK UNIVERSITY
FACULTY OF INFORMATICS
}w(cid:1)(cid:2)(cid:3)(cid:4)(cid:5)(cid:6)(cid:7)(cid:8)(cid:10)(cid:11)(cid:12)(cid:13)(cid:14)(cid:16)(cid:17)(cid:18)(cid:19)(cid:20)(cid:21)(cid:22)(cid:23)(cid:24)(cid:25)(cid:26)(cid:31) !"#$%&’()+,-./012345<yA|
Development of cross-platform cloud
application with AngularJS and NodeJS
DIPLOMA THESIS
Matouš Havlena
Brno, Spring 2015
Declaration
I hereby declare that this paper is my original authorial work, which I have written on my
own. All sources, references and literature used or excerpted during the elaboration of this
workareproperlycitedandlistedincompletereferencetotheduesource.
MatoušHavlena
Advisor: Ing.RNDr.BarboraBühnová,Ph.D.
ii
Acknowledgement
IwouldliketoexpressmyspecialappreciationandthankstomyadvisorIng.RNDr.Barbora
Bühnová,Ph.D.forherusefulcommentsandremarks,andhercommitmentthroughoutthe
learning process of this master thesis. I would also like to thank my project external guide
StacyF.HobsonfromIBMResearchandallthepeopleworkingonmyteam.
Iwouldliketoexpressspecialthankstomybelovedones,whohavesupportedmethrough-
outtheentireprocess,bothbykeepingmeharmoniousandbyhelpingmetoputthepieces
together.Iwillbeforevergratefulforyourlove.
iii
Abstract
The goal of this thesis is to implement a cross-platform mobile event application to be used
by attendees during client workshops in IBM Research. The thesis documents the phases of
the application development process, starting with the initial project description, through
therequirementsanalysisanddesign,toimplementationoftheapplication.Specialempha-
sis is put on the design phase where mobile development approaches, technologies used
duringdevelopment,andapplicationarchitecturearediscussed.
iv
Keywords
event application, mobile hybrid application, cloud, Apache Cordova, REST, WebSocket,
Node.js,AngularJS
v
Contents
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 ProjectInitiation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1 ProjectBackground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.2 ProjectPurpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 ProjectScope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4 ProjectResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.5 ProjectStakeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.6 ProjectRisk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1 FunctionalRequirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.1 EventApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.2 AdministrationApplication . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.3 SocialWallApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.4 UseCaseDiagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Non-functionalRequirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3 SimilarSolutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.1 Guidebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3.2 Doubledutch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3.3 CrowdCompass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3.4 Bizzabo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1.1 MobileDevelopmentApproaches . . . . . . . . . . . . . . . . . . . . . 14
Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Hybrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.1.2 Round-TripvsSingle-PageApplications . . . . . . . . . . . . . . . . . 18
4.1.3 HybridWebViewFrameworks . . . . . . . . . . . . . . . . . . . . . . . 19
ApacheCordova/PhoneGap . . . . . . . . . . . . . . . . . . . . . . . 19
Trigger.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.1.4 JavaScriptFrameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
ComparisonofjQueryandAngularJS . . . . . . . . . . . . . . . . . . . 23
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.1.5 ResponsiveWebDesignandCSSPreprocessors . . . . . . . . . . . . . 25
Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
LESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.1.6 UIFrameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
vi
Famo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
OnsenUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.1.7 FrontendArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.1.8 DesignMockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.2 Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.2.1 IBMBluemixasaComputingPlatform . . . . . . . . . . . . . . . . . . 35
4.2.2 Node.jsasaRuntimeEnvironment . . . . . . . . . . . . . . . . . . . . . 36
4.2.3 MySQLasaRDBMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.2.4 MongoDBasaNoSQLDB . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.5 BackendArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.3 OverallSystemArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.4 Entity-relationshipModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.5 RESTAPIModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.5.1 RESTMethodsfortheAdministrationApplication . . . . . . . . . . . 43
4.5.2 RESTMethodsfortheEventApplication . . . . . . . . . . . . . . . . . 44
4.6 WebSocketmodel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.1 AdministrationApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.1.1 UserandEventManagement . . . . . . . . . . . . . . . . . . . . . . . . 51
5.1.2 NativePushNotifications . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.1.3 DataAnalytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.2 EventApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.2.1 iBeaconMicro-location . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.2.2 Real-timeMulti-userCollaboration . . . . . . . . . . . . . . . . . . . . 56
5.3 SocialWallApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
6.0.1 FutureDirections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
A LabEquipment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
B DesignMockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
C AccompaniedData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
vii
1 Introduction
Research&Developmentdivisionsofglobaltechnologycompaniescannotaffordtooperate
in isolation from the outside world, as they used to many years ago. Listening to clients is
moreimportantnowthaneverbefore.Withmarketsbecomingglobalandfilledwithstartup
companiesthatareabletodelivernewsolutionsrapidly,Research&Developmentdivisions
of large companies must adapt. They must open themselves to the outside world, allowing
researchers to meet with clients and exchange their insights and ideas and the challenges
they face. Furthermore, they must be able to clearly communicate which particular capa-
bilities they offer and what their area of expertise is. By doing so, researchers are able to
betterunderstandtheneedsandproblemsoftheirclients,andclientsareabletounderstand
thecapabilitiesandsolutionsdeliverablebyResearch&Developmentdivisions.Asaresult,
newideasandsolutionscanemerge.
InIBMResearch,wetrytocreateacollaborationspacewhereclientsandresearcherscan
share their expertise and work together on new ideas. We intend to create a window in the
imaginary wall that separates researchers and clients. With this goal in mind, we recently
opened a lab where we run interactive workshops and allow clients to explore the capabili-
ties of IBM Research. Part of this initiative is the creation of a mobile event application that
allowsformoreinteractivecollaborationandbetterinformationsharing.
Webelievethattheeventapplicationcanfueltheprocessofinnovationandcollaboration
during client workshops and allow us to leverage the cutting-edge technology available in
our labs. The goal of this thesis is to implement a cross-platform mobile event application
that would be used during client workshops. The text of this thesis documents the phases
of the application development lifecycle, such as project initiation, requirements analysis,
design,andimplementation.
The following chapter introduces the topic of the thesis in project management terms
andbrieflytouchesonareassuchasprojectbackground,projectpurpose,projectscope,and
projectrisk.
The third chapter covers the analysis of requirements. At the beginning, the functional
requirementsaredefinedandausecasediagramrepresentingtypicaluserinteractionswith
the system is presented. The rest of the chapter is dedicated to non-functional requirements
andsimilarsolutionsavailableonthemarket.
The fourth chapter describes the design phase of the development process. It includes a
descriptionofthetechnologyusedtogetherwiththereasoningbehinditsselection.Follow-
ing this, system architecture and entity-relationship diagrams are presented. Towards the
endofthechapter,RESTAPIandWebSocketmodelaredescribed.
The fifth chapter demonstrates how the most important parts of the application were
implemented.Ishowseveralcodesnippetstogetherwithscreenshotsoftheapplication.
1
2 Project Initiation
2.1 Project Background
This diploma thesis is written as part of my internship at IBM Thomas J. Watson Research
Center in Yorktown Heights, USA. IBM Research is the Research & Development division
of IBM and the largest industrial research organization in the world, with twelve labs in six
continents.[1]
“Formorethansixtyyears,IBMResearchhasbeentheinnovationengineofthe
IBM corporation. From helping the Apollo space missions land on the moon
to the discovery of fractals; from the technology behind laser eye surgery to
a question answering computer called Watson now being applied to health
care.”[2]
The thesis reflects on a project that implements a mobile event application. The project
is undertaken in the THINKLab department. THINKLab is a worldwide network of labs
specifically designed for inventing with clients. The goal of THINKLab is to match IBM
Research’sinnovationcapabilitieswiththeexpertiseofindustryleaderswhowanttotackle
challengesthatcannotbesolvedthroughexistingcommercialproducts.
The labs provide a space equipped with advanced visualization and interaction tech-
nologies that make collaboration possible. Every THINKLab is equipped with an Oblong
Mezzanine1 collaboration system and the custom made Galaxy Application built on top of
the g-speak platform2. Oblong Mezzanine allows multiple users and their devices and data
to be connected in one shared collaboration workspace. Spatial wands can then be used
to manipulate data on multiple screens. The Galaxy Application was built specifically to
demonstrate IBM’s research capabilities. It is a catalogue of research projects from where
individual project presentations can be launched and displayed on several large screens.
Spatial wands or touch gestures can be used to interact with the system. Pictures of the
MezzanineOblongsystemandtheGalaxyApplicationcanbeseeninAppendixA.
2.2 Project Purpose
THINKLab runs multi-day workshops with clients that want to discuss the challenges they
face, brainstorm ideas that could potentially turn into new innovations, and make connec-
tions with researchers. The challenge of the lab is to continuously improve the process of
innovation and client engagements, and establish long-term partnerships with clients that
haveadesiretoexperimentwithadvancedtechnology.
Inordertotacklethischallenge,thefollowingneedsmustbefulfilled:
• IBMneeds:Tohaveadeeperunderstandingofclientsbyinteractingwiththemandto
improvetheclientexperienceduringworkshops.
• Clientsneed:TorecognizeIBM’sresearchcapabilitiesandgetintouchwithresearchers.
Togetpersonalizedinformationthatisrelevanttotheirneeds.
1. http://www.oblong.com/mezzanine/overview/
2. http://www.oblong.com/g-speak/
2
2. PROJECT INITIATION
• They both need: To allow clients and researchers to collaborate in new and interactive
waystosupporttheprocessofinnovation.
After several discussions, a decision was made to build a mobile application that would
createaone-of-a-kindexperience.Bysatisfyingtheneedsmentionedpreviously,theapplica-
tionwouldfueltheenergyofworkshops,givingeveryoneimmediateaccesstoinformation
thatisbeinggeneratedandallowingforpersonalizedcontent.Theideaofamobileapplica-
tionwaschosenasaresultofthegrowingpopularityoftabletsandsmartphones,asshown
inFigure2.1.
Figure2.1:BusinessInsider:TheFutureOfMobile[3]
TheneedforamobileapplicationcanbealsojustifiedbythefollowingtextfromFeelingis
believing:The5emotionsofsuccessfuleventapps[4]:“Mobileexperiencesarethefutureofevent
communications.Offeringattendeesamobileeventappshowsthatyou’repayingattention
to what they want. You’ll be seen—and felt—as a brand evolving with today’s important
trends.”
2.3 Project Scope
Thisprojectisbeingundertakentodevelopamulti-platformmobileapplicationthatwould
enhanceclientengagementsandhelptoimprovetheprocessofinnovation.Theapplication
3