IS2023 Mobile Application for Business

Tutorial 10 Sensors
MIT AI2: Android, where is my car?
(Location sensor, Map, and Pedometer)

This tutorial introduces:

• Determining the location of the Android device by using the LocationSensor
component.
• Personalizing and persistently recording data in a database directly on the device by
using TinyDB.
• Using the WebViewer + Google Map / Maps component to show
directions from one location to another.

Getting started – Android where is my car.

• Note: when you test this app, it is best that you install your app onto your physical
Android device, make sure the GPS is turned on, and then walk outside to 2 different
locations.
• Or
• you can use the given template “T10_AI2_And_Where_Template.aia”, it has 2 pink
color buttons that can help you to set up 2 different locations.

Activity 1. Guide users back to their car.

Step 1: Click on Screen1, in its properties, change its title to be “Android, Where’s My
Car?”

Step 2: In Component view, add the following components listed below.

Component Palette group What you’ll name it Purpose

Type
Display the header, set its
Label User CurrentHeaderLabel text to “Your current
Interface
location:”

HorizontalArran Layout HorizontalArrangement1 Arrange the address info.

gement

Label User CurrentAddressLabel Display the text “Address:”

1|Page
IS2023 Mobile Application for Business

Interface

Display dynamic data: the current

label User CurrentAddressDataLabel address. Set its text to be
Interface “Unknown.”

HorizontalArran Layout HorizontalArrangement2 Arrange the GPS info.

gement

Label User GPSLabel Display the text “GPS.”

Interface
Display dynamic data: the current
Label User CurrentLatLabel latitude. Set its text to be “0.0”
Interface

Label User CommaLabel Display the text “,”

Interface

Display dynamic data: the

Label User CurrentLongLabel current longitude. Set its text to
Interface be “Unknown”

Button User RememberButton Click to record the current

Interface location.

Label User RememberedAddressLabe Display the text “Remembered

Interface l Place”

Layout HorizontalArrangement3 Arrange the Remembered Address

HorizontalArrange info.
ment

Label User RememberedAddressLabe Display the text “Remembered

Interface l Place”
Display dynamic data: the
Label User RememberedAddressData current latitude. Set its text to
Interface Label
be “Unknown”

HorizontalArrange Layout HorizontalArrangement4 Arrange the Remembered GPS

ment info.

Label User RememberedGPSLabel Display the text “GPS”

Interface
Display dynamic data: the
Label User RememberedLatLabel remembered latitude. Set its text
Interface
to be “0.0”

Label User Comma2Label Display the text “,”

Interface

2|Page
IS2023 Mobile Application for Business

Display dynamic data: the

Label User RememberedLongLabel remembered longitude. Set its
Interface
text to be “0.0”

Button User DirectionsButton Click to show the map

Interface
Uesr Set Text to “Choose a different
ListPicker Interface ListPicker1 provider”

LocationSensor Sensors LocationSensor1 Store the remembered location

persistently

TinyDB Storage TinyDB1 Store the remembered location

persistently

WebViewer User WebViewer1 Show directions

Interface

Set the properties of the components in the following way:

• Set the Text property for the labels with fixed text as specified in the above Table.
• Uncheck the Enabled property of the RememberButton and DirectionsButton.
• Check the Screen1.Scrollable property, so that the WebViewer will fit on the screen.

The overall component’s view is as follows:

This is the
original
design.

3|Page
IS2023 Mobile Application for Business

This is from the

given template.
With 2 testing
buttons

Step 3. Add behaviors to the Components (In the Blocks Editor)

➢ Get Current Address from GPS sensor:

*****************************************************
Test your app Stage 1:
➢ Android device: If you use an Android device when you run the app, you
should see some GPS data appear. If you don’t get a reading, check your
Android settings for Location & Security and try going outside. You will

4|Page
IS2023 Mobile Application for Business

have to walk out of the room to see if there’s any change with your GPS
reading.

➢ The initial reading may take more than a few minutes.

***********************************************************

Step 4. Record the current location.

*******************************************************************
Test your app Stage 2:
When the user (both Android and Emulator) clicks the
RememberButton, the current readings for the location sensor are
copied into the “remembered”labels.
********************************************************************

Step 5. Add directions:

*******************************************************************
Test your app Stage 3:
click the Show Directions from current to remembered button, a
Google Map route should be shown on the WebViewer.
********************************************************************

5|Page
IS2023 Mobile Application for Business

Activity 2. Store the car location permanently on the user’s mobile device by using TinyDB.

Step 1: In Block’s view, modify RememberButton to be like follows:

Step 2: Add behaviors when a user opens the app, the remembered information will be
retrieved:

6|Page
IS2023 Mobile Application for Business

*******************************************************************
Test your app Stage 4:

➢ Use an Android Device:

o Download the new version of the app to your phone.
o You are required to give permission to our app to access the device’s
location service.
o Walk out of the room and click on the RememberButton, make sure
the readings are recorded.
o Come back to the room.
o Close the app and reopen it to check if the remembered data appears.
**********************************************************************

7|Page
IS2023 Mobile Application for Business

Activity 3. You may use the Maps and Navigation components to replace the use of
WebViewer.

The Map properties are shown below:

8|Page
IS2023 Mobile Application for Business

For the use of the Navigation component, you must apply for your API Key:

http://ai2.appinventor.mit.edu/reference/components/maps.html#Navigation
https://openrouteservice.org/

For your testing, you may use my API key for your exercise.
API key: 5b3ce3597851110001cf6248731df57a8db547efa1f36b3d0156febd

ButtonMapAPI.Click
It will zoom the map to the user’s
current location.
It will then set the start location and
the end location for the Navigation
component, and call the
Navigation.RequestDirections to
show a route.

9|Page
IS2023 Mobile Application for Business

We add a LineString on the map so that we can show a route to guide the user.
Don’t worry about the values in PointsFromString, we will deal with it in the block editor.

10 | P a g
IS2023 Mobile Application for Business

Navigation.GotDirections event handler will show the distance between 2 locations.

We will use a Web component’s jsonObjectEncode block to convert the received set of
points into the correct formats that LineStrings component required.

Then we Pan the Map to a suitable Zoom level, i.e., 17.

11 | P a g
IS2023 Mobile Application for Business

Activity 4. Challenge yourself.

• Implement a Pedometer to count the number of steps and show them on the screen.
• Convert the number of steps to calories burned.

Activity 5. Submit your work!

1. Take screenshots of your component view and block view for all the screens
in your app.
2. Submit the screenshots to the designated Canvas "Tutorial 10 Submission
Link".
3. Make sure to include your student ID and full name on the design view's
screenshot.
4. The deadline for submission is within one week.

12 | P a g
IS2023 Mobile Application for Business

The following is the overall view of the blocks. Please read the book chapter7 for more detailed
explanations.

13 | P a g
IS2023 Mobile Application for Business

14 | P a g
IS2023 Mobile Application for Business

Done!

o Reference:
http://www.ai2.appinventor.org/bookChapters/ch
apter7.pdf

15 | P a g