App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College Lyn Turbak, Wellesley College
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
App Inventor For Android:Graffiti App
Lyn Turbak, Wellesley CollegeLyn Turbak, Wellesley College
Reading Virtual WallsPh 1 Ph 2
Graffiti Graffiti
Phone 1 Phone 2
Pick Wall Visit WallT
Post!
Pick Wall Visit Wall
Post!
start
h
start
hPost a message here. Post a message here.
Walls:Post a message here.
start
Walls: This is a test wall
test
Writing Virtual WallsPh 1 Ph 2
Graffiti Graffiti
Phone 1 Phone 2
Pick Wall Visit WallT
Post!
Pick Wall Visit Wall
Post!
start
h
lyn says hi
start
hl hi l hiPost a message here. Post a message here.lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
Walls:lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
start
Walls: This is a test wall
test
Post a message here.
Creating Virtual WallsPh 1 Ph 2
Graffiti Graffiti
Phone 1 Phone 2
Pick Wall Visit WallT
Post!
Pick Wall Visit Wall
Post!
start AIA
l hi l hi
I like App Inventor
l klyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
I like App Inventor
Walls:lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
start
Walls: This is a test wall
test
Post a message here.
AIA
I like App Inventor
The Wall named *walls* is SpecialPh 1 Ph 2
Graffiti Graffiti
Phone 1 Phone 2
Pick Wall Visit WallT
Post!
Pick Wall Visit Wall
Post!
*walls* AIA
l hi l kAIAlyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
I like App InventorAIA,start,test
Walls:lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
start
Walls: This is a test wall
test
Post a message here.
AIA
I like App Inventor
Can Select a Wall via Pick Wall MenuPh 1 Ph 2
Graffiti Graffiti
Phone 1 Phone 2
Pick Wall Visit WallT
Post!
Pick Wall Visit Wall
Post!
*walls* AIA
l kAIA
AIA
startThi i ll
test
I like App InventorAIA,start,testtestThis is a test wall
Walls:lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here.
start
Walls: This is a test wall
test
Post a message here.
AIA
I like App Inventor
Try it Out!
• http://androidblocks.googlelabs.com/ode/Ya.html
• Projects > GraffitiProjects Graffiti
• Package for Phone > Show Barcode
R d b d i B d S• Read barcode via Barcode Scanner
• Play with the app.
Graffiti Web Service: Getting a Value
["VALUE" "test" "This is a test wall"]getvalue
[ VALUE , test , This is a test wall ] tag: test
Graffiti Web Ser ice APIGraffiti Web Service API
Wall Database
This is a test wall
lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here I like App Inventor
start
This is a test wall
test
Post a message here.
AIA
I like App Inventor
Graffiti Web Service: Storing a Value
["STORED", "test", "kilroy was here"] storeavaluetag: test [ , , y ]tag: testValue: "kilroy was here"
Graffiti Web Ser ice APIGraffiti Web Service API
Wall Database
kilroy was here ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐This is a test wall
lyn says hi‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Post a message here I like App InventorThis is a test wall
start
This is a test wall
test
Post a message here.
AIA
I like App InventorThis is a test wall
Interacting with the Graffiti Web Service
1. Via Browser:
h //l ff /Visit http://lyng‐graffiti.appspot.com/
2. Via AIA TinyWebDB Component:2. Via AIA TinyWebDB Component:
Will see how to do this in a few slides.
Graffiti Components
Graffiti
Pick Wall Visit WallPick Wall Visit Wall
Post!
Ti W bDBTinyWebDBinstance
Hidden components
Graffiti Blocks: Three Parts
1 Getting contents of wall specified in text box1. Getting contents of wall specified in text box.
2. Posting to the wall specified in text box.
3 l i i k ll b3. Implementing Pick Wall button.
Graffiti Blocks: Three Parts
1 Getting contents of wall specified in text box1. Getting contents of wall specified in text box.
2. Posting to wall specified in text box.
3 l i i k ll b3. Implementing Pick Wall button.
Getting a Wall: Calling the visitWall Procedure
Getting a Wall: Defining the visitWall Procedure
Getting a Wall: the updateWall Procedure
Getting a Wall: Timer‐based Updates
Graffiti Blocks: Three Parts
1 Getting contents of wall specified in text box1. Getting contents of wall specified in text box.
2. Posting to wall specified in text box.
3 l i i k ll b3. Implementing Pick Wall button.
Posting to a Wall
Key statement:store message in DB
Update wall contents after message stored.
Graffiti Blocks: Three Parts
1 Getting contents of wall specified in text box1. Getting contents of wall specified in text box.
2. Posting to wall specified in text box.
3 l i i k ll b3. Implementing Pick Wall button.
Picking a Wall: Looking up Wall NamesInitially the empty string; will becomeInitially the empty string; will become a comma‐separated list of wall names, such as “AIA,berlin,start”
Additional code to look up wall nameslook up wall names
Additional code to process wall names
Picking a Wall: ListPicker Methods
Other Ways to Use TinyWebDB
o Hal Abelson’s simple database: e.g., li f d f M d Lib• store lists of words for Mad Libs
• give English translations for Spanish words• associate countries names with flags• associate countries names with flags
o Ellen Spertus’s radio clientp
o Dave Wolber’s Amazon client
o Eni Mustafaraj’s voting app
Wellesley’s CS114 Socio‐Techno Web Class
o Taught by Takis Metaxas (lecture) and E i M f j (l b i ) I “ li ”Eni Mustafaraj (lab instructor). I was “evangelist”.
o 17 students; 12 did apps for final projecto 17 students; 12 did apps for final project
o Sample projects: p p j
• Rumor generator• Interactive Wellesley Tour• Got Places? • Who’s Keeping Score?• Who s Keeping Score?
Extensions
Some things to try:
o Include email address of sender (use EmailUserAddress of a Voting component)(use EmailUserAddress of a Voting component)
o Use BarcodeScanner component to “read” pwall names (a la Sharon Perl’s Wallz app).
o Tutorials and sample applications athttp://sites.google.com/site/appinventorhelp
Related Documents
