Introduction to APIs


#1

Introducing APIs

An API, or Application Programming Interface, allows one app to communicate with another app without them both having to be written in the same language.

The information that you get from an API is typically in some standard format such as XML, JSON or maybe even CSV.

For the purpose of this introduction however, we will limit ourselves to working with JSON responses.

Your Challenge

By the end of this article you should be able to get foreign exchange rate data, in JSON format, from an online API and calculate how much currency you can buy with your money.

Our ForEx API

To keep things as simple as possible we’re going to get our data from Fixer.io who provide historical exchange rate data from the ECB.

Getting the Data

Getting the data is simple, all we have to do is make a GET request to the fixer.io servers and they will respond with a the data in JSON format.

Getting the Data in Thunkable

To view this in our app we will need the following components to Screen2 of our app:

Design

You can set the “URL” property of the Web1 component to https://api.fixer.io/latest so that your design ends up looking like this:

Blocks

The button will trigger the GET request and we will display the response in the label. Please note that you can also set, or modify, the Web1.URL property in your blocks as well as in the designer.

Initial Test

So this is what the app will look like. Clicking on the button will get all the available data from fixer.io and display it in the label:

Parsing the Response

The English word “parse” comes from the Latin pars, meaning part. So, when we say that we want to parse some data what we really mean is that we’re going to break it down in to small parts and analyse them one at a time.

The next thing we need to do is parse the response from the server so that we can extract only the information that we are interested in, in this case one specific exchange rate, and discard all other information such like the date and the base currency.

Convert to List

There are a couple of ways of doing this but we’re going to modify our code to convert that JSON response from the API to a Lisp list that Thunkable can easily work with using the built-in list blocks.

After adding in this one new block our app should look like this, note that the data are the same but all the braces { } have been replaced with parentheses ( ) as well as removing other characters like colons, quotation marks and commas.

Look Up In Pairs

JSON objects are defined as:

an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).

This means that when developing an app using data from an API you will know what the names are in advance as these will be specified by the API developer. It’s the values that we’re interested in, since these are the variables.

Using the built-in “Look up in pairs” block we can drill down into our data and get the response we want. For example, the top level of data contain the following names:

  • base
  • date
  • rates

So if we want to show the user all the rates we can do so with the following code:

Note that this now displays only the currencies and rates to the user:

Choose a specific currency

We can drill down another level into our data by using the “Look up in pairs” block again. In the next example we extract the exchange rate for Euros to US Dollars:

This new code will give us the following output:

Tidy everything up

Now that we’ve got one specific piece of information from our response we can present it in a more visually appealing way. In the next screenshot I’ve added in a variable to store the exchange rate and created a sentence to explain to the user what’s happening:

Your Turn

Now it’s your turn to create something with this code. You could create a graph showing historical trends between two currencies, add in some list pickers to choose the from and to currencies or just improve the very basic UI that I’ve shown here. Let me know what you create in the comments.

fixerio_template.aia (3.7 KB)


How to use API on Thunkable
Help decoding and using JSON
I want to daily update my app like news app with image and text
How to make a Uploading Drive Like Google Drive?
Unable to parse my json response
Alternative to Web View
Listview App Template for Cloudstitch and Airtable
Hey i want to extract the data from the json file
I need Help About JSon Please
Thunkable connect with google search
Json has me lost
How to create railway pnr status app using api
I want to make speak app only the answers from webviewer
How to Make App with API integration in thunkable
What is use of Web API
How to call API successfully and parse results
Can We Implement API in our Thunkable App Projects?
Google Maps Place Autocomplete
Picasa Android API
Get Postal Code
Arduino + Thunkable + OpenCV = Android Application ~ Quick Question
How to make signal provide app
Want to make stock market advisory app
PayTm gateway inegration
Flight Radar App?
API Support For app?
[Free] Material Cards + Camera Viewer (SPONSORED!)
Plss Tell me about Amazon API with App
JSON file help!
I need a help for creating blog app
#2

Excellent and very nice tutorial for every beginner to learn how they can use API’s.We can build world class applications with the help of API’s if we have more tutorials like this.

  • How to display Images if the response from an API is provided as imagelink:

@Domhnall can you please help me with openclipart api which gives response in JSON.It provides a list of various imagelinks with other data.I want to display images on search and when any image is clicked I want to set an image.picture to the image that was selected.The solution for this can help many other people also.
Link: https://openclipart.org/developers
1.Response form openclipart api:


2.How I want display the images:

Thank you,


#3

Thanks @Domhnall!
To reply to @Eenjeen, following the same principle, but adding array index I have:

just follow the json path:

using API example: https://openclipart.org/search/json/?query=play&amount=5


#4

@Domhnall just did every beginner a huge favor :smiley:

Thank you :heart_eyes:


#5

per chi si scontra invece con siti non json, queste mie note (in italiano) potrebbero essere d’aiuto http://pm10acremathunkable.blogspot.it/2017/12/i-dati-degli-inquinanti-come-scaricarli.html


#6

Hello Sir, how to get the videoId and title as list picker or anything as combining from below link?
https://www.googleapis.com/youtube/v3/search?part=snippet&q=7starmedia&key=AIzaSyBhvqkicNyVbDXK5M4Z-3vjG6_sKotmpQY


#7

Follow and adapt my example above and change index to 2 to reach the [1]


#8

Hi Domhnall,

Very simple and interesting article. I began working on this and found that Fixer has deprecated the API URL used here in this example. Now, it asks for a key.

It will be great if you can continue this example with a part 2 of it to showcase the usage of the APIs via keys as well. Currently the above example is not usable.

Best,
Andro


#9

Thanks Andro, I’ll make an updated tutorial about this before Friday - thanks for letting me know!


#10

Sounds great!! Looking forward! :heart_eyes:


#12

Great tutorial, thanks a lot.


#13

Hi,
Nice tutorial, but it I am not able to apply with Thunkable X, can you please highlight the changes to the code blocks.

Thank you


#14

Hi @adham, thanks for your question. I think the easiest thing to do is creating a new article for this.

Let me see what I can do!


#15

Hi @Domhnall,
Done!
Thank you.


#17

Hellotest_convertisseur.aia (5.0 KB)

I took your example to make a currency converter
I can convert from France to USA but the opposite does not work can you help me thank you (I send you my file aia)


#18

If you are asking for help, I recommend you to make it as easy for others to be able to help you …

You probably will get more feedback then…

which means in your case post a screenshot of your relevant blocks…

To download the aia file, upload it to Thunkable, open it, do some bug hunting for you, etc… this takes time, and most people will not do that…

Thank you.

Taifun


#19


here is my app in image thank you


#20

Hi @yan114, thanks for posting here!

It looks like you’ve got the rate and code variables swapped? The listPicker.AfterPicking should set the code so that you can use that information to get the appropriate rate from the JSON response.

Hope that helps


#21

thank you for your answer, yet it works well from France to usa but not the opposite usa to France does not work


#22

it works with the country of origin so France to other countries because I live in France and I would like it also works the opposite
thank you