I.E.S. Cuenca Minera Dto.

Tehnologie

APP INVENTOR

Indice:
1.- INTRODUCERE....................................................................................................................................2
2.- ELEMENTE DE PROGRAMARE ÎN APP INVENTOR..............................................................3
2,1,.- SENTINȚE................................................................................................................................3
2,2,- CONDIȚII..............................................................................................................................4
2,3,,- BUCLES.........................................................................................................................................4
2,4,-VAVARIABILE....................................................................................................................................5
2.5.- EVENIMENTE.......................................................................................................................................5
3.- DE UNDE ÎMI DESCARC APP INVENTOR?....................................................................................6
4.- INTERFAȚĂ............................................................................................................................................7
5.- INSTALARE PE MOBIL pentru testare și depanare (debug)....................................................10
5,1,- PRIMA FORMĂ:.......................................................................................................................10
5.2.- A DOUA FORMĂ:....................................................................................................................12
5.3.- A TREIA FORMĂ:.....................................................................................................................13
6.- INSTALAREA PROGRAMULUI ÎN MOBILUL NOSTRUPARA USO DE USUARIO
(COMPILARE).......................................................................................................................................14
6.1.- SALVAREA PROGRAMULUI..........................................................................................15
7.- ACTIVITĂȚI.....................................................................................................................................16

-1-
I.E.S. Cuenca Minera Dto. Tehnologie

1.- INTRODUCERE
Android este un sistem de operare gratuit care este utilizat de multe telefoane mobile actuale (telefoane
inteligente = smartphone), este bazat pe LINUX. Android aparț ine Google. La un anumit interval de timp
apar noi versiuni: 1.5 (Cupcake), 1.6 (Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2
(comanilă), 4.0 (Sandviș cu îngheț ată), 4.1 (Bălegar de jeleu), 4.2 (Bălegar de jeleu - Ursuleț de gumă), 4.3 (Bălegar de jeleu)

Bean), 4.4 (KitKat), 4.5 (kit kat), 5.0 (Lollipop) ...

Androidul poate fi programat cu ușurință și putem realiza programe pentru formule matematice,
jocuri, locație pe hărțile Google, mișcarea unui robot prin Bluetooth, răspuns automat
de SMS,...

Pentru a învăța să programez pe Android am nevoie de un computer și de o conexiune la Internet.

calculatorul poț i face programele ș i le poț i testa într-un emulator instalat pe acelaș i calculator.
Dacă ai un telefon mobil sau o tabletă cu Android, poți transfera programele realizate pe mobil pentru a le viziona.
cum funcționează și să le folosești.

Pentru a programa Android, există forme indicaționale:

1.- ConAndroid SDK ș i Eclipse. Programele sunt realizate scriind coduri în Java. Este modul în care
utilizează programatorii buni.
2.- Prin intermediul unei aplicații de plată (aproximativ 40 €) numită (B4A)

BASIC4Android, pentru a realiza programe într-un mod similar cu cel în care se face cu Visual Basic
3.- Prin intermediul App inventor. Este o modalitate intuitivă de a crea programe, situând convenabil

instrucțiunile ca și cum ar fi piese ale unui puzzle. Vom folosi App Inventor pentru a realiza
programe. Ceea ce trebuie să faci este să fii conectat la Internet pentru a putea utiliza App inventor:

- App Inventor a apărut pe 12 iulie 2010 și s-a deschis pentru întregul public pe 15 decembrie
2010.
- A fost dezvoltat de Hal Abelson de la MIT și inginerii de la Google Ellen Spertus și Liz
Looney, împreună cu David Wolber, profesor la USFCA și divulgator al aplicației.

-2-
I.E.S. Cuenca Minera Dto. Tehnologie

Aprincipiul lunii august 2011Google a anunț at că nu va mai întreț ine această aplicaț ie, dar că
la aș crea cod liber destinat educația.
a
- O săptămână mai târziuInstitutul Tehnologic din Massachusetts (MIT), o instituț ie de
educație superioară privată situată în Cambridge, Massachusetts (SUA), a anunțat că se va ocupa
del proiect.
Pe 31 decembrie 2011, App Inventor de la Google a încetat să funcționeze.
El4 martie 2012Institutul Tehnologic din Massachusetts (MIT) a reluat
proiect pe Internet.
La sfârș itul lunii decembrie 2013, MIT lansază AI 2, o nouă versiune a App Inventor:
[Link]
- În noiembrie 2014 apare opțiunea de limbă, cu care putem vedea majoritatea
elemente în spaniolă.
- El15 iulie 2015dispare App inventor (vechiul). Există o aplicație web pentru
treceți proiectele .zip din App inventor la .aia din App inventor [Link]ție online.

2.- ELEMENTE DE PROGRAMARE ÎN APP INVENTOR

Programele se realizează prin blocuri, care sunt un fel de piese de puzzle.
Nu are un program sursă scris în text. Să vedem câteva dintre aceste blocuri:

2,1,.-SENTINȚ E
Al programar necesitamos a menudo să-i spunem computerului să facă ceva. În App Inventor există
numeroase blocuri care sunt instrucț iuni de programare. Se distinge rapid deoarece exprimă o
acț iunea de realizat cu un verb la imperativ. Cele mai frecvente suntapel, setydef(abreviatura de
define). În plus, blocurile care sunt propoziț ii sunt disponibile doar în două culori:albastrupara
modificarea variabilelor sau proprietăț ilor unui obiect ș iportocalăparalelarea funcț iilor. În imaginea următoare
se văd câteva exemple de instrucț iuni pentru a diviza un text în părț i, a-l converti în litere mari,
schimbaț i înălț imea, textul sau vizibilitatea unui cadru de text sau definiț i o variabilă.

-3-
I.E.S. Cuenca Minera Dto. Tehnologie

2,2,- CONDIȚ II
Adesea trebuie să realizăm diverse acț iuni în funcț ie de faptul că ceva se întâmplă sau nu. În App
Inventator pentru a condiț iona programul nostru, avem structuridacă-atunci, dacă-atunci-altfel, în timp ceyalege:

În toate aceste blocuri se poate observa cum avem în partea superioară un spațiu pentru a se potrivi cu
test o întrebare pe care o pune programul pentru a decide pe unde să continue fluxul său. Primele trei
structurile sunt obișnuite în majoritatea limbajelor, ultima, choose, este practic la fel ca if-
then-elsecon cu diferența că permite returnarea unei variabile în funcție de îndeplinirea sau nu a testului.

2,3,,- BUCLES
Un bucle provoacă executarea repetată a mai multor instrucțiuni. În App inventor avem la dispoziție
bucleswhile, for rangeyforeach.

Primul va executa blocul de instrucțiuni care se potrivesc în secțiunea do atâta timp cât se îndeplinește
condiția care reflectă [Link] rangees buclele tipice „for” din alte limbaje de programare și,
ca atare, are opțiunile de a alege numele variabilei care iterează, începutul, sfârșitul și dimensiunea
săriturile de iterație. În cele din urmă, foreach este un iterator peste elementele unei liste.

-4-
I.E.S. Cuenca Minera Dto. Tehnologie

2,4,- VARIABILE
Dispunem de instrumentele pentru a defini și a schimba variabile. Tipul poate fi numeric sau un
textul și „se declară” atunci când i se atribuie o valoare pentru prima dată.

În graficul anterior se vede cum se declară o variabilă numită „total_alumni” ș i i se dă un

valoarea numerică de 30. De asemenea, se văd două blocuri foarte importante în App Inventor. Limbajul său contează
cu o structură de date numitălistă(lista) care este similar cu array-urile din alte limbaje de programare
programare. Se vede blocul cu care se defineș te lista „alumni” (se defineș te gol neadăugându-i
ningúnitem) ș i de asemenea se vede blocul în care se adaugă două elemente la lista elevilor. În acest
exemplu se adaugă textul care conț in cutiile de text „TextBox1” ș i „TextBox2”.

2.5.- EVENIMENTE
Este indispensabil ca programele să fie capabile să răspundă la interacțiunea utilizatorului cu
interfața. Acolo își câștigă importanța blocurile de App Inventor, pentru a executa acțiuni în
răspuns la evenimentele care apar pe telefon sau tabletă.
Numele diferitelor evenimente depind de obiectul care le provoacă. Un buton semnalează când
s-a făcut clic pe el, în timp ce accelerometrul semnalează când a fost agitat telefonul mobil,
mesageria de când am primit un mesaj, obiectul Twitter de când am fost menționați
în acea rețea socială, camera foto de când s-a făcut o poză și tot așa mai departe.

5
I.E.S. Cuenca Minera Dto. Tehnologie

În imaginea anterioară se pot vedea unele dintre aceste evenimente. Din această selecție se observă că cu
App Inventor nu dispune doar de obiecte care pot fi plasate pe ecran, cum ar fi un buton sau o imagine,
ci și de multe alte obiecte care ne oferă acces la funcționalitățile pe care le au telefoanele și
tablete Android. Avem acces la Internet, Bluetooth, putem efectua apeluri, trimite și primi mesaje,
coordonatele de poziție GPS, etc.
De asemenea, se poate observa cum toate evenimentele au structura „Când evenimentul se desfășoară”, și sunt
de culoare verde. Au această culoare pentru că fac parte din secțiunea „Blocurile mele” în mediul de dezvoltare.
„Blocurile mele” este locul unde se citesc sau manipulează proprietățile diferitelor elemente care au fost
plasate manual în mediul de design: butoane, busolă, etichete, casete de text, etc.

3.- DE UNDE ÎMI DESCARC APLICATIA INVENTOR?

Aplicaț ia inventorno este un program pe care trebuie să-l descarci pe computer. Funcț ionează în cloud.
computing, programul funcț ionează prin conectarea la Internet, tu lucrezi cu programul conectat
direct către serverul App inventor. Este ca o pagină web ș i pe ea efectuezi operaț iile.
Ai nevoie doar de un cont de gmail.
NOTA:există versiunipentru a le putea instala pe computerș i a lucra fără a fi conectat la internet
(offline).

-6-
I.E.S. Cuenca Minera Dto. Tehnologie

Pentru a funcționa ai nevoie dea avea instalat JAVADe asemenea, ai nevoie de un cont Google
Gmail.

Pentru a programa, intră în următoarea adresă ș i autentifică-te cu tine adresă de email de

gmail...

[Link]

4.- INTERFAȚ Ă

-7-
I.E.S. Cuenca Minera Dto. Tehnologie

La figura muestrala ventana del diseñador:

[Link]ț ine toate elementele pe care le putem insera în aplicaț ia noastră. Există
elemente grafice precum casete de text, butoane, pânză de desen (Canvas) ș i elemente care nu
se văd pe ecranul telefonului mobil, ca bază de date (TinyDB), accelerometru, cameră video, etc.

[Link] ecranului simulează aspectul vizual pe care îl va avea aplicaț ia pe mobil.

Pentru a adăuga un element pe ecran, trebuie să-l tragi din paletă ș i să-l eliberezi în vizor.
elementele care nu au vizibilitate trebuie de asemenea să fie trase în vizualizator ș i automat se
se vor muta sub el sub titlul „Componente non-vizibile”
[Link]ă lista componentelor care au fost plasate în proiect. Orice
componente care a fost tras ș i eliberat din palet în vizor va apărea acolo. Dacă se doreș te
ș tergeț i-l pe cel din lista de componente unde se află butonul care permite ș tergerea acestuia.
[Link]ă diferitele imagini ș i sunete care vor fi disponibile pentru proiect.
Orice fiș ier de imagine sau audio pe care doriț i să-l folosiț i în aplicaț ie trebuie să fie inserat folosind
este apartat pentru a fi disponibil.
[Link]ăț ide fiecare dată când un component este selectat în Viewer, în Properties vor apărea
toate detaliile care pot fi schimbate ale acestui component. De exemplu, când faci clic pe un
componente TextBox se poate schimba în Proprietăț i culoarea, textul, fontul, etc. Pentru cei care
au folosit înainte medii de dezvoltare de tipul Visual Studio pe Windows sau Gambas în
Linux le va fi familiar această modalitate de lucru.

Acesta este mediul în care se proiectează aplicația. Pentru a putea efectua programarea este
Este necesar să dai clic pe butonul din colțul din dreapta sus cu textul „Deschide editorul de blocuri”.
Aceasta va face ca browserul să avertizeze că va descărca o aplicație care se va lansa cu Java Web Start.
În timp ce aplicația se descarcă, un text indicativ va apărea în partea de jos a ecranului.
carga

La terminarea încărcării, dacă aplicaț ia care permite execuț ia sau simularea nu este instalată
mobilul va apărea acest mesaj:

-8-
I.E.S. Cuenca Minera Dto. Tehnologie

După ce acceptați mesajul, editorul de blocuri de programare va apărea în sfârșit:

Aceasta este ecranul pe care îl vom folosi pentru a crea programele care interacț ionează cu interfaț a
grafic. Se poate observa cum este împărț it în două părț i foarte clare: un imens pânză în „alb” la
dreapta unde se vor trasa blocurile de programare ș i la stânga meniurile care oferă acces
acelor blocuri.

Meniul este format din trei taburi: Built-In, My Blocks ș i Advanced, ș i sub fiecare dintre ele
apar datorită diferitelor meniuri care vor permite selectarea blocurilor disponibile în fiecare caz.

1.Încorporatconț ine blocurile care compun limbajul de programare propriu-zis,

distribuite în secț iunile Definiț ie, Text, Liste, Matematică, Logică, Control ș i Culori.
[Link] melea fost menț ionat anterior ș i va conț ine o listă a elementelor care au
au fost plasate pe ecranul Vizualizatorului din designer pentru a putea fi accesate prin program.
proprietăț i ș i evenimente
[Link] o filă care permite accesarea la nivel global a unor proprietăț i comune

-9-
I.E.S. Cuenca Minera Dto. Tehnologie

toate elementele pe care le-am plasat în Vizualizator ș i care sunt de acelaș i tip. De exemplu,
La plasarea unui pair de butoane va apărea "Any Button" ș i se vor putea schimba acolo câteva proprietăț i
care afectează simultan toate butoanele.

În colț ul din dreapta sus al editorului de blocuri de programare se pot vedea de asemenea
butonii care oferă acces pentru a se conecta cu un telefon Android care ar fi conectat la calculator sau pentru a lansa
emulatorul.

Putem lucra în spaniolă, în engleză, italiană...

În aceste zile, App Inventor 2 online permite doar coduri de maximum 5 MB.

5.-INSTALARE PE DISPOZITIVUL MOBIL pentru testare ș i depanare (debug).

Când am terminat programul, trebuie să vedem dacă funcționează. Pentru asta, sunt 3 modalități de
verifică-l:

5,1,- PRIMA FORMA:

1.- Transferați programul pe telefonul dvs. mobil prin WiFi și aplicația MIT AI2Companion App.
(Aceasta este modalitatea recomandată).
Conectează-ți telefonul mobil la aceeași rețea WiFi la care este conectat computerul pe care lucrezi.

-Instalați MIT AI2 Companion pe telefonul dumneavoastră mobil:[Link]

10
I.E.S. Cuenca Minera Dto. Tehnologie

- Lansează programul MIT AI2 Companion pe care l-ai instalat pe telefonul tău mobil.

- Pe calculator, apasă pe Conectare și apoi pe AI Companion. Îți va apărea un QR și un cod.

- Pe telefonul tău va apărea acest ecran. Introdu codul anterior sau

bine scanează QR-ul.
Programul va ajunge la telefonul tău mobil.

-11-
I.E.S. Cuenca Minera Dto. Tehnologie

- Programul va rămâne conectat până când îl deconectăm (Conectare / Reiniț ializare conexiune)

- Dacă schimbăm ceva în Designer sau în Blocuriimediat va trece la programdel

mobil

În acest fel putem depura (debug) programele pe care le realizăm până funcț ionează
corect

5.2.- A DOUA FORMĂ:

2.- Instalămun EMULATOR pe calculatorul nostru cu Windows(este emuladorde asemenea
vale pentru LINUXdeș i este mai greu de instalat), astfel putem face testele de
funcț ionarea în emulatorul computerului ș i când va funcț iona corect, îl vom transfera pe mobil.

În acest caznu ne trebuie telefon mobil sau Wifipentru a testa aplicaț ia noastră.
([Link]

- Instalam pe calculatorul nostru cu Windows App Inventor și aiStarter.

[Link] MB)
(De asemenea, acest program poate fi instalat pe LINUX, dar este puțin mai complicat)

- Pornește elaiStarter pe computerul tău.

- În programul nostru, facem clic pe Conectare / Emulator

Al cabo de un rato va apărea în Windows-ul nostru un

emulator de Android.

- 12 -
I.E.S. Cuenca Minera Dto. Tehnologie

La fel ca în cazurile anterioare, dacă schimbăm ceva la Designer sau la Blocuri, acea schimbare
pasaráal Emulador.

NOTĂ:dacă vrei ca emulatorul să se pună în formă orizontală, apasă combinaț ia de taste

Ctrl F11

5.3.- A TREIA FORMĂ:

3.- În cazul în carenu avea WiFi, ne vom conecta programul de lacalculatorul mobil
prin cablu USB.([Link]

- Instalăm pe calculatorul nostru cu Windows App Inventor ș iaiStarter.

[Link] MB)

(De asemenea, acest program poate fi instalat pe LINUX, dar este puțin mai complicat)

Instalează pe telefonul tău mobilMIT AI2 Însoț itor:[Link]

wifi

Pornește-l pe computerul tăuaiStarterș i conectează laptopul la telefon prin USB.

- Porneș te elCompanion MIT A2pe mobil.

- Verificați dacă conexiunea funcționează:[Link]

-Vezi programul pe care îl realizezi și apasă Connect / USB Aplicația ta va fi transferată pe mobil.
va începe să funcționeze.

Programul va fi trimis pe telefonul tău mobil.

Programul va rămâne conectat până când

deconectăm (Conectare / Resetare conexiune)

- Si schimbăm ceva în Designer sau în Blocuri

imediat va trece la programde pe mobil.

- În acest fel putem depura (debug) programele

să realizăm până când funcț ionează corect

- 13 -
I.E.S. Cuenca Minera Dto. Tehnologie

6.- INSTALAREA PROGRAMULUI PE TELEFONUL NOSTRU PENTRU UTILIZARE DE CĂTRE UTILIZATOR

(COMPILARE)
Pentru a încărca programele deja compilate pe telefonul tău, este convenabil ca acesta să aibă un scanner.
de Cod QR, ș i dacă telefonul tău nu îl are, descarcă ș i instalează-l, de exemplu:Scanner de Coduri de Bare ZXing.

Am văzut 3 forme dedepurareprogramul. Dacă avem deja programul nostru

odată terminat, putem să-l transferăm pe calculator ș i de acolo pe telefon. Un lucru este depurace îl
facem prinConectareș i că realizăm procesul de creare, corectare a erorilor ș i teste de
aplicaț ia.

Când avem aplica ț ia complet terminatăpentru utilizarea ș i distribuirea sace

o compilăm, asta esteGeneraun fiș ier de [Link] conț ine aplicaț ia

pregătită pentru instalarea sa.

În acest caz vom copia fiș ierul pe calculatorul [Link]ș i de la calculatorul nostru
porUSBlo putem transfera pe mobil.
O altă formă ar fi să obț inem pe computerul nostru codul QR al programului nostru, pentru a apoi
scanează QR-ul cu telefonul mobil ș i trimite-l [Link] este forma recomandată.

Aceste două forme le putem realiza prin...Genera

- 14 -
I.E.S. Cuenca Minera Dto. Tehnologie

6.1.- SALVAREA PROGRAMULUI

Aș a cum am văzut, putem crea programul nostru ș i vom obț ine un fiș ier de forma
[Link] putem salva pe computerul nostru ș i instala pe telefon pentru a funcț iona.
Fiș [Link] denumeș teprograma compilat, adică pregătit pentru a fi instalat ș i
a funcț iona.
Dar dacă vrem să păstrăm codul sursă pentru a-l îmbunătăț i mai târziu sau pentru a-l împărtăș i,
trebuie să apăsăm pe...

Proiectele mele / Exportă pe computerul meu proiectul (.aia) selectat.

Vom obț ine fiș [Link] putem împărtăș i.

Fiș [Link] ar fi codul sursă, adică putem vedea în felul în care este realizat.

- 15 -
I.E.S. Cuenca Minera Dto. Tehnologie

7.- ACTIVITĂȚ I

Bibliografia

- OBSERVVATORIO TEHNOLOGIC : „Utilizarea Appinventor în disciplina Tehnologii de

Informații și Comunicații
- IES Fco. Romero Vargas (Prof. Juan Antonio)

- Curs de app inventor (Ș coala Superior Inform)ática, - Univ. Castilla La Mancha

- 16 -