Opbygning af en TwitchTV-statusapp

I sidste uge tacklede jeg det sidste af de mellemliggende front-end-projekter, der involverede opbygning af en TwitchTv-app ved hjælp af Twitch API til at vise status for et sæt Twitch Streamers.

Dette var brugerhistorierne for dette projekt:

  1. Brugere kan se, om Free Code Camp i øjeblikket streamer på Twitch.tv.
  2. Brugere kan klikke på statusoutputtet og sendes direkte til Free Code Camps Twitch.tv-kanal.
  3. Hvis en Twitch-streamer i øjeblikket streamer, kan brugerne se yderligere detaljer om, hvad de streamer.
  4. Brugere vil se en pladsholdermeddelelse, hvis en streamer har lukket deres Twitch-konto (eller hvis kontoen aldrig har eksisteret).

Design

Designet af min app svarer meget til den eksempelapp, der er givet i projektbeskrivelsen.

Den eneste store forskel er søgeindgangen øverst på siden, som jeg placerede der for den femte brugerhistorie (mere om dette nedenfor).

Jeg brugte Skeleton til at hjælpe med grundlæggende styling og lydhørhed, så alt ser godt ud på desktop og mobil.

Til profilbillederne brugte jeg baggrundsbilleder i stedet for tags. Dette skyldes, at det simpelthen ved at indstille baggrundsstørrelsen til at dække det giver billedet mulighed for at skalere til størrelsen på beholderen uanset dimensionerne.

Dette er noget, jeg lærte, mens jeg arbejdede på Random Quote Generator-projektet, og det var rart at sætte det i praksis igen her.

Tankeproces

Først lavede jeg et array af Twitch Streamers og brugte en for-loop til at gentage arrayet og foretage fortløbende AJAX-anmodninger, så 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-anmodningen er vellykket, kalder den en anden funktion fetchData (), som simpelthen henter de krævede data fra JSON-output, såsom brugernavn, status, url og displaybillede for hver kanal og kalder opdateringsHTML () -funktionen, som simpelthen tager dataene og opdaterer 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 streamers var der et ekstra trin. Jeg var nødt til at foretage endnu et API-opkald ved hjælp af //api.twitch.tv/kraken/channels/ for at hente data for hver kanal, fordi det første opkald (ved hjælp af //api.twitch.tv/kraken/streams/) ikke gav nogen info om offline streamers undtagen det faktum, at de ikke var aktive i det øjeblik.

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 havde dem på plads, blev de fire brugerhistorier afsluttet, og jeg var klar til at gå. På dette tidspunkt markerede jeg projektet som afsluttet, men kort tid efter troede jeg, at det ville være rigtig sejt at udvide appens funktionalitet lidt.

Dette var, da jeg tilføjede en femte brugerhistorie:

  • Brugere kan søge efter TwitchTv Streamers og se, om de er online eller ej.

Så jeg lavede en søgefunktion, der tager input fra brugeren og bruger den til at foretage API-opkaldet:

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 brugte lidt regex til at fjerne specialtegn og mellemrum fra brugernes forespørgsel og kun efterlade tal, bogstaver og understregninger. Jeg synes dette er vigtigt, fordi Twitch ikke tillader specialtegn (såsom $, & osv.) Eller mellemrum i brugernavne, så det var nødvendigt at filtrere dem ud.

Det hjælper også, så hvis en bruger søger efter noget som "gratis kodelejr" (adskiller hele ord med mellemrum) i stedet for "freecodecamp", returnerer det stadig det forventede relevante resultat.

Så det var stort set det for dette projekt. Du kan se den endelige version på Codepen.

Nøgle afhentning

Selv når jeg skriver dette blogindlæg, fortsætter flere måder til at forbedre brugeroplevelsen på min app i mit hoved, så min centrale afhentning fra dette projekt er:

Software er aldrig færdig. Det er en proces, og den er altid under udvikling.

Hvad er det næste

Lige nu skubber jeg hårdt på at afslutte sektionen Intermediate Algorithm Scripting om FCC i de næste par dage, så jeg hurtigt kan gå videre til sektionen Advanced Algorithm.

Mit (kortsigtede) mål forbliver med at kræve Front-End-certificering inden udgangen af ​​maj, og hvis alt går godt, skal jeg være i stand til at få det inden da. Ønsk mig held og lykke.

Hvis du vil nå ud eller oprette forbindelse til mig, kan du finde mig på Twitter eller e-maile mig. En version af dette indlæg blev offentliggjort på min personlige blog.