Gaming… It’s a word that quite a number of us can connect to, from Nintendo’s Game & Watch of the early eighties to PlayStation 4 where we are now, we’ve been part of this ride and we’ve enjoyed every bit of it. Apart from being players, quite a number of us love to watch and for this reason, live streaming of video games; what began as a hobby for most, is now a global enterprise. Together we’ll walk through a step by step process of creating your very own live gaming platform.
What we want. . .
We’re going to make a list of what we expect of our platform. Whatever we build can’t be called a platform until:
- It is super light weight, response time must be as fast as possible.
- It can show us who’s online and who’s not.
- We can click on a profile’s username and watch what they’re streaming ( if they’re online) or check out their profile ( if they’re not ) without having to sign in while watching.
- For profiles that are online, we can also see additional details and information about what they’re streaming.
- We can see if an account has been closed or suspended.
P.S : If you’d rather view the app straight away then click here
Creating our landing page
First of all, we need to build our landing page with good old HTML and CSS. This is the part where all the creativity you can muster is encouraged; fonts, color combinations, transitions… you name it. It all counts here…
Getting our API data
To get data on every profile ( or streamer) on our platform, we’ll have to make a URL (uniform resource locator) request to Twitch. Doing this involves having a client ID which will be embedded in our request, the ID can be obtained by signing up with Twitch.
Now we’ve gotten the ID, we can proceed to create an array of our streamers and assign them to a variable for easier rendering whenever we need it, we’ll also assign our client identification to another variable for the same purpose of ease. Same applies to the two URLs which will be used to fetch data from Twitch’s API; one for fetching every user in the array and the other for fetching what they’re streaming, not to forget our function where all the action will be happening as well, once we’ve created the necessary variables, we can move forward:
Adding our user data for all profiles
For every user in our array of streamers (check second demo), we’ll append the data retrieved from our API call to our HTML. We can accomplish this via DOM manipulation with the aid of in built jQuery methods:
Filtering out our online users.
To get our online users as well as create links that enable us watch what they’re streaming and show additional information about what they’re streaming, we’ll have to add certain conditions to our
if statement in Demo 1. After adding these conditions, we can now append the data for online users to our DOM:
Filtering out our offline users
Now we’ve gotten our online users, all we need do is add the final part of our
if statement and in it encapsulate the behavior of an offline user. When this is done, we can now append our data to the DOM.
Enhancing our data display
So far we’ve been able to get the necessary data we need and also filter it into appropriate sections but something is still missing, we need to add a bit of ease to our display, this way we can further understand stuff more clearly. A good solution is to use a drop down menu for all sections:
offline . This way, we can easily command whichever section we want to display. We shall make use of the
slideToggle() method in JQuery to achieve this:
There, you have it… your very own live stream gaming platform! You can tweak the data to give you results you never thought possible. I decided to go with JQuery in this project because it’s lightweight and it achieves the same results with less lines of code (who wants a bug scare anyway)? Do you feel different? Hit me up with what you think, I’ll be waiting in the comments section below… Adios!