Activity 1.6_ Bug Blasters _ App Creators _ Lesson 1_ Let’s Create an….pdf

Programming with Persistence Have you ever made an art project that needed many revisions to get it to look the way you wanted it to look? Or have you had to change a project over and over to get it to look and function the way you want it to? Creating an artifact takes patience and persistence. You...

Programming with Persistence Have you ever made an art project that needed many revisions to get it to look the way you wanted it to look? Or have you had to change a project over and over to get it to look and function the way you want it to? Creating an artifact takes patience and persistence. You have to fix and rework flaws, which takes time and effort, but once fixed, leaves you with a wonderful sense of accomplishment! Writing code requires a similar workflow. A program almost never behaves exactly the way you want it to on your first try. Programmers find bugs , or errors , in their code all the time. They work hard to correct the bugs to ensure their programs function as desired. The process of fixing bugs in a program is referred to as debugging. This activity will introduce you to some of the ways you can debug your programs in App Inventor. These skills are very valuable and will give you more confidence as you work on more complex projects in this unit. Explore Debugging Features 1 Review the Steps for Debugging Code. Note: The following list is the debugging steps for your reference. You will walk through each step in this activity.  Steps for Debugging Code a. Check for hardware or emulator connection issues. You might need to close the emulator or the MIT AI Companion, reset the connection, and reconnect. b. Check for compilation errors (Warnings and Error messages in the Blocks Viewer) and fix them. c. To make sure you understand the intended outcomes of each event handler, review your comments and algorithms. d. Make sure your code is easy to read. Collapse code that is not related to the bug. e. Use debugging strategies to isolate the bug. Do It command Disable command Code trace or variable trace f. Test the app. g. Fix the bug. h. Test the app again. Incremental Approach The first approach you should always use is to develop your code incrementally to avoid complicated debugging situations. One of the advantages of working in App Inventor is the fact that the software automatically syncs any updates you make right to the app, whether it is running on the emulator or a physical device. This type of live programming makes it easy to test your code incrementally. Figure 1. Live Incremental Testing Every time you add a component, or a block of code or two, you can check the live app to make sure it does what you expect it to do. This incremental approach makes it easier for you to find bugs as you develop your program piece by piece, rather than waiting until the end to test it all at once! App Inventor Helpful Features App Inventor provides helpful debugging features. Now, you will explore these features and learn new skills to isolate and debug programs. Figure 2. Debugging and Modifying Code Warnings and Errors App Inventor checks for warnings ( ) and errors ( ) as you build your code. For example, if you drag a block and drop it outside the event handler as shown below… 0:00 / 0:05 Warnings and Errors Display video (This video has no sound.)...the compiler displays a warning count in the bottom left corner of the Blocks Viewer. Warning messages can indicate issues in the code that do not necessarily cause the app to fail, but might cause some unexpected behavior. You can choose whether to display the warning icons on the code blocks themselves by clicking the Show/Hide Warnings button. Figure 3. Show/Hide Warnings Button If you choose to show the warnings, you can then click on the yellow triangle to see the warning message. Figure 4. Warning Message If you see a red circle on a block, it means that the program has a compilation error , rather than just a warning. Compilation errors cause the app to behave incorrectly or even fail to run at all. Figure 5. Compilation Error Right-click Menu If you right-click on a block in App Inventor, a menu pops up with a list of commands you can choose from. Figure 6. Right-click Command Options In this activity, you will explore the following commands: Add Comment Do It Disable/Enable Block Collapse/Expand Block Add Comment The first command you will explore in this activity is to add comments to your block. Programmers add comments to their code to allow others to read and understand their code. It’s also beneficial to them in case they need to update their programs in the future. To add a comment: a. Right-click a block and select Add Comment.  0:00 / 0:04 Adding a Comment video (This video has no sound.) b. Click the blue question mark to open the comments balloon where you can type a clear explanation of the code block. 0:00 / 0:13 Typing a Comment video (This video has no sound.) c. Click again to close the comment.  0:00 / 0:02 Closing the Comment Balloon video (This video has no sound.) d. You can resize and move the comment balloon as you like. e. To delete the comment, you can right-click and select Remove Comment. Do It The next command is the Do It command. The Do It command helps you test your code one block at a time. It is a great way to help you test your code incrementally. Figure 7. Do It Command For example, if you select the Do It command on the call ___ Speak block, the block will run in your app (on your emulator or device), and you will hear it say the welcome message out loud. Sometimes, you may get an error on a block when you run the Do It command. a. Can you guess what caused the Speak block to fail when the Do It command was used in the example below? Figure 8. WelcomeButton If the block you select calculates a value, then the Do It command will make a comment balloon pop up with the result of that block’s calculation for you to see the outcome. For example, if you select the Do It command on the join block, you will see the welcome message pop up in a comment balloon as shown. Figure 9. Do It Result This is very useful if you are trying to find a bug in your program, because you can test each step separately and see whether it does what you expect it to do! This is a great example of testing your code incrementally. Disable/Enable Block The next command is Disable Block. Figure 10. Disable Block Command When you disable a block, it turns gray. Figure 11. Gray Disabled Blocks In other words, once disabled, the Speak block is no longer in active code. This means even though it is in the program, it will not execute when you run the app. You can always right-click and enable the block again. Note: Enabling and Disabling code are very useful features. Not only are they helpful for isolating bugs, but they are also useful when developing code. If you are not quite done with some code and want to shift your focus to another part of the program, you can disable the code so the program skips that part until you are ready to continue working on it later. Collapse/Expand Block The last command we will explore is Collapse Block. Figure 12. Collapse Block Command When you collapse an outer block, like the event handler above, the entire block collapses, hiding all the blocks inside it. Figure 13. Collapsed Block This does not affect the code during runtime. In other words, the code inside the event handler is still active and will run normally. Collapsing the event handler helps you read your code more easily. If you have many events and your blocks are taking up too much space on the screen, making it hard to scroll around and find blocks, collapsing blocks is a great way to “clean up” the code. You can right-click on the block and select Expand Block to open it back up again. Other Useful Commands Right-click anywhere in the white space of the Blocks Editor. The following menu pops up.  Figure 14. Right-click Menu in Blocks Editor You can try out these commands to help you organize your blocks and make them easier to find and read. Use the Backpack tool whenever you want to store copies of code for later use. The backpack is shared among all your projects in App Inventor, so you can use it to copy code from one project to another! PLTW GATEWAY NOTEBOOK Reflect on learning. 1. Define what “debugging” is. 2. Summarize the debugging strategies you have learned so far. Pair Programming Pair up with another student as directed by your teacher. In this activity, you will collaborate with your partner using what is known as the pair programming approach. In this approach, one student will be the Driver , while the other student will be the Navigator. During class your teacher will have you switch roles one or more times. To learn more about pair programming, watch the following videos.  0:00 / 1:05 What is Pair Programming? video 0:00 / 2:28 Pair Programming Student’s Perspective video  PLTW GATEWAY NOTEBOOK Reflect on the videos. 1. What is the role of the Driver? 2. What is the role of the Navigator? 3. Name two important skills that you should practice when working in a pair programming scenario. Blast the Bugs It’s time for you to do some debugging! Remember to take turns as Driver and Navigator. 2 Download and import the AC_1_6StudyBuddy_FixMe.aia project into your App Inventor account. 3 Deploy the app to your physical device. Display Setting: Depending on the screen size and ratio of the device you are using, the game may be more difficult to play. You can change the display to be fixed by selecting Screen 1 in Components, then changing the property Sizing to Fixed instead of Responsive. Select Fixed Sizing Select Screen 1 The Study Buddy App App Description The main functionality of the Study Buddy app is to allow the user to write and color on an image. It is a fun way to complete worksheets and label images. Currently, the app has a picture of a cell and its organelles. The user can: Color and label the cell with their fingertip (Canvas1.Dragged event handler). Draw a filled-in circle (a dot) by tapping on the canvas (triggering the Canvas1.Touched event handler). Note that the circle drawn on the canvas must be filled in with the color the user chose! Adjust the size of the circle drawn using the Slider component. Choose the color they like (yellow, blue, or green) using the buttons provided Clear the canvas. Take a picture using the device’s camera and replace the current background image (the cell) with the new picture. There are bugs in each of the event handlers. 4 Take a few minutes to read the comments to better understand each event handler’s purpose. 5 Test the app. a. Does it work as described above? b. List any bugs you observed in the app’s functionality. 6 Take turns fixing the bugs you found until the app is functioning as intended. Use as many of the debugging strategies as you need to help you isolate the bugs and fix them. 7 When you’ve finished debugging your program, compare your work with another pair of students’ work. Describe to the other team: How you found the bugs