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.
Nakon uspješne instalacije trebate napraviti JAVA_HOME varijablu okruženja (environment variable) i u nju dodati putanju do JDK-a.
Pratite putanju Control Panel – System – Advanced system settings – Advanced – Environment Variables – System variables – New
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.
Nakon instalacije možete odmah pokrenuti SDK Manager.
Možete odmah kliknuti na Install packages… Preuzimanje i instalacija će potrajati tako da budite strpljivi.
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 varijablu ćete naći na Control Panel – System – Advanced system settings – Advanced – Environment Variables – User variables for Tomislav – PATH (Edit)
PATH varijabla sada treba izgledati kao na slici
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:
|
1 2 |
$ ionic platform add android $ ionic build android |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Updated the hooks directory to have execute permissions Downloading Default Ionic Resource Downloding: httos://github.com/driftyco/ionic-default-resources/archive/master.zip [=============================] 100% 0.0s Done adding default Ionic resources Adding icons for platform: android Adding android project... Creating Cordova project for the Android platform: Path: platforms\android Package: com.ionicframework.primjeraplikacije514278 Name: primjerAplikacije Activity: MAinActivity Android target: android-23 Android project created with cordova-android@5.1.0 Running ommand: "C:\Program Files\nodejs\node.exe" C:\Users\Tomislav\Desktop\pr imjerAplikacije\hooks\after_prepare\010_add_platform_class.js C:/Users/Tomislav/ Desktop/primjerAplikacije add to body class: platform-android Installing "cordova-plugin-console" for android Installing "cordova-plugin-device" for android Installing "cordova-plugin-splashscreen" for android Installing "cordova-plugin-statusbar" for android Installing "cordova-plugin-whitelist" for android ... |
Struktura direktorija vašeg projekta sada je bogatija za dva direktorija platforms i resources.
Prikaz aplikacije na Android mobilnom uređaju
Spojite mobilni uređaj na USB i pokrenite naredbu:
|
1 |
$ ionic run android |
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
|
1 |
BUILD SUCCESSUFUL |
znači da ste uspješno instalirali .apk na svoj mobilni uređaj.
Prikaz aplikacije na Android emulatoru
Emulator pokrećete tako da u direktoriju projekta pokrenite naredbu:
|
1 |
$ ionic emulate |
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.
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.
|
1 2 3 4 5 |
Waiting for emulator... emulator: WARNING: Increasing RAM size to 1GB emulator: ERROR: x86 64 emulation currently requires hardware acceleration! Please ensure Intel HAXM is properly installed and usable. CPU acceleration status: HAX kernel module is not installed! |
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
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.
brate veze nemas