Tutorial: Integra tu blog de medium en tu sitio web con Google Cloud Functions y React — Parte 1

Aprende a consumir la API de Medium para mostrar los artículos de tu blog o publicación por medio de Google Cloud Functions.

Uno de los retos que nos enfrentamos como programadores es buscar las soluciones más actuales para implementar en nuestros proyectos, Medium es una gran herramienta que en lo personal, me vuelve más productivo y le da un plus a mi marca personal.

Pero sigue siendo una plataforma en la que no tienes un dominio personalizado (antes existía esa opción y fui uno de los afortunados en enlazar mi dominio).

Consumiendo datos de Medium

Medium tiene una API REST, pero solamente es para que puedas escribir contenido, sin embargo no es el caso de este artículo, ya que solamente mostraremos nuestros artículos en un sitio web de nuestra preferencia.

Vamos a ver dos aproximaciones, una a través del feed en RSS y otra a través del json.

Utilizando el feed de tu publicación o perfil

Para obtener nuestro feed de Medium es muy sencillo, añadimos la ruta feed antes de nuestro nombre de usuario en la url de medium, por ejemplo:

https://medium.com/feed/edgar-talledos

En este el nombre de la publicación que quiero obtener es edgar-talledos , solamente con que tú lo sustituyas podrás obtener tu feed.

Ahorar necesitamos convertir ese feed en formato json y así lo podamos consumir.

Vamos a usar una herramienta muy valiosa, esta herramienta es:

RSS to JSON Converter online - rss2json.com

Solamente basta con introducir la dirección de nuestro feed de la siguiente forma: https://medium.com/feed/edgar-talledos/, solamente le damos click en el botón Convert to JSON y podremos consumir mediante un api:

https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2Fedgar-talledos%2F

Y listo, ahora la aplicación rss to json nos permitirá consumir esos datos en formato json sin los problemas habituales que el control de acceso CORS puede traer.

Una de las grandes ventajas o desventajas (dependiendo del uso que le quieras dar) a este método, es que nos permite obtener todo el contenido de los últimos 10 artículos de nuestro feed, pero para nuestro caso esto no es necesario, ya que solamente necesitamos el título y el resumen de cada artículo.

Consumiendo datos con Google Cloud Functions

Le llegó el turno a nuestro método seleccionado.

Obteniendo la url de medium para consumir datos por JSON

Para poder consumir datos directamente de medium, vamos a usar la siguiente URL:

https://medium.com/edgar-talledos/latest?format=json

Esto permitirá obtener los últimos 10 posts de nuestro feed, pero sin el contenido, si visualizamos ese enlace en nuestro navegador veremos que aparece así:

Al principio aparece la cadena:

Esto es una medida de seguridad para evitar JSON hijacking. Puedes checar más información en el siguiente enlace.

Google prepends while(1); to their JSON responses for security reasons. How can the response be…

A nosotros nos va a tocar quitar ese fragmento de código, y no sólo eso, también evitar que CORS nos arruine un poco la vida (lo digo por experiencia).

Implementación de una función de Google Cloud Functions

No vamos a dar una explicación detallada de la instalación de las herramientas de google para implementar las funciones, les dejo el enlace para que pueda llevar a cabo la instalación de forma adecuada.

Cloud Functions for Firebase | Firebase

Vamos a inicializar nuestra función mediante firebase tools con el siguiente comando:

npm install -g firebase-tools

NOTA

Es importante tener una cuenta de Google Cloud Platform activa, si no la podemos crear.

Ahora vamos a enlazar nuestra cuenta de GCP y a iniciar nuestras funciones:

firebase login
firebase init functions

Esto creará una carpeta functions en la raiz de nuestro proyecto con un archivo index.js , esta será la estructura de nuestras carpetas.

Vamos a modificar nuestro archivo index.js , nuestra función se llamará mediumGetPosts y nuestro código quedará de la siguiente forma.

Primero instalaremos request con el siguiente comando, en nuestra carpeta functions :

npm install --save request

Ahora cargamos los módulos necesarios:

const functions = require('firebase-functions');
const request = require('request');

Y creamos nuestra función:

exports.medium = functions.https.onRequest((req, res) => {
...aquí va nuestro código
});

Una de las enormes ventajas de Google Cloud Functions es que son código de express.js, en los mismos comentarios de la función nos lo dice:

/**
 * HTTP Cloud Function.
 *
 * @param {Object} req Cloud Function request context.
 *                     More info: https://expressjs.com/en/api.html#req
 * @param {Object} res Cloud Function response context.
 *                     More info: https://expressjs.com/en/api.html#res

Por lo que primero, tenemos que asegurarnos que el usuario, a través de un query nos proporcione los datos que necesitamos, en este caso: el nombre de usuario de nuestra publicación o perfil en medium, esto lo escribimos en el cuerpo de la función:

if(!req.query.username) {
    return res
      .status(400)
      .send('Error: You need to include query param ?username=@yourUsername');
}

A continuación, vamos a insertar las cabeceras adecuadas para que podamos evitar los errores que produce CORS: No ‘Access-Control-Allow-Origin’ header is present in the ***’ endpoint.

if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
} else {
    // Set CORS headers for the main request
    res.set('Access-Control-Allow-Origin', '*');
}

Ahora, vamos a obtener los datos de nuestro feed, y convertir eso a algo que nuestro cliente pueda consumir sin problemas, quitando la cadena ])}while(1);</x> de nuestra petición.

El código quedará de la siguiente forma:

const url = `https://medium.com/${req.query.username}/latest?format=json`;
return request(url, (error, response, body) => {
    const prefix = `])}while(1);</x>`
    const strip = payload => payload.replace(prefix, ``)
    res.send(JSON.parse(strip(body)));
});

Si seguiste los pasos la función debe quedar así:

Ahora vamos a desplegar nuestra función para poder usarla:

firebase deploy --only functions

La misma consola de google nos dirá nuestro endpoint y podremos usar nuestra función sin problemas.

En mi caso la petición se ve así:

Petición realizada con emacs

Conclusión

No olvides seguirme en mis redes sociales, la próxima semana integraremos medium con React, para así poder hacer increíbles aplicaciones y sitios web, sin preocuparnos por hacer un blog súper complejo.