1. App Inventor CEMC – Summer Workshop 2012
Grant Hutchison
Humberside CI, TDSB

2. Agenda What is App Inventor? Why App Inventor?
CS Educational Perspective
How to use App Inventor?
Hands on activities (Lab 1 and 2)
More App Inventor
Resources and Futures
Student Projects
Hands on activities (Labs 3 and beyond)

3. What is App Inventor?
App Inventor is a visual programming environment to create Android based mobile applications.
Originally created by Google Labs.
Jan 1, 2012 – MIT Media Lab
Center for Mobile Learning established by Hal Abelson
Google still active on the project
Language is also open sourced

4. Why App Inventor? Students Love their Smartphones
Want to create mobile apps
Want to teach novice programmers
Want to create fun apps (games) quickly
Want to motivate "all" students
Want access to rapidly growing mobile application marketplace (Google Play)

5. CS Education perspectives (1 of 3)
Basics
data types (weak point)
numbers and text only (globally scoped)
data structures (weak, but good for intro CS)
lists only
operators / built-in functions
simple set of string and list functions and math operators
iterators
while, for next, for each
conditionals
if, if else, boolean / relational
modularity
procedures (within app only / no user defined libs)
App Inventor has only 2 data types (text and numbers).
Caveats
-All variables have a global scope (within a app/screen combination)
-naming convention is important to avoid confusion -

6. CS Educator perspectives (2 of 3)
Advanced
Databases (?)
TinyDB (local – key-based access
TinyWebDB (cloud – key-based access)
Sensors
haptic (vibration – need phone)
gyroscope / accelerometer (need phone)
location (GPS)
Phone Libs
texting (SMS)
Other Libs
text to speech – used in my courses
Bluetooth / Lego Mindstorms
Web services / websites / Other apps / Fusion tables

7. CS Educator perspectives (3 of 3)
Advanced
Graphics
Sprites – Movement / Collision detection
User Interfaces
Multiple Screens - scoping
Input
Buttons, textboxes, checkboxes, list picker
canvas / sprites – location, motion, collision/edge detection
Output
labels, colours, sound, vibration (haptic)

8. Why NOT App Inventor? Want to teach O-O Want to debug syntax errors
Want to create large group projects
Want to develop 3D games

9. Where is App Inventor Used?
U.S. Colleges/Universities
University of San Francisco – Dave Wolber
Wellesley College – Lyn Turbak
Trinity College (CS Principles) - Ralph Morelli
After school programming clubs
Technovation Challenge
High Schools
Scotland (national curriculum) – Jeremy Scott
Various schools including Humberside CI
Dave Wolber has a complete course-in-a-box on his website and his book is excellent
Lyn Turbak has a complete curriculum on his website and many of his advanced students are working on App Inventor extensions
Ralph Morelli has created a CS Principles based course using App Inventor. CS Principles is a proposed framework for the revised AP CS exam in the US.
Technovation Challenge is a 10 week after school program for grade 9 girls in the US. They learn how to program using App Inventor and they also learn about the IT industry from local female mentors. The students design and implement an application and they pitch they app design to business leaders and they compete against other schools.
In Scotland they are revising their high school CS curriculum. Jeremy Scott has created an excellent Mobile App Development course for high school students. His resources consist of 7 lessons and the resources are readily accessible (search for "I love my smartphone").
Computational Thinking
-seeing a problem and its solution at many levels of detail (abstraction);
-thinking about tasks as a series of steps (algorithms);
-understanding that solving a large problem will involve breaking it down into a set of smaller problems (decomposition);
-appreciating that a new problem is likely to be related to other problems the learner has already solved (pattern recognition);
-realising that a solution to a problem may be used to solve a whole range of related problems (generalisation).
Humberside
2 years ago I started teaching and I was asked to teach 3 sections of ICS2O using Visual Basic as the high school used VB and Java within their program.
This past year at Humberside CI I had the opportunity to start with a fresh curriculum with 2 sections of ICS2O and 1 section of ICS3U.

10. 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 OSX, Linux)
provides Android emulator
Recent version of Java (v6+)
Internet connectivity
optional
Android phone/tablet
device driver for Android device
I ran into a few issues in my TDSB environment based on network policies.
The issues I had were:
1. size of the files created by the Android emulator was beyond our Windows User Profile limit of 100MB
2. Emulator controls from AI use Windows Batch files
Resolutions
Changed configuration to redirect emulator files to use a USB flash drive on F: or E:
Changed batch file to executable script and provided students with executables.

11. Follow the steps http://appinventor.mit.edu
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.

12. Classroom environment
Most students use the emulator
Development Steps
Start browser
Start emulator
Connect App Inventor (Blocks Editor) to emulator for testing
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.

13. Classroom environment - Files
Source code is a zip file
The file can be transferred between computers and it is hosted on MIT webservers for each user.
Only App Inventor "understands" the contents of the zip file.
Students should provide zip file for assessment
Install/Binary image is an apk (Android Package File)
The apk file is only created when the developer decides to create a release.
Students would only create these file to share final application with other Android users.
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.

14. Classroom environment (alternate)
Students have phones
Development Steps
Start browser
Connect phone to USB port
ensure device drivers are present and phone is in USB debugging mode
Connect App Inventor (Blocks Editor) to phone for live testing.
Each code change will be reflected in phone.
Some AI features don't work in live testing mode.
TinyDB for example.

15. Take it with you !! 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.

16. Publish to Google Play DEMO Register as a developer with Google Play
Agree to the Google Play Developer Distribution Agreement
Pay a registration fee ($25.00)
DEMO

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

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

19. Get Developing - Tools
App Inventor consists of (3) tools working in unison:
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)

20. AI Components Event based programming
Components are visible or non-visible "objects" with defined properties and behaviours (libraries).
Set initial properties within Component Designer

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

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

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

24. Designing Apps typical phone has 300 x 400 pixel screen GUI components
default position is top and left
location can be adjusted
Screen Arrangements (later)
Properties (common)
Text
Width – Fill Parent
Height

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

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

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

28. Buttons Event When Click do
SOME ACTION
The action occurs once for each button click.
Example: Change screen color

29. Blocks Editor

30. Blocks Editor Built-In Definition Text Lists Math Logic Control Colors
variables, procedures
Text
String library
Lists
List library
Math
Math operators
Logic
relational operators, conditionals
Control
screens, loops
Colors
color library

31. Changing Properties
Properties are set initially based on their default value in the Component Designer.
Blocks can be used to change the properties of any components in your Project..
Blocks Editor
Locate the component of interest (Screen1)
Locate the SETTER block and provide (snap in) a valid value for the property (Color in this example)

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

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

34. Textbox Purpose Properties Advice
To obtain user input (text or numbers).
Properties
Text
value provided by user
Hint
user prompt for user (before they provide input)
useful to avoid extra Labels for user directions
FontSize
Consider setting to 20 px or more
Advice
Use Set Text Property Block to reset input between tasks

35. Labels Purpose Properties Advice
To display output to users (text or numbers).
Properties
Text
value provided to user
FontSize
Consider setting to 20 px or more
Advice
Use meaningful component names to ease code readability.

36. UI Guidelines KISS Use easy to read fonts
Keep It Simple
Best apps are intuitive – no manuals required
Use easy to read fonts
Position GUI inputs in logical locations
Size GUI input or output components
large enough
Consider best feedback mechanisms
Consider Users and Devices
Options
vibration, speech, sound, display

37. Lab 2 - Calculator
Objective Create a simple calculator app that can add, subtract, multiply, and divide operations.
Components
Button
TextBox
Screen Arrangement
Concepts
Math operators
Algorithms
When math operator button is clicked
perform corresponding operation on the 2 numeric input values
display result to user
Extension : TextToSpeech

38. Variables Numbers or Text Global Use prefix var
available throughout app/screen
Use prefix var
Good habits
store all user input into variables and avoid re-reading values from GUI components
create a variable for any output before setting the GUI property

39. Example: Events / Event Handlers
What is the event?
What does the handler do?
What are hits and misses?

40. Lab 3 – Get the Message
Objective Create a program to determine the age of a person based on their year of birth. The application will also request the user's first name, last name, and it will display and announce their name and age within a complete sentence.
Components
Button
TextBox
Screen Arrangement
Concepts
Text methods
Math methods
Procedures
Algorithms
see lab instructions

41. Conditionals
Block in test socket
MUST evaluate to true / or false

42. Conditionals – Example 1

43. Conditionals – Example 2
There is no ELIF… you simply add another IFELSE or IF block.
You can use Logic blocks like AND, OR, NOT to combine test conditions.

44. Lab 4 – Temp Convertor
Objective Create a temperature convertor program for Fahrenheit and Celsius.
Components
Button
TextBox
Screen Arrangement
Concepts
Math operators
Conditions
If test
then-do
Ifelse test
else-do
Algorithms
see lab instructions

45. Canvas Grid for animation and graphics
Uses (x,y) coordinates to locate objects
(0,0)
(0,400)
(300,0)
(300,400)

46. Canvas components coordinates provided to event handler
In this case the action is to Draw a Circle on the same canvas
can have multiple canvas objects

47. Controlling Objects
A separate canvas and sprite can be used as a game controller.
The value of draggedSprite is True when the sprite is being dragged

48. Lab 5 – Paint the Puppy
Objective Create an interactive drawing program.
Components
Canvas
Concepts
Responding to user input
Touched
Dragged
Algorithms
Increment / Decrement of variables

49. Clocks Used for 2 REASONS Determine current Time or Date
Clocks - non-visible components
Used for 2 REASONS
Determine current Time or Date
Use Now() method to determine the current timestamp
Cause events to occur at regular intervals
Enable the Timer property (true or false) and set the Interval property (milliseconds)
You can have one or MORE clocks in a single app.
Clocks are often used in games to control the frequency of animations, updates, timers (playing time etc..).

50. Randomness
App Inventor has various methods of generating Random values
In the next lab we will move ImageSprites to Random locations within a Canvas.

51. ImageSprite
An image sprite is an animated object that can interact with a canvas, balls, and other image sprites.
contained by a canvas
react to touches and drags
interact with other sprites and the edge of the canvas

52. ImageSprite Sprite Movement Speed property to 10 (pixels)
amount of movement per interval
Interval property to 5 (milliseconds)
frequency of movement
Heading property to 180 (degrees)
Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down.
Enabled property to True
You can change these and other properties to modify the image sprite's behavior.

53. Lab 6 – Mole Mash Plus Objective Create an interactive game.
Components
Canvas
ImageSprite
Clocks
Concepts
Responding to user input
Touched
Randomness
Game levels and difficulty
Algorithms
see lab handout

54. Loops – Counted / For Loop
variable value
loop counter
no break option

55. Loops – For Loop Example
How many iterations?
Value of varTotal
Before Loop?
After Loop?

56. Lab 7 – Investments
Objective Create an future investment calculator to determine the value of compound interest investments.
Components
Screens – Multiple
Concepts
Loops – For Range (Counted)
Algorithms
see lab handout (exponential relations)

57. Loops – Conditional Loop
Condition is checked at the beginning of every iteration
Very flexible
No loop variable

58. Conditional Loop - Example

59. Lists Heterogeneous Indexed from one (1) Many methods avail
Good habits
use clearly defined variable names
removing all values
set the variable with an empty "make a list" block

60. Lab 8 – Looping with Colour
Objective Create a fun graphical application.
Components
Canvas
Ball
Concepts
Loops – For Range (Counted)
Lists – random colour from a list
Algorithms
see lab handout (exponential relations)

61. Lab 9 – Know your Elements
Objective Create a science-based quiz game involving knowing the most abundant elements on Earth.
Components
Notifier
Concepts
Maintaining parallel lists
Algorithms
see lab handout

62. List Picker User Input Component
Predefined selection of possible values
Drop down list

63. Lab 10 – Tip Calculator
Objective Create an application to calculate each person's equal share of the restaurant (or any) bill including a tip for service.
Components
ListPicker
Concepts
Improving user input data quality and overall UI
Algorithms
see lab handout

64. Audio 2 non-visible components for audio: Player Sound
play an audio or video file ( many formats available ) or to vibrate the phone
the name of the media file is specified in the Source property
methods include: start(), stop(), pause()
Sound
play a short audio file

65. Video
Videoplayer
Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format
file is set with the Source property
methods include:
Start()
Pause()
SeekTo(number of millisecs)
GetDuration()
Note:
Video files should be < 1 MB
The overall size of an app is set to a max of 5 MB

66. Playing Music? - Example

67. Lab 11 – Music Maker
Objective Create a xylophone application that can be used to record and playback music.
Components
Sound
Clock
Concepts
Parallel list processing
Resetting timers – Controlled event processing
Algorithms
see lab handout

68. Storage Types
An application needs to remember information as it is being used by a user.
There are two storage areas for applications :
volatile storage
storage that exists only while the application is being used
non-volatile storage
storage that will exist between uses of the application

69. "Database" storage
App Inventor is able to store variables or lists in locally on the phone or on a web server.
Local storage
TinyDB component
Cloud Storage
TinyWebDB component

70. Lab 12 – Quiz Maker
Objective Create an application to generate quizzes for students.
Components
TinyDB
Concepts
Storage and Retrieval of data
Algorithms
see lab handout

71. Animation - Edge Detection
<ball/sprite>.EdgeReached (number edge) The edge argument tells which edge was reached.
(0,0)
(0,400)
(300,0)
(300,400)
edge 1
edge -1
edge 4
edge 3
edge 2
edge -4
edge -3
edge -2

72. Edges You can detect when an object meets the edge of a canvas.
bounce method is available for edge events
edge value can be checked

73. Collisions Collisions can be detected by either object.
eg. Ball is colliding with a paddle imageSprite
Note that the heading is changed to simulate a bounce

74. Lab 13 – AndyPong
Objective Create an pong style game with a control pad for the paddle and various difficulty levels.
Components
Sprites
Concepts
Collision detection
Edge detection
Simulating bounces or providing direction to objects
Game levels
Algorithms
see lab handout

75. Live App Exploring Computer Science
Purpose of the Application
To respond to declining enrolment in Computer Science, Technology and Business courses.
Create an free app that can be used as an interactive gateway for Computer Studies, Business Studies, and Technology courses in Ontario High Schools.
Audience
Students, parents, teachers, guidance

76. Live Apps Exploring Computer Science
The application includes information about available courses along with extra information such as competitions. The app also includes an interactive game called "MythBusting Computer Science". Just go to Google Play and search for: "Explore Computer Science"

77. Resources Sample Code Tools - prepare apps for Google Play
tAIR – the App Inventor Repository:
Tools - prepare apps for Google Play
AppToMarket – available from
Marketizer – available from

78. Resources
Books

79. Resources
App Inventor Site – Explore
Forums
Curriculum Resources

80. Resources - Gallery
Project Sharing

81. Futures Java Bridge Use in CS Education likely to increase
AI components wrapped in a JAR file to enable a transition from AI to full Android SDK development using Eclipse and Java
Use in CS Education likely to increase

82. Futures – AI Summit News
Embed the Blocks Editor into the browser
Remove need for phone drivers – wireless app development
Services - notifications like twitter (long running apps)
Video Capture and play back
New Flung method for Sprites
Blocks to text and Text to Blocks
Support for team programming

83. Thanks
I continually update my materials and will make them available at any time.
Website
Teaching resources
Available in a non-linked directory on my website
Directory Name: app-inventor-resources