Facebook Developer Garage Venezia Prima Parte

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, abbiamo contattato gli editori editore FAG ISBN 978-88-8233-814-5 ▪ A giugno 2009 esce il libro prezzo: 19,90 euro ▪ A fine luglio leggo il sito Venezia Camp e scrivo a Guido Nardo per presentarci www.facebook.com/creare.applicazioni gruppo http://tinyurl.com/crea-app-FB mio sito www.robertomarmo.net 7

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 9

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 10

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 11

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 12

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 14

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 15

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 16

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 17

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 18

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 20

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 21

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 22

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 23

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 24

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 25

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 26

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 28

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 29

Fase di registrazione ▪ Prima parte del processo 30

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 31

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 32

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 33

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 34

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

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 36

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 38

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 ▪ Tutorial su http://blog.madarco.net/91/build-a-facebook-application-with-zend-framework/ 39

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 40

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 41

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 42

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

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

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

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 46

Facebook Developer Garage Venezia Prima Parte

0 comments

Notes on slide 1

3 Favorites