Coding 12: Storing Data Locally

Storing Data Locally

Coding 12

Storing data on your device is a feature that might be helpful for your app, depending on your particular problem solution. Learning about storing data on your device can help you score points in the technical part of the Demo Video section of the judging rubric.

In this lesson, you will…

  • Learn how to store data on your device in App Inventor and Thunkable
  • Learn how to use TinyDB in App Inventor
  • Learn how to use stored variables in Thunkable

Key Terms

  • Database - an organized collection of information
  • Local Database - an organized collection of information stored on a device
  • Tag-value pair - a way to store and access information in a database
  • Stored Variables - blocks in Thunkable that let you store information on your device
  • TinyDB - A database service you can use in App Inventor that allows you to store information on a device

Storing Information On Your Device

Local Storage

In this lesson, you will learn how to store data on your device, or use local storage. Here are some examples of data storage that you might use every day:

  • Contact list – you store your friend’s phone numbers so you can use them later
  • Messaging app – most messaging apps automatically store old messages so you can read them later
  • Filing Cabinet – you store and organize paperwork here
  • Photos - you store and organize your photos on your mobile device

In your app, you can use local storage to store information between the times when your user closes and reopens her app. 

Variables, which you’ve learned about, allow you to store information only while your app is running. What that means is when the app closes, the variable essentially “disappears”. Whatever the value of a variable is when the app closes is lost. For example, if the app is a game and the user scores 350 points so the score variable value is 350, when the user closes the app, that value is gone. When the user reopens the app, score will be reset to whatever the variable is initialized to. 

Sometimes you may want to save information so when the user comes back to the app, that information remains as it was the last time the user ran the app. For example, you might want to store the high score for a game. Or if you are tracking your daily walking steps, or number of glasses of water drunk each day, you would want to save that information each time you run the app. So you want to use local storage, which means storing the data on the mobile device.

 

Databases

Local storage is sometimes called a local database. A database is an organized collection of information. Accessing a database is known as calling it, or making a call to it. When you call a database, you can get information, delete information, store new information, or update information. The key is like a variable name, it is how you tell the database which piece of information you want to get, store, update, or delete. 

These next two sections show you how to store information on your device in App Inventor and Thunkable. The two platforms deal with local storage a little bit differently, so we’ll separate the lesson. If you are using Thunkable, skip to Using stored variables in Thunkable.

Using Tiny DB Component in App Inventor

In App Inventor, the component TinyDB allows you to save data on the user’s phone that will be there each time she opens your app. It is important to know that TinyDB only allows you to store data locally. This means that two users cannot share data with the same TinyDB.  When a user stores data in TinyDB, it will only be available on her phone, and no one else’s. In the next lesson, you will learn how to share information between phones.

To use TinyDB, drag it onto your screen through the Designer. You can find it under the Storage menu in App Inventor. It will appear as a non-visible component and will look like this:

You can talk to your TinyDB or Local Storage by making calls to it. When you make a call, you can store things and get things from it. TinyDB uses tag-value pairs. Each piece of information in your storage is known as a value, and the tag is the name. This is a name that you will use to retrieve the data. It is a lot like a variable name. If you use the same tag name to store data twice, TinyDB will overwrite, or erase, the old data with the new data. So, it works exactly like updating or setting the value of a variable. 

Here are examples of how to make calls to TinyDB. StoreValue is like the set variable block. GetValue is like the get variable block.

Store or Save

Get

Above, we stored our fruits list with the tag  “Food”. The second block shows how to retrieve the fruits list from storage. The tag needs to be typed exactly as it was when the data was stored, including all capital letters. Also, always make sure the valueIfTagNotThere matches the data type. For example, Food is storing a list of fruits, so if the app has not yet stored anything in the Food tag, you would want it set to an empty list.

To better understand this, let’s walk through an example.

Let’s say you needed to store three things in a database. One is the Fruits lists, one of them is your age, and the other is a list of your favorite things to do.

You make three calls to the database like this:

You now have three entries in your database, and can you guess what they look like?

Note: For a refresher on how lists work, reference Coding 6: Lists

Now, when you want to retrieve your favorite things, you make a call like this:

When you use this block you will get a list {Learn how to Code, Visit Family, Listen to Music}. Now let’s say you want to retrieve your age, so you make a call like this:

When you use this block you just get 0 back. This is because the tag “myage” does not exist in your database! Since your database did not recognize the tag, it defaulted to show you the block next to “valueIfTagNotThere”, which is the value zero.

You can make valueIfTagNotThere anything you want, but it makes sense to keep it the same data type as what you are storing. So, making it a number value makes sense. Always use the exact same spelling and capitalization when storing and getting tag-values from TinyDB or it won’t be able to get your information.

Note: In App Inventor, if you create an app with multiple screens, components and variables will not be able to talk to each other between each screen. You can use TinyDB to transfer information from one screen of your app to another. Visit this page for more information: MIT Screens.

Using Stored Variables in Thunkable

Thunkable has simplified storing data locally on mobile devices by differentiating its variable types into app variables, stored variables, and cloud variables

App variables allow for storing information in the app. What that means is when the app closes, the variable essentially “disappears”. What that means is that whatever the value of a variable is when the app closes is lost. For example, if the app is a game and the user scores 350 points so the score variable value is 350, when the user closes the app, that value is gone. When the user reopens the app, score will be reset to whatever the variable is initialized to. That means, if you want the app to maintain the value, you would need to use a stored variable. The value would be stored on the user’s phone, so when she reopens the app, the value is the same as when she last closed it. This could be useful if, for example, you wanted to keep track of your high score for a game.

Cloud variables allow your app to store data in the cloud. We’ll discuss cloud variables much more in depth in Coding 13, so we won’t talk more about it here.

Stored variables work very much like app variables. When you drag out the initialize variable block, the default type is app. However, there is a dropdown menu where you can set the variable type to stored or cloud.

 

Note when you initialize an app variable, you must give it a starting value. For stored variables, there is no starting value, because its starting value is pulled from where it is stored on the phone. 

 

That does mean that you will have to set the value of the variable somewhere in your app. For example, you could set the high score to whatever the current game score is so it’s saved between game play.

 

Thunkable has another component called LocalDB, which allows you to store table data in your app. It’s useful if you want to include a table of information within your app. However, it currently does not work for storing information locally on your mobile device, so you are better off sticking with using stored variables.

Activity -  To-Do List

This To-Do List lets the user create a to-do list that will be remembered each time they open and close their app. However, the source code has a bug. The app never remembers any tasks the user adds or deletes. Can you figure out how to fix it?

If you’re stuck, check out this App Inventor video solution by Technovation alumni Jennifer John:

Reflection

Now that you’ve learned how to store data on your phone, you should brainstorm with your team where you might use this in your app. The next coding lesson will teach you how to store information in the cloud that is not only accessible on the user’s phone but anywhere that they login to their account.

 

Additional Resources

App Inventor and TinyDB

This tutorial shows you how to use TinyDB to track goals locally on your phone.

Part 1

Part 2

Part 3

Stored Variables in Thunkable

This tutorial is a basic app to store a note: