Tworzenie własnej aplikacji na androida

Witam Was drodzy majsterkowicze! Ostatnio błądząc po czeluściach internetu natrafiłem na bardzo ciekawą aplikację, a mianowicie MIT App Inventor for Android. Jest to prosty edytor podzielony na 2 części (projektowanie wyglądu i algorytmów). Zainspirowany wpisem Jakuba (http://majsterkowo.pl/lampka-zapalana-przez-internet/) postanowiłem rozbudować trochę aplikację na Androida do kontrolowania Arduino.

W tym wpisie opiszę co, gdzie i jak zrobić w App Inventorze, a także pokażę przykładowy program komunikujący się z serwerem domowym, który przesłane dane będzie przetwarzał. Tak więc do dzieła! :)

MIT App Inventor for Android. Z czym to się je?

1. Projektowanie wizualne.

Aby rozpocząć naszą przygodę z tworzeniem programów na Androida musimy mieć zainstalowaną Javę. Można ją pobrać tutaj: http://java.com/en/download/index.jsp.

Java ma to do siebie, że jest dość dziurawa, więc polecam regularne jej aktualizowanie. Szczególnie, jeżeli będziemy jej używali poza zaufanymi stronami (a i na takich może nas czekać przykra niespodzianka, jeśli ktoś wstrzyknie tam złośliwy kod).

Kiedy już mamy zainstalowaną javę wchodzimy na tę stronę: http://beta.appinventor.mit.edu

Aplikacja poprosi nas o autoryzację na naszym koncie Google. Opcjonalnie możemy zapamiętać pozwolenie na 30 dni. Kiedy już pomyślnie się zalogujemy, wciskamy przycisk New, wpisujemy nazwę naszej aplikacji i klikamy OK. Naszym oczom ukaże się coś takiego:

Projaktowanie wizualne w MIT App Inventorze

Opis interfejsu:

  1. Pasek z przyciskami Zapisz, Zapisz jako, Punkt kontrolny, Dodaj ekran, Usuń ekran, Otwórz edytor bloków (o tym później) i Paczka dla telefonu.
  2. Przybornik. Tutaj możemy wybrać sobie jakich elementów chcemy użyć w projekcie, a następnie przeciągnąć je na ekran podglądu. Jest on podzielony na kilka grup elementów (podstawowe, media, animacje, społecznościowe, czujniki, rozkład na ekranie, LEGO MINDSTORMS, inne).
  3. Ekran podglądu naszej aplikacji.
  4. Drzewo używanych przez nas elementów. Możemy zmienić ich nazwę (identyfikator) lub usunąć przyciskami na dole.
  5. Media. Tutaj możemy zarządzać treściami multimedialnymi w naszej aplikacji (uploadowanie obrazków, muzyki, filmów).
  6. Ekran właściwości. Możemy tutaj dostosować wygląd wybranych elementów.

Przykładowy projekt – podgląd:

W moim projekcie wykorzystałem pola tekstowe, etykiety, przyciski, rozpoznawanie mowy oraz element Web. Prezentuje się on następująco:

2. Czas na trochę logiki, czyli algorytmy.

Aby nasz program nie tylko wyglądał, ale też działał należy go oskryptować. W tym celu klikamy na przycisk Open the Block Editor, który wyśle nam do pobrania plik (tu właśnie do akcji wkracza Java). Otwieramy go. Przy pierwszym uruchomieniu edytora bloków program spyta nas o ścieżkę do command directory. Należy więc ściągnąć instalator programu dla naszego systemu stąd: http://beta.appinventor.mit.edu/learn/setup/. Przy instalacji kopiujemy ścieżkę, do której program się instaluje i po jej zakończeniu wklejamy ją do okienka block editora. Jeśli wszystko pójdzie zgodnie z planem to ujrzymy takie oto okno:

majsterkowo3

Samo budowanie algorytmów w tym programie jest bajecznie proste. Po lewej stornie mamy okienko z funkcjami podzielonymi na 3 zakładki. Pierwsza z nich to funkcje wbudowane, niezależne od elementów użytych w projekcie. Zaliczają się do nich np. funkcje matematyczne, logiczne itp. Kolejna zakładka zawiera funkcje związane z elementami użytymi w projekcie. Ich nazwy odpowiadają identyfikatorom w edytorze wizualnym. Ostatnia zakładka jest podobna do drugiej, lecz z tą różnicą, że dotyczą grup elementów użytych w projekcie. Algorytmy budujemy przeciągając wybrane funkcje na obszar projektowania po prawo. Jest to dość ciekawie rozwiązane, gdyż funkcje mają postać puzzli, więc możemy łączyć ze sobą tylko pasujące do siebie końcówki.

Przykładowy projekt – algorytm:

Teraz krótko omówię przedstawiony algorytm. Pierwszy blok od góry to akcja, która zostanie wywołana po wciśnięciu przycisku wyslij_tekst. Ustawia ona URL elementu Web na string “http://” + wartość z pola adres + “/do.php?k=” + sformatowana do potrzeb adresu URL wartość pola komenda. Kolejny blok odpowiada za wywołanie okna rozpoznającego mowę po kliknięciu przycisku wyslij_mowa. Trzeci blok jest podobny do pierwszego, z tą różnicą, że przekazuje do elementu Web wartość odczytaną przez rozpoznawanie mowy z parametrem m zamiast k. Ostatni blok jest wykonywany, kiedy program otrzyma odpowiedź od serwera WWW, do którego wysłał żądanie. Jeśli serwer zwróci kod HTTP 200, wtedy na tekst o id odpowiedz zostanie ustawiona treść HTML strony, która została załadowana. W przeciwnym wypadku będzie to tekst: “Połączenie z serwerem nie powiodło się. (Error ” + kod błędu + “)”.

3. Test aplikacji w telefonie/tablecie lub emulatorze.

Naszą aplikację możemy przetestować wrzucając ją na telefon lub emulator. Poniżej przedstawię 3 sposoby na uruchomienie naszego programu:

Sposób 1: Emulator

Najprostszym rozwiązaniem jest uruchomić emulator klikając na przycisk New emulator w edytorze bloków. Wadą tego rozwiązania jest to, że emulowany system jest dość powolny i oczywiście nie możemy go “smyrnąć palcem”.

Sposób 2: WiFi

Aby przesłać program na nasz telefon/tablet przez WiFi musimy mieć zainstalowaną aplikację MIT AICompanion. Jeśli mamy ją już na naszym urządzeniu wystarczy kliknąć Connect to device, a następnie wybrać opcję WiFi.

Sposób 3: Kabelek

Ostatnim i chyba najwygodniejszym sposobem jest wysłanie aplikacji na telefon/tablet przez kabel USB. W tym celu poza aplikacją ze sposobu 2 potrzebować będziemy w komputerze zainstalowanego sterownika od naszego urządzenia. Jeśli wszystko mamy możemy śmiało kliknąć Connect to device, a następnie wybrać z listy nasz telefon i poczekać chwilę.

Należy pamiętać, że  aby skompilować naszą aplikację do androidowej instalki (*.apk) trzeba wcisnąć przycisk Package for Phone w edytorze wizualnym.

4. Efekt końcowy:

Efekt końcowy naszej pracy nad aplikacją wygląda następująco:

Screenshot_2013-08-11-02-42-03

Pisanie aplikacji w PHP, która będzie interpretowała nasze komendy.

Kod aplikacji PHP powinien wyglądać mniej więcej tak:

 

UWAGA! Jeśli masz zamiar otworzyć port 80 (lub inny, na którym pracuje twój serwer www) musisz zmodyfikować powyższy skrypt zabezpieczając go w odpowiedni sposób. Przyjmuje on wartości bez większej analizy i jest podatny na ataki.

Krótka analiza kodu:

W 2 linijce podajemy adres IP naszego Arduino. Następnie zostają definiowane zmienne takie jak $mowa, $kom, $odp i $kod, które są później wykorzystywane w algorytmie skryptu. Od linijki 10 zaczynają się instrukcje warunkowe, które modyfikujemy wg. własnych potrzeb. W zmiennej $kod przetrzymywany jest kod dla Arduino. Przykładowo jeśli $kod == 1 to do Arduino zostanie wysłane żądanie http://adres_arduino/1. Jak poradzić z takim czymś od strony Arduino świetnie opisał Jakub tutaj: http://majsterkowo.pl/lampka-zapalana-przez-internet/. Użycie liczb (wg. mnie)  jest w tym przypadku dobrym rozwiązaniem, gdyż mamy ich nieskończenie wiele, a dobrze skomentowany kod będzie i tak czytelny. Następnie algorytm sprawdza, czy komenda została rozpoznana i jeśli tak się stało to wysyła żądanie do Arduino, a w odpowiedzi wypisuje to co zwróciło Arduino.

Efekt:

Gdzie można postawić powyższy skrypt?

Na dowolnym komputerze z zainstalowanym np. XAMPP. Jeśli żądania mają być przetwarzane o każdej porze dnia i nocy to najlepiej, żeby był to jakiś mały domowy serwer lub tak jak np. w moim przypadku dysk sieciowy Synology DS212j (lub podobny) (posiada on wbudowany serwer www i bazę MySQL).

 

I to by było na tyle :)

W przyszłości postaram się wrzucić poradnik jak zrobić panel zarządzania domem z kontrolą dostępu poprzez aplikację webową.

PS. Jest to mój pierwszy poradnik, więc proszę Was o konstruktywną krytykę w komentarzach. Chciałbym wiedzieć, nad czym muszę jeszcze popracować przed kolejnymi publikacjami, a co idzie mi dobrze :)

Tworzenie własnej aplikacji na androida, 4.6 out of 5 based on 66 ratings

Oceń post Kategoria: Dom, Elektronika, Gadżety, Tagi: , , , , , ,

GD Star Rating
loading...