July 6, 2017 Valedictorian Architectural Design Document Version 1.0.0 Project team J.M.A. Boender | 0978526 R. Coonen | 0902230 R.A.T. van Dijk | 0864724 SensUs Digital H.R. Galioulline | 0927184 B.A.M. van Geffen | 0892070 A.A.W.M. de Kroon | 0905382 R. Morel | 0905326 W.M.W.R. Verlaek | 0908937 C.C. Weibel | 0883114 Project managers J. Ubbink R. Wouters Project supervisor dr. N. Zannone Customer prof.dr.ir. M.W.J. Prins W.W.C.C. Brekelmans July 6, 2017 Abstract This document describes the architectural design of the SensUs Digital Platform. The ar- chitecture described by this document satisfies the requirements specified in the User Re- quirements Document [1] and in the Software Requirement Document [2]. This document furthermore complies with the ESA software standard. Valedictorian | Architectural Design Document 2 July 6, 2017 Contents 1 Introduction 7 1.1 Purpose ........................................... 7 1.2 Scope ............................................ 7 1.3 List of definitions ...................................... 7 1.4 List of acronyms ...................................... 8 1.5 Overview .......................................... 9 1.6 List of References ..................................... 9 2 System overview 11 2.1 Background ......................................... 11 2.2 Context and basic design ................................. 11 2.3 Design decisions ...................................... 12 2.3.1 Splitting main user application and dashboard ................ 12 2.3.2 Model-view-controller pattern ......................... 13 2.3.3 Client-server style ................................ 13 2.3.4 React ........................................ 14 2.3.5 Redux ........................................ 15 2.3.6 Semantic UI .................................... 16 2.3.7 Laravel ....................................... 16 2.3.8 MariaDB ...................................... 17 3 System context 18 3.1 YouTube ........................................... 18 3.1.1 Core Request ................................... 18 3.1.2 Requesting Parts ................................. 19 3.2 Google OAuth ....................................... 19 3.2.1 Implementation (Google) ............................ 19 3.3 Images ............................................ 21 4 System design 22 4.1 Design method ....................................... 22 4.2 Decomposition description ................................ 22 4.2.1 Server application decomposition ....................... 22 4.2.2 Main user web application decomposition .................. 26 4.2.3 Dashboard web application decomposition .................. 28 4.2.4 Shared modules between web applications .................. 29 4.2.5 File structure ................................... 30 Valedictorian | Architectural Design Document 3 July 6, 2017 4.2.6 Database design .................................. 31 5 Component Description 34 6 Feasibility and resource estimates 35 6.1 Resource requirements .................................. 35 6.2 Performance ........................................ 37 6.2.1 Evaluation ..................................... 38 7 Requirements traceability matrix 40 7.1 SR to modules ....................................... 40 7.2 Components to SR ..................................... 44 7.2.1 Server application modules ........................... 44 7.2.2 Main user application modules ......................... 44 7.2.3 Dashboard application modules ........................ 45 7.2.4 Shared modules .................................. 45 Valedictorian | Architectural Design Document 4 July 6, 2017 DOCUMENT STATUS SHEET GENERAL Document title: Architectural Design Document v1.0.0 Identification: ADD/1.0.0 Authors: B.A.M. van Geffen, N. de Kroon Document status: Final 1.0.0 DOCUMENT HISTORY Version Date Author(s) Reason 0.0.1 16-5-2017 B.A.M. van Geffen Document layout N. de Kroon 0.0.2 23-5-2017 B.A.M. van Geffen Sections 1 to 6 drafted N. de Kroon 0.0.3 28-5-2017 B.A.M. van Geffen All sections drafted, feedback N. Zan- N. de Kroon none 0.1.0 28-5-2017 B.A.M. van Geffen First version N. de Kroon 1.0.0 5-7-2017 B.A.M. van Geffen Final version Valedictorian | Architectural Design Document 5 July 6, 2017 DOCUMENT CHANGE RECORDS Section Reason 1.0.0 Incorporated final (minor) feedback Valedictorian | Architectural Design Document 6 July 6, 2017 1 INTRODUCTION 1.1 PURPOSE The Architectural Design Document (ADD) provides a comprehensive architectural overview of the SensUs Digital Platform. The document describes the software decomposed in sepa- rate components to depict different aspects of the system. For every component its interface is given, as well as its dependencies and relation to other (external) interfaces. Moreover, we describe which software requirements (as described in the SRD) are satisfied by each compo- nent. Finally, the context and overview of the system are provided, along with an estimation of the feasability and resource requirements. 1.2 SCOPE Valedictorian is a group of computer science students working on behalf of the Eindhoven Uni- versity of Technology (TU/e) for the SensUs Organization. SensUs is an organization that or- ganizes an annual student competition between different universities and colleges across the globe to develop and demonstrate the design and effectiveness of various biosensors. The de- veloped software system is a web application which acts as a platform to further engage inter- ested parties (both attendees and online viewers) in the contest (a physical event). The main purpose of the SensUs Digital Platform is to provide online viewers with an expe- rience as close as reasonably possible to actually attending the event in person. This is real- ized by having live video streams of the event, along with (on-demand) videos that showcase highlights of past live video streams. Moreover, information about the competition is provided on the website. This gives online viewers access to the same amount of information and en- tertainment of the event as attendees. Furthermore, the platform provides both viewers and attendees with additional information regarding activities, participating teams, the contests’ awards and judges. Moreover, attendees can use it to catch up with missed activities, includ- ing concurrent events. Finally, the website provides online viewers with the ability to engage with participating teams. This is provided through asking questions to team members, submit- ting videos and pictures of the event (and/or teams specifically), and voting for teams. Overall, the SensUs Digital Platform adds another dimension of engagement to anyone interested in following the contest. 1.3 LIST OF DEFINITIONS Backend Data Access Layer (runs in server environment) Frontend Presentational Layer (runs in web application/client environment) Valedictorian | Architectural Design Document 7 July 6, 2017 HTTP Requests A request message following the HTTP protocol from the client to the server. JavaScript Client side scripting language used to provide interactive views on our platform. Middleware Mechanism for filtering HTTP requests entering or leaving the (backend) application. MariaDB Open-source database management system. Laravel Open-source PHP web framework for developing MVC web application. OAuth Open standard to grant systems authentication information by other websites. PHP Server side scripting language used to provide dynamic content on our platform. React Open-source JavaScript library for building user interfaces. Redis Open-source in-memory data store used for caching. Redux Open-source JavaScript library for managing application state. Response Time The time between sending a web request and receiving a response. In this document the response time is always measured in milliseconds un- less stated otherwise. 1.4 LIST OF ACRONYMS ADD Architectural Design Document API Application Programming Interface CSS Cascading Style Sheets DBMS Database Management System DOM Document Object Model HTML HyperText Markup Language MVC Model-View-Controller REST Representational State Transfer SRD Software Requirement Document TU/e Eindhoven University of Technology URD User Requirement Document Valedictorian | Architectural Design Document 8 July 6, 2017 RT Response Time 1.5 OVERVIEW The remainder of this document is composed of sections that detail the architectural design of the SensUs Digital Platform. Section 2 provides an overview of the system, and describes design choices, alternatives and rationale. Section 3 describes external relationships of the SensUs Digital Platform and their interfaces and external files. Section 4 describes the system design, its decomposition into components, their relationships (such as dependencies), and de- sign methods. Section 5, which is omitted, would contain a description of the components. We refer to the Detailed Design Document instead, for those interested in the descriptions. Sec- tion 6 describes estimates for computer resources used by the SensUs Digital Platform in de- velopment and production, and discusses feasibility. Section 7 is a requirement traceability matrix, which describes how software requirements - as set out in the SRD [2] - are met by our architectural design. 1.6 LIST OF REFERENCES [1] Valedictorian (2017) User Requirements Document version 1.0.0 [2] Valedictorian (2017) Software Requirements Document version 1.0.0 [3] Facebook. The official React website, https://facebook.github.io/react/ (accessed on 2017- 6-27). [4] The jQuery Foundation. The official jQuery website, https://jquery.com/