TUTORIAL - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

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

Introduzione

In questo tutorial vedremo come realizzare con App Inventor 2, un’applicazione multischermo che sfrutti diverse schermate per visualizzare varie informazioni su un determinato argomento: scorri tra una schermata e l’altra per conoscere la vera storia di Halloween, le sue tradizioni ed altre curiosità.

Nello specifico tratteremo:

Step preliminari
Progettazione dell’interfaccia grafica
Stesura del codice
Possibili sviluppi

Tecnologia:

Pc
App Inventor 2
Smartphone Android con installata l'applicazione MIT AI2 Companion
Rete Wi-Fi

Step preliminari

Per poter realizzare una nuova applicazione devi seguire questi step preliminari:

collegati al sito https://appinventor.mit.edu/;
clicca su Create Apps in alto ed esegui l’accesso tramite un account Gmail;
clicca su My Projects in alto e poi su Start new project per passare ad una finestra dove inserire il nome del tuo progetto;
conferma tramite il bottone OK per passare alla schermata della modalità Designer;
utilizza questa schermata per realizzare la tua interfaccia grafica, trasferendo i componenti dalla Palette alla Viewer.

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

Progettazione dell’interfaccia grafica

Prima di poter passare alla fase di stesura del codice, è indispensabile progettare la GUI (graphical user interface), ovvero l’interfaccia con cui desideri l’utente interagisca durante l’utilizzo dell’applicazione.
Al termine di questa fase, lo Screen1 e lo Screen_Storia avranno un aspetto simile rispettivamente a quello di figura 1 e a quello di figura 2.

Per quanto riguarda lo Screen1, nella modalità Designer, hai bisogno dei seguenti componenti:

un Label, che trovi nella User Interface (rinominalo con Label_Istruzioni, imposta 20 nella proprietà FontSize, imposta Fill Parent nella proprietà Width, scrivi “Clicca sulle icone per scoprire alcune curiosità sulla festa di Halloween” nella proprietà Text, imposta Center nella proprietà TextAlignment);
un HorizontalArrangement, che trovi nella sezione Layout (imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width);
un VerticalArrangement, che trovi nella sezione Layout (trascinalo dentro l’HorizontalArrangement, imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width);
un VerticalArrangement, che trovi nella sezione Layout (trascinalo dentro l’HorizontalArrangement di fianco all’altro VerticalArrangement, imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width);
un Button, che trovi nella sezione User Interface (trascinalo dentro il primo VerticalArrangement, rinominalo Button_Storia, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, inserisci un’immagine nella proprietà Image);
un Button, che trovi nella sezione User Interface (trascinalo dentro il primo VerticalArrangement sotto al Button_Storia, rinominalo Button_Zucche, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, inserisci un’immagine nella proprietà Image);
un Button, che trovi nella sezione User Interface (trascinalo dentro il secondo VerticalArrangement, rinominalo Button_DolcettoScherzetto, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, inserisci un’immagine nella proprietà Image);
un Button, che trovi nella sezione User Interface (trascinalo dentro il secondo VerticalArrangement sotto al Button_DolcettoScherzetto, rinominalo Button_Tradizioni, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, inserisci un’immagine nella proprietà Image).

Figura Tutorial TUTORIAL - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

Figura 1

Per inserire un’icona nella proprietà Image dei componenti Button:

scarica da internet un’immagine inerente ad Halloween (in formato .png);
clicca sul bottone Upload File nella sezione Media, sotto la sezione Components;
clicca sul bottone Sfoglia per aprire l’immagine e conferma tramite il bottone OK;
seleziona l’immagine appena caricata nella proprietà Image dei componente Button.

Per inserire un nuovo schermo:

clicca sul bottone Add Screen in alto;
inserisci un nome al nuovo schermo (in questo caso Screen_Storia) e conferma tramite il bottone OK.

Per quanto riguarda lo Screen_Storia, nella modalità Designer, hai bisogno dei seguenti componenti:

un Label, che trovi nella User Interface (rinominalo con Label_Titolo, imposta 30 nella proprietà FontSize, imposta Fill Parent nella proprietà Width, scrivi “Storia” nella proprietà Text, imposta Center nella proprietà TextAlignment);
un Image, che trovi nella sezione User Interface (rinominalo Image_Storia, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, inserisci un’immagine nella proprietà Picture);
un Label, che trovi nella User Interface (rinominalo con Label_Storia, imposta 18 nella proprietà FontSize, imposta Fill Parent nella proprietà Width, scrivi delle informazioni nella proprietà Text, imposta Center nella proprietà TextAlignment);
un Button, che trovi nella sezione User Interface (rinominalo Button_Indietro, imposta 16 nella proprietà FontSize, scrivi “Torna alla schermata principale” nella proprietà Text, imposta Center nella proprietà TextAlignment).

Figura 2

Stesura del codice

Terminata la progettazione dell’interfaccia, non resta che scrivere il codice per definire il comportamento dei componenti inseriti.
Al termine di questa fase, l’applicazione dovrebbe funzionare nel modo seguente:

nella schermata principale sono presenti vari pulsanti, cliccando sui quali è possibile navigare in schermate secondarie (nel tutorial questa funzionalità è stata implementata solo nel Button_Storia);
in tutte le schermate secondarie si trova un pulsante (Button_Indietro), cliccando sul quale è possibile ritornare alla schermata principale.

Per implementare il passaggio dalla schermata principale ad una schermata secondaria (figura 3):

seleziona lo schermo principale (Screen1) nel menu a tendina in alto e passa alla modalità Blocks, cliccando sul bottone dedicato che trovi in alto a destra della schermata;
trascina nella Viewer il blocco “when Button_Storia.Click”, che trovi tra le funzionalità del componente Button_Storia;
inserisci di fianco al do il blocco “open another screen screenName”, che trovi nella sezione Control;
inserisci di fianco a screenName un blocco “text string”, che trovi nella sezione Text, scrivendo al suo interno il nome dello schermo a cui vuoi passare (in questo caso Screen_Storia).

Figura 3

Per implementare il ritorno da una nuova schermata a quella principale (figura 4):

seleziona uno schermo secondario (in questo caso Screen_Storia) nel menu a tendina in alto e passa alla modalità Blocks, cliccando sul bottone dedicato che trovi in alto a destra della schermata;
trascina nella Viewer il blocco “when Button_Indietro.Click”, che trovi tra le funzionalità del componente Button_Indietro;
inserisci di fianco al do il blocco “open another screen screenName”, che trovi nella sezione Control;
inserisci di fianco a screenName un blocco “text string”, che trovi nella sezione Text, scrivendo al suo interno il nome dello schermo principale (Screen1).

Figura 4

Seguendo la stessa procedura puoi completare l’applicazione andando ad associare ai restanti componenti Button, presenti nella schermata principale, delle schermate secondarie, in cui visualizzare tante altre curiosità su Halloween.

Possibili sviluppi

L’applicazione presenta dei possibili sviluppi:

è possibile inserire nuovi componenti Button e nuovi schermi;
è possibile inserire il componente Player della sezione Media, caricare un file audio nella proprietà Source, e implementare in fase di programmazione l’esecuzione del file quando si apre il relativo schermo;
è possibile inserire il componente VideoPlayer della sezione Media, caricare un file video nella proprietà Source, e implementare in fase di programmazione l’esecuzione del file quando si apre il relativo schermo;
è possibile inserire nell’interfaccia grafica il componente SpeechRecognizer della sezione Media, e implementare in fase di programmazione il passaggio ad una nuova schermata attraverso l’utilizzo della voce.

Prova a implementare questi sviluppi e raccontaci come è andata a info@weturtle.org!

Riferimenti e links

A questo link puoi scaricare il file del gioco creato da noi.

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, segui We Turtle e TALENT su Facebook e iscriviti al nostro canale Youtube!

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 - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

Introduzione

Step preliminari

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Progettazione dell’interfaccia grafica

Stesura del codice

Possibili sviluppi

Riferimenti e links

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 - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

Introduzione

Step preliminari

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Progettazione dell’interfaccia grafica

Stesura del codice

Possibili sviluppi

Riferimenti e links

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