Σημείωση: Δεν υπάρχει διαθέσιμη παλιά τεκμηρίωση για αυτό το στοιχείο, επομένως βλέπετε την τρέχουσα τεκμηρίωση.
Το PushEngage Flutter SDK διευκολύνει την ενσωμάτωση ειδοποιήσεων push στις εφαρμογές σας Flutter, παρέχοντας απρόσκοπτη συμβατότητα τόσο με πλατφόρμες Android όσο και iOS.
Αυτός ο οδηγός θα σας καθοδηγήσει στα βήματα για τη ρύθμιση του PushEngage Flutter SDK και την ενεργοποίηση ειδοποιήσεων push στις εφαρμογές σας Android και iOS.
Πριν Ξεκινήσετε
Ακολουθεί μια λίστα με τα πράγματα που θα χρειαστείτε
- Ένα έργο Flutter & ένας λογαριασμός PushEngage. Αν δεν έχετε λογαριασμό, μπορείτε να εγγραφείτε εδώ.
- Λογαριασμός Firebase με ρύθμιση Firebase Cloud Messaging (FCM) για Android.
- Λογαριασμός προγραμματιστή Apple για τη διαμόρφωση υπηρεσιών Apple Push Notification (APN) για iOS.
Εγκατάσταση
1. Ανοίξτε το έργο σας Flutter στον επεξεργαστή κώδικα.
2. Προσθέστε την ακόλουθη εξάρτηση στο αρχείο pubspec.yaml σας:
dependencies:
pushengage_flutter_sdk: ^0.0.1
3. Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το πακέτο.
dependencies:
flutter pub get
Ρύθμιση Android
Ρύθμιση Firebase Cloud Messaging (FCM)
Για να ενεργοποιήσετε τις ειδοποιήσεις push για Android, θα χρειαστεί να διαμορφώσετε το Firebase Cloud Messaging (FCM):
1. Πρόσβαση στην κονσόλα Firebase χρησιμοποιώντας τον λογαριασμό σας Google.
2. Δημιουργία νέου έργου ή επιλογή υπάρχοντος Έργου: Κάντε κλικ στο “Προσθήκη Έργου” για να δημιουργήσετε ένα νέο έργο, ή επιλέξτε ένα υπάρχον έργο από τη λίστα σας. Αν χρησιμοποιείτε ένα υπάρχον έργο, προχωρήστε απευθείας στο βήμα 4.
3. Εισαγωγή Στοιχείων Έργου: Προσθέστε ένα όνομα για το έργο σας και κάντε κλικ στο Συνέχεια. Ολοκληρώστε τη διαδικασία ρύθμισης κάνοντας κλικ στο “Δημιουργία έργου” στην τελική οθόνη.
4. Προσθήκη Εφαρμογής Android στο Έργο: Στον πίνακα ελέγχου του έργου σας Firebase, κάντε κλικ στο εικονίδιο Android για να προσθέσετε μια εφαρμογή Android.
5. Διαμόρφωση Εφαρμογής Android: Εισαγάγετε το όνομα πακέτου της εφαρμογής σας Android (βρίσκεται στο android/app/build.gradle κάτω από το μπλοκ android) και δώστε ένα όνομα εφαρμογής. Κάντε κλικ στο Εγγραφή όταν τελειώσετε.
6. Λήψη Αρχείου Διαμόρφωσης: Λήψη του αρχείου google-services.json και τοποθετήστε το στη ρίζα της ενότητας της εφαρμογής σας Android στο android/app/
7. Δημιουργία Αρχείου JSON Λογαριασμού Υπηρεσίας
- Στην κονσόλα Firebase, κάντε κλικ στο εικονίδιο Ρυθμίσεις δίπλα στο “Επισκόπηση Έργου” στην επάνω αριστερή γωνία, και στη συνέχεια επιλέξτε Ρυθμίσεις Έργου.
- Μεταβείτε στην καρτέλα Λογαριασμοί Υπηρεσιών.
- Κάντε κλικ στο Δημιουργία νέου ιδιωτικού κλειδιού, και λήψη του αρχείου .json.
- Κρατήστε αυτό το αρχείο ασφαλές καθώς θα το χρειαστείτε για τη ρύθμιση του πίνακα ελέγχου PushEngage.
8. Ανάκτηση του ID Αποστολέα
- Στην κονσόλα Firebase, κάντε κλικ στο εικονίδιο Ρυθμίσεις δίπλα στο Επισκόπηση Έργου στην επάνω αριστερή γωνία και επιλέξτε “Ρυθμίσεις Έργου.”
- Επιλέξτε την καρτέλα Cloud Messaging, Εδώ, θα βρείτε το Sender ID, το οποίο χρειάζεται για την αρχικοποίηση του PushEngage SDK.
Ενσωμάτωση FCM με τον Πίνακα Ελέγχου PushEngage
Για να ενσωματώσετε απρόσκοπτα τις λεπτομέρειες FCM με τον Πίνακα Ελέγχου PushEngage, ακολουθήστε τα παρακάτω βήματα:
- Πρόσβαση στον λογαριασμό σας PushEngage συνδεόμενοι με τα διαπιστευτήριά σας.
- Μεταβείτε στις Ρυθμίσεις » Εγκατάσταση και επιλέξτε την καρτέλα Android SDK
- Τώρα, Ρυθμίστε τις Ρυθμίσεις FCM
- Εισαγάγετε το Firebase Sender ID σας (που ανακτήθηκε από το Firebase Console).
- Ανεβάστε το αρχείο JSON του Λογαριασμού Υπηρεσίας (λήφθηκε από το Firebase).
- Κάντε κλικ στο κουμπί Ενημέρωση για να αποθηκεύσετε αυτές τις ρυθμίσεις.
5. Αντιγραφή App ID: Αφού ρυθμίσετε τις ρυθμίσεις FCM, θα σας δοθεί ένα App ID. Αντιγράψτε αυτό το App ID, καθώς απαιτείται για την αρχικοποίηση του PushEngage Android SDK στην εφαρμογή σας Flutter.
Ρύθμιση iOS
Ρύθμιση έργου
Σας ζητούμε να ακολουθήσετε τα παρακάτω βήματα αφού ανοίξετε το έργο σας.
Δείτε πώς μπορείτε να ανοίξετε ένα έργο: your_project_name » iOS » Runner.xcworkspace.
1. Ενεργοποίηση Απομακρυσμένων Ειδοποιήσεων
- Ανοίξτε το έργο σας Xcode και επιλέξτε το κύριο έργο στον Πλοηγό του Έργου.
- Επιλέξτε τον κύριο στόχο της εφαρμογής σας.
- Μεταβείτε στις "Signing & Capabilities."
- Βεβαιωθείτε ότι η δυνατότητα Background Modes έχει προστεθεί. Αν όχι, προσθέστε την κάνοντας κλικ στο κουμπί "+ Capability".
- Ομοίως, βεβαιωθείτε ότι η δυνατότητα Push Notifications έχει προστεθεί. Αν όχι, προσθέστε την χρησιμοποιώντας το κουμπί "+ Capability".
Εάν η δυνατότητα "Push Notifications" δεν είναι ορατή στο Xcode:
- Μεταβείτε στον λογαριασμό σας Apple Developer.
- Μεταβείτε στις "Certificates, Identifiers & Profiles." Επιλέξτε το αναγνωριστικό της εφαρμογής σας.
- Επεξεργαστείτε τη διαμόρφωση του App ID σας και βεβαιωθείτε ότι οι Push Notifications είναι ενεργοποιημένες.
- Επιστρέψτε στο Xcode και προσπαθήστε να προσθέσετε ξανά τη δυνατότητα Push Notifications.
2. Ενεργοποίηση Λειτουργιών Παρασκηνίου
- Στο έργο σας Xcode, μεταβείτε στις "Signing & Capabilities."
- Μέσα στις "Background Modes", ενεργοποιήστε τόσο τις "Remote notifications" όσο και τις "Background fetch."
- Αυτό το βήμα διασφαλίζει ότι η εφαρμογή σας μπορεί να χειριστεί απομακρυσμένες ειδοποιήσεις και λήψεις παρασκηνίου αποτελεσματικά.
Εάν δεν έχετε πιστοποιητικό APN για iOS, μπορείτε να δημιουργήσετε ένα χρησιμοποιώντας τον οδηγό εδώ.
Στη συνέχεια, πρέπει να προσθέσετε επέκταση Notification Service και επέκταση Notification Content μόνο για iOS.
Δημιουργία Επέκτασης Notification Service
Η Επέκταση Notification Service βελτιώνει την ικανότητα της εφαρμογής σας iOS να λαμβάνει ειδοποιήσεις. Αυτή χρησιμοποιείται για την τροποποίηση του περιεχομένου της ειδοποίησης ή για τη λήψη/επεξεργασία οποιωνδήποτε δεδομένων κατά τη λήψη της ειδοποίησης. Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε μια Επέκταση Notification Service:
- Ανοίξτε το Xcode και μεταβείτε στο έργο σας.
- Επιλέξτε Αρχείο » Νέο » Στόχος από το μενού.
- Στο παράθυρο επιλογής προτύπου, επιλέξτε Notification Service Extension και κάντε κλικ στο Επόμενο.
4. Δώστε ένα όνομα στην επέκτασή σας, για παράδειγμα, PushEngageNotificationServiceExtension, και κάντε κλικ στο Τέλος.
4. Δώστε ένα όνομα στην επέκτασή σας, για παράδειγμα, PushEngageNotificationServiceExtension, και κάντε κλικ στο Τέλος.
5. Όταν ολοκληρώσετε τη δημιουργία της Επέκτασης Υπηρεσίας Ειδοποιήσεων, ενδέχεται να σας ζητηθεί να την ενεργοποιήσετε. Μην την ενεργοποιήσετε αμέσως. Η ενεργοποίηση της επέκτασης θα μετατοπίσει την εστίαση αποσφαλμάτωσης του Xcode από την εφαρμογή σας στην επέκταση. Αν την ενεργοποιήσετε κατά λάθος, μην ανησυχείτε. μπορείτε να επιστρέψετε στην αποσφαλμάτωση της εφαρμογής σας εντός του Xcode.
6. Στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον στόχο NotificationServiceExtension στο έργο από τη λίστα στόχων που δημιουργήθηκε στο βήμα αρ. 4.
7. Ορίστε το Στόχο Ανάπτυξης σε iOS 10 ή νεότερη έκδοση, η οποία είναι η έκδοση του iOS στην οποία η Apple κυκλοφόρησε την υποστήριξη για αυτήν την επέκταση.
Αρχικοποίηση του SDK PushEngage για την Επέκταση Υπηρεσίας Ειδοποιήσεων
Για να διασφαλίσετε τη σωστή λειτουργία του SDK PushEngage στην Επέκταση Υπηρεσίας Ειδοποιήσεων του iOS, ακολουθήστε τα παρακάτω βήματα
- Ανοίξτε το your_project_name » ios » Podfile.
- Προσθέστε τα ακόλουθα στο κάτω μέρος του Podfile σας:
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
- Εγκαταστήστε την εξάρτηση:
Τώρα πρέπει να δώσετε εντολή στον κατάλογο iOS του έργου σας και να εκτελέσετε την ακόλουθη εντολή:
pod repo update
pod install
- Στον στόχο της Επέκτασης Υπηρεσίας Ειδοποιήσεων, βεβαιωθείτε ότι εισάγετε το πλαίσιο PushEngage και προσθέστε τον απαραίτητο κώδικα αρχικοποίησης. Δείτε πώς μπορείτε να το κάνετε χρησιμοποιώντας Swift.
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)
}
}
}
Δημιουργία Επέκτασης Περιεχομένου Ειδοποίησης
Για να βελτιώσετε τον τρόπο με τον οποίο προσθέτετε προσαρμοσμένο UI, θα χρειαστεί να δημιουργήσετε μια Επέκταση Περιεχομένου Ειδοποίησης. Ακολουθήστε τα παρακάτω βήματα για να ρυθμίσετε την επέκταση:
- Στο Xcode, μεταβείτε στο Αρχείο » Νέο » Στόχος.
- Επιλέξτε Επέκταση Περιεχομένου Ειδοποίησης και κάντε κλικ στο Επόμενο.
3. Μην επιλέξετε “Ενεργοποίηση” στο παράθυρο διαλόγου που εμφανίζεται μετά το κλικ στο Τέλος. Η ακύρωση διατηρεί την αποσφαλμάτωση της εφαρμογής σας από το Xcode αντί για την επέκταση. Αν την ενεργοποιήσετε κατά λάθος, επιστρέψτε στην αποσφαλμάτωση της εφαρμογής σας εντός του Xcode (δίπλα στο κουμπί εκτέλεσης).
4. Στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον στόχο NotificationContentExtension στο έργο από τη λίστα στόχων που δημιουργήθηκε στο βήμα αρ. 2.
5. Ορίστε το Στόχο Ανάπτυξης σε iOS 10 ή νεότερη έκδοση, η οποία είναι η έκδοση του iOS στην οποία η Apple κυκλοφόρησε την υποστήριξη για αυτήν την επέκταση.
Αρχικοποίηση του SDK PushEngage για την Επέκταση Περιεχομένου Ειδοποίησης
Για να διασφαλίσετε τη σωστή λειτουργία του SDK PushEngage στην Επέκταση Περιεχομένου Ειδοποίησης του iOS, ακολουθήστε αυτά τα βήματα:
Ανοίξτε το your_project_name » iOS » Podfile.
Προσθέστε τα ακόλουθα στο κάτω μέρος του Podfile σας:
target 'Your_Notification_Content_Extension_Name' do
use_frameworks!
pod 'PushEngage', '0.0.4'
end
- Εγκαταστήστε την εξάρτηση: Εδώ είναι ο κώδικας που πρέπει να εκτελέσετε στη γραμμή εντολών σας.
e
pod repo update
pod install
- Στον στόχο του περιεχομένου ειδοποιήσεων, βεβαιωθείτε ότι εισάγετε το πλαίσιο PushEngage και προσθέστε τον απαραίτητο κωδικό αρχικοποίησης. Δείτε πώς μπορείτε να το κάνετε με μερικά παραδείγματα στοιχείων διεπαφής χρήστη χρησιμοποιώντας 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!)
}
}
}
}
Προσθήκη Ομάδων Εφαρμογών
Οι Ομάδες Εφαρμογών είναι απαραίτητες για την επικοινωνία μεταξύ της κύριας εφαρμογής, της επέκτασης υπηρεσίας ειδοποιήσεων και της επέκτασης περιεχομένου ειδοποιήσεων. Ακολουθήστε αυτά τα βήματα για να προσθέσετε Ομάδες Εφαρμογών στο έργο σας iOS:
Εάν έχετε μια υπάρχουσα ομάδα εφαρμογών και θέλετε να χρησιμοποιήσετε μόνο αυτήν, μεταβείτε στο βήμα αρ. 4.
- Στο έργο σας Xcode, στον περιηγητή έργου, επιλέξτε τον κατάλογο έργου κορυφαίου επιπέδου και επιλέξτε τον κύριο στόχο της εφαρμογής.
- Μεταβείτε στην καρτέλα Πιστοποίηση & Δυνατότητες.
- Κάντε κλικ στο κουμπί “+ Δυνατότητα” και επιλέξτε Ομάδες Εφαρμογών από τη λίστα.
4. Κάντε κλικ στο κουμπί + για να προσθέσετε μια Ομάδα Εφαρμογών.
5. Προσθέστε ένα μοναδικό όνομα στην Ομάδα Εφαρμογών σας και κάντε κλικ στο OK.
6. Στην κύρια περιοχή επεξεργασίας, επιλέξτε τον κύριο στόχο της εφαρμογής σας. δημιουργήσατε μια ομάδα εφαρμογών, παρέχετε το όνομα της ομάδας στο Info.plist της εφαρμογής σας με το κλειδί PushEngage_App_Group_Key.
7. Προσθέστε το ίδιο κλειδί και τιμή στο αρχείο Info.plist της Επέκτασης Υπηρεσίας Ειδοποιήσεων.
8. Βεβαιωθείτε ότι έχετε επιλέξει την ίδια ομάδα εφαρμογών τόσο στον Κύριο Στόχο Εφαρμογής όσο και στην Επέκταση Υπηρεσίας Ειδοποιήσεων.
Αρχικοποίηση SDK PushEngage
Στο main.dart σας, αρχικοποιήστε το SDK PushEngage.
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(),
);
}
}
Στο AppDelegate.swift της εφαρμογής iOS
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)
}
}
Χειρισμός deepLink
Ένα deepLinkStream είναι κάτι που εκπέμπει δεδομένα deep link.
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
Αυτό είναι όλο, έχετε πλέον ενσωματώσει με επιτυχία το Flutter SDK για Android & iOS App.
Εάν αντιμετωπίσετε οποιοδήποτε πρόβλημα, παρακαλώ επικοινωνήστε μαζί μας κάνοντας κλικ εδώ. Η ομάδα υποστήριξής μας θα μπορέσει να σας βοηθήσει.
