Tomislav Stanković, Autor na Tomislav Stanković

Kako saznati status napunjenosti baterije unutar Ionic aplikacije

Cilj ovog blog posta je prikazati na koji način je moguće unutar Ionic aplikacije saznati kakav je status napunjenosti baterije mobilnog uređaja i je li uređaj trenutno spojen na punjenje. Ovisno o dobivenim parametrima lakše se može upravljati ostalim stanjima unutar aplikacije.

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem podršku za Android platformu.

$ ionic start IonicBatteryStatus --blank
$ cd IonicBatteryStatus
$ ionic cordova platform add android

$ ionic start IonicBatteryStatus --blank

$ cd IonicBatteryStatus

$ ionic cordova platform add android

Battery Status

Plugin Battery Status dodajem sljedećim naredbama:

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

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

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 { BatteryStatus } from '@ionic-native/battery-status';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

BatteryStatus,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Battery Status – Ionic Native plugin

Funkcionalnost ću ugraditi unutar HomePage komponente.

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

import { BatteryStatus } from '@ionic-native/battery-status';

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

  subscription:any;
  level: number;
  isPlugged: boolean;

  constructor(public navCtrl: NavController,
              private _batteryStatus: BatteryStatus) {

      //Battery Status start
      this.subscription = this._batteryStatus.onChange().subscribe(status => {
        console.log(status.level, status.isPlugged);
        this.level = status.level;
        this.isPlugged = status.isPlugged;
     });
     //Battery Status end

  }

  ionViewWillLeave() {
    this.subscription.unsubscribe();
}

}

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

import { NavController } from 'ionic-angular';

import { BatteryStatus } from '@ionic-native/battery-status';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

subscription:any;

level: number;

isPlugged: boolean;

constructor(public navCtrl: NavController,

private _batteryStatus: BatteryStatus) {

//Battery Status start

this.subscription = this._batteryStatus.onChange().subscribe(status => {

console.log(status.level, status.isPlugged);

this.level = status.level;

this.isPlugged = status.isPlugged;

});

//Battery Status end

}

ionViewWillLeave() {

this.subscription.unsubscribe();

}

Kada se mobilna aplikacija pokrene to izgleda ovako

Gore prikazani rezultat označava da je baterija mobilnog uređaja na 78% kapaciteta napunjenosti i da je trenutno spojena na punjač.

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicBatteryStatus",
  "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/battery-status": "^4.17.0",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",
    "@ionic/storage": "2.2.0",
    "cordova-android": "7.0.0",
    "cordova-plugin-battery-status": "^2.0.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.0.0",
    "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",
    "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": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-battery-status": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicBatteryStatus",

"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/battery-status": "^4.17.0",

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

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

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

"@ionic/storage": "2.2.0",

"cordova-android": "7.0.0",

"cordova-plugin-battery-status": "^2.0.2",

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

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

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

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

"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": {},

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

"cordova-plugin-battery-status": {}

"platforms": [

"android"

]

}

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

}

HelmetJS – zaštita HTTP headera Express.js aplikacija

Sigurnost, jedna od stvari s kojoj svi prilikom razvoja aplikacije govore, ali ju malo njih smatra ozbiljnom ili odgađa za kasnije.

S druge strane, HTTP headeri su nešto što korisnici Express.js aplikacije ne vide i onda je developerima lako zapostaviti ih i gledati na njih kao na nešto nebitno. S obzirom da headeri daju razne informacije koje osobe s lošim namjerama mogu iskoristiti jasno je zašto ipak treba voditi brigu o njima tj. informacijama koje pružaju.

Jedna od tih informacije je X-Powered-By: Express što web pregledniku govori što pokreće aplikaciju tj. na čemu se temelji. Helmet.js će, između ostalog, sakriti ovu informaciju.

Zato je cilj ovog blog posta pokazati kako na brz i jednostavan način zaštititi Express.js aplikaciju koristeći Helmet.js koji neće riješiti sve sigurnosne probleme, ali je ipak odličan početak.

Što je Helmet.js?

Helmet.js je kolekcija od 14 modula koje se brinu za sigurnost HTTP zaglavlja (headers) točnije response headera.

7 od 14 modula aktiviraju se jednom linijom koda

app.use(helmet())

1	app.use(helmet())

Osim toga, svaki od tih zadanih modula moguće je individualno aktivirati

app.use(helmet.noCache())
app.use(helmet.frameguard())

1 2	app.use(helmet.noCache()) app.use(helmet.frameguard())

ili deaktivirati

app.use(helmet({
  frameguard: false
}))

app.use(helmet({

frameguard: false

}))

Helmet.js moduli

Trenutno postoji 14 modula (defaultni označeni sa (✓)), a to su sljedeći:

1.) contentSecurityPolicy

Sets the Content-Security-Policy header which can help protect against malicious injection of JavaScript, CSS, plugins, and more.

2.) crossdomain

Prevents Adobe Flash and Adobe Acrobat from loading content on your site.

3.) dnsPrefetchControl (✓)

This middleware lets you disable browsers’ DNS prefetching by setting the X-DNS-Prefetch-Control header.

4.) expectCt

Tells browsers to expect Certificate Transparency. For more about Certificate Transparency and this header, see this blog post and the in-progress spec.

5.) featurePolicy

Lets you restrict which browser features can be used. For example, you can disable fullscreen or vibration APIs.

6.) frameguard (✓)

Frameguard mitigates clickjacking attacks by setting the X-Frame-Options header.

7.) hidePoweredBy (✓)

Removes the X-Powered-By header to make it slightly harder for attackers to see what potentially-vulnerable technology powers your site.

8.) hpkp

Helps you set the Public-Key-Pins header to prevent person-in-the-middle attacks. Usage of this header (and therefore this middleware) is not recommended. Be very careful when deploying this—you can easily misuse this header and cause problems. Chrome dropped support for HPKP citing risks of misuse.

9.) hsts (✓)

This module sets the Strict-Transport-Security header to keep your users on HTTPS.

10.) ieNoOpen (✓)

This middleware sets the X-Download-Options to prevent Internet Explorer from executing downloads in your site’s context.

11.) noCache

Aims to disable browser caching by setting several headers.

12.) noSniff (✓)

Helps prevent browsers from trying to guess (“sniff”) the MIME type, which can have security implications. It does this by setting the X-Content-Type-Options header to nosniff.

13.) referrerPolicy

Can control the behavior of the Referer header by setting the Referrer-Policy header.

14.) xssFilter (✓)

Sets the X-XSS-Protection header to prevent reflected XSS attacks.

Kreiranje projekta

Kreiram mapu projekta ExpressHelmet i unutar nje datoteku server.js

sa sljedećim sadržajem:

var express = require('express');
var app = express(); 
 
var port = process.env.PORT || 8080;
 
var apiRoutes = express.Router();
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' }); 
});
 
// ostale GET, POST, PUT, DELETE definiraju se u nstavku
 
// sve rute sadržavaju '/api'
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express');

var app = express();

var port = process.env.PORT || 8080;

var apiRoutes = express.Router();

apiRoutes.get('/', function(req, res) {

res.json({ message: 'API radi!' });

});

// ostale GET, POST, PUT, DELETE definiraju se u nstavku

// sve rute sadržavaju '/api'

app.use('/api', apiRoutes);

app.listen(port);

console.log('API je pokrenut i koristi port:' + ' ' + port);

Detalje o tome kako kreirati osnovni Express.js API moguće je pronaći u blog postu pod naslovom Izrada RESTful API-ja koristeći Node.js i Express.js

Ako sada pokrenem API na adresi http://localhost:8080/api unutar Google Chrome Developer alata pod tabom Network dobit ću sljedeće:

Postavljanje Helmet.js-a

Sljedećom naredbom untuar mape projekta instaliram Hellmet.js

$ npm install helmet --save

1	$ npm install helmet --save

Također, unutar server.js datoteke dodajem sljedeće:

var express = require('express');
var app = express();
var helmet = require('helmet');
 
var port = process.env.PORT || 8080; 
 
var apiRoutes = express.Router();
app.use(helmet());
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' });  
});

// sve rute sadržavati će '/api'
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express');

var app = express();

var helmet = require('helmet');

var port = process.env.PORT || 8080;

var apiRoutes = express.Router();

app.use(helmet());

apiRoutes.get('/', function(req, res) {

res.json({ message: 'API radi!' });

});

// sve rute sadržavati će '/api'

app.use('/api', apiRoutes);

app.listen(port);

console.log('API je pokrenut i koristi port:' + ' ' + port);

Ako sada pokrenem API na adresi http://localhost:8080/api unutar Google Chrome Developer alata pod tabom Network dobit ću sljedeće:

Na slici iznad mogu se vidjeti headeri kojih ranije nije bilo, a to su:

Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

Strict-Transport-Security: max-age=15552000; includeSubDomains

X-Content-Type-Options: nosniff

X-DNS-Prefetch-Control: off

X-Download-Options: noopen

X-Frame-Options: SAMEORIGIN

X-XSS-Protection: 1; mode=block

Također, headere mogu vidjeti i pokretanjem sljedeće naredbe:

curl -i http://localhost:8080/api

1	curl -i http://localhost:8080/api

Zaključak

Helmet.js nije “all in one” rješenje niti se njegovim postavljenjem unutar projekta može reći da je sigurnosna zaštita aplikacije gotova, ali je svakako dobar početak procesa razmišljanja o sigurnosti.