Tutorial 8 - Creazione gioco Android Quiz Calcistico - Parte 1

Nel tutorial di oggi andremo a vedere come sia possibile creare con MIT App Inventor (un tool gratuito e cloud based per la creazione di app Android) un gioco a quiz sul calcio.

Il tutorial è interessante perchè introduce molti altri concetti di programmazione che vengono spesso utilizzati nella realizzazione di programmi e app.
In particolare parleremo di gestione delle "liste" il costrutto condizionale  "if-then", le "procedure" e la funzioni di "comparazione tra stringhe"

Seguitemi quindi nella lettura...

Partiamo come al solito da un nuovo progetto, chiamiamolo "Calcio Quiz" e disegniamo l'interfaccia utente come mostrato nella seguente immagine:

Partiamo dal primo componente, una Label per memorizzare il punteggio "Lbl_Punteggio"
Poi aggiungiamo un immagine dove visualizzare un suggerimento visivo per la domanda che ci apprestiamo a porre e lo chiamiamo "Img_Domanda"
Avremo poi una label "Lbl_Domanda" dove scriveremo la domanda da porre al giocatore
ed una TextBox "TxtB_Risposta" dove l'utente scriverà la risposta al quesito
Infine due pulsanti:
"Bn_Risposta" per confermare la risposta data
"Bn_Successiva" per passare alla domanda successiva.

Come "Media" caricheremo inoltre le nostre tre immagini jpg contenenti dei suggerimenti "visivi" per le tre domande che vogliamo porre al giocatore.

Per semplicità infatti il tutorial prevede solo 3 domande, ovviamente è possibile ampliare il gioco a piacimento inserendone di più, il procedimento della gestione del gioco sarà lo stesso basterà solo gestire correttamente gli indici in base al numero di domande che abbiamo ed ampliare le tre liste utilizzate.

Possiamo quindi ora passare alla parte di programmazione della logica di funzionamento del gioco che viene effettuata nel "Blocks Editor"

In questa prima parte definiremo tutte le variabili globali (ovvero accessibili ovunque nella nostra app) e le strutture dati da usare nella nostra app.

Partiamo quindi definendo due variabili globali la prima chiamata "indice" (che conterrà l'indice numerico della domanda attualmente posta al giocatore) e poi "punteggio" per memorizzare il numero di risposte esatte date.

Abbiamo poi bisogno di altre tre variabili memorizzate sotto forma di "lista"
Una lista, come dice il nome stesso è una struttura dati astratta che denota una collezione omogenea o container di dati. L'accesso ad un elemento della struttura avviene tramite un indice numerico (non vi preoccupate se la cosa vi sembra complicata al momento, sarà più chiara più avanti...)

Creeremo quindi tre differenti liste, "Lista domande" , "Lista risposte" e "Lista immagini"

Lo scopo sarà quello di poter variare in maniera semplice tramite l'utilizzo dei tasti Ok e Successiva l'interfaccia utente al fine di mostrare la domanda corrente, l'immagine corrispondente ed avere in memoria la stringa con la risposta esatta che deve dare l'utente.

Vi raccomando di inserire i nomi delle immagini in "Lista immagini" esattamente nello stesso modo in cui sono indicati nella sezione "Media" del "Design Editor", pena il malfunzionamento della nostra app.

Quindi il blocks editor a questo punto conterrà i seguenti blocchi:

Nella prossima parte del tutorial andremo a vedere la programmazione del tasto "Prossima" per passare alla domande successiva ed altro ancora...

A seguire il video tutorial relativo a questa prima parte, vi consiglio la visione se avete ancora dubbi su quanto visto finora!!!

Seguitemi quindi nella lettura di questo tutorial cliccando:
Parte 2 Tutorial Android Quiz Calcio

Potete scaricare il codice sorgente dell'app cliccando qui:
App Android Quiz Calcio