Basics 107r Building Car location app with MIT App Inventor 2

Basics: Project 107r

Project name: Building Car location app with MIT App Inventor 2

Tags: MIT App Inventor 2, LED, Bluetooth, Android, Where’s My Car?

Attachments: CarLocation.aia, CarLocation.apk

General

We will learn how to build Carl location app with MIT App Inventor 2.

You parked somewhere on the street, but when your shopping done you don’t have a clue where the car is. The friends you came with are equally as clueless. Fortunately you haven’t lost your Android OS smartphone that never forgets anything, and you remember you have got the new Carl location app – Android, Where’s My Car?. With this app, you click a button when you park your car, and the Android uses its location sensor to record the car’s GPS coordinates and address. Later, when you reopen the app, it shows you a map from where you are to the remembered location – so problem is solved!

This app demonstrates how to communicate with the Android location sensor, how to record data in the phone’s long-term memory (database), and how you can open the Google Maps app from your app to show directions from one one location to another. It makes use of the following App Inventor components:

  • Location Sensor;
  • TinyDB — to store the data;
  • ActivityStarter — to open a map.

Step By Step instruction

1.Building the Android app with MIT App Inventor 2

1.Go to appinventor.mit.edu and click on Create Apps! orange button.

create apps

2.Click on Start new project and give your project a name. You can name it as CarLocation. Click on OK button. Your project will be saved.

start new project
LED controller

3.Go to Designer editor tab. We need to design the appearance of our app first. The user interface will consist of labels to show location data and buttons to initiate events. Some labels just show static text, e.g., Label4 component is the text “GPS:” that appears in the user interface. Others, such as Label5 component, will display dynamic data one the location sensor gets its readings. For these labels, a default value is set (0) here in the Component Designer.

4.Select components:

  1. From User Interface Pallete, click and drag out Label component (Label1), drop it into the Viewer which is in the middle of the Designer;
  2. From Layout Pallete, click and drag out TableArrangement component (TableArrangement1), drop it into the Viewer. Set Columns to 4, Rows to 2 ;
  3. From User Interface Pallete, click and drag out two Label components (Label2, Label3), drop them into the TableArrangement1 first row;
  4. From User Interface Pallete, click and drag out four Label components (Label4, Label5, Label6, Label7), drop them into the TableArrangement1 second row;
  5. From User Interface Pallete, click and drag out Button component (Button1), drop in into the Viewer;
  6. From User Interface Pallete, click and drag out Label component (Label8), drop it into the Viewer;
  7. From Layout Pallete, click and drag out TableArrangement component (TableArrangement2), drop it into the Viewer. Set Columns to 4, Rows to 2;
  8. From User Interface Pallete, click and drag out two Label components (Label9, Label10), drop them into the TableArrangement2 first row;
  9. From User Interface Pallete, click and drag out four Label components (Label11, Label12, Label13, Label14), drop them into the TableArrangement2 second row;
  10. From User Interface Pallete, click and drag out Button component (Button2), drop in into the Viewer;
  11. From Sensors Pallete, click and drag out LocationSensor component(LocationSensor1), drop it into the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. The LocationSensor component can report the phone’s latitude, longitude, and current street address. Its LocationChanged event is triggered when sensor gets its first reading and when the reading changes (the phone has moved);
  12. From Storage Pallete, click and drag out TinyDB component (TinyDB1), drop it into the Viewer. It will appear in the area at the bottom of the Viewer marked Non-visible components. TinyDB allows you to store data persistently in the phone’s database. Whereas the data in a variable or property is lost when an app closes, the data you store in the database can be loaded into your app each time it is opened.
  13. From Connectivity Palette, click and drag out ActivityStarter component (ActivityStarter1), drop it into the Viewer. It will appear in the area at the bottom of the Viewer marked Non-visible components. The ActivityStarter component can launch any app including Google Maps. For Maps, you set the DataUri property to the URL of the map you want to display. If you want to show directions, the URL will be of the form: http://maps.google.com/maps/?saddr=0.1,0.1&daddr=0.2,0.2, where the numbers are GPS coordinates.
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC

5. Adjust components properties. You will need to click on each component from Components pane and change the properties of component in the Properties pane:

  1. Click on Screen1 component, change AlignHorizontal to Center, AlignVertical to Center, Title to Car Location;
  2. Click on Label1 component, change Text to Your current location, FontBold – selected, FontSize to 25, TextAlignment to Center;
  3. Click on Label2 component, change Text to Address:, TextAlignment to Center;
  4. Click on Label3 component, change Text to Unknown;
  5. Click on Label4 component, change Text to GPS:;
  6. Click on Label5 component, change Text to 0, TextAlignment to Center;
  7. Click on Label6 component, change Text to ,(comma), TextAlignment to Center;
  8. Click on Label7 component, change Text to 0, TextAlignment to Center;
  9. Click on Button1 component, change Text to Save my current location, FontBold – selected, FontSize to 20, Shape – rounded;
  10. Click on Label8 component, change Text to Saved location, FontBold – selected, FontSize to 25, TextAlignment to Center;
  11. Click on Button2 component, change Text to Show direction from current to saved, FontBold – selected, FontSize to 18, Shape – rounded;
  12. Adjust properties for Label9 – Label14 in the same way as you did for Label1 – Label7;
  13. The ActivityStarter1 component is used to launch the map when the user asks for directions. Click on ActivityStarter1 component. Change Action to android.intent.action.VIEW, ActivityClass to com.google.android.maps.MapsActivity, ActivityPackage –com.google.android.apps.maps.
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC
CAR LOC

6. Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click on Blocks button in the upper right of your screen to go to the Blocks Editor.

7. From Blocks Built-in Variables drawer drag out the initialize global name to block and drop it in the Blocks Viewer area (the open area on the right). Change the name to tempAddress.

CAR LOC

8. From Blocks Built-in Text drawer drag out the text string and add to the initialize global name to block.

CAR LOC

9. Let’s make the When Button2.Click do event handler block. When the user clicks the Button2 , the event-handler builds a URL for a map and calls ActivityStarter to launch the Maps application and load the map. From Button2 component-specific drawer drag out the when Button2.Click do event handler block and drop it in the Blocks Viewer area. Do the same with Button1 component-specific drawer.

CAR LOC
CAR LOC

10.From ActivityStarter1 component-specific drawer drag out the call ActivityStarter1.StartActivity block and add to “do” as shown below.

CAR LOC

11.From ActivityStarter1 component-specific drawer drag out the set ActivityStarter1.DataUri to block and add to “do” as shown below.

CAR LOC

12.From Blocks Built-in Text drawer drag out the join block and eight text string blocks, extend the amount of strings handled by join block to 8 – you can do it by clicking on blue icon and adding string block to join block. join is used to build the URL to send to the Maps application – it looks like that: http://maps.google.com/maps?saddr=0.1,0.2&daddr=0.3,0.4. The resulting URL consists of the Maps domain along with two crucial parameters, saddr and daddr , which specify the start and destination for the directions. For this app, the saddr is set to the latitude and longitude of the current location, and the daddr is set to the latitude and longitude of the location that was “Saved” (the location of your car!) .

CAR LOC
Car loc

13. From Label5 component-specific drawer drag out the Label5.Text block and add as shown below. Do the same with Label7, Label12, Label14 component-specific drawers.

14. Let’s make now the LocationSensor1.LocationChanged do event handler block. This event occurs when the phone’s location sensor first gets a reading, or when the phone is moved to produce a new reading. The event-handler just places the readings–latitude, longitude, and current (street) address– into the corresponding “Current” labels so that they appear on the phone. The Button1 is also enabled in this event-handler. Its enabled setting should be unchecked in the Component Designer because there is nothing for the user to remember until the sensor gets a reading. From LocationSensor1 component-specific drawer drag out the when LocationSensor1.LocationChanged do block and drop it in the Blocks Viewer area. LocationChanged is triggered the first time the sensor gets a location reading and each time the location changes.

car loc

15. From Label3 component-specific drawer drag out the set Label3.Text to block and add as shown below. Do the same with Label5, Label7 component-specific drawers.

car loc

16.We need the current latitude and longitude. From Blocks Built-in Variables drawer drag out two get variables and add as shown below. Select latitude and longitude. You also get this blocks from when LocationSensor1.LocationChanged do block – just point on latitude and longitude.

car loc

17. From LocationSensor1 component-specific drawer drag out the LocationSensor1.CurrentAddress block and add as shown below.

car loc

18.From Button1 component-specific drawer drag out the set Button1.Enabled to block and add it to “do” as shown below. From Blocks Built-in Logic drawer drag out the true block and add to set Button1.Enabled to block.

car loc
car loc

19. Let’s make the when Button1.Click do event handler block. When the user clicks the Button1 , the location sensor’s current readings are put into the labels under Saved Location and stored to the database as well. The Button2 is enabled as it now makes sense for the user click on it to see a map (though it will make more sense once the user changes location).

20.From Label10 component-specific drawer drag out the set Label10.Text to block and add as shown below. Do the same with Label12, Label14 component-specific drawers.

car loc

21. From LocationSensor1 component-specific drawer drag out the LocationSensor1.CurrentAddress, LocationSensor1.Latitude, LocationSensor1.Longitude blocks and add as shown below.

car loc

22. From TinyDB1 component-specific drawer drag out the three call TinyDB1.StoreValue tag valueToStore blocks and add as shown below.

car loc

23. From Blocks Built-in Text drawer drag out three text string blocks and add them to “tag” as shown below. Give them names – address, lat, long.

car loc

24. From LocationSensor1 component-specific drawer drag out the LocationSensor1.CurrentAddress, LocationSensor1.Latitude, LocationSensor1.Longitude blocks and add as shown below.

car loc

25.From Button2 component-specific drawer drag out the set Button2.Enabled to block and add as shown below. From Blocks Built-in Logic drawer drag out the true block and add it to the set Button2.Enabled to block.

car loc
car loc

26. Let’s make the Screen1.Initialize event handler block. This event is always triggered when an app opens. To understand it, you have to envision the user recording the location of the car, then closing the app, then later re-opening the app. When the app re-opens, the user expects that the location remembered earlier should appear on the phone. To facilitate this, the event-handler queries the database (call TinyDB.GetValue). If there is indeed a remembered address stored in the database – the length of the stored address is greater than zero – the remembered latitude, longitude, and street address are placed in the corresponding labels.

27. From Screen1 component-specific drawer drag out the when Screen1.Initialize do event handler block and drop it in the Blocks Viewer area.

car loc

28. From Blocks Built-in Control drawer drag out the if then block and add to the when Screen1.Initialize do block.

car loc

29. From Label10 component-specific drawer drag out the set Label10.Text to block and add as shown below. Do the same with Label12, Label14 component-specific drawers.

car loc

30.From TinyDB1 component-specific drawer drag out two call TinyDB1.GetValue tag valueIfTagNotThere blocks and add as shown below.

car loc

31.From Blocks Built-in Text drawer drag out two text string blocks and add them as shown below. Name them as lat and long.

car loc

32.From Button2 component-specific drawer drag out the set Button2.Enabled to block and add it as shown below. From Blocks Built-in Logic drawer drag out the true block and add it to the set Button2.Enabled to block.

car loc
car loc

33.From Blocks Built-in Math drawer drag out two blocks – number 0 block and first number bigger then second number block and add them to “if” as shown below.

car loc

34. From Blocks Built-in Text drawer drag out the length block and add it as shown below.

car loc

35. From Blocks Built-in Variables drawer drag out two get blocks and add them as shown below. Select global tempAddress.

car loc

36. getValue asks for a database entry with tag “address”. If nothing has been stored, this will be the empty text with length 0. If length>0, we have a stored address/lat/long. From Blocks Built-in Variables drawer drag out the set to block and add it as shown below. Select global tempAddress.

car loc

37. From TinyDB1 component-specific drawer drag out the call TinyDB1.GetValue tag valueIfTagNotThere block and add it as shown below. From Blocks Built-in Text drawer drag out the text string block and add it as shown below. Name it as address.

car loc

38. The final Blocks diagram should be like that.

car loc

39. To have an app running without being connected to MIT App Inventor 2, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Select App (save to my computer) to download the app to your computer as an apk file.

car loc

40. Upload this package to your Android device (smartphone, tablet) and install. Open the Car Location app.

41. You can also use Emulator to check the Car Location app. You need to install MIT App Inventor 2 software, launch aiStarter. Go to Connect and select Emulator.

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this project probably you might like our next ones, so please support us by subscribing our blog and donating.

Summary

We have learnt how to build Car Location app with MIT App Inventor 2. You can extend this application and there are some ideas:

  • Create “Android, Where is Everyone?”, an app that lets a group of people track each other’s whereabouts. Whether your hiking or at the park, this app could help save time and even lives.
  • Create a “breadcrumb” app that tracks your (phone’s) whereabouts by recording each location change. One interesting refinement would be to only record a new “breadcrumb” if the location has changed by a certain amount.

Project files

Attached on the beginning of this project description

AcoptexCom

Leave a Reply

Your email address will not be published.