У меня не так много свободного времени в эти дни, потому что я каждый день по колено в коде с тех пор, как начал свое время в программе Grace Hopper в Fullstack Academy (но это история для другого дня, другой пост в блоге). Когда у меня было немного больше возможностей для отдыха, Twitch определенно украл много этого времени. Сначала я просто использовал его, чтобы опосредованно наслаждаться играми за пределами моего скудного бюджета, но вскоре сообщества, которые я нашел через платформу, стали чем-то вроде виртуального дома. Поскольку в последнее время у меня не так много возможностей смотреть Twitch (не из-за отсутствия попыток), почему бы не потратить некоторое время на качественное обучение с новым Twitch API?

Запущенный в октябре 2017 года API Twitch предоставляет разработчикам и стримерам, желающим улучшить свою игру, данные со своего сервера, включая информацию о стримах, играх, видео, пользователях и многом другом. В этом уроке я буду использовать потоковые данные, а позже проверю особенно интересную функцию метаданных. Метаданные Twitch — это предоставляемый пользователями контент, характерный для стримов популярных игр Overwatch или Hearthstone. Хотя мне еще предстоит испытать последнее, я сыграл пару хороших раундов, пытаясь сохранить свою команду в Overwatch, так что это тема, с которой мы будем работать в этой демонстрации. Я имею в виду, не будет ли здорово подсчитать, сколько Гэндзи, вероятно, просят об исцелении? Но сначала давайте посмотрим на общий запрос потока.

Есть много вариантов для настройки наших запросов, но я буду в основном делать это простым для целей этого проекта. Вот предварительный просмотр того, что мы будем делать, если вы будете следовать:

Работая с темой простоты, мы собираемся сделать одностраничное приложение без сервера и со всеми запросами во внешнем интерфейсе. Для этого мы будем использовать Vue.js, относительно новый и простой в использовании фреймворк Javascript.

Для начала нам потребуются всего два файла: index.html и app.js, где будут храниться все наши Vue Javascript и вызовы API. Вы также можете реализовать простой файл CSS, например mine, чтобы упорядочить свою страницу.

В это время вам также следует посетить портал Twitch Developers, где вы можете подписаться на идентификатор клиента API, который вам понадобится для доступа к данным API.

В index.html мы начнем с простой базы следующим образом:

Ваш может отличаться, но убедитесь, что вы включили скрипты для Vue, Axios и ссылку на свое приложение.

В app.js мы начнем с создания нового приложения Vue. Основной ценностью Vue является реактивное соединение между вашими данными и DOM, поэтому в вашем приложении вы указываете, где в DOM вы подключаетесь и какие данные вы хотите в конечном итоге отобразить (сейчас они будут пустыми).

Поскольку мы делаем это приложение для работы с данными API, мы хотим добавить метод, с помощью которого мы можем сделать вызов API и получить информацию. Для этого есть разные варианты, но я предпочитаю использовать Axios, который является HTTP-клиентом на основе обещаний. В наш запрос GET мы включаем предоставленный URL-адрес, который используется для указания наших критериев поиска. Для своих целей я решил запросить первые 20 прямых трансляций Overwatch, которые в настоящее время доступны на Twitch и на английском языке. Запросы в Twitch API добавляются к URL-адресу, и вы можете использовать столько, сколько хотите, чтобы сузить результаты. Не забудьте указать в заголовках для Axios идентификатор клиента, полученный от Twitch! Как показано:

axios.defaults.headers.common[‘Client-ID’] = ‘ВАШ ИДЕНТИФИКАТОР КЛИЕНТА ЗДЕСЬ’

По моему запросу, следующим образом:

Я получаю свой JSON, который выглядит примерно так:

Чтобы использовать это, в нашем методе мы установим данные в наш объект данных в приложении. Не забудьте добавить обработку ошибок в любой запрос Axios!

Теперь мы добавим в приложение еще один раздел, который монтирует ваши методы запроса для запуска при загрузке приложения. Мы извлекаем данные, но не предпринимаем никаких шагов для их отображения на странице. Чтобы исправить это, мы будем работать над нашим первым компонентом Vue.

Компонент Vue берет имя и любые реквизиты, которые он будет извлекать из данных в вашем приложении. Затем вы создаете шаблон в своем компоненте, который устанавливает HTML, в котором вы будете отображать свои данные. В Vue для доступа к значениям в вашем массиве вы можете использовать цикл v-for. Теперь у нас будет доступ к каждому свойству потоков, которые мы рассматриваем. Название, зрители и миниатюра текущей трансляции — вот что я решил включить в свой. Как указано, URL-адрес эскиза оставляет открытым размер изображения, поэтому я использовал небольшие манипуляции со строками, чтобы установить его на 250 на 150 пикселей для каждого.

Теперь мы в одном шаге от того, чтобы увидеть наш список потоков на странице! Перейдите к вашему файлу index.html, который ждал, мы наконец-то подключим его ко всей нашей работе. Здесь вы ссылаетесь на имя, которое вы дали своему компоненту, и вы также вводите те реквизиты, которые используете.

После того, как вы добавили это, откройте index.html в своем браузере, чтобы проверить все данные потока, которые вы хотите увидеть!

На этом можно было бы остановиться, но если, как и я, вас интересуют ранее упомянутые метаданные, есть еще что исследовать. Для этого я сделал новый запрос Axios в качестве другого метода в своем приложении Vue (вот запрос, который вы можете использовать для него — «streams/metadata?game_id=488552&type=live&first=100») и добавил фильтр к ответу, поэтому я m работает только с метаданными Overwatch, полностью заполненными пользователем.

Это обеспечивает доступ к некоторым интересным статистическим данным, например, за какого персонажа играет каждый стример и какова его роль в команде (нападение, защита, танк или поддержка). Я подумал, что было бы интересно отслеживать процентное соотношение каждой роли для первых 100 стримеров Overwatch в прямом эфире, поэтому, применив немного математики в Javascript, я добавил это в свой новый компонент. Как только этот новый компонент будет добавлен в ваш HTML-код, вы сможете следить за текущими тенденциями, прежде чем перейти к следующему матчу в Overwatch!

Если вам просто нужен код и, вероятно, для этой цели вы прокрутили этот пост до конца, привет! Я тебя прикрыл. Ознакомиться с проектом можно здесь.