Što je Ionic View?

Kada radite Ionic mobilne aplikacije i želite ih podijeliti s drugima tj. dobiti povratne informacije imate nekoliko mogućnosti:

  • Svaki put kada napravite neku promjenu svima slati mail koji sadržava .apk/.ipa
  • Čekati da osobe dođu kod vas kako bi mogli spojiti njihove mobilne uređaje na računalo i ručno instalirati .apk/.ipa
  • Napraviti Google Play Developer i/ili Apple App Developer korisnički račun, platiti članarinu i postaviti aplikaciju u beta test
  • Putem Ionic Viewa omogućiti svima da gotovo trenutno vide svaku promjenu koju ste napravili

Vjerujem da vam se najboljom čini zadnja opcija. Upravo to, pa i više od toga omogućava Ionic View kao što ćete vidjeti u nastavku.

1. Registracija

Ako ste se već registrirali prema uputama iz prethodnog blog posta onda ovaj korak možete preskočiti. U suprotnom unesite potrebne podatke i kliknite na Sign Up.

Ionic View registracija

2. Upload aplikacije

U direktoriju aplikacije pokrenite naredbu te unesite svoje korisničko ime i lozinku.

U slučaju da se prvi put prijavljujete, vidjet ćete sljedeće. Posebno obratite pažnju na liniju broj 11 u kojoj se nalazi ID aplikacije. Upravo ćete putem tog ID-a omogućiti određenim osobama da pregledavaju vašu aplikaciju.

3. Preuzimanje Ionic View aplikacije

Preuzmite Ionic View mobilnu aplikaciju. Aplikaciju možete pronaći na Apple App Store i Google Play Store.

Nakon instalacije aplikacije potrebno je samo prijaviti se sa svojim korisničkim podacima. Odaberite aplikaciju, kliknite na Download files i konačno View app.

Ionic View mobilna aplikacija

4. Dijeljenje aplikacije

4.1. Aplikaciju možete početi dijeliti pomoću naredbe

Nakon čega pozvanoj osobi stiže email

Ionic View email

Aplikaciju također možete vidjeti i na https://apps.ionic.io/apps

Ionic View popis aplikacija

U web sučelju možete vidjeti kome ste sve poslali pozivnice za pristup vašoj aplikaciji, vidjeti koje su osobe pozivnicu prihvatile i poslati nove pozivnice.

Ionic View detalji aplikacije

4.2. Aplikaciju možete podijeliti i pomoću ID-a na način da unesete ID aplikacije i učitate aplikaciju u sučelje Ionic Viewa.

Ionic View ID aplikacije

Zaključak

Ionic View je odličan i jednostavan način da podijelite svoju aplikaciju, posebno tijekom razvoja. Osim toga Ionic.io nudi još i Ionic Push, Ionic Analytics, Ionic Deploy i Ionic User. O tim funkcionalnostima se ima što za pisati tako da ih neću detaljnije obrađivati u ovom blog postu, ali planiram u nekom od sljedećih.

Pokretanje Ionic aplikacije na Android platformi

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.

Stvaranje novog Ionic projekta

Nakon što ste postavili razvojnu okolinu možete pokrenuti svoj prvi Ionic projekt.

Prije nego krenete u razvoj razmislite za što će služiti aplikacija, koja će joj biti svrha i kako ste ju zamislili. Prema tome možete odabrati predložak koji je najsličniji onome što želite napraviti kako biste si ubrzali posao. Npr. ako želite nešto jednostavnije možete iskoristiti tabs predložak ili ako u startu znate da ćete imati dosta opcija koje želite smjestiti u jedan veći izbornik onda možete početi s predloškom sidemenu.

Vrste predložaka (prva tri su osnovna):
blank – $ ionic start nazivAplikacije blank
tabs – $ ionic start nazivAplikacije tabs
sidemenu – $ ionic start nazivAplikacije sidemenu
maps – $ ionic start nazivAplikacije maps
tests – $ ionic start nazivAplikacije tests
complex-list – $ ionic start nazivAplikacije complex-list
salesforce – $ ionic start nazivAplikacije salesforce

Ionic Framework predlosci

Pokretanje projekta

Pokrenite novi projekt temeljen na tabs predlošku pomoću naredbe

i uskoro ćete vidjeti sljedeću poruku s korisnim informacijama o tome kako upravljati aplikacijom. O svemu tome će detaljnije biti riječi kasnije.

Osim toga biti će vam ponuđeno da napravite Ionic.io korisnički račun. Ne morate u ovom koraku, jer će vam ta opcija svaki put biti ponuđena, ali svakako napravite svoj Ionic.io korisnički račun.

Pregled aplikacije u web pregledniku

$ ionic serve --lab
$ ionic serve –lab

Pristupite direktoriju u kojemu se nalazi vaš projekt.

Već sada možete vidjeti kako vaša aplikacija izgleda u web pregledniku. To možete učiniti sljedeće dvije naredbe. Prva prikazuje jedno sučelje aplikacije koje je pogodno za debugiranje, a druga sa dodatkom --lab je uljepšani istovremeni prikaz iOS i Android sučelja.

Važno je za napomenuti da se puno ne pouzdate u ove preglede jer se mogu poprilično razlikovati od verzija koje ćete testirati i provjeravati na mobilnim uređajima. Taj dio ćemo obraditi kasnije. Za sada se držimo web preglednika.

Kada pokušate pokrenuti prvu naredbu dobit ćete poruku koja vam nudi na izbor s koje adrese želite da se vaša aplikacija prikaže u web pregledniku. Prva opcija omogućava vam da aplikaciju mogu pregledavati svi u vašoj mreži, dok ćete u drugoj opciji jedino vi na svojem računalu imati pristup aplikaciji.

Ova će vam se opcija prikazati samo jednom.

Uređivanje aplikacije

Pretpostavljam da sada već želite dodati nešto svoje u mobilnu aplikaciju. Za to će vam trebati text editor tj. IDE. Notepad++, Sublime Text, Atom, Visual Studio Code,…

Otvorite direktorij vaše aplikacije i spremni ste za uređivanje.

Sublime Text 2 - Ionic tabs app
Sublime Text 2

Sa lijeve strane vidite strukturu direktorija, a sa desne možete uređivati kod. Najvažniji vam je direktorij www i u njemu ćete provesti najviše vremena. Ovdje saznajte više o MVC strukturi Ionic aplikacija.

Zaključak

Sve ranije navedeno tiče se pregledavanja aplikacije u web pregledniku. Znači, ako pratite prethodne korake možete pokrenuti novi Ionic projekt, urediti ga u text editoru i prikazati u web pregledniku što je dobro i tako ćete inače raditi.

Ipak, konačni cilj izrade mobilne aplikacije je da se ista može poslati na mobilni uređaj i ondje pokrenuti. Kako to napraviti pokazat ću u sljedećem blog postu.

Ionic Framework – priprema razvojne okoline

Ako imate iskustva u razvoju za web (HTML, CSS i JavaScript) onda će vam tranzicija u razvoj hibridnih mobilnih aplikacija biti logičan korak i prirodna nadogradnja postojećih znanja i vještina.

Ionic aplikacije možete razvijati na bilo kojem OS-u (OS X, Linux ili Windows) tj. Android aplikacije možete razvijati na bilo kojem OS-u, ali za razvoj iOS aplikacija trebate Mac, OS X i Xcode.

Iako polako već stiže Ionic 2 koji je trenutno u beti za sada ću tutorijalima pokrivati isključivo Ionic osim ako ne navedem drugačije.

Ionic je front-end SDK tj. skup tehnologija koje omogućavaju jednostavan i brz razvoj hibridnih mobilnih aplikacija koristeći HTML(5), CSS(3) i AngularJS.

Što je sve potrebno instalirati?

Prije nego započete s izradom mobilnih aplikacija trebate postaviti razvojno okruženje. Potrebni su vam:

  • Node.js
  • Cordova
  • Ionic
  • Bower
  • Git Bash (opcionalno)
  • Android SDK
  • Xcode (kada razvijate iOS aplikacije na Macu)

Dobro upoznajte CLI (command line interface) koji će vam maksimalno olakšati razvoj. Putem CLI-a ćete raditi SPBD (start – preview – build – deploy).

0.) Pokrenite Command Prompt (cmd.exe) ili još bolje instalirajte i pokrenite Git Bash. Pomoću ovoga ćete pokretati sve naredbe.

1.) Preuzmite i instalirajte Node.js. Uz njega ćete dobiti i npm. Ako niste sigurni imate li već instaliran Node.js ili vas zanima koju verziju imate pokrenite naredbu:

2.) Ionic i Cordova mogu se istovremeno instalirati pomoću naredbe:

Kako bi bili sigurni da su Ionic i Cordova uspješno instalirani pokrenite naredbe:

3.) Za brže i jednostavnije upravljanje paketima instalirajte Bower. O ovome će više riječi biti kasnije.

I to je skoro sve.

Nakon što ste instalirati sve ranije navedeno spremni ste za izradu svoje prve Ionic aplikacije.

Aplikaciju u ovom trenutku možete pokrenuti na računalu u web pregledniku

i dodati joj Android platformu

kako bi kasnije mogli napraviti .apk koji ćete pakirati za slanje na mobilne uređaje, ali ju nećete moći pokrenuti na mobilnom uređaju

prije nego instalirate i Android SDK.

Više o ovome u sljedećem blog postu.

Kako napraviti Apache Cordova Platform update

Kada dovoljno dugo razvijate mobilne aplikacije koristeći Apache Cordova odnosno Ionic Framework pitanje je vremena kada će vam se Google javiti sa zanimljivim e-mailom uz dramatičan naslov “You are using a vulnerable version of Apache Cordova” s obavijesti o uklanjaju vaše aplikacije sa Play Storea ako ne izvršite potreban sigurnosni update.

Hello Google Play Developer,

Your app(s) listed at the end of this email utilize a version of Apache Cordova, an open-source mobile development framework, that contains one or more security vulnerabilities. If you have more than 20 affected apps in your account, please check the Developer Console for a full list.

Please migrate your app(s) to Apache Cordova v.4.1.1 or higher as soon as possible and increment the version number of the upgraded APK. Beginning May 9, 2016, Google Play will block publishing of any new apps or updates that use pre-4.1.1 versions of Apache Cordova.

The vulnerabilities were addressed in Apache Cordova 4.1.1. If you’re using a 3rd party library that bundles Apache Cordova, you’ll need to upgrade it to a version that bundles Apache Cordova 4.1.1 or later.

To confirm you’ve upgraded correctly, submit the updated version to the Developer Console and check back after five hours. If the app hasn’t been correctly upgraded, we will display a warning.

For information about the vulnerabilities, please see this Google Help Center article. For other technical questions, you can post to Stack Overflow and use the tag “android-security.”

While these specific issues may not affect every app that uses Apache Cordova, it’s best to stay up to date on all security patches. Apps with vulnerabilities that expose users to risk of compromise may be considered Dangerous Products in violation of the Content Policy and section 4.4 of the Developer Distribution Agreement.

Apps must also comply with the Developer Distribution Agreement and Content Policy. If you feel we have sent this warning in error, contact our policy support team through the Google Play Developer Help Center.

Regards,

The Google Play Team

Ipak, nema mjesta panici. Nadogradnju možete napraviti pokretanjem naredbe

I to je skoro to. Sada možete nadograditi i platforme za koje ste radili mobilnu aplikaciju. U ovom slučaju aplikacija je rađena za iOS i Android platformu pa se nakon pokretanja naredbe

može vidjeti da postoji nadogradnja za obje platforme:

  • android @ 4.1.1 could be updated to 5.1.0
  • ios @ 3.8.0 could be update to 4.0.1

Možete pokrenuti nadogradnju platformi

i očekivati prikaz obavijesti o uspješnoj nadogradnji

  • Android project updated with cordova-android@5.1.0
  • iOS project updated with cordova-ios@4.0.1

Dalje možete normalno raditi pripremu za postavljanje aplikacije na Google Play Store tj. App Store.