Documente Academic
Documente Profesional
Documente Cultură
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ă);
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.
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
î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
Î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).
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
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
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
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
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).
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