Joan: /* Entrega */

2018-09-20T15:27:46Z

Entrega

Pàgina nova

=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=
*[[JSONP:_JSON_with_Padding]]

=Exercicis=
==Exercici 1: conversió euro-dòlar==
*[[JSONP:_JSON_with_Padding#Exercici:_conversi.C3.B3_euro-d.C3.B2lar]]
==Exercici 2: Llista dels parcs de l'Àrea Metrolpolitana==
*[[JSONP:_JSON_with_Padding#Exercici:_open_data._Dades_obertes_de_l.27.C3.80rea_Metropolitana_de_Barcelona]]
==Exercici 3: Temperatura de Barcelona (sensor amb Arduino) (curs 16-17: no s'ha de fer)==
*[[JSONP:_JSON_with_Padding#Servei_Web_Temperatura_de_Barcelona_.28projecte_d.27electr.C3.B2nica.29]]
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ó:
*[[Fitxer:Test temperatura.zip]]
==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).
*[[API_de_openweathermap.org,_thingful.net_(Internet_of_Things)]]
Podem accedir a la API amb aquesta url:
*http://api.openweathermap.org/data/2.5/weather?q=Barcelona&units=metric&lang=ca&APPID=e2aec1bc0914a482546efb1b491a6f2a

Aquesta informació la podem ficar dins d'una funció de callback:
*http://api.openweathermap.org/data/2.5/weather?q=Barcelona&units=metric&lang=ca&APPID=e2aec1bc0914a482546efb1b491a6f2a&callback=foo

També podem accedir a la informació en mode comanda:
<pre>
$ curl -i 'http://api.openweathermap.org/data/2.5/weather?q=Barcelona&units=metric&lang=ca&APPID={e2aec1bc0914a482546efb1b491a6f2a}'
</pre>
El resultat:
<pre>
{"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}
</pre>
script '''openweathermap.html''':
<pre>
<!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>
</pre>

==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:

*https://openlibrary.org
*https://openlibrary.org/works/OL15346397W/El_ingenioso_hidalgo_Don_Quixote_de_la_Mancha
*http://openlibrary.org/works/OL15346397W.json?callback=foo

*https://openlibrary.org/authors/OL73169A/Maria_de_la_Pau_Janer
*https://openlibrary.org/authors/OL73169A.json
*https://openlibrary.org/authors/OL73169A.json?callback=foo

*https://openlibrary.org/works/OL16812072W/Pasiones_romanas
*https://openlibrary.org/works/OL16812072W.json
*https://openlibrary.org/works/OL16812072W.json?callback=foo

*https://openlibrary.org/authors/OL285508A/Jose%CC%81_Mari%CC%81a_Quintana_Cabanas
*https://openlibrary.org/works/OL285508A.json
*https://openlibrary.org/works/OL285508A.json?callback=foo

*https://openlibrary.org/works/OL2221471W/Rai%CC%81ces_griegas_del_le%CC%81xico_castellano_cienti%CC%81fico_y_me%CC%81dico
*https://openlibrary.org/works/OL2221471W.json
*https://openlibrary.org/works/OL2221471W.json?callback=foo

===informació meteorològica (USA)===
*https://www.aviationweather.gov/help/webservice?page=metarjson
*https://www.aviationweather.gov/gis/scripts/MetarJSON.php
*https://www.aviationweather.gov/gis/scripts/MetarJSON.php?jsonp=foo

===informació de terratrèmols===
*https://developers.google.com/maps/tutorials/data/importing_data#requesting_jsonp
*http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp

=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]]

{{Autor}}, febrer 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Exercicis JSONP - Historial de revisió

Joan: /* Entrega */