Sunteți pe pagina 1din 11

Facultatea 

de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

Catedra de Electronică Aplicată și                                                        IoT 
      Sisteme Inteligente                                        Internetul tuturor Obiectelor 
 
 
 
 

1. Laborator ‐ Noțiuni introductive despre dezvoltarea aplicațiilor în 
mediul de programare vizuală MIT App Inventor 
 
 
 
1.2. Introducere 
Scopul  acestui  laborator  este  de  a  învăța  noțiunile  fundamentale  necesare  dezvoltării  de  aplicații, 
susținute de sistemul de operare (SO) Android, utilizând mediul de programare vizuală MIT App Inventor. 
Acest  limbaj  (cunoscut  inițial  sub  numele  App  Inventor)  a  fost  dezvoltat  la  început  de  Google.  La 
sfârșitul anului 2011 Google oprește dezvoltarea lui. Ulterior a fost preluat de către MIT – prin intermediul 
MIT Center for Mobile Learning, condus chiar de creatorul original al mediului App Inventer, Hal Abelson. 
Accesul publicului larg la acest mediu și limbaj a fost acordat la începutul anului 2012.  
În mod obișnuit prin programare înțelegem descrierea funcționării unei aplicații prin intermediul unui 
fișier text, ce are la bază o serie de cuvinte cheie, o sintaxă specifică limbajului ales de programare, etc. 
Acest fișier poartă numele de cod sursă. În mediul MIT App Inventor fișierul sursă este descris printr‐o 
programare grafică ce are la bază existența unor blocuri interconectate. Fiecare bloc are o funcție specifică 
și ele se cuplează într‐un mod specific pentru a compune programul final. 
Teoretic  și  practic  se  pot  dezvolta  o  diversitate  foarte  mare  de  aplicații  (jocuri,  aplicații  care  se 
conectează la rețelele de socializare, hărți, aplicații GPS etc.), limitate doar de blocurile existente în mediul 
de dezvoltare. 
 
1.3. Cerințe 
Dezvoltarea  aplicațiilor  se  face  în  mod  integral  pe  serverele  celor  de  la  MIT  prin  intermediul  unui 
browser.  În  acest  moment  sunt  suportate  următoarele  browsere:  Chrome,  Firefox  și  Apple  Safari. 
Internet Explorer sau Edge nu sunt suportate. Acest fapt permite utilizatorilor să lucreze în orice sistem 
de operare doresc (Windows, Mac OS sau Linux) cu aproape orice versiune modernă a respectivului SO. 
Dezavantajul  principal  este  dat  de  necesitatea  existenței  unei  conexiuni  continue  la  internet  pentru 
dezvoltarea aplicațiilor.  
Funcție de modalitatea de testare a aplicațiilor (pe telefon mobil/tabletă sau în emulator) puteți avea 
nevoie de conexiune la Wi‐Fi sau de un cablu USB. 
Astfel cerințele minime din punctul de vedere a sistemelor de operare sunt: 
 Macintosh (cu procesor Intel): Mac OS X 10.5 sau mai nou; 
 Windows: Windows XP, Windows Vista, Windows 7 sau mai bun; 
 GNU/Linux: Ubuntu 8 sau mai nou, Debian 5 sau mai nou. 
Browsere: 
 Mozilla  Firefox  3.6  sau  mai  nou  (dacă  aveți  instalat  în  browser  extensia  NoScript  aceasta 
trebuie dezactivată); 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 1 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

 Apple Safari 5.0 sau mai nou; 
 Google Chrome 4.0 sau mai nou. 
În plus, dacă  veți  testa aplicația  pe o tabletă sau un  telefon SO de pe acestea trebuie să fie minim 
Android 2.3 (Gingerbread). Mai mult, pe aceste dispozitive trebuie să  aveți instalată aplicația  MIT AI2 
Companion App (dacă nu o aveți instalată, instalați‐o!). 
 
1.4. Dezvoltarea primei aplicații 
Scop:  ne  propunem  să  dezvoltăm  un  program  care  să  ruleze  pe  un  telefon/tabletă  cu  sistemul  de 
operare Android și care să aibă un buton și un TextBox. Prin introducerea în TextBox a unui text 
oarecare, în limba engleză, și prin apăsarea butonului textul va fi “citit” (pronunțat) de telefon. 
 
Pentru atingerea acestor obiective, prima dată, trebuie să aveți creat un cont de Google (de gmail). 
Aceasta deoarece logarea în MIT App Inventor se poate realiza doar prin intermediul unui astfel de cont.  
Pașii necesari realizării aplicației sunt: 
1. Tastați următoarea adresă web în browser‐ul dvs.: appinventor.mit.edu. 
2. În partea superioară dați click pe butonul Create apps și imediat vi se va cere să vă logați cu un cont 
Google. 

 
Figura 1.1. Interfața principală a site‐ului web appinventor.mit.edu 

3. Puteți să accesați și direct prin următoarea adresă: ai2.appinventor.mit.edu. 
4. Vi se va cere permisiunea de acces în contul dvs. De aici doar adresa de email va fi luată și verificată – 
nici  o  altă  informație  nu  va  fi  preluată  și  utilizată.  Apăsați  butonul  Allow.  Va  urma  prezentarea 
politicilor și termenilor de utilizare a noului cont – răspundeți prin apăsarea butonului I accept the 
terms of service!. 
5. Fiind logați și acceptând înțelegerea cu MIT App Inventor, puteți trece la etapa următoare: crearea 
unui nou proiect, prin apăsarea butonului Start new project (Projects). 
6. Utilizați numele HelloWorld. 
Atenție: numele unui proiect poate conține doar literele alfabetului, numere sau simbolul 
“underscore” (talpă). 
7. Mediul MIT App Inventor salvează în mod periodic proiectul dvs. la care lucrați, dar este indicat ca de 
fiecare dată când ați finalizat de implementat o anumită funcționalitate a programului dvs. sau ați 
scris destul de mult cod să îl salvați manual: Projects → Save project sau  Projects → Save project as 
... . Astfel serverele App Inventor stochează aplicația dezvoltată. 
Elementul de bază a MIT App Inventor este componenta. Există o serie largă de: 
‐ componente  de  interfațare  ‐  acestea  sunt  elemente  de  interfațare  cu  utilizatorul 
(Button, CheckBox, TextBox, HorizontalArrangement etc.) fiind vizibile sau nu la un 
moment sau altul utilizatorului aplicației; 
‐ componente  de  tip  senzor:  AccelerometerSensor,  GyroscopeSensor, 
LocationSensor. 
‐ etc. 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 2 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

O  listă  completă  a  tuturor  componentelor  și  documentația  asociată  (cu  explicații 


amănunțite a diferitelor proprietăți și evenimente generate de către acestea) o găsiți aici: 
http://ai2.appinventor.mit.edu/reference/components.  Vă  rog  ca  de  fiecare  dată  când 
utilizați o componentă sau îi modificați o proprietate să consultați această documentație. 
În mediul de dezvoltare aceste componente sunt grupate în diferite palete (palette). 
Fiecare componentă poate avea metode, evenimente și proprietăți (care pot fi setate 
sau interogate). Acestea vor fi prezentate detaliat în cele ce urmează. 
Aplicațiile se pot construi în mediul MIT App Inventor prin intermediul a două ferestre 
fundamentale: 
‐ în fereastra App Inventor Designer pot fi selectate și plasate componentele care vor 
alcătui aplicația, dezvoltându‐se astfel interfața cu utilizatorul, vezi Figura 1.2; 
‐ În fereastra App Inventor Blocks Editor, diferitele blocuri existente, unele dintre ele 
asociate cu fiecare componentă în parte, sunt asamblate pentru a specifica acțiunile 
ce  trebuie  realizate  și  modul  de  derulare  a  programului  funcție  de  starea  fiecărei 
componente  în  parte.  Programul  se  dezvoltă  vizual  montând  blocurile  împreună 
precum piesele unui joc LEGO sau a unui puzzle. 
8. Imediat ce este creat un nou proiect componenta Screen cu numele Screen1 a fost adăugată în mod 
implicit ca punct de pornire pentru dezvoltarea aplicației. 
 

 
 
Figura 1.2. Fereastra App Inventor Design de interfațare cu dezvoltatorul 

9. Printr‐o  operație  de  Drag  and  drop  luați  o  componentă  de  tip  Button  și  plasați‐o  pe  interfața  cu 
utilizatorul. 
10. În tab‐ul Components selectând butonul (Button1) redenumiți‐l către: Button_SpeakIt. Redenumirea 
o realizați prin apăsarea butonului Rename din partea de jos a tabului Components. 
Pentru  ușurința  dezvoltării  programelor,  fiecare  componentă  redenumiți‐o  de  o  așa 
natură încât să va vină foarte ușor să‐i identificați în orice moment tipul și funcția. Știind 
tipul componentei veți ști ce acțiuni poate respectiva componentă determina în program. 
De  exemplu,  oricând  în  acest  program  voi  dori  să  acționez  asupra  acestui  buton 
identificat prin Button_SpeakIt voi ști că este o componentă de tip buton care are rolul de 
a lansa în execuție codul care va determina „citirea” (pronunțarea) unui text. 
În  momentul  dezvoltării  codului  având  la  un  anumit  moment  dat  pe  interfața  cu 
utilizatorul butoanele Button1, Button2, Button3 și Button4 vă va fi dificil să le deosebiți 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 3 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

între  ele  și  veți  fi  obligați  să  treceți  de  la  fereastra  App  Inventor  Blocks  Editor  la  App 
Inventor Design și înapoi pentru a verifica funcția fiecărui buton. 
11. Schimbați textul (label‐ul, eticheta) de pe buton. Având selectat butonul (în Components), selectați 
tab‐ul Properties și modificați proprietatea Text în: Speak it !. 
 
 
 
 
Schimbând textul în ” Speak\nit !”, prin înserarea caracterului \n (new‐line) se va însera 
o nouă linie de afișare pe care va apare doar textul „it !”. 
12. Plasați butonul într‐o poziție centrală pe interfața cu utilizatorul. Pentru aceasta selectați interfața cu 
utilizatorul  Screen1,  iar  în  tab‐ul  Properties  asociat  cu  aceasta  alegeți  opțiunea  Center  pentru 
proprietatea AlignHorizontal. 
13. Tot  aici  schimbați  valorile  următoarelor  proprietăți:  AboutScreen  la  Main  screen,  AppName  la  My 
Hello World App, iar Title la Hello World application.  
14. Tot prin Drag and drop plasați pe interfața cu utilizatorul o componentă de tip TextBox. 
15. Schimbații numele componentei în TextBox_ReadFrom (prin butonului Rename din partea de jos a 
tab‐ului Components). 
16. Setați Width  la 100%. 
17. Din cadrul tab‐ului Palette selectați clasa de componente Media, iar de aici prin Drag and drop plasați 
pe  interfața  cu  utilizatorul  componenta  TextToSpeech.  Prin  intermediul  proprietăților  Country  și 
Language puteți schimba modul de pronunțare și accentul semnalului vocal sintetizat. Aceasta este o 
componentă invizibilă (nu va apare pe interfața cu utilizatorul). 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.3. Relația părinte‐copil între diferitele componente 

Componentele  invizibile  sunt  utilizate  pentru  implementarea  diferitelor  funcții,  în 


cadrul programelor dezvoltate, existente și susținute de diferitele dispozitive hardware ale 
dispozitivului Android sau de SO Android. 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 4 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

Între componentele utilizate în cadrul unui program va exista întotdeauna o anumită 
relație.  De  exemplu,  în  Figura  1.3  componenta  Screen1  este  denumită  componentă 
container  sau  tată  pentru  componentele  identificate  prin  Button_SpeakIt, 
TextBox_ReadFrom și TextToSpeech1. Aceste ultime trei componente vor fi componente 
copil. Nu orice tip de componentă poate fi o componentă de tip container. 
Iar acum să începem dezvoltarea programului prin tratarea diferitelor evenimente, lansarea în execuție 
a  metodelor  asociate  cu  diferitele  blocuri,  schimbarea  proprietăților  componentelor  (setters)  și 
interogarea (getters) altor proprietăți a diferitelor componente. 
18. Schimbați  fereastra  actuală  către  fereastra  App  Inventor  Blocks  Editor,  prin  apăsarea  butonului 
Blocks din dreapta sus. 
Pentru  crearea  programelor  vom  utiliza  diferitele  blocuri  care  vor  fi  preluate  din 
fereastra Blocks pe care printr‐o operație Drag and drop le vom plasa în fereastra Viewer 
– vezi Figura 1.4. 
 
 
 
 
 
 
Figura 1.4. Fereastra App Inventor Blocks Editor și fereastra Blocks 

Codul va fi generat funcție de blocurile existente în fereastra Viewer. Dacă există mai 
multe componente de tip Screen fiecare va avea o fereastră Viewer proprie și cod unic 
generat funcție de componentele acelei ferestre. 
Prin  selectarea  unei  componente  plasată  pe  o  anumită  interfață  grafică  blocurile 
asociate vor apare imediat în partea dreaptă a componentei. 
 
 
 
 
 
 
 
 
 
Figura 1.5. O parte din blocurile asociate cu componenta Button_SpeakIt 
Blocurile  se  împart  în  patru  mari  clase  simbolizate  prin  culori  diferite  (Figura  1.6): 
pentru  tratarea  evenimentelor  (event  handlers  –  de  culoare  maro  deschisă),  metode 
(method calls – de culoare violet), pentru interogarea proprietăților (property getters – 
verde deschis) și pentru setarea diferitelor proprietăți (property setters – de culoare verde 
închis). 
 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 5 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

 
 
 
 
 
 
 
 
 
 
Figura 1.6. Cele patru tipuri de blocuri existente 
19. Selectați componenta Button_SpeakIt și prin Drag and drop plasați blocul de tratare a evenimentelor 
de tipul Button_SpeakIt.Click în fereastra Viewer – ca în Figura 1.7.  
 
 
 
 
 
 
 
 
  Un socket pentru 
  introducerea de noi blocuri 
Figura 1.7. Blocul handler al evenimentului (culoare maro deschis): s‐a dat click pe buton 
Un bloc de tip handler al evenimentelor va executa codul, întreaga secțiune de blocuri 
plasate  în  zona  do  (sau  în  zona  socket)  atunci  când  un  anumit  eveniment  a  apărut 
(evenimentul specificat în zona when a blocului) – de exemplu, atunci când un utilizator a 
apăsat butonul Button_SpeakIt – dacă ar fi să particularizăm discuția pe Figura 1.7. 
Atenție!  Întreg codul asociat cu un  eveniment (a  cărui  tratare  a început deja) se va 
executa în totalitate înaintea execuției codului asociat cu orice alt eveniment care a fost 
generat ulterior primului. Evenimentele generat se plasează într‐o coadă de tip FIFO (first 
in first out), primul eveniment sosit va fi primul tratat, în întregime cu tot codul asociat. 
20. A venit momentul să înserăm blocul principal, metoda prin intermediul căreia textul va fi sintetizat în 
semnal  vocal.  Deci:  Blocks  →  Screen1  →  TextToSpeech1  →  Drag  and  drop  metoda 
TextToSpeech1.Speak poziționând‐o în cadrul socket‐ului blocului Button_SpeakIt.Click (vezi Figura 
1.8(a)).  Textul  care  va  fi  pronunțat  de  metoda  TextToSpeech1.Speak  va  fi  cel  care  va  fi  atașat  în 
socket‐ul  message.  Deci,  message  este  un  parametrul  al  metodei  care  trebuie  inițializat  înaintea 
apelării metodei, Figura 1.8. 
O  metodă  poate  avea  unul,  mai  mulți  parametri  sau  nici  un  parametru.  Acești 
parametri sunt niște valori de intrare pentru fiecare metodă. La apelarea metodei aceasta 
poate rula în mod diferit funcție de valorile pe care acești parametri le au. Pentru a face o 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 6 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

paralelă metoda, din MIT App Inventor, este similară cu conceptul de funcție din ANSI C, 
în timp ce parametrii sunt argumentele funcției. 
 
  (a) 
 
 
 
 
 
  (b) 
 
 
 
 
Figura 1.8. (a) metoda TextToSpeech1.Speak și (b) blocul utilizat în setarea proprietății message 
(property setter)  
Un  property  getter  (blocul  cu  verde  deschis  din  Figura  1.8(b))  va  lua  valoarea  unei 
proprietăți (în cazul din Figura 1.8(b) va fi textul (proprietatea Text) din cadrul elementului 
TextBox_ReadFrom) a unei componente (în situația noastră TextBox_ReadFrom) și o va 
livra  mai  departe  –  particularizând  pentru  Figura  1.8  va  livra  informația  metodei 
TextToSpeech1.Speak. 
21. Blocks → Screen1 → TextBox_ReadFrom → Drag and drop blocul getter TextBox_ReadFrom.Text în 
unicul socket al metodei TextToSpeech1.Speak. 
22. Pentru a avea în program dezvoltat și un bloc property setter completați codul cu cele două blocuri 
din Figura 1.9. 
 
 
 
 
 
 
 
 
Figura 1.9.  Programul complet al aplicației care corespunde tuturor cerințelor enunțate anterior 
 
Pentru rularea aplicație pe telefonul mobil/tabletă trebuie ca atât calculatorul cât și telefonul/tableta 
să fie conectate la o rețea care să aibă, în plus, și ieșire la Internet. Calculatorul sau leptopul trebuie să fie 
conectate prin Wi‐Fi sau Ethernet în timp ce telefonul mobil prin Wi‐Fi sau printr‐o legătură de date.  
23. Se execută aplicația MIT AI2 Companion App pe telefonul mobil sau pe tabletă (instalată anterior).  
24. Telefonul mobil trebuie configurat pentru a accepta instalarea de arhive .apk din alte surse în afara 
magazinului virtual de la Google, deci: Settings → Security → Unknown Sources. 
25. Construiți aplicația (din fereastra de browser) Build → Android App ca unrezultat direct veți putea 
instala aplicația pe telefonul dvs. 
26. După compilarea cu succes a programului dezvoltat, un pop‐up (o fereastră) conținând un cod QR va 
apărea  pe  ecranul  calculatorului.  În  aplicația  MIT  AI2  Companion  App  de  pe  telefonul  mobil  sau 
tabletă dați click pe butonul scan QR code şi scanați codul din aplicația App Inventor de pe ecranul 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 7 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

calculatorului  sau  laptop‐ului.  Acest  cod  QR  conține  adresa  unei  locații  din  internet  (o  adresă  a 
serverului App Inventor) de unde se va descărca aplicația. Acest cod este valid doar pentru 2 ore. În 
câteva secunde ar trebui să puteți instala aplicația dezvoltată de dumneavoastră pe dispozitivul mobil. 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.10. Fereastra cu codul QR 
 
Vom continua dezvoltarea micii noastre aplicații punând accent în acest laborator doar pe conceptele 
de  bază,  fundamentale  care  definesc  mediul  MIT  App  Inventer.  Astfel,  vom  continua  prezentarea  cu 
blocurile matematice. 
27. Toate blocuri matematice le găsiți grupate: App Inventor Blocks Editor → Blocks → Built‐in → Math. 
De  aici  aduceți  prin  drag  and  drop  în  fișierul  sursă  al  programului  dumneavoastră  două  blocuri 
matematice de tip număr și un bloc de tip multiplicare, Figura 1.11(a).  
28. Înserați,  deasemenea,  în  App  Inventor  Designer  o  componentă  de  tip  buton  identificată  prin 
Button_Math care inițial va avea textul Math. 
29. Conectați blocurile precum în Figura 1.11(b). 
 
 
  (b) 
  Soket‐uri 
  (a) 
 
Figura 1.11. (a) 2 blocuri de tip număr și (b) un bloc de înmulțire 
 
Observați  din  Figura  1.9  că,  după  cum  este  normal  și  de  așteptat,  atunci  când  se 
setează  proprietatea  Button_SpeakIt.Text  se  trimite  o  nouă  informație  de  tip  text.  În 
schimb, în Figura 1.11 se trimite o informație numerică, dar care va fi afișată corect fără 
nici  o  problemă.  Situații  similare  veți  întâlni  în  multe  locuri  când  nu  veți  fi  obligați  să 
precizați tipul de dată sau veți trimite un alt tip de dată, dar conversia se va realiza în mod 
automat fără intervenția dumneavoastră. De altfel, veți observa ca noțiune de variabilă 
locală sau globală există și în MIT App Invertor dar fără precizarea tipului de dată implicită 
– doar prin mecanismul de inițializare veți ști să spuneți cu ce tip de dată se lucrează.  
Pentru obținerea unui bloc de tip număr aveți opțiunea de a‐l lua prin drag and drop 
din paleta asociată (App Inventor Blocks Editor → Blocks → Built‐in → Math) sau puteți 
da click cu mouse‐ul într‐o zonă liberă a foii de lucru și apoi introduceți de la tastatură un 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 8 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

număr  urmat  de  spațiu.  Prin  apăsarea  tastei  enter  se  va  crea  un  bloc  de  tip  număr 
inițializat cu valoarea pe care dumneavoastră ați introdus‐o deja ‐ vezi. 
 
 
Figura 1.12. O altă abordare pentru plasarea unui bloc de tip număr inițializat 
30. În continuare, implementați operația matematică prezentată în Figura 1.13 și afișați rezultatul ei pe 
componenta Button_Math. 
 
 
 
 
(a) 
 
 
 
 
  (b) 
 
Figura 1.13. (a) Aducerea elementelor necesare și (b) combinarea acestora 
Când un bloc (precum cele de adunare sau multiplicare, prezentate în Figura 1.13 sau 
blocul decizional if ... then ...) are în colțul din stânga sus un pătrat albastru cu o rotiță în 
interiorul  lui  atunci  acel  bloc  este  de  tip  mutator.  Aceste  blocuri  au  proprietatea  că 
numărul de socket‐uri poate fi modificat (crescut sau scăzut) după necesități. Prima dată 
dați  click  pe  acest  simbol.  Apoi,  printr‐o  operație  de  tip  drag  and  drop  plasați  blocul 
numeric din partea stânga‐sus în dreapta (Figura 1.14(a)) și imediat veți observa apariția 
unui nou socket ‐ Figura 1.14(b).  
 
 
 
 
 
(a)  (b) 
 
Figura 1.14. Înaitea – (a) și după – (b) înserarea unui nou socket 
Afișând rezultatul operației anterioare (Figura 1.13(b)) veți observa că relația care a 
fost evaluată a fost (2 + 1) x (3 ‐ 1) x 2. În mediul MIT App Inventor ordinea de evaluare a 
operanzilor este dată de poziția socket‐urilor din blocul matematic. Regula de bază este: 
un bloc este executat doar după ce toate blocurile din soket‐urile sale vor fi executate. 
Din regula anterioară va rezulta și ordinea de efectuare a diferitelor operații numerice. 
31. În continuare dorim să verificăm dacă pronunțarea textului trimis (prin blocurile cod din Figura 1.8(b)) 
s‐a  realizat  în  mod  corect  sau  nu  (de  exemplu,  dacă  subrutinele  din  cadrul  sistemului  de  operare 
Android  au  reușit  să‐și  realizeze  cu  succes  funcția  sau  nu).  Pentru  aceasta  avem  un  handler  pe 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 9 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

evenimentul generat după pronunția textului: Blocks → Screen1 → TextToSpeech1 → drag and drop 
blocul de tratare a evenimentelor TextToSpeech1.AfterSpeaking.  
În mod similar metodelor și blocurile de tratare a evenimentelor pot avea parametri. 
De exemplu, blocul  TextToSpeech1.AfterSpeaking va trata evenimentul care este generat 
după pronunțarea textului de către metoda TextToSpeech1.Speak. Parametrul, result în 
situația noastră (Figura 1.15(a)), va fi unul boolean și va simboliza finalizarea cu succes 
(TRUE) sau obținerea unei erori (FALSE) în pronunțarea textului trimis. Fiecare parametru 
al  fiecărui  bloc  de  tratare  a  evenimentelor  va  avea  propria  semnificație  –  pentru 
identificarea semnificației specifice click dreapta pe blocul de tratare a evenimentului și 
selectați opțiunea Help din fereastra ce se deschide ‐ Figura 1.15(b). 

 
 
 
  (b) 
(a) 
 
Figura 1.15. (a) operațiile ce se pot realiza pe parametrul blocului de tratare a 
evenimentului TextToSpeech1.AfterSpeaking (b) diferitele funcții ce se pot realiza pe 
același bloc 
Parametrii  oricărui  eveniment  pot  fi  utilizați  doar  de  blocurile  de  cod  plasate  în 
secțiunea do (în socket‐ul do) a blocului de tratare a evenimentelor. Deci, doar aici putem 
interoga  acest  parametru  (printr‐un  bloc  getter)  sau  îl  putem  modifica  (printr‐un  bloc 
setter). 
32. Mai departe implementați secțiunea de cod prezentată în Figura 1.16(a). 
 
 
  (a) 
 
 
 
 
  (b) 
 
 
Figura 1.16. (a) Secțiunea de cod utilizată în tratarea erorilor de pronunțare și (b) înserarea opțiuni else 
în cadrul blocului de control if ... then ... 
 
Pentru aceasta: 
33. Aveți  nevoie  de  o  componentă  invizibilă  Notifier  (aceasta  permite  interacțiunea  cu  utilizatorul 
telefonului mobil prin afișarea de mesaje și, eventual, așteptarea răspunsului utilizatorului). Printr‐o 
operație de drag and drop luați o componentă de tip Notifier și plasați‐o pe interfața cu utilizatorul – 
în fereastra App Inventor Designer. 
34. Pentru introducerea opțiunii else, în cadrul blocului if ... then ... țineți cont că acest bloc decizional 
este de tip mutator – vezi Figura 1.16(b). 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 10 | Pagină 


 
Facultatea de Electronică Telecomunicații și                                                                                                      IoT 
                 Tehnologia Informației                                                

35. Testați funcționarea corectă a programului. 
 
1.5. Instalarea emulatorului 
Pentru a lucra cu emulatorul trebuie să instalați componenta aiStarter. Pași de urmat sunt: 
1. Pentru instalare este necesar un cont care să aibă drept de administrator.  
2. Descărcați kit‐ul de instalare de la dresa (are în jur de 80 Mb): http://appinv.us/aisetup_windows. 
3. Lansați în execuție fișierul. 
4. Derulați procesul de instalare răspunzând în mod corespunzător întrebărilor care vi se pun. Nu 
schimbați calea de instalare (care poate fi diferită funcție de SO), dar notați‐o – este posibil ca 
ulterior să aveți nevoie de ea. 
5. Veți  fi  întrebat  dacă  sunteși  de  acord  ca  un  program  de  la  un  unknown  publisher  să  modifice 
sistemul (înserarea de noi componente și modifcarea bazei da date registry). Răspundeți cu yes. 
6. La final veți avea mai multe shortcut‐uri către aiStarter (de exemplu, pe Desktop sau în meniul 
Start menu.  
7. Dacă  doriți  să  utilizați  emulatorul  în  MIT  App  Inventor  trebuie  să  lansați  în  execuție  aiStarter 
manual (de ex., prin dublu click pe icoana de pe desktop). Dacă lansarea este realizată cu succes 
ar trebui să vedeți o fereastră similară cu cea de mai jos. 
 
 
 
 
 
 
 
 
Figura 1.17. Fereastra rezultată în urma lansării în execuție a aplicației aiStarter 
 
1.6. Teme 
Dezvoltați în continuare codul programului pentru atingerea următoarele obiective: 
1. La  executarea  programului  componenta  TextBox  nu  are  implicit  nici  un  text  –  dumneavoastră 
trebuie  să  introduceți  acest  text.  Completați  programul  dezvoltat  astfel  încât  imediat  după 
momentul execuției să apară textul “Hello world!”. 
2. Introduceți  un  buton  suplimentar  în  program,  plasat  pe  aceeași  linie  cu  butonul  ce  realizează 
calculele matematice. La o apăsare pe acest buton – pe el se va afișa cifra 1, la a doua apăsare se 
va afișa cifra 2, la a treia apăsare se va afișa cifra 3, la a patra afișare se va afișa cifra 1 și așa mai 
departe – deci,  acest ciclu va continua la infinit.  
3. În  programul  dezvoltat  anterior,  verificați  dacă  există  text  în  componenta  TextBox.  Dacă  da, 
executați codul anterior prezentat în Figura 1.9. În caz contrar avertizați utilizatorul și finalizați 
imediat execuția blocului handler a evenimentului Button_SpeakIt.Click. 
4. Modificați programul astfel încât mesajul de notificare a utilizatorului să fie prezentat acestuia 
mai mult sau mai puțin. 
5. Introduceți o componentă de tip Label și o altă componentă de tip Button pe același rând în cadrul 
interfeței  cu  utilizatorul.  La  prima  apăsare  a  acestui  buton  se  va  afișa  valoarea  33.  La  fiecare 
apăsare ulterioară a butonului valoarea 33 se va incrementa cu 3 unități. 
6. Introduceți  un  buton  suplimentar  la  a  cărui  apăsare  prelungită  să  determine  închiderea 
programului 

Conf. Dr. Ing. Dan-Marius Dobrea (mdobrea@etti.tuiasi.ro) 11 | Pagină 


 

S-ar putea să vă placă și