Presented at : CS4HS University of Massachusetts Lowell Kelly Powers, AMSA Charter School, Mark Sherman, UML, Fred Martin, UML, June 27 th, 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. by GoogleCreative Commons 3.0 Attribution License

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 > Getting Started with App Inventor > App Inventor Tutorials and Set-Up Instructions > App Inventor: Create Your Own Android Apps > App Inventor Discussion Forums (including App Inventor in Education Forum) > 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 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 programmers-mobile-apps.html trial by invitation only released in July 2010 released to the public on December 15 th 2010

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 color- coded 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.: android.html 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 Started Go to 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 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