Sfruttare le Google Picasa API per generare una galleria di immagini

Postato da ROb | nella categoria Java, Linux, Sviluppo web | giovedì, 22 aprile 2010

0

Chi non conosce il bellissimo e potentissimo software Picasa?
E’ sempre più facile vederlo installato nei desktop degli utenti come rimpiazzo dell’applicazione di default di visualizzazione immagini. Anche io che uso Linux, nonostante la scelta di software di gestione e visualizzazione immagini sia molto ricca e il fatto che non è un’applicazione nativa Linux ma emulata tramite Wine, ho eletto Picasa come il “mio” software di gestione immagini.

Google Picasa API

Non voglio però dilungarmi molto in merito ai pregi di questo gestore di immagini. L’oggetto di questo post è la possibilità di sfruttare il servizio web ad esso associato (ma anche utilizzabile in modo indipendente) chiamato Picasa Web Albums.

Picasa Web Albums è un servizio web che ci permette di caricare, organizzare i nostri album di foto e di condividerli con chi vogliamo. Migliorato di mese e mese, si è arricchito ultimamente anche della capacità di riconoscere i volti delle persone nelle foto in modo automatico.

Questo servizio Google, come molti altri dell’azienda di Mountain View, espone delle API, cioè delle librerie utilizzabili dagli sviluppatori, che, dopo un’opportuna autenticazione, permettono di leggere e manipolare i dati del servizio stesso.
Nel caso ad esempio delle API di Picasa Web Albums possiamo richiedere la lista dei nostri album oppure ricevere la lista delle immagini contenuto in uno specifico album oppure caricare una foto nell’album e così via.

Oggi voglio parlarvi di una piccola applicazione scritta in Java, che sfrutta l’API del servizio per questo linguaggio, in grado di generare una porzione di codice html partendo da una lista di immagini di uno specifico album caricato in Picasa Web Albums.

Per poter eseguire l’applicazione dovete avere opportunamente scaricato e configurato il pacchetto delle API di Google, impostando correttamente le dipendenze verso i file jar dei servizi che utilizzate.
Per comodità comunque allego in fondo all’articolo l’intero progetto Eclipse zippato.

Il programma deve essere eseguito in due passaggi.
Nel primo passaggio, dopo aver opportunamente modificato l’utente e password, bisogna attendere che il programma stampi a video la lista degli album caricati e i relativi id. Scegliamo a questo punto l’id del nostro album e impostiamolo come valore della variabile albumId.

Rieseguiamo quindi il programma (secondo passaggio) e a questo punto potremmo vedere un output decisamente più ricco che contiene un html generato partendo dai dati e dalle immagini contenuti nell’album specificato.
L’html viene generato utilizzando il motore di templating Velocity a cui è stato passato l’oggetto feed contenente tutti i dati del nostro album. Il file del template è album.vm che si trova all’interno della cartella del progetto di nome templates.
Ovviamente potete modificare a vostro piacimento tale template utilizzando a pieno il modello dei dati messo a disposizione da Google.

Di seguito propongo il codice Java del programma, ovviamente con delle credenziali fasulle:

import java.io.StringWriter;
import java.net.URL;
import java.util.Properties;

import org.apache.velocity.Template;
import org.apache.velocity.VelocityContext;
import org.apache.velocity.app.Velocity;

import com.google.gdata.client.photos.PicasawebService;
import com.google.gdata.data.photos.AlbumEntry;
import com.google.gdata.data.photos.AlbumFeed;
import com.google.gdata.data.photos.UserFeed;

public class Main {
	public static void main(String[] args) {
		try {
			String username = "<username>";
			String domain = "@gmail.com";
			String password = "<password>";
			String albumId = "<empy>";

			PicasawebService myService = new PicasawebService(username);
			myService.setUserCredentials(username + domain, password);

			URL feedUrl = new URL("http://picasaweb.google.com/data/feed/api/user/" + username + "?kind=album");

			UserFeed myUserFeed = myService.getFeed(feedUrl, UserFeed.class);
			for (AlbumEntry myAlbum : myUserFeed.getAlbumEntries()) {
			    System.out.println(myAlbum.getTitle().getPlainText() + " - " + myAlbum.getId());
			}

			URL feedAlbumUrl = new URL("http://picasaweb.google.com/data/feed/api/user/" + username + "/albumid/" + albumId);

			AlbumFeed feed = null;
			try {
				feed = myService.getFeed(feedAlbumUrl, AlbumFeed.class);
			}
			catch (com.google.gdata.util.ResourceNotFoundException rnfe) {
				System.out.println("\nalbum non trovato, controlla l'id");
			}

			if (feed != null) {
				Properties velProps = new Properties();
				velProps.load(Main.class.getResourceAsStream("velocity.properties"));
				Velocity.init(velProps);

				VelocityContext context = new VelocityContext();

				context.put("feed", feed);

				Template template = null;

				try {
				   template = Velocity.getTemplate("templates/album.vm");
				}
				catch( Exception e ) {
					e.printStackTrace();
				}

				StringWriter sw = new StringWriter();

				template.merge( context, sw );

				System.out.println();
				System.out.println(sw);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Questo è invece il codice del template album.vm :

		<h4>$!feed.title.plainText</h4>
		<ul class="gallery clearfix">
#foreach($photo in $feed.getPhotoEntries())
		    <li>
		       <a rel='prettyPhoto[$feed.id]' title="$photo.getDescription().getPlainText()" href='$photo.getMediaContents().get(0).getUrl()' >
		          <img src='$photo.getMediaThumbnails().get(0).getUrl()' width='100' class='thumb' border='0' />
		       </a>
		    </li>
#end
		</ul>

Ecco infine il file compresso contenente il progetto completo in formato Eclipse.

Una galleria web di effetto con jQuery e prettyPhoto

Postato da ROb | nella categoria Sviluppo web | lunedì, 22 marzo 2010

2

Grazie a jQuery e ai numerosi plugin che circondano questa libreria ora è davvero semplice e divertente realizzare gallerie web leggere e di effetto.

Galleria di immagini

Oggi voglio presentarvi la galleria che ho realizzato per il sito di Giulia sfruttando jQuery e quello che considero il migliore plugin per la realizzazione di gallerie di immagini (e non solo), prettyPhoto.

Dopo aver scaricato il pacchetto dal sito ufficiale del plugin, ho preparato un pò di foto, creando anche gli opportuni thumbnail con mogrify e ho creato una pagina html che gestisse la galleria.

La realizzazione della galleria di foto, dopo aver opportunamente preparato il codice javascript della pagina, è davvero semplice. Si tratta infatti di creare degli elementi a che puntano alle immagini ingrandite che contengono al loro interno degli elementi di tipo img che visualizzano i rispettivi thumbnail.
Gli elementi di tipo a devono essere opportunamente arricchiti da un paio di attributi. L’attributo rel dichiara l’appartenenza della galleria a un determinato gruppo di foto (in sostanza, un album) mentre l’attributo title serve per sottotitolare la foto con una caption.

Ecco il codice html per ogni singola immagine:

         <li>
            <a rel='prettyPhoto[macerata]' title="La salita delle fosse" href='images/macerata_01.jpg' >
               <img src='images/thumb/macerata_01.jpg' width='100' class='thumb' border='0' />
            </a>
         </li>

Per funzionare la pagina, come anticipato, ha anche bisogno di una dichiarazione di librerie javascript in cima alla pagina:

		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			google.load("jquery", "1.3");
		</script>
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

e di un’inizializzazione jQuery contestuale al termine del caricamento della pagina stessa:

		<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
		</script>

Ecco la pagina demo che ho realizzato con un pò di fotografie storiche di Macerata e alcune foto della mia labrador Mina.

Il progetto scaricabile è invece in questo link.

Il tema prettyPhoto utilizzato è “facebook”. Ricordo inoltre che prettyPhoto può anche essere utilizzato per visualizzare video, altri siti (tramite iframe) o contenuto html generico.