Coding 13: Storing Data in the Cloud & APIs

Storing Data in the Cloud and APIs

Coding 13

Storing data in the cloud and or using an API 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 about cloud storage and APIs
  • Create a login page

Key Terms

  • Cloud Storage - information that is stored on the web so that any device connected to the internet can access it
  • Web Database - a way to store and organize information in the cloud
  • API (Application Programming Interface)- the way you can get information from another website or database.

Web Databases and APIs

In the last coding lesson, you learned how to store information on a device, or how to use local storage. You also built a to-do list app that allowed users to save their to-do lists in between when they opened and closed the app. In this lesson, you’ll learn about cloud storage, or how to store information on the web so that any device connected to the internet can access it. Web Database is another term often used to describe cloud storage.

Cloud Storage

Let’s say you have two phones running an app, Phone A and Phone B. If Phone A stores data in local storage or a local database, Phone B can’t access it. If Phone A stores data in cloud storage or a web database, then Phone B can access the data.

Local Storage

Cloud Storage

Uses for Cloud Storage

Cloud Storage is necessary for apps to use with information that frequently changes. Here’s an example. Let’s say you are building an app to show the 10 most popular restaurants in your city each month. You put a list of restaurants into your app and upload your app to the app store. The following month, you update the list of restaurants and update your app in the app store. Users who are already using your app will need to update or re-download your app to see the new top restaurants. 

Now let’s say you stored the top 10 restaurants in cloud storage. When you update the restaurants, all of the phones using your app will check for updates to this cloud storage automatically. Users will see the changes right away, and won’t need to re-download anything.

Have you ever shared a picture on Facebook or Instagram? Apps like these use cloud storage. When your friend uploads and shares a picture, your phone checks the web database for new photos, and then you see it in your feed. 

So when would you use cloud storage? Here are some common uses:

  • Requiring login and passwords for users
  • Sharing data from a game, like a high score list
  • Allowing users to share images with each other through a feed
  • Displaying a feed that updates all users see
  • Remembering things about a user such as their transactions, financial records or medical records

It is important to know that when using cloud storage, phones need to have an internet connection to get information. If the phone has a slow internet connection, this could slow down your app or make it impossible for your app to update.

There are a few different options for cloud storage in App Inventor. Most of these are called web databases. The activity in this lesson uses CloudDB in App Inventor and Realtime DB in Thunkable. In the additional resources, there are instructions for how to set up TinyWebDB and Fusion Tables in App Inventor. 

APIs

API stands for application programming interface. An API is a way you can get information from another website or another website’s database.

Let’s say you are building an app to help people decide what to wear based on the weather. You could spend lots of time uploading data about the weather into a database, but there are already websites that show the weather.  A better solution would be just to grab data from that website and show it to your users through your app. An API is what would allow you to do this.

Here are some common APIs that programmers use when they create apps:

 

You can learn more about APIs in Thunkable by watching this video and checking out resources here.

Google Maps

Location and Map Information

App Inventor Tutorial

Thunkable Tutorial

Yahoo! Finance
National Weather Service

Activity: Create a Login Screen Using Cloud Storage

This app allows users to create an account and log in. It uses CloudDB in App Inventor and Cloud Variables in Thunkable. Here’s how it works:

When a new user signs up, it saves their username and password in the cloud

When a user logs in, it calls the cloud database to get their username and password

If the user successfully logs in, the app takes them to their profile page

However, this app has a major security bug! It never checks to see if the user’s password matches the one in the cloud storage before logging in. This means that any user can log in to any account. You need to fix this bug and alert the user if they have an incorrect username or password.

You need to make sure that the value returned from the cloud storage matches the password the user entered into the textbox! Ready to get started? Download the source code below.

Important:
By default, the cloud variable is saved to the Thunkable default Firebase database but you can save them to your own private Firebase database by following the instructions here.

Reflection

There are so many ways you can use web databases! What other ways can you and your team think of to use them in your app? Can you think of some other real world examples that might be using them?

Additional Resources: TinyWebDB, Fusion Tables, and More!

 

TinyWebDB in App Inventor

TinyWebDB is similar to TinyDB because it uses tags value pairs to store and retrieve data. TinyWebDB is a great choice if you are using data where the data is mostly in pairs, like usernames and passwords. TinyWebDB also has the added bonus that you can go onto your web service and view all the tags that exist and delete data you don’t want anymore. Your web service will look like this:

Setting up TinyWebDB

To use TinyWebDB, you’ll have to set up your own web service where the data will be stored and retrieved from. Here are MIT’s instructions on how to do that: Custom TinyWebDB

If you get stuck setting it up, take a look at this video:

TinyWebDB is a non-visible component, or one that doesn’t show up on the screen, and looks like this

Programming TinyWebDB is slightly different than programming TinyDB. When you make a call, you’ll have to wait for your app to ask the web service for data. This is because TinyWebDB is requesting information over the internet, and its speed depends on your internet speed. Here are what the blocks look like:

When the user presses Button1 the app will ask the web service for the value of the tag called “User1”. Once the app has the value from TinyWebDB, it will then set Label1 and Label2 to the tag and value.  

 

Troubleshooting tips:

  • If you are having trouble downloading Google App Engine for Python, try downloading it here
  • Just like with TinyDB, if you use the same tag name twice in TinyWebDB, the data will get overwritten.

Fusion Tables

Fusion tables are another type of web database available in App Inventor. Fusion tables use tables to store and retrieving data instead of tag-value pairs. This allows you to store more complex data sets. Here’s an example of a table you could create to keep track of new jerseys for your soccer team. Everyone gets a jersey with their name and with their number on it. You need a way to keep track of everyone’s name, number, and shirt size.

To get a better idea of some things you may use fusion tables for, here are some scenarios when past Technovation teams have incorporated fusion tables. Compare and see if any of the scenarios are similar to what you are trying to do with your app.

  • Creating a directory of location centers that are accepting donations. The table entries include latitude and longitude, phone numbers, and the items they accept.
  • Storing information about user profiles such as  location, username, password, biography, and profile picture
  • Making maps and plotting points on maps
  • Storing posts and comments on a forum

Check out these two Technovation apps that used fusion tables:

Here’s a tutorial from MIT on how to get started with fusion tables: Fusion table AI Pizza Party. We got stuck with this tutorial so we used this video to help us out.

Google Spreadsheet in App Inventor

Technovation alumni Allison John has created a two-part series on how to read and write data to a Google Spreadsheet

  1. How to Read Data from Google Sheets in MIT App Inventor
  2. How to Send Data to a Google Sheet with MIT App Inventor