Cerca con Google

Translate

3 ottobre 2011

Acqua Alta Venezia aggiornato alla versione 3.0 !


Dopo un weekend eccezionalmente caldo trascorso a Venezia (come potete vedere sono anche passato davanti ad una delle stazioni di rilevamento della marea) son finalmente riuscito ad aggiornare la mia App portandola alla versione 3.0






Vediamo insieme brevemente le novità di questa versione:

  • Aggiunto un "tab" di navigazione tra le varie funzionalità, in questo modo è più facile scorrere tra Previsioni, Grafico, WebCam ed Altro e rimane inoltre più spazio a disposizione per la visualizzazione delle informazioni sulle maree.
  • Aggiunta la sezione WebCam che vi permette di visualizzare le cinque webcam che danno su Piazza San Marco (ripresa dalla torre dell'Orologio) e sul Canal Grande (ripresa da Palazzo Cavalli, il palazzo sede del Comune di Venezia), queste sono le stesse WebCam messe a disposizione dal Comune proprio per controllare  visivamente il livello di marea attuale.
  • Aggiunta nel tab "Altro" la possibilità di scaricare il bollettino di marea in formato pdf
Vediamo ora più nel dettaglio la realizzazione di queste nuove funzionalità tramite App Inventor (magari questo vi interessa di più)

Il tab di navigazione non è altro che un horizontal arrangement con dei pulsanti, ogni pulsante rende "visible" true o false i 4 vertical arrangement (uno per ogni tab). In pratica è realizzato allo stesso modo di come vi ho mostrato nel tutorial delle app con screen multipli.

Il banner pubblicitario è realizzato con una webview che carica una pagina html creata apposta da me (hosting su altervista).

La sezione WebCam è realizzata tramite una WebView ed un ListPicker, la ListPicker cambia l'url dato in pasto alla WebView per la visualizzazione della webcam relativa.
"Purtroppo" la risoluzione originale di tali immagini era troppo grande per App Inventor e quindi l'immagine andava di default fuori dallo schermo, non esistendo la proprietà initialscalelevel (che è invece disponibile nella webview di android sdk) l'unica soluzione che ho trovato in tempi brevi è stata quella di crearmi delle pagine html ad-hoc (sempre su altervista) da cui ho potuto chiedere al server che ospita le webcam di risalarmi le immagini alla risoluzione che mi serve.

Per quanto riguarda la sezione che scarica il pdf, non son riuscito a trovare un modo "sicuro" per scaricare il pdf dal server e poi lanciare il viewer relativo (infatti non posso sapere a priori se l'utente ha installato AdobePdf o EZ-Pdf tanto per dire), quindi son stato costretto ad una soluzione d'emergenza per cui lancio semplicemente il browser all'indirizzo del pdf e poi lascio che sia l'utente a selezionare come aprire il pdf (trascinando la barra delle notifiche e selezionando il file bollettino.pdf).
Sono riuscito a lanciare con l'activitystarter Adobe Pdf che ho installato sul mio telefono ma non ne voleva sapere di aprire un file pdf da un url, ma me lo apriva solo da un file locale ... no good...!
Vedremo se mi verranno in mente altre idee su come risolvere in maniera più elegante quest'aspetto.

Vi invito quindi ad aggiornare (o a scaricare se non lo avete ancora fatto) la mia app, anche giusto per vedere cosa è possibile realizzare con App Inventor, se lasciate anche un giudizio ed un commento sul market mi fate un grosso favore! :)

Se avete domande su delle funzioni dell'app, chiedete pure e vedrò di spiegarvi la loro realizzazione nel modo più chiaro possibile.
Alla prossima (stavolta dovremmo quasi esserci per dei nuovi tutorial video...)




16 commenti:

  1. Se abitassi a Venezia la scaricherei anche se fosse a pagamento

    RispondiElimina
  2. Damix, sei troppo buono!cmq a me serve principalmente per imparare e per "curiosità scientifica" :) ma se fai un salto a venezia, non ti scordare la mia App! :)

    RispondiElimina
  3. Grazie Davimontapp, ho provato a pasticciare un pò con SDK ma è parecchio dura ed il tempo è tiranno...diciamo che con App Inventor riesco a creare quasi le stesse cose ma in molto meno tempo :)

    RispondiElimina
  4. Ciao Seba,
    e come fai invece a visualizzare i dati così in modo ordinato sul video? tramite un file a cui dai in pasto i valori? Grazie e complimenti per i netti miglioramenti!!!
    Ti volevo infatti chiedere come fare ad inserire la pubblicità, ma ora ho letto la tua dritta e sto provando anch'io a creare una pagina con altervista.

    RispondiElimina
  5. Ciao Flavio, il "motore" non è cambiato dalle versioni precedenti, ho creato una pagina google docs spreadsheet che carica la tabella con le previsioni di marea dal sito del comune di Venezia.
    Poi questa tabella viene esportata in csv (sempre da google docs) e letta tramite app inventor (con la funzione csv to table)
    A questo punto ho tante label in App Inventor (questo è stato il lavoro più lungo) a cui assegno i vari valori estratti dalla tabella.
    quindi in pratica la tabella che vedi è si formata da 3 colonne x 12 righe quindi ben 48 label a cui assegno i valori in AI.
    Per la pubblicità si tratta come ti dicevo del banner ad s e n s e per contenuti mobile caricato su una pagina altervista,ogni secondo verifico l'altezza di tale banner, se è <80 pixel vuol dire che non è stato cliccato, se è maggiore vuol dire che è stato cliccato e quindi rendo la webview a pagina intera e nascondo gli altri componenti per "simulare" una sessione di navigazione web sul sito aperto dalla pubblicità :)

    RispondiElimina
  6. Grazie Seba! Provo a mettere in pratica qualche consiglio di questi che mi hai citato, sempre se riesco a trovare il tempo...:-)
    Sto provando a smanettare velocemente con Adsense ma quando copio-incollo il codice nella pagina di Altervista non me lo visualizza correttamente. tu hai creato la campagna mobile su adsense quindi? in che modo lo incolli nell'editor di Altervista?
    Poi se hai tempo e voglia,sarebbe interessante se riuscissi a spiegare come hai implementato questo controllo degli 80 pixel in AppInventor, per far partire la webviewer...tanti saluti e complimenti!

    RispondiElimina
  7. Ovviamente la pagina non la visualizzi su pc perchè deve vedere che il browser è di tipo mobile,dopo che hai creato e copiato il codice verificalo sul tuo smartphone, li l'annuncio dovrebbe apparire correttamente (mentre sul pc non vedi nulla)
    il controllo è molto semplice la webview ti dice quanto è alta (height) tu controlli ogni tot secondi questo valore,quando è più alto di 80pixel sai che han visualizzato l'annuncio

    RispondiElimina
  8. ciao!
    non riesco a visualizzare il banner adsense per mobile (generato in formato php), su Altervista dentro il tag body della pagina index.php (quando apro la pagina col cell, mi visualizza il codice stesso...) Sai in che modo posso risolvere? tnx!!!

    RispondiElimina
  9. io la pagina col banner su altervista la posso visualizzare anche sul cell (ma ovviamente devi avere come user agent "mobile") e l'estensione della pagina è .html
    non so se sia quello, cmq puoi anche cancellare tutto il codice di default di altervista e mettere tutto il codice ad-sense, metti test mode a true per vedere il banner di prova. fammi sapere se risolvi, ciao!

    RispondiElimina
  10. ciao!
    Su altervista puoi solo usare il loro codice per i banner. (oppure adsense, ma se hai gia' raggiunto un tot di contatti della pagina). io invece voglio usare, in altervista, il codie generato direttamente nel sito adsense... codice per mobile ("contenuti per cellulari"), che e' un codice generato in php. da cio' che ho scritto, sbaglio qualcosa???

    RispondiElimina
  11. Ciao Michele, adsense per cellulari può essere usato solamente tramite l'sdk java e quindi non può essere inserito in App Inventor.
    Non puoi neanche usare il codice javascript di adsense per contenuti per cellulari visto che è espressamente vietato usarlo in delle webview (così è scritto nel regolamento).
    Quindi l'unica via è usare ad mob, ma altervista non c'entra, basta che tu abbia uno spazio web gratuito dove ospitare il codice javascript che ti fornisce admob, qualunque hosting web va bene. Non serve utilizzare i banner di altervista. Spero di averti chiarito le idee, ciao!

    RispondiElimina
  12. ok, grazie 1000, ora mi e' piu' chiaro cosa usare e cosa non usare!
    ma ti voglio fare altre domande :)
    in adMob, devo creare il codice per "web smarthphone" immagino!? E nella "descrizione del sito" che ci posso mettere secondo te (dato che nel mio sito dove metto il javaScript non c'e' nulla..)?
    Noto che adesso nel mio adMob non c'e' una vera e propria pubblicita', ma solo un segnaposto di google, quando e in che modo apparira' una vera pubblicita' ?

    RispondiElimina
  13. Si, "web smartphone" l'url ovviamente sarà quello della tua pagina dove metti il codice javascript e nella descrizione (credo) è meglio mettere quante più info possibili e keyword della tua applicazione in modo che gli annunci siano il più possibile mirati e confacenti all'argomento della tua app.
    Per far apparire pubblicità vere devi mettere "test mode" su "false" nel codice javascript, non è detto che appaiano subito e sempre, cmq se la tua app è live sul market vedrai dopo 24 ore le statistiche di fill rate ed eventuali click.
    Il test mode su true serve proprio per testare se l'annuncio appare e se la tua app si integra correttamente con essa.

    RispondiElimina
  14. ottimo!! grazie mille per tutte le info! a breve metto sul market il mio primo gioco.. ti chiedero' di essere la prima cavia :)
    ciao!

    RispondiElimina
  15. Certo! in bocca al lupo e mi raccomando...fa un buon lavoro!!!:)

    RispondiElimina
  16. ciao! ecco qui "Neon Kitty" (nulla di che, solo per iniziare..): http://bit.ly/tMT4zK
    Ogni feedback e' bene accetto :)

    RispondiElimina