TUTORIAL - INTRODUZIONE AD APP INVENTOR

Tempo di lettura tutorial Tempo di lettura/visione: 10 min

Introduzione

In questo tutorial vedremo come utilizzare App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android, creato da Google e ora di proprietà del MIT di Boston.

In quest tutorial troverai:

Procedura di installazione
Concetti base della programmazione ad oggetti
Descrizione dell’ambiente di sviluppo
Programmazione di una semplice applicazione
Come visualizzare l’applicazione sullo smartphone

Tecnologia:

Pc
Smartphone Android
Connessione Wi-Fi

Primi passi

Prima di poter realizzare la tua prima applicazione, devi:

Collegarti al sito MIT App Inventor 2 (http://ai2.appinventor.mit.edu). Ti chiederà di scegliere un account gmail tramite cui potrai connetterti all’ambiente di sviluppo e creare la tua lista di progetti che verrà aggiornata e salvata ad ogni accesso futuro. Nel caso in cui tu non disponga di un account Gmail, creane uno (puoi seguire la procedura descritta al link https://support.google.com/mail/answer/56256?hl=it). Una volta che hai effettuato il primo accesso, App Inventor ti darà il benvenuto mostrandoti una finestra:

Figura Tutorial TUTORIAL - INTRODUZIONE AD APP INVENTOR

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Il corso gratuito "Collaborare a scuola con il digitale"

Un'area personalizzata con i tuoi contenuti preferiti

Una lezione di prova gratuita per ogni corso online

Dirette ed eventi dedicati agli utenti iscritti

Cliccando su “Set up and connect an Android device”, si aprirà una pagina Web che ti mostrerà le varie modalità per mezzo delle quali potrai visualizzare in real-time ciò che stai programmando nell’ambiente di sviluppo. Per ora non preoccupartene e clicca su “Continue”: l’ambiente di sviluppo è ora pronto per essere utilizzato, ma prima devi configurare anche il tuo cellulare;
Procurati uno smartphone Android su cui scaricare e installare dal Play Store l’applicazione MIT AI2 Companion, assicurandoti che il Pc e lo smartphone siano connessi alla stessa rete Wi-Fi.

Concetti base della programmazione ad oggetti

Il paradigma di programmazione su cui si basa App Inventor 2 è quello della programmazione ad oggetti (Oriented Object Programming, OOP).
Per rendere la successiva fase di programmazione più comprensibile, illustriamone qualche concetto fondamentale:

L’OOP si compone di un insieme più o meno grande di componenti, che chiameremo per l’appunto oggetti, in grado di interagire per mezzo di uno scambio di messaggi;
Ogni oggetto dispone di alcune caratteristiche, che chiameremo attributi, e alcune azioni che è in grado di compiere, che chiameremo metodi.

Es: Ipotizziamo di creare l’oggetto “bambino”. Questo sarà caratterizzato da un nome, un’altezza, un sesso e un’età, che rappresentano le sue proprietà, ovvero i suoi attributi. L'oggetto "bambino" sarà capace di saltare, ridere, correre e disegnare, che rappresentano le azioni che è in grado di compiere, ovvero i suoi metodi. Il bambino inoltre potrà parlare con un altro bambino, potrà salutare un altro bambino, baciare una bambina o qualche altro oggetto: potrà dunque interagire con altri oggetti scambiandosi messaggi.

Descrizione dell’ambiente di sviluppo

Una volta compresi i concetti fondamentali della programmazione ad oggetti, cerchiamo di ritrovarli all’interno dell’ambiente di sviluppo. Abbiamo già visto come installare l’applicazione sullo smartphone e come accedere al software; ripartiamo da quest’ultimo.
Clicca su “Projects”: si aprirà un menù a tendina; ora clicca su “Start new project”.

Il software visualizzerà una finestra dove avrai la possibilità di rinominare il progetto a tuo piacimento. Dopo aver dato la conferma, il nuovo progetto verrà aggiunto alla lista “My projects”, raggiungibile tramite il menù a tendina appena visualizzato, e il software visualizzerà un’interfaccia simile a questa:

La sezione Designer

Essa si compone di due sezioni, selezionabili tramite i bottoni in alto a destra: Designer e Blocks. Mantieniti nella sezione Designer, che verrà selezionata dal software per default.
In questa modalità di programmazione avrai la possibilità di definire l’interfaccia della tua applicazione, il suo design, ovvero come essa appare alla vista dell’utente che ne farà uso.
Questa schermata si compone di cinque parti:

Palette. Divisa per ulteriori sezioni (User Interface, Layout, Media…) questa prima sezione contiene tutte le componenti che possono essere inserite nell’interfaccia: Button, CheckBox, Label, Camera, Sound… che costituiscono gli oggetti, ovvero gli elementi cardine del paradigma OOP, descritto nel paragrafo precedente. Per inserirli all’interno dell’applicazione è sufficiente selezionarli con il tasto sinistro del mouse e trascinarli all’interno della schermata presente nella sezione Viewer. Alcuni di questi oggetti, sebbene trascinati correttamente, non saranno visibili nella schermata e andranno a finire tra i Non-visible components, ad indicare il fatto che essi fanno parte dell’applicazione, ma agiscono “dietro le quinte”: l’utente si accorgerà della loro presenza a causa del verificarsi di qualche evento, ma non potrà osservarli guardando l’interfaccia;
Viewer. Questa sezione contiene un’immagine che riproduce la schermata dello smartphone. Trascinando oggetti dalla Palette alla schermata nella Viewer, potrai farti un’idea di come la tua applicazione stia diventando più complessa e di come verrà riprodotta nello smartphone;
Components. Questa sezione fornisce il riepilogo di tutti gli oggetti inseriti nella Viewer, specificando anche eventuali relazioni di contenimento; un oggetto può ad esempio contenerne un altro. Un esempio di oggetto contenente altri è l’oggetto “Screen1” che rappresenta la stessa schermata; qualsiasi oggetto trascinato al suo interno sarà anche contenuto al suo interno. Ciò è deducibile notando l’indentatura dei nomi degli oggetti elencati uno sotto l’altro nella sezione Components. Cliccando sul nome di uno degli oggetti inseriti, è possibili eliminarlo (Delete) o rinominarlo (Rename).
Media. Questa sezione contiene eventuali file audio o immagine che puoi inserire nell’applicazione, caricandoli da altre sorgenti cliccando su Update File …, per poi utilizzarli in relazione al altri oggetti;
Properties. Quest’ ultima sezione contiene tutte le proprietà e, dunque, tutti gli attributi di ogni oggetto selezionabile su Components. Le proprietà di un oggetto definite in questa sezione Designer conterranno i valori di inizializzazione, ovvero quei valori che assumeranno le proprietà non appena aprirai l’app; questi valori potranno alternativamente essere inizializzati nell’altra sezione Blocks o, definiti qua, potranno essere eventualmente modificati nella sezione Blocks.

La modalità di programmazione Designer ha dunque lo scopo di definire quali oggetti comporranno la tua applicazione, in che modo saranno disposti nell’interfaccia, dandoti l’opportunità di farti un’idea di come essi appariranno nel tuo smartphone, e con che valori saranno inizializzate le loro proprietà.

Terminata questa prima fase, l’applicazione risulterà essere ancora del tutto statica; per poter definire come gli oggetti interagiranno tra loro è necessario passare alla successiva modalità di programmazione, Blocks, che ti permetterà di definire il comportamento della tua applicazione.
Questa nuova modalità di programmazione visualizzerà un secondo spazio di lavoro, simile a questo:

La sezione Blocks

Sulla sinistra, sotto il termine Blocks, è presente un elenco di elementi divisi per categorie, i cui nomi rispecchiano le funzionalità e alle quali sono facilmente riconducibili per mezzo del loro colore: questi elementi implementano componenti predefinite nell’ambiente di sviluppo, che potrai utilizzare in accordo con gli oggetti inseriti nella sezione Designer. Puoi ritrovare questi oggetti sempre sulla sinistra, sotto l’elenco appena descritto.
Cliccando su ogni oggetto si aprirà una finestra che riporterà un elenco di tutto ciò che puoi fare con quel particolare oggetto:

Le componenti gialle implementano degli eventi. Possono essere interpretati come qualcosa che accade e che solitamente gli oggetti in qualche modo “subiscono”. Es: un bottone che viene premuto.
Le componenti verdi si riferiscono alle proprietà degli oggetti. Quelle in verde chiaro ti permettono di accedere al valore di una proprietà, ad es. al testo di un’etichetta, mentre quelle in verde scuro ti permettono di settare una proprietà, ad es. impostare il colore di sfondo di un bottone;
Le componenti viola si riferiscono ai metodi degli oggetti, che vengono richiamati durante l’esecuzione del programma. Nota il termine “call” che compare in testa a queste componenti.

In termini generali un’applicazione è guidata dal seguente flusso: quando un evento accade, un oggetto può restituire il valore di una proprietà, può settare una proprietà ad un certo valore o può compiere un’azione.

Programmazione di una semplice applicazione

L’app che andremo a programmare si compone di una serie di bottoni ed etichette in cascata.
I bottoni sono caratterizzati da un colore di sfondo e da un testo; ogni volta che cliccheremo un bottone, l’etichetta posizionata appena sotto riprodurrà lo stesso colore e testo del bottone relativo. Infine, un bottone finale ci permetterà di resettare tutte le etichette e di ricominciare da capo.
Questa è come si presenterà l’app al termine della fase di Designer:

Come prima cosa trasciniamo un VerticalArrangement dalla sezione Layout alla schermata nella Viewer. L’elemento VerticalArrangement non è del tutto indispensabile per il nostro scopo, ma possiamo comunque inserirlo per entrare più in confidenza con il software. Questo oggetto fa parte della sezione Layout, che significa disposizione: ci permette dunque di definire in che modo vogliamo disporre gli oggetti al suo interno, in verticale in questo caso. Selezionalo dalla sezione Components e poi spostati sulla sezione Properties e imposta le proprietà Height e Width a Fill parent. La sua altezza e la sua larghezza saranno tali da “riempire il genitore”. Ma chi è il genitore? Esattamente l’oggetto che lo contiene, Screen1 in questo caso (nota l’indentatura di questi due oggetti). Il Vertical Arrangement andrà ad occupare tutta la schermata, in altezza e in larghezza;
Trascina un elemento Button, che troverai a sinistra nell’elenco User Interface, all’interno del VerticalArrangement. Selezionalo tra i Components e passa alla sezione Properties. Questo elemento implementa un bottone. Imposta il suo BackgroundColor a green e Width a Fill parent (il suo genitore sarà VerticalArrangement). Cancella la scritta Text for Button1 dalla proprietà Text e al suo posto scrivi “SMETTILA”. Infine imposta TextAlignment a center;
Trascina un elemento Label, che troverai a sinistra nell’elenco User Interface, all’interno del VerticalArrangement al di sotto del bottone appena inserito. Selezionalo tra le Components e passa alla sezione Properties. Questo elemento implementa un’etichetta, ovvero una semplice scritta. Imposta il suo BackgroundColor a None e Width a Fill parent. Cancella il testo Text for Label1 dalla proprietà Text e per ora non scrivere altro. Imposta TextAlignment a center.
Inserisci tanti altri bottoni e etichette quante le parole nella frase “SMETTILA DI COPIARE CIO’ CHE SCRIVO”, tenendo presente che il bottone e l’etichetta per la parola “SMETTILA” sono già state realizzate.
Inserisci un bottone finale nel cui Text scriverai “RESET” e posiziona la scritta al centro del bottone.

La programmazione in modalità Designer è ora terminata. Passiamo alla modalità Blocks.
Al termine di questa fase la Viewer dovrebbe essere così composta.

Seleziona sulla sinistra il bottone Button1 e trascina l’elemento giallo “When Button1. Click” nella Viewer. Questo blocco serve a rilevare l’evento di click da parte dell’utente sul bottone 1;
Seleziona sulla sinistra la label Label1 e trascina l’elemento verde scuro “Set Label1.BackgroundColor to” di fianco al “do” dell’evento precedentemente inserito. Questo permetterà di settare la proprietà di colore di sfondo dell’etichetta;
Seleziona sulla sinistra il bottone Button1 e trascina l’elemento verde chiaro “Button1.BackgroundColor” di fianco all’elemento appena inserito;
Selezione sulla sinistra la label Label1 e trascina l’elemento verde scuro “Set Label1.Text to” all’interno dell’evento giallo, sotto agli elementi verdi già inseriti;
Seleziona sulla sinistra il bottone Button1 e trascina l’elemento verde chiaro “Button1.Text” di fianco all’elemento appena inserito.

La Viewer dovrà contenere qualcosa che assomiglia a questo:

Ripeti gli stessi step visti finora per tutti i restanti bottoni inseriti, facendo attenzione a mettere in relazione i giusti bottoni con le giuste etichette (bottone 1 con etichetta 1, bottone 2 con etichetta 2...), escluso il bottone del reset.

L’applicazione ti sta dicendo che quando cliccherai un bottone (evento When Button1.Click do) l’etichetta sottostante al bottone stesso acquisirà come BackgroundColor il colore di background del bottone soprastante, definito in fase di Designer (set Label1.BackgroundColor to Button1.BackgroundColor) e come testo il testo del bottone, definito anch’esso in fase di designer (set Label1.Text to Button1.Text).

Il programma sta dunque accedendo ai valori contenuti in alcune proprietà di alcuni oggetti e sta settando le proprietà di altri oggetti a quei valori appena letti. Ora rimane da programmare la funzionalità che resetta il colore e il testo di ogni etichetta.

Seleziona sulla sinistra il bottone7, relativo al reset e trascina l’elemento giallo “When button7. Click do” nella Viewer;
Seleziona la label1 a sinistra e trascina l’elemento verde già incontrato “Set Label1.Text to” di fianco al “do”;
Seleziona sulla sinistra il primo elemento che incontri nella sezione Text e trascinalo di fianco al “to” dell’elemento appena inserito;
Ripeti gli ultimi due step per tutti i restanti bottoni, escluso il bottone del reset;
Seleziona la label1 a sinistra e trascina l’elemento verde già incontrato “Set Label1.BackgroundColor to” all’interno dell’evento giallo, sotto gli elementi già inseriti;
Seleziona sulla sinistra il colore bianco che trovi nella sezione Colors e trascinalo di fianco al “to” dell’elemento appena inserito;
Ripeti gli ultimi due step per tutti i restanti bottoni, tranne che per il bottone del reset.

La Viewer avrà ora un ulteriore elemento, simile a questo:

Grazie a questo ultimo evento programmato, ogni volta che cliccherai sul bottone7 relativo alla funzionalità di reset, i testi all’interno delle etichette verranno cancellati, così come il loro colore di sfondo.

Come visualizzare l’applicazione sullo smartphone

A questo punto non rimane altro che testare sullo smartphone l’applicazione appena realizzata. Seleziona la voce Connect che compare in alto sul software e nel menù a tendina AI Companion; questa visualizzerà una finestra dove apparirà un QR code.

Se il software genera un messaggio di errore, potresti aver bisogno di resettare preventivamente la connessione:

Ora prendi il tuo smartphone e apri l’applicazione MIT AI2 Companion e seleziona “scan QR code”. Scannerizza il QR code apparso nel software e attendi il caricamento della tua applicazione. Sei pronto per testarla!

Di seguito riportiamo una dimostrazione:

Ti è piaciuto il tutorial?

Se vuoi maggiori informazioni o una consulenza o se vuoi far parte della famiglia We Turtle scrivi all'indirizzo email: info@weturtle.org

Per restare sempre aggiornato iscriviti alla piattaforma e segui We Turtle e TALENT su Facebook.

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Italia.

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

TUTORIAL - INTRODUZIONE AD APP INVENTOR

In questo tutorial vedremo come utilizzare App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android, creato originariamente da Google e ora di proprietà del MIT di Boston.

In quest tutorial troverai:

Procedura di installazione

Concetti base...

Introduzione

Primi passi

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Concetti base della programmazione ad oggetti

Descrizione dell’ambiente di sviluppo

La sezione Designer

La sezione Blocks

Programmazione di una semplice applicazione

Come visualizzare l’applicazione sullo smartphone

Ti è piaciuto il tutorial?

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

TUTORIAL - INTRODUZIONE AD APP INVENTOR

In questo tutorial vedremo come utilizzare App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android, creato originariamente da Google e ora di proprietà del MIT di Boston.In quest tutorial troverai: Procedura di installazione Concetti base...

Introduzione

Primi passi

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Concetti base della programmazione ad oggetti

Descrizione dell’ambiente di sviluppo

La sezione Designer

La sezione Blocks

Programmazione di una semplice applicazione

Come visualizzare l’applicazione sullo smartphone

Ti è piaciuto il tutorial?

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

AUTORE

AUTORE

Scopri i corsi di formazione di WeTurtle

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio

In questo tutorial vedremo come utilizzare App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android, creato originariamente da Google e ora di proprietà del MIT di Boston.

In quest tutorial troverai:

Procedura di installazione

Concetti base...