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 Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Share Button

Kada napravite promjenu u svojoj Ionic aplikaciji i želite tu promjenu poslati svim korisnicima jedino što možete napraviti je pripremiti novu verziju aplikacije, poslati ju na Google Play Store ili Apple Store i čekati da oni odobre novu verziju koja će tek tada stići korisnicima. To se može poprilično odužiti i tu ne možete ništa napraviti osim čekati.

U slučajevima kada su te promjene tek kozmetičke bilo bi dobro imati na raspolaganju brži i jednostavniji način slanja ažurirane verzije aplikacije korisnicima. Taj način zove se Ionic Deploy.

Uvod

Ionic Deploy predstavljen je 2015. godine, a omogućava brži i jednostavniji način ažuriranja aplikacije. Nažalost te su promjene ograničene samo na one kozmetičke vezane uz HTML, JS i CSS što znači da u slučaju dodavanja novih Ionic Native pluginova trebate ići standardnim, Google Play Store ili Apple Store, putem.

Live deployments let you publish web assets such as HTML, JS, and CSS directly to your users without going through the app store. – Ionic Services Deploy

Kako bi Ionic Deploy mogao raditi potrebne su četiri stvari:

  • Ionic aplikacija sa svojim APP ID-em
  • Korisnički račun na Ionic Cloud
  • Povezati Ionic Cloud sa Ionic aplikacijom
  • Kreirati Security Profiles

Priprema

Pokrenite novi Ionic projekt i odmah dodajte Android platformu. (P.S. U ovom blog postu radim samo sa Android platformom)

Sada instalirajte podršku za Cloud

i dodajte u app.module.ts.

APP_ID iz sljedećeg koraka kopirajte ovdje.

Nakon toga na adresi https://apps.ionic.io/ registrirajte Ionic Cloud korisnički račun, ako već niste. Nakon prijave sučelje će biti prazno.

Ionic Cloud

Sada ćete poslati Ionic aplikaciju u Ionic Cloud sučelje. To se radi pomoću naredbe

ionic io init

Ako sada pogledate Ionic Cloud sučelje vidjet ćete svoju Ionic aplikaciju, a ispod naziva aplikacije nalazi se APP ID.

Ionic Cloud new app

I još je potrebno kreirati Security Profile. To radite klikom na kotačić s desne strane pored naziva aplikacije unutar Ionic Cloud sučelja.

Ionic Security Profile

Nakon kreiranja produkcijskog certifikata potrebno ga je postaviti. U slučaju Androida to se radi korištenjem keystorea. Ako ste ikada radili postavljanje aplikacije na Google Play Store onda ste već upoznati s postupkom izrade keystorea.

Jako je važnu da ovu datoteku i lozinku zapamtite jer će vam trebati za sve kasnije nadogradnje aplikacije.

Datoteku NazivAplikacije.keystore prebacite na radnu površinu (Desktop) kako bi vam bila lako dostupna. Klikom na Edit u gornjoj slici dobit ćete sljedeće

Ionic Security Profile Android

Uvezite keystore datoteku i unesite njezinu lozinku. I to je to!

Postavljanje funkcionalnosti

Sada kreće prava stvar i napokon možete početi s postavljanjam i korištenjem Ionic Deploy funkcionalnosti. Instalirajte Ionic Deploy plugin.

Ekran aplikacije sadržavat će samo jedan gumb za provjeru ažuriranja. Također, ovo se može i automatizirati unutar npr. app.component.ts na način da se provjera automatski vrši prilikom pokretanja aplikacije i bez potrebe za klikom na gumb, ali za potrebu ovog primjera provjera ide klikom na gumb.

Funkcionalnost se sastoji od jedne funkcije checkIonicDeployUpdate() koja vrši preuzimanje ažuriranja this._deploy.download(), otpakiravanje ažuriranja this._deploy.extract() i učitavanje ažuriranja this._deploy.load().

Aplikacija je u ovom trenutku spremna za korištenje i slobodno ju možete ponuditi korisnicima. Ako kliknu na gumb za provjeru ažuriranja korisnici će dobiti sljedeće

Ionic3 Deploy App

Korištenje funkcionalnosti

Pretpostavimo da su korisnici instalirati vašu Ionic aplikaciju i da ju bez problema koriste. U međuvremenu odlučite npr. promijeniti pozadinsku boju početnog ekrana i boju gumba za provjeru ažuriranja.

Slanje nove verzije aplikacije na Ionic Cloud vrši se pomoću naredbe

Ionic Deploy Production

I odmah na adresi https://apps.ionic.io/ možete vidjeti novu verziju aplikacije.

Ionic Deploy Active

Ako sada pokrenete aplikaciju i kliknete na gumb za provjeru nadogradnji dobit ćete novu verziju aplikacije.

Ionic3 Deploy App Active

Zaključak

Osobno, do sada nisam u produkciji ozbiljnije koristio alate vezane uz Ionic Cloud kao što su Auth, Push i Package upravo zbog toga što sam se bojao ovakvih poruka:

Ionic Auth

Ipak, Ionic Deploy je vrlo praktičan način ažuriranja Ionic aplikacija, ako ništa drugo onda barem za vrijeme razvoja i testiranja.

Amazon Kindle Paperwhite III SP

Share Button

Nemam običaj pisati recenzije za hardver, ali mislim da je sada pravo vrijeme da to povremeno počnem raditi pa će tako ovaj blog post biti kraći osvrt na nedavno kupljeni Amazon Kindle Paperwhite 2015 SP. U Hrvatskoj se može nabaviti za cca 1.300,00kn. Više o uređaju u nastavku.

Uvod

Amazon Kindle Paperwhite 2015 screenshot

Do sada sam pročitao najviše pravih, fizičkih, papirnatih, knjiga. Nakon toga slijede e-knjige (u 99% slučajeva PDF). To će se sada sigurno promijeniti jer će mi Kindle postati primarnim izvorom knjiga pod uvjetom da u istom trenutku i pod istim uvjetima ne mogu nabaviti pravu, papirnatu, knjigu.

Iako najviše volim uzeti pravu knjigu jer ona mi ipak daje najbolji osjećaj, ponekada to nije praktično i nedavno je došlo pravo vrijeme za svijet e-knjiga. Čitao sam ih i do sada u PDF formatu, na PC-u, smartphoneu i tabletu, ali to nije to. Na mobitelu je to mučenje u pokretu, na tabletu su problemi s vidljivošću u polumraku ili na suncu, a na PC-u sam vezan uz jedno mjesto, a kada čitam najčešće se želim maknuti od PC-a.

Fizičke knjige

Kao što sam već rekao, do sada sam pročitao najviše pravih, paprinatih, knjiga. Neko vrijeme sam ih čak i kupovao jer sam htio imati svoju kolekciju. S vremenom sam shvatio da to i nema puno smisla jer mi samo zauzimaju prostor, moram ih povremeno čistiti od prašine i većini njih se nikada više ne vratim.

Članstvo u gradskoj knjižnici s druge se strane čini kao bolja opcija jer za cijenu jedne kupljene knjige mogu cijelu godinu čitati sve što želim pod uvjetom da je dostupno. Tu onda dolazimo do problema nedostupnosti knjiga koje bi htio čitati jer to su većinom strana izdanja.

Nude mi se dva izbora. Naručiti knjigu direktno od izdavača i čekati da mi stigne na kućnu adresu ili se prebaciti na e-knjige i čitati što želim i kada želim, često i uz puno nižu cijenu. U drugom slučaju, ako mi se neka knjiga posebno svidi onda mogu kupiti i papirnato izdanje za privatnu kolekciju.

Kindle Paperwhite III

Stvar je izuzetno praktična – lagan je, lakši od prosječne knjige, može se čitati u gotovo bilo kojem položaju bez potrebe da se razmišlja o fizičkoj “brizi” za knjigu, savinutosti papira, kutu gledanja i slično. Kupnja i download s Amazonovog weba vrlo su praktični, a jako je zgodna i fora s obilježavanjem i automatskim “šeranjem” najboljih odlomaka na društvenim mrežama. – Kindle Paperwhite – prvi (osobni) dojmovi, Oleg Maštruko

Zašto baš Kindle? – Prije kupnje nekoliko sam dana čitao, gledao i slušao razne recenzije i ispostavilo se da mi Amazon Kindle najbolje odgovara. Amazonov eko sustav i kvaliteta softvera dosta su mi bili važni prilikom odabira. Poznati su mi i drugi modeli kao npr. Barnes & Noble NOOK ili Kobo, ali mi je Kindle prva poveznica na e-knjige tako da nisam niti gledao dalje od Amazona. Samo je bilo pitanje koji ću model uzeti.

  • Kindle – Najpovoljniji uređaj. Nije mi bio u opciji jer nema pozadinsko osvjetljenje.
  • Kindle Paperwhite – Mislim da je ovo najbolji izbor za svakoga tko ulazi u svijet e-knjiga.
  • Kindle Voyage – Isti kao i Paperwhite uz dodatak tipki na rubovima uređaja za jednostavnije listanje i bolje osvjetljenje.
  • Kindle Oasis– Najjači uređaj u ponudi. Logičan izbor na svakoga tko je duže vrijeme sa zadovoljstvom koristio neki od povoljnijih uređaja. Također ciljam na ovaj model kada zaključim da je vrijeme za promjenu.

Amazon Kindle usporedba

Dobre strane

  • Trenutna dostupnost – U bilo kojem trenutku mogu doći do željene knjige. Bilo to u nedjelju poslije podne, za Badnjak, u vlaku ili autu,…, znači bilo kada i bilo gdje.
  • Trajanje baterije – Označava se u tjednima jer uređaj ne troši bateriju za vrijeme prikaza stranice nego samo za vrijeme listanja.
  • Osvjetljenje – Mogu sjediti predvečer u dvorištu i čitati knjigu bez potrebe za dodatnim vanjskim izvorom svjetla. Isto tako mogu to raditi u podne pod najvećim suncem, iako je ovo malo vjerojatno, i opet neću imati nikakvih problema sa vidljivošću.
  • Društvenost – Svoj GoodReads račun mogu povezati sa Kindleom tako da direktno s uređaja upravljam računom, čitam i dajem ocjene i recenzije, pratim napredak svojih prijatelja i objavljujem vlastiti.
  • Interaktivnost – E-knjiga se može prilagoditi mojim trenutnim potrebama, a to znači upravljanje fontom, veličinom slova, marginama i mnoštvom drugih opcija. S druge strane, označavanjem neke riječi otvara se riječnik s detaljnim opisom odabranog pojma. Uz to postoji i prevoditelj na nekoliko jezika pa niti knjige na drugim jezicima osim hrvatskog i engleskog ne predstavljaju problem.
  • Slike zaslona – Postoji i mogućnost hvatanja slike zaslona (screenshot) koja se onda može podijeliti na npr. društvenim mrežama. Ipak, to se ne može učiniti direktno na Kindle uređaju nego je potrebno isti spojiti na PC i preuzeti screenshot.
  • Podrška za PDF – Osim Kindle knjige na uređaju se može čitati i PDF format na način da bilo koji PDF sa PC-a pošaljem na svoj Amazon Kindle e-mail čime mi ta knjiga postaje dostupna na svim mojim uređajima.

Malo manje dobre strane

  • Podrška za PDF – Ovo se nalazi i kao prednost, ali i kao nedostatak jer iskustvo čitanja nije najsretnije riješeno. Potrebna je određena doza volje i strpljenja kako bi se čitanje nekog dužeg PDF-a privelo kraju.
  • Nejednako osvjetljenje na dnu ekrana – Na nekim uređajima se u određenim svjetlosnim uvjetima može primjetiti nejednako osvjetljenje na dnu ekrana. To se može riješiti pojačavanjem ili smanjivanjem osvjetljenja zaslona.
  • Osjećaj napretka – Iako Kindle nudi različite mogućnosti prikaza napretka čitanja knjige ipak ništa ne može zamijeniti držanje prave knjige u rukama gdje automatski po osjećaju znam koliko još imam do kraja.

Zaključak

Amazon Kindle Paperwhite 2015
Izvor: http://www.shinyshiny.tv/2015/06/review-kindle-paperwhite-2015.html

Amazon Kindle Paperwhite otvorio mi je neki novi svijet koji mi se jako sviđa. Ovo ne znači da u potpunosti odustajem od čitanja “pravih” knjiga nego da si želim omogućiti više izbora kad već postoji tehnologija koja mi to omogućava.

Ionic 3 aplikacija za audio i video stream

Share Button

S obzirom da je sredina ljeta i da su godišnji odmori u punom jeku što znači i manje zanimanja za ovakve teme danas idemo na jednu poprilično jednostavnu, a istovremeno korisnu.

Ako se odlučite raditi jednostavnu audio/video stram aplikaciju to možete učiniti pomoću Ionica i njegovog Ionic Native plugina pod nazivom Streaming Media.

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

Sada možemo instalirati Streaming Media plugin

I naravno, kao što je slučaj sa bilo kojim drugim Ionic Native pluginom, trebamo ga dodati u app.module.ts

Implementacija

Kreirat ćemo jednostavan ekran koji služi za prikaz kontrola za audio/video stream. Ovdje nema ništa posebno osim dva gumba koji služe za pokretanje audio tj. video streama.

Ionic 3 aplikacija za audio i video stream

Funkcionalnost se nalazi unutar unutar home.ts.

Pokretanjem startVideo() dobijemo sljedeće

Ionic 3 aplikacija za audio i video stream

Pokretanjem startAudio() dobijemo sljedeće ovisno o tome jesmo li odabrali bgImage ili bgColor.

Ionic 3 aplikacija za audio i video stream

Ovdje imamo dvije funkcije startVideo() i startAudio() od kojih se svaka sastoji od objekta options.
Objekt options se može sastojati od sljedećih mogućnosti iz kojih je moguće vidjeti koliko je zapravo ovaj plugin ograničenim mogućnostima.

Zaključak

I to je to! Napravili ste svoju prvu Ionic audio/video stream mobilnu aplikaciju. Još jednom napominjem, u slučaju da trebate kompleksnije rješenje možda je bolje da tražite dalje jer Streaming Media plugin služi za izradu jednostavnih audio/video stream aplikacija.

Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju

Share Button

Puno je stvari koje vašu Ionic aplikaciju mogu učiniti popularnom – odlično korisničko iskustvo, brzina, da je aplikacija korisniku zapravo korisna i dr. Ipak, da bi potencijalni korisnik uopće došao u priliku preuzeti i isprobati vašu Ionic aplikaciju treba ju pronaći na Google Play Store ili Apple Store. S obzirom da ondje postoje milijuni aplikacija koje se pomoću ocjena bore za svoj dio prostora pri vrhu popisa aplikacija jasno je zašto su ocjene važne.

Kada je korisnik zadovoljan najčešće ga uopće nećete čuti jer će koristiti aplikaciju i neće mu vjerojatno pasti na pamet dati vam ocjenu dok u slučaju da korisnik nije zadovoljan možete očekivati brze i konkretne povratne informacije bilo to u sklopu trgovine aplikacijama ili na nekom forumu ili blogu. Sada kada to znamo potrebno je pronaći način da se korisnici s pozitivnim iskustvom aktiviraju kako bi to svoje iskustvo podijelili s drugima.

Ionic3 - App Rate IonicNative U nastavku ćemo koristiti Ionic Native plugin – App Rate pomoću kojega se na jednostavan način može podsjetiti korisnika da može dati ocjenu.

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

Sada možemo instalirati App Rate

I kao što je slučaj sa bilo kojim drugim Ionic Native pluginom trebamo ga dodati u app.module.ts

P.S. Ovdje obavezno uvezite i HttpModule jer ćete inače dobiti grešku i bijeli ekran.

Plugin se već sada može koristiti, ali mi ćemo ovdje stvar malo zakomplicirati kako bi nam kasnije bilo jednostavnije. Naime, napravit ćemo servis koji kasnije možemo na razne načine koristiti u bilo kojem dijelu aplikacije.

App Rate servis

Servis kreiramo naredbom

nakon čega na putanji /app/providers/rate-service/rate-service.ts dobijemo RateService.

Da bi naša aplikacija znala gdje uputiti korisnika kako bi dao ocjenu potreban je

  • App ID za iOS – to je broj koji dobijete kada registrirate aplikaciju na iTunes Connect.
  • package name za Android – to je zapravo id="com.ionicframework.ionic3apprate"

Sve zajedno to izgleda ovako:

Implementacija servisa

Sada ćemo ranije kreirani servis implementirati u home.ts na način da se funkcija za ocjenu aplikacije automatski pozove kada se pokrene aplikacija.

Ionic 3 - App Rate Dialog

Funkcionalnost je zapravo dosta jednostavna, a izgleda ovako

Dalje zapravo sve radimo koristeći

Treba imati na umu da će korisnik obavijest o ocjeni vidjeti svaki put kada se taj dio koda pokrene. Zato ga treba pažljivo koristiti jer naravno da ne želimo korisniku smetati s tom porukom svaki put kada pokrene aplikaciju.

Zato postoji bolja opcija.

Možemo proslijediti false na sljedeći način this._appRate.promptForRating(false); što će reći našoj aplikaciji da ne pokreće taj dio koda dok određeni uvjet nije zadovoljen. Taj uvjet zadajemo u našem servisu RateService .

Ostale, naprednije, mogućnosti možete pronaći u službenoj dokumentaciji.

Zaključak

Vrlo je teško motivirati korisnike neke aplikacije da istoj daju ocjenu. Upravo zato postoji ovaj plugin kako bi olakšao developerima upravljanje scenarijem u kojemu oni sami mogu potaknuti korisnike tj. podsjetiti ih na to.

Naravno da s ovom funkcionalnošću treba biti pažljiv da se ne postigne kontraefekt.