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 appspecific 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 commaseparated files and for lookup tables
Built-in blocks: Colors Color blocks are mostly selfevident 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 Java) 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