PHP, AJAX och Flickr API

Denna guide visar hur man med hjälp av Flickr API och PHP kan visa bilder från Flickr på sin webbsida. Jag förmodar att du känner till Flickr. Om inte, besök http://www.flickr.com eller http://sv.wikipedia.org/wiki/Flickr

Exemplet hittas på följande länk:

http://www.webforum.nu/attachment.php?attachmentid=20676&stc=1&d=1250461262

I exemplet kan man välja en set, vars bilder ska visas. Dessutom visas bildernas EXIF-data, som också hämtas från Flickr.

Exemplet använder komponenter från Zend Framework (Zend_Application, Zend_service_Flickr och Zend_View). Av dessa är Zend_Service_Flicker den väsentliga delen.

Största orsaken till varför Zend Framework används, är att den erbjuder moduler som underlättar kommunicering med Flickr (bl a Zend_Service_Flickr och Zend_Rest_Client). Då slipper man själv bygga ett kommunikationslager mellan PHP och Flickr. Dessutom har jag valt att använda Zend Frameworks autoloader (Zend_Application) och templates (Zend_View).

Krav

För att få exemplet att fungera, måste följande installeras/införskaffas:

Zend Framework:

Jag har själv använt Zend Framework 1.9.1 men jag antar att 1.7/1.8 fungerar också.

Zend Framework kan man ladda från

http://framework.zend.com/download/latest
(länkarna finns längst ned på sidan)

eller direktlänkar:

http://framework.zend.com/releases/ZendFramework-1.9.1/ZendFramework-1.9.1-minimal.zip (.zip)
http://framework.zend.com/releases/ZendFramework-1.9.1/ZendFramework-1.9.1-minimal.tar.gz (.tar.gz)

Exemplet antar att du har placerat Zend Framework (eller enbart de moduler som krävs) i en katalog som ligger angiven i include_path (se PHPs get_include_path() samt set_include_path(...) ). I detta fall i katalogen "library". Se även rad 7 i config.php.

Flickr:

Du måste ha ett Flickr-konto samt en s k Flickr api nyckel, som key ger dig åtkomst till ditt Flickr-konto med PHP.

På sidan

http://www.flickr.com/services/api/keys/apply/

kan du ansöka om en api nyckel. Det tar bara en stund. Se till att lagra api nyckeln på ett säkert ställe.

När du har en api nyckel så lägger du till den i config.php (i början av filen).

Installation

Placera katalogen Flickrtest i din webbservers webbroot. Då det finns olika webbservrar (IIS, Apache, LightHttpd osv) och flera olika sätt att installera så tänker jag inte ta upp denna moment, utan jag antar att du själv kan installera det.

Struktur

Exemplet består av följande (de väsentliga!) filer:

• config.php:
• används för att definiera Flickr api key, cache timeout osv.
• ajax.php:
• i princip en controller (C i MVC)
• App_Jme_Flickr_Image:
• hanterar all kommunikation med Flickr
• App_Jme_Flickr:
• en abstrakt basklass som innehåller generella funktioner som tills vidare används bara av en klass (App_Jme_Flickr_Image).
• file.phtml
• template-fil innehåller HTML som visar bilderna
• exif.phtml:
• template-fil innehåller HML som visar EXIF-datan för den valda bilden
• flickr.js:
• innehåller AJAX-specifika funktioner

Hur Zend_Service_Flicker fungerar

Låt oss säga att du vill hämta och skriva ut information om en viss bild som du har på ditt Flickr-konto.

Vi försöker förstå detta genom att inspektera hur klassen Zend_Service_Flickr och dess metod getImageDetails gör detta.

Men innan det så är det bra att veta minst två saker:

1. varje anrop måste inkludera api nyckeln som vi behandlade tidigare

Den till konstruktören av klassen Zend_Service_Flicker:

$flickr = new Zend_Service_Flickr('YOUR_API_KEY');

2. varje anrop inkluderar namnet på den metod vi vill använda

Metoderna i Flcikr API är indelade i grupper. Namnen på metodanropen följer ett visst schema:

flickr.gruppnamn.metodnamn

T ex:

flickr.photos.getSizes
flickr.photos.getCounts

flickr.people.findByUsername
flickr.people.getInfo

Kikar du i metoden getImageDetails() så har vi följande på första raden:

static $method = 'flickr.photos.getSizes';

som bekräftar det som skrevs innan.

Följande kod gör följande saker:

1. anropar Flickr med api nyckeln, namnet på metoden och bildens id som parametrar
2. lagrar resultatet som ett XML-objekt
3. plockar fram önsakde värden från resultatet

$options = array('api_key' => $this->apiKey, 'method' => $method, 'photo_id' => $id);

$restClient = $this->getRestClient();
$restClient->getHttpClient()->resetParameters(); 
$response = $restClient->restGet('/services/rest/', $options);

$dom = new DOMDocument();
$dom->loadXML($response->getBody());
$xpath = new DOMXPath($dom);
self::_checkErrors($dom);

Svårare än så är det inte. Det finns ett antal metoder som man kan använda för att kommunicera med Flickr. En lista på dessa kan man hitta på sidan http://www.flickr.com/services/api/. Väljer man en metod på listan så får man veta t ex vad metoden gör och vilka parametrar den accepterar.

De metoder exemplet har använt är GET-metoder, dvs de gör förfrågningar som inte ändrar något på ditt Flcikr-konto. Det finns dock ett antal metoder som t ex raderar bilder och lägger till nya taggar (tags). Dessa är POST-metoder. Huruvuda en metod är GET eller POST kan läsas i Flickr API -dokumentationen (oftast säger redan namnet på metoden om det är GET eller POST).

I kodsnutten ovan kan vi hitta raden:

$response = $restClient->restGet('/services/rest/', $options);

där metoden restGet() påvisar detta. POST-version heter givetvis restPost(...).

Med XPath (DOMXPath) kan vi lätt plocka fram endast de elemen som vi vill använda oss av:

require_once 'Zend/Service/Flickr/Image.php';
foreach ($xpath->query('//size') as $size) {
    $label = (string) $size->getAttribute('label');
    $retval[$label] = new Zend_Service_Flickr_Image($size);
}

För att lättare förstå hur XPath fungerar, kan ni skriva ut innehållet på resultatet från Flickr:

...
$response = $restClient->restGet('/services/rest/', $options);
echo $response->getBody(); // skriver ut XML

Mer om XPath kan man läsa på sidan http://www.w3schools.com/XPath/default.asp

Caching

Då det är relativt "tungt" att göra Flickr-anrop, så cachas viss data. Med andra ord sparas EXIF-datan samt bildinformationen i en session-variabel.

I config.php kan man definiera hur länge den cachade datan är giltig, innan den blir gammal. Just nu har den cachade datan en livslängd på 2 timmar (7200 sekunder).

Första gången som en bild/EXIF-data hämtas så tar det en stund. Nästa gång samma bild/EXIF-data hämtas så går det märkbart snabbare.

Slutligen

Jag hade inget för mig under helgen och valde då att testa hur enkelt det är att kommunicera med Flickr. Som en ZF-fan jag är, valde jag givetvis att använda det till en viss del! Då det kanske finns andra som är intresserade, valde jag även att publicera mitt exempel. Hoppas den kommer till nytta!

Nyttiga länkar:

http://www.framework.zend.com/manual/en
http://www.flickr.com/services/api/
http://www.w3schools.com/XPath/default.asp