de Ayo Isaiah
Construirea unei aplicații de stare TwitchTV
Săptămâna trecută, am abordat ultimul proiect intermediar de front-end care presupunea construirea unui Aplicația TwitchTv folosind API-ul Twitch pentru a afișa starea unui set de Twitch Streamers.
Acestea au fost poveștile utilizatorilor pentru acest proiect:
- Utilizatorii pot vedea dacă Free Code Camp difuzează în prezent pe Twitch.tv.
- Utilizatorii pot face clic pe ieșirea de stare și pot fi trimiși direct la canalul Twitch.tv al Free Code Camp.
- Dacă un streamer Twitch este în prezent în flux, utilizatorii pot vedea detalii suplimentare despre ceea ce transmit.
- Utilizatorii vor vedea o notificare de substituent dacă un streamer și-a închis contul Twitch (sau contul nu a existat niciodată).
Proiecta
Designul aplicației mele este destul de similar cu exemplu de aplicație prezentate în descrierea proiectului.
Singura diferență majoră este intrarea de căutare din partea de sus a paginii, pe care am pus-o acolo pentru a cincea poveste a utilizatorului (mai multe despre aceasta mai jos).
obisnuiam Schelet pentru a vă ajuta cu stilul și reacția de bază, astfel încât totul să arate bine pe desktop și pe mobil.
Pentru pozele de profil, am folosit imagini de fundal în loc de etichete . Acest lucru se datorează faptului că, pur și simplu prin setarea dimensiunii fundalului pentru acoperire, permite imaginii să se scaleze la dimensiunea containerului său, indiferent de dimensiuni.
Este ceva ce am învățat în timp ce lucram la Proiectul Random Quote Generator și a fost frumos să-l pun la practică din nou aici.
Proces de gandire
În primul rând, am făcut o serie de Twitch Streamers și am folosit o buclă for pentru a itera prin matrice și a face cereri AJAX consecutive, astfel încât să pot prelua datele pentru fiecare streamer.
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"); } }); }Dacă solicitarea AJAX are succes, apelează o altă funcție fetchData () care pur și simplu preia datele necesare din ieșirea JSON, cum ar fi numele de utilizator, starea, adresa URL și imaginea afișată pentru fiecare canal și apelează actualizareHTML () funcție care pur și simplu preia datele și actualizează 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/Routech/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"); } }Pentru streamerele offline, a existat un pas suplimentar. A trebuit să fac un alt apel API folosind https://api.twitch.tv/kraken/channels/ pentru a prelua date pentru fiecare canal deoarece primul apel (folosind https://api.twitch.tv/kraken/streams/) nu a furnizat informații despre streamerele offline, cu excepția faptului că nu erau active în acel moment.
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/Routech/master/twitch/images/placeholder-2.jpg")"; } updateHTML(".offline"); } }); }Odată ce le-am avut pe loc, cele patru povești ale utilizatorilor au fost finalizate și am fost gata să plec. În acest moment, am marcat proiectul ca fiind finalizat, dar la scurt timp după aceea, m-am gândit că ar fi foarte interesant să extindem puțin funcționalitatea aplicației.
Atunci am adăugat o a cincea poveste de utilizator:
- Utilizatorii pot căuta TwitchTv Streamers și pot vedea dacă sunt online sau nu.
Așa că am făcut o funcție de căutare care preia intrarea utilizatorului și o folosește pentru a efectua apelul 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); } }); }Am folosit un pic de regex pentru a elimina caractere și spații speciale din interogarea utilizatorilor, lăsând doar cifre, litere și caractere de subliniere. Cred că acest lucru este important, deoarece Twitch nu permite caractere speciale (cum ar fi $, &, etc.) sau spații în numele de utilizator, așa că a fost necesar să le filtrăm.
De asemenea, ajută astfel încât, dacă un utilizator caută ceva de genul „tabără de coduri gratuite” (separarea cuvintelor întregi cu spații) în loc de „freecodecamp”, acesta returnează în continuare rezultatul relevant așteptat.
Așa că a fost destul de mult pentru acest proiect. Puteți vizualiza versiunea finala pe Codepen.
Cheie de luat
Chiar în timp ce scriu această postare pe blog, mai multe moduri de a îmbunătăți experiența utilizatorului în aplicația mea continuă să-mi apară în cap, astfel încât soluția mea cheie de la acest proiect este:
Software-ul nu este terminat niciodată. Este un proces și evoluează mereu.
Ce urmeaza
În acest moment, mă străduiesc să termin Scriptarea algoritmului intermediar în FCC în următoarele câteva zile, astfel încât să pot trece rapid la secțiunea Advanced Algorithm.
Scopul meu (pe termen scurt) rămâne revendicare Certificare front-end până la sfârșitul lunii mai și dacă totul merge bine, ar trebui să îl pot obține până atunci. Urează-mi noroc.
Dacă doriți să contactați sau să vă conectați cu mine, mă puteți găsi pe Stare de nervozitate sau trimiteți-mi un e-mail. O versiune a acestui post a fost publicată pe pagina mea blog personal.
