Cerca con Google

Translate

17 giugno 2014

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!!!



6 commenti:

  1. Ciao Seba,
    non riesco a trovare il procedimento o il metodo per variare la visualizzazione della pagina in base all'orientamento dello schermo.
    mi spiego meglio, vorrei visuallizzare con lo schermo verticale solo le squadre e il relativo punteggio, mentre ruotando lo schermo mi visualizza tutti i dati completi (con partite vinte, perse, pareggiate ecc..).
    Ho inserito Orientation Sensor e creato 2 WebViewer (1 con i dati 'minimi' e l'altra con i dati 'estesi') e al variare dell'orientamento dovrebbe visualizzarmi una o l'altra webviewer, ma non so che comando inserire.
    Potresti aiutarmi
    Grazie

    RispondiElimina
    Risposte
    1. Esiste l'evento in screen1 chiamato orientationchanged,
      puoi usare quell'evento per controllare l'orientamento dello schermo e quando esso cambia,
      al suo cambiamento quindi al verificarsi dell'evento cambia gli url della tua webview ed inserisci quello per la visualizzazione orizzontale o verticale a seconda delle tue necessità

      Elimina
  2. lo avevo notato ma riesco a creare 1 solo evento e cioè al variare dell'orientamento mi visualizza un URL ma ruotandolo di nuovo l'evento è sempre lo stesso quindi rimane invariato, e non è legato allo schermo verticale o orizzontale.
    Volevo dirgli:
    SE Verticale visualizza 'questo'
    SE Orizzontale visualizza 'quellaltro'

    RispondiElimina
  3. seno' devo creare una variabile che al verificarsi dell'evento mi cambia i parametri.................

    RispondiElimina
  4. Seguo da un po' i tuo devo dire che sono fantastici per chi come me' sta iniziando.Ho seguito questo tutorial per in mondiali di calcio per creare una applicazione che riguardasse la moto gp,stesso procedimento ma ovviamente caricando tabelle da un sito diverso.Con google Spreadsheet non ho avuto problemi e importando le varie tabelle riesco a caricarle correttamente ed a visualizzarle sul web da pc e creare i file in csv ma nel momento in cui avvio l'applicazione e la funzione web1url1 to richiama il link della tabella pubblicata va in errore e credo che il problema sia nella table.html utilizzata ma non riesco a capire.Ti allego i link dello screenshot fatto per capire il problema nella speranza che tu possa fare chiarezza a questo problema che non mi da pace,ringrazio in antipo:
    https://drive.google.com/file/d/0B4ebery-KaJETTBxa2hlRnFYRUk/edit?usp=sharing

    RispondiElimina