Chapter 8.10 - My Directions Tutorial

Time Estimate: 45 minutes

8.10.1. Preview

This version of Map Tour will extend the original app in two ways: (1) by incorporating a Location Sensor, Thunkable’s GPS sensor, and (2) by incorporating stored variables, Thunkable’s local database. The Location Sensor will allow us to extend the list of destinations by adding one’s current location (as determined by the GPS sensor) to the list of destinations. The stored variable will allow us to persist our list of destinations between different uses of the app -- that is, the destinations list will be saved and restored when one quits and restarts the app. Objectives: In this lesson, you will create an app that uses Thunkable’s GPS sensor to determine the user’s location and use it as a destination; learn basic concepts about databases data persistence; incorporate a stored variable local database into an app to permanently save app data on the device.

Introduction: Persistent Data and stored variable

Up until now, the data in our apps has been stored either in app variables or as the value of the properties of the app’s various components. For example, when you store a piece of text in a Label, that data is stored in the computer’s main memory, in its RAM, or random access memory. And as we’ve learned, RAM is volatile, meaning that any data stored there will be destroyed when the app is exited.

By contrast, data stored in the computer’s long-term storage -- e.g., on the phone’s flash drive -- will persist as long as the app is kept on the device. There are various ways to store data permanently on a computer. For example, you could store it in a file, such as a document or image file. Another way to store persistent data is in a database. Thunkable provides us with a very simple, easy-to-use local database in its stored variable. Any data that we store in the stored variable will not disappear when the app is exited. Instead, it will persist between uses of the app -- even if you turn off the device.

Getting Ready

To get started, open the app that you created in the previous lesson. Then follow along with the following tutorial.

The User Interface

We would like to clean up the UI a bit by adding a Menu button. We will add all the other buttons to a Group component. We will add a Save My Location button, a Text Input, an Add New Location button, a Remove Location button to the Group, and the following blocks:

• LocationSensor - for tracking the device’s location.

• Alert - for displaying messages.

Adding the Menu Button

Drag and drop a Button component onto the app, rename it ButtonMenu and set its Text property to “Menu”.

Adding the Group

Drag and drop a Group component onto the app and drag the other buttons aside from the Menu button into the Group. The Menu button should remain outside of the Group.

Adding the Save My Location Button, Text Input, Add New Location Button, and Remove Location Button

Drag and drop a Button component into the Group, rename it ButtonSaveLocation and set its Text property to “Save My Location”.

NOTE: If your device does not support GPS, you won’t be able to use the LocationSensor to acquire new addresses to add to the destinations list. In that case, here is an alternative way to add new locations to the destinations list:

• Add a Text Input component to the Group and rename it TextInputNewDestination.

• Add a Button to the Group, named ButtonAddNewLocation

• Code the ButtonAddNewLocation Click handler to use the value in the text input to add to the destinations list.

Drag and drop a Button component into the Group, rename it ButtonRemoveLocation and set its Text property to “Remove Location”.

Adding the Alert

In the Blocks view, add an Alert blockto the app from the App Feature’s Alert category. No need to rename it, since there is only one. Change the Title property to Location Saved. We will code its behavior in the blocks editor.

Adding the LocationSensor

If you did not already add the Location Sensor in the previous lesson, add a LocationSensor from the Sensors category to the app.

Coding the App’s Behavior

Before working on the app itself, let’s review some information about Thunkable’s LocationSensor.

GPS and the Location Sensor

Thunkable’s Location Sensor (in the Sensors category in App Features) is a block that provides location data about the device’s latitude and longitude.

A mobile device can detect its location in one of three ways:

• Using its built-in GPS sensorwhich acquires a fix on its location from GPS satellites. This is the most accurate but, ideally, requires that the phone has a clear shot of the sky so that it can receive readings from at least 3 GPS satellites. This is accurate within a few meters but uses the most battery power.

• Using a WiFi signal from the surrounding WiFi router. The phone’s location would be the latitude and longitude of the router. This might work indoors and uses less battery power.

• Using the Cell ID -- i.e., signals from surrounding cell towers. This is the least accurate but uses the least power.

This app will use the Location Sensor to determine the device’s latitude and longitude.

Adding Your Location to the List

If your device has a GPS capability, it is easy in Thunkable to add your current location to the list picker’s list. The Location Sensor has the following function, which will get the device’s latitude and longitude:

When it runs, it provides the device’s latitude and longitude. We want to run this when we click on ButtonSaveMyLocation to add it to the list of destinations.

Coding ButtonSaveLocation

When the user clicks the ButtonSaveLocation, we want to add the device’s location to the destinations list, using the in list insert at last block:

This block will add a new item to the destinations list. We also want to update the List Viewer’s elements and call the Alert

Running and Testing the App

Here’s a test to run.

1. Press ButtonSaveLocation to save the current location to the destinations list.

2. Press the Choose Destination list picker to confirm that the new address has been added to the list.

3. Quit the app.

4. Restart the app and look for the saved address on the Choose Destination list.

If you perform these steps, you should notice that the address you saved is no longer on the destinations list. Why is that? The reason is that the destinations list is an app variable and, as such, it is stored temporarily in the app’s RAM (random access memory). When the app is quit, its RAM memory is (effectively) erased. So, when the app is restarted, the destinations list is re-initialized to its original state.

Persisting the Saved Locations with stored variable

As you saw from that test run, the locations that you save while running the app do not persist between uses of the app. To remedy this, we will store the destinations list in a stored variable. We need to add the stored variable in the blocks. Name the stored variable locations:

There are two stored variable actions that need to be taken in order to save and restore the locations:

1. When the app starts up, it needs to read the locations list from the stored variable.

2. When the user clicks ButtonSaveLocation the app needs to store the destinations list to the stored variable.

Inputting the Destinations List from stored variable

The algorithm for inputting the destinations list is complicated by the fact that the first time the app is used, there won’t be a destinations list in the stored variable.

if not (stored locations = empty value)

{

destinations ← stored locations

}

ListViewer text items ← destinations

The algorithm begins by reading the stored locations list from the stored variable. If this is the first time the app is being used, then the attempt to read the stored locations from the stored variable will return an empty value -- the app hasn’t yet stored any data under that variable. In that case, we do not need to store the stored locations in the destinations list and skip over this part. If it is not an empty value, then we do need to store the stored locations in the destinations list. We then set the ListViewer items.

In Thunkable, we want to place this algorithm in the Screen1 Starts block, which will fire as soon as the app starts up.

Saving the Destinations List to stored variable

The algorithm for storing data into a stored variable will go into the ButtonSaveMyLocation Click handler, which now looks like this. Note the added set stored variable locations to app variable destinations.

Adding New Location Button

The Add New Location button will perform a similar algorithm to the Save My Location button, but will not use the Location Sensor and instead insert the Text Input text into the list.

Cleaning up

The User Interface of the app can get very cluttered with all the buttons, especially when adding multiple locations. We have added two buttons that will help with that: Menu and Remove Location.

We want our Menu button to hide/show the Group when the button is clicked. For this, we need to toggle the visibility of the Group. We can use a NOT function to do this.

We want our Remove Location button to remove locations from our list. For simplicity, we will just remove the last item from the list, but you may wish to implement a way to remove specific items later. We will use the in list remove block to remove items from the list and update the ListViewer and stored locations.

8.10.2. Enhancements: Creative Projects

There are a number of enhancements you could implement to improve this app.

1. In its current form, the destination addresses are created by the programmer. Add a Textbox and a Button to the UI to enable the user to input their own destination addresses. Addresses entered by the user should be added to the destinations list. This will make it possible to share the app with friends.

2. Improve the presentation of the search results by using or modifying one or more additional API arguments in the Map’s URL. Here is a complete list of the Maps API arguments.

Advanced: Add a TinyDb to the app so that the user’s destinations will persist. Addresses saved in the TinyDb will be there the next time the app is used.

1. HINT 1: Lists (as well as numbers and strings) can be stored in a TinyDb. So you can store the entire destinations list as one element. Determine when and how to store the destinations. Then, determine when and how to retrieve the destinations. HINT 2: The destinations should be retrieved from the TinyDb when the app is initialized. Here’s how: NOTE: This can be tricky to understand. The first time the app is run, there definitely won’t be any ‘addresses’ stored in the TinyDb. You can specify how to handle the empty data situation with the valueIfTagNotThere parameter. In the example, we set global destinations to a default fixed list so the first time the app runs it will have some sample destinations You could also put a create empty list in valueIfTagNotThere if you wanted the destinations list empty to start. This problem won’t arise once the user has stored some addresses in the TinyDb.

8.10.3. Solutions

It is important to explore with App Inventor and become accustomed to programming without explicit instructions. So try out the challenges listed above and see how far you can get.

If you get stuck -- or, after you've finished, to compare your solutions with ours -- check out the solutions video.

8.10.4. Self-Check

8.10.5. Still Curious

In this lesson you used the Google Maps Application Programming Interface (API), an abstraction that lets you specify commands to the Google Maps application. This is a nice example of cloud computing: Google Maps is the cloud-based application that programmers can incorporated into their apps by learning the API. This is also a nice example of how a program -- in this case a mobile app -- can leverage functionality that professional programmers have developed.

This example is not an isolated case. YouTube, Flickr, Twitter, and Amazon all provide APIs to use at least part of their services.

8.10.6. Reflection: For Your Portfolio

Create a new page named My Directions under the Reflections category of your portfolio and write brief answers to the following questions:

1. What are the advantages of having a location aware app? What are the disadvantages?

2. If you added any enhancements, post the screenshots to your portfolio and explain how you implemented the enhancements.