Erstellen einer TwitchTV-Status-App

Letzte Woche habe ich das letzte Zwischen-Front-End-Projekt in Angriff genommen, bei dem eine TwitchTv-App mithilfe der Twitch-API erstellt wurde, um den Status einer Reihe von Twitch-Streamern anzuzeigen.

Dies waren die User Stories für dieses Projekt:

  1. Benutzer können sehen, ob Free Code Camp derzeit auf Twitch.tv gestreamt wird.
  2. Benutzer können auf die Statusausgabe klicken und direkt an den Twitch.tv-Kanal des Free Code Camp gesendet werden.
  3. Wenn gerade ein Twitch-Streamer gestreamt wird, können Benutzer zusätzliche Details zu dem, was sie streamen, anzeigen.
  4. Benutzer erhalten eine Platzhalterbenachrichtigung, wenn ein Streamer sein Twitch-Konto geschlossen hat (oder das Konto nie existiert hat).

Design

Das Design meiner App ist der in der Projektbeschreibung angegebenen Beispiel-App ziemlich ähnlich.

Der einzige große Unterschied ist die Sucheingabe oben auf der Seite, die ich dort für die fünfte User Story eingefügt habe (mehr dazu weiter unten).

Ich habe Skeleton verwendet, um das grundlegende Design und die Reaktionsfähigkeit zu verbessern, damit auf Desktop und Mobile alles gut aussieht.

Für die Profilbilder habe ich Hintergrundbilder anstelle von Tags verwendet. Dies liegt daran, dass das Bild durch einfaches Einstellen der Hintergrundgröße auf die Größe des Containers unabhängig von den Abmessungen skaliert werden kann.

Dies habe ich bei der Arbeit am Random Quote Generator-Projekt gelernt und es war schön, es hier wieder in die Praxis umzusetzen.

Denkprozess

Zuerst habe ich ein Array von Twitch-Streamern erstellt und eine for-Schleife verwendet, um das Array zu durchlaufen und aufeinanderfolgende AJAX-Anforderungen zu stellen, damit ich die Daten für jeden Streamer abrufen kann.

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

Wenn die AJAX-Anforderung erfolgreich ist, ruft sie eine andere Funktion fetchData () auf, die einfach die erforderlichen Daten aus der JSON-Ausgabe wie Benutzername, Status, URL und Anzeigebild für jeden Kanal abruft und die Funktion updateHTML () aufruft, die einfach die Daten übernimmt und aktualisiert das 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"); } }

Für Offline-Streamer gab es einen zusätzlichen Schritt. Ich musste einen weiteren API-Aufruf mit //api.twitch.tv/kraken/channels/ durchführen, um Daten für jeden Kanal abzurufen, da der erste Aufruf (mit //api.twitch.tv/kraken/streams/) keine Informationen über die Offline-Streamer mit Ausnahme der Tatsache, dass sie zu diesem Zeitpunkt nicht aktiv waren.

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

Sobald ich diese eingerichtet hatte, waren die vier User Stories fertig und ich war bereit zu gehen. Zu diesem Zeitpunkt habe ich das Projekt als abgeschlossen markiert, aber bald darauf dachte ich, es wäre wirklich cool, die Funktionalität der App ein wenig zu erweitern.

Zu diesem Zeitpunkt habe ich eine fünfte User Story hinzugefügt:

  • Benutzer können nach TwitchTv-Streamern suchen und anzeigen, ob sie online sind oder nicht.

Also habe ich eine Suchfunktion erstellt, die die Eingaben des Benutzers verwendet, um den API-Aufruf auszuführen:

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

Ich habe ein bisschen Regex verwendet, um Sonderzeichen und Leerzeichen aus der Benutzerabfrage zu entfernen, wobei nur Zahlen, Buchstaben und Unterstriche übrig blieben. Ich denke, dies ist wichtig, da Twitch keine Sonderzeichen (wie $, & usw.) oder Leerzeichen in den Benutzernamen zulässt, sodass diese herausgefiltert werden mussten.

Es ist auch hilfreich, wenn ein Benutzer nach etwas wie "Free Code Camp" (Trennen ganzer Wörter durch Leerzeichen) anstelle von "Freecodecamp" sucht und dennoch das erwartete relevante Ergebnis zurückgibt.

Das war es also ziemlich genau für dieses Projekt. Sie können die endgültige Version auf Codepen anzeigen.

Schlüssel zum Mitnehmen

Selbst wenn ich diesen Blog-Beitrag schreibe, tauchen in meinem Kopf immer wieder verschiedene Möglichkeiten auf, die Benutzererfahrung in meiner App zu verbessern. Mein wichtigster Aspekt bei diesem Projekt ist:

Software ist nie fertig. Es ist ein Prozess und entwickelt sich ständig weiter.

Was kommt als nächstes

Im Moment bin ich sehr bemüht, den Abschnitt "Intermediate Algorithm Scripting" in der FCC in den nächsten Tagen fertigzustellen, damit ich schnell zum Abschnitt "Advanced Algorithm" übergehen kann.

Mein (kurzfristiges) Ziel bleibt es, bis Ende Mai die Front-End-Zertifizierung zu erhalten. Wenn alles gut geht, sollte ich sie bis dahin erhalten können. Wünsch mir Glück.

Wenn Sie mich erreichen oder mit mir in Verbindung treten möchten, können Sie mich auf Twitter finden oder mir eine E-Mail senden. Eine Version dieses Beitrags wurde in meinem persönlichen Blog veröffentlicht.