CRUD Operations
How do I use an API?
Most modern APIs will have support for a variety of CRUD operations. In this context, the acronym CRUD stands for Create, Read, Update, Delete. While most API developers probably won't want to give just anyone free rein to change or remove data on their system there are plenty out there who provide public, read-only access to their end points. This is also convenient for us, since reading data from an API and displaying it in a Thunkable app is probably the easiest way to familiarise ourselves with APIs.
At the end of this tutorial, you should be able to
Send a GET request to an API
Parse (interpret) a response from that API.
Overview
The app we're going to build in this example is called "Dogs-as-a-Service". It connects to the dog.ceo API and can "fetch" an image and breed name for a random dog.
Design Your User Interface
At its core we need at least three components to get this app working correctly; a Button to send the API request, an Image to show the picture in the response and a Label to display the name of the dog breed. If you want your project to look the same as the sample project then you can go ahead and make a copy of it for yourself.
Show the Picture
Let's begin by sending a GET request the to API. Notice here that the purple Get block returns three parameters; response, status and error. If anything goes wrong with the request then an error will be returned so it's always a good idea to do some error handling in your app. The status block returns the HTTP status. According to this list there are about 30 different response codes. You don't need to remember what they all mean but it is good to know that a response code in the 200s is successful, codes in the 300s are for redirects and status codes in the 400s correspond to errors. Indeed you may already be familiar with the 404 error code for "Page Not Found". The example below has some basic error handling and, if successful, displays the entire JSON response in a label.
Our response contains just two properties, message and status which really makes this API as easy as possible for us to work with.
Display single random image from All Dogs collection
GET https://dog.ceo/api/breeds/image/random
All we need to do here is get the value from the message property and pass that to our image component. The object blocks in Thunkable make this incredibly easy to do and we can set our picture by using just two of them. First we have to convert the raw JSON response into an object using the get object from JSON block, then we can go ahead and get the message value and pass it to the image component using the get property of object block like this:
Display the Name
The URLs for every image also contain the breed names for each dog. If you look closely you'll notice they all follow the same pattern:
https://API-HOST/DOG-BREED/DOG-IMAGE.jpg
What we want to do is grab the name of the dog breed, remove any stray backslashes and convert it to Title Case. In practice, this involves using the make list from text blocks and then the in list get # block to get the name of the breed and then pass that through the Title Case text block to output the nicely formatted dog breed in our label.
Sub Breeds
While the above approach works perfectly well for pugs and collies, our API is set up in such a way that you might also see responses like "terrier-welsh" or "terrier-westhighland". The second if then do block below shows one way that you can split the text at the hyphen and display the words in reverse order.
Conclusion
In this first example we've learned how make a Get request in Thunkable and use the object blocks to retrieve information from the API response. We've also seen firsthand how just a handful of list and text blocks can be combined to extract additional information and present it to the end user in an easy-to-read format.
Questions?
If you have any questions about this tutorial, please post them over in the Thunkable Community
Community Link: https://community.thunkable.com/t/dog-breeds-api-tutorial/
Last updated
