Exercicis JSONP

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

A classe hem vist la tecnologia JSONP. Gràcies a aqusta tecnologia hem vist conceptes com la comunicació remota amb altres dominis, open data, Internet of Things,... Les dades no tenen fronteres... i JSON és un bon estàndar per inter-operar entre les dades.

Referències

Exercicis

Exercici 1: conversió euro-dòlar

Exercici 2: Llista dels parcs de l'Àrea Metrolpolitana

Exercici 3: Temperatura de Barcelona (sensor amb Arduino) (curs 16-17: no s'ha de fer)

En aquest exercici hauràs d'integrar en una pàgina/projecte que hagis fet la temperatura de Barcelona, i hauràs d'actualitzar cada minut la temperatura mitjançant una crida asíncrona que refresqui el contingut de la capa.

Possible solució:

Exercici 4: API de openweather

NOTA: preferentment, l'alumne utiltizarà alguna de les altres API disponibles. Pots utilitzar la API Key del professor, sempre i quan en facis un bon ús. En cas contrari, pots aconseguir de forma fàcil la teva API key.

D'altra banda, no tots els accessos a recursos JSON vol dir que s'hagin de fer amb funcions de callback. En aquesta API, per exemple, podem accedir a la informació de la temperatura sense cap impediment (amb els límits que imposa la mateixa API).

Podem accedir a la API amb aquesta url:

Aquesta informació la podem ficar dins d'una funció de callback:

També podem accedir a la informació en mode comanda:

$ curl -i 'http://api.openweathermap.org/data/2.5/weather?q=Barcelona&units=metric&lang=ca&APPID={e2aec1bc0914a482546efb1b491a6f2a}'

El resultat:

{"coord":{"lon":2.16,"lat":41.39},"weather":[{"id":800,"main":"Clear","description":"Cel net","icon":"01n"}],"base":"stations","main":{"temp":15,"pressure":1009,"humidity":48,"temp_min":14,"temp_max":16},"visibility":10000,"wind":{"speed":4.1,"deg":250},"clouds":{"all":0},"dt":1488304800,"sys":{"type":1,"id":5485,"message":0.0245,"country":"ES","sunrise":1488263171,"sunset":1488303710},"id":3128760,"name":"Barcelona","cod":200}

script openweathermap.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>El temps a Barcelona</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />
<script>
	var xmlhttp;
	var txt;
	xmlhttp=new XMLHttpRequest();

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			txt=xmlhttp.responseText;
			//{"coord":{"lon":2.16,"lat":41.39},"weather":[{"id":800,"main":"Clear","description":"Cel net","icon":"01n"}],"base":"stations","main":{"temp":15,"pressure":1009,"humidity":48,"temp_min":14,"temp_max":16},"visibility":10000,"wind":{"speed":4.1,"deg":250},"clouds":{"all":0},"dt":1488304800,"sys":{"type":1,"id":5485,"message":0.0245,"country":"ES","sunrise":1488263171,"sunset":1488303710},"id":3128760,"name":"Barcelona","cod":200}

			//alert(txt);
			//http://www.javascriptkit.com/dhtmltutors/ajaxgetpost4.shtml
			//var jsondata = eval("("+txt+")"); //retrieve result as an JavaScript object
			//millor:			
			var jsondata = JSON.parse(txt); 
			var temperatura = jsondata.main.temp;
			var output = '<ul>';
			output += '<li>Temperatura: ' + jsondata.main.temp + ' graus</li>';
			output += '<li>Pressió: ' + jsondata.main.pressure + ' mbar</li>';
			output += '<li>Humitat: ' + jsondata.main.temp + ' %</li>';
			output += '<li>' + jsondata.weather[0].description + '</li>';
			output += '</ul>';
			output += '<img src=\"http://openweathermap.org/img/w/' + jsondata.weather[0].icon  + '.png\" />';
			document.getElementById("info").innerHTML = output;
		}
	}
	xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q=Barcelona&units=metric&lang=ca&APPID=e2aec1bc0914a482546efb1b491a6f2a",true);
	xmlhttp.send();


</script>
</head>
<body onload='llistar_cotxes()'>
<h1>El temps a Barcelona</h1>
<div id="info">
</div>
</body>
</html>

Exercici 5: pràctica lliure amb JSONP

NOTA: no tots els serveis web que ofereixen informació en format JSON vol dir que són accessibles amb la tècnica JSONP. Amb aquesta tècnica només podem utiltizar aquells casos que el programador hagi previst que nosaltres puguem accedir a les dades amb una crida de callback. Aquí se us proposa tres exemples més.

La idea és que l'alumne trobi exemples a la web de recursos JSON que li siguin interessants. Si no trobes res d'interessant, a continuació tenius uns exemples amb els quals podeu practicar.

openlibrary.org

És el cas més interessant. Podem navegar per la base de dades i agafar el codi d'un llibre o d'un autor. Si sabem el codi, podem accedir a la informació del llibre o de l'autor amb JSONP:





informació meteorològica (USA)

informació de terratrèmols

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, febrer 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines