viernes, 21 de julio de 2017

Componentes React Eficientes: Una Guía para Optimizar el Desempeño de React


Desde su presentación inicial, React ha cambiado la forma de pensar de desarrolladores front-end al construir aplicaciones web. Con DOM virtual, React hace las actualizaciones UI (Interfaz de Usuario) tan eficientes como nunca, haciendo al mismo tiempo a tu aplicación web más precisa. Pero, ¿por qué las aplicaciones web con React con un buen tamaño todavía tienen un desempeño pobre?
Bueno, la clave está en cómo usas React.
Una biblioteca front-end moderna como React no hace más rápida tu aplicación mágicamente. Se requiere que el desarrollador entienda cómo funciona React y cómo los componentes viven a través de las diferentes fases del ciclo de vida del componente.
Con React puedes ganar muchas de las mejoras que ofrece al medir y optimizar cómo y cuándo regresan tus componentes. Y React proporciona sólo las herramientas y funciones necesarias para hacer esto más fácil.
Acelera tu aplicación React al optimizar tu proceso renderización-diff de los componentes.
En este tutorial React, aprenderás cómo puedes medir el desempeño de tus componentes de React y optimizarlos para construir una aplicación web con React de mayor y mejor desempeño. De igual modo, aprenderás cómo un par de las mejores prácticas JavaScript también ayudan a que tu aplicación web con React presente una experiencia de usuario sin inconvenientes.

¿Cómo funciona React?

Antes de entrar a las técnicas de optimización, necesitamos entender mejor cómo funciona React.
En el corazón de React se encuentra la sintaxis JSX y la habilidad de React de construir y comparar DOM virtuales. Desde su lanzamiento, React ha influenciado muchas otras bibliotecas front-end. Bibliotecas tales como Vue.js también se apoyan en la idea de DOM virtuales.
Aquí se ve cómo funciona React:
Cada aplicación React comienza con un componente de raíz y se compone de muchos componentes en una formación de árbol. Los componentes en React son “funciones” que dejan la UI basada en la data (apoyo y estado) que recibe.
Esto lo podemos simbolizar como F.
UI = F(data)
Los usuarios interactúan con la UI y ocasionan un cambio en la data. Ya sea que la interacción sea dar clic a un botón, tocar una imagen, arrastrar ítems de una lista, peticiones AJAX que llaman API, etc., todas esas interacciones solo cambian la data. Nunca causan que la UI cambie directamente.
Aquí, la data es todo lo que define el estado de la aplicación web y no solo lo que has almacenado en tu base de datos. Hasta trozos de los estados front-end (ej. Qué ventana se selecciona en el momento o si una casilla se marcó en el momento) son parte de esta data.
Cuando hay un cambio en esta data, React usa las funciones de componente para volver a dejar la UI, pero solo virtualmente:
UI1 = F(data1)
UI2 = F(data2)
React calcula las diferencias entre la UI actual y la nueva UI al aplicar un algoritmo comparativo en las dos versiones de su DOM virtual.
Changes = Diff(UI1, UI2)
React luego procede a aplicar solo los cambios a la UI real en el buscador.
Cuando la data asociada al componente cambia, React determina si en realidad se necesita una actualización DOM. Esto le permite a React poder evitar operaciones de manipulación DOM costosas en el buscador, como creación de nodos DOM y acceder a algunos de estos ya existentes más de lo necesario.
Este cálculo de diferenciación repetido y el dejar componentes, puede ser una las fuentes primarias de los problemas de desempeño de React en cualquier aplicación con React. Construir una aplicación React en la que la diferenciación de algoritmos no se logra reconciliar efectivamente, causando así que toda la aplicación sea dejada repetidamente, puede resultar en una experiencia frustrante y lenta.

¿Dónde comenzar la optimización?

¿Pero qué estamos optimizando exactamente?
Bueno, durante el proceso inicial de dejar atrás, React construye un árbol DOM como éste:
Un DOM virtual de componentes React
Dado que una parte de la data cambia, lo que queremos que haga React es dejar de nuevo sólo los componentes que se ven afectados directamente por el cambio (y posiblemente obviar el proceso de diff para el resto de los componentes):
React renderiza un numero de componentes
Sin embargo, lo que React termina haciendo es:
React mal gastando recursos al renderizar todos los componentes
En la imagen de arriba, todos los nodos amarillos son renderizados y diferenciados (diff), dando como resultado una pérdida de tiempo/recursos de computación. Aquí es donde pondremos nuestros esfuerzos de optimización, principalmente. Configurar cada componente para que sólo renderice-diferencie (diff) cuando sea necesario, nos permitirá recuperar estos ciclos CPU perdidos.
Los desarrolladores de la biblioteca React tomaron esto en consideración y proporcionaron un enganche para nosotros poder hacer exactamente eso: una función que nos permite decirle a React cuando está bien obviar la renderización de un componente.

Medir Primero

Como lo dice Rob Pike de manera elegante como una de sus reglas de programación:
Medir. No ajustes la velocidad hasta que hayas medido y aun en ese momento no lo hagas, a menos que una parte del código opaque el resto.
No optimices un código que pienses que puede bajar la velocidad de tu aplicación. En vez de esto, deja que las herramientas de medida de desempeño de React te guíen en el camino.
React tiene una fuerte herramienta para esto. Al usar la biblioteca react-addons-perf puedes obtener un resumen del desempeño general de tu aplicación.
El uso es muy simple:
Import Perf from 'react-addons-perf'
Perf.start();
// use the app
Perf.stop();
Perf.printWasted();
Esto imprimirá una tabla con la cantidad de componentes de tiempo perdido al renderizar.
Tabla de componentes perdiendo tiempo al renderizar
La biblioteca proporciona otras funciones que te permiten imprimir diferentes aspectos del tiempo perdido por separado (ej., al usar las funciones printInclusive() o printExclusive()), o hasta imprimir las operaciones de manipulación DOM (usando la función printOperations()).

Tomando la Comparativa del Mercado Más Allá

Si eres una persona visual, entonces react-perf-tool es exactamente lo que necesitas.
react-perf-tool está basada en la biblioteca react-addons-perf. Te da una manera más visual de depurar el desempeño de tu aplicación con React. Ésta usa la biblioteca subyacente para obtener medidas y luego las visualiza como gráficas.
Una visualización de componentes perdiendo tiempo en renderización
Muy a menudo, ésta es una manera mucho más conveniente de notar las trancas. La puedes usar fácilmente al agregarla como componente a tu aplicación.

¿React Debería Actualizar el Componente?

Por defecto, React se ejecutará, renderizará el DOM virtual y comparará la diferencia para cada componente en el árbol para cada cambio en sus apoyos y estados. Pero eso no es racional, obviamente.
Mientras tu aplicación crece, intentar re-renderizar y comparar el DOM virtual completo en cada acción, eventualmente disminuirá la velocidad.
React proporciona una manera sencilla para que el desarrollador indique si un componente necesita ser re-renderizado. Aquí es donde el método shouldComponentUpdate entra en juego.
function shouldComponentUpdate(nextProps, nextState) {
   return true;
}
Cuando esta función da un resultado verdadero para cualquier componente, permite que se active el proceso de renderización-diferenciación.
Esto te da una manera sencilla de controlar el proceso de renderización-diferenciación. Cuando necesites prevenir que un componente sea re-renderizado por completo, simplemente es un resultado falso de la función. Dentro de la función, puedes comparar el set de apoyos y estado actual, al igual que el siguiente para determinar si es necesario re-renderizar:
function shouldComponentUpdate(nextProps, nextState) {
   return nextProps.id !== this.props.id;
}

Usar un React.PureComponent

Para facilitar y automatizar un poco esta técnica de optimización, React proporciona lo que se conoce como componente “puro”. Un React.PureComponent es exactamente como un React.Component que implementa una función shouldComponentUpdate() con una comparación vacía de apoyo y estado.
Un React.PureComponent es más o menos un equivalente a esto:
class MyComponent extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
       return shallowCompare(this.props, nextProps) && shallowCompare(this.state, nextState);
   }
   …
}
Ya que sólo realiza una comparación vacía, tal vez sólo te parezca útil cuando:
  • Tus apoyos y estados contienen data primitiva.
  • Tus apoyos y estados tienen data compleja, pero sabes cuándo llamar forceUpdate() para actualizar tu componente.

Hacer la Data Inmutable

¿Qué tal si pudieras usar React.PureComponent y seguir teniendo una manera eficiente de ver cuando cualquier apoyo o estado complejo ha cambiado automáticamente? Aquí es donde las estructuras de data inmutable nos hacen la vida más fácil.
La idea detrás del uso de las estructuras de data inmutable es simple. Cuando un objeto que contiene cambios de data complejos, en vez de hacer los cambios en ese objeto, crea una copia de ese objeto con los cambios. Esto hace el detectar los cambios en la data tan simple como comparar la referencia de los dos objetos.
Puedes usar Object.assign o _.extend (desde Underscore.js o Lodash):
const newValue2 = Object.assign({}, oldValue);
const newValue2 = _.extend({}, oldValue);
Aun mejor, puedes usar una biblioteca que proporciona estructuras de data inmutable:
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 2);
assert(map1.equals(map2) === true);
var map3 = map1.set('b', 50);
assert(map1.equals(map3) === false);
Aquí, Immutable.Map es proporcionada por la biblioteca Immutable.js.
Cada vez que un mapa se actualiza con su método set, un nuevo mapa se regresa sólo si la operación set cambió el valor subyacente. De otro modo, el mismo mapa se regresa.
Puedes aprender más sobre el uso de estructuras de data inmutable aquí.

Más Técnicas de Optimización de Aplicación React

Usando la Construcción de Producción

Cuando se desarrolla una aplicación con React, se presentan advertencias y mensajes de errores muy útiles. Estos hacen la identificación de bugs y problemas durante el desarrollo muy fácil. Pero también cuestan parte del desempeño.
Si observas el código fuente de React, verás muchas marcas de if (process.env.NODE_ENV != 'production'). Estos trozos de código que React está ejecutando en tu ambiente de desarrollo no es algo que el usuario necesite. Para ambientes de producción, todo este código innecesario se puede descartar.
Si impulsaste tu proyecto usando create-react-app, entonces puedes ejecutar npm run build para producir la construcción de producción sin este código extra. Si estás usando Webpack directamente, puedes ejecutar webpack -p (el cual es el equivalente de webpack --optimize-minimize --define process.env.NODE_ENV="'production'".

Atar Funciones Desde Temprano

Es muy común ver funciones atadas al contexto del componente dentro de la función renderizada. Esto es, a menudo, el caso, cuando usamos estas funciones para manejar eventos de componentes en temprana etapa.
// Creates a new `handleUpload` function during each render()
<TopBar onUpload={this.handleUpload.bind(this)} />
// ...as do inlined arrow functions
<TopBar onUpload={files => this.handleUpload(files)} />
Esto causará que la función render() cree una nueva función en cada renderización. Una mejor manera de hacer lo mismo es:
class App extends React.Component {
   constructor(props) {
       super(props);
       this.handleUpload = this.handleUpload.bind(this);
   }
   render() {
       …
       <TopBar onUpload={this.handleUpload} />
       …
   }
}

Usar Múltiples Archivos Chunk

Para las aplicaciones web con React de una sola página, normalmente terminamos uniendo todo nuestro código JavaScript front-end en un archivo único minimizado. Esto funciona muy bien para aplicaciones web de tamaño medio. Pero mientras la aplicación comienza a crecer, entregar este archivo JavaScript unido al buscador como tal puede ser un proceso que consume mucho tiempo.
Si estás usando Webpack para construir tu aplicación, puedes impulsar su código al separar sus capacidades para igualmente separar tu código de aplicación construida en varios “chunks” (trozos) y entregarlos al buscador en los momentos necesarios.
Hay dos tipos de separación: separación de recursos y separación de código en demanda.
Con la separación de recursos, separas contenido de recursos en varios archivos. Por ejemplo, al usar CommonsChunkPlugin, puedes extraer un código común (como todas las bibliotecas externas) a un archivo “chunk” propiamente. Al usar ExtractTextWebpackPlugin, puedes extraer todo código CSS a un archivo CSS separado.
Este tipo de separación te ayudará de dos maneras. Ayuda al buscador a almacenar aquellos recursos que cambian con menos frecuencia. También ayudará al buscador a tomar ventaja de la descarga paralela para reducir, potencialmente, el tiempo de carga.
Una característica más notable de Webpack es la separación del código en demanda. Esto puede mantener la descarga inicial pequeña al reducir el tiempo que toma cargar la aplicación. El buscador puede, consecuentemente, descargar trozos de código en demanda cuando la aplicación lo necesite.
Puedes aprender más sobre la separación de código Webpack aquí.

Activar Gzip en tu Servidor Web

El grupo de archivos JS de la aplicación React son, comúnmente, muy grandes así que para hacer que la página web cargue más rápido, podemos activar Gzip en el servidor web (Apache, Nginx, etc.)
Todos los buscadores modernos apoyan y negocian automáticamente la compresión de Gzip para las peticiones HTTP. Activar la compresión Gzip puede reducir el tamaño de la respuesta transferida en un 90%, lo cual puede reducir la cantidad de tiempo para descargar un recurso, reducir el uso de data para el cliente y mejorar el tiempo para la renderización de tus páginas.
Verifica la documentación para tu servidor web para ver cómo activar la compresión:

Usar Eslint-plugin-react

Deberías usar ESLint para casi todos los proyectos JavaScript. React no es la diferencia.
Con eslint-plugin-react, te estarás obligando a adaptarte a muchas de las reglas de programación de React, que pueden beneficiar tu código a la larga y evitar muchos problemas comunes e inconvenientes que ocurren debido a la mala escritura de códigos.

Haz a tus Aplicaciones React rápidas Nuevamente

Para aprovechar a React al máximo, necesitas impulsar sus herramientas y técnicas. El desempeño de una aplicación web de React se encuentra en la simplicidad de sus componentes. Abrumar el algoritmo de renderización y diferenciación puede hacer que tu aplicación se desempeñe pobremente de forma muy frustrante.
Antes de que puedas optimizar tu aplicación, necesitas entender cómo funcionan los componentes de React y como se renderizan en tu buscador. Los métodos del ciclo de vida de React te dan maneras de prevenir que tu componente re-renderice innecesariamente. Elimina aquellas trancas y tendrás el desempeño de la aplicación que merecen tus usuarios.
Aunque hay más formas de optimizar una aplicación web con React, perfeccionar los componentes para actualizar sólo cuando se requiere, impide una mejora en el desempeño.
Articulo publicado originalmente en Toptal.

jueves, 13 de julio de 2017

Las APIs En Redes Sociales: El Portal De Internet Al Mundo Real

Las API de las redes sociales han crecido mucho desde que Google lanzó la primera versión de su API de Youtube en mayo de 2008, y desde que Facebook lanzó la primera versión de su API Graph en abril de 2010. Hoy, estas API te dan la oportunidad de buscar en las plataformas de redes sociales: posts, usuarios, canales y data demográfica. También te dejan crear tu propio servicio o conocer más sobre tu base de usuarios.
En este artículo, vamos a examinar las formas en las que podemos utilizar algunas de las API en las redes sociales populares:
  • Facebook (API Graphic y Marketing)
  • Instagram
  • Twitter
  • YouTube
  • Pinterest
También vamos a discutir sus limitaciones y exploraremos algunas de sus herramientas más útiles que se encuentran disponibles con estas API. Luego, en el artículo, echaremos un vistazo a cómo integrar estas API a cualquier aplicación de Rails.
Las API en Redes Sociales: El Portal de Internet al Mundo Real
Usa una API de una red social para conocer a tus usuarios mejor de lo que se conocen ellos mismos"
Me voy a concentrar en la API de una red social a la vez, para explicar sus capacidades, limitaciones y herramientas disponibles. Habrá una matriz con las diferentes API y sus propiedades para hacer una mejor comparación más adelante en el artículo.
Para poder usar las API, primero debes instalar una aplicación que crea preguntas en nombre de tu aplicación con peticiones basadas en OAuth. Los usuarios autenticarán su información en tu aplicación y luego de esto, puedes tener acceso a su data con el identificador de acceso de usuario que dé como resultado.

Facebook

El desactualizado FQL (Facebook Query Language) usado para un lenguaje de preguntas similar al SQL, el cual podría ser usado para acceder a toda la data de Facebook.
Facebook lanzó la primera versión de su API Graph en abril de 2010. La versión más reciente, al momento de escribir este artículo, es la 2.6, la cual se introdujo el 12 de abril de 2016. Es una API de bajo nivel de base HTTP que puede ser usada para preguntar por data, crear posts y hasta crear campañas publicitarias automatizadas.

Herramientas

El Explorador API Graph es la herramienta más usada comúnmente al trabajar con la API de Facebook. Te deja ejecutar las preguntas de la API Graph en el buscador, al igual que examinar los resultados: puedes usar uno de los bloques de acceso de tu aplicación o crear uno en el momento con scopes seleccionados.

Habilidades

La API Graph es una API con base REST que te permite crear, actualizar y eliminar objetos de cada petición HTTP en algunos nodos.

Token de Acceso

Para ejecutar preguntas a la API Graph, necesitas un token de acceso el cual se obtiene en cuanto un usuario autorice de manera exitosa en tu aplicación.

Scopes

Los scopes determinan qué acciones se pueden realizar en nombre del usuario. La aplicación pide ciertos scopes cuando un usuario se autoriza en una aplicación. El scope publish_actions, por ejemplo, permite que una aplicación publique posts de parte de un usuario. El scope de correo electrónico permite que la aplicación lea el correo electrónico del usuario. Una revisión completa de todos los scopes la puedes encontrar en la documentación om.
Ciertos scopes como el publish_actions o ads_management requieren una revisión de parte de Facebook antes del lanzamiento de la aplicación.

Ejemplo

Para demostrar cómo funciona la API Graph, te mostraré cómo crear, actualizar y eliminar posts con la API.
Para obtener tus propios posts, puedes ejecutar la pregunta GET /me/posts. El resultado será una cadena de caracteres JSON con una lista de posts, incluyendo su mensaje, created_time, e identificación. Puedes usar el parámetro pretty o un formateador JSON para que la respuesta no se vea tan desordenada.
Para obtener más data sobre tus posts, puedes extender la pregunta con campos como parámetros de preguntas. Por ejemplo, la pregunta me/posts?fields=reactions, picture te dará la foto y reacciones del post.
Para crear un post, puedes enviar una acción POST a edge feed, ej. me/feed, con parámetros como message: hello world. La API Graph regresará un objeto JSON con la ID del post que creaste. Puedes ver el post en la dirección http://facebook.com/[post_id].
Para actualizar un post, puedes enviar una solicitud POST al nodo del post con los campos para ser actualizados como parámetros; ej., /[post_id] y parámetros como Message: lorem ipsum. Se regresará un indicador exitoso con valor de verdadero o falso.
Para eliminar un post puedes, simplemente, hacer una petición de ELIMINAR al nodo con el post ID (ej., /[post_id]). El valor de regreso será un objeto JSON con un valor exitoso de verdadero o falso.
Una revisión completa de todos los nodos y acciones está disponible en la Referencia API Graph.

API de Marketing

La API de marketing merece una mención especial ya que es una de las herramientas más poderosas de manejo de publicidad en Facebook y obtiene una percepción desde adentro de la publicidad, a través de tu aplicación.
Funciona de la misma manera que otros métodos de API Graph. Sin embargo, necesitas el scope ads_managementpara obtener acceso a las publicidades del usuario. Facebook también necesita revisar tu aplicación antes de que puedas publicarla.

Prueba

Una vez que creas tu aplicación, está en modo desarrollo y automáticamente se hace visible en el tablero de tu aplicación (ej., https://developers.facebook.com/apps/).
En modo desarrollo, solo administradores, desarrolladores y probadores tienen acceso a tu aplicación. Puedes agregar probadores y administradores y la sección de roles del tablero de tu aplicación.

Proceso de Revisión

Cuando se agregan ciertos permisos, Facebook necesita revisar tu aplicación antes de que puedas publicarla. El proceso de revisión está definido por este set de guías.
Para poder ingresar ciertos ítems a revisión, solo tienes que agregarlos a la sección de revisión del tablero de tu aplicación. Facebook te guiará a través del proceso de revisión y te alertará una vez que tu aplicación sea aprobada.

Limitaciones y Métodos Alternativos

Limites de Tasa

Una aplicación puede realizar 200 llamadas por hora por cada usuario en agregado. Si llegas a ese límite, tus llamadas API darán como resultado un error.

Buscando Posts en Facebook

Facebook restringe la búsqueda de posts y etiquetas en Facebook a través de la API Graph y FQL. Sin embargo, puedes usar la API Google Search para buscar posts públicos en Facebook y luego usar la identificación-post en la URL para tomar más información sobre posts específicos a través de la API Graph.

Obtener Data de Público Personalizado

Percepción de Público en Facebook es una herramienta de búsqueda importante para aprender más sobre un público basado en intereses, demografía, u otros atributos (ej., una colección de direcciones de correo electrónico).
Sin embargo, no he encontrado una manera de crear automáticamente una percepción de público a través de la API publicitaria. Déjanos saber en los comentarios si tienes algunas ideas creativas o sugerencias para esto.

Instagram

La API de Instagram fue lanzada en abril de 2014 y te permite construir aplicaciones que analizan los posts de los usuarios y los ayuda a manejar sus propios posts.

Herramientas

Ya que la consola API de Instagram fue eliminada al momento de escribir este artículo, te recomiendo usar Apigee con el propósito de probarlo en tu buscador.

Habilidades

La API de Instagram es una API basada en REST. Todos sus puntos de salida se describen en su documentación oficial.

Token de Acceso

Para ejecutar las preguntas a la API de Instagram, necesitas un token de acceso que se obtiene tan pronto como el usuario autoriza en tu aplicación. Para que un usuario reciba un token de acceso, él o ella debe ser dirigido a la autorización URL de tu aplicación. El servidor redirigirá al usuario después de autorizar tu aplicación y posteriormente podrás leer el token.

Scopes

Tu aplicación puede pedir permisos diferentes. Por ejemplo, lo “básico” te limita a leer la información de perfil al igual que fotos e imágenes de un usuario. “public_content” te permite leer cualquier perfil público y material multimedia en nombre de un usuario.

Ejemplos

Para demostrar cómo funciona la API de Instagram, mostraré ejemplos basados en el punto de salida de la multimedia https://api.instagram.com/v1/media/popular.
Este punto de salida regresa la multimedia popular actual de Instagram, si se pasa un bloque de acceso como parámetro. El resultado será una cadena de posts JSON que contienen, por cada uno, su identificación multimedia, un link a su imagen, likes, comentarios, el usuario que lo publicó y algunos otros atributos.
Puedes usar apigee para probar y descubrir más sobre los puntos de salida de la API y sus parámetros.

Pruebas

Cada nueva aplicación que ha sido creada en la plataforma Instagram comienza en modo sandbox. Este es un ambiente completamente funcional que te permite probar los puntos de salida API disponibles públicamente, antes de que presentes tu aplicación para ser revisada.
Para probar tu aplicación, solo debes crear una versión de etapas y ejecutar todas las preguntas a través de esa versión en vez de la versión en vivo que pasó por la revisión.

Proceso de Revisión

Aplicaciones en el modo sandbox puede usar cualquier punto de salida de API, pero éstas están restringidas a un número limitado de usuarios y material multimedia. Es un gran mecanismo para el desarrollo y pruebas de una aplicación.
Para lanzar en vivo y acceder a todo el contenido de Instagram, necesitarás pasar tu aplicación por una revisión. Una vez ha sido revisada, solo podrás pedir scopes para usuarios para quienes fue aprobada tu aplicación.

Limitaciones y Métodos Alternativos

Análisis Demográfico

Al momento de escribir este artículo, no había manera de obtener información sobre la edad de un usuario público, sexo o intereses, porque Instagram no te da esa información.
Para obtener la data de la información demográfica sobre los seguidores o una lista de usuarios de Instagram, necesitarías iterar sobre cada uno de ellos e intentar determinar la edad y sexo, basado en sus seguidores o la información en sus biografías.
Una gran solución de data para este problema podría ser un servicio muy valioso para algunas compañías.

Limites de Tasa

Todos los límites de tasa en la plataforma de Instagram son controlados por un bloque de acceso en una ventana deslizante de 1 hora. Las aplicaciones en vivo tienen límites de tasa más altos que las aplicaciones en Modo Sandbox. El límite de tasa global para una aplicación en vivo es, actualmente, de 5.000 llamadas por hora.

Twitter

La API de Twitter fue lanzada en septiembre de 2006. Es una API pública REST que provee acceso leído y escrito a la data de Twitter. La autenticación se realiza usando OAuth. Las respuestas son en formato JSON.

Herramientas

Twitter tiene una herramienta de consola API impulsada por apigee, que puede ser usada para probar las peticiones en el buscador.

Habilidades

La API REST te permite obtener los tweets, seguidores y personas a quien sigue un usuario. También puedes buscar las etiquetas en otros tweets.

Token de Acceso

Twitter te permite crear aplicaciones que los usuarios puedan autenticar al regreso del token de acceso. El modelo de autenticación es OAuth.

Scopes

Hay solo dos permisos que deben ser establecidos en la página de configuración de la aplicación: Solo Lectura, y Lectura y Escritura. El último de estos te deja crear tweets y ejecutar otras acciones de los posts de parte del usuario.

Ejemplos

Para demostrar el uso de la API de Twitter, voy a tomar los tweets autorizados por el usuario. El resultado es una cadena de caracteres JSON con las imágenes, favoritos, retweets, las url, fecha de creación y otros atributos de los tweets. Utiliza Apigee para probar y descubrir más sobre los puntos de salida de la API y sus parámetros.

Pruebas y Proceso de Revisión

Actualmente no hay un proceso de revisión o modo de prueba disponible para la API de Twitter.

Limitaciones y Métodos Alternativos

Análisis Demográfico

Actualmente no hay una manera fácil de obtener data demográfica desde los seguidores de Twitter de un usuario. El acercamiento en fuerza bruta sería revisar cada seguidor e intentar obtener la data a través de sus biografías y cuentas asociadas de otras redes sociales.
Después, puedes hacer suposiciones basadas en la data recolectada de los seguidores a través de un análisis de data. Otra manera de obtener más información es a través de la plataforma API de proyecto pago de Twitter llamado GNIP. Entre otras cosas, te permite crear un público y obtener más información sobre aquellos a través de la API. La API está actualmente en estado BETA.

Limites de Tasa

Twitter tiene límites de tasa por cada usuario y en base de 15 minutos. Si tu aplicación tiene tokens múltiples, puedes alternar tokens para operaciones públicas, para así evitar llegar al límite.

YouTube

La API de Data de YouTube fue lanzada en enero de 2013. Te permite agregar características de YouTube a tu aplicación, buscar contenido y analizar la demografía del canal de YouTube. Es un OAuth, la API REST basada en tokens, la cual regresa respuestas JSON.

Herramientas

El explorador de la API te permite hacer pruebas de peticiones no autorizadas al igual que autorizadas. Puedes ejecutar peticiones desde tu buscador a los puntos de salida proporcionados.

Habilidades

Entre otras cosas, puedes trabajar con actividades, chats, transmisiones en vivo, canales, vídeos y suscripciones. La mayoría de los puntos de salida requieren que autorices con una cuenta de YouTube.

Token de Acceso

La API de Data de YouTube apoya el protocolo OAuth 2.0 para autorizar acceso a la data de usuario privado. Una vez que un usuario ha sido autorizado en tu aplicación, será redirigido a tu aplicación donde el token de acceso debería ser guardado.
Para poder usar la autorización OAuth 2.0, primero necesitas obtener las credenciales de autorización en la consola de desarrollador de Google.

Scopes

La API de Data de YouTube actualmente trabaja con los siguientes scopes:
  • Fuerza SSL - Maneja tu cuenta de youtube, pero solo con una conexión SSL.
  • Por defecto - Maneja tu cuenta de YouTube. Este scope es funcionalmente idéntico al scope youtube.force-ssl pero no requiere una conexión SSL.
  • Solo Lectura - Mira tu cuenta YouTube.
  • Subir - Subir vídeos a YouTube y manejar tus vídeos de YouTube.
  • Auditar un Canal Compañero - Retira información que utilizan las Redes Multicanal como criterio de aceptación o rechazo de un canal en su red.

Ejemplos

Como ejemplo de uso de la API de Data de YouTube, muestro las siguientes preguntas de petición para vídeos con “codificación” en su título y descripción:
https://www.googleapis.com/youtube/v3/search?part=snippet&q=coding&key={YOUR_API_KEY}
El resultado es un objeto JSON que contiene el título, descripción, videold y channelld. Puedes usar el último de estos para saber más sobre el canal.
El parámetro part se requiere para cualquier petición de API que regresa alguna fuente. El parámetro identifica propiedades de recurso que deberían estar incluidas en una respuesta API. Por ejemplo, una fuente de vídeo tiene las siguientes partes: snippet, contentDetails, fileDetails, player, processingDetails, recordingDetails, estadísticas, estatus, sugerencias, topicDetails.
El resto de los parámetros, excepto la llave API, difiere de la llamada por llamada. Lee más sobre esto en la guía de referencia API.

Pinterest

La API de Pinterest fue lanzada inicialmente en abril de 2015. Es una API RESTful, la cual proporciona acceso a la data del usuario de Pinterest, como sus tableros, seguidores y más. La API de Pinterest usa OAuth y permite leer y escribir permisos cuando se interactúa con el contenido del usuario.

Herramientas

Como los otros, Pinterest proporciona una API Explorer para probar sus puntos de salida y ejecutar preguntas a estos. Puedes ver sus herramientas aquí.

Habilidades

La API REST de Pinterest te permite crear pins, tableros y hacer preguntas a la data Pinterest con OAuth.

Token de Acceso

Pinterest usa OAuth 2.0 para autenticar peticiones entre tu aplicación y tus usuarios. Todas las peticiones se deben hacer sobre HTTPS.

Scopes

Los Scopes determinan lo que una publicación puede hacer de parte de un usuario. Pinterest usa los siguientes scopes:
  • none (debe conocer al identificador) Usa el método GET en el perfil del usuario, tablero y detalles Pin, y los Pin en el tablero.
  • read_public: Usa el método GET en el Pin de un usuario, tablero y likes.
  • write_public: Usa los métodos PATCH, POST, y ELIMINAR en los Pins y tableros del usuario.
  • read_relationships: Usa el método GET en los seguidores y a quien sigue el usuario (en tableros, usuarios e intereses).
  • write_relationships: Usa los métodos PATCH, POST, y ELIMINAR en los seguidores y a quien sigue el usuario (en tableros, usuarios e intereses).

Ejemplos

Para demostrar el uso de la API de Pinterest, voy a demostrar cómo leer los últimos pins del usuario:
https://api.pinterest.com/v1/me/pins/?access_token={your_token}&fields=id,link,note,url,counts,board,created_atregresará los pins del usuario con su identificación, link, nota, url, likes y repins.

Pruebas y Proceso de Revisión

Las aplicaciones están inicialmente en modo desarrollo y deben ser presentadas para revisión antes de su lanzamiento en modo producción.

Limitaciones y Métodos Alternativos

Análisis Demográfico

No hay una manera común de obtener data demográfica de un tablero. Sin embargo, puedes intentar obtener los seguidores e información de estos de la biografía en los tableros, al igual que los links a otras cuentas de redes sociales. Una gran solución de data sobre las conexiones comunes de los usuarios también es una posibilidad.

Búsqueda de Pins

Actualmente, no hay manera posible de buscar pins con ciertas etiquetas o palabras clave a través de la API. Puedes ignorar esa limitación al usar la API de Google Custom Search para buscar resultados solo en los pins de Pinterest y recolectar la identificación del pin a través de la URL. La identificación puede posteriormente, ser usada para obtener información sobre el Pin a través de la API.

Limites de Tasa

Cada aplicación (con una identificación de aplicación única) se le permite 1,000 llamadas por cada punto de salida por hora por cada token de usuario único.
Cada respuesta API regresa un encabezado que te da una actualización sobre límites de tasa. X-Ratelimit-Limites el límite de tasa para esa petición en específico y X-Ratelimit-Remaining es el número de peticiones que te quedan en una ventana de 60 minutos.
Si excedes tu límite de tasa para el punto de salida dado, obtendrás un código de error 429 “Too many requests” .

Comparación de APIs de Redes Sociales

VersionOAuthFormatDemographics
Facebookv2.6
Initial Release: April 2010
OAuth 2REST requests with JSON responsesSupported
Instagramv1
Initial Release: April 2014
OAuth 2REST requests with JSON responsesNot supported
Twitterv1.1
Initial Release: September 2006
OAuth 1REST requests with JSON responsesOnly supported with GNIP
YouTubev3
Initial Release: January 2013
OAuth 2REST requests with JSON responsesSupported
Pinterestv1
Initial Release: April 2015
OAuth 2REST requests with JSON responsesNot Supported

Aplicación Demo Devise

Al integrar estas APIs en tus aplicaciones nuevas o ya existentes, gracias a un exceso de paquetes y bibliotecas API de redes sociales, este proceso es más fácil que nunca. La mayoría de las plataformas y frameworks tienen bibliotecas de terceras partes que han sido probadas, que hasta unifican el aspecto de autenticación de todas estas APIs en una sola biblioteca con una arquitectura de plugin ordenada.
Para este artículo, echaremos un vistazo a cómo Devise, una gema de Ruby, hace esto muy elegantemente para las aplicaciones de Rails. Devise es una biblioteca de autenticación flexible basada en Warden que implementa, autenticación, registro, acceso y almacén de data para proporcionar acceso múltiple. Si eres una persona más inclinada al front-end y quieres ver algo similar a AngularJS, revisa este artículo.
Devise, como muchas bibliotecas de este tipo, no vienen ya construidas con apoyo para cualquiera de las API de redes sociales. Apoyo para cada una de estas API de redes sociales, se proporciona a través de gemas adicionales. Las siguientes gemas están disponibles para la autenticación de Rails, que cubren los cinco proveedores discutidos en este artículo:
gem 'omniauth-facebook'
gem 'omniauth-pinterest'
gem 'omniauth-twitter'
gem 'omniauth-google-oauth2'
gem 'omniauth-instagram'
Una de las mejores cosas sobre Rails es que hay muchos plugins escritos por la comunidad de fuente abierta. Éstas están distribuidas como gemas. Enlistadas bajo un archivo de configuración central, estas gemas son manejadas por Bundler.
Ya que éstas sólo proporcionan autenticación, registro, acceso y almacén de cada uno de esos proveedores, también vamos a necesitar obtener las siguientes gemas para los clientes de la API:
gem 'twitter' # https://github.com/sferik/twitter
gem 'instagram' # https://github.com/facebookarchive/instagram-ruby-gem
gem 'koala' # (Facebook API) https://github.com/arsduo/koala
gem 'google-api-client' # (YouTube API), https://github.com/google/google-api-ruby-client
gem 'pinterest-api' # https://github.com/realadeel/pinterest-api

Omniauth y Autenticación

Para que un usuario pueda autorizar tu aplicación con tu proveedor, puedes proporcionar un link con el siguiente camino:
omniauth_authorize_path('user', :facebook)
omniauth_authorize_path('user', :instagram)
...
Para poder reaccionar en el llamado después de la autenticación de un usuario, puedes definir un OmniauthCallbacksController con los scopes como funciones así:
class AuthenticationsController < Devise::OmniauthCallbacksController
 def facebook
   if request.env["omniauth.auth"]
         ...
   end
 end
end
Ese es el lugar donde agregar un nuevo modelo de Autenticación con el token y la data dentro de tu aplicación:
authentication = where(provider: omniauth.provider, user_id: user.id)
 .first_or_create do |auth|
 
   auth.user = user
   auth.uid = omniauth.uid
 
   auth.secret = omniauth.credentials.secret
   auth.token =  omniauth.credentials.token
   ...
end

Hacer Llamadas API

Aquí hay un ejemplo de cómo usar Koala para hacer preguntas a la API de Facebook. El resto de los proveedores funcionan más o menos de manera similar y son documentadas en el README de la gema.
Así es como obtienes tu data de usuario usando Koala:
authentication = user.authentication_for_provider(:facebook)
token = authentication.token
api = Koala::Facebook::API.new(token)
results = api.get_object("me")
Puedes, luego, usar el resultado de regreso de JSON hecho por la API. El código fuente de este demo de la aplicación está disponible en GitHub.

Para Finalizar

Las API de redes sociales te proporcionan una herramienta poderosa para hacer preguntas al set de las datas en gran escala de las redes sociales, al igual que recolectar gran data para tu aplicación. Puedes construir un servicio sobre estas API o usarlas para aumentar tu propia aplicación o perspectivas del usuario.
Rails y las gemas disponibles, hacen más fácil integrar estas API a tu aplicación de rails y hacer preguntas a las interfaces con una capa de abstracción entre tu aplicación y la API.
Articulo publicado originalmente en Toptal.