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

Transkript

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

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

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

4 API på webben Webb- tjänst API Begär data genom av adressera metoder i url:en, t.ex. med hjälp av AJAX. Skickar över data på begärd form, t.ex. XML eller JSON. Webb- prog. t.ex. Flickr Google Maps IMDB Ibland specificeras en "callback- funk@on". REST (Representa@onal State Transfer) Kommunika@on via hvp (eller hvps) Oba används GET med parametrar i url:en, för av ange metod och specificera en begäran. hvp:// 4

5 API- nyckel Registrera en nyckel hos webbtjänsten. Skicka med i anropet: hvp:// Sybe: 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 Webb- tjänst 1 API Webb- prog. Webb- tjänst 2 API NyV program som kombinerar data från två eller flera webbtjänster. 6

7 Flickr API hvps:// Anrop av olika metoder via hvps/api.flickr.com/services/rest/ Svar i olika format, t.ex. XML REST (Representa@onal State Transfer) JSON (JavaScript Object Nota@on) Exempel på anrop med resultat i XML: hvps://api.flickr.com/services/rest/?api_key=din- api- nyckel &method=flickr.photos.search&tags=cat&per_page=5&format=rest Exempel på anrop med resultat i JSON: hvps://api.flickr.com/services/rest/?api_key=din- api- nyckel &method=flickr.photos.search&tags=cat&per_page=5&format=json I dessa exempel är den tag som söks: cat 7

8 Callback func0on Svar som: jsonflickrapi( {JSON- objekt} ) JavaScript- kod: func@on jsonflickrapi(response) { if (response.stat!= "ok") { // Något har blivit fel return; } // Kod för av tolka och använda returnerad data } Annat namn på callback- funk@onen: hvps://api.flickr.com/services/rest/?api_key=din- api- nyckel &method=flickr.photos.search&tags=cats&per_page=5&format=json &jsoncallback=myfunc@on 8

9 Anrop med AJAX Skapa ev request- objekt och anropa flickr API: hvps://api.flickr.com/services/rest/?api_key=din- api- nyckel &method=flickr.photos.search&tags=cats&per_page=5&format=json &nojsoncallback=1 som tar emot svaret specificeras i request- objektet: request.onreadystatechange = func@on () { if ( (request.readystate == 4) && (request.status == 200) ) getimages(request.responsetext); }; func@on getimages(response) { response = JSON.parse(response);... } 9

10 Exempel: Flickr API lekt6-ex1-1" Anrop i en script- tagg Callback- funk@on 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 yverligare 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 Tutorial hvp:// 11

12 Google Maps Objects Ladda in "hvps://maps.googleapis.com/maps/api/js" i en script- tagg. Om man gör en applika@on med mycket trafik, krävs en API- nyckel. Skapa objekt för karta, markörer, inforutor, etc. SäV olika egenskaper för objekten, t.ex. posi@on, tex@nnehåll,... 12

13 Exempel: Google Maps API lekt6-ex3-1" Skapa ev objekt för en karta (new google.maps.map) Visa en karta på universitetets campus. lekt6-ex3-2" Skapa ev 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. lekt6-ex4-1" Skapa ev 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. 13