Kako pokrenuti Ionic aplikaciju na Android platformi

Pokretanje Ionic aplikacije na Android platformi

Share Button

Nakon što ste postavili razvojnu okolinu i pokrenuli svoj prvi Ionic projekt u web pregledniku vrijeme je da vidite kako isti izgleda na emulatoru i na fizičkom mobilnom uređaju kojega ćete na računalo spojiti putem USB-a.

Potrebno je instalirati i postaviti sljedeće:

Java Development Kit (JDK)

Preuzmite i instalirajte Java Development Kit (JDK) 7 ili noviji. Odaberite Accept License Agreement, s obzirom da ovdje radimo na Windows OS-u odaberite jednu od dvije instalacije vezane uz Windows OS ovisno o tome imate li 32 ili 64 bitnu verziju.

Java Development Kit (JDK)  7 za Ionic

Nakon uspješne instalacije trebate napraviti JAVA_HOME varijablu okruženja (environment variable) i u nju dodati putanju do JDK-a.

Pratite putanju Control PanelSystemAdvanced system settingsAdvancedEnvironment VariablesSystem variablesNew

JAVA_HOME Environment Variable za Ionic

Android SDK

Ovdje možete preuzeti Android SDK. Biti će vam ponuđeno odabrati između Android Studio (kompletan IDE koji u sebi sadržava i SDK Tools) i Stand-alone SDK Tools. Odaberite drugu opciju i dalje pratite upute.

Stand-alone SDK Tools za Ionic Framework

Nakon instalacije možete odmah pokrenuti SDK Manager.

Android SDK Manager

Možete odmah kliknuti na Install packages… Preuzimanje i instalacija će potrajati tako da budite strpljivi.

Android SDK Manager Options

Sada trebate u PATH varijablu okruženja dodati putanje do dva direktorija:
C:\Users\Tomislav\AppData\Local\Android\android-sdk\platform-tools
C:\Users\Tomislav\AppData\Local\Android\android-sdk\tools

Path varijabla okruženja za Android
PATH varijablu ćete naći na Control PanelSystemAdvanced system settingsAdvancedEnvironment VariablesUser variables for Tomislav – PATH (Edit)

PATH varijabla sada treba izgledati kao na slici

Path varijabla okruzenja za Android

Apache Ant

Apache Ant možete preuzeti ovdje. Preuzmite jednu od .zip verzija, spremite istu na svoje računalo i raspakirajte. Sada i putanju do direktorija C:\apache-ant-1.9.6\bin trebate dodati u PATH varijablu okruženja.

Dodajte Android platformu u svoj Ionic projekt

U mapi s projekom pokrenite sljedeće naredbe:

Nakon toga ćete vidjeti sljedeći sadržaj. Obratite pažnju na liniju 13 gdje piše Android target: android-23. Ako pogledate u ranije otvorenom Android SDK Manageru u startu vam je bilo ponuđeno da instalirate Android 6.0 (API 23). To znači da se API verzije slažu i da je sve u redu.

Struktura direktorija vašeg projekta sada je bogatija za dva direktorija platforms i resources.

Ionic Android Platform

Prikaz aplikacije na Android mobilnom uređaju

Spojite mobilni uređaj na USB i pokrenite naredbu:

Prije nego to napravite instalirajte drivere za mobilni uređaj koji ćete koristiti za testiranje i također na tom mobilnom uređaju uključite “Ispravljanje pogrešaka USB-a“.

Kada vidite poruku

znači da ste uspješno instalirali .apk na svoj mobilni uređaj.

Ionic plikacija na Android mobilnom uređaju

Prikaz aplikacije na Android emulatoru

Emulator pokrećete tako da u direktoriju projekta pokrenite naredbu:

Međutim, prije nego pokrenete naredbu trebate napraviti svoj virtualni uređaj.

Pokrenite Android AVD Manager, koji se nalazi u direktoriju C:\Users\Tomislav\AppData\Local\Android\android-sdk, i napraviti svoj virtualni uređaj.

Android AVD Manager Ionic

Ako imate AMD procesor jako je važno da prilikom stvaranja virtualnog uređaja za CPU/ABI odaberete ARM (armeabi-v7a) jer inače ćete umjesto emulatora dobiti poruku o grešci, a to vas može odvesti prema traženju rješenja u pogrešnom smjeru.

Znači ne morate instalirati Intel HAXM niti ugasiti Hyper-V na Windows 10 OS-u, nego je dovoljno samo za CPU/ABI umjesto Intel Atom (x86_64) staviti ARM (armeabi-v7a).

Krajnji rezultat pokretanja emulatora izgleda ovako

Pokrenut Android emulator

Ako vam je sve ovo previše “čačkanja” oko emulatora, shvatite da je emulator prespor ili i dalje dobijate poruku o grešci i ne želite više “guglati” bacite oko na Genymotion. Trebate se registrirati kako bi preuzeli besplatnu instalaciju.

Nakon što isprobate standardni emulator i vidite koliko zna biti spor i neupotrebljiv vjerujem da ćete se prebaciti na Genymotion.

Zaključak

Sada ste spremni za pravi posao i slobodno možete krenuti na put pretvaranja ideje u gotov proizvod. Prođite kroz CSS i JavaScript komponente, ubacujte ih redom u aplikaciju i gledajte kako se ponašaju u web pregledniku, emulatoru i na mobilnom uređaju. S vremenom i iskustvom ćete već znati što gdje (ne)prolazi i kako se ponaša.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Jedna misao o “Pokretanje Ionic aplikacije na Android platformi”

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *