Creación de una aplicación de estado de TwitchTV

La semana pasada, abordé el último de los proyectos intermedios de front-end que incluían la creación de una aplicación de TwitchTv utilizando la API de Twitch para mostrar el estado de un conjunto de transmisores de Twitch.

Estas fueron las historias de usuario de este proyecto:

  1. Los usuarios pueden ver si Free Code Camp se está transmitiendo actualmente en Twitch.tv.
  2. Los usuarios pueden hacer clic en la salida de estado y ser enviados directamente al canal Twitch.tv de Free Code Camp.
  3. Si un transmisor de Twitch está transmitiendo actualmente, los usuarios pueden ver detalles adicionales sobre lo que están transmitiendo.
  4. Los usuarios verán una notificación de marcador de posición si un transmisor ha cerrado su cuenta de Twitch (o la cuenta nunca existió).

Diseño

El diseño de mi aplicación es bastante similar a la aplicación de ejemplo que se proporciona en la descripción del proyecto.

La única diferencia importante es la entrada de búsqueda en la parte superior de la página que puse allí para la quinta historia de usuario (más sobre esto a continuación).

Usé Skeleton para ayudar con el estilo básico y la capacidad de respuesta para que todo se vea bien en computadoras de escritorio y dispositivos móviles.

Para las fotos de perfil, usé imágenes de fondo en lugar de etiquetas. Esto se debe a que simplemente configurando el tamaño del fondo para cubrir, permite que la imagen se escale al tamaño de su contenedor sin importar las dimensiones.

Esto es algo que aprendí mientras trabajaba en el proyecto Random Quote Generator y fue bueno ponerlo en práctica nuevamente aquí.

Proceso de pensamiento

Primero, hice una matriz de Twitch Streamers y usé un bucle for para iterar a través de la matriz y realizar solicitudes AJAX consecutivas para poder obtener los datos de cada 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"); } }); }

Si la solicitud AJAX tiene éxito, llama a otra función fetchData () que simplemente obtiene los datos requeridos de la salida JSON, como el nombre de usuario, el estado, la url y la imagen de visualización para cada canal y llama a la función updateHTML () que simplemente toma los datos y actualiza el 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"); } }

Para los streamers sin conexión, hubo un paso adicional. Tuve que hacer otra llamada a la API usando //api.twitch.tv/kraken/channels/ para obtener datos para cada canal porque la primera llamada (usando //api.twitch.tv/kraken/streams/) no proporcionó información sobre el streamers sin conexión, excepto por el hecho de que no estaban activos en ese momento.

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

Una vez que los tuve en su lugar, se completaron las cuatro historias de usuario y estaba listo para comenzar. En este punto, marqué el proyecto como completado, pero poco después, pensé que sería genial extender un poco la funcionalidad de la aplicación.

Fue entonces cuando agregué una quinta historia de usuario:

  • Los usuarios pueden buscar Streamers de TwitchTv y ver si están conectados o no.

Así que hice una función de búsqueda que toma la entrada del usuario y la usa para hacer la llamada a la API:

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

Utilicé un poco de expresión regular para eliminar caracteres especiales y espacios de la consulta de los usuarios dejando solo números, letras y guiones bajos. Creo que esto es importante porque Twitch no permite caracteres especiales (como $, &, etc.) o espacios en los nombres de usuario, por lo que era necesario filtrarlos.

También ayuda a que si un usuario busca algo como "campo de código libre" (separando palabras completas con espacios) en lugar de "campo de código libre", todavía devuelve el resultado relevante esperado.

Así que eso fue todo para este proyecto. Puede ver la versión final en Codepen.

Conclusión clave

Incluso mientras escribo esta publicación de blog, varias formas de mejorar la experiencia del usuario en mi aplicación continúan apareciendo en mi cabeza, por lo que mi conclusión clave de este proyecto es:

El software nunca está terminado. Es un proceso y siempre está evolucionando.

Que sigue

En este momento, estoy esforzándome mucho para terminar la sección de Scripting de algoritmos intermedios en FCC en los próximos días para poder pasar rápidamente a la sección de algoritmos avanzados.

Mi objetivo (a corto plazo) sigue siendo reclamar la Certificación Front-End para fines de mayo y, si todo va bien, debería poder obtenerla para entonces. Deséame suerte.

Si desea comunicarse conmigo o conectarse conmigo, puede encontrarme en Twitter o enviarme un correo electrónico. Se publicó una versión de esta publicación en mi blog personal.