TwitchTV Status App építése

A múlt héten az utolsó köztes közreműködő projekttel foglalkoztam, amely magában foglalta a TwitchTv alkalmazás felépítését a Twitch API használatával a Twitch Streamers készlet állapotának megjelenítésére.

Ezek voltak a projekt felhasználói felhasználói történetei:

  1. A felhasználók megnézhetik, hogy a Free Code Camp jelenleg közvetít-e a Twitch.tv oldalon.
  2. A felhasználók rákattinthatnak az állapotkimenetre, és közvetlenül a Free Code Camp Twitch.tv csatornájára küldhetik őket.
  3. Ha a Twitch streamer jelenleg streaming, a felhasználók további részleteket láthatnak arról, hogy mit sugároznak.
  4. A felhasználók helyőrző értesítést fognak látni, ha egy közvetítő bezárta Twitch-fiókját (vagy a fiók soha nem létezett).

Tervezés

Az alkalmazásom kialakítása meglehetősen hasonlít a projektleírásban megadott példaalkalmazásra.

Az egyetlen fő különbség az oldal tetején található keresési bevitel, amelyet az ötödik felhasználói történethez adtam (erről bővebben alább).

A Csontváz segítségével segítettem az alapstílust és az érzékenységet, így minden jól néz ki asztali és mobil eszközökön.

A profilképekhez címkék helyett háttérképeket használtam . Ennek az az oka, hogy pusztán a háttérméret borítóra állításával lehetővé teszi a kép méretét, a konténer méretéhez méretezve.

Ezt megtanultam a Random Quote Generator projekten dolgozva, és jó volt itt újra gyakorolni.

Gondolkodási folyamat

Először készítettem egy tömb Twitch Streamet, és egy for ciklust használtam a tömb áthaladásához és egymás utáni AJAX kérésekhez, hogy minden adatfolyamhoz lehívjam az adatokat.

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

Ha az AJAX kérés sikeres, akkor egy másik függvényt hív meg: fetchData (), amely egyszerűen lekéri a szükséges adatokat a JSON kimenetről, például az egyes csatornák felhasználónevét, állapotát, URL-jét és megjelenítési képét, és meghívja az updateHTML () függvényt, amely egyszerűen felveszi az adatokat és frissíti a DOM-ot.

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

Az offline közvetítők számára volt egy további lépés. Még egy API-hívást kellett indítanom a //api.twitch.tv/kraken/channels/ segítségével az egyes csatornák adatainak lekéréséhez, mert az első hívás (a //api.twitch.tv/kraken/streams/ használatával) nem adott információt a offline streamelők, kivéve azt a tényt, hogy abban a pillanatban nem voltak aktívak.

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

Miután a helyükön voltak, a négy felhasználói történet elkészült, és készen álltam az indulásra. Ekkor befejezettként jelöltem meg a projektet, de nem sokkal később azt gondoltam, hogy nagyon jó lenne kicsit kibővíteni az alkalmazás funkcionalitását.

Ekkor adtam hozzá egy ötödik felhasználói történetet:

  • A felhasználók megkereshetik a TwitchTv Streamereket, és megnézhetik, hogy online vannak-e vagy sem.

Tehát készítettem egy keresési funkciót, amely felveszi a felhasználó bemenetét és felhasználja az API hívás kezdeményezésére:

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

Egy kis regex segítségével eltávolítottam a speciális karaktereket és szóközöket a felhasználók lekérdezéséből, csak számokat, betűket és aláhúzásokat hagyva. Szerintem ez azért fontos, mert a Twitch nem engedélyez speciális karaktereket (például $, & stb.) Vagy szóközt a felhasználónévben, ezért ezeket ki kellett szűrni.

Ez abban is segít, hogy ha a felhasználó a „freecodecamp” helyett valami „free code camp” (egész szavakat szóközökkel elválasztva) keres, akkor is a várt releváns eredményt adja vissza.

Szóval nagyjából ennyi volt ez a projekt. A végleges verziót a Codepen oldalon tekintheti meg.

Kulcs elvihető

Még akkor is, amikor ezt a blogbejegyzést írom, az alkalmazásom felhasználói élményének javításának számos módja továbbra is a fejembe kerül, így a legfontosabb elvonásom ebből a projektből:

A szoftver soha nem fejeződött be. Ez egy folyamat, és mindig fejlődik.

Mi a következő lépés

Jelenleg nagy erőfeszítéseket teszek az FCC Intermediate Algorithm Scripting szakaszának befejezésére a következő néhány napban, hogy gyorsan tovább tudjak lépni az Advanced Algorithm szakaszra.

A (rövid távú) célom továbbra is május végéig igényli a front-end minősítést, és ha minden jól megy, addigra képesnek kell lennem rá. Kívánj szerencsét.

Ha kapcsolatba akar lépni velem, vagy kapcsolatba akar lépni velem, megtalálhat a Twitteren vagy e-mailben. A bejegyzés egyik verzióját a személyes blogomon tették közzé.