Coding 14: Debugging Tips in App Inventor and Thunkable

Debugging Tips in App Inventor and Thunkable

Coding 14

In this lesson, you will…

  • Learn tips for debugging your code in App Inventor and Thunkable

Key Terms

  • Debugging - the process coders use to figure out why their code isn’t working
  • Test data - a simpler set of data that you can use to make sure your app is working correctly
  • Comments - text that is included in code to explain what it does
  • Version Control - saving working versions of your app as you make progress

Debugging Tips

Debugging is the process coders use to figure out why their code isn’t working. When you did the Code Challenges, you may have already run into something that forced you to go back over your code and figure out where you made a mistake. This is the essence of debugging and this next section will provide you with tips on how to make debugging easier for you. 

Sometimes, you may already know how to code something but it will still take you a very long time to do it. Great coders still make mistakes, even when they know exactly what they are doing, so it’s important to build a toolbox of debugging techniques that can help you out when you aren’t sure what went wrong. Everyone has a different method for debugging their code and you’ll figure out what yours is after you practice a bit. Debugging can often be the most time-consuming part of coding, so it’s really important to leave plenty of time for it!

Using test data

If you have a lot of really complicated data to use in your app it can be helpful to use test data. Test data is a simpler set of data that you can use to make sure your app is working correctly.

As an example, let’s say you are making an app that shows the user where the closest restaurant is to them. You want to use fusion tables to store the names of restaurants, the location data, and phone numbers. To get started building your app, you don’t need to have an entire list of restaurants ready in your fusion tables to start coding your app. You can just put in one or two test restaurants and get your app working before adding the real data.

Using the Notifier & Alert

This is called the notifier in App Inventor and an Alert in Thunkable. This can help you figure out why your code is broken. To put a notifier or alert in your app drag it over from the user interface palette. It will appear as a non-visible component like this:

App Inventor

Thunkable

Here are some scenarios when this method of testing may be helpful:

Collapsing Blocks

Let's talk about a great feature to help you keep your code organized on App Inventor and Thunkable.

Collapsed blocks will compress it down to one bar on your screen. If you right-click on a block, you’ll see an option to collapse it.

Collapsed blocks still work the same as regular blocks, they just take up less space. This can be helpful if you have blocks you no longer need to edit and want to clean up your screen.

To expand your blocks again, right-click on them.

App Inventor

App Inventor

Thunkable

Disabling blocks (App Inventor only)

You can also disable blocks. This will keep them on your screen but prevent them from doing anything. This can be very helpful if you want to test your app without certain code blocks, but don’t want to delete them. You can also disable blocks that you use for testing only, like the notifier. 

Disabled blocks look like this:

To enable your blocks again, right-click on them and click “Enable Block”.

Comments

Programmers often leave comments in their code to explain what it does. Comments can be helpful when other people are looking at your code, such as teammates, mentors, and judges. Comments can also help if you return to your code later and have forgotten what parts of it do.

Version Control

Let’s say you have one part your app built and working. You add some new code and suddenly everything stops working.  You try to delete the new code but your app still isn’t working. You aren’t sure what went wrong and wish you had an “undo” button.

To avoid scenarios like this you can create different versions of your app.  These versions will save your code so that if you make a mistake and don’t know how to fix it, you can go back to the last working version you saved. You can also use version control to experiment with new features without worrying about breaking your app. 

Activity: Add a Comment

If you have started your final app for Technovation, use that app for this activity. Otherwise, pick one app that you made in one of the other coding activities.

Add at least one comment to your app explaining what a group of blocks does. Pick a group of the blocks that you think it is the hardest to understand because those blocks would probably be the hardest for someone else, like a team member, to understand.

Here’s an example of a comment we included in the last coding activity. Does it help you understand the section of code?

App Inventor Thunkable

 

Reflection

Debugging is a natural part of the coding process, so don’t get discouraged if your app doesn’t work perfectly on the first try. Many times, the bulk of your time coding is actually spent debugging. Make sure to plan with your teammates and mentors to leave extra time for debugging before you submit.

Additional Resources: More Debugging Resources

App Inventor and Thunkable Forums

If you have questions that are specific to App Inventor or Thunkable while you are debugging, you can join the App Inventor or Thunkable forum, and then post your question. 

Although the larger App Inventor and Thunkable communities are usually quite helpful and responsive to questions, try searching the forum first to see whether your question has already been asked and answered. This will save you time. 

Videos explaining debugging and version control in App Inventor

Watch this video to learn more about version saving in App Inventor:

Check out this video to learn about some of the errors that you may encounter in your code and how App Inventor helps you spot them! 

App Inventor Testing Documentation

Here are tips from MIT to help debug your App Inventor Code: