Ionic 3 Market

U ovom ću blog postu pokazati kako unutar Ionic aplikacije direktno pristupiti nekoj drugoj aplikaciji koja se nalazi na Google Play Store ili Apple Store koristeći Ionic Native Market plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Pristup trgovini aplikacija

Prema službenoj dokumentaciji, Market plugin instaliram sljedećim naredbama:

Navodim ga unutar app.module.ts

Sada ću na početnoj stranici home.ts kreirati funkciju pokaziAplikaciju() koja će biti aktivirana prilikom klika na gumb. Toj funkciji proslijedim jedan parametar, a to je ID aplikacije.

Na ekranu će se nalaziti samo jedan gumb.

Konačan rezultat vidi se na sljedećoj slici:

Ionic 3 Market

Zaključak

Ovaj plugin na vrlo jednostavan način rješava potrebu otvaranja Google Play Store tj. Apple Store trgovine unutar Ionic aplikacije.

Struktura aplikacije prema package.json

Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom
Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

I za kraj tu je malo CSS-a.

Na kraju to izgleda ovako:

Ionic 3 Skeleton Screen – stvara dojam brzine

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

Ionic 3 – Barcode QR skener

Zahvaljujući Ionic Native pluginovima moguće je u vrlo kratkom vremenu napraviti konkretnu Ionic aplikaciju koja će služiti svrsi. U ovom slučaju riječ je o aplikaciji za skeniranje barkoda što je posebno korisno u skladištima trgovina.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Barcode Scanner

Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:

Ovim je pluginom moguće skenirati sljedeće formate: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, PDF_417, AZTEC i MSI.

Nakon toga referencu na plugin dodajem i unutar app.module.ts datoteke

Tek sada mogu implementirati funkcionalnost za skeniranje barkoda.

Ekran će se sastojati od gumba za pokretanje skeniranja i prostora iznad njega za prikaz skeniranih podataka.

Funkcionalnost se sastoji od jedne funkcije.

U praksi to izgleda ovako:

Ionic 3 – Barcode QR skener

Prilikom klika na gumb za skeniranje aplikacija traži pristup kameri kako bi mogla skenirati barkod, nakon odobrenja prikazuje se ekran kamere uz poruku “Place a barcode inside the viewfinder to scan it.“. Nakon uspješnog skeniranja čuje se glasan beep zvuk i na dnu ekrana kratko se prikaže sadržaj skeniranog barkoda nakon čega se ekran kamere zatvara i aplikacija se vraća na početni ekran.

Ali to nije sve. Moguće je koristiti objekt za dodatnim opcijama pomoću kojih se ponašanje plugina može prilagoditi.

Ionic 3 – Barcode QR skener

Zaključak

Ionic Insomnia – Nitko nije lud da spava

Iako je imperativ svake mobilne aplikacije brzina nekada je jednostavno potrebno čekati da se nešto unutar aplikacije dogodi.

Npr. ako je u tijeku nekakva sinkronizacija koja traje dulje od zadanog vremena mobilnog uređaja prije gašenja ekrana dogoditi će se da će se ekran ugasiti za vrijeme te sinkronizacije. U tom se slučaju može dogoditi, ako drugačije nije postavljeno, da se sinkronizacija prekine.

Kako bi se takav scenarij spriječio i kako se korisnik mobilne aplikacije ne bi zbunio zbog iznenadnog gašenja ekrana u pola neke radnje može se koristiti Insomnia plugin.

Ionic Insomnia

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.

Insomnia

Ionic Native plugin koji ću u ovom slučaju instalirati zove se Insomnia.

Instaliram ga sljedećim naredbama:

I navodim ga unutar app.module.ts.

Tek sada ga mogu koristiti unutar aplikacije.

Za potrebu ovog primjera funkcije ću pozivati klikom na gumb.

Ionic Insomnia

Klikom na gumb keepAwake spriječavam mobilni uređaj da ode u sleep mode, a klikom na allowSleepAgain ponovno dopuštam zadano ponašanje. U ovom slučaju ekran uređaja ugasi se nakon 15 sekundi neaktivnosti.

Zaključak

Insomnia je odličan plugin koji svoju svrhu u potpunosti ispunjava. Različiti su scenariji u kojima može biti korišten. U ovom blog postu prikazan je samo jedan od njih.

Za kraj, struktura projekta prema package.json