piątek, 1 lutego 2013

Środowisko developerskie Android z Eclipse, Android SDK oraz PhoneGap - Debian Squeeze

Chciałbym pokazać jak skonfigurować środowisko developerskie dla aplikacji pisanych na Androida, przy pomocy Eclipse'a oraz Debiana Squeeze.


Musimy zainstalować tym razem Debiana wraz z GUI, musimy również mieć z jego poziomu dostęp do internetu, aby ściągnąć potrzebne paczki.

1) Instalacja Eclipse:

Kolejno otwieramy: Applications -> Accessories -> Terminal




Logujemy się na root'a:


su


pobieramy potrzebne paczki:


apt-get install openjdk-6-jdk eclipse ruby rubygems ruby-dev libnokogiri-ruby git ant libxml2 libxml2-dev libxslt-dev


dodatkowo jeżeli używamy systemu 64-bitowego:


apt-get install lib32stdc++6 ia32-libs








2) Instalujemy Android's SDK:



cd ~
wget http://dl.google.com/android/android-sdk_r10-linux_x86.tgz
tar xvfz android-sdk_r10-linux_x86.tgz 


Wszystko wypakuje się do katalogu domowego, musimy go dodać do ~./profile:


nano ~/.profile


dodajemy do niego:


PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$PATH"


lub szybciej:):


export PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$PATH"


na koniec startujemy środowisko poleceniem:


android


powinniśmy zobaczyć takie okno:





następnie klikamy na  Available packages, powinniśmy dostać dwie pozycje :




Rozwijamy drzewo Android Repository, następnie klikamy na Install Selected , co powinno wyglądać o tak:




W nowym oknie zaznaczamy Accept oraz Install.

Zostaną pobrane paczki dla SKD, jeżeli pojawi się pytanie o restart ABD klikamy na YES.
Po pobraniu Klikamy na Close, w małym oknie:









3) Połączymy SDK Eclipse:


Otwieramy Applications - Programming - Eclipse

Jeżeli pojawi się pytanie o domyślną przestrzeń roboczą proszę kliknąć OK:




W samym Eclipse klikamy na Help - Install New Software

W nowym oknie  Available Software klikamy na Add:



w kolejnym oknie dodajemy w odpowiednie pola:


Name: ADT PluginLocation: https://dl-ssl.google.com/android/eclipse/


po dodaniu klikamy na OK

Powinniśmy w głównym oknie zobaczyć: Developer Tools. Zaznaczamy go, następnie klikamy Next. W następnym oknie również klikamy Next. Na koniec klikamy na Finish.




Teraz nastąpi integrowanie SDK z Eclipse. Ściągnie się co trzeba i zainstaluje.

Pojawi się ostrzeżenie klikamy OK:



Na koniec klikamy na Yes, po czym nastąpi restart Eclipse.

Wracamy do okna Eclipse, wybieramy Window - Preferences. Wybieramy w nowym oknie Android, następnie Browse w kolejnym oknie wybieramy android-sdk-linux_x86, który znajduje się w naszym katalogu domowym, gdzie został ściągnięty i wypakowany (pkt.2). Zatwierdzamy wybór przez Apply, oraz OK.









4) Instalacja PhoneGrap:


Wchodzimy na http://phonegap.com/download/, wybieramy jedną z wersji. Zapisujemy ją w katalogu domowym a następnie wypakowujemy. Archiwum ma rozszerzenie .zip. Instalujemy poprzez apt-get install zip, unzip.  Następnie przechodzimy do katalogu domowego wywołujemy unzip nazwa_arch.zip. Zmieniamy nazwę katalogu na phonegap-phonegap-android.

Edytujemy plik nano ~/.profile, dodajemy do niego:


PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH" 


Na koniec:


export PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"









5) Uruchamiamy emulator Androida:



android list targets



Powinniśmy otrzymać mniej więcej taką odpowiedź:


Available Android targets:id: 1 or "android-3"     Name: Android 1.5     Type: Platform     API level: 3     Revision: 4     Skins: HVGA-L, QVGA-P, QVGA-L, HVGA-P, HVGA (default)id: 2 or "android-4"     Name: Android 1.6     Type: Platform     API level: 4     Revision: 3     Skins: WVGA800 (default), WVGA854, QVGA, HVGAid: 3 or "android-7"     Name: Android 2.1-update1     Type: Platform     API level: 7     Revision: 2     Skins: WVGA800 (default), WVGA854, WQVGA400, WQVGA432, QVGA, HVGAid: 4 or "android-8"     Name: Android 2.2     Type: Platform     API level: 8     Revision: 2     Skins: WVGA800 (default), WVGA854, WQVGA400, WQVGA432, QVGA, HVGAid: 5 or "android-10"     Name: Android 2.3.3     Type: Platform     API level: 10     Revision: 1     Skins: WVGA800 (default), WVGA854, WQVGA400, WQVGA432, QVGA, HVGAid: 6 or "android-11"     Name: Android 3.0     Type: Platform     API level: 11     Revision: 1     Skins: WXGA (default)


Stworzymy wirtualną maszynę z systemem Android:


android create avd -n myAnd -t android-10


W trakcie tworzenia na pytanie:

Do you wish to create a custom hardware profile, wciskamy enter.

Startujemy nasz emulator:


emulator -avd myAnd


Powinniśmy dostać taki widok:










6) Tworzymy strukturę katalogów:


W katalogu domowym tworzymy dwa katalogi (jeden w drugim): tweetme.

Przechodzimy do nich:


cd  tweetme/ tweetme


W tym ostatnim powinien znajdować się kod HTML, CSS, JavaScript naszej aplikacji.

Dla przykładu warto przeczytać instrukcję tworzenia prostej aplikacji, która współpracuje z Twitterem: http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/.

Tworzymy appke naszego projektu:

Będąc w strukturze tweetme wydajemy polecenie:


droidgap create



jeżeli otrzymamy błąd wykonujemy:



export PATH="$HOME/android-sdk-linux_x86/tools:$HOME/android-sdk-linux_x86/platform-tools:$HOME/phonegap-phonegap-android/bin:$PATH"

i ponownie droidgap...

Zostanie utworzony katalog tweetme_android z plikami potrzebnymi do budowy końcowej aplikacji.

cd ../tweetme_android/
          ls -l

powinniśmy dostać poniższy wynik:


cd ../tweetme_android/-rw-r--r-- 1 falko falko 2000 Mar  2 15:21 AndroidManifest.xmldrwxr-xr-x 3 falko falko 4096 Mar  2 15:21 assetsdrwxr-xr-x 2 falko falko 4096 Mar  2 15:21 bin-rw-r--r-- 1 falko falko  696 Mar  2 15:21 build.properties-rw-r--r-- 1 falko falko 2891 Mar  2 15:21 build.xml-rw-r--r-- 1 falko falko  363 Mar  2 15:21 default.propertiesdrwxr-xr-x 2 falko falko 4096 Mar  2 15:21 libs-rw-r--r-- 1 falko falko  425 Mar  2 15:21 local.properties-rw-r--r-- 1 falko falko 1159 Mar  2 15:21 proguard.cfgdrwxr-xr-x 7 falko falko 4096 Mar  2 15:21 resdrwxr-xr-x 3 falko falko 4096 Mar  2 15:21 src

następnie:


ls -l assets/www/


powinniśmy otrzymać:



-rw-r--r-- 1 falko falko   4233 Mar  2 15:21 index.htmldrwxr-xr-x 2 falko falko   4096 Mar  2 15:21 jqtouch-rw-r--r-- 1 falko falko  78601 Mar  2 15:21 jquery.js-rw-r--r-- 1 falko falko 107394 Mar  2 15:21 phonegap.0.9.4.jsdrwxr-xr-x 4 falko falko   4096 Mar  2 15:21 themes

edytujemy :


nano assets/www/index.html



pod title dodajemy:



będąc w ~/tweetme/tweetme_android wydajemy polecenie:


ant debug



powinniśmy otrzymać:



-package-debug-sign:
[apkbuilder] Creating tweetme-debug-unaligned.apk and signing it with a debug key...
debug:
     [echo] Running zip align on final apk...
     [echo] Debug Package: /home/falko/tweetme/tweetme_android/bin/tweetme-debug.apk
BUILD SUCCESSFUL
Total time: 33 seconds


dalej:

cd bin/
ls -l

otrzymamy:


drwxr-xr-x 3 falko falko   4096 Mar  2 15:39 classes
-rw-r--r-- 1 falko falko 137832 Mar  2 15:39 classes.dex
-rw-r--r-- 1 falko falko 166151 Mar  2 15:39 tweetme.ap_
-rw-r--r-- 1 falko falko 231533 Mar  2 15:40 tweetme-debug.apk
-rw-r--r-- 1 falko falko 231479 Mar  2 15:40 tweetme-debug-unaligned.apk

instalujemy paczkę na emulatorze:

adb -e install -r tweetme-debug.apk

Powinniśmy na emulatorze zobaczyć ikonkę naszej aplikacji:




Tak powinna wyglądać po uruchomieniu:





Brak komentarzy:

Prześlij komentarz