Web API Component Tutorial Series

Tutorials and DIY Guides
1

Web API’s can be a little tricky to understand at first. But don’t worry, we’ll help you become a pro at them! 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.

I will be posting all the videos in this Tutorial Series in this topic. Feel free to leave any comments or questions you may have in the comments section for the video on YouTube!

Here’s the first video. A guide on how to use the Web API Component on Thunkable!

1) How To Use The Web API Component on Thunkable

3 Likes
2

In these tutorials, learn how to make a Restaurant Suggestion app using the Yelp Database and the Web API Component. This app will take your current location, connect to Yelp, and suggest a restaurant from a list of 50 restaurants closest to you. If you don’t like the button, click on the ‘Pick A Restaurant’ button and get another suggestion!

2) How to use the Thunkable Web API Component: Yelp Restaurant Suggestion App

Part 1

Part 2

Click here to see the full project.

2 Likes
3

Learn how to make a Weather App using the Open Weather Map Database and the Web API Component. This app will let you pick a city, show you the current weather there, along with a map of the city. To get another city, just click on another one from the list of cities!

3) How to use the Thunkable Web API Component: Weather App

Part 1

Part 2

Here’s a link to the full project.

2 Likes
4

4) How to use the Thunkable Web API Component: Lyrics App

Get ready for your next Karaoke night with the Lyrics app! In this tutorial, learn how to build an app that gives you the lyrics to a song when you enter the name of the singer and the song title.

Click here for a link to the full project.

2 Likes
5

5) How to use the Thunkable Web API Component: QR Code Scanner App

In this tutorial, learn how to build an app that scans a QR Code and tells you what the QR Code is for.

Part 1

Part 2

Click here for a link to the full project.

2 Likes
6

6) How to use the Thunkable Web API Component: Advice App

In this tutorial, learn how to build an app that speaks out pieces of Advice to you using the Advice Slip’s database and the Web API component.

Click here for a link to the full project.

8

7) How to use the Thunkable Web API Component: Countries Information App

In this tutorial, learn how to build an app that gives you information about any country using the countries database and the Web API component.

Part 1

Part 2

Click here for a link to the full project.

9

Great tutorial! My student and I have been trying to use it, but we can only make it work with your API, and not any that we signed up on Yelp for. Any idea why that would be or how we could troubleshoot this?

10

Web APIs are all different. One of the challenges is to get them to work in a browser as a url and then the next challenge is to parse the information (usually in JSON format) in Thunkable.

So if you take it step by step:

  1. Which API are you using? What is the url for it?
  2. Does it require a key – most do – and do you have one (keep it private)?
  3. Have you been able to access any results from a browser?

For example, if I enter this address with a valid API key in Chrome:

https://api.openweathermap.org/data/2.5/weather?q=oakland&units=metric&APPID=[appid]

I get this response, which is JSON:

{“coord”:{“lon”:-83.3999,“lat”:42.6667},“weather”:[{“id”:800,“main”:“Clear”,“description”:“clear sky”,“icon”:“01n”}],“base”:“stations”,“main”:{“temp”:6,“feels_like”:1.08,“temp_min”:6,“temp_max”:6,“pressure”:1009,“humidity”:52},“visibility”:10000,“wind”:{“speed”:3.6,“deg”:260},“clouds”:{“all”:1},“dt”:1614125042,“sys”:{“type”:1,“id”:5424,“country”:“US”,“sunrise”:1614082715,“sunset”:1614122135},“timezone”:-18000,“id”:5004223,“name”:“Oakland”,“cod”:200}

I can then use that to parse the data for any value(s) I want using Thunkable blocks. But without that response, I can’t really start using Thunkable yet.

  1. Once you have JSON, post it here and we can help you configure the right blocks for the value(s) you want to extract.
1 Like
11

Just for context, I have a lot of experience using APIs with Javascript, so I’ve done a lot of trouble shooting on my own, and I’m just stumped.

I am using the Yelp Fusion API: (I tried to put the link it but was not allowed)
I signed up for an API key and tested it with postman. The JSON returned looks like this (just including the first object):

{
“businesses”: [
{
“id”: “WOVHQYzSAdyXYOiYDTmujQ”,
“alias”: “the-bird-san-francisco”,
“name”: “The Bird”,
“image_url”: “https://s3-media1.fl.yelpcdn.com/bphoto/swsVh8zitzh6gipKB4zaUA/o.jpg”,
“is_closed”: false,
“url”: “https://www.yelp.com/biz/the-bird-san-francisco?adjust_creative=nRHTIQ6ITEoi47zek_0lSg&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=nRHTIQ6ITEoi47zek_0lSg”,
“review_count”: 1950,
“categories”: [
{
“alias”: “chickenshop”,
“title”: “Chicken Shop”
},
{
“alias”: “sandwiches”,
“title”: “Sandwiches”
}
],
“rating”: 4.0,
“coordinates”: {
“latitude”: 37.78724,
“longitude”: -122.39995
},
“transactions”: [
“delivery”
],
“price”: “$”,
“location”: {
“address1”: “115 New Montgomery St”,
“address2”: null,
“address3”: “”,
“city”: “San Francisco”,
“zip_code”: “94105”,
“country”: “US”,
“state”: “CA”,
“display_address”: [
“115 New Montgomery St”,
“San Francisco, CA 94105”
]
},
“phone”: “+14158729825”,
“display_phone”: “(415) 872-9825”,
“distance”: 41.667537325551386
},
…

Then I started with a remix of the Restaurant Suggestion demo app. It worked as ison my phone.

Then I put my own API key in the Header (Authorization: Bearer )

Now when I try to use it, a message pops up that says “Something has gone wrong. Check your blocks and reset the page”

Given that the only thing I changed was the API key, and I have tested that outside of Thunkable, I am unsure how to troubleshoot. It would be great if there was a debugging console that could be accessed through the web builder and the app!

12

Since you can get a valid JSON response from the web call, we’ll need to see your blocks to know why it’s not working.

13

Here are screenshots:

Screen Shot 2021-02-24 at 12.46.08 PM

Screen Shot 2021-02-24 at 12.46.21 PM
Screen Shot 2021-02-24 at 12.46.21 PM1425×557 97 KB

14

It looks like you’re setting the restaurants variable to a list (JSON array). I assume that’s so you can use it with a list viewer on a different screen.

What is the value of the green error block when you run that Get command?

1 Like
15

Status 400
Error Undefined

16

That’s important information. In fact, whenever you’re working with APIs in Thunkable, it’s a good idea to check that block’s value before proceeding. A status of 200, as you may know, is a valid response. A status of 400 means the Get request was bad somehow.

Your blocks look correct to me so my guess is that the Authorization parameter is not formatted properly. That’s honestly one of the things I’ve had so much trouble getting right in Thunkable. It’s easiest when the key can just be appended to the end of the Web_API URL.

1 Like
17

Yes, that does seem to be the problem. What’s weird is that I am pretty sure it is formatted exactly the same as the demo project by Simran, just with a different key. Maybe I will try putting the authorization header in the blocks instead of in the component properties.

18

Hi Katy,
Any luck on this? I think it is essential that we get more documentation, tutorials, video lessons on how to use different APIs with Thunkable. This has been quite a challenge for me and my students.
Best

19

I’m a teacher and my students definitely struggle with using APIs and understanding JSON. I just made a tutorial video. I hope you find it useful!

1 Like
20

this tutorial shows using a “from {restaurant image} set PICTURE to” block from the image control’s available blocks…
but in my editor i dont have a “FROM_{_}_SET picture” block…how do i get this block?

21

Answered here: FROM image SET picture to component not available.

3 Likes