Thunkable: O privire mai atentă

  • Aflați despre programarea bazată pe evenimente
  • Înțelegerea diferitelor tipuri de blocuri din platforma Thunkable

Acestea sunt activitățile pentru această lecție:

EVENIMENTE

Aplicațiile mobile se bazează pe programarea în funcție de evenimente. 

Programarea bazată pe evenimente se bazează pe evenimente, mai degrabă decât pe rularea codului de sus în jos. Unele programe își execută tot codul odată, însă aplicațiile mobile funcționează în funcție de modul în care utilizatorul interacționează cu ele.

Aplicațiile mobile funcționează pe baza evenimente, care sunt lucruri care se întâmplă pentru a declanșa execuția codului. Un exemplu ar fi - utilizatorul face clic pe un buton. Evenimentul este atunci când utilizatorul dă clic. Iar codul care se execută atunci când are loc acest eveniment se numește operator de evenimente.

OPRIȚI-VĂ ȘI DISCUTAȚI

Vă puteți gândi la câteva moduri în care interacționați cu telefonul dvs. și la ceea ce face telefonul? Iată câteva pentru a începe:

  • Când faceți clic pe o pictogramă pentru o aplicație, aplicația se deschide.
  • Când faceți clic pe "trimite" pentru un mesaj text, acesta trimite mesajul și emite un sunet.
  • Atunci când încercați să vă conectați la o aplicație, aplicația solicită o parolă.
girls discussing

Să începem prin a analiza diferitele părți ale platformei Thunkable.

Thunkable are două ferestre pe care le utilizați pentru a vă construi aplicația. Făcând clic pe Design în bara de meniu din partea de sus (stânga sus a ecranului), accesați fereastra Designer, unde proiectați interfața cu utilizatorul. Fereastra interfață utilizator este tot ceea ce se află în aplicația dvs. cu care un utilizator poate interacționa. Aceste lucruri pot fi butoane, bare de navigare, casete de text, imagini etc.

FEREASTRĂ DE DESIGNER THUNKABLE

Thunkable designer window
1

Lista componentelor

Toate componentele pe care le-ați adăugat la aplicație apar aici, organizate ierarhic în funcție de ecran.

3

Spațiu de lucru

Trageți componentele dvs. pe telefon  în acest spațiu de lucru central. Aveți control asupra locului în care sunt plasate componentele, precum și asupra dimensiunii lor.

2

Adăugați componente

Glisați componentele vizuale din acest panou în spațiul de lucru. 

4

Panou de proprietăți

Panoul Proprietăți vă permite să setați proprietățile pentru fiecare componentă. Proprietățile sunt caracteristici diferite pe care le puteți seta pentru fiecare componentă, cum ar fi lățimea, înălțimea și culoarea acesteia. Selectați o componentă pe machetă și apoi puteți modifica oricare dintre proprietățile acesteia în panoul Proprietăți.

Atunci când cineva utilizează aplicația dvs., acesta va interacționa cu interfața dvs. de utilizator, făcând clic pe butoane, introducând text etc. Depinde de dvs. să decideți ce ar trebui să facă aplicația dvs. și să o programați să facă acele lucruri.

EDITOR

Făcând clic pe "Blocuri", veți ajunge la Editor de blocuri în care efectuați toate codificările. Trageți blocurile din panoul din stânga în spațiul de lucru din centrul ecranului.

Thunkable blocks editor
1
Paletă de blocuri

În partea stângă, veți găsi paleta de blocuri. În partea de sus se află componentele IU. Fiecare componentă din aplicația dvs. are propriul set de blocuri. Veți face clic pe componentă pentru a afișa blocurile pe care le puteți trage în spațiul de lucru.

4

Spațiu de lucru pentru codare

Acesta este spațiul dvs. de lucru în care trageți toate blocurile. Puteți să le mutați, să le fixați și să le conectați între ele. De asemenea, puteți șterge orice bloc de care nu aveți nevoie.

2

Blocuri de bază

Blocurile de bază sunt blocuri de codare standard care trebuie utilizate în aplicația dvs. Acestea sunt clasificate în funcție de tipul lor și sunt codificate prin culori.

3

Caracteristicile aplicației

Acestea sunt caracteristici invizibile pe care le puteți adăuga la aplicația dvs. Puteți face clic pe una pentru a o adăuga, apoi puteți seta proprietățile și puteți trage blocuri de cod pentru funcția respectivă.

MANIPULATORI DE EVENIMENTE

Blocurile de gestionare a evenimentelor în Thunkable sunt de culoare aurie și au forma unui bloc deschis, astfel încât puteți prinde blocuri în interiorul acestuia. Aceste blocuri se execută numai atunci când are loc evenimentul respectiv.

Thunkable button click event block

Când se face clic pe buton
Ați folosit deja acest lucru. Atunci când utilizatorul face clic pe un anumit buton, ați dori ca aplicația să facă ceva, cum ar fi să deschidă un alt ecran sau să trimită un mesaj.

Thunkable list-viewer item click event block

Când se face clic pe un element din ListViewer
Un ListViewer este ca un meniu derulant, astfel încât acest eveniment are loc atunci când utilizatorul alege un element din listă. Aplicația ar trebui să facă ceva cu elementul pe care se face clic.

Thunkable screen opens event block

Când se deschide un ecran
Acest eveniment este utilizat atunci când doriți să faceți ceva la prima pornire a aplicației sau când aplicația trece la un alt ecran. Puteți seta variabile sau actualiza informații din cloud.

FUNCȚII

Funcțiile sunt blocuri de cod care fac ceva. Acestea pot fi rulate de mai multe ori în cadrul unei aplicații. În Thunkable, blocurile de funcții sunt colorate în violet. Unele limbaje se referă la funcții ca la metode sau proceduri. Ele fac ceva, așa că vă puteți gândi la ele ca la blocuri de acțiune.

function blocks

Spune
Această funcție permite aplicației să spună sau să rostească orice text doriți să rostească.

Pornirea cronometrului și redarea sunetului
Componenta Timer poate începe numărătoarea. Iar aplicația poate reda un sunet.

SETTERI ȘI GETTERI

Blocurile verzi se referă la proprietățile componentei. 

Blocurile de culoare verde deschis se numesc getteri, deoarece se obține valoarea proprietății.

Thunkable getter blocks

Textul butonului 1
Textul este obținut și salvat în variabila numberChoice.

Timer1's Time în secunde
Valoarea secundelor cronometrului este obținută și stocată în textul Lablel1, astfel încât valoarea este afișată în etichetă. 

Setterele sunt de culoare verde mai închis și pot fi fixate, cu o fantă deschisă la capăt. Acest lucru vă permite să setați valoarea proprietății.

Thunkable setter blocks

Textul butonului 1
Textul butonului Button1 este setat la cuvintele "Click me!"

Label1.Text
Label1's Text este setat la Timer1's Time în secunde.

IntervalMilliseconds al Timer1
Timer1's IntervalMilliseconds (cât de des se oprește) este setat la 3000, sau 3 secunde.

Cele mai bune practici: Reamintiți-le elevilor că acest lucru este exact ca și codificarea reală. Vocabularul ciudat (funcții, getteri, setteri) pe care îl folosim este exact ceea ce folosesc programatorii.

 

Întrebări orientative pentru elevi: Vă puteți gândi la câteva funcții zilnice pe care le faceți? (de exemplu: coaceți o prăjitură, vă spălați pe dinți - orice are pași repetabili). Funcțiile sunt foarte asemănătoare cu algoritmii!

Sfaturile mentorilor sunt oferite cu sprijinul AmeriCorps.

stylized A, AmeriCorps logo in navy

BLOCURI DE DATE

Atunci când utilizați blocuri setter, ați putea utiliza alte blocuri încorporate care reprezintă date sau informații care pot fi utilizate în aplicația dvs. Unele exemple de blocuri de date care pot fi utilizate sunt prezentate mai jos.

thunkable math blocks

Numere
Valorile numerice pot fi utilizate ca date într-o aplicație. Aceste blocuri pot fi găsite în sertarul Math din secțiunea Core a paletei de blocuri.

thunkable text block

Text sau șiruri de caractere
Textul, denumit uneori șiruri de caractere, poate fi utilizat ca date. Acestea sunt litere, cuvinte și propoziții care pot fi utilizate într-o aplicație. Blocurile se găsesc în sertarul Text din secțiunea Core a paletei de blocuri.

thunkable boolean blocks

Boolean
Acest tip de date are doar două valori posibile - adevărat sau fals. Aceste blocuri pot seta sau testa "starea" a ceva și vor fi utilizate în condiționale, despre care veți afla mai multe.

ACTIVITATE: TUTORIAL PENTRU PLĂCI DE SUNET

Durată estimată: 45 de minute

Urmați tutorialul video de mai jos

Descărcați fișierele media aici (urmăriți videoclipul lui Dave pentru mai multe detalii)
Apoi urmăriți videoclipul lui Dave de mai jos pentru a utiliza Event Handlers și Functions pentru a reda discursuri în aplicația dvs.

PROVOCARE

În cadrul activității, ați utilizat:

  • Blocuri de manipulare a evenimentelor
  • Blocuri funcționale

Să încercăm să folosim câteva blocuri setter și getter prin adăugarea la aplicația Soundboard.

Atunci când utilizatorul face clic pe orice imagine pentru a reda discursul asociat, schimbați culoarea de fundal de fundal a ecranului.

Îl puteți schimba într-o anumită culoare, dar apoi nu puteți reveni cu ușurință la culoarea inițială, negru, așa că, în schimb, schimbați fundalul ecranului într-o culoare aleatorie. 

 Indicație: Consultați sertarul Culoare pentru a vedea cum puteți obține o culoare aleatorie.

REFLECȚIE

Acum că ați învățat mai multe despre diferitele blocuri de cod, gândiți-vă la soluția aplicației dvs:

De ce componente veți avea nevoie pentru aplicația dvs.?
Ce evenimente vor avea nevoie de manipulatori de evenimente în aplicația dvs.?
Care sunt acțiunile care vor avea loc atunci când evenimentele sunt declanșate în aplicația dvs.?

REVIZUIREA TERMENILOR CHEIE

  • Interfața cu utilizatorul - tot ceea ce se află în aplicația dvs. cu care un utilizator poate interacționa
  • Designer - fereastră în care puteți adăuga componente la aplicația dvs. și puteți proiecta aspectul acestora
  • Editor de blocuri - fereastra în care codificați blocurile pentru aplicația dvs.
  • Eveniment - ceva care se întâmplă pentru a declanșa execuția codului
  • Manipulator de evenimente- blocuri de cod care spun aplicației dvs. ce să facă atunci când are loc un eveniment
  • Programarea bazată pe evenimente - programarea bazată pe evenimente, mai degrabă decât rularea întregului cod de sus în jos
  • Funcții - un bloc de cod care se execută și poate fi executat de mai multe ori

RESURSE SUPLIMENTARE

Consultați mai multe tutoriale Thunkable ale lui Dave Wolber la draganddropcode.com

Ambasadorul studenților Meenakshi Nair este liber cursul Thunkable pe Udemy este o altă resursă excelentă!