1. Understanding an App’s Architecture
App Inventor – Ch 14
Understanding an App’s Architecture

2. App Inventor – Ch14 Apps are composed of: Components Behaviors
Event Handlers
Types of Events

3. App Architecture

4. Components Visible Invisible or Non-visible
Buttons, Textboxes, Labels, Images, Canvases
Make up the User Interface of the App
Invisible or Non-visible
Texting, Sound, SMS, LocationSensor, Accelerometer, Timer, TextToSpeech
Provide access to built-in technology of the phone

5. Component Properties
All components, visible and invisible, have properties
Properties are memory slots for storing information about components
Visible: width, height, alignment
Non-visible: sound-source, image-source, timer- interval
Initially set in Designer, can be modified in Blocks

6. Behavior
Components are usually straightforward; behaviors can be quite complex. Thinks of:
An App As a Recipe
An App As a Set of Event Handlers
App as multiple recipes hooked to events
Internal and External Events

7. App as Recipe (old-school)
Start a bank transaction
Perform computation that modifies customer’s account
Print new balance on screen

8. App as Set of Event Handlers

9. Behavior There are several Event Types: User-initiated – button-click
Initialization – when app launches, do …
Timer – when 20 milliseconds passes, do …
Animation event – when two objects collide, do …
External event – when text comes in, do …

10. Behavior – Event Types (visually)

11. Examples of Events

12. All Programming Languages share:
Sequence – recipe
Selection – branching (Ch. 18)
if-then-do (all languages incl. AppInventor)
other languages: switch, select-case
Repetition – repeating blocks
foreach, while do (AppInventor & most langs)
other languages: for-next

13. Sequence Default processing in any computer program
Work step-wise through set of instructions
Example: get up in the morning
1. Respond to alarm
2. Get out of bed
3. Get dressed
4. Make coffee
5. Get paper
6. Pour coffee
6. Drink coffee/read paper

14. Selection
Apps can ask questions

15. Behavior – if-then-do Event Handlers can ask questions
Is a certain condition true?
Yes, branch one way
No, branch another way
Conditionals can be more complex than yes/no
If-then-do in App Inventor
Conditionals handled in detail in Ch 18

16. Selection Can choose alternate paths through instructions
Example: Eat breakfast
Check for milk in fridge, cereal in cabinet
If both are there:
Get bowl and spoon
Pour cereal in bowl, pour milk in
Eat cereal
Brush teeth
What are the two possible paths through these instructions?

17. Example of If-Then Block

18. Repetition Can choose to repeat instructions Example: Brushing teeth
Apply toothpaste to toothbrush.
Brush up and down 10 times on outside of teeth on left side of mouth
Repeat Step 2 on outside of teeth on right side of mouth
Repeat Step 2 on outside of teeth in front of mouth
Repeat Steps 2-4 on inside of teeth
In terms of how the human mouth is constructed, what’s wrong with Step 5?

19. Behavior – foreach & while do
Event handlers can repeat blocks (iteration)
foreach in App Inventor
while do in App Inventor
Ch 20 discusses iteration in detail

20. Example of Repeated Block

21. Behavior – variables & storage
Event handlers can remember things
Temporary memory (RAM): variables
Persistent data (Flash drive or HD): database
Variables are the subject matter of Ch 16
Data storage is detailed in Ch 22

22. Behavior – web apps Event handlers can talk to the web
Web Service APIs – example: App Inventor can communicate with Twitter accounts
Mashups: apps that can talk to more than one web service
Web-enabled apps: subject matter of Ch 24

23. Summary
As app creator, you view apps from the end-user’s perspective AND also the designer’s perspective
Use Designer first to create UI . . .
Components – visible
Components – non-visible
. . . Then program behaviors in Blocks
Event Handlers – when-do
Types of Events – user-initiated, initialization, timer, animation, external
Characteristics – selection, repetition, store in memory, database storage, talk to web
Test and deploy your app