Sebbene le applicazioni Facebook possano essere realizzate in vari linguaggi, quelle che hanno raggiunto la maggior popolarità sono in gran parte realizzate sfruttando la Flash Platform e la tecnologia SWF: anche per questo è molto interessante notare come Adobe e Facebook abbiano unito gli sforzi e recentemente sia stata rilasciata una libreria di classi ActionScript 3 dedicata proprio allo sviluppo di applicazioni Flash/Flex per Facebook.
Prima del rilascio della libreria l'interazione con le componenti tipiche di facebook (amici, fotografie, eventi, etc.) era limitata o era comunque necessario trovare soluzioni "in proprio": grazie a questa libreria si potranno invece sfruttare molto più a fondo le opzioni del social network.
Parallelamente al rilascio della libreria è stata creata una sezione dedicata a Facebook nel centro Adobe Developer Connection.
In questo articolo analizziamo le possibilità offerte da questa libreria, partendo dai diversi tipi di applicazione Facebook che si possono realizzare e passando poi ad esempi pratici.
Tipologie di applicazioni Facebook
Esistono principalmente tre categorie di applicazioni: quelle che vengono eseguite e utilizzate sul sito di Facebook, le applicazioni esterne e le applicazioni desktop; le applicazioni su Facebook possono essere poi suddivise a loro volta in applicazioni di tipo iFrame oppure FBML (FaceBook Markup Language), a breve chiariremo meglio questo aspetto, prima vediamo in cosa differiscano le tre tiplogie principali.
- Applicazioni Facebook - questo tipo di applicazione prevede che i file siano sul server dello sviluppatore, ma gli utenti accederanno poi all'applicazione dal loro account Facebook, trovandosi quindi con la grafica di Facebook e la nostra applicazione mostrata al suo interno: praticamente lo sviluppatore mantiene sul suo server tutti i file e le componenti necessarie al funzionamento dell'applicazione, ma l'utente la vede poi internamente alla grafica di Facebook (e di conseguenza presente nel motore di ricerca del sito e nella lista delle applicazioni). L'utente non abbandona quindi il sito, ma usufruisce dell'applicazione rimanendo su Facebook.
- Applicazioni esterne - anche questo tipo di applicazione vede i file ospitati sul server dello sviluppatore, tuttavia l'applicazione non verrà eseguita interamente a Facebook, ma sarà raggiunbile tramite l'URL del server dove è effettivamente presente, può però utilizzare alcune feature di Facebook, attraverso le quali si possono conoscere i dati dell'utente che sta usando l'applicazione, vedere se i suoi amici di Facebook la utilizzano e altro ancora.
- Applicazioni desktop - il concetto è pressochè identico a quello visto per le applicazioni esterne, tuttavia saranno applicazioni AIR eseguite quindi sul computer e non da un sito web.
Come già accennato, le applicazioni del primo tipo, che l'utente usufruirà direttamente tramite Facebook, si dividono in due tipologie: quelle "iFrame" e quelle "FBML" . La gestione della comunicazione tra le varie componenti (il browser dell'utente, il server Facebook e il server dello sviluppatore su cui sono effettivamente ospitati i file) cambia in base alla tipologia di applicazione e in base al fatto che questa utilizzi o meno la Flash Platform.
Applicazioni iFrame
Vediamo lo schema di una applicazione Facebook di tipo iFrame non realizzata in Flash e i relativi passaggi.
Per prima cosa l'utente invia la richiesta dell'applicazione a Facebook (1), che risponderà con una pagina HTML/Javascript contenente la skin grafica di Facebook e in iframe (2); quest'ultimo invierà una richiesta della pagina vera e propria dell'applicazione al nostro server (3). La pagina sarà quindi eseguita nell'iFrame di Facebook, dove richiamerà le API con una richiesta contenente le informazioni di autenticazione dell'applicazione (4), Facebook restituirà l'esito dell'autenticazione dell'applicazione (5) e in caso di esito positivo il server manderà la pagina da mostrare nell'iframe (6).
A questo punto l'utente potrà interagire con la nostra applicazione tramite ulteriori pagine PHP (in questo caso vengono ripetuti gli step dal 3 al 6), tramite interazioni Javascript con il server contenente l'applicazione (in questo caso vengono eseguiti gli step dal 7 al 10) oppure tramite interazioni Javascript dirette verso Facebook (step 11-12).
Cosa cambia usando la Flash Platform
Anche con Flash o Flex è possibile creare delle applicazioni di tipo iFrame per Facebook; in questo caso i passaggi sono diversi, in particolare nello schema seguente è proposto il caso in cui tutte le funzioni siano insite nel file SWF (quindi non c'è ad esempio una comunicazione tra il proprio server e quello di Facebook, cosa che potrebbe avvenire invece nel caso di applicazioni ibride ActionScript/Javascript).
I primi 3 passaggi sono uguali al caso precedente, viene quindi restituita la pagina HTML da mostrare nell'interfaccia di Facebook.
Dal quinto passaggio le cose cambiano notevolmente, infatti viene richiesta al server l'applicazione SWF che verrà poi inviata a Facebook (passaggio 6). Una volta caricato l'SWF in Facebook, questo eseguirà le varie chiamate impostate tramite la libreria ActionScript 3, possono essere ad esempio operazioni relative al riconoscimento dell'utente, al reperimento della lista degli amici o altro ancora, il server Facebook restituirà i dati che potremo quindi elaborare nel nostro file.
Le operazioni che coinvolgono le componenti Facebook dovranno passare la validazione delle chiavi API che riceviamo quando creiamo una nuova applicazione, tuttavia non è una buona idea includerle nello stesso SWF dell'applicazione dato che è un formato facilmente decompilabile, può essere quindi una buona idea far sì che l'SWF richieda tali dati tramite una chiamata HTTP (o tramite Flash Remoting) al nostro server, che a sua volta la passerà a Flash.
Altre operazioni che non riguardino parti relative a Facebook saranno invece interfacciate con il server dove si trova il file (step 9-10) e possono essere eseguite con chiamate HTTP, via webservice o tramite Flash Remoting.
Applicazioni FBML
L'altro metodo per quanto concerne le applicazioni incorporate in Facebook è l'uso di FBML, dove FBML sta per FaceBook Markup Language, questo perchè si tratta in pratica di un set di tag dedicati che Facebook provvede poi a rimpiazzare, relativi ad esempio al nome utente, alle informazioni sugli amici ed altro ancora.
In questo caso il numero di passaggi è inferiore, questo perchè l'applicazione diventa una componente HTML della pagina di Facebook e non è più un iframe, ne consegue anche che tutte le richieste passino attraverso il server Facebook.
Vediamo nel dettaglio i vari passaggi: come sempre la prima operazione è la richiesta della pagina da parte dell'utente (step 1), il server Facebook fa da tramite e richiede la pagina al server su cui si trova l'applicazione (step 2), che a sua volta invia una risposta (step 3): tale risposta conterrà come sempre le chiavi di validazione della nostra applicazione, Facebook provvederà ad analizzarle (step 4) e nel caso in cui siano valide accetterà la pagina dal server e ne analizzerà e sostituirà l'eventuale codice FBML (step 5), inglobando infine l'applicazione nell'interfaccia Facebook e mostrando la pagina finale all'utente (step 6).
A questo punto, per eventuali richieste a pagine o dati presenti sul nostro server verranno eseguiti gli step dall'1 al 6, altrimenti per richieste Javascript indirizzate a Facebook saranno eseguiti solamente gli step 7 (chiamata dell'API via Javascript) e 8 (risposta fornita dal Facebook Server).
Cosa cambia usando la Flash Platform
Se nel caso dell'Iframe le operazioni usando Flash erano leggermente minori e comunque abbastanza diverse, nel caso di applicazioni FBML abbiamo una situazione con più passaggi, ma principalmente è dovuto al fatto che una volta ricevuta la pagina HTML/JS il browser dovrà andare ancora a richiedere ed elaborare l'applicazione Flash. Vediamo allora lo schema e i passaggi per un'applicazione FBML realizzata in Flash o Flex.
I primi 6 passaggi sono identici a quelli seguiti per le applicazioni "non Flash", i cambiamenti sono nei passaggi seguenti, innanzitutto perchè una volta ricevuta la pagina Facebook provvederà a richiedere l'applicazione SWF (7) che il nostro server andrà a restituire e inserire nella pagina (8); a questo punto abbiamo gli step 9 e 10 che in pratica corrispondono agli step 7 ed e eseguite direttamente verso il server Fachiamate eseguite direttamente verso il server Facebook tramite Actioncscript, oppure gli step 11-12 che rappresentano invece chiamate fatte da ActionScript a componenti non di Facebook ma situate sul server che ospita l'applicazione SWF.
Differenze principali tra le applicazioni iFrame e FBML realizzate tramite Flash/Flex
Per quanto come visto le due tipologie di applicazione differiscano in diversi passaggi, la differenza principale tra un'applicazione Flash/Facebook visualizzata in iFrame e una in FBML è la modalità di inclusione del filmato nella pagina: con l'iframe possiamo infatti scegliere quale metodo usare (ad esempio è molto utilizzato SWFObject) e quindi decidere di conseguenza la versione minima del Flash Player richiesta e altri parametri, mentre tramite FBML è il tag <FB:swf> a regolare l'embed e richiede obbligatoriamente almeno la versione 9.0.0.115 del player.
Altra differenza che a seconda del tipo può essere rilevante è che le applicazioni iFrame supportano la modalità fullscreen, mentre quelle in FBML non ne permettono l'uso.
Vi sono poi altre differenze, ma piuttosto minime, si tratta in pratica di modi diversi di implementare determinate caratteristiche (ad esempio le limitazioni di accesso agli script), ma non si trovano comunque feature non utilizzabili con uno dei due metodi.
Applicazioni esterne in Flash
L'ultima tipologia di applicazione che vedremo prima di passare a qualche esempio più pratico è il tipo esterno; come abbiamo accennato precedentemente, in questo caso l'interazione con Facebook è piuttosto limitata e vale principalmente per condividere informazioni sul proprio profilo, invitare degli amici e altro ancora, ma i file non vengono più eseguiti attraverso il server di Facebook ed è quindi necessario gestire una maggior quantità di operazioni dal nostro server.
La prima differenza rispetto agli altri tipi di applicazione è che la richiesta della pagina non passa da Facebook, possiamo vedere infatti come tutti i primi 4 step, dalla richiesta del file HTML/JS alla richieste del file SWF avvengano tra il browser dell'utente e il nostro server. Solo una volta caricato l'SWF all'interno del sito nostro sito (notiamo la dicitura www.yoursite.com al posto di www.facebook.com) potrebbero esserci chiamate ActionScript al server di Facebook per inviare o richiedere dati. Perchè queste richieste vengano accettate è necessario che l'utente risulti loggato su Facebook.
Come per i casi precedenti, il salvataggio di dati avviene sul nostro server, in questo caso però può verificarsi una comunicazione tra il server contenente l'applicazione e Facebook (step 8-9), in caso di dati restituiti dalle funzioni sul server si verificherà lo step 10 dove il server risponde alla richiesta inviata da Flash.
Abbiamo esaminato i diversi tipi di applicazione realizzabili e le diverse modaltià di interazione, in questa parte ci occuperemo di aspetti più "pratici" relativi alle API messe a disposizione da Adobe e Facebook per facilitare l'interazione tra la Flash Platform e il social media.
Sebbene le operazioni eseguibili su Facebook a livello di interazione con il proflio di un utente non siano particolarmente numerose, la gamma di classi presenti nella Facebook-Actionscript API è decisamente vasta.
Purtroppo la documentazione non è particolarmente dettagliata, almeno per il momento; per fortuna diversi dei metodi delle API Actionscript hanno nomi identici o quantomeno analoghi alle Api di Facebook, dove la documentazione per gli sviluppatori è maggiormente generosa di dettagli e può quindi essere un utile riferimento, per quanto questo procedimento di "doppia ricerca" non risulti troppo comodo (e comunque non tutte le funzioni trovano una corrispondenza nelle due documentazioni).
Scaricare la libreria
Vediamo come mettere in piedi alcune prove e, per prima cosa, scarichiamo la libreria Facebook-Actionscript da Google Code. Abbiamo a disposizione diversi formati: possiamo scaricare le classi sorgenti oppure il pacchetto SWC, disponibile separatamente per Flash o per Flex (attualmente sono disponibili le versioni 3.0 del 31 Marzo e 3.1 del 27 aprile).
Impostare l'applicazione su Facebook
Per testare le feature della libreria sarà necessario creare un'applicazione Facebook e utilizzare le varie interazioni: possiamo sfruttare il nostro profilo per i test, magari creando un nuovo utente da utilizzare per le prove dell'applicazione.
Per poter creare un'applicazione è per prima cosa necessario sottoscrivere l'applicazione Facebook Developer dal proprio account utente.
Premendo su "Set up New Application", basterà inserire il nome desiderato e accettare gli accordi di licenza per essere portati alla pagina dettagliata dove impostare tutte le varie informazioni dell'applicazione.
Non ci soffermiamo sui numerosi campi di creazione di un'applicazione, invece esaminiamo i dettagli forniti come "Informazioni di base", in particolare la Chiave API e la chiave Invisibile. Sono informazioni fondamentali, che dobbiamo passare a Facebook all'avvio dell'applicazione perché questa venga validata.
Operazioni comuni esegubili con la Actionscript-Facebook Library
Vediamo ora alcuni esempi di codice per eseguire le operazioni più comuni per interagire con Facebook.
Validare l'applicazione
La prima operazione da fare è validare l'applicazione passando a Facebook le informazioni relative alle chiavi API e Invisibile (denominata anche Secret Key). Il codice è piuttosto semplice ed è sufficiente sfruttare il costruttore FacebookSessionUtil, che accetta come parametri le nostre chiavi e un oggetto di tipo LoaderInfo che riceverà le informazioni relative all'SWF. Ecco un esempio:
import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
private var CHIAVE_API:String = "xxxx";
private var CHIAVE_INVISIBILE:String = "xxxx";
private var sessione:FacebookSessionUtil;
private function init():void
{
sessione=new FacebookSessionUtil(CHIAVE_API, CHIAVE_INVISIBILE, loaderInfo);
sessione.addEventListener(FacebookEvent.CONNECT, connesso);
}
L'evento CONNECT notificherà l'avvenuta connessione a Facebook e il fatto che l'applicazione sia quindi valida.
Ricavare i dati dell'utente
A questo punto, supponendo che l'utente sia già loggato su Facebook (se la nostra è un'applicazione FBML o iFrame interna a Facebook questo sarà sicuramente vero) possiamo ad esempio ricavare le informazioni sull'utente, possiamo ricavare ad esempio il suo nome e cognome per dargli il benvenuto con un messaggio personalizzato. Vediamo allora come integrare il codice precedente.
import com.facebook.Facebook; import com.facebook.events.FacebookEvent; import com.facebook.net.FacebookCall; import com.facebook.data.users.FacebookUser; import com.facebook.data.users.GetInfoData; import com.facebook.commands.users.GetInfo; // una volta connessi a Facebook private function connesso(e:FacebookEvent):void { // creiamo un oggetto che conterrà alcune informazioni dell'utente fbook = sessione.facebook; // avviamo la funzione ricavaUtente(); } private function ricavaUtente():void { // creiamo una chiamata che richiede nome e cognome dell'utente var chiamata:FacebookCall = fbook.post(new GetInfo([fbook.uid], ['first_name', 'last_name'])); // una volta ricevuti i dati chiamiamo la funzione infoRicevute chiamata.addEventListener(FacebookEvent.COMPLETE, infoRicevute); } private function infoRicevute(e:FacebookEvent):void { var dati:GetInfoData = e.data as GetInfoData; if (!dati || e.error) // nel caso in cui si fosse verificato un errore { msg.text = "Errore"; } else { // ricaviamo il nome e cognome dell'utente var nome:String = dati.userCollection.getItemAt(0).first_name; var cognome:String = dati.userCollection.getItemAt(0).last_name; // mostriamo il benvenuto all'utente msg.text = "Benvenuto " + nome + " " + cognome; } }
La sintassi è piuttosto semplice, questo anche grazie al fatto che la maggior parte delle operazioni è svolto "dietro le quinte" dalla libreria e di conseguenza in molti casi basti scrivere le azioni di invio dei dati e di risposta all'output.
Le informazioni cui possiamo avere accesso tramite il metodo getInfo sono numerose e includono praticamente tutti i tipi di informazioni anagrafiche e personali che l'utente può inserire nel suo profilo (ad esempio la data di nascita, la lingua, i libri, film e hobby preferiti, eccetera). Possiamo conoscere anche il genere dell'utente usando il campo sex, ed utilizzare questa informazione per modificare il testo dell'applicazione al maschile o al femminile.
Accesso agli elementi multimediali
Oltre a ricavare i dati di un utente, possiamo accedere anche agli elementi multimediali come gli album fotografici. L'operazione è per certi versi simile a quanto visto per reperire nome e cognome: utilizziamo sempre l'userid dell'utente (nel nostro caso, fbook.uid). Vediamo le porzioni di codice necessarie a richiedere la lista degli album fotografici di un utente, e a mostrarli in una lista.
// importazione delle classi necessarie per ricavare gli album import com.facebook.data.photos.GetAlbumsData; import com.facebook.commands.photos.GetAlbums; // funzione di richiesta della lista dei photo album private function ricavaPhotoAlbums():void { var chiamata:FacebookCall = fbook.post(new GetAlbums(fbook.uid)); chiamata.addEventListener(FacebookEvent.COMPLETE, albumRicavati); } // funzione di risposta alla lista degli album private function albumRicavati(e:FacebookEvent):void { var albums:GetAlbumsData = e.data as GetAlbumsData; if (!albums || e.error) // nel caso in cui si verifichi un errore { msg.text = "Error"; // mostro il testo di errore return; } else { // popoliamo la lista degli album for(var i:int = 0; i < albums.albumCollection.length; i++) { lista.addItem(albums.albumCollection.getItemAt(i)); } } }
Notiamo come ancora una volta la richiesta sia inviata dall'oggetto di tipo Facebook tramite il metodo POST, in questo caso nello specifico viene inviato il comando getAlbums, che restituisce titolo e informazioni degli album eventualmente presenti sul profilo dell'utente. È possibile poi ricavare le foto di un singolo album con il comando getPhotos.
Ricavare una lista di eventi
Come è possibile intuire, anche l'accesso ad una lista di eventi segue i passaggi visti in precedenza: basterà importare le classi dedicate agli eventi e impostare quindi le funzioni di richiesta e di risposta.
import com.facebook.data.events.GetEventsData; import com.facebook.commands.events.GetEvents; // funzione di richiesta della lista degli eventi private function ricavaPhotoAlbums():void { var chiamata:FacebookCall = fbook.post(new GetEvents(fbook.uid)); chiamata.addEventListener(FacebookEvent.COMPLETE, eventiRicavati); } // funzione di risposta alla lista degli eventi private function eventiRicavati(e:FacebookEvent):void { var eventi:GetEventsData = e.data as GetEventsData; if (!eventi || e.error) // nel caso in cui si verifichi un errore { msg.text = "Error"; // mostro il testo di errore return; } else { // popoliamo la lista degli album for(var i:int = 0; i < eventi.eventsCollection.length; i++) { lista.addItem(eventi.eventsCollection.getItemAt(i)); } } }
Conclusioni
La Actionscript-Facebook Client Library permette di accedere a tutti gli aspetti del profilo di un utente e di leggere e inviare informazioni (basti pensare ai giochi che pubblicano periodicamente delle note sul profilo dell'utente, ad esempio con punteggi o altro).
Sicuramente da apprezzare il fatto che per manipolare i diversi aspetti del profilo utilizziamo procedimenti simili tra loro: cambino essenzialmente solo i nomi delle collezioni (albums per gli album fotografici, events per gli eventi, friends per gli amici, groups per i gruppi, etc.). Questo permette di memorizzare i comandi facilmente e semplifica la lettura della documentazione.
La documentazione ufficiale della classe e il wiki per gli sviluppatori costituiscono un buon riferimento per sperimentare le possibilità offerte da questa libreria.
Infine, nonostante la collaborazione Adobe-Facebook sia relativamente recente, la libreria è già ad una versione decisamente stabile e avanzata, grazie anche al fatto che inizialmente fosse sviluppata da Jason Crist e sia passata solo in un secondo momento ad Adobe.
