Computer Science for San Francisco
Android1
1
Adapted from http://sites.google.com/site/appinventor/introduction-app-inventor and
http://sites.google.com/site/appinventorhelp/tutorials/hellopurr-a-tutorial-introductio
n-to-app-inventor
Computer Science for San Francisco
Android
Lesson 0. A Short Intro
Lesson 1. Hello Purr
Lesson 0. A Short Intro
A mobile application consists of:
●
visual components -- things the user can see on the phone's screen buttons, text
boxes
●
non-visual components -- invisible things an application interfaces with sound,
twitter service
●
events -- things that can happen, usually instigated by the user of the phone.
button being click, object being dragged.
●
functions -- actions executed by the application.
●
play a sound, move an image around a game board.
●
event-handlers --- functions executed in response to some event.
●
variables-- memory kept by the application
The App Inventor programming environment consists of two tools:
Computer Science for San Francisco
●
Component designer-- specify the way an app appears.
●
Blocks editor-- specify the way an app behaves.
Lesson 1. Hello Purr2
In this tutorial, you'll start from scratch and use App Inventor to build an Android app
on your computer and run it on the phone. Hello Purr shows a picture of a kitty, and a
label that instructs users to pet the kitty. The picture is also a button, and when users
tap the button, the phone plays a meow sound. Upon shaking the phone, the cat will get
angry and hiss.
Adapted from
http://appinventor.googlelabs.com/ode/docs/tutorials/HelloPurr/HelloPurrPart1.html
2
Computer Science for San Francisco
Setup:
We need to first setup a Google account. Click here
(https://accounts.google.com/signup?service=mail) to create an account.
Follow the instructions and fill out the appropriate information.
Step 0. Create a new project
On your computer, use the web browser to go to http://ai2.appinventor.mit.edu/. If
Computer Science for San Francisco
you've never used App Inventor before, you'll see a mostly blank page that will
eventually show your list of projects. But you don't have any projects yet, and the list is
empty.
So create a new project:
1. Press the New Project button near the top left of the page.
2. Enter a MyHelloPurr in the dialog box that appears and press OK. The browser page should change to look like the figure below. This is the App Inventor
Designer. This is where you'll create the pieces of your apps — buttons, text labels,
pictures, and so on — by dragging them from the column of components on the left to the
viewer in the center.
Computer Science for San Francisco
Computer Science for San Francisco
You build App Inventor projects by combining standard components. Components are
the basic elements you use to make apps on the Android phone. They're like the
ingredients in a recipe. Some components are very simple, like a Label component, which
just shows text on the screen, or a Button component that you tap to initiate an action.
Other components are more elaborate: a drawing Canvas that can hold still images or
animations, an accelerometer (motion) sensor that works like a Wii controller and
detects when you move or shake the phone, components that make or send text
messages, components that play music and video, components that get information from
Web sites, and so on.
Look at the Designer window. You'll see that it's divided into several areas:
●
Toward the center is a white area called the Viewer. This is where you place
components and arrange them. When you select components for your app, you
place them in the Viewer and arrange them as you want them to appear on the
phone. In general, the Viewer shows only a rough indication of what you'll see on
the phone screen. To see how your app will really appear, just look at the phone.
●
To the left of the Viewer is the Palette, which is a list of components that you can
select from. The Palette is divided into sections; currently only
theBasic components are visible. You can see components in other sections of
the Palette by clicking on the headers.
●
To the right of the Viewer is the Components list, which shows the components in
your project. Compare this to the Palette on the left, which shows all the
components available in App Inventor. The project at this point has only one
Computer Science for San Francisco
component listed: Screen1, which represents the phone screen itself.
●
Under the Components list is an area that shows the Media (pictures and sound) in
the project. This project doesn't have any media yet, but you'll be adding some
soon.
●
At the far right is a section that shows the Properties of components. Properties
are details about the components: color, text, font, and so on. Right now it's
showing the properties of the screen, whose only properties are a background
color, a background image, and a title. You'll use the properties in a moment to
change the label.
3. Click on Screen1 and scroll down in the Properties box to change the Title to
"HelloPurr.”
Step 1. Upload Media Files
To start, you'll need kitty pictures and sounds files.
1. Go to http://www.cs.usfca.edu/~cs4sf/kitty.zip.
2. (cs4sf/kitty.zip)
3. Save file to desktop and right click > extract here.
4. This will give you a folder called "kitty" that contains two images and two sound
files.
Go back to the Designer.
Computer Science for San Francisco
1. In the Media box, click on the button marked Upload File....
2. Click on Add... and you'll see Choose file.... Click on Choose File and browse to select
the kitty.png file in your "kitty" folder, and click OK.
3. You'll see a yellow message at the top of the screen: "Uploading kitty.png to the
AppInventor server". After about 30 seconds the message and the upload box
disappear, and kitty.png is listed in the Media area on of the design window.
4. Also add angry.png, kitty.mp3, and catfight.mp3. When you're done, you should see
kitty.png, angry.png, kitty.mp3, and catfight.mp3 listed in the Media section of the
Designer.
Step 2. Making the label
The first component to add is a Label:
1. Go to the Palette and click on Label, in the User Interface category of the Palette,
and drag it onto the Viewer. You'll see a rectangular shape appear on the Viewer,
with the words Text for Label1. Rename the label “pet_label” by going to the
bottom of the Components section and clicking “Rename.”
2. Look at the Properties box at the right of the screen. It shows the properties of the
label. There's a property called Text about halfway down, with a box for the label's
text. Change the text to read "Pet the Kitty" and press return.
3. Change the BackgroundColor of the label by clicking on the box, which currently
reads "None", to select a color from the list that appears. Also change
Computer Science for San Francisco
the TextColor of the label. Finally change the FontSize to 55. Step 3. Adding the button
Go to the Palette and click on Button (at the top of the list of components) and drag it on
to the Viewer, placing it below the label. You'll see a rectangular button shape appear on
the Viewer.
Now make the button look like the kitty:
1. The Properties should be showing the properties of the button. If it isn't, click on
the image of the button in the Viewer to expose the button's properties. In
the Properties box, click on the area after Image (currently "None..."). A box
appears with a list of your media files. Select kitty.png and hit OK. You should
see kitty.png listed as the image property for the button. The picture might not
also appear in the Viewer. Don't worry if it doesn't.
2. If you look closely at the phone screen, you'll see that the kitty picture has the
button text "Text for button 1" showing over it. You probably don't want that in
your app, so delete to the text to make it blank.
3. At the bottom of the Components box, hit the Rename... button and change the
name to "cat_button".
Computer Science for San Francisco
Step 4. Adding the sounds
Now make the kitty meow when you tap the button (that is, the picture of the kitty) and
hiss when you shake the phone. First you need to have the meow and hiss sounds:
1. Go to the Palette at the left of the browser window and click on the header
marked Media to expand the Media section of the palette of components. Drag out
a Sound component and place it in the Viewer. Wherever you drop it, it will appear
in the area at the bottom of the Viewer marked Non-visible components. Rename
it to "meow".
2. Click on Sound1 to show its properties. Set its Source to kitty.mp3.
3. Add another Sound component and rename it to "hiss". Set its Source to
catfight.mp3.
4. To handle vigorous shaking, set the MinimumInterval in Properties for each to
750. This requires that the sound plays for at least 3/4 of a second before it is
interrupted or overlapped. See Step 9 for more details.
Step 5. Making the sound play
Now make the kitty meow when you tap the button:
Computer Science for San Francisco
1. Click on the "Blocks" button in the top right. If a dialog box opens asking you how
to run the application, leave the default and click OK. If an error message pops up,
click OK. The Blocks Editor is where you tell the components what to do, and when to do it.
You're going to tell the kitty button to play a sound when the user taps it. If
components are ingredients in a recipe, you can think of blocks as the cooking
instructions. 2. At the top left of the window, you'll see two drop down menus, one labeled Built In
and another showing the components you have already added. This column should
show: cat_button, Label1, Screen1, meow and hiss. Computer Science for San Francisco
Computer Science for San Francisco
1. Click the drawer for the button. The drawer opens showing a selection of pieces
that you can use to tell the button what to do, starting with when
cat_button.Click at the top.
2. (Quick note: if you accidentally drag something into the blocks editor that you
don’t need, just drag that item to the bottom right trashcan.) Computer Science for San Francisco
Computer Science for San Francisco
3. Click on the the block labeled when cat_button.Click and drag it out into the
workspace. (When you're looking for the block, notice that the word when is
smaller than cat_button.Click). 4. Click on meow in My Blocks to open the drawer for the sound component, and drag
out the call meow.Play block, fitting it into the gap marked do in the when
cat_button.Click block. The two blocks should snap together to form a unit, and
you should hear a snapping sound. You might get an error message, just click OK. Step 6. Adding a purr
Now make the kitty purr as well as meow when you tap the button. You'll simulate the
purr by making the phone vibrate. This is easy to arrange because the Sound component
Computer Science for San Francisco
can make the phone vibrate as well as play sounds.
1. Go to the Blocks window and click meow in My Blocks to open the drawer.
2. Select call meow.Vibrate and drag it in under the call meow.Play block in the when
Button1.Click section. The block should click into place. If it doesn't, try dragging it
so that the little dip on the top of call meow.Vibrate touches the little bump on the
bottom of call meow.Play. You might get another error message at this point, click
OK again. 3. You tell the Vibrate block how long it should vibrate for. You give it a time in
thousandths of a second, also called milliseconds. So, to make the phone vibrate for
half a second, put in a value of 500 milliseconds.
4. Click on the green Math button in the menu. You should get a list, with 0 as the
first item. 0 indicates a block that represents a number. Computer Science for San Francisco
5. Click on the 0 and you'll get a green block with the number 0. 6. Change the 0 to 500. Plug the 500 number block into the socket at the right of call
meow.Vibrate. Computer Science for San Francisco
7. Plug the 500 number block into the socket at the right of call meow.Vibrate.
8. I bet you want to see what this looks like on your device. Now get those phones or tablets out and open up MIT AI2 Companion. You should see a screen asking for a code or qr code; go back to the app inventor designer and go to Connect > AI Companion. Enter the 6 letter code and hit ‘Connect.’
Step 7. Shaking the phone
Now add a final feature: have the kitty hiss when you shake the phone. To do this, you'll
use a component called an AccelerometerSensor that can sense when you shake or
move the phone around.
1. In the designer(click ‘Designer’ in top right), expand the Sensors area in
the Palette components list and drag out an AccelerometerSensor. It will move into
the Non-visible components section at the bottom of the Viewer.
2. Go back to the Blocks Editor. There should be a new drawer
for AccelerometerSensor1. Open it and drag out the when
AccelerometerSensor1.Shaking (it should be the second block in the list).
3. Just as you did with the sound and the button click, drag out a call hiss.Play block
Computer Science for San Francisco
and fit it into the gap in when AccelerometerSensor1.Shaking. Try it out by shaking
the phone.
Extra Challenges
Challenge1. Upon shaking the phone:
1. Show a new message that says “DON’T SHAKE THE KITTY!” (Hint: Create a new
label.)
2. Change the button picture to the angry.png. (Hint: Create two new images.)
3. Disable the purr.
Challenge 2. After shaking the phone, pet the cat again to make it happy again.
1. Hide the angry message.
2. Change the picture back to kitty.png.
3. Make sure the cat meows normally and purrs again.
Challenge 3. Add multiple animals to your screen that will make sounds when pet.
1. Instead of using the provided kitty.zip, utilize google to find images of other
animals (JPG, PNG, and GIF are acceptable).
2. Google to find sound clips (WAV and MP3 are acceptable) or utilize Sea World’s
Computer Science for San Francisco
free sound library at http://www.seaworld.org/animal-info/sound-library/.
* A solution to the Block Editor portion of Challenge 1 and Challenge 2 is shown at the
end of these notes.
Step 8. Install the app on a phone
1. Go to the Designer
2. Click "Build"
3. Select "App (Provide QR Code)".
4. Scan QR code.
5. Go into the applications menu and test out your new app!
Step 9. A final note
Two things to notice as you play with this app:
1. As you shake the phone, the meows will sound strange, as if they are echoing.
That's because the accelerometer sensor is triggering the shaking event many
times a second, and so the meows are overlapping. If you look at the sound
component in the designer, you'll see a property called Minimum interval. That
determines how close together successive sounds can start. It's currently set at
Computer Science for San Francisco
one-half second (500 milliseconds), which is less than the duration of a single
meow. By playing with the minimum interval, you can change how much the
meows overlap.
2. If you run the packaged app and walk around with the phone in your pocket, your
phone will meow every time you move suddenly — something you might find
embarrassing. Android apps are typically designed to keep running even when
you're not looking at them. Your app with the accelerometer and the meow just
keeps going. To really quit the app, bring up MyHelloPurr and press the phone's
menu button. You'll be offered an option to stop the application.
Extra Fun
If you want to experiment with other animals, utilize google image (JPG, PNG, and GIF
file types are acceptable).
You can refer to http://www.seaworld.org/animal-info/sound-library/ for a free sound
library of animal sounds (WAV and MP3 files are acceptable).
Computer Science for San Francisco
*Solution to Challenge 1 and 2.
Computer Science for San Francisco
Other Apps to try on your own!
1. A parakeet mimic app! When you press the parakeet, you can say something and the
parakeet with repeat you and it will be typed below!
Computer Science for San Francisco
2. Create a magic 8 ball that gives you an answer when you shake it!