Cerca con Google

Translate

5 novembre 2012

Tutorial 38 - Importare dati da una tabella HTML in App Inventor - Parte 2


Eccoci alla parte 2 del tutorial (la parte 1 la trovate cliccando QUA)

Ora i dati sono pronti e formattati secondo le nostre necessità.

Non ci resta che creare l'app che scarichi questi dati e li visualizzi all'utente.

Per semplicità la nostra app visualizzerà solo le prime 3 squadre in classifica ed il loro punteggio, è chiaro come sia possibile far visualizzare qualsiasi dato presente nella nostra tabella cambiando la query ed aggiungendo nuove label, etc...

L'app in se come potrete vedere non è complicata e contiene i seguenti elementi principali:

1 - un pulsante per far partire l'aggiornamento dei dati
2 - il componente web per la lettura dei dati
3 - della label per visualizzare le informazioni acquisite

Buona visione, ci risentiamo dopo per alcuni commenti e precisazioni

Aggiornamento del 07-08-2013: Purtroppo mi è stato fatto notare che la pagina da dove vengono presi i dati è cambiata e non funziona più con questo tutorial, appena ricomincerà il campionato vedrò di trovare un'altra sorgente valida. Nel frattempo se volete potete cercare anche voi un altro sito con una tabella con la classifica di Serie A!



Per prima cosa meglio precisare che l'app funziona quando caricata direttamente sul vostro smartphone, usando invece l'emulatore potrete avere dei problemi (Error: 1101).

Non ho ancora ben capito da cosa dipenda, se dalla versione android usata nell'emulatore (io ho provato con emulatori 4.0.4 e 4.1 ed in entrambi ricevevo quel messaggio di errore) o da problemi temporanei di accesso alla rete.

Forse anche le opzioni di condivisione del foglio di lavoro possono avere qualche implicazione con questo messaggio di errore (su cui in internet si trova poco), se avete questo errore provate anche a pubblicare il foglio di lavoro (andando in File->Pubblica sul web) come da immagine a fianco:

Può anche darsi che occorra un minimo di tempo affinché la "pubblicazione" si propaghi per tutta la rete, quindi eventualmente se avete l'errore 1101 riprovate qualche ora dopo o il giorno seguente, se scopro di più aggiornerò questo post.













Se usate i nuovi Google Fogli di Lavoro (dal 2014 in avanti) la pubblicazione in CSV è un pò diversa, scegliete come sempre "Pubblica sul Web" ed annotatevi l'indirizzo completo che sarà di questo tipo:

https://docs.google.com/spreadsheets/d/1efQWyWEOlrnehmW7ySek5tnHMOMHfwIjrc-bYrejpEg/pubhtml

La parte in grassetto è la <KEY> del vostro foglio di lavoro pubblicato, quindi univoca e diversa per ogni foglio creato, 
potete creare il link alla pubblicazione come CSV creando l'indirizzo URL in questo modo:

https://docs.google.com/spreadsheets/d/1efQWyWEOlrnehmW7ySek5tnHMOMHfwIjrc-bYrejpEg/export?gid=0&format=csv

In pratica dal primo indirizzo dovete togliere /pubhtml e sostituirlo con /export?gid=0&format=csv

Se volete sperimentare dell'altro, potete provare a modificare l'app per fare in modo che vi visualizzi il punteggio di una squadra scelta dall'utente.
(suggerimento: userete un listpicker col nome delle squadre e la query SQL andrà modificata di conseguenza...)

Trovate il sorgente dell'app QUA (io lascio condiviso il foglio di lavoro su cui l'app si appoggia, speriamo la pagina del corriere dello sport non cambi nel frattempo)
Se invece volete dare un occhio al foglio di lavoro Google Docs, lo trovate QUA

Per commenti, problemi o suggerimenti usate il modulo commenti o meglio ancora il forum nel post dedicato
a questa pagina

40 commenti:

  1. ciao ! bellissimo tutorial, complimenti.
    Hai capito da cosa é dovuto l'errore 1101 ? sono passati giorni ma l'errore ricompare sempre

    RispondiElimina
  2. Ciao Seba,
    ti ricordi che un po' di tempo fa mi avevi detto che si può aprire un pdf con app inventor, dopo aver controllato se c'è il lettore e i pdf? Mi avevi detto di cercare su google: activity starter pdf. Bene, dopo aver effettuato la ricerca ed aver provato a tradurre le indicazioni (che erano solo in inglese), non ho avuto risultati. Ad oggi non so come farlo. Ti chiedo, se non troppo impegnativo, se sapresti fornirmi i parametri con cui attivo l'activity starter. Poi mi avevi consigliato di inserire delle notifier per informare l'utente della mancanza di pdf o di reader. Come?? Spero di non aver chiesto troppo e di essere stato troppo invadente.
    Grazie mille per più motivi:
    i tuoi video sono fantastici, spiegano bene e ti fanno imparare quello che serve;
    il tuo ascolto;
    la tua disponibilità;
    il tuo aiuto.
    Quindi ribadisco il grazie e ti saluto. Ciao!

    RispondiElimina
    Risposte
    1. siamo decisamente OT per questo tutorial, cmq prova a guardare nel forum :
      h t tp://venicetideads.altervista.org/index.php?p=/discussion/comment/942#Comment_942
      nel datauri metti l'indirizzo http del tuo pdf (se vuoi che venga scaricato online)

      Elimina
    2. in realtà lo volevo offline... comunque grazie!

      Elimina
    3. P.S: nel forum che mi hai dato, dai i parametri da mettere nell'activity starter, ma non va messo nulla nel blocks editor? Grazie per tutte le risposte ke mi dai!

      Elimina
    4. è lo stesso, puoi mettere i parametri in design editor o blocks editor,
      se vuoi aprire un file già memorizzato sul telefono devi mettere al posto di http://
      file:/// e poi il nome del file, ad esempio se è memorizzato nella cartella /android_asset/ dovrai mettere
      file:///android_asset/documento.pdf (nota i tre ///)

      Elimina
  3. ciao ti ho scritto anche sul canale di youtube volevo chiederti nel pezzo dove copi il link della pagina di internet non riesco a capire fino a dove lo sottolinei per copiarlo me lo potresti scrivere per favore ? e poi il nome che dai alle due variabili alinizio non lo capito ?
    ultima cosa io non l'ho fatto il proccesso che hai fatto te cioe non lo personalizzata la classifica come hai fatto te rendendolo con un carrattere diverso va bene uguale ? per favore mi puoi scrivere il link che devo copiare se lo copio dirrettamente dalla pagina di google drive senza che modifico il carattere come hai fatto te ? per favore spieghi molto bene soltanto che non lo capito questa cosa :D

    RispondiElimina
    Risposte
    1. Ciao Francesco,ora sono di corsa...ma se ti scarichi i file sorgenti che ho messo a disposizione puoi controllare tu stesso cosa copio e cosa inserisco in google drive no?
      altrimenti puoi mettere in pausa il video, cambiare la risoluzione a 1080p e lo dovresti leggere benone lo stesso,
      scusami ma ora sono di corsa, ad ogni modo questo ovviamente è solo un esempio poi il carattere la classifica e tutto il resto lo puoi modificare come meglio credi,ciao

      Elimina
  4. Ciao Sebastiano,
    avrei bisogno di un tuo consiglio!
    Obiettivo: effettuare una query in un campo dato su uno Spreadsheet a due colonne.
    Su un campo di ricerca inserisco un dato e dovrei avere restituito il campo associato sulla stessa riga.
    Di deguito trovi la foto dei blocchi ma...

    https://docs.google.com/file/d/0B16RIH5xR-6aVXBwblNfQzFsbjg/edit?usp=sharing

    Cosa mi consigli?
    Grazie mille!!!

    RispondiElimina
  5. In sintesi dovrei fare in modo che l' utente possa decidere cosa cercare (con una select B where A = 'E511') in una tabella con due colonne (colonna A i codici da cercare che sono conosciti già dall' utente...un po' come se fossero le sqaudre di calcio e colonna B il commento poi da mostare a schermo come se fossero il punteggio della squadra).

    Non so se mi sono spiegato meglio :)

    Grazie in anticipo per l' attenzione ed il tempo!!
    Fabio

    RispondiElimina
  6. Penso di aver risolto...
    https://docs.google.com/file/d/0B16RIH5xR-6aSUtPbHROZTBVVVU/edit?usp=sharing
    Cosa ne pensi?
    Se ti venisse in mente una "composizione" piu' efficente ... :)

    Una volta terminata l' app condividerò, ovvimenet, il progetto.

    RispondiElimina
    Risposte
    1. Ciao Fabio, scusa se rispondo solo ora, cmq hai risolto da te! bravo :)
      beh la query è semplice e mi pare che l'hai realizzata correttamente, non vedo il foglio di lavoro originale ma se hai fatto le prove e funziona allora sei a posto no?
      non è che ci sia molto da aggiungere, fai la select, funziona, usi l'uriencode...
      tutto a posto direi :)

      Elimina
  7. Scusa sebastiano io ho copiato il tuo progetto è lo modificato a mio piacimento ma non riesco a far partire il comando response code cioè quello che vede se c'è scritto che è 200 o 1100 la app funziona ma se non c'è internet mi esce una scritta in inglese ti lascio il progetto così vedi

    Link progetto:https://docs.google.com/file/d/0B0YgSZ2LlBqOOUs3OVh1dGRtcTQ/edit?usp=sharing

    RispondiElimina
    Risposte
    1. credo sia normale, non da il responsecode ma da un errore che mi pare (vado a memoria) possa essere catturato usando screen1.error o qualcosa del genere, appena ho tempo vedo il tuo progetto, intanto prova a controllare quanto ho detto sopra (ma se hai connessione tutto funziona correttamente?)

      Elimina
    2. response code può essere 200 o 404, mentre errore 1101 viene catturato su screen1.erroroccurred, sto preparando un tutorial che pubblicherò a breve che ti mostra come controllare se il cellulare ha una connessione dati attiva...:)

      Elimina
  8. Ciao Sebastiano, ho seguito la tua guida, davvero ottima, complimenti, ma mi sto ritrovando ormai da ieri con un "Errore 500, riprovare più tardi". Ho provato anche ad avviarlo dal telefono ma la cosa non cambia. A cosa pensi sia dovuto?

    RispondiElimina
    Risposte
    1. Purtroppo forse è cambiato qualcosa nella pagina del sito del corriere, ti consiglio di riprovare tra un paio di giorni e nel frattempo provare a caricare una tabella html da un altro sito...

      Elimina
  9. sto provando a collegarmi semplicemente ad uno Spreadsheet a due colonne di prova, ma il problema sembra essere lo stesso... molto strano

    RispondiElimina
  10. Ciao Sebastiano, ma sarebbe possibile fare in modo che una volta scaricati i dati rimangano in storage sul telefono fino a che non si scaricano di nuovo? in modo che anche se non si ha la connessione si vede la classifica aggiornata all'ultima volta che si è scaricata?

    RispondiElimina
    Risposte
    1. si, basta salvarli con il TinyDB (anche quelli che vengono scaricati col componente web quindi ancora in formato csv)
      poi magari metti un pulsante aggiorna per far scegliere all'utente se vuole aggiornare i dati o se preferisce usare quelli ultimi che ha memorizzato in locale

      Elimina
  11. Ciao Sebastiano, credo ci siano stati dei cambiamenti negli spreadsheets. Quando si salva per il web non ti da più la possibilità di esportare in altri formati. L'unica è pubblicarla per il web in html ma in questo modo le querylanguage non mi funzionano. Posso chiederti una verifica? Buona giornata.

    RispondiElimina
    Risposte
    1. Penso tu abbia ancora ragione, colpa dei nuovi fogli google :
      https://support.google.com/drive/answer/3543688?hl=it&ref_topic=20322


      "La nuova versione di Fogli Google contiene una serie di nuove funzioni e di miglioramenti delle prestazioni. Tuttavia, la nuova versione non supporta ancora la pubblicazione di singoli fogli."

      speriamo risolvano a breve...

      Elimina
    2. Buongiorno ragazzi,
      e grazie Sebastiano per il tuo grande impegno nel condividere con la comunity il tuo sapere su AppInventor.

      Ho riscontrato anche io lo stesso problema sopra, e per ora ho risolto facendo i fogli con la vecchia versione che è possibile fare solo digitando l'url: https://g.co/oldsheets.

      Gli sviluppatori mi avevano risposto che effettivamente i nuovi fogli non hanno la funzione di condivisione dei link in formato csv. Ma non mi hanno detto se lo faranno in futuro.

      Elimina
  12. Ciao Sebastiano ho un problema con url encode, al posto del classicio %20 mi mette il simbolo +. Hai qualche consiglio da darmi. Utilizzo ai 2

    RispondiElimina
  13. Ciao Seblog, grazie innanzi tutto per i tutorial!!
    Con questo avrei un problema: ho eseguito alla lettera oil tutorial, facendo delle piccole modifiche per addattare il tutto a ciò che mi serve, però non mi funziona, sembra che non legga niente dalle fusion tables!
    Ma può essere che con le nuove Fusion ci siano dei problemi? Ho fatto il passaggio per trasformarla in .csv, e in effetti se vado a quella pagina mi scarica il file, però sembra che AI2 non legga niente! Ma ci sono le finestre di watch su AI2?
    Grazie in anticipo! :)

    RispondiElimina
    Risposte
    1. Ma il tutorial parla dei fogli google spreadsheet, non delle fusion tables.
      Per le fusion tables c'è un componente apposito.
      In AI2 per le finestre di watch devi cliccare con il tasto destro sul nome della variabile o sul componente e scegliere "do it", al massimo puoi impostare delle variabili apposite solo per controllare il valore dei dati nella tua app, però non si aggiornano in automatico i valori, ogni volta devi fare il "do-it"

      Elimina
  14. Ciao Seba, incontro anch'io le difficoltà del gruppo, mi spiego ho un pubblicato un foglio a due celle, se inserisco nella barra degli indirizzi il link che genera vedo solo le due celle ma in formato html, se sostituisco la parte pubhtml con export?gid=0&format=csv mi fa partire il download del file. se inserisco cmq il link nel got.text in entrambi i casi mi da tutta una serie di informazioni che credo siano i dati di "costruzione" del file. come posso fare? io ho bisogno di solo 2 dati (numerici), spero di sentirti presto

    RispondiElimina
    Risposte
    1. Ciao Mickj, in effetti è passato molto tempo dalla pubblicazione di questo tutorial, mi potresti dare l'indirizzo completo del tuo foglio di lavoro (o di uno che crei di test se hai dati personali) che provo a dare un occhiata a cosa potrebbe essere.
      Ovviamente usando AI2.
      Attendo tue notizie, ciao!

      Elimina
    2. certo, ti do la chiave che applico al componente, troverai solo due numeri in formato ggmmaaaa sono delle date che mi servono come riferimento, in pratica l'app salva la data di utilizo nel componente file, io aggiorno le date dello sheet e l'app quando si avvia controlla se l'ultimo avvio è antecedente alla data da me inserita nello sheet segnala l'aggiornamneto, contorto ma spero capisca cio che voglio fare, il link è
      https://docs.google.com/spreadsheets/d/1gHG_ub4ZSAUj826ZE0U7Mjwstp5GAhC4doPzrONIPE8/pubhtml?

      Elimina
    3. ci hai capito qualcosa Seba???

      Elimina
    4. mi devi dare l'autorizzazione al foglio di lavoro, forse è per quello che riscontri il problema? ricorda che il foglio deve essere condiviso pubblicamente affinchè il tutorial funzioni...

      Elimina
    5. Fatto, questo era una copia creata ad hoc, il file originale è "pubblico", ora ho "liberalizzato" anche questo...

      Elimina
    6. Ho creato una piccola app di test, mi pare funzioni tutto come da tutorial, ti lascio il link al mio sorgente .aia
      provalo e fammi sapere (oltre al bottone donazione che non fa mai male :) )
      https://drive.google.com/file/d/0BxHg0fjQtiz2RzhaTzhFRUlYaDA/view?usp=sharing

      Elimina
    7. Grazie Seba, penso di aver (GRAZIE AL TUO AIUTO) risolto il problema principale ma ancora l'app "non ubbidisce", in soldoni quello che voglio fare io è salvare la data di accesso sul cellulare e confrontarla con una data sul web che indica l'ultimo aggiornamento, ma non riesco a raccapezzarmi, io ti lascio l' .aia se ti va dagli un occhio almeno x farmi capire dove sbaglio...

      https://drive.google.com/file/d/0B29D3KveMZPgelQ1QWVqNUx3SlE/view?usp=sharing

      Elimina
    8. Secondo me hai un pò di confusione su quel che vuoi fare...
      Questo è quello che penso io che dovresti fare
      1 - all apertura dell'app leggi la data dal web, e leggi la data memorizzata nel cellulare (di ultimo avvio)
      2 - se non c'è data di ultimo avvio, scrivi con il componente file la data corrente
      3 - confronti le date di ultimo avvio dell'app con la data di aggiornamento (dal web)
      4 - se la data di ultimo avvio è più "anziana" di quella di aggiornamento esegui le tue operazioni per avvisare della news
      Ad ogni modo il grosso errore che hai fatto è confrontare le date nel formato ddMMyyyy,
      quando si confrontano date in informatica devi sempre riferirti ad un "istant" ovvero il tempo in millisecondi dal 1 gennaio 1970 ad oggi.
      Con AI puoi formattare facilmente una qualunque data con qualunque formattazione in un istant e viceversa,
      dopodichè fai il confronto matematico < con i due istant...
      Ti allego sia la schermata del confronto (utile anche ad altri che vogliano cimentarsi con lo stesso problema)
      che il tuo progetto leggermente modificato (poi il resto devi farlo te ovviamente)
      ps: anche nel google spreadsheet ti consiglio di salvare le date in dd/MM/yyyy
      Se non ti interessa avere un formato "leggibile" puoi anche salvare tutto sempre nel formato "istant", sia sullo spreadsheet che sul tuo componente file, il programma sarà più leggibile ma di contro se apri il file di testo salvato capirai "poco" dell'ultima data di esecuzione del programma :)

      il blocco di confronto:
      http://i.imgur.com/xGtnuuz.png

      il tuo progetto modificato:
      https://www.dropbox.com/s/c93ezttyx55uhs6/CGM%20%282%29.aia?dl=0

      ps: il tasto donazione... :)

      Elimina
  15. Ciao Seba e GRAZIE, pensa che credevo di aver fatto quello che dicevi :( Può essere che così come strutturata l'app non riesca a leggere in sequenza le date per poi poterle confrontare (anche nella tua mod ho lo stesso problema). per il formato da confrontare ddMMyyyy è sufficiente in quanto gli aggiornamenti saranno giornalieri quindi verosimilmente 26102015<27102015 e nel file sul web risulta più comprensibile. aiutami a capire dove sbaglio

    PS tranquillo che mi ricorderò del tasto ;)

    RispondiElimina
    Risposte
    1. Ciao Mickj, nel mio codice che ti ho messo su dropbox vedi tutto quello che rimane da fare, il discorso data non è una "preferenza" ma un "obbligo" nel salvarla nel formato dd/MM/yyyy (nota gli /) altrimenti non funzionano i metodi di formattazione e confronto delle date di AI.
      Ovviamente io ti ho mostrato come gestire una data, ma son il select list item puoi benissimo leggere o la data nella prima cella o quella nella seconda (come ti avevo mostrato nel primo codice .aia inviato)
      Detto questo, penso tu abbia tutti gli elementi per andare avanti, se ancora hai bisogno, mandami il file .aia aggiornato e provo a vedere di darti un ulteriore (spero ultima) mano... :)

      Elimina
    2. Ciao Seba, mi spiace leggere quel tuo "spero ultima", non pensavo di disturbare ma volevo capire i meccanismi, per quanto riguarda i confronti ti fossilizzi sul fatto che siano date, io confronto semplicemente 2 numeri poi che per me rappresentino due date questo AI non lo sa, ribadisco che nel .aia che hai modificato qualcosa non va, nella textbox che mi hai aggiunto dove dovrebbero comparire i 2 numeri uno dei due parametri è a zero ergo qualcosa non funzioni, ora non vorrei tediarti oltre ma la cosa mi sembrava un buon metodo per "creare" le notifiche d'aggiornamento che mancano ad AI senza appesantire con continui pooling il telefono, credevo che aiutandomi con questa cosa potesse nascere un tuo nuovo ed esaustivo tutorial che credo sarebbe interessato a molti. Non posso che aggiungere un Mi spiace aver disturbato e mi spiace non riuscire a completare la cosa

      Ciao Mickj

      Elimina
    3. Tranquillo, io ti suggerivo solo di vedere con calma quel che ho fatto io e rileggerti tutto perchè mi pare di averti dato tutte le info per proseguire. Cmq può essere che abbia sbagliato anch'io, ora non riesco a testare ma ti assicuro che ieri quando ti ho scritto leggevo correttamente le due date (quella memorizzata sul web e quella memorizzata in locale).
      Per il discorso del confronto, lo devi fare con gli "istant" per forza di cose perchè un confronto matematico non può essere fatto nel caso delle date, è anche più leggibile memorizzare le date con lo / a separare ddMMyyyy.
      Ripeto prova a controllare tutto con calma, io più di tanto al tuo codice non ci posso mettere mano perchè è abbastanza complicato e mi porta via parecchio tempo e poi te che lo hai fatto sai meglio di me di sicuro cosa vuoi ottenere.
      Spero di averti dato gli spunti per continuare, fammi sapere come procedono le cose.
      Non te la prendere ... ;)

      Elimina