Zapewne coraz częściej w branży mówi się o frameworku PhoneGap firmy Adobe. Jest w pełni darmowy i umożliwia budowanie „pseudonatywnych” aplikacji na urządzenia mobilne. Brzmi ciekawie? A jakże. Nie musimy bowiem uczyć się Javy (Android) lub Objective-C (iOS) by stworzyć natywną aplikację mobilną. Podejście, jakie przedstawia PhoneGap jeszcze niedawno było szeroko krytykowane przez osoby powiązane z branżą. Jednak czy słusznie, tego nikt obiektywnie nie oceni. W mojej ocenie krytyka była spowodowana:
– rozwojem PhoneGap’a
– niezaradnością i/lub nieznajomością HTML5/JS
– przeświadczeniem, że jest to słabe.

Szerząca się w ten sposób propaganda źle oddziaływała na pewno na osoby/firmy badające rynek, możliwości i zalety Adobe PhoneGap. W myśl mojego przekonania, że „dobry produkt sam się wybroni” mogę przekierować wszystkich na stronę phonegap.com, gdzie możecie sprawdzić ile i jakie aplikacje zawdzięczają swój żywot właśnie temu wrapperowi. Czy warto zainteresować się frameworkiem i jak rozpocząć przygodę z tworzeniem aplikacji z wykorzystaniem PhoneGap’a? O tym w dalszej części artykułu. 

Czas na konkrety

Niektórzy pewnie w tym momencie mają sceptyczne podejście co do zastosowania tego oprogramowania. Całkiem słusznie, bowiem niemożliwym jest zastąpienie natywnym w pełni funkcjonalnych aplikacji odpowiednikami stworzonymi z wykorzystaniem PhoneGap. Nie ma takiej możliwości. Ba i nie będzie. Każdy system jest inny – iOS to nie to samo wnętrze, co Android, a Android to nie to samo, co Blackberry. Nie ma co się oszukiwać – niemożliwym jest stworzenie idealnego PhoneGap’a.

Framework pozwala na pisanie jednej aplikacji i wydanie jej w postaci oddzielnych paczek dedykowanych dla odpowiedniej platformy. Wspierane platformy to: iPhone, Android, Blackberry, WebOS, Windows Phone, Symbian i Bada. Wszelkie ograniczenia na określone platformy bardzo dobrze zobrazowane są tutaj. Dostęp do API urządzeń odbywa się przez funkcje JavaScript biblioteki Cordova – najnowsza wersja w momencie wydania artykułu to 2.9.1.

Zalety

– jedna aplikacja na kilka platform mobilnych
– wykorzystanie poparte praktycznymi wdrożeniami aplikacji (j.w.)
– oprogramowanie darmowe
– brak ograniczeń na poziomie HTML5/JS
– umożliwia skorzystanie z akcelerometru, kontaktów, kamery, kompasu, plików pamięci, geolokalizacji, powiadomień wibracyjnych i dźwiękowych oraz mediów
– wymaga znajomości tylko HTML5, JavaScriptu i kaskadowych arkuszy stylów CSS
– szybkie testy wieloplatformowe poprzez testowanie przeglądarkowe (np. Ripple + Firebug)
– utrzymanie i aktualizacja dużo tańsza
– całkiem dobrze spisuje się dla aplikacji biznesowych

Wady

– wolniejsze i mniej wydajne niż aplikacje natywne
– domyślnie brak natywnego wyglądu aplikacji (natywnych kontrolek) przez co listy wyboru i inne pola wyglądają jak w przeglądarce, a nie aplikacja natywnych (są jednak pluginy)
– JavaScript nie jest wspomagany sprzętowo na iPhone (CSS jest)
– nie nadaje się do gier
– niemożliwe jest kontrolowanie całego telefonu od strony programistycznej (nie napiszemy widżetu)
– animacje niekoniecznie muszą być płynne (uzależnienie od ilości contentu)
– użytkownicy opowiadają się natywnym UI

Podsumowując, należy jeszcze przypomnieć sobie o Responsive Web Design (RWD). Czasami bowiem wystarczają drobne zmiany aby nasza strona internetowa stała się responsywna, a wówczas już obszar urządzeń mobilnych zostaje obsłużony. Przed podjęciem wyboru należy zatem zastanowić się nad wzajemnymi alternatywami, jakimi są:
– aplikacja natywna
– strona responsywna
– PhoneGap

Koszty złych wyborów w branży IT są bardzo duże, więc poświęcenie nawet miesiąca na badanie tych możliwości, w celu wyboru optymalnego, nie jest stratą czasu.

Konfiguracja narzędzi deweloperskich

Dajmy na to, że zdecydowałeś się na wykorzystanie tego dobrodziejstwa, jakim jest PhoneGap. Pewnie podobnie, jak ja swego czasu bijesz się z myślami. Jak to ugryźć? Poniżej przedstawię Wam pełny proces konfiguracji narzędzi. Nie uciekajcie jeszcze, chyba, że zaparzyć świeżą herbatkę 🙂

> Zaczynamy od aplikacji bazowej!

Naszą bazą będzie Eclipse. W momencie pisania artykułu najnowszą wersją był Eclipse Kepler – wersja 4.3.2. Na podstawie tej wersji, a dokładniej Eclipse Standard 4.3.2 oparty będzie tutorial.

> Android Development Tools

Teraz instalujemy wtyczkę ADT – Android Development Tools. Zgodnie z opisem dokonujemy tego z poziomu „instalacji nowego oprogramowania w Eclipse:
1) Help > Install new software…
2) Work with: https://dl-ssl.google.com/android/eclipse/ > Enter
3) Wybieramy „Developer Tools” i akceptujemy wszystkie licencje (rys. A)
4) Po instalacji restart Eclipse

 

> Android SDK

Następny krok to instalacja Android SDK:
1) Window > Android SDK Manager
2) Zaznaczamy interesujące nas API Androida (zainstalowane przeze mnie pozycje wskazałem na Rys. B)
3) Install packages > akceptacja licencji > instalacja
4) Po zainstalowaniu wracamy do punktu 3) jeśli nie wszystkie zaznaczone przez nas pozycje zostały zainstalowane (może się tak zdarzyć z powodu zależności pomiędzy instalowanymi komponentami)

!) Wykorzystanie API19 może (w obecnej chwili) przysporzyć nam sporo problemów, dlatego dalsza moja przygoda (na potrzeby tutorialu) będzie oparta o API18.
!!) Konieczna jest instalacja Google USB Driver (Windows) w przypadku, gdy chcemy testować aplikację na rzeczywistym urządzeniu mobilnym (niezależnie od wirtualnego emulatora).

Ścieżkę do folderu „android-sdks” ustawiamy w Window > Preferences > Android (Rys. C).

 

> AppLaud i WPE

Czas teraz na wtyczkę pozwalającą na łatwe tworzenie aplikacji w PhoneGap. Chodzi o AppLaud:

1) Help > Install new software…
2) Work with: http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download > Enter
3) Zaznaczamy wyłącznie „Phonegap for Android” > akceptacja licencji > instalacja
4) Work with: http://download.eclipse.org/releases/kepler/ > Enter
5) Wybieramy Web, XML Java EE, and OSGi Enterprise Development > Web Page Editor, akceptujemy licencje i instalujemy
6) Po instalacji restart Eclipse

 

> Android Virtual Devices

Następnie zajmujemy się wirtualnym emulatorem. Konieczne jest to do lokalnego testowania aplikacji. Przechodzimy do Window > Android Device Virtual Manager. Na zakładce „Android Virtual Devices” klikamy „New” w celu utworzenia nowego wirtualnego urządzenia mobilnego. Następnie ustalamy parametry urządzenia analogicznie, jak na Rys. D.

Zalecam przynajmniej w niedalekiej przyszłości niekorzystanie a API19, bowiem emulowanie aplikacji na to API mimo wielu prób zakończone zostało niepowodzeniem. Więcej szczegółowych informacji n.t. AVD uzyskacie tutaj.

 

Tworzenie projektu

Zapewne nie umknęło Twoim oczom (jeśli realizujesz tutorial oczywiście), że po instalacji wtyczki AppLaud pojawiła się nowa ikonka „Create a PhoneGap project” (Rys. E). Klikając na nią inicjowany jest proces tworzenia projektu z wykorzystanie frameworku PhoneGap. To nas w tej chwili interesuje, zatem do dzieła.

1) Podstawowe opcje:

Wybieramy „Enter path to installed PhoneGap” w celu podania ścieżki do ściągniętego PhoneGap’a stąd. Podanie ścieżki do najnowszej wersji 2.9.1 powoduje błąd walidacji folderu – Rys. F (domniemam, że chodzi wbudowane ograniczenie dotyczące konieczności istnienia określonych plików/rozszerzeń) – pewnie w następnej wersji AppLaud będzie to rozwiązane, chyba że sami macie jakiś pomysł, wówczas czekam na komentarze.

Dlatego użyłem wersji 2.9.0. Jeśli generuje ona podobny błąd można go obejść tymczasowo usuwając z biblioteki pliki niepasujące do wskazanego wzorca.

Następnie wskazujemy na najnowszą bibliotekę jQuery Mobile – obecnie 1.4.2. Aby walidator projektu się odczepił tymczasowo usuwamy pliki niepasujące do wzorca.

Wybieramy odpowiedni typ projektu, jaki chcemy wygenerować i voila.

Etap ten bez błędu zobrazowany jest na rysunku G.

2) Nazwa projektu:

3) Wybieramy SDK:

4) Pakiet, create activity i minimalna wersja Androida, jaką chcemy wspierać:

Należy pamiętać, aby po wyborze innej wersji minimalnej SDK wrócić do poprzedniego ekranu i przywrócić SDK – w naszym przypadku 4.3, gdyż po wyborze minimalnej wersji, wersja podstawowa ustawiana jest na minimalną!

5) Finish

 

Interpretacja projektu

W katalogu assets/www w pliku index.html znajduje się startowy kod – de facto kod, który jest przetwarzany w aplikację pseudonatywną. Jest w nim dołączana biblioteka PhoneGap/Cordova, która odpowiada za dostęp do natywnych funkcji sprzęt. Widnieje też kod niezbędny do działania na sprzęcie mobilnym. Mowa o zdarzeniu deviceready, które oznacza, że Cordova została całkowicie załadowana. Można wtedy korzystać z natywnych funkcji urządzenia.

Emulowanie projektu

Uruchomienie programu na emulatorze sprowadza się do kilku działań. Poniżej opiszę je po kolei.

1) Klikamy prawym przyciskiem myszy na projekt w „Package explorer” > Run as… > Run configurations… > New launch configuration
2) Wpisujemy nazwę konfiguracji np. „Test-virtual” i wybieramy jakiego projektu dotyczy
3) Na zakładce „Target” wybieramy „Automatically pick compatible device: Always uses preffered AVD…”
4) Wybieramy preferowany AVD (w tutorialu utworzyliśmy tylko jeden wcześniej, więc nie mamy wyboru)
5) Zaznaczamy „Use same device for future launches” (opcjonalne)
6) Apply
7) Run

Pierwszy start emulatora może (a właściwie musi) trochę potrwać. Po wprowadzeniu zmian w kodzie robiąc „Run as…” > [nasza_konfiguracja] wprowadzimy zmiany do emulatora, co trwa krócej, bowiem emulator jest już uruchomiony.

Na konsoli (Window > View > Console) Androida (nie DDMS) możemy śledzić postęp inicjalizacji i aktualizacji emulatora.

Stworzony przykład na emulatorze wygląda tak:

 

UWAGA: Jeżeli natraficie na błąd „Android error: Failed to install *.apk on device *: timeout” to nie popadajcie w panikę. Rozwiązanie jest proste – Window > Preferences > Android > DDMS > ADB Connection Timeout (ms) – ustawić na np. 15000ms.

Uruchamianie na urządzeniu mobilnym

W tym celu należy podłączyć urządzenie do komputera poprzez USB – dlatego wcześniej instalowaliśmy Google USB Driver. Trzeba pamiętać, aby w ustawieniach urządzenia włączyć debugowanie USB (ja miałem domyślnie włączone na Androdzie, ale warto sprawdzić).

1) Klikamy prawym przyciskiem myszy na projekt w „Package explorer” > Run as… > Run configurations… > New launch configuration
2) Wpisujemy nazwę konfiguracji np. „Test-real” i wybieramy jakiego projektu dotyczy
3) Na zakładce „Target” wybieramy „Always prompt to pick device”
4) Zaznaczamy „Use same device for future launches” (opcjonalne)
5) Apply
6) Run

W oknie, które się pojawi powinniśmy mieć do wyboru podłączone do komputera urządzenie. Wybieramy je i idziemy dalej. Po odczekaniu chwili (dużo szybciej to trwa niż emulowanie na AVD) do naszego Androida zostanie dodana aplikacja i uruchomiona.

UWAGA: Jeżeli napotkamy błąd (na konsoli) „The connection to adb is down, and a severe error has occured.” to … nie popadajmy w przerażenie 🙂 Rozwiązanie jest proste, choć nieintuicyjne:
1) Zamykamy Eclipse
2) Otwieramy konsolę sytemową w lokalizacji „platform-tools”
3) Wykonujemy komendę: adb kill-server
4) Wykonujemy komendę:  adb start-server
5) Jeżeli nie pojawił się błąd, wówczas adb zostalo uruchomione pomyślnie
6) Uruchom Eclipse i ponów próbę uruchomienia aplikacji na urządzeniu.

Jeżeli powyższa instrukcja nie działa to znaczy, że działa, ale nie do końca 🙂
Wystarczy podpinać kabelek pomiędzy komputerem, a smartfonem dopiero po wyświetleniu się okienka wyboru urządzenia!

Pozdrowienia, oczywiście! Mam nadzieję, że komuś się przyda tutorial. Zachęcam do komentowania.