Tomislav Stanković, Autor na Tomislav Stanković

Amazon Kindle Paperwhite III SP

Nemam običaj pisati recenzije za hardver, ali mislim da je sada pravo vrijeme da to povremeno počnem raditi pa će tako ovaj blog post biti kraći osvrt na nedavno kupljeni Amazon Kindle Paperwhite 2015 SP. U Hrvatskoj se može nabaviti za cca 1.300,00kn. Više o uređaju u nastavku.

Uvod

Do sada sam pročitao najviše pravih, fizičkih, papirnatih, knjiga. Nakon toga slijede e-knjige (u 99% slučajeva PDF). To će se sada sigurno promijeniti jer će mi Kindle postati primarnim izvorom knjiga pod uvjetom da u istom trenutku i pod istim uvjetima ne mogu nabaviti pravu, papirnatu, knjigu.

Iako najviše volim uzeti pravu knjigu jer ona mi ipak daje najbolji osjećaj, ponekada to nije praktično i nedavno je došlo pravo vrijeme za svijet e-knjiga. Čitao sam ih i do sada u PDF formatu, na PC-u, smartphoneu i tabletu, ali to nije to. Na mobitelu je to mučenje u pokretu, na tabletu su problemi s vidljivošću u polumraku ili na suncu, a na PC-u sam vezan uz jedno mjesto, a kada čitam najčešće se želim maknuti od PC-a.

Fizičke knjige

Kao što sam već rekao, do sada sam pročitao najviše pravih, paprinatih, knjiga. Neko vrijeme sam ih čak i kupovao jer sam htio imati svoju kolekciju. S vremenom sam shvatio da to i nema puno smisla jer mi samo zauzimaju prostor, moram ih povremeno čistiti od prašine i većini njih se nikada više ne vratim.

Članstvo u gradskoj knjižnici s druge se strane čini kao bolja opcija jer za cijenu jedne kupljene knjige mogu cijelu godinu čitati sve što želim pod uvjetom da je dostupno. Tu onda dolazimo do problema nedostupnosti knjiga koje bi htio čitati jer to su većinom strana izdanja.

Nude mi se dva izbora. Naručiti knjigu direktno od izdavača i čekati da mi stigne na kućnu adresu ili se prebaciti na e-knjige i čitati što želim i kada želim, često i uz puno nižu cijenu. U drugom slučaju, ako mi se neka knjiga posebno svidi onda mogu kupiti i papirnato izdanje za privatnu kolekciju.

Kindle Paperwhite III

Stvar je izuzetno praktična – lagan je, lakši od prosječne knjige, može se čitati u gotovo bilo kojem položaju bez potrebe da se razmišlja o fizičkoj “brizi” za knjigu, savinutosti papira, kutu gledanja i slično. Kupnja i download s Amazonovog weba vrlo su praktični, a jako je zgodna i fora s obilježavanjem i automatskim “šeranjem” najboljih odlomaka na društvenim mrežama. – Kindle Paperwhite – prvi (osobni) dojmovi, Oleg Maštruko

Zašto baš Kindle? – Prije kupnje nekoliko sam dana čitao, gledao i slušao razne recenzije i ispostavilo se da mi Amazon Kindle najbolje odgovara. Amazonov eko sustav i kvaliteta softvera dosta su mi bili važni prilikom odabira. Poznati su mi i drugi modeli kao npr. Barnes & Noble NOOK ili Kobo, ali mi je Kindle prva poveznica na e-knjige tako da nisam niti gledao dalje od Amazona. Samo je bilo pitanje koji ću model uzeti.

Kindle – Najpovoljniji uređaj. Nije mi bio u opciji jer nema pozadinsko osvjetljenje.
Kindle Paperwhite – Mislim da je ovo najbolji izbor za svakoga tko ulazi u svijet e-knjiga.
Kindle Voyage – Isti kao i Paperwhite uz dodatak tipki na rubovima uređaja za jednostavnije listanje i bolje osvjetljenje.
Kindle Oasis– Najjači uređaj u ponudi. Logičan izbor na svakoga tko je duže vrijeme sa zadovoljstvom koristio neki od povoljnijih uređaja. Također ciljam na ovaj model kada zaključim da je vrijeme za promjenu.

Dobre strane

Trenutna dostupnost – U bilo kojem trenutku mogu doći do željene knjige. Bilo to u nedjelju poslije podne, za Badnjak, u vlaku ili autu,…, znači bilo kada i bilo gdje.
Trajanje baterije – Označava se u tjednima jer uređaj ne troši bateriju za vrijeme prikaza stranice nego samo za vrijeme listanja.
Osvjetljenje – Mogu sjediti predvečer u dvorištu i čitati knjigu bez potrebe za dodatnim vanjskim izvorom svjetla. Isto tako mogu to raditi u podne pod najvećim suncem, iako je ovo malo vjerojatno, i opet neću imati nikakvih problema sa vidljivošću.
Društvenost – Svoj GoodReads račun mogu povezati sa Kindleom tako da direktno s uređaja upravljam računom, čitam i dajem ocjene i recenzije, pratim napredak svojih prijatelja i objavljujem vlastiti.
Interaktivnost – E-knjiga se može prilagoditi mojim trenutnim potrebama, a to znači upravljanje fontom, veličinom slova, marginama i mnoštvom drugih opcija. S druge strane, označavanjem neke riječi otvara se riječnik s detaljnim opisom odabranog pojma. Uz to postoji i prevoditelj na nekoliko jezika pa niti knjige na drugim jezicima osim hrvatskog i engleskog ne predstavljaju problem.
Slike zaslona – Postoji i mogućnost hvatanja slike zaslona (screenshot) koja se onda može podijeliti na npr. društvenim mrežama. Ipak, to se ne može učiniti direktno na Kindle uređaju nego je potrebno isti spojiti na PC i preuzeti screenshot.
Podrška za PDF – Osim Kindle knjige na uređaju se može čitati i PDF format na način da bilo koji PDF sa PC-a pošaljem na svoj Amazon Kindle e-mail čime mi ta knjiga postaje dostupna na svim mojim uređajima.

Malo manje dobre strane

Podrška za PDF – Ovo se nalazi i kao prednost, ali i kao nedostatak jer iskustvo čitanja nije najsretnije riješeno. Potrebna je određena doza volje i strpljenja kako bi se čitanje nekog dužeg PDF-a privelo kraju.
Nejednako osvjetljenje na dnu ekrana – Na nekim uređajima se u određenim svjetlosnim uvjetima može primjetiti nejednako osvjetljenje na dnu ekrana. To se može riješiti pojačavanjem ili smanjivanjem osvjetljenja zaslona.
Osjećaj napretka – Iako Kindle nudi različite mogućnosti prikaza napretka čitanja knjige ipak ništa ne može zamijeniti držanje prave knjige u rukama gdje automatski po osjećaju znam koliko još imam do kraja.

Zaključak

Amazon Kindle Paperwhite otvorio mi je neki novi svijet koji mi se jako sviđa. Ovo ne znači da u potpunosti odustajem od čitanja “pravih” knjiga nego da si želim omogućiti više izbora kad već postoji tehnologija koja mi to omogućava.

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