Come far vibrare il telefono (App Inventor 2 / Thunkable)

Se sei uno sviluppatore di app per android, una delle cose che prima o poi ti capiterà di dover fare è capire come far vibrare il telefono a seguito di un'azione dell'utente.
Può essere il caso in cui si sta creando un'app che manda delle notifiche, oppure un'applicazione per android che genera un allarme, o perchè no, la famosa app che simula le chiamate per il cellulare.

Quale che sia l'app in questione, grazie a Mit App Inventor 2 (o thunkable) è possibile far vibrare il telefono cellulare con un semplice componente nativo, senza bisogno di estensioni esterne.
Vediamo subito come fare.

Come far vibrare il telefono con App Inventor 2 e Thunkable

Partendo da un progetto vuoto al quale basta aggiungere un bottone per generare l'azione, per ottenere la vibrazione del telefono basta utilizzare il componente Player.
Trascinare dunque il componente player nel viewer e poi andare subito a lavorare nei blocchi (blocks).

Basterà infatti associare all'azione del click del bottone, l'azione del player (app inventor o thunkable) denominata call player vibrate (esegui player vibra), alla quale basterà poi associare il numero di millisecondi per i quali si vuol far vibrare il telefono.

Ed ecco che una volta lanciata la nostra app, al click del bottone il telefono vibrerà come per magia.
Tutto questo con un solo blocco di codice, facile no?

Un paio di note utili per la corretta riuscita di questa operazione:

• 1000 millisecondi sono un secondo, quindi per calcolare quanti secondi si vuole far vibrare il telefono basta fare x*1000
• Per poter far vibrare il telefono con la vostra app sviluppata con thunkable o app inventor, comunque bisogna avere abilitato la vibrazione delle notifiche.
  Sembra una banalità, ma se si lascia il telefono silenzioso senza vibrazione, questo componente non fa niente... io non lo sapevo e ci ho perso un secolo per capire come mai non funzionava la vibrazione su appinventor / thunkable, passando dal semplice componente player ad anche estensioni esterne, nulla funzionava fino a quando non ne ho scoperto il motivo :p

E' tutto sull'argomento vibrazione cellulare tramite appinventor / thunkable.
A questo link trovate il semplice progetto .aia da scaricare, nel caso vi servisse.

Tornare all'elenco delle lezioni

Cambiare lingua in Thunkable / App Inventor 2

Questo banale tutorial serve solo per i più novizi, soprattutto per quelle persone che non hanno molta dimestichezza con l'inglese.
A già, ho dimenticato di specificare il soggetto di questa guida, anzi i soggetti: thunkable e app inventor 2.

Non starò certo a spiegare a cosa servono queste due piattaforme online, anche perchè se sei capitato qui, di sicuro già lo saprai.
Se però l'inglese per te è un ostacolo insormontabile, ho una buona notizia, queste due piattaforme sono tradotte praticamente interamente in italiano.

Se dunque vuoi sapere come usare app inventor in italiano, o thunkable, continua a leggere (cit.)

Come cambiare lingua in Thunkable / App Inventor 2

La procedura per impostare la lingua in thunkable o MIT appinventor 2 è la stessa, quindi con un post faccio in pratica due guide.
E che post tra l'altro, dato che praticamente si tratta di fare un click :p

Comunque, per cambiare la lingua di thunkable o app inventor 2, basta cliccare in alto destra sul nome della lingua in uso.
Idealmente, se non hai mai cambiato la lingua, dovrai cliccare sulla voce English, e selezionare l'italiano.

Con un semplice click del mouse dunque, avrai impostato thunkable in italiano (o app inventor), ed ora tutti i blocchi ed i comandi, saranno nella tua lingua.
Al massimo dovrai rientrare nell'app che stavi usando prima del cambio lingua.

Ovviamente però, online ci sono molti più tutorial in inglese che in italiano, quindi il mio consiglio è quello di imparare ad utilizzare thunkable ed appinventor in inglese, dato che è la lingua ufficiale del mondo... se così si può dire :p

Torna all'elenco delle lezioni

Come mandare email da App Inventor 2

Questo breve tutorial riprende un argomento già trattato in Mit App Inventor 2, in quanto parlo di un componente molto utile per sviluppare app per android anche di una certa complessità.
Il componente in questione è l'ActivityStarter, e la funzionalità che voglio oggi spiegarvi è quella che consente di mandare email da app inventor 2.

In realtà, volendo fare i pignoli, il seguente tutorial non vi spiega come spedire email usando appinventor, almeno nel senso stretto della parola.
Ciò che invece riuscirete a fare, è aprire in automatico il vostro programma predefinito per la spedizione di e-mail, e da lì poi spedire.

Vediamo subito più nel dettaglio cosa intendo.

Come mandare email da MIT App Inventor 2

Come dicevo ad inizio post, il componente da trascinare nel designer di appinventor è l'activitystarter.
La sintassi invece da scrivere dentro la proprietà azione (action) è:
android.intent.action.VIEW

Nel campo UriDati (dataUri) invece, a differenza di quanto si fa per l'apertura del browser (come illustrato in questo post), va scritta la seguente sintassi:
mailto:indirizzo@email.it

Adesso non ci resterà altro da fare che mettere una bella azione al nostro tasto per spedire email da app inventor, usando la sintassi Esegui Activity Starter Avvia Attività (call activitystarter startactivity).

Tutto qui.
Lanciando la nostra app android infatti, e cliccando sul bottone a cui abbiamo associato l'azione, si aprirà il client di posta elettronica predefinito, con già compilato il destinatario del messaggio.

Se poi vogliamo compilare in automatico anche il titolo della mail, la sintassi da utilizzare è la seguente:
mailto:indirizzo@xx.it?subject=Prova

Per autocompilare titolo e corpo email invece, ecco cosa mettere nel datauri:
mailto:indirizzo@xx.it?subject=Prova&body=Messaggio+di+prova

Provate un po' questa sintassi per vedere cosa succede, e quale client email app inventor vi propone.
Come al solito inoltre, vi lascio anche il link al progetto .aia della lezione, che male non fa.

Imparare a spedire mail da appinventor 2 di certo può tornare utile per qualche applicazione o gioco, quindi tanto vale poterlo fare.

Torna all'elenco delle lezioni

Come aprire il browser con App Inventor 2

Questo tutorial lo scrivo più per comodità mia che per altro.
Infatti, aprire il browser con app inventor 2 è relativamente semplice a livello di programmazione/configurazione.
Quello che invece risulta un po' scomodo, è ricordarsi la sintassi da utilizzare per compiere l'operazione :)

Vediamo subito dunque come fare per aprire un sito internet con app inventor 2.

Come aprire il browser con MIT App Inventor 2

Per poter aprire un sito internet con app inventor, basta utilizzare il componente che si trova nella sezione Connectivity (connettività), il cui nome è Activity Starter.

Dopo aver trascinato questo componente dentro il designer, bisogna configurarlo.

Per aprire un sito internet dalla tua app infatti, ovvero per lanciare browser predefinito sul tuo cellulare android, devi andare a settare la sezione Action con il seguente valore: android.intent.action.VIEW

Adesso bisogna inserire nel DataUri l'indirizzo web da far aprire alla tua app.

Ora non devi far altro che creare l'azione scatenante.
Ad esempio puoi mettere il tutto dentro un bottone, cioè all'interno del blocco tasto click, aggiungere il blocco Call ActivityStarter StartActivity.

Anche per questo semplice esempio vi lascio il progetto .aia... per i più pigri diciamo :)

E' tutto.
Quando lancerai la tua app, se cliccherai sul bottone che hai creato, si aprirà il browser predefinito su android (o ti verrà chiesto quale usare) con subito aperta la pagina che hai settato nelle impostazioni dell'activity starter app inventor 2.

Torna all'elenco delle lezioni

Pubblicità Adsense Admob su MIT App Inventor 2

Dopo aver creato la tua prima applicazione per android, poi la seconda, poi la terza, ti verrà sicuramente voglia di iniziare a guardargnarci qualcosa.
Se però stai utilizzando MIT App inventor 2, avrai sicuramente capito da tempo che non è presente alcuna estensione per poter inserire i banner di admob nelle tue app.

Non avere paura però, dopo aver cercato e testato con mano la cosa, eccomi qui a fare un post su come mettere la pubblicità su appinventor.
Tecnicamente ripeto, almeno per il momento non è fattibile, ma con uno stratagemma, o per meglio dire con un altro strumento, è possibile salvare capra e cavoli (cit.).
Sto parlando di utilizzare thunkable, una piattaforma nata proprio da app inventor 2, che poi grazie a questa funzionalità aggiuntiva adsense ed alla gente che questa ha attirato, si è evoluta tanto da superare il maestro (oserei dire).

So che avrai già letto diversi post in merito, o visto dei video, ed il dubbio è sempre questo: "ma se ho già pubblicato un'app nel play store non mi fa caricare un'app sviluppata da un altra piattaforma, ma devo creare una nuova app e perdere quindi statistiche, stelle, commenti e posizionamento". Per fortuna però, è possibile aggiungere gli AD alle proprie App senza perdere lo storico nel play store, ed ora ti spiegherò subito come fare.

Come mettere la pubblicità Adsense Admob su MIT App Inventor 2

La prima cosa da fare per poter aggiungere adsense ad appinventor è lasciare app inventor :p
Dovrai infatti esportare il tuo progetto ed importarlo in thunkable.
Se non sai come importare/esportare un progetto .aia leggi questo post.

Quindi bisogna esporate il progetto da app inventor 2, poi importarlo in thunkable.
La procedura di import su questa seconda piattaforma è (quasi) la medesima che sulla prima, bisogna solo registrarsi al servizio, esattamente come fatto in appinventor, ovvero dando l'ok a connettersi con l'account google al seguente indirizzo:

http://app.thunkable.com

Ho scritto che la procedura di import è quasi la medesima perchè al posto di fare un importa progetto standard, dobbiamo usare la voce "upload legagy app project (.aia) from my computer".

Una volta importato il progetto in thunkable, entriamoci ed andiamo subito a vedere come inserire la pubblicità nella nostra app.

Il componente aggiuntivo da trascinare nel designer al momento si trova in experimental, e si chiama, niente poco di meno che admob banner.
Oppure, se vogliamo usare la pubblicità adsense di tipo popup a tutto schermo, bisogna trascinare nel design il componente admob interstitial.

Una cosa importante da fare però, per poter usare al meglio questi componenti, è impostare la nostra app in modo che sia responsive, cliccando su screen -> sizing -> responsive.

Adesso, per concludere la configurazione di questi componenti aggiuntivi pubblicitari, occorre indicare l'AD unit ID, mettendo il codice pubblicitario preso dalla piattaforma AdMob.
Se necessario, abilitare l'opzione "test mode" per poter verificare che il proprio banner si veda correttamente, senza rischiare di cliccarci sopra involontariamente (pratica vietata in adsense).

Ovviamente, affinchè tutto funzioni, bisogna essere registrati ad adsense con il proprio account google.
E bisogna aver aderito ad admob, aver creato un progetto per la propria App, ed una o più unità pubblicitarie, come spiegato in questo post.
E' proprio infatti da admob che si può reperire l'id da inserire in thunkable: andando in APP, cliccando sull'applicazione desiderata, e nella sezione "unità pubblicitarie", cliccando sull'icona copia affianco al banner di cui si vuole reperire l'id.

Bene, adesso che abbiamo configurato il nostro banner, possiamo farlo apparire nella nostra app thunkable andando nei blocchi (blocks) ed usando il comando call AdMob Banner Load Ad.

Ecco fatto, ora possiamo testare la nostra app, tenendo presente che i banner di admob potrebbero apparire dopo ore dalla loro creazione (quando si creano nuove unità pubblicitarie).

Prima di generare l'apk da inserire nel play store però, se vogliamo aggiornare un'app creata precedentemente in "MIT App Inventor 2" e modificata in Thunkable per aggiungerci la pubblicità, dobbiamo importare il keystore di app inventor 2 in thunkable, come spiegato in questo post.
Questa procedura è di vitale importanza per avere la possibilità di modificare app già esistenti nel play store, quindi il mio consiglio è quello di compiere questa operazione una volta sola, la prima volta che si usa thunkable.
Così facendo infatti, avremo allineato perfettamente le due piattaforme, che genereanno app firmate nello stesso modo, non creando problemi nello store.

Fatto questo abbiamo praticamente finito.
Ci basterà infatti generare l'apk da caricare nel play store, ed iniziare a guadagnare con la pubblicità presente nelle nostre app sviluppate con app inventor 2 o thunkable.

Ovviamente non è possibile reimportare un'app con il componente admob da thunkable ad app inventor 2, perchè questo lì non esiste (almeno per ora), quindi vuol dire che piano piano finirete per spostarvi a sviluppare direttamente su thunkable, abbandonando appinventor... proprio come sta succedendo nel mio caso.
Mi spiace per appinventor2, ma se non si decidono a consentire di mettere la pubblicità adsense sulle app degli sviluppatori, è ovvio che la gente non vorrà sempre lavorare gratis o fare programmi, anche complessi, solo per hobby ;)

Fine...
Ah già, dimenticavo, (ad oggi) thunkable prende il 5% dei vostri guadagni pubblicitari (non so tecnicamente come faccia)... ma come si dice, meglio guadagnare il 95% che lo 0%, no?
Io inizialmente ero scettico nell'uso di questa piattaforma, ma alla fine ho verificato e tutto funziona, i guadagni arrivano (immagine d'esempio generica):

Un'ultima cosa, un piccolo contro diciamo.
Alcune configurazioni di visualizzazione di blocchi tipo pulsanti potrebbero essere diverse tra appinventor e thunkable. Quindi potrebbe capitare di dover fare un minimo di porting tra le due piattaforme, sistemando colori o dimensioni varie... nulla di esageratamente grave ed oneroso comunque, praticamente tutto ciò che è sviluppato in app inventor gira su thunkable.

Torna all'elenco delle lezioni

Esportare / importare keystore App Inventor 2 / Thunkable

Avete mai sentito parlare del keystore?
Io sviluppo app con mit app inventor 2 e thunkable da un po', ed in effetti non mi ero mai filato questa voce del menù di queste piattaforme :p
Eppure, saper fare questa operazione, di recente è diventata per me una cosa vitale.

Il key store comunque, come suggerisce il nome, è una chiave di firma (certificato) per le nostre applicazioni per cellulare android, una chiave che viene letta dal play store quando carichiamo un apk.
Se infatti questa firma non viene riconosciuta da google, o se è diversa, non è possibile inserire nel market una nuova versione di un'app per android (insomma non la si può più aggiornare), e quindi bisognerebbe fare un nuovo progetto, perdendo di conseguenza tutte le statistiche.

Vediamo subito come fare import / export di questo file.

Come esportare il keystore da App Inventor 2 

Per poter eseguire l'export del keystore su app inventor 2, basta andare nel menù projects e cliccare banalmente la voce export keystore.

Ci verrà chiesto di salvare il file android.keystore sul nostro computer, facciamolo.
Questo file di cui ignoravo quasi l'esistenza, è infatti molto importante per poter firmare le proprie app, soprattutto se si vuole modificare un programma/gioco già esistente nel play store di android.
Se infatti cambiate piattaforma di sviluppo, dovrete premunirvi di portarvi dietro il keystore, quindi salvatevelo bene da qualche parte, magari anche in un'email online.

Ad esempio, l'esigenza più importante (che mi ha spinto a creare questo post), potrebbe essere quella di importare un gioco app inventor 2 su thunkable, per modificarlo (mettendoci la pubblicità) e poi ricaricarlo aggiornato nel play store.
Passiamo dunque a spiegare come fare l'import.

Come importare un keystore in Thunkable

Per poter importare keystore in Thunkable, basta seguire la stessa procedura che si farebbe in appinventor.
Andare infatti in projects (progetti) e cliccare su import keystore.

Thunkable (ed app inventor) mostrerà un messaggio d'avviso a video, avvertendo che il keystore sovrascritto verrà perso per sempre.
Questo vuol dire che le applicazioni sviluppate con quella firma, non saranno più modificabili.
Se dunque non siete sicuri di quello che fate, o anche se lo siete, effettuate sempre un backup del file android.keystore che andate a sovrascrivere.
Fatto questo quindi, non dovrete far altro che cercare il keystore sul vostro pc, e sovrascrivere online quello esistente.

E con la firma delle app per oggi è tutto (cit.).

Torna all'elenco delle lezioni

Leggere qrcode e barcode con App Inventor 2

Il tema del giorno sono i codici a barre, ovvero quei codici grafici che contengono al loro interno delle informazioni.
Di sicuro li hai già visti un sacco di volte, magari al supermercato.
Ogni prodotto ha infatti un suo prezzo, codificato solitamente dentro il codice a barre.

Il tema di questo ennesimo tutorial su Mit App Inventor 2 riguarda proprio i barcode o qrcode.
Se infatti il bar-code equivale al codice a barre, il qr-code è invece un simbolo quadrato bianco e nero, che come il suo fratello più vecchio barcode, contiene al suo interno alcune informazioni, tipicamente un indirizzo di una pagina web.
Vediamo subito come appinventor gestisce qr code e barcode.

Come leggere qrcode e barcode con MIT App Inventor 2

Per poter scannerizzare i qr-code con app inventor, ovviamente bisogna utilizzare uno dei tanti componenti che questa stupenda piattaforma ci mette a disposizione.
Nell'esempio che andrò ad illustrare, vedremo come creare un semplice scanner di qr-code (ma anche barcode), uno scanner che reindirizzerà l'utilizzatore presso una specifica pagina web.

Il componente che andremo ad utilizzare si trova nella sezione sensors (sensori) e si chiama, neanche a farlo apposta Barcode Scanner (lettore codice a barre).

Trascinato il suddetto componente nel nostro designer, quello che ci serve è un bottone per far partire il lettore di qrcode da app inventor, e qualcosa per raccogliere il codice in esso contenuto.
Per fare una prova potremmo avere sia una tipica textbox, che anche un componente di tipo web viewer.

Prima di passare ai blocchi, una piccola nota importante sul blocco barcode scanner.
Se quando lo attivate vi dimenticate di defleggare la voce Use External Scanner (usa scanner esterno), quando cliccherete per far compiere l'azione della scansione non accadrà niente, questo perchè la vostra app si aspetterà di dialogare con un lettore esterno collegato al vostro cellulare
Sembra una banalità, ma io non avevo visto quella spunta e ho perso non poco tempo per cercare di capire come mai la fotocamera che doveva fare da scanner barcode da appinventor, non partiva!

Aggiunti questi componenti, andiamo nei blocks (blocchi) ed andiamo ad aggiungere un'azione al click del bottone inserito, ovvero trasciniamo il blocco call barcode scanner do scan (esegui barcodescanner esegui scansione).
Con questo comando associato al click di un bottone, andremo ad invocare la fotocamera del cellulare, che la nostra app utilizzerà come lettore scanner sia di classici barcode, che di moderni qr-code.

Adesso però, dobbiamo trascinare il blocco when barcodescanner after scan (per sempre quando barcode scanner terminata scansione) dal quale prenderemo il valore della variabile result (risultato), e potremo farne ciò che vogliamo.
Ad esempio in questo caso, ho associato il valore della textbox al risultato ottenuto dalla scansione, in modo da poter leggere subito a video la stringa di testo nascosta nel qr code o nel barcode.

Se poi sappiamo già che il nostro qr-code app inventor 2 contiene il link ad un sito web, bè, allora basta associare il result al blocco call web viewer go to url (esegui webviewer vai a url), per far aprire dentro la nostra app per cellulare un sito internet specifico.

Il codice per creare un lettore di barcode con app inventor è davvero molto esiguo, anche perchè magari poi il più del lavoro lo farà la pagina web che leggerà il codice passato, magari con parametri via get.
Ovviamente comunque, nulla ci vieta di gestire le informazioni contenute dentro il codice a barre o qrcode, tutte tramite app, senza per forza aver bisogno di un sito web di appoggio, o della connessione ad internet.

Se hai creato il tuo primo scanner di qrcode con app inventor ma non sai come reperire un codice per fare le prove, niente paura, trovi tutte le info su come fare a questo indirizzo.
In alternativa qui sotto trovi un qrcode di prova da me generato :)

E con i barcode per app inventor direi che è tutto.
Ti lascio il solito link al progetto .aia per comodità, in modo da poter fare tutte le prove che vuoi con un lettore di qrcode già pronto per l'uso.
Ovviamente le potenzialità di questa funzionalità app inventor sono infinite, si va dalla lettura dei prezzi per il tuo locale, alla creazione di un check-in tramite barcode o qrcode per i tuoi eventi... buon lavoro!

Torna all'elenco delle lezioni