Lecture Note 1: DESIGNER AND BLOCK EDITOR

Laboratory 1 (HelloPurr)

Introduction:

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 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.

Lecture Note Outcomes:

The lecture note 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.

Contents:

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 November 17, 2020. Some people call it App Inventor 2, but it is formally
just named App Inventor, and the previous version is called App Inventor Classic.

1|P age Designer and Blocks Editor – Narte AM

 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

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.

The App Inventor programming environment has three key parts:

• The Component Designer (Figure 1-1). You use it to select components for your
app and specify their properties.
• The Blocks Editor (Figure 1-2). 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-1. The Components Designer for specifying how the app will look

2|P age Designer and Blocks Editor – Narte AM

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 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.
• 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.

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

3|P age Designer and Blocks Editor – Narte AM

 LABORATORY 1
Designing the Components and the Blocks Editor

Scenario
In this activity, students will be using the Designer Component to design their
very first Android Application. Blocks editor will be used to convert each design into an
interactive App by creating methods or functions.

Laboratory Outcome.
At the end of the laboratory, students must be able to:

• Identify the parts of designer components and blocks editor,

• create labels and add buttons,
• add sounds,
• and do a live testing for the app.
Materials

• Mobile phone, tablet, PC, Laptop

• Browser

Procedures
1. Making a Label
The first component to add is a Label:
a) 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.”
b) 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.
c) 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-3.

4|P age Designer and Blocks Editor – Narte AM

Figure 1-3. The app now has a label

2. Adding the Button

The kitty for HelloPurr is implemented as a Button component—you create a

normal button and then change the button image to the kitty. To make the basic button
first, go to the Palette in the Designer and click Button (at the top of the list of
components). Drag it onto the Viewer, placing it below the label. You’ll see a rectangular
button appear on the Viewer.

Now you’ve got a button that you’ll use to trigger the sound effect when someone
taps it, but we really want it to look like the picture of the kitty, not a plain, old rectangle.
To make the button look like the kitty:

a) First, you need to download a picture of the kitty and save it on your computer
desktop. You can download it in our Class at www.isatumiagao.online . The
extension .png is a standard image format similar to .jpg and .gif; all of these file
types will work in App Inventor, as will most standard sound files such as .mpg or
.mp3. You can also download the sound file you’ll need to make the kitty meow
at www.isatumiagao.online.
b) The Properties box should display the properties of the button. If it doesn’t, click
the button in the Viewer to reveal the button’s properties on the right. In the
Properties box, click the area under Image (which currently reads “None...”).
c) Click “Upload File.” Then, click “Choose File” and browse to select the kitty.png
file you downloaded to your computer earlier, and then click OK.

5|P age Designer and Blocks Editor – Narte AM

 d) After the image uploads, kitty.png should be listed as an option for the image
property of the button. Click OK to choose it. You’ll also see the file listed in the
Media area of the Designer window, just below the Components list. And if you
look at the button in the designer, you’ll see the kitty picture displayed—the
button now looks like a kitty.
e) You might have also noticed that the kitty picture still has the words “Text for
Button 1” displayed on it. You probably don’t want that in your app, so go ahead
and blank out the Text property of Button1.

Now, the Designer should appear as shown in Figure 1-4.

Figure 1-4. The app with a label and a button with an image on it

3. Adding the Meow Sound

In your app, you want the kitty to meow when you tap the button. For this, you’ll
need to add the meow sound and program the button behavior to play that sound when
the button is clicked:

a) If you haven’t downloaded the meow.mp3 file to your computer’s desktop, do so

now by using this link: www.isatumiagao.online.
b) Go to the Palette at the left of the Designer window and click the header marked
Media to expand the Media section. Drag out a Sound component and place it in
the Viewer. No matter where you drop it, it will appear in the area at the bottom of

6|P age Designer and Blocks Editor – Narte AM

 the Viewer marked “Non-visible components.” Non-visible components are
objects that do things for the app but don’t appear in the visual user interface.
c) Click Sound1 to show its properties. Click the Source property and then go
through the steps to upload and choose the meow.mp3 file you downloaded
earlier. When you’re done, you should see both kitty.png and meow.mp3 listed in
the Media section of the Designer.

Table 1-1 lists the components that you’ve gathered for your app so far.

4. Adding Behaviors to the Components

You’ve just added Button, Label, and Sound components as the building blocks for
your first app. Now, let’s make the kitty meow when you tap the button. You do this with
the Blocks Editor. In the top right of the Component Designer, click “Blocks.” Look at the
Blocks Editor window. This is where you instruct the components what to do and when
to do it. You’re going to direct 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.

Making the Kitty Meow

At the top left of the window, beneath the Blocks header, you’ll see a column that
includes a Built-in drawer and a drawer for each component you created in the
Designer: Button1, Label1, Screen1, and Sound1. When you click a drawer, you get a
bunch of options (blocks) for that component. Click the drawer for Button1. The drawer
opens, showing a selection of blocks that you can use to build the button’s behavior,
starting with Button1.Click at the top, as shown in Figure 1-5.

7|P age Designer and Blocks Editor – Narte AM

 Figure 1-5. Clicking Button1 shows the component’s blocks

Click the block labeled Button1.Click and drag it into the workspace. You’ll notice
that the word “when” is included on the Button1.Click block. Blocks including the word
“when” are called event handlers; they specify what components should do when some
particular event happens. In this case, the event we’re interested in happens when the
app user taps the image of the kitty (which is really a button), as in Figure 1-6. Next,
you’ll add some blocks to program what will happen in response to that event.

Figure 1-6. You’ll specify a response to the user clicking within the Button.Click
block

8|P age Designer and Blocks Editor – Narte AM

 Click Sound1 to open the drawer for the sound component, and then drag out the
call Sound1.Play block. (Remember, earlier we set the property for Sound1 to the meow
sound file you downloaded to your computer.) At this point, you might have noticed that
the call Sound1.Play block is shaped so that it can fit into a gap marked “do” in the
Button1.Click block. App Inventor is set up so that only certain blocks fit together; this
way, you always know you’re connecting blocks that actually work together. In this case,
blocks with the word “call” cause components to do things. The two blocks should snap
together to form a unit, as shown in Figure 1-7, and you’ll hear a snapping sound when
they connect.

Figure 1-7. Now when someone clicks the button, the meow sound will play

Adding a Purr

Now we’re going to make the kitty purr and meow when you tap the button. We’ll
simulate the purr by making the device vibrate. That might sound hard, but in fact, it’s
easy to do because the Sound component we used to play the meow sound can make
the device vibrate, as well. App Inventor helps you tap into this kind of core device
functionality without having to deal with how the device actually vibrates. You don’t need

9|P age Designer and Blocks Editor – Narte AM

to do anything different in the Designer; you can just add a second function call block to
the button click in the Blocks Editor:

a) Go to the Blocks Editor and click Sound1 to open the drawer.

b) Select call Sound1.Vibrate and drag it under the call Sound1.Play block in the
Button1.Click slot. The block should click into place, as shown in Figure 1-8. If it
doesn’t, try dragging it so that the little notch on the top edge of call
Sound1.Vibrate touches the little bump on the bottom of call Sound1.Play.

Figure 1-8. Playing the sound and vibrating on the Click event

c) You might have noticed that the call Sound1.Vibrate block includes the text
“millisecs” at the lower right, and alongside it is an open socket protruding
inward from the block’s edge. An open socket in a block means that you need to
plug something into it to specify more about how the behavior should work. In
this case, you must tell the Vibrate block how long it should vibrate. You need to
specify this time in thousandths of a second (milliseconds), which is pretty
common for many programming languages. So, to make the device vibrate for
half a second, you need to enter a value of 500 milliseconds. To do that, you
need to grab a number block. Click the Math drawer and you’ll see a list of blue
blocks appear, as shown in Figure 1-9.

10 | P a g e Designer and Blocks Editor – Narte AM

 Figure 1-9. Opening the Math drawer

d) At the top of the list, you should see a block with a “0” in it. You can drag
this block out and then change the 0 to any number you want. Go ahead
and drag out the number block, as shown in Figure 1-10.

Figure 1-10. Choosing a number block (0 is the default value)

11 | P a g e Designer and Blocks Editor – Narte AM

 e) Click the 0 and type the new value, 500, as shown in Figure 1-11.

Figure 1-11. Changing the value to 500

f) Plug the 500 number block into the socket on the right side of call
Sound1.Vibrate, as shown in Figure 1-12.

Figure 1-12. Plugging the value 500 into the millisecs socket

Shaking the Device

Now, let’s add a final element that taps into another cool feature of Android:
making the kitty meow when you shake the device. To do this, you’ll use a component
called AccelerometerSensor that can sense when you shake or move the device
around.

a) In the Designer, in the Palette components list, expand the Sensors area
and drag out an AccelerometerSensor. Don’t worry about where you drag
it. As with any non-visible component, no matter where you place it in the
Viewer, it will move to the “Non-visible components” section at the bottom
of the Viewer.
b) You’ll want to treat someone shaking the device as a different, separate
event from the button click. This means that you need a new event

12 | P a g e Designer and Blocks Editor – Narte AM

 handler. Go to the Blocks Editor. There should be a new drawer for
AccelerometerSensor1. Open it and drag out the
AccelerometerSensor1.Shaking block. It should be the second block in the
list.
c) Just as you did with the sound and the button click, drag out a call
Sound1.Play block and fit it into the gap in
AccelerometerSensor1.Shaking. Try it out by shaking the device.
Figure 1-13 shows the blocks for the completed HelloPurr app.

Figure 1-13. The Complete blocks for HelloPurr

Congratulation!!! You have just created a fully-functional and interactive Android

App.

13 | P a g e Designer and Blocks Editor – Narte AM

Individual Activity

(Final answer must be saved in .PDF format)

Discuss the following:

1. Adding of Button
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

2. Changing the name of the Label

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

3. Adding of Sound
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

4. Adding of Images
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

14 | P a g e Designer and Blocks Editor – Narte AM

Laboratory Activity

Create a project by using the following App Inventor Components:

• Label
• Button
• Images
• Sound

Instructions:

1. Project name will follow a given Format (Lastname_Lab1), example Narte_Lab1.

2. Select your own Images and Sounds.
3. Create your own design.
4. Once done, submit/upload the following:
• Screen shot of the Final Layout of the project. (in .JPG format)
• Screen shot of the Complete blocks of the project. (in .JPG format)
• The .apk and .aia files

Instructor grading Criteria

• Used all the required Components - 40%

• Concepts and Designs - 30%
• Functionality and Usability - 30%

15 | P a g e Designer and Blocks Editor – Narte AM