1

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.

2

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.

3

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.

4

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.

5

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 defvariableas 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

6

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 calladd 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

globallist 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.

7

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 setlblNumberOfItems.Textto 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

setlblNumberOfItems.Textto 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 globallist 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 setlblNumberOfItems.Textto block we want to add the ListPicker1.Elements

block. Connect to this the globallist 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.

8

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 isnt 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 SetlblListItems.Textto block to change the lblListItems labels

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 globallist.

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.

9

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 isnt 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.

10

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

11

tagFromWebDB and valueFromWebDB. Because the app doesnt 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 globallistto 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.

12

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.

13

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