На прошлой неделе я занялся последним промежуточным фронтенд-проектом, который включал создание TwitchTv-приложения с использованием Twitch API для отображения статуса набора Twitch Streamers.
Это были пользовательские истории для этого проекта:
- Пользователи могут видеть, транслируется ли Free Code Camp в настоящее время на Twitch.tv.
- Пользователи могут щелкнуть вывод статуса и быть отправлены прямо на канал Twitch.tv Free Code Camp.
- Если стример Twitch в настоящее время ведет потоковую передачу, пользователи могут видеть дополнительные сведения о том, что они транслируют.
- Пользователи увидят уведомление-заполнитель, если стример закрыл свою учетную запись Twitch (или учетная запись никогда не существовала).
Дизайн
Дизайн моего приложения очень похож на пример приложения, приведенный в описании проекта.
Единственное существенное отличие - это ввод для поиска в верхней части страницы, который я поместил туда для пятой пользовательской истории (подробнее об этом ниже).
Я использовал Skeleton, чтобы помочь с базовым стилем и адаптивностью, поэтому все выглядит хорошо на настольных компьютерах и мобильных устройствах.
Для изображений профиля я использовал фоновые изображения вместо тегов ‹img›. Это связано с тем, что простая установка размера фона для покрытия позволяет изображению масштабироваться до размеров контейнера независимо от его размеров.
Это то, что я узнал во время работы над проектом Генератор случайных цитат, и было приятно снова применить это на практике здесь.
Мыслительный процесс
Сначала я создал массив 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: "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");
}
});
}
Если запрос 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");
}
}
Для офлайн-стримеров был дополнительный шаг. Мне пришлось сделать еще один вызов API, используя https://api.twitch.tv/kraken/channels/, чтобы получить данные для каждого канала, потому что первый вызов (с использованием 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");
}
});
}
Как только я их разместил, четыре пользовательских истории были завершены, и я был готов к работе. На этом этапе я пометил проект как завершенный, но вскоре подумал, что было бы здорово немного расширить функциональность приложения.
Это было тогда, когда я добавил пятую пользовательскую историю:
- Пользователи могут искать стримеров TwitchTv и видеть, в сети они или нет.
Итак, я создал функцию поиска, которая принимает данные пользователя и использует их для вызова 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);
}
});
}
Я использовал немного регулярного выражения, чтобы удалить специальные символы и пробелы из пользовательского запроса, оставив только цифры, буквы и символы подчеркивания. Я думаю, это важно, потому что Twitch не допускает использование специальных символов (таких как $, &, e.t.c) или пробелов в именах пользователей, поэтому было необходимо их отфильтровать.
Также помогает то, что если пользователь ищет что-то вроде «лагеря свободного кода» (разделение целых слов пробелами) вместо «freecodecamp», он все равно возвращает ожидаемый релевантный результат.
Вот и все для этого проекта. Вы можете просмотреть финальную версию на Codepen.
Ключевые выводы
Даже сейчас, когда я пишу этот пост в блоге, мне приходят в голову несколько способов улучшить взаимодействие с пользователем в моем приложении, поэтому мой ключевой вывод из этого проекта:
Программное обеспечение никогда не бывает законченным. Это процесс, и он постоянно развивается.
Что дальше
Прямо сейчас я очень стараюсь закончить раздел Промежуточные сценарии алгоритмов на FCC в ближайшие пару дней, чтобы я мог быстро перейти к разделу Расширенный алгоритм.
Моей (краткосрочной) целью остается получение Front-End Certification к концу мая, и если все пойдет хорошо, я смогу получить ее к тому времени. Пожелай мне удачи.
Если вы хотите связаться со мной или связаться со мной, вы можете найти меня в Twitter или напишите мне по электронной почте. Версия этого поста опубликована в моем личном блоге.
