Demo: Twitch.tv Channel Viewer
Twitch.tv is a popular video streaming website that is best known for their video game live-streams. There are literally tons of channels and users on there daily, along with a dedicated chat room for each channel. Users enjoy interacting with the channel’s content creator as well as interacting with other users via chat.
Twitch.tv also provides a great (and free) API for developers to use. Twitch.tv originally did not require a key to develop applications with its API, but recently requested that developers register for an API key so they could begin checking to see what their API was being used for.
Who’s Online? Offline?
To start this project, I needed a list of channels to provide the API with so I could look up their statuses. Since this was one of FreeCodeCamp’s required intermediate projects, we’ll use the FreeCodeCamp’s account to see if they’re online and if the channels they follow are also online.
For the overall design, I wanted to create a user interface that was very easy to navigate and familiar to people. I decided to go with a TV guide approach since everyone’s seen one of those, right?
The first part to this project was laying out the HTML for all the data to populate into. While I could have simply chosen just one container to have the data append to, I decided to break it up into three separate div’s.
The first div would be used to populate all channels that were online, the second div would be for channels that were offline and a third for channels with no information available.
For now, we’ll just worry about getting the data into their proper containers first.
Get the Data
The data for this API is provided in JSON format. To access the data, I needed to do an AJAX call to the API. Unfortunately, I wasn’t able to use a $.getJSON call to work for this project as it required a way to provide the API with the API Key. Some APIs will allowed you to concatenate an API directly into the URL when making a GET request, but Twitch.tv does not offer this option. Also, AJAX calls are a bit more robust with the option to handle errors.
I built and nested three AJAX calls inside each other for this project. The first one did an initial check to see if FreeCodeCamp was online, the second checked for channels that FreeCodeCamp follows and a third one to check for imaginary channels to ensure the application was working correctly.
The data that gets returned is one giant object. The object, of course, needs a name to be referred to so you can manipulate the data and populate the HTML skeleton I laid out earlier. For the sake of simplicity, I just called everything “data” and added a number to the end to distinguish them.
Using dot or bracket notation, you can navigate the objects to get to the nested elements and their values. The object contains everything from the channel name to the channel’s URL and profile icon.
Helpful Tip: If you have a hard time navigating through the object and it’s elements, I recommend getting on Google Chrome and downloading a JSON formatter plugin from the Chrome Web Store. Mozilla also has similar plugins for their browser as well.
Based on the channels online status, each channel is then appended to the online HTML container or offline container. The .append() method is used to add each item into the container, along with some HTML code and attributes to create a link and display the channel’s logo.
I also added three buttons to the top of the application allowing users to select which channels to view; online, offline or all. The buttons are simply adding and removing CSS classes that will either display the containers selected or none.
I also color coded the sections, making the online channels appear in teal, the offline channels in a burgundy/pink color and unavailable channels appear in gray. There are also little circular “lights” to the left of each channel’s icon, indicating if they are red or green. The same circular “lights” are also present in the buttons at the top of the application for easy visual navigation.
Animations on the web can either be really cool or just straight up annoying to see. I felt the way the channels appeared on the application felt stoic. They just appeared and disappeared without a real “professional” finish to it.
To remedy this, I decided to experiment with Greensock Animation Platform (or GSAP) to add a little bit of animated movements with the channels. The initial loading of the application will load as normal, without any animation. As users interact with the application, the channels will appear to fade in and load from the left or just fade in for all the channel containers at once.
It was a subtle move but I felt that it polished out the application a bit more for the user experience.