LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

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

home - tutorial - TUTORIAL - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

TUTORIAL - APPLICAZIONE MULTISCHERMO CON APP INVENTOR

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

Luca Balestra   by Luca Balestra
App Inventor 2

Tempo di lettura tutorialTempo di lettura/visione: 4 min

PROVA LA FORMAZIONE! LA PRIMA LEZIONE E' GRATIS

Ti interessa l'argomento Coding?


Fai il login e guarda gratuitamente la prima lezione del corso Creare app con App Inventor 2 - ID SOFIA: 48653

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:

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.

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

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).
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).
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 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 TurtleTALENT su Facebook e iscriviti al nostro canale Youtube!
Creare app con App Inventor 2 - ID SOFIA: 48653

TI E' PIACIUTO QUESTO ARTICOLO?

Continua a esplorare su WeTurtle!


Ti consigliamo il corso Creare app con App Inventor 2 - ID SOFIA: 48653

Vuoi leggere il tutorial quando vuoi, anche offline?





POTREBBE INTERESSARTI ANCHE

TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR...

FREE

Tempo: 6 min

TUTORIAL
   Luca Balestra
TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR...

FREE

Tempo: 4 min

TUTORIAL
   Luca Balestra
Un percorso sulle dipendenze con App Inventor

FREE

Tempo: 10 min

PROGETTO
   Federico Camilletti
TUTORIAL - SCHIACCIA LA ZANZARA CON APP INVENTOR

FREE

Tempo: 6 min

TUTORIAL
   Luca Balestra
TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR...

FREE

Tempo: 9 min

TUTORIAL
   Weturtle Team

Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO