Tutorial 1 - Creare applicazioni Android con MIT App Inventor 2 - Introduzione

Bene, finalmente ci siamo!

Visto che MIT App Inventor 2 è uscito dalla fase alpha ed è entrato in fase beta da un pò di tempo, possiamo cominciare una nuova serie di tutorial che avvicineranno alla programmazione di App Android tramite l'utilizzo di questo software web facile ed intuitivo da usare.

Per chi non lo sapesse, tramite l'utilizzo di App Inventor, è possibile infatti creare in modo semplice e rapido della applicazioni Android anche se si hanno poche conoscenze di programmazione.


MIT App Inventor 2 (o semplicemente "AI") è un tool "cloud based" che permette la realizzazione di app direttamente da interfaccia web.

Vediamo in questo primo tutorial un introduzione generale al tool di sviluppo e la realizzazione di una prima semplice app di test.

Per prima cosa puntiamo il nostro browser (io vi consiglio Chrome) all'indirizzo:

http://appinventor.mit.edu/explore/

E premiamo il pulsante arancione "Create" che si trova in alto a destra nella pagina

Se abbiamo un account Google, effettuiamo l'accesso ora, ricordando che tutti i nostri progetti verranno associati e quindi salvati tramite questo account.

Se non possediamo un account Google, vi consiglio di crearvene uno ora...

Dopo aver fatto la login arriveremo alla schermata dei nostri progetti "Project", se non ne abbiamo mai creato uno sarà ancora vuota ed avremo un messaggio di benvenuto:

Clicchiamo su "New Project..." per creare così il nostro primo progetto, diamogli il nome "TalkToMe" e ricordate che i nomi dei nostri progetti non possono contenere spazi, clicchiamo "ok"

Siamo ora nella schermata chiamata "Designer Editor" o semplicemente "Designer" dove vengono posizionati tutti gli elementi che andranno a comporre la nostra interfaccia utente, quindi tutti gli elementi come pulsanti (button), caselle di testo (textbox), etichette (label) etc verranno scelti e posizionati in questa schermata.

Ci sono anche altri componenti detti "non visibili" che attivano ulteriori funzionalità nella nostra app, un esempio è il componente LocationSensor che fornisce informazioni sulla posizione del nostro dispositivo, ma ce ne sono molti altri che scopriremo un pò alla volta.

La finestra "Designer" si divide in quattro parti:

1) la "Palette" da dove selezioniamo i componenti

2) il "Viewer" che simula la schermata dell'interfaccia utente della nostra app

3) "Components" dove vengono visualizzati tutti i componenti attualmente in uso nella nostra app

4) "Properties" dove vengono visualizzate le proprietà di ogni componente selezionato in "Components"

Vediamo qui sotto la finestra "Designer"

Aggiungiamo ora un pulsante ("Button"), clicchiamo e teniamo premuto sull'elemento "Button" e trasciniamolo nella finestra "Viewer", rilasciamo il click e vedremo apparire il componente nel "Viewer":

Ora possiamo ad esempio connettere il nostro telefono ad App Inventor per vedere in tempo reale la nostra applicazione girare sullo smartphone.

Infatti una delle cose migliori di App Inventor è la possibilità di vedere e testare la nostra app intanto che la stiamo costruendo.

In questa guida lavoreremo con uno smartphone Android vero e proprio, se non ne abbiamo a disposizione uno possiamo usare un emulatore (linkerò qui a parte una guida apposita).

Clicchiamo quindi su "Connect" e poi su "Ai Companion":

Ora dobbiamo installare sul nostro cellulare l'applicazione "MIT AI2 Companion" di cui trovate il link al Play Store qui sotto:

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

Dopo averla installata (assicuratevi che computer e telefono siano sotto la stessa rete wifi in caso contrario l'applicazione vi darà un errore) lanciamo l'app stessa:

Ora vi consiglio di premere il pulsante "scan QR code" ed inquadrare il QR code che vi è uscito dalla finestra del "Designer" in precedenza, in alternativa scrivete il codice che vedete a fianco del QR code (notate che il codice cambia ogni volta che cliccate su "AI Companion")

Dopo pochi secondi vedrete visualizzato nel vostro cellulare l'applicazione che state realizzando! 

Per ora la nostra app ha un solo pulsante, quindi per il momento vedrete solo quello... man mano che si aggiungeranno altri elementi all'applicazione, questi appariranno in tempo reale anche sul nostro smartphone.

Nel pannello "Properties" cambiamo il testo del pulsante, selezioniamo il testo "Text for Button 1" cancelliamo e rimpiazziamo con il testo "Parlami Ora!", notate che anche l'app sul vostro smartphone mostrerà il nuovo testo.

Sempre prendendo e trascinando i componenti, prendiamo dalla palette un componente "Text-To-Speech" (lo trovate sotto "Media"), notate come appaia nei componenti non visibili perchè è un qualcosa che non viene visualizzato nell'interfaccia ma è comunque utilizzabile nella nostra app.

Passiamo ora alla parte 2 del tutorial dove vedremo la parte di programmazione nel "Blocks Editor" ovvero la parte di interfaccia dove si programma il funzionamento vero e proprio delle nostre app

Clicca qui per andare alla seconda parte del tutorial...

Se invece volete vedere il tutto come video di YouTube lo potete fare visionando il mio video qui sotto: