Arhiva Ionic - Stranica 8 od 9 - Tomislav Stanković

Ionic 3 i Highcharts – prikaz grafikona

U ovom ću blog postu pokazati kako na jednostavan način prikazati napredne grafikone unutar Ionic 3 aplikacije koristeći Highcharts.

Više o Highchartsu možete pronaći u njihovoj službenoj dokumentaciji https://www.highcharts.com/docs

Postavljanje aplikacije

Za početak je potrebno kreirati novi Ionic projekt

$ ionic start Ionic3Highcharts blank
$ cd Ionic3Highcharts

1 2	$ ionic start Ionic3Highcharts blank $ cd Ionic3Highcharts

Highcharts implementacija

Highcharts ćemo u naš Ionic 3 projekt dodati koristeći naredbu:

$ npm install highcharts --save

1	$ npm install highcharts --save

I spremni smo za korištenje.

Datoteka home.html sada će izgledati ovako

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

<ion-content>
 
 <div id="container" style="display: block;"></div>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Highcharts

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

</ion-content>

A datoteka home.ts će izgledati ovako

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

import * as Highcharts from 'highcharts';

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

  constructor() {
  }

  ionViewDidLoad(){

    var myChart = Highcharts.chart('container', {
          chart: {
          type: 'bar'
          },
          title: {
          text: 'Fruit Consumption'
          },
          xAxis: {
          categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
          title: {
          text: 'Fruit eaten'
          }
          },
          series: [{
          name: 'Jane',
          data: [1, 0, 4]
          }, {
          name: 'John',
          data: [5, 7, 3]
          }]
    });

  }

}

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

import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor() {

}

ionViewDidLoad(){

var myChart = Highcharts.chart('container', {

chart: {

type: 'bar'

title: {

text: 'Fruit Consumption'

xAxis: {

categories: ['Apples', 'Bananas', 'Oranges']

yAxis: {

title: {

text: 'Fruit eaten'

}

series: [{

data: [1, 0, 4]

}, {

data: [5, 7, 3]

}]

});

}

Možete primijetiti jednu stvar koja im je zajednička, a to je id="container".

Također, funkcija ionViewDidLoad(); brine se da se naš grafikon prikaže tek kada je stranice home.html tj. home.ts u potpunosti učitana, a spada pod Lifecycle events.

Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.

I na kraju to izgleda ovako:

Ako želite prikaz nekog drugog grafikona dovoljno je promijeniti parametar type iz npr. type: 'bar' u npr. type: 'line' kako bi dobili sljedeće:

Prikaz dinamičkih vrijednosti

U gornjem primjeru koristimo fiksne podatke za prikaz grafikona, ali to ne mora biti slučaj i u vašoj aplikaciji. Naravno da možete koristiti API koji će vam dati dinamičke vrijednosti za prikaz.

Kako bi to bilo moguće prvo je potrebno kreirati servis za API tj. ApiProvider. U ovom ću primjeru također koristiti https://restcountries.eu/ API.

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

Sadržaj izgleda ovako:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class ApiProvider {
 
  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }

  getData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .map(res => res.json())
      //Uzimam samo 10 vrijednosti iz API-ja
      .map(res => res.slice(56,66));
  }
 
}

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

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

getData(){

return this._http.get('https://restcountries.eu/rest/v2/all')

.map(res => res.json())

//Uzimam samo 10 vrijednosti iz API-ja

.map(res => res.slice(56,66));

}

Datoteka home.html ostaje u istom obliku, ali zato home.ts sada izgleda ovako:

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

import * as Highcharts from 'highcharts';

import { ApiProvider } from "../../providers/api/api";

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

  countryOptions:any;
  data:any;

  constructor(public _apiProvider: ApiProvider) {
  }

  getCountries(){
    this._apiProvider.getData().subscribe(res => {
     this.countryOptions = res;
     console.log(this.countryOptions);
 
          let myCountries = [];
            if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myCountries.push(
                       this.countryOptions[i].name
                    );
                }
            }  

            let myPopulation = [];
            if(this.countryOptions.length > 0) {
                for(let i = 0; i < this.countryOptions.length; i++) {
                    myPopulation.push(
                       this.countryOptions[i].population
                    );
                }
            }  
 
         this.data = this.showHighchart(myCountries,myPopulation);
    
    });
  } 

   ionViewDidLoad(){

    this.getCountries();

  }


    showHighchart(myCountries,myPopulation){

      console.log(myCountries);
      console.log(myPopulation);

       Highcharts.chart('container', {
          chart: {
          type: 'bar'
          },
          title: {
          text: 'Country population'
          },
          xAxis: {
          categories: myCountries
          },
          yAxis: {
          title: {
          text: 'Population'
          }
          },
          series: [{
          name: 'Population',
          data: myPopulation
          }]
    });

    }

}

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

import { NavController } from 'ionic-angular';

import * as Highcharts from 'highcharts';

import { ApiProvider } from "../../providers/api/api";

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

countryOptions:any;

data:any;

constructor(public _apiProvider: ApiProvider) {

}

getCountries(){

this._apiProvider.getData().subscribe(res => {

this.countryOptions = res;

console.log(this.countryOptions);

let myCountries = [];

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myCountries.push(

this.countryOptions[i].name

);

}

let myPopulation = [];

if(this.countryOptions.length > 0) {

for(let i = 0; i < this.countryOptions.length; i++) {

myPopulation.push(

this.countryOptions[i].population

);

}

this.data = this.showHighchart(myCountries,myPopulation);

});

}

ionViewDidLoad(){

this.getCountries();

}

showHighchart(myCountries,myPopulation){

console.log(myCountries);

console.log(myPopulation);

Highcharts.chart('container', {

chart: {

type: 'bar'

title: {

text: 'Country population'

xAxis: {

categories: myCountries

yAxis: {

title: {

text: 'Population'

}

series: [{

data: myPopulation

}]

});

}

Aplikacija sada izgleda ovako:

Zaključak

Kao što ste mogli vidjeti iz ranije navedenih primjera korištenje Highchartsa unutar Ionic 3 aplikacije je vrlo jednostavno.

Ionic Framework resursi

Iako sve blog postove koje sam objavio na temu Ionic Frameworka možete pronaći u kategoriji Razvoj odlučio sam objaviti ovaj blog post kako bi dodatno olakšao pronalazak i pregled svih blog postova vezanih upravo uz Ionic Framework.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći Ionic Framework resurs koji će vam biti od pomoći.

Ionic Framework 4 resursi

– Angular & Ionic 4 – PayPal mobilno plaćanje
– Ionic 4 & Angular Router – prosljeđivanje parametara
– Ionic 4 PWA – kreiranje aplikacije
– Uber API & Ionic 4 – Ride Request Button
– Ionic 4 Slides – prikaz galerije slika
– Otvaranje postavki mobilnog uređaja iz Ionic aplikacije
– Što je i čemu služi Ionic Native 4.x?
– Ionic geolociranje – dohvaćanje lokacije korisnika
– Kako saznati status napunjenosti baterije unutar Ionic aplikacije
– Ionic + OpenWeatherMap – prikaz vremenske prognoze
– Video pozadina u Ionic aplikaciji
– Uvod u Ionic 4
– Stigao je Ionic 4!

Ionic Framework 3 resursi

– Ionic Card IO – prikupljanje podataka s bankovne kartice
– Ionic 3 – uspostavljanje telefonskog poziva
– Ionic 3 Popover
– Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju
– Ionic Social Sharing – dijeljenje sadržaja mobilne aplikacije
– Ionic 3 Market
– Ionic 3 Skeleton Screen – stvaranje dojma brzine
– Ionic 3 – Barcode QR skener
– Ionic Range komponenta
– Ionic Insomnia – Nitko nije lud da spava
– Ionic Tabs App – Kako spriječiti da se HomePage učitava prije AppComponent
– Ionic 3 – Searchbar komponenta
– Ionic 3 – kako spriječiti slučajno gašenje aplikacije
– Ionic 3 – Google login/prijava
– Ionic 3 i WordPress REST API – prikaz blog postova
– Ionic 3 – prikaz informacija o SIM kartici
– Ionic 3 – Facebook prijava
– Ionic 3 – Spremanje i slanje podataka kada nema interneta
– Ionic 3 – podrška za vibraciju
– Ažuriranje Ionic Android aplikacije bez Google Storea
– Ionic 3 & Google Maps – prikaz rute između dvije lokacije
– Ionic 3 desktop aplikacija koristeći Electron
– Uvod u Ionic 3
– Ionic 3 – Korištenje, napredne, reaktivne forme
– Ionic 3 i Highcharts – prikaz grafikona
– Ionic 3 – select, search i autocomplete komponenta
– Ionic 3 – Slanje podataka na API
– Ionic 3 – Primjeri najbolje prakse
– Ionic 3 aplikacija za audio i video stream
– Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju
– Ionic 3 – Autocomplete polje za unos
– Čemu služi Ionic Native 3.x?
– Ionic 3 – Slanje SMS poruka
– Ionic 3 – Lazy Loading (lijeno učitavanje)
– Ionic 3 – Firebase registracija i prijava
– Ionic 3 – prikaz informacija o uređaju
– Ionic 3 – aplikacija koja govori
– Ionic 3 – Prikaz Google mape
– Kako ubrzati pokretanje Ionic 3 aplikacije?
– Ionic 3 – AdMob monetizacija
– Ionic 2 & 3 – SQLite servis
– Stigao je Ionic 3!

Ionic Framework 2 resursi

– Ionic 2 – SQLite za trajno spremanje podataka
– Ionic 2 – Dodavanje vanjskih skripti
– Ionic 2 – prosljeđivanje parametara između stranica
– Ionic 2 – Events, upravljanje događajima
– Google Drive REST API & Ionic 2 – prikaz podataka
– Ionic 2 – Podrška za višejezičnost
– Ionic 2 – Toast obavijesti
– Ionic 2 – Push notifikacije za Android
– Ionic 2 – provjera povezanosti s mrežom
– Ionic 2 – prikaz JSON-a sa API-ja
– Uvod u Ionic 2

Ionic Framework 1 resursi

– Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja
– Ionic aplikacija (ni)je povezana s internetom
– Pokretanje Ionic aplikacije na Android platformi
– Stvaranje novog Ionic projekta
– Ionic Framework – priprema razvojne okoline

Razno

– Kako Ionic aplikaciju ugraditi u postojeće web stranice
– Ionic & Facebook login/prijava
– Razvoj Ionic aplikacija za iOS
– Ionic & Google Firebase login/prijava – Error Code 10
– Ionic – kako odrediti minimalnu verziju Androida
– Ionic aplikacija sa SVG ikonama
– Ionic i Gravatar – prikaz slike profila
– Ionic – RxJS Observable Timer
– DevApp – uživo osvježavanje Ionic aplikacija na više uređaja
– Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije
– Ionic & Crosswalk – podrška za starije verzije Androida
– Ionic – automatska prijava u aplikaciju
– Priprema i objava Ionic aplikacije na Google Play Store
– Ikona i početni zaslon Ionic aplikacije
– Što je i čemu služi ngCordova unutar Ionic aplikacije?
– Što je Ionic View?
– Kako napraviti Apache Cordova Platform update

Ionic 3 – Slanje podataka na API

Ovim blog postom želim pokazati kako na jednostavan i brz način možete napraviti Ionic aplikaciju koja će slati podatke na API. U ovom ću slučaju koristiti jednostavan JSON Server, ali jednako samo tako mogao koristiti i NodeJS API, API koji podržava slanje datoteka ili Google Drive API. Ali kao što sam i rekao, kako bi zadržao jednostavnost i kako ne bi otišao previše u širinu u ovom ću primjeru koristiti jednostavan JSON Server API.

Postavljanje aplikacije

Kreirati ćemo novi Ionic projekt, i dodati podršku za Android platformu

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

$ ionic start Ionic3API blank

$ cd Ionic3API

$ ionic cordova platform add android

Izrada i pokretanje API-ja

API se nalazi u datoteci db.json sa sljedećim sadržajem

{
  "Imenik": [
    {
      "id": 1,
      "ime": "Ivan Ivanović",
	  "telefon" : "0038501555444",
	  "vrsta": "PO"
    },
    {
      "id": 2,
      "ime": "Mate Matić",
	  "telefon" : "0038501555333",
	   "vrsta": "PO"
    },
	{
      "id": 3,
      "ime": "Pero Papar",
	  "telefon" : "0038501555222",
	  "vrsta": "PR"
    }
  ]
}

{

"Imenik": [

{

"id": 1,

"ime": "Ivan Ivanović",

"telefon" : "0038501555444",

"vrsta": "PO"

{

"id": 2,

"ime": "Mate Matić",

"telefon" : "0038501555333",

"vrsta": "PO"

{

"id": 3,

"ime": "Pero Papar",

"telefon" : "0038501555222",

"vrsta": "PR"

}

]

}

Pokrećemo ga naredbom

$ json-server --watch db.json

1	$ json-server --watch db.json

Servis za API

Sada ćemo napraviti servis koji će u našoj Ionic aplikaciji služiti za pozivanje API-ja.

$ ionic generate provider api

1	$ ionic generate provider api

Servis za API će izgledati ovako

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ApiProvider {

  constructor(public _http: Http) {
    console.log('Hello ApiProvider Provider');
  }

getUsers(){
    return this._http.get('http://localhost:3000/imenik')
      .map(res => res.json());
  }

postUser(a:any){
    return this._http.post('http://localhost:3000/imenik', a)
      .map(res => res.json());
  }

}

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

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class ApiProvider {

constructor(public _http: Http) {

console.log('Hello ApiProvider Provider');

}

getUsers(){

return this._http.get('http://localhost:3000/imenik')

.map(res => res.json());

}

postUser(a:any){

return this._http.post('http://localhost:3000/imenik', a)

.map(res => res.json());

}

Znači, imamo funkciju getUsers(); koja će dohvaćati popis svih osoba u imeniku, kao i funkciju postUser(a:any); za dodavanje nove osobe u imenik.

Forma za unos

Sada možemo napraviti formu za unos sadržaja. Forma će se sastojati od samo tri polja. Jedno polje za ime i prezime, drugo za broj telefona, a treće polje tj. padajući izbornik s opcijama za odabir poslovnog ili privatnog broja. Ispod svega toga prikazat ćemo popis svih osoba.

Forma nema nikakvih specijalnih uvjeta i provjera niti je bilo koje polje označeno kao obavezno. Osim toga, ispod forme imamo popis do sada dodanih osoba.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 - API
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
<ion-item>
  <ion-label floating>Ime i prezime</ion-label>
  <ion-input type="text" [(ngModel)]="imenik.ime" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Broj telefona/mobitela</ion-label>
  <ion-input type="number" [(ngModel)]="imenik.broj" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Poslovni ili privatni broj</ion-label>
  <ion-select [(ngModel)]="imenik.vrsta" okText="Odaberi" cancelText="Odustani">
    <ion-option value="PR">Privatni</ion-option>
    <ion-option value="PO">Poslovni</ion-option>
  </ion-select>
</ion-item>

<button ion-button full outline (click)="dodajOsobu(imenik);">Dodaj</button>

<h3>Popis osoba:</h3>
<ion-list *ngIf="popisOsoba">
  <ion-item *ngFor="let popis of popisOsoba">
     - {{ popis.ime }}
  </ion-item>
</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 - API

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label floating>Ime i prezime</ion-label>

<ion-input type="text" [(ngModel)]="imenik.ime" [ngModelOptions]="{standalone: true}"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Broj telefona/mobitela</ion-label>

<ion-input type="number" [(ngModel)]="imenik.broj" [ngModelOptions]="{standalone: true}"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Poslovni ili privatni broj</ion-label>

<ion-select [(ngModel)]="imenik.vrsta" okText="Odaberi" cancelText="Odustani">

<ion-option value="PR">Privatni</ion-option>

<ion-option value="PO">Poslovni</ion-option>

</ion-select>

</ion-item>

<button ion-button full outline (click)="dodajOsobu(imenik);">Dodaj</button>

<h3>Popis osoba:</h3>

<ion-list *ngIf="popisOsoba">

<ion-item *ngFor="let popis of popisOsoba">

- {{ popis.ime }}

</ion-item>

</ion-list>

</ion-content>

Funkcionalnost će se nalaziti u home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from './../../providers/api/api';

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

  imenik:any = {};
  popisOsoba:any;

  constructor(public _navCtrl: NavController,
              public _api: ApiProvider) {

   this.imenik.ime = '';
   this.imenik.broj = null;
   this.imenik.vrsta = '';

  }

  ionViewWillEnter(){
     this.prikaziOsobe();
  }


  dodajOsobu(imenik){
   console.log(imenik);
  } 

  prikaziOsobe(){
     this._api.getUsers().subscribe(res => {
       this.popisOsoba = res;
       console.log(this.popisOsoba);
   })
  }

}

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

import { NavController } from 'ionic-angular';

import { ApiProvider } from './../../providers/api/api';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

imenik:any = {};

popisOsoba:any;

constructor(public _navCtrl: NavController,

public _api: ApiProvider) {

this.imenik.ime = '';

this.imenik.broj = null;

this.imenik.vrsta = '';

}

ionViewWillEnter(){

this.prikaziOsobe();

}

dodajOsobu(imenik){

console.log(imenik);

}

prikaziOsobe(){

this._api.getUsers().subscribe(res => {

this.popisOsoba = res;

console.log(this.popisOsoba);

})

}

Sada možemo provjeriti radi li uopće naša forma za unos.

Kada smo zaključili da forma ispisuje podatke koje smo upisali možemo dovršiti funkciju za unos osobe dodajOsobu(); koja će sada izgledati ovako

 dodajOsobu(imenik){
   console.log(imenik);

   this._api.postUser(imenik).subscribe(res => {
        //Osvježi popis osoba
        this.prikaziOsobe();
   })

  }

dodajOsobu(imenik){

console.log(imenik);

this._api.postUser(imenik).subscribe(res => {

//Osvježi popis osoba

this.prikaziOsobe();

})

}

I konačni rezultat izgleda ovako

Zaključak

Primjer koji ste ovdje imali priliku vidjeti najosnovnija je verzija i samo jedan od načina kako slati podatke iz Ionic aplikacije na API i ne preporučujem da ovaj način slanja podataka koristite u produkcijskim verzijama aplikacije. Zapravo, ako ga i koristite neće se dogoditi ništa loše, ali samo želim naglasiti da postoje i bolji načini o kojima ću nekom drugom prilikom.

{
    "name": "Ionic3API",
    "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/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.3",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "ionic": "3.9.2",
        "typescript": "2.3.4"
    },
    "description": "Ionic3API",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

{

"name": "Ionic3API",

"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/common": "4.1.3",

"@angular/compiler": "4.1.3",

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

"@angular/core": "4.1.3",

"@angular/forms": "4.1.3",

"@angular/http": "4.1.3",

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

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

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

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

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

"@ionic/storage": "2.0.1",

"cordova-android": "^6.2.3",

"cordova-plugin-console": "^1.0.5",

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

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

"cordova-plugin-statusbar": "^2.2.2",

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

"ionic-angular": "3.6.0",

"ionic-plugin-keyboard": "^2.2.1",

"ionicons": "3.0.0",

"rxjs": "5.4.0",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.12"

"devDependencies": {

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

"@ionic/cli-plugin-ionic-angular": "1.4.1",

"ionic": "3.9.2",

"typescript": "2.3.4"

"description": "Ionic3API",

"cordova": {

"plugins": {

"cordova-plugin-console": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-whitelist": {},

"ionic-plugin-keyboard": {}

"platforms": [

"android"

]

}

Čemu služi Ionic Native 3.x?

Ionic Native pruža vašoj aplikaciji korištenje nativnih funkcionalnosti mobilnih uređaja, bez toga vaša Ionic aplikacija ne bi bila ništa više od obične web stranice umotane u formu mobilne aplikacije.

Kako je bilo prije? (Ionic 1 & Cordova)

Za vrijeme dok je vladao Ionic 1, koristili smo Cordova pluginove koji su nam također omogućavali korištenje nativnih funkcionalnosti, ali tada je još uvijek vladao mit da oni ne mogu pristupiti svim onim funkcionalnostima kojima može neka nativna mobilna aplikacija. Naravno da je to bilo netočno, ali Ionic/Cordova/PhoneGap developerima se bilo teško snaći jer nije postojalo jedno centralno mjesto koje bi na jednostavan način pružilo pregled svih dostupnih pluginova s detaljnom dokumentacijom. I tada je stigao Ionic Native.

Ionic Native

Ionic Native je stigao kako bi jednom udarcem ubio dvije muhe. Kao prvo na jednom mjestu možete pronaći sve dostupne pluginove, a kao drugo postali su jednostavniji za korištenje. Ukratko, svaki Ionic native plugin omotan je TypeScript dekoratorom koju mu daje podršku za Promise, Observable i Typing. To je posebno korisno kada se zna da većina tih pluginova nije imala tu vrstu podrške. Također, svaki se plugin može koristiti kao modul u vašem TypeScript ili ES6+ projektu.

Ako ste u trenutku kada je došao Ionic Native imali aktivan Ionic1/Angular1 projekt koji koristi ngCordova pluginove vjerujem da ste se već tada oprostili od njih i omogućili im novu mladost prelaskom na Ionic Native. Ako niste možete to učiniti na način da umjesto ngCordova uvezete ionic.native, objavio sam blog post o tome pod naslovom “Što je i čemu služi ngCordova unutar Ionic aplikacije?“. Prilikom prijelaza svakako provjerite dokumentaciju za svaki slučaj, iako bi većina trebala raditi bez ikakvih problema.

Kako se koristi Ionic Native?

Za početak potrebna je instalacija

npm install ionic-native --save

1	npm install ionic-native --save

Za potrebu ovog primjera recimo da želite dodati AdMob, Device i SQLite i da ćete ih sve dodati u home.ts

Instalirate ih naredbom

$ ionic cordova plugin add cordova-plugin-example-name

1	$ ionic cordova plugin add cordova-plugin-example-name

I dodate u home.ts

import { AdMob, Device, SQLite, SQLiteObject } from 'ionic-native';

1	import { AdMob, Device, SQLite, SQLiteObject } from 'ionic-native';

Ionic Native 3.x

Ionic Native 3.x stigao je ranije ove godine s podrškom za preko 130 nativnih funkcionalnosti. 3.x donosi drastično smanjenje paketa koda (reduced code bundle size). To se postiže na način da prilikom dodavanja plugina u projekt dodaje samo kod koji je potreban da bi taj plugin radio čime se postiže smanjenje od oko 15% u ukupnoj težini datoteka vezanih uz pluginove.

Druga velika prednost 3.x je mogućnost simuliranja (Plugin Mocking)rada bilo kojeg od 130 pluginova direktno u web pregledniku. Znači ne treba vam niti simulator niti fizički uređaj kako bi testirali određeni Ionic Native 3.x plugin. Ipak, moja preporuka i savjet je da svakako koristite neki fizički mobilni uređaj za testiranje jer on će vam dati pravu sliku onoga što radite i što trebate raditi.

Ionic Native 3.x ne možete koristiti u Ionic/Angular 1.x projektima. Međutim to ne bi trebao biti veliki problem jer imate Ionic Native 2.x

Kako se koristi Ionic Native 3.x?

Za početak potrebna je instalacija

npm install @ionic-native/core --save

1	npm install @ionic-native/core --save

Nakon toga spremni ste za dodavanje pluginova. Za potrebu ovog primjera recimo da želite dodati AdMob, Device i SQLite i da ćete ih sve dodati u home.ts

Instalirate ih naredbom

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

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

I dodate u home.ts

import { AdMob } from '@ionic-native/admob';
import { Device } from '@ionic-native/device';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

import { AdMob } from '@ionic-native/admob';

import { Device } from '@ionic-native/device';

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

Zaključak

Razlog za ovaj blog post su nekolicina emailova koje sam primio, a koji se tiču nekih mojih tutorijala na ovom blogu koje su posjetitelji s manje ili više uspjeha išli rekonstruirati. Kamen spoticanja bili su pravi Ionic Native pluginovi jer imam seriju starijih blog postova koji koriste Ionic Native, a kasnije seriju blog postova koji koriste Ionic Native 3.x pa bi me posjetitelji znali pitati zašto je to različito tj. nije im bilo jasno jel to jednostavno moj stil ili to tako mora biti.

Kako god bilo nadam se da će ovaj blog post dati odgovor na ta pitanja i riješiti te nedoumice, kako za pitanja koja su mi stizala do sada tako i za pitanja koja će mi tek stići.

Ionic – automatska prijava u aplikaciju

Ovo je blog post o temi o kojoj se puno ne govori, ali koja se podrazumijeva za gotovo sve Ionic aplikacije koje sadržavaju ekran za prijavu.

Kada imate svoj API za prijavu ovo je jedan od načina kako korisnicima omogućiti automatsku prijavu u aplikaciju bez potrebe da svaki put prilikom pokretanja unose korisničko ime i lozinku. Znači, korisničko ime i lozinku trebaju upisati samo prvi put.

U nastavku možete vidjeti kako korisnicima omogućiti da ostanu prijavljeni u aplikaciju i nakon što se aplikacija zatvori.

Pretpostavka

Imate Ionic aplikaciju s ekranom za prijavu. Korisnik pokrene aplikaciju, pojavi se ekran za prijavu, korisnik unese korisničko ime i lozinku i nakon klika na gumb, pod uvjetom da je unio točne podatke, pojavi mu se početni ekran Ionic aplikacije.

Nakon nekog vremena korisnik ugasi aplikaciju i odloži mobilni uređaj. Kasnije ponovno želi pokrenuti Ionic aplikaciju i ponovno mora unositi korisničko ime i lozinku i tako svaki put.

Ako pretpostavimo da samo jedan korisnik koristi taj mobilni uređaj jasno je da takav način korištenja aplikacije nije najsretnije rješenje i da tom korisniku treba omogućiti jednostavniji i brži način prijave u aplikaciju tj. omogućiti korisniku da ostane prijavljen sve dok se sam ne odluči odjaviti.

localStorage kao rješenje

To ćemo postići koristeći localStorage.

Spremanje

Nakon što je korisnik uspješno prijavljen res.status == 'ok' spremit ćemo podatak o njegovom korisničkom imenu localStorage.setItem('username', res.username); u localStorage.

Znači taj se podatak sprema isključivo u slučaju kada je korisnik uspješno prijavljen i zato se možemo pouzdati u njega.

login(username,password){

    this.user.username = username;
    this.user.password = password;

     this._api.userLogin(this.user).subscribe(res => {

      if(res.status == 'ok'){
      //Spremanje podataka lokalno nakon uspješne prijave
      localStorage.setItem('username', res.username);

        this._navCtrl.setRoot(Dashboard);
      } else {
        this.loginFailed();
      }

    });

}

this.user.username = username;

this.user.password = password;

this._api.userLogin(this.user).subscribe(res => {

if(res.status == 'ok'){

//Spremanje podataka lokalno nakon uspješne prijave

localStorage.setItem('username', res.username);

this._navCtrl.setRoot(Dashboard);

} else {

this.loginFailed();

}

});

}

Korištenje

Prilikom svakog sljedećeg pokretanja aplikacije vršit će se provjera postoji li podatak o korisničkom imenu u lokalnoj memoriji localStorage.getItem('username') i pod uvjetom da postoji automatski se ulazi u aplikaciju i prikazuje početna stranica.

 initializeApp() {
    this._platform.ready().then(() => {

     //Ostani prijavljen
      if (localStorage.getItem('username')) {
           this.nav.push(Dashboard);
           this.nav.setRoot(Dashboard);
     } else {
        //
     }

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this._statusBar.styleDefault();
      this._splashScreen.hide(); 
    });
  }

initializeApp() {

this._platform.ready().then(() => {

//Ostani prijavljen

if (localStorage.getItem('username')) {

this.nav.push(Dashboard);

this.nav.setRoot(Dashboard);

} else {

}

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

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

this._statusBar.styleDefault();

this._splashScreen.hide();

});

}

Brisanje

U slučaju da više korisnika koristi jedan mobilni uređaj omogućit ćemo brisanje podatka iz lokalne memorije prilikom odjave. Na taj se način nekom drugom korisniku omogućava da se samostalno prijavu u aplikaciju i ostane prijavljen sve dok se i on ne odluči odjaviti.

logout(){
  localStorage.clear();
  this.nav.setRoot(Login);
}

logout(){

localStorage.clear();

this.nav.setRoot(Login);

}