React Native OneSignal Push Entegrasyonu

Merhaba, bu yazımda react-native ile push entegrasyonu hakkında bilgiler paylaşacağım. Push sertifika adımlarını sadece ios üzerinde anlatacağım.

Şu ana kadar OneSignal’i kendi uygulamalarımda sıkınıtısız ve entegrasyonu çok kolay bir şekilde kullandım. OneSignal sadece react-native için değil Ionic , phoneGap ve cordova sdklarıda mevcut ve son günlerin popüler olayı web push’uda desteklemekte. OneSignal döküman sayfasını buradan bulabilirsiniz.

iOS için sertifika adımları için OneSignal’in otomatik bir hale getirdiği bir sistem var. Ben daha önce kullanmadım fakat bakmak isterseniz buradan ulaşabilirsiniz. OneSignal’in kendi anlatımı için buraya bakabilirsiniz. Biz de adım adım anlatmaya geçebiliriz;

• React native uygulamamızı oluşturuyoruz. Oluşturduğumuz app’in bundle id kullanacağız.

$ react-native init [APPNAME]

• Keychain’e girip sol üstten “Keychain Access”>”Certificate Assistant”>”Request a Certificate From a Certificate Authority…”

• Çıkan sayfa üzerinden mail’i yazdıktan sonra save to disk seçiyoruz.

• Continue ile devam ettikten sonra bize certSigningRequest dosyası veriyor. Bu dosyayı appledeveloper altında daha önceden oluşturduğumuz appId’i bularak altta bulunan edit’e tıklıyoruz. Adım 1 de oluştuduğunuz appId burada olmaya bilir. Burada kendiniz manuel olarak bundle id kullanarak oluşturabilirsiniz.

• edit’e tıkladıktan sonra altta bulunan Push Notifications enable hale getiriyoruz orada benim başıma gelen bir şey development ile devam ettiğimde sorun yaşadım. Ondan dolayı Production SSL Certificate ile devam edelim.

• Create Certificate dedikten sonra contiunue ve ardından bir önceki adımda keychain ile yarttığımız dosyayı çıkan sayfaya upload edeceğiz. Ardından bize Apple Push Services sertifikasını download edeceğiz.

• Download ettikten sonra bize app.cer adında bir sertifika dosyası veriyor buna çift tıkmamamız yeterli. Çift tıkladıktan sonra keychain altına login>Certificates alınta görebilir hale geleceksiniz.

• Push Services sertifikasını bulduktan sonra sağ tıklayıp export’a tıklıyoruz.

• Export’a tıkladıktan sonra bize şifre sorucak burası opsiyonel. İsterseniz buraya bir şifre yazabilirsiniz. Şifreyi daha sonra oneSignal entegrasyonunda girmeniz gerekmekte. Şifre yazmak istemiyorsanız herhangi bir şifre girmeden. OK tıklamanız yeterli. Bu adımdan sonra keychain ile yapacağımız işlemlerin sonuna gelmiş oluyoruz. Artık onesignal ile devam edebiliriz.

• Onesignal’e geldikten sonra Apple iOS (APNS) Configuration ‘a gelip bir önceki adımda çıkardığımız p.12 dosyasını choose file tıkayıp yüklüyoruz ve ardından save tıklıyoruz.

• Artık xcode ayarlarını yapma zamanı geldi. Uygulama klasörü altında ios klasörüne gelerek;

$ pod init

yapmamız gerekiyor. Bu şekilde ios klasörü altına podfile yüklemiş olacağız. Ardından ;

$ echo “pod ‘OneSignal’, ‘~> 1.13.3’” >> Podfile

ile react-native için gerekli olan onesignal sdk yükleyeceğiz. Burada dikkat edilmesi gereken verisonun sabit olması. eğer yanlışlıkla version vermeden yüklerseniz podfile altından silebilirsiniz.

• Artık yüklemeye hazırsınız!

$ pod install

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

• Onesignal’in sahip olduğu third party bir component var. Bende onu kullanacağım. Component dökümanı için buraya tıklayabilirsiniz. En başta oluşturduğumuz app klasörü altına gelerek ;

$ npm install react-native-onesignal --save

• Projemize girdikten sonra proje adına sağ tıklayarak Add Files to ‘APPNAME’ seçiyoruz.

• Açılan pencerede node_modules altında yeni yüklediğimiz component’a gidiyoruz ve RCTOneSignal.xcodeproj seçiyoruz. Burada önemli bir noktada ‘copy item if needed’ seçeneği seçeli olmalı. Eğer seçeneği göremiyorsanız dosya seçme penceresi altında options’a basabilirsiniz.

• projemize girdikten sonra sol üstten proje adına tıklayarak capabilites altına geliyoruz ve Push Notification ve Background altında Remote notification on haline getiriyoruz.

• Build Settings altında bir değişiklik gerekiyor. ‘BuildSettings>Header Search Paths’ e girip non-recursive haleden recursive hale getiriyoruz.

• Artık çok kısa bir kod yazma zamanı geldi!
• AppDelegate.h altına

#import <RCTOneSignal.h>
@property (strong, nonatomic) RCTOneSignal* oneSignal;

• AppDelegate.m altına alltaki kod bloğunu ekleyeceğiz. APPID yazan yere sizin onesignal appidniz gelecek unutmayın!

#import <OneSignal/OneSignal.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
    
  // [SIZIN ONESIGNAL APPIDNIZ!]
self.oneSignal = [[RCTOneSignal alloc] initWithLaunchOptions:launchOptions appId:@"APPID"];
return YES;
}
//-------------------------------------------------------------
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification {
[RCTOneSignal didReceiveRemoteNotification:notification];
}

• Artık son olarak oluşturduğumuz provisioning profile uygulama kurulurken seçememiz gerekiyor buyrun efendim;

• Evet artık cihaz üzerinde çalıştırıp bildirim atma zamanı geldi
• Notification göndermek için ben onesignal’in kendi web arayüzünü kullanacağım.
• Buyrun sonuç →