App Inventor: O privire mai atentă

  • Aflați despre programarea bazată pe evenimente
  • Înțelegeți diferitele tipuri de blocuri din MIT App Inventor platforma

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 evenimentul declanșează executarea codului, numit gestionarul evenimentului.

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 App Inventor.

App Inventor are două ferestre pe care le utilizați pentru a vă crea aplicația. Făcând clic pe butonul Designer (în partea dreaptă sus a ecranului), accesați fereastra Designer, unde proiectați interfața cu utilizatorul. Ecranul interfață utilizator este tot ceea ce există î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 APP INVENTOR

App Inventor designer window
1

Paletă

Alegeți componente din Paletă pentru a le adăuga la Vizualizator, care se află în mijlocul ferestrei. Există mai multe sertare de componente de explorat și utilizat.

2

Vizualizator

Trageți componentele dvs. pe Vizualizator. Componentele sunt adăugate de sus în jos, la stânga. Trebuie să utilizați componentele Layout și alinierea pentru a obține mai mult control asupra locului exact în care apar componentele dvs.

3

Lista componentelor

Această listă vă oferă o listă ierarhică a elementelor de pe ecran. Le puteți selecta făcând clic pe ele în vizualizator sau în această listă.

4

Panou de proprietăți

Panoul Proprietăți vă permite să setați proprietățile pentru fiecare componentă, cum ar fi dimensiunea fontului, alinierea, culoarea etc.

5

Componente nevizibile

Componentele invizibile nu apar pe ecran, dar fac totuși parte din aplicație. Ele apar sub ecran atunci când le trageți și le fixaț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.

App Inventor blocks editor
1
Paletă de blocuri

În stânga, veți găsi blocurile pe care le puteți trage în spațiul de lucru. Acestea se află în categorii/drafturi precum Control și Logic.

3

Vizualizator

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 componente

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 apoi în spațiul de lucru.

MANIPULATORI DE EVENIMENTE

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

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.

screen1 orientation changed event block

Atunci când orientarea ecranului este schimbată
Dacă utilizatorul își transformă telefonul din portret (vertical) în peisaj (orizontal), s-ar putea să doriți să faceți ceva, cum ar fi să schimbați aspectul ecranului sau dimensiunea componentelor.

Atunci când poziția cursorului este modificată
Un cursor permite utilizatorului să îl tragă pentru a alege o anumită valoare de-a lungul său. Aceasta poate declanșa o modificare a unei alte componente. De exemplu, puteți mări dimensiunea stiloului într-o aplicație de desen folosind un cursor.

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 App Inventor, blocurile de funcții sunt colorate în violet. Unele limbaje se referă la funcții ca la metode sau proceduri. De fapt, App Inventor se referă în general la acestea ca proceduri. Ele fac ceva, așa că vă puteți gândi la ele ca la blocuri de acțiune.

function blocks

TextToSpeech.Speak
Componenta TextToSpeech poate spune sau vorbi orice text doriți să vorbească.

Camera.TakePicture
Componenta Camera poate face o fotografie cu telefonul.

Sunet.Redare
Componenta Sound poate reda un sunet.

SETTERI ȘI GETTERI

Blocurile verzi se referă la componente și la proprietățile acestora. 

Blocurile de culoare verde deschis care se pot conecta la un alt bloc se numesc getteri, deoarece obțineți valoarea proprietății.

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.

app inventor setter and getter blocks

Textul butonului1
Textul butonului 1 este obținut și stocat în variabila global greeting.

Textul butonului 1
Textul butonului 1 este setat la cuvintele "I love coding. Cuvintele "I love coding" vor apărea pe buton.

Textul etichetei1
Textul etichetei 1 este setat la sursa sunetului 1. Aceasta înseamnă că numele fișierului de sunet va fi afișat în Label1.

Sursa sunetului1
Sursa lui Sound1 (numele fișierului de sunet) este obținută și stocată în proprietatea Text a etichetei Label1, Setarea textului unei etichete afișează în esență valoarea din etichetă, astfel încât numele fișierului de sunet ar apărea în Label1.

Textul din Label1

TextToSpeech primește conținutul textului din Label1 și îl redă. Orice text afișat în Label1 va fi rostit. 

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.

app inventor math blocks

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

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 paleta Blocuri.

app inventor 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

Vizualizați proiectul de pornire în Galeria App Inventor aici, încărcați aplicația în App Inventor,
și urmați instrucțiunile lui Dave din videoclipul de mai jos.

Rețineți că videoclipul începe la 1:11 pentru a sări peste instrucțiunile de încărcare. Aceste instrucțiuni nu sunt necesare dacă ați încărcat proiectul de pornire utilizând link-ul de mai sus.

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: Verificați sertarul Culoare și căutați faceți un bloc deculoare . Apoi căutați în sertarul Math un bloc de numere întregi aleatorii. Culorile sunt formate din 3 numere, RGB pentru roșu, verde, albastru, care variază între 0-255.

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 pentru începători App Inventor ale lui Dave Wolber la appinventor.org