Photo(c) Ugur Akdemir

FreeCodeCamp: Use the Twitch.tv JSON API

This is the last intermediate front end development project in Freecodecamp. And we’re going to use Twitch.tv JSON API.

I think this one’s going to be quite confusing because there will be a lot of details.

But I’ll make it simple just to give you a head start.

Markup

So my markup is pretty simple.


<div class="container">
 <h1 class="text-center">Twitch Streamers</h1>
 <div class="info">
 <div class="row headline">
 <div class="col-sm-4"><h2>Channel</h2></div>
 <div class="col-sm-4"><h2>Status</h2></div>
 <div class="col-sm-4"><h2>Game</h2></div>
 </div>
 </div>
</div>

I used a Bootstrap framework just to work faster.

I used a row which is divided into three columns because I will only be using the channel name, status and the game they’re playing if they’re online.

So each game will require me to create one row with three columns.

Actually, using a table here will be more semantic. So I suggest using a table, one <tr> with three <td> elements.

Style rules


body {
padding-top: 70px;
background-color: #000;
color: #fff;
}

h1 {
padding: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}

h2 {
font-size: 21px;
margin: 0;
}

div.headline {
background-color: #fff;
color: #630170;
border: none;
}

p {
color: #fff;
font-size: 18px;
}

.col-sm-4 {
text-align: center;
}

.row {
border-bottom: 2px solid;
padding: 15px;
}

a,
a:visited {
text-decoration: none !important;
color: #fff;
}

a:hover {
color: #ddd;
font-weight: bold;
letter-spacing: 1px;
}

.container {
background-color: #630170;
}

.channel {
font-weight: bold;
}

So Bootstrap did the styles for the structure of my markup. And I just added colors and padding to give it a boost.

Script

Reminder: I used jQuery here. So make sure you have access to that either by CDN or by download. Or if you’re using CodePen or other tools, you can just add them in the settings.

First, I stored the channel names into an array called channels.


var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];

And I’m going to give it where we’re going to start.


$(document).ready(function() {
gatherData();
});

So when the document is loaded, we’re going to call the function, gatherData().

function gatherData() {
 channels.forEach( function(channel, index) {
 var api = formAPI("streams", channel);
 getResults(api, channel);
 });
}

In this function, we’re going to execute a statements for each channel stored in our array.

  1. We’re going to form the api link.
  2. We’re going to use this api link to get the JSON of this particular channel.
  3. And then we’re going to display the results.

Take Note: We formed an API using streams.

This is the part where it’s going to be quite confusing.


function formAPI(type, channelName) {
 var api = "https://wind-bow.gomix.me/twitch-api/";
 api += type + "/";
 api += channelName;
 api += "?callback=?";
 return api;
}

This is the function to form the api depending on the name of the channel and what we need on that channel.

In order to use the Twitch API, you’re going to need a client id based on this. However, Freecodecamp gave us an update on what to use instead.

Use https://wind-bow.gomix.me/twitch-api instead of twitch’s API base URL (i.e. https://api.twitch.tv/kraken ) and you’ll still be able to get account information, without needing to sign up for an API key. – Freecodecamp

Check the Twitch API Overview to know what particular details you’re going to need.

What are the details that we’re going to need?

We already got the channel name.

Next, we need to determine if they’re online or not.

If they are online, what is the game they’re playing?

And lastly, what is the link to their Twitch channel?

And I suggest creating an object with these details as properties. So it’ll be easier to store and deal with.


var Stream = function(channel, status, game, link) {
this.channel = channel;
this.status = status;
this.game = game;
this.link = link;
};

After we formed the API, we’re going to call the function, getResults().


function getResults(link, name) {

$.getJSON(link, function(data) {
var status, game, twitchLink;

if (data.stream === null) {
var userAPI = formAPI("users", name);
$.getJSON(userAPI, function(data) {
if(data.status == 404 || data.status == 422) {
status = data.status;
game = data.message;
}
});
game = "offline";
status = "offline";
} else {
game = data.stream.game;
status = "online";
}

var api = formAPI("channels", name);

$.getJSON(api, function(data) {
var channelsInfo = [];
var stream = new Stream(name, status, game, data.url);
channelsInfo.push(stream);
displayData(channelsInfo);
});

});
}

 

You can only use data returned by the getJSON method inside it. You need to store it into another variable so you can use it outside of getJSON method.

The api formed here is streams. In this type, we can know if the channel is online or offline and what game they are playing.

However, we also need to know if the channel closed or never existed.

To determine that, we need to form an API link using users.

You better check the link that will be formed in your browser so that you can understand how I knew this. I also did a lot of research in the forum.

So if the status is 422, it means that the channel or the use of this channel already closed his account. If the status is 404, the channel never existed.

How did I know? I checked the formed API in my browser and I saw the JSON data. That’s how I learned what properties I’ll be using.


 var api = formAPI("channels", name);
 
 $.getJSON(api, function(data) {
 var channelsInfo = [];
 var stream = new Stream(name, status, game, data.url);
 channelsInfo.push(stream);
 displayData(channelsInfo);
 });

You saw this piece of code above, right?

We formed another API link using channels.

I did it so we can get the link to they game they’re playing if they are online.

After that, we’re going to create an instance of the Stream object and store it into an array called channelsInfo.

Next, we’re going to call the function, displayData() with the channelsInfo as an argument.


function displayData(output) {
 
 var markup = "<div class='col-sm-4 channel'>" + output[0].channel + "</div>";
 markup += "<div class='col-sm-4'><a href='" + output[0].link + "' target='_blank'>" + output[0].status + "</a></div>";
 markup += "<div class='col-sm-4'>" + output[0].game + "</div>";
 var finalMarkup = "<div class='row'>" + markup + "</div>";
 $(".info").append(finalMarkup);
}

In this function, I’m writing a row with three columns filling in the three needed details and the link to the game. Then, we can now append them into our markup.

You can check my whole code here.

 

And that’s it. That’s how we use the Twitch API.

I hope that you can understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s