App Inventor
Barb Ericson
ericson@[Link]
Nov 12, 2011
History
Released to the public Dec 15, 2010
Based on prior work in computing
education
Seymour Papert Logo and constructionism
Uses the Open Blocks Java library from MIT
Similar to Scratch, also from MIT
Moving to MIT after Dec, 31, 2011
No date given yet for when MIT will provide
service
What is it?
Free platform for developing apps for
mobile devices that run Google Android OS
All data is stored on the server
Cloud computing
It has two parts
Component Designer where you design the
user interface and add non-visible components
like sounds
Blocks Editor where you add behavior by
snapping together blocks
Important!
Google will turn off the App Inventor
servers on Dec 31, 2011 No date
yet on MIT servers
Click on the "Download All Projects" to
save your projects to your computer
before Dec 31, 2011
Component Designer
Runs in a browser some problems
in IE
Parts of the Designer
Palette
Visible and nonvisible
components
Viewer
Shows current
app interface
Components
Names
of the
components
Properties
Set or view
properties
here
Blocks Editor
Runs using Java Web Start from
cloud
Start an
emulator
Get blocks
from here
Drag the
blocks here to
create your
app
Connect to
emulator or
phone
Getting Started
Instructions at
[Link]
Install Java 6 or above
Install the App Inventor Setup Software
Install phone drivers if you want to use
phones
Setup your phone
[Link]
Login to site (create google account if needed)
[Link]
Setup Phone
Menu Settings Applications
Menu Settings Development
Creating a new project
Click on the "New" button
Type in a name for the project (no
spaces)
Becomes the name for the app "cowbell"
Add an Image Button
Drag out a "Button" from
the basic palette and drop
it on Screen1
In the properties area click
on "None" under Image.
Click on Add and an Upload
File window will appear
Click on Browse and find
the "[Link]" file
Then click "OK"
Clear the button text
Set the width and height
Add a Sound
Drag out a Sound from
the media palette
It isn't visible on the
screen but will be shown
in the Non-visible
components
Click on "None" under
the Source property
Click on "Add"
Click on "Browse" and
find "[Link]"
Click on "OK"
Current User Interface
Bring up the Blocks Editor
Click on the "Open
the Blocks Editor"
button
This will download
the Java Web Start
file
Depending on the
browser you may
have to click on
"Save" and then
click on the
downloaded file or
Adding an Event Handler
An event handler
responds when an
event occurs
Like when a button
is clicked
Click on "My
Blocks"
Then on "Button1"
Drag out a when
[Link] block
and drop it in the
center area
Playing the Sound
Click on
"Sound1"
Drag out a "call
[Link]"
block and drop
it inside the
"when
[Link]"
When you click
the button the
sound will play
Showing the App on the
Emulator
Click on the "New
emulator" button in the
Blocks Editor
Wait for the emulator
Wait till it looks like a phone
(several minutes)
Unlock by clicking on the
lock and dragging to the
right
Click on "Connect to
Device" and select the
emulator
The app will download to
the emulator and show
Downloading to Phone
Connect the phone
with the USB cable
The first time you
may have to install
device drivers
[Link]
[Link]/learn/s
etup/
Click on "Connect
to Device"
Click on the phone
id
Play Sound While Shaking
Phone
In the Designer drag out an
AccelerometerSensor from the
sensors palette
It will show under Non-visible
components
In the Blocks Editor in "My
Blocks" click on
"AccelerometerSensor1" and
drag out a "when
[Link]"
Add a "call [Link]" from
"Sound1'
Package for Phone
Your app will work
as long as the
phone is connected
To have your app
work after you
disconnect the
phone
In the Designer
click on "Package
for Phone"
Click "Download to
Connected Phone"
Sharing an App with Others
In Designer
Click "Package for Phone"
Click "Download to this
Computer"
This will download a file
ending in .apk to your
computer
Upload the file to the web
and tell others the url
They can use their phone's
browser to go to the url and
download the app
They will need to allow
"Unknown Sources" in the
Application settings on their
phone
Sharing a Project with
Others
Go to "My Projects"
Check the app to share
Click on "More Actions"
and then "Download
Source"
This will download a file
to your computer that
ends in .zip
Others can click on
"More Actions" and
"Upload Source" to get
project
Computing Concepts
Event driven programming
Variables
Conditionals
Random Numbers
Procedures and parameters
Creating your own blocks
Lists
Iteration (Loops)
Recursion
User Interfaces
Model, View, Controller
What else can you do?
Create games
Image sprites collision
detection, timers
Use the camera and then
draw on the picture
Canvas
Create a quiz
Using lists
Automatically respond to
text messages
Use text-to-speech to
read a message
Store data on the phone
Use the GPS to remember
where your car is
Open Google maps to a
particular URI
Play notes and record what
you play
Create a list of people to
automatically text
Create a remote control for
your LEGO NXT robot
Use a barcode scanner and
get info from websites with
web data APIs
Tips and Techniques
You can copy and paste a set of blocks
Control C and V on windows
You can just type a number or Boolean
value
The correct block will be created
When you right click on a block you can:
Add a comment
Deactivate a block
Watch a variable
Execute a block immediately
Resources
Our distance learning site
[Link]
Official tutorials
[Link]
College course
[Link]
[Link]
On-line draft of a book and example code
[Link]
[Link]