Learning to work with Server-Side APIs
I am studying with @UCBerkeleyExt, in this article I cover how to use Server-Side APIs, specifically Giphy.com
Currently I am enrolled in the Full Stack bootcamp with UC Berkeley. It is an intensive full time program that lasts for three months. At the time of writing this, I am one month into the program.
🤓 Greetings travelers! I am studying Server-Side APIs with UC Berkeley. In this article I will cover how I implemented the Giphy.com API in my Project 1 assignment: Qif - A Quote and Giphy Generator.
You can subscribe without signing up for a substack account! Just select “None” when subscribing. All the content from my learning journey is free.
Server-Side APIs
A server-side API is an Application Programming Interface (API) that allows a server-side app to communicate with other server and front end apps. Server-side APIs are made up of one or more publicly exposed endpoints to a defined request–response message system. The message system is typically expressed in JSON or XML. - Wikipedia
Server-Side versus Third-Party
So what’s the difference between server-side and third-party? This was what I needed to know when I began my research to determine how to fulfill the criteria of my first group project.
The best way I came to understand it is that third-party APIs are developed externally and provide ready-made functionalities, to save time and effort when building out an application. Server-side APIs mostly consist of end-point data that you are looking to pull on and utilize in your application.
How to use a Server-Side API
Before I jump into that, I want to cover the API I chose and show you more about the research I needed to do, so that I could use it.
Giphy.com
So pretty much everyone I know uses giphy.com whether they know it or not. Either you are sending a gif via slack or text message, most likely it’s coming from giphy.com.
I was surprised to find out how available the API is to use, however I do know that if I want to roll my app out full time then I will need to switch to a product API key. But we’re getting ahead of ourselves. So let’s talk about the key.
API Key
To be able to acquire an API key you need to sign up for a software development kit with Giphy.
It was a really simple process and I highly recommend it for playing with an image API.
Developer Tools
developers.giphy.com the developer tools are easy to access and navigate.
The Documentation
The API Quick Start Guide provided clean and clear instructions on how to implement. For my project I was specifically looking to have a random GIF pulled every time a keyword was submitted.
JSON Formatter
To review the data, I needed a JSON Formatter for my browser. So that the data in the URL was easy to read and parse through.
Ultimately I was looking to get to the downsized URL, but we will talk about those specifics later.
This summarized the initial research that was required to determine if I could potentially use this API for my project.
API Implementation
To begin, we need to start with the HTML framework, then lead into the JavaScript that will ultimately do the API call.
HTML
In the HTML document I needed to have an input that would take in a keyword. This was accomplished by defining a drop down field and setting the ID to something I could call on like “choose-word”.
JavaScript DOM & Functions
The word input selected, then needed to be connected to the JavaScript.
This chosen word then needs to be passed through our first function and placed it in our wordValue string variable.
And then the variable is passed on to the giphyGenerator function.
JavaScript API Call
Now that we have the word value in our generator function, we can make our call to the Giphy API using that word.
Now… for my specific project I do have this function doing a bit more than just taking the keyword. I also allowed the user to combine the keyword with a name if they so chose to, but it wasn’t necessary to kick off the function or API call.
Let’s break down what this call is doing (without getting into the name details).
https://api.giphy.com/v1/gifs/randomThis is the base URL found in the Giphy documentation.
?tag=${searchTerm}The tag is the keyword for this particular API call. Some different APIs will have a different way of stating this like “?q=” and all sorts of other possibilities. Which is why the documentation is essential in using an API.
&rating=gThis parameter made it so that we could keep all of our calls G rated.
&api_key=[API_KEY]Finally, this is where we place our API key given to us in the developers dashboard.
Now, beyond the URL, the function calls the fetch() function to make an API request to Giphy. The fetch() function returns a promise, which is then handled by the .then() method. The .then() method takes a callback function as an argument, which is executed when the promise resolves.
The callback function in this case simply converts the response from the Giphy API to JSON format. This JSON data can then be used to display the GIF image on the project web page.
Which is what we get into next…
Displaying the data on the HTML
First, we need to establish where the data will display on the HTML side.
I wanted to keep it simple, so I placed a div element on the HTML side for where I wanted the JavaScript to push the data.
Again, for us to make this connection, we needed to connect the HTML to the JavaScript through the document selector.
Finally, by using the document selector established, we can use innerHTML to push pretty much whatever we want within that div.
As you can see here, I created another div so that I could add some CSS to it and then get into displaying the data points. This leads us into another point of research.
Traversals
displayGiphy.data.images.downsized.urlFor this, we needed to dig down in the specific location the data point was that we wanted to display on the web page.
From this blown up version, you can see how to traverse down to the URL that we needed. So then we just needed to make sure we placed it inside an <img> tag.
Here you can see the view from the Chrome developer tools how the image displays on the web page.
Summary
And that’s how I did it. I applied the same methods to using the Quotes API as well. This can be utilized for most server-side APIs. Always remember that each API is unique and ideally is well documented to help determine how to best implement it.
Thanks for reading! Let me know in the comments if you learned anything from my experience with the Giphy API.
I’ve learned so much more than just about APIs during this course. I really need to write another post summarizing all the work I’ve done in this first month. Hopefully I will find the time and you will hear from me soon! Otherwise, keep following my posts on LinkedIn for a look at new repos I am pushing!
What did you think? Leave me a comment and share!