1ME323 Webbteknik 3 Lek0on 6 API Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se
Agenda API (Applica@on Programming Interface) Mashup Flickr API Google Maps API Labb 6 2
API (Applica0on Programming Interface) metod & parametrar Program eller databas Opera@vsystem Program Webbtjänst... API egenskaper metoder data Program Program i datorn Webbprogram... 3
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://www.webbtjänsten/api/?method=api_funk@on&par1=xyz 4
API- nyckel Registrera en nyckel hos webbtjänsten. Skicka med i anropet: hvp://www.webbtjänsten/api/?api_key=gt5yhus567bfdgttsdegtuth54vfed&method=api_funk@on&par1=xyz 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
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
Flickr API Dokumenta@on hvps://www.flickr.com/services/api/ 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
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
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 Funk@on 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
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
Google Maps API Dokumenta@on hvps://developers.google.com/maps/documenta@on/javascript/ Tutorial hvp://www.w3schools.com/googleapi/default.asp 11
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
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