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

Ionic 3 – Autocomplete polje za unos

Share Button

Iako Ionic raspolaže s dosta različitih i korisnih komponenti još uvijek među njima nećete pronaći autocomplete komponentu i prisiljeni ste koristiti neko vanjsko rješenje. U velikom broju slučajeva to je nekakav Angular NPM modul, kao što će biti slučaj i u ovom blog postu.

Što je autocomplete (samodovršavanje)?

To je funkcionalnost koja olakšava pregled, odabir i unos vrijednosti prilikom ispunjavanja nekakve forme. Recimo da imate formu u kojoj jedno od polja prikazuje popis djelatnika, a vi morate odabrati nekoliko njih. To se vrlo jednostavno može riješiti običnim padajućim izbornikom, Ionic za to koristi Select komponentu, i to je dobar izbor kada imate nekoliko djelatnika na tom popisu. Međutim, kada se nađete u situaciji da popis sadržava više stotina stavki odjednom padajući izbornik više nije toliko dobra opcija. Tu uskače autocomplete koji olakšava pronalazak i unos željene vrijednosti.

Google Autocomplete
Autocomplete s kojim ste se sigurno susreli

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

Sada ćemo instalirati angular2-tag-input NPM modul koji je osnova naše Ionic 3 autocomplete aplikacije.

Nakon toga potrebno je dodati referencu na RlTagInputModule , a to se radi unutar app.module.ts

I to je to. Spremni smo za korištenje autocomplete funkcionalnosti.

Autocomplete implementacija

Postoje dva načina na koja možemo koristiti autocomplete. Prvi je da ponudimo niz (array) sa zadanim vrijednostima, a drugi je da omogućimo unos bilo koje vrijednosti. U ovom primjeru ponudit ćemo zadani niz.

Logika funkcionalnosti nalazit će se unutar home.ts datoteke. Ovdje imamo dva niza, autocompleteTags koji će se puniti vrijednostima koje odaberemo i autocompleteItems koji sadržava vrijednosti koje će biti ponuđene unutar autocomplete polja.

Kako to izgleda možemo vidjeti u home.html

I uz malo CSS-a

U konačnici to izgleda ovako

Ionic Autocomplete Demo 1

Dinamičke vrijednosti autocomplete niza?

U gornjem primjeru koristili smo niz od nekoliko ručno dodanih vrijednosti, ali to ne znači da ne možemo koristiti i dinamički niz koji dobijemo od API-ja.

U tom je slučaju potrebno kreirati ApiProvider naredbom

Koristit ćemo popis država s REST Countries API-ja https://restcountries.eu/

Kada pozovemo API dobit ćemo console.log(res); koji nam daje niz (array) objekata. Međutim to je previše informacija, a nama trebaju samo imena država kako bi prema njima mogli raditi autocomplete.

Ionic Autocomplete - REST Countries API response

Zato ćemo napraviti petlju koja će nam izdvojiti samo nazive država i s njima napuniti naš autocompleteItems niz (array).

Ionic Autocomplete - REST Countries API response - names

home.ts će u tom slučaju izgledati nešto malo drugačije

A konačan rezultat možete vidjeti u nastavku

Ionic Autocomplete demo 2

Ionic 3 – Slanje SMS poruka

Share Button

U ovom ću blog postu pokazati kako poslati SMS poruku iz Ionic 3 aplikacije koristeći Ionic Native 3x SMS plugin.

Prije svega, moram napomenuti da korištenje ovog plugina zahtijeva da mobilni uređaj na kojemu je instalirana aplikacija ima valjanu SIM karticu sa dovoljnim iznosom na računu. Ako se koristi neka od tarifa s neograničenom mogučnošću slanja SMS-ova onda ste bez brige.

Kreiranje aplikacije

Za početak ćemo kreirati novi Ionic 3 projekt.

Odmah možemo dodati i Ionic Native 3x SMS plugin.

I navesti SMS plugin unutar app.module.ts

Također, s obzirom da ću aplikaciju testirati na Android mobilnom uređaju treba dodati i Android platformu.

Sada imamo sve što nam je potrebno kako bi napravili primjer aplikacije iz koje će se moći slati SMS poruke.

Postavljanje SMS funkcionalnosti

Ionic3 SMS početni ekran Plan je napraviti ekran s dva gumba. Jedan će slati SMS za zadanim tekstom na zadani broj mobitela, a drugi će koristiti formu unutar koje se upisuje broj na koji se SMS želi poslati kao i sadržaj SMS-a.

Na koji način će se odvijati slanje SMS poruke može se vidjeti u home.ts datoteci. Imamo dvije funkcije posaljiSMS1() i posaljiSMS2(). Unutar svake od funkcija imamo options objekt. Više o njemu kao i ostalim mogućnostima možete pronaći u dokumentaciji https://github.com/cordova-sms/cordova-sms-plugin

Ako aplikaciju pokrenemo u web pregledniku $ ionic serve dobijemo ispis naših console.log poruka kao i obavijest da je aplikaciju potrebno pokrenuti na mobilnoj uređaju “Native: tried calling SMS.send, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator“.

Ionic3 SMS - Google Chrome

Pokretanje aplikacije na mobilnom uređaju

Prilikom instalacije aplikacije na mobilni uređaj će prikazati koje sve dozvole zahtjeva aplikacija. U ovom slučaju to je “slanje i pregled SMS poruka”.

Također, prilikom prvog slanja SMS poruke aplikacije će pitati korisnika za dozvolu slanja i pregleda SMS poruka na njegovom mobilnom uređaju.

Ionic3 - SMS

S obzirom da funkcija posaljiSMS1() u sebi sadržaja postavku koja poziva otvaranje zadane SMS aplikacije mobilnog uređaja na sljedećoj se slici može vidjeti kako to izgleda.

Ionic3 - SMS

Ako pozovemo drugi gumb tj. funkciju posaljiSMS2() SMS ćemo poslati direktno iz Ionic 3 aplikacije. Poslani SMS ostaje u mobilnom uređaju i moguće ga je kasnije vidjeti u zadanoj aplikacija koja inače služi za slanje i primanje SMS-ova.

Ionic3 - SMS

Osoba koja primi SMS poruku ne zna da je poruka poslana putem Ionic 3 aplikacije.

Ionic3 - SMS

Zaključak

I to je sve! Ovo je bio prikaz korištenja Ionic Native 3.x SMS plugina koji omogućava slanje SMS poruka iz Ionic aplikacije.