Oznaka: Ionic Framework

Ionic aplikacija sa SVG ikonama

Iako na https://ionicons.com/ postoji veliki broj odličnih ikona ipak je povremeno potrebno koristiti ikone koje su napravljene specijalno za određenu Ionic aplikaciju. SVG se nameće kao logično rješenje jer zadržava koncept korištenja <ion-icon name="icon-name"></ion-icon>.

Za korištenje SVG-a kao ikona nije bitno radi li se o Ionic 1, Ionic 2, Ionic 3 ili o Ionic 4 projektu. Važno je samo imati jednu mapu unutar koje će se držati SVG datoteke.

U ovom ću slučaju staviti nekoliko SVG datoteka unutar src/assets/imgs mape.

Korištenje SVG ikona umjesto Ionic ikona

I to je sve što je potrebno kako bi se SVG datoteke koristile kao ikone unutar <ion-icon> komponente.

Ipak, postoje dva načina kako postići isti efekt.

Prvi način je navođenje putanje do SVG datoteke unutar same <ion-icon> komponente na sljedeći način:

Dok je drugi način kreiranje CSS klase za svaku ikonu unutar app.scss

nakon čega je moguće koristiti ikone na standardni način:

U praksi to može izgledati ovako:

Korištenje SVG ikona umjesto Ionic ikona

Ionic Framework resursi

Iako sve blog postove koje sam objavio na temu Ionic Frameworka možete pronaći u kategoriji Razvoj odlučio sam objaviti ovaj blog post kako bi dodatno olakšao pronalazak i pregled svih blog postova vezanih upravo uz Ionic Framework.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći Ionic Framework resurs koji će vam biti od pomoći.

Ionic Framework 4 resursi

– Angular & Ionic 4 – PayPal mobilno plaćanje
– Ionic 4 & Angular Router – prosljeđivanje parametara
– Ionic 4 PWA – kreiranje aplikacije
– Uber API & Ionic 4 – Ride Request Button
– Ionic 4 Slides – prikaz galerije slika
– Otvaranje postavki mobilnog uređaja iz Ionic aplikacije
– Što je i čemu služi Ionic Native 4.x?
– Ionic geolociranje – dohvaćanje lokacije korisnika
– Kako saznati status napunjenosti baterije unutar Ionic aplikacije
– Ionic + OpenWeatherMap – prikaz vremenske prognoze
– Video pozadina u Ionic aplikaciji
– Uvod u Ionic 4
– Stigao je Ionic 4!

Ionic Framework 3 resursi

– Ionic Card IO – prikupljanje podataka s bankovne kartice
– Ionic 3 – uspostavljanje telefonskog poziva
– Ionic 3 Popover
– Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju
– Ionic Social Sharing – dijeljenje sadržaja mobilne aplikacije
– Ionic 3 Market
– Ionic 3 Skeleton Screen – stvaranje dojma brzine
– Ionic 3 – Barcode QR skener
– Ionic Range komponenta
– Ionic Insomnia – Nitko nije lud da spava
– Ionic Tabs App – Kako spriječiti da se HomePage učitava prije AppComponent
– Ionic 3 – Searchbar komponenta
– Ionic 3 – kako spriječiti slučajno gašenje aplikacije
– Ionic 3 – Google login/prijava
– Ionic 3 i WordPress REST API – prikaz blog postova
– Ionic 3 – prikaz informacija o SIM kartici
– Ionic 3 – Facebook prijava
– Ionic 3 – Spremanje i slanje podataka kada nema interneta
– Ionic 3 – podrška za vibraciju
– Ažuriranje Ionic Android aplikacije bez Google Storea
– Ionic 3 & Google Maps – prikaz rute između dvije lokacije
– Ionic 3 desktop aplikacija koristeći Electron
– Uvod u Ionic 3
– Ionic 3 – Korištenje, napredne, reaktivne forme
– Ionic 3 i Highcharts – prikaz grafikona
– Ionic 3 – select, search i autocomplete komponenta
– Ionic 3 – Slanje podataka na API
– Ionic 3 – Primjeri najbolje prakse
– Ionic 3 aplikacija za audio i video stream
– Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju
– Ionic 3 – Autocomplete polje za unos
– Čemu služi Ionic Native 3.x?
– Ionic 3 – Slanje SMS poruka
– Ionic 3 – Lazy Loading (lijeno učitavanje)
– Ionic 3 – Firebase registracija i prijava
– Ionic 3 – prikaz informacija o uređaju
– Ionic 3 – aplikacija koja govori
– Ionic 3 – Prikaz Google mape
– Kako ubrzati pokretanje Ionic 3 aplikacije?
– Ionic 3 – AdMob monetizacija
– Ionic 2 & 3 – SQLite servis
– Stigao je Ionic 3!

Ionic Framework 2 resursi

– Ionic 2 – SQLite za trajno spremanje podataka
– Ionic 2 – Dodavanje vanjskih skripti
– Ionic 2 – prosljeđivanje parametara između stranica
– Ionic 2 – Events, upravljanje događajima
– Google Drive REST API & Ionic 2 – prikaz podataka
– Ionic 2 – Podrška za višejezičnost
– Ionic 2 – Toast obavijesti
– Ionic 2 – Push notifikacije za Android
– Ionic 2 – provjera povezanosti s mrežom
– Ionic 2 – prikaz JSON-a sa API-ja
– Uvod u Ionic 2

Ionic Framework 1 resursi

– Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja
– Ionic aplikacija (ni)je povezana s internetom
– Pokretanje Ionic aplikacije na Android platformi
– Stvaranje novog Ionic projekta
– Ionic Framework – priprema razvojne okoline

Razno

– Kako Ionic aplikaciju ugraditi u postojeće web stranice
– Ionic & Facebook login/prijava
– Razvoj Ionic aplikacija za iOS
– Ionic & Google Firebase login/prijava – Error Code 10
– Ionic – kako odrediti minimalnu verziju Androida
– Ionic aplikacija sa SVG ikonama
– Ionic i Gravatar – prikaz slike profila
– Ionic – RxJS Observable Timer
– DevApp – uživo osvježavanje Ionic aplikacija na više uređaja
– Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije
– Ionic & Crosswalk – podrška za starije verzije Androida
– Ionic – automatska prijava u aplikaciju
– Priprema i objava Ionic aplikacije na Google Play Store
– Ikona i početni zaslon Ionic aplikacije
– Što je i čemu služi ngCordova unutar Ionic aplikacije?
– Što je Ionic View?
– Kako napraviti Apache Cordova Platform update

Ionic 3 – Primjeri najbolje prakse

Primjeri najbolje prakse koje ćete vidjeti u nastavku samo su preporuka kako nešto napraviti tj. još jedan od načina kako nešto napraviti. Ono što se meni čini logičnim ili ispravnim vama se možda neće činiti i to je u redu. Svatko ima neki svoj način. Ako imate nešto za dodati slobodno se javite u komentarima.

Ništa jQuery, samo Angular

Ako ste front-end developer onda sigurno znate što je i čemu služi jQuery i može biti vrlo izazovno koristiti neku jQuery “foru” kako bi riješili nešto u svojoj Ionic aplikaciji iako je Angular više nego sposoban napraviti isto ili još i više.

Probajte ne koristiti jQuery unutar Ionica jer ako ste to napravili jednom i sve je bilo u redu vrlo je vjerojatno da ćete to napraviti još koji put kako bi što brže riješili neki problem. S vremenom ćete si otežati testiranje (debugging) i može doći do problema koji tu zapravo nisu trebali niti postojati. Kada miješate “dva svijeta” rezultat često neće biti onakav kakvog ste očekivali.

Dizajn sučelja

Ne izmišljajte toplu vodu i ne komplicirajte si život raznim i nepotrebnim CSS klasama. Ionic pruža set vrlo korisnih i jednostavnih dodataka za dizajn sučelja vaše Ionic aplikacije.

Jasno je da ovi dodatci ne mogu pokriti sve scenarije s kojima se možete susresti, ali olakšavaju rad s onim najčešćim potrebama svakog Ionic developera.

Također, Ionic je nedavno predstavio Responsive Grid koji je vrlo blizak Bootstrapu. Iskoristite to.

Životni ciklus (Lifecycle Events)

Svaka stranica koju napravite u Ionic aplikaciji ima svoj životni ciklus. Od trenutka kada se stranica učita, preko u potpunosti učitane stranice pa sve do odlaska na drugu stranicu i onda taj ciklus kreće iz početka. Kako bi mogli reći Ionicu što želite da se izvrši u nekoj od tih faza koristite neke od mogućnosti upravljanja fazama izvršavanja životnog ciklusa.

  • ionViewDidLoad
  • ionViewWillEnter
  • ionViewDidEnter
  • ionViewWillLeave
  • ionViewDidLeave
  • ionViewWillUnload
  • ionViewCanEnter
  • ionViewCanLeave

Ne ponavljajte se i odvajajte kod

Prilikom razvoja aplikacije dobro isplanirajte sve funkcionalnosti i pokušajte odvojiti zajedničke dijelove koda u servise koje ćete koristiti u ostatku aplikacije tako da se ne ponavljate u svakoj komponenti.

Npr. ako želite koristiti SQLite postoje dva načina. Prvi način je da sve upite na bazu pozivate u svakoj komponenti u kojoj radite s lokalnom bazom, a drugi način je putem odvojenog servisa koji služi samo jednoj svrsi, a to je rad s lokalnom bazom na jednom mjestu. Drugi način je svakako jednostavniji za testiranje i kasnije uređivanje.

Vanjske skripte

Objavio sam jedan blog post o korištenju vanjskih skripti unutar Ionic aplikacije i kao što možete vidjeti u naredbama koristim prefiks --save. Koristite ga i vi jer ćete se inače poprilično iznenaditi kada pokrenete $ npm install i shvatite da aplikacije iz nekog nepoznatog razloga ne radi kako bi trebala tj. ne radi uopće.

Prefiks --save će sve reference na vanjske skripte/pakete spremiti u datoteku package.json tako da ste kasnije mirni. To je posebno korisno kada radite u timu.

I pokušajte ne koristiti isključivo CDN (content delivery network) skripte, pogotovo ako želite da vam aplikacija radi i izvan mreže (offline).

Ionic & Crosswalk – podrška za starije verzije Androida

Ionic Framework službeno podržava verzije Android platforme od 4.1 na više (iako će se i to s vremenom promijeniti) što znači da morate koristiti dodatna rješenja kako bi osigurali podršku za starije verzije Android platforme. Jedno od tih rješenja je i Crosswalk pa iako projekt više nije aktivan i dalje se može koristiti i tako osigurati potrebnu podršku vašoj Ionic aplikaciji.

Important: This project is not maintained anymore. The last Crosswalk release was Crosswalk 23. Read more in this announcement

Uvod

Zašto Ionic ukida podršku za starije verzije Androida?

Zato što se smanjuje njihov tržišni udio, a nije zanemarivo ni to da ih je sve teže testirati, drugačije se ponašaju na emulatoru u odnosu na pravi uređaj i jednostavno više nisu dovoljno dobre kako bi mogle pružiti pravo korisničko iskustvo koje današnji korisnici očekuju.

Stare verzije Androida lagano umiru na današnjem tržištu koje se vrlo brzo mijenja i nije isplativo više ulagati vrijeme za osiguravanje njihove podrške.

Today, we are updating our officially support Android version for Ionic 1 and 2. Going forward, we will only support Android 4.1 and above. We no longer support 4.0.x or anything pre 4. – Update: New Supported Android versions

Korištenje Crosswalka

Pokrenite novi Ionic projekt, dodajte Android platformu i na kraju instalirajte Crosswalk.

Ionic add Crosswalk

I to je sve što se tiče instalacije. Dalje nastavljate razvoj kao i do sada.

Dva APK-a (x86 i ARM)

Prilikom stvaranja APK-a primjetit ćete da na putanji NazivAplikacije\platforms\android\build\outputs\apk više nemate jedan APK (android-debug.apk) nego dva (android-armv7-debug.apk i android-x86-debug.apk).

Ionic dva APK-a

Kod pokretanja naredbe

Ionic sam prepoznaje koji uređaj je spojen na računalo tako da će instalirati samo onu verziju APK-a koju spojeni uređaj podržava.

Kako dva APK-a iste aplikacije objaviti na Google Play Store?

Na sreću Google podržava postavljanje dva APK-a iste aplikacije na Google Play Store. Korisnicima će prilikom instalacije aplikacije biti ponuđena verzija koja odgovara njihovim uređajima.

Google Play Store dva APK-a

Ako ne želite imati dva APK-a možete ih spojiti u jedan koristeći

unutar config.xml

Nedostatci Crosswalka

Iako će korištenje Crosswalka omogućiti vašoj Ionic aplikaciji podršku za starije verzije Androida kao i općenito ubrzati rad same aplikacije važno je znati da to dolazi uz određenu cijenu.

APK će narasti nekoliko puta kao što se može vidjeti iz sljedeće slike

Crosswalk APK

Verzija bez Crosswalka bila bi teška oko 5MB dok je sa Crosswalkom višestruko narasla na 30 – 35MB.

Ako ste nakon gore nevedenih nedostataka odlučili da ipak ne želite koristiti Crosswalk možete ga ukloniti koristeći sljedeću naredbu

Priprema i objava Ionic aplikacije na Google Play Store

Ako čitate ovaj blog post vjerojatno već imate gotovu Ionic aplikaciju koju još samo želite postaviti na Google Play Store. Na pravom ste mjestu. U ovom blog postu možete vidjeti koje je sve korake potrebno napraviti kako bi Ionic aplikacija bila spremna za objavu.

Ovaj blog post pokriva scenarij objave besplatne Android aplikacije tj. aplikacije koja ne sadržava in-app purchase ili neke druge specijalne uvjete, a Google će vašu aplikaciju odobriti kroz nekoliko sati ili najviše nekoliko dana.

Ovakve slične upute već postoje na službenim Ionic Framework web stranicama, ali one govore samo kako nešto napraviti, ali ne i zašto pa sam primjetio da se većina novih developera češe po glavi prateći sve te silne korake, a da pri tome ne znaju zašto nešto rade. Ovdje ćete dobiti širu sliku i imati mogućnost postaviti pitanje u slučaju da negdje zapnete.

Uvod

Priprema i objava aplikacije, neovisno o tome o kojoj platformi je riječ u osnovi sadržava iste korake:

  • Mehanizam za potpisivanje aplikacije – za Android se koristi keystore, a za iOS se koristi signing identity. Različiti nazivi, ali ista svrha, a to je omogućiti vam potvrdu da ste autor neke aplikacije. Ta će vam potvrda trebati svaki put kada budete htjeli napraviti nadogradnju (update) aplikacije na trgovini aplikacijama.
  • Mjesto za unos detalja o aplikaciji – čak i prije nego završite s izradom aplikacije za pretpostaviti je da već znate koje ćete joj ime dati, koja joj je namjena i vjerovatno već imate ostale promotivne materijale pomoću kojih ćete se potencijalnim korisnicima pokušati što više približiti kako bi preuzeli aplikaciju.
  • Izrada i optimizacija izvršne datoteke koja će se pokretati na mobilnom uređaju – za Android se ta izvršna datoteka tj. APK postavlja direktno na Google Play Store stranici dok se za iOS (IPA) obavlja koristeći Xcode.

Prije izrade produkcijske verzije Ionic aplikacije:

  • uklonite nepotrebne datoteke koje ste tijekom razvoja aplikacije koristili
  • uklonite nepotrebne pluginove i ostale dodatke
  • umanjite slike korištene u aplikaciji tj. kompresirajte ih
  • kreirajte ikonu aplikacije i početni zaslon

Priprema Android aplikacije

1.) Uklonite Cordova Console plugin

Ovaj vam plugin omogućava testiranje aplikacije tijekom izrade i nije vam potreban u produkciji. Uklonit ćete ga pomoću naredbe:

2.) Kreirajte privatni ključ s kojim ćete potpisati aplikaciju

Ionic Android Keytool

Bez privatnog ključa aplikaciju niti ne možete postaviti na Google Play Store i zbog toga je jasno koliko je ovaj korak bitan. Ovaj ćete ključ koristiti kroz cijeli životni vijek aplikacije tj. prilikom dodavanja nadogradnji (updatea). Kako bi kreirali privatni ključ koristit ćete keystore unutar naredbenog retka (command-line utility). Privatni ključ vrijedi 10 000 dana što bi trebalo biti više nego dovoljno da pokrije životni vijek aplikacije.

Ova će naredba stvoriti MojaAplikacija.keystore datoteku koju možete smjestiti bilo gdje na računalo i koju morate čuvati jer će vam trebati prilikom prvog potpisivanja aplikacije, ali i prilikom svake nadogradnje. Svaka verzija aplikacije mora biti potpisana sa istim privatnim ključem.

P.S. Ako dobijete poruku „ bash: keytool: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Program Files\Java\jdk1.8.0_111\bin“ pod Environment Variables – System variables – Path.

3.) Kreirajte nepotpisani APK

Ionic Android Build

Pomoću naredbe build izradite nepotpisani APK.

Novi APK ćete moći pronaći u platforms/android/build/outputs/apk/android-release-unsigned.apk . Kako bi si olakšali idući korak APK možete odmah preimenovati u NazivAplikacije.apk.

4.) Potpišite APK koristeći privatni ključ

Android Jarsigner

Potpisivanje APK-a obavlja se pomoću alata jarsigner. Kopirajte privatni ključ NazivAplikacije.keystore (morate znati lozinku privatnog ključa) i APK NazivAplikacije.apk u istu mapu te pokrenite naredbu:

Ako dobijete poruku o grešci ponovite prijašnje korake.

5.) Optimizacija APK-a

Ionic Android Zipalign

Ovo je zadnji korak u pripremi vašeg APK-a za objavu. Alat zipalign će optimizirati vaš APK tako da bolje iskorištava resurse mobilnog uređaja.

Pokrenite naredbu:

U ovom primjeru novi APK koji ćete postaviti na Google Play Store zove se NazivAplikacijeObjava.apk.

P.S. Ako dobijete poruku „ bash: zipalign: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Users\Tomislav\AppData\Local\Android\android-sdk\build-tools\24.0.3“ pod Environment Variables – System variables – Path.

Postavljanje APK-a na Google Play Store

1.) Registracija

Posjetite Google Play Developer Console i registrirajte se.

Google Play Developer Console

2.) Prijavite se u Google Developer Console i dodajte aplikaciju klikom na Add new application te navedite jezik i naziv aplikacije pa odaberite Upload APK

Google Play Developer Console: Add new application

3.) Dodajte APK

APK možete odmah poslati u produkciju, ali isto tako možete pokrenuti i alfta tj. beta test ako želite aplikaciju testirati među kontroliranom grupom osoba prije objave produkcijske verzije koja bi bila dostupna svima. Kada pokrenete alfa tj. beta test korisnike možete pozvati unosom njihove adresa elektroničke pošte ili im poslati URL na alfa tj. beta verziju aplikacije.

Google Play Developer Console: Upload apk

3.) Odaberite Store Listing kako bi dodali osnovne informacije o aplikaciji

Google Play Developer Console: Prepare Store Listing

4.) Unesite grafičke elemente

Google Play Developer Console: Prepare Store Listing Image

5.) Unesite ostale detalje i kliknite na Save draft u gornjem densom uglu ekrana kako bi sve ranije uneseno spremili

Google Play Developer Console Prepare Store Listing Categorization

6.) Ispunite kratak upitnik kako bi vaša aplikacija dobila pripadajuću ocjenu (Content Rating) te navedite koje države želite pokriti svojom aplikacijom te eventualno dodajte cijenu (Pricing & Distribution). Svaka stavka iz ovog izbornika mora biti zelena.

Google Play Developer Console

7.) Objavite aplikaciju

Kada ste ispunili sve navedeno, Ready to publish, spremni ste za objavu aplikacije Publish app.

Google Play Developer Console: Publish app

Nadogradnja (update)

Svaki sljedeći put kada želite nadograditi aplikaciju morate proći gore navedene korake od 1 do 5 osim koraka 2 jer keystore već imate.

Prije nego ponovite taj proces pobrinite se da u config.xml navedete novi version broj koji mora biti veći od onoga koji se u tom trenutku nalazi na Google Play Store.