Debugging your code in App Inventor

Learn tips for debugging your code and fixing errors in MIT App Inventor

These are the activities for this lesson:

WHAT IS DEBUGGING?

Debugging is the process coders use to figure out why their code isn’t working, and then fix it so it does work. 

The term debugging came from Admiral Grace Hopper, a pioneer in computing. She was working on the Mark II computer at Harvard University in the 1940s and a moth got stuck in the computer and stopped it from working.

Getting rid of the moth, she said they were “debugging” the system. Programmers use the term now to mean “fixing errors in my code”.

Grace Hopper

CODING TIPS

dog looking at computer

Debugging can often be the most frustrating and time-consuming part of coding, so it’s really important to leave plenty of time for it!

And also to be patient!

SMALL CHUNKS

Sometimes programmers are tempted to code their entire app in one go, then test it.

Don’t fall for that temptation!!!

If something doesn’t work correctly, which is likely, it’s hard to figure out where to even start to try to fix the error. 

chunks of chocolate

Break the coding for your app into small chunks. 

Get one thing working before starting on the next thing. 

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,

  1. Code the action for the first button
  2. Then test to make sure it works.
  3. Move onto the second button
  4. Repeat.

It’s better to fix code in one place than go back and fix it in 5 places if there is an error in your code.

app with 5 buttons

VERSION CONTROL

it began as a mistake

Let’s say you follow the “small chunks” rule and have one part of your app built and working.

You add some new code and suddenly everything stops working. 

OH NO!

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 save versions of your app as you get parts working. 

That way 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 working app.

There are two ways to save different versions in App Inventor, using “save as” and “checkpoint”.

The “Checkpoint” option will save a copy with whatever name you give it, but you continue working in the original. The idea is to “checkpoint” that version that works and continue your development in the main version of the project.

Project menu, checkpoint selected

The “Save project as” option will create a copy of the code you are working on and save it under a new name. Any edits you make will be in the new copy.

project menu, save as selected

COLLAPSE BLOCKS

Collapsing blocks is a way to keep your code organized, as your code workspace starts to get crowded with blocks.

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

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

app inventor expanding a block

Collapsed blocks will compress it down to one bar on your screen.

They 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

collapsed block

DISABLE BLOCKS

You can also disable blocks.

They remain on your screen but don’t run in the app.

With disabled blocks, you can test your app without certain code blocks. You can enable them later and they will run.

You can also disable blocks that you have used for testing only, like Notifiers.

There are two ways to disable blocks in App Inventor

Simply dragging blocks out of an event handler block will disable them and prevent them from running. Because they are not part of any event, there is no way they will ever execute. You can always snap them back in to use them.

disabled block by dragging out of event block

You can also right-click on a block or group of blocks and choose “Disable Block“. The blocks will appear greyed out to show they will not execute. This way you can disable an entire set of blocks.

To enable your blocks again, simply right-click and choose “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.

To add a comment, right-click on the blocks and select “Add Comment”.

After that, a question mark will appear in the corner of the block and you can add text. You can view the comment by clicking on the question mark.

DEBUGGING TIPS

NOTIFIERS AND LABELS

The Notifier component 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.

ShowAlert example

The easiest way to use the Notifier is to add ShowAlert blocks with information for you to see that certain blocks have run (or not).

In addition to messages, you can display information like the value of a variable or the position of an ImageSprite.

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.

DO IT

 The Do it feature is another great tool for debugging.

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.

Do it lets you run a block without having to interact with the app itself, so you can see the current value of a variable or element. 

 

Just drag out a “get global” variable block and right-click. Select “Do It” from the dropdown menu and that block of code will execute.

Do it on pulldown menu

A yellow Do It box will appear above the box with the result. This can work for any component property too!

Do it block 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.

 

setting a list value with do it

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.

updating a listview with do it

USE TEST DATA

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

Let’s say you are making an app that displays nearby restaurants. You are using Google Sheets to store the restaurant information.

You can start with just one or two test restaurants and test your app to make sure it works.

Once it’s tested and working, you can add the complete set of restaurant data to your Google sheet.

CHANGE PROPERTIES

If you are live testing your app, you can change a property value in the Designer while you run the app and see its effects.

Sometimes this can help  uncover an issue.

For example, you might be coding a game. A sprite’s position doesn’t look right to you on your phone when it’s running.

While live testing, you can

  1. Go to the Designer
  2. change the X and Y values of the Sprite
  3. The position of the Sprite on the screen in the running app will change. 

Use this to test and understand coordinates on your screen.

game with sprites

ACTIVITY 1: FIX THE BUG

Estimated time: 20 minutes

Fix bugs in the Timer App

This Timer App has a couple of bugs in it.

  1. Load the app into App Inventor.
  2. Connect to the emulator or device to test the app.
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. Try entering 0 or a negative number for number of seconds. What happens?
  5. Fix the bugs using conditional blocks!

ACTIVITY 2: ADD A COMMENT

Estimated time: 10 minutes

Add a comment to your App Inventor project

If you have started your final app for Technovation, use that app for this activity. Otherwise, use the Timer App from Activity 1.

Add at least one comment to your app explaining what a group of blocks does. Pick a group of 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.

REFLECTION

These tips can help you as you start to code your mobile app for your Technovation project.

But remember…

Photo courtesy DKJS Franziska Schmitt
Coding is not easy.
Chances are good that your app won’t work perfectly to start!
Code in small chunks.
Celebrate when you get a small part of your app to work.
Take breaks! Sometimes just walking away from your computer for a few minutes can give you the fresh perspective you need.
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Debugging – the process coders use to figure out why their code isn’t working and fix it
  • Version Control saving working versions of your app as you make progress
  • 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

ADDITIONAL RESOURCES

Different Components in App Inventor

  • Review different components you can use in App Inventor or Thunkable
  • Find one component that can help your app
  • Research a tutorial and code at least one component into your app

These are the activities for this lesson:

SMARTPHONE COMPONENTS

It’s time to choose and code the components, some of which include sensors, that you want your app to use.  The various components available will allow your app to do many different things – be sure to choose the ones that are right for you! 

This lesson is a reference for you to learn about many components you can use in your app. 

You probably have chosen your platform by now, but we’ll list all the components for both App Inventor and Thunkable, just so you can be aware of available components.

Look for the components that you can use to implement the features you have planned for your app.

girls looking at laptop

COMPONENT LIST BY CATEGORY

The components that follow are ones beyond the standard User Interface components, that allow the user to interact with the app. 

This is not a complete list, but does cover most of the currently available components. Thunkable and App Inventor continue to add more features and components all the time.

The information below is also available in this document.

If your app needs features related to things like photographs, audio, and video, these components will be very helpful for you.
Feature Description App Inventor Thunkable
Allows the user to take videos. You can use it for social apps, video sharing apps, or anytime else that you would want your user to record a video. Camcorder Camera
Allows the user to take pictures. This can be useful for apps that allow users to set profile pictures or take pictures to share or save to a gallery. Camera Camera
Allows the user to pick an image from their photo library. It will allow users to pick photos that they have taken outside of using your app. ImagePicker Files (photo library)
Allows you to embed a video into the app that the user can click on. The video must be a .wmv, .3gp or .mp4 and not be bigger than 1MB. VideoPlayer Video
Allows you to translate text into another language. It requires that your app has internet access since it relies on external translation services. Translator Speech
Allows a user to record a sound or noise. SoundRecorder Sound
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Very similar to the Player component, but is best for short sounds, like notification “dings”. Sound Sound
Translates the user’s speech into text. This is especially useful for apps that require hands-free capabilities. SpeechRecognizer Speech
This component does the reverse of SpeechRecorder; it allows users to enter text and the app will read it out loud. TextToSpeech Speech
You can make a JSON animation play in your app. Not available Animation
If you need your app to make phone calls, send emails, text and share certain types of information, these social components may be helpful.
Feature Description App Inventor Thunkable
Displays the user’s contacts and allows users to choose someone from that list. ContactPicker Not available
Allows the user to input an email address from the user’s contact list. EmailPicker Not available
Allows the user to pick a phone number from a phone contact list. PhoneNumberPicker Not available
Allows you to embed a video into the app that the user can click on. The video must be a .wmv, .3gp or .mp4 and not be bigger than 1MB. VideoPlayer Video
Enables the user to make a phone call from your app. PhoneCall Share
Allows the user to send a text message to another user’s phone through your app. Texting Share
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Allows users to share messages, images, or other content in your app with other apps on the user’s phone, like email and messaging. Sharing Share
Allows communication between your app and Twitter. Users can search for tweets, send and receive messages, get a list of followers, and more. Twitter Not available
Thunkable allows you to add ads to your app. All apps must be first approved by Thunkable before they can be downloaded or published. Not available Ads
These components allow your app to interact with entities outside of your app, like the web, devices, and other apps.
Feature Description App Inventor Thunkable
Allows your app to start up other apps, like Camera or Google Maps, or user-created apps installed on phone. ActivityStarter Open link (Control block)
Allows you to embed a map into your app. App Inventor includes components like Markers and Shapes that can be added to a map. These features are added in code in Thunkable. Maps Maps
Allows users to view web pages within your app. WebViewer Web Viewer
Enables your app to send and get information to and from external websites. Web Web API
Enables the user to make a phone call from your app. PhoneCall Share
These components enable your app to connect with Bluetooth devices. Bluetooth Client, Bluetooth Server, BlueToothLE (extension) Bluetooth Low Energy
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Used to collect data from external sources (sensors, web, data files) and display them in chart form. Chart, ChartData2D Not available
Can be used to connect to serial devices like Arduino. Serial Not available
Allows users of your app to sign up with a username and password. This requires you first set up a Firebase account. Not available Sign-in
Allow you to embed a pdf file within your app Not available PDF Reader
If your app needs to gather information about the world around it or the user, here are some sensors that App Inventor and Thunkable can access.
Feature Description App Inventor Thunkable
Can determine if the phone is shaking and if it’s being held upright or upside-down. This capability is very useful when you want the screen to reorient in response to how the phone is being held, or if you want the app to react to shaking. AccelerometerSensor Accelerometer
Uses the accelerometer sensor to measure how many steps the user holding the phone takes, and can also estimate distance traveled. Pedometer Not available
Can sense if the phone is being tilted. It is more precise than the accelerometer and can measure how much the orientation of the phone has changed. GyroscopeSensor Gyroscope
Used to measure magnetic flux density. Not all phones support this capability. MagneticFieldSensor Magnetometer
Allows your app to get the current time or use a timer. This can be useful for setting a timed alarm or using a timer. Clock Timer
Collects the latitude and longitude of the phone’s location. This sensor can be useful anytime you need to search for points of interest near the user. LocationSensor Location Sensor
Tells if the phone is in close proximity to an object. It is often used to tell if the user has the phone close to their ear. Not all phones can support this capability. ProximitySensor Not availalbe
Allows your app to read a barcode. BarcodeScanner Camera
Measures the ambient air pressure. Barometer Not available
Measures the relative ambient air humidity. Uncommon for most mobile devices. Hygrometer Not available
Measures the light level. LightSensor Not available
Allows your app to share data with other NFC (Near-field Communication) -equipped devices. NearField Not available
Provides information about the device’s physical orientation in three dimensions: roll, pitch, and azimuth. OrientationSensor Not available
Measures the ambient (external) temperature. Thermometer Not available
Your app can store data within the opp, on the device, and in the cloud with these components.
Feature Description App Inventor Thunkable
Block that lets you update and store information within the app. Any information is erased when the app is closed. Variable app Variable
Allows your app to store and update information locally on the mobile device and use it within the app. Data can be stored and retrieved between runs of the app. In Thunkable, DataViewer and DataViewerGrid can store data locally using the “Create your own Table” option. TinyDB stored Variable DataViewer List Data Viewer Grid
Allows your app to store, retrieve, and update data in the cloud so data can be shared between different users of the app. Thunkable offers cloud variables using Firebase. DataViewer and DataViewerGrid can be linked to Airtable, Google Sheets, and Webflow. App Inventor’s Spreadsheet component links to Google Sheets. CloudDB FirebaseDB Spreadsheet cloud Variable – (Firebase) DataViewer List DataViewerGrid
Use machine learning models for classification and generative AI tools within your app.
Feature Description App Inventor Thunkable
Allows communication with an AI chat bot, OpenAI’s ChatGPT. Chatbot Open AI Services (text completion)
Allows you to include DALL-E in your app to create and edit images. Imagebot Open AI services (image generation)
Allows you to create your own machine learning model (image, sound, pose) and use it in your app. PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine (note these all require you to add the extension) Not available
Enable drawing in an app, and add sprites to animate and create games.
Feature Description App Inventor Thunkable
Adds an area on the screen where users can draw. This is also where you can add sprites that you can animate. Canvas Canvas
These components are the elements that can be animated and interacted with inside a game or animation ImageSprite
Ball
Sprite

You will add components in the Designer window of App Inventor. You will have to click on a category in the palette to open the drawer to show the components.

app inventor component palette

ACTIVITY: LEARN A NEW COMPONENT

Estimated time: 60 minutes

Choose a component to learn about

  1. Choose at least one component or sensor that you think you will use in your app.
  2. Find documentation and/or a tutorial to use the component in an app.
  3. You can start here:
  4. Code an app using that new component

One of the best skills you can learn as a programmer is how to find resources to help you when you are stuck or need to learn how to use something. 

This activity is practice!

It may not exactly align with the app you want to build, but practicing coding with components will help when you come to build your own app.

REFLECTION

This lesson is a reference for all of the components you can use to build your app. Finding a tutorial or documentation to learn how to use your component is not easy!

2 girls coding
How did you find the tutorial or information you needed for the activity?
How will you use your work from this lesson in your app?
Where else in your life where you can use this “find your own tutorial” skill?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • User Interface Components – standard components a user would interact with like buttons, labels, and text boxes
  • Media Components – examples of media components are photos, audio, and video.
  • Sensors  – different types of devices installed on a phone that gathers data for various purposes
  • Social Components – features that enable users to make phone calls, send emails, text and share things through your app
  • Connectivity Components – features that allow your app to interact with places outside of your app, like the web and other apps
  • Storage Components – blocks and components that allow you to store information in the app, on the device, and in the cloud
  • AI Components – components that allow you to use machine learning models or generative AI tools within your app

ADDITIONAL RESOURCES

Other helpful tutorial sites for App Inventor:

 More general resources:

App Inventor: Coding Conditionals

  • Learn about conditional statements and how to write them
  • Practice writing conditional blocks with a simple app

These are the activities for this lesson:

CONDITIONS

Mobile apps don’t run exactly the same way every time you open it. It runs based on your interactions as a user, which are not always exactly the same.

We have already learned about event handlers, and how they trigger certain blocks of code to run when events happen.

In addition to event handlers, there are other ways that apps decide what particular blocks of code to run, and when. These are called conditions. And the blocks associated with conditions are called conditional blocks.

man at fork in the road

EXAMPLE

girl holding umbrella in the rain

A real life example of a condition is the weather.

You make decisions based on that condition.

If it is raining, you use an umbrella.

The condition is “raining”.

  1. You determine if that condition is true or false, by checking a weather app or looking out the window.
  2. You then take action based on the condition.
    1. If it’s raining, you take your umbrella.
    2. Otherwise, you skip it and go out the door.

You make all sorts of decisions based on conditions around you. Mobile apps also make decisions based on conditions within the app. For example, if the user inputs a wrong password, the app displays a message telling the user so and prevents them from going further in the app.

Conditionals are fundamental to all programming languages, including App Inventor.

The structure of a conditional block in App Inventor is

if condition then

Conditional blocks can be found in the Control drawer of the Blocks Editor.

App Inventor conditional blocks

Here is how these blocks work.

app inventor if block

The condition snaps
to the if.

If the condition is true, the code in the then slot runs.

 If the condition is false,
the code is skipped and nothing happens.

app inventor if then else block

With if/else, if the condition is true, the code in the then slot runs.

If the condition is false, the code in the else slot runs.

app inventor if else if else block

With if/else if blocks, if the first condition is true, the code in the first then slot runs.

If the first condition is false, then the next condition is checked.

 If the second condition is true, the code in the second then slot runs.

 If the second condition is false, the code in the else slot runs.

If both conditions are false, the block is skipped and nothing happens.

You can change your conditional blocks by clicking the blue gear icon.

Then drag more else if or else blocks in.

The else if block allows you to test for multiple conditions in one block.

app inventor conditional block
app inventor if-else block
app inventor if else-if else block

If it’s raining,
     use umbrella.

One condition, one option. Otherwise, do nothing.

If the temp is greater than 22C, 
   then open window
else close window.

One condition, but two options.
One for true, one for false.

If the temp is greater than 22C
     then open window
else check if temp is less than 7C 
    If so, turn on heat
else, just close the window. 

Two conditions checked,
but 3 options.

IMPORTANT! The order in which you test multiple conditions does matter. Once a condition is found to be true, it executes that code and skips over the rest.

So, in the third example, if the temp is greater than 22, it opens the window and doesn’t check the second if block.

LET'S TRY A CODING EXAMPLE

The Counting Game is a simple app where you (and possibly an opponent) keep adding numbers to a running total, and try to hit 100 exactly. If you go over, you lose.

animation of counting game running

ACTIVITY: COUNTING GAME

Estimated time: 20 minutes

Complete the Counting Game using Conditionals

Open the starter project in App Inventor and make your own copy by pressing the "Load App Into App Inventor" link.

Then follow the instructions in the worksheet to complete the app!
Open worksheet

Hopefully you have successfully coded the Counting Game using conditional blocks!

If you wish to see a possible solution, click this button.

Checktotal function blocks

CHALLENGE

Add a Reset button to the app.

The Reset button should set the total back to zero so the user can play again.

REFLECTION

Can you think of conditionals that you use to make decisions every day? Here are some examples:

post with different directions to go
If it is cold outside, then wear a jacket.
If your phone is dead, then charge it.
If you are sick, then go to the doctor, else go to school.
If your clothes are dirty, then wash them, else put them away in your closet.
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Conditions –  a state or situation something is experiencing
  • Conditionals statements or blocks –  a way for computers to make decisions based on conditions
  • if/else – a common form of conditional statements in programming; tells the computer that if the condition is true, do this. Else, if the condition is false, do another thing

ADDITIONAL RESOURCES

If you want a little more practice, check out this example from Professor Dave Wolber. He uses a conditional to start and pause a sound file in the Soundboard app.

Algorithms (optional lesson)

This is an optional lesson for additional learning

  • Learn what an algorithm is
  • Practice making an algorithm

These are the activities for this lesson:

WHAT IS AN ALGORITHM?

Most kids who grow up in North America love peanut butter and jelly sandwiches. Watch Johnna and Evan give their father, Josh, instructions to make a sandwich.

Source: “Learning about Artificial Intelligence: A hub of MIT resources for K-12 students”, MIT Media Lab

In the video, Josh, the dad, won’t do anything unless he is told to in simple step-by-step commands. Just like a computer, he only understands exact and precise instructions.

Johnna and Evan gave their father an algorithm to make a sandwich, with mixed results.

An algorithm is a set of step-by-step instructions. In order to make a computer do something, you need to give it an algorithm.

In Technovation Girls, you will learn how to write algorithms to make a mobile app!

Let’s practice writing explicit instructions for someone to follow.

ACTIVITY1: WRITE AN ALGORITHM

There are two options here for an algorithm activity. You can do one or the other, or both. The first activity is a physical one (dancing!) so a good option if your team is meeting in person. If you are meeting virtually, you might want to try the second option, a drawing activity. Click on either activity to read instructions.

REFLECTION

Now you have a sense of what it takes to create an algorithm. You’ll create your own algorithms to tell your mobile app what to do.

recipe book
Would you approach giving instructions to someone else differently now?
If you could rewrite your algorithm from the activity, what parts would you change?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Algorithm – step by step instructions that explain how to do something

ADDITIONAL RESOURCES

If you want a little more information about what an algorithm is, this is a good video to watch.

Exploring Different App Builders

  • Learn about different app builders and programming languages
  • Get set up to use an app builder to build a mobile app

BUILDING A MOBILE APP

For your Technovation project, you will be building an app that can run on a mobile device. Web apps are an option, but here we’ll start to explore building a mobile app using block-based coding. If you are new to coding, this is the place to start!

To make a mobile app, you will use an App Builder. App Builders are also called coding platforms. 

Coding platforms are software that either run on your computer, like Android Studio, or online websites like MIT App Inventor. They allow you to write code, whether using blocks, like App Inventor, or text, like Android Studio. Your code gets compiled, or turned into machine code, something that computers (and mobile phones) understand. Once converted to machine code, the computer or phone can run the code to follow your instructions.

APP BUILDERS

App Builders usually have a drag and drop interface that allows you to build apps by using blocks instead of typing code. Even though the code looks simple in app builders, you will still be learning valuable coding concepts.

If you are new to coding, we recommend you use either App Inventor or Thunkable for your programming language. You are not limited to using these platforms for your project, but these are the ones we will support in this curriculum.

App Inventor bee logo
MIT App Inventor
Thunkable beaver logo
Thunkable

To choose between App Inventor and Thunkable, you should base your decision on which platform has better support for the features you want to include in your app. Check out the following table to help decide.

Feature App Inventor Thunkable
Can run and test project on both iOS and Android Yes Yes
Open Source* Yes No
Free Yes Free with limits, maximum 10 apps, all are public
Available in many languages other than English Yes No
Gallery with example projects With phone over wifi, or with emulator Built-in preview in browser (easier to test with), or with phone
Live Testing Yes Yes
Build app to install on phone or upload to App/Play Store Android only Limited to 2 downloads per month
User Interface Basic More options and control
Maps More options and control Basic
Sprites and animations for games Easier to use Works but is more complicated
Storing data on mobile device TinyDB (tag/value pairs) Stored variables
Storing & sharing data in the cloud CloudDB, Firebase, Google Sheets Airtable, Firebase, Google Sheets, Media DB (many more options, easier to implement)
Artificial Intelligence Personal Image Classifier, Personal Audio Classifier, Face Mesh, Posenet (many more options) Image Recognizer (pre-built Microsoft image classifer)
Generative AI ChatGPT, Dall-E ChatGPT, Dall-E
Data Science/Charts Built-in chart component, regression models Use external API

* What is Open Source?

Open source means that all the code used to create the app builder is free and open to use on the web. This may be important to you if you are concerned about losing your work if an app builder stops being supported or goes out of business. It may also be important to you if you want to find a work around to use an app builder offline

OTHER LANGUAGE OPTIONS

There many other programming languages that you can use to build apps besides App Inventor and Thunkable, mostly text-based. 

 Below are four top languages other than App Inventor or Thunkable that Technovation participants used last season. You are not limited to these languages and can use any programming language you are comfortable with. You will need to provide the source code files with your submission.

Programming Language Create apps for Coding Platform Starting Resources
Java Android Android Studio
Swift iOS XCode
Dart (Flutter SDK) Android/iOS Android Studio
Streamlt (Python) Web apps (any browser) Anaconda (Windows) or any text editor/IDE

Not sure which coding platform/language to use?  Listen to these Technovation alumnae talk about what coding platform they chose and why.

GETTING STARTED

To code mobile apps for your Technovation project, you will need:

  • a computer or laptop
  • Internet access
  • Mobile device is optional but highly recommended for testing. Both Android and iOS devices can be used.
To get started, you’ll have to set up your computer and mobile device so you are ready to code a mobile app!
 

ACTIVITY 1: SETTING UP YOUR CODING PLATFORM

Estimated Time: 30 minutes

If you are using something other than Thunkable or App Inventor, use this time to download all necessary software to get your computer set up by following the resource links above and following setup instructions.

For Thunkable and App Inventor coders, click on the appropriate tab below and follow the instructions to get your workstation set up to begin coding! Feel free to try both platforms to see how you like each one.

Part 1: Signup
  1. In your browser, visit http://ai2.appinventor.mit.edu. Sign up with a Gmail account. If you don’t have a Gmail account, make one now.
  2. Once you have logged in and see the splash screen, click Continue.
  3. Click on Start a Blank Project to open a new project.
  4. Take a moment to look around the platform.
Part 2: Setup to Test
You will need to test your app as you build it to make sure it works correctly. There are multiple options found here

Part 1: Sign Up

In your browser, visit the Thunkable Signup page to sign up for a free account. 

Part 2: Setup to test

You can test your app in Thunkable right in the browser using Web Preview. At some point you will want to live test your app on your mobile device. You will need to install the Thunkable Live App on your device.  

ACTIVITY 2: CODING YOUR FIRST APP

Estimated Time: 30 minutes

Now that you’ve got your computer and mobile device set up for your app builder, let’s jump right in with a starter tutorial!

Click on the tab below for your chosen coding platform and follow the instructions. 

Instructions:

Make theTalk to Me app. Click here to follow a written tutorial in the App Inventor platform.

If you prefer video, follow along with this tutorial:

Instructions:

Make theTalk to Me app by following this video tutorial by Dave Wolber.

WANT MORE?

If you have time, try another tutorial on your chosen coding platform:

REVIEW OF KEY TERMS

  • App Builder –  program that usually has a drag and drop interface that lets you build apps without typing code 
  • Programming Language – a way to talk to a computer, or mobile phone, to tell it to do things
  • Coding platform – program or website that allows you to write programs or apps
  • Compile – convert computer code into machine code that can be understood by a computer

REFLECTION

Congratulations on making your first app! Here are some reflection questions for you to consider with your team and with your mentor.

Sunset and reflection over lake
What are some things from this lesson that you think will be useful in creating your app? Why do you think so?
How do you think the block language is different from the language you are used to using in everyday life?
Previous slide
Next slide

Thunkable: Closer Look

  • Learn about event-driven programming
  • Understand the different types of blocks in the Thunkable platform

These are the activities for this lesson:

EVENTS

Mobile apps are based on event-driven programming. 

Event driven programming is based on events, rather than running code from top to bottom. Some programs just execute all their code at once, but mobile apps work based on how the user interacts with it.

Mobile apps work based on events, which are things that happen to trigger code to run. An example would be – the user clicks on a button. The event is when the user clicks. And the code to run when that event happens is called the event handler.

STOP AND DISCUSS

Can you think of some ways you interact with your phone and what your phone does? Here are a few to get started:

  • When you click an icon for an app, the app opens.
  • When you click “send” for a text message, it sends the message and makes a sound.
  • When you try to log into an app, the app asks for a password.
girls discussing

Let’s start by looking at the different parts of the Thunkable platform.

Thunkable has two windows you use to build your app. Clicking on Design in the top menu bar (top left of screen) takes you to the Designer, where you design the user interface. The user interface is everything in your app that a user can interact with. These things can be buttons, navigation bars, text boxes, pictures, etc.

THUNKABLE DESIGNER WINDOW

Thunkable designer window
1

Component List

All components you have added to your app appear here, organized hierarchically by screen.

3

Workspace

You drag your components onto the phone in this central workspace. You have control over where the components are placed as well as their size.

2

Add Components

You drag visual components from this panel into the workspace. 

4

Properties Panel

The Properties panel allows you to set the properties for each component. Properties are different characteristics you can set for each component, like its width, height, and color. Select a component on the mockup and then you can change any of its properties in the Properties panel.

When someone uses your app, they will interact with your user interface, by clicking buttons, entering text etc. It is up to you to decide what your app should do and to program it to do those things.

BLOCKS EDITOR

Clicking on “Blocks” takes you to the Blocks Editor window, where you do all your coding. You drag blocks from the panel on the left into the workspace in the center of the screen.

Thunkable blocks editor
1
Blocks Palette

On the left, you will find the blocks palette. At the top are the UI components. Each component in your app has its own set of blocks. You will click on the component to show the blocks you can drag into the workspace.

4

Coding Workspace

This is your workspace where you drag all your blocks. You can move them around, snap them to and into each other. You can also delete any blocks you don’t need.

2

Core Blocks

The core blocks are standard coding blocks to use in your app. They are categorized according to their type and color coded.

3

App Features

These are invisible features you can add to your app. You can click on one to add it, and then set properties and drag out code blocks for that feature.

EVENT HANDLERS

Event handler blocks in Thunkable are a gold color and are shaped as an open block, so you can snap blocks inside of it. Those blocks run only when that event happens.

Thunkable button click event block

When Button is Clicked
You’ve already used this. When the user clicks a particular button, you would want the app to do something, like open another screen, or send a message.

Thunkable list-viewer item click event block

When ListViewer Item is Clicked
A ListViewer is like a dropdown menu, so this event happens when the user chooses an item in the list. The app should do something with the item that is clicked.

Thunkable screen opens event block

When a Screen opens
This event is used when you want to do something when the app first starts or the app switches to another screen. You can set variables, or update information from the cloud.

FUNCTIONS

Functions are blocks of code that do something. They can be run many times within an app. In Thunkable, functions blocks are colored purple. Some languages refer to functions as methods, or procedures. They do something, so you can think of them as action blocks.

function blocks

Say
This function lets the app say or speak whatever text you want it to speak.

Timer Start & Sound Play
The Timer component can start counting.  And the app can play a sound.

SETTERS AND GETTERS

Green blocks relate to the component’s properties. 

The light green blocks are called getters, because you are getting the value of the property.

Thunkable getter blocks

Text of Button1
The Text is gotten and saved in the variable numberChoice.

Timer1's Time in seconds
The value of the timer's seconds is gotten and stored in Lablel1's text, so the value is displayed in the label. 

Setters are darker green, and they can be snapped to, with an open slot on the end. This allows you to set the value of the property.

Thunkable setter blocks

Text of Button1
Button1’s Text is set to the words “Click me!”

Label1.Text
Label1’s Text is set to Timer1’s Time in Seconds.

Timer1's IntervalMilliseconds
Timer1’s IntervalMilliseconds (how often it goes off) is set to 3000, or 3 seconds.

DATA BLOCKS

When you use setter blocks, you might use some other built-in blocks that represent data, or information that can be used in your app. Some examples of data blocks that can be used are seen below.

thunkable math blocks

Numbers
Number values can be used as data in an app. These blocks can be found in the Math drawer in the core section of the blocks palette.

thunkable text block

Text or Strings
Text, sometimes called strings, can be used as data. These are letters, words, and sentences that can be used in an app. The blocks are found in the Text drawer of the Core section of the blocks palette.

thunkable boolean blocks

Boolean
This data type has only two possible values – true or false.  These blocks can set or test the “state” of something and will be used in conditionals, which you will learn more about.

ACTIVITY: SOUNDBOARD TUTORIAL

Estimated time: 45 minutes

Follow the video tutorial below

Download media files here (watch Dave’s video for more details)
Then follow Dave's video below to use Event Handlers and Functions to play speeches in your app.

CHALLENGE

You have:

  •  used Event Handler blocks
  •  used Function blocks

Let’s try using some setter and getter blocks.

Add to your Soundboard app:

When the user clicks on any picture to play the associated speech, change the background color of the screen. 

You can change it to one particular color, but then you cannot easily change it back to the starting color, black, so instead, change the screen’s background to a random color. 

 Hint: Check the Color drawer to see how to get a random color.

REFLECTION

Now that you’ve learned a little bit more about the different code blocks, think about your app solution:

What components will you need for your app?
What events will need event handlers in your app?
What are the actions that will happen when the events are triggered in your app?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • User Interface – everything in your app that a user can interact with
  • Designer – window where you can add components to your app and design how they look
  • Blocks Editor – window where you code the blocks for your app
  • Event – something that happens to trigger code to run
  • Event Handler– code blocks that tells your app what to do when an event happens
  • Event Driven Programming – Programming based on events, rather than running entire code from top to bottom
  • Functions – a block of code that runs, and can be run multiple times

ADDITIONAL RESOURCES

Check out more of Dave Wolber’s Thunkable tutorials at draganddropcode.com

Student Ambassador Meenakshi Nair’s free Thunkable course on Udemy is another great resource!

App Inventor: Closer Look

  • Learn about event-driven programming
  • Understand the different types of blocks in the MIT App Inventor platform

These are the activities for this lesson:

EVENTS

Mobile apps are based on event-driven programming. 

Event driven programming is based on events, rather than running code from top to bottom. Some programs just execute all their code at once, but mobile apps work based on how the user interacts with it.

Mobile apps work based on events, which are things that happen to trigger code to run. An example would be – the user clicks on a button. The event is when the user clicks. And the code to run when that event happens is called the event handler.

STOP AND DISCUSS

Can you think of some ways you interact with your phone and what your phone does? Here are a few to get started:

  • When you click an icon for an app, the app opens.
  • When you click “send” for a text message, it sends the message and makes a sound.
  • When you try to log into an app, the app asks for a password.
girls discussing

Let’s start by looking at the different parts of the App Inventor platform.

App Inventor has two windows you use to build your app. Clicking on the Designer button (top right of screen) takes you to the Designer, where you design the user interface. The user interface is everything in your app that a user can interact with. These things can be buttons, navigation bars, text boxes, pictures, etc.

APP INVENTOR DESIGNER WINDOW

App Inventor designer window
1

Palette

You choose components from the Palette to add to the Viewer, which is in the middle of the window. There are several drawers of components to explore and use.

2

Viewer

You drag your components onto the Viewer. Components are added from the top down, on the left. You have to use Layout components and alignment to get more control over exactly where your components appear.

3

Components List

This list gives you a heirarchical list of the elements on your screen. You can select them by clicking on them in the Viewer or in this list.

4

Properties Panel

The Properties panel allows you to set the properties for each component.

5

Non-visible components

Non-visible components won’t appear on the screen but are still part of the app. They appear below the screen when you drag and drop them.

When someone uses your app, they will interact with your user interface, by clicking buttons, entering text etc. It is up to you to decide what your app should do and to program it to do those things.

BLOCKS EDITOR

Clicking on “Blocks” takes you to the Blocks Editor window, where you do all your coding. You drag blocks from the panel on the left into the workspace in the center of the screen.

App Inventor blocks editor
1
Blocks Palette

On the left, you will find the blocks you can drag into the workspace. They are in categories/drawers like Control and Logic.

3

Viewer

This is your workspace where you drag all your blocks. You can move them around, snap them to and into each other. You can also delete any blocks you don’t need.

2

Component Blocks

Each component in your app has its own set of blocks. You will click on the component to display the blocks you can then drag into the workspace.

EVENT HANDLERS

Event handler blocks in App Inventor are a gold color and are shaped as an open block, so you can snap blocks inside of it. Those blocks run only when that event happens.

button click event block

When Button is Clicked
You’ve already used this. When the user clicks a particular button, you would want the app to do something, like open another screen, or send a message.

screen1 orientation changed event block

When Screen Orientation is Changed
If the user turns their phone from portrait (vertical) to landscape (horizontal), you might want to do something, like change the layout of the screen, or the size of components.

When Slider Position is Changed
A slider lets the user drag it to choose some value along it. This might trigger a change to another component. For example, you might increase the size the pen in a drawing app using a slider.

FUNCTIONS

Functions are blocks of code that do something. They can be run many times within an app. In App Inventor, functions blocks are colored purple. Some languages refer to functions as methods, or procedures. In fact, App Inventor generally refers to these as procedures. They do something, so you can think of them as action blocks.

function blocks

TextToSpeech.Speak
The TextToSpeech component can say or speak whatever text you want it to speak.

Camera.TakePicture
The Camera component can take a picture with the phone.

Sound.Play
The Sound component can play a sound.

SETTERS AND GETTERS

Green blocks relate to component’s and their  properties. 

The light green blocks that can snap to another block are called getters, because you are getting the value of the property.

Setters are darker green, and they can be snapped to, with an open slot on the end. This allows you to set the value of the property.

app inventor setter and getter blocks

Text of Button1
The Text of Button1 is gotten and stored in the variable global greeting.

Text of Button1
The Text of Button1 is set to the words “I love coding.

Text of Label1
The Text of Label1 is set to the Source of Sound1.

Source of Sound1
Sound1's Source is gotten and stored in Label1's Text property, Setting the text of a label essentially displays the value in the label.

Text of Label1

TextToSpeech gets the contents of Label1's Text and speaks it.

DATA BLOCKS

When you use setter blocks, you might use some other built-in blocks that represent data, or information that can be used in your app. Some examples of data blocks that can be used are seen below.

app inventor math blocks

Numbers
Number values can be used as data in an app. These blocks can be found in the Math drawer in the blocks palette.

Text or Strings
Text, sometimes called strings, can be used as data. These are letters, words, and sentences that can be used in an app. The blocks are found in the Text drawer of the Blocks palette.

app inventor boolean blocks

Boolean
This data type has only two possible values – true or false.  These blocks can set or test the “state” of something and will be used in conditionals, which you will learn more about.

ACTIVITY: SOUNDBOARD TUTORIAL

Estimated time: 45 minutes

Follow the video tutorial below

Download the starter project here and import it to App Inventor,
and follow Dave’s instructions in the video.

Note that the video starts at 1:11 to skip over loading instructions. These instructions are not needed if you downloaded the starter project using the link above.

CHALLENGE

You have:

  •  used Event Handler blocks
  •  used Function blocks

Let’s try using some setter and getter blocks.

Add to your Soundboard app:

When the user clicks on any picture to play the associated speech, change the background color of the screen. 

You can change it to one particular color, but then you cannot easily change it back to the starting color, black, so instead, change the screen’s background to a random color. 

Hint: Check the Color drawer and look for the make a color block. Then look in the Math drawer for a random integer block. Colors are made up of 3 numbers, RGB for red, green, blue, that range from 0-255.

REFLECTION

Now that you’ve learned a little bit more about the different code blocks, think about your app solution:

What components will you need for your app?
What events will need event handlers in your app?
What are the actions that will happen when the events are triggered in your app?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • User Interface – everything in your app that a user can interact with
  • Designer – window where you can add components to your app and design how they look
  • Blocks Editor – window where you code the blocks for your app
  • Event – something that happens to trigger code to run
  • Event Handler– code blocks that tells your app what to do when an event happens
  • Event Driven Programming – Programming based on events, rather than running entire code from top to bottom
  • Functions – a block of code that runs, and can be run multiple times

ADDITIONAL RESOURCES

Check out more of Dave Wolber’s App Inventor beginner tutorials at appinventor.org

Thunkable: Coding Conditionals

  • Learn about conditional statements and how to write them
  • Practice writing conditional blocks with a simple app

These are the activities for this lesson:

CONDITIONS

Mobile apps don’t run exactly the same way every time you open it. It runs based on your interactions as a user, which are not always exactly the same.

We have already learned about event handlers, and how they trigger certain blocks of code to run when events happen.

In addition to event handlers, there are other ways that apps decide what particular blocks of code to run, and when. These are called conditions. And the blocks associated with conditions are called conditional blocks.

man at fork in the road

EXAMPLE

girl holding umbrella in the rain

A real life example of a condition is the weather.

You make decisions based on that condition.

If it is raining, you use an umbrella.

The condition is “raining”.

  1. You determine if that condition is true or false, by checking a weather app or looking out the window.
  2. You then take action based on the condition.
    1. If it’s raining, you take your umbrella.
    2. Otherwise, you skip it and go out the door.

You make all sorts of decisions based on conditions around you. Mobile apps also make decisions based on conditions within the app. For example, if the user inputs a wrong password, the app displays a message telling the user so and prevents them from going further in the app.

Conditionals are fundamental to all programming languages, including Thunkable.

The structure of a conditional block in Thunkable is

if condition do

Conditional blocks can be found in the Control drawer of the Blocks Editor.

thunkable conditional blocks

Here is how these blocks work.

Thunkable conditional blocks

The condition snaps
to the if.

If the condition is true,
the code in the do slot runs.

With if/else blocks, if the condition is true, the code in the do slot runs.

If the condition is false, the code in the else slot runs.

If the condition is false, the code is skipped and nothing happens, or the code continues to run after the if block.

You can change your conditional blocks by clicking the blue gear icon.

Then drag more else if or else blocks in.

The else if block allows you to test for multiple conditions in one block.

thunkable conditional example block
if else block
if else-if else block

If it’s raining,
     use umbrella.

One condition, one option. Otherwise, do nothing.

If the temp is greater than 22C, 
   then open window
else close window.

One condition, but two options.
One for true, one for false.

If the temp is greater than 22C
     then open window
else check if temp is less than 7C 
    If so, turn on heat
else, just close the window. 

Two conditions checked,
but 3 options.

IMPORTANT! The order in which you test multiple conditions does matter. Once a condition is found to be true, it executes that code and skips over the rest.

So, in the third example, if the temp is greater than 22, it opens the window and doesn’t check the second if block.

LET'S TRY A CODING EXAMPLE

The Counting Game is a simple app where you (and possibly an opponent) keep adding numbers to a running total, and try to hit 100 exactly. If you go over, you lose.

ACTIVITY: COUNTING GAME

Estimated time: 20 minutes

Complete the Counting Game using Conditionals

Open the starter project in Thunkable and make your own copy by pressing the "click to remix" button.

Then follow the instructions in the worksheet to complete the app!
Open worksheet

Hopefully you have successfully coded the Counting Game using conditional blocks!

If you wish to see a possible solution, click this button.

solutions for checktotal function

CHALLENGE

Add a Reset button to the app.

The Reset button should set the total back to zero so the user can play again.

REFLECTION

Can you think of conditionals that you use to make decisions every day? Here are some examples:

post with different directions to go
If it is cold outside, then wear a jacket.
If your phone is dead, then charge it.
If you are sick, then go to the doctor, else go to school.
If your clothes are dirty, then wash them, else put them away in your closet.
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Conditions –  a state or situation something is experiencing
  • Conditionals statements or blocks –  a way for computers to make decisions based on conditions
  • if/else – a common form of conditional statements in programming; tells the computer that if the condition is true, do this. Else, if the condition is false, do another thing

ADDITIONAL RESOURCES

If you want a little more practice, this video covers conditionals in Thunkable in another simple app.

Debugging your Code in Thunkable

Learn tips for debugging your code and fixing errors in Thunkable

These are the activities for this lesson:

WHAT IS DEBUGGING?

Debugging is the process coders use to figure out why their code isn’t working, and then fix it so it does work. 

The term debugging came from Admiral Grace Hopper, a pioneer in computing. She was working on the Mark II computer at Harvard University in the 1940s and a moth got stuck in the computer and stopped it from working.

Getting rid of the moth, she said they were “debugging” the system. Programmers use the term now to mean “fixing errors in my code”.

Grace Hopper

CODING TIPS

dog looking at computer

Debugging can often be the most frustrating and time-consuming part of coding, so it’s really important to leave plenty of time for it!

And also to be patient!

SMALL CHUNKS

Sometimes programmers are tempted to code their entire app in one go, then test it.

Don’t fall for that temptation!!!

If something doesn’t work correctly, which is likely, it’s hard to figure out where to even start to try to fix the error. 

chunks of chocolate

Break the coding for your app into small chunks. 

Get one thing working before starting on the next thing. 

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,

  1. Code the action for the first button
  2. Then test to make sure it works.
  3. Move onto the second button
  4. Repeat.

It’s better to fix code in one place than go back and fix it in 5 places if there is an error in your code.

5 buttons in an app

VERSION CONTROL

it began as a mistake

Let’s say you follow the “small chunks” rule and have one part of your app built and working.

You add some new code and suddenly everything stops working. 

OH NO!

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 save versions of your app as you get parts working. 

That way 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 working app.

The free version of Thunkable has a 10 project limit, so if you reach your project limit, you can delete the oldest versions before saving a new one. 

To make a copy of your project:

  1. click on the 3 dots in the upper right corner of the screen
  2. Select “Duplicate Project”  from the dropdown.
  3. Rename your saved copies to keep track. Numbering v1, v2 works well.
screenshot of thunkable duplicate project menu

COLLAPSE BLOCKS

Collapsing blocks is a way to keep your code organized, as your code workspace starts to get crowded with blocks.

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

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

screen opens block being collapsed
expanding collapsed block

Collapsed blocks will compress it down to one bar on your screen.

They 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

collapsed block

DISABLE BLOCKS

You can also disable blocks.

They remain on your screen but don’t run in the app.

With disabled blocks, you can test your app without certain code blocks. You can enable them later and they will run.

You can also disable blocks that you have used for testing only, like Alerts.

disabled alert block

Simply dragging blocks out of an event handler block will disable them and prevent them from running. Because they are not part of any event, there is no way they will ever execute. They will appear greyed out. You can always snap them back in to enable them again.

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.

To add a comment, right-click on the blocks and select “Add Comment”.

After that, a question mark will appear in the corner of the block and you can add text. You can view the comment by clicking on the question mark.

comment box above code block

DEBUGGING TIPS

ALERTS AND LABELS

You can use components, like Alerts and Labels to display information as you test. Once you have fully tested the app, you can just remove them

You add an Alert in the Blocks window by clicking the + sign next to Alerts in the Palette.

code for alerts

Set the Alert Message to the information you want to track. 

Then use Alert.Show in your code to display when an event happens.

In addition to messages, you can display information like the value of a variable or the position of a Sprite.

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.

USE TEST DATA

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

Let’s say you are making an app that displays nearby restaurants. You are using Google Sheets to store the restaurant information.

You can start with just one or two test restaurants and test your app to make sure it works.

Once it’s tested and working, you can add the complete set of restaurant data to your Google sheet.

CHANGE PROPERTIES

If you are live testing your app, you can change a property value in the Designer while you run the app and see its effects.

Sometimes this can help  uncover an issue.

For example, you might be coding a game. A sprite’s position doesn’t look right to you on your phone when it’s running.

While live testing, you can

  1. Go to the Designer
  2. change the X and Y values of the Sprite
  3. The position of the Sprite on the screen in the running app will change. 

Use this to test and understand coordinates on your screen.

game with sprites

ACTIVITY 1: FIX THE BUG

Estimated time: 20 minutes

Fix bugs in the Timer App

This Timer App has a couple of bugs in it.

  1. Copy the project.
  2. Preview the app to run it.
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. Try entering 0 or a negative number for number of seconds. What happens?
  5. Fix the bugs using conditional blocks!

ACTIVITY 2: ADD A COMMENT

Estimated time: 10 minutes

Add a comment to your Thunkable project

If you have started your final app for Technovation, use that app for this activity. Otherwise, use the Timer App from Activity 1.

Add at least one comment to your app explaining what a group of blocks does. Pick a group of 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.

REFLECTION

These tips can help you as you start to code your mobile app for your Technovation project.

But remember…

Photo courtesy DKJS Franziska Schmitt
Coding is not easy.
Chances are good that your app won’t work perfectly to start!
Code in small chunks.
Celebrate when you get a small part of your app to work.
Take breaks! Sometimes just walking away from your computer for a few minutes can give you the fresh perspective you need.
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Debugging – the process coders use to figure out why their code isn’t working and fix it
  • Version Control saving working versions of your app as you make progress
  • 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

ADDITIONAL RESOURCES

Here are some more Thunkable debugging resources.

Different Components in Thunkable

  • Review different components you can use in App Inventor or Thunkable
  • Find one component that can help your app
  • Research a tutorial and code at least one component into your app

These are the activities for this lesson:

SMARTPHONE COMPONENTS

It’s time to choose and code the components, some of which include sensors, that you want your app to use.  The various components available will allow your app to do many different things – be sure to choose the ones that are right for you! 

This lesson is a reference for you to learn about many components you can use in your app. 

You probably have chosen your platform by now, but we’ll list all the components for both App Inventor and Thunkable, just so you can be aware of available components.

Look for the components that you can use to implement the features you have planned for your app.

girls looking at laptop

COMPONENT LIST BY CATEGORY

The components that follow are ones beyond the standard User Interface components, that allow the user to interact with the app. 

This is not a complete list, but does cover most of the currently available components. Thunkable and App Inventor continue to add more features and components all the time.

The information below is also available in this document.

If your app needs features related to things like photographs, audio, and video, these components will be very helpful for you.
Feature Description App Inventor Thunkable
Allows the user to take videos. You can use it for social apps, video sharing apps, or anytime else that you would want your user to record a video. Camcorder Camera
Allows the user to take pictures. This can be useful for apps that allow users to set profile pictures or take pictures to share or save to a gallery. Camera Camera
Allows the user to pick an image from their photo library. It will allow users to pick photos that they have taken outside of using your app. ImagePicker Files (photo library)
Allows you to embed a video into the app that the user can click on. The video must be a .wmv, .3gp or .mp4 and not be bigger than 1MB. VideoPlayer Video
Allows you to translate text into another language. It requires that your app has internet access since it relies on external translation services. Translator Speech
Allows a user to record a sound or noise. SoundRecorder Sound
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Very similar to the Player component, but is best for short sounds, like notification “dings”. Sound Sound
Translates the user’s speech into text. This is especially useful for apps that require hands-free capabilities. SpeechRecognizer Speech
This component does the reverse of SpeechRecorder; it allows users to enter text and the app will read it out loud. TextToSpeech Speech
You can make a JSON animation play in your app. Not available Animation
If you need your app to make phone calls, send emails, text and share certain types of information, these social components may be helpful.
Feature Description App Inventor Thunkable
Displays the user’s contacts and allows users to choose someone from that list. ContactPicker Not available
Allows the user to input an email address from the user’s contact list. EmailPicker Not available
Allows the user to pick a phone number from a phone contact list. PhoneNumberPicker Not available
Allows you to embed a video into the app that the user can click on. The video must be a .wmv, .3gp or .mp4 and not be bigger than 1MB. VideoPlayer Video
Enables the user to make a phone call from your app. PhoneCall Share
Allows the user to send a text message to another user’s phone through your app. Texting Share
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Allows users to share messages, images, or other content in your app with other apps on the user’s phone, like email and messaging. Sharing Share
Allows communication between your app and Twitter. Users can search for tweets, send and receive messages, get a list of followers, and more. Twitter Not available
Thunkable allows you to add ads to your app. All apps must be first approved by Thunkable before they can be downloaded or published. Not available Ads
These components allow your app to interact with entities outside of your app, like the web, devices, and other apps.
Feature Description App Inventor Thunkable
Allows your app to start up other apps, like Camera or Google Maps, or user-created apps installed on phone. ActivityStarter Open link (Control block)
Allows you to embed a map into your app. App Inventor includes components like Markers and Shapes that can be added to a map. These features are added in code in Thunkable. Maps Maps
Allows users to view web pages within your app. WebViewer Web Viewer
Enables your app to send and get information to and from external websites. Web Web API
Enables the user to make a phone call from your app. PhoneCall Share
These components enable your app to connect with Bluetooth devices. Bluetooth Client, Bluetooth Server, BlueToothLE (extension) Bluetooth Low Energy
This audio component plays a sound. This works best for “long” sounds, such as songs, speeches, or poems. Thunkable has just one component, Sound, for any length audio. Player Sound
Used to collect data from external sources (sensors, web, data files) and display them in chart form. Chart, ChartData2D Not available
Can be used to connect to serial devices like Arduino. Serial Not available
Allows users of your app to sign up with a username and password. This requires you first set up a Firebase account. Not available Sign-in
Allow you to embed a pdf file within your app Not available PDF Reader
If your app needs to gather information about the world around it or the user, here are some sensors that App Inventor and Thunkable can access.
Feature Description App Inventor Thunkable
Can determine if the phone is shaking and if it’s being held upright or upside-down. This capability is very useful when you want the screen to reorient in response to how the phone is being held, or if you want the app to react to shaking. AccelerometerSensor Accelerometer
Uses the accelerometer sensor to measure how many steps the user holding the phone takes, and can also estimate distance traveled. Pedometer Not available
Can sense if the phone is being tilted. It is more precise than the accelerometer and can measure how much the orientation of the phone has changed. GyroscopeSensor Gyroscope
Used to measure magnetic flux density. Not all phones support this capability. MagneticFieldSensor Magnetometer
Allows your app to get the current time or use a timer. This can be useful for setting a timed alarm or using a timer. Clock Timer
Collects the latitude and longitude of the phone’s location. This sensor can be useful anytime you need to search for points of interest near the user. LocationSensor Location Sensor
Tells if the phone is in close proximity to an object. It is often used to tell if the user has the phone close to their ear. Not all phones can support this capability. ProximitySensor Not availalbe
Allows your app to read a barcode. BarcodeScanner Camera
Measures the ambient air pressure. Barometer Not available
Measures the relative ambient air humidity. Uncommon for most mobile devices. Hygrometer Not available
Measures the light level. LightSensor Not available
Allows your app to share data with other NFC (Near-field Communication) -equipped devices. NearField Not available
Provides information about the device’s physical orientation in three dimensions: roll, pitch, and azimuth. OrientationSensor Not available
Measures the ambient (external) temperature. Thermometer Not available
Your app can store data within the opp, on the device, and in the cloud with these components.
Feature Description App Inventor Thunkable
Block that lets you update and store information within the app. Any information is erased when the app is closed. Variable app Variable
Allows your app to store and update information locally on the mobile device and use it within the app. Data can be stored and retrieved between runs of the app. In Thunkable, DataViewer and DataViewerGrid can store data locally using the “Create your own Table” option. TinyDB stored Variable DataViewer List Data Viewer Grid
Allows your app to store, retrieve, and update data in the cloud so data can be shared between different users of the app. Thunkable offers cloud variables using Firebase. DataViewer and DataViewerGrid can be linked to Airtable, Google Sheets, and Webflow. App Inventor’s Spreadsheet component links to Google Sheets. CloudDB FirebaseDB Spreadsheet cloud Variable – (Firebase) DataViewer List DataViewerGrid
Use machine learning models for classification and generative AI tools within your app.
Feature Description App Inventor Thunkable
Allows communication with an AI chat bot, OpenAI’s ChatGPT. Chatbot Open AI Services (text completion)
Allows you to include DALL-E in your app to create and edit images. Imagebot Open AI services (image generation)
Allows you to create your own machine learning model (image, sound, pose) and use it in your app. PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine (note these all require you to add the extension) Not available
Enable drawing in an app, and add sprites to animate and create games.
Feature Description App Inventor Thunkable
Adds an area on the screen where users can draw. This is also where you can add sprites that you can animate. Canvas Canvas
These components are the elements that can be animated and interacted with inside a game or animation ImageSprite
Ball
Sprite

You will add components in the Designer window of Thunkable. You can search for a component by typing its name. 

In the new drag and drop version of Thunkable, any non-visible components will be found in the Blocks tab, not the Designer. So if you are searching for components and cannot find them, try looking for them in the Blocks tab.

Designer components list
Components in Designer Window
Thunkable components in blocks window
Thunkable non-visible components

ACTIVITY: LEARN A NEW COMPONENT

Estimated time: 60 minutes

Choose a component to learn about

  1. Choose at least one component or sensor that you think you will use in your app.
  2. Find documentation and/or a tutorial to use the component in an app.
  3. You can start here:
  4. Code an app using that new component

One of the best skills you can learn as a programmer is how to find resources to help you when you are stuck or need to learn how to use something. 

This activity is practice!

It may not exactly align with the app you want to build, but practicing coding with components will help when you come to build your own app.

REFLECTION

This lesson is a reference for all of the components you can use to build your app. Finding a tutorial or documentation to learn how to use your component is not easy!

2 girls coding
How did you find the tutorial or information you needed for the activity?
How will you use your work from this lesson in your app?
Where else in your life where you can use this “find your own tutorial” skill?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • User Interface Components – standard components a user would interact with like buttons, labels, and text boxes
  • Media Components – examples of media components are photos, audio, and video.
  • Sensors  – different types of devices installed on a phone that gathers data for various purposes
  • Social Components – features that enable users to make phone calls, send emails, text and share things through your app
  • Connectivity Components – features that allow your app to interact with places outside of your app, like the web and other apps
  • Storage Components – blocks and components that allow you to store information in the app, on the device, and in the cloud
  • AI Components – components that allow you to use machine learning models or generative AI tools within your app

ADDITIONAL RESOURCES

Other helpful tutorial sites for Thunkable

General resources