App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For...
Transcript of App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For...
![Page 1: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/1.jpg)
App Inventor For Android:Graffiti App
Lyn Turbak, Wellesley CollegeLyn Turbak, Wellesley College
![Page 2: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/2.jpg)
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
![Page 3: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/3.jpg)
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.
![Page 4: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/4.jpg)
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
![Page 5: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/5.jpg)
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
![Page 6: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/6.jpg)
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
![Page 7: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/7.jpg)
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.
![Page 8: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/8.jpg)
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
![Page 9: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/9.jpg)
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
![Page 10: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/10.jpg)
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.
![Page 11: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/11.jpg)
Graffiti Components
Graffiti
Pick Wall Visit WallPick Wall Visit Wall
Post!
Ti W bDBTinyWebDBinstance
Hidden components
![Page 12: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/12.jpg)
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.
![Page 13: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/13.jpg)
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.
![Page 14: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/14.jpg)
Getting a Wall: Calling the visitWall Procedure
![Page 15: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/15.jpg)
Getting a Wall: Defining the visitWall Procedure
![Page 16: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/16.jpg)
Getting a Wall: the updateWall Procedure
![Page 17: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/17.jpg)
Getting a Wall: Timer‐based Updates
![Page 18: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/18.jpg)
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.
![Page 19: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/19.jpg)
Posting to a Wall
Key statement:store message in DB
Update wall contents after message stored.
![Page 20: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/20.jpg)
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.
![Page 21: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/21.jpg)
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
![Page 22: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/22.jpg)
Picking a Wall: ListPicker Methods
![Page 23: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/23.jpg)
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
![Page 24: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/24.jpg)
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?
![Page 25: App Inventor For Android: Graffiti Appfturbak/talks/sigcse-2010-graffiti.pdf · App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College ... Graffiti Web Ser ice APIGraffiti](https://reader030.fdocuments.in/reader030/viewer/2022040212/5e7f9dc748f3e67b39056520/html5/thumbnails/25.jpg)
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