Transcript Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh ([email protected]) Implementation stages: design-led application-development 1.

Google AppInventor
implementation quickstart
Chris Greenhalgh
G54UBI / 2011-03-03
Chris Greenhalgh ([email protected])
1
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
Chris Greenhalgh ([email protected])
2
1. Create a new application
Chris Greenhalgh ([email protected])
3
Log into App Inventor
http://appinventor.googlelabs.com
Chris Greenhalgh ([email protected])
4
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 ([email protected])
5
Create a project
Chris Greenhalgh ([email protected])
6
The new project…
Chris Greenhalgh ([email protected])
7
2. Create rough versions of the screens
and screen elements
Chris Greenhalgh ([email protected])
8
Add a vertical arrangement for each
“screen”
Chris Greenhalgh ([email protected])
9
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 ([email protected])
10
Create main elements and add to
“screens”
Chris Greenhalgh ([email protected])
11
Chris Greenhalgh ([email protected])
12
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 ([email protected])
13
3. Implement basic navigation
Chris Greenhalgh ([email protected])
14
Open the blocks editor…
Chris Greenhalgh ([email protected])
15
Notes
Allow the application to run:
Chris Greenhalgh ([email protected])
16
…find (e.g.) the WelcomeButton under “My
Blocks” and drag the “when … .Click” onto the
canvas…
Chris Greenhalgh ([email protected])
17
…and then (e.g.) the WelcomeScreen “set
… Visible” into the “when … .Click” gap…
Chris Greenhalgh ([email protected])
18
…from “Built in”, “Logic” drag “false”
into the gap in “set … to”…
Chris Greenhalgh ([email protected])
19
Chris Greenhalgh ([email protected])
20
Try running it…
Chris Greenhalgh ([email protected])
21
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 ([email protected])
22
Try clicking on start…
The Welcome screen
Part should disappear!
Chris Greenhalgh ([email protected])
23
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 ([email protected])
24
Chris Greenhalgh ([email protected])
25
Chris Greenhalgh ([email protected])
26
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 ([email protected])
27
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 ([email protected])
28
7. Add sensor input
Chris Greenhalgh ([email protected])
29
Add a (invisible) location sensor
Chris Greenhalgh ([email protected])
30
Notes
• Add a label to the main view for test output of
latitude and longitude, e.g.
Chris Greenhalgh ([email protected])
31
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 ([email protected])
32
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 ([email protected])
33
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 ([email protected])
34
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 ([email protected])
35
• Code region test logic on location change
• …
Chris Greenhalgh ([email protected])
36
8. Add complex UI elements
9. Complete/refine logic
10.Tidy up layout, content and look and feel
Chris Greenhalgh ([email protected])
37