App Inventor Curriculum MIT Center for Mobile Learning Wiith support from the Motorola Mobility Foundation

DRAFT Spring 2012

Lesson One: Magic 8 Ball Predicts the Future

This introductory module will guide you through building a Magic 8 Ball app with App Inventor. When you shake the phone (or press a button), your 8-ball will deliver one of its classic predictions, such as It is decidedly so or Reply hazy, try again.

Learning Goals After completing this app, you will have good understanding of the following: App Inventor environment: designer, blocks editor, emulator and/or physical phone App Inventor components: accelerometer sensor, image, list-picker Materials Outline 1. Set up computers and phones (or emulator). Its best to do this ahead of time. See: Preworkshop setup instructions, which you can share with workshop attendees before the workshop if they will be using their own computers. 2. Basic App Inventor tutorial - getting around [video: ] 3. Build the App 4. Test the App 5. Troubleshooting 6. Next steps: suggestions for further exploration a selection of images and sounds in the App Inventor Media Library supporting hard copy materials video snippets to assist students through this lesson [Coming Soon]

Lesson Details: Part One DESIGN: App Inventor Designer 1. To open the App Inventor Designer window, go to http://appinventor.mit.edu and sign in with a Google ID (Gmail account). 2. Download and save an image of an 8 ball and a sound file from: 3. https://sites.google.com/site/appinvmediafiles/magic-8-ball [this URL will change!] 4. On the left column of the Designer, open the Basic Palette, and drag a Button component over to the Viewer. Selecting a button component to place on the viewer:

5.

Change the button image to a ball image (choose image from the Properties pane on the right.) After selecting the image you had previously downloaded, click save. 6. Go to the text field in the Properties pane and delete the display text of your button component. 7. From the Media Palette, drag over a Sound component onto the Viewer pane. BUILD: Blocks Editor In the upper right corner of the Designer, click on the Blocks Editor button. Wait for a few moments while the blocks editor loads. This takes some time, and often requires you to click accept, ok, or keep as the java program downloads to your computer. If you are having trouble loading the Blocks Editor, visit http://www.java.com to see if you have java installed, or to troubleshoot your installation. Once the Blocks Editor is open, there are several options running along the left side of the screen. We refer to these as drawers.. 1. From the My Blocks drawer, drag the Button1.Click block into the work area.

2. From the My Blocks drawer, drag the Sound1.Play block into the work area and insert it into the when Button1.Cllick block. They will click together like magnetic puzzle pieces. Your blocks should now look like this:

TEST: Phone/Emulator Emulator: click on the picture, you will hear the sound play. Phone: tap the picture, you will hear the sound play. Lesson Details: Part Two

DESIGN: App Inventor Go back to the Designer window in your browser and add some new things to your app. 1. From the Screen Arrangement Palette, drag over the Vertical Arrangement component. 2. From the Basic Palette, drag over a Label component. (Label1) 3. In the Properties pane, change the text property of Label1 to Ask the Magic 8 Ball a question. 4. From the Basic Palette, drag over another Label component. (Label2) 5. Change the text property of the Label2 to Touch the Magic 8 Ball to receive your answer. 6. Drag the two labels and the image so that they are all inside the Vertical Arrangement component if you have not done so already. This will cause them to line up with each other in a vertical line. BUILD: Blocks Editor Now its time to go into the Blocks Editor to program the components you just added to your project. (Remember, the Blocks Editor is running in a window outside of your web browser, signified by the java icon that looks like a coffee cup.) 1. Remove the Sound1.Play block from the when Button1.Click block. 2. From the My Blocks Drawer, click on Label2 to see all of its associated blocks. Drag over the blue set Label2.Text and connect it to the when Button1.Click block. 3. From the Built-in Drawer, click on Lists to see all of the associated blocks. Drag over the pick random item block and connect it to the set Label2.Text block. 4. From the Built-in Drawer, click on Lists, then drag out the make a list block and connect it to the pick random item block. 5. From the Built-in Drawer, drag out the text block and connect it to the item socket of the make a list block. Click directly on the word text so that it gets highlighted. You can then type in the text you want in place for one of the answers of your Magic 8 Ball. 6. Repeat step 5 for each of the answer selections you would like programmed into your 8

Ball App. Plug each text block into the pick random item block. (Ideas for answers: http://en.wikipedia.org/wiki/Magic_8-Ball) 7. Put the Sound1.Play block inside the when Button1.Click by connecting it to the bottom of the set Label2.Text block. Blocks should look something like this: (Note it is normal for there to be a blank space at the end of the make list block.)

TEST: Emulator or Phone Emulator: Click on the picture of the 8 Ball, you should see one of your answers in the text field of the Magic 8 Ball, and a sound should play. Phone: Tap on the picture of the 8 Ball, you should see one of your answers in the text field of the Magic 8 Ball, and a sound should play. Lesson Details: Part Three DESIGN: App Inventor From the Sensors Palette, drag over an AccelerometerSensor sensor component. Notice that it automatically drops down to the Non-visible components area of the Viewer window. BUILD: Blocks Editor From the My Blocks Drawer, click on AccelerometerSensor, then drag out the block for when AccelerometerSensor.Shaking. Disconnect all of the blocks from inside the Button1.Click block and move them inside the

AccelerometerSensor.Shaking block. Delete the Button1.Click block (App Inventor will not run if you leave disconnected blocks lying around the Blocks Editor.) Block should look something like this:

TEST: Phone/Emulator Phone: When you shake the phone it should show an answer and play a sound. Emulator: [[not sure you can simulate shaking with the emulator??]] Challenge! Notice that if you shake the phone rapidly, the prediction changes several times. What could you do to make the app less sensitive to shaking so that only one prediction appears for each shaking episode? Teacher Notes Students should be encouraged to play around and try their own ideas out. They do not have to follow this tutorial to the letter. Ask them to extend the app in some way and let them try to implement their own ideas. An easy modification is to us the Buttons text property instead of a label (change font color to white!). Students can also experiment with the text to speech component to have the 8 Ball speak the prediction out loud. Suggestions for further exploration Have the image rotate when the phone is shaken, have an intermediate image that looks like the triangle is surfacing.

Make a similar app but for a different purpose: phone could be used in place of dice or yahtzee letters. It could be shaken to simulate a heads/tails coin toss or to produce a selection of different colored balls for students learning about probability. Have end user add choices for predictions (see Make Quiz tutorial). Crowd source for choices: allow people to send SMS and read their answers into the list.