Documentazione Tecninca - Inno

MAGICUM S.R.L
Progetto Inno-School
Area Contenuti
1
Documentazione Tecnica Software
Musica Facile
Lorenzo Marino
Revisione numero 1.3
2
Indice
1.Software Musica Facile
1.1 Introduzione.................................................5
1.2 Applicazioni.................................................6
1.3 Programmazione Java e Visuale..................7
1.4 AppInventor.................................................9
1.4.1 Introduzione....................................................9
1.4.2 Cosa è necessario per programmare?...........10
1.4.3 Configurazione PC.......................................13
1.4.3.1 Creazione Account Google....................13
1.4.3.2 Configurazione Java..............................15
1.4.3.3 Configurazione Emulatore.....................16
1.4.4 Programmazione in AppInventor.................19
1.4.4.1 Entrare in AppInventor...........................20
1.4.4.2 Area Design............................................21
1.4.4.2.1 Area Palette.....................................22
1.4.4.2.2 Area Viewer....................................24
1.4.4.2.3 Area Components...........................25
1.4.4.2.4 Area Properties...............................27
1.4.4.2.5 Altre Aree Area Design..................29
1.4.4.3 Area Programmazione............................30
1.4.4.3.1 I menù del Block Editor.................33
1.4.4.3.2 L'area di Lavoro.............................33
1.4.4.3.3 Altre Aree.......................................34
1.4.4.3.4 Programmare (esempi)...................35
1.4.4.4 Test e Installazione.................................37
1.4.4.4.1 Installazione Wi-Fi.........................39
1.4.4.4.2 Installazione Usb............................40
1.4.5 Vantaggi e Svantaggi AppInventor.............41
3
2. Le Applicazioni del progetto
2.1 Introduzione................................................42
2.2 Applicazione Note......................................43
2.3 Applicazione Tastiera.................................44
2.4 Applicazione Orchestra..............................45
2.5 Applicazione Quiz......................................47
4
1.Software Musica Facile
1.1 Introduzione
Il software Musica Facile è utilizzato per facilitare l'insegnamento nelle scuole
primarie di primo grado delle nozioni di base e dei fondamentali della musica
mediante l'uso di una serie di Applicazioni.
E' stato sviluppato dai professionisti dell'area contenuti della Magicum S.R.L. grazie
anche a consulenze con esperti che sono specializzati nelle tecniche di
apprendimento dei bambini.
Si presenta un primo approccio alla musica grazie alla semplicità e accessibilità dei
programmi che facilitano l'apprendimento grazie all'uso di Immagini e Suoni specifici
con cui lo studente interagisce.
E' un software, in tendenza con tutto il progetto Inno-School, volto a fornire
un'alternativa adeguata e una giusta collaborazione con i metodi di insegnamento
tradizionale.
5
1.2 Applicazioni
Le applicazioni sviluppate dall'area contenuti del progetto sono App per android, cioè
applicazioni per dispositivi mobili quali Tablet e cellulari Android.
Una app per dispositivi mobili si differenzia dalle tradizionali applicazioni, sia per il
supporto con cui viene usata, sia per la concezione che racchiude in sè.
Si tratta a tutti gli effetti di un software che per struttura informatica è molto simile a
una generica applicazione ma è caratterizzata da una semplificazione ed eliminazione
del superfluo, al fine di ottenere leggerezza, essenzialità e velocità.
Consiste in uno strumento informatico che si installa e si utilizza sul proprio
dispositivo mobile, vale a dire un insieme di istruzioni informatiche progettate con lo
scopo di rendere possibile un servizio o una serie di servizi o strumenti ritenuti utili o
desiderabili dall’utente. Le app, infatti, vanno ad ampliare le capacità native del
dispositivo incluse all'interno del sistema operativo (configurazione di base). Una
volta acquistato il dispositivo, sia esso smartphone o tablet, si ha la possibilità di
personalizzarlo aggiungendo nuove applicazioni a seconda dei propri gusti ed
esigenze.
Android è un sistema operativo Open Source per dispositivi mobili basato su Kernel
Linux.
La caratteristica Free Software in accordo con un tipo di licenza Apache permette di
modificare e distribuire liberamente il codice sorgente.
Android, dispone di una vasta comunità di sviluppatori che realizzano applicazioni
con l'obiettivo di aumentare le funzionalità dei dispositivi. Queste applicazioni sono
scritte soprattutto con una versione modificata del linguaggio di programmazione
Java.
6
1.3 Programmazione Java e Visuale
Un'applicazione Android si costruisce utilizzando il linguaggio Java.
Java è un linguaggio di programmazione ad Oggetti.
La programmazione a oggetti(OOP object oriented programming)
è un tipo di programmazione diverso da quelli procedurali e che permette di gestire le
informazioni e i dati mediante la definizione di Oggetti e Classi.
La definizione di Oggetti e Classi facilita la gestione delle informazioni, nonché
fornisce una buona e facile rappresentazione di oggetti della realtà e in più aumenta la
modularità e il riutilizzo del codice.
Una classe definisce un tipo di Dato e permette la creazione di oggetti definiti
secondo le caratteristiche della data classe.
Una classe è costituita da attributi (cioè variabili e costanti della classe) e metodi
(cioè procedure e funzioni che operano su questi attributi).
Un oggetto è una istanza di una classe. Esso è dotato di tutti gli attributi e i metodi
definiti dalla classe, ed agisce come un fornitore di metodi che il codice può attivare e
eseguire su richiesta.
La programmazione a Oggetti ha tre proprietà specifiche:
L'incapsulamento consiste nella separazione della cosiddetta interfaccia di una classe
dalla corrispondente implementazione.
L'ereditarietà permette essenzialmente di definire delle classi a partire da altre già
definite. Il polimorfismo permette di scrivere una parte di programma che può
servirsi di oggetti di classi diverse, ma dotati di una stessa interfaccia comune; a
tempo di esecuzione, quel client attiverà comportamenti diversi senza conoscere a
priori il tipo specifico dell'oggetto che gli viene passato.
Grazie a queste caratteristiche è possibile sfruttare al massimo le potenzialità della
programmazione a oggetti.
La principale causa della nascita di Java fu quella di creare un linguaggio di
programmazione che poteva essere un portable language e cioè funzionare
indipendentemente dal sistema hardware della macchina su cui è eseguito il codice.
I programmi scritti in linguaggio Java, dopo una fase iniziale di compilazione, con
ottenimento del cosiddetto bytecode, sono destinati all'esecuzione sulla piattaforma
Java attraverso una fase di interpretazione (per questo motivo il linguaggio è detto
anche semi-interpretato) ad opera di una Virtual Machine e, a tempo di esecuzione,
avranno accesso alle API della libreria Standard.
Per creare applicazioni Android è quindi possibile utilizzare il linguaggio Java,
tramite l'installazione di un ambiente di sviluppo come eclipse.
Ma esiste anche un'alternativa valida alla solita programmazione ad oggetti.
Per costruire le App Android esiste anche un sistema di programmazione visuale (o a
blocchi) . Questo sistema è AppInventor.
Un linguaggio di Programmazione Visuale (V.P.L. Visual Programming Language) è
7
un linguaggio che consente la programmazione tramite la manipolazione grafica degli
elementi e non tramite sintassi scritta.
I vantaggi di usare un V.P.L sono incredibili, oltre alla facilità con cui imparare a
usarlo, si può controllare il programma e vedere già il risultato finale in fase di
Debug, inoltre la programmazione parallela diventa quasi istintiva e automatica.
8
1.4 AppInventor
1.4.1 Introduzione
Le applicazioni da costruire saranno fatte grazie all’uso del sistema Android di
programmazione visuale AppInventor.
AppInventor è un applicazione fornita originalmente da Google e ora mantenuta dal
MIT (Massachusetts Institute of Technology).
Il progetto, reso disponibile a tutti anche se in versione Beta, ti permette di creare la
tua App Personale senza scrivere una sola riga di codice.
Il vantaggio principale di questo progetto è rendere la programmazione familiare e
disponibile a tutti e di permettere di creare l’App che ti serve in base alle tue
personali esigenze.
La scelta di questo programma per le nostre applicazioni è soprattutto derivata dalla
sua semplicità e velocità di programmazione e perché, essendo un sistema a
programmazione visuale, è permesso vedere già dall’inizio il risultato finale.
Quest’ultima caratteristica è fondamentale nell’ambito di Applicazioni per ELearning in cui osservare costantemente ciò che andranno a visualizzare i bambini è
vitale.
Questo sistema è stato scelto anche per facilitare l’approccio con le Applicazioni
dagli insegnanti, che reindirizzati verso un modo semplice di vedere la
programmazione possono creare le loro Applicazioni e/o revisionare quelle esistenti.
Per questo sarà fornito anche un tutorial.
Inoltre è derivato anche da una sperimentazione della nostra Società che vuole vedere
se il progetto AppInventor può essere utilizzato su larga scala.
9
1.4.2
Cos'è necessario per programmare con AppInventor
Per iniziare a Programmare con AppInventor è necessario disporre di un personal
computer desktop o notebook (portatile) che siano collegati a Internet e un account
Google.
L'account di Google, illustrato nella figura sotto, non è altro che un indirizzo Email di
Google.
10
Sistemi operativi utilizzabili.
• Mac OS X 10.5 o 10.6 o successivi
• Linux Ubuntu 8 o successivi oppure Linux Debian 5 o successivi;
• Windows XP, Vista, 7, 8
Browser utilizzabili
• Mozilla Firefox 4 o superiore
• Intenet Explorer 7 o successivo
• Safari 5.1 o successivo
• Google Chrome 4 o superiore
Il browser consigliato è Google Chrome.
La connessione ad internet deve essere sempre attiva, perchè AppInventor funziona,
per adesso, solamente Online.
Nel computer c'è l'obbligo di avere Java istallato.
E' consigliata la versione 6 di Java perchè lavora meglio in sintonia con AppInventor,
ma van bene anche versioni successive.
E' utile avere un Tablet, o un telefono cellulare con sistema operativo Android per
testare le applicazioni, ma in alternativa si possono testare anche grazie ad un
emulatore.
Logo di Java
Logo di Google
Chrome
11
Esempio di Tablet e Cellulare per usare le applicazioni
Esempio di Emulatore Android per PC
12
1.4.3 Configurare il PC
In questo paragrafo verrà spiegato come configurare il Pc per iniziare ad usare
AppInventor.
1.4.3.1 Creazione Account Google
Per utilizzare AppInventor, come detto nel paragrafo precedente, bisogna avere una
serie di programmi installati nel PC.
Procediamo con la sua configurazione per ottenere i programmi necessari.
Per prima cosa verificare la connessione ad internet e poi procedere con la
creazione di un Account Google.
Per creare un account google basta andare nella pagina iniziale
www.google.it e cliccare sulla voce Gmail.
Cliccando su questa voce si aprirà la schermata di Gmail dove se si è già registrati si
13
può accedere, e se non si è registrati si può creare il prorpio account Google.
Completata la registrazione si può iniziare ad utilizzare AppInventor sulla casella di
posta appena creata.
14
1.4.3.2 Configurazione Java
Java dovrebbe già essere installato sul computer, ma si deve sempre controllare se la
versione installata è adeguata all'uso che si vuole fare. Per fare ciò basta andare sul
sito ufficiale di Java .
http://www.java.com/it/download/
Se la versione è troppo vecchia verrà visualizzato un messaggio che dirà che la
versione non è adeguata e di scaricare quella nuova facendo un Update.
Pagina per scaricare Java
15
1.4.3.3 Configurazione emulatore
Per testare le applicazioni in AppInventor è utile avere un tablet
In alternativa si può sempre usare un emulatore.
Un emulatore è un componente che replica le funzioni di un determinato sistema su
un secondo sistema differente dal primo.
Per installare un emulatore dell’ambiente android si possono prendere diverse strade
a seconda del sistema su cui installarlo.
Emulatore con Windows
Per avere l’emulatore in Windows è necessario scaricare il set dei comandi di
AppInventor al seguente indirizzo web.
http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.
exe
Eseguito il download cercare nella cartella il file Setup Installer e avviare
l’installazione.
Di solito App Inventor è in grado di individuare il software installato per proprio
16
conto.
Se è chiesta la posizione del software, il percorso da inserire dovrebbe essere:
C:\Program Files\Appinventor\commands-for-Appinventor
Conviene comunque prenderne nota quando, durante l’installazione, viene chiesto se
cambiare la cartella predefinita. In quel momento, nella stessa finestra, è possibile
leggere qual è.
Emulatore con Mac
Per avere l’emulatore con mac scaricare il programma di installazione all’indirizzo.
http://dl.google.com/appinventor/installers/mac/AppInventor_Setup_v_1.1.dmg
Fare doppio clic su AppInventorSetup.pkg per avviare il programma di installazione.
Come per la versione di Windows AppInventor è in grado di individuare il software
per proprio conto.
Se è richiesta la posizione del software trovare il software nel Pc e inserire il percorso
nella richiesta.
Emulatore con Linux
Per installare l’emulatore con Linux se si ha un sistema come Debian o Ubuntu che
permette di installare i pacchetti Debian scaricare il programma di installazione
AppInventor per Debian.
17
Si tratta del file AppInventor-setup_1.1_all.deb.
Se invece non può installare direttamente i pacchetti si passa alla cartella dove è stato
messo il file scaricato e si esegue con il comando sudo dpkg - install-AppInventor
setup_1.1_all.deb.
Per le altre distribuzioni Gnu/Linux:
Scaricare il file di installazione di installazione AppInventor tar.
http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1.tar.gz
(circa 86 megabyte). Si tratta di un file tar compresso con gzip.
Installare i file utilizzando un metodo appropriato per il sistema operativo.
È necessario estrarre solo la directory appinventor-setup_1.1/appinventor, che
necessita di nome di percorso completi /usr/google/ AppInventor .
Se verrà installato correttamente sarà stato creato il file
/usr/google/appinventor/commands-for-Appinventor/adb.
18
1.4.4 Programmazione
in AppInventor
La programmazione in AppInventor, come già detto, è di tipo visuale, cioè che
consente la programmazione tramite la manipolazione grafica degli elementi e non
tramite sintassi scritta.
Per questo sono presenti due procedure principali:
− Disegnare Le applicazioni
− Programmare
Per disegnare le applicazioni si intende il concetto vero e propio di disegnare
l'applicazione desiderata e crearla grazie ai vari oggetti presenti nell'ambiente di
programmazione.
Per Programmare invece si intende il concetto di legare questi oggetti ad altri oggetti
e/o ad azioni specifiche senza dover scrivere una sola riga di codice.
Infine, dopo aver programmato. Si devono testare le applicazioni e scaricarle sul
Tablet.
19
1.4.4.1 Entrare in AppInventor
Dopo aver configurato il Pc per entrare in AppInventor basta andare al sito del MIT
http://beta.appinventor.mit.edu
Si richeiderà di accedere all'Account Google e dopo l'accesso si aprirà la pagina
iniziale di AppInventor.
La prima volta verrà chiarito che:
L'applicazione MIT AppInventor Experimental utilizza un account Google per
l’accesso.
Che Google non è affiliata ai contenuti di MIT AppInventor Experimental né con suoi
proprietari.
Con l’accesso, Google condividerà l’indirizzo e-mail con MIT AppInventor
Experimental ma non la password o altri dati personali.
Fare click sul pulsante Permetti
Si avrà accesso alla pagina web: http://beta.appinventor.mit.edu/ dove iniziare a
programmare.
In questa pagina ci sono tutti I progetti già svolti e cliccando su New si può aprire un
altro progetto, il tasto delete serve per cancellare I progetti già creati e download per
scaricarli sul computer, infine il tasto More action abilita altre azioni tra cui quella
che permette di caricare sul proprio ambiente di lavoro progetti di terze parti.
20
1.4.4.2 Area Design
L'area di design è l'area in cui si svolge il primo processo di sviluppo
dell'applicazione e cioè quello di disegnare l'applicazione.
L'area è divisa principalmente in 4 aree:
Palette
21
Viewer
Components
Properties
1.4.4.2.1 Area Palette
Palette è il titolo del menù per i contenitori dei componenti che saranno usati nel
realizzare i progetti.
Le voci dei contenitori (cassetti degli attrezzi) sono: Basic, Media, Animation, Social,
Sensor, Screen Arrangement, LEGO MINDSTORMS, Other Stuff.
Facendo click su ognuna di queste voci, questa si espande, mostrando una serie di
voci secondarie subito al di sotto.
Ogni voce secondaria è il nome di un componente già preconfezionato e pre-disposto
ad essere inserito nel progetto, trascinandolo da Palette in Viewer.
Una volta inserito, può essergli cambiato l’aspetto e assegnati dei comporta-menti.
In questo esempio, all'interno di Basic, troviamo Button (Pulsante), Label (Etichetta)
eccetera.
Ogni componente è un modello dal quale è possibile generare una quantità a piacere
di prodotti dello stesso tipo (istanze).
22
Un componente può essere trascinato da Palette in Viewer una quantità di volte a
piacere, il sistema creerà sempre una nuova icona (istanza).
Per ciascun componente, una volta inserito nel progetto è possibile assegnare aspetto
grafico autonomo e comportamenti opportuni.
Probabilmente in futuro altri oggetti si aggiungeranno all’elenco, rendendo sempre
più avvincente questo fantastico software.
23
1.4.4.2.2 Area Viewer
La finestra Viewer posta nella parte centrale della pagina, simula lo smartphone (non
è l'Emulatore).
Mostra, sommariamente, il display del cellulare durante l’editing.
Qui andranno inseriti i componenti contenuti all'interno delle Palette.
I componenti devono essere inseriti nel progetto trascinandoli dalle Palette e
posizionandoli, nell’area idonea, nel punto desi-derato.
L’area è il rettangolo sotto la scritta screen1.
Potranno comunque essere spostati, in seguito, senza problemi.
I componenti sotto la voce Screen Arrangement della finestra Palette, aiutano a
posizionare gli altri nel modo migliore.
Ad ogni componente potrà essere dato forma e colore desidera-to agendo sul pannello
Propeties, descritto in seguito.
Nella parte inferiore della finestra Viewer andranno a disporsi, in modo automatico,
gli oggetti non visibili.
Fra questi, i più utilizzati sono, Clock (orologio), Sound (suono) e TinyDB per la
scrittura di dati in maniera persistente.
Il testo, Non-visibile components appare quando almeno un componente “non
visibile” è stato inserito.
24
1.4.4.2.3 Area Components
Tutti i componenti che verranno prelevati dalla finestra Palette e inseriti nella finestra
Viewer saranno automaticamente rappresentati qui.
Ad ogni istanza di componente è possibile, e consigliato, cambiare nome.
Assegnare un nome appropriato e descrittivo del suo ruolo nel progetto, lo renderà
facilmente distinguibile dagli altri.
Questo è importante in progetti con molti componenti.
In basso, con il pulsante Rename (Rinominare) possiamo cambiare il nome dei
componenti in modo da ricordare meglio alla loro funzione (ad esempio da "button1"
a "pulsante apre mio elenco").
In Blocks Editor (descritto in seguito) i nomi dei blocchi si adegueranno ed il
software,di solito, continua a funzionare.
Una volta inseriti gli oggetti, facendo click su ciascuno di essi ed evidenziandoli,
comunichiamo al programma che intendiamo vedere o modificare qualche loro
proprietà.
Al click sul componente, il pannello Properties (descritto in seguito) cambia di
25
contenuto rendendo disponibili le opzioni riferibili all’istanza del componente.
Sarà così possibile variare agevolmente l’aspetto grafico ed altre proprietà (se
disponibili).
Al momento, nell’esempio, l'unico componente inserito è Screen1, la prima
schermata del programma.
App Inventor la crea automaticamente all'avvio di un nuovo progetto ed è la prima
finestra che sarà vi-sualizzata all'esecuzione del software.
Con il pulsante Delete (Cancellare) possiamo eliminare i componenti dal progetto.
La loro eliminazione comporta la perdita del codice in Blocks Editor.
Con il pulsante Add (Aggiungere) possiamo caricare, sul server del MIT, dei file
residenti sul PC locale da utilizzare nel progetto.
In genere file mp3, png, jpg, gif i cui nomi si disporranno sotto la scritta Media.
Una volta caricati, a questi file non può essere cambiato nome.
Può però essere fatto il download e possono essere cancellati.
Per fare il download o cancellare una di questo file, fare click sul loro nome, si apre
un sottomenù con le voci: “Download to my computer”, e Delete.
Selezionare la voce opportuna.
26
1.4.4.2.4 Area Properties
Nel pannello Properties vengono mostrate le proprietà dai vari componenti che in
precedenza sono stati trascinate da Palette in Viewer e quindi risultate visibili in
Components.
A ogni istanza possono essere cambiati colore, forma ecc.
Le proprietà di ogni istanza di componente ha, con poche eccezioni, un corrispettivo
nella finestra Blocks Editor.
Questo permette di variarle durante l’esecuzione del software.
Nell'esempio, a lato sono visibili le proprietà del componente Button (pulsante).
•BackgroundColor colore di fondo.
27
Facendo click sul quadrato nero si apre una tavolozza dalla quale scegliere un colore
diverso.
•Enabled, il componente è abilitato
•FontBold (caratteri del testo in grassetto)
•FontItalic (caretteri visualizzati in Italic.)
•FontSize (dimensione dei caratteri
•FontTipeface (spaziatura)
•Image (immagine)
Facendo click si apre una tendina con pulsante Add che per-mette di fare upload
d'immagini associandole al progetto.
Le immagini devono essere state caricate sul server del MIT come descritto per la
finestra Components.
•Shape (forma), da qui è possibile modificare gli angoli del componente.
•Text (testo) Il testo che appare sul pulsante.
Nel caso ci sia anche un’immagine, il testo va in sovrapposizione.
•TextAlignement (allineamento del testo)
•TextColor, colore del testo.
Facendo click sul quadrato nero si apre una tavolozza dalla quale scegliere un colore
diverso.
•Visible, il Button è visibile
•Width (larghezza)
•Height (altezza).
28
1.4.4.2.5 Altre Opzioni dell'Area Design
Di seguito sono visualizzate le altre operazioni possibili nell'area di Design per
disegnare l'applicazione:
29
1.4.4.3 Area Programmazione
Disegnata la nostra applicazione bisogna iniziare a programmare in senso vero e
proprio e cioè assegnare ad ogni componente dell’area design un’azione specifica o
collegarlo ad altri componenti.
Il concetto è molto simile al concetto della programmazione ad oggetti, visto che ogni
componente può essere considerato come un oggetto a sé da collegare ad azioni o ad
altri oggetti.
L’area per programmare è l’area di lavoro block editor.
L’area è accessibile dall’area design cliccando sul bottone Open the Block Editor
Dopo premuto il pulsante, si aprirà una finestra che farà di scaricare il file
AppInventorForAndroidCodeblocks.jnlp
Il file è molto piccolo ed il download avverrà in pochi secondi.
Questa operazione, di scaricare il file, avverrà ogni volta che si desidera aprire il
Blocks editor.
30
Una volta avvenuto il dowload, fare doppio click con il pulsante sinistro del mouse
sul file.
Dopo alcuni secondi apparirà la finestra del Blocks Editor.
Anche il block editor è costituito da due parti:
• I menù con i blocchi
• L’area di lavoro
31
1.4.4.3.1 I menù del Block Editor
L’area menù è l’area a sinistra è l’area in cui ci sono tutti i blocchi.
È costituita da tre voci:
Built in: in cui ci sono i blocchi precostituiti del sistema e che sono comuni a tutti i
programmi AppInventor.
Ci sono i blocchi di definizione (definition) che permettono di definire nuove
Variabili, i blocchi di testo che permettono tutte le operazioni riguardanti le stringhe,
i blocchi di lista (lists) in cui ci sono gli operatori per la manipolazione di liste, i
blocchi matematici (Math) con operazioni e numeri, blocchi di logica e control con
logica e controlli (selezione, iterazione, sequenza), e infine i blocchi colori che
permettono una personalizzazione a colori del programma (ad esempio se si vuole
cambiare colore ad un immagine dopo un azione).
My Blocks: in cui ci sono i blocchi della mia applicazione, e cioè tutti i miei
componenti, i bottoni, le immagini ecc.
A seconda del componente ci sono blocchi specifici e azioni specifiche.
In seguito negli esempio di programmazione verranno
visti alcuni dei blocchi più importanti.
32
Advanced: in cui ci sono blocchi avanzati, In questo menù ci sono i componenti
inseriti nella finestra Components della pagina Design, uno per ciascun tipo con l’uso
di questi blocchi è possibile fare un riferimento a un componente tramite una
variabile argomento, e manipolare in modo dinamico.
1.4.4.3.2 L’area di lavoro
L’area centrale in verde è invece l’area di lavoro, dove verranno visualizzati tutti i
blocchi scelti con la possibilità di collegarli tra loro.
All’inizio è un area completamente vuota, ma col tempo verrà riempita da tutti i
blocchi per programmare.
33
1.4.4.3.3 Altre aree (opzioni del Block Editor)
Nel block editor ci sono anche altre aree, più che altro bottoni e opzioni che sono
spiegati nella seguente tabella:
34
1.4.4.3.4 Programmare (Esempi)
Per programmare si devono trascinare i blocchi dai menù sull’area di lavoro e
incastrarli tra loro, come se fosse un Puzzle.
Dopo essere incastrati AppInventor scrive in sottofondo il codice java che farà
funzionare l’applicazione.
In ogni blocco vi sono presenti parole che fanno capire l’azione che fa quel blocco, e
ogni blocco a seconda del tipo di azione che deve fare è sagomato in modo differente
per permettere agli altri blocchi di essere incastrati fra di loro.
Ad esempio un blocco che definisce un processo o un azione è sagomato in modo da
poter incastrare altri pezzi in cui sono definite le azioni stesse.
Questa sagomatura permette l’impossibilità di sbagliare il processo e mettere parti
mancanti di codice.
Ogni blocco se Aperto deve essere anche obbligatoriamente chiuso.
Per ogni serie di istruzioni, quindi, si vengono a creare tanti piccoli ‘Puzzle’.
All’inizio magari risulterà difficile programmare e capire cosa facciano tutti i blocchi,
ma con una certa esperienza si può benissimo imparare e le operazioni saranno
semplificate al massimo rispetto alle stesse operazioni che bisogna seguire nella
programmazione con linguaggi in cui è necessario scrivere tutto il codice.
Un esempio basilare è quello di un Bottone che esegua un azione quando è cliccato:
Come una specie di Linguaggio di 4° generazione vengono specificate le azioni da
eseguire in un linguaggio molto vicino al linguaggio umano.
Nell’immagine sopra sono visualizzati i blocchi separati: il blocco verde (When
Button1.click.do) è il blocco in cui è specificato l’evento: ‘quando il bottone 1 viene
cliccato allora..’ , il blocco blu ‘set Button1.textColor to’ è il blocco che dice di
settare il colore del testo, e il blocco rosso ‘Color Red’ è il blocco in cui si dice il
colore rosso.
Ora uniamo tutte le informazioni: ‘Quando il bottone 1 viene cliccato allora setta il
colore del bottone 1 in colore rosso’.
35
Deciso il modo di unire le informazioni si devono unire anche nell’area di lavoro del
Block Editor incastrando i pezzi tra di loro:
Come si può notare tutti i blocchi che prima erano aperti, ora sono chiusi.
In questo modo è molto semplice imparare a programmare, visto che su ogni blocco
c’è scritta anche l’azione che esegue o come è definita.
36
1.4.4.4 Test e installazione
Finita la programmazione dell'applicazione si passa al test.
Per eseguire il test dell'applicazione si può usare benissimo l'emulatore, oppure
saltare la parte dell'emulatore e inviare il file apk con il programma in Java al tablet,
installare l'applicazione e vedere se funziona o meno.
E' consigliabile comunque far partire prima l'emulatore.
Come detto prima nella parte 1.4.4.3.3 (altre aree del Block Editor) per far partire
l'emulatore c'è un pulsante apposito (New Emulator).
Dopo averci cliccato sopra dopo alcuni secondi partirà l'emulatore.
37
Con l'emulatore pronto ora è possibile connettere l'applicazione.
Col pulsante Connecto to Device è possibile connettersi ad un dispositivo esterno che
sia un tablet, un cellulare o un emulatore.
In questo caso apparirà un menù di scelta dalla quale bisognerà scegliere l'emulatore.
L'applicazione appena scaricata partirà dopo pochi secondi e sarà possibile effettuare
il test.
Dopo che l'applicazione è stata testata ed è funzionante occorre installarla sul tablet o
sullo smartphone.
Esistono due modi principali:
• Installazione via Wi-Fi
• Installazione USB
38
1.4.4.4.1 Installazione Wi-Fi
Per l'installazione via Wi-Fi si deve semplicemente andare nella finestra design
sull'opzione Package for phone, aperto il menù poi cliccare sull'opzione Download to
connected phone.
Dopo pochi secondi l'applicazione sarà installata sul dispositivo esterno.
39
1.4.4.4.2 Installazione USB
Per l'installazione via cavetto Usb occorre seguire tre step:
• Fare il download dell'applicazione sul computer
• Trasferire il file apk dal computer allo smartphone
• Installare l'app sullo smartphone
Per fare il downoload dell'applicazione sul computer si deve andare ancore nella
finestra di design sul'opzione Package for phone, ma stavolta cliccare Downoload to
this Computer.
Verrà scaricato un file Apk sul computer col nome del progetto dell'applicazione.
Collegato lo smartphone o il tablet con il cavetto usb basterà trasferire il file dal
computer alla scheda SD montata nel dispositivo esterno.
Una volta trasferita sullo smartphone bisogna andare a trovare l'icona del file e
lanciare l'installazione.
40
1.4.5 Vantaggi e Svantaggi di AppInventor
L'idea di base è davvero innovativa, AppInventor nasce con lo scopo di far siluppare
applicazioni anche a chi è poco competente in materia.
I vantaggi sono fondamentali già dal punto di partenza quindi, in linea col nostro
progetto questo strumento è stato scelto proprio per questa caratteristica.
Le applicazioni sviluppate da me per l'ambito musicale possono benissimo essere
modificate a piacimento dagli insegnanti e gli stessi insegnanti possono farne di
nuove grazie a questo magnifico strumento.
L'interfaccia è abbastanza intuitiva ed è difficile fare di meglio con altri VPL.
Inoltre è una web application e un ambiente di sviluppo sul web è accessibile da
qualsiasi postazione immediatamente e facilmente.
Il fatto di non dover scrivere una sola riga di codice è un vantaggio per chi non è
competente, ma è anche un grande svantaggio perchè lascia ad AppInventor la libertà
di gestire il codice soprattutto con le risorse come vuole lui.
Inoltre se non sono previste certe operazioni con i blocchi è impossibile andare avanti
nel progetto senza adeguarsi all'ambiente di sviluppo.
Per esempio nell'area Design c'è una gamma di colori davvero limitata, se si volesse
usare un colore diverso non si potrebbe.
Un altro grande limite è quello che c'è un massimo di 5MB per progetto, quindi è
impossibile creare applicazioni con molti Media.
Alla fine AppInventor è un linguaggio innovativo con i suoi limiti, ma che si possono
migliorare, visto che ancora il progetto è in fase Beta, migliorato e ottimizzato
potrebbe essere una rivoluzione per la programmazione.
41
2. Le Applicazioni del progetto
2.1 Introduzione
Presentata una panoramica globale del progetto e del software Musica Facile, con le
informazioni sulla programazione visuale, sulle applicazioni, e soprattutto con il
tutorial generale di AppInventor, nel capitolo 2 verranno presentate le Applicazioni
del progetto.
Le applicazioni del progetto musica facile sono 4:
• L'applicazione Note
• L'applicazione Tastiera
• L'applicazione Orchestra
• L'applicazione quiz
Ogni applicazione presenta un contenuto formativo fondamentale per
l'apprendimento dei bambini.
Il progetto era partito con l'idea di sviluppare un applicazione riguardante Giuseppe
Verdi in onore del Duecentenario dalla nascita, ma poi, visto che il target delle
applicazioni era quello di bambini di prima e seconda elementare, che si supponga
non abbiano i requisiti fondamentali, si è scelto di partire con le basi della musica.
42
2.2 Applicazione Note
L'applicazione Note è la prima che è stata sviluppata perchè la prima cosa da
imparare nella musica sono le note musicali.
L'applicazione associa all'immagine della nota il suo suono specifico.
Si è scelto di dare i colori alle note per facilitare l'apprendimento associando un
colore specifico ad ogni nota per fare capire le differenze, visto che magari per un
bambino è difficile notare la posizione diversa nel pentagramma già a prima vista.
Nell'area design sono stati disposti 7 bottoni ognuno con un immagine specifica con
la nota colorata e 7 componenti non visibili (Player) con associato il suono della nota
in formato mp3.
Nel Block Editor associato all'evento del click sul bottone numero X è associato il
blocco che fa partire il Player X più tutti i blocchi che per stoppare gli altri Player.
43
2.3 Applicazione Tastiera
L'applicazione tastiera è un applicazione che simula una piccola tastiera di un ottava,
mentre la prima applicazione insegnava ad associare la nota nel pentagramma al
suono, questa seconda applicazione educa il bambino ad associare la posizione nella
tastiera alla nota imparata prima.
Lo sviluppo dell'applicazione è pressochè identico a quello dell'applicazione note,
con ovviamente immagini diverse.
44
2.4 Applicazione Orchestra
L'applicazione orchestra è un'applicazione che insegna le diverse parti di un orchestra
e i vari strumenti.
E' un applicazione che era partita anche con l'idea di mettere un pezzo musicale per
ogni strumento presentato, ma, visto che, come detto nei limiti di AppInventor, il
massimo dei media per un progetto è di 5 MB, inserire un componente Player con
tutti i suoni per ogni strumento di un orchestra è stato impossibile.
Comunque l'applicazione anche senza la possibilità di sentire il suono degli
strumenti, presenta bene tutte le parti dell'orchestra e i vari strumenti.
L'applicazione è sviluppata su più screen in visuale Landscape tutti all'interno di un
unico progetto.
Il primo screen ha un immagine dell'orchestra al completo con la sua divisione con
diversi colori, poi sotto all'immagine una serie di bottoni con scritte le parti
dell'orchestra e colorati nello stesso modo dell'immagine principale.
I Bottoni sono collegati con il Block Editor agli altri Screen.
45
Quando premo sul bottone con scritto Legni per esempio si aprirà lo screen con gli
strumenti dei legni.
Gli altri screen presentano tutti gli strumenti di quella famiglia di strumenti
dell'orchestra.
Per esempio vediamo lo screen della famiglia degli strumenti a corda:
gli screen sono scrollable nell'immagine si vedono solo due dei 4 strumenti che ci
sono, nel tablet si può scrollare e visaulizzare tutti gl istrumenti.
Inoltre è presentata un area in cui ci sono i numeri di componenti per ogni strumento
all'interno dell'orchestra e il pulsante per tornare allo screen iniziale.
46
2.5
Applicazione Quiz
L'ultima applicazione sviluppata è l'applicazione Quiz. Finito l'apprendimento i
bambini possono effettuare un Quiz per verificare le conoscenze acquisite.
Il quiz è formato da un immagine di una nota sul pentagramma a cui dare il nome
nello spazio richiesto, inviata la risposta si aprirà un' altro screen con scritto se la
risposta è esatta o errata.
47
L'immagine della nota viene creata a random fra le 7 note grazie all'uso del
componente Clock che sfrutta l'orologio del sistema e nel block editor permette di
dare un numero in un intervallo.
A questo numero verrà associata l'immagine, l'intervallo scelto sarà ovviamente da 1
a 7.
Per dare la risposta bisogna inserire una stringa nel TextBox in maiuscolo.
Per fare il controllo della risposta occorre verificare che la stringa in input del
textBox sia uguale all'immagine associata, percui a parte il controllo di verifica tra il
textbox e una variabile, bisogna anche fare una serie di if per mettere nella variabile
di controllo il nome della nota a seconda del numero random associato.
Al click del bottone “Invia Risposta” verrà eseguito il controllo, se il test è positivo,
grazie ai blocchi usati anche nell'applicazione dell'orchestra che permettono di
cambiare screen, si verrà indirizzati allo screen 3 con l'immagine della risposta esatta,
se invece il test è negativo lo screen che si aprirà sarà lo screen 2 con l'immagine
della risposta errata.
E' un quiz molto utile ai bambini per imparare, anche sbagliando.
48
49