- Learn how to use variables to store data within an app
- Learn how to organize data into lists
- Use variables and lists in an app
These are the activities for this lesson:
STORING DATA
When you code an app, there usually is some information or data that you need to store, update, and access in the app.
There are 3 types of data you might need for running an app:
Variables
Store information while the app runs.
For example, a username or a game score.
Local Storage
Store information on the mobile device to be retrieved each time the app runs.
For example, a user address or high game score.
Cloud Storage
Store information on the web (cloud) so all app users can access the information.
For example, game leaderboard or chat messages.
In this lesson, we’ll focus on storing data within the app, using variables.
VARIABLES
One of the most important concepts in coding is a variable. A variable is a name for a piece of data that can change. An easy way to remember is that a variable can vary, or change in value.
There’s lots of information that is important to you every day that changes value. Here are some examples:
A variable is like a box where you can store information inside.
- You label or name the box to remember what is inside.
- When you need the information you can open the box and get what is inside.
- You can also change what is inside the box but keep the same name outside.
THUNKABLE VARIABLES
In Thunkable, you use app variables to store information while the app runs.
All variable blocks are found in the Variable drawer.
There are three basic blocks for variables. Learn about them in the tabs below.
The initialize block sets aside storage in your app for your variable. Give it a useful name.
Here a variable numberOfLessons is initialized to 0, perhaps to track how many lessons have been completed in an education app.
The set block lets you set, or update, the value of the variable.
Here, the current value is gotten and the variable is set to the current value + 1. So, if numberOfLessons was 2, the new value would be 3.
The get block lets you get the current value of the variable.
LISTS
As you build your app, you might find you have multiple pieces of data that need to be accessed within the app.
For example, instead of one username, your app might need to access all the usernames for the app. Or perhaps your app is all about animals, so there are multiple animal names and images that must be stored.
In Thunkable, you use something called a list to organize mulitiple data items in your programs. Other programming languages call them arrays, but they are essentially the same thing.
You may have made a to-do list or a grocery list before, and lists in programming are very similar.
Lists are accessed through the Core blocks palette in the Blocks Editor. There are several blocks that allow you to create, store, retrieve and update items in a list.
You store a list in an app variable, so you can give your list a name.
You should use lists anytime you have multiple pieces of information that are related.
For example, if you wanted to display the top 10 high scores for a game, you could make ten variables with names like HighScore1, HighScore2, HighScore3 and so on until you get to HighScore10.
The preferred action is to make a list called HighScores to hold all 10 high scores. Ordering, updating, and adding high scores is much easier with a single list.
Each item in a list has an index, which is its place in the list, to allow you to retrieve the item from the list.
For example, in the blocks below, the index of 2 points to the 2nd item in the Fruits list. So, Label1 will display “Bananas”.
You can also add, remove, and replace things in lists.
If you took your original Fruits list of [Apples, Bananas, Oranges] can you guess what the Fruits list will contain after you run the blocks below, in the order they are in?
Mentor Tip
Best practices: The word variable is one of the harder topics for students to learn. The box analogy really helps so if you have to do some real life labeling of boxes to illustrate things, that might be a good idea!
Guiding Questions to ask students:
Do you think there are other ways to store data other than lists or variables? What about if you want to keep two values together? Like I want a list of how many oranges and how many apples I have, something like so:
Oranges: 3
Apples: 5
I want to store this somehow. It’s a more complicated list. It’s almost like a list where the values are linked together like so:
Oranges -> 3
Apples -> 5
The arrows have a direction kind of so we would call this a map! There are plenty of other data structures too! Can you find any others?
Advanced knowledge for students who are excelling: If one of your students is interested in doing more coding that isn’t block coding (ex: continuing to code in Python or Javascript) you could explain to them that coding languages care more about what is in the box. For example, numbers are handled differently than characters in a word. Languages like Python and Javascript are very picky about how you store numbers vs characters because they are different “types” of things you can store in your variable. You could make the analogy that you use different types of boxes to store things: Your leftovers have to go in a special box for leftovers (tupperware) and then when you are moving, your stuff has to go in a moving box (cardboard box). The same is for python. Numbers go into numbers boxes and characters go into characters boxes.
Mentor tips are provided by support from AmeriCorps.
![solution: list [apples, cherries, kiwis, grapes]](https://technovationchallenge.org/wp-content/uploads/2024/02/answer-thunkable-list.png)
ACTIVITY: COMPLETE THE QUIZ APP
Complete the code using variables and lists
REFLECTION
In this lesson, you learned how to store information in your app, and how to use lots of information with lists. Consider these questions:
REVIEW OF KEY TERMS
- Variable– a way to name and access information within an app
- Lists – a way to organize multiple pieces of data in Thunkable
- Index – a number that tells you where a piece of data is in a list
- Array – common name for lists in programming languages other than App Inventor and Thunkable
ADDITIONAL RESOURCES
The Simple List component (formerly called List Viewer) allows
- display of list elements in your app
- user selection of an item in the list.
- coding of an action to take when the user selects an item
Watch this video for a quick demo of it in use:
