Lab. 1. Wprowadzenie do App Inventor

ARCHITEKTURA APP INVENTOR

App Inventor jest narzędziem dostarczanym przez Google (obecnie Google przekazało pieczę

nad projektem do MIT) służącym do tworzenia aplikacji na platformę Android. Narzędzie to wykorzystuje

metody tzw. MDE (ang. Model Driven Engineering), czyli inżynierii sterowanej modelami, dlatego też do

korzystania z App Inventor nie jest niezbędna specjalistyczna wiedza z dziedziny programowania w

Androidzie. Developer zamiast pisać kod, buduje modele z gotowych elementów.

Aplikacje powstałe przy użyciu App Inventor są tworzone przy pomocy przeglądarki internetowej

i specjalnej aplikacji korzystającej ze środowiska Java. Wynikowe aplikacje mogą być uruchamiane na

fizycznych urządzeniach podłączonych do komputera lub na emulatorze. Podobnie jak w przypadku

Google Docs projekty aplikacji są przechowywane na zewnętrznych serwerach.

Na kompletne środowisko developerskie, oprócz środowiska Java, składa się:

1. Android SDK – zestaw narzędzi do tworzenia oprogramowania na platformę Android zawierający

emulator urządzenia.

2. App Inventor Designer – narzędzie dostępne w oknie przeglądarki internetowej służące do

projektowania interfejsu użytkownika.

3. App Inventor Blocks Editor – narzędzie uruchamiane lokalnie na komputerze służące do

projektowania zachowania (logiki) aplikacji.

KOMENTARZ:

1. Posiadanie zainstalowanego Android SDK nie jest wymagane, ponieważ App Inventor dostarcza swój

emulator. Jednakże jego posiadanie pozwala na łączenie do AVD w pełni spersonalizowanego przez

developera.

PRACA Z ANDROID SDK

Android SDK jest dostępny na stronie producenta http://developer.android.com/. Proces

instalacji jest dwuetapowy – najpierw instalowany jest wymagany zestaw narzędzi, w tym „Android SDK

and AVD Manager” (rys. 2), potem użytkownik przy jego pomocy wskazuje pozostałe komponenty do

pobrania z sieci i zainstalowania.

Rys. 1. Architektura App Inventor (źródło: appinventor.googlelabs.com)

Manager składa się z kilku sekcji, przy czym dwie najważniejsze, to Virtual Devices (sekcja

tworzenia i ustawień urządzeń wirtualnych uruchamianych przez emulator) oraz Available packages (lista

paczek do zainstalowania przy pomocy managera). Aby przystąpić do tworzenia aplikacji, należy

zainstalować przynajmniej jedną platformę. W skład platformy wchodzą m.in. narzędzia dla konkretnej

wersji Android OS, niezbędne biblioteki oraz obraz systemu.

Wirtualne urządzenie może być rozumiane jako konfiguracja uruchamiana przez emulator.

Dopuszcza się istnienie wielu konfiguracji opartych o tę samą platformę, ale jedna konfiguracja jest

oparta jednocześnie tylko na jednej platformie.

W celu utworzenia nowego urządzenia wirtualnego, należy przejść do sekcji „Virtual Devices”

aplikacji „Android SDK and AVD Manager” i kliknąć przycisk „New”. Pojawi się okno konfiguracji nowego

AVD.

Rys. 2. Android SDK and AVD Manager

Android SDK zawiera pakiet driverów USB do natywnych urządzeń firmowanych przez Google (Nexus

One, Nexus S itp). Drivery do innych urządzeń muszą być doinstalowane ręcznie.

Podczas zajęć nie jest wymagane posiadanie urządzenia pracującego pod kontrolą systemu Android

(testowanie aplikacji będzie się odbywać za pomocą emulatora) jednak możliwość podłączenia takiego

urządzenia może ułatwić niektóre aspekty jak np. testowanie reakcji na potrząsanie

ROZPOCZĘCIE PRACY Z APPINVENTOREM

Elementy oprogramowania niezbędne do pracy są już zainstalowane w Sali laboratoryjnej.

Aby rozpocząć projektowanie należy otworzyć w przeglądarce adres: beta.appinventor.mit.edu

Aplikacja wymaga połączenia z kontem google, należy podać dane konta gmail (w przypadku braku konta

trzeba je wcześniej założyć).

Po poprawnej weryfikacji otrzymujemy widok podobny do poniższego ale bez istniejących projektów

Nowy projekt zakładamy klikając w przycisk New. Po kliknięciu w nazwę projektu przechodzimy do

Designera

PROJEKTOWANIE INTERFEJSU PRZYKŁADOWEJ APLIKACJI (APP INVENTOR DESIGNER)

Narzędzie projektowania interfejsu użytkownika (App Inventor Designer) można podzielić na

kilka obszarów:

1. Paleta komponentów – komponenty interfejsu użytkownika podzielone m.in. na grupy: Basic, Media,

Animation, Social, Sensors, Screen Arrangement, LEGO ® MINDSTORMS®.

2. Podgląd interfejsu – podgląd ułożenia komponentów interfejsu użytkownika na ekranie.

3. Komponenty – lista komponentów użytych do zbudowania interfejsu użytkownika.

4. Właściwości – właściwości wybranego komponentu.

1

2

3 4

Przykładowa aplikacja wykonuje bardzo prostą operację: wyświetla w telefonie obrazek kota,

który „mruczy” (wibruje) po dotknięciu i miauczy przy potrząsaniu telefonem

Z palety Basic wybieramy komponent Label i umieszczamy w oknie Screen 1, następnie w oknie

properties ustawiamy parametry tak aby tekst opisu wyglądał jak na rysunku.

Jako kolejny element dodajemy przycisk Button. W oknie properties w polu image wybieramy

obrazek do wyświetlenia jako przycisk (zostanie on załadowany na serwer), warto też skasować

standardowy tekst przycisku.

Potrzebny będzie również dźwięk miauczenia. Aby go dodać wybieramy z palety Media element

sound i przeciągamy na ekran. Komponent dźwięku jest elementem niewidocznym, jego symbol pojawia

się pod ekranem aplikacji.

W oknie properties komponentu należy wybrać odpowiedni plik dźwiękowy (source) do

odtworzenia.

Taki zestaw wystarcza do uruchomienia edytora blokowego. Klikamy w open blocks editor

MODELOWANIE ZACHOWANIA I URUCHAMIANIE PRZYKŁADOWEJ APLIKACJI (APP INVENTOR BLOCKS EDITOR)

Do modelowania zachowania aplikacji służy App Inventor Blocks Editor (uruchamiany poprzez

kliknięcie przycisku „Open the Blocks Editor” w prawym górnym rogu App Inventor Designer). Można go

podzielić na 2 główne obszary:

1. Paleta komponentów – paleta komponentów służących do definiowania zachowania komponentów

interfejsu użytkownika i aplikacji.

2. Podgląd – podgląd modelu przedstawiającego zachowanie aplikacji.

W celu zdefiniowania zachowania przykładowej aplikacji, należy przejść do zakładki „My Blocks”

palety i dodać do modelu komponent odpowiadający za reakcję na kliknięcie na przycisk („when

button1.click do ...”).

Następnie wewnątrz puzzla „button1.click” umieścić wywołanie metody sound1.Vibrate (paleta

dla Sound1)

Wygląd puzzla Vibrate sugeruje potrzebą dostarczenia dodatkowej informacji, w tym przypadku

czasu wibrowania w milisekundach. Aby dostarczyć taką informację należy wykorzystać komponent z

palety math – numer. Pewnym ułatwieniem jest szybki dostęp do podstawowych komponentów. Klikając

myszą na pustym obszarze aktywujemy wybór rodzaju komponentu

Z palety math wybieramy numer i dołączamy do Vibrate a następnie edytujemy wartość

W obecnym stanie możemy już przetestować czy telefon zawibruje po dotknięciu obrazka.

W celu uruchomienia aplikacji na emulatorze urządzenia opartego na platformie Android, należy

kliknąć przycisk „New emulator” a po przygotowaniu i uruchomieniu instancji emulatora (należy

odczekać, aż zostanie przygotowana karta SD) na przycisk „Connect to Device”. Aplikacja zostanie

zainstalowana i uruchomiona na wybranej instancji emulatora. (Test wibracji na emulatorze jest niezbyt

efektowny)

KOMENTARZ:

1. Nie należy zapominać, że możliwe jest również uruchomienie aplikacji na fizycznym urządzeniu

podłączonym do komputera. Konieczne jest wcześniejsze upewnienie się, że zainstalowane są drivery

dla danego urządzenia oraz w ustawieniach androida włączone jest debugowanie USB.

Po uruchomieniu aplikacji jest ona aktualizowana „na bieżąco” w miarę wprowadzania zmian w

programie lub wyglądzie okien

Kolejnym etapem jest aktywowanie dźwięku miauczenia przy potrząsaniu telefonem

W tym celu musimy dodać sensor akceleracji w Designerze. Po wybraniu z palety Sensors przeciągamy go

na ekran.

Po powrocie do Edytora powinniśmy móc otworzyć nową paletę w zakładce My Blocks. Wybieramy z niej

element obsługi zdarzenia accelerometerSensor1.shaking

Pozostaje tylko dołączyć element sound1.play

W efekcie zdarzenie polegające na zmianie położenia telefonu spowoduje odtworzenie dźwięku.

-------------------------------------------------------

KOMPONENTY ODPOWIEDZIALNE ZA WYKONYWANIE POŁĄCZEŃ TELEFONICZNYCH

Sekcja „Social” palety komponentów zawiera komponenty, które mogą posłużyć do zbudowania

aplikacji wykonującej połączenia telefoniczne.

Komponent „PhoneCall” służy do inicjowania połączenia telefonicznego ze wskazanym

urządzeniem. Posiada m.in. następujące metody i atrybuty:

call MakePhoneCall – zainicjowanie połączenia,

PhoneNumber – numer telefonu,

set PhoneNumber to – ustawienie numeru telefonu.

Komponent „PhoneNumberPicker” umożliwia wybór z listy kontaktów telefonu. Posiada m.in.

następujące metody i atrybuty:

when AfterPicking do – kontener na akcje do wykonania po wybraniu kontaktu,

when BeforePicking do – kontener na akcje do wykonania przed wybraniem kontaktu,

Picture – obrazek kontaktu,

ContactName – nazwa kontaktu,

EmailAddress – adres e-mail kontaktu,

PhoneNumber – numer telefonu kontaktu.

ĆWICZENIE 1 - Samodzielne.

Zaprojektuj i uruchom aplikację, która po kliknięciu na przycisk „Wybierz kontakt” pozwala na wybranie

kontaktu z listy kontaktów w telefonie, a następnie umożliwia wykonanie połączenia na wybrany numer

po kliknięciu na ustawiony obrazek kontaktu. Przygotuj listę kontaktów tak, aby przynajmniej część

kontaktów miała przypisane zdjęcie.