1. Lesson 1 – Getting Started with App Inventor
MIT App Inventor
Lesson 1 – Getting Started with App Inventor

2. Agenda What is App Inventor? Getting Started Handling Events
Designing User Interfaces (Design)
Creating Blocks (Code)
Emulator (Test)
Handling Events
Buttons (Action)
Components (Behaviour)

3. 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

4. Explore – Setup / Tutorials
Students can work on their projects at home as long as they have installed the App Inventor setup files.
I had students using Mac OSX and Windows at home.
Their projects are stored on MIT web servers.
Click on Explore to learn about App Inventor.

5. Where do I get the Installer?

6. Click on Invent to create/modify App Inventor Projects.
AI - Projects
Click on Invent to create/modify App Inventor Projects.

7. App Inventor- Tools AI consists of three (3) tools that work together:
Component Designer
Define Graphical User Interface (GUI) and Non-GUI components
Blocks Editor
Determine the behaviour (algorithms and data structures) of the components
Android phone or emulator
Platform for testing/using apps
The Component Designer is a web application.
The Blocks Editor is a Java application that is launched on the client.
In the future the Blocks Editor will become an web application that is integrated with the Component Designer (using Google's Blockley open source blocks based open source project)

8. App Inventor Development Cycle
Design / Redesign
Create User Interface
Code Blocks
Test / Debug
Paper / Pencil
Component Designer
Blocks Editor
Blocks Editor
Phone/Emulator

9. What do I need to get started?
GMail enabled account
Browser (anything but IE)
Install the App Inventor Setup program for your platform (Windows, Mac OS X, Linux)
provides Android emulator
Recent version of Java (v6+)
Internet connectivity
optional
Android phone/tablet
device driver for Android device for live testing

10. Classroom environment
Development Steps
Open browser (Firefox or Chrome)
appinventor.mit.edu
Start emulator from desktop shortcut
Start Blocks Editor
Java application
Connect Blocks Editor to emulator for testing
Notes:
Emulator takes a few minutes to start. Each code change will be reflected in emulator.
Unfortunately the applications cannot use the various phone sensors such as the accelerometer when an emulator is used.
Also, changing screens is currently not supported by the emulator.

11. 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
The Component Designer is a web application.
The Blocks Editor is a Java application that is launched on the client.
In the future the Blocks Editor will become an web application that is integrated with the Component Designer (using Google's Blockley open source blocks based open source project)

12. AI – Projects Page

13. 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

14. AI Component Designer Palette - Available component types
Viewer - "rough" visualization of app
Components - actual components in project
Properties - initial properties for component

15. Palette Grouped by type Action
select component and drag it to the Viewer
Note: Default name given
click RENAME button in Component section to give it a MEANINGFUL NAME
Change default property values (if desired)

16. Screens Properties Multiple Screens (later) 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)

17. 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

18. 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

19. Behaviour Represents the logic of your application
Programs consist of 3 types of structures
Sequential operations
Conditional operations (decisions)
Repeated operations
Use the Blocks Editor to define the app behaviour.

20. Component : Button Buttons are GUI components
Typical Use: Input
Take an Action / React to a User Initiated Event
Example: Reset Score button
Actions would be defined in Blocks Editor using Blocks/Code
Reset Score
Text
Width
Height
Alignment
Reset Score 40 20
center

21. Button actions Event - when click do
This action occurs once for each button click.
Example: Change screen color

22. Blocks Editor

23. 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

24. Blocks Editor: My Blocks
Choose your component
Set the default properties for each component

25. 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)

26. Hello Kitty Demo

27. 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.

28. Lab 1 - ColourMe App Inventor Skills Screens Buttons properties Events
BackGroundColor
Buttons
Text
Events
WhenClicked

29. Take it with you !! If students have phones.
Three ways to get the app on a phone.
Create a QR code
download to a phone (using developer )
Download to the computer
save a an Android install file (APK) on your development computer
Download to Connected Phone
install the APK directly on the phone
Source code is a zip file. The file can be transferred between computers and it is hosted on MIT webservers for each user.
Install/Binary code is an APK (Android Package File) and it is only created when the developer decides to create a release.