Ionic 3 - prikaz informacija o uređaju i platformi

Postoji mnogo vrsta i verzija mobilnih i drugih uređaja na kojima možemo pokrenuti Ionic aplikaciju, a također postoji i mnogo pluginova tj. dodataka pomoću kojih možemo proširiti mogućnosti Ionic aplikacije. Međutim, mnoštvo mogućnosti donosi i mnoštvo briga jer neće se sve funkcionalnosti moći iskoristiti na svim vrstama uređaja i nama kao developerima je vrlo korisno znati na kojem se uređaju tj. na kojoj se platformi vrti naša Ionic aplikacija kako bi je bolje znali prilagoditi.

Za ovu ćemo svrhu koristiti Device plugin koji dohvaća sljedeće podatke:

cordova – verzija Cordove
model – naziv modela. Vrijednost koju određuje proizvođač i može se razlikovati u različitim verzijama istog proizvoda
platform – naziv operacijskog sustava uređaja
uuid – jedinstveni identifikator uređaja
version – inačica/verzija operacijskog sustava
manufacturer – naziv proizvođača uređaja
isVirtual – je li uređaj pokrenut na simulatoru
serial – serijski broj uređaja

Dodavanje Device plugina

Pod uvjetom da već imamo pokrenut Ionic projekt možemo dodati IonicNative Device plugin sljedećim naredbama:

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

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

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera 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 { Device } from '@ionic-native/device';

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

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

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

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Device,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Primjena Device plugina

U ovom ćemo primjeru prikazati sve informacije koje nam Device plugin može dati na početnoj stranici.

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

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

  uuid:string;
  model:string;
  cordova:string;
  platform:string;
  version:string;
  manufacturer:string;
  isVirtual:boolean;

  constructor(public navCtrl: NavController,
              private _device: Device) {
   //IonicNative Device
   this.uuid = this._device.uuid;
   this.model = this._device.model;
   this.cordova = this._device.cordova;
   this.platform = this._device.platform;
   this.version = this._device.version;
   this.manufacturer = this._device.manufacturer;
   this.isVirtual = this._device.isVirtual;
  }

}

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

import { NavController } from 'ionic-angular';

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

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

uuid:string;

model:string;

cordova:string;

platform:string;

version:string;

manufacturer:string;

isVirtual:boolean;

constructor(public navCtrl: NavController,

private _device: Device) {

//IonicNative Device

this.uuid = this._device.uuid;

this.model = this._device.model;

this.cordova = this._device.cordova;

this.platform = this._device.platform;

this.version = this._device.version;

this.manufacturer = this._device.manufacturer;

this.isVirtual = this._device.isVirtual;

}

Na uređaju to izgleda ovako

<ion-header>
  <ion-navbar>
    <ion-title>
      IonicNative Device
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Ionic Native Device</h2>
  <ul>
    <li>{{uuid}}</li>
    <li>{{model}}</li>
    <li>{{cordova}}</li>
    <li>{{platform}}</li>
    <li>{{version}}</li>
    <li>{{manufacturer}}</li>
    <li>{{isVirtual}}</li>
  </ul>

  <p>{{poruka}}</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

IonicNative Device

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h2>Ionic Native Device</h2>

<ul>

<li>{{model}}</li>

<li>{{cordova}}</li>

<li>{{platform}}</li>

<li>{{version}}</li>

<li>{{manufacturer}}</li>

<li>{{isVirtual}}</li>

</ul>

<p>{{poruka}}</p>

</ion-content>

Zaključak

Kao što se iz ranije navedenog može vidjeti korištenje Device plugina je vrlo logično i jednostavno, a mogućnosti koje pruža su mnogobrojne i ovise jedino o vašoj mašti da određene funkcionalnosti pružite na određenim uređajima i platformama.

Ionic 3 – prikaz informacija o uređaju i platformi

Dodavanje Device plugina

Primjena Device plugina

Zaključak

Objavio

Tomislav Stanković

Odgovori Otkaži odgovor