Tutorial 35 - Inserire banner pubblicitari in App Inventor (Parte 3)

In questa terza ed ultima parte della guida andremo a vedere come implementare in Design e Blocks Editor tutto quel che serve per la corretta implementazione dei banner pubblicitari nella nostra app realizzata completamente con MIT App Inventor.

Se non l'avete ancora letta, leggete prima la :
Parte 1
Parte 2
della guida, è obbligatorio infatti aver fatto tutti i passaggi per poter proseguire correttamente.


Parte 3 - programmazione e inserimento banner in App Inventor

Apriamo il nostro progetto ed inseriamo i seguenti componenti nel Design Editor.
1) un Button
2) una WebViewer
3) un Clock
Nell'esempio che vi mostrerò, il contenuto dell'Horizontal Arrangement (Ha_app) sarebbe in pratica il contenuto della vostra applicazione...qui per semplificare le cose ho messo solo un immagine...

Questa è la vista d'insieme del progetto, è importante sottolineare come Screen1 (ed eventualmente tutti gli altri screen esistenti) debbano avere il flag "scrollable" abilitato, una volta che l'utente clicca il banner avremo una pagina web sicuramente più alta dell'altezza del nostro schermo, è quindi importante dare all'utente la possibilità di scrollare nella pagina.

Vediamo ora le proprietà del componente WebViewer:

E' importante inserire in HomeUrl l'indirizzo esatto e completo della nostra pagina contenente il solo banner pubblicitario (così come creato nella parte 2 del tutorial), lasciare flaggato FollowLinks (se non lo facciamo non verranno recepiti gli eventuali click sullo sponsor)
Width va messo in "fill parent" e sopratutto Height in "automatic" in modo che la WebView si possa ridimensionare per mostrare tutto il contenuto della pubblicità quando ce ne sia bisogno.

Il componente clock è molto semplice, ci deve solo generare un evento ogni secondo:

Perché ci serve questo elemento lo vediamo subito,
analizziamo ora il codice da inserire nel Blocks Editor, guardate la parte relativa a Clock1_Ads.Timer per ora:

Spiegazione del codice (questa è forse la parte più importante di tutto il tutorial)...

Appena parte l'app, avremo visibile il banner (perché viene caricato dalla WebView all'indirizzo HomeUrl),
il pulsante per il ritorno all'app (questo può essere sempre visibile come nel mio esempio o potete renderlo visibile solo quando è visualizzata la pubblicità)
E ovviamente sarà visibile il contenuto principale dell'app stessa.

Quindi in pratica questo è lo stato "normale" della nostra applicazione quando l'utente la utilizzerà:

In questo stato guardate ancora l'immagine del Blocks editor aperta con le finestre di watch (debug) attive,
notiamo queste cose:

1) la proprietà WebViewer_Ads.CurrentUrl (che ci restituisce l'indirizzo della pagina corrente) è uguale al nostro indirizzo "base" (HomeUrl) dove abbiamo caricato il nostro banner
nell'esempio in questione è uguale a http://venicetideads.altervista.org...xxxxx.html
2) la proprietà WebViewer_Ads.Height è uguale a 64pixel (l'altezza del solo banner in pratica)

Ora dobbiamo capire come possiamo, attraverso App Inventor, catturare l'evento del click sul nostro banner, come tutti i problemi software ci sono vari modi per procedere, io vi espongo quello che ho trovato più semplice, se trovate qualcosa di meglio fatemelo sapere :).

Se l'utente clicca sulla pubblicità, il CurrentUrl non sarà più uguale a quello iniziale HomeUrl ma sarà l'indirizzo web con i contenuti della pubblicità stessa, questa è la chiave di lettura di tutto!

Bene, sfruttando questo fatto possiamo capire quindi se è in che momento l'utente ha cliccato sul banner.

Visto che purtroppo non esiste un evento che viene generato al click della pubblicità, dobbiamo controllare ogni secondo (per questo ci serve il componente clock) se CurrentUrl = HomeUrl;
Quando non è uguale dobbiamo mostrare la pubblicità a schermo intero e nascondere la nostra applicazione.
Simulando di fatto quello che accade con le app programmate in Eclipse al click sul banner.

Guardate infatti cosa abbiamo messo dentro il blocco Clock1_Ads.Timer; una condizione If
ovvero; se CurrentUrl è diverso da HomeUrl, nascondi l'app (ovvero rendi "false" la proprietà visible dell'Horizontal Arrangment che contiene la nostra app)
Questo è tutto quello che è necessario fare per visualizzare correttamente la nostra pubblicità...

Esaminiamo ora sempre con le finestra di watch quello che è accaduto dopo che l'utente ha cliccato sul banner:

Come potete vedere il CurrentUrl è ora diverso da HomeUrl e quindi dopo circa un secondo nascondiamo la nostra app e visualizziamo al suo posto la pubblicità.
La pubblicità si adatterà automaticamente all'altezza necessaria perché avevamo definito la Height della WebView in automatic :)

Questo è ad esempio il risultato nel nostro test, prima e dopo del click:

Ora non ci resta altro da fare che programmare il tasto che ci riporta alla nostra app,
purtroppo non è possibile in AI programmare il tasto back (premendolo usciremo dall'applicazione).
Dobbiamo quindi inserire in posizione ben visibile un pulsante che potremo chiamare "ritorna all'app" oppure "menù principale" o cmq qualcosa che sia comprensibile chiaramente ed immediatamente dall'utilizzatore dell'app.

Quando viene premuto questo pulsante dobbiamo riportare tutto alle condizioni iniziali (come quando abbiamo lanciato l'app)

Quindi ricarichiamo la WebView con l'indirizzo memorizzato in HomeUrl (verrà quindi chiusa la pubblicità precedente e mostrato un nuovo banner)
Per sicurezza impostiamo l'altezza della webview ad un valore fisso di 64pixel (questo è il valore dei banner pubblicitari), se non lo facciamo corriamo il rischio che il banner continui ad occuparci una parte troppo grossa dello schermo nascondendo di fatto la nostra app.
Infine rendiamo nuovamente visibile la nostra parte principale dell'app settando a "true" la proprietà visible dell'Horizontal Arrangement.

Per farvi meglio vedere l'implementazione vi faccio vedere uno screenshot della mia app con il banner:

Nella mia app il pulsante per tornare all'applicazione dopo aver visto la pubblicità non è uno solo,
infatti sono tutti i pulsanti che vedete in cima alla pagina ("previsioni","grafico",etc...)
Questo per farvi capire come l'implementazione finale stia poi alle scelte ed alle preferenze di ognuno di noi.

Fatemi sapere cosa ne pensate, chiedete chiarimenti o esprimente i vostri dubbi possibilmente sul forum, a questo indirizzo.

Tutorial 35 - Discussione sul forum

In alternativa usate i commenti del blog.

Spero che questo "estenuante" tutorial torni utile a molti programmatori in erba!
in bocca al lupo!!!! :)