Exploring the new Twitch API

I don’t have a lot of free time these days, what with my being knee deep in code every day since starting my time at Fullstack Academy’s Grace Hopper program (but that’s a story for another day, another blog post). Back when I did have a bit more chance for leisure, Twitch definitely stole a lot of that time. At first I was simply using it to vicariously enjoy games beyond my meager budget, but soon the communities I’d found through the platform became a bit of a virtual home. Since I don’t have much opportunity to actually watch Twitch lately (not for a lack of trying), why not compensate by spending some quality educational time with the brand new Twitch API?

Launched as of October 2017, the Twitch API provides developers and streamers looking to up their game with data from their server, including information for streams, games, videos, users and more. For this tutorial, I’ll be utilizing stream data and later checking out a particularly interesting feature of metadata. Twitch metadata is user provided content specific to streams featuring the popular games Overwatch or Hearthstone. While I’ve yet to experience the latter, I’ve played a good round or two trying to keep my team alive in Overwatch so that’s the theme we’ll be running with for this demo. I mean, won’t it be cool to put a number to how many Genjis out there are probably asking for healing? But first, let’s look at a general stream request.

There are many options to work with for customizing our queries, but I’ll be mostly keeping it simple for the purposes of this project. Here’s a preview of something like what we’ll be making if you follow along:

Running with the theme of simplicity, we’re going to be making a single page app with no server required and all requests on the frontend. For this we’ll be using Vue.js, a relatively new and I’ve found easy to use Javascript framework.

To start, we will need just two files: an index.html and app.js where all of our Vue Javascript and calls to the API will go. You may also wish to implement a simple CSS file like mine to give some order to your page.

At this time you should also visit the Twitch Developers portal where you can sign up for an API client ID, which you will need to access the API data.

In index.html, we’ll start with a simple base as follows:

Yours may differ, but be sure you have included the scripts for Vue, Axios and a link for your app.

In app.js, we will start by making a new Vue app. A core value of Vue is the reactive connection between your data and the DOM, so in your app you will specify where in the DOM your are connecting and what data you wish to eventually render (these will start empty for now).

As we are making this app to play with API data, we want to add a method where we can make a call to the API and pull in the information. There are different options for this, but my preferred is to use Axios, which is a promise based HTTP client. In our GET request, we include the provided url which is used to specify our search criteria. For my purposes, I decided to query the first 20 live streams of Overwatch currently on Twitch, and in English. Queries in the Twitch API are added on the url, and you can use as many as you would like to narrow down your results. Be sure to set your headers for Axios to include the Client ID you obtained from Twitch! As shown:

axios.defaults.headers.common[‘Client-ID’] = ‘YOUR CLIENT ID HERE’

For my request, as follows:

I get my JSON that looks something like this:

To use this, in our method we will set the data to our data object in the app. Don’t forget to add error handling to any Axios request!

Now we will add another section to the app, that mounts your request methods to run when the app loads. We’re pulling the data, but we aren’t taking any steps to render it to the page. To fix that, we’re going to work on our first Vue component.

The Vue component takes a name and any props that it will be pulling in from the data in your app. Then, you create a template in your component that sets the HTML where you’ll display your data. In Vue, to access your the values within your array, you can use a v-for loop. Now, we’ll have access to each property of the streams we’re looking at. Title, viewers, and the stream’s current thumbnail are what I decided to include in mine. As provided, the thumbnail url leaves sizing of the image open, so I used a bit of string manipulation to set this to 250 by 150 pixels for each.

We’re now one step away from seeing our list of streams on the page! Go to your index.html file that’s been sitting in waiting, we’re finally going to connect it to all our work so far. This is where you reference the name you gave your component, and you also bring in those props you’re using.

Once you’ve added this, go ahead and open up index.html in your browser to check out all the stream data you want to see!

You could stop here, but if like me you’re interested in the previously mentioned metadata there’s more to explore. For this I made a new Axios request as another method on my Vue app (here’s a query you might use for it — ‘streams/metadata?game_id=488552&type=live&first=100’), and added a filter to the response so I’m only working with meta data for Overwatch that has been entirely filled out by the user.

This provides access to some interesting statistics, such as which character each streamer is playing as and what their role is on the team (Offense, Defense, Tank or Support). I thought it might be fun to monitor the percentage of each role for the first 100 live Overwatch streamers, so with a bit of Javascript math I added this to my new component. Once this new component is added to your HTML, you’ll be able to keep an eye on the current trends before you hop into your next match in Overwatch!

If you just want the code, and probably scrolled to the bottom of this post for that purpose, hello! I’ve got you covered. You can check out the project here.

Tracer out