Un metodo semplice per programmare idoneo a tutti anche ai più giovani.
Ci sono diversi programmi che consentono di creare App per smartphon, vi presenterò Thunkable semplicemente perchè è il primo che ho usato, ma ne esistono divesrsi simili. Nel dettaglio è un sistema di programmazione non a riche di codici ma in maniera grafica a blocchi, non so se conoschete Skratch ma usa la stessa logica.
Iniziamo visitando il sito ( https://thunkable.com ) per accedervi bisogna essere in possesso di un email gmail o Apple.
Una volta entrati vi troverete nel vostro MY WARKSPACE dove troverete tutti i vostri progetti, e sopratutto troverete il pulsante + CREATE NEW PROJECT , che vi portera nella vero ambiente di lavoro.
Prima di procedere credo sia utile prendere inmano il vostro smartphone e scaricare APP “Thunkable” che potra essere utile per testare direttamente i vostri progetti sul vostro smartphone. Ricordati di usare la stessa mail di accesso su entrambi, altrimenti non vedrai i progetti creati.
Trornando al web , ecco com’è il sito (il 06/10/2024):
Colgo da subito l’occasione per farvi conoscere un grande dei tutorial e corsi on-line, sia nel mondo dell’elettronica che della programmazione, sto parlando di Paolo Aliverti, che oltre ad aver scritto diversi manuali molto interessanti ha creato e sta continuando a sviluppare video guide su youtube. Dunque anche per quanto riguarda Thunkable ci sono diversi video a disposizione che vi consiglio di vedere. Sperando di non allontanarvi dal mio Blog vi lascio un link .
( https://www.youtube.com/watch?v=Kzgb8Io6pwk&list=PL9_01HM23dGFBmtctwsQAv5S0dHeJnD3K )
Sicuro du aver fatto cosa gradita ai miei lettori ed a Paolo Aliverti , continuo con la spigazione.
Proseguiamo cliccando in nuovo progetto (+ NEW PROJECT) vedrete :
A questo punto cliccate su “Create Your Own Project” che significa letteralmente “crea il tuo progetto”. Ti chiedera altre informazioni tipo il nome del progetto la categoria , l’organizzazione e se vuoi rendere publico il tuo progetto o solo privato. Sarà obbligatorio solo scegliere il nome , l’organizzazione e la Privacy, poi cliccate su CREATE.
Nel mio caso , Project Name sarà “Hello World” , Organization : “my Workspace” , Category lascio vuoto e Privacy “Public”, poi clicco CREATE.
Questo sarà l’ambiente di lavoro :
Per iniziare faremo il classico programmino Hello World , cioè dovremo creare un programma che ci consenta di scrivere hello world” su una casella e che tramite un pulsante stampi una scritta sul video.
Sulla sinistra del nostro ambiente di lavoro troveremo COMPONENT TREE che sono i componenti che abbiamo caricato per programmare, nel nostro caso useremo una LABEL, BUTTON e UN TEXT INPUT. Per prendere questi componenti li troviamo subito sotto nell’area ADD COMPONENTS, dove usando il mouse li trascineremo direttamente sopra alla sagoma dello schermo dello smartphone, posizionandoli come meglio credete. Fatta questa operazione vedrete che i componenti scelti e trascinati saranno replicati anche il COMPONENT TREE.
La mia Workspace :
E’ ora di notare che in alto a sinbistra ci sono due cartelle DESIGN e BLOCKS, rispettivamente centro dove disegnerete la vostra app , posizionando i componenti, e l’altra dove programmerete ablocchi la vostra App. Prima di passare alla programmazione è bene rinominare i componenti usati per ricordarci a cossa servono, ovvio in questo caso è veramente semplice che potrebbe essere inutile ma è bene iniziare ad abbituarsi ad usare una logica di lavoro. Io chiamerò Il BUTTON1 , bt_stamp e TEXT_INPUT1 , input e LABEL1 in label. Per cambiare il nome bastera selezionare il componente da COMPONENT TREE e andare nella colonna di destra dove vedrete tute le caratteristiche del componente selezionato e con il pulsante con i 3 puntini cliccate su rinomina e procedere a rinominarli. Vi ricordo che questa operazione non è obligatoria. una precisazione si possono rinominare i componenti sia nel lato programmazione (quello che vi ho illustrato sopra), sia nel lato disegno cioè per esempio la scritta button sopra al tasto la possiammo rinominare come STAMPA o SCRIVI. lo faremo andando nella cartella DESIGN e cliccando sopra al tasto o altro componente da rinominare con il tasto sx del mouse, verranno caricate tutte le carateristiche del oggetto selezionato a dx dello schermo , nel nostro caso se avete seguito le mie direttive vetrete che il bottone lato programmazione si chimerà bt_stamp e subito sotto ci sarà sdcritto Button, ancora più in basso rivedrete la scritta Button ma in questa casella è rescrivibile , sarà proprio qui che cambieremo il nome con STAMPA o SCRIVI . Cosi :
Iniziamo la programmazione a blocchi, dunque in alto a sx sclicchiamo sulla cartella BLOCKS , ora il programma ci mostrera un foglio bianco centrale , mentre a sx avremo tutti i componenti i module i core ecc… vi ricordo che premendo il tasto bt-stamp andremo a stampare il testo che scriveremo sulla casella input e il programma la scrivera o in gergo stamperà nella label in basso.
A sinistra sotto UI components : vedremo tutti i nostri componenti clicchiamo su bt_stamp e compariranno tutte le frasi di programmazione legato a questo bottone, scegliamo la prima cioè (when bt-stamp Click do) e trassciniamola sul foglio bianco.
Dopo aver posizionato la parte di programma che reagisce al click sopra al bottone dobbiamo dirgli cosa fare dopo il click ed andreamo a posizionare una parte di codice all’interno di questa figura aranzione che si aggancera come in un puzzle, andiamo a cliccare sopra al componente Label e vedremo tutti i codici utilizzabili, sceglieremo SET LABEL ‘S TO LABEL e la agganciamo dentro alla figura arancione
cosa abbiamo ottenuto finora ? che al click del bottone setteremo Label a ricevere un testo da qualche altro codice o Label fissa. mi spiego meglio se nel blocco rosa dove c’è scritto Label tra le virgolette scrivessi CIAO MONDO
AL clic del bottone scrivera “ciao mondo dentro la label” :
Ma non è quello che volevamo, ma serviva per farvi vedere nel dettaglio come funziona , ora andiamo a sostituire la Label CIAO MONDO con un altro codice che prendiamo cliccando sul componente “input”
e come vi ho mostrato nella foto sopra scegliamo il codice “input ‘s text” e trasciniamola sopra alla label CIAO MONDO, ottenendo questo :
con questa combinazione diciamo che al Cclick del bottone setteremo la label a ricevere un testo che preleveremo dalla casella input. Ora siamo pronti a simulare il funzionamento per così verificare se tutto funzioannte o se ci sono errori.
Per provedere al test cliccare in alto a dx dove c’è l’icona con un monitor e un triangolino di play al centro, come ho indicato nella foto sopra. si avvierà la simulazione di uno smartphone vedremo questo :
Ora se scriviamo HELLO WORLD su tyupe here e poi clicchiamo il bototne scrivimi dovremo veder comparire HELLO WORLD nella Label in basso. così :
Ok funziona !! un programma bruttino ed inutile ma ottimo come primo esperimento di presentazione, Iniziate a speriemntare con queste conoscenze basilari così da prenderci confidenza…. Sperando di essere stato chiaro e comprensibile vi aspetto al prossimo articolo su Thunkable……
Buon Divertimento…. PB