1. Ch 14. Understanding an App’s Architecture Two perspectives 1.Programmer: a)Components & Behaviour b)Designed in Component designer Blocks editor 2.End-user: How do I use the app?

2. Fig 14-1. Internal architecture of an App Inventor app

3. Ch 14. Understanding an App’s Architecture Components Visible & Non-visible Visible components You can see these when the app is launched e.g. buttons, text boxes, and labels. i.e. make up the app’s user interface. Non-visible components Not part of the user interface. These provide access to built-in functionality of the device Texting component sends SMS texts LocationSensor determines the device’s location TextToSpeech component talks Both visible and non-visible components have properties - memory slots for storing information about the component. What are the properties of a button? Of a canvas? …

4. Ch 14. Understanding an App’s Architecture Behaviour Behavior defines how the app responds to events - user initiated or external Events and responses Many programs are written as event handlers. When developing an app we need to determine each event the app will respond to and the nature of that response. Events can be internally or externally generated Internal: When the user clicks a button do … External: When a text message is received do … Apps written from the event/response perspective are different from the traditional way of considering a program as an algorithm or recipe.

5. Ch 14. Understanding an App’s Architecture Behaviour Events and event handlers From Paint Pot: From Hello Purr:

6. Ch 14. Understanding an App’s Architecture Behaviour Events and event handlers When event X occurs Do: ……………… The programmer must determine the response – the sequence of statements to be executed

7. Ch 14. Understanding an App’s Architecture Behaviour Example. Consider the example TalkToMe (get it here)here The Talk To Me app tells the user what to do … the user types a line of text and the app speaks those words. The app responds to two events: When the screen is initialized (when the app is loaded/started) … When the button is pressed/clicked …

8. Ch 14. Understanding an App’s Architecture Event types Event type Example User-initiated event When the user clicks button1, do… Initialization event When the app launches, do… Timer event When 20 milliseconds passes, do… Animation event When two objects collide, do… External event When the phone receives a text, do…

9. Ch 14. Understanding an App’s Architecture Responses (in particular pages 225/226) Conditional blocks Statements are not necessarily executed in a linear sequence (sequentially) A test can be performed to select one of two paths of execution If the line of text contains the word “Red” then the line will be displayed in red Otherwise the line will be displayed in black.

10. Ch 14. Understanding an App’s Architecture Foreach block Blocks of statements can be repeated … to get a list of names into a text box This line is executed 3 times

11. Ch 14. Understanding an App’s Architecture Variables Apps can define variables which hold named values. values can be stored for later user values can be updated/changed Example from Paint Pot dotSize variable dotSize is given an initial value & the value of dotSize can be changed The value of a variable can be changed when the app is executing … we used a set statement (also called an assignment statement) for this purpose If a value needs to be kept across executions of an app we use a database for that purpose … chapters 10, 11, 22