Tworzenie własnej aplikacji na androida

Tworzenie własnej aplikacji na androida

Opublikowano 11 sierpnia 2013 79 66 242

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 (https://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: https://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 :)

Ocena: 4.31/5 (głosów: 101)

Podobne posty

79 komentarzy do “Tworzenie własnej aplikacji na androida”

  • 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

    Odpowiedz

    • 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+ :)

      Odpowiedz

  • 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

    Odpowiedz

  • 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

    Odpowiedz

  • 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.

    Odpowiedz
    • Autor

      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.

      Odpowiedz

      • 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 ;-)

        Odpowiedz
    • Autor

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

      Odpowiedz

    • 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.

      Odpowiedz

  • 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.

    1. 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.

    Odpowiedz

  • 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 ?

    Odpowiedz

  • 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

    Odpowiedz

    • 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.

      Odpowiedz

  • 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ć??

    Odpowiedz

  • 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.

    Odpowiedz

  • 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

    Odpowiedz

  • 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.

    Odpowiedz

  • 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ę .

    Odpowiedz

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

    Odpowiedz

  • นั่นคือเครื่องเคราแห่งเครื่องไม้เครื่องมือขัดถูเว็บเนื้อที่เอ่ยว่าร้ายสำคัญกระทั่งสามัญชนอื่น สมัครhotmail หลังจากการพิเคราะห์ลังพระราชสาส์นของใช้ปริมาตรใหญ่ของสวาปามแห่งน้อยกว่านาที สมัครhotmail บริการมากทั้งสิ้นข้าวของใจความสิ่งกินเพราะว่าการส่งและงานจัดระดับเขาทั้งหลายเพราะ http://itsignin.com/?p=44 งานประมวลผลประเด็นหมายความว่าผู้มีชัยพร้อม ถึงกระนั้นก็ไม่ไกลข้างหลัง สนุกสนานนัก สมัครhotmail รับประทานได้ฟังเพิ่มปริมาณเหตุด้วยยอดรวมแลกเปลี่ยนกว่าที่ทางฉันได้ยินดำเนินม้าพร้อมทั้งคู่หมั้นคู่หมายเครื่องใช้ทาน

    Odpowiedz

  • A da się zrobić program który po uruchomieniu połaczy sie z konkretnym urzadzeniem przez BT wysle komende a gdy to zrobi z sukcesem to wyswietli jakas grafike na 3s po czym się wyłączy? jak tak to jakich komend użyc?

    Odpowiedz

  • Thank you a further fantastic submit Minecraft Faction Servers. The place altogether different may anyone get that form of information and facts in such an ideal way with publishing? I’ve a demonstration next full week, and i am within the look for these kinds of facts.

    Odpowiedz

  • Witam.
    W jaki sposób zapamiętać stan zmiennych lub np. wpisany teks po wyłączeniu aplikacji? Potrzebuję zrobić ustawienia użytkownika.

    Odpowiedz

  • Witam szanownego autora. Wpis bardzo ciekawy. Zastanawiam się tylko po co zaraz tworzyć do takiej rzeczy aplikację na androida i zamykać sobie tym samym dostęp do zarządzania domem za pośrednictwem innych urządzeń. Nie lepiej zrobić to za pomocą samego php? Przecież serwer i tak chodzi w domu. A plus samego php/html/javascript jest taki, że to będzie działać na każdym urządzeniu, na każdej platformie. Apka na androida zamyka pole manewru np. w sytuacji gdy nie mamy dostępu do telefonu, a jest dostęp do innego urządzenia, albo telefonu bez androida…

    Niemniej pomysł bardzo ciekawy.

    Odpowiedz

  • Witam.

    Czy ktoś zrobił ta aplikacje w nowej wersji MIT?
    Zmienił sie wygląd “cegiełek” i nie wszystko wiem, jak połączyć.

    pozdrawiam Grzesiek

    Odpowiedz

  • Witam,

    “Napisałem” aplikację w Appinventor2, która wykorzystuje żyroskop. W dużym skrócie, pod wpływem ruchu telefonu, wysyłany jest sms o ustalonej treści, na wskazany numer. Problem jednak w tym, że wszystko działa, dopóki nie wygasi się ekran – gdy tylko ekran zostaje wygaszony, to aplikacja (mimo, że wciąż uruchomiona), nie wysyła rzeczonych wiadomości. W związku z tym mam pytanie, jak spowodować aby aplikacja działała niezależnie od włączonego/wyłączonego ekranu. Z góry dziękuję serdecznie za pomoc.

    Pozdrawiam

    Odpowiedz

  • Witam. Mam pomysł na aplikację, ale szukam kogoś kto może ją wykonać za jakieś normalne pieniądze albo za jakieś udziały. Dzwoniłem do firmy i mi powiedzieli 50 tysięcy złoty. Jeśli jest tutaj ktoś bardzo ogarnięty w temacie to proszę o kontakt tylko i wyłącznie telefoniczny 501708316. Najlepiej jak ktoś będzie ze Śląska w celu spotkania i omówienia szczegółów. Ewentualnie dalej też mogę dojechać.

    Odpowiedz

  • Ktoś wie, jak napisać logikę do korektora graficznego 9 zakresowego współpracującego z domyślnym odtwarzaczem mp3 Nokii? (Nokia N8)
    Nie widzę w tym programie żadnych funkcji, które odpowiadały by filtrom częstotliwości. Zależy mi na takim programie, bo niestety Nokia nie napisała żadnego korektora 9 zakresowego. Chyba, że ja nie umiem znaleźć to proszę o pomoc.

    Odpowiedz

  • Witam kończę budować prywatny Automat Arcade z dzieciństwa i mam pytanko do ludzi którzy robią aplikacje na androida ale nie koniecznie szukam osoby która potrafiła by stworzyć chyba prostą aplikacje podobną do tej https://www.mobogenie.com/download-mortal-kombat-moves-167661.html z tym żeby można było edytować: dodać ciosy i inne ciosy z gier, listy itd,ta ta aplikacja jest tylko pod MK i jaki miej więcej byłby koszt takiej aplikacji ?
    nyggas20@gmail.com

    Odpowiedz

  • Kto mi zrobi apke ?… strikte muzyczna. Chodzi o to zeby klikajac PADS uruchomil sie plik mp3 klikam ponownie to stop. Kilka funkcji z tym zwiazanych typu tworzenie wlasnych list kilkanascie lub nieograniczona ilosc w zapisywanych plikach. Jesli w pliku mp3 jest grafika zapisana to pad zamienia sie w frafike okladke pliku. Funkcja loop i osobno przycisk STOP All. opcjonalnie bajerem mogla by hyc funkcja FX Nie znalazlem takiej gotowej apki. Prosze pisac na email jesli ktos zainteresowany

    Odpowiedz

Odpowiedz

anuluj

Masz uwagi?