Utenfor en tunnell
ikke langt fra der Sverre bor
står det et
Foto: Asbjørn Risbakken, oa.no
Hva vet vi egentlig om dette
overvåkingskameraet?
Demo
Vi har sett:
NVDB - Nasjonal vegdatabank
- vegkart
Uthenting av data
som XML - via url i nettleser
som JSON
- via kommandolinje/curl
- via javascript
Hva er egentlig JSON?
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JavaScript Object Notation
- det vil si: JSON ser ut som javascript-objekter i såkalt "literal notation"
var employees = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];
Fra json.org:
JSON is built on two structures:
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JSON ble opprinnelig spesifisert av Douglas Crockford,
- kjent javascript-guru
JSON er laget for å være et lettvekts datautvekslingsformat
JSON er en åpen standard,
spesifisert i ECMA 404 / IETF RFC nr. 7159
Gå igjennom W3Schools JSON tutorial for å lære litt mer.
Flere ressurser finnes på json.org
Noen fordeler med JSON
- lett å lese
- tar liten plass - sparer båndbredde
- lett å ta i bruk i på nettsider
- enkelt å konvertere JSON-tekst til javascript-objekter
JSON egner seg godt i AJAX-appikasjoner
Fra AJAX-tutorial på W3Schools:
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
Et enkelt AJAX-eksempel - (for data om overvåkingskamera):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NVDB-API demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="response"></div>
<script>
$.ajax('https://www.vegvesen.no/nvdb/api/vegobjekter/objekt/579095960', {
'data': {}
})
.then(
function success(data) {
for (var key in data) {
$("#response").append(key, ": ", data[key], "<br>");
console.log(key, data[key]);
};
},
function fail(data, status) {
alert('Request failed. Returned status of ' + status);
}
);
</script>
</body>
</html>
Utfordring ved bruk av javascript for å hente data til web-applikasjoner:
- ønsker å gjøre "Cross-site HTTP requests", det vil si hente data fra et annet nettsted,
men blir hindret av "Same-origin policy" - en restriksjon som ligger i nettleseren - av sikkerhetshensyn
Løsning:
CORS - Cross-Origin Resource Sharing
CORS er en W3C-standard som beskriver en protokoll for hvordan man kan dele ressurser på tvers av nettsteder.
Dette innebærer at både tilbyder av data, (f.eks. Norge Digitalt-parter) og konsumenter av data (f.eks. studenter ved HIG), må ta hensyn til dette både ved oppsett av tjenester og ved applikasjonsutvikling.
"lokasjon":{
"egengeometri":true,
"geometriUtm33":"POINT (287479.18 6726338.42)",
"geometriWgs84":"POINT (11.115867858387725 60.61636941421639)",
"geometriForenkletUtm33":"POINT (287479.18 6726338.42)",
"geometriForenkletWgs84":"POINT (11.115867858387725 60.61636941421639)",
"kommune":{
"nummer":528,
"navn":"ØSTRE TOTEN"
},
NVDB REST-API (
https://www.vegvesen.no/nvdb/api/dokumentasjon
Velger datakatalog: