1 / 37

Google AppInventor implementation quickstart

Google AppInventor implementation quickstart. Chris Greenhalgh G54UBI / 2011-03-03. Implementation stages: design-led application-development. Create a new application Create rough versions of the screens and screen elements Implement basic navigation

demi
Download Presentation

Google AppInventor implementation quickstart

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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)

More Related