10. Visualització de dades

10.5. Dades d’internet: API

Atès que els nostres sketches viuen al web, ens en podem aprofitar per extreure dades en temps real d’internet sense que hàgim de carregar fitxers externs de manera local. Molts webs i serveis ofereixen dades a les quals podem accedir de manera gratuïta per carregar-les als nostres programes. Normalment, aquests serveis ofereixen el que es denomina una API (application programming interface), una interfície a través de la qual li podem demanar les dades i que normalment ens retornarà un fitxer JSON.

En aquest web es poden trobar moltes API de lliure accés. Fem un exemple senzill amb una API de CoinDesk, que ens permet consultar el valor del bitcoin en temps real.

Per a això, únicament necessitem saber la URL de l’API i passar-la com a argument a loadJSON():

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

Si ara fem un console.log(bitcoinData), podrem veure a la consola les dades que ens retorna l’API:

Podem observar que dins del bitcoinData tenim un objecte bpi (bitcoin price index), que al seu torn té a dins un altre objecte EUR amb una propietat rate_float, que és la que ens dona el preu en euros (i sense coma per als milers) que podrem usar al nostre 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);
}

Ara, l’única cosa que ens quedaria per fer és visualitzar el preu del bitcoin, per a la qual cosa crearem una moneda la mida de la qual estigui relacionada amb el seu preu:

En aquest cas, no hem utilitzat objectes, ja que només estem creant una moneda, però seria interessant accedir a dades d’altres monedes i poder-les visualitzar. En aquest cas, sí que seria interessant crear una classe per no haver de fer cada moneda «a mà». També seria interessant que carreguéssim de nou les dades cada cert temps, perquè la informació es vagi actualitzant. Per a això, podríem utilitzar algun temporitzador i una funció en la qual utilitzéssim de nou loadJSON().

Hi ha altres API també gratuïtes, però que ens demanen que ens hi registrem per obtenir les dades a través d’una API_KEY, una clau personal que s’afegeix a la URL de l’API amb la qual fer les peticions de dades. Algunes d’aquestes API també permeten enviar peticions (querys) a les API, que també s’afegeixen a la URL. Per exemple, per a una API del temps li podem enviar una petició amb la localització d’on volem saber el temps que fa. Un altre exemple podria ser el de l’API d’articles del New York Times, a la qual necessitem afegir com a query el tema sobre el qual volem buscar articles:

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

Les parts destacades en negreta són la query que enviem a l’API, en aquest cas olympics per buscar articles sobre els jocs olímpics, i l’API_KEY és la nostra clau personal que ens donen en registrar-nos. Per carregar el JSON, hauríem de fer una cosa així:

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 aquest web es poden trobar moltes API públiques, i a moltes t’hi has de donar d’alta per obtenir l’API_KEY.