• Save
Venezia 2010 Facebook Developer Garage Parte1
Upcoming SlideShare
Loading in...5
×
 

Venezia 2010 Facebook Developer Garage Parte1

on

  • 2,258 views

Cassetta degli attrezzi per programmare Facebook estratta dal mio libro "Creare applicazioni per Facebook" editore FAG

Cassetta degli attrezzi per programmare Facebook estratta dal mio libro "Creare applicazioni per Facebook" editore FAG

Statistics

Views

Total Views
2,258
Views on SlideShare
2,257
Embed Views
1

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Venezia 2010 Facebook Developer Garage Parte1 Venezia 2010 Facebook Developer Garage Parte1 Presentation Transcript

  • Cassetta degli attrezzi per sviluppare applicazioni Facebook Roberto Marmo Facoltà di Ingegneria Università di Pavia, Facoltà di Scienze MM.FF.NN. Università Insubria Como www.robertomarmo.net info@robertomarmo.net www.facebook.com/roberto.marmo
  • Chi sono ▪ professore a contratto in Facoltà Ingegneria a Pavia e Facoltà Scienze MM.FF.NN. a Como ▪ a febbraio 2009 ho letto una rivista di informatica e ho avuto la spinta a cercare informazioni sulla programmazione editore FAG ISBN 978-88-8233-814-5 19,90 euro www.facebook.com/creare.applicazioni gruppo http://tinyurl.com/crea-app-FB mio sito www.robertomarmo.net
  • Altre risorse per approfondimenti Come fare marketing, guadagnare soldi, potenziare l'immagine, fare cause related marketing con le applicazioni in Facebook: Strategie, Strumenti & Esempi. Riferimenti: info@robertomarmo.net http://www.madri.com/cgi-bin/3a/click.pl?id=2585&p=facebook
  • Agenda informatica concetto di interfaccia di base applicazione sociale piattaforma di Graph API sviluppo Open monetizzare Stream diffondere FBML FBJS FQL
  • Approccio alle applicazioni per social network attività di networking scrittura libri e articoli, formazione, eventi 1. prima dello sviluppo ▪ modello analisi utenti ▪ modello sviluppo applicazione 2. durante l’uso ▪ creazione specifica interfaccia utente ▪ marketing virale 3. dopo l’uso ▪ analisi statistica del comportamento utenti
  • Informatica di base necessaria per partire
  • Conoscenze di informatica ▪ HTML, JavaScript, Flash, XML ▪ sapere costruire un’interfaccia grafica usabile, basata su contrasti di colori ▪ linguaggio PHP www.facebook.com/tutorialitaliano ▪ http://cakephp.org un framework web scritto in PHP per sviluppo rapido di applicazioni in PHP ▪ Ruby on Rails ▪ gestione di un web server e trasferimento di file tramite FTP ▪ da non dimenticare le conoscenze di marketing come nel terzo intervento ore 15
  • REST API ▪ Le API sono un insieme di chiamate software messe a disposizione da un programma o da un oggetto, che tornano utili ad altri programmi o oggetti perché permettono di usare altri software senza doverli ricreare. ▪ REST è modalità per creare applicazioni Web per manipolare le risorse con i metodi GET, POST del protocollo HTTP ▪ i metodi delle API sono chiamati attraverso richieste fatte via GET o via POST ai server di Facebook specificand il formato dei dati in ritorno XML o JSON (JavaScript Object Notation un formato di scambio dati leggero e facilmente leggibile da un essere umano)
  • Documentazione da Facebook ▪ http://developers.facebook.com ▪ http://developers.facebook.com/resources.php ▪ http://wiki.developers.facebook.com/ ▪ http://wiki.developers.facebook.com/index.php/Demos codici di esempio ▪ www.slideshare.net ▪ http://www.robertomarmo.net/libro_facebook.html pagina del mio libro con elenco di risorse e link
  • Applicazioni per imparare a fare applicazioni • http://apps.facebook.com/fbmlzone/index.php • learn fbml • http://apps.facebook.com/tutorialitaliano/ • tutorial in italiano • http://developers.facebook.com/tools/console/ • test console
  • Passaggio dati • A proposito di come i dati vengono trasmessi da Facebook verso l'applicazione dell'utente. • Esistono due metodi di invio dati: XML (eXtensible Markup Language, architettura di riferimento per creare scambio dati tra database diversi indipendentemente dalla piattaforma e dal linguaggio) come metodo nativo e JSON (JavaScript Object Notation) un formato di scambio dati leggero e facilmente leggibile da un essere umano.
  • Concetto di applicazione
  • Il concetto di applicazione ▪ Il successo di Facebook (FB) è dovuto alla creazione delle applicazioni: un software di vario genere che l’utente può inserire nel suo profilo ed inviare agli amici del suo network ▪ classificazione delle applicazioni: ▪ orizzontali e generali per ampia gamma di utenti ma vita breve poiché spesso non sono molto interessanti ed utili ▪ verticali e specializzate per gamma ristretta di utenti, hanno vita più lunga se soddisfano bisogni specifici ▪ template con cui l’utente può creare altre applicazioni con alto grado personalizzazione, es. i quiz e gift
  • Il concetto di applicazione ▪ alcuni casi in 2-3 settimane hanno raggiunto milioni di utenti! ▪ avere un ritorno economico con una applicazione per fare: ▪ giocare, distribuire musica, multimedia ▪ consultare un catalogo e invitare ad acquisto ▪ diffondere una marca ▪ analisi di mercato e degli utenti ▪ consigliare prodotti secondo le caratteristiche del profilo ▪ portare traffico verso un sito esterno ▪ integrazione migliore: pagina fan + applicazione
  • Caratteristiche sociali • comunicare l’uso ai nostri amici per creare diffusione virale • riprodurre comportamenti sociali della vita reale, come dedicare canzone, fare regalo, ascoltare musica, giocare, fare shopping • far provare emozioni tanto intense agli utenti da renderli entusiasti e far venire voglia di parlarne con i loro amici • avere utilità, semplicità, comprensione, usabilità tali da poter diventare popolare tra gli utenti grazie al passaparola • deve permettere all’utente di ESPRIMERSI, sentirsi parte di qualcosa • ritrovare nell’ambiente gli amici per creare familiarità • esposizione sociale per far vedere all’utente quale suo amico ha usato l’applicazione e quali risultati ha ottenuto
  • Facebook Prototypes ▪ http://www.facebook.com/apps/directory.php?app_type=6 ▪ raccolta di prototipi delle applicazioni ufficiali di FB in fase di test, quindi non ancora stabili, per farle provare in anteprima
  • Analisi preliminare • quali sono gli obiettivi dell’applicazione? • creare la user story, pianificare il comportamento dell’utente a grandi linee poi in dettaglio • a quale pubblico è rivolto il progetto? • quanto tempo deve impiegare la persona per completare la applicazione? • come si svolge la monetizzazione?
  • Gestione privacy • fai sapere all’utente che può gestire la sua privacy e non deve avere la paura di aggiungere la applicazione • spiegare quale trattamento si esegue sui dati personali • esempio di cosa da NON fare: una casa automobilistica ha creato applicazione che prende foto mia e di amici, crea la pubblicità e mi tagga mettendo l'annuncio della marca nella bacheca e album foto
  • Interfaccia sociale
  • User experience • insieme delle sensazioni provate dall’utente durante l’interazione con l’applicazione • più l’utente avrà un’esperienza positiva ed appagante: ▪ più gli rimarrà impresso il ricordo dell’uso ▪ più avrà interessa a riusarla ▪ più avrà voglia di cliccare pochi pulsanti per dirlo a tutti
  • Il concetto di applicazione alcuni consigli per la realizzazione: ▪ mostrare contenuti interessanti e scambiabili con altri utenti ▪ rendere semplice l'interfaccia grafica per gestire i dati sociali senza sforzo, in particolare l'interfaccia di avvio per non scoraggiare subito l'uso ▪ dare un senso di completamento dell'opera, per esempio nel caso di un gioco fare arrivare alla fine del gioco ▪ i contenuti interessanti devono essere facilmente collegabili e comunicabili ad amici in 2-3 click ▪ creare dei dati relativi alla specifica applicazione, per ritrovarli al prossimo uso o condividerli con altri utenti
  • Consigli per interfaccia grafica ▪ ricordare i concetti di usabilità dell'interfaccia grafica ▪ ricordare che molte persone hanno una percezione diversa dei colori come nel daltonismo, giocare sui contrasti di colore ▪ l’identità dell’applicazione deve essere sempre chiara e presente, con un suo logo collocato sempre nella stessa posizione lo scopo dell’applicazione ed i contenuti interessanti devono essere subito chiaro e comprensibile la prima interfaccia di avvio deve permettere la personalizzazione secondo le specifiche preferenze dell’utente, in modo da farla sentire una propria creazione e sentirsi autore della applicazione
  • Consigli per interfaccia grafica i contenuti interessanti devono essere facilmente collegabili e comunicabili ad amici e gruppi la prima interfaccia di avvio deve essere facile da usare per non scoraggiarne subito l'uso tante applicazioni riempiono la prima pagina con troppa pubblicità rendendo difficile capire quali sono i pulsanti della applicazione e quali i pulsanti che aprono la pubblicità ▪prima di avviare lo sviluppo del programma bisogna disegnare una bozza dell’aspetto visivo di ogni interfaccia
  • Piattaforma di sviluppo
  • Architettura Facebook • Facebook ha tre datacenter, due sulla west coast (San Francisco, Santa Clara) e uno sulla east (Northern Virginia). I server sono x86, software opensource • il datacenter principale è Santa Clara alla sede della società, il livello web è scritto in Php • il cuore è scritto in C++, Java, Python e Ruby • e’ stato creato adhoc Thrift, un framework che permette ad applicazioni scritte in linguaggi diversi di interagire • per i database, Facebook utilizza server Mysql (8-core, come quelli web su cui viene eseguito Apache), il database opensource riesce a lavorare con 40 TB di dati su oltre 800 macchine
  • Architettura Facebook • riceve 15 milioni al secondo di richieste, 800 database server non sono sufficienti, sistema di caching (memcache) permette di rispondere in tempi rapidissimi al 95% delle richieste mentre le rimanenti vengono inoltrate ai database server • in California c’è un datacenter a San Francisco, che si limita a replicare i servizi web e di caching, ma utilizza gli stessi database di Santa Clara • non è possibile fare la stessa cosa per i server in Virginia, troppo lontani per potere inviare query Mysql se necessario, si replicano i database server. • per foto, video e contenuti analoghi, esistono appositi server dedicati, sempre nelle tre località
  • Architettura applicazioni Facebook ▪ Facebook è solo un intermediario, non ha l’applicazione che va collocata in un altro computer ▪ I numeri rappresentano l’ordine progressivo dello scambio dati nell’interazione tra l’utente, l’applicazione, Facebook
  • Architettura applicazioni Facebook ▪ Architettura delle componenti perl funzionamento dell’applicazione ▪ Facebook cache server conserva il necessario per evitare uno scambio elevato di informazione tra la piattaforma ed i server
  • Scelta del server ▪ punto delicato e costoso è la gestione del web server ▪ installare un interprete PHP versione 5 ▪ i parametri da considerare sono molti e dipendono dalla crescita prevista del numero utenti e dal limite di spesa, scegliere la scalabilità ▪ Alcune risorse per trovare server ▪ http://socialup.top-ix.org/ dalla partecipazione di TOP-IX al Social Application Program di Sun Microsystems, si può far risiedere l'applicazione su una macchina virtuale gratis per un anno ▪ Google App Engine http://tinyurl.com/yghqjgp ▪ Amazon Web Services http://aws.amazon.com ▪ hosting gratuito http://byethost.com/index.php/free-hosting
  • I punti di integrazione Per far conoscere l’applicazione bisogna inserirla in: - canvas, lo spazio di visualizzazione largo 760 pixel disegnabile dall’applicazione - scheda info del profilo utente - tab applicazioni all’interno del profilo utente - directory applicazioni tra cui utente può cercare - menu applicazioni scelte dall’utente
  • Cosa ci occorre ▪ Ambiente di sviluppo in PHP ▪ Un editor di sorgente gratuito come Notepad++ ▪ Librerie ufficiali client library da http://developers.facebook.com/resources.php
  • Fase di registrazione ▪ Login sul nostro profilo ▪ www.facebook.com/developers che è un'applicazione ▪ Cliccare su Set Up New Application ▪ Creare un nome di applicazione e accettare le condizioni di uso
  • Fase di registrazione ▪ Prima parte del processo
  • Fase di registrazione - per far capire bene cosa si offre - per dare un nome e logo facile da ricordare, altrimenti non si ricordano cosa dire agli amici! http://ow.ly/wMJ4 mio post su Creare, Presentare E Promuovere La Tua Applicazione
  • Fase di registrazione creazione Application ID, Chiave API (apikey) e Invisibile per autenticare la propria applicazione sui server della piattaforma importante compilare le informazioni di contatto e assistenza per fare chiarezza su chi è l’autore importante la descrizione delle funzioni offerte per fare chiarezza su cosa realizza l’applicazione
  • Fase di registrazione l'applicazione è identificata dagli utenti e FB con un indirizzo chiamato Canvas Page URL ed organizzato come http://apps.facebook.com/codice_applicazione quando un utente chiama la Canvas Page la richiesta viene girata alla Callback URL, cioè l'indirizzo sullo spazio web di hosting in cui è conservato il software nelle impostazioni avanzate scegliere la “Modalità protetta” e durante lo sviluppo solo lo sviluppatore avrà accesso all’applicazione nel riquadro di riepilogo cliccare su Guarda la pagina di presentazione che deve essere curata con tutti i dettagli su autore e obiettivi dell'applicazione
  • Deploy dopo aver scritto nel proprio computer tutto il codice necessario avviene la fase deployment, oppure deploy si effettua la messa online e aggiornamento della soluzione occorre pertanto trasferire il codice sul server messo a disposizione dal servizio di hosting SSH (Secure SHell, shell sicura) è un protocollo che permette di stabilire una sessione remota cifrata con un altro host
  • Fare le prove creazione di uno o più profili (test account) da usare solo per controllare gli errori nelle applicazioni senza poter però interagire con altri utenti per creare un test account occorre seguire la classica procedura per creare un nuovo utente dopo essere entrati nel nuovo profilo, andare all’indirizzo http://www.facebook.com/developers/become_test_account.php e compare una finestra con titolo “Apri un account di prova di un'applicazione della piattaforma”
  • FBML ▪ FaceBook Markup Language, un sottoinsieme di HTML usato per personalizzare l’apparenza grafica delle applicazioni secondo lo stile FB i tag, gli elementi di base del linguaggio, si riconoscono per la sigla iniziale “fb:” che precede il nome attenzione alle differenze rispetto a HTML non possiamo mettere direttamente un file CSS con la sintassi HTML e il tag <link>, ma stampiamo il tag <style> e al suo interno richiamiamo un file CSS separato, meglio non scrivere direttamente il CSS all'interno per tenere pulito il codice
  • Codice di esempio
  • Iframe ▪ l'iframe (dall'inglese inline frame) è un elemento HTML formato da un normale frame, ma con la differenza di essere un elemento inline (interno) della pagina, non esterno ▪ l'iframe mostra il contenuto di una pagina web, o di una risorsa, all'interno di un riquadro in una seconda pagina principale immagine presa da http://blog.madarco.net/91/build-a- facebook-application-with-zend- framework/
  • Iframe ▪ se usiamo Iframe sfruttiamo un sottoinsieme di FBML per renderizzare alcuni elementi e possiamo eseguire codice Javascript, per esempio per gestire Google Maps o Flash o HTML puro ▪ la scelta tra FBML e Iframe viene fatta nella fase di registrazione nella scheda Canvas Setting voce Modello di restituzione
  • FBJS •versione ridotta di JavaScript per motivi di sicurezza •utile per arricchire le pagine fan con animazioni e form
  • FQL • Facebook Query Language per eseguire query su tabelle predefinite da FB • il sistema delle API di Facebook si basa, nel suo livello più basso di programmazione, su chiamate FQL per avere i dati in modo più efficiente • quando si esegue una chiamata tramite le API si ottengono tutti i dati per una certa interrogazione, non è possibile scegliere cosa avere in risposta ad una determinata richiesta • con FQL questo è possibile,con istruzione SELECT, dove si andranno a definire esattamente i campi dei dati che si vogliono ottenere
  • FQL • Una query FQL può essere utilizzata con PHP, Java, Ruby on Rails creando indipendenza dal linguaggio • la SELECT * … (in SQL restituisce tutti i campi di una tabella) non può essere utilizzata, la clausola FROM può includere una sola tabella, JOIN, GROUPBY, ORDER BY, COUNT, LIMIT, BETWEEN e LIKE non sono supportati • si opera su un insieme di dati in sola lettura per evitare alterazioni del database, le parole chiavi UPDATE, DELETE, INSERT INTO o CREATE TABLE non sono supportate
  • Esempi di query Per eseguire una query con la API fql.query si usa la sintassi: $result_set = $facebook->api_client->fql_query(“SELECT name FROM user WHERE uid=utente_id”); La piattaforma riceve questa stringa e restituisce al client PHP un array, oppure in formato XML o JSON. L'array PHP è nel formato: ( [0] => Array ( [name] => Il nome utente ) ) si può lavorare come per array restituiti dalle chiamate API
  • Tabelle della piattaforma Facebook album album delle foto comment commenti associati ad una feed story cookies Cookies event Eventi event_member membri invitati ad un evento friend amici di un utente friend_request richieste di amicizia dell’utente corrente friendlist lista degli amici dell’utente corrente friendlist_member membri di lista di amici dell’utente corrente group Gruppi group_member membri di un gruppo link link postati dall’utente metrics limitazioni della applicazione
  • Tabelle della piattaforma Facebook note note scritte dall’utente page pagine di fb page_admin informazioni sulla pagina dell’admin dell’applicazione page_fan fan di una pagina di fb permissions permessi dati dall’utente all’applicazione photo Foto photo_tag tag delle foto standar_user_info contiene le info di un utente status ritorna lo stato di un utente user Utenti
  • Esempi di query • Il risultato di una query FQL è, per quanto riguarda PHP, un array associativo, ad esempio: $uid = “123456789”; //NUMERO A 64 BIT $fql = “SELECT name, movies FROM user WHERE uid=$uid”; $res = $fb->api_client->fql_query($fql); echo “<p>”; echo $res[0][“name”] . “ - “ . $res[0][“movies”] . “</p>;
  • Campi indexable • ogni tabella ha campi prefissati chiamati indexable, che possono essere utilizzati nella clausola WHERE • cercare le descrizioni dettagliate delle tabelle • la ragione dell'implementazione dei campi indicizzabili è semplice: evitare l’esecuzione di una query del tipo SELECT uid FROM user WHERE name=”Peter” che restituisce gli user_id di tutti gli utenti di Facebook il cui nome inizia per Peter.
  • Facebook desktop ▪ creare anche delle applicazioni classiche, cioè dei file eseguibili sviluppati con linguaggi ad alto livello compilati per una particolare architettura: C++, C#, Java, Windows Mobile ed altri ▪ Gli utenti possono vedere i dati e fare interventi senza navigare tra le pagine di FB ▪ le librerie client per questi linguaggi non sono supportati dagli sviluppatori di Facebook, a volte le implementazioni delle API non sono complete ▪ libreria client Fantasma C++ Facebook Client http://launchpad.net/fantasma
  • Facebook Connect ▪ si entra nel profilo Facebook con la solita login e password e si può navigare sui siti senza doversi autenticare di nuovo con un'altra login e password ▪ l'identità sociale con cui ci si muove resterà quella creata su Facebook, si potrà interagire con i nostri amici anche nel contesto dell'altro sito una nuova iscrizione o nel ripetere l'autenticazione, nota come single signon
  • OpenStream • lo Stream è il flusso di notifiche che compaiono nel profilo personale o nella pagina fan • possiamo creare un software per leggere/scrivere lo stream nel profilo personale o nella pagina fan • posso automaticamente aggiornare una pagina fan senza entrare in facebook • posso creare giochi, test, applicazioni leggendo le notifiche scambiate con gli amici
  • OpenGraph • il Web come un grande grafo che collega tutto e tutti, che collega persone e cose del mondo, che collega le persone alle persone • nuove funzionalità a disposizione di chi crea siti e contenuti in tutto il Web, per renderlo social, ad uso e consumo di Facebook stessa però • estendere l'ambiente social che si vive in Facebook a tutto il resto del Web, cercando di creare un'esperienza utente unica • qualsiasi sito può diventare parte dell’ecosistema Facebook
  • OpenGraph • nuova visione con Graph API http://developers.facebook.com/docs/api • http://developers.facebook.com/plugins • http://developers.facebook.com/opengraph • http://developers.facebook.com/docs/reference/javascript/ • www.facebook.com/developers/wizard.php • http://opengraphprotocol.org/ standard • andrà a sostituire Facebook Connect
  • OpenGraph • il tasto “like” (“mi piace”), utilizzato nella casella dei commenti, sarà esteso a tutto il Web per permettere agli utenti di esprimere il proprio consenso anche al di fuori di Facebook • direttamente dal nostro quotidiano preferito o dal nostro media player online, potremo alzare il pollice per condividere un articolo o una canzone con i nostri amici • in cambio Facebook si prenderà i nostri dati per distribuirli ai gestori dei siti e dei servizi Web affinché possano confezionarci un’esperienza Web su misura
  • Monetizzare ottenere un guadagno economico dallo sviluppo
  • Monetizzazione dello sviluppo • applicazioni a pagamento su richiesta • inserimento di banner pubblicitari tramite circuiti pubblicitari ( es. RockYou!Ads www.rockyouads.com ) • sponsor • vendita dell’applicazione e del codice • pubblicità targettizzata
  • Diffusione far conoscere al mondo l’applicazione
  • La diffusione virale ▪ le applicazioni si diffondono tra gli utenti attraverso un semplice meccanismo di diffusione virale ho saputo che l’amico ha fatto 100 ora questo gioco anche io per fare 110! interessa ai miei amici che bel gioco! sfido subito i amici ▪ 70% di utenti usa applicazioni, 250 applicazioni hanno più di un milione di utenti ▪ si raggiunge subito un numero elevato di utenti, come 3 milioni di utenti italiani in due settimane!
  • Promuovere l’applicazione inserimento indirizzo URL in motori ricerca inserimento in directory Facebook article marketing http://ow.ly/wMJ4 mio post su Creare, Presentare E Promuovere La Tua Applicazione comunicati stampa partecipazione a blog e forum social bookmarking acquisto di pubblicità usare i business social network per promuoversi
  • Conoscere a fondo i business social network Autore: Roberto Marmo Titolo: Promuoversi con i Business Social Network ISBN: 978-88-8233-858-9 Editore FAG dedicato ai business social network LinkedIn, Viadeo, XING http://www.robertomarmo.net/libro-business.html
  • Misurare per capire cosa è successo ▪ Monthly Active Users (MAU) ▪ numero medio di inviti mandati in un certo periodo ▪ elaborazione di operazioni per accettazione, ignorare, bloccare gli inviti ▪ canvas visualizzati, numero totale e visite uniche ▪ numero di fan, nuovi arrivati e quelli che si sono cancellati ▪ pagine viste ▪ numero di commenti in bacheca
  • Misurare per capire cosa è successo • http://adonomics.com applicazioni di successo e valutazioni economiche
  • (c) 2009 Facebook, Inc. or its licensors. "Facebook" is a registered trademark of Facebook, Inc.. All rights reserved. 1.0