{"id":1387,"date":"2016-09-13T12:58:52","date_gmt":"2016-09-13T19:58:52","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1387"},"modified":"2016-09-13T12:58:52","modified_gmt":"2016-09-13T19:58:52","slug":"using-firebase-in-a-real-app-here-i-am-gps-demo-app","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2016\/09\/13\/using-firebase-in-a-real-app-here-i-am-gps-demo-app\/","title":{"rendered":"Using Firebase in a real app – “Here I AM!” GPS Demo app"},"content":{"rendered":"

A previous post<\/a> 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<\/a> for more information<\/em>.<\/p>\n

This post\u00a0uses 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!”<\/p>\n

User Interface<\/h2>\n

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!<\/p>\n

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.<\/em><\/p>\n

As you move about, press the Send GPS<\/em> button. \u00a0Your 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<\/em>, then their location will be updated on your<\/em> phone.<\/p>\n

The\u00a0Lat\/Long. textbox displays\u00a0either the latitude, longitude or is\u00a0prefixed 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.<\/p>\n

\"Screenshot_20160913-102744\"<\/a><\/p>\n

Press Retrieve GPS<\/em> to retrieve and display the latitude\/longitude value currently stored in Firebase.<\/p>\n

Press Show Map<\/em> to display the \u00a0last retrieved\u00a0location on the map.<\/p>\n

<\/p>\n

Latitude and longitude values partially obscured, intentionally, in the above screen shot.<\/p>\n

Designer View<\/h2>\n

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).<\/p>\n

\"DesignerUI\"<\/a><\/p>\n

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.<\/p>\n

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.<\/p>\n

\"Components\"<\/a><\/p>\n

FirebaseDB is located in the Experimental section of the Palette.<\/p>\n

\"Firebase\"<\/a><\/p>\n

The LocationSensor accesses the location information (such as GPS) and is located in the Sensors section of the Palette.<\/p>\n

\"LocationSensor\"<\/a><\/p>\n

Blocks View<\/h2>\n

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<\/a>. Note that Firebase is not a supported feature – the ebook covers TinyDB, TinyWebDB, Fusion Tables and file access – but not yet Firebase.)<\/p>\n

We define OurLocation<\/em> as a text string to store our latitude and longitude.<\/p>\n

\"SendGPSBtn\"<\/a><\/p>\n

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

The Retrieve GPS<\/em> button initiates a read of the value corresponding to the GPSTagValue<\/em>. 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<\/em> event occurs and the value is then read.<\/p>\n

\"RetrieveGPS\"<\/a><\/p>\n

\"GotValue\"<\/a><\/p>\n

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<\/em> and updates the location in the database. Our app receives a DataChanged<\/em> event. In this example, DataChange<\/em> tells us which record was changed by giving us the “tag” value, plus the value<\/em> of the record. As our example has only a single tag, we ignore the returned tag value. If\u00a0the value<\/em> 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!<\/p>\n

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.<\/p>\n

\"DataChanged\"<\/a><\/p>\n

The Show Map<\/em> button calls a procedure ShowPositionOnMap<\/em> with our current location.<\/p>\n

\"ShowMap\"<\/a><\/p>\n

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

We build up a string that is in the format:<\/p>\n

https:\/\/www.google.com\/maps?&z=10&q=45.33088+-122.00877&ll=45.33088+-122.00877<\/p>\n

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

\"ShowPositionOnMap\"<\/a><\/p>\n

Summary<\/h2>\n

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.<\/p>\n

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

\"LocationChanged\"<\/a>However, the GPS sensor and constant updates will drain the battery quite quickly.<\/p>\n

This app could also be implemented using TinyWebDB, instead of FirebaseDB, but FirebaseDB’s automatic update alert makes this easier.<\/p>\n

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

Download<\/h2>\n

Source code: Here_I_AM.aia<\/a><\/p>\n

App Inventor Gallery: Firebase GPS Demo<\/a>\u00a0(Use this link to load the app directly into App Inventor from the MIT App Inventor Gallery)<\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading Using Firebase in a real app – “Here I AM!” GPS Demo app<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=1387"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media\/1389"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}