Ionic Framework resursi

Share Button

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 vam 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 resurs koji će vam biti od pomoći.

Ionic 3

1.) Stigao je Ionic 3!
2.) Ionic 2 & 3 – SQLite servis
3.) Ionic 3 – AdMob monetizacija
4.) Kako ubrzati pokretanje Ionic 3 aplikacije?
5.) Ionic 3 – Prikaz Google mape
6.) Ionic 3 – aplikacija koja govori
7.) Ionic 3 – prikaz informacija o uređaju
8.) Ionic 3 – Firebase registracija i prijava
9.) Ionic 3 – Primjeri najbolje prakse
10.) Ionic 3 – Slanje podataka na API
11.) Ionic 3 – Lazy Loading (lijeno učitavanje)
12.) Ionic 3 – Slanje SMS poruka
13.) Čemu služi Ionic Native 3.x?
14.) Ionic 3 – Autocomplete polje za unos
15.) Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju
16.) Ionic 3 aplikacija za audio i video stream
17.) Ionic 3 – select, search i autocomplete komponenta
18.) Ionic 3 i Highcharts – prikaz grafikona
19.) Ionic 3 – Korištenje, napredne, reaktivne forme
20.) Uvod u Ionic 3

Ionic 2

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

Ionic 1

1.) Kako napraviti Apache Cordova Platform update
2.) Ionic Framework – priprema razvojne okoline
3.) Stvaranje novog Ionic projekta
4.) Pokretanje Ionic aplikacije na Android platformi
5.) Što je i čemu služi ngCordova unutar Ionic aplikacije?
6.) Ionic aplikacija (ni)je povezana s internetom
7.) Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja

Razno

1.) Što je Ionic View?
2.) Ikona i početni zaslon Ionic aplikacije
3.) Kako Ionic aplikaciju ugraditi u postojeće web stranice
4.) Priprema i objava Ionic aplikacije na Google Play Store
5.) Ionic – automatska prijava u aplikaciju
6.) Ionic & Crosswalk – podrška za starije verzije Androida
7.) Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Ionic 3 – Primjeri najbolje prakse

Share Button

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

Share Button

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

Share Button

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 VariablesSystem variablesPath.

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 VariablesSystem variablesPath.

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.

Kako Ionic aplikaciju ugraditi u postojeće web stranice

Share Button

Na službenim web stranicama Ionic Frameworka navedena je sljedeća definicija

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

S obzirom da Ionic aplikacija u svojoj osnovi nije ništa više od obične web stranice nameće se pitanje – može li se Ionic aplikacija prikazati kao web aplikacija ili ugraditi u postojeće web stranice? Može.

Ionic1 & Ionic2

Neovisno o tome radi li se o Ionic1 ili Ionic2 aplikaciji sve što trebate je uzeti www mapu i smjestiti ju na svoj web server. Npr. u ovom slučaju ja sam www mapu putem FTP-a stavio unutar /public_html/tomislavstankovic.com/ . I to je to.

Ipak, ako koristite ngCordova pluginove za Ionic1 ili Ionic Native za Ionic2 trebate znati da ti dodaci neće raditi u web pregledniku.

Cordova plugins do not work while developing in your browser, because each plugin accesses a specific API (such as camera, microphone, accelerometer) which is not available in your browser. Additionally, some plugins don’t work in the emulator, such as the Camera plugin, so development on your physical device is required.

Jednom kada ste www mapu postavili na web server aplikaciju možete prikazati na dva načina:

1) Direktno putem URL-a na http://example.com/www/

Ionic aplikacija u web pregledniku

2.) Na web stranici unutar <iframe> taga

Ionic aplikacija iframe


Inače, inspiracija za ovaj blog post stigla je sa StackOverflowa.