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