CHAPTER 1 HelloPurr - Learn to build Android apps

CHAPTER 1

HelloPurr

This chapter gets you started building apps. It presents the key elements of App Inventor, the Component Designer and the Blocks Editor, and leads you through the basic steps of creating your first app, HelloPurr. When you're finished, you'll be ready to build apps on your own.

A typical first program with a new computer system prints the message "Hello World" to show that everything is connected correctly. This tradition goes back to the 1970s and Brian Kernighan's work on the C programming language at Bell Labs. With App Inventor, even the simplest apps do more than just show messages: they play sounds and react when you touch the device. So, we're going to get started right away with something more exciting: your first app (as shown in Figure 1-1) will be "HelloPurr," a picture of a cat that meows when you touch it and purrs when you shake the device on which it's being viewed.

Figure 1-1. The HelloPurr app

What You'll Learn

The chapter covers the following topics:

? Building apps by selecting components and specifying their behavior. ? Using the Component Designer to select components. Some components are

visible on the device's screen and some aren't. ? Adding media (sounds and images) to apps by uploading them from your

computer. ? Using the Blocks Editor to assemble blocks that define the components'

behavior. ? Testing apps with App Inventor's live testing. This lets you see how apps will

look and behave on the device, step by step, even as you're building them. ? Packaging the apps you build and downloading them to a device.

2 Chapter 1: HelloPurr

The App Inventor Environment

You can begin programming with App Inventor by opening a browser to ai2.appinventor.mit.edu. This opens the newest version of App Inventor, which was released in December, 2013. Some people call it App Inventor 2, but it is formally just named App Inventor, and the previous version is called App Inventor Classic. In this book, you'll be using the new version.

The App Inventor programming environment has three key parts: ? The Component Designer (Figure 1-2). You use it to select components for your

app and specify their properties. ? The Blocks Editor (Figure 1-3). You use it to specify how the components will

behave (e.g., what happens when a user clicks a button). ? An Android device with which you can actually run and test your app as you

are developing it. If you don't have an Android device handy, you can test the apps you build by using the Android emulator that comes with the system.

Figure 1-2. The Components Designer for specifying how the app will look

Chapter 1, HelloPurr

Designing the Components 3

Figure 1-3. The Blocks Editor for specifying how the app will behave

The first time you browse to ai2.appinventor.mit.edu, you'll see the Projects page, which will be mostly blank because you haven't created any projects yet. To create a project, at the upper left of the page, click "New Project," enter the project name "HelloPurr" (one word with no spaces), and then click OK.

The first window that opens is the Component Designer. The Blocks Editor is available by clicking on the "Blocks" button in the upper-right corner of the window.

App Inventor is a cloud computing tool, meaning that your app is stored on an online server as you work. So if you close App Inventor, your app will be there when you return; you don't have to save anything on your computer as you would with, for example, a Microsoft Word file.

Designing the Components

The first tool you'll use is the Component Designer (or just Designer). Components are the elements you combine to create apps, like ingredients in a recipe. Some components are very simple, like a Label component, which shows text on the screen, or a Button component, which you tap to initiate an action. Other components are more elaborate: a drawing Canvas that can hold still images or animations; an accelerometer, which is a motion sensor that detects when you move or shake the

Designing the Components

4 Chapter 1: HelloPurr device; or components that make or send text messages, play music, and video, get information from websites, and so on.

When you open the Designer, it will appear as shown in Figure 1-4.

Figure 1-4. The App Inventor Component Designer

The Designer is divided into several areas: ? Toward the center is a white area called the Viewer. This is where you place

components and arrange them to map out what you want your app to look like. The Viewer shows only a rough indication of how the app will look, so for example, a line of text might break at a different place on your device than on the Viewer. To see how your app will really appear, you'll need to test it on your device or the emulator (we'll show you how to do this shortly). ? To the left of the Viewer is the Palette, which is a list of components from which you can select. The Palette is divided into sections; at this point, only the User Interface components are visible, but you can see components in other sections of the Palette by clicking the headers labeled Layout, Media, and so on. ? To the right of the Viewer is the Components list, which lists the components in your project. Any component that you drag into the Viewer will also show up

Chapter 1, HelloPurr

Designing the Components 5

in this list. Currently, the project has only one component listed: Screen1, which represents the screen of the device 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. ? To the far right is a section that shows the Properties of components; when you click a component in the Viewer, you'll see its Properties listed here. Properties are details about each component that you can change. (For example, when clicking on a Label component, you might see properties related to color, text, font, and so on.) Right now, it shows the properties of the screen (called Screen1), which include a background color, a background image, and a title.

For the HelloPurr app, you'll need two visible components (think of these as components that you can actually see in the app): the Label component reading "Pet the Kitty" and a Button component with an image of a cat in it. You'll also need a nonvisible Sound component that knows how to play sounds, such as "meow," and an Accelerometer component for detecting when the device is being shaken. Don't worry--we'll walk you through each component, step by step.

MAKING A LABEL

The first component to add is a Label:

1. Go to the Palette, open the User Interface drawer if it is not open, click Label (which appears about six spots down in the list of components), and drag it to the Viewer. You'll see a rectangular shape appear on the Viewer, containing the words "Text for Label1."

2. Look at the Properties box on the right side of the Designer. It shows the properties of the label. About halfway down, there's a property called Text, with a box for the label's text. Change the text to "Pet the Kitty" and press Return. You'll see the text change in the Viewer.

3. Change the BackgroundColor of the label by clicking the box, which currently reads None, to select a color from the list that appears. Select Blue. Also change the TextColor of the label to Yellow. Finally, change the FontSize to 20.

The Designer should now appear as shown in Figure 1-5.

Designing the Components

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download