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