Chingu FCC Speedrun Project 7 — TwitchTV App

TwitchTV app from the intermediate front end dev projects is my next project for the FCC Speedrun Challenge. This project uses the Twitch API to get data about the users who are streaming and display their status and other details.

I used the alternative base url given by FCC for the API without using the API key. Frameworks used are bootstrap and jquery. I didn’t pay much attention to styling on this one because I spent a LOT of time working on the API call and getting data properly. I wanted to wrap it up as soon as all the user stories were satisfied. Alright lets begin to look at the various stages involved.

Stage 1: The layout

Very little is required in terms of layout for this app. I included a header , a footer and a container div to display the data obtained from the API. Using the bootstrap classes for media objects (see here), I formatted such that the logo image and the channel info are aligned side by side.

Stage 2: Getting data from the API

This is where it is different from the previous intermediate level projects. We need 2 different API calls — One (using the route /channels/:channel) to get the data about the streamer, irrespective of whether they are online or offline; and the other (using the route /streams/:stream) to get the info about what they are streaming, their status , etc when they are online. The manner in which I did this is as follows:

1. First of all, I used the array of streamers given by FCC, iterate through the items of array and get the data for each streamer through AJAX calls.
2. First API call — using AJAX call and datatype as jsonp (important!), get the display name and logo. Further, you can get details such as their intro, banners, who they follow, etc. From this url, no information can be obtained about whether they are currently streaming or not. Hence, the second API call is required. For channels that do not exist, the object returned would contain error, message and status properties. Test this by including non-existing usernames such as ‘brunofin’ in the streamers array.
3. Second API call — Get the info of online and offline streamers. If the streamers are online, get info about the game they are currently streaming and status. For offline streamers, the stream object will be null.

The nested API calls were done in this manner:

//inside for loop of streamers
var url = 'https://wind-bow.gomix.me/twitch-api/channels/'+streamers[i]; //to get channel info
//first API call
$.ajax({  
    type: 'GET',  
    dataType: "jsonp",  
    url: url,  
    success: function(data1){ 
    //second API call 
         $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+dataI.name).done(function(data2){ 
       if(data2.stream === null){ 
           //current streamer is offline 
       }    
       else{ 
          //current streamer is online     
       }
    }
  error: function(err){
     //handle errors
   }   
});

The project finally looks like this:

Twitch.tv App

The project source code is here.

The Twitch app is live here.