Leaderboard |The evolution|

 

 Leaderboard

(Thunkable version)

Sembra che ormai ci abbia preso gusto, promesso che questo è l'ultimo esempio e ambiente in cui mostrerò la realizzazione di una classifica 😂 . Mancava solo lui , il mitico Thunkable, colui che ha risvegliato in me la voglia di creare app dopo il mio inizio incerto, peccato però che la versione classic è ormai andata in pensione sostituita dalla più recente versione X. Visto che è  una piattaforma abbastanza recente, con alcuni componenti ancora acerbi e altri mancanti, e che ho potuto studiare pochissimo mi sono convinto a provare. Deluso dal tradimento del dictionaries ho cercato una valida alternativa e qui mi sono imbattuto negli objects, a me sconosciuti, che spero di usare al meglio , sicuramente ci sono margini di miglioramento. Premesso quindi che sono quasi tutti contenuti nuovi anche per me vediamo insieme il codice con la consapevolezza di imbatterci in degli errori. Vi ricordo sempre che non sono un addetto ai lavori ma solo un appassionato che racconta il suo viaggio. Zaino in spalla!

L'ambiente di sviluppo della versione Thunkable X o cross platform (visto che edita per android, iOS, e web app) è abbastanza diverso da quelli usualmente utilizzati da appinventor o kodular anche se riporta molte similitudini. L'interfaccia grafica è stata completamente reinterpretata anche se mantiene la divisione in struttura e componenti da utilizzare , modernizzata e potenziata è sempre affiancata alla preview dell'app e alla doppia sezione delle impostazioni dei vari componenti che adesso si arricchisce di una marea di settaggi, forse troppi. Per la grafica e le impostazioni vi lascio giocare con calma, noi passiamo al codice. ( Appena arrivata una mail che anticipa cambiamenti all'interfaccia , in versione beta per alcuni profili , vi terrò aggiornati ).

Partiamo dalle variabili anche qui totalmente aggiornate, adesso tutte le tipologie (tre presenti) funzionano anche attraverso gli screen quindi non abbiamo bisogno di crearle ogni volta e c'è anche la possibilità di scegliere tra quelle salvate solo in app, sulla memoria del telefono o su cloud on line , le ultime si collegano direttamente al nostro account firebase, spettacolo ( test in progress ).

In questo caso possiamo tranquillamente scegliere quelle salvate in app riconoscibili dalla dicitura app e ne creeremo 4 di cui due inizializzate come liste e due come oggetti ( object ). I nomi User e points sono di facile comprensione mentre data sta ad indicare i dati ricevuti dal db (database) e all'inizio i dati inseriti e data reverse è la stessa lista ma con gli elementi invertiti e vedremo il perché. Per quello che riguarda gli object senza entrare in tecnicismi che non mi competono possiamo vederli come un insieme non ordinato di coppie nome/valore, vi ricorda qualcosa ? Tag/value ? Lo scopriremo solo vivendo! Quando il nostro screen parte andiamo a richiamare i dati salvati nel db grazie a questo blocco AddListener che funziona un po' come il blocco per richiamare la lista di tag in appinventor , anche se funziona in maniera leggermente diversa visto che tramite una key andrà a prelevare i dati salvati in quell' object, nel nostro caso leaderboard. Ci servirà per far visionare la nostra classifica appena parte l'app e come siamo già abituati lavorerà in simbiosi con un altro blocco che viene attivato per ricevere i dati. Vediamo quindi questi dati e come li andremo a comporre, il tutto avverrà tramite due textbox per inserire i dati e un button per inviare i dati ma voi potrete personalizzare l'utilizzo a seconda di come è impostata l'app. Nel mio caso al click del button invia vado a controllare se i campi inseriti non sono vuoti (per non generare errori nel salvataggio dati in firebase) mentre la verifica se points è effettivamente un numero l'ho bypassata impostando la textbox su solo valori numerici inseribili. Effettuato il controllo andremo a creare la nostra coppia di valori da salvare nel nostro object data , quindi ad ogni click andrà a impostare la proprietà dell'oggetto che nel nostro caso è il nome del giocatore assegnando un valore (to) che rappresenta il punteggio. Il blocco call save andrà poi a salvare i dati appena creati in una specifica key che è proprio leaderboard, in totale quindi abbiamo tre dai: una key, il nome del giocatore e il valore del punteggio, gli ultimi due salvati nell' oggetto data.

Il risultato finale sarà la creazione del tag leaderboard (se non esiste) e il salvataggio al suo interno di un tag (nome user) e un valore (punteggio), una volta salvati questi dati nello stesso blocco abbiamo la sezione then do che si attiva ad operazione effettuata e può essere per esempio utilizzata per il controllo di errori ,con il comodo blocco error, oppure come nel mio caso per cancellare i valori dalle textbox per poterne inserire ancora. Nel caso invece il controllo verifica che almeno una delle due textbox è vuota nel percorso else andiamo ad attivare una notifica che avvisa che c'è un errore nell'inserimento dei dati. Questa parte è puramente "didattica" e potrebbe servire in altri progetti per altri scopi per cui o cercato di realizzare un esempio funzionante anche slegato dal progetto leaderboard. Adesso dobbiamo vede solo cosa succede nel momento in cui il blocco AddListener va a richiamare il suo compagno fedele When DataChanged che subito ci propone in prima linea i valori tag e value che ricordiamo abbiamo deciso di salvare come nome del giocatore e punteggio.

Se avete seguito anche gli altri tutorial (se non lo avete fatto correte a vederli) saprete bene che avevamo invertito i tag con il value andando a creare una lista di liste con coppie punteggio-nome utente per poi usare il blocco che lavora con le coppi per ricreare la classifica. Qui faremo una cosa simile solo che andiamo ad invertire un oggetto che al momento ci arriva con al suo interno le coppie formate da nome(proprietà)-punteggio(valore). Prima di tutto puliamo le label 3 e 4 che useremo per visionare la classifica salviamo l'intero valore dell'oggetto leaderboard nella variabile data e subito dopo con get object properties of data andiamo a richiamare la lista formata da tutti i nomi degli utenti. Adesso usiamo il blocco set property per popolare un nuovo oggetto ma invertito quindi preleviamo i nomi utente dalla lista appena creata (app User) e per ognuno di loro (j) vado ad impostare la property come il valore della property (j) dell'oggetto app data , il termine sottolineato non è altro che il valore salvato insieme al nome utente quindi il punteggio. Se in questo nuovo oggetto la proprietà è diventata il punteggio , il valore con esso salvato per completare la coppia sarà il nome utente che in questo for each item ci viene fornito dalla stessa variabile j.  

Visto che le nuove coppie di elementi avranno le proprietà che rappresentano tutti i punteggi, possiamo facilmente utilizzare get object properties of data reverse in abbinamento con sort numeric descending per ordinare in maniera decrescente la lista dei punteggi e salvarla nella variabile app points. Adesso non ci resta che abbinare ogni punteggio al suo giocatore e mostralo nelle label per creare la leaderboard. Il nostro for each item adesso andrà a lavorare sulla variabile app points e per ogni punteggio al suo interno (j) scriveremo il punteggio stesso in una delle due label e il valore della proprietà punteggio di data reverse nell'altra label , quindi il nome utente.

E se volessi caricare la mia classifica in una parte specifica del mio progetto ? Beh con questo codice mi basta usare di nuovo AddListener e lui andrà a richiamare il blocco When DataChanged appena visto che andrà a prendere i dati , ordinarli e mostrarli nelle label , nell'immagine qui sotto per esempio è stato collegato ad un pulsante carica ma potrete inserirlo in qualsiasi parte del vostro progetto 

Bene , la prossima volta vedremo come creare una classifica in python 😆 , scherzo basta classifiche anche perché di python conosco solo il nome 😂.

Scrivi nei commenti se ti è piaciuto o cosa cambieresti, proponi un tutorial o semplicemente gioca anche tu con il codice. Ciao !