Lesson 2A: Virtual Pet

Task 1: Getting Started with App Inventor

Watch screencast VirtualPet1. This will introduce you to App Inventor and the designer screen, where you assemble your app's components. (You may find the images & sounds in a folder called 'AI2 Images & Sounds' in the Google Classroom Stream. You will have to open the folder, right click, and download both the image and the sound.) The image of the cat will come in rather large.  Please set the properties of the button to Height to 300 pixels and width 'Fill Parent.' You may also change the label so it reads 'Pet Me!' (It just sounds better.)

You will create your own VirtualPet app. 

Task 2: Creating Code

At this point, all we have created is the app's interface. While this is an important stage in development, the app won't actually do anything. We must now add some instructions to the computer (or code) to make the app work as intended.

There are two parts to an App Inventor app:

    1. Design (Components (or elements put on the design screen in App Inventor; visible components such as button, textbox, label and image sprite and non-visible components such as texting, locationsensor, text to speech, and accelerometer) and their properties (or settings of each of the components, such as alignment, background color, text, title and sizing))

    2. Code (blocks) - the program instructions. Most of the code is triggered by events- things that happen on the phone, such as a button click, texting message received, image sprite collided with, and locationSensor.location changed. The blocks of code that trigger the condition are called event handlers. Code can also be used to change the properties of the components. 

(Dabble in this Unplugged Lesson about Events, Edited lesson)

Watch screencast VirtualPet2, then try to create your app. If you get stuck, go back in the screencast or ask your partner.