MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS 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 work are properly cited and listed in complete reference to the due source. Matouš Havlena Advisor: Ing. RNDr. Barbora Bühnová, Ph.D. ii Acknowledgement I would like to express my special appreciation and thanks to my advisor Ing. RNDr. Barbora Bühnová, Ph.D. for her useful comments and remarks, and her commitment throughout the learning process of this master thesis. I would also like to thank my project external guide Stacy F. Hobson from IBM Research and all the people working on my team. I would like to express special thanks to my beloved ones, who have supported me through- out the entire process, both by keeping me harmonious and by helping me to put the pieces together. I will be forever grateful for your love. 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 the requirements analysis and design, to implementation of the application. Special empha- sis is put on the design phase where mobile development approaches, technologies used during development, and application architecture are discussed. iv Keywords event application, mobile hybrid application, cloud, Apache Cordova, REST, WebSocket, Node.js, AngularJS v Contents 1 Introduction .........................................1 2 Project Initiation ......................................2 2.1 Project Background . .2 2.2 Project Purpose . .2 2.3 Project Scope . .3 2.4 Project Resources . .4 2.5 Project Stakeholders . .5 2.6 Project Risk . .5 3 Analysis ...........................................6 3.1 Functional Requirements . .6 3.1.1 Event Application . .6 3.1.2 Administration Application . .7 3.1.3 SocialWall Application . .8 3.1.4 Use Case Diagram . .9 3.2 Non-functional Requirements . .9 3.3 Similar Solutions . .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 Mobile Development Approaches . 14 Native . 14 Web....................................... 15 Hybrid . 15 Conclusion . 18 4.1.2 Round-Trip vs Single-Page Applications . 18 4.1.3 Hybrid WebView Frameworks . 19 Apache Cordova / PhoneGap . 19 Trigger.io . 21 Conclusion . 21 4.1.4 JavaScript Frameworks . 21 jQuery . 21 AngularJS . 22 Comparison of jQuery and AngularJS . 23 Conclusion . 25 4.1.5 Responsive Web Design and CSS Preprocessors . 25 Sass....................................... 26 LESS ...................................... 29 Conclusion . 29 4.1.6 UI Frameworks . 29 Ionic . 29 vi Famo.us . 31 Onsen UI . 31 Conclusion . 31 4.1.7 Frontend Architecture . 32 4.1.8 Design Mockups . 32 4.2 Backend . 33 4.2.1 IBM Bluemix as a Computing Platform . 35 4.2.2 Node.js as a Runtime Environment . 36 4.2.3 MySQL as a RDBMS . 37 4.2.4 MongoDB as a NoSQL DB . 38 4.2.5 Backend Architecture . 38 4.3 Overall System Architecture . 39 4.4 Entity-relationship Model . 40 4.5 REST API Model . 43 4.5.1 REST Methods for the Administration Application . 43 4.5.2 REST Methods for the Event Application . 44 4.6 WebSocket model . 46 4.7 Conclusion . 47 5 Implementation ....................................... 49 5.1 Administration Application . 49 5.1.1 User and Event Management . 51 5.1.2 Native Push Notifications . 51 5.1.3 Data Analytics . 53 5.2 Event Application . 54 5.2.1 iBeacon Micro-location . 54 5.2.2 Real-time Multi-user Collaboration . 56 5.3 SocialWall Application . 57 6 Conclusion .......................................... 59 6.0.1 Future Directions . 59 A Lab Equipment ....................................... 69 B Design Mockups ...................................... 70 C Accompanied Data ..................................... 79 vii 1 Introduction Research & Development divisions of global technology companies can not afford to operate in isolation from the outside world, as they used to many years ago. Listening to clients is more important now than ever before. With markets becoming global and filled with startup companies that are able to deliver new solutions rapidly, Research & Development divisions 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 better understand the needs and problems of their clients, and clients are able to understand the capabilities and solutions deliverable by Research & Development divisions. As a result, new ideas and solutions can emerge. In IBM Research, we try to create a collaboration space where clients and researchers can 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 allows for more interactive collaboration and better information sharing. We believe that the event application can fuel the process of innovation and collaboration 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, and implementation. The following chapter introduces the topic of the thesis in project management terms and briefly touches on areas such as project background, project purpose, project scope, and project risk. The third chapter covers the analysis of requirements. At the beginning, the functional requirements are defined and a use case diagram representing typical user interactions with the system is presented. The rest of the chapter is dedicated to non-functional requirements and similar solutions available on the market. The fourth chapter describes the design phase of the development process. It includes a description of the technology used together with the reasoning behind its selection. Follow- ing this, system architecture and entity-relationship diagrams are presented. Towards the end of the chapter, REST API and WebSocket model are described. The fifth chapter demonstrates how the most important parts of the application were implemented. I show several code snippets together with screenshots of the application. 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] “For more than sixty years, IBM Research has been the innovation engine of the 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’s innovation capabilities with the expertise of industry leaders who want to tackle challenges that cannot be solved through existing commercial products. 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 Mezzanine Oblong system and the Galaxy Application can be seen in Appendix A. 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 have a desire to experiment