Aplicatia Hello Kitty

Faza I: Pregatim mediul de lucru

  • am setat calculatorul si dispozitivul cu Android
  • am invatat cum functioneaza Designer si Blocks Editor
  • deschidem Designer in browser
  • deschidem Blocks Editor in alta fereastra
  • conectam un dispozitif sau un emulator Android la Blocks Editor

Faza II: Alegem componentele in Designer

  • incepem aplicatia care va contine un buton cu o pisica pe el; cand butonul este apasat pisica miauna
  • ne procuram pisica si mieunatul: png si mp3
  • selectam elementele de care avem nevoie (ele sunt localizate pe partea stanga a ferestrei Designer, sub titlul Palette. Componentele sunt elemente de baza pe care le folosim in aplicatiile Android. Se aseamana ingredientelor dintr-o reteta. Ex: 1, 2

  • cu timpul, vom folosi toate aceste componente. Pentru a utiliza o astfel de componenta, o selectam si o tragem in Viewer in mijlocul lui Designer. Ea va aparea astfel si in lista de componente din dreapta Viewer-ului.
  • pentru a schimba proprietatile unei componente (aspectul si comportamentul in aplicatie), trebuie sa o selectam din lista de componente.

Faza III: Setarea proprietatilor

             
  * din paleta Basic luam un buton
  * pentru ca butonul sa aiba imaginea unei pisici pe el, la sectiunea Properties, sub Image, facem click pe None... si 

Upload New…

  • alegem fisierul imagine din calculator in ferestra care apare si apasam OK

  • setam textul butonului: stergem „Text for Button 1“, lasand aceasta zona goala, pentru a nu avea scris pe fata pisicii si Designer-ul sa arate astfel:

  • daca pisica nu apare integral, setam propretatile Height si Width. Le dam valoarea Fill parent. Click pe buton, ne ducem in dreapta la proprietati, la Width facem click pe Automatic…, alegem Fill parent. Repetam pasii pentru Height.
  • alegem acum o alta componenta: Label. O plasam sub pisica. Schimbam textul din Label1 in Pet the Kitty. Setam fontul la 30. Schimbam BackgroundColor si TextColor cu unele alese de noi.

  • din Palette, de la Media, alegem o componenta de tip Sound. O plasam in Viewer. Oriunde am plasa-o, va aparea in partea de jos a Viewer-ului, in zona marcata Non-visible components.
  • sub panoul Media avem Add… pe care dam click. Alegem fisierul mp3 din calculator si il incarcam.
  • in panoul Properties observam la proprietatea Source atributul None… Facem click pe acesta si punem titlul fisierului tocmai incarcat, pentru ca acesta sa constituie sursa pentru componenta Sound.

Faza IV: Programarea cu Blocks Editor

  • comutam la Blocks Editor (Open the Blocks Editor - dreapta sus in Designer)
  • din stanga lui Blocks Editor, din paleta My Blocks, selectam Button1
  • luam pe Button1.Click si il tragem in zona de lucru

  • blocurile verzi se numesc event handler. Ele specifica cum ar trebui telefonul sa se comporte la anumite evenimente: un buton a fost apasat, telefonul a fost scuturat, utilizatorul isi plimba degetul pe ecran etc. Sunt verzi si folosesc cuvantul 'when'
  • selectam apoi Sound1 si luam blocul Sound1.Play pentru a-l conecta la sectiunea 'do' a blocului Button1.Click. Piesele se vor lipi ca si cele de puzzle si veti auzi un sunet la conectarea acestora.

  • blocurile mov si albastre sunt blocuri de comanda si se plaseaza in corpul unui event handler. Cand event handler-ul este executat, el va rula secventa de comenzi din interiorul corpului sau. O comanda este un bloc care specifica o actiune ce trebuie sa se intample. Ex: sa cante o melodie cand un buton Play Sound este apasat.

Faza V: 'Impachetarea' aplicatiei

  • cat timp dispozitivul (emulatorul sau telefonul/tablet) a fost conectat la App Inventor, aplicatia noastra a rulat in timp real pe acesta. Daca deconectam emulatorul/telefonul/tablet de la Blocks Editor, aplicatia va disparea. O putem face mereu sa revina prin reconectarea dispozitivului. Ca aplicatia sa ruleze fara sa fie conectata la App Inventor, trebuie sa o 'impachetam' pentru a obtine un pachet (fisier apk).
  • pentru a 'impacheta' aplicatia pe telefon, conectam telefonul la Blocks Editor si ne asiguram ca iconita de telefon ce se regaseste in partea dreapta de sus a Blocks Editor este verde.

  • apoi ne intoarcem in Designer si alegem „Package for Phone“ in partea dreapta superioara a paginii designer. App Inventor are 3 optiuni de impachetare:

1. Show barcode: putem genera un cod de bare (de tip QR), pe care il putem folosi pentru a instala aplicatia pe un telefon sau o tableta cu camera foto, cu ajutorul scannerului de coduri de bare, precum ZXing barcode scanner (disponibil gratuit in Google Play). Atentie! Acest cod de bare functioneaza doar pe dispozitivul personal pentru ca este asociat cu contul personal de google. Daca dorim sa partajam aplicatia cu altii prin codul de bare, trebuie sa descarcam fisierul apk in calculator si sa folosim un software tert pentru a converti fisierul in cod de bare.

2. Download to this Computer: putem descarca aplicatia pe calculator ca un fisier apk, pe care il putem distribui si partaja cum dorim, in mod manual,instalandu-l pe alte dispozitive.

3. Download to Connected Phone: putem descarca aplicatia direct pe telefonul care este conectat la Blocks Editor. Aceasta functioneaza chiar daca folosim emulatorul ca si dispozitiv.

Exercitiu: Faceti pisica sa toarca.

Pentru aceasta mergem in Blocks Editor si deschidem Sound1 drawer si tragem piesa Sound1.Vibrate si o plasam sub piesa Sound1.Play.
Vom vedea o iconita galbena de atentionare in coltul stang al blocului, care ne semnaleaza lipsa unei componente.

Piesa Sound1.Vibrate are o deschizatura, ceea ce inseamna ca trebuie sa conectam ceva in aceasta, pentru a specifica mai multe despre functionarea ei. Aici, dorim sa specificam lungimea vibratiei. Numerele sunt calculate in miimi de secunda (milisecunde): pentru a face telefonul sa vibreze jumatate de secunda , trebuie sa punem o valoare de 500 milisecunde. Mergem la paleta Built-In, in Math drawer si tragem piesa numar, plasand-o in golul de la Sound1.Vibrate.

Dupa ce am plasat piesa de puzzle pentru numar,dam click pe numarul 123. Numarul scris pe negru se va lumina si vom tasta 500.

Gata! Observam ca iconita de atentionare a disparut.
Acum conectam telefonul si atingem pisica. Telefonul va vibra si mieuna in acelasi timp.

android_incepatori/laborator/laborator1.txt · Ultima modificare: 2013/08/02 15:30 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