Apache Cordova i Android, walkthrough.

Cordova w skrócie, to API pozwalające stworzyć natywną aplikację używając do tego wyłącznie HTML, CSS i JavaScript. Przy jednoczesnym dostępie do np wibracji, aparatu, geolokalizacji, książki kontaktów i tym podobnych właściwości telefonu. W przeciwieństwie do aplikacji webowych, których są pozbawione takiej możliwości przez ograniczenia narzucone przez przeglądarkę. Dodatkowo aplikacje pisane w ten sposób przy niewielkim nakładzie pracy mogą znaleźć się na wiodących platformach, ios, Andorid, BlackBerry.

Oczywiście jak wszystko, rozwiązanie to niesie ze sobą tyle plusów jak i minusów. Przed wybraniem tego rozwiązania należy odpowiedzieć sobie na pytanie czy na pewno wystarczy nam technologia webowa? Ponieważ cordova to nic innego jak maszyna wirtualna z Apache na pokładzie. To tak jakby uruchomić lokalnie aplikację webową.

W tym krótkim artykule chciałbym przedstawić proces instalacji pakietu Cordova oraz szybkie uruchomienie „HelloWorld” na urządzeniu z Androidem i dodatkowo pomóc przy problemach  z tym związanymi (A przynajmniej tymi, które osobiście napotkałem)

Instalacja

Zaczynając od początku, do zainstalowania większości potrzebnych rzeczy będziemy potrzebowali Terminala oraz menadżera pakietów Node.js – npm.

Gdy już go posiadamy, wpisujemy komendę:

 $ sudo npm install -g cordova

Z racji tego, że wykonujemy instalacji jako root, system poprosi nas o autoryzację.  Po tym nastąpi instalacja, podczas której wszystko poszło raczej sprawnie. Na koniec możemy sprawdzić wersję aktualnej Cordovy wpisując w konsoli:

 cordova -version

Jeżeli wszystko się udało powinniśmy zobaczyć aktualną wersję, w moim przypadku jest to: 3.4.1-0.1.0

Tworzenie aplikacji „Hello World”

Na początek przechodzimy do folderu w którym chcemy umieścić nasz projekt, dla przypomnienia dla tych, którzy mogą być na bakier z konsolą tak jak ja. Do przechodzenia między folderami używamy komendy cd a jeżeli chcemy wyświetlić zawartość katalogu, możemy użyć komendy ls (z tego co pamięta na Windowsie dir). Następnie dzięki poniższej komendzie tworzymy nowy projekt:

$ cordova create hello com.example.hello HelloWorld

Pierwsze argument hello to nazwa katalogu w którym zostaną stworzone wszystkie potrzebne pliki do naszego projektu. Drugi argument: com.example.hello to tak zwany „reverse domain-style identifier” czyli identyfikator na podstawie odwróconej nazwy Twojej domeny firmowej, czy coś w tym rodzaju. Powiem szczerze, że mam z tym lekki problem, nie znalazłem sensownych informacji dotyczących tego czy mogę pisać na przykład: pl.nenek.appname wydaje mi się to logiczne… No i trzeci argument czyli nazwa aplikacji, która wyświetla się między innymi pod ikoną :) Ten argument jest opcjonalny, ale raczej bym z niego nie rezygnował. Jeżeli jednak tak wybierzecie, możecie zawsze dokonać zmiany nazwy waszej aplikacji w pliku config.xml

Dodawanie platformy

Kolejnym krokiem jest dodanie do naszego projektu platformy, na którą chcemy wypuścić aplikację. Akurat w moim przypadku jest to Android, więc najpierw przechodzimy do folderu naszego projektu:

$ cd hello

A następnie dodajemy platformę:


$ cordova platform add android

I w tym momencie zaczęły się problemy… Pierwszym z nich był komunikat:

[error] An error occured during creation of android sub-project. ERROR : executing command 'ant', make sure you have ant installed and added to your path.

poszukałem trochę i udało mi się znaleźć rozwiązanie tutaj. Pierwsze co robimy to instalujemy Homebrew brakujące pakiety w OSX, najpierw ściągamy:

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Następnie instalujemy:

$ brew install ant

Przejdźmy dalej – Kolejny błąd:

Error: The command "android" failed. Make sure you have the latest Android SDK installed, and the "android" command (inside the tools/ folder) is added to your path.

Przede wszystkim, żeby dodać platformę androida, musimy mieć na dysku SDK, które można pobrać stąd: http://developer.android.com/sdk/index.html?hl=sk

następnie wywołać komendę pamiętając o wymianie <path_to_android_sdk> na własną, w moim przypadku (/Users/daniel/Documents/ANDROID_SDK) z zachowaniem wielkości liter:

$ export PATH=/<path_to_android_sdk>/sdk/platform-tools:/<path_to_android_sdk>/sdk/tools:$PATH

— Edit 20140614:

Zauważyłem, że powyższa metoda musi być powtarzana za każdym razem gdy włączamy nową konsolę – dość upierdliwe. Dlatego:

1. Przechodzimy do home:

   $ cd

2. Tworzymy ukryty plik .profile:

   touch .profile

3. Otwieramy nowo utworzony plik:

   open -e .profile

4. Wpisujemy tą samą komendę:

   export PATH=/<path_to_android_sdk>/sdk/platform-tools:/<path_to_android_sdk>/sdk/tools:$PATH

5. zapisujemy i włączamy jeszcze raz terminal.

Rozwiązanie to znalazłem tutaj, ale trzeba było trochę skorygować poradę ponieważ podawana tam komenda jest niewłaściwa.

— Koniec edycji —

Po tym dodanie platformy Andorid powinno pójść gładko.  Na koniec kilka przydatnych komend do kompilowania projektu:

$ cordova build

$ cordova emulate android

$ cordova run android

Tyle na dzisiaj. Dzięki.