Ionic 2/3

Ionic 2/3 ‘ de internet kontrolü

16 Aralık 2017
internet kontrolü için kullanıcı mesajı

Merhaba bugün sizlerle Ionic ‘ de  Uygulamada internet kontrolü yapacağız ve ileride başka neler ekleyebileceğimize değineceğiz.

1.Neden internet kontrolü ?

Öncellikle bu pluginin neden gerekli olduğuna bakalım.

  • Uygulama internete bağlı çalışıyor ise bağlantı gittiğinde veya hiç olmadığında bunu kullanıcıya göstermeniz gerekiyor.
  • Bağlı olduğu veya olmadığı durumlarda belli bir işlem yapıyorsanız bunu kontrolü için gerekiyor.
  • Bağlantı türünü belirlemek için kullanılabilir(Wifi veya dolaşım).

 

2.Kurulumu

İlk olarak yeni bir uygulama açtığımızı varsayarak ilerleyeceğim. Eğer yeni bir uygulama açmayı bilmiyorsanız buraya tıklayarak gerekli adımları öğrenebilirsiniz.

Npm install ve ionic serve ettikten sonra pluginimizin yüklenmesine geçebiliriz.

İlk olarak;

ionic cordova plugin add cordova-plugin-network-information

yazarak pluginimizi ekliyoruz.

Daha sonra npm için;

npm install  –save @ionic-native/network

yazarak npm için de yüklemiş oluyoruz.

3.Oluşturulması ve Yüklenmesi

Kullanımı için birçok yerde kullanabilirsiniz ama ben sadece internet kontrolü için kullanacağım.

2.Başlıktaki işlemleri yaptıktan sonra proje dizinimiz den

app>app.component.ts   dosyasını açıyoruz.

Bunun sebebi benim uygulamayı ilk açtığında ve sürekli kontrol etmek istemem.

Bu dosyaya ilk olarak imports kısmından yani en üstteki kısıma bizim pluginimizi ekliyoruz.

import { Network } from ‘@ionic-native/network’

bunu ekledikten sonra bunu constructor’ da yüklemem(initialize)  ve oluşturmam(create) gerekiyor. Bunun için

 

public network: Network

 

şeklinde oluşturuyorum. Şimdi istediğim gibi bunu kullanabilirim.

 

4.Kullanımı

 

Kullanımı için buradaki sayfaya da bakarak kullanım oluşturabilirsiniz. Ben şöyle kullanacağım;

 

network.onDisconnect().subscribe(() => {
let alert = this.alertCtrl.create({
title: “Bağlantı Hatası “,
subTitle: “İnternet bağlantınızda bir problem olabilir. Lütfen tekrar deneyiniz.  “,
buttons: [{

text: (“Tamam”)
}]
});
alert.present();
});
network.onConnect().subscribe(() => {

});

Şimdi bunu açıklayalım:

  • network.onDisconnect().subscribe  :  Bu kod eğer internet bağlantısı yok ise yapılacak işleri göstermenizi sağlıyor ben örnek açısından sadece bir alert basıp “Internet bağlantınız yok”  şeklinde bir mesaj gösterdim.  Siz isterseniz bu bağlantıyı açtırabilir veya sadece bir mesaj göstererek de kullanabilirsiniz.
  • network.onConnect().subscribe :  Bu kod ise internet bağlantısı var ise yapılacak işleri göstermenizi sağlıyor, örnek olması açısından alerte “Internet bağlantınız var” şeklinde bir mesaj gösterebilirsiniz yine siz istediğiniz şekilde kullanabilirsiniz.

5.Sonuç

Bu plugi ‘ nin başka bir işlemi daha var

 

internet-tipi

internet-tipi

 

Bu şekilde bağlantı türünü de tespit edip gerekli işlemleri yapabilirsiniz. İstenir ise kullanım şeklini paylaşabilirim.

Sonuç olarak bu plugin ile internet bağlantısı ile olan tüm işlerinizi halledebilirsiniz aşağıdaki ekran görüntülerine göz gezdirerek görsel sonuçlar çıkarabilirsiniz.

İyi Çalışmalar…

internet kontrolü için kullanıcı mesajı

internet kontrolü için kullanıcı mesajı

 

 

internet kontrolü kod

internet kontrolü kod

You Might Also Like

No Comments

Leave a Reply

Emre Akbaki