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.

Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja

Share Button

Kada korisnicima vaše Ionic mobilne aplikacije želite omogućiti da vam direktno iz nje pošalju e-mail bez potrebe za pokretanjem njihovog zadanog e-mail klijenta imate dvije mogućnosti. Složiti svoj API ili koristiti API koji vam nudi Mailgun. Mailgun omogućava slanje 10 000 e-mailova mjesečno potpuno besplatno, a detalje o implementaciji možete vidjeti u nastavku blog posta i u njihovoj dokumentaciji.

Podrazumijeva se da ste prije toga postavili razvojnu okolinu, pokrenuli novi Ionic projekt i dodali podršku za Android platformu.

Postavljanje kontrolera

Kontroler koji ćemo u ovom primjeru staviti u www/js/app.js

U kontroleru možete odmah definirati primatelja $scope.recipient = "tomislavstankovic1@gmail.com"; kako ga korisnici aplikacije ne bi morali svaki put unositi. Zapravo primatelj u ovom slučaju uopće ne mora biti vidljiv jer ionako je uvijek isti, ali za potrebe ovog blog posta ću ga ostaviti vidljivog u formi.

Kako bi kontroler uopće radio ono za što je namijenjen morate postaviti varijable mailgunUrl (za potrebe testiranja možete koristiti njihovu besplatnu sandbox domenu) i mailgunApiKey. Sve to dobijete odmah nakon registracije.

Forma za slanje e-maila

Sada možete napraviti i formu za slanje.

Forma sada izgleda ovako. Ovisno o potrebama možete određena polja prikazati ili ukloniti.

Ionic & Mailgun forma za slanje e-maila

Ako sada pokrenete aplikaciju u web pregledniku $ ionic serve ili na mobilnom uređaju $ ionic run android dobit ćete poruku o grešci.

Kako bi to zaobišli u index.html dodajte sljedeće, a možete dodati i CORS u Google Chrome.

Sada ste spremni za slanje prvog e-maila.

Ionic Framework & Mailgun API - Uspješno poslan email

I to je to. Provjerite svoj inbox.

Ionic Framework & MailgunAPI uspješno primljen e-mail-1

Zaključak

Ovo je samo jedan od mogućih scenarija za slanje elektroničke pošte unutar Ionic aplikacije. Prednost ovakvog načina slanja elektroničke pošte je ta što korisnici ne moraju napustiti vašu Ionic aplikaciju kako bi vam poslali e-mail.