Coding 12: Storing Data Locally

Storing Data Locally

Coding 12

Storing data on your device is one way to earn maximum points in the Coding Complexity line of the judging rubric. It can also help with "App Function", "User Experience and Design", and "Technical Learning".

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

  • Key-pair value - a way to store information
  • Local Storage - a way to store information on a device
  • Database - an organized collection of information
  • Local Database - an organized collection of information stored on a device
  • Calling a database - this allows you to store, get, update or delete information in the database
  • TinyDB - A database service you can use in App Inventor that allows you to store information on a device
  • Local Storage (Thunkable Component) - A component in Thunkable that lets you store information on your 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 use might 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

In your app, you can use local storage to store information between the times when your user opens and closes her app. In this lesson, you will learn how to store information using key-pair values. Each piece of information in your storage is known as a value, and the key is the name.

 

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 through how to use store information on your device in App Inventor and Thunkable.

 

Using Tiny DB Component in App Inventor and Local Storage Component in Thunkable

In App Inventor, the component TinyDB allows you to save data on your user’s phone that will be there each time she logs into your app. The component Local Storage does the same thing in Thunkable. It is important to know that TinyDB and Local Storage only allows you to store data locally. This means that two users cannot share data with the same TinyDB or Local Storage.  When a user stores data into TinyDB or Local Storage, 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 or Local Storage, drag it onto your screen through the designer. You can find it under the storage menu in App Inventor and the data menu in Thuankble. It will appear as a non-visible component and will look like this:

App Inventor

Thunkable

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. The way you store data is by giving it a “tag” in App Inventor or a “key” in Thunkable. 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 or key name to store data twice, the TinyDB or Local Storage will overwrite, or erase, the old data with the new data. This can be useful if you need to update what’s in your storage but you should be careful never to repeat names otherwise! Here are a few examples of how to make calls to TinyDB and Local Storage:

App Inventor

Thunkable

Store or Save

Get

Above, we stored our fruits list with the tag/key “Food”. The second block shows how to retrieve the fruits list from storage. The tag/key needs to be typed exactly as it was when the data was stored, including all capital letters. 

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:

App Inventor

Thunkable

 

 

 

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:

App Inventor

Thunkable

When you use this block you will get “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:

App Inventor

Thunkable

When you use this block you just get a blank string: “ ”. This is because the tag “myage” does not exist in your database! However, the tag “MyAge” does exist. Since your database did not recognize the tag, it defaulted to show you the block next to “valueIfTagNotThere”, which is a blank string. You can make this string say anything you want. You can even make it be an error message to your user.

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.

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.