Tomislav Stanković, Autor na Tomislav Stanković

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

Kako postaviti i koristiti WordPress REST API: Osnovna provjera autentičnosti

U ovom ću blog postu pokazati kako omogućiti korištenje WordPress REST API-ja sa CRUD (Create, Read, Update, Delete) mogućnostima dok za neki od sljedećih blog postova planiram napraviti jednostavnu Ionic aplikaciju koja će koristiti ovdje kreiran API.

Dokumentacija koju koristim za ovaj blog post: REST API Handbook

Uvod

Za početak je važno znati da autentifikacija nije isto što i autorizacija. U ovom blog postu govorit ćemo o autentifikaciji koja označava proces provjere točnosti pristupnih podataka korisnika koji traži pristup određenom sustavu. To znači da autentificirani korisnik može izvršavati CRUD operacije uz uvjet da pri svakom zahtjevu pošalje “dokaz” o valjanosti pristupnih podataka.

S druge strane, autorizacija identificira i dodjeljuje pristup resursima sustava. U slučaju WordPressa to možete vidjeti kroz različite uloge koje je moguće zadati korisnicima: pretplatnik, suradnik, autor, urednik, administrator. Vidjet ćete i kasnije da prilikom korištenja API-ja autor neće moći npr. promijeniti parametre nekog blog posta dok će urednik ili administrator to moći.

Priprema

Za pripremu su potrebni:

JSON Auth plugin https://github.com/WP-API/Basic-Auth
Korisnik s kojim ćemo vršiti autentifikaciju

Osnovna autentifikacija (Basic authentication) podrazumijeva slanje korisničkog imena i lozinke u zaglavlju (header) svakog zahtjeva (request).

Kako bi uopće omogućili osnovnu provjeru autentičnosti potrebno je instalirati plugin Basic Authentication handler (https://github.com/WP-API/Basic-Auth).

Sada ćemo kreirati korisnika čije ćemo pristupne podatke (korisničko ime: TestKorisnik, lozinka: OvoJeLozinka) koristiti u zaglavlju svih zahtjeva koje ćemo slati.

Sada smo spremni i možemo testirati slanje zahtjeva koristeći Postman (A complete API Development Environment).

Kreiranje blog posta (POST /wp/v2/posts)

Za kreiranje novog blog posta potrebni su:

URL na koji ćemo slati zahtjev
Korisničko ime i lozinka
Tijelo poruke (naslov, sadržaj i dr.)

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za kreiranjem novog blog posta šaljemo na URL “…/wp-json/wp/v2/posts/”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– S obzirom da se ovdje radi o kreiranju novog blog posta uz zaglavlje šaljemo i tijelo (body) poruke koje se sastoji od dvije stavke, naslova i statusa.
– Na kraju dobijemo status 201 što znači da je blog post uspješno kreiran što se može vidjeti unutar sučelja WordPressa.

Uređivanje blog posta (POST /wp/v2/posts/id)

Za uređivanje postojećeg blog posta potrebni su:

URL na koji ćemo slati zahtjev
ID blog posta kojeg želimo urediti
Korisničko ime i lozinka
Tijelo poruke (neki od parametara)

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za kreiranjem novog blog posta šaljemo na URL “…/wp-json/wp/v2/posts/id”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– S obzirom da se ovdje radi o uređivanju postojećeg blog posta uz zaglavlje šaljemo i tijelo (body) poruke koje se može sastojati od nekoliko parametara. Konkretno u ovom primjeru promijenit ćemo autora i kategoriju blog posta.
– Na kraju dobijemo status 200 što znači da je blog post uspješno uređen što se može vidjeti unutar sučelja WordPressa.

Vratimo se nakratko na pitanje autorizacije. Kada sam u jednom od prethodnih koraka kreirao korisnika “TestKorisnik” stavio sam mu ulogu “Autor” međutim korisnik s tom ulogom nema sva prava i nije u mogućnosti izvršiti gore navedenu radnju jer dobije poruku sa statusom 403.

{
    "code": "rest_cannot_edit_others",
    "message": "Nemate dopuštenje ažurirati objave u ulozi ovog korisnika",
    "data": {
        "status": 403
    }
}

{

"code": "rest_cannot_edit_others",

"message": "Nemate dopuštenje ažurirati objave u ulozi ovog korisnika",

"data": {

"status": 403

}

Međutim, kada sam mu dodijelio ulogu “Urednik” korisnik je bez problema mogao putem API-ja izvršiti uređivanje blog posta.

Brisanje blog posta (DELETE /wp/v2/posts/id)

Za brisanje postojećeg blog posta potrebni su:

URL na koji ćemo slati zahtjev
ID blog posta kojeg želimo urediti
Korisničko ime i lozinka

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za brisanjem postojećeg blog posta šaljemo na URL “…/wp-json/wp/v2/posts/id”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– Na kraju dobijemo status 200 što znači da je blog post uspješno obrisan što se može vidjeti unutar sučelja WordPressa.

Dohvaćanje svih blog postova (GET /wp/v2/posts)

Za dohvaćanje svih blog postova potreban je samo URL na koji će se slati zahtjev.

Dohvaćanje jednog blog posta (GET /wp/v2/posts/id)

Za dohvaćanje jednog blog posta potrebni su:

URL na koji ćemo slati zahtjev

ID blog posta kojeg želimo prikazati

Korisničko ime i lozinka

Objavljeno dana 03/09/201705/01/2019Kategorije Backend, RazvojOznake CRUD, Postman, WordPress REST APIOstavite komentar na Kako postaviti i koristiti WordPress REST API: Osnovna provjera autentičnosti

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

Shell

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

1
2
3

$ 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" } ] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  "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

Shell

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

Shell

$ ionic generate provider api

1

$ ionic generate provider api

Servis za API će izgledati ovako

api.ts
JavaScript

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()); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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.

home.html
XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<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

home.ts
JavaScript

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); }) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

JavaScript

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

1
2
3
4
5
6
7
8
9

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.

package.json
JavaScript

{ "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" ] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

{
    "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"
        ]
    }
}

Objavljeno dana 27/08/201705/01/2019Kategorije Mobile, RazvojOznake API, Ionic, Ionic 3, JSON ServerOstavite komentar na Ionic 3 – Slanje podataka na API

Ionic 3 – Primjeri najbolje prakse

Primjeri najbolje prakse koje ćete vidjeti u nastavku samo su preporuka kako nešto napraviti tj. još jedan od načina kako nešto napraviti. Ono što se meni čini logičnim ili ispravnim vama se možda neće činiti i to je u redu. Svatko ima neki svoj način. Ako imate nešto za dodati slobodno se javite u komentarima.

Ništa jQuery, samo Angular

Ako ste front-end developer onda sigurno znate što je i čemu služi jQuery i može biti vrlo izazovno koristiti neku jQuery “foru” kako bi riješili nešto u svojoj Ionic aplikaciji iako je Angular više nego sposoban napraviti isto ili još i više.

Probajte ne koristiti jQuery unutar Ionica jer ako ste to napravili jednom i sve je bilo u redu vrlo je vjerojatno da ćete to napraviti još koji put kako bi što brže riješili neki problem. S vremenom ćete si otežati testiranje (debugging) i može doći do problema koji tu zapravo nisu trebali niti postojati. Kada miješate “dva svijeta” rezultat često neće biti onakav kakvog ste očekivali.

Dizajn sučelja

Ne izmišljajte toplu vodu i ne komplicirajte si život raznim i nepotrebnim CSS klasama. Ionic pruža set vrlo korisnih i jednostavnih dodataka za dizajn sučelja vaše Ionic aplikacije.

Jasno je da ovi dodatci ne mogu pokriti sve scenarije s kojima se možete susresti, ali olakšavaju rad s onim najčešćim potrebama svakog Ionic developera.

Također, Ionic je nedavno predstavio Responsive Grid koji je vrlo blizak Bootstrapu. Iskoristite to.

Životni ciklus (Lifecycle Events)

Svaka stranica koju napravite u Ionic aplikaciji ima svoj životni ciklus. Od trenutka kada se stranica učita, preko u potpunosti učitane stranice pa sve do odlaska na drugu stranicu i onda taj ciklus kreće iz početka. Kako bi mogli reći Ionicu što želite da se izvrši u nekoj od tih faza koristite neke od mogućnosti upravljanja fazama izvršavanja životnog ciklusa.

ionViewDidLoad

ionViewWillEnter

ionViewDidEnter

ionViewWillLeave

ionViewDidLeave

ionViewWillUnload

ionViewCanEnter

ionViewCanLeave

Ne ponavljajte se i odvajajte kod

Prilikom razvoja aplikacije dobro isplanirajte sve funkcionalnosti i pokušajte odvojiti zajedničke dijelove koda u servise koje ćete koristiti u ostatku aplikacije tako da se ne ponavljate u svakoj komponenti.

Npr. ako želite koristiti SQLite postoje dva načina. Prvi način je da sve upite na bazu pozivate u svakoj komponenti u kojoj radite s lokalnom bazom, a drugi način je putem odvojenog servisa koji služi samo jednoj svrsi, a to je rad s lokalnom bazom na jednom mjestu. Drugi način je svakako jednostavniji za testiranje i kasnije uređivanje.

Vanjske skripte

Objavio sam jedan blog post o korištenju vanjskih skripti unutar Ionic aplikacije i kao što možete vidjeti u naredbama koristim prefiks --save. Koristite ga i vi jer ćete se inače poprilično iznenaditi kada pokrenete $ npm install i shvatite da aplikacije iz nekog nepoznatog razloga ne radi kako bi trebala tj. ne radi uopće.

Prefiks --save će sve reference na vanjske skripte/pakete spremiti u datoteku package.json tako da ste kasnije mirni. To je posebno korisno kada radite u timu.

I pokušajte ne koristiti isključivo CDN (content delivery network) skripte, pogotovo ako želite da vam aplikacija radi i izvan mreže (offline).

Objavljeno dana 19/08/201705/01/2019Kategorije Mobile, RazvojOznake Ionic 3, Ionic FrameworkOstavite komentar na Ionic 3 – Primjeri najbolje prakse

Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Kada napravite promjenu u svojoj Ionic aplikaciji i želite tu promjenu poslati svim korisnicima jedino što možete napraviti je pripremiti novu verziju aplikacije, poslati ju na Google Play Store ili Apple Store i čekati da oni odobre novu verziju koja će tek tada stići korisnicima. To se može poprilično odužiti i tu ne možete ništa napraviti osim čekati.

U slučajevima kada su te promjene tek kozmetičke bilo bi dobro imati na raspolaganju brži i jednostavniji način slanja ažurirane verzije aplikacije korisnicima. Taj način zove se Ionic Deploy.

Uvod

Ionic Deploy predstavljen je 2015. godine, a omogućava brži i jednostavniji način ažuriranja aplikacije. Nažalost te su promjene ograničene samo na one kozmetičke vezane uz HTML, JS i CSS što znači da u slučaju dodavanja novih Ionic Native pluginova trebate ići standardnim, Google Play Store ili Apple Store, putem.

Live deployments let you publish web assets such as HTML, JS, and CSS directly to your users without going through the app store. – Ionic Services Deploy

Kako bi Ionic Deploy mogao raditi potrebne su četiri stvari:

Ionic aplikacija sa svojim APP ID-em

Korisnički račun na Ionic Cloud

Povezati Ionic Cloud sa Ionic aplikacijom

Kreirati Security Profiles

Priprema

Pokrenite novi Ionic projekt i odmah dodajte Android platformu. (P.S. U ovom blog postu radim samo sa Android platformom)

Shell

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

1
2
3

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

Sada instalirajte podršku za Cloud

Shell

$ npm install @ionic/cloud-angular --save

1

$ npm install @ionic/cloud-angular --save

i dodajte u app.module.ts.

APP_ID iz sljedećeg koraka kopirajte ovdje.

app.module.ts
JavaScript

import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; const cloudSettings: CloudSettings = { 'core': { 'app_id': 'APP_ID' } }; @NgModule({ declarations: [ ... ], imports: [ IonicModule.forRoot(MyApp), CloudModule.forRoot(cloudSettings) ], bootstrap: [IonicApp], entryComponents: [ ... ], providers: [ ... ] }) export class AppModule {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  }
};

@NgModule({
  declarations: [ ... ],
  imports: [
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [ ... ],
  providers: [ ... ]
})
export class AppModule {}

Nakon toga na adresi https://apps.ionic.io/ registrirajte Ionic Cloud korisnički račun, ako već niste. Nakon prijave sučelje će biti prazno.

Sada ćete poslati Ionic aplikaciju u Ionic Cloud sučelje. To se radi pomoću naredbe

Shell

$ ionic io int

1

$ ionic io int

Ako sada pogledate Ionic Cloud sučelje vidjet ćete svoju Ionic aplikaciju, a ispod naziva aplikacije nalazi se APP ID.

I još je potrebno kreirati Security Profile. To radite klikom na kotačić s desne strane pored naziva aplikacije unutar Ionic Cloud sučelja.

Nakon kreiranja produkcijskog certifikata potrebno ga je postaviti. U slučaju Androida to se radi korištenjem keystorea. Ako ste ikada radili postavljanje aplikacije na Google Play Store onda ste već upoznati s postupkom izrade keystorea.

Shell

$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg RSA -keysize 2048 -validity 10000

1

$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg  RSA -keysize 2048 -validity 10000

Jako je važnu da ovu datoteku i lozinku zapamtite jer će vam trebati za sve kasnije nadogradnje aplikacije.

Datoteku NazivAplikacije.keystore prebacite na radnu površinu (Desktop) kako bi vam bila lako dostupna. Klikom na Edit u gornjoj slici dobit ćete sljedeće

Uvezite keystore datoteku i unesite njezinu lozinku. I to je to!

Postavljanje funkcionalnosti

Sada kreće prava stvar i napokon možete početi s postavljanjam i korištenjem Ionic Deploy funkcionalnosti. Instalirajte Ionic Deploy plugin.

Shell

$ cordova plugin add ionic-plugin-deploy --save

1

$ cordova plugin add ionic-plugin-deploy --save

Ekran aplikacije sadržavat će samo jedan gumb za provjeru ažuriranja. Također, ovo se može i automatizirati unutar npr. app.component.ts na način da se provjera automatski vrši prilikom pokretanja aplikacije i bez potrebe za klikom na gumb, ali za potrebu ovog primjera provjera ide klikom na gumb.

home.html
XHTML

<ion-header> <ion-navbar> <ion-title> Ionic3 - Deploy </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full color="primary" (click)="checkIonicDeployUpdate()">Ionic Deploy Update</button> </ion-content>

1
2
3
4
5
6
7
8
9
10
11
12
13

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

<ion-content padding>

  <button ion-button full color="primary" (click)="checkIonicDeployUpdate()">Ionic Deploy Update</button>

</ion-content>

Funkcionalnost se sastoji od jedne funkcije checkIonicDeployUpdate() koja vrši preuzimanje ažuriranja this._deploy.download(), otpakiravanje ažuriranja this._deploy.extract() i učitavanje ažuriranja this._deploy.load().

home.ts
JavaScript

import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; import { Deploy } from '@ionic/cloud-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public _alert: AlertController, public _deploy: Deploy) { } checkIonicDeployUpdate(){ this._deploy.check().then((snapshotAvailable: boolean) => { if(snapshotAvailable){ let alert = this._alert.create({ title: 'App Update', subTitle: 'New version of this app will be installed now...', buttons: ['Okay'] }) alert.present(); this._deploy.download().then(() => { return this._deploy.extract().then(() => { let alert = this._alert.create({ title: 'Update ready', subTitle: 'App will now restart...', buttons: [{ text: 'Restart', handler: data => { this._deploy.load(); } }] }) alert.present(); }); }); } else { let alert = this._alert.create({ title: 'No updates', subTitle: 'Your app is up to date!', buttons: ['Okay'] }) alert.present(); } }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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

import { Deploy } from '@ionic/cloud-angular';

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

  constructor(public _alert: AlertController,
              public _deploy: Deploy) {
              }

  checkIonicDeployUpdate(){
      this._deploy.check().then((snapshotAvailable: boolean) => {
         if(snapshotAvailable){
           let alert = this._alert.create({
             title: 'App Update',
             subTitle: 'New version of this app will be installed now...',
             buttons: ['Okay']
           })
            alert.present();
            this._deploy.download().then(() => {
                 return this._deploy.extract().then(() => {
                      let alert = this._alert.create({
                        title: 'Update ready',
                        subTitle: 'App will now restart...',
                        buttons: [{
                          text: 'Restart',
                          handler: data => {
                            this._deploy.load();
                          }
                        }]
                      })
                      alert.present();
                 });
            });
         } else {
           let alert = this._alert.create({
             title: 'No updates',
             subTitle: 'Your app is up to date!',
             buttons: ['Okay']
           })
            alert.present();
         }
      });
  }

}

Aplikacija je u ovom trenutku spremna za korištenje i slobodno ju možete ponuditi korisnicima. Ako kliknu na gumb za provjeru ažuriranja korisnici će dobiti sljedeće

Korištenje funkcionalnosti

Pretpostavimo da su korisnici instalirati vašu Ionic aplikaciju i da ju bez problema koriste. U međuvremenu odlučite npr. promijeniti pozadinsku boju početnog ekrana i boju gumba za provjeru ažuriranja.

Slanje nove verzije aplikacije na Ionic Cloud vrši se pomoću naredbe

Shell

$ ionic upload --note "This is first deploy" --deploy production

1

$ ionic upload --note "This is first deploy" --deploy production

I odmah na adresi https://apps.ionic.io/ možete vidjeti novu verziju aplikacije.

Ako sada pokrenete aplikaciju i kliknete na gumb za provjeru nadogradnji dobit ćete novu verziju aplikacije.

Zaključak

Osobno, do sada nisam u produkciji ozbiljnije koristio alate vezane uz Ionic Cloud kao što su Auth, Push i Package upravo zbog toga što sam se bojao ovakvih poruka:

Ipak, Ionic Deploy je vrlo praktičan način ažuriranja Ionic aplikacija, ako ništa drugo onda barem za vrijeme razvoja i testiranja.

package.json
JavaScript

{ "name": "ionic-deploy", "version": "0.0.0", "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/cloud-angular": "^0.12.0", "@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.1", "cordova-plugin-statusbar": "2.2.2", "cordova-plugin-whitelist": "1.3.1", "ionic-angular": "3.6.0", "ionic-plugin-deploy": "~0.6.7", "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-cordova": "1.6.2", "@ionic/cli-plugin-ionic-angular": "1.4.1", "ionic": "3.7.0", "typescript": "2.3.4" }, "cordovaPlugins": [ "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-statusbar", "cordova-plugin-device", "cordova-plugin-splashscreen", "ionic-plugin-keyboard" ], "cordovaPlatforms": [], "description": "Ionic3Deploy: An Ionic project", "cordova": { "plugins": { "cordova-plugin-console": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-whitelist": {}, "ionic-plugin-deploy": {}, "ionic-plugin-keyboard": {} }, "platforms": [ "android" ] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

{
    "name": "ionic-deploy",
    "version": "0.0.0",
    "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/cloud-angular": "^0.12.0",
        "@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.1",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-angular": "3.6.0",
        "ionic-plugin-deploy": "~0.6.7",
        "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-cordova": "1.6.2",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "ionic": "3.7.0",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "Ionic3Deploy: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-deploy": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Objavljeno dana 13/08/201705/01/2019Kategorije Mobile, RazvojOznake Ionic Cloud, Ionic Deploy, Ionic ProOstavite komentar na Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Brojevi stranica objava

Prethodna stranica Stranica 1 … Stranica 31 Stranica 32 Stranica 33 … Stranica 62 Sljedeća stranica