Hello Purr

To build HelloPurr, you'll need a image file of a cat and an audio file with a 'meow' sound. Download these files to your computer by clicking the following links. Once you click a link, right click on the image or sound bar and select "Save As." Save both files onto your desktop or in another location that is easy to find. If you have downloaded all of the media files from the Module 1 Media Library then you do not need to save the media files again.

You can also watch a video of this app being built.

Select components to design your app

The App Inventor Components are located on the left hand side 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 (#1 left) that you tap to initiate an action.

Other components are more elaborate: a drawing Canvas (#2 left) 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 (#1 below), it will also appear in the components list on the right hand side of the Viewer.

Components (#2 below) 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 (#3 below), 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 of the kitty you downloaded earlier. To set this:

Step 1. From the Basic palette, drag and drop the Button component to Screen1 (#1). In the Properties pane, under Image, click on the text "none..." and click "Add…" (#2). Select the the kitty.png file you downloaded earlier (#3).

Step 2. Delete "Text for Button1" listed under the Text property using the Backspace key. Your Designer should look like this:

Step 3. From the Basic palette, drag and drop the Label component to the Viewer (#1), placing it below the picture of the kitty. It will appear under your list of components as Label1.

Under the Properties pane, change the Text property of Label1 to read "Pet the Kitty" (#2). You'll see the text change in the Designer and on your device. Change the FontSize of Label1 to 30 (#3). Change the BackgroundColor of Label1 by clicking on the box (#4): you can change it to any color you like. Change the TextColor of Label1 (#5) to any color you like. Here, the background color is set to blue and the text color is set yellow.

Step 4. Under Palette, click on the Media drawer and drag out a Sound component and place it in the Viewer (#1). Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. Under the Media pane, Click Add... (#2) Upload the meow.mp3 file to this project (#3). Under the Properties pane, click None... to change the Sound1 component's Source to meow.mp3 (#4).

Programming with the Blocks Editor

Before continuing to build the app, you'll need to connect to your device (a phone or tablet) or to the on-screen Android phone emulator. Make sure you've already got a working connection to a device or emulator before proceeding.

Now click the Connect to device... button at the top of the Blocks Editor window. You'll see a dropdown list with your phone/tablet or emulator listed, identified by its model type (e.g., HT94LLZ00001 or emulator-5553). Click on that. You'll see a yellow animated arrow move back and forth, showing that App Inventor is connecting to the device.

  1. Click the text "Connect to Device...."
  2. Select the device's model number (emulators show up with a number and the word "emulator")
  3. You will see a yellow animated arrow

Creating this connection can take a minute or two to complete. When done, the arrow will stop moving and turn green, and if you look at the phone screen, you'll see the image of the cat there — this is the beginning of your app!

Making the sound play

Step 1. Under the My Blocks palette, click the Button1 drawer and drag and drop the Button1.Click block in the open/work area.

Those green blocks are called event handler blocks. The event handler blocks specifiy how the phone should respond to certain events: a button has been pressed, the phone is being shaked, the user is dragging her finger over a canvas, etc. The event handler blocks are in green color and use the word when. E.g., when Button1.Click in the blocks.

Step 2. Next, click the Sound1 drawer and drag the Sound1.Play block into the "do" section of the when Button1.Click block. The blocks connect together like puzzle pieces and you can hear the clicking sound.

The purple and blue blocks are called command blocks, which are placed in the body of event handlers. When an event handler is executed, it also executes a sequence of commands in its body. A command is a block that specifies an action to be performed on the phone (e.g., playing sound) when the event (e.g., pressing Button1) is executed.

Your blocks should look like this at this point:

Now you can see that the command block is in the event handler. This set of blocks means; "when Button1 is clicked, the following command will be executed (which is playing the sound)." The event handler is like a category of action (e.g., a button is being clicked), and the command specifies the type/details of the action (e.g., playing sounds).

You can read more about how blocks work here.

Congratulations, your first app is running! When you click the button you should hear the kitty meow.

Note: there is a known issue with the Sound component on some devices. If you see an "OS Error" and the sound does not play - or is very delayed in playing, go back into the Designer and try using a Player component (found under Media) instead of the Sound component.

Packaging your app

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 always have it return by reconnecting the phone. To have an app running without being connected to App Inventor, you must "package" the app to produce an application package (apk file).

To "package" the app to your phone, connect your phone to the computer and make sure that the phone icon's color is green.

Then go back to the Designer and press "Package for Phone" at the upper right of the designer page. App Inventor will present three options for packaging:

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.

You can generate a Barcode (a QR Code), 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 Google Play).

Note: this barcode works only for your own phone. If you want to share your app with others, you'll need to download the .apk file to your computer and use a third-party software to convert the file into a barcode. More information can be found here.

Challenge! Make the cat purr

The challenge is to have the cat purr when the phone is shaken. Go to the Blocks Editor and open the Sound1 drawer and drag the Sound1.Vibrate block and place it under the Sound1.Play block. You will see a yellow warning icon at the left corner of the block, which means the block has a missing component.

The Sound1.Vibrate block has an open slot, which means you need to plug something into it to specify more about how the behavior should work. Here, we want to specify the length of the vibration. Numbers are calculated in thousandths of a second (milliseconds): to make the phone vibrate for half a second, we need to plug in a value of 500 milliseconds.

Go to the Built-In palette, go to the Math drawer, drag the number block and place it at the socket of the Sound1.Vibrate.

After you place the number block, click the number "123". It highlights the number in black: type "500" with your keyboard.

Done! Notice the yellow warning icon is gone: the block has no longer missing component.

Now connect your phone and tap the image of the cat on the phone. The phone should vibrate and meow at the same time.

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 do when 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 that you move on to the next tutorial Magic 8 Ball.

You may also want to:

Something not working right? Visit the troubleshooting page, or check the App Inventor User Forum for help.
All Done? Return to the Getting Started Guide.