Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0
Attribution License. http://www.android.com/media/goodies.html
Presented at : CS4HS University of Massachusetts Lowell
Kelly Powers, AMSA Charter School, Mark Sherman, UML, Fred Martin, UML,
June 27th, 2011
Workshop Agenda
 Welcome and Intro to App Inventor
 Starter lab, “HelloPurr”
 Independent lab, “MoleMash”
 10:30 am – 10:40 break time
 App Inventor Advanced Features
 Build an Advanced App from Examples
 Xylophone, Where’s My Car ? , Paris Map Tour
 Educator experiences
 Closing
Workshop Resources
> http://appinventor.googlelabs.com/about/
 Getting Started with App Inventor
> http://appinventor.googlelabs.com/learn/
 App Inventor Tutorials and Set-Up Instructions
> http://proquest.safaribooksonline.com/book/-/9781449306786
 App Inventor: Create Your Own Android Apps
> http://appinventor.googlelabs.com/forum/
 App Inventor Discussion Forums (including App Inventor in
Education Forum)
> www.cs.uml.edu/news
 for the latest what's up at UMass Lowell Computer Science!
Intro: App Inventor History
 Google’s visual programming interface is based on
research and development at MIT that has occurred for
over the past 40 years
 Logo, StarLogo TNT, and Scratch
 project led by Hal Abelson, the Class of 1992 Professor of
Computer Science and Engineering at MIT
 Completed a year long sabbatical at Google as a visiting
professor which ended in May 2010. Mark Friedman is a
lead Google Engineer for App Inventor.
Intro: App Inventor History …
 University of San Francisco Professor David Wolber was
part of the App Inventor pilot in the college arena prior to
its public release
http://radar.oreilly.com/2011/06/google-app-inventorprogrammers-mobile-apps.html
 trial by invitation only released in July 2010
 released to the public on December 15th2010
Intro to Google’s App Inventor
 A highly visual web based interface that provides the ability
for anyone to create an App for their Android phone,
learning curve is minimal
 allows all sorts of people to program their phones using a
visual environment that involves snapping together colorcoded instruction blocks
 relatively easy to build a simple app and with practice users
may create a complex app
Google believes App Inventor
 will open the door for all people to become creators of
technology and not just consumers.:
http://googleblog.blogspot.com/2010/07/app-inventor-forandroid.html
“For many people, their mobile phone—and access to the
Internet—is always within reach. App Inventor for Android gives
everyone, regardless of programming experience, the
opportunity to control and reshape their communication
experience. We’ve observed people take pride in becoming
creators of mobile technology and not just consumers of it.”
Lets Get Started
 Go to http://appinventor.googlelabs.com
 If you have a gmail account

then login
 Else

Ask Kelly for a student account to use for today
Component Designer
 Add Components to your phone using the palette
Create a New Project**
 You are in Designer View
 Click My Projects, New Project
 Project Name: YourLastname_Kitty
 Examine the Designer View interface
 We will design our application in Designer View and switch
to the Blocks Editor Window to build events & responses
Designer Window
 5 Window Panes,
 Palette, Viewer, Components, Media, Properties
 VIEWER is in the center, this is your “phone”
 You place and arrange components here
 Palette, collection of components that you may place in
the viewer
 Components, lists all of the components in your project,
default component Screen1
 Media, adds media and lists all media uploaded
 Properties refer to the properties of a specific component
Add A Label
 From the Palette, (Basic), drag a Label Component to the Viewer
Pane
 Check the Viewer to see the Label
 Examine the Components Pane
 You now have 2 components, Screen1, Label1
 (note that you may rename your components (more on that later))
 Properties Pane
 Change the Text to Pet the Kitty
 Change the BackgroundColor to one of your choosing
 Change the TextColor to Yellow
Connect your USB Phone
 From the Designer View Window,
 click the Start the Blocks Editor button
 a Java Web Start App downloads a JNLP program to your download folder
 this program runs on your machine, you may need to launch the downloaded
file if it doesn’t launch automatically
 Using the Blocks Editor Window,
 Click to connect to your phone
 Or


Click to Start a new Emulator
 Be patient, Click Ok to the Emulator is starting window
Click Connect to Device
 you will see your droid man in the Apple dock, this is your emulated
phone!
 Using your USB phone or Emulator, drag to Unlock, and your app should appear
Blocks Editor – Code Events
Add a Button Component
 Minimize the Blocks Editor Window and return to Designer
View
 From the Palette, (Basic)

Drag a Button Component to the Viewer Pane
 Verify in the Viewer that a Button was added
 You may also check your connected phone as well
 Use the Media Pane, to upload the kitty.png to your app
 Use the Properties Pane to :
 set the image property to kitty.png
 Set the text of the button to blank or change the text to read “Pet
Me”
Add A Sound Component
 From the Palette, (Media category)
 drag a Sound Component to the Viewer Pane, drop it anywhere in
the viewer
 The sound is a non-visible component and will not appear on your
app
 Examine the Components Pane
 You now have 4 components, Screen1, Label1, Button1, Sound1
 (note that you can rename your components (more on that later)
 Use the Media Pane to add the meow.mp3 sound
 Properties Pane
 Change the Source to meow.mp3
Blocks Editor – Code Behaviors
 Maximize your Blocks Editor Window, or start the blocks editor from the
Designer Window
 Top Left, you will see “Built-In” and “My Blocks”
 Click “My Blocks”,
 notice there are blocks for each component you added
 Our goal is to set up an event :
 when the button is clicked, the meow.mp3 sound will play
 Click the Button1 Drawer to see your options
 Drag the block when Button1 Clicked to the code editor workspace
 (when blocks are event handlers)
 Now code the action to be taken using the Sound1 Drawer
 Drag out the block “call Sound1.Play”
 (call blocks make components do things)
 Notice how the block snaps right into the button1.click shape
 Test this app on your phone
Blocks Editor – Code Events
My Blocks, Sound1
 Add another call action to the event When Button1 Clicked
 Using the Sound1 drawer drag out the block
 Sound1.Vibrate, snap it under the Sound1.Play Block
 ** interesting feature of the Android phone
 call to Sound1.Vibrate actually makes the phone vibrate when
the button is clicked!
 Sound1.Vibrate has an open slot, you can plug a value in to
indicate how long to vibrate the phone




Click in an empty area of the workspace and a menu will appear,
choose math, from the dropdown chose number 123
A number block appears
Snap the block into milliseconds and click to update value to 500
Test your App
An App
 Has Components and Behaviors
 An App responds to events, than can ask questions branch
and repeat, and talk to web services
 Can set initial values in the Designer Component
 Types of Events
 User events – on click of a button, on drag
 Timer events – passing of time
 Sensor events – phone position is changed
 Phone events – when a call or text comes in
 Communication events – requests data from a web service
Next Up: MoleMash
 Save your Kitty Project
 My Projects, New Project, Lastname-Mole
 View tutorial
 Break at 10:30 a.m.
App Inventor Advanced Features
Advanced Lab
 Xylophone, Where’s My Car ? , Paris Map Tour
Educator Experiences
 High School endeavor started in December 2010 





February 2011
Grade 11 , Intro to Java & Cell Phone Programming
Windows XP , Internet Explorer 8
Student Accounts shared across sections
Worked with Professor David Wolber’s online
materials
Connections to Java, diverse group of s tudents
Final Project ideas
Closing
 Remarks
 Feedback
 Questions