Building your first app (Part 2): Completing HelloPurr

Now that you've set up your computer and device, and you've learned how the Designer and the Blocks Editor work, you are ready to complete the HelloPurr app. At this point, you should have the Designer open in your browser, the Blocks Editor open in another window, and your chosen device (phone or emulator) connected to the Blocks Editor.

Here's a preview of the steps you'll do in this tutorial to complete the app:

In the Designer:

• Add a Label component that reads "Pet the Kitty".
• Upload the meow.mp3 file
• Add a Sound component that plays the meow.mp3 file.

In the Blocks Editor:

• Create an event handler that tells the Sound component to play when the user taps the button.

Adding the label

Under Palette

1. Drag and drop the Label component to the Viewer, placing it below the kitty. It will appear under your list of components as Label1

Under Properties

1. Change the Text property of Label1 to read "Pet the Kitty". You'll see the text change in the Designer and on your device.
2. Change the BackgroundColor of Label1 by clicking on the box
3. Change the TextColor of Label1
4. Change the FontSize of Label1 to 30

The Designer should now look like this:

Adding the meow sound

Under Palette

1. Click on the header marked Media to expand the Media section of the palette of components.
2. 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.

Under Media

1. Click Add...
2. Upload the meow.mp3 file to this project.

Under Properties

1. For the Sound1 component, set its Source to meow.mp3.

The Designer should now look like this:

Making the sound play

Using the Blocks Editor we will define how the app is going to behave. We'll 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.

The Blocks Editor has two tabs on the upper left hand corner: Built-in and My Blocks. The buttons under each tab expand and expose blocks when clicked. The Built-in blocks are the standard set of blocks that are available for every app you build. The blocks under My Blocks contain specific blocks that are tied to the set of components that you have chosen for your app.

To make the sound play, you'll need to drag and drop the Button1.Click block and the Sound1.Play block into the editor. The blocks connect together like puzzle pieces.

Steps for making the sound play

1. Navigate to the Blocks Editor. It may be covered up by the web browser.
2. Click the My Blocks tab at the top left hand side.
3. Click Button1.
4. Drag and drop the when Button1.Click do block onto the editor.
5. Click Sound1.
6. Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block.
7. Click the kitty picture on your device. You should hear the kitty meow.

Your Blocks Editor should look like this:

Packaging your app

Congratulations, your first app is running! If you're using a phone, then the app is running on the phone, but it runs only while the phone is connected to App Inventor. If you unplug the USB cord, the app will vanish. You can reconnect the phone to make it come back. To get an that app runs without being connected to App Inventor, you must "package" the app to produce an application package (apk file). Pressing Package for Phone at the upper right of the designer page will present three options for packaging:

1. If the phone is connected, you can download and automatically install the app on your phone.
2. You can download the app to your computer as an apk file, which you can distribute and share as you like, and manually install on phones using the Android ADB program.
3. You can generate a Barcode, which you can use to install the app on your phone with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in the Android Market). This barcode works only for your own phone. If you want to share the app with others, you'll need to download the apk file to your computer and share the file.

Review

Here are the key ideas covered so far:

• You build apps by selecting components (ingredients) and then telling them what to do and when to do it.

• You use the Designer to select components. Some components are visible and some aren't.

• You can add media (sounds and images) to apps by uploading them from your computer.

• You use the Blocks Editor to assemble blocks that define the components' behavior

• when ... do ... blocks define event handlers, that tell components what to dowhen something happens.

• call ... blocks tell components to do things.

Next Steps

Now that your computer is set up and you know the basics of how App Inventor works we recommend you:

• Complete additional Tutorials.
• Review the Reference Documentation.
• Join the User Discussion Forum.

• OR

• If you've been using the emulator and want to start using your phone, you can set up your Android phone to build apps.

• Something not working right? Visit the troubleshooting page, or check the App Inventor User Forum for help.