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:
- A felhasználók megnézhetik, hogy a Free Code Camp jelenleg közvetít-e a Twitch.tv oldalon.
- A felhasználók rákattinthatnak az állapotkimenetre, és közvetlenül a Free Code Camp Twitch.tv csatornájára küldhetik őket.
- Ha a Twitch streamer jelenleg streaming, a felhasználók további részleteket láthatnak arról, hogy mit sugároznak.
- 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é.