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 and fix it
  • 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, and then fix it so it does work. 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!

 

Do things in small chunks

The best advice for getting your app to work correctly is to break the coding down into small chunks. Get one thing working before starting on the next thing. Sometimes programmers are tempted to try to code their entire app in one go, then test it. Don’t fall for that temptation!!! If something doesn’t work correctly, it’s hard to figure out where to even start to try to fix the error. The better option is to code a little bit, test a little bit, confirm it works, then code a little more, test a little more, etc. For example, if your app has 5 buttons that all do different things, code the action for the first button and then test to make sure it works. Then move onto the second button, etc. Even if your buttons all do similar things, get one working, and then you can use what worked for that first button to code the remaining buttons. It’s better to fix code in one place then go back and fix it in 5 places if there is an error in your code.

 

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 Google Sheets 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 Google Sheets spreadsheet 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 component 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 in your App Inventor app drag it over from the user interface palette. In the new drag and drop interface of Thunkable, you add an alert in the Blocks window by clicking the + sign next to Alerts in the Palette.

App Inventor

Thunkable

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

Using Labels

Just like with Notifier and Alert components, you can also add Labels to display current information in your app. For example, you might want to know the value of a variable as certain events happen while the app is running. You can set the Label.Text to whatever it is you want to know and it will display on your app. Once you’ve debugged your error, you can either make the Label invisible, or delete it altogether from your app.

App Inventor Thunkable

Changing Properties

A simple way to check things while you are testing your app is to change a property value in the Designer while you are running the app. For example, you might have a game with a sprite. Its position doesn’t look right to you on your phone when it’s running. If you are live testing, you can go to the Designer and change the X and Y values of the ImageSprite (App Inventor) or Sprite (Thunkable) and it will update the position on the screen in the running app. It can be helpful to see what changing a certain property of a component will do to affect the looks or behavior of a component as you are testing.

Do It (App Inventor only)

In App Inventor, while you are live testing your app, either with a phone and the AI Companion app, or with the emulator, you have access to a new command, “Do It”. The command is greyed out until you connect to a phone or the emulator through the Connect menu. The Do It command lets you run a block without having to interact with the app itself. It’s a great way to see the current value of a variable. Just drag out a “get global name” block and right-click. Select “Do It” from the dropdown menu and that block of code will execute. A yellow Do It box will appear above the box with the result.

 

You can also use Do It to change something in your app. For example, you might want to change an item in a list. Drag out the block to do that, and select Do It. You won’t see the result, but the list will be updated within your app.

 

You can also run an existing code block in your app. For example, here the ListView elements will be updated using Do It. That will be reflected in the app. The ListView will display the new elements set with the Do It command.

Other Coding Tips

Collapsing Blocks

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

If you right-click on a block, you'll see an option to collapse it.

App Inventor

Thunkable

Collapsed blocks will compress it down to one bar on your screen. 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.

App Inventor


Thunkable

To expand your blocks again, right-click on them and select Expand Block.

App Inventor

Thunkable

Disabling blocks

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.

There are a couple of different ways to disable blocks. In both App Inventor and Thunkable, simply dragging blocks out of an event handler block will disable them and prevent them from running. In App Inventor, the blocks will look the same, but because they are not part of any event, there is no way they will ever execute. In Thunkable, the blocks look greyed out with a crosshatch pattern. In App Inventor, you also have the ability to disable blocks by right-clicking, and selecting Disable blocks from the dropdown menu. In that case, they will appear greyed out too. The difference is, you can disable entire sets of blocks using this method, including the event handler block. 

App Inventor

Right-click and disable blocks, including event handlers.

App Inventor

Drag a block out of the event handler block and it will be disabled. It won't execute.

Thunkable

Drag a block out of event handler to disable it.

To enable your blocks again,  right-click on them and click “Enable Block”, or drag the disabled blocks back into the event handler 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

Writing comments and explaining code blocks will help you when you make your demo video. You can use what you wrote in your comments to explain blocks of code in your video.

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. Often, 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:

 

Debugging in App Inventor

Debugging in Thunkable

Here are tips from to help debug your Thunkable Code:

App Inventor Testing Documentation

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