1. App Inventor For Android: Graffiti App Lyn Turbak, Wellesley College

2. Reading Virtual Walls Graffiti Pick Wall Visit Wall T Post! Graffiti Pick WallVisit Wall Post! Phone 1Phone 2 Post a message here. start Walls: This is a test wall test start Post a message here. start Post a message here.

3. Writing Virtual Walls Graffiti Pick Wall Visit Wall T Post! Graffiti Pick WallVisit Wall Post! Phone 1Phone 2 Post a message here. start Walls: This is a test wall test start Post a message here. lyn says hi start Post a message here. lyn says hi ----------------------------- Post a message here. lyn says hi ----------------------------- Post a message here. lyn says hi ----------------------------- Post a message here.

4. Creating Virtual Walls Graffiti Pick Wall Visit Wall T Post! Graffiti Pick WallVisit Wall Post! Phone 1Phone 2 start Walls: This is a test wall test startAIA lyn says hi ----------------------------- Post a message here. lyn says hi ----------------------------- Post a message here. lyn says hi ----------------------------- Post a message here. I like App Inventor AIA I like App Inventor

5. The Wall named *walls* is Special Graffiti Pick Wall Visit Wall T Post! Graffiti Pick WallVisit Wall Post! Phone 1Phone 2 Post a message here. start Walls: This is a test wall test *walls*AIA lyn says hi ----------------------------- Post a message here. lyn says hi ----------------------------- Post a message here. AIA I like App Inventor AIA,start,test

6. Can Select a Wall via Pick Wall Menu Graffiti Pick Wall Visit Wall T Post! Graffiti Pick WallVisit Wall Post! Phone 1Phone 2 Post a message here. start Walls: This is a test wall test *walls*AIA lyn says hi ----------------------------- Post a message here. AIA I like App Inventor AIA,start,test AIA start test This is a test wall test

7. Try it Out! http://androidblocks.googlelabs.com/ode/Ya. html http://androidblocks.googlelabs.com/ode/Ya. html Projects > Graffiti Package for Phone > Show Barcode Read barcode via Barcode Scanner Play with the app.

8. Graffiti Web Service: Getting a Value start This is a test wall test lyn says hi ----------------------------- Post a message here. AIA I like App Inventor Graffiti Web Service API Wall Database ["VALUE", "test", "This is a test wall"] getvalue tag: test

9. Graffiti Web Service: Storing a Value start kilroy was here ----------------------- This is a test wall test lyn says hi ----------------------------- Post a message here. AIA I like App Inventor Graffiti Web Service API Wall Database ["STORED", "test", "kilroy was here"] storeavalue tag: test Value: "kilroy was here " This is a test wall

10. Interacting with the Graffiti Web Service 1. Via Browser: Visit http://lyng-graffiti.appspot.com/http://lyng-graffiti.appspot.com/ 2. Via AIA TinyWebDB Component: Will see how to do this in a few slides.

11. Graffiti Components Graffiti Pick WallVisit Wall Post! Hidden components TinyWebDB instance

12. Graffiti Blocks: Three Parts 1.Getting contents of wall specified in text box. 2.Posting to the wall specified in text box. 3.Implementing Pick Wall button.

13. Graffiti Blocks: Three Parts 1.Getting contents of wall specified in text box. 2.Posting to wall specified in text box. 3.Implementing Pick Wall button.

14. Getting a Wall: Calling the visitWall Procedure

15. Getting a Wall: Defining the visitWall Procedure

16. Getting a Wall: the updateWall Procedure

17. Getting a Wall: Timer-based Updates

18. Graffiti Blocks: Three Parts 1.Getting contents of wall specified in text box. 2.Posting to wall specified in text box. 3.Implementing Pick Wall button.

19. Posting to a Wall Key statement: store message in DB Update wall contents after message stored.

20. Graffiti Blocks: Three Parts 1.Getting contents of wall specified in text box. 2.Posting to wall specified in text box. 3.Implementing Pick Wall button.

21. Picking a Wall: Looking up Wall Names Initially the empty string; will become a comma-separated list of wall names, such as “AIA,berlin,start” Additional code to look up wall names Additional code to process wall names

22. Picking a Wall: ListPicker Methods

23. Other Ways to Use TinyWebDB o Hal Abelson’s simple database: e.g., store lists of words for Mad Libs give English translations for Spanish words associate countries names with flags o Ellen Spertus’s radio client o Dave Wolber’s Amazon client o Eni Mustafaraj’s voting app

24. Wellesley’s CS114 Socio-Techno Web Class o Taught by Takis Metaxas (lecture) and Eni Mustafaraj (lab instructor). I was “evangelist”. o 17 students; 12 did apps for final project o Sample projects: Rumor generator Interactive Wellesley Tour Got Places? Who’s Keeping Score?

25. Extensions Some things to try: o Include email address of sender (use EmailUserAddress of a Voting component) o Use BarcodeScanner component to “read” wall names (a la Sharon Perl’s Wallz app). o Tutorials and sample applications at http://sites.google.com/site/appinventorhelphttp://sites.google.com/site/appinventorhelp