Using Firebase in a real app – “Here I AM!” GPS Demo app

A previous post introduced the experimental Firebase component in MIT App Inventor. Firebase is a cloud-based database that may be used by App Inventor apps, and which makes exchanging data between users easy. Note: Firebase is experimental and may change in the future. At the present time, there is one Firebase database that is shared by all users. See comments in previous post for more information.

This post uses the GPS location sensors in phones to determine the phone’s position in latitude and longitude. Pressing a button labeled “Send GPS” sends the latitude and longitude coordinates to another phone, which then draws the position on a map. In this way, two phone users can wander about and transmit their location to each other, sending the data through the Firebase cloud database. I named this app “Here I AM!” – pressing the Send GPS tells another user that “I am here!”

User Interface

To use this app, the exact same app should be running on two separate phones. You can run it on a single phone but obviously, you will not be getting updates from anyone else!

The first time you run this app on Android 6, you will be asked to give permission to use location information. Also, be sure to set Location services to on, in Android Settings.

As you move about, press the Send GPS button.  Your latitude and longitude will be sent to Firebase, the other app will be alerted to an updated location, and your location will be displayed on the Google maps on their phone. If they press Send GPS, then their location will be updated on your phone.

The Lat/Long. textbox displays either the latitude, longitude or is prefixed with “THEM:”. “THEM:” means the textbox is showing the other phone’s location; if “THEM:” is not shown, then the textbox is showing your own latitude, longitude.

Screenshot_20160913-102744

Press Retrieve GPS to retrieve and display the latitude/longitude value currently stored in Firebase.

Press Show Map to display the  last retrieved location on the map.

Latitude and longitude values partially obscured, intentionally, in the above screen shot.

Designer View

User a horizontal layout to arrange 3 buttons across the top, and then a 2nd horizontal arrangement for the Lat/Long label and the textbox (you could also use a label instead of the textbox as this is not really an input field).

DesignerUI

Note the use of the FirebaseDB1 and LocationSensor1 components; both are non-visible and appear below the user interface screen view in the Designer View.

The Components list shows a Vertical Arrangement but this is not needed; an earlier version of the app had stacked the buttons and text vertically.

Components

FirebaseDB is located in the Experimental section of the Palette.

Firebase

The LocationSensor accesses the location information (such as GPS) and is located in the Sensors section of the Palette.

LocationSensor

Blocks View

The app defines a “tag” value used in storing and retrieving a data record from Firebase. (For more on databases and “tags” and “records”, please see App Inventor 2 Databases and Files e-book, available from Amazon, Google and Kobo books. Note that Firebase is not a supported feature – the ebook covers TinyDB, TinyWebDB, Fusion Tables and file access – but not yet Firebase.)

We define OurLocation as a text string to store our latitude and longitude.

SendGPSBtn

When the Send GPS button is pressed, we first check to see if the LocationSensor has valid location data by checking the HasLongitudeLatitude property. If the location is up to date, then the Latitude and Longitude properties are used to set OurLocation and this value is stored in the FirebaseDB.

The Retrieve GPS button initiates a read of the value corresponding to the GPSTagValue. Note that FirebaseDB data reads are asynchronous. This means we start the process but the value will not be immediately available (due to network delays, other database users, server speed and so on). Instead, when the data is available, the GotValue event occurs and the value is then read.

RetrieveGPS

GotValue

FirebaseDB has a feature that makes it easy to be alerted to updates in the database, such as when the other user of this app pressed Send GPS and updates the location in the database. Our app receives a DataChanged event. In this example, DataChange tells us which record was changed by giving us the “tag” value, plus the value of the record. As our example has only a single tag, we ignore the returned tag value. If the value in the database is identical to our own location, then our app was just alerted to us changing our own location! We can ignore being alerted to our own update!

If the location value is different than our current location, we assume it is an update from the other user and process that update but displaying their latitude and longitude and dropping a pin on a Google map.

DataChanged

The Show Map button calls a procedure ShowPositionOnMap with our current location.

ShowMap

The ShowPositionOnMap procedure uses Google Maps to do the hard work of drawing the map and pin location. We use the WebViewer control to access the Google Maps URL. By forming the URL in a special way, Google Maps is asked to drop a pin on the map at the specified latitude and longitude.

We build up a string that is in the format:

https://www.google.com/maps?&z=10&q=45.33088+-122.00877&ll=45.33088+-122.00877

The &z, &q and &ll are “parameter” values passed to Google Maps, and which instruct Maps to draw the map near the specified lat/long and to drop a pin at the specific lat/long.

ShowPositionOnMap

Summary

This app demonstrates the use of FirebaseDB in a sample real world application. This app could be improved to work with multiple phones, by having each instance of the app configure a unique user name. Then, the user name could be passed in a tag value for each update and the code could be modified to display where each user is currently positioned.

The app could also be made to send automatic updates (rather than pressing Send GPS). This can be done by using the LocationChanged event of the LocationSensor:

LocationChangedHowever, the GPS sensor and constant updates will drain the battery quite quickly.

This app could also be implemented using TinyWebDB, instead of FirebaseDB, but FirebaseDB’s automatic update alert makes this easier.

I tested this app on a Nexus 4 and a Nexus 5. The purpose of this app is to demonstrate FirebaseDB and the the GPS LocationSensor. It has not been written or tested for use as a “production” application; it is intended for educational purposes only.

Download

Source code: Here_I_AM.aia

App Inventor Gallery: Firebase GPS Demo (Use this link to load the app directly into App Inventor from the MIT App Inventor Gallery)

Advertisements

16 thoughts on “Using Firebase in a real app – “Here I AM!” GPS Demo app

  1. Pingback: Short update – App Inventor 2 – Learn to Code!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s