Learn what Application Programming Interfaces (APIs) are
Use an API in an app to get information
These are the activities for this lesson:
API
API stands for application programming interface.
An API is a way you can get information from a website or database.
While cloud storage is usually internal information shared within your app, APIs allow your app to access external information from the internet.
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 many websites that show the weather.
A better solution would be just to grab data from a weather website and show it to your users through your app, by using an API.
Here is a good video explainer of how APIs work.
To use an API, you have to:
- Find a website that uses APIs. Here is a list of public APIs that are available, listed by topic.
- Read their documentation for how to use their APIs. Most sites give examples.
- Some sites require you register for an API key before using their APIs. Note, some APIs cost money to use.
- Incorporate the API code into Thunkable.
CODING EXAMPLES
Below are some tutorials to give you practice using Web API’s in Thunkable.
NOTE! In some of the tutorials listed here, the Web API component is shown in the Designer window. However, in the current version of Thunkable, you will find the Web API component in the Blocks Editor, under Advanced.
Click on the + to add a Web API component. You can add the URL and query parameters in the properties window that appears, or in code. Coding the blocks should be the same.
Here is a very basic example of using the Google Maps API to start the Google Maps app from your own app, targeting a specific location.
ACTIVITY: FRUIT NUTRITION APP
Display Fruit Information using API
- Open the starter project in Thunkable.
- Run the app to see how it works.
- Make a copy of the project so you can edit it.
- Check the example JSON string below to understand what it looks like.
- Right now, the app displays only Calorie information. Add a second label below CalorieLabel to display one of the other nutritional values returned.
Mentor Tip
Best practices: Fun Fact, what does json stand for? “JavaScript Object Notation”. Json was created in 1999 and almost every single piece of data that we use or get every day needs to use json in some way. If we didn’t have json, almost every bit of tech we have would be useless. Almost all data from the cloud needs json to pass data.
Guiding Questions to ask students:
Can you create an API between you and your friends?
If one of your friends says “/hello” you are going to respond with a greeting. That’s essentially an API. One person requests something (the hello) and then you respond back with the greeting of your choice. Could there be more complicated examples? /hug, /triviaQuestion, /story, /weekendSummary
Mentor tips are provided by support from AmeriCorps.
Here is an example JSON string returned by FruityVice for banana.
{ "genus": "Musa",
"name": "Banana",
"id": 1,
"family": "Musaceae",
"order": "Zingiberales",
"nutritions":
{ "carbohydrates": 22,
"protein": 1,
"fat": 0.2,
"calories": 96,
"sugar": 17.2
}
} Hopefully you successfully added a second nutritional label with API information!
If you would like to see a possible solution, click this button.
REFLECTION
Using APIs in your app can be a very powerful tool, but it is not easy to implement!
You must spend time reading the API documention for the site to understand how to get the information you need.
REVIEW OF KEY TERMS
- Application Programming Interface (API) – a way you can get information from another website or database to use in your app
ADDITIONAL RESOURCES
