Tech

Ionic Device

21 September 2018
ionic-device

Hello ! Today  our topic is ionic device plugin. Its most common plugin in ionic framework. Especially if you want device informations from the users. About usage this plugin its a little bit confused  because of this I will share every detail steps. Let’s start !

 

1-)Ionic Device Plugin Installation

 

I suppose you have already ionic framework in your computer. If you dont have you can look at my post how to install ionic to your computer.

 

Lets back to main topic. Why we do need this plugin ?

Answer is for access device and platform informations. You can see every detail informations about device and platform and you can use for any special requirements.

So look at the installation steps. I have already a project name “devicexample”. So I write installation commands.

 

ionic cordova plugin add cordova-plugin-device

 

"<yoastmark

And for npm install I write this command;

 

npm install –save @ionic-native/device

 

"<yoastmark

 

"<yoastmark

After this command we need add plugin to our app.module.ts   You can see on above  my  app.module.ts and after add that we complete the installation. Now we can use ionic-device plugin.

 

2-) Ionic Device Plugin Usage

After the installation steps we ready the usage. So first thing is adding the Ionic Device  plugin  in the app.component.ts      I will use the values like a class. I am adding picture all codes in following picture than I will explain the values mean.

 

"<yoastmark

 

I added all codes for need values. For examle I want to see uuid, model, platform, version and manufacturer values.

 

For explanation of codes ;

 

 

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

 

 

I imported my plugin and added constructor the usage.

 

 

device : Device

 

 

I created a class for nice use so my class name is deviceInfo and values are empty.

deviceInfo = {
deviceid:”,
devicemodel:”,
deviceplatform:”,
deviceversion:”,
devicemanufacturer:”
}
so I can call my values with using my class. Like ;
this.deviceInfo.deviceid=device.uuid;
this.deviceInfo.devicemodel=device.model;
this.deviceInfo.deviceplatform=device.platform;
this.deviceInfo.deviceversion=device.version;
this.deviceInfo.devicemanufacturer=device.manufacturer;
You can use this values like that ;
console.log(this.deviceInfo.deviceid);
I used for console log.
So its done I took all values of device. So this point is important I can use this values in device debug or product so this mean you can’t use this plugin for web debug you have to use a device because you want device informations ! 
If you try the web debug you will get this error in console logs.

"<yoastmark

 

 

 

So as you can see logs says “Make sure to a run in a real device or simulator” and I writed this code “console.log(this.deviceInfo.deviceid)” and I get “null” in log screen. I never try a similator but in my opinion you can get best results in a real device.

 

 

3-)For More and Conclusion

 

You can look at the ionic website for more detail and more values.

 

As a result you can use this plugin like a ban system or any bug system solution.

 

Cheers Emre

You Might Also Like

No Comments

Leave a Reply

Emre Akbaki