App Inventor Tutorial 13 – TinyWebDB

This tutorial will help you to build an application that will store a list of items to a
tinyWebDb and then retrieve this list from the TinyWebDb.

Step 1: Open App Inventor

To work online: Go to http://beta.appinventor.mit.edu
Use your google account details to log in.

Or working offline with the local server: Once you have the App Inventor running type into
your browser http://localhost:8888

When you are taken to the app inventor page create a new project.

This window will appear. Give the project the name

‘ListToWebDB’ and click OK. The project is now
added and you will be taken to the designer screen.

1
Step 2: Build the Interface of TinyWebDb
The user interface will include the following:
 4 Labels
 4 Buttons
 1 TextBox
 1 Horizontal Arrangement
 1 List Picker
 1 TinyWebDB1
 1 Notifier

Given this is the 13th tutorial; it is presumed that you are already familiar with the majority
of screen items and where to find them on the ‘Palette’ in App Inventor. As such
instructions on where to find each will be limited. Should you have trouble finding any of
these and/or have not already worked through the previous tutorials, it is suggested you do
so as these provide you with all the information you need to become familiar with App
Inventor.

Firstly we are going to add all the screen items to the page in the correct order; we will later
modify their properties.

Add these items to the screen in this order

1. Label
2. Text Box
3. Button
4. Label
5. Button
6. Label
7. Horizontal Arrangement (from the ‘Screen Arrangements’ tab of the Palette)
8. Button (Inside the Horizontal Arrangement)
9. Button (Inside the Horizontal Arrangement, beside the first)
10. ListPicker (below the Horizontal Arrangement)
11. Label

Also add to the screen a ‘TinyWebDB’ (from Other Stuff Palette) and a ‘Notifier’ (from Other
Stuff Palette)

Note: TinyDB is NOT the same as TinyWebDB, do not confuse the two.

2
Your screen should now look like so:

If any items are in the wrong place (i.e. the components window does not match the one
above) then you can click on and drag the items on the screen until they match the image
above.

Now we need to edit the names and properties of every item on the screen. You should also
be familiar with how to do this from the previous tutorials (again if you are unsure, please
work through the previous tutorials).

Use the information in the table on the next page and modify the name and properties for
each item as specified.

3
 Old Name New Name Properties to Modify

Screen1 *Unchanged* Title: “Store List to WebDB”

Label1 *Unchanged* Text: “Enter Text Here:”

TextBox1 txtAddText Hint: “ “

Button1 btnAddText Text: “Insert Text To List”

Label2 lblNumberOfItems Text: “# of items:

Button2 btnRandom Text: “Show Random List Item”

Label3 lblListItems Text: “ “

TextColor: “Red”

HorizontalArrangement1 *Unchanged* Width: “Fill parent”

Button4 btnStoreToWeb Text: “Store List to Web”

Width: “Fill parent”

Button5 btnGetListFromWeb Text: “Get List From Web”

Width: “Fill parent”

ListPicker1 *Unchanged* Text: “Select Item From List…”

Label4 lblSelectedItem Text: “ “

TinyWebDB1 *Unchanged* ServiceURL:

“http://appinvtinywebdb.appspot.com/”

Notifier1 *Unchanged* *None*

Once these changes have been made, the User Interface (UI) is complete and ready for the
functionality to be added.

4
Step 3: Add the functionality to the Interface
Once the interface is ready we can set the functionality of the components. What we want
to happen can be described in the following steps:
1. User enters a list item in the text box
2. User clicks “Insert text to list” button to add the text to the list
3. The number of items in the list is modified and shown to the user
4. User clicks the “Show Random List Item” button and a random entry in the list is
returned
5. User clicks “Store List to Web” and the list is stored online
6. User clicks “Get List from Web” and a previously stored list is pulled from the
internet into the app
7. User clicks “Select Item from List…” to choose an item from the list that has been
created or has been “Got” from the Web. This item is then displayed below.

As this tutorial covers several different features each will be developed and explained
individually to make them interchangeable between projects.

To add the functionality open the Blocks Editor.

Making and adding to a List

Before we ever make use of a list we must first create it. This is logical in computing because
the list must exist before you can add items to it. In computing this process of creating a
variable (i.e. a list, or text field, or number field), before we put anything into it, is called
“instantiation”. We instantiate the list (create an instance of a list) in app inventor as such:

Here we use the Built-in > definition “def…variable…as” block first. We change the variable
name to the name we want to call our list, in this case simply “list”. Now we have created a
reference to a variable, so any time the app uses the word “list” it is referring to what we
connect to this block. At the minute this variable could be anything, so to make sure the app
knows “list” is a list we must attach the ‘Make a list’ block to it, as seen above.

So to summarise; it defines a variable “list” and tells the app the type of variable “list” is, is a
list.

Note: the different “Types” a variable can be are; numbers, text, colour, list etc

5
Adding text to a List

Now that we have a list created we can add entries to it. This will happen each time we click
the btnAddText button.

The first block we will use will be btnAddText.Click as seen in the picture above. Everything
we want to happen when this button is clicked, is placed in the ‘do’ part of this block.

When we click this button the first thing we want to do is add the text in the text box to the
list. To do this we use the “call…add items to list” block from Built-in > Lists. This is a built-in
method of adding data into a list, but before it can add information we need to tell it which
list we are adding the data to (because an app may have more than one list).

We must tell this block we want to add to our “list” list, which we do by using the
‘global…list” block from My Blocks > My Definitions.

Next we tell it the value we want to add, which is what the user typed into the ‘txtAddText’
text block. We can get its value by using the ‘txtAddText.Text’ block.

6
Displaying the number of values in a list

Here we want to show the number of values in the list, in the label ‘lblNumberOfItems’. To
change the value of the text in this label we use the ‘set…lblNumberOfItems.Text…to’ block.

We want to make this label more user-friendly so rather than just output a single number
and have the user guess what it means we will add a bit of text to the start of the number to
tell the user what it means.

To do this we use a ‘join’ block, so we connect this first to the

‘set…lblNumberOfItems.Text…to’ block.

As we want the first half of the label to explain what the number is, we connect a ‘text’
block to the half of the ‘join’. Then we change the value of the ‘text’ block to “# of items: ”.

Now to actually get how many values are in the list, we use a “length of list” block from
Built-in > Lists. Again because our app could have more than one list we must tell this which
list we are talking about, hence add another “global…list” block, as seen in the red box
above. Now these two blocks together are capable of getting the number of values in the
list, we attach it to the second half of the ‘join’ block to show this number on screen.

Below the ‘set…lblNumberOfItems.Text…to’ block we want to add the ListPicker1.Elements

block. Connect to this the “global…list” block as used previously. This block will be
explained later in the tutorial.

So to summarise; we run the method ‘length of list’ on our list, to get how many values are
in it, and we put this along with the text “# of items: “ into the lblNumberOfItems label.

7
Fetching a random value from the list

Here we want to display a random value from the list we have just added to. This is all
controlled by the click of the ‘btnRandom’ button, so the ‘btnRandom.Click’ is the main
block in this section.

Before we get a random value from the list we have to check there is actually information in
the list and it is not empty. We do this with an ‘if’ block, so this is the first thing we connect
to the btnRandom.Click.

The next part is slightly more complicated. With if statements the ‘test’ part is looking for a
true value before it does anything from the ‘then-do’ part. But the easiest block to test for
items in the list is the ‘is list empty?’ block. If we connected both of these together now,
every time the list is empty it would pick a random value from the list. We want it to do the
opposite, so when the list is not empty we want to pick a random value. To make it do the
opposite we put a ‘not’ block in between the other two. This ‘not’, changes the ‘is list
empty?’ block to an ‘is list not empty’ block.

The second half of this block is actually picking the random value from the list. There is
already a Built-in > List block to do this, ‘pick random item’. So when the button is clicked
and the list isn’t empty we want to change the lblListItems text to the value from the table,
so this is the main block for this part.

Inside ‘then-do’ add a ‘Set…lblListItems.Text…to’ block to change the ‘lblListItems’ label’s

text. To get the actual random value from the list we will connect the ‘pick random item’
block and like before tell it which list we are talking about with ‘global…list’.

So to summarise this; when the btnRandom button is clicked, we check if the “list” is not
empty, and if it is not then we pick a random item from the “list” and place this item into
the lblListItems label.

8
Storing a List to the Web

We will store the list to the Web when we click the btnStoreToWeb button, so our main
block is ‘btnStoreToWeb.Click’.

Inside this we will call the block ‘TinyWebDB1.StoreValue’ which will store our list on the
Web. This block has two parts; tag – which lets you store the list as a different name on the
Web and, valueToStore – which is the current name of the list.

Complete the block as shown above.

So to summarise this section, when the button ‘btnStoreToWeb’ is clicked, the TinyWebDB1
will store all the values in “list” onto the web as “MyStoredList”.

On Screen Notification

To give an on screen notification when a value is stored to the web we use the
Notifier1.ShowAlert block.

We want this to show every time a value is stored on the web so our main block is the
‘TinyWebDB1.ValueStored’ block.

Inside this we add the Notifier1.ShowAlert block. It has 1 part, ‘notice’ which is what will be
shown to the user. However this ‘notice’ isn’t always text so we have to tell it to expect text.
We do so with the ‘make text’ block. To this we attach the actual text we want displayed to
the user.

9
To summarise this section, when a value is stored by the TinyWebDB1, we show the user an
alert, which is text saying the value was successfully stored.

Getting a List from the Web

We will get the list from the Web when we click the btnGetListFromWeb button, so our
main block is ‘btnGetListFromWeb.Click’

To do the opposite of above and get a list from the web we use the ‘TinyWenDB1.GetValue’
block instead. With this block we simply have to tell it the name of the list as it was stored
on the web.

Complete the block as shown above.

So to summarise this section, when the ‘btnGetListFromWeb’ is clicked, the TinyWebDB1

will get all the values from ‘MyStoredList’ on the Web.

Moving a List from the Web to the Phone

After the TinyWebDB1 runs the GetValue method (from “Getting a List from the Web”,
above) it automatically runs the GotValue method also, so this is our main block.

You can see the TinyWebDB1.GotValue block has 3 parts. The First two parts refer to getting
the list from the web. As you may notice from the “Storing a List to the Web” method on the
previous page when something is stored to the web, there are 2 details stored; the Tag, and
the Value to Store. These were the two parts to the ‘TinyWebDB1.StoreValue’ block.

So if we had 2 parts to put something into the web we would need two parts to take
something down from the web. Again these are the Tag and Value, seen this time as

10
tagFromWebDB and valueFromWebDB. Because the app doesn’t know what the tag and
value are before it pulls them down, these are two new names it calls them by.
tagFromTheWeb will contain the text “MyStoredList” as we set before and
valueFromTheWeb will contain our list from before.

Now to keep everything easy for us to understand we would like to use the name “list”
again to talk about the list, so we use the block ‘set global…list…to’ and connect to it the
“new” list values we just got from the web.
The next group of blocks repeats a function you were shown earlier, simply giving the user a
message saying “# of Items: “, and then the number of items from “list” which we just
changed to the list we pulled from the web.

Again we want to add the ListPicker1.Elements block. Connect to this the ‘global list’ piece.
Place this below the lblNumberOfItems block. This is explained in the next section.

So to summarise, when TinyWebDB1 has got the values from the web, it sets
tagFromWebDB to “MyStoredList” and valueFromWebDB to our old list we uploaded to the
web. Next is tells the app to put into the “list” list we made at the start everything that was
in valueFromWebDB. It then finds out how many values are in “list” and tells the user this
number in the lblNumberOfItems label.

11
Put values into the List Picker

You may have noticed this small group of blocks attached to several of the parts above, thid
is how we give the ListPicker values.

When this is run, every element (option) in the ListPicker is set equal to the values from our
“list” list.

Perform an action after something is chosen from the ListPicker

Here we want to do something when an element is chosen from the ListPicker, so the main
block is ListPicker1.AfterPicking. All we want to do after an element is chosen is to tell the
user which one they chose, we do this by changing the text in lblSelectedItem to the
element we chose, which we find by using ListPicker1.Selection

So to summarise, after the user has picked an element from the ListPicker, the element they
chose will be put into the lblSelectedItem label.

12
The complete program is shown below.

You have just created a functional TinyWebDb App, which creates a list, stores it in the web,
copies it down from the web, and allows you to pick a value from the list, Well Done 

Step 4: Try it out – Connect to the device and test the program
To test your application you have two options:
1. Test the application on the virtual emulator.
2. Test the application on a real world device

13