Рубрики
Без рубрики

Создание приложения статуса TwitchTV

AYO ISAIAH Создание статуса TwitchTV Applyst Week неделя, я решил последние промежуточные интерфейсные проекты, которые включали в себя создание приложения TwitchTV, используя Twitch API для отображения состояния набора стержней Thecles. Это были истории пользователей для этого проекта: пользователи могут видеть,

Автор оригинала: FreeCodeCamp Community Member.

Айо Исаия

На прошлой неделе я решил последний из промежуточных интерфейсных проектов, которые участвовали в строительстве Приложение TwitchTV Использование API Twitch для отображения статуса набора Terclers.

Это были истории пользователей для этого проекта:

  1. Пользователи могут видеть, будет ли бесплатный кодовый лагерь в настоящее время потоковой на Twitch.tv.
  2. Пользователи могут нажать на вывод состояния и отправляться непосредственно на канал Twitch Champ Code Twitch.tv.
  3. Если Twitch Streamer в настоящее время повторяется, пользователи могут видеть дополнительные детали о том, что они текут.
  4. Пользователи увидят уведомление о заполнении, если Streamer закрыл свой аккаунт Twitch (или учетная запись никогда не существовала).

Дизайн

Дизайн моего приложения очень похоже на Пример приложения дано в описании проекта.

Единственным основным разницей является ввод поиска в верхней части страницы, которую я помещаю туда для пятой пользовательской истории (подробнее об этом ниже).

Я использовал Скелет Чтобы помочь с основным стилем и отзывчивостью, так что все хорошо выглядит на рабочем столе и мобильном телефоне.

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

Это то, что я узнал во время работы на Случайная цитата генератор проекта И было приятно поставить его на практике снова здесь.

Мыслительный процесс

Во-первых, я сделал массив стержневых стримеров и использовал цикл для петли, чтобы перебраться через массив и сделать последовательные запросы 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 = "" + data.stream.channel.display_name +  "" + " 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 " + "'" + json.display_name + "'" + " 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 Transers и просматривайте, являются ли они онлайн или нет.

Поэтому я сделал функцию поиска, которая принимает вход пользователя и использует его, чтобы сделать вызов 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);                                }        });    }

Я использовал немного REGEX, чтобы удалить специальные символы и промежутки от пользователей Query, оставляя только номера, буквы и подчеркивания. Я думаю, что это важно, потому что дергайтесь не допускают специальные символы (такие как $, &, e.t.c) или пробелы в имена пользователя, поэтому нужно было отфильтровывать их.

Это также помогает так, чтобы если пользователь ищет что-то вроде «лагерь Free Code» (разделяя целые слова с пробелами) вместо «FreeCodeCamp», он все еще возвращает ожидаемый соответствующий результат.

Так что это было в значительной степени для этого проекта. Вы можете просмотреть Окончательная версия на кодепене.

Ключ на вынос

Даже когда я пишу этот пост блога, несколько способов улучшить пользовательский опыт в моем приложении, продолжают попасть в голову, чтобы мой ключ от этого проекта есть:

Программное обеспечение никогда не закончено. Это процесс, и это всегда развивается Отказ

Что дальше

Прямо сейчас я трудно заканчивать Скрипты промежуточного алгоритма Раздел на FCC в ближайшие пару дней, чтобы я мог быстро перейти к расширенному разделу алгоритма.

Моя (краткосрочная) цель остается претендовать на Сертификация передней работы К концу мая и если все пойдет хорошо, я должен быть в состоянии получить его к тому времени. Пожелай мне удачи.

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

Читайте ещё по теме: