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 13 th 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