SCHOOL CALCULATOR: PROGETTAZZIONE ED IMPLEMENTAZIONE DI UNA SOCIAL APPLICATION PER FACEBOOK
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
UNIVERSITÀ DEGLI STUDI DI CATANIA
Facoltà di Scienze Matematiche, Fisiche e Naturali
Corso di Laurea in Informatica
SCHOOL CALCULATOR:
PROGETTAZZIONE ED IMPLEMENTAZIONE DI
UNA SOCIAL APPLICATION PER FACEBOOK
Relatore:
Prof. Giuseppe Morelli
Tesi di Laurea di
Emilio SARDO
Matricola n. 667/001127
ANNO ACCADEMICO 2009 / 2010
1
2
INDICE
Introduzione
I. Il fenomeno social network
II. Le caratteristiche sociali di una applicazione
III. Il caso preso in esame School Calculator
IV. Tesi: architettura applicazione
V. Struttura della dissertazione
Capitolo 1 : Progettazione ed implementazione dell'applicazione
1.1 Il Valutatore di espressioni con frazioni
1.1.1 Check della correttezza della sintassi
1.2 La fattorizzazione
1.3 Trasformazione di un numero da decimale a fratto
1.4 Interfaccia grafica ed interazione
Capitolo 2 : Integrazione delle caratteristiche del sociale
2.1 Funzione “mi piace/condividi”
2.2 Privacy ed autorizzazione : accesso ai dati utente di Facebook
2.3 Le funzionalità integrate di notifica e scrittura in bacheca
Capitolo 3 : L'idea del giochino
3.1 Utilizzo di School Calculator per la realizzazione di un gioco
3.2 Mantenimento e condivisione degli score
Capitolo 4
4.1 Risultati ottenuti
4.2 Potenzialità, limiti e possibili sviluppi futuri
Bibliografia
Ringraziamenti
3
4
Introduzione
I. Il fenomeno social network
Nato nel 2004, il web 2.0 segna la trasformazione radicale di internet: la rete, prima
caratterizzata da un utente che usufruiva passivamente delle informazione in essa
contenuta, diventa una piattaforma alla quale l'utente può contribuire attivamente,
condividendo i propri contenuti.
La vera rivoluzione del web 2.0 è il fenomeno social network ( rete sociale ) , all'interno
del quale trova piena realizzazione il bisogno umano di comunicare e stabilire nuove
relazioni sociali. Il più famoso social network è Facebook, lanciato nel 2004 dal
ventenne Mark Zuckerberg con una missione, “Dare alla gente il potere di condividere e
rendere il mondo più aperto e connesso”, più precisamente lo scopo era di permettere
agli ex colleghi universitari di mantenere o ricucire i propri rapporti: da qui il suo nome,
letteralmente “libro delle facce”, e la sua impostazione, basata sullo schema dei tipici
annuari scolastici statunitensi. Si stimano circa 50.000 registrazioni al giorno e 18
milioni di account italiani, oltre a circa 10 miliardi di foto da tutto il mondo.
Il primo aspetto fondamentale è quello relativo alla creazione di un'identità: il singolo,
attraverso la creazione di un proprio profilo personale, diventa membro di un gruppo
omogeneo dal punto di vista degli interessi, dei valori o dei percorsi e delle esperienze
professionali; indipendentemente dalla provenienza geografica, dal sesso, dall'età o
dallo stato sociale. In questo senso, caratteristica innovativa di Facebook è l'assenza
dell'anonimato: per far crescere la rete sociale è necessario iscriversi con il proprio
5
nome, cosi da poter essere rintracciati dai propri amici. Un altro importante aspetto è
costituito dall'utilizzo di un linguaggio comune, ad esempio l'uso esteso delle
emoticons, mediante il quale i vari membri comunicano fra di loro, scambiandosi
informazioni di interesse comune e allargando la cerchia di contatti.
Punto di forza di Facebook è certamente l'interfaccia utente essenziale e semplice da
usare : questo permette a chiunque di crearsi un profilo, anche senza avere particolare
competenza informatica .
La diffusione globale di Facebook è cominciata nel 2007, anno in cui è stata data la
possibilità ai programmatori di software di creare delle applicazioni proprie da inserire
nel proprio profilo e da condividere con altri utenti; cosi ai servizi base del sito si sono
aggiunti innumerevoli servizi creati dagli utenti.
II. Le caratteristiche sociali di una applicazione
Un'applicazione è un programma di vario genere che l'utente può inserire nel proprio
profilo e inviare agli amici del network.
Una prima classificazione permette di dividere le applicazioni in due categorie: quelle
orizzontali e quelle verticali . Le applicazioni orizzontali sono destinate ad un target di
utenti molto vasto , questo permette una più rapida diffusione, ma al tempo stesso
comporta il rischio che l'applicazione abbia vita breve , in quanto spesso sono poco
interessanti o utili. Le applicazioni verticali, invece, si rivolgono ad una cerchia di
utenti più ristretta, hanno vita più lunga, se soddisfano realmente necessità specifiche,
ma sono più difficili da ideare.
6Affinché una applicazione abbia successo, è necessario far crescere la sua comunità di
utenti , tramite ad esempio l'utilizzo di post in bacheca in modo da dare più visibilità
possibile all'applicazione: bisogna però stare attenti a non eccedere per non instillare
nell'utente la percezione di una eccessiva intrusività .
Scopo da perseguire nella creazione dell'applicazione è la fidelizzazione, ovvero il
mantenimento del cliente già acquisito. Per fidelizzare l'utente, si deve innanzitutto
rendere ben chiaro lo scopo per cui l'applicazione è stata sviluppata, creando
un'interfaccia grafica molto semplice che permetta l'immediata comprensione
dell'utilizzo all'avvio e di gestire i dati sociali senza alcuno sforzo. È importante offrire
sempre nuove funzionalità e aggiornamenti dell'interfaccia e permettere all'utente di
creare dati relativi all'applicazione, che possa ritrovare all'utilizzo successivo e
condividere con altri utenti.
È importante, infine, che l'applicazione consenta di risolvere un'esigenza pratica, come
ad esempio aiutare a fare acquisti, a gestire eventi o a risolvere calcoli matematici
complessi con School Calculator.
III. Il caso preso in esame: School Calculator
Nato da un progetto del Centro di Ricerca e Sviluppo Diogenes s.r.l., School Calculator
è un sistema di calcolo di espressioni aritmetiche, che, avendo come target gli studenti
di scuole medie secondarie, si propone di fornire funzionalità innovative a quelle dei
calcolatori classici. La prima e più importante di queste è la risoluzione di espressioni
numeriche frazionarie; l'aspetto innovativo dello School Calculator è che il risultato
7delle espressioni non viene fornito in numero decimale, ma viene formulato in forma
frazionaria o intera.
5 3 2 2
( − )∗2− =
4 4 6 3
Altra funzione dello School Calculator, insolita per un comune calcolatore, è la
fattorizzazione di numeri, ovvero la scomposizione in numeri primi, utile per la
risoluzione di molti dei problemi di matematica con cui si confronta quotidianamente il
target di riferimento.
Terza ed ultima funzione dello School Calculator è la trasformazione dei numeri
decimali, anche periodici, nella loro forma frazionaria.
Volendo, inoltre, dare una connotazione ludica alla caratteristica funzione risolutrice di
espressioni numeriche, si è creato un gioco, con il quale gli utenti possano anche
confrontare i propri risultati con quelli degli amici, dando ulteriore visibilità allo School
Calculator.
IV. Tesi: architettura applicazione
Facebook permette di strutturare applicazioni tramite l'utilizzo di due diverse
tecnologie: iFrame e FBML .
Nel caso di iFrame l'applicazione sarà visualizzata all'interno di una cornice nella
pagina di Facebook che conterrà di fatto l'applicazione web. Questo significa che il
browser la considererà come se fosse completamente separata dal resto degli elementi di
Facebook (testata del sito, elementi pubblicitari e così via). Ad ogni modo, tale
8separazione non sarà così netta ed esisterà un filo sottile che continuerà a tenere legata
l'applicazione a Facebook. Questo filo sottile è rappresentato da strumenti, le API, che
ci permetteranno di continuare ad utilizzare tutte le potenzialità messe a disposizione dal
social network.
Figura 1. Schema di una applicazione con iFrame
Come illustrato in figura 1, il processo di caricamento dell'applicazione avverrà secondo
il seguente ordine:
• l'utente richiama l'applicazione tramite l'URL
• Facebook risponde immediatamente restituendogli elementi propri del social
network (testata, pubblicità, piè di pagina ...);
• il client contatta direttamente il server su cui è ospitata l'applicazione che
eseguirà il codice;
• vengono effettuate le chiamate alle API necessarie ai server Facebook;
• il risultato finale viene, infine, rimandato e mostrato all'utente all'interno
dell'iFrame.
9Mentre nel caso iFrame, Facebook e l'applicazione, grazie all'utilizzo di una cornice che
la contiene, vivono indipendentemente, nell'approccio FBML le due componenti sono
un tutt'uno: all'apertura dell'applicazione ogni elemento della pagina, compresa
l'applicazione stessa, viene caricato sequenzialmente, come se fosse un unico listato di
codice.
Figura 2. Schema di una applicazione con FBML
Inoltre il client non contatta mai il server dell'applicazione direttamente , la richiesta
iniziale è sempre rivolta a Facebook ma in questo caso è Facebook stesso a contattare il
server . Quest'ultimo richiama le API necessarie e risponde con una pagina scritta in un
"HTML arricchito" (FBML o Facebook Markup Language appunto), che viene poi
convertita da Facebook in HTML classico e visualizzata all'utente finale.
Entrambi gli approcci hanno dei punti di forza e la scelta di uno di essi dipende dalle
necessità del programmatore .
Le applicazioni iFrame sono più veloci. Essendo eseguite separatamente dal resto di
Facebook, ogni "cambio pagina" non costringerà a dover ricaricare l'intera schermata.
Questo comporta un sensibile guadagno di tempo, considerando che all'interno della
schermata ci sono anche elementi come la chat, abbastanza esosi in termini di Javascript
e CSS. Un ulteriore vantaggio che hanno le applicazioni iFrame è di lasciarci usare
tutte le librerie esterne che desideriamo (es. Prototype, Jquery, ...).
10Infine, nel caso avessimo già realizzato precedentemente una nostra applicazione web,
l'approccio iFrame è l'ideale, perché ci permetterebbe di incorporarla facilmente
all'interno delle pagine del social network. Le applicazioni FBML non hanno tutti i
vantaggi della soluzione precedente, ma hanno la caratteristica di essere più semplici da
programmare e di sfruttare un maggior numero di strumenti messi a disposizione per
interagire col social network.
Per rendere School Calculator integrabile anche con tecnologie diverse da Facebook,
pensandolo ad esempio come applicazione per iPhone, si è preferito programmarlo con
iFrame, in quanto questo tipo di approccio offre una maggiore flessibilità e
indipendenza.
Figura 3. Schermata iniziale dell'applicazione
L'applicazione si presenta con una schermata iniziale molto semplice e snella in
11modo da facilitare sia il caricamento della stessa che la comprensione immediata
delle funzioni dell'applicazione da parte dell'utente; se cosi non fosse, l'utente
potrebbe rinunciare all'utilizzo già in partenza.
Osservando la figura 3, si può notare la struttura classica di Facebook, con la
barra blu in alto, le inserzione pubblicitarie sulla parte destra ed in fondo la barra
della chat. All'interno di questa struttura si trova l'iFrame, che contiene
l'applicazione. La Home Page è suddivisa in tre parti : la parte superiore, in cui è
presente il logo; la parte centrale, composta dai quattro link che permettono di
accedere alle funzioni dell'applicazione; la parte inferiore, con il bottone “mi
piace”, tipica caratteristica delle pagine Facebook.
V. Struttura della dissertazione ( da rivedere a capitoli conclusi )
Di seguito vengono riportati brevemente gli argomenti trattati nei vari capitoli:
• Il capitolo 1 descrive come sono state progettate ed implementate le funzioni
dell'applicazione, ovvero il valutatore di espressioni, la fattorizzazione e la
trasformazione di un numero da decimale a fratto. Il capitolo tratta inoltre di
come è stata sviluppata l'interfaccia grafica e l'interazione.
• Il capitolo 2 descrive come l'applicazione è stata integrata con le caratteristiche
di Facebook, tramite le principali funzioni del social network più amato.
• Il capitolo 3 descrive come il valutatore di espressioni di School Calculator è
stato utilizzato per la creazione di un gioco .
12Capitolo 1
Progettazione ed implementazione
dell'applicazione
1.1 Il valutatore di espressione con frazioni
La valutazione di un'espressione avviene attraverso tre passaggi principali:
l'analisi lessicale, il parsing ed infine l'esecuzione.
L'analisi lessicale è un processo che permette di trasformare una stringa in input
potenzialmente generica in una serie di simboli con un significato specifico.
L'analisi lessicale avviene tramite uno scanner che si occupa di riconoscere
all'intero della stringa gruppi di caratteri che, indipendentemente dalla loro
posizione, possono avere un significato nell'espressione.
Nel nostro caso accetta espressioni composte da numeri frazionari (rappresentati
come oggetti composti da due numeri interi divisi da una barra), operazioni
aritmetiche e raggruppamento tra parentesi. Lo scanner deve trasformare
l'espressione in input in una lista di gruppi di carattere che saranno identificati
espressamente come frazione, operatore o parentesi . Su questi gruppi di caratteri,
chiamati Token, si andrà poi a basare la successiva fase di parsing. Lo scanner
scarta gli spazi, che non hanno significato in un'espressione, e restituisce una lista
13di Token che riesce a riconoscere. È importante notare che lo scanner ignora completamente se la stringa in input ha una struttura valida o meno. Questo è compito della fase successiva. La fase di "parsing" consiste nel prendere la serie indefinita di Token ed analizzarla per capire se l'espressione che ci si appresta ad eseguire ha una struttura valida. La serie di regole che definiscono se l'input è valido o meno è chiamata grammatica. Il parsing è stato realizzato scrivendo manualmente il codice con una serie di funzioni ricorsive che eseguono determinato codice quando sono sicuri di aver trovato una serie di caratteri validi riconducibili ad una regola accettabile. La fase di Parsing, quindi, valida l'input e se tutto va a buon fine lo trasforma in una struttura dati facilmente analizzabile da un linguaggio. Questa struttura è chiamata AST (Abstract Syntax Tree) e non è altro che un albero in cui ogni foglia è rappresentata da un Token, ed ogni ramo da una regola accettata dalla grammatica. La tecnica usata per la costruzione dell'albero si chiama Recursive Descent Parsing, che prevede l'analisi dei Token in ingresso utilizzando una serie di chiamate a funzione ricorsive; ogni funzione ha come compito quello di accettare una regola, e restituisce un AST valido per quella regola oppure un errore. Dato che le regole possono a loro volta essere rappresentate da altre regole annidate, ad esempio una moltiplicazione può essere composta da due termini che a loro volta sono espressioni, otteniamo la ricorsione. Una volta ottenuta questa struttura, sempre ricorsivamente, vengono eseguiti i vari operatori seguendo le regole delle operazioni tra frazioni. 14
1.1.1 Check della correttezza della sintassi
Come detto nel paragrafo precedente è il parser che si occupa di validare le
espressioni, ma al fine di avere una migliore gestione degli errori, si è preferito
aggiungere un ulteriore controllo della stringa in input.
Questo controllo è stato realizzato in Javascript è viene effettuato al momento
dell'inserimento dei vari caratteri da parte dell'utente. In pratica ogni volta che
l'utente preme un tasto per l'inserimento di un simbolo, viene effettuato un
controllo sul simbolo precedente e il nuovo simbolo viene inserito so se rispetta
determinate condizioni. Per esempio, il simbolo “*” sarà inserito solo se è
preceduto da un numero o da una parentesi chiusa, mentre se il simbolo
precedente è una parentesi aperta o un altro operatore, viene visualizzato un
avviso sullo schermo che avverte dell'errore .
function checkOperPD(input, character) // prodotto e divisione
{
var last = (input.value).charAt((input.value).length - 1) ;
if( ( last == '0' ) || ( last == '1' ) ||
( last == '2' ) || ( last == '3' ) ||
( last == '4' ) || ( last == '5' ) ||
( last == '6' ) || ( last == '7' ) ||
( last == '8' ) || ( last == '9' ) ||
( last == ')' ) || ( last == ']' ) ||
(last=='}') )
{
addChar(input,character);
}
else
{
alert("Attenzione . Non puoi inserire \' " + character + "
\' dopo \' " + last + " \' " ) ;
}
}
15Ultima cosa da verificare è che le parentesi siano tutte correttamente chiuse e che
al momento dell'invio dell'espressione questa non finisca con un operatore, ma
con un numero o una parentesi chiusa . Il controllo delle parentesi viene effettuato
mediante dei contatori che servono sia al controllo della loro parità sia a verificare
che le parentesi siano nel giusto ordine, ovvero che non ci siano parentesi di
ordine superiore in quelle di ordine inferiore, come una parentesi quadra
all'interno di una tonda. I contatori vengono aumentati o diminuiti quando
vengono aperte o chiuse le rispettive parentesi :
function checkTOT()
{
if((ton==0)&&(qua==0)&&(gra==0))
{
var display=document.getElementById("fraz").display.value ;
var last = display.charAt(display.length - 1) ;
if( (last!='+') && (last!='-') &&
(last!='*') && (last!='/') && (last!='') )
{
document.fraz.action ="espressioni.php?emi=1";
return true ;
}
else
{
if(last=='')
{alert("Inserire i dati" ) ; return false ;}
alert("Un espressione non può finire con un
operatore " ) ;
return false ;
}
}
else
{
alert("Ci sono ancora delle parentesi da chiudere" ) ;
return false ;
}
}
16L'ultimo controllo viene effettuato sull'ultimo simbolo, che non può essere un
operatore . In questo modo abbiamo la certezza che l'espressione passata
all'analizzatore lessicale e al parser sia sintatticamente corretta.
1.2 La fattorizzazione
Fattorizzare un numero vuol dire trovare un insieme di numeri che moltiplicati tra
loro diano il numero originario. La maggior parte dei numeri ha svariate possibili
fattorizzazioni, per esempio 12 = 6 x 2 = 4 x 3 = 2 x 2 x 3 , comunemente, però,ci
si concentra solo su una di queste ovvero la fattorizzazione in numeri primi . La
sua importanza sta nel fatto che un qualunque numero naturale ha una ed una sola
fattorizzazione in numeri primi.
La fattorizzazione è alla base di alcune applicazioni informatiche di importanza
cruciale soprattutto nel campo della sicurezza. Infatti l’enorme complessità, in
termini di tempo computazionale, della scomposizione di numeri primi molto
grandi è il principio su cui si basano alcuni algoritmi di crittografia . Lo stato
dell’arte è ancora piuttosto indietro in questo campo, tanto che ancora ci vogliono
computer assai potenti, circa 80 CPU, e svariati mesi per scomporre un numero di
duecento cifre.
Tuttavia, dato che lo scopo di quest'applicazione non è creare sistemi crittografici,
ma bensì andare incontro all'esigenza degli studenti della scuola secondaria, il
problema è stato risolto con il metodo delle divisioni successive .
Questo metodo è stato implementato in PHP da una funzione con un ciclo “for“
17all'interno del quale si prova a dividere il numero con quelli che gli sono inferiori.
Si parte dal numero due e si divide fino a trovare una divisione che dà resto zero,
a questo punto si aggiunge il divisore alla lista di fattori e si richiama
iterativamente la funzione sul nuovo numero ottenuto. Quando arriveremo ad
avere come risultato uno , il risultato sarà la lista di fattori primi .
//codice per la fattorizzazione di un numero
Siamo sicuri che tutti i fattori siano numeri primi perché dividendo sempre a
partire da due si ha la certezza che se una divisione ha resto zero , vuol dire che è
la prima possibile.
181.3 Trasformazione di un numero da decimale a fratto
Questa funzione è stata implementata in PHP seguendo le regole matematiche
della trasformazione di un numero decimale nella sua forma frazionaria.
Le regole in questione sono due e dipendono dal fatto che il numero decimale sia
periodico o no. Nel caso di un numero decimale non periodico la formula da
applicare è la seguente :
xxyy
xx , yy = numerodi y
(10)
dove le x sono le cifre intere e le y quelle decimali. Il risultato sarà dato quindi da
tutte le cifre al numeratore ed al denominatore un 1 con tanti zeri quante sono le
cifre decimali.
Per quanto riguarda un numero decimale periodico, la formula da applicare per la
trasformazione è leggermente più complicata :
xxyypp−xxyy
xx , yy ( pp)=
9900
dove le p sono le cifre periodiche . Quindi la frazione risultante avrà al
numeratore tutte le cifre meno tutte quelle non periodiche e al denominatore tanti
nove quante sono le cifre periodiche e tanti zeri quante sono le cifre decimali,
escluse quelle periodiche.
function trasforma($int,$dec,$per)
{
if($dec!=null)
{
if($per==null)
{
$den=10 ;
$num=$int.$dec ;
19for($i=1;$i
$neg=-1;
}
if($Ad$risultato=$An."/".$Ad ;
return $risultato ;
}
// codice per la riduzione ai minimi termini di una frazione
1.4 Interfaccia grafica e interazione
L'interfaccia grafica è stata concepita in modo da rispettare le principali proprietà
che un applicazione di una rete sociale deve avere:
• il logo è collocato nella stessa posizione in tutte le pagine, in modo che l'identità
della applicazione sia sempre chiara e presente;
• la prima interfaccia di avvio è semplice e con le funzioni ben visibili, in modo
da non scoraggiare l'utente al primo utilizzo e comunicare chiaramente lo scopo
dell'applicazione;
• il tasto “mi piace/condividi” è facilmente riconoscibile cosi come le foto degli
amici che già hanno condiviso l'applicazione, rendendo al massimo l'esposizione
sociale e la facilità di condivisione dei contenuti.
Le funzioni di trasformazione e fattorizzazione si presentano con uno stile molto simile:
Figura 1.1 Schermate fattorizzazione e trasformazione
oltre al logo e al link per la home page , troviamo un form per inserire i dati ed un
22bottone per effettuare l'operazione. Al click sul bottone corrisponde un refresh della
pagina con l'aggiunta del risultato dell'operazione voluta.
Per quanto riguarda la funzione di risoluzione di espressioni, l'interfaccia si presenta in
modo totalmente diverso:
Figura 1.2 Screenshoot risolutore di espressioni
anche in questo caso abbiamo logo e link per la home page in alto, come per tutte le
pagine, è presente inoltre un'area di testo nella quale vengono visualizzati i dati inseriti
tramite i bottoni della calcolatrice. Quest'ultimi sono disposti come in una normale
calcolatrice, unica differenza è il bottone “inserisci frazione” che permette l'inserimento
del numero nella sua forma fratta. Ad ogni pressione dei bottoni il dato corrispondente
viene inserito nell'area di testo solo se passa il controllo della correttezza della sintassi,
altrimenti viene visualizzato un messaggio di errore ed il dato non viene inserito.
Un ultimo test del correttezza della sintassi viene effettuato alla pressione del tasto
23“calcola”, a cui corrisponde un refresh della pagina con l'aggiunta, anche in questo caso, del risultato dell'espressione. 24
Capitolo 2
Integrazione delle caratteristiche del sociale
2.1 Funzione “mi piace/condividi”
Il tasto “mi piace/condividi” su Facebook è la principale forma di condivisione di
un contenuto ( applicazione, foto, evento … ) e permette ad un utente di segnalare
a tutti i propri amici il proprio interesse verso una particolare pagina.
Fino a poco tempo fa le due funzioni, “mi piace” e “condividi”, erano separate,
ultimamente però Facebook ha potenziato il pulsante “mi piace” assorbendo di
fatto la funzione “condividi”: adesso cliccando su “mi piace” si dà origine a un
feed nella propria bacheca, con tanto di foto, titolo, link e sommario , e si può
commentare l'oggetto che si è apprezzato. Con questo nuovo sistema i contenuti
segnalati diventano maggiormente visibili in bacheca ed inoltre c'è una riduzione
dei pulsanti sociali nelle applicazioni , potendo cosi sfruttarne uno solo per un
preciso scopo.
Il codice per l'aggiunta del pulsante viene fornito da Facebook stesso ed è
personalizzabile a seconda delle preferenze dello sviluppatore.show_faces=true&
width=450&
action=like&
colorscheme=light&
height=80"
scrolling="no"
frameborder="0"
style= " border:none;
overflow:hidden;
width:450px;
height:80px;"
allowTransparency="true">
Nel nostro caso si è preferito la versione standard del bottone con il testo per
intero, in cui è riportato il numero di utenti su Facebook a cui piace
l'applicazione, ed inoltre la visualizzazione delle immagini personali degli amici
che hanno già condiviso l'interesse per l'applicazione.
262.2 Privacy ed autorizzazione : accesso ai dati utente di Facebook
Il primo contatto che l'utente ha con l'applicazione è la richiesta di autorizzazione
che viene visualizzata la prima volta che si accede all'applicazione stessa . In
questa richiesta, necessaria per il rispetto della privacy dell'utente, chiediamo il
permesso di effettuare determinate operazioni. Nel nostro caso l'autorizzazione
che viene visualizzata è la seguente :
in questo modo chiediamo il permesso di accedere alle informazioni di base
dell'utente ( nome, immagine personale, amici … ) e di pubblicare notifiche sulla
sua bacheca .
È importante che la richiesta non risulti troppo invasiva in modo da non
spaventare l'utente sulle conseguenze di tale autorizzazione, che porterebbe a
desistere dall'utilizzo dell'applicazione prima ancora di averne effettuato l'accesso.
27Per questo motivo le autorizzazioni sono strettamente limitate alle azioni che lo
School Calculator esegue al momento. In ogni caso tale autorizzazioni sono
modificabili qualora ci fosse l'intenzione di integrare l'applicazione con funzioni
aggiuntive, come l'invio di email. Questo tipo di scelta comporterà un ulteriore
richiesta al prossimo accesso dell'utente dopo la modifica delle impostazioni.
2.3 Le funzionalità integrate di notifica e scrittura in bacheca
Come descritto nel paragrafo precedente, a questo punto abbiamo il permesso di
accedere ai dati utente e di pubblicare sulla sua bacheca. Per quanto riguarda
l'utilizzo dei dati personali vedremo nel capitolo 3 come ci servirà per ottenere
nome e cognome dell'utente al momento di compilare la classifica del gioco,
approfondiamo, invece, come useremo la possibilità di pubblicare elementi sulla
bacheca dell'utente per dare più visibilità possibile all'applicazione.
Ogni volta che l'utente esegue un operazione tramite lo School Calculator, sia
questa la risoluzione di un espressione o una fattorizzazione, viene pubblicato
sulla bacheca dell'utente un messaggio:
28questo riporta il logo dell'applicazione, l'operazione che è stata effettuata, in
questo caso la fattorizzazione, ed un invito a provare lo School Calculator.
Il messaggio apparirà sul profilo dell'utente e sulla scheda “home” di tutti gli
amici dell'utente, costituendo un link diretto all'applicazione: cliccando infatti
sulla notifica si verrà reindirizzati alla pagina dell'applicazione.
L'implementazione della notifica è effettuata in PHP tramite la chiamata ad una
specifica funzione della classe Facebook :
$fb->streamPublish
( "Ho usato School Calculator per fattorizzare un numero ",
"http://apps.facebook.com/school_calculator/",
“Provate School Calculator",
"http://www.emiliosardo.altervista.org/img/school_calculator.jpg"); ;
che permette di impostare la frase, l'indirizzo dell'applicazione, il commento al
post e l'immagine da visualizzare come anteprima.
2930
Capitolo 3
L'idea del giochino
3.1 Utilizzo di School Calculator per la realizzazione di un gioco
Figura 3.1 Screenshoot del gioco
Fino a questo punto l'applicazione ha una connotazione prettamente didattica ed ha
come unico scopo quello di aiutare l'utente nella risoluzione di esercizi matematici. Si è
pensato allora di sfruttare il valutatore di espressioni di School Calculator per creare un
31gioco in cui gli utenti potessero confrontare la loro bravura nel risolvere semplici
espressioni con frazioni. Il gioco, oltre a dare anche una connotazione ludica
all'applicazione, si pone come obbiettivo quello di aumentarne l'esposizione sociale. Ad
ogni partita il risultato ottenuto viene pubblicato sulla bacheca, fornendo sia una
maggiore visibilità all'applicazione che un incentivo per gli amici dell'utente a battere il
punteggio massimo.
L'implementazione è stata fatta in Javascript, data la natura real-time del gioco, in modo
da gestire al meglio il conto alla rovescia e l'aggiornamento del punteggio da una parte e
gli avvisi sulla correttezza delle risposte date dall'altra.
Il gioco è strutturato come un quiz a tempo, in cui l'utente deve rispondere dando il
corretto risultato all'operazione mostrata. L'utente ha a disposizione 60 secondi per
risolvere quante più espressioni possibili e ad ogni risposta esatta il punteggio ed il
livello aumentano.
setInterval( function()
{
if (seconds == 1)
{
alert( "Hai fatto " + point + " punti ");
document.getElementById('seconds').innerHTML = --seconds;
if (seconds == 0)
{
location = "classifica.php?flag="+ point ;
}
}
if (seconds > 1)
{
document.getElementById('seconds').innerHTML = --seconds;
}
}, 1000 );
// codice Javascript per il conto alla rovescia
32Mentre le prime operazioni sono abbastanza facili, dato che le frazioni hanno lo stesso
denominatore, dopo il quinto livello le operazioni saranno più complicate ed
impegneranno sempre più l'utente.
function check()
{
Sn=document.getElementById("calc").Sn.value;
// Numeratore della soluzione
Sd=document.getElementById("calc").Sd.value;
// Denominatore della soluzione
if(Sd=="")
{Sd=1;}
// Controllo se esiste il denominatore
if((An==Sn)&&(Ad==Sd))
{
alert('Bravo . Risultato Esatto');
document.getElementById('point').innerHTML = ++point ;
// assegnamento nuovi valori random alla domanda
emi1 = Math.round( 10 * Math.random() ) ;
if((emi1=="0")||(emi1=="1") )
{ emi1+=2 ; }
//prima del livello 5 i due denominatori sono uguali
if(livello3.2 Mantenimento e condivisione degli score
Alla conclusione di ogni partita viene condiviso sulla bacheca comune un messaggio
che contiene il risultato ottenuto nella partita ed un invito a batterlo.
Figura 3.2 Notifica del risultato del gioco
In questo modo gli amici dell'utente sono informati dell'esistenza del gioco e
stimolati a gareggiare per battere il risultato.
$fb->streamPublish(
"Ha giocato a School Calculator game , ottenendo ".$punti.
"punti . Riesci a fare meglio? ",
"http://apps.facebook.com/school_calculator/",
"Provate School Calculator",
"http://www.emiliosardo.altervista.org/img/school_calculator.jpg"
); ;
// codice PHP per la notifica del risultato della partita
Inoltre si viene reindirizzati automaticamente alla pagina di riepilogo, dove viene
visualizzato il punteggio ottenuto nella partita appena conclusa, con un confronto
con il miglior punteggio precedentemente ottenuto, e la classifica totale del gioco,
in modo da poter confrontare il proprio punteggio con quelli degli altri utenti.
34Figura 3.3 Screenshoot della classifica del gioco
Per realizzare la classifica si è usato un Database SQL . La tabella classifica viene
creata alla prima esecuzione del gioco tramite un controllo che ne verifica la
presenza .
mysql_connect("*****", "******", "******");
$tabella = mysql_query("
SELECT * FROM `my_emiliosardo`.`classifica`
");
$table = mysql_fetch_assoc($tabella);
if(!$table)
{
mysql_query("
35CREATE TABLE `my_emiliosardo`.`classifica`
(id VARCHAR(50) ,
nome VARCHAR(50) ,
cognome VARCHAR(50) ,
punti INT(4) )
");
}
// Codice PHP e MySQL per la creazione della tabella
Una volta creata la tabella, si recuperano i dati dell'utente tramite la funzione
della classe Facebook
$utente = $fb->getUserInfo() ;
che ritorna un array dal quale recuperiamo nome e cognome dell'utente .
$nome=$utente['first_name'];
$cognome=$utente['last_name'];
A questo punto abbiamo tutti i dati necessari per poter aggiornare la tabella
classifica, che contiene una riga per ogni utente che ha giocato.
Tramite delle query SQL andiamo a verificare se esiste un punteggio precedente,
in caso contrario inseriamo una nuova riga per l'utente. Se già esiste un punteggio
precedente verifichiamo se questo è maggiore od inferiore al risultato appena
ottenuto . Se necessario, quindi, andremo ad aggiornare la tabella con il nuovo
punteggio:
36$punti=$_GET['flag'] ;
echo "Hai totalizzato ".$punti." punti ." ;
$best = mysql_query("
SELECT * FROM `my_emiliosardo`.`classifica`
WHERE nome = '$nome'
");
$est = mysql_fetch_assoc($best);
if(!$est)
{
mysql_query("
INSERT INTO `my_emiliosardo`.`classifica`
( nome , cognome , punti )
VALUES ('$nome', '$cognome', '$punti');
");
}
if($est['punti']>=$punti)
{
echo "Mi dispiace ".$nome." , non hai migliorato .
Il tuo miglior punteggio è ".$est['punti']." punti ." ;
}
else
{
echo "Bravo ".$nome." , hai migliorato il tuo vecchio
punteggio ." ;
mysql_query("
UPDATE `my_emiliosardo`.`classifica`
SET punti=`$punti`
WHERE nome='$nome'
AND cognome='$cognome';");
}
// codice PHP e MySQL per l'aggiornamento della classifica
37Infine si richiama un ultima query SQL per visualizzare la tabella, ordinata per
punteggio in ordine decrescente:
$res = mysql_query("
SELECT * FROM `my_emiliosardo`.`classifica`
ORDER BY punti desc");
$i=1;
while ($es = mysql_fetch_assoc($res))
{
echo
" ".$i."
".$es['nome']."
".$es['cognome']."
".$es['punti']."
" ;
$i ++ ;
}
// codice PHP e MySQL per la visualizzazione della classifica
38Capitolo 4
Conclusione
4.1 Risultati Ottenuti
Il risultato finale dell'applicazione risponde a tutte le specifiche che in partenza
erano state prefissate. L'interfaccia grafica è risultata molto semplice ed
immediata, cosi da garantire una notevole facilità di utilizzo. Inoltre , sia il
valutatore di espressioni che le funzioni di fattorizzazione e trasformazione,
offrono un aiuto nella risoluzione di una esigenza pratica, come quella degli
studenti della scuola secondaria impegnati nello studio della matematica.
4.2 Limiti e possibili sviluppi futuri
Un limite dell'applicazione è la semplicità del gioco, che potrebbe essere più
dettagliato e fornire nuovi livelli di difficoltà, in modo da aumentare l'esperienza
di gioco e dare una vita più lunga e duratura all'applicazione nella sua
connotazione ludica.
In futuro si potrebbe sviluppare l'applicazione School Calculator in una
piattaforma diversa da Facebook, come per esempio la tecnologia dello smart
phone della apple iPhone. Lasciando tutte le funzionalità già presenti si potrebbe
cosi dare maggiore visibilità all'applicazione, aumentando il bacino di utenza.
39Bibliografia
• A. Iacubino, R. Marmo, Creare applicazioni per Facebook
edizioni FAG Milano
• Guida Applicazioni Facebook in PHP
www.php.html.it
• Espressioni Matematiche in PHP
www.php.html.it
• www.wikipedia.it
40Ringraziamenti
Desidero innanzitutto ringraziare il Professore Giuseppe Morelli, per i suoi
preziosi insegnamenti e per le numerose ore dedicate alla mia tesi. Grazie per
l'occasione che mi ha concesso e per il contributo fondamentale che ha dato al
mio lavoro.
Ringrazio, inoltre, il Cento di Ricerca e Sviluppo Diogenes S.r.l., che ha ideato il
progetto di questa tesi e che mi ha dato la possibilità di misurarmi con un tema così
innovativo.
Questa laurea la dedico soprattutto a mio padre, che ha sempre creduto in me e che oggi
gioirà da lassù. Grazie di tutto.
Un ringraziamento particolare va a mia madre, che ha avuto la pazienza di supportarmi
così a lungo e che non mi ha mai fatto mancare il suo sostegno più sentito.
Ringrazio tutti gli amici che mi hanno seguito, da vicino e da lontano, durante l'intero
corso di studi e che sono stati partecipi di ogni soddisfazione, ma anche di ogni mia
disavventura universitaria.
Ringrazio, infine, tutti i compagni di studio con i quali ho condiviso questo percorso, che
hanno reso questa faticaccia un po' meno dura.
41Puoi anche leggere
