Leaderboard con Firebase
Leaderboard con Firebase
Edit: Restando valido il ragionamento e il codice, magari da utilizzare in altro contesto, andiamo ad effettuare il fix di alcuni punti. Leggi da QUI per la rettifica.
Eccoci qui per vedere un metodo molto semplice per creare e gestire una classifica con il nostro AppInventor e naturalmente tutti gli ambienti simili.
E' una domanda posta molte volte, specialmente per chi si sta approcciando da poco alla creazione di app, e quindi ho voluto proporre uno dei vari metodi utilizzando come database un servizio gratuito messo a disposizione da Google quindi già presente nel nostro account.
Per la creazione del database ci basta raggiungere la pagina relativa a Firebase e una volta loggati , in alto a destra raggiungere la console.
Adesso dovremo creare un nuovo progetto e in seguito creare il nostro Realtime database sono passaggi veramente semplici quindi passo direttamente a indicarvi dove troverete le informazioni molto importanti che serviranno per far dialogare il Db (Database) con AppInventor, rimandandovi eventualmente ai commenti in caso di necessità.
Vediamo quindi dove trovare il Firebase Token e Firebase Url che dovremo inserire nelle impostazioni di firebase nell'app.
Una volta creato il Db avremo una schermata simile a questa e andando in alto a sinistra, rettangolo rosso, premendo sull'ingranaggio comparirà un menu dal quale selezionare Impostazioni Progetto che vi farà accedere ad una seconda schermata (quella bordata di arancione) dove selezionando Could Messaging potremo accedere al nostro Token che sarebbe quella stringa lunga senza senso 😂, accertatevi di copiarla bene. Nella prima schermata invece, bordato di verde, abbiamo l'Url al nostro Db e ancora più in basso tutta la struttura del database che andremo a creare.
Visto dove trovare le info necessarie andiamo direttamente nell'app e dal menu laterale selezioniamo la sezione Experimental dove troviamo FirebaseDB, introducendolo nel progetto sul lato destro possiamo accedere alle impostazioni dove troveremo i campi visti in precedenza sulla console di Firebase, ci troviamo naturalmente nel designer editor.
Passiamo subito al codice dei due button , dopo aver creato una variabile lista per alloggiare i dati della classifica andiamo a scrivere il codice del button per inviare i dati. Utilizzando il blocco StoreValue possiamo passare due dati, che prendiamo dalle textbox inserite prima, e diventeranno rispettivamente il Tag e il valore (value) da salvare. Subito dopo puliamo le textbox per poter inserire i prossimi valori. Io ho scelto di lasciare il campo ProjectBucket vuoto nelle impostazioni del componente, in questo modo scriverà i mie valori direttamente nella parte principale della struttura. Cambiando il valore del Bucket verrà creato un nuovo nodo nel nostro Db dove salveremo tutti i dati, questo comporta che in seguito se avremo altri nodi dobbiamo modificare il valore del bucket per spostarci all'interno della struttura.
Se siete stati attenti ho salvato il punteggio come tag e il nome come valore salvato all'interno di quel tag, in questo modo avrò una lista di tag (anche nella struttura del db) formata direttamente dai valori della classifica e già ordinati in maniera crescente, questo avrebbe velocizzato e facilitato l'organizzazione dei dati in app. Sfortunatamente AppInventor fa i capricci e non so il perché ma nel momento in cui richiamo i dati mi sfalsa la struttura ordinata del Db quindi come vedremo ho dovuto introdurre un'estensione per ordinare la lista.
Quindi una volta inseriti i dati nelle textbox li inviamo al Db con il tasto Invia, a voi la personalizzazione di un controllo che verifica effettivamente che entrambe le textbox sono piene prima dell'invio, nella vostra app futura invece molto probabilmente avrete già l'username salvato in una variabile e il punteggio passato direttamente dal gioco.
Il tasto Carica è ancora più semplice avrà al suo interno solo il blocco GetTagList che, come dice la descrizione, chiama la lista di tutti i tag presenti in quel livello del nostro Db (vi ricordo che se ne abbiamo diversi dobbiamo muoverci tra i vari livelli prima di chiamare qualsiasi comando). Nel momento in cui viene premuto, per come abbiamo salvato i dati, riceviamo tutti i punteggi ma in ordine crescente.
Il blocco GetTagList scatena l'evento della ricezione dei dati che viene captato dal blocco when ... TagList che ci fornisce la lista dei punteggi che andiamo a salvare nella nostra variabile leaderboard, voi potete chiamarla come volete 😅 e possiamo notare utilizzo dell'estensione che mi permette di ordinare la lista e poi fare il reverse visto che una classifica punteggio che si rispetti parte dal più alto e va verso il più basso.
Questo evento però non mi da informazioni sul valore salvato nel mio tag quindi con un bel for each entriamo nella lista classifica e richiamiamo ogni valore , quindi il tag, presente nella nostra lista, per fare questo usiamo call....GetValue che serve proprio per richiamare uno specifico tag e ancora più importante attivare l'evento when ....GotValue .
Quindi il primo blocco prende ogni tag e dice a firebase mandami il suo valore che sappiamo essere il nome del giocatore.
Quando firebase risponde con il blocco GotValue che ha anche l'informazione Value andiamo a posizionare finalmente la nostra classifica, per incolonnare correttamente il tutto ho usato il codice dell'esempio dove \n mi permette di andare a capo all'interno della label. Facciamo l'esempio della label user, arriva la prima l'informazione (la label è vuota) quindi prende il valore della label che è niente , va a capo e aggiunge il valore salvato nel tag quindi il nome del giocatore. Secondo passaggio (sparato dal for each) arriva l'informazione prende quello che già è nella label (il giocatore primo in classifica) va a capo e aggiunge il secondo giocatore e così via fino alla fine.
Lo stesso procedimento succede anche per il punteggio solo che invece del valore del tag dovremo usare proprio il tag stesso.
Spero vi sia piaciuto e fatemi vedere come personalizzerete la vostra app, vi lascio cono il link per scaricare l'estensione con le funzionalità per lavorare con le liste, ordinarle, invertirle etc la troverete QUI e il post dell'autore dell'estensione QUI
Parlando con un amico , Vinko che ringrazio per lo spunto, e discutendo sui vari metodi da poter utilizzare, sono usciti alcuni punti negativi che non avevo considerato nell'abito di una classifica. Come ben sapete sono spunti che spesso realizzo in poco tempo quindi può scappare qualcosa. Detto questo, come esercitazione o nell'ambito della raccolta di altri dati, questo metodo rimane valido e funzionale ma andiamo a vedere cosa non va invece nel caso di una classifica.
Dal gusto un po' rétro questo codice permette di salvare anche più valori per lo stesso utente, infatti non abbiamo impostato nessun controllo ( e non era previsto per il tutorial in questione ) su eventuali doppioni o meglio lo stesso giocatore potrebbe ipoteticamente posizionarsi con punteggi diversi in posizioni diverse della classifica. Mi ricorda tanto le classifiche dei videogiochi delle sale giochi di qualche decennio fa quando le monetine erano un tesoro e per giocare ai titoli più blasonati dovevi raggiungere questi mitici posti ormai soppiantati dalle console e dal mobile.
Questa prima imperfezione si potrebbe risolvere salvando il punteggio in una variabile da confrontare di volta in volta con il punteggio attuale, solo nel caso in cui il nuovo risultato fosse maggiore del precedente andremo a cancellare il vecchio valore da firebase usando il blocco clear Tag per poi aggiungere il nuovo.
In questo modo un giocare sarà presente con solo il suo punteggio maggiore o più in generale l'elemento che abbiamo associato al tag sarà presente solo con il suo valore maggiore.
La cosa che invece non possiamo andare a modificare è la sovrapposizione dei giocatori quindi se Marco ha totalizzato 100 oggi, io domani facendo 100 punti andrò a cancellare il suo nome che sarà sostituito dal mio e così per ogni giocatore che totalizzerà 100 punti. Avendo usato per comodità di ordinamento il punteggio come tag non possiamo avere due "nomi tag" nello stesso livello per cui non abbiamo soluzioni possibili.
Per questo motivo prossimamente andremo a vedere un metodo differente per salvare e gestire i dati per creare la nostra leaderboard e vi anticipo anche che vedremo anche come realizzarlo con la nuova versione di Thunkable.
Alla prossima.
Se hai apprezzato il mio lavoro offrimi un bel caffè 😍
Commenti
Posta un commento