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

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

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

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

6. Agenda
informatica concetto di interfaccia
di base applicazione sociale
piattaforma di
Graph API sviluppo
Open monetizzare
Stream
diffondere
FBML FBJS FQL

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

8. Informatica di base
necessaria per partire

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

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

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

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

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

14. Concetto di applicazione

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

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

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

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

19. 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?

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

21. Interfaccia sociale

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

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

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

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

26. Piattaforma di sviluppo

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

28. 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à

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

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

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

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

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

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

35. Fase di registrazione
▪ Prima parte del processo

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

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

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

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

40. 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”

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

42. Codice di esempio

43. 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/

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

45. FBJS
•versione ridotta di JavaScript per motivi di sicurezza
•utile per arricchire le pagine fan con animazioni e form

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

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

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

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

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

51. 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>;

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

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

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

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

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

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

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

59. Monetizzare
ottenere un guadagno economico dallo
sviluppo

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

61. Diffusione
far conoscere al mondo l’applicazione

62. 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!

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

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

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

66. Misurare per capire cosa è successo
• http://adonomics.com applicazioni di successo e valutazioni
economiche

67. (c) 2009 Facebook, Inc. or its licensors. "Facebook" is a registered trademark of Facebook, Inc.. All rights reserved. 1.0