Flutter'da PushEngage Kullanarak Uygulama Anlık Bildirim Ayarlama

PushEngage Flutter SDK'sı, hem Android hem de iOS platformlarıyla sorunsuz uyumluluk sağlayarak anlık bildirimleri Flutter uygulamalarınıza entegre etmeyi kolaylaştırır.

Bu kılavuz, PushEngage Flutter SDK'sını ayarlama ve Android ve iOS uygulamalarınızda anlık bildirimleri etkinleştirme adımlarında size yol gösterecektir.

Başlamadan Önce

İhtiyacınız olacak şeylerin bir listesi

• Bir Flutter projesi ve PushEngage hesabı. Hesabınız yoksa buradan kaydolabilirsiniz.
• Android için Firebase Cloud Messaging (FCM) kurulumu olan Firebase hesabı.
• iOS için Apple Anlık Bildirim (APN) hizmetlerini yapılandırmak üzere bir Apple Geliştirici hesabı.

Kurulum

1. Flutter projenizi kod düzenleyicinizde açın.

2. pubspec.yaml dosyanıza aşağıdaki bağımlılığı ekleyin:

dependencies:
	pushengage_flutter_sdk: ^0.0.1

3. Paketi yüklemek için aşağıdaki komutu çalıştırın.

dependencies:
flutter pub get

Android Kurulumu

Firebase Cloud Messaging (FCM) Kurulumu

Android için anlık bildirimleri etkinleştirmek üzere Firebase Cloud Messaging (FCM) yapılandırmanız gerekecektir:

1. Google hesabınızı kullanarak Firebase konsoluna erişin.

2. Yeni bir proje oluşturun veya mevcut bir Projeyi seçin: Yeni bir proje oluşturmak için “Proje Ekle”ye tıklayın veya listeden mevcut bir projeyi seçin. Mevcut bir projeyi kullanıyorsanız, doğrudan 4. adıma geçin.

3. Proje Ayrıntılarını Girin: Projeniz için bir ad girin ve Devam'a tıklayın. Son ekrandaki “Proje oluştur” düğmesine tıklayarak kurulum işlemini tamamlayın.

4. Projeye Bir Android Uygulaması Ekleyin: Firebase proje kontrol panelinizde, bir Android uygulaması eklemek için Android simgesine tıklayın.

5. Android Uygulamasını Yapılandırın: Android uygulamanızın paket adını (android/app/build.gradle dosyasında android bloğu altında bulunur) girin ve bir uygulama adı belirtin. İşiniz bittiğinde Kaydet'e tıklayın.

6. Yapılandırma Dosyasını İndirin: google-services.json dosyasını indirin ve android/app/ adresindeki Android uygulama modülünüzün kök dizinine yerleştirin.

7. Hizmet Hesabı JSON'unu Oluşturun

• Firebase konsolunda, sol üstteki “Proje Genel Bakışı”nın yanındaki Ayarlar simgesine tıklayın, ardından Proje ayarları'nı seçin.
• Hizmet hesapları sekmesine gidin.
• Yeni özel anahtar oluştur'a tıklayın ve .json dosyasını indirin.
• Bu dosyayı güvende tutun, çünkü PushEngage kontrol paneli kurulumu için gerekecektir.

8. Gönderici Kimliğini Alın

• Firebase konsolunda, sol üstteki Proje Genel Bakışı'nın yanındaki Ayarlar simgesine tıklayın ve “Proje ayarları”nı seçin.
• Cloud Messaging sekmesini seçin. Burada, PushEngage SDK başlatması için gereken Gönderici Kimliğini bulacaksınız.

FCM'yi PushEngage Kontrol Paneline Entegre Edin

FCM ayrıntılarını PushEngage Kontrol Paneli ile sorunsuz bir şekilde entegre etmek için aşağıdaki adımları izleyin:

1. Kimlik bilgilerinizle giriş yaparak PushEngage hesabınıza erişin.

2. Ayarlar » Yükleme sekmesine gidin ve ardından Android SDK sekmesini seçin

4. Şimdi, FCM Ayarlarını Yapılandırın

• Firebase Gönderici Kimliğinizi (Firebase Konsolu'ndan alınan) girin.
• Hizmet Hesabı JSON dosyasını (Firebase'den indirilen) yükleyin.
• Bu ayarları kaydetmek için Güncelle düğmesine tıklayın.

5. Uygulama Kimliğini Kopyalayın: FCM ayarlarını yapılandırdıktan sonra size bir Uygulama Kimliği verilecektir. Bu Uygulama Kimliğini, PushEngage Android SDK'sını Flutter uygulamanızda başlatmak için gerekli olduğu için kopyalayın.

iOS Kurulumu

Projeyi Kurma

Projenizi açtıktan sonra aşağıdaki adımları izlemenizi rica ediyoruz.

Bir projeyi nasıl açacağınız aşağıdadır: proje_adınız » iOS » Runner.xcworkspace.

1. Uzak Bildirimleri Etkinleştirin

• Xcode projenizi açın ve Proje Gezgini'nde kök projeyi seçin.
• Ana uygulama hedefinizi seçin.
• “İmzalamalar ve Yetenekler.“ bölümüne gidin.
• Arka Plan Modları yeteneğinin eklendiğinden emin olun. Değilse, “+ Yetenek“ düğmesine tıklayarak ekleyin.
• Benzer şekilde, Anlık Bildirimler yeteneğinin eklendiğinden emin olun. Değilse, “+ Yetenek“ düğmesini kullanarak ekleyin.

Eğer “Anlık Bildirimler” yeteneği Xcode'da görünmüyorsa:

• Apple Geliştirici hesabınıza gidin.
• “Sertifikalar, Kimlikler ve Profiller.“ bölümüne gidin. Uygulama kimliğinizi seçin.
• Uygulama Kimliğinizin yapılandırmasını düzenleyin ve Anlık Bildirimler'in etkinleştirildiğinden emin olun.
• Xcode'a geri dönün ve Anlık Bildirimler yeteneğini tekrar eklemeyi deneyin.

2. Arka Plan Modlarını Etkinleştirin

• Xcode projenizde “İmzalamalar ve Yetenekler.“ bölümüne gidin.
• “Arka Plan Modları“ içinde hem “Uzak bildirimler” hem de “Arka plan alımı.“ seçeneklerini etkinleştirin.
• Bu adım, uygulamanızın uzak bildirimleri ve arka plan alımlarını verimli bir şekilde işleyebilmesini sağlar.

iOS için bir APN'ler sertifikanız yoksa, buradaki kılavuzu kullanarak bir tane oluşturabilirsiniz.

Sonra, yalnızca iOS için Bildirim Hizmeti uzantısı ve Bildirim İçeriği uzantısı eklemeniz gerekir.

Bildirim Hizmeti Uzantısı Oluşturma

Bildirim Hizmeti Uzantısı, iOS uygulamanızın bildirim alma yeteneğini geliştirir. Bu, bildirim içeriğini değiştirmek veya bildirim alındığında herhangi bir veriyi almak/işlemek için kullanılır. Bir Bildirim Hizmeti Uzantısı oluşturmak için şu adımları izleyin:

1. Xcode'u açın ve projenize gidin.
2. Menüden Dosya » Yeni » Hedef seçeneğini belirleyin.
3. Şablon seçimi penceresinde Bildirim Hizmeti Uzantısı'nı seçin ve İleri'ye tıklayın.

4. Uzantınız için bir ad sağlayın, örneğin, PushEngageNotificationServiceExtension, ve Bitir'e tıklayın.

4. Uzantınız için bir ad sağlayın, örneğin, PushEngageNotificationServiceExtension, ve Bitir'e tıklayın.

5. Bildirim Hizmeti Uzantısı'nı oluşturmayı bitirdiğinizde, etkinleştirmeniz istenebilir. Uzantıyı hemen etkinleştirmeyin. Uzantıyı etkinleştirmek Xcode'un hata ayıklama odağını uygulamanızdan uzantıya kaydıracaktır. Yanlışlıkla etkinleştirirseniz, endişelenmeyin; Xcode içinde uygulamanızın hata ayıklamasına geri dönebilirsiniz.

6. Proje gezgininde, en üst düzey proje dizinini seçin ve 4 numaralı adımdaki oluşturulan hedef listesinden projede NotificationServiceExtension hedefini seçin.

7. Dağıtım Hedefini iOS 10 veya üstü olarak ayarlayın; bu, Apple'ın bu uzantı desteğini yayınladığı iOS sürümüdür. 

Bildirim Hizmeti Uzantısı için PushEngage SDK'sını Başlatma

PushEngage SDK'sının iOS Bildirim Hizmeti Uzantınızda düzgün çalışmasını sağlamak için lütfen aşağıdaki adımları izleyin

1. proje_adınız » ios » Podfile'ı açın.
2. Podfile'ınızın altına aşağıdakileri ekleyin:

post_install do |installer|

  installer.pods_project.targets.each do |target|

    flutter_additional_ios_build_settings(target)

    target.build_configurations.each do |config|

      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'

     end

  end

end

target 'Your_Notification_Service_Extension_Name' do

  use_frameworks!

  pod 'PushEngage', '~>0.0.4'

end

3. Bağımlılığı yükleyin:

Şimdi projenizin iOS dizinine komut girmeniz ve aşağıdaki komutu çalıştırmanız gerekiyor:

pod repo update 

pod install

4. Bildirim Hizmeti Uzantısı hedefinizde, PushEngage çerçevesini içe aktardığınızdan ve gerekli başlatma kodunu eklediğinizden emin olun. Swift kullanarak bunu nasıl yapabileceğiniz aşağıdadır.

import UserNotifications
import PushEngage

@available(iOSApplicationExtension 10.0, *)
class PushEngageNotificationServiceExtension: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?
    var request : UNNotificationRequest?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.request = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
       
        if let bestContent = bestAttemptContent {
            PushEngage.didReceiveNotificationExtensionRequest(request, bestContentHandler: bestContent)
            contentHandler(bestContent)
        }
    }
   
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let request = request ,let bestAttemptContent =  bestAttemptContent {
            guard let content = PushEngage.serviceExtensionTimeWillExpire(request, content: bestAttemptContent) else {
                contentHandler(bestAttemptContent)
                return
            }
            contentHandler(content)
        }
    }

}

Bildirim İçeriği Uzantısı Oluşturma

Özel kullanıcı arayüzü ekleyerek iyileştirmek için bir Bildirim İçeriği Uzantısı oluşturmanız gerekecektir. Uzantıyı ayarlamak için aşağıdaki adımları izleyin:

1. Xcode'da Dosya » Yeni » Hedef'e gidin.
2. Bildirim İçeriği Uzantısı'nı seçin ve İleri'ye tıklayın.

3. Bitir'e tıkladıktan sonra görünen iletişim kutusunda “Etkinleştir” seçeneğini işaretlemeyin. İptal etmek, Xcode'un uygulamanızın hata ayıklamasını uzantı yerine uygulamanız için yapmasını sağlar. Yanlışlıkla etkinleştirirseniz, Xcode içinde uygulamanızın hata ayıklamasına geri dönün (çalıştırma düğmesinin yanında).

4. Proje gezgininde, en üst düzey proje dizinini seçin ve 2 numaralı adımdaki oluşturulan hedef listesinden projede NotificationContentExtension hedefini seçin.

5. Dağıtım Hedefini iOS 10 veya üstü olarak ayarlayın; bu, Apple'ın bu uzantı desteğini yayınladığı iOS sürümüdür. 

Bildirim İçeriği Uzantısı için PushEngage SDK'sını Başlatma

PushEngage SDK'sının iOS Bildirim İçeriği Uzantınızda düzgün çalışmasını sağlamak için bu adımları izleyin:

proje_adınız » iOS » Podfile'ı açın.

Podfile'ınızın altına aşağıdakileri ekleyin:

target 'Your_Notification_Content_Extension_Name' do
  use_frameworks!
  pod 'PushEngage', '0.0.4'
end

1. Bağımlılığı yükleyin: Komut satırınızda çalıştırmanız gereken kod aşağıdadır.

e

pod repo update 
pod install

2. In your Notification Content Extension target, make sure to import the PushEngage framework and add the necessary initialization code. Here’s how you can do it with some example of UI elements using Swift.

import UIKit
import UserNotifications
import UserNotificationsUI
import PushEngage

@available(iOSApplicationExtension 10.0, *)

class NotificationViewController: UIViewController, UNNotificationContentExtension {
    fileprivate var hostingView: UIHostingController<ContentView>?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
    }

    func didReceive(_ notification: UNNotification) {
        if(notification.request.content.categoryIdentifier == "your_identifier"){
            let payLoad = PushEngage.getCustomUIPayLoad(for: notification.request)
  //pass the payload to your custom View
            let view = CustomView(payLoadInfo: payLoad)
            hostingView = UIHostingController(rootView: view)
If let customView = self.hostingView {
            addChild(hostingView!)
}
        }
    }
}

Add App Groups

App Groups are essential for enabling communication between the main app, notification service extension, and notification content extension. Follow these steps to add App Groups to your iOS project:

If you have an existing app group and want to use that only, skip to step no. 4.

1. In your Xcode project, in the project navigator, select the top-level project directory and select the main target of the app.
2. Navigate to the Signing & Capabilities tab.
3. Click the “+ Capability” button and select App Groups from the list.

4. Click on the + button to add an App Group.

5. Add a unique name to your App Group and click on OK.

6. In the main editor area, select the main target of your app.  created an app group please provide the name of the group in your application Info.plist with key PushEngage_App_Group_Key.

7. Add the same key and value in the Notification Service Extension’s Info.plist file.

8. Make sure you select the same app group in both Main Application Target and the Your_Notification_Service_Extension.

Initialize PushEngage SDK

In your main.dart, initialize the PushEngage SDK.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    PushEngage.setAppId("your_pushengage_app_id");
  }
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'PushEngage',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

In your AppDelegate.swift of iOS app

import Flutter
import UIKit
import PushEngage

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    override init() {
        super.init()
        PushEngage.swizzleInjection(isEnabled: true)
    }
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        if #available(iOSApplicationExtension 10.0, *) {
            UNUserNotificationCenter.current().delegate = self
        }
        GeneratedPluginRegistrant.register(with: self)
        PushEngage.setBadgeCount(count: 0)
        PushEngage.setNotificationWillShowInForegroundHandler { notification, completion in
            if notification.contentAvailable == 1 {
                // in case developer failed to set completion handler. After 25 sec handler will call.
                completion(nil)
            } else {
                completion(notification)
            }
        }
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Handling deepLink

A deepLinkStream is something that emits deep link data. 

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late StreamSubscription _deepLinkSubscription;

  @override
  void initState() {
    super.initState();
    PushEngage.deepLinkStream.listen((data) {
      _handleDeepLink(data);
    });
  }

  void _handleDeepLink(Map<String, dynamic>? data) {
    // Parse the deep link and navigate accordingly
    Uri uri = Uri.parse(data?['deepLink']);
    print('Path: ${uri.path}');
    updateResponseText(data.toString());
    switch (uri.path) {
      case 'trigger':
      case '/trigger':
        print(‘your_implementation’)
        break;
    }
  }

c

i

That is all, you have now successfully integrated the Flutter SDK for Android & iOS App.

Herhangi bir sorunla karşılaşırsanız, lütfen buraya tıklayarak bize ulaşın. Destek ekibimiz size yardımcı olabilecektir.