Arhiva Mobile - Stranica 12 od 18

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 & Crosswalk – podrška za starije verzije Androida

Ionic Framework službeno podržava verzije Android platforme od 4.1 na više (iako će se i to s vremenom promijeniti) što znači da morate koristiti dodatna rješenja kako bi osigurali podršku za starije verzije Android platforme. Jedno od tih rješenja je i Crosswalk pa iako projekt više nije aktivan i dalje se može koristiti i tako osigurati potrebnu podršku vašoj Ionic aplikaciji.

Important: This project is not maintained anymore. The last Crosswalk release was Crosswalk 23. Read more in this announcement

Uvod

Zašto Ionic ukida podršku za starije verzije Androida?

Zato što se smanjuje njihov tržišni udio, a nije zanemarivo ni to da ih je sve teže testirati, drugačije se ponašaju na emulatoru u odnosu na pravi uređaj i jednostavno više nisu dovoljno dobre kako bi mogle pružiti pravo korisničko iskustvo koje današnji korisnici očekuju.

Stare verzije Androida lagano umiru na današnjem tržištu koje se vrlo brzo mijenja i nije isplativo više ulagati vrijeme za osiguravanje njihove podrške.

Today, we are updating our officially support Android version for Ionic 1 and 2. Going forward, we will only support Android 4.1 and above. We no longer support 4.0.x or anything pre 4. – Update: New Supported Android versions

Korištenje Crosswalka

Pokrenite novi Ionic projekt, dodajte Android platformu i na kraju instalirajte Crosswalk.

$ ionic start CrosswalkIonicAplikacija blank --v2
$ cd CrosswalkIonicAplikacija
$ ionic plugin add cordova-plugin-crosswalk-webview
$ ionic run android

$ ionic start CrosswalkIonicAplikacija blank --v2

$ cd CrosswalkIonicAplikacija

$ ionic plugin add cordova-plugin-crosswalk-webview

$ ionic run android

I to je sve što se tiče instalacije. Dalje nastavljate razvoj kao i do sada.

Dva APK-a (x86 i ARM)

Prilikom stvaranja APK-a primjetit ćete da na putanji NazivAplikacije\platforms\android\build\outputs\apk više nemate jedan APK (android-debug.apk) nego dva (android-armv7-debug.apk i android-x86-debug.apk).

Kod pokretanja naredbe

$ ionic run android

1	$ ionic run android

Ionic sam prepoznaje koji uređaj je spojen na računalo tako da će instalirati samo onu verziju APK-a koju spojeni uređaj podržava.

Kako dva APK-a iste aplikacije objaviti na Google Play Store?

Na sreću Google podržava postavljanje dva APK-a iste aplikacije na Google Play Store. Korisnicima će prilikom instalacije aplikacije biti ponuđena verzija koja odgovara njihovim uređajima.

Ako ne želite imati dva APK-a možete ih spojiti u jedan koristeći

<preference name="xwalkMultipleApk" value="false"/>

1	<preference name="xwalkMultipleApk" value="false"/>

unutar config.xml

Nedostatci Crosswalka

Iako će korištenje Crosswalka omogućiti vašoj Ionic aplikaciji podršku za starije verzije Androida kao i općenito ubrzati rad same aplikacije važno je znati da to dolazi uz određenu cijenu.

APK će narasti nekoliko puta kao što se može vidjeti iz sljedeće slike

Verzija bez Crosswalka bila bi teška oko 5MB dok je sa Crosswalkom višestruko narasla na 30 – 35MB.

Ako ste nakon gore nevedenih nedostataka odlučili da ipak ne želite koristiti Crosswalk možete ga ukloniti koristeći sljedeću naredbu

$ ionic plugin rm cordova-plugin-crosswalk-webview

1	$ ionic plugin rm cordova-plugin-crosswalk-webview

Čemu služi Ionic Native 3.x?

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

Kako je bilo prije? (Ionic 1 & Cordova)

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

Ionic Native

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

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

Kako se koristi Ionic Native?

Za početak potrebna je instalacija

npm install ionic-native --save

1	npm install ionic-native --save

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

Instalirate ih naredbom

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

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

I dodate u home.ts

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

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

Ionic Native 3.x

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

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

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

Kako se koristi Ionic Native 3.x?

Za početak potrebna je instalacija

npm install @ionic-native/core --save

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

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

Instalirate ih naredbom

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

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

I dodate u home.ts

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

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

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

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

Zaključak

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

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

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

Ionic 3 – Lazy Loading (lijeno učitavanje)

Jedna od stvari koja me najviše oduševila kada je stigao Ionic 3 je Lazy Loading. Toliko sam bio oduševljen da sam samo tražio priliku gdje ću to moći ugraditi i uživati u svim prednostima koje donosi. Naravno ima u svojih nedostataka, ali s njima se može živjeti pa ćemo o tome malo kasnije.

Lazy Loading označava učitavanje pojedinih dijelova aplikacije po potrebi umjesto da se učita sve odjednom kao što je bilo slučaj do sada.

To konkretno znači sljedeće – kada ste prije kreirali nove stranice unutar aplikacije trebali ste ih sve uvesti unutar app.module.ts i također unutar svake stranice gdje ih planirate pozivati. Međutim sada to više ne morate raditi jer svaka kreirana stranica ima svoju datoteku naziv-stranice.module.ts i ne morate ju više uvoziti unutar app.module.ts niti bilo gdje drugdje unutar aplikacije nego ju možete odmah koristiti.

Prvo ću objasniti dosadašnji način kreiranja i međusobnog povezivanja stranica, a onda idemo na Lazy Loading putovanje.

Stari način

Kreiramo novu stranicu naredbom

$ ionic generate page Primjer

1	$ ionic generate page Primjer

I dobijemo sljedeću strukturu

| - primjer/
    | - primjer.html
    | - primjer.scss
    | - primjer.ts

| - primjer/

| - primjer.html

| - primjer.scss

| - primjer.ts

Stranica primjer.ts izgleda ovako

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

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

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

}

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

import { NavController, NavParams } from 'ionic-angular';

@Component({

selector: 'page-primjer',

templateUrl: 'primjer.html'

})

export class PrimjerPage {

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

Našu novu stranicu ne možemo koristiti u ostatku aplikacije dok ju ne uvezemo unutar app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

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

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PrimjerPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PrimjerPage
  ],
  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 { MyApp } from './app.component';

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

import { PrimjerPage } from '../pages/primjer/primjer';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({

declarations: [

MyApp,

HomePage,

PrimjerPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

PrimjerPage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

I recimo da sada na HomePage želim staviti poveznicu na PrimjerPage. To mogu napraviti jedino ako prvo uvezem PrimjerPage unutar home.ts.

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

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

  constructor(public _navCtrl: NavController) {

  }
  
  idiNaStranicu(){
    this._navCtrl.push(PrimjerPage);
  }

}

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

import { NavController } from 'ionic-angular';

import { PrimjerPage } from './../primjer/primjer';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController) {

}

idiNaStranicu(){

this._navCtrl.push(PrimjerPage);

}

I sada zamislite aplikaciju u kojoj imate 20ak stranica i koje međusobno želite povezati. Kao prvo, sve ih trebate uvesti u app.module.ts, a onda još trebate razmišljati na kojim sve stranicama trebate uvesti određenu stranicu import { PrimjerPage } from './../primjer/primjer'; kako bi ju mogli pozvati unutar neke funkcije. Vrlo lako se izgubiti u svemu tome.

Novi način

Kreiramo novu stranicu naredbom

$ ionic generate page Primjer

1	$ ionic generate page Primjer

I dobijemo sljedeću strukturu

| - primjer/
    | - primjer.html
    | - primjer.module.ts
    | - primjer.scss
    | - primjer.ts

| - primjer/

| - primjer.html

| - primjer.module.ts

| - primjer.scss

| - primjer.ts

Stranica primjer.ts izgleda ovako. Jedina razlika obične i Lazy Loading strukture je u parametru IonicPage .

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

@IonicPage()
@Component({
  selector: 'page-primjer',
  templateUrl: 'primjer.html'
})
export class PrimjerPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

}

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-primjer',

templateUrl: 'primjer.html'

})

export class PrimjerPage {

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

I naravno, trebamo vidjeti od čega se sastoji primjer.module.ts. I kao što možete vidjeti izgleda jednako kao i standardna src/app/app.module.ts datoteka.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PrimjerPage } from './primjer';

@NgModule({
  declarations: [
    PrimjerPage
  ],
  imports: [
    IonicPageModule.forChild(PrimjerPage)
  ],
  exports: [
    PrimjerPage 
  ]
})
export class PrimjerModule {}

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

import { IonicPageModule } from 'ionic-angular';

import { PrimjerPage } from './primjer';

@NgModule({

declarations: [

PrimjerPage

imports: [

IonicPageModule.forChild(PrimjerPage)

exports: [

PrimjerPage

]

})

export class PrimjerModule {}

I odmah smo spremni koristiti našu novu stranicu u ostatku aplikacije. Primijetit ćete da u ovom slučaju nisam morao uvesti PrimjerPage kako bi ju koristio unutar funkcije nego ju samo pozovem kao string 'PrimjerPage'.

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

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

  constructor(public _navCtrl: NavController, public navParams: NavParams) {
  }

  idiNaStranicu(){
     this._navCtrl.push('PrimjerPage');
  }

}

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html',

})

export class HomePage {

constructor(public _navCtrl: NavController, public navParams: NavParams) {

}

idiNaStranicu(){

this._navCtrl.push('PrimjerPage');

}

Iz gore navedenog možete vidjeti koliko je Lazy Loading koristan i koliko olakšava rad s aplikacijom koja ima više stranica. Kao prvo ne morate ništa ručno uvoziti unutar app.module.ts niti morate misliti gdje ćete pozivati neku od stranica kako bi i nju uvezli, a uz to dobijete i malo bržu aplikaciju jer se neće sve učitavati odjednom.

Zaključak

Lazy Loading radi po principu – što manje to bolje. Njegovim korištenjem imate manje koda, manje uvoza i manje brige oko putanja do određenih stranica/klasa. Po mojem mišljenju, Lazy Loading je jedna od najboljih značajki Ionica 3 pa iako još uvijek nije obavezna mislim da bi ju svatko trebao koristiti. Naravno ne slažu se svi s tim.

Na kraju ostaje na vama da sami odlučite na koji ćete način složiti Ionic aplikaciju.

Prednosti:
– Poboljšava modularnost
– Ubrzava vrijeme učitavanja aplikacije
– Ubrzava korištenje aplikacije
– Omogućava deep linking

Nedostatci:
– Gubi se type checking