Створення додатка статусу TwitchTV

Минулого тижня я займався останнім з проміжних проектів інтерфейсного інтерфейсу, який передбачав створення програми TwitchTv за допомогою API Twitch для відображення стану набору Twitch Streamers.

Ось історії користувачів для цього проекту:

  1. Користувачі можуть побачити, чи зараз Free Code Camp транслюється на Twitch.tv.
  2. Користувачі можуть натиснути на вихідний статус і перейти безпосередньо на канал Twitch.tv Free Code Camp.
  3. Якщо в даний час транслятор Twitch працює в потоковому режимі, користувачі можуть бачити додаткові відомості про те, що вони транслюють.
  4. Користувачі побачать сповіщення про заповнювач, якщо стример закрив свій обліковий запис Twitch (або обліковий запис ніколи не існував).

Дизайн

Дизайн мого додатку дуже схожий на приклад програми, наведений в описі проекту.

Єдина суттєва відмінність - це введення у верхній частині сторінки, яке я розмістив там для п’ятої історії користувача (докладніше про це нижче).

Я використовував Skeleton, щоб допомогти з базовим стилем та чуйністю, тому все добре виглядає на настільних ПК та мобільних пристроях.

Для фотографій профілю я використовував фонові зображення замість тегів. Це пов’язано з тим, що, просто встановивши розмір фону для покриття, він дозволяє масштабувати зображення до розміру контейнера незалежно від розмірів.

Цього я навчився, працюючи над проектом Генератор випадкових цитат, і було приємно знову застосувати його тут.

Процес думки

По-перше, я створив масив Twitch Streamers і використав цикл for, щоб перебирати масив і робити послідовні запити AJAX, щоб я міг отримати дані для кожного стримера.

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: "//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"); } }); }

Якщо запит 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("//cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")'; } url = data._links.channel.substr(38); status = "" + data.stream.channel.display_name + "" + " is currently streaming " + data.stream.game; updateHTML(".online"); } }

Для офлайн-стримерів був додатковий крок. Мені довелося зробити ще один виклик API, використовуючи //api.twitch.tv/kraken/channels/, щоб отримати дані для кожного каналу, оскільки перший виклик (за допомогою //api.twitch.tv/kraken/streams/) не містив інформації про офлайн-стримери, за винятком того факту, що на той момент вони не були активними.

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

Як тільки я їх створив, чотири історії користувачів були завершені, і я був готовий до роботи. На цьому етапі я позначив проект як завершений, але незабаром після цього я подумав, що було б дуже здорово трохи розширити функціональність програми.

Це було тоді, коли я додав п’яту історію користувача:

  • Користувачі можуть шукати TwitchTv Streamers і переглядати, чи є вони в мережі чи ні.

Тож я зробив функцію пошуку, яка бере вхід користувача та використовує її для здійснення виклику API:

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

Я використав трохи регулярних виразів, щоб видалити спеціальні символи та пробіли з запиту користувачів, залишаючи лише цифри, літери та підкреслення. Я думаю, що це важливо, оскільки Twitch не допускає спеціальних символів (таких як $, &, тощо) або пробіли в іменах користувачів, тому їх потрібно було відфільтрувати.

Це також допомагає так, що якщо користувач шукає щось на кшталт "безкоштовний табір коду" (розділяючи цілі слова пробілами) замість "freecodecamp", він все одно повертає очікуваний відповідний результат.

Отже, це було практично для цього проекту. Ви можете переглянути остаточну версію на Codepen.

Ключовий винос

Навіть коли я пишу цю публікацію в блозі, кілька способів покращити взаємодію з користувачем у моїй програмі продовжують з’являтися в моїй голові, тому мій ключовий висновок із цього проекту:

Програмне забезпечення ніколи не закінчене. Це процес, який завжди розвивається.

Що далі

Зараз я наполегливо намагаюся закінчити розділ сценаріїв проміжного алгоритму на 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.

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.