user's avatar
CT5017 - Treasure Hunt Mobile App
Developing an Idea

The theme that was decided upon for the geocaching web app was a 'spy/detective' theme. This was decided because people often associate spies and detectives with finding out information and solving clues. This would be fit for use in the geocaching app as users would need to solve clues in order to find checkpoints and complete hunts.

The name decided for the web app was 'Spy Hunt' because it fit the brief and chosen theme.
Designing Website Layout

The designs were then created for the website (https://marvelapp.com/prototype/fj83524/screens) which would allow easier website developing later on as the designs just had to be written into HTML and CSS. Prototyping was done because as Bernstein, and Yuhas states, it's an important tool and so useful throughout the development process (Bernstein and Yuhas, 2005).
Homepage

The entire website had to be developed for mobile devices and screens, however, pages should be accessible on desktop too. For example, being able to create new hunts. For this reason a lot of the content will be centered in the middle of the screen. This allows for flexible and responsive content across all devices. As Gardner states, new web standards are making responsive design practical, allowing designers to create a single website that can adapt layout and content to viewing contexts across a spectrum of digital devices. The result should be a more satisfying experience for any user (Gardner, 2011).

The homepage needs to capture the users attention as Lindgaard, Fernanees, Dudek, and Brown state in regard to their data on homepage first impressions, a reliable decision can be made in 50ms (Lindgaard, Fernandes, Dudek and Brown, 2006).

There is also a text animation that was created using CSS in a typewriter style just to further add to the aesthetic.
Login & Register Pages

The login and register pages connect to the SQL database using PHP. It allows the users to create new accounts by entering their name, email, and a password which then all gets added to the database. The password gets hashed using the function 'password_hash()' to add an extra layer of security. As Acker, Hausknecht, and Sabelfeld state, login webpages are the entry points into sensitive parts of web applications, dividing between public access to a website and private, user-specific, access to the website resources. As such, these entry points must be guarded with great care (Acker, Hausknecht and Sabelfeld, 2017).

The login page allows user to enter their previously created account details, which then gets checked with the database to ensure the information has been entered correctly. The password gets verifed with the 'password_verify()' function. If the information has been entered correctly, it logs the user into the website. If the information has been entered incorrectly, it lets the user know that they have entered incorrect credentials.
Furthermore, on pages that should require a user to be logged in, the 'loggedInUser' function can be placed on that page and checks to see if that user is logged in. If they are, it keeps them on the page. If they aren't, it sends them back to the login page. This further increases the security of the website.
Google Maps API

The map page is probably the most important part of the website as it allows the user to see where they are in comparison to everything around them. The map was themed around an old parchment to fit with the game aesthetic. '&map_ids' allowed the map to have this custom theme.
Geolocation

A new Google Maps marker was created that would serve as the marker that would update the user's location. The new marker got given a preliminary position before it would be updated by the user's real location, it got assigned to the map, and also an icon. The icon allowed the marker to be customised to fit the game aesthetic more.

Then if the user gives the browser permission to use their location, the geolocation service enables with the 'success' function. This function will infinitely loop as long as the browser has location permissions. Next it gets the user's actual position using the geolocation service and sets the user location marker to that position. If there is an error obtaining the user's position, it will bring up an info window in the middle of the screen displaying an error.
Proximity Boundry Circles

A new Google Maps circle was created which was given a visible colour for testing, assigned to the map, given a centre position, and a radius in metres. This would later serve as the area in which the user would need to be inside to view the information about a particular marker.
Next a Google Maps JS API function was used to decide whether the user was inside the proximity circle or not. It required the current position of the user, the centre of the circle, and the radius of it. Depending on if the user was inside the circle or not, it would log a different message to the console.
Plotting Info Markers from Database

To test plotting markers onto the map, entries were first manually added to the database.

The first table is the hunt group, each group would contain markers that get placed on the map. The second table contains the actual markers and their positions.
The databases then had relationships added to them. The first table is given a relationship to a specific user login id so that later on only the person that created it can edit them. The second table is given a relationship to a specific hunt group so that all markers in the same group are contained.
Before the markers can get added to the dropdown to be selected and also placed on the map, they have to be retrieved from the database.
First an ajax request is sent to retrieve the information from the database. In the Class.Functions.php file it retrieves the information from both the hunt group and marker info tables and sends it back to the request as a success. Ajax is good for updating information on a webpage without the user needing to refresh which, as Duckett states, the ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated (Duckett, Ruppert and Moore, 2014).
The information about the hunt groups then gets added to the dropdown.
To place the markers on the map, any time the dropdown select changes it checks to see which group has been selected and then retrieves the marker info depending on which group is chosen.
The plotCluesOnMap function then loops through each marker and places it on the map adding a click event listener so the user can click on a marker and discover information about it.
Adding New Hunts

When the user wants to create a new hunt, they can enter the name of the hunt they want to create into the 'Create New Hunt' form. Once they've made a hunt, in the 'Create New Hunt Markers' form they can choose a hunt group to assign a marker to, then give it a name, description, latitude, and longitude.
This includes the 'addHuntGroup' and 'addHuntMarker' functions so that the above forms can have their information added to the database ready to be retrieved later.
The 'addHuntGroup' function takes the name from the form and inserts it into the database with the logged in user's ID so that later only the user that created it can edit or delete them.
The 'addHuntMarkers' function takes the hunt group the user wants to assign the marker to, marker name, description, latitude, and longitude and inserts it into the database.
Editing & Deleting Hunts

When the user wants to delete a hunt or marker, they can click the red bin icon next to it. Before it gets deleted a confirmation popup appears so the user doesn't accidentally delete it.
The 'getAllHunts' functions gets all the hunts that relate to the currently logged in user using their ID. This allows the user to user to edit and delete hunts and markers they created.
The edit button gets assigned the ID of that specific treasure hunt so that when the user goes to the edit page it can retrieve the correct information for that hunt. The same goes for the delete button, this is so it deletes the correct hunt or marker.
On the edit page, the 'editHunt' function gets included so that it can be called when the user edits information.
The edit page also uses 'getTreasureHuntByID', and 'getTreasureHuntInfoByID' functions so it can get the current treasure hunt's title and marker information. These inputs are prefilled with their current information so the user can edit them as required.
These functions retrieve information from the database in created order using the ID in the URL.
The 'editHunt' function takes the information on the edit page form and updates it in the database. Then an alert appears to let the user know the information has been updated.
When the user clicks the delete hunt/marker button it sends an ajax request with the hunts current ID, when successful it deletes the result in the table with that ID without a page refresh.
The ajax request is then caught by the if isset conditions to call the 'deleteHuntGroup' and 'deleteHuntMarker'.
These functions then remove the information from the database. The 'deleteHuntGroup' function is slightly different as it remove the markers first before deleting the hunt itself. This is to prevent there being information left in the database.
Merging Proximity Circles with Markers

Next the proximity circles needed to be merged with the location markers so that the user could only see information about the location when they are inside the proximity. When they are outside they can no longer open the information window.
In the map's script.js file, some things had to be changed to accomodate this function. First, the circles needed to be put where the markers were so they were in the correct location. Then they get pushed into an array. The same goes for the information about that specific marker.
Next it needs to loop through each of the circles in the array, the filter function checks to see if the current user's location is inside a proximity circle by using the previously used 'computeDistanceBetween' function. It then returns the result and makes it either true or false. If the result is true, it adds that markers title to an array. All the other markers won't have titles as the user isn't inside them, and therefore will be added to the array as undefined, this means that the first result in the array will always be the correct one for later. If the result comes back as false - the user isn't inside a circle - then it removes all the click detections to prevent the user seeing information without being inside a proximity.

Next it gets the first result in the title array which will be the one the user is currently in, and loops through the marker information array to find one with the same title. It can then get the index of that and use it to find the exact marker to give a click listener to, whilst also setting the correct information to it.

Without using this method, because of the loop, it would just go to the last marker in the array which wouldn't be correct. This was an issue that had to be faced during the merge.
Leaderboard

When a user is on the map page, every minute it adds a point to the leaderboard. This adds a competitive aspect to the game. It sends an ajax request to add the point, and when successful it activates a phone vibrate function (more detail in the Cordova section below).

Leaderboards are important as they give the user an objective, or task to complete. As Linder, and Zichermann state, leaderboards are a highly effective and affordable way to create a Funware experience around a business objective (Linder and Zichermann, 2010).

The ajax request is then caught which calls the 'addLeaderboardScore' function. This function then updates the leaderboard score for the currently logged in user by adding one to the existing number.
When the user goes onto the leaderboard page, they can see the results with the highest score at the top. This works similarly to how all the hunts are shown on the CMS page.
The 'getLeaderboardScore' function is called (image above), this then retrieves the information from the database and orders by the highest leaderboard score. It then populates the information in the table for each row.
Exporting with Cordova & Plugins

Exporting with Cordova was fairly easy. All that had to be done was to create a Cordova project and add the android platform to it, then choose plugins that suited the app.
On each page, the 'cordova.js', 'cordova_plugins.js', and 'native.js' files had to be linked. Including an 'onLoad' function in the body.
When 'onLoad' is run, an event listener is created which is waiting for the device to be ready. Once the device is ready the function 'vibrateDevice' can be called. This is called in the 'addLeaderboardScore' success function. It uses the 'cordova-plugin-vibration' plugin to accomplish this.
The other main plugin used is 'cordova-plugin-geolocation'. This allows the map page to get the location of the user whilst they are in the app.
Inside the android platform, a 'windowSoftInputMode' can be set to 'adjustPan'. This allows the page to move upwards whilst the user is using their keyboard so they can read the input boxes that might otherwise have been hidden behind it.

Once the app is ready, it can be built into an APK. This can then be downloaded and installed onto an Android device. They can also be built for browser, and also iOS. However, for iOS an Apple Mac device is required.
Video Documentary

This is a video documentary that showcases the Spy Hunt app:
Bibliography

Acker, S., Hausknecht, D. and Sabelfeld, A., 2017. Measuring Login Webpage Security. 1st ed. New York: Association for Computing Machinery. [Accessed 22nd May 2021].

Cordova.apache.org. n.d. Apache Cordova. [online] Available at: https://cordova.apache.org/ [Accessed 22 May 2021].

Bernstein, L. and Yuhas, C., 2005. Trustworthy systems through quantitative software engineering. 1st ed. Hoboken: IEEE. [Accessed 22nd May 2021].

Duckett, J., Ruppert, G. and Moore, J., 2014. Javascript & Jquery: Interactive Front-End Web Development. 1st ed. Indianapolis, IN: Wiley. [Accessed 22nd May 2021].

Fontawesome.com. n.d. Font Awesome. [online] Available at: https://fontawesome.com/ [Accessed 22 May 2021].

Gardner, B., 2011. Responsive web design: Enriching the user experience. 1st ed. Virginia: Noblis. [Accessed 22nd May 2021].

Getbootstrap.com. n.d. Bootstrap. [online] Available at: https://getbootstrap.com/ [Accessed 22 May 2021].

Google Developers. n.d. Google Maps Platform  |  Google Developers. [online] Available at: https://developers.google.com/maps [Accessed 22 May 2021].

Jquery.com. n.d. jQuery. [online] Available at: https://jquery.com/ [Accessed 22 May 2021].

Linder, J. and Zichermann, G., 2010. Game-Based Marketing: Inspire Customer Loyalty Through Rewards, Challenges, and Contests. 3rd ed. Canada: John Wiley & Sons. [Accessed 22nd May 2021].

Lindgaard, G., Fernandes, G., Dudek, C. and Brown, J., 2006. Attention web designers: You have 50 milliseconds to make a good first impression!. 2nd ed. Taylor & Francis. [Accessed 22nd May 2021].
CT5017 - Treasure Hunt Mobile App
0
24
0
Published:

CT5017 - Treasure Hunt Mobile App

0
24
0
Published: