Politecnico di Milano. Introduction to Mobile Application Development Progetto: AS Valera App

Transcript

1 Politecnico di Milano Introduction to Mobile Application Development Progetto: AS Valera App Specifiche e Guida Utente Docente: Autore Prof. Pier Luca Lanzi Capiotto Roberto, matricola Anno Accademico 2012/2013

2 Indice 1 Breve introduzione Introduzione generale Tema del progetto Strumenti utilizzati per lo sviluppo Eclipse + Google App Engine Tipologia dei dati Giocatori Dirigenti Risultati Classifica Mappa Gestione dei dati Manuale Utente dell applicazione Avvio dell applicazione Home Mappa Società Giocatori Dirigenti Statistiche Risultati Classifica Info Sponsor Politecnico di Milano

3 1 Breve introduzione 1.1 Introduzione generale Per lo sviluppo del progetto del corso di Introduction to Mobile Application Development, tra i tool proposti, ho scelto di utilizzare Phonegap. Phonegap è uno strumento che permette di combinare HTML5, CSS3 e codice Javascript. Come termine di consegna del progetto è stato stabilito il giorno 31 dicembre Questo documento è stato redatto per spiegare le funzionalità che sono state implementate per il progetto e per guidare l utente all uso dell applicazione. 1.2 Tema del progetto Per il superamento del corso di Introduction to Mobile Application Development è stato necessario sviluppare un progetto il cui tema era libero. Io ho scelto di sviluppare un applicazione per la società sportiva in cui gioco a calcio. Il nome della società è As Valera ed è situata all oratorio Maria Regina nel comune di Varedo. Questa società partecipa al campionato CSI con un gran numero di squadre, a partire dai bambini di 7 anni fino agli adulti; per semplicità ho scelto di permettere di visualizzare i dati inerenti solo alla prima squadra della società (Valera). L applicazione che ho scelto di sviluppare permetterà di vedere l elenco dei componenti della squadra e i dati associati a ciascuno di essi, l elenco dei dirigenti della società, l elenco delle partite disputate e da disputare, la classifica e la mappa con i campi da gioco. 1.3 Strumenti utilizzati per lo sviluppo Gli strumenti utilizzati nella fase di sviluppo dell applicazioni sono stati: 1. NodeJS Strumento che permette la compilazione del codice scritto tramite l utilizzo di Phonegap. 2. Brackets Editor testuale per le pagine html, css e js. 3. Android SDK Manager Sono state installate l ultima versione disponibile di Android (4.4 - API 19) e quella del device a disposizione ( API 16) 4. Device Android Utilizzo di un dispositivo fisico Android per il test del progetto; nel mio caso ho utilizzato un Samsung Galaxy S3. 5. Eclipse + Google App Engine Utilizzato per realizzare un progetto che permetterà all utente una gestione remota dei dati fruibili dall applicazione. 3

4 1 Breve introduzione 6. Browser Utilizzato per il test in locale delle pagine dell applicazione e per il test della parte di memorizzazione e gestione dei dati. Sono stati usati sia Firefox che Chrome. 7. GitHub Utilizzato come repository del codice dell applicazione Phonegap. 8. jquery Mobile Libreria di funzioni javascript utilizzate per ottenere effetti grafici e per interagire con il codice html. Questi di seguito sono i file utilizzati nello sviluppo dell applicazione: //code.jquery.com/mobile/1.3.2/jquery.mobile min.css //code.jquery.com/jquery min.js //code.jquery.com/mobile/1.3.2/jquery.mobile min.js 9. jquery Mobile Icon Pack Raccolta di icone utilizzate nei menù dell applicazione. Sono presenti le 33 icone classiche contenute nell Icon Pack standard di jquery e 361 icone personalizzate. Tutto il materiale utilizzato è scaricabile da 4

5 2 Eclipse + Google App Engine La parte di gestione dei dati è stata realizzata tramite un progetto Java sviluppato con Google App Engine. Il progetto web è caricato e visitabile all indirizzo La home page spiega brevemente e in modo schematico cosa è possibile fare con l interfaccia web del progetto: 1. Gestione dei giocatori 2. Gestione dei dirigenti 3. Gestione delle partite 4. Gestione della classifica 5. Gestione dei campi di gioco Figura 2.0.1: Home page asvaleraapp.appspot.com 2.1 Tipologia dei dati I dati memorizzati sono divisibili in 5 categorie: Giocatori Dirigenti Risultati Classifica Mappa 5

6 2 Eclipse + Google App Engine Giocatori Ogni giocatore ha 7 campi che lo caratterizzano: ID: id progressivo che svolge il ruolo di chiave primaria Nome: nome del giocatore Cognome: cognome del giocatore Ruolo: P: Portiere D: Difensore C: Centrocampista A: Attaccante Immagine: foto del giocatore Descrizione: alcune informazioni rilevanti Goal: numero di goal segnati Per alcuni dei giocatori presenti nel database sono già state assegnate delle immagini già caricate nel progetto phonegap, per altri invece è stata assegnata l immagine di default (anch essa già precedentemente caricata). Infatti, per questi giocatori, il percorso dell immagine risulta essere img/player/cognome.png oppure img/player/default.png. Va però sottolineato che anche inserendo nel campo Immagine un URL di una foto presa da web, il progetto funziona correttamente. Figura 2.1.1: Dati dei giocatori 6

7 2 Eclipse + Google App Engine Dirigenti Ogni dirigente ha 4 campi che lo descrivono: ID: id progressivo che svolge il ruolo di chiave primaria Nome: nome del giocatore Cognome: cognome del giocatore Ruolo: ruolo che ricopre nella società Figura 2.1.2: Dati dei dirigenti Risultati Ogni record è formato da 5 campi che lo descrivono: ID: id progressivo che svolge il ruolo di chiave primaria Home: nome della squadra che gioca in casa Away: nome della squadra che gioca in trasferta Result: risultato della partita Date: data della partita Figura 2.1.3: Dati dei risultati 7

8 2 Eclipse + Google App Engine Classifica Ogni record della classifica ha a sua volta 5 campi che lo descrivono: ID: id progressivo che svolge il ruolo di chiave primaria Team: nome della squadra Punti: punti fatti nel corso del campionato GolFatti: numero di reti segnate GolSubiti: numero di reti subite Figura 2.1.4: Classifica Mappa Ogni mappa ha a sua volta 6 campi che lo descrivono: ID: id progressivo che svolge il ruolo di chiave primaria Team: nome della squadra Indirizzo: indirizzo del campo di gioco Sintetico: S: SI N: NO Latitudine: latitudine del campo di gioco Longitudine: longitudine del campo di gioco Figura 2.1.5: Dati delle mappe 8

9 2 Eclipse + Google App Engine 2.2 Gestione dei dati E stata implementata la possibilità di eliminare oppure modificare ogni record presente nel database. Per ogni record, possono essere modificati tutti i campi tranne l ID. Il progetto web di Google App Engine permette di tenere salvati tutti i dati che riguardano l applicazione As Valera App. L applicazione Phonegap richiede dei dati al progetto web tramite una richiesta nel formato $. get ( http : / / asvaleraapp. appspot. com/tipo?tipo=yes, f u n c t i o n ( data ) { / do something / } ) ; dove TIPO assume diversi valori a seconda della richiesta che viene effettuata. Una volta elaborata la richiesta, il progetto Google App Engine invia la risposta con i dati richiesti in formato json. 9

10 3 Manuale Utente dell applicazione 3.1 Avvio dell applicazione Figura 3.1.1: Avvio dell applicazione Dopo aver avviato l applicazione, si presenta una pagina splash con il logo della società; questa pagina resta a video soltanto 3 secondi prima di essere rediretta verso la home page. 10

11 3.2 Home La home page dell applicazione ci mostra quando sarà la prossima partita in programma e dove si svolgerà. In base ai dati reali, al momento della consegna del progetto, risulta che il prossimo turno è un turno di riposo. Per tanto i dati mostrati non sembrano essere molto significativi. Una volta superata la data del turno di riposo, l applicazione mostrerà dei dati più interessanti (vedi figura a destra). Figura 3.2.1: Home App 11

12 3.3 Mappa La pagina relativa alle mappe mostra l elenco delle squadre con l indirizzo dei rispettivi campi di gioco. Figura 3.3.1: Elenco Campi Selezionando una delle voci in elenco, viene mostrata una mappa in una nuova pagina con un marker che indica la posizione sulla mappa del campo scelto in precedenza. Cliccando sul marker vengono nuovamente visualizzati l indirizzo e l attributo sintetico. 12

13 3 Manuale Utente dell applicazione Figura 3.3.2: Mappa La pagina dove viene mostrata la mappa presenta un evidente problema di grafica. Non vengono mostrate le barre superiore e inferiore che sono invece presenti in tutte le altre pagine a causa di un problema non risolto con jquery. Per quanto riguarda i dispositivi Android questo non è un grosso problema in quanto l applicazione continua ad essere usabile tramite il tasto back del dispositivo. Non è possibile dire altrettanto per i dispositivi ios: ed ecco il motivo della scritta BACK TO THE PREVIOUS PAGE presente all inizio della pagina. Durante lo sviluppo dell applicazione ho riscontrato dei problemi con le API di Google Maps e ho quindi deciso di ripiegare sull utilizzo di OpenStreetMap. 13

14 3.4 Società La pagina relativa alla società è un semplice menù che permette all utente di scegliere se visualizzare i giocatori oppure i dirigenti. Figura 3.4.1: Società 14

15 3.4.1 Giocatori Cliccando sul bottone con l immagine della maglia, viene mostrato l elenco dei giocatori. A seconda del giocatore scelto e dei dati inseriti nel progetto di Google App Engine è possibile visualizzare l immagine personalizzata oppure quella di default. Nell esempio qui sotto, viene mostrata l immagine personalizzata di un giocatore. Figura 3.4.2: Giocatore con immagine personalizzata 15

16 Se il giocatore selezionato non ha nessuna immagine personalizzata, verrà mostrata quella di default precedentemente caricata nell applicazione. Figura 3.4.3: Giocatore con immagine di default 16

17 3.4.2 Dirigenti Cliccando sul bottone con l immagine dei dirigenti, viene mostrato l elenco dei dirigenti con le relative mansioni. Figura 3.4.4: Dirigenti 17

18 3.5 Statistiche La pagina relativa alle statistiche è un semplice menù che permette all utente di scegliere se visualizzare i risultati della squadra oppure la classifica. Figura 3.5.1: Statistiche 18

19 3.5.1 Risultati Cliccando sul bottone con l immagine del pallone in rete, viene mostrato l elenco dei risultati. A seconda dello spazio disponibile sullo schermo verranno mostrati più o meno informazioni riguardanti le partite; la partita disputata e il risultato sono informazioni che saranno sempre visibili sullo schermo, mentre data e id verranno visualizzati solo se possibile e in questo ordine di preferenza. Figura 3.5.2: Risultati su schermo verticale 19

20 Figura 3.5.3: Risultati su schermo orizzontale 20

21 3.5.2 Classifica Cliccando sul bottone con le barre verticali, viene mostrata la classifica. A seconda dello spazio disponibile sullo schermo verranno mostrati più o meno informazioni riguardanti la classifica; il nome della squadra e i punti fatti sono informazioni che saranno sempre visibili sullo schermo, mentre golfatti, golsubiti e id verranno visualizzati solo se possibile e in questo ordine di preferenza. Figura 3.5.4: Classifica su schermo verticale 21

22 Figura 3.5.5: Classifica su schermo orizzontale 22

23 3.6 Info La pagina relativa alle informazioni è un semplice menù che permette all utente di scegliere se visualizzare lo sponsor della società oppure le informazioni relative al Politecnico di Milano. Figura 3.6.1: Info 23

24 3.6.1 Sponsor Cliccando sul bottone con l immagine dello sponsor, viene mostrata la pagina dedicata allo sponsor della squadra. Figura 3.6.2: Sponsor 24

25 3.6.2 Politecnico di Milano Cliccando sul bottone con il logo del Politecnico, vengono mostrate le informazioni del corso nel cui ambito è stato sviluppato questo progetto. Figura 3.6.3: Info sul corso 25