Flickr API: Diamo vita alla nostra applicazione

La scorsa volta ci siamo lasciati dopo aver capito come funziona phpFlickr, la classe che ci permette di interagire con le API di Flickr, facendo anche qualche esempio, oggi invece ci butteremo a capofitto nello sviluppo della nostra applicazione.
Sei pronto? Partiamo.

La classe myFlickr

Cominciamo creando un nuovo file, lo chiameremo myFlickr (lo so, non ho molta fantasia con i nomi) e lo salveremo all’interno della cartella include/ del nostro progetto.
Un po’ per comodità un po’ per mia abitudine svilupperemo in OOP (non è realmente necessario in questo caso, ma il codice così ottenuto è sicuramente più ordinato); dichiariamo quindi la nostra classe:

class myFlickrClass
{
public $source;
public $uid;
public $psid;
public $noi;

le variabili che abbiamo dichiarato ci serviranno in fase di valorizzazione della classe, questa infatti viene valorizzata al momento in cui premiamo il pulsante submit del form e preleva tutti i parametri necessari dalla variabile globale $_POST.
La nostra classe presenta solo due metodi: il costruttore e il metodo printImages() che si occupa, appunto, di inviare le immagini alla nostra applicazione, vediamo per primo il costruttore:

public function __construct()
{
include_once 'phpFlickr.php';
$this->source = 'public';
$this->uid = '';
$this->psid = '';
$this->noi = 10;
}

Come puoi vedere, il metodo costruttore non fa altro che includere la classe phpFlickr e dare un valore di default alle variabili dichiarate in precedenza.
Il metodo printImages() è un po’ più complesso, ma buona parte l’abbiamo già vista nell’articolo precedente:

public function printImages()
{
$this->source = $_POST['source'];
if($_POST['uid']){$this->uid = $_POST['uid'];}
if($_POST['psid']){$this->psid = $_POST['psid'];}
if($_POST['noi']){$this->noi = $_POST['noi'];}
$yif = new phpFlickr('95ba56ff0b9753d58067bc73151fa6c2');

La funzione si occupa, in primis, di recuperare il tipo di immagini (pubbliche, di un utente ecc…) e, nel caso esistano, gli id di user e photostream e il numero di immagini da visualizzare. Successivamente viene inizializzata una nuova istanza di phpFlickr passando come argomento la chiave API che abbiamo richiesto all’inizio.

switch($this->source)
{
	case('public'):
        $images = $yif->photos_getRecent(NULL, NULL, $this->noi);
        break;
    case('user'):
        $images = $yif->people_getPublicPhotos($this->uid, NULL, NULL, $this->noi);
        break;
    case('photoset'):
        $images = $yif->photosets_getPhotos($this->psid, NULL, NULL, $this->noi);
        break;
    case('group'):
        $images = $yif->groups_pools_getPhotos($this->uid, NULL, NULL, NULL, NULL, $this->noi);
        break;
    default:
        $images = $yif->photos_getRecent(NULL, NULL, $this->noi);
        break;
}

A questo punto dobbiamo capire il tipo di foto da recuperare, infatti vengono usati metodo diversi a seconda che le immagini siano pubbliche, di un utente specifico, di un photoset o di un gruppo; a tal proposito usiamo il costrutto switch e assegnamo alla variabile $images la risposta del metodo chiamato.

A questo punto dobbiamo stare attenti e prevedere la scelta di ‘photoset’ come sorgente per le immagini: mentre tutti gli altri metodi restituiscono un array bidimensionale il cui primo indice è ‘photos’, il metodo photosets_getPhotos() modifica il primo indice in ‘photoset’, quindi per evitare di scrivere il doppio del codice ci converrà modificare l’array e renderlo uguale a tutti gli altri casi, qualunque sia la scelta dell’utente:

if(array_key_exists('photoset', $images))
{
$images['photos'] = $images['photoset'];
unset($images['photoset']);
}

Con queste poche righe controlliamo appunto se l’utente ha scelto di visualizzare immagini di un photoset e in tal caso copia l’intero contenuto dell’indice ‘photoset’ in un nuovo indice ‘photos’, dopodiché cancella il primo, in questo modo qualsiasi sorgente scelga il nostro utente, il formato di risposta sarà sempre lo stesso.
Ora non ci resta che stampare le immagini a video. Inseriremole in una lista non ordinata:

ob_start();
?>
<ul id="flickrImages">
<?php
foreach((array)$images['photos']['photo'] as $image)
{
?>
<li class="imageContainer">
<a title="<?php echo $image['title']; ?>" rel="FlickrGallery"
href="<?php echo $yif->buildPhotoURL($image, 'medium_640'); ?>">
<img src="<?php echo $yif->buildPhotoURL($image, 'small'); ?>" />
</a>
</li>
<?php
}
?>
</ul>
<?php
$flickrRes = ob_get_contents();
return $flickrRes;
}
}

Queste righe di codice le abbiamo già viste nell’articolo precedente, quindi non mi ci soffermo molto.

A questo punto ci serve un secondo file php, che si occuperà di chiamare il metodo printImages() al submit del form, questo verrà richiamato tramite AJAX.
Creiamo quindi process.php e salviamolo sempre nella cartella include/ del nostro progetto.
Al suo interno sono presenti solo tre righe di codice:

include_once 'myFlickr.class.php';
$imgPrinter = new myFlickrClass;
$imgPrinter->printImages();

Non c’è molto da spiegare: il file include la classe che abbiamo appena creato, inizializza una nuova istanza e chiama il metodo printImages().

Abbiamo finito con il php, ma la nostra applicazione non funziona ancora: se provi ad inviare il form noterai che non succede proprio nulla, quello che ci serve per rendere tutto funzionante è un pizzico di javascript.

functions.js

Se non l’hai ancora creato fallo e salvalo nella cartella script/.
Iniziamo aggiungendo qualche effetto utile, come la scomparsa dei campi input a seconda delle opzioni che sceglie l’utente:

$(document).ready(function(){
	$('#uidRow, #psidRow').hide();
$('#source').change(showFields);
	function showFields()
{
var checkSource = $('#source').val();
switch(checkSource)
{
case('public'):
$('#uidRow, #psidRow').hide();
break;
case('user'):
case('group'):
if($('#psidRow').is(':visible'))
{
$('#psidRow').hide();
}
$('#uidRow').show();
$('#uidRow label').text(checkSource == 'user' ? 'Your User Id:' : 'Your Group Id:');
break;
case('photoset'):
$('#uidRow, #psidRow').show();
$('#uidRow label').text('Your User Id:');
break;
}
}

Queste poche righe non fanno altro che nascondere o mostrare i campi userId e photosetId in base alle scelte dell’utente e inoltre modifica il testo del campo userId a seconda che la sorgente sia user o group.
Avrai notato che accanto al campo userId è presente un link, ci servirà per permettere all’utente di ricavare il suo id in maniera automatica. Vediamo un po’ di farlo funzionare con una funzione:

$('#idFinder').click(function(){
var checkSource = $('#source').val();
var x = prompt(checkSource.match(/(user|photoset)/) ? 'Enter the URL of your flickr account' : 'Enter the URL of your flickr group',
checkSource.match(/(user|photoset)/) ? 'https://flickr.com/photos/your_username/' : 'https://flickr.com/groups/your_group/');
if(!x) return false;
var url = "https://api.flickr.com/services/rest/?"+
"method="+(checkSource.match(/(user|photoset)/) ? "flickr.urls.lookupUser&" : "flickr.urls.lookupGroup&")+
"api_key=6797f60abafb94a1ffa22d49f3c7851d&"+
"format=json&"+
"jsoncallback=?&"+
"url="+x;
$.getJSON(url, function(result){
if (result.stat != 'ok')
{
alert('Problems occurred retrieving your id, please try again');
return false;
}
$('#uid').val(checkSource.match(/(user|photoset)/) ? result.user.id : result.group.id);
});
});

Il codice si occupa di rilevare la sorgente scelta dall’utente e salvarla nella variabile checkSource, quindi mostra un prompt nel quale è presente un url di esempio che cambia dinamicamente e al suo ok apre una chiamata al metodo urls.lookupUser o al metodo urls.lookupGroup (a seconda del caso) e prende i dati tramite JSON, se questo restituisce true, inserisce l’user id all’interno del relativo campo input.

Occupiamoci ora del submit:

$('#yifForm').submit(function(){
var querystring = $(this).serialize();
$.ajax({
type: 'POST',
url: './include/process.php',
data: querystring,
success: function(response){
$('#content').html(response);
$('a[rel=FlickrGallery]').fancybox({
titleShow: true,
titlePosition: 'over'
});
},
error: function(){
$('#content').html('Something went wrong!');
}
});
return false;
})

Per prima cosa usiamo il metodo .serialize() per creare una stringa contenente tutti i valori presenti nel form (se non conosci questo metodo leggi questo articolo di Maurizio), quindi li passiamo tramite POST in una chiamata AJAX (se non sai come utilizzarlo eccoti un tutorial) al nostro file process.php e aggiunge il metodo .fancybox alle immagini; in caso contrario stampiamo un messaggio di errore all’interno della sezione content.

Conclusione

Ora puoi finalmente provare la tua applicazione e vedere che funziona.
Le API di Flickr sono un argomento abbastanza vasto, ma in questa mini-guida abbiamo visto tutto il necessario per inziare a produrre galleries, slideshows, widget e quant’altro.
Non ho volutamente trattato l’autenticazione in quanto è un discorso a parte, ma non si sa mai che non scriva due righe in proposito un giorno :)

Tag: ,

L'autore

Appassionato di web design da qualche anno, ha deciso di prendere la strada del "uebdeveloper" perché ritiene di essere negato con la grafica (anche se ogni tanto ci prova lo stesso), spera di diventare presto un bravo sviluppatore.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

1 commento

Trackback e pingback

  1. I migliori post della settimana #127 | Web Developer Freelance / Web Designer / SEO Specialist Freelance :: EmaWebDesign
    [...] 04) Flickr API: Diamo vita alla nostra applicazione [...]