Bluetooth + Android: Pierwsza aplikacja APP Inventor - cz. I

Autor: Dondu

Znasz już co najmniej jeden z modułów Bluetooth, które opisałem w niniejszym cyklu, możemy więc zająć się napisaniem pierwszej aplikacji na system Android.

Poniżej znajdziesz dokładny opis tworzenia aplikacji przesyłającej dane do komputera wyposażonego w:

• port RS-232 
• lub wirtualny port RS-232 uzyskany za pomocą dowolnej wersji konwertera RS-232 na USB, który można zakupić już za kilka złotych (stan na rok 2014).

Będzie nam także potrzebny jakiś moduł Bluetooth - ja wykorzystam tani (około 25zł w 2014r.) moduł HC-05 opisany przeze mnie wcześniej.

Aplikację wykonamy w Application Inventor (MIT App Inventor): appinventor.mit.edu

Ponieważ App Inventor jest szybko rozwijany, stąd interfejs oraz dostępne komponenty ulegają zmianom.

W związku z tym, przedstawione niżej sposoby osiągnięcia wybranych celów programistycznych oraz wygląd komponentów mogą być realizowane inaczej w nowszych wersjach MIT App Inventora.

Jeżeli więc jesteś w takiej sytuacji, to szukaj elementów podobnych do przedstawionych poniżej. 

Instalacja MIT App Inventor-a

Ponieważ przedmiotem tego artykułu nie jest App Inventor jako taki, stąd też nie opisuję dokładnie w jaki sposób należy go zainstalować. Opiszę jedynie jaki jest skutek instalacji.

Po zainstalowaniu App Inventor-a podczas uruchamiania komputera (w Windows XP) otwiera się okienko programu aiStarter:

Program aiStarter musi działać w tle, by można było otworzyć w przeglądarce internetowej okno środowiska programistycznego (IDE) Invertora.

Następnie będąc zalogowanym w przeglądarce wpisujemy adres: ai2.appinventor.mit.edu
Jeśli nie będziesz zalogowany w Google zostaniesz o to poproszony.

W rezultacie otrzymamy ekran początkowy:

Tworzymy nową aplikację

Aby utworzyć nową aplikację należy rozpocząć nowy projekt, co wykonuje się klikając przycisk Star new project, po którym ukazuje się okienko gdzie nadamy mu nazwę  np.Test_Bluetooth_SPP:

a po kliknięciu OK zobaczymy go na wykazie projektów:

Gdy klikniemy nasz projekt na wykazie, po krótkiej chwili ukaże się nam ekran główny edytora aplikacji:

gdzie od razu po prawej stronie w kolumnie Properties dla elementu Srceen1 (czyli całego okienka naszej aplikacji) wybieramy w polu ScreenOrientation opcję User. Opcja ta ustawia tryb okienka widzianego w smartfonie na taki, jaki ustawi użytkownik w czasie jej wykorzystania.

Podobnie będziemy ustawiać właściwości (ang. properties) różnych używanych elementów stąd jeżeli w artykule poniżej piszę o właściwościach danego komponentu, to po wybraniu danego komponentu (kliknięcia na nim) znajdziesz jego właściwości właśnie w kolumnie Properties.

Interfejs App Inventora jest bardzo przyjazny, więc spokojnie się zorientujesz po krótkim treningu, a ja nie będę tłumaczył i pokazywał wszystkich niezbędnych ruchów jakie trzeba wykonać myszką :-)



Założenia naszej aplikacji

Czas przyjąć co ma robić nasza aplikacja. Przyjmijmy, że ma ona:

1. pokazać listę urządzeń Bluetooth (wcześniej sparowanych) będących w zasięgu,
2. umożliwiać wybranie z listy jednego z nich i połączenie z nim,
3. jeżeli połączenie będzie poprawne powinien pokazać jakiś komunikat oraz elementy dodatkowe, które umożliwią nam realizację zadań (poniżej),
4. umożliwić wprowadzenie w polu tekstowym dowolnego tekstu,
5. wysłać tekst z pola tekstowego do połączonego urządzenia Bluetooth,
6. wysłać na końcu znaki przejścia do nowej linii.

Przygotowanie niezbędnych komponentów

Założenia naszej aplikacji może nie są zbyt ambitne, ale myślę, że wystarczające na początek :-)

Będą nam więc potrzebne:

• przycisk pokazujący listę urządzeń Bluetooth będących w zasięgu,
• pole komunikatu o poprawnym połączeniu,
• pole do wprowadzenia tekstu,
• przycisk wysyłania tekstu.

Wszystkie niezbędne elementy znajdziemy po lewej stronie okna edycji. Kliknąwszy wybraną listę możesz wybrać komponent i metodą drag & drop przeciągnąć je do głównego okna symulującego wygląd naszego smartfona.

Zacznijmy więc od przycisku, który otworzy listę dostępnych urządzeń Bluetooth. W tym celu z listy komponentów User Interface wybieramy komponent ListPicker i przeciągamy do okna ekranu smartfona:

Od razu ustawimy mu (ListPicker1) niezbędne właściwości:

• Text: Lista dostępnych urządzeń Bluetooth
• Width: Fill parent

Szerokość ustawiona na opcję Fill parent spowoduje rozszerzenie tego elementu na całą szerokość okna i po powyższych zmianach powinieneś zobaczyć następujący efekt:

Następnie z listy komponentów User Interface według tej samej zasady dodajemy kolejne komponenty:

• Label
• TextBox
• Button

w efekcie czego powinieneś otrzymać:

Zauważ że:

• wszystkie trzy wyżej dodane elementy są wyrównane do lewej i umieszczone jeden po drugim (domyślne ustawienia). Jeżeli pomyliłeś kolejność ich dodawania, możesz je myszką ustawić jak na screenie powyżej.
• po prawej stronie w kolumnie Components (czerwona strzałka), widnieją wszystkie dodane przez nas do tej pory komponenty. To istotne ponieważ za chwilę będziemy część z nich ukrywać. Jeżeli je ukryjemy to w kolumnie Components nadal będą widoczne, co pozwoli nam je kliknąć i ewentualnie zmieniać im właściwości.
• wokół przycisku Button1 jest zielona ramka (czyli przycisk jest wybrany) i także na zielono jest podświetlony w kolumnie Components. Zaznaczyłem to strzałkami w tym samym kolorze.

Teraz klikając po kolei trzy dodane przed chwilą komponenty ustaw w ich właściwościach następujące parametry:

Dla komponentu Label1:

• Text: Połączono z HC-05 :-)

Dla komponentu TextBox1:

• Hint: Wprowadź tekst do wyslania

Dla komponentu TextBox1:

• Text: Wyślij tekst

Efekt będzie następujący:

Następnie wszystkim trzem dodanym przed chwilą komponentom ustawimy właściwość Visible na hidden, po to by je ukryć na początku działania programu. Od tego momentu znikną z okna smartfona, ale pozostaną w kolumnie Components:

Aby zobaczyć ukryte komponenty nawet wtedy, nie zmieniając jednak ustawień ich właściwości, możesz kliknąć checkbox Display hidden components in Viewer znajdujący się nad oknem smartfona, a który zaznaczyłem niebieską strzałką na screenie powyżej.

Pozostaje nam dodać komponent klienta Bluetooth, który znajdziesz na liście komponentów oznaczonej Connectivity:

Komponent ten należy przeciągnąć do okienka smartfona, ale on i tak samodzielnie przeniesie się poniżej okienka, ponieważ należy do komponentów niewidocznych na ekranie smartfona i zawiera wszelkie niezbędne komponenty służące do obsługi Bluetooth.

Mamy przygotowaną część dot. komponentów, możemy więc zabrać się za programowanie, czyli puzzle :-) o czym piszę w kolejnym artykule.

Bluetooth + Android: Pierwsza aplikacja APP Inventor - cz. II

Autor: Dondu

W pierwszej część tego artykułu określiliśmy założenia aplikacji i zaprojektowaliśmy komponenty niezbędne do zrealizowania.

W niniejszym artykule wykonamy program aplikacji i uruchomimy częściową jej wersję w celu przetestowania poprawności dodania komponentu listy urządzeń Bluetooth.

Poznasz więc krok po kroku, jak działają wybrane bloki programu oraz jak je łączyć, by osiągnąć zadaną funkcjonalność. Dowiesz się także jak przetestować aplikację za pomocą komputera wyposażonego w Bluetooth.

W artykule znajdziesz także gotową do pobrania aplikację.

No to do dzieła ... :-)


Programujemy, czy puzzlujemy - jak to nazwać? :-)

Jaka by nie była forma programu (w tym wypadku gotowe bloki), to jednak będziemy pisać program :-)

Aby rozpocząć przygotowanie programu, przechodzimy do edytora bloków klikając w prawym górnym rogu przycisk Blocks. Po otwarciu ekranu programowania, po lewej stronie zobaczymy dodane przez nas komponenty, a w głównej części pustą przestrzeń do umieszczania bloków programu:

W lewym dolnym roku jest też licznik błędów i ostrzeżeń (zaznaczony strzałką), których nie należy lekceważyć!


Lista dostępnych w pobliżu urządzeń Bluetooth

Zaczniemy od przygotowania programu listy urządzeń Bluetooth będących w zasięgu smartfona. W tym celu klikamy nasz komponent ListPicker1 co skutkuje otwarciem się okienka z blokami do wyboru, z którego wybieramy bloki when ListPicker1.BeforePicking i przeciągamy do okienka. Podobnie robimy z blokiem  set.ListPicker1.Elements.to:

Następnie za pomocą myszki łączymy oba bloki następująco:

Utworzyliśmy blok programu, który będzie podstawą do przygotowania list dostępnych urządzeń Bluetooth. Do pełni szczęścia brakuje mu jeszcze danych z modułu Bluetooth, czyli zestawienia urządzeń, które mógłby wyświetlić na liście ListPicker1.

Należy więc do ListPicker1 dołożyć element komponentu Bluetooth, który dostarczy tych danych do wyświetlenia. Komponentem tym jest BluetoothClient1.AddressesAndNames, który dokładamy na końcu naszego bloku:

Mamy więc fragment programu, który wypełni listę dostępnych urządzeń Bluetooth i w przypadku kliknięcia przycisku listy (czyli przycisku Lista dostępnych urządzeń Bluetooth) wyświetli nam tę listę.


Sprawdzamy działanie aplikacji na smartfonie

Przede wszystkim włączamy w smartfonie Bluetooth ponieważ pisana przez nas aplikacja nie posiada funkcjonalności sprawdzenia, czy moduł jest włączony i ewentualnego jego włączenia.

Teraz należy przesłać aplikację z komputera na smartfon, a mamy w tym względzie dwie możliwości (dostępne w menu Connect):

1. poprzez aplikację AI Companion,
2. poprzez kabel USB.

USB to szybki i zalecany sposób przesyłania aplikacji na smartfon.

Wykorzystanie aplikacji AI Companion jest nieco wolniejsze, ale zaprezentuję jak to zrobić, gdyż nie każdy może mieć kabel USB "pod ręką". Aby więc tą metodą uruchomić aplikację na smartfonie, powinieneś mieć zainstalowaną na nim aplikację MIT AI2 Companion, którą aktualnie (2014r.) można pobrać tutaj: MIT AI2 Companion

W tym przypadku istotne jest, by był włączony moduł WiFi smartfona i miał on dostęp do Internetu.

Na smartfonie uruchamiamy zainstalowaną wcześniej aplikację MIT AI2 Companion, a która rozpocznie się od ekranu:

Są dwie możliwości wykorzystania tej aplikacji:

• podanie kodu, który za chwilę wygeneruje nam AI Inventor, 
• lub skanowanie kodu QR. 

Ja wybrałem tę drugą opcję, bo jest szybsza. Klikamy więc przycisk scan QR code, w rezultacie czego włączy się aparat fotograficzny potrzebny do skanowania kodu QR.

Gdy mamy już na smartfonie otwartą aplikację  MIT AI2 Companion, w App Inventorze klikamy menu Connect i wybieramy AI Companion:

Pojawi się nam okienko z kodem QR:

który skanujemy smartfonem, który już oczekuje z włączonym aparatem fotograficznym:

Skanowanie kodu QR
Przykład na LG-E610

Po poprawnym zeskanowaniu kodu QR, smartfon pobiera aplikację (za pomocą WiFi) i uruchamia ją:

klikamy więc listę dostępnych urządzeń Bluetooth i nasza aplikacja ją pokazuje:

Pierwszy sukces mamy więc za sobą - zrealizowaliśmy punkt nr 1 z założeń dot. programu.

Teraz należy wybrać urządzenie stąd musimy zaprogramować ...


Reagowanie na wybór urządzenia z listy dostępnych

Potrzebne nam będą:

• blok, który poda nam dane wybranego z listy (klikniętego przez użytkownika aplikacji) urządzenia Bluetooth,
• blok, połączy się z wybranym urządzeniem znając jego dane.

Ponieważ nasze dane o urządzeniach Bluetooth w poprzednim bloku (pokazanym wyżej) przypisaliśmy do elementów ListPicker1 (ListPicker1.Elements), to znaczy, że po kliknięciu listy komponent ListPicker1 będzie znał dane urządzenia, które wybrał użytkownik aplikacji.

W związku z tym szukamy bloku ListPicker1, który zawiera dane wybrane z listy (selection) i znajdujemy:

Mamy więc już dane urządzenia Bluetooth wybranego z listy, teraz potrzebujemy blok Bluetooth, który połączy nas z wybranym urządzeniem na podstawie danych adresowych, które już mamy i temu nowemu blokowi podamy.

W komponentach naszego klient Bluetooth, czyli BluetoothClient1 znajdujemy:

Oba wyżej omówione bloki łączymy w następujący sposób:

Tak utworzony blok, połączy nasz smartfon z wybranym z listy urządzeniem. Dodatkowo ponieważ blok BluetoothClient1.Connect ma z lewej strony haczyk oznacza to, że zwraca informację, czy połączenie udało się nawiązać (true) czy też nie (false).

Warto by było tę informację wykorzystać, dodamy więc blok warunkowy dostępny w na liście bloków Control:

Łączymy go z blokiem Bluetooth następująco:

Ostatnim blokiem jaki musimy dodać jest blok reagujący na wybranie urządzenia z listy urządzeń. Ponieważ nasza lista urządzeń nazwana jest ListPicker1, tam więc szukamy i znajdujemy blok
ListPicker1.AfterPicking:

i łączymy go z wcześniejszymi następująco:

Tak stworzony blok po wybraniu urządzenia z listy wykona próbę połączenia z nim, i poinformuje warunek IF o rezultacie (True gdy połączenie zostanie poprawnie nawiązane, False w przeciwnym wypadku).


Włączenie ukrytych komponentów

Jeżeli rezultat nawiązania połączenia jest pozytywny, należy włączyć widoczność pozostałych ukrytych dotychczas komponentów, czyli Label1, TextBox1 oraz Button1.

Mamy już miejsce w warunku (then), gdzie możemy wstawić dodatkowe bloki, które wykonają się tylko wtedy, gdy połączenie zostało prawidłowo nawiązane. Musimy więc znaleźć bloki odpowiedzialne za widoczność poszczególnych komponentów. Na przykładzie komponentu Label1, znajdujemy set.Label1.Visible.to:

Do niego potrzebować będziemy wartość TRUE, którą znajdziemy w komponentach Logic:

i łączymy je następująco z pozostałą częścią tego fragmentu programu:

W przypadku pozostałych w/w komponentów  (TexBox1 oraz Button1) robimy to samo i w rezultacie otrzymujemy w pełni funkcjonalny blok:

Czyli nasz blok po wybraniu urządzenia z listy urządzeń Bluetooth, spróbuje nawiązać z nim połączenie i jeśli mu się to uda włączy widoczność pozostałych komponentów.


Sprawdzamy jak działa aplikacja, według opisu we wcześniejszej części niniejszego artykułu. Po uruchomieniu otrzymujemy jak poprzednio ekran:

Po kliknięciu przycisku wybory urządzenia:

i wybraniu właściwego (w moim przypadku HC-05) nastąpiło poprawne połączenie czego rezultatem było schowanie listy i pokazanie wszystkich ukrytych komponentów:

Czyli pięknie działa :-)


Reakcja na wysłanie wpisanego tekstu

Został nam do utworzenia blok wysyłania tekstu, który wpiszemy w polu TextBox1. Nie będę się już rozpisywał dokładnie, gdzie szukać poszczególne bloki, tylko pokażę gotowy blok, a Ty sam (w ramach treningu) znajdziesz odpowiednie bloki, bo już wiesz jak należy ich szukać :-)

Cały blok wyglądać powinien następująco:

Wyjątek zrobię jedynie dla bloku listy make a list ponieważ nie znajdziesz go w takiej formie na liście bloków Lists. Jest to bowiem wersja inline bloku make a list:

Aby go zmienić na wersję inline przeciągnij go do okna programu, kliknij na nim prawy klawisz myszki i wybierz Inline Inputs:

Następnie wstaw do niego dwa pola numeryczne z komponentów Math i wstaw w nie liczby 13 oraz 10, które odpowiadają znakom powrotu karetki (CR - ang. carriage return) i przejścia do nowej (LF - line feed ) - znaki CRLF. W ten sposób każdy wysłany tekst w terminalu będzie w osobnej linii.

Wróćmy do bloku wysyłającego dane, by wyjaśnić zasadę jego działania:

Gdy kliknięty zostanie przycisk Button1 nastąpi wysłanie poprzez Bluetooth zawartości pola TextBox1, a w drugiej kolejności wysłanie bajtów końca linii (CRLF).

Pełna część blokowa naszej aplikacji wygląda więc następująco:

Do pobrania

Do pobrania:

• plik projektu aplikacji MIT App Inventor 2 Beta: Test_Bluetooth_SPP.aia (kopia)
• aplikacja wykonana w MIT App Inventor 2 Beta: Test_Bluetooth_SPP.apk (kopia)

Możesz go przesłać pli Test_Bluetooth_SPP.apk na swój telefon w dowolny sposób (USB, Email, Bluetooth) i zainstalować. Po jej zainstalowaniu pojawi się ona ze standardową ikoną:

Testowanie

Aby za pomocą komputera przetestować naszą aplikację, należy mieć zainstalowany port COM w urządzeniach Bluetooth. By to osiągnąć należy (przykład dla Windows XP) w Panelu sterowania wybrać Urządzenia Bluetooth:

i w zakładce Porty COM sprawdzić, czy masz zainstalowany port:

Jeżeli port nie jest zainstalowany, należy kliknąć przycisk Dodaj... w wyniku czego ukaże się okienko:

Po kliknięciu przycisku OK nastąpi proces dodawania portu COM, co objawiać się będzie kolejnymi komunikatami:

czego rezultatem będzie zainstalowanie portu COM:

Teraz pozostaje już nam tylko włączyć dowolny terminal (ja preferuję Realterm) i w zakładce Display zaznaczyć opcję Ansi (by nie pokazywane były znaki specjalne CR i LF opisane wyżej):

oraz w zakładce Port i wybrać właściwy COM (w moim przypadku był to port COM21) i dowolne parametry transmisji danych:

Następnie przechodzimy do naszej aplikacji i łączymy się z komputerem wybierając go z listy - u mnie jest to BUBA :-)

Od tego momentu smartfon powinien być poprawnie połączony z komputerem za pomocą portu COM, możemy więc przystąpić do wysyłania danych testowych - ja wysłałem kilkukrotnie ciąg cyfr 1234567890:

czego efekt możesz zaobserwować w terminalu:

a poziom zadowolenia mocno wzrasta ;-)


Podsumowanie

Jak widzisz programowanie w App Inventorze za pomocą bloków jest banalnie proste. Początkowo pewną trudność może przynieść znalezienie potrzebnego nam bloku, jednakże po pewnym czasie będziesz gdy "złapiesz klucz" według jakiego podzielone są bloki nie będzie to stanowiło dla Ciebie żadnego problemu :-)

Możliwości Inventora są oczywiście znacznie większe niż pokazany powyżej przykład, więc zachecam do jego wykorzystania, a przykłady oraz Help znajdziesz na oficjalnej stronie: ai2.appinventor.mit.edu

W kolejnym artykule połączymy się z mikrokontrolerem za pomocą modułu HC-05 i pobawimy się diodą LED za pomocą kolejnej własnej aplikacji :-)