怎么观看twitchtv_构建一个TwitchTV Status App

最新推荐文章于 2024-11-08 14:58:24 发布

cumifi2519

最新推荐文章于 2024-11-08 14:58:24 发布

阅读量1.5k

点赞数

文章标签： java python 人工智能 ajax 大数据

原文链接：https://www.freecodecamp.org/news/building-a-twitchtv-app-project-8824d61fe7a5/

版权

怎么观看twitchtv

by Ayo Isaiah

通过Ayo Isaiah

构建一个TwitchTV Status App (Building a TwitchTV Status App)

Last week, I tackled the last of the Intermediate Front-End Projects which involved building a TwitchTv App using the Twitch API to display the status of a set of Twitch Streamers.

上周，我解决了最后一个中级前端项目，该项目涉及使用Twitch API构建TwitchTv App ，以显示一组Twitch Streamer的状态。

These were the user stories for this project:

这些是该项目的用户故事：

Users can see whether Free Code Camp is currently streaming on Twitch.tv.
用户可以查看Free Code Camp当前是否正在Twitch.tv上流式传输。
Users can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.
用户可以单击状态输出并将其直接发送到Free Code Camp的Twitch.tv频道。
If a Twitch streamer is currently streaming, Users can see additional details about what they are streaming.
如果Twitch流媒体当前正在流式传输，则用户可以查看有关其流式传输的其他详细信息。
Users will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed).
如果流媒体已关闭其Twitch帐户(或该帐户不存在)，则用户将看到一个占位符通知。

设计 (Design)

The design of my app is quite similar to the example app given in the project description.

我的应用程序的设计与项目说明中给出的示例应用程序非常相似。

The only major difference is the search input at the top of the page which I put there for the fifth user story (more on this below).

唯一的主要区别是页面顶部的搜索输入，我在此处输入了第五个用户故事(更多信息请参见下文)。

I used Skeleton to help with basic styling and responsiveness so everything looks good on desktop and mobile.

我使用Skeleton帮助提供基本样式和响应能力，因此在台式机和移动设备上看起来一切都很好。

For the profile pictures, I used background images instead of <img> tags. This is because simply by setting the background-size to cover, it allows the image to scale to the size of it’s container no matter the dimensions.

对于个人资料图片，我使用背景图片代替了<img>标签。这是因为仅通过将背景大小设置为cover即可，无论尺寸如何，它都可以将图像缩放到其容器的大小。

This is something I learnt while working on the Random Quote Generator project and it was nice to put it to practice again here.

这是我在“ 随机报价生成器”项目中学习到的，很高兴在这里再次进行练习。

思考过程 (Thought Process)

First, I made an array of Twitch Streamers and used a for loop to iterate through the array and make consecutive AJAX requests so that I could fetch the data for each streamer.

首先，我制作了一个Twitch Streamer数组，并使用for循环遍历该数组并发出连续的AJAX请求，以便可以获取每个Streamer的数据。

var twitchStreamers = ["dreamhackcs", "skyzhar", "freecodecamp", "faceittv", "comster404", "brunofin", "terakilobyte", "robotcaleb", "sheevergaming", "esl_sc2", "ogamingsc2", "jacksofamerica"];

...

for (var i = 0; i < twitchStreamers.length; i++) {        ajax();}

...

function ajax () {        $.ajax({            url: "https://api.twitch.tv/kraken/streams/" + twitchStreamers[i] + "?callback=?",            dataType: "jsonp",            data: {                format: "json"            },

success: function (data) {                fetchData(data);            },

error: function () {                console.log("unable to access json");            }        });    }

If the AJAX request is successful, it calls another function fetchData() which simply fetches the required data from the JSON output such as the username, status, url and display picture for each channel and calls the updateHTML() function which simply takes the data and updates the DOM.

如果AJAX请求成功，它将调用另一个函数fetchData() ，该函数简单地从JSON输出中获取所需的数据，例如每个通道的用户名，状态，URL和显示图片，并调用updateHTML()函数，该函数简单地获取数据并更新DOM。

function fetchData (data) {

if (data.stream === null) {            url = data._links.channel.substr(38);            updateOfflineUsers();        }

else if (data.status == 422 || data.status == 404) {            status = data.message;            updateHTML(".unavailable");        }

else {            if (data.stream.channel.logo !== null) {                picture = 'url("' + data.stream.channel.logo + '")';            }

else {                picture = 'url("https://cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")';            }            url = data._links.channel.substr(38);            status = "<a href='https://twitch.tv/" + url + "' target='_blank'" + "'>" + data.stream.channel.display_name +  "</a>" + " is currently streaming " + data.stream.game;            updateHTML(".online");        }    }

For offline streamers, there was an extra step. I had to make another API call using https://api.twitch.tv/kraken/channels/ to fetch data for each channel because the first call (using https://api.twitch.tv/kraken/streams/) provided no info about the offline streamers except the fact that they were not active at that moment.

对于离线流光，还有一个额外的步骤。我必须使用https://api.twitch.tv/kraken/channels/进行另一个API调用，以获取每个通道的数据，因为提供了第一个调用(使用https://api.twitch.tv/kraken/streams/)没有关于脱机彩带的信息，除了它们当时不活动的事实。

function updateOfflineUsers () { //If users are offline, make new ajax request to find user info        $.ajax({            url: "https://api.twitch.tv/kraken/channels/" + url,            dataType: "jsonp",            data: {format: "json"},            success: function (json) {                status = "Channel " + "'<a href='" + json.url + "' target='_blank'" + "'>" + json.display_name + "</a>'" + " is currently offline";                if (json.logo !== null) {                    picture = 'url("' + json.logo + '")';                }                else {                    picture = 'url("https://cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")';                }                updateHTML(".offline");            }        });    }

Once I had those in place, the four user stories were completed and I was ready to go. At this point, I marked the project as completed, but soon after, I thought it would be really cool to extend the functionality of the app a little bit.

一旦有了这些，四个用户故事就完成了，我准备出发了。此时，我将项目标记为已完成，但是不久之后，我认为稍微扩展一下应用程序的功能真的很酷。

This was when I added a fifth user story:

这是当我添加第五个用户故事时：

Users can search for TwitchTv Streamers and view whether they are online or not.
用户可以搜索TwitchTv流媒体并查看它们是否在线。

So I made a search function that takes the input of the user and uses it to make the API call:

因此，我做了一个搜索功能，接受用户的输入，并使用它来进行API调用：

function search () {        $(".online, .offline, .unavailable").empty();        showAll();          var searchQuery = $(".search-twitch").val();        var user = searchQuery.replace(/[^A-Z0-9_]/ig, "");        $.ajax({            url: "https://api.twitch.tv/kraken/streams/" + user,            dataType: "jsonp",            data: {                format: "json"            },

success: function (data) {                fetchData(data);                                }        });    }

I used a bit of regex to remove special characters and spaces from the users query leaving only numbers, letters and underscores. I think this is important because Twitch does not allow special characters (such as $, &, e.t.c) or spaces in the usernames, so it was necessary to filter those out.

我使用了一些正则表达式从用户查询中删除特殊字符和空格，仅保留数字，字母和下划线。我认为这很重要，因为Twitch不允许在用户名中使用特殊字符(例如$，＆等)或空格，因此有必要将其过滤掉。

It also helps so that if a user searches for something like “free code camp” (separating whole words with spaces) instead of “freecodecamp”, it still returns the expected relevant result.

它还有帮助，因此，如果用户搜索“免费代码营”(用空格分隔整个单词)而不是“ freecodecamp”之类的内容，它仍会返回预期的相关结果。

So that was pretty much it for this project. You can view the final version on Codepen.

因此，这个项目就差不多了。您可以在Codepen上查看最终版本。

重点介绍 (Key Takeaway)

Even as I write this blog post, several ways to improve the user experience on my app continue to pop into my head so my key takeaway from this project is:

即使在撰写此博客文章时，改善我的应用程序上的用户体验的几种方法仍在我脑海中浮现，因此我从该项目中获得的主要收获是：

Software is never finished. It is a process and it is always evolving.

软件永远不会完成。 这是一个过程，并且一直在发展。

下一步是什么 (What’s next)

Right now, I’m pushing hard to finish the Intermediate Algorithm Scripting section on FCC in the next couple of days so that I can quickly move on to the Advanced Algorithm section.

现在，我正努力在接下来的几天里完成FCC的“ 中间算法脚本”部分，以便我可以快速进入“高级算法”部分。

My (short-term) goal remains claiming the Front-End Certification by the end of May and if all goes well, I should be able to get it by then. Wish me luck.

我的(短期)目标仍然是在5月底之前获得前端认证，如果一切顺利，那么我应该能够在那时获得认证。祝我好运。

If you want to reach out or connect with me, you can find me on Twitter or email me. A version of this post was publish on my personal blog.

如果您想联系我或与我联系，可以在Twitter上找到我或给我发送电子邮件。 该帖子的一个版本已发布在我的个人博客上。