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