Pierwsza aplikacja mobilna - c.d.

Ten post zostanie poświęcony dalszej części przygód z konfiguracją połączenia telefon-komputer oraz pierwszych zabawach z „aplikacją mobilną”.

Na początku, zamieszczę krótkie przypomnienie co wydarzyło się w ostatnim odcinku poście. Mianowicie został stworzony przeze mnie przykładowy projekt aplikacji mobilnej. W ramach testów hostowany jest on na komputerze w formie serwera node’a działającego na socketach. Do wyświetlenia aplikacji na urządzeniu mobilnym pobieramy dedykowany program PhoneGap’a na odpowiednią platformę i za jej pomocą łączymy się z naszym serwerem. I w tym miejscu skończyła się moja ostatnia przygoda. 

Ze względu na mieszkanie w akademiku gdzie WiFi jest tępione, komputery podłączone są do gniazdek Ethernetem potrzebowałem jakoś połączyć się do mojego laptopa. W tym celu po nieudanych próbach tworzenia Ad-hoc’a przy pomocy Windows 7 pobrałem program MyPublicWiFi. Z kolei ta aplikacja uruchamiała się ale nie chciała wyświetlić żadnego okna konfiguracyjnego. Jak się później okazało wystarczyło odłączyć mój zewnętrzny monitor od laptopa. Bardzo dziwny problem. No ale cóż w momencie w którym człowiek chce coś zrobić małym nakładem pracy zawsze najdzie się jakiś chochlik. 

W chwili pomyślnego uruchomienia MyPublicWiFi sprawnie sparowałem telefon z siecią komputera i załadowałem demonstracyjną aplikację. 

Po kilku chwilach prostego grzebania w plikach HTML i JS zmodyfikowałem wyświetlany tekst (tak to musiało być bardzo trudne :) ). Następnie pobrałem kilka pluginów wykorzystujących funkcje telefonu. W końcu czym jest aplikacja mobilna bez wibracji, powiadomień i innych ciekawych rzeczy.

Korzystając ze strony zawierającej pluginy Crodovy pobrałem kolejno Device Info, Battery Status i Vibration.

W nagłówku przykładowej aplikacji za pomocą pluginu wyświetlam producenta telefonu, następnie dodałem przycisk 

<button id="vibrate">Vibrate</button>

W funkcji bindEvents pliku index.js dodałem Event kliknięcia

document.getElementById('vibrate').addEventListener('click', this.onVibrateClick, false);

A następnie akcję reagującą na kliknięcie. 

onVibrateClick: function(ev) {
    var target = ev.target;
    navigator.vibrate([100, 50, 300]);
}

Jak można się domyśleć z kodu jest to przycisk wywołujący wibracje w telefonie. 
Parametry funkcji vibrate() podane w tablicy informują o czasie wibracja-przerwa w milisekundach. Więc tutaj mamy 100ms wibracji, 50ms przerwy i 300ms wibracji. W rezultacie przypomina to wibracje powiadomień.

Końcowy wygląd aplikacji:

Podsumowując, udało mi się w końcu stworzyć coś co działa! I nawet korzysta z wbudowanych funkcji samego telefonu. W tym przypadku były to najprostsze funkcje takie jak Informacje o sprzęcie i uruchomienie wibracji. 

Pisałem również, że został pobrany również plugin informujący o stanie baterii. Niestety nie udało mi się zmusić go do działania, mimo że Cordova w oficjalnej dokumentacji zapewnia kompatybilność z systemem Windows Phone 8.1.

W następnym poście skupię się na stworzeniu bardziej zaawansowanej aplikacji z konkretnym wyglądem. Czyli głównie wybór frameworka CSS dla urządzeń mobilnych i próba jego wykorzystania.