My First Project Using An API

I know you have heard of the ‘word’ API but do you know what it means? I had heard of the acronym API several times but never really bothered to find out what it means. If you are just like me then let me help you. API stands for Application Programming Interface which is a set of definitions and protocols for building and intergrating application software.

Okay…woah what does that all mean? To simplify it, imagine you are in a restaurant, the menu tells you what they (most probably) have in the kitchen. Let’s say you want egg fried rice. Extra vegetables so you can stay healthy. The waiter comes along and you give him your order. The waiter goes to the kitchen and relays your order to the chef, who then plates the food and the waiter is back with your meal. In this scenario, the waiter is our API. The customer/user (us) do not need to know how or when the food was prepared as long as it is fresh and exactly what we ordered. If the food is not what we ordered, we can ask the waiter to change the order.

APIs work in almost the same way as the waiter. They receive a set of instructions, relay the instructions to the back-end and/or database, fetch the requested data and return a response to the source of the request. If the data returned is not correct or unavailable we can try to change the parameters of our request.

I decided that my first project using an API would involve one other thing that I love more than food, movies. Using the The Movie Database API I decided to build a web application that displays the current most popular movie posters together with the movie blurb and using a search bar the user can search for a movie using the title and get almost similar results.

My function to fetch data from the TMDB API

I used this function with the Fetch API to get data from TMDB. The Fetch API could take an entire webpage of it’s own to go through but in our case we have a function that fetches data from a certain URL. Our URL in this case holds a JSON file for the 20 most popular movies at the time the data is fetched and sent back. We would then display the data in the console if we undid the comment but for now we have another function showMovies( ) that will display the data we get back on our DOM.

Our function that displays data to the DOM.

Having fetched the data we can now display it on our Document Object Model also known as DOM. We pass the data we got from the TMDB API to our function as an argument.

We then create an object “movie” that contains a title, poster path(image), and overview(blurb). We create a new div dynamically and give it the name “movieElement”. On the movieElement we then add a class name “movie” and also add a few more elements to the innerHTML of the div. (Also be sure to check out the difference between innerHTML, textContents and innerText. We can then append our movieElement to the main section of our website. The main section had been already created in our HTML.

So what does our website look like with a bit of CSS after consuming the TMDB API? Here have a look…

Screenshot of the website on Github Pages

Here is the Github Repo.

Here is the Github Pages Live Link.