Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile

Transcript

1 Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile Corso di Laurea in Ingegneria Informatica e dei sistemi per le Telecomunicazioni Tesi di Laurea Realizzazione di un sistema informativo basato su social network e realtà aumentata per il supporto al turismo culturale di un territorio Relatore Prof. Domenico Ursino Candidato Goffredo Latella Anno Accademico

2

3 Dedico questa tesi a tutte le persone che mi sono state accanto questa tesi è un po anche la vostra GRAZIE

4

5 Sommario Introduzione....1 Capitolo 1 Le applicazioni nel mondo mobile Introduzione Applicazioni indipendenti dal sistema operativo Tecnologie del web Le web app Le app ibride Caso Studio: Apache Cordova Storia API Apache Cordova Framework utilizzati Confronto con le diverse tecnologie di applicazioni web Vantaggi Svantaggi Capitolo 2 Social Networking mediante Wordpress e BuddyPress Introduzione Il CMS Wordpress Installazione e configurazione Il pannello di amministrazione di WordPress Gli Articoli I Media Le pagine I commenti L aspetto I plugin Gli utenti I

6 Gli strumenti Le impostazioni Il plugin Buddypress Cos è Buddypress Utilizzo Considerazioni e vantaggi Considerazioni finali Capitolo 3 Analisi dei requisiti Introduzione Analisi dei requisiti Obiettivo del sistema informatico Requisiti Capitolo 4 Progettazione del sistema Introduzione I casi d uso Costruzione dei casi d uso I diagrammi di attività Diagramma di attività di accesso al sistema Diagramma di attività del caso d uso condividi contenuto Diagramma di attività del caso d uso invia notifica I Mock-up Capitolo 5 Implementazione del sistema Introduzione Implementazione dell applicazione mobile Funzionalità di geolocalizzazione Visualizza luogo di interesse Implementazione del social network Accesso al sistema Gestione profilo II

7 5.3.3 Gestione dei gruppi Gestione della sicurezza relative alla social network Capitolo 6 Analisi SWOT Analisi SWOT Fattori interni relativamente al sistema realizzato Punti di forza Punti di debolezza Fattori esterni relativamente al sistema realizzato Sistemi correlati Opportunità relativamente al sistema realizzato Minacce Matrice di SWOT del sistema realizzato Conclusioni Ringraziamenti Riferimenti bibliografici III

8 IV

9 Lista delle figure Figura Tipica struttura di una applicazione web...5 Figura Evoluzione degli standard del web... 6 Figura Architettura di una pagina web in HTML Figura Schermata di Chrome web store Figura 1.5 Magic Quadrant di Gartner dove si può vedere la posizione dei framework nel settore di sviluppo mobile Figura Struttura di una applicazione ibrida Figura 1.7 Plugin usati da Cordova per accedere alle funzionalità del dispositivo Figura Confronto tra il numero di ricerche su Google che coinvolgono alcuni dei più popolari framework di sviluppo JavaScript Figura Schema di comunicazione Web Browser e Web Server senza l'utilizzo di AngularJS. 17 Figura Schema di comunicazione Web Browser e Web Server con l'utilizzo di AngularJS.. 18 Figura Le diverse tipologie di applicazioni mobile Figura Accesso al pannello amministrazione di WordPress Figura Schermata iniziale pannello di amministrazione Figura Schermata della pagina di gestione degli articoli Figura Schermata di gestione delle pagina Figura Schermata di gestione dei temi di Wordpress Figura Schermata di spostamento dei widget nella sidebar Figura Schermata relativa alla pagina di gestione del menu Figura Schermata della pagina relativa alla gestione degli utenti Figura Schermata relativa alle impostazioni Permalink Figura Questa in figura è la casa natale di Giovanni Verga Figura Gli attori del sistema Figura Esempio di diagramma dei casi d'uso Figura Casi d'uso del sistema informatico lato Web Figura Caso d'uso Gestione commento Figura 4.5- Caso d'uso Gestione gruppo Figura Diagramma di attività del caso d uso "accesso al sistema" Figura Diagramma di attività caso d'uso Condividi contenuto Figura Diagramma di attività del caso d uso Invia notifica Figura Il mock-up relativo alla schermata iniziale lato mobile Figura Il mock-up relativo alla mappa del turista Figura Il mockup relativo alla schermata della descrizione del luogo Figura Il mock-up relativo alla schermata visitatore lato web V

10 Figura Il mock- up lato back-end Figura Determinazione area di interesse Figura 5.2 Accuratezza del funzionamento del sistema Figura Descrizione del luogo di interesse Figura 5.4 Home page del sistema lato Web Figura 5.5 Widget del login di BuddyPress Figura Gestione del profilo lato turista Figura Modifica del profilo lato amministratore Figura 5.8 Visualizzazione dei gruppi lato turista Figura Autenticazione amministartore tramite Clef Figura Matrice di SWOT Figura Matrice SWOT del sistema realizzato VI

11 Lista delle listati Listato Importazione dei plugin Listato Configurazione per Android Listato Configurazione per ios Listato Configurazione per Windows phone Listato Plugin "notification" Listato Impostazioni del plugin notification per Android Listato Impostazioni del plugin notification per ios Listato Impostazioni del plugin notification per BlackBerry WebWork Listato Pagina controlposition.js Listato 5.10 Pagina che descrive il luogo di interesse Listato Pagina javascript sound.js Listato 5.12 Listato relativo all inserimento di un elemento Listato 5.13 Listato relative alla creazione di un gruppo VII

12

13 Introduzione Il turismo è uno dei settori economici dell'italia. Il paese era, nel 2013, il quinto più visitato nel mondo con 47,7 milioni di turisti internazionali in arrivo, una cifra in crescita rispetto ai due anni precedenti secondo le stime del World Travel and Tourism Council. L'industria turistica nel suo complesso (turismo nazionale e estero) avrebbe contribuito, con 147 miliardi di euro, per il 9,4% alla formazione del PIL del paese. Vista l importanza del turismo e di conseguenza del turista, l idea sarebbe quella di creare un sistema che possa essere uno strumento utile sia turista che al Comune. L applicazione in questione, nasce dalla volontà di guidare il turista che ne fa uso a visitare i punti più salienti e peculiari di una città, non sempre conosciuti da tutti. Tale applicazione dovrà essere un alternativa alla guida turistica poiché illustra al turista cosa visitare d interessante nel luogo in cui si trova, indirizzandolo sapientemente. Il sistema da realizzare dovrà essere un sistema facile da utilizzare e puntando su due aspetti fondamenti nella nuova era come la realtà aumentata e i social network. La realtà aumenta permette all utente di vedere maggiori informazioni rispetto a quanto in natura si può cogliere. L'applicazione, potrebbe costituire un valido aiuto alle persone non vedenti, infatti potrà fornire una voce guida che illustra il luogo che si sta visitando introducendo il turista in un viaggio spazio-temporale, la voce spiegherà cosa succede e farà sentire i suoni caratteristici del luogo collocando personaggi ed eventi appartenenti ad epoche storiche famose. Nelle mani di un turista, infine, il sistema potrebbe riconoscere la posizione, tracciarla su una mappa, e, dare informazioni relative agli oggetti o ai luoghi in cui si trova. Il sistema inoltre dovrà avere una componente social che permetterà ai turisti di condividere foto, momenti etc. I social network sono dei potentissimi canali di comunicazione perché sono a portata di mano ; non è più necessario dover accendere il computer, aspettare il caricamento per poi accedere ad internet ma è sufficiente avere uno smartphone o un tablet con sé per essere sempre connessi. La loro potenza sta anche nel fatto di raggiungere target di qualsiasi età, infatti i social network non sono per i ragazzini come comunemente si pensa, bensì le ricerche dimostrano che la fascia di età più presente sui social network va dai 20 ai 55 anni circa, ovvero una fascia di persone che dispone di un reddito. Infine i social network sono gratuiti e questo è un aspetto da non sottovalutare sia in senso positivo che in senso negativo. Le nuove frontiere del divertimento, ma anche dell apprendimento e dell informazione, sfruttano tutti i canali sensoriali e aprono a nuove possibilità: lasciare gli occhi liberi di osservare lo spazio reale circostante, e affidarsi ai suoni 3D in realtà aumentata per immergersi in esperienze di esplorazione di mondi sconosciuti sempre più interattive.

14 Realizzazione di un sistema informativo basato su social network Il lavoro del presente elaborato di tesi dovrà portare alla creazione di un sistema informatico basato su un social network ed una realtà aumentata, con l intento di incentivare e promuovere il turismo culturale di un determinata città. Inizialmente, sarà effettuata, in maniera approfondita, l analisi delle caratteristiche fondamentali utili per creare un sistema abbastanza semplice da essere usato dal turista e dai Comuni. Dopo questa analisi, si procederà alla progettazione del sistema, in seguito della progettazione, è passerà all implementazione del sistema stesso avvalendosi di tecnologie di ultima generazione. Il sistema dovrà essere realizzato, seguendo le tecniche di progettazione ed implementazione all avanguardia per la costruzione di applicazioni mobile multipiattaforma e multi dispositivo. Il seguente lavoro di tesi si compone di 7 capitoli strutturati nel seguente modo: Nel Capitolo 1 saranno descritte le applicazioni nel mondo mobile, introducendo lo scenario tecnologico in cui ci troviamo e facendo una panoramica sulle diverse soluzioni esistenti per creare un applicazione per dispositivi mobile. Verrà inoltre svolto una valutazione di vantaggi e svantaggi delle diverse soluzioni. Nel Capitolo 2 verrà descritto il Content Managment System (CMS) WordPress. In questo capitolo si spiegherà in maniera dettagliata le funzionalità e la struttura del CMS più utilizzato al mondo. Inoltre verrà illustrato un particolare plugin di WordPress chiamato BuddyPress necessario per la realizzazione del social network. Nel Capitolo 3 verrà descritto il processo di analisi dei requisiti, per definire ciò che il sistema dovrà fare indicando con precisione quali siano i requisiti necessari del sistema. Nel Capitolo 4 verranno illustrati i diagrammi dei casi d uso e quelli di attività ed infine verrà creato una prima bozza di progetto, dalla quale partire per realizzare il sistema. Nel Capitolo 5 verrà analizzata l implementazione del sistema oggetto della presente tesi. Si analizzeranno le funzionalità più importanti del sistema, la gestione della notifica al turista e la gestione dei gruppi all interno del social network. Nel Capitolo 6 viene approfondita la conoscenza dell analisi SWOT, concentrandoci sui punti di forza, di debolezza, delle opportunità e dei rischi derivanti anche dai sistemi correlati. Infine con le informazioni ricavate si è costruita la matrice di SWOT del sistema informatico realizzato. Nel Capito 7, infine, verranno esposte le conclusioni derivanti dalla visione completa del progetto; Partendo dalle motivazioni che hanno spinto alla ideazione e successivamente alla realizzazione del sistema stesso e infine si è valutato i possibili miglioramenti futuri. 2 Goffredo Latella

15 Capitolo 1 Le applicazioni nel mondo mobile L evoluzione della tecnologia ha permesso all'uomo di utilizzare dispositivi sempre più avanzati, che gli permettono di soddisfare il suo bisogno di comunicare e scambiare informazioni per questioni di carattere sociale e lavorativo. In questi ultimi anni abbiamo assistito ad un incremento frenetico e costante della tecnologia mobile. In questo capitolo faremo una panoramica sulle diverse tecniche di sviluppo di applicazioni mobile, soffermandoci sulla particolare tecnica di sviluppo delle applicazioni ibride. Infine vedremo un bilancio di vantaggi e svantaggi delle diverse tipologie di sviluppo di applicazioni analizzate.

16 Realizzazione di un sistema informativo basato su social network 1.1 Introduzione A differenza dei software per computer, che dispongono di risorse hardware molto più potenti e performanti, le applicazioni smartphone si ritrovano in un ambiente molto più limitato, con problematiche diverse da affrontare, quali consumo della batteria e impiego limitato delle risorse hardware. Il mondo che si è creato attorno alle applicazioni mobile si suddivide in due macro categorie, le applicazioni native e quelle indipendenti dal sistema operativo. Le applicazioni native sono software sviluppati ad hoc per un determinato sistema operativo e, risiedendo sul dispositivo stesso, sfruttano al massimo le funzionalità hardware del dispositivo, come fotocamera, giroscopio, GPS, etc. I principali sistemi operativi per dispositivi mobili sono: Android. Il linguaggio di programmazione per le applicazioni Android è Java ma, a differenza di un applicazione Java per desktop, un applicazione Android non dispone di un main, essendo creata per essere un componente indipendente che risponde agli eventi generati sul dispositivo. Si può utilizzare anche la libreria nativa C associata alle Java Native Interface, per sviluppare applicazioni in linguaggio C nativo, rinunciando alla Dalvik Virtual Machine. E stato riscontrato che per le applicazioni che necessitano di molti accessi alla memoria e di calcoli complessi, questa scelta di sviluppo porta ad un miglioramento prestazionale molto alto. ios. Il linguaggio di programmazione per sviluppare applicazioni per ios è l'objective-c. E un linguaggio di programmazione dinamico, che rappresenta un'estensione del linguaggio C con la peculiarità di essere orientato all'utilizzo di oggetti. Una caratteristica di questo linguaggio di programmazione è che la compilazione e il linking vengono effettuati il più possibile a runtime. Questo linguaggio garantisce una completa compatibilità con il C. Windows Phone. Per sviluppare applicazioni native per Windows Phone possiamo utilizzare i linguaggi C++ e C#. BlackBerry. Il linguaggio di programmazione per Blackberry è Java: ma, dalla comparsa della Versione 10 di questo sistema, si possono utilizzare linguaggi di programmazione come C/C++/Qt, ActionScript. 1.2 Applicazioni indipendenti dal sistema operativo Le applicazioni indipendenti dal sistema operativo nascono dall'esigenza di avere un certo livello di indipendenza dalla piattaforma su cui operano, per far fronte al problema legato alla portabilità delle applicazioni native, che, per loro natura, sono strettamente legate al sistema operativo. L'idea che sta alla base di queste applicazioni è che, una volta sviluppate, possono essere adoperabili da un qualunque dispositivo mobile richieda il loro utilizzo. Perciò si è cercato di trovare una tecnologia che fosse comune a tutti i sistemi operativi per dispositivi mobili. L'anello di congiunzione tra i molteplici sistemi operativi è rappresentato dalle tecnologie Web che, essendo presenti già da svariato tempo 4 Goffredo Latella

17 Realizzazione di un sistema informativo basato su social network nell'ambito informatico dei computer, hanno affermato degli standard riconosciuti a livello mondiale e sono tutt'oggi in continua evoluzione. Da qui sono emerse due metodologie per utilizzare queste tecnologie al fine di produrre applicazioni con alta portabilità sui vari sistemi operativi: web app, che risiedono in un web server, e app ibride, che usano dei framework, necessari per accedere alle API dei dispositivi, in modo da sfruttarne le caratteristiche hardware. La soluzione adottata da entrambe le applicazioni garantisce un'elevata portabilità, poiché l'applicazione non è presente sul dispositivo mobile, ma viene eseguita su un server remoto che interagisce con il dispositivo; ciò permette di rendere indipendente l'applicazione dal sistema operativo che ne richiede l'esecuzione. Queste applicazioni, indipendenti dalla piattaforma, sfruttano i browser presenti sui diversi sistemi operativi per interagire con l'utente. Le diverse caratteristiche e funzionalità dei browser offrono prestazioni differenti; perciò, l'utente può scegliere per il proprio smartphone il browser che più si addice alle proprie esigenze. Infatti, l'installazione dei browser sul dispositivo può essere facilmente effettuata dagli App-Store presenti sul sistema operativo. Queste applicazioni adottano un architettura centralizzata di tipo client-server, come mostrato in Figura 1.1. Inoltre sono caratterizzate da diverse strutture ed architetture logiche, in base alla scelta degli sviluppatori. La struttura di un'applicazione Web può essere descritta generalmente su 3 livelli: User Level - questo livello può essere visto come il terminale dell'applicazione; si occupa di visualizzare i dati e le interfacce dell'applicazione utilizzando il browser del dispositivo. Questa funzione può essere offerta tramite pagine HTML con CSS, oppure tramite framework specifici. Server Level - questo livello, caratterizzato da un motore applicativo che risiede sul server, utilizza linguaggi di programmazione dinamici lato server, per offrire i servizi richiesti dall'applicazione. Tra i linguaggi utilizzati possiamo citare PHP, ASP, Java, etc. Database Level - questo livello è composto da un database associato all'applicazione per gestire tutti i dati da essa utilizzati. Tipici DBMS utilizzati sono MySQL, Oracle, etc. Figura Tipica struttura di una applicazione web Goffredo Latella 5

18 Realizzazione di un sistema informativo basato su social network Come già detto, queste applicazioni utilizzano tecnologie Web che, parallelamente all'evoluzione dei dispositivi mobili, hanno avuto una loro evoluzione. E interessante, quindi, fare un'analisi del passaggio dagli standard originari, ormai obsoleti, agli standard attuali (Figura 1.2). Figura Evoluzione degli standard del web Tecnologie del web Standard Obsoleti Il primo standard per web mobile, che è stato incorporato nello primo standard WAP 1.1, è stato Wireless Markup Language (nel seguito, WML). Considerato ormai un linguaggio del passato, WML è un linguaggio estremamente sconsigliato, poiché tutti i telefoni cellulari, pur essendo in grado di comprenderlo, non riescono a visualizzare questo formato, proprio per il fatto che è una tecnologia superata ormai da tempo. Un documento WML è un file XML che non supporta immagini GIF, JPG e PNG, non si serve di Javascript, ma ha un proprio linguaggio di scripting chiamato WMLScript. WML è stato eliminato dallo standard WAP nel 2002, ma continua ad essere usato come linguaggio di ripiego per dispositivi mobili di vecchia produzione. Oggigiorno solo i siti delle compagnie telefoniche sono obbligate ad avere anche una versione WML, per garantire una piena compatibilità con tutti i dispositivi mobili in circolazione. 6 Goffredo Latella

19 Realizzazione di un sistema informativo basato su social network Standard attuali HTML5 Questa nuova versione della tecnologia HTML, rispetto alle precedenti, introduce cambiamenti, maggiore flessibilità e nuove funzionalità riguardanti controlli e API, venendo incontro alle applicazioni mobili. Le novità introdotte da questa nuova versione dell'html sono state pensate per consentire la memorizzazione di grosse quantità di dati e per supportare le applicazioni basate su tecnologie Web, anche in assenza di connessione alla rete Internet migliorando, così, l'indipendenza fra la struttura, i contenuti e i fogli di stile. Le nuove funzionalità introdotte da questa versione dell'html sono state estese tramite l'introduzione di nuove API JavaScript riguardanti i seguenti aspetti: salvataggio dati su dispositivi mobile; utilizzo in assenza di connessione; operazioni in backgroud; supporto multimediale; supporto Canvas per le animazioni; generare grafica 2D; generare grafica 3D; gestione dati provenienti da sensori multimediali; geolocalizzazione. Le modifiche introdotte riguardanti la struttura hanno portato ad abbandonare l'utilizzo delle sezioni DIV, poiché, da queste sezioni, sono stati implementati ed evoluti nuovi elementi chiamati header, nav, section, article, aside, e footer, come mostrato in Figura 1.3. Figura Architettura di una pagina web in HTML5 Goffredo Latella 7

20 Realizzazione di un sistema informativo basato su social network E facilmente intuibile che l'elemento header rappresenta la parte superiore della pagina e l'elemento footer quella inferiore. Gli elementi restanti sono più specifici; il nav è adibito a contenere i link per la navigazione; article si occupa di mostrare i contenuti della pagina; section riassume i contenuti presenti, mentre aside affianca i contenuti, come, per esempio sidebar, menù, etc. Per quanto riguarda la gestione dei contenuti multimediali sono stati introdotti tag appositi, come video e audio. Questi tag sono caratterizzati da attributi e funzionalità specifiche; per esempio il tag <video> permette, tramite l'attributo POSTER, di visualizzare un'immagine durante il caricamento del filmato, il tag <audio> introduce l'attributo CURRENTTIME e i metodi play() e pause(). Con la nuova versione dell'html5 è stato esteso e potenziato il DOM (Document Object Model), per la gestione e la visualizzazione dei documenti. Il DOM dà la possibilità ai documenti di contenere un linguaggio indipendente dalla sintassi, infatti si possono utilizzare differenti sintassi per rappresentare un documento HTML, come l'html5 e l'xhtml5, e questo comporta un notevole vantaggio CSS 3 Questa nuova versione della tecnologica CSS, sviluppata da W3C, introduce una maggiore modularità fra i vari aspetti riguardanti proprietà e metodi che CSS propone per agevolare lo sviluppo di siti web. Essa si pone come obiettivo quello di supportare le altre tecnologie Web, come, ad esempio, l'html5 mettendo a disposizione funzionalità riguardanti i seguenti ambiti. creazione di effetti grafici di alto livello; controllo delle caratteristiche dei contenuti. La terza versione del CSS è caratterizzata da una piena compatibilità con le versioni precedenti; infatti, tutti gli aspetti e le funzionalità delle precedenti versioni vengono mantenuti inalterati; di fatto, vengono aggiunte molte proprietà grafiche. La caratteristica che rappresenta maggiormente questa versione è la modularità; infatti, W3C suddivide le specifiche aree dei CSS in moduli, che hanno una vita evolutiva propria permettendo di sviluppare e potenziare i vari settori in maniera completamente indipendente, in base alle esigenze Responsive Responsive non è un linguaggio, bensì una tecnica introdotta nei CSS3. 8 Goffredo Latella

21 Realizzazione di un sistema informativo basato su social network La lingua inglese designa genericamente con l aggettivo responsive tutto ciò che reagisce o risponde rapidamente e in modo appropriato ad uno stimolo. In italiano l aggettivo che rende al meglio il termine inglese (avendo responsivo un altro significato) è adattativo (o adattivo). Così la definizione dello Zingarelli: (tecnol.) Capace di adattamento (sistema adattativo: capace di modificarsi per soddisfare nuovi requisiti SIN. adattivo). Se applichiamo questa idea ad un sito web, se cioè consideriamo quest ultimo come un sistema adattivo, possiamo facilmente ricavare una definizione come quella fornita da Kayla Knight (famosa web designer): Con Responsive Design indichiamo quell approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all ambiente dell utente in base a fattori come le dimensioni dello schermo, la piattaforma e l orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS. Quindi, quando l utente passa dal suo PC desktop ad un ipad (o altro dispositivo tablet o smartphone), il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell utente Javascript Javascript è uno dei linguaggi di programmazione più usati al mondo; la sua consolidata presenza nell olimpo dei grandi linguaggi come C, C++ e Java è certa. La Tabella 1.1, tratta dal TIOBE Index [4], testimonia la crescita di popolarità di questo linguaggio: L enorme diffusione di JavaScript è dovuta principalmente alle numerose librerie nate allo scopo di semplificare la programmazione sul browser, ma anche alla nascita di framework lato server. Utilizzando queste tecnologie indipendenti dal sistema operativo si è pensato di creare dei software che stanno nella rete e di presentarli all utente in qualunque momento e con qualunque dispositivo Le web app Un esempio di applicazioni web basate sugli standard attuali precedentemente presentati sono le web app. Una web app è una raccolta di servlet, pagine HTML5, CSS, classi e altre risorse che possono essere raggruppate e funzionare su più contenitori di fornitori diversi. Un'applicazione web è radicata in un percorso specifico all'interno di un server web. Non è possibile installare una web app fisicamente nel telefono, anche se è possibile mettere in cache una web app per l'accesso offline, come succede con Gmail Offline. Per installare un applicazione i browser mettono a disposizione un web store dove scegliere le app da installare (Figura 1.4) Goffredo Latella 9

22 Realizzazione di un sistema informativo basato su social network Tabella Classifica dei linguaggi attualmente più utilizzati Figura Schermata di Chrome web store Quando Apple lanciò il primo iphone nel 2007, non fornì un SDK per lo sviluppo nativo, bensì un Web SDK, per permettere agli sviluppatori di rendere le applicazioni lavorabili direttamente dal 10 Goffredo Latella

23 Realizzazione di un sistema informativo basato su social network browser. A quel tempo Steve Jobs elogiò le web app per la loro apertura e facilità di sviluppo. Questo dimostra che già nel 2007 le web app erano considerate come una possibile alternativa alle applicazioni native. Quello che ha bloccato il boom dell HTML5 è stata la carenza di direttive per la comunicazione diretta con le varie componenti (ad esempio, fotocamera, GPS, giroscopio, etc.) dei diversi dispositivi. Il W3C sta attualmente lavorando per far fronte a queste carenze; nel futuro HTML5 potrebbe avere accesso diretto alle API dei vari dispositivi. Per il momento dobbiamo usare una soluzione ibrida Le app ibride Le applicazioni ibride vengono realizzate attraverso dei framework, che permettono il loro sviluppo tramite linguaggi di programmazione tipici delle tecnologie web. Lo sviluppo di applicazioni attraverso questi framework non permette di avere un unica applicazione compatibile con più sistemi operativi, ma offre la possibilità di creare varie versioni della stessa applicazione, a partire dal medesimo codice sorgente, ognuna compatibile con un diverso sistema operativo. Una volta creata l applicazione, il framework ha il compito di tradurre il linguaggio con cui è stata scritta l applicazione nel linguaggio nativo utilizzato dal sistema operativo scelto. Le applicazioni risultanti da questa operazione di traduzione sono applicazioni ibride, perciò non possono essere considerate né applicazioni native né applicazioni Web, ma avranno buona parte di codice nativo e una parte di codice legato alle tecnologie Web. Queste applicazioni non utilizzano solo i framework nativi, come ad esempio il framework adibito alle interfacce grafiche, ma anche le API del sistema scelto nella conversione da linguaggio per il web a linguaggio nativo del dispositivo, per garantire le stesse funzionalità che sono state espresse nel codice sorgente. Fra i framework più utilizzati, sia open-source che privati, per lo sviluppo di queste applicazioni troviamo: Cordova; PhoneGap; MotherApp; Flex. Generalmente le app ibride si pongono a metà strada tra le app native e le web app, rappresentando un buon compromesso per la creazione di applicazioni mobile multipiattaforma con un supporto nativo. Goffredo Latella 11

24 Realizzazione di un sistema informativo basato su social network Valutazione dei maggiori framework per sviluppare app ibride Uno dei principali framework, con licenza commerciale, è Xamarin, che nasce dalla necessità degli sviluppatori di trovare un ambiente migliore per poter sviluppare applicazioni mobile cross-platform. Questo è un linguaggio di programmazione moderno, con strumenti potenti e un flusso di lavoro efficiente, capace di migliorare l esperienza utente. Il linguaggio di programmazione utilizzato da Xamarin è C#, che, grazie alla sua facilità di comprensione, permette ad ogni sviluppatore di seguire la filosofia di Xamarin, ovvero quella di rispettare l unicità di ogni piattaforma. Xamarin, come altri framework multipiattaforma, possiede una politica di sviluppo basata su strumenti e strategie particolari, come la condivisione del codice, l utilizzo del pattern MVVM, etc. PhoneGap è un progetto della Nitobi Software, un azienda che crea applicazioni mobile e web application da diversi anni. Esso consiste in un insieme di librerie statiche che permettono di sviluppare velocemente, ed in maniera molto efficace, applicazioni mobile che appartengono a diverse famiglie. La filosofia sulla quale è basato phonegap prevede di realizzare lo slogan Write once, port everywhere che, tradotto, vuol dire scrivi una volta, porta ovunque. PhoneGap si propone di focalizzare gli sforzi degli sviluppatori sull applicazione piuttosto che perdere tempo ad adattarla ad ogni piattaforma; questo è il principale motivo per il quale numerosi sviluppatori preferiscono tale framework. Per poter sviluppare con PhoneGap è necessario conoscere HTML, CSS e JavaScript. I requisiti sono semplici: installare le SDK e i tool per consentire lo sviluppo delle applicazioni. Un successore di Adobe PhoneGap è il framework open source Apache Cordova, anch esso distribuito con licenza open source. Cordova rappresenta un set di API che permette agli sviluppatori di accedere alle funzionalità native dei dispositivi come, ad esempio, fotocamera, geolocalizzazione, accelerometro, etc. Tale framework, come il suo predecessore, fa sì che lo sviluppo si basi interamente sull uso di HTML, CSS e JavaScript, seguendo il tradizionale approccio delle Web app. Un importante strumento di valutazione nel settore della consulenza strategica, dell analisi e della ricerca nel campo dell Information Technology (IT), è il Magic Quadrant sviluppato da Gartner (Figura 1.5). Grazie a tale strumento di valutazione può essere visualizzata la posizione dei framework e, al tempo stesso, la posizione delle aziende leader nel settore di sviluppo mobile cross-platform. 12 Goffredo Latella

25 Realizzazione di un sistema informativo basato su social network Figura 1.5 Magic Quadrant di Gartner dove si può vedere la posizione dei framework nel settore di sviluppo mobile 1.3 Caso Studio: Apache Cordova Storia Apache Cordova nasce da un progetto di successo, PhoneGap, avviato da una azienda canadese, Nitobi Software, e venduto nel 2011 ad Abobe. Contestualmente alla trattativa con Adobe, Nitobi ha donato alla fondazione Apache il progetto che, in un primo tempo, aveva assunto il nome di Apache Callback e, successivamente, il nome attuale di Apache Cordova. Si tratta, quindi, di un software open source distribuito con licenza Apache 2.0. Allo stato attuale il progetto PhoneGap, portato avanti da Adobe, non è altro che una distribuzione di Apache Cordova con la possibilità di usufruire di servizi aggiuntivi. L architettura di Apache Cordova si presenta come una sorta di contenitore di un applicazione Web eseguita localmente. L interfaccia grafica di un applicazione Cordova è, infatti, Goffredo Latella 13

26 Realizzazione di un sistema informativo basato su social network costituita da una web view che occupa l intero schermo del dispositivo all interno della quale vengono visualizzati l HTML ed il CSS e viene eseguito il codice JavaScript (Figura 1.6). Tramite JavaScript è possibile accedere ad un ricco insieme di API che interfacciano l applicazione Web con le funzionalità della piattaforma ospite: Figura Struttura di una applicazione ibrida Pertanto, web view e API sono le componenti dell applicazione che dipendono dalla specifica piattaforma mobile. Sono queste componenti che il framework mette a disposizione dello sviluppatore, consentendogli di concentrarsi sul codice standard, indipendente dalla piattaforma. Cordova, infatti, implementa lo stesso insieme di API sulle diverse piattaforme mobili supportate, creando un livello software standard a cui si possono interfacciare le nostre applicazioni. Apache Cordova mette a disposizione dello sviluppatore delle app vuote, una per ciascuna piattaforma mobile, da riempire con codice HTML, CSS e JavaScript. Allo stato attuale Apache Cordova supporta le seguenti piattaforme mobile: Android, ios, Blackberry, Bada, Tizen e Windows Phone. Questo permette di ampliare la platea di utilizzatori dell app realizzata API Apache Cordova È possibile modificare l'applicazione in molti modi per sfruttare tecnologie web standard, tuttavia per comunicare strettamente con varie funzionalità a livello di dispositivo, è necessario aggiungere plugin che forniscono accesso al core Cordova APIs (Figura 1.7). Un plugin è una parte di codice del componente aggiuntivo che fornisce un'interfaccia per i componenti nativi. Comunemente si aggiunge 14 Goffredo Latella

27 Realizzazione di un sistema informativo basato su social network o si crea un plugin per abilitare una delle funzionalità a livello di dispositivo base di Cordova dettagliate nel riferimento all'api. Alcuni esempi di funzioni che si potrebbero aggiungere attraverso i plugin sono i seguenti: : 1. informazioni di base del dispositivo (dispositivo API); 2. connessione di rete e batteria eventi; 3. accelerometro, bussola e geolocalizzazione; 4. macchina fotografica, la riproduzione multimediale e cattura; 5. accedere ai file di dispositivo e della rete (File Api); 6. notifica tramite finestra di dialogo e vibrazione; 7. contatti; 8. globalizzazione; 9. splashscreen; 10. finestre aperte del browser nuovo(inappbrowser); 11. console di debug. E possibile, ovviamente, rimuovere o aggiungere plugin in un secondo momento in base a quello che l applicazione deve svolgere Framework utilizzati Per la realizzazione della nostra app ibrida abbiamo inoltre usato il framework Onsen UI. Costruito sulla base di AngularJS e Topcoat. Onsen UI è un framework open source, gratuito e aperto a tutti. Onsen UI è stato progettato e realizzato per offrire maggiore user experience all utente finale e consente di avere una velocità di movimento all interno dell applicazione molto più elevata rispetto al solo utilizzo di tag HTML5, grazie all ausilio di AngulaJS. Quest ultimo è un framework JavaScript, patrocinato da Google, utile a semplificare la realizzazione di applicazioni web single page, favorendo un approccio dichiarativo. AngularJS è il framework più famoso. Ne troviamo conferma anche analizzando le statistiche di ricerca di Google Trends (Figura 1.8). Tuttavia, l interesse crescente verso questo framework non vuol dire che esso sia effettivamente utilizzato su larga scala. Il numero di applicazioni web sviluppate con AngularJS non è attualmente proporzionale all interesse suscitato. I motivi sono da ricercare, da un lato, nella relativa giovinezza del progetto, dall altro nella non facile digeribilità del modello di programmazione proposto quando si va oltre il classico Hello world. Spesso si parla di AngularJS come di un framework MVC o, come lo ha definito uno dei suoi autori, MVW (Model-View-Whatever), per sottolineare l estrema flessibilità nell applicazione di un pattern di presentazione. Il pattern definisce la separazione dei compiti nella Goffredo Latella 15

28 Realizzazione di un sistema informativo basato su social network presentazione dei dati all utente individuando tre componenti fondamentali: il modello dei dati, la view ed il controller, o qualunque altro elemento che fa da collante tra la view e i dati. Figura 1.7 Plugin usati da Cordova per accedere alle funzionalità del dispositivo Figura Confronto tra il numero di ricerche su Google che coinvolgono alcuni dei più popolari framework di sviluppo JavaScript L approccio della separazione dei compiti ha diversi vantaggi, tra cui la possibilità di modificare internamente un componente senza avere ripercussioni sull altro. 16 Goffredo Latella

29 Realizzazione di un sistema informativo basato su social network In particolare, si evidenziano i seguenti elementi principali: Elemento View Controller Service Directive Filter Descrizione Rappresenta quello che l utente vede, l HTML risultante dalle elaborazioni di AngularJS È la logica che sta dietro alla View, il componente che mette in relazione i dati e la loro visualizzazione È un componente che offre funzionalità agli altri componenti, indipendentemente da una View È un componente riutilizzabile all interno di una View che estende l HTML aggiungendo attributi o elementi personalizzati Formatta il valore di un espressione per la visualizzazione su una View Rispetto ai diretti concorrenti, questo framework è in grado di ridurre in maniera considerevole il codice necessario a realizzare applicazioni HTML/JavaScript, poiché non richiede lo scaricamento dell intera pagina ma soltanto dei contenuti che sono variati, risparmiando traffico di rete e riducendo la velocità percepita dall utente finale (Figura 1.9 e Figura 1.10). Figura Schema di comunicazione Web Browser e Web Server senza l'utilizzo di AngularJS Goffredo Latella 17

30 Realizzazione di un sistema informativo basato su social network Figura Schema di comunicazione Web Browser e Web Server con l'utilizzo di AngularJS 1.4 Confronto con le diverse tecnologie di applicazioni web Tra le due tipologie principali di applicazioni, ovvero quelle native e quelle indipendenti, non è possibile determinare a priori quale sia la migliore, perché ogni tipologia porta con sé sia vantaggi che svantaggi. Perciò, in base allo scopo per cui viene sviluppata un'applicazione, bisogna decidere accuratamente quale approccio prediligere Vantaggi Lo sviluppo di un'applicazione nativa offre diversi vantaggi. Più specificatamente: essendo un applicazione sviluppata appositamente per un determinato sistema operativo, risulta essere molto performante e può sfruttare tutte funzionalità che il sistema operativo mette a disposizione; l accesso ai dati è più facile e più veloce, poiché i dati risiedono sul dispositivo mobile; si possono utilizzare tutte le risorse hardware presenti sul dispositivo, come GPS, oscillometro, giroscopio, ecc.. non si richiede necessariamente all utente finale l accesso alla rete, a meno che sia l applicazione stessa ad avere funzionalità che ne richiede l utilizzo; 18 Goffredo Latella

31 Realizzazione di un sistema informativo basato su social network le applicazioni native sono facilmente reperibili, perché si possono consultare tutte le informazioni relative ed installare le applicazioni sui dispositivi mobile, direttamente utilizzando gli strumenti che il sistema operativo mette a disposizione dell'utente, gli App Store, che forniscono ulteriori garanzie e certificazioni per la non nocività dell'applicazione. Per quanto riguarda un'applicazione indipendente dalla piattaforma, il vantaggio più lampante è dato dal fatto che, una volta sviluppata, può essere distribuita velocemente per la maggior parte dei dispositivi mobili, indipendentemente dal sistema operativo. Per quanto riguarda lo sviluppo, un vantaggio molto significativo è rappresentato dalla possibilità di utilizzare un solo linguaggio di programmazione, così da ridurre notevolmente il tempo necessario Svantaggi Il principale svantaggio di un'applicazione nativa è la portabilità, poiché è compatibile solo con il sistema operativo per la quale è stata sviluppata. Inoltre, i continui aggiornamenti delle versioni di un sistema operativo possono portare a dover obbligare all aggiornamento dell applicazione nativa, che, in alcuni casi, perde la compatibilità con il sistema o, semplicemente, si trova ad avere vari bug in determinate aree del proprio funzionamento. Per quanto riguarda gli sviluppatori, se si vuole creare un'applicazione con varie versioni native per i diversi sistemi operativi presenti sul mercato, questo necessita di una buona conoscenza di diversi linguaggi di programmazione e di un investimento di tempo maggiore per lo sviluppo delle varie versioni, e ciò comporta anche un investimento economico superiore. Analizzando il caso delle applicazioni indipendenti, gli svantaggi più evidenti sono i seguenti: le applicazioni indipendenti sono solitamente meno performanti (anche se questo gap si sta assottigliando con l introduzione di framework), poiché durante la loro esecuzione parte del codice utilizzato deve essere tradotto in linguaggio nativo; gli sviluppatori sono costretti ad utilizzare solo gli aspetti e le funzionalità che i diversi sistemi operativi hanno in comune; i sistemi hanno diverse convenzioni per quanto riguarda l'interfaccia grafica, quindi lo sviluppatore deve stare attento a rispettare queste caratteristiche, per evitare che l'applicazione risulti estranea, non intuitiva e di difficile utilizzo all'utente; essendo applicazioni non progettate per uno specifico sistema soffrono maggiormente di problemi relativi alla sicurezza; testare queste applicazioni risulta più difficoltoso. Nel caso specifico delle web app, ci sono ulteriori svantaggi; infatti, una web app richiede un costante accesso alle rete Internet e, di conseguenza, non è sempre accessibile. Un altro problema nell'utilizzo di web app è legato ai consumi della connessione; infatti, gli operatori telefonici mettono Goffredo Latella 19

32 Realizzazione di un sistema informativo basato su social network a disposizione dell'utente un certo numero di GB utilizzabili al mese, in base al piano tariffario; le web, che sfruttano continuamente la banda, risultano poco vantaggiose per l'utente. E da considerare anche il fatto che le prestazioni di una web app dipendono in modo sensibile dalla rapidità della connessione; perciò, è difficile a priori garantire un costante livello prestazionale. Per quanto riguarda le app ibride, la portabilità di queste applicazioni è legata al framework utilizzato; perciò, non tutti i framework garantiscono lo stesso livello di portabilità. In più queste applicazioni hanno svantaggi maggiori a livello prestazionale, dovuti all'automatismo di traduzione del codice scritto in codice nativo, e questo porta ad avere applicazioni con codici nativi non ottimizzati. Questo deficit prestazionale varia in base alla modalità di progettazione dell applicazione e alle funzionalità che la caratterizzano. Possiamo riassumere tutto quanto detto finora con il grafico di Figura 1.11: Figura Le diverse tipologie di applicazioni mobile 20 Goffredo Latella

33 Capitolo 2 Social Networking mediante Wordpress e BuddyPress Negli ultimi dieci anni abbiamo assistito all enorme sviluppo di una nuova tecnologia per la gestione di contenuti, ossia i Content Managment System. I CMS sono applicazioni lato server che permettono la gestione automatica e sicura di contenuti, come file, musica, audio, video, etc. Tra i tanti CMS in commercio, quello maggiormente utilizzato per facilità e affidabilità è WordPress. In questo capitolo, faremo una un accenno su cosa sia un CMS; successivamente faremo una panoramica su cosa sia WordPress e su quali siano le sue potenzialità, soffermandoci su come utilizzarlo per realizzare un social network attraverso l uso del plugin BuddyPress; infine, faremo una considerazione sui vantaggi derivanti dall uso di questa tecnologia.

34 Realizzazione di un sistema informativo basato su social network 2.1 Introduzione Negli ultimi 20 anni Internet è cresciuta, e con essa, il corrispettivo bacino di utenza. Vediamo che tutto viene dematerializzato; dematerializzare significa, per un azienda, risparmiare, e per l uomo rispettare l ambiente. Ciò comporta una quantità maggiore di informazione da gestire e memorizzare su Web. Da questa esigenza, sono emersi nuovi tipi di software Web chiamati: i Content Managment System (di seguito CMS). Il mercato del CMS è molto vario; troviamo infatti, sia CMS open source che a pagamento. Esempi di CMS famosi sono Wordpress, Drupal, Joomla, Magento. Ciascuno di essi ha caratteristiche diverse; quindi la scelta del CMS da utilizzare varia in base a ciò che il portale Web deve gestire. Magento, ad esempio, è un CMS impiegato per lo più per la gestione di un sito di e-commerce; grandi aziende come la Nestlè, la Nokia lo utilizzano. Joomla è partito come un grande progetto (attualmente è giunto alla Versione 3); infatti, inizialmente, quando ancora poche aziende conoscevano la potenza di questi software, Joomla era il CMS più utilizzato, poichè è molto semplice da installare e utilizzare, quindi si rivela un ottimo compagno per chi voglia iniziare a fare un sito Web senza conoscere linguaggi di programmazione. Drupal è un CMS poco conosciuto, ma molto affidabile, soprattutto per quanto riguarda l aspetto della sicurezza; infatti viene è molto utilizzato in America; 150 siti governativi, tra cui la casa bianca e la NASA sono sviluppati con Drupal. Tuttavia, WordPress è il CMS più utilizzato al mondo; infatti, Il 43% dei siti Web realizzati tramite CMS sono sviluppati in WordPress. Nella prossima sezione descriveremo in dettaglio quest ultimo CMS. 2.2 Il CMS Wordpress WordPress è una piattaforma software di "personal publishing" e CMS, sviluppata mediante PHP facendo uso del DBMS MySQL. Inizialmente creata da Matt Mullenweg e distribuita con la licenza 22 Goffredo Latella

35 Realizzazione di un sistema informativo basato su social network... General Public License (di seguito GPL), consente la creazione di un sito Internet formato da contenuti testuali o multimediali, facilmente gestibili ed aggiornabili. La prima versione di Wordpress fu pubblicata il 27 maggio 2003 dai fondatori Matt Mullenweg e Mike Little come fork di b2/cafelog. Il nome WordPress fu suggerito da Christine Selleck. Le versioni di WordPress, a partire dalla Versione 1.0, prendono il nome da musicisti jazz. Attualmente, l ultima versione 4.1 è stata chiamata Dinah. La prossima versione è prevista per aprile WordPress permette di creare un solo blog per ogni installazione, anche se diverse installazioni possono convivere sullo stesso server e sullo stesso dominio, in directory e database separati. WordPress Multi-User o WordPress MU è la piattaforma multi-blogging derivata da WordPress che consente di gestire con una sola installazione un network di blog, amministrati tutti tramite un unico pannello. A dalla Versione 3.0, le versioni di WordPress e WordPress MU vengono integrate, in quanto, tramite la modifica del file wp-config.php, è possibile attivare la modalità network nella propria installazione di WordPress Installazione e configurazione Per installare e utilizzare la piattaforma WordPress, è necessario un server, un DBMS MySql e, naturalmente, i file di installazione di WordPress. Una volta scaricati questi ultimi dal sito ufficiale di WordPress, si procede al caricamento degli stessi all interno del dominio e alla configurazione della piattaforma. Accedendo all indirizzo Wordpress richiede per la configurazione alcuni dati come: nome del database; nome utente del database; password del database. A questo punto, una schermata ci comunicherà che i dati inseriti sono corretti e si procederà all installazione. Completata la fase di installazione e configurazione, sarà possibile accedere al pannello di amministrazione Il pannello di amministrazione di WordPress Il pannello di amministrazione di WordPress 4.1 è caratterizzato da un interfaccia grafica completamente rinnovata rispetto alle precedenti, maggiormente leggibile e, soprattutto, responsive. Ciò comporta poter accedere tranquillamente da qualsiasi dispositivo (personal computer, notebook, tablet e smartphone) ed effettuare tutte le operazioni desiderate. Goffredo Latella 23

36 Realizzazione di un sistema informativo basato su social network Figura Accesso al pannello amministrazione di WordPress Figura Schermata iniziale pannello di amministrazione La schermata iniziale del pannello di amministrazione è configurata tramite una barra superiore, che contiene le informazioni sull utente connesso e una sidebar (a sinistra), che contiene tutti gli strumenti necessari all amministrazione del sito (Figura 2.2). La parte centrale della schermata mostra informazioni sintetiche sullo stato del sito e sui contenuti presenti. Nelle varie fasi dell amministrazione del sito, le due barre (superiore e laterale sinistra) rimangono sempre statiche, mentre nella parte centrale vengono mostrati i vari contenuti e le varie opzioni. La colonna di sinistra è composta da voci che consentono di amministrare i rispettivi contenuti. Tali voci sono: Home: per tornare alla schermata iniziale in qualsiasi momento. Articoli: sono contenuti dinamici, solitamente dedicati alle news o ad informazioni che vengono costantemente aggiornate, come ad esempio, gli eventi. 24 Goffredo Latella

37 Realizzazione di un sistema informativo basato su social network... Media: contenuti multimediali, immagini, file audio e video, PDF etc. Possono essere inseriti, successivamente al loro caricamento, in pagine o articoli. Pagine: sono contenuti statici dedicati ad informazioni che variano raramente e che sono valide nel tempo (ad esempio chi siamo, dove siamo di un tradizionale sito Web). Commenti: WordPress consente ai visitatori del sito di commentare i vari articoli o pagine. Tramite questo pannello è possibile gestire tali commenti, validandoli o eliminandoli dal sistema. Aspetto: si occupa dell aspetto grafico del sito con aggiunta o rimozione di nuovi temi grafici. Plugin: pannello che permette l installazione di componenti aggiuntivi per estendere le funzionalità del sito. Utenti: serve per gestire gli utenti registrati ed abilitati. Strumenti: sono gli strumenti utili per l importazione e l esportazione di contenuti del sito. Impostazioni: consente di gestire tutte le impostazioni relative a WordPress. Nel seguito faremo una panoramica delle sezioni appena enunciate Gli Articoli Come accennato in precedenza, gli articoli sono contenuti dinamici dedicati generalmente a news o eventi. Wordpress consente di organizzare gli articoli in categorie per facilitare la navigabilità da parte degli utenti. Per gestire i contenuti, è presente il pulsante Articoli nella sidebar di sinistra premendo il quale è possibile visualizzare l elenco di tutti gli articoli presenti nel sistema (Figura 2.3). Figura Schermata della pagina di gestione degli articoli Questa schermata presenta a quattro voci: Goffredo Latella 25

38 Realizzazione di un sistema informativo basato su social network Modifica, permette di accedere ad una nuova schermata con tutti gli strumenti di modifica dell articolo. Modifica Rapida, consente di modificare rapidamente l articolo direttamente dalla schermata senza aprire nuove finestre. Questa modalità è molto veloce e comoda se si desidera modificare velocemente più articoli senza dover aprire nuove finestre. Naturalmente non offre tutti gli strumenti della modalità Modifica. Cestina sposta l articolo nel cestino. Successivamente sarà possibile ripristinare eliminare definitivamente l articolo o ripristinarlo in caso di erronea cancellazione Visualizza permette di visualizzare l articolo così come lo vedono gli utenti del sito. Oltre all elenco di tutti gli articoli presenti nel sistema, nella sidebar di sinistra, vengono anche attivate quattro sottovoci: o o o o Tutti gli articoli (visualizza l elenco di tutti gli articoli). Aggiungi nuovo (per inserire un nuovo articolo). Categorie (per amministrare le categorie aggiungendone di nuove, modificando e/o eliminando quelle esistenti). Tag (permette la creazione di tag. I tag sono delle parole chiave associate al contenuto degli articoli. Grazie a queste parole è possibile utilizzare funzionalità quali, articoli correlati o articoli simili etc ) I Media Nella sezione media sono presenti tutti i file multimediali del sistema; tramite tale sezione è possibile aggiungere ad esempio una foto in un articolo e di renderla disponibile per altri articoli o pagine. Se inseriamo una foto direttamente dalla schermata Aggiungi nuovo articolo essa verrà comunque salvata nella sezione media. In maniera analoga a quanto avviene per gli articoli, dalla schermata media possiamo importare, eliminare o modificare un contenuto multimediale precedentemente caricato Le pagine La gestione delle pagine è molto simile a quella degli articoli (Figura 2.4); vi sono tuttavia alcune differenze. Non esistono le categorie ed i tag, ed è possibile scegliere se una pagina sia di base oppure se sia una sotto pagina. Ad esempio si può creare una pagina chiamata Italia e poi una serie di sotto pagine con i nomi delle regioni. Questo aspetto viene molto spesso trascurato; invece riveste un importanza fondamentale nella lettura dei contenuti da parte dei motori di ricerca. Infatti se la struttura dei contenuti è ben ottimizzata (divisa in pagine e sotto pagine) i motori di ricerca riescono a capire con esattezza quali sono i contenuti principali e quali quelli secondari. Più i contenuti di un sito 26 Goffredo Latella

39 Realizzazione di un sistema informativo basato su social network... sono ben strutturati e meglio i motori di ricerca riusciranno a leggerli, premiandoli nelle pagine dei risultati. Figura Schermata di gestione delle pagina Per pubblicare una pagina, basta premere il pulsante Pubblica I commenti Nella sezione commenti l amministratore può visionare i commenti inseriti in un articolo o una pagina e procedere all approvazione per rendere visibile il commento a tutti. Inoltre se il commento era una domanda WordPress permette all amministratore di rispondere a tale commento L aspetto Nella sezione aspetto ci sono tutti gli strumenti necessari alla gestione dell aspetto grafico del nostro sito, degli elementi presenti nelle sidebar e nel footer. È, inoltre, possibile gestire plugin. Questi ultimi rappresentano delle estensioni di WordPress che consentono di aumentare le funzionalità del sistema. Ad esempio, ci sono plugin per creare un sito multilingua, per gestire un sistema di e- commerce, per integrare i social network etc. La prima delle voci presenti nel menù aspetto è Temi. WordPress consente di installare temi grafici che è possibile scaricare gratuitamente dal sito ufficiale, oppure direttamente dalla schermata Goffredo Latella 27

40 Realizzazione di un sistema informativo basato su social network Temi (Figura 2.5). Tramite questo pulsante possiamo caricare un tema precedentemente scaricato sul nostro PC, oppure visualizzare i temi disponibili sul sito wordpress.org senza neanche cambiare schermata. Una volta trovato il tema desiderato, si potrà procedere alla sua installazione. Figura Schermata di gestione dei temi di Wordpress Un'altra sezione di aspetto sono i widget. Questi sono degli elementi che estendono le funzionalità del sistema e possono essere posizionati nelle sidebar del sito (se il tema le prevede), oppure nel footer. Ad esempio, i widget più popolari sono quelli che mostrano un box di ricerca, gli ultimi articoli inseriti, l elenco degli utenti che hanno cliccato Mi piace su facebook etc. Il numero dei widget disponibili è legato ai plugin installati. Ad esempio se installiamo un plugin per la creazione di un sistema di e- commerce, saranno anche aggiunti widget che mostrano gli articoli inseriti nel carrello, gli ultimi prodotti inseriti, gli articoli in offerta, quelli più venduti etc. Naturalmente, installando il plugin, questi widget verranno aggiunti all elenco di quelli disponibili e poi, sarà l amministratore stesso a doverli attivare. Per attivare e gestire widget, è sufficiente andare nel menù Widget. Una schermata ci mostrerà l elenco dei widget disponibili e le aree in cui è possibile inserirli. Nel caso dell esempio proposto le possibili collocazioni dei widget sono: sidebar principale, sidebar contenuto e sidebar a pie di pagina. Per aggiungere un widget ad una sidebar, si può selezionare il widget desiderato dall elenco di sinistra e trascinarlo in uno dei box di destra (Figura 2.6). Per quasi tutti i widget, oltre al posizionamento in una sidebar, è anche possibile impostare un titolo. Altra funzionalità cruciale di WordPress è Menù. Grazie a questa funzionalità potremo gestire tutti i menù presenti nel nostro sito aggiungendo voci e sottovoci (Figura 2.7). 28 Goffredo Latella

41 Realizzazione di un sistema informativo basato su social network... Figura Schermata di spostamento dei widget nella sidebar Figura Schermata relativa alla pagina di gestione del menu E possibile creare vari menù e poi decidere se inserirli in una delle posizioni che vengono proposte. Il numero delle posizioni in cui è possibile collocare il menù varia in base al tema che stiamo utilizzando. Ad esempio, ci sono temi che consentono l inserimento dei menù in una sola posizione e altri che prevedono anche tre/quattro posizioni in cui inserire un menù. Quando il menu è stato creato, possiamo procedere con inserimento delle varie voci. Gli elementi di base che possiamo inserire sono: Pagine, Link o categorie di Articoli. Come si vede nella schermata appena proposta questi tre elementi sono presenti a sinistra. Si può trovare l elemento che ci interessa, aggiungere il simbolo di spunta e premere il pulsante Aggiungi al menu. Quando le voci del menu saranno state aggiunte al box centrale ( Struttura del menu ), mediante trascinamento, potremo riordinarle o scegliere se si tratta di voci principali o sottovoci. Goffredo Latella 29

42 Realizzazione di un sistema informativo basato su social network I plugin I plugin sono degli elementi esterni che consentono di incrementare le funzionalità del sistema. Come per i temi, esistono plugin gratuiti ed a pagamento. La voce plugin, presente nel menù di sinistra, ci consente di aggiungerne di nuovi, di aggiornare quelli presenti, oppure di effettuare disattivazioni ed eliminazioni. I plugin hanno il pregio di estendere le funzionalità del sito ed il difetto di minare la sicurezza se non aggiornati. Infatti essendo elementi esterni non nativi di WordPress devono essere costantemente aggiornati e verificati. La cosa da verificare (prima dell installazione) è se il plugin è compatibile con la versione di WordPress in uso, in caso contrario è assolutamente sconsigliato l utilizzo di tale componente. Inoltre, periodicamente, o quando disponibile le nuove versioni, è necessario aggiornare i vari plugin. Tra i plugin che abbiamo utilizzato abbiamo BuddyPress che vedremo in dettaglio nella prossima sezione Gli utenti WordPress prevede diversi livelli di accesso al pannello di controllo. Ciascun livello (il sistema lo chiama ruolo) ha permessi diversi. Si va dal ruolo Amministratore che ha il controllo completo della piattaforma, al ruolo Sottoscrittore che può commentare gli articoli o poco più. Più specificatamente i ruoli base disponibili sono: Amministratore L amministratore è la persona che ha il pieno controllo del sistema; oltre ad avere il controllo assoluto su articoli, pagine, commenti, plugin extra installati, può gestire il tema del sito, modificarlo, installare plugin, widget. Egli può ovviamente gestire gli utenti ed i loro ruoli. Editore L editore è solitamente la persona responsabile dell area scritta, nel senso che ha il pieno controllo, analogamente a quanto avviene per l amministratore degli articoli e pagine in tutti i loro aspetti, dalla gestione delle categorie, all editing di articoli e pagine anche non scritte da lui. Di solito all editore è consentito anche utilizzare anche alcuni plugin esterni come per esempio una galleria di immagini esterna ai media. Autore L autore è la persona che scrive gli articoli; può infatti creare, modificare e pubblicare articoli ma a livello dirigenziale ha diritti e doveri solo verso i propri articoli. Questo ruolo per esempio viene assegnato a persone che scrivono sul blog. Collaboratore Il collaboratore è un utente che può gestire i propri articoli ma non può pubblicarli. Di solito il collaboratore prepara l articolo, l autore lo controlla e lo pubblica. Sottoscrittore I sottoscrittori sono gli utenti solitamente esterni al sito che possono leggere, commentare (se è richiesta la registrazione per farlo) o iscriversi alla newsletter. La registrazione viene richiesta 30 Goffredo Latella

43 Realizzazione di un sistema informativo basato su social network... appunto in casi particolari come per esempio iscriversi alla newsletter o accedere ad un area riservata del sito dedicata ai registrati ( ad esempio l area riservata per gli ordini o le consulenze). Per gestire utenti e ruoli esiste la sezione Utenti tramite la quale si possono modificare permessi di un utente già presente, aggiungere un nuovo utente, assegnare allo stesso un ruolo specifico e modificare le corrispettive informazioni (Figura 2.8). Figura Schermata della pagina relativa alla gestione degli utenti Quando viene creato un nuovo utente, il sistema chiede se sì vuole che venga inviata automaticamente una mail all utente con il nome utente, la password ed il link per accedere al pannello. Ritengo questa funzione estremamente utile, soprattutto nel caso in cui il numero degli utenti da aggiungere sia elevato Gli strumenti Gli strumenti di base che WordPress mette a disposizione, consento di importare ed esportare contenuti da sistemi diversi. Questa funzione è utile se intendiamo spostare il nostro sito da un server ad un altro. Nel caso in cui non abbiamo un semplice blog, ma un sistema più complesso, sconsiglio di utilizzare tali strumenti. Uno strumento molto utile (presente solo se è installato il relativo plugin) consente di pianificare il backup del database. Ad esempio possiamo scegliere di ricevere ogni sera via il backup del database. Solitamente le società di Web hosting mettono a disposizione strumenti automatici di backup, ma quasi mai forniscono questo servizio gratuitamente. Grazie ad un plugin possiamo implementare noi questa funzione in maniera totalmente automatizzata e gratuita. Goffredo Latella 31

44 Realizzazione di un sistema informativo basato su social network Le impostazioni L ultima voce del menù di sinistra è Impostazioni. In questo menu sono presenti altre sottovoci alcune delle quali decisamente importanti sia per la sicurezza del nostro portale che per l indicizzazione sui motori di ricerca. Tra le più importanti sottovoci troviamo: La sotto sezione Generali, che permette di inserire le informazioni di base del sito come titolo, motto, indirizzo URL, indirizzo principale e formato della data ed dell ora. La sotto sezione Lettura che permette di scegliere se la prima pagina del nostro sito deve mostrare gli ultimi articoli inseriti, oppure una pagina statica. In questo secondo caso possiamo anche scegliere quale altra pagina del sito deve mostrare l elenco degli ultimi articoli inseriti. Ad esempio possiamo creare una pagina e chiamarla Blog oppure News e poi indicarla in questa schermata come Pagina articoli. In questo modo aprendo la pagina Blog oppure News verranno mostrati automaticamente gli ultimi articoli inseriti. La schermata ci consente anche di impostare il numero di articoli da mostrare in anteprima per ogni schermata. La sotto sezione Discussione è dedicata alle funzionalità che consentono agli utenti di interagire con il sito, in particolare, quindi, ai comenti. Si può scegliere chi possa pubblicare commenti, se questi debbano essere prima approvati o possano essere direttamente pubblicati, se si vuole essere avvisati via ogni qualvolta venga inserito un commento, se consentire agli autori del commento di utilizzare le emoticon. La sotto sezione Permalink è in assoluto l ultima delle voci di menù ma, al contrario, per quanto riguarda l indicizzazione del sito è fondamentale. Infatti ci consente di specificare come sarà composto l URL delle varie pagine o articoli (Figura 2.9). Ad esempio possiamo scegliere se l URL della pagina Chi siamo debba avere il formato: oppure questo: Nel primo caso il l URL della pagina è composto dall indirizzo del sito e da /?page_id=2, mentre nel secondo caso da /chi-siamo. Come si vede chiaramente nel secondo caso, nell URL è indicato chiaramente quello che sarà in contenuto della pagina. Questa caratteristica viene premiata dai motori di ricerca con un punteggio maggiore in termini di indicizzazione. Infatti si crea una situazione ideale in cui l URL della pagina o dell articolo, il titolo e il contenuto, contengono le stesse parole. 32 Goffredo Latella

45 Realizzazione di un sistema informativo basato su social network... Figura Schermata relativa alle impostazioni Permalink 2.3 Il plugin Buddypress Cos è Buddypress Il motto di BuddyPress è BuddyPress is built to bring people together, proprio per sottolineare la vocazione a trasformare il proprio sito su piattaforma WordPress in un social network dove le persone possono condividere interessi, conoscenze, esperienze in modo molto semplice e intuitivo Utilizzo Ci sono due modalità di utilizzo per BuddyPress, una potrebbe essere quella di creare come già detto, un social network, l altra è invece quella di utilizzare BuddyPress per creare un network di blog dove ogni blogger ha il suo spazio e può comunicare con gli altri membri del network in modo analogo a quanto accade su servizi come Facebook o MySpace. Con BuddyPress, l amministratore del sito ha Goffredo Latella 33

46 Realizzazione di un sistema informativo basato su social network la possibilità di personalizzare i campi del profilo, come la città, il compleanno, la musica preferita, ecc. I campi del profilo possono essere raggruppati, e la pagina del profilo può essere composta dai gruppi in ordine di creazione. Il profilo include anche un avatar personalizzabile dall utente Considerazioni e vantaggi Il plugin BuddyPress permette di trasformare un sito Web realizzato in WordPress in una sito Web con funzionalità di social-network, con profili utente, flussi di attività, gruppi di utenti, e altro ancora. La potenza di tale plugin sta nella facilità e nella velocità di aggiungere la suddetta funzionalità all interno di un sito Web. In alcuni casi in cui BuddyPress si presta in modo perfetto sono per esempio: un social network per l'università, la scuola o all'università; uno strumento di comunicazione interna per l azienda; una social network di nicchia per il un argomento di interesse; una social network focalizzata per il lancio di un nuovo prodotto. L importanza di BuddyPress è legata all attuale diffusione e radicamento nelle abitudini quotidiane di tutti dei social network, che da quelli più famosi e conosciuti a quelli meno noti, consentono non solo di intrattenere relazioni a distanza, ma anche di accedere a gruppi di individui che condividono passioni, interessi, o necessità. La possibilità di favorire scambi di informazioni, opinioni, e know how, oltre che di intrattenere semplici relazioni sociali, con la necessità di abbattere i tempi di risposta e di avere un ampio bacino di utenza sono sicuramente degli input interessanti per i futuri sviluppi di BuddyPress e per una sua maggiore diffusione. 2.4 Considerazioni finali Volendo fare un resoconto dei principali vantaggi di WordPress, abbiamo: una grande quantità di temi disponibili; una vasta disponibilità di plugin; un ottimo strumento per indicizzazione nei motori di ricerca; la possibilità di gestire siti Web multipli in un unico dashboard; una facilità di integrazione con i profili social networking; la disponibilità costate di moduli di e-commerce in fase di sviluppo; facilità di gestione del sito Internet; economicità 34 Goffredo Latella

47 Realizzazione di un sistema informativo basato su social network... Di contro WordPress presenta svantaggi di essere una piattaforma open source, quindi facilmente attaccabile da hacker quando trovano un bug. Inoltre, un ulteriore svantaggio si ha nei continui aggiornamenti del sistema, questo rischia di far perdere compatibilità con i plugin installati. Chiaramente i vantaggi sorpassano di molto gli svantaggi. In conclusione, WordPress è i CMS pù utilizzato al mondo; non lo è per caso, ma per le garanzie di versatilità e semplicità che offre. Goffredo Latella 35

48

49 Capitolo 3 Analisi dei requisiti In questo capitolo viene descritta la prima fase per la realizzazione del sistema informativo oggetto della presente tesi, ovvero l analisi dei requisiti. L obiettivo è quello di descrivere in maniera completa cosa il sistema dovrà fare. Dopo la descrizione delle caratteristiche generali dell analisi dei requisiti, verrà presa in considerazione la realtà di nostro interesse, ovvero un sistema informativo a supporto del turismo locale.

50 Realizzazione di un sistema informativo basato su social network 3.1 Introduzione Prima di analizzare gli strumenti principali utilizzati nel progetto realizzato, è doveroso trattare le tecnologie che stanno alla base e che, unite, permettono di avere a disposizione dei sistemi robusti ed efficienti. L analisi dei requisiti rappresenta una delle prime fasi nel ciclo di vita di un prodotto software; scopo generale di questa attività è stabilire cosa il sistema in questione deve fare (mentre le decisioni sul come sono rimandate alla successiva fase di progettazione). La raccolta dei requisiti consiste nell individuazione delle caratteristiche che il sistema da realizzare dovrà possedere. Tali caratteristiche riguardano sia l aspetto statico (i dati), sia l aspetto dinamico (le operazioni sui dati) dell applicazione da realizzare. I requisiti vengono raccolti in specifiche espresse in linguaggio naturale e, per questo motivo, spesso ambigue e disorganizzate. L analisi dei requisiti viene effettuata con l obiettivo di chiarire e di organizzare le specifiche raccolte. La fase di raccolta ed analisi dei requisiti è necessaria, in quanto l analista può non essere un esperto della realtà da informatizzare; è quindi, di fondamentale importanza che egli possa comprendere a fondo il dominio del problema. Il dialogo con il cliente e con le persone che, successivamente, utilizzeranno il prodotto è, comunque, importante anche nel caso in cui l analista conosca la realtà di interesse; solo confrontandosi con gli utenti, infatti, egli potrà capire quali sono i requisiti desiderati. Se l analista, superficialmente, presuppone di avere conoscenza della materia, è facile che il suo lavoro porti a requisiti non precisi. I requisiti dell applicazione possono provenire da diverse fonti, tra le quali: gli utenti dell applicazione, contattati attraverso opportune interviste e questionari; la documentazione esistente attinente al problema in studio: moduli, regolamenti interni, etc.; eventuali realizzazioni preesistenti dell applicazione. Il coinvolgimento del cliente e degli utenti nel processo di analisi dei requisiti riveste una fondamentale importanza; in tal modo, infatti, aumenta il livello di soddisfazione nei confronti del sistema che verrà loro consegnato e viene agevolato il lavoro dei progettisti; in particolare, questi ultimi hanno la possibilità di osservare la realtà di interesse sotto diversi punti di vista. Avviene che utenti diversi forniscano informazioni diverse e, spesso, complementari: gli utenti di livello più alto hanno una visione più ampia e meno dettagliata della realtà, mentre gli utenti di livello più basso possono essere esperti di singoli sotto problemi. Le interviste si rivelano tutt altro che semplici: gli analisti possono avere difficoltà a comprendere il linguaggio e il contesto culturale del cliente, e viceversa; inoltre, lo stesso cliente potrebbe avere difficoltà a mettere a fuoco i propri reali bisogni e, di conseguenza, le richieste o le proposte da mettere sul tavolo della discussione. Proprio a causa di queste difficoltà, i modelli di ciclo di vita del software moderni hanno abbandonato l assunzione che sia possibile identificare i requisiti di un sistema software a priori, e tendono a privilegiare approcci 38 Goffredo Latella

51 Realizzazione di un sistema informativo basato su social network... iterativi in cui i requisiti vengono esplicitati gradualmente, per esempio coinvolgendo l utente nella prova di prototipi e rilasci parziali del sistema in corso di sviluppo. Alcune regole generali per ottenere una specifica precisa e priva di ambiguità della realtà di interesse sono: Mantenere un livello di astrazione costante: evitare termini troppo generici o troppo specifici che rendono poco chiaro il concetto. Evitare frasi contorte: le definizioni devono essere semplici e chiare; occorre, preferibilmente, uniformare lo stile sintattico standardizzando la struttura delle frasi. Evitare di utilizzare sinonimi e omonimi: i sinonimi indicano termini diversi con il medesimo significato mentre gli omonimi termini uguali con differenti significati. Queste situazioni possono creare ambiguità e vanno chiarite; nel caso di sinonimi si effettua un unificazione dei termini; nel caso di omonimi si cerca di utilizzare termini diversi. 3.2 Analisi dei requisiti Il documento dei requisiti contiene la definizione ufficiale di cosa viene richiesto agli sviluppatori. Dovrebbe includere sia la definizione che la specifica dei requisiti. Non è un documento di progettazione. Per quanto possibile, dice cosa il sistema deve fare, non come lo farà. Per comodità, divideremo il flusso di lavoro dei requisiti in tre argomenti distinti: 1. Obiettivi, descrivono perché si costruisce il sistema e come questo risponde ai bisogni dell organizzazione; 2. Requisiti funzionali che descrivono in dettaglio i servizi da fornire e requisiti non funzionali, che definiscono i vincoli sul sistema e sul suo processo di sviluppo; 3. Modellazione dei casi d uso Obiettivo del sistema informatico La presente tesi ha come obiettivo la progettazione e la realizzazione di un sistema informativo basato su social network e la realtà aumentata per il supporto al turismo culturale di un territorio. Tale sistema nasce dall esigenza di accompagnare il turista nei punti di interesse di una città. Molte volte il turista che si trova in una nuova città conosce solo uno o due punti caratteristici del luogo e, tra l altro, spesso, non sa come raggiugerli. La soluzione ideale sarebbe quella di avere una persona che gli faccia da guida ma, molte volte, questa soluzione non è possibile. Un alternativa alla guida turistica può essere una soluzione informatica (di seguito chiamata applicazione ) che illustra al turista cosa visitare nel luogo in cui si trova. Questa applicazione permette al turista di essere guidato nei posti peculiari Goffredo Latella 39

52 Realizzazione di un sistema informativo basato su social network della città ed, inoltre, è concepita per la realtà aumentata, poiché quando un turista si trova davanti ad un monumento culturale o ad un area caratteristica della città, costui sarà avvisato dall applicazione. Per esempio, supponiamo di trovarci a Catania e passare davanti alla casa in Figura 3.1. Figura Questa in figura è la casa natale di Giovanni Verga Sembrerebbe una casa diroccata, vecchia e senza nessun valore; tuttavia essa racchiude un importante pezzo di storia della cultura italiana, in quanto casa natale di Giovanni Verga. L Italia è il Paese con il maggior patrimonio culturale al mondo, ma gran parte dei meravigliosi luoghi di interesse sono poco conosciuti o difficilmente raggiungibili. L applicazione oggetto della presente tesi ha il duplice obiettivo di indirizzare il turista verso cosa visitare nella città e, indirettamente, di aiutare il territorio stesso al rilancio del turismo locale. Pensiamo alle realtà di Roccella, Bagnara, Ischia, etc, sono posti che vivono di turismo. Un turista che visita un paese è desideroso di conoscere una nuova cultura; se il bilancio del viaggio sarà positivo, probabilmente, pubblicizzerà volentieri il luogo da cui è rimasto affascinato. Un ulteriore funzionalità del sistema informatico in esame è che, questo, potrà fungere da social network permettendo di condividere momenti e contenuti quali foto, audio e video. La piattaforma realizzata è pensata per essere gestita lato back-end dal Comune il quale avrà il pieno controllo dei contenuti del sistema. Con questa applicazione, il Comune è dotato di uno strumento veloce per comunicare informazioni differenti a seconda se l utilizzatore sarà un turista oppure un residente. Per esempio, potrà inviare promozioni esclusive direttamente ai turisti e comunicazioni logistiche ai residenti. Il social network si rivela uno strumento utile anche per i proprietari di locali o attrazioni, in quanto questi potranno inserire al suo interno, le proprie offerte, rivolgendosi, cosi, ad una clientela più mirata rispetto a quanto potrebbe fare una pubblicità di tipo generalista. 40 Goffredo Latella

53 Realizzazione di un sistema informativo basato su social network Requisiti La realtà di interesse può essere suddivisa in sei macro-aree principali: la macro-area utenti ; contiene informazioni riguardanti gli utenti che un utente può gestire; la macro-area articolo ; contiene informazioni riguardanti gli articoli che un utente può gestire; la macro-area media ; contiene informazioni riguardanti i contenuti multimediali che un utente può gestire; la macro-area pagine ; contiene informazioni riguardanti le pagine che l utente può gestire; la macro-area gruppi ; contiene informazioni riguardanti i gruppi che un utente può gestire; la macro-area commenti ; contiene informazioni riguardanti i commenti che un utente può gestire. Di seguito è riportata una descrizione dei requisiti di ogni macro-area. Requisiti della macro-area utenti. Ogni utente del sistema è definito univocamente da un codice, da un username e da password. Il sistema dovrà gestire diverse tipologie di utenti, in base ai permessi concessi dall amministratore che è la figura con maggiori poteri. Il sistema dovrà predisporre i metodi per la creazione, la modifica, la ricerca e la cancellazione di un utente. L utente turista potrà, soltanto ricercare gli utenti e comunicare con essi. Requisiti della macro-area articolo. Ogni articolo è definito univocamente da un codice e da un nome. Il sistema dovrà predisporre i metodi per la creazione, la modifica, la ricerca e la cancellazione di un articolo. Dopo la creazione di un articolo il sistema deve permettere la pubblicazione di quest ultimo all interno del social network, in modo che lo stesso sia visibile dagli altri utenti. Si richiede infine al sistema di predisporre la creazione di un articolo con strumenti di formattazione e la possibilità di inserire all interno di un articolo un contenuto multimediale, come foto e video. Requisiti della macro-area media. Ogni media (dove con questo termine si intende qualunque contenuto multimediale) come foto, audio e video, è definito univocamente da un codice e da un nome. Il sistema dovrà predisporre i metodi per l importazione, la memorizzazione, la ricerca e la cancellazione di un contenuto multimediale. Goffredo Latella 41

54 Realizzazione di un sistema informativo basato su social network Requisiti della macro-area pagina. Ogni pagina è definita univocamente da un codice e da un nome. Il sistema dovrà predisporre i metodi per la creazione, la modifica, la ricerca e la cancellazione di una pagina. Dopo la creazione di una pagina da parte dell utente amministratore, il sistema deve permettere la sua pubblicazione in modo che la stessa sia visibile dagli altri utenti. Si richiede infine al sistema di predisporre la creazione di un articolo con strumenti di formattazione e la possibilità di inserire all interno di un articolo un contenuto multimediale, come foto e video. Requisiti della macro-area gruppo. Ogni gruppo, dove per gruppo si intende un insieme di persone che condividono un interesse, è definito univocamente da un codice e da un nome. Il sistema dovrà predisporre i metodi per la creazione, la modifica, la ricerca e la cancellazione di un gruppo. Dopo la creazione di un gruppo da parte dell utente amministratore, il sistema deve permettere la sua pubblicazione in modo da essere visibile dagli altri utenti. Si richiede infine al sistema di predisporre un metodo che permetta all utente turista di richiedere l accesso a un gruppo e all utente amministratore di valutare la sua richiesta. Requisiti della macro-area commento. Ogni commento è definito univocamente da un codice. Il sistema dovrà predisporre i metodi per la creazione, la modifica, la ricerca e la cancellazione di un commento. Dopo la creazione di un commento il sistema deve permettere inoltre la pubblicazione di quest ultimo all interno del social network, dopo l approvazione da parte dell utente amministratore. Infine si possono sintetizzare i requisiti in maniera puntuale classificandoli in requisiti funzionali e non funzionali: I requisiti funzionali del sistema sono quelli che specificano cosa esso dovrà fare. Per il nostro sistema i requisiti funzionali ricavati sono i seguenti: RF1- Il sistema dovrà gestire le registrazioni degli utenti; RF2 Il sistema dovrà gestire l autenticazione dell utente; RF3- Il sistema dovrà gestire gli articoli; RF4- Il sistema dovrà gestire i commenti; RF5- Il sistema dovrà gestire i media; RF6- Il sistema dovrà gestire i link; RF7- Il sistema dovrà gestire le pagine; RF8- Il sistema dovrà gestire gli utenti; RF9- Il sistema dovrà gestire i gruppi; RF10- Il sistema dovrà gestire i forum; RF11- Il sistema dovrà gestire la guida dell utente per giungere a destinazione; 42 Goffredo Latella

55 Realizzazione di un sistema informativo basato su social network... RF12- Il sistema dovrà gestire le notifiche da inviare al dispositivo quando si trova nei pressi del luogo di interesse; RF13- Il sistema dovrà gestire la comunicazione tra utenti; RF14- Il sistema dovrà gestire lo scambio di documenti. I requisiti non funzionali esprimono i vincoli che esso dovrà rispettare. Quelli ricavati sono i seguenti: RNF-1 Il sistema dovrà interfacciarsi con un DBMS MySQL; RNF-2 Il sistema dovrà avere un portale Web; RNF-3 Il sistema dovrà avere un interfaccia per dispositivi mobili; RNF-4 Il sistema dovrà essere scaricabile dalla sezione market dei dispositivi. Rimandiamo al capitolo successivo la descrizione dei casi d uso e dei mock-up. Goffredo Latella 43

56

57 Capitolo 4 Progettazione del sistema In questo capitolo viene descritta la fase di progettazione del sistema informativo oggetto della presente tesi. L obiettivo è quello di definire un nuovo documento, scritto in linguaggio tecnico/formale, da dare ai programmatori, per guidarli nell implementazione del software descritto nel Documento dei Requisiti Software. Dopo la descrizione dei casi d uso e dei diagrammi di attività, verranno presi in considerazione i mock-up, del sistema da realizzare.

58 Realizzazione di un sistema informativo basato su social network 4.1 Introduzione Spesso l'attività di progettazione, detta a volte anche sintesi, procede a ritroso rispetto alla corrispettiva fase di analisi delle caratteristiche di un dato sistema. In particolare, si fissa generalmente il tipo di sistema da realizzare per soddisfare determinate specifiche o servizi e si cercano le soluzioni tecniche, note o innovative, in termini di sottosistemi per soddisfare i requisiti del sistema scelto. Spesso al riguardo è invalsa la tecnica del divide et impera che prevede cioè di suddividere l'intera opera di progettazione e le sue fasi in più parti distinte, per agevolare e semplificare l'attività, per poi i riassemblare ciascuna parte nel tutto finale. Sulla base della specifica dei requisiti prodotta dall'analisi, la fase di progettazione definisce come tali requisiti saranno soddisfatti, entrando nel merito della struttura che dovrà essere data al sistema software che deve essere realizzato. La progettazione rimane comunque una fase distinta dalla programmazione o codifica, che corrisponde alla traduzione in un particolare linguaggio di programmazione delle decisioni prese in sede di progettazione, cioè dunque la fase implementativa. Le distinzioni fra le attività fin qui menzionate non sono sempre chiare come vorrebbero le teorie classiche dell'ingegneria del software. La progettazione, in particolare, può descrivere il funzionamento interno di un sistema a diversi livelli di dettaglio, ciascuno dei quali si colloca in una posizione intermedia fra analisi e codifica. Quindi la progettazione di un sistema software (o System Design) è l insieme dei task svolti dall ingegnere del software per trasformare il modello di analisi nel modello di design del sistema. Iniziamo a dettagliare la progettazione, partendo dalla definizione dei casi d uso. 4.2 I casi d uso Un caso d uso è la specifica di una sequenza di azioni, incluse eventuali sequenze alternative e sequenze di errore, che un sistema, un sottosistema o una classe può eseguire interagendo con attori esterni. La descrizione dei casi d uso richiede, quindi, come primo passo, l identificazione degli attori che utilizzeranno direttamente il sistema e l individuazione dei confini dello stesso. I casi d uso vengono avviati da un attore che ne descrive il suo punto di vista. Tipicamente le sezioni che compongono un caso d uso sono: un nome per ricordare o suggerire cosa descrive; un numero identificativo ; una breve descrizione per identificare a cosa serve il caso d uso; gli attori, tipicamente vengono indicati sia gli attori primari che quelli secondari ; 46 Goffredo Latella

59 Realizzazione di un sistema informativo basato su social network... la sequenza degli eventi principale, ovvero descrizione dei vari passi che compongono il caso d uso ; le post-condizioni, ovvero le condizioni che dovranno essere vere al termine del caso d uso; la sequenza degli eventi alternativa, ovvero le eccezioni al normale flusso di eventi. Pertanto un caso d uso è una funzionalità che il sistema mette a disposizione degli attori Costruzione dei casi d uso Dall analisi dei requisiti appena eseguita si possono dedurre due attori semplici e un attore evento (Figura 4.1). Figura Gli attori del sistema L attore utente può essere di due tipi, ovvero turista e amministratore di sistema. Il miglior modo di rappresentare i casi d uso del sistema è quello grafico (Diagramma dei casi d uso), in cui vengono rappresentati i confini del sistema, gli attori, i casi d uso e le loro relazioni. Un esempio di diagramma dei casi d uso è riportato in Figura 4.2. E possibile notare come il formalismo grafico di tale diagramma prevede che i confini del sistema vengano rappresentati attraverso un rettangolo, gli attori mediante un icona che denota un uomo stilizzato (stickman), mentre i casi d uso come un ellisse contenente il rispettivo nome. Le relazioni tra Goffredo Latella 47

60 Realizzazione di un sistema informativo basato su social network i casi d uso sono indicate, invece, attraverso parole chiave, e possono essere di tre tipologie: (i) generalizzazione/specializzazione, che associa un caso d uso di tipo generale ad uno o più casi d uso specializzati; (ii) <<include>>, che caratterizza casi d uso diversi aventi una sequenza di passi da svolgere in comune; (iii) <<extend>>, che permette di definire un caso d uso base ed estenderlo con il comportamento definito in un altro caso d uso. Il diagramma dei casi d uso del sistema realizzato lato Web si può vedere in Figura 4.3. Come si può notare dal diagramma, l utente turista può avere accesso alle funzionalità di gestione degli articoli, dei commenti, delle immagini, egli può avere altresì accesso al sistema, condividere contenuti, ricercare gruppi, ricercare utenti, ricercare documenti, entrare in un gruppo, etc. L utente amministratore ha accesso a tutti i contenuti del sito; egli può gestire le pagine, i gruppi e gli utenti. Per brevità di tempo ci soffermeremo a descrivere in particolare solo due casi d uso, ovvero gestione commento e gestione gruppo. Figura Esempio di diagramma dei casi d'uso Caso d uso Gestione commento La Figura 4.4 descrive il caso d uso Gestione commento. Pre-condizioni: Un utente valido ha effettuato il login. Si ha una connessione ad Internet Flusso di eventi: Percorso Normale: Per la gestione dei commenti l utente ha le seguenti funzionalità: scrivere un commento; eliminare un commento da lui scritto; 48 Goffredo Latella

61 Realizzazione di un sistema informativo basato su social network... modificare un proprio commento; ricercare un commento; pubblicare un commento. Affinché si possa pubblicare un commento deve essere prima verificato e approvato dall utente amministratore. Figura Casi d'uso del sistema informatico lato Web Goffredo Latella 49

62 Realizzazione di un sistema informativo basato su social network Figura Caso d'uso Gestione commento Caso d uso Gestione gruppi La Figura 4.5 descrive il caso d uso Gestione Gruppo. Figura 4.5- Caso d'uso Gestione gruppo 50 Goffredo Latella

63 Realizzazione di un sistema informativo basato su social network... Pre-condizioni: Un utente valido ha effettuato il login. Flusso di eventi: Percorso Normale: Per la gestione dei gruppi l utente amministratore può svolgere le seguenti funzionalità: crea gruppo; elimina gruppo; modifica gruppo; ricerca gruppo. L utente turista può ricercare e visualizzare un gruppo. Una volta visualizzato un gruppo egli può richiedere di farne parte. L amministratore può decidere se accettare tale richiesta o se declinarla. 4.3 I diagrammi di attività Un diagramma di attività modella un processo. Esso organizza più entità in un insieme di azioni secondo un determinato flusso. Graficamente un diagramma di attività è un insieme di archi e nodi (analogamente ad un diagramma di stato). I diagrammi di attività, in UML, sono usati per descrivere il comportamento dinamico di un sistema. Un diagramma di attività è essenzialmente un flowchart, che mostra il flusso di controllo tra un attività e l altra. L'Activity Diagram (in italiano, diagramma delle attività) è un diagramma previsto dallo Unified Modeling Language (UML) che definisce le attività da svolgere per realizzare una data funzionalità. Più in dettaglio, un activity diagram definisce una serie di attività o flussi, anche in termini di relazioni tra le attività, i responsabili per le singole attività e i punti di decisione. L'activity diagram viene spesso usato come modello complementare allo use case diagram, per descrivere le dinamiche con cui si sviluppano i diversi use case. Un activity rappresenta una specifica attività che deve essere svolta all'interno della funzione. Essa è rappresentata da un rettangolo smussato con una descrizione della stessa. Il flusso è rappresentato tramite delle frecce orientate, che indicano la sequenza temporale con cui devono essere effettuate le diverse attività. È previsto un simbolo per indicare l'inizio del flusso ed un altro per indicarne il termine. Le attività possono essere anche rese in parallelo; in questo caso il punto di divisione (fork) è rappresentato da frecce divergenti rispetto ad un segmento. Nel caso le attività siano alternative, cioè svolte o meno rispetto ad una scelta, il punto di decisione è rappresentato da dei rombi da cui partono i flussi alternativi. Il punto di ricongiungimento (join) è reso tramite un segmento su cui le frecce si ricongiungono. Un caso d uso può essere il punto di partenza per la costruzione di un diagramma di attività: entrambi sono rappresentazioni tipiche dell analisi di un problema (o di un dominio). Il diagramma di attività fornisce una prospettiva algoritmica, mentre i casi d uso forniscono una prospettiva funzionale. Le due viste sono correlate, ma non totalmente equivalenti. Il punto di partenza per costruire un Goffredo Latella 51

64 Realizzazione di un sistema informativo basato su social network diagramma di attività da un caso d uso sono le descrizioni testuali, i flussi alternativi, le eccezioni, i singoli passi, le post condizioni, le condizioni di terminazione. Di seguito verranno schematizzati i diagrammi di attività per i casi d uso accesso al sistema (Figura 4.6), condividi contenuto (Figura 4.7) e attività invia notifica (Figura 4.8) Diagramma di attività di accesso al sistema Il diagramma di attività del caso d uso accesso al sistema inizia quando l attore utente decide di accedere al sistema. Il sistema mette a disposizione dell utente una schermata con due campi di testo editabili per inserire username e password. L utente può trovarsi in tre situazioni: Non essere registrato: in questo caso il sistema permette al nuovo visitatore di registrarsi reindirizzandolo alla pagina di registrazione. Aver dimenticato Username e password: il sistema propone il reset della password. A tal fine esso mostra all utente un campo dove inserire lo username (se lo ricorda) o l con il quale si è registrato. Dopo la verifica da parte del sistema, della presenza dell o dello username inserito, esso invia una all utente contenente un link ad una pagina per inserire una nuova password. Una volta inserite la nuova password questa viene aggiornata e si può procedere all accesso al sistema. L utente inserisce username e password correttamente: dopo la verifica della correttezza delle credenziali inserite, il sistema reindirizza l utente ad una pagina in base al ruolo dell utente. Quando detto è schematizzato in Figura Diagramma di attività del caso d uso condividi contenuto Il caso d uso condividi contenuto inizia quando l attore visitatore decide di condividere un documento nel social network. Il sistema inizialmente verifica se l accesso al sistema è stato effettuato, altrimenti lo reindirizza al caso d uso accesso al sistema. Dopo aver verificato l accesso, il sistema abilita il turista alla possibilità di pubblicare il contenuto all interno del proprio diario o all interno di un gruppo al quale è iscritto. Una volta che l utente avrà specificato dove pubblicare il contenuto, il sistema mette a disposizione dell utente un campo di testo come didascalia del contenuto e un pulsante per allegare il documento (foto, video, o altro) da pubblicare. Per allegare un documento, il sistema crea una videata dei contenuti presenti nel dispositivo, quindi l utente potrà selezionare, per esempio, la foto che vuole pubblicare. Successivamente, il sistema verificherà che tutti i campi siano stati inseriti correttamente, e procederà con la pubblicazione all interno del social network. Quando detto è schematizzato in Figura Goffredo Latella

65 Realizzazione di un sistema informativo basato su social network Diagramma di attività del caso d uso invia notifica Il caso d uso invia notifica inizia quando l attore visitatore si trova in giro per la città e, più specificatamente, all interno di un area di interesse. Un requisito funzionale di questo caso d uso è che l applicazione mobile del sistema venga avviata dal dispositivo. Rappresenta, invece, un requisito prestazionale l attivazione del GPS nel dispositivo dell attore turista. Successivamente, se l utente si troverà nei pressi di un luogo caratteristico, il sistema lo avviserà, con una notifica, del rilievo del luogo in cui si trova. Quando il turista aprirà la notifica, il sistema lo reindirizzerà ad una pagina dove sarà illustrata la descrizione del posto. Se il turista, più volte, si troverà nell area già visitata, il sistema invierà la notifica soltanto la prima volta. Quando detto è schematizzato in Figura 4.8. act Accesso al sistema_activ itygraph Start Scelta caso [L'utente non ricorda username o password] [l'utente non è registrato] Il sistema mostra all'utente due campi di testo per inserire l'username e la password il sistema mostra all'utente un campo di testo dov e inserire l' o username se lo ricorda Il sistema mette a disposizione dell'utente dei campi per la registrazione Il sistema inv ia all' dell'utente un per resettare la password Il cliente compila i dati Goffredo Latella 53

66 Realizzazione di un sistema informativo basato su social network l'utente seleziona il link per resettare la passw ord Il sistema v erifica che i dati siano stati inseriti correttamente Il sistema mette a disposizione dell'utente un due campi per il resettaggio della passw ord All'utente v iene inv iata una di av v enuta registrazione Controllo Campi [L'utente lascia username o password vuote] Il sistema av v erte dell' errato inserimento dei dati Il sistema inv ia all'amministratore un per informarlo del nuov o utente registrato Fine Flusso Il sistema rendirizza l'utente ad una specifica pagina in base al ruolo dell'utente. End Figura Diagramma di attività del caso d uso "accesso al sistema" 54 Goffredo Latella

67 Realizzazione di un sistema informativo basato su social network... act Condiv idi contenuti_activ itygraph Start Il turista decide di pubblicare un contenuto come foto o v ideo all'interno del social netw ork. Il sistema v erifica se il turista si sia autenticato al social network. Controllo autenticazione [Il cliente non è autenticato] Il sistema reindirizza il turista al caso di accesso al sistema Il sistema chiede al turista se si v uole pubblicare il contenuto nel proprio diario o in un gruppo Scelta utente [Il turista seleziona gruppi] Il turista seleziona di pubblicare il contenuto all'interno del proprio diario Il turista seleziona di v oler pubblicare il contenuto in un gruppo Goffredo Latella 55

68 Realizzazione di un sistema informativo basato su social network Il sistema accede ai contenuti del dispositiv o per permettere al turista di selezionare il contenuto da pubblicare Il sistema mostra al turista l'elenco dei gruppi al quale è iscritto Il turista seleziona il gruppo Il sistema mette a disposizione del turista un campo per una didascalia opzionale e un pulsante allega per il caricamento del file da pubblicare Il sistema v erifica che tutti i campi siano stati inseriti correttamente Controllo campi [Alcuni campi non sono stati inseriti correttamente] Il sistema pubblica il file nel social network Il sistema av v erte che alcuni campi non sono stati inserti in modo corretto End Figura Diagramma di attività caso d'uso Condividi contenuto 56 Goffredo Latella

69 Realizzazione di un sistema informativo basato su social network... act Invia Notifica_Activ itygraph Start Il turista ha av v iato l'applicazione all'interno del suo dispositiv o Verifica del GPS attivato verifica posizione turista [Il GPS non è attivo] Il turista si trov a all'interno di un area di interesse Il sistema inv ia una notifica al dispositiv o per infomarlo di essere nei pressi un luogo caratteristico del posto Il sistema informa il turista che il GPS non è attiv o e av v erte che per il corretto funzionamento del sistema bisogna attiv arlo. Il turista seleziona la notifica Goffredo Latella 57

70 Realizzazione di un sistema informativo basato su social network Il sistema mostra al turista la scheda illustrativ a del luogo caratteristico in cui si trov a. End 4.4 I Mock-up Figura Diagramma di attività del caso d uso Invia notifica Con il termine mock-up si intende un modello di base, un prototipo da cui partire per la realizzazione di un sito Web. Pertanto, Il mock-up consente di riprodurre un oggetto o modello in scala ridotta o maggiorata. I mock-up del sistema da realizzare si possono dividere in mock-up lato mobile e mock-up lato Web. Il mock-up della pagina principale lato mobile è mostrato in Figura 4.9 Figura Il mock-up relativo alla schermata iniziale lato mobile 58 Goffredo Latella

71 Realizzazione di un sistema informativo basato su social network... La pagina principale dell applicazione presenterà un elenco dei luoghi culturali caratteristici del paese. In alto a sinistra sarà presente un collegamento al menù dell applicazione dove possiamo accedere a tutte le sezioni della stessa (ad esempio, impostazioni, account, navigazione ). Un esempio navigazione che è l area permette di trasformare il dispositivo in un navigatore personale. Un altra sezione dell applicazione è monumento (Figura 4.11) composta da un immagine centrale del monumento e di seguito una descrizione testuale dello stesso. Nella sezione più in basso è presente un footer che contiene un controllo musicale per gestire la voce dell operatore che spiega il monumento caratteristico del luogo. Il sistema lato front-end, cioè la parte vista dai turisti, viene mostrata in Figura 4.12, mentre in Figura 4.13 si può vedere il mock-up del sistema lato back-end, ovvero come viene visto dall utente amministratore. Figura Il mock-up relativo alla mappa del turista Goffredo Latella 59

72 Realizzazione di un sistema informativo basato su social network Figura Il mockup relativo alla schermata della descrizione del luogo Figura Il mock-up relativo alla schermata visitatore lato web 60 Goffredo Latella

73 Realizzazione di un sistema informativo basato su social network... Figura Il mock- up lato back-end Goffredo Latella 61

74

75 Capitolo 5 Implementazione del sistema In questo capitolo verrà analizzata l implementazione del sistema realizzato, composto dall applicazione per i dispositivi mobile e dal social network ed essa connesso. Si inizierà con l'implementazione dell'applicazione, successivamente verranno descritti brevemente i database e i plugin scelti per la realizzazione delle funzionalità richieste; per finire, verranno prese in considerazione le caratteristiche implementative relative alla componente social di BuddyPress.

76 Realizzazione di un sistema informativo basato su social network 5.1 Introduzione Partendo dai risultati della fase di progetto, l implementazione deve produrre il codice, ovvero tradurre i modelli del progetto in un programma eseguibile. L implementazione, quindi, detta anche sviluppo o codifica del prodotto software; essa è la fase di realizzazione del software, che concretizza la soluzione software attraverso la programmazione, ovvero la stesura di programmi. La fase di implementazione coinvolge spesso numerose tecnologie relative non solo al prodotto, ma anche al processo che lo realizza. Per l implementazione lato mobile del nostro progetto si utilizzerà Apache Cordova come soluzione implementative per realizzare un applicazione mobile multi piattaforma; in questo modo si usufruiranno dei vantaggi visti nel Capitolo 1. Per quanto riguarda l implementazione lato Web per la creazione della social network si è utilizzato il CMS WordPress con il plugin BuddyPress. 5.2 Implementazione dell applicazione mobile Uno degli obiettivi del lavoro in esame è l implementazione di un applicazione mobile dotata di funzionalità di realtà aumentata per il turista. Il framework utilizzato per realizzare l applicazione è Apache Cordova. Quest ultimo come visto nel capitolo precedente, permette la realizzazione di applicazioni ibride multipiattaforma. Per estendere le funzionalità del progetto e quindi utilizzare i vari componenti hardware del dispositivo, Apache Cordova mette a disposizione dei plugin. Per la realizzazione del progetto lato mobile sono stati utilizzati i seguenti plugin: notification; geolocation; media; vibration. Nelle prossime sottosezioni si vedrà quale funzionalità aggiungono questi plugin al sistema Funzionalità di geolocalizzazione La funzionalità principale dell applicazione lato mobile del sistema è quella di geolocalizzazione; per realizzarla si è fatto uso di diversi plugin, quali geolocation e notification. Il plugin geolocation fornisce informazioni sulla posizione del dispositivo, come la latitudine e la longitudine. Comuni fonti di informazioni sulla posizione comprendono Global Positioning System (GPS) e la posizione rilevata dai segnali di rete come indirizzo IP, indirizzi, RFID, WiFi e Bluetooth MAC e cellulare GSM/CDMA IDs. Questa API è basata sulla Specifica di W3C Geolocation API. Il plugin notification fornisce le API per 64 Goffredo Latella

77 Realizzazione di un sistema informativo basato su social network... accedere alle finestre di dialogo dei dispositivi mobile. Il primo passo è stato quello di importare i due plugin nel progetto attraverso il Listato 5.1: 1 cordova plugin add org.apache.cordova.geolocation 2 $ cordova plugin ls 3 [ 'org.apache.cordova.geolocation' ] Listato Importazione dei plugin Questi comandi si applicano a tutte le piattaforme ma; tuttavia, le impostazioni di configurazione verranno modificate a seconda della piattaforma e del dispositivo utilizzato. Di seguito, alcuni esempi di configurazione per la piattaforma Android (Listato 5.2), ios (Listato 5.3) e Windows Phone (Listato 5.4). 1 (in app/res/xml/config.xml) 2 <feature name="geolocation"> 3 <param name="android-package" value="org.apache.cordova.geobroker" /> 4 </feature> 5 (in app/androidmanifest.xml) 6 <uses-permission android:name="android.permission.access_coarse_location" /> 7 <uses-permission android:name="android.permission.access_fine_location" /> 8 <uses-permission android:name="android.permission.access_location_extra_commands" /> Listato Configurazione per Android 1 <feature name="geolocation"> 2 <param name="ios-package" value="cdvlocation" /> 3 </feature> Listato Configurazione per ios 1 <Capabilities> 2 <Capability Name="ID_CAP_LOCATION" /> 3 </Capabilities> Listato Configurazione per Windows phone Il plugin geolocation mette a disposizione i seguenti metodi: geolocation.getcurrentposition: è una funzione asincrona; restituisce la posizione corrente del dispositivo; geolocation.watchposition: è una funzione asincrona; restituisce la posizione corrente del dispositivo quando viene rilevata una nuova posizione; Goffredo Latella 65

78 Realizzazione di un sistema informativo basato su social network geolocation.clearwatch: ferma il monitoraggio dei cambiamenti di posizione del dispositivo. 1 cordova plugin add org.apache.cordova.dialogs 2 $ cordova plugin add org.apache.cordova.vibration 3 $ cordova plugin ls 4 [ 'org.apache.cordova.dialogs','org.apache.cordova.vibration' ] Listato Plugin "notification" Per quanto riguarda il plugin notification si è proceduto all inserimento dello stesso all interno del progetto (Listato 5.5). Questi comandi si applicano a tutte le piattaforme, ma necessitano di una modifica alle impostazioni di configurazione dei specifici sistemi operativi (Android, ios, BlackBerry), così come descritto nei Listati 5.6, 5.7 e (in app/res/xml/config.xml) 2 <feature name="notification"> 3 <param name="android-package" value="org.apache.cordova.notification" /> 4 </feature> 5 (in app/androidmanifest.xml) 6 <uses-permission android:name="android.permission.vibrate" /> Listato Impostazioni del plugin notification per Android 1 <feature name="notification"> 2 <param name="ios-package" value="cdvnotification" /> 3 </feature> Listato Impostazioni del plugin notification per ios 1 (in www/plugins.xml) 2 <feature name="notification"> 3 <param name="blackberry-package" value="org.apache.cordova.notification.notification" /> 4 </feature> 5 (in www/config.xml) 6 <feature id="blackberry.ui.dialog" /> Listato Impostazioni del plugin notification per BlackBerry WebWork I metodi messi a disposizione da questo plugin sono: notification.alert: il metodo mostra una finestra di avviso o la finestra di dialogo personalizzata; 66 Goffredo Latella

79 Realizzazione di un sistema informativo basato su social network... notification.confirm: il metodo mette a disposizione una finestra di dialogo di conferma con testo personalizzabile; notification.beep: il metodo permette la riproduzione di un segnale sonoro (beep) del dispositivo; notification.vibrate: il metodo permette l attivazione di una vibrazione del dispositivo. Spiegati gli strumenti a basso livello utilizzati passiamo al codice di implementazione. L idea di base per implementare questa funzionalità è quella di inviare una notifica quando l utente si trova all interno di un area di interesse. Essa è delimitata da quattro punti, ciascuno dei quali è individuato da una coppia di valori, ossia la latitudine e la longitudine (Figura 5.1). Figura Determinazione area di interesse Il controllo viene effettuato all interno della pagina Javascript controlposition.js in (Listato 5.9). Affinché il sistema possa rilevare con precisione la posizione del turista, viene effettuato un controllo sulla bontà dell accuratezza della misurazione della posizione. Tale classificazione suddivide il turista in tre casi: ottimo, medio e scarso. Il livello ottimo significa che il sistema riesce a determinare la posizione del turista con un errore inferiore ai 10 metri; il livello medio significa che il sistema riesce a determinare la posizione del turista con un errore tra i 10 e i 30 metri; il livello scarso significa che il sistema ha difficoltà a rilevare la posizione del turista. In quest ultimo caso esso avverte il turista di controllare la corretta attivazione del GPS presente nel dispositivo (Figura 5.2). Successivamente Il sistema controlla la posizione del turista. Con il primo if controlla se la posizione corrente del turista si trova all interno di un perimetro delimitato dalle latitudini e longitudini inserite. Se egli si troverà all interno dell area, il sistema controllerà tramite il contatore se ha già visitato l area; se il contatore è pari a 0, vuol dire che l utente non è mai entrato nell area; in questo caso, potrà procedere con l invio della notifica; viceversa, se il contatore è posto a 1, il sistema non invierà la notifica. Goffredo Latella 67

80 Realizzazione di un sistema informativo basato su social network L invio della notifica è di tipo vibrazionale e sotto forma di messaggio. Quando la notifica sarà inviata, il sistema aggiornerà il contatore relativo al posto di interesse visitato, impedendogli di inoltrare altre notifiche al turista quando si troverà in quella medesima. Figura 5.2 Accuratezza del funzionamento del sistema 1 if((position.coords.accuracy>10)&&(position.coords.accuracy<30))test.i nnerhtml= 'MEDIO'; 2 if(position.coords.accuracy>50){ test.innerhtml= 'SCARSO'; alert("gentile utente, la tua posizione risulta essere poco accurata, controlla di aver attivato il GPS.") } 3 var now = new Date().getTime(),_60_seconds_from_now = new Date(now + 0*1000); 68 Goffredo Latella

81 Realizzazione di un sistema informativo basato su social network... 4 //PATTERN POSITION DUOMO REGGIO CALABRIA 5 if(((position.coords.latitude> )&&(position.coords.latitude < ))&&((position.coords.longitude> )&&(position.coords.longitude< ))) 6 {if(location1==0) { 7 location1=1; 8 navigator.vibrate(1000); 9 window.plugin.notification.local.add ({ 10 id: 1, 11 title: 'ReggioTour:CHIESA', 12 message: ' DUOMO REGGIO CALABRIA ', 13 date: _60_seconds_from_now, 14 sound: 'TYPE_NOTIFICATION', 15 autocancel: 'TRUE', 16 led: '0569ff' }) 17 window.plugin.notification.local.onclick = function (id, state, json) Listato Pagina controlposition.js Visualizza luogo di interesse Quando un visitatore selezionerà una notifica, verrà reindirizzato su una pagina di descrizione del luogo di interesse (Figura 5.3). Questa pagina è caratterizzata da un immagine centrale e, di seguito, una descrizione testuale del luogo. In coda alla pagina, si trova un player utilizzato per avviare o fermare la voce che legge la descrizione testuale. Quando detto è descritto nel Listato Per la gestione del player, è stato utilizzato il plugin media di Apache Cordova, adottato nella pagina Javascript sound.js (Listato 5.11), nella quale si imposta il funzionamento del player come, ad esempio, il file mp3 da riprodurre alla pressione del tasto play, il tasto pause e il tasto stop. Goffredo Latella 69

82 Realizzazione di un sistema informativo basato su social network Figura Descrizione del luogo di interesse 1 <em><!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> 6 <link rel="stylesheet" href="styles/onsen-css-components.css"> 7 <link rel="stylesheet" href="styles/details.css"> 8 <script src="lib/onsen/js/angular/angular.js"></script> 9 <script src="lib/onsen/js/onsenui.js"></script> 10 <script type="text/javascript" src="cordova.js"></script> 11 <script type="text/javascript" src="js/index.js"></script> 12 <script src="js/sound2.js"></script> 13 <script> 14 ons.bootstrap(); 15 </script> 16 </head> 17 <body > 18 <ons-tabbar> 19 <ons-tab page="page.html" active="true"> 20 <a href="#" class="btn large" onclick="#"> <ons-icon icon="fa fa-music"></ons-icon></a> 70 Goffredo Latella

83 Realizzazione di un sistema informativo basato su social network </ons-tab> 22 <ons-tab > 23 <a href="#" class="btn large" onclick="playaudio('/android_asset/www/sound/you.mp3');"> <ons-icon icon="fa fa-play"></ons-icon></a> 24 </ons-tab> 25 <ons-tab > 26 <a href="#" class="btn large" onclick="pauseaudio();"> <onsicon icon="fa fa-pause"></ons-icon></a> 27 </ons-tab> 28 <ons-tab > 29 <a href="#" class="btn large" onclick="restartaudio();"> <onsicon icon="fa fa-step-forward"></ons-icon></a> 30 </ons-tab> <omissis> 31 <ons-list style="margin-top: 12px;"> 32 <ons-list-item modifier="chevron"> 33 <div class="prop-desc"> 34 <ons-icon icon="fa-clock-o"></ons-icon> Duomo Reggio Calabria</div> 35 </ons-list-item> 36 <p style="color: #333333; font-family: Verdana, Geneva, sans-serif;"> 37 Il Duomo di Reggio (nome completo: Basilica Cattedrale Metropolitana di Maria Santissima Assunta in Cielo), dedicato a Maria Santissima Assunta, è il più grande edificio religioso della Calabria, ed è la cattedrale dell'arcidiocesi di Reggio Calabria-Bova. </p> 38 <p style="color: #333333; font-family: Verdana, Geneva, sans-serif;"> 39 Sorge nel centro storico della città, dove mostra il suo prospetto principale sull'ampia Piazza del Duomo.</p> 40 <h3>storia</h3> 41 <p style="color: #333333;font-family: Verdana, Geneva, sans-serif;"> 42 Le origini della Cattedrale di Reggio sono da ricondurre agli inizi del II millennio quando, con l'invasione normanna dell'italia meridionale, Reggio subì un processo di "latinizzazione" e progressivo abbandono del culto greco-bizantino di cui era il centro. Nel 1061 infatti giunsero in città i Normanni di Roberto il Guiscardo che, scacciati i Bizantini e creato in Reggio il Ducato di Calabria, lasciarono alla popolazione di etnia greca l'antica cattedrale (chiamata "La Cattolica"), per ordinare la costruzione di una nuova cattedrale che fosse sotto l'ordinamento del Papa di Roma, cui erano legati i Normanni.</p> 43 </ons-list> 44 </div> 45 </ons-page> 46 </ons-template> 47 </body> 48 </html></em> Listato 5.10 Pagina che descrive il luogo di interesse Goffredo Latella 71

84 Realizzazione di un sistema informativo basato su social network 1 // Wait for Cordova to load 2 // 3 document.addeventlistener("deviceready", ondeviceready, false); 4 // Cordova is ready 5 function ondeviceready() { 6 playaudio("/android_asset/www/sound/you.mp3"); 7 } 8 // Audio player 9 // 10 var my_media = null; 11 var mediatimer = null; 12 // Create Media object from src 13 my_media = new Media(src, onsuccess, onerror); 14 // Update my_media position every second 15 if (mediatimer == null) { 16 mediatimer = setinterval(function() { 17 // get my_media position 18 my_media.getcurrentposition( 19 // success callback 20 function(position) { 21 if (position > -1) { 22 setaudioposition((position) + " sec"); 23 } 24 }, 25 // error callback 26 function(e) { 27 console.log("error getting pos=" + e); 28 setaudioposition("error: " + e); 29 } 30 ); 31 }, 1000); 32 function pauseaudio() { 33 if (my_media) { 34 my_media.pause(); 35 }} 36 function restartaudio() { 37 if (mediatimer!=null) { 38 // Stop audio 39 function stopaudio() { 40 if (my_media) { 41 my_media.stop(); 42 } 43 clearinterval(mediatimer); 44 mediatimer = null; 45 // onsuccess Callback 46 function onsuccess() { 47 console.log("playaudio():audio Success"); 48 } 49 // onerror Callback 72 Goffredo Latella

85 Realizzazione di un sistema informativo basato su social network function onerror(error) { 51 alert('code: ' + error.code + '\n' + 52 'message: ' + error.message + '\n'); 53 } Listato Pagina javascript sound.js 5.3 Implementazione del social network Accesso al sistema Quando si accede al sistema lato Web (Figura 5.4), la pagina che viene visualizzata mostra, sulla parte inferiore, le voci relative a login e registrazione di un utente attraverso il widget di BuddyPress. Il codice utilizzato per inserire l elemento è mostrato nel Listato /** 2 * BuddyPress Login Widget. 3 * 4 BuddyPress (1.9.0) 5 */ 6 class BP_Core_Login_Widget extends WP_Widget { 7 /** 8 * Constructor method. 9 */ 10 public function construct() { 11 parent:: construct( 12 false, 13 _x( '(BuddyPress) Log In', 'Accesso CityTour', 'buddypress' ), 14 array( 15 'description' => ( 'Show a Log In form to logged-out visitors, and a Log Out link to those who are logged in.', 'buddypress' ), 16 'classname' => 'widget_bp_core_login_widget buddypress widget', 17 ) 18 ); 19 } 20 /** 21 public function widget( $args, $instance ) {$title = isset( $instance['title'] )? $instance['title'] : ''; 22 echo $args['before_widget']; 23 echo $args['before_title']. esc_html( $title ). $args['after_title'];?> 24 <?php if ( is_user_logged_in() ) :?> 25 <div class="bp-login-widget-user-avatar"> 26 <a href="<?php echo bp_loggedin_user_domain();?>"> Goffredo Latella 73

86 Realizzazione di un sistema informativo basato su social network 27 <?php bp_loggedin_user_avatar( 'type=thumb&width=50&height=50' );?> 28 </a></div> 29 <div class="bp-login-widget-user-links"> 30 <div class="bp-login-widget-user-link"> <?php echo bp_core_get_userlink( bp_loggedin_user_id() );?></div> 31 <div class="bp-login-widget-user-logout"><a class="logout" href="<?php echo wp_logout_url( bp_get_requested_url() );?>"><?php _e( 'Log Out', 'buddypress' );?></a></div> 32 </div> <?php do_action( 'bp_after_login_widget_loggedin' );?> 33 <?php else :?> 34 'bp_before_login_widget_loggedout' );?> 35 <form name="bp-login-form" id="bp-login-widget-form" class="standardform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) );?>" method="post"> 36 <label for="bp-login-widget-user-login"><?php _e( 'Username','buddypress' );?></label> 37 <input type="text" name="log" id="bp-login-widget-user-login" class="input" value="" /> 38 <label for="bp-login-widget-user-pass"><?php _e( 'Password', 'buddypress' );?></label> 39 <input type="password" name="pwd" id="bp-login-widget-user-pass" class="input" value="" /> 40 <div class="forgetmenot"><label><input name="rememberme" type="checkbox" id="bp-login-widget-rememberme" value="forever" /> <?php _e( 'Remember Me', 'buddypress' );?></label></div> 41 <input type="submit" name="wp-submit" id="bp-login-widget-submit" value="<?php esc_attr_e( 'Log In', 'buddypress' );?>" /> Listato 5.12 Listato relativo all inserimento di un elemento Il risultato del codice è mostrato in Figura Gestione profilo La gestione del profilo è fornita da BuddyPress. Il codice per la gestione di questa funzionalità è contenuto nella directory wpcontent\plugins\buddypress\bp-xprofile; all interno di questo percorso troviamo tutti i file per l implementazione e la visualizzazione del profilo. La gestione del profilo può essere modificata 74 Goffredo Latella

87 Realizzazione di un sistema informativo basato su social network... dall utente turista (Figura 5.6) dalla sua area riservata e può essere modificata anche dall amministratore del social network (Figura 5.7). Figura 5.4 Home page del sistema lato Web Figura 5.5 Widget del login di BuddyPress Goffredo Latella 75

88 Realizzazione di un sistema informativo basato su social network Figura Gestione del profilo lato turista Gestione dei gruppi Figura Modifica del profilo lato amministratore Una funzionalità riservata all utente amministratore è la gestione dei gruppo. Tale funzionalità è fornita da BuddyPress; il codice corrispondente è contenuto nella directory wpcontent\plugins\buddypress\bp-groups; all interno di questo percorso troviamo tutti i file per l implementazione e la visualizzazione dei gruppi. In particolare, uno di questi file è bp-groupsclasses.php in cui vengono definite le classi per la gestione del gruppo. Tali classi vengono, poi, 76 Goffredo Latella

89 Realizzazione di un sistema informativo basato su social network... richiamate nel file bp-groups-functions.php. Una delle funzioni più rilevanti è quella che permette di creare un gruppo (Listato 5.13). Lato turista, l utente può visualizzare i gruppi e richiedere di farne parte (Figura 5.8). 1 } else { 2 // Instantiate new group object 3 $group = new BP_Groups_Group; 4 } 5 // Set creator ID 6 if ( $creator_id ) { 7 $group->creator_id = (int) $creator_id; 8 } elseif ( is_user_logged_in() ) { 9 $group->creator_id = bp_loggedin_user_id(); 10 } 11 if (! $group->creator_id ) { return false; 12 }$name =! empty( $name )? $name : $group->name; 13 $slug =! empty( $slug )? $slug : $group->slug; Listato 5.13 Listato relative alla creazione di un gruppo Figura 5.8 Visualizzazione dei gruppi lato turista Goffredo Latella 77

90 Realizzazione di un sistema informativo basato su social network Gestione della sicurezza relative alla social network Per rendere più sicura la social network si sono adottate soluzioni come l implementati dei plugin come: askimet: è molto famoso per la sua affidabilità nel controllare e prevenire lo spam. clef: permette l autenticazione di un utente attraverso il cellulare, senza bisogno di ricordare username e password (Figura 5.9) limit login attempts: questo plugin permette al sistema di bloccare un possibile attacco di acquisizione di identità. Quando un utente inserisce sbaglia le credenziali per più di tre volte viene bloccato l accesso per 20 minuti dall IP di quella macchina. Limit Login Attempts Clef Figura Autenticazione amministartore tramite Clef 78 Goffredo Latella