Intro to App Design - Lesson 7: Debugging

Overview

In this lesson students practice using the different programming concepts that they were introduced to in the last lesson. To begin, however, they are introduced to the concept of debugging and are encouraged to use and reflect on this practice throughout the lesson. At the end of the lesson students share their experiences debugging as well as an new realizations about programming.

Goals

Students will be able to:

• Debug simple sequential and event-driven programs
• Use the debugging process and Identify specific best practices for debugging programs

Purpose

This lesson serves a number of roles. Even if students had modified programs in the previous lesson, this continues to be an introduction to many of the skills of programming. Students are also introduced to debugging as a skill they'll need to use and develop as programmers. A huge goal of this lesson, however, is attitudinal.

Resources

For the students

• How to Debug - Video
• CSP-Widgets Repository

Getting Started (5 minutes)

Discuss: Your friend calls you and says "I can't get music to come out of my speakers, can you help?" Write a quick list of everything you'd ask them or have them check to try to fix the problem.

Optional Warmup Discussion: This discussional is optional and included for instances where you need a warm up prompt on the board when students walk in. If your classroom is able to move directly to main activity you should feel free to skip this prompt in the interest of time.

Remarks

• Today we're going to practice programming, but we're also going to practice a very important skill in programming called "debugging". Let's see what it looks like.

Activity (30 minutes)

Understanding the Debugging Process

Display: Show the How to Debug Video. Then, share the 4 steps of the debugging process:

1. Describe the Problem
   • - What do you expect it to do?
   • - What does it actually do?
   • - Does it always happen?
2. Hunt for Bugs
   • - What do you expect it to do?
   • - What does it actually do?
   • - Does it always happen?
3. Try Solutions
   • - What do you expect it to do?
   • - What does it actually do?
   • - Does it always happen?
4. Document as You Go
   • - What do you expect it to do?
   • - What does it actually do?
   • - Does it always happen?

Remarks

• We're going to use this process to help us fix programs. I want you to use this process as you fix issues you find in code today. At the end of the lesson we'll talk more about this process and any specific strategies you document along the way.

Practice Time

Group: Place students in pairs.

App #1

Open a Project: Have students open the "Lesson7_App1" project. In the SourceCode folder, students should open "Main.quorum".

Activity: There's an error in the code that stops this code from running. Students should debug this program by fixing the error.

App #2

Open a Project: Have students open the "Lesson7_App2" project. In the SourceCode folder, students should open "Main.quorum".

Activity: This program also doesn't run. Debug the program.

App #3

Open a Project: Have students open the "Lesson7_App3" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Run this app to see how it works. Then debug the program to use the correct sound and text when the user selects each animal button.

App #4

Open a Project: Have students open the "Lesson7_App4" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Run this program to see how it works. Then debug the program so that the smiley face doesn't go off the screen when the user uses either the mouse or keyboard.

App #5

Open a Project: Have students open the "Lesson7_App5" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Run this program to see how it works. Then add code to the program so that the "Go Back" button takes the user back to the home page.

App #6

Open a Project: Have students open the "Lesson7_App6" project. In the SourceCode folder, students should open "Main.quorum".

Activity: Run this program to see how it works. Then add code to the app to make the "Excited" button work.

• Pick a song, image, and text to show when the button is selected
• Change the color of the "Excited" button when it's selected, and change the other buttons to their original colors
• You can use the code for the other buttons for ideas on how to write the code

Wrap up (10 Minutes)

Discuss: If you were using the debugging process then you should have some notes of good debugging tips. Share those with your neighbor and add any new ones you forgot to add. Be ready to share with the class.

Do This: Share these best practices in addition to those students may have mentioned:

1. Keep your code clean
   • - User clear, meaningful IDs for your elements
   • - Keep your code organized in chunks that do the same thing
   • - Use comments to explain your code
2. Run your code
   • - Run your code a lot, every time you add a command or two
   • - Use output statements throughout your code to get feedback on what parts are running.
3. 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 code is supposed to work
   • - Hand trace your code to track what's happening

Remarks

• Debugging is an important and entirely normal part of programming. Your code won't always work the first time, and that's OK! Debugging is a skill that you can practice and get better at. Using documentation and leaving comments for yourself are important skills, but so is working with classmates or learning to more effectively search for bugs. We'll keep using these skills.

Journal

Have students add the following vocabulary words and definitions to their journals:

• Documentation: a written description of how a command or piece of code works or was developed
• Comment: Form of program documentation written into the program to be read by people and which do not affect how a program runs.

• Let's take a minute to talk more about comments and documentation. Comments help explain the code, but do not affect how the program runs. They are meant to be read by people! When we write code, we don't only write for the computer we also write for other people. It's important that others can understand our code, so write your code clearly using the practices we discussed and comments.
• Not all programming environments support comments, so other forms of documentation may be important like keeping a separate document with information about your program. The key takeaway here, is no matter what the format, comments and documentation are important!
• As you grow in your programming skills, you will start to appreciate how valuable comments can be. You don't have to wait until a program is complete to write the comments. You should be doing this as you develop the project. There will be opportunities to write comments in the App project you are currently working on.

Assessment: Check for Understanding

For Students

Open a word doc or google doc and copy/paste the following question.

Question 1

What is one thing you really enjoyed about today's activity?

Question 2

Is there anything that you found confusing or need extra help with?

Standards Alignment

• CSTA K-12 Computer Science Standards (2017): 3A-CS-03
• CSP2021: CRD-2.G.1, CRD-2.G.2, CRD-2.G.3, CRD-2.G.4, CRD-2.G.5
• CSP2021: CRD-2.I.5

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 3 Lesson 8, which describes Continue designing your app.