Presentazione a Facebook Developer Garage di Venezia su creare applicazioni per facebook, prima parte: la cassetta degli attrezzi.

2. 2

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

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

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

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

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

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

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

10. Cosa è un’applicazione

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

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

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

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

15. Conoscenze di informatica
necessarie per partire

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

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

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

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

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

21. La piattaforma di sviluppo

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

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

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

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

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

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

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

29. Percorso di sviluppo

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

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

32. Fase di registrazione
▪ Prima parte del processo
32

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

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

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

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

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

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

39. Il linguaggio FBML, Iframe,
Connect

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

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

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

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

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

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

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

47. Facebook Connect
47

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

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

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