Phonegap podstawy - konfiguracja i pierwszy program

Phonegap to narzędzie open source łączące aplikacje internetowe z interfejsami api urządzeń mobilnych. Zawiera szkielety projektów aplikacji natywnych dla poszczególnych platform - między innymi dla Androida. Dzięki Phonegap można z poziomu javascriptu uzyskać dostęp do różnych funkcji sprzętowych telefonu np. kamery czy akcelerometru. Phonegap Android

Konfiguracja środowiska

Naszą przygodę z Phonegapem zaczniemy od skonfigurowania środowiska: Eclipse, Android SDK, Eclipse ADT oraz AppLaud. Jest to mój standardowy zestaw do tworzenia aplikacji na Androida przy użyciu Phonegap. Najpierw należy pobrać środowisko Eclipse Classic ze strony www.eclipse.org/downloads. Wystarczy rozpakować pobraną paczkę i uruchomić plik wykonywalny eclipse. Środowisko powinno się uruchomić, pytając przy okazji o folder, w którym chcemy trzymać nasze projekty. Teraz należy zainstalować plugin ADT do Eclipse. W tym celu trzeba wejść do Help > Install New Software, następnie kliknąć Add w prawym rogu, aby dodać adres url: https://dl-ssl.google.com/android/eclipse/
Klikamy OK.
W oknie Available Software zaznaczamy checkboxem Developer Tools i klikamy Next.
W następnym oknie również klikamy Next.
Potem musimy zaakceptować licencje i kliknąć Finish.
Jeśli pojawi się ostrzeżenie o zabezpieczeniach kliknij przycisk OK.
Po zainstalowaniu trzeba jeszcze zrestartować Eclipse.
Teraz należy zainstalować android sdk. Zmieniamy perspektywę na Java (jeśli nie mamy takiej ustawionej) Window > Open Perspective > Java. Wybieramy Window > Android SDK Manager. W oknie, które się pojawi możemy zainstalować różne składniki sdk oraz wersje api androida. Na poniższym rysunku okno mojego sdk managera z zaznaczonymi zainstalowanymi składnikami (Linux). Ważne jest aby na Windowsie zainstalować Google USB Driver jeśli chcemy testować nasze aplikacje na rzeczywistym urządzeniu. Po wybraniu składników klikamy Install packages, akceptujemy licencję i ponownie klikamy Install. Okno SDK Manager Ścieżkę do android sdk można np. ustawić w Window > Preferences > Android. Zainstalujemy kolejny plugin do Eclipse, który pozwoli nam w łatwy sposób tworzyć aplikacje przy użyciu Phonegap - mianowicie AppLaud. Wybieramy jak poprzednio Help > Install New Software i dodajemy adres url: http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download
W oknie Available Software zaznaczamy checkboxem Phonegap for Android. Instalujemy i restartujemy Eclipse. Jeśli nie masz zainstalowanego edytora stron możesz go w tym momencie zainstalować (więcej na ten temat tutaj). Powinieneś również mieć zainstalowane Javascript Developer Tools.
Jeśli jesteś użytkownikiem Linuxa ustaw swoją zmienną środowiskową PATH w Twoim pliku ~/.bashrc lub ~/.bash_profile na: PATH=${PATH}:katalog_z_sdk/tools
oraz wydaj polecenie w konsoli:
export PATH=${PATH}:katalog_z_sdk/tools
W celu ustawienia emulatora do testowania aplikacji przechodzimy do Window > Android Virtual Device Manager. Więcej na ten temat tutaj.

Tworzymy pierwszy projekt

Utworzymy pierwszy projekt tzw. Hello World. W tym celu klikamy na ikonkę Create new phonegap project (powinniśmy być w perspektywie Java). New Phonegap Project Po utworzeniu powinniśmy przełączyć się na perspektywę JavaScript. Do tworzenia projektu służy wygodny kreator. New Phonegap Project Możemy użyć wbudowanej w plugin wersji Phonegap lub użyć ścieżki do wcześniej pobranej wersji ze strony phonegap lub cordova. Jak widać na screenie użyłam pobranej wcześniej wersji. Zaznaczamy opcję Minimal Phonegap Project i klikamy Next. W kolejnym oknie podajemy nazwę projektu, klikamy Next. New Phonegap Project Następny krok to wybór wersji api androida, z którą chcemy pracować. Wybieramy najnowszą jaka jest dostępna i przechodzimy dalej. New Phonegap Project Wpisujemy nazwę pakietu i zaznaczamy opcję Create activity. Wybieramy również wersję sdk dla mininalnej wersji Androida którą chcemy wspierać. New Phonegap Project Bardzo ważne - teraz klikamy Back i wybieramy jeszcze raz Target Name na najnowszą wersję Androida (robimy tak ponieważ bo wyborze mininalnej wersji automatycznie target name również na nią się ustawia, a tego nie chcemy). Na koniec klikamy Next i Finish. Mamy utworzony nowy projekt Phonegap. Struktura projektu Utworzony projekt posiada już startowy kod w pliku index.html w katalogu assets/www. Poniższa linijka załącza bibliotekę phonegap/cordova do projektu. To właśnie dzięki niej mamy dostęp do pewnych sprzętowych funkcji telefonu.
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Teraz omówimy krótki kod, który standardowo jest dołączony do pliku index.html.
var onDeviceReady = function() {
	document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
};

function init() {
	document.addEventListener("deviceready", onDeviceReady, true);
}   
Ważne jest tu to, że obsługujemy zdarzenie deviceready. Zdarzenie to oznacza, że Cordova (Phonegap) została całkowicie załadowana. Można wtedy korzystać z natywnych funkcji urządzenia. W funkcji obsługującej to zdarzenie do elementu o id devready zostaje wstawiony tekst "OnDeviceReady fired.". Do funkcji obsługującej zdarzenie dodajmy teraz coś od siebie. Dodamy proste powiadomienie (notofication) wyświetlające napis "Hello World of PhoneGap".
navigator.notification.alert("Hello World of PhoneGap");
Pełny kod pliku index.html wygląda teraz następująco:
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Minimal AppLaud App</title>

	  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
	  <script type="text/javascript" charset="utf-8"> 
        var onDeviceReady = function() {
            document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
            navigator.notification.alert("Hello World of PhoneGap");
        };

        function init() {
            document.addEventListener("deviceready", onDeviceReady, true);
        }   
</script>
  </head>
  <body onload="init();" id="stage" class="theme">
    <h2>Minimal AppLaud App</h2>

	<p>Your app goes here.</p>
	<p>
    <span id="devready">onDeviceReady not fired.</span>
    </p>

  </body>
</html>
Uruchomimy teraz nasz program na emulatorze (AVD). Wybierz projekt w project explorerze z lewej strony. Kliknij na nim prawym przyciskiem myszy i z menu kontekstowego wybierz Run As > Run Configurations. Powinno się pojawić poniższe okno. Po lewej zaznacz nazwę aplikacji (w naszym przypadku HelloWorld) i przejdź na zakładkę Target. Zaznacz opcję "Automatically pick compatible device". Wybierz wirtualne urządzenie, na którym chcesz uruchomić aplikację i kliknij Run. Jeśli lista avd jest pusta musisz dodać jakieś wirtualne urządzenie. Android Virtual Device Uruchomienie avd musi trochę potrwać (szczególnie przy pierwszym uruchomieniu) - w zależności od sprzętu nawet do kilku minut. Tak wygląda aplikacja uruchomiona na avd. Android Virtual Device Uruchomimy teraz aplikację na rzeczywistym urządzeniu. W tym celu należy podłączyć urządzenie do komputera. Trzeba pamiętać aby w ustawieniach urządzenia włączyć debugowanie USB. Jak poprzednio wybierz swój projekt po lewej stronie i przejdź do Run As > Run Configurations. Po lewej zaznacz nazwę aplikacji i przejdź na zakładkę Target. Tym razem wybierz opcję manualną - "Always prompt to pick device". Następnie kliknij Run. W oknie, które się pojawi powinieneś mieć do wyboru urządzenie, które zostało podłączone do komputera. Wybierz je i kliknij OK. Uruchomienie na rzeczywistym urządzeniu Jeśli Twoje urządzenie nie widnieje na liście przeczytaj artykuł. Poniżej przykładowy screen z urządzenia. Uruchomienie na rzeczywistym urządzeniu Jeśli chcesz dowiedzieć się więcej na temat Phonegap i Androida polecam zapoznanie się z ebookiem Phonegap dla Androida od podstaw.

Komentarze 3

Peter

19.02.2014 00:24

Zadziałało - bardzo dziękuję. Jedna sugestia: Lepiej od razu zainstalować nie Standard Exclipse, ale wersję z preinstalowanym JSDT (JavaScript Dev Tools) - dzięki temu można uniknąć ręcznego doinstalowania z tego repozytorium: http://download.eclipse.org/webtools/repository/indigo/

lorak

10.06.2014 19:10

Fajna książka. Warta swojej ceny.

jegor377

20.02.2015 15:15

Jak zainstalować JSDT ? mam pierwszy raz do czynienia z eclipse :)

Dodaj komentarz