Arhiva Razvoj - Stranica 17 od 27

Kako prebaciti WordPress blog na HTTPS?

U ovom ću blog postu pokazati postupak prebacivanja WordPress bloga s HTTP protokola na HTTPS. Ako to već niste učinili krajnje je vrijeme. Za prebacivanje WordPress bloga na HTTPS protokol treba vam plan, malo vremena, tehničkog znanja, backup i naravno SSL certifikat.

Uvod

Što je SSL?

SSL (Secure Sockets Layer) tehnologija je enkripcije podataka koji putuju između web-preglednika i web-poslužitelja koja pomaže u zaštiti korisničkih podataka. Web-adrese koje su zaštićene SSL protokolom započinju izrazom “https://“, a ne izrazom “http://“, pa zato neki SSL nazivaju i HTTPS. – Wiki

Postoji više vrsta SSL certifikata, a glavni su:
– DV (Domain Validation) – ovaj certifikat je dovoljan za vaš blog
– OV (Organization Validation)
– EV (Extended Validation)

Zašto SSL/HTTPS?

Nekoliko je razloga zašto bi trebali na svojem WordPress blogu koristiti SSL/HTTPS.

Sigurnost – Ovo je osnovni razlog zašto je potrebno koristiti SSL certifikat tj. HTTPS protokol. Za običan blog ovaj razlog i nije toliko bitan, osim možda za administratora, međutim web stranice/trgovine koje vrše naplatu putem kreditnih kartica svakako moraju koristiti SSL/HTTPS zbog potrebe za enkriptiranim prijenosom korisničkih podataka kao što su broj kreditne kartice, osobni identifikacijski broj (OIB) i sl.

Povjerenje/vjerodostojnost – Iako korisnici u ovom trenutku možda ne ostavljaju povjerljive podatke na vašem blogu oni mogu biti sigurni da s vaše strane ulažete maksimalne napore kako bi osigurali sigurno korištenje vašeg bloga. Na taj način podižete razinu povjerenja korisnika. To će posebno doći do izražaja kada većina stranica bude koristila SSL/HTTPS jer će tada biti neobično posjetiteljima vidjeti neku stranicu koja nije ‘zelena’.

Bolja pozicija na tražilicama/SEO – Google je i službeno objavio da je ne/korištenje HTTPS-a na web stranicama jedan od faktora koji će utjecati na rangiranje web stranica. To znači da je veća šansa da posjetitelji pronađu vašu web stranicu ako koristite SSL/HTTPS. Iako je taj faktor tek jedan mali dio onoga što Google gleda ipak nije zanemariv.

Migracija na HTTPS

Nabava i instalacija SSL certifikata

SSL certifikat možete kupiti ili koristiti neku od besplatnih verzija kao što su Let’s Encrypt ili AutoSSL od cPanela ako vaš pružatelj hosting usluga to dopušta.

Postavljanje SSL certifikata možete prepustiti hosting tvrtki ili odraditi samostalno putem npr. cPanela.

Kada je SSL certifikat uspješno instaliran možete pristupiti HTTS i HTTPS verziji vašeg bloga. Međutim postupak je daleko od gotovog jer potrebno je napraviti konkretne i trajne promjene kako bi vaš blog postojao samo u HTTPS verziji. Više o tome u nastavku.

Prije nastavka testirajte ispravnost SSL certifikata:
– https://www.ssllabs.com/ssltest/analyze.html
– https://www.sslshopper.com/ssl-checker.html

Promjena HTTP poveznica na HTTPS

WordPress sve poveznice sprema u MySQL bazu podataka. U bazi može biti više tisuća poveznica i sve ih je potrebno prebaciti na HTTPS. To ćemo ovdje učiniti ručno na način da ćemo preuzeti MySQL bazu podataka na lokalno računalo, otvoriti bazu koristeći Notepad++, promijeniti sve poveznice sa “http://” na “https://“ i ponovno vratiti bazu podataka na hosting.

1 – Izvoz MySQL baze na lokalno računalo

2 – Zamjena HTTP poveznica sa HTTPS

3 – Pražnjenje aktivne MySQL baze. Prije ovog koraka budite sigurni da imate kopiju originalne baze na lako dostupnom mjestu.

4 – Uvoz nove MySQL baze sa HTTPS poveznicama

Vaš blog bi blog sada trebao biti dostupan na HTTP i na HTTPS protokolu. Ako se nakon ovog koraka vaš blog ne prikazuje kako bi trebao znači da je došlo do greške prilikom rada s bazom podataka. Provjerite jeste li uspješno napravili uvoz nove MySQL baze i ako je potrebno ponovite postupak.

Ako se ne usudite raditi promjene ovakve vrste na MySQL bazi možete koristiti plugin Better Search Replace, ili neki drugi, koji obavlja isti posao.

Na stranici https://www.whynopadlock.com možete provjeriti postoji li još neka zaostala HTTP poveznica, ako ne postoji znači da ste sve do sada uspješno napravili i možete nastaviti dalje.

301 redirekcija

301 redirekcija je službeni standard koji se koristi za označavanje trajno premještenog sadržaja. U ovom slučaju vaš se blog trajno premješta sa HTTP protokola na HTTPS protokol.

Spojite se putem FTP-a na svoj hosting i unutar .htaccess datoteke dodajte sljedeće:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
</IfModule>

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

</IfModule>

S postavkama unutar .htaccess datoteke budite jako oprezni, obavezno u blizini imajte kopiju originalnih postavki i ako niste sigurni što napraviti kontaktirajte korisničku podršku tvrtke u kojoj imate zakupljen hosting paket ili se poslužite pluginom Easy HTTPS Redirection koji će za vas obaviti izmjenu postavki unutar .htaccess datoteke tj. dodati će sljedeće:

# BEGIN HTTPS Redirection Plugin
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
# END HTTPS Redirection Plugin

# BEGIN HTTPS Redirection Plugin

RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

</IfModule>

# END HTTPS Redirection Plugin

Ako sada posjetite HTTP verziju vašeg bloga trebali bi automatski biti preusmjereni na HTTPS verziju.

To je sve što se tiče vašeg hosting i WordPress bloga. Sve dalje što ću navesti tiče se marketing strane cijelog ovog postupka. S obzirom da većina prometa web stranica stiže od strane web tražilica kao što je Google Search potrebno je i njih obavijestiti o ovoj promjeni kako ne bi došlo do zabune ili još gore kako vas Google ne bi kaznio jer može pomisliti da imate dvije različite web stranice s potpuno istim sadržajem, a Google to ne voli.

Gdje su nestali ‘lajkovi’?

Nakon promjene na HTTPS protokol možete primijetiti da se stanje na gumbima za ‘šeranje‘ na društvene mreže resetiralo na nulu! Ako imate relativno aktivan blog čiji se sadržaj dijeli na društvenim mrežama nije lako za prihvatiti da je odjednom sve vraćeno na nulu. Također kada dođu novi posjetitelji vrlo lako mogu pomisliti da vaš sadržaj nikome nije zanimljiv jer se uopće ne dijeli.

Ipak nije sve izgubljeno. Postoji način za vraćanje statistike dijeljenja vašeg sadržaja. Rješenje se zove Social Warfare Pro.

Nakon što kupite plugin i aktivirate ga imate dostupnu opciju “Share Recovery” koja vam omogućava vraćanje teško stečenih ‘šerova‘ vašeg sadržaja na društvenim mrežama.

Nakon što pokrenete vraćanje broja ‘šerova‘ možete vidjeti da se stanje vratilo na prijašnje.

Google Search Console

Potrebno je kreirati novi Google Search Console profil za HTTPS
verziju vašeg bloga zato što Search konzola ne podržava promjenu adrese sa HTTP na HTTPS verziju.

Nakon toga kreirajte i dodajte novu sitemap.xml datoteku koja će vam pomoći u bržem indeksiranju. sitemap.xml možete generirati na adresi https://www.xml-sitemaps.com

Nakon što ste uspješno napravili novi HTTPS profil slobodno možete obrisati stari HTTP profil ako ga imate.

Google Analytics

Ako do sada niste koristili Google Analtycs onda je pravo vrijeme da počnete, no ako ste ga koristili potrebno je napraviti manje izmjene kako bi se počela prikupljati statistika i za vašu HTTPS verziju bloga.

Ako ovo ne napravite Google Analtycs više neće prikupljati vrlo korisnu statistiku posjećenosti vaših web stranica, a siguran sam da to ne želite.

Ažurirajte “postavke web entiteta”

i ažurirajte “postavke vlasničkog pregleda”

Zaključak

Osim ranije navedenog postoji još nešto što možete učiniti kako bi tranzicija na HTTPS prošla u najboljem redu. Svakako ažurirajte sve poveznice koje vode na vašu novu web stranicu.

Ovo je samo jedan od načina kako svoj WordPress blog možete prebaciti na HTTPS. Ja sam odabrao ovaj način što ne znači da morate i vi. U svakom slučaju naoružajte se strpljenjem i rezervirajte si nekoliko sati vremena samo za ovaj posao kako bi ga napravili kako treba i mogli mirno spavati.

Najgora stvar koju možete napraviti je žuriti i napraviti polovičan posao zbog kojeg vas i Google može kazniti iako ste imali najbolju namjeru, a da ne govorim koliko možete razočarati svoje posjetitelje kada dođu na vaš blog koji ne radi.

Nadam se da sam vam barem donekle uspio pojasniti postupak prebacivanja WordPress bloga sa HTTP protokola na HTTPS.

Za one koji žele znati više:

Uvod u Angular CLI

Kada želite razvijati aplikacije koristeći Angular imate tri mogućnosti, kreirati projekt ručno, preuzeti predložak projekta ili koristiti Angular CLI.

Prva opcija je spora i nema potrebe započinjati svaki novi projekt na taj način, iako je korisno barem jednom proći kroz taj postupak čisto iz razloga da se bolje upoznate s dijelovima od kojih se sastoji jedan Angular projekt. Druga opcija je automatizirana verzija prve opcije i vrlo brzo imate spremnu početnu strukturu Angular projekta. Treća opcija je koristeći Angular CLI i to je definitivno najbolja i najbrža opcija jer osim kreiranja Angular projekta nudi još puno toga, više o tome u nastavku.

Angular CLI – postavljanje

P.S. Kako bi mogli postaviti Angular CLI potrebno je prvo instalirati Node >= 6.9.0 i NPM >= 3.

Angular CLI instalira se jednostavnom naredbom:

$ npm install -g @angular/cli

1	$ npm install -g @angular/cli

I to je sve! Spremni ste za kreiranje prvog Angular projekta koristeći CLI.

P.S.2 Preporuka je da odmah instalirate i TypeScript.

$ npm install -g typescript

1	$ npm install -g typescript

Kreiranje Angular projekta

Novi se projekt kreira naredbom:

$ ng new naziv-projekta

1	$ ng new naziv-projekta

Struktura projekta izgleda ovako:

// end-to-end-testovi
|- e2e/
  |----- app.e2e-spec.ts
  |----- app.po.ts
  |----- tsconfig.e2e.json

// npm paketi
|- node_modules/

// javna verzija aplikacije. Ova će se mapa kreirati tek nakon pokretanja ng build
|- dist/

// ovdje ćete najviše vremena provesti prilikom razvoja aplikacije
|- src/
  |----- app/
      |----- app.component.css|html|spec.ts|ts
      |----- app.module.ts
  |----- assets/
  |----- environments/
      |----- environment.prod.ts|ts
  |----- favicon.ico
  |----- index.html
  |----- main.ts
  |----- polyfills.ts
  |----- styles.css
  |----- test.ts
  |----- tsconfig.app.json
  |----- tsconfig.spec.json
  |----- typings.d.ts

// overall configuration
|- .angular-cli.json  // glavna konfiguracijska datoteka
|- .editorconfig      // ako koristite VS Code
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

// end-to-end-testovi

|- e2e/

|----- app.e2e-spec.ts

|----- app.po.ts

|----- tsconfig.e2e.json

// npm paketi

|- node_modules/

// javna verzija aplikacije. Ova će se mapa kreirati tek nakon pokretanja ng build

|- dist/

// ovdje ćete najviše vremena provesti prilikom razvoja aplikacije

|- src/

|----- app/

|----- app.component.css|html|spec.ts|ts

|----- app.module.ts

|----- assets/

|----- environments/

|----- environment.prod.ts|ts

|----- favicon.ico

|----- index.html

|----- main.ts

|----- polyfills.ts

|----- styles.css

|----- test.ts

|----- tsconfig.app.json

|----- tsconfig.spec.json

|----- typings.d.ts

// overall configuration

|- .angular-cli.json // glavna konfiguracijska datoteka

|- .editorconfig // ako koristite VS Code

|- .gitignore

|- karma.conf.js

|- package.json

|- protractor.conf.js

|- README.md

|- tsconfig.json

|- tslint.json

Pokretanje projekta

Projekt možete pokrenuti koristeći naredbu:

$ ng serve

1	$ ng serve

Projekt možete otvoriti u web pregledniku na adresi http://localhost:4200

Ako želite da projekt za vrijeme razvoja mogu vidjeti i drugi korisnici u vašoj lokalnoj mreži pokrenite ga naredbom u kojoj navodite IP adresu vašeg računala npr.:

$ ng serve --host 192.168.1.11 --port 4202

1	$ ng serve --host 192.168.1.11 --port 4202

U ovom slučaju projekt se nalazi na adresi http://192.168.1.11:4202

Kreiranje dijelova aplikacije

Sve do sada je bilo samo uvod u najveću snagu koju Angular CLI ima, a to je

ng generate

1	ng generate

što vam omogućava kreiranje drugih gradivnih elemenata potrebnih za razvoj cjelovite Angular aplikacije.

Koristeći ng generate možete kreirati:

Component – ng g component my-new-component
Directive – ng g directive my-new-directive
Pipe – ng g pipe my-new-pipe
Service – ng g service my-new-service
Class – ng g class my-new-class
Guard – ng g guard my-new-guard
Interface – ng g interface my-new-interface
Enum – ng g enum my-new-enum
Module – ng g module my-new-module

Prilikom kreiranja elemenata kao što su component, directive ili pipe referenca na novi element će se automatski dodati u datoteku app.module.ts.

Verzija aplikacije za produkciju

Kada ste spremni vašu Angular aplikaciju pustiti u produkciju dovoljno je pokrenuti naredbu:

$ ng build tj. $ ng build --prod

U ovom se koraku kreira ranije spomenuta dist mapa u kojoj se nalazi produkcijska verzija vaše Angular aplikacije.

Zaključak

Angular CLI je svakim danom sve popularniji. Iz ranije viđenog nije teško zaključiti zašto je to tako.

Uvod u Ionic 3

Iako sam do sada objavio dosta blog postova vezanih uz razvoj hibridnih mobilnih aplikacija koristeći Ionic 3 ipak sam propustio objaviti jedan blog post koji će poslužiti kao uvod u sve te blog postove jednako kao što sam to učinio za Ionic 1 tj. Ionic 2.

Postavljanje razvojne okoline

Kako bi uopće mogli pokrenuti novi Ionic 3 projekt potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

Node.js LTS
Ionic i Cordova CLI pomoću naredbe: $ npm install -g cordova ionic
TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno vam je za razvoj Android, iOS i Windows Phone hibridnih mobilnih aplikacija. Jedina razlika s kojom se možete susresti je način instalacije jer na Windows baziranom računalu možete razvijati samo Android i Windows Phone aplikacije, dok vam je za iOS potreban Mac.

Prije nego krenete dalje provjerite jeste li sve ranije navedeno uspješno instalirali. To možete učiniti pomoću naredbi:

$ node -v
$ cordova –v
$ ionic –v

Pokretanje Ionic 3 projekta

Ako ste sve ranije navedeno uspješno instalirali već sada možete kreirati novi Ionic 3 projekt.

$ ionic start Ionic3Project

1	$ ionic start Ionic3Project

Prilikom toga sučelje će vas pitati koji početni predložak želite koristiti za svoj projekt.

Kao što možete vidjeti u animaciji iznad u ponudi je nekoliko predložaka:

tabs: $ ionic start Ionic3Projekt tabs
blank: $ ionic start Ionic3Projekt blank
sidemenu: $ ionic start Ionic3Projekt sidemenu
super: $ ionic start Ionic3Projekt super
conference: $ ionic start Ionic3Projekt conference
tutorial: $ ionic start Ionic3Projekt tutorial
aws: $ ionic start Ionic3Projekt aws

Svaki od sljedećih vrsta predložaka tj. projekata sastoji se od nekoliko važnih dijelova:

config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 3 aplikacija sastoji.
src – mapa u kojoj se nalaze datoteke s kojima ćete najviše raditi. Sve stranice, komponente, servise i ostalo kreirat ćete i uređivati ovdje.
platforms – mapa u kojoj se nalaze datoteke koje omogućavaju postavljanje Ionic 3 aplikacije na Android, iOS i Windows Phone uređaje
node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
plugins – mjesto gdje se nalaze svi dodaci kojima ćete proširiti mogućnosti Ionic 3 aplikacije
resources – sadržava ikone i početni ekran (splash screens) za dodane platforme

– Ionic tabs

$ ionic start Ionic3Tabs tabs
$ cd Ionic3Tabs
$ ionic serve

$ ionic start Ionic3Tabs tabs

$ cd Ionic3Tabs

$ ionic serve

– Ionic blank

$ ionic start Ionic3Blank blank
$ cd Ionic3Blank
$ ionic serve

$ ionic start Ionic3Blank blank

$ cd Ionic3Blank

$ ionic serve

– Ionic sidemenu

$ ionic start Ionic3Sidemenu sidemenu
$ cd Ionic3Sidemenu
$ ionic serve

$ ionic start Ionic3Sidemenu sidemenu

$ cd Ionic3Sidemenu

$ ionic serve

– Ionic super

$ ionic start Ionic3Super super
$ cd Ionic3Super
$ ionic serve

$ ionic start Ionic3Super super

$ cd Ionic3Super

$ ionic serve

– Ionic conference

$ ionic start Ionic3Conference conference
$ cd Ionic3Conference
$ ionic serve

$ ionic start Ionic3Conference conference

$ cd Ionic3Conference

$ ionic serve

– Ionic tutorial

$ ionic start Ionic3Tutorial tutorial
$ cd Ionic3Tutorial
$ ionic serve

$ ionic start Ionic3Tutorial tutorial

$ cd Ionic3Tutorial

$ ionic serve

– Ionic aws

$ ionic start Ionic3Aws aws
$ cd Ionic3Aws
$ ionic serve

$ ionic start Ionic3Aws aws

$ cd Ionic3Aws

$ ionic serve

Kako bi uspješno mogli pokrenuti Ionic 3 AWS projekt potrebno je zadovoljiti nekoliko preduvjeta koji nadilaze ovaj blog post tako da ću o tome više nekom drugom prilikom.

Pokretnje aplikacije na mobilnom uređaju

Kako bi Ionic 3 aplikaciju mogli pokrenuti na Android $ ionic run android tj. na iOS $ ionic run ios uređaju trebate dodati i pripadajuće platforme, a to možete učiniti pomoću sljedećih naredbi:

$ionic platform add android
$ionic platform add ios

1 2	$ionic platform add android $ionic platform add ios

P.S. iOS platformu možete dodati isključivo na Mac-u.

Zaključak

Kao što možete vidjeti sve ranije navedeno ne razlikuje se puno od Ionica 2 s tom razlikom što kod Ionica 3 poboljšan Ionic CLI, možete birati između više početnih predložaka i što se Ionic Native pluginovi instaliraju na drugačiji način uz dodatak podrške za Lazy Loading.

Ionic 3 – Korištenje, napredne, reaktivne forme

Objavio sam već nekoliko blog postova u kojima sam koristio obične, template-driven, forme dok ću u ovom blog postu pokazati primjer korištenja reaktivne forme tzv. reactive forms.

Postavljanje aplikacije

Za početak je potrebno kreirati novu Ionic aplikaciju.

$ ionic start Ionic3ReaktivnaForma blank
$ cd Ionic3ReaktivnaForma

1 2	$ ionic start Ionic3ReaktivnaForma blank $ cd Ionic3ReaktivnaForma

S obzirom da ćemo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule. To ćemo učiniti na način da u app.module.ts dodamo import { ReactiveFormsModule } from '@angular/forms'; .

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 { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {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 { ReactiveFormsModule } from '@angular/forms';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

ReactiveFormsModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Kreiranje reaktivne forme

Sada smo spremni za kreiranje reaktivne forme na stranici home.html tj. home.ts.

Forma će se sastojati od tri polja (korisničko ime, e-mail i lozinka). Sada možemo kreirati izgled reaktivne forme.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>
</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Logika će se nalaziti unutar home.ts. Ovdje imamo objekt korisnik i funkciju posaljiPodatke(korisnik){};.

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

import { FormControl, FormGroup } from '@angular/forms';

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

  constructor(public _navCtrl: NavController) {
     this.korisnik = new FormGroup({
      korisnicko_ime: new FormControl(''),
      email: new FormControl(''),
      lozinka: new FormControl('')
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

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

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController) {

this.korisnik = new FormGroup({

korisnicko_ime: new FormControl(''),

email: new FormControl(''),

lozinka: new FormControl('')

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Ako sada pokrenemo aplikaciju dobit ćemo sljedeće

Iako se ovo još uvijek puno ne razlikuje od primjera formi koje smo koristili u prijašnjim blog postovima ipak se kreće u smjeru onoga što s reaktivnim formama možemo i želimo postići. Više o tome u nastavku.

Napredne mogućnosti (FormBuilder)

Kako bi unutar naše forme kasnije mogli koristiti napredne mogućnosti dodatno ćemo prilagoditi logiku unutar home.ts datoteke na način da ćemo dodati FormBuilder klasu. Ako sada pokrenemo aplikaciju rezultat će biti isti kao na slici iznad.

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

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

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

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: ['']
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

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

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: ['']

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Proširivanje mogućnosti forme (FormArray)

Dodatna funkcionalnost naše forme stižu u obliku FormArray klase.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Sada ćemo proširiti funkcionalnost naše forme iz primjera iznad na način da ćemo dodati mogućnost unosa adrese i kućnog broja. Posebno zanimljiva će biti mogućnost dodavanja više adresa unutar iste forme tj. kreiranje niza adresa.

Unutar postojećeg objekta korisnik dodajemo niz adrese. Također, dodajemo i funkcije za dodavanje nove adrese dodajAdresu(); tj. brisanje adrese obrisiAdresu(i);.

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

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

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

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: [''],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._value);
  }

}

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

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: [''],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._value);

}

Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type="button" za gumbe za dodavanje i brisanje adrese jer ćemo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne želimo.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Ako sada pokrenemo aplikaciju forma će izgledati ovako

Validacija forme

U našoj trenutnoj formi možemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada ćemo to omogućiti koristeći Validators klasu.

Korisničko ime mora biti duže od 3 znaka, email mora imati ispravan oblik tj. mora sadržavati znak ‘@’, a lozinka ne smije biti duža od 9 znakova.

U našoj komponenti to izgleda ovako:

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

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._status);
    console.log(korisnik._value);
  }

}

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

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [Validators.required, Validators.email]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._status);

console.log(korisnik._value);

}

Dok forma nije validna korisnik ne smije imati mogućnost slanja podataka tj. mora mu se onemogućiti klik na gumb za slanje/spremanje podatka [disabled]="korisnik.invalid".

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>
      <p>Korisničko ime treba biti duže od 3 znaka!</p>
    </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>
      <p>E-mail nije ispravan!</p>
    </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="password" formControlName="lozinka"></ion-input>
   </ion-item>
      <ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>
      <p>Lozinka ne može biti duža od 9 znakova!</p>
      </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>

<p>Korisničko ime treba biti duže od 3 znaka!</p>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>

<p>E-mail nije ispravan!</p>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="password" formControlName="lozinka"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>

<p>Lozinka ne može biti duža od 9 znakova!</p>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Forma sada izgleda ovako

Kreiranje prilagođenog validatora

Ovisno o potrebama moguće je napraviti i prilagođene validatore. Npr. ako pogledate validator za e-mail adresu iz gornjeg primjera možete vidjeti da on dopušta unos e-mail adrese sa nastavkom (.com) koji ima više od 3 znaka. Zato ćemo mi sada napraviti prilagođeni validator koji će takvu adresu označiti kao neispravnu.

Unutar mape Ionic3ReaktivnaForma\src\ kreirati ćemo novu mapu \validators\ sa datotekom email.ts

import { FormControl } from '@angular/forms';

export class EmailValidator {
    static isValid(control: FormControl){
        const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

        if (res) {
            return null;
        }

        return {'invalidEmail': true};
    }
}

import { FormControl } from '@angular/forms';

export class EmailValidator {

static isValid(control: FormControl){

const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

if (res) {

return null;

}

return {'invalidEmail': true};

}

Prema tome možemo prilagoditi i home.ts datoteku

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

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

  }

...

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

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

...

Validacija e-mail polja sada izgleda ovako

Bonus – provjera tijekom unosa

Još jedna od mogućnosti koju možete koristiti je i provjera unešenih podataka u polje forme u trenutku unosa. U ovom ćemo primjeru provjeravati samo polje koje se tiče unosa korisničkog imena.

...
 constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

    const nameControl = this.korisnik.get('korisnicko_ime');
    nameControl.valueChanges.forEach(
      (value: string) => this.changeLog.push(value)
    );

  }
...

...

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

const nameControl = this.korisnik.get('korisnicko_ime');

nameControl.valueChanges.forEach(

(value: string) => this.changeLog.push(value)

);

}

...

Na formi ćemo to prikazati na sljedeći način:

...
</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

<div *ngFor="let ime of changeLog">{{ ime }}</div>

</ion-content>

...

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Na kraju to izgleda ovako:

Zaključak

Ovisno o potrebama koristiti ćete reactive ili template-driven forme. Ne postoji bolje ili lošije rješenje jer sve ovisi što vam u kojem trenutku treba.

Ako trebate napraviti jednostavniju tj. manju formu možete bez problema koristiti template-driven formu. To su forme koje sadržavaju [(ngModel)]="objekt".

Kada počnete raditi veće i kompleksnije forme svakako se prebacite na reactive forme. Jednostavnije ih je održavati i testirati plus što se sva logika nalazi na jednom mjestu.

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.