Explore MIT App Inventor - App Inventor 1

Get the Gold

aaron — Fri, 28 Jun 2013 21:35:19 +0000

What You're Building

By building the Get The Gold App you will get practice with setting visibility, using Clock components and Timers, and detecting collisions in App Inventor. You'll program an application that has a pirate ship whose goal is to collect all the gold on the screen.

Getting Started

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

Introduction

This tutorial introduces the following skills, useful for future game development:

Using the Clock component
Using Clock.Timer to move sprites
Using Sprite.Flung to move a sprite
Using collision detection

Getting Ready

For this game, you will have two types of imagesprites: pirate and gold coin. Click below to download the image file for your sprites.

Set up the Components

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

To create this interface, put the following components into the Designer by dragging them from the Component Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	Canvas1	The background that we will be putting our imagesprites on
ImageSprite	Animation	PirateSprite	The pirate ship in our game
ImageSprite	Animation	ImageSprite2	One of the gold coins in the game
ImageSprite	Animation	ImageSprite3	One of the gold coins in the game
ImageSprite	Animation	ImageSprite4	One of the gold coins in the game
ImageSprite	Animation	ImageSprite5	One of the gold coins in the game
ImageSprite	Animation	ImageSprite6	One of the gold coins in the game
Clock	Basic	Clock1	We use the Clock for its Timer method to move the coins
Button	Basic	ResetButton	To reset the game so the player can play again

Set the properties of the components as described below:

Component	Action
ResetButton	Change Text property to "Reset".
PirateSprite	Change Speed property to 6.	Upload the pirateship image and set Picture property to pirateship.
ImageSprite(2,3,4,5,6)	Upload the goldcoin image and set Picture property to goldcoin.
Clock	Change TimerInterval property to 2000.

Moving the Pirate

To move the PirateSprite, we want the user to be able to "fling" the sprite in the direction that they choose. To do this, we will use the PirateSprite.Flung event handler.

You may notice that PirateSprite.Flung takes in 6 attributes: x, y, xvel, yvel, speed, and heading. We want to reassign PirateSprite's current heading to the heading given to us from PirateSprite.Flung. This means that the user can now control the direction of the pirate ship with their fingers by flinging on the screen.

To prevent the pirate from moving off the screen, we will also use PirateSprite.Bounce when an edge is reached.

Moving the Coins

We want the coins to move to random positions on the screen. We will use Clock1.Timer and the ImageSprite's MoveTo method to do this.

When the Clock1.Timer goes off, we want all of our gold coin ImageSprites to move to a new random location on the Canvas. We will do this by using the Sprite.MoveTo block.

MoveTo takes in two arguments: the x and y coordinates on the canvas of the new position we want the sprite to move to. We want the Sprite to move to a new random location so we will use the random integer block found in the Math box. Since we want each Gold ImageSprite to move to a new location, we repeat this process for each sprite's MoveTo function.

For ImageSprite2, we want x to be a random integer from 0 to Canvas1.Width-ImageSprite2.Width and y to be a random integer from 0 to Canvas1.Height-ImageSprite2.Height. This is to be repeated for all the Gold Image Sprites.

Remember that sprites are measured at the upper left corner as (0,0) so if we don't want them to go off the screen, we need to take the sprite's height/width into account when setting the range for our random numbers.

We will do this by setting up our blocks as in the image below:

Detecting Collisions

App Inventor detects collisions by checking for an intersection between the bounding rectangles of each ImageSprite. We call this rectangle-based collision detection. As you can see in the image below, sprites with circular or polygon shape will appear to collide because of the rectangular bounds around them when they might not actually be colliding.

We can use the PirateSprite.CollidedWith event handler to detect whenever the pirate ship collides with another sprite or gold coin. You may notice that PirateSprite.CollidedWith takes in an argument. This argument is the object that PirateSprite just collided with. We will be testing inside the handler for which object so the name of this argument is not significant. You can name it other.

Whenever the pirate collides with a gold coin, we want the coin to disappear. We can do this by setting the coin's visibility to false. To find which coin the pirate collided with, we will use the PirateSprite.CollidingWith.

We can use PirateSprite.CollidingWith to take in a component (each of the gold coin sprites) to detect which sprite was hit. This is a component block and NOT a text block with the words ImageSprite inside. The component block can be found in the drawer for each component. If a sprite was hit, we will set its visibility to false.

Reset Button

After the user hits all of the gold sprites with the pirate ship, none of them will be visible. The reset button should set all of the gold sprites' visibility to true.

Complete Program

Here's the complete GetTheGold program.

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 this program running, you may want to do the following additional features to extend it. For example,

Create a label to display the time that it took you to get all the gold
Change the speed of the ship or gold coins
Add an enemy sprite that when collided with, causes your pirate to lose speed
Use one of the phone's sensors to control movement of the pirate ship

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.

Done with GetTheGold? Return to to the other modules here or the tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

MoleMash 2

aaron — Wed, 26 Jun 2013 19:45:48 +0000

What You're Building

Download Refined Version (Book Chapter PDF)

This tutorial shows you how to build a game similar to the Whac-A-MoleTM arcade game. Specifically, your goal is to whack (tap) a mole that randomly pops out of one of five fixed holes. Every time you succeed, your score is increased by one point.

In order to highlight new App Inventor features — the Advanced tab and Sprite Z-layering — this app takes a different approach than the original Mole Mash tutorial, which you need not have read in order to do this one. You should, however, be 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.

Introduction

This tutorial includes:

Creating a list of components
Using functionality from the Advanced section of the Blocks Editor to get and set properties of arbitrary components
Having game events controlled by the Clock component
Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another

Getting Started

Connect to the App Inventor web site and start a new project. Set the screen's Title property to an appropriate name, such as "Mole Mash". Open the Blocks Editor and connect it to the phone. Download these image files (created by Yun Miao) by right-clicking on them, then add them to the project by pressing the "Add..." button in the Media pane.

Set up the Components

The user interface will contain a total of 6 ImageSprites: 5 unmoving holes and 1 mole, which will move on top of the holes. Use the component designer to create the user interface. When you are done, it should look something like the picture below. Don't worry about lining up the holes evenly. You will specify their locations through their X and Y properties. Additional instructions are below the picture.

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
Canvas	Basic	GameCanvas	The game field
ImageSprite (5)	Animation	Hole1 ... Hole5	Holes from which the mole can appear
ImageSprite	Animation	Mole	The mole
HorizontalArrangement	Screen Arrangement	ScoreArrangement	To display the score
Label	Basic	ScoreTextLabel	To hold "Score: "
Label	Basic	ScoreValueLabel	To hold the score (# of times the mole was hit)
Clock	Basic	MoleClock	To control the mole's movement
Sound	Media	Buzzer	To vibrate when the mole is touched

Make the following changes to the components' properties:

Component	Action
Canvas1	Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.
Hole1	Set X to 20 and Y to 60 (upper left).
Hole2	Set X to 130 and Y to 60 (upper center).
Hole3	Set X to 240 and Y to 60 (upper right)
Hole4	Set X to 75 and Y to 140 (lower left).
Hole5	Set X to 185 and Y to 140 (lower right).
Mole	Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which have the default Z value of 1.
ScoreTextLabel	Set Text to "Score: ".
ScoreTextValue	Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks Editor.

Add Behaviors to the Components

Here is an overview of what we need to create blocks to do:

Create variables:
1. holes: a list of holes
2. currentHole: the hole the mole is currently coming out of
When the app starts:
1. Populate the list of holes.
2. Set each hole's Picture property to "hole.png".
3. Call procedure MoveMole (below).
Create a procedure MoveMole to:
1. Set currentHole to a random hole from the list holes.
2. Move the mole to the location of currentHole.
Make MoleClock call MoveMole whenever its timer goes off (every second).
Implement a handler that does the following when the mole is touched:
1. Add one to the score.
2. Make the phone briefly vibrate.
3. Call MoveMole.

To proceed, open the Blocks Editor.

Creating Variables

Create the variables holes and currentHole. For now, we will give them "dummy" initial values; we'll set their real initial values in the Screen1.Initialize event handler, which is run when the app starts. (For technical reasons, components cannot be referred to in def blocks, which are run before the app has started.) Here is a picture and list of the blocks you will need:

Block type	Drawer	Purpose
def variable as (holes)	Definition	Hold a list of holes.
make a list	Lists	Create an empty list, to be filled in when the program starts.
def variable as (currentHole)	Definition	Hold the mole's current hole.
number (0)	Numbers	Provide a required initial value for currentHole.

As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App

The first event to occur in any program in Screen1.Initialize, so we will put start-up code in that handler. Specifically, we will add the hole components to the list holes, set each hole's Picture property to "hole.png", and call MoveMole. Since we have not yet written MoveMole, we will create an empty procedure with that name, which we will fill in later.

Below are a picture and table of the blocks you need to create. Note that the "Any ImageSprite" drawer is found under the "Advanced" tab to the right of "Built-In" and "My Blocks" in the Blocks Editor.

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Specify what should happen when the app starts.
add items to list	Lists	Add the following values to...
holes	My Definitions	...the list of holes:
component Hole1	Hole1	-the upper left hole
component Hole2	Hole2	-the upper center hole
component Hole3	Hole3	-the upper right hole
component Hole4	Hole4	-the lower left hole
component Hole5	Hole5	-the lower right hole
foreach	Control	Specify that we would like...
name (hole)	Definitions	...a variable named "hole"...
holes	My Definitions	...to take on each of the values in the list holes .
ImageSprite.Picture	Any Image Sprite	Set the Picture property of...
value hole	My Definitions	...the ImageSprite referred to by the variable hole ...
text (hole.png)	Text	...to the picture of the empty hole.
to procedure (MoveMole)	Definition	Create an procedure, to be filled in later, for moving the mole.
MoveMole	My Definitions	Call MoveMole to make the first placement of the mole.

Compare the foreach block to the equivalent blocks that would be necessary without it:

Not only is the left set of blocks shorter, it is less repetitious, sparing the programmer from semi-mindless copy-and-pasting and making it easier to modify, for example, if the name of the picture is changed.

Moving the Mole

Now let's fill in the body of the procedure MoveMole, which we'll call when the program starts, when the mole gets touched, and when our timer goes off every second. What we want it to do is to pick a random hole and move the mole on top of it. Here are a picture and list of the new blocks:

Block type	Drawer	Purpose
set currentHole to	My Definitions	Save the...
call pick random item	Lists	...randomly selected...
holes	My Definitions	...hole.
call Mole.MoveTo	Mole	Move the mole to the...
ImageSprite.X	Advanced/ImageSprite	..x-coordinate of...
currentHole	My Definitions	...the chosen hole...
ImageSprite.Y	Advanced/ImageSprite	...and the y-coordinate of...
current Hole	My Definitions	...the chosen hole.

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just need two blocks to accomplish that:

Block type	Drawer	Purpose
MoleClock.Timer	MoleClock	When the timer goes off...
call MoveMole	My Definitions	...move the mole.

Registering Touches

Finally, we need to specify what happens when the mole is touched. Specifically, we want to:

Increment the score.
Make the phone vibrate briefly.
Move the mole.

We can easily translate these to blocks:

Block type	Drawer	Purpose
Mole.Touched	Mole	When the mole is touched...
set ScoreValueLabel.Text to	ScoreValueLabel	...update the visible score to...
block	Math	...the result of adding...
number (1)	Math	...1 [and]...
ScoreValueLabel.Text	ScoreValueLabel	...the previous score.
call Buzzer.Vibrate	Buzzer	Make the phone vibrate for...
number (100)	Math	...100 milliseconds.
call MoveMole	My Definitions	Move the mole to a new location.

Final Program

Variations

Here are some variations you might want to implement:

Adding a Reset button to set the score back to 0.
Having the score depend not just on the number of hits but also the number of misses and escaped moles.
Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the player is doing poorly.
Adding a second mole on a different timer.

You can see how to implement the first two variations in the original Mole Mash tutorial.

Review

Here are some of the ideas covered in this tutorial:

Putting components in a List.
Performing an operation on every component in a List using the foreach block and Advanced features.
Placing an ImageSprite on top of another, using their Z properties to control which goes in front.
Using the Clock component to control game play.
Creating a procedure and calling it from multiple places.

Done with MoleMash 2? Return to the other tutorials here.

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.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

VideoWall

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

What you're building

The VideoWall app tutorial demonstrates how you can control the size of a video playing in an app by using the Video Player component's Width, Height, and FullScreen features. The VideoWall uses media assets (videos stored in the app itself), but you can use the app to display videos from the internet as well.

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.

Getting Started

Connect to the App Inventor web site and start a new project. Name the new project VideoWall and set the screen's Orientation to Landscape.

Download the following video files* for use later on:

*Attributions for these videos are included at the end of this tutorial.

Introduction

The finished VideoWall app will display a wall of three videos that can be expanded to their true size and then shrunk back down again. The app will also allow you to display the videos in fullscreen. This tutorial assumes you have followed earlier tutorials to learn how the following blocks work:

Variables
Procedures
Button.Click blocks
Logic (if-else) blocks

This tutorial introduces the following:

Using Advanced blocks
Resizing the VideoPlayer
Showing the VideoPlayer video in fullscreen mode

Set up the Components

Use the component designer to create the interface for the VideoWall. When completed, the designer should look similar to the snapshot below.

First, you need to upload the video files. Click on the Add... button and select a video file downloaded earlier. Repeat this step to add the other two video files. Now create the interface by dragging and dropping the components from the Palette to the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Holds all other components: makes the three vertical arrangements line up side by side
VerticalArrangement	Screen Arrangement	VerticalArrangement1	Holds the left-most VideoPlayer and controls
VerticalArrangement	Screen Arrangement	VerticalArrangement2	Holds the middle VideoPlayer and controls
VerticalArrangement	Screen Arrangement	VerticalArrangement3	Holds the right-most VideoPlayer and controls
VideoPlayer	Media	VideoPlayer1	Displays the BigBuckBunny video
VideoPlayer	Media	VideoPlayer2	Displays the NASA video
VideoPlayer	Media	VideoPlayer3	Displays the Sintel video
Button	Basic	ResizeButton1	Resizes VideoPlayer1
Button	Basic	ResizeButton2	Resizes VideoPlayer2
Button	Basic	ResizeButton3	Resizes VideoPlayer3
Button	Basic	FullScreenButton1	Shows the VideoPlayer1 video in fullscreen
Button	Basic	FullScreenButton2	Shows the VideoPlayer2 video in fullscreen
Button	Basic	FullScreenButton3	Shows the VideoPlayer3 video in fullscreen

Set the properties as described below:

Component	Action
HorizontalArrangement1	Set Width to Fill parent...
VerticalArrangement1, VerticalArrangement2, and VerticalArrangement3	Set Width to Fill parent...
ResizeButton1, ResizeButton2, and ResizeButton3	Set Text to "Grow" and set Width to Fill parent...
FullScreenButton1, FullScreenButton2, and FullScreenButton3	Set Text to Show FullScreen and set Width to Fill parent...
VideoPlayer1	Set Source to bigbuckbunny.3gp , set Width to Fill parent... , and set Height to 36 pixels
VideoPlayer2	Set Source to nasa.3gp , set Width to Fill parent... , and set Height to 36 pixels
VideoPlayer3	Set Source to sintel.3gp , set Width to Fill parent... , and set Height to 36 pixels

Add Behaviors to the Components

The interface is complete, but the buttons don't resize the videos yet. Open the Blocks Editor to add the behavior to the buttons. First, you'll define three variable blocks to keep track of the size of the VideoPlayers:

Block Type	Drawer	Purpose
def variable	Definition	Defines the vid1_zoomed variable (rename it)
def variable	Definition	Defines the vid2_zoomed variable (rename it)
def variable	Definition	Defines the vid3_zoomed variable (rename it)

The three variables should like this:

Create the resizeVideoPlayer Procedure block. There are three VideoPlayers in the app, but you'll use one Procedure block to resize all three. To accomplish this simplicity, you will use the Advance blocks component Any VideoPlayer blocks. Create the resizeVideoPlayer Procedure block using the following blocks:

Block Type	Drawer	Purpose
Procedure	Definition	Defines the resizeVideoPlayer procedure
name (x5)	Definition	Defines the VideoPlayer argument for the resizeVideoPlayer procedure
name (x2)	Definition	Defines the zoomed argument for the resizeVideoPlayer procedure
name (x3)	Definition	Defines the button argument for the resizeVideoPlayer procedure
ifelse	Control	Defines the ifelse block that chooses whether the VideoPlayer is shrunk or expanded
= block	Logic	Defines the equals block for testing if the zoomed block is true
true	Logic	Defines the block that zoomed is compared to
VideoPlayer.Width (x2)	Any VideoPlayer	Sets the VideoPlayer Width to a number
Number (-1) (x2)	Math	Width to set VideoPlayer to
VideoPlayer.Height (x2)	Any VideoPlayer	Sets the VideoPlayer Height to a number
Number (x2), values of 26 and 144	Math	Height to set VideoPlayer to
Button.text	Any Button	Changes the button text
Text	Text	Text to set button to. Make one text block text's Shrink and the other's Grow.

The resizeVideoPlayer block should look like the following:

The resizeVideoPlayer block will be explained later after you create the blocks for responding to button clicks.

Create the Click Blocks

The blocks you will create respond to clicks on the ResizeButton buttons. To build the three blocks, you will need the following blocks:

Block Type	Drawer	Purpose
ResizeButton1.Click	ResizeButton1	Defines the block for responding to clicks on ResizeButton1
ResizeButton2.Click	ResizeButton2	Defines the block for responding to clicks on ResizeButton2
ResizeButton3.Click	ResizeButton3	Defines the block for responding to clicks on ResizeButton3
ResizeVideoPlayer (x3)	My Definitions	Starts the resizeVideoPlayer block for resizing a VideoPlayer
not (x3)	Logic	Defines the block for switching the various zoomed block values
set global vid1_zoomed	My Definitions	Sets the vid1_zoomed block to a different value
set global vid2_zoomed	My Definitions	Sets the vid2_zoomed block to a different value
set global vid3_zoomed	My Definitions	Sets the vid3_zoomed block to a different value
global vid1_zoomed	My Definitions	Used to change the vid1_zoomed value.
global vid2_zoomed	My Definitions	Used to change the vid2_zoomed value.
global vid3_zoomed	My Definitions	Used to change the vid3_zoomed value.
component ResizeButton1	ResizeButton1	Passed to the resizeVideoPlayer procedure
component ResizeButton2	ResizeButton2	Passed to the resizeVideoPlayer procedure
component ResizeButton3	ResizeButton3	Passed to the resizeVideoPlayer procedure
component VideoPlayer1	VideoPlayer1	Passed to the resizeVideoPlayer procedure
component VideoPlayer2	VideoPlayer2	Passed to the resizeVideoPlayer procedure
component VideoPlayer3	VideoPlayer3	Passed to the resizeVideoPlayer procedure

The blocks should look like the following:

Most blocks in App Inventor require you to know exactly what component your app will manipulate when you design the app. For some apps, you will have several of the same type of component and you want to program the same behavior for all of the similar components (like the VideoPlayer blocks in this app). The blocks in the Advanced section allow you to build some general manipulation on some type of component. When you built the resizeVideoPlayer procedure block, you didn't know specifically which VideoPlayer would be used in the procedure. The resizeVideoPlayer works on VideoPlayers; but not until the resizeVideoPlayer block is used in the ResizeButton1.Click block (for example) is the specific VideoPlayer known.

Note: The VideoWall app could have been designed with a specific resizing procedure for each VideoPlayer. By using the Advanced blocks in a single resizing procedure, the app is much simpler.

How the Blocks Work

Setting the Width and Height property for a VideoPlayer works exactly the same way as setting the Width and Height of a Button. For whatever positive number is set, the video playing will resize its appearance to fit that value. There are two values that are exceptions to the using positive values rule: -1 and -2. Setting VideoPlayer.Width or VideoPlayer.Height to -1 is like setting the Width or Height to Fill parent in the designer. Setting VideoPlayer.Width or VideoPlayer.Height to -2 is like setting the Width or Height to Automatic in the designer.

Warning: You can set the VideoPlayer Width and Height to any positive number you want. The VideoPlayer will change its size to match the values you set; but on some devices, the VideoPlayer does not change its size correctly. The behavior on such devices is usually unpredictable.

Test this behavior. Click on the Grow button below the BigBuckBunny video. The video's size should expand, and the text of the button should change to "Shrink". Click on the Shrink button below the BigBuckBunny video. The video's size should shrink back to its original size and the text should change back to "Grow".

Create the blocks for showing fullscreen video

You will now add the blocks for showing the videos in fullscreen mode. Use the following blocks:

Block Type	Drawer	Purpose
true (x3)	Logic	Value to set FullScreen as
FullScreenButton1.Click	FullScreenButton1	Responds to clicks on FullScreenButton1
set VideoPlayer1.FullScreen	VideoPlayer1	Used to show fullscreen video
FullScreenButton2.Click	FullScreenButton2	Responds to clicks on FullScreenButton2
set VideoPlayer2.FullScreen	VideoPlayer2	Used to show fullscreen video
FullScreenButton3.Click	FullScreenButton3	Responds to clicks on FullScreenButton3
set VideoPlayer3.FullScreen	VideoPlayer3	Used to show fullscreen video

The blocks should look like the following:

How the Blocks Work

The VideoPlayer.FullScreen block takes a true/false value (also called a boolean) to tell it whether to go full screen or not. Setting a VideoPlayer.FullScreen block to true causes that VideoPlayer to be displayed in fullscreen mode. If there is another VideoPlayer in fullscreen mode, that VideoPlayer's .FullScreen value is set to false and it is replaced with the current VideoPlayer. If a VideoPlayer.FullScreen is true, setting a VideoPlayer.FullScreen block to false causes the fullscreen mode to be exited and the app's interface to display. Test this behavior. Start playing the BigBuckVideo, and click on the Show FullScreen button below the BigBuckBunny video. The app's interface should disappear and some media controls with the BigBuckBunny video should appear. Use the Back button on your device or the emulator to exit fullscreen. The app's interface should appear.

Final Program

VideoWall Final Version

Variations

Now that you have finished the first VideoWall app, you might want to build some variations. For example:

Get more video files and add a second row to create a real VideoWall
Use videos from an online server.
Expand the resizeVideoPlayer procedure to resize VideoPlayers by small increments to create an animation effect. You could use multiple Clocks to start the resizeVideoPlayer procedure and animate multiple VideoPlayers at once.

If you distribute your app to others, make sure you respect any license requirements for the videos you use.

Below are the attributions to the video files included in this demo app. The creators of the source videos that these clips are from do not endorse App Inventor.

Video File	Information	Attribution
bigbuckbunny.3gp	A clip from the full length film	(c) copyright 2008, Blender Foundation / http://www.bigbuckbunny.org
nasa.3gp	A formatted version of the Mars' Whirling Dust Devil clip.	Here is the original video.
sintel.3gp	A clip from the full length film	(c) copyright Blender Foundation \| http://durian.blender.org

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 is grateful to Vance Turnewitsch for developing this tutorial.

Done with VideoWall? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

Video

StockQuotes

aaron — Fri, 14 Jun 2013 16:23:17 +0000

StockQuotes

What You're Building

Just like you can access web pages from your phone -- for example, to look up a stock price -- so can App Inventor. This app enables the user to enter a stock symbol, then looks up the price of the stock on Yahoo! Finance and displays the price on the phone.

This tutorial assumes that 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.

Introduction

This tutorial includes

Accepting text input from the user to specify the stock symbol.
Using the Web component to ask Google Finance for the latest price for the stock.
Displaying the result.

Getting Started

Connect to the App Inventor web site and start a new project. Name it StockQuotes, and also set the screen’s Title to “Stock Quotes”. Open the Blocks Editor and connect it to the phone.

Set up the Components

Use the component designer to create the user interface. When you are done, it should look something like the picture below. Additional instructions are below the picture.

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
TextBox	Basic	StockSymbolTextBox	Where the user enters the stock symbol
Button	Basic	GetQuoteButton	To request the stock quote
Label	Basic	ValueLabel	To display the stock quote
Web	Other stuff	Web1	To request and receive the stock quote

Stick with the default properties except for the following changes:

Component	Action
StockSymbolTextBox	Set its Hint property to "Enter a stock symbol". Clear its Text property by deleting or backspacing over the contents.
GetQuoteButton	Set its Text property to "Get Stock Quote".
ValueLabel	Clear its Text property.

The Yahoo! Finance API

Many web services provide an application programmer interface (API) for developers to enable their programs to access the service. Some ways to discover APIs are through the website http://programmableweb.com or just by doing a web search for the service name and “API”.

The Yahoo! Finance API is documented in gory detail at http://www.gummy-stuff.org/Yahoo-data.htm . The highlights are that you can get the latest price for the stock with the symbol "GOOG", for example, with the URL http://finance.yahoo.com/d/quotes.csv?f=l1&s=GOOG . The section "f=l1" (lower-case letter L, followed by the number 1) says we would like the latest price, and the section “s=GOOG” says we would like information about the stock whose symbol is “GOOG”. The result is returned in comma-separated value (CSV) format, which you may be familiar with from spreadsheets. Since only one value will be returned for our query, the result will be a plain old number, such as “511.5”, without any commas. (Commas would be used if we requested multiple pieces of data from Yahoo!, such as the name of the company and the daily trade volume.)

Add Behaviors to the Components

Requesting the Data

The blocks to make the web request are shown here and detailed below:

Block type	Drawer	Purpose
GetQuoteButton.Click	GetQuoteButton	Handle a click of the "Get Quote" button.
set Web1.Url to	Web1	Specify the URL to request.
call make text	Text	Concatenate the parts of the URL.
text (http://finance.yahoo.com/d/quotes.csv?f=l1&s=)	Text	Specify the first unchanging part of the URL.
StockSymbolTextBox.Text	StockSymbolTextBox	Get the stock symbol from the text box.
call Web1.Get	Web1	Make the web request.

The meaning is: When GetQuoteButton is clicked:

Build the Web component’s URL by concatenating “http://finance.yahoo.com/d/quotes.csv?f=l1&s=” (which you should copy and paste into the text block) and the symbol entered by the user (StockSymbolTextBox.Text).
Request the page specified by the URL. (This is like pressing return after entering a URL in your web browser.)

Receiving the Data

When the response to the web request arrives, the Web.GotText event is raised with four parameters (only some of which we’ll use in this app):

url: the URL of the original request (which is useful if requests are made with many different URLs).
responseCode: the HTTP status code, which indicates whether the web request succeeded or how it failed; for example, 200 means that the request succeeded, 404 that the page could not be found, etc.
responseType: the MIME type of the response, such as “text/csv” in this app, “image/jpeg”, etc.
responseContent: the data being returned, such as “511.5”.

Here are a picture and table of the blocks you need to create:

Block type	Drawer	Purpose
Web1.GotText	Web1	Specify what to do when the reply comes back from the web.
ifelse	Control	Provide different behavior depending on whether the request succeeded.
value responseCode	My Definitions	The response code returned for the web request, which...
= (equals) block	Math	...is checked for equality with...
number (200)	Math	...200, the code for valid web responses.
set ValueLabel.Text to	ValueLabel	Display the result on the screen.
call make text	Text	Build the result by concatenating...
text ("Current value: ")	Text	...the text “Current value: “ and...
value responseContent	My Definitions	...the value returned from the web.
set ValueLabel.Text to	ValueLabel	Display an error message.
text ("Error getting stock quote")	Text	The error message

Here's a description of the block's behavior:

If the response code indicates that the web request succeeded (= 200), set the label to the concatenation of “Current value: “ and the returned data (e.g., 511.5).
Otherwise, set the label to “Error getting stock quote”.

Review

Here are some ideas introduced in this tutorial:

Using an application programmer interface (API)
Making a request with the Web component
Checking whether a web request was successful
Displaying information returned from the web

These ideas will be developed further in the second part of this tutorial, which is under development.

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.

Credits

This tutorial is based on an app created by Prof. David Wolber and relies on the Yahoo! Finance API.

Done with StockQuotes? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

External API

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:

Google Voice for Texting over Wifi

aaron — Fri, 14 Jun 2013 16:20:49 +0000

Texting Over Wifi: Using Google Voice

Introduction

This tutorial shows how to use the Texting component to send and receive text messages (SMS) over Wifi. This lets
instructors use App Inventor texting examples and exercises with phones that do not have mobile or data plans.

In order to use the Texting component over Wifi, the app user will need a Google Voice account and will also need to download and install the Google Voice app from the Play Store.

Once you get Google Voice set up on your phone, try the AlertMe tutorial.

Under the Hood: How Things Work

Texting over Wifi uses Google Voice to send and receive messages. The mobile Google Voice app is used for receiving messages and the user's Google Voice account is used for sending messages.

Receiving a Message:

Here are some of the internal details for how things work when a message is received.

The phone receives an incoming text message, say, "Hi", from some phone, say, "555-111-2222".
The Android system forwards the message to the Google Voice mobile app, which has been set up to receive messages.
The Google Voice app forwards the message to the Texting component's Broadcast Receiver.
If the Texting component is enabled to receive messages, the Broadcast Receiver forwards the message to the Texting component.
If the Texting component is running (meaning it is visible in the foreground), its MessageReceived (with the arguments 555-111-2222 and Hi for this example) event handler will be invoked.

The MessageReceived method will process the message according to the algorithm specified in its do slot.

Of course most of these details are not visible to the App Inventor programmer, who just needs to worry about the procedure in the Do slot.

Sending a Message:

Here are some of the details for how things work when a message is sent.

Sending a message requires that the Texting component's Message and PhoneNumber properties have been set and that its SendMessage method has been called.
If this is the first message being sent by the app, the user will be prompted to authenticate with their online Google Voice account.

Once authenticated, the SendMessage method will forward the message and phone number to Google Voice.
Google Voice will forward the message to the destination phone number.

Note: if the user sends a message to her own Google Voice number, it will be forwarded back to the phone., which
could be very confusing. This may have implications for how you design your app.

Preliminaries: Logging onto Wifi

A reliable Wifi hotspot is a prerequisite to using the Texting component without a SIM card or mobile account. Use the phone's Settings > Wireless & networks > Wi-Fi to connect to a Wifi hotspot. This may require you to login to the Wifi with a password and may also require you to login to the school's network with a username and password.

Setting Up Your Google Voice Account

The revised Texting component uses Google Voice to send outgoing messages over Wifi. In order to build and test an app that sends text messages over Wifi, the app developer will have to have a Google Voice account. Once the app is developed, users of the app will also have to have Google Voice accounts.

To create a Google Voice account,

Login to your Gmail account.
Click on the More tab on the Google menu bar.
Select the Even More option.
Scroll down to the Google Voice link under Home and Office/.
Follow the instructions there to create a Google Voice number and activate your account.

Installing the Google Voice App

The revised Texting component receives incoming messages over Wifi through the Google Voice mobile app. To download and install Google voice on your phone:

Start the phone's Market or Play Store app.
Search for "Google Voice".
Download and install the app.
Read and approve the app's permission requests.
Start the app and follow the setup instructions.
Set the following Google Voice settings under Voice > Sync and notifications:
Receive text messages > Via the Google Voice app
Text notifications > Off (unless you want your app and Google Voice to notify you)

Authenticating Outgoing Messages

Because outgoing messages are sent through the user's (online) Google Voice account, users of Texting-over-wifi apps will be asked to give the app permission to access the user's account now and in the future. If there are more than one user account on the phone, the user will first be prompted to choose an account.

This description assumes that the user already has an active Google account on the phone. If not, the user will be asked to setup an account or login to an existing Google account.

This authentication process will happen the first time the app sends an outgoing message after it is installed. Depending on how the app and phone are used, the user may never again be asked for permission

In Summary

Congratulations! You have successfully installed Google Voice and are ready to text over Wifi! This will be useful for a variety of Apps that use texting. Now try to build AlertMe, an app that allows you to try this new capability.

Done with Google Voice? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

SMS Texting

No Text While Driving (Part 2)

aaron — Fri, 14 Jun 2013 16:20:14 +0000

No Text While Driving, Part 2

Download Refined Version (Book Chapter PDF)

You know that texting while driving is dangerous, so you've created and installed the No Text While Driving app on your phone. Now, when you drive you open that app and let it auto-respond to incoming texts.

But the jingle of the texts coming in is killing you with curiosity-- wouldn't it be great if you could hear the texts spoken aloud? With Part II of the tutorial, you'll extend the app so that it speaks out both the message and who sent it. And since you're making some changes anyway, you'll modify the auto-response so it reports your whereabouts in the reply: "Sorry, I'm driving and I'm at 1600 Pennsylvania Avenue".

Before completing this tutorial you should complete part I.

Getting Started

For this app to work, you'll need to load a text-to-speech module, Text-To-Speech Extended, on your phone. App Inventor and other apps rely on this module for the underlying voice synthesis. If you don't already have it, you can download onto your phone using the Android Market:

On your phone, open the Market app
Search for TTS
Select the app Text-To-Speech Extended to install

Once the Text-To-Speech module is installed, open it to test its features. When it opens, set the default language as desired. Then select "Listen to Preview". If you don't hear anything, make sure the volume on your phone is turned on. You can also change the default Engine which can enhance the quality of the spoken words.

Once the Text-To-Speech module is installed and configured as desired, you can use the TextToSpeech component within App Inventor. Begin by opening App Inventor and your NoTextWhileDriving project from part I. SaveAs the project and name the new copy "NoTextWhileDriving2".

What you'll Learn

The app demonstrates two powerful components:

The LocationSensor component to determine the phone's location, and
The TextToSpeech component to speak the incoming texts aloud.

These components encapsulate some advanced functionality, but using them in building an app is relatively straight-forward.

Set up the Components

Leave the user interface for NoTextWhileDriving, Part II the same as in Part I. But in the Component Designer, add two non-visual components: a LocationSensor and a TextToSpeech component. You do not need to set any properties of the components.

Add behaviors to the components

The behavior for part I of No Text While Driving was: "when a text is received, the message the user has put in MessageTextbox is sent as a text message response to the sender."

For part II, the behavior will be changed to: "when a text is received, it is spoken aloud and a message, including the text in MessageTextbox and the phone's current location, is sent in response to the sender."

Speaking the text aloud

When a text message is received by the phone, the Texting.MessageReceived event is triggered. The blocks from Part I handle this event by setting the PhoneNumber and Message properties of the Texting component appropriately and then sending the response text.

Extend the blocks from Part I by using the TextToSpeech component to speak both the sender's phone number and the message. You'll add the following blocks to the existing Texting.MessageReceived blocks:

Block type	Drawer	Purpose
TextToSpeech1.Speak	TextToSpeech1	Speak out the message received
make text	Text	Build the words that are to be spoken
text ("message from")	Text	First words spoken, put a space at end
number	My Definitions	This is the number the original text was received from
text ("")	Text	Put a space in between number and message
messageText	My Definitions	This is the original message received

The blocks should look like this:

How the blocks work

After the response is sent, the TextToSpeech1.Speak function is called. You can plug any text object into the message slot of the Speak function. In this case, make text is used to build the words to be spoken, including the text "message from", the phone number from which the message was received (number), a blank text, and the message received (messageText). If the text "hello" was received from the number "111-2222", the words "message from 111-2222. hello." would be spoken.

Test the behavior. You'll need a second phone to test the behaviors in this app. From the second phone, send a text to the phone that is running the app. Does the second phone speak the text aloud? Does it still send an automated response?

Adding location information to the auto-response

Next, add a LocationSensor.LocationChanged event handler which places the current address into a variable, lastKnownLocation. When a text comes in, the value of that variable can be added to the response message. Here are the blocks you'll need:

Block type	Drawer	Purpose
def variable (lastKnownLocation)	Definitions	Create a variable to hold the last read address
text ("unknown")	Text	Set the default value in case the phone's sensor is not working
LocationSensor1.LocationChanged	LocationSensor1	This is triggered on the first location reading and every change
set lastKnownLocation to	My Definitions	Set this variable to be used later
LocationSensor1.CurrentAddress	LocationSensor1	This is a street address such as "2222 Willard Street, Atlanta, Georgia"

Here are the blocks:

How the Blocks Work

LocationSensor1.LocationChanged is called the first time the sensor gets a reading and each time the phone is moved enough to trigger a new reading. These blocks just place the current (street) address into the variable lastKnownLocation, which you'll use later when you change the auto-response that is sent out.

Modify the message with location information

Next, modify the Texting1.MessageReceived event-handler so that the current address is added to the response. You'll need the following blocks:

Block type	Drawer	Purpose
make text	Text	If there is a location reading, build a compound text object
MessageTextBox.Text	MessageTextBox	This is the (custom) message in the text box
text ( "My location is: ")	Text	This will be spoken after the custom message (note the leading space)
global lastKnownLocation	LocatonSensor	This is an address such as "2222 Willard Street, Atlanta, Georgia"

The blocks should look like this:

How the Blocks Work

Instead of directly sending a message of the text in MessageTextbox.Text, the app first builds a message using make text. It combines the response text in MessageTextBox.Text with the text " My location is " and then the variable lastKnownLocation.

Test the behavior. From the second phone, send a text to the phone that is running the app. Does the second phone receive the response text? Does it include location information?

Final Program

Variations

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

Write a version that lets the user define custom responses for particular phone numbers.
Write a version that sounds an alarm when a text is received from a number in a "notify" list.

Review

Here are some of the ideas covered in this tutorial:

The TextToSpeech component takes any text object and speaks it aloud. It relies on an Android module, Text-To-Speech Extended, which must be downloaded to the phone for the app to work.
make text is used to piece together (concatenate) separate text items into a single text object.
The LocationSensor component can report the phone's latitude, longitude, and current street address. To ensure that it has a reading, you should access its data in its LocationChanged event-handler, which is triggered the first time a reading is made and on every change thereafter.

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 customize 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, Part 2? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

SMS Texting

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:

AlertMe

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

AlertMe: Texting in the background, when app is not running

The AlertMe app receives alert messages, and notifies the user even when the app is not currently running. If the app is running (visible on the screen), when it receives an SMS, the message will be displayed on the screen. If it's not running, the user will receive a Notification in the status bar, which can be viewed by pulling down the status bar. Tapping on the notification will start the app and display the message. The user can then click the Acknowledge button to send an acknowledgment to the sender that the alert has been received.

If you are using a device that does not have regular SMS enabled through a cell phone carrier and want to do texting over the internet (IP/wifi), make sure you have a Google Voice account and you have the Google Voice app set up on your phone or tablet. For more information on how to do this, see the Google Voice for Wifi Texting tutorial. When you set up the texting component in the designer, be sure you have checked the GoogleVoiceEnabled property.

The Designer

The interface of the app is pretty simple. It displays the time, phone number, and message of each of the alerts, as well as an acknowledge button. What really drives this app is the Texting component that you will add. The components are:

Component Type	Palette Group	What you'll name it	Purpose of Component
Label	Basic	LabelHeader	Displays the "Alerts" header.
Label	Basic	LabelAlerts	Displays the incoming messages in a log Set width and height to Fill Parent
Button	Basic	ButtonAck	Sends an achknowledgment to the alert sender.
Clock	Basic	Clock1	Used to generate a time stamp in the message log.
Texting	Social	Texting1	Receives and sends messages over Wifi. Only if you are using texting over wifi through Google Voice: *Check the GoogleVoiceEnabled* property.**

When you're done, the designer should look like this.

The Blocks Editor

The blocks have to handle two events: receiving a message and sending an acknowledgment. In each of these cases, they have to know who sent the message and what it said. We'll approach each of these actions in turn.

Variables

Since both procedures require that we know the alert message and who sent it, we will define two globalvariables: alertPhoneNumber and alertMessage.

The Message Received Block

Incoming messages are handled by the MessageReceived block, which takes two arguments, the number and the messageText. For this app, we store the values of these arguments in our global variables, alertPhoneNumber and alertMessage respectively, and then construct a log entry and display it on the label using LabelAlerts.Text.

Sending an Acknowledgment

The user can acknowledge an alert by sending a message back to the sender. This is done using ButtonAck.Click, which constructs the message and sends it as shown here.

Variations

Now that you have AlertMe working, here are some variations on the program you can make.

Modify the function of the Acknowledge button so you can choose to send different text, such as choosing between "What's up?", "On my way", and "Call you later."
Change the blocks so the user gets an automatically generated response (without you clicking a button). This could be a setting you could enable if you are away from your phone or in a meeting.

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.

Done with AlertMe? 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.