Transcript App_Inventor_Workshop_CEMC_Summer _2012

App Inventor
CEMC – Summer Workshop 2012
Grant Hutchison
[email protected]
Humberside CI, TDSB
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)
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
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)
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)
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
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)
Why NOT App Inventor?
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
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
What do I need to get started?
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
Follow the steps
http://appinventor.mit.edu
Classroom environment
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.
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.
Classroom environment (alternate)
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.
Take it with you !!
Students have phones.
Three ways to get the app on a phone.
Create a QR code
1.
◦
2.
download to a phone (using developer
email)
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
Publish to Google Play
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
App Inventor Development Cycle
Design /
Redesign
Test /
Debug
• Blocks Editor
• Phone/Emulator
• Paper / Pencil
Create
UI
Code
Blocks
• Component
Designer
• Blocks Editor
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
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
AI Components
Event based programming

Components are visible or non-visible
"objects" with defined properties and
behaviours (libraries).

Set initial properties within 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 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
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.
Button Component

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
Score
40
20
center
Actions would be defined in Blocks Editor
using Blocks/Code
Buttons

Event
◦ When Click do
 SOME ACTION
◦ The 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
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)
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
Textbox

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
Labels

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.
UI Guidelines

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
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
Variables
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
Example: Events / Event Handlers

What is the event?

What does the
handler do?

What are hits and
misses?
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
Conditionals
• Block in test socket
• MUST evaluate to true / or false
Conditionals – Example 1
Conditionals – Example 2
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
 then-do
 else-do
◦ Algorithms
 see lab instructions
Canvas
Grid for animation and graphics
 Uses (x,y) coordinates to locate objects

(0,0)
(0,400)
(300,0)
(300,400)
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
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

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
Clocks
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)
Randomness

App Inventor has various methods of
generating Random values

In the next lab we will move ImageSprites
to Random locations within a Canvas.
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
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.
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
Loops – Counted / For Loop

variable value
◦ loop counter

no break option
Loops – For Loop Example


How many iterations?
Value of varTotal
◦ Before Loop?
◦ After Loop?
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)
Loops – Conditional Loop

Condition is
checked at the
beginning of every
iteration

Very flexible

No loop variable
Conditional Loop - Example
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
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)
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
List Picker

User Input Component
◦ Predefined selection of possible values
 Drop down list
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
Audio
2 non-visible components for audio:
Player
1.
◦
◦
◦
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
2.
◦
play a short audio file
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
Playing Music? - Example
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
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
"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
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
Animation - Edge Detection
<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
edge 4
(0,400)
edge -1
(300,400)
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
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
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
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
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"
Resources

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/
Resources
Books
Resources

App Inventor Site – Explore
◦ Forums
◦ Curriculum Resources
Resources - Gallery
Project Sharing
http://gallery.appinventor.mit.edu
Futures

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
Futures – AI Summit News
1.
2.
3.
4.
5.
6.
7.
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
Thanks

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
[email protected]