Hey Thunkers!
Web API’s can be a little tricky at first but that’s ok! After this post (and the video that goes along with it), you’ll learn all the basics of the Web API component. We have been working on a Web API tutorial series where you can see and recreate different examples of apps that use the Web API component in them.
Tutorial Video
This tutorial walks you through
- 0:25 - What is the Web API Component?
- 1:15 - Getting the API Key
- 1:52 - Getting the Database URL
- 2:17 - Using the Database URL
- 3:07 - Using the Web API Call Get Block
- 3:35 - Using the Data Received
Background (0:25)
The Web API component allows you to get data from any public or private data source on the web. You have a database with information and you can specify what parts of the data you want from the database to use in your apps.
Set-Up
API Key (1:15)
An API Key is a unique code that the website gives you. Most public APIs, require you to sign up on a website to get a unique API Key. After signing up, the website will give you an API key.
Database URL (1:52)
Now you’ll need a database URL. The URL tells you the location of the data. Usually, you can find the database URL on the same page where you get the API Key.
You can look at some of the tutorials in the Web API Tutorial Series to see and example of how to retrieve this URL from a database.
Using the Database URL (2:17)
After you have the database URL, you will need to paste this URL into your blocks. This will look different for every app—depending on what information you are trying to get from a website.
The way you start receiving information is by adding specific endings to the URL. These endings have a very specific format that software engineers use. Usually the format is & followed by the name of the data you want: &{name of data here}=
Again, check out some of the tutorial videos which show examples on how to do this.
Here is an example of what the block can look like.
Using the Web API Call Get Block (3:07)
Now you actually want to get and store some additional information that you want in your app. You can do this with the Web API Call Get block.
The Web API get component is made up of response, status and error. You really only need to worry about the response part since that contains all the information you retrieved.
This is what the Web API Call Get Block looks like.
Look at the tutorial videos here to see examples on how to use this block.
Using The Data Received (3:35)
The information from the database is returned in JSON format. What’s that?
JSON stands for JavaScript Object Notation. JSON is just a specific type of code format.
In order to use the information from the database in your apps, you need to convert it into another format that the app can understand – Object Format.
This process is called Parsing the Data in Computer Science.
Here is an example of what the code block looks like to change the format from JSON to Object.
You can learn how to change the format, from JSON to Object, step-by-step: (3:35) in this tutorial
Here is a link to a website that has a list of many Web API’s that you can integrate into your apps!