Mit App Inventor 2 per chi non lo conoscesse ancora è uno strumento web based per la creazione di app Android in modo semplice, veloce e gratuito.
La forza di App Inventor 2 (in breve AI2) è quella di non richiedere particolari conoscenze informatiche e di essere un tool prettamente visivo dove si trascinano dei blocchi funzionali che andranno a creare la nostra app Android.
Per chi non conoscesse MIT App Inventor 2 consiglio di studiarsi prima almeno questi due tutorial:
http://seblogapps.blogspot.com/2013/12/tutorial-1-creare-applicazioni-android.html
http://seblogapps.blogspot.com/2013/12/tutorial-1-creare-applicazioni-android_20.html
(ne trovate altri alla pagina: http://seblogapps.blogspot.it/p/elenco-tutorial.html)
Passiamo ora a descrivere a grandi linee i passi necessari alla realizzazione della nostra applicazione.
Lo scopo sarà quello di visualizzare in una webview i risultati o il calendario dei vari gironi dei Mondiali 2014.
Ci saranno due "Spinner" per permettere all'utente la scelta dei dati e del girone da visualizzare.
Vediamo subito come si presenta l'applicazione finita.
.jpg) |
| Ecco uno screenshot dell'app "finita" |
L'app è volutamente semplice perché voglio mostrare nel dettaglio il processo di recupero dei dati da internet e la loro visualizzazione, mentre per l'abbellimento dell'interfaccia utente o l'inserimento di altre funzionalità lascio campo libero al lettore di migliorarla come meglio crede!
La prima cosa da fare è quella di "recuperare" i dati da visualizzare (ringrazio infinitamente il sito
http://www.mondiali-di-calcio-2014.com/)
Da questo sito andremo a prelevare i dati da inserire in questa app (se volete usare commercialmente questi dati dovrete farne esplicita richiesta al gestore del sito)
Per la lettura dei dati useremo un foglio di lavoro Google Spreadsheet creato appositamente,
se non lo sapete, con Google Spreadsheet abbiamo a disposizione una funzione potentissima che permette di analizzare una pagina HTML ed estrarre le eventuali tabelle in esso presenti con una sola semplice funzione (IMPORTHTML)
In questo modo potremmo leggere dal sito di cui sopra le tabelle contenenti i risultati e le classifiche aggiornate.
Creiamo quindi un nuovo foglio di lavoro ed inseriamo nella prima casella la funzione che estrae la tabella da una pagina web html.
=IMPORTHTML("http://www.mondiali-di-calcio-2014.com/calendario-mondiali/";"table";1)
Nell'esempio di qui sopra andiamo ad inserire nel nostro foglio di lavoro la prima tabella alla pagina "calendario-mondiali"
Ripetendo la procedura e cambiando solo l'indice della tabella da estrarre potremmo creare un foglio di lavoro con i calendari ed i risultati di tutti i gironi.
Se volete dare un occhio ad un foglio Spreadsheet simile a quello usato nel tutorial potete farlo cliccando qua:
https://docs.google.com/spreadsheets/d/1LhXl8kuQKhyG0jPpFfXcyd3T7mvACHkPs3EPB6cQIbk/edit?usp=sharing
(attenzione, il foglio usato nell'app finale e nel video di YouTube è un altro...)
La cosa interessante di Google SpreadSheet è che è possibile pubblicare sul web il proprio foglio di lavoro ed è anche possibile esportare i dati in esso presenti in formato .csv (che tornerà poi utile quando andremo a creare l'app Android vera e propria)
Per fare questo è sempre necessario conoscere la chiave (KEY) ed il GID (ovvero il tab selezionato) del nostro foglio di lavoro,
se notate dall'indirizzo a cui è stato pubblicato il foglio di lavoro (dovete pubblicare il foglio di lavoro che state usando scegliendo l'opzione in figura)
La <KEY> è quella che evidenziata in ROSSO mentre il GID è quello in BLU
Per esempio per i risultati del girone A abbiamo:
https://docs.google.com/spreadsheets/d/1LhXl8kuQKhyG0jPpFfXcyd3T7mvACHkPs3EPB6cQIbk/edit#gid=1156556300
A questo punto è possibile esportare i dati del foglio di lavoro e del tab scelto in formato .csv andando a creare "manualmente" l'indirizzo URL per l'export in csv nel seguente modo:
Foglio pubblicato: https://docs.google.com/spreadsheets/d/<KEY>/pubhtml
Export CSV: https://docs.google.com/spreadsheets/d/<KEY>/export?gid=0&format=csv
Dove ovviamente <KEY> e "gid" saranno diversi per ogni foglio di lavoro.
Nel nostro esempio quindi se carichiamo la pagina:
https://docs.google.com/spreadsheets/d/1LhXl8kuQKhyG0jPpFfXcyd3T7mvACHkPs3EPB6cQIbk/export?gid=1156556300&format=csv
Otterremo un file .csv con i risultati del Girone A dei Mondiali di Calcio 2014
Creando quindi un Google Spreadsheet apposito con un tab per ogni calendario ed ogni risultati di ogni girone abbiamo "preparato" i dati grezzi per la nostra app.
Vi lascio alla visione della Parte 1 del Video Tutorial che ho caricato su YouTube dove potete vedere il procedimento completo utilizzato
Nella parte 2 del tutorial andremo a vedere come realizzare l'interfaccia grafica dell'app e come caricare in essa i dati preparati poco fa...
Nessun commento:
Posta un commento