Opisz swój projekt na forum i odbierz 50 zł rabatu w sklepie Botland. Sprawdź szczegóły »

Tworzenie aplikacji Android – #2 – Komunikacja

Tworzenie aplikacji Android – #2 – Komunikacja

Teraz zajmiemy się uruchomieniem środowiska i połączeniem go z naszym smarfonem/tabletem. Wszystkie próby przeprowadzone zostaną na smartfonie - HTC Desire.

Do pracy wymagana jest praktycznie dowolna przeglądarka www oraz Java, którą możemy pobrać  bezpośrednio ze strony producenta.

« Poprzedni artykuł z seriiNastępny artykuł z serii »

Wersja samej Javy raczej nie wpływa na pracę App inventora. Instalacja przebiega standardowo i nie powinna przetworzyć problemów.

Potrzebujemy App-inventora na naszym komputerze. Znajdziemy go na stronie MIT. Dostępne są instalatory zarówno dla systemu Windows, Mac oraz gotowy pakiet .deb dla Linuksów pochodzenia Debiana. Z tego co widzę, źródła w postaci archiwum .tar.gz również są dostępne, więc nie powinno byś problemów z uruchomieniem aplikacji na innych dystrybucjach.

Wróćmy jednak do instalacji na systemie Windows. Proces jest standardowy i zajmuje dosłownie kilka sekund. W zainstalowanym programie znajdziemy m. in. Emulator i sterowniki.

android_002_001

Standardowy instalator AppInventora

Mogą być wymagane również sterowniki debugowania naszego telefonu/tabletu. Dla mojego smartfona instalują się wraz z oprogramowaniem HTC Sync, które było dołączone wraz z telefonem do synchronizacji danych przez USB.

Jeśli nie możesz połączyć się z urządzeniem lub nie zamierzasz korzystać z szybszego i bardziej stabilnego połączenia kablowego pomiń ten etap i przejdź do debugowania bezprzewodowego.

Jeśli programy zainstalowały się poprawianie, to mamy już wszystko co potrzebne, aby uruchomić i połączyć nasze środowisko z Androidem!

Uruchomienie App Inventora

Przechodzimy więc na stronę http://appinventor.mit.edu/, a następnie wybieramy invent. Ukarzą się nam poniższe ekrany.

Jak już wcześniej wspominałem do korzystania z App Inventora wymagane jest posiadanie konta Google. Jeśli byliśmy już globalnie zalogowani od razu powinno ukazać się oświadczenie o korzystaniu z Twojego konta Google na które musimy wyrazić zgodę.

Przyznanie uprawnień.

Przyznanie uprawnień.

Po zalogowaniu powinniśmy zostać przeniesieni do menu swoich projektów:

Lista projektów.

Lista projektów.

Już od pewnego czasu bawię się App Inventorem i dlatego mam kilka starszych projektów. Z tego menu możemy tworzyć nowe i usuwać zbędne projekty.

Możemy też pobierać projekt dzięki czemu możliwe będzie udostępnienie źródła innej osobie. W tym celu zaznaczamy program i z rozwijanego menu More Actions wybieramy Download Source.

Upload Source przyda nam się, jeśli będziemy chcieli otworzyć projekt z dysku. Jak jednak mówiłem w poprzedniej części nie jest to konieczne. Nasze projekty będą na serwerze dopóki sami ich nie skasujemy lub App Inventor nie zniknie z sieci.

Przyciskiem New znajdującym się w lewym górnym rogu tworzymy nowy projekt. Nadajmy mu nazwę „Testowy” i zatwierdzamy przyciskiem OK.

Tworzenie nowego projektu.

Tworzenie nowego projektu.

Do listy powinien się dodać nowy projekt po czym automatycznie otworzyć. Naszym oczom ukazuje się coś. Nazwijmy go edytorem komponentów lub ekranów. Mamy tu wyświetlacz naszego telefonu, zbiór komponentów oraz kilka innych niezbędnych funkcji.

Edytor ekranów.

Edytor ekranów.

Zakładałem, że będzie to część, która pokaże tylko instalację i podłączenie naszego urządzenia. Myślę jednak, że bez opisania kontrolek nie powinniśmy zabierać się do dalszej pracy.

Opis edytora ekranów

Na górnym menu (niebieska ramka) mamy takie opcje jak zapisz, zapisz jako, tworzenie checkpointa (zapisuje dotychczasową pracę jako nowy projekt umożliwiając powrót do aktualnego stanu w dowolnym momencie pracy w przyszłości). Znajdziemy tam również opcję dodaj i usuń ekrany – używane, gdy aplikacja będzie posiadała więcej niż jeden statyczny (ewentualnie przewijany) ekran – choć i na to są inne sposoby.

Edytor ekranów - menu.

Edytor ekranów - menu.

Na tym samym pasku po prawej stronie znajdziemy przycisk Open the Blocks Editor jak sama nazwa mówi - otwiera edytor blokowy, w którym tworzymy algorytm. Jest to bardzo ważny przycisk, do którego wrócimy w dalszej części.

Polecenie Package for Phone umożliwi nam zainstalowanie aplikacji w telefonie na stałe, lub udostępnienie pakietu aplikacji w formie pliku instalacyjnego .apk. Klikając My Projects (zielona strzałka na powyższym zrzucie ekranu) wracamy do listy naszych projektów.

Przy okazji chciałbym przestrzec przed używaniem Sign out. W prawym górnym rogu. Możliwe, że to ja mam tylko takie problemy. Jednak bywa, że po wylogowaniu nie jestem w stanie zalogować się ponownie!

Komponenty i edytor

Tutaj znajdziemy najważniejszy ze względów logistyczno-estetycznych fragment App Inventora. W środkowej części ekranu określonej jako Viewer (niebieska ramka) znajduję się ekran telefonu, tu wstawiamy i organizujemy komponenty.

android_002_009

Edytor ekranów - komponenty.

Komponenty wstawiamy z listy nazwanej Palette (pomarańczowa ramka) są one pogrupowane tematyczne. Poszczególnymi z nich zajmiemy się w następnych częściach kursu. Lista użytych komponentów na danym ekranie widoczna jest w części Components (czerwona ramka). Tutaj możemy je usuwać, zmieniać ich nazwy i mieć podgląd, na których ekranach się znajdują.

W części Properties (zielona ramka) mamy ustawienia danego komponentu, oraz ekranu. Jeśli chcemy użyć własnego, zewnętrznego pliku, np. tła lub dźwięku dodajemy je w Media (szara ramka) po czym nasze pliki będą dostępne do wyboru z listy parametrów w części Properties.

Edytor ekranów nie jest skompilowany. Zaprezentowany układ oraz sposób działania są dość wygodne. Przejdźmy teraz do edytora naszego algorytmu i podłączenia telefonu.

Uruchomienie edytora blokowego

Aby otworzyć blokowy edytor algorytmów, kliknijmy Open the Blocks Editor z prawej strony paska menu. Zostanie wyświetlone okno pobierania plików z naszej przeglądarki. W gruncie rzeczy pobieramy aplikację Java. Zalecam wybranie opcji Otwórz za pomocą, gdyż raz pobrany i uruchomiony plik będzie całkowicie bezużyteczny, a wychodzę z założenia, że temp jest lepszym miejscem na pliki tymczasowe niż folder na download.

Otwieranie aplikacji.

Otwieranie aplikacji.

Podczas otwierania aplikacji ujrzymy na chwilę logo Javy. Może również pojawić się następujący komunikat:

Ostrzeżenie przed uruchomieniem.

Ostrzeżenie przed uruchomieniem.

Oczywiście klikamy Run. Przy pierwszym uruchomieniu może również alarmować zapora firewall. Po chwili powinno ukazać się nam takie coś:

Uruchomiony program.

Uruchomiony program.

Jak już wcześniej mówiłem jest to blokowy edytor naszego programu.

Elementy edytora blokowego

Na górnym pasku menu (czerwona ramka - poniższy rzut ekranu) od lewej kolejno mamy nazwę naszego projektu – ekran, standardowe funkcje typu zapisz/cofnij/wróć, przycisk uruchamiający emulator, listę, dzięki której możemy połączyć się z telefonem w trybie debugowania, oraz zoom.

Edytor schematu blokowego.

Edytor schematu blokowego.

Z lewej strony (niebieska ramka) mamy listę bloków do budowy algorytmu. Są pogrupowane w trzy karty. Podstawowe elementy wbudowane, elementy pochodzące od użytych komponentów oraz zaawansowane. W środkowej części (zielona ramka) jest miejsce na nasze puzzle.

Rolką wywołujemy menu kontekstowe dodawania podstawowych bloczków. Prawym klawiszem wywołujemy menu zarządzania oraz sterowania poszczególnymi bloczkami. Lewym przycisk służy do ustawiania bloczków programu. W prawym górnym rogu jest podgląd/miniaturka worspace’a (różowa strzałka) na dole znajdziemy kosz, dzięki któremu możemy usuwać bloczki za pomocą „drag and drop”.

Połączenie z telefonem

Zmęczeni już całą konfiguracją oraz staraniami z zakresu zrozumienia edytorów przechodzimy do momentu kulminacyjnego. Zacznijmy od odpowiedniego skonfigurowania naszego telefonu/tabletu.
Zaznaczam, że w różnych telefonach/romach opcje mogą znajdować się w różnych miejscach. Należy poszukać „opcji programisty” lub czegoś brzmiącego podobnie. Dla mojego systemu jest to:

Ustawienia > Aplikacje > Programowanie

Opcje programisty

Opcje programisty

Do naszych testów konieczne jest włączenie opcji Debugowanie USB. Natomiast bardzo praktyczną funkcją jest również aktywny wyświetlacz. Dzięki czemu po podłączeniu telefonu do zasilania bez ręcznego jego wygaszenie będzie ciągle aktywny. Przy wprowadzaniu zmian na żywo jest to bardzo wygodnym rozwiązaniem.

Wymagane ustawienia telefonu.

Wymagane ustawienia telefonu.

Należy tu zaznaczyć, że przy próbie włączenia każdej z tych funkcji dostaniemy ostrzeżenie o ryzyku. Jakiekolwiek by ono nie było bez zgody, nie przejdziemy do dalszych prób.

Jeśli wszystko mamy już ustawione jak należy, podłączamy telefon przez port USB do komputera. Gdy edytor blokowy nie jest uruchomiony, musimy go włączyć. Na telefonie powinien pojawić się komunikat o pracy w trybie debugowania.

Komunikat o pracy w trybie debugowania.

Komunikat o pracy w trybie debugowania.

Przechodzimy do edytora blokowego z menu wybieramy Connect to Device i jeśli na liście poza „Reset connections” oraz „WiFi” widnieje nazwa nie przypominająca nic, co nam znane to możemy otwierać kolejnego… tymbarka i świętować, bo wszystko działa jak powinno.

Poprawny komunikat.

Poprawny komunikat.

Dodam, że czasami telefon na liście pojawia się dopiero po kilkunastu sekundach (do 1 minuty). Przy pierwszym uruchomieniu związane jest to z zainstalowaniem na nim aplikacji App Inventora (która zajmie kilka MB pamięci wewnętrznej). Umożliwi ona debugowanie na żywo. Wybieramy więc identyfikator naszego urządzenia z listy i czekamy na efekty.

Sukces!

Sukces!

Ale cóż to! Nasz telefon wyświetla biały ekran i poza tytułem oraz belką powiadomień nic nie widać! Tak. Otóż nasz telefon uruchomił nasza aplikację, w której nic niema, więc wygląda dokładnie tak jak w edytorze ekranów.

Działająca aplikacja.

Działająca aplikacja.

Dla testu. Dodajmy przykładowy przycisk na nasz ekran. W tym celu przechodzimy do edytora Ekranów. Z części Palette z kategorii Basic wybieramy Button i przeciągamy go na ekran.

Przykładowy przycisk.

Przykładowy przycisk.

Spójrzmy na ekran naszego telefonu! Mimo iż nic nie dotykaliśmy, mamy ten przycisk na ekranie. W dodatku podświetla się, gdy w niego stukniemy, więc nie jest to wygenerowany obraz. To jest w 100% działająca aplikacja. Działająca zgodnie z tym co zrobiliśmy w App Inventorze.

Wciśnięty przycisk.

Wciśnięty przycisk.

Jako, że w tej części nie mieliśmy jeszcze programować, na tym poprzestaniemy. Nic nie stoi natomiast na przeszkodzie, abyś zobaczył komponenty, pobawił się parametrami Properties i był przygotowany na trzecią część poradnika.

Debugowanie bezprzewodowe

To ostatnie zagadnienie, które chciałbym poruszyć w tej części. W sumie sam się zastanawiałem czy je tu zamieszczać i robić mętlik w głowie osobom, które dopiero zaczynają poznawać elektronikę/programowanie. Dlatego tę część traktuję jako dodatek.

Tak więc jeśli chcemy iść z duchem czasu i bawić się bezprzewodowo. Lub jak pisałem wyżej nie posiadamy odpowiednich sterowników USB możemy skorzystać z debugowania w sieci lokalnej. Jedyne co musimy posiadać to sieć LAN z Wi-fi do której mamy podłączony komputer i telefon. Dodatkowo potrzebujemy aplikacji MIT AlCompanion, która jest dostępna w sklepie play.

Nawiązywanie połączenia bezprzewodowego.

Nawiązywanie połączenia bezprzewodowego.

W edytorze blokowym z menu Connect to device wybieramy WiFi:

Wybór WiFi.

Wybór WiFi.

Ukaże nam się okno z identyfikatorem oraz qr-code:

Identyfikator połączenia.

Identyfikator połączenia.

W aplikacji na telefonie możemy kod przepisać, lub wybrać Scan the QR Code. Do tego wymagana jest dodatkowa aplikacja do skanowania tego typu kodów (np. Barcode Scanner, czy Google Googles). Po kilku sekundach powinniśmy uzyskać biały ekran (+ewentualnie jeden button) na ekranie. Wszystko inne działa tak jak wcześniej.

Aplikacja w telefonie czasami reaguje wolno na zmiany w programie, dodatkowo ryzyko zerwania połączenia jest większe. Myślę jednak, że jest to ciekawa alternatywa dla połączenia kablowego.

Podsumowanie

Mam nadzieję, że artykuł się spodobał, zachęcam, do komentowania, oceniania i konstruktywnej krytyki. W kolejnej (już trzeciej) części kursu planuję opisać konfigurację modułu BTM-222. Zrobić i omówić program łączący się z nim, oraz wysyłać jednostronnie pojedynczy bajt danych po naciśnięciu dotykowego przycisku (może coś w stylu start/stop dla LF’a? - zobaczymy).

« Poprzedni artykuł z seriiNastępny artykuł z serii »

android, app inventor, kursAndroid, MIT, programowanie

Trwa ładowanie komentarzy...