Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 1Chris Greenhalgh...

37
Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 1 Chris Greenhalgh ([email protected])
  • date post

    19-Dec-2015
  • Category

    Documents

  • view

    218
  • download

    2

Transcript of Google AppInventor implementation quickstart Chris Greenhalgh G54UBI / 2011-03-03 1Chris Greenhalgh...

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

Chris Greenhalgh ([email protected]) 1

Google AppInventor implementation quickstart

Chris GreenhalghG54UBI / 2011-03-03

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

Chris Greenhalgh ([email protected]) 2

Implementation stages: design-led application-development

1. Create a new application2. Create rough versions of the screens and screen elements 3. Implement basic navigation4. Define domain model types (if used)5. Define application (internal) state (e.g. global vars)6. Create helper functions to update UI7. Add sensor input (from test app)8. Add complex UI elements9. Complete/refine logic10. Tidy up layout, content and look and feel

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

Chris Greenhalgh ([email protected]) 3

1. Create a new application

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

Chris Greenhalgh ([email protected]) 4

Log into App Inventorhttp://appinventor.googlelabs.com

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

Chris Greenhalgh ([email protected]) 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…

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

Chris Greenhalgh ([email protected]) 6

Create a project

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

Chris Greenhalgh ([email protected]) 7

The new project…

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

Chris Greenhalgh ([email protected]) 8

2. Create rough versions of the screens and screen elements

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

Chris Greenhalgh ([email protected]) 9

Add a vertical arrangement for each “screen”

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

Chris Greenhalgh ([email protected]) 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”

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

Chris Greenhalgh ([email protected]) 11

Create main elements and add to “screens”

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

Chris Greenhalgh ([email protected]) 12

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

Chris Greenhalgh ([email protected]) 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”

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

Chris Greenhalgh ([email protected]) 14

3. Implement basic navigation

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

Chris Greenhalgh ([email protected]) 15

Open the blocks editor…

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

Chris Greenhalgh ([email protected]) 16

Notes

Allow the application to run:

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

Chris Greenhalgh ([email protected]) 17

…find (e.g.) the WelcomeButton under “My Blocks” and drag the “when … .Click” onto the

canvas…

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

Chris Greenhalgh ([email protected]) 18

…and then (e.g.) the WelcomeScreen “set … Visible” into the “when … .Click” gap…

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

Chris Greenhalgh ([email protected]) 19

…from “Built in”, “Logic” drag “false” into the gap in “set … to”…

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

Chris Greenhalgh ([email protected]) 20

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

Chris Greenhalgh ([email protected]) 21

Try running it…

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 23

Try clicking on start…

The Welcome screenPart should disappear!

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 25

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

Chris Greenhalgh ([email protected]) 26

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 29

7. Add sensor input

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

Chris Greenhalgh ([email protected]) 30

Add a (invisible) location sensor

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

Chris Greenhalgh ([email protected]) 31

Notes

• Add a label to the main view for test output of latitude and longitude, e.g.

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

Chris Greenhalgh ([email protected]) 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 ….”

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

Chris Greenhalgh ([email protected]) 33

Simulating GPS in the emulator (2)

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…

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 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

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

Chris Greenhalgh ([email protected]) 36

• Code region test logic on location change• …

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

Chris Greenhalgh ([email protected]) 37

8. Add complex UI elements9. Complete/refine logic10.Tidy up layout, content and look and feel