Software Prototyping
& App Inventor
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
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
Limitations of paper prototyping
• No direct sensory experience (beyond the visual)
• Can’t demonstrate implementation feasibility
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
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
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
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)
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
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
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
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.)
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
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
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)
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
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
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
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
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
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):
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
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
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
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:
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
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
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
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
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
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
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:
Built-in blocks: Lists
• Lists are groups of items, somewhat similar to arrays: – Randomly accessible via indexing – Unlike arrays, indexes start at 1
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
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)
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
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
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
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
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)
Block editor help
Each block has help information embedded in it – hover the mouse over a block to access brief help description
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
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
Blocks Editor menus
Blocks Editor menus