FACULDADE DE ENGENHARIA DA UNIVERSIDADE DO 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 touris- tic 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 cre- ated 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’ applica- tion. 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 confirming that all the system require- ments 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 tur- istas. 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 feed- back 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 avail- able 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 fly, 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 walk- ing 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 desti- nations 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 gamified platform . 45 3.1.10 Unified 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 cul- tural tourism setting . 49 3.2.3 Narrative design for Rediscovering Daereungwon: A location-based aug- mented reality game . 49 3.2.4 The Pokémon GO experience: a location-based Augmented Reality mo- bile 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 ar- chitecture 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 . ..