1ME323 Webbteknik 3 Lektion 6 API. Rune Körnefors. Medieteknik Rune Körnefors

Transkript

1 1ME323 Webbteknik 3 Lektion 6 API Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda API (Application Programming Interface) Mashup Flickr API Google Maps API Labb 6 2

3 API (Application Programming Interface) metod & parametrar Program eller databas Operativsystem Program Webbtjänst... API egenskaper metoder data Program Program i datorn Webbprogram... 3

4 API på webben API Begär data genom att adressera metoder i url:en, t.ex. med hjälp av AJAX. Skickar över data på begärd form, t.ex. XML eller JSON. Webbtjänst Webbprog. t.ex. Flickr Google Maps IMDB Ibland specificeras en "callback-funktion". REST (Representational State Transfer) Kommunikation via http (eller https) Ofta används GET med parametrar i url:en, för att ange metod och specificera en begäran. 4

5 API-nyckel Registrera en nyckel hos webbtjänsten. Skicka med i anropet: Syfte: Webbtjänsten vet vem som gör anrop. Kan begränsa användning eller ta betalt beroende på hur många anrop. API-nyckeln bör, om möjligt, ligga i en "lässkyddad" fil. 5

6 Mashup Webbtjänst 1 API Webbprog. Webbtjänst 2 API Nytt program som kombinerar data från två eller flera webbtjänster.... 6

7 Flickr API Dokumentation Anrop av olika metoder via Svar i olika format, t.ex. XML REST (Representational State Transfer) JSON (JavaScript Object Notation) Exempel på anrop med resultat i XML: &method=flickr.photos.search&tags=cat&per_page=5&format=rest Exempel på anrop med resultat i JSON: &method=flickr.photos.search&tags=cat&per_page=5&format=json I dessa exempel är den "tag" som söks: cat 7

8 Callback function Svar som: jsonflickrapi( {JSON-objekt} ) JavaScript-kod: function jsonflickrapi(response) { if (response.stat!= "ok") { // Något har blivit fel return; } // Kod för att tolka och använda returnerad data } Annat namn på callback-funktionen: &method=flickr.photos.search&tags=cats&per_page=5&format=json &jsoncallback=myfunction 8

9 Anrop med AJAX Skapa ett request-objekt och anropa flickr API: &method=flickr.photos.search&tags=cats&per_page=5&format=json &nojsoncallback=1 Funktion som tar emot svaret specificeras i request-objektet: request.onreadystatechange = function () { if ( (request.readystate == 4) && (request.status == 200) ) getimages(request.responsetext); }; function getimages(response) { response = JSON.parse(response);... } 9

10 Exempel: Flickr API lekt6-ex1-1 Anrop i en script-tagg Callback-funktion med data i JSON-format Sök fem bilder med specifik tag och visa upp bilderna på webbsidan. lekt6-ex1-2 Anrop med AJAX Data i JSON-format Sök 500 bilder med specifik tag och visa upp 5 slumpmässigt valda bilder på webbsidan. lekt6-ex2 Anrop med AJAX Data i JSON-format Sök fem bilder i taget. Ny sökning ger ytterligare fem bilder. Bläddra framåt och bakåt mellan sökningarna. Visa små bilder samt stor bild, då man klickar på liten bild. 10

11 Google Maps API Dokumentation Tutorial 11

12 Google Maps Objects Ladda in " i en script-tagg. Om man gör en applikation med mycket trafik, krävs en API-nyckel. Skapa objekt för karta, markörer, inforutor, etc. Sätt olika egenskaper för objekten, t.ex. position, textinnehåll,... 12

13 Exempel: Google Maps API lekt6-ex3-1 Skapa ett objekt för en karta (new google.maps.map) Visa en karta på universitetets campus. lekt6-ex3-2 Skapa ett objekt för en karta (new google.maps.map) samt objekt för markörer (new google.maps.marker) Markörerna kan visas och döljas på kartan. lekt6-ex3-3 Samma program som ovan, fast med lite mer kompakt och generell kod för markörerna. Karta med två markörer. 13

14 Exempel: Google Maps API lekt6-ex4-1 Skapa ett objekt för en inforuta (new google.maps.infowindow) Händelsehanterare för klick på markörerna. Inforuta visas i kartan. lekt6-ex4-2 Händelsehanterare för klick i kartan. Visa markör där användaren klickar i kartan. lekt6-ex4-3 Formulär för att spara användarens markör. Formulär i inforutan. lekt6-ex5 Fungerar i Chrome och Opera samt mobil Fungerar inte i Firefox och Safari Visa användarens position. Använd navigator.geolocation för att ta reda på användarens position och visa det i kartan. Funkar endast över https, då programmet publicerats. Prova t.ex. På en vanlig dator visar den dock oftast fel plats, men i mobilen brukar det vara ganska rätt. 14