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

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

Ionic 3 – Autocomplete polje za unos

Iako Ionic raspolaže s dosta različitih i korisnih komponenti još uvijek među njima nećete pronaći autocomplete komponentu i prisiljeni ste koristiti neko vanjsko rješenje. U velikom broju slučajeva to je nekakav Angular NPM modul, kao što će biti slučaj i u ovom blog postu.

Što je autocomplete (samodovršavanje)?

To je funkcionalnost koja olakšava pregled, odabir i unos vrijednosti prilikom ispunjavanja nekakve forme. Recimo da imate formu u kojoj jedno od polja prikazuje popis djelatnika, a vi morate odabrati nekoliko njih. To se vrlo jednostavno može riješiti običnim padajućim izbornikom, Ionic za to koristi Select komponentu, i to je dobar izbor kada imate nekoliko djelatnika na tom popisu. Međutim, kada se nađete u situaciji da popis sadržava više stotina stavki odjednom padajući izbornik više nije toliko dobra opcija. Tu uskače autocomplete koji olakšava pronalazak i unos željene vrijednosti.

Google Autocomplete — Autocomplete s kojim ste se sigurno susreli

Postavljanje aplikacije

Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga

$ ionic start Ionic3AutocompleteTokenInput blank --v2
$ cd Ionic3AutocompleteTokenInput

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

Sada ćemo instalirati angular2-tag-input NPM modul koji je osnova naše Ionic 3 autocomplete aplikacije.

npm install angular2-tag-input --save

1	npm install angular2-tag-input --save

Nakon toga potrebno je dodati referencu na RlTagInputModule , a to se radi unutar app.module.ts

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

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

import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    RlTagInputModule,
    BrowserModule,
    HttpModule,
    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 { HttpModule } from '@angular/http';

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

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

import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

RlTagInputModule,

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

I to je to. Spremni smo za korištenje autocomplete funkcionalnosti.

Autocomplete implementacija

Postoje dva načina na koja možemo koristiti autocomplete. Prvi je da ponudimo niz (array) sa zadanim vrijednostima, a drugi je da omogućimo unos bilo koje vrijednosti. U ovom primjeru ponudit ćemo zadani niz.

Logika funkcionalnosti nalazit će se unutar home.ts datoteke. Ovdje imamo dva niza, autocompleteTags koji će se puniti vrijednostima koje odaberemo i autocompleteItems koji sadržava vrijednosti koje će biti ponuđene unutar autocomplete polja.

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

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

  public autocompleteTags = [];
  public autocompleteItems = [
    'Tomislav Stanković',
    'Marko Marulić',
    'Milan Cimeša',
    'Faust Vrančić',
    'Željko Hegedušić',
    'Đuro Pulitika',
    'Ivan Generalić',
    'Tomislav Šenoa'
  ];

  constructor(public navCtrl: NavController) {}

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

public autocompleteTags = [];

public autocompleteItems = [

'Tomislav Stanković',

'Marko Marulić',

'Milan Cimeša',

'Faust Vrančić',

'Željko Hegedušić',

'Đuro Pulitika',

'Ivan Generalić',

'Tomislav Šenoa'

];

constructor(public navCtrl: NavController) {}

}

Kako to izgleda možemo vidjeti u home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 (angular2-tag-input)
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <ion-item no-padding>
</ion-item>
  <rl-tag-input
    [addOnBlur]="false"
    [autocomplete]="true"
    [autocompleteItems]="autocompleteItems"
    [(ngModel)]="autocompleteTags"
    placeholder="Unesi vrijednost">
  </rl-tag-input>
<br><hr>
<ion-list>
  <ion-item text-wrap>
    <h2>Popis:</h2>
    {{autocompleteTags | json}}
  </ion-item>
</ion-list> 
 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 (angular2-tag-input)

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item no-padding>

</ion-item>

<rl-tag-input

[addOnBlur]="false"

[autocomplete]="true"

[autocompleteItems]="autocompleteItems"

[(ngModel)]="autocompleteTags"

placeholder="Unesi vrijednost">

</rl-tag-input>

<ion-list>

<ion-item text-wrap>

<h2>Popis:</h2>

</ion-item>

</ion-list>

</ion-content>

I uz malo CSS-a

page-home {

   [_nghost-c1] {
        background-color: color($colors, primary);
        border-radius: 40px;
        font-size: 14px;
        color: #fff;
        margin-top: 1px;
    }
    [_nghost-c1] .ng2-tag-input-remove[_ngcontent-c1] {
        color: color($colors, primary);
        background: #fff;
        height: 20px;
        width: 20px;
        line-height: 20px;
    }

}

page-home {

[_nghost-c1] {

background-color: color($colors, primary);

border-radius: 40px;

font-size: 14px;

color: #fff;

margin-top: 1px;

}

[_nghost-c1] .ng2-tag-input-remove[_ngcontent-c1] {

color: color($colors, primary);

background: #fff;

height: 20px;

width: 20px;

line-height: 20px;

}

U konačnici to izgleda ovako

Dinamičke vrijednosti autocomplete niza?

U gornjem primjeru koristili smo niz od nekoliko ručno dodanih vrijednosti, ali to ne znači da ne možemo koristiti i dinamički niz koji dobijemo od API-ja.

U tom je slučaju potrebno kreirati ApiProvider naredbom

$ ionic generate provider ApiProvider

1	$ ionic generate provider ApiProvider

Koristit ćemo popis država s REST Countries API-ja https://restcountries.eu/

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

  loadData(){
    return this._http.get('https://restcountries.eu/rest/v2/all')
      .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');

}

loadData(){

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

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

}

Kada pozovemo API dobit ćemo console.log(res); koji nam daje niz (array) objekata. Međutim to je previše informacija, a nama trebaju samo imena država kako bi prema njima mogli raditi autocomplete.

Zato ćemo napraviti petlju koja će nam izdvojiti samo nazive država i s njima napuniti naš autocompleteItems niz (array).

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

        this.autocompleteItems.push(
            res[i].name
        );

      };

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

this.autocompleteItems.push(

res[i].name

);

};

home.ts će u tom slučaju izgledati nešto malo drugačije

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

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

  public autocompleteTags = [];
  public autocompleteItems = [];

  constructor(public navCtrl: NavController,
              public _apiProvider: ApiProvider) {

   //Pozivanje funkcije
   this.getCountries();

  }

   getCountries(){
     this._apiProvider.loadData().subscribe(res => {
     console.log(res);

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

        this.autocompleteItems.push(
            res[i].name
        );

      };

        console.log(this.autocompleteItems);
    
    });
  } 

}

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

import { NavController } from 'ionic-angular';

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

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [ApiProvider]

})

export class HomePage {

public autocompleteTags = [];

public autocompleteItems = [];

constructor(public navCtrl: NavController,

public _apiProvider: ApiProvider) {

//Pozivanje funkcije

this.getCountries();

}

getCountries(){

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

console.log(res);

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

this.autocompleteItems.push(

res[i].name

);

};

console.log(this.autocompleteItems);

});

}

A konačan rezultat možete vidjeti u nastavku

Ionic 3 – Slanje SMS poruka

U ovom ću blog postu pokazati kako poslati SMS poruku iz Ionic 3 aplikacije koristeći Ionic Native 3x SMS plugin.

Prije svega, moram napomenuti da korištenje ovog plugina zahtijeva da mobilni uređaj na kojemu je instalirana aplikacija ima valjanu SIM karticu sa dovoljnim iznosom na računu. Ako se koristi neka od tarifa s neograničenom mogučnošću slanja SMS-ova onda ste bez brige.

Kreiranje aplikacije

Za početak ćemo kreirati novi Ionic 3 projekt.

$ ionic start Ionic3sms blank --v2
$ cd Ionic3sms

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

Odmah možemo dodati i Ionic Native 3x SMS plugin.

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

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

I navesti SMS plugin unutar app.module.ts

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

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

import { SMS } from '@ionic-native/sms';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

SMS,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Također, s obzirom da ću aplikaciju testirati na Android mobilnom uređaju treba dodati i Android platformu.

$ ionic platform add android

1	$ ionic platform add android

Sada imamo sve što nam je potrebno kako bi napravili primjer aplikacije iz koje će se moći slati SMS poruke.

Postavljanje SMS funkcionalnosti

Plan je napraviti ekran s dva gumba. Jedan će slati SMS za zadanim tekstom na zadani broj mobitela, a drugi će koristiti formu unutar koje se upisuje broj na koji se SMS želi poslati kao i sadržaj SMS-a.

<ion-header>
  <ion-navbar color="primary"> 
    <ion-title>
      Ionic3 SMS
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
 <ion-card-header>
    SMS sa zadanim podacima:
  </ion-card-header>
<ion-card-content>
<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>
</ion-card-content>
</ion-card>

<hr>

<ion-card>
  <ion-card-header>
    SMS sa promjenjivim podacima:
  </ion-card-header>

  <ion-card-content>
<ion-list>
  <ion-item>
    <ion-label floating>Broj mobitela:</ion-label>
    <ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Sadržaj SMS-a:</ion-label>
    <ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>
  </ion-item>
</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>
</ion-card-content>
</ion-card>

</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>

Ionic3 SMS

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header>

SMS sa zadanim podacima:

</ion-card-header>

<ion-card-content>

<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>

</ion-card-content>

</ion-card>

<hr>

<ion-card>

<ion-card-header>

SMS sa promjenjivim podacima:

</ion-card-header>

<ion-card-content>

<ion-list>

<ion-item>

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

<ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Sadržaj SMS-a:</ion-label>

<ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>

</ion-item>

</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>

</ion-card-content>

</ion-card>

</ion-content>

Na koji način će se odvijati slanje SMS poruke može se vidjeti u home.ts datoteci. Imamo dvije funkcije posaljiSMS1() i posaljiSMS2(). Unutar svake od funkcija imamo options objekt. Više o njemu kao i ostalim mogućnostima možete pronaći u dokumentaciji https://github.com/cordova-sms/cordova-sms-plugin

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

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

  objekt = {broj: '', sadrzaj: ''};

  constructor(public _navCtrl: NavController,
              private _sms: SMS) {

  }
  
  posaljiSMS1(){
    var options = {
        replaceLineBreals: false,
        android: {
          intent: 'INTENT'  // Otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);
    console.log("Poslao sam SMS 1");
  }

  posaljiSMS2(){
      var options = {
        replaceLineBreals: false,
        android: {
          intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);
    console.log(this.objekt.broj + " " +  this.objekt.sadrzaj);
    console.log("Poslao sam SMS 2");
  }

}

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

import { NavController } from 'ionic-angular';

import { SMS } from '@ionic-native/sms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

objekt = {broj: '', sadrzaj: ''};

constructor(public _navCtrl: NavController,

private _sms: SMS) {

}

posaljiSMS1(){

var options = {

replaceLineBreals: false,

android: {

intent: 'INTENT' // Otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);

console.log("Poslao sam SMS 1");

}

posaljiSMS2(){

var options = {

replaceLineBreals: false,

android: {

intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);

console.log(this.objekt.broj + " " + this.objekt.sadrzaj);

console.log("Poslao sam SMS 2");

}

Ako aplikaciju pokrenemo u web pregledniku $ ionic serve dobijemo ispis naših console.log poruka kao i obavijest da je aplikaciju potrebno pokrenuti na mobilnoj uređaju “Native: tried calling SMS.send, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator“.

Pokretanje aplikacije na mobilnom uređaju

Prilikom instalacije aplikacije na mobilni uređaj će prikazati koje sve dozvole zahtjeva aplikacija. U ovom slučaju to je “slanje i pregled SMS poruka”.

Također, prilikom prvog slanja SMS poruke aplikacije će pitati korisnika za dozvolu slanja i pregleda SMS poruka na njegovom mobilnom uređaju.

S obzirom da funkcija posaljiSMS1() u sebi sadržaja postavku koja poziva otvaranje zadane SMS aplikacije mobilnog uređaja na sljedećoj se slici može vidjeti kako to izgleda.

Ako pozovemo drugi gumb tj. funkciju posaljiSMS2() SMS ćemo poslati direktno iz Ionic 3 aplikacije. Poslani SMS ostaje u mobilnom uređaju i moguće ga je kasnije vidjeti u zadanoj aplikacija koja inače služi za slanje i primanje SMS-ova.

Osoba koja primi SMS poruku ne zna da je poruka poslana putem Ionic 3 aplikacije.

Zaključak

I to je sve! Ovo je bio prikaz korištenja Ionic Native 3.x SMS plugina koji omogućava slanje SMS poruka iz Ionic aplikacije.