home - tutorial - TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR

TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR

In questo tutorial vedremo come realizzare tramite App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android creato da Google, un’applicazione che simuli un quiz.
Nello specifico tratteremo:
  • Step preliminari
  • Progettazione dell’interfaccia grafica
  • Stesura...

  by Weturtle Team
App Inventor 2

Introduzione

In questo tutorial vedremo come realizzare tramite App Inventor 2, un semplice ambiente di sviluppo per applicazioni Android creato da Google, un’applicazione che simuli un quiz.
Nello specifico tratteremo:
  • Step preliminari
  • Progettazione dell’interfaccia grafica
  • Stesura del codice
  • Come avviare l’applicazione sullo smartphone
  • Limiti dell’applicazione
Tecnologia necessaria:
  • Pc
  • Smartphone Android
  • Rete Wi-Fi

Step preliminari

Per poter realizzare una nuova applicazione, è necessario collegarsi a questo link e cliccare su Create Apps in alto a destra.
Esegui a questo punto l’accesso al sito tramite l’account Gmail precedentemente realizzato (ne avevamo parlato nel primo tutorial).

Clicca su Projects e poi su Start new project: comparirà una finestra tramite la quale definire il nome del tuo progetto. Dagli un nome significativo, che ti permetta di ritrovarlo facilmente; ti consiglio Quiz. Conferma tramite il bottone OK: si aprirà una nuova schermata bianca Screen 1 all’interno della Viewer, in modalità Designer; qui realizzerai la tua interfaccia grafica trasferendo gli oggetti dalla Palette.

Progettazione dell’interfaccia grafica

Prima di poter passare alla fase di stesura del codice, è indispensabile progetta 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 avrà un aspetto simile a questo:
Gli oggetti di cui hai bisogno sono:
  • Una Label, che puoi trovare nella sezione User Interface della Palette. Rinominala con LABEL_PUNTEGGIO, ti servirà per memorizzare il punteggio realizzato dall’utente. Nella sezione Properties relativa alla label modifica la proprietà Text e scrivi PUNTEGGIO. Se vuoi centrare anche tu la scritta imposta Width (su Properties) a Fill Parent e TextAlignment a center.
  • Una Image, che puoi trovare nella stessa sezione della label. Trascina questo oggetto sotto la label appena inserita. Imposta la sua Width a Fill Parent e Height a tuo piacimento. Nella proprietà Picture dell’Image hai la possibilità di inserire un’immagine. Prima di fare questo pensa a tre domande che comporranno il tuo quiz e scarica da internet tre immagini significative, una per domanda. 
Nella sezione Media hai la possibilità di caricare le tre immagini appena scaricate tramite il bottone Upload File: ti permetterà di selezionare le immagini (cliccando su Scegli file). Ripeti questa procedura tre volte, una per immagine. Una volta caricate le immagini, la sezione Media sarà simile a questa:
Come puoi notare è utile rinominare le immagini scaricate in modo da riconoscerle facilmente. Ora puoi andare ad inserire un’immagine nella proprietà Picture dell’Image. Clicca su "None" e scegli dalla lista delle immagini caricate quella che per te corrisponderà alla prima domanda del tuo quiz: verrà visualizzata con la corrispondente domanda all’avvio dell’applicazione.
  • Un’altra Label da inserire sotto l’immagine. Rinominala con LABEL_DOMANDA e sulla proprietà Text scrivi DOMANDA. Per centrare l’etichetta ripercorri i passi presentati nei punti precedenti. Al posto di questa label faremo comparire il testo della domanda.
  • Un HorizontalArrangement che troverai nella sezione Layout da inserire sotto la label appena posizionata. Imposta la sua Width a Fill Parent.
  • Un TextBox che puoi trovare nella sezione User Interface. Inserisci questo oggetto all’interno dell’HorizontalArrangement e all’interno della sua proprietà Hint cancella il testo che trovi per default. Questo elemento permetterà all’utente di inserire il testo della sua risposta.
  • Un Button che troverai nella sezione User Interface. Inserisci questo bottone all’interno dell’HorizontalArrangement, a destra del TextBox. Imposta la sua Width e la sua Height a Fill Parent. Sulla proprietà Text scrivi OK e rinomina il bottone con Button_OK. Questo bottone permetterà all’utente di confermare la propria risposta.
  • Un altro Button, che posizionerai ancora dentro l’HorizontalArrangement, a destra del Button_OK. Ripeti gli stessi step visti per il precedente bottone, ma rinominalo con Button_PROSSIMA e nella proprietà Text scrivi PROSSIMA. Questo bottone permetterà all’utente di passare alla successiva domanda.
  • Un’ultima Label, che posizionerai sotto l’HorizontalArrangement. Imposta la sua Width a Fill Parent, cancella il suo Text e rinominala con LABEL_RISPOSTA_ESATTA. Useremo questa etichetta per dare un feedback all’utente.

Creazione del codice

Terminata la progettazione dell’interfaccia, non resta che scrivere il codice per definire il comportamento degli oggetti inseriti; passa dunque alla modalità Blocks, alla quale puoi accedere tramite il bottone dedicato, che trovi in alto a destra della schermata.
  • Trascina nella Viewer l’elemento rosso "initialize global name" to che trovi sulla sinistra, nella sezione Variables di Blocks. Al posto di "name" scrivi "indice". Attacca a questo elemento il "Basic Number Block" (è il primo che trovi nella sezione Math) e scrivi 1 al posto di 0. Questa variabile globale servirà per tenere in memoria un valore numerico che ci permetterà di scorrere la lista delle domande. Ripeti queste operazioni creando una variabile punteggio, inizializzata a 1. Questa variabile, come puoi immaginare, terrà in memoria il punteggio realizzato dall’utente. Puoi considerare le variabili come dei contenitori utili al programma per memorizzare dei valori: l’indice della domanda corrente e il punteggio attuale, in questo caso.
  • Trascina nella Viewer altri tre elementi "initialize global name to" a cui darai i seguenti nomi: lista_domande, lista_risposta, lista_immagini. In questo caso abbiamo bisogno di definire delle liste, ovvero delle variabili che sono composte da più di un singolo elemento. Per poter fare ciò trascina l’elemento celeste "make a list" che trovi nella sezione Lists a fianco di ogni elemento "initialize global name to". Per default l’elemento "make a list" ti permette di creare una lista di soli due elementi: avrai bisogno di aggiungerne un terzo. Clicca sull’ingranaggio delle impostazioni che compare in alto a sinistra dell’elemento celeste e trascina un item sotto i due già presenti. Ora potrai inizializzare la tua lista di tre elementi.
  • Completa questo blocco celeste con il "text string" (primo elemento che troverai nella sezione Text), uno per ogni elemento della lista. Ripeti questo procedimento per tutte e tre le liste. Inserisci il testo delle domande nella lista delle domande, il testo della risposta nella lista delle risposte e il nome delle immagini caricate precedentemente nella sezione Media (modalità Designer) nella lista delle domande, facendo attenzione all’ordine in cui li inserisci: alla prima domanda della lista delle domande deve corrispondere la prima risposta nella lista delle risposte e la prima immagine nella lista delle immagini, etc.. Nel fare questo presta inoltre attenzione a riportare il nome completo delle immagini, comprese le loro estensioni. Il codice ora dovrebbe assomigliare a questo:
  • Clicca sull’elemento Screen1 che trovi sulla sinistra nella sezione Blocks. Comparirà una tendina con una serie di blocchi che implementano le funzionalità associate all’elemento selezionato. Trascina il blocco giallo "when Screen1.Initialize do" nella Viewer, sotto gli elementi già inseriti. Questo blocco implementa l’evento di inizializzazione dello Screen1, ovvero il comportamento all’avvio dell’applicazione. Dobbiamo fare in modo che nell’etichetta LABEL_DOMANDA compaia il testo della prima domanda. Se ricordi, l’immagine relativa alla prima domanda è stata già inserita per default nella sezione Designer. Di fianco al "do" del blocco giallo appena inserito, trascina l’elemento verde "set LABEL_DOMANDA.Text to", che troverai tra le funzionalità relative all’etichetta LABEL_DOMANDA, alle quali ti ricordo puoi accedere con un doppio click sull’elemento LABEL_DOMANDA nella lista degli elementi sulla sezione Blocks a sinistra. A questo punto dobbiamo selezionare il testo della prima domanda, che abbiamo inserito come primo elemento nella lista delle domande.
  • Trascina l’elemento celeste "select list item" che trovi nella sezione Lists di fianco al to. Dobbiamo ora definire la lista da cui selezionare l’elemento e l’indice dell’elemento stesso all’interno della lista. Seleziona l’elemento "get" che trovi nella sezione Variables e trascinalo di fianco a list dell’elemento appena inserito. Cliccando sulla freccia che compare nella funzionalità get comparirà una tendina con la lista delle variabili globali che hai creato: seleziona "global lista_domande". Di fianco a index dello stesso elemento inserisci il numero 1 (accedendo al primo elemento della sezione Math).
Queste nuove righe di codice permettono all’applicazione di visualizzare la prima domanda nel momento in cui viene avviata.

Dobbiamo ora programmare il comportamento dell’applicazione quando si verificano gli eventi "when BUTTON_OK.Click do" e "when BUTTON_PROSSIMA.Click do" che corrispondono all’azione dell’utente di cliccare il bottone OK e il bottone PROSSIMA.
  • Trascina il blocco giallo "when BUTTON_OK.Click do", che trovi tra le funzionalità relative al BUTTON_OK. Di fianco al do inserisci il blocco giallo "if then" che troverai nella sezione Control sotto Blocks. Accedendo alle sue impostazioni tramite il simbolo dell’ingranaggio trasformalo in un blocco if then else:
Questo blocco permette all’applicazione di comportarsi diversamente in base al verificarsi o meno di una certa condizione. La condizione va inserita di fianco all’if e i due diversi comportamenti di fianco al then (caso in cui la condizione è verificata) e di fianco all’else (caso in cui la condizione non è verificata). La condizione che dobbiamo verificare è che l’utente abbia risposto correttamente o meno alla domanda proposta nell’etichetta LABEL_DOMANDA. Per fare ciò è necessario confrontare il testo presente nell’oggetto TextBox, che contiene la risposta inserita dall’utente, e il testo presente nella lista delle risposte. Di fianco all’if inserisci l’elemento che simula un confronto di uguaglianza, accessibile tramite la sezione Math (secondo elemento). Ora dobbiamo inserire all’interno di questo blocco i due termini di confronto. Il primo termine di confronto è accessibile tramite un elemento "select list item" in cui specificherai la list tramite una get sulla variabile global lista_risposte con index l’indice globale definito a inizio programma; accederai a questo tramite un’altra get sulla variabile global indice. Il secondo termine di confronto è accessibile tramite le funzionalità dell’oggetto TextBox. Dovrai selezionare l’elemento verde TextBox1.Text. Davanti ai due termini di confronto è utile inserire l’elemento upcase che troverai nella sezione Text. Questo elemento predefinito trasforma i due termini di confronto in maiuscolo prima di eseguire il confronto.
Nel caso in cui l’utente abbia inserito correttamente la risposta, dunque il confronto è andato a buon fine, dovrà comparire: "Risposta esatta!" nell’etichetta dedicata, il punteggio dovrà essere aggiornato e dovrà essere stampato. Nel caso contrario dovrà semplicemente comparire: "Risposta sbagliata!" nell’etichetta dedicata.

Trascina di fianco al then l’elemento "set LABEL_RISPOSTA_ESATTA.Text to" e di fianco a questo l’elemento testuale in cui scriverai "Risposta esatta!"
Trascina sotto questi blocchi l’elemento set global punteggio to che troverai nella sezione Variables e di fianco l’operatore matematico + della sezione Math. Gli addizionandi saranno il valore attuale memorizzato nella variabile globale del punteggio, a cui accederai tramite una get sulla variabile global punteggio, e il numero 1. Inserisci sotto l’elemento verde "set LABEL_PUNTEGGIO.Text to" che permette di stampare il punteggio appena aggiornato. Di fianco al to inserisci l’elemento predefinito "join" che troverai nella sezione Text. Questo elemento permette di unire una scritta con il valore di una variabile. Completalo con un elemento testuale su cui scriverai Punteggio: e con una get sulla variabile global punteggio.
Di fianco all’else dell’elemento giallo di controllo if then else imposta il testo dell’etichetta LABEL_RISPOSTA_ESATTA a "Risposta sbagliata!"
Non rimane che programmare il comportamento del BUTTON_PROSSIMA.
  • Trascina l’evento "when Button_PROSSIMA.Click do" nella Viewer. Una volta che l’utente avrà cliccato sul bottone PROSSIMA, dobbiamo aggiornare la variabile relativa all’indice, aggiungendo 1 al valore corrente, per poter accedere alla domanda successiva; dobbiamo realizzare un controllo su tale variabile poiché il quiz è composto da sole tre domande: non appena l’indice supera il valore 3, dobbiamo reimpostarlo ad 1 e in questo modo l’utente visualizzerà le domando ciclicamente; dobbiamo aggiornare il testo dell’etichetta relativa alla domanda selezionandolo dalla lista delle domande al giusto indice; dobbiamo aggiornare l’immagine selezionandola dalla lista delle immagini al giusto indice; dobbiamo cancellare il testo nell’etichetta che restituisce il feedback e allo stesso modo il testo nel TextBox, per permettere all’utente di inserire la risposta relativa alla successiva domanda; dobbiamo infine continuare a stampare il valore relativo all’ultimo punteggio aggiornato.

Come avviare l’applicazione sullo smartphone

Dopo aver collegato il Pc e lo smartphone alla stessa rete WiFi, clicca su Connect e poi su AI Companion in alto sul software; questo visualizzerà un QR Code che scannerizzerai cliccando su scan QR code presente sull’applicazione MIT AI2 Companion che hai preventivamente installato sul tuo smartphone. Ora sei pronto a rispondere alle domande del quiz!

Limiti dell’applicazione

Questa applicazione presenta un limite relativo all’aggiornamento del punteggio. Una volta che l’utente avrà confermato la risposta con il bottone OK e nell’eventualità in cui la risposta sia corretta, il punteggio continuerà ad aggiornarsi se l’utente continuerà a confermarla. Vedremo in un prossimo tutorial come evitare questo problema, privando l’utente della possibilità di continuare a confermare la stessa domanda, grazie all’utilizzo di un timer.

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.

Vuoi leggere il tutorial quando vuoi, anche offline?





Hai letto la lezione? Che cosa ne pensi? Lascia un commento qui sotto!

Antonella Longarini

Molto interessante