Bygg en TwitchTV-status-app

I forrige uke taklet jeg det siste av Intermediate Front-End-prosjekter som involverte å bygge en TwitchTv-app ved hjelp av Twitch API for å vise statusen til et sett Twitch Streamers.

Dette var brukerhistoriene for dette prosjektet:

  1. Brukere kan se om Free Code Camp for øyeblikket streames på Twitch.tv.
  2. Brukere kan klikke på statusutgangen og sendes direkte til Free Code Camps Twitch.tv-kanal.
  3. Hvis en Twitch-streamer for øyeblikket streames, kan brukere se ytterligere detaljer om hva de streamer.
  4. Brukere vil se en plassholdervarsling hvis en streamer har lukket Twitch-kontoen sin (eller kontoen aldri har eksistert).

Design

Utformingen av appen min er ganske lik eksempelappen gitt i prosjektbeskrivelsen.

Den eneste store forskjellen er søkeinngangen øverst på siden som jeg la der for den femte brukerhistorien (mer om dette nedenfor).

Jeg brukte Skeleton for å hjelpe med grunnleggende styling og respons, slik at alt ser bra ut på stasjonær og mobil.

For profilbildene brukte jeg bakgrunnsbilder i stedet for koder. Dette skyldes at det ganske enkelt ved å sette bakgrunnsstørrelsen til å dekke, at bildet kan skaleres til størrelsen på beholderen uansett dimensjoner.

Dette er noe jeg lærte mens jeg jobbet med Random Quote Generator-prosjektet, og det var hyggelig å ta det i bruk igjen her.

Tankeprosess

Først lagde jeg en rekke Twitch Streamers og brukte en for loop til å gjenta gjennom matrisen og komme på rad AJAX-forespørsler, slik at jeg kunne hente dataene for hver 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: "//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"); } }); }

Hvis AJAX-forespørselen er vellykket, kaller den en annen funksjon fetchData () som ganske enkelt henter de nødvendige dataene fra JSON-utgangen, for eksempel brukernavn, status, url og visningsbilde for hver kanal, og kaller oppdateringsHTML () -funksjonen som ganske enkelt tar dataene og oppdaterer 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"); } }

For offline streamere var det et ekstra trinn. Jeg måtte foreta en ny API-samtale ved hjelp av //api.twitch.tv/kraken/channels/ for å hente data for hver kanal fordi den første samtalen (ved hjelp av //api.twitch.tv/kraken/streams/) ga ingen informasjon om offline streamere bortsett fra det faktum at de ikke var aktive i det øyeblikket.

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

Når jeg hadde de på plass, ble de fire brukerhistoriene fullført, og jeg var klar til å dra. På dette tidspunktet markerte jeg prosjektet som fullført, men like etterpå trodde jeg det ville være veldig kult å utvide funksjonaliteten til appen litt.

Dette var da jeg la til en femte brukerhistorie:

  • Brukere kan søke etter TwitchTv Streamers og se om de er online eller ikke.

Så jeg laget en søkefunksjon som tar brukerens input og bruker den til å ringe API-samtalen:

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

Jeg brukte litt regex for å fjerne spesialtegn og mellomrom fra brukernes spørsmål, og etterlot bare tall, bokstaver og understrekninger. Jeg tror dette er viktig fordi Twitch ikke tillater spesialtegn (som $, & osv.) Eller mellomrom i brukernavnene, så det var nødvendig å filtrere dem ut.

Det hjelper også slik at hvis en bruker søker etter noe sånt som "gratis kodeleir" (å skille hele ord med mellomrom) i stedet for "freecodecamp", returnerer det fortsatt det forventede relevante resultatet.

Så det var stort sett det for dette prosjektet. Du kan se den endelige versjonen på Codepen.

Key Takeaway

Selv når jeg skriver dette blogginnlegget, fortsetter flere måter å forbedre brukeropplevelsen på appen min i hodet mitt, så min viktigste takeaway fra dette prosjektet er:

Programvaren er aldri ferdig. Det er en prosess og den er alltid i utvikling.

Hva blir det neste

Akkurat nå presser jeg hardt på for å fullføre Intermediate Algorithm Scripting-delen på FCC de neste par dagene, slik at jeg raskt kan gå videre til delen Advanced Algorithm.

Mitt (kortsiktige) mål er fortsatt å kreve Front-End-sertifisering innen utgangen av mai, og hvis alt går bra, bør jeg kunne få det innen da. Ønsk meg lykke til.

Hvis du vil nå ut eller få kontakt med meg, kan du finne meg på Twitter eller sende meg en e-post. En versjon av dette innlegget ble publisert på min personlige blogg.