software prototyping - kirkwood.edu · software prototyping • quick mockup of proposed program...
TRANSCRIPT
![Page 1: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/1.jpg)
Software Prototyping
& App Inventor
![Page 2: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/2.jpg)
Prototyping This & next several slides distilled from: http://appinventor.mit.edu/explore/teaching-app-creation.html
• Prototype: preliminary, interactive model of an idea
• Widely used in product design • Essential to concept selection process (note
similarity to choosing classes & CRC cards): – Most useful characteristic: disposability – Allow presentation of design ideas to users – Successful market products come from succession
of failed prototypes
![Page 3: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/3.jpg)
Paper prototyping
• Sketch idea: e.g. user interface • Not to scale • Don’t be deeply committed to it
– Easily changed – Easily discarded – Build multiple designs simultaneously – can pick &
choose best parts of each
![Page 4: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/4.jpg)
Limitations of paper prototyping
• No direct sensory experience (beyond the visual)
• Can’t demonstrate implementation feasibility
![Page 5: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/5.jpg)
Software prototyping
• Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even if not fully
implemented
• Somewhat related to, but not the same as, Agile process product: – Prototype is still a throwaway, not meant to be an
end product – But a really good prototype can be kept, built on
![Page 6: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/6.jpg)
App Inventor
• Visual (blocks-based) programming environment for development of Android apps
• Can create actual apps and/or working prototypes
• Dave Wolber: App Inventor is the “electronic napkin” for app design
![Page 7: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/7.jpg)
App Inventor interface
• Component Designer: create user interface – Select & manipulate initial values for app
components – Display components on mockup of device screen
• Blocks Editor: program app behavior – Create program with set of interlocking blocks to
describe interaction of app components – Can test program functionality during
development screen emulator or actual device
![Page 8: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/8.jpg)
Components
• In Java, we would call these “objects:” – Have names – defaults are things like “Button1” or
“HorizontalArrangement2” – which can be reset – Have properties: aka attributes, aka instance
variables – these can be set to initial values and also changed with code
– Have blocks: aka behaviors, aka builtin methods (or just individual instructions)
![Page 9: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/9.jpg)
Components: User Interface • Buttons, TextBoxes, Labels, CheckBoxes
and Images are pretty much exactly like their swing object cousins – A ListView is a kind of label for
displaying multiple text values – A PasswordTextBox is TextBox in
which the text entered is invisible • Various types of “Pickers” are buttons
that pop up lists from which user can choose
![Page 10: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/10.jpg)
Components: User Interface • Slider: a progress bar with a draggable
“thumb” for adjustment • Notifier displays alerts & generates log
entries • Webviewer: component for viewing web
pages • Spinner: Displays a pop-up with a list of
elements; something like a menu
![Page 11: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/11.jpg)
Components: Layout
• Layout components provide a form of layout management for the device screen – Vertical and Horizontal Arrangements
lay out visible components using the indicated orientation; both size and justification can be set, and arrangements can be nested
– TableArrangement is similar to swing's GridLayout
![Page 12: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/12.jpg)
Components: Media
• Media components include: – Access to existing media objects
(Sound, ImagePicker) – Access to device resources for
capturing and producing media (Camera, Player, TextToSpeech, SoundRecorder, etc.)
![Page 13: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/13.jpg)
Components: Drawing and Animation
• Canvas: touch-sensitive drawing area – Can place and animate objects
(ImageSprites, Balls) in a Canvas – Can draw on a Canvas
• Attributes include height, width, Color (background and foreground), BackgroundImage
• Has event listeners for touch and object movement
![Page 14: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/14.jpg)
Components: Drawing and Animation
• ImageSprite: App Inventor's answer to the Icon (sort of) – Can be placed on Canvas – Can react to touches, drags, and
interaction with other ImageSprites or Balls
• Ball: simple sprite that looks like a ball
![Page 15: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/15.jpg)
Components: Sensors
• Clock: uses internal device clock; can fire timing events, perform time calculations
• LocationSensor: receives & provides data from device GPS – detects movement in the large
• AccelerometerSensor: detects movement in the small (shaking, tilting)
![Page 16: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/16.jpg)
Components: Sensors
• OrientationSensor: provides information about device position in space (when not moving)
• ProximitySensor: measures proximity of object (in cm) from device screen
• Other sensors: depend on optional capabilities of device
![Page 17: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/17.jpg)
Components: Social • Texting, PhoneCall and Twitter:
components that enable app to avail themselves of device communication options
• Sharing: enables sharing files/messages with other apps on the device
• Pickers: various components for interacting with device contact list; not supported on all devices
![Page 18: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/18.jpg)
Components: Storage
• TinyDB and TinyWebDB: provide database storage on the device and on an external server, respectively
• File: text file storage on the device • FusiontableControl: allows app to
communicate with Google Fusion Tables
![Page 19: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/19.jpg)
Components: Connectivity
• BluetoothClient/Server: enables app to connect, disconnect, and send and receive data with paired devices
• Web: provides functions for http get, post, put and delete requests
• ActivityStarter: allows an app to start another app
![Page 20: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/20.jpg)
Components: LEGO MINDSTORMS
• Provides command interface for controlling NXT robots – NxtDrive: control motors – NxtDirectCommands: write on
robot screen, start stored programs
– NxtXXXXSensor: communicate with various robot sensors
![Page 21: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/21.jpg)
Initializing components
• To add a component to an app, click on an instance from the palette and drag it to the screen model – Visible components will be placed wherever you
put them on the screen, more or less – Invisible components (such as a Sound, for
example) will appear below the screen (provided the selection box above the screen is checked):
![Page 22: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/22.jpg)
Initializing components
• Once a component has been placed, its name will appear in the Components panel in the existing heirarchy of components
• Generally it's good practice to rename your components descriptively: this will help you when it comes time to add code
![Page 23: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/23.jpg)
Initializing components
• Component properties vary by type; some common properties include: – Height – Width – Background Color
• Default values can be set using the Properties menu in the Designer
![Page 24: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/24.jpg)
Blocks Editor
• Once you've added components using the designer you can define their behavior using the Blocks Editor
• Blocks come in 2 types: – Built-in: general name for control structures,
values, and syntax elements (e.g. variables, procedures and lists)
– Component behaviors: each component that was added in the Designer menu has a corresponding pull-down menu of blocks in the Blocks editor
![Page 25: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/25.jpg)
Block shapes and use
• Blocks are the “syntax” of App Inventor – Programming consists of putting pieces together
like a puzzle to form procedures and event handlers
– Block shapes determine how blocks can be put together:
![Page 26: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/26.jpg)
Built-in blocks: Control
• Control blocks include the familiar control constructs of if/then, if/then/else and various loop types
• Note that the last two blocks listed on the left are “argument” blocks – they could be plugged in to the sockets of other blocks
![Page 27: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/27.jpg)
Built-in blocks: Control
• Control blocks also include several that are less familiar, as they don't involve the evaluation of boolean expressions: they are control commands, not control structures as we know them
![Page 28: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/28.jpg)
Built-in blocks
Some blocks, such as the if block at left, offer expansion capabilities
Click on the blue expander control to bring up a list of possible nesting blocks – choose the one(s) you want by dragging selected block(s)from the left to the block on the right
![Page 29: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/29.jpg)
Built-in blocks: Logic
• Logic blocks include boolean values and logical operators as well as relational operators equal and not equal
• The other relational operators are found in the Math category
![Page 30: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/30.jpg)
Built-in blocks: Math
• Math blocks include literal number values, various expressions (note the ^ operator for exponentiation), blocks that generate random values, and several mathematical functions
![Page 31: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/31.jpg)
Built-in blocks: Math
• Note that the function blocks contain drop-down arrows – you can use these to select a different function for the block
• The “convert” functions work (at least) 2 ways – convert number has 4 different conversions in its drop-down
![Page 32: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/32.jpg)
Built-in blocks: Text
• Text blocks provide much of the same functionality that the String class methods provide in Java
• Also includes some more app-specific functionality, such as:
![Page 33: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/33.jpg)
Built-in blocks: Lists
• Lists are groups of items, somewhat similar to arrays: – Randomly accessible via indexing – Unlike arrays, indexes start at 1
![Page 34: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/34.jpg)
Built-in blocks: Lists
• App Inventor lists provide additional functionality not found in Java arrays – for example, built-in support for getting data from comma-separated files and for lookup tables
![Page 35: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/35.jpg)
Built-in blocks: Colors
• Color blocks are mostly self-evident
• The “make color” block allows creation of a custom color from RGB values
• The “split color” block generates a list of 4 integer values, representing RGB and alpha (degree of transparency)
![Page 36: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/36.jpg)
Built-in blocks: Variables
• Components have properties, which roughly correspond to instance variables
• Other types of variables: notably global, a category that doesn't exist in App Inventor, and local, can be defined, accessed and mutated with the variable blocks
![Page 37: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/37.jpg)
Built-in blocks: Procedures • Procedures are named sets of instructions
(kind of what we know as methods) – First block on left defines a “void”
procedure – Second block defines a value-returning
procedure • Procedures defined using the procedures
blocks are sets of instructions that are not associated with any particular component – they are like what C++ calls non-member functions
• As soon as you define a procedure, the third block on the left appears tin the Procedures drawer
![Page 38: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/38.jpg)
Event handlers
• Event handlers are blocks with labels that start with the word “when”
• Such blocks are associated with components
• The blocks on the left are event handlers associated with a Screen component
![Page 39: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/39.jpg)
Other component blocks: procedures
• Some component types have built-in methods that are not event handlers: the blocks on the left show some of the methods built into the Canvas component
![Page 40: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/40.jpg)
Other component blocks: accessors and
mutators
• Component properties can be accessed and mutated using blocks like those on the left (getters and setters for a Label component)
![Page 41: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/41.jpg)
Block editor help
Each block has help information embedded in it – hover the mouse over a block to access brief help description
![Page 42: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/42.jpg)
Block editor shortcut menus
Right-click on a block to bring up a menu of shortcuts, including the ability to copy a block, add a comment, collapse/disable/delete a block, or access long-form online help screens
![Page 43: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/43.jpg)
Additional Blocks Editor Features
• The trash can, found in the lower right corner of the screen, allows you to discard unwanted blocks
• The backpack, in the upper right corner, allows you to save blocks for use in other apps
![Page 44: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/44.jpg)
Blocks Editor menus
![Page 45: Software Prototyping - kirkwood.edu · Software prototyping • Quick mockup of proposed program – Provides (limited) interactivity – Affords ability to try out features, even](https://reader034.vdocuments.net/reader034/viewer/2022051911/60022a4f4a4b7831a85f6df1/html5/thumbnails/45.jpg)
Blocks Editor menus