schedule PPT - Computer Science - University of Massachusetts
Download
Report
Transcript schedule PPT - Computer Science - University of Massachusetts
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