Conferma chiusura applicazione (Mit App Inventor 2)

Dopo aver sviluppato un'applicazione con i controfiocchi, sarebbe un peccato se questa fosse chiusa con il semplice tasto back (indietro) del cellulare, no?
Ebbe, su Mit App Inventor 2 esiste la possibilità di far apparire un messaggio di conferma alla pressione del tasto back, in modo da chiedere all'utente se è veramente sicuro di voler uscire dall'app oppure no :)

Creare messaggio di conferma chiusura applicazione con Mit App Inventor 2

Quello che ci serve per poter generare un messaggio di conferma alla pressione del tasto back del telefono android, è un solo componente aggiuntivo, quello delle Notifiche (Notifier blocks) di App Inventor 2.

Andiamo dunque a trascinare le notifiche nel visualizzatore, poi andiamo subito nei blocchi (blocks).

Adesso, clicchiamo sulla sezione dei blocchi Screen, ed andiamo ad aggiungere il blocco Per sempre quando screen1 pulsante indietro premuto (when screen back pressed).
Grazie a questo blocco infatti, andremo a catturare l'evento della pressione del tasto back del cellulare.

Ora, aggiungiamo dentro il blocco Esegui notifiche mostra finestra scelta (call notifier show choose dialog), ed andiamo ad inserire il messaggio che più ci piace (es. "Sei davvero sicuro di voler chiudere l'applicazione?").
Tra le scelte possiamo mettere un semplice SI o NO.

Aggiungiamo ora un blocco Per sempre quando notifiche dopo scelta (when notifier after choosing) ed andiamo a mettere la condizione che se si dice di SI, l'app va chiusa con il comando Chiudi applicazione (close application).
Attenzione perchè, se ci dimentichiamo di mettere questo blocco, di fatto sarà impossibile poi per l'utente chiudere il nostro programma, e magari non ne sarà molto contento.
Ricordo inoltre che il blocco chiudi applicazione, funziona solo dopo aver installato l'app, e non in fase di sviluppo.

Lanciando dunque questo script, intercetteremo il tasto indietro del cellulare, e chiederemo una conferma di chiusura app all'utente, in modo da evitare chiusure involontarie del programma.

Trovate il solito progetto .aia d'esempio a questo link.

A mio avviso, mettere questo genere di controlli di conferma uscita dall'applicazione non è una cosa malvagia, soprattutto se sviluppiamo applicazioni che potenzialmente sarebbe bello che potessero girare in background, cosa ancora non possibile con mit app inventor 2.

Tornare all'elenco delle lezioni

Conta passi (Mit App Inventor 2)

Vuoi sapere quanti passi fai durante il giorno? Nessun problema, ci pensa Mit App Inventor 2.
Ebbene si, tra i vari sensori presenti in appinventor, c'è anche il famoso conta passi.

Contare i passi che fai al giorno può servirti per tenerti in forma, per crearti un programma specifico, per vedere quanta strada percorri, o semplicemente per capire quanto ti durano le scarpe :p
Perchè dunque scaricare ed installare un programma per android fatto da qualcun altro, quando puoi creartene tu uno da zero, in pochi secondi, con appinventor 2?

Creare un programma conta passi con Mit App Inventor 2

Per poter utilizzare la funzionalità del telefono che consente di contare i passi, aprire la sezione dei componenti app inventor 2 chiamata Sensori (sensors), e trascinare quello chiamato Pedometer (step counter).

Questo componente invisibile di appinventor viene gestito come al solito dalla sezione blocchi (blocks).

Tra i blocchi che sicuramente potranno tornare utili per adoperare al meglio questo sensore, c'è Per sempre quando pedometer passo (when pedometer walk step), che rileva il passo in avanti e può essere usato per stampare a video il numero di passi effettuati.
C'è poi un Per sempre quando pedometer passo semplice (when pedometer simple step), che a differenza del precedente, registra ogni tipo di passo, in qualsiasi direzione.

Per poter far partire questo genere di eventi ovviamente, bisogna prima lanciare il blocco Esegui pedometer Avvia (call pedometer start), che poi può essere bloccato con i rispettivi comandi di pausa, stop e reset.

Altri due comandi degni di nota presenti in questo componente sono i blocchi Tempo trascorso (elapsed time) e Distanza (distance), che possono servire per tener traccia del tempo passato dall'inizio dell'attività, e la distanza compiuta dopo un tot di passi.
Entrambi questi parametri sono azzerabili con il comando di reset.

Trovi l'esempio di questa lezione sul contapassi (stepcounter) a questo link, con il solito progetto .aia scaricabile, nel quale muovere i primi "passi" nel fantastico mondo del pedo meter di android.

Torna all'elenco delle lezioni

Creare nuovo componente (Mit App Inventor 2)

Oggi vediamo una cosa molto carina di Mit App Inventor 2, come creare nuovi componenti.
Sto parlando ovviamente della versione locale di app inventor, ovvero quella che avete installato sul vostro computer, dato che quella online non è ovviamente modificabile, salvo per l'aggiunta di qualche estensione.

Questo breve tutorial spiegherà come duplicare un componente app inventor 2 già esistente, non quindi come crearlo da zero, per il quale comunque lascerò un link con tutte le istruzioni dettagliate su come fare, a fine post.

Vediamo subito come iniziare a muovere i passi verso la creazione di componenti aggiuntivi per app inventor, che sono la base per poter creare le estensioni (quelle che poi potete distribuire).

Come creare un nuovo componente in Mit App Inventor 2

Per poter creare un componente aggiuntivo, occorre prima di tutto sapere dove risiedono i componenti di app inventor 2.
Il percorso tipico (poi dipende da dove lo avete installato) per trovare la cartella dove sono fisicamente i componenti appinventor 2, è il seguente:
C:\appinventor\appinventor\components\src\com\google\appinventor\components\runtime

Adesso, per fare un esempio pratico su come duplicare un componente app inventor, scegliamone uno a caso e facciamo copia ed incolla del file, ad esempio quello chiamato Label.java (il famoso componente etichetta).

Andiamo poi a rinominare la copia di Label.java in LabelOggi.java.

Ora, entriamo nel nuovo file appena creato con un editor di testo, ed andiamo a modificare alcuni parametri.

Cerchiamo il blocco che contiene la scritta "@DesignerComponent"e modifichiamo/aggiungiamo (se non presenti) i parametri:

• description: dove andremo a scrivere la descrizione del nostro componente, es: "Componente di prova duplicato dalla label".
• nonVisible = true: da aggiungere se non presente, altrimenti si riceverà il terribile messaggio "java.lang.UnsupportedOperationException: unknown component" (questo perchè al momento c'è il limite di poter aggiungere solo componenti nuovi non visibili)
• iconName = "images/extension.png": mettere l'url di un'icona, per farla apparire accanto al componente quando lo si vuole trascinare nel visualizzatore (campo facoltativo, ma è meglio metterlo)

Adesso cerchiamo le 2 righe
@SimpleObject
public final class Label extends AndroidViewComponent {
e sostituiamole con
@SimpleObject(external = true)
public final class LabelOggi extends AndroidViewComponent {

Infine sostituiamo
public Label(ComponentContainer container) {
con
public LabelOggi(ComponentContainer container) {

Salvare e chiudere il file.

Come avrete capito, per duplicare un componente app inventor, basta rinominare le classi univoce con un nuovo nome a nostra scelta.

Adesso, affinchè questo nuovo componente sia visibile in appinventor, occorre rifare il build dell'intero ambiente, ed anche rifare il build del companion, altrimenti non sarà possibile testarlo sul cellulare.
Se non sapete come compiere queste operazioni con Ant, trovate le istruzioni in questo post.

Ovviamente, affinchè tutto sia visibile nella nuova piattaforma appinventor, bisogna poi terminare eventuali processi attivi e riavviare il tutto.
Nel caso il processo di app inventor 2 non ne volesse sapere di terminare, vi basterà terminare il processo java, dal taskmanager di windows.

Se tutto sarà andato a buon fine, riavviando app inventor 2 (ed il browser), dovreste vedere a video il vostro nuovo componente LabelOggi, posizionato nella stessa sezione delle Etichette, ovvero in Interfaccia utente (user interface).

Con tanto di blocchi (blocks).

Questo è ovviamente solo un rapido esempio su come copiare / replicare un componente aggiuntivo.
Per creare un componente app inventor da zero, seguire questo tutorial, dove vengono spiegate tutte le classi e la struttura che compone questo tipo di oggetti appinventor.
Ovviamente, anche conoscendo bene la teoria, partire sempre da un componente già esistente, facilita molto il lavoro.

Imparare a creare/modificare componenti app inventor 2 è la base per poter aggiungere nuove funzionalità alla piattaforma, senza dover aspettare che qualcun altro le sviluppi per voi (es. admob per app inventor 2 :p).
Ovviamente, per fare tutto ciò, dovrete conoscere almeno un po' java.

Tornare all'elenco delle lezioni

Testare applicazioni tramite cavo USB (Mit App Inventor 2)

Per poter testare le proprie applicazioni Mit App Inventor 2, oltre a poter utilizzare il companion con il wifi e l'emulatore, è possibile utilizzare anche il cavo usb.

Questa modalità è sicuramente più stabile della versione wifi, che ogni tanto perde la connessione, però necessità di un pochino più di preparazione per poter essere usata.

Vediamo dunque come connettere il cellulare al computer tramite cavo usb, e come fare per farlo parlare con appinventor.

Come testare applicazioni tramite cavo USB in Mit App Inventor 2

Per poter utilizzare questa modalità di debug di applicazioni android sviluppate con app inventor 2, bisogna innanzitutto scaricare ed installare aiStarter, un software che deve girare sul proprio computer, che consente la comunicazione tra appinventor 2 ed il cellulare, tramite cavo usb.

Scaricare ed installare aiStarter per windows (o cercare quello per mac o linux) da questa pagina, cliccando su Download:
http://appinventor.mit.edu/explore/ai2/windows.html

Durante l'installazione, per comodità fleggare anche l'opzione per creare l'icona di collegamento di app inventor tools (aistarter) sul desktop del pc.

Adesso riavviare il pc, poi lanciare aistarter cliccando sull'apposita icona.

Se vi dimenticherete di lanciare aiStarter ogni volta che volete collegarvi tramite usb (se per caso riavviate il pc), riceverete a video il seguente messaggio: "The aiStarter helper does not appear to be running".

Adesso dobbiamo andare ad agire sul nostro telefono cellulare.
Innanzitutto bisogna aver abilitato la modalità sviluppatore (se non sapete come fare leggete questo post).

Entrare quindi in Impostazioni -> Opzioni sviluppatore, e spuntare la voce Debug USB.

Finalmente possiamo andare sul nostro mit app inventor 2, e cliccare su Connect -> USB.

Attendere il caricamento, e dare (almeno la prima volta) il consenso dal cellulare a questa connessione.

Se tutto sarà andato a buon fine, vedrete la vostra applicazione girare sul cellulare in versione di test, ed ogni modifica effettuata tramite appinventor 2, verrà replicata in tempo reale sul telefono.

Tornare all'elenco lezioni

Condividere testo ed immagini (Mit App Inventor 2)

Ogni applicazione che si rispetti ha un bel tasto "condividi", che serve a condividere con i propri amici, testo, immagini, video, file, o altro.
Ovviamente tutto ciò è possibile anche tramite Mit App Inventor 2, senza dover scrivere una riga di codice.

Vediamo dunque come poter usare appinventor per alimentare anche noi il fantastico mondo dei social network (e non), tramite un componente molto semplice da utilizzare.

Come condividere testo ed immagini con Mit App Inventor 2

Per poter condividere qualcosa tramite app inventor 2, bisogna utilizzare un componente presente nella sezione Social, il cui nome è niente poco di meno che, Condivisione (Sharing).

I blocchi da utilizzare per poter condividere qualcosa da app inventor, sono 3:

1. Esegui condivisione condividi file (Call sharing share file): condivide un file di qualsiasi formato (immagini, video, documenti, ecc...)
2. Esegui condivisione condividi file con messaggio (Call sharing share file with message): condivide file con l'aggiunta di un messaggio di testo
3. Esegui condivisione condividi messaggio (Call sharing share message): condivide un semplice messaggio di testo

Usando questi blocchi (blocks), si aprirà la classica finestra di condivisione di android (facebook, gmail, twitter, instagram, email, o qualsiasi altra app compatibile avete installato sul cellulare), e potrete scegliere con quale applicazione condividere i vostri contenuti appinventor 2.

Qualche altra cosa da sapere sullo share file app inventor:

• La cartella/percorso in cui bisogna andare a pescare i file salvati da appinventor, è:
  file:///mnt/sdcard/
• I file caricati a sistema sull'applicazione appinventor, possono essere trovati in:
  file:///mnt/sdcard/AppInventor/assets/
  o
  file:///mnt/sdcard/AppInventor/data/
  oppure
  /emulator/storage/0/AppInventor/data (o assets)

Per i file presenti a sistema quindi (quelli precaricati nella sezione media di app inventor 2), se si sta provando l'app dall'emulatore o dal companion, il percorso corretto dovrebbe essere file:///mnt/sdcard/AppInventor/assets/nomefile.estezione altrimenti il path corretto dovrebbe essere file:///android_asset/nomefile.estensione (verificate voi stessi cosa funziona sul vostro cellu).
Una volta verificato il path funzionante in produzione e quello in test, potrete gestire la cosa con qualche variabile globale, da settare ad esempio in fase di sviluppo per cambiare percorso, e poi da cambiare quando si va a generare l'apk.

Comunque alcuni componenti, tipo il selettore immagine, già sono configurati per fare in modo che se si clicca su condividi, il blocco selettore immagine selezione (selection), questo già da solo capisce dove andare a pescare l'immagine da "sharare".

Il progetto .aia che vi allego contiene un esempio di condivisione testo e file immagine (tramite selettore o immagine predefinita), in modo che possiate testare con mano come funziona il tasto condividi in app inventor 2.

Tornare all'elenco delle lezioni

Tasto per chiudere applicazione (Mit App Inventor 2)

Di questa funzionalità in realtà ne avevo già parlato in un altro articolo, ma visto che stranamente questo tipo di opzione di Mit App Inventor 2 è posizionata in una posizione un po' difficile da trovare, meglio fare un mini tutorial che poi può esser più facilmente trovato ogni volta che non ci si ricorda più dov'è il blocco che consente di chiudere un'applicazione.

Creare un tasto chiudi applicazione può servire in tutti quei casi in cui si voglia dare la possibilità all'utente, di uscire dalla nostra app, magari compiendo anche qualche altra operazione in background, tipo salvare dei dati nel db.

Come aggiungere un tasto per chiudere applicazione in Mit App Inventor 2

Per poter aggiungere il classico bottone chiudi app in appinventor 2, andiamo subito nella sezione Blocchi (blocks).

Il blocco che ci serve si trova, stranamente, nella sezione Controllo (Control), e si chiama esattamente: Chiudi applicazione (Close application).
Ora non ci resterà altro che aggiungere ad esempio, un bottone, e poi legare l'azione onclick (al click) a questo blocco, per far chiudere la nostra app con un tocco del dito.

L'unico limite di questo comando app inventor, è che può essere eseguito solo con un'applicazione installata, e non in fase di sviluppo.
Se proverete infatti a chiudere il vostro programma/gioco tramite close application, appinventor2 vi riporterà un avviso a video sull'impossibilità di compiere quest'azione.

Sempre nella sezione strutture di controllo, troviamo anche il comando Chiudi schermo (Close screen), che può tornare utile nella gestione delle applicazioni multischermo.

Bene, onclick close app: done (per dirla all'inglese :p).

Tornare all'elenco delle lezioni

Posizione GPS (Mit App Inventor 2)

Sapere dove ci si trova non è mai stato così facile, grazie a Mit App Inventor 2.
Sto parlando ovviamente della funzione posizione / gps, ovvero della possibilità di individuare tramite applicazione, alcuni parametri come latitudine, logitudine, altezza e velocità.

Vediamo dunque come fare usare la funzione localizzazione del proprio cellulare, tramite appinventor 2.

Individuare Posizione GPS con Mit App Inventor 2

Il componente che consente di creare applicazioni per android in grado di utilizzare il gps del telefono, si chiama Sensore Posizione (Location Sensor) e si può trovare nella sezione Sensori (sensors).

Dopo aver trascinato questo componente invisibile nel visualizzatore (viewer) di app inventor, andare come al solito nella sezione blocchi (blocks), per iniziare subito ad utilizzare le funzionalità di questo componente.

C'è un blocco in particolare che fa quasi tutto ciò che serve, il suo nome è: Per sempre quando sensoreposizione posizione cambiata (when locationsensor location changed).
Questo blocco funziona in modo da individuare il cambio della posizione del proprio cellulare (cercando la vostra posizione in un intervallo di tempo modificabile), catturando 4 variabili in tempo reale: latitudine, logitudine, altezza e velocità.

Ovviamente, per poter utilizzare questo componente, bisogna aver attivato il gps.
Inoltre, appena farete partire la vostra applicazione, che quindi chiamerà la funzionalità del gps, dovrete attendere qualche secondo per essere individuati.

Allego il solito progetto .aia d'esempio, nel quale ho usato una web view che passa a google maps la longitudine e la latitudine, consentendo quindi all'applicazione di visualizzare una mappa aperta esattamente nella posizione in cui vi trovate (in buona sostanza ho emulato l'app di google maps).

Questo componente di app inventor 2 può sicuramente tornare utile per creare un tipo di applicazione in grado di usare la posizione del telefono, per uso ludico o professionale.
Potrete ad esempio condividere la vostra esatta posizione con i vostri amici, salvare i dati del gps per tracciare una sorta di percorso, e tante altre belle cose.

Tornare all'elenco delle lezioni