knowt ap exam guide logo

Unit 3: Intro to App Design

  • 4 things common to all computers

    • Input

      • Take in information based on what you tell the computer to do

      • Data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

      • For example, the user clicks a button

    • Storage

      • Memory

    • Processing

      • Manipulates it using an algorithm

        • A series of commands

      • Then sends it back to be stored in memory again

      • Continues until the processed information is ready to be outputted

    • Output

      • Any data that are sent from a program to a device

      • Depends on what the computer is designed to do

        • Text

        • Photos

        • Videos

        • Tactile interaction

        • May even be an input to another computer

      • For example, a song is played

  • User Interface: the inputs and outputs that allow a user to interact with a piece of software. User interfaces can include a variety of forms such as buttons, menus, images, text, and graphics

    • For example, a screen with buttons, images, and text

  • Input: data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

  • Output: any data that are sent from a program to a device. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

  • Program Statement: a command or instruction. Sometimes also referred to as a code statement

  • Program: a collection of program statements. Programs run (or “execute”) one command at a time

  • Two different ways for programs to run

    • Sequential Programming: program statements run in order, from top to bottom

      • No user interaction

      • Code runs the same way every time

    • Event Driven Programming: some program statements run when triggered by an event, like a mouse click or a key press

      • Programs run differently each time depending on user interactions

  • Difference between a sequential program and an-event driven program

    • Sequential programming is running the same command many times in succession

    • Event-driven programming is a single execution of all commands

  • Examples of events

    • Mouse clicks

    • Mouse overs

    • Key presses

  • Bug: when a computer is not working the way it’s supposed to

  • Debugging: sorting through your code, correcting your mistakes and fixing it

  • 4 important steps when debugging

    • Describe your problem

      • Figure out what’s happening

      • What did you want your code to do?

      • What is it actually doing?

      • Does it always happen?

    • Hunt for bugs

      • Figure out what is it in your code that is causing that

        • Are there warnings or errors?

        • What did you change most recently?

    • Try out solutions

      • Try out small solutions and see how they affect your code

    • Document the bug

      • Document what you learned

        • What strategies did you use?

  • Debugging Strategies

    • Keep your code clean

      • Use clear, meaningful IDs for your elements

      • Keep your code organized in chunks that do the same thing

      • Use comments to explain your code

      • Write code using blocks

    • Run your code

      • Run your code a lot, every time you add a command or two

      • Slow down your code with the speed slider. Watch how it runs closely

      • Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running

    • Use classmates and resources

      • Talk out the problems with a partner or classmate

      • Compare your code to examples that you know work

      • Read documentation to know how a block is supposed to work

      • Hand trace your code to track what’s happening

  • Documentation: a written description of how a command or piece of code works or was developed

  • Comment: from of program documentation written into the program to be read by people and which do not affect how a program runs

  • Pair programming: a collaborative programming style in which two people work together at the same computer to write code, and switch between the roles of writing code and tracking or planning high level progress

    • 1 person is the driver

      • Person using the computer actually typing the code

      • Manipulates the keyboard and the mouse

    • The other person is the navigator

      • Keeps track of the big picture and helps decide what to do next

      • Guides towards the goal

    • Good because another person may be able to see what you missed

    • Important to switch roles often so you can practice both roles and learn from one another

  • Reason to include comments in a program

    • Comments tell the programmer what the code is doing

  • Command: a simple instruction for the computer. Put many together and you get algorithms and computer programs

  • Computer Program: a sequence of steps written in a programming language that can be followed to solve a problem, especially by a computer

  • OnEvent programming statement: statements that should only run upon a specific user action should be placed

  • When debugging, you should

    • Add some console.log statements to see what is going on

    • Reduce the amount of code and see if the behavior improves

    • Describe your program and the odd behavior to a friend

  • Documentation for code: a written description of how a command or piece of code works or was developed

  • Typical phases in the development process for a piece of software

    • Investigation and reflecting

    • Designing

    • Prototyping

    • Testing

  • Testing is the stage of the development process a team is most likely to get feedback from a potential user of an app

  • Syntax error: a mistake in the program where the rules of the programming language is not followed

  • Purposes of having potential users test a program or app

    • To see if there are any bugs

    • To get input on the design

    • To see how a user interacts

  • It is important for element IDs to have meaningful names so when referencing different elements, you don’t get confused, and it is very easy to differentiate them

  • Difference between a programming language and natural (every-day) language

    • The programming language can’t understand our everyday language, so we have to use words that it will understand

    • There are some features in programming that we don’t necessarily use when we talk

  • 4 things common to all computers

    • Input

      • Take in information based on what you tell the computer to do

      • Data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

      • For example, the user clicks a button

    • Storage

      • Memory

    • Processing

      • Manipulates it using an algorithm

        • A series of commands

      • Then sends it back to be stored in memory again

      • Continues until the processed information is ready to be outputted

    • Output

      • Any data that are sent from a program to a device

      • Depends on what the computer is designed to do

        • Text

        • Photos

        • Videos

        • Tactile interaction

        • May even be an input to another computer

      • For example, a song is played

  • User Interface: the inputs and outputs that allow a user to interact with a piece of software. User interfaces can include a variety of forms such as buttons, menus, images, text, and graphics

    • For example, a screen with buttons, images, and text

  • Input: data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

  • Output: any data that are sent from a program to a device. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text

  • Program Statement: a command or instruction. Sometimes also referred to as a code statement

  • Program: a collection of program statements. Programs run (or “execute”) one command at a time

  • Two different ways for programs to run

    • Sequential Programming: program statements run in order, from top to bottom

      • No user interaction

      • Code runs the same way every time

    • Event Driven Programming: some program statements run when triggered by an event, like a mouse click or a key press

      • Programs run differently each time depending on user interactions

  • Difference between a sequential program and an-event driven program

    • Sequential programming is running the same command many times in succession

    • Event-driven programming is a single execution of all commands

  • Examples of events

    • Mouse clicks

    • Mouse overs

    • Key presses

  • Bug: when a computer is not working the way it’s supposed to

  • Debugging: sorting through your code, correcting your mistakes and fixing it

  • 4 important steps when debugging

    • Describe your problem

      • Figure out what’s happening

      • What did you want your code to do?

      • What is it actually doing?

      • Does it always happen?

    • Hunt for bugs

      • Figure out what is it in your code that is causing that

        • Are there warnings or errors?

        • What did you change most recently?

    • Try out solutions

      • Try out small solutions and see how they affect your code

    • Document the bug

      • Document what you learned

        • What strategies did you use?

  • Debugging Strategies

    • Keep your code clean

      • Use clear, meaningful IDs for your elements

      • Keep your code organized in chunks that do the same thing

      • Use comments to explain your code

      • Write code using blocks

    • Run your code

      • Run your code a lot, every time you add a command or two

      • Slow down your code with the speed slider. Watch how it runs closely

      • Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running

    • Use classmates and resources

      • Talk out the problems with a partner or classmate

      • Compare your code to examples that you know work

      • Read documentation to know how a block is supposed to work

      • Hand trace your code to track what’s happening

  • Documentation: a written description of how a command or piece of code works or was developed

  • Comment: from of program documentation written into the program to be read by people and which do not affect how a program runs

  • Pair programming: a collaborative programming style in which two people work together at the same computer to write code, and switch between the roles of writing code and tracking or planning high level progress

    • 1 person is the driver

      • Person using the computer actually typing the code

      • Manipulates the keyboard and the mouse

    • The other person is the navigator

      • Keeps track of the big picture and helps decide what to do next

      • Guides towards the goal

    • Good because another person may be able to see what you missed

    • Important to switch roles often so you can practice both roles and learn from one another

  • Reason to include comments in a program

    • Comments tell the programmer what the code is doing

  • Command: a simple instruction for the computer. Put many together and you get algorithms and computer programs

  • Computer Program: a sequence of steps written in a programming language that can be followed to solve a problem, especially by a computer

  • OnEvent programming statement: statements that should only run upon a specific user action should be placed

  • When debugging, you should

    • Add some console.log statements to see what is going on

    • Reduce the amount of code and see if the behavior improves

    • Describe your program and the odd behavior to a friend

  • Documentation for code: a written description of how a command or piece of code works or was developed

  • Typical phases in the development process for a piece of software

    • Investigation and reflecting

    • Designing

    • Prototyping

    • Testing

  • Testing is the stage of the development process a team is most likely to get feedback from a potential user of an app

  • Syntax error: a mistake in the program where the rules of the programming language is not followed

  • Purposes of having potential users test a program or app

    • To see if there are any bugs

    • To get input on the design

    • To see how a user interacts

  • It is important for element IDs to have meaningful names so when referencing different elements, you don’t get confused, and it is very easy to differentiate them

  • Difference between a programming language and natural (every-day) language

    • The programming language can’t understand our everyday language, so we have to use words that it will understand

    • There are some features in programming that we don’t necessarily use when we talk