Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska

Transkrypt

1 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz został opracowany przez Fundację Coder Dojo Polska i jest opublikowany na licencji CC BY-SA (

2 Przygotowanie do pracy Wprowadzenie i konfiguracja programu 1. Uruchomienie programu App Inventor MIT App Inventor 2 pracuje z poziomu przeglądarki internetowej, zaś wszystkie własne projekty i postępy prac zapisywane są na naszym koncie Google. Co za tym idzie, nie ma potrzeby instalacji programu lokalnie, na komputerze, zaś do naszych prac mamy dostęp z każdego urządzenia. Aplikację uruchomimy otwierając stronę: Do własnych projektów przechodzimy, wybierając Create (1). Po kliknięciu przycisku zostaniemy poproszeni o zalogowanie się na konto Google, na którym chcemy pracować w App Inventorze. i W menu Resources (2) znajdziemy dużo przydatnych materiałów do pracy z programem - dokumentację, przykłady, tutoriale, dział rozwiązywania problemów i inne. 2

3 Przygotowanie do pracy Wprowadzenie i konfiguracja programu 2. Konfiguracja urządzenia mobilnego lub emulatora Zanim przejdziemy dalej, musimy przygotować emulator lub urządzenie mobilne, na którym będą widoczne efekty naszej pracy. Programując w Scratchu, postępy widzimy w czasie rzeczywistym na ekranie komputera, zaś w App Inventorze jest podobnie, z tym że tutaj budujemy aplikacje na urządzenia mobilne z systemem Android. Z tego powodu nie możemy widzieć efektów pracy bezpośrednio w programie, ale możemy wykorzystać w tym celu tablet bądź telefon z systemem Android. Jeśli nie posiadamy aktualnie takiego urządzenia, wystarczy nam wbudowany do programu emulator. W zależności od tego, czy posiadamy urządzenie mobilne, czy też nie, do wyboru mamy dwie opcje: Set up and connect an Android device (1) - jeśli posiadamy tablet lub telefon z systemem Android Set up and run the Android emulator (2) - jeśli nie posiadamy urządzenia mobilnego i chcemy skorzystać z emulatora. Kliknięcie na którąkolwiek z nich spowoduje otwarcie instrukcji dla wybranej opcji. My przejdziemy teraz jednak dalej, wybierając Continue. 3

4 Przygotowanie do pracy Wprowadzenie i konfiguracja programu W tym momencie omówimy jeszcze możliwości podłączenie telefonu do programu oraz użycie emulatora. Przejdźmy do strony Option One - połączenie komputera i urządzenia za pomocą WiFi (rekomendowane). Jeżeli chcemy połączyć telefon lub tablet w ten sposób, urządzenia muszą być podłączone do tej samej sieci WiFi. Ponadto na smartfonie będziemy musieli zainstalować darmową aplikację MIT AI2 Companion, którą znajdziemy w sklepie Google Play. Option Two - użycie emulatora, urządzenie mobilne nie będzie potrzebne. W celu użycia emulatora będziemy musieli jednak zainstalować dodatkowe, darmowe oprogramowanie na komputerze. Po kliknięciu na Instructions przejdziemy do strony, gdzie krok po kroku został opisany proces instalacji programu. Znajdziemy tam również link do ściągnięcia potrzebnego oprogramowania. Option Three - podłączenie urządzenia do komputera za pomocą kabla USB. W tym momencie zainstalujmy aplikację MIT AI2 Companion na smartfonie wybierając Option One lub ściągnijmy program aistarter i zainstalujmy go na komputerze wybierając Option Two. 4

5 Przygotowanie do pracy Wprowadzenie i konfiguracja programu Po tym, jak kliknęliśmy na przycisk Continue (str. 2), otwarty został główny ekran programu App Inventor. Zanim podłączymy urządzenie mobilne lub uruchomimy emulator, musimy w pierwszej kolejności wybrać projekt, który ma zostać otwarty na telefonie, tablecie lub w emulatorze. Jako że w tym momencie nie mamy żadnych projektów aplikacji, musimy rozpocząć nowy projekt, wybierając Start new project (1). i Po kliknięcu Start new projet pojawi się okno, w którym należy podać nazwę nowego projektu. Musi ona zaczynać się od litery, poza tym może zawierać wyłącznie litery, cyfry oraz podkreślenia (znak _ ). Teraz kliknijmy na Connect (2), a następnie wybierzmy jeden z trzech sposobów połączenia, które zostały opisane na stronie 4. Jeżeli łączymy się za pomocą urządzenia mobilnego, musimy uruchomić na nim aplikację MIT AI2 Companion, natomiast jeśli wybierzemy emulator, na komputerze należy włączyć program aistarter. Jeśli wybraliśmy sposób połączenia poprzez WiFi, musimy zeskanować za pomocą aplikacji AI Companion w urządzeniu mobilnym kod QR, który wyświetlił się na ekranie lub wpisać wyświetlony obok kodu QR, kod literowy. Od tego momentu smartfon lub tablet jest już podłączony do programu App Inventor i efekty pracy będą widoczne na bieżąco na ekranie urządzenia. 5

6 Przygotowanie do pracy Wprowadzenie i konfiguracja programu 3. Budowa i narzędzia programu App Inventor 1. Designer/Blocks (Projektowanie/Bloki) - praca nad aplikacją odbywa się w jednym z dwóch obszarów. Pierwszy z nich, Designer, to miejsce, gdzie projektujemy ogólny wygląd i interfejs aplikacji. Drugi, Blocks, to z kolei obszar, w którym pracujemy nad budową i działaniem aplikacji. O tym, w jakim trybie aktualnie się znajdujemy, informuje nas delikatne niebieskie podświetlenie danego przycisku. W App Inventorze, inaczej niż w Scratchu, praca nad wyglądem oraz nad działaniem aplikacji jest rozdzielona. Co więcej, narzędzia przeznaczone do pracy nad wyglądem aplikacji są znacznie bardziej rozbudowane niż w przypadku wspomnianego już Scratcha. 2. Palette (Paleta) - zbiór narzędzi przeznaczonych do budowania aplikacji i pracy nad jej warstwą wizualną. Wszystkie narzędzia zostały pogrupowane w odpowiednie kategorie (np. User Interface, Layout, Media). Ich użycie odbywa się na zasadzie drag & drop, czyli przeciągnij i upuść. 3. Components (Komponenty) - w tym miejscu zarządzamy wszystkimi komponentami, z jakich składa się nasza aplikacja. Możemy tutaj zmieniać ich nazwy (Rename) bądź też usuwać (Delete). Zaznaczenie odpowiedniego komponentu pozwala również na jego konfigurację w oknie Properities. 4. Properities (Właściwości) - ten element pozwala na ustawienie właściwości wybranego komponentu. Dostępne w tym oknie funkcje zmieniają się w zależności od wybranego komponentu. Np. dla elementu tekstowego możemy zmienić m.in. krój czcionki, jej kolor i wielkość oraz parametry widoczności. 5. Viewer (Podgląd)- w tym miejscu po prostu swobodnie układamy poszczególne komponenty na ekranie. 6. Media (elementy multimedialne) - tutaj znajdziemy wszystkie pliki multimedialne, które są używane w aplikacji. Będą to zarówno pliki graficzne, jak i dźwiękowe. 6

7 Przygotowanie do pracy Wprowadzenie i konfiguracja programu Przejdźmy teraz do obszaru Blocks (1) i omówmy elementy znajdujące się w tej sekcji. 2. Blocks - podobnie jak w Scratchu, znajdziemy tutaj posortowane w odpowiednie kategorie bloki, posiadające różne funkcje. Użycie bloków również odbywa się na zasadzie drag & drop. Do dyspozycji mamy dwie główne grupy: Built-in, która zawiera podstawowe, wbudowane polecenia oraz Screen1, gdzie znajdziemy komponenty, które wstawiliśmy w obszarze Designer. Po wybraniu danego komponentu będziemy mieli dostęp do poleceń właściwych dla wybranego elementu - np. w przypadku przycisku dysponujemy poleceniem Click. 3. Tutaj znajdziemy klocki przyporządkowane do kategorii, którą wybraliśmy w menu Blocks (2). Na ilustracji widzimy klocki z kategorii Text, która znajduje się w grupie Built-in. 4. Viewer - w tym oknie budujemy program do naszej aplikacji. Ten element działa tak samo, jak jego odpowiednik w programie Scratch. 5. Śmietnik - ten element pozwala nam na usuwanie niepotrzebnych bloczków z obszaru Viewer. Aby to zrobić, wystarczy po prostu przeciągnąć zbędne bloki do kosza i tam je upuścić. 7

8 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz został opracowany przez Fundację Coder Dojo Polska i jest opublikowany na licencji CC BY-SA (

9 Kalkulator, część 1 Scenariusz 1 Cele: Poznamy podstawowe operacje w programie App Inventor poprzez stworzenie prostego kalkulatora, który będzie dodawał liczbę 5 do podanej przez nas liczby. W ten sposób zaznajomimy się z podstawami programu App Inventor 2 w praktyce, zarówno pod kątem tworzenia interfejsu, jak i konstruowania instrukcji programu. 1. Rozpoczęcie pracy Wejdźmy na stronę i wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2),i wpiszmy w oknie jego nazwę, np. Kalkukator_1. Nastąpi teraz automatyczne przejście do okna budowy aplikacji. 2. Budowanie kalkulatora - dodawanie komponentów Upewnijmy się, że jesteśmy w trybie Design. Jeśli tak, chwyćmy teraz element Label (etykieta) i przeciągnijmy go do obszaru Viewer. Możemy zauważyć, że po prawej stronie, na liście komponentów pojawił się również element Label1. Komponent Label będzie nam potrzebny do wyświetlania tekstu na ekranie. 2

10 Kalkulator, część 1 Scenariusz 1 Po dodaniu etykiety w poprzednim kroku, dołóżmy teraz trzy kolejne komponenty. Są nimi: przycisk (1), kolejna etykieta (2) i pole tekstowe (3). Podczas dodawania komponentów zwracajmy uwagę na niebieską linię, pokazującą, w którym miejscu znajdzie się nowy komponent. Po dodaniu wszystkich trzech elementów, ułóżmy je tak, jak zostały rozmieszczone na poniższej ilustracji: 1. Button (przycisk). Ten komponent jest wykorzystywany do uruchomienia określonej akcji. W przypadku naszego kalkulatora wciśnięcie przycisku wywoła akcję dodania liczby Label (etykieta). Ten element służy do wyświetlania określonych informacji na ekranie. W naszym kalkulatorze Label1 będzie wyświetlał komunikat o tym, że będziemy dodawać liczbę 5, zaś Label2 posłuży nam do wyświetlenia wyniku dodawania. Zatem Label1 będzie podawał stale tę samą informację, zaś Label2, po każdym naciśnięciu przycisku, wyświetli wynik dodawania. 3. Text Box (pole tekstowe). Ten komponent pozwala użytkownikowi aplikacji wprowadzać dane. W naszej aplikacji za pomocą tego komponentu użytkownik będzie miał możliwość wpisania liczby, którą chce dodać do liczby 5. 3

11 : MIT App Inventor 2 Kalkulator, część 1 Scenariusz 1 Teraz zmieńmy nazwy naszych komponentów na takie, które będą zgodne z ich przeznaczeniem. Dzięki temu będzie nam łatwiej posługiwać się wszystkimi komponentami w obrębie aplikacji. Przy czterech komponentach być może nie jest to konieczne i zachowanie domyślnych nazw nie sprawiłoby problemu, jednak przy dużych aplikacjach, kiedy wszystkich komponentów jest kilkadziesiąt i więcej, poprawne nazywanie poszczególnych elementów pozwala utrzymać porządek w projekcie. Warto więc wyrabiać w sobie ten nawyk od początku. Nazwy komponentów możemy zmienić poprzez wybranie odpowiedniego elementu w oknie Components oraz kliknięcie przycisku Rename (1). Zmieńmy je więc na takie, jakie widoczne są na powyższej ilustracji. 4

12 Kalkulator, część 1 Scenariusz 1 3. Budowanie kalkulatora - konfiguracja komponentów Teraz przejdźmy do konfiguracji niektórych komponentów, by działały zgodnie z naszymi pierwotnymi założeniami. Zacznijmy od komponentu o nazwie Początek_tekstu. Zaznaczmy nasz komponent i w oknie Properties, w polu Text wpiszmy 5 dodać. Ten tekst będzie wyświetlany w aplikacji w miejscu naszej etykiety. W ten sam sposób zmieńmy również tekst widoczny na naszym przycisku. Kliknijmy więc na przycisk Dodaj i w polu Text wpiszmy Dodaj (2), aby na przycisku w aplikacji znalazł się ten właśnie tekst. 5

13 Kalkulator, część 1 Scenariusz 1 Kolejny krok to zmiana właściwości komponentu Liczba. Zaznaczmy go i w oknie Properties zatwierdźmy pozycję Numbers Only. Oznacza to, że użytkownik w tym polu będzie mógł wprowadzić tylko wartość liczbową, bez liter i innych znaków. Ostatnią czynnością, jaką należy wykonać, jest zmiana tekstu dla etykiety Wyniki. Zaznaczmy ją i w polu Text wpiszmy Tu pojawi się wynik. Po zakończeniu wszystkich powyższych kroków, w obszarze Viewer dostrzeżemy, że we wszystkich komponentach w aplikacji zmieniły się wyświetlane teksty. 6

14 Kalkulator, część 1 Scenariusz 1 4. Budowanie kalkulatora - programowanie aplikacji Po tym, jak zakończyliśmy projektowanie interfejsu aplikacji, możemy zająć się stworzeniem odpowiedniego programu. Przejdźmy zatem do trybu Blocks i spójrzmy, w jaki sposób zbudować program widoczny na poniższej ilustracji: Naszą instrukcję można opisać w następujący sposób: Kiedy przycisk Dodaj zostanie wciśnięty, to w polu Wynik pojawi się tekst, który jest sumą liczby 5 oraz liczby podanej przez użytkownika w polu Liczba. Przejdźmy więc do wykonania instrukcji: 1. W menu bloków po lewej stronie, w grupie Screen1, odszukajmy komponent Dodaj. Kliknijmy na niego, by otworzyć menu z właściwymi dla tego komponentu poleceniami. Wybierzmy When [Dodaj].Click i przeciągnijmy ten element w prawo do obszaru Viewer. 2. Teraz w menu bloków po lewej stronie kliknijmy na Wyniki. W otwartym menu poleceń wybierzmy set [Wynik].Text i przeciągnijmy go do obszaru Viewer, łącząc z poleceniem 1 tak, jak na powyższej ilustracji. 3. Teraz kliknijmy na kategorię Math w grupie Built-in po lewej stronie. Do naszego programu dołączmy polecenie Dodawanie [ ] + [ ] (6). 4. Nadal będąc w kategorii Math, do pierwszego składnika dodawania dodajmy element liczbowy (7) i wpiszmy w nim wartość 5. Warto zauważyć, że w puste pola wewnątrz bloczków możemy wstawiać kolejne bloczki lub wpisywać tylko pojedyncze wartości tekstowe lub liczbowe. 5. W tym momencie przejdźmy ponownie do grupy Screen1 i tam wybierzmy komponent Liczba. W otwartym menu poleceń wybierzmy blok [Liczba].[Text] i wstawmy go jako drugi składnik dodawania. 7

15 Kalkulator, część 1 Scenariusz 1 5. Podsumowanie Po kliknięciu przycisku Dodaj (czyli polecenie when [Dodaj].Click), w miejscu komponentu Wynik zostanie wyświetlona suma dodawania liczby 5 oraz wartości, którą wpisaliśmy w pole Liczba. Zatem naciśnięcie przycisku Dodaj wywoła polecenie set[wynik].[text] = 5 + [Liczba].[Text]. Na ekranie smartfona powinniśmy teraz widzieć to, co na ilustracji po prawej stronie. Na tym przykładzie do liczby 5 została dodana liczba 23, co dało sumę 28. Aplikacja gotowa. 8

16 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz został opracowany przez Fundację Coder Dojo Polska i jest opublikowany na licencji CC BY-SA (

17 Squash w dwóch wariantach Scenariusz 2 Cele: Stworzymy prostą grę Squash, polegającą na odbijaniu piłeczki paletką, w dwóch wariantach. W ten sposób poznamy m.in. podstawy definiowania interfejsu użytkownika oraz nauczymy się wykonywać proste animacje. Po wykonaniu ćwiczenia będziemy też potrafili sterować obiektami za pomocą przeciągania palcem (pierwszy wariant) po ekranie oraz poprzez przechylanie telefonu (drugi wariant). W tej wersji Squasha nie będzie systemu naliczania punktów, jak w tradycyjnej wersji tej gry. W naszej aplikacji na dole będzie umieszczona czerwona linia i jeśli piłka się z nią zderzy, to nastąpi przegrana. Co więcej, gdy nie odbijemy piłeczki i ta spadnie na czerwoną linię, boisko zmieni kolor na szary, co będzie oznaczało koniec gry. 1. Rozpoczęcie pracy Wejdźmy na stronę i wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2) i wpiszmy w oknie jego nazwę, np. Squash. Nastąpi teraz automatyczne przejście do okna budowy aplikacji. Jak już wspomnieliśmy powyżej - w pierwszym wariancie naszej gry sterowanie paletką będzie odbywało się poprzez przeciąganie palcem po ekranie smartfona, natomiast w drugiej wersji będziemy sterować obracając nim. Obracanie ekranu zgodnie z pozycją telefonu czy tabletu jest domyślnym zachowaniem. Dlatego też w pierwszym wariancie musimy zablokować ekran po to, by ten nie zmieniał swojej orientacji. I od tego właśnie zaczniemy budowę naszej gry. 2

18 Squash w dwóch wariantach Scenariusz 2 Przejdźmy zatem do okna Properties i dla komponentu Screen1, w polu Screen Orientation (1) wybierzmy Portrait. Dzięki temu nasz ekran zawsze będzie wyświetlany pionowo, niezależnie od tego, w jakiej pozycji znajduje się urządzenie. Dodatkowo w polu Title wpiszmy tytuł naszego bieżącego komponentu (2). Nazwijmy go Squash. 2. Squash - projektowanie interfejsu Po zablokowaniu obrotu ekranu przejdźmy do dodania komponentów. W naszej aplikacji wykorzystamy trzy elementy - wszystkie je znajdziemy w grupie Drawing and Animation. Są to: 1. Canvas (zamknięty obszar) - jest to komponent ograniczający obszar animacji oraz rysowania. W obszarze tego komponentu poruszają się Ball oraz ImageSprite. 2. Ball (piłka) - w naszej aplikacji to po prostu piłka, którą będziemy odbijać za pomocą paletki. 3. ImageSprite ( duszek ) - znany ze Scratcha duszek. W naszej aplikacji będzie to paletka. Image Sprite jest podobny do komponentu Ball, jednak duszek ma kształt prostokąta, a jego tłem może być dowolny plik graficzny, np. w formacie jpg. Jako pierwszy komponent dodajmy Canvas (1). Przeciągnijmy go na nasz obszar roboczy, czyli Viewer. 3

19 Squash w dwóch wariantach Scenariusz 2 Po tym, jak wstawiliśmy komponent Canvas, musimy zmienić jego cechy w oknie Properties. Zmodyfikujmy dwa atrybuty: Width (szerokość) oraz Height (wysokość). Dla większości komponentów zarówno szerokość, jak i wysokość można ustawić jako: 1. Automatic (automatyczna) - system samodzielnie dobierze odpowiednią wartość szerokości i wysokości lub pozostawi je w standardowym ustawieniu. 2. Fill parent (wypełnienie obiektu nadrzędnego) - sprawia, że komponent przejmuje wielkość komponentu nadrzędnego. W przypadku naszej aplikacji zaznaczenie tej opcji sprawiłoby, że obszar Canvas1 przejąłby szerokość i wysokość od komponentu Screen1, co możemy zauważyć na ilustracji obok, w oknie Components - Cavas1 jest obiektem podrzędnym dla Screen pixels - szerokość/wysokość o podanej przez nas liczbie pikseli. Ustawmy zatem dla komponentu Canvas1 wartości Width jako Fill Parent (1) oraz Height jako 300 pikseli (2). Teraz czas na kolejne komponenty. Dodajmy Ball (1) oraz ImageSprite (2) w dowolne miejsca w obrębie komponentu Canvas1. Tak jak wspomnieliśmy wcześniej, komponenty Ball oraz ImageSprite mogą być umieszczone jedynie na komponencie Canvas. Nie można umieścić ich poza tym obszarem, bezpośrednio na ekranie telefonu. 4

20 Squash w dwóch wariantach Scenariusz 2 Po dodaniu dwóch następnych komponentów dostosujmy ich właściwości tak, by odpowiadały naszym założeniom. Zacznijmy od komponentu Ball - na początek zmieńmy nazwę tego obiektu, klikając Rename (1) i wpisując Piłka w polu New Name. Następnie zmieńmy kilka cech tego komponentu w oknie właściwości, czyli Properties: - Heading (kierunek)- wpiszmy wartość 50 (2) - Paint Color (kolor)- wybierzmy Blue (3) - Radius (promień)- promień, czyli po prostu wielkość piłki ustalmy na 5 (4) - Speed (prędkość) - tutaj wpiszmy wartość 100 (5) - współrzędne XY - obu współrzędnym nadajmy wartość 100 (6) Inaczej niż w Scratchu, w programie App Inventor komponenty Ball oraz ImageSprite mogą mieć nadaną własną prędkość. W Scratchu efekt ten osiągaliśmy poprzez wielokrotne przesuwanie obiektu. Tutaj wystarczy, że nadamy komponentowi kierunek (Heading) oraz prędkość (Speed), zaś resztę pracy wykona za nas komputer. i Warto zwrócić uwagę na hierarchię komponentów w oknie Components. Jak pamiętamy, w poprzedniej aplikacji wszystkie komponenty były bezpośrednio podrzędne dla Screen1. Tutaj podrzędny dla Screen1 jest tylko Canvas1, natomiast pozostałe dwa komponenty (Piłka oraz ImageSprite) są podrzędne dla komponentu Canvas1. Zmieńmy jeszcze nazwy pozostałych komponentów. Canvas1 przestawmy na Boisko (1), zaś ImageSprite1 na Paletka (2). Teraz przejdziemy do następnego kroku, czyli do skonfigurowania paletki. 5

21 Squash w dwóch wariantach Scenariusz 2 Przejdźmy zatem do zmiany właściwości komponentu o nazwie Paletka. Na początek kliknijmy na paletkę w oknie Components, by ją zaznaczyć - dzięki temu w oknie Properties pojawią się opcje, które pozwolą nam skonfigurować naszą paletkę. Konfigurację jej cech podzielimy na dwa kroki. W pierwszym kroku zadbamy o jej wygląd, zaś w drugim zajmiemy się jej rozmiarem i pozycją. 1. Ustawienie pliku graficznego - wygląd paletki będzie wczytany z pliku graficznego, który załadujemy do programu. Paletka bez załadowanej grafiki byłaby przezroczysta, a to zdecydowanie utrudniłoby nam grę. Musimy zatem przygotować dowolny plik graficzny, np. w formacie png i wczytać go do mediów aplikacji, by następnie przypisać do paletki. Kliknijmy więc na Upload File (1) w oknie Media i odszukajmy plik, który chcemy wczytać do programu. Następnie przechodzimy do okna Properties i tam w polu Picture z rozwijanej listy wybierzmy nasz plik. Plików multimedialnych nie możemy przypisać bezpośrednio do komponentów, stąd w pierwszej kolejności musieliśmy wczytać plik do biblioteki mediów. 2. Wielkość i pozycja - po tym, jak wczytaliśmy już plik graficzny, przejdźmy do ustawienia pozostałych parametrów. Współrzędną X ustawmy na 100 pikseli, zaś Y - na 270 (3). Następnie parametry Width (szerokość) na 70 pikseli, a Height (wysokość) na 20 pikseli. 6

22 Squash w dwóch wariantach Scenariusz 2 3. Squash - programowanie aplikacji Po tym, jak zakończyliśmy projektowanie interfejsu aplikacji, możemy zająć się stworzeniem odpowiedniego programu. Tym razem zbudowanie poprawnego kodu będzie wymagało od nas większej pracy niż w przypadku poprzedniej aplikacji. Tam wystarczyła nam tylko jedna instrukcja zbudowana z bloków, natomiast tutaj potrzebujemy ich kilka. Przejdźmy więc teraz do zakładki Blocks, a poniżej, krok po kroku, omówimy wszystkie instrukcje. Zderzenie piłki z paletką i odbicie piłki Podstawową interakcją w naszej grze jest zderzenie piłeczki z paletką. Gdy do tego dojdzie, piłka musi odbić się od paletki. Musimy zatem ustalić, w jaki sposób ma zachować się piłka i określić, w stosunku do jakiego obiektu to zachowanie ma wystąpić. Naszą instrukcję można opisać w następujący sposób: Kiedy piłka zderzy się z innym obiektem, to odbij piłkę tak, jakby dotknęła dolnej krawędzi. Jak to działa? Przede wszystkim pamiętajmy, że piłka ma swoją prędkość. Gdy poruszająca się Piłka uderza w krawędź Canvas (nasze Boisko), to wywołuje wydarzenie EdgeReached (zetknięcie z krawędzią), a gdy uderza w inny obiekt, to wywołuje wydarzenie CollidedWith (zderzenie z...). My na ekranie mamy tylko jeden obiekt inny niż piłka, czyli paletkę. Zatem gdy piłka uderzy w paletkę, to zostanie uruchomiona akcja call[piłka].bounce ( odbij piłkę ). Akcja odbicia musi jeszcze wiedzieć, w którą stronę ma piłkę odbić, gdy ta uderzy w krawędź boczną lub górną i właśnie do tego służy parametr edge (krawędź). Jego wartość ustawiona na -1 powoduje odbicie Piłki tak, jakby dotknęła dolnej krawędzi (oznaczenia wszystkich krawędzi znajdują się na następnej stronie). Other (inny obiekt), można wykorzystać do ustalenia, w który obiekt uderzyła Piłka. My na ekranie mamy tylko paletkę, więc nie musimy sprawdzać wartości other. Polecenia When[Piłka].CollidedWith oraz Call[Piłka].Bounce znajdziemy w grupie Piłka (1), zaś obiekt z wartością liczbową - w grupie Math (2). i Wszystkie instrukcje, tak jak w Scratchu, podzielone są na kategorie oznaczone odpowiednimi kolorami, co ułatwia nawigację. 7

23 Squash w dwóch wariantach Scenariusz 2 Numeracja krawędzi ekranu w App Inventorze Przed momentem skonfigurowaliśmy uderzenie piłki w dolną krawędź ekranu, która jest oznaczona numerem -1. Skąd wziął się właśnie taki numer? Krawędzie w programie App Inventor mają takie oznaczenia, jakie zaprezentowano na poniższej ilustracji. Krawędź północna oznaczona jest numerem 1, północno-wschodnia numerem 2 i w ten sposób docieramy do krawędzi dolnej, która jest oznaczona numerem -1. 8

24 Squash w dwóch wariantach Scenariusz 2 Zderzenie piłki z krawędzią i odbicie piłki od krawędzi Teraz zaprogramujemy wydarzenie zderzenia piłki z krawędzią. Tutaj musimy rozróżnić dwa rodzaje krawędzi - krawędź boczną i krawędź dolną. Jeśli piłka zderzy się z krawędzią boczną, to zostanie odbita, a wartość jej prędkości zwiększy się o 1. Natomiast jeśli zderzy się krawędzią dolną, to nastąpi ponowne rozpoczęcie gry poprzez wywołanie odrębnej procedury, którą przygotujemy. Najpierw sprawdzamy, czy piłka uderzyła w krawędź dolną (wartość edge wynoszącą -1). Krawędź -1 oznacza, że gracz przepuścił piłkę (nie odbił jej) i powoduje to rozpoczęcie gry od początku poprzez wywołanie procedury reset Call[reset], którą przygotujemy za chwilę. Jeśli piłka uderzy w krawędź boczną, to zostaną wykonane dwie akcje: 1. Odbij Piłkę tak, jakby się zderzyła z odpowiednią krawędzią (identyfikator krawędzi uzyskujemy przy pomocy get[edge]) 2. Zwiększ prędkość piłki o jeden Set[Piłka]. Speed to [Piłka].[Speed] + 1). Na zakończenie dołóżmy jeszcze akcję set[screen1].[title] na Squash - &[Piłka]. [Speed], czyli ustaw pasek tytułu na napis Squash oraz prędkość poruszania się Piłki. 9

25 Squash w dwóch wariantach Scenariusz 2 Wariant pierwszy - poruszanie paletką za pomocą ruchu palca Kolejnym krokiem będzie zaprogramowanie mechanizmu poruszania paletki poprzez przeciągnięcie palcem. Tutaj wykorzystamy funkcję when[paletka].dragged. when[paletka].dragged (kiedy Paletka przeciągnięta), to ustaw współrzędną X Paletki na wartość currentx (czyli aktualna współrzędna X - miejsce, gdzie dotkniemy/przeciągniemy palcem ekranu) zmniejszona o połowę szerokości Paletki [Paletka].[Width] / 2. Musimy więc wewnątrz działania matematycznego odejmowanie zawrzeć kolejne działanie dzielenie. Dlaczego zmniejszyliśmy szerokość o połowę? Polecenie set[paletka].[x] ustawia lewy górny róg Paletki w miejscu X. Z tego powodu musimy odjąć połowę jej szerokości, żeby palec wskazywał środek paletki, a nie jej lewą krawędź. Przygotowanie procedury reset Teraz przygotujmy procedurę własną reset. Będzie ona uruchamiana zawsze, gdy piłka dotknie dolnej krawędzi oraz zawsze na początku gry. Będą w niej zawarte wszystkie domyślne dla naszej gry parametry, takie jak kolor tła, czy wymiary boiska. Dzięki temu nasza gra po porażce i przy każdym wznowieniu oraz na początku zawsze będzie wyglądała i działała tak samo. W obszarze Blocks w grupie Procedures znajdźmy to[procedure] do i przeciągnijmy ten element do obszaru Viewer. Następnie zmieńmy jego nazwę na reset i wstawmy poszczególne klocki, jak na poniższej ilustracji. 1. Na początek ustawmy kolor tła naszego Boiska jeżeli kolor jest szary (czyli jeśli przegraliśmy), to ustawiamy na biały. Dodajmy jeszcze warunek, że jeżeli boisko ma jakikolwiek inny kolor niż szary, to ustawiamy na biały - o tym za chwilę. 2. Następnie ustawmy parametry początkowe Piłki współrzędne X i Y, kierunek (Heading) oraz prędkość piłki (Speed). Dzięki temu na początku gry piłka zawsze będzie w tej samej pozycji. 3. Na samym dole, wzdłuż dolnej krawędzi Boiska (linia x1) rysujemy linię (w kolorze i szerokości ustawionej w procedurze when[screen1].initialize, którą stworzymy za chwilę). Linia ta musi być za każdym razem rysowana ponownie, ponieważ ustawienie tła Boiska (na szare lub białe) powyżej powoduje jej usunięcie (wyczyszczenie całości Boiska). Przypomnijmy jeszcze raz, że procedura reset będzie uruchamiana za każdym razem, gdy Piłka dotknie dolnej krawędzi Boiska (czerwonej linii) oraz podczas uruchomienia aplikacji. 10

26 Squash w dwóch wariantach Scenariusz 2 Instrukcja when[screen1].initialize Została nam już ostatnia instrukcja, która będzie uruchamiana w momencie inicjowania komponentu Screen1, czyli w naszym przypadku po prostu przy każdym starcie aplikacji. W tej instrukcji zdefiniujemy parametry początkowe naszej aplikacji. 1. Szerokość Paletki ustawmy na ¼ szerokości Boiska. 2. Ustalmy parametry rysowania Boiska (kolor czerwony, szerokość/grubość rysowania 9) to wykorzystamy do rysowania czerwonej linii na dole Boiska. 3. Na sam koniec uruchamiamy jeszcze procedurę reset. I tutaj znajdziemy odpowiedź, dlaczego w procedurze reset sprawdzane są również inne kolory boiska niż tylko szary. Program rozpoczyna od procedury when[screen1]. Initialize i ustawia obrys koloru boiska na czerwony o grubości linii 9. Procedura reset z kolei sprawdza, jaki jest kolor boiska i jeżeli jest szary lub inny niż szary, zmienia kolor na biały, rysując dodatkowo trzy linie - górną oraz boczne. W ten sposób dolna linia w czerwonym kolorze pozostaje na boisku, również po wykonaniu procedury reset. Musieliśmy rozwiązać to w taki sposób, ponieważ porażkę sygnalizujemy zmianą koloru tła, natomiast zamiana koloru tła spowodowałaby usunięcie tej linii. 4. Udostępnianie aplikacji Nasza aplikacja działa teraz prawidłowo, zaś paletka przemieszcza się, kiedy przesuwamy palcem po ekranie. Korzystając z faktu, że mamy ciekawą, działającą aplikację, poświęćmy teraz chwilę na udostępnienie tej aplikacji dalej po to, by można było zainstalować ją na dowolnym smartfonie. W tym celu kliknijmy w menu Build (1), gdzie znajdziemy dwie funkcje (2): 1. App (Provide QP code for.apk) - wybranie tej opcji spowoduje wyświetlenie kodu QR i da możliwość załadowania przy pomocy tego kodu samodzielnej aplikacji na telefonie, bez użycia MIT AI2 Companion. 2. App (save.apk to my computer) - wybranie tego polecenia spowoduje zapisanie aplikacji na komputerze jako plik.apk. Dzięki temu możemy chociażby przesłać aplikację jako załącznik w u. 11

27 Squash w dwóch wariantach Scenariusz 2 5. Suqash, wariant drugi - sterowanie paletką poprzez wychylenia telefonu Teraz przejdźmy do zaprogramowania drugiego wariantu, czyli sterowania paletką poprzez obracanie smartfonem czy tabletem. Chcemy oczywiście zachować pierwszy wariant gry, dlatego stworzymy teraz nowy zapis projektu i to na nim wprowadzimy odpowiednie zmiany. Wybierzmy zatem Projects (1) w menu głównym, a następnie Save projects as... (2) i w polu New name: wpiszmy nową nazwę: Squash_przechylanie. Z grupy Sensors (czujniki) wybierzmy komponent o nazwie AccelerometerSensor (1) i przeciągnijmy go na obszar projektowania interfejsu. Jako że AccelerometerSensor jest obiektem niewidocznym, to nie zajmuje on miejsca na ekranie, ale możemy zobaczyć go poniżej ekranu, w sekcji Non-visible components (2). Komponent AccelerometerSensor będzie przez nas wykorzystany do odczytywania przechylenia telefonu. i Akcelerometr, czyli użyty przez nas komponent, jest przyrządem służącym do pomiaru przyspieszeń liniowych lub kątowych. Akcelerometry są coraz częściej instalowane w telefonach komórkowych, umożliwiając automatyczne wykrywanie ułożenia przestrzennego (pochylenie, przekręcenie) urządzenia. 12

28 Squash w dwóch wariantach Scenariusz 2 Zanim zaczniemy sterować paletką przy pomocy wychyleń telefonu musimy dezaktywować (lub usunąć całkowicie) sterowanie za pomocą przeciągania palcem, czyli instrukcję when[paletka].dragged. W celu zdezaktywowania tej instrukcji przejdźmy do Blocks, najedźmy kursorem myszy na procedurę sterowania paletką, czyli when[paletka].dragged (1) i kliknijmy prawym przyciskiem myszy. W ten sposób wywołamy menu podręczne, z którego musimy wybrać polecenie Disable Block, czyli dezaktywuj (2). Cała nasza instrukcja zmieni kolor na szary, co oznacza, że jest nieaktywna i nie będzie wykonywana podczas działania aplikacji. Korzystając z okazji, omówmy teraz pozostałe polecenia z menu podręcznego bloków: 1. Duplicate (powiel) - tworzy kopię danego bloku bądź całej instrukcji złożonej z bloczków. 2. Add Comment (dodaj komentarz) - umożliwia dodanie komentarza do bloku bądź całej instrukcji. Komentarz wyświetla się w postaci ikony ze znakiem zapytania w lewym górnym rogu bloku. Kliknięcie na tę ikonę powoduje rozwinięcie pola tekstowego. 3. Collapse Block (złóż klocek) - minimalizuje klocek bądź całą instrukcję poprzez zwinięcie do elementu zawierającego tylko tytuł. 4. Delete x Blocks (Skasuj x bloków) - usuwa wszystkie bloczki w instrukcji, gdzie x oznacza liczbę bloków. W naszym przypadku jest to Help (pomoc) - kliknięcie na ten element powoduje przeniesienie nas na stronę, gdzie opisane jest działanie danego bloku. Przejdźmy teraz do ułożenia kompletnej instrukcji, pozwalającej sterować paletką poprzez obracanie telefonem. i UWAGA: Zaprezentowany program został przygotowany na telefon, jednak w przypadku stosowania tabletu koniecznym może być skorzystanie ze zmiennej yaccel (przyspieszenie względem osi y) zamiast xaccel - (przyspieszenie względem osi x). Jest to związane z faktem, iż na części testowanych tabletów oś X była przypisana do szerszej krawędzi (środka) ekranu, co powodowało wychylenia w porządku góra-dół. Natomiast w przypadku telefonów oś X jest przypisana do krótszej krawędzi i prezentuje wychylenia na prawo i lewo. 13

29 Squash w dwóch wariantach Scenariusz 2 Na początek potrzebujemy blok when[accelerometersensor1]. AccelerationChanged (czyli wydarzenie: gdy zmieniło się położenie telefonu). Procedura ta posiada trzy parametry, które reprezentują położenie telefonu w trzech wymiarach. Nas interesować będzie tylko xaccel, czyli pochylenie telefonu w prawo lub w lewo. Leżący płasko telefon ma wartość xaccel równą 0. Gdy przechylamy go w prawo, to wartość rośnie, a gdy przechylamy w lewo, to wartość xaccel maleje, przyjmując wartości ujemne. Następnym krokiem będzie wprowadzenie zmiennej lokalnej (czyli aktywnej w ramach niniejszego zbioru klocków) nachyleniex - nadajmy jej wartość równą xaccel (1). Dodajmy teraz dwa warunki (2): jeżeli nachyleniex > 5, to ustaw nachyleniex = 5 jeżeli nachyleniex < -5, to ustaw nachyleniex = -5 Te dwa warunki służą ograniczeniu zakresu przechylenia telefonu. Chodzi o to, żeby paletka przemieszczała się w kierunku krawędzi telefonu przy nieznacznych przechyleniach urządzenia. Po wykonaniu obu warunków zmienna reprezentująca nachylenie będzie przyjmować wartości od -5 do 5. Przeliczmy tę zmienną tak, żeby zmieniała wartość od 0 do 1 (a nie od -5 do 5) to nam ułatwi kolejne obliczenia. W tym celu ustawmy wartość zmiennej poprzez odjęcie od 5 nachylenia X (otrzymujemy liczbę 0 lub 10), a następnie podzielenie tego wyniku przez 10, co ostatecznie da nam wartość z przedziału 0-1 (3). Teraz nachyleniex mnożymy razy ¾ szerokości boiska [Boisko].[Width]. Dlaczego ¾? Jak pamiętamy, paletka ma szerokość ¼ boiska, zatem jej lewy górny róg porusza się i przyjmuje wartość X od 0 do ¾ szerokości Boiska. 14

30 Squash w dwóch wariantach Scenariusz 2 Alternatywna, skrócona instrukcja przechylania Zamiast zmiany lokalizacji paletki przy pomocy akcelerometru, możemy wykorzystać akcelerometr do sterowania prędkością (i kierunkiem) poruszania się paletki. Inaczej mówiąc, pochylenie telefonu nie steruje tym, w którym miejscu ma ustawić się paletka, ale tym, z jaką prędkością przesuwa się w stronę krawędzi. Jeżeli chcemy skorzystać z takiego rozwiązania, musimy usunąć poprzednią wersję procedury when. [AccelerometerSensor1].AccelerationChanged i zamiast niej wprowadzić poniższą wersję (musimy pamiętać, że w przypadku tabletów zamiast xaccel musimy skorzystać z yaccel): 6. Podsumowanie Nauczyliśmy się wykonywać proste animacje oraz wiemy już, jak sterować obiektami poprzez przeciąganie palcem po ekranie, a także z wykorzystaniem akcelerometru - obracając telefonem. Poznaliśmy też podstawy definiowania interfejsu użytkownika. To wszystko daje nam dobrą podstawę do tworzenia kolejnych, bardziej rozbudowanych aplikacji w systemie Android. 15

31 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz jest opublikowany na licencji CC BY-SA ( Został opracowany przez Fundację Coder Dojo Polska m.in. na podstawie materiału Build the PaintPot App ( przygotowanego przez Massachusetts Institute of Technology ( udostępnionego na licencji CC BY-SA 3.0 (

32 Rysowanie palcem po ekranie Scenariusz 3 Cele: Tym razem stworzymy aplikację z bardziej skomplikowanym, wielowarstwowym interfejsem użytkownika. Sama aplikacja będzie umożliwiała nam rysowanie poprzez przesuwanie palcem po ekranie. Będziemy mieli również możliwość zmiany grubości linii oraz wyboru kolorów. Pomimo iż brzmi to skomplikowanie, to w istocie jest bardzo proste. A więc do dzieła! 1. Rozpoczęcie pracy Wejdźmy na stronę i wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2) i wpiszmy w oknie jego nazwę, np. Rysowanie. Nastąpi teraz automatyczne przejście do okna budowy aplikacji. 2

33 Rysowanie palcem po ekranie Scenariusz 3 2. Projektowanie interfejsu Na początek przejdźmy do okna Properties i dla komponentu Screen1 w polu Screen Orientation (1) wybierzmy Portrait. Dzięki temu nasz ekran zawsze będzie wyświetlany w pionowo, zaś aplikacja będzie pracowała tylko w takiej orientacji ekranu. Dodatkowo w polu Title wpiszmy tytuł naszego bieżącego komponentu (2). Nazwijmy go Rysowanie. W tym momencie omówimy trzy komponenty, które znajdziemy w obszarze Palette, w grupie Layout. Komponenty te będą nam potrzebne, by właściwie rozmieścić na ekranie urządzenia mobilnego pozostałe elementy. Znajdziemy tam (1): HorizontalArrangement (rozmieść poziomo) TableArrangement (rozmieść w tabeli) VerticalArrangement (rozmieść pionowo) Podczas budowy poprzednich aplikacji mogliśmy zauważyć, że wszystkie elementy układały się na ekranie jeden pod drugim. Teraz przy pomocy trzech powyższych komponentów będziemy mogli dowolnie sterować ułożeniem pozostałych komponentów. Co więcej, komponenty grupy Layout można zagnieżdżać, czyli umieszczać warstwowo - jeden wewnątrz drugiego. Możemy więc wstawić jeden Vertical Arrangement, a potem w trzech kolejnych wierszach umieścić HorizontalArrangement. Przyjrzyjmy się teraz na następnej ilustracji, jak powinien wyglądać kompletny interfejs naszej aplikacji. Następnie krok po kroku, omówimy proces budowy całego interfejsu. 3

34 Rysowanie palcem po ekranie Scenariusz 3 Schemat interfejsu użytkownika: 1. VerticalArrangement1 ten komponent wypełnia cały ekran [Fill parent], a w nim pionowo (jeden pod drugim) są umieszczone: 1.1 Canvas 1.2 HorizontalArrangement1 w tym komponencie poziomo (jeden obok drugiego, od lewej do prawej) znajdują się kolory do wyboru: 1.2.A Czarny 1.2.B Niebieski 1.2.C Czerwony 1.2.D Zielony 1.2.E Żółty 1.2.F Biały 1.3 HorizontalArrangement2 tutaj poziomo (czyli jeden obok drugiego, od lewej do prawej) ułożone są: 1.3.A Przycisk Czyść 1.3.B VerticalArrangement2 a w nim pionowo: 1.3.B.1 Label etykieta wyświetlająca tekst szerokość 1.3.B.2 Slider1 suwak ustawiający szerokość linii 1.3.C VerticalArrangement2 Przycisk Zdjęcia Przycisk Zapisz obraz 4

35 Rysowanie palcem po ekranie Scenariusz 3 Zacznijmy oczywiście od pierwszego komponentu, czyli VerticalArrangement (1). Umieśćmy go na ekranie i zmieńmy jego właściwości tak, by odziedziczył rozmiary po nadrzędnym komponencie Screen1, dzięki czemu rozciągnie się na cały ekran aplikacji (2): Width (szerokośś) - Fill Parent Height (wysokość) - Fill Parent Następnie wewnątrz elementu VerticalArrangement1 umieśćmy komponent Canvas (1). Jeżeli Canvas został umieszczony poprawnie, czyli jako komponent podrzędny w stosunku do VerticalArrangement1, będziemy mogli to zauważyć w oknie Components (2). Dla tego komponentu ustawimy jeszcze szerokość jako Fill Parent (3). Wysokości na razie nie zmieniajmy - w następnym kroku wyjaśnimy dlaczego. 5

36 Rysowanie palcem po ekranie Scenariusz 3 Teraz wstawmy dwa komponenty HorizontalArrangement (1) jeden pod drugim. Należy zwrócić uwagę, by były one właściciwie rozmieszczone w stosunku do pozostałych komponentów, tak, jak na poniższej ilustracji. Po dodaniu dwóch komponentów HorizontalArrangement wróćmy do komponentu Canvas i ustawmy jego wysokość (Height) na Fill Parent. Dzięki temu obszar Canvas wypełni pozostałą brakującą przestrzeń w wysokości ekranu i sam przyjmie odpowiednią wartość. Teraz musimy ustawić atrybuty szerokości i wysokości naszych dwóch pozostałych komponentów, czyli elementów HorizontalArrangement. Dla pierwszego z nich (2), czyli tego, który znajduje się bezpośrednio pod komponentem Canvas (1), w oknie Properties ustawmy Width: Fill Parent oraz Height: 50 pikseli. Dla kolejnego komponentu HorizontalArrangement (3) ustawmy Width: Fill Parent oraz Height: Automatic. Jeżeli poprawnie ustawiliśmy te wartości, w oknie Viewer powinniśmy zobaczyć takie ułożenie komponentów, jak na ilustracji obok. 6

37 Rysowanie palcem po ekranie Scenariusz 3 Teraz zaznaczmy komponent Screen1 (1) i zmieńmy kolor jego tła (BackgroundColor) na szary (Gray) (2). Dzięki temu tło całej aplikacji będzie szare. Powtórzmy ten sam krok dla komponentu Canvas1 (1), z tą różnicą, że tutaj ustawimy kolor tła na jasnoszary (LightGray) (2). 7

38 Rysowanie palcem po ekranie Scenariusz 3 Teraz dodajmy przyciski, którymi będziemy ustawiali kolory. Jak zauważyliśmy wcześniej, łącznie będzie 6 kolorów, potrzebujemy więc 6 przycisków. W celu dodania pierwszego przycisku wybierzmy komponent Button (1) i przeciągnijmy go na nasz pierwszy HorizontalArrangement (2). Prawidłowo wstawiony przycisk będzie podrzędny względem komponentu HorizontalArrangement1, co możemy sprawdzić w oknie Components (3). Zaraz po dodaniu przycisk będzie wyglądał tak, jak widzimy na ilustracji (4). Musimy więc odpowiednio go zmodyfikować. Dla każdego przycisku, w jego cechach powinniśmy ustawić BackgroundColor: [kolor odpowiedni dla przycisku] (5), Shape: oval (6), Text: [to pole zostawiamy puste] (7), Width: Automatic (8), Height: Fill parent (9). Warto pamiętać również o zmianie nazw przycisków na takie, które będą odpowiadały ich kolorom (3). Dodajmy i skonfigurujmy teraz samodzielnie następujące przyciski: - czarny - niebieski - czerwony - zielony - żółty - biały Po ich dodaniu musimy zmodyfikować dla każdego z nich parametr Width. W każdym przycisku ustawmy tam Fill Parent, dzięki czemu wszystkie będą miały jednakową szerokość. 8

39 Rysowanie palcem po ekranie Scenariusz 3 Po poprawnym wykonaniu powyższych kroków nasze przyciski służące do wyboru kolorów powinny wyglądać tak, jak na poniższej ilustracji. Teraz zajmijmy się dodaniem komponentów do drugiego, dotychczas pustego, HorizontalArrangement2. Wstawmy więc: 1. Button z grupy User Interface (1) 2. VerticalArrangement z grupy Layout (2) W celu ułożenia dwóch przycisków (nr 3 i 4 na powyższej ilustracji) jeden pod drugim, musimy umieścić je w komponencie VerticalArrangement. 3. ImagePicker z grupy Media (3) - ten element pozwala na dostęp do galerii zdjęć urządzenia mobilnego. Przy pomocy tego komponentu będziemy mogli wybrać jedno ze zdjęć w naszym urządzeniu i ustawić je jako tło rysunków. 4. Button z grupy User Interface - element, który wykorzystamy jako przycisk zapisujący zdjęcia. 9

40 Rysowanie palcem po ekranie Scenariusz 3 Dzięki temu, że wstawiliśmy komponent VerticalArrangement, możemy pionowo umieścić w nim teraz dodatkowe elementy, których będziemy potrzebowali w naszej aplikacji. Zrobimy to dokładnie w taki sam sposób, w jaki przed chwilą wstawiliśmy przyciski Zdjęcia oraz Zapisz. Wstawmy zatem: 1. Label (1) - posłuży nam do poinformowania użytkownika, jaką rolę pełni slider 2. Slider (2) - ten komponent pozwoli nam wybrać wartość (w tym przypadku grubość linii), poprzez przesuwanie palcem wskaźnika 10

41 Rysowanie palcem po ekranie Scenariusz 3 Zajmijmy się teraz ustawieniem cech obu komponentów, które znajdują się w środku VerticalArrangement1, czyli Label1 oraz Slider1. Zacznijmy od Label1. Zaznaczmy ten komponent i w oknie Properties w polu Text wpiszmy szerokość (1). W polu TextAllingement (wyrównanie tekstu) ustawmy wartość center (2), zaś w polu Width: Fill Parent (3). Następnie zaznaczmy Slider1 i tam ustawmy: - ColorLeft i ColorRight: Orange (1) - MaxValue: 1 (2) - MinValue: 10 (3) - ThumbPosition: 3 (4) - Width: Fill parent (5) Komponent Slider1 wykorzystamy do sterowania szerokością rysowanych linii. Wartości Max i MinValue definiują wartości graniczne, zaś ThumbPosition wyznacza pozycję początkową. Zatem będziemy mogli zmieniać grubość kreski od 1 do 10 pikseli, natomiast domyślna grubość linii będzie wynosiła 3 piksele. 11

42 Rysowanie palcem po ekranie Scenariusz 3 Kolejnym krokiem w budowie naszego interfejsu będzie modyfikacja przycisku odpowiadającego za czyszczenie ekranu. W polu Components zmieńmy jego nazwę na Czyść, poprzez kliknięcie przycisku Rename (1). Również we właściwościach zmieńy wyświetlany tekst na Czyść (2). Teraz zajmijmy się elementem ImagePicker1. Tutaj musimy tylko zmienić wyświetlany tekst na ZDJĘCIA (1) oraz ustawić szerokość i wysokość na Fill Parent (2). Na sam koniec zajmijmy się przyciskiem Zapisz: 1. Zmieńmy jego nazwę, klikając na Rename 2. Zmodyfikujmy tekst widoczny na tym komponencie, wpisując w polu Text jego nazwę (Zapisz) 3. Ustawmy jego wysokość i szerokość (Width oraz Height) na Fill Parent 12

43 Rysowanie palcem po ekranie Scenariusz 3 3. Zaprogramowanie aplikacji Po zakończeniu prac nad budową interfejsu, możemy przejść do stworzenie programu naszej instrukcji. Wbrew pozorom instrukcje, które za chwilę wykonamy, są bardzo proste. Przejdźmy więc teraz do zakładki Blocks i zacznijmy od ustawienia programu dla przycisków wyboru koloru. Wydarzenie when[biały].click (czyli: po naciśnięciu przycisku Biały) spowoduje uruchomienie aplikacji set[canvas1]. [PaintColor] to kolor biały (czyli: ustaw kolor rysowania komponentu Canvas1 na biały). Od tego momentu wszystko, co narysujemy na ekranie będzie rysowane kolorem białym. Dla przypomnienia: Instrukcję when[biały].click znajdziemy w grupie poleceń dla obiektu przycisk Biały (1). Podobnie jest z poleceniami set[canvas1].[paintcolor] to (2) oraz ustawionym kolorem (3) - te instrukcje znajdziemy również w grupach poleceń odpowiadającym tym obiektom. Analogocznie stwórzmy instrukcje dla pozostałych kolorów, by uzyskać rezultat taki, jak na ilustracji obok. Zaprogramujmy teraz działanie przycisku Czyść. W tym celu wybierzmy blok when[czyść].click i do środka wstawmy kolejny bloczek, czyli call[canvas1].clear - a więc po naciśnięciu przycisku Czyść, obszar Canvas1 zostanie wyczyszczony. 13

44 Rysowanie palcem po ekranie Scenariusz 3 Kolejną funkcją, którą utworzymy, będzie program zmiany grubości linii rysowania. Wstawmy tutaj when[slider1].positionchanged i dalej w środku: set[canvas1].[linewidth] to get[thumbposition], czyli: po przesunięciu wskaźnika Slider1 (blok PositionChange) uruchom akcję: ustaw szerokość rysowania obiektu Canvas1 na wartość wskazywaną przez Slider1 (blok thumbposition). i Blok Get[thumbPosition] uzyskamy poprzez najechanie wskaźnikiem myszy na [thumbposition] (1). Teraz czas na komponent ImagePicker1, który pozwoli nam wybrać z galerii zdjęć naszego urządzenia dowolny obraz i ustawić go jako tło naszych rysunków. Wybór zdjęcia (wydarzenie AfterPicking) spowoduje ustawienie tła Canvas1 na wybrane zdjęcie [Selection] w ImagePicker1. Kolejny krok to zaprogramowanie przycisku Zapisz, dzięki któremu będziemy mogli zapisać stworzony w aplikacji obraz. Zwróćmy uwagę na dwie rzeczy. Nasza grafika będzie na stałe nosić nazwę rysunek.jpg (można to oczywiście zmodyfikować w przyszłości). Oprócz tego pole Title obiektu Screen1 (tytułu naszej aplikacji) przyjmie wartość zwracaną przez funkcję zapisywania obrazu. W praktyce oznacza to, że w tytule aplikacji zobaczymy lokalizację oraz nazwę zapisanego pliku (np. /storage/sdcard0/rysunek.jpg). 14

45 Rysowanie palcem po ekranie Scenariusz 3 Zostały nam już tylko dwie ostatnie instrukcje. Pozwolą nam one wywołać określone akcje w sytuacjach, gdy dotkniemy (narysowanie punktu - pierwsza instrukcja) lub przesuniemy palcem (narysowanie linii - druga instrukcja) po ekranie. W tych instrukcjach chodzi nam jedynie o wywołanie akcji rysowania punktu lub linii, ponieważ pozostałe parametry, takie jak kolor i grubość punktu/linii ustawiliśmy w poprzednich instrukcjach. Kiedy obszar Canvas1 jest dotknięty (TouchedDown), narysuj punkt (DrawPoint) w miejscu dotknięcia (współprzędne X i Y). Kiedy Canvas1 jest przeciągnięty (Dragged), narysuj linię (DrawLine) od miejsca dotknięcia (współprzędne X1 i Y1, czyli prev) do miejsca zwolnienia palca (współprzędne X1 i Y1, czyli current). Warto zauważyć, że w obu instrukcjach wartości X i Y są względne i odnoszą się do prawego górnego rogu Canvas1, ponieważ to do tego komponentu się odwołują (a nie do całego ekranu). 4. Podsumowanie Poznaliśmy bardziej zaawansowane mechanizmy projektowania interfejsu użytkownika - potrafimy już bardziej precyzyjnie sterować wyglądem poszczególnych komponentów. Co więcej, poznaliśmy też możliwości komponentów z obszaru Media i wiemy, jak za ich pośrednictwem uzyskać dostęp do dowolnych elementów graficznych. Nauczyliśmy się również, jak sterować kolorem i grubością rysowanej kreski. To wszystko daje nam dobre podstawy, by uczyć się jeszcze trudniejszych rzeczy. 15

46 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz jest opublikowany na licencji CC BY-SA ( Został opracowany przez Fundację Coder Dojo Polska m.in. na podstawie materiału Space Invaders ( przygotowanego przez Massachusetts Institute of Technology ( udostępnionego na licencji CC BY-SA 3.0 (

47 Spaceshooter Scenariusz 4 Cele: Stworzymy grę typu Spaceshooter. Scenariusz naszej gry obejmuje zaprogramowanie sterowania statkiem kosmicznym za pomocą akcelerometru (akcelerometry poznaliśmy tworząc Squasha), oprócz tego zajmiemy się również zaprogramowaniem kolizji obiektów, które będą znajdowały się na drodze naszego statku oraz ich poruszania. 1. Rozpoczęcie pracy Po wejściu na stronę wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty (upewnijmy się tylko, czy jesteśmy zalogowani na nasze konto Google). W celu rozpoczęcia pracy nad nowym projektem, kliknijmy na Start new project (2) i wpiszmy w oknie jego nazwę, np. Space_shooter. Nastąpi teraz automatyczne przejście do okna budowy aplikacji. 2

48 Spaceshooter Scenariusz 4 2. Projektowanie interfejsu Zacznijmy od zmiany właściwości komponentu Screen1 - w oknie Properties zmieńmy kolor tła tego komponentu na czarny (1) oraz ustawmy orientację ekranu - tutaj wybierzmy Portrait, czyli pionowy (2). Następnie dodajmy do naszej aplikacji komponent Canvas (1). Wybierzmy go z grupy Drawing and Animation w oknie Palette i przeciągnijmy na obszar ekranu w oknie Viewer. 3

49 Spaceshooter Scenariusz 4 Po tym, jak dodaliśmy komponent Canvas1, po którym będą poruszały się obiekty, przejdźmy do ustawienia jego właściwości. Zmieńmy kolor tła tego elementu na czarny (1) oraz ustawmy jego szerokość i wysokość tak, by przejmował te wartości z nadrzędnego komponentu, czyli Screen1. W tym celu zmieńmy parametry Width (szerokość) oraz Height (wysokość) na Fill parent. Teraz zajmijmy się umieszczeniem w aplikacji statku kosmicznego. W tym celu dodajmy do obszaru ekranu aplikacji komponent ImageSprite z grupy Drawing and Animation (1). Potrzebujemy jeszcze ilustracji statku, którą wykorzystamy w naszej grze. Możemy wykorzystać w tym celu wyszukiwarkę Google, wpisując takie hasła jak, spaceship sprite lub spaceship ico. Przeszukując materiały z wolną licencją można natrafić chociażby na taki statek: Źródło: en/15462-kspaceduel_spaceship_icon.html 4

50 Spaceshooter Scenariusz 4 Pamiętajmy, by nasz obrazek miał przezroczyste tło - plik musi być więc w formacie PNG lub GIF (pliki JPG nie obsługują przezroczystości). Zapiszmy plik, który chcemy wykorzystać jako statek na komputerze i dodajmy go do naszej aplikacji. W tym celu kliknijmy na Upload File w oknie Media (1). Wskażmy miejsce, gdzie znajduje się zapisany plik i kliknijmy OK. Po poprawnym dodaniu pliku zobaczymy jego nazwę w oknie Media (2). Teraz ustawmy właściwości komponentu ImageSprite1, czyli naszego statku kosmicznego. Ustawmy jego obraz w polu Picture (1) na ten, który wcześniej załadowaliśmy w oknie Media. Następnie wyłączmy obracanie (2), a wysokość oraz szerokość ustawmy na 48 pikseli (3). 5

51 Spaceshooter Scenariusz 4 Jeśli komponent ImageSprite1 został poprawnie skonfigurowany, powinniśmy zobaczyć nasz statek kosmiczny w obszarze okna aplikacji tak, jak na ilustracji obok. Następnym krokiem będzie dodanie sterowania za pomocą akcelerometru do naszej gry. Komponent AccelerometerSensor znajdziemy w grupie Sensors (1). Przeciągnijmy go na obszar ekranu naszej gry i dodajmy do aplikacji. Komponent ten, jako że jest niewidoczny, pojawi się w sekcji Nonvisible components (2). 3. Program sterowania statkiem Stwórzmy pierwszą instrukcję. Będzie ona odpowiadała za sterowanie statkiem kosmicznym poprzez przechylanie urządzenia mobilnego. Przejdźmy zatem do zakładki Blocks (1). 6

52 Spaceshooter Scenariusz 4 W oknie Blocks odnajdźmy komponent AccelerometerSensor1 (1). Po kliknięciu na niego otwarte zostanie okno z instrukcjami właściwymi dla tego komponentu. Wybierzmy blok when[accelerometersensor1]. AccelerationChanged (2) i dodajmy go do naszego obszaru bloków. Element ten jest słuchaczem (czyli funkcja when - kiedy) i będzie sprawdzał, czy urządzenie zmieniło swoje położenie. Jest to funkcja, która udostępnia nam trzy parametry: przyspieszenie w osiach X, Y i Z. Te właśnie parametry, będące zmiennymi lokalnymi, użyte zostaną teraz przez nas do poruszania się naszym statkiem. Zacznijmy od bloku wprowadzającego statek w ruch. Zaznaczmy więc komponent ImageSprite1 (1), który jest naszym statkiem i odszukajmy blok call[imagesprite1]. MoveTo. Dołączmy ten blok do słuchacza, którego dodaliśmy chwilę wcześniej. 7

53 Spaceshooter Scenariusz 4 Zmienne lokalne w słuchaczu akcelerometru przyjmują wartości dziesiętne, w przedziale od -10 do 10, w zależności od strony, w którą przechylimy urządzenie. Użyjemy więc ich do zmiany aktualnej pozycji duszka o aktualny odczyt z czujnika. Jeśli statek ma teraz współrzędne x=150 y=150 to będziemy odpowiednio dodawać lub odejmować od tych współrzędnych odczytane wartości. Kliknijmy na komponent ImageSprite1 i spośród dostępnych dla niego bloków wybierzmy ten, który będzie odczytywał wartość X tego komponentu, czyli [ImageSprite1].[X] (1). Potrzebujemy również drugiego bloku dla wartości Y, czyli [ImageSprite1].[Y]. Teraz przejdźmy do grupy Math (1), gdzie znajdziemy klocki funkcji matematycznych. Na obszar roboczy dodajmy bloki dodawania (2), odejmowania (3) oraz zaokrąglania - round (4). 8

54 Spaceshooter Scenariusz 4 Potrzebujemy również funkcji, która będzie odczytywała wartości zmiennych lokalnych. W tym celu użyjemy funkcji get[ ] (2), którą znajdziemy w grupie Variables (1). Nasza kompletna instrukcja powinna wyglądać tak, jak na poniższej ilustracji. Jak to działa? X będzie przybierał wartość: aktualna pozycja duszka na osi X - zaokrąglony odczyt ze zmiany położenia osi X. Y będzie przybierał wartość: aktualna pozycja duszka na osi Y + zaokrąglony odczyt ze zmiany położenia osi Y. Element round jest nam potrzebny po to, by aplikacja uzyskiwała tylko wartości całkowite z odczytywanych parametrów. W przypadku gdybyśmy nie użyli tego elementu, statek drgałby nawet przy minimalnych wychyleniach urządzenia. Różnica w wartościach X i Y wynika tylko z punktu odniesienia, jakiego używa urządzenie. Dzięki tym kilku bloczkom nasz statek kosmiczny zacznie się poruszać. Przejdźmy teraz do stworzenia funkcji, która będzie umożliwiała strzelanie laserem ze statku. Założenie jest takie, że po dotknięciu ekranu palcem statek wystrzeli wiązkę lasera, która po osiągnięciu górnej krawędzi zniknie. Przejdźmy zatem do wykonania tej instrukcji. 9

55 Spaceshooter Scenariusz 4 4. Stworzenie wiązki lasera Przejdźmy ponownie do sekcji Designer, klikając odpowiedni przycisk na górnej belce okna programu. Dodajmy teraz kolejny ImageSprite, który znajdziemy w grupie Drawing and Animation (2). Właśnie z tego duszka zrobimy laser. Teraz musimy przygotować i załadować do aplikacji plik graficzny lasera. Wystarczy nam mały prostokąt w dowolnym kolorze i rozmiarze 2x6 pikseli. Możemy go przygotować więc np. w programie Paint. Przejdźmy więc ponownie do sekcji Designer, klikając odpowiedni przycisk na górnej belce okna programu. Dodajmy teraz kolejny ImageSprite, który znajdziemy w grupie Drawing and Animation (2). Właśnie z tego duszka zrobimy laser. Następnie załadujmy grafikę lasera tak samo, jak dodaliśmy grafikę statku. Kliknijmy na UploadFile w palecie Media i wybierzmy naszą grafikę. Po dodaniu grafiki, w oknie Media zobaczymy drugi element. 10

56 Spaceshooter Scenariusz 4 Po tym, jak dodaliśmy komponent ImageSprite2 oraz załadowaliśmy drugi plik graficzny, możemy przejść do ustawienia właściwości naszego duszka. Zatem w polu Properties dla naszego komponentu ustawmy czas odświeżania (Interval) na 20 (1). W polu Picture wczytajmy plik graficzny (2), wyłączmy rotację obiektu (3), aby obiekt się nie obracał i nie zmieniał swojej orientacji oraz wyłączmy jeszcze widoczność naszego obiektu (4). Tę ostatnią wyłączamy po to, by duszek nie był widoczny po starcie aplikacji, a dopiero po dotknięciu ekranu, zaś czas odświeżania będzie nam potrzebny do poruszania duszkiem. Zmieńmy jeszcze nazwę naszego komponentu, klikając na przycisk Rename (5). Nazwijmy go DuszekLaser. Ułatwi nam to późniejszą pracę przy tworzeniu instrukcji. Teraz zajmijmy się dodaniem instrukcji, która umożliwi nam strzelanie laserem, gdy dotkniemy ekranu. Zacznijmy od słuchacza (warunek when), który będzie reagował, kiedy stukniemy w ekran, a ściślej mówiąc, kiedy dotkniemy obszaru komponentu Canvas1. Wróćmy zatem do zakładki Blocks i wybierzmy element when[canvas1].touchdown (2) spośród bloków dostępnych dla komponentu Canvas1 (1). 11

57 Spaceshooter Scenariusz 4 Jak będzie działał nasz laser? Po dotknięciu ekranu laser powinien przyjąć aktualne współrzędne statku, stać się widoczny oraz ustawić kierunek na 90 stopni, a także otrzymać prędkość. Parametry lasera ustawmy za pomocą klocków w grupie DuszekLaser, zaś współrzędne statku weźmy z grupy ImageSprite1. Użyjmy klocków z funkcją set (1), czyli ustaw (nazwijmy je setterami), które będą ustawiały odpowiednie wartości. Nasze settery są w zasadzie identyczne - możemy więc bazować na jednym i go duplikować, zmieniając tylko niektóre parametry. Część z nich - np. Visible (widoczność) przyjmują tylko wartości true/false (prawda/fałsz) (2) - znajdziemy je w grupie Logic w oknie Blocks. Do pobierania wartości służą jasnozielone klocki z wypustką po lewej stronie, nazwijmy je getterami od słowa get (pobierać (3)). Kompletna instrukcja powinna wyglądać tak, jak na ilustracji powyżej. Sekcja z ustawianiem wartości ma taką postać, ponieważ chcemy, by laser wychodził dokładnie ze środka naszego statku. W tym celu wykorzystamy szerokość statku dzieloną na połowę. Możemy teraz sprawdzić, jak wyglądają efekty naszej pracy. Zauważymy, że laser zachowuje się nieco dziwnie. Po stuknięciu w ekran zostanie wystrzelony, ale kiedy stukniemy ponownie, laser zniknie z ekranu i nowa wiązka pojawi się przy statku. Musimy dodać więc do naszej instrukcji warunki sprawdzające, czy DuszekLaser jest widoczny oraz czy laser nie dotyka górnej krawędzi. Ta druga funkcja będzie odpowiedzialna za ukrywanie duszka po to, byśmy mogli go ponownie użyć. 12

58 Spaceshooter Scenariusz 4 Przejdźmy więc do kategorii Control, gdzie znajdziemy interesujący nas warunek if (1), który wykorzystamy. Funkcja if (jeśli) będzie w naszym przypadku sprawdzała, czy duszek jest widoczny i w zależności od tego zwróci nam prawdę lub fałsz. Instrukcja, którą dodaliśmy powinna wyglądać tak, jak na poniższej ilustracji (1). Zatem program sprawdzi, czy duszek jest widoczny - jeśli tak, to zwrócona zostanie wartość false (fałsz). 13

59 Spaceshooter Scenariusz 4 Teraz możemy przejść do dodania funkcji sprawdzającej, czy laser dotyka górnej krawędzi ekranu. Jeśli tak, to zostanie on ukryty. Zacznijmy od dodania słuchacza when[duszeklaser].edgereached (1), czyli kiedy krawędź osiągnięta. W tej funkcji możemy ustawić zmienną lokalną, której parametrem jest numer krawędzi, do której odnosi się funkcja. W naszym przypadku nie jest to potrzebne, ponieważ nas interesuje tylko jedna, górna krawędź - laser leci wyłącznie do góry. Dodajmy więc pozostałe bloki, by nasza instrukcja wyglądała tak, jak na poniższej ilustracji: Po tej zmianie laser nie będzie znikał pomiędzy stuknięciami w ekran, tylko będzie czekał, aż DuszekLaser zniknie z ekranu poprzez zderzenie się z górną krawędzią. 14

60 Spaceshooter Scenariusz 4 5. Stworzenie przeciwnika Ostatnim krokiem w budowie naszej aplikacji będzie dodanie przeciwnika, do którego będziemy mogli strzelać. Po zderzeniu lasera z przeciwnikiem oba duszki (czyli laser i przeciwnik) znikną, zaś przeciwnik pojawi się w nowym, losowym miejscu. Musimy oczywiście dodać komponent ImageSprite, z którego zrobimy naszego przeciwnika. Zróbmy to analogicznie jak w przypadku duszków statku i lasera. Dodajmy więc komponent ImageSprite, przygotujmy grafikę (możemy ponownie poszukać odpowiedniej ilustracji w internecie), wgrajmy ją i przypiszmy duszkowi. Oprócz tego wyłączmy rotację, ustawmy interwał na 10 oraz wyłączmy widoczność. Zmieńmy też nazwę naszego nowego duszka na DuszekPrzeciwnik. Teraz przejdźmy do zakładki Blocks, by stworzyć odpowiednie instrukcje. Zacznijmy od przygotowania własnej procedury, która będzie losowała pozycję duszka przeciwnika oraz nadawała mu prędkość. Poza tym procedura ta włączy również widoczność duszka oraz ustawi jego kierunek. Przejdźmy więc do sekcji Procedures (1) i dodajmy nową procedurę do, czyli wykonaj (2). Zmieńmy jeszcze nazwę naszej procedury, klikając na jasnofioletowe pole z jej nazwą (3) - wpiszmy ustaw_przeciwnika. 15

61 Spaceshooter Scenariusz 4 Dodajmy teraz do naszej instrukcji wspomniane wcześniej funkcje. Ponownie wykorzystajmy tutaj settery, których użyliśmy już wcześniej. Ustawmy kolejno - widoczność duszka jako prawda, pozycję Y na 0 (czyli na górze ekranu). Użyjmy również funkcji random integrer, która losuje liczby całkowicie z podanego przedziału. Naszym przedziałem są wartości od 0 do szerokości ekranu ([Canvas].[Width]). Dzięki temu duszek otrzyma losową pozycję na osi X. Dodatkowo ustawiamy jeszcze heading na -90, czyli w dół. Teraz możemy przejść do wykonania pozostałych instrukcji z wykorzystaniem naszej procedury. Po przejściu do grupy Procedures zobaczymy, że pojawiły się tam nowe bloki, w tym wywołanie naszej procedury, czyli call[ustaw_przeciwnika] (1). Wybierzmy więc ten blok. Pierwsza, krótka instrukcja będzie odpowiadała za uruchomienie procedury ustaw_przeciwnika razem ze startem aplikacji. Przejdźmy więc do grupy Control i wybierzmy klocek when[screen1].initialize - czyli kiedy Screen1 zostanie uruchomiony, instrukcja zostanie włączona. 16

62 Spaceshooter Scenariusz 4 Gdybyśmy sprawdzili działanie aplikacji już teraz, moglibyśmy dostrzec, że duszek przeciwnika leci w dół i zatrzymuje się na dolnej krawędzi ekranu. Sytuacja jest nieco podobna do tej z laserem, dlatego musimy dodać obsługę ponownego losowania pozycji duszka przeciwnika, kiedy ten dotknie dolnej krawędzi. Instrukcja powinna wyglądać tak, jak na poniższej ilustracji. W tym przypadku dodatkowo sprawdźmy jeszcze, czy krawędź, którą dotknie duszek, jest krawędzią dolną (przyjmuje ona wartość -1). Zatem teraz, kiedy duszek dotknie krawędzi i jeśli jest to krawędź dolna, to wywołana zostanie procedura call[ustaw_przeciwnika] - zatem duszek się zresetuje i pojawi na górze. Szybkimi krokami zbliżamy się do końca. Potrzebujemy jeszcze tylko instrukcji, która będzie odpowiadała za obsługę zderzenia lasera z przeciwnikiem. Użyjmy do tego funkcji when[duszekprzeciwnik].collidedwith (1), która sprawdza spotkania ze sobą różnych obiektów. Ten blok znajdziemy rzecz jasna w grupie DuszekPrzeciwnik. 17

63 Spaceshooter Scenariusz 4 Jak możemy zauważyć, po najechaniu kursorem na element other, w tej funkcji mamy dostępną zmienną lokalną, sprawdzającą, z czym zderzył się obiekt. Dodajmy więc sprawdzanie, czy DuszekPrzeciwnik zderzył się z DuszekLaser, a jeśli tak, to wywołajmy utworzoną przez nas wcześniej funkcję resetującą przeciwnika oraz ustawmy widoczność lasera na fałsz. Spowoduje to zniknięcie przeciwnika i pojawienie się go w innym miejscu oraz zniknięcie lasera, byśmy mogli oddać ponowny strzał. Nasza ostatnia instrukcja powinna wyglądać więc tak, jak na powyższej ilustracji. Po jej wykonaniu wykonaniu gra jest już gotowa. 6. Podsumowanie Poznaliśmy zasady animacji ruchu postaci (duszków) oraz wiemy, jak rozpoznawać wychylenia urządzenia w dwóch płaszczyznach. Powtórzyliśmy sprawdzanie kolizji pomiędzy elementami gry, a także rozpoznawanie dotknięcia ekranu urządzenia. 18

64 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz został opracowany przez Fundację Coder Dojo Polska i jest opublikowany na licencji CC BY-SA (

65 Czat bluetooth Scenariusz 5 Cele: Stworzymy aplikację, która będzie pozwalała na komunikację pomiędzy dwoma urządzeniami poprzez połączenie bluetooth. Aplikacja będzie wymagała wcześniejszego sparowania, czyli połączenia obu telefonów. W przeciwnym wypadku aplikacja nie będzie widziała punktów do podłączenia, czyli innych urządzeń. Zatem jeszcze przed rozpoczęciem pracy nad aplikacją warto włączyć w urządzeniu Bluetooth i połączyć je z innym urządzeniem, co ułatwi nam pracę na późniejszym etapie. 1. Rozpoczęcie pracy Tak, jak zawsze, wejdźmy na stronę i wybierzmy Create, by uruchomić App Inventor. Następnie przejdźmy do zakładki My Projects (1), gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2) i wpiszmy w oknie jego nazwę, np. Czat_lokalny. Nastąpi teraz automatyczne przejście do okna budowy aplikacji. 2

66 Czat bluetooth Scenariusz 5 2. Projektowanie interfejsu Zacznijmy oczywiście od zaprojektowania interfejsu aplikacji. Na samym początku podzielmy okno programu na trzy poziome sekcje. Pierwsza z nich będzie zawierała przycisk z listą dostępnych urządzeń, druga będzie składała się z pola tekstowego oraz przycisku do wysyłania wiadomości, natomiast w ostatniej sekcji umieścimy okno, w którym będzie wyświetlana cała konwersacja. Na początku ustalmy orientację naszej aplikacji na pionową, tak jak robiliśmy to w poprzednich aplikacjach. W celu zablokowania obrotu ekranu i ustawienia orientacji na pionową musimy zaznaczyć Screen1 w oknie Components, a następnie w oknie Properties ustawić ScreenOrientation na Portrait. Teraz przejdźmy do zakładki Layout w palecie dostępnych komponentów i dodajmy, jeden pod drugim, trzy komponenty HorizontalArrangement (1). 3

67 Czat bluetooth Scenariusz 5 Teraz zmodyfikujmy wszystkie trzy dodane komponenty. Dla każdego z nich we właściwościach ustawmy szerokość jako Fill Parent (1), by komponenty te wypełniły na szerokość cały ekran. W pierwszych dwóch komponentach wysokość pozostawmy jako Automatic (2). Dopiero w ostatnim komponencie wysokość, czyli parametr Height ustawmy jako Fill Parent, by ten ostatni element wypełnił całe wolne miejsce, które pozostało na ekranie. 4

68 Czat bluetooth Scenariusz 5 Teraz do naszej pierwszej sekcji, czyli HorizontalArrangement1 dodajmy komponent ListPicker z grupy User Interface (1). Następnie zmieńmy od razu jego nazwę na Połącz (2). Włóżmy teraz do naszego drugiego komponentu HorizontalArrangement2 element TextBox (1), w którym będziemy wpisywali nasze wiadomości. Zaraz obok dodajmy komponent Button (2), za pomocą którego wiadomości będą wysyłane. 5

69 Czat bluetooth Scenariusz 5 Zmieńmy teraz jeszcze teksty wyświetlane na naszych komponentach. Dla komponentu TextBox1 w polu Hint (1) wpiszmy Wiadomość. Wartość pola Hint będzie wyświetlana w komponencie TextBox1 jako wskazówka, mówiąca użytkownikowi o przeznaczeniu tego pola. Teraz przejdźmy do zmiany tekstu wyświetlanego na przycisku. Zaznaczmy go i w polu Text (1) wpiszmy Wyślij. 6

70 Czat bluetooth Scenariusz 5 W tym momencie zajmijmy się naszym trzecim komponentem HorizontalArrangement3. Mianowicie dodajmy do niego element Label z grupy User Interface (1). We właściwościach tego elementu, czyli w oknie Properties, w polu Text ustawmy pustą wartość. Prace nad naszym interfejsem dobiegają końca. Teraz musimy dodać komponenty, które będą bezpośrednio odpowiadały za działanie naszego czatu. Znajdziemy je w sekcji Connectivity (1). Będziemy potrzebowali trzy z nich: BluetoothServer, BluetoothClient oraz ActivityStarter. Przeciągnijmy każdy z nich na ekran. Jako że są one niewidoczne, znajdziemy je pod polem z ekranem naszej aplikacji, w grupie Non-visible compoments. 7

71 Czat bluetooth Scenariusz 5 Ostatnim komponentem, jakiego potrzebujemy, jest Clock, czyli zegar - znajdziemy go w grupie Sensors. Ten komponent również jest niewidzialny, jak trzy poprzednie, które dodaliśmy. Clock będzie nam niezbędny do regularnego odświeżania czasu rozmów. Ustawmy go domyślnie, jako wyłączony, czyli TimerEnabled (2), a jako interwał wpiszmy wartość 100 milisekund (3). Dla łatwiejszej pracy możemy zmienić również nazwy komponentów odpowiadających za wysyłanie i przyjmowanie wiadomości. Zmieńmy zatem nazwę BluettoothClient1 na Klient (4) oraz BluettoothSerwer1 na Serwer (5). 8

72 Czat bluetooth Scenariusz 5 Kiedy zgromadziliśmy już wszystkie komponenty, zadbajmy o to, by miały one poprawne nazwy. To ułatwi nam pracę podczas układania programu, do czego za chwilę przejdziemy. Zmieńmy więc nazwy przycisków tak, jak na ilustracji obok: - ListPicker1 zmieńmy na lista_urządzeń (1) - TextBox1 zmieńmy na Treśc_wiadomości (2) - Button1 zmieńmy na przycisk_wyślij (3) - Label1 zmieńmy na Wyświetl_rozmowę (4) 9

73 Czat bluetooth Scenariusz 5 3. Zaprogramowanie aplikacji Teraz przejdźmy do stworzenia instrukcji programu, aby aplikacja mogła działać. Przełączmy się zatem do trybu Blocks i rozpocznijmy kolejny etap naszej pracy. Na początek zajmijmy się utworzeniem procedury Sprawdź_bluetooth. Będzie ona sprawdzała włączenie modułu Bluetooth dla komponentu Klient, a jeżeli ten będzie wyłączony, to wyświetli okno z prośbą o włączenie Bluetooth na urządzeniu. Uruchomiona zostaniej więc akcja ActivityStarter1 i przyjmie ona wartość android.bluetooth.adapter.action.request_enable. Teraz przejdźmy do instrukcji, która wywoła start stworzonej przed chwilą przez nas procedury Sprawdź_bluetooth. Chcemy, by procedura uruchamiała się waz z rozpoczęciem działania aplikacji, dlatego użyjemy do tego warunku uruchomienia aplikacji, czyli when[screen1].initialiaze. W kolejnej instrukcji ustalimy, że nazwa użytkownika będzie wyświetlała się na górnej belce aplikacji oraz że będzie ona losową liczbą z przedziału

74 Czat bluetooth Scenariusz 5 Teraz dodajmy procedurę inicjalizacji serwera czatu, by informacje pomiędzy urządzeniami mogły być wymieniane. Ustawmy nasłuchiwanie (czyli poszukiwanie informacji przez inne urządzenie) oraz akceptację połączenia bez nazwy. Musimy dodać również zmienną globalną, dzięki której będziemy determinować późniejsze akcje w odbiorze i wysyłaniu wiadomości. Następną instrukcją, jaką stworzymy, jest funkcja wypisz, która będzie nam wypisywała cały tekst rozmowy w polu konwersacji. Do funkcji dodajmy zmienną lokalną treść, dzięki której odczytamy przekazany tekst i następnie dodamy go do istniejącej już treści rozmowy, stąd funkcja typu string (ciąg znaków) do łączenia zmiennych, czyli join. Innymi słowy - na początku pola treść dodamy tekst, który otrzymaliśmy od naszego rozmówcy, zachowując przy tym stary, wcześniej otrzymany tekst. 11

75 Czat bluetooth Scenariusz 5 Kolejna instrukcja to dodanie słuchacza włączeń zegara. Tak jak ustaliliśmy wcześniej, to działanie będzie wykonywane co 100 milisekund - wpisaliśmy tę wartość w interwale w komponencie Clock1. Nasza aplikacja, zarówno jeśli będzie działała jako serwer, jak i jako klient (mówi o tym zmienna jestem_serwerem w pierwszym warunku if (jeśli) na powyższej ilustracji), będzie stale sprawdzała co 100 milisekund, czy są nowe porcje danych do pobrania. Jeśli tak (jeśli są jakieś dane do pobrania, to jest ich więcej niż 0), to zostaną one pobrane i wypisane na ekranie przy użyciu wcześniej zdefiniowanej funkcji wypisz, przekazując do niej cały otrzymany tekst. W aktualnej postaci nasza aplikacja potrafi tylko oczekiwać na połączenie oraz na nowe wiadomości, nie ma jednak możliwości, by połączyć się z aplikacją. Potrzebujemy zatem instrukcji, która będzie realizowała nowe połączenia. Nowe połączenia będą przyjmowane za pomocą komponentu listpicker, który nazwiemy lista_urządzeń. Po kliknięciu w ten komponent pojawi się nam lista sparowanych wcześniej urządzeń, o czym wspominaliśmy na początku. Po wybraniu opcji z listy, pogram spróbuje połączyć się z wybranym telefonem czy tabletem. Najpierw, przy użyciu słuchacza BeforePicking (przed wybraniem), wypełnijmy listę dostępnymi urządzeniami. 12

76 Czat bluetooth Scenariusz 5 Następnie, po wybraniu, spróbujmy połączyć się z klikniętym urządzeniem. Posłuży nam do tego słuchacz AfterPicking (po wybraniu), w którym mamy dostępną klikniętą pozycję z listy. Teraz kilka słów wyjaśnień na temat powyższej metody. W pierwszym warunku if na powyższej ilustracji próbujemy połączyć się z wybranym urządzeniem. Jeśli nam się powiedzie i połączenie zostanie ustanowione, to funkcja łącząca zwróci nam wartość true (prawda), dzięki czemu wejdziemy do środka. W środku natomiast, jeżeli łączymy się z jakimś urządzeniem, to na pewno nie jesteśmy serwerem, co ustawiamy na początku (set[global jestem_ serwerem] to false). Dalej - jeśli nie jesteśmy serwerem, to wyłączamy nasłuchiwanie nowych połączeń, a na koniec włączamy Clock1, który będzie odświeżał nam zawartość konwersacji czatu. Mamy również funkcję else, która oznacza lub dla funkcji if. Zatem jeżeli nie uda nam się połączyć, to zostanie aktywowana funkcja else, a w niej uruchomi się inicjalizacja, która na wszelki wypadek włączy ponownie nasłuchiwanie dostępnych połączeń i ustawi zmienną lokalną jestem_serwerem na fałsz. Możemy w tym momencie przejść do zbudowania prostej metody formatowania wysyłanych wiadomości. Jak widzimy, funkcja ta polega na połączeniu nazwy użytkownika z wysyłaną wiadomością oraz dodanie kresek i znaku nowej linii \n. 13

77 Czat bluetooth Scenariusz 5 Kolejną bardzo istotną instrukcją będzie moduł, służący do powiadamiania użytkowników o tym, że są ze sobą połączeni. Na początku poskładajmy metodę odpowiadającą za wysyłanie wiadomości: Funkcja wydaje się obszerna, ale ponownie jest to spowodowane faktem, że obsługujemy jednocześnie dwa stany: aplikację jako serwer i jako klient. W pierwszym warunku sprawdzamy, czy jesteśmy serwerem, czy też nie i w zależności od wyniku (nie możemy obsłużyć zdarzenia bez sprawdzenia tego warunku) używamy funkcji serwera lub klienta do wysyłania wiadomości, którą ostatecznie wypisujemy na czacie poprzez utworzoną wcześniej metodę wypisz. Teraz możemy dodać odpowiedni blok do when[lista_urządzeń].afterpicking. Wróćmy więc do naszej instrukcji, którą ustawiliśmy chwilę wcześniej i dodajmy do niej brakujący blok z wiadomością, że połączenie się powiodło (1). 14

78 Czat bluetooth Scenariusz 5 Klient jest już obsłużony, zatem czas teraz na informację od serwera, że połączenie zostało zaakceptowane: Mamy zatem słuchacza serwera Bluetooth, który czeka na informację, czy jakieś urządzenie zostało podłączone. Jeśli tak, to ustawmy zgodnie z prawdą zmienną jestem_serwerem na true (prawda). Następnie wyślijmy wiadomość do klienta, że połączenie zostało zaakceptowane oraz uruchommy zegar do sprawdzania, czy nadeszły jakieś nowe wiadomości. Na sam koniec ustawmy instrukcję, która pozwoli nam wysłać tekst. Zróbmy więc tak, że po kliknięciu przycisku przycisk_wyślij zostanie wysłany tekst wpisany w polu treść_ wiadomości, a po wykonaniu tej czynności pole z treścią zostanie wyczyszczone. 4. Podsumowanie Dobrnęliśmy wreszcie do końca dość skomplikowanej, trzeba przyznać, aplikacji. Wiemy już, w jaki sposób łączyć ze sobą urządzenia i jak przekazywać między nimi informacje z wykorzystaniem technologii Bluetooth. Poznaliśmy zasady pracy aplikacji jako serwer oraz jako klient, co z pewnością będzie przydatne przy budowaniu zaawansowanych aplikacji, pracujących chociażby z wykorzystaniem internetu. 15

79 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz jest opublikowany na licencji CC BY-SA ( Został opracowany przez Fundację Coder Dojo Polska m.in. na podstawie materiału Pizza Party with Fusion Tables ( przygotowanego przez Massachusetts Institute of Technology ( udostępnionego na licencji CC BY-SA 3.0 (

80 Tablica ogłoszeń Scenariusz 6 Cele: Celem naszej pracy będzie stworzenie internetowej bazy danych i wykorzystanie jej do publikowania ogłoszeń, które będą widoczne dla osób i aplikacji z dostępem do jej www bazy. W ten sposób możemy stworzyć np. szkolną tablicę ogłoszeń, służącą do przekazywania informacji między uczniami i nauczycielami. 1. Rozpoczęcie pracy - przygotowanie bazy Tym razem nie zaczniemy od uruchomienia App Inventora. Na początek musimy włączyć usługę Fusion Tables oraz postarać się o klucz do API Google, bez którego nie podłączymy się do usług Google. Zacznijmy od włączenia potrzebnej nam usługi - w tym celu przejdźmy na stronę i w menu po lewej stronie, w sekcji APIs & auth wybierzmy APIs (1) - tam, w wyszukiwarce wpiszmy fusion tables (2) i klikając na Off (3), włączmy tę usługę - ikona zmieni się na On. 2

81 Tablica ogłoszeń Scenariusz 6 Następnie przejdźmy do sekcji Credentials (1), gdzie utworzymy nowy klucz (3). W oknie, które nam się pojawi, wybierzmy Browse Key, jeśli ma to być klucz internetowy. W kolejnym oknie kliknijmy na Create, zaś pole tekstowe pozostawmy puste - służy ono do ustawiania filtrów zapytań, a tego w tym momencie nie potrzebujemy. Skopiujmy teraz nasz klucz, oznaczony na ilustracji czerwonym kolorem (3). Podczas pracy w grupie będziemy używać klucza jednej, wybranej osoby, żeby dane były dostępne na wielu urządzeniach. Po uzyskaniu klucza możemy przejść do przygotowania bazy. 3

82 Tablica ogłoszeń Scenariusz 6 Jedna osoba z grupy musi utworzyć ogólnodostępną bazę oraz przekazać do niej klucz i jej identyfikator. Rzecz jasna każdy samodzielnie może podążać krok po kroku przez ten proces i stworzyć swoją własną bazę, jednak dla naszych potrzeb i tak będziemy korzystali tylko z jednej, wspólnej bazy. Przejdźmy zatem na adres a następnie kliknijmy przycisk Create a Fusion Table. Teraz wybierzmy Create empty table. Kolejnym krokiem będzie zdefiniowanie kolumn tabeli - nadajmy im nazwy zgodne z zawartością, jaką będą wyświetlały. Jako że będzie to ogłoszenie, zróbmy miejsce na dodanie imienia, klasy, a także tekstu ogłoszenia. Zobaczymy cztery domyślne kolumny - Text, Number, Location i Date. Zmieńmy nazwy kolumn Number oraz Location na Name i Class, ponieważ wstawiane w nie będą odpowiednio imię oraz klasa, do jakiej uczęszcza uczeń, który dodaje ogłoszenie. 4

83 Tablica ogłoszeń Scenariusz 6 W celu zmiany nazwy kolumny musimy wywołać menu podręczne kolumny - w tym celu należy najechać kursorem na strzałkę (1). Z listy poleceń wybierzmy element Change. i Zawartość tabeli możemy sortować według numerów, nazw czy dat, w zależności od właściwej kolumny (2). Jeżeli chcemy dokonać takiej zmiany później, już w trakcie budowy aplikacji, należy pamiętać, że musimy zaktualizować link do połączenia z tabelą (str. 6). Zmieńmy oba wspomniane wcześniej pola, podając ich nowe nazwy (1) oraz ustawiając dla obu pól rodzaj wpisywanych wartości jako Text (2). Po zakończeniu wybierzmy Save (2), co spowoduje powrót do poprzedniego ekranu. Teraz udostępnimy dane dotyczące tabeli oraz ograniczymy dostęp do tych danych tylko dla osób, które posiadają bezpośredni link. Zacznijmy od określenia dostępu. W tym celu kliknijmy na File, a następnie Share (1), co spowoduje otwarcie okna z opcjami udostępniania tabeli. 5

84 Tablica ogłoszeń Scenariusz 6 W oknie, które zostało otwarte, kliknijmy Zmień i dalej, w kolejnym oknie zmieńmy dostęp, wybierając opcję Każdy użytkownik posiadający link. Następnie musimy zapisać identyfikator tabeli. W tym celu przejdźmy ponownie do File i dalej wybierzmy About this table. Identyfikator znajdziemy na dole okna (1). Skopiujmy go do pliku tekstowego. Musimy jeszcze pobrać link do podglądu tabeli. Ten znajdziemy klikając w Tools, a następnie w Publish. Skopiujmy teraz interesujący nas link (1). Jak widzimy, ciągi znaków, którymi się posługujemy, są długie i skomplikowane. Dlatego najlepiej będzie wysłać je sobie mailem, bądź udostępnić w google drive, czy też sieci lokalnej. 6

85 Tablica ogłoszeń Scenariusz 6 2. Stworzenie interfejsu aplikacji Teraz, kiedy mamy już wszystko, czego potrzebowaliśmy, możemy przejść do zaprojektowania interfejsu oraz napisania programu dla naszej aplikacji. Wejdźmy zatem na stronę i wybierzmy Create, by uruchomić App Inventor. Następnie stwórzmy nowy projekt i nazwijmy go np. Tablica_Ogłoszeń. Zacznijmy od zbudowania szkieletu aplikacji. Na początek będziemy potrzebowali dwóch komponentów HorizontalArrangement (1) z grupy Layouts. W obu dodanych komponentach, w ich właściwościach parametr Width ustawmy jako Fill Parent, by rozciągnęły się one na całą szerokość komponentu nadrzędnego, czyli w tym przypadku ekranu. 7

86 Tablica ogłoszeń Scenariusz 6 Do pierwszego komponentu HorizontalArrangement wrzućmy dwa pola tekstowe. Komponenty TextBox (1) znajdziemy w grupie User Interface. W oknie Components zmieńmy ich nazwy przy użyciu przycisku Rename na Imię oraz Klasa (2). Dodatkowo nazwy tych komponentów wpiszmy również odpowiednio w pole Hint, czyli podpowiedz (3) w oknie właściwości. Wpisany tam tekst pojawi się w aplikacji w polu tekstowym, kiedy nic nie będzie w nim wpisane. Dzięki temu użytkownik będzie wiedział, jakie jest przeznaczenie danego pola. 8

87 Tablica ogłoszeń Scenariusz 6 Możemy teraz przejść do drugiego komponentu HorizontalArrangement - tam dodajmy element TextBox oraz Button. Pole tekstowe będzie służyło do wpisania treści ogłoszenia, zaś przycisk będzie wysyłał prośbę o dodanie nowego ogłoszenia do bazy. TextBox nazwijmy Treść (1) oraz ustawmy jego wysokość (Height) na 100px (2). Dodatkowo zaznaczmy pole Multiline (3), dzięki czemu będziemy mogli wpisywać w to pole wiele linijek tekstu. Nie zapomnijmy również o zmianie nazwy przycisku - zamieńmy Button1 na Wyślij (4). Warto zmienić jeszcze zawartość pola Text we właściwościach naszego przycisku - tam również wpiszmy Wyślij, co będzie na pewno bardziej intuicyjne dla użytkownika. Przyda nam się jeszcze jeden przycisk, przeznaczony do odświeżania zawartości. Dodajmy więc kolejny komponent Button i umieśćmy go obok przycisku Wyślij - zmieńmy również jego nazwę oraz wyświetlany tekst na Odśwież (5). 9

88 Tablica ogłoszeń Scenariusz 6 Pozostały nam już tylko trzy elementy interfejsu i będziemy mogli przejść do zaprogramowania aplikacji. Dodajmy zatem element WebViewer z grupy User Interface. Umieśćmy go pod komponentem zawierającym pole do wpisywania treści oraz dwa przyciski (1). We właściwościach WebViewer znajdziemy pole HomeUrl - tam wpiszmy adres internetowy wspólnej dla wszystkich bazy, którą ustaliliśmy wcześniej. Następnie przejdźmy do grupy Sensors i dodajmy komponent Clock (1), który również będzie nam potrzebny do poprawnego działania aplikacji. Ostatnim komponentem, jakiego potrzebujemy jest FusionTablesControl (3), który znajdziemy w grupie Storage. W jego właściwościach musimy podać prawidłowy ApiKey(4), czyli klucz wspólny dla wszystkich, który utworzyliśmy wcześniej. Kompletny interfejs naszej aplikacji powinien wyglądać tak, jak na powyższej ilustracji. Teraz możemy przejść do zaprogramowania aplikacji. 10

89 Tablica ogłoszeń Scenariusz 6 3. Zaprogramowanie aplikacji Przejdźmy do zakładki Blocks i zacznijmy od instrukcji, która sprawi, że po włączeniu aplikacji lista powinna sama się odświeżyć - nasze okno przeglądarki połączy się z tabelą, gdzie znajdują się ogłoszenia oraz wyświetli jej zawartość. Do tego celu wystarczy nam prosta funkcja inicjalizacji komponentu Screen oraz wywołanie w tym momencie komponentu WebViewer. Teraz dodajmy zmienną globalną, która będzie zawierała w sobie numer ID (identyfikator) tabeli, do której będziemy dodawali nowe dane. Jako że zapytania SQL, których będziemy w prosty sposób używać, wymagają precyzyjnego formatowania, powinniśmy dołożyć jeszcze funkcję, która doda pojedyncze cudzysłowy do podanego ciągu znaków. i SQL, o którym mowa, to strukturalny język zapytań, który używany jest do tworzenia i modyfikowania baz danych, a także do umieszczania oraz pobierania informacji z tychże. Kolejna funkcja, jaką utworzymy, dodatkowo zamienia pojedyncze apostrofy z podanej wartości na cudzysłowy. Tę funkcję wprowadzimy po to, by usystematyzować kolejne wartości i zamknąć je pomiędzy pojedynczymi cudzysłowami. Chcemy uniknąć sytuacji, gdy ktoś wpisze w pole tekstowe pojedynczy apostrof. Np. wpisując słwowo test owy - aplikacja będzie próbowała wysłać w ten sposób słowo test owy, przez co zapytanie zostanie rozbite na dwie części test oraz owy i z powodu braku jednego apostrofu otrzymamy błąd dodawania danych do bazy. Jak wspomnieliśmy wyżej, zapytania SQL wymagają precyzyjnego formatowania, więc jest to konieczne dla prawidłowego działania aplikacji. 11

90 Tablica ogłoszeń Scenariusz 6 Teraz zajmijmy się dodaniem rekordu, czyli wpisu do bazy. Kiedy klikniemy przycisk Wyślij, do tabeli zostanie dodany wiersz o identyfikatorze, który ustaliliśmy wcześniej jako zmienną globalną. Dalej w miejscu columns podajemy, które kolumny wypełniamy, ponieważ nie zawsze musimy dodawać wszystkie kolumny. Następnie, używając funkcji łączenia ciągów znaków (wcześniej napisanej metody dotyczącej apostrofów i cudzysłowów), oddzielając je przecinkiem podajemy, w odpowiedniej kolejności, nasze dane. Na sam koniec, za pomocą komponentu Clock dodajmy odpowiednio sformatowaną datę i czas. Przyda nam się jeszcze funkcja, która odświeży zawartość naszej przeglądarki, kiedy jakieś dane zostaną wysłane. Wystarczy tutaj użyć prostej instrukcji, która przywoła komponent WebViewer1, kiedy FusiontabletControl1 otrzyma wynik. i Przesłanie danych z tabeli do aplikacji trwa dłuższą chwilę - nawet ok. 30 sekund. Problem ten nie występuje, jeżeli wejdziemy do tabeli z poziomu przeglądarki - wtedy zawartość tabeli widoczna jest od razu. Dodajmy jeszcze obsługę przycisku Odśwież, by ten działał poprawnie. 12

91 Tablica ogłoszeń Scenariusz 6 4. Podsumowanie Dotarliśmy już do końca aplikacji. Tym razem wyszliśmy poza AppInventor i poznaliśmy próbkę innych narzędzi Google. Aplikację można wykorzystać w bardzo praktyczny sposób, tworząc np. szkolną tablicę ogłoszeń, która usprawni komunikację między uczniami i nauczycielami, chociażby w przypadku nagłej nieobecności nauczyciela lub jako przypomnienie dotyczące zbliżającego się zebrania z rodzicami. 13

92 Materiały stworzone w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Scenariusz został opracowany przez Fundację Coder Dojo Polska i jest opublikowany na licencji CC BY-SA (

93 Kalkulator, część 2 Scenariusz 7 Cele: Wykorzystując poznane dotychczas funkcje i narzędzia, stworzymy kalkulator, który będzie posiadał wszystkie podstawowe funkcjonalności, włącznie z mnożeniem i dzieleniem. Tym razem będzie to więc kalkulator znacznie bardziej zaawansowany od tego, któego stworzyliśmy wcześniej. 1. Rozpoczęcie pracy Na początek musimy uruchomić App Inventor, wchodząc na stronę Tam wybierzmy Create i otwórzmy nowy projekt. Nazwijmy go Kalkulator Projektowanie interfejsu Rozpocznijmy od przeciągnięcia na projekt ekranu (obszar Viewer) dwóch komponentów Label, czyli etykiet (1). 2

94 Kalkulator, część 2 Scenariusz 7 2. Projektowanie interfejsu Teraz musimy dopasować oba komponenty Label do potrzeb naszej aplikacji. Zacznijmy od Label1 - ten komponent będzie wyświetlał nasze obliczenia, czyli wyrażenie matematyczne. Zmieńmy więc jego nazwę na Obliczenia (1). Następnie usuńmy zawartość z pola Text, by pozostało ono puste (2). TextAlignment, czyli wyrównanie tekstu ustawmy na center (3) i zmieńmy jeszcze szerokość i wysokość. Width ustawmy jako Fill Parent, zaś w polu Height podajmy wartość 30 pikseli (4). 3

95 Kalkulator, część 2 Scenariusz 7 Po konfiguracji etykiety Obliczenia, zajmijmy się drugim elementem, czyli Label2 - ten będzie z kolei wyświetlał wynik naszych obliczeń. Zmieńmy zatem nazwę tego elementu na Wynik (1). Ustawmy tło tego komponentu w polu BackgroundColor na Light Gray (2). W polu Text wpiszmy 0 (3) i zmieńmy jeszcze szerokość komponentu. Width ustawmy jako Fill Parent, zaś w polu Height pozostawmy Automatic (4). Potrzebujemy jeszcze jednego komponentu Label, będzie on pełnił jedynie funkcję estetyczną - jako że nie mamy możliwości ustawienia marginesów pomiędzy elementami, to użyjemy go jako separatora pomiędzy wynikiem a klawiszami kalkulatora. Włóżmy więc komponent Label poniżej dwóch dodanych już elementów (1). W jego właściwościach pole Text pozostawmy puste, poza tymzmieńmy jeszcze wysokość, (Height) - wpiszmy tam 20 pikseli. 4

96 Kalkulator, część 2 Scenariusz 7 Poniżej etykiety Label1 dodajmy kolejny komponent, tym razem HorizontalArangement z grupy Layout (1). Ten komponent za chwilę umożliwi nam dodanie pierwszego rzędu przycisków kalkulatora - cyfr 1, 2 i 3 oraz znaku dodawania +. Na razie jednak zajmijmy się tylko komponentem HorizontalArangement - zmieńmy parametr szerokości na Fill Parent (2). Resztę pozostawmy bez zmian. 5

97 Kalkulator, część 2 Scenariusz 7 Teraz możemy dodać już pierwszy przycisk, czyli cyfrę 1. Z grupy User Interface przeciągamy do wnętrza dodanego wcześniej HorizontalArrangement1 element Button (1). Zmieńmy wartość w polu Text na 1 (2), a szerokość i wysokość na Fill Parent (3). W tym momencie nasz przycisk rozciągnął się na całą szerokość ekranu, lecz po dodaniu kolejnych przycisków w tym rzędzie, wszystkie przyjmą jedną, taką samą szerokość. 6

98 Kalkulator, część 2 Scenariusz 7 Dodajmy teraz Button2, który będzie przyciskiem z cyfrą 2. Umieśćmy go obok przycisku 1 i zmodyfikujmy właściwości komponentu Button2 w takim sam sposób, jak zrobiliśmy to z poprzednim przyciskiem - zmieńmy więc wyświetlany tekst na cyfrę 2 oraz Width na Fill Parent. W ten sposób oba przyciski razem wypełniają całą szerokość ekranu. Pozostało nam dodać jeszcze kolejne przyciski w tym rzędzie, czyli 3 oraz +, którym również nadamy parametr szerokości Fill Parent. Po dodaniu obu kolejnych przycisków powinniśmy otrzymać taki efekt, jak na ilustracji obok. Musimy jeszcze tylko zmienić nazwę przycisku + na Button_plus (1). 7

99 Kalkulator, część 2 Scenariusz 7 W ten sam sposób zaprojektujmy dwa kolejne wiersze przycisków naszego kalkulatora. Dodajmy kolejny komponent HorizontalArrangement i wstawmy tam przyciski 4, 5, 6 oraz znak mnożenia, czyli *. Pamiętajmy również o ustawieniu szerokości dla każdego komponentu na Fill Parent oraz zmianie nazw dla przycisków działań matematycznych na Button_minus i Button_razy. 8

100 Kalkulator, część 2 Scenariusz 7 Pozostał nam jeszcze ostatni wiersz, który będzie zawierał kolejne brakujące przyciski. Dodajmy je w taki sam sposób, jak w przypadku wcześniejszych wierszy. Przyciski, które musimy dodać to 0 (1), Czyść (2) oraz znak dzielenia (3) i znak równania (4). Pamiętajmy oczywiście o zmianie nazw tych elementów w oknie Components: - przycisk Czyść nazwijmy Button_Czyść - przycisk 0 nazwijmy Button0 - przycisk / nazwijmy Button_Podzielić - przycisk = nazwijmy Button_Równa_Się W ten sposób prace nad interfejsem kalkulatora dobiegły końca. Możemy przejść teraz do stworzenia programu naszej aplikacji - przełączmy się więc do zakładki Blocks. 9

101 Kalkulator, część 2 Scenariusz 7 3. Zaprogramowanie aplikacji Zaczynamy drugi i ostatni etap budowy naszej aplikacji, czyli programowanie. Na sam początek przygotujmy procedurę pomocniczą, którą nazwiemy Naciśnięcie_Cyfry. Pozwoli nam ona prawidłowo obsłużyć naciśnięcie klawiszy z cyframi od 1 do 9. Całość będzie działała tak, jak w zwykłym kalkulatorze, zatem jeżeli pole Wynik będzie wynosiło 0, to procedura pozwoli nam wstawić w to miejsce cyfrę, zaś jeśli pole Wynik będzie posiadało już jakąś wartość, to naciśnięta cyfra zostanie wstawiona na koniec. Dla przykładu, jeżeli na ekranie mamy liczbę 13 i nacisnęliśmy klawisz 7, to kalkulator na koniec dostawi cyfrę 7 i na ekranie zobaczymy 137. Jak to osiągnąć? Wróćmy do naszego przykładu. Jeżeli kalkulator wyświetla już liczbę 13 (bo wcześniej nacisnęliśmy 1, a potem 3) i naciśniemy cyfrę 7, to liczbę 13 trzeba pomnożyć razy 10 i dodać wartość ostatniej cyfry. Otrzymamy zatem 13 x 10, czyli , a więc 137. Tak skalkulowaną wartość należy wyświetlić w polu Wynik. Zauważmy, że ta formuła zadziała również prawidłowo w przypadku, gdy naciskamy pierwszy klawisz. Kalkulator wyświetla 0, a my naciskamy 7. Zatem 0 x da nam 7 i taką wartość kalkulator wyświetli w polu Wynik. Stwórzmy więc naszą procedurę. W tym celu będziemy potrzebowali bloku to[procedure] (1), który znajdziemy w grupie Procedures. Przeciągnijmy blok na obszar programu w oknie Viewer i zmieńmy jego nazwę na Naciśnięcie_Cyfry. Wykonamy to, klikając na obszar z napisem procedure w tym bloku. Po kliknięciu na niebieski kwadrat wewnątrz bloku możemy zdefiniować parametry tej procedury. My będziemy potrzebowali tylko jednego parametru o nazwie Naciśnięta_Cyfra - dodamy ten parametr w następnym kroku. Kliknijmy na niebieski kwadrat, by otwarte zostało okno pozwalające na definiowanie parametrów procedury. Przeciągnijmy input:[x] (1) do środka bloku inputs i nadajmy naszemu parametrowi nazwę Naciśnięta_Cyfra. 10

102 Kalkulator, część 2 Scenariusz 7 Teraz możemy dodać resztę naszej procedury pomocniczej. Kompletna instrukcja powinna wyglądać tak, jak na ilustracji po prawej stronie. Jak to działa? W pierwszej kolejności sprawdzamy, czy kalkulator nie wyświetla już wyniku z poprzedniego obliczenia. Jeżeli wyświetla, to procedura nie robi nic i program oczekuje na naciśnięcie przycisku Czyść. W celu sprawdzenia tego warunku należy zweryfikować, czy pole Obliczenia zawiera znak = (funkcja contains text zwraca wartość true, jeśli [Obliczenia].[Text] zawiera fragment tekstu, czyli piece = ). Jeżeli nie zawiera znaku =, to bloczek zmienia wartość true (prawda) na false (fałsz). Następnie, jeżeli funkcja zwróciła wartość false, to wykonujemy opisane wcześniej obliczenia, czyli mnożymy wartość [Wynik].[Text] x 10 i dodajemy wartość Naciśnięta_Cyfra, a następnie kompletny wynik umieszczamy ponownie w polu [Wynik].[Text]. Zanim przejdziemy dalej, stwórzmy jeszcze zmienną globalną, którą nazwiemy składnik_1 i nadajmy jej wartość 0. Blok initialize global znajdziemy w grupie Variables (zmienne). Zmienna ta będzie służyła nam do zapamiętania wartości pierwszego składnika naszych obliczeń. Teraz musimy stworzyć funkcję, która wywoła naszą procedurę. Wykorzystamy w tym celu blok when[button1]. Click (czyli kiedy Button1 jest wciśnięty). Zatem, jak widać na powyższej ilustracji, wciśnięcie przycisku Button1 wywoła procedurę pomocniczą Naciśnięcie_Cyfry, z parametrem Naciśnięta_Cyfra równym 1. Jak łatwo się domyślić, wywołanie procedury musimy przypisać do każdego klawisza od 0 do 9. Stwórzmy zatem kolejne instrukcje when[button(x)].click, gdzie (x) oznacza numer przycisku. W każdej instrukcji powinna oczywiście znaleźć się odpowiednia liczba od 0 do 9. 11

103 Kalkulator, część 2 Scenariusz 7 Teraz zajmiemy się przyciskami działań matematycznych, by poprawnie wyświetlały przypisane im znaki. Te instrukcje są bardzo podobne, więc omówimy tylko jedną, funkcję dodawania. Dla przycisku dodawania musimy zacząć od funkcji when[button_plus].click, dla przycisku odejmowania będzie to oczywiście when[button_minus].click i analogicznie w przypadku przycisków mnożenia oraz dzielenia. 1. Jeżeli Obliczenia.[Text] jest puste, to wykonaj: 2. Ustaw wartość zmiennej globalnej składnik_1 na Wynik.[Text] 3. Połącz tekst (join) zmienna globalna składnik_1 oraz znak + i wstaw taki połączony tekst jako wartość pola Obliczenia.[Text] 4. W pole Wynik wstaw 0. Przykładowo - jeżeli pole [Obliczenia].[Text] jest puste, a w polu [Wynik].[Text] mamy 17 i naciśniemy +, to w polu obliczenia pojawi się 17+, a w polu [Wynik].[Text] wyświetlona zostanie cyfra 0 (kalkulator będzie przygotowany do rozpoczęcia wprowadzania drugiego składnika). Ponadto zmienna globalna składnik_1 przyjmie wartość 17 i to będzie pierwszy składnik naszych obliczeń, z którego skorzystamy w momencie naciśnięcia przycisku =. Analogicznie przygotujmy klawisze dla odejmowania, mnożenia oraz dzielenia. Możemy duplikować te bloczki, zmieniając tylko warunek rozpoczęcia oraz wyświetlany znak zgodny z działaniem matematycznym(3). Zwróćmy uwagę, że te instrukcje nie wywołują żadnych działań matematycznych. Powodują one jedynie prawidłowe zapisanie wyrażenia w polu Obliczenia oraz zapisanie wartości zmiennej składnik_1. Zanim przejdziemy do instrukcji wykonującej właściwe obliczenia, zajmijmy się jeszcze przez chwilę przyciskiem Czyść. Naciśnięcie tego przycisku spowoduje wyczyszczenie obliczeń, więc wstawmy 0 w pole Wynik.[Text] oraz (pusto) w pole Obliczenia.[Text]. 12

104 Kalkulator, część 2 Scenariusz 7 Ostatnim krokiem będzie zaprogramowanie przycisku równania, a w nim wszystkich działań matematycznych. Rozpoczynamy od ustalenia warunku When [Button_Równa_się].Click, to wykonaj: 1. Sprawdzamy, czy pole Obliczenia nie zawiera znaku =. Jeśli ten warunek jest spełniony to przechodzimy do kolejnych instrukcji. Jeśli warunek nie jest spełniony, to kalkulator wyświetla właśnie wynik obliczeń i oczekuje na naciśnięcie przycisku Czyść. 2. Jeżeli warunek jest spełniony, to inicjujemy (przygotowujemy) zmienną lokalną (initialize local znajdziemy w grupie Variables). Nasza zmienna lokalna Operator to ostatni znak pola Obliczenia (przykładowo, jeżeli pole Obliczenia wynosi 137+, to Operator przyjmie wartość +). Do wycięcia fragmentów tekstu z pola Obliczenia wykorzystujemy element segment text (text, start (początek) i length (długość liczbę znaków, którą chcemy wyciąć w naszym przypadku jeden, ostatni znak) oraz funkcję length, która policzy nad długość tekstu (na podstawie długości tekstu potrafimy znaleźć ostatni znak jeżeli pole liczy 6 znaków, to ostatni znak jest znakiem szóstym). 3. Następnie ustawiamy wartość Obliczenia.[Text] na połączony tekst z elementu Obliczenia.[Text], Wynik.[Text] ze znakiem =. Dla przykładu, jeżeli w polu Obliczenia mieliśmy 137+, a w polu Wynik 25, to po naciśnięciu znaku pole Obliczenia przyjmie wartość =. 4. Następnie, przy pomocy warunku if/else_if/ else_if (jeśli/w przeciwnym przypadku jeśli/w przeciwnym przypadku jeśli),wykonujemy obliczenia. 5. Jeżeli (if) zmienna Operator wynosi +, to: Składnik1 dodajemy do pola Wynik.[Text], a sumę umieszczamy w polu Wynik. 6. W przeciwnym przypadku (else if) sprawdzamy, czy zmienna Operator wynosi - i jeżeli tak, to od zmiennej Składnik1 odejmujemy wartość pola Wynik.[Text], a różnicę umieszczamy w polu Wynik. 7. To samo robimy dla znaków * oraz /. 13

105 Kalkulator, część 2 Scenariusz 7 4. Podsumowanie Stworzyliśmy znacznie bardziej skomplikowany kalkulator, niż poprzednio. Ten potrafi już wykonywać wszystkie podstawowe działania. Wykorzystując go jako punkt wyjścia, można zaproponować uczniom przemyślenie dodatkowych fukcjonalności, np. pierwiastkowania bądź też obliczeń na procentach. 14

106 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

107 Materiał jest opublikowany na licencji CC BY-SA ( Jest tłumaczeniem materiału "Day 1: Variables / Bouncing Ball" ( udostępnionego na licencji CC BY-SA ( Skacząca piłka 1. Rozpoczęcie pracy 1. Przejdź do strony MIT App Inventor ( i zaloguj się za pomocą swojego konta Google. 2. Kliknij na górze opcję Moje projekty (My Projects), a następnie - przycisk Nowy (New). 3. Nazwij nowy projekt Skacząca piłka (Bouncing Ball). 4. Po zatwierdzeniu nazwy Edytor Projektu otworzy się automatycznie. 5. Włącz emulator lub połącz swój telefon z projektem za pomocą aplikacji MIT Companion App Edytor Projektu składa się z dwóch głównych części: Projektanta (Designer) i Bloków (Blocks). Okno Projektanta (Designer) zbudowane jest z czterech kolumn: Paleta (Palette), Przeglądarka (Viewer), Komponenty (Components) i Właściwości (Properties). o o o o Paleta (Palette) zawiera dostępne narzędzia. Przeglądarka (Viewer) przedstawia wygląd ekranu Twojego telefonu (w przybliżeniu). Część poświęcona Komponentom (Components) przedstawia, co umieszczono dotąd w przeglądarce i systematyzuje komponenty. W tej części okna będziesz zmieniać nazwy poszczególnych elementów. Część dotycząca Właściwości (Properties) służy do określania, jak będą wyglądać i jak się będą zachowywać elementy aplikacji. Podczas tworzenia aplikacji można się przełączać między Blokami i Projektantem, klikając przyciski, które znajdują się nad Właściwościami. 2

108 W obszarze Bloków dodaje się elementy, które sprawią, że aplikacja będzie wykonywać określone zadania. Ta część zostanie omówiona nieco później. 2. Zaczynamy: 1. W części Palety poświęconej rysunkom i animacjom (Drawing and Animation) kliknij i przeciągnij element Kanwa (Canvas) z Palety do Przeglądarki. 2. Wybierz element Canvas1 w oknie Komponentów (powinien znajdować się pod Screen1). 3. W oknie Właściwości (Properties) kliknij opcję Kolor tła (BackgroundColor) i wybierz niebieski (Blue). Sprawdź, co zmieniło się na ekranie Twojego urządzenia mobilnego. 4. W oknie Właściwości (Properties) zmień szerokość i wysokość elementu Canvas1 na 200 px. 5. Z kategorii Animacja (Animation) w Palecie przeciągnij Piłkę (Ball) na kanwę Canvas1 w Przeglądarce. Umieść piłkę w dowolnym miejscu kanwy. 6. Co się stało w Twoim telefonie? W oknie Komponentów (Components) element Ball1 powinien znajdować się pod Canvas. Kliknij go i w polu Właściwości (Properties) zmień prędkość... (speed ) na Obserwuj telefon po naciśnięciu klawisza enter. 7. Komponent Ball1 powinien powoli przesuwać się po kanwie Canvas1 i dotrzeć do krawędzi, gdzie się zatrzyma. 3

109 3. Ekran Bloki (Blocks) Pracując w App Inventorze, będziemy używać ekranu bloków (Blocks), aby dodawać elementy, które przekazują aplikacji instrukcję działania. Nie chcemy, aby piłka Ball1 pozostała na krawędzi kanwy Canvas1. Zależy nam, aby odbijała się od ścian. To zadanie musimy zaprogramować w obszarze bloków (Blocks). Oto, co należy zrobić: 1. Przejdź do ekranu Bloki, klikając przycisk Blocks. 2. Spójrz na lewą stronę. Powinieneś zobaczyć listę naszych komponentów: kanwa Canvas1, piłka Ball1 i ekran Screen. 3. Kliknij komponent Ball1. Pojawi się lista bloków przypisana temu elementowi. Dopasowując do siebie bloki, sprawisz, że komponenty będą wykonywały dane działanie. 4. Przeciągnij myszą komponent when Ball1.EdgeReached (gdy piłka znajdzie się przy krawędzi) na obszar roboczy. 5. Następnie kliknij ponownie komponent Ball1 w menu po lewej stronie. Przeciągnij blok call Ball 1.Bounce (odbicie piłki) i połącz go z blokiem when Ball1.EdgeReached. 4

110 6. Ustaw wskaźnik myszy nad przyciskiem krawędzi (edge) w bloku when Ball1.EdgeReached, przeciągnij i zaczep element wartości krawędzi do bloku call Ball1.Bounce. 7. Sprawdź, co się dzieje w Twoim emulatorze lub telefonie? 8. Ponownie przejdź do obszaru projektowania wyglądu aplikacji (Designer). 4. Dodatkowe działania Wykonaj następujące czynności. Wprowadzając każdą zmianę, sprawdzaj, co się dzieje w emulatorze lub telefonie. Częstość (Interval) 1. Zmień częstość komponentu Ball1 na Zmień częstość komponentu Ball1 na Zmień częstość komponentu Ball1 na 10 (wartość początkowa). Prędkość (Speed) 1. Zmień prędkość komponentu Ball1 na Zmień prędkość komponentu Ball1 na 1 (wartość początkowa). Kierunek (Heading) 1. Zmień kierunek komponentu Ball1 na Zmień kierunek komponentu Ball1 na 45 (wartość początkowa). 5

111 Promień (Radius) 1. Zmień promień komponentu Ball1 na Zmień promień komponentu Ball1 na 10 (wartość początkowa). Pobaw się: Zmień dowolną właściwość komponentu Ball1. Przywróć wartości początkowe po zakończeniu prób. 5. Dasz radę? Oto kilka trudniejszych zadań do wykonania. Wyzwanie dla mądrej głowy: 1. Czy po wykonaniu wszystkich zadań możesz sobie wyobrazić grę opartą na koncepcjach przedstawionych w tym przewodniku? (Piłka nożna? Co jeszcze?) Trudne wyzwanie: 1. Czy potrafisz zmienić kolor komponentu Ball1? 2. Czy potrafisz zmienić kolor komponentu Canvas1? 3. Czy potrafisz zmienić kształt komponentu Canvas1 na prostokątny zamiast kwadratowego? 4. Czy potrafisz zmienić kształt komponentu Canvas1 tak, aby był dopasowany do ekranu? Bardzo trudne wyzwanie: 1. Czy potrafisz dodać jeszcze jedną piłkę i sprawić, aby odbijała się w tym samym czasie co pierwsza piłka (Ball1)? Ekstremalnie trudne wyzwanie: 1. Czy potrafisz spowodować, aby obie piłki odbijały się od ścian i od siebie? 6

112 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

113 Materiał jest opublikowany na licencji CC BY-SA ( Jest tłumaczeniem materiału "Hello Purr for App Inventor 2" ( przygotowanego przez Massachusetts Institute of Technology ( i udostępnionego na licencji CC BY-SA ( Aplikacja Hello Purr dla App Inventor 2 HelloPurr: dotknij kotka, aby zamiauczał HelloPurr to prosta aplikacja, którą można stworzyć w bardzo krótkim czasie. Tworzymy przycisk z obrazkiem kota i programujemy go tak, aby po kliknięciu słychać było miauczenie. Aby stworzyć aplikację HelloPurr potrzebny będzie plik graficzny przedstawiający kota i plik dźwiękowy z dźwiękiem miau. Otwórz te pliki na komputerze, klikając poniższe linki. Następnie kliknij prawym przyciskiem myszy grafikę lub pasek pliku dźwiękowego i wybierając opcję Zapisz jako zapisz obydwa pliki do wybranej przez Ciebie lokalizacji. Zdjęcie kotka: kitty.png ( Dźwięk - miauknięcie: meow.mp3 ( Wybierz komponenty, aby zaprojektować aplikację 2

114 W projektach App Inventora Komponenty (Components) znajdują się z lewej strony okna Projektanta (Designer) pod tytułem Palette (Paleta). Są to podstawowe elementy do tworzenia aplikacji w telefonie z systemem Android można je porównać do składników w przepisie kulinarnym. Niektóre komponenty są bardzo proste, jak np. element Label (Etykieta), który po prostu wyświetla tekst na ekranie lub element Button (Przycisk) [nr 1 z lewej strony], który można kliknąć, aby zainicjować działanie. Inne komponenty są bardziej rozbudowane, np.: Kanwa rysunkowa, która może zawierać nieruchome obrazy i animacje, czujnik Akcelerometr, który działa jak kontroler gier Wii i wykrywa poruszenie lub potrząśnięcie telefonem, komponenty, które odtwarzają muzykę lub wideo, komponenty, które pozyskują informację ze stron internetowych itp. Aby użyć komponentu w aplikacji, należy go kliknąć i przeciągnąć do Przeglądarki (Viewer) umiejscowionej na środku obszaru Projektant (Designer). Po dodaniu komponentu do Przeglądarki [nr 1 poniżej], pojawi się on również na liście Komponentów (Components) z prawej strony Przeglądarki. Komponenty [nr 2 poniżej] mają właściwości, które można zmieniać, aby dostosować wygląd lub zachowanie elementu w aplikacji. Aby tego dokonać [nr 3 poniżej], należy najpierw zaznaczyć żądany komponent na liście komponentów. Etapy wyboru komponentów i określania ich właściwości Aplikacja HelloPurr będzie zawierać komponent Button (Przycisk) wyświetlający pobrane wcześniej zdjęcie kotka. Jak to zrobić? Krok 1a. Z palety interfejsu użytkownika (User interface) przeciągnij i upuść komponent Button (Przycisk) na ekran 1 Screen1 [nr 1]. 3

115 Krok 1b. Aby umieścić zdjęcie kotka na przycisku, w okienku Właściwości (Properties) w części Zdjęcie (Image), kliknij tekst None... (Brak) i opcję Upload New (Załaduj nowe) [nr 2]. Wyświetli się okno dialogowe, w którym będzie można wybrać plik zdjęcia. Kliknij przycisk przeglądania (Browse), a następnie przejdź do lokalizacji pliku pobranego wcześniej - kitty.png [nr 3]. Wybierz ten plik, kliknij przycisk Otwórz (Open) oraz OK. Krok 2. Zmień właściwość Text przycisku: Usuń napis Text for Button1 (Tekst przycisku1), pozostawiając pustą właściwość tekstową przycisku, aby żaden tekst nie zakrywał pyszczka kotka. Projektant powinien wyglądać następująco: Jeżeli nie jest wyświetlane całe zdjęcie kotka, można to naprawić, ustawiając właściwości wysokości i szerokości (Height/Width) przycisku w Fill Parent (Dopasuj do elementu nadrzędnego). W tym celu kliknij komponent Button (Przycisk), przejdź do okienka właściwości po prawej stronie, przewiń na 4

116 sam dół do pozycji Width (Szerokość) i kliknij słowo Automatic..., aby włączyć listę rozwijaną. Wybierz opcję Fill parent. Zrób to samo dla właściwości Height (Wysokość). Krok 3. Z palety interfejsu użytkownika (User Interface) przeciągnij i upuść komponent Label (Etykieta) na przeglądarkę (Viewer) [nr 1], umieszczając go pod obrazem kotka. Na liście komponentów pojawi się on jako Label1. Zajmij się teraz zmianą niektórych właściwości komponentu Label 1, przechodząc do okienka właściwości (Properties) po prawej stronie: zmień wartość pola Text komponentu Label1 na Pogłaszcz kotka [nr 2]. Tekst zmieni się w projektancie (Designer) i na urządzeniu; ustaw FontSize (Wielkość czcionki) komponentu Label1 na 30 [nr 3]; zmień BackgroundColor (Kolor tła), klikając prostokąt [nr 4]: tło możesz zmienić na dowolny kolor (na poniższym rysunku jest niebieskie); zmień właściwość TextColor (Kolor tekstu),[nr 5], na dowolną barwę (na rysunku kolor tekstu został ustawiony na żółty). 5

117 Krok 4. W palecie kliknij kategorię Media i przeciągnij do przeglądarki komponent dźwiękowy (Sound), [nr 1]. Niezależnie od miejsca, w którym zostanie upuszczony, zostanie on wyświetlony w obszarze u dołu przeglądarki, oznaczonym Non-visible components (Komponenty niewidoczne). W okienku Media (na prawo od przeglądarki) kliknij opcję Upload New... (Załaduj nowe) [nr 2]. Przejdź do lokalizacji pliku meow.mp3 pobranego wcześniej i prześlij go do tego projektu [nr 3]. W okienku właściwości (Properties) zwróć uwagę, że Source (Źródło) obecnie ma wartość None (Brak). Kliknij to pole, aby zmienić źródło (Source) komponentu Sound1 na meow.mp3 [nr 4]. Programowanie za pomocą edytora bloków Do tej pory organizowaliśmy ekran i komponenty aplikacji w obszarze Projektanta (Designer). Aby rozpocząć programowanie zachowania aplikacji, przejdź do Edytora bloków (Blocks). Ustawianie odtwarzania dźwięku Krok 1. Z lewej strony Edytora Bloków kliknij kategorię Button1, aby zobaczyć bloczki dostępne dla tego elementu. Przeciągnij na obszar roboczy (otwarty obszar po prawej stronie) blok whenbutton1.click. 6

118 Bloki w kolorze musztardowym ze słówkiem when (kiedy) to bloki obsługi zdarzeń. Określają one, jak telefon czy tablet powinien reagować na określone zdarzenia: naciśnięcie przycisku, potrząśnięcie urządzeniem, przeciągnięcie palcem po kanwie itp. Krok 2. Kliknij kategorię Sound1, przeciągnij na obszar roboczy blok call Sound1.Play i połącz go z sekcją do (wykonaj) bloku whenbutton1.click. Bloki łączą się ze sobą jak puzzle, a podczas łączenia usłyszysz kliknięcie. Bloki fioletowe - bloki poleceń - umieszcza się wewnątrz bloków obsługi zdarzeń. Odpowiadają one za podjęcie określonego działania (np. odtworzeniu dźwięku) wtedy,kiedy nastąpi zdarzenie określone przez blok nadrzędny (np. kiedy zostanie naciśnięty przycisk Button1). Gdy wykonywany jest blok obsługi zdarzeń, uruchomiona zostaje zawarta w nim sekwencja poleceń. 7

119 Twoje bloki powinny teraz wyglądać tak: Widzimy, że blok poleceń znajduje się wewnątrz bloku obsługi zdarzeń. Ten zestaw bloków oznacza: Po kliknięciu przycisku Button1, odtwórz dźwięk Sound1. Blok obsługi zdarzeń jest kategorią działania (taką jak kliknięcie przycisku), a polecenie określa typ i szczegóły działania (np. odtworzenie określonego dźwięku). Wypróbuj to! Po kliknięciu przycisku powinno zostać odtworzone miauknięcie kota. Gratulacje, Twoja pierwsza aplikacja działa! Uwaga: W niektórych urządzeniach pojawia się znany problem z komponentem dźwiękowym. Jeżeli wyświetli się komunikat OS Error (błąd systemu operacyjnego) i dźwięk nie zostanie odtworzony lub zostanie odtworzony z dużym opóźnieniem, wróć do projektanta i spróbuj użyć komponentu Player (z kategorii Media) zamiast komponentu Sound. Tworzenie pakietu aplikacji Gdy Twoje urządzenie (emulator lub telefon/tablet) było połączone z projektem App Inventor, aplikacja działała w czasie rzeczywistym na Twoim urządzeniu. Gdy przerwiesz połączenie emulatora/telefonu/tabletu z AppInventorem, aplikacja zniknie. Zawsze możesz to zmienić, ponownie podłączając urządzenie. Aby aplikacja mogła być uruchamiana bez łączenia się z projektem App Inventora, należy stworzyć pakiet aplikacji (plik apk). Aby spakować aplikację do swojego telefonu lub wysłać ją innej osobie, kliknij przycisk Build (Kompiluj) w górnej części ekranu. W ramach polecenia kompilacji (Build) dostępne są dwie opcje: 1. App (provide QR code) aplikacja (udostępnij kod QR): Możesz wygenerować kod kreskowy (kod QR), którego użyjesz do zainstalowania aplikacji w telefonie lub tablecie wyposażonym w aparat fotograficzny, za pomocą skanera kodów kreskowych. Uwaga: kod kreskowy zadziała tylko na Twoim urządzeniu, ponieważ jest powiązany z Twoim kontem Google. Jeżeli chcesz udostępniać swoją aplikację innym osobom za pośrednictwem kodu kreskowego, musisz pobrać plik apk na swój komputer i użyć oprogramowania zewnętrznego, aby utworzyć kod kreskowy. Więcej informacji na ten temat znajdziesz tutaj. 8

120 2. App (save to my computer) aplikacja (zapisz w moim komputerze): Możesz zapisać aplikację w komputerze jako plik apk, który można dystrybuować i udostępniać według potrzeb przez ręczne instalowanie jej na innych urządzeniach. (tę metodę nazywa się czasem side loading ładowaniem bocznym). Wyzwanie! Spraw, aby kot mruczał! Zadanie polega na tym, aby po kliknięciu przycisku kot mruczał. Przejdź do edytora bloków, otwórz kategorię Sound1 i przeciągnij blok call Sound1.Vibrate milisecs, umieszczając go pod blokiem call Sound1.Play. Użyty przed chwilą blok ma wolne pole, co oznacza, że trzeba do niego coś podłączyć, aby doprecyzować szczegóły zachowania. Tutaj chcemy określić długość wibracji. Wartości są określane w tysięcznych częściach sekundy (milisekundach). Aby telefon wibrował przez pół sekundy, dołącz wartość 500 milisekund. W palecie Built-In (Wbudowane) przejdź do kategorii Math, przeciągnij pierwszy blok liczbowy (Number) i zaczep go w otworze bloku call Sound1.Vibrate. 9

121 Po umieszczeniu bloku numerycznego, kliknij liczbę 0. Zostanie ona zaznaczona na czarno. Wpisz w to miejsce 500. Gotowe! Teraz podłącz telefon i dotknij zdjęcia kota w urządzeniu. Telefon powinien jednocześnie miauczeć i wibrować. Jeśli napotkasz na problem z prawidłowym działaniem aplikacji, zaktualizuj połączenie pomiędzy programem a urządzeniem mobilnym. W tym celu kliknij przycisk Connect (Połącz) w górnej części ekranu i wybierz polecenie Reset connection (Resetuj połączenie). Jeżeli to nie pomoże, zamknij aplikację w telefonie i ponownie nawiąż połączenie. 10

122 Przegląd Oto najważniejsze zagadnienia, które dotąd omówiliśmy: Aplikacje tworzy się przez wybieranie komponentów (składników) i wskazywanie im, kiedy i jakie działanie mają wykonać. Projektant (Designer) służy do wybierania komponentów i określania ich właściwości. Niektóre komponenty są widoczne, a inne nie. Możesz dodawać media (dźwięki i zdjęcia) do aplikacji, przesyłając je z komputera. Elementy obszaru Blocks służą do montowania bloków, definiujących zachowanie komponentów. Bloki when... do... to bloki obsługi zdarzeń, które mówią komponentom, jakie działanie mają podjąć (do), gdy (when) nastąpi określone zdarzenie. Bloki call... nakazują komponentom wykonywanie określonych czynności. Zeskanuj telefonem aplikację próbną Zeskanuj poniższy kod kreskowy telefonem, aby zainstalować i uruchomić aplikację próbną lub pobierz plik apk (appinventor.mit.edu/explore/sites/all/files/ai2tutorials/hellopurr/hellopurr.apk). Pobierz kod źródłowy Jeżeli chcesz pracować z tą próbką w App Inventorze, pobierz na komputer kod źródłowy (appinventor.mit.edu/explore/sites/all/files/ai2tutorials/hellopurr/hellopurr.aia), następnie na stronie App Inventora zaznacz Create, kliknij opcję Projects (Projekty), wybierz opcję Import project (.aia) from my computer... (Importuj projekt z komputera ) i wybierz pobrany kod źródłowy. 11

123 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

124 Materiał jest opublikowany na licencji CC BY-SA Jest tłumaczeniem materiału "Connect your Phone or Tablet over WiFi ( przygotowanego przez Massachusetts Institute of Technology ( i udostępnionego na licencji CC BY-SA( Jak podłączyć telefon lub tablet przez Wi-Fi Z App Inventora możesz korzystać bez konieczności instalowania czegokolwiek na komputerze! Aplikacje tworzysz bezpośrednio na naszej stronie internetowej: ai2.appinventor.mit.edu. Aby na żywo sprawdzać efekty swojej pracy, zainstaluj aplikację MIT App Inventor Companion na telefonie lub tablecie z systemem Android. Wtedy będziesz mógł otwierać projekty na stronie App Inventor w Internecie, uruchamiać aplikacje na urządzeniu i testować je w trakcie ich tworzenia: Poniższa procedura przeprowadzi Cię przez kolejne etapy pracy z aplikacją MIT AI2 Companion. Krok 1: Pobierz i zainstaluj aplikację MIT AI2 Companion App w telefonie. Aby pobrać aplikację ze strony Google Play, włącz w swoim urządzeniu mobilnym skaner kodów QR i zeskanuj kod QR widoczny poniżej po lewej stronie. Jeżeli nie możesz skorzystać z Google Play, użyj kodu QR dostępnego po prawej stronie, aby pobrać aplikację bezpośrednio na telefon. Google Play Zalecane aktualizacje automatyczne Plik APK Wymagane aktualizacje ręczne Zeskanuj ten kod QR (lub kliknij d=edu.mit.appinventor.aicompanion3), aby pobrać aplikację ze strony Google Play Zeskanuj ten kod QR (lub kliknij appinv.us/xai2cf34), aby pobrać aplikację bezpośrednio Jeżeli potrzebujesz skanera kodu QR, możesz go pobrać ze Sklepu Play (np. ZXing). Aby zainstalować aplikację MIT AI2 Companion na urządzeniu, po jej pobraniu postępuj zgodnie z instrukcjami. Pozostaw ją włączoną w telefonie lub tablecie podczas korzystania ze strony App Inventor. 2

125 Uwaga 1: Jeżeli nie jesteś w stanie użyć kodu QR, nadal możesz zainstalować aplikację MIT AI2 Companion na telefonie lub tablecie. Użyj przeglądarki internetowej w Twoim urządzeniu, aby przejść do Google Play i znajdź tam aplikację MIT AI2 Companion. Następnie kliknij przycisk INSTALUJ. Uwaga 2: Jeżeli nie chcesz skorzystać z Google Play, tylko zainstalować aplikację bezpośrednio (tzw. sideloading), w ustawieniach urządzenia włącz opcję, która zezwoli na instalowanie aplikacji z nieznanych źródeł. Aby znaleźć to ustawienie w wersjach systemu Android starszych niż 4.0, przejdź do Ustawienia > Aplikacje, a następnie zaznacz pole wyboru przy opcji Nieznane źródła. W przypadku urządzeń z systemem Android 4.0 lub nowszym, przejdź do Ustawienia> Zabezpieczenia lub Ustawienia> Zabezpieczenia i blokada ekranu, a następnie zaznacz pole wyboru obok opcji Nieznane źródła i potwierdź wybór. Krok 2: Połącz komputer i urządzenie Z TĄ SAMĄ siecią Wi-Fi. App Inventor automatycznie wyświetli na urządzeniu mobilnym aplikację, którą tworzysz, ale tylko wtedy, gdy komputer (z otwartą stroną App Inventor) i urządzenie z systemem Android (z aplikacją Companion) będą podłączone do tej samej sieci Wi-Fi. Krok 3: Otwórz projekt App Inventor i połącz go z urządzeniem Przejdź na stronę App Inventor i otwórz wybrany projekt (lub utwórz nowy użyj polecenia Project > Start New Project i podaj nazwę projektu). Następnie użyj polecenia Connect i AI Companion z górnego menu przeglądarki AI2: Na ekranie komputera pojawi sie okno dialogowe z kodem QR. Wtedy na swoim urządzeniu uruchom aplikację MIT AI2 Companion tak, jak każdą inną aplikację. Następnie kliknij przycisk Scan QR code (Skanuj kod QR) w aplikacji Companion i zeskanuj kod z okna strony App Inventor: 3

126 Za kilka sekund zobaczysz w urządzeniu aplikację, nad którą pracujesz. Będzie ona aktualizowana w trakcie wprowadzania zmian w projekcie. Funkcja ta nazywa się testowaniem na żywo. Jeżeli masz problem z zeskanowaniem kodu QR lub Twoje urządzenie nie ma skanera, dokładnie przepisz kod z komputera do pola tekstowego w aplikacji Companion w urządzeniu. Kod znajduje się na ekranie komputera bezpośrednio pod tekstem Your code is (Twój kod) i składa się z sześciu znaków. Przepisz je i wybierz pomarańczową opcję Connect with Code (Połącz, używając kodu). Nie naciskaj klawisza Enter ani końca linii wpisz tylko sześć znaków i naciśnij pomarańczowy przycisk. Rozwiązywanie problemów: Do najbardziej prawdopodobnych przyczyn niewyświetlenia się aplikacji na urządzeniu należą: przestarzała wersja aplikacji App Inventor Companion. Pobierz najnowszą aplikację Companion App for App Inventor 2 z powyższego linku. kłopot z podłączeniem urządzenia mobilnego do Wi-Fi. Sprawdź, czy na dole ekranu aplikacji AICompanion w telefonie lub tablecie widoczny jest adres IP. brak podłączenia urządzenia mobilnego do tej samej sieci Wi-Fi co komputer. Upewnij się, że oba urządzenia są podłączone do sieci Wi-Fi o takiej samej nazwie. protokoły sieciowe, które zabraniają używania sieci Wi-Fi (np. w szkole czy organizacji). Jeżeli tak jest, nadal możesz używać aplikacji App Inventor z emulatorem lub użyć kabla USB, aby połączyć się z urządzeniem. 4

127 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

128 Materiał jest opublikowany na licencji CC BY-SA ( Jest tłumaczeniem materiału Magic 8-ball for App Inventor 2 ( przygotowanego przez Massachusetts Institute of Technology ( i udostępnionego na licencji CC BY-SA( Magic 8-ball dla App Inventor 2 Moduł poprowadzi Cię przez tworzenie aplikacji Magiczna kula z ósemką w programie App Inventor 2. Po uruchomieniu kula z ósemką wygłosi jedną ze swoich klasycznych przepowiedni, takich jak Zdecydowanie tak lub Odpowiedź niejasna, spróbuj ponownie. Część pierwsza: Kliknij przycisk, aby usłyszeć dźwięk Gotowa aplikacja Magiczna kula z ósemką będzie dostarczać przepowiednie z przygotowanej przez Ciebie listy. Najpierw przygotujemy przycisk z grafiką, a następnie zaprogramujemy go tak, aby po kliknięciu odtwarzany był dźwięk. Projektowanie aplikacji Na początek zajmiemy się wyglądem przygotowywanej przez nas aplikacji, wybierając i dostosowując komponenty w obszarze Projektant (Designer). Aby wywołać okno projektanta App Inventora, otwórz nową kartę lub okno w przeglądarce i przejdź do Jeżeli już przygotowałeś jakąś aplikację (jak np. Hello Purr), nastąpi automatyczne przekierowanie do obszaru Projektant z wyświetlonym ostatnim aktywnym projektem. Kliknij Project (Projekt) w lewym, górnym rogu ekranu, a następnie My projects (Moje projekty), aby wyświetlić listę własnych projektów. Kliknij opcję New Project i nazwij swój projekt np. MagicznaKula8 (uwaga: znakami dozwolonymi są jedynie litery, liczby oraz znak podkreślenia _ ). 2

129 1. Pobierz jedno zdjęcie i jeden plik dźwiękowy z poniższych źródeł do zastosowania w aplikacji. Kliknij prawym przyciskiem myszy (lub kliknij, przytrzymując klawisz Ctrl) link zdjęcia lub dźwięku, następnie wybierz opcję Pobierz lub Zapisz jako. Zapisz pliki multimedialne w dogodnym, łatwym do zapamiętania miejscu. Dźwięk ChaChing ( gic8ball/cha_ching.mp3) Dźwięk łyżeczki do herbaty ( on.mp3) Dźwięk Ta-Da ( Zdjęcie magicznej kuli z 8 ( Zdjęcie pustej kuli z 8 ( 2. Korzystając z palety interfejsu użytkownika, dostępnej po lewej stronie, wybierz komponent Przycisk (Button) i przeciągnij go do Przeglądarki [1]. 3. Ustaw zdjęcie kuli z numerem 8 jako zdjęcie przycisku. W tym celu: Kliknij nowo dodany przycisk, aby zobaczyć jego parametry w okienku Właściwości (Properties) z prawej strony. Przy właściwości Zdjęcie (Image) kliknij słowo Brak (None...) zostanie wyświetlone małe okno dialogowe wyboru [2]. Kliknij przycisk Załaduj plik (Upload file) i przejdź do miejsca, w którym został zapisany obraz kuli z ósemką. Zaznacz plik, a następnie zatwierdź przyciskiem OK, aby zamknąć okno wyboru. Kliknij ponownie przycisk OK w okienku Właściwości (Properties) [3]. 4. Przejdź do pola tekstowego w okienku Właściwości (Properties) i usuń wyświetlanie tekstu na przycisku [4]. 5. Z palety Media do okienka Przeglądarki (Viewer) przeciągnij element Dźwięk (Sound) [1]. Zwróć uwagę, że Dźwięk nie jest widoczną częścią aplikacji - zostanie on wyświetlony u dołu jako komponent niewidoczny. 6. Wczytaj plik źródłowy komponentu dźwiękowego. W tym celu: 3

130 W dziale Komponenty Components zaznacz nowo dodany element dźwiękowy, aby zobaczyć jego ustawienia w okienku Właściwości (Properties) z prawej strony. Pod elementem Source kliknij komórkę ze słowem Brak (None...) zostanie wyświetlone małe okno dialogowe wyboru [2]. Wybierz przycisk Załaduj plik (Upload file) i przejdź do miejsca, w którym został zapisany plik dźwiękowy. Zaznacz plik dźwiękowy, a następnie kliknij przycisk OK, aby zamknąć okno wyboru. 7. Ponownie kliknij przycisk OK w okienku Właściwości (Properties) [3]. Pierwsza część aplikacji została przygotowana w Projektancie (Designer). Przejdźmy teraz do Edytora bloków (Blocks) i zaprogramujmy zachowanie wybranych przez nas komponentów. Programowanie aplikacji W prawym górnym rogu ekranu kliknij przycisk Blocks. Teraz wskażesz swojej aplikacji, jakie działanie ma podjąć po kliknięciu przycisku. W tym projekcie jest to bardzo proste, ponieważ kod programu składa się tylko z dwóch bloków. Po otwarciu edytora bloków zauważysz, że po lewej stronie ekranu znajduje się szereg opcji ustawienia i modyfikacji działania komponentów. Nazywamy je paletą z kategoriami. W palecie bloków znajdującej się pod komponentem Screen1 kliknij kategorię Button1. Przeciągnij do obszaru roboczego bloczek when Button1.Click [1]. Następnie przejdź do kategorii Sound1, przeciągnij blok call Sound1.Play i wstaw go do bloku when Button1.Click [2]. Złączą się one jak magnetyczne puzzle. 4

131 Bloki powinny wyglądać następująco: Gotowe! Program pierwszej części aplikacji Magiczna kula z ósemką został napisany. Teraz pora sprawdzić, czy wszystko działa poprawnie. Próba: telefon/emulator. Aplikacja jest gotowa! Aby sprawdzić, czy działa prawidłowo, uruchom emulator lub połącz się z telefonem. Emulator/ Telefon: kliknij kulę/dotknij kuli, aby usłyszeć odtwarzany dźwięk. Uwaga: Jeżeli nie słyszysz dźwięku, sprawdź najpierw ustawienie głośności w urządzeniu (lub w komputerze, jeżeli używasz emulatora). Ponadto upewnij się, czy w urządzeniu jest karta SD, na której App Inventor zapisuje pliki multimedialne. W niektórych urządzeniach komponent Sound nie działa prawidłowo. Dlatego zamiast niego należy użyć komponentu Player. Część druga: Kliknij przycisk, otrzymaj przepowiednię + usłysz dźwięk Po przygotowaniu przycisku wykonującego działanie (odtwarzanie dźwięku), możemy rozszerzyć aplikację o podanie użytkownikowi przepowiedni. 5

132 Na początek będziemy potrzebowali dwóch etykiet: etykieta Label1 wyświetli instrukcję, a etykieta Label2 pokaże wybraną przepowiednię. Użyjemy bloków, aby zaprogramować Selektor listy, wybierający element z listy przepowiedni. Po każdym kliknięciu przycisku, aplikacja zmieni tekst etykiety Label2 w taki sposób, aby komponent wyświetlał inną przepowiednię. Projektowanie aplikacji Wróć do obszaru Projektanta (Designer) i dodaj kilka nowych elementów do aplikacji. 1. Z palety Układ ekranu (Layout) przeciągnij komponent Układ pionowy (Vertical Arrangement) [1]. Dzięki niemu kolejne elementy umieszczane wewnątrz tego pola będą układały się pionowo (jeden pod drugim). 2. Z palety User Interface przeciągnij komponent etykiety (Label) [2] i upuść go wewnątrz elementu Układ pionowy (Vertical Arrangement). W panelu Właściwości (Properties) zmień wartość pola Text etykiety Label1 na Zadaj pytanie magicznej kuli z ósemką [3]. 6

133 3. Do pola ułożenia pionowego włóż kolejną etykietę Label2 tak, aby znalazła się poniżej etykiety Label1. Zmień właściwość Text etykiety Label2 na Dotknij magicznej kuli z ósemką, aby otrzymać odpowiedź. Przeciągnij obraz kuli z ósemką, aby również znajdował się w komponencie Układu pionowego (Vertical Arrangement) nad dwiema etykietami. Wszystkie te elementy będą względem siebie wyrównane pionowo. Teraz pora wrócić do edytora bloków, aby zaprogramować komponenty dodane do projektu. Programowanie aplikacji Teraz zaczyna się zabawa! Przygotuj listę przepowiedni i zaprogramuj przycisk, aby wybierał jedną pozycję z listy i wyświetlał ją w etykiecie Label2. Przycisk będzie również odtwarzać dźwięk zaprogramowany w części pierwszej. Oto jak to zrobić: 1. W palecie bloków kliknij kategorię etykiety Label2, aby zobaczyć wszystkie związane z nią bloki. Przeciągnij zielony blok set Label2.BackgroundColor i wstaw go nad bloczkiem call Sound1.Play. Zauważ, że blok when Button1.Click automatycznie się powiększy, aby nowy element mógł się zmieścić w jego wnętrzu. 2. Zmień wartość z BackgroundColor na Text, wybierając z listy rozwijalnej w drugim polu zielonego bloku wyraz Text [2]. Ostatecznie nasz bloczek będzie wyglądał następująco: 7

134 3. W palecie Wbudowane (Built-In) kliknij kategorię Listy (Lists). Przeciągnij blok wybierz losowy element (pick a random item list) i połącz go z otworem bloku set Label2.Text to. 4. Wróć do palety Built-In, a tam - do kategorii Lists. Przeciągnij blok make a list i połącz go z otworem list z prawej strony bloku pick a random item list. 5. W palecie Built-In kliknij kategorię Text, przeciągnij blok a (pusty) i połącz go z otworem item bloku utwórz listę (make a list). Pomyśl o powiedzeniach, które chcesz umieścić na swojej liście przepowiedni dla magicznej kuli z ósemką. Wpisz pierwszą przepowiednię do pustego bloku tekstowego. 8

135 6. Zauważ, że po połączeniu dwóch bloków tekstu, nie ma więcej otworów, do których można by dodać kolejne odpowiedzi. Aby utworzyć więcej otworów, kliknij ciemnoniebieski, kwadratowy przycisk na bloku make a list. Rozmiar bloku make a list można modyfikować powiększać lub zmniejszać, używając w tym celu przycisku w lewym, górnym rogu. 7. Dodaj bloki tekstowe z kolejnymi przepowiedniami (pomysły na odpowiedzi: i połącz całość, jak na ilustracji poniżej. Zakończyłeś tworzenie aplikacji Magiczna kula z ósemką! Teraz Twoja aplikacja jest w pełni funkcjonalna i będzie dokładnie przewidywać przyszłość. Sprawdź, jak działa, a potem wróć tutaj, aby wykonać trudniejsze zadania i sprawić, aby projekt był jeszcze ciekawszy. Próba: Emulator lub telefon Emulator/Telefon: kliknij kulę/dotknij kuli. Jedna z odpowiedzi zostanie wyświetlona, a wraz z nią pojawi się dźwięk. Część trzecia: Potrząśnij telefonem, otrzymaj przepowiednię + usłysz dźwięk Aplikacja Magiczna kula z ósemką już działa, ale możesz sprawić, aby była jeszcze ciekawsza. Jeżeli użyjesz składnika akcelerometru, telefon zareaguje na potrząsanie zamiast na kliknięcie przycisku. Uwaga: Tę część można wykonać tylko dla telefonu lub tabletu wyposażonego w akcelerometr. Jeżeli używasz emulatora, pomiń tę część i przejdź do Wyzwania 1. Projektowanie aplikacji Z palety Czujniki (Sensors) wyciągnij komponent AccelerometerSensor. Zauważ, że automatycznie przechodzi on do obszaru niewidocznych komponentów w oknie Przeglądarki (Viewer). Jest to jedyny nowy komponent, który będzie nam potrzebny, dlatego możesz już przejść do Edytora bloków, aby zmienić program. 9

136 Programowanie aplikacji 1. W palecie bloków po lewej stronie kliknij komponent AccelerometerSensor i wyciągnij blok when AccelerometerSensor.Shaking. 2. Odłącz wszystkie bloki z wnętrza when Button1.Click i przenieś je do bloku when AccelerometerSensor.Shaking. UWAGA: można przenosić całe sekcje połączonych bloków, klikając blok położony najwyżej lub najbardziej z lewej strony i przeciągając go. Połączone bloki przesuną się razem z nim. 3. Usuń blok Button1.Click, aby utrzymać porządek w obszarze roboczym. Bloki powinny wyglądać następująco: Próba: telefon Telefon: Kiedy potrząśniesz telefonem, aplikacja pokaże odpowiedź i odtworzy dźwięk. Wyzwanie 1: Spraw, aby magiczna kula z ósemką mówiła Spowoduj, by kula z ósemką zamiast (lub oprócz) pokazywać przepowiednię w postaci tekstu, wypowiadała ją na głos. Podpowiedź: komponent Text-to-speech znajduje się w kategorii Media w obszarze Projektanta. Uwaga: Większość urządzeń z systemem Android jest wyposażona w funkcję zamiany tekstu na mowę (TTS). Jeżeli masz problemy z uruchomieniem komponentu TTS w projekcie App Inventor, dowiedz się, jak zainstalować TTS lub włączyć TTS w swoim urządzeniu. Kolejne wyzwania: Spraw, aby obraz obracał się po potrząśnięciu telefonem lub dodaj kilka obrazów, między którymi aplikacja będzie się przełączać po potrząśnięciu telefonem. Możesz użyć tej metody, aby sprawić, by trójkątny element wewnątrz okna kuli wynurzał się. A może przygotujesz grafiki dla poszczególnych przepowiedni, które będą się wyświetlać w określonym porządku? Przygotuj podobną aplikację, której użyjesz w innym celu zastąpi ona kości do gry lub litery do Scrabble. Telefon może symulować rzucanie monetą, 10

137 wybieranie losowego numeru czy nazwiska z listy uczniów w dzienniku lub stanowić generator kolorów do badania prawdopodobieństwa. Rozbuduj listę przepowiedni. Zmień aplikację kuli z ósemką w serwer, aby każdy, kto prześle do niej wiadomość tekstową, otrzymywał ją w odpowiedzi. Aplikacja próbna Aby zainstalować i uruchomić aplikację próbną, zeskanuj telefonem poniższy kod kreskowy: lub pobierz aplikację (appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/magic8ball.apk). Pobierz kod źródłowy Jeżeli chcesz pracować z tą próbką w programie App Inventor: pobierz na komputer kod źródłowy (appinventor.mit.edu/explore/sites/all/files/ai2tutorials/magic8ball/magic8ball.aia), otwórz program App Inventor, kliknij opcję Projekty (Projects), wybierz Importuj projekt (.aia) z mojego komputera (Import project (.aia) from my computer...), znajdź i zatwierdź pobrany kod źródłowy. 11

138 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

139 Materiał jest opublikowany na licencji CC BY-SA ( Jest tłumaczeniem materiału "MoleMash for App Inventor 2 ( przygotowanego przez Massachusetts Institute of Technology ( i udostępnionego na licencji CC BY-SA( Aplikacja Molemash dla App Inventor 2 W tej grze kret pojawia się w przypadkowych miejscach planszy, a gracz zdobywa punkty, dotykając go, zanim ten odskoczy. Jest to przykład prostej gry z wykorzystaniem animacji. Zaczynamy! Połącz się z witryną internetową App Inventor i załóż nowy projekt. Nazwij go Molemash", tak samo zatytułuj ekran (Title). Połącz się z telefonem. Pobierz również ten obrazek kreta ( Mash/mole.png) i zapisz go na komputerze. Wstęp Kret będzie zmieniał położenie co pół sekundy. Jeżeli zostanie trafiony, wynik zwiększy się o jeden, a telefon zawibruje. Naciśnięcie przycisku Restart zresetuje wynik. Pierwsze komponenty Zaprojektuj pierwsze niezbędne komponenty. Część z nich powinna być Ci już znana z poprzednich przewodników. Potrzebujesz: Kanwy (Canvas) o nazwie MojaKanwa. Jest to obszar, po którym porusza się kret. Etykiety (Label) o nazwie EtykietaWyniku, która przedstawia wynik, tzn. ilość dotknięć kreta. Przycisk (Button) o nazwie ResetButton. Co zrobić? Przeciągnij komponenty z palety na przeglądarkę i przypisz im nazwy. Umieść komponent MojaKanwa na górze i ustaw jego wymiary na 300 pikseli szerokości i 300 pikseli wysokości. Zmień wartość Text etykiety ScoreLabel na Wynik: ---, a wartość Text przycisku ResetButton - na Reset. 2

140 Dodaj również komponent Dźwięk (Sound) i nazwij go Noise. Komponent Noise posłuży do wywołania wibracji telefonu przy dotknięciu kreta, analogicznie do mruczenia kotka w aplikacji HelloPurr. Liczniki czasu i komponent zegara (Clock) Spraw, aby kret co jakiś czas przeskakiwał. Zrobisz to za pomocą komponentu Zegar (Clock). Obsługuje on różne operacje związane z czasem, na przykład określanie daty. Tutaj wykorzystamy ten komponent jako licznik czasu, uruchamiany w regularnych odstępach. Częstość uruchamiania jest określana przez właściwość TimerInterval zegara. Przeciągnij komponent Zegar (Clock) zostanie on przeniesiony do obszaru komponentów niewidocznych. Nazwij go MoleTimer. Ustaw przedział czasu na 500 milisekund, aby kret zmieniał miejsce co pół sekundy. Upewnij się, że opcja TimerEnabled jest zaznaczona. Dodawanie obrazka Aby dodać skaczącego kreta, posłużymy się małym obrazkiem, nazywanym Duszkiem (ImageSprite). Duszki mogą poruszać się na ekranie w obrębie kanwy. Każdy taki element ma przypisane właściwości: prędkość (Speed), kierunek (Heading), a także częstość (Interval), które określają, jak często duszek porusza się z wyznaczoną prędkością w określonym kierunku. Te komponenty mogą również wykrywać dotknięcie. W naszej grze kret ma prędkość zerową, dlatego nie porusza się samodzielnie. Zamiast tego jego pozycja jest ustawiana przy każdym uruchomieniu się licznika czasowego. Przeciągnij do Przeglądarki (Viewer) komponent ImageSprite dostępny w kategorii Rysunki i animacje (Drawing and Animation). Umieść go w obszarze MojaKanwa (MyCanvas). Następnie ustaw właściwości duszka-kreta: Grafika (Picture): Użyj pliku mole.png pobranego na wcześniej komputer. Aktywne (Enabled): zaznaczone. Częstość (Interval): 500 (częstość nie ma tutaj znaczenia, ponieważ prędkość kreta jest zerowa: nie porusza się on sam z siebie). Kierunek (Heading): 0. Kierunek też nie ma tutaj znaczenia, ponieważ prędkość wynosi 0. Prędkość (Speed): 0.0. Widoczny (Visible): zaznaczone. Szerokość (Width): Automatic (Automatyczna). Wysokość (Height): Automatic (Automatyczna). Zauważ, że pola x i y są już wypełnione. Są one ustalone przez pozycję umieszczenia kreta po przeciągnięciu go na kanwę MyCanvas. Teraz możesz zmienić położenie kreta, przesuwając go. Zwróć uwagę, że wartości x i y również się zmieniają. Wszystkie komponenty są już wybrane. Projektant powinien wyglądać tak, jak na poniższej 3

141 ilustracji. Zauważ, że element Kret (Mole) jest umieszczony wewnątrz elementu MojaKanwa (MyCanvas) w strukturze komponentów. To oznacza, że duszek jest elementem podrzędnym wobec kanwy. Zachowanie komponentu i obsługa zdarzeń Teraz określimy zachowanie komponentów. Jest to okazja, aby wprowadzić nowe możliwości programu App Inventor. Pierwszą jest możliwość zdefiniowania procedury. Procedura jest ciągiem instrukcji, które wywołujemy tak, jak pojedyncze polecenia. Jeśli w programie często korzystasz z sekwencji bloków, możesz ją zdefiniować jako procedurę, aby za każdym razem nie trzeba było odwoływać się do całego ciągu instrukcji. Procedury w programie App Inventor mogą przyjmować argumenty i zwracać wartości. W tej części omówimy jednak tylko najprostszy przypadek definiowania procedur. Definiowanie procedur Zdefiniuj dwie procedury: MoveMole przeniesie duszka-kreta w nowe, losowo wybrane położenie na kanwie. Procedura UpdateScore przedstawi wynik, zmieniając tekst etykiety ScoreLabel Zacznij od procedury MoveMole: W Edytorze bloków (Blocks), w obszarze Wbudowane (Built-In) otwórz kategorię procedur. Przeciągnij blok procedury (to procedure do) i zmień wartość tekstową pola procedure na MoveMole. Uwaga: Istnieją dwa podobne bloki: procedura to... do (wykonuje czynności) i procedura to... result... (zwraca wynik). Tutaj należy zastosować procedurę to... do. 4

142 Fioletowy blok ma pole oznaczone jako do. Właśnie tutaj należy wstawić instrukcje procedury. W naszym przypadku będą to dwa polecenia: jedno ustawi współrzędną x położenia kreta, drugie współrzędną y. Za każdym razem pozycja duszka będzie ustawiana jako iloczyn różnicy rozmiaru kanwy i wielkości kreta oraz losowego ułamka z zakresu 0-1. Wartości są generowane za pomocą bloków ułamka losowego, iloczynu i różnicy. Znajdują się one w kategorii Math. Gotowa definicja powinna wyglądać następująco: Procedura MoveMole nie przyjmuje żadnych argumentów, dlatego nie trzeba używać funkcji mutator bloku procedury. Zwróć uwagę, jak bloki łączą się ze sobą: pierwsza instrukcja używa bloku set Mole.X do ustawiania położenia kreta w poziomie. Wartość podłączona do otworu w bloku jest wynikiem iloczynu: Losowej wartości z zakresu 0 1(ułamek) różnicy szerokości duszka Mole i szerokości kanwy. Położenie pionowe jest obsługiwane podobnie. Gdy procedura MoveMole jest gotowa, przejdź do zdefiniowania zmiennej o nazwie Score, która posłuży do przechowywania wyniku (liczby dotknięć kreta). Nadaj jej wartość początkową równą 0. Zdefiniuj również procedurę UpdateScore, która przedstawi wynik w etykiecie ScoreLabel. Rzeczywista treść przedstawiana w etykiecie ScoreLabel to tekst Wynik: połączony z wartością zmiennej Score. Aby utworzyć część etykiety Wynik:, przeciągnij blok tekstowy z kategorii Text. Do wnętrza bloczka wpisz Wynik:. Użyj elementu Join, aby połączyć blok tekstowy z blokiem podającym wartość zmiennej Score. Blok Join znajduje się w kategorii Text. Oto jak powinna wyglądać zmienna Score i procedura UpdateScore: 5

143 Dodaj licznik czasu Następnym etapem naszej pracy jest wprawienie kreta w ruch. W komponencie Zegar znajduje się blok When Timer. Powtarza on cyklicznie procedurę umieszczoną wewnątrz bloku. Częstotliwość powtórzeń określa parametr TimerInterval Skonfiguruj blok MoleTimer, aby wywoływał procedurę MoveMole przy każdym uruchomieniu licznika czasowego, tworząc obsługę zdarzenia w następujący sposób: Zauważ, że kret zaczyna skakać na ekranie telefonu, gdy tylko zdefiniujesz obsługę zdarzenia. Oznacza to, że działania w projekcie App Inventor podejmowane są natychmiast po ich zdefiniowaniu. Dodaj obsługę dotknięcia kreta Program powinien zwiększać wynik przy każdym dotknięciu kreta. Duszki, podobnie jak kanwa, reagują na zdarzenia dotknięcia. Dlatego utwórz obsługę zdarzenia dotknięcia Kreta, która: 1. Zwiększa wynik o Wywołuje procedurę UpdateScore, aby pokazać nowy wynik. 3. Wywołuje wibrację telefonu trwającą 1/10 sekundy (100 milisekund). 4. Wywołuje procedurę MoveMole, aby kret został przesunięty natychmiast, bez czekania na licznik czasu. Zestaw ze sobą bloki, tak jak pokazano na ilustracji: 6

144 Podpowiedź: do szybkiego tworzenia bloków możesz użyć funkcji ich wpisywania (typeblocking): Aby utworzyć blok wartości zawierający 100, wystarczy w obszarze roboczym wpisać 100 i nacisnąć Enter. Aby utworzyć blok MoveMole, po prostu wpisz MoveMole i wybierz żądany blok z listy. Reset wyniku Końcowa czynność to resetowanie wyniku. Celem ten czynności jest sprawienie, aby przycisk ResetButton zmieniał wynik na 0 i wywoływał procedurę UpdateScore. Kompletny program Oto kompletny program MoleMash: Modyfikacje Gra już działa, ale może zechcesz wprowadzić pewne zmiany? Możesz sprawić, aby gra zmieniała tempo w zależności od tego, jak dobrze gracz sobie radzi. Aby to zrobić, zmodyfikuj właściwość Interval licznika czasu MoleTimer. Możesz śledzić trafione (w kreta) oraz chybione dotknięcia kanwy i pokazywać wynik dla obu przypadków. Aby to zrobić, zdefiniuj obsługę zdarzenia dotknięcia dla komponentu Kret (Mole), i dla kanwy MyCanvas. Odpowiedź na pytanie, czy dotknięcie Kreta traktowana będzie tak samo, jak dotknięcie kanwy MyCanvas jest twierdząca Podsumowanie Oto niektóre zagadnienia omówione w tym projekcie: Duszki to kształty reagujące na dotyk, które można zaprogramować tak, aby poruszały się 7

145 po Kanwie. Komponent zegara (Clock) może służyć jako zegar do wywoływania zdarzeń, które występują w regularnych odstępach. Procedury definiuje się za pomocą bloków to. Utworzenie bloku ułamka losowego (random fraction) tworzy liczbę między 0 i 1. Typeblocking to sposób szybkiego tworzenia bloków przez wpisanie nazwy bloku. Zeskanuj telefonem próbną aplikację Aby zainstalować i uruchomić aplikację próbną, zeskanuj telefonem poniższy kod kreskowy: Pobierz kod źródłowy Jeżeli chcesz pracować z tą próbką w programie App Inventor: pobierz na komputer kod źródłowy (appinventor.mit.edu/explore/sites/all/files/ai2tutorials/molemash/molemash.aia) otwórz program App Inventor, kliknij opcję Projects (Projekty), wybierz Import project (.aia) from my computer... (Import projektu z komputera) znajdź i zatwierdź pobrany kod źródłowy 8

146 Materiał przetłumaczony w ramach Programu Mistrzowie Kodowania finansowanego przez Samsung Electronics Polska Materiały udostępniane na licencji Creative Commons - Uznanie Autorstwa - Na Tych Samych Warunkach 1

147 Materiał jest opublikowany na licencji CC BY-SA ( Jest tłumaczeniem materiału QuizMe for App Inventor 2 ( przygotowanego przez Massachusetts Institute of Technology ( i udostępnionego na licencji CC BY-SA( Aplikacja QuizMe dla App Inventor 2 Co tworzysz? QuizMe to gra dotycząca ciekawostek baseballowych, ale można jej użyć jako szablonu do tworzenia quizów z dowolnej dziedziny. W aplikacji użytkownik odpowiada na szereg pytań, otrzymując następnie informację zwrotną, czy udzielił poprawnej, czy błędnej odpowiedzi. Gracz przechodzi do kolejnego pytania, klikając przycisk. W grze QuizMe dysponujemy zamkniętym zbiorem pytań, chyba że programista je zmieni. W następnym etapie można utworzyć MakeQuiz & TakeQuiz aplikację, która pozwala użytkownikom na tworzenie i modyfikowanie pytań. Poradnik ten zakłada, że znasz już podstawy tworzenia aplikacji w App Inventorze korzystanie z Projektanta komponentów w celu utworzenia interfejsu użytkownika i z Edytora bloków, aby określić obsługę zdarzeń. Jeżeli potrzebujesz przypomnienia, spróbuj popracować z poradnikami podstawowymi zanim przejdziesz dalej. Zaczynamy! Połącz się z witryną internetową App Inventor i załóż nowy projekt. Nazwij go QuizMe, ustaw taki sam tytuł ekranu (Title). Za pomocą MIT AI2 Companion połącz program z urządzeniem mobilnym. Pobierz poniższe zdjęcia baseballistów i zapisz je w komputerze. Później załadujesz je do projektu. 2

148 Larsenberra.jpg Dallasbraden.jpg Cyyoung.jpg Nolanryan.jpg Wstęp Zaprojektujesz grę typu quiz, w której użytkownik będzie przechodził do kolejnych pytań, klikając przycisk Dalej, a następnie otrzymywał prostą ocenę Dobrze/Źle dla każdej odpowiedzi. W tym przewodniku omówimy: definiowanie i wyświetlanie listy informacji; przechodzenie przez listę za pomocą zmiennej indeksującej zmiennej, która śledzi pozycję na liście; zachowania warunkowe wykonywanie określonych operacji tylko wtedy, gdy spełniony jest określony warunek. Zmianę zdjęcia w zależności od sytuacji. Projektowanie aplikacji Użyj Projektanta komponentów do utworzenia interfejsu dla aplikacji QuizMe. Aby utworzyć interfejs, najpierw załaduj do projektu pobrane zdjęcia. Kliknij przycisk Prześlij plik (Upload File...) w obszarze Media i wybierz jeden z pobranych wcześniej plików (np. Larsenberra.jpg). Następnie zrób to samo z pozostałymi trzema zdjęciami. Utwórz następujące komponenty, przeciągając je z Palety (Palette) do Przeglądarki (Viewer) i ustaw właściwości komponentów zgodnie z poniższym opisem: Typ komponentu Kategoria Jaką nadać jej nazwę Działanie Działanie komponentu Image User interface Image1 Ustaw właściwość zdjęcia (Picture) na Larsenberra.jpg. Jest to pierwsze wyświetlane zdjęcie. Obrazkowa część pytania Label User interface QuestionLabel Zmień właściwość tekstu (Text) na Pytanie: Wyświetla bieżące pytanie HorizontalArrangement Layout HorizontalArrangement1 Organizuje komponenty AnswerPrompt i Text (podaj odpowiedź i tekst) 3

149 Label User interface AnswerPromptLabel Zmień właściwość tekstu (Text) na Podaj odpowiedź:. Na ekranie przeglądarki przesuń tę etykietę do HorizontalArrangement1. Wyświetla tekst prośby o odpowiedź. TextBox User interface AnswerText Zmień wskazówkę (Hint) na Podaj odpowiedź. Na ekranie przeglądarki przenieś AnswerText do komponentu HorizontalArrangement1. Tutaj użytkownik podaje odpowiedź. Label User interface RightWrongLabel Zmień właściwość tekstu (Text) na Dobrze/Źle. Tutaj wyświetlana jest ocena Dobrze/Źle. HorizontalArrangement Layout HorizontalArrangement2 Organizuje przyciski AnswerButton i NextButton (przycisk odpowiedzi i przycisk dalej). Przycisk User interface AnswerButton Zmień właściwość tekstu (Text) na Wyślij. Na ekranie przeglądarki przesuń ten przycisk do HorizontalArrangment2. Użytkownik klika, aby przesłać odpowiedź. Przycisk User interface NextButton Zmień właściwość tekstu (Text) na Dalej. Przenieś ten przycisk do HorizontalArrangement2. Użytkownik klika, aby przejść do następnego pytania. Po zakończeniu powinien on wyglądać jak poniższa ilustracja (pod nią znajdują się również bardziej szczegółowe informacje). 4

150 Programowanie aplikacji Otwórz Edytor bloków, aby zaprogramować działanie komponentów. Najpierw zdefiniuj dwie zmienne - listy: zmienną QuestionList, zawierającą listę pytań i zmienną AnswerList z listą odpowiedzi na te pytania. Aby zdefiniować te dwie zmienne listy, potrzebujesz następujących bloków: Typ bloku Kategoria Działanie initialize global name to Variables Definiuje zmienną QuestionList (zmień jej nazwę) initialize global name to Variables Definiuje zmienną AnswerList (zmień jej nazwę) make a list Lists Służy do dodawania elementów do zmiennej QuestionList (trzykrotnie) Lists Służy do wpisania pytań make a list Lists Służy do dodawania elementów do zmiennej AnswerList (trzykrotnie) Text Służy do wpisania odpowiedzi Utwórz zmienne całościowe, przeciągając z kategorii zmiennych (Variables) na obszar roboczy blok Initialize global name to. Kliknij dwukrotnie domyślną nazwę name, aby ją zmienić. Blok Initialize global name to zawiera pole na początkową wartość zmiennej. Zmienna może zawierać liczbę, tekst, a nawet listę aby ją utworzyć, podłącz blok Make a list do definicji zmiennej. Bloki powinny wyglądać następująco: 5

151 Zdefiniuj ukrytą zmienną Index Za każdym razem, gdy użytkownik kliknie przycisk NextButton, aby przejść dalej, aplikacja musi pamiętać, przy którym pytaniu jest obecnie gracz. W języku programowania, aby coś zapamiętać, trzeba zdefiniować nową zmienną. W tym przypadku aplikacja musi zapamiętać bieżący numer pytania indeks listy QuestionList. Aby zdefiniować zmienną currentquestionindex, potrzebujesz następujących bloków: Typ bloku Kategoria Działanie initialize global name to Variables Definiuje zmienną currentquestionindex (zmień nazwę) 0 (1) Math Ustaw wartość początkową currentquestionindex na 1 (zmień liczbę) Bloki powinny wyglądać następująco: Wyświetl pierwsze pytanie Odłóż na razie kwestię odpowiedzi i skup się na zaprogramowaniu sekwencyjnego przejścia przez pytania. Pożądane zachowanie jest następujące: po uruchomieniu aplikacji na etykiecie o nazwie QuestionLabel pojawia się pierwsze pytanie. Gdy użytkownik kliknie NextButton, wyświetlone zostaje drugie pytanie. Po ponownym kliknięciu pojawia się trzecie pytanie. Po dotarciu do ostatniego pytania kliknięcie przycisku NextButton powoduje ponowne pojawienie się pierwszego pytania w etykiecie QuestionLabel. W programie App Inventor określone pozycje na liście są wybierane za pomocą bloku select list item. W tym bloku trzeba podać listę i indeks pozycję na liście. Jeżeli na liście są trzy pozycje, prawidłowe indeksy to 1, 2 i 3. 6

152 Po uruchomieniu aplikacja QuizMe powinna wybrać pierwsze pytanie z listy i wyświetlić je w komponencie QuestionLabel. Do tego zachowania inicjalizującego działanie aplikacji potrzebne są następujące bloki: Typ bloku Kategoria Działanie when Screen1.Initialize Screen1 Podczas uruchamiania aplikacji zainicjowana jest ta obsługa zdarzenia set QuestionLabel.Text to QuestionLabel Umieszcza pierwsze pytanie w etykiecie QuestionLabel select list item Lists Wybiera pierwsze pytanie z etykiety QuestionLabel get Variables Ustala listę, z której jest wybierany element. Tutaj: Global QuestionList 0 (1) Math Wybiera pierwsze pytanie za pomocą indeksu 1. Ustaw wartość na 1. Bloki powinny wyglądać następująco: Jak działają bloki? Zdarzenie when Screen1.Initialize jest wyzwalane podczas uruchomienia aplikacji. Pierwsza pozycja zmiennej QuestionList zostaje wybrana i umieszczona w bloku set QuestionLabel.Text. Gdy aplikacja zostanie uruchomiona, użytkownik zobaczy pierwsze pytanie. Przetestuj to zachowanie Jeśli dotychczas nie skomunikowałeś urządzenia mobilnego z programem, zrób to teraz. Co pojawia się na urządzeniu? Jeżeli utworzono listę QuestionList tak, jak wskazano powyżej, w etykiecie QuestionLabel powinna pojawić się pierwsza pozycja tej listy (Kto był doskonałym miotaczem w World Series?). Iteracja pytań Zdefiniowałeś już zmienną CurrentQuestionIndex, zapamiętującą pytanie, przy którym znajduje się użytkownik. Zaprogramuj teraz zachowanie przycisku NextButton. Gdy zostanie on kliknięty, aplikacja zwiększy wartość zmiennej, np. zmieni ją z 1 na 2 lub z 2 na 3 itd., a następnie użyje tej wartości do zaznaczenia nowego bieżącego pytania. Do tego zachowania potrzebne są 7

153 następujące bloki: Typ bloku Kategoria Działanie when NextButton.Click NextButton Uruchamia obsługę zdarzeń po kliknięciu przycisku set currentquestionindex to Zmienne Decyduje o ustawieniu indeksu wybranej listy + Math Służy do zwiększania wartości zmiennej currentquestionindex get global currentquestionindex Zmienne Tworzy nową wartość poprzez zwiększenie poprzedniej wartości o 1 0 (1) Math Dla + 1 set QuestionLabel.Text to QuestionLabel Wyświetla kolejne pytanie select list item Listy Ustawia element listy jako wartość QuestionLabel get global QuestionList Zmienne Wskazuje, która lista będzie wybrana get global currentquestionindex Zmienne Wskazuje, który element wybranej listy będzie wybrany Bloki powinny wyglądać następująco: Jak działają bloki? Pierwszy wiersz polecenia zwiększa wartość zmiennej currentquestionindex o 1 (jeżeli zmienna zawiera wartość 1, zostaje ona zmieniona na 2, z 2 na 3 itd.). Następnie wykorzystuje nową wartość do wyboru pytania o tym indeksie Przypomnijmy, że w bloku obsługi zdarzeń Screen.Initialize aplikacja wybrała pierwsze do wyświetlenia pytanie: Po kliknięciu przycisku NextButton aplikacja nie wybiera konkretnie pierwszej, drugiej czy trzeciej pozycji na liście, tylko pozycję o n-tej wartości zmiennej currentquestionindex. 8

154 Polecenia w blokach są wykonywane od prawej do lewej, tzn. aplikacja najpierw określa wartość parametru z bloku Select list item, którym jest zmienna CurrentQuestionIndex. Liczba zawarta w tej zmiennej zostaje użyta jako indeks podczas wykonania poleceń zawartych w bloku Select list item. Po pierwszym kliknięciu przycisku NextButton, wartość zmiennej currentquestionindex przeskoczy z 1 na 2, aby aplikacja wybrała drugą pozycję z listy QuestionList (Kto był pierwszym doskonałym miotaczem w 2010?). Po drugim kliknięciu przycisku NextButton, wartość zmiennej currentquestionindex zostanie zmieniona z 2 na 3, a aplikacja wybierze trzecie pytanie z listy (Kto był pierwszym doskonałym miotaczem nowej ery?). Przetestuj to zachowanie Przetestuj zachowanie przycisku NextButton, aby sprawdzić, czy aplikacja działa poprawnie. Wciel się w rolę użytkownika i kliknij przycisk NextButton w telefonie. Czy urządzenie wyświetliło drugie pytanie: Kto był pierwszym doskonałym miotaczem w 2010?? Trzecie pytanie powinno pojawić się po kolejnym kliknięciu przycisku. Jeżeli aplikacja działa, pogratuluj sobie i przejdź dalej. Kliknij przycisk NextButton ponownie (po raz trzeci). Powinien zostać wyświetlony błąd: Próba uzyskania elementu 4 z listy o długości 3. Czy wiesz, na czym polega problem? Problem z aplikacją polega na tym, że zawsze po kliknięciu przycisku NextButton zwiększa ona zmienną CurrentQuestionIndex o 1. Gdy wartość zmiennej wynosi już 3, a użytkownik kolejny raz kliknie przycisk NextButton, aplikacja zmieni wartość zmiennej z 3 na 4, następnie wywoła blok Select list item, aby odczytać pozycję o aktualnym indeksie CurrentQuestionIndex, czyli w tym przypadku czwartą pozycję. Ponieważ zmienna QuestionList zawiera tylko trzy elementy, Android wykaże błąd. Aplikacja musi zadawać pytanie - sprawdzać warunek - gdy nastąpi kliknięcie przycisku NextButton i realizować polecenia zawarte w różnych blokach w zależności od odpowiedzi. Elementem do sprawdzenia jest to, czy zmienna CurrentQuestionIndex już ma wartość 3. Jeżeli tak - należy ustawić CurrentQuestionIndex z powrotem na 0, aby użytkownik wrócił do pierwszego pytania. Będziesz potrzebował następujących bloków: Typ bloku Kategoria Działanie if then Control sprawdzenie, czy użytkownik jest na etapie ostatniego pytania = Math sprawdzenie, czy currentquestionindex ma wartość 3 get global currentquestionindex Variables 0 (3) Math 3 to numer na liście set currentquestionindex to Variables ustawienie na 0, aby wrócić do pierwszego pytania 0 Math ustawienie na 0, ponieważ kolejne bloki zwiększą wartość do 1 9

155 Zmodyfikowany blok obsługi zdarzenia When NextButton.Click powinien wyglądać następująco: Jak działają bloki Po kliknięciu przycisku NextButton aplikacja najpierw sprawdza, czy currentquestionindex ma wartość 3. Jeżeli tak, wartość tej zmiennej jest ustawiana na 0, aby po zwiększeniu jej w dalszych krokach jej wartość wyniosła 1. Wtedy quiz wróci do pierwszego pytania. Zauważ, że tylko bloki osadzone w bloku if-then są zależne od warunku. Blok zwiększenia wartości i blok Set QuestionLabel.Text to są wykonywane bez względu na jakikolwiek warunek. Aplikacja modyfikowalna: Ułatwianie modyfikowania pytań Teraz zmodyfikujemy aplikację, aby można było łatwo dodawać i usuwać elementy z listy. Zmień bloki tak, aby działały na liście o dowolnej długości, a nie tylko liście z dokładnie trzema pozycjami. Na początek dodaj czwarte pytanie do zmiennej QuestionList i kolejną odpowiedź do AnswerList. W tym celu musisz najpierw zwiększyć liczbę dostępnych pól za pomocą przycisku modyfikującego (mutatora). Aby dowiedzieć się więcej o tym elemencie, zobacz: Bloki powinny wyglądać następująco: 10

156 Przetestuj zmodyfikowaną aplikację. Kliknij przycisk NextButton kilka razy. Zauważysz, że czwarte pytanie nigdy się nie pojawia, bez względu na to, ile razy klikniesz przycisk. Problemem jest to, że test sprawdzający, czy użytkownik znajduje się przy ostatnim pytaniu, jest zbyt szczegółowy: pyta, czy zmienna CurrentQuestionIndex ma wartość 3: Możesz po prostu zmienić liczbę z 3 na 4, a aplikacja będzie znów działać poprawnie. Problem polega jednak na tym, że za każdym razem, gdy zmodyfikujesz liczbę pytań i odpowiedzi, będziesz musiał pamiętać, aby dokonać także tej zmiany. Takie zależności w programie komputerowym często prowadzą do błędów, w szczególności gdy aplikacja staje się bardziej złożona. Znacznie lepiej jest przygotować program w taki sposób, aby działał niezależnie od liczby pytań. Takie uogólnienie jest jeszcze ważniejsze, gdy lista, z którą pracujesz, zmienia się dynamicznie, na przykład w aplikacji z quizem, gdzie użytkownik może dodawać nowe pytania. Lepszym rozwiązaniem jest sprawdzenie warunku w sposób bardziej ogólny. Tak naprawdę chcesz wiedzieć, czy bieżące pytanie czyli wartość zmiennej currentquestionindex jest tak duża, jak ilość elementów w zmiennej QuestionList. Jeżeli aplikacja sprawdzi warunek w bardziej ogólny sposób, to będzie działać, nawet jeżeli dodasz lub usuniesz elementy ze zmiennej QuestionList. Aby zmienić blok obsługi zdarzenia When NextButton.Click, zmień poprzedni test sprawdzający, który odnosił się bezpośrednio do 3. Będziesz potrzebował następujących bloków: Typ bloku Szuflada Działanie length of list Lists Pyta, ile elementów jest w zmiennej QuestionList get global QuestionList Variables Określa, o którą listę chodzi Blok obsługi zdarzenia When NextButton.Click powinien teraz wyglądać następująco: 11

157 Jak działają bloki? Warunek if porównuje teraz wartość zmiennej CurrentQuestionIndex z długością zmiennej QuestionList. Zatem jeżeli zmienna CurrentQuestionIndex ma wartość 4, a długość zmiennej QuestionList wynosi 4, to wartość zmiennej currentquestionindex zostanie ustawiona na 0 (a następnie na 1, 2 itd.). Zauważ - bloki nie odwołują się już do 3 ani żadnej innej określonej wartości, dlatego instrukcja będzie działać bez względu na liczbę elementów listy. Przetestuj zmodyfikowane zachowanie. Czy po kliknięciu przycisku NextButton aplikacja przechodzi teraz przez cztery pytania, wracając po ostatnim do pierwszego? Przełączanie zdjęcia dla każdego pytania Na razie aplikacja wyświetla to samo zdjęcie, bez względu na to, jakie pytanie zostaje zadane. Możesz to zmienić tak, aby po kliknięciu przycisku NextButton pojawiała się fotografia dotycząca danego pytania. W obszarze Media dostępne są cztery dodane wcześniej zdjęcia. Teraz utworzymy trzecią listę - PictureList, której elementami będą nazwy plików zdjęć, a następnie zmodyfikujemy blok obsługi zdarzenia When NextButton.Click, aby program po każdym pytaniu przełączał zdjęcie. Najpierw utwórz listę PictureList i zainicjuj ją nazwami plików graficznych. Upewnij się, czy nazwy są dokładnie takie same jak nazwy plików, które zostały załadowane do obszaru Media. Oto jak powinien wyglądać blok dla listy PictureList: Następnie zmodyfikuj blok obsługi zdarzeń When NextButton.Click, aby zmieniał wyświetlane zdjęcie w zależności od zadanego pytania. Jeżeli ustawisz właściwość Image.Picture na nazwę pliku zdjęcia, które zostało załadowane, właśnie ta fotografia zostanie wyświetlona. Aby zmodyfikować blok When NextButton.Click, potrzebujesz następujących bloków: Typ bloku Kategoria Działanie set Image1.Picture to Image1 ustaw, aby zmieniać zdjęcie select list item Lists należy wybrać zdjęcie odpowiadające na aktualne pytanie get global PictureList Variables wybierz nazwę pliku z tej listy get global currentquestionindex Variables wybierz element o n-tym indeksie currentquestionindex Oto jak powinny wyglądać bloki: 12

158 Jak działają bloki? Zmienna CurrentQuestionIndex służy jako indeks dla zmiennej QuestionList. Wartość CurrentQuestionIndex wynosi 1, aplikacja wybiera pierwsze pytanie i pierwsze zdjęcie. Gdy CurrentQuestionIndex wynosi 2, aplikacja wybiera drugie pytanie i drugie zdjęcie. Oczywiście takie działanie zależy od tego, czy listy są ze sobą zsynchronizowane. Tak jest w tym przypadku - pierwszy obraz - LarsenBerra.jpg to zdjęcie Dona Larsena, jednocześnie Don Larsen to odpowiedź na pierwsze pytanie (Kto był doskonałym miotaczem w World Series?). Przetestuj zmodyfikowane zachowanie. Czy nowe zdjęcie pojawia się po każdym kliknięciu przycisku NextButton? Ocena udzielanych odpowiedzi Teraz dodamy bloki, które określają, czy użytkownik odpowiedział na pytanie prawidłowo, czy też nie. Gracz wprowadza odpowiedź do AnswerText, a następnie klika przycisk AnswerButton. Aplikacja musi porównać wpis użytkownika z odpowiedzią na bieżące pytanie, używając bloku if... then... w celu jej sprawdzenia. Etykieta RightWrongLabel powinna być modyfikowana, aby podawać, czy odpowiedź jest prawidłowa, czy nie. Do tego zachowania będą potrzebne następujące bloki: Typ bloku Kategoria Działanie when AnswerButton.Click if... then... AnswerButton Control zachowanie jest wyzwalane, gdy użytkownik kliknie przycisk AnswerButton Użyj mutatora, aby dodać alternatywę (else). Jeżeli odpowiedź jest prawidłowa - zrób jedno, w przeciwnym razie (else) - zrób coś innego = Math sprawdzenie, czy odpowiedź jest prawidłowa AnswerText.Text AnswerText Odpowiedź użytkownika pojawia się w tym polu tekstowym select list item Lists wybrać bieżącą odpowiedź z listy AnswerList get global AnswerList Variables lista, z której jest wybierany element 13

159 get global currentquestionindex Variables numer pytania (i numer odpowiedzi), przy którym jest użytkownik set RightWrongLabel.Text to RightWrongLabel tutaj podaj odpowiedź, Dobrze! Text jeżeli odpowiedź jest prawidłowa set RightWrongLabel.Text to RightWrongLabel tutaj podaj odpowiedź, Źle Text jeżeli odpowiedź jest nieprawidłowa Bloki powinny wyglądać następująco: Jak działają bloki? Test if sprawdza, czy odpowiedź użytkownika (AnswerText.Text) jest taka sama, jak element na liście AnswerList o indeksie równym wartości zmiennej CurrentQuestionIndex. Jeżeli zmienna CurrentQuestionIndex ma wartość 1, aplikacja porównuje odpowiedź użytkownika z pierwszą pozycją na liście AnswerList, (Don Larsen). Jeżeli zmienna CurrentQuestionIndex zmieni wartość na 2, program zestawia odpowiedź z drugą pozycją na liście, czyli Dallas Branden. Jeśli wynik porównania jest pozytywny, przeprowadzane są bloki then, a treść etykiety RightWrongLabel zostaje ustawiona na Dobrze!. Jeżeli wynik testu jest negatywny (fałszywy), przeprowadzane są bloki alternatywy (else), a treść etykiety RightWrongLabel zostaje ustawiona na Źle. Przetestuj zmodyfikowaną aplikację. Spróbuj odpowiedzieć na jedno z pytań. Powinna pojawić się ocena, czy odpowiedź była dokładnie taka sama, jak na liście AnswerList. Sprawdź zarówno prawidłowe, jak i nieprawidłowe odpowiedzi (Uwaga - uwzględniana jest wielkość liter!). Kliknij przycisk NextButton i odpowiedz na drugie pytanie. Czy aplikacja nadal działa? Powinna, ale zauważ, że gdy klikniesz przycisk NextButton, tekst Dobrze! lub Źle oraz poprzednia odpowiedź nadal będą wyświetlane. Choć nie wpływa to zasadniczo na naszą grę, to takie szczegóły interfejsu z pewnością zostaną zauważone przez użytkowników Twojej aplikacji. Aby wyzerować etykietę RightWrongLabel i AnswerText, umieść poniższe bloki w bloku obsługi zdarzeń When NextButton.click: 14

160 Typ bloku Kategoria Działanie set RightWrongLabel.Text to RightWrongLabel Ustawia wartość etykiety na Text pusty tekst set AnswerText.Text to AnswerText Ustawia wartość etykiety na Text pusty tekst Bloki powinny wyglądać następująco: Jak działają bloki? Po kliknięciu przycisku NextButton użytkownik przechodzi do następnego pytania, dlatego początkowe wiersze bloku obsługi zdarzeń zerują etykietę RightWrongLabel i pole AnswerText. Przetestuj to zachowanie Odpowiedz na pytanie i kliknij przycisk Wyślij, a następnie - NextButton. Czy Twoja poprzednia odpowiedź i jej ocena zniknęły? Ostateczna postać programu Oto gotowa aplikacja QuizMe: 15

161 Utwórz wykonywalną wersję aplikacji, wybierając menu Build/App (provide QR code for.apk). Gdy pojawi się kod kreskowy, użyj czytnika kodów w telefonie, aby pobrać i zainstalować aplikację. Modyfikacje Quiz w tej wersji jest już gotowy. Czy masz ochotę przemyśleć pewne zmiany? Zamiast wyświetlać zdjęcie dla każdego pytania, spróbuj odtworzyć dźwięk lub krótkie wideo. Za pomocą dźwięku możesz zmienić quiz w aplikację Jaka to melodia?. Quiz akceptuje ściśle określone odpowiedzi. Jeśli gracz odpowiedziałby, lekko przekształcając tekst (np. podając inicjał zamiast imienia), program uzna to za błąd. Można to zmienić na kilka różnych sposobów. Jednym z nich jest użycie bloku text.contains, aby sprawdzić, czy odpowiedź użytkownika zawiera prawidłową odpowiedź. Inny sposób to dostarczenie wielu odpowiedzi na każde pytanie i sprawdzenie przez iterację (użycie bloku for each), czy któraś z nich pasuje. Przekształć quiz tak, aby przedstawiał odpowiedzi do wyboru. Lista odpowiedzi będzie musiała być listą list, a każda podrzędna lista będzie musiała zawierać opcje odpowiedzi. Użyj komponentu ListPicker, aby umożliwić użytkownikowi wybranie odpowiedzi. 16

162 Podsumowanie Oto niektóre koncepcje omówione w tym przewodniku: Aplikacje można tworzyć w sposób ogólny, aby pracować z dowolną listą danych. Zmienne indeksu są wykorzystywane do śledzenia bieżącej pozycji na liście. Zwiększając wartość zmiennej indeksu, należy uważać na przekroczenie końca listy. Zeskanuj próbną aplikację do telefonu Aby zainstalować i uruchomić aplikację próbną, zeskanuj poniższy kod kreskowy: Pobierz kod źródłowy Jeżeli chcesz pracować z tą próbką w programie App Inventor: pobierz na komputer kod źródłowy: ( otwórz program App Inventor, kliknij opcję My Projects, wybierz Import project (.aia) from my computer... znajdź i zatwierdź pobrany kod źródłowy. 17