CEMC – Summer Workshop 2012
Grant Hutchison grant.hutchison@gmail.com
Humberside CI, TDSB








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)


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


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)

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)

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

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)

X Want to teach O-O
X Want to debug syntax errors
X Want to create large group projects
X Want to develop 3D games




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

1.
2.
3.
4.
5.
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

http://appinventor.mit.edu

Most students use the emulator
Development Steps
1.
Start browser
2.
Start emulator
3.
Connect App Inventor (Blocks Editor) to emulator for testing
Emulator takes a few minutes to start.
Each code change will be reflected in emulator.

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.

Students have phones
Development Steps
1.
Start browser
2.
Connect phone to USB port
 ensure device drivers are present and phone is in USB debugging mode
3.
Connect App Inventor (Blocks Editor) to phone for live testing.
Each code change will be reflected in phone.

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




Register as a developer with Google Play
Agree to the Google Play Developer
Distribution Agreement
Pay a registration fee ($25.00)
◦ https://play.google.com/apps/publish/signup
DEMO

Design /
Redesign
• Paper / Pencil
Test /
Debug
Create
UI
• Component
Designer
• Blocks Editor
• Phone/Emulator
Code
Blocks
• Blocks Editor


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

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

Event based programming

Components are visible or non-visible
"objects" with defined properties and
behaviours (libraries).

Set initial properties within 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



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)


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)


 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



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

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

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

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


Built-In
◦ Definition
 variables, procedures
◦ Text
 String library
◦ Lists
 List library
◦ Math
 Math operators
◦ Logic
 relational operators, conditionals
◦ Control
 screens, loops
◦ Colors
 color library




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)

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.

App Inventor Skills


Screens
◦ properties
 BackGroundColor
Buttons
◦ properties
 Text
◦ Events
 WhenClicked


Purpose
◦ 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


Purpose
◦ 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.






KISS
◦ 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

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




Numbers or Text
Global
◦ 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


What is the event?

What does the handler do?

What are hits and
misses?

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

•
Block in test socket
•
MUST evaluate to true / or false

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
 then-do
 else-do
◦ Algorithms
 see lab instructions

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


 coordinates provided to event handler
In this case the action is to Draw a Circle on the same canvas
◦ can have multiple canvas 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

Objective
Create an interactive drawing program.
◦ Components
 Canvas
◦ Concepts
 Responding to user input
 Touched
 Dragged
◦ Algorithms
 Increment / Decrement of variables

Clocks non-visible components
Used for 2 REASONS
1.
Determine current Time or Date
◦ Use Now() method to determine the current timestamp
2.
Cause events to occur at regular intervals
◦ Enable the Timer property (true or false) and set the Interval property (milliseconds)

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


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

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.

Objective
Create an interactive game.
◦ Components
 Canvas
 ImageSprite
 Clocks
◦ Concepts
 Responding to user input
 Touched
 Randomness
 Game levels and difficulty
◦ Algorithms
 see lab handout

 variable value
◦ loop counter
 no break option



How many iterations?
Value of varTotal
◦ Before Loop?
◦ After Loop?

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)


Condition is checked at the beginning of every iteration

Very flexible

No loop variable




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

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)

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


User Input Component
◦ Predefined selection of possible values
 Drop down list

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

2 non-visible components for audio:
1.
Player
◦ 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()
2.
Sound
◦ play a short audio file

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

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

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

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

Objective
Create an application to generate quizzes for students.
◦ Components
 TinyDB
◦ Concepts
 Storage and Retrieval of data
◦ Algorithms
 see lab handout

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

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


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

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

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

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"


Sample Code
◦ tAIR – the App Inventor Repository: http://www.tair.info/

Tools - prepare apps for Google Play
◦ AppToMarket – available from http://amerkashi.wordpress.com/
◦ Marketizer – available from http://www.taiic.com/marketizer/

Books


App Inventor Site – Explore
◦ Forums
◦ Curriculum Resources

Project Sharing http://gallery.appinventor.mit.edu


Java Bridge
◦ 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

1.
2.
6.
7.
4.
5.
3.
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


I continually update my materials and will make them available at any time.

Website
◦ http://hutchison-teach.ca

Teaching resources
◦ Available in a non-linked directory on my website
◦ Directory Name: app-inventor-resources

Email grant.hutchison@gmail.com