Come creare un’applicazione Android

Senza scrivere una riga di codice e grazie al tool di Google possiamo creare applicazioni Android direttamente online ed in pochissimo tempo.

Gli sviluppatori che scelgono Android, il sistema operativo mobile targato BigG, hanno a disposizione un linguaggio di programmazione, una libreria di funzionalità potenti e complete, un ambiente di sviluppo aperto e flessibilie. La documentazione e gli articoli tecnici non mancano, così come abbondanti sono le comunità online dove gli sviluppatori Android si radunano e si danno aiuto a vicenda. Programmare applicazioni Android è facile e divertente.

Come creare un’applicazione Android

Per andare incontro, però, alle esigenze di chi è meno esperto nella programmazione, Google sta gradualmente introducendo App Inventor, un sistema alternativo per creare applicazioni Android senza scrivere una sola riga di codice. App Inventor non è altro che un’applicazione Web online utilizzabile su sistemi quali:

• Windows XP, Vista, 7
• Mac OS X 10.5, 10.6
• GNU/Linux Ubuntu 8+, Debian 5+

I browser compatibili sono invece:

• Mozilla Firefox 3.6 o successivo
• Apple Safari 5.0 o successivo
• Google Chrome 4.0 o successivo
• Microsoft Internet Explorer 7 o successivo.

Sia sistema che browser devono avere installato Java 6.

Con App Inventor le applicazioni possono essere letteralmente disegnate sullo schermo del proprio computer riuscendo velocemente a creare, verificare e vendere delle vere e proprie applicazioni Android competitive.

Benchè App Inventor non necessità di installazione, essendo un’applicazione online, è comunque necesario installare un package aggiuntivo chiamato App Inventor Setup Software che contiene degli strumenti aggiuntivi per la verifica e il confezionamento delle applicazioni e ha l’utilità di verificare le applicazioni realizzate su un dispositivo reale connesso via USB al computer oppure in alternativa su un emulatore.

I link per scaricare il pacchetto, a seconda del sistema operativo, sono:

• Setup Windows
• Setup Linux
• Setup Mac

Scarichiamo e installiamo il pacchetto secondo le istruzioni riportate nella pagina. Per verificare che l’installazione sia andata a buon fine, rechiamoci nella directory in cui è stato installato il software e avviamo il comando run-emulator.

Questo comando avvia l’emulatore del sistema Android compreso nel pacchetto, prendiamo nota del percorso di installazione del software appena configurato potrebbe tornare utile in seguito.

Ora per accedere all’applicazione online, bisogna avere un account e chiedere l’abilitazione all’uso del servizio. Colleghiamoci all’indirizzo appinventor.googlelabs.com. Se abbiamo già un account Google possiamo accedere altrimenti seguiamo i passaggi per iscriverci.

Come funziona App Inventor?

La piattaforma App Inventor è organizzata per progetto, ogni applicazione che vogliamo realizzare fa parte di un progetto. Per questo appena si accede la prima cosa che viene visualizzata è un elenco di progetti sui quali stiamo lavorando. Appena iscritti bisognerà crearne uno azionando il bottone New. Ci verrà chiesto di assegnare un nome al progetto, dopo averlo assegnato confermiamo e salviamo.

Il nuovo progetto sarà creato automaticamente e la schermata presentata a questo punto da App Inventor è il principale banco di lavoro della piattaforma, nella quale è possibile costruire l’applicazione. Al centro dello schermo c’è l’anteprima di come si presenta il software in lavorazione. Sulla sinistra c’è invece, la palette dei componenti. Un componente è un elemento di base che è possibile impiegare per costruire l’applicazione. Un esempio di componente è il bottone, l’immagine e cosi via.

Le applicazioni vengono costruite combinando insieme una serie di componenti. La palette dei componenti è suddivisa in differenti categorie: i componenti base (bottoni, immagini,ecc.) e i componenti avanzati (riproduttori di suoni, video ecc..). 

Design di un’applicazione

Proviamo a realizzare un’applicazione che una volta lanciata mostri l’immagine di un’automobile e sotto questa immagine ci sarà un pulsante con il messaggio metti in moto, quando l’utente premerà il pulsante il telefono dovrà riprodurre il suono del rombo di un motore.

Con App Inventor siamo in grado di fare tutto questo. Abbiamo bisogno soltanto di un’immagine in formato jpg di un’automobile e un file MP3 con il rombo del motore. Costruiamo l’interfaccia grafica e dalla Palette, nel gruppo Basic selezioniamo il componente Image e trasciniamo con il mouse all’interno dell’applicazione. Trasciniamo anche il componente Button posizionandolo subito sotto l’immagine.

Nella Palette dei componenti individuiamo il componente Sound. Trasciniamo anche questo all’interno dell’applicazione. Dopo aver popolato l’applicazione dei componenti sopra indicati diamo un’occhiata sulla destra. Ci sono tre aree molto importanti:

• Components: in ques’area sono presenti tutti i componenti usati nell’applicazione.
• Properties: contiene tutti gli strumenti utili per modificare le proprietà di ciascun elemento dell’applicazione.
• Media: qui vengono riportati tutti i file multimediali necessari all’applicazione. Con il tasto Add è possibile avviare la procedura di upload di un nuovo file.

Utilizziamo per prima cosa l’area Media per caricare l’immagine e l’audio di cui si è detto in precedenza. Andiamo, poi, su Components e selezioniamo Screen1, che corrisponde alla schermata principale dell’applicazione e modifichiamo alcune sue caratteristiche nell’area Properties. Cambiamo il colore di sfondo impostandolo su nero e modifichiamo il titolo della finestra in Automobile. Passiamo ora a Image1 e associamo alla proprietà Picture l’immagine dell’automobile caricata poco prima nella sezione Media. Modifichiamo anche le proprietà del componente Button1. In particolare cambiamo il testo al suo interno impostando la proprietà Text sul valore “Metti in moto”. Finiamo modificando anche Sound1 associandogli l’MP3 scaricato in precedenza.

Blocks Editor

L’interfaccia dell’applicazione è pronta. Dobbiamo soltanto fare in modo che quando l’utente preme il bottone il rombo del motore venga riprodotto. Per fare questo abbiamo bisogno di Blocks Editor, un editor visuale che sostituisce completamente la necessità di scrivere codice e lo fa attraverso rappresentazioni grafiche dei flussi causa-effetto. In alto a destra, l’App Inventor presenta il tasto Open the Blocks Editor. Clicchiamoci. Il software Blocks Editor verrà subito scaricato ed eseguito. Alla prima esecuzione il Blocks Editor chiederà di digitare il percorso del comando adb, che è una delle utilità installate in precedenza con il pacchetto App Inventor Setup Software, e che serve per connettersi all’emulatore o ad un dispositivo reale. Andiamo sul nostro disco e cerchiamo il percorso del comando adb.exe (windows) o adb (Linux e Mac). Forniamo tale percorso in maniera completa, ad esempio C:\program files\AppInventor\commands-for-appinventor\adb.exe (Windows).

Collegare gli eventi

Una volta avviato il Blocks Editor possiamovedereal suo internotutti i componenti che abbiamo inserito nell’applicazione: sono nella scheda corrispondente alla linguetta My Blocks.Tocchiamo la voceButton 1:apparirà l’elencodi blocchi che corrispondono ad eventi e proprietà del componente. I Blocchi verdi sono del tipo “When…do” ad esempio “When Button1.Click do”, che significa “Quando viene cliccato Button1 fai questo”. Al loro interno, infatti, c’è spazio per inserire un blocco di tipo azione come quelli del tipo “call…” e “set…to”. I blocchi call eseguono un’azione che il componente può svolgere, ad esempio “call Sound1.Play” esegue il suono contenuto nel componente Sound1. I blocchi Set,invece, cambiano il valore di una proprietà di un componente, ad esempio “set Image1.Picture to” cambia l’immagine mostrata dal componente Picture1. I blocchi set vanno collegati ad un’altra categoria di blocchi, che fornisce il nuovo valore da impostare. Questo valore può essere letto dalle proprietà di un altro componente, oppure specificato in altro modo attravero una delle altre carattteristiche messe a disposizione dal Blocks Editors.

Facciamo ora in modo che alla pressione del tasto Button1 il suono del componente Sound1 venga riprodotto. Trasciniamo allora il blocco “when Button1.Click do” nell’area di lavoro. Colleghiamolo con il blocco “call Sound1.Play“. 

Sequenze Avanzate

Proviamo ad aggiungere una seconda conseguenza alla pressione del bottone. Facciamo che dopo aver avviato la riproduzione di Sound1 il testo di Button1 cambia da “Metti in moto” a “Vrooooam!”. Basta aggiungere il blocco “set Button1.Text to” all’evento “Button1.Click“. Il nuovo testo può essere specificato usando uno dei blocchi del gruppo Built-in. Trasciniamo il blocco text nell’area ed agganciatelo a “set Button1.Text to“. A questo punto cliccando sul nuovo blocco possiamo digitare il testo da impostare. 

Test dell’APP

Per provare l’applicazione possiamo utilizzare l’emulatore o un dispositivo reale. Per il dispositivo reale occorre collegarlo al computer via USB, non prima di aver installato gli eventuali driver forniti dal produttore. Per usare l’emulatore, invece, è sufficiente lanciare il comando run-emulatore aspettareche il sistema emulato venga caricato. Dall’interno del Blocks Editor, in alto, azioniamo il tasto Connect to phone. Attendiamo qualche istante: il dispositivo sarà contattato dall’App Inventor e l’applicazione sarà scaricata al suo interno. 

Progetto Lavagna

Realizziamo un secondo progetto leggermente più complicato. Sfruttiamo il touchscreen del nostro dispositivo Android, realizzando un’applicazione che funzioni un pò come lavagna. L’utente con il dito potrà tracciare linee e segni sullo schermo. In più, potrà stabilire il colore del gesso virtuale: bianco, giallo o rosso. Per completare l’opera mettiamo a disposizione anche un tasto che funzioni come cancellino, ripulendo la superficie della lavagna.

• Torniamo alla lista dei progetti di App Inventor (My Projects) da cui creiamo un nuovo progetto che chiameremo “Lavagna”. Costruiamo un’interfaccia in questo modo:
• Personalizziamo Screen1, cambiando il titolo della finestra in “Lavagna” e cambiamo il colore dello sfondo in nero.
• Trasciniamo dalla palette un componente HorizontalArrangement, che è parte dell’elenco Screen Arrangement. Questo componente permette di disporre in sequenza una serie di altri componenti.
• Dentro l’elemento HorizontalArrangement inseriamo una serie di quattro componenti Button.

Personalizziamo i bottoni, cambiando i nomi da Button1, Button2, Button3 e Button4 a ButtonBianco, ButtonGiallo, ButtonRosso e ButtonPulisci. Cambiamo il testo dei bottoni in modo che sia “Bianco”, “Giallo”, “Rosso” e “Pulisci”. Cambiamo inoltre l’aspetto dei pulsanti: mettiamo su nero il colore di sfondo di tutti e quattro i bottoni, aumentiamo le dimensioni del testo al valore 20, impostiamo l’uso del grassetto e cambiamo il colore del testo. Mettiamo infine in corsivo la scritta “Pulisci” sul quarto bottone.

Trasciniamo dalla palette un componente di tipo Canvas, che permettono di tracciare linee liberamente sullo schermo, posizionandolo subito sotto l’elemento HorizontalArrangement disposto in precedenza. Maneggiamo le proprietà dell’oggetto Canvas mettendo lo sfondo sul colore nero e il colore di disegno (PaintColor) impostiamolo sul bianco. Aggiustiamo poi le dimensioni dell’elemento: per la larghezza scegliamo il valore fill_parent e per l’altezza digitiamo il valore preciso di 370 pixel.

Controlliamo che il nome del componente sia Canvas1 e completata l’interfaccia muoviamoci su Blocks Editor per programmare la logica necessaria all’applicazione. Ecco i passi da seguire:

• Al clic sul bottone Bianco dobbiamo cambiare il PaintColor di Canvas1 impostandolo sul bianco.
• Al clic sul bottone Giallo dobbiamo cambiare il PaintColor di Canvas1 impostandolo sul giallo.
• Al clic sul bottone Rosso dobbiamo cambaire il PaintColor di Canvas1 impostandolo sul rosso.
• Al clic sul bottone Pulisci dobbiamo ripulire il contenuto dei Canvas1.
• In qualche maniera quando l’utente trascina il dito all’interno di Canvas1 dobbiamo far tracciare una linea del colore impostato.

Vediamo come realizzare questi cinque punti:

Trasciniamo sul campo il gestore di evento “When ButtonBianco Click do“, incastriamo al suo interno il blocco “set Canvas1.PaintColor to“. Il colore da collegare a questo blocco possiamo sceglierlo dal gruppo Colors della sezione di blocco Built-in. Scegliete naturalmente il colore attinente il nome del componente (es. per ButtonBianco scegliete il colore White). Al componente Button Pulisci, invece deve essere associata un’azione differente, il blocco da incastrare è tra quelli di Canvas1 e per l’esattezza l’azione “call Canvas1.Clear“. Ora bisogna fare in modo che trascinando il dito su Canvas1 vengano tracciate delle linee. L’evento da gestire è “when Canvas1.Dragged do“, trasciniamolo sull’area di lavoro del Blocks Editor. Quest’ultimo blocco è leggermente più complesso degli altri, perchè non basta sapere che il dito si è mosso bisogna anche sapere da dove è partito e fin dove è arrivato, infatti questo tipo di blocchi agganciano automaticamente i blocchi di tipo “name…“. Quando l’utente trascina il dito, l’evento riporterà le informazioni aggiuntive all’interno delle variabili agganciate. A noi interessa sapere che prevX e prevY riporteranno le coordinate che aveva il dito prima dell’evento, mentere currentX e currentY riporteranno quelle raggiunte al termine del movimento. Sfruttando queste informazioni possiamo inserire la conseguenza dell’evento, trascinando al suo interno un blocco “call Canvas1.DrawLine”. Per disegnare una linea ci vogliono le quattro coordinate che indicano da dove la linea parte (x1 e y1) e dove la linea finisce (x2 e y2) e, infatti il blocco che abbiamo aggiunto dispone degli agganci necessari per queste quattro informazioni.

I blocchi utili per compiere l’operazione di collegamento tra questi tasselli e la variabile sono presenti nella voce My Definitions. Trascinate nell’area di lavoro i blocchi “value prevX“, “value prevY“, “value currentX“, “value currentY” agganciandoli rispettivamente ai tasselli x1,y1,x2,y2.

Attraverso gli esempi mostrati abbiamo visto le potenzialità di App Inventor, anche se possiamo approfondire questo fantastico strumento seguendo alcuni tra i tanti tutorial a disposizione nella sezione Learn (masticando un pò di inglese naturalmente).

La fase finale per la distribuzione delle applicazioni Android consiste in un file con estensione .apk. Con questo tipo di file è possibile distribuire l’applicazione sul market. Apriamo il progetto corrispondente su App Inventor e dalla schermata di lavoro principale apriamo l’elenco Package for Phone e scegliamo la voce Download to this Computer.

Potremo così scaricare il file .apk che contiene la nostra applicazione finita. Se poi vogliamo distribuire la nostra App attraverso l’Android Market di Google, connettiamo al seguente link Publishing su Google Play. Per pubblicare bisogna però iscriversi e pagare 25 dollari (circa 19€) con carta di credito.

Alla Prossima.