External API

Simon Planje worked on this topic

Chatting with other people you do not know can be quite difficult, that is why we wanted to add a fun feature to the chatting app. Sending gifs is one of the most used ways of online communication besides chatting with regular text messages. This added feature could make it a little bit more approachable for users to start a smalltalk.

So we introduced the API Giphy. This is a platfom with a tremendous amout of gifs stored in a database. The API gives the option to use a value inserted by the user as searchterm to find gifs in their database. This is exactly what we needed to upgrade our chatting.

But first...

Setup the API

To get the API to work there is a custom url needed to get the items from their database. You can customize this url to your own needs. For example the search half way the url stands for the fact that you want to use a search term to find your gifs, and the number near the end of the url stands for how much gifs you want to get back after submitting your entered the search value. In our case 1 would be enough but we wanted to make sure the users do not get the same gif every time they type the same value. So the gifs will be randomized by picking one of the first five top results. I will explain a litte more about how we did this in the next part.

const url = `https://api.giphy.com/v1/gifs/search?api_key=${process.env.GIPHY_APIKEY}&limit=5&q=${str}`;

This link includes a peronal key that you can get by loggin in to Giphy and request the key. Once this is done you can add the key to the .env file and add it with the dotenv documentation to your url.

GIPHY_APIKEY = your personal key

Calling to the database

After the API is setup you can make your HTTP request to the Giphy API. We will be using the npm package Axios because this makes creating HTTP requests a lot more easy than doing this with vanilla Node JS:

const response = await axios.get(url);

Using value to search

Now we know how to connect we are ready to write some code, next we need some logic to send the value we want to search on to the API. This is how we did this in our app.

To visualize first:

When the gif checkbox is checked I want the text in the message box to be the value to search with in the the API.

First check if there is a value inserted in the input.

if (req.body.message.trim()) {
  // checks for value
  const databaseData = {
    // creates a object that can be submitted to the database
    sender: id,
    content: req.body.message.trim(),
    time: new Date(),
    media: "text",
  };
}

Next we check if the gif checkbox is checked.

//checks sendGif checkbox is checked
if (req.body.sendGif) {
  //get the url ready to use
  const url = `https://api.giphy.com/v1/gifs/search?api_key=${process.env.GIPHY_APIKEY}&limit=5&q=${req.body.message}`;

  const response = await axios.get(url); // get API data ready to search for gif
  const index = Math.floor(Math.random() * response.data.data.length); // generate random number between 0 - 5 to get random gif
  const gifUrl = response.data.data[index].images.downsized.url; // set var gifUrl to the gif you want to show
  // index is used to get the random number
  databaseData.media = "gif"; // set mediatype to gif instead of text
  databaseData.content = gifUrl; // set content of the gif to the url we just got form gifUrl

  // check if there is any link found in the API database
  if (!gifUrl) {
    // if link can't be found, render an error gif :)
    databaseData.content =
      "https://media.giphy.com/media/H7wajFPnZGdRWaQeu0/giphy.gif";
  }
}

Now we have got the data we want to send to the user it is time to add this gif message to the database.

await db
  .get()
  .collection("chats")
  .updateOne(
    { $push: { messages: databaseData } } //push the data object we just created to the database
  );
console.log(`send to: ${req.session.chatroom}`);

Sources

Researsch

• Giphy. (n.d.). GIPHY for Developers. GIPHY Developers. Retrieved June 18, 2020, from https://developers.giphy.com/

• Steve Griffith. (2019, July 24). How to Use the Giphy API [Video]. YouTube. https://www.youtube.com/watch?v=HRh6zHRwRLo

• Tenor. (n.d.). GIF API - Better, Faster & Free | Tenor Documentation. Retrieved June 19, 2020, from https://tenor.com/gifapi/documentation#quickstart+\

Fix problems

• NPM. (2020, January 22). npm: axios. https://www.npmjs.com/package/axios

• Gagliardi, V. (2020, February 12). 4 + 1 ways for making HTTP requests with Node.js: async/await edition. Valentinog. https://www.valentinog.com/blog/http-js/