370 likes | 488 Views
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
E N D
Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
1. Create a new application Chris Greenhalgh (cmg@cs.nott.ac.uk)
Log into App Inventor http://appinventor.googlelabs.com Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
Create a project Chris Greenhalgh (cmg@cs.nott.ac.uk)
The new project… Chris Greenhalgh (cmg@cs.nott.ac.uk)
2. Create rough versions of the screens and screen elements Chris Greenhalgh (cmg@cs.nott.ac.uk)
Add a vertical arrangement for each “screen” Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
Create main elements and add to “screens” Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
3. Implement basic navigation Chris Greenhalgh (cmg@cs.nott.ac.uk)
Open the blocks editor… Chris Greenhalgh (cmg@cs.nott.ac.uk)
Notes Allow the application to run: Chris Greenhalgh (cmg@cs.nott.ac.uk)
…find (e.g.) the WelcomeButton under “My Blocks” and drag the “when … .Click” onto the canvas… Chris Greenhalgh (cmg@cs.nott.ac.uk)
…and then (e.g.) the WelcomeScreen “set … Visible” into the “when … .Click” gap… Chris Greenhalgh (cmg@cs.nott.ac.uk)
…from “Built in”, “Logic” drag “false” into the gap in “set … to”… Chris Greenhalgh (cmg@cs.nott.ac.uk)
Try running it… Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
Try clicking on start… The Welcome screen Part should disappear! Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
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)
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)
7. Add sensor input Chris Greenhalgh (cmg@cs.nott.ac.uk)
Add a (invisible) location sensor Chris Greenhalgh (cmg@cs.nott.ac.uk)
Notes • Add a label to the main view for test output of latitude and longitude, e.g. Chris Greenhalgh (cmg@cs.nott.ac.uk)
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)
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)
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)
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)
Code region test logic on location change • … Chris Greenhalgh (cmg@cs.nott.ac.uk)
8. Add complex UI elements • Complete/refine logic • Tidy up layout, content and look and feel Chris Greenhalgh (cmg@cs.nott.ac.uk)