Google AppInventor implementation quickstart

1. Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh (cmg@cs.nott.ac.uk)

2. Implementation stages: design-led application-development • Create a new application • Create rough versions of the screens and screen elements • Implement basic navigation • Define domain model types (if used) • Define application (internal) state (e.g. global vars) • Create helper functions to update UI • Add sensor input (from test app) • Add complex UI elements • Complete/refine logic • Tidy up layout, content and look and feel Chris Greenhalgh (cmg@cs.nott.ac.uk)

3. 1. Create a new application Chris Greenhalgh (cmg@cs.nott.ac.uk)

4. Log into App Inventor http://appinventor.googlelabs.com Chris Greenhalgh (cmg@cs.nott.ac.uk)

5. Notes • You’ll need to create a google account if you don’t already have one • To log in you might have to explicitly enable cookies for • google.com • googlelabs.com • E.g. for Windows/Internet explorer, Control panel >> Internet options >> Privacy >> Sites, Allow… Chris Greenhalgh (cmg@cs.nott.ac.uk)

6. Create a project Chris Greenhalgh (cmg@cs.nott.ac.uk)

7. The new project… Chris Greenhalgh (cmg@cs.nott.ac.uk)

8. 2. Create rough versions of the screens and screen elements Chris Greenhalgh (cmg@cs.nott.ac.uk)

9. Add a vertical arrangement for each “screen” Chris Greenhalgh (cmg@cs.nott.ac.uk)

10. Notes • AppInventor currently only allows an application to have one “screen” • = Android “activity” • But can create the effect of multiple screens by hiding/showing groups of elements • In this case the “vertical arrangements” Chris Greenhalgh (cmg@cs.nott.ac.uk)

11. Create main elements and add to “screens” Chris Greenhalgh (cmg@cs.nott.ac.uk)

12. Chris Greenhalgh (cmg@cs.nott.ac.uk)

13. Notes • Clicking the “picture” property of an image allows you to add (i.e. upload) an image file • PNG, JPG • Rename… the components so that you can identify them later by name only • E.g. “WelcomeScreen”, “WelcomeButton” Chris Greenhalgh (cmg@cs.nott.ac.uk)

14. 3. Implement basic navigation Chris Greenhalgh (cmg@cs.nott.ac.uk)

15. Open the blocks editor… Chris Greenhalgh (cmg@cs.nott.ac.uk)

16. Notes Allow the application to run: Chris Greenhalgh (cmg@cs.nott.ac.uk)

17. …find (e.g.) the WelcomeButton under “My Blocks” and drag the “when … .Click” onto the canvas… Chris Greenhalgh (cmg@cs.nott.ac.uk)

18. …and then (e.g.) the WelcomeScreen “set … Visible” into the “when … .Click” gap… Chris Greenhalgh (cmg@cs.nott.ac.uk)

19. …from “Built in”, “Logic” drag “false” into the gap in “set … to”… Chris Greenhalgh (cmg@cs.nott.ac.uk)

20. Chris Greenhalgh (cmg@cs.nott.ac.uk)

21. Try running it… Chris Greenhalgh (cmg@cs.nott.ac.uk)

22. Notes • If “Connect to device” reports “No available device” then click “New emulator” first • The emulator may take a minute or two to start • “unlock” it when it has • It may take a minute or so to connect; the app should then appear Chris Greenhalgh (cmg@cs.nott.ac.uk)

23. Try clicking on start… The Welcome screen Part should disappear! Chris Greenhalgh (cmg@cs.nott.ac.uk)

24. Notes • Now go back to the editor and uncheck “visible” for all “screens” except the WelcomeScreen • They will then be hidden when the app starts • Press “Connect to Device” again to re-start the app • In the blocks editor make “when WelcomeButton.Click” also do “set MainScreen.Visible to” “true” • Repeat for other navigation buttons and screens Chris Greenhalgh (cmg@cs.nott.ac.uk)

25. Chris Greenhalgh (cmg@cs.nott.ac.uk)

26. Chris Greenhalgh (cmg@cs.nott.ac.uk)

27. Notes • You add temporary buttons to the UI to fake sensor input at this stage if you want to be able to check out sensor-driven navigation Chris Greenhalgh (cmg@cs.nott.ac.uk)

28. 4. Define domain model types (if used) • AppInventor doesn’t really support a domain model – no op 5. Define application (internal) state (e.g. global vars) • Nothing much at the moment… 6. Create helper functions to update UI • GPS update might be the only contender here Chris Greenhalgh (cmg@cs.nott.ac.uk)

29. 7. Add sensor input Chris Greenhalgh (cmg@cs.nott.ac.uk)

30. Add a (invisible) location sensor Chris Greenhalgh (cmg@cs.nott.ac.uk)

31. Notes • Add a label to the main view for test output of latitude and longitude, e.g. Chris Greenhalgh (cmg@cs.nott.ac.uk)

32. Simulating GPS in the emulator (1) • Use a terminal program such as telnet to connect to the emulator • Emulator port is in corner of emulator window (5554) • One of the supported commands is “geo nmea ….” Chris Greenhalgh (cmg@cs.nott.ac.uk)

33. Simulating GPS in the emulator (2) • A few programs will generate NMEA strings • i.e. the data from a GPS receiver • Or you can log real GPS data • Past the strings into the emulator console… http://www.cs.nott.ac.uk/~cmg/nmeagenerator/index.html Chris Greenhalgh (cmg@cs.nott.ac.uk)

34. Simulating GPS in the emulator (3) • The emulator now thinks it has a GPS lock and fires a GPS location update event • Note: location accuracy is not simulated • Appears perfectly accurate Chris Greenhalgh (cmg@cs.nott.ac.uk)

35. Work out the trigger regions… • E.g. http://www.mrl.nott.ac.uk/~txl/zoneauthor • A HTML/JS browser app to author polygonal zones and generate KML Long,lat pairs Chris Greenhalgh (cmg@cs.nott.ac.uk)

36. Code region test logic on location change • … Chris Greenhalgh (cmg@cs.nott.ac.uk)

37. 8. Add complex UI elements • Complete/refine logic • Tidy up layout, content and look and feel Chris Greenhalgh (cmg@cs.nott.ac.uk)