Dopo aver raccolto i requisiti richiesti dall’applicazione, si è passati alla fase di progettazione del sistema. Come prima cosa sono stati preparati i mockup a livello di interfaccia in modo da poter posizionare tutti gli elementi grafici necessari per il gioco[1].
Figura 3.2 Primo mockup della struttura del sito
In seguito alla fase di design del mockup si è formulata un’ipotesi di interfaccia per la visualizzazione di una domanda reale con la foto e le risposte alternative.
Figura 3.3 Mockup della struttura di una domanda
L’ultima fase del design ha riguardato la progettazione e realizzazione del logo del sito. Considerando il periodo di svolgimento del gioco e la vocazione agli sport invernali della Val di Fiemme, si è stabilito l’utilizzo di colori freddi che riportassero alla mente il concetto della montagna di inverno.
Figura 3.4 Logo del sito VinciFiemme
La seconda fase della progettazione ha riguardato la scelta della struttura dati ottimale per poter archiviare le informazioni ed è stato realizzato un database E/R adatto allo scopo.
I principi guida per la progettazione del database sono stati i seguenti:
- Un utente, all’atto dell’iscrizione, deve indicare la propria provincia di residenza.
- Ogni provincia può avere nessuno o più utenti che vi risiedono.
- Ogni provincia appartiene a una regione.
- Una regione ha più provincie.
- Un utente può portare a termine una sola sessione di gioco[2].
- Una sessione di gioco è relativa a un solo utente.
- Ogni domanda riguarda zero o più sessioni di gioco.
- Una sessione di gioco è composta da zero o più domande.
- Ogni domanda ha sei possibili risposte alternative.
- Ogni risposta fa riferimento a una sola domanda.
Partendo da queste informazioni di base relative alla struttura delle relazioni tra le entità del progetto, si sono realizzate le seguenti tabelle:
- Users: contiene le informazioni relative all’utente
- User_sessions: contiene le informazioni relative alla sessione di gioco dell’utente
- Questions_sessions: contiene le informazioni riguardanti le singole risposte date dall’utente per ogni domanda proposta dal sistema
- Questions: contiene le domande del gioco
- Answers: contiene le risposte alle domande
- Provinces: contiene le informazioni sulle provincie
- Regions: contiene le informazioni sulle regioni
- Bitly_links: contiene le informazioni sugli url personalizzati relativi agli utenti in forma di short url[3]
Dopo aver identificato le entità, si è analizzato il dettaglio di ogni tabella con la descrizione di tutti i campi.
|
users |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| name | Nome dell’utente |
| surname | Cognome dell’utente [non utilizzato] |
| city | Città di residenza dell’utente |
| address | Indirizzo di residenza dell’utente [non utilizzato] |
| province_id | Chiave esterna tabella provinces |
| zip | Codice di avviamento postale |
| phone | Telefono dell’utente [non utilizzato] |
| Email dell’utente | |
| password | Password crittata scelta dall’utente in fase di registrazione |
| personal_code | Stringa alfanumerica identificativa dell’utente |
| referral_code | Stringa alfanumerica identificativa dell’utente presentante |
| created | Data ed ora di registrazione |
| suggestions | Numero di suggerimenti a disposizione dell’utente |
Tabella 3.1 Dettaglio tabella users
|
user_sessions |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| user_id | Chiave esterna tabella users |
| created | Data ed ora di avvio della sessione di gioco |
| modified | Data ed ora al momento della risposta all’ultima domanda |
| correct_answer_number | Numero di risposte corrette |
| score | Punteggio ottenuto |
Tabella 3.2 Dettaglio tabella user_sessions
|
questions_sessions |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| question_id | Chiave esterna tabella questions |
| user_session_id | Chiave esterna tabella user_sessions |
| cxternal_click | Contatore di click sul link esterno verso il sito www.visitfiemme.it |
| is_answered | Flag che identifica se è stata data risposta alla domanda |
| created | Data ed ora di visualizzazione della domanda |
| modified | Data ed ora al momento della risposta alla domanda |
Tabella 3.3 Dettaglio tabella questions_sessions
|
questions |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| text | Testo della domanda |
| image | URL dell’immagine associata alla domanda |
Tabella 3.4 Dettaglio tabella questions
|
answers |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| question_id | Chiave esterna tabella questions |
| text | Testo della risposta |
| correct | Flag che identifica la correttezza della risposta |
Tabella 3.5 Dettaglio tabella answers
|
provinces |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| province | Nome della provincia |
| inhabitants | Numero di abitanti della provincia |
| num_cities | Numero di città appartenenti alla provincia |
| region_id | Chiave esterna tabella regions |
Tabella 3.6 Dettaglio tabella provinces
|
regions |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| region | Nome della regione |
| num_inhabitants | Numero di abitanti della regione |
| num_cities | Numero di città appartenenti alla regione |
| num_provinces | Numero di provincie nella regione |
Tabella 3.7 Dettaglio tabella regions
|
bitly_links |
|
| Campo | Descrizione |
| id | Identificativo univoco progressivo |
| long_url | URL completo per la condivisione |
| hash | Hash generato attraverso le API di bitly.com |
| created | Data ed ora di creazione dello short URL |
| updated | Data ed ora di aggiornamento dello short URL |
Tabella 3.8 Dettaglio tabella bitly_links
La tabella users contiene le informazioni personali degli utenti iscritti al gioco e le tabelle provinces e regions i dettagli delle località. Nella tabella users è presente il campo suggestions che contiene il numero di suggerimenti a disposizione di quell’utente, il campo personal_code che contiene un codice alfanumerico generato in modo casuale utile per identificare quell’utente quando invita un’altra persona ad iscriversi al gioco ed il campo referral_code che contiene il codice dell’utente che lo ha invitato ad iscriversi.
La tabella users_sessions memorizza il tempo impiegato per rispondere a tutte le dieci domande previste. Tale tabella contiene nel campo correct_answer_number il numero di risposte corrette date fino a quel momento e il punteggio realizzato nel campo score, calcolato al termine della sessione di gioco.
La tabella questions_sessions associa la sessione dell’utente alle domande cui deve rispondere. Memorizza, infatti, l’id della sessione di gioco, l’id della domanda cui sta rispondendo, la correttezza della risposta data e se viene usato o meno un suggerimento per rispondere. Inoltre contiene il campo external_click, necessario per il conteggio del numero di volte che l’utente clicca sul link verso il sito target www.visitfiemme.it per trovare la risposta alla domanda.
La tabella bitly_links contiene gli short url generati interfacciandosi con le API di http://bit.ly. Tale sistema è comodo per ridurre la lunghezza del link di condivisione: ad esempio l’url http://vincifiemme.it/vincfiemme/users/register/r/2n95lz viene ridotto a http://bit.ly/rgJz02.
Figura 3.5 Struttura del database
Il software è stato sviluppato con il linguaggio PHP 5 utilizzando il framework opensource CakePHP (versione 1.3) e con il database MySql su Apache.
[1] Nei mockup è riportata la dicitura “VinciTrentino” in quanto nella prima fase di definizione del progetto di tesi il focus era sulla promozione del Trentino. Successivamente ci si è focalizzati soltanto sulla Val di Fiemme rinominando il progetto “VinciFiemme”.
[2] Nella fase di progettazione del database è stata prevista la possibilità per un utente di fare più sessioni di gioco. Nell’implementazione questa possibilità è stata esclusa, permettendo all’utente una sola sessione di gioco composta da 10 domande.
[3] L’URL shortening è una tecnica utilizzata per abbreviare lunghi indirizzi (URL) in link di pochi caratteri facilmente memorizzabili e condivisibili.