2

Cominciare a programmare
Facebook
La cassetta degli attrezzi
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
Angelo Iacubino
Facoltà di Scienze MM.FF.NN. Università Insubria Como
www.disinformatica.com www.facebook.com/disinformatica

Agenda ore 11-12
1 cosa è un’applicazione
2 conoscenze di informatica necessarie per partire
3 la piattaforma di sviluppo
4 percorso di sviluppo
5 il linguaggio FBML, Iframe, Connect

Agenda
SECONDA PARTE ORE 14-15
6 programmazione con un esempio completo
7 realizzazione di interfaccia
8 FQL per leggere il database Facebook
A SEGUIRE L’INTERVENTO DI GIOIA FELIZIANI SUL MARKETING

Agenda futura
Quali sono gli argomenti che consigliate per prossimi
? eventi?
? Più introduttivi per i meno esperti o più approfonditi?

Chi siamo
▪ A febbraio 2009 ho letto una rivista di
informatica e ho avuto la spinta a cercare
informazioni sulla programmazione
▪ Non c’erano libri in italiano
sull’argomento
▪ Ho chiamato il mio amico Angelo,
editore FAG ISBN 978-88-8233-814-5
abbiamo contattato gli editori
prezzo: 19,90 euro
▪ A giugno 2009 esce il libro
▪ A fine luglio leggo il sito Venezia Camp e www.facebook.com/creare.applicazioni
scrivo a Guido Nardo per presentarci
gruppo http://tinyurl.com/crea-app-FB
mio sito www.robertomarmo.net
7

Altre risorse per approfondimenti
Come fare marketing, guadagnare soldi, potenziare l'immagine, fare
cause related marketing con le applicazioni in Facebook:
Strategie, Strumenti & Esempi utili.
Riferimenti:
info@robertomarmo.net
http://www.madri.com/cgi-bin/3a/click.pl?id=2585&p=facebook

Altre risorse per approfondimenti
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

Cosa è un’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
11

Il concetto di applicazione
Le caratteristiche sociali di un’applicazione sono:
▪ comunicare l’uso ai nostri amici per creare diffusione virale
▪ creare una interazione complessa e prolungata per giungere a nuove relazioni
tra gli utenti
▪ 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
▪ esposizione sociale per far vedere all’utente quale suo amico ha usato
l’applicazione e quali risultati ha ottenuto
12

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
13

Il concetto di applicazione
alcuni consigli per la realizzazione:
▪ dimostrare chiaramente lo scopo dell'applicazione
▪ 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
▪ mostrare visivamente l'identità dell'applicazione attraverso il logo
▪ dare un senso di completamento dell'opera, per esempio nel caso di un gioco
fare arrivare alla fine del gioco
▪ creare dei dati relativi alla specifica applicazione, per ritrovarli al prossimo uso
o condividerli con altri utenti
14

Conoscenze di informatica
necessarie 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
16

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 che permette la manipolazione
delle risorse con i metodi GET, POST, PUT e DELETE del protocollo HTTP
▪ REST ruota intorno al concetto di risorsa, che diventa il protagonista di un
network di servizi
▪ i metodi delle API sono chiamati attraverso richieste fatte via GET o via POST
ai server di Facebook
17

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
18

Consigli per interfaccia grafica
▪ Ricordate i concetti di usabilità dell'interfaccia grafica
▪ Ricordate 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
19

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
20

La piattaforma di sviluppo

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
22

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
23

Scelta del server
▪ Il punto più delicato e costoso riguarda 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
▪ Alcune risorse per trovare server
▪ http://socialup.top-ix.org/ programma nato dalla partecipazione di TOP-IX al
Social Application Program di Sun Microsystems, gli sviluppatori possono
far risiedere l'applicazione su una macchina virtuale gratuitamente 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
24

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
- about page per descrivere l’applicazione
- menu applicazioni scelte dall’utente
- allegati dei messaggi ( tramite posta di FB o tramite un wall post)
- notifiche
25

Datastore
▪ FB consente agli sviluppatori di salvare le informazioni utilizzate dalle
applicazioni in un database chiamato DataStore
▪ è possibile memorizzare i dati necessari senza procurare un database su un
server esterno e consentendo così un forte risparmio
▪ Sistema è ancora in fase beta e non pienamente utilizzabile
▪ A pagamento si può considerare Amazon S3, il servizio di internet storage del
sito Amazon
▪ Tutorial su http://www.dereksantos.ca/?cat=13
26

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
27

Gestire la privacy
▪ Fai sapere all’utente
che può gestire la sua
privacy e non deve
avere la paura di
aggiungere la
applicazione perché gli
ruba i dati!
▪ Essere molto chiari su
quali dati dei profili
vengono usati
28

Percorso di sviluppo

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
30

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
31

Fase di registrazione
▪ Prima parte del processo
32

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
33

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
34

Fase di registrazione
Cliccando a sinistra sulla voce “Modelli” si accede ad altre opzioni del canvas
e degli URL
Ogni applicazione viene identificata dagli utenti 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” edurante 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
In fondo alla scheda della nostra applicazione c'è il link: "Get started quickly
with some example code“ per una schermata con un primo esempio
35

Deploy
Dopo aver scritto nel proprio computer tutto il codice necessario avviene la fase
deployment, oppure deploy
Si effettuare 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
36

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

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
▪ http://adonomics.com fornisce elenchi di aziende di successo con le relative
applicazioni e valutazioni economiche
38

Il linguaggio FBML, Iframe,
Connect

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
40

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

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 FaceBook JavaScript, libreria per utilizzare Javascript nelle applicazioni
42

Static FBML
▪ Applicazione utile per usare HTML e aggiungere un box a sinistra nel profilo,
aggiungere un tab nella riga Bacheca, info ecc
▪ Permette di inserire qualsiasi tipo di contenuto statico immagini e link sotto
forma di codice HTML personalizzato
▪ http://www.facebook.com/apps/application.php?id=4949752878
43

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 hanno la possibilità di vedere i dati e fare interventi senza navigare tra
le pagine del social network
▪ Le librerie client per questi linguaggi non sono supportati direttamente dagli
sviluppatori di Facebook, in alcuni casi le implementazioni delle API non sono
complete
▪ Libreria client Fantasma C++ Facebook Client http://launchpad.net/fantasma
44

Facebook Connect
▪ Integrare un qualsiasi altro sito con Facebook o viceversa, ovvero usare la
propria identità per integrare funzionalità sociali offerte da altri siti
▪ Si entra nel proprio profilo Facebook con la solita login e password e si può
navigare sui siti che offrono questa tecnologia senza doversi autenticare di
nuovo con un'altra login e password
▪ L'identità sociale con cui ci si muove resterà comunque quella creata su
Facebook, per cui si potrà interagire con i nostri amici anche nel contesto
dell'altro sito
▪ Il principale vantaggio per l'utente consiste nell'evitare una nuova iscrizione o
nel ripetere l'autenticazione, funzionalità definita come single signon.
45

Facebook Connect
▪ Il meccanismo di funzionamento classico della piattaforma è: l'utente esegue
chiamate API verso Facebook ed ottiene direttamente una risposta
▪ Il meccanismo di funzionamento di Connect, invece, avviene così:
1. l'utente manda la richiesta al sito esterno
2. il sito manda una richiesta a Facebook tramite API
3. API callback da Facebook verso il sito
4. il sito manda la risposta all'utente.
46

Facebook Connect
47

Facebook Connect
▪ L’identità Facebook e l’identità nel sito esterno diventano una sola cosa
▪ Per confrontare le due identità, magari per recuperare alcune impostazioni
registrate nel sito, occorre capire di quale persona si tratta.
▪ Si possono unire i dati depositati nel profilo e nel sito tramite il confronto
dell’indirizzo email criptato non nota al sito per evitare creazione di spam,
meccanismo proxied email
▪ Si chiede a Facebook di inviare l'email per conto del sito tenendo presente ha i
seguenti limiti di invio: 100 destinatari al massimo, niente allegati, nessun uso
del campo CC.
48

Centro competenza interdisciplinare su social
network
Laboratorio di ricerca formato da un network di Università per studiare i social
network dai punti di vista tecnologico, sociale, comunicativo, identitario, legale
ecc.
Stiamo aprendo un luogo virtuale per raccogliere le esperienze delle persone
sull'uso dei social network.
In corso di scrittura uno schedario delle applicazioni Facebook e una wiki sulla
sicurezza informatica al tempo di Facebook.
Siete invitati a partecipare!!
Riferimenti:
info@robertomarmo.net www.robertomarmo.net
49

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