Nel corso di questa lezione, ci dedicheremo alla realizzazione della nostra prima app con MIT App Inventor. Si tratta di una app molto semplice che ha lo scopo di introdurre il lettore alle potenzialità di questo ambiente di sviluppo. Rimandiamo, quindi, la teoria alle prossime lezioni e facciamo un tuffo nella pratica. Accediamo dunque per prima cosa alla schermata iniziale del nostro ambiente di sviluppo.
Il nostro obiettivo sarà realizzare una app in grado di riprodurre vocalmente un messaggio predefinito, al clic di un pulsante da parte dell’utente. Prenderemo in questo modo confidenza sia con elementi di base, come la realizzazione di un pulsante che con funzionalità più complesse, come la riproduzione vocale. Non solo: in questo modo ci sarà possibile utilizzare sia componenti visibili (Button) che non visibili (TextToSpeech). Non a caso, gli stessi autori di MIT App Inventor segnalano proprio questa app come una delle più indicate per un primo approccio.
Creiamo quindi un nuovo progetto e scegliamo, per chiarezza, un nome che rappresenti le funzionalità dell’app: ad esempio TalkToMe, ovvero "parlami" (v. figura in basso). La creazione di questo nuovo progetto ci offre l’occasione di far presente che è opportuno evitare spazi vuoti all’interno dei nomi dei progetti MIT App Inventor.
Connettiamo ora l’emulatore al nostro progetto, cliccando sull’opzione Emulator del menu Connect. Qualora aiStarter non fosse stato avviato in modo automatico, potrebbe esserci richiesto di provvedere manualmente (come visto nelle scorse lezioni, tramite un doppio clic sul collegamento ad aiStarter situato sul nostro desktop).
Una volta completata la connessione all’emulatore verrà aperta automaticamente un’altra finestra, che rappresenta lo schermo di uno smarpthone: utilizzeremo proprio tale finestra per testare il comportamento della nostra app.
Inseriamo i componenti all’interno della nostra App
Inseriamo ora le componenti di cui abbiamo bisogno:
- un pulsante (visibile)
- un TextToSpeech (non visibile)
Cominciamo dal pulsante: dalla scheda Designer della schermata principale, che stiamo visualizzando, trasciniamo Button (menu a sinistra) sul pannello Viewer (al centro), come indicato nella figura in basso.
Sullo schermo apparirà un pulsante, con la scritta TextforButton1. Si tratta del valore di default per il testo del pulsante.
Sostituiamo tale scritta con TalkToMe, selezionando l’elemento Button appena aggiunto nel pannello Viewer e modificando opportunamente il campo Text nel menu Properties (a destra), evidenziato nella figura sottostante.
Trasciniamo ora nel pannello Viewer anche il componente TextToSpeech, individuandolo all’interno del gruppo Media nel pannello Palette (v. figura in basso).
Definiamo il comportamento della nostra App
Ora non resta che definire il comportamento della nostra app in risposta a eventi: ovvero specificarne i behavior. Nel nostro caso: riprodurre un messaggio vocale a seguito del clic sul pulsante TalkToMe.
Passiamo quindi alla scheda Blocks della finestra principale. Selezioniamo la componente Button1, all’interno del pannello Blocks (a sinistra). Selezioniamo poi e trasciniamo verso destra, sempre all’interno del pannello Viewer, il primo elemento tra quelli comparsi, ovvero When Button1.Click do (v. figura sottostante).
Trasciniamo poi, dopo aver cliccato su TextToSpeech all’interno del pannello Blocks (a sinistra), l’elemento CallTextToSpeech1.speak message sul pannello Viewer, in modo che la parola "call" segua la parola do dell’elemento When Button1.Click do precedentemente trascinato.
Il significato di tale operazione è creare un collegamento logico tra le due componenti ovvero far sì che, ogni volta che viene cliccato il pulsante, venga generato un messaggio vocale. Resta solo da definire il messaggio. A tal fine, trascineremo il primo elemento dell’elenco Text dal pannello Blocks nel pannello Viewer, in modo da collegarlo con CallTextToSpeech1.speak message, come mostrato nella figura in basso.
Non resta ora che effettuare un doppio clic sull’ultimo elemento inserito, e digitare poi il messaggio che si desidera ascoltare. La lingua di default è l’inglese: possiamo scegliere, ad esempio "Great job" (ovvero "ottimo lavoro"), per festeggiare la buona riuscita della nostra prima app creata con MIT App Inventor. Possiamo verificarne il corretto funzionamento servendoci della finestra emulatore, ovvero cliccando sul pulsante TalkToMe e ascoltando il messaggio impostato.
Nel corso delle prossime lezioni, decisamente più teoriche, prenderemo in esame vari elementi che possono permetterci di arricchire le nostre app.
