Cerca con Google

Translate

14 agosto 2013

Tutorial 55 - Importare dati da un file .csv o .txt tramite JavaScript e memorizzarlo in TinyDB


Iniziamo a vedere con questo tutorial tutte le potenzialità che può esprimere App Inventor quando viene utilizzato insieme a JavaScript.

Per chi non lo sapesse JavaScript è un linguaggio di programmazione solitamente usato nelle pagine web per ampliare la funzionalità dell'html di base ed avere quindi siti internet più ricchi di funzionalità (detta proprio terra terra...)

Il grande PuraVidaApps (sito che vi consiglio di visitare) ha scoperto la possibilità di usare JavaScript anche in App Inventor!


Come? usando una webview, in questa webview viene caricata una pagina HTML contenente del codice JvaScript, questo codice viene eseguito dalla webview (a tutti gli effetti la webview non è altro che un istanza del browser internet di Android che facciamo eseguire all'interno di App Inventor) e può quindi fare delle cose che normalmente App Inventor non potrebbe fare, aumentando di fatto le potenzialità di App Inventor stesso!!!

Nello specifico di questo tutorial riusciremo a caricare un file .csv che viene memorizzato come "Media" nella nostra app, il codice JavaScript leggerà questo file e tutti i dati in esso contenuti saranno quindi messi a disposizione nella nostra App.

Come dimostrazione ho usato un file .csv contenente un ipotetica lista di domande per un quiz sulle capitali del mondo.
Tutte le domande, le risposte e la risposta esatta, vengono caricati in una lista bidimensionale "listResult" che poi viene salvata nel TinyDB della nostra applicazione.

Una volta che i dati sono stati caricati li potremmo utilizzare come meglio crediamo, nel caso del quiz per esempio potremmo creare una semplice app a risposta multipla dove l'ipotetico giocatore deve scegliere la capitale giusta di ogni nazione.
Starà eventualmente a voi realizzare il codice che estrae dal "listResult" i valori da mettere nella label con la domanda, i valori per il listpicker per le risposte e la logica di controllo per la verifica della risposta esatta...

Il bello di questa implementazione è che i dati, una volta caricati dal file .csv verranno salvati nel TinyDB, quindi al prossimo avvio dell'applicazione, questi dati verranno letti dal TinyDB che è molto più veloce rispetto all'esecuzione dello script JavaScript.

I possibili usi di questo tutorial sono molteplici, si può caricare ad esempio un lungo file testuale (in questo caso l'estensione del file da caricare sarà ad esempio .txt e il file JavaScript andrà modificato di conseguenza) ed utilizzarlo poi in una label senza appesantire quindi la parte del Blocks Editor con delle make text infinite...

Oppure appunto potete caricare un grosso database che avete già da qualche parte (magari fatto con excel e poi esportato in csv), io ho fatto delle prove con dei csv contenti fino a circa 1000 valori ed il caricamento è stato praticamente istantaneo.
Una volta che avete il DB (sotto forma di lista bidimensionale ad esempio), potete farci un pò di tutto, ricerche, visualizzazioni, cancellazioni, etc... usando le funzioni nella palette "Lists"

Come sempre potete caricare il sorgente di questo tutorial cliccando QUA
Mentre se volete dare un occhio dai due file che carico come "Media" li potete visualizzare cliccando qua:
import.csv
import.html

Si ringrazia infinitamente PuraVidaApps per le sue preziose ricerche e le sue entusiasmanti ricerche con App Inventor!!!

Buona Visione!!!






33 commenti:

  1. Sarebbe bello capire se con lo stesso metodo è possibile scrivere in quel file csv. Ma credo di no in quanto se non ricordo male nello stesso sito di puravida c'è un tutorial che spiega come salvare un file sul dispostivo, ma bisogna avere installata un'altra app che viene poi richiama.

    RispondiElimina
    Risposte
    1. esatto, non è possibile solo con AI scrivere sulla memoria del dispositivo, bisogna usare un app esterna e richiamarla con activitystarter se non erro...

      Elimina
  2. Ciao Seb complimenti per i tutorial sempre interessanti e di facile comprensione.

    Volevo chiederti una info riguardo un'app che dovrei creare, ovviamente utilizzando tinyDB.

    Dovrei memorizzare circa 230 indirizzi (sono i punti vendita di un prodotto alimentare) e poi creare un'app che mi permetta utilizzando il GPS di segnalarmi il punto vendita più vicino e darmi le indicazioni stradali con Google Maps. E' fattibile con App Inventor secondo la tua esperienza?

    Grazie mille
    Tiziano

    RispondiElimina
    Risposte
    1. secondo me si, però ancora meglio sarebbe farlo usando le Fusion Tables, questo perchè nelle fusion tables esiste già una funzione che ti calcola la distanza tra due punti gps.
      Non ho ancora fatto tutorial su Fusion Tables ma se hai voglia puoi guardare qualcosa già da te.
      Altrimenti anche con il TinyDB è fattibile, l'unica cosa è che riuscirai a calcolare la distanza tra i due punti solo in linea d'aria (usando formule trigonometriche che trovi facilmente cercando su google)
      Una volta che hai le coordinate del punto vendita che ti interessa, con activitystarter è un attimo far partire il navigatore a quell'indirizzo.
      Ciao

      Elimina
    2. Ciao Sebastiano sei gentilissimo come sempre. Proverò a studiarmi le Fusion Tables.
      Il problema grosso invece sulla seconda soluzione è che in AppInventor le funzioni goniometriche operano soltanto con i gradi sessagesimali mentre le formule per la distanza fra due punti (in linea d'aria) funzionano in radianti.

      In attesa di un tutorial sulle Fusion Tables ;-) ti saluto e ti auguro buon lavoro.

      A presto
      Tiziano

      Elimina
    3. Non credo sia un problema grosso.
      Ti faccio un esempio: devi convertire un angolo di 32°12'20" in radianti che diventa:
      32 + (12/60) + (20/3600) = 32,2056
      Poi risolvi la proporzione --> 180° : pigreco = 32,2056 : alfa
      da cui alfa = (32,2056 x pigreco)/180 = 0,562 rad

      Elimina
  3. Salve a tutti, non so se qualcuno riesce ad aiutarmi, ma volevo capire... il TinyWebDb non si può posizionare su un sito proprio, io ho un sito dove ho spazio illimitato, volevo magari nelle mie app servirmi di esso magari per salvare un elenco di utenti che si registrano o altre info, strano che con tutto quello che si riesce a fare con App Inventor, non abbiano pensato anche quanto sia importante poter scrivere o leggere su o da un file situato su un certo sito web proprio. Comunque, penso che l'unico metodo di scrittura su un file su un sito proprio al momento possa essere: creare una pagina sul proprio sito in php con un modulo desiderato e un metodo di scrittura su file, e questa pagina la apri nel app con la funzione Web, apri la pagina, scrivi su file e la chiudi. Grazie.

    RispondiElimina
    Risposte
    1. se non sbaglio basta che implementi con AppEngine il tuo TinyWebDB e puoi decidere te su quale sito ospitarlo, di base viene caricato sul cloud di google ma credo sia possibile installare AppEngine e TinyWebDb su un sito a scelta, se ho un momento di tempo provo a darci un occhiata, nel frattempo prova a controllare anche te.
      Altrimenti la soluzione più complicata è usare come dici te php e mandare delle richieste col componente web per leggere e scrivere su un db remoto.

      Elimina
  4. Gentile Sebastiano T.
    Complimenti per l'ottimo lavoro che condividi con tutti. Volevo chiederti informazioni per la creazione di un app. Premetto che in pochi giorni ho bombardato il cervello con tutorial di ogni tipo, quasi non ragiono più normalmente. Scusa se questa non è la sezione adatta ma....non sapevo come porti la domanda. Gestisco il sito di una associazione senza scopo di lucro e pensavo di creare un'app che riceva notifiche ogni volta che si aggiungono delle novità/notizie sul sito della stessa. Potresti essere così gentile ga indirizzarmi? Ti sarei molto grato.
    La piattaforma del sito è joomla!
    Grazie.

    RispondiElimina
    Risposte
    1. Ciao Claudio, purtroppo per fare un app del genere (quindi vorresti per dire delle notifiche che ti arrivano sul cellulare tipo quando arriva una nuova mail/sms, etc...) bisognerebbe usare i servizi per i messaggi in push di Google (si chiama GCM se non erro)
      attualmente una cosa del genere non è fattibile in App Inventor, l'unica cosa che puoi fare è un app che ogni volta che la lanci carica una pagina web e controlla se eventualmente son presenti nuove informazioni,
      ma il lancio dell'app lo deve fare l'utente senza quindi la possibilità di visualizzare delle notifiche in automatico.
      Mi dispiace

      Elimina
  5. Ciao Seb Grazie per il tuo video.
    Ti volevo chiedere cosa fare se il file .csv è online ad un indirizzo http:// etc...?

    Perfavore è molto urgente! :)

    Grazie

    RispondiElimina
    Risposte
    1. Puoi leggerti il tutorial
      http://seblogapps.blogspot.it/2012/11/tutorial-38-importare-dati-da-una.html
      che concettualmente è simile a questo ma prende i dati da un foglio di lavoro google drive pubblicato sul web come file .csv appunto
      fammi sapere se risolvi, ciao
      ps: non rispondo via hangout ;)

      Elimina
  6. Ciao e complimenti per i tutorial.

    Volevo chiederti gentilmente come posso fare per inserire un campo ricerca associato, ad esempio al numero 1 nel database TinyDB.

    Grazie

    RispondiElimina
  7. Ciao, piacere, mi chiamo Michele e... prima cosa... complimenti per i video. Li sto visionando tutti e li ritengo davvero molto interessanti e (soprattutto per chi come me è nuovo del mondo programmazione app) devo dire che sono davvero molto chiari nonostante riguardino cose particolari (ripeto... almeno per me insomma).

    Ascolta, siccome sto cercando di programmare in questi giorni un applicativo di gestione magazzino, vorrei rivolgerti un po di domande:

    1) qual'è il procedimento semplice semplice per memorizzare in TinyDB la lista csv creata senza aggiungere if ... them... o cose del genere?
    2) questa lista contiene i seguenti campi... | cod a barre prodotto | nome prodotto | tab1 | tab2 | tab3 | ...bene: dopo il lancio della scannerizzazione, come si fa per far ricercare il risultato della stessa scannerizzazione nella lista del csv caricata... e far uscire le relative info negli appositi campi dell'app... (ossia nelle labels ovviamente già create nella grafica dell'app)?.
    Es. scannerizzo il cod a barre del barattolo di nutella. Dopo la scansione, sull'app mi dovrebbe uscire | cod. | nome | destinazione 1 | ...2 | ...3 | relativa ovviamente alla nutella appena scannerizzata nei campi preimpostati.
    3) siccome nella stessa app, ma in un'altra pagina, dovrei dare l'opportunità ai miei colleghi di avviare una chiamata al centralino (Es. 9875) e indirizzarli automaticamente al settore di propria appartenenza (3... 4... i classici numeri da digitare sul tastierino dopo aver ascoltato la voce per raggiungere l'interno desiderato) come potrei fare? sai, così nel frattempo continuano a lavorare e non perdono tempo a sentire la voce) :-)

    Un grazie infinito già da ora. Ovviamente, se non sono stato chiaro sono qui.

    RispondiElimina
  8. Salve Sebastiano. Spero non disturbarti ulteriormente. Hai qualche indicazioni in merito a quanto ti ho scritto nella precedente richiesta? Rimango fiducioso in attesa della risposta.
    ...anche perché sto provando da due giorni a far girare la costruzione che hai spiegato nel video, ma purtroppo non ci riesco proprio a farla caricare questa lista csv: richiedo (come fai tu) con il tasto destro del mouse il "Do it"... ma il result è sempre... "()" ...non so a questo punto se possa mai essere un problema di destinazione file (dato che io ho un samsung galaxy s3, ma forse sto dicendo una cavolata)... o il problema dipenda da altro.
    Attendo grazie, a presto

    RispondiElimina
  9. Ciao Sebastiano,
    mi sono arenato a causa di un limite che mi sembra invalicabile. Credo di aver capito che un titolo di una pagina non può superare i 4096 caratteri. Il mio testo viene troncato a 4096 almeno...
    Mi sai consigliare qualcosa che non siano le fusion table per risolvere?
    Grazie per l'aiuto

    RispondiElimina
    Risposte
    1. Ho risolto utilizzando le idee di base di un altro tuo tutorial, quello dell'importazione dati da tabella html.
      In pratica punto il componente web direttamente verso l'url del file csv e lui mi legge tutti i dati come mi serve.
      Sei sempre una fonte inesauribile di idee...grazie per il blog ;)

      Elimina
    2. scusa se non ti ho risposto prima, ad ogni modo a me sembrava di aver fatto delle prove e che andasse oltre i 4096 caratteri, ma mi posso anche sbagliare
      se il tuo sorgente è già in csv e lo puoi leggere online allora il componente web è l'ideale così non hai limiti sulla lunghezza... :)

      Elimina
  10. Ciao
    ho seguito il tuo interessante tutorial per scaricare un database piuttosto grosso in un app di prova creata con appinventor. purtroppo l'app non scarica nella label il contenuto del file import.csv ma compare la seguente scritta (import.html).
    Mi sai dire se ho commesso un errore o per qualche ragione la procedura con i due file import.html e import.csv puo' non funzionare.
    Io uso Appinventor2 su un Nexus4 con android 4.4
    Grazie

    RispondiElimina
  11. per prima cosa prova con un file .csv di poche righe per vedere che il problema non sia li,
    poi controlla i due path (quello di test e quello di produzione, a seconda se fai girare la tua app collegano il cellulare in wifi o scaricando l'apk)
    da quello che mi dici sembra che non legga proprio il file import.html che contiene il javascript per il caricamento dei dati,
    ora controllo anche i link nel post perchè in effetti sembra che ci sia un problema nello scaricare quei due file...ricontrolla tra 10 minuti circa :)

    RispondiElimina
  12. grazie per la risposta. Ma la tua procedura funziona solo su Appinventor classic o anche su appinventor2? La cosa strana e' che appinventor sembra fare qualcosa con import.html ma invece di far girare il codice contenuto in esso si limita a riportare il nome (import.html), comprese le parentesi nella label dello Screen1.

    RispondiElimina
    Risposte
    1. funziona anche con App Inventor 2
      Il concetto di funzionamento è questo:
      import.html viene fatto girare in una webview e contiene un javascript,
      questo javascript legge il file import.csv ed imposta il titolo della webview con il contenuto del file import.csv
      a quel punto con app inventor (1 o 2 non importa) leggiamo il nuovo titolo della webview che ha i dati che ci interessano e che poi vengono importati come mostrato.
      Se continua a mostrarti import.html o non hai caricato il file import.html come assett correttamente (lo hai scaricato sul tuo pc e poi caricato come asset in app inventor?) o altrimenti hai fatto degli altri errori.
      Se vuoi altri approfondimenti (in inglese) li trovi qui
      http://puravidaapps.com/importCSV.php

      Elimina
    2. per quanto riguarda il caricamento di import.html in appinventor, ho fatto il download del file dal blog e poi ho fatto l'upload da appinventor come ho visto nel tuo video tutorial. Da quello che ho capito questo e' il sistema per caricare il file come asset. Mi sbaglio o e' cosi'
      Grazie

      Elimina
    3. esatto, è proprio così.
      Controlla che il tuo file import.html sia un file di testo puro e semplice con il codice javascript così come riportato nel sito di PuraVidaApps, cercherò di provare al più presto lo stesso metodo con AI2 ma non vedo perchè ci dovrebbero essere differenze.
      Ciao

      Elimina
  13. Ciao, ho anche io un problema analogo con AI2
    Ho caricato i 2 files import.html (txt realizzato con copia-incolla e poi rinominato .html e quello .csv scaricato integralmente )

    Ho realizzato tutti i blocchi come da tutorial con l'unica incertezza
    file:\\\mnt\sdcard\AppInventor\assets\import.html
    oppure
    file:///mnt\sdcard/AppInventor/assets/import.html

    in ogni caso, comunque, ho il messaggio "Pagina Web non disponibile"


    Per favore, puoi aiutarmi a venirne fuori? grazie


    RispondiElimina
    Risposte
    1. Ho risolto:
      non dovevo utilizzare

      file:///mnt\sdcard/AppInventor/assets/import.html
      ma
      file:///android_asset/import.html

      Elimina
  14. salve a tutti a questo bel tutorial, che ci semplificherà la vita di tutti ed anche di molto, non si potrebbe aggiungere anche un TableArrangment che con un ulteriore comando javascript possa sostituire le parentesi e le righe di testo in modo da incellarle come da file.csv originale

    RispondiElimina
  15. Ciao, ho utilizzato il tuo tutorial per provare a realizzare un app in MIT2, il mio file csv ha 541 righe ma ne considera solo 230... secondo te è una limitazione di qualcosa?
    Grazie ciao

    RispondiElimina
    Risposte
    1. Secondo me è probabile che ci sia un qualche errore o carattere strano nel tuo file csv che ti blocca l'import dopo 320 righe
      quando avevo provato io non c'erano limitazioni ed avevo importato anche file di 2000 righe, la limitazione era nella lunghezza massima del titolo della pagina web per il javascript ma mi pare si parli di circa 2Mb di lunghezza, quindi 320 righe sono proprio poche...controlla bene il tuo .csv

      Elimina
  16. Ciao Sebastiano,
    premetto di essere un completo neofita di programmazione e ho bisogno di un aiuto per un'applicazione che volevo creare e credo sia vicina al contesto del tutorial.
    L'applicazione che vorrei creare dovrebbe essere un generatore casuale di parole. Vorrei che l'utente potesse scegliere la "tematica" di cui la parola fa parte (es. cibo, mezzo di trasporto, colore etc...) e poi, cliccando sul pulsante venisse visualizzata in maniera casuale una delle tante parole che hanno come tag quella tematica. Uno dei miei problemi è la gestione del database (che dovrebbe essere continuamente aggiornabile) e la possibilità dell'interrogazione casuale, come posso procedere?
    Grazie in anticipo per l'aiuto

    RispondiElimina
  17. Ciao, bellissimo tutorial. Una domanda.
    da un database su internet esporto in csv che risiede anche questo su un host. Posso importarlo da li? Se cambia il contenuto del file csv, cambia anche il contenuto dell'app?
    Grazie

    RispondiElimina
  18. COME LO CREO QUESTO FILE CHE DICI? IN JAVA CHE NON CONOSCO? TUTORIAL INTERESSANTE MA PER ME INFATTIBILE

    RispondiElimina
  19. Ciao, complimenti per quello che fai...
    ho un problema, quando utilizzo webview e navigando in un sito clicco su un indirizzo email giustamente non si apre la pagina ma non riesco a trovare il modo di far partire il ciclo di start activity. Come posso fare?

    RispondiElimina