Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

Vue, Axios, and Giphy API Tutorial

https://codepen.io/AleaQ/pen/PeJLxg

I am going to keep this tutorial short and sweet. Feel free to view a more detailed version on my github. This tutorial assumes you know what an API is. https://github.com/AleaQ/axios_with_vue_tutorial

Why Axios?

I like using Axios, because it’s easy to set up and returns a promise. If you don’t know what a promise is you can read more about it here. You can call an API with AJAX/getJSON, but I find Axios to be cleaner and easier to read.

npm install axios

Why Vue?

I first started writing this tutorial without Vue and had to take so many additional steps I decided to add Vue in to keep the code cleaner and easier to write. Plus, I just love using Vue.

npm install vue
npm install vuetify --save (optional)

Let’s Get Started:

I will be using the Giphy API for this example. You will need to get an API key if you plan on building out the code for this tutorial. I would also recommend you read the Giphy API documentation. I also used the component library Vuetify for the CSS markup. You don’t need to use it to for this tutorial I just wanted to make things look decent. You can achieve the same thing with HTML/CSS/Vue markup you’ll just need an input field, img tag, and submit button.

Sometimes you just want to take the code and dissect it yourself. So, for those of you who like to do that, I’ll dump all the code at the bottom. For those who would like an explanation, keep reading and I’ll break it all down

Let’s Break It Down

Like with most APIs, you’ll need a base url, an api key, and the search value. Giphy has additional options and I will be using the “limit gifs” and “rating” options. In case you were too lazy to read the Giphy documentation, don’t worry I got you covered 🙂

Here are the pieces you’ll need to construct the API. You could plug all of this into one long string, but it’s best practice to break it a part to make it easier to read and to be changed in the future.

      const PUBLIC_KEY = 'YOUR_GIPHY_KEY';
const BASE_URL = '//api.giphy.com/v1/gifs/search?';
const LIMIT = 1;
const RATING = 'pg';

Now let’s set up our data component options to hold the text the user enters for the api and also to hold the API information returned.

data() {
return {
gif: [], //this is to hold the whole array (optional)
gifSrc:'', //this is required to render the gif in your img src
search: '', //this v-model will be the text the user puts in the search box
valid: '' //this is for vuetify markup to validate text was entered (optional)
}
},

Now let’s bring it all together!

axios.get(BASE_URL+'q='
+ this.search
+ '&limit='+ LIMIT
+ '&rating='
+ RATING
+ '&api_key='
+ PUBLIC_KEY)
.then((res) => {
this.gif = res.data;
this.gifSrc = res.data.data[0].images.original.url
})

So what’s going on here? We are calling the API with the base URL that Giphy gave us. The q= let’s the url know to expect queryable text next, we are limiting to 1 giphy per call, we have a rating of PG to keep things safe for work, and we are adding in our public api key.

Now here’s the magic. Axios does a get call and then waits until it receives all the data then returns it in the “.then” res variable. I will usually do a console.log (res) to see what is returned and work down the api data to find what I want. Once I found the secret sauce path to the .gif image I attached it to my data option “this.gifSrc” this.gifSrc = res.data.data[0].images.original.url

<v-card-media :src="gifSrc" height="200px">
</v-card-media>

If you wrap this call in a method and add it to a button it can be called on click. You can also add the function in mounted with a custom search and it will be called on page load.

   <v-btn
color="pink"
class="white--text"
:disabled="!valid"
@click.native="getGif()">
submit
</v-btn>

AND VOILA! You’ve just connected Axios to the Giphy API

Vuetify Code:

<v-container fluid class="">
<v-layout row wrap justify-center>
<v-card class="pa-2">
<v-card-media :src="gifSrc" height="200px">
</v-card-media>
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field
v-model="search"
label="search gif"
@keyup.enter="getGif"
box
required
></v-text-field>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="pink"
class="white--text"
:disabled="!valid"
@click.native="getGif()"
>
submit
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-layout>
</v-container>

Scripting Code:

data() {
return {
gif: [],
gifSrc:’’,
search: '’,
valid: ''
}
},
methods: {
getGif() {
const PUBLIC_KEY = 'YOUR_GIPHY_KEY’;
const BASE_URL = '//api.giphy.com/v1/gifs/search?’;
const LIMIT = 1;
const RATING = 'pg’;

axios.get(BASE_URL+’q=’+ this.search + '&limit=’+ LIMIT + '&rating=' + RATING + '&api_key=' + PUBLIC_KEY)
 .then((res) => {
console.log(res.data.data[0].images.original.url)
this.gif = res.data;
this.gifSrc = res.data.data[0].images.original.url
})
 .catch(function (error) {
console.log(error);
});
}
}