Tutorial Flash #1 - Barcode & Data Table

Benvenuti!

Questo post passerà alla storia perché sarà il primo di una lunga serie di tutorial lampo, semplici e utili ( spero ) ma anche perché sarà il primo scritto nel periodo del CoronaVirus! 😢

Siamo un popolo straordinario riusciremo in questa nuova sfida uscendone più forte di prima e magari con una nuova coscienza nazionale e personale.

Visto che in questo periodo abbiamo più tempo da poter utilizzare anche per le nostre passioni sono riuscito subito a scrivere un piccolo tutorial su un componente molto interessante e dai molteplici utilizzi. Visto che la versione Classic di Thunkable non è più accessibile ai nuovi utenti dovrò per forza usare la versione Cross Platform e ho notato veramente tanti nuovi componenti dall'ultima volta che l'ho utilizzato , molto bene. 💪  

Dopo il messaggio sulla pagina facebook ( iscrivetevi se vi fa piacere 👉 QUI ) è partita una piccola conversazione che ha portato poi alla creazione di questi semplici blocchi per poter leggere un codice a barre , individuare la riga della tabella in cui è salvato ( la tabella è già riempita dei dati utili ) , per poi usare i valori inseriti nelle altre colonne per modificare il testo delle label. 

 












Per la parte grafica lascio libero sfogo alla vostra fantasia quindi vi andrò ad elencare solo quello che ho inserito e la struttura che ho utilizzato per organizzare il tutto, Cl name e Cl value sono due componenti colonna prelevati da layout organizzati grazie ad un componente riga Row1.
Dall'immagine, a destra, della struttura infatti si può notare che il componente più a sinistra è Row e al suo interno ( ci spostiamo verso destra ) troviamo le due Column , ogni colonna ha al suo interno 4 label, quelle a sinistra servono per la descrizione mentre quelle a destra riceveranno il valore dalla tabella. Nella parte bassa possiamo vedere un button che servirà per attivare il lettore di barcode e quindi avviare la ricerca , nella parte bassa della foto poi abbiamo tutti i componenti non visibili che ho inserito : un sound per riprodurre un suono, il barcode scanner e il componente Local DB che mi ha permesso di creare la tabella con tutti i dati.
Prima di tutto vediamo le variabili che andremo ad utilizzare : barcode inizializzata come una lista vuota, row e column che poi useremo per prelevare i termini dalla tabella , label nella quale abbiamo salvato in una lista i componenti label utilizzati perché useremo any component per modificare il loro testo

Appena lo screen1 viene caricato ( il blocco in basso a destra ) tramite il componente call get column preleviamo tutta la prima colonna e la salviamo all'interno della nostra variabile barcode, infatti la prima colonna contiene tutti i codici a barre che abbiamo salvato nella nostra tabella e adesso la possiamo utilizzare sotto forma di lista.
Sul lato sinistro al click del button abbiamo inserito il blocco relativo al barcode scanner call scan che permette di aprire il lettore per leggere il codice che poi verrà salvato all'interno dell'elemento value, il primo dei blocchetti verdi che ci vengono messi a disposizione.
Tramite i comandi relativi alle liste possiamo andare all'interno della lista barcode per trovare l'indice quindi la posizione nella lista che corrisponde alla riga della nostra tabella e la salviamo in row , subito dopo portiamo ad uno il valore della variabile column, e vedremo come usarle entrambe; nella parte finale ho inserito un vibrate e la riproduzione del suono per abbellire il tutto.
Passiamo adesso al blocco più importante che useremo per riempire velocemente tutte le label che abbiamo nella nostra app automaticamente, per fare questo useremo un for each e il blocco set text che abbiamo preso in any component e modificato la linguetta from scegliendo Label.
Per ogni elemento della lista label il nostro blocco andrà a modificare il testo della label inserendo il valore preso dalla tabella usando un valore preciso di colonna e riga indicato dalle variabili impostate prima.
Il blocco for each parte dal primo valore che trova nella lista e poi passa al successivo andando a individuare quale label modificare ( label 1, label 2 etc ), noi sfrutteremo questa carrellata automatica per andare a prelevare dalla riga relativa al codice a barre ( che rimane fissa ) tutti i valori delle varie colonne , questo cambiamento è possibile perché alla fine del ciclo impostiamo change by 1 il valore della colonna.
Ecco un semplice modo per poter controllare il nostro magazzino usando lo smartphone come lettore di codice a barre, con qualche altra linea di codice potremmo anche aggiungere o sottrarre quantità al nostro database. Ci volete provare ? Vi lascio con un video per vedere l'effetto finale dell'app.