HelloPurr with a Phone (Part 1)

Building your first app with an Android phone (Part 1): HelloPurr

This page will get you started building your first app: A picture of a kitty that meows when you pet it. You can also watch a video of this app being built. When you're done building HelloPurr, you'll be ready to design and build apps on your own. Before starting, make sure that you've set up your computer.

As you build HelloPurr you'll learn how the three key tools of App Inventor work:

The Designer, the place were you design your app. It runs in your web browser.
The Blocks Editor, the place were you set the behavior of the app. It is a separate application with its own window.
The Android device, connected to your computer through wifi using the MIT AICompanion App, or connected with a USB cord.

To build HelloPurr you'll need a picture of the kitty and also a meow sound. Download these files to your computer:

Start the Designer and create a new project

In your web browser, go to the App Inventor website at http://appinventor.mit.edu . If this is the first time you've used App Inventor, you'll see the Projects page, with no projects in it yet. It should look like this:

Create a new project:

Click New on the left side, near the top of the page.
Enter the project name "HelloPurr" (one word, with no spaces or quotations) in the dialog box that appears, click OK.

The browser will open the Designer, the place where you select components for your app, and should look like this:

Select components to design your app

App Inventor components are located on the left hand side of the Designer screen under the title Palette. 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 AccelerometerSensor (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.

To use a component in your app, you need to click and drag it onto the Viewer in the middle of the Designer. When you add a component to the Viewer, it will also appear in the components list on the right hand side of the viewer.

Components have properties that can be adjusted to change the way the component appears within the app. To view and change the properties of a component, you must first select the desired component in your list of components.

Here are some steps for selecting components and setting properties. We want HelloPurr to have a Button component that has the Image property set to the kitty.png file you downloaded earlier. To set this:

Drag and drop the Button component to Screen1. The Button component is located in the Basic section of the Palette.
In the list of properties, under Image, click on "none..."
Click "Add"
Select the the kitty.png file you downloaded earlier.
Delete "Text for Button1" listed under the Text property using the Backspace key.

Your Designer should look like this:

Open the blocks editor and connect your phone

The Designer is one of three key tools you'll use in creating your apps. The second is the Blocks Editor. The third is the phone. You'll use the Blocks Editor to assign behaviors to your components, such as what should happen when the user of your app taps a button.

The Blocks Editor runs in a separate window. When you click Open the blocks editor from the Designer window, the Blocks Editor program file should download and run. This process may take 30 seconds or longer. If the Blocks Editor never opens, it might be because your browser is not set up to run downloaded Java applications automatically. In this case, find the downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look as shown below, with "drawers" for the program blocks to the left, and a large empty "canvas" space for placing blocks to assemble the program, which you'll do below.

Before continuing to build the app, you'll need to connect your phone. The setup instructions will walk you through setting up your phone. When your phone is connected to your computer you will see a green phone icon in the upper right corner. If you see a yellow animated arrow moving back and forth that mess that App Inventor is still connecting to the phone. Creating this connection can take a minute or two. When it's all done, the arrow will stop moving and turn green, and if you look at the phone screen, you'll see the kitty there this is the beginning of your app!

Next steps

Now that the Designer, the Blocks Editor, and the phone are all connected, you can Complete the HelloPurr app

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