Tutorial 5: Using Location & GPS

Last time we covered using Dynamic Content in your apps to free up time and space, and make the app making process a bit more streamlined, and this tutorial covers one of AppFurnace’s other features, Location & GPS.

AppFurnace makes it easy to add location-aware elements to your apps using mobile devices in-built GPS, allowing you to create rich experiences that respond to where a user is actually using your app.

This kind of feature is great for walking tours, city guides and story-telling, but it can also be used for businesses and organisations that want to attract attention to locations - perhaps for promotional campaigns to draw more people into your shops or events.

A Few Notes about GPS

Generally, GPS works well, and location-based technology is getting better with every release of a new smart phone, but when you’re working with GPS, there are a few things to consider:

• Areas should be no less than 20m across, otherwise you risk GPS not picking up the location where you’d like it
• In built-up areas, GPS can be less reliable
• Covered areas are normally fine to use, but may require some testing in the location to make sure the app works as planned. As a general rule of thumb, if a user can look up and see the sky, the hotspot should work

Testing your app on location is always advised, using the AppFurnace Player utility app. Carrying out a few tests of how the hotspots line up, and how the hotspots feel when using the app in a physical space (including traffic, other pedestrians, background noise) can help you to create a more enjoyable experience for your users.

If it’s difficult to find the hotspot in person, you can make them larger, or if spots are getting overlapped, place them further apart.

Adding Location Hotspots

Let’s jump in and start using Locations - open a new (or existing) app in AppFurnace, and click on the Locations tab. You’ll see a large map area, which will focus on your location (if you’ve added one to your profile), as well as a few tools in the right-hand panel.

Zoom into the area you want your GPS hotspots to be, then choose the “Add Point” tool from the right-hand panel (Circle icon) and click the map, wherever you’d like the point to be.

You’ll see an orange hotspot appear on the map, with the properties of that point displayed in the right-hand panel, under the tools buttons. We’ll be using these properties to control what happens when a user comes into contact with this hotspot.

We’re going to show the user different pages when they enter and leave an area, but it’s also easy to apply the same technique to playing audio, and calling functions in code.

Open the Layout tab, and set up a couple of pages for the hotspots that we’ll be creating. Start by creating a simple screen, with a main label widget that will show what page, and part of the walk a user is on. Name the page name to “1”, then duplicate this page, changing the content and the names accordingly.
You could add Dynamic Content to this experience to expand on it later.

Then, add a page and drag it to the top of the pages list on the right, so that it becomes the home page. Name this “Home” and add a simple message like “Start walking...” as the main label.

Back in the Location tab, click on the hotspot we created. We’re going to make it so that the relevant page is displayed when a user walks into the hotspot area, and they’re shown the “Home” page again when they leave it.

So, in the “Move In” section of the properties panel on the right, enter “1” in the Page field.
In the “Move Out” page field, enter “Home”.

We can see the affects of this straight away in the “Preview Online” window. Make sure the Map is showing (click the “Show Map” button), and click on the map area to place a simulated user. When you click around the map, you should still be seeing the Home page, until you click inside the orange hotspot, when the screen should change to page 1. It should stay on page 1 if you click anywhere inside the hotspot, until you click outside again.

Now, close the Preview, and duplicate the 1st hotspot to create areas for pages 2 and 3, changing the “Move In” page to the applicable numbers.

Again, you can test this in the Preview window to see how the app would behave. But to get a better idea of how large the areas feel when you’re walking, and how far it is to walk between points, you should download the app onto your iPhone or Android device using the AppFurnace Player utility app (full instructions in the “Test on Phone” window), then go and walk around the area with your phone.

Taking it Further

Obviously, this is a very simple example of what you can do with the Location tab, and if you’re comfortable with using and learning a little JavaScript, then you can easily control playing audio and calling specific functions to enhance the experience even further.

There are more tools available in the Location tab for you to experiment with:

• Zones & Lines are non-circular hotspots, to make your zones slightly more specific to the area you’re working with
• Overlapping hotspots, which can be used for things like making sure users are in wider areas before starting the app
• Adding a Map Widget to your screens, to guide users towards your hotspots
• Add Markers to your hotspots so that they appear on the Screen map widgets

Why not check out the Guardian Street Stories app, based in Kings Cross, London, to get an idea of the kind of things you could do. The app can be used away from Kings Cross as well, and you can still get a feel for how the audio tour format works.