Sviluppare applicazioni Facebook

7,467 views

Published on

Sviluppare applicazioni Facebook

  1. 1. Intesys TalkSviluppare applicazioni FacebookIntesys, 11/07/2011
  2. 2. Sommario1. Introduzione 4. In pratica 5. Tools2. Risorse principali 1. Creare l’app 1. Access Token Tool 1. Canvas Page 2. Configurazione 2. Test Users 3. Il canvas 3. Platform Status 2. Social Channels 3. Insights 4. Autorizzazioni 4. Debugger 5. Esempio 5. Graph API3. Concetti chiave della 6. SDKs Explorer piattaforma 1. Javascript SDK 6. Javascript Test 1. Social Graph 1. Channel File 2. Autenticazione e Console 2. Open Graph Autorizzazione 5. Funzionalità avanzate 3. Graph API 3. Chiamate alle API 1. FQL 4. OAuth 2. PHP SDK 2. Dialogs 5. Authentication 1. Installazione e 1. Server-side Flow Inizializzazione 3. Credits 2. Autenticazione e 2. Client-side Flow Autorizzazione 4. I18N 3. Chiamata alle 5. Chat API API 5. Fonti e ringraziamenti Intesys TalkPagina 
  3. 3. Perché sviluppare applicazioni Facebook? E’ utile sviluppare applicazioni Facebook perchè permette di creare un canale social tra il brand per cui lavoriamo e gli utenti finali. Intesys TalkPagina 
  4. 4. Le 3 risorse principali Strumenti messi a disposizione da Facebook - Canvas Page - Social Channels - Insights Intesys TalkPagina 
  5. 5. Canvas Page Le applicazioni FB sono web app liberamente realizzabili con i comuni linguaggi orientati allo sviluppo web (php, python,Java, C#,ecc). La canvas è molto simile ad un iframe all’interno del quale viene caricata la nostra app. La canvas viene popolata attraverso una Canvas URL sulla quale risiederà la nostra app. Quando un utente visita la nostra app, FB caricherà tramite iframe il contenuto della nostra Canvas URL. Lo spazio a disposizione all’interno della Canvas è di default di 760px ma può essere fluido (dal Novembre 2011) ed occupare tutta la larghezza del browser. Intesys TalkPagina 
  6. 6. Social ChannelsPer portare più traffico possibile verso la propria app, Facebook mette a disposizione alcunicanali quali : Bookmarks Aggiunti in automatico sulla pagina dell’utente una volta che ha utilizzato l’app; permettono facilmente di far tornare l’utente Notifiche Permettono a più utenti di ricevere notifiche riguardanti inviti ad utilizzare l’app; ne esistono di 2 tipi: user generated : richieste tramite popup all’utente che decide se inviarle o meno agli amici app generated : inviate in automatico dall’app agli utenti che ne hanno espresso il consenso nei permessi (si vedrà dopo come richiedere i permessi) News feed Vengono creati in automatico da Facebook nella parte in alto a destra dell’homepage mentre possono essere pubblicati come post sempre dietro consenso esplicito dell’utente. Intesys TalkPagina 
  7. 7. InsightsInsights è uno strumento messo a disposizione da Facebook per trackare e quindi poter analizzaregli utenti, lo sharing fatto in relazione all’applicazione, le performance dell’applicazione, ecc. Intesys TalkPagina 
  8. 8. Concetti chiavePrima di procedere con la creazione di un applicazione bisogna andare a capire comè stato strutturato econcepito il social network.- Social Graph- Open Graph- Graph API- Authentication Intesys TalkPagina 
  9. 9. Social Graph Tutti i dati presenti allinterno di Facebook sono rappresentati come entità di un immenso grafo(*) dotato di identificato univoco (FB id). Ad esempio, lutente Mario Rossi con i suoi dati è un nodo del grafo, da questo nodo partono connessioni verso altri nodi : gli amici di Mario, le sue foto,ecc. Tutto linsieme dei milioni e milioni di utenti di Facebook forma il grafo dellintero social network, che si potrà scandagliare per mezzo delle Graph API. (*) Grafo: struttura matematica costituita da un insieme di nodi collegati fra loro. Date le molte proprietà, vengono studiati sia in matematica che in informatica. (http://it.wikipedia.org/wiki/Grafo) Intesys TalkPagina 
  10. 10. Open Graph ProtocolL’OGP è un protocollo creato da Facebook nel 2008 (evolutosi fino ad oggi – vedi la “timeline”), chetrasforma qualsiasi pagina web in un entità associabile al grafo sociale di un’utente.Le pagine web che contengono il “Like Button” di Facebook vengono viste dalla piattaforma come“pagine Facebook” e quindi entità del grafo complessivo del social network.Come nell’esempio qui sotto, l’utente clicca sul “mi piace” di una pagina di un film ed in automatico vienecreata la connessione tra l’entità (la pagina Facebook del film) e l’utente. Intesys TalkPagina 
  11. 11. Modifiche a Open Graph Protocol Dal settembre 2011, dopo la conferenza F8, che ha introdotto Timeline, allinterno di OGP sono state incluse le “attività” e gli “oggetti” (per ora solo applicazioni) che si integrano in profondità con il social network. Un breve esempio. Creiamo unapplicazione che fornisce ricette, durante la configurazione dellapp si può impostare che tipo di attività lutente svolgerà (in questo caso cucinare). Quando lutente aggiungerà lapp alla sua timeline, le attività specificate durante la configurazione verranno condivise sul news feed, sul ticker (larea in alto a destra) e sulla propria timeline. Intesys TalkPagina 
  12. 12. Graph API Il cuore della programmazione Facebook è costituito dalle Graph API, collezione di semplici servizi Web utili per navigare il grafo sociale. Un semplice esempio. Collegandosi allindirizzo https://graph.facebook.com/platform, vedremo apparire una serie di informazioni relative allid (in questo caso lalias) dellutente inserito. Come detto prima, ogni entità del grafo ha un suo identificativo (numerico o alias) che può essere usato per recuperare i dati sullentità, qualora ne avessimo i permessi. Ogni entità ha i suoi dati, in quanto, ovviamente, un album di foto avrà campi diversi dal profilo di un utente. Per vedere quali campi si possono estrarre da ogni entità ci viene incontro la documentazione ufficiale: http://developers.facebook.com/docs/reference/api/ Altro tool molto utile è il Graph API Explorer, che ci aiuta notevolmente nello sviluppo delle apps: https://developers.facebook.com/tools/explorer?method=GET&path=19292868552 Limpiego delle API verrà spiegato a breve, dopo la creazione e configurazione delle nostre apps. Intesys TalkPagina 
  13. 13. Il protocollo OAuth Si aveva la necessità di autenticare applicazioni di terze parti su sistemi esterni per dare la possibilità a queste applicazioni di accedere alle API del sistema esterno. OAuth è un protocollo open, conforme alla metodologia RESTful, quindi facilmente applicabile da tutte quelle applicazioni scritte con linguaggi capacia di aprire socket. I principi fondamentali sono 2 (riportati dal sito ufficiale): - è un metodo facile per interagire con dati protetti, è un metodo sicuro con cui gli utenti forniscono gli accessi. - se si interagisce con i dati degli utenti si consiglia Oauth, perché permette di accedere ai dati degli utenti senza conoscerne le credenziali. In poche parole, l’utente autorizzerò un’applicazione ad accedere ai suoi dati presso il sistema esterno senza che l’applicazione conosca le credenziali dell’utente. Lo utilizzano quasi tutti i big del web, come Facebook, Twitter, Yahoo!,Google,ecc. Di seguito spiegherò il flusso di autenticazione. Intesys TalkPagina 
  14. 14. Il protocollo OAuth Fase preliminare: lo sviluppatore dell’Applicazione deve registrare quest’ultima sul Servizio Esterno, indicando quali dati potranno essere recuperati. 1 - L’ utente accede all’applicazione,(2) che contatta il sistema esterno per ricevere un “Unauthorized Request Token”(3); 4 - L’applicazione ridirige l’ utente verso il sistema esterno, passando il token non autorizzato; 5 - L’ utente decide di autorizzare l’applicazione direttamente sul sistema esterno; 6 - Il sistema esterno ridirige l’utente verso l’applicazione passando un “Access Token”(7); L’applicazione accede ai dati dell’Utente presenti sul sistema esterno grazie al token autorizzato. Intesys TalkPagina 
  15. 15. Differenze tra OAuth 1.0 e OAuth 2.0 All’inizio del Maggio 2010, il gruppo di lavoro di OAuth ha rilasciato la bozza della seconda versione. Le novità rispetto alla versione precedente riguardano: - 6 nuovi flussi di autenticazione (user-agent flow,web server flow, device flow, ecc.) per le applicazioni che non prevedono browser - L’applicazione client non necessità per forza di meccanismi di crittografia, ma si utilizza una connessione via https per l’autenticazione (basato sulle API di Twitter, poi implementato anche da facebook) - Autenticazione meno complicata - I token forniti con OAuth 2.0 hanno un tempo di expires breve - Netta separazione dei ruoli tra il server responsabile della gestione delle richieste OAuth e il server che gestisce l’autorizzazione dell’utente. Intesys TalkPagina 
  16. 16. Facebook AuthenticationFacebook utilizza il protocollo OAuth 2.0 per lautenticazione e lautorizzazione.Supporta diversi flussi per lautenticazione da integrare con il proprio sito o la propria app,mobile o desktop che sia.User LoginFacebook supporta 2 tipi diversi di flusso per il login dellutente. - server-side, noto come flusso con codice di autenticazione - client-side, noto come flusso implicitoQuello server-side viene usato per fare una chiamata alle Graph API dal nostro web server,quello client-side per effettuare le chiamate tramite javascript su browser o da applicazioni mobileo desktop.Indipendentemente dal tipo di flusso scelto, limplementazione di Facebook dei flussi prevede 3 step: - user authentication, verifica che lutente è quello che dice di essere - app authorization, verifica che lutente conosce quali permessi lapplicazione avrà sui suoi dati - app authentication, verifica che lutente sta fornendo le sue informazioni e non quelle di altriUna volta completati tutti questi step, allapp viene fornito uno user access token, che permette allapp diaccedere alle informazioni dellutente. Intesys TalkPagina 
  17. 17. Server-side FlowLautenticazione dellutente e lautorizzazione dellapp vengono effettuate contemporaneamente attraverso il popup OAuth.Quando si richiama questo popup si devono passare i parametri app_id (generata al momento di creazione dellapp) elURI di ritorno a cui il browser punterà dopo lautorizzazione dellapp (*).https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL(*) Il parametro redirect_uri deve ovviamente far parte del dominio su cui risiede lapp.Se lutente è già loggato, il popup valida il cookie di login salvato sul browser dellutente, altrimenti vengonomostrati i campi di login.Una volta autenticato lutente viene mostrata la lista di permessi che lapplicazione richiede allutente.Di default lapp ha accesso alle informazioni pubbliche dellutente.Per richiedere informazioni aggiuntive, come foto, note, link, ecc., si deve aggiungere un altro parametro allurl, cioè scope.Nel parametro scope vanno specificati i permessi da richiedere allutente.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_streamPer la lista di tutti i permessi si guardi la reference: http://developers.facebook.com/docs/reference/api/permissions/NB: Facebook ha verificato una proporzionalità inversa tra il numero di permessi richiesti ed il numero di utenti. Intesys TalkPagina 
  18. 18. Server-side FlowSe lutente non garantisce i permessi lOAuth Dialog redireziona(via HTTP 302) allURI passato come parametro con alcuniparametri aggiuntivi:http://YOUR_URL? error_reason=user_denied& error=access_denied& error_description=The+user+denied+your+request.Se lutente garantisce i permessi lOAuth Dialog redireziona, come nel precedente, allURI specificato aggiungendo però ilparametro code : http://YOUR_URL?code=A_CODE_GENERATED_BY_SERVERAvendo il parametro code in mano si può procedere allo step finale, cioè lapp authentication, per ottenere laccess tokenda utilizzare per le chiamate API.Per farlo si devono passare allURL https://graph.facebook.com/oauth/access_token questi parametri:- client_id=YOUR_APP_ID : parametro generato alla creazione dellapp- redirect_uri=YOUR_URL : come nello step precedente, è un URI che risiede sul nostro dominio, su cui atterreremo una volta autorizzata lapp- client_secret=YOUR_APP_SECRET : parametro generato alla creazione dellapp- code=THE_CODE_FROM_ABOVE : il codice ottenuto appena primaquindihttps://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID& redirect_uri=YOUR_URL& client_secret=YOUR_APP_SECRET& code=THE_CODE_FROM_ABOVE Intesys TalkPagina 
  19. 19. Server-side FlowUna volta autorizzata lapp, il server ci restituirà laccess token.Insieme allaccess token avremo anche il parametro expires, contenente il numero di secondi prima che il token scada.Ovviamente se il token scade, si dovranno rifare tutti quanti i passaggi precedenti.NB: per avere un access_token che non scada mai, bisogna richiedere come permesso quello di offline_access,permesso che però viene molto spesso negato dagli utenti.Nel caso di un errore nellautorizzazione dellapp, il server ci restituirà lerrore HTTP 400, contenente nel responsetipo e messaggio di errore. Intesys TalkPagina 
  20. 20. Client-side FlowLa versione client-side usa anchessa OAuthDialog ma con un parametro aggiuntivo che è il response_type.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=tokenAnche qui, per i permessi aggiuntivi, si usa il parametro scope=permessi_da_richiedere.Una volta che l’utente è autenticato ed ha autorizzato l’app, il browser reindirizza al redirect_uri, peròanziché passare il parametro code, passa l’access_token all’interno di un frammento dell’URI (#access_token).Dato che l’access_token è passato tramite frammento dell’URI, solo codice client-side potrà estrapolarlo. Intesys TalkPagina 
  21. 21. Creare l’appSe non si sono mai create applicazioni, bisogna visitare la “Developer app”, che ci autorizza a creareapplicazioni.Per creare un app poi verrà verificato l’account dello sviluppatore attraverso la conferma del numero ditelefono o della carta di credito. Intesys TalkPagina 
  22. 22. Configurare l’app1. Cliccando su “+Crea Applicazione”, avremo questopopup in cui specificare nome dell’applicazione enamespace (vedremo dopo a cosa servirà).2. Il passo successivo prevede l’inserimento di unCAPTCHA fino ad arrivare al pannello di gestionedell’applicazione (figura 2).3. Arrivati a questo punto Facebook avrà generato:App ID e App Secret, dopo aver finito di compilare icampi Contact Email e Category andiamo ad inserire icampi Canvas URL e Secure Canvas URL(*) con ilnostro dominio sulla quale risiede l’app.La nostra app dovrà risiedere o sulla document root o suuna sottocartella del dominio.Ad esempio:https://www.gardaland.it/facebook/TabRaptorCountdown/(*) Dal 1° Ottobre 2011 tutte le applicazioni su Facebookdovranno essere su domini con certificato HTTPS, mentrela fase di testing si può fare con il dominio senza certificato. Intesys TalkPagina 
  23. 23. Dimensioni del CanvasLa nostra app viene comunque caricata all’interno di Facebook, quindi ci sonoimposizioni da parte della piattaforma sulle dimensioni.Canvas widthLa larghezza della nostra app può essere impostata su fissa a 760px o su fluida.Nel qual caso la larghezza fosse fluida l’iframe che contiene l’app avrà width al 100%.Se il nostro contenuto sfora la larghezza massima verrà mostrata la scrollbar sotto o tagliatoparte del contenuto.Canvas heightL’altezza del canvas può essere impostato su fluida(come sopra) o su Settable (default: 800px).Lo sviluppatore può cambiare l’altezza dell’iframe attraverso alcune funzioni messe adisposizione da Facebook quali:- FB.Canvas.setSize()- FB.Canvas.setAutoResizePer approfondire si veda l’ How-To: Build an app on Facebook with Fluid Canvas Intesys TalkPagina 
  24. 24. AutorizzazioniQuando un utente accede alla nostra app, Facebook ci invia informazioni sull’utenteAttraverso una richiesta HTTP POST alla nostra canvas, contenente un parametro(signed_request) formato da un oggetto JSON encodato in base 64).Al primo accesso, l’oggetto signed_request contiene solamente:- user : array composto dai dati sulla localizzazione ed età dell’utente- algorithm : stringa che descrive il meccanismo usato per il sign-in della richiesta- issued_at : timestamp di quando è stato creato il parametro signed_requestPer ottenere i permessi sull’utente da parte dell’applicazione è bene utilizzare il popup dirichiesta permessi (OAuth Dialog) attraverso il redirect (top.location.href dato che siamo in uniframe) all’url:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGEche permetterà all’applicazione di avere accesso ai permessi di base sull’utente(nome,sesso, immagine profilo,ecc).Per ottenere altri permessi quali email, post dell’utente, ecc. è necessario modificare l’urlaggiungendo alcuni parametri, nella forma:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_streamPer tutte queste operazioni ci verrà in aiuto l’SDK ufficiale. Intesys TalkPagina 
  25. 25. Primo esempio<?php$app_id = "YOUR_APP_ID";$canvas_page = "YOUR_CANVAS_PAGE_URL";$auth_url = https://www.facebook.com/dialog/oauth?client_id= . $app_id . "&redirect_uri=" . urlencode($canvas_page);$signed_request = $_REQUEST["signed_request"];list($encoded_sig, $payload) = explode(., $signed_request, 2);$data = json_decode(base64_decode(strtr($payload, -_, +/)), true);if (empty($data["user_id"])) { echo("<script> top.location.href=" . $auth_url . "</script>");} else { echo ("Welcome User: " . $data["user_id"]);}?>Semplice esempio di come autenticare l’utente sulla nostra app. Intesys TalkPagina 
  26. 26. SDKsFacebook mette a disposizione degli sviluppatori vari tipi di kit di sviluppo tutti open-source.Quelli che si utilizzano per lo sviluppo di applicazioni sono quelli Javascript e PHP.Per lo sviluppo di applicazioni mobile Facebook mette a disposizione altri 2 SDK, uno per iOS e uno perAndroid.Javascript SDKLa versione Javascript mette a disposizione una serie di funzioni che effettuano le chiamate alle APIserver-side per l’accesso alle API Rest, alle Graph API e alle Dialogs. Inoltre aiuta nella generazionedel markup XFBML (linguaggio di markup proprietario) per i Social Plugins.PHP SDKLe funzionalità che va a ricoprire sono pressochè identiche a quello Javascript (tranne le Dialogs).La differenza nei tempi di caricamento dell’applicazione però è notevole. E’ disponibile su GitHub.iOS SDKMette a disposizione una starting-class scritta ovviamente in Objective-C.Le funzioni che supporta sono SSO, Graph API e le Dialogs.Vale sia per iPhone che per iPad e iPod Touch. Reperibile sempre su GitHub.Android SDKSimile a quello per IOS anche a livello di funzioni offerte, anch’esso disponibile su GitHub Intesys TalkPagina 
  27. 27. Javascript SDKL’SDK javascript viene caricato asincronamente tramite una funzione javascript, per via della velocità dicaricamento della pagina. <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : YOUR_APP_ID, // App ID channelUrl : //WWW.YOUR_DOMAIN.COM/channel.html, // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = facebook-jssdk; if (d.getElementById(id)) {return;} js = d.createElement(script); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName(head)[0].appendChild(js); }(document)); </script>La funzione window.fbAsyncInit inizializza l’SDK utilizzando le opzioni maggiormente usate. Intesys TalkPagina 
  28. 28. Channel FileIl channel file serve per risolve alcuni problemi cross-browser di caricamento dell’SDK viaJavascript.Deve puntare ad un URL che contenga solamente il tag: <script src="//connect.facebook.net/en_US/all.js"></script>e deve essere cachato : <?php $cache_expire = 60*60*24*365; header("Pragma: public"); header("Cache-Control: max-age=".$cache_expire); header(Expires: . gmdate(D, d M Y H:i:s, time()+$cache_expire) . GMT); ?> <script src="//connect.facebook.net/en_US/all.js"></script>E’ un parametro opzionale ma raccomandato dalla piattaforma stessa perché risolve 3 problemi giàconosciuti.1. Pagine che contengono frame comunicanti non fanno funzionare correttamente i Social Plugins se non con il channel file.2. Se la pagina contiene file audio o video con autoplay, l’utente sentirà 2 stream audio perché la pagina viene ricaricata per permettere la comunicazione cross-domain.3. Evita che le statistiche “sballino”.Altra nota riguardo al cambiamento del document.domain via javascript, in quanto anche il channel filedeve avere lo stesso document.domain per poter funzionare. Intesys TalkPagina 
  29. 29. Autenticazione e Autorizzazione JSPer ottenere i permessi ad accedere ai dati dell’utente dobbiamo utilizzare la funzioneFB.login (Callback function, options): FB.login(function(response) { if (response.authResponse) { console.log(Welcome! Fetching your information.... ); FB.api(/me, function(response) { console.log(Good to see you, + response.name + .); FB.logout(function(response) { console.log(Logged out.); }); }); } else { console.log(User cancelled login or did not fully authorize.); } }, {scope: email});Questa funzione non solo autentica l’utente sulla nostra app, ma ci permette di chiedergli a quale delle sueinformazioni vogliamo accedere, tramite l’opzione scope.Questa funzione aprirà il classico popup di facebook contenente la lista dei permessi che vogliamo otteneredall’utente.La procedura avviene tramite il protocollo OAuth, dal 13 Dicembre passato alla versione 2.0 .Altre funzioni possibili sono: FB.logout, FB.getLoginStatus (asincrona – ci dice lo stato attuale dell’utente) eFB.getAuthResponse (sincrona – ci restituisce il record creato al momento dell’autenticazione contenentela signed_request, l’access_token e l’ID dell’utente. Talk IntesysPagina 
  30. 30. Chiamate alle APIAccedere ai dati dell’utente è molto semplice, si utilizza la funzione FB.api(‘URL’, callback function).FB.api(/me, function(response) { alert(Your name is + response.name);});Si può anche utilizzare FQL (Facebook Query Language) per eseguire query via REST.FB.api( { method: fql.query, query: SELECT name FROM user WHERE uid=me() }, function(response) { alert(Your name is + response[0].name); }); Intesys TalkPagina 
  31. 31. PHP SDKL’SDK PHP mette a disposizione una serie di funzionalità per accedere alle API server-side.E’ scaricabile da GitHub(https://github.com/facebook/php-sdk).Spesso usato per operazioni di gestione del profilo (modifiche alle foto, video, ecc.) , elimina la necessità digestire “manualmente” l’autorizzazione degli access_token.Per prima cosa si dovrà inizializzare l’SDK per mezzo dei dati ottenuti durante la creazione dell’app. Intesys TalkPagina 
  32. 32. Installazione e inizializzazioneUna volta scaricato il file zip contenente l’SDK da GitHub, si devono copiare i file della cartellasrc all’interno della cartella che ospiterà tutta l’app.Successivamente si istanzia l’oggetto Facebook con i 2 dati principali ricavati al momento della creazione(app_id e app_secret).require_once("facebook.php");$config = array();$config[‘appId’] = YOUR_APP_ID;$config[‘secret’] = YOUR_APP_SECRET;$config[‘fileUpload’] = false; // optional$facebook = new Facebook($config);L’opzione fileUpload autorizza o meno l’SDK ad effettuare l’upload di file sul proprio server.Ovviamente dovrà essere attiva questa configurazione anche sul server. Intesys TalkPagina 
  33. 33. Autenticazione e autorizzazionePer effettuare le operazioni di autenticazione ed autorizzazione, lSDK PHP mette a disposizione alcunimetodi statici:Login$params = array( scope => read_stream, friends_likes, redirect_uri => https://www.myapp.com/post_login_page);$loginUrl = Facebook::getLoginUrl($params);Logout$params = array( next => https://www.myapp.com/after_logout );$logoutUrl = Facebook::getLogoutUrl($params);Retrieve User$uid = Facebook::getUser(); Intesys TalkPagina 
  34. 34. Chiamate alle APIPer effettuare una chiamata alle API ed avere accesso ai dati dellutente ci viene in soccorso il metodoStatico: Facebook::api(/* Polymorphic*/)Un breve esempio:<?php// […] Installazione e inizializzazione SDK$user_id = $facebook->getUser();if($user_id) { try { $user_profile = $facebook->api(/me,GET); echo "Name: " . $user_profile[name]; } catch(FacebookApiException $e) { $login_url = $facebook->getLoginUrl(); echo Please <a href=" . $login_url . ">login.</a>; error_log($e->getType());error_log($e->getMessage()); }} else { $login_url = $facebook->getLoginUrl(); echo Please <a href=" . $login_url . ">login.</a>;}?> Intesys TalkPagina 
  35. 35. Tools- Access Token Tool- Test Users- Platform Status- Debugger- Graph API Explorer- Javascript Test Console Intesys TalkPagina 
  36. 36. Access Token ToolE un utile strumento per ottenere gli access_token dalle applicazioni che si sono create ed avereinformazioni utili sulle proprie apps. Intesys TalkPagina 
  37. 37. Test Users Facebook mette a disposizione la possibilità di impostare alcuni utenti come tester dellapplicazione. Si possono usare utenti esistenti ed aggiungerli tramite il pannello di gestione dellapp, nella sezione Edit Roles oppure esiste la possibilità di crearne di nuovi solo per la fase di testing attraverso le Graph API. https://graph.facebook.com/APP_ID/accounts/test-users? installed=true &name=FULL_NAME &permissions=read_stream &method=post &access_token=APP_ACCESS_TOKEN (*) installed : imposta se lutente di test ha già installato lapp oppure no Intesys TalkPagina 
  38. 38. Platform StatusFacebook mette a disposizione una pagina pubblica in cui è possibile vedere lo stato aggiornato in temporeale di tutta la piattaforma. Intesys TalkPagina 
  39. 39. DebuggerUn altro utile strumento è il debugger, una pagina che presenta un campo di test in cui inserire le paginecontenente i metatag per opengraph, oppure il link per il Like Button o per i Social Plugins. Intesys TalkPagina 
  40. 40. Graph API ExplorerLo strumento più utile di tutta la suite messa a disposizione da Facebook è il Graph API Explorer.Permette di fare tutti i test del caso con le API per andare a capire quale API andare ad utilizzare. Intesys TalkPagina 
  41. 41. Javascript Test ConsoleLa Javascript Test Console è un tool che permette di andare a testare tutte le funzionalità dellSDKJavascript. Sono presenti già molti esempi di codice da lanciare per vedere il funzionamento dellSDK. Intesys TalkPagina 
  42. 42. Funzionalità avanzate- FQL- Dialogs- Credits- I18N- Chat API Intesys TalkPagina 
  43. 43. Facebook Query Language (FQL)FQL è un linguaggio, molto simile a SQL, creato da Facebook per interrogare la vaste base dati inmaniera facile.Ad esempio la query: SELECT uid FROM user WHERE is_app_user = 1 AND uid IN (SELECT uid FROMfriend WHERE uid1 = $app_user)ritorna tutti gli id degli utenti amici dellutente che sta utilizzandolapp.Un altro esempio per recuperare nome,cognome e avatar dellutente che sta usando lapp.function getQuery() { FB.api(/me, function(response){ var query = FB.Data.query(select name, hometown_location, sex, pic_square from user where uid={0}, response.id); query.wait(function(rows) { $(#fql-data).html(Il tuo nome: + rows[0].name + "<br/>" +<img src=" + rows[0].pic_square + " alt=""/> + "<br/>"); }); });}La chiamata si divide in 2 fasi:1 - lesecuzione della query2 - lattesa dei risultati tramite query.wait() che poi popola un div html.FQL è molto utile perchè permette di utilizzare funzionalità avanzate che con le Graph API sarebberoimpossibili, ad esempio inserire chiamate multiple in una singola chiamata.Per approfondire si rimanda alla documentazione ufficiale:http://developers.facebook.com/docs/reference/fql/ Intesys TalkPagina 
  44. 44. DialogsI popup tipici di Facebook(dialogs) mantengono la grafica di facebook senza necessitare di permessidegli utenti per essere usati, in quanto i popup stessi necessitano dellinterazione dellutenteal suo interno.Possono essere usati in qualsiasi tipo di applicazione, su Facebook, su un sito o su un app mobile.Si possono utilizzare tramite la costruzione di un URL o utilizzando uno degli helper dei vari SDK.Ogni dialog è si compone di un metodo ed alcuni parametri.LURL inizia con "http://www.facebook.com/dialog", seguito dal metodo e dai parametri.Ad esempio il popup per inserire un post sulla propria bacheca. http://www.facebook.com/dialog/feed? app_id=123456789101112& redirect_uri=http://www.example.com/response/ Intesys TalkPagina 
  45. 45. Facebook CreditsFacebook credits è un sistema di pagamento che permette agli sviluppatori di applicazioni Facebook diguadagnare in maniera semplice e veloce.Utilizzare Facebook Credits è utile perchè:- gli utenti sono già fidelizzati con Facebook e si fidano ad effettuare pagamenti per mezzo della piattaforma- Facebook supporta più di 80 metodi di pagamento in 50 paesi ed è in continua espansioneI vari flussi di pagamento vengono effettuati attraverso un set di API messe a disposizione della piattaforma.Un esempio di come questo metodo di guadagno è stato vantaggioso è Farmville.Gioco in flash che conta circa 29 milioni di utenti attivi ed un sistema di pagamento effettuato tramiteFacebook Credits e Paypal.Poi quotata in borsa (la prima azienda ad essere quotata in borsa per la venditadi beni virtuali) è arrivata ad essere valutata circa 5 miliardi di dollari.Ovviamente Facebook offrendo il bacino di utenti più grande del mondo vuole anche qualcosa in cambio, siparla di circa il 30% delle transazioni effettuate tramite la piattaforma. Intesys TalkPagina 
  46. 46. InternazionalizationFacebook è disponibile in più di 70 lingue grazie ad un particolare framework che permette alla comunitàstessa di tradurre le etichette.Lelenco di tutte le lingue disponibili si trova allinterno di un file XML(http://www.facebook.com/translations/FacebookLocales.xml).Le lingue sono codificate tramite i codici standard ISO e il codice del paese separate da ununderscore(it_IT, en_US).Per determinare la lingua da utilizzare più opportunamente, basta esaminare la signed_request di un utente eandare ad interpretare il valore della variabile locale.Le varie localizzazioni vengono fatte attraverso l’SDK Javascript, al momento dell’inclusione://connect.facebook.com/it_IT/all.jsFacebook mette a disposizione un app, per effettuare il translating della propria seguendo alcuni semplicipassi descritti qui: https://developers.facebook.com/docs/internationalization/ Intesys TalkPagina 
  47. 47. Chat APIUna cosa molto utile che ha fatto Facebook è stato di mettere a disposizione le API della chat per dare lapossibilità di integrare un sistema di instant-messaging sul proprio sito/app.Le API si basano sugli standard XMPP (Extensible Messagging Presence Protocol).Sono molto semplici da implementare, e la documentazione è molto ricca(https://developers.facebook.com/docs/chat/), intanto un breve elenco di funzionalità e limitazioni.Funzionalità messe a disposizione:- Autenticazione sulla piattaforma tramite SASL (Simple Authentication and Security Layer)- Autenticazione dell’ utente tramite Username/Password con Digest-MD5- Messaggi inviati e ricevuti in plain-text- Invio delle notifiche di stato (sto scrivendo, online, offline) sullo standard XEP-0085 (sempre XMPP)- Ricezione di vCard sullo standard XEP-0054 (semper XMPP)- Ricezione delle foto dagli amiciLimitazioni imposte:- non si inviano/ricevono messaggi in HTML- La rimozione degli utenti dalla chat-room non avviene secondo gli standard XMPP- Non c’ è nessun controllo sui messaggi inviati (parolacce, insulti, ecc.)- Altre funzionalità che non rispettono gli standard XMPP Intesys TalkPagina 
  48. 48. FontiPotete trovare altro materiale relativo allo sviluppo di applicazioni Facebook:Online- Documentazione ufficiale (https://developers.facebook.com/docs/)- BigThink (http://www.bigthink.it/)Cartaceo- IoProgrammo (ne parla in svariati numeri)- Creare applicazioni per Facebook ( http://www.hoepli.it/libro/creare-applicazioni-per-facebook/9788882339920.asp)Prossimamente online sul mio blog:- www.good2know.it Intesys TalkPagina 
  49. 49. Do You Have Any Questions? Filippo Riggio Developer filippo.riggio@intesys.it Intesys TalkPagina 

×