Explore MIT App Inventor - Data Storage

Pizza Party with Fusion Tables for App Inventor 2

joanie — Thu, 08 Aug 2013 15:19:00 +0000

In this tutorial, you will create an app that lets people enter food orders for a pizza party. Orders are stored in a Fusion Table, providing one easy to access place for the data. By reading from the table, the app can easily display the orders that have been entered.

A Fusion Table is a Google service to support the gathering, managing, sharing, and visualizing of data. Data are stored in multiple tables on Google's cloud. Individual tables can be merged (or fused) if they contain a common column, and they can be easily visualized on maps and in various kinds of charts and graphs. All of the data are stored in a public table that can be accessed via Google Drive, and allows different users** to add information to the tables. Coupled with a location sensor, an App Inventor app could post periodic updates of each user's location to a public fusion table. Users could post notes to mark noteworthy locations. For example, a team of botanists could use a Fusion Table app to create an annotated catalog of the trees or plants within a certain geographical area.

This tutorial introduces:

Using the FusionTables component
Using a WebViewer component

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify the app's behavior. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

IF YOU DOWNLOAD THE SOURCE CODE you will need to supply your own API KEY, your own Table ID, and your own TABLE URL in the global variables in the blocks editor. This source code will not work without these additions.

Creating your own Fusion Table

Creating your own Fusion Tables is as easy as creating a Google document, if you are familiar with that process.

On the web, login to your Gmail account or any other Google service (e.g., Drive, YouTube).
Select the More > Even more menu and scroll to the bottom of the page of Google services where you will find the Fusion Tables service under "Innovation", click on the Fusion Tables link.
Click "Create New Table"
You will be given three options for the new table: "From this computer", "Google Spreadsheets", or "Create an empty table". For the purposes of this tutorial, select Create an empty table.
You will see that the new table automatically comes with four columns. Change the column names for your Pizza app by going to Edit > Change Columns.You'll rename the four default columns to Date (type=Date), Name (type=Text), Pizza (type=Text), Drink (type=Text). Click save and then add a fifth column by going to the Edit > Add Column. Name this fifth column Comment (type=Text). .
Leave this window open so that you can come back and get the URL, which you'll need when you set up the properties of the WebViewer component in your app.
Click on the Share button (top right) to modify the table's permissions. For this tutorial, you can specify a few friends who will use the app. Only people who are explicitly given permission will be able to enter pizza party preferences through your app.

Another way to create a new table: go to Google Drive. Click the Create button, then go to More > Fusion Table. The picture at right shows what the Create button's menu should look like. If you do not see Fusion Table in your menu, then you may need to contact your school's network administrator. (See Troubleshooting section at the bottom of this page.)

NOTE about Sharing Fusion Tables: To share a FusionTable with others, you have to share it with each person individually, or you can share with a Google Group (see footnote at the end of this tutorial), the same way you would share a private google doc. There is no way to share write privileges to a FusionTable with the public. Public access is restricted to read-only.

Getting an API Key

In order to use the FusiontablesControl Component you need to acquire a Google Applications Programming Interface (API) key, an API Key. To get an API key, follow these instructions:

Go to your Google APIs Console and login if necessary.
Select the Services item from the menu on the upper left.
In the list of services, find the Fusion Tables API service and click the toggle button that currently says "off".
Read and agree to the terms of service. When you return to the APIs Console page you'll see that the on/off switch next to Fusion Tables API is now "On" and green.
Go back up the menu on the upper left of the screen and select the API Access item.
Your API Key will be in the rectangular box in the section called "Simple API Access". You will need set the "API Key" property of the Fusiontables Control component in any app that you make that uses Fusion Tables. (More info below.)

Building the App

Connect to the App Inventor web site and start a new project. Name the new project PizzaParty, set the screen's orientation to Portrait and uncheck the Screen's scrollable property. You may also wish to set the Screen's Title property to something other than 'Screen 1'.

The User Interface

In addition to the FusiontablesControl component, the Pizza Party app makes use of several other types of components. It is assumed that you have learned how to use these in previous lessons. Use the component designer to create the interface for the Search Party. When completed, the designer should look like this:

The components are:

Component Type	Palette Group	What you'll name it	Purpose of Component	Settings of Component
Label	Basic	LabelName	Shows the text "Your Name:"
TextBox	Basic	TextBoxUserName	Gets input from user	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Contains Name Label and Textbox
ListPicker	Basic	ListPickerPizza	Accesses the list of available pizza types	Set the Width property to Fill Parent Set the Text property to "What type of pizza?" Set the ElementsFromString to "Cheese, Pepperoni, Anchovies, Hawaiian"
ListPicker	Basic	ListPickerDrink	Accesses the list of available drinks.	Set the Width property to Fill Parent Set the Text property to "What type of drink?" Set the ElementsFromString to "Coke, Diet Coke, Sprite, Ginger Ale"
Label	Basic	LabelComment	Shows the text "Comments:"
TextBox	Basic	TextBoxComments	Takes user input	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Contains Comments Label and Textbox
Button	Basic	ButtonSubmit	Adds new data to the public fusion table	Set the Text to "Submit" Set the width property to Fill Parent
WebViewer	Not ready for prime time	WebViewer1	Displays Fusion Table	Set width and height properties to Fill Parent
FusiontablesControl	Not ready for prime time	FusiontablesControl1	Manages interactions with the app's Fusion Table
Clock	Basic	Clock1	Used to provide a timestamp each time an order is placed.
Notifier	Other stuff	Notifier1	Notifies the user of any errors

Determining your Fusion Table URL and Table ID

In the blocks editor, you will set the WebViewer component's HomeURL property to point to the URL of your table. To find your Fusion Table's URL:

In your browser, navigate to the new Fusion Table you just created.
Go to the menu and select Tools > Publish.
You'll see a notice saying: "This table is private and will not be visible". Click the blue link that says "Change Visibility".
In the list of "Who Has Access", click the blue "Change..." link next to "Private - Only people listed below..."
Choose"Public on the Web" or "Anyone with the link". Either of these settings will work for this tutorial. In the future, you should decide this setting based on the sensitivity of your data.
Click the green Save button, then the blue Done button.
Back on the Fusion Table page, go to the menu bar and select Tools > Publish. Select the URL from the top text box (labeled "Send in an email or IM"), copy the URL and return to App Inventor. You will paste the URL into the definition block for the TABLE_URL (see below).
The Table ID of the fusion table is contained within the URL after the plus sign. Look for "from+" and then copy all of the characters after the plus. This is the Table's ID. You can also find the Table ID by browsing to your table, then selecting File>About this table in the menu.

Blocks Editor

Open the Blocks Editor so you can program the app's behavior. First, you will describe the app's variables. Variables whose names are ALL_CAPS are constants -- that is, variables whose values do not change while the program is running. It is good to get into the habit of using this naming convention. Define the following variables and give them the initial values shown in the table.

Variable Name	Initial Value	Purpose
TABLE_URL	text	Initialize this global variable to the "published" URL of your fusion table. See instructions above.
TABLE_ID	text	Initialize this global variable to your table ID (e.g. a long string of characters unique to your fusion table). See instructions above.
API_KEY	text	Initialize this global variable to your own API Key for Google Fusion Tables. See instructions above.
UserName	text	Records the name of the user.
pizza	text	Stores the pizza choice input by the user.
drink	text	Stores the drink choice input by the user.
comment	text	Stores the comment input by the user.

Initializing the App

It is important to perform some initialization steps whenever the app is started. These are done in the Screen1.Initialize block. For this app we need to set the initial values for the FusionTable component's API Key property (set to global API_KEY) and the WebViewer component's HomeURL property (set to global TABLE_URL). We also tell the app to forget the user's login credentials. This will prompt the user to login to their Google account and give permission to the app to access the Fusion Table. This authentication step will happen only once when the app first tries to access the Fusion Table. Remember, Fusion Tables are only writeable by users who have been given permission by the table's owner. You specify this in the Sharing settings for the Fusion Table (easy to do from the Google Drive webpage.)

Set up the resetForm procedure as shown below. After recording an entry, this procedure resets the interface back to the original state.

List Picker Blocks

In the designer, you set the choices for the pizza and drink types by filling in the "Selection" property with comma separated lists. These pre-programmed choices will be displayed on the user interface so the user can select their food and drink. Their selections are stored in the pizza and drink variables.

Submitting Data

Once the user has entered their name, food choices, and comments, they will click the Submit button. The app tests to make sure that the name, pizza, and drink fields have values in them, and prompts the user to try again if any of the required answers are missing. Notice that the text = block is used (find it under Built-in palette, Text drawer). This block compares two strings of text to see if they are equal. If all required information is present, it calls the procedure InsertDataInTable (see below). The blocks for the ButtonSubmit.Click are shown here:

Inserting Data into the Fusion Table

The FusiontablesControl component is used to send the data to the Fusion Table. This action will create a new row in the Fusion Table, setting the values of the various columns involved. App Inventor makes this easy to do, but you have to be careful that the insert query is formatted correctly.

This procedure involves two steps: (1) constructing the insert query and then (2) sending the query to Google's Fusion Table service. The query we want to send will take this format:

INSERT INTO
(, , ...) VALUES (, , ...)

The words in CAPS are part of the query's syntax. The words in parentheses are values that we need to plug in. First there is a list of (column names) followed by VALUES followed by a list of (value names). The order of the column names and value names must be in the same order so that they match up. An example of what this might look like is shown below. Notice that the values must be enclosed in single quotes:

INSERT INTO 191GHtZ_B2 (Name, Date) VALUES ('Sam', '10/10/2012')

First, setup a new Procedure With Result that takes a string and returns it surrounded by single quotes. The procedure quotify is used in the InsertDataInTable procedure to place quotes around all of the values in the query. It also takes care of "escaping" any single quotes or apostrophes that are input by the user. You can send single apostrophes as part of a value in the query, so the "replace all" block adds an extra single quote. Two single quotes in a row are interpreted as one single quote.

To construct the query we use App Inventor's join text block. Be sure to put spaces where needed, such as before and after the words INSERT INTO and VALUES:

For this app, the column names must match the column names of the table we created earlier (with columns Date, Name, Pizza, Drink, Comment). Their respective values are taken from the procedure's global variables. Note: If you did not use these exact words for your table's columns, then be sure to use your table's column names when you build your query.

Don't forget the FusiontablesControl.SendQuery command at the very end of this procedure. It's small in size compared to rest of the procedure, but very important.

Handling the Response from the Fusion Tables Service

The FusiontablesControl.GotResult event will be fired when the app receives a response from Google's Fusion Tables Service. For an insert query the service will return the rowID of the new row that was inserted or an error message if something went wrong. In this simple example, we use the "contains" block ( (find it under Built-in palette, Text drawer) to check whether the result string has the rowID in it. If so, then we know that the rowID was received, and we then invoke the WebViewer.GoHome procedure, which reloads the "HomeURL" as specified in the WebViewer's properties. Note that this set of blocks also calls the resetForm procedure. After recording an entry, it resets the interface back to the original state.

You're done! Package the app by going to Package for Phone on the Designer. You can now test the App for the purposes of the pizza party. Once you understand this tutorial, you'll be ready to make new Fusion Tables and modify the app to collect different types data from users. Remember, you have to give each user permission to access the Fusion Table. You do this through the Google Fusion Tables interface, not through App Inventor. Luckily, this means you don't have to change the app in order to add more users who can access the table.

Challenges

This app has the Fusion Table hard-coded into the blocks. Find a way to let users specify their own fusion table ID so that they can host their own Pizza Party.

Variations

Now that you have a simple app that uses fusion tables and a webviewer working, you might want to build some other apps with Fusion Tables. For example:

Include a LocationSensor so that the user's location can be added to the Fusion Table to create a map with notes
Make the WebViewer display something other than the table of stored values; perhaps a map or a chart

Troubleshooting

If you are using a Google Apps for Education account, and you are not able to create a new fusion table (in the "Create" menu of Google Drive you won't even see an option for Fusion Tables), you will need to ask your system administrator to turn this option on for you. Or, you can switch to a standard gmail account. Fusion Tables are not automatically turned on for Google Apps for Education Accounts, your system administrator must make Fusion Tables available to the accounts in your domain.

If you are receiving errors when trying to submit to the Fusion Table, especially if the error mentions Authentication, be sure that you have put the correct API Key into the API Key property field on the FusionTables component in the Design Window.

To familiarize yourself with fusion tables, have a look around the Fusion Tables Web Site. Check out the example gallery to see what kinds of things are possible. Work through this Fusion Table tutorial, which shows how import some data, create a Fusion Table, and view the data on a map with your browser. You'll need to log in with your Google account.

To share a FusionTable with many people, rather than by entering email addresses individually, you can create a dedicated Google Group for your app and let all the app users know how to join the group (maybe through the web page for your app). From the moment you create your app, you share the Fusion Table once with your Google Group (using its email address), and make sure to give to the group editing rights. Every user who joins the group will inherit the editing rights automatically.

Done with PizzaParty? Return to the other tutorials.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source. Remember to add in your API KEY and Fusion Table information in the Designer and blocks.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Android, Where's My Car

aaron — Fri, 14 Jun 2013 16:21:22 +0000

Android, Where's My Car?

Download Refined Version (Book Chapter PDF)

You parked somewhere near the stadium or bar, but when the concert/party ends you don't have a clue where the car is. The friends you came with are equally as clueless.

Fortunately you haven't lost your Android phone that never forgets anything, and you remember you have the hot new app, Android, Where's My Car?. With this app, you click a button when you park your car, and the Android uses its location sensor to record the car's GPS coordinates and address. Later, when you reopen the app, it shows you a map from where you are to the remembered location-- problem solved!

Photo licensed under Creative Commons

Download it, Customize it, Understand it

Below is a customizable, annotated and explained Android, Where's My Car? app. You can:

Install the app on your phone by scanning a barcode
Download the source code blocks for the app, upload them into App Inventor, then customize the app or use it as the basis for another idea you have.
Study the annotated blocks and explanations below to better understand the app and App Inventor programming in general.

Try It

Scan the barcode to your Android phone. It will step you through installing the app.

(If you don't have a scanner, download the free ZXing scanner by searching for it at the Android Market)

Customize It

Download the source code blocks to create your own customized app.

Save the source file (.zip) to your computer (click icon to the right)
Do not unzip it-- leave it as a zip file.
Open the My Projects page in App Inventor.
Select More Actions | Upload Source from the menu.
Choose the file you just downloaded

Understand It

The app demonstrates how to communicate with the Android location sensor, how to record data in the phone's long-term memory (database), and how you can open the Google Maps app from your app to show directions from one one location to another. It makes use of the following App Inventor components:

Location Sensor
TinyDB -- to store the data
ActivityStarter -- to open a map

The User Interface

Here are the components for the Android, Where's My Car? app, as shown in the Component Designer:

The user interface consists of labels to show location data and buttons to initiate events. Some labels just show static text, e.g., GPSLabel is the text "GPS:" that appears in the user interface. Others, such as CurrentLatLabel, will display dynamic data one the location sensor gets its readings. For these labels, a default value is set (0.0) here in the Component Designer.

The ActivityStarter1 component is used to launch the map when the user asks for directions. Its properties are only partially shown above. Here is how they should be specified:

Property	Value
Action	android.intent.action.VIEW
ActivityPackage	com.google.android.apps.maps
ActivityClass	com.google.android.maps.MapsActivity

The App's Behavior

Here are the blocks for the Android, Where's My Car app (the yellow annotations will also appear when you load this app into App Inventor):

Let's examine the four different event-handlers of the app, starting in the top-left and working around in counter-clockwise order.

LocationSensor1.LocationChanged: This event occurs when the phone's location sensor first gets a reading, or when the phone is moved to produce a new reading, The event-handler just places the readings--latitude, longitude, and current (street) address-- into the corresponding "Current" labels so that they appear on the phone.The RememberButton is also enabled in this event-handler. Its enabled setting should be unchecked in the Component Designer because there is nothing for the user to remember until the sensor gets a reading.

RememberButton.Click: When the user clicks the RememberButton , the location sensor's current readings are put into the "remember" labels and stored to the database as well. The DirectionsButton is enabled as it now makes sense for the user click on it to see a map (though it will make more sense once the user changes location).

DirectionsButton.Click: When the user clicks the DirectionsButton , the event-handler builds a URL for a map and calls ActivityStarter to launch the Maps application and load the map. make text is used to build the URL to send to the Maps application. The resulting URL consists of the Maps domain along with two crucial parameters, saddr and daddr , which specify the start and destination for the directions. For this app, the saddr is set to the latitude and longitude of the current location, and the daddr is set to the latitude and longitudeo of the location that was "remembered" (the location of your car!).

Screen1.Initialize: This event is always triggered when an app opens. To understand it, you have to envision the user recording the location of the car, then closing the app, then later re-opening the app. When the app re-opens, the user expects that the location remembered earlier should appear on the phone. To facilitate this, the event-handler queries the database (TinyDB.GetValue). If there is indeed a remembered address stored in the database-- the length of the stored address is greater than zero--the remembered latitude, longitude, and street addres are placed in the corresponding labels.

Variations

Create "Android, Where is Everyone?", an app that lets a group of people track each other's whereabouts. Whether your hiking or at the park, this app could help save time and even lives.
Create a "breadcrumb" app that tracks your (phone's) whereabouts by recording each location change. One interesting refinement would be to only record a new "breadcrumb" if the location has changed by a certain amount.

Review

Lines and paragraphs break automatically.

Here are some of the ideas covered in this tutorial:

The LocationSensor component can report the phone's latitude, longitude, and current street address. Its LocationChanged event is triggered when sensor gets its first reading and when the reading changes (the phone has moved).
The ActivityStarter component can launch any app including Google Maps. For Maps, you set the DataUri property to the URL of the map you want to display. If you want to show directions, the URL will be of the form: http://maps.google.com/maps/?saddr=0.1,0.1&daddr=0.2,0.2, where the numbers are GPS coordinates.
make text is used to piece together (concatenate) separate text items into a single text object. It allows you to concatenate dynamic data with static text. With the Maps URL, the GPS coordinates are the dynamic data.
TinyDB allows you to store data persistently in the phone's database. Whereas the data in a variable or property is lost when an app closes, the data you store in the database can be loaded into your app each time it is opened.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with Android, Where's My Car? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

No Text While Driving

aaron — Fri, 14 Jun 2013 16:19:45 +0000

No Text While Driving

Download Refined Version (Book Chapter PDF)

This tutorial demonstrates how an app can respond to text messages automatically. You'll build an app that sends back a response when a text message is received. The idea for the app came from University of San Franciso student Daniel Finnegan.

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers.If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Getting Started

Connect to the App Inventor web site and start a new project. Name it NoTextWhileDriving, and also set the screen's Title to "NoTextWhileDriving". Open the Blocks Editor and connect to the phone.

Introduction

You'll design the app so that it sends a response to any text message received. You'll also allow the user to customize the response sent.

The tutorial introduces the following App Inventor concepts:

The Texting component for sending texts and processing received texts.
The TinyDB database component for saving the customized message even after the app is closed.

Set up the Components

The user interface for NoTextWhileDriving is simple: it has a text box for the response message and a button for submitting a change to this message. It also has two checkboxes: one to decide whether or not you want to be receiving messages and one to choose to enable Google Voice. This is useful for texting if your phone doesn't have a SIM card. Visit the Texting over Google Voice tutorial to learn more about this.

You'll also need a Texting component and a TinyDB component, both of which will appear in the "non-visual" component area. A table of detailed instructions for designing the components is below, but you can also build it from the following picture of what it should look like:

The components listed below were used to create the designer window shown above. Drag each component from the Palette into the Viewer and name it as specified below:

Component Type	Palette Group	What you'll name it	Purpose of Component	Component Settings
Label	Basic	PromptLabel	Let the user know how the app works	Set the Text to "The text below will be sent in response to all texts while this app is running."
Label	Basic	ResponseLabel	Displays what text will be sent to incoming messages.
TextBox	Basic	NewResponseTextbox	User will enter custom response here	Set the Hint to "Enter custom response."
Button	Basic	SubmitResponseButton	User clicks this to submit new response	Set the text to "Submit Response."
CheckBox	Basic	CheckBoxReceivingEnabled	Let the user choose if they want to receive messages.
CheckBox	Basic	CheckBoxGvEnabled	Let the user choose if they want to respond using Google Voice.
Texting	Social	Texting1	The component that processes the texts
TinyDB	Basic	TinyDB1	The component that will store the response in the database

Add behaviors to the components

NoTextWhileDriving has the following behaviors:

When a text is received, the message displayed in ResponseLabel is sent as a text message response to the sender.
When the user modifies the custom message in NewResponseTextbox and clicks the SubmitResponseButton , the new message is saved persisently in the phone's database.
When the app begins, the custom message is loaded from the database into ResponseLabel.

1. Responding to a text

When a text message is received by the phone, the Texting.MessageReceived event is triggered. Your app should handle this event by setting the PhoneNumber and Message properties of the Texting component appropriately and sending the response text.

You'll need the following blocks:

Block type	Drawer	Purpose
Texting1.MessageReceived	Texting1	Event-handler triggered when the phone receives a text
set Texting1.PhoneNumber to	Texting1	Set the PhoneNumber property before sending
value number	My Definitions	This is the phone number of the person who sent the text
set Texting1.Message to	Texting1	Set the Message property before sending
ResponseLabel.Text	ResponseLabel	This is the message the user has entered
Texting1.SendMessage	Texting1	Send the message

The blocks should look like this:

How the Blocks Work

When the phone receives any text message, the Texting1.MessageReceived event is triggered. The phone number of the sender is in the argument number, and the sender's message is in the argument messageText.

In response, the app sends a text message to the sender. To send a text, the app sets the two key properties of the Texting component: PhoneNumber and Message. Texting.PhoneNumber is set to the number of the sender, and Texting.Message is set to the text in ResponseLabel -- this might be the default, "I'm driving right now, I'll contact you shortly.", or the user may have modified it. Once these properties are set, Texting1.SendMessage is called to actually send the response text message.

The if block prevents the app from sending the automatic reply if it receives its own message. This would happen, for example, if the user is texting their own number to test the app.

Test the behavior. You'll need a second phone to test this behavior. From the second phone, send a text to the phone that is running the app. You can set up one phone with Google Voice or start two emulators to communicate with one another to test this behavior. Does the second phone receive the response text? If that works, try modifying the response message and sending another message from the second phone. Is the new response sent?

2. Storing the custom response

The app so far works, but if you close the app and reopen it, the custom message will be lost. To make things more convenient for the user, store the custom response message they enter into a database using the TinyDB component.

TinyDB provides two blocks: StoreValue and GetValue . The former allows you to store a tagged piece of information, while the latter let's you retrieve one.

You'll need the following blocks to store the custom message:

Block type	Drawer	Purpose
SubmitResponseButton.Click	SubmitResponseButton	User clicks this button to submit new response message
ResponseLabel.Text	ResponseLabel	Sets the response to be what the user inputs.
NewResponseTextbox.Text	NewResponseTextbox	The response message entered by the user is here
TinyDB1.StoreValue	TinyDB1	Store the custom message in the phone's database
text ("responseMessage")	Text	Use this as the tag for the data
ResponseLabel.Text	ResponseLabel	The response message entered by the user is displayed here after the user submits their new response.

The blocks should look like this:

How the Blocks Work

When the user clicks the SubmitResponseButton, the app will store the response message entered by the user as the shown text that will be sent. The text in this label (ResponseLabel.Text) will be stored in TinyDB. The text responseMessage is used as a tag to uniquely identify the information-- later, you'll use that same tag to retrieve the message from the database.

3. Retrieving the saved response message

Program the Screen1.Initialize event-handler so that the saved custom response message is retrieved from the database and placed in ResponseLabel. Check the retrieved data to make sure there's something there-- after all, the first time the app is used, the database will not have any message saved. If there is a stored message, place it in the ResponseLabel so that the user can see it and so that it will be used to respond to incoming texts.

You'll need the following blocks:

Block type	Drawer	Purpose
def variable ("response")	Definitions	A temporary variable to hold the retrieved data
text (blank)	Text	Initial value for the variable can be anything
Screen1.Initialize	Screen1	This is triggered when app begins
Texting1.ReceivingEnabled	Texting1	Sets the app so that it receives SMS text messages
number (3)	Number	The app is initialized to receive text messages while the app is running or when it's not
CheckBoxGvEnabled.Checked	CheckBoxGvEnabled	Sets status of the Google Voice Enabled checkbox
Texting1.GoogleVoiceEnabled	Texting1	If Google Voice is enabled, SMS messages will be sent over Google Voice
if else test	Control	To ask if texting should be enabled.
not= block	Math	Check if the retrieved value is not equal to (=) 1
Texting1.ReceivingEnabled	Texting1	Lets the user decide whether or not the app will received SMS messages
CheckBoxReceivingEnabled.Checked(x2)	CheckBoxReceivingEnabled	Sets status of the Receiving Enabled checkbox.
true	Logic	Sets the app to receive text messages
false	Logic	Sets the app to not receive text messages
set Response	Definitions	Sets the variable to the value retrieved from db.
TinyDB1.GetValue	TinyDB1	Get the stored response text from the database
text ("responseMessage")	Text	Plug into tag slot of GetValue, make sure text is same as was used in StoreValue above
if test	Control	To ask if the retrieved value has some text
> block	Math	Check if length of retrieved value is greater than (>) 0
length test	Text	Check if length of retrieved value is greater than 0
global response (x2)	My Definitions	This variable holds the value retrieved from GetValue
number (0)	Math	To compare with length of response
set ResponseLabel.Text to	Message	If we retrieved something, place it in ResponseLabel

The blocks should look like this:

How the Blocks Work

When the app begins, the Screen1.Initialize event is triggered. The app calls the TinyDB1.GetValue with a tag of responseMessage-- the same tag used when you stored the user's entry earlier. The resulting value is placed in the variable response. When the app starts, we set the Texting component to have receiving enabled, but not Google Voice, which is displayed on the user interface. ReceivingEnabled takes a number value 1 (receiving disabled), 2 (receiving enabled while app is running), or 3 (receiving enabled when app is running and is not running)

The variable response is used so that the value returned from the database can be checked. If it has a length of 0, then there was no database entry with a tag of responseMessage-- something that will occur the first time a user runs this app. But if the length is greater than 0, the app knows that a custom response has been stored previously, and the retrieved value can be placed in the ResponseLabel which the user will see and which is used as the message for any response texts sent.

Test the app. Enter a new response message in the NewResponseTextbox and click the SubmitResponseButton. Then restart the app by clicking the Restart App button in the Blocks Editor. This will cause the app to re-initialize just like it will when a user closes the app and reopens it later. Does the custom message you entered appear?

Selecting Response Settings

The user interface has two checkboxes that the user can toggle: whether Receiving is enabled and whether Google Voice is enabled. The first allows the user to decide whether or not they want to be receiving messages. The second lets the user decide if they want to send messages from their own phone number or from a Google Voice account. When the user toggles these switches, the changes are communicated to the Texting component which enables or disables these properties as marked.

You'll need the following blocks.

Block type	Drawer	Purpose
CheckBoxGvEnabled.Changed	CheckBoxGvEnabled	Detects if the user toggles this control.
Texting1.GoogleVoiceEnabled	Texting1	Sets whether or not Google Voice is enabled
CheckBoxGvEnabled.Checked	CheckBoxGvEnabled	Returns true or false value.
CheckBoxReceivingEnabled.Changed	CheckBoxReceivingEnabled	Detects if the user toggles this control.
if else block	Control	Checks whether or not receiving is enabled.
= block	Math	Checks whether or not receiving is enabled.
true	Logic	Checks whether or not receiving is enabled.
CheckBoxReceivingEnabled.Checked	CheckBoxReceivingEnabled	Returns true or false value.
Texting1.ReceivingEnabled(x2)	Texting1	Sets whether or not receiving is enabled.
number(1)	Math	Sets ReceivingEnabled as false.
number(3)	Math	Sets ReceivingEnabled as true.

The blocks should look like this:

Test the app. Try texting your Android device when the "Receiving Enabled" is checked and then when it is not checked. Do you receive texts when it is unchecked? Try texting over Google Voice. If any of these features aren't working like you expect them to, go back and look at the blocks again!

No Text While Driving, Final Program

Variations

Once you get the No Text While Driving app working, you might want to explore some variations. For example,

Write a version that speaks the received texts aloud. You'll need to use the TextToSpeech component.
Write a version that lets the user define custom responses for particular phone numbers.
Write a version that sends custom responses based on the user's location (e.g., I'm in church...)

Review

Here are some of the ideas covered in this tutorial:

The Texting component can be used both to send text messages and process the ones that are received.
The TinyDB component is used to store information persistently, in the phone's database, so that it there each time the app is opened.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with No Text While Driving? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

Broadcast Hub

aaron — Fri, 14 Jun 2013 16:13:05 +0000

BroadcastHub

Download Refined Version (Book Chapter PDF)

In this tutorial, you'll write an app that automatically responds to texts messages and broadcasts texts messages it receives to a list of phone numbers.The app is inspired by FrontLineSMS, a tool that has been used in developing countries to monitor elections, broadcast weather changes, and in general connect people that don't have access to the web but do have phones and mobile connectivity.

FrontLineSMS is software that runs on a computer with a phone plugged into it. The computer and plugged-in phone serve as a hub for SMS text communication amongst a group. You'll write a version of the software that runs on an Android phone, thus allowing the hub to be as mobile as the phones it connects.

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

The tutorial also assumes you have completed the TextGroup tutorial and thus are familiar with the basics of the Texting component.

Getting Started

Connect to the App Inventor web site and start a new project. Name it BroadcastHub, and also set the screen's Title to "BroadcastHub". Open the Blocks Editor and connect to the phone.

Introduction

BroadcastHub processes text messages that are received in the following manner:

If the text message is from an unknown source, the app responds with a text that invites that source to join the broadcast list.
If the text message “joinabc” is received, the app adds the sender to the broadcast list.
If the text message is from a number already in the broadcast list, the message is broadcast to all numbers in the list.

The tutorial covers the following App Inventor concepts:

The Texting component for sending texts and processing received texts.
List variables to keep track of the numbers to text.
The Clock.Timer block that is used to cause an app to repeat operations on a list of data (the list of phone numbers) each time the Timer goes off

Setting up the Components

BroadcasterHub facilitates communication between mobile phones. Those phones need not have the BroadcasterHub app installed, or even be smart phones. The app is the hub, and the app's user interface is only for the administrator of the communications network.

For this sample, that user interface is simple: it will display the current broadcast list -- the list of phone numbers which have registered for the service-- and it will report all texts it receives and broadcasts.

To build the interface, add the following components:

Component Type	Palette Group	What you'll name it	Purpose of Component
Label	Basic	BroadcastListLabel	This will display the phone numbers that are registered.
Label	Basic	LogLabel	This will display a log of the texts received and broadcast.
Texting	Social	Texting1	The component that processes the texts
TinyDB	Basic	TinyDB1	To store the list of registered phone numbers

Set the Width of each of the labels to "Fill Parent" so that they span the phone horizontally. Set the Height for the labels to 200 pixels.
Set the Text property of BroadcastListLabel to "Broadcast List...".
Set the Text property of LogLabel to blank.

BroadcastHub should look like this after its front-end is designed:

Add behaviors to the components

The activity for Broadcast Hub is not triggered by the user entering information or clicking a button, but by texts being received from outside sources. You'll need the following behaviors:

When the text message is from an unknown source, the app responds with a text that invites that source to join the broadcast list.
When the text message "joinabc" is received, register the sender as part of the broadcast list.
When the text message is from a number already in the broadcast list, the message is broadcast to all numbers in the list.

Start by creating the first behavior-- when you receive a text, send a message back to the sender inviting them to text a code, "joinabc", in order to register for the group. You'll need the following blocks:

Block type	Drawer	Purpose
Texting1.MessageReceived	Texting1	Event-handler triggered when the phone receives a text
set Texting1.PhoneNumber to	Texting1	To set the number for the return text
value number	My Definitions	Argument of MessageReceived, it is the phone number of sender
set Texting1.Message	Texting1	To set the invite message to send
text	Text	The invite message
Texting1.SendMessage	Texting1	Send it!

The blocks should look like this:

How the Blocks Work

Texting1.MessageReceived is triggered when any text message is received on the phone. The blocks within the event-handler set the PhoneNumber and Message of the Texting1 component, then send the message.

Test the behavior. You'll need another phone besides the one on which the app resides. From the second phone, send a text "hello" to the phone running the app. The second phone should receive a text that invites them to the group.

Handling the "joinabc" text message

Create the blocks for the second behavior: "when the text message "joinabc" is received, add the sender to the broadcast list." First, you'll need to define a list variable, BroadcastList, to store the phone numbers that register. From Definitions, drag out a def var block and name it "BroadcastList". Initialize it with a make a list block from Lists:

Next, modify the Texting1.MessageReceived event-handler so that it adds the sender's phone number to the BroadcastList if the message received is "joinabc". After you add the number to the list, display the new list in the BroadcastListLabel. You'll need the following blocks:

Block type	Drawer	Purpose
ifelse	Control	Depending on message received, you'll do different things
= block	Math	The test will be: is messageText equal to "joinabc"
value messageText	My Definitions	Plug into = block
text ("joinabc")	Text	Plug into = block
add items to list	Lists	To add the sender's number to BroadcastList
BroadcastList	My Definitions	The list
value number	My Definitions	Plug in as item of add items to list
set BroadcastListLabel.Text to	BroadcastListLabel	Display the new list
BroadcastList	My Definitions	Plug in to set BroadcastListLabel.Text to block
set Texting1.Message to	Texting1	Prepare Texting1 to send message back to sender
text ("congrats, you ...")	Text	Congratulate sender for joining group

The blocks should look like this:

How the Blocks Work

The first row of blocks sets Texting1.PhoneNumber to the phone number of the message that was just received. The app then asks if the messageText was of the special code "joinabc". If so, the sender's phone number is added to the BroadcastList, and a congratulations message is sent. If the messageText is something other than "joinabc", the reply message is just the invitation message from before. After the ifelse block, the reply message is sent (bottom row).

Test this behavior. From a second phone, send the text message "joinabc" to the phone on which the app is running. Do you recieve the correct reply? Try sending a different text message as well to check if the ifelse is working correctly.

Broadcasting Messages

Next, you'll add the behavior so that the app broadcasts messages to the numbers in BroadcastList, if the message arrives from a number in BroadcastList. You'll need an additional ifelse block to check if the number is in the list, and a Clock.Timer block to broadcast the message to each item in the list. Here are all the blocks you'll need:

Block type	Drawer	Purpose
ifelse	Control	Depending on whether sender is already in list, you'll do different things
is in list?	Lists	Checks to see if something is in a list
global BroadcastList	My Definitions	Plug into list slot of is in list?
value number	My Definitions	Plug into list slot of is in list?
Clock.Timer	My Blocks	To repeatedly send out message to all in list
global BroadcastList x2	My Definitions	Plug into list slot of select list item
set Texting1.Message to	Texting1	To set the message
value messageText	My Definitions	The message that was received and to be broadcast
set Texting1.Message to	Texting1	To set the phone number
set Clock.TimerEnabled x2	Clock1	To turn the timer on/off
set nTicks x2	My Definitions	Sets the value of nTicks
select list item	Control	To grab an item from the list

The blocks should look like this:

How the Blocks Work

We've just set up a timer to send a text message to each number in the list, BroadcastList.

A timer performs some action each time the clock ticks. To control the timer, define a global variable named nTicks. We will set this variable initially to the number of phone numbers in the list.  And then we will subtract 1 from the variable each time we send a message. 

A timer is done in two parts.  In TextingMessage1.Received we will no longer send the message. Instead, we will initialize the global nTicks variable to the length of the BroadcastList list.  And we will enable the Clock1.

The second part is done using a Clock1.Timer block. This block will contain the Texting1.SendMessage command. Each time the clock ticks the following steps will be performed:

Select a number from the phoneNumbers list using the nTicks as the index.
Set the Texting1.PhoneNumber to the selected number.
Send the text message using Texting1.SendMessage.
Subtract 1 from the nTicks variable.
If the nTicks is less than or equal to 0, disable the clock

The behavior is complex enough that it requires a "nested" ifelse block. If the phone number of the received message is already in the list, the foreach block is executed and the message relayed to all in the list. If the number is not in the list, the outer else-do clause is executed, and it asks another question, which is the test of the nested ifelse block: is the messageText equal to "joinabc". The app then branches one of two ways based on the answer.

In general, if and ifelse blocks can be nested to arbitrary levels, giving you the power to program arbitrarily complex behaviors.

Test this behavior. First, have two different phones register with the app by texting "joinabc" to the phone which is running the app.Then text another message from one of the phones. Both phones should receive the text.

Logging the broadcasted texts

When a text is received and broadcast out to the other phones, the app should log that occurrence to the app so the administrator can monitor the activity. Earlier, you added the label LogLabel to the user interface for this purpose. Now, you'll code some blocks that change LogLabel each time a new text arrives.

You need to build a text that says something like "message from 111-2222 broadcast". The 111-2222 is not fixed data, but is the value of the variable number that comes with the MessageReceived event. So to build the text, you'll concatenate the first part "message from" with the variable number and finally with the last part of the message, the text "broadcast".

There are two functions in the Text drawer to build text. One is the join function, which joins two pieces of text. Another function, make text, is also available and more convenient to use than join when you have more than two parts. You'll use it for this behavior. Here are all the blocks you'll need:

Block type	Drawer	Purpose
set LogLabel.Text to	LogLabel	Display the log here
make text	Text	Build a text object out of multiple parts
text ("message from")	Text	Report message
value number	My Definitions	The number of the sender
text ("broadcast\n")	Text	Text is "message from 111-2222 broadcast" with newline
LogLabel.Text	LogLabel	Add new log to the previous ones

The blocks should look like this:

How the Blocks Work

After broadcasting the message to all the numbers in BroadcastList , the app now modifies the LogLabel to include a report of the just broadcasted text. If the sender's number (value number) is "1112222", then the make text will build the text object:

message from: 1112222 broadcast

along with the log reports that were already in LogLabel.Text from previously received texts. The "\n" is the newline character that causes the old reports to be displayed on the next line, e.g.,

message from: 1112222 broadcast
message from: 555-6666 broadcast

Storing the BroadcastList in a Database

As is, the app works, but every time you close the app the BroadcastList will be lost and everyone would have to re-register. To fix this, you'll use the TinyDB component to store and retrieve the BroadcastList to and from a database. TinyDB allows you to store data persistently-- even if the app is closed, the next time you open the app the data will be there.

The general scheme for storing data persistently is the following: When the app begins, load the list from the database into a variable (e.g., BroadcastList ). Then, each time a new item is added to the list, update the database version of the list.

Start by coding the blocks to store the list in the database. With the TinyDB component, a tag is used to identify the data and distinguish it from other data stored in the database. In this case, you can tag the data as "broadcastList". Do the following:

Drag out a TinyDB1.StoreValue block from the TinyDB1 drawer.
Create a text block and give it the text "broadcastList". Place this text block as the tag of StoreValue.
Drag out a reference to BroadcastList from My Definitions . Place it as the value argument of StoreValue.
Place the StoreValue block right below the blocks that add an item to the BroadcastList.

The bottom part of the modified Texting1.MessageReceived event-handler should look like the following:

How the Blocks Work

TinyDB1.StoreValue stores the data in BroadcastList to a database with a tag that you can later use to retrieve the data into your app. In this case, the tag is the text, "broadcastList", and he value is the actual list BroadcastList.

Loading the BroadcastList from a Database

Now add the blocks for loading the list back in each time the app begins. When the app begins, the Screen1.Initialize event is triggered, so your blocks will go in that event-handler. You’ll call TinyDB.GetValue, using the same tag you used to store the list (“broadcastList”). Check if the returned value is a list, because it won’t be if there isn’t any data in the list yet.

The blocks should look like:

How the Blocks Work

The blocks first define a variable, valueFromDB, which is used to temporarily store the data returned from the database. When the app begins, the Screen1.Initialize event is triggered. TinyDB.GetValue is called, and the data from the database is placed in valueFromDB.

The variable is then checked to see if it is a list. If it is not, that means there was no data for the tag “broadcastList” in the database, and an empty text has been returned. This will happen the first time a user opens the app.

If valueFromDB is a list, the list is placed into the variable BroadcastList and the list is displayed.

Test this behavior. Choose Restart App which will trigger the Screen1.Initialize. Do the numbers registered earlier appear?

Display BroadcastList with each number on separate lines

Create a procedure displayBroadcastList, which displays the list with each phone number on a separate line. Be sure and call the procedure from below the add items to list block so that the updated list is displayed.

For help displaying the list on separate lines, see Displaying a List.

You'll need the following blocks:

Block type	Drawer	Purpose
procedure ("displayBroadcastList")	Definitions	Create the procedure
set BroadcastListLabel.Text to	BroadcastListLabel	Display the list here
text ("Phone Numbers...")	Text	The header for the list
foreach	Control	Iterate through the numbers
name pnumber	in the foreach	Name the foreach variable "pnumber". This is the current item of the foreach
BroadcastList	My Definitions	Plug into in list slot of foreach
set BroadcastListLabel.Text to	BroadcastListLabel	Modify with each of the numbers
make text	Text	Build a text object from multiple parts
BroadcastListLabel.Text	BroadcastListLabel	Add to the label on each iteration of foreach
text ("\n")	Text	Newline character so that next number is on next line
value pnumber	My Definitions	The current number from the list

The displayBroadcastList procedure should look like this:

How the Blocks Work

The foreach in displayBroadcastList successively adds a phone number to the end of the label, placing a newline character in between each item.

Of course this procedure will not do anything unless you call it: you should add two calls to the procedure: one within the Texting1.MessageReceived event-handler, and one within the Screen1.Initialize event-handler. The call displayBroadcastList block can be found in My Definitions, and it should replace the blocks that directly set the BroadcastListLabel.Text to the list. You can see how these calls to displayBroadcastList should look in the snapshot of the final version below.

Test this behavior. Try adding some more phone numbers to the list. Do the registered phone numbers now appear on separate lines?

Broadcast Hub, Final Version

Variations

Once you get the Broadcast Hub app working, you might want to explore some variations. For example,

Allow client phones to remove themselves from the list by texting "quitabc" to the app.
Let the hub administrator (the user of your app) add and remove numbers from the broadcast list.
Let the hub administrator specify numbers that should not be allowed into the list.

Review

Here are some of the ideas covered in this tutorial:

Apps can react to events, like a text being received, that are not initiated by the user of the app.
Nested ifelse and foreach blocks can be used to code complex behaviors.
The make text block can be used to build a text object out of multiple parts.
TinyDB can be used to store and retrieve data from a database. A general scheme is to call StoreValue to update the database whenever the data changes, and call GetValue to retrieve the database data when the app begins.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with BroadcastHub? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

TextGroup (Part 2)

aaron — Fri, 14 Jun 2013 16:12:40 +0000

Text Group Part II: Adding and Removing Members

What you're building

This tutorial extends the Text Group tutorial. That app sent a text to a fixed list of phone numbers, and only the programmer could change the numbers in the list. The app in this tutorial allows the user to add and remove the phone numbers in the list, and it stores the list persistently in a database.

Getting started

Connect to the App Inventor web site and open your TextGroup project (if you haven't completed that tutorial, do so now before continuing). SaveAs the app and name it "TextGroup2". You can leave the screen's Title as "Text Group". Open the Blocks Editor and connect to the phone.

Introduction

You'll design the app so that the user adds phone numbers to the group by choosing from the phone's contact list, and removes them by choosing from the items already in the group.. You'll store the list of numbers in a database so that they are there even when the app is closed and re-launched.

The tutorial covers the following App Inventor components and concepts:

The foreach block for repeating operations on a list.
The PhoneNumberPicker component for accessing the phone's contacts.
The ListPicker component for allowing the user to choose a number for removal.
The Texting component for sending texts.
The TinyDB database component for storing the phone list in a database.

Set up the Components

The user interface for Text Group, Part II has a textbox, button, and status label for sending the group text, just as in Part I. If you performed a SaveAs to begin this project, those components should already be in the view. You should then add a PhoneNumberPicker and ListPicker components for adding and removing phone numbers from the list, along with a Texting component and a TinyDB component, both of which will appear in the "non-visual" component area. A table of detailed instructions for designing the components is below, but you can also build it from the following picture of what it should look like:

The components listed below were used to create the designer window shown above. The first five were part of TextGroup so will already be there if you built that app and performed a SaveAs to begin this one. You'll need to drag each of the other components from the Palette into the Viewer and name it as specified below:

Component Type	Palette Group	What you'll name it	Purpose of Component
TextBox	Basic	MessageText	User will enter message here.
Button	Basic	TextGroupButton	User enters the message here
Label	Basic	StatusLabel	Reports when texts have been sent
Texting	Social	Texting1	The component that sends the texts
Clock	Basic	Clock1	The component that designates when to send the texts
Label	Basic	GroupHeadingLabel	Header for the list of phone numbers that will appear
Label	Basic	MembersLabel	This is where the list of phone numbers will appear
Horizontal Arrangement	Screen Arrangement	HorizontalArrangement1	To organize the add and remove buttons (pickers) horizontally
PhoneNumberPicker	Social	PhoneNumberPicker1	Allow user to choose from numbers in contact list
ListPicker	Basic	RemoveListPicker	Allow user to remove number from phone numbers in group
TinyDB	Basic	TinyDB1	For storing and retrieving group's phone numbers from database

Set the properties of the components in the following way:

Set the Hint of MessageText to "enter a message"
Set the Text of TextGroupButton to "Text Group"
Set the Text of StatusLabel to "status".
Set the Text of GroupHeadingLabel to "-- Group -- ".
Set the Text of MembersLabel to "members will appear here".
Set the Text of PhoneNumberPicker1 to "Add Member".
Set the Text of RemoverListPicker to "Remove Member"

Add behaviors to the components

If you completed Text Group, Part I, you should have the following list defined in the Blocks Editor:

For this app, you still want the list but you don't want any pre-defined numbers in it-- the numbers will be added by the end-user of the app. So remove the text blocks with the numbers and leave the make a list block empty:

You'll need to add the following behaviors:

When the user clicks the "Add Member" button (the button associated with the PhoneNumberPicker), the picker will appear for the user to choose a number. When the choice is made, the app will add the chosen number to the PhoneNumbers list and update the database.
When the user clicks the "Remove Member" button (the button associated with the RemovListPicker), the picker will appear for the user to choose one of the numbers already in PhoneNumbers. When the choice is made, the app will remove the number from the list and update the database.
When the app begins, the numbers stored in the database are retrieved and loaded into PhoneNumbers.

Adding a Phone Number (Member) to the Group

The list of phone numbers in the contact list will appear when the user clicks the PhoneNumberPicker 's associated button: that behavior is built-in to the component. When the user makes a choice from the contact list, PhoneNumberPicker 's AfterPicking event is triggered-- your job is to program this to add the chosen item to the list and update the database.

You'll need the following blocks:

Block type	Drawer	Purpose
PhoneNumberPicker1.AfterPicking	PhoneNumberPicker1	The event-handler that is triggered when user chooses from contact list
add items to list	Lists	Your goal is to add chosen number to list
global PhoneNumbers	My Definitions	Plug this into list slot of add items to list
PhoneNumberPicker1.PhoneNumber	PhoneNumberPicker1	This holds the chosen phone number, plug into item slot of add items to list
TinyDB1.StoreValue	TinyDB1	Since the list is updated, need to update the database
text ("textGroup")	Text	Plug this in as the tag of TinyDB1.StoreValue
global PhoneNumbers	My Definitions	Plug this in as the value of TinyDB1.StoreValue
set MembersLabel.Text to	MembersLabel	Display the list on the phone
global PhoneNumbers	My Definitions	plug into set MembersLabel.Text to

The blocks should look like this:

How the Blocks Work

When the user chooses from the PhoneListPicker, the PhoneListPicker1.AfterPicking event is triggered. A PhoneListPicker' s job is to put the user's choice in its PhoneNumber property, so the event-handler just calls add items to list to get that choice into the PhoneNumbers list.

PhoneNumbers is a variable, and variables are short-term memory that will disappear when the app is closed. Thus, after adding the item to the variable, TinyDB1.StoreValue block is used to copy that list to the database-- the phone's long-term memory. The data is tagged with "textGroup". Later, you'll use that tag to re-load the phone number list from the database each time the app is opened.

After updating the database, set MembersLabel.Text to is called to display the list. This is necessary because list variables are hidden from the user until they are placed in a visible component. Directly placing a list into a label is a rudimentary way of displaying a list-- the list will appear in the form: (111-1111 222-2222). In the next section, you'll program a more elegant list display.

Test the behavior. On the phone, click "Add Member" and choose a number from the list of contacts that appears. Does the number appear in the MembersLabel? Try adding additional numbers to see how the list is displayed.

Displaying the List with Items on Separate Lines

At this point the app shows the user the phone numbers that have been added, but not very elegantly. Create a procedure displayMembers, which displays the list with each phone number on a separate line. Be sure and call the procedure in the PhonePicker1.AfterPicking event, below the add items to list block, so that the updated list is displayed. The call to the procedure should replace the blocks that set the MembersLabel.Text directly to the list. For help displaying the list on separate lines, see Displaying a List.

You'll need the following blocks:

Block type	Drawer	Purpose
procedure ("displayMembers")	Definitions	Create a procedure as you'll want to call this from multiple places
set MembersLabel.Text to	MembersLabel	Display the list here
text ("")	Text	Start the text out empty
foreach	Control	Iterate through the numbers
name number	in the foreach	Name the foreach variable "number". This is the current item of the foreach
global PhoneNumbers	My Definitions	Plug into in list slot of foreach
set MembersLabel.Text to	MembersLabel	Modify with each of the numbers
make text	Text	Build a text object from multiple parts
MembersLabel.Text	MembersLabel	Add to the label on each iteration of foreach
text ("\n")	Text	Newline character so that next number is on next line
value number	My Definitions	The current number from the list

Here's how the blocks should look:

How the Blocks Work

The foreach in displayMembers successively adds a phone number to the end of the label, placing a newline character in between each item.

Of course this procedure will not do anything unless you call it: you should add a call to the procedure in the PhonePicker1.AfterPicking event, below the add items to list block. The call displayMembers block can be found in My Definitions, and it should replace the blocks that directly set the MembersLabel.Text in the list.

Test the behavior. On the phone, click "Add Member" to choose another number to add to the list. When the modified list is displayed, does each number appear on separate lines?

Removing a Number from the list

To allow the user to remove a number from the list, you must first get the PhoneNumbers list into the RemoveListPicker that appears when the user clicks "Remove Member". Unlike the PhonePicker component, which gets its data from the phone's contact list, ListPicker requires you to explicilty load the items that will appear. You can do this by setting the Elements property of the ListPicker component. You do this within the RemoveListPicker.BeforePicking event, which is triggered right when the user clicks the button but before the list is shown.

The blocks should look like this:

Next, code the RemoveListPicker.AfterPicking event so that the user's choice is removed from the PhoneNumbers list. You'll need the following blocks:

Block type	Drawer	Purpose
RemoveListPicker.AfterPicking	RemoveListPicker	This is triggered after the user chooses a number from the list
remove list item	Lists	Removes the indexth item in a given list
global PhoneNumbers	My Definitions	Plug into list slot of remove list item
position in list	Lists	Given an item in a list, this gives you its index
RemoveListPicker.Selection	RemoveListPicker	The number chosen by the user, plug into thing slot of position in list
global PhoneNumbers	My Definitions	Plug into list slot of position in list
call displayMembers	My Definitions	Once the user removes one, display the modified list

The blocks should look like this:

How the Blocks Work

When the user chooses a number from the RemoveListPicker, the AfterPicking event is triggered. The event-handler uses position in list to get the index of the chosen number, then uses that index to remove the number from the list PhoneNumbers. The database is then updated and the list displayed.

Test the behavior. On the phone, click "Remove Member" and choose a number from the list that appears. When the list is re-displayed, is the number you chose gone?

Loading the List from the Database

The app so far works, and when changes are made to the PhoneNumbers list they are also stored in a database. Now you just need to add the behavior such that the data stored in the database is loaded when the app launches.

Program the Screen1.Initialize event-handler so that the saved list of phone numbers is retrieved from the database and placed in the PhoneNumbers list and the display is updated to show the list. You'll need to check the retrieved data to make sure there's something there-- after all, the first time the app is used, the database will not have any numbers in it.

You'll need the following blocks:

Block type	Drawer	Purpose
def variable ("valueFromDB")	Definitions	A temporary variable to hold the retrieved data
text (blank)	Text	Initial value for the variable can be anything
Screen1.Initialize	Screen1	This is triggered when app begins
set valueFromDB to	My Definitions	You'll set the variable to the value retrieved from db
TinyDB1.GetValue	TinyDB1	Get the stored response text from the database
text ("textGroup")	Text	Plug into tag slot of GetValue, make sure text is same as was used in StoreValue above
if test	Control	To ask if the retrieved value has some text
is list?	Text	Check if the data returned is a list (if no data is returned, this will be false)
global valueFromDB (x2)	My Definitions	This variable holds the value retrieved from GetValue
set PhoneNumbers to	PhoneNumbers	If we retrieved something, place it in PhoneNumbers

The blocks should look like this:

How the Blocks Work

When the app begins, the Screen1.Initialize event is triggered. The event-handler queries the database with GetValue and the tag "textGroup". If there is a value with that tag in the database, its corresponding value will be placed in the variable valueFromDB. The event-handler checks this value-- is it a list?-- and if it is puts the list into the variable PhoneNumbers and calls displayMembers.

Test the app. To test the final app, first package and install it on the phone and run it. Live testing won't work in this case because every time you "Restart App", in clears the phone's database: even if you've stored some data persistently, it is cleared when you restart the app. 

Click Restart App so that the app re-initializes. Does the list of numbers you've entered appear on reload? Try removing all items and testing again. Does the app launch without error?

Text Group Part II, Final Program

Variations

Once you get the Text Group app working, you might want to explore some variations. For example,

Write a version that records both the contact name and phone number of each member of the group. You can also use ContactPicker to let the user choose from a contact name instead of a number.
Write a version that allows the user to define and make use of multiple groups. You'll need a group list in which each item is a list of contacts/numbers, and you'll need a more complex user interface.

Review

Here are some of the ideas covered in this tutorial:

PhoneListPicker allow the user to choose from the phone numbers of his contacts. The choice is placed in the Selection property and the AfterPicking event is called when the user makes a choice.
ListPicker is similar to PhoneListPicker but it displays a programmer-defined list, e.g., the list of phone numbers in the group. You define the list that will appear in the ListPicker by setting the Elements property, and you can do this in the BeforePicking event. The user's choice is placed in the Selection property, and the AfterPicking event is triggered when the user makes a choice.
TinyDB is used to store data persistently so that it can be loaded each time an app begins. StoreValue stores with a tag to identify the data and the data itself (the value). GetValue returns the data for a given tag. Often, an app will call GetValue when the app begins (Screen1.Initialize) to load the persistent data.
Currently, App Inventor does not provide full access and functionality for the contacts and groups of the phone. In this tutorial, you created your own group and app for processing the group (adding,removing, and texting all).

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with TextGroup Part 2? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

TextGroup

aaron — Fri, 14 Jun 2013 16:12:11 +0000

TextGroup

What you're building

This tutorial introduces the Texting component for sending and processing SMS text messages.You'll build an app that texts a message to a list of phone numbers. This tutorial assumes you are familiar with the basics of App Inventor: using the Component Designer to build a user interface, and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Getting started

Connect to the App Inventor web site and start a new project. Name it TextGroup, and also set the screen's Title to "TextGroup." Open the Blocks Editor and connect to the phone.

Introduction

You'll design the TextGroup app so that clicking on a button texts a message to a list of phone numbers. The app introduces the following App Inventor concepts:

The Texting component for sending texts and processing SMS texts.
List variables to keep track of the numbers to text.
The Timer block for repeating operations on a list of data (the list of phone numbers)

Set up the components

The user interface for TextGroup is simple: it has a text box for entering the message to send, a button to send the message, a label that reports when the message is sent, and a Texting component. Use the Component Designer to create this interface. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

The following table describes the components you need. Drag each component from the Palette into the Viewer and name it as specified below:

Component Type	Palette Group	What you'll name it	Purpose of Component
TextBox	Basic	MessageText	User will enter message here
Button	Basic	TextGroupButton	User will click here after entering the message
Label	Basic	StatusLabel	Reports when texts have been sent
Texting	Social	Texting1	The component that sends the texts
Clock	Basic	Clock1	Used to designate when to send the texts

Set the properties of the components in the following way:

Set the the Hint of MessageText to "enter a message"
Set the Text of TextGroupButton to "Text Group"
Set the Text of StatusLabel to "status"
Set the TimerEnabled of Clock1 to "false"

Add behaviors to the components

TextGroup's behavior is as follows: when the user clicks the TextGroupButton, the app should text the message entered by the user in MessageText to all the numbers in a list of phone numbers. When all are sent, it should report the last message sent in the StatusLabel.

Text the entered message to one phone number.

To introduce yourself to the Texting component, begin by creating a simplified version that texts the message entered by the user to your own phone. To send a text, you need to set two properties of the Texting component: the PhoneNumber and the Message. Once these properties are set, you call the SendMessage function to actually send the text.

Open the Blocks Editor and drag out the following blocks:

Block Type	Drawer	Purpose
TextGroupButton.Click	TextGroupButton	When the user clicks the button, this event handler is triggered.
set Texting1.Message to	Texting1	Set the Message property before sending
MessageText.Text	MessageText	This is the message the user has entered.
set Texting1.PhoneNumber to	Texting1	Set the PhoneNumber property before sending
text ("1112222")	Text	Put your own phone number as the text.
Texting1.SendMessage	Texting1	Send the message

The blocks should look like this (but with a real phone number instead of "1112222")

How the blocks work

When the user clicks the TextGroupButton, the event-handler is triggered. The first row of blocks gets the text entered by the user (MessageText.Text) and places it into the Message property of the Texting1 component. The second row of blocks sets the PhoneNumber property of the Texting1 component. After the first two rows of blocks, Texting1 knows what to send and who to send it to; the last block just instructs Texting1 to actually send the message.

Test this behavior. If your phone is connected, the app should appear with the MessageText box and button. Enter a message and click on the TextGroupButton. Does the text get sent? Check your phone (or the phone you sent the text to) to see.

Texting a list

Next, you'll modify the blocks to text more than one number at a time. You'll first define a global variable to store the data for the app: the phone numbers. Global variables are not seen by the user; they are the app's "hidden" memory. In this case, you'll define the list of phone numbers to which the text is sent.

You'll need the following blocks to build a list of phone numbers:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the PhoneNumbers variable (rename it)
make a list	Lists	Used to define the items of the list
text (3)	Text	The actual phone numbers

The blocks should look like this, but with two or three phone numbers of your friends.

Note that text blocks are used for the phone numbers, not number blocks. This will allow for dashes, which are not allowed in number blocks. number blocks are used for data on which you want to perform mathematical computations.

Now you're ready to modify the TextGroupButton event-handler so that it texts each number in the variable PhoneNumbers.

You'll need to set up a timer to send a text message to each number in the list.

A timer performs some action each time the clock ticks. To
control the timer, define a global variable named nTicks. We will set this variable initially to the number of phone numbers in the
list.  And then we will subtract 1 from the variable each time we send a message. 

A timer is done in two parts.  In TextGroupButton.Click
we will no longer send the message. Instead, we will initialize the global nTicks variable to the length of
the phoneNumbers list.  And we will enable the Clock1.

The second part is done using a Clock1.Timer block. This block will contain the Texting1.SendMessage
command. Each time the clock ticks the following steps will be performed:

Select a number from the phoneNumbers list using the nTicks as the index.
Set the Texting1.PhoneNumber to the selected number.
Send the text message using Texting1.SendMessage.
Subtract 1 from the nTicks variable.
If the nTicks is less than or equal to 0, disable the clock

Reconfigure the Clock.Timer block so it looks like this:

Reconfigure the TextGroupButton.Click block so it looks like this:

How the blocks work

When the TextGroupButton is clicked, the Texting1.Message property is set to the message entered by the user in MessageText. Then the nTicks variable is set to the length of the phoneNumbers list and the Clock1.TimerEnabled is set to true. This will start the clock ticking. Then in the Clock1.Timer block, the message will be sent to the target phone number and the global variable nTicks will be decremented by 1. The clock will continue ticking and sending messages until nTicks at which point the Clock1.TimerEnabled will be set to false thereby stopping the timer.

Test the behavior. Click the TextGroupButton on the phone. Is the text sent to all the numbers in the list?

Reporting the Status of the app

It's always a good idea to give the user feedback when they initiate an operation. In the app you've built thus far, the user clicks on the TextGroupButton and nothing changes in the app's user interface. Though the user might hear the phone's chime for transmitting the text, it's still better to report a status directly in the app.

Modify the blocks so that the status label reports the last message sent. You'll need the following blocks:

Block Type	Drawer	Purpose
set StatusLabel.Text to	StatusLabel	This is where status will appear
join	Text	To concatenate the two parts of the status message
text	Text	Put "last message sent:" in this text block
MessageText.Text	MessageText	The message just sent

The updated Clock1.Timer blocks should look like this:

How the blocks work

The join block is used to concatenate two pieces of text. You need it when you want to join data from a variable or property with some other text. If you want to piece together more than two texts, there is also a make text block.

Test the status behavior. Does the status message report the message that was sent?

Final program

TextGroup, Final Version

Variations

Once you get the TextGroup app working, you might want to explore some variations. For example,

Write a "random date" version that randomly chooses a number in the list to call. You won't need a Clock.Timer block, but you will need the pick random item function in the Lists drawer.
Write a version in which "Missing You" is sent to the list of numbers as soon as the app begins (on the Screen.Initialize event). This will allow for quick texting without clicking an additional button.
Write a version that allows the user to enter the numbers in the list. This way you don't need to re-program the blocks to change the group you are texting and your app can be used by others! You'll need to use TinyDB to store the numbers after they are entered.

Review

Here are some of the ideas covered in this tutorial:

Instead of placing data directly in event handlers, you can create list variables and program event handlers to process the list.
An app can repeat functions on all items of a list using the Clock.Timer block.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with TextGroup? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

MapTour

aaron — Fri, 14 Jun 2013 16:11:48 +0000

MapTour

What you're building

Download Refined Version (Book Chapter PDF)

This is a two-part tutorial introduces the ActivityStarter component for launching arbitrary Android Apps and the ListPicker component for allowing a user to choose from a list of items. You'll build MapTour, an app for visiting French vacation destinations with a single click. Users of your app will be able to visit the Eiffel Tower, the Louvre, and Notre Dame in quick succession.

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Once you complete the first part of this tutorial, try part 2.

Getting started

Connect to the App Inventor web site and start a new project. Name it "MapTour", and also set the screen's Title to "MapTour". Open the Blocks Editor and connect to the phone.

Introduction

You'll design the app so that a list of destinations appears. When the user chooses one, the Google Maps app is launched to display a map of the destination.

The tutorial introduces the following App Inventor concepts:

The ActivityStarter component for launching Android apps from your app.
The ListPicker component for allowing the user to choose from a list of choices.

Set up the Components

The user interface for MapTour is simple: you'll have a single ListPicker component and an ActivityStarter (non-visible) component. The design view should look like this when you're done:

The components listed below were used to create this designer window. Drag each component from the Palette into the Viewer and name it as specified:

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	Show a static image of Paris map on screen
ListPicker	Basic	ListPicker1	Display the list of destinations
ActivityStarter	other stuff	ActivityStarter1	Launches the maps app when a destination is chosen

Download the file parismap.png onto your computer, then choose Add in the Media section to load it into your project. For it to appear, you'll also need to set this as the Picture property of Image1.

The ListPicker component has an associated button-- when the user clicks it, the choices are listed. Set the text of that button by setting the Text property of ListPicker1 to "Choose Destination".

Setting the properties of ActivityStarter

ActivityStarter is a component that lets you launch any Android app-- the browser, Maps, even another one of your own apps. When another app is launched from your app, the user can click the back button to get back to your app. You'll build MapTour so that the Maps application is launched to show particular maps based on the user's choice. The user can then hit the back button to return to your app and choose a different destination.

ActivityStarter is a relatively low-level component in that you'll need to set some properties of the component with information familiar to a Java Android SDK programmer, but foreign to the rest of the 99.999% people in the world. Not to worry, however. By copying the sample protocol information provided here, you can easily learn how to launch apps like Maps from the apps you are creating.

So, to set-up the ActivityStarter to launch the Maps application, set the following ActivityStarter properties in the Component Designer:

Property	Value
Action	android.intent.action.VIEW
ActivityPackage	com.google.android.apps.maps
ActivityClass	com.google.android.maps.MapsActivity

With these values set, you'll be able to launch the Maps application. In the Blocks Editor, you'll set one more property, DataUri , which will allow you to launch Maps with a particular map being displayed. This property must be set in the Blocks Editor because it will change based on whether the user chooses to visit the Louvre, the Eiffel Tower, or the Notre Dame.

Create a list of destinations

Open the blocks editor and create a variable with the list of destinations for the MapTour. You'll need the following blocks:

Block type	Drawer	Purpose
def variable ("Destinations")	Definitions	create a list of the destinations
make a list	Lists	use to add the items to the list
text ("Tour Eiffel")	Text	the first destination
text ("Musee du Louvre")	Text	the second destination
text ("Cathedrale Notre Dame")	Text	the third destination

The blocks will look like this:

Add behaviors to the components

MapTour has two behaviors:

When the app begins, the app loads the destinations into the ListPicker component so the user can choose.
When the user chooses a destination from the ListPicker, the Maps application is launched to show a map of that destination. For Part I, you'll just open Maps and tell it to invoke a search for the chosen destination

The ListPicker component displays a list of items when the user clicks a button. ListPicker has a property Elements . If you set Elements to a list, the items in the list will appear in the ListPicker . For this app, you want to set the ListPicker' s Elements property to the destinations list you just created. Because you want this to happen when the app begins, you'll define this behavior in the Screen1.Initialize event. You'll need the following blocks:

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	this event is triggered when the app starts
set ListPicker1.Elements to	ListPicker1	set this property to the list you want to appear
global destinations	My Definitions	the list of destinations

The blocks should look like this:

How the blocks work

Screen1.Initialize is triggered when the app begins. The event-handler just sets the Elements property of ListPicker so that the three destinations will appear.

Test this behavior. On the phone, click the button labeled "Choose Destination". The list picker should appear with the three items.

Launching Maps with a search for the destination

Next, you'll program the behavior that should occur when the user chooses one of the destinations-- the ActivityStarter should launch Maps and search for the selected destination.

When the user chooses from the ListPicker component, the ListPicker.AfterPicking event is triggered. In the event-handler for AfterPicking you need to set the DataUri of the ActivityStarter component so it knows which map to open, then you need to launch the app using StartActivity.

You'll need the following blocks:

Block type	Drawer	Purpose
ListPicker1.AfterPicking	ListPicker1	this event is triggered when the user chooses from ListPicker
set ActivityStarter1.DataUri to	ActivityStarter1	the DataUri tells Maps which map to open on launch
make text	Text	build the DataUri from two pieces of text
text ("geo:0,0?q=")	Text	the first part of the DataUri expected by Maps
ListPicker1.Selection	ListPicker1	the item the user chose
ActivityStarter1.StartActivity	ActivityStarter1	launch Maps

The blocks should look like this:

How the blocks work

When the user chooses from the ListPicker, the AfterPicking event is triggered. Whatever item was chosen is in the ListPicker1.Selection property. So if the user chose "Musee du Louvre", that value is in ListPicker1 's Selection property.

In the Component Designer, you already setup the ActivityStarter componenent with properties so that it will launch the Maps application. Here, you just need to tell it which map to show. The DataUri property of ActivityStarter allows you to specify this using a special protocol.

In this case, you want to show the map that would appear if you typed in "Musee du Louvre" in the search box of the Maps application. To do this, the DataUri should be set to:

geo:0,0?q='Musee du Louvre'

The make a text block creates a text exactly like this, only the text after "q=" will be the choice made by the user.

Once the DataUri is set, ActivityStarter1.StartActivity launches the Maps app.

Test this behavior. Restart the app and click the "Choose Destinations" button again. When you choose one of the destinations, does a map of that destination appear? Can you click the back button to return to your app to choose again (you may have to click a couple of times to leave the Maps app).

Map Tour, Final Program

Review

Here are some of the ideas covered in this tutorial:

The ListPicker component lets the user choose from a list of items. ListPicker' s Elements property holds the list, the Selection property holds the selected item, and the AfterPicking event is triggered when the user chooses.
The ActivityStarter component allows your app to launch other apps. This tutorial demonstrated its use with the Maps application, but you can launch a browser or any other Android app as well-- even another one of your own.
See the reference page on Activity Starter for more details.
Learn more sophisticated uses of the ActivityStarter and the ListPicker components in MapTour Part 2.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with MapTour? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

Data Storage

MakeQuiz and TakeQuiz

aaron — Fri, 14 Jun 2013 16:11:21 +0000

MakeQuiz and TakeQuiz

What you're building

MakeQuiz and TakeQuiz are two apps that, in tandem, allow a teacher to create quizzes for a student. Parents can create fun trivia apps for their children during a long road trip, grade school teachers can build "Math Blaster" quizzes, and college students can build quizzes to help their study groups prepare for a final. This tutorial will walk you through creating both the MakeQuiz and the TakeQuiz app.

This tutorial is a followup of the QuizMe tutorial -- if you haven't completed that tutorial you should do so before continuing.

Getting started

Connect to the App Inventor web site and start a new project. Name it "MakeQuiz", and also set the screen's Title to "MakeQuiz". Open the Blocks Editor and connect to the phone.

Introduction

You'll design two apps, MakeQuiz for the "teacher" and TakeQuiz for the "student". With MakeQuiz:

The user enters questions and answers in an input form.
The previously entered question-answer pairs are displayed.
The quiz is stored persistently, in a database.

TakeQuiz will work similarly to the QuizMe app-- in fact you'll build it using QuizMe as a basis. TakeQuiz will differ in that the questions asked will be those that were entered into the database using MakeQuiz.

This tutorial introduces the following App Inventor concepts:

Input forms for allowing the user to enter information.
Displaying lists: serializing a list variable to display it on separate lines.
Persistent data: MakeQuiz will save the quiz questions and answers in a database and TakeQuiz will load them in from the database.
Data Sharing: the two apps together illustrate how two phones (and even two apps) can communicate through a shared, web database:

Set up the Components for MakeQuiz

Use the Component Designer to create the interface for MakeQuiz. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

You'll use the following components to create MakeQuiz. Drag each component from the Palette into the Viewer and name it as specified below:

Component Type	Palette Group	What you'll name it	Purpose of Component
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Display the question prompt and textbox on one line
Label	Basic	Label1	The "Question:" prompt
TextBox	Basic	QuestionText	User enters questions here
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Display the answer prompt and textbox on one line
Label	Basic	Label2	The "Answer:" prompt
TextBox	Basic	AnswerText	User enters answers here
Button	Basic	SubmitButton	User clicks to submit a QA pair.
Label	Basic	QuestionsAnswersLabel	This will display previously entered QAs
TinyWebDB	Other Stuff	TinyWebDB1	To store to and retrieve from database

Set the properties of the components in the following way:

Set the Text of Label1 to "Question": and the Text of Label2 to "Answer":
Set the Hint of QuestionText to "enter a question" and the Hint of AnswerText to "enter an answer".
Set the Text of SubmitButton to " Submit "
Set the Text of QuestionsAnswersLabel to "Questions and Answers".

Put Label1 and QuestionText in HorizontalArrangement1, and Label2 and AnswerText in HorizontalArrangement2.

Add behaviors to the components

Open the Blocks Editor to add the behaviors for the app. As with the original QuizMe app, you'll first define some global variables for the QuestionList and AnswerList , but this time you won't provide fixed questions and answers. You'll need the following blocks:

Block type	Drawer	Purpose
def variable ("QuestionList")	Definitions	Defines the QuestionList variable (rename it)
def variable ("AnswerList")	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	To set up the QuestionList for new items
make a list	Lists	To set up the AnswerList for new items

The blocks should look like this:

Note that, unlike the original QuizMe app, the lists are empty to begin with. This is because with MakeQuiz and TakeQuiz, all data is created by the user of the app (it is user-generated).

Handle the User's entries

The first behavior you'll build is for handling the user's input. Specifically, when the user enters a question and answer and clicks submit, you'll use add item to list blocks to update the QuestionList and AnswerList.

You'll need the following blocks:

Block type	Drawer	Purpose
SubmitButton.Click	SubmitButton	This event is triggered when the user clicks this button.
add items to list (2)	Lists	Use these to add the data entered by the user to the lists
global QuestionList	My Definitions	Plug into list slot of first add items to list
QuestionText.Text	QuestionText	User's entry; plug it into item slot of first add items to list
global AnswerList	My Definitions	Plug into list slot of second add items to list
AnswerText.Text	AnswerText	User's entry; plug it into item slot of second add items to list

The blocks should look like this:

How the blocks work

add items to list appends each item to the end of a list. Here, the app takes the text the user has entered in the QuestionText and AnswerText text boxes and appends each to the corresponding list.

The behavior updates the hidden QuestionList and AnswerList variables, but the changes are not shown to the user. To display these lists, create a procedure "displayQAs" which makes a text object with both lists and places it into the QuestionsAnswersLabel. Then make sure to call the procedure at the bottom of SubmitButton.Click. You'll need the following blocks:

Block type	Drawer	Purpose
procedure "displayQAs"	Definitions	Put the code to display questions and answers here
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Display the lists in this label.
make text	Text	Make a text object out of two lists and a colon separator
global QuestionList	My Definitions	Plug into make text
text (":")	Text	Plug into make text
global AnswerList	My Definitions	Plug into make text
call displayQAs	My Definitions	Place in the bottom of the SubmitButton.Click event-handler

The blocks should look like this:

How the blocks work

The displayQAs procedure is called after the lists are modified in SubmitButton.Click. The QuestionsAnswersLabel is modified to display the two lists separated by a colon. By default, App Inventor displays lists with surrounding parenthesis and spaces between items:

(item1 item2 item3)

Of course, this is not the ideal way to display the lists, but it will allow you to test your behavior for now. Later, you'll modify the displayQAs procedure to display a list on separate lines, and to display each question together with its corresponding answer.

Test this behavior. On the phone, enter a question and answer and click Submit. The app should display the single entry in the QuestionList, a colon, and then the single entry in the AnswerList. Add a second question and answer to make sure the lists are being created correctly.

Blanking Out the Question and Answer

When a user submits a question-answer pair, you should clear the QuestionText and AnswerText text boxes so they're ready for a new entry.

You'll need the following blocks:

Block type	Drawer	Purpose
set QuestionText.Text to	QuestionText	To blank out question
set AnswerText.Text to	AnswerText	To blank out answer
text (2 blank ones)

Here's how the blocks for the updated event handler should look:

How the blocks work

When the user submits a new question and answer, they are added to their respective lists. At that point, the text in the QuestionText and AnswerText is "blanked out" with empty text blocks (you create an empty text block by clicking on the the block's text and pressing the delete button).

Test the behavior. Add some questions and answers. When you submit them, the QuestionText and AnswerText should show only their hint (when a TextBox's Text property is empty it shows the hint until the user clicks it).

Storing the questions and answers in a database

As is, the app records the questions and answers entered by the user, but only in the phone's temporary memory. All variables in App Inventor are transient data-- they are stored on the phone and the data only "lives" through one run of an app. When the user closes the app, the data is lost.

The MakeQuiz app needs to record the questions and answers in a database. This will allow the quiz creator (teacher) to always edit the latest update of the quiz. It will also allow the TakeQuiz app to load the quiz and administer it to the student.

You'll use the TinyWebDB component to store and retrieve the QuestionList and AnswerList to and from a database. TinyWebDB allows you to store data in AppInventor-compliant databases that live on the web instead of on the phone.

The general scheme for storing a list persistently is the following: each time a new item is added to the list, use TinyWebDB to update the database version of the list. Then each time the app is opened (Screen1.Initialize event), reload the database version of the list into the variable.

Start by storing the QuestionList and AnswerList in the database each time the user enters a new pair. You'll need the following blocks:

Block type	Drawer	Purpose
TinyWebDB1.StoreValue	TinyWebDB1	for storing questions in the database
text ("questions")	Text	Plug in "questions" as the tag of StoreValue
global QuestionList	My Definitions	Plug into the value slot of StoreValue
TinyWebDB1.StoreValue	TinyWebDB1	For storing answers in the database
text ("answers")	Text	Plug in "answers" as the tag of StoreValue
global AnswerList	My Definitions	Plug into the value slot of StoreValue

The blocks should look like this:

How the blocks work

The last two rows of blocks store data in the database. The tag arguments label the data being stored so that you can retrieve it later. The QuestionList is stored with a tag of "questions" while the AnswerList is stored with a tag of "answers".

Although our example uses "questions" as the tag, you should actually use your own tag, e.g., "DavesQuestions", because by default, the database entries of all App Inventor programs share the same namespace and so your list of questions may get confused with someone else's list of questions since you both used the same tag. For more information, see Creating a Custom TinyWebDB service.

Test this behavior. TinyWebDB stores information on the web, so you can open a browser page to test whether this behavior is working. By default, TinyWebDB stores information at http://appinvtinywebdb.appspot.com . Browse there to check if your data was stored as desired. There will be many entries, as the default service is for testing and is used by many programmers. If you search on the page, you should find the tag-value pairs you just stored.

Because the default service is shared amongst programmers and apps, it is only for testing. Fortunately, setting up your own database service is straight forward. For more information, see Creating a Custom TinyWebDB service.

Loading Data from the Database

Once the blocks for storing the lists are working, you can add the blocks for loading the lists back in each time the app begins.

Loading data from a TinyWebDB database is a two-step process. First, you request the data by calling TinyWebDB.GetValue and providing a tag.

GetValue only requests the data from the web service. After the request is made, your app can do other things, such as responding to user actions, while it waits for the TinyWebDB web service to send the data. When the data arrives, a TinyWebDB.GotValue event is triggered. When that event occurs, the data requested is in a variable named "valueFromWebDB". The tag you requested is in the variable "tagFromWebDB". You can access these variables in the TinyWebDB.GotValue event handler.

In this case, the app needs to request two things from the TinyWebDB web service, the questions and the answers, so the Screen1.Initialize will make two calls to getValue. When the data arrives and the GotValue event-handler is triggered, the app should check the tag to see which request has arrived, and then load the corresponding list. Once the lists are both loaded, displayQAs can be called to display them.

You'll need the following blocks:

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Event handler triggered when app begins
TinyWebDB.GetValue (2)	TinyWebDB	To request the stored QuestionList and AnswerList
text ("questions")	Text	use as the tag to retrieve QuestionList
text ("answers")	Text	use as the tag to retrieve AnswerList
TinyWebDB.GotValue	TinyWebDB1	Event handler triggered when data arrives
ifelse	Control	Need to ask which GetValue request arrived
= block	Math	Compare tagFromWebDB to "questions"
text ("questions")	Text	This is the tag that was used to store QuestionList
value TagFromWebDB	My Definitions	An argument of GotValue, specifies which request
set QuestionList to	My Definitions	If TagFromWebDB is "questions" this list will be set
set AnswerList to	My Definitions	If TagFromWebDB is not "questions" this list will be set
value ValueFromWebDB (2)	My Definitions	This holds the value returned from database
if	Control	Check if both the lists are loaded before displaying
= block	Math	Compare the lengths of the lists
length of list (2)	Lists	Check if the length of the lists are the same
global QuestionList	My Definitions	Plug into one of the length of list blocks
global AnswerList	My Definitions	Plug into the other length of list blocks
call displayQAs	My Definitions	Display the newly loaded questions and answers

The blocks should look like:

How the blocks work

When the app begins, the Screen1.Initialize event is triggered. The app calls TinyWebDB1.GetValue twice, once to request the stored QuestionList and once to request the stored AnswerList. After requesting the data, the app can handle other events while it waits for the web database to answer the request.

When the data arrives from the web database, the TinyWebDB1.GotValue event is triggered. Since two requests were made, it will be triggered twice, once for each list.

In the GotValue event-handler, the value returned is in the variable valueFromWebDB . The corresponding tag is in tagFromWebDB . The blocks first check to see which request has returned (even though the request for "questions" is made first in Screen1.Initialize, there is no guarantee that the QuestionList will arrive first). If the tag is "questions", the valueFromWebDB is put into the variable QuestionList. Otherwise (else) it is placed in the AnswerList.

At the bottom of GotValue, the app checks to see if both lists have been loaded-- one way to check is to see if the lengths of the lists are the same. If they are, displayQAs is called to display them on the phone.

Test this behavior. Select Restart Phone in the Blocks Editor. When the app initializes, it should display the previously entered questions and answers. If you close the app and restart again, the previous quiz should still appear.

The version of MakeQuiz you've created so far works: the user can create a quiz and it will be stored persistently in the database. If you can accept the fact that the quiz is displayed in an inelegant way, you can proceed to creating the sister app, TakeQuiz, which lets a user step through the quiz and answer the questions.

If you'd like to learn how to display list data in a more elegant fashion, step through the steps directly below.

Displaying a List on Multiple Lines

In the app you've built so far, the question and answer lists are displayed separately and with the default list display format, e.g.,

(question1 question2 question3): (answer1 answer2 answer3)

In this section, you'll modify the app so that the newly entered question-answer pairs are displayed in tandem, one on each line:

question1:answer1
question2:answer2
question3:answer3

Displaying the data in this way is non-trivial, so you'll start by first displaying a single list, the QuestionList, with each item on a separate line.

To display a list on separate lines, you must serialize it . This means to build a single text object with all the items of the list in it and a special character, '\n', between each item. A "\n" within a text object appears as a newline character when displayed. 

For example, suppose the user has entered two questions, "What is the capital of California?" and "What is the capital of New York?" and these have succesfully been added to the QuestionList . Your displayQAs procedure should build a text object from QuestionList that looks like:

"\nWhat is the capital of California\nWhat is the capital of New York?"

When displayed on the phone, such text would appear as: 

What is the capital of California? 
What is the capital of New York?

All the changes will occur in the procedure displayQAs. You'll remove the blocks within that procedure, and use a foreach block to build the text by successively adding each question. The blocks within the foreach should add the current item (question) to the end of the text object (QuestionsAnswersLabel) you are building. You'll need the following blocks:

Block type	Drawer	Purpose
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Initialize the label to empty before repeatedly adding to it
text (blank)	Text	plug into set QuestionsAnswersLabel.Text to
foreach	Control	For each item in list, you'll concatenate it to the QuestionsAnswersLabel
name var	already in foreach	The current item of foreach; rename it to "question"
global QuestionList	My Definitions	Plug this into "in list" slot of foreach
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Iteratively build the text
make text	Text	build a text object
QuestionsAnswersLabel.Text	QuestionsAnswersLabel	Plug into make text
value question	My Definitions	Plug into make text (make sure you've renamed foreach variable to "question")
text ("/n")	Text	New-line character so following text on another line

The blocks should look like this:

How the blocks work

When the procedure is called, the QuestionsAnswersLabel.Text is first set to the empty text. This is in preparation for the foreach block that comes next, which will build the text in QuestionsAnswersLabel.Text incrementally.

The foreach block specifies that the blocks within it are to be executed once for every item in QuestionList. If there are three questions, then the inner blocks will be executed three times. Within the foreach, the current item being processed is named question.

On each iteration, QuestionsAnswersLabel.Text is modified. Each time it is set to its previous value, along with the newline character, "\n" and the current question being processed.

When the foreach completes, QuestionsAnswersLabel.Text will be text string with all the items separated by newline characters. As the app is processing each iteration of the foreach , the phone display doesn't change. But when it completes, the text in QuestionsAnswersLabel.Text is displayed on the phone and the items appear on separate lines.

Test the behavior. On the phone, add another question and answer and click Submit. Now, only the questions should be displayed and they should be displayed on separate lines.

Including the answer in DisplayQAs

The displayQAs procedure you've created ignores answers and only displays questions. In the next version of displayQAs , you'll display the data as question-answer pairs, e.g.,

What is the capital of California?: Sacramento
What is the capital of New York?: Albany

Modify displayQAs. Use an index variable to access each answer as the foreach block walks through the questions. You'll need the following blocks:

Block type	Drawer	Purpose
def var ("answer")	Definitions	To temporarily store each answer
def var ("answerIndex")	Definitions	To keep track of which answer (and question) you're on
text ("text")	Text	Initialize the variable answer to text.
number (1)	Math	Initialize the variable answerIndex to 1
set answerIndex to	My Definitions	Re-initialize answerIndex each time displayQAs called
number (1)	Math	To re-initialize answerIndex to 1
set answer to	My Definitions	set this variable each time in the foreach
select list item	Lists	select from the list AnswerList
global AnswerList	My Definitions	plug into list slot of select list item
global answerIndex	My Definitions	Plug into index slot of select list item
set answerIndex to	My Definitions	In order to increment it each iteration through loop
global answerIndex	My Definitions	To increment answerIndex , add 1 to itself.
number (1)	Math	To increment answerIndex

The blocks should look like this:

How the blocks work

The foreach only allows you to iterate through one list. In this case, there are two lists and you need to step through and select each answer as you proceed through the questions. The strategy is to use an index variable, as was done with the currentQuestionIndex in the QuizMe tutorial.

For this behavior, the index is a position in the AnswerList, so its named answerIndex. The index is set to 1 before the foreach begins. Within the foreach, it is used to select the current answer from the AnswerList, and then it is incremented.

Test this behavior. On the phone, add some more question/answer pairs. The display should now show each question with its corresponding answer, and each question:answer pair on separate lines.

Final MakeQuiz App

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run MakeQuiz.

Or download the source code

TakeQuiz

Building TakeQuiz is simpler; it can be built with a few modifications to the QuizMe app you completed earlier (if you have not completed that tutorial, do so now before continuing).

Begin by opening your QuizMe app, choosing SaveAs, and naming the new project "TakeQuiz." This will leave your QuizMe app as is and allow you to use a copy of it as the basis for TakeQuiz.

This version of MakeQuiz/TakeQuiz does not handle images, so first remove the images from the TakeQuiz app:

In the Component Designer, choose each image from the media palette and delete it. Also delete the Image1 component, which will remove all references to it from the Blocks Editor.
In the Blocks Editor, drag the PictureList to the trash.

Since TakeQuiz will work with database data, drag a TinyWebDB component into the Component Designer viewer.

Now modify the blocks so that the quiz given to the user is the one from the database. First, since there are no fixed questions and answers, remove all of the actual question and answer text blocks from the make a list blocks within the QuestionList and AnswerList. The blocks should look like this:

Now modify your Screen1.Initialize so that it calls TinyWebDB.GetValue twice to load the lists. The blocks should look like this:

Finally, drag out a TinyWebDB.GotValue event-handler. This event-handler should look similar to the one used in MakeQuiz, but here you only want to show the first question and none of the answers. The blocks should look like this:

How the Blocks Work

When the app begins, Screen1.Initialize is triggered and the app requests the questions and the answers from the web database. When each of those requests arrives, the TinyWebDB.GotValue event-handler is triggered. The app asks which request has come in, using tagFromWebDB , and places the valueFromWebDB into the appropriate list. If it is the QuestionList being loaded, the first question is selected from QuestionList and displayed.

Test the behavior. Click Restart Phone App. Does the first question from the quiz you created with MakeQuiz appear? Can you take the quiz just as you did with QuizMe (except for the pictures)?

Final Program (Take Quiz)

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run Take Quiz.

Or download the source code.

Variations

Once you get MakeQuiz and TakeQuiz working, you might want to explore some variations. For example,

Incorporate images into the apps. The images will need to be URLs from the web, and the test creator will need to specify these URLs as a third item in the MakeQuiz form.
Allow the user to delete items from the questions and answers. You can let the user choose using the ListPicker component, and you can remove an item with the remove list item
Allow multiple quizzes to be created. You'll need to conceptualize the list of quizzes as a list of lists.

Review

Here are some of the ideas covered in this tutorial:

You can store data persistently in a web database with the TinyWebDB component.
You retrieve data from a TinyWebDB database by requesting it with GetValue . When the web database returns the data, the TinyWebDB.GotValue event is triggered. At that point, you can put the data in a list or process it in some way.
TinyWebDB data can be shared amongst multiple phones and apps.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with MakeQuiz and TakeQuiz? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

QuizMe

aaron — Fri, 14 Jun 2013 16:10:24 +0000

QuizMe

What you're building

Download Alternate Example Version (Book Chapter PDF)

QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe:

The user steps through a series of questions, clicking a button to proceed to the next question.
The user enters an answer for each question and the app reports whether each answer is correct or not.

With QuizMe, the quiz questions are always the same unless you, the programmer, change them. Later, you can create MakeQuiz & TakeQuiz, an app that lets users of the app create and modify the quiz questions.

This tutorial assumes you are familiar with the basics of App Inventor -- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Getting Started

Connect to the App Inventor web site and start a new project. Name it QuizMe, and also set the screen's Title to "QuizMe". Open the Blocks Editor and connect to the phone.

Also download the following pictures of baseball players and save them on your computer. Later, you'll load these images into your project.

Introduction

You'll design the quiz game so that the user proceeds from question to question by clicking a Next button, and receives simple correct/incorrect feedback on each answer.

This tutorial introduces:

Defining and displaying lists of information.
Sequencing through a list using an index variable -- a variable that keeps track of a position in a list.
Conditional behaviors-- performing certain operations only when a condition is met.
Switching an image to show a different picture at different times.

Set up the Components

Use the component designer to create the interface for QuizMe. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

To create this interface, first load the images you downloaded into the project. Click on the Add button in the Media area and select one of the downloaded files (e.g., Larsenberra.jpg). Then do the same for the other three images.

Next, create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	The picture part of the question
Label	Basic	QuestionLabel	Displays the current question
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Organizes the AnswerPrompt and Text
Label	Basic	AnswerPromptLabel	Text prompting for an anwer
TextBox	Basic	AnswerText	User will enter answer here.
Label	Basic	RightWrongLabel	Correct/Incorrect is displayed here.
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Organizes the AnswerButton and NextButton
Button	Basic	AnswerButton	User clicks to submit an answer
Button	Basic	NextButton	User clicks to proceed to the next answer

Set the properties of the components as described below:

Component	Action
Image1	Set its Picture property to "Larsenberra.jpg". This is the first picture that should appear.
QuestionLabel	Change Text property to "question"
AnswerPromptLabel	Change Text property to "Enter Answer:". On the Viewer screen, move this label into HorizontalArrangement1.
AnswerText	Change Hint to "please enter an answer". On the Viewer screen, move AnswerText into HorizontalArrangement1.
AnswerButton	Change Text property to "Submit". On the Viewer, move the button into HorizontalArrangment2.
NextButton	Change Text property to "Next". Move the button into HorizontalArrangement2.
RightWrongLabel	Change Text property to "correct/incorrect".

Add Behaviors to the Components

Open the Blocks Editor to add the behaviors for the app. First, you'll define two list variables, QuestionList to hold the list of questions, and AnswerList to hold the list of corresponding answers.

To define the two list variables, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the QuestionList variable (rename it)
def variable	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	Used to insert the items of the QuestionList
text (3 of them)	Text	The actual questions
make a list	Lists	Used to insert the items of the AnswerList
text (3 of them)	Text	The actual answers

You create global variables by dragging in a def variable block from the Definitions drawer and double-clicking the default name "variable" to change its name. The def variable block has a slot for the initial value of the variable. The variable can represent a number or text, or even a list, for which you can plug in a make a list block into the variable definition.

The blocks should look like this:

Define the Hidden Index Variable

Each time the user clicks the NextButton to proceed through the quiz, the app needs to remember which question it is on. In programming, to remember something, you define a new variable. In this case, the app needs to remember the current question number -- the index into the list QuestionList.

To create the variable currentQuestionIndex, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the currentQuestionIndex variable (rename it)
number (1)	Math	Set the initial value of currentQuestionIndex to 1

The blocks should look like this:

Display the first question

To start, you'll ignore the answers and just work on the behavior to sequence through the questions. The desired behavior is the following: when the app starts, the first question should appear in the label named QuestionLabel. When the user clicks the NextButton, the second question should appear. When the user clicks again, the third should appear. When the last question is reached, clicking the NextButton should result in the first question once again appearing in the QuestionLabel.

With App Inventor, you select particular items in a list with the select list item block. The block asks you to specify the list and an index--a position in the list. If a list has three items, the indexes 1, 2, and 3 are valid.

For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component.

For this app initialization behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
Screen1.Initialize	Screen1	When the app begins, this event-handler is triggered.
set QuestionLabel.Text to	QuestionLabel	Need to put the first question in QuestionLabel
select list item	Lists	Need to select the first question from QuestionLabel
global QuestionList	My Definitions	The list to select from
number (1)	Math	Select the first question by using an index of 1

The blocks should look like this:

How the blocks work

The Screen1.Initialize event is triggered when the app begins. The first item of the variable QuestionList is selected and placed into QuestionLabel.Text. So when the app begins, the user will see the first question.

Test this behavior. Click Restart Phone App (or Connect Phone if not connected). What appears on the phone? If you created the QuestionList as described above, the first item of QuestionList, "Who pitched a perfect game in the World Series?", should appear in the QuestionLabel.

Iterating Through the Questions

Now program the behavior of the NextButton. You've already defined the currentQuestionIndex to remember the question the user is on. When NextButton is clicked, the app needs to increment this variable, e.g., change it from 1 to 2 or from 2 to 3, etc., and then use the resulting value to select the new "current" question. For this behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
NextButton.Click	NextButton	When user clicks Next, this event-handler is triggered.
set currentQuestionIndex to	My Definitions	Need to put the first question in QuestionLabel
+ block	Math	Used to increment currentQuestionIndex
global currentQuestionIndex	My Definitions	New value will be old value + 1
number (1)	Math	For the + 1
set QuestionLabel.Text to	QuestionLabel	Need to display the next question here
select list item	Lists	Need to select the first question from QuestionList
global QuestionList	My Definitions	Plug into list slot of call select list item
global currentQuestionIndex	My Definitions	Plug into index slot of call select list item, we want nth item

The blocks should look like this:

How the Blocks Work

The first row of blocks increments the variable currentQuestionIndex. If currentQuestionIndex has a 1 in it, it is changed to 2. If it has a 2, it is changed to 3, and so on. Once the currentQuestionIndex variable has been changed, the app uses it to select the "current" question.

Recall that in the Screen.Initialize event-handler, the app selected the first question to display:

When the NextButton is clicked, the app doesn't choose the first item in the list, or the 2nd or 3rd, it chooses the currentQuestionIndex-th item.

The blocks are executed in a right-to-left manner. The app first evaluates the index parameter of select list item, which is the variable currentQuestionIndex. The number is stored in currentQuestionIndex is used as the index when the select list item is executed.

When the NextButton is clicked for the first time, the increment blocks will set currentQuestionIndex from 1 to 2, so the app will select the second item from QuestionList, "who pitched the first perfect game of 2010?". The second time NextButton is clicked, currentQuestionIndex will be set from 2 to 3, and the app will select the 3rd question in the list, "who pitched the first perfect game of the modern era?"

Test this behavior. Test the behavior of the NextButton to see if the app is working correctly thus far. To test, play the role of the user and click the NextButton on the phone. Does the phone display the second question, "Who pitched the first perfect game of 2010?" It should, and the third question should appear when you click the NextButton again. If this is working, pat yourself on the back quickly, and then go on.

Try clicking the NextButton again (a third time). You should see an error: "Attempting to get item 4 of a list of length 3". The app has a bug-- do you know what the problem is?

The problem with the app is that it always increments the currentQuestionIndex variable when the NextButton is clicked. When currentQuestionIndex is already 3 and the user clicks the NextButton, the app changes currentQuestionIndex from 3 to 4, then calls select list item to get the currentQuestionIndex-th , or in this case, the 4th item. Since there are only three items in the variable QuestionList, Android complains.

What the app needs to do is ask a question-- check a condition-- when the NextButton is clicked, and execute different blocks dependending on the answer. One way to ask the question is to ask, "is the variable currentQuestionIndex already 3?" If the answer is yes, you should set currentQuestionIndex back to 0 so the user is taken back to the first question.

You'll need the following blocks:

Block Type	Drawer	Purpose
if test then-do	Control	To ask if user is on last question
= block	Math	to test if currentQuestionIndex is 3
global currentQuestionIndex	My Definitions	-
number 3	Math	3 is number of items in the list
set currentQuestionIndex to	My Definitions	set to 0 to go back to first question
Number 0	Math	set to 0 because next blocks will increment to 1

The modified NextButton.Click event-handler should look like this:

How the blocks work

When the NextButton is clicked, the app first checks to see if currentQuestionIndex has a 3 in it. If it does, currentQuestionIndex is set back to 0 so that when 1 is added to it with the blocks below, it will be 1 and the quiz will loop back to display the first question. Note that only the blocks inset within the if-test-then-do block are dependent on the condition-- the increment and set QuestionLabel.Text to blocks are executed under all conditions.

Test this behavior. Because variables like currentQuestionIndex are hidden, they are often the source of bugs in a program. Fortunately, App Inventor provides a way to make such hidden variables transparent during testing. Specifically, App Inventor allows you to "watch" how the value of a variable change as an app progresses. For this test, right-click the currentQuestionIndex def block in the Blocks Editor and choose Watch. Then choose Restart Phone App. The def block will then appear with a watch box showing the initial value of currentQuestionIndex (which should be 1):

Now pick up the phone and click the NextButton. The second question, "who pitched the most recent perfect game in the major leagues?" should appear in the QuestionLabel on the phone, as before. On the App Inventor screen, 2 should appear in the currentQuestionIndex memory cell:

When you click again, the third question should appear on the phone and 3 should appear in the memory cell . If you click again, 1 should appear in currentQuestionIndex and the first question on the phone.

A Maintainable App: Making it Easy to Modify the Questions

Next, you'll modify the app to make it easy to add and remove elements from the list. You'll rewrite the blocks so that they'll work on any list, not just one with exactly three items. To begin, add a fourth question to QuestionList and another answer into AnswerList. The blocks should look like this:

Test the modified app. Click the NextButton a number of times. You should see that the fourth question never appears, no matter how many times you click Next.

The problem is that the test to see if the user is on the last question is too specific: it asks if the currentQuestionIndex variable is 3:

You could just change the number 3 to a 4, and the app would again work correctly. The problem with this solution, however, is that each time you modify the questions and answers, you also have to remember to make this change. Such dependencies in a computer program often lead to bugs, especially as an app grows in complexity. It's much better to set the program up so that it will work no matter how many questions there are. Such generality is even more important when the list you are working with changes dynamically, e.g., a quiz app that allows the user to add new questions.

The better solution is to ask the question in a more general way. You really want to know if the current question the user is on-- the value of currentQuestionIndex -- is as large as the number of items in QuestionList. If the app asks the question in this more general manner, it will work even when you add to or remove items from the QuestionList. To modify the NextButton.Click event-handler you'll replace the previous test that referred directly to 3. You'll need the following blocks:

Block Type	Drawer	Purpose
length of list	Lists	asks how many items are in QuestionList
global QuestionList	My Definitions	put into list slot of length of list

Your NextButton.Click event-handler should now appear as:

How the Blocks Work

The if test now compares the currentQuestionIndex to the length of the QuestionList. So if currentQuestionIndex has a 4 in it, and the length of the QuestionList is 4, then the currentQuestionIndex will be set to 0 (and then 1 after the increment operation in the first row of blocks after the if). Note that, because the blocks no longer refer to 3 or any specific size, the behavior will work no matter how many items are in the list.

Test the modified behavior. When you click the NextButton, does the app now sequence through the four questions, moving to the first one after the fourth?

Switching the Image for Each Question

The current app shows the same image, no matter what question is being asked. You can change this so an image pertaining to each question appears when the NextButton is clicked. Earlier, you added four pictures as media for the project. Now, you'll create a third list, PictureList, with the names of the image files as its items. and you'll modify the NextButton.Click event-handler to switch the picture each time.

First, create a PictureList and initialize it with the names of the image files. Be sure that the names are exactly the same as the names of the files that were loaded in to the media of the project. Here's how the blocks for the PictureList should look:

Next, you need to modify the NextButton.Click event-handler so that it modifies the picture depending on what question the user is on. If you set the Image.Picture property to a file name of an image that has been loaded, that image will appear. To modify NextButton.Click, you'll need the following blocks:

Block Type	Drawer	Purpose
set Image1.Picture to	Image1	set this to change the picture
select list item	Lists	need to select the picture corresponding to current question
global PictureList	My Definitions	select a file name from this list
global currentQuestionIndex	My Definitions	select the currentQuestionIndex-th item

Here is how the blocks should look:

How the Blocks Work

The currentQuestionIndex serves as the index for the QuestionList and the currentQuestionIndex is 1, the app selects the first question and the first picture. When currentQuestionIndex is 2, the app selects the second question and second picture. Of course this scheme depends on the lists being in sync and indeed they are. For instance, the first picture, LarsenBerra.jpg, is a picture of Don Larsen, and Don Larsen is the answer to the first question, "Who pitched a perfect game in the World Series?" Test the modified behavior. Does a different image appear each time you click the NextButton?

Evaluating Answers

Next, you'll add blocks that report whether the user has answered a question correctly or not. The user enters the answer in AnswerText and then clicks the AnswerButton. The app must compare the user's entry with the answer to the "current" question, using an ifelse block to check. The RightWrongLabel should be modified to report whether or not the answer is correct. You'll need the following blocks for this behavior:

Block Type	Drawer	Purpose
AnswerButton.Click	AnswerButton	the behavior is triggered when user clicks the AnswerButton
ifelse	Control	if answer is correct, do one thing, else do another
= block	Math	to ask if answer is correct
AnswerText.Text	AnswerText	the user's answer is in this textbox
select list item	Lists	to select the current answer from AnswerList
global AnswerList	My Definitions	The list to select from
global currentQuestionIndex	My Definitions	the question number (and answer number) the user is on
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "correct"	Text	if answer is right
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "incorrect"	Text	if answer is wrong

The blocks should look like this:

How the Blocks Work

The ifelse test reads, "is the user's answer (AnswerText.Text) equal to the currentQuestionIndex-th item in the AnswerList?" If currentQuestionIndex is 1, the app will compare the user's answer with the first item in AnswerList, "Don Larsen". If currentQuestionIndex is 2, the app will compare the user's answer with the second answer in the list, "Dallas Braden", and so on. If the test result is positive, the then-do blocks are executed and the RightWrongLabel is set to "correct!". If the test is false, the else-do blocks are executed and the RightWrongLabel is set to "incorrect".

Test the modified app. Try answering one of the questions. It should report whether or not you answered the question exactly as is specified in the AnswerList. Test with both a correct and incorrect answer (because text is being compared, the test is case-sensitive).

Click the NextButton and answer a second question. Does it still work? It should, but you might notice that when you click the NextButton, the "correct"/"incorrect" text and the previous answer are still there. Though it's fairly innocuous, such user interface issues will definitely be noticed by the users of your app.

To blank out the RightWrongLabel and the AnswerText, you'll put the following blocks within the NextButton.click event-handler:

Block Type	Drawer	Purpose
set RightWrongLabel.Text to	RightWrongLabel	the label to blank out
text (blank)	Text	When Next is clicked, erase old answer critique
set AnswerText.Text to	AnswerText	the user's answer from previous question
text (blank)	Text	When Next is clicked, erase old answer

The blocks should look like this:

How the Blocks Work

When the NextButton is clicked, the user is moving on to the next question, so the top two rows of the event-handler blank out the RightWrongLabel and the AnswerText.

Test this behavior. Answer a question and click Submit, then click the NextButton. Does your previous answer and the apps critique disappear?

Final Program

QuizMe! Final Version:

Package the final version of the app by choosing Package For Phone | Barcode from the Component Designer menu. When the barcode appears, use the barcode scanner on your phone to download and install the app.

Variations

Once you get a quiz working, you might want to explore some variations. For example,

Instead of just showing images for each question, try playing a sound clip or a short video. With sound, you can turn your quiz app into a Name That Tune app.
The quiz is very rigid in terms of what is accepted as a valid answer. There are a number of ways to modify this. One is to use the text.contains block to see if the user's answer is contained in the actual answer. Another is to provide multiple answers for each question, and check by iterating (using foreach) through them to see if any match.
Transform the quiz so that it is multiple-choice. The list of answers will need to be a list of lists, with each sub-list holding the answer choices. Use the ListPicker component to allow the user to choose an answer.

Review

Here are some of the ideas covered in this tutorial:

Apps can be written in a general manner so that they work with any data list.
Index variables are used to track the current position within a list. When you increment them, be careful about reaching the end of the list.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with QuizMe? Return to the other tutorials here.

QuizMe

What you're building

Download Alternate Example Version (Book Chapter PDF)

QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe:

The user steps through a series of questions, clicking a button to proceed to the next question.
The user enters an answer for each question and the app reports whether each answer is correct or not.

This tutorial assumes you are familiar with the basics of App Inventor -- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Getting Started

Connect to the App Inventor web site and start a new project. Name it QuizMe, and also set the screen's Title to "QuizMe". Open the Blocks Editor and connect to the phone.

Also download the following pictures of baseball players and save them on your computer. Later, you'll load these images into your project.

Introduction

You'll design the quiz game so that the user proceeds from question to question by clicking a Next button, and receives simple correct/incorrect feedback on each answer.

This tutorial introduces:

Defining and displaying lists of information.
Sequencing through a list using an index variable -- a variable that keeps track of a position in a list.
Conditional behaviors-- performing certain operations only when a condition is met.
Switching an image to show a different picture at different times.

Set up the Components

Use the component designer to create the interface for QuizMe. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

Next, create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	The picture part of the question
Label	Basic	QuestionLabel	Displays the current question
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Organizes the AnswerPrompt and Text
Label	Basic	AnswerPromptLabel	Text prompting for an anwer
TextBox	Basic	AnswerText	User will enter answer here.
Label	Basic	RightWrongLabel	Correct/Incorrect is displayed here.
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Organizes the AnswerButton and NextButton
Button	Basic	AnswerButton	User clicks to submit an answer
Button	Basic	NextButton	User clicks to proceed to the next answer

Set the properties of the components as described below:

Component	Action
Image1	Set its Picture property to "Larsenberra.jpg". This is the first picture that should appear.
QuestionLabel	Change Text property to "question"
AnswerPromptLabel	Change Text property to "Enter Answer:". On the Viewer screen, move this label into HorizontalArrangement1.
AnswerText	Change Hint to "please enter an answer". On the Viewer screen, move AnswerText into HorizontalArrangement1.
AnswerButton	Change Text property to "Submit". On the Viewer, move the button into HorizontalArrangment2.
NextButton	Change Text property to "Next". Move the button into HorizontalArrangement2.
RightWrongLabel	Change Text property to "correct/incorrect".

Add Behaviors to the Components

Open the Blocks Editor to add the behaviors for the app. First, you'll define two list variables, QuestionList to hold the list of questions, and AnswerList to hold the list of corresponding answers.

To define the two list variables, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the QuestionList variable (rename it)
def variable	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	Used to insert the items of the QuestionList
text (3 of them)	Text	The actual questions
make a list	Lists	Used to insert the items of the AnswerList
text (3 of them)	Text	The actual answers

The blocks should look like this:

Define the Hidden Index Variable

To create the variable currentQuestionIndex, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the currentQuestionIndex variable (rename it)
number (1)	Math	Set the initial value of currentQuestionIndex to 1

The blocks should look like this:

Display the first question

With App Inventor, you select particular items in a list with the select list item block. The block asks you to specify the list and an index--a position in the list. If a list has three items, the indexes 1, 2, and 3 are valid.

For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component.

For this app initialization behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
Screen1.Initialize	Screen1	When the app begins, this event-handler is triggered.
set QuestionLabel.Text to	QuestionLabel	Need to put the first question in QuestionLabel
select list item	Lists	Need to select the first question from QuestionLabel
global QuestionList	My Definitions	The list to select from
number (1)	Math	Select the first question by using an index of 1

The blocks should look like this:

How the blocks work

Test this behavior. Click Restart Phone App (or Connect Phone if not connected). What appears on the phone? If you created the QuestionList as described above, the first item of QuestionList, "Who pitched a perfect game in the World Series?", should appear in the QuestionLabel.

Iterating Through the Questions

Block Type	Drawer	Purpose
NextButton.Click	NextButton	When user clicks Next, this event-handler is triggered.
set currentQuestionIndex to	My Definitions	Need to put the first question in QuestionLabel
+ block	Math	Used to increment currentQuestionIndex
global currentQuestionIndex	My Definitions	New value will be old value + 1
number (1)	Math	For the + 1
set QuestionLabel.Text to	QuestionLabel	Need to display the next question here
select list item	Lists	Need to select the first question from QuestionList
global QuestionList	My Definitions	Plug into list slot of call select list item
global currentQuestionIndex	My Definitions	Plug into index slot of call select list item, we want nth item

The blocks should look like this:

How the Blocks Work

Recall that in the Screen.Initialize event-handler, the app selected the first question to display:

When the NextButton is clicked, the app doesn't choose the first item in the list, or the 2nd or 3rd, it chooses the currentQuestionIndex-th item.

Test this behavior. Test the behavior of the NextButton to see if the app is working correctly thus far. To test, play the role of the user and click the NextButton on the phone. Does the phone display the second question, "Who pitched the first perfect game of 2010?" It should, and the third question should appear when you click the NextButton again. If this is working, pat yourself on the back quickly, and then go on.

Try clicking the NextButton again (a third time). You should see an error: "Attempting to get item 4 of a list of length 3". The app has a bug-- do you know what the problem is?

You'll need the following blocks:

Block Type	Drawer	Purpose
if test then-do	Control	To ask if user is on last question
= block	Math	to test if currentQuestionIndex is 3
global currentQuestionIndex	My Definitions	-
number 3	Math	3 is number of items in the list
set currentQuestionIndex to	My Definitions	set to 0 to go back to first question
Number 0	Math	set to 0 because next blocks will increment to 1

The modified NextButton.Click event-handler should look like this:

How the blocks work

Test this behavior. Because variables like currentQuestionIndex are hidden, they are often the source of bugs in a program. Fortunately, App Inventor provides a way to make such hidden variables transparent during testing. Specifically, App Inventor allows you to "watch" how the value of a variable change as an app progresses. For this test, right-click the currentQuestionIndex def block in the Blocks Editor and choose Watch. Then choose Restart Phone App. The def block will then appear with a watch box showing the initial value of currentQuestionIndex (which should be 1):

Now pick up the phone and click the NextButton. The second question, "who pitched the most recent perfect game in the major leagues?" should appear in the QuestionLabel on the phone, as before. On the App Inventor screen, 2 should appear in the currentQuestionIndex memory cell:

When you click again, the third question should appear on the phone and 3 should appear in the memory cell . If you click again, 1 should appear in currentQuestionIndex and the first question on the phone.

A Maintainable App: Making it Easy to Modify the Questions

Test the modified app. Click the NextButton a number of times. You should see that the fourth question never appears, no matter how many times you click Next.

The problem is that the test to see if the user is on the last question is too specific: it asks if the currentQuestionIndex variable is 3:

Block Type	Drawer	Purpose
length of list	Lists	asks how many items are in QuestionList
global QuestionList	My Definitions	put into list slot of length of list

Your NextButton.Click event-handler should now appear as:

How the Blocks Work

Test the modified behavior. When you click the NextButton, does the app now sequence through the four questions, moving to the first one after the fourth?

Switching the Image for Each Question

Block Type	Drawer	Purpose
set Image1.Picture to	Image1	set this to change the picture
select list item	Lists	need to select the picture corresponding to current question
global PictureList	My Definitions	select a file name from this list
global currentQuestionIndex	My Definitions	select the currentQuestionIndex-th item

Here is how the blocks should look:

How the Blocks Work

Evaluating Answers

Block Type	Drawer	Purpose
AnswerButton.Click	AnswerButton	the behavior is triggered when user clicks the AnswerButton
ifelse	Control	if answer is correct, do one thing, else do another
= block	Math	to ask if answer is correct
AnswerText.Text	AnswerText	the user's answer is in this textbox
select list item	Lists	to select the current answer from AnswerList
global AnswerList	My Definitions	The list to select from
global currentQuestionIndex	My Definitions	the question number (and answer number) the user is on
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "correct"	Text	if answer is right
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "incorrect"	Text	if answer is wrong

The blocks should look like this:

How the Blocks Work

Test the modified app. Try answering one of the questions. It should report whether or not you answered the question exactly as is specified in the AnswerList. Test with both a correct and incorrect answer (because text is being compared, the test is case-sensitive).

Click the NextButton and answer a second question. Does it still work? It should, but you might notice that when you click the NextButton, the "correct"/"incorrect" text and the previous answer are still there. Though it's fairly innocuous, such user interface issues will definitely be noticed by the users of your app.

To blank out the RightWrongLabel and the AnswerText, you'll put the following blocks within the NextButton.click event-handler:

Block Type	Drawer	Purpose
set RightWrongLabel.Text to	RightWrongLabel	the label to blank out
text (blank)	Text	When Next is clicked, erase old answer critique
set AnswerText.Text to	AnswerText	the user's answer from previous question
text (blank)	Text	When Next is clicked, erase old answer

The blocks should look like this:

How the Blocks Work

When the NextButton is clicked, the user is moving on to the next question, so the top two rows of the event-handler blank out the RightWrongLabel and the AnswerText.

Test this behavior. Answer a question and click Submit, then click the NextButton. Does your previous answer and the apps critique disappear?

Final Program

QuizMe! Final Version:

Variations

Once you get a quiz working, you might want to explore some variations. For example,

Instead of just showing images for each question, try playing a sound clip or a short video. With sound, you can turn your quiz app into a Name That Tune app.
The quiz is very rigid in terms of what is accepted as a valid answer. There are a number of ways to modify this. One is to use the text.contains block to see if the user's answer is contained in the actual answer. Another is to provide multiple answers for each question, and check by iterating (using foreach) through them to see if any match.
Transform the quiz so that it is multiple-choice. The list of answers will need to be a list of lists, with each sub-list holding the answer choices. Use the ListPicker component to allow the user to choose an answer.

Review

Here are some of the ideas covered in this tutorial:

Apps can be written in a general manner so that they work with any data list.
Index variables are used to track the current position within a list. When you increment them, be careful about reaching the end of the list.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Or download the apk

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with QuizMe? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

Pizza Party with Fusion Tables

aaron — Fri, 14 Jun 2013 16:09:56 +0000

This tutorial introduces:

Using the FusionTables component
Using a WebViewer component

Creating your own Fusion Table

Creating your own Fusion Tables is as easy as creating a Google document, if you are familiar with that process.

On the web, login to your Gmail account or any other Google service (e.g., Drive, YouTube).
Select the More > Even more menu and scroll to the bottom of the page of Google services where you will find the Fusion Tables service under "Innovation", click on the Fusion Tables link.
Click "Create New Table"
You will be given three options for the new table: "From this computer", "Google Spreadsheets", or "Create an empty table". For the purposes of this tutorial, select Create an empty table.
You will see that the new table automatically comes with four columns. Change the column names for your Pizza app by going to Edit > Change Columns.You'll rename the four default columns to Date (type=Date), Name (type=Text), Pizza (type=Text), Drink (type=Text). Click save and then add a fifth column by going to the Edit > Add Column. Name this fifth column Comment (type=Text). .
Leave this window open so that you can come back and get the URL, which you'll need when you set up the properties of the WebViewer component in your app.
Click on the Share button (top right) to modify the table's permissions. For this tutorial, you can specify a few friends who will use the app. Only people who are explicitly given permission will be able to enter pizza party preferences through your app.

Another way to create a new table: go to Google Drive. Click the Create button, then go to More > Fusion Table. The picture at right shows what the Create button's menu should look like. If you do not see Fusion Table in your menu, then you may need to contact your school's network administrator. (See Troubleshooting section at the bottom of this page.)

NOTE about Sharing Fusion Tables: To share a FusionTable with others, you have to invite each person individually, the same way you would share a private google doc. There is no way to share write privileges to a FusionTable with the public. Public access is restricted to read-only.

Getting an API Key

In order to use the FusiontablesControl Component you need to acquire a Google Applications Programming Interface (API) key, an API Key. To get an API key, follow these instructions:

Go to your Google APIs Console and login if necessary.
Select the Services item from the menu on the upper left.
In the list of services, find the Fusion Tables API service and click the toggle button that currently says "off".
Read and agree to the terms of service. When you return to the APIs Console page you'll see that the on/off switch next to Fusion Tables API is now "On" and green.
Go back up the menu on the upper left of the screen and select the API Access item.
Your API Key will be in the rectangular box in the section called "Simple API Access". You will need set the "API Key" property of the Fusiontables Control component in any app that you make that uses Fusion Tables. (More info below.)

Building the App

The User Interface

The components are:

Component Type	Palette Group	What you'll name it	Purpose of Component	Settings of Component
Label	Basic	LabelName	Shows the text "Your Name:"
TextBox	Basic	TextBoxUserName	Gets input from user	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Contains Name Label and Textbox
ListPicker	Basic	ListPickerPizza	Accesses the list of available pizza types	Set the Width property to Fill Parent Set the Text property to "What type of pizza?" Set the ElementsFromString to "Cheese, Pepperoni, Anchovies, Hawaiian"
ListPicker	Basic	ListPickerDrink	Accesses the list of available drinks.	Set the Width property to Fill Parent Set the Text property to "What type of drink?" Set the ElementsFromString to "Coke, Diet Coke, Sprite, Ginger Ale"
Label	Basic	LabelComment	Shows the text "Comments:"
TextBox	Basic	TextBoxComments	Takes user input	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Contains Comments Label and Textbox
Button	Basic	ButtonSubmit	Adds new data to the public fusion table	Set the Text to "Submit" Set the width property to Fill Parent
WebViewer	Not ready for prime time	WebViewer1	Displays Fusion Table	Set width and height properties to Fill Parent
FusiontablesControl	Not ready for prime time	FusiontablesControl1	Manages interactions with the app's Fusion Table
Clock	Basic	Clock1	Used to provide a timestamp each time an order is placed.
Notifier	Other stuff	Notifier1	Notifies the user of any errors

Determining your Fusion Table URL and Table ID

In the blocks editor, you will set the WebViewer component's HomeURL property to point to the URL of your table. To find your Fusion Table's URL:

In your browser, navigate to the new Fusion Table you just created.
Go to the menu and select Tools > Publish.
You'll see a notice saying: "This table is private and will not be visible". Click the blue link that says "Change Visibility".
In the list of "Who Has Access", click the blue "Change..." link next to "Private - Only people listed below..."
Choose"Public on the Web" or "Anyone with the link". Either of these settings will work for this tutorial. In the future, you should decide this setting based on the sensitivity of your data.
Click the green Save button, then the blue Done button.
Back on the Fusion Table page, go to the menu bar and select Tools > Publish. Select the URL from the top text box (labeled "Send in an email or IM"), copy the URL and return to App Inventor. You will paste the URL into the definition block for the TABLE_URL (see below).
The Table ID of the fusion table is contained within the URL after the plus sign. Look for "from+" and then copy all of the characters after the plus. This is the Table's ID. You can also find the Table ID by browsing to your table, then selecting File>About this table in the menu.

Blocks Editor

Variable Name	Initial Value	Purpose
TABLE_URL	text	Initialize this global variable to the "published" URL of your fusion table. See instructions above.
TABLE_ID	text	Initialize this global variable to your table ID (e.g. a long string of characters unique to your fusion table). See instructions above.
API_KEY	text	Initialize this global variable to your own API Key for Google Fusion Tables. See instructions above.
UserName	text	Records the name of the user.
pizza	text	Stores the pizza choice input by the user.
drink	text	Stores the drink choice input by the user.
comment	text	Stores the comment input by the user.

Initializing the App

Set up the resetForm procedure as shown below. After recording an entry, this procedure resets the interface back to the original state.

List Picker Blocks

Submitting Data

Once the user has entered their name, food choices, and comments, they will click the Submit button. The app tests to make sure that the name, pizza, and drink fields have values in them, and prompts the user to try again if any of the required answers are missing. Notice that the text = block is used (find it under Built-in palette, Text drawer). This block compares two strings of text to see if they are equal. Do not use the math "equals" block. If all required information is present, it calls the procedure InsertDataInTable (see below). The blocks for the ButtonSubmit.Click are shown here:

Inserting Data into the Fusion Table

This procedure involves two steps: (1) constructing the insert query and then (2) sending the query to Google's Fusion Table service. The query we want to send will take this format:

INSERT INTO
(, , ...) VALUES (, , ...)

INSERT INTO 191GHtZ_B2 (Name, Date) VALUES ('Sam', '10/10/2012')

To construct the query we use App Inventor's make text block. Be sure to put spaces where needed, such as before and after the words INSERT INTO and VALUES:

Don't forget the FusiontablesControl.SendQuery command at the very end of this procedure. It's small in size compared to rest of the procedure, but very important.

Handling the Response from the Fusion Tables Service

Challenges

This app has the Fusion Table hard-coded into the blocks. Find a way to let users specify their own fusion table ID so that they can host their own Pizza Party.

Variations

Now that you have a simple app that uses fusion tables and a webviewer working, you might want to build some other apps with Fusion Tables. For example:

Include a LocationSensor so that the user's location can be added to the Fusion Table to create a map with notes
Make the WebViewer display something other than the table of stored values; perhaps a map or a chart

Troubleshooting

Done with PizzaParty? Return to the other tutorials.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.