Coding APIs in App Inventor

In This Lesson You Will …

• Learn what Application Programming Interfaces (APIs) are 
• Use an API in an app to get information

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.

Cloud Storage

API

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: 

1. Find a website that uses APIs. Here is a list of public APIs that are available, listed by topic.
2. Read their documentation for how to use their APIs. Most sites give examples.
3. Some sites require you register for an API key before using their APIs. Note, some APIs cost money to use. 
4. Incorporate the API code into Thunkable. 

CODING EXAMPLES

Below are some simple examples to get you started with using APIs in App Inventor.

Google Maps

Here is a very basic example of using the Google Maps API and the ActivityStarter component to start the Google Maps app from your app, targeting a specific location. Use this starter template to follow along.

Weather

This example tutorial uses an API from OpenWeatherMap.

iTunes

This simple tutorial show you how to use the iTunes API to play a song when you type in an artist’s name.

Click this link to open the sidebar tutorial in App Inventor and follow along.

ACTIVITY: FRUIT NUTRITION APP

Estimated time: 30 minutes

Display Fruit Information using API

1. Open the link to the Fruit Information project in the App Inventor Gallery.
2. Load the app into App Inventor.
3. Run the app to see how it works.
4. Check the example JSON string below to understand what it looks like.
5. Right now, the app displays only Calorie information. Add a second label below CalorieLabel to display one of the other nutritional values returned.

Open Gallery Link

Mentor Tip

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. 

See solution

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.

Do you think this is a useful component for your app?

Can you find an online website that provides the information you need?

Do you think this is a useful component for your app?

Can you find an online website that provides the information you need?

Do you think this is a useful component for your app?

Can you find an online website that provides 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

List of free public API’s