Ionic 2/3

ionic device

21 Eylül 2018
ionic-device

Merhaba ! Bugün ki konumuz ionic device plugini. Bu günlerde en çok kullanılan pluginlerden bir tanesi konumunda olan bu plugin ile isterseniz cihazın bilgilerini çekebileceksiniz. Bu pluginin kullanımı biraz karışık olduğundan dolayı sizlerle her ayrıntıyı paylaşmaya çalışacağım.

 

1-) ionic device plugin yüklemesi

 

Öncellikle bilgisayarınızda çoktan ionic frameworkunu yüklediğinizi varsayıyorum. Eğer yüklemediyseniz buradan yükleme rehberine ulaşabilirsiniz.

 

Konumuza dönersek bu plugine neden ihtiyaç duyacağımızı sorabilirsiniz.

Kısaca cevap şu şekilde olacaktır;

Cihaz ve platform bilgilerine erişmek için bu plugini kullanabiliriz. Ayrıca kullanabileceğiniz ve görebileceğiniz bütün özel veya gerekli bilgiler için bu plugin bulunmaz bir fırsat.

Hadi yükleme adımlarına bir göz atalım. “Devicexample” isimli bir proje açtım ve yükleme adımlarına geçiyorum;

 

ionic cordova plugin add cordova-plugin-device

ionic device

ionic device

 

Ve npm için yazacağım komut;

npm install –save @ionic-native/device

ionic device npm

ionic device npm

 

Bu komutlardan sonra app.module.ts ‘ e pluginimizi eklememiz gerekiyor. Alttaki resimde benim app.module.ts ‘ imi görebilirsiniz. Bu komutlardan sonra yükleme ile işimiz bitiyor. Şimdi ionic device pluginimizi kullanabiliriz.

 

ionic app module

ionic app module

 

2-) ionic device plugin kullanımı

 

Yükleme adımlarından sonra kullanım için hazırız. İlk olarak yapacağımız şey app.component.ts ‘ e  bu plugini eklemek. Ben bu projemde bu plugini kullanmak için toplu bir yöntem seçtim ve class yapısını kullandım. Aşağıda projemin son halini paylaşıyorum detaylarını ve ne anlama geldiğini resmin altında belirteceğim.

 

ionic device kullanımı

ionic device kullanımı

 

Bütün gerekli değerler için kodumu oluşturdum. Yukarıda görebileceğiniz gibi benim kullanacağım değerler uuid, model, platform, version ve manufacturer. (id, modeli, platformu, versiyonu ve üreticisi)

 

Kodları açıklamaya gelirsek;

 

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

Bu kod ile pluginimi importluyorum ve constructor ‘ de çağırıyorum.

 

device : Device

Daha sonra bir daha güzel bir kullanım için class oluşturuyorum ve buna deviceInfo adını verip değerlerini boş bırakıyorum.

 

deviceInfo = {
deviceid:”,
devicemodel:”,
deviceplatform:”,
deviceversion:”,
devicemanufacturer:”
}
Bu şu anlama geliyor ben istediğim değerleri bu classı kullanarak çağırabiliyorum yani ;
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;
Gördüğünüz gibi istediğim değerleri aldım ve class yapımın içindeki değerlere atadım. Kullanım için log kullanabilirsiniz yani ;
console.log(this.deviceInfo.devicemodel)
Bu üstteki kodda ise cihaz modelini istedim ve bunu log ekranına bastırdım.
Burada ki işimiz bitti bütün cihaz değerleri sorunsuz bir biçimde aldım. Bu nokta önemli bu değerleri sadece cihaz derlemesinde kullanabilirim yani web de kullandığım derlemede kullanamam. Bunun içinde derlemeniz için bir cihaz gerekli ve onda bütün değerleri rahatlıkla görebilirsiniz. Web de çalışmayacağını tekrar ediyorum çünkü tarayıcı bir cihaz değil !
Eğer tarayıcıda denediğinizde aşağıdaki bir log yazısı alacaksınız ben bunun için chrome seçtim ve aldığım log;
ionic device web derleme

ionic device web derleme

 

Log’da görebileceğiniz gibi hata veriyor. Bu hata şunu diyor “Bu projeyi gerçek bir cihazda  veya similatörde çalıştırdığınıza emin olun”  ve en altta bir “null” değeri gelmiş. Bu değer console.log(this.deviceInfo.devicemodel) kodundan dolayı böyle geldi. Similatör için denediğimi söyleyemem ama benim fikrime göre en iyi sonucu gerçek bir cihazda alabilirsiniz.

 

3-) Daha fazlası ve Sonuç

 

Daha detaylı kullanım ve diğer kullanabileceğiniz değerler için buraya bakabilirsiniz.

 

Bu plugini gördüğüm yerler spesifik olarak ban sistemleri ve bug çözüm sistemleri ama tabi ki kullanabileceğiniz yüzlerce alan mevcut.

 

Görüşmek üzere Emre

You Might Also Like

No Comments

Leave a Reply

Emre Akbaki