Drag&Drop! Blocchi di codice.
Chi ha già letto la prima parte riguardante Thunkable avrà una mezza idea di cosa vedremo oggi, per tutti gli altri prima di iniziare vi lascio il link del primo post così da avere un quadro più generale.
Dopo aver curato per bene il look della nostra app non possiamo che passare al lavoro vero e proprio iniziando a editare il codice che darà vita al nostro progetto.
Ci troviamo nel BLOCK EDITOR , i menù in alto non cambiano rispetto al DESIGN EDITOR ,
mentre sul lato destro troviamo in basso il cestino
per cancellare i vari blocchi, i tasti per lo zoom e il riposizionamento all'interno dell'area di lavoro. Sul lato sinistro invece iniziamo a fare sul serio e subito ci ritroviamo i nostri amici blocchi che saranno la nostra gioia e dolori 😂.
Il progetto della foto è completamente vuoto , nessun componente è stato ancor aggiunto, eppure già abbiamo la possibilità di editare il nostro codice. Questi sono dei blocchi di base che troveremo sempre disponibili , diciamo che vanno a sostituire quelle incomprensibili stringhe di codice che vengono utilizzate , per esempio nel linguaggio HTML, per impostare un controllo con il comando "IF" oppure "FOR EACH" , per introdurre le variabili, le procedure, per lavorare con il testo piuttosto che con i numeri, o lavorare con le liste. Al momento questi termini potrebbero sembrare incomprensibili ma ti assicuro che sono meno complicati di quanto sembrano, e te lo dice uno che con i linguaggi informatici è messo male 🙈.
Oltre a questi blocchi, divisi per colore a seconda della tipologia così da facilitare l'individuazione, troveremo quelli relativi allo screen con i quali potremo lavorare sull'aspetto (altezza, larghezza, orientamento, title bar, etc) oppure interagire con quello che succede al suo interno ( all'avvio, uso del tasto back, messaggi ed errori , etc). L'ultima parte è riservata a ANY COMPONENT che ci permetterà di gestire con più facilità , per esempio, più componenti dello stesso tipo nello stesso momento. Ci arriveremo non ti abbattere 👍. Last but not least, rimane lo zainetto (BACKPACK) in alto a destra che ci permetterà di salvare al suo interno blocchi singoli o pezzi di codice in modo da poterli prelevare velocemente, sia tra screen diversi sia tra progetti diversi. Un modo semplice e carino per emulare un copia e incolla, procedura che ci farà risparmiare molto tempo e che all' inizio non era possibile fare se non con qualche piccolo trucco da esperto informatico; ma questa è un'altra storia e ormai archiviata grazie alla dedizione dei programmatori che gestiscono Thunkable.
Dopo aver curato per bene il look della nostra app non possiamo che passare al lavoro vero e proprio iniziando a editare il codice che darà vita al nostro progetto.
Ci troviamo nel BLOCK EDITOR , i menù in alto non cambiano rispetto al DESIGN EDITOR ,
mentre sul lato destro troviamo in basso il cestino
per cancellare i vari blocchi, i tasti per lo zoom e il riposizionamento all'interno dell'area di lavoro. Sul lato sinistro invece iniziamo a fare sul serio e subito ci ritroviamo i nostri amici blocchi che saranno la nostra gioia e dolori 😂.
Il progetto della foto è completamente vuoto , nessun componente è stato ancor aggiunto, eppure già abbiamo la possibilità di editare il nostro codice. Questi sono dei blocchi di base che troveremo sempre disponibili , diciamo che vanno a sostituire quelle incomprensibili stringhe di codice che vengono utilizzate , per esempio nel linguaggio HTML, per impostare un controllo con il comando "IF" oppure "FOR EACH" , per introdurre le variabili, le procedure, per lavorare con il testo piuttosto che con i numeri, o lavorare con le liste. Al momento questi termini potrebbero sembrare incomprensibili ma ti assicuro che sono meno complicati di quanto sembrano, e te lo dice uno che con i linguaggi informatici è messo male 🙈.
Oltre a questi blocchi, divisi per colore a seconda della tipologia così da facilitare l'individuazione, troveremo quelli relativi allo screen con i quali potremo lavorare sull'aspetto (altezza, larghezza, orientamento, title bar, etc) oppure interagire con quello che succede al suo interno ( all'avvio, uso del tasto back, messaggi ed errori , etc). L'ultima parte è riservata a ANY COMPONENT che ci permetterà di gestire con più facilità , per esempio, più componenti dello stesso tipo nello stesso momento. Ci arriveremo non ti abbattere 👍. Last but not least, rimane lo zainetto (BACKPACK) in alto a destra che ci permetterà di salvare al suo interno blocchi singoli o pezzi di codice in modo da poterli prelevare velocemente, sia tra screen diversi sia tra progetti diversi. Un modo semplice e carino per emulare un copia e incolla, procedura che ci farà risparmiare molto tempo e che all' inizio non era possibile fare se non con qualche piccolo trucco da esperto informatico; ma questa è un'altra storia e ormai archiviata grazie alla dedizione dei programmatori che gestiscono Thunkable.
![]() |
Button (sinistra) - Label (destra) |
Come possiamo vedere dall' immagine in alto aggiungendo componenti la lista BLOCKS si popola ( e si aggiungono in automatico anche nella sezione ANY COMPONENT) e aprendo il relativo sottomenù notiamo che i blocchi disponibili non saranno sempre gli stessi. Alcuni saranno ricorrenti come per esempio quelli relativi al background, alle dimensioni, la visibilità; ed altri specifici come quelli relativi al BUTTON che gestiscono il click non li ritroveremo tra quelli della LABEL in quanto non è cliccabile.
Per ora non voglio entrare nello specifico per non creare troppa confusione ma vi consiglio di dare uno sguardo all' interfaccia di Thunkable e provate a giocare un pò con il drag&drop , curiosando tra i vari menù, aggiungete componenti e spulciate i vari settaggi e relativi blocchi così da prendere confidenza con il programma.
Un consiglio, se rimanete con il mouse su un blocco si aprirà una notifica con una piccola spiegazione di quel componente, la stessa cosa che nel DESIGN EDITOR è possibile fare cliccando sul punto interrogativo vicino al nome del componente; il link MORE INFORMATION vi rimanda alla specifica sezione nei DOCS.
Dimenticavo, il mappamondo in alto a destra vi permette di cambiare la lingua del testo nel caso aveste difficoltà con l'inglese; il mio consiglio però è provare a lasciare in inglese visto che non è quasi mai troppo difficile la traduzione ( e vi allenate anche ) sia perché la traduzione in italiano non sempre è precisa e potrebbe risultare più incomprensibile dell' inglese 😵. Per tutto il resto c'è sempre zio Google e il suo traduttore 👌.
Dubbi, consigli ? Dillo nei commenti!
Se hai apprezzato il mio lavoro offrimi un bel caffè 😍
Commenti
Posta un commento