MAGICUM S.R.L. Progetto Inno-School

Transcript

1 MAGICUM S.R.L Progetto Inno-School

2 Area Contenuti 1

3 Documentazione Tecnica Software Musica Facile Lorenzo Marino Revisione numero 1.3 2

4 Indice 1.Software Musica Facile 1.1 Introduzione Applicazioni Programmazione Java e Visuale AppInventor Introduzione Cosa è necessario per programmare? Configurazione PC Creazione Account Google Configurazione Java Configurazione Emulatore Programmazione in AppInventor Entrare in AppInventor Area Design Area Palette Area Viewer Area Components Area Properties Altre Aree Area Design Area Programmazione I menù del Block Editor L'area di Lavoro Altre Aree Programmare (esempi) Test e Installazione Installazione Wi-Fi Installazione Usb Vantaggi e Svantaggi AppInventor

5 2. Le Applicazioni del progetto 2.1 Introduzione Applicazione Note Applicazione Tastiera Applicazione Orchestra Applicazione Quiz

6 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

7 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

8 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

9 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

10 1.4 AppInventor 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

11 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 di Google. 10

12 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

13 Esempio di Tablet e Cellulare per usare le applicazioni Esempio di Emulatore Android per PC 12

14 1.4.3 Configurare il PC In questo paragrafo verrà spiegato come configurare il Pc per iniziare ad usare AppInventor 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 e cliccare sulla voce Gmail. Cliccando su questa voce si aprirà la schermata di Gmail dove se si è già registrati si 13

15 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

16 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. 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

17 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. 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

18 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. 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

19 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. (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

20 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

21 Entrare in AppInventor Dopo aver configurato il Pc per entrare in AppInventor basta andare al sito del MIT 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 con MIT AppInventor Experimental ma non la password o altri dati personali. Fare click sul pulsante Permetti Si avrà accesso alla pagina web: 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 Altre Opzioni dell'area Design Di seguito sono visualizzate le altre operazioni possibili nell'area di Design per disegnare l'applicazione: 29

31 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

32 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

33 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

34 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 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

35 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

36 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

37 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

38 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 (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

39 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

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 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

48 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

49 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