Tag Archive for database

How to Use the Tiny Web DB and List Picker

This App Inventor tutorial provides a simple example of using a simple database and a List Picker in App Inventor.

Databases are used to organize and manage information. They are a form of long term memory because the data they contain persist beyond the running of a single application. Once data is put into a database, it remains there until it is deleted. This differs from short term memory, such as global variables, which persist only as long as your app is running.

TinyDb

App Inventor has a simplified database component called a TinyDB, which stores persistent data right on the Android device. (App Inventor also has a TinyWebDb component, which stores data on a server. That will be covered in a separate tutorial.)

TinyDb stores data in a tag-value scheme. The tag is used as a key by which the data can be retrieved. For example:

Tag Value
One This is the first string
Two This is another string

To store a value in a TinyDb, you would use the StoreValue procedure, which takes two arguments, a tag and a value:

In TinyDb, the tag is always a text, but the associated value can be a number, or a string, or even a list. In this example, we use a list to a collection of information (latitude, longitude, and description) with the name of a building on campus.

Retrieving a Db Value

To retrieve a value from the Db, you use the GetValue function, which takes the tag as an argument and returns the associated value as its result. In this case we are retrieving the list of data associated with “Hamlin”:

Plotting Points of Interest on a Map

Let’s make a simple app that uses a TinyDb and List to plot points of interest on a canvas — you can imagine that the canvas is a map. In this example, we will use a ball to represent a point on the map. And we will let the user select a screen location from a ListPicker component. Depending on which location the user picks, the app will plot that point on the canvas.

So our User Interface looks like this:

Note here how the PickPoints ListPicker is set up. The ElementsFromString property contains a comma-delimited list of words that will show up as the ListPicker’s options.

Setting up Our Db

Let’s use a TinyDb to store the (X,Y) coordinates of the points we want to plot. Note here that we define the setupDB procedure and then call it from the Screen1.Initialize block:

This will create a TinyDb with two items in it. Point “One” has location (100,100) and point “Two” has location (50,50). Notice that the tags are the same strings we used in our ListPicker.

(NOTE: Because this Db will persist, it is not necessary to create it every time we run this app, although it does no harm to do so. For example, we could instead use if-then logic to test whether the database exists and, if not, we could store our values. This is left as a exercise.)

Handling a List Picker

The last piece of this app is to handle the event that occurs when the user picks an option from the ListPicker:

Recall that our Db stores a list value with each tag. So we use the PlacesListPicker.Selection as our tag argument to retrieve list associated with that location. Then we use the select list item function to select the X and Y coordinates, which are used to set the location of the ball. Notice how list items areindexed. The first item in a list has index 1, the second has index 2, and so on.

The Sourcecode

Here’s the app’s sourcecode.