Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

8
Intro to AppInventor Dr. Dante Ciolfi (chawl fee)

Transcript of Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Page 1: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Intro to AppInventor

Dr. Dante Ciolfi (chawl fee)

Page 2: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Overview

• Required materials• Caveats• Creating the HelloPurr app• Summary

Page 3: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Required Materials

• Hardware: PC, Android smartphone• Software ( http://developer.android.com ):

– JRE– JDK– Android SDK– Windows USB driver appropriate for your OS

• Miscellaneous: gmail account, internet access ( http://beta.appinventor.mit.edu/ )

• Files:– Image file– Sound file

Page 4: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Caveats

• If necessary, you may need to install the Google USB drivers through the following steps: – Remove the ADB/Android interface drivers– Unplug your phone– Adjust your device installation settings:

• Start > in the textbox, type: device installation > Choose “Change device installation settings” > Choose “Install driver software from Windows Update if it is not found on my computer” (leave the other default settings) > Save changes

Page 5: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Creating the HelloPurr App: Part 1 of 3

• Download files: kitty picture, meow sound from:http://beta.appinventor.mit.edu/learn/setup/hellopurr/hellopurrphonepart1.html• New > Project name = HelloPurr• Button component• Properties list under image – choose “none” (the default)• Add• Upload kitty.png to project• In components column, click “Button1”; in properties

column, set background image to kitty.png

Page 6: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Creating the HelloPurr App: Part 2 of 3

• Delete “Text for Button 1” listed under the Text property

• Open Blocks editor and connect it to emulator• (May need to open .jnlp file if browser does

not automatically download Java applications)• Wait until “SD card is prepared” in emulator;

may have to drag green lock button to right• After couple of min., will see kitty app

Page 7: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Creating the HelloPurr App: Part 3 of 3

• Add label component that reads “Pet the Kitty” (font: 30, orange; bgcolor: blue)• Upload meow.mp3 file• Blocks Editor: create event handler that tells sound component to play when user

taps the button• Add sound component that plays meow.mp3• Palette: Media > Drag out sound component• Media: Add > upload meow.mp3• Properties: Sound1 component > set source to meow.mp3• Blocks Editor: My Blocks tab (left side):

– Click Button1 – Drag and drop “When Button1 Click do block > editor– Click Sound1

• Drag call Sound1.play block > editor & drop into when Button1.click block (should snap into place with a click)

• Click kitty picture on your device; should hear kitty “meow”

Page 8: Intro to AppInventor Dr. Dante Ciolfi (chawl fee).

Summary

• Required materials• Caveats• Creating the HelloPurr app