{"id":456,"date":"2022-10-06T14:54:45","date_gmt":"2022-10-06T12:54:45","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=456"},"modified":"2022-11-18T15:18:42","modified_gmt":"2022-11-18T13:18:42","slug":"10-5-datos-de-internet-api","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/10-5-datos-de-internet-api\/","title":{"rendered":"10.5. Datos de internet: API"},"content":{"rendered":"

Dado que nuestros sketches<\/em> 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<\/em>), una interfaz a trav\u00e9s de la cual le podemos pedir los datos y que normalmente nos devolver\u00e1 un archivo JSON.<\/p>\n

En esta web<\/a> 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.<\/p>\n

Para ello, \u00fanicamente necesitamos saber la URL de la API y pas\u00e1rsela como argumento a loadJSON()<\/span>:<\/p>\n

let bitcoinData;\r\nfunction preload() {\r\n  let URL = \"https:\/\/api.coindesk.com\/v1\/bpi\/currentprice.json\";\r\n  bitcoinData = loadJSON(URL);\r\n}<\/pre>\n
Si ahora hacemos un console.log(bitcoinData),<\/span> podremos ver en la consola los datos que nos devuelve la API:<\/p>\n
\"\"
Figura 131. JSON de la API de Coindesk
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Podemos observar que dentro del bitcoinData<\/span> tenemos un objeto bpi<\/span> (bitcoin price index<\/em>), que a su vez tiene dentro otro objeto EUR con una propiedad rate_float<\/span>, que es la que nos da el precio en euros (y sin coma para los millares) que podremos usar en nuestro sketch<\/em>.<\/p>\n
let bitcoinData;\r\nlet rate;\r\n\r\nfunction preload() {\r\n  let URL = \"https:\/\/api.coindesk.com\/v1\/bpi\/currentprice.json\";\r\n  bitcoinData = loadJSON(URL);\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  rate = round(bitcoinData.bpi.EUR.rate_float);\r\n}<\/pre>\n
Ahora, lo \u00fanico que nos quedar\u00eda por hacer es visualizar el precio del Bitcoin, para lo que vamos a crear una moneda cuyo tama\u00f1o est\u00e9 relacionado su precio:<\/p>\n
\"\"
Figura 132. Visualizando el precio del Bitcoin
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En este caso, no hemos utilizado objetos, ya que solo estamos creando una moneda, pero ser\u00eda interesante acceder a datos de otras monedas y poder visualizarlas. En ese caso, s\u00ed ser\u00eda interesante crear una clase para no tener que hacer cada moneda \u00aba mano\u00bb. Tambi\u00e9n ser\u00eda interesante que carg\u00e1semos de nuevo los datos cada cierto tiempo, para que la informaci\u00f3n se vaya actualizando. Para ello, podr\u00edamos utilizar alg\u00fan temporizador y una funci\u00f3n en la que utiliz\u00e1semos de nuevo loadJSON()<\/span>.<\/p>\n
Hay otras API tambi\u00e9n gratuitas, pero que requieren registrarse para obtener los datos a trav\u00e9s de una API_KEY, una clave personal que se a\u00f1ade a la URL de la API con la que hacer las peticiones de datos. Algunas de estas API tambi\u00e9n permiten enviar peticiones (querys<\/em>) a las API, que tambi\u00e9n se a\u00f1aden a la URL. Por ejemplo, para una API del tiempo podemos mandarle una petici\u00f3n con la localizaci\u00f3n de d\u00f3nde queremos saber el tiempo que hace. Otro ejemplo podr\u00eda ser el de la API de art\u00edculos del New York Times<\/em>, a la que necesitamos a\u00f1adir como query<\/em> el tema sobre el que queremos buscar art\u00edculos:<\/p>\n
https:\/\/api.nytimes.com\/svc\/search\/v2\/articlesearch.json?q=olympics&api-key=4UpTSCM8osv0KZE5S1zwY6ZRtYnR7suC<\/pre>\n
Las partes destacadas en negrita son la query<\/em> que le enviamos a la API, en este caso olympics<\/em> para buscar art\u00edculos sobre los juegos ol\u00edmpicos, y la API-KEY es nuestra clave personal que nos dan al registrarnos. Para cargar el JSON, deber\u00edamos hacer algo as\u00ed:<\/p>\n
let API_KEY = \"4UpTSCM8osv0KZE5S1zwY6ZRtYnR7suC\";\r\nlet query = \"olympics\";\r\nlet URL = https:\/\/api.nytimes.com\/svc\/search\/v2\/articlesearch.json?q=\r\n            + query \r\n            + \"&api-key=\" \r\n            + API_KEY;\r\nlet data;\r\n\r\nfunction preload() {\r\n  data = loadJSON(URL);\r\n}<\/pre>\n
En esta web<\/a> se pueden encontrar muchas API p\u00fablicas, y muchas requieren darse de alta para obtener la API-KEY.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/456"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":4,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/456\/revisions"}],"predecessor-version":[{"id":999,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/456\/revisions\/999"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}