Corso
WEB DESIGN
Aprile – Maggio 2015
Sviluppare
APP
per Android
Attraverso tale strumento software i ricercatori del Massachusetts Institute of
Technology si propongono di rendere il più semplice, intuitivo e rapido possibile il
processo di realizzazione di una app (ovvero di un'applicazione destinata a essere
eseguita su dispositivi di mobile computing, come smartphone o tablet) per sistemi
operativi di tipo Android (prodotto da Google).
Caratteristiche principali di
MIT App Inventor
MIT App Inventor si propone come punto di riferimento soprattutto per chi desidera
programmare la propria app, ma non è in possesso di una preparazione specifica dal
punto di vista informatico (conoscenza del linguaggio JAVA). La potente interfaccia
grafica di MIT App Inventor consente di organizzare ogni aspetto della
propria app senza la necessità di scrivere codice, rimuovendo un importante ostacolo
per i non addetti ai lavori.
Oltre alle funzioni base (ad esempio aggiunta di pulsanti, caselle di testo, animazioni),
sono messe a disposizione, sempre tramite interfaccia grafica, anche funzionalità più
complesse, come ad esempio l'integrazione con social network come Twitter.
Non si tratta però soltanto di questo: MIT App Inventor rappresenta un'opportunità
importante anche per i programmatori più esperti. La potenza dell'interfaccia grafica
può infatti essere molto utile anche per loro, per risparmiare tempo e velocizzare
alcuni processi di sviluppo grazie all'integrazione della libreria Java Open
Blocks mediante la quale è possibile gestire processi di programmazione in modo
visuale attraverso semplici operazioni all'interno della GUI (Graphical User Interface) .
Scaricheremo e installeremo un software che ci consentirà di emulare il
comportamento di un dispositivo Android e ci serviremo poi di tale emulatore per
eseguire le operazioni di test e di debug dei nostri lavori.
Ipotizzeremo, per descrivere nello specifico la procedura di installazione, di avere a
disposizione un sistema operativo di tipo Windows, data l'ampia e capillare diffusione
di tale OS. Tuttavia, segnaliamo che è possibile, sempre come indicato sulla pagina
ufficiale di MIT App Inventor, utilizzare tale software anche con sistemi operativi di
tipo MAC OS. A breve, l'elenco verrà aggiornato, e sarà possibile servirsi
dell'emulatore anche con sistemi Linux (attualmente supportati soltanto se è
disponibile una connessione con un dispositivo Android). Concludendo l'elenco dei
requisiti, segnaliamo che, per servirsi di MIT App Inventor sarà necessario essere
provvisti di un account Google.
La versione Windows del pacchetto software che contiene il già citato emulatore può
essere scaricata a questa pagina. Una volta completata la procedura guidata di
installazione, verrà automaticamente avviato il già citato emulatore aistarter.
Non resta quindi che recarsi all'indirizzo http://ai2.appinventor.mit.edu e indicare,
quando richiesto, le credenziali del nostro account Google, per accedere alla
schermata di benvenuto di MIT App Inventor 2 (schermata riportata nella figura
sottostante).
L'emulatore Android
Prima di procedere ad analizzare, nel corso della prossima lezione, quale sia l'architettura di
una app in MIT App inventor, eseguiamo una semplice verifica. Verifichiamo cioè che
l'emulatore installato nel corso della scorsa lezione funzioni correttamente. A tal fine
clicchiamo sull'opzione Emulator del menu Connect, come mostrato nella figura in basso.
Verrà così avviato l'emulatore Android. Qualora si rilevasse un messaggio d'errore, che
segnala l'impossibilità di individuare l'emulatore stesso, sarà sufficiente avviare aiStarter
manualmente, con un semplice doppio clic proprio sul collegamento a aiStarter inserito sul
nostro desktop a seguito dell'installazione operata poco fa.
Preparare il cellulare
Scaricare sullo smartphone la app Mit Ai2 Companion.
Con questa saremo in grado di installare sul nostro cellulare l’app , tramite la lettura
del QR Code , e potremo , così , effettuare i test sul suo funzionamento.
Struttura di una App
Prima di proseguire alla realizzazione della nostra prima app con MIT App Inventor, ci
proponiamo di comprendere quale sia la struttura logica di una app. Il nostro obiettivo
cioè è quello di individuare le sotto-componenti principali che costituiscono una app,
evidenziandone le interazioni.
Prendiamo come punto di partenza della nostra analisi la schermata principale di
controllo del progetto (e di seguito riportata).
Notiamo come, in alto a destra, siano presenti due pulsanti: Designer e Blocks e come
l'opzione selezionata per default, tra le due, sia Designer. Quella che stiamo osservando,
quindi, è la scheda Designer della schermata principale.
Da qui possiamo agire su una delle tipologie di elementi costitutivi della nostra app,
ovvero le sue componenti (components).
Components
Possiamo pensare alle componenti come alle unità minime coinvolte nella costruzione
della nostra app. Ad esempio, appartengono alla categoria
delle componenti: pulsanti, caselle di testo, immagini, suoni, video. Tali elementi sono
presenti proprio nella scheda Designer che stiamo osservando, in particolare nel pannello
a sinistra.
Fanno parte delle componenti anche unità (sempre indicate nel pannello a sinistra della
schermata principale Designer) che non compaiono alla vista dell'utente, ma risultano
rilevanti per il programmatore. Ad esempio, la componente Texting, dedicata
all'elaborazione e all'invio di SMS, oppure la componente Location Sensor, utile per
conoscere la posizione dell'utente. Faremo riferimento alle componenti del primo gruppo
(pulsanti, immagini, ecc.) come visibili e a quelle della seconda categoria come non
visibili.
Behaviors
Passiamo ora alla scheda Blocks della schermata principale (riportata più in basso), per
fare conoscenza con la seconda categoria di elementi che costituisce una app. Si tratta
dei behaviors ovvero, letteralmente, dei comportamenti.
Prima di entrare nello specifico per quanto riguarda tale categoria di elementi,
osserviamo che il paradigma moderno di programmazione tende a modellare
un software non più in termini statici (ovvero come la procedura composta da una
sequenza di istruzioni) ma come un'entità reattiva. Come un modulo capace, cioè, di
qualificare e definire se stesso in funzione delle proprie reazioni a stimoli esterni.
La struttura di una app realizzata con MIT App Inventor (e non solo) ricalca tale modello.
I behavior consentono proprio di definire come la nostra app dovrà comportarsi a
seguito, ad esempio, di un particolare input dell'utente, o dopo un fissato lasso di
tempo. Definiremo tali behaviors proprio dall'interno della schermata Blocks che stiamo
osservando, facendo uso in particolare del pannello omonimo (Blocks), sulla sinistra.
Abbiamo a questo punto una panoramica più chiara circa la struttura di una app: si
tratta di un insieme di componenti (che possono essere sia visibili che non visibili) che
reagiscono, modificando il proprio comportamento, a particolari eventi , tramite i
behaviors.
La prima App con MIT App Inventor
Nel corso di questa lezione, ci dedicheremo alla realizzazione della nostra
prima app con MIT App Inventor.
Si tratta di una app molto semplice che ha lo scopo di introdurre alle potenzialità di
questo ambiente di sviluppo.
Accediamo dunque per prima cosa alla schermata iniziale del nostro ambiente di
sviluppo.
Il nostro obiettivo sarà realizzare una app in grado di riprodurre vocalmente un
messaggio predefinito, al clic di un pulsante da parte dell'utente.
Prenderemo in questo modo confidenza sia con elementi di base, come la realizzazione
di un pulsante che con funzionalità più complesse, come la riproduzione vocale. Non
solo: in questo modo ci sarà possibile utilizzare sia componenti visibili (Button)
che non visibili (TextToSpeech).
Non a caso, gli stessi autori di MIT App Inventor segnalano proprio questa app come
una delle più indicate per un primo approccio.
Creiamo quindi un nuovo progetto e scegliamo, per chiarezza, un nome che rappresenti
le funzionalità dell'app: ad esempio TalkToMe, ovvero "parlami" . La creazione di questo
nuovo progetto ci offre l'occasione di far presente che è opportuno evitare spazi vuoti
all'interno dei nomi dei progetti MIT App Inventor.
Connettiamo ora l'emulatore al nostro progetto, cliccando sull'opzione Emulator del
menu Connect. Qualora aiStarter non fosse stato avviato in modo automatico, potrebbe
esserci richiesto di provvedere manualmente (come visto nelle scorse lezioni, tramite un
doppio clic sul collegamento ad aiStarter situato sul nostro desktop).
Una volta completata la connessione all'emulatore verrà aperta automaticamente
un'altra finestra, che rappresenta lo schermo di uno smarpthone: utilizzeremo proprio
tale finestra per testare il comportamento della nostra app.
Inseriamo i componenti all'interno della nostra App
Le componenti di cui abbiamo bisogno sono:
un pulsante (visibile)
un TextToSpeech (non visibile)
Cominciamo dal pulsante: dalla scheda Designer della schermata principale, che stiamo
visualizzando, trasciniamo Button (menu a sinistra) sul pannello Viewer (al centro),
come indicato nella figura in basso.
Trasciniamo ora nel pannello Viewer anche il componente TextToSpeech, individuandolo
all'interno del gruppo Media nel pannello Palette (v. figura in basso).
Definiamo il comportamento della nostra App
Sullo schermo apparirà un pulsante, con la scritta TextforButton1. Si tratta del valore di
default per il testo del pulsante.
Sostituiamo tale scritta con TalkToMe, selezionando l'elemento Button appena
aggiunto nel pannello Viewer e modificando opportunamente il campo Text nel
menu Properties (a destra), evidenziato nella figura sottostante.
Trasciniamo ora nel pannello Viewer anche il componente TextToSpeech,
individuandolo all'interno del gruppo Media nel pannello Palette (v. figura in basso).
Definiamo il comportamento della nostra App
Ora non resta che definire il comportamento della nostra app in risposta a eventi: ovvero
specificarne i behavior. Nel nostro caso: riprodurre un messaggio vocale a seguito del clic
sul pulsante TalkToMe.
Passiamo quindi alla scheda Blocks della finestra principale. Selezioniamo la
componenteButton1, all'interno del pannello Blocks (a sinistra). Selezioniamo poi e
trasciniamo verso destra, sempre all'interno del pannello Viewer, il primo elemento tra
quelli comparsi, ovvero When Button1.Click do (v. figura sottostante).
Trasciniamo poi, dopo aver cliccato su TextToSpeech all'interno del pannello Blocks (a
sinistra), l'elemento CallTextToSpeech1.speak message sul pannello Viewer, in modo
che la parola "call" segua la parola do dell'elemento When Button1.Click do
precedentemente trascinato.
Il significato di tale operazione è creare un collegamento logico tra le due componenti
ovvero far sì che, ogni volta che viene cliccato il pulsante, venga generato un
messaggio vocale. Resta solo da definire il messaggio. A tal fine, trascineremo il primo
elemento dell'elenco Text dal pannello Blocks nel pannello Viewer, in modo da
collegarlo conCallTextToSpeech1.speak message, come mostrato nella figura in basso.
Non resta ora che effettuare un doppio clic sull'ultimo elemento inserito, e digitare poi
il messaggio che si desidera ascoltare. La lingua di default è l'inglese: possiamo
scegliere, ad esempio "Great job" (ovvero "ottimo lavoro"), per festeggiare la buona
riuscita della nostra prima app creata con MIT App Inventor.
Possiamo verificarne il corretto funzionamento servendoci della finestra emulatore,
ovvero cliccando sul pulsante TalkToMe e ascoltando il messaggio impostato.
I componenti di MIT App Inventor
Dopo aver visto un semplice esempio di una prima App creata con MIT App Inventor,
passiamo ad approfondire alcuni aspetti teorici già precedentemente introdotti.
Torniamo, cioè, sul "duopolio" di components e behaviors.
Più precisamene, ci soffermeremo sulle differenti tipologie di componenti resi
disponibili dagli sviluppatori del MIT all'interno della schermata Designer.
Prima di passare in rassegna i vari tipi di componenti supportati dalla piattaforma è
opportuno precisare che la nostra trattazione non ha l'ambizione di voler essere
esauriente ma, più modestamente, si propone l'obiettivo di offrire una panoramica
generale, una visione d'insieme, sul vasto numero di components disponibili in MIT
App Inventor.
User Interface Components
La famiglia più ricca di componenti è, certamente, quella dei componenti relativi
all'interfaccia utente. Si tratta, in sostanza, dei componenti necessari a disegnare e far
funzionare l'interfaccia utente.
L'esempio tipico di questa tipologia di componenti è offerto dai bottoni.
Ogni componente, come avremo modo di vedere, dispone di metodi, eventi e
proprietà peculiari .
Di seguito l'elenco completo dei componenti di questa famiglia:
Button - il classico bottone;
CheckBox - consiste nella classica casella di scelta (true/false);
DatePicker - apre un pop-up per la selezione di date;
Image - mostra un'immagine;
Label - mostra del testo;
ListPicker - è un bottone che, una volta premuto, apre una lista di opzioni tra cui è
possibile scegliere;
ListView - consente di creare una lista di elementi testuali;
Notifier - consente di creare delle notifiche;
PasswordTextBox - campo per l'inserimento di password (al posto dei caratteri digitati
vengono mostrati dei puntini);
Screen - è l'elemento genitore (lo schermo) che contiene tutti gli altri componenti di
questa famiglia;
Slider - genera una barra con all'interno un cursore draggabile
Spinner - apre un menu di scelta multipla;
TextBox - campo per l'inserimento di testo;
TimePicker - apre un pop-up per la selezione di un orario;
WebViewer - consente di aprire una URL remota.
Layout Components
Offre una serie di componenti che consentono di gestire il layout dell'applicazione.
Questa famiglia di componenti offre tre alternative:
HorizontalArrangement - gestisce diversi elementi affiancandoli orizzontalmente (da
sinistra verso destra)
TableArrangement - consente di creare un layout tabellare
VerticalArrangement - gestisce diversi elementi inpilandoli verticalmente (dall'alto verso il
basso)
Media Components
Questa famiglia di componenti consente di gestire gli elementi multimediali all'interno
della nostra applicazione creata con MIT App Inventor. Vediamo l'elenco dei
componenti a nostra disposizione:
Camcorder - apre la videocamera integrata nel device per la registrazione di un video;
Camera - apre la videocamera integrata nel device per scattare una foto;
ImagePicker - consente di selezionare un'immagine tra quelle presenti nella galleria
del dispositivo;
Player - consente di riprodurre un file audio e di controllare la vibrazione del device
(consigliato per file audio di lunga durata);
Sound - consente di riprodurre un file audio e di controllare la vibrazione del device
(consigliato per file audio di breve durata);
SoundRecorder - consente di accedere al microfono integrato nel device per
effettuare una registrazione audio;
SpeechRecognizer - consente di attivare la funzionalità di riconoscimento vocale
integrata in Android al fine di convertire un parlato in testo;
TextToSpeech - consente di trasformare un testo in un parlato attraverso un
sintetizzatore vocale (tra i vari linguaggi è supportato anche l'italiano);
VideoPlayer - consente di riprodurre un file video all'interno di un player dotato dei
normali comandi attivabili al touch dell'utente;
YandexTranslate - consente di effettuare traduzioni in tempo reale attraverso le API
offerte dal traduttore automatico di Yandex.
Drawing and Animation Components
Si tratta di una serie di componenti per gestire il disegno e le animazioni. Il
componente principale di questa tipologia e canvas il quale costituisce la "cornice"
all'interno della quale è possibile effettuare disegni ed animazioni. Questo l'elenco dei
componenti:
Ball - crea uno sprite circolare che si muove secondo le proprietà ad esso assegnate;
Canvas - pannello rettangolare bidimensionale sensibile al touch all'interno del quale
è possibile disegnare e riprodurre animazioni;
ImageSprite - crea uno sprite sulla base di un'immagine che si muove secondo le
proprietà ad esso assegnate.
Sensor Components
Si tratta di una serie di componenti attraverso i quali è possibile accedere ai sensori del
dispositivo.
AccelerometerSensor - componente non visibile che intercetta lo shake del dispositivo e ne
misura le accellerazioni;
BarcodeScanner - consente di leggere un codice a barre;
Clock - componente non visibile che consente di accedere all'orologio del dispositivo;
LocationSensor - componente non visibile che consente di accedere alle informazioni di
geolocalizzazione (latitudine, longitudine, altitudine e indirizzo)
NearField - componente non visibile che consente di accedere alle funzionalità NFC;
OrientationSensor - componente non visibile che consente di rilevare l'orientamento del
device.
Social Components
Questa tipologia di componenti di MIT App Inventor consente di gestire alcune
funzionalità sociali come, ad esempio, l'attivazione di pulsanti di chiamata o
l'interazione con Twitter. Segue l'elenco dei componenti disponibili:
ContactPicker - consente di effettuare la scelta di un contatto tra quelli disponibili
nella rubrica del device;
EmailPicker - consente di inserire una casella di testo con auto-completamento
all'interno della quale può essere digitato il nome di un contatto o un'indirizzo email;
PhoneCall - componente non visibile che consente di effettuare una chiamata ad un
numero prestabilito;
PhoneNumberPicker - mostra i numeri di telefono dei contatti presenti nella rubrica;
Sharing - componente non visibile che consente di condividere file o messaggi tra
l'applicazione ed altre app installate sul device;
Texting - consente di inviare un messaggio di testo con un messaggio e ad un numero
predefinito;
Twitter - consente di comunicare con Twitter ed effettuare alcune operazioni come, ad
esempio, inviare un tweet.
Storage Components
Questi componenti consentono di memorizzare dei dati all'interno del device al fine di
poterli riutilizzare nei successivi accessi all'applicazione.
File - componente non visibile che consente di scrivere e/o leggere un file all'interno del
device;
FusionTablesControl - componente non visibile che consente di comunicare con Google
Fusion Tables (un servizio sperimentale di Google che consente di gestire e condividere
data tables);
TinyDB - componente non visibile che consente di memorizzare (e leggere) dati
all'interno di una sorta di database (estremamente semplificato) mediante un
meccanismo di tags;
TinyWebDB - componente non visibile che consente di interagire con un web-service
per la memorizzazione (e la lettura) dati in remoto.
Connectivity Components
Si tratta di una serie di componenti attraverso i quali gestire le possibilità di
connessione dell'applicazione. Questi i componenti disponibili:
ActivityStarter - consente di lanciare una nuova activity (ad esempio è possibile aprire
il browser con una pagina preselezionata o effettuare una ricerca su Google);
BluetoothClient - consente di attivare un client Bluetooth;
BluetoothServer - consente di attivare un server Bluetooth;
Web - componente non visibile attraverso il quale è possibile inoltrare chiamate HTTP
mediante GET, POST, PUT e DELETE.
Dopo aver offerto una rapida panoramica sui componenti di MIT App Inventor, a partire
da questa lezione ci occuperemo del funzionamento del pannello Blocks ovvero come
gestire i cosidetti behaviors. In pratica ci occuperemo di programmazione visuale, cioè di
come creare un programma utilizzando i blocchi colorati di MIT App Inventor.
Eventi, metodi e proprietà in MIT App Inventor
In precedenza abbiamo visto come creare una prima app e come gestire un
evento (la pressione di un bottone) e come associare ad esso una
determinata azione (una riproduzione vocale).
Eventi
Quello che abbiamo visto, in pratica, è un esempio di Event Handlers. La sintassi di
questo tipo di blocco si esaurisce nella parole when ... do che, tradotte in italiano,
significano: "quando succede X fai Y".
E' bene precisare che ogni componente di MIT App Inventor ha una propria serie di
eventi: questi ultimi, pertanto, cambieranno a seconda che il componente coinvolto
sia, ad esempio, un Bottone o una TextBox.
Metodi e Proprietà
Abbiamo detto che ogni componente ha una propria serie di eventi associati, allo stesso
modo possiamo dire di metodi e proprietà. Senza voler entrare nel dettaglio della
programmazione ad oggetti, in questa sede basti sapere che col termine "metodo"
s'intende solitamente un'azione che può essere compiuta da un dato componente,
mentre col termine "proprietà" s'intende una sua caratteristica che può essere
manipolata.
Chiamare un metodo
Per meglio comprendere il funzionamento dei metodi vediamo un altro esempio:
Nell'esempio qui sopra quando viene premuto un dato bottone (Button1) l'app
riproduce un dato suono (Sound1) ed attiva la vibrazione per mezzo secondo.
Possiamo notare dal nostro esempio che ogni azione da eseguire è attivata dal
blocco call e che di questi blocchi è possibile inserirne più di uno. Volendo usare un
linguaggio maggiormente tecnico (e sicuramente più appropriato) possiamo dire di
aver usato call per chiamare due metodi del
componente Sound (rispettivamente Play e Vibrate).
Osservando il nostro esempio, ancora, possiamo notare che alcuni metodi, per essere
eseguiti, necessitano di un parametro (è il caso della vibrazione che necessita
dell'indicazione esplicita della durata) mentre altri (come Play) no.
Nota: quando all'interno di un medesimo evento vengono racchiuse più azioni queste
vengono eseguite in ordine dall'alto verso il basso. Nel nostro esempio, quindi, prima
il telefono suonerà e poi vibrerà. Ovviamente potete cambiare l'ordine a vostro
piacimento attraverso una semplice operazione di drag & drop.
Lavorare con le proprietà: i blocchi setter e getter
Oltre a call, lo spazio do del blocco when ... do, può contenere anche un blocco di
tipo set (cosidetti blocchi setter) attraverso il quale si assegna un valore ad una
proprietà di un dato componente. In questo caso l'utilizzo di parametri è obbligatorio.
Come detto le proprietà corrispondono a delle caratteristiche dell'elemento, vediamo
quindi, per fare un esempio pratico, come utilizzare set per effettuare una modifica
sulla proprietà BackgroundColor di un componente Label:
Da notare che l'assegnazione di un valore, che nell'esempio qui sopra è avvenuta in
modo diretto ed esplicito, può avvenire anche tramite un espressione. Ad esempio
un'altezza o una larghezza possono essere calcolate con espressioni del tipo:
Oppure, ancora, è possibile assegnare un valore ricavato da un'altra proprietà dello
stesso o di un altro componente mediante un getter (cioè un blocco col quale non si
setta, ma si recupera il valore di una data proprietà). Di seguito alcuni esempi di
setter e getter relativi ad una ipotetica Label:
Installare la APP sullo Smartphone
Tramite il menu BUIL generare il QR Code.
Acquisire il QR code tramite la App
MIT App Inventor2
Installa la App
e verifica il suo
funzionamento
Scarica

Presentazione standard di PowerPoint