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

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

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

4. Log into App Inventor http://appinventor.googlelabs.com 4Chris 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)5

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

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

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

9. Add a vertical arrangement for each “screen” 9Chris 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” 10Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

12. 12Chris 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” 13Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

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

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

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

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

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

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

21. Try running it… 21Chris 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 22Chris Greenhalgh (cmg@cs.nott.ac.uk)

23. Try clicking on start… The Welcome screen Part should disappear! 23Chris 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 24Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

26. 26Chris 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)27

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 28Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

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

31. Notes Add a label to the main view for test output of latitude and longitude, e.g. 31Chris 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)32

33. Simulating GPS in the emulator (2) Chris Greenhalgh (cmg@cs.nott.ac.uk)33 http://www.cs.nott.ac.uk/~cmg/nmeagenerator/index.html 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…

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)34

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

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

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