TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 1)

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

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.

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

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

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.

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!

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.

Vuoi scoprire come risolvere questi problemi? Leggi la seconda parte del tutorial COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2).

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.