Cerca con Google

Translate

11 luglio 2011

Tutorial 17 - Importare dati da pagina XML con App Inventor


Vediamo nel tutorial di oggi un'altra possibile implementazione del nuovo componente web di App Inventor,
mi è stato infatti chiesto se fosse possibile leggere una pagina formattata in XML con App Inventor.




Anche se direttamente non ci viene offerta questa possibilità (non ci sono infatti per il momento funzioni di lettura XML in App Inventor) ci si può ingegnare un pochino e utilizzando, come detto prima, il componente Web e le funzioni che lavorano sulle stringhe (come split at first ad esempio) sarà possibile fare un "parsing" molto basilare di un qualsiasi file XML che troviamo in rete.

Nell'esempio vedremo come realizzare una semplice app che ci informi riguardo le condizioni meteo attuali di una data città, la base dati utilizzata è quella di Google Weather (che fornisce delle comode api che fanno proprio al caso nostro...)

UPDATE: Purtroppo ad Agosto 2012 Google ha deciso di dismettere le API per l'accesso ai dati meteo, quindi questo tutorial non sarà più funzionante (come potete leggere dai commenti)
Si possono usare in alternativa le API di Yahoo Weather (http://developer.yahoo.com/weather/) modificando il sorgente affinchè legga i nuovi tag
Spero di poter a breve aggiornare il tutorial affinchè legga i dati da Yahoo e torni a funzionare correttamente

Update 2: Realizzato nuovo tutorial per l'uso delle API di Yahoo Weather, il tutorial è raggiungibile cliccando QUA


Buona visione quindi... :)


Come sempre se vi serve, qui, trovate il codice sorgente dell'esempio appena visto.
Infine vi ricordo che con lo stesso metodo si possono creare delle applicazioni che leggano dei feed rss, infatti i feed rss non sono altro che dei file sempre in formato xml ma con dei tag ancor più "standardizzati"

56 commenti:

  1. Ottima guida, come sempre... in questi giorni di relativa calma mi sto gustando le ultime puntate che non avevo ancora avuto tempo di vedere.

    Per settare una lingua basta inserire &hl= e la sigla della nazione.

    http://www.google.com/ig/api?weather=pietrasanta&hl=en

    RispondiElimina
  2. grazie per il suggerimento, in effetti settando &hl=en si "forza" la lingua su inglese! ben fatto!

    RispondiElimina
  3. Maledizione! Non capisco perchè si pianta sempre dicendomi

    La cosa assurda è che i valori per città, temp e icona me li restituisce correttamente, mentre lascia vuoti umidità e (l'ho aggiunto io) vento.
    Ho provato con Humidity, con umidità, lasciando tutto senza mettere la join (tanto le parole umidity e Wind ci stanno già!quindi è superflua la label composta con join), ma niente. Vento e Umidità proprio non vuole darmeli! eppure ho fatto un banale copia incolla dai set funzionanti, quindi impossibile aver sbagliato. :O

    RispondiElimina
  4. Ciao Seblog
    prima di tutto complimenti, sono un tuo Fan :)

    vorrei chiederti:

    sto creando questa semplice app per il meteo..
    piu' o meno funziona ma quando nella barra di ricerca inserisco un nome con degli spazi oppure un nome sbagliato il sistema si pianta perche' non trova il riscontro dallle api.. che devo aggiungere??

    esempio
    digito Roma --- mi arriva il trackback perfetto con immagini e tutto quello che mi pare

    digito New York ---- si pianta!


    Grazie ciao

    RispondiElimina
  5. Ciao floatingvg, "purtroppo" nel mio video non ho considerato il fatto che se inseriamo nomi di città con lo spazio, questo "spazio" non viene codificato correttamente in una stringa per un url valido, infatti se provi a digitare su un browser:

    http://www.google.com/ig/api?weather=new york

    vedrai che il browser converte automaticamente lo spazio nel carattere %20 e quindi la stringa con l'url corretto diventa:

    http://www.google.com/ig/api?weather=new%20york

    Fortunatamente in App Inventor nel componente Web esiste la funzione "Web1.UriEncode" che fa proprio al caso nostro...:)

    quindi apri il blocks editor e nel blocco "bn_aggiorna.click" nella seconda parte della join, invece di avere solo tb_citta.Text mettici davanti il blocco "Web1.UriEncode"

    In questo modo se inserisci città con gli spazi, sarà App Inventor che li sostituirà col carattere corretto nel mondo www, ovvero il %20

    prova e fammi sapere se risolvi! ah, grazie per avermi fatto notare questa cosa!

    RispondiElimina
    Risposte
    1. Prova con http://www.google.it/ig/api?weather=milano

      Elimina
  6. ciao,ho seguito molto i tuoi video,e sono molto interessanti,il problema e' che volevo riuscire ad estrarre dei dati con tag puro ,ad esempio romae non so come realizzare l'XML_extract chi mi da una dritta!
    grazie

    RispondiElimina
  7. non credo di aver ben capito qual'è il tuo problema, riusciresti a spiegarti meglio magari con un esempio completo? cosa intendi per tag puro?

    RispondiElimina
  8. Ciao vorrei sapere se c'è un modo per importare il testo non nel colore nero ma in un altro colore. Colgo l'occasione per ringraziarti di questi ottimi toutorial

    RispondiElimina
    Risposte
    1. Certo, la tua textlabel ha la proprietà color, basta che la cambi da blocks editor o da design editor in un altro colore e verrà visualizzata nel colore scelto.

      Elimina
    2. Grazie per la tempestività! Volevo chiederti un'ultima cosa anche se non riguarda questo argomento...vorrei inserire in una screen una mappa ad esempio della metro in modalità offline. Però ho notato che se si mettono immagini più grandi dei 320px dello schermo non ci da l'opzione di "scrollare" in orizzontale. Perciò volevo sapere se esiste un modo magari per poterla visualizzare in questa maniera e se con app inventor è possibile fare il pinch to zoom.
      Grazie ancora e scusa per tutte queste domande!!!

      Elimina
    3. non è possibile purtroppo,quello che puoi fare volendo è mettere una webview dove carichi l'immagine,in questo modo hai i controlli pinch-to-zoom senza troppa fatica (per farti un esempio è il grafico della marea sulla mia app acqua alta,l'ho fatto proprio così)
      magari può essere un'idea, la mappa la puoi memorizzare in locale sul cell e poi gli dai il path esatto per la webview.

      Elimina
  9. Ma come mai mi ritorna un errore " Select list items: List index too large" ? Eppure mi sembra di aver seguito tutto quello che spiegavi :-((((

    RispondiElimina
    Risposte
    1. esattamente la stessa cosa che capita a me..ho provato a sistemare alcune cose ma niente..suggerimenti?

      Elimina
    2. Purtroppo Google ha dismesso le API per Google Weather, di conseguenza questo tutorial al momento non può funzionare (il componente web non riceve i dati che si aspetta e che poteva leggere quando le API erano funzionanti)
      in attesa di un nuovo tutorial potete dare un occhio alle API per il meteo di Yahoo:

      http://developer.yahoo.com/weather/

      ovviamente l'app è da sistemare affinchè legga correttamente i nuovi dati che gli arriveranno

      Elimina
  10. Ciao sono Andrea, complimenti sei un grande, sto vedendo i tuoi video e sono riuscito a fare quasi tutte le cose che mi interessano senza saper programmare e soprattutto ci sono riuscito in una settimana grazie ai tuoi tutorial. Ho inserito GoogleMaps, mandare e-mail, avviare chiamate, ecc... L'ultima cosa che vorrei e mettere un bottone che quando schiaccio mi visualizza/aggiorna il meteo della città dove abito, senza dover scrivere il nome della citta. Ma mi risulta un pò complicato. Scusa la domanda ma non so come aprire i tuoi file sorgente, si possono aprire con il bloks editor? Sai io uso Ubuntu e a volte ho qualche problema tipo aprire i file con blocco note o aprire Esegui, per cui spero che non serva qualche programma che solo Windows ha.

    RispondiElimina
    Risposte
    1. Ho visto un altro video e ora ho capito come caricare i file sorgente. Grazie Sebastiano

      Elimina
  11. Intanto ti ringrazio per i tuoi tutorial!

    Avrei una domanda, scusate l'ignoranza, ma come fai a trovare queste pagine xml? Ad esempio io stavo cercando una pagina che tenesse aggiornati i risultati della seria A, ho trovato questo sito:
    http://www.diretta.it/calcio/italia/serie-a/
    ma non so se utilizzi xml e, se eventualmente lo usasse, non saprei come risalirci.

    Grazie in anticipo

    RispondiElimina
    Risposte
    1. in genere le pagine xml sono quelle dove trovi a disposizione il "feed rss" per esempio la pagina che tu indichi non lo fornisce e quindi estrarre i dati da quella pagina è molto più difficoltoso (ma non impossibile, anche se dovresti farti a mano il "parsing" della pagina html)
      Ad ogni modo per un argomento così comune (il calcio) credo che cercando un pò in giro si trovino siti che offrono anche il feed rss con i risultati.

      Elimina
  12. Intanto un grazie a Seba per il prezioso lavoro che ci dedica, sono Angelo e vorrei sapere se è possibile visualizzare in una eventuale label il contenuto testuale di un file .doc oppure .txt che risiede su un sito web?
    grazie per l'attenzione
    Angelo V.

    RispondiElimina
    Risposte
    1. Sicuramente è possibile importare un file .txt, per il file .doc il problema è la formattazione che inserisce Word che porta ad avere caratteri "illeggibili" poi in AI.
      Se hai un sito web con il tuo file .txt la procedura è la stessa vista qui per i file .xml, anzi è anche più facile visto che non c'è da fare parsing di alcun tipo (o meglio, dipenderà da cosa vuoi realizzare)

      Elimina
    2. Grazie, in realtà vorrei visualizzare qualche riga di testo contenuta in una pagina del sito tralasciando tutto il resto che potrebbe cambiare 4 o 5 volte al mese, in questo caso volevo aggiornare manualmente il txt e uplodarlo nel sito in una directory ad hoc in modo che chi si connette con l'app lo possa visualizzare aggiornato.
      Proverò a vedere cosa riesco a fare con il tuo esempio xml.
      Ancora 1000 grazie
      Angelo V.

      Elimina
    3. Ok con txt funziona, se invece si vuole convertire un doc in txt senza errori, ho notato che se si usa la codifica testo Unicode Utf8 nella fase save as il file sembra leggibile correttamente anche le vocali accentate (per esempio), dico sembra perchè ho fatto le prove solo con un paio di file. Ancora mille grazie... ora ho una domanda sui bottoni... mi sposto di argomento...
      Ciao

      Elimina
  13. ciao ! grazie per il tuo lavoro.
    vorrei farti una domanda per chiarire un mio dubbio.
    Una volta che trovato un sito che mette a disposizione dei feed rds come faccio poi
    a ricavare il codice XML da cui dovró prelevare delle informazioni tramite AI ?
    grazie mille e ciao

    RispondiElimina
    Risposte
    1. il feed RSS è già in formato XML, basta che provi a vedere il sorgente della pagina con il feed per rendertene conto
      Poi coi metodi visti in questo tutorial puoi estrarre dal file xml i tag che ti servono nella tua applicazione

      Elimina
  14. ciao sebastiano!
    ho seguito tutte le tue istruzioni, ma se provo l'app sul cellulare, mi da un errore che dice "Select list item: List index too large" e poi dopo continua con tutta una stringa lunghissima di errore!
    sai come o cosa devo fare per far si che funzioni?
    grazie.

    RispondiElimina
    Risposte
    1. Hai provato col mio file sorgente? Forse non ci sono più le api di Google wheater.
      Quell'errore lo da quando i dati ritornati dal componente web non sono in formato csv.
      Prova a fare il debug mettendo l'opzione watch da blocks editor nella variabile che riceve i dati dal componente web

      Elimina
    2. il file sorgente non me lo scarica in formato zip, quindi appinventor non lo accetta!
      Non ho capito cosa intendi per opzione watch!

      Elimina
    3. I file .zip di AI sono appunto i sorgenti che poi possono essere caricati in App Inventor (e poi quindi modificati)

      Ti consiglio di guardare il Tutorial 5: http://seblogapps.blogspot.it/2011/04/tutorial-5-condividere-e-importare-le.html che ti spiega come caricare i sorgenti in AI.

      Putroppo questo tutorial ora non è più funzionante perchè Google ha chiuso le API per l'accesso ai dati meteo,
      vedrò se possibile di aggiornarlo magari usando i dati di Yahoo in modo che il tutorial torni a funzionare

      Elimina
    4. Per farti un ulteriore idea dell'utilizzo del componente web puoi anche guardare il tutorial 11

      http://seblogapps.blogspot.it/2011/06/tutorial-11-il-nuovo-componente-web-di.html

      che è ancora funzionante visto che questa volta utilizza le API di Yahoo per i dati finanziari... :)

      Elimina
    5. ho capito, aspettando il nuovo tutorial, guarderò gli altri!!

      Elimina
  15. Molto bello e utile: Però ci sono degli inconventi:

    1) Si vede poco ed è troppo piccolo;
    2) Proprio perché troppo piccolo, sarebbe opportuno dicessi passo passo anche ei passaggi minimi: dove si vanno a prendere i vari pezzi per esempio.
    Altrimenti per seguirti ci metto giorni e commetto errori perché non son riuscito a edere che pezzo hai aggiunto e da dove l'hai preso.

    RispondiElimina
    Risposte
    1. grazie per i suggerimenti, vedrò cosa posso fare, ad ogni modo puoi scaricare il sorgente sia dell'app che del foglio di lavoro così puoi vedere bene tutte le cose.
      I video sono a 1080p,e potete metterli in pausa per leggere eventualmente le parti più ostiche.
      Ad ogni modo per i prossimi tutorial vedrò come poter migliorare,grazie

      Elimina
  16. CiAo Sebastiano!!!
    Fantastiche Le Tue Guide!!!
    Spieghi Veramente Molto Bene!!! :D
    Sono Arrivata Alla 19, Ma Volevo Chiederti Una Cosa Al Volo...
    Grazie Alle Tue Lezioni Sono Riuscita A Fare Una Mia Prima App E Volevo Sapere Se Conosci Un Modo Per Rendere Le Applicazioni Movibili Dalla Memoria Interna Alla Memoria Esterna???
    Grazie In Anticipo E Ancora Tanti Complimenti Per Quello Che Fai!!! :)

    RispondiElimina
    Risposte
    1. Ciao Sabrina,premetto che da Android 4.0 in avanti non c'è più il bisogno della gestione memoria interna vs memoria esterna, quindi il discorso "move to SD" va un pò a farsi benedire.
      Comunque per versioni antecedenti puoi ottenere la funzionalità di spostamento nella memoria SD passando la tua app con Marketizer, c'è un flag apposito e se lo lasci su "auto" (mi pare di ricordare), poi l'utente può spostare l'app nella SD.
      Mi giungono voci che al momento il sito di Marketizer è irraggiungibile,spero torni online al più presto,al massimo forse qualcuno ha conservato i file di installazione e potrà ricaricarli su qualche altro server.
      Cmq tecnicamente la cosa si fa modificando AndroidManifest.xml e inserendo il tag
      android:installLocation="auto"
      buona fortuna:)

      Elimina
  17. Ciao scusa ma ho un problemino che non riesco a risolvere: se utilizzo le API di Yahoo ed inserisco nella chiamata al web1.url la seguente url (es."http://weather.yahooapis.com/forecastrss?w=721682&u=c") l'emultaore mi risponde con unable to get a response from the url...eppure con chrome/firefox/... la pagina XML viene aperta!
    Dove sbaglio...????

    Grazie intanto per l'ottimo lavoro!

    RispondiElimina
    Risposte
    1. riesci a provarlo con un cellulare android,magari è un problema dell'emulatore.
      Prova anche a mettere una chiamata a web1.urlencode e poi l'indirizzo che mi hai indicato così da fare l'encoding dell'indirizzo prima di passarlo al componente web, se ancora hai problemi prova a mandarmi il tuo sorgente e guardo se ci sono altri problemi

      Elimina
    2. Esatto...è un problema dell'emulatore...troppo avanti!

      Elimina
  18. Sarebbe molto utile che facessi un tutorial sui Feed RSS. Personalmente mi interessa, seguendo il tutorial esistente non sono riuscito ad adattarlo ai Feed.

    RispondiElimina
    Risposte
    1. Un feed RSS contiene sempre e comunque anche dei tag XML quindi la procedura è simile a quella spiegata con questo metodo, si tratta solo di studiare bene il file sorgente del feed ed impostare eventualmente la procedura per l'estrazione dei tag xml ad hoc per la propria applicazione.
      Se vuoi puoi mettere il link del tuo feed rss che ti interessa e postare la domanda sul forum, magari qualcuno ci può dare un occhio e ti può dare una mano :)

      Elimina
    2. Ci proverò una seconda volta, vediamo. Ho realizzato un' app, grazie ai tuoi tutorial che mi hanno fatto immergere in questo mondo affascinante dei dispositivi mobili, e invece di implementare una pagina web dinamica per l'estrazione delle news, volevo caricare i Feed. E' indifferente, credo. Ci volevo soltanto provare ma al primo tentativo è andata male. I Feed sono questi:
      http://www.comune.castrofilippo.ag.it/moduli/news/newsrss.asp che genero dinamicamente in asp. Mentre la app è qui:
      http://www.comune.castrofilippo.ag.it/default.asp?modulo=pages&idpage=100

      Elimina
    3. ok ho visto alla veloce, come vedi il tuo feed rss ha cmq i tag per esempio -title- -description- e -link- ora sta a te creare in app inventor la procedura che estrae questi tag e li usa come vuoi te (per esempio creando una label con il testo del title e se l'utente clicca su un pulsante apre il browser al link indicato),
      il problema è estrarre il numero esatto di notizie e quindi capire quante volte eseguire per dire il ciclo "for", potresti anche pensare di caricare il feed su un foglio di lavoro google e poi estrarre i dati da li (come ho fatto vedere più o meno nel tutorial per l'estrazione di tabelle html su internet)
      cmq credo che il concetto sia abbastanza chiaro, ora devi provare e sperimentare ! in bocca al lupo per il bel lavoro che stai facendo! ciao

      Elimina
    4. Io ho fatto in questo modo:
      I feed sono tutti uguali, quindi titolo, sottotitolo, articolo e immagine.
      Quando costruisci il parser fai una cosa, estrai il primo feed e metti il codice restante in una variabile stringa e ricorsivamente estrai tutti gli altri feed, ad ogni iterazione aggiorni la stringa. In questo modo ti lasci dietro ad ogni passo il codice già utilizzato fino a consumarlo tutto.
      Spero di essere stato chiaro.

      Elimina
    5. Ho lo stesso problema di Calogero, per favore puoi fare un tutorial per quel tipo di feed?

      Elimina
    6. a breve dovrebbero aggiungere un componente che fa il parsing delle stringhe XML, a quel punto sarà molto più facile leggere anche i feed RSS.
      Per il momento valgono le cose che ho detto in risposta a Calogero più di un anno fa,
      attendo fiducioso l'introduzione di questo nuovo parser XML poi ci aggiorniamo :)

      Elimina
  19. Ciao Sebastiano voglio solo dirti che sei un grande...ho una domanda per te e sicuramente visto la tua grande capacità saprai come aiutarmi (sono un novellino del campo). In ogni caso il mio intendo è quello di far riconoscere dei dispositivi android "mandanti" (numero 2 in su) con wi-fi (o altro modo) con un(cellulare android/pc) dispositivo "ricevente" che si trova nelle vicinanze diciamo 5 m e si connettono obbligando i "mandanti" (dispositivi android) di mandare dei dati (orario, nome utente, cose di questo tipo)...so che è un po' complicato ma volevo solo qualche dritta per incominciare (i comandi da usare) ringrazio chiunque volesse darmi una mano. grazie mille.

    RispondiElimina
    Risposte
    1. Ciao Aldo,la cosa non mi pare semplice,per sapere la locazione dei dispositivi non ci sono grossi problemi, puoi usare il "location sensor" e poi con dei calcoli basati su latitudine longitudine puoi capire qual'è la distanza in linea d'aria dei dispositivi.
      Il problema è che un app di questo tipo richiede anche un server dove memorizzare i dati e dove poi i client vanno a leggerli per fare i loro calcoli.
      Ad esempio il "ricevente" potrebbe scrivere in un database pubblico (tipo una google fusion table o un tinyweb db) la sua posizione sotto forma di coordinate gps.
      A questo punto i "mandanti" ogni tot secondi dovrebbero leggere le coordinate del ricevente, confrontarle con le loro e, se entro il raggio prefissato, inviare i dati che hai scelto di nuovo o sempre in un db online o via email o altro...
      Questo proprio a grandi linee, poi ovvio che mi possono essere sfuggite molte cose di cui ti dovrai fare carico quando andrai a programmare un app del genere (ripeto, complicata ma secondo me fattibile anche con App Inventor)
      ps: ovviamente l'app dovrà essere attiva e in primo piano per funzionare perchè in AI le app in secondo piano vengono congelate e smettono di girare... :)

      Elimina
  20. Ciao, io sto costruendo un app che visualizzi i feed rss da una pagina XML, ma anche io ho il problema dell'indice della lista.
    In pratica se copio l'Xml in una stringa non da problemi, ma se gli faccio leggere l'Xml mi da errore.
    Ho guardato un pò e mi sembra che quando facciamo una get da un Url il programma copia la stringa in modo diverso, cambia alcuni caratteri, facendo in modo da non fare funzionare il parser. Questo dovrebbe essere il motivo dell'errore, lui non splitta un bel niente e quindi non ha 2 elementi (stringhe in lista).
    Troviamo una soluzione, dai!!!!
    Grazie anticipatamente a tutti.

    RispondiElimina
    Risposte
    1. Ho risolto! Basta non fare copia e incolla dalla pagina Xml se abbiamo tra il testo il tasto(?) Expand/Collapse tag. Quindi se vi restituisce un errore sul list index è sicuramente sbagliato il testo del tag da splittare.
      Ora però ho un problema con i caratteri speciali, è,<<, ',...me li visualizza come rombo nero con punto interrogativo, come posso risolvere?
      Grazie.

      Elimina
  21. Ciao,intanto complimenti per l'esposizione del tutorial..Sto utilizzando le API di yahoo

    http://weather.yahooapis.com/forecastrss?w=location

    Non riesco a capire come fare per inserire la località dato che il parametro "location" in questione non è una stringa ma un codice WOEID che identifica la località..Grazie per la disponibilità

    RispondiElimina
  22. Buonasera a tutti,
    sono nuovo del forum e di app inventor. Il problema è che mi piace tanto ma non ci capisco una mazza. Mi stò aiutando con i tutorial ma faccio una fatica bestiale.
    Sarebbe possibile esportare i dati da una pagina asp in un foglio excel per poi riprenderli in app inventor?

    RispondiElimina