Documento di Progettazione Corso di Ingegneria del Software A.A. 2016 2017 Docente: Prof. Agostino Cortesi PandaCode 851777 - Martina Lunardi 852056 Claudia Farronato Data: 01/05/2017
Sommario I. INTRODUZIONE... 3 SCOPO DEL DOCUMENTO STRUTTURA DEL DOCUMENTO II. GLOSSARIO... 4 III. STRUTTURA DEL SISTEMA... 4 IV. MODELLO DI CONTROLLO... 5 V. DIAGRAMMA DELLE CLASSI... 6 VI. DIAGRAMMI DELLE ATTIVITÀ... 7 LOGIN PER ACCEDERE ALLE FUNZIONALITA PER UTENTI REGISTRATI RICERCA PUNTI DI INTERESSE INSERIMENTO DI FOTO RELATIVE AD UN PUNTO DI INTERESSE INSERIMENTO DI RECENSIONI RELATIVI AD UN PUNTO DI INTERESSE AGGIUNTA DI UN LUOGO AI PREFERITI RIMOZIONE DI UN LUOGO DAI PREFERITI VII. DIAGRAMMI DI SEQUENZA... 11 LOGIN PER ACCEDERE ALLE FUNZIONALITA PER UTENTI REGISTRATI RICERCA PUNTI DI INTERESSE INSERIMENTO DI FOTO E RECENSIONI RELATIVI AD UN PUNTO DI INTERESSE AGGIUNTA DI UN LUOGO AI PREFERITI RIMOZIONE DI UN LUOGO DAI PREFERITI VIII. INTERFACCIA GRAFICA... 14 COLORI ICONE PULSANTI PRIMO AVVIO PRIMO ACCESSO HOME PUNTO DI INTERESSE SELEZIONATO VISUALIZZAZIONE DELLE OPZIONI RELATIVE AL PUNTO SELEZIONATO
AGGIUNTA AI PREFERITI AGGIUNTA DI UNA RECENSIONE AGGIUNTA DI FOTO MENÙ UTENTE REGISTRATO MENÙ UTENTE NON REGISTRATO HELP INFO & CREDITS
INTRODUZIONE SCOPO DEL DOCUMENTO Lo scopo di questo documento è l illustrazione degli aspetti che riguardano l implementazione dell applicazione BarbeCrew, mostrando in modo approfondito la strutturazione del nostro sistema. STRUTTURA DEL DOCUMENTO Il documento presente è suddiviso nelle seguenti parti: Struttura del sistema: in questa sezione mostreremo come è strutturato il sistema, evidenziando la suddivisione in sottosistemi e facendo vedere come essi comunicano fra loro. Modello di controllo: lo scopo di questo paragrafo è l illustrazione del modello di controllo scelto per stabilire le relazioni che intercorrono tra i sottosistemi individuati. Diagramma delle classi: si tratta di una sezione finalizzata a descrivere le entità che costituiscono il sistema e le loro relazioni, mostrando altresì le varie operazioni effettuabili. Diagramma delle attività: in questo punto verranno definite le attività che è necessario compiere in modo da poter mettere in atto le funzionalità offerte dall applicazione. Diagramma di sequenza: qui verranno mostrate, in relazione alle varie attività descritte, le chiamate a funzione. Interfaccia grafica: questa sezione illustrerà i prototipi dell interfaccia grafica destinata, mostrandone gli schemi più importanti. DOCUMENTO DI PROGETTAZIONE - MAY 2017 3
GLOSSARIO Presentiamo di seguito un elenco dettagliato di termini di uso tecnico utilizzati nel documento, utile a garantire la comprensione del testo da parte di qualsiasi tipo di utente: Android: è un sistema operativo per dispositivi mobili sviluppato da Google Inc. e basato sul kernel Linux. Non è da considerarsi, tuttavia, propriamente un sistema unix-like o una distribuzione GNU/Linux, dal momento che la quasi totalità delle utilità GNU è sostituita da software in Java. App: dicitura abbreviata per indicare un'applicazione software, sia ludica che di utilità, per dispositivi mobili quali smartphone, palmari e tablet. Client: Programma o parte di un programma che permette di scambiare dati con un server. Database: collezione di dati non omogenei ma tra loro correlati, utilizzati per rappresentare una porzione del mondo reale. I dati sono strutturati in modo tale da consentire la loro gestione in termini di inserimento, aggiornamento, ricerca e cancellazione delle informazioni. Flat Design: letteralmente design piatto, si tratta di una tipologia di design semplice, talvolta minimale, che non utilizza effetti tridimensionali. Material Design: design sviluppato da Google e caratterizzato da regole di progettazione concentrate su un grande uso di layout basati su una griglia, animazioni e transizioni ed effetti di profondità come l'illuminazione e le ombre. pop-up: sono degli elementi dell'interfaccia grafica, quali finestre o riquadri, che compaiono automaticamente durante l'uso di un'applicazione ed in determinate situazioni, per attirare l'attenzione dell'utente. Query: interrogazione di un database per estrarre o aggiornare i dati che soddisfano un certo criterio di ricerca. Utente: è la persona fisica che fa uso dell applicazione. STRUTTURA DEL SISTEMA L applicazione sarà strutturata secondo il modello Client-Server. Sarà provvista di un database, necessario per la raccolta e al trattamento di tutti i dati che caratterizzeranno i punti d interesse considerati. In questa configurazione di sistema, il client ha il compito di richiedere al server i dati per mezzo di query determinate. Il sottosistema client, inoltre, sarà suddiviso in tre sottoclassi: la prima sarà dedicata alla visualizzazione dei dati in maniera ordinata, la seconda servirà ad inviare richieste specifiche di dati al server, mentre l ultima avrà lo scopo di ricevere i pacchetti di dati da parte del server. DOCUMENTO DI PROGETTAZIONE - MAY 2017 4
MODELLO DI CONTROLLO Il modello di controllo che utilizzeremo è il call-return model a struttura centralizzata, caratterizzato dall esistenza di un sottosistema avente controllo globale sugli altri sottosistemi. Si tratta di un modello gerarchico gestito secondo una struttura top-down. Tale scelta è dovuta al fatto che la nostra applicazione sarà sviluppata in modo sequenziale. Figura 1. Rappresentazione modello call-return DOCUMENTO DI PROGETTAZIONE - MAY 2017 5
DIAGRAMMA DELLE CLASSI Di seguito presentiamo il diagramma delle classi riferito all utenza registrata: UTENTI Questa classe raccoglie i dati relativi agli utenti che effettuano la registrazione con un account Facebook o Google+. È inoltre possibile visualizzare e rimuovere i luoghi preferiti. PUNTI DI INTERESSE La classe contiene informazioni relative ai punti di interesse, contraddistinti dall attributo categoria, a cui l utente accede effettuando una ricerca. Comprende inoltre le operazioni di visualizzazione di foto, commenti, e indicazioni stradali. Il metodo set luogo preferito permette di aggiungere il luogo alla lista dei preferiti. RICERCA La classe permette all utente di ricercare un luogo nella mappa specificando il nome. FOTO e RECENSIONI Le classi permettono di aggiungere foto e recensioni ai punti di interesse specificati. DOCUMENTO DI PROGETTAZIONE - MAY 2017 6
DIAGRAMMI DELLE ATTIVITÀ In questa sezione vengono mostrati i diagrammi di attività relativi all applicazione. LOGIN PER ACCEDERE ALLE FUNZIONALITA PER UTENTI REGISTRATI DOCUMENTO DI PROGETTAZIONE - MAY 2017 7
RICERCA PUNTI DI INTERESSE INSERIMENTO DI FOTO RELATIVE AD UN PUNTO DI INTERESSE DOCUMENTO DI PROGETTAZIONE - MAY 2017 8
INSERIMENTO DI RECENSIONI RELATIVI AD UN PUNTO DI INTERESSE AGGIUNTA DI UN LUOGO AI PREFERITI DOCUMENTO DI PROGETTAZIONE - MAY 2017 9
RIMOZIONE DI UN LUOGO DAI PREFERITI DOCUMENTO DI PROGETTAZIONE - MAY 2017 10
DIAGRAMMI DI SEQUENZA LOGIN PER ACCEDERE ALLE FUNZIONALITA PER UTENTI REGISTRATI DOCUMENTO DI PROGETTAZIONE - MAY 2017 11
RICERCA PUNTI DI INTERESSE INSERIMENTO DI FOTO E RECENSIONI RELATIVI AD UN PUNTO DI INTERESSE DOCUMENTO DI PROGETTAZIONE - MAY 2017 12
AGGIUNTA DI UN LUOGO AI PREFERITI RIMOZIONE DI UN LUOGO DAI PREFERITI DOCUMENTO DI PROGETTAZIONE - MAY 2017 13
INTERFACCIA GRAFICA DOCUMENTO DI PROGETTAZIONE - MAY 2017 14
L interfaccia grafica di BarbeCrew è stata realizzata applicando elementi di material e flat design. Per il logo è stato utilizzato prevalentemente il colore arancio chiaro riferimento al fuoco del barbecue dell immaginario comune. Logo dell applicazione Di seguito viene presentato il logo di BarbeCrew che ci accompagna durante le fasi di avvio dell applicazione, di registrazione all applicazione e nel menù. I tre simboli sono la rappresentazione delle tre tipologie di punti di interesse che possiamo ricercare grazie all applicazione, ovvero BBQ, campeggi e aree picnic. DOCUMENTO DI PROGETTAZIONE - MAY 2017 15
COLORI È il colore dominante principale presente nell applicazione, dello stesso colore anche i pulsanti e la grafica coordinata. Colore primario e primario scuro dell applicazione. Colore utilizzato per i pulsanti disattivati o già usati (after tap). Colore di background dell applicazione. Colore utilizzato per simboli, pulsanti, icone e testi su sfondo scuro. ICONE Icona realizzata in stile Material e Flat Design, viene utilizzata per segnalare nella mappa i BBQ presenti. Icona realizzata in stile Material e Flat Design, viene utilizzata per segnalare nella mappa i campeggi presenti. DOCUMENTO DI PROGETTAZIONE - MAY 2017 16
Icona realizzata in stile Material e Flat Design, viene utilizzata per segnalare nella mappa le aree picnic presenti. PULSANTI Il pulsante contrassegnato da una matita e visibile nella schermata che permette la visualizzazione delle operazioni relative al punto d interesse selezionato e consente la visualizzazione di un pop-up per l aggiunta di una recensione. Il pulsante con il simbolo della macchina fotografica, visibile nella schermata che permette la visualizzazione delle operazioni relative al punto d interesse selezionato e nella gallery, consente l aggiunta di una foto dal dispositivo. DOCUMENTO DI PROGETTAZIONE - MAY 2017 17
Il pulsante con la spunta, visibile nel pop-up di inserimento di una recensione o di aggiunta ai preferiti permette rispettivamente di confermare l aggiunta di una recensione e di confermare l aggiunta del luogo tra i preferiti con conseguente chiusura del pop-up e ritorno e ritorno alla pagina del punto. Il pulsante con la X, visibile nella lista dei luoghi preferiti accessibile dal menu utente registrato, consente di rimuovere un luogo dalla lista. Questo pulsante raffigurante una stella, visibile nella schermata che consente la visualizzazione delle operazioni relative al punto d interesse selezionato e nella gallery, consente di accedere al pop-up per l aggiunta del luogo alla lista dei preferiti.. Il seguente pulsante indica che il punto di interesse è già stato inserito nella lista dei luoghi preferiti. DOCUMENTO DI PROGETTAZIONE - MAY 2017 18
PRIMO AVVIO L immagine a fianco è la prima ad essere visualizzata dopo aver avviato l applicazione. DOCUMENTO DI PROGETTAZIONE - MAY 2017 19
PRIMO ACCESSO Dopo l avvio viene visualizzata la schermata per effettuare l accesso come utente registrato o come ospite. Viene visualizzata anche per eseguire il Login da menù utente non registrato o il Logout da menù utente registrato. DOCUMENTO DI PROGETTAZIONE - MAY 2017 20
HOME In queste immagini viene rappresenta la schermata di home. Se l utente acconsente all app di usare la sua posizione, viene visualizzato l indicatore della posizione nella mappa, altrimenti viene solo visualizzata la mappa centrata sul veneto. Vengono inoltre visualizzate le diverse icone differenziate per tipologia di punto di interesse (BBQ, picnic e campeggi). La barra di ricerca permette di digitare il nome di un luogo e visualizzare i punti di interesse presenti. DOCUMENTO DI PROGETTAZIONE - MAY 2017 21
PUNTO DI INTERESSE SELEZIONATO Toccando il punto interessato vengono visualizzate le informazioni principali, il bottone per accedere alla pagina relativa ai punti e le icone di navigazione di Google che permettono di calcolare il percorso per arrivare alla destinazione prescelta. DOCUMENTO DI PROGETTAZIONE - MAY 2017 22
VISUALIZZAZIONE DELLE OPZIONI RELATIVE AL PUNTO SELEZIONATO In questa pagina, accessibile premendo il bottone visualizza dalla schermata relative al punto di interesse selezionato, le icone color arancio rendono possibili le operazioni di: Aggiunta di un luogo ai preferiti Aggiunta di foto Aggiunta di recensioni Questi tasti sono abilitati solo se l utente ha effettuato la registrazione, in caso contrario verrà visualizzato un messaggio di errore. DOCUMENTO DI PROGETTAZIONE - MAY 2017 23
AGGIUNTA AI PREFERITI È possibile aggiungere un punto di interesse ai preferiti rinominandolo qualora esso non avesse un nome. Quando viene aggiunto il pulsante relativo cambia tema per segnalare che il punto è già presente tra i preferiti. I luoghi contrassegnati come preferiti sono visualizzabili nella sezione Preferiti dal menù dell utente registrato come nella schermata sottostante. Se si effettua un singolo tap sul nome del luogo presente nella lista si viene reindirizzati alla pagina corrispondente. È possibile rimuovere un preferito semplicemente premendo la x di fianco al punto. DOCUMENTO DI PROGETTAZIONE - MAY 2017 24
AGGIUNTA DI UNA RECENSIONE Il pop-up afianco è visualizzabile premendo il pulsante contrassegnato dalla matita accessibile dalla schermata relative al punto di interesse selezionato e permette di aggiungere una recensione. La pagina in seguito viene ricaricata e la recensione inserita viene visualizzato nello slider dedicato alle recensioni, se non sono presenti recensioni lo slider non viene visualizzato. DOCUMENTO DI PROGETTAZIONE - MAY 2017 25
AGGIUNTA DI FOTO L aggiunta di foto comporta la visualizzazione della sezione gallery, progettata in modo tale da permettere all utente la visualizzazione di tutte le foto presenti come nella schermata sottostante. Anche da questa sezione è possibile aggiungere foto. DOCUMENTO DI PROGETTAZIONE - MAY 2017 26
MENÙ UTENTE REGISTRATO Di fianco viene proposta la composizione del menù dedicata all utente registrato. Il menù è accessibile mediante singolo tap nella sezione presente nella toolbar. DOCUMENTO DI PROGETTAZIONE - MAY 2017 27
MENÙ UTENTE NON REGISTRATO Di fianco la composizione del menù per utenti non registrati. DOCUMENTO DI PROGETTAZIONE - MAY 2017 28
HELP Nella seguente schermata è presente una breve guida al significato delle tre principali icone di identificazione dei punti. A destra di ogni icona è riportata la sua descrizione. DOCUMENTO DI PROGETTAZIONE - MAY 2017 29
INFO & CREDITS Questa schermata viene resadisponibile dalla sezione info del menu utente. Essa contiene informazioni riguardo il nome dell app, la versione e il gruppo di sviluppatori. Premendo il pulsante Credits viene visualizzata la schermata sottostante contentente i riconosciementi riguardanti gli autori dell applicazione. DOCUMENTO DI PROGETTAZIONE - MAY 2017 30