Demonstration app for using FirebaseDB in AppInventor

FirebaseDB provides for sharing between users all running the exact same app on their device. Read “What is FirebaseDB?” to learn more about FirebaseDB and what it does for your applications.

This is a quick and very short app that demonstrates the fundamental operation of FirebaseDB when used in MIT App Inventor. I hope to create a more interesting demo app a bit later.

Caution: FirebaseDB is an experimental component offered by MIT App Inventor. FirebaseDB remains under development and is subject to change; apps written today might not work in the future. Apps containing the FirebaseDB component will not work in the emulator – run on your phone or tablet instead. At this time, the cloud-based database is a shared database, shared among multiple users, and cannot – yet – be linked to your personal Google account.

FirebaseDB is Similar to TinyWebDB

The programming interface for FirebaseDB is nearly the same as that used for TinyWebDBTinyWebDB is a simple cloud-based database – to use, you need to set up the TinyWebDB on your own server or on Google’s servers. With your data stored in the “cloud”, your data may be shared among many apps. For the FirebaseDB demo, you do not need to set up your own server, nor do you need to use TinyWebDB:

For details on setting up and using TinyWebDB – including some tricks that enable sharing of TinyWebDB data between apps – please see my book,

  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
    Buy from: Amazon, Google Books, Kobo Books

For more information, including a sample chapter, please see my App Inventor books page.

Sample App User Interface

Our simple demonstration app stores and retrieves a text value to and from the FirebaseDB. As with TinyDB or TinyWebDB, enter a “tag” value to use to look up the value. For example, a tag value could be a part number, and the value could be the text description of the part’s name. Or the tag could be a phone number and the value could be the name of the person who has that phone number.

Screenshot_20160815-152608

The program is operated by entering a tag and a value and then pressing the Store Value button. The value entered is written to the FirebaseDB database in the cloud.

After a value has been stored, you retrieve values by entering the original tag and pressing Retrieve Value. The data corresponding to the tag is retrieved from FirebaseDB and display in the Value field, on screen.

If the app is run simultaneously on other devices, any data updates made on the other devices result in all devices receiving a data changed notification. When the data in the FirebaseDB is changed, the new data is displayed on all devices.

Designer View

A combination of vertical and horizontal layouts is used to organize the positions of the controls (see the Components list, below, or download the sample code).

Store Value and Retrieve Value are buttons. Tag and Value are labels, followed by text boxes for data entry.  Data Changed Event and the status message are both labels.

Drag the FirebaseDB component from the Experimental section of the Designer controls palette. You will receive a warning that FirebaseDB is experimental.

FirebaseDesigner

FBDemo_Components

Blocks View

(Sorry for the image quality on these three blocks – the screen capture utility I used for these did not do a very good job)

The btnStoreValue event handler reads the enter tag and data value from the text boxes on screen, and then stores those to the FirebaseDB. Find the FirebaseDB StoreValue component by clicking on the FirebaseDB component in the Blocks list.

FirebaseBlocks1

Fetching a store value is simple – call FirebaseDB’s GetValue method and pass to it the tag. Unlike TinyDB (but similar to TinyWebDB), the value is not read instantaneously but instead, once the data is read and available, an event called GotValue occurs.  A GotValue event handler processed the incoming data; in our simple app, the data is stored back in to the Value text box, on screen.

FirebaseBlocks2

A unique feature of FirebaseDB is the database’s ability to alert apps that data inside the database has been changed. This alert caused a DataChanged event to occur – and which delivers the tag and value that were updated to the app.

FirebaseBlocks3

Reminder

FirebaseDB is experimental and incomplete, is subject to change, and should not be relied upon at this time for production code. However, you may use it for learning and experimentation.

Download Source Code

Download: FirebaseDB_Demo.aia

After downloading to your computer, you may upload the file to your App Inventor account using Projects | Import project (.aia) from my computer

Related Tutorials

 

What is the FirebaseDB?

Hidden at the bottom of the Designer palette, is a category labeled Experimental and within that, there is a single item, the FirebaseDB:

Firebase

What is FirebaseDB?

FirebaseDB provides a database “in the cloud” for your MIT App Inventor apps and supports the sharing of data between users simultaneously. When data in your FirebaseDB is changed, all apps are alerted to the updated data.

At this time, FirebaseDB is an experimental feature with critical limitations – notably you cannot yet set up your own personal FirebaseDB account but must instead use a single FirebaseDB run by MIT as a “shared account”. Sharing is limited to all users of a single app, and is not available between different apps.

FirebaseDB is Similar to TinyWebDB

The programming interface for FirebaseDB is nearly the same as that used for TinyWebDB. TinyWebDB is a simple cloud-based database – to use, you need to set up the TinyWebDB on your own server or on Google’s servers. With your data stored in the “cloud”, your data may be shared among many apps.

For details on setting up and using TinyWebDB – including some tricks that enable sharing of TinyWebDB data between apps – please see my book,

  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
    Buy from: Amazon, Google Books, Kobo Books

For more information, including a sample chapter, please see my App Inventor books page.

Continue reading

What day is today? Finding the “Day of the Week” in App Inventor

A reader recently asked how to determine the day of the week – Monday, Tuesday, Wednesday and so on, using MIT App Inventor code. Obtaining the day of the week is easy, although not obvious.

Using TimePicker and DatePicker

I previously posted a tutorial titled “Using TimePicker and DatePicker for entering time and data information“. Refer to that tutorial for basic information on the handling of time and data information in App Inventor.

Converting Time Instants into Different Formats

App Inventor has built-in functions to convert the date into different formats. However, the function to convert a calendar date into the day of the week is not in the DatePicker component, but in the Clock component.

To demonstrate, we use the original app from the TimePicker and DatePicker tutorial (you may download the sample code from the original tutorial page) and then we add two small bits of code to do identify the day of the week.

In the original sample code, the screen’s Initialize event handler displays the current date and time on screen. To that code, we add the block shown within the yellow rectangle, below:

Voila_Capture 2016-08-01_03-02-47_PM

call Clock1.Now” returns a value called a time instant. The time instant contains both date and time in a special format: the format is not important to us as App Inventor provides routines to convert the time instant into common values like year or hours and minutes.

The Clock component has a method “call Clock1.WeekdayName” that extracts the date information and calculates the day of the week, returning a text string with values like “Sunday” or “Monday”.

In the original tutorial, the DatePicker is used to select a new calendar date (different than what ever the current date is). Once the data is selected with that user interface, the event “.AfterDateSet” is thrown. Within the AfterDateSet event handler, we extract the Year, Month, Day and also the “WeekdayName” name. To convert the date instant to a day of the week format, we use the WeekdayName method of the Clock component – easy but not obvious!

Voila_Capture 2016-08-01_03-03-18_PM

Summary

Converting a date or time instance into normal formats like Year, Month, Day or day of the week is easy when you use the appropriate conversion functions built in to the App Inventor components.

The weekday value conversion is a little odd in that its hidden in the Clock component. But once you find it, obtaining the day of the week is easy!

Using Location Information and GPS for finding your position

This tutorial introduces location services features available in App Inventor.

A future tutorial will demonstrate these features applied to specific applications.

About Android Device Location and GPS Features

Your Android device probably has built-in features to identify the device’s location. These features may include:

  • Global Positioning Satellite receiver (GPS)
  • Cellular network location information
  • Wi-Fi network location information

The GPS receiver interprets special (and very weak!) timing signals from satellites and uses those signals to compute latitude, longitude and altitude of your device. GPS has fairly good accuracy – correctly identifying the device’s position within as little as 5 meters (but which may at times be much wider such as within a 30 meter diameter circle accuracy). GPS accuracy is affected by the device’s ability to see the sky and may be blocked by buildings, trees and weather, and signals may suffer from ionospheric effects.

Cell phones can obtain information about the cellular network tower to which they are connected, including location information from the cellular tower.

Wi-Fi networks have a unique identifier associated with them (not the SSID public address). Google has built a map of wi-fi access point network locations using a combination of their Google mapping cars as well as everyone’s Android-powered cellular phone to build a huge database of wi-fi access points and their location. Your Android device can use a combination of location data and fetch a postal mailing address from Google for a given location.

Android phones have options as to which type of location information to use.

  • Cellular network information may be the least accurate, but it also uses the least amount of battery power.
  • Wi-fi network position information also uses little battery power, and can provide reasonably accurate location information when your phone is indoors and unable to hear signals from GPS satellites.
  • GPS provides the best accuracy but receiving and processing the signals uses the most battery power.

Your Android phone has options to select High accuracy, Battery saving and Device only.

  • High accuracy – Android will automatically select GPS, cellular or wi-fi to obtain a high accuracy position reading. This is likely the default setting on your phone.
  • Battery saving – Android will use cellular or Wi-fi networks to obtain position information.
  • Device only – Android will use the GPS receiver (greatest battery drain)

To select Location services, go to Settings | Location and set this feature to “On”.

Touch the item labeled “Mode” at the top of the screen to select “Location mode” options. This is where you may choose High accuracy, Battery saving or Device only.

Screenshot_20160516-175035To use any location features, you must turn Location to “On” in Android Settings!

MIT App Inventor has a component named LocationSensor providing access to latitude, longitude, altitude and even the postal mailing address associated with the location.

This tutorial introduces the LocationSensor and the basic properties and features. A future tutorial will go in to more depth.

Continue reading

Aligning the text that appears in ListPicker

Readers post questions on the FB page or the blog. Sometimes I can answer them but sometimes I cannot answer them right away. For those that I cannot answer, I add the question to a list of future tutorial ideas. If someone is not sure how to solve a problem, chances are that there are others who may need help with the same issue!

I am beginning to go through my list – watch for more tutorials based on reader questions. Note – I do not have time to solve specific or custom applications. I try to abstract the basic elements of the problem and create a generic solution that can apply to a wide variety of use cases.

ListPicker Text Alignment

A reader asked how to align the text that appears in the ListPicker box. The ListPicker displays a set of items on screen so that the user may select an item from the list. When the list appears on screen, all the items are “left justified” which means they appear on the left side of the screen.

To demonstrate, our ListPicker, below, displays a list of auto manufacturers:

Screenshot_20160502-115325Is there a way to center or right justify the items that appear in the ListPicker list like this? The first 4 items in this list are right justified and the last two are centered:

Screenshot_20160502-114442The answer to that question is basically “yes”, but it may not be perfect – as we will see.

Continue reading

Can you “gray out” a button until data entry is complete?

A reader asked  if it might be possible to “gray out” a button so that pressing it has no action, until appropriate data has been entered?

The answer is “Yes, we can do this.” After some thought, I came up with the following simple solution.

Update 1: Check the comments to this post for a reader’s great solution for doing this for Location services dependent function.

Update 2: Also, you can set the button component’s Enabled property to false, so that the button will not function. Then set Enabled to true once the data entry meets your app’s requirements.

User Interface

What we want to do is have the button look like it is “grayed out” and unusable until after some data is entered into the field. In the text box, I have set the  “hint” value to “Button available when data entered”:

Screenshot_20160317-202312After the user has entered some data, the button becomes “active” as shown here:

Screenshot_20160317-202334

Continue reading

A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.

Concepts

In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading

Making “pretty” App Inventor user interface controls

In the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the App Inventor user interface palette.

A previous tutorial showed a trick to make the color of a button vary continuously. This tutorial shows how to use our own images, instead of the boring button, together with a bit of code to bring these buttons to life.

User Interface View

Below is a sample “toggle switch”. Press the switch icon once and the toggle moves to the right; press it again and the toggle moves back to the left.

toggleswitch1

toggleswitch2

Here is a slide switch. Press the slide switch once and the switch position moves to the right and the switch illuminates in green. Press the slide switch again and the switch returns to the left.

switch1

switch3

Here is a concept for a raised momentary push button. Pressing the button changes the appearance of the button while your finger is on the button – to look like the button is pressed in.

UI1

UI2

The Designer View

Continue reading

What if your App Inventor apps had cooler user interface controls?

How about this – a panel full of toggle switches! Tap a switch to flip the switch from On to Off!

Screenshot_20160118-164605I will soon post a tutorial on creating simpler interfaces than the above, but that will be followed by a tutorial to create the above “panel of toggle switches”.

I have ideas for many interesting interface components – I do not yet know if all of them can be built in App Inventor – but we will see!

Scanning bar codes and QR Codes with App Inventor Apps

Overview

App Inventor supports scanning of product identification “bar codes” and QR codes. Bar codes are typically found on consumer product packaging. QR codes are used for web addresses (so you can scan the QR code and go directly to the web address), part and product inventory tracking, and to deliver short messages.

In this tutorial, we create a simple App Inventor app to scan bar and QR codes.

Update: José Luis Núñez provides his own tutorial (in Spanish) for a bar code scanning app to check seating in a theater (written in App Inventor). Watch it on Youtube here:  Curso de App Inventor 2 (José Luis Núñez)

User Interface

Our App Inventor app has a simple user interface – a single button to scan either a bar or QR code. When pressed, the app activates the camera to scan the code and then returns a result value.

If the code is a numeric bar code value, the app displays a web page of information about the item corresponding to the bar code. If the returned code contains a web address, then that web address is displayed on screen. Here is an example from scanning the UPC code on a package of tea:

Screenshot_20151130-134823In the next example, a QR code containing http://appinventor.mit.edu is scanned:

static_qr_code_without_logoAnd here is the result:

Screenshot_20151130-134746Designer View

Drag a WebViewer component from the Palette’s User Interface section, and drag a BarCodeScanner component from the Sensor’s section. The WebViewer is the “earth” icon in this screen, and the BarCodeScanner is an invisible component, below the canvas area.

BarCodeDesignerTwo labels are used – one to display the text “Result:” and the other to display the returned code.

BarCodeComponentsBlocks Code

To activate the BarCodeScanner, we call the DoScan method:

BarCodeBlocks1The above activates the camera and displays a view on screen (in Landscape mode). Once a bar code or QR code is successfully scanned, the camera is automatically turned off and an AfterScan event is generated.

The AfterScan event has one parameter named result; this contains the converted scan code – a numeric value for a bar code or an http:// URL for a web address (anything else is displayed in the lblBarCodeResult label, on screen).

BarCodeBlocks2Creating QR Codes

To create your own QR Code images use any of the QR code generators available online – just search for “Create QR Code free” – I used http://www.qrstuff.com/

Download Source

Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed