Integrare applicazioni Flash/Flex in Facebook

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.

Figura 1. Struttura di un'applicazione Facebook di tipo iFrame


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).

Figura 2. Struttura di un'applicazione Facebook in Flash di tipo iFrame


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.

Figura 3. Struttura di un'applicazione Facebook di tipo FBML


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.

Figura 4. Struttura di un'applicazione Facebook di tipo FBML


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.

Figura 5. Struttura di un'applicazione esterna a Facebook realizzata in Flash


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.