Learning MIT

App Inventor

Addison-Wesley Learning Series

Visit informit.com/learningseries for a complete list of available publications.

The Addison-Wesley Learning Series is a collection of hands-on programming

guides that help you quickly learn a new technology or language so you can
apply what youve learned right away.
Each title comes with sample code for the application or applications built in
the text. This code is fully annotated and can be reused in your own projects
with no strings attached. Many chapters end with a series of exercises to
encourage you to reexamine what you have just learned, and to tweak or
adjust the code as a way of learning.
Titles in this series take a simple approach: they get you going right away and
leave you with the ability to walk off and build your own application and apply
the language or technology to whatever you are working on.

Learning MIT
App Inventor
A Hands-On Guide to Building
Your Own Android Apps

Derek Walter
Mark Sherman

Upper Saddle River, NJ Boston Indianapolis San Francisco

New York Toronto Montreal London Munich Paris Madrid
Cape Town Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their

products are claimed as trademarks. Where those designations appear in this book,
and the publisher was aware of a trademark claim, the designations have been printed
with initial capital letters or in all capitals.
The authors and publisher have taken care in the preparation of this book, but make
no expressed or implied warranty of any kind and assume no responsibility for errors
or omissions. No liability is assumed for incidental or consequential damages in
connection with or arising out of the use of the information or programs contained
herein.
For information about buying this title in bulk quantities, or for special sales
opportunities (which may include electronic versions; custom cover designs;
and content particular to your business, training goals, marketing focus, or
branding interests), please contact our corporate sales department at
[email protected] or (800) 382-3419.
For government sales inquiries, please contact [email protected].
For questions about sales outside the U.S., please contact
[email protected].
Visit us on the Web: informit.com/aw
Library of Congress Control Number: 2014950962
Copyright 2015 Pearson Education, Inc.
All rights reserved. Printed in the United States of America. This publication is
protected by copyright, and permission must be obtained from the publisher prior
to any prohibited reproduction, storage in a retrieval system, or transmission in any
form or by any means, electronic, mechanical, photocopying, recording, or likewise.
To obtain permission to use material from this work, please submit a written request
to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle
River, New Jersey 07458, or you may fax your request to (201) 236-3290.
Android, Google Play, Google, and the Google logo are registered trademarks of Google
Inc., used with permission.
All content from the Android Developer site and Android Open Source Project are
licensed under a Creative Commons Attribution 2.5 license.
MIT App Inventor is a trademark of the Massachusetts Institute of Technology.
All content from MIT App Inventor is licensed under a Creative Commons Attribution
ShareAlike 3.0 Unported License.
ISBN-13: 978-0-133-79863-0
ISBN-10: 0-133-79863-1
Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville,
Indiana.
First printing: December 2014

Editor-in-Chief
Mark Taub
Executive Editor
Laura Lewin
Senior Development
Editor
Chris Zahn
Managing Editor
Kristy Hart
Project Editor
Elaine Wiley
Copy Editor
Krista Hansing
Editorial Services, Inc.
Indexer
Lisa Stumpf
Proofreader
Debbie Williams
Technical Reviewers
Tom Stokke
Arta Szathma
Janet BrownSederberg
Editorial Assistant
Olivia Basegio
Cover Designer
Chuti Prasertsith
Compositor
Nonie Ratcliff


from Derek
This book is dedicated to my incredible wife, Candy.

from Mark
This book is dedicated to Stacy (depending on what she says).

This page intentionally left blank

Contents

Table of Contents
Preface xiv
1 An Introduction to Programming

Operating Systems 2
User Interface 4
Android Strengths 6
Extending App Capabilities 8
Google Services 9
Applications 10
Programming Languages 11
Summary

13

Exercises 14

2 Building with MIT App Inventor

17

The MIT App Inventor Site 17

Signing In 18
Designer 20
Blocks Editor

20

The AI2 Companion App

The Android Emulator

21

23

USB Connection to Android Device

Getting Inside an App
Event Handlers

25

25

Doing One Thing at a Time

Exercise: Sherlock Is Watching
Adding an Image
What Can You Build?
Speak, Android!
Pollock
Fore

29
31
31

31

32

Android Quiz 32
Uploading to Google Play 32
Summary

33

Exercises 34

26
27

23

vii

viii

Contents

3 App Inventor Toolkit

35

Creating a New Project 36

Designer Essentials 36
Palette

37

Viewer

44

Components 45
Properties 46
Media

46

Exercise: Speak, Android! 47

Connecting Your Device 48
See Your App on a Connected Device 50
Summary

54

Exercises 54

4 Variables

55

Component Properties: The Built-in Variables 56

Clicker-Counter App 56
Properties: Getters and Setters 57
Clicker Counter Extensions 58
Event Parameters: Special Variables 58
Exercise: Pollock 60
The Interface

60

Programming Blocks 62
Additional Exercises 64
Scope: Global and Local Variables 64
Global Variables 66
Example App: Up/Down Counter 67
Local Variables

68

An Example App: Random Guess

What You Can Store in Variables
Summary

72

5 Procedures

75

What Is a Procedure? 75
Types of Procedures 76
Why Use Procedures? 79
Arguments 79

72

69

Contents

Exercise: Flick 81
Additional Exercises 83
Summary

84

6 Working with Lists

85

Modeling Things with Data 85

The List Block 85
The Basics 87
Creating an Empty List 87
Creating a List with Some Stuff Already In It 88
Working with Lists 91
Color as a List 92
Types of Lists 92
The One-Dimensional List 92
Lists as Data Structures 93
Using Multiple Lists Together (That Expand on
Demand) 94
Abstraction with Lists and Procedures 98
Lists that Expand on Demand 100
Common Problems 102
Running Off the End of the List 102
Defining a Variable That Depends on Runtime
Elements 104
Exercise: Android Quiz 105
Additional Exercises 112
Summary

112

7 Games and Animations

Adding Animations

113

113

ImageSprite 114
Ball

115

Canvas

116

Animation Examples 117

Smoother Animation 118
Edges and Collisions 119
Exercise: Fore 119
Additional Exercises 123
Summary

123

ix

Contents

8 Multiple Screens and Debugging Techniques

125

Why More Than One Screen? 125

Building Apps with Multiple Screens 126
What Screens Are Good At 127
Issues with Multiple Screens 127
Switching Screens 128
Sharing Data Between Screens 129
Debugging Techniques 130
Leaving Comments 130
Test Small and Test Often 131
Do It 131
Name Well 132
Backing up Your Work 133
Exercise: Pollock Plus One 134
Additional Exercises 136
Summary

136

9 Using Media
Audio

139

140

Images

141

The ImagePicker
The Camera
Video

141

144

145

Exercise: Camera Action 146

Additional Exercises 146
Summary

10 Sensors

147

149

Building Location-Aware Apps 150

Using Location
Location Data

150
152

Using the Maps App with Intents

Saving Location Data
The Accelerometer

153

155

158

Detecting Tilt (and a Little Background Physics)

The Orientation Sensor
Exercise: Pushpin

161

160

159

Contents

Part 1: Designing Current Location Readout 161

Programming Part 1: The Current Location
Readout 165
Part 2: Pinning a Location to Remember Later 168
Programming Part 2: Pinning a Location 170
Extension Activities 172
Summary

172

11 Databases
TinyDB

173

174

Retrieving Data from TinyDB 175

A Few TinyDB Details 176
TinyWebDB 176
Setting Up Your Own Web Database Service 176
Security and Privacy 177
FusionTables 177
Using Web GET and POST 180
Basic Files
Web APIs

181
182

Exercise: WriteMore 182

Additional Exercises 186
Summary

187

12 Distributing an App
Live Mode

189

189

Security Settings

190

Creating an APK File

191

Downloading Directly to a Computer

Downloading with a QR Code
Creating an .aia File

Exercise: App Distribution

Version Codes

200

200

Google Play Developer Console

Summary

Index

205

207

196

198

201

192

xi

Acknowledgments
from Derek
I want to thank my amazing wife, Candy, who supported me during the crucible of writing a
book. Your strength and encouragement kept me going through the late nights, exhausting
weekends, and challenges that came with this project.
I would like to thank the MIT App Inventor team members for their support and for continuing
such an important project that is democratizing computer programming. Also, thank you to
Laura Lewin and the Pearson team for their guidance with this first-time author.
from Mark
I want to thank the AI team at MIT, the AI Master Trainers program organizers, Lyn Turbak,
and especially Fred Martin. All of you helped me get to this point, and all of this accrued
knowledge is thanks to you.
I want to thank my close friends, all of whom endured my writing and working through many
events, and often were kind enough to pull the laptop off my sleeping face. I appreciate it. I
especially want to thank Stacy for taking care of me every step of the way. Stacy, will you
marry me?

About the Authors

Derek Walter is a freelance writer specializing in the mobile ecosystem. He contributes
regularly to PCWorld, Macworld, Greenbot, and other sites devoted to consumer technology.
He also blogs about mobile apps and other topics in technology at theapplanet.com. His
undergraduate degree is in mass communication/journalism, and he holds a masters degree
in educational technology from The George Washington University. Derek has also worked in
education for the last 15 years as a classroom teacher and adjunct university instructor.
Mark Sherman is a researcher in computer science education and has taught computing,
programming, and robotics to undergraduates in the U.S., India, and China. He is an MIT App
Inventor Master Trainer, and he has taught students mobile app design with App Inventor and
trained teachers and faculty on best practices and pedagogy of the same. He holds a bachelors
degree in computer engineering and a masters degree in computer science, both from UMass
Lowell.

Preface
The smartphone is the ultimate personal computer. Mobile devices are always with us and
have become an essential part of personal productivity and lifestyle needs. We use them for
messaging, social media, Google searches, games, picture taking, and, of course, phone calls.
The Android operating system powers most of the worlds smartphones, bringing an extensive
app catalog to these devices. According to Google, more than 1 billion active devices are
currently running Android.
Perhaps you have reached the point at which using mobile apps on your smartphone isnt
enoughit is time to create one. You might just want to tinker and program a simple app, or
maybe you have thought of a new concept that doesnt exist yet. Whatever the case, MIT App
Inventor is an excellent place to start.
App Inventor is an easy-to-use tool for building both simple and complex Android applications.
The apps can easily be ported to your phone, shared with others, or even sent to the Google
Play Store for distribution to all Android devices worldwide.
For those looking to learn a programming language, MIT App Inventor can serve as an
excellent bridge to acquiring more complex coding skills. Instead of presenting new users with
frustrating messages and unfamiliar commands, App Inventor has a visually friendly interface
that uses the methods of dragging, dropping, and connecting puzzle pieces to program
applications (see Figure P.1).

Figure P.1

The MIT App Inventor Blocks Editor. The visual programming is designed to help
beginners learn the ropes of building mobile applications.

Preface

Even though App Inventor does not require using code, it builds on the same kinds of
principles that successful programmers need to write good applications. Whether you go no
further with programming or you use App Inventor to launch a new career, using App Inventor
can be a highly engaging and challenging experience. Additionally, the open and flexible
nature of Android makes it the perfect place to start.

What Is MIT App Inventor?

MIT App Inventor is a web-based tool for building Android apps (see Figure P.2). This is often
referred to as visual programming, which means the user is able to perform programming tasks
without entering any computer code.

Figure P.2

The MIT App Inventor home page. This is where the app-creation journey begins.

App Inventor is actively managed and developed by MITs Mobile Learning Lab (the project
was originally built by Google). App Inventor is growing in popularity among educators as a
way to introduce those with no programming experience to the principles of computer science
and app development. It also serves as a great first step for those dabbling with programming
or looking to increase their knowledge of how smartphone apps work.

xv

xvi

Preface

The work takes place in two key sections of App Inventor: the Designer and the Blocks Editor.
In the Designer, you decide what actions the app will perform and how it will look (see
Figure P.3).

Figure P.3

In the App Inventor Designer, you design the app and add its key functionality.

The programming takes place in the Blocks Editor. There you tell the app what it should do
and give specific instructions for making that happen.
The specific capabilities are programmed through connecting puzzle pieces. Over time, you will
learn what each block does and find multiple ways for them to interact with one another. The
pieces that do not interact will not connect with each otheranother helpful way for beginners
to get a sense of introductory programming principles.
MIT released App Inventor 2 in December 2013, creating a more powerful and easier-to-use
tool. The most significant improvement is that all the work takes place within the browser (the
previous version required a software download for some of the capabilities).
This improvement most impacts the onscreen emulator, which places a virtual Android device
screen on your computer. Using this emulator provides a perspective on how the app will look
and function when put to use. This is especially useful for those without an Android device or
anyone in an education setting who wants to monitor student progress by viewing app builds
on computer screens.
App Inventor also offers a method for using the app in real time while performing work on it:
the AI Companion app (see Figure P.4). With this free download from Google Play, you can see

Preface

your app change and develop while working on it. The Companion app also works wirelessly,
so you dont need to physically connect your phone to a computer while working in App
Inventor.

Figure P.4

An App Inventor app as viewed through the AI2 Companion. This lets you see both
how the app is performing and how it looks while it is still being developed.

Why Android?
Android is not only the most popular operating systemit also is the most extendable. It is
found on a wide variety of flagship devices from major handset makers, such as Samsung, HTC,
LG, and Motorola. App Inventor is built to take advantage of the customization and flexibility
that Android offers.
App Inventor is also a tool that is designed with those who have little to no programming
experience in mind. Other platforms have a fairly high barrier of entry, but with App Inventor,
you can more easily learn the essential skills for building an app with the worlds most popular
mobile platform.

xvii

xviii

Preface

Although many apps you create are likely to be used for practice or to share with others (see
Figure P.5), MIT App Inventor is capable of creating apps that can be uploaded for distribution
in the Google Play Store. With only a one-time fee of $25, anyone can put his or her skill set to
work and become a registered Android developer. Chapter 12, Distributing an App, discusses
this process and walks through how to accomplish it.

Figure P.5

An App Inventor app in the AI2 Companion.

What This Book Covers

So what exactly does this book discuss? The following sections provide a preview of the key
highlights from the upcoming 12 chapters.

Preface

Chapter 1: An Introduction to Programming

Before getting started with MIT App Inventor, it is important to get some background in key
computer science principles. This chapter addresses the key parts of a mobile operating system
and how computer programmers should think about creating applications.

Chapter 2: Building with MIT App Inventor

This chapter provides the first detailed walkthrough of the key pieces of App Inventor. The
Blocks Editor and Designer get fuller attention here, and you get to build your first app:
Sherlock Is Watching.

Chapter 3: App Inventor Toolkit

App Inventor has some powerful yet easy-to-use tools for designing and building Android apps.
In this chapter, the focus is on the different components available in the Designer. This serves
as a good resource on the different capabilities of the Designer and will be a chapter worth
referencing often.

Chapter 4: Variables
Variables are one of the key pieces of App Inventor; almost any app that you build will use
them in some way. Chapter 4 covers the essentials of variables and provides some strategies for
their effective use, particularly in the context of building the sample app for the chapter.

Chapter 5: Procedures
With some basic app building under your belt, it is time to take the next step and use
procedures. Procedures make your life easier when it comes to building larger, more
complicated apps because they enable you to group pieces of code together and recall it later.

Chapter 6: Working with Lists

As with variables, lists are a core piece of most apps that you will build with App Inventor. Lists
store large pieces of data or information. The chapter culminates with a quiz app that provides
some good practice in using lists.

xix

xx

Preface

Chapter 7: Games and Animations

Work and productivity alone are no fun. This chapter teaches the basics of the gaming and
animation capabilities of App Inventor. It concludes with a simple game that could be a
springboard for you to use App Inventor for other basic or more complex games.

Chapter 8: Multiple Screens and Debugging Techniques

Apps typically have multiple screens, giving users greater clarity and more streamlined access
to the content of an app. This chapter focuses on strategies for using multiple screens and
explores how to build them into applications. It also covers some debugging techniques for
App Inventor.

Chapter 9: Using Media

Most of the smartphone apps that people use are media rich. Here you get some exposure to
and practice in building media capabilities into your own apps, and you learn what is possible
in App Inventor.

Chapter 10: Sensors

Many apps are location aware, letting users find specific information or customize their
interaction based on location. This chapter shows you how to build some of these tools into
your own apps and illustrates how they can improve a users experience.

Chapter 11: Databases

Databases might not sound exciting, but they are a core feature of any good app that relies
on storing information. This chapter looks at how to use databases effectively in different
scenarios.

Chapter 12: Distributing an App

Keeping an app that you have built all to yourself is no fun. It is time to share it with others.
This can be as simple as sending the file to friends and family or placing it in the Google Play
Store for worldwide distribution. Whichever path you choose, this chapter assists you in getting
to your destination.

Preface

Next Steps
Using App Inventor is an excellent way to build an Android app (see Figure P.6). As with many
other skills in computer science, building a mobile application is an exercise in both creativity
and logical thinking. You need to solve rational, complex problems while simultaneously
building out a creative vision. Although you can learn App Inventors basics rather quickly, you
can build more powerful and complex applications with additional time and practice.

Figure P.6

You can create a variety of application types with App Inventor.

Chapter 1 begins with some essential computer science principles. Understanding how an
operating system functions and what developers are actually doing when building software will
give you a solid foundation in effective programming. With this established, you will be ready
to build a variety of sample Android apps as you follow along in the book and then extend this
skill set to your own Android apps.

xxi

This page intentionally left blank

This page intentionally left blank

2
Building with
MIT App Inventor

Understanding the functionality of an app is only one part of programming. The programmer
also has to focus on specific features and how to implement them.
Before the serious work of building apps begins, a brief overview of how applications perform
is useful. Lets get beyond the pretty screen and graphics that you interact with and start to
look at what is really happening and how to make an app perform the way you envision. After
doing this, you will be able to understand how apps can request information, pull in data from
the Internet, and interact with other applications.

The MIT App Inventor Site

MIT App Inventor lives on the Web, just like other online productivity tools such as Gmail
and Google Drive. You do not need to download any software or save work to your hard drive
before you use App Inventor (see Figure 2.1).
The choice of web browser is very important; the App Inventor team recommends using Google
Chrome or Firefox. Choosing a different browser, such as Internet Explorer, could result in
errors or other complications when working with App Inventor.
Exploring the App Inventor site is a good way to get a feel for what is available. To begin,
launch your browser and go to appinventor.mit.edu (see Figure 2.2). The home page includes
the portal to the App Inventor tool, along with many online tutorials and other helpful
materials.

18

Chapter 2

Building with MIT App Inventor

Figure 2.1

The Designer interface in MIT App Inventor.

Signing In
To begin a session with App Inventor, click the Create button at the top of the home page (see
Figure 2.2).

Figure 2.2

The App Inventor home pageclick Create to get started.

The MIT App Inventor Site

Next, App Inventor asks permission to connect to your Google account. This can be a personal
Google account (one that ends with an @gmail.com address) or a Google apps account
managed by a university, business, or other type of organization (see Figure 2.3).

Figure 2.3

Add your Google account to connect to App Inventor.

After signing in with your Google account, you must authorize App Inventor to access your
Google account so that it can verify your login information. If you select Remember This
Approval for the Next 30 Days, then you will not need to repeat this step when you return to
work on apps (see Figure 2.4). At the end of the 30 days, you simply need to reauthorize access.

Figure 2.4

Authorize your Google account.

19

20

Chapter 2

Building with MIT App Inventor

The next screen is the file system where App Inventor projects are stored. As you create more
projects over time, you can find them there, just as a folder on your computer holds a list of all
your documents saved to that location.
Next, click New Project and then type CatWatch into the box (spaces are not allowed). This
takes you to the Designer screen.

Designer
App building begins in the Designer. Here you create the user interface, or the look and feel
of the app. You also add the components needed to receive input from the user, as well as the
components needed to display output or information to the user. The Designer also is where
you specify which nonvisible components the app will use, such as the dialer, GPS, or SMS.
Notice that because we are in Designer, the Designer button in Figure 2.5 is slightly grayed out
in the top-right corner of the screen. This button, along with the one next to it, labeled Blocks,
indicates which editor you are using.
The left side of the screen features the Palette (see Figure 2.5), which, as the name implies, is
the space for all the creation tools (the next chapter details the full suite).

Figure 2.5

The App Inventor Designer screen.

Blocks Editor
The Blocks Editor is where you will be programming an apps behavior (see Figure 2.6). Here
you will add the commands that do the work of the app. As just noted, you access it from the
Blocks button at the top right.

The MIT App Inventor Site

Figure 2.6

More specific programming takes place in the Blocks Editor.

MIT App Inventor uses the metaphor of drawers containing puzzle pieces for programming.
Each item in the Blocks palette under Built-in is considered a drawer. The drawers contain the
puzzle-looking pieces. The programming is accomplished by connecting the puzzle-looking
pieces. Despite its seeming simplicity, App Inventor has many powerful capabilities that enable
the user to build complex applications.
To better understand what programming an app entails, it is useful to understand what is going
on inside an application.

The AI2 Companion App

App Inventor has a useful tool for continuously seeing your app in real time on an Android
device during each step of the development process.
You can find the MIT AI2 Companion app (see Figure 2.7) in the Google Play Store by performing a search for MIT AI2 Companion.
When you are building your app, the computer and Android device must be connected to the
same wireless network (the desktop machine might have a wired connection). To connect your
app to your device in App Inventor on your computer, click AI Companion on the Connect tab
(see Figure 2.8).

21

22

Chapter 2

Building with MIT App Inventor

Figure 2.7

The AI2 Companion Android app.

Figure 2.8

Connecting to the Companion app.

You can then type in a six-digit code or scan the QR code with your device (see Figure 2.9),
using the App Inventor app. Doing so brings up a live view of your app. As you add elements
to it with the MIT App Inventor software, those changes are reflected in real time on your
device.

The MIT App Inventor Site

Figure 2.9

Connecting to the Companion app.

The Android Emulator

As another option, App Inventor has an Android emulator that puts a simulated Android screen
on the computer desktop. This enables you to view the apps progression if you do not have an
Android device. It also is useful for anyone using App Inventor in a classroom environment.
An installer package is available for Windows or Mac. Choose the proper platform from the
App Inventor site and download it to your computer (see Figure 2.10).
To view your app, choose Emulator from the same menu in Figure 2.8.

USB Connection to Android Device

Another option is to connect your device to the computer with a USB cable. This method
provides the benefit of seeing the app on your Android device just as if you were using the
MIT App Inventor Emulator application. This option also does not require a wireless network
connection (see Figure 2.11).
First, you need to install the App Inventor setup software to your Mac or Windows PC. Many
Android devices also require the installation of driver software (available at the device manufacturers website). Your device might require other changes to the devices settings. Android has a
web page that describes the potential changes and implications at http://appinventor.mit.edu/
explore/ai2/setup-device-wifi.html.
After you have properly configured your device, select Connect and choose USB from the
menu. After a few moments, the app should appear live on your device.

23

24

Chapter 2

Figure 2.10

Building with MIT App Inventor

The emulator download package. The emulator can be downloaded to a Mac or a

Windows PC.

Figure 2.11

The Android emulator.

Getting Inside an App

Getting Inside an App

Apps have an internal design, the programming that works with the user interface. Effective
programming entails knowing how to use the internal components to effectively implement
what is visible to the user.
A good way to think about the internal pieces of an app is to focus on components and
actions. The components are the various tools you find in App Inventor to create tasks. Think
about the Design Editor and all the onscreen tools: buttons, images, drawings, and so on. In
the Design Editor, you pull into your app all the pieces that make up the user interface, or what
the users of your app will see on the devices screen.

Event Handlers
All of your blocks, the pieces that make your app perform tasks, will be connected with an
event handler. Events are created whenever something in the real world happens to the app,
such as when the user clicks a button, the phones location changes, or the phone receives a
text message. Blocks exist for just about everything you want to do in an app; taking a picture,
checking the GPS location, displaying text, changing the color of a component, finding out
what the user entered into a text box, and so on. You can add (or remove) these blocks from an
event handler, allowing the programming to determine the precise set of actions to take when
the user presses a button.
When any event happens, App Inventor runs whatever blocks are inside the event handler
block for that event. For example, Figure 2.12 shows a button labeled Speak; the block when
Speak.Click do is the event handler for when that button is clicked.
Imagine that we wanted to write an app to speak written text. We would need a button to
start the process. To do this, we would have to drag the action block into the event handler.
Whenever the button is clicked, that block will be called, and the device will move to whatever blocks have been placed inside the event handler. The event handler will grow and shrink
as needed to accommodate whatever blocks are placed inside it (in Figure 2.13, this involves
speaking some text). The way it is right now, however, the app has a button and a text-tospeech component, but it wont do anything because the event handler is empty. After we drag
in some action blocks, it will do those actions whenever the button is clicked. Note that the
component used to initiate the action (such as a button) is usually different than the component that does the requested action (such as taking a picture or sending a text message).

25

26

Chapter 2

Building with MIT App Inventor

when Speak.Click do action block

Figure 2.12

An event handler in the Blocks Editor.

Figure 2.13

An event handler.

Doing One Thing at a Time

Modern smartphone applications perform a large number of tasks simultaneouslyor at least
appear to do so. All computers, including smartphones, are so good at switching between different tasks so quickly that it appears they are doing two unrelated things simultaneously.
Many computers have multiple cores, or processing units. These computers really can do more
than one thing because each core can work on a separate task. But those cores are also switching very quickly between many tasks that the system and user are trying to do. You might have
two, or four, or even more separate cores in your computer or phone, but between the operating system and the apps, the processor has hundreds of small tasks to work on.
Most of the things you will do in App Inventor are single task, meaning that only one task
is actually running at a time. However, they can happen quickly and get out of the way for
other things to run. In the code blocks, only one event handler can run at a time. So when an
event happens and the event handler begins executing the blocks you put in it, all other event
handlers must wait until this one is done.

Exercise: Sherlock Is Watching

Events that take place while a handler is already running are put in a queue and will run when
it is their turn. Most event handlers run much faster than events are generated, so this is often
not an issue. The most common actions, such as updating the text in a label or looking at the
state of a check box, occur nearly instantly. However, other actions, such as working through
a large collection of data, might take a long time, and the app will appear frozen until the
process finishes.
While an event handler is running, the display isnt updated. Again, this isnt an issue most of
the time, but if you have an event handler that is taking long enough for a user to notice, the
display will appear frozen until the event handler is complete.
You might notice that some features in App Inventor take time, such as playing sounds or
music. Other features have to wait for something on the Internet to respond, which can cause
an unpredictable amount of delay time. But the display doesnt freeze when you play music,
and the app continues to work while waiting for a web page to load. Android provides the
means to allow some tasks, such as playing music, to run in the background without disrupting
the normal actions your app performs. Android provides other means of dealing with actions
that could take a long time, or that might never finish, such as loading a web page or waiting
for the user to take a picture, without affecting the normal functioning of your app. The
actions for music and sound are made possible by the Android system. Your app simply hands
off the sound file to the phones operating system and tells the phone to handle it. The music
plays while the app continues to work.
Later in the text, we provide more details on how App Inventor switches tasks. You can use
that knowledge to make better apps.

Exercise: Sherlock Is Watching

Next we create an app that uses some of the basic functionality described in this section. As
with the other apps you will build in this book, there is flexibility in the specifics. Feel free to
experiment after following the steps to get a feel for how all the pieces work and the type of
customizations possible. Learning to build apps is a process that involves both following the
step-by-step directions and branching out on your own.
1. Navigate back to your projects by clicking My Projects at the top of the page (see
Figure 2.14).
2. If you created a CatWatch app earlier, select it from your list of projects; otherwise, create
a new project called CatWatch.
3. Click User Interface in the Palette. The Palette then expands to reveal several choices,
such as Button, Checkbox, and Clock. Click and hold the Button choice, and then drag
it onto the Android home screen in the Viewer (see Figure 2.15). A button appears in the
Viewer, indicating that an element has been added to the screen. The buttons name also
is added to the Components tree.

27

28

Chapter 2

Building with MIT App Inventor

Figure 2.14

The My Projects button is for creating new projects and accessing existing ones.

Figure 2.15

Adding a button to the Viewer.

4. The button shows with the following default text: Text for Button1. Lets change the
name of the button. Click the label in either the Viewer or the Components tree and
then click the Rename button. In the box that launches, give it another name, such as
Meow.

Exercise: Sherlock Is Watching

5. Notice that changing the name of the button does not change the buttons text. To
change the displayed text, click the button and then find the box labeled Text inside
the Properties pane. Then highlight the text and type Meow. The text will change in the
Viewer.

Adding an Image
Images are an effective way to add some visual polish to an app. Next, we insert an image into
the app.
1. If you have not done so already, download the CatIsWatching image from the books
InformIT page.
2. Find the box labeled Media, which is just below the Components box. Click the Upload
File button (see Figure 2.16) and then upload the CatIsWatching file. This adds the image
to the app, making it available to any component that uses the image. Note that the
filename appears in the media box.

Figure 2.16

Uploading an image.

3. Click User Interface in the Palette. Then click and hold the image and drag it onto the
Android home screen in the Viewer. A blue bar shows where you can place the image.
By moving the mouse, you can place the image above or below the Button. When
the blue bar is below the Button, drop the image. Next click the Image1 button in the
Components box. The Properties pane updates to display the properties associated with
the image.

29

30

Chapter 2

Building with MIT App Inventor

4. Click the box labeled Picture. All available images in your app are listed; select the
CatIsWatching image. Click OK to see the image appear in the Viewer (see Figure 2.17).

Figure 2.17

Uploading an image.

5. The image of Sherlock the cat needs to be tweaked to properly fill the screen. Click in the
width box and then click the box that reads Pixels. Type 320 pixels.
6. The procedure is the same for the height: Click the height box and then type 400 pixels.
7. This app requires one more element. From User Interface, click and drag the Label
component. Again, watching the blue insertion bar, drop the Label between the button
and the Image components. Next, select Label1 in the Components box. Click the button
underneath the BackgroundColor label, which is currently set to None. Then choose
Green.
8. It is time to write some text inside the box. Go to the Text box and type Sherlock is
watching. Choose TextAlignment and change this selection to Center. Notice that
this does not change the position of the labelit changes only the text inside it (see
Figure 2.18).
9. Click Blocks in the upper-right corner. You should see Meow, Label1, and Image1
underneath Screen1. This is where you would drag these components into the Blocks
Editor for further programming.
This first app is relatively simple, but it should make you feel more familiar with the core pieces
of App Inventor. Later apps will make more extensive use of the interface elements and how
they can be programmed. We will also explore how to put this app on your own device and
interact with it.

What Can You Build?

Figure 2.18

The completed image and label.

What Can You Build?

This first exercise demonstrates a little of what is possible with App Inventor. Throughout this
book, you will learn how to maximize the power of App Inventor to build a variety of apps.
The skills you gain will also empower you to begin your own experimentation and build apps
beyond the walk-throughs provided in this text.
The following sections preview some of the other apps and exercises we will be exploring
throughout the book. With careful attention to detail and some creativity, you will be able to
build these apps and have the foundations for creating your own set of applications.

Speak, Android!
Give your Android device a voice. This simple app (see Figure 2.19) teaches you how to enable
an image to respond to touch and speak on command. You can also use it to explore other
ways to work with images.

Pollock
Named after Jackson Pollock, the American artist who helped popularize abstract art, this app
turns an Android device into a canvas for color (see Figure 2.20). You will learn how to turn
buttons into paint and use the Canvas component.

31

32

Chapter 2

Figure 2.19

Building with MIT App Inventor

The Speak, Android app.

Figure 2.20

The Pollock app.

Fore
MIT App Inventor has some surprisingly powerful tools for creating games. Various motionenabled commands enable you to create some powerful games. The game you will be building
will show how you can use the canvas and various sprites to create a game field and objects
that can be manipulated while playing (see Figure 2.21).

Android Quiz
Games can be fun to create, but imagine being able to use an app for your own productivity.
Android Quiz (see Figure 2.22) demonstrates that you can create an actual assessment app.

Uploading to Google Play

Later chapters discuss several ways to share your app with others. However, the ultimate step is
uploading your app to Google Play for distribution to other Android users.

Summary

Figure 2.21

The Fore golf game.

Figure 2.22

Android Quiz.

Summary
MIT App Inventor is a powerful tool that beginning coders or anyone dabbling with mobile
technology can use to build Android apps. In this chapter, we looked at the kind of apps that
are possible with this cloud-based tool.
Computer science is applied reasoning using both art and science. It requires the ability to
communicate ideas through a combination of language and powerful technology. Hopefully
this first app has demonstrated that App Inventor is an excellent starting point for anyone
looking to create with computer technology, whether professionally or recreationally.
In the next chapter, we build an app that includes both an image and sound, and we look at
how to see the app on your own device.

33

34

Chapter 2

Building with MIT App Inventor

Exercises
1. Add another button to the Viewer. Change the text, trying different configurations to see
how they fit in the Viewer.
2. Upload a different image. Download one from the Web or upload an image on your
computer. Try different configurations for size in relation to the rest of the app. Decide
on the optimal size for images in the context of the rest of the content.
3. Change the text and color scheme in the label. Try labels in different locations of the
app. Pay attention to how the Designer works in terms of the placement of components
and how you can customize the components.

This page intentionally left blank

Index

A
abstraction
lists, 98-99
procedures, 98-99

acceleration, 158
accelerometer, 41
Accelerometer Sensor, 158-160
accelerometers, 158
detecting tilt, 159-160

Action, 154
actions, 27
Activity Starter, 43, 154
adding
animations, 113-114

ball, 116
canvas, 116
ImageSprite, 114-116
images, 29-31

AI2 Companion app, 21-22

.aia files, creating, 198-199
Android devices, USB connections, 24
Android emulator, 23-24
Android Quiz, 33, 105-112
animations
adding, 113-114

ball, 116
canvas, 116
ImageSprite, 114-116

208

animations

examples, 117-118

edges and collisions, 119

smooth animation, 118
exercises, 123

Fore, 119-123

GPS (Global Positioning System),

151-152

location data, 152-153

Maps app, intents, 153-155
Pollock app, 32, 60-64

APK files, 191-198

additional exercises, 64

downloading

interfaces, 61-62

to computers, 192-196

multiple screens, 134-136

with QR codes, 196-198

programming blocks, 62-64

uploading, Google Play Developer

Console, 204

Pushpin app, 161-172

App distribution exercise, 200-205

Google Play Developer Console,
201-205

store listings, 203-204

version codes, 200-201

application keys, Google Play Developer

Console, 204-205
applications, 10-12
Android Quiz, 33
building

current location readout,

programming, 165-168
designing current location readout,
162-164
extension activities, 172
pinning locations, 170-171
pinning locations to remember
later, 168
Random Guess app, 69-71
Speak, Android!, 31-32
Up/Down Counter app, 67-68

with multiple screens, 126-127

uploading to Google Play, 33

Sherlock Is Watching, 27-29

WriteMore, 182-186

Clicker-Counter app, 56-57

distributing

.aia files, creating, 198-199

APK files, creating, 191-198
App distribution exercise, 200-205

apps, 10-12
Android Quiz, 33
building

with multiple screens, 126-127

Sherlock Is Watching, 27-29

Live Mode, 189-190

Clicker-Counter app, 56-57

security settings, 190-191

distributing

doing one thing at a time, 26-27

.aia files, creating, 198-199

extending app capabilities, 8-9

APK files, creating, 191-198

Flick app, 81-83

App distribution exercise, 200-205

Fore, 32-33, 119-123

Live Mode, 189-190

scorekeeping, 122-123
location-aware apps

security settings, 190-191

doing one thing at a time, 26-27

component properties

extending app capabilities, 8-9

Blocks Editor

Flick app, 81-83

event handlers, 26

Fore, 32-33, 119-123

MIT App Inventor, 20-21

scorekeeping, 122-123

BluetoothClient, 44

location-aware apps

BluetoothServer, 44

GPS (Global Positioning System),

151-152

built-in variables, 56

location data, 152-153

Maps app, intents, 153-155
Pollock app, 32, 60-64
additional exercises, 64

interfaces, 61-62

Clicker-Counter app, 56-57

extensions, 58
getters, 57-58
setters, 57-58

Button, User Interface element, Palette

(Designer), 37

multiple screens, 134-136

programming blocks, 62-64

Pushpin app, 161-172

Call SendQuery, 178

current location readout,

programming, 165-168

Camcorder, 39, 146

designing current location readout,

162-164

Camera Action, 146

Camera, 39

extension activities, 172

Camera component, 144-145

pinning locations, 170-171

canvas, 41, 59

pinning locations to remember

later, 168

Cell ID, 152

Random Guess app, 69-71

animations, 116

Speak, Android!, 31-32

Checkbox, User Interface element, Palette

(Designer), 37

Up/Down Counter app, 67-68

checkpoints, saving, 133-134

uploading to Google Play, 33

Clicker-Counter app, 56-57

WriteMore, 182-186

extensions, 58

arguments, 79-80

code readers, 197

audio, 140-141

collisions, animations, 119

colors, lists, 92

B
backing up your work, 133-134
ball, 41, 116
animations, exercises, 117-118

commenting, debugging, 130

component properties, 72
built-in variables, 56

Clicker-Counter app, 56-57

bar code scanner, 41

Clicker-Counter app extensions, 58

blocks, FusionTables, 178-179

getters and setters, 57-58

209

210

components

components, 35

Designer, 36

Components (Designer), 45-46

Components, 45-46

computer science, 33

Media box, 47

connecting, devices, Speak, Android!,

48-50

MIT App Inventor, 20

Palette, 37

connectivity components, Palette

(Designer), 43

connectivity components, 43

Contact Picker, 42

layout, 38-39

current location readout

LEGO MINDSTORMS, 44-45

drawing and animation, 40-41

designing, in Pushpin app, 162-164

media, 39-40

programming, in Pushpin app, 165-168

sensors, 41

D
data

social components, 42
storage components, 43
User Interface element, 37-38

lists, 85

Properties box, 46-47

location, 152-153

Sensors palette, 151

retrieving from TinyDB, 175

Viewer, 45

sharing between screens, 129-130

data structures, lists, 93-94

designing, current location readout,

Pushpin app, 162-164

databases

detecting tilt, 159-160

exercises, WriteMore, 182-186

Google FusionTables, 177-180
TinyDB, 174-176

retrieving data, 175

TinyWebDB, 176-177
Web component, 180-182

Web APIs, 182

devices, connecting (Speak, Android!),

48-50
distributing apps
.aia files, creating, 198-199
App distribution exercise, 200-205
creating APK files, 191-198
Live Mode, 189-190
security settings, 190-191

DataPicker, User Interface element, Palette

(Designer), 38

do block, 79

DataUri, 154

Do It, 131-132

debugging, 130

do procedure, 77

commenting, 130
Do It, 131-132
names, 132-133
testing, 131

downloading APK files

directly to computers, 192-196
with QR codes, 196-198

drawing and animation, Palette

(Designer), 40-41

Google Play Developer Console

E
edges, animations, 119
Email Picker, 42

extending app capabilities, 8-9

extension activities, Pushpin app, 172
extensions, Clicker-Counter app, 58

empty lists, creating, 87-88

event handlers, 25-26

event parameters, special variables, 58-60

files, .aia files, 198-199

exercises

Flick app, 81-83

Android Quiz, 105-112

animations, 123

Fore, 32-33, 119-123

scorekeeping, 122-123

Camera Action, 146

functionality, multiple screens, 127

Flick app, 81-83

Fusion Tables Control, 43

Fore, 119-123

FusionTables, 177-180

lists, 112

blocks, 178-179

media, 146

queries, writing, 179

multiple screens, 136

query formats, 179

Pollock app, 60-64

additional exercises, 64
interfaces, 61-62
multiple screens, 134-136

games. See also animations,

accelerometers, 158

programming blocks, 62-64

Get, 181-182

procedures, 83

getters, 57-58

Pushpin app, 161-172

global variables, 64-67, 72, 156

designing current location readout,

162-164
pinning locations, 170-171
pinning locations to remember
later, 168
Sherlock Is Watching, 27-29

adding images, 29-31

Speak, Android!, 47-53

examples, Up/Down Counter

app, 67-68

Google FusionTables, 173, 177-180

blocks, 178-179
queries, writing, 179
query formats, 179

Google Maps, 3-4, 149-150, 154

Google Now, 4-5

connecting your device, 48-50

Google Play, uploading apps to, 33

seeing your app on connected

devices, 50-53

Google Play Developer Console, 201-205

WriteMore, 182-186

expandable lists, 100-102

application keys, 204-205

store listings, 203-204
updating time, 205
uploading APK files, 204

211

212

Google Play Store

Google Play Store, 7

ListPicker, 89-91

Google services, 9-10

GPS (Global Positioning System), 151-152

User Interface element, Palette

(Designer), 38

lists, 85, 87

gravity, 159

abstraction, 98-99

colors, 92
creating

HasAccuracy, 166
headings, ImageSprite, 115
home screen launchers, 6

I
Image, User Interface element, Palette
(Designer), 38
ImagePicker, 40, 141-144
images, 141

empty lists, 87-88

with stuff already in it, 88
data, 85
as data structures, 93-94
defining variables that depend on
runtime elements, 104-105
exercises, 112

Android Quiz, 105-112

list blocks, 85-87

adding, 29-31

ListPicker, 89-91

Camera component, 144-145

lists that expand on demand, 100-102

ImagePicker, 141-144

ImageSprite, 41, 114-116

multiple lists that expand on

demand, 94-97

intents, Maps app, 153-155

one-dimensional lists, 92-93

interfaces, Pollock app, 61-62

running off the end of, 102-104

intervals, ImageSprite, 115

issues with multiple screens, 127-128

L
Label, User Interface element, Palette
(Designer), 38
languages, programming languages, 12-13
launchers
home screen launchers, 6
switching between, 6

launching code readers, 197

layout, Palette (Designer), 38-39
LEGO MINDSTORMS, 44-45
list errors, 103

working with, 91-92

ListView, User Interface element, Palette

(Designer), 38
Live Mode, 189-190
local variables, 65, 68-69
Random Guess app, 69-71

location, GPS (Global Positioning System),

151-152
location data, 152-153
passing to Mapping app, 155
saving, 155-158

location scanners, 41
Location Sensor, 151-152, 165

Phone Number Picker

issues with, 127-128

location-aware apps
GPS (Global Positioning System),
151-152

sharing data between screens, 129-130

switching screens, 128-129

location data, 152-153

saving, 155-158
Maps app, intents, 153-155

LocationChanged, 152-153

M
Maps app, intents, 153-155

N
names, 132-133
naming, projects, 36
near field, 41
Notifier, User Interface element, Palette
(Designer), 38

Material Design, 125

media
audio, 140-141

one-dimensional lists, 92-93

exercises, 146

operating systems, 2-5

Camera Action, 146

images, 141

user interfaces (UI), 5-7

Orientation Sensor, 41, 160-161

Camera component, 144-145

ImagePicker, 141-144
Palette (Designer), 39-40
video, 145-146

Media box, Designer, 47

Media palette, 139
MIT App Inventor, 11
AI2 Companion app, 21-22
Android emulator, 23-24
USB connection to Android devices, 24
website, 17-18

Blocks Editor, 20-21

Designer, 20
signing in, 18-20

multiple lists that expand, 94-97

multiple screens, 125

P
Palette (Designer), 37
connectivity components, 43
drawing and animation, 40-41
layout, 38-39
LEGO MINDSTORMS, 44-45
media, 39-40
sensors, 41
social components, 42
storage components, 43
User Interface element, 37-38

passing location data to Mapping

apps, 155
PasswordTextBox, User Interface element,
Palette (Designer), 38

building apps with, 126-127

Phone Call, 42

exercises, 136

Phone Number Picker, 42

Pollock app, 134-136

functionality, 127

213

214

pinning
pinning
locations, Pushpin app, 170-171
locations to remember later,
Pushpin app, 168

Play Store app, 7

Player, 40, 141
Pollock, Jason, 32

extension activities, 172

pinning, locations, 170-171
pinning locations to remember
later, 168

PUT, 182

Pollock app, 32, 60-64

additional exercises, 64
interfaces, 61-62

QR codes, downloading, APK files, 196-198

multiple screens, 134-136

queries, writing (FusionTables), 179-180

programming blocks, 62-64

query formats, FusionTables, 179-180

POST, 182

privacy, TinyWebDB, 177

procedures

Random Guess app, 69-71

abstraction, 98-99

retrieving data, TinyDB, 175

arguments, 79-80

running off the end of lists, 102-104

defined, 75-76

exercises, 83

Flick app, 81-83

reasons for using, 79
types of, 76-78

programming, current location readout, in

Pushpin app, 165-168
programming blocks, Pollock app, 62-64
programming languages, 12-13
projects
creating, 36
naming, 36

properties, 56
component properties, built-in
variables. See built-in variables

Properties box, Designer, 46-47

Pushpin app, 161-172
current location readout, programming,
165-168
designing current location readout,
162-164

saving
checkpoints, 133-134
location data, 155-158

saving your work, 133-134

scope
global variables, 64-65
local variables, 65

scorekeeping, Fore, 122-123

screen transitions, 128
screens
multiple. See multiple screens
sharing data between screens, 129-130
switching, 128-129

security, TinyWebDB, 177

security settings, apps, distributing,
190-191

types of

sensors, 149-150
Accelerometer Sensor, 158-160

spinners, User Interface element, Palette

(Designer), 38

accelerometers, 158

sprites, 114

detecting tilt, 159-160

exercises, Pushpin app, 161-172

ball, 116
ImageSprite, 114-116

Location Sensor, 165

StatusChanged, 152

location-aware apps, GPS (Global

Positioning System), 151-152

storage components, Palette (Designer), 43

Orientation Sensor, 160-161

store listings, Google Play Developer

Console, 203-204

Palette (Designer), 41

storing things in, variables, 72

Sensors palette, Designer, 151

strengths of Android, 7

Set ApiKey, 178

Set Query, 178

strengths of Android extending app

capabilities, 8-9

setters, 57-58

strengths of Android Google services, 9-10

Sharing, 42

switching

sharing data between screens, 129-130

Sherlock Is Watching, 27-29

between launchers, 6
screens, 128-129

adding images, 29-31

signing in, MIT App Inventor website, 18-20

single tasks, doing one thing at a
time, 26-27

testing, 131

skin, 6

TextBox, User Interface element, Palette

(Designer), 38

sliders, User Interface element, Palette

(Designer), 38

Text to Speech, 40

Texting, 42

smooth animation, 118

tilt, detecting, 159-160

social components, 42
Sound, 140-141

time, updating (Google Play Developer

Console), 205

sound, 40

TinyDB, 43, 130, 156, 174-176

Sound Recorder, 40
Speak, Android!, 31-32, 47-53
connecting your device, 48-50
seeing your app on connected
devices, 50-53

retrieving data, 175

TinyWebDB, 43, 176-177, 184

security and privacy, 177

Twitter, 42
types of

special variables, 58-60

lists, one-dimensional lists, 92-93

Speech Recognizer, 40

procedures, 76-78

speed, ImageSprite, 115

215

216

UI (user interfaces)

W-X

UI (user interfaces), 5-7

Web, Palette (Designer), 44

updating time, Google Play Developer

Console, 205

web APIs, 182

Up/Down Counter app, 67-68

uploading

Web component, 144, 180-182

web APIs, 182

web database service, setting up, 176

APK files, Google Play Developer

Console, 204
apps to Google Play, 33

USB connection to Android devices, 24

User Interface element, Palette (Designer),
37-38
user interfaces (UI), 5-7

V
variables, 55-56

website, MIT App Inventor, 17-18

Blocks Editor, 20-21
Designer, 20
signing in, 18-20

WebViewer, User Interface element, Palette

(Designer), 38
When GotResult (result), 179
widgets, 8
WriteMore, 182-186
writing, queries, FusionTables, 179

built-in variables. See built-in variables

global variables, 64-67, 156

Up/Down Counter app, 67-68

lists, defining variables that depend on
runtime elements, 104-105
local variables, 65, 68-69

Random Guess app, 69-71

special variables, 58-60
storing things in, 72

version codes, App distribution exercise,

200-201
version names, 200-201
video, 145-146
Video Player, 40
Viewer (Designer), 45
visual programming language, 12-13

Y-Z
Yandex Translate, 40