An application to present the history of Vuorentaka old retirement house

(1)

An application to present the history of Vuorentaka old retirement house

Bachelor thesis

Degree Programme in Business Information Technology Hämeenlinna University Centre

Spring, 2021 Marco Bär

(2)

Degree Programme in Business Information Technology Abstract Hämeenlinna University Centre

Author Marco Bär Year 2021

Subject An application to present the history of Vuorentaka old retirement house Supervisors Deepak Kc, Joni Kukkamäki, Prof. Dr. Tobias Hagen

ABSTRACT

The purpose of the thesis was to research potential technical technologies to preserve the history of the Vuorentaka old retirement house and to develop an application. The thesis sought to develop a suitable application to the customer’s requirements. The two research questions: what kind of technologies are available to develop an application for customer needs, and what technology would be best for the customer and the end-users were discussed in Chapter 2. The last two research questions: how we can implement different kinds of information to the application, and what is the workflow to develop application and content were explained in Chapter 4. The thesis was commissioned by Joni Kukkamäki, research manager from HAMK Smart Research Unit one of the four research units at Häme University of Applied Sciences (HAMK).

First, available technical technologies related to the first research question were mentioned in the theoretical framework. It was based on literary research. The comparison of those technologies related to the customer’s requirements was explained in Chapter 2.9. The results of this research were then used to develop an application. The thesis proceeds by discussing the development project with Joni Kukkamäki in recurring meetings. The research method was conducted as qualitative research.

The research demonstrates WordPress is the best suitable technology to develop an application to prevent the history of the old retirement house of Vourentaka. It accomplished the customer’s requirements.

Keywords AR, application, 3D model, website, WordPress Pages 33 pages and appendices 1 page

(3)

Glossary

API Application program interface AR Augmented Reality

CMS Content Management System

CPDF Cross-Platform Development Framework CPT Custom Post Types

IEEE Institute for Electrical and Electronics Engineers OS Operating System

UI User Interface

UNESCO United Nations Educational, Scientific, and Cultural Organization UX User experience

URL Uniform Resource Locators PWA Progressive Web App SDK Software development kit SEO Search Engine Optimization

S.L.A.M. Simultaneous Localization and Mapping VR Virtual Reality

3D Three-dimensional

(4)

Figures

Figure 1: AR Foundation 2.1 (verified in Unity 2019 LTS) (Technologies, 2021) ... 10

Figure 2: Technology comparison ... 12

Figure 3: Meeting history ... 16

Figure 4: XAMPP Control Panel Overview ... 17

Figure 5: WordPress database connection ... 18

Figure 6: Image upload ... 19

Figure 7: Shortcode 3D model ... 20

Figure 8: Configuration of GTranslate ... 21

Annexes

Annex 1 Material management plan

(6)

1 Introduction

Vuorentaka is located in Hämeenlinna, a town between Helsinki and Tampere. Hämeenlinna is Finland's oldest inland town, with about 68000 inhabitants. The city was founded in 1639 and has got a total area of 1819 km² of which 247km² are lakes. (Hämeenlinna, 2020) Vuorentaka is placed on the border between Ahvenisto and Vuorenta districts. In the west, the area is bordered by the Marssitie road. The area is home to the Vuorenta retirement home from the 1950s with its courtyards. Following a building condition assessment in 2017, a demolition permit was granted for the building. The solid settlement from Vuorenta is approximately originates from the Middle Ages. In 1948, an invitational competition was organized for the design of the Vuorenta retirement home, which was won by architect V.R.

Rytöhonga's proposal. The construction work was completed in late 1953 and the façade of the building with its splash-slings and window shapes, are typical for the 1950s architecture.

(Hämeenlinnan Kaupunki, 2020, pp. 5–10)

The thesis is commissioned by HAMK Smart Research Unit which is one of the four research units at Häme University of Applied Sciences (HAMK). The university has 7866 students and 7 campuses all over Finland. The main campus is in Hämeenlinna University Centre with

around 4700 students and 20 different degree programs. The director of the Research Unit is Jukka Pulkkinen. They deal with Digital Solutions and Platform, Sustainable Services for Wellbeing, and Global Digitalizing Business. (Hämeen ammattikorkeakoulu, 2021) The topic was given by Juuso Saarinen and Joni Kukkamäki who work for HAMK Smart Research Unit of Häme University of Applied Sciences. This project was done in cooperation with Niklas Lähteenmäki and Tommi Terästö from the city of Hämeenlinna.

The aim of the thesis was to research potential technical technologies to preserve the history of the Vuorentaka old retirement house and develop a suitable application for the city of Hämeenlinna. In order to obtain the result of this thesis work, the following research questions were set:

• What kind of technologies are available to develop an application for customer needs?

(7)

• What technology would be the best for the customer and the end-users?

• How can we implement different kinds of information to the application?

• What is the workflow to develop application and content?

(8)

2 Theoretical Framework

To formulate an answer to the first two of the research questions, a selection of potential technologies is needed. The research questions are explained in theoretical and practical aspects. The features and requirements were devised from a client meeting that was held on 20.01.2021. The customer requirements are limited: cross-platform, low-level requirement, maintenance, reach access, multi-language, and the ability to implement a three-

dimensional (3D) model will be explained in the following subchapters.

2.1 Cross-Platform

Cross-Platform means same information and services can be accessed through different computing platforms (software and hardware). The cross-platform application works across multiple platforms on top of the OS system, for example on top of an android device.

(Majrashi, Hamilton, Uitdenbogerd, & Al-Megren, 2020)

It is important for the customer that the application will be available on any devices. It does not matter if the end-user uses an Android or an iOS device to access the application.

2.2 Low level requirement

Low-level requirement is defined as a system and hardware requirement. System or

hardware requirements are a listing of what the software program or hardware device needs to operate the program or game. If the device does not meet the requirements, then the software or game will not work. Mostly the hardware requirements have only OS

requirements or capability. (Computer Hope, 2021)

In the client's mind, anyone interested should have access to the application. It is not

assumed that everyone has the latest device and the latest OS on the device is installed. The application should work on any low-end devices.

(9)

2.3 Maintenance

The definition of software maintenance was defined by the Institute for Electrical and Electronics Engineers (IEEE) and involves those activities which are required to adapt, repair, and perfect the software product. It also includes the process of modifying a software system or other attributes. The activities to sustain the maintenance of an application include but are not limited to user training and support, managing software licenses, managing networks and administering security, and performing quality assurance. (Reifer, 2011, pp. xvii–xviii)

From the customer's point of view, maintenance was defined as an opportunity to maintain the website. That can be done by uploading new content to the website, improve

performance or keep the software up to date.

2.4 Reach access

Nowadays, most people use the internet to access information or entertainment through different platforms. For instance, to access a website by entering the desired Uniform Resource Locator (URL) in the address bar in the browser. (1&1 IONOS Inc., 2016)

By 'reach access', the customer understands how the application can be used by the end user's device. This service is accessible via a web browser or by installing an application on the user’s device.

2.5 Multi-Language

The United Nations Educational, Scientific, and Cultural Organization (UNESCO) researched the linguistic diversity in cyberspace. It becomes apparent that the most developed web pages were written in English (50.82%) followed by German (4,91%) and France (3,48%). As a consequence, the success of a website in the international arena depends on its multilingual availability. (Pimienta, Daniel, Prado, Blanco, & Alvaro, 2009)

(10)

The application is mainly for local people to learn something about the history of the old retirement house. It is more efficient if the application is available in multiple languages.

Through several language options, more people can inform themselves about the history of the old retirement house.

2.6 Implement 3D model

Three-dimensional (3D) is the virtual representation of objects, spaces, or motion

sequences. It is distinct in the conversion of technical drawings and illustrations into three- dimensional models and the reproduction of objects in the form of three-dimensional

computer graphics. (Regina Franken-Wendelstorf, Sybille Greisinger, Christian Gries, & Astrid Pellengahr, 2019) To use 3D images, it is possible to install a plug-in viewer to view and interact with them. Developing a 3D image is divided into three parts: tessellation, geometry, and rendering. (WhatIs.com, 2021)

According to the customer’s request, the application should show various information such as images, videos, and 3D models. Therefore, a plug-in viewer is needed to view and interact with it. Through interaction with the 3D model, the end-user will have a unique user

experience (UX).

2.7 Easy to use

The term easy-to-use is part of the umbrella term user-friendly. A hardware device or software interface that is easy to use is described as user-friendly. There are several common attributes which represent user-friendly interfaces: simple, clean, institutive, and reliable. A user-friendly interface is simple when it is not overly complex and provides quick access to common features or commands. The attribute 'clean' refers to well organized and easy to place tools and options. The average of users must understand the interface and receives small tips on how to use the interface (intuitive). A reliable product does not malfunction or crash. (Per Christensson, 2021)

The client requires the application to be user-friendly and accessible without the need to download an application.

(11)

2.8 Potential technical technologies

Possible technologies will be presented in this subchapter depending on the crucial requirements of the customer. Chapter 2.9 then explains the comparison of the possible technical technologies with the defined customer requirements.

2.8.1 Native applications

Native Apps are especially built for one specific platform or mobile device operating system (OS) such as iOS and Android. The native apps are meant for only one type of mobile device OS. If the app is developed for iOS, it works only on iOS devices but not on Android.

Many different programming languages are used for native App programming. The most used are Java, Kotlin, Swift, React and Python. On the one hand, the user can get a better experience by utilizing the user interface of the device. Because the native app accesses the hardware of the smartphone, various smartphone functions such as Bluetooth, GPS and camera can be used.

On the other hand, without using a Cross-platform development framework (CPDF), the same must be developed for each operating system or platform. The maintenance and upkeep for both versions is also doubled. Every time there is an update, the user has to download a new version on his end device. (Valdellon, 2019)

2.8.1.1 React native

According to Mascetti et. al, (2020) "React Native is a CPDF based on the interpreted app approach." CPDF stands for Cross-Platform Development Frameworks and combines

different system APIs from different platforms to its own APIs. Thus, using it, developers can easily develop cross platform applications by using only one programming language. React Native is using an extension of JavaScript called JSX and allows the developer to specify the users interface. (Mascetti, Ducci, Cantù, Pecis, & Ahmetovic, 2020)

(12)

2.8.1.2 Xamarin

Xamarin is an open-source app platform from Microsoft for building modern and performant iOS and Android apps with C# and .NET. It is an abstract layer and wraps all native APIs from Android, iOS, and Windows in specific cross-platform APIs. The programming language is C#, and it runs on top of .NET which manage tasks such as memory allocation and

interoperability with the underlying platforms. Developers can easily write an application for the three major platforms by using only one programming language. In addition, Xamarin has several libraries to wrap specific platform APIs in cross-platform APIs, such as

Xamarin.Forms and Xamarin.Essential. For example, using Xamarin.Forms the developer can place a button on the side only once, and as a result it inserts a native button in the target native platform, such as Android, iOS, and Windows. At runtime, a certain native platform will be presented to users on which device the app is running. (Johnson, Britch, & Craig, 2020, pp. 3–6)

2.8.2 Website

The first-ever website was published on the 6^th August 1991 by Tim Berners-Lee who was at that time a CERN employee, by using a Steve Jobs designed NeXT computer (Nix, 2016). To access a website the user can easily use a web browser and enter the domain address. A website has a range of web pages included. There are mainly two different kind of website, such as static and interactive. Static websites are designed to provide information and resources without any user-interaction. On the contrary, in interactive websites, the user can communicate with other users on the website, for example, through a chat box or comment box. A website normally includes many webpages (homepage, contact, support, blog, forum, about, etc.), but sometimes a website is only represented with single entity content without any hyperlinks. Those websites are called a 'Single-page Website'.

Characteristics of a website is the collection of several web pages, which contain information in the form of videos, text, and other resources on the subject in question. The website can be accessed under a unique domain. A web page is a document under a unique URL.

(Javatpoint, 2021)

(13)

2.8.2.1 Progressive Web App (PWA)

A PWA is an incognito web application which covers itself as a native mobile application with a responsive design, fast load speed, offline functionality, a home screen app icon, and more(Karnes, 2019, p. 2).

Web browsers, for example, Chrome, Firefox, Safari and Edge support a unified standard of JavaScript interface called Service Worker. Thus, web applications can implement and deploy their own JavaScript code by using a Service Worker. In addition, the web browser takes and integrates essential service worker information (for example app name, icon, etc.) and integrate the web application into the mobile device environment. Furthermore, the service worker can perform other tasks. In particular, an offline functionality will be supported. This means, that data from the web application will be stored on the device itself and later one synchronized via a service in the cloud. (Lang & Müller, 2020, p. 17)

The browser of the mobile device provides several functions for PWAs via interface that were previously reserved for native apps. For example, access to the camera of the mobile device. (Incloud Engineering GmbH, 2021)

2.8.2.2 WordPress

WordPress was founded in 2003 by Mike Little and Matt Mullenweg when they created a fork of b2/cafelog. It is built on PHP and MySQL and licensed under the GPLv2. Moreover, it is also used for 40% of the platforms on the web. The mission of WordPress is to provide a software designed for everyone, emphasizing, accessibility, performance, security, and ease of use. In addition, the basic version of WordPress is free to use and the community behind it is huge. (WordPress.org, 2018a)

Over the years, WordPress has improved and with the introduction of custom post types (CPTs) in version 3.0 it becomes a fully functional content management system (CMS). Any content can be created, updated, and deleted by an administrator or a responsible user via the dashboard which can be accessed through the web browser. With various APIs, common objects, and helper functions it can be access via low-level systems. (Messenlehner, 2019)

(14)

Wordpress.org has powerful features such as customizable designs, SEO friendly, responsive mobile sites, high performance, manage on the Go, high security, powerful media

management, easy and accessible. (WordPress, 2021)

2.8.3 Augmented Reality (AR)

Augmented reality (AR) describes a technology to overlaying or combining alphanumeric, symbolic, or graphical information with a user's view of the real world. It is an extension of the real world for the user via his user interface (UI).The first known AR technology was created in the early 1900s and a patent filed by Irish telescope maker Sir Howard Grubb. His invention is designed to help aiming with a projectile firing weapon. (Aukstakalnis, 2017) AR does not need any special equipment such as virtual reality (VR). A mobile device or a tablet is usually enough to add digital layers to the real world and to gather a good user experience. It works with S.L.A.M (simultaneous localization and mapping) and depth tracking. Different types of information (for example text, images, 3D models, and animations) are projected onto a second level of the view of the end device. Nowadays, there are already some great AR applications like Pokémon Go. Pokémon appear as pixels on the mobile phone screen, and it is possible to catch them through interaction. The user has the feeling of being in the game. (CCM, 2020)

2.8.3.1 ARCore with Unity on Android devices

In August 2017 Google introduced a technology called ARCore for the realization of AR applications on Android devices. It can be considered as a successor to Project Tango. The main difference between Project Tango and ARCore is that ARCore is the Tango SKD (software development kit) without supporting for special depth camera. Before ARCore appeared on the market, Apple presented ARKit technology for using AR on iOS devices in June 2017. ARCore app for end users was replaced by Google Play Services in August 2019.

(Android Wiki, 2019)

(15)

Miller (2018) describes Google ARCore SDK for Unity as follows: “This SDK provides native APIs for all of the essential AR features supported on ARCore and exposes them within Unity for the Android platform.“

2.8.3.2 AR Foundation

AR Foundation Unity is a high-level cross-platform API to combine ARKit and ARCore APIs to support AR applications. Thus, a developer can write an application once and built it for either Android or iOS. For a list of supported features see the Figure 1: AR Foundation 2.1 (verified in Unity 2019 LTS) (Technologies, 2021). (Miller, 2018)

Figure 1: AR Foundation 2.1 (verified in Unity 2019 LTS) (Technologies, 2021)

(16)

2.9 Comparison of technologies

At the beginning of chapter 2 Theoretical Framework the customer requirements were set.

In the following sub-chapters, some possible technical technologies were described. These are shown as rows in Figure 2: Technology comparison and the columns are the customer requirements. In order to present a 3D model as realistically as possible on the end device, one of the AR technologies would be suitable. However, the end device needs a certain OS version to be able to use the app. Since the customer had set a requirement as ‘low level- requirement’ in this case, this possibility cannot be considered. The recommendation here would be to develop an application based on AR Foundation. This would work on both major native operating systems and the developer would only have to write one code. This

technology could be presented as a special experience for the end user. The elaboration of the special result is not part of this thesis.

React native and Xamarin can both implement a 3D model. The difference with AR technologies is that they have a ‘low-level-requirement’ that is required by the client.

Another requirement of the customer is easy to use. In this case, react native and Xamarin are accessible via a download. This includes access via an app. Maintaining an application is as important as accessing it. A responsible person must be chosen to make changes to the content. The application must be updated for the previously mentioned technologies (AR technologies, react native and Xamarin). The latest version can only be obtained by updating the version.

WordPress as well as PWA require a plug-in to implement a 3D object. PWA behaves like AR technologies and native applications, which need to be downloaded when a new version is released. The advantage of a PWA compared to native applications and AR technologies are that they are available offline. Just like the possible technologies mentioned so far, a PWA can also reach multiple platforms. WordPress behaves like a website and can therefore be accessed via an Internet browser. This possibility fully meets the requirement of ease of use.

For this reason, when content is changed, a new version is produced, but the end-user does not have to download it. The latest version is automatically made available to the end-user after it has been published on the server. To extend the reach of the website, a plug-in can be installed. The plug-in translates the website into several defined languages.

(17)

Consequently, WordPress is best suited for this application scenario, as it meets the customer's requirements.

Figure 2: Technology comparison

2.10 WordPress Plug-Ins

After a possible technical technology has been evaluated in chapter 2.9, the plug-ins used will be explained based on this. The basic functions of these plug-ins are explained in this chapter and later used in the practical part.

2.10.1 Vrm 360 3D Model Viewer

Vrm 360 3D Model Viewer is a feature to add 360 degrees, rotation, and zoom in WordPress.

Its interactives with responsive Web Design. Within this 3D models can be shown on a website. The advantage of it is that the allowed format to display it includes obj, stl, wrl, and fbx. By using short codes, the 3D model can be interacted with. (WordPress.org, 2021b)

2.10.2 GTranslate

Since 2018, GTranslate is a leading translation service provider. The plugin uses Google Translate automatic translation service to translate a site. It has got 103 available languages including Finnish, English, and German. There is a possibility to activate the pro version, but

(18)

this is not activated, because the free version is sufficient in its scope. The free version includes, for example, a language switching icon and on-the-spot translation of a website.

(WordPress.org, 2021a)

(19)

3 Methodology

The thesis is divided into two parts. The first part described the theoretical foundations relevant in answering the first two research questions. Based on this foundation, chapter 4 deals with the practical implementation and answering of the last two research questions.

The description of which methodologies were used to answer the research questions is explained in this chapter.

3.1 Research methods

The research work is based on the appropriate literature selection and filtering based on certain keywords. The structural approach, as well as the methodology of the literature search, was carried out according to "Project Management for Students". (Beifuss &

Holzbaur, 2020, pp. 60–69)

Based on the literature search methodology, a qualitative data search was used. Qualitative research is also concerned with understanding the subject matter. To understand the subject matter, the literature was searched using the following keywords: "native

application", "AR", "website", "PWA" and others. The following platforms, databases, and libraries were used for the search: wordpress.org, unity.com, link.springer.com,

search.proquest.com, degruyter.com, learning.oreilly.com, and others. The body of literature found was analysed, categorized, and summarized, see Chapter 2. (Streefkerk, 2019)

3.2 Purpose

The purpose of this thesis is to obtain possible technical technologies and compare them by reference to the customer requirements. In chapter 2.9 the chosen technology is described.

(20)

4 Practical implementation

As mentioned in chapter 2.8.2.2 WordPress is fast, efficient, mobile responsive and can be accessed over a variety of browsers. One of its latest updates was to become a fully content management system. In this chapter the results of the research chapter 2 will be utilized to develop a possible prototype. The suggestions are based on the findings from the research section. First, an overview is given of how the project is structured and for what purpose it was created. Then it describes how the application was built and what important steps were needed for it. The plug-in configuration, as well as the input of various information, was illustrated.

4.1 Development description

At the beginning of the thesis work, a start-up meeting was held on 22.01.2021 with the City of Hämeenlinna as well as with Joni Kukkamäki from the HAMK Smart research unit. The criteria decided at this meeting formed the framework of this thesis (see chapter 2.1 to 2.7).

The repeated meetings with Joni Kukkamäki and the exchange of information and feedback supported this thesis work. The history of the meetings can be seen in Figure 3: Meeting history.

On the left side of Figure 3: Meeting history is the title of the meeting. To the right of it in the first line is the date of the meeting. The second line lists the people involved in the meeting. Then the content of the meeting is noted.

(21)

Figure 3: Meeting history

Based on the literature research and the exchange with Joni, the theoretical knowledge and the selected technology were put into practice. The following chapters describe how to set up the required components, embed information, and set up and configure the plug-ins.

4.2 Set up

To run this project in WordPress, suitable WordPress Version and other applications were required to develop a website on localhost in WordPress:

• server running version of PHP 7.4 or higher

• MySQL version 5.6 or MariaDB 10.1 (or greater) (WordPress.org, 2018b)

In addition, one more application was needed to run WordPress locally:

• XAMPP (Apache + MariaDB + PHP + Perl) (Adnan, 2021)

After installing all components, the downloaded WordPress ZIP file is unzipped and renamed to "vuorentaka". The folder was moved to the C:\xampp\htdocs\ directory. By starting the

Startup Meeting

•22.01.2021

•City of Hämeenlinna and Joni Kukkamäki

•Customer requirements

Thesis check

•25.01.2021

•Joni Kukkamäki

•Thesis structure

Thesis check

•04.02.2021

•Joni Kukkamäki

•Thesis structure

Thesis check

•25.02.2021

•Joni Kukkamäki

•Possible technical technology / WordPress plug-in

Thesis check

•08.03.2021

•Joni Kukkamäki

•Idea exchange

(22)

XAMPP application, the following window appeared, see Figure 4: XAMPP Control Panel Overview.

Figure 4: XAMPP Control Panel Overview

The two installed components were started by pressing “Starten”. Then a new database user was created in phpMyAdmin.

Using the URL "http://localhost/phpmyadmin", a new database named vuorentaka was created. The format was "utf8mb4_general_ci". In this case, a new user was added to the database vuorentaka with all rights.

After creating the user for the database under "http://localhost/phpmyadmin", WordPress is installed on the C-Drive using the URL "http://localhost/vuorentaka" local. In Figure 5:

WordPress database connection under "Database Name" the previously created name of the database was entered, as well as the corresponding username and password. For the

maintenance of the website an administrator was created and at the same time, a name for the page was assigned.

(23)

Figure 5: WordPress database connection

4.3 Embedding of information

WordPress is a powerful software for the easy creation of websites. These are distinguished by SEO-friendly, CMS, responsive mobile site, and high performance. During the progress of the website, attention was drawn to the block editor. This makes the program easy to use.

Thus, images, videos, headlines, and text passages can be inserted easily and quickly. Among other things, the design itself can be changed by changing background images, font colour, and font size. Through the possibility of the block editor of WordPress the created blocks can be freely arranged by drag & drop. With the preview, the self-created website can be

displayed in different views. With the latest update, it is even possible to emulate the website on a mobile device.

Due to the popularity of WordPress, several plug-ins exist to add even more features to the standard properties. In this thesis, a plug-in for the implementation of a 3D object and the

(24)

possibility to display the content in multiple languages was added. A plug-in can be downloaded from the plug-in library.

4.3.1 Embed a picture

As described in Chapter 4.3, kinds of information can be added through the block editor.

Videos and images are implemented in the same way. As an example, the image upload is shown in Figure 6: Image upload. The three options 'Upload', 'Media Library', and 'Insert from URL' are also available for the video upload. By selecting one of the three options, the corresponding information can be inserted.

Figure 6: Image upload

4.3.2 Embed a 3D model

By installing the mentioned plug-in in chapter Vrm 360 3D Model Viewer, a 3D model can now be integrated into the website. To take out from the documentation of the plugin, a certain short code must be inserted. Through the block editor, such a short code can be added. The short code contains various parameters. There are required and optional parameters. Among the required parameters are 'canvas_name' and 'model_url'.

Canvas_name specifies the name of the 3D model. The model_url specifies the location of the 3D model. The file type 'obj' must be present in the directory, 'mtl' is optional. The optional parameters are for example 'aspect_ratio', 'speed' and 'initial_offset'. The name of the optional parameter (aspect_ratio) also implies the meaning. The value quantity is

indicated here in any number. The speed, also in any number, specifies the rotation speed of the model. The default value is 1.0. The parameter Inital_offset concerns the camera offset.

This is set with a default value of 1.15.

(25)

The short code, which was used in this elaboration, contains three described parameters with their default values. The name and the path of the file have been changed.

(WordPress.org, 2021c) Figure 7: Shortcode 3D model

4.4 Configuration of GTranslate

After the successful installation of the plug-in GTranslate via the plug-in library of WordPress it can be configured. First, it was activated in the plug-in overview. The plug-in was

configured in the settings under the item 'GTranslate the plug-in'.

The configuration overview can be seen in Figure 8: Configuration of GTranslate. In the setting 'widget look' the view of the selected language can be changed. A distinction is made between language code, flags, and flags with names. For a better overview, the display of the language codes was chosen in this work. A special feature of this plug-in is that it displays the website in the language of the browser. The user can read the web page according to his usual language if this was deposited as activated. Another point in this scenario is the placement of the language codes for the translation of the web page. In this case, the language codes are placed in the upper right corner. This way the reading flow is not disturbed. The languages to be translated can be added in the lower part of the

configuration overview. After that, the plug-in automatically appears on each created web page at the desired position with the corresponding view. The end-user can change the language of the web page by clicking on the appropriate language code.

(26)

Figure 8: Configuration of GTranslate

(27)

5 Results

The goal of the thesis was to find a suitable technology to develop an application to present the history of the retirement house of Vuorentaka. This goal has been accomplished by describing possible technical technologies and compare them with the customer requirements. Those were given by the customer in the 'Start-up meeting' on the 25th January 2021. The customer requirements include a cross-platform, low-level requirement, maintenance, reach access, multi-language, and the ability to implement a 3D model. The possible technical requirements were React native, Xamarin, WordPress, PWA, ARCore SDK with Unity, and ARCore Foundation.

Through Figure 2: Technology comparison a comparison was shown. It has been shown that WordPress is the best suitable technology to present the history of the retirement house of Vuorentaka. WordPress has great features such as SEO friendly, fully CMS, high

performance, and easy to use. It combined the possibility to maintain the application easily and run on any web-enabled device.

To implement a 3D model as well as on-the-spot translation of a website two plug-ins were required. Those two were easily installed over the WordPress plug-in library. The

configuration and settings were shown in chapter ‘Embedding of information’ and

‘Configuration of GTranslate’. Thus, the application was more suitable to the customer's requirements.

During the process of developing the application, some difficulties were emerged, for

example changing requirements of the customer and access to info material. The author was able to take the client's changes into account and find a solution for the missing information material.

The final product was a website developed by WordPress with two additional plugins. On the main page the different types of information were reached over a link in the picture.

Through the plugin 'Vrm 360 3D Model Viewer' a 3D model was shown. The plugin enabled to turn, rotate, and zoom in and out of the 3D model. GTranslate provides a big range of languages. In this application the website was translated in English, Finnish, and German. In

(28)

addition, the plug-in activates the language which is set in the browser of the device. The application accomplished the customer requirements and offered the opportunity to maintain and expand the application according to the next customer’s request.

5.1 Follow-up plan

An additional benefit would be to develop an AR app to increase the UX of the end-user. This one could be embedded with a link on the website. The application is mostly created for the inhabitants of Hämeenlinna. Nevertheless, the history of the old retirement house can be translated into any defined language. As a suggestion of the author a visitor’s book could be developed as well. This would allow the tourist to give feedback on the history of the old retirement house.

The website developed in WordPress is running on localhost at the author’s computer. The next step is to get an URL and publish it on the World Wide Web. Therefore, a server is needed. Another requirement to develop this application is defining a person that will maintain the website. This can be handled by the user role function of WordPress.

(29)

6 Summary

In the theoretical framework of this dissertation, the first question of the research question was answered. The possible technologies were React Native, Xamarin, PWA, WordPress, ARCore SDK with Unity, and ARCore Foundation. After the explanation of the customer’s requirements in the theoretical framework, the best suitable technology was found in 2.9.

Thus, the second question of the research question was described. The best suitable technology was WordPress.

WordPress is free to use and offers a big range of opportunities to build a website.

Developing a website is easily done by the provided block editor. The block editor enables the developer or administrator to embed a different kind of information in a few steps. How to embed a different kind of information into the application was one of the author’s

research questions. An overview of how it was done is briefly described in chapter 4.3.

Besides, an implementation of a 3D model was utilized in chapter 4.3.2. Thus, the last research question is also answered by following the steps to embed a different kind of information to the application.

During the thesis work, it was a great experience to be a part of one of the research unit projects at HAMK Smart. The challenges ahead were difficult to understand and overcome in the first view. Nonetheless, the challenges were overcome in the end through structuring and perseverance. Moreover, the author learned during the process not to bury his head in the sand when difficulties arose during the first semblance. As well as the information gathering of the literature search via various platforms improved the skills of the author.

(30)

7 References

1&1 IONOS Inc. (2016, June 14). How are websites accessed? 1&1 IONOS Inc. Retrieved from https://www.ionos.com/digitalguide/websites/web-development/how-are-websites- accessed/

Adnan, S. (2021). How to Install WordPress on Localhost (5 Easy Steps) - weDevs. Retrieved from https://wedevs.com/166974/how-to-install-wordpress-on-localhost/

Android Wiki (2019). ARCore. Retrieved from https://www.droidwiki.org/wiki/ARCore Aukstakalnis, S. (2017). Practical augmented reality: A guide to the technologies,

applications, and human factors for AR and VR (Online-Ausg). Boston: Addison-Wesley.

Beifuss, A., & Holzbaur, U. (2020). Projektmanagement für Studierende. Wiesbaden: Springer Fachmedien Wiesbaden. https://doi.org/10.1007/978-3-658-32664-7

CCM (2020). Augmented Reality: What Is it and How it Works. Retrieved from https://ccm.net/faq/49279-augmented-reality-advantages-and-examples

Computer Hope (2021, January 1). What are System Requirements? Retrieved from https://www.computerhope.com/jargon/s/systrequ.htm

Hämeen ammattikorkeakoulu (2021, February 17). HAMK Smart – Intelligent Services - Hämeen ammattikorkeakoulu. Retrieved from https://www.hamk.fi/research/hamk- smart/?lang=en

Hämeenlinna (2020, October 29). Housing and environment - Hämeenlinna. Retrieved from https://www.hameenlinna.fi/en/housing-and-environment/

Hämeenlinnan Kaupunki (2020). Asemakaavan selostus - Metsäharju. Retrieved from https://www.hameenlinna.fi/wp-

content/uploads/2020/10/2565_selostus_hyvaksyminen.pdf

Incloud Engineering GmbH (2021, February 8). Apps entwickeln: Native App vs. Cross Platform App und wann Flutter & Co. helfen | INCLOUD. Retrieved from

https://www.incloud.de/magazin/native-vs-cross-platform-app

Javatpoint (2021, February 19). Difference between Webpage and Website - javatpoint.

Retrieved from https://www.javatpoint.com/webpage-vs-

website#:~:text=%20Few%20key%20differences%20between%20Webpage%20and%20W ebsite,extension%20in%20its%20URL,%20such%20as…%20More

(31)

Johnson, J., Britch, D., & Craig, D. (2020). What is Xamarin? - Xamarin. Retrieved from https://docs.microsoft.com/en-gb/xamarin/get-started/what-is-xamarin

Karnes, K. (2019, May 14). What are Progressive Web Apps and Are They Worth It?

CleverTap. Retrieved from https://clevertap.com/blog/progressive-web-apps/

Lang, M., & Müller, M. (Eds.) (2020). Hanser eLibrary. Von Augmented Reality bis KI: Die wichtigsten IT-Themen die Sie für Ihr Unternehmen kennen müssen. München: Hanser.

Retrieved from https://www.hanser-elibrary.com/doi/book/10.3139/9783446464353 https://doi.org/10.3139/9783446464353

Majrashi, K., Hamilton, M., Uitdenbogerd, A. L., & Al-Megren, S. (2020). Cross-Platform Usability Model Evaluation. Multimodal Technologies and Interaction, 4(4), 80.

https://doi.org/10.3390/mti4040080

Mascetti, S., Ducci, M., Cantù, N., Pecis, P., & Ahmetovic, D. (2020, May 14). Developing Accessible Mobile Applications with Cross-Platform Development Frameworks. Retrieved from http://arxiv.org/abs/2005.06875

Messenlehner, B. (2019). Building Web Apps with WordPress, 2nd Edition (2nd edition).

[Erscheinungsort nicht ermittelbar], Boston, MA: O'Reilly Media Inc; Safari. Retrieved from https://learning.oreilly.com/library/view/-/9781491990070/?ar

Miller, D. (2018, December 18). (English) Unity’s Handheld AR Ecosystem: AR Foundation, ARCore and ARKit. Unity Technologies. Retrieved from

https://blogs.unity3d.com/pt/2018/12/18/unitys-handheld-ar-ecosystem-ar-foundation- arcore-and-arkit/

Nix, E. (2016, August 4). The World’s First Web Site. HISTORY. Retrieved from https://www.history.com/news/the-worlds-first-web-site

Per Christensson (2021, March 14). User-Friendly Definition. Retrieved from https://techterms.com/definition/user-friendly

Pimienta, Daniel, Prado, Blanco, & Alvaro (2009). Twelve years of measuring linguistic diversity in the Internet: balance and perspectives; UNESCO publications for the World Summit on the Information Society; 2009. (0000187016). Retrieved from

http://www.unesco.org/new/en/communication-and-

information/resources/publications-and-communication-materials/publications/full-

(32)

list/twelve-years-of-measuring-linguistic-diversity-in-the-internet-balance-and- perspectives/

Regina Franken-Wendelstorf, Sybille Greisinger, Christian Gries, & Astrid Pellengahr (Eds.) (2019). Das erweiterte Museum: Deutscher Kunstverlag (DKV).

https://doi.org/10.1515/9783422981010

Reifer, D. J. (2011). Software Maintenance Success Recipes (1st ed.): Auerbach Publishers, Incorporated. https://doi.org/10.5040/9781501374043.0003

Streefkerk, R. (2019, April 12). Qualitative vs. quantitative research. Scribbr. Retrieved from https://www.scribbr.com/methodology/qualitative-quantitative-research/

Technologies, U. (2021, February 18). Das AR Foundation-Framework von Unity | Unity.

Retrieved from https://unity.com/de/unity/features/arfoundation

Valdellon, L. (2019, May 23). What Are the Different Types of Mobile Apps? And How Do You Choose? Retrieved from https://clevertap.com/blog/types-of-mobile-apps/

WhatIs.com (2021, March 9). What is 3-D (three dimensions or three-dimensional)? - Definition from WhatIs.com. Retrieved from https://whatis.techtarget.com/definition/3- D-three-dimensions-or-three-dimensional#

WordPress (2021, February 17). Blog Tool, Publishing Platform, and CMS - WordPress.

Retrieved from https://wordpress.org/

WordPress.org (2018a). Democratize Publishing. Retrieved from https://wordpress.org/about/

WordPress.org (2018b). Download. Retrieved from https://wordpress.org/download/

WordPress.org (2021a, March 2). Translate WordPress with GTranslate. Retrieved from https://wordpress.org/plugins/gtranslate/

WordPress.org (2021b, March 2). Vrm 360 3D Model Viewer. Retrieved from https://wordpress.org/plugins/vrm360/#description

WordPress.org (2021c, March 8). Vrm 360 3D Model Viewer. Retrieved from https://wordpress.org/plugins/vrm360/#installation

(33)

Annex 1: Material management plan

The diary is stored on drive C of the author's computer and is regularly backed up. The diary is kept at station C for at least one year after the completion of the thesis.

An application to present the history of Vuorentaka old retirement house