Arhiva Ionic 3 - Stranica 2 od 8 - Tomislav Stanković

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.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  popisKorisnika: any;
  privremeniPopisKorisnika: Array<any> = new Array(6);

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(data => {
          //console.log(data);
          this.popisKorisnika = data;
        });
    }, 3000);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

popisKorisnika: any;

privremeniPopisKorisnika: Array<any> = new Array(6);

constructor(public navCtrl: NavController) {}

ionViewDidLoad() {

setTimeout(() => {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then(data => {

//console.log(data);

this.popisKorisnika = data;

});

}, 3000);

}

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

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Skeleton Screen
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

	<ion-list *ngIf='popisKorisnika'>
		<ion-item *ngFor='let korisnik of popisKorisnika'>
			<h2>{{korisnik.name}}</h2>
			<h3>E-mail: {{korisnik.email}}</h3>
			<p>Tvrtka: {{korisnik.company.name}}</p>
		</ion-item>
	</ion-list>

	<ion-list *ngIf='!popisKorisnika'>
		<ion-item *ngFor='let privremeno of privremeniPopisKorisnika' class='privremeniPodatak'>
			<h2></h2>
			<h3></h3>
			<p></p>
		</ion-item>
	</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Skeleton Screen

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list *ngIf='popisKorisnika'>

<ion-item *ngFor='let korisnik of popisKorisnika'>

<h2>{{korisnik.name}}</h2>

<h3>E-mail: {{korisnik.email}}</h3>

<p>Tvrtka: {{korisnik.company.name}}</p>

</ion-item>

</ion-list>

<ion-list *ngIf='!popisKorisnika'>

<ion-item *ngFor='let privremeno of privremeniPopisKorisnika' class='privremeniPodatak'>

<p></p>

</ion-item>

</ion-list>

</ion-content>

I za kraj tu je malo CSS-a.

page-home {
    .privremeniPodatak {
        @keyframes animatedBar{
          0%{
              background-position: -406px 0;
          }
          100%{
              background-position: 0 0;
          }
       }
        h2, h3, p {
          background-color: lightgrey;
          opacity: 0.5;
          height: 1em;
          margin-top: 10px;
          position: relative;
          background: linear-gradient(to right, #dddddd , #EEEEEE);
          animation: animatedBar 700ms linear infinite;
          
          &:after {
            position: absolute;
            display: block;
            content: '';
            right: 0;
            bottom: 0;
            top: 0;
            background-color: white;
          }
        }
        h2:after {
          width: 65%;
        }
        h3:after {
          width: 60%;
        }  
        p:after {
          width: 40%;
        }
      }
    }

page-home {

.privremeniPodatak {

@keyframes animatedBar{

0%{

background-position: -406px 0;

}

100%{

background-position: 0 0;

}

h2, h3, p {

background-color: lightgrey;

opacity: 0.5;

height: 1em;

margin-top: 10px;

position: relative;

background: linear-gradient(to right, #dddddd , #EEEEEE);

animation: animatedBar 700ms linear infinite;

&:after {

position: absolute;

display: block;

content: '';

right: 0;

bottom: 0;

top: 0;

background-color: white;

}

h2:after {

width: 65%;

}

h3:after {

width: 60%;

}

p:after {

width: 40%;

}

Na kraju to izgleda ovako:

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

{
  "name": "Ionic3SkeletonScreen",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.10.0",
    "@ionic-native/splash-screen": "~4.10.0",
    "@ionic-native/status-bar": "~4.10.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "typescript": "~2.6.2"
  },
  "description": "Ionic 3 - Skeleton Screen"
}

{

"name": "Ionic3SkeletonScreen",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/core": "~4.10.0",

"@ionic-native/splash-screen": "~4.10.0",

"@ionic-native/status-bar": "~4.10.0",

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.1.11",

"typescript": "~2.6.2"

"description": "Ionic 3 - Skeleton Screen"

}

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.

$ ionic start BarcodeScannerApp blank
$ cd BarcodeScannerApp 
$ ionic cordova platform add android

$ ionic start BarcodeScannerApp blank

$ cd BarcodeScannerApp

$ ionic cordova platform add android

Barcode Scanner

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

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

1 2	$ ionic cordova plugin add phonegap-plugin-barcodescanner $ npm install --save @ionic-native/barcode-scanner

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

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

BarcodeScanner,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

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.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Barcode Scanner App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-row *ngIf="rezultat">
    <ion-col>
         {{rezultat.text}}
    </ion-col>
    <ion-col>
        {{rezultat.format}}
      </ion-col>
  </ion-row>
 
  <button ion-button full (click)="skeniraj()">Skeniraj</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Barcode Scanner App

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-row *ngIf="rezultat">

<ion-col>

</ion-col>

<ion-col>

</ion-col>

</ion-row>

<button ion-button full (click)="skeniraj()">Skeniraj</button>

</ion-content>

Funkcionalnost se sastoji od jedne funkcije.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  rezultat:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

  }

  skeniraj(){
    this._barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

rezultat:any;

constructor(public _navCtrl: NavController,

private _barcodeScanner: BarcodeScanner) {

}

skeniraj(){

this._barcodeScanner.scan().then(barcodeData => {

console.log('Barcode data', barcodeData);

this.rezultat = barcodeData;

}).catch(err => {

console.log('Error', err);

});

}

U praksi to izgleda ovako:

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.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  rezultat:any;
  opcije:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

    this.opcije = {
            preferFrontCamera: false,
            showFlipCameraButton: true,
            showTorchButton: true,
            disableAnimations: false,
            disableSuccessBeep: true,
            prompt: "Postavite okvir na barkod kako bi ga skenirali.",
            formats: 'QR_CODE, DATA_MATRIX', 
            orientation: 'portrait',
            torchOn: false,
            resultDisplayDuration: 3000
    };

  }

  skeniraj(){
    this._barcodeScanner.scan( this.opcije).then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

rezultat:any;

opcije:any;

constructor(public _navCtrl: NavController,

private _barcodeScanner: BarcodeScanner) {

this.opcije = {

preferFrontCamera: false,

showFlipCameraButton: true,

showTorchButton: true,

disableAnimations: false,

disableSuccessBeep: true,

prompt: "Postavite okvir na barkod kako bi ga skenirali.",

formats: 'QR_CODE, DATA_MATRIX',

orientation: 'portrait',

torchOn: false,

resultDisplayDuration: 3000

};

}

skeniraj(){

this._barcodeScanner.scan( this.opcije).then(barcodeData => {

console.log('Barcode data', barcodeData);

this.rezultat = barcodeData;

}).catch(err => {

console.log('Error', err);

});

}

Zaključak

{
  "name": "BarcodeScannerApp",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/barcode-scanner": "^4.9.2",
    "@ionic-native/core": "4.9.1",
    "@ionic-native/splash-screen": "4.9.1",
    "@ionic-native/status-bar": "4.9.1",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "phonegap-plugin-barcodescanner": "^8.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Barcode Scanner App project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "BarcodeScannerApp",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/barcode-scanner": "^4.9.2",

"@ionic-native/core": "4.9.1",

"@ionic-native/splash-screen": "4.9.1",

"@ionic-native/status-bar": "4.9.1",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.0.5",

"cordova-plugin-ionic-webview": "^1.1.19",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"phonegap-plugin-barcodescanner": "^8.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.1.10",

"typescript": "~2.6.2"

"description": "Ionic Barcode Scanner App project",

"cordova": {

"plugins": {

"phonegap-plugin-barcodescanner": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {},

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

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.

Kreiranje aplikacije

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

$ ionic start IonicInsomnia blank
$ cd IonicInsomnia
$ ionic cordova platform add android

$ ionic start IonicInsomnia blank

$ cd IonicInsomnia

$ ionic cordova platform add android

Insomnia

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

Instaliram ga sljedećim naredbama:

$ ionic cordova plugin add cordova-plugin-insomnia
$ npm install --save @ionic-native/insomnia

1 2	$ ionic cordova plugin add cordova-plugin-insomnia $ npm install --save @ionic-native/insomnia

I navodim ga unutar app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Insomnia } from '@ionic-native/insomnia';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Insomnia,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { Insomnia } from '@ionic-native/insomnia';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Insomnia,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Tek sada ga mogu koristiti unutar aplikacije.

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

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Insomnia
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

  <button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Insomnia

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

<button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

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.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Insomnia } from '@ionic-native/insomnia';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              private _insomnia: Insomnia) {}
  
  keepAwake(){
    this._insomnia.keepAwake()
      .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

  allowSleepAgain(){
    this._insomnia.allowSleepAgain()
     .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Insomnia } from '@ionic-native/insomnia';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _insomnia: Insomnia) {}

keepAwake(){

this._insomnia.keepAwake()

.then(

() => console.log('success'),

() => console.log('error')

);

}

allowSleepAgain(){

this._insomnia.allowSleepAgain()

.then(

() => console.log('success'),

() => console.log('error')

);

}

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

{
  "name": "IonicInsomnia",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/insomnia": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-insomnia": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicInsomnia",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.10",

"@angular/common": "5.2.10",

"@angular/compiler": "5.2.10",

"@angular/compiler-cli": "5.2.10",

"@angular/core": "5.2.10",

"@angular/forms": "5.2.10",

"@angular/http": "5.2.10",

"@angular/platform-browser": "5.2.10",

"@angular/platform-browser-dynamic": "5.2.10",

"@ionic-native/core": "4.7.0",

"@ionic-native/insomnia": "^4.7.0",

"@ionic-native/splash-screen": "4.7.0",

"@ionic-native/status-bar": "4.7.0",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-insomnia": "^4.3.0",

"cordova-plugin-ionic-keyboard": "^2.0.5",

"cordova-plugin-ionic-webview": "^1.1.19",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.10",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.1.9",

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {},

"cordova-plugin-ionic-keyboard": {},

"cordova-plugin-insomnia": {}

"platforms": [

"android"

]

}

Ionic Tabs App – HomePage se učitava prije AppComponent

U ovom ću blog postu pokazati kako spriječiti da se AppComponent učitava nakon HomePage.

Kada se kreira nova Ionic aplikacija koristeći tabs predložak kao rootPage odabrana je TabsPage komponenta koja unutar sebe poziva HomePage.

U tom slučaju ako se nekakva logika stavi unutar app.component.ts i onda ovisno o nekom uvjetu učita HomePage ili neka druga stranica

Kreiranje aplikacije

Novu aplikaciju kreiram naredbom

$ ionic start IonicTabaApp tabs
$ cd IonicTabaApp

1 2	$ ionic start IonicTabaApp tabs $ cd IonicTabaApp

I nakon što pokrenem aplikaciju

$ ionic serve

1	$ ionic serve

mogu vidjeti da se HomePage učitala prije AppComponent.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      console.log('AppComponent');
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

console.log('AppComponent');

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

});

}

Uzrok tome nalazi se unutar app.component.ts datoteke gdje se definira rootPage. U ovom slučaju to je TabsPage.

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {
      console.log('TabsPage');
  }
}

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';

import { ContactPage } from '../contact/contact';

import { HomePage } from '../home/home';

@Component({

templateUrl: 'tabs.html'

})

export class TabsPage {

tab1Root = HomePage;

tab2Root = AboutPage;

tab3Root = ContactPage;

constructor() {

console.log('TabsPage');

}

Gore se može vidjeti da TabsPage komponenta kao tab1Root uzima HomePage komponentu i zato se ona učitava prije AppComponent.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
      console.log('HomePage');
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

console.log('HomePage');

}

Kako bi se to spriječilo potrebno je napraviti sljedeće:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any;
  
  provjera = 1;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
	   console.log('AppComponent');
	  // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
	  
	  if (this.provjera == 1) {
        this.rootPage = TabsPage;
      } else {
        //
      }
	  
    });
  }
}

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any;

provjera = 1;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

console.log('AppComponent');

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

if (this.provjera == 1) {

this.rootPage = TabsPage;

} else {

}

});

}

Struktura projekta prema package.json

{
  "name": "IonicTabsApp",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Project - IonicTabsApp"
}

{

"name": "IonicTabsApp",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.9",

"@angular/common": "5.2.9",

"@angular/compiler": "5.2.9",

"@angular/compiler-cli": "5.2.9",

"@angular/core": "5.2.9",

"@angular/forms": "5.2.9",

"@angular/http": "5.2.9",

"@angular/platform-browser": "5.2.9",

"@angular/platform-browser-dynamic": "5.2.9",

"@ionic-native/core": "4.6.0",

"@ionic-native/splash-screen": "4.6.0",

"@ionic-native/status-bar": "4.6.0",

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.8",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.20"

"devDependencies": {

"@ionic/app-scripts": "3.1.8",

"typescript": "~2.6.2"

"description": "Ionic Project - IonicTabsApp"

}

Ionic 3 – Searchbar komponenta

Za razliku od blog postova Ionic 3 – Autocomplete polje za unos i Ionic 3 – select, search i autocomplete komponenta u kojima sam obradio temu autocomplete polja za unos u ovom ću blog postu obraditi primjer polja za filtriranje sadržaja.

Ova je funkcionalnost podržana od strane Ionic i nije potrebno instalirati dodatne Ionic Native pluginove.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

$ ionic start IonicSearchbar blank
$ cd IonicSearchbar

1 2	$ ionic start IonicSearchbar blank $ cd IonicSearchbar

Aplikacija će se sastojati od jednog ekrana sa prikazom trenutnih članova OSC-a na poveznici http://softwarecity.hr/clanovi/.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Searchbar
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Searchbar

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let stavka of nizPodaci">

<h2>{{stavka.ime}} {{stavka.prezime}}</h2>

<p>{{stavka.tvrtka}}</p>

</ion-item>

</ion-list>

</ion-content>

Kreiran je niz nizPodaci koji sadržava popis članova OSC-a.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  nizPodaci = [];

  constructor(public _navCtrl: NavController) {
 
    this.initializeItems();

  }

  initializeItems(){
    this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},
    {'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},
    {'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},
    {'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},
    {'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},
    {'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},
    {'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},
    {'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},
    {'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},
    {'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},
    {'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},
    {'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},
    {'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},
    {'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},
    {'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},
    {'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},
    {'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},
    {'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},
    {'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},
    {'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},
    {'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},
    {'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},
    {'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},
    {'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},
    {'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},
    {'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},
    {'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},
    {'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},
    {'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},
    {'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},
    {'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},
    {'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},
    {'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},
    {'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},
    {'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},
    {'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},
    {'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},
    {'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},
    {'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},
    {'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},
    {'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},
    {'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},
    {'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},
    {'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},
    {'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},
    {'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},
    {'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},
    {'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},
    {'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

nizPodaci = [];

constructor(public _navCtrl: NavController) {

this.initializeItems();

}

initializeItems(){

this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},

{'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},

{'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},

{'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},

{'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},

{'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},

{'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},

{'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},

{'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},

{'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},

{'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},

{'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},

{'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},

{'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},

{'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},

{'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},

{'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},

{'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},

{'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},

{'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},

{'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},

{'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},

{'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},

{'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},

{'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},

{'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},

{'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},

{'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},

{'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},

{'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},

{'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},

{'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},

{'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},

{'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},

{'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},

{'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},

{'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},

{'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},

{'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},

{'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},

{'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},

{'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},

{'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},

{'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},

{'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},

{'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},

{'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},

{'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},

{'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},

{'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},

{'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},

{'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},

{'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},

{'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},

{'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},

{'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},

{'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},

{'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];

}

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

U pregled sam dodao </ion-searchbar>

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Searchbar
    </ion-title>
  </ion-navbar>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let stavka of nizPodaci">
      <h2>{{stavka.ime}} {{stavka.prezime}}</h2>
      <p>{{stavka.tvrtka}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Searchbar

</ion-title>

</ion-navbar>

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let stavka of nizPodaci">

<h2>{{stavka.ime}} {{stavka.prezime}}</h2>

<p>{{stavka.tvrtka}}</p>

</ion-item>

</ion-list>

</ion-content>

Osim toga, dodao sam još i funkciju getItems() koja je zadužena za filtriranje.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  nizPodaci = [];

  constructor(public _navCtrl: NavController) {
 
    this.initializeItems();

  }

  initializeItems(){
    this.nizPodaci = [{'ime': 'Nenad', 'prezime': 'Andraković', 'tvrtka': 'Inchoo'},
    {'ime': 'Toni', 'prezime': 'Aničić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zrinka', 'prezime': 'Antolović', 'tvrtka': 'Inchoo'},
    {'ime': 'Davor', 'prezime': 'Banović', 'tvrtka': 'Oradian'},
    {'ime': 'Maja', 'prezime': 'Berger', 'tvrtka': 'Certus'},
    {'ime': 'Tomislav', 'prezime': 'Bilić', 'tvrtka': 'Inchoo'},
    {'ime': 'Kristina', 'prezime': 'Bite', 'tvrtka': ''},
    {'ime': 'Goran', 'prezime': 'Bokun', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Bosnić', 'tvrtka': 'LegalTie'},
    {'ime': 'Marko', 'prezime': 'Briševac', 'tvrtka': 'Inchoo'},
    {'ime': 'Igor', 'prezime': 'Buzatović', 'tvrtka': 'Inovativni trendovi d.o.o.'},
    {'ime': 'Katarina', 'prezime': 'Dijaković', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Galamboš', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Grgić', 'tvrtka': 'Agencija Adventa'},
    {'ime': 'Hrvoje', 'prezime': 'Horvat', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Bela', 'prezime': 'Ikotić', 'tvrtka': 'BIOS/OSC'},
    {'ime': 'Tomislav', 'prezime': 'Jakopec', 'tvrtka': 'Filozofski fakultet u Osijeku'},
    {'ime': 'Antun', 'prezime': 'Jalovičar', 'tvrtka': 'MUP'},
    {'ime': 'Goran', 'prezime': 'Jarić', 'tvrtka': 'Odvjetnički ured'},
    {'ime': 'Marko', 'prezime': 'Jovanovac', 'tvrtka': 'Marivo'},
    {'ime': 'Hrvoje', 'prezime': 'Jurišić', 'tvrtka': 'Inchoo'},
    {'ime': 'Ivan', 'prezime': 'Jurlina', 'tvrtka': 'Osijek Software City ⁄ COBE'},
    {'ime': 'Ružica', 'prezime': 'Kadić', 'tvrtka': 'Plava tvornica'},
    {'ime': 'Hrvoje', 'prezime': 'Kalić', 'tvrtka': ''},
    {'ime': 'Dražen', 'prezime': 'Karačić', 'tvrtka': 'Inchoo'},
    {'ime': 'Maja', 'prezime': 'Kardum', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Krpan', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Antun', 'prezime': 'Lauc', 'tvrtka': ''},
    {'ime': 'Ana', 'prezime': 'Leh', 'tvrtka': ''},
    {'ime': 'Nandino', 'prezime': 'Lončar', 'tvrtka': 'Inchoo'},
    {'ime': 'Mislav', 'prezime': 'Majdandžić', 'tvrtka': 'Eksperimental Games'},
    {'ime': 'Stefani', 'prezime': 'Majić', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Krešimir', 'prezime': 'Marić', 'tvrtka': 'Keeper Solutions'},
    {'ime': 'Ivan', 'prezime': 'Marković', 'tvrtka': 'SPAN d.o.o.'},
    {'ime': 'Tina', 'prezime': 'Mazalin', 'tvrtka': 'Odvjetnički ured Tanja Petković Gregurek'},
    {'ime': 'Ivan', 'prezime': 'Mihalj', 'tvrtka': 'RISE GmbH'},
    {'ime': 'Tajana', 'prezime': 'Milanović', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Ivan', 'prezime': 'Milanović', 'tvrtka': 'Okami, obrt za računalne usluge'},
    {'ime': 'Kruno', 'prezime': 'Miličević', 'tvrtka': ''},
    {'ime': 'Vanda', 'prezime': 'Muhar', 'tvrtka': 'Siemens Convergence Creators'},
    {'ime': 'Damjan', 'prezime': 'Orešković', 'tvrtka': 'Shoutem'},
    {'ime': 'Akoš', 'prezime': 'Papp', 'tvrtka': ''},
    {'ime': 'Vojislav', 'prezime': 'Pavaosvić', 'tvrtka': 'BetaWare'},
    {'ime': 'Luka', 'prezime': 'Pavličić', 'tvrtka': ''},
    {'ime': 'Tomislav', 'prezime': 'Perić', 'tvrtka': 'Olimpias Tekstil d.o.o.'},
    {'ime': 'Igor', 'prezime': 'Plac', 'tvrtka': 'Prototyp'},
    {'ime': 'Tomislav', 'prezime': 'Plavčić', 'tvrtka': 'Percona'},
    {'ime': 'Toni', 'prezime': 'Podmanički', 'tvrtka': ''},
    {'ime': 'Igor', 'prezime': 'Ragić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Ana', 'prezime': 'Rogina', 'tvrtka': 'Digitalna agencija Gerila'},
    {'ime': 'Marijana', 'prezime': 'Schonberger', 'tvrtka': ''},
    {'ime': 'Aron', 'prezime': 'Stanić', 'tvrtka': 'Inchoo'},
    {'ime': 'Tomislav', 'prezime': 'Stanković', 'tvrtka': 'Informatika Fortuno'},
    {'ime': 'Stanislav', 'prezime': 'Strešnjak', 'tvrtka': 'Siemens Convergence Creators d.o.o.'},
    {'ime': 'Filip', 'prezime': 'Svetličić', 'tvrtka': 'Inchoo'},
    {'ime': 'Antonija', 'prezime': 'Tadić', 'tvrtka': 'Inchoo'},
    {'ime': 'Mihael', 'prezime': 'Tomić', 'tvrtka': 'Mono d.o.o.'},
    {'ime': 'Miroslav', 'prezime': 'Varga', 'tvrtka': 'Escape d.o.o.'},
    {'ime': 'Ivan', 'prezime': 'Varga', 'tvrtka': 'Adcon'},
    {'ime': 'Pavle', 'prezime': 'Vidaković', 'tvrtka': 'Agronova'},
    {'ime': 'Blaž', 'prezime': 'Vincetić', 'tvrtka': 'Siemens CVC d.o.o.'},
    {'ime': 'Dunja', 'prezime': 'Vorkapić', 'tvrtka': 'Inchoo'},
    {'ime': 'Zvonimir', 'prezime': 'Vuković', 'tvrtka': ''},
    {'ime': 'Ivan', 'prezime': 'Weiler', 'tvrtka': 'Inchoo'},
    {'ime': 'Marijana', 'prezime': 'Zekić-Sušac', 'tvrtka': 'EFOS'},
    {'ime': 'Bojan', 'prezime': 'Zidarević', 'tvrtka': ''},
    {'ime': 'Andreja', 'prezime': 'Čičak', 'tvrtka': 'Inchoo'}];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.nizPodaci = this.nizPodaci.filter((stavka) => {
        return ((stavka.ime + stavka.prezime + stavka.tvrtka).toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

}

100

101

102

103