2

Cominciare a programmare Facebook

La cassetta degli attrezzi

Roberto MarmoFacoltà di Ingegneria Università di Pavia, Facoltà di Scienze MM.FF.NN. Università InsubriaComowww.robertomarmo.net info@robertomarmo.net www.facebook.com/roberto.marmo

Angelo IacubinoFacoltà di Scienze MM.FF.NN. Università Insubria Comowww.disinformatica.com www.facebook.com/disinformatica

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 ore 11-12

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

? Quali sono gli argomenti che consigliate per prossimi eventi?

? Più introduttivi per i meno esperti o più approfonditi?

Agenda futura

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, abbiamo contattato gli editori

▪ A giugno 2009 esce il libro

▪ A fine luglio leggo il sito Venezia Camp e scrivo a Guido Nardo per presentarci

editore FAG ISBN 978-88-8233-814-5

prezzo: 19,90 euro

www.facebook.com/creare.applicazioni

gruppo http://tinyurl.com/crea-app-FB

mio sito www.robertomarmo.net

Altre risorse per approfondimentiCome 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 MarmoTitolo: Promuoversi con i Business Social NetworkISBN: 978-88-8233-858-9Editore FAG

dedicato ai business social network LinkedIn, Viadeo, XING

http://www.robertomarmo.net/libro-business.html

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

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

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

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

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

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

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

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

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

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

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

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

25

I punti di integrazionePer far conoscere l’applicazione bisogna inserirla in:

- canvas, lo spazio di visualizzazione largo 760 pixel disegnabiledall’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

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

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

28

Gestire la privacy

▪ Fai sapere all’utenteche 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

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

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

32

Fase di registrazione▪ Prima parte del processo

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

34

Fase di registrazioneCreazione Application ID, Chiave API (apikey) e Invisibile

per autenticare la propria applicazione sui server della piattaformaImportante compilare le informazioni di contatto e assistenza per fare chiarezza

su chi è l’autoreImportante la descrizione delle funzioni offerte per fare chiarezza su cosa

realizza l’applicazione

35

Fase di registrazioneCliccando a sinistra sulla voce “Modelli” si accede ad altre opzioni del canvas

e degli URLOgni applicazione viene identificata dagli utenti con un indirizzo chiamato

Canvas Page URL ed organizzato comehttp://apps.facebook.com/codice_applicazioneQuando 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 softwareNelle impostazioni avanzate scegliere la “Modalità protetta” edurante lo

sviluppo solo lo sviluppatore avrà accesso all’applicazioneNel riquadro di riepilogo cliccare su Guarda la pagina di presentazione che

deve essere curata con tutti i dettagli su autore e obiettivi dell'applicazioneIn fondo alla scheda della nostra applicazione c'è il link: "Get started quickly

with some example code“ per una schermata con un primo esempio

36

Deploy

Dopo aver scritto nel proprio computer tutto il codice necessario avviene la fase deployment, oppure deploySi effettuare la messa online e aggiornamento della soluzioneOccorre pertanto trasferire il codice sul server messo a disposizione dal servizio

di hostingSSH (Secure SHell, shell sicura) è un protocollo che permette di stabilire una

sessione remota cifrata con un altro host

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

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

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 FBI tag, gli elementi di base del linguaggio, si riconoscono per la sigla iniziale

“fb:” che precede il nomeAttenzione alle differenze rispetto a HTMLNon 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

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/

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

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

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

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.

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.

47

Facebook Connect

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.

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

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