MIT App Inventor
Lesson 1 – Getting Started with App
Inventor
Agenda
• What is App Inventor?
• Getting Started
– Designing User Interfaces (Design)
– Creating Blocks (Code)
– Emulator (Test)
• Handling Events
– Buttons (Action)
– Components (Behaviour)
What is App Inventor?
App Inventor is a visual programming
environment used to create mobile applications
for Android devices (phones/tablets).
Facts
◦ Originally created by Google Labs
◦ Now hosted at MIT
◦ Project is open source
Explore – Setup / Tutorials
http://appinventor.mit.edu
Click on Explore to learn about App Inventor.
Where do I get the Installer?
http://appinventor.mit.edu/learn/setup/setupwindows.html
http://appinventor.mit.edu/learn/setup/setupmac.html
AI - Projects
Click on Invent to create/modify App Inventor Projects.
App Inventor- Tools
AI consists of three (3) tools that work together:
1. Component Designer
Define Graphical User Interface (GUI) and Non-GUI components
2. Blocks Editor
Determine the behaviour (algorithms and data structures) of the
components
3. Android phone or emulator
Platform for testing/using apps
App Inventor Development Cycle
Design / • Paper / Pencil
Redesign
• Component
Create
Test / Designer
User
Debug
Interface
Code • Blocks Editor
• Blocks Editor Blocks
• Phone/Emulator
What do I need to get started?
1. GMail enabled account
2. Browser (anything but IE)
3. Install the App Inventor Setup program for your
platform (Windows, Mac OS X, Linux)
– provides Android emulator
4. Recent version of Java (v6+)
5. Internet connectivity
optional
– Android phone/tablet
– device driver for Android device for live testing
Classroom environment
Development Steps
1. Open browser (Firefox or Chrome)
appinventor.mit.edu
2. Start emulator from desktop shortcut
3. Start Blocks Editor
Java application
4. Connect Blocks Editor
to emulator for testing
Notes:
Emulator takes a few minutes to start.
Each code change will be reflected in emulator.
Get Developing - Projects
An App Inventor Project is a collection of components
and blocks.
Open website
Log in using your GMAIL account
Available Actions
◦ Import existing project into new project
◦ Create new project
◦ Save/Export project
AI – Projects Page
AI Components / Events
Event based programming
Components are visible or non-visible
"objects" with defined properties and
behaviours.
Set the initial properties of components in
the Component Designer
AI Component Designer
A. Palette - Available component types
B. Viewer - "rough" visualization of app
C. Components - actual components in project
D. Properties - initial properties for component
Palette
• Grouped by type
• Action
1. select component and drag
it to the Viewer
• Note: Default name given
2. click RENAME button in
Component section to give
it a MEANINGFUL NAME
3. Change default property
values (if desired)
Screens
Properties
◦ Defaults – Comp Designer
◦ BackgroundImage
may need to be resized
◦ Icon
Used on devices only (50x50)
◦ ScreenOrientation
can be fixed or flexible
◦ Scrollable
◦ Title – ALWAYS change
exception is Screen1
◦ VersionCode - new
◦ VersionName – new
Multiple Screens (later)
Designing Apps
typical phone is
300 x 400 pixels
GUI components
◦ default position is top and
left, but can be changed
◦ location can be adjusted
Screen Arrangements (later)
◦ Properties (common)
Text
Width – Fill Parent
Height
Best Practices - Naming
Every component has a name
If component will be used in
your algorithm
◦ CHANGE ITS NAME
Naming Conventions
◦ btnName – buttons
◦ txtName – textbox (later)
Note: "Name" is decided by the
programmer
Behaviour
Represents the logic of your application
Programs consist of 3 types of structures
1. Sequential operations
2. Conditional operations (decisions)
3. Repeated operations
Use the Blocks Editor to define the app behaviour.
Component : Button
• Buttons are GUI components
– Typical Use: Input
• Take an Action / React to a User Initiated Event
• Example: Reset Score button Reset
Score
Text Width Height Alignment
Reset 40 20 center
Score
• Actions would be defined in Blocks Editor
using Blocks/Code
Button actions
Event - when click do
– This action occurs once for each button click.
• Example: Change screen color
Blocks Editor
Blocks Editor: Built-In
Definition
◦ variables, procedures
Text
◦ String library
Lists
◦ List library
Math
◦ Math operators
Logic
◦ relational operators, conditionals
Control
◦ screens, loops
Colors
◦ color library
Blocks Editor: My Blocks
Choose your
component
Set the default
properties for each
component
Dynamically Changing Properties
Properties are initially set in Component Designer
Blocks can change the properties of any
components in your Project
Blocks Editor
◦ Locate the component (Screen1)
◦ Locate the set block and provide a valid value for the
property (BackgroundColor in this example)
HELLO KITTY
DEMO
Lab 1 - ColourMe
Objective
Create an interactive app that changes the colour of the screen on the
computer.
◦ Components
Buttons
Screen1
◦ Algorithms
When "red" button is clicked (Event)
change the screen colour to red (Event Handler).
Include buttons for "Green", "Blue"
Initially
The app should have a "white" background when it starts and the "Reset" button will reset the screen
Include a "Quit" button to close the application.
Lab 1 - ColourMe
App Inventor Skills
Screens
◦ properties
BackGroundColor
Buttons
◦ properties
Text
◦ Events
WhenClicked
Take it with you !!
If students have phones.
Three ways to get the app on a phone.
1. Create a QR code
◦ download to a phone (using developer
email)
2. Download to the computer
◦ save a an Android install file (APK) on your
development computer
3. Download to Connected Phone
◦ install the APK directly on the phone
