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 (http://www.youtube.com/watch?v=nC_x9iOby0g) of this app being built. When you're done building Hello Purr, 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 phone, connected to your computer via a USB cord.
To build Hello Purr 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.googlelabs.com. 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) 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 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.
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.
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.
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. Make sure you've already set up your phone. Now connect your phone to the computer with a USB cable, and click the Connect to device... button at the top of the Blocks Editor window. You'll see a drowdown list with your phone listed, identified by its model type (e.g., HT99TP800054). Click on that. You'll see a yellow animated arrow move back and forth, showing that App Inventor is connecting to the phone. Creating this connection can take another 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!
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.