Zrób aplikację na smartfon

Tworzenie aplikacji wcale nie musi być trudne, czego dowodzi App Inventor. Za pomocą tego narzędzia każdy może sam zbudować własny program, i to bez potrzeby pisania kodu lub uczenia się języka programowania. Po prostu przeciągasz odpowiednie elementy na plansze i układasz je niczym puzzle, łącząc ze sobą. Cały proces tworzenia jest dwuetapowy. Najpierw w oknie przeglądarki projektujesz poszczególne elementy wyglądu przyszłej aplikacji, a następnie w specjalnym edytorze definiujesz reakcje programu na polecenia użytkownika, przypisując do jego komponentów konkretne funkcje i zależności. Wszystko odbywa się przez proste łączenie ze sobą gotowych szablonów i bloków kodu, które zostały tak zaprojektowane, aby poszczególne elementy logiczne pasowały do siebie niczym klocki układanki. Podczas korzystania z App Inventora w każdej chwili możesz obejrzeć efekty swojej pracy i przetestować je w dołączonym do programu emulatorze bądź na ekranie własnego telefonu.

W 2012 roku projekt Google przeszedł pod skrzydła jednej z najbardziej prestiżowych uczelni – Instytutu Technologicznego w Massachusetts – i powrócił na zasadach open source wraz z ogólnodostępnym serwerem usługi. Wedle zapowiedzi być może nawet przed końcem 2013 roku program otrzyma nową, znacznie doskonalszą wersję. Drugi App Inventor będzie działał już całkowicie w oknie przeglądarki, bez potrzeby korzystania z zewnętrznej aplikacji Javy i dodatkowego uruchamiania edytora bloków. Niestety oznacza to również, że choć stara wersja programu nadal będzie dostępna pod nazwą App Inventor Classic, nie będzie dalej rozwijana, a obie edycje nie będą ze sobą kompatybilne. Dotychczas stworzonych projektów nie da się więc uruchomić w nowej wersji. Osobom pragnącym kontynuować swoją przygodę z App Inventorem zalecamy stworzenie dokumentacji zdjęciowej swoich najlepszych projektów.

• Przygotowanie komputera i telefonu – Przed rozpoczęciem pracy z programem skonfigurujemy komputer i telefon. Pozwoli to uniknąć późniejszych przykrych niespodzianek, takich jak choćby niemożność zapisania projektu
• Aranżacja interfejsu przyszłej aplikacji – Korzystając z przeglądarki, nadamy kształt prostemu programowi, określając jego wygląd i planowane funkcje
• Modelowanie zachowań – Za pomocą edytora bloków ożywimy aplikację, budując z gotowych klocków powiązania zdarzeń z reakcjami systemu
• Weryfikacja działania algorytmów – W przetestowaniu programu pomoże wbudowany emulator smartfonu lub opcja połączenia App Inventora z fizycznym urządzeniem
• Instalacja w telefonie – Jednym kliknięciem zapiszemy gotową aplikację na komputerze, załadujemy ją bezpośrednio do telefonu bądź stworzymy kod QR, za którego pomocą ściągniemy aplikację z sieci

1. Pasek narzędziowy służący do zarządzania otwartym projektem.

2. Paleta komponentów – zawiera przejrzyście pogrupowany przybornik komponentów interfejsu użytkownika z wbudowanym systemem podpowiedzi. Lista dostępnych elementów jest długa i obejmuje między innymi: przyciski, obrazki, animacje, etykiety, dotykowe panele czy funkcje pozwalające zarządzać kamerą i odtwarzaczem multimedialnym. Znajdziesz tu nawet opcje służące do sterowania sensorami LEGO Mindstorm za pośrednictwem smartfonu.

3. Obszar roboczy znajdujący się w centrum okna programu to w istocie podgląd tworzonej aplikacji i przewidywanego ułożenia poszczególnych komponentów na ekranie graficznej reprezentacji ekranu telefonu.

4. Komponenty – tutaj wyświetlana jest lista wszystkich użytych w tworzonym projekcie komponentów.

5. Media – pozwala na zarządzanie treściami multimedialnymi (filmami, zdjęciami, muzyką, dźwiękami) załadowanymi do tworzonej aplikacji.

6. Lista właściwości – pole grupujące najważniejsze cechy poszczególnych elementów projektów. To tu dostosowujesz wygląd i inne parametry każdego z użytych w projekcie komponentów do własnych preferencji.

Do uruchomienia App Inventora wystarczy jedna ze wspieranych przez niego przeglądarek internetowych – Firefox, Safari, Chrome lub Internet Explorer. Jeden z komponentów programu wymaga jednak środowiska Java 6 (lub nowszego). Aby uniknąć kłopotów z działaniem programu, warto wcześniej zainstalować w systemie niezbędne biblioteki.

Przygotowanie do pracy zarówno komputera, jak i telefonu nie zajmie więcej niż kilka minut. Po instalacji bibliotek programu App Inventor jest już gotowy do pracy.

Podczas instalacji programu nie zmieniaj jego domyślnych ustawień. Zaakceptuj umowę licencyjną przyciskiem I Agree, po czym klikając Next, zatwierdź proponowaną lokalizację folderu docelowego. Warto ją zapamiętać, bo w razie ewentualnych problemów z Javą możesz potrzebować dokładnej ścieżki dostępu do aplikacji.

Po zainstalowaniu programu skonfiguruj smartfon. Podłącz go do komputera, np. kablem USB. Upewnij się, że w systemie znajdują się już odpowiednie sterowniki.

Jedną z kluczowych funkcji App Inventora jest możliwość testowania tworzonej aplikacji bezpośrednio w telefonie. Wymaga ona uruchomienia na urządzeniu trybu debugowania USB oraz wyrażenia zgody na instalację programów spoza oficjalnego repozytorium Google Play. Aby to zrobić, przejdź do ustawień swojego smartfonu i w zakładce Opcje programistyczne aktywuj opcję Debugowanie USB. Następnie powróć do głównego menu ustawień i odszukaj w nim zakładkę Zabezpieczenia. Zaznaczenie znajdującej się w nim opcji Nieznane źródła kończy proces przygotowawczy.
Jeżeli nie masz w menu opcji Opcje programistyczne, wejdź do menu Informacje o telefonie i następnie kliknij szybko siedem razy opcję Numer kompilacji. W tym momencie menu programistyczne powinno się pojawić.

Za pomocą App Inventora stworzenie atrakcyjnie wyglądającego, a zarazem funkcjonalnego interfejsu to kwestia kilku minut. Cały proces sprowadza się do wybrania niezbędnych elementów interfejsu z dostępnej w aplikacji palety, przeciągnięcia ich w obszar roboczy i dopasowania wyglądu poszczególnych komponentów do potrzeb użytkownika. Prześledzimy proces tworzenia na przykładzie bardzo prostej aplikacji, w której przyciski uruchamiają podpięte do niej zdjęcia bądź dźwięki.

W przeglądarce otwórz stronę http://appinventor.mit.edu, po czym klikając znajdujący się tu przycisk Invent, uruchom App Inventora. Jeśli robisz to po raz pierwszy, będziesz poproszony o połączenie aplikacji z twoim kontem Google. Wystarczy, że naciśniesz Zezwalaj, a obie usługi zostaną ze sobą powiązane.

W tym momencie w oknie przeglądarki pojawi się pusty panel zarządzania projektami wraz z komunikatem powitalnym podpowiadającym, gdzie szukać pomocy i jak rozpocząć budowanie własnej aplikacji. Aby utworzyć nowy projekt, skorzystaj z przycisku New. Wpisz nazwę projektu, np. Programik, w nowo wyświetlonym oknie, a następnie zatwierdź ją, klikając przycisk OK. Pamiętaj, że nazwa projektu nie może zawierać spacji ani polskich znaków.

Po zapisaniu projektu program automatycznie go otworzy, prezentując w oknie przeglądarki swój główny panel narzędziowy. Ekran został w nim podzielony na kilka czytelnie opisanych obszarów. Co istotne, ich ułożenie nie jest przypadkowe. Zalecamy dokładne zapoznanie się z interfejsem App Inventora przed przystąpieniem do dalszych czynności.

Tworzenie aplikacji zaczynasz od ustawienia jej tytułu. W tym celu odszukaj kontrolkę Label w panelu komponentów i metodą przeciągnij i upuść umieść ją w obszarze roboczym Screen1. Pole tekstowe Text for Label1, które pojawi się w tym samym momencie na ekranie podglądu, wymaga jeszcze doprecyzowania. Korzystając z opcji umieszczonych na liście właściwości Properties, w polu Text nadaj nazwę aplikacji, np. Biblioteka multimediów, ustal rozmiar użytej czcionki, wpisując w pole FontSize odpowiednią wartość, po czym włącz jej pogrubienie FontBold i wybierz kolor z dostępnej palety barw – TextColor. Możesz jeszcze wyśrodkować tekst TextAlignment - Center, ustawiając przy okazji ramkę tak, aby wypełniała całą szerokość ekranu Width - Fill parent. Pamiętaj, by każdą zmianę ustawień obserwować na bieżąco w oknie podglądu.

Przyciski są kolejnym elementem, który musi się znaleźć w interfejsie aplikacji. Przed ich dodaniem do projektu warto jednak wcześniej zadbać o ich właściwe ułożenie na ekranie. Formatowanie układu strony zapewniają kontrolki, które się znajdują w zakładce Screen Arrangement. Wybierz z niej opcję TableArrangement i przeciągnij ją w obszar roboczy, a wstawiane przyciski będziesz mógł rozmieścić jak w tabeli. Do określenia niezbędnej liczby kolumn oraz rzędów wystarczy wpisanie odpowiednich wartości w pola Column i Rows.

Strefa przycisków jest przygotowana. Czas je wstawić w odpowiednie miejsca. Zrobisz to, przeciągając komponent Button z palety Basic do wnętrza utworzonej tabeli. Prezentowana aplikacja ma mieć 4 przyciski, dlatego cały proces powtarzamy 4-krotnie, pilnując, aby każdy nowo dodawany element był umieszczany w przeznaczonym mu obszarze. Gdy wszystkie przyciski znajdą się już w projekcie. Musisz jeszcze dopasować ich wygląd do potrzeb. W tym celu ponownie zrób użytek z obszaru właściwości Properties, w którym po kliknięciu dowolnego przycisku na ekranie podglądu lub drzewie komponentów wyświetli się przypisana mu lista opcji. Skorzystaj z niej do nazwania każdego przycisku – pole Text, i określenia wielkości użytej czcionki – FontSize. Nie zapomnij również o dokładnym zdefiniowaniu rozmiaru przycisków w polach określających ich szerokość – Width, i wysokość – Height.

Aby nadać tworzonemu interfejsowi nieco atrakcyjniejszy wygląd, zmień jego tło. Najlepszy efekt osiągniesz za pomocą pliku graficznego. Musisz go jednak wcześniej załadować na serwer App Inwentora, skąd będziesz mógł go później związać z projektem. Zacznij od kliknięcia przycisku Upload new z obszaru Media, wskazania wybranego zdjęcia na dysku twardym komputera i zatwierdzenia swojego wyboru. Gdy po kilku sekundach plik pojawi się na liście mediów, przejdź do spisu użytych komponentów – Components, i naciskając Screen1, wywołaj właściwości ekranu. Wystarczy już tylko kliknięcie opcji BackgroundImage i wybranie z rozwiniętego menu załadowanego przed momentem zdjęcia, aby w oknie podglądu zaszła widoczna zmiana:

Ostatnim elementem tworzonej aplikacji są zdjęcia i dźwięki, do których będą prowadzić nasze cztery przyciski. Zanim jednak będziesz mógł dodać te pliki do projektu, muszą się one znaleźć na serwerze App Inventora. Podobnie jak w przypadku definiowania tła załaduj wszystkie potrzebne ci obrazy i pliki dźwiękowe, wykorzystując do tego sekcję Media i znajdujący się w niej przycisk Upload new. Następnie z podstawowej palety komponentów wybierz Image i umieść dwa takie obiekty w obszarze roboczym, poniżej już skonfigurowanej tabeli. To samo zrób z kontrolką Sound ulokowaną w grupie Media. Zauważ jednak, że te komponenty pojawiają się poniżej ekranu podglądu i domyślnie oznaczone są jako elementy niewidoczne.

Pozostało już tylko przypisanie wybranych plików do poszczególnych kontrolek. Jeśli chodzi o zdjęcia, proces ten sprowadza się do wywołania ustawień tego komponentu, kliknięcia umieszczonego w nim pola Picture i wybrania z menu odpowiedniej pozycji. Po jej zatwierdzeniu obrazek wyświetla się na ekranie podglądu. W tworzonej aplikacji ma się on jednak pojawiać dopiero po naciśnięciu przycisku, dlatego musisz jeszcze go ukryć, ustawiając opcję Visible na Hidden. W podobny sposób zwiążesz komponenty dźwięków z ich źródłami – Source, choć tu nie musisz się martwić o ich widoczność na podglądzie.

Na poprzednim etapie zaprojektowaliśmy wygląd naszej aplikacji. W kolejnym kroku należy ustalić, jak będzie działała. Skupimy się więc na oprogramowaniu jej części logicz- nej. Zbudujemy z klocków rządzące nią reguły, po czym sprawdzimy, czy wszystko ze sobą współgra i poprawnie działa.

Strona wizualna naszej aplikacji jest już gotowa. Gdybyś jednak w tym momencie spróbował ją uruchomić, zobaczyłbyś jedynie niereagujący na jakiekolwiek polecenia interfejs. Do tego, aby program zaczął działać tak, jak powinien, niezbędne jest dodanie do niego odpowiednich algorytmów, czyli ciągu procedur, które wywołane w określonym czasie dadzą efekt, jakiego oczekujesz. Użyjemy do tego specjalnego edytora bloków, w którym poszczególne funkcje mają postać puzzli łączących się ze sobą tylko wówczas, gdy pasują do siebie ich końcówki.

Przyciskiem Open the Blocks Editor zainicjuj otwarcie okna edytora bloków. W tym momencie na dysk twardy zostanie pobrany niewielki program Java Web Start – AppInventorForAnd.... Po jego kliknięciu rozpocznie się proces zdalnego uruchamiania edytora. Na koniec wyświetli się jeszcze komunikat bezpieczeństwa, żądający potwierdzenia chęci włączenia aplikacji. Aby przejść dalej, naciśnij Run.

Gdy po kilkunastu sekundach pojawi się na ekranie wydzielone okno edytora bloków, możesz od razu przystąpić do budowania algorytmów. Pierwszą czynnością, jaką musisz wykonać, jest wybranie odpowiednich funkcji z palety dostępnych komponentów. Trzy umieszczone tu zakładki Built-in/My Blocks/Advanced zawierają pogrupowane zestawy procedur i zależności. W pierwszej zakładce, Built-in, znajdziesz funkcje wbudowane w edytor bloków, które są niezależne od komponentów użytych w projekcie. Druga zakładka, My Blocks, dotyczy pojedynczych elementów, które znalazły się w interfejsie tworzonej aplikacji. Z trzeciej, Advanced, skorzystasz, gdy chcesz jednocześnie zaprogramować grupę elementów z otwartego projektu. W tym momencie potrzebujesz jednak tylko bloków bezpośrednio związanych z użytymi wcześniej komponentami.

Ze spisu elementów znajdujących się w zakładce My Blocks wybierz opcję pierwszego przycisku Button 1. Następnie przyjrzyj się rozwiniętej liście bloków zawierającej wszelkie akcje związane z tym przyciskiem. Jeśli chcesz, aby jego naciśnięcie wywołało określone działanie aplikacji, pierwszym kawałkiem twojej układanki musi być Button 1.Click. Przeciągnij ten element w dowolne miejsce pola roboczego.

Pamiętając, że pierwszy przycisk miał prowadzić do zdjęcia, przejdź teraz do opcji Image1, odszukaj w niej element Image 1.Visible oraz umieść go wewnątrz wstawionego wcześniej klocka Button 1.Click. Zwróć uwagę, że oba bloki ściśle do siebie pasują.

Wygląd ostatnio dodanego klocka sugeruje potrzebę dostarczenia jeszcze jednej informacji. W tym przypadku będzie to warunek określający wyświetlanie się zdjęcia. Może on przybrać tylko jedną z dwóch wartości – prawdę lub fałsz, w zależności od oczekiwanego efektu. Aby naciśnięcie przycisku powodowało pojawienie się zdjęcia na ekranie, otwórz zakładkę Built-In i z komponentów funkcji logicznych Logic wybierz element true. W projekcie znajdują się jednak dwa zdjęcia i jeśli pozostawisz tę regułę w takiej formie, kliknięcie drugiego przycisku może spowodować nałożenie się obu zdjęć na siebie. Jeśli nie chcesz dopuścić do takiej sytuacji, dodaj do klocka przycisku formułę dotyczącą drugiego zdjęcia. Aby to zrobić, powtórz krok 4, ale tym razem wybierz opcję Image2 i odszukaj w niej element Image 2.Visible. Powtarzając krok 5, uzupełnij formułę o warunek false. Procedurę tę powtórz dla drugiego przycisku, pamiętając jednak o odwrotnym ułożeniu warunków True/False.

Do uzupełnienia pozostały jeszcze dwa przyciski uruchamiające pliki dźwiękowe. Tym razem wystarczy, że w umieszczone w polu roboczym bloki pozostałych przycisków wstawisz elementy wywołujące odtwarzanie pierwszego oraz drugiego dźwięku. W opcjach przycisku Button3 wybierz Button 3.Click. Następnie w opcjach Sound1 wybierz Sound 1.Play. Powtórz te czynności dla przycisku Button4, tym razem wybierając z opcji Sound 2.Play. Schemat blokowy gotowej struktury logicznej naszego programu przedstawia screen na górze.

Dopracowaną wersję aplikacji możesz w każdej chwili wgrać na swój telefon. Co istotne, App Inventor automatycznie skompiluje twój projekt do pliku z rozszerzeniem .apk, gdy tylko wybierzesz jedną z dostępnych opcji zapisu ukrytych pod przyciskiem Package for Phone. Oto zestawienie możliwości:
Show Barcode – zapisanie aplikacji w chmurze App Inventora i wygenerowanie kodu QR, którego odczytanie umożliwi ci pobranie aplikacji na telefon.
Download to this Computer – pobranie pliku instalacyjnego na komputer.
Download to Connected Phone – wysłanie instalatora bezpośrednio do podłączonego kablem telefonu.

Na tym etapie prac warto sprawdzić, czy i jak działają zbudowane właśnie algorytmy. Możesz wykorzystać do tego swój telefon, po podłączeniu go do komputera, albo uruchomić emulator, w jaki wyposażono edytor bloków. Obie metody pozwolą nie tylko przetestować gotową aplikację, ale także śledzić na bieżąco wszelkie dokonywane w niej zmiany.

Aby skorzystać z emulatora, kliknij przycisk New emulator w edytorze bloków. Na ekranie pojawią się wówczas dwa nowe okna. Pierwsze poinformuje cię o starcie emulatora i podstawowych zasadach jego obsługi. Drugie, będące stylizowaną na smartfon wirtualną konsolą, umożliwi obejrzenie twojej aplikacji, pod warunkiem, że wcześniej połączysz App Inventora z emulatorem. Na to jednak trzeba nieco poczekać, bo emulowany system startuje i działa bardzo wolno.

Gdy na ekraniku wirtualnego smartfonu pojawi się w końcu ekran blokady, przeciągnij myszką jej pasek i upewniwszy się, że emulowany system niczego już nie doładowuje, wróć do okna edytora bloków, naciśnij przycisk Connect to Device i z rozwiniętego menu wybierz opcję emulator-5554. Spowoduje to próbę nawiązania połączenia między konsolą a programem, o czym będzie informowała migająca na żółto ikona z żółtym telefonem. Zmiana koloru na zielony oznacza pomyślne zestawienie ze sobą obu platform. W tym samym momencie na ekranie wirtualnego telefonu pojawi się interfejs twojej aplikacji. Oznacza to, że możesz już zacząć testy.

Znacznie szybszym oraz wygodniejszym sposobem jest połączenie smartfonu z App Inventorem. Potrzebujesz do tego kabla USB. Gdy tylko podpięty do komputera telefon zostanie poprawnie rozpoznany, stosowna opcja pojawi się w menu. Chwilę po jej aktywowaniu uzyskasz dostęp do aplikacji bezpośrednio z ekranu twojego smartfonu.

Mimo wyjątkowej otwartości Google na nowych twórców i łatwiejszego dostępu do oficjalnego repozytorium aplikacji udostępnienie w nim swojego, gotowego już programu nie jest proste. Aby móc publikować swoje dzieła w Google Play, każdy nowy twórca musi zarejestrować się jako programista. Do założenia konta w Konsoli programisty (połączenia go z posiadanym kontem Google) wymagane jest wniesienie jednorazowej opłaty w wysokości 25 USD. Dodatkowo, jeśli chcesz sprzedawać swoje aplikacje, konieczne jest także utworzenie konta sprzedawcy w usłudze Google Checkout. Po dopełnieniu wszelkich formalności teoretycznie możesz już zamieścić stworzone przez siebie programy w Google Play. W praktyce jednak muszą one zostać wcześniej zweryfikowane przez automatyczny system Google Bouncer skanujący dodane aplikacje pod kątem możliwych nieprawidłowości i złośliwego kodu. W celu uniknięcia późniejszych problemów z opublikowanymi już w sklepie programami pamiętaj również o dokładnym zapoznaniu się z warunkami zawartymi w umowie dystrybucyjnej dla programistów oraz regulaminem usługi Google Play. Określone tam zasady są bardzo rygorystycznie przestrzegane i jakakolwiek próba ich złamania bądź ominięcia (np. przez większą inwazyjność reklam czy mylące opisy) może zakończyć się usunięciem twojej aplikacji z oficjalnego sklepu Google.