Wprowadzenie do App Inventor

Transkrypt

1 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 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.

2 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.

3 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

4 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: 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.

5 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.

6 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

7 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

8 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, Address adres 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.