“Hello World” MIT App Inventor

Beginner’s Tutorial

Department of Electrical and Computer Engineering

College of Engineering and Sciences
Purdue University Northwest
 Overview

MIT App Inventor is a web-based mobile app development environment. It

is known for its relative user-friendliness, accessibility, and versatility. The
only requirements to get started with MIT App Inventor are an internet
connection and a Gmail account. From there, anyone can access the
MIT App Inventor website and get started with their first app. In this tutorial,
we are going to program a simple “Hello World” app with MIT App Inventor
and test it on an Android smartphone emulator.
 Step 1: Installing MIT App Inventor and the aiStarter emulator

MIT App Inventor requires a setup software to be installed in order to run

the web-app with which we will design our “Hello World” app. Apps that we
design with the development kit can be directly installed and launched on
Android devices. If you do not own an Android device, you can pick up
MIT’s aiStarter emulator (as well as the setup software) on this webpage.

Follow the installation instructions for your operating system for both the
setup software and the aiStarter emulator. The setup software is just a
compatibility package; the actual developer kit runs within your web
browser. MIT recommends using Mozilla Firefox or Google Chrome for
optimal stability with the App Inventor.
 Step 2: Creating a new project and connecting it to the emulator

Our next step is, thankfully, less involved than the first. In order to connect
MIT App Inventor to the emulator, we first need to create a blank project to
emulate. If you still have the website open, there should be a “Create
Apps!” button in the top left area of any MIT App Inventor website page.

This button will link you to the MIT App Inventor web-app. From here, we
will want to start a new project so that we have something to connect to our
emulator.
Most programming tutorials begin with some sort of “hello world” program.
For this reason, we are going to call our project “hello_world”.

Now that the new project is created, the App Inventor Designer interface
should open. It will look something like this:
Before we add anything to “hello_world”, we will need to connect the
browser app to the emulator that we installed in Step 1. Depending on your
operating system, launching the aiStarter emulator varies in difficulty.

● On MacOS systems, aiStarter launches automatically when the

MITAI Designer is opened.
● On Windows, aiStarter can be launched from the start menu.
● On Linux, aiStarter must be manually launched from a command
terminal.

Now that aiStarter is open, connecting it to the MITAI window is not hard.
There is a drop-down menu called “Connect” at the top of the MITAI
Designer page. From this menu, we will select “Emulator”.

There are also options to connect to a physical device with USB, or to the
AI Companion. Those are beyond the scope of this guide. Connecting to
the emulator can take a couple minutes. You should see two windows open
over the Designer page.
If the emulator fails to connect, MIT has a troubleshooting page for
connecting aiStarter.

From here, we are ready to start building our first app.

 Step 3: Designer Components

In most programming languages, the “hello world” introductory program

typically prints the phrase “Hello world!” out onto a command line. MIT App
Inventor does not have a command line, so instead, we will implement a
button that audibly says “Hello world!” when pressed.

Before we get started, the core features of MIT App Inventor ought to be
discussed. The main window is called the Designer. Apps are made out of
building blocks called Components (left), which have Properties (far right)
that can be customized. The components can then be programmed within
the Blocks editor (top right).

Notice that the Components are sorted into different categories. There is
also a search bar if you are not sure where to find a particular component.
For this app, we will need a Button component and a TextToSpeech
component.
To add components to the screen, drag and drop them from the menu.
Buttons can be found under the User Interface category, and
TextToSpeech can be found under the Media category.

Drop one of each of these components onto the screen. The Button will
appear directly on the screen, but the TextToSpeech component will not.
Instead, it is shown in a list called “non-visible components” below the
screen.
We should configure the button to appear in the center of the screen, edit
the text to say “Hello world!”, and rename it appropriately.

To get the button in the center of the screen, we will need to edit the
screen’s settings. A screen can be thought of as a menu where
components are placed. Our “Hello World” app’s components will all fit on
one screen. MITAI automatically names the first screen on any new project
“Screen1”.
You can select Screen1 from the Components menu.

The settings we are looking for are called “AlignHorizontal” and

“AlignVertical”. By default, they are set to “top” and “left”. We will set them
both to “center”.
Now, the button should be at the center of the screen instead of in the top
left.

Next, we will change the Button’s text to something less generic. We can
edit the Button’s properties from the same menu as we did for Screen1.
You can select it either by clicking it on the screen or from the Components
menu.
After changing this setting, the Button’s text should reflect whatever you
choose to enter in the text box.

We are now finished setting up the UI for our “hello world” app and can
move on to programming the components.
 Step 4: Component Blocks

MIT App Inventor components are programmed with pre-built blocks of

code. In the top right of the Designer page, there is a button that will take
you to and from the Blocks page. This is where we will program the button
to output audio and say “Hello world”.

Much like the components menu, there is a Blocks menu from which we will
drag and drop blocks of code onto the Viewer. Each component we add to
the Designer has its own code blocks, but there are also generic blocks
that have a wider range of uses.

We want the TextToSpeech component to say “Hello world!” when we

press Button1. We will need a total of three blocks. The first one we need is
from Button1’s block menu.
This block sets up a control block that does something when the button is
pressed. Drag and drop it onto the Viewer’s white space.

We will also need a block from TextToSpeech to say “Hello world,” and it
needs to be placed inside of the yellow “Button1.click” block.
Drag and drop the Speak block inside the “Button1.click” block within the
Viewer. It should fall into place like a puzzle piece and make a satisfying
“snap” sound.

All that is left is to tell the TextToSpeech component what to say when the
button is pressed. There is a generic text block in the pink Text Block
category.
Drag the blank text string block onto the “message” end of the purple
TextToSpeech block, and enter “Hello world!” or whatever text you want it
to say in the box.

We are now finished programming the component code blocks and can
move on to testing.
 Step 5: Testing

To Test your application, follow the below steps

You need to click on the option “Build” at the top of MIT App Inventor. Then,
you get the above options and click on the Android App (.apk) to download
the apk file.

Once you click on the Android App (.apk), you will get the above popup,
which shows the compiling percentage

Click on the “Download.apk now” to download the apk file.

Click on the “Files”, then you will get different folders and given right click on
the downloads folder.

Once you click on the “Open in Terminal”, terminal will be opened as below
Give the command in the terminal to run the apk file $ adb install
filename.apk

Give the command and click on ENTER

Once the app is installed click on the “Anbox Application Manager” to start
the application installed.

App installed is shown as above, you just need to DoubleClick on the

application, so that Screen is opened as below
Click on the “Hello World” to get the voice message of it.