10. Visualización de datos

10.5. Datos de internet: API

Dado que nuestros sketches viven en la web, podemos aprovecharnos de ello para extraer datos en tiempo real de internet sin que tengamos que cargar archivos externos de manera local. Muchas webs y servicios ofrecen datos a los que podemos acceder de manera gratuita para cargarlos en nuestros programas. Normalmente, estos servicios ofrecen lo que se denomina una API (application programming interface), una interfaz a través de la cual le podemos pedir los datos y que normalmente nos devolverá un archivo JSON.

En esta web se pueden encontrar muchas API de libre acceso. Hagamos un ejemplo sencillo con una API de Coindesk, que nos permite consultar el valor del Bitcoin en tiempo real.

Para ello, únicamente necesitamos saber la URL de la API y pasársela como argumento a loadJSON():

let bitcoinData;
function preload() {
  let URL = "https://api.coindesk.com/v1/bpi/currentprice.json";
  bitcoinData = loadJSON(URL);
}

Si ahora hacemos un console.log(bitcoinData), podremos ver en la consola los datos que nos devuelve la API:

Podemos observar que dentro del bitcoinData tenemos un objeto bpi (bitcoin price index), que a su vez tiene dentro otro objeto EUR con una propiedad rate_float, que es la que nos da el precio en euros (y sin coma para los millares) que podremos usar en nuestro sketch.

let bitcoinData;
let rate;

function preload() {
  let URL = "https://api.coindesk.com/v1/bpi/currentprice.json";
  bitcoinData = loadJSON(URL);
}

function setup() {
  createCanvas(400, 400);
  rate = round(bitcoinData.bpi.EUR.rate_float);
}

Ahora, lo único que nos quedaría por hacer es visualizar el precio del Bitcoin, para lo que vamos a crear una moneda cuyo tamaño esté relacionado su precio:

En este caso, no hemos utilizado objetos, ya que solo estamos creando una moneda, pero sería interesante acceder a datos de otras monedas y poder visualizarlas. En ese caso, sí sería interesante crear una clase para no tener que hacer cada moneda «a mano». También sería interesante que cargásemos de nuevo los datos cada cierto tiempo, para que la información se vaya actualizando. Para ello, podríamos utilizar algún temporizador y una función en la que utilizásemos de nuevo loadJSON().

Hay otras API también gratuitas, pero que requieren registrarse para obtener los datos a través de una API_KEY, una clave personal que se añade a la URL de la API con la que hacer las peticiones de datos. Algunas de estas API también permiten enviar peticiones (querys) a las API, que también se añaden a la URL. Por ejemplo, para una API del tiempo podemos mandarle una petición con la localización de dónde queremos saber el tiempo que hace. Otro ejemplo podría ser el de la API de artículos del New York Times, a la que necesitamos añadir como query el tema sobre el que queremos buscar artículos:

https://api.nytimes.com/svc/search/v2/articlesearch.json?q=olympics&api-key=4UpTSCM8osv0KZE5S1zwY6ZRtYnR7suC

Las partes destacadas en negrita son la query que le enviamos a la API, en este caso olympics para buscar artículos sobre los juegos olímpicos, y la API-KEY es nuestra clave personal que nos dan al registrarnos. Para cargar el JSON, deberíamos hacer algo así:

let API_KEY = "4UpTSCM8osv0KZE5S1zwY6ZRtYnR7suC";
let query = "olympics";
let URL = https://api.nytimes.com/svc/search/v2/articlesearch.json?q=
            + query 
            + "&api-key=" 
            + API_KEY;
let data;

function preload() {
  data = loadJSON(URL);
}

En esta web se pueden encontrar muchas API públicas, y muchas requieren darse de alta para obtener la API-KEY.