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! :)

 

 

AKTUALIZACJA: Znalazłem ostatnio w internecie poprawioną wersję App Inventora. Nie wymaga ona już instalowania osobno Block Editora. Wszystko można zrobić z poziomu przeglądarki i bez Javy. Aplikacje tworzy się identycznie jak w poniższym poradniku, więc nie powinno być żadnych problemów. Link do nowej wersji TUTAJ :)

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.7 out of 5 based on 70 ratings

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

GD Star Rating
loading...

  • mika9521

    Tylko, że tam gdzie dodałeś link do swojego DS212J to dałeś link do DS112J. Albo zły link albo błąd w artykule. Ale reszta jest super. I takie prace rozumiem 5/5. :)

    • http://www.krupson.eu/ Krupson

      Faktycznie wkradł się błąd. Na stronie Synology nie ma już w ofercie tego dysku, więc usunąłem link i dodałem notkę, że może być podobny. Dzięki :)

      • mika9521
        • Radek

          Witam Szukam fachowca do napisania aplikacji i później jej obsługiwania. Stała współpraca na lata. Zapraszam do przesyłania swoich CV na adres entrancer(attt)o2.pl

  • http://itcenter4you.com Init0

    Jako, że programuje sobie od czasu do czasu właśnie w Javie to widząc te bajery to mnie to troche przeraża bo kompletnie tego nie kapuje dla mnie prościej jest chyba jednak napisać sobie tą aplikacje w Eclipse + Android SDK

    • http://www.informatyk.bielsko.pl Darek

      Dla kogoś kto programuje, to te klocki mogą przerazić, ale ja osobiście dopiero przymierzam się do javy a na codzień jestem programisją PHP i JS i bardzo mi się spodobała forma “kodowania” w formie puzzli, wielki szacun dla autorów tego edytora :) A co do samego poradnika, to bardzo mi się podoba (miałem delikatny problem z odnalezieniem kilku puzzli, ale dzięki temu zapoznałem się ze wszystkimi komponentami) portal majsterkowo.pl też niedawno “odkryłem” i cieszę się że są tacy ludzie jak Wy :D Będę tu częstym bywalcem. Jako webmaster dodam tylko, że layout strony jest na 5+ :)

  • http://sebcza.pl Sebastian

    Bardzo fajna sprawa, można by się przyczepić trochę do jakości kodu i sposobu “programowania” ale fajny pomysł i fajne wykonanie. Chyba zaraz sobie zmajstruj coś identycznego na Windows Phone i moje Raspberry PI

    • https://plus.google.com/u/0/105020798016042431621?rel=author Łukasz Więcek

      Kurs programowania na Windows Phone też by był fajnym tematem :)

      • http://www.krupson.eu/ Krupson

        Java niestety nie jest moją mocną stroną, dopiero planuję się za nią wziąć, więc narazie radzę sobie właśnie z takim narzędziem jakim jest MIT App Inventor. Do celów, które opisałem w poradniku myślę, że jest w 100% wystarczający. A słabą jakość kodu php mogę wytłumaczyć chyba tylko tym, że był pisany o 4 rano :D

        • https://plus.google.com/u/0/105020798016042431621?rel=author Łukasz Więcek

          Przy tak prostych aplikacjach jakość kodu (patrząc pod kątem wydajności) nie ma kompletnie żadnego znaczenia. Działa? Działa! A że mogłoby działać o 0,00031sec szybciej? Pff ;)

        • http://www.krupson.eu/ Krupson

          Wiadomo. Choć jak tak teraz myślę, to nie ukrywam, że wykorzystując do pośrednictwa między aplikacją a Arduino serwer z php można to całkiem fajnie rozbudować dodając np. obsługę wyrażeń regularnych lub pozwalać na pewne czynności tylko w określonych warunkach (np. włączenie światła w pokoju tylko między godziną X a godziną Y). Jak będę kiedyś pisał artykuł o webowym i mobilnym panelu zarządzania domem to na pewno uwzględnię takie bajery :P

      • http://sebcza.pl Sebastian

        Fajny temat :) nie mniej jednak jest już coś takiego zrobione bardzo dobrze przez Microsoft http://channel9.msdn.com/Series/Kurs-programowania-Windows-Phone-7

        Czy warto robić kopie ?

        • https://plus.google.com/u/0/105020798016042431621?rel=author Łukasz Więcek

          Kopie zawsze warto robić. Do nauki każdego języka programowania masz dostępnych po kilka książek. Każda jest napisana nieco innym językiem i z innym podejściem, więc każdy może znaleźć coś dla siebie :)

    • http://www.informatyk.bielsko.pl Darek

      zademonstruj swoją wersję… Moim zdaniem jest czytelnie i działa, a Ty po prostu się czepiasz

  • http://sebcza.pl Sebastian

    No to spróbuje coś wycudować;)

  • Marcin

    Spoko sprawa, chociaż wole chyba sam napisać kod :) Niemniej jednak takie rozwiązanie czy appser.pl są fajnym sposobem na utworzenie aplikacji dla osób które nie lubią pisać kodu :P

  • rav

    Cześć!
    Chcę zrobić przycisk włączający BlueTooth.
    Jednak nie mogę dopasować puzzla z opcji bluetooth do przycisku, który to powinien być?

    Domyślnie chcę zrobić aplikację, która będzie pomocna w aucie – po włączeniu uruchomi BT, GPS i odpali konkretny program.

    • http://www.krupson.eu/ Krupson

      Patrzyłem tam to z tego co widzę, to bluetooth musisz mieć już włączony, żeby go używać w aplikacji zrobionej w App Inventorze. Jak chcesz włączyć bluetooth i gps i masz przy tym roota to możesz to zrobić tworząc odpowiedni skrypt shella. Lub zrobić taką aplikację w Javie.

      • rav

        Dzięki za odpowiedź.
        W takim razie poczekam aż może kiedyś wstawią więcej puzzli ;-)
        bo, na razie, shelle i javy się przeze mnie nieogarnięte ;-)

    • Dejv

      Może masz NFC w telefonie ? wtedy smartTagi idą z pomocą ;)

  • mariusz

    witam serdecznie poszukuje majstra;-)który był by zainteresowany napisaniem apki na androidzie za kasę. baca196@onet.pl

  • http://pawelpotoniec.pl Pawel

    w php.ini moze byc funkcja file_get_contents wylaczona (allow_url_fopen = false)

    Zdecydowanie lepszym rozwiazaniem bedzie zastosowanie tutaj CURL http://php.net/manual/en/book.curl.php

    • http://www.krupson.eu/ Krupson

      W sumie racja. Dodatkowo daje to możliwość sprawdzenia kodu HTTP z odpowiedzi. Ten kod pisałem w sumie na szybkiego, więc zastosowałem funkcję file_get_contents(), żeby się nie paprać z cURLem. W wolnej chwili zedytuję i wstawię drugi przykład bardziej zaawansowany :)

  • maciek

    Już od paru lat znam to narzędzie, ale nie mam żadnego fajnego pomysłu na appkę. Może ktoś coś zaproponuje?

    • Piotr

      Może z moją pomożesz? szczegóły niżej.

      Pozdro

    • Dryllo

      odezwij się do mnie -mam pomysły i szukam człowieka z umiejętnościami entrancer()o2.pl

    • Piotr

      jesteś z poznania? szukam dwóch osób i chce stworzyc grupke ludzi któzy chca stworzyc fajną aplikację. Ja mam kilka pomysłów które nie są wyssane z palca, przespałem się z nimi i nie któe odrzuciłem a te najlepsze zostały. Ja programowałem za gówniarza w podstawówce i gimnazjum jeden rok ale przez sport i ine rzeczy to porzuciłem. Dla mnie teraz programowanie jest czarną magią. Ja ze swojej strony mogę załatwić biuro i darmowa kawę,codzinnie bez limitu ;) można się dogadać co do małego wynagrodzenia ale ja jestem za spisaniem umowy i wtedy kazdy dostaje swoje udziały w firmie ktróra stworzymy. Ja jeszcze od siebie mogę dac kontakty z inwestorami jeśli sam masz jakies pomysły. Więc podsumowując, tworzymy grupę,zdobywasz znajomości,ulepszasz swoje programowanie,tworzysz coś co może przynieść nieznane nam pozytywne konsekwencje. Co tracisz? jedynie to czas jeśli coś nie wyszło(aplikacja by sie nie sprzedawała) ale na to mam kolejna propozycję- szczegółowa dokumentację gry mobilnej i pukanie do drzwi inwestorów , wtedy jest większa szansa sukces.

  • Piotr

    Cześć
    Trudno mi to opanować i szukam pomocy. Potrzebuję zrobić bardzo prostą app na androida. Ma liczyć coś takiego:

    Zmierzone napięcie: 19.3V. Do tego trzeba dodać XX (w tym wypadku 0.7V) spadku napięcia na diodzie i tą wartość podzielić przez pierwiastek kwadratowy z dwóch:
    20/1.414 = 14.14 Vrms

    Otrzymane napięcie RMS należy podnieśc do kwadratu i podzielić przez oporność sztucznego obciążenia czyli 50ohm.
    14.14^2/50 = 3.998W

    Reasumując w aplikacji ma być miejsce na wpisane V, spadku napięcia i podać wynik z obliczenia.

    Podejmie się ktoś? Jeśli tak to proszę o kontakt.

    • http://www.krupson.eu/ Krupson

      Napisz na kontakt@krupson.eu coś pomyślimy na ten temat :)

  • Tomasz

    Witam

    Metoda jest dość ciekawa. Zrobiłem wizualnie programik, ale od strony technicznej (block editor) nawet nie wiem za co się zabrać. Jest ktoś, kto mógłby mi wytłumaczyć bardziej szczegółowo ten etap ?

  • http://www.dirtydot.pl DirtyD

    Piotr, jeśli nadal szukasz to zajrzyj do nas na stronę, coś wymyślimy. A co do aplikacji- bardzo przydatne narzędzie.

  • http://increasesoundcloudplays.blogspot.ro/2013/10/getting-more-soundcloud-followers-for.html beats

    Hi my friend, I am a music producer your article was impressive, it really heleped me. I hope my soundcloud track will be better after reading this.Cheers!!

  • Majkiel

    Witam, fajny program lecz mam pytanie, niech mi ktoś wytłumaczy czy tym programem ułożę tabele odpowiednio podzielone różnymi wielkościami by wpisywać potem dane itp ?
    Może ktoś podpowie, pomoże

    • Kamil Krupa

      W projektowaniu wyglądu masz tam różne układy (np. poziomy i pionowy). Odpowiednio je dobierając można zrobić układ jaki się chce mniej więcej.

  • Majkiel

    dodatkowo przycisk adresu mail by wysłać

  • Kwiatek

    U mnie na 2 tabletach z różnymi wer. androida występuje ten sam problem, a mianowicie bardzo duże czcionki jak i inne elementy graficzne, do tego stopnia, że widać piksele. Ktoś wie jak to rozwiązać??

  • Michał J.

    Witam. U mnie występuję:
    Error 1101: Unable to get a response with the specified URL:mojeip/do?k=mojakomenda
    Co mam zrobić , co się dzieje?
    Używam Androida 4.0.3 na tablecie Tracer OVO Lite GT,a Windows 8 32bit z XAMPP’em na moim lapku.

  • Dibo

    Witam czy jest możliwość stworzenia w tym narzędziu aplikację korzystającą z map googla ??

  • Michał

    Witam, czy podejmie się ktoś napisania prostego programu na androida – system zamówień konsultanta. Program ma być prosty połączony z baza danych.Pisać na mail: michalx007(at)gmail.com

  • Darek

    Witam,bawie sie z tym juz kope czasu i moge stworzyc dowolna aplikacje w rozsądnej cenie.

  • onaMonika

    Nie mam zielonego pojęcia o sprawach związanych z programowaniem itd. Potrzebuję stworzyć aplikację: do wrzucania zrobionych zdjęć i w drugim etapie zaznaczania tego zdjęcia na jakiejś mapce np. wybranego, konkretnego regionu-miasta. Orientujecie się, ile czasu powinnam poświęcić żeby ogarnąć podstawy tworzenia appek a następnie wykonania w/w zadania. Proszę o jakąkolwiek opinię i pomoc.

  • waldi

    Witam jesli chciał by ktoś zarobić dobre pieniądze za napisanie dla mnie apli to proszę o kontakt 881-252-422

  • sp9auv

    Witam !

    Mam pytanie – czy w tym http://beta.appinventor.mit.edu/

    jest component typu ping .
    Do czego jest on mi potrzebny ?
    Mam na moim smartfonie Goclever Quantum 4 z Androidem do dyspozycji dwa
    SIM-y , z czego jeden jest przeznaczony dla sieci darmowej AERO2 .
    Poza tym mam zalozone bardzo tanie konto telefoniczne na Net4Call (okolo 4 gr/min).
    Działa mi wiec telefonia komórkowa mobilna w bardzo niskich cenach .
    I niech się pocalują w nos wszyscy usługodawcy komorkowi.
    Jedyna przeszkodą są kody Captcha , które trzeba podawać na AERO2 .
    I tutaj chciałbym stworzyc własną aplikację , która pingowała by do wyznaczonych
    adresów IP i w przypadku braku połączenia przez jakiś czas informowała mnie głosem
    lub jakimś sygnałem o braku polaczenia . Są co prawda na Androida są aplikacje które
    “pikają” głosem jak jest połaczenie , ale mnie chodzi o coś odwotnego .
    Dopiero jak nie ma połączenia ma informować mnie o tym , a ja wprowdzam kod Captcha . I wtedy mam bardzo tanio połączenia wychodzące jak i przychodzące .
    Co prawda mam wykupione w Play konto , ale typu “Wazność konta przez rok po każdym doladowaniu “. Tutaj jest ono przeznaczone tylko dla połączeń przychodzących ,a więc ja nic nie płacę .

  • Wojtek

    Potrzebuje kogos do stworzenia Aplikacji taksowkowej z wykorzystaniem API, dobre pienadze , prosze o kontakt zuchowskiw(att)yahoo.com

  • Pingback: Sterowanie bramą przez internet. » Majsterkowo.pl