Development of an Authoring Tool Application for Project CHIC

FACULDADEDE ENGENHARIADA UNIVERSIDADEDO PORTO

Development of an authoring tool application for project CHIC

Rui Emanuel Cabral de Almeida Quaresma

Mestrado Integrado em Engenharia Informática e Computação

Supervisor: Pedro Cardoso Co-Supervisor: António Coelho

July 28, 2020

Development of an authoring tool application for project CHIC

Rui Emanuel Cabral de Almeida Quaresma

Mestrado Integrado em Engenharia Informática e Computação

July 28, 2020

Abstract

Given that, nowadays, tourism is one of the leading industries worldwide, tourism organizations must innovate when creating new experiences to attract more tourists. One way to make these experiences more ludic and engaging is to apply technology and location-based services (LBS), which will spark interest in tourists and make them interact more with the touristic sites. To create such experiences, we developed this dissertation as part of the project CHIC (Co- operative Holistic View on Internet and Content) that aims to study and develop a digital system based on location to provide its users with ludic experiences focused on the exploration of touristic points of interest. This system is composed of a tourists’ application (that will guide the user through these experiences) and an authoring tool application (where these experiences will be created and edited). The experiences consist of paths that link points of interest for the user to visit. The authoring tool displays a map to allow the user to create points of interest and build multiple touristic experience paths. Once the experience is created, it is stored at the server, and once it is published, it becomes available to be fetched by the tourists’ application. The focus of this project was the development of the authoring tool and the tourists’ application. The conceptualization of the system was done in collaboration with a UX team, while the backend was developed by another team that is also part of the CHIC project. The system was validated using quality assurance tests, focused on system testing to verify the system integrity, on assessing system performance, and on conﬁrming that all the system requirements were met. From the test results, we could conclude that the system is working as expected without integrity issues and with a good performance. These tests validated the technologies we selected to develop the applications.

Keywords: Location-Based Services, Web Development, Authoring Tool, Smart Tourism, Pro- gressive Web Application

i This page was intentionally left mostly blank. Resumo

Dado que, atualmente, o turismo é uma das mais rentáveis indústrias a nível mundial, as empresas turísticas devem inovar ao criar novas experiências de forma a atrair mais turistas. Uma forma de tornar estas experiências mais lúdicas e cativantes é através da utilização de tecnologia e de serviços baseados na localização, o que irá despertar interesse nos turistas e fazê-los interagir mais com locais turísticos. Para criar estas experiências desenvolveu-se esta dissertação, que se enquadra no projeto CHIC (Cooperative Holistic View on Internet and Content) e que tem como objetivo estudar e desen- volver um sistema digital baseado na localização para oferecer aos seus utilizadores experiências lúdicas focadas na exploração de pontos de interesse turístico. Este sistema é composto por uma aplicação para turistas (que irá guiar os utilizadores durante as experiências) e uma ferramenta de autoria (onde essas experiências serão criadas e editadas). As experiências consistem em rotas que ligam diferentes pontos de interesse para o utilizador visitar. A ferramenta de autoria contém um mapa que permite ao utilizador criar pontos de interesse e criar rotas turísticas com eles. No final da criação de uma experiência, esta é guardada no servidor e assim que for publicada, fica disponível para ser mostrada na aplicação para turistas. O foco deste projeto foi o desenvolvimento da ferramenta de autoria e da aplicação para turistas. A conceptualização do sistema foi feita em colaboração com uma equipa de UX, enquanto que o backend foi desenvolvido por outra equipa que também integra o projeto CHIC. O sistema foi validado através de testes de garantia de qualidade focados em testes de sistema para verificar a integridade do mesmo, em verificar a sua performance, e em confirmar que todos os requisitos do sistema foram cumpridos. Dos resultados dos testes, pudemos concluir que o sistema funciona como previsto sem problemas de integridade e com boa performance.

Keywords: Serviços Baseados em Localização, Desenvolvimento Web, Ferramenta de Autoria, Smart Tourism, Progressive Web Application

iii This page was intentionally left mostly blank. Acknowledgements

My supervisor Pedro Cardoso for all the support, guidance, advice, availability, and constant feedback through the entire project. I also thank my second supervisor António Coelho for his feedback and opinions. The teams, part of the CHIC project, that helped to create this project and were always available to discuss ideas and suggest improvements. My friends for all the support, advice, laughter, and companionship. My family for their kindness, patience, support, and endless love throughout my life.

Rui Emanuel Cabral de Almeida Quaresma

v This page was intentionally left mostly blank. “If you can’t ﬂy, run; if you can’t run, walk; if you can’t walk, crawl; but by all means keep moving.”

Martin Luther King Jr.

vii This page was intentionally left mostly blank. Table of Contents

1 Introduction1 1.1 Context and Motivation ...... 1 1.2 Project ...... 3 1.3 Dissertation Structure ...... 4

2 State of the Art6 2.1 Digital media in tourism experiences ...... 6 2.1.1 Tourism growth ...... 6 2.1.2 Digital media and digital-induced tourism ...... 7 2.1.3 Smart tourism ...... 7 2.1.4 Digital media applications on touristic places ...... 9 2.2 Tourism gamification and virtualization ...... 10 2.2.1 Applications, benefits and disadvantages ...... 11 2.2.2 Examples of tourism games and gamified apps ...... 16 2.3 Technologies ...... 27 2.3.1 Mobile technologies ...... 27 2.3.2 Progressive Web Apps Frameworks/Libraries ...... 33 2.4 Summary ...... 37

3 Related work 39 3.1 Location-Based Tour Guides ...... 39 3.1.1 Personalized and location-based mobile tourism services (CRUMPET project) 39 3.1.2 Web mobile application with new generation inputs ...... 40 3.1.3 Survey on intelligent personalized mobile tour guides and a use case walking tour app ...... 41 3.1.4 Tour-Guide: providing location-based tourist information on mobile phones 41 3.1.5 Urbis: a touristic virtual guide ...... 42 3.1.6 VISIT: Virtual Intelligent System for Informing Tourists ...... 43 3.1.7 A personal tourism navigation system to support travelling multiple destinations with time restrictions ...... 43 3.1.8 Development and Application of Intelligent Tour Guide System in Mobile Terminal ...... 44 3.1.9 The city as a learning gamiﬁed platform ...... 45 3.1.10 Uniﬁed Context-Aware Augmented Reality Application Framework for User-Driven Tour Guides ...... 45 3.1.11 Smart Booklet: Tour guide system with mobile augmented reality . . . . 46 3.1.12 Design and Evaluation of Intelligent Tourist Guide System Based on Mo- bile Devices ...... 47

ix x TABLE OF CONTENTS

3.1.13 Tourism for all: a mobile application to assist visually impaired users in enjoying tourist services ...... 47 3.2 Location-Based Games ...... 48 3.2.1 Location based transmedia storytelling: enhancing the tourism experience 48 3.2.2 Effects of integrating a mobile game-based learning framework in a cultural tourism setting ...... 49 3.2.3 Narrative design for Rediscovering Daereungwon: A location-based augmented reality game ...... 49 3.2.4 The Pokémon GO experience: a location-based Augmented Reality mobile game goes mainstream ...... 50 3.3 Authoring Tools for Location-Based Applications ...... 51 3.3.1 An Authoring tool for location-based mobile games with Augmented Re- ality features ...... 51 3.3.2 Designing ActionTrack: a state-of-the-art authoring tool for location-based games and other activities ...... 52 3.3.3 Beaconing: Breaking Educational Barriers with Contextualised, Pervasive and Gameful Learning ...... 52 3.3.4 Locatify’s Creator CMS ...... 53 3.4 Discussion ...... 54 3.5 Summary ...... 57

4 Digital System to Create Location-Based Ludic Experiences for Tourists 65 4.1 The Solution ...... 65 4.2 System Requirements ...... 67 4.2.1 Functional Requirements ...... 67 4.2.2 Non-Functional Requirements ...... 68 4.3 Architecture ...... 69 4.3.1 Research Question: How can we design this Authoring Tool with an architecture of a modular system capable of including new modules in the future? ...... 69 4.3.2 Applications Interfaces ...... 70 4.4 Methodology and Work Plan ...... 71 4.5 Summary ...... 72

5 Implementation of the System 74 5.1 Technologies ...... 74 5.1.1 PWA ...... 74 5.1.2 Angular and Ionic ...... 75 5.1.3 Firebase ...... 76 5.1.4 JavaScript Libraries ...... 77 5.2 Authoring Tool ...... 78 5.2.1 Prototype 1 ...... 79 5.2.2 Prototype 2 ...... 85 5.2.3 Prototype 3 ...... 91 5.3 Tourists’ Application ...... 100 5.3.1 Prototype 1 ...... 101 5.3.2 Prototype 2 ...... 104 5.4 Modules ...... 108 5.4.1 Information Module ...... 109 TABLE OF CONTENTS xi

5.4.2 Location Module ...... 109 5.5 Authoring Tool – Code Documentation ...... 110 5.5.1 Folder Structure and Content ...... 110 5.5.2 Core ...... 113 5.5.3 Dashboard ...... 114 5.5.4 Experience ...... 114 5.5.5 Stores ...... 119 5.5.6 Service Worker ...... 119 5.6 Tourists’ Application – Code Documentation ...... 120 5.6.1 Folder Structure and Content ...... 120 5.6.2 Core ...... 123 5.6.3 Dashboard ...... 124 5.6.4 Experience ...... 124 5.6.5 Experiences-Map ...... 129 5.6.6 Favourites ...... 130 5.6.7 Filter ...... 130 5.6.8 Stores ...... 131 5.6.9 Service Worker ...... 131 5.7 Summary ...... 131

6 System Testing 133 6.1 Tests’ Structure and Procedures ...... 134 6.2 Results ...... 145 6.2.1 Authoring Tool Results ...... 145 6.2.2 Tourists’ Application Results ...... 150 6.3 Conclusions ...... 154

7 Conclusions 156 7.1 Summary ...... 156 7.2 Conclusions ...... 157 7.3 Limitations ...... 158 7.4 Future work ...... 159

A Authoring Tool Tests Guide 163

B Tourists’ Application Tests Guide 167

C Links 170

References 172 This page was intentionally left mostly blank. List of Figures

1.1 The teams involved in this project ...... 2

2.1 International tourism world prediction ...... 7 2.2 Concept of In-Joy-Life smart tourism ...... 9 2.3 Realities.io VR game ...... 12 2.4 Questo – City exploration game ...... 12 2.5 New York City Quiz game ...... 13 2.6 Smile Land Thailand mobile game ...... 17 2.7 Brazil Quest Game ...... 18 2.8 Lufthansa Group VR game ...... 19 2.9 Discover Hong Kong City Walks ...... 20 2.10 REXplorer app for Regensburg, Germany ...... 21 2.11 Geocaching treasure hunt game ...... 22 2.12 Eye Shakespeare app, Stratford Upon Avon ...... 25 2.13 TurfHunt Treasure Hunt Game app - map, nearby tours and games, game page . . 26 2.14 TurfHunt Treasure Hunt Game app - challenges and scoreboard ...... 27 2.15 Detailed comparison of Vue, Angular and React ...... 35

4.1 Experience Page of the Authoring Tool ...... 66 4.2 Dashboard page and Experience Page (Map View) of the Tourists’ Application . 66 4.3 Architecture diagram ...... 69 4.4 Initial authoring tool wireframes ...... 70 4.5 Initial tourists’ application wireframes ...... 71

5.1 NgRx diagram ...... 76 5.2 Add Activity button ...... 77 5.3 Cytoscape canvas ...... 77 5.4 Leaﬂet map with OSM tiles canvas ...... 78 5.5 Dashboard page – prototype 1 ...... 79 5.6 Modal panels in the dashboard page – prototype 1 ...... 80 5.7 Experience page – prototype 1 ...... 81 5.8 Activities context menu in the experience page – prototype 1 ...... 81 5.9 Experience page with the update activity menu – prototype 1 ...... 82 5.10 Update activity menu – prototype 1 ...... 82 5.11 Update activity menu sections – prototype 1 ...... 83 5.12 Connections context menu in the experience page – prototype 1 ...... 84 5.13 Experience page with the update connection menu – prototype 1 ...... 84 5.14 Update connection menu – prototype 1 ...... 85 5.15 Delete element alert – prototype 1 ...... 85

xiii xiv LIST OF FIGURES

5.16 Dashboard page – prototype 2 ...... 86 5.17 Modal panels in the dashboard page – prototype 2 ...... 86 5.18 Experience page map view – prototype 2 ...... 87 5.19 Experience page canvas view – prototype 2 ...... 88 5.20 Preview experience – prototype 2 ...... 88 5.21 Experience page with the update activity menu – prototype 2 ...... 89 5.22 Update activity menu – prototype 2 ...... 89 5.23 Preview activity – prototype 2 ...... 90 5.24 Update activity menu id and content sections – prototype 2 ...... 90 5.25 Dashboard page – prototype 3 ...... 91 5.26 Modal panels in the dashboard page – prototype 3 ...... 92 5.27 Experience page map view – prototype 3 ...... 92 5.28 Experience page navigation menu – prototype 3 ...... 93 5.29 Activities pins – prototype 3 ...... 93 5.30 Select set of activities – prototype 3 ...... 94 5.31 Linear set of activities – prototype 3 ...... 94 5.32 Branched set of activities – prototype 3 ...... 94 5.33 Cyclic set of activities – prototype 3 ...... 95 5.34 Exploratory set of activities – prototype 3 ...... 95 5.35 Experience page canvas view – prototype 3 ...... 95 5.36 Preview experience – prototype 3 ...... 96 5.37 Experience page with the update activity menu – prototype 3 ...... 96 5.38 Update activity menu – prototype 3 ...... 97 5.39 Update activity menu sections – prototype 3 ...... 97 5.40 Content section for the location module – prototype 3 ...... 98 5.41 Preview activity screens – prototype 3 ...... 99 5.42 Experience page with the connection menu – prototype 3 ...... 99 5.43 Experience page with the connection menu – prototype 3 ...... 100 5.44 Experience page alerts – prototype 3 ...... 100 5.45 Dashboard page and application navigation menu – prototype 1 ...... 101 5.46 Experience pages and activity pages – prototype 1 ...... 102 5.47 Experience navigation menu – prototype 1 ...... 103 5.48 Activities pins – prototype 1 ...... 104 5.49 Experiences, favourites, ﬁlters and menu pages – prototype 2 ...... 104 5.50 Experiences map page – prototype 2 ...... 105 5.51 Experience pages and activity pages – prototype 2 ...... 106 5.52 Partially and fully completed experience modal panel – prototype 2 ...... 107 5.53 Experience navigation menu – prototype 2 ...... 108 5.54 Experience pins – prototype 2 ...... 108 5.55 Activities pins – prototype 2 ...... 108 5.56 Information Module ...... 109 5.57 Location Module ...... 110 5.58 Source folder structure ...... 111 5.59 App folder structure ...... 111 5.60 Core folder structure ...... 112 5.61 Pages folder structure ...... 112 5.62 Dashboard and Experience folders structure ...... 112 5.63 DashboardState and AppState store folders structure ...... 113 LIST OF FIGURES xv

5.64 Source folder structure ...... 120 5.65 App folder structure ...... 121 5.66 Core folder structure ...... 121 5.67 Pages folder structure ...... 122 5.68 Pages inside folders structure ...... 122 5.69 DashboardState and AppState store folders structure ...... 122

6.1 Authoring Tool Functionality Tests ...... 146 6.2 Authoring Tool Recoverability Tests ...... 146 6.3 Authoring Tool Exception Handling Tests ...... 147 6.4 Authoring Tool Graphical User Interface Tests ...... 148 6.5 Authoring Tool Ad-hoc Tests ...... 148 6.6 Authoring Tool Performance Tests ...... 149 6.7 Authoring Tool Compatibility Tests ...... 150 6.8 Tourists’ Application Functionality Tests ...... 151 6.9 Tourists’ Application Recoverability Tests ...... 151 6.10 Tourists’ Application Exception Handling Tests ...... 152 6.11 Tourists’ Application Graphical User Interface Tests ...... 152 6.12 Tourists’ Application Ad-hoc Tests ...... 152 6.13 Tourists’ Application Performance Tests ...... 153 6.14 Tourists’ Application Compatibility Tests ...... 153 6.15 Authoring Tool Tests ...... 154 6.16 Tourists’ Application Tests ...... 154

7.1 Interaction between the authoring tool and the new modules application . . . . . 159 7.2 Interaction between the tourists’ application and the new modules application . . 160 This page was intentionally left mostly blank. List of Tables

2.1 Best Practices of Gamification in Tourism ...... 14 2.2 Benefits of tourism gamification ...... 15 2.3 Disadvantages of tourism gamification ...... 16 2.4 Geocache Types ...... 23 2.5 Grandfathered Cache Types ...... 24 2.6 Native, Web, Hybrid and PWA comparison based on key-features ...... 32

3.1 Approaches used in each of the case studies presented ...... 56 3.2 Summary of the location-based tourist guides studies analysed ...... 59 3.3 Summary of the location-based games studies analysed ...... 61 3.4 Summary of the authoring tools studies analysed ...... 62 3.5 Possible technologies and features ...... 63

6.1 Types of tests executed ...... 134 6.2 Authoring Tool Test Cases ...... 135 6.3 Tourists’ Application Test Cases ...... 141 6.4 Authoring Tool Test environments ...... 145 6.5 Tourists’ Application Test environments ...... 150

xvii This page was intentionally left mostly blank. Abbreviations

CHIC Cooperative Holistic View on Internet and Content CSS Cascading Style Sheets DOM Document Object Model EMBRATUR Brazilian Tourist Board FEUP Faculty of Engineering of University of Porto GPRS General Packet Radio Service GPS Global Positioning System GSM Global System for Mobile Communications GUI Graphical User Interface HTML HyperText Markup Language HTTPS Hypertext Transfer Protocol Secure IT Information Technologies JN Jornal de Notícias LBS Location-Based Services MVC Model-View-Controller MVVM Model-View-Viewmodel NFC Near-Field Communication OS Operative System OSM OpenStreetMap PDA Personal Digital Assistant POI Point of Interest PWA Progressive Web Apps REST Representational State Transfer RFID Radio-frequency identiﬁcation TAT Tourism Authority of Thailand UCP Catholic University of Portugal UMTS Universal Mobile Telecommunications Service UNWTO World Tourism Organization UI User Interface UX User Experience VR Virtual Reality W3C World Wide Web Consortium

xix This page was intentionally left mostly blank. Chapter 1

Introduction

This chapter describes the context and goals of the work to be developed, as well as the structure of this document. The Section 1.1 describes the context and motivation for this project. The Section 1.2 presents the reasons for this project to be developed and its goals. Lastly, Section 1.3 enumerates the structure of this document.

1.1 Context and Motivation

This dissertation is involved in the project CHIC1 (Cooperative Holistic View on Internet and Content) that aims to study and develop a digital system based on location to provide its users with ludic experiences focused on the exploration of touristic points of interest. This system is composed of a tourists’ application (that will guide the user through these experiences) and an authoring tool application (where these experiences will be created and edited). This project is performed in collaboration between the Faculty of Engineering of University of Porto (FEUP), Gema Digital, Catholic University of Portugal (UCP) and Jornal de Notícias (JN). There are three teams involved in the development of this system, from different courses at FEUP. We are the implementation team, the ones that create the two applications and connect them to the server. The backend team created the backend for the system making sure that all connections are secure. The UX team created a design system for the applications and then designed prototypes for the applications. They also designed the modules that the users of the authoring tool will be able to apply to the activities inside the experiences.

1https://chic.mog-technologies.com/ [Access date: Jun 29, 2020]

1 2 Introduction

Figure 1.1: The teams involved in this project

Tourists are increasing in number all over the world in a way that is without precedent [9]. Dimitrios Buhalis [15] defends the value of Information Technologies (IT) in tourism. In his study [15] he states that “unless the current tourism industry improves its competitiveness, by utilizing the emerging ITs and innovative management methods, there is a danger for exogenous players to enter the marketplace, jeopardizing the position of the existing ones”. People are always looking for new, different and exciting things to do or visit, valuing innovation and out of the box experiences [15]. These experiences can be delivered to the tourists as Mobile Apps (with or without gamiﬁcation components) or as Mobile Games [58].

“Having surpassed 5 billion people connected to mobile services in 2017, the global mobile industry will reach further milestones over the next eight years” [50]. Developing countries are the main booster of this growth [50]. Since in developed countries the majority of the population already has mobile devices, the growth in these countries is slowing down [50]. According to this study [50] “the more signiﬁcant growth opportunity will lie in mobile internet – a market that will add 1.75 billion new users over the next eight years, reaching a milestone of 5 billion mobile internet users in 2025”. This has led to the need of online portals and web applications to adapt to mobile devices, from which emerged Apps or Mobile Applications.

In the beginning of mobile apps, we had native apps, mobile web, and hybrid apps. Native apps are mobile applications speciﬁc for a certain Operative System (OS) that “take full advantage of their particular features” and need to be developed using “that OS’s language and framework” [107]. Mobile web apps are websites designed for mobile devices [107]. “Hybrid apps are mobile web applications packed into a native app” [107]. Nowadays, there are Progressive Web Apps (PWA), a technology that aims to deal with cross-platform issues while maintaining native apps’ performance and delivering a web-based experience [34].

According to Wang et al. study [130], with all the content available on smartphones and access to instant information, these mobile devices “can change tourists’ behaviour and emotional states by addressing a wide variety of information needs”. These allow “tourists to more effectively solve problems, share experiences, and ‘store’ memories” [130]. This shows that tourism organizations have to invest in Mobile Services and Mobile Apps in order to attract the interest of the tourists. 1.2 Project 3

1.2 Project

“In general, Location-Based Services [(LBS)] are considered crucial for the success of mobile applications” [106]. These services’ “broad scope of value-added features is understood that are based on the system’s awareness of the current user location” [106]. One option to deliver this kind of experience is through an App or serious game that involves a LBS. By using this kind of service and since the App is real-time we are increasing tourists engagement when visiting points of interest. The experiences will consist of a list of paths linking points of interest near the tourist’s current location. To start going through one of these paths the tourist only has to choose one from the list and follow it on the map being shown on the tourists’ phone. This tourists’ application is one of the two applications we will develop. In order for these experiences to be created and edited, an authoring tool will be developed. This tool will be used by users responsible for creating and editing the experiences. The authoring tool will show a map to the user allowing the user to choose different points of interest and create multiple touristic experience paths with them. When ﬁnished, such experiences will be available at the server so that the tourists’ application has access to them. Since we are looking for ease of use and for the maximum amount of people to be able to use these apps, we will develop them as PWAs (Progressive Web Apps), which are cross-platform web applications, allowing users to use the apps on desktop or mobile devices and also giving them the best ofﬂine experience when no internet connection can be established. The design and conceptualization of the whole system will be done in collaboration with the teams that are part of the project.

Research questions:

• What are the requirements for an Authoring Tool as a PWA for touristic experiences?

• How can we design this Authoring Tool with an architecture of a modular system capable of including new modules in the future?

The goals of this dissertation are the following:

1. To develop a tool that allows the authoring of ludic experiences based on touristic points of interest and tourist location;

2. To develop a tourists’ application where these experiences can be played;

3. To apply quality assurance tests for the authoring tool and for the tourists’ application;

4. To work with the other teams of the project in the implementation and optimization of the software. 4 Introduction

1.3 Dissertation Structure

In Chapter1, we present an introduction to this dissertation. In Chapter2, we describe the state of the art of Digital Media in tourist experiences and mobile games in tourism and the gamiﬁcation component. It also contains a comparison between the best options for the technology of the authoring tool, as well as the best frameworks or libraries to develop it. In Chapter3, we present an analysis of some related works to this project. In Chapter4, we detail the project and its structure, answers the second research question of the project, and presents the work methodology to be applied in the implementation of the system. In Chapter5, we answer the ﬁrst research question of the project, describes the implementation phase, along with the technologies used, an explanation of the different prototypes and a thorough documentation of the developed code. In Chapter6, we present the quality assurance tests carried out and their results. In Chapter7, we present the conclusions, limitations, and future work of this dissertation. This page was intentionally left mostly blank. Chapter 2

State of the Art

This chapter contains the state of the art of this project involving areas. In Section 2.1 we explain today’s presence of digital media (apps, social networks, web services, etc.) in tourism experiences. Either as digital travel guides, virtual reality experiences, storytelling, vlogging, or as LBS that intend to use users’ locations to provide him with a personalized experience. This section is relevant to this dissertation since the tourists’ application will be a Location-Based Service, applying digital media to the tourists’ experience. In Section 2.2 we talk about the application of gamification in tourism, as a way of making touristic experiences more entertaining. We also enumerate some mobile apps used in touristic sites to create virtual experiences as well as some serious mobile games which have the goal of engaging tourists in destination experiences. This section is relevant to this dissertation in a way that the final product will be a ludic experience with some sort of gamification. In Section 2.3 we are analyzing the best options for the technologies of the authoring tool, the tourists’ application and the server and making a comparison to select the best ones. This section will also include the analysis and comparison of different frameworks or libraries to develop a PWA. This will allow us to choose the best technologies for the project. Lastly, in Section 2.4 we make a summary of this chapter.

2.1 Digital media in tourism experiences

2.1.1 Tourism growth

According to UNWTO (World Tourism Organization), the “relatively strong global economy, a growing middle class in emerging economies, technological advances, new business models, af- fordable travel costs and visa facilitation” were the major factors behind the 5% increase in international tourist arrivals veriﬁed in the year 2018 hitting 1.4 billion [123]. During the same year, the tourism industry generated approximately 1.7 trillion dollars [123]. And, the trend is for these numbers to keep increasing [122]. Their prediction is that the “number of international tourist arrivals will reach 1.8 billion by 2030” as shown in Figure 2.1, with the “emerging economy destinations to grow at almost double the pace (+4.4% per year) of advanced economy ones +2.2% per year” [122].

6 2.1 Digital media in tourism experiences 7

Figure 2.1: International tourism world prediction, by the World Tourism Organization (UNWTO) [122]

2.1.2 Digital media and digital-induced tourism

Digital platforms for tourists have “signiﬁcantly grown” in the last few years [26]. Digital media helped to create media convergence1 and to promote “mobility and interactivity” [26]. As Doolin, Burgess, and Cooper [27] recognised, “content of tourism destination Websites is particularly important because it directly inﬂuences the perceived image of the destination and creates a virtual experience for the consumer“. Digital media provide online information that can instantly be “accessed from websites, email, web advertising, blogs, and social networking sites, among others” (this is also known as Digital Tourism) [26]. Nowadays, digital media’s convergence is being increasingly used by “tourism destination management organizations and other key players in the tourism industry” to advertise “tourism information and accelerate consumption propensities for tourism goods and services across destinations” [26]. “Digital-induced tourism” promotes virtual tourism by presenting “recorded or real-time” 3D images of destinations before the visit [26]. Heung [53] recognised that tourists are using more and more digital resources, like online services related to tourism, in their destinations search. "A website’s usefulness is enhanced if this contains information that can ease the traveller’s prepara- tion of trip planning” [26]. Kaplanidou and Vogt [63] concluded that information present on travel websites, related to the destinations, like upcoming events, promotions, etc., is much valued by tourists and may impact their intention to visit a destination.

2.1.3 Smart tourism

“Smart tourism is an advanced stage of tourism informationization. It consists of digital, intelligent, and virtual tourism based on digital, intelligent, and virtual technology” [136]. This recent phenomenon is responsible for grouping in one place all the components related to tourism [137].

1Media convergence is, according to an article [33] written by Terry Flew for the Encyclopaedia Britannica, a concept “involving the interconnection of information and communications technologies, computer networks, and media content”. 8 State of the Art

In recent years the word smart has increased popularity thanks to the “technological, economic and social developments” that are increasingly related to information and shared data [48]. These developments are based on “sensors, big data, open data, new ways of connectivity and exchange of information (e.g., Internet of Things, RFID, and NFC) as well as abilities to infer and reason” [48]. Due to technological developments, it is now possible for tourists to “acquire, store, dissemi- nate and exchange information” either as images or as videos regarding their travel planning and share it with anyone anywhere in the world [26]. Using destinations’ websites or applications tourists can also manage reservations interactively whenever they want [26]. The author of a TripAdvisor’s study [118] defines “‘Connected Travellers’ as those who have used a smartphone to plan or book a trip”. Their study [118] also states that “42 per cent of travellers around the world are Connected Travellers”. This type of travellers is, therefore, more used to using their smartphones to “make travel-related bookings” than “travellers overall” [118]. The trend of the last few years is for travellers to increasingly use their mobile devices during trips [42]. In a study [70] concerning Smart Living Technology, its authors talk about the main idea behind this concept, which is meant to help people and therefore its development is built mostly “on the concept of user-driven innovations”. It is stated that technology focus on preserving the environment should be placed on the same level as using technology for the more immediate needs of people, like increasing life quality. This concept is employed daily to “increase efficiency, afford- ability and sustainability” [70]. A basic principle behind Smart Living Technology is gathering as much information as possible regarding the environment surrounding each person [70]. To group such amount of information efficiently, “intelligent networks should be adopted”, which can be achieved by connecting people’s devices and technological products to a “coordinated management system” not using cables but using wireless technology [70]. This way users have access to all the information they need to “make more informed choices” [70]. One example of the application of Smart Living Technology is the In-Joy-Life Smart Tourism [112]. This is a project developed for Puli and Sun Moon Lake, Taiwan. These two touristic destinations are visited by a lot of tourists “all year round” [70]. This lead the Taiwan government to come with an innovative idea to ease the use of the city’s transportation services, promote shopping in selected stores, eating at selected restaurants and visit the monuments, all done with a single travel card [70]. Figure 2.2 displays the concept of this new smart service. 2.1 Digital media in tourism experiences 9

Figure 2.2: Concept of In-Joy-Life smart tourism [112]

2.1.4 Digital media applications on touristic places

Location-based technology can be used to gather information that is valuable to shape tourists experiences [119, 121]. This information consists, for example, of “geographic knowledge and behavior” [121]. Location-based services (LBS) make use of users’ geographical position to give them data and information relative to that position [22]. LBS use a “communication network and one or more positioning technologies, combined with geographical information systems which collect the information and present it to the end user” [22]. The infrastructure necessary to support an LBS service must consist of “at least these ﬁve elements: a mobile device (e.g. a cell phone or PDA), a communications network (GSM, GPRS, UMTS), a positioning component (GPS receiver), a service provider and ﬁnally, a data provider” [22]. Examples of LBS are “interactive maps, or giving directions to a destination, or recommendation of tours” [105]. According to Schmidt-Belz et al.[105], knowing a user’s current location allows the system to assist with user’s tasks, like for instance (examples adapted from [105]):

• The system can fill in forms or requests with the user’s current location, e.g. when a user wants to plan a bus trip, the system puts automatically the user’s current location on the from field, leaving only the to field to be filled by the user;

• “The user can ask where he is. If he feels lost, the system can provide the name of the area or an address. It can also point out the current position on a map”;

• “The user can simply ask ‘how to get there’, if the system already knows the destination (from the dialogue history) and the current position, it can provide directions”;

• When a user is following a certain path, the system can “provide location-speciﬁc information and directions”.

An example of an LBS applied to tourism is the mobile tourist guide. This intends to “support tourist experiences on-the-move” [120], e.g. CRUMPET [105], INTRIGUE [4], and P-TOUR 10 State of the Art

[84]. Mobile tourist guides give “personalized location-aware navigation to users through user- friendly interactions” as well as possibly highlighting points of interest in a given touristic place [84]. One of the most successful mobile city guides is Foursquare City Guide,2 with more than “50 million monthly active users by the end of 2018” [100]. Its main features, listed on its Play Store page [35], include the following:

• Get information about a destination based on other persons’ reviews and feedback;

• Create a to-do list of “neighbourhood hot spots, or places users’ may want to visit while travelling”;

• Rate and take notes about places visited to “get personalized recommendations in the future”;

• Keep a record of the places visited.

LBS can also be used to provide tourists information about, for instance, recreation spots near them, live trafﬁc information or weather updates [99]. Using tourists’ current location and accessing a “database containing all kinds of facts based on tourism”, tourists can enjoy services like, for example, getting information “about their route, trafﬁc jams, interesting sights, nearest metro stations, airports, hotels, hospitals, shopping malls, etc.” [99]. This demonstrates both that LBS can be used to provide a large variety of services, which can all be available on a mobile device and also that LBS provides a lot of value to the tourism sector [99].

2.2 Tourism gamiﬁcation and virtualization

“Gamification involves applying elements of gamefulness, gameful interaction, and gameful design with a specific intention in mind” [24]. The focus of gamification, unlike games that focus more on “entertainment and pleasure”, is on influencing “players’ behaviour engagement with their environment and co-players who may also be fellow customers or service providers towards achieving meaningful interaction and engagement and potentially achieve rewards” [134]. An example of gamification is a destination creating a treasure hunt to involve tourists with the destination and while playing the treasure hunt, they get to “explore various areas and to collect points, photos, memories and experiences” [134]. A difference from this to a normal game might be not having “winners nor losers” [134]. Xu et al. study [132] states that “the main motivation to play a tourism game is to gain practical information about the destination and to socialize with other people. The mixed feeling of playing games in a virtual and real environment (fantasy and fun) is also important”.

2https://play.google.com/store/apps/details?id=com.joelapenna.foursquared&hl=en [Access date: Dec 23, 2019] 2.2 Tourism gamiﬁcation and virtualization 11

2.2.1 Applications, beneﬁts and disadvantages

There are many examples of “application of game design elements in tourism”, like, for instance, a simple “loyalty card” issued by gift stores to make their customers return to the store in the future, with for instance a credit accumulation system to provide discounts [133]. “Experiences co-created by tourists and service providers” [133] are the basis of the tourism industry, which can, therefore, be seen as a service industry [125]. Tourism organizations need to determine the involvement they want from tourists in the designing of new experiences or products, which will influence the value creation of tourists in the development of such ideas [133]. “Experience co-creation” is achieved in service systems, when tourists and tourism organizations cooperate to create new experiences [133]. Within these systems, gamification can be employed to make customers part of the experience creation or to get a company’s employees more involved with its activities [59, 133]. Tourism marketing is one area where gamification can help on many levels. Some examples are: raise brand awareness, enhance tourist experiences, players’ engagement, improve customer loyalty, entertainment, and employee management [134]. But, the main benefit of tourism gamification is customizing tourists experiences [134]. Tourism destinations can create tourists’ focused games within two categories, either as “online/offline games” or as “location based mobile games” [132]. The former includes games which intend to promote a destination and improve its marketing, that is, they are supposed to increase “brand awareness, to attract potential customers and to build up a destination image” [132]. The latter has the purpose of focusing tourists’ experiences on engaging with the locale and making these experiences “fun and sustainable”, while also providing tourists with information about the visited places [129]. The game design of location-based games is usually inspired by the destination, consisting of elements from “real environments (such as tourist attractions, cultural sites, urban and rural environments)” [126]. Tourists’ trips can be divided into three stages: “before the travel, during the travel and after the travel” [126]. Gamification can be applied to each one of these stages [126]. Before travelling, games related to the destination can be used to increase tourists’ interest in that destination and to provide information about it [132]. An example of a game that tourists can play before travelling is Realities.io.3 This is a gamified educational VR travel app that intends to provide users virtual reality experiences on “scanned and modeled real-world environments” by capturing the sites “with specialized scanning equipment” [91]. The users can interact with the app using a “giant globe” that they can rotate with VR controllers [91]. After players choose the site they want to explore, they only need to “tap the area on the virtual globe” and they get transported to that location [91].

3https://www.realities.io/ [Access Date: Jan 05, 2020] 12 State of the Art

Figure 2.3: Realities.io VR game [98]. The picture on the left shows the user interface where the players choose the place they want to see. The picture on the right shows one of the sites available in the game.

During the travel, location-based games can be an important tool to improve tourists’ experiences by making them engaging and ludic [132]. An example of a tourism location-based game is Questo4. In this game, players are invited to explore “more than 50 cities” [97]. They can play “city games (quests)”, while discovering hidden stories about those cities, by tracking clues and solving enigmas [97].

Figure 2.4: Questo – City exploration game [97]. The picture on the left shows a screen with information about a place. The picture in the middle shows a menu where players can choose an exploration quest. The picture on the right shows a screen with clues to complete a quest

After the travel, games can be used to motivate tourists to repeat the visit, to assess tourists’ opinions on the destination and their experiences there, to test their knowledge about it or even to allow tourists to share their travel’s experiences [134]. An example of a destination quiz game

4https://www.producthunt.com/posts/questo-city-exploration-games [Access Date: Jan 05, 2020] 2.2 Tourism gamiﬁcation and virtualization 13 is the New York City Quiz.5 This game presents the players with “more than 300 questions from different subject areas (e.g. art and culture, food and drink, personalities, politics and events)” [51].

Figure 2.5: New York City Quiz game [51]. The picture on the left shows the main menu where the player can choose to play one of the three modes (career game, perfect game or free game). The picture on the right shows a screen with one of the questions from the quiz.

Xu et al. study [132] analyses Chinese tourist players’ motivation and presents some ﬁndings on this subject. The focus groups present in this study showed interest in the concept of location- based mobile games, even though they prefer enjoying the destination environment without the distraction of mobile devices [132]. Generally, the study’s participants revealed they “prefer simple, relaxed, not too challenging games”, although a genre differentiation was made, with men preferring “action and strategy games” and women preferring “brain, leisure games” [132]. Table 2.1 presents “some examples of where gamiﬁcation is applied in different tourism industries” [133].

5https://play.google.com/store/apps/details?id=com.happyquizgames.newyorkquiz&hl= en [Access date: Jan 07, 2020] 14 State of the Art

Table 2.1: Best Practices of Gamiﬁcation in Tourism [133]

Industry Company Case Description Gaming Elements American Gamiﬁed mobile app represents current elite Progress bar Airlines status qualiﬁcation visually. Points Levels (Gold, Platinum, Executive Platinum)

Turkish QR-coded national ﬂags have been placed on Physical Rewards Airlines 100 digital bus shelters for London 2012. Badges Users who read the code can win a ticket to Australia. Goal is to have most check-ins in one place or individual places. Airline & Transportation

Shopkick Users are engaged with products by applying Virtual Currency game mechanics for incentivising offers prior Rewards to shop visits. The gamiﬁcation also involves Contests a geo-targeted approach to drive local engagement. The aim is to inﬂuence buyers’ behaviour via game mechanics.

Check Customers scan products to exchange for Virtual Currency Points checkpoints which then can be exchanged for Rewards virtual currency or gift cards.

Starwood Partnership with Foursquare to provide Point System SPG customers 250 bonus points per check-in and Badges program chances to unlock a hidden Free Resort Night Retail & Hospitality Award.

Marriott Aim of the social media game is to recruit Point System My Hotel new staff for job vacancies and familiarise Levels players with various parts of a hotel. Virtual Goods

Foursquare Users can claim mayor ships, unlock badges, Badges receive special offers & rewards such as Leaderboard discounts to speciﬁc retailers while also Reward with real world tracking against friends via a leaderboard offers

Destination while checking-in at a restaurant etc.. 2.2 Tourism gamiﬁcation and virtualization 15

Table 2.2 enumerates the different benefits of tourism gamification in two different phases (outward function of gamification and inward function of gamification), either before, during or after tourists experiences and how it is being applied in each stage [134].

Table 2.2: Beneﬁts of tourism gamiﬁcation [134]

When Benefits How Outward Function Before • Increase brand awareness, Tourism specific games (online games; of Gamification inspiration/dream; mobile games) feed tourism information • Generate interests; to potential tourists, generate interests, • Information conversion stimulate visiting inspiration, increase to sales/purchase brand awareness; Virtual Reality/3D technology as a technological tool supports these functions. During • Engagement/interact Location-based games encourage on- • Enhance experiences -site engagement with the destination, • Entertainment tool augmented reality games interact the player with the real surrounding tourism attractions; Gaming as an entertainment tool to kill time. After • Loyalty/repeat visit Online games recall memories, • Share experiences encourage sharing experiences, inviting • Recall memories friends, advocate the destination, • Advocate/ambassador rewards/coupons in the game and gamified loyalty programs encourage repeat visit. Inward Function • Employee management Use of games to familiarize the of Gamification • Employee training employee, use for staff training. • Generate fun interests

Despite the benefits, there can also be downsides to gamification in tourism. For example, when a destination provides mobile games that divert the attention of tourists from visiting the destination to playing the game and collecting possible rewards. One of the main goals of these games should be to make the visitors discover, get acquainted and be engaged with the locale, and not make them look at their mobile phones the whole time. Since these games can be used to promote behaviours, game designers need to be careful about which behaviours they want to incentivize, because choosing the wrong incentives may have a negative effect [16]. Sebastian Deterding [23] offers the example of a game in which players progress and gain points by “performing acts of kindness” [55] for other people. However, people on the receiving end were offended that the players did something nice to earn points and not because they actually cared [23]. Also, “gamification may bring out too much competitive energy”, which when applied inside a destination organization (e.g. hotels, museums, etc.) may motivate some employees to try to undermine their co-workers [16]. When a company intends to “enhance soft skills like empathy or collaborative problem-solving” of their employees, giving rewards based on “competitive or status-seeking behaviour” might have the reverse effect and create divisions between them [55]. 16 State of the Art

This leads to worse “team performance or collaboration” [55]. Another downside is that high competitiveness can also result in players resigning the game if they feel that it is too hard [68]. When companies apply gamification in a “healthy business system”, which is also called exploitationware, they may be prejudicing that system [133]. Although gamification has become popular and is said to provide “easy, cheap and replicable success”, if tourism destinations try to implement it not having in mind that there might be some risks associated, like “triggering an- noyance among customers and employees”, their businesses may suffer a setback [133]. Scoring systems are a way of applying gamification, however, users might sense these systems as a way to control and monitor them [10, 131]. The application of such systems into real life is called pointsification, “which might lead to a fatigue of collecting badges, points and trophies for its own sake” [133]. It can even be the reason behind the practice of voluntary activities [71, 133].

Table 2.3: Disadvantages of tourism gamiﬁcation

When Disadvantages How Outward Function Before Choose the wrong behaviours to Using rewards as incentives of Gamification promote in the game may have a for some behaviours which negative effect; are not the most desirable ones. During Divert the attention of tourists from Putting too much focus of the visiting the destination to playing the game in gaining rewards and game and collecting possible rewards; not on exploring the destinations. High competitiveness can result in Adding a point system and a players resigning the game if they feel leaderboard will increase that it is too hard; competitiveness but might also result in some players feeling unmotivated to keep playing when they see their position on the leaderboard. After Players not coming back to play the Designing difficult tasks for game again after a previous experience the players to perform in the where they found it too hard; game. Inward Function During Gamification may bring out too much Giving rewards to players of Gamification competitive energy. based on their completed tasks may result in some players undermining others to get the rewards.

Tourism destinations need to measure the benefits and downsides of implementing gamification. They need to decide which gamification elements fit their system and evaluate carefully in which activities can gamification be applied [89].

2.2.2 Examples of tourism games and gamiﬁed apps

Serious games can be seen as “computer/video games” [134] with the goal of “changing user behaviour and transferring knowledge” [134], which contributes to players learning while playing these type of games and not just having fun [41]. Serious games in tourism have the goal of 2.2 Tourism gamiﬁcation and virtualization 17 providing information about destinations to tourists [134]. Below we have some examples of serious games and gamiﬁed apps from touristic destinations.

2.2.2.1 Smiled Land Thailand

This game,6 created by the “Tourism Authority Thailand (TAT)” had the goal of interesting future young tourists in Thailand touristic sites [134]. The game (Figure 2.6) was designed for young Facebook users, as a way to improve Thailand visibility as a tourist destination and to raise the number of visits to “TAT’s social networking media and mobile applications” [134]. To teach players more about Thailand, game designers have set the game background as some of the country’s “iconic attractions, branded restaurants and shops” [134]. The game presents players with “more than 200” Thailand’s attractions [113]. Players become tourist characters that have to explore the country, ﬁnd treasures on each site and pick them up to mark that place as visited [113]. Players can also buy items (e.g. food, tools, etc.) at a shop inside the game, dress their characters and collect items during the game [113]. This game also contains a few mini-games where the users will receive coins [113].

Figure 2.6: Smile Land Thailand mobile game [113, 116]. The picture on the left shows the main page. The picture on the right shows the in-game map with Bangkok places for the user to choose.

2.2.2.2 Brazil Quest Game

Two years before the 2014 FIFA World Cup, “the Brazilian Tourist Board (EMBRATUR)” [64] created a game to “promote the 12 host cities” [64] and at the same time using digital marketing to promote the country as a touristic destination [12]. As players go from city to city, they learn about Brazil’s culture [64]. The game background is composed of pictures of these cities’ tourist attractions [64]. Players need to take the “main character, Yep, an alien”, to each city with the goal of “capturing orbs” and avoid “obstacles left by his villains” [64]. Players can try to overcome other players highest scores on the leaderboard and increase their ranking [64]. To progress in the game and increase their score, players need to “overcome challenges and accumulate points or orbs” [64]. Each city represents a new stage of the game and

6http://smilelandgame.com/ [Access date: Nov 21, 2019] 18 State of the Art there is also a section with a description of the city [64]. On each stage, players need to ﬁnish a mission, which can be played on three “levels (normal, hard and race)”, with a certain number of points to “win a tourist attraction” [64]. On the race level the player must run “against the enemy” and in case of defeat, “the character loses momentum and energy, being necessary to repeat the level” [64].

Figure 2.7: Brazil Quest Game [65]. The picture on the left shows the ﬁrst screen of the game. The picture on the right shows an in-game image.

2.2.2.3 Lufthansa Group VR

Lufthansa has early invested on Virtual Reality (VR) technology, implemented it “into various business processes” and up until today, they continue to regularly extend “its use in the company” [103]. “Our goal was to be able to transport the entire flight experience and destinations as immer- sively as possible – the motto: try before you fly. We did just that with VR”, explained “Torsten Wingenter, Head of Digital Innovations, Lufthansa” [103]. Wanting to create such an experience and with the extensive background in VR technology, Lufthansa designed a VR game7 that provides players the opportunity to interactively visit some of Lufthansa’s destinations within a virtual experience that simulates these places [111]. The game design elements present are “avatars, rewarding, gifting, sharing and fun” [134]. Using virtual reality tourists can have a better perception of the spaces represented, either inside the planes or of their destinations [103]. This game also provides an on-flight experience to users, which includes both economic and first-class flight experiences [103]. Users can select an airline, which takes them into a VR experience in that airline, showing them the interior of the airline and simulating flight experience and they can also choose a destination, between the ones available, and “get a realistic impression” of that site [103].

7https://play.google.com/store/apps/details?id=com.lufthansa.android.groupvr&hl= en_US [Access date: Dec 30, 2019] 2.2 Tourism gamiﬁcation and virtualization 19

Figure 2.8: Lufthansa Group VR game [25]. The picture on the left shows the menu where players can select an airline to view its inside or go to the destination menu. The picture in the middle shows the menu where players can select a destination. The picture on the right shows a VR image of the selected destination.

2.2.2.4 Discover Hong Kong City Walks

The Hong Kong Tourism Board created this gamiﬁed city tour app,8 with the aim of bringing more tourists to the city to visit the touristic attractions that Hong Kong has to offer [28, 134]. With this app tourists can go through a selection of four city tours relative to the following topics: 1) travel through time; 2) adventure in architecture; 3) experience living culture; 4) savour the cosmopolitan ﬂavours [28, 57]. When tourists are halfway of a tour they receive a stamp “which can be shared on Facebook” [115]. On each tour, there are several monuments and touristic sites for tourists to visit. In this app, users start by choosing a tour topic and after initiating a tour, the app will give them the tour’s directions [57]. At any time users can consult the map which shows the sites that will be visited, see a description of one of these sites (containing the travel through time and the distance to cover) or even click on the option See what’s around, which takes the user to a screen with the site as the background, the indications of the nearest sites (as well as the distances to these) and a radar with the amount of sites left to visit [57].

8https://apkpure.com/discover-hong-kong%C2%B7city-walks/com.cherrypicks.HKTB [Ac- cess date: Dec 30, 2019] 20 State of the Art

Figure 2.9: Discover Hong Kong City Walks [57]. The picture on the upper left shows the main menu. The upper right picture shows one of the in-game screens with an image of the place, a small description, the travel through time, the distance to cover and the options to see what’s around and a map. The bottom left picture shows the map containing the directions. The bottom right picture shows an image of the place.

2.2.2.5 REXplorer

This gamified mobile tour guide app (Figure 2.10) was created for “a UNESCO World Heritage Site in Germany” [134], Regensburg, to teach tourists about the city’s history in an innovative and interactive way [129]. In the game, tourists must help the “virtual figure ‘Rex’” in exploring the sites, personifying characters that are his assistants [134]. The app provides navigation tips to tourists taking them through paths planned to show tourists some of the city’s sights and also to make them “interact with historical buildings and characters”, making tourists learn the history of those sites [134]. The goal of the game is for players to walk to points of interest indicated by the app and find there “historically & mythologically based spirits” [87]. Playing as a virtual avatar adds “fantasy and personal” components to the experience, making it more entertaining for the player [134]. This game requires a “device composed of a mobile phone and a GPS receiver” so that the players may communicate with the spirits present in each location [87]. This device is given to the players, by the game’s organizers, together with a small manual teaching the tourists how to play and the map with the places to visit marked [87]. During the tour players receive instructions on the device to take “geo tagged pictures” of the places they visit [87]. These pictures are uploaded to the “players’ weblog”, which they will receive at the end of the experience [87]. Players interact with the spirits by “casting a spell” — as stated in the study [87] —, done with a device’s movement, 2.2 Tourism gamification and virtualization 21 and if they choose the right spell (they discover what’s the right spell through hints given by the previous spirit) for a spirit found, unlocks quests, which are responsible for sending players to the next spirit and touristic site [87]. Apart from giving players new quests, spirits share “their story and the story of the sight they reside at” through the device [87]. Players gain points by finishing quests and using the right spells on each spirit, which improves player’s role as Rex’s assistant [87]. In the end of the experience, players return the device and receive the weblog with all the photos from their tour [87].

Figure 2.10: REXplorer app for Regensburg, Germany [129]. The picture on the upper left shows the device that the users use. The upper right picture shows playability testers enjoying the game of on site Regensburg. The bottom left picture shows a map of the city highlighting the points players must go to (buildings and locations with paranormal activity). The bottom right picture shows the individual souvenir geo-weblog.

2.2.2.6 Geocaching

Geocaching9 is a treasure hunt game that consists of players going to a location, whose coordinates are given by the game, and once on site, look for a hidden geocache [37]. Players need to have GPS-enabled devices to ﬁnd the indicated location [37]. This game promotes contact between players and the locale where geocaches are hidden [134]. Although it ﬁrst started as a

9https://www.geocaching.com/play [Access date: Dec 30, 2019] 22 State of the Art game for explorers and adventurers, Geocaching is now also involved in tourism "special treasure hunt tours” [134] as a way to create new experiences for tourists [28, 39]. In the beginning, Geocaching required knowledge about GPS using, that only the most experienced ones had [39]. These were adventurers, who used it “for outdoor activities such as backpacking and boating” and therefore knew how to use it properly [39]. After some time since the game was created, Jeremy Irish adopted the term geocaching and, using his web developer knowledge, developed a website, consisting of “tools to improve the cache-hunting experience” [39], called Geocaching.com. It was online on September 2, 2000 and ready for players to ﬁnd the, at the time, 75 caches spread worldwide [39].

Figure 2.11: Geocaching treasure hunt game [49] The picture on the left shows a player that found a geocache. The picture in the middle shows the map of the app highlighting geocaches. The picture on the right shows a screen with details for a given geocache.

To receive the coordinates for a geocache, players need to go to the “‘Hide & Seek a Cache’ page”10 and choose a method to look for geocaches [37]. In there, the player can choose to search by address, postal code, coordinates, cache name, search from a map, etc. [40]. This search provides a list with nearby geocaches and all the player has to do is to select one and input the given coordinates of the geocache into the GPS device, which will guide the player to the geocache [37]. Once the players find a geocache they can “sign the logbook”, put it back where it was, for the next geocachers to find it in the same place, share their experiences with their friends and move on to the next geocache [37]. The places where geocaches are hidden are chosen by the geocachers, which means that they can be hidden “all over the world”, either on more accessible sites or on sites which are difficult to reach [37]. There are sixteen different types of geocaches representing different experiences and a “different variation of the game”, which is important to keep players interested in the game [37]. Apart from these geocaches there are also 4 geocache types, which are “geocache types that are still available to find, but no longer available for creation on Geocaching.com” [38], called Grandfa- thered Cache Types. Geocache types are listed in Table 2.4 and Table 2.5.

10https://www.geocaching.com/seek/default.aspx [Access date: Jan 5, 2020] 2.2 Tourism gamiﬁcation and virtualization 23

Table 2.4: Geocache Types. Symbols and names from [38]. Descriptions adapted from [38]

Symbol Name Description Traditional This is the original type of geocache. They consist of a Geocache container at the given coordinates. Smaller ones contain a logbook and larger ones contain also items and trackables. Mystery or This geocache consists of puzzles that the players will ﬁrst Puzzle Caches need to solve to determine the correct coordinates

Multi-Cache This involves more than one location, with the ﬁnal location being a physical container with a logbook inside. Usually when players arrive at a location they get a clue to the location of the next geocache. EarthCache This teaches players about a feature of the Earth. It includes educational notes along with coordinates. To log an EarthCache, players have to answer questions by observing the geological location. Letterbox This uses clues instead of coordinates. It contains a stamp Hybrid that players can use to log their visit.

Event Cache This is a gathering of local geocachers or geocaching organizations. “The Event Cache page speciﬁes a time for the event and provides coordinates to its location. After the event has ended, it is archived”. Cache In Trash This is the “environmental initiative supported by the Out Event geocaching community”. The goal of this initiative is to clean (CITO) up and preserve natural areas. Mega-Event This is an “Event Cache that is attended by 500+ people”. It is Cache held annually and consists of a day of organized activities.

Giga-Event This is like a Mega-Event but is attended by 5000+ people Cache and lasts for more than one day. Since it is a rare event, it attracts geocachers from all around the globe. Wherigo™ This is a “toolset for creating and playing GPS-enabled Cache adventures in the real world”. “Wherigo allows geocachers to interact with physical and virtual elements such as objects or characters while still ﬁnding a physical geocache container”. To play participate in this experience players need a Wherigo-enabled GPS device. Geocaching This is located at Geocaching HQ in Seattle, Washington. HQ Geocache Players interested in visiting HQ to sign the logbook “should make an appointment at least 48 hours in advance”. 24 State of the Art

GPS These are designed to teach people “about GPS technology Adventures and geocaching through interactive science experiences”. Maze Exhibit Lab Caches This is an “experimental and extremely rare geocache type”. These geocaches mean to be the testing phase of new geocache ideas. Geocachers that ﬁnd these are helping to improve geocaching. Geocaching This is used by Geocaching HQ to celebrate ten years HQ Celebration anniversaries of geocaching with “a large event in Seattle, Washington”. Geocaching “Geocaching HQ hosted Block Parties annually between 2011 HQ Block Party and 2015 in Seattle, Washington, outside the Geocaching HQ ofﬁce”. “Geocaching HQ intends to host future Block Parties”. Community This is a “special Event Cache type for community Celebration celebrations”. Event

Table 2.5: Grandfathered Cache Types. Symbols and names from [38]. Descriptions adapted from [38]

Symbol Name Description Virtual Cache This is about “discovering a location rather than a container”. Players must visit the coordinates before logging.

Webcam This is a geocache that uses “web cameras that monitor Cache various areas like parks or business complexes”. “The idea is to get players in front of the camera and save a screen capture from the website where the camera is displayed in order to log a find”. Project A.P.E. This type of geocache was a joint project with “20th Century Cache Fox to support the movie Planet of the Apes”. “Each geocache represented a fictional story in which scientists revealed an Alternative Primate Evolution (A.P.E.)”. Locationless This “could be considered the opposite of a Traditional (Reverse) Cache”. Players locate a specific object and log its Cache coordinates, instead of looking for a hidden box. “New locationless geocaches are now Waymarks”.11

2.2.2.7 Eye Shakespeare

This gamiﬁed mobile app12 was developed by “Stratford upon Avon, the hometown of Shake- speare” [134] as a way to make tourists’ experience there more interesting [104]. The goal of the app was to teach the history of the city to tourists [104]. The technologies used were “augmented reality, QR-code and geo positioning systems” which were used to design virtual images of the historical buildings and sites of the town [104].

12http://www.shakespeare.org.uk/visit-the-houses/eye-shakespeare-app.html [Access date: Dec 30, 2019] 2.2 Tourism gamiﬁcation and virtualization 25

Apart from exploring “both spatially and historically the Shakespeare’s home town”, tourists can also read archives from “the Shakespeare Birthplace Trust’s archives” which were digitised [104]. The app also presents a “3D virtual ‘Shakespeare’” to tourists [104]. This ﬁgure is responsible for providing an audio consisting of Shakespeare’s voice talking about his birthplace, showing tourists the touristic points of interest and allowing “them to take a photo together with this virtual ﬁgure” [134]. This is a different form of a tour guide, which makes it more entertaining for tourists to learn about the city [104]. The game design elements present in this are “reward, storytelling, fun, it provides tourists with fun, interactive, and engaging experiences” [134].

Figure 2.12: Eye Shakespeare app, Stratford Upon Avon [134]. The picture on the left shows a map highlighting some important places from Shakespeare’s life. The picture in the centre shows a screen detailing one of those places. The picture on the right shows the screen where is possible to hear a virtual ﬁgure of Shakespeare talk about his life.

2.2.2.8 TurfHunt Treasure Hunt Game app

TurfHunt Treasure Hunt13 is a mobile treasure hunting game that consists of challenges, which are activated based on players’ location [77]. It was developed by Locatify,14 which is a company “founded in November 2009 in Iceland by Leifur Björn Björnsson and Anna Steinunn Gunnars- dóttir” [52]. The Creator CMS15 is an online system created by this company that is intended to help users develop and publish develop “their own treasure hunt and smartguide applications for smartphones” [52]. The TurfHunt app provides a platform for playing competitive treasure hunt games [77]. The treasure hunts are created in the “Creator CMS by players or game facilitators and can be shared with other groups” [74]. This game is intended for small groups of people, so

13https://play.google.com/store/apps/details?id=com.locatify.treasurehunt [Access date: Jan 12, 2020] 14https://locatify.com/ [Access date: Jan 12, 2020] 15https://locatify.com/creator-cms/ [Access date: Jan 12, 2020] 26 State of the Art that the teams are small and everyone gets to have an equal participation in the game [77]. This app can also be used for creators to test new apps created in “the Locatify Creator CMS prior to upgrading to a branded app”[74], which is an advanced applications that users can build with the Creator CMS [76].

Figure 2.13: TurfHunt Treasure Hunt Game app [75]. The picture on the left shows the map with challenges locations. The picture in the middle shows a list of nearby tours and games. The picture on the right shows the page of a game with a description, the number of locations to visit and the number of challenges.

When users open the app the ﬁrst screen shown consists of a map centred on the player’s coordinates, highlighting nearby active games, and after selecting one, players get the option to join the game and see the challenges they have to complete [77]. For each challenge solved players receive “virtual gold or points” [77]. Players can play the treasure hunts, which are composed of “problem solving and exploration activities, ﬁnding treasures, and playing mini-games”, with other players as teams, making it more competitive, or by themselves [77]. An example of an item that players can use during the game is the “elixir of invisibility which hides the team location from the map for a short time” [77]. The Creator CMS allows the game’s administrator to “invite players, change game play settings, publish games and monitor player activity via the game observer tool” [77]. 2.3 Technologies 27

Figure 2.14: TurfHunt Treasure Hunt Game app [75]. The picture on the left shows a memory challenge example. The picture in the middle shows a match pairs challenge example. The picture on the right shows a scoreboard with the scores and discovered treasures.

2.3 Technologies

In this section, we are analysing the best options for the technologies of the authoring tool and the tourists’ application and making a comparison to select the best ones. After this, we will include an analysis and a comparison of different frameworks to develop a PWA. This will allow us to choose the best technologies for the project.

2.3.1 Mobile technologies

There are two major categories of mobile development: “native development and web-based development” [78]. Native development implies using a given platform’s (e.g. Android, IOS, Mi- crosoft, etc.) tools and programming language to create apps for that platform only [78]. Meaning that if we want to develop an app for different platforms, we have to create it from scratch for each platform using each platform’s tools, which requires more resources than if we use web-based development [78]. This other type of mobile development is used to develop apps for more than one platform at the same time, thanks to web technologies [80, 81, 124]. There are three different approaches to web-based development: “Mobile Web Apps, Hybrid Mobile Apps and PWAs” [78].

2.3.1.1 Native Apps

Native applications are unique for each Operating System (OS) and, therefore, must be developed using the OS’s “programming languages for which they are implemented” [95]. Since native apps are developed for only one platform if a company wants to have it available in more platforms 28 State of the Art that implies an investment in more resources [107]. Another issue is the fact that technology is continuously improving and expanding, meaning that even if a team can develop an app for each OS in the market, new OSs will “continually appear” [107]. Some examples of programming languages and tools speciﬁc to each platform are the following: Xcode and Objective-C/Swift for iOS, Eclipse/Android Studio and Java for Android, Visual Studio and C#/C++ for Windows [95]. Using the OSs’ speciﬁc tools allows apps to “take full advantage of their particular features” [107]. This is the reason why “native apps have better user experience” and high-performance [95].

Pros [14, 62, 95]:

• High performance;

• Access to device hardware;

• Access to all the features provided by the OS;

• More efﬁcient with the device’s resources;

• Use the native device UI, giving users a more optimized user experience;

• Easily distributed in Google/ Apple/ Microsoft App stores;

• Work ofﬂine.

Cons [11, 14, 62, 80, 81, 95, 124]:

• Built for a single platform;

• Expensive to develop;

• Need to be developed from scratch for each platform;

• Formal updates done via app stores;

• High maintenance costs.

2.3.1.2 Mobile Web Apps

According to Loreto et al.[78], “[m]obile Web Apps are websites optimized for mobile use that are accessed in browsers”. These are developed with web technologies, like HTML, CSS or JavaScript, which are “standardized, popular, reasonably simple but powerful and well-supported” and therefore are the right choice for building cross-platform apps [1]. These technologies ensure that all users will have the same user experience (UX) regardless of the platform [81].

Pros [62, 78]:

• No need to customize to a platform or OS, since these are cross-platform;

• Faster development and simpler maintenance than native apps;

• Reduced development cost; 2.3 Technologies 29

• Updates are done immediately;

• No installation needed.

Cons [36, 62, 78]:

• Low performance;

• Do not have access to the native features of the devices;

• Cannot be marketed in distribution stores;

• Won’t completely work ofﬂine;

• Dependent on internet speed;

• Have some difﬁculties dealing with heavy graphics;

• Entirely dependent on the browser used on the device.

2.3.1.3 Hybrid Apps

On their study, Serrano et al.[107] deﬁne hybrid apps as “mobile Web applications wrapped into a native app”, which makes them available for distribution in any platform [95]. Hybrid apps are similar to native apps since they need to be downloaded and installed from app stores [107]. They can’t use all features of the OS, but because they “run inside a 3rd party native app container”, these apps gain access to some of those features [107]. Hybrid apps are developed like web apps, using web technologies [62]. To develop hybrid apps there are several frameworks, like PhoneGap, Cordova, Ionic, etc. [62, 96]. These frameworks facilitate developers’ work, by providing the needed tools to build a “cross-platform web-based mobile app by providing (i) a native wrapper for containing the web-based code, and (ii) a generic JavaScript API that bridges all the service requests from the web-based code to the corresponding platform API” [81]. A hybrid app is a combination of a native app and a web app, taking advantage of some of the best characteristics of each: the great UX of native apps and works in multiple platforms like web apps [2]. One downside referred by Ivano Malavolta [81] is that “hybrid mobile apps can access the platform APIs only via the JavaScript bridge provided by the hybrid development framework, which considers only a subset of all the possible APIs provided by each platform; moreover, the existence of the JavaScript bridge imposes an additional performance overhead when accessing platform APIs”.

Pros [81, 96]:

• Easily developed;

• Single app for all platforms;

• Much cheaper than a native app;

• Faster to develop and to upgrade than native apps; 30 State of the Art

• Can usually access most of the device’ utilities using an API;

• The user experience is the same for all platforms;

• Easier maintenance than native apps.

Cons [36, 96]:

• Longer time to download than native apps;

• Might lack in power and speed;

• More expensive than web apps;

• Less interactive than native apps;

• Worse performance than native apps;

• Cannot access all functionalities of the device;

• Developers need to take into consideration platforms speciﬁcities when developing the app;

• Consumes more phone resources than native apps.

2.3.1.4 Progressive Web Apps

The term ‘Progressive Web Apps’ was proposed by Russel and Berriman in 2015 [101]. PWAs are “enhanced Mobile Web Apps” capable of running on “any mobile device or computer, which neither native apps or hybrid apps can” [78]. There are three requirements for a mobile web app to be considered a PWA, which are: “(i) it is served over HTTPS (this is a requirement for avoiding man-in-the-middle attacks), (ii) it comes with a web app manifest declaring app metadata like its name, icons, base URL, and (iii) it uses service workers, a set of APIs for allowing developers for programmatically caching and preloading assets and data, managing push notifications, etc.” [81]. PWAs are defined by a set of concepts and keywords including reliable, fast, engaging, progressive, responsive, connectivity independent, app-like, fresh, safe, discoverable, re-engageable, installable, and linkable [43, 93]. They run in browsers like web apps, but support other features, such as the possibility of being “installed and distributed without app marketplaces, work without Internet connectivity, receive push notifications and look like regular apps” [8]. This type of apps can be seen as an improvement of web apps and “an alternative to hybrid apps” [78].

Pros [8, 78, 80, 81]:

• Possibility of adding to home screen;

• Renders immediately;

• Much smaller than a regular app;

• Push notiﬁcations; 2.3 Technologies 31

• Can be installed and distributed without app marketplace;

• Can also be published on app stores if the developer wants;

• Ofﬂine support;

• Updated automatically;

• Safe and secure since only HTTPS is used;

• Reliable even with bad network conditions;

• Fast;

• Engaging;

• Responsive, as they can adjust to the desktop or any mobile device.

Cons [36, 80]:

• The apps depend on the browser used, since its supported APIs inﬂuence the access to the device features;

• No access from service workers to functionalities like contacts, calendar or alarm;

2.3.1.5 Technologies Comparison

One of the main technical requirements for the system to be developed is the possibility of using the apps on multiple devices including not only mobile devices (eg: tablets, smartphones, etc.) but also desktop devices. Another requirement is that the system should be able to receive updates without the need to be re-installed. Table 2.6 presents a comparison between native apps, web apps, hybrid apps and PWAs. 32 State of the Art

Table 2.6: Native, Web, Hybrid and PWA comparison based on key-features. Adapted from [8]

Feature Native Web Hybrid PWA Installable Yes No Yes Yes Cross-platform No Yes Yes Yes Cross-platform (including desktop) No Yes No Yes Development Costs High Low Medium Low Development speed Slow Fast Medium Fast Maintenance costs High Low Medium Low Testable before installation No Yes No Yes App stores availability Yes No Yes Limited Push notiﬁcations Yes No Yes Yes Ofﬂine support Yes No Yes Yes Hardware and platform API access Yes No Limited Limited Background synchronisation Yes No Yes Yes Size Big Small Medium Very Small Performance Excellent Bad Medium Very Good User experience Excellent Bad Medium Very Good Reliable even with bad networks Yes No No Yes Depends on a browser No Yes No Yes Updates automatically No Yes/No Yes Yes

In terms of development and maintenance costs/speed, both web apps and PWA have lower costs and higher development speed, while native has high costs and hybrid are in the middle. Only web apps and PWAs are cross-platform, including on desktops. All but web apps can be published on app stores, although PWAs still have two minor limitations entering the Apple Store. Apart from the yearly fee we need to pay to have an app listed in the iOS app store, Apple doesn’t let web apps declare native capabilities (like using the GPS, the camera, playing background audio, etc.) [54]. We need to use plugins to do these tasks, while on Android, we don’t need them [54]. The fact that PWAs don’t need to be on app stores to be distributed and installed is an advantage since it means there will be neither restrictions imposed by the app stores nor fees on their behalf. Native, hybrid and PWAs work offline. Native apps have full access to devices’ hardware features, while hybrid apps depend on the APIs used and PWAs depend on the APIs used by the browsers used to access the app. Native apps need to be updated on the app store. Hybrid apps updates are automatic if they are relative to the web part of the app, if the update refers to the native part, then it needs to be updated on the app store like a native app. Web apps and PWAs receive the updates automatically, as long as they have an internet connection. PWAs size is the smallest, followed by web apps, hybrid apps and finally native apps, which are the biggest. Regarding performance and UX, native apps are the best, followed by PWAs which are almost as good as native, and hybrid 2.3 Technologies 33 apps which are not as good in terms of performance/UX, but still better than web apps. Taking this comparison into consideration and considering the two main requirements referred to before, a PWA is the best solution to develop this project’s system. It is a cross-platform solution, low-cost, fast to develop, that works offline, receives updates automatically once connected to the Internet, has a small size and is almost as good as a native app in terms of performance and UX. A PWA will allow both the users of the authoring tool app and the tourists’ application to use any device (both mobile and desktop) to run them. This is a major advantage since we can develop only one app that can be used by anyone that has access to the Internet to download it, instead of having to develop multiple apps, one for each type of device and OS. It also has fast a loading time when starting and we can push updates to the apps without requesting to the users to re-install them. The possibility of working offline is useful when the Internet connection is poor. This allows users to use all the apps’ functionalities that don’t require Internet access and once there is an Internet connection available the apps will send the users’ work to the server.

2.3.2 Progressive Web Apps Frameworks/Libraries

There are a few frameworks/libraries available that can be used to develop PWAs. We will be describing and comparing the ones that are considered the best for this purpose.

2.3.2.1 React

React16 is one of the most popular frameworks/libraries for web apps [34]. Unlike the others mentioned in this section, React is a “JavaScript library for building user interfaces”, not a framework [29]. Facebook created React and makes its maintenance, releasing updates and ﬁxing issues [29, 31]. The programming language used is JavaScript, which is a popular web development language [29]. A new version of React was released by Facebook, called React Native,17 that was meant to build hybrid apps [34]. React Native allows developers to use React to create cross- platform native apps for Android and IOS [30]. “React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript” [30], meaning that the app adapts to the platform where is running, to deliver the best user experience using each platform’s speciﬁc functionalities [34].

2.3.2.2 Angular

Angular,18 which was initially known as AngularJs, gained a boost in popularity with the entrance of Google [34]. The initial version used JavaScript as a programming language for web development, but with the update to Angular 2, its programming language become TypeScript, a scripting language developed by Microsoft [34]. “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” [86]. This language combines the usage of a dynamically typed language like

16https://reactjs.org/ [Access date: Dec 10, 2019] 17https://facebook.github.io/react-native/ [Access date: Jan 23, 2020] 18https://angular.io/ [Access date: Dec 10, 2019] 34 State of the Art

JavaScript with static typing (used in programming languages like C, Java, etc.) [34, 86]. Angular is a framework used to build cross-platform applications for any device [45].

2.3.2.3 Vuejs

Vue.js19 is a “progressive framework” [127] that uses JavaScript to develop front-end web apps [34]. It was developed by combining the good aspects of frameworks like React and Angular [34]. This framework can be “integrated with other libraries or existing projects” or be used to create “Single-Page Applications when used in combination with modern tooling and supporting libraries” [127]. It is focused on “declarative rendering and visual components creation” [34]. “Advanced resources, necessary for complex apps, like location, state management and development tools are provided by libraries ofﬁcially maintained by the Vuejs team” [34].

2.3.2.4 Ionic

Ionic20 framework is meant to be used with the aforementioned frameworks. It is “an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies” [60]. This framework’s goals are to run on every platform, deliver a stable API, provide beautiful design and simplify developers work [60]. The main focus is placed on “frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations)” [60]. It can already be used with Angular or React, while Vue integration is still being made [60]. Although, it can also be “used standalone without a frontend framework using a simple script include” [60]. The minor downside of Ionic lies in the fact that the backend services they provide are not free. Meaning that developers have to implement these by themselves.

2.3.2.5 Frameworks’ comparison

Ionic Framework can already be used with Angular or React and is on its way to being available for Vue. The main advantage we have with using Ionic as the platform to develop the PWA is that it allows us to combine the main features of one of the other three frameworks (React, Angular or Vue) and the frontend user experience quality that Ionic provides. It is prepared to develop PWAs using, for instance, Angular Service Workers (in case Angular is the chosen framework). The main doubt lies on which of those 3 frameworks is the best to combine with Ionic. The angular framework is the most complete one, as it has all the tools necessary to “build a complete web application” and therefore, no external libraries are needed [102]. Vue is a framework, but with only some of the features provided by Angular, which makes it lightweight as a library. React is a JavaScript library used to “build reusable UI elements” [102]. Building an application using React requires external libraries for functions like routing [83]. In Figure 2.15, we present a comparison between React, Angular and Vue with some of the characteristics of these frameworks.

19https://vuejs.org/ [Access date: Dec 10, 2019] 20https://ionicframework.com/ [Access date: Dec 10, 2019] 2.3 Technologies 35

Figure 2.15: Detailed comparison of Vue, Angular and React [102]

Size

The Angular framework is the one that has the largest size (500+ Kilobytes (KB)), followed by React (100KB) and Vue (80KB) [83]. Even though the difference between Angular and the other two seems big, Angular size is around four times smaller than the average web page size (2+ Megabytes (MB) in 2018) [20]. Angular’s large size is due to being a complete framework, with all the tools necessary “from templates to testing utilities” [83]. Since React is a library its size is smaller, making it “suitable for light-weight applications” [83]. Vue is the smallest of these three, which makes it “extremely suitable for the development of lightweight applications” [83].

Learning

Angular is considered to be the hardest to learn [83]. Since it is a complete solution, developers need to learn many concepts inherent to the framework, like the architecture to implement either as Model-view-controller (MVC) or Model-view-viewmodel (MVVM) [83]. Also, Angular is 36 State of the Art developed using TypeScript instead of JavaScript, which developers need to learn before start working with Angular [83]. All of this learning may be seen as a downside in the beginning, but ultimately it will be beneficial for developers to have such a profound knowledge on how the whole process of developing a complete application works [83]. React relies on external libraries for more complex features, which means that there are fewer concepts to learn to work with React making it easier to start with [83]. Vue is the easiest to learn from the three [83]. Developers that already know React or Angular won’t have many difficulties in learning Vue, given that it is very flexible and has similarities with them. Vue flexibility can also be seen as a downside, since “it allows poor code, making it difficult to debug and test” [83].

DOM and performance

When developers are creating a user interface (UI) and make changes to this UI, these reflect on the Document Object Model (DOM). “The W3C Document Object Model DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document” [128]. In the beginning, we only had real DOM. Then with React came the virtual DOM. And at the start of 2020 Angular will release the version Angular 9 and with it a stable version of Ivy. This is “the code name for Angular’s next-generation compilation and rendering pipeline” [44]. The goal of Ivy is to make “Angular applications smaller, faster and simpler” [3], by using the new iterative DOM [44]. This new version of the DOM allows projects to have a “smaller bundle size and low memory footprint” [69]. The type of DOM influences the performance of the application [83]. React uses virtual DOM, which is a lightweight and not browser-specific solution that provides a much better performance compared to real DOM [83]. Vue followed React and also uses virtual DOM to have a “faster and bug-free performance” [83].

Components

All of these frameworks are based on components [20]. These allow developers to reuse blocks of code more easily [20]. “A component generally gets an input, and changes behaviour based on it”, which reﬂects a change in the UI [20]. For example, a component can be a search box on a library website. In Angular, components are a subclass of directives, which allow developers to “attach custom behavior to elements in the DOM” [45]. Angular, contrary to React, makes a division between the “UI part of components as attributes of HTML tags, and their behaviours in the form of JavaScript code” [20]. React has both parts integrated into the same block of code [20]. Vue uses React approach with UI and behaviour integrated into components [20]. Vue also “allows developers to use pre-processors, rather than CSS” [20].

Flexibility

In terms of flexibility, Angular is the least flexible of the three [83]. The reason behind it is because it offers all the tools necessary “from routing to templates” [83]. Developers have everything they need to develop a complete application with the package provided by Angular, including a suggested structure for the app [20]. React, however, gives developers the flexibility 2.4 Summary 37 and “liberty to choose programming tools of their choice” [83]. They need to use third-party solutions to have features like routing, office management tasks and others [83]. Vue is in between the other two [83]. It is also not much opinionated like React, but it provides developers with some solutions on their website to incorporate in the application, allowing them to use features that are not integrated into the framework [83]. Vue also facilitates a “server-side render to initiate the server-side development of an application” [83].

Conclusion

In conclusion, the major drawback of Angular is the steep learning curve, but that is compen- sated by offering all the tools in its package (so that we don’t need to look for third-party alternatives) and already optimized architecture. Angular has an MVVM architectural setup, which eases the separation of the project responsibilities (the UI, the data logic and the interaction between those two). Before the release of Angular 9, Angular versions used the real DOM, which made it bigger and slower than React or Vue. But now Angular applications can compete with those other two frameworks/libraries in terms of application performance. Based on these comparisons made and considering the characteristics of the project, the framework chosen to complement Ionic is Angular.

2.4 Summary

This chapter meant to present the background of the areas related to the project as well as the state of the art of the technologies that can be used to create the solution. We reviewed the presence of digital media in tourism, smart tourism and some applications of digital media on touristic places. We highlighted the importance of applying technology in tourism to create value either for tourism organizations as for tourists. Then, we reviewed what tourism gamification is, and what are its benefits and disadvantages. We also presented some examples of gamified tourism apps with different gamification strategies. Finally, we reviewed the technologies that can be used to develop a mobile application, detailing each one and providing their pros and cons. Based on this, we made the comparison and decided to choose to develop PWAs. The same was done for the technologies to develop a PWA. The decision was made on combining Ionic with Angular and taking advantage of both strengths. This page was intentionally left mostly blank. Chapter 3

Related work

This chapter contains a brief analysis of case studies related to our work. For each case study, we detail its area, a brief description of the article’s content, similarities to our work, the technologies used and aspects that can be included in our project.

3.1 Location-Based Tour Guides

3.1.1 Personalized and location-based mobile tourism services (CRUMPET project)

Area of the case study

Personalized and location-based mobile tourism services.

Brief Description of the article

In this paper [105], the authors present the creation of a system to “implement, trial and validate personalized, nomadic services for tourism, using agent technology for fast creation of robust, scalable and seamlessly accessible nomadic services”. CRUMPET (Creation of User-friendly Mobile Services Personalised for Tourism) makes use of users’ interests and current position and also acts as a service mediator.

Similarities to our work

• Directed to tourism;

• Provides personalized location-based services;

• Allows the creation of tour routes.

Technologies used

There are no speciﬁed technologies.

39 40 Related work

Aspects that can be included in our project

• Makes use of users’ position in physical space;

• Uses both coordinates and topological position of a user to provide LBS;

• Provides personalized tour routes;

• Gives indications of nearby points of interest.

3.1.2 Web mobile application with new generation inputs

Area of the case study

Web mobile app in the area of culture to provide a list of cultural points of interest to tourists.

Brief Description of the article

In this dissertation [82], the author makes a study about the different types of mobile devices inputs (GPS, accelerometer, etc.) and their use in a Web mobile context. Thus, a culture-related Web mobile app was developed that, using inputs like GPS, accelerometer and gyroscope, intended to provide the user with a list of cultural points of interest based on the user’s location.

Similarities to our work

• Development of a web mobile app with the intent to provide lists with cultural points of interest;

• Makes use of inputs, more speciﬁcally GPS to provide location-based services.

Technologies used

• Web technologies: HTML5, CSS (1-3), JavaScript, PHP and MySQL;

• API W3C technologies: GeoLocation, DeviceOrientationEvent and XmlHttpRequest;

• External API technology: Google Maps JavaScript V3.

Aspects that can be included in our project

• Provides a list of cultural points of interest based on users’ location;

• Gives simple navigation instructions to the user, removing the need of the user being constantly looking at the device. 3.1 Location-Based Tour Guides 41

3.1.3 Survey on intelligent personalized mobile tour guides and a use case walking tour app

Area of the case study

Mobile tour guide.

Brief Description of the article

In this paper [66], the authors developed a digital tour guide application for Android devices to “assist users with guidance to predeﬁned or user deﬁned points of interest and routes”. This application “uses the user’s preferences and internet technologies to guide them to their chosen destinations while providing information about them”.

Similarities to our work

• Displays a list of nearby cultural interest points;

• Gives the possibility to the user to navigate to one of these points and view information about them;

• Allows the creation of tour routes.

Technologies used

Google API.

Aspects that can be included in our project

Provides “users with directions to points or routes based on their geographical position while providing information in text, photo and video format” [66].

3.1.4 Tour-Guide: providing location-based tourist information on mobile phones

Area of the case study

Mobile tour guide.

Brief Description of the article

In this paper [108], the authors detail the development of a location-based iPhone application, “designed to provide tour information services; therefore people can get tour guidance information that they need anytime and anywhere”. 42 Related work

Similarities to our work

• Delivers location-dependent information, like, for example, a list with attractions near the user’s current position;

• Provides navigation instructions in a simple way.

Technologies used

• Objective-C;

• Server technologies: C# with .NET, a database managed by MySQL 5.0.

Aspects that can be included in our project

• Reduces battery consumption by only updating the user’s location when a location-based service is used;

• The design of an easy to use UI while providing the best UX.

3.1.5 Urbis: a touristic virtual guide

Area of the case study

Mobile tour guide.

Brief Description of the article

In this paper [21], the authors propose the “Urbis prototype, an application that aims to help tourists to know better the cities they’re visiting, even in the absence of local information or a specialized tour guide”. Users can add points of interest, create touristic routes, see details about a point of interest, and “perform a number of actions, e.g. call tourist spot, navigate to it or know a little more of its history”.

Similarities to our work

• Allows the user to have a list of routes and points of interest;

• The user may follow a route’s path or get directions to a given point of interest.

Technologies used

Google Maps API. 3.1 Location-Based Tour Guides 43

Aspects that can be included in our project

Gives the users the option to save points of interest.

3.1.6 VISIT: Virtual Intelligent System for Informing Tourists

Area of the case study

Context-aware mobile tour guide with recommendation system.

Brief Description of the article

In this study [85], the authors developed a system — VISIT (Virtual Intelligent System for In- forming Tourists) — which is “a mobile application that will use various types of context such as location, time, weather and most importantly the current user” to deliver a personalized tour guide with attractions from the city where the user is located.

Similarities to our work

• Gives a tour guide consisting of touristic points of interest to users;

• Retrieves users’ current position using location sensors.

Technologies used

• Android Development Kit;

• XML.

Aspects that can be included in our project

Uses the context around the user and not just the user’s location, allowing the application to suggest points of interest that are for instance close to the user, open at a certain time, indoor/ outdoor based on weather conditions, etc.

3.1.7 A personal tourism navigation system to support travelling multiple destinations with time restrictions

Area of the case study

Personal navigation system for tourists. 44 Related work

Brief Description of the article

This paper [84], proposes “a personal navigation system (called PNS) which navigates a tourist through multiple destinations efﬁciently”. The system uses a genetic algorithm to efﬁciently calculate routes using users’ “desired arrival/stay time and preference degree”.

Similarities to our work

The developed system is used to create routes for tourists.

Technologies used

Server-side as Java Servlet.

Aspects that can be included in our project

Using a client-server approach having the map on the server and client sending requests and downloading the route information.

3.1.8 Development and Application of Intelligent Tour Guide System in Mobile Terminal

Area of the case study

Intelligent mobile tour guide system.

Brief Description of the article

In this paper [72], the authors “elaborate the design and development process of the intelligent tour guide system based on android mobile terminal”.

Similarities to our work

• Uses real-time positioning services;

• Provides routes for tourists.

Technologies used

The server software used was TCP Server.

Aspects that can be included in our project

Uses spatial context to provide optimal tour routes. 3.1 Location-Based Tour Guides 45

3.1.9 The city as a learning gamiﬁed platform

Area of the case study

Learning-gamiﬁed platform based on touristic points of interest.

Brief Description of the article

In this paper [47], the authors developed a mobile application to demonstrate their model, which was “conceived as a way to encourage [end users] to create their own educational tours, in which Learning Points Of Interest are set up to be discovered”.

Similarities to our work

Provides tourism tours based on users’ location and points of interest.

Technologies used

There are no technologies speciﬁed.

Aspects that can be included in our project

• Adding a learning component to the tours;

• Implementing gamiﬁcation in the experiences.

3.1.10 Uniﬁed Context-Aware Augmented Reality Application Framework for User- Driven Tour Guides

Area of the case study

Mobile tour guide with augmented reality and context-awareness.

Brief Description of the article

In this paper [109], the authors “propose a uniﬁed context-aware augmented reality application framework that supports intelligent guidance and enables users to participate in content generation in museum guidance”.

Similarities to our work

Provides a mobile tour guide to tourists. 46 Related work

Technologies used

• OpenCV to process images and OpenGL ES to render contents;

• Content server implemented with MySQL and Open Scene Graph (OSG);

• Context-aware mobile AR (CAMAR).

Aspects that can be included in our project

• Makes use of context-awareness to provide guidance to tourists;

• Showing the guide with a component of augmented reality;

• Involves tourists in the process of value-creation for the guide.

3.1.11 Smart Booklet: Tour guide system with mobile augmented reality

Area of the case study

Mobile tour guide with augmented reality.

Brief Description of the article

In this paper [18], the authors “present a mobile tour guide system with augmented reality, called Smart Booklet. The system enables tourists to have more informative, interactive and user-speciﬁc experiences with augmented information by recognizing/ tracking the contents of an off-line tour booklet”.

Similarities to our work

Uses GPS to give users the optimal tour path and suggests attractions near the user’s current position.

Technologies used

There are no technologies speciﬁed.

Aspects that can be included in our project

The application of augmented reality to display touristic points of interest on users’ mobile phones. 3.1 Location-Based Tour Guides 47

3.1.12 Design and Evaluation of Intelligent Tourist Guide System Based on Mobile Devices

Area of the case study

Intelligent mobile tourist guide system.

Brief Description of the article

In this paper [135], the author “presents the design and evaluation of an intelligent tourist guide system that runs on Android tablets with GPS feature”.

Similarities to our work

• Provides a location-aware tour guide;

• Gives navigation instructions to take tourists to touristic attractions.

Technologies used

The “development kit Positioning SDK from Baidu” [135].

Aspects that can be included in our project

• Gives information about each attraction;

• Includes intelligent path planning;

• Uses a routing algorithm to calculate the shortest path for the routes;

• The design of a user interface with multiple modes adapted to tourists’ age;

• The evaluation of the system using tourists’ opinions through questionnaires that adopt the System Usability Scale (SUS) for system usability [13].

3.1.13 Tourism for all: a mobile application to assist visually impaired users in enjoying tourist services

Area of the case study

Gamiﬁed mobile application to assist visually impaired users in enjoying tourist services.

Brief Description of the article

In this paper [17], the authors present a “mobile application designed in collaboration with an association devoted to facilitating the enjoyment of tourist services by visually impaired people 48 Related work

(including low vision and blind users)” that contains gamiﬁcation components as well as recommendation strategies.

Similarities to our work

Mobile application using location to show a list of touristic POIs to tourists.

Technologies used

• Apache Cordova using web technologies (like HTML5, CSS3 and Javascript);

• For the server they used Slim, a PHP framework;

• For the database they used MySQL.

Aspects that can be included in our project

Apply gamiﬁcation strategies as a way to motivate users to give their “feedback and comments about the experienced services” [17].

3.2 Location-Based Games

3.2.1 Location based transmedia storytelling: enhancing the tourism experience

Area of the case study

Location-based transmedia storytelling.

Brief Description of the article

In this thesis [32], the author makes a study about “the impact of the use of location based transmedia storytelling techniques in tourism, particularly the advantages, disadvantages and to identify the best practices”. Apart from analysing case studies related to the area of this thesis, a project was developed to collect further data. The project — TravelPlot Porto — consisted of a mobile application, a website, social networks presence, a printed map and live events and provided a treasure hunt location-based game to tourists while presenting them a story.

Similarities to our work

TravelPlot Porto provides tourists with a location-based game that takes them through various points of interest.

Technologies used

Data collection tools (Google Analytics, Facebook Analytics, etc.). 3.2 Location-Based Games 49

Aspects that can be included in our project

Applying gamiﬁcation components to tourists experiences.

3.2.2 Effects of integrating a mobile game-based learning framework in a cultural tourism setting

Area of the case study

Mobile game-based tourism system.

Brief Description of the article

In this paper [79], the authors propose a “mobile game-based tourism system called the Walk Rally application”. This application has the goal of understanding the relation between mobile gaming and tourists’ involvement with cultural experiences.

Similarities to our work

Displays routes, that connect multiple points of interest, on web-based and mobile platforms.

Technologies used

• AngularJS Ionic and Bootstrap web application frameworks;

• Baidu for services like geo-coding, routing, etc..

Aspects that can be included in our project

• Applies the agile software development process;

• Shows a map on tourists’ app highlighting the route.

3.2.3 Narrative design for Rediscovering Daereungwon: A location-based augmented reality game

Area of the case study

Location-based Augmented Reality (AR) mobile game. 50 Related work

Brief Description of the article

In this paper [110], the authors analyse “Rediscovering Daereungwon[, which] is a location-based Augmented Reality (AR) mobile game application that aims to enrich the experience of navigating Daereungwon, a Korean cultural heritage site and guide tourists”. This application is used to “guide tourists through Daereungwon, while game challenges and rewards in the form of augmented objects and interactions provide them with information on the POIs and the site of Daere- ungwon as a whole”.

Similarities to our work

Provides on-site experiences for tourists that connect different points of interest using GPS.

Technologies used

There are no speciﬁed technologies.

Aspects that can be included in our project

• Includes augmented reality to show points of interest to tourists;

• Applies gamiﬁcation to the experiences;

3.2.4 The Pokémon GO experience: a location-based Augmented Reality mobile game goes mainstream

Area of the case study

Location-based augmented reality mobile game.

Brief Description of the article

In this paper [94], the authors analyse Pokémon GO (2016) which is a “location-based augmented reality mobile game based on the Pokémon franchise”.

Similarities to our work

Pokémon Go is a location-based mobile game which is similar to our work in a way that they’re both location-based applications.

Technologies used

There are no speciﬁed technologies. 3.3 Authoring Tools for Location-Based Applications 51

Aspects that can be included in our project

• Applies gamiﬁcation to the experiences;

• Includes augmented reality.

3.3 Authoring Tools for Location-Based Applications

3.3.1 An Authoring tool for location-based mobile games with Augmented Reality features

Area of the case study

An authoring tool for location-based mobile games with augmented reality.

Brief Description of the article

In this paper [90], the authors describe an “authoring tool for building location-based mobile games, enhanced with augmented reality capabilities”. This is a web-based application that is meant to be used by any user, even if they don’t have programming experience, to “design, build and run location-based mobile games”.

Similarities to our work

This project consists of an authoring tool for location-based mobile games.

Technologies used

• JSON to transmit data between the web application and the server;

• Google Cloud Messaging (GCM) to send notiﬁcation data from the server to the web application during a multiplayer game;

• LibGDX to render AR objects.

Aspects that can be included in our project

Applies gamiﬁcation to the experiences, possibly with AR. 52 Related work

3.3.2 Designing ActionTrack: a state-of-the-art authoring tool for location-based games and other activities

Area of the case study

An authoring tool for location-based games and other activities.

Brief Description of the article

In this paper [56], the authors present an authoring tool for “creating and running location-based activities” that can be used by non-programmers. The routes created with this tool “can include outdoor (GPS), indoor (QR), or location independent checkpoints, where the users get tasks, questions, information, or entertainment through their smartphones or tablets”.

Similarities to our work

It is a web-based authoring tool to create location-based activities/ games consisting of routes connecting checkpoints.

Technologies used

There are no speciﬁed technologies.

Aspects that can be included in our project

• Provides guiding and routing using text clues, photographic clues, Google or Apple Maps, cartoon mapping or a guiding arrow showing the direction and the distance to the next point of interest;

• Gives tasks/ challenges to tourists when they reach a point of interest.

3.3.3 Beaconing: Breaking Educational Barriers with Contextualised, Pervasive and Gameful Learning

Area of the case study

An authoring tool to build gamiﬁed lesson plans, mini-games or location-based experiences.

Brief Description of the article

This project1 [6] “co-funded by the Horizon 2020 Framework Programme of the European Union” was created with the purpose of allowing teachers to design gamiﬁed lesson plans, mini-games and

1https://beaconing.eu/ [Access date: Dec 27, 2019] 3.3 Authoring Tools for Location-Based Applications 53 location-based games. The teachers have access to an online authoring tool where they can create different activities and then make them available for students [7].

Similarities to our work

It is an authoring tool that offers the possibility of creating location-based experiences.

Technologies used

• PHP (Laravel);

• HTML (Blade);

• CSS;

• Apache Web Server;

• MySQL/Postgres/SQLite/SQL Server

• Bootstrap;

• JQuery;

• JSON;

• XML.

Aspects that can be included in our project

• Applies gamiﬁcation to the experiences;

• Uses drag and drop to create location-based experiences;

• Creates and edit minigames;

• Creates missions and quests;

• Uses nodes to create the routes.

3.3.4 Locatify’s Creator CMS

Area of the case study

An authoring tool to create location-based tours and games. 54 Related work

Brief Description of the article

This application2 [76] is a “user-friendly content management system to make and publish [users’] content on Smart Devices. It is a web-based design tool suitable for amateur and professional designers alike”, that allows users to create “guided tours and treasure hunt games”.

Similarities to our work

It is an authoring tool that gives users the possibility to design location-based experiences that involve routes.

Technologies used

There are no technologies speciﬁed.

Aspects that can be included in our project

• Applies gamiﬁcation to the experiences;

• Shows the map to the creator to ease the selection of points of interest for a route.

3.4 Discussion

By comparing the analysed projects we can distinguish between different types of approaches. The systems found in Schmidt-Belz et al. [105], Marinho [82], Kountouris et al. [66], Shi et al. [108], Farias et al. [21], Meehan et al. [85], Maruyama et al. [84], Li et al. [72], Gordillo et al. [47], Shin et al. [109], Choi et al. [18], Yu [135] and Ceccarini et al. [17] provide location-based tour guides, which consist of routes connecting cultural points of interest with information about each of these points being shown to the user. The systems in Kountouris et al. [66], Shi et al. [108] and Farias et al. [21] are the most basic, since they provide the tour routes and tour information services based only on the user location. These use the user’s location to create tour routes and give the user tour information services near that location. Schmidt-Belz et al. [105] system introduces user interests as a factor; Meehan et al. [85] system uses different types of context; Maruyama et al. [84] system takes into account the user time restrictions; Li et al. [72] system uses spatial context to optimize routes; Yu [135] system optimizes the distance. The latter ﬁve systems provide more personalized services than the formerly mentioned, by taking into account more factors or types of context to make better predictions of what might be better for users. Using more factors, like the user interests, the time of the day, weather conditions, user time restrictions or spatial context, the systems can optimize tour routes to have the shortest paths or select points of interest that are more appealing to the users.

2https://locatify.com/creator-cms/ [Access date: Dec 27, 2019] 3.4 Discussion 55

Unlike all the others, Marinho’s [82] system tries a different approach for guiding users to points of interest: it resorts to different types of input (e.g. GPS, gyroscope and accelerometer) to prevent users from being distracted by looking at the navigation instructions on the device instead of the surrounding environment. This is a good approach to make users engage with the environment around them, which is the purpose of tour guides. Gordillo et al. [47] system added a learning component to the tour guides, which is a point in its favor since it educates users while taking tour routes – this feature doesn’t exist in any of the other analyzed projects. The tour guides created in this system consist of learning experiences focused on learning points of interest and can be supervised by a teacher or performed without supervision. Shin et al. [109] and Choi et al. [18] systems feature augmented reality, which may help users understand the tour guides. The tour guides provided by these systems use augmented reality to display information about the touristic points of interest in users’ devices, which would create informational screens on the locations of the points of interest and help users locate them in the surrounding environment. Ceccarini et al. [17] system introduced a gamiﬁcation component as a way to increase the interest in the tour guide, and Ferreira [32], Lumpoon et al. [79], Shin et al. [110] and Paavi- lainen et al. [94] systems provide location-based games. Lumpoon et al. [79] system is the most basic of the location-based games analyzed. Ferreira’s [32] system adds a transmedia storytelling component that helps to make the users immerse in the tour routes and the environment around them. Shin et al. [110] and Paavilainen et al. [94] systems added an augmented reality component, which increases the attraction of these games. Noleto et al. [90], Holm et al. [56], Beaconing [6] and Locatify’s Creator CMS [76] systems provide authoring tools for location-based applications. Holm et al. [56] and Locatify’s Creator CMS [76] systems are the most basic of these. Noleto et al. [90] system adds an augmented reality component to the location-based games that users can create, while Beaconing [6] system adds an educational component to the location-based experiences that users can create. By adding the augmented reality component, Noleto et al. [90] allow users to create location-based games that have a different way to visualize the experiences created, as the content of the experience will appear as part of the surrounding environment. Instead of having the guides with plain maps, users can see real world representations in tour guides. With the educational component, Beaconing [6] allows the users of the authoring tool to include educational activities in the experiences created. In our project users may create educational experiences by setting educational content on the activities of the experiences. Augmented reality is a feature that would need to be analyzed in the future to verify if it would be beneﬁcial to include or not in our project. 56 Related work

Table 3.1: Approaches used in each of the case studies presented

Study/ Project Approach Schmidt-Belz A system to provide personalized services to tourists. It takes the user et al. [105] interests and location to suggest services nearby to the user. Marinho [82] A system to guide the user to different cultural points of interest near the user location and provide location-based services. It uses different types of inputs to help the user arrive at a point of interest, with the goal of not attracting too much of the user attention to the device. Kountouris et al. A system to create a tour route and guide the user to different cultural points of [66] interest, while providing information of each place. Shi et al. [108] A system to provide tour information services to users based on their location. Farias et al. [21] A system that allows users to create touristic routes and get information about points of interest or even get navigation directions to them. Meehan et al. A system that uses different types of context to provide personalized tour routes [85] to users. Maruyama et al. A system to create touristic routes based on the time restrictions of the user. [84] Li et al. [72] A system to create touristic routes that uses spatial context to optimize the routes. Gordillo et al. A system that adds a learning component to touristic routes created to educate [47] users while visiting points of interest. Shin et al. [109] A system that uses augmented reality to show a tour guide while using context-awareness to provide navigation directions to users and allows them to generate content for the guide. Choi et al. [18] A system that uses augmented reality to display tour guides and GPS to ﬁnd the optimal tour paths and make suggestions of points of interest near the user location. Yu [135] A system that provides touristic routes planned to be the shortest paths. It also gives navigation directions to the points of interest. The user interface of the system adapts to tourists’ age. Ceccarini et al. A system to provide a list of touristic points of interest, designed for visually [17] impaired people, that uses gamiﬁcation components. Ferreira [32] A system that provides users a location-based game with transmedia storytelling and takes them through points of interest. Lumpoon et al. A system that provides game-based tourism experiences with routes that [79] connect cultural points of interest. Shin et al. [110] A system that provides a tour guide with game challenges and augmented reality to give users information about the visited points of interest. Paavilainen et al. A system that provides a location-based augmented reality game. [94] 3.5 Summary 57

Noleto et al. [90] A system that consists of an authoring tool to create location-based mobile games with augmented reality components. Holm et al. [56] A system that consists of an authoring tool to create location-based activities or games that consist of routes connecting checkpoints. Beaconing [6] A system that consists of an authoring tool to create location-based educational experiences for students. Locatify’s A system to create location-based experiences, like guided tours and treasure Creator CMS hunt games. [76]

One of the things these projects do not explore is social media. For example, users could be given the ability of being able to share in real-time their tour routes. Another feature could be to allow multiple users to interact in the same tour through the systems and see each other’s location on the map. Features such as these could be interesting to explore in future stages of the development of our project to help attract more users to the applications through sharing on social media and add another motive for using the tourists’ application, which would be to share the experiences with friends, making them more fun. At this stage, the project we worked on does not resort to gamification, but some of these projects can be interesting starting points for future research in that sense. By adding rewards for completing experiences or other gamification aspects, we could increase the engagement of users with our applications, and some of these projects apply gamification features like transmedia storytelling, game challenges or augmented reality games, which would also be good additions to consider for our project. From this analysis, we verify there are several approaches to location-based tour guides, location-based games and authoring tools to create location-based experiences, all using different technologies and methods to engage the users. As such, we can conclude that possible rewards for completing experiences and introducing a story accompaining the experiences could increase the interest of users when playing the experiences. On the other hand, social media integration and other complex gamification componentes could consist in distractions for the users and remove their focus from the touristic experiences themselves and their respective surrounding environments.

3.5 Summary

In this chapter, we made an overview of projects that are involved in areas similar to ours. The case studies belong to three major areas: location-based tour guides, location-based games and authoring tools for location-based applications. With this analysis, we could identify technologies and aspects that can be included in our project. 58 Related work

The following tables present a summary of the groups of studies we have analysed before, grouping the technologies used in these as well as the aspects that we can consider to include in our project. Table 3.5 lists the technologies and features from the studies analysed that we can consider for our project. 3.5 Summary 59

Table 3.2: Summary of the location-based tourist guides studies analysed, with their technologies and possible aspects that can be included in our project

Study/ Project Technologies Possible aspects to include in ours

Schmidt-Belz Not speciﬁed. Makes use of users’ position in et al. [105] physical space; Uses both coordinates and topological position of a user to provide LBS; Provides personalized tour routes; Gives indications of nearby points of interest Marinho [82] Web technologies: HTML5, CSS Provides a list of cultural points of (1-3), JavaScript, PHP and interest based on users’ location; MySQL; Gives simple navigation instructions API W3C technologies: to the user, removing the need of the GeoLocation, user being constantly looking at the DeviceOrientationEvent and device. XmlHttpRequest; External API technology: Google Maps JavaScript V3. Kountouris Google API. Provides “users with directions to et al. [66] points or routes based on their geographical position while providing information in text, photo and video format” [66]. Shi et al. [108] Objective-C; Reduces battery consumption by only Server technologies: C# with updating the user’s location when a .NET, a database managed by location-based service is used; MySQL 5.0. The design of an easy to use UI while providing the best UX. Farias et al. Google Maps API. Gives the users the option to save [21] points of interest. Meehan et al. Android Development Kit; Uses the context around the user and [85] XML. not just the user’s location, allowing the application to suggest points of interest that are for instance close to the user, open at a certain time, indoor/ outdoor based on weather conditions, etc. 60 Related work

Maruyama et Server-side as Java Servlet. Using a client-server approach having al. [84] the map on the server and client sending requests and downloading the route information. Li et al. [72] The server software used was Uses spatial context to provide TCP Server. optimal tour routes. Gordillo et al. Not specified. Adding a learning component to the [47] tours; Implementing gamification in the experiences. Shin et al. OpenCV to process images and Makes use of context-awareness to [109] OpenGL ES to render contents; provide guidance to tourists; Content server implemented Showing the guide with a component with MySQL and Open Scene of augmented reality; Graph (OSG); Involves tourists in the process of Context-aware mobile AR value-creation for the guide. (CAMAR). Choi et al. [18] Not specified. The application of augmented reality to display touristic points of interest on users’ mobile phones. Yu [135] The “development kit Gives information about each Positioning SDK from Baidu” attraction; [135]. Includes intelligent path planning; Uses a routing algorithm to calculate the shortest path for the routes; The design of a user interface with multiple modes adapted to tourists’ age; The evaluation of the system using tourists’ opinions through questionnaires that adopt the System Usability Scale (SUS) for system usability citeBrooke1996. Ceccarini et al. Apache Cordova using web Apply gamification strategies as a [17] technologies (like HTML5, CSS3 way to motivate users to give their and Javascript); “feedback and comments about the For the server they used Slim, a experienced services” [17]. PHP framework; For the database they used MySQL. 3.5 Summary 61

Table 3.3: Summary of the location-based games studies analysed, with their technologies and possible aspects that can be included in our project

Study/ Project Technologies Possible aspects to include in ours

Ferreira [32] Data collection tools (Google Applying gamification components to Analytics, Facebook Analytics, tourists experiences. etc.). Lumpoon et al. AngularJS Ionic and Bootstrap Applies the agile software [79] web application frameworks; development process; Baidu for services like Shows a map on tourists’ app geo-coding, routing, etc.. highlighting the route. Shin et al. Not specified. Includes augmented reality to show [110] points of interest to tourists; Applies gamification to the experiences. Paavilainen et Not specified. Applies gamification to the al. [94] experiences; Includes augmented reality. 62 Related work

Table 3.4: Summary of the authoring tools studies analysed, with their technologies and possible aspects that can be included in our project

Study/ Project Technologies Possible aspects to include in ours

Noleto et al. JSON to transmit data between Applies gamification to the [90] the web application and the experiences, possibly with AR. server; Google Cloud Messaging (GCM) to send notification data from the server to the web application during a multiplayer game; LibGDX to render AR objects. Holm et al. [56] Not specified. Provides guiding and routing using text clues, photographic clues, Google or Apple Maps, cartoon mapping or a guiding arrow showing the direction and the distance to the next point of interest; Gives tasks/ challenges to tourists when they reach a point of interest. Beaconing [6] PHP (Laravel); Applies gamification to the HTML (Blade); experiences;Use drag and drop to create CSS; location-based experiences; Apache Web Server; Creates and edits minigames; MySQL/Postgres/SQLite/SQL Creates missions and quests; Server Uses nodes to create the routes. Bootstrap; JQuery; JSON; XML. Locatify’s Not specified. Applies gamification to the Creator CMS experiences; [76] Shows the map to the creator to ease the selection of points of interest for a route. 3.5 Summary 63

Table 3.5: Technologies and features that we can consider for our project

• HTML5; • CSS; • JavaScript; • MySQL; • GeoLocation; • DeviceOrientationEvent; • XmlHttpRequest; Technologies • Google Maps JavaScript V3; • Google API; • Apache Cordova; • Data collection tools (Google Analytics, Facebook Analytics, etc.); • AngularJS Ionic; • Bootstrap; • JSON; • Google Cloud Messaging (GCM). 1. Makes use of users’ position in physical space; 2. Uses both coordinates and topological position of a user to provide LBS; 3. Gives indications of nearby points of interest; 4. Gives simple navigation instructions to the user, removing the need of the user being constantly looking at the device; 5. Provides users information about a point of interest in different media formats; 6. Reduces battery consumption by only updating the user’s location when a location-based service is used; 7. The design of an easy to use UI while providing the best UX; 8. Gives the users the option to save points of interest; 9. Using a client-server approach having the map on the server and client sending requests and downloading the route information; Features 10. The evaluation of the system using tourists’ opinions through questionnaires that adopt the System Usability Scale (SUS) for system usability; 11. Applying gamiﬁcation components to tourists experiences; 12. Applies the agile software development process; 13. Shows a map on tourists’ app highlighting the route; 14. Includes augmented reality to show points of interest to tourists; 15. Provides guiding and routing using text clues, photographic clues, Google or Apple Maps, cartoon mapping or a guiding arrow showing the direction and the distance to the next point of interest; 16. Gives tasks/ challenges to tourists when they reach a point of interest; 17. Uses drag and drop to create location-based experiences; 18. Shows the map to the creator to ease the selection of points of interest for a route. This page was intentionally left mostly blank. Chapter 4

Digital System to Create Location-Based Ludic Experiences for Tourists

In this chapter, we describe the solution we developed. In Section 4.1, we present and distinguish the two applications that make up the solution. In Section 4.2, we present the functional and non- functional requirements of the system. In Section 4.3, we detail the system architecture, including the answer to the second research question. In Section 4.4, we describe the employed methodology during the development of the system. It also contains the work plan, where we list the main tasks carried out during the development. In Section 4.5, we present a summary of the previous sections.

4.1 The Solution

The proposed solution consists of a system responsible for delivering interactive experiences to tourists. This system is composed of two web applications: (i) an authoring tool, to create and edit tour routes for tourists; and (ii) an application for tourists to follow the created routes and enjoy new experiences. The authoring tool can be used on desktop devices or tablets. The tourists’ application can be used on tablets or smartphones. The authoring tool is meant to be used by people responsible for creating the experiences tourists will explore. These users decide the routes, the points of interest, and location where said experiences will happen and the type of activities to be explored by the tourists. When creating a new experience, this user has a map where new activities are placed. The map is centred on the user’s current location and allows the user to create routes (represented as arrows) between multiple activities (represented as circles). After the user creates the routes, sets the different properties of each activity and saves the experience, it is ready to be published and experienced by tourists. Figure 4.1 shows the ﬁnal version of the experience page of the authoring tool.

65 66 Digital System to Create Location-Based Ludic Experiences for Tourists

Figure 4.1: Experience Page of the Authoring Tool

The tourists’ application will be used by users to enjoy these experiences. Each experience features a kick-starting activity, which can be triggered once the user is at its corresponding location. After completing an activity, the next one will appear and so forth until the experience is completed. There may be activities that are independent of the others, therefore the user can access them at any time, as long as they are within a certain proximity.

Figure 4.2: Dashboard page and Experience Page (Map View) of the Tourists’ Application

Figure 4.2 shows the dashboard page with a list of the experiences and the experience page on the map view with the available activities of the selected experience displayed on the map. The design of these two applications was created by the UX team as described in Section 1.1. 4.2 System Requirements 67

4.2 System Requirements

4.2.1 Functional Requirements

We listed the requirements to be met in the implementation of the system. Major requirements of the system were speciﬁed in the project proposal and together with the rest of the teams that are part of the project we listed the features expected from the system. Some features were taken from the analysis of the similar projects to ours that were presented in Chapter3 of this document.

4.2.1.1 Authoring Tool Requirements

The main requirements for the authoring tool are the following:

1. Experiences management – The user must be able to create, remove or edit experiences and have a dashboard with a list of the experiences to ease their management;

2. Map view – The user must have access to a map that allows panning throughout the world and zooming, until a maximum level of zoom, on any area;

3. Activities management – The user must be able to create activities either by dragging a button to the desired position on the map or by clicking on a button and then clicking on the map. The user must also be able to edit activities’ properties or remove activities from the map;

4. Create routes – The user must be able to connect activities on the map and create routes with them.

Other requirements for the authoring tool include the following:

1. Canvas view – The user must be able to switch between map view and canvas view. In this view, all the activities of an experience are rearranged and grouped by routes;

2. Activities’ colours – The user must be able to set an activity’s colour and choose to set it also for all the descendent activities;

3. Menu connections – The user must be able to create routes in the activity update menu;

4. Activity type change – The user must be able to change an activity’s type and by doing that, change the conﬁguration of an activity and the options available to set;

5. History – The user must be able to go back and forward through the actions made regarding activities or connections between activities;

6. Save experience – The user must be able to save all the changes made to an experience on the server by clicking on a save button. All the changes must be saved in cache until the user clicks on the save button;

7. Publish – The user must be able to publish an experience so that it becomes available in the tourists’ application. 68 Digital System to Create Location-Based Ludic Experiences for Tourists

4.2.1.2 Tourists’ Application Requirements

The main requirements for the tourists’ application are the following:

1. Experience information – The user must be able to view the information of an experience;

2. List view – The user must be able to view a list with the available experiences, with the ones already played marked as completed;

3. Play experience – The user must be able to play an experience. This means that the user will perform the tasks on each activity until reaching the end of the experience;

4. Activities view – The user must be able to view a list with the available activities;

5. Map view – The user must be able to access a map view to check the position of the available activities on a map, along with the user’s location;

6. Radar view – The user must be able to access a radar view to check the proximity to the available activities. This radar must change its orientation according to the user’s orientation;

7. Activity – The user must be able to open an activity either from the list view, the map view or the radar view, and view its content. When the user opens an activity that has goals associated with it, these must be achieved before the activity can be completed.

Other requirements for the tourists’ application include the following:

1. Activities availability – The user must be able to open activities if they have no predecessor activity or if the predecessor activity has already been completed;

2. Load progress – The user must be able to continue a previously started experience or activity;

3. Favourites – The user must be able to mark experiences as favourites and access a page with all the favourite experiences listed;

4. Compass – The user must be able to check the current orientation on a compass so that the user can better navigate.

4.2.2 Non-Functional Requirements

1. Modular System – The system must be capable of implementing new modules (types of activities) in the future, i.e. the authoring tool will have for now a set of modules implemented that can be assigned to activities and later performed by the tourists. However, the system must be able to receive a new module and easily integrate it and make it available to be used in the tourists’ application;

2. Cross-platform – Both applications must work either on desktop devices or on mobile devices; 4.3 Architecture 69

3. Seamless updates – The system must be able to receive updates without the need of asking the user to reinstall the application;

4. Responsiveness – The system must adapt the design to any device measurements;

5. Work ofﬂine – The system must be able to work without network connection.

4.3 Architecture

The system will consist of three components: (i) an authoring tool; (ii) a tourists’ application; (iii) a server. Both applications will communicate with the server, which will be responsible for storing all the information needed.1 In the authoring tool, the users will have the possibility to place activities on the map, choose the type of activity from templates, edit the activities content, create routes with them, and select the kickstart activity of the experience. After editing an experience, the user saves and publishes it, which will send the experience to the server. The server will send the experiences to the tourists’ application. Tourists will then be able to start an experience, follow the designed routes and complete the activities on each point of interest. Figure 4.3 shows the architecture diagram and the interactions between the different components.

Figure 4.3: Architecture diagram

4.3.1 Research Question: How can we design this Authoring Tool with an architecture of a modular system capable of including new modules in the future?

One of the requirements of this project is that the system must be capable of implementing new modules in the future apart from the ones that will be developed and tested in this project. To answer this we decided on the following. The modules need to be added to the database. For the authoring tool, each module will contain its conﬁguration with the different ﬁelds that compose it, their types (such as text, image, video, audio, etc.), labels and placeholders. When creating an

1In this dissertation, of these three components, we will focus on the development of the two applications, using a server developed by the backend team, as explained in Section 1.1 of this document. 70 Digital System to Create Location-Based Ludic Experiences for Tourists activity and after selecting a module, the user will be able to set the values for that module’s fields, which will be saved in the activity. For the tourists’ application, each module will contain the style that will be used to arrange the fields on the screen. When a user opens an activity, it will display a screen with the fields arranged according to the definitions in the database and the values that were set on the activity by the creator of the experience in the authoring tool. The logic of a new module still has to be coded in the application as a new component. This means that what can be added to the database is the type of content of a module and the way it will be displayed to the user of the tourists’ application. However, one cannot set the logic of the module on the database. Therefore, to set this logic a new component must be created in the application code.2

4.3.2 Applications Interfaces

The authoring tool was divided into two main interfaces: a) the dashboard page, where all the experiences are listed and the user can create, edit or remove experiences; b) the experience page, where the user can add activities, create routes, etc.. Figures 4.4a and 4.4b display the initial wireframe of the dashboard page and the experience page of the authoring tool.

(a) Dashboard page wireframe (b) Experience page wireframe

Figure 4.4: Initial authoring tool wireframes

The tourists’ application was also divided into two main interfaces: (i) a dashboard page and (ii) an experience page. Figure 4.5 shows the initial wireframes of the tourists’ application: a) the dashboard page, where the user can see all the available experiences which will include an indication if completed or ongoing; b) the about view, where the user can see information of the experience; c) the list view, where the user accesses a list with all the available activities; d) the map view, where the user can see all the available activities displayed in a map; e) the radar view,

2In Section 7.4, we describe an alternative implementation of the dynamic modules. 4.4 Methodology and Work Plan 71 where the user can see all the available activities displayed on top of a radar; f) the activity page where the user can see the tasks to perform for a given activity.

(a) Dashboard page (b) About view (c) Activities view

(d) Map view (e) Radar view (f) Activity page

Figure 4.5: Initial tourists’ application wireframes

4.4 Methodology and Work Plan

The implementation phase followed the agile methodology — SCRUM. It consists of creating a list with all the functionalities that we need to implement in the project, the product backlog, and assigning a weight to each, corresponding to its priority. After ordering them by priority, we 72 Digital System to Create Location-Based Ludic Experiences for Tourists separate them by sprints, creating sprint backlogs. A sprint is a period that consists of, in our case, one week, in which the sprint backlog is supposed to be finished. A sprint is composed of several daily sprints. At the end of each sprint, the new functionalities are incremented to the product, which will be always functional after the first sprint. The features, assigned to a sprint, that were not developed pass on to the next sprint. Each sprint begins with a meeting to check if all the implemented features in the previous sprint corresponded to the expectations and, if not, to set improvements. In these meetings, we also readjusted the workload for the next sprint according to the progress of the last sprint. We started the implementation phase by learning the technologies needed to develop the applications. These were chosen during the state of the art review, after making an exhaustive comparison between the possible technologies we could use in Section 2.3 of this document. We started by developing the authoring tool and then the tourists’ application. The first step was to set the authoring tool structure and then implement the dashboard followed by the experience page. For the experience page, the first prototype consisted of a canvas view with a drag and drop feature, which allowed to create activities and routes. A more advanced prototype was then implemented, which consisted of both a canvas view and a map view, allowing to place activities on geographic coordinates. When the major features of the authoring tool were implemented, we started the development of the tourists’ application by setting its structure and creating the dashboard with the list of all available experiences. The first prototype of playing an experience consisted of showing the first activity tasks and going from activity to activity until the end of the experience, without using distances or actually performing those tasks. For the final prototype, we added the distances component, the possibility of performing the activities’ tasks and multiple views of the available activities. With both applications’ prototypes almost completed we started to work on the responsiveness component and perfecting the design. We then moved onto the testing phase, where we found some small fixes to make to the system.

4.5 Summary

In this chapter, the solution was described and divided into two components. We then listed the main requirements for each and also other features necessary. This section also included the system requirements, which are non-functional requirements. Taking into account the connections between the different components we presented a system architecture that includes the requests made between the applications and the server. The architecture section also contains the answer to the second research question and initial wireﬂows for the two applications. In the last section of this chapter, we presented the different stages of the implementation phase, which are described in the next chapter. This page was intentionally left mostly blank. Chapter 5

Implementation of the System

In this chapter, we describe the implementation of the proposed solution. In Section 5.1, we provide an overview of the technologies used in the development of the system and also include the answer to the ﬁrst research question. In Section 5.2, we describe the implementation of the authoring tool and present different prototypes of the application. In each subsection, we present the changes made to the previous version of the authoring tool. In Section 5.3, we describe the implementation of the tourists’ application and present its major prototypes. In each subsection, we present the changes made to the previous version of the tourists’ application. In Section 5.4, we present the modules developed to be used in the activities. In section 5.5, we present a summary of the previous sections.

5.1 Technologies

In Section 2.3 of this dissertation, we decided to develop the authoring tool and the tourists’ application as PWAs and to use Ionic combined with Angular to create them. Apart from these technologies we also had to make use of some JavaScript libraries to implement features like drag and drop, a canvas to position nodes and connect them and interactive maps.

5.1.1 PWA

Both applications were developed as PWAs and therefore can be used on any device with any OS as long as the device has an Internet connection to download the applications. When there is no Internet connection, users can still use the applications’ features that don’t require Internet access, as long as the necessary data has already been imported from the server.

5.1.1.1 Research Question – What are the requirements for an Authoring Tool as a PWA for touristic experiences?

For an authoring tool to be implemented as a PWA for touristic experiences, it must fulﬁl the following requirements:

74 5.1 Technologies 75

1. To be cross-platform – the application must provide the same features regardless of the type or OS of the user’s device and, therefore, can’t possess features that are speciﬁc to particular devices. Also, its graphical user interface must adapt to the device it is running on;

2. To work ofﬂine – users must be able to use the application features that do not require Internet access. This can be achieved by using a service worker, which will be responsible for caching the necessary static ﬁles to run the application and handling dynamic data (both the data downloaded in the last Internet connection and the data generated since). Once the device becomes online, the user may save the changes made in the server.

5.1.2 Angular and Ionic

The main technologies used to develop the PWAs were Angular and Ionic. Ionic provided most of the UI components that we used to build the HTML templates of the applications’ components. This gave us more ﬂexibility in terms of design since we could combine Ionic elements with some Angular elements to achieve the graphical user interface we wanted. With Angular, we built the core of the applications. In each application, there are two main pages: a dashboard page and an experience page. Each page is composed of multiple components, which is what Angular is most focused on. This is a modular technology that encourages the developer to divide different parts of the application logic into different components, which allows him/her to reutilize components on different pages. A component consists of an HTML template (the graphical user interface elements), an SCSS stylesheet (the style of the graphical user interface elements), and a TypeScript ﬁle (the logic of a component). To navigate between pages we have routing modules that hold the paths to each page. Some pages must meet a set of conditions either before being activated or being deactivated. These conditions are set on guards that are responsible for validating them. To communicate with the server we have the services, responsible for sending REST requests and returning the responses to their callers or dealing with the errors in case of an error response from the server. To save the data retrieved from the server as objects we have the models. These structures have properties and a constructor to create an object from the data received.

5.1.2.1 NgRx

We also used NgRx1 (Reactive State for Angular), which allows us to manage the application state. This state is where we keep the application data during its execution. First, we load the data from the database into an NgRx store and then we manipulate it in the components. This way we avoid constant requests to the database and passing data from component to component. To manage the state we have a structure, which is the store. An NgRx store is a state management library that is composed of actions, effects, reducers and selectors. A reducer holds a state and is also responsible for returning a new state in response to a given action dispatched for that state. Actions are functions that will be called in the components to update a state. Effects is the layer that exists between the actions and the reducer. When an action is dispatched, and if there is

1https://ngrx.io/ [Access date: Jun 15, 2020] 76 Implementation of the System a corresponding effect deﬁned, it is intercepted and ﬁrst, the effect will be executed and then it is responsible for dispatching an action to update the state. The effect is also responsible for calling services that will make requests to the server. The selectors are used by the components to retrieve data from a state. [88]

Figure 5.1: NgRx diagram [88]

On a root level, we have an AppState responsible for accessing inner states. On this AppState we have the RouterStateUrl, which is a state responsible for all the in-app navigation. Apart from this state we also have the DashboardState, responsible for managing the states for other data that needs to be managed on execution time, like the experiences, the activities, the history of activities changes, the connections and the modules.

5.1.3 Firebase

Firebase2 is a mobile and web application development platform that belongs to Google [46]. It has many products that help developers in creating applications. Of these, we have used Firebase Hosting3 and Firebase Storage4. Since this system and its backend were planned to be hosted on a server provided by the organizers of the project and that server wasn’t provided by the end of our this dissertation, we opted for the following solutions:

1. The backend was hosted in a server that belongs to the backend team of the project

2. The system was hosted in the Firebase Hosting product;

3. We used the Firebase Storage product to store ﬁles uploaded by the users, since the backend didn’t yet support a ﬁles upload process. 2https://firebase.google.com/ [Access date: Jun 21, 2020] 3https://firebase.google.com/docs/hosting [Access date: Jun 21, 2020] 4https://firebase.google.com/docs/storage [Access date: Jun 21, 2020] 5.1 Technologies 77

5.1.4 JavaScript Libraries

Along with Angular and Ionic, we had to use some JavaScript libraries to include features like drag and drop, a canvas to position nodes and connect them and interactive maps. These libraries are described below.

5.1.4.1 Interact.js

Interact.js5 allowed us to include a drag and drop functionality in the authoring tool. It was used to let the user drag the Add Activity button from the toolbar and drop it on the map area. We then get the drop position, transform it into geographic coordinates (latitude and longitude) and create a new activity with those coordinates.

Figure 5.2: Add Activity button

5.1.4.2 Cytoscape.js

Cytoscape.js6 is meant to display networks composed of nodes and edges. We have used it in the authoring tool to give the user the possibility of creating connections between activities. When a user creates a new activity it is placed as a node on the Cytoscape canvas. Once there are at least two activities there, the user can create directed edges between them, and thus create a ﬂow between the activities.

Figure 5.3: Cytoscape canvas

5https://interactjs.io/ [Access date: Jun 14, 2020] 6https://js.cytoscape.org/ [Access date: Jun 14, 2020] 78 Implementation of the System

5.1.4.3 Leaﬂet

Leaﬂet7 provides mobile-friendly interactive maps. It is lightweight and provides all the main features needed in a map. We have used this in the authoring tool as well as in the tourists’ application. In the authoring tool, we placed a map behind the Cytoscape canvas, which allowed us to have the activities (nodes) and their connections (edges) on top of the map, so that the user could have the perception of where they were located geographically. In the tourists’ application, we placed a map on the map tab of an experience. The user can select this tab to have an idea of the user’s current location and the location of all the activities of that experience. On the radar tab, there is also a hidden map that is used to place the activities and get the distances for the radar. With this library, we also included a search box for the user to search for an address or place on the map, and by clicking on it, the map pans to that place. The leaﬂet library allows the developers to choose a provider for the map tiles. We chose to use OpenStreetMap (OSM),8 which is an open-source provider.

Figure 5.4: Leaﬂet map with OSM tiles canvas

5.2 Authoring Tool

The authoring tool has the purpose of helping users create touristic experiences. It is intended to be used either on desktop devices or tablets. It asks the user’s permission to access the user location and centre the map of the experiences on that location. In the case of the user denying location access to the application, it will centre on a default place, but will still be completely functional. The application can be used in offline mode as long as the user has opened it once with network connection to allow the application to download all the necessary files to work properly. Media files will only be downloaded when the user opens a page that contains them, otherwise,

7https://leafletjs.com/ [Access date: Jun 14, 2020] 8https://www.openstreetmap.org [Access date: Jun 14, 2020] 5.2 Authoring Tool 79 a placeholder will be displayed. The user can perform any actions that do not require network connection and once the device is online the user may save the changes to the server and continue to use it normally. There are two main pages that make up this application: the dashboard page and the experience page. In the next sections, we present its implementation over the course of three iterations into three prototypes.

5.2.1 Prototype 1

The ﬁrst prototype for the authoring tool included the most basic features, like the experiences management, activities management or creating connections between activities.

5.2.1.1 Dashboard Page – Prototype 1

The dashboard page consists of a list of all the experiences created. Here the user has the ability to create new, to edit, and to delete experiences. When the user presses the add new experience button or an experience’s edit button, a modal panel opens. In this modal panel, the user can ﬁll the experience ﬁelds: title, description creation date and an image for the experience.

Figure 5.5: Dashboard page – prototype 1

In this page, there is a sidebar (a) with a button linked to the proﬁle page. The main content of the page contains a title and a list with the existing experiences. The ﬁrst item is a button (b) that allows the user to create a new experience. Each experience item (c) has an image, a title, a description, the creation date, an edit button (d) and a remove button (e). Figures 5.6a and 5.6b show the modals that are presented to the user upon clicking on the create experience (b) or on the edit experience (d) buttons, respectively. 80 Implementation of the System

(a) Create experience modal panel (b) Update experience modal panel

Figure 5.6: Modal panels in the dashboard page – prototype 1

5.2.1.2 Experience Page – Prototype 1

The experience page presents a canvas to the user, where activities and connections between activities can be added, edited and deleted. In this page, there is a menu to update the experience information, similar to the modal present on the dashboard page. There is also a menu to update an activity’s data and one to view a connection’s data. When a user drags the add activity button to the map, a menu opens, where the user can update the information of the new activity. To connect activities, the user creates directed edges between them. 5.2 Authoring Tool 81

Figure 5.7: Experience page – prototype 1

In this page, there is a sidebar with a home page button (a). The main content of the page is the canvas (b), where the user can move activities nodes and create links between them. The top toolbar contains undo/redo buttons (c) to allow the user to undo or redo changes made inside the experience, like adding activities, moving activities, etc., a button to add new activities (d), which can also be dragged into the canvas, and an input box to change the experience title (e). On the right side, there is a menu for the user to update the experience information (f).

Figure 5.8: Activities context menu in the experience page – prototype 1

This menu opens when the user presses and holds an activity node. It allows the user to perform actions on an activity. The user can edit (a), duplicate (b) or remove (c) an activity by selecting one of the options provided. When the user chooses the edit option, the update activity menu opens on the right side of the screen, as shown in Figure 5.9. 82 Implementation of the System

Figure 5.9: Experience page with the update activity menu – prototype 1

Figure 5.10: Update activity menu – prototype 1

The activity information is divided into ﬁve sections of data (a). After making changes the user can save them by pressing the save button (b). There is also a remove button (c) for the user to delete the activity. 5.2 Authoring Tool 83

(a) ID section (b) Modules section (c) Content section

(d) Connections section (e) Requirements section

Figure 5.11: Update activity menu sections – prototype 1

The ID section in Figure 5.11a contains the place of the activity (a), the tags (b) and the activity node colour (c). The modules section in Figure 5.11b contains all the available modules. The content section Figure 5.11c contains the title (a) and the description (b) of the activity. The connections section in Figure 5.11d contains a start here checkbox (a) to set that activity as a starting one, and also gives the user the possibility to create or remove connections between activities using the select boxes and buttons (b), other than by dragging and dropping on canvas. The requirements section in Figure 5.11e contains the proximity (a) that a user of the tourists’ application will have to be at to unlock the activity. It also has the schedule (b) and the days (c) that the activity will be available. 84 Implementation of the System

Figure 5.12: Connections context menu in the experience page – prototype 1

This menu opens when the user presses and holds a connection edge. It allows the user to perform actions on a connection. The user edit (a) or remove (b) a connection by selecting one of the options provided. When the user chooses the edit option, the update connection menu opens on the right side of the screen, as shown in Figure 5.13.

Figure 5.13: Experience page with the update connection menu – prototype 1

This is the ﬁrst prototype of the experience page with the update connection menu (a) open. 5.2 Authoring Tool 85

Figure 5.14: Update connection menu – prototype 1

This is the right side menu to view a connection data. It contains the activity it comes from and the activity it goes to. There is also a delete button for the user to delete the connection (a).

Figure 5.15: Delete element alert – prototype 1

This is the alert that pops up when the user deletes an element. In this alert the user can either conﬁrm or cancel the deletion.

5.2.1.3 Conclusions – Prototype 1

The development of this ﬁrst prototype included creating the application structure before starting the implementation of each page. The main focus of this prototype was to create the most basic of the main requirements, like managing experiences, activities and connections.

5.2.2 Prototype 2

The authoring tool’s second prototype included the integration of a map and the association of geographic coordinates to the activities. 86 Implementation of the System

5.2.2.1 Dashboard Page – Prototype 2

Figure 5.16: Dashboard page – prototype 2

The second version of the dashboard page contains a search bar (a) on the top toolbar to give the user the possibility of ﬁltering experiences by title.

(a) Create experience modal panel (b) Update experience modal panel

Figure 5.17: Modal panels in the dashboard page – prototype 2

The new version of the modals of the dashboard page includes a preview of the selected image for the experience. 5.2 Authoring Tool 87

5.2.2.2 Experience Page – Prototype 2

Figure 5.18: Experience page map view – prototype 2

The new version of the experience page contains a major change which is the inclusion of a map (a). The user can change between the map view and the canvas view by clicking on the toggle (b) present on the top toolbar. When the user gives location permission to the application, the map is centred on the user location. The user can zoom in/out (c), re-centre (d) the map on the current location and also search for places on the map search bar (e). When creating a new activity, the user can drag the create activity button (f) and place it on the map or simply click on that button and click on a point on the map, and the newly created activity will have associated the geographic coordinates of that place. When dragging and dropping an existent activity, its geographic coordinates are updated. The top toolbar now also contains a save button (g) (for the user to save the experience) and a run button (h) (for the user to preview the experience as it will be exposed in the tourists’ application). The right side menu is now retractable (i), which allows the user to have more space on the screen for the map/canvas. The update experience menu (j) now contains a preview of the selected image for the experience. 88 Implementation of the System

Figure 5.19: Experience page canvas view – prototype 2

The canvas view of the experience page contains all the activities and their connections. On this view, the user can have a better notion of how the activities are connected. Like on the map view, the user can also edit the experience and the activities properties on the right side menu and also create new connections between activities, but the user is not allowed to create new activities or reposition them geographically.

(a) Activity select (b) Intermediate activity (c) Final activity

Figure 5.20: Preview experience – prototype 2

When the user presses the preview experience button a screen pops up and gives the user the possibility of choosing which activity to start previewing (Figure 5.20a). The user can start on any activity of the experience. After entering an activity the user can see how it will be shown 5.2 Authoring Tool 89 to the user of the tourists’ application and select the next activity to preview (Figure 5.20b). The activities that the user is allowed to preview next are the ones that have an incoming connection from the current activity. Once the user reaches the ﬁnal activity of a sequence (the selected activity doesn’t’ have outgoing connections to other activities) the user can leave the experience preview (Figure 5.20c).

Figure 5.21: Experience page with the update activity menu – prototype 2

In the second prototype the update activity menu (a) can be opened by clicking on an activity node.

Figure 5.22: Update activity menu – prototype 2

In the update activity menu, there is now a preview button (a). By clicking on it the user can preview a single activity to check how it will look like on the tourists’ application, as represented in Figure 5.23. 90 Implementation of the System

Figure 5.23: Preview activity – prototype 2

(a) ID section (b) Content section

Figure 5.24: Update activity menu id and content sections – prototype 2

The new ID section in ﬁgure 5.24a contains the address of the selected activity (a), giving the user the possibility of changing it, which will give the activity new geographic coordinates. The user can also select the node colour and choose to set that colour to all the activities that come 5.2 Authoring Tool 91 from this one (b). The new content section in ﬁgure 5.24b is now divided into types of contents (a). In each of these areas the user can introduce data of a certain type, for example in the area of images the user can select images for the activity (b), in the audio area the user can select audios for the activity.

5.2.2.3 Conclusions – Prototype 2

The development of the second prototype included adding the map and all the features related to it and also giving the user the possibility of previewing how the experiences will look on the tourists’ application. In this prototype, we also included the feature of selecting media ﬁles (images, videos and audios) from the ﬁlesystem and uploading them to the server. The main focus of this prototype was to create some more advanced features from the system requirements, like the map and canvas views or saving experiences.

5.2.3 Prototype 3

The third version of the authoring tool’s prototype included the integration of new modules, the possibility of publishing an experience and allowing the user to preview activities. We also implemented the ﬁrst version of the high-ﬁdelity graphical user interface for all pages.

5.2.3.1 Dashboard Page – Prototype 3

Figure 5.25: Dashboard page – prototype 3

For this version of the dashboard page, we updated the graphical user interface to its latest version. We also changed the navigation menu, which is now static. Each experience item now contains an indication of whether it has been published or not. 92 Implementation of the System

(a) Create experience modal (b) Update experience modal

Figure 5.26: Modal panels in the dashboard page – prototype 3

5.2.3.2 Experience Page – Prototype 3

Figure 5.27: Experience page map view – prototype 3

The left side navigation menu (Figure 5.28) is now retracted and can be opened by pressing the ﬁrst button on the toolbar (a). A publish button (b) was added to the toolbar and it gives the user the possibility of making the experience available in the tourists’ application. 5.2 Authoring Tool 93

Figure 5.28: Experience page navigation menu – prototype 3

The icons of the activities on the map are now a pin with the same form as the ones used in the tourists’ application. There are different icons for starting activities, ending activities, starting/ending activities and for the other activities (Figure 5.29).

(a) Starting activity (b) Ending activity (c) Starting/ending activity (d) Common activity

Figure 5.29: Activities pins – prototype 3 94 Implementation of the System

Figure 5.30: Select set of activities – prototype 3

The user can create a set of three activities disposed in four different ways: (i) Linear: three activities linearly connected from the ﬁrst to the third (Figure 5.31); (ii) Branched: one activity connected to two activities (Figure 5.32); (iii) Cyclic: there activities connected from one to the next (Figure 5.33); (iv) Exploratory: three activities without connections between them (Figure 5.34). This is meant to ease the creation of sequences of activities. When creating one of these sets it is placed in the center of the map.

(a) Canvas view (b) Map view

Figure 5.31: Linear set of activities – prototype 3

(a) Canvas view

(b) Map view

Figure 5.32: Branched set of activities – prototype 3 5.2 Authoring Tool 95

(a) Canvas view (b) Map view

Figure 5.33: Cyclic set of activities – prototype 3

(a) Canvas view (b) Map view

Figure 5.34: Exploratory set of activities – prototype 3

Figure 5.35: Experience page canvas view – prototype 3

Figure 5.35 shows the ﬁnal graphical user interface of the canvas view. 96 Implementation of the System

(a) Activity select (b) Intermediate activity (c) Final activity

Figure 5.36: Preview experience – prototype 3

Figure 5.36 shows the ﬁrst version of the high-ﬁdelity graphical user interface of the preview experience screens.

Figure 5.37: Experience page with the update activity menu – prototype 3

Figure 5.37 shows the ﬁrst version of the high-ﬁdelity graphical user interface of map view with the update activity menu (a) open. 5.2 Authoring Tool 97

Figure 5.38: Update activity menu – prototype 3

Figure 5.38 shows the ﬁrst version of the high-ﬁdelity graphical user interface of the update activity menu.

(a) ID section (b) Modules section (c) Content section

(d) Requirements section (e) Connections section

Figure 5.39: Update activity menu sections – prototype 3 98 Implementation of the System

The ﬁnal version of the information section in ﬁgure 5.39a now contains the possibility of setting the activity as its starting or ending point (a), a feature that was previously present in the connections section.

(a) Time and proximity

(b) Images

Figure 5.40: Content section for the location module – prototype 3

To create an activity with the location module associated the user may set a timer (a), which indicates how much time will the tourists’ application user have to ﬁnish the activity, the proximity 5.2 Authoring Tool 99

(b), which is default to 50m (Figure 5.40a). The user can set from one to ﬁve images (Figure 5.40b) and must select the corresponding locations. When the user clicks on the choose button (c) of the locations subsection (Figure 5.40c), the location modal panel opens. On this panel (Figure 5.40d), the user needs to click on the map to select the location of the place corresponding to the image and click on conﬁrm (d).

(a) Location module (b) Information module

Figure 5.41: Preview activity screens – prototype 3

Figure 5.41 shows the preview activity screens of an activity with the location module and an activity with the information module.

Figure 5.42: Experience page with the connection menu – prototype 3 100 Implementation of the System

In the third prototype, the connection menu (a) can be opened by clicking on a connection edge.

Figure 5.43: Experience page with the connection menu – prototype 3

Figure 5.43 shows the ﬁrst version of the high-ﬁdelity graphical user interface of the connection menu.

(a) Close activity without saving alert (b) Delete element alert

Figure 5.44: Experience page alerts – prototype 3

The close activity without saving alert 5.44a is shown when the user makes changes to an activity in the update activity menu and tries to close the menu without saving ﬁrst. The delete element alert 5.44b is shown when the user tries to delete an activity or a connection.

5.2.3.3 Conclusions – Prototype 3

The main focus of this prototype was to implement the first version of the high-fidelity graphical user interface, to preview an experience and to include the possibility of adding new modules. The inclusion of new modules affected the content section of the update activity menu, since the fields of this section depend on the module that was created and inserted in the database.

5.3 Tourists’ Application

The tourists’ application has the purpose of providing its users with the experiences previously created in the authoring tool. It is intended to be used on mobile devices, either on tablets or 5.3 Tourists’ Application 101 on smartphones. This application needs the users’ permission to access their location and to keep track of their progress in the experiences. In case the users deny such access, they won’t be able to play the experiences. The application will save both the progress of the user in the experiences and which experiences are marked as favourites on the users’ device. The application can be used in offline mode as long as the user has opened it once with network connection to allow the application to download all the necessary files to work properly. Media files will only be downloaded when the user opens a page that contains them, otherwise, a placeholder will be displayed. There are two main pages that make up this application: 1) the dashboard page and 2) the experience page. There are also secondary pages: a) the favourites page, b) the filters page, and, c) the experiences map page.

5.3.1 Prototype 1

5.3.1.1 Dashboard Page – Prototype 1

The dashboard page consists of a list of all the experiences available. In this page, the user can choose an experience to play and also check which experiences the user has already completed.

(a) Dashboard page – prototype (b) Application navigation 1 menu – prototype 1

Figure 5.45: Dashboard page and application navigation menu – prototype 1 In this page, there is a toolbar that has a button (a) to open the application navigation menu and a search bar (b) that allows the user to ﬁlter experiences by name. The main content of the page contains a title (c) and a list with the available experiences. Each experience item has an image (d), a title (e) and a description (f). 102 Implementation of the System

5.3.1.2 Experience Page – Prototype 1

(a) About page (b) Activities page (c) Map page

(d) Radar page (e) Information activity page (f) Location activity page

Figure 5.46: Experience pages and activity pages – prototype 1 5.3 Tourists’ Application 103

The about page in Figure 5.46a contains the image (c) of the selected experience, the title (d) and the description (e). In the top of the screen there is a toolbar with a button (a) to open the application navigation menu and a back arrow button (b) to navigate to the latest screen. In the bottom of the screen there is a menu (f) to navigate inside the experience between the about, activities, map and radar pages (Figure 5.47). The activities page in Figure 5.46b contains a list of all the available activities. Each activity item contains the activity title (a), the proximity to the user (b), an indication of whether it is locked or unlocked (c) given the user proximity and a button (d) to start the activity. The map page in Figure 5.46c contains a map with the user location (a) as well as the available activities represented by pins according to the activity status (completed, locked, unlocked and selected) (Figure 5.48). When the user clicks on a pin it becomes selected and a small menu (b) appears in the bottom of the screen giving the user the possibility of entering that activity. The radar page in Figure 5.46d contains a radar with the user location (a), activities pins (b), circles (c) with a certain radius around the user location to allow the user to have a better perception of the proximity to the activities and also a set of arrows (d) that indicate the direction to activities that are farther and therefore aren’t visible in the screen. The information activity page in Figure 5.46e shows the content of an activity with the information module associated. This module can have different conﬁgurations. In this example there is a slider with images (a), an audio (b), the activity title (c) and the activity description (d). All activities page contain a button to complete the activity (e). The location activity page in Figure 5.46f shows the content of an activity with the location module associated. This page contains a map with the user location (b) and a list (a) with the images that the user must look for. Once the user gets close to one of the places represented in these images the corresponding image is marked (c) as completed. In the activities, the map and the radar pages, there are some activities that only become available when the ones before them are completed (i.e. the user must complete the activity A to make activity B available). There are also activities that are mutually exclusive (i.e. if mutually exclusive, when the user starts the activity A, activity B is no longer available).

Figure 5.47: Experience navigation menu – prototype 1 104 Implementation of the System

(a) Un- (b) (c) Com- (d) locked Locked pleted Selected

Figure 5.48: Activities pins – prototype 1

5.3.1.3 Conclusions – Prototype 1

5.3.2 Prototype 2

The second prototype for the tourists’ application included the integration of a new module, the implementation of all the steps that the user goes through when playing an experience or the creation of the favourites feature. We also implemented the ﬁrst version of the high-ﬁdelity graphical user interface for all pages.

5.3.2.1 Dashboard Page – Prototype 2

(a) Experiences (b) Favourites (c) Filters (d) Menu

Figure 5.49: Experiences, favourites, ﬁlters and menu pages – prototype 2 5.3 Tourists’ Application 105

The experiences page in Figure 5.49a now has a button above the list of experiences which takes the user to the experiences map page. Each experience item now has a button that allows the user to add it to the favourites. The favourites page in Figure 5.49b is where the user can see a list of all the experiences marked as favourites. The filters page in Figure 5.49c contains a set of filters that the user can apply to filter the experiences that will be displayed on the experiences page and on the favourites page. The user can filter experiences by proximity (b) or by experience categories defined by their tags (b). The user can also set the criteria (a) for ordering the experiences, either by proximity, name or date of creation. The menu in Figure 5.49d allows the user to navigate between the aforementioned pages.

Figure 5.50: Experiences map page – prototype 2

Figure 5.50 represents an alternative for the user to select an experience to play. Each experience is displayed on the map at the location of their initial activity. By clicking on an experience icon the user can start, continue or restart an experience (a). There is a compass to assist the user while navigating (b). The user icon (c) on the map changes its orientation according to the user orientation. 106 Implementation of the System

5.3.2.2 Experience Page – Prototype 2

(a) About page (b) Activities page (c) Map page

(d) Radar page (e) Information activity page (f) Location activity page

Figure 5.51: Experience pages and activity pages – prototype 2 5.3 Tourists’ Application 107

The about page in Figure 5.51a now contains a button to restart the experience that appears once the user completes all the activities of that experience. The activity items of the activities page in Figure 5.51b now contain the address of each activity (a). In the bottom of the page content there is a progress bar (b). The user icon (a) on the map page in Figure 5.51c changes its orientation according to the user orientation. There is a compass to assist the user while navigating (b). In the bottom of the page content there is a progress bar (c). The radar page in Figure 5.51d now adapts to the user orientation, meaning that when the user moves the device, the radar will rotate and display the activity icons in a different position on the screen relative to the user’s orientation. There is a compass to assist the user while navigating (a). In the bottom of the page content there is a progress bar (b). The location activity page in Figure 5.51f shows the content of an activity with the location module associated. This page contains a radar (b) which adapts to the user orientation with the user location (a) and a list (e) with the images that the user must look for. The places that the user must ﬁnd are marked with green circles (c). Like on the radar page, on this page there are also arrows (d) that point to the direction of goals that are farther. There is a compass to assist the user while navigating (f). The progress bar in the activities, map and radar pages represents the number of activities completed of a certain experience.

(a) Partial (b) Full

Figure 5.52: Partially and fully completed experience modal panel – prototype 2

When a user completes an activity marked as ﬁnal, the modal in ﬁgure 5.52a pops up and gives the user the possibility of continuing the experience or to leave it. 108 Implementation of the System

When a user completes all the activities of an experience, the modal in ﬁgure 5.52b pops up and gives the user the only choice of leaving the experience.

Figure 5.53: Experience navigation menu – prototype 2

(d) Partially (e) Fully (a) New (b) Continue (c) Selected completed completed

Figure 5.54: Experience pins – prototype 2

The pins of the Figure 5.54 are displayed in the experiences map page. Figure 5.54a represents the pin of a new experience that can be started. Figure 5.54b represents the pin of an experience that was started but not ﬁnished. Figure 5.54c represents the pin of an experience that was selected. Figure 5.54d represents the pin of an experience that was partially completed. Figure 5.54e represents the pin of an experience that was fully completed.

(a) Unlocked (b) Exclusive (c) Selected (d) Completed (e) Locked

Figure 5.55: Activities pins – prototype 2

The pins of the Figure 5.55 are displayed on the map and radar pages. Figure 5.55a represents the pin of an unlocked activity. Figure 5.55b represents the pin of an activity mutually exclusive to another. Figure 5.55c represents the pin of an activity that was selected. Figure 5.55d represents the pin of an activity that was completed. Figure 5.55e represents the pin of a locked activity.

5.3.2.3 Conclusions – Prototype 2

5.4 Modules

We implemented two different modules that can be set for an activity: (i) one module that has an informative character; (ii) one module that intends to make the user focus on the surrounding 5.4 Modules 109 environment and that is based on the user location. Each module has a set of ﬁelds that can be included by the user of the authoring tool when creating an activity. For example, for the information module, the user can set multiple images, a description and also, include audio. For the location module, the user can set multiple goals that consist of an image of a place and its location.

5.4.1 Information Module

This module has the purpose of giving information about a certain place to the user, either through text, images, audio or videos. In activities that contain this module, the user doesn’t have to meet any goals. In Figure 5.56 we have an example of what an information module can look like. This module contains a slider with images, an audio player, the activity title and a description

Figure 5.56: Information Module

5.4.2 Location Module

This module has the intention of taking the user close to the location of different places. The user will be provided with a list of images, one for each place, and will have to identify the place in the 110 Implementation of the System landscape to get near it and complete the task. The user needs to complete all tasks to complete the activity. This module can also include a timer to give the user a time limit to complete the activity. If the user doesn’t complete the activity within the time given, the tasks will restart. Besides the list of images, there is a radar that will guide the user to near the places. The user of the authoring tool needs to set the images of the places along with their corresponding locations and optionally add the timer. Figure 5.57 displays an example of what a location module can look like.

Figure 5.57: Location Module

5.5 Authoring Tool – Code Documentation

In this section, we present the folder structure of the authoring tool code we developed. We also document the code implemented to provide details that will help future developments.

5.5.1 Folder Structure and Content

The authoring tool’s code is present in the src folder, which is divided into four folders and global ﬁles. 5.5 Authoring Tool – Code Documentation 111

Figure 5.58: Source folder structure

The app folder contains the logic of the application. The assets folder contains the default images and icons. The environments folder contains environment variables. The theme folder contains the theming variables. The global file contains the styles that are applied to all components of the application. The index file is the application’s host page. The main file is where the production mode is enabled and the App module is started. The manifest file, which is a requirement for a PWA, provides basic information about the application and is essential to allow the user to install it on a device.

Figure 5.59: App folder structure

In the app folder, the core folder contains models, services and other common functions for all the components. The pages folder contains the components code and also the store for the application data. The store folder contains the AppState. The App Module contains the main 112 Implementation of the System module of the application responsible for, for instance, conﬁguring the application routes, registering the service worker, conﬁguring the Firebase connection and setting the route strategy. The app component is the root level of the components tree. We used the ion-router-outlet responsible for managing the application navigation.

Figure 5.60: Core folder structure

In the core folder, the models folder contains the models for the classes used in the application, like the activities, experiences, connections or modules. The services folder contains the services used to communicate with the server and execute tasks that are common to multiple components.

Figure 5.61: Pages folder structure

In the pages folder, each page type folder contains the corresponding components, containers and guards for the dashboard page. The experience folder also contains the store for the Dash- boardState and a component that works as a template to create the different modules previews.

Figure 5.62: Dashboard and Experience folders structure

The components folder contains the components that receive data from a container component. The containers folder contains the components that communicate with the store and pass the data retrieved to the other components. The guards folder contains the guards of the main components. The store folder contains the actions, effects, reducers and selectors of the DashboardState. The two store folders contain the components that form an NgRx store. 5.5 Authoring Tool – Code Documentation 113

Figure 5.63: DashboardState and AppState store folders structure

5.5.2 Core

5.5.2.1 Models

The activity and the connection models contain the attributes that make each of these classes and a constructor. The experience model contains not only the class attributes and constructor but also an adapter that is used to adapt the data that is fetched from the database and the data that is sent to the database. The module model contains not only the class attributes and constructor but also an adapter that is used to adapt the data that is fetched from the database. The IAPModel is the model that is used in the experience adapter to convert the data to ﬁt the conﬁguration used in the database for the experiences.

5.5.2.2 Services

In the experience service, there are the methods used to get, add, update and delete experiences from the database. The in-memory-data-service is a fake database that is useful if we don’t want to pollute the server database while testing code changes. The module service is the method to get modules from the database. The toast service is used to show a toast with a certain message to the user. In the uploadFile service, there are the methods used to upload and delete files from the Firebase storage. If the file is an image we cut down the image size to avoid taking up too much space. Once the file is uploaded the system waits for the Firebase response that contains the URL that points to the file.

5.5.2.3 Other ﬁles

In the auxFunctions ﬁle, there is an auxiliary function to get the next ID of a given array of objects. The NoCacheHeadersInterceptor is used to intercept HTTP requests and add them a cache-control property to make sure that all cached resources are revalidated before being used. 114 Implementation of the System

5.5.3 Dashboard

Before entering the dashboard page the experience-exists guard must return true.

5.5.3.1 Containers

The dashboard component is responsible for getting an Observable of the experiences and pass them to the experience-list component. It also contains the searchExperiences method that gets experiences by title. The experience-list component is responsible for opening the experience add modal panel (either for creating or updating experiences) and calling the store methods to create, update and delete experiences.

5.5.3.2 Components

The dashboard-toolbar component is responsible for calling the searchExperiences method of the dashboard component with the query parameter inserted by the user. The experience-add component is responsible for calling the method to open the add experience modal panel with the add type. The experience-add-form component is both for creating and updating experiences. It is responsible for validating the user inputs and sending the form results back to the experience-list component when the user submits the form. The experience-item component is responsible for calling the method to open the add experience modal panel with the update type and calling the delete experience method.

5.5.3.3 Guards

The experience guard is responsible for checking if the application has already loaded the experiences from the database and, if not, wait until it is done.

5.5.4 Experience

Before entering an experience page both the experience-exists and the module guards must return true. Before leaving an experience page the conﬁrm-deactivate guard must return true.

5.5.4.1 Containers

The experience component contains a reference to the activity-menu-and-drag component and to the menu component. If the user loads the application in the experience page instead of the dashboard page, then the experience page will be the first in the stack of pages. This implies that when the user leaves the experience page it will remain cached and not destroyed as a way to increase the load speed of that page. This means that when the user returns to that experience page there is the need for restarting the component’s variables and subscriptions that had to be manually destroyed when the user left it. To identify when the user re-enters the page, router 5.5 Authoring Tool – Code Documentation 115 events are subscribed. In this subscription, when the URL equals the first experience URL then it calls both the restart method of the activity-menu-and-drag component and the startFunctions method of the experience component. The startFunctions method gets the experience from the store using the id parameter taken from the URL and then loads that experience’s activities and connections into the store. The canDeactivate method is called in the confirm-deactivate guard and returns whether there are any unsaved changes or not. The unloadNotification method is fired when the user tries to close the window, checks if there are any unsaved changes and shows an alert to let the user know if there are. The activity-menu-and-drag component is the largest of this application. It contains Ob- servables to the activities, connections, modules and the property hasChanges (whether there are unsaved changes or not). The subscriptions implemented in this component are the following:

1. When the user clicks on the Add Activity button it triggers a variable to indicate that when the user clicks on the map a new activity will be created;

2. The ﬁrst time that the user clicks on the map, the Cytoscape element, that is where the activity nodes and connections are placed, backgroundColor is changed to force it to update its positioning after loading the activities and connections;

3. When the user presses the Delete key or the Backspace key it triggers the removeItem method that checks if there is an element (activity or connection) selected to delete and if there is, the delete conﬁrmation alert is presented;

4. When the user resizes the window size the resizeMap method is called to force the map to readjust to the new window measures;

5. When the update activity menu, the update experience menu or the update connection menu are open, their methods that are EventEmitters are subscribed to execute methods of the activity-menu-and-drag component;

6. The activities and the connections observables are subscribed so that when they change, the changes are reﬂected.

The destroy method cleans the component by doing the following:

1. Clear the changes history in the store and set the hasChanges variable to false;

2. Destroy the Cytoscape instance;

3. Destroy the map instance;

4. Remove the element in which the Cytoscape instance and the map instance were implemented;

5. Call the destroy method of the undoRedo component;

6. Unsubscribe all subscriptions. 116 Implementation of the System

The addActivity method creates an activity with default values on the geographic coordinates selected by the user. The duplicateActivity method creates an activity with some values taken from the duplicated activity and geographically close to it. The deleteActivityOrConnection method removes the selected element. The updateActivity method updates an activity with the new data returned by the update activity menu. The updateActivityCoordinates method updates an activity’s geographic coordinates when the user drags and drops an activity on the map. The setActivityIn- stanceAddress method uses a geocode service to get an address from geographic coordinates. The openUpdateActivityMenu, the openUpdateExperienceMenu and the openUpdateConnec- tionMenu methods open the corresponding update menu on the right side menu using a compo- nentFactory to create the component. The createActivityOnEventPositionByDrag method creates an activity on the point to which the user dragged the Add activity button. The createActivityOnEventPositionByClick method creates an activity on the point of the map in which the user clicked, after having clicked on the Add activity button before. The initMap method creates a map instance with some parameters and options. It then adds a tile layer to the map to display the OpenStreetMap tiles, the locationfound and locationerror events, to perform actions upon finding the user location or not, the centre map feature and the search addresses feature. The setNodesMapPositioned method is called every time the user zooms in/out and repositions the activities nodes on the Cytoscape instance to place them on the geographic coordinates associated with each activity node. The mapEnable and mapDisable methods enable or disable map dragging and zooming so that when the user is moving nodes, creating edges or has the connection contextual menu open, the map doesn’t zoom or pan. The setCyListeners method implements the listeners for the Cytoscape instance. The changeView method switches between the map view and the canvas view and calls the start and destroy methods for each accordingly. The makeSvg method creates the SVGs for the activity nodes icons that are placed on the Cytoscape instance with the given colour as the pin main colour. The setCytoscape method creates the Cytoscape instance with some parameters and the styles to apply. The setActivitiesSubMap method implements the activities subscription in the map view and sets the activities as Cytoscape nodes with their position on the Cytoscape instance being calculated from their geographic coordinates. The createConnectionToLast method creates a connection, when a new activity is created, between the last created activity and the new activity. The setActivityCreatedConnections method creates the connections planned for each activity set (Linear, Branched, Cyclic or Exploratory) accordingly. The setActivitiesSubCanvas method implements the activities subscription in the canvas view and sets the activities as Cytoscape nodes. In canvas view, activities nodes are positioned in the setNodesCanvasPositioned method. This method groups activities by their connections and displays them on the Cytoscape canvas in a way that the user can better identify sequences of activi- 5.5 Authoring Tool – Code Documentation 117 ties. The setConnectionsSub method implements the connections subscription and sets the activities as Cytoscape edges. The setEhDefaults method sets the defaults for the Cytoscape edges ma- nipulation. The setCxtMenuNodesMap and the setCxtMenuNodesCanvas methods create the activities context menus for the map view and canvas view respectively, while the setCxtMenuEdges method creates the connections context menu. The setInteract method implements the InteractJs features that have to do with dragging and dropping the Add activity button on the map. The showHideMenu method makes the right side menu visible or not. The publishExperience method updates the experience publish attribute to true. The createActivitiesFromSet method creates sets of activities with different configurations that depend on the type of set selected by the user. The undo-redo component is responsible for getting an Observable of the undo and redo actions. When the user makes an action relative to an activity (create, update or remove) or a connection (create or delete) it is added to the history of actions which is navigated through undo and redo actions. The toggleButtons method gets the next and previous actions from the store and enables/disables the undo/redo buttons. The start method creates a subscription to undo and redo observables, so that when there is a change in the history of actions the next and previous actions and the undo/redo buttons are updated accordingly. The undoAction method runs the reverse of the previous action, while the redoAction method runs the next action. The update-activity component contains a reference to the module-configuration component. The activity-menu-and-drag component passes the activity that is going to be updated to the update-activity component. Each attribute of the application is set on the various sections of the component’s template for the user to edit. The selectModule method sets the module- configuration component module configuration when the user selects a different module. The uploadFiles method asynchronously calls the uploadFi method to each file there is to upload. The uploadFi method calls the uploadFileService’s uploadFile method and then awaits for the response with the new file URL, which will later be saved with the file name in the activity moduleData attribute. The saveActivity method verifies if the module configuration data changed and is valid, checks if there are replaced files that need to be deleted from the Firebase storage and then calls the uploadFiles method to upload the new files. Lastly, it creates, updates or deletes connections if the user did one of these actions in the update-connection component and calls the EventEmitter saveForm method so that the updateActivtiy method of the activity-menu-and-drag component is executed. If the user marked the isColorForChildren checkbox as true, the recursiveFillChildren method sets the pin colour of each of the selected activity’s descendant nodes. The configCon- nections method gets the connections that come from and go to the selected activity and display them in the update-connection component. The addConnectionToTarget and the addConnection- ToSource methods add a connection to the corresponding arrays so that in the saveActivity method they are created. The deleteConnectionTarget and the deleteConnectionSource methods delete a connection to the corresponding arrays so that in the saveActivity method they are deleted. The getAddresses method fetches a list of addresses taking as query parameter the one given by the user and displays the list for the user select one. The previewActivity method opens the preview 118 Implementation of the System activity modal panel with the content set by the user in the module-configuration component. The checkChangesToSave method checks if the user changed any of the activity’s data. The update-connection component is responsible for calling the EventEmitter removeThis method so that the removeItem method of the activity-menu-and-drag component is executed. The update-experience component contains an Observable of the property hasChanges (whether there are unsaved changes or not) to enable/disable the Save button. The activity-menu-and-drag component passes the experience that is going to be updated to the update-experience component. The experience data is inserted in a form for the user to edit. The saveExperience method checks if the form has valid data and, if it does, gets the form data to create a new experience and assign the data to it. If the user changes the image, then the method calls the uploadFileService’s uploadFile method and then awaits for the response with the new file URL, which will later be saved in the experience. Lastly, the method calls the EventEmitter saveForm method so that the updateExperience method of the activity-menu-and-drag component is executed.

5.5.4.2 Components

The audio component is responsible for playing and stopping the audio file that is passed to it. It also calls the EventEmitter stopAllAudios method to stop the other audios that might be playing before playing its own. The dynamic component gets the type of component to create and calls it in the HTML template. The map-media component is responsible for displaying a list of images and a timer. The move method slides the images list left and right. The map-modal component gets the coordinates of the selected activity, to the centre there the map, and the selected location if it has already been set by the user before. The initMap method creates a map instance with some parameters and options. It then adds a tile layer to the map to display the OpenStreetMap tiles, the centre map feature and the search addresses feature. The setMapListeners sets a click event on the map, so that when the user clicks on the map that point will be the selected location. The module component is responsible for displaying each module image. The module-configuration component gets the module configuration and the module data of the selected activity, along with the activity’s location. The setModuleContent method sets the module data in the corresponding fields set by the module configuration. The onFileChanged method reads a file selected by the user. The validate, validateLocationsImgs and validateMedia methods are responsible for validating the user changes to the module data. The selectLocation method opens the map-modal component as a modal panel so that the user can select a location for a location module task. The preview-activity component is responsible for calling the dynamic-content-viewer component and passing it to the selected module and activity. The preview-experience-modal component is responsible for calling the preview-activity component and passing it to the selected activity by the user. The previewActivity method gets 5.5 Authoring Tool – Code Documentation 119 the id of an activity from the select box, gets that activity’s children activities and puts them on the select box. The getActivitiesData method gets the selected activity and its module from the selected activity id. The select-activity component is responsible for selecting activities in the connections section of the update-activity component. The callAdd method calls the EventEmitter addConnection method that adds a new connection to the arrays of connections of the update-activity component. The callDelete method calls the EventEmitter deleteConnection that deletes a connection from the arrays of connections of the update-activity component. The callCreate method adds a new select box for the user to add new connections. The slider component is responsible for displaying a slider of images and making the transi- tions between images. The dynamic-content-viewer component is responsible for creating instances of the dynamic component using a ComponentFactory. The loadMedia method gets the media data from the module data of the selected activity. The build method iterates through the components set in the module HTML configuration and then creates each one of them as a dynamic component. It also passes to each component the corresponding module data. The stopAllAudios method stops all audio files that exist in the component. The ngOnDestroy method destroys the created components.

5.5.4.3 Guards

The experience guard is responsible for checking if the application has already loaded the experiences from the database and, if not, wait until it is done. The module guard is responsible for checking if the application has already loaded the modules from the database and, if not, wait until it is done. The SyncGuardHelper is used to apply two or more guards to the same route. The conﬁrm-deactivate guard is used to prevent the user from leaving an experience page when there are unsaved changes.

5.5.5 Stores

This AppState store is responsible for accessing inner states. On this store we have the Router- StateUrl, which is a state responsible for implementing in-app navigation actions like Go, Back and Forward and storing the navigation stack. The DashboardState store is responsible for managing the states for data that needs to be managed on execution time, like the experiences, the activities, the history of activities changes, the connections and the modules.

5.5.6 Service Worker

The service worker is responsible for caching the applications’ data so that the user can use it ofﬂine. There are two groups of data to be cached: 1) assetGroups; 2) dataGroups. The asset- Groups includes the application ﬁles, the assets and the SVG icons from Ionic. The application 120 Implementation of the System

files and the assets are cached in the prefetch mode so that when they are requested, they are instantly available. It also ensures that the application can be used in offline mode. The SVG icons from Ionic are cached in the lazy mode, meaning that they are cached only when requested, since many of these icons aren’t used in the application and this way it doesn’t overload the network with unnecessary requests. The application files and the assets are updated in the prefetch mode, which means that when there is a new version of these files, they are downloaded and cached right away. The SVG icons from Ionic are updated in the lazy mode so that these are not immediately updated when there is anew version of them, but only when they are requested. The dataGroups includes the images files and the database files. The images files are loaded using the performance strategy, which means that once they are requested and cached and there is a new request for one of them, it is fetched from cache instead of fetching the data again from the server, as long as its maximum age hasn’t expired. The database files are loaded using the freshness strategy, which means that the service worker will first try to fetch the files from the server, even if they are already cached, and only if the request times out, will it fetch them from the cache. The maxSize property for both dataGroups is set to 100, which means that up until 100 image files can be cached. The maxAge property for both dataGroups is set to 3 days so that the files are cached for three days before expiring. The timeout property for both dataGroups is set to 10 seconds, meaning that the service worker will timeout a request from the server after that time and fetch the files from the cache.

5.6 Tourists’ Application – Code Documentation

In this section, we present the folder structure of the tourists’ application code we developed. We also document the code implemented to provide details that will help future developments.

5.6.1 Folder Structure and Content

The tourists’ application code is present in the src folder, which is divided into four folders and some global ﬁles.

Figure 5.64: Source folder structure 5.6 Tourists’ Application – Code Documentation 121

Figure 5.65: App folder structure

In the app folder, the core folder contains models, services and other common functions for all the components. The menu folder contains the menu component, which handles the in-app navigation. The pages folder contains the components code and also the store for the application data. The store folder contains the AppState. The App Module contains the main module of the application responsible for, for instance, conﬁguring the application routes, registering the service worker, conﬁguring the Firebase connection and setting the route strategy. The app component is the root level of the components tree. We used the ion-router-outlet responsible for managing the application navigation.

Figure 5.66: Core folder structure

Figure 5.67: Pages folder structure

In the pages folder, each page folder contains the components, containers and guards. The dashboard folder also contains the store for the DashboardState. The experience folder also contains a component that works as a template to create the different modules previews.

(b) Experience (c) Experiences-map (a) Dashboard

(d) Favourites (e) Filter

Figure 5.68: Pages inside folders structure

(b) Filter (a) Favourites

Figure 5.69: DashboardState and AppState store folders structure

The two store folders contain the components that form an NgRx store. 5.6 Tourists’ Application – Code Documentation 123

5.6.2 Core

5.6.2.1 Models

5.6.2.2 Services

The commonStoreActions service contains methods relative to experiences and activities that are used in multiple components. The setActivitiesAvailability method sets the available activities as locked or unlocked based on the proximity between an activity and the user location. The com- pleteActivity method sets an activity as completed and then checks if all of the experience, to which the activity belongs, activities are completed and if they are, calls the openExperienceCompleted- Modal method to open the experience completed modal panel with the type full. If the experience activities aren’t all completed, but the completed activity is marked as ﬁnal, then the openEx- perienceCompletedModal method is called to open the experience completed modal panel with the type partial. Lastly, the completeActivity method calls the setNewAvailableActivities method, responsible for making the children activities of the completed activity available. The localStorage service is responsible for managing the data stored on the device. There are the set, get, remove and keys methods that are used to manipulate that data. The getExperi- encesCompleted method gets an experience key and fetches the activities data from that key from the device. It then checks if all the activities are completed. The setActivityCompletedTrue and the setActivityCompletedFalse methods set an activity as completed or not accordingly in the device. The setActivityGoalsCompleted method sets the goals of an activity in the device. The setExpe- rienceFavourite method sets an experience as favourite in the device. The setActivitySequence method sets a sequence of activities ids, that represent the order the user completed activities in an experience, in the device. In the experience service, there is the method used to get experiences from the database. In the module service, there is the method to get modules from the database. The toast service is used to show a toast with a certain message to the user.

5.6.2.3 Other ﬁles

In the auxFunctions ﬁle, there is an auxiliary function to get the distance between two geographic coordinates. The NoCacheHeadersInterceptor is used to intercept HTTP requests and add to them a cache-control property to make sure that all cached resources are revalidated before being used. 124 Implementation of the System

5.6.3 Dashboard

Before entering the dashboard page the experience and the module guards must return true.

5.6.3.1 Containers

The dashboard component is responsible for getting an Observable of the ordered experiences and pass them to the experience-list component. It also contains the searchExperiences method that gets experiences by title. In this component, there is a subscription to restart variables once the user re-enters it. The startLocation method subscribes to the geolocation watchPosition method, which calls the updateLocation method when the user location is updated and calls the updateLo- cationError method when the user location can’t be fetched. The updateLocation method calls the setLocation method. The setLocation method updates the user location and updates the Observable of the ordered experiences with the new location so that they are re-ordered. The setFavourites method gets the favourite experiences from the device and sets them as favourites in the store. The setCompleted method gets the completed experiences from the device and sets them as completed in the store. The destroy method clears the location watchPosition method. The experience-list component is responsible for calling the experience-item component for each experience.

5.6.3.2 Components

The dashboard-toolbar component is responsible for calling the searchExperiences method of the dashboard component with the query parameter inserted by the user. The setSearch method implements a subscription on the search icon so that when the user clicks on it the search bar expands. The experience-item component is responsible for marking an experience as a favourite when the user clicks on the favourite button.

5.6.3.3 Guards

5.6.4 Experience

5.6.4.1 Containers

The experience component implements two subscriptions. One subscription is used to restart variables once the user re-enters in it. The other subscription is used to destroy the component variables and clear the location watchPosition method. The startLocation method subscribes to 5.6 Tourists’ Application – Code Documentation 125 the geolocation watchPosition method, which calls the updateLocation method when the user location is updated and calls the updateLocationError method when the user location can’t be fetched. The updateLocation method updates the user location and sets it on the store. The startFunctions method gets the selected experience, loads the experience connections and the activities in the store, and resets the available activities and the activities sequence in the store. It also calls the getActivitiesCompleted method, sets the available activities in the store and calls the getActivitiesSequence and the startLocation methods. The recursive method is used to get the available activities recursively analysing each activity’s connections. The getActivitiesCompleted method gets the selected experience’s activities from the device and sets them in the store. The getActivitiesSequence method gets the selected experience’s sequence from the device and sets it in the store.

5.6.4.2 Components

The activity component is responsible for getting an Observable of the available activities so that when only when the activities are loaded the component gets the selected activity. The subscriptions implemented in this component are the following:

1. When the user re-enters the component variables are restarted;

2. When the user location changes, it reﬂects in the component;

3. The activities Observable is subscribed so that when they change, the changes are reﬂected in the component.

The removeSiblingsActivities method removes the sibling activities of the selected activity so that only the selected activity remains available. The activity-item component is responsible for getting the address of an activity from its geographic coordinates and displaying an activity’s distance to the user location, address and whether it is locked or not and completed or not. The audio component is responsible for playing and stopping the audio ﬁle that is passed to it. It also calls the EventEmitter stopAllAudios method to stop the other audios that might be playing before playing its own. The completed-modal component displays a message according to whether the experience is partially or fully completed. In case the experience is partially completed the user can leave or continue it, while in case the experience is fully completed the user can only leave it. The dynamic component gets the type of component to create and calls it in the HTML template. The experience-intro component is responsible for getting an Observable of the selected experience. The restart method resets the selected experience and removes its saved data on the device. It then calls the startFunctions method that completes the experience reset and sets the available activities. The recursive method is used to get the available activities recursively analysing each activity’s connections. T 126 Implementation of the System

he experience-list component is responsible for getting an Observable of the selected experience, the available activities, the available activities that are completed and all of the activities (including non-available ones). The component implements a subscription to update the activities when they change and another subscription that starts the previous subscription when the user re-enters the page. The experience-map component is responsible for getting an Observable of the available activities, the available activities that are completed, all of the activities (including non-available ones) and the activities sequence. The subscriptions implemented in this component are the following:

1. The activities Observable is subscribed so that when they change, the changes are reﬂected and the initMap method is called if the map is not yet initialized;

2. When the user re-enters the page, the components’ variables are restarted;

3. When the user location changes, it reﬂects in the component;

4. When the user completes an activity it is added to the activities sequence and a new line is drawn in the map between all completed activities.

The destroyMap method destroys the map instance and removes its element from the DOM so that other components can initialize a map in an element with the same id as this. The initMap method creates a map instance with some parameters and options. It then adds a tile layer to the map to display the OpenStreetMap tiles and creates the compass control to rotate the user marker according to the device orientation. The setSequenceLines method creates a line between the activities completed. The setMapListeners method sets a click event on the map so that when the user clicks on the map and an activity is selected, it becomes unselected. It also sets a moveend event on the map, so that when there is map movement it can set a variable to recenter the map on the user location. The setActivitiesOnMap creates each activity’s marker and calls the setMarkerColor to set their pins. The setMarkerColor method assesses the activity state and sets its pin accordingly. The hasSiblings method checks if a given activity has siblings and if so, its pin will indicate that. The experience-radar component is responsible for getting an Observable of the available activities, the available activities that are completed, all of the activities (including non-available ones) and the activities sequence. The subscriptions implemented in this component are the following:

1. The activities Observable is subscribed so that when they change, the changes are reﬂected and the initMap method is called if the map is not yet initialized;

2. When the user re-enters the page, the components’ variables are restarted;

3. When the user location changes, the map updates to the new location;

4. When the user completes an activity it is added to the activities sequence and a new line is drawn in the map between all completed activities; 5.6 Tourists’ Application – Code Documentation 127

5. When the user resizes the window size the resizeMap method is called to force the map to readjust to the new window measures.

The getMapMeasures method calculates the map element width and height. The destroyMap method destroys the map instance and removes its element from de DOM so that other components can initialize a map in an element with the same id as this, and it also removes the arrow elements from the DOM. The destroy method clears the time interval that is used for the centre map timer. The initMap method creates a map instance with some parameters and options. It then creates the compass control to rotate the map behind the radar and the arrow indicators when the map is centred on the user location. The setIndicators method creates, updates and deletes arrow indicators of activities that are far from the user location. The setSequenceLines method creates a line between the activities completed. The setMapListeners method sets a click event on the map so that when the user clicks on the map and an activity is selected, it becomes unselected. It also sets a moveend event on the map, so that when there is map movement, it calls the setIndicators method and also starts the timer to recenter the map on the user location after a few seconds. The getLeftTop method gets the new coordinates for an arrow indicator. The getOpacity method sets the opacity of an arrow indicator based on the proximity of its activity location to the user location. The createIndicator method creates an arrow indicator at the given coordinates and the changeIndicator method repositions it. The setActivitiesOnMap creates each activity’s marker and calls the setMarkerColor to set their pins. The setMarkerColor method assesses the activity state and sets its pin accordingly. The hasSiblings method checks if a given activity has siblings and if so, its pin will indicate that. The createCircles method creates the radar circles with the predefined radius. The projectPoint method calculates a point projection to the screen size, meaning that if an activity is not visible in the screen because it’s too far away, this method calculates the direction from it to the centre of the screen and projects it on the limit of the screen. The startTimer method creates a timer with a predefined number of seconds so that when it reaches zero the map recenters on the user location. The experience-toolbar component is responsible for navigating back when the user clicks on the back button. The image-modal component is responsible for displaying an image in a modal panel. The map-activity component is responsible for navigating to an activity page. The map-media component is responsible for getting an Observable of the available activities. There are two subscriptions implemented in this component. One subscription is used to update the goals array when activities are updated. The other subscription is used when the user resizes the window size the resizeMap method is called to force the map to readjust to the new window measures. The setLocation method sets the user location. The setGoals method initial- izes the goals array. The checkGoals method any of the goals can be marked as complete on the new userlocation. The updateLocation method updates the map with the new user location if it is centred, calls the checkGoals method if the goals aren’t all completed yet, updates the user marker position and calls the getMapMeasures method to check if there were any changes to the map 128 Implementation of the System measures. The getMapMeasures method calculates the map element width and height. The de- stroyMap method destroys the map instance and removes its element from de DOM so that other components can initialize a map in an element with the same id as this, and it also removes the arrow elements from the DOM. The destroy method clears the time interval used for the centre map timer and the time interval used in case the activity had a timer set. The initMap method creates a map instance with some parameters and options. It then creates the compass control to rotate the map behind the radar and the arrow indicators when the map is centred on the user location. The setIndicators method creates, updates and deletes arrow indicators of goals that are far from the user location. The setMapListeners method sets a moveend event on the map so that when there is map movement, it calls the setIndicators method and also starts the timer to recenter the map on the user location after a few seconds. The createCircles method creates the goals circles. The createUserCircles method creates the radar circles with the predefined radius. The getLeftTop method gets the new coordinates for an arrow indicator. The getOpacity method sets the opacity of an arrow indicator based on the proximity of its goal location to the user location. The cre- ateIndicator method creates an arrow indicator at the given coordinates and the changeIndicator method repositions it. The projectPoint method calculates a point projection to the screen size. The startTimer method starts a timer when the activity has a timer set for the user to finish it, and once it reaches zero seconds, checks if all the goals are completed or not. The startCenterTimer method creates a timer with a predefined number of seconds so that when it reaches zero the map recenters on the user location. The move method slides the images list left and right. The slider component is responsible for displaying a slider of images and making the transi- tions between images. The dynamic-content-viewer component is responsible for creating instances of the dynamic component using a ComponentFactory. The loadMedia method gets the media data from the module data of the selected activity. The build method iterates through the components set in the module HTML configuration and then creates each one of them as a dynamic component. It also passes to each component the corresponding module data. The stopAllAudios method stops all audio files that exist in the component. The destroy method destroys the created components.

5.6.4.3 Guards

The experience-exists guard is responsible for checking if the application has already loaded the experiences from the database and, if not, wait until it is done. It also checks if an experience exists. The module guard is responsible for checking if the application has already loaded the modules from the database and, if not, wait until it is done. The SyncGuardHelper is used to apply two or more guards to the same route. The deactivate guard is used to call the component’s destroy method when the user leaves the page. 5.6 Tourists’ Application – Code Documentation 129

5.6.5 Experiences-Map

5.6.5.1 Containers

The experiences-map container is responsible for getting an Observable of the ordered experiences and pass them to the experience-list component. There are two subscriptions implemented in this component. The activities Observable is subscribed so that when they change, the changes are reﬂected and the initMap method is called if the map is not yet initialized. The other subscription restarts the component’s variables once the user re-enters the page. The startLocation method subscribes to the geolocation watchPosition method, which calls the updateLocation method when the user location is updated and calls the updateLocationError method when the user location can’t be fetched. The updateLocation method calls the setLocation method. The setLocation method updates the user location, centres the map on the user location and repositions the user marker on the map. The setCompleted method gets the completed experiences from the device and sets them as completed in the store. The destroy method clears the location watchPosition method. The destroyMap method destroys the map instance and removes its element from the DOM so that other components can initialize a map in an element with the same id as this. The initMap method creates a map instance with some parameters and options. It then adds a tile layer to the map to display the OpenStreetMap tiles and creates the compass control to rotate the user marker according to the device orientation. The setMapListeners method sets a click event on the map so that when the user clicks on the map and an activity is selected, it becomes unselected. It also sets a moveend event on the map, so that when there is map movement it can set a variable to recenter the map on the user location. The setActivitiesOnMap creates each activity’s marker and calls the setMarkerColor to set their pins. The setMarkerColor method assesses the activity state and sets its pin accordingly. The checkExperienceState method returns an experience state (fully completed, partially completed, continue or start).

5.6.5.2 Components

The experience-toolbar component is responsible for navigating back when the user clicks on the back button. The map-experience component is responsible for navigating to the selected experience page when the user clicks on the enter button.

5.6.5.3 Guards

The experience guard is responsible for checking if the application has already loaded the experiences from the database and, if not, wait until it is done. It is also used to call the component’s destroy method when the user leaves the page. 130 Implementation of the System

5.6.6 Favourites

5.6.6.1 Containers

The favourites component is responsible for getting an Observable of the ordered favourite experiences and pass them to the experience-list component. It also contains the searchExperiences method that gets favourite experiences by title. In this component, there is a subscription to restart variables once the user re-enters it. The startLocation method subscribes to the geolocation watch- Position method, which calls the updateLocation method when the user location is updated and calls the updateLocationError method when the user location can’t be fetched. The updateLo- cation method calls the setLocation method. The setLocation method updates the user location and updates the Observable of the ordered experiences with the new location so that they are re- ordered. The setFavourites method gets the favourite experiences from the device and sets them as favourites in the store. The setCompleted method gets the completed experiences from the device and sets them as completed in the store. The destroy method clears the location watchPosition method. The experience-list component is responsible for calling the experience-item component for each experience.

5.6.6.2 Components

5.6.6.3 Guards

5.6.7 Filter

5.6.7.1 Containers

The ﬁlter component is responsible for getting an Observable of the tags. The changeOrder method sets the order by which experiences will be ordered and the changeFilter method sets the ﬁlter to be applied to the experiences. 5.7 Summary 131

5.6.7.2 Components

The dashboard-toolbar component is responsible for displaying the menu button.

5.6.7.3 Guards

The experience guard is responsible for checking if the application has already loaded the experiences from the database and, if not, wait until it is done.

5.6.8 Stores

5.6.9 Service Worker

The service worker is implemented in the same way as the authoring tool’s service worker (Section 5.6.7).

5.7 Summary

In this chapter, we described the technologies used in the development of the project and justified their use. Some of these technologies had already been addressed in Section 2.3, like the PWA, Angular and Ionic. The others – NgRx, Firebase, Interact.js, Cytoscape.js and Leaflet – were considered only during the planning and the implementation phases. In this section, we also answered the first research question regarding PWAs. We then detailed the implementation of the system and presented the different prototypes that were developed. For each prototype, we explained each feature implemented and presented images to help visualise them. We also presented the two implemented modules. After that, we documented the code developed, presenting the folder structure and explaining the code of each component of both applications. The code explanation consisted of detailing the purpose and the functioning of each method of each component to help the developers that will continue this project. This page was intentionally left mostly blank. Chapter 6

System Testing

In this chapter, we describe the executed quality assurance tests for both applications. These were made to guarantee that they have the best performance possible and to check the system integrity. When testing a system we can perform four phases of testing: 1) unit testing – consists of testing the smallest piece of code independently from the others and verify if it produces the expected output from a certain input [138]; 2) integration testing – consists of combining multiple unit tests and testing them as a group, which allows the tester to verify if the interaction between those pieces of code is working correctly [138]; 3) system testing – consists of testing the different components and features of a system and verify that the requirements for the system were fulﬁlled [5]; and 4) acceptance testing – consists of testing user scenarios to verify if the system meets the customer requirements [138]. We chose to focus on system testing because our goal was to make sure that the system does not break and that the requirements were met. As such, in this section, we present the type of tests that were executed. In Section 6.1, we describe the test cases. In Section 6.2, we present the results of the tests and analyse them to draw conclusions. And, in Section 6.3, we present a summary of the previous sections. This type of testing is inserted in the Black Box testing category,1 which concerns the tests made to the features of a system without knowing the source code [61]. Within system testing, many types of tests can be performed to address different parts of the system [114]. We have selected the following types of tests to perform, divided into functional and non-functional 6.1. These tests allowed us to verify the integrity of the system. They test if it can recover from critical fails and keep on functioning properly. These tests also check if the required features are working as expected and if the system runs smoothly on any device.

1“Black-box testing evaluates high-level design and the customer requirements speciﬁcation, to ensure the system does what it is intended to do”. [67]

133 134 System Testing

Table 6.1: Types of tests executed

Type Description Functional Tests Functionality Testing Consists of performing a set of planned test cases to cover all the system requirements. This ensures that the system speciﬁcations are implemented and working properly [114]. Recoverability Testing Consists of giving wrong inputs to the application and verify if the system is capable of dealing with the resulting errors [114]. Exception Handling Consists of verifying if the system is capable of Testing dealing with a fatal exception, display an error message to the user and keep working properly [114]. Graphical User Consists of the user testing all visual interface elements Interface Testing and on verifying if they are working as expected [114]. Ad-hoc Testing Consists of a tester trying to make an application stop working with a fatal error [114]. Non-Functional Performance Testing Consists of testing the system in different conditions, Tests like different devices, different OSs, different browsers, and verify how the system performs on each test environment [114]. Compatibility Testing Consists of testing the system in different conditions, like different devices, different OSs, different browsers, and verify if the system works as expected in each [114].

6.1 Tests’ Structure and Procedures

We applied each type of test to both applications. All the tests were supervised by us to better identify possible bugs through constant feedback from users. Before starting the test session, the users were asked for the speciﬁcations of the test environment. All test sessions started with a brief explanation of the system and the different types of tests to be performed. Then, we gave them the user manual for the application under testing along with an assets folder2 with images and audio ﬁles for the tests of the authoring tool. In the user manual, all the functionalities of the application are described, providing the user with the knowledge required to operate the applications. For the functionality, performance, graphical user interface and compatibility tests, we gave the user a script with the tasks to perform (see AppendixA andB). With this script, users covered all the features of the application. For the recoverability, exception handling and ad-hoc tests, we gave users the freedom to test the features by the order they wanted. This way we could also

2In this assets folder, we provided six PNG images with sizes between 10 and 13 kilobytes, one JPG image with a size of 1,06 megabytes and one MP3 audio file with a size of 4,8 megabytes that the user could use in the tests that involved uploading files. This way the user could test the system capacity of uploading files with different types and sizes. By providing this example files the user doesn’t need to waste time downloading files for the tests. 6.1 Tests’ Structure and Procedures 135 uncover possible bugs when a certain set of tasks was performed in a different order from the one planned.

The functionality tests consisted of the user following the script of tasks covering all the application features and allowing us to identify possible bugs in those. The recoverability tests consisted of the user giving wrong inputs on the input ﬁelds and verifying if the application continues to function when errors occurred. The ad-hoc testing consisted of the user trying to bring the application to a critical failure and stop working. The exception handling tests consisted of us verifying if the system was capable of dealing with critical failures that could happen during the tests. The performance testing consisted of the user following the script of tasks and allowing us to verify if there were any differences in the performance of the application compared to other test results in different conditions. The compatibility tests consisted of the user following the script of tasks and allowing us to verify if there were any problems in doing the tasks in the test environment used to perform them. The graphical user interface tests consisted of the user interacting with all interface elements.

In the tables displayed below, we present the test cases that were executed for each application. Each test case has ﬁve properties: 1) an ID, to identify the test case; 2) a summary, to describe the feature that is tested in the test case; 3) a precondition that details the conditions that need to be met for the test case to be executed; 4) the steps, which detail the tasks that the user needs to perform on each test case; 5) the expected results explain what is supposed to happen after the user executes the test case.

Table 6.2: Authoring Tool Test Cases

ID Summary Precondition Steps Expected results 1 Add application to 1) The user 1) The user clicks on the 1) The application is installed Home Screen opened the “Add to Home Screen” and can be run like any other application link button to install the installed application. application. 2 Create an 1) The user is 1) The user clicks on the 1) The experience is created experience on the plus button; and added to the database; dashboard 2) The user ﬁlls the create 2) The application opens the page 2) The user ﬁlls the create newly created experience page. experience form with the experience name, description, tags and an optional image; 3) The user clicks on the save button. 3 Give location 1) The user is 1) The user clicks on the 1) The application gets the user permission on the “Allow” button to give location and centres the map on experience location permission. this location. page. 136 System Testing

4 Edit an 1) The 1) The user edits the 1) The experience is updated. experience on experience experience description in the experience update menu the experience edit form; page is open. 2) The user clicks on the save button. 5 Open/Close the — 1) The user clicks on the 1) The right side menu opens or right side menu right side menu button to closes accordingly. open/close. 6 Create activity — 1) The user drags the “Add 1) A new activity named “New by dragging Activity” button and drops it activity” with the “Information the “Add on the map. Module” selected is created and Activity” placed on the map with the button to geographical coordinates the map corresponding to the point in the map where the user dropped it; 2) The activity update menu is open on the right side menu. 7 Update an 1) The update 1) The user clicks on the 1) The activity’s information activity activity menu “Information” button; section is open and filled with information is open. 2) The user edits the new data. section activity’s name field, the tags field, changes the pin colour and checks the “Start here” checkbox. 8 Update the 1) The update 1) The user clicks on the 1) The information section is content activity menu “Content” button; closed; section of an is open; 2) The user clicks on the 2) The activity’s content section activity 2) The “Textarea” button and fills is open and filled with new data. with the “Information the textarea field; “Information Module” is 3) The user clicks on the Module” selected. “Image” button; selected 4) The user clicks on each of the “Choose” buttons and selects an image from the provided assets folder; 5) The user clicks on the “Audio” button, clicks on the “Choose” button and selects an audio file from the assets folder. 9 Update an 1) The update 1) The user clicks on the 1) The content section is closed; activity’s activity menu “Requirements” button; 2) The activity’s requirements requirements is open. 2) The user fills the section is open and filled with section proximity, the schedule and new data. the days’ fields. 10 Preview 1) The update 1) The user clicks on the 1) The preview activity modal activity activity menu “Preview” button. panel opens with the content is open. inserted before. 6.1 Tests’ Structure and Procedures 137

11 Unsaved 1) The user 1) The user clicks on the 1) The unsaved changes alert activity edited an map. opens. changes activity’s data alert in the update activity menu. 12 Save 1) The update 1) The user clicks on the 1) The activity is updated and activity activity menu “Save” button. the experience is saved in the is open. database with the new activity. 2) The experience update menu is open on the right side menu. 13 Create — 1) The user clicks on the 1) A new activity named “New activity “Add Activity” button; activity” with the “Information clicking 2) The user clicks on a 2) The user clicks on a point on the point in the map. placed on the map with the “Create 3) Repeat test case 7 geographical coordinates Activity” corresponding to the point in the and then map where the user clicked; clicking on 2) A connection is created from a point in the first to the second activity; the map 2) The activity update menu is open on the right side menu. 14 Select a 1) The update 1) The user clicks on the 1) The activity’s modules section module activity menu is “Modules” button; is open and the second module open. 2) The user clicks on the is selected. second module, the “Location Module”. 15 Update the 1) The update 1) The user clicks on the 1) The modules section is content activity menu is “Content” button; closed; section of open; 2) The user clicks on the 2) The activity’s content section an activity 2) The “Location “Number” button and fills is open and filled with new data. with the Module” is the fields; “Location selected. 3) The user clicks on the Module” “Image” button; selected 4) The user clicks on each of the “Choose” buttons and selects an image from the provided assets folder; 5) The user clicks on the “Location” button; 6) The user clicks on each of the “Choose” buttons, places a pin on the map that opens and clicks on the “Confirm” button. 7) Repeat test case 9, 10 and 11 16 Move activity 1) There is at 1) The user drags an 1) The dragged activity’s least one activity activity pin and drops coordinates are updated. on the map. it on a different location. 138 System Testing

17 Contextual 1) There is at 1) The user presses an 1) The contextual menu of the menu least one activity activity pin for 1 second. pressed activity opens. on the map 18 Duplicate 1) There is at 1) Repeat test case 17; 1) A new activity is created with activity least one activity 2) The user clicks on the the same title, pin colour, on the map. “Duplicate” button and clicks module and requirements as the on it. duplicated activity. This activity is placed next to the duplicated activity with a connection from the most recent activity. 19 Undo 1) At least one 1) The user clicks on the 1) The new activity is deleted activity action undo arrow to undo the along with its connection. has been most recent activity action performed. performed. 20 Redo 1) At least one 1) The user clicks on the 1) The new activity is re-created activity action redo arrow to redo the most along with its connection. has been recent undone action. undone. 21 Create 1) There are at 1) The user drags the 1) A new connection is created connection least two knob above the activity from the third to the first activity. interactively activities on the pin to the first map. activity created. 22 Open delete 1) The update 1) The user clicks on the 1) The delete connection alert connection connection “Delete” button. opens. alert menu is open. 23 Delete 1) The delete 1) The user clicks on the 1) The selected connection is connection connection alert “Confirm” button. deleted. is open. 24 Create and 1) The update 1) The user clicks on the 1) The connection from the first delete activity menu of “Connections” button; to the second activity is deleted; connections the second 2) The user clicks on the 2) A new connection is created through the activity is open. “Plus” button next to the from the third to the second update first select box; activity. activity 3) The user selects the menu available activity of the connections empty select box; section 4) The user clicks on the “Trash” button next to the select box in the “To” subsection; 6) Repeat test case 11. 6.1 Tests’ Structure and Procedures 139

25 Open delete 1) The update 1) The user clicks on the 1) The delete activity alert activity alert activity menu of “Delete” button. opens. the third activity is open. 26 Delete 1) The delete 1) The user clicks on the 1) The selected activity is activity activity alert is “Confirm” button. deleted; open. 2) The connections to and from the third activity are deleted. 27 Create a — 1) The user clicks on the 1) Three new activities are linear set arrow next to the “Add created in the centre of the of activities Activity” button; screen; 2) The user clicks on the 2) The first of these three “Linear” option of the activities is connected to the select box. second; 3) The second of these three activities is connected to the third. 28 Create a — 1) The user clicks on the 1) Three new activities are branched arrow next to the “Add created in the centre of the set of Activity” button; screen; activities 2) The user clicks on the 2) The first of these three “Branched” option of the activities is connected to the select box. second and the third. 29 Create a cyclic — 1) The user clicks on the 1) Three new activities are set of activities arrow next to the “Add created in the centre of the Activity” button; screen; 2) The user clicks on the 2) The first of these three “Cyclic” option of the select activities is connected to the box. second; 3) The second of these three activities is connected to the third. 3) The third of these three activities is connected to the first. 30 Create an — 1) The user clicks on the 1) Three new activities are exploratory arrow next to the “Add created in the centre of the set of Activity” button; screen with no connections. activities 2) The user clicks on the “Exploratory” option of the select box. 31 Search address — 1) The user clicks on the 1) The map centres on the “Search” button in the map; selected address. 2) The user inputs a valid address; 3) The user clicks on one of the options of the select box. 140 System Testing

32 Pan the map — 1) The user pans the map to 1) The map is panned. check where the next activities are. 33 Centre map 1) The user 1) The user clicks on the 1) The map is centred on the gave location “Centre map” button. user location. permission; 2) The map is not centred. 34 Zoom in/out — 1) The user clicks on the 1) The map zooms in and then “Zoom in” button; out. 2) The user clicks on the “Zoom out” button. 35 Switch view — 1) The user clicks on the 1) The map view changes toggle to switch between between the map view and the map and canvas mode. canvas view. 36 Open preview — 1) The user clicks on the 1) The preview experience experience modal “Run” button. modal panel opens. panel 37 Preview 1) The 1) The user selects an 1) The selected activities are experience preview activity to start the preview previewed; experience from the select box; 2) Once the user clicks on the modal 2) The user clicks on the “Leave” button, the preview panel is “Start” button; experience modal panel closes. open. 3) The user sees the activity preview and selects the next activity to preview; 4) The user clicks on the “Next” button; 5) The user repeats steps 3 and 4 until the selected activity doesn’t have any following activities; 6) The user clicks on the “Leave” button. 38 Save 1) There are 1) The user clicks on the 1) The experience is saved in experience unsaved “Save” button. the database. changes. 39 Publish — 1) The user clicks on the 1) The experience is marked as experience “Publish” button. published. 40 Open — 1) The user clicks on the 1) The navigation menu is open. navigation “Hamburger” button. menu 41 Navigate using 1) The 1) The user clicks on the 1) The application navigates to the navigation navigation “Dashboard” button. the dashboard page. menu menu is open. 6.1 Tests’ Structure and Procedures 141

42 Edit — 1) The user clicks on the 1) The experience is updated experience “Edit” button of the and saved in the database. in the previously created dashboard experience; 2) The user edits the description in the update experience form; 3) The user clicks on the save button. 43 Delete 1) There is at 1) The user clicks on the 1) The test experience is experience least one “Trash” button of a test deleted from the database. experience. experience. 44 Search 1) The 1) The user clicks on the 1) The experiences whose title experience dashboard search bar; include the search terms are page is 2) The user writes part of displayed. open. the title of an existing experience. 45 Ofﬂine 1) The user has 1) The user opens the ﬁrst 1) The experiences load as if mode entered the experience in the there was a network connection; application when dashboard; 2) When the user creates and online; 2) The user creates and updates a new experience, a message 2) All the updates an activity; is displayed informing that there necessary 3) The user turns on the is no network connection; assets have network connection; 3) After the user saves the been cached; 4) The user saves the experience a message is 3) There is no experience. displayed informing that it was network successful. connection.

Table 6.3: Tourists’ Application Test Cases

ID Summary Precondition Steps Expected results 1 Add 1) The user 1) The user clicks on the 1) The application is installed application to opened the “Add to Home Screen” and can be run like any other Home Screen application link. button to install the installed application. application. 2 Give location — 1) The user clicks on the 1) The application gets the user permission “Allow” button to give location. location permission. 3 Experiences — 1) The user clicks on the 1) The application navigates to map “Find experiences near you” the experiences map page. button. 142 System Testing

4 Enter experience 1) The 1) The user clicks on the 1) The application navigates to through the experiences nearest experience pin; the about page of the selected experiences map map page is 2) The user clicks on the experience. open. “Start” button. 5 Open activities 1) An 1) The user clicks on the 1) The application navigates to list view experience page “Activities” button in the the activities list page. is open. bottom menu. 6 Start activity 1) The activities 1) The user clicks on the 1) The application navigates to through the list page is “Start” button of the ﬁrst the selected activity page. activities list open; unlocked activity. 2) There is at least one unlocked activity. 7 Complete an 1) The activity 1) The user clicks on the 1) The application navigates to activity opened has the “Complete” button. the map page; with the “Information 2) The activity becomes “Information Module” module Module” associated. to the completed one; 3) The activities connected to the one completed become available. 8 Pan the map 1) The map 1) The user pans the map to 1) The next activities are page is open. check where the next visible on the map. activities are. 9 Zoom in/out — 1) The user clicks on the 1) The map zooms in and then “Zoom in” button; out. 2) The user clicks on the “Zoom out” button. 10 Compass — 1) The user rotates the 1) The compass rotates always device around. pointing north; 2) The user icon rotates facing the same direction as the device. 11 Search — 1) The user clicks on the 1) The user clicks on the address “Search” button in the map; selected address. 2) The user inputs a valid address; 3) The user clicks on one of the options of the select box. 12 Centre map 1) The map is 1) The user clicks on the 1) The user clicks on the not centred. “Centre map” button. user location. 13 Open radar — 1) The user clicks on the 1) The application navigates to page “Radar” button in the the radar page. bottom menu. 14 Radar 1) The radar 1) The user rotates the 1) The user rotates the page is open. device around. and displays the pins and arrows relative to the device orientation. 6.1 Tests’ Structure and Procedures 143

15 Open 1) There are at 1) The user selects one of 1) The application navigates branched least two the branched activities; to the selected activity page; activity activities 2) The user clicks on the 2) The other activities connected to “Start” button. connected to the the completed completed activity activity. become unavailable. 16 Complete an 1) The activity 1) The user follows the 1) The application navigates activity opened has radar towards each of the to the map page; with the the “Location goals; 2) The activity becomes “Location Module” 2) Once the user is near the completed and its pin Module” associated. location of one of the goals, changes to the completed one; looks at the pictures 3) The activities connected to displayed on the screen and the one completed become looks for the places available; represented; 4) The completed activities 3) The user enters the are linked representing proximity range of each the completed path. goal. 17 Complete an 1) There is at 1) The user completes an 1) The “Partially completed” activity marked least one activity activity marked as final. modal panel opens. as final marked as final. 18 Fully complete 1) There is only 1) The user completes the 1) The “Fully completed” an experience one activity left only activity left in an modal panel opens. to complete in experience. an experience. 19 Mark 1) The 1) The user clicks on the 1) The experience is marked experience dashboard page “Star” button of the first as a favourite; as favourite is open. experience listed. 2) The “Star” button becomes darker. 20 Open navigation — 1) The user clicks on the 1) The navigation menu menu “Hamburger” button. is open. 21 Navigate to the 1) The 1) The user clicks on the 1) The application navigates favourites page navigation menu “Favourites” button. to the favourites page; is open. 2) There is one experience (the one previously marked as a favourite). 22 Navigate to the 1) The 1) The user clicks on the 1) The application navigates dashboard page navigation menu “Experiences” button. to the dashboard page. is open. 23 Navigate to the 1) The 1) The user clicks on the 1) The application navigates filters page navigation menu “Filters” button. to the filters page. is open. 144 System Testing

24 Apply filters 1) The filters 1) The user applies the 1) The experiences are ordered page is open proximity filter to 1000m; by name and are filtered to have 2) The user applies the tags proximity of up until 1000m and filter to “Recreation” the “Recreation” tag. 3) The user changes the “order by” field to name; 4) Repeat test case 22. 25 Enter 1) The 1) The user clicks on the 1) The application navigates to experience dashboard first experience listed. the about page of the selected through the page is experience. dashboard open. page 26 Search 1) The 1) The user clicks on the 1) The experiences whose title experience dashboard page search bar; includes the search terms are is open. 2) The user writes part of displayed. the title of an existing experience. 27 Load saved 1) There are 1) The user closes the 1) The application loads the progress activities or application; progress saved locally; experiences 2) The user re-opens the 2) The opened experience is completed. application and opens the complete, all the activities are previously completed already completed. experience; 3) Repeat test case 5. 28 Restart 1) There is one 1) The user opens the 1) The experience resets and is experience experience completed experience; now able to be started again. completed. 2) In the about page of the experience, the user clicks on the “Restart” button. 29 Offline mode 1) The user has 1) The user opens the first 1) The experiences load as if navigated to the experience in the there was a network connection; pages that will dashboard; 2) The user completes all the be tested; 2) The user navigates to the activities as if there was a 2) All the map page; network connection without any necessary 3) The user completes all errors. assets have the activities of the been cached; experience. 3) There is no network connection. 6.2 Results 145

6.2 Results

6.2.1 Authoring Tool Results

The tests of the authoring tool were performed remotely by 15 different testers. From each test we extracted results for the seven types of tests we were analysing.

Table 6.4: Authoring Tool Test environments

Device Operative System Browser Number of testers Desktop Windows Chrome 2 Firefox 2 Linux Chrome 1 Firefox 2 Mac OS Chrome 2 Safari 2 Tablet Android Chrome 1 Firefox 1 iOS Chrome 1 Safari 1

6.2.1.1 Functionality Tests

All the functionalities worked properly on every test environment with only the following minor bugs reported:

1. When a new activity is created, its update activity menu connections’ section is not updated with the new connection automatically created between the two most recent activities;

2. When the update activity menu is open and the user creates a connection between an activity and the selected one, the connections’ section is not updated;

3. When the user edits an activity’s data in the update activity menu and then clicks on another activity, the alert warning the user that there are unsaved changes doesn’t open.

There were also two functionalities that did not work on every test environment that are detailed in the compatibility tests section (Section 6.2.1.7). 146 System Testing

Figure 6.1: Authoring Tool Functionality Tests

6.2.1.2 Recoverability Tests

All the recoverability tests passed without reported errors. The testers gave wrong inputs in the following ﬁelds:

1. Media ﬁles;

2. Text;

3. Number.

In the media files input, even if the user tries to select an audio file when the requested file type is an image, the system ignores the file selected and the user needs to choose another one. In the text input there are no nuances, the user can write either letters, special characters or digits. In the number input, the user can only write numbers above or equal to zero.

Figure 6.2: Authoring Tool Recoverability Tests 6.2 Results 147

6.2.1.3 Exception Handling Tests

All the exception handling tests passed without the system stopping its execution. All the exceptions reported were dealt with smoothly. The exceptions reported were the following

1. Fetching modules or experiences or uploading ﬁles to the Firebase storage without network connection;

2. Submitting a form without ﬁlling all the mandatory ﬁelds;

3. Fetching map tiles and not being able to connect to the OpenStreetMaps server;

4. Saving an activity without ﬁlling the content section;

5. Trying to get the user location and failing.

On each of these failures, the system displays a message informing the user of the error that occured and continues to work properly.

Figure 6.3: Authoring Tool Exception Handling Tests

6.2.1.4 Graphical User Interface Tests

All the graphical user interface tests passed without any defects. The users were able to perform all features that required interacting with interface elements. 148 System Testing

Figure 6.4: Authoring Tool Graphical User Interface Tests

6.2.1.5 Ad-hoc Tests

All the ad-hoc tests passed without any user succeeding in stopping the application execution with a fatal error.

Figure 6.5: Authoring Tool Ad-hoc Tests

6.2.1.6 Performance Tests

The application performance was not influenced by the test environment, being uniform across different browsers, OSs and devices. The variable that could affect the loading time of the application would be the network connection speed, but after the first time the application loaded (fetching the application files, a large portion of the needed assets and the data from the database) that speed had minimal influence on the application performance since the needed data was stored in cache. 6.2 Results 149

Figure 6.6: Authoring Tool Performance Tests

6.2.1.7 Compatibility Tests

All functionality tests performed on the Chrome browser on any OS and device passed with the system working properly on every test. There were only two features that didn’t work on desktop devices on the Firefox browser in Linux and on the Safari browser in iOS: (i) fetching the user location; (ii) the Add to Home Screen feature. Some particularities on these features tests:

1. The user location feature works as expected on Android and Windows OSs, but it doesn’t work on Linux (Firefox browser) and iOS (Safari browser). Even though the browser prompts the user to give location permission, the Geolocation watchPosition (method used to get the user location) cannot get the user’s location;

2. The Add to Home Screen feature worked on the Firefox browser on tablets with the Android OS but didn’t work on desktop devices, neither on Linux nor on Windows OS. It also worked on the Safari browser on tablets with iOS but didn’t work on desktop devices. That is due to the fact that the Add to Home Screen feature is not yet compatible with Firefox browser and Safari browser on an OS different from Android or iOS. 150 System Testing

Figure 6.7: Authoring Tool Compatibility Tests

6.2.2 Tourists’ Application Results

The tests of the tourists’ application were performed by 9 different testers.

Table 6.5: Tourists’ Application Test environments

Device Operative System Browser Number of testers Mobile Android Chrome 5 Firefox 2 Tablet iOS Chrome 1 Safari 1

6.2.2.1 Functionality Tests

All the functionalities worked properly on every test environment with only the following minor bugs reported:

1. When the user enters an activity and moves outside that activity’s proximity range, it becomes locked;

2. The user cannot reach the fully completed experience state if there are mutually exclusive activities in that experience;

3. When the user clicks on an activity on the map, the activity menu opens in the bottom to allow the user to enter it. In this menu, there is an indication of the proximity between the user and the activity. As the user location changes, that proximity value doesn’t reﬂect the change unless the user closes the menu and re-opens it; 6.2 Results 151

4. When the user is on ofﬂine mode, enters the activities page and turns on the network connection, the activities address that weren’t fetched yet don’t update now that there is network connection.

Figure 6.8: Tourists’ Application Functionality Tests

6.2.2.2 Recoverability Tests

The application passed all recoverability tests without any reported errors. The only input ﬁelds that exist in the tourists’ application are the search ﬁelds. In these there are no nuances, the user can write either letters, special characters or digits.

Figure 6.9: Tourists’ Application Recoverability Tests

6.2.2.3 Exception Handling Tests

The application passed all the exception handling tests without the system stopping its execution. All the exceptions reported were dealt with smoothly. The exceptions reported were the following:

1. Fetching modules or experiences without network connection;

2. Fetching map tiles and not being able to connect to the OpenStreetMaps server;

3. Saving an activity without ﬁlling the content section;

4. Trying to get the user location and failing.

On each of these failures, the system displays a message informing the user of the error that occured and continues to work properly. 152 System Testing

Figure 6.10: Tourists’ Application Exception Handling Tests

6.2.2.4 Graphical User Interface Tests

All the graphical user interface tests passed without any defects. The users were able to perform all features that required interacting with interface elements.

Figure 6.11: Tourists’ Application Graphical User Interface Tests

6.2.2.5 Ad-hoc Tests

All the ad-hoc tests passed without any user succeeding in stopping the application execution with a fatal error.

Figure 6.12: Tourists’ Application Ad-hoc Tests

6.2.2.6 Performance Tests

(fetching the application ﬁles, a large portion of the needed assets and the data from the database) that speed would have minimal inﬂuence on the application performance since the needed data would be stored in cache.

Figure 6.13: Tourists’ Application Performance Tests

6.2.2.7 Compatibility Tests

All functionality tests performed on the Chrome browser on any OS and device passed with the system working properly on every test. All functionality tests performed on the Safari and Firefox browsers also passed successfully.

Figure 6.14: Tourists’ Application Compatibility Tests 154 System Testing

6.3 Conclusions

From the tests performed we can conclude that the system is working as expected and that developing the applications as PWAs using Ionic and Angular was a good choice. The minor bugs identiﬁed were addressed in the future work section of this document (Section 7.4). Since the system didn’t stop working mid-execution with critical failures we could verify the system integrity. In relation to the system compatibility and analysing the graphs displayed, we conclude that there are no differences in running the authoring tool in desktop or in tablet devices, and in running the tourists’ application in mobile or tablet devices. In relation to OSs and browsers, we conclude that the authoring tool has minor malfunctions in Linux and Windows on the Firefox browser and in iOS on the Safari browser on desktop devices, while the tourists’ application had no compatibility issues reported on any OS, browser or device. All testers that could add the applications to the home screen performed tests in the browser and in the added to home screen application. There were no differences noted between the two versions.

Figure 6.15: Authoring Tool Tests

Figure 6.16: Tourists’ Application Tests This page was intentionally left mostly blank. Chapter 7

Conclusions

In this chapter, we summarize the work done in this dissertation, we identify limitations to the project and detail future implementations that need to be done to improve the system.

7.1 Summary

We started this dissertation by explaining the context and motivation of the project. Then we detailed the project, proposed two research questions and set the goals. Finally, we described the structure of the dissertation. We started this dissertation by analysing subjects related to our project (Chapter2). We exam- ined the inﬂuence that digital media have in tourism and the role of gamiﬁcation and virtualization in tourism, to understand how those could improve tourists’ experiences. Then, we investigated what was the best type for our applications, compared each alternative and elected PWA as the type of application we would create. After that, we studied the best technologies for developing a PWA and ended up choosing Ionic and Angular. In Chapter3, we analysed projects that have similarities to ours to identify technologies and features that could be included in our project. These projects were divided by areas of study: location-based tour guides, location-based games and authoring tools for location-based applications. We also made a comparison between all the analysed projects. In Chapter4, we presented the solution. We listed the requirements for the system dividing them into functional and non-functional. Then, we explained the system architecture and the different components communicate with each other. Finally, we described the work methodology adopted. In Chapter5, we detailed all the technologies used in the implementation of the project. Then, we thoroughly explained each feature of the project and presented the different prototypes developed. We ended that chapter with the code documentation of the project. In Chapter6, we described the system tests that were performed to assure the system quality. We also presented a list with the test cases that were validated by testers. Finally, we listed and analysed the results of the tests performed.

156 7.2 Conclusions 157

7.2 Conclusions

The first goal we proposed for this dissertation was to develop an authoring tool for ludic experiences based on touristic points of interest and tourist location. To fulfil that goal, we developed a PWA both for desktop and tablet devices where users can create experiences with multiple activities, and connect them to generate routes throughout a city. The developed application contains almost all the required features and allows the user to go through all the steps of creating experiences. The inclusion of an interactive map gives the users a user-friendly tool to add activities to an experience and allows them to place the activity pins on the desired locations with ease. By giving users the possibility of previewing the way experiences will look like in the tourists’ application, they can more easily understand the flow of the activities and plan the course of experiences. With the canvas view we also let users understand the ramifications of the activities and the paths between the starting ones and the ending ones. The inclusion of a modular system for the activities of both applications is also a differentiating factor, since it allows more flexibility for the users of the authoring tool when choosing the contents of the activities. Users can select a predefined module and set the content of the activity depending on the chosen module. The users of the tourists’ application will then have access to these activities and see the defined content. Even though there are developments to be met in the future, we believe we have successfully accomplished this goal in implementing and documenting the functional foundations of the authoring tool, and in setting the road for its next stage of development. The second goal we proposed was to develop a tourists’ application so that these experiences could be played. To fulfil that goal, we developed a PWA both for mobile and tablet devices where users could play the experiences created in the authoring tool while visiting a city. The developed application allows the users to complete experiences from the beginning to the end. We added a map with the experiences locations marked by pins to help users in finding experiences near them. To give the users more flexibility when walking towards an activity, we provided three screens to display the activities. One screen presents a list with activities and the distance between each one and the user location; another screen where the user can see the activities displayed on a map; and a screen with a radar, to remove all the “noise” that the map has, and show only the activities locations relative to the user position and orientation. The radar1 is an innovating aspect, when compared to the projects we analyzed in (Chapter3). With it, the user can have a better notion of the position of the points of interest relative to her/his location and orientation. It also allows the user to have a better perception of the proximity of the points of interest nearby and focus on the environment instead of on the device itself. Although there are still improvements to be made in the future, we believe we have successfully accomplished this goal in developing, documenting and testing the core of the tourists’ application, and in preparing it to be expanded. The third goal we proposed was to apply quality assurance tests for both applications to guarantee good performance and system integrity. We applied different types of tests with different testers for both applications to assess the system quality. These tests passed successfully with only

1In Section 5.3.1.2 we describe the radar page with more detail. 158 Conclusions minor issues, assuring good system quality. The system performance proved to be very good, as there were no significant differences between test environments. The system dealt with errors per- fectly, as invalid inputs and critical errors were successfully dealt with, without leading to system failures. Some compatibility issues were discovered and signaled. Minor issues were discovered in a few features and properly identified to be fixed later. Even though there were some minor issues in the functionality and compatibility tests performed, we consider we have successfully accomplished this goal of applying quality assurance tests, and in identifying the issues to be solved in future developments. Lastly, the fourth goal we proposed was to work with the other teams of the CHIC project during the development of the system. We were in constant communication with them to make sure that the system was being developed according to everybody’s expectations. We developed different prototypes to meet the new interfaces developed by the UX team. We adapted the application connection to the backend every time it was requested. We also added new modules as they were conceptualized by the UX team. When there were different opinions as to how to do something, all the teams discussed and always achieved a consensus on what was the best way to proceed. We see that this goal was met throughout the whole project by working in close collaboration with the other teams of the CHIC project.

7.3 Limitations

The main limitation of this project was due to the COVID-19 quarantine that the country went through. Since our project is focused on location-based technologies, we could not perform tests with the tourists’ application to the desired extent. Circulation in the street was limited and therefore only a small number of tests was made. Another limitation had to do with the fact that the last version of the graphic user interface was only delivered near the deadline, we could not include all of its particularities in this version of the system. The ﬁrst framework to implement interactive maps we thought of was Google Maps,2 which would give us a very large API and provide us several features to include in the project. However, the fact that it is a paid API for Web development made us look for free alternatives which didn’t have the same available features as Google Maps. When we started planning the project, we had the goal of introducing the possibility of the user of the tourists’ application visualizing routes with directions between two activities in the map. However, during the development we faced a problem: the plugin that the framework we selected to implement interactive maps used to provide routes relied on a demo server that stopped being maintained this year and therefore was no longer a viable solution. We have suggested a possible solution for this in Section 7.4 to be implemented in the future.

2https://developers.google.com/maps/documentation/javascript/tutorial [Access date: Jun 24, 2020] 7.4 Future work 159

7.4 Future work

In this dissertation, we developed the main core of the system and implemented the main features expected from both applications. All the requirements detailed in Section 4.2.1 and Section 4.2.2 were fulﬁlled. In this section, we detail future developments to be made and possible solutions to implement them. 1) One of the main requirements of this project was to make the system modular, by giving the possibility of adding new activity modules in the future without the need for changing the applications’ code. We implemented the modules using a dynamic approach. This approach consisted of having a component – ContentViewerComponent – without a template, stylesheet or logic, and to create them piece by piece. We get the HTML template and SCSS stylesheet from the database and separate each element of the template. Then, we iterate through these elements and create a dynamic component – DynamicComponent – for each element passing it the type of element and the arguments that are also taken from the template fetched from the database. This DynamicComponent takes the type of element and creates the corresponding element, with a stylesheet and logic that need to be implemented in the code. However, the system is not fully ready to receive any module conﬁguration from the database and make it work without making any changes to the code. There is still the need to add the logic for a new type of module in both applications for it to work properly. A possible solution for this would be to have the implementation of each module outside the system, on an application dedicated only to run the modules. In the authoring tool this would mean making the following changes:

1. Remove the components ContentViewerComponent and DynamicComponent, which are used for previewing activities;

2. Redirect the activity preview to the new modules application with the corresponding module implementation on a preview version.

Figure 7.1: Interaction between the authoring tool and the new modules application

In the tourists’ application, this would mean making the following changes: 160 Conclusions

1. Remove the components ContentViewerComponent and DynamicComponent, which are used to display each activity;

2. Redirect the activity preview to the new modules application with the corresponding module implementation;

3. The tourists’ application would wait for the user to complete the activity or to navigate back, and register the user progress.

Figure 7.2: Interaction between the tourists’ application and the new modules application

2) Integrate a user system in both applications to give users the possibility to create an account, log in and have a profile page. In the authoring tool, this means that each user would only have access to experiences created by him/her. In the tourists’ application, this means that users would be able to save their experiences progress and favourite experiences in the database and load them on any device, instead of having these data locally saved. 3) Implement the Profile, Statistics, Forum, Settings, About Us and F.A.Q. pages in the authoring tool, and the Last Experiences, About Us and Help pages in the tourists’ application. 4) Implement the feature of mandatory and optional activities. In the authoring tool, the user would set for an experience which activities are mandatory and which are optional. In the tourists’ application, the user would have a visual indication of the mandatory and the optional activities. 5) In the radar page of the tourists’ application, display a label with the distance from the user location to the activities represented by arrows next to the arrows to help the user identify the closest activities. 6) Implement map routing in the tourists’ application, which would mean that when a user clicked on an activity the best route from the user location to the selected activity would be highlighted in the map. We could not include this feature in the system because the plugin Leaflet Routing Machine3 that adds routing to the framework (Leaflet4) we used to implement the interactive map relies on Open Source Routing Machine5 (OSRM)’s demo server and this server is

3https://www.liedman.net/leaflet-routing-machine/ [Access date: Jun 18, 2020] 4https://leafletjs.com/ [Access date: Jun 14, 2020] 5http://project-osrm.org/ [Access date: Jun 18, 2020] 7.4 Future work 161 no longer maintained [73]. The maintainers of the Leaflet Routing Machine project suggest the solution of configuring a routing server to host the routes [73]. 7) Implement internationalization so that the system uses the device’s language and translates the texts accordingly. This can be implemented using Transloco6 which is “an internationalization (i18n) library for Angular” [117]. 8) Implement the feature of restricting experiences and activities to be executed only on a certain schedule and on certain days set on the authoring tool. With this feature, the users of the tourists’ application would have activities unlocked only on a given time period. 9) Implement different radar colours depending on the time of the day and restrict the displayed activities accordingly on the tourists’ application. 10) Implement a distance range slider in the radar page of the tourists’ application to restrict the displayed activities to a given proximity. 11) Improve the graphical user interface responsiveness to fit more screen sizes. 12) Solve an issue relative to using the mouse wheel button to pan the map in the authoring tool. When a user does this, the map pans correctly, but the activity nodes and the edges between nodes don’t move. A possible solution would be to disable the panning of the map with the mouse wheel button. 13) Implement the feature of sharing experiences on social media. 14) Implement the feature of importing a list with touristic points of interest from Google Maps. 15) Host the system and the backend on the server provided by the organizers of the project. Implement the logic to upload, fetch and delete files from the server in the backend. Change the methods implemented in the authoring tool to upload, fetch and delete files from Firebase Storage to call the methods that will be implemented in the backend. 16) Implement the feature of making the authoring tool send updates when coming back online. This means that when the application is working in offline mode and the user updates an experience, the application would store that update request and when the application becomes online it would send the stored requests automatically. 17) Implement the feature of the backend sending a notification to the system notifying that the database has been updated, which would trigger the system to send a request to fetch the newest data. 18) Solve the minor bugs identified in Section 6.2.

6https://ngneat.github.io/transloco/ [Access date: Jun 18, 2020] This page was intentionally left mostly blank. Appendix A

Authoring Tool Tests Guide

1. Click on the Add button to create a new experience;

2. Fill the create experience form and click on the Save button;

3. Give location permission to the application;

4. Edit the experience description and click on the Save button;

5. Close the right side menu;

6. Create an activity by dragging the Add activity button to the map;

7. Update the created activity information section with new title, tags, colour and set it as the starting activity;

8. Update the content section textarea, select some images and one audio ﬁle;

9. Update the requirements section proximity, schedule and days;

10. Preview the activity by clicking on the Preview button;

11. Click on the map and click on the cancel button of the alert that opens;

12. Close the preview activity panel and Save the activity;

13. Create a new activity clicking on the Add activity button and the click on a point in the map;

14. Update the activity information section as you did on step 9;

15. Set the activity module to the second one;

16. Update the content section time to 200 seconds and proximity to 25 meters, set images and locations;

17. Repeat step 12 and 14;

18. Move the second activity on the map;

19. Open the contextual menu of one of the activities by pressing and holding the activity;

20. Duplicate an activity via the contextual menu;

163 164 Authoring Tool Tests Guide

21. Undo your last action using the undo arrow in the toolbar;

22. Redo your last action using the redo arrow in the toolbar;

23. Create a connection by dragging the knob above the third activity to the ﬁrst;

24. Click on the new connection;

25. Click on the Delete button;

26. Conﬁrm the deletion of the connection;

27. Open the second activity update menu;

28. Click on the Connections button;

29. Click on the plus button next to the ﬁrst select box;

30. Select the available activity of the select box;

31. Delete the “to” connection by clicking on the trash button next to it;

32. Save the activity;

33. Click on the newest activity, press the Delete button and conﬁrm the deletion;

34. Click on the arrow on the right of the Add activity button and click on the Linear button;

35. Move the map to leave the centre of the map free;

36. Click on the arrow on the right of the Add activity button and click on the Branched button;

37. Move the map to leave the centre of the map free;

38. Click on the arrow on the right of the Add activity button and click on the Cyclic button;

39. Move the map to leave the centre of the map free;

40. Click on the arrow on the right of the Add activity button and click on the Exploratory button;

41. Click on the search button and input a valid address, click on the address from the list;

42. Click on the centre map button;

43. Zoom in/out;

44. Switch to the canvas view;

45. Click on the Run button;

46. Select an activity to start previewing the experience;

47. Click on the Start button;

48. Select the next activity and click on the Next button;

49. Repeat step 47 until the last activity and click on the Leave button; Authoring Tool Tests Guide 165

50. Save the experience by clicking on the Save button;

51. Publish the experience by clicking on the Publish button;

52. Open the navigation menu;

53. Click on the Dashboard button;

54. Edit the created experience description and save;

55. Delete the experience with the title “Dummy”;

56. Search experiences by title using an existing title;

57. Turn off your network connection;

58. Open the experience you created;

59. Create a new activity, update its data and save it;

60. Turn on the network connection;

61. Save the experience. This page was intentionally left mostly blank. Appendix B

Tourists’ Application Tests Guide

1. Give location permission to the application;

2. Click on the “Find experiences near you”;

3. Click on the nearest experience pin;

4. Click on the Start button;

5. Click on the Activities button in the bottom navigation menu;

6. Click on the start button of the ﬁrst unlocked activity;

7. Click on the Complete button to complete that activity;

8. Pan the map to check the location of the next activities;

9. Click on the Zoom in/out buttons;

10. Rotate your device and verify the changes in the compass;

11. Click on the Search address buton on the map;

12. Enter a valid address;

13. Select one of the displayed address options;

14. Click on the Center map button;

15. Click on the Radar button in the bottom navigation menu;

16. Rotate your device and verify that the pins and arrows rotate accordingly;

17. Select one branched activity with the Location module;

18. Click on the Start button;

19. Move to the location of each goal of the activity;

20. Click on the Complete button;

21. Complete all the activities of the selected experience;

167 168 Tourists’ Application Tests Guide

22. Go back to the Experiences page;

23. Click on the star button of the ﬁrst experience;

24. Open the left navigation menu by clicking on the Hamburguer button;

25. Click on the Favourites button;

26. Navigate to the Filters page;

27. Apply the proximity ﬁlter to 1000m, select the Recreation tag and change the “order by” ﬁeld to name;

28. Navigate to the Experiences page;

29. Click on the ﬁrst experience listed;

30. Navigate to the Experiences page;

31. Click on the Search button to search for an experience by name;

32. Close the application, re-open the application and open the previously completed experience and click on the Activities button of the bottom navigation menu;

33. Click on the About button of the bottom navigation menu and click on the Restart button;

34. Turn off the network connection;

35. Open the ﬁrst experience on the Experiences page and navigate to the map of that experience;

36. Complete all the activities. This page was intentionally left mostly blank. Appendix C

Links

Link for the Github repository with the applications code: https://github.com/Quaresma1997/ CHIC.

Link for the authoring tool: https://chic-15ea3.firebaseapp.com/dashboard.

Link for the tourists’ application: https://chic-mobile.firebaseapp.com/dashboard.

170 This page was intentionally left mostly blank. References

[1] Adinugroho, T. Y., Reina, and Gautama, J. B. Review of multi-platform mobile application development using WebView: Learning management system on mobile platform. Procedia Computer Science, 59:291–297, 2015. doi: 10.1016/j.procs.2015.07.568.

[2] Amatya, S. and Kurti, A. Cross-platform mobile development: Challenges and opportunities. In ICT Innovations 2013, pages 219–229. Springer, Heidelberg, 2014. doi: 10.1007/978-3-319-01466-1_21.

[3] Anar Corporate. Understanding Angular Ivy: Incremental DOM and Virtual DOM. AnAr Solutions Pvt. Ltd., 2019. Retrieved from http://www.anarsolutions.com/understanding-angular-ivy/. Access date: January 21, 2020.

[4] Ardissono, L., Goy, A., Petrone, G., Segnan, M., and Torasso, P. Intrigue: Personalized recommendation of tourist attractions for desktop and hand held devices. Applied Artiﬁcial Intelligence, 17(8-9):687–714, 2003. doi: 10.1080/713827254.

[5] Baresi, L. and Pezzè, M. An Introduction to Software Testing. Electronic Notes in Theoretical Computer Science, 148(1):89–111, 2006. doi: 10.1016/j.entcs.2005.12.014.

[6] Beaconing. Beaconing – breaking educational barriers with contextualized pervasive and gameful learning. 2019. Retrieved from https://beaconing.eu/. Access date: December 27, 2019.

[7] Beaconing. Results new. 2019. Retrieved from https://beaconing.eu/results/. Access date: December 27, 2019.

[8] Biørn-Hansen, A., Majchrzak, T. A., and Grønli, T.-M. Progressive web apps: The possible web-native uniﬁer for mobile development. In Proceedings of the 13th International Conference on Web Information Systems and Technologies. SCITEPRESS - Science and Technology Publications, 2017. doi: 10.5220/0006353703440351.

[9] Blackall, M. Global Tourism Hits Record Highs - But Who Goes Where On Holiday? The Guardian, 2019. Retrieved from https://www.theguardian.com/news/2019/jul/01/ global-tourism-hits-record-highs-but-who-goes-where-on-holiday. Access date: November 24, 2019.

[10] Bogost, I. Persuasive Games: Exploitationware. Gamasutra, 2011. Retrieved from https://www.gamasutra.com/view/feature/134735/persuasive_games_ exploitationware.php. Access date: January 6, 2020.

172 REFERENCES 173

[11] Bosnic, S., Papp, I., and Novak, S. The development of hybrid mobile applications with apache cordova. In 2016 24th Telecommunications Forum (TELFOR), pages 1–4. IEEE, 2016. doi: 10.1109/telfor.2016.7818919.

[12] Brazil. Brasil quest também no facebook. Blog Aquarela 2020 - EMBRATUR, 2013. Retrieved from https://aquarela2020.wordpress.com/2013/09/26/ brasil-quest-tambemno-facebook/. Access date: January 6, 2020.

[13] Brooke, J. Sus: a quick and dirty usability scale. In P. W. Jordan, B. Thomas, B. A. W. and McClelland, A. L., editors, Usability Evaluation in Industry, pages 189–194. Taylor and Francis, London, 1996.

[14] Buettner, K. and Simmons, A. M. Mobile web and native apps: How one team found a happy medium. In Lecture Notes in Computer Science, pages 549–554. Springer, Berlin, Heidelberg, 2011. doi: 10.1007/978-3-642-21675-6_63.

[15] Buhalis, D. Strategic use of information technologies in the tourism industry. Tourism Management, 19(5):409–421, oct 1998. doi: 10.1016/S0261-5177(98)00038-7.

[16] Campione, R. Raising your game: how gamiﬁcation can drive success in hospitality. Les Roches, 2019. Retrieved from https://lesroches.edu/blog/ how-gamification-drive-success-hospitality/. Access date: December 31, 2019.

[17] Ceccarini, C. and Prandi, C. Tourism for all: a mobile application to assist visually impaired users in enjoying tourist services. In 2019 16th IEEE Annual Consumer Communications & Networking Conference (CCNC). IEEE, 2019. doi: 10.1109/ccnc.2019.8651848.

[18] Choi, H., Han, G. C., and Kim, I.-J. Smart booklet: Tour guide system with mobile augmented reality. In 2014 IEEE International Conference on Consumer Electronics (ICCE). IEEE, 2014. doi: 10.1109/icce.2014.6776038.

[19] Ciman, M. and Gaggi, O. An empirical analysis of energy consumption of cross-platform frameworks for mobile development. Pervasive and Mobile Computing, 39:214–230, 2017. doi: 10.1016/j.pmcj.2016.10.004.

[20] Daityari, S. Angular vs React vs Vue: Which Framework to Choose in 2020. CodeinWP, 2019. Retrieved from https://www.codeinwp.com/blog/angular-vs-vue-vs-react/. Access date: December 7, 2019.

[21] de Farias, I., Leitao, N., and Teixeira, M. M. Urbis: A touristic virtual guide. In 2017 12th Iberian Conference on Information Systems and Technologies (CISTI). IEEE, 2017. doi: 10.23919/cisti.2017.7975918.

[22] Deidda, M., Pala, A., and Vacca, G. An example of a tourist location-based service (LBS) with open-source software. Applied Geomatics, 5(1):73–86, 2012. doi: 10.1007/s12518-012-0097-x.

[23] Deterding, S. Meaningful play: Getting gamiﬁcation right. Google Tech Talk, 2011. Retrieved from https://www.youtube.com/watch?v=7ZGCPap7GkY. Access date: January 6, 2020. 174 REFERENCES

[24] Deterding, S., Dixon, D., Khaled, R., and Nacke, L. From game design elements to gamefulness. In Proceedings of the 15th International Academic MindTrek Conference on Envisioning Future Media Environments - MindTrek '11. ACM Press, 2011. doi: 10.1145/2181037.2181040.

[25] Deutsche Lufthansa AG. Lufthansa Group VR. Google Play Store, 2018. Retrieved from https://play.google.com/store/apps/details?id=com.lufthansa. android.groupvr&hl=en_US. Access date: December 31, 2019.

[26] Divinagracia, L. A., Divinagracia, M. R. G., and Divinagracia, D. G. Digital Media-Induced Tourism: The Case of Nature-based Tourism (NBT) at East Java, Indonesia. Procedia - Social and Behavioral Sciences, 2012. doi: 10.1016/j.sbspro.2012.09.1161.

[27] Doolin, B., Burgess, L., and Cooper, J. Evaluating the use of the web for tourism marketing: a case study from new zealand. Tourism Management, 23(5):557–561, 2002. doi: 10.1016/s0261-5177(02)00014-6.

[28] Egger, R. and Bulencea, P. Gamiﬁcation in Tourism: Designing Memorable Experiences. Books on Demand, 2015.

[29] Facebook. React. 2020. Retrieved from https://reactjs.org/. Access date: January 21, 2020.

[30] Facebook. React Native. 2020. Retrieved from https://facebook.github.io/react-native/. Access date: January 21, 2020.

[31] Facebook. React - Versions. 2020. Retrieved from https://reactjs.org/versions/. Access date: January 17, 2020.

[32] Ferreira, S. A. M. Location based transmedia storytelling: enhancing the tourism experience. PhD thesis, FEUP, 2015.

[33] Flew, T. Media convergence. Encyclopædia Britannica, 2017. Retrieved from https://www.britannica.com/topic/media-convergence. Access date: January 25, 2020.

[34] Fortunato, D. and Bernardino, J. Progressive web apps: An alternative to the native mobile apps. In 2018 13th Iberian Conference on Information Systems and Technologies (CISTI). IEEE, 2018. doi: 10.23919/cisti.2018.8399228.

[35] Foursquare. Foursquare City Guide. Google Play Store, 2019. Retrieved from https://play.google.com/store/apps/details?id=com.joelapenna. foursquared&hl=en. Access date: November 26, 2019.

[36] Gambhir, A. and Raj, G. Analysis of cache in service worker and performance scoring of progressive web application. In 2018 International Conference on Advances in Computing and Communication Engineering (ICACCE). IEEE, 2018. doi: 10.1109/icacce.2018.8441715.

[37] Geocaching. Geocaching 101. Geocaching, 2020. Retrieved from https://www.geocaching.com/guide/. Access date: January 10, 2020. REFERENCES 175

[38] Geocaching. Cache types. Geocaching, 2020. Retrieved from https://www.geocaching.com/about/cache_types.aspx. Access date: January 10, 2020.

[39] Geocaching. The history of geocaching. Geocaching, 2020. Retrieved from https://www.geocaching.com/about/history.aspx. Access date: January 10, 2020.

[40] Geocaching. Find a geocache. Geocaching, 2020. Retrieved from https://www.geocaching.com/seek/default.aspx. Access date: January 10, 2020.

[41] Ghanbari, H., Similä, J., and Markkula, J. Utilizing online serious games to facilitate distributed requirements elicitation. Journal of Systems and Software, 109:32–49, 2015. doi: 10.1016/j.jss.2015.07.017.

[42] Google. How smartphones inﬂuence the entire travel journey in the u.s. and abroad. Think with Google, 2018. Retrieved from https://www.thinkwithgoogle.com/ consumer-insights/consumer-travel-smartphone-usage/. Access date: November 19, 2019.

[43] Google. Progressive web apps. Google Developers, 2019. Retrieved from https://developers.google.com/web/progressive-web-apps. Access date: November 30, 2019.

[44] Google. Opting into angular ivy. 2019. Retrieved from https://angular.io/guide/ivy. Access date: December 11, 2019.

[45] Google. Angular. 2020. Retrieved from https://angular.io/. Access date: January 17, 2020.

[46] Google. Firebase. 2020. Retrieved from https://firebase.google.com/. Access date: June 21, 2020.

[47] Gordillo, A., Gallego, D., Barra, E., and Quemada, J. The city as a learning gamiﬁed platform. In 2013 IEEE Frontiers in Education Conference (FIE). IEEE, 2013. doi: 10.1109/ﬁe.2013.6684850.

[48] Gretzel, U., Sigala, M., Xiang, Z., and Koo, C. Smart tourism: foundations and developments. Electronic Markets, 25(3):179–188, 2015. doi: 10.1007/s12525-015-0196-8.

[49] Groundspeak Inc. Geocaching®. Google Play Store, 2020. Retrieved from https://play.google.com/store/apps/details?id=com.groundspeak. geocaching.intro&referrer=utm_source. Access date: December 31, 2019.

[50] GSMA. The Mobile Economy 2018. Adweek, (35):11–11, 2018. Retrieved from https://www.gsma.com/r/mobileeconomy/. Access date: November 30, 2019.

[51] Happy Quiz Games. New york city quiz. Google Play Store, 2017. Retrieved from https://play.google.com/store/apps/details?id=com. happyquizgames.newyorkquiz&hl=en. Access date: December 17, 2019. 176 REFERENCES

[52] Helgason, J. R., Nielsen, E. J., and Þórður Hermannsson. Mobile web based mini games for locatify. 2014. Bachelor thesis, Reykjavík University. [53] Heung, V. C. Internet usage by international travellers: reasons and barriers. International Journal of Contemporary Hospitality Management, 15(7):370–378, 2003. doi: 10.1108/09596110310496015. [54] Himango, J. G. I built a PWA and published it in 3 app stores. Here’s what I learned. Debugger.Break(), 2018. Retrieved from https://debuggerdotbreak.judahgabriel.com/2018/04/13/ i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned/. Access date: January 11, 2020. [55] Hogle, P. When Gamification Goes Wrong: Avoid These Hazards When Gamifying eLearning Content. Learning Solutions Magazine, 2017. Retrieved from https://learningsolutionsmag.com/articles/2302/ when-gamification-goes-wrong-avoid-these-hazards-when-gamifying-elearning-content. Access date: January 6, 2020. [56] Holm, J. and Laurila, K. Designing ActionTrack: A state-of-the-art authoring tool for location-based games and other activities. In 2014 18th International Conference on Information Visualisation. IEEE, 2014. doi: 10.1109/iv.2014.37. [57] Hong Kong Tourism Board. Discover Hong Kong·City Walks for Android. APKPure, 2014. Retrieved from https://apkpure.com/discover-hong-kong%C2% B7city-walks/com.cherrypicks.HKTB. Access date: December 9, 2019. [58] Huang, H. and Gao, S. Location-based services. The Geographic Information Science & Technology Body of Knowledge (1st Quarter 2018 Edition), John P. Wilson (Ed), 2018. doi: 10.22224/gistbok/2018.1.14. [59] Huotari, K. and Hamari, J. Defining gamification. In Proceeding of the 16th International Academic MindTrek Conference on - MindTrek '12. ACM Press, 2012. doi: 10.1145/2393132.2393137. [60] Ionic. What is Ionic Framework? - Ionic Documentation. Ionic Docs, 2020. Retrieved from https://ionicframework.com/docs/intro. Access date: January 21, 2020. [61] Jamil, A., Arif, M., Abubakar, N., and Ahmad, A. Software Testing Techniques: A Literature Review. Electronic Notes in Theoretical Computer Science, pages 177–182, 2016. doi: 10.1109/ICT4M.2016.045. [62] Jobe, W. Native apps vs. mobile web apps. International Journal of Interactive Mobile Technologies (iJIM), 7(4):27, 2013. doi: 10.3991/ijim.v7i4.3226. [63] Kaplanidou, K. and Vogt, C. A structural analysis of destination travel intentions as a function of web site features. Journal of Travel Research, 45(2):204–216, 2006. doi: 10.1177/0047287506291599. [64] Kitano, C. and Correa, C. Gamification in Tourism: Analysis of Brazil Quest Game. e-Review of Tourism Research (eRTR), v. 6, 2015. [65] Kitano, C. and Correa, C. Gamification in Tourism: Analysis of Brazil Quest Game. ENTER2015 eTourism Conference, 2015. REFERENCES 177

[66] Kountouris, A. and Sakkopoulos, E. Survey on intelligent personalized mobile tour guides and a use case walking tour app. In 2018 IEEE 30th International Conference on Tools with Artificial Intelligence (ICTAI). IEEE, 2018. doi: 10.1109/ictai.2018.00105. [67] Larrea, M. Black-box testing technique for information visualization. sequencing constraints with low-level interactions. Journal of Computer Science & Technology, 17(1): 37–48, 2017. [68] Laskowski, M. A short overview of pros and cons of gamification. Actual Problems of Economics, 145:373–377, 2013. [69] Leardini, F. Discover Iterative DOM, the magic behind Angular Ivy. The DEV Community, 2019. Retrieved from https://dev.to/paco_ita/ discover-iterative-dom-the-magic-behind-angular-ivy-4c6g. Access date: December 11, 2019. [70] Lee, C.-K., Lee, J., Lo, P.-W., Tang, H.-L., Hsiao, W.-H., Liu, J.-Y., and Lin, T.-L. Taiwan perspective: Developing smart living technology. International Journal of Automation and Smart Technology, 1(1):93–106, 2011. doi: 10.5875/ausmt.v1i1.74. [71] Lepper, M. R., Greene, D., and Nisbett, R. E. Undermining children's intrinsic interest with extrinsic reward: A test of the "overjustification" hypothesis. Journal of Personality and Social Psychology, 28(1):129–137, 1973. doi: 10.1037/h0035519. [72] Li, S., Duan, X., Bai, Y., and Yun, C. Development and application of intelligent tour guide system in mobile terminal. In 2015 Seventh International Conference on Measuring Technology and Mechatronics Automation. IEEE, 2015. doi: 10.1109/icmtma.2015.98. [73] Liedman, P. Leaflet routing machine. GitHub repository, 2020. Retrieved from https://github.com/perliedman/leaflet-routing-machine. Access date: June 25, 2020. [74] Locatify. Turf Hunt. 2012. Retrieved from https://locatify.com/blog/faq-items/turf-hunt/. Access date: January 21, 2020. [75] Locatify. TurfHunt. Google Play Store, 2019. Retrieved from https://play.google. com/store/apps/details?id=com.locatify.treasurehunt&hl=en. Access date: December 23, 2019. [76] Locatify. Creator cms. 2019. Retrieved from https://locatify.com/creator-cms/. Access date: December 13, 2019. [77] Locatify. Turfhunt treasure hunt game app. 2019. Retrieved from https://locatify.com/turfhunt-2/. Access date: December 13, 2019. [78] Loreto, P., Braga, J., Peixoto, H., Machado, J., and Abelha, A. Step towards progressive web development in obstetrics. Procedia Computer Science, 141:525–530, 2018. doi: 10.1016/j.procs.2018.10.131. [79] Lumpoon, P. N. and Thiengburanathum, P. Effects of integrating a mobile game-based learning framework in a cultural tourism setting. In 2016 10th International Conference on Software, Knowledge, Information Management & Applications (SKIMA). IEEE, 2016. doi: 10.1109/skima.2016.7916233. 178 REFERENCES

[80] Majchrzak, T. A., Biørn-Hansen, A., and Grønli, T.-M. Progressive web apps: the deﬁnite approach to cross-platform development? In Proceedings of the 51st Hawaii International Conference on System Sciences. Hawaii International Conference on System Sciences, 2018. doi: 10.24251/hicss.2018.718.

[81] Malavolta, I. Beyond native apps: web technologies to the rescue! (keynote). In Proceedings of the 1st International Workshop on Mobile Development - Mobile! 2016. ACM Press, 2016. doi: 10.1145/3001854.3001863.

[82] Marinho, V. A. M. Aplicação web para dispositivos móveis com inputs de nova geração : protótipo de aplicação web, na área da cultura, que fornece pontos de interesse baseados na localização do utilizador, simpliﬁcando a sua utilização em movimento. Master’s thesis, FEUP, 2011.

[83] Martin, S. Angular vs React vs Vue: Which is the Best Choice for 2019? Medium, 2019. Retrieved from https://medium.com/hackernoon/ angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847. Access date: January 21, 2020.

[84] Maruyama, A., Shibata, N., Murata, Y., Yasumoto, K., and Ito, M. A personal tourism navigation system to support traveling multiple destinations with time restrictions. In 18th International Conference on Advanced Information Networking and Applications, 2004. AINA 2004., volume 2, pages 18–21. IEEE, 2004. doi: 10.1109/aina.2004.1283747.

[85] Meehan, K., Lunney, T., Curran, K., and Mccaughey, A. Visit: Virtual intelligent system for informing tourists. PGNET, 2012.

[86] Microsoft. Typescript. 2020. Retrieved from https://www.typescriptlang.org/. Access date: January 21, 2020.

[87] MuseumMobile Wiki. Rexplorer. 2019. Retrieved from http://wiki. museummobile.info/museums-to-go/products-services/rexplorer. Access date: December 31, 2019.

[88] NgRx. Ngrx store. 2020. Retrieved from https://ngrx.io/guide/store. Access date: June 14, 2020.

[89] Nicholson, S. A user-centered theoretical framework for meaningful gamiﬁcation. Games+Learning+Society 8.0, Madison, USA, 2012.

[90] Noleto, C., Lima, M., Maia, L. F., Viana, W., and Trinta, F. An authoring tool for location-based mobile games with augmented reality features. In 2015 14th Brazilian Symposium on Computer Games and Digital Entertainment (SBGames). IEEE, 2015. doi: 10.1109/sbgames.2015.12.

[91] O’Donnell, A. 7 great virtual reality travel experiences. Lifewire, 2019. Retrieved from https://www.lifewire.com/virtual-reality-tourism-4129394. Access date: January 17, 2020.

[92] Olson, P. 5 Eye-Opening Stats That Show The World Is Going Mobile. Forbes, 2012. Retrieved from https://www.forbes.com/sites/parmyolson/2012/12/04/ 5-eye-opening-stats-that-show-the-world-is-going-mobile/ #329e52e1805a. Access date: November 30, 2019. REFERENCES 179

[93] Osmani, A. Getting started with Progressive Web Apps, 2015. Retrieved from https:// addyosmani.com/blog/getting-started-with-progressive-web-apps/. Access date: November 26, 2019.

[94] Paavilainen, J., Korhonen, H., Alha, K., Stenros, J., Koskinen, E., and Mayra, F. The pokémon GO experience. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems - CHI '17. ACM Press, 2017. doi: 10.1145/3025453.3025871.

[95] Pinto, C. M. and Coutinho, C. From native to cross-platform hybrid development. In 2018 International Conference on Intelligent Systems (IS). IEEE, Sept. 2018. doi: 10.1109/is.2018.8710545.

[96] Que, P., Guo, X., and Zhu, M. A comprehensive comparison between hybrid and native app paradigms. In 2016 8th International Conference on Computational Intelligence and Communication Networks (CICN). IEEE, 2016. doi: 10.1109/cicn.2016.125.

[97] Questo Global - Self-Guided Tours. Questo | Walking Tours & City Games. Google Play Store, 2019. Retrieved from https: //play.google.com/store/apps/details?id=com.questo.questoapp. Access date: December 23, 2019.

[98] Realities.io. Realities. Steam, 2016. Retrieved from https://store.steampowered.com/app/452710/Realities/. Access date: January 10, 2020.

[99] RoseIndia.Net. Location based service (lbs) in tourism. 2018. Retrieved from https://www.roseindia.net/technology/LBS/ location-based-service-lbs-tourism.shtml. Access date: November 20, 2019.

[100] RoseIndia.Net. 30 Foursquare Statistics - 99ﬁrms | January 2020. 99ﬁrms.com, 2019. Retrieved from https://99firms.com/blog/foursquare-statistics/. Access date: November 21, 2019.

[101] Russell, A. Progressive Web Apps: Escaping Tabs Without Losing Our Soul. Medium, 2015. Retrieved from https://medium.com/@slightlylate/ progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955. Access date: January 22, 2020.

[102] Saini, R. React vs. Angular vs. Vue.js: Which one should I learn in 2019. Medium, 2019. Retrieved from https://medium.com/@rahul77349/ react-vs-angular-vs-vue-js-which-one-should-i-learn-in-2019-23ec05a49f78. Access date: January 21, 2020.

[103] Samsung. Try before you ﬂy: Virtual reality in the lufthansa group. Samsung Newsroom Germany, 2017. Retrieved from https://news.samsung.com/de/try-before-you-fly. Access date: January 6, 2020.

[104] Sbarbati, S. Eye Shakespeare App allows you to visit the Poet’s hometown from a new perspective. CreativeCH, 2013. Retrieved from http://www.creative-heritage. eu/creative-heritage.eu/48129725.html?&tx_ttnews%5Btt_news%5D= 180 REFERENCES

7757&cHash=41de881384a492c1d79b7b800ce5f986. Access date: January 10, 2020.

[105] Schmidt-Belz, B., Nick, A., Poslad, S., and Zipf, A. Personalized and location-based mobile tourism services. Workshop on “Mobile Tourism Support Systems” in conjunction with Mobile HCI, 2002.

[106] Schmidt-Belz, B., Laamanen, H., Poslad, S., and Zipf, A. Location-based mobile tourist services - ﬁrst user experiences. In Information and Communication Technologies in Tourism 2003, pages 115–123. Springer, Vienna, 2003. doi: 10.1007/978-3-7091-6027-5_13.

[107] Serrano, N., Hernantes, J., and Gallardo, G. Mobile web apps. IEEE Software, 30(5): 22–27, 2013. doi: 10.1109/ms.2013.111.

[108] Shi, X., Sun, T., Shen, Y., Li, K., and Qu, W. Tour-guide: Providing location-based tourist information on mobile phones. In 2010 10th IEEE International Conference on Computer and Information Technology. IEEE, 2010. doi: 10.1109/cit.2010.412.

[109] Shin, C., Kim, H., Kang, C., Jang, Y., Choi, A., and Woo, W. Uniﬁed context-aware augmented reality application framework for user-driven tour guides. In 2010 International Symposium on Ubiquitous Virtual Reality. IEEE, 2010. doi: 10.1109/isuvr.2010.22.

[110] Shin, J., Kim, J., and Woo, W. Narrative design for rediscovering daereungwon: A location-based augmented reality game. In 2017 IEEE International Conference on Consumer Electronics (ICCE). IEEE, 2017. doi: 10.1109/icce.2017.7889364.

[111] Sigala, M. The application and impact of gamiﬁcation funware on trip planning and experiences: the case of TripAdvisor’s funware. Electronic Markets, 25(3):189–209, 2015. doi: 10.1007/s12525-014-0179-1.

[112] Smart Living Technology & Service Program Ofﬁce, Taiwan, 2009. i-236 project.

[113] Smile Thailand. Smile thailand. 2011. Retrieved from http://smilelandgame.com/gameinfo.php. Access date: December 7, 2019.

[114] Software Testing Help. What is system testing – a ultimate beginner’s guide. 2020. Retrieved from https://www.softwaretestinghelp.com/system-testing/. Access date: June 14, 2020.

[115] Stadler, D. and Bilgram, V. Gamiﬁcation: Best practices in research and tourism. In Open Tourism, pages 363–370. Springer, Berlin, Heidelberg, 2016. doi: 10.1007/978-3-642-54089-9_28.

[116] Thailand, Ltd, True Visions Group Co. Smile land thai facebook game for friends can now travel to all over thailand! 2011. Retrieved from https://www.online-station.net/pc-console-game/view/49027. Access date: December 31, 2019.

[117] Transloco, Inc. Transloco. 2020. Retrieved from https://ngneat.github.io/transloco/. Access date: June 25, 2020. REFERENCES 181

[118] TripAdvisor. Tripadvisor study reveals 42% of travelers worldwide use smartphones to plan or book their trips. TripAdvisor, 2015. Retrieved from http://ir.tripadvisor.com/news-releases/news-release-details/ tripadvisor-study-reveals-42-travelers-worldwide-use-smartphones. Access date: November 19, 2019. [119] Tussyadiah, I. P. A concept of location-based social network marketing. Journal of Travel & Tourism Marketing, 29(3):205–220, 2012. doi: 10.1080/10548408.2012.666168. [120] Tussyadiah, I. P. and Fesenmaier, D. R. Mediating the tourist experiences: Access to Places via Shared Videos. Annals of Tourism Research, 36(1):24–40, 2009. doi: 10.1016/j.annals.2008.10.001. [121] Tussyadiah, I. P. and Zach, F. J. The role of geo-based technology in place experiences. Annals of Tourism Research, 39(2):780–800, 2012. doi: 10.1016/j.annals.2011.10.003. [122] UNWTO. Tourism Towards 2030 / Global Overview - Advance edition presented at UNWTO 19th General Assembly - 10 October 2011. World Tourism Organization (UNWTO), 2011. doi: 10.18111/9789284414024. [123] UNWTO. International Tourism Highlights, 2019 Edition. World Tourism Organization (UNWTO), 2019. doi: 10.18111/9789284421152. [124] Valente, S., Braga, J., Machado, J., Santos, M., and Abelha, A. The impact of mobile platforms in obstetrics. Procedia Technology, 9:1201–1208, 2013. doi: 10.1016/j.protcy.2013.12.134. [125] Vargo, S. L. and Lusch, R. F. Service-dominant logic: continuing the evolution. Journal of the Academy of Marketing Science, 36(1):1–10, 2007. doi: 10.1007/s11747-007-0069-6. [126] Vorlová, N. Gamiﬁcation in Tourism: Study of the motivation of the Chinese tourist players. [127] Vue. Introduction — Vue.js. 2020. Retrieved from https://vuejs.org/v2/guide/. Access date: January 21, 2020. [128] W3Schools. JavaScript HTML DOM. 2019. Retrieved from https://www.w3schools.com/js/js_htmldom.asp. Access date: December 7, 2019. [129] Walz, S. P. and Rafael, B. Pervasive persuasive: A rhetorical design approach to a location-based spell-casting game for tourists. In DiGRA གྷ - Proceedings of the 2007 DiGRA International Conference: Situated Play, pages 489–497. The University of Tokyo, 2007. [130] Wang, D., Park, S., and Fesenmaier, D. R. The Role of Smartphones in Mediating the Touristic Experience. Journal of Travel Research, 2012. doi: 10.1177/0047287511426341. [131] Werbach, K. and Hunter, D. For the win: How game thinking can revolutionize your business. Wharton Digital Press, 2012. [132] Xu, F., Tian, F., Buhalis, D., and Weber, J. Marketing tourism via electronic games: Understanding the motivation of tourist players. In 2013 5th International Conference on Games and Virtual Worlds for Serious Applications (VS-GAMES). IEEE, 2013. doi: 10.1109/vs-games.2013.6624235. 182 REFERENCES

[133] Xu, F., Weber, J., and Buhalis, D. Gamiﬁcation in tourism. In Information and Communication Technologies in Tourism 2014, pages 525–537. Springer, Cham, 2013. doi: 10.1007/978-3-319-03973-2_38.

[134] Xu, F., Buhalis, D., and Weber, J. Serious games and the gamiﬁcation of tourism. Tourism Management, 60:244–256, 2017. doi: 10.1016/j.tourman.2016.11.020.

[135] Yu, Y. Design and evaluation of intelligent tourist guide system based on mobile devices. In 2014 Sixth International Conference on Intelligent Human-Machine Systems and Cybernetics. IEEE, 2014. doi: 10.1109/ihmsc.2014.79.

[136] Zhang, L. and Yang, J. Smart tourism. In Encyclopedia of Tourism, pages 862–863. Springer, Cham, 2016. doi: 10.1007/978-3-319-01384-8_175.

[137] Zhang, L., Li, N., and Liu, M. On the basic concept of smarter tourism and its theoretical system. 27(5):66–73, 2012.

[138] Öztürk, M. Software Testing Process and Levels of Testing. Medium, 2020. Retrieved from https://medium.com/swlh/ software-testing-process-and-levels-of-testing-4274904ce655. Access date: June 14, 2020.