Appinventor - Programmare sistemi Android in rapidità - Now 1.0

AppinventorProgrammare Sistemi Android in rapiditàdi Daniele Simoncini

1

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

SommarioSommarioTeoria

L’ArchitetturaIl DesignerIl Block EditorNew EmulatorCompilare le AppComponenti Principali

Componenti BaseScreenButtonCanvasCheckBoxClockImageLabelListPickerPasswordTextBoxTextBoxTinyDB

Componenti per i SensoriAccelerometerSensorLocationSensorOrientationSensor

Altri Componenti UtiliNotifierActivityStarter

Un po’ di praticaHello BioParco

I componentiLo schema logico

HAL8999I componentiLo schema logico

HAL9002I componentiLo schema logico

IveShotTheDragon - Gamer Dice SimulatorI componentiLo schema logico

BeerFinder - Where is my Beer?I componentiLo schema logico

Link Utili

2

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

TeoriaDa Google al MIT, il progetto Appinventor nasce per la ricerca di un metalinguaggio atto alla programmazione Android, e non solo, in grado di accelerare il flusso lavorativo.Arrivato al suo terzo anno di vita e dopo un periodo di oscuramento dovuto alla migrazione dai server di Google, Appinventor è oggi di libero utilizzo per chiunque abbia un Google Account e può sia essere utilizzato direttamente sui server americani che essere installato su di un server locale, così da permetterne un utilizzo anche in lan o reti protette.Ma come funziona esattamente AppInventor?Ciò può essere spiegato facilmente!Il sistema si basa sul progetto blocky di google, un sistema nato per l’insegnamento della programmazione più che sulla sua effettiva esecuzione, In questo nuovo modo di programmare, lo sviluppatore non è più legato alla conoscenza diretta del linguaggio, il sistema gli mette a disposizione una serie di interfacce web-oriented per lo sviluppo wyswyg sia del codice che delle gui(graphical user interfaces), di pratica deve solo conoscere l’algoritmo del suo programma, le interfacce ne salveranno la configurazione in un flusso json, rimandando poi al compilatore la sua conversione in vero e proprio codice.Ma vediamo di capirne qualcosa di più...

L’ArchitetturaIl sistema di sviluppo AppInventor prevede una shell pensata nativamente per un accesso web-oriented, questo approccio permette di avere, se pur su di una struttura diffusa, sempre l’ultima versione del programma su ogni client collegato.

Il sistema nel suo complesso si divide in 3 finestre principali:● l’editor delle viste(Designer);● l’interfaccia di sviluppo(Block Editor);

3

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

● l’emulatore. Appinventor nella versione centralizzata, basandosi su di un Google Engine, prevede il salvataggio sui server del MIT, ciò come detto prima serve per la compilazione del programma, permettendo in ogni caso il download ed il reupload del codice prodotto in qualunque momento.Oltre a quanto detto il MIT ha reso il codice installabile localmente così da assicurare il suo utilizzo anche senza l’accesso ad internet ma in particolar modo per garantire la sopravvivenza delle app sviluppate anche in caso di chiusura del progetto principale.Per poter installare il server localmente, trovate il link al repository a fine di questo scritto.

Il DesignerIl Designer è principalmente studiato per scopi principali, la gestione dei progetti, come mostrato qui accanto, e per lo sviluppo delle GUI.Per quanto riguarda la gestione dei progetti, il designer appena entrati nel sistema presenta una semplice lista dei progetti sviluppati dall’utente.In alto sulla sinistra troviamo tre pulsanti in bella vista, “New” e “Delete” i cui scopi sono palesi, e “More Actions” attraverso cui si ha la possibilità di uploadare e downloadare i nostri codici, così da poterli proporre in aula ai propri studenti od anche metterli da parte per utilizzi futuri. Una volta creato un nuovo progetto, il sistema ci rimanda direttamente all’interfaccia di gestione e sviluppo delle screen, ovvero delle interfacce che avrà la nostra App.Come si può vedere dalla figura, l’interfaccia è fisicamente divisa in quattro colonne:

● il catalogo dei componenti, utile per poter selezionare gli oggetti previsti dal compilatore(tra cui quelli per il LEGO, ebbene sì);

● la struttura grafica della nostra interfaccia, su cui potremo trascinare i nostri componenti e osizionarli come più ci aggrada;

● l’albero della struttura, essendo interfacce nativamente xml, tutti gli oggetti presenti in maschera avranno un oggetto padre e, volendo, degli oggetti figli;

● la colonna delle proprietà, utile per poter definire l’aspetto grafico del componente selezionato. Oltre a quanto detto, al piede della terza colonna troviamo la media gallery, ovvero il repository degli oggetti multimediali che abbiamo inserito nel nostro progetto.Sempre in questa interfaccia troviamo in alto sulla destra due pulsanti importantissimi, “Open the Block Editor” che ci permetterà di passare all’ambiente di sviluppo del codice e “Package for phone”, tendina in realtà che ci consente di scegliere se scaricar eil compilato o trasferirlo direttamente ad un possibile telefono, via QR o via cavo.

Il Block Editor

4

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

Il sistema di programmazione AppInventor permette di programmare anche ai mangiatori di quiche come abbiamo già detto, riducendo il flusso di sviluppo ad un banale spostamento di blocchi, ma vediamolo un po’ più in dettaglio.Una volta finita la nostra prima screen clicchiamo sul pulsante per l’apertura del Block Editor.Verrà scaricato sul pc client un file jnlp, nel caso in cui non si apra in automatico diciamogli di aprire il file con la Java Web Start.Dati i dovuti permessi si aprirà sul computer client la shell che vediamo in figura.Questa volta l’ambiente è suddiviso in sole due colonne, o per meglio dire, una colonna ed un desk di sviluppo.Dalla colonna di sinistra è ora possibile selezionare gli oggetti su cui vogliamo lavorare, per l’esattezza troviamo in colonna tre linguette:

● Built-in: in built-in troviamo tutti gli oggetti di sistema, come i colori primari per esempio, o come i costruttori per le definizioni.

● My Blocks: tutti gli oggetti che abbiamo inserito nella nostra interfaccia, cliccando su di ognuno di essi possiamo accedere a metodi, funzioni ed eventi, compreso il fantomatico onclick per i pulsanti.

● Advanced: ci permette di accedere a funzioni avanzate, faccio un esempio, da qui avete modo di cambiare il colore di tutte le label presenti nella vostra interfaccia, cos’è una label? ci arriveremo...

Una volta trascinato un oggetto sul desk vi si presenterà come un pezzetto di puzzle.Graficamente troveremo gli eventi come delle grosse “C” al cui interno potranno essere connessi altri blocchi, le funzioni appariranno come delle listelle con ulteriori incastri “femmina”(per i parametri) e “maschi” (per il risultato). Le variabili invece avranno un solo attacco “maschio” utile per il loro collegamento alle funzioni.

NOTA BENE: tutte le variabili presenti in Appinventor sono da intendersi come globali, ovvero esistono in qualunque punto del vostro codice, detto ciò mi raccomando di scegliere bene i nomi, in particolare in progetti di grosse dimensioni è vitale scegliere variabili dal nome chiaro.

New Emulator

5

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

Cosa importante da notare è la presenza in alto sulla destra, all’interno del Block Editor, del pulsante “New Emulator”, se non avete voglia di testare l’applicativo sul vostro telefono cliccateci sopra, il sistema in automatico provvederà all’avvio di un emulatore Android 2.3.3.

Compilare le AppNiente di più semplice!Hai finito di fare il tuo programma? Vuoi metterlo sul telefono per fare il figo con gli amici?Niente di più semplice:

1. chiudi il Block Editor;2. rimamendo sul Designer clicca la casella “Package for Phone”;3. scegli come vuoi ricevere l’App tra le tre opzion indicate, se non vuoi romperti le scatole con cavi

ed aggeggi volanti clicca su “Show Barcode” per appoggiarlo temporaneamente sui server di google.

Componenti PrincipaliCome abbiamo detto prima, all’interno del Designer troviamo sulla sinistra il catalogo degli oggetti utilizabili nelle nostre app, ma vediamone alcuni insieme.

Componenti Base

Screenl padre di tutti gli altri componenti, almeno in linea gerarchica, prevede cose molto interessanti tra le sue proprietà, come per esempio il colore di sfondo, l’orientazione dello schermo ma soprattuto il titolo da far comparire in cima alla pagina!

ButtonI Bottoni, quelle cose piccole su cui schiacci, ne hai usato uno anche per aprire questo documento, a parte gli scherzi li possiamo definire come l’oggetto più utile di tutto il sistema ed ovviamente il modo più semplice per dire al telefono(od al tablet) che vuoi che faccia qualcosa.Una volta trascinati all’interno della tua screen permettono di gestire nel block editor l’evento onclick, ma anche l’evento relativo alla pressione lunga del bottone.

Canvas

6

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

se preferiamo le “cornici”, oggetti già molto più complessi, permettono sia di disegnarci sopra che di poter accettare al loro interno degli sprite e, volendo, anche ruotarli...

CheckBoxCaselle di selezione, ci clicchi viene la punta, ci riclicchi va via.Una volta inseriti in schermata mantengono come proprietà il loro stato di check, esattamente come i bottoni prevedono la gestione dell’evento onclick, o se preferite oncheck.

ClockOggetto utilissimo, prevede una proprietà per la gestione dell’intervallo temporale ed un evento richiamato al suo scadere. Ci potreste addirittura fare un timer da cucina!

ImageOggetti immagine, il sistema più semplice per caricare una foto nel vostro programma, come tutta la struttra Android accetta anche url che, in accoppiata con le google apis, vi potrebbero permettere la visulizzazione di uno stralcio google maps!

LabelEtichette, oggetti di testo solitamente posti a descrizione dell’applicazione ma utilizzabili anche come interfaccia per i messaggi che vorrete dare al vostro utente.

ListPickerElenchi a cascata, vengono visualizzati come dei pulsanti se non fosse che quando li si preme prevedono la selezione di una delle opzioni proposte, tra le varie proprietà ovviamente troviamo l’opzione selezionata.

PasswordTextBoxUna normalissima casella di testo, se non fosse per il fatto che mostra solo asterischi.Comprende eventi relativi all’immissione del testo da parte dell’utente e tra le proprietà il testo digitato.

TextBoxIdentico alla precedente tranne che si legge cosa si scrive

TinyDBOggetto fantastico, non è una base dati nel senso stretto ma è di una comodità bestiale, potete:

● salvare un valore attraverso una chiave di ricerca;● controllare che un valore esista;● estrarre un valore partendo da una chiave conosciuta.

Componenti per i Sensori

AccelerometerSensorComponente per la gestione dell’accelerometro, contiene eventi utilissimi come lo shacking, più una serie di prorpietà riportanti i valori di accelerazione in metri al secondo.Questo componente ovviamente funziona solo su telefoni che lo abbiano integrato.

LocationSensor

7

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

Ovvero il GPS! Il tuo telefono ha un gps a bordo? bene, con questo componente puoi recuperare in modo semplice la tua latittudine e longitudine(WGS84) ma anche la precisione con cui questa è calcolata e, se hai più di tre satelliti, la tua altitudine sul livello del mare.

OrientationSensorIl telefono traballa? con questo componente puoi sapere di quanto, calcolandolo in gradi per tutti e tre gli assi, utilissimo se si deve attaccare una mensola!

Altri Componenti Utili

NotifierComponente per l’invio di messaggi all’utente, le classiche finestrelle di errore di windows finalmente replicate anche in Android!

ActivityStarterManca un componente per la tua applicazione? nessun problema, il MIT ha pensto anche a questo, conoscendone la classe e l’interfccia da richiamare puoi tranquillamente attivare la funzione sul tuo telefono, utile per esempio per sfruttare le potenzialità di google maps e lanciare il navigatore per portarti a destinazione!

Un po’ di praticaFinalmente un po’ di pratica!Dopo tutta questa teoria, ben 8 pagine, qui sotto trovi la descrizione degli esercizi fatti in aula e le reltive screen capture, buon lavoro e buona programmazione!

Hello BioParco “Hello World” rivisitata, e chi chiede cosa sia non può partecipare al corso, no via, gli si spiegherà...“Hello World” credo sia l’applicazione più sviluppata da sempre, probabilmente anche John von Neumann(padre della programmazione, l’inventore del computer per molti) ne ha sviluppata una per far capire ai suoi collaboratori che cacchio avesse fatto in tutti quei mesi chiuso in laboratorio.

I componentiL’App è presto detta, un pulsante, una casella di dialogo, ed un evento onclick: quando schiacci il pulsante capita qualcosa.

Lo schema logico

8

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

9

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

HAL8999La versione precedente dell’HAL9000(abbiamo dovuto ridurne il kernel) è ora presente su sistemi Android!App per la sintesi vocale con gestione di caselle di testo, pulsanti e TTS.

I componentiPer questa applicazione abbiamo bisgno di una casella di testo, un pulsante ed il componente TextToSpeech, obbligatorio per permettere al telefono di pronuncia refrasi compiute.

Lo schema logico

10

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

HAL9002Versione aggiornata e rivista dell’applicazione precedente.Rispetto alla versione precedente questo sistema sfrutterà il TinyDB ed il componente di Speech Recognition per poter rispondere a frasi pronunciate con altre frasi, una vera e propria intelligenza artificiale, anche se basata su fuzzy logic, insomma, il migliore amico di un ubriaco.

I componenti

Lo schema logico

11

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

IveShotTheDragon - Gamer Dice SimulatorCome non presentare delle futility in un corso per nerd? Bene quest’App serve per la generazione di numeri casuali con gestione dell’Accelerometro e del TTS.Per dirla in breve è un sacchetto di dadi virtuali per gdr.

I componentiPer questo esercizio vengono utilizzate una label ed una listpicker per la selezione del tipo di dado.Un pulsante per l’evento estrazione, istanziato anche dal componenete accelerometro.

Lo schema logico

12

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

13

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

BeerFinder - Where is my Beer?Questa App nasce con l’intento di spiegare la gestione del GPS integrato e di Google Maps, tutto questo attraverso la risposta ad uno dei grandi quesiti dell’uomo: dov’è la mia birra?

I componentiL’app si compone di due pulsanti, uno per la memorizzazione del punto, uno per l’avvio della navigazione, il componente LocationSensor, un TinyDB per la memorizzazione delle informazioni, un ActivityStarter per richiamare Google Maps.

Lo schema logico

14

Appinventor - Programmare sistemi Android in rapidità - Now 1.0

Link Utili● Sito del Progetto : http://appinventor.mit.edu/● Repository local install : http://code.google.com/p/app-inventor-releases/downloads/list● Risorse per l’apprendimento : http://appinventor.mit.edu/teach/● Pannello di Controllo : http://beta.appinventor.mit.edu/● Tutorial SetUp:

○ Mac : http://appinventor.mit.edu/explore/content/mac.html○ Win : http://appinventor.mit.edu/explore/content/windows.html○ Linux : http://appinventor.mit.edu/explore/content/linux.html

● Server locale windows : http://code.google.com/p/ai-docs/downloads/detail?name=dev-local-Jan12.zip

● Tutorial per l’installazione locale: https://sites.google.com/a/jsoft.com/appinventor/home/gsuac/server/settingup/dev_appserver#TOC-Windows-personal-setup

● MIT Media Library : http://appinventor.mit.edu/teach/curriculum/media-library.html● Sound Bible : http://soundbible.com● IconFinder : http://www.iconfinder.com/

15