Arhiva Mobile - Stranica 11 od 18

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"

]

}

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

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)

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

$ ionic start Ionic3Deploy blank

$ cd Ionic3Deploy

$ cordova platform add android

Sada instalirajte podršku za Cloud

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

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

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

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

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

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

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

<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().

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

}

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

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

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

{

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

]

}

Ionic 3 aplikacija za audio i video stream

S obzirom da je sredina ljeta i da su godišnji odmori u punom jeku što znači i manje zanimanja za ovakve teme danas idemo na jednu poprilično jednostavnu, a istovremeno korisnu.

Ako se odlučite raditi jednostavnu audio/video stram aplikaciju to možete učiniti pomoću Ionica i njegovog Ionic Native plugina pod nazivom Streaming Media.

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

$ ionic start Ionic3MediaStream blank --v2
$ cd Ionic3MediaStream

1 2	$ ionic start Ionic3MediaStream blank --v2 $ cd Ionic3MediaStream

Sada možemo instalirati Streaming Media plugin

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

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

I naravno, kao što je slučaj sa bilo kojim drugim Ionic Native pluginom, trebamo ga dodati u app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AppRate } from '@ionic-native/app-rate';
 
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StreamingMedia } from '@ionic-native/streaming-media';
 
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    StreamingMedia 
  ]
})
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 { AppRate } from '@ionic-native/app-rate';

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

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

import { StreamingMedia } from '@ionic-native/streaming-media';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

StreamingMedia

]

})

export class AppModule {}

Implementacija

Kreirat ćemo jednostavan ekran koji služi za prikaz kontrola za audio/video stream. Ovdje nema ništa posebno osim dva gumba koji služe za pokretanje audio tj. video streama.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 - Media Streaming
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button (click)="startVideo()" ion-button icon-end>
   Start Video
  <ion-icon name="play"></ion-icon>
</button>
  <button (click)="startAudio()" ion-button color="secondary" icon-end>
   Start Audio
  <ion-icon name="musical-notes"></ion-icon>
</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 - Media Streaming

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

Start Video

<ion-icon name="play"></ion-icon>

</button>

Start Audio

<ion-icon name="musical-notes"></ion-icon>

</button>

</ion-content>

Funkcionalnost se nalazi unutar unutar home.ts.

Pokretanjem startVideo() dobijemo sljedeće

Pokretanjem startAudio() dobijemo sljedeće ovisno o tome jesmo li odabrali bgImage ili bgColor.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { StreamingMedia, StreamingVideoOptions, StreamingAudioOptions } from '@ionic-native/streaming-media';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public _navCtrl: NavController,
              private _streamingMedia: StreamingMedia) {

  }

   startVideo() {
    let options: StreamingVideoOptions = {
      successCallback: () => { console.log('Finished Video') },
      errorCallback: (e) => { console.log('Error: ', e) },
      orientation: 'landscape' //portrait
    };
 
    this._streamingMedia.playVideo('https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', options);
  }
 
  startAudio() {
    let options: StreamingAudioOptions = {
      bgImage: 'https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Sound.png',
      successCallback: () => { console.log('Finished Audio') },
      errorCallback: (e) => { console.log('Error: ', e) },
      initFullscreen: false // iOS only!
    };
 
    this._streamingMedia.playAudio('https://traffic.libsyn.com/nineteennocturne/19Noc_MulberryHill.mp3', options);
  }

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

import { NavController } from 'ionic-angular';

import { StreamingMedia, StreamingVideoOptions, StreamingAudioOptions } from '@ionic-native/streaming-media';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController,

private _streamingMedia: StreamingMedia) {

}

startVideo() {

let options: StreamingVideoOptions = {

successCallback: () => { console.log('Finished Video') },

errorCallback: (e) => { console.log('Error: ', e) },

orientation: 'landscape' //portrait

};

this._streamingMedia.playVideo('https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', options);

}

startAudio() {

let options: StreamingAudioOptions = {

bgImage: 'https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Sound.png',

successCallback: () => { console.log('Finished Audio') },

errorCallback: (e) => { console.log('Error: ', e) },

initFullscreen: false // iOS only!

};

this._streamingMedia.playAudio('https://traffic.libsyn.com/nineteennocturne/19Noc_MulberryHill.mp3', options);

}

Ovdje imamo dvije funkcije startVideo() i startAudio() od kojih se svaka sastoji od objekta options.
Objekt options se može sastojati od sljedećih mogućnosti iz kojih je moguće vidjeti koliko je zapravo ovaj plugin ograničenim mogućnostima.

export interface StreamingVideoOptions {
    successCallback?: Function;
    errorCallback?: Function;
    orientation?: string;
}
export interface StreamingAudioOptions {
    bgColor?: string;
    bgImage?: string;
    bgImageScale?: string;
    initFullscreen?: boolean;
    successCallback?: Function;
    errorCallback?: Function;
}

export interface StreamingVideoOptions {

successCallback?: Function;

errorCallback?: Function;

orientation?: string;

}

export interface StreamingAudioOptions {

bgColor?: string;

bgImage?: string;

bgImageScale?: string;

initFullscreen?: boolean;

successCallback?: Function;

errorCallback?: Function;

}

Zaključak

I to je to! Napravili ste svoju prvu Ionic audio/video stream mobilnu aplikaciju. Još jednom napominjem, u slučaju da trebate kompleksnije rješenje možda je bolje da tražite dalje jer Streaming Media plugin služi za izradu jednostavnih audio/video stream aplikacija.

Ionic 3 – zatražite od korisnika da ocjeni vašu aplikaciju

Puno je stvari koje vašu Ionic aplikaciju mogu učiniti popularnom – odlično korisničko iskustvo, brzina, da je aplikacija korisniku zapravo korisna i dr. Ipak, da bi potencijalni korisnik uopće došao u priliku preuzeti i isprobati vašu Ionic aplikaciju treba ju pronaći na Google Play Store ili Apple Store. S obzirom da ondje postoje milijuni aplikacija koje se pomoću ocjena bore za svoj dio prostora pri vrhu popisa aplikacija jasno je zašto su ocjene važne.

Kada je korisnik zadovoljan najčešće ga uopće nećete čuti jer će koristiti aplikaciju i neće mu vjerojatno pasti na pamet dati vam ocjenu dok u slučaju da korisnik nije zadovoljan možete očekivati brze i konkretne povratne informacije bilo to u sklopu trgovine aplikacijama ili na nekom forumu ili blogu. Sada kada to znamo potrebno je pronaći način da se korisnici s pozitivnim iskustvom aktiviraju kako bi to svoje iskustvo podijelili s drugima.

U nastavku ćemo koristiti Ionic Native plugin – App Rate pomoću kojega se na jednostavan način može podsjetiti korisnika da može dati ocjenu.

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

$ ionic start Ionic3AppRate blank --v2
$ cd Ionic3AppRate

1 2	$ ionic start Ionic3AppRate blank --v2 $ cd Ionic3AppRate

Sada možemo instalirati App Rate

$ ionic cordova plugin add cordova-plugin-apprate
$ npm install --save @ionic-native/app-rate

1 2	$ ionic cordova plugin add cordova-plugin-apprate $ npm install --save @ionic-native/app-rate

I kao što je slučaj sa bilo kojim drugim Ionic Native pluginom trebamo ga dodati u app.module.ts

P.S. Ovdje obavezno uvezite i HttpModule jer ćete inače dobiti grešku i bijeli ekran.

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 { HttpModule } from '@angular/http';
import { AppRate } from '@ionic-native/app-rate';

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

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

import { AppRate } from '@ionic-native/app-rate';

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

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

AppRate

]

})

export class AppModule {}

Plugin se već sada može koristiti, ali mi ćemo ovdje stvar malo zakomplicirati kako bi nam kasnije bilo jednostavnije. Naime, napravit ćemo servis koji kasnije možemo na razne načine koristiti u bilo kojem dijelu aplikacije.

App Rate servis

Servis kreiramo naredbom

$ ionic generate provider rate-service

1	$ ionic generate provider rate-service

nakon čega na putanji /app/providers/rate-service/rate-service.ts dobijemo RateService.

Da bi naša aplikacija znala gdje uputiti korisnika kako bi dao ocjenu potreban je

App ID za iOS – to je broj koji dobijete kada registrirate aplikaciju na iTunes Connect.
package name za Android – to je zapravo id="com.ionicframework.ionic3apprate"

Sve zajedno to izgleda ovako:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AppRate } from '@ionic-native/app-rate';
import { Platform } from 'ionic-angular';

@Injectable()
export class RateService {

  appRate: any = AppRate;

  constructor(public _http: Http,
              private _appRate: AppRate,
              private _platform: Platform) {

    //console.log('Hello RateService Provider');
    this._platform.ready().then(
    () => {

        this._appRate.preferences = {
            displayAppName: 'Ionic3 - App Rate',
            storeAppURL: {
                ios: '000000000',
                android: 'market://details?id=com.tomislavstankovic.ionic3apprate'
            }
        }; 

    })

  }

          requestRating(){
            this._appRate.promptForRating(true);
          }

}

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

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

import 'rxjs/add/operator/map';

import { AppRate } from '@ionic-native/app-rate';

import { Platform } from 'ionic-angular';

@Injectable()

export class RateService {

appRate: any = AppRate;

constructor(public _http: Http,

private _appRate: AppRate,

private _platform: Platform) {

//console.log('Hello RateService Provider');

this._platform.ready().then(

() => {

this._appRate.preferences = {

displayAppName: 'Ionic3 - App Rate',

storeAppURL: {

ios: '000000000',

android: 'market://details?id=com.tomislavstankovic.ionic3apprate'

}

};

})

}

requestRating(){

this._appRate.promptForRating(true);

}

Implementacija servisa

Sada ćemo ranije kreirani servis implementirati u home.ts na način da se funkcija za ocjenu aplikacije automatski pozove kada se pokrene aplikacija.

Funkcionalnost je zapravo dosta jednostavna, a izgleda ovako

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RateService } from './../../providers/rate-service';

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

  constructor(public _navCtrl: NavController,
              public _rateService: RateService) {
 
    this._rateService.requestRating();

  }

}

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

import { NavController } from 'ionic-angular';

import { RateService } from './../../providers/rate-service';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers:[RateService]

})

export class HomePage {

constructor(public _navCtrl: NavController,

public _rateService: RateService) {

this._rateService.requestRating();

}

Dalje zapravo sve radimo koristeći

this._rateService.requestRating();

1	this._rateService.requestRating();

Treba imati na umu da će korisnik obavijest o ocjeni vidjeti svaki put kada se taj dio koda pokrene. Zato ga treba pažljivo koristiti jer naravno da ne želimo korisniku smetati s tom porukom svaki put kada pokrene aplikaciju.

Zato postoji bolja opcija.

Možemo proslijediti false na sljedeći način this._appRate.promptForRating(false); što će reći našoj aplikaciji da ne pokreće taj dio koda dok određeni uvjet nije zadovoljen. Taj uvjet zadajemo u našem servisu RateService .

this._appRate.preferences = {
            displayAppName: 'Ionic3 - App Rate',
            storeAppURL: {
                ios: '000000000',
                android: 'market://details?id=com.tomislavstankovic.ionic3apprate'
            },
            usesUntilPrompt: 3
        };

this._appRate.preferences = {

displayAppName: 'Ionic3 - App Rate',

storeAppURL: {

ios: '000000000',

android: 'market://details?id=com.tomislavstankovic.ionic3apprate'

usesUntilPrompt: 3

};

Ostale, naprednije, mogućnosti možete pronaći u službenoj dokumentaciji.

Zaključak

Vrlo je teško motivirati korisnike neke aplikacije da istoj daju ocjenu. Upravo zato postoji ovaj plugin kako bi olakšao developerima upravljanje scenarijem u kojemu oni sami mogu potaknuti korisnike tj. podsjetiti ih na to.

Naravno da s ovom funkcionalnošću treba biti pažljiv da se ne postigne kontraefekt.