Babaji Vidhyashram

MIT App Inventor

MIT app inventor is a free , blocks based visual programming language that enables
people with no prior coding experience to create mobile apps, Accesses mobile device
features and enables users to share fully functional Android apps. App Inventor empowers
even beginners and non-programmers to create mobile apps.
App Inventor enables people to:
•  Learn computational thinking
•  Learn programming through a visual language
•  Create apps that matter to them
•  Encourages innovation
•  Learn about design and design thinking
•  Develop research skills
•  Provides a way to contribute to society in a positive and productive way

Following are the steps to use MIT app inventor.

Grade-IX 1 of 13 MIT App Inventor

 Babaji Vidhyashram

App Inventor lets you develop applications for Android phones using a web browser and
either a connected phone or emulator. The App Inventor servers store your work and help
you keep track of your projects.

You have three options for setting up live testing while you build apps.
1. If you are using an Android device and you have a wireless internet connection, you
can start building apps without downloading any software to your computer. You will
need to install the App Inventor Companion App on your device.
2. If you do not have an Android device, you'll need to install software on your computer
so that you can use the on-screen Android emulator.

Grade-IX 2 of 13 MIT App Inventor

 Babaji Vidhyashram
3. If you do not have a wireless internet connection, you'll need to install software on your
computer so that you can connect to your Android device over USB. The USB
Connection option can be tricky, especially on Windows. Use this as a last resort.

App Inventor is having two main windows.

1. Designer window
Each component can have methods, events, and properties. Most properties can be
changed by apps — these properties have blocks you can use to get and set the values.
Some properties can't be changed by apps — these only have blocks you can use to get
the values, not set them. In this document, read-only properties are shown in italics . A few
properties are only available in the Designer.
Components
App Inventor provides the user with many different components to use while building their
mobile apps. The components are chosen on the Design screen and dragged onto the
phone. The user can then change properties of these components such as color, font,
speed, etc.There are two main types of components: visible and non-visible. Visible
components such as Button, TextBox, Label, etc. are part of the User Interface. Non-
visible components such as Accelerometer, Sound, OrientationSensor are not seen and
thus not a part of the UI screen, but they provide access to built-in functions of the Android
device.

Grade-IX 3 of 13 MIT App Inventor

 Babaji Vidhyashram
Properties
Every component is characterized by various properties. The current values of these
properties are the state of the component. You can specify the initial state of a component
in the Properties pane of the Designer window.
Events
AppInventor programs use event handler blocks to specify how the program should
respond to certain events. After, before, or when the event happens can all call different
event handlers. There are two types of events: user-initiated and automatic.
Clicking a button, touching or dragging the screen, and tilting the phone are user-initiated
events.

2. Blocks Editor

Built-in blocks are available regardless of which components are in your project. In
addition to these language blocks, each component in your project has its own set of
blocks specific to its own events, methods, and properties. This is an overview of all of the
Built-In Blocks available in the Blocks Editor.

Grade-IX 4 of 13 MIT App Inventor

 Babaji Vidhyashram
Components
Button
Button with the ability to detect clicks. Many aspects of its appearance can be changed, as
well as whether it is clickable (Enabled), can be changed in the Designer or in the Blocks
Editor. Few properties are BackgroundColor , Height , Image , Text , Width. Few Events
are Click() , LongClick()
Label
Labels are components used to show text. A label displays text which is specified by the
Text property. Other properties, all of which can be set in the Designer or Blocks Editor,
control the appearance and placement of the text. Few Properties are BackgroundColor ,
Height , Width , Text.
Textbox
Users enter text in a text box component.
The initial or user-entered text value in a text box component is in the Text property. If Text
is blank, you can use the Hint property to provide the user with a suggestion of what to
type. The Hint appears as faint text in the box. The MultiLine property determines if the text
can have more than one line. For a single line text box, the keyboard will close
automatically when the user presses the Done key. To close the keyboard for multiline text
boxes, the app should use the HideKeyboard method or rely on the user to press the Back
key. Few Properties are BackgroundColor , Height , MultiLine , Text .
Few Events are GotFocus().
TextToSpeech
The TestToSpeech component speaks a given text aloud. You can set the pitch and the
rate of speech.
HorizontalArrangement
Use a horizontal arrangement component to display a group of components laid out from
left to right.This component is a formatting element in which you place components that
should be displayed from left to right. If you want to have components displayed one over
another, use VerticalArrangement instead.In a HorizontalArrangement, components are
arranged along the horizontal axis, vertically center-aligned.
Few Properties are BackgroundColor , Image , Height , Width
VerticalArrangement
Use a vertical arrangement component to display a group of components laid out from top
to bottom, left-aligned.
This component is a formatting element in which you place components that should be
displayed one below another. The first child component is stored on top, the second
beneath it, and so on. If you want to have components displayed next to one another, use
HorizontalArrangement instead.
In a VerticalArrangement, components are arranged along the vertical axis, left-aligned.
Few Properties are BackgroundColor , Image , Height , Width.

Grade-IX 5 of 13 MIT App Inventor

 Babaji Vidhyashram
Variables
Variables can be thought of as containers that hold values.
There are two types of variables that we can use: global and local.
Global Variable
A global variable is a variable that can be accessed in multiple scopes. This means
that wherever you are in the program you can use that variable; get its current
value or set its value to something else. Global variables are created using the
initialize global name to block found in the Variables drawer.
Local Variable
A local variable is a variable that is declared within a function/procedure or it is an
argument passed into a function/procedure . This means that you can only access
these variables in that specific function/procedure where they are declared or
passed in as an argument.
Local variables are created when:
• arguments are passed in to a procedure or event
• using the initialize local name to block
• using a for each in list or for each from to block
The Variables drawer in blocks window provides blocks to create, get, and set both global
and local variables.
Variable blocks There are five main types of variable blocks:
initialize global name to
get
set
initialize local name to in (do)
initialize local name to in (return)

initialize global name to

"
This block is used to create global variables. It takes in any type of value as an argument.
Clicking on name will change the name of this global variable. Global variables are used in
all procedures or events so this block will stand alone.Global variables can be changed
while an app is running and can be referred to and changed from any part of the app even
within procedures and event handlers. You can rename this block at any time and any
associated blocks referring to the old name will be updated automatically.
get

"
This block provides a way to get any variables you may have created.

Grade-IX 6 of 13 MIT App Inventor

 Babaji Vidhyashram
set to

"
This block follows the same rules as get. Only variables in scope will be available in the
dropdown. Once a variable v is selected, the user can attach a new block and give v a new
value.
initialize Local name to - in (do)

"
This block is a mutator that allows you to create new variables that are only used in the
procedure you run in the DO part of the block. This way all variables in this procedure will
all start with the same value each time the procedure is run. NOTE: This block differs from
the block described below because it is a DO block. You can attach statements to it.
Statements do things. That is why this block has space inside for statement blocks to be
attached.You can rename the variables in this block at any time and any corresponding
blocks elsewhere in your program that refer to the old name will be updated automatically
initialize Local name to - in (return)

"
This block is a mutator that allows you to create new variables that are only used in the
procedure you run in the RETURN part of the block. This way all variables in this
procedure will all start with the same value each time the procedure is run. NOTE: This
block differs from the block described above because it is a RETURN block. You can
attach expressions to it. Expressions return a value. That is why this block has a socket for
plugging in expressions.You can rename the variables in this block at any time and any
corresponding blocks elsewhere in your program that refer to the old name will be updated
automatically.
Lists
Many apps use lists of data. For example, a game may keep a list of high scores and your
Facebook app keeps a list of your friends.
Lists are a type of data structure used in every programming language, not just App
Inventor. We use lists to create and manipulate different sets of values/elements.
The position of an element in a list is called its index. In App Inventor, the first element in a
list is index 1.
In the figure below, a has index 1, b has index 2, and c has index 3.

"

Grade-IX 7 of 13 MIT App Inventor

 Babaji Vidhyashram
What this means is that we can reference a specific element inside our list if we know
which index it has and what the list name is.
The lists drawer contains blocks to do many actions to lists.
create empty list

!
Creates an empty list with no elements.
make a list

"
Creates a list from the given blocks. If you don't supply any arguments, this creates an
empty list, which you can add elements to later. This block is a mutator. Clicking the blue
plus sign will allow you to add additional items to your list.
add items to list

"
Adds the given items to the end of the list. The difference between this and append to list
is that append to list takes the items to be appended as a single list while add items to list
takes the items as individual arguments. This block is a mutator.
is in list?

"
If thing is one of the elements of the list, returns true; otherwise, returns false. Note that if a
list contains sublists, the members of the sublists are not themselves members of the list.
For example, the members of the list (1 2 (3 4)) are 1, 2, and the list (3 4); 3 and 4 are not
themselves members of the list.
length of list

"
Returns the number of items in the list

is list empty?

"
If list has no items, returns true; otherwise, returns false.

Grade-IX 8 of 13 MIT App Inventor

 Babaji Vidhyashram
pick a random item

"
Picks an item at random from the list.
index in list

"
Returns the position of the thing in the list. If not in the list, returns 0.
select list item

"
Selects the item at the given index in the given list. The first list item is at index 1.
insert list item

"
Inserts an item into the list at the given position
replace list item

"
Inserts replacement into the given list at position index. The previous item at that position
is removed.
remove list item

"
Removes the item at the given position.

Grade-IX 9 of 13 MIT App Inventor

 Babaji Vidhyashram
append to list

"
Adds the items in the second list to the end of the first list.
copy list

"
Makes a copy of a list, including copying all sublists.
is a list?

"
If thing is a list, returns true; otherwise, returns false.

Conditional Statements
Computers, even small ones like the phone in your pocket, are good at performing
thousands of operations in just a few seconds. Even more impressively, they can also
make decisions based on the data in their memory banks and logic specified by the
programmer. This decision-making capability is probably the key ingredient of what people
think of as artificial intelligence-and it's definitely a very important part of creating smart,
interesting apps.
if & if else

"
Tests a given condition. If the condition is true, performs the actions in a given sequence of
blocks; otherwise, the blocks are ignored.
if then else

"
Tests a given condition. If the statement is true, performs the actions in the then-return
sequence of blocks and returns the then-return value; otherwise, performs the actions in
the else-return sequence of blocks and returns the else-return value.

Grade-IX 10 of 13 MIT App Inventor

 Babaji Vidhyashram
for each from to

"
Runs the blocks in the do section for each numeric value in the range starting at from and
ending at to, incrementing number by the value of by each time. Use the given variable
name, number to refer to the current value. You can change the name number to
something else if you wish.
for each in list

"
Runs the blocks in the do section for each item in the list. Use the given variable name,
item, to refer to the current list item. You can change the name item to something else if
you wish.
while

"
Tests the -test condition. If true, performs the action given in -do , then tests again. When
test is false, the block ends and the action given in -do is no longer performed.
do

"
Sometimes in a procedure or another block of code, you may need to do something and
return something, but for various reasons you may choose to use this block instead of
creating a new procedure.

Grade-IX 11 of 13 MIT App Inventor

 Babaji Vidhyashram

Procedures
A procedure is a set of instructions that perform a specific task or tasks. It may also be
called a function. An App Inventor procedure collects a sequence of blocks together into a
group. You can then use the sequence of blocks repeatedly by calling the procedure. If the
procedure has arguments, you specify the arguments by using name blocks. When you
create a procedure, App Inventor automatically generates a call block and places it in the
My Definitions drawer. You use the call block to invoke the procedure.An argument is an
input to our procedure. Some procedures require knowing some bits of information that
change how the procedure is run.
A procedure is a set of blocks together in a group that can be run by calling the procedure.
A procedure can return something or not have a return value. A procedure can take
arguments. Procedure blocks are available in procedures drawer in blocks window.

procedure do

"
Collects a sequence of blocks together into a group. You can then use the sequence of
blocks repeatedly by calling the procedure. If the procedure has arguments, you specify
the arguments by using the block's mutator button. If you click the blue plus sign, you can
drag additional arguments into the procedure.

"
When you create a procedure, App Inventor automatically generates a call block and
places it in the My Definitions drawer. You use the call block to invoke the procedure.

procedure result

"
Same as a procedure do block, but calling this procedure returns a result.

"
After creating this procedure, a call block that needs to be plugged in will be created. This
is because the result from executing this procedure will be returned in that call block and
the value will be passed on to whatever block is connected to the plug.

Grade-IX 12 of 13 MIT App Inventor

 Babaji Vidhyashram
Answer the Questions

1. What is the use of MIT App Inventor?

2. What are two main windows of app inventor? Explain.
3. What is the use of a label component? Write its properties .
4. What is the use of a textbox component? Write its properties .
5. What are the components used to align?
6. What is the use of lists? Write the names of few list blocks.
7. What is a variable ? Explain the difference between local and global variable?
8. Write the name of the blocks used to access variables.
9. Write the blocks used to create variables.
10. What is a procedure? What are the advantages of using a procedure?
11. Explain the difference between if..then and if...then...else blocks.
12. What is the use of conditional blocks?

Grade-IX 13 of 13 MIT App Inventor