Presented at : CS4HS University of Massachusetts Lowell Kelly Powers, AMSA Charter School, Mark Sherman, UML, Fred Martin, UML, June 27 th, 2011 Portions.

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