App InventorPresented at : CS4HS University of Massachusetts LowellKelly Powers, AMSA Charter School, Mark Sherman, UML, Fred
Martin, UML, June 27th, 2011
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
Workshop AgendaWelcome and Intro to App InventorStarter lab, “HelloPurr”Independent lab, “MoleMash” 10:30 am – 10:40 break time
App Inventor Advanced FeaturesBuild an Advanced App from Examples
Xylophone, Where’s My Car ? , Paris Map TourEducator experiencesClosing
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 HistoryGoogle’s visual programming interface is based
on research and development at MIT that has occurred for over the past 40 yearsLogo, 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 releasehttp://radar.oreilly.com/2011/06/google-app-inventor-programmers-mobile-apps.html
trial by invitation only released in July 2010
released to the public on December 15th2010
Intro to Google’s App InventorA 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 color-coded instruction blocks
relatively easy to build a simple app and with practice users may create a complex app
Google believes App Inventorwill open the door for all people to become creators
of technology and not just consumers.: http://googleblog.blogspot.com/2010/07/app-inventor-for-android.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 StartedGo 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 DesignerAdd 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 Window5 Window Panes,
Palette, Viewer, Components, Media, PropertiesVIEWER is in the center, this is your “phone”
You place and arrange components herePalette, collection of components that you may
place in the viewer Components, lists all of the components in your
project, default component Screen1Media, adds media and lists all media uploadedProperties refer to the properties of a specific
component
Add A LabelFrom 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 ComponentMinimize the Blocks Editor Window and return to Designer
ViewFrom 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.pngSet the text of the button to blank or change the text to read
“Pet Me”
Add A Sound ComponentFrom 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 PaneYou 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 PaneChange 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 phonecall 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 AppHas Components and BehaviorsAn App responds to events, than can ask questions
branch and repeat, and talk to web servicesCan set initial values in the Designer ComponentTypes of Events
User events – on click of a button, on dragTimer events – passing of timeSensor events – phone position is changedPhone events – when a call or text comes in Communication events – requests data from a web
service
Next Up: MoleMashSave your Kitty ProjectMy Projects, New Project, Lastname-MoleView tutorialBreak at 10:30 a.m.
App Inventor Advanced Features
Advanced LabXylophone, Where’s My Car ? , Paris Map Tour
Educator ExperiencesHigh School endeavor started in December
2010 - February 2011Grade 11 , Intro to Java & Cell Phone
ProgrammingWindows XP , Internet Explorer 8Student Accounts shared across sectionsWorked with Professor David Wolber’s online
materials Connections to Java, diverse group of s
tudentsFinal Project ideas
ClosingRemarksFeedbackQuestions