I plugin Like Button e Comments sono stati impiegati per dare la possibilit`a all’utente di condividere le proprie esperienze, soluzioni e commenti quando utilizza dei mashup che creati in precedenza.
Per condividere su Facebook le notizie riguardanti i nuovi mashup creati e condivisi sul repository della piattaforma, `e stato scelto di utilizzare il pro- tocollo Open Graph per pubblicare tali notizie sul social network.
Il protocollo consente di definire un insieme di Actions ed Objects, che rappre- sentano le entit`a di base del protocollo, le Actions rappresentano le iterazioni che gli utenti possono fare attraverso l’applicazione, mentre gli Objects sono le entit`a che su cui si possono effettuare le Actions. Per utilizzarli bisogna definirli all’interno dell’APP Dashboard.
Ad esempio un applicazione che riguarda la cucina potrebbe avere l’azione “Cook ” e gli oggetti “Recipe” oppure “Men`u”.
Per l’applicazione MashupEditor `e stato definito l’oggetto “Mashup” (figu- ra 6.21), che rappresenta il progetto creato, mentre l’azione che compie un utente `e stata chiamata “Create” (figure 6.18 e 6.19).
Figura 6.19: Definizione dell’Action “Create” 2
L’APP Dashboard consente di definire l’azione inserendo alcune informazioni riguardanti il tipo di oggetti utilizzati e, di definire la struttura semantica delle notizie che verranno pubblicate sul social network. Inoltre si pu`o perso- nalizzare l’aspetto delle notizie all’interno della time-line dell’utente, `e pos- sibile inserire l’elenco delle Actions effettuate come lista, tabella, all’interno di una mappa o semplicemente visualizzare il contatore.
Figura 6.20: Definizione dell’ Object “Mashup”
I campi che sono definiti all’interno delle Properties devono essere popolati all’interno della pagina Web inserendoli all’interno di tag HTML < meta >, le informazioni inserite nei tag vengono poi utilizzate per completare la strut- tura delle notizie che appariranno sul social network.
Esempio dei tag < meta > che vengono inseriti nella pagina HTML:
<meta p r o p e r t y=” f b : a p p i d ” c o n t e n t=” 2 4 4 3 7 6 5 9 5 6 6 3 2 1 5 ” /> <meta p r o p e r t y=” o g : t y p e ” c o n t e n t=” m a sh u p ed i t or : m as h u p ” /> <meta p r o p e r t y=” o g : t i t l e ” c o n t e n t=” u s e r t e s t d e f a u l t ” /> <meta p r o p e r t y=” o g : i m a g e ” c o n t e n t=” h t t p : // v e n e r e . i s t i . c n r . i t : 8 0 8 0 / MashupEditor / i m a g e s / l o g o 1 p b g 2 0 0 . png ” /> <meta p r o p e r t y=” o g : d e s c r i p t i o n ” c o n t e n t=” u s e r t e s t p r o j e c t ” /> <meta p r o p e r t y=” o g : u r l ” c o n t e n t=” h t t p : // v e n e r e . i s t i . c n r . i t : 8 0 8 0 / MashupEditor / CommandServlet ? p i d =1339686564158 ”>
Una volta definiti Actions e Objects si inseriscono i tag all’interno della pagina Web. Quando l’utente esegue l’azione definita all’interno dell’applicazione, l’applicazione stessa invoca le Graph API che pubblicano una nuova istanza dell’azione compiuta collegando l’utente con l’oggetto utilizzato. La sequenza di azioni che vengono eseguite viene elencata nella figura ??.
Figura 6.21: Schema iterazioni con il protocollo Open Graph
All’interno del MashupEditor questo meccanismo `e stato implementato nel seguente modo:
1. L’utente che ha creato il progetto lo condivide all’interno del repository, indicando la volont`a di condividere la notizia su Facebook:
Figura 6.22: Finestra inserimento informazioni sul mashup da condividere
2. La piattaforma di Mashup effettua la POST dell’azione verso Facebook attraverso una chiamata HTTP:
POST h t t p s : // graph . f a c e b o o k . com/me/ m a s h u p e d i t o r : c r e a t e ? mashup=OBJECT URL
&a c c e s s t o k e n=ACCESS TOKEN
dove OBJECT URL `e la url del mashup all’interno della piattaforma, mentre ACCESS TOKEN `e il token che l’utente ha ricevuto quando ha fatto il login tramite Facebook;
3. La piattaforma Facebook effettua una chiamata HTTP GET alla OB- JECT URL da dove legge i metadati che sono inseriti all’interno della pagina Web, creando la connessione tra l’utente Facebook e l’oggetto Mashup tramite l’azione Create.
La notizia appena generata viene visualizzata in tutti i Social Channel del sito di Facebook:
• News Feed e Ticker degli amici:
Figura 6.23: Notizia della creazione di un mashup sulla bacheca di un amico
• Timeline dell’utente:
• Timeline View dell’utente (figura 6.25), le notizie vengono inoltre ag- gregate per periodo, mese e anno (figure 6.27 e 6.26):
Figura 6.25: Elenco dei mashup creati dall’utente
Figura 6.26: Riassunto dei mashup creati dall’utente per periodo temporale
Tutti i link ai mashup che vengono pubblicati su Facebook sono validi ed utilizzabili dagli utenti. Per rendere possibile ci`o, la piattaforma `e stata modificata affinch´e carichi automaticamente un mashup condiviso, rendendo possibile l’esecuzione all’utente che apre il link.
Se l’utente ha gi`a utilizzato l’applicazione Facebook MashupEditor ed `e con- nesso al social network, l’ambiente grafico mostrer`a il mashup pronto per l’esecuzione. Se invece ha gi`a utilizzato l’applicazione, ma non `e autenticato su Facebook, viene mostrata la sua finestra di login e, una volta inserite le credenziali, viene caricato il mashup all’interno dell’ambiente grafico.
Infine, se un utente utilizza l’applicazione per la prima volta, verr`a visua- lizzata la finestra di login di Facebook. Dopo questo, dovr`a rilasciare le autorizzazioni richieste dall’applicazione MashupEditor ed infine l’ambiente grafico caricher`a il mashup richiesto.
Un esempio di applicazione
In questo capitolo viene presentato un esempio d’uso della nuova versione della piattaforma di mashup. L’esempio `e articolato in due parti e mostra la cooperazione possibile tra due utenti della piattaforma nello sviluppo di un mashup.
7.1
Scenario
• Parte 1: Creazione e condivisione di un mashup:
Giuliano vuole creare un nuovo mashup per la ricerca di cd musicali. Egli vuole utilizzare due diverse applicazioni Web e visualizzare i risul- tati della ricerca di entrambi i siti.
La creazione dell’applicazione parte creando un nuovo widget del sito “www.amazon.it ” utilizzando la creazione a partire dalla navigazione Web.
Una volta creato il primo widget, decide di cercare all’interno del re- pository se `e presente un widget del sito “www.ebay.it ”.
La ricerca ha esito positivo cos`ı Giuliano pu`o passare alla fase di con- nessione dei due widget.
Una volta effettuata la connessione, Giuliano esegue il suo mashup.
Infine Giuliano effettua la condivisione del suo progetto all’interno del repository e su Facebook.
• Parte 2: Caricamento e modifica di un mashup:
Alessandra vede la notizia relativa al mashup creato da Giuliano all’in- terno della sua bacheca di Facebook.
Carica il mashup attraverso il link che trova nella notizia su Facebook. Decide che pu`o arricchire il mashup aggiungendo un widget che ha sal- vato nella sua libreria personale e relativo al sito “www.wikipedia.it ”. Connette il suo widget agli altri due gi`a presenti ed esegue il mashup, infine effettua la condivisione della nuova versione, informando Giuliano delle modifiche che ha effettuato.