„TwitchTV Status“ programos kūrimas

Praėjusią savaitę aš sprendžiau paskutinius „Intermediate Front-End“ projektus, kuriuose dalyvavo „TwitchTv“ programos kūrimas naudojant „Twitch“ API, kad būtų galima parodyti „Twitch Streamers“ rinkinio būseną.

Tai buvo šio projekto vartotojų istorijos:

  1. Vartotojai gali pamatyti, ar „Free Code Camp“ šiuo metu transliuoja „Twitch.tv“.
  2. Vartotojai gali spustelėti būsenos išvestį ir būti nusiųsti tiesiai į „Free Code Camp“ Twitch.tv kanalą.
  3. Jei „Twitch“ srautas šiuo metu transliuoja, vartotojai gali pamatyti papildomą informaciją apie tai, ką jie transliuoja.
  4. Vartotojai matys vietos rezervavimo pranešimą, jei srautai uždarys savo „Twitch“ paskyrą (arba paskyros niekada nebuvo).

Dizainas

Mano programos dizainas yra gana panašus į programos aprašymo pateiktą programos pavyzdį.

Vienintelis esminis skirtumas yra paieškos įvestis puslapio viršuje, kurią įdėjau penktajai vartotojo istorijai (daugiau apie tai žemiau).

Aš naudoju „Skeleton“, kad padėčiau pagrindiniam stiliui ir jautrumui, todėl viskas gerai atrodo darbalaukyje ir mobiliajame.

Profilio paveikslėliams vietoj žymų naudojau fono paveikslėlius . Taip yra todėl, kad paprasčiausiai nustačius fono dydį, kad jis būtų padengtas, vaizdą galima keisti pagal jo talpyklos dydį, neatsižvelgiant į matmenis.

Tai sužinojau dirbdamas „Random Quote Generator“ projekte ir buvo malonu jį vėl pritaikyti čia.

Minties procesas

Pirma, aš sukūriau „Twitch Streamers“ masyvą ir naudoju „for loop“, norėdamas pakartoti masyvą ir iš eilės pateikti AJAX užklausas, kad galėčiau gauti kiekvieno srauto duomenis.

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

Jei AJAX užklausa yra sėkminga, ji iškviečia kitą funkciją fetchData (), kuri paprasčiausiai nuskaito reikiamus duomenis iš JSON išvesties, pvz., Kiekvieno kanalo vartotojo vardą, būseną, URL ir vaizdą, ir iškviečia funkciją updateHTML (), kuri tiesiog perima duomenis ir atnaujina 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"); } }

Neprisijungus transliuotojams buvo dar vienas papildomas žingsnis. Norėdamas gauti kiekvieno kanalo duomenis, turėjau atlikti dar vieną API skambutį naudodamas //api.twitch.tv/kraken/channels/, nes pirmasis skambutis (naudojant //api.twitch.tv/kraken/streams/) nepateikė informacijos apie „offline streamers“, išskyrus tai, kad jie tuo metu nebuvo aktyvūs.

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

Kai jau turėjau juos vietoje, buvo baigtos keturios vartotojų istorijos ir aš buvau pasirengęs eiti. Šiuo metu pažymėjau projektą kaip užbaigtą, tačiau netrukus pagalvojau, kad būtų labai šaunu šiek tiek išplėsti programos funkcionalumą.

Tai buvo tada, kai pridėjau penktą vartotojo istoriją:

  • Vartotojai gali ieškoti „TwitchTv Streamers“ ir peržiūrėti, ar jie prisijungę, ar ne.

Taigi aš sukūriau paieškos funkciją, kuri paima vartotojo įvestį ir naudoja ją paskambinti 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); } }); }

Aš pašalinau specialius simbolius ir tarpus iš vartotojų užklausos, palikdamas tik skaičius, raides ir pabraukimus. Manau, kad tai yra svarbu, nes „Twitch“ neleidžia naudoti specialiųjų simbolių (pvz., $, & Ir kt.) Ar tarpų vartotojo varduose, todėl reikėjo juos išfiltruoti.

Tai taip pat padeda, kad jei vartotojas vietoj „freecodecamp“ ieško „free code camp“ (atskiriant ištisus žodžius tarpais), jis vis tiek pateikia laukiamą atitinkamą rezultatą.

Taigi tai buvo beveik viskas šiame projekte. Galutinę versiją galite peržiūrėti „Codepen“.

Pagrindinis išsinešimas

Net kai rašau šį tinklaraščio įrašą, į galvą ir toliau kyla keli būdai, kaip pagerinti savo programos vartotojo patirtį, todėl mano pagrindinis šio projekto išsiskyrimas yra:

Programinė įranga niekada nėra baigta. Tai yra procesas ir jis visada vystosi.

Kas toliau

Šiuo metu labai stengiuosi per kelias kitas dienas užbaigti FCC skyrelį „Tarpinių algoritmų scenarijai“, kad galėčiau greitai pereiti prie „Išplėstinio algoritmo“ skyriaus.

Mano (trumpalaikis) tikslas tebėra reikalavimas gauti „Front-End“ sertifikatą iki gegužės pabaigos, ir jei viskas bus gerai, turėčiau sugebėti jį gauti iki to laiko. Palinkėk man sėkmės.

Jei norite susisiekti ar susisiekti su manimi, galite rasti mane „Twitter“ arba siųsti el. Laišką. Šio įrašo versija buvo paskelbta mano asmeniniame tinklaraštyje.