Coding APIs with Thunkable

As you build more sophisticated apps in Thunkable, you might want them to do things like fetch live weather information, get the latest news headlines, translate text, or connect to other online services. How do apps get this external information? Often, they use something called an API.

Today, we’ll learn what APIs are and how you can use them in your Thunkable projects to make your apps more powerful and connected!

Lesson Topic: Coding APIs with Thunkable

Section 1: What is an API? (Like Ordering Food!)

API stands for Application Programming Interface. That sounds complicated, but the concept is simple! Think of an API as a messenger or a set of defined rules and requests that allows one piece of software (like your Thunkable app) to talk to another piece of software or service (like a weather service website) over the internet.

Analogy: Ordering at a Restaurant

• You want food (data/service) from the Kitchen (the external service, e.g., a weather database).
• You don’t go into the kitchen yourself! You look at the Menu (API Documentation – tells you what you can order and how).
• You tell the Waiter (Your API Request) exactly what you want based on the menu (e.g., “I want the weather forecast for Jinja”).
• The Waiter takes your specific request to the Kitchen.
• The Kitchen prepares your order (processes the request).
• The Waiter brings the Food (the API Response – the weather data) back to you.

The API is the menu and the set of rules the waiter and kitchen follow to communicate correctly. It defines what you can ask for and how you should ask for it.

Section 2: Why Use APIs in Your App?

Using APIs lets your Thunkable app do amazing things without you having to build everything from scratch:

• Get Live Data: Access up-to-date information like:
  • Weather forecasts
  • News headlines from sources like BBC or local news sites (if they offer APIs)
  • Currency exchange rates (e.g., UGX to USD)
  • Information from public databases (e.g., health facts, scientific data)
  • Translation results (e.g., using Google Translate API)
• Use External Services: Integrate functionalities built by others:
  • Send SMS messages (using services like Twilio – advanced)
  • Process payments (advanced)
  • Use powerful AI models hosted online (like image recognition from Ximilar, or language models from OpenAI).
• Save Time & Effort: Why build your own weather forecasting system when you can just ask an existing reliable service via its API?

Section 3: Using APIs in Thunkable (The Web API Component)

Thunkable provides a specific component to act as your “Waiter”: the Web API component.

• Finding It: It’s usually found in the “Advanced” tab of the Blocks section, or you can add it from the components panel (it’s a non-visible component, so it appears below your screen layout).
• Key Properties (Set in Designer or Blocks):
  • URL: This is the most important part – the specific web address you send your request to. The provider of the API (e.g., the weather service) will give you this URL. It often looks like a website address and might include parts after a ? to specify your request (e.g., https://api.openweathermap.org/data/2.5/weather?q=Jinja&appid=YOUR_API_KEY).
  • Method: For getting data, you almost always use GET. (Other methods like POST are used when you need to send data to the API).
  • Headers: Sometimes, APIs require extra info with your request. This often includes an API Key (like a password to prove your app has permission to use the API) or specifies the format of the data. You add these as key-value pairs in the Headers property. Many simple APIs for practice don’t require headers.
• Key Blocks:
  • call Web_API1’s Get: This block sends the request to the URL you’ve set.
  • when Web_API1’s Got Response do…: This is an event handler. Since getting data from the internet takes time (could be milliseconds or seconds), your app doesn’t just freeze and wait. It sends the Get request and continues running. When the server finally sends back the information, this when…Got Response block automatically triggers. This is where you handle the data!
  • Inside when Web_API1’s Got Response: You get access to important pieces of information:
    • status: A number code indicating success or failure. 200 usually means “OK” (success!). Other codes like 404 (Not Found) or 401/403 (Unauthorized – maybe bad API key) mean there was a problem. Always check the status first!
    • response: The actual data sent back by the API server. This data is often in a text format called JSON.
    • error: If the request itself failed (e.g., no internet connection), this block might contain an error message.

Section 4: Understanding the Response (Usually JSON!)

APIs commonly send data back using JSON (JavaScript Object Notation). It looks a bit like code but is just a way to structure text data.

• Structure: Uses curly braces {} for objects (collections of key: value pairs) and square brackets [] for lists/arrays.
  • Simple JSON Example: {“city”: “Jinja”, “temp_celsius”: 26, “description”: “Partly cloudy”}
  • Here, “city”, “temp_celsius”, and “description” are keys, and “Jinja”, 26, and “Partly cloudy” are their corresponding values.
• Getting Data from JSON in Thunkable: When you get the response (which is text containing JSON), you need to extract the specific pieces you want.
  • Use the get object from JSON block (from the Objects drawer) to convert the JSON text (response) into a Thunkable object.
  • Then use the get property [property name] of object [your Thunkable object] block to pull out the value associated with a specific key (e.g., get the value of the property named “temp_celsius”).

Section 5: Let’s Try It! (Activity – Using a Simple API)

Time to practice being the waiter and getting some data!

Your Mission: Use Thunkable’s Web API component to fetch data from a simple, free, public API and display something in your app.

Task Steps:

1. Find a Simple API: Search online for “free public APIs without key” or look at lists like “JSON Placeholder” (great for fake test data like users or posts) or APIs for random facts (cat facts, dog pictures, jokes). Pick one and find its URL for getting data.
2. Add Web API Component: Add it to your Thunkable project from the components panel (it will appear under the screen as non-visible).
3. Trigger the Request: Add a Button to your screen. In the when Button1.Click block:
   • Set the Web_API1’s URL property to the API address you found.
   • Call the call Web_API1’s Get block.
4. Handle the Response: Drag out the when Web_API1’s Got Response block.
5. Check Status: Inside Got Response, add an if/else block. Check if status = 200.
6. Parse & Display (If OK):
   • Inside the if status = 200 part:
     • Use set app variable (e.g., apiObject) to get object from JSON (response) block.
     • Use set Label1’s Text to get property “propertyName” of object (app variable apiObject) block. Replace “propertyName” with the actual key from the JSON data you want to display (e.g., “fact”, “name”, “joke”).
7. Handle Errors (If Not OK):
   • Inside the else part (if status is not 200):
     • Use set Label1’s Text to join (“Error: ” and error) block (or display the status code).
8. Test: Use Live Test. Click the button. Wait a moment. Does the data from the API appear in your Label? Does it handle errors if you disconnect from the internet?

Section 6: Important Considerations

• Internet is Essential: APIs rely on an internet connection. Your app needs a way to handle situations when the user is offline (e.g., show an error message, maybe try again later). This is very important in Uganda!
• API Keys: Many powerful APIs require a secret API Key to identify your app and track usage. You usually get this by signing up on the API provider’s website. Protect your keys! Don’t paste them directly in easily visible blocks. Store them securely if possible (sometimes in project settings, but be careful).
• Rate Limits: APIs often limit how many requests you can make in a certain period (e.g., per minute or per day) on free plans. Don’t call the API excessively, especially during testing.
• Error Handling: Always check the status and error in the response to make your app robust.

Section 7: Quick Review (Key Terms)

• API (Application Programming Interface): A messenger/set of rules for software to talk to each other.
• Web API Component: Thunkable’s tool for making API requests.
• URL: The specific web address of the API endpoint.
• GET Request: Asking the API to send you data.
• Response: The data sent back by the API (often in JSON format).
• JSON: A common text-based format for structuring data (key-value pairs, lists).
• API Key: A secret “password” needed to access some APIs.

Conclusion

Mwebale Kweyigiriza! (Thank you for teaching yourselves!) APIs open up a whole new world of possibilities for your Thunkable apps, allowing you to connect to live data and powerful external services. Using the Web API component might seem a bit technical at first with the request-response cycle and JSON parsing, but working through a simple example will help you grasp the concept. This is a very valuable skill for any app developer! Musigale bulungi! (Stay well!)

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 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.

How to use Web API

This video gives an overview of APIs and the Thunkable Web API component.

Google Maps

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.

Weather

This example tutorial uses an API from OpenWeatherMap.

More tutorials

Thunkable as an entire playlist of different Web API examples.

ACTIVITY: FRUIT NUTRITION APP

Estimated time: 30 minutes

Display Fruit Information using API

1. Open the starter project in Thunkable.
2. Run the app to see how it works.
3. Make a copy of the project so you can edit it.
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 Starter Project

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