Activity 3 Count Me In Introduction

How do computers work? A computer—whether a laptop, a smartphone, or a computer under the hood of a car—follows one instruction at a time. Each instruction tells a processor to do one simple task such as “add two numbers together.” Programs are lists of those instructions, one instruction after another. Programs also define new instructions that are more abstract, such as “count the number of people in a picture.” How are programs created? A software developer uses a computer language to write a program, listing instructions for the computer to follow. The program might respond to input such as the keyboard, mouse, or touch screen. The program might produce output such as sound, graphics, or motor movement.

• 
  Computer with browser
  
• 
  Android device with AI Companion
  
• 
  Google ID
  
• 
  1.1.3 sourceFiles.zip
  

1. 
   Form pairs as directed by your teacher. Practice a professional greeting that includes shaking hands and saying something enthusiastic with a smile and eye contact.
   

2. 
   A computer receives information from input devices, processes instructions, and sends information to output devices. Laptops, smartphones, and modern cars all have processors that receive input from devices, process instructions, and send output to devices. For each of these computers, describe an input device, a decision made by the processor, and an output device. The modern car is completed for you as an example.
   

1. 
   Modern car
   

2. 
   Laptop computer
   

3. 
   Smartphone
   

3. 
   At the end of this lesson, you will build an app to help meet a need that you identified through interviewing three people. This activity demonstrates the first steps you will need to take when it is time to solve the problem. In this activity, imagine that a group of students have interviewed three people in your community and have identified their needs as described below.
   

Alisha works at a retail store, Paul sells tickets at school sporting events, and Mrs. Lang works in the school lunchroom. The student team realized that the three prospective clients all described different versions of the same need. They all need an app that will help them tally.

4. 
   You will be creating your own tally counter, a variation of the one you just used. To create the tally counter, you will learn how to decompose a problem into smaller steps. Problem decomposition is a central concept in learning to program.
   

Review the presentation about problem decomposition. Note that the first user story on the backlog has been broken down into the list of sprint tasks. Describe other ways in which the content and format of the product backlog and the sprint task list demonstrate the main point of that presentation.

5. 
   Open MIT App Inventor by following these steps:
   

1. 
   App Inventor authenticates you by asking Google to check your credentials. Sign in to a Google account at https://google.com. Before typing a username or password in a browser, always check the schema (HTTPS) and domain name (google.com).
   

2. 
   Navigate to the App Inventor website http://ai2.appinventor.mit.edu and allow Google to provide your user name to App Inventor. Continue past the splash screen(s).
   

6. 
   Select Start New Project. Name the project as directed by your teacher and create a project folder for your work as directed by your teacher. Alternatively, as directed by your teacher, upload countMeIn.aia and skip to Step 7.
   

7. 
   In this step, you will create the interface in the Designer view. In the next step, you will add functionality in the Blocks view.
   

One of the students sketched the interface she wanted. Her sketch is shown below. Create the interface with the following steps as described in the video on the basic tally app.

1. 
   Drag the components (a button and two labels) onto the interface from the User Interface drawer. Place the two labels inside a horizontal layout component from the Layout drawer. Rename the components to say what type of component they are and why they are there.
   

Component	Name
Button	Button_Tally
Label	Label_CounterDescription
Label	Label_CounterNumber

2. 
   Set some of the initial values of the components’ properties using the Properties panel in the Designer view. The following properties will initialize the text of the labels and to initialize the size of the button.
   

Component Name	Property	Value
Label_CounterDescription	Text	Counter #1:
Label_CounterNumber	Text	0
Button_Tally	Width	200
Button_Tally	Height	200

3. 
   Make the button display an image as follows.
   
   1. 
      Upload an image file using the Media panel. The image countMeIn.JPG is provided in the activity's source files, but you can use your own image if you wish.
      

2. 
   Select the button in the Components panel and then in the Properties panel, set the button's image property to use that file.
   

4. 
   Make a sound component to play a clicking sound when the button is pressed.
   
   1. 
      Drag a sound component from the Media drawer into the interface Viewer. The component will appear at the bottom of the viewer as a non-visible component.
      

2. 
   Upload a short sound file using the Media panel. The sound click.MP3 is provided in the activity’s source files, but you can use your own short sound if you wish.
   

3. 
   Select the sound component in the Components panel and then in the Properties panel, set the source to your sound file.
   

8. 
   In the Blocks view, create an event handler for when the button is clicked. The handler should play the sound and increment the tally when the button is clicked. You will need some computer memory to store the current tally. The name for that specific memory storage area is a variable. App Inventor has two ways to create a global variable, which is a variable that can be accessed from anywhere in a program.
   

1. 
   One way to create a variable is to initialize a global variable. In the Blocks view, create a global variable and an event handler for when the button is clicked, as shown below. The handler should play the sound and increment the tally when the button is clicked.
   

2. 
   A second way to create a variable is to initialize a component's property in the Designer view. Blocks for the component can directly read from or write data to the property. Setting the property will immediately affect the component. Examine the picture of the Designer view and the event handler shown below. With your partner, identify one advantage and one disadvantage of using a component property for the tally instead of a global variable.
   

9. 
   Test your app by connecting to the AI2 Companion with the following steps.
   

1. 
   On the Android device, launch the AI2 Companion.
   

2. 
   In App Inventor in the browser, select Connect > AI2 Companion.
   

3. 
   Use the QR code or six-letter passcode to connect.
   

10. 
    Create solutions for the following challenges. Save these as new versions of your program.
    

1. 
   Add a reset button. When the user presses the reset button, make the counter go back to zero.
   

2. 
   The user wants to be able to carry the Android device around as they're tallying, but doesn't want to accidentally tally while holding the tablet when walking. Add an “enabled” checkbox so that the user can enable or disable whether the tally button works. You will use the if-then block as shown here.
   

3. 
   Challenge b, extension: Add two sounds to the app to give the user more feedback. Add behavior so that when the tally button is pressed the app makes one sound if the counter is enabled and another sound if the counter is not enabled. Use the following steps.
   

1. 
   In the Designer view, use the Upload File button in the Media panel. Upload two sound files.
   

2. 
   Add two Sound Components from the Media drawer.
   

3. 
   Set the Source property of each sound to one of the sounds you uploaded.
   

4. 
   Create the behavior that the tally button plays one sound if the checkbox is enabled and plays the other sound otherwise. You will probably want to use an if-then-else block, which you create as follows.
   

1. 
   Use an if-then block and select its mutator, the blue gear.
   

2. 
   Drag an else from the mutator palette on the left to the block configuration on the right.
   

4. 
   Use several buttons to tally different types of objects. Each type of item should have a separate pair of labels for the description and tally.
   

5. 
   Instead of incrementing a tally counter, the app could keep track of the order in which buttons were pressed. This might be useful for a counter that would help the user investigate how items are arranged on a shelf or how people are seated in a stadium. For this challenge, use the digits 0 to 9 to label a set of buttons. Each time a button is pressed, concatenate the digit to a string of digits, like a calculator does when you type several digits. In the image below, a black label contains a red zero. Each button press should display an additional digit in the label. So that you can concentrate on programming with blocks, the interface has been provided in calculator.AIA. Hint: the join block in the text drawer will concatenate the digit characters instead of adding the numbers.
   

1.App Inventor uses event-driven programming. Like all event-driven programs, an App Inventor program consists of two parts. One part consists of all the code that is executed once at the start of the program to initialize a user interface:

• 
  components are created according to the instructions provided in the Designer view
  
• 
  initial values of component properties are set
  
• 
  the when Screen1.Initialize event handler is executed
  

Referring to one of the components from a program you created in this activity, explain event-driven programming by describing some of the code executed for initialization and some of the code executed later to handle events.

2.Think of a problem you solve frequently in your day-to-day life. Explain how you use or could use problem decomposition to solve that problem.

3.Developers start working on the top item of a backlog before thinking too much about how to clearly define items that are lower on the backlog list. Explain why you think developers often start development before completing all details of a plan that goes from start to finish.