App Inventor: Lesson 1

Powerpoint for Teacher Use

Do you ever wish you could call upon the woof of a puppy, meow of a kitten, or roar of a T-Rex, on a moments notice? If so you will enjoy this first lesson where we will make an app that has a button that when pressed produces the sound of a dog, cat, or T-Rex. Personally, I love dinosaurs so I will be creating the T-Rex version.

Before we begin you will need to download one of the three pictures below and one of the three sounds below. Mixing and matching the sounds and pictures is encouraged.

Puppy Bark

T-Rex Roar

Kitten Meow

Parts of the Page

partsofthepage

  • The Palette has all the widgets that can be added to our app palette
  • The viewer is were we add the widgets and view our app viewer
  • The components shows all the widgets we have added components
  • Properties lets us manipulate the widgets properties

Step 1: The Button

Drag the button from the userinterface tab under the palette

step1

Step Two: Uploading the Image

steptwo

  1. Under components click on “Button1”
  2. In properties under “Image” click on the bubble that says “None…”
  3. Then click on “Upload File…”steptwoa
  4. Click on “Choose File” and select the picture that you have chosen for your app (Dog, cat, or T-Rex). Then press “OK”steptwob

Step Three:

  1. Scroll down the Properties category and find the “Text” Headerstep3
  2. Click on the white box below the header
  3. Delete the text “Text for Button 1”

Step Four:

  1. Under properties find the stepfourstepfourb
  2. Click on the white bubble underneath “Height”
  3. Click “Fill Parent” this will fill whatever screen you test your app on.
  4. Press “OK”

Step Five:

step5

  1. Underneath the palette click on the media and drag the soundon to the button with your dog/cat/T-Rex.
  2. On the other side of the screen click on the soundunder the components tabstep5a. Then underneath the Source title click on the white bubble that says “None…” Use the same process you used to import the image instead import the sound file you downloaded.

 

Step 6

  1. At the top right-hand corner find the “Blocks” button and click on it.topbat
  2. On the left side of the Blocks Editor, click the Button1 drawer to open it.
    step6 

    Those mustard yellow blocks are called event handler blocks.

  3. Grab the whenbutton1clickdo and drag it on to the code table (the gray area under the “Viewer”)
  4. Then go to the sound1.PNG tab and grab the callsound1 and put it inside of the whenbutton1clickdo. This will make the phone play the sound you have chosen when you press the button.

Final Code Block:

endcode.PNG

Use the links below to test your app using your phone or an emulator on your phone.

Connect your Phone or Tablet over WiFi (Requires an Android Phone and Wifi)

No WiFi? Build apps with an Android device and USB Cable (Requires an Android Phone and Wifi)

Don’t have an Android device? Use the Emulator