Aplicatia Magic 8 Ball

Ce este Magic 8 Ball?
R: http://en.wikipedia.org/wiki/Magic_8-Ball

Faza I: Apasand un buton, auzim un sunet
Aplicatia finala Magic 8 Ball va oferi o predictie din o lista pe care noi am desemnat-o. Pentru inceput, vom face un buton cu o poza pe el si il vom programa sa declanseze un sunet la apasare.

DESIGN: App Inventor Designer

1.Deschidem fereastra Designer, mergem la http://appinventor.mit.edu si facem click pe „Invent“.

2.Intrucat deja am mai facut o aplicatie (Hello Kitty), vom fi redirectionati automat spre Designer in care va aparea ultimul proiect la care am lucrat. Facem click pe „My Projects“ in coltul de sus stanga al ecranului, pentru a merge la lista de proiecte. Apasam „New“ si denumim proiectul ceva gen „Magic8Ball“(atentie: nu avem voie sa folosim spatii).

3.Salvam o imagine si un sunet oferite de profesor intr-un director.

4.Pe coloana stanga a Desginer-ului, deschidem paleta Basic si tragem o component buton in Viewer.

5.Setam poza pe buton: apasam Ok pe nou adaugatul buton pentru a ii vedea proprietatile in panoul Properties in dreapta. Sub „Image“ apasam pe cuvantul „None…“ si o fereastra mica de selectie va aparea. Apasam butonul „Add“ si cautam imaginea salvata in director. Selectam fisierul, apasam OK si inchidem fereastra. Apasam OK din nou in panoul de proprietati.

6. Mergem la campul de text in panoul properties si stergem textul afisat pe buton.

7. Din paleta Media, tragem o componenta de tip Sound in panoul Viewer. Atentie: intrucat sunetul nu este o parte vizibila a aplicatiei, el apare in josul panoului Viewer, ca si componenta Non-visible.

8. Setarea unui fisier ca si sursa pentru componenta sound: facem click pe nou adaugata componenta sound sa ii vedem proprietatile in panoul Properties pe dreapta. Sub „Source“ facem click pe caseta mica a cuvantului „None…“ si o fereastra de selectie va aparea. Apasam butonul „Add“ si cautam fisierul salvat in director. Il selectam si apasam OK pentru a inchide fereastra. Apasam OK din nou pe panoul Properties.

Urmeaza sa mergem in Blocks Editor pentru a programa comportamentul acestor componente.

BUILD: Blocks Editor

In coltul de sus dreapta a Designer, apasam butonul Blocks Editor. Asteptam cateva momente cat acesta se incarca. Necesita ceva timp si adesea ne cere acceptul de cateva ori, sau ok-ul sau sa apasam „keep“, cat timp programul java se descarca in calculator. Trebuie sa ne asiguram ca in susul sau in josul browserului nu au aparut mesaje de accept.

Acum o sa ii spunem aplicatiei cum sa se comporte cand butonul este apasat. Asta este foarte simplu cu App Inventor, deoarece codul programului consista doar in 2 piese.
Odata ce Blocks Editor s-a deschis, exista cateva optiuni in partea stanga a ecranului. Le denumim „Pallettes“ cu „Drawers“.

In paleta My Blocks, facem click pe drawer-ul Button1. Tragem piesa Button1.Click in zona de lucru. In paleta My Blocks apasam pe drawer-ul Sound1, tragem piesa Sound1.Play in zona de lucru si o inseram in blocul when Button1.Click. Se vor uni ca si piesele magnetice de puzzle.

TEST: testam aplicatia de pana acum pe dispozitiv sau emulator

Faza II: Predictia

Acum ca butonul declanseaza un sunet, vrem sa extindem acea actiune si sa include alta: sa ii dam utilizatorului o predictie.
In primul rand vom avea nevoie de 2 etichete: Label1 va afisa intructiunile si Label2 va afisa predictia aleasa. O sa folosim blocuri pentru a programa „list picker“-ul pentru a alege dintr-o lista de predictii. De fiecare data cand butonul este apasat, aplicatia va schimba textul din Label2 pentru a afisa predictia aleasa.

DESIGN: App Inventor

Ne intoarcem la fereastra Designer.

1. Din paleta Screen Arrangement, tragem componenta Vertical Arrangement. Prima data, ea va arata doar ca o cutie goala, care cand punem lucruri inauntru, App Inventor va sti ca vrem sa le listam vertical (una sub cealalta).

2. Din paleta Basic, tragem componenta Label si o punem in interiorul componentei vertical arrangement. In panoul Properties schimbam proprietatea „Text“ a Label1 in „Pune o intrebare oracolului Magic 8 Ball“

3. Din paleta Basic, tragem inca o componenta de tip Label (Label2) in cutia de tip vertical arrangement chiar sub Label1. Schimbam proprietatea „Text“ a Label2 in “Atinge Magic 8-Ball pentru a primi raspuns.” Acum tragem si imaginea in interiorul cutiei de tip Vertical Arrangement deasupra celor 2 etichete. Aceasta le va ajuta sa se alinieze pe verticala.

Acum e momentul sa ne intoarcem la Block Editor pentru a programa componentele pe care tocmai le-am adaugat la proiect. (Nu uitati! Blocks Editor ruleaza intr-o fereastra in afara browserului, reprezentata printr-o iconita Java ce arata ca o cescuta de cafea.)

BUILD: Blocks Editor

Acum vine partea amuzanta. O sa facem o lista de predictii si o sa programam butonul sa aleaga un element din lista si sa il afiseze in interiorul Label2. Acest buton va declansa de asemenea sunetul pe care l-am programat in Faza I. Iata pasii:

1. Din paleta My Blocks, facem click pe Label2 pentru a vedea toate blocurile sale asociate. Tragem setul albastru Label2.Text si il inseram deasupra Sound1.Play. Atentie: Button1.Click se va mari automat pentru a gazdui noul bloc.

2.In paleta Built-In, facem click pe drawer-ul Lists. Tragem blocul pick random item si il conectam la deschizatura blocului Label2.Text.

3.In paleta Built-In, facem click pe Lists din nou, tragem blocul make a list si il conectam la deschizatura „list“ din partea dreapta a blocului pick random item.

4.In paleta Built-In, facem click pe drawer-ul Text, tragem un bloc text si il conectam la deschizatura blocului make a list.
Facem click direct pe cuvantul „text“ astfel incat acesta sa se accentueze. Tastam noul text aici. Ne gandim la proverb, zicale, sau ce vrem sa include in lista de predictii. Scriem prima predictie in acest nou bloc de tip text.

5.Atentie: cand conectam un nou bloc de tip text, blocul make a list creeaza automat o noua deschizatura. Repetam astfel pasul anterior pentru fiecare predictie pe care vrem sa o adaugam. Conectam fiecare bloc text la blocul pick random item.
(Idei pentru raspunsuri: http://en.wikipedia.org/wiki/Magic_8-Ball)

Blocurile ar trebui sa arate astfel:

Avem acum o aplicatie Magic 8 Ball functionala ce prezice viitorul cu certitudine :D. Haideti sa o testam!

TEST: testam aplicatia de pana acum pe dispozitiv sau emulator

Faza III: Agita telefonul, primeste predictia!

Desi aplicatia Magic 8 Ball este functionala acum, exista o metoda prin care ea poate deveni inca si mai amuzanta. Putem utiliza accelerometrul pentru a face telefonul sa raspunda la zgaltaieli in loc de a raspunde la click-ul pe buton. Aceasta va face aplicatia sa para si mai mult o jucarie reala Magic 8 ball. Atentie: aceasta faza poate fi facuta doar pe un telefon sau o tableta echipate cu un accelerometru. Daca utilizati un emulator, sariti peste aceasta faza.

DESIGN: App Inventor

Din paleta Sensors, tragem o componenta senzor AccelerometerSensor. Se va duce automat in zona “Non-visible components” din fereastra Viewer. Aceasta este singura componenta noua de care avem nevoie, asa ca ne intoarcem la Blocks Editor pentru a schimba programul.

BUILD: Blocks Editor

1.In drawerul MyBlocks, facem click pe AccelerometerSensor, apoi tragem in afara blocul for when AccelerometerSensor.Shaking.

2. Deconectam toate blocurile din interiorul Button1.Click si le mutam in interiorul blocului AccelerometerSensor.Shaking. Atentie: putem muta toate sectiunile conectate facand click pe cea mai de sus sau cea mai de la stanga si tragand-o. Piesele lipite vor veni si ele.

3.Stergem blocul Button1.Click pentru a curate zona de lucru.

Ar trebui sa arate astfel:

TEST: testam aplicatia de pana acum pe dispozitiv sau emulator

Exercitiu:
In loc de (sau in completare) a face predictia sa apara ca si text, putem sa facem oracolul sa o zica cu voce tare?
Indiciu: componenta text-to-speech este sub paleta Other Stuff in Designer.
Atentie: Majoritatea dispozitivelor Android au capacitatea text-to-speech (TTS), dar daca intampinati probleme cu componenta in App Inventor, trebuie sa vedeti cum sa instalati/activati TTS pe dispozitiv.

android_incepatori/laborator/laborator2.txt · Ultima modificare: 2013/08/03 02:13 de către daiana.negulici
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0