Fr

ee

App Inventor is an innovative platform to introduce beginners

to programming and app creation, taking you from a novice
software coder to an experienced app developer in no time.
App Inventor transforms complex text-based coding into
simple drag-and-drop building blocks of code.
App Inventor 2 Essentials will take you on a journey of
mobile app development. We begin by introducing you to
the functionalities of App Inventor and giving you an idea
about the types of apps you can develop using it. We
walk you through the technical set up so you can take
advantage of the interactive development environment
(live testing). You will get hands-on, practical experience
building three different apps using tutorials. Along the way,
you will learn computer science principles as well as tips
to help you prepare for the creative process of building
an app from scratch. By the end of the journey, you will
learn how to package an app and deploy it to app markets.
App Inventor 2 Essentials prepares you to amass a
resource of skills, knowledge, and experience to become a
mobile app developer.

What you will learn from this book

Perform technical setup and navigate
the App Inventor platform
Utilize the interactive development
environment by pairing a mobile device
with a computer using Wi-Fi or USB

Create the user interface of the app in

the Designer and program the code in
the Blocks Editor

C o m m u n i t y

Integrate basic computer science principles

along with more complex elements such
fusion tables and lists
Test and troubleshoot your applications

App Inventor 2 Essentials is for anyone who wants to learn

to make mobile apps for Android devices no prior coding
experience is necessary.

Publish your apps on Google Play Store

to reach a wide audience

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Felicia Kamriani
Krishnendu Roy

$ 29.99 US
19.99 UK

P U B L I S H I N G

pl

Build three apps: a game, an event app,

and a raffle app

Who this book is written for

community experience distilled

App Inventor 2 Essentials

App Inventor 2
Essentials

Sa
m

E x p e r i e n c e

D i s t i l l e d

App Inventor 2
Essentials
A step-by-step introductory guide to mobile app development
with App Inventor 2

Felicia Kamriani
Krishnendu Roy

In this package, you will find:

The authors biography

A preview chapter from the book, Chapter 1 'Unleashing Creativity with MIT
App Inventor 2'
A synopsis of the books content
More information on App Inventor 2 Essentials

About the Authors

Felicia Kamriani is passionate about global education, empowering people

with technology and closing the gender gap in STEM education. As Education and
Business Development Manager, she evangelized the MIT App Inventor Project
in the U.S. and abroad at the Google Rise Summit, the UNESCO YouthMobile
conference, Guangzhou Educational Information Center, Hong Kong Polytech
University, Guilin University, Samsung App Academy, MERLOT and MOSTEC. She
also lead a team of Master Trainers for the Verizon Innovative App Challenge and
spearheaded the inaugural MIT App Inventor Master Trainers Program for Mobile
Computing Education. Other global endeavors include MOOC research and course
development at HarvardX and with The Felittle Group, LLC, as Creative Director
(www.felittlepeople.com). She is an avid TEDx organizer and proud alum of
Harvard University, Stanford University and the University of California, Berkeley.

Krishnendu Roy is an associate professor of computer science at Valdosta State

University. Prior to joining VSU, Krishnendu completed his PhD. and M.S. in
computer engineering at Louisiana State University, Baton Rouge, LA in 2009 and
2005, respectively. As an MIT App Inventor Master Trainer, Krishnendu taught
computing using App Inventor in summer camps for middle and high school
students and in CS0 courses at his university. He has conducted in-person App
Inventor workshops for teachers, including Google CS4HS and the University of
Massachusetts at Boston's BATEC Summer Institute. He has also organized online
App Inventor workshops for teachers who were involved in AAUW's Tech Trek
camps and mentored national winning teams of Verizon's Innovative App Challenge.

Preface
Almost everyone has had an idea for an app or perhaps declared, "I wish there were
an app for that!" But until recently, taking an idea and building it into a fully functional
app would have required hiring an expert software programmer and paying
thousands and thousands of dollars. The world of mobile app development had
been the domain of an elite group of people with highly specialized skillsproficient
coders. The App Inventor project sought to change this reality by democratizing
software development. App Inventor 2 is a free, blocks-based, drag-and-drop visual
programming language that makes it possible for anyone, even people with no prior
coding experience, to turn an idea into a fully functional Android app.
As educators, our passion for promoting global education and empowering people
to move from being users of technology to becoming creators of technology were
the inspirations for writing this book. With App Inventor, a 12-year-old, a speech
therapist, a baseball coach, or anyone else for that matter, can develop an app that is
personal, meaningful, and useful to them. People from all backgrounds and levels of
education can develop a digital solution to a problem they see in their community.
Any App Inventor app, such as an educational game, a music tutorial, or a garbage
recycling program can be published or sold in app markets, and thus, have a global
impact or spurn opportunities for entrepreneurship, collaboration, and community
building.
App Inventor offers an alternative entry point to Computer Science that is more userfriendly and less intimidating than traditional cryptic white-text-on-a-black-screen
programming. The colorful blocks that snap together like puzzle pieces along with
a design tools enable users to learn both coding and user experience design skills.
Furthermore, with a wide gender gap in computer sciencemales dominating both
classes and jobswe are also passionate about using App Inventor to introduce
more girls and women to mobile computing opportunities, such as app contests with
Technovation (www.technovationchallenge.org) and coding clubs with Girls Who
Code (www.girlswhocode.com).

Preface

Because you can take any idea and turn it into a mobile app, the opportunities for
imagination, creativity, and innovation are indeed endless. The purpose of this book
is to help spark such creativity while introducing you to basic computer science
principles, computational thinking, and programming. This book teaches you to
navigate the App Inventor platform and helps you become familiar with its features
through step-by-step tutorials on building three different mobile apps. Throughout
the book, we offer design tools and tips as a pathway to user experience design, since
the user interface is such an integral part of any mobile app. Ultimately, by the end
of this book, you will be equipped with enough skills to embark on developing your
own mobile app from scratch. We are excited to see the apps you are inspired to
create and hope that you will share them with us.
We are so excited to share our passion for mobile app development with you and
hope that this book awakens a creative spark to make technology that is personal,
meaningful, and useful to you. We are thankful to Hal Abelson, Mark Friedman,
and all of the original App Inventor developers and visionaries who created the
platform that has evolved into App Inventor 2. We are proud to be furthering the
App Inventor mission and encourage all of you budding software programmers to,
in turn, share App Inventor with other noncoders. Together we can empower others
to become part of a growing movement to connect and impact the world with
digital creativity.

"We look forward to hearing about the digital solutions you devise or your
evolution in the mobile computing space. Good luck and keep connecting!"
Felicia Kamriani and Krishsnendu Roy

What this book covers

Chapter 1, Unleashing Creativity with MIT App Inventor 2, introduces you to the
MIT App Inventor software and explores the multifaceted role of the mobile app
developer by examining design processes and techniques used to turn an app idea
into a prototype. By showing a variety of apps that people just like you have already
made, this chapter reveals the range of learning outcomes and skills developed by
using App Inventor.

Preface

Chapter 2, Setting Up MIT App Inventor 2, walks you through setting up a Google
Account to log into App Inventor, downloading software, and connecting your
computer to your mobile device via Wi-Fi or USB with Mac, Windows, or GNU/
Linux. MIT App Inventor 2 is a free online application that runs in a web browser
on your computer and saves your projects in the cloud. The magical part of App
Inventor is live testing your app as you build it with the Integrated Development
Environment (IDE). If you don't have a mobile device, don't worry, there are
instructions on how to use App Inventor with the onscreen emulator. While we
provide a step-by-step guide to getting started, we acknowledge that sometimes
establishing connectivity can be a challenge. Therefore, we include plenty of
troubleshooting and help options.
Chapter 3, Navigating the App Inventor Platform, familiarizes you with the App
Inventor Projects View, Designer screen, and Blocks Editor. This chapter teaches
you how to build a game app called Fling. The step-by-step tutorial integrates
components and properties to design the user interface and colorful puzzle-like
blocks to code the behavior of the game. You learn how to create buttons that start
or reset play, move a ball, change the ball's direction by touching it, bounce the ball
off the edges of the screen, and end game play. During each step of the development
process, we show you how to view the changes on your mobile device. By the end
of the chapter, you will have built a functional app! However, we have just gotten
started on our app development journey.
Chapter 4, Fling App Part 2, uses the basic app that we built in Chapter 3 as a
launching pad for further skill development: debugging and expanding the app with
more complex features. Since most games keep score and have increasing levels and
difficulty, we augment the Fling tutorial to make a more intermediate app. You learn
how to make a scoring mechanism, display the score, increase the speed of the ball,
create levels, increase the difficulty of play, and debug by updating the Play and
Reset buttons.
Chapter 5, Building an Event App, provides a tutorial for building a second app
this time, an intermediate event-planning app. An app like this can be useful for
anyone who is gathering people together for meetings, parties, or events. It gathers
information from people who would like to attend, namely, their name, the number
of guests, and the pot-luck items to be brought. In return, the app displays to users
a guest list and the event information, such as the address and a map. The tutorial
teaches you how to include images and artwork, create a navigation menu, use the
Backpack tool, add multiple screens, expand your use of labels, and include a map
component. By the end of the chapter, you will have accomplished a great deal, but
will only be halfway through the Event App development.

Preface

Chapter 6, Introduction to Databases, will cover databases that are an essential part
of app designing because they store persistent data, meaning that when the app
closes and reopens, the previously entered data will remain in the App. Without a
database, any data entered by the user when the app is running would be lost once
the app is closed. In order to collect user-inputted information for the Event app, this
chapter's tutorial demonstrates how to create an RSVP form, establish Google API
credentials, store and request information in a database using Google Fusion Tables,
and display a guest list.
Chapter 7, Learning About Loops with a Raffle App, will cover a third tutorialthis time,
for a Raffle App that includes the computer science principles of lists, loops, and
variables. The Raffle App (a digital version of a regular raffle) can be used at a party,
meeting break, or as an ice-breaker to involve participants in a short fun activity.
Participants text a specific message to the Raffle organizer's phone and the app
randomly selects a winner from the list of incoming numbers and then notifies the
winner he or she has won and texts the rest of the participants that they did not win.
Here, you will learn to code efficiently with variables and a loop, as the app repeats
the same behavior (texting a "Sorry you did not win!" message) for a list of many
people.
Chapter 8, Expanding Your Mobile App Development Skills, includes more design
principles and App Inventor tips to broaden your skill set for your transition from
app building with guided tutorials to creating mobile apps from scratch. Also
included are app sharing tools that enable you to contribute your creativity and learn
from other app developers. Since all the App Inventor apps can be uploaded, shared,
and even sold in app markets, the apps you develop can make a global social impact
or trigger your path as an entrepreneur. The world awaits your contribution!

Unleashing Creativity with

MIT App Inventor 2
Mobile applications are ubiquitous. There are apps for just about everything
entertainment, socializing, dining, travel, philanthropy, shopping, education,
navigation, and so on. And just about everyone with a smartphone or tablet is
using them to make their lives easier or better. But you have decided to move from
just using mobile apps to creating mobile apps. Congratulations! Thanks to MIT
App Inventor 2, mobile app development is no longer exclusively the realm of
experienced software programmers. The software empowers anyone with an idea
to create mobile technology. This book offers people of all ages a step-by-step guide
to creating mobile apps with MIT App Inventer 2. While this visual programming
language is an ideal tool for people who have little or no coding experience, don't be
fooled into thinking that the software's capabilities are basic! The simple drag-anddrop blocks format is actually a powerful programming language capable of creating
complex and sophisticated mobile apps.
The purpose of this chapter is to provide an overview of MIT App Inventor 2, and
of your new role as a mobile app developer. You are in for more skill development
than you ever imagined! Of course, you will learn to code mobile apps, but there
are countless other valuable skills weaved into the mobile app building process.
Most significantly, you will learn to think differently, discover the design-thinking
process, become a problem solver, and be resourceful. This chapter also offers tips on
design principles and brainstorming app ideas. Lastly, it reveals the potential of MIT
App Inventor 2 and showcases an array of mobile apps so that you, a budding app
designer, can begin thinking about the full spectrum of possibilities. These mobile
app examples not only display the capabilities and functionalities of MIT App
Inventor 2, but also serve to spark ideas, foster innovative thinking, and help create
visual goals as you embark on the mobile app-making process in the next chapters.

[1]

Unleashing Creativity with MIT App Inventor 2

This chapter covers the following topics:

What is MIT App Inventor 2 and why you should learn to use it?

Becoming a mobile app developer

Discovering the possibilities of MIT App Inventor 2

What is MIT App Inventor 2?

MIT App Inventor 2 is a free, drag-and-drop, blocks-based visual programming
language that enables people, regardless of their coding experience, to create
mobile apps for Android devices. In 2008, iPhones and Android phones had just
hit the market. MIT professor Hal Abelson had the idea to create an easy-to-use
programming language to make mobile apps that would harness the power of the
emerging smartphone technology. Equipped with fast processors, large memory
storage, and sensors, smartphones were enabling people to monitor and interact with
their environment like never before. Abelson's goal was to democratize the mobile
app development process by making it easy for anyone to create mobile apps that
were meaningful and important to them. While on sabbatical at Google in Mountain
View, CA, Abelson worked with Engineer Mark Friedman and many of other
developers to create App Inventor (yes, it was originally called Google App Inventor).
In 2011, Abelson brought App Inventor to MIT and, together with the Media Lab and
the CSAIL (Computer Science and Artificial Intelligence Lab), created the Center for
Mobile Learning. In December 2013, Abelson and his team of developers launched
MIT App Inventor 2 (from here on referred to as MIT App Inventor), an even
easier to use web-based application version featuring an Integrated Development
Environment (IDE). IDE means that you as you build your mobile app online, you
can see it come to life on a connected mobile device. All you need is a computer
(Mac or PC), an Internet connection (or a USB connection), a Google account, and
an Android device (phone or tablet). But, if you don't have an Android device, don't
worry! You can still create apps with the onscreen emulator and utilize the live
development mode.
The MIT App Inventor (http://appinventor.mit.edu/) interface includes two
main screens, a Designer Screen, which is a graphical user interface (GUI) where you
can create the look and feel of the app (choosing the components you want the app
to include), and the Blocks Editor, where you can add behavior to the app by coding
it with colorful blocks. Users build apps by dragging components and blocks from
the menu bars onto a workspaces (called Viewers) and a connected Android device
(or emulator) displays the progress in real time. All the apps are saved on the MIT
server; once completed, they can be can be shared on the MIT App Inventor Gallery,
submitted to app contests (such as MIT App of the Month), or uploaded to the
Google Play Store (or other app marketplaces) for sharing or selling.
[2]

Chapter 1

To date, MIT App Inventor has empowered millions of people to become creators of
technology by learning to be mobile app developers. And now, you will become one
of them!

Understanding your role as a mobile app

developer
Since you are reading this book, it is safe to assume that not only do you regularly
use mobile apps, but on occasion, you have also had the thought, "I wish there were
an app for that!" Now, with the help of MIT App Inventor and this guidebook to
mobile app development, you will soon be able to say, "I can create an app for that!"
While embracing your new role as a mobile app developer, you will not just be
learning how to code; you will learn an array of other valuable skills. You will learn
to think differently. Every time you open an app, you will start looking at it from
the developer's perspective rather than just as a user. You will start noticing what
functions are logical and simple and which are complicated and unintuitive. You
will learn to get inspiration from your environment. What type of app could make
the attendance process at my club/class/meeting more streamlined or efficient?
What app idea could help solve the inaccurate inventory problem at the gym? You
will learn to become a data gatherer without even realizing it. When people make
comments about apps, your ears will perk up and you will take note. You will start
asking questions like, why do you prefer Waze over Google Maps?
You will learn to become a problem solver. You will learn to think logically so that
you can tell the computer in a step-by-step manner how to perform an operation.
Any software developer will confirm that programming is an iterative process.
It's a continual cycle of coding, troubleshooting, and debugging. Trial and error
will become second nature, as will taking a step back to figure out why something
that just worked a minute ago now seems broken. And, you will learn to assume
the role of a designer. It is no longer accurate to merely depict programmers holed
up by themselves at a computer, creating white text-based code on black screens.
Developers of mobile apps are also designers who think about and create attractive
and intuitive user interfaces (UIs). Much of the design work happens not at the
computer; it includes conversations with potential users, involves pens, paper,
and post-it notes, and uses storyboards or sketches. Only once you have your app
designed on paper do you sit down at the computer to begin coding. And then,
you will not find the traditional black and white interface, as the MIT App Inventor
platform is interactive and full of colorful blocks that snap together.

[3]

Unleashing Creativity with MIT App Inventor 2

Brainstorming app ideas

Chances are you already have an idea for a mobile app. If not, how can you think
of one? The best way to start brainstorming app ideas is by starting with what
you know. Which app do you wish existed? Which app would you and your
friends, coworkers, or family members use, need, or like? Which problem in your
community, network, or circle of friends could be solved with a digital solution?
Maybe, you loan out books to friends, but don't have a system to keep track of who
borrowed what. Maybe, you want to do a clothing swap with people who are your
size, so you want to post pictures of the items that you have available for trade and
you want to view othe listed items in your size. Maybe, you have a favorite app that
you use all the time, but you wish it had just one other feature. Maybe, when you
meet your friends in a public place, it's hard to know whether they're nearby without
a lot of texting back and forth, so you want to create an app that shows everyone's
location on one screen. The possibilities are endless!
The key to successful brainstorming is to write down all of your ideas no matter how
wild they are and then talk to people about them to get feedback. Input from others
is an essential part of the research needed to ensure that your app idea becomes a
successful app that people will want, use, and/or buy. On a recent business trip,
we had an idea for a travel app because we always seem to forget at least one
essential item. Over breakfast at the hotel, we discussed the app idea with a couple
of colleagues and received amazing insights that we hadn't thought of, such as a
reminder notification to fill any prescriptions well before the trip and a weather
component, so we could be sure to pack appropriate clothes for each destination.
The more people you talk to, the more market research you will conduct and the
more defined the overall app's concept will be.

The Design Thinking process

Design Thinking (more information about Design Thinking can be found at
http://dschool.stanford.edu) is a user-centered process for creative problem
solving. While not developed specifically for mobile app development, the Design
Thinking process is particularly effective when applied to mobile app development.
We recommend using the following design phases:

[4]

Chapter 1

Most likely, you are not creating an app that you alone will use, so you must
discover what potential users need, want, or prefer in an app.

Empathize
Your first goal is to understand the people who would be using your app. Thus, this
phase is called, Empathize. You can easily conduct research through interviews by
asking an array of potential users what types of apps they currently use, what app
features they like or dislike, what apps they wish existed, and if they would use an
app like the one you plan on making. Interviews can provide valuable feedback and
be a source of inspiration for new ideas.
For example, if you plan to create a book club app that coordinates many people's
calendars so that you can schedule a book club discussion during a time when
everyone is available, ask book club members what features they would like to see
in the app. Will there be an RSVP or a cancel button? Will there be directions to the
location? What are the transportation or parking options? Will there be a link to
Amazon to buy or download the next month's book? How can the app help members
decide on which book to read next? Since the meetings are potlucks, is there an
option to include what food or drink each member will bring? What is a quick and
efficient way to contact all the members? Through this data gathering stage, you
may discover a wealth of new features for your app that you had not previously
thought of, or you may get a confirmation that you are indeed on the right track.
Understanding what potential users want is an essential part of the app building
process, from the very beginning of concept creation all the way until the final stage
of deployment.

[5]

Unleashing Creativity with MIT App Inventor 2

Define
Once you've gathered research data, what do you do with that information and
how do you fold it into your design? In the Define phase, you will synthesize the
data you've collected to create a clearer picture of what your app will do, how it will
function, and the purpose it will serve. You may have collected pages and pages of
ideas and comments from your interviews. What themes or patterns emerge when
reviewing them? What ideas seem the most salient? What app functions were people
most excited about? Reviewing user feedback will help you structure and streamline
your app concept so that it is clear and specific in purpose and function. This stage of
flushing out ideas so the best ones emerge will also help you create accurate visuals
in the next phase.

Ideate
Given all of the input you need and want from your potential users, what solutions
can your app offer? Now, it is time for the Ideate phase to create an experience
map or storyboard with pen, paper, and post-its to delineate all of the app's
functionalities. Each piece of paper will represent one screen and display the user
interface (UI) designated for that screen. This process usually requires a lot of
revisions and may produce numerous versions of the app, which you will want to
keep, as they may be helpful down the line when creating updates. We find it helpful
to put all of the drawings up on a wall so that you can visualize the whole app map
and its sequencing. This is also the time to include design features that you like or
find appealing. Remember, all of the apps you see in marketplaces started the exact
same way, with an idea. Inspiration for one can come at any time and from any
experience. We recommend dedicating a notebook exclusively for ideas, so you can
jot notes when you get inspired or see an app with a look and feel that you like. This
will be a valuable resource for you as you continue down the road of app making.
As with any design process, this Ideate stage takes time. This is a good thing because
you want time for your ideas to simmer and percolate. Taking a break and coming
back to your sketches with fresh eyes usually offers new perspectives , ideas
and clarity.

[6]

Chapter 1

Prototype
Now that you've reached the Prototype phase, it is time to sit down at the computer
and build your app. This may be daunting at first because you are just learning how
to use MIT App Inventor, but the step-by-step guides in this book will walk you
through each stage of app development. The provided tutorials will teach you about
the various MIT App Inventor components, what they do, and how to add behavior
to them by snapping blocks together. Once you become familiar with component
functions and get the hang of coding with blocks, you will be able to transfer this
knowledge to create your own app. Since you will have already done all of the
phases of the the Design Thinking process in this chapter and laid the groundwork
for your app, you will be able to particularly concentrate on the components you will
need to build your app.

Test
When you get to the point where you think your app is done, think again! Test your
app with a small group of users before offering it to the world in an app marketplace.
These alpha and beta testers will help you discover bugs or if things are not working
as they should. Learning to troubleshoot is often a frustrating process; but by this
stage, you will have refined your skills as a problem solver, and you will have more
ideas on how to fix bugs. Also, Chapter 8, Expanding Your Mobile App Development
Skills, of is devoted to tools to expand your app development skills. And while
the Test phase seems like the final one, you will discover that it is really another
beginning! The Design Thinking process is really a cyclical one, as there is always
room for edits, refinement, and of course, version 2.
If you get stuck at any time, there are many resources on the MIT App Inventor
websites at, http://appinventor.mit.edu/ and on http://www.appinventor.
org/ to help you. In addition to tutorials, there is an MIT App Inventor Gallery
where you can view apps along with the source codes that other people have created
and shared. If an app has features that you'd like to include in your app but you
don't know how to code yet, you can download the app, look at the blocks, and teach
yourself how to code them! Also, there is a community forum online where you can
ask questions and learn from more experienced users.

[7]

Unleashing Creativity with MIT App Inventor 2

Computational thinking
In becoming a mobile app developer, you will be learning many valuable roles:
brainstormer observer, researcher, data interpreter, synthesizer, design architect,
strategist, creative thinker, and last, but not least, coder. Part of becoming a mobile
app developer involves learning to think like a computer, that is, being able to tell
the computer what you want it to do so that it performs the specific operation.
Computers are not intuitive; they don't know what you mean or interpret what
you say. By programming or writing a code, you give the computer clear step-bystep logical instructions to make it do something that you want it to do, such as
retrieve data, display information, or open another application. But sometimes, even
when you think you are being clear and logical, the computer does not respond as
you intended. As coding is an iterative process, there are a lot of rounds of trying
something to see if it works, and then when it doesn't, trying something else.
The more you fail, the closer you will get to finding a successful path. Learning
to troubleshoot, debug a program, or think of yet another solution comes with
the willingness to be open, think creatively, and try and try again. You will soon
discover that by becoming a coder, you are also honing your skills as a problem
solver.

Best practices to design apps

Since there is an abundance of Android apps that are available, you can easily
research design principles.
Pay attention to all the features of the UIs. For example, look at 10 different chess
game, solitaire, or weather apps. You will see a wide variety of UIs and start learning
how different developers approach the exact same app. Which ones are easy to
navigate and use? What distinguishes one as more appealing than another? Which
home screens provide the best overview of an app's set of features? How are menus
and drawers displayed? How easy is it to return to the previous screen? How do you
navigate to the home screen? How are text elements highlighted when in use? How
are screens mapped out? Where can you find instructions? Where do you find help?
Pay attention to cues, such as what colors, animations, or pop-up messaging occur, to
let you know that X is happening.

[8]

Chapter 1

Great design is simple. Often, the tendency is to want your app to do it all. You've
received tons of feedback from your interviews and you want to incorporate all
of the brilliant ideas into your app. Since this is your first app-making experience
with MIT App Inventor, we recommend you to choose the core features that are
necessary, and make them clear and easy to use. If needed, you can always layer
more complex features in the future versions. Think about your own app usage.
Most of us use apps very quickly or intermittently (unless we are on a long subway
ride, playing a game on our phone or reading a digital book). Rarely do you use all
of the features of an app at any given time. Most often, you use an app for a specific
purpose and then you're done. Keep your app simple.
Iterate, iterate, and iterate. Designing, like coding, requires the ability to be open
to experimentation. And fortunately, App Inventor facilitates this process with
instant feedback through IDE. Try a component, add behavior (blocks), and see what
happens on your connected device. Add a different behavior; see what happens on
your connected device. Add colors, arrangements, and fonts; see what happens on
your connected device. Do you get the drill? Design involves a lot of trials, errors,
and failures, which is ultimately a good thing because it gets you going in a different
direction. You may have your heart set on a design idea only to discover that, once
you have tried it out, you don't like it that much. Don't be discouraged! This is the
time to investigate other options. Try this, that, and the other. Expand your creative
scope through several rounds of playing and then testing.
App designing, like any artistic endeavor, takes time. Try not to rush the creative
process. Indeed, MIT App Inventor makes it easy to make mobile apps, but to
craft a well-designed app that looks appealing and works seamlessly requires the
investment of time, passion, and creativity. Take breaks often, spend time outdoors,
play a game or engage your mind in another project so that when you return to your
app, you will approach it with fresh eyes, energy, thoughts, and inspiration.

MIT App Inventor purpose and potential

While making apps with MIT App Inventor, there is much more going on than just
learning to code. The mission of MIT App Inventor is to democratize coding so that
everyone, regardless of age, schooling, or profession, has the opportunity to create
technology. Coaches, players, teachers, students, doctors, patients, conductors,
cellists, pilots, or passengers can all make mobile apps that are important to them
and that make their lives happier, better, or more productive.

[9]

Unleashing Creativity with MIT App Inventor 2

As a digital solution, your app may have originally been intended to solve a problem
that you observed or experienced. But once you share it in an app marketplace, it
could impact people you don't even know and may never meet. MIT App Inventor
makes it possible for you to expand your scope of influence from your immediate
local community to a worldwide scale. You can bring others joy and laughter with
a simple game, you can help college-bound seniors study for a standardized test, or
you can provide a tool that teaches travelers common phrases in other languages.
Contributing positively to society is one awesome way to use your new rockstar MIT
App Inventor skills.
As you begin creating apps and see the impact they have on others, you may
broaden the scope of what you think is possible for yourself. Have you thought
about becoming a social entrepreneur? Will people pay for the technology you
have created? Does your app have the growth potential to serve new and different
users? How can you expand your business acumen to learn how to build and market
successful mobile apps? Even though you will be starting off with small and simple
apps, always remember to dream big in what you do and who you are.
While MIT App Inventor offers an easy and approachable way to learn about coding
and software development, it may indeed also serve as an on-ramp for further
computer science education. Once you see the skill growth potential, such as how
creating technology can positively impact others or that you can sell your digital
solutions, you may indeed become interested in expanding your knowledge of
technology further by delving into other software languages or science learning
opportunities, such as maker-spaces or hackathons.

Discovering the possibilities of MIT App

Inventor
MIT App Inventor empowers anyone regardless of age or coding experience to
transform an app idea into a prototype and ultimately into a full-fledged mobile
application. What will your app do? As you begin your app-making journey, you
may wonder about what types of apps could you possibly create with App Inventor?
Since the apps you make will be shared or sold for use on an Android smartphone
or tablet, you can create apps that access the full functionality of those devices.
Your apps could do things such as speak, take photos (or selfies), make phone calls,
text, translate SMS messages, Tweet, play music or videos, use GPS (maps or other
websites), scan bar codes, set timers (alarms or reminders), control robots, launch
others apps, track your movement, and so on. Given the array of the abilities of
Android devices, the possibilities seem endless!

[ 10 ]

Chapter 1

MIT App Inventor examples

Before beginning to learn MIT App Inventor, we think it is helpful to review some
examples MIT App Inventor apps so that you have an idea ahead of time of a range
of possibilities. As you start learning MIT App Inventor, you can begin by making
simple apps; but in the back of your mind, remember this array of app examples,
as they can serve goals or be an inspiration to help you unlock your creativity and
designing skills. Think of it this way if you want to become a watercolor painter,
but have never painted before, you would look at many watercolor paintings made
by professionals or people with more experience than you to get inspired, to have a
visual of what is possible, and to learn how the paintings were created.
The following examples are a mix of beginning, intermediate, and advanced MIT
App Inventor apps. Some were created by individuals, who were inspired to make
a specific app, while others were created by groups of people for a project or as a
contest submission. One thing all of these apps have in common is that before the
app developers spent hours and hours perfecting their UIs and creating blocks
of code, they were just like you, starting out with little or no previous coding
experience. All of the skills you develop in this book through basic and intermediate
app-making will serve as a solid foundation for you to build upon to be able to create
more complex, sophisticated apps in the future. The introductory tutorials will teach
you the MIT App Inventor basics and equip you to tackle app creation from scratch.

Stopwatch and Timer

Jari Pohjasmki from Finland developed the following useful and simple Stopwatch
and Timer app:

Components used: Button, Label, TextBox, Image, ListPicker, Arrangements, Clock, and Notifier

[ 11 ]

Unleashing Creativity with MIT App Inventor 2

Yahtzee
This app mimics the classic game of Yahtzee, where the object of the game is to
score points by rolling five dice. The dice can be rolled up to three times in a turn
and the game will consist of 13 rounds. Each player scores their roll in one of the 13
categories. Once a category has been used, it cannot be used again. Rolling a Yahtzee
is five-of-a-kind and scores 50 points; the highest of any category. Whoever scores
most points will win!
The following screenshots show the total gameplay points for different roles of
the dice:

Components used: Button, Label, Notifier, and Alignments

BYJ3S
Vicenta Albeldo and Jesus Gil created BYJS3, a digital pet game. This app allows you
to play with, feed, and bathe your very own virtual pet. The following screenshots
show the incorporated hand-drawn images that the developers have animated:

[ 12 ]

Chapter 1

Components used: Clock, TinyDB, Image, Alignments, Canvas, and Sound

Loops
Developed by Andrea Zaffardi from Italy, Loops won the MIT App of the Month
contest in June 2015. It is a puzzle game that requires the player to rotate the pipes
to form a closed loop before time runs out. There are 100 levels of gameplay. The
following screenshots show the game in the various stages:

Components used: Image, Player, Clock, Sounds, TinyDB, Button, Label, Slider, and Alignments

[ 13 ]

Unleashing Creativity with MIT App Inventor 2

Quartet
Dr. Arun Mehta from India created Quartet for his niece, who loves to dance, but
hates math. He wanted to show her how math can convert movement into things,
such as graphics and music. With a wave of the phone, the app plays music with as
many as four instruments (piano, pan flute, strings, and tin drums) while displaying
animated graphics. Music starts and stops with a simple screen touch. A button
displays a list of instruments for the user to choose among. If just one instrument
is selected, the app will play all of individual keys of that instrument. Moving the
phone in different patterns will create new music!
The following screenshots show visuals as the app plays music:

Components used: Accelerometer, Canvas, Ball, ImageSprite, Button, Label,

Sound, Player, Alignments, and Animation

Brain Reaction Accelerator

Created by Meghraj Singh of India, Brain Reaction Accelerator is a puzzle app that
provides brain teasers to be solved within a time frame. There are five games to
choose from, including Refocus, True Color, Quick Pick, Sum It Up, and Expression
Puzzle. Compete against your best score or among global users. The following
screenshots show a sequence from registering to choosing and playing a game:

[ 14 ]

Chapter 1

Components used: Button, Label, Alignments, ListPicker, TextField, Canvas, ImageSprite

ConstHelp Contractor Tools

Created by Derek Drew from the United States, Construction Calculator is a tool
for people on building sites. It performs unit conversions, assists with project
management, provides a to-do list keeper, and measures distances. It has an
autodialing feature for calling customers or vendors, but includes autotexting for
safety while driving to or from a site. The following screenshots show the home
screen, a screen to calculate volume, and a location screen:

Components used: Button, Label, WebViewer, LocationSensor, Alignments,

SMS Messaging, ListPicker, and TextField

[ 15 ]

Unleashing Creativity with MIT App Inventor 2

UMATI
In the spring of 2015, MIT students Carolina Morgan, Fei Xu, Marcel Williams,
and Rida Qadri created the mobile app UMATI for the urban planning course
11.S938: Crowd Sourced CitySocial Media, Technology, and Planning Processes. The
class enabled students to work with actual planning and advocacy organizations to
develop digital technology solutions for planning problems. Matatus bus routes in
Nairobi were not standardized. They were often created and changed by the whim of
private drivers or as a result of traffic conditions and it was difficult to know which
buses traveled which routes and where the buses stopped. The MIT Civic Design
Lab, the University of Nairobi, the Center for Sustainable Urban Development,
and GroupShot helped to create maps using GPS, but the challenge that the MIT
students tackled was keeping the maps accurate and current. Their solution used
the MIT App Inventor to create UMATI, a crowd-sourced app, to track riders' routes
and stops. They incentivize riders to collect data by offering them tokens (called
MaTokens) that give discounts at local businesses. The following screenshots show
the home screen and the Track Me screen:

Components used: Button, Clock, Notifier, Image, Label, Location Sensor,

ActivityStarter, FusiontablesControls, and Alignments

[ 16 ]

Chapter 1

Ez School Bus Locator

Created by Arjun Santhosh Kumar, an eighth grader from Chennai, India, Ez School
Bus Locator is a location-tracking app that allows schools, parents, and students to
monitor the location of school buses through voice activation or a key tap. Students
scan a QR code upon entering and exiting the bus, so parents can track their
children's routes to and from school. Automated SMS messaging keeps parents
informed. The following screenshots show the home screen and two views of a
location-tracking screen:

Components used: SMS messaging, GPS, map, QR Code, Button, Image, and Alignments

Youth Radio
This is an app that enables podcast listeners to rate radio shows and offer feedback.
Youth Radio is a non-profit organization based in Oakland, CA. Youth Radio
programs empower young people to create media content by teaching them
broadcast journalism and technology skills. Many of the podcasts that the students
create are aired on National Public Radio across the United States. In an effort to
interact with their listeners, develop relevant content, and get feedback, Youth Radio
students created a mobile app with MIT App Inventor 2, enabling listeners to rate a
radio show, add comments, and offer suggestions for future topics.

[ 17 ]

Unleashing Creativity with MIT App Inventor 2

The following screenshots show the different ways that listeners can interact with
Youth Radio:

Components used: Button, Clock, Notifier, Image, Camera, TinyDB, Player,

Sharing, Label, Location Sensor, FusiontablesControls, Alignments, and MediaStore

Rover 800 Remote

Rover 800 Remote app is an MIT App Inventor example of the Internet of Things.
Paul Clements from the UK built a Bluetooth controller for his car that, with the help
of microcontroller (sensor), can control the door locks, trunk release, fuel flap release,
horn, and lights. It also remembers the car's address (if available), so if the cell phone
housing the app is inadvertently locked in the car along with the keys, a text message
sent from another phone can unlock the car. This app could be modified for a wide
range of vehicles. The following screenshots show the home screen, the registration
screen, and the overview screen:

[ 18 ]

Chapter 1

Components used: Bluetooth, List Picker, Button, Label, Image, and Alignments

Summary
While the bulk of this book centers on learning to code with MIT App Inventor,
this particular chapter highlights the many other learning outcomes gained from
engaging in the mobile app development process. Taking an app concept and
building it out into an actual mobile app is both a concrete and a creative process.
Attention to detail and iteration is vital for both code and design to work effectively
and synergistically. Whether you're creating a game to play with your friend, an app
to promote philanthropy involvement on campus, or an app to kickstart a recycling
program in your neighborhood, the Design Thinking process is as much a part of
app development as coding. Skills such as brainstorming, researching, interviewing,
synthesizing, ideating, storyboarding, designing, troubleshooting, problem solving,
and testing are not only integral to app building, but are also transferrable to other
disciplines, helping to unlock creativity and flow in any endeavor.
Now that you've been introduced to MIT App Inventor and your new role as an
app designer and developer, the next step will be to learn how to set up MIT App
Inventor. Let's get rolling!

[ 19 ]

Get more information App Inventor 2 Essentials

Where to buy this book

You can buy App Inventor 2 Essentials from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: