freeCodeCamp Challenge Guide: Use the Twitch JSON API

freeCodeCamp Challenge Guide: Use the Twitch JSON API
0

Thanks for posting. I didn’t know that Heroku thing existed, very handy.

hi, I didn’t understand this line above: "instead of using Twitch’s API, we recommend hard-coding this JSON3.0k into your app as a variable. It is a series of responses for different accounts from Twitch."
you mean we make a variable and get the fixed result from that variable? if yes then what is the point of this challenge? doesn’t this make writing this app far easier than previous challenges?

3 Likes

hi there. I also had the same question… FreeCodeCamp even created a fake twich api… Well, I realized only a few of the legitimate Twitch APIs are available from codepen.io, very few… And you do need to sign up and get your Client id from the api provider. Other than that, I got tired of it, even grabbed some api responses I got from a PHP api requester I wrote as herokuapp. And finally pasted that JSON data to my codepen app. Whatever, was a hell of a challenge, took me too long! an entire week. But learned a lot from all these limitations. Particularly that hosting apps in codepen for doing this kind of projects is not the best scenario. Heroku is a better choice, you have better control of your resources. So much for it… gotta stick with the game rules at freecodecamp.

1 Like

Thanks for this information zelite. However, when I want to get a Client ID on Twitch, it asks me for a “Redirect url”, and I don’t know what it is. Can you please help me on this one?
Thanks

On the redirect URL I just put the url where I have my project live. However, I think it does not matter what you put there. That’s only important if you need the users of your app to authenticate with their twitch accounts. Then they are sent to the twich website, they login and are redirected back to your application. Since in this project the data you are accessing does not require anyone to be logged in, you should not need to worry about that.

I think freeCodeCamp pen is not working properly. That StarCraft channel is offline but it appears online on the pen.

Regarding https://wind-bow.gomix.me/twitch-api
Can we request data for multiple channels instead of sending individual requests for each one?

I try to get online streams from the twitch api.
For example:

I will get stream infos about Quin69. So first i want to get the _id of the account like this:
"https://wind-bow.glitch.me/twitch-api/users/quin69"
That’s works fine, i’ll get the following response:

{"display_name":"Quin69","_id":56649026,"name":"quin69","type":"user","bio":"Professional Kiwi Gamer.","created_at":"2014-02-12T11:14:23Z","updated_at":"2017-06-09T11:03:56Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/quin69-profile_image-6db6991ad34ac480-300x300.jpeg","_links":{"self":"https://api.twitch.tv/kraken/users/quin69"}}

But when i then try to get the stream of his ID like this:
https://wind-bow.glitch.me/twitch-api/streams/56649026

I always get the following response, despite he’s actually streaming:

{"stream":null,"_links":{"self":"https://api.twitch.tv/kraken/streams/56649026","channel":"https://api.twitch.tv/kraken/channels/56649026"}}

I have this Problem with alle users so far.

Anybody knows a solution?

1 Like

Same to me. I’ve been looking around FCC and it feels like this project is deprecated. So I’m doing it as an exercise. I will try to make an app simulating what it would be like if we had access to the real API.

When I have a decent version I will post it.

2 Likes

try using the name followed by ?callback=? to get the stream

for example:
"https://wind-bow.glitch.me/twitch-api/streams/quin69?callback=?"

1 Like

Thanks Lester!

It seems to work!

Nice!

You’re welcome. I also just found that solution somewhere.

But How do I get users’ online status from the returned json data?

you need to look to see if the user has an active stream

1 Like

Thanks @fentablar inactive users return “stream:null” right?

iirc, if it’s a legit user acct the stream would come back as null, but if it’s not a legit user I think it comes back as undefined.

EDIT: that’s going from memory tho, you should run some tests in the console to check

Hello guys Iam trying to call the twitch api and i get 0 in the console …
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://wind-bow.gomix.me/twitch-api”, true);
xhr.send();
xhr.status;
console.log(xhr.status);
console.log (xhr.statusText);

Hey guys I’ve just completed it https://codepen.io/c0d3g0d/full/awBNoo/

It works fine but I need your feedback.

1 Like

The JSONP method is no longer applicable as twitch requires a api key now

1 Like

Hey guys,
I’m currently using Flexbox to play around with alignment, but I’m having a hard time getting it to work.

I’m trying to fit my logo and my two other paragraphs to fit inside the flex container in a row, but it keeps ending up in a column. The internet has been telling me to put it on flex-direction, justify-content etc. but it’s still not working…Any help would be great!!!

I’m also a very, very beginner at this while working on it on and off due to full time work.

Thank you,

Link below:
Twitch Api