Airtable & Cloudinary II

Bentornati,

pronti per il codice? Tutta la parte di impostazione dei vari parametri e dei dati l'abbiamo vista nel tutorial precedente 👉 QUI , quindi se non lo hai fatto recupera tutte  le informazioni prima di iniziare.

Come anticipato vedremo due metodi uno con clock più semplice e uno con dizionario leggermente più complesso ma solo perché presuppone la conoscenza almeno di base di questo componente.

1. CLOCK

Cosa ci servirà 😅 vediamo i componenti da aggiungere

• 1 clock , non spuntiamo le varie proprietà ed impostiamo su 150 il timer interval  
• 1 button , oppure due se avete bisogno anche di pulire i campi ricavati
• 1 listview image and text , dove visualizzeremo i dati
• 1 spreadsheet , il nostro database

Prima di tutto andiamo a riempire i vari campi del componente Spreadsheet per sincronizzare kodular con la tabella di Airtable, Api key e Base ID li abbiamo segnati la volta scorsa mentre Table name e View name li troviamo facilmente all'interno della nostra tabella. Mi raccomando una volta salvati nell'app non devono essere più cambiati o modificati o se dovete proprio farlo ricordatevi di modificarli anche nell'app.

Passiamo al codice vero e proprio , uno dei possibili, partiamo con creare una variabile che chiameremo ID e ci dirà quale riga richiamare di volta in volta, e la inizializziamo a zero.

When button 1 click (quando premiamo il pulsante) è molto semplice e andrà ad attivare il clock portandolo nella posizione enabled true, quindi ogni 150 millisecondi farà qualcosa e lo andremo a vedere nel blocco specifico del clock. 

When clock1 Timer al suo interno ha un controllo sulla variabile ID e nello specifico se è minore di 3, questa condizione è strettamente legata alla tabella dell'esempio visto che ha solo tre righe.

Al primo "rintocco" la nostra variabile è minore di tre e quindi entrando nella sezione then andremo ad aumentare di una unità la variabile che passa ad uno e richiamo proprio la riga numero uno, grazie a call Spreadsheet. get row, che in automatico attiva il suo blocco gemello When got row , cioè quando ho ricevuto la riga e questo avverrà ad ogni passaggio.

Sì perché il clock rimane attivo se non bloccato e dopo altri 150 millisecondi aziona il when clock.timer , verifica l'ID che adesso verrà portato a due chiamando la riga due della tabella e ancora dopo un altro giro verrà portato a tre chiamando per l'ultima volta il db.

Nel momento in cui ID assume valore tre il codice verrà deviato sull' else (infatti tre non è minore di tre) che ci permetterà di settare su false il clock fermandolo e impostare la variabile nuovamente a zero  per un eventuale nuova chiamata al db.  

Vediamo cosa succede invece alla ricezione della riga. When got row riceve la riga in formato di lista , un elemento per ogni colonna, quindi grazie al blocco call list view add item andremo a posizionare la prima colonna come immagine , la seconda come titolo e la terza come sottotitolo. Adesso se ci ricordiamo bene i valori che ho inserito nella tabella verrà facile capire che la prima colonna porta il link all'immagine, la seconda il prezzo e l'ultima il nome. 

Fatto , facile no? Bene il metodo iniziale era ancora più semplice ma non siamo riusciti a capire il motivo per cui gli elementi arrivano mescolati oppure posizionati male dalla list view, in quel caso avevo utilizzato il blocco add item from list che mi permetteva di eliminare molti blocchi 😓 

Come anticipato il button 2 ripulisce i campi della list view se ne aveste bisogno, call clear list.

2. DIZIONARIO

Link all'estensione 👉 QUI

Vediamo ora il metodo con il dizionario che può tornare utile in più contesti, qui sopra ho lasciato il link all'estensione che useremo per trasformare la scrittura in Json ricevuta dal db in dizionario per poterlo manipolare con i blocchi nativi di kodular.

Per le variabili iniziali preferisco aggiungere qualcosa in più per far vedere tutti i passaggi ed eventualmente i più bravi sapranno semplificare. Una variabile Table data inizializzata come dizionario e altre tre come lista che riceveranno rispettivamente tutto il db e le colonne contenenti i link, il punteggio e il prezzo. Il pulsante per pulire ha la medesima funzione e anche blocco al suo interno, mentre il pulsante per richiamare i dati è differente mandando in esecuzione call get all rows che in questo caso richiama tutto il db o meglio tutto il foglio di quel db, in un formato particolare che poi andremo a modificare grazie al blocco call json text decode with dictionaries della nostra estensione. Tutto quello che verrà codificato lo andremo a salvare nella variabile Table data appositamente creata come dizionario.

Voglio spendere due parole sul formato del dizionario per rendere poi la comprensione del codice più semplice.

Questo è quello che ricaviamo grazie alla nostra estensione , ho volutamente mandato a capo ad ogni createdTime per farvi notare che il testo evidenziato si ripropone più volte e sempre con la solita struttura. I più attenti o pratici del codice scritto avranno notato che si ripropone tre volte, proprio come le nostre righe e infatti sono proprio loro scritte in formato dizionario, le parentesi graffe racchiudono "zone" più importanti mente virgolette e due punti identificano i vari elementi e il loro valore, quelli che poi ritroveremo come key e value. Ecco che compare Link , il nome della colonna , e il suo valore appunto il link dell'immagine, ma anche name e price e l'id della riga che non ha niente a che vedere con la variabile di prima ma identifica appunto la riga con un id assegnato da Airtable. Abbiamo quindi un info sulla data di creazione , l'introduzione a dei campi (fields) che ci fa accedere alle nostre colonne e relativi valori per quella determinata riga.

Immaginiamo tutto questo come conservato in un palazzo dove possiamo muoverci sia tra i vari piani, salendo o scendendo di livello oppure sullo stesso piano muovendoci tra i vari appartamenti, con le loro stanze etc etc . Mantenendo questa similitudine vogliamo che kodular ispezioni tutti i piani del nostro palazzo, su ogni piano individui l'appartamento fields e al suo interno la stanza link, per ogni piano e ci riferisca quello che c'è dentro. Il risultato sarà una lista , nel nostro caso di tre elementi perché abbiamo tre righe, con i valori dei link, e se questa operazione la ripetiamo alla ricerca della stanza price e name avremo tre liste con i loro valori.

In questo modo nella variabile link con il blocco list by walking key path gli stiamo dicendo proprio di ispezionare la variabile Table data in ogni suo livello (walk all at level) alla ricerca dell'appartamento  fields e al suo interno la stanza Link . Quindi ogni volta che viene ritrovato questo specifico percorso fields-link dovrà prelevare il valore salvato all'interno. 

In questo modo avremo una lista con tutti i link, una con tutti i prezzi e una con tutti nomi e in tutte le liste l'elemento sarà salvato nella  posizione uguale alla riga da cui è stato prelevato, elemento 1 dalla riga 1 , l'elemento 2 dalla riga 2 e così via.

Adesso non ci serve altro che mandare in esecuzione un ciclo per posizionare , prelevandoli dalle varie liste, l'elemento 1 in image, title e subtitle, poi passare agli elementi 2 di ogni lista, e infine agli elementi 3 popolando la nostra list view. 

In questo caso il nostro ciclo ci restituisce di volta in volta un numero tra 1 e la lunghezza della lista link (che vi ricordo essere 3 visto che abbiamo tre righe) per usare questo valore all'interno del blocco select list item list nella posizione index. Primo giro preleviamo tutti gli elementi 1 da link, price e score, poi tutti gli elementi 2 e poi 3, l'ultimo campo (subtitle) con l'utilizzo del blocco join aggiunge al valore anche il simbolo €.

Avrete anche notato che oltre alla praticità di questo codice, per come è impostato in automatico identifica quanti cicli deve fare e quanti valori prelevare, se fosse una tabella con 50 righe funzionerebbe lo stesso fino al recupero di tutti valori, cosa che invece con il primo esempio non è possibile ottenere (vi ricordo la condizione id<3 ).

Per questo motivo vi lascio i compiti per casa: saresti capace di modificare il codice mostrato o crearne un altro che dinamicamente si modifichi per lavorare su qualsiasi lunghezza della nostra tabella?

Non mi deludere, aspetto la tua soluzione, o in alternativa potremmo vederne una insieme.

Spero ti sia piaciuto , a presto

Raffaele  

 

 Se hai apprezzato il mio lavoro offrimi un bel caffè 😍