Using APIs part 2 — JavaScript & Giphy

November 16, 2017

A long time ago, I wrote a blog post introducing the concept of an API; what it is, some examples, and how you might use one. However, I didn’t show you how to actually use one in code! This blog post will help you get started using JavaScript and Giphy to display cat gifs.

Setting up

I’m going to be using a website called JSFiddle to write and test my project. JSFiddle allows me to show the code I’ve written, without any of the boiler plate code of a HTML page, or including the JavaScript file. It also means you won’t need to install anything to get started, you only need a web browser!

I’m also going to use a library called jQuery to help us do some of the harder things in JavaScript more easily. Many people dislike jQuery, however it makes doing things easier and less verbose. Writing less code hopefully means you’ll understand the concepts without writing more words to get lost in.

Once you have JSFiddle open, you can tell it to include jQuery. Find the JavaScript square (bottom left), click the tiny cog (top right of the square). Click the frameworks & extensions drop down menu, and scroll to jQuery. Any version number will do everything we need to today.

Using $.get

We’re going to begin by using jQuery (which shortens to the $ character) and getting it to use the get method. This will handle the call to the api for us, we can pass it some properties such as the URL to call, what should happen when the call succeeds, and what to do when that call fails.

$.get({
  url: "https://api.giphy.com/v1/gifs/search?q=cat+funny&api_key=dc6zaTOxFJmzC&rating=pg",
  success: function(result) {
    console.log(result)
  },
  error: function(error) {
    console.log(error);
  }
});

Before we test out our code we’re going to open up the developer console. In the browser right click anywhere and click “inspect element”. Here you should get a window appear over your browser, one of the tabs in that new window should say “console”. To find out more about the console, and what it can do for you, check out this article by google — https://developers.google.com/web/tools/chrome-devtools/console/.

Now that we have the console open, click the play button at the top right of JSFiddle. You should see the result of our call! If you have any mistakes the developer tools will hopefully let you know where the mistake was for you to fix.

You’ll see we got back 25 items, which is the default number of gifs Giphy will return. Click into one of the objects and try to find which property has a link to the gifs. (hint: it’s inside images / original)

Iterating

Next, let’s look at how we navigate through that returned data through code. Let’s start by logging to the console the url of each gif we have. Think before you start writing any code; what kind of loops you know and whether they might work for us here.

I’m not going to link you to the code here, it’s good practice to write it yourself and not copy/paste. I picked a “for each” loop in the above example. So long as you have a bunch of links in the console to gifs any answer is totally acceptable. At this point you can reward yourself with by clicking any of the links to see a cat gif. Gifs are pretty great, right?

Rendering

Now we have all the links to the gifs, let’s go about displaying them! This might sound difficult to start, but thinking back to our HTML experience, we already know how to render an image. Gifs are only fancy images.

All I did was make a super long string with the html I’d use if I was to write this code by hand e.g. “”, and then putting that into a container.

I had to specify a width for the images, otherwise they took up too much space. There are better ways in future to render images like this, taking a look into templating libraries, something like mustache.js would help us write much cleaner code.

My JSFiddle is located here — https://jsfiddle.net/daniellevass/yocuzLet/ . Feel free to fork it, break it, and look at how the different parts work!

Extension Tasks

Not everyone likes lolcats, some people like lolpuppies. How would you go about adding in a text field to allow people to type what they want?

Maybe you want to allow people to use these gifs in a conversation, and instead of showing many, we’d only really want one gif. How would you go about selecting one, maybe at random?

Conclusion

Now that you are a pro at consuming the Giphy API you will also be able to consume any API! Go forth and explore public APIs and find your favourite!

My favourite API is the USGS earthquake API which displays earthquakes that have occurred. I like it because it’s a very well formatted API (the documentation just makes sense!). I can also do a lot with the data such as displaying on maps or lists, playing with the data and working out how far away my nearest significant earthquake was (quite far considering I live in England!). The API is refreshed with earthquakes every 5 minutes, which means often when I check if my new bit of code does something a new earthquake has appeared!

In the next part in this series we’ll look at using an API to talk to things in the real world, which will become our own Internet of Things!