ionic3: การอ่านข้อมูลของเครื่อง (Device)

Installation
Install the Cordova and Ionic Native plugins:

[code]
> ionic cordova plugin add cordova-plugin-device
> npm install –save @ionic-native/device
[/code]

Add platform
It’s now time to add a platform. You can add iOS or Android by running the following command.

[code]
> ionic cordova platform add android
> ionic cordova platform add ios
[/code]

ตัวอย่างอ่านค่า uuid

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,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Device
  ]
})
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,

{provide: ErrorHandler, useClass: IonicErrorHandler},

Device

]

})

export class AppModule {}

home.html

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

<ion-content padding>
  Device UUID is: {{deviceUUID}}
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

Device UUID is: {{deviceUUID}}

</ion-content>

home.ts

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 {

  deviceUUID;

  constructor(public navCtrl: NavController,
    private device: Device) {
      this.deviceUUID = this.device.uuid;
      console.log('Device UUID is: ' + this.device.uuid);
  }

}

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 {

deviceUUID;

constructor(public navCtrl: NavController,

private device: Device) {

this.deviceUUID = this.device.uuid;

console.log('Device UUID is: ' + this.device.uuid);

}

Run

ถ้ารันด้วย browser

[code]
> ionic cordova run browser
[/code]

จะขึ้นว่า
Device UUID is: null

ให้มาลองรันเครื่อง Android

[code]
> ionic cordova run android –device
[/code]

จะได้ค่า Device UUID ออกมา

ตัวอย่างอ่านค่าต่างๆของเครื่อง

home.html

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

<ion-content padding>
  <p>{{deviceInfo | json}}</p>
  <button ion-button (click)="getInfo()">Default</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>{{deviceInfo | json}}</p>

<button ion-button (click)="getInfo()">Default</button>

</ion-content>

home.ts

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

interface deviceInterface {
  id?: string,
  model?: string,
  cordova?: string,
  platform?: string,
  version?: string,
  manufacturer?: string,
  serial?: string,
  isVirtual?: boolean,
};

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

  public deviceInfo: deviceInterface = {};

  constructor(public navCtrl: NavController,
    private device: Device) {
  }

  getInfo() {
    this.deviceInfo.id = this.device.uuid;
    this.deviceInfo.model = this.device.model;
    this.deviceInfo.cordova = this.device.cordova;
    this.deviceInfo.platform = this.device.platform;
    this.deviceInfo.version = this.device.version;
    this.deviceInfo.manufacturer = this.device.manufacturer;
    this.deviceInfo.serial = this.device.serial;
    this.deviceInfo.isVirtual = this.device.isVirtual;
  }
}

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

import { NavController } from 'ionic-angular';

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

interface deviceInterface {

id?: string,

model?: string,

cordova?: string,

platform?: string,

version?: string,

manufacturer?: string,

serial?: string,

isVirtual?: boolean,

};

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

public deviceInfo: deviceInterface = {};

constructor(public navCtrl: NavController,

private device: Device) {

}

getInfo() {

this.deviceInfo.id = this.device.uuid;

this.deviceInfo.model = this.device.model;

this.deviceInfo.cordova = this.device.cordova;

this.deviceInfo.platform = this.device.platform;

this.deviceInfo.version = this.device.version;

this.deviceInfo.manufacturer = this.device.manufacturer;

this.deviceInfo.serial = this.device.serial;

this.deviceInfo.isVirtual = this.device.isVirtual;

}

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3: การอ่านข้อมูลของเครื่อง (Device)