Post on 01-Nov-2014
description
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