Ionic 2/3

Ionic 2/3 X-SocialSharing

28 Aralık 2017
Ionic 2/3 X-SocialSharing

Merhaba bugün sizlerle Ionic 2/3 X-SocialSharing pluginine  göz atacağız ve bu sayede ionic deki bir şeyi (gönderi, yazı, söz vb.) sosyal medya platformlarında paylaşmayı ve diğer aksiyonların nasıl işlediğini ve bunları kullanmayı öğreneceğiz.

1.Ionic 2/3 X-SocialSharing Önemi ve Amaçı

Eğer uygulamamızda herhangi bir işi, işlemi kullanıcıya sosyal medya ‘ da paylaştırmasını hedefliyorsak bu plugini kullanmamız gerekmekte.

Bu sayede uygulamanızı sosyal medya işlemlerine entegre etmiş olacaksınız ve diğer bir boyutta ise uygulamanızın tanıtımını paylaştıra bileceksiniz.

2.İlk Adımlar

İ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-x-socialsharing

yazarak pluginimizi yüklüyoruz ve

npm install –save @ionic-native/social-sharing

ile yüklenmesini tamamlıyoruz.

3.Kullanımı

Kullanımına geçersek ben bir fab button  açarak yapacağım siz yine istediğiniz şekilde yapabilirsiniz.

ilk olarak tasarımı ile başlayalım;

dizayn.html

 

<ion-fab>
<button  ion-fab mini>
<ion-icon name=”share”></ion-icon>
</button>

<ion-fab-list side=”left”>

<button (click)=”twitterShare(“Merhaba” + ‘\n’ + “Dünya”)”  ion-fab mini>
<ion-icon name=”logo-twitter”></ion-icon>
</button>
<button  (click)=”whatsappShare(“Merhaba” + ‘\n’ + “Dünya” )”  ion-fab mini>
<ion-icon name=”logo-whatsapp”></ion-icon>
</button>
<button  (click)=”otherShare(“Merhaba” + ‘\n’ + “Dünya”)” ion-fab mini>
<ion-icon name=”at”></ion-icon>
</button>

</ion-fab-list>
</ion-fab>

 

şeklinde bir tasarım yapıyoruz. Bunun görüntüsünü ise aşağıda görebilirsiniz.

İşlemleri açıklama gerekirse;

  1. Bir fab açıyorum.
  2. Fab için bir buton veriyorum ve icon ile görsel bir düzen yakalıyorum.
  3. Fab list ile butonların duracağı yeri ve nereye açılacağını yani “left” ile sola doğru açılmasını söylüyorum.
  4. Butonların (click) özelliğine yapcakları işleri ve içinde neler paylaşılacağını söylüyorum.
  5. Bunları görsel olması açısından icon kullanarak yapıyorum.
Ionic 2/3 X-SocialSharing paylaşma-örneği

Ionic 2/3 X-SocialSharing paylaşma-örneği

 

Bundan sonra bunu kullanmaya geçiyoruz.

 

dizayn.ts

 

İlk olarak import ediyoruz.

 

import { SocialSharing } from ‘@ionic-native/social-sharing’;

daha sonra constructor ‘ da çağırıyoruz.

 public sharingVar: SocialSharing

şimdi paylaşım işine başlıyoruz.

 

whatsappShare(message) {

this.sharingVar.shareViaWhatsApp(message, null, “http://www.emreakbaki.com”)
.then(() => { },
() => {
let toast = this.toastCtrl.create({
message: “Hata”

});
toast.present();

})
}

twitterShare(message) {

this.sharingVar.shareViaTwitter(message, null, “http://www.emreakbaki.com”)
.then(() => {

},
() => {
let toast = this.toastCtrl.create({
message: “Hata”

});
toast.present();

})
}

otherShare(message) {

this.sharingVar.share(message, “Açıklama yazısı”, null, “http://www.emreakbaki.com”)
.then(() => {

},
() => {
let toast = this.toastCtrl.create({
message: “Hata”

});
toast.present();

})

}

ile paylaşma işlemlerini yaptırıyorum.

Burayı açıklarsak;

  1. Htmldeki fonksiyonları yazıyorum(Whatsapp, twitter, other)
  2. İçlerinde paylaşım işini yaptırıyorum ve “then” boş bırakıyorum siz isterseniz “başarılı” gibi bir şeyler yazdırabilirsiniz.
  3. Eğer başarılı olmaz ise hata mesajı basıyorum ekrana toast ile.

4.Sonuç

Daha detaylı bakmak için : Link

Sonuç olarak bu işlemlerden sonra uygulamanızı piyasadaki her güncel ve iyi uygulama gibi sosyal medya ile uyumlu bir hale getirmiş oluyorsunuz.

You Might Also Like

No Comments

Leave a Reply

Emre Akbaki