Tutorial - Creare un app Android per i Mondiali di Calcio Brasile 2014 - Parte 2

Nella seconda parte del tutorial per la realizzazione di un app Android per la visualizzazione dei calendari e dei risultati dei Mondiali di Calcio Fifa 2014 giocati in Brasile andremo a vedere la realizzazione dell'interfaccia grafica.

Creiamo un nuovo progetto in MIT App Inventor 2 andando alla pagina, http://ai2.appinventor.mit.edu/ e diamoci il nome voluto (ad esempio "Risultati Mondiali 2014"



Per non dilungarci troppo nella descrizione della UI (vi consiglio di consultare gli altri tutorial relativi ad AI2 visitando la seguente pagina http://seblogapps.blogspot.it/p/elenco-tutorial.html se non avete molta pratica di AI2)
Descriverò quindi solo gli elementi presenti in essa (per maggiori dettagli guardate i video più avanti)

1 - Due "Label"
2 - Due "Spinner" per la selezione del Girone di interesse
3 - Una "WebView" per la visualizzazione del calendario o dei risultati
4 - Un componente "Web" per la lettura del file .csv visto nella parte 1 del tutorial

(la parte dello "splashscreen" viene spiegata nel video, essendo molto semplice la tralascio nell'articolo...)

Quello che dobbiamo fare è programmare la seguente serie di azioni.
1 - L'utente sceglie con il componente "Spinner" i dati di suo interesse che vuole visualizzare
2 - Costruiamo un indirizzo URL da passare al componente "Web" che si occuperà di leggere il file .csv relativo ai dati scelti dall'utente al punto 1
3 - Carichiamo nella "webviewstring" il file .csv e carichiamo nella "WebView" il file html + javascript che si occuperà di formattare i dati nella tabella html visualizzata nella "WebView" stessa

Come abbiamo visto nella parte 1, abbiamo creato tanti "tab" del Google Spreadsheet quanti sono i calendari ed i risultati dei gironi, ognuno di esso ha un "GID" diverso.

Esempio di un tab del foglio di lavoro Google Docs Speadsheet creato precedentemente

Alla selezione dello spinner caricheremo il GID corretto e corrispondente al nostro tab, aggiungeremo la parte fissa della URL per creare così l'indirizzo corretto da fornire al componente Web.

Per esempio, per la selezione di uno dei calendari dei gironi, la lista dei GID è salvata con un "make a list" nella variabile "ListaGIDCalendari":

Quando l'utente sceglie lo "Spinner" relativo al calendario, viene generato l'evento "SpinnerName.AfterSelecting" dove il "SelectionIndex" è l'indice numerico del girone scelto:

Usando la funzione testuale "join" componiamo il nostro indirizzo URL con il GID corretto per i dati che ci interessano.
Impostiamo quindi l'URL del componente "Web1" alla stringa appena creata.
(ad esempio https://docs.google.com/spreadsheets/d/1yrMEfw5c622A2rqwAa3kMcCKUvGtE046Sja9bXgzC88/export?gid=401553336&format=csv)

Chiamiamo il metodo "Web1.Get" per andare a caricare la pagina web con i dati in .csv.

A questo punto quando il componente "Web" ha letto la pagina internet correttamente (contenente solo i dati in formato .csv) verrà generato l'evento
"Web1.GotText"

Il "responseContent" non è altro che la stringa testuale con il file .csv contenente ad esempio il calendario del Girone A.

Carichiamo questa stringa nella variabile "WebViewString" che verrà analizzata dal file JavaScript creato ad-hoc che si occuperà di creare la tabella html da visualizzare nella nostra app.
(per maggiori info guardate il video tutorial a questo indirizzo: https://www.youtube.com/watch?v=3V66X6pfxM8)

A questo punto il "gioco" è fatto e la nostra app visualizzerà i dati richiesti dall'utente.

Importante notare come dobbiamo caricare nella nostra app un file html+javascript che si occupa della conversione dei dati da csv a tabella html, il file lo potete scaricare cliccando qua
Ad ogni modo se scaricate il sorgente dell app cliccando qua e poi importate il file .aia in Mit App Inventor 2 avrete anche già il file html necessario.

Vi invito a studiare il file "table.html", non serve modificarlo ma è utile capire come funzioni, se volete cambiare l'aspetto della tabella (colori, font, spaziature, etc...) modificate pure lo stile CSS cambiando gli attributi tra i tag <style>, mentre lasciate tutto il resto così com'è.

Notate anche come il file "table.html" sia accessibile dall'app in due percorsi differenti, a seconda se state lavorando con il cellulare (o l'emulatore) collegato direttamente ad AI oppure se avete compilato il file .apk
E' importante quindi settare il valore corretto della variabile "development" a true (se siete collegati ad AI Companion) o a false (se avete compilato e installato il vostro apk).
I due path sono quindi:

Vi lascio con i due video tutorial che ho realizzato su YouTube dove potete ripassare tutto quanto visto in questo tutorial:

Parte 2:

Parte 3:

E' importante notare come i risultati delle partite non vengano aggiornati in tempo reale, questo è dovuto principalmente a due fattori 1 - Il sito sorgente dove prendiamo i dati non è aggiornato in tempo reale 2 - C'è un ritardo tra l'aggiornamento del sito e la ripubblicazione automatica da parte di Google del nostro foglio di lavoro, credo che la ripubblicazione da parte di Google avvenga ad intervalli di tempo stabiliti. 3 - Potrebbe esserci un discorso di cache interna al telefono per quanto riguarda il file html e lo script javascript che non richiede ogni volta dati aggiornati dal foglio google ma usa quelli memorizzati in locale. Mediamente ho notato che i risultati sono aggiornati dopo 8/12 ore al massimo.
Purtroppo ad oggi non ho una soluzione semplice al problema, bisognerebbe forse provare con un'altra base dati già in csv in modo da evitare il ritardo causato dalla ripubblicazione del foglio di lavoro di Google.

Per ogni commento suggerimento o richiesta usate i commenti qui sotto o quelli di YouTube
Buon App Inventing a tutti!!!