Professional Documents
Culture Documents
Become An App Inventor Chapter Sampler
Become An App Inventor Chapter Sampler
MITApp Inventor
The official guide from
Your Guide to Designing, Building,
and Sharing Apps
Copyright © 2022 by Karen Lang and Selim Tezel
All rights reserved. No part of this book may be reproduced, transmitted, or stored
in an information retrieval system in any form or by any means, graphic, electronic,
or mechanical, including photocopying, taping, and recording, without prior
written permission from the publisher.
APS 26 25 24 23 22 21
10 9 8 7 6 5 4 3 2 1
MITeen Press
an imprint of Candlewick Press
99 Dover Street
Somerville, Massachusetts 02144
miteenpress.com
candlewick.com
App Inventor
MITApp Inventor
The official guide from
Your Guide to Designing, Building,
and Sharing Apps
Foreword 6
Introduction 8
Acknowledgments 216
Bibliography 218
Index 220
Photo Credits 224
Foreword
6
assignment. After spending just a book for anybody looking to develop
few minutes exploring App Inventor mobile apps using MIT App Inventor.
and reading through the first chapter, I want to thank the authors, Ms.
he soon had a prototype ready to Lang and Mr. Tezel, for providing
go. The book not only allows anybody a step-by-step guide for all young
to build apps relatively quickly, but it students. This book should be in
also enables teachers and educators every library, school, and STEM and
to introduce their students to easy coding club, and I hope it will inspire
mobile app development without a new generation of inventors and
having to develop advanced skills innovators.
themselves. Given that App Inventor
allows more time to focus on problem- Gitanjali Rao
solving, teachers and educators can Time magazine’s 2020 Kid of the Year
now include this in their curriculums
for a problem-based learning
approach.
Each chapter also features
heartwarming true stories of young
innovators and changemakers
who used App Inventor to solve
problems. It was great to read
about their journeys from vision to
implementation, all using the varied
features App Inventor provides.
As a prolific user of MIT App
Inventor, I strongly recommend this
7
lNTRODUCTION
Have you ever played a game on a tablet But where do apps come from? They’re
or watched a video on your phone? If built by people called programmers.
so, you probably used an app to do it. Programmers create a set of instructions
Mobile applications, or apps for short, are that tells a device what to do. They write
programs designed for use on a device the instructions in a special language,
like a phone or tablet. Apps can help you called a programming language, so
check the weather, look up information a computer can understand it. The
online, and share photos with friends. instructions are also known as code, and
another name for programmers is coders.
// NOTE
8
MIT App Inventor is a kind of programming
language that uses blocks, which look like
puzzle pieces with words on them. The
blocks fit together to make instructions
that get translated into computer language
so a mobile device can follow them.
9
lntroduction
If you’re looking for some App Inventor innovation workshops to share her
inspiration, meet Gitanjali Rao, a teen from knowledge and scientific method with
Lone Tree, Colorado, who was named other young people around the globe. She
Time magazine’s first-ever Kid of the has already mentored thirty thousand kids
Year in 2020. She’s an amazing scientist through her workshops.
and innovator and an accomplished app
What about you? Do you have something
inventor. In 2017, she demonstrated
that you are passionate about? Does that
her invention Tethys, which measures
passion lead you to ideas for new apps?
lead levels in water. She was inspired
Or maybe you have thoughts about ways
to create Tethys by the Flint, Michigan,
to improve an app that already exists.
water crisis, in which the city’s drinking
Awesome! This book will teach you how
water was highly contaminated by lead
to use MIT App Inventor to take your ideas
and was poisoning children. Her device
and turn them into apps for your phone or
uses carbon nanotubes to detect lead
tablet. Soon you’ll be able to share your
levels and report that information through
apps with friends and family and even
Bluetooth to an app she created with MIT
publish them for people around the world
App Inventor. Since then, Gitanjali has
to download and use. Soon you’ll be an
continued to learn and invent. Her latest
app inventor too.
project is Kindly, an app that helps prevent
cyberbullying. The app detects words
associated with bullying, notifies the user,
and gives them the opportunity to edit
their language.
10
11
CHAPTER 1
There are a few steps you’ll need to take If you’re using an Android device, open
before you can dig in and start writing the Play Store app and search for MIT AI2
apps. First, you’ll need a computer or Companion. You can also type this link into
laptop on which to design and write the a browser (like Google Chrome): http://
code for your apps. Then you’ll want to try appinv.us/ai-Android. If you are using an
out your apps with a mobile device. To do iOS device, open the App Store app and
that, you’ll need to install an app called search for MIT AI2 companion. You can
the MIT AI2 Companion on your phone or also use the link http://appinv.us/ai-iOS.
tablet so you can load your projects onto Click the button to install the MIT AI2
your device and test them. Companion on your device. The icon for
the app will show the mascot, Codi the Bee.
12
// NOTE
If you don’t have access to a mobile device to your computer with a USB cable.
device, or don’t have a good Wi-Fi To get instructions for these other options,
connection, there are other ways to test open the AI2 Getting Started page (http://
your apps. If you don’t have a mobile bit.ly/ai2-getstarted) in a web browser
device, you can use the emulator that App and click on the instructions for the option
Inventor provides, which looks like a you’d like to use.
phone but runs in your computer’s
Once you have set up your mobile device,
browser. You can also create and test App
open a browser like Google Chrome or
Inventor projects with a Chromebook. If
Mozilla Firefox on your computer.
Wi-Fi is an issue, you can connect a mobile
13
Chapter 1 — Let’s Get Started
Logging in with a
Gmail Account
If you have a Gmail account, type this
address into the URL field:
http://ai2.appinventor.mit.edu.
14
Logging in without a
Gmail Account
If you don’t have a Gmail account and can’t
make one, use this address: http://code
.appinventor.mit.edu. Just press the button
Continue Without An Account , and you
can log on to the server.
15
Chapter 1 — Let’s Get Started
16
You’ll be asked to name your new project.
For your first app, you can name it
HelloItsMe.
HelloItsMe
// NOTE
// NOTE
17
Chapter 1 — Let’s Get Started
The Designer
Palette Viewer
choose and add components arrange components
18
Components Properties
list added components change component settings
19
Chapter 1 — Let’s Get Started
20
The Viewer Panel
To select a component, click on it, drag it,
and drop it onto the phone screen image
that appears in the second panel, the
Viewer.
21
Chapter 1 — Let’s Get Started
22
For example, if you select Button1,
you can make changes to things like its
background color, font size, shape, text,
and text color!
23
Chapter 1 — Let’s Get Started
24
The Blocks Palette
On the left in the Blocks Editor is the
Blocks palette. This is where you can find
all the blocks, divided into two sections—
Built-in blocks and Component blocks.
Built-in Blocks
Built-in blocks are organized by category.
Clicking on the category makes its blocks
appear. For example, clicking on Math
shows all math-related blocks, like the +
block, which lets you add numbers, and
the / block, which lets you divide them.
25
Chapter 1 — Let’s Get Started
Component Blocks
Component blocks match up with the
components that you’ve added. As soon
as you add a component in the Designer,
it will automatically appear here too,
with its own set of blocks that control the
component’s behaviors, properties, and
actions. Click on a component to make
its available blocks appear. For example,
clicking on Button1 shows all the blocks
you can use that control the behavior of
that button, or what should happen when a
user clicks or touches the button.
26
If you click on Label1, you’ll see that
it doesn’t have any gold event blocks,
because you can’t click or touch a label to
make it do something the way you can with
a button. But you’ll see that labels do have
green blocks, which set their properties.
27
Chapter 1 — Let’s Get Started
28
By adding blocks and snapping them Now that you know the basics, are you
together, you’ll create a set of instructions. ready to get started?
And that’s how you’ll build apps.
29
Two Sisters
Ice: That’s not the point. I fixed some Bethany: At that time, Ice got to
of the other machines before you or learn how to code on AI2, and when
our parents even noticed. Anyway, she got home, she proudly showed
then we got this really cool machine us her apps. I got interested in AI2
30
Ice: Life was all right, but then the
COVID-19 pandemic spread across
the globe. We couldn’t go to school or
go out, so we gradually became bored
and unmotivated. “What can we do
during this pandemic?” we pondered.
One afternoon, I scrolled through
the App Inventor website—they had
Bethany and Ice
announced a monthly Coronavirus
as well. I asked her to teach me the App Challenge! We were like, whoa!
basics that summer. In a few days,
I had become a level 1 beginner AI2 Bethany: That same night, we
coder. brainstormed some concepts for the
challenge, and suddenly a great idea
Ice: That summer, we created an app popped into our minds. Why not
together with five games to play on our create an app with games to defeat
vacation. It was awesome! Although virtual viruses? That would be fun to
our games were very basic and simple, make and also raise users’ awareness
we felt extremely triumphant because of hygiene! We squealed in excitement
we created them ourselves and it was and gave each other high fives.
fun to work together.
Ice: The next few weeks we started
Bethany: After that, whenever we to make our app. It has a checklist
were free, we also experimented with of habits to keep clean and healthy,
some other functions of AI2 and which gets you points; a small game to
carried on with creating new games. get more points; and a “Virus Battle”
31
page to kill virtual viruses with some Bethany: Our success didn’t come to
spray you can buy with your points. us overnight. In fact, we faced a lot of
It also has pages for seeing all the problems while making the app. For
viruses you defeated and for facts instance, we were frustrated when
about the pandemic. Plus there’s a we spent almost three hours trying
detailed user manual. to figure out some calculations for
the game! At that point, we stopped
Bethany: We planned to add a lot of working on that part for a while and
colorful illustrations and interesting had a little rest. Then we went back
cartoons in the app, but we were and eventually thought of a solution!
worried that we couldn’t finish all
of them in time! We worked out a Ice: We submitted our app to the MIT
huge plan where we would draw the App Inventor website and we became
illustrations with our phones and the MIT App Inventor Coronavirus
code a little after we had finished our App Challenge Young Inventors of the
online homework. Month! We were absolutely ecstatic!
Ice: After drawing all of the pictures, Bethany: Later we did a brief
we had already coded nearly a quarter reflection of our app-making process.
of the app. We worked together in We concluded that we learned more
front of our computer, dragging AI2 techniques and functions, and
components and blocks across the to never to give up because there is
screen while calculating the required always a way to solve our problems.
values and testing out the app using
the emulator. Finally, after two weeks, Ice: More important, we understood
our app was completed! how to work as a team. We got past
32
our differences and respected the advice: relax! Don’t let it make you
other person’s opinions because we angry or tired. Instead, take a rest,
were eager to finish our app together. give your brain time to think about
Our sisterly bond has been enhanced the problem, go through your codes
greatly! Our minds are practically in calmly, and maybe have a snack or
sync these days! two . . .
33
CHAPTER 2
34
The second thing you need is a recording If you don’t have MIT App Inventor already
of your voice. Think of a good greeting open from chapter 1, use a browser on your
or message for your friends and family. It computer to open it up by going to either
can be something simple like “Hi, it’s me! http://ai2.appinventor.mit.edu (with your
Wanted to say hello and wish you a happy Gmail account) or http://code.appinventor
day!” or you can record something a bit .mit.edu (with your return code).
longer: “Hello, my name is Codi. I am a big
fan of biking, skating, and programming
apps. This is my first app. I hope you like
it!” Feel free to get creative! If you use a
Mac, the QuickTime application is an easy
way to record your voice. Just go to the
File menu and choose Audio Recording.
If you use a Windows computer, you
can record your voice using the Sound
Recorder app. In both cases, make sure
to save your recording on your computer
where you can find it later.
35
Chapter 2 — Hello, lt’s Me!
36
3) If you have any components left over
from following along in chapter 1, you’ll
need to delete them by clicking on
each component in the Components
panel and then clicking the Delete
button. You’ll be asked to confirm that
you really want to delete them.
37
Chapter 2 — Hello, lt’s Me!
38
5) Now click on the Media tab in the
Palette and drag a Player component
onto the Viewer.
// NOTE
39
Chapter 2 — Hello, lt’s Me!
40
Change the Component // NOTE
Properties
Remember, properties are different
Let’s change some of the properties of the characteristics of a component that
components to make the app look better. you can change to alter how the
panel and change the Button1 things like width, height, color, and
this:
Height: 300 pixels
Width: Fill parent
// NOTE
41
Chapter 2 — Hello, lt’s Me!
42
10) Click on Label1 in the Components
list and change the Label properties:
BackgroundColor
oundColor: Choose a color
FontSize: 30
Text: Press Me
TextColor: Choose a color
// NOTE
43
Chapter 2 — Hello, lt’s Me!
// NOTE
Code the Blocks
Your app has all its components, but it Remember, the Designer takes
doesn’t do anything yet. Now is your care of the look, and the Blocks
chance to code the app so it works when Editor takes care of the behavior.
the user runs it.
In the app, you want your voice recording For example, in the following code blocks,
to play when the user presses on your when the user clicks on Button1, the text
picture, which is displayed on Button1. for Label1 is set to Hello World! You can
Clicking or pressing a button is called an add as many blocks as you want inside the
event. When an event happens, it should when Button1.Click event block.
trigger an action. In this case, the event All the blocks inside will run whenever the
of clicking on your picture should make user clicks on the button.
your voice recording play. In the Button1
blocks, the gold ones with an empty area
in the middle are called event handlers.
Event handlers do just that—they handle
events. When an event happens in an app,
the code blocks inside the event handler
tell the app what actions should happen.
44