Chingu FCC Speedrun项目7 — TwitchTV App 电视电影小迷妹 TVco.cn

来自中间前端开发项目的TwitchTV应用程序是我参加FCC Speedrun Challenge的下一个项目。该项目使用Twitch API获取有关流用户的数据，并显示其状态和其他详细信息。

我使用了FCC为API提供的备用基本网址，而不使用API密钥。使用的框架是bootstrap和jquery。我对此样式的关注不是很多，因为我花了很多时间进行API调用并正确获取数据。我想在所有用户故事都满意后就将其总结。好吧，让我们开始看一下所涉及的各个阶段。

阶段1：布局

就此应用程序的布局而言，几乎不需要什么。我包括一个页眉，页脚和容器div，以显示从API获得的数据。使用用于媒体对象的引导程序类（请参见此处），我进行了格式化，以使徽标图像和频道信息并排对齐。

阶段2：从API获取数据

这与以前的中级项目有所不同。我们需要2个不同的API调用-一个（使用路由/ channels /：channel）以获取有关流媒体的数据，而不管它们是在线还是离线。另一个（使用路由/ streams /：stream）以获取有关它们正在流传输的内容，它们的状态等的信息（在线时）。我这样做的方式如下：

首先，我使用了FCC给出的拖缆阵列，遍历该阵列的各项并通过AJAX调用获取每个拖缆的数据。
首次API调用-使用AJAX调用和数据类型作为jsonp （重要！），获取显示名称和徽标。此外，您可以获取详细信息，例如他们的介绍，横幅，他们关注的人等。从此URL，无法获取有关它们当前是否正在流式传输的信息。因此，需要第二个API调用。对于不存在的通道，返回的对象将包含错误，消息和状态属性。通过在streamers数组中包含不存在的用户名（例如“ brunofin”）进行测试。
第二次API调用-获取在线和离线流媒体的信息。如果彩带在线，请获取有关它们当前正在播放的游戏和状态的信息。对于离线流光，流对象将为null。

嵌套的API调用是通过以下方式完成的：

  //在彩带循环内

  var url ='https://wind-bow.gomix.me/twitch-api/channels/'+streamers[i];  //获取频道信息

  //第一个API调用 
  $ .ajax（{ 
 输入：“ GET”， 
  dataType：“ jsonp”， 
 网址：网址， 
 成功：函数（data1）{ 
  //第二次API调用 
  $ .getJSON（'https://wind-bow.gomix.me/twitch-api/streams/'+dataI.name）.done（function（data2）{ 
  if（data2.stream === null）{ 
  //当前的流光播放器离线 
  } 
 其他{ 
  //当前流媒体在线 
  } 
  } 
 错误：function（err）{ 
  //处理错误 
  } 
  }）;

该项目最终如下所示：

项目源代码在这里。

Twitch应用程序已在这里直播。