riprendiamo quanto in parte fatto nel Tutorial 17 - Importazione dati XML per la lettura di un file xml che ci fornisse la situazione attuale del meteo di una determinata città.
Purtroppo Google ha rimosso le API per Google Weather circa un anno fa rendendo il tutorial obsoleto.
Vedremo quindi oggi come utilizzare le API di Yahoo Weather per realizzare un app molto simile che ci visualizzi le condizioni meteo attuali di una città a piacere.
Vi consiglio di leggere questo post e poi studiarvi bene il video, purtroppo le API di Yahoo Weather sono un pò meno semplici di quelle di Google e quindi bisogna lavorare un pò di più per ottenere lo stesso risultato.
Partiamo vedendo appunto cosa ci offre Yahoo, a questa pagina http://developer.yahoo.com/weather/ troviamo le istruzioni per l'utilizzo delle loro API,
il formato con cui effettuare la richiesta è il seguente:
http://weather.yahooapis.com/forecastrss?w=location
dove la "location" deve essere sostituita da un codice WOEID che identifica in modo univoco ogni località nel mondo.
Per esempio il WOEID di Milano è 718345 quindi per ottenere le previsioni in formato XML di Milano dovremo caricare la pagina:
http://weather.yahooapis.com/forecastrss?w=718345&u=c
(dove abbiamo anche aggiunto l'opzione finale &u=c affinchè i valori di temperatura ed altre unità vengano riportati in formato metrico decimale)
Ovviamente nella nostra app l'utente vorrà inserire il nome della città (non sapendo a priori il suo WOEID), starà quindi a noi trovare il modo di "convertire" il nome della località nel WOEID corretto.
Fortunatamente anche in questo caso sempre Yahoo ci viene in aiuto tramite un suo servizio denominato YQL (Yahoo Query Language), un qualcosa di molto simile a SQL ma creato da Yahoo per l'interrogazione dei suoi dati pubblici.
Nello specifico esiste una tabella chiamata Geo.Places che fornisce proprio il WOEID delle località del mondo codificate da Yahoo.
A questo punto quindi dovremo fare un interrogazione su questa tabella fornendo come input il nome della nostra località, se avremo fatto tutto giusto avremo in risposta il nostro agognato WOEID.
Come detto poco fa, il linguaggio utilizzato per interrogare queste tabelle è molto simile all'SQL (se non sapete nulla di SQL vi consiglio di cercarvi qualche breve introduzione ad esso, è abbastanza semplice almeno per i nostri scopi)
Ed altrettanto "geniale" è stata Yahoo che mette a disposizione una fantastica "YQL Console" in cui possiamo facilmente fare e testare tutte le nostre interrogazioni (query) in maniera semplice e veloce.
Per accedere a questa console basta andare all'indirizzo: http://developer.yahoo.com/yql/console/
Sempre per tornare all'esempio precedente proviamo ad interrogare la tabella geo.places per il WOEID di Milano con questa "select":
http://developer.yahoo.com/yql/console/#h=select%20*%20from%20geo.places%20where%20text%3D%22Milano%22
(la query è : select * from geo.places where text="Milano")
Andando a vedere l'help (http://developer.yahoo.com/geo/geoplanet/guide/yql-tables.html#geo-places) inseriamo gli ultimi "ritocchi" ovvero vogliamo che il nome della città ci venga fornito in linguaggio italiano e che ci venga restituito solo il primo risultato utile, la query finale sarà quindi:
select * from geo.places where text="Milano" and lang="it" limit 1
per provare la query potete cliccare qua
Tra l'altro ci interessano solo due informazioni da questa tabella, il WOEID e il nome della città, quindi modifichiamo per l'ultima volta la query nel seguente modo:
select woeid,name from geo.places where text="Milano" and lang="it" limit 1
Per avere come risultato un testo in XML con i dati voluti (ovvero <name>Milano</name> e <woeid>718345</woeid>).
A questo punto spero capirete che il grosso è fatto e che per ottenere le info meteo per la nostra app dovremo solamente fare un'ultima query questa volta più semplice che sarà appunto:
http://weather.yahooapis.com/forecastrss?w=718345&u=c
Ora la nostra app potrà memorizzare col componente Web tutto il file XML con la situazione meteo, ed utilizzano la procedura creata da noi chiamata "XML_Extract" (spiegata nel video) andremmo ad estrarre e visualizzare nella maniera più opportuna alcuni dati.
Nell'esempio del video questi dati saranno il nome della città, la temperatura attuale, il tasso di umidità ed un icona che rappresenta lo stato meteo attuale.
Vi lascio alla visione del video, so che è un pò ostico ma le cose da spiegare sono tante e molto utili (perchè con dei metodi simili potrete realizzare migliaia di app per la visualizzazione dei più svariati tipi di dati, ad esempio orari dell'autobus, orari del cinema, etc...)
Il sorgente dell'app è scaricabile cliccando QUA
La discussione sul forum invece la trovate cliccando QUA
Buona visione!!!
Per concludere riporto l'help tradotto da me del componente Web utilizzato in questo tutorial:
Properties
AllowCookies- Se impostato i cookies di risposta vengono salvati e usati per richieste ulteriori, i cookies sono supportati solo in android 2.3+
RequestHeaders- Il "request headers" come lista di due elementi della sottolista. Il primo elemento di ogni sottolista rappresenta il nome del "request header". Il secondo rappresenta il valore, o unico o come lista contenente valori multipli.
ResponseFileName- Il nome del file dove deve essere salvata la risposta se "SaveRespose" è true
SaveResponse- Se true, la risposta verrà salvata.
Url- La URL per la chiamata al componente web.
Events
GotFile(text url, number responseCode, text responseType, text fileName)- Evento che indicata che la richiesta è terminata.
GotText(text url, number responseCode, text responseType, text responseContent)- Evento che indicata che la richiesta è terminata.
Methods
text BuildRequestData(list list)- Converte una lista di due elementi in sottolista, che rappresentano le coppie nome/valore, in una stringa formattata come URLencoded adatta al comando PostText
ClearCookies()- Pulisce i cookies del Web component.
Delete()- Esegue una HTTP DELETE usando la proprietà nell'Url e ritorna la risposta.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
Get()- Esegue una HTTP GET usando la proprietà nell'Url e ritorna la risposta.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
text HtmlTextDecode(text htmlText)- Decodifica il testo HTML.
text JsonTextDecode(text jsonText)- Decodifica il testo in formato JSON. Se il testo è virgolettato le virgolette vengono rimosse.
PostFile(text path)- Esegue una HTTP POST usando la proprietà nell'Url e ritorna la risposta.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
PostText(text text)- Esegue una HTTP POST usando la proprietà nell'Url e inviando il testo specificato nella funzione.
- I caratteri del testo sono codificati in UTF-8.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
PostTextWithEncoding(text text, text encoding)- Esegue una HTTP POST usando la proprietà nell'Url e inviando il testo specificato nella funzione.
- I caratteri del testo sono codificati in base al valore passato in "encoding".
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
PutFile(text path)- Esegue una HTTP PUT usando la proprietà nell'Url e inviando i dati specificati nel path.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
PutText(text text)- Esegue una HTTP PUT usando la proprietà nell'Url e inviando il testo specificato nella funzione.
- I caratteri del testo sono codificati in UTF-8.
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
PutTextWithEncoding(text text, text encoding)- Esegue una HTTP PUT usando la proprietà nell'Url e inviando il testo specificato nella funzione.
- I caratteri del testo sono codificati in base al valore passato in "encoding".
- Se SaveResponse è true la risposta verrà salvata in un file e l'evento GotFile sarà generato,
- Se SaveResponse è false, viene generato l'evento GotText.
text UriEncode(text text)- Codifica il testo dato affinchè possa essere usato in una URL valida.
Dire che è perfetto è dir poco. Avevo fatto una cosa simile, la differenza è che avevo inserito manualmente i codici di tutte le città italiane. Quindi era, oltre che limitato, molto lungo.
RispondiEliminaComplimenti sei un grande.
grazie Gianluca!ricordo che qualcuno mi aveva chiesto come aggiornare il tutorial con Yahoo Weather ed ho ben pensato di accontentarlo :)
Eliminaseba io non ho mai caito una cosa: le API sono gratis? cioè io posso utilizzare liberamente queste info sia per un rogramma gratuito, sia per uso personale, che commerciale??
RispondiEliminaDipende, devi controllare di volta in volta le condizioni d'uso
Eliminaper esempio per queste di Yahoo valgono le seguenti regole:
http://developer.yahoo.com/boss/geo/#noncomm
che ne indicano un uso gratuito non commerciale
mentre per quelle di Yahoo Weather mi sembra dicano che le si possono usare a patto di includere il logo di Yahoo Weather nella propria app
Senti un suggerimento che ti posso dare per un tutorial e spiegare come funziona la paletta voting
RispondiEliminaonestamente non l'ho ancora capito anch'io bene, qui trovi l'help ufficiale
Eliminahttp://beta.appinventor.mit.edu/learn/reference/components/notready.html#Voting
cmq non ritengo sia molto utile al momento, e non capisco il web server con le opzioni di voto dove e come debba essere fatto...
se trovi qualcosa di interessante faccelo sapere, grazie :)
ciao Sebastiano,
RispondiEliminaho seguito passo passo il tuo tutorial ma non mi funziona, ti riporto l prima parte dl messaggio di errore, purtroppo non so se sia un problema dell'emulatore o anche sull'applicazione:
select list item:list index too large.
select list item:attempt to get item number 2 of a list lenght 1:.... ecc ecc
se ti potesse servire ti mando l'immagine dell'errore via mail. grazie Ivan aspetto tue notizie
Ciao Ivan,
Eliminal'errore che ti esce è perchè evidentemente il file xml caricato non è per qualche ragione corretto, quindi il select list item non riesce a prendere l'indice numero 2 (in pratica non esiste)
ti consiglio di fare una prova più semplice, scarica il sorgente della mia app e caricala sul tuo App Inventor, fai una prova con quella, se ancora ti esce l'errore allora mi mandi lo screenshot dei tuoi blocchi. Fammi sapere, ciao!
se quella è la query già c'è un errore, hai scritto "fron" e non "from"
Eliminae nella seconda query manca il woeid... , ad ogni modo ti consiglio di guardare anche i primi tutorial per impratichirti un pò di più, in quest http://seblogapps.blogspot.it/2011/04/tutorial-5-condividere-e-importare-le.html spiego come caricare i progetti altrui ad esempio! buon lavoro! :)
grazie Sebastiano, fatto!!! guardato il tutorial 5!!! ora funziona, oltre hai 2 errori mi mancava anche un .com nella query immagine! ora funziona tutto! approfitto per chiederti se è possibile avere un tutorial o qualche info per inserire anche le previzioni per i prossimi giorni oltre che per quello attuale per cui facciamo la richista.
Eliminagrazie ancora, gentilissimo!
Ciao Ivan!son contento che hai trovato gli errori, per quanto riguarda l'altra richiesta non farò un video apposito (al momento) però hai tutte le basi per poter fare te una cosa del genere,devi analizzare bene il file xml e vedere dove sono le previsioni dei prossimi giorni, poi modificando i tag di apertura e chiusura puoi estrarre questi dati e visualizzarli a piacimento.
EliminaSe noti nel file che leggiamo ci sono tanti tag <yweather:forecast ... ed è proprio li che ci sono le previsioni se hai notato...
insomma, diciamo che non ti voglio dare la "pappa pronta" ma è giusto che vi sforziate così imparate meglio anche voi!:)
Ottimo tutorial...forse per quel poco di Appinventor che conosco (grazie ai tuoi tutorial), il componente web risulta uno dei più potenti come mezzo per poter accedere ai dati esterni...sarebbe bello avere una sorta di page loader durante l'interrogazione...sai se è possibile?
RispondiEliminaGrazie
salve , ma come si caricano, le sorgenti che hai messo in download'
RispondiEliminaE' molto semplice, devi caricare con "upload source file" dalla finestra dei tuoi progetti,
Eliminacmq ho anche un video che lo spiega ancora meglio:
http://www.youtube.com/watch?v=WEraYVoflRI
ciao
grazie mille Sebastiano
RispondiEliminaciao Sebastiano,
RispondiEliminaho un problema: ho seguito il tuo tutorial e ora funziona bene, mi dici temperatura ecc ecc in base alla città creata, siccome non so come andare a recuperare anche i dati per i giorni successivi ho inserito un pulsante web che si collega a ilmeteo.it mobile e mi da le informazioni necessarie per i giorni successivi. il problema è che finchè non inserisco il nome della città nel textbox o ci clicco solo sopra il bottone sotto che dovrebbe avviare la connessione internet non funziona, come scrivi milano allora in automatico parte e mi da le previzioni per i giorni successivi. perchè? come faccio a sistemarlo? pensavo che uno potesse essere interessato alle previsioni per giorni successivi e non deve essere obbligato a cliccare o inserire la città prima.
grazie come sempre.
ciao Ivan
ps. grazie ai tuoi tutorial sto per pubblicare la mia prima app.
scusa Ivan non son sicuro di aver capito,
Eliminaad ogni modo puoi fare un solo bottone e da questo far partire due query con il componente web...
se ho capito giusto tu prendi dei dati da yahoo e dei dati da ilmeteo.it,
quando l'utente inserisce la città e poi preme il tasto per aggiornare i dati fai partire i due componenti web,
con uno leggi temperatura e con l'altro le previsioni dei giorni seguenti (ad esempio)
se non ho capito io per favore riformula la domanda in modo più chiaro, ciao!
ciao Sebastiano,
Eliminascusami se non mi sono espresso bene. in sostanza quanto scrivi tu è esatto, ma il mio problema è che non appena mi si apre la schermata che per comodità ho chiamato meteo finchè non inserisco il nome della città nella textbox (come da tuo tutorial) non mi parte il collegamento a ilmeteo.it.
mi spiego meglio: supponiamo che una volta aperta la pagina io non voglia sapere la temperatura, umidità di Milano in quel momento come spiegato dal tuo tutorial, ma voglia andare subito a vedere le previsioni per i giorni successivi... ho creato un bottone che avvia il componente web e si collega a ilmeteo.... se clicco sopra ma non ho inserito il nome della città sopra il componente web non mi parte.....se invece inserisco il nome della città allora parte anche quello del meteo.it.
grzie e scusami ancora
continuo a non esser sicuro di capire il tuo problema,
Eliminase vuoi puoi anche mettere un controllo che disabilita il pulsante per la lettura delle previsioni se l'utente non inserisce il nome di una città.
Oppure puoi mettere due bottoni, uno per le condizioni attuali (da yahoo meteo) e uno per le previsioni (da ilmeteo.it)
Oppure un controllo o un opzione che chieda se vuoi entrambi i dati o solo le previsioni,
spero di averti un pò chiarito le idee ed aiutato, ciao!
Ciao seba, ti volevo chiedere un aiuto , l'ho scritto anche nel video su youtube .Siccome ho provato a mettere uno sfondo su Screen1 ma su HorizontalArrangement e su TableArrangemente mi da sfondo bianco, come posso fare che lo sfondo " entri " anche li? E poi volevo chiederti come potevo cambiare l'immagine delle condizioni meteo ( sole, nuvoloso, temporale ecc..) Grazie mille per l'eventuale risposta.
RispondiEliminaCiao Giovanni, se non ricordo male purtroppo lo sfondo non "entra" nei vari arrangement, dovresti provare cambiando il colore di fondo su "none" per vedere se cambia qualcosa ma non mi pare.
EliminaPer cambiare l'immagine devi ingegnarti te, nel senso, dal file xml magari puoi leggere la situazione meteo e poi con una condizione per esempio di if, carichi un immagine a seconda del testo ritornato nelle previsioni meteo testuali.
Per esempio se nell'xml leggi "sunny" puoi fare un if condizione=sunny then set image = sole.jpg [non è propriamente nel linguaggio del blocks editor, ma è giusto per farti capire] :)
ciao
ciao sebastiano,
RispondiEliminaho un'errore che mi tormenta. è lo stesso errore che dava a ivan benaglia la prima volta :select list item:list index too large.
ho ricontrollato 2 volte la guida e tutto è giusto e non so cosa fare. invoco aiuto.
grazie in anticipo per il tuo tempo.
hai provato scaricando i miei sorgenti? con quelli funziona?
Eliminala select list item index too large di solito esce quando non carica correttamente il file xml (magari per un errore di sintassi nel componente web) e quindi non riesce a caricare il file xml correttamente per poi estrarre i dati.
Ti consiglio anche di aggiungere delle finestre di watch da design editor per vedere passo passo i valori che ti arrivano dal componente web e fare debug di conseguenza,
ciao
ciao, si il tuo sorgente l'ho provato e funziona benissimo. ora mi da un errore dicendo che "split at first" non accetta l'argomento temp="
Eliminae se invece uso il tuo sorgente? però non posso cambiare la prima pagina dell'app. mi spiego meglio.
se io apro il tuo sorgente, la prima pagina della mia app sarà quella del meteo. e a me non va bene. cè un metodo per cambiare la gerarchia delle pagine?
scusa x tutte queste domande ma è la prima volta che uso appinventor,
grazie in anticipo.
se col mio sorgente va vuol dire che hai fatto qualche errore nel tuo... :)
Eliminase non accetta "temp=" vuol dire che magari nell'xml che scarichi non c'è questa dicitura, ripeto, continua a sperimentare e vedere con le finestre di watch i valori che arrivano alla tua app.
Non c'è modo di cambiare la gerarchia delle finestre, tutte le app create con AI partono sempre e solo da "screen1"
in bocca al lupo!
Ciao Sebastiano.
RispondiEliminaSenti ho visto che se si inserisce un nome sbagliato di una città nella textbox, l'app crescia. Come è possibile risolvere questo problema? Lo faceva anche se si lasciava la TextBox vuota, ma è stato facile imporre un if-then-else dicendo se la textbox è vuota allora invia una notifica di errore. Non riesco però a fare la stessa cosa imponendo la condizione "se il nome della città è sbagliato" allora fai....
Come lo risolveresti?
Grazie mille e complimetni!!!
Potresti forse controllare il valore che ti ritorna del WoeID
Eliminase non hai un valore probabilmente vuol dire che la città è stata inserita in modo errato,
quindi se Woeid è vuoto non far partire la query così forse l'app non crasha (non ho provato ma è un'idea)
ciao a tutti ...scusate per la domanda certamente per voi banale ...
RispondiEliminaqualche tempo fa avevo realizzato una piccola app per consultare da smartphone alcuni files .txt su server esterni (di una prefettura) : ora ne vorrei realizzare un'altra molto simile ma consultando (cioè scaricando) alcuni file assolutamente pubblici come gli avvisi meteo o roba simile ...
ho provato in tutte le salse con i componenti WEB e WEBVIEW ma niente da fare mi dice che l'url specificato "non è valido" ... peccato che aprendolo dal browser tutto funziona ...come mai ? dove sto sbagliando secondo voi ?
il link che uso è
http://www.prefettura.it/FILES/docs/1185/S1.pdf
Il tuo link è un file .pdf e quindi non può essere letto col componente web come file di testo,
Eliminapuoi usare due approcci diversi,
1 - Salvi con il componente web il file pdf e poi lo apri con activitystarter chiedendo che il file sia aperto con un visualizzatore di pdf
2 - Lanci direttamente un activitystarter al link indicato, così l'app chiederà all'utente che programma si vuole venga usato per scaricare e poi aprire il file pdf
saludos Sebastian ando muy interesado en conocer afondo el componente web. ¿Donde podría encontrar un tutoríal completo?
RispondiEliminayou can try to translate one of my many tutorials on the web component, i think they should be easy to follow even if they're in italian language :)
EliminaCiao , come faccio a copiare/capire questa procedura per caricare dati in xml su app inventor 2?
RispondiEliminaUtilizzo la versione 2 del MIT appinventor ed ho notato che utilizzando la funzione spit() per estrapolare il < woeid > il risultato non è quello previsto. Questo inconveniente l'ho riscontato quando cerco di manipolare un output proveniente da un file XML. Anche con un altro linguaggio di programmazione ho riscontrato la stessa cosa. Ovviamente sono riuscito ad ottenere comunque il valore @woeid procedendo diversamente ma il metodo è poco elegante e la procedura leggermente più lunga.
RispondiEliminaBuonasera,
RispondiEliminaarrivo in ritardo di alcuni anni e mi chiedo dato gli errori nelle Api cosa sia cambiato per far funzionare questo tutorial nel 2016. Grazie
Ti rispondo nel commento seguente...
EliminaIn tutta sincerità sarebbe meglio chiuderli questi tutorial vecchi, altrimenti si perde solo tempo, quello che mi chiedo è il perchè si è bloccato tutto? i Cambiamenti nel mondo informatico sono all'ordine del giorno perchè abbandonare tutto e non fare nuovi tutorial?
RispondiEliminaCosa Vi è successo?
Cara Elena, commenti come il tuo mi "feriscono", ho fatto tutto questo lavoro (perchè di lavoro si tratta se vedi quanto materiale ORIGINALE è stato da me creato in questi anni) a titolo puramente GRATUITO e con il solito spirito di condivisione e passione che mi contraddistingue.
EliminaCome tu dici le cose nel mondo informatico cambiano in fretta (tant'è che anche questo tutorial è per App Inventor 1 ormai dismesso dal MIT), ma visto che i concetti per fortuna restano e molte cose possono essere ancora studiate da queste pagine, non ho nessuna intenzione di togliere questi tutorial in quanto ancora molto interessanti ed utili.
Tornando alla tua domanda originale, con una breve ricerca internet ho purtroppo scoperto che Yahoo ha cambiato le sue API (liberissima di farlo visto che le fornisce a titolo gratuito...) e quindi il modo in cui chiamavamo l'API in questo tutorial non è più funzionante.
Ad ogni modo studiando un pò la questione e facendo un pò di test si arriva a capire che ora bisogna richiedere anche le previsioni con il linguaggio YQL, quindi in fin dei conti si tratta di cambiare la richiesta nella http get del componente web con un nuovo URL.
Ad esempio per Milano abbiamo la query YQL:
select item.condition from weather.forecast where woeid=718345
E come si vede dalla console YQL (https://developer.yahoo.com/yql/console/#h=select+item.condition+from+weather.forecast+where+woeid%3D718345)
l'endpoint (ovvero l'URL da usare) diventa questo:
https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%3D718345
Che ci ritorna i valori attuali del meteo per Milano in formato XML.
Da qui penso tu possa andare avanti da sola.
Il mio suggerimento è sempre quello di capire le cose e imparare testando provando e riprovando, internet è una risorsa illimitata di sapere, non possiamo pretendere di trovare sempre la soluzione pronta ai nostri problemi, ma se sappiamo come e cosa cercare possiamo fare di tutto!
cordialità, Sebastiano
Molte grazie della risposta, insisterò e riproverò per far funzionare il tutorial, ammiro la chiarezza di spiegazioni e la generosità nel fornirle ma perchè non vedo più tutorial nuovi o aggiornamenti al 2016?
EliminaGrazie della risposta. Scusa il disturbo voglio solo spronarti a continuare...
Ciao Elena, come detto precedentemente questo è un blog che è nato per passione ed è stato curato nel tempo libero, ora vari impegni hanno tolto il tempo necessario per pubblicare nuovi tutorial, voglio continuare ma non so quando e con che frequenza riuscirò a farlo.
EliminaDi certo non voglio far "morire" il blog, quindi continua a seguirmi e continua ad imparare sperimentando e provando!