Arhiva Ionic Framework - Stranica 4 od 7

Ionic + OpenWeatherMap – prikaz vremenske prognoze

U ovom ću blog postu pokazati kako unutar Ionic aplikacije postaviti API za prikaz vremenske prognoze koristeći OpenWeatherMap.

Iako svaki Android mobilni uređaj sam po sebi već ima prikaz vremenske prognoze, koji je moguće dodatno prilagoditi, na početnom zaslonu ipak može biti korisno ubaciti i ovakav način prikaza takvih informacija.

Npr. ako je u pitanju nekakva turistička aplikacije dobro je prikazati trenutnu vremensku prognozu mjesta u koje smo stigli ili gdje planiramo putovati.

Uvod

Prije svega potrebno je kreirati korisnički račun na https://home.openweathermap.org/users/sign_up

Postoji nekoliko različitih opcija od kojih je manji dio besplatan, ali u svakom slučaju i to je dovoljno za osnovni prikaz vremenske prognoze. U slučaju potrebe za dodatnim informacijama moguće je koristiti neki od oblika mjesečne pretplate.

Kreiranje aplikacije

Kreiram novi Ionic, u ovom slučaju Ionic 4, projekt i odmah dodajem podršku za Android platformu.

$ ionic start IonicWeather blank--type=angular
$ cd IonicWeather
$ ionic cordova platform add android

$ ionic start IonicWeather blank--type=angular

$ cd IonicWeather

$ ionic cordova platform add android

OpenWeatherMap API

S obzirom da sam se registrirao za besplatnu verziju API-ja mogu, od onoga što je meni trenutno zanimljivo, koristiti samo “Current weather data” API i “5 day / 3 hour forecast” API.

Current weather data

Ovaj API prikazuje trenutnu vremensku prognozu za odabrani grad, a pozivam ga na adresi

http://api.openweathermap.org/data/2.5/weather?q=

1	http://api.openweathermap.org/data/2.5/weather?q=

U sljedećem primjeru pozivam ovaj API s dva osnovna parametra, a to su: moj API ključ koji sam dobio nakon registracije te ime grada za koji želim dobiti vremensku prognozu.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  vrijemeObjekt = {
    temperatura: 0,
    opis: '',
    slika: ''};

  grad: string = "Vinkovci";

  constructor(
    private _http: HttpClient) {
  }

  ionViewDidEnter(){
    this.prikaziVrijeme();
  }

  prikaziVrijeme(){
    this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************")
    .subscribe((data) => {
        console.log(data);
        this.vrijemeObjekt.temperatura = data['main']['temp'];
        this.vrijemeObjekt.opis = data['weather'][0]['description'];
        this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";
        console.log(this.vrijemeObjekt);
    });
  }

}

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

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

vrijemeObjekt = {

temperatura: 0,

opis: '',

slika: ''};

grad: string = "Vinkovci";

constructor(

private _http: HttpClient) {

}

ionViewDidEnter(){

this.prikaziVrijeme();

}

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************")

.subscribe((data) => {

console.log(data);

this.vrijemeObjekt.temperatura = data['main']['temp'];

this.vrijemeObjekt.opis = data['weather'][0]['description'];

this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";

console.log(this.vrijemeObjekt);

});

}

I odmah dobijem željene podatke na kojima se mogu primijetiti dva detalja. Prvi se tiče opisa vremenske prognoze koji je na engleskom jeziku, a drugi se tiče mjerne jedinice koja nije u °C.

Kako bi to promijenio dodat ću još dva parametra u API URL.

prikaziVrijeme(){
    this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")
    .subscribe((data) => {
        console.log(data);
        this.vrijemeObjekt.temperatura = data['main']['temp'];
        this.vrijemeObjekt.opis = data['weather'][0]['description'];
        this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";
        console.log(this.vrijemeObjekt);
    });
  }

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/weather?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")

.subscribe((data) => {

console.log(data);

this.vrijemeObjekt.temperatura = data['main']['temp'];

this.vrijemeObjekt.opis = data['weather'][0]['description'];

this.vrijemeObjekt.slika = 'http://openweathermap.org/img/w/' + data['weather'][0]['icon'] + ".png";

console.log(this.vrijemeObjekt);

});

}

Nakon toga mogu vidjeti da je sada opis vremenske prognoze na hrvatskom jeziku i da je mjerna jedinica °C.

Ikona se prikazuje na način da se na URL 'http://openweathermap.org/img/w/' doda naziv slike data['weather'][0]['icon'] + ".png" koji se dobije kao odgovor na API zahtjev. Više o tome na poveznici https://openweathermap.org/weather-conditions

Na ekranu to može izgledati ovako, ali je i dalje malo čudno zbog decimalnog prikaza.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Weather App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-row>
      <ion-col>
          <img src="{{vrijemeObjekt.slika}}">
      </ion-col>
      <ion-col>
          <h1>{{vrijemeObjekt.temperatura}}°C</h1>
          {{vrijemeObjekt.opis}} 
      </ion-col>
    </ion-row>
 </ion-card>
</ion-content>

<ion-header>

<ion-toolbar>

<ion-title>

Ionic Weather App

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-row>

<ion-col>

</ion-col>

<ion-col>

<h1>{{vrijemeObjekt.temperatura}}°C</h1>

</ion-col>

</ion-row>

</ion-card>

</ion-content>

To se vrlo lako riješi pomoću Math.round().

this.vrijemeObjekt.temperatura = Math.round(data['main']['temp']);

1	this.vrijemeObjekt.temperatura = Math.round(data['main']['temp']);

Što daje sljedeći rezultat

5 day / 3 hour forecast

Ovaj API prikazuje vremensku prognozu za pet dana unaprijed u razmacima od po tri sata, a pozivam ga na adresi

http://api.openweathermap.org/data/2.5/forecast?q=

1	http://api.openweathermap.org/data/2.5/forecast?q=

Nakon svega navedenog u primjeru iznad u ovom se primjeru neće puno toga promijeniti. Rezultat će ostati na hrvatskom jeziku te u obliku °C.

prikaziVrijeme(){
    this._http.get("http://api.openweathermap.org/data/2.5/forecast?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")
    .subscribe((data) => {
        console.log(data);
        // Sada
        this.vrijemeObjekt.slikaDanas = 'http://openweathermap.org/img/w/' + data['list'][0]['weather'][0]['icon'] + ".png";
        this.vrijemeObjekt.temperaturaDanas = Math.round(data['list'][0]['main']['temp']);
        this.vrijemeObjekt.opisDanas = data['list'][0]['weather'][0]['description'];
       // Za 3 sata
        this.vrijemeObjekt.slikaDanas3 = 'http://openweathermap.org/img/w/' + data['list'][1]['weather'][0]['icon'] + ".png";
        this.vrijemeObjekt.temperaturaDanas3 = Math.round(data['list'][1]['main']['temp']);
       // Za 6 sati
        this.vrijemeObjekt.slikaDanas6 = 'http://openweathermap.org/img/w/' + data['list'][2]['weather'][0]['icon'] + ".png";
        this.vrijemeObjekt.temperaturaDanas6 = Math.round(data['list'][2]['main']['temp']);
       // Za 9 sati
        this.vrijemeObjekt.slikaDanas9 = 'http://openweathermap.org/img/w/' + data['list'][3]['weather'][0]['icon'] + ".png";
        this.vrijemeObjekt.temperaturaDanas9 = Math.round(data['list'][3]['main']['temp']);
       // Za 12 sati
       this.vrijemeObjekt.slikaDanas12 = 'http://openweathermap.org/img/w/' + data['list'][4]['weather'][0]['icon'] + ".png";
       this.vrijemeObjekt.temperaturaDanas12 = Math.round(data['list'][4]['main']['temp']);
       console.log(this.vrijemeObjekt);
    });
}

prikaziVrijeme(){

this._http.get("http://api.openweathermap.org/data/2.5/forecast?q=" + this.grad + "&appid=********************************" + "&units=metric" + "&lang=hr")

.subscribe((data) => {

console.log(data);

// Sada

this.vrijemeObjekt.slikaDanas = 'http://openweathermap.org/img/w/' + data['list'][0]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas = Math.round(data['list'][0]['main']['temp']);

this.vrijemeObjekt.opisDanas = data['list'][0]['weather'][0]['description'];

// Za 3 sata

this.vrijemeObjekt.slikaDanas3 = 'http://openweathermap.org/img/w/' + data['list'][1]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas3 = Math.round(data['list'][1]['main']['temp']);

// Za 6 sati

this.vrijemeObjekt.slikaDanas6 = 'http://openweathermap.org/img/w/' + data['list'][2]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas6 = Math.round(data['list'][2]['main']['temp']);

// Za 9 sati

this.vrijemeObjekt.slikaDanas9 = 'http://openweathermap.org/img/w/' + data['list'][3]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas9 = Math.round(data['list'][3]['main']['temp']);

// Za 12 sati

this.vrijemeObjekt.slikaDanas12 = 'http://openweathermap.org/img/w/' + data['list'][4]['weather'][0]['icon'] + ".png";

this.vrijemeObjekt.temperaturaDanas12 = Math.round(data['list'][4]['main']['temp']);

console.log(this.vrijemeObjekt);

});

}

Na ekranu to može izgledati ovako

<ion-content padding>
  <ion-card>
      <ion-row>
          <ion-col>
              <img src='{{vrijemeObjekt.slikaDanas}}'> 
         </ion-col>
         <ion-col>
              <h6>{{vrijemeObjekt.temperaturaDanas}}°C<br>
              {{vrijemeObjekt.opisDanas}}</h6>
          </ion-col>
          <ion-col text-center>
              <img src='{{vrijemeObjekt.slikaDanas3}}'> 
              {{vrijemeObjekt.temperaturaDanas3}}°C
          </ion-col>
          <ion-col text-center>
              <img src='{{vrijemeObjekt.slikaDanas6}}'>
              {{vrijemeObjekt.temperaturaDanas6}}°C
          </ion-col>
          <ion-col text-center>
              <img src='{{vrijemeObjekt.slikaDanas9}}'>
              {{vrijemeObjekt.temperaturaDanas9}}°C
          </ion-col>
          <ion-col text-center>
              <img src='{{vrijemeObjekt.slikaDanas12}}'>
              {{vrijemeObjekt.temperaturaDanas12}}°C
          </ion-col>
    </ion-row>
 </ion-card>
</ion-content>

<ion-content padding>

<ion-card>

<ion-row>

<ion-col>

</ion-col>

<ion-col>

<h6>{{vrijemeObjekt.temperaturaDanas}}°C<br>

{{vrijemeObjekt.opisDanas}}</h6>

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas3}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas6}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas9}}°C

</ion-col>

<ion-col text-center>

{{vrijemeObjekt.temperaturaDanas12}}°C

</ion-col>

</ion-row>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicWeather",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0-beta.16",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic Weather project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicWeather",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "~7.0.0",

"@angular/core": "~7.0.0",

"@angular/forms": "~7.0.0",

"@angular/http": "~7.0.0",

"@angular/platform-browser": "~7.0.0",

"@angular/platform-browser-dynamic": "~7.0.0",

"@angular/router": "~7.0.0",

"@ionic-native/core": "5.0.0-beta.21",

"@ionic-native/splash-screen": "5.0.0-beta.21",

"@ionic-native/status-bar": "5.0.0-beta.21",

"@ionic/angular": "4.0.0-beta.16",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.2.3",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/architect": "~0.10.0",

"@angular-devkit/build-angular": "~0.10.0",

"@angular-devkit/core": "~7.0.0",

"@angular-devkit/schematics": "~7.0.0",

"@angular/cli": "~7.0.0",

"@angular/compiler": "~7.0.0",

"@angular/compiler-cli": "~7.0.0",

"@angular/language-service": "~7.0.0",

"@ionic/angular-toolkit": "~1.2.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.6"

"description": "An Ionic Weather project",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {}

"platforms": [

"android"

]

}

Ionic Launch Navigator – otvaranje nativne aplikacije za navigaciju

Ovaj će blog post biti vrlo sličan jednom ranije objavljenom pod naslovom “Ionic 3 & Google Maps – prikaz rute između dvije lokacije” s tom razlikom da se glavni dio prikaza karte neće odvijati unutar Ionic aplikacije nego u nekoj od nativnih aplikacija instaliranih na mobilnom uređaju.

Kreiranje aplikacije

Kreiram novi Ionic, u ovom slučaju Ionic 3, projekt i odmah dodajem podršku za Android platformu.

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

$ ionic start IonicLaunchNavigator blank

$ cd IonicLaunchNavigator

$ ionic cordova platform add android

Launch Navigator plugin

Launch Navigator plugin omogućava otvaranje nativne aplikacije za navigaciju koja je u tom trenutku instalirana na mobilnom uređaju. Jedino potrebno iz Ionic aplikacije je proslijediti nekoliko parametara, npr. početna i završna lokacija, kako bi se mogla prikazati ruta između njih.

Android platforma trenutno podržava pokretanje sljedećih aplikacija: Google Maps, Waze, CityMapper, Uber, Yandex, Sygic, HERE Maps, Moovit, Lyft, MAPS.ME, Cabify, Baidu Maps, 99 Taxi i Gaode Maps.

Plugin instaliram sljedećim naredbama:

$ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
$ npm install --save @ionic-native/launch-navigator

1 2	$ ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator $ npm install --save @ionic-native/launch-navigator

Naravno, nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

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 { LaunchNavigator } from '@ionic-native/launch-navigator';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

LaunchNavigator,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Na ekranu će se nalaziti samo gumb za pokretanje navigacije.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Launch Navigator
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="otvoriNavigaciju()">Otvori navigaciju</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Launch Navigator

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full (click)="otvoriNavigaciju()">Otvori navigaciju</button>

</ion-content>

Funkcionalnost se također sastoji od samo jedne funkcije.

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

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';

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

  destination: string;
  latitude: number = 45.7713;
  longitude: number = 15.9436;

  constructor(public _navCtrl: NavController,
              private _launchNavigator: LaunchNavigator) {

  }

  otvoriNavigaciju(){
      // Parametar može biti u obliku stringa
      this.destination = "Ilica 12, Zagreb"
      let options: LaunchNavigatorOptions = {
      // Parametar također može biti u obliku koordinata tj. brojeva
        start: [this.latitude, this.longitude]
      };

      this._launchNavigator.navigate(this.destination, options)
      .then(
        success => console.log('Launched navigator'),
        error => console.log('Error launching navigator', error)
      );
  }

}

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

import { NavController } from 'ionic-angular';

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

destination: string;

latitude: number = 45.7713;

longitude: number = 15.9436;

constructor(public _navCtrl: NavController,

private _launchNavigator: LaunchNavigator) {

}

otvoriNavigaciju(){

// Parametar može biti u obliku stringa

this.destination = "Ilica 12, Zagreb"

let options: LaunchNavigatorOptions = {

// Parametar također može biti u obliku koordinata tj. brojeva

start: [this.latitude, this.longitude]

};

this._launchNavigator.navigate(this.destination, options)

.then(

success => console.log('Launched navigator'),

error => console.log('Error launching navigator', error)

);

}

Na ekranu to izgleda ovako:

Kao što se i vidi na zadnjoj slici ponuđena je vožnja putem aplikacije Uber. U slučaju da korisnik mobilnog uređaja u tom trenutku nema instaliranu tu aplikaciju biti će mu omogućeno automatsko instaliranje Uber aplikacije ako se odluči na vožnju.

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicLaunchNavigator",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/launch-navigator": "^4.17.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/storage": "2.2.0",
    "cordova-android": "7.0.0",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.2",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "OKHTTP_VERSION": "3.+"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicLaunchNavigator",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/core": "~4.15.0",

"@ionic-native/launch-navigator": "^4.17.0",

"@ionic-native/splash-screen": "~4.15.0",

"@ionic-native/status-bar": "~4.15.0",

"@ionic/storage": "2.2.0",

"cordova-android": "7.0.0",

"cordova-plugin-actionsheet": "^2.3.3",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-dialogs": "^2.0.1",

"cordova-plugin-ionic-keyboard": "^2.1.3",

"cordova-plugin-ionic-webview": "^2.2.3",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-statusbar": "^2.4.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.2",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.0",

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-statusbar": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {

"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"

"cordova-plugin-ionic-keyboard": {},

"uk.co.workingedge.phonegap.plugin.launchnavigator": {

"OKHTTP_VERSION": "3.+"

}

"platforms": [

"android"

]

}

Ionic Social Sharing – dijeljenje sadržaja mobilne aplikacije

Dijeljenje sadržaja direktno iz, Ionic, mobilne aplikacije jedna je od funkcionalnosti koju je vrlo jednostavno dodati, a može jako puno značiti u marketingu tj. promociji same mobilne aplikacije. Ako je korisnicima sadržaj toliko zanimljiv da ga žele podijeliti otvara se mogućnost viralnog efekta kojega najviše marketingaši vole.

U slučaju Ionica ta se funkcionalnost na jednostavan način može omogućiti postavljanjem Ionic Native Social Sharing plugina.

Kreiranje aplikacije

Kao i svaki put do sada, kreiram novu Ionic aplikaciju:

$ ionic start IonicSocialSharing blank
$ cd IonicSocialSharing

1 2	$ ionic start IonicSocialSharing blank $ cd IonicSocialSharing

Social sharing

Ovaj plugin omogućava dijeljenje teksta, linkova, datoteka i slika putem društvenih mreža, SMS-a ili e-maila.

Prema službenoj dokumentaciji, Social Sharing plugin instaliram sljedećim naredbama:

$ ionic cordova plugin add cordova-plugin-x-socialsharing
$ npm install --save @ionic-native/social-sharing

1 2	$ ionic cordova plugin add cordova-plugin-x-socialsharing $ npm install --save @ionic-native/social-sharing

Nakon uspješne instalacije dodajem sljedeće unutar app.module.ts datoteke:

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 { SocialSharing } from '@ionic-native/social-sharing';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

SocialSharing,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada sam spreman za dodavanje ove funkcionalnosti.

U ovom ću primjeru pokazati kako omogućiti dijeljenje sadržaja putem dvije opcije.

U slučaju korištenja this._socialSharing.share() aktivira se opcija sa prikazom svih dostupnih aplikacija za objavu sadržaja koje postoje na mobilnom uređaju.

Dok se u slučaju korištenja metode sa konkretnim nazivom načina dijeljenja npr. this._socialSharing.shareEmail() aktivira dijeljenje samo putem pripadajuće aplikacije tj. neće se prikazati sve dostupne na mobilnom uređaju.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Social Sharing
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full (click)="shareAll()">Podijeli</button>
  
  <button ion-button full (click)="shareEmail()">Email</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Social Sharing

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full (click)="shareAll()">Podijeli</button>

<button ion-button full (click)="shareEmail()">Email</button>

</ion-content>

Sve to se postiže sa nekoliko linija koda.

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

import { SocialSharing } from '@ionic-native/social-sharing';

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

  naslov: string = "Ovo je naslov";
  poruka: string = "Ovo je poruka";
  url: string = "https://www.tomislavstankovic.com/blog/wp-content/uploads/2018/11/ionic-social-sharing-min.jpg";

  primatelj: any = "test@email.com";

  constructor(public _navCtrl: NavController,
              private _socialSharing: SocialSharing) {
  }

  shareEmail(){
    this._socialSharing.shareViaEmail(this.poruka, this.naslov, this.primatelj, null, null, null).then(() => {
      console.log("Uspješno");
    }).catch((e) => {
      console.error("Greška!");
    });
  }

  shareAll(){
    this._socialSharing.share(this.poruka, this.naslov, null, this.url).then(() => {
      console.log("Uspješno");
    }).catch((e) => {
      console.error("Greška!");
    });
  }

}

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

import { NavController } from 'ionic-angular';

import { SocialSharing } from '@ionic-native/social-sharing';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

naslov: string = "Ovo je naslov";

poruka: string = "Ovo je poruka";

url: string = "https://www.tomislavstankovic.com/blog/wp-content/uploads/2018/11/ionic-social-sharing-min.jpg";

primatelj: any = "test@email.com";

constructor(public _navCtrl: NavController,

private _socialSharing: SocialSharing) {

}

shareEmail(){

this._socialSharing.shareViaEmail(this.poruka, this.naslov, this.primatelj, null, null, null).then(() => {

console.log("Uspješno");

}).catch((e) => {

console.error("Greška!");

});

}

shareAll(){

this._socialSharing.share(this.poruka, this.naslov, null, this.url).then(() => {

console.log("Uspješno");

}).catch((e) => {

console.error("Greška!");

});

}

Osima gore navedenog moguće je koristiti:

shareViaTwitter(message, image, url)

shareViaFacebook(message, image, url)

shareViaFacebookWithPasteMessageHint(message, image, url, pasteMessageHint)

shareViaInstagram(message, image)

shareViaWhatsApp(message, image, url)

shareViaSMS(messge, phoneNumber)

Zaključak

Struktura aplikacije prema package.json

{
  "name": "IonicSocialSharing",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/social-sharing": "^4.17.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/storage": "2.2.0",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-x-socialsharing": {}
    }
  }
}

{

"name": "IonicSocialSharing",

"version": "0.0.1",

"author": "Ionic Framework",

"homepage": "http://ionicframework.com/",

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint"

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

"@angular/compiler-cli": "5.2.11",

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

"@angular/platform-browser": "5.2.11",

"@angular/platform-browser-dynamic": "5.2.11",

"@ionic-native/core": "~4.15.0",

"@ionic-native/social-sharing": "^4.17.0",

"@ionic-native/splash-screen": "~4.15.0",

"@ionic-native/status-bar": "~4.15.0",

"@ionic/storage": "2.2.0",

"cordova-plugin-x-socialsharing": "^5.4.1",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.2.0",

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-x-socialsharing": {}

}

Video pozadina u Ionic aplikaciji

U današnje vrijeme brzog interneta šteta je ne iskoristiti mogućnost korištenja videa kao pozadine na ekranu za prijavu, splash screen ekranu ili kao pozadinu na bilo kojem drugom ekranu. Korisnici dobiju bolje korisničko iskustvo jer im taj video zaokupi pažnju i pitaju se što ih čeka dalje.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

$ ionic start IonicVideoBackground blank
$ cd IonicVideoBackground

1 2	$ ionic start IonicVideoBackground blank $ cd IonicVideoBackground

Video pozadina

U ovom koraku trebam imati spreman video koji ću koristiti kao pozadinu. Video ću pronaći na stranici http://coverr.co/

Preuzeti video postavljam unutar ./src/assets/ mape.

Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.

Umjesto postojećeg sadržaja home.html datoteke

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

The world is your oyster.

<p>

If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.

</p>

</ion-content>

postavljem sljedeće:

<ion-content class="homePage">
   <div class="fullScreenBg">
      <video class="fullScreenBgVideo" autoplay loop muted webkit-playsinline>
           <source src="assets/Office-Day.mp4" type='video/mp4; codecs="h.264"'>
           <source src="assets/Office-Day.webm" type="video/webm">
      </video>
   </div>
   <div class="center">
      <h1>Ionic Video Background</h1>
   </div>
</ion-content>

<ion-content class="homePage">

</video>

</div>

<h1>Ionic Video Background</h1>

</div>

</ion-content>

Ono glavno nalazi se unutar video taga za kojeg vjerujem da je web developerima poznat.

Ono što možda na prvu nije poznato je atribut webkit-playsinline koji zapravo znači da želim pokretanje video točno unutar HTML elementa u koji sam ga stavio i to bez kontrola za upravljanje (pokretanje, pauza, zaustavljanje).

Također, kako bi ovo bilo moguće, potrebno je u config.xml datoteku dodati sljedeće:

<preference name="AllowInlineMediaPlayback" value="true" />

1	<preference name="AllowInlineMediaPlayback" value="true" />

I uz malo CSS-a:

page-home {
   .homePage {
      color: #fff;
      text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray,
           1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;
   }
   .fullScreenBg {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       overflow: hidden;
       z-index: -100;
   }
   .fullScreenBgVideo {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
   }
   .center {
       top: 50%;
       transform: translateY(-50%);
       position: absolute !important;
       text-align: center;
       width: 100%;
   }
}

page-home {

.homePage {

color: #fff;

text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray,

1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;

}

.fullScreenBg {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

z-index: -100;

}

.fullScreenBgVideo {

position: absolute;

top: 0;

left: 0;

height: 100%;

}

.center {

top: 50%;

transform: translateY(-50%);

position: absolute !important;

text-align: center;

width: 100%;

}

Dobijem sljedeće:

P.S. Više o ovome moguće je saznati u knjizi Ionic Cookbook -Third Edition.

Uvod u Ionic 4

Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.

Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs

Postavljanje razvojne okoline

Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

Node.js LTS
Ionic CLI pomoću naredbe: $ npm install -g ionic
TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno je za razvoj iOS i Android hibridnih mobilnih aplikacija. Jedina razlika s kojom se moguće susresti je način instalacije jer na Windows baziranom računalu mogu se razvijati samo Android i Windows Phone aplikacije, dok je za iOS aplikacije potreban Mac.

Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:

$ node -v
$ npm –v
$ ionic –v

Pokretanje Ionic 4 projekta

Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.

Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.

$ ionic start myApp sidemenu --type=angular

1	$ ionic start myApp sidemenu --type=angular

Osim sidemenu teme mogao sam birati još između blank i tabs.

Ubrzo na ekranu vidim sljedeću poruku:

Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.

Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.

Na kraju dobijem sljedeću strukturu projekta:

Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.

app-routing.module.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

app-routing.module.ts

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

Jedina novost ovdje je app-routing.module.ts koji sadržava:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{

path: '',

redirectTo: 'home',

pathMatch: 'full'

{

path: 'home',

loadChildren: './home/home.module#HomePageModule'

{

path: 'list',

loadChildren: './list/list.module#ListPageModule'

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {}

Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router

U web pregledniku projekt izgleda ovako:

Zaključak

Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.