Info |
---|
Bu sayfa React-Native-Related-Digital SDK kurulum klavuzudur. |
Table of Contents | ||||
---|---|---|---|---|
|
Source | URL |
---|---|
GitHub | https://github.com/relateddigital/react-native-related-digital |
npm |
Kurulum
SDK içerisinde ihtiyaç duyulan kütüphaneyi kurun
Code Block |
---|
npm install @react-native-async-communitystorage/async-storage |
ya da
Code Block |
---|
yarn add @react-native-async-communitystorage/async-storage |
Alttaki komutu çalıştırarak React-Native-Related-Digital SDK’sını kurun
...
Bir Firebase projesi oluşturun. Size verilen Google-services.json dosyasını
android/app
klasörü altına kopyalayın. Örnek kullanımAlttaki satırı
android/build.gradle
dosyanızın iki repositories bölümüne de ekleyin.Code Block mavenCentral() maven { url 'http://developer.huawei.com/repo/' allowInsecureProtocol = true }
android/build.gradle
dosyanızın dependencies bölümüne aşağıdaki satırları ekleyin. Örnek kullanımCode Block language java classpath 'com.google.gms:google-services:4.3.314' classpath 'com.huawei.agconnect:agcp:1.26.15.301300'
minSdkVersion
21 olarak ayarlayıncompileSdkVersion
vetargetSdkVersion
32 olarak ayarlayı.android/app/build.gradle
dosyanızın en altına aşağıdaki satırları ekleyin. Örnek kullanımCode Block language java apply plugin: 'com.google.gms.google-services' apply plugin: 'com.huawei.agconnect'
android/app/build.gradle
dosyanızdadefaultConfig
bölümüne alttaki satırı ekleyinCode Block multiDexEnabled true
...
Geofence özelliğini etkinleştirmek için
AndroidManifest.xml
dosyanıza aşağıdaki kodu ekleyin.Code Block language xml <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" /> <service android:name="com.visilabs.gps.geofence.GeofenceTransitionsIntentService" android:enabled="true" android:permission="android.permission.BIND_JOB_SERVICE" /> <receiver android:name="com.visilabs.gps.geofence.VisilabsAlarm" android:exported="false" /> <receiver android:name="com.visilabs.gps.geofence.GeofenceBroadcastReceiver" android:enabled="true" android:exported="true" />
Sdk’yı çalıştırmak için alttaki init kodunu
MainApplication.java
dosyanıza ekleyin.
Geofence özelliğini etkin hale getirmek içinVisilabs.CreateAPI
fonksiyonunun son parametresini(12.)true
değeri girin.Code Block language java import com.visilabs.Visilabs; import euromsg.com.euromobileandroid.EuroMobileManager;
Code Block language java @Override public void onCreate() { // ... initEuroMessage(); } private void initEuroMessage() { String appAlias = "demo-alias"; String huaweiAppAlias = "demo-alias-huawei"; String organizationId = "OID"; String siteId = "SID"; String datasource = "datasource"; String channel = "Android"; String segmentUrl = "http://lgr.visilabs.net"; String realtimeUrl = "http://rt.visilabs.net"; String targetUrl = "http://s.visilabs.net/json"; String actionUrl = "http://s.visilabs.net/actjson"; String geofenceUrl = "http://s.visilabs.net/geojson"; Visilabs.CreateAPI(organizationId, siteId, segmentUrl, datasource, realtimeUrl, channel, this, targetUrl, actionUrl, 30000, geofenceUrl, true, "reactnative"); EuroMobileManager euroMobileManager = EuroMobileManager.init(appAlias, huaweiAppAlias, this); euroMobileManager.setPushIntent("com.demo.MainActivity", this); euroMobileManager.setNotificationLargeIcon(R.drawable.ic_launcher,this); euroMobileManager.setNotificationTransparentSmallIcon(R.drawable.ic_launcher, this); }
Not: setNotificationTransparentSmallIcon fonksiyonuna atayacağınız icon tek katmanlı bir görsel formatı olmalıdır.
...
AppDelegate.h
dosyanızdaki @interface ile başlayan satıra UNUserNotificationCenterDelegate parametresini ekleyin. Son hali alttaki gibi olmalı. Örnek kullanım
Klasik React Native projelerindeCode Block @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
Expo projelerinde
Code Block language objective-c @interface AppDelegate : UMAppDelegateWrapper <RCTBridgeDelegate, EXUpdatesAppControllerDelegate, UNUserNotificationCenterDelegate>
AppDelegate.m
dosyanıza alttaki satırları ekleyin. Örnek kullanımCode Block language objective-c #import "RelatedDigitalPushModule.h" #import <UserNotifications/UserNotifications.h>
AppDelegate.m
dosyanızdadidFinishLaunchingWithOptions
methodunun içerisindekireturn
ifadesinin hemen üzerine alttaki satırları ekleyin. Örnek kullanımCode Block language objective-c UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; center.delegate = self;
AppDelegate.m
dosyanıza alttaki methodları ekleyin. Örnek kullanımCode Block language objective-c - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [RelatedDigitalPushModule didRegisterUserNotificationSettings:notificationSettings]; } - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [RelatedDigitalPushModule didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; } - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler { [RelatedDigitalPushModule didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler]; } - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error { [RelatedDigitalPushModule didFailToRegisterForRemoteNotificationsWithError:error]; } -(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler { completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge); }
AppDelegate.m
dosyasındakididFinishLaunchingWithOptions
fonksiyonununun return ifadesinden hemen öncesine alttaki kodu ekleyin.
Not: In App ve Geofence özelliklerinin aktif olması içinInAppNotificationsEnabled
vegeofenceEnabled
parametreleritrue
olmalıdır.
Başlangıçta konum izninin alınmasını istemiyorsanızaskLocationPermmissionAtStart
parametresinifalse
olarak ayarlayın. ArdındanrequestLocationPermission()
işleviyle istediğiniz zaman izin talep edebilirsiniz.Code Block language objective-c [RelatedDigitalPushModule initVisilabsinitRelatedDigital:@"organization_id" profileId:@"profile_id" dataSource:@"datasource" appAlias:@"app_alias" inAppNotificationsEnabled:true requestTimeoutSeconds:30 geofenceEnabled:true askLocationPermmissionAtStart:true maxGeofenceCount:20 isIDFAEnabled:true loggingEnabled:true];
SDK Swift kodu içerdiğinden ve xcode her hedefte en az bir boş swift dosyası gerektirdiğinden projenizin ios dizinine boş bir swift dosyası ekleyin.
Empty.swift
iOS 14 ve sonraki sürümlerde AdvertisingTrackingID'yi kullanabilmek için
Info.plist
dosyanızaNSUserTrackingUsageDescription
ekleyin.Eğer
_swift_getFunctionReplacement
veya herhangi bir swift hatasından dolayı sorun yaşarsanız, projenizinLibrary Search Paths
altındaki$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME
satırını kaldırın.Push bildirimleri In-App Message kullanacaksanız proje hedefinizin
Build Phases
->Copy Bundle Resources
bölümüne aşağıdaki satırları ekleyin.Create folder references
seçeneğini seçin.Code Block Pods/VisilabsIOS/Sources/TargetingAction/InAppNotification/Views/VisilabsMiniNotificationViewController.xib Pods/VisilabsIOS/Sources/TargetingAction/InAppNotification/Views/VisilabsFullNotificationViewController.xib Pods/VisilabsIOS/Sources/TargetingAction/sideBar/sideBarView.xib
Görsel veya video gibi zengin içerikli push bildirim özelliklerini etkinleştirmek için alttaki adımları uygulayın.
1- Projenize Targets altındanNotification Service Extension
ekleyin ve isminiRelatedDigitalNotificationService
olarak değiştirin. Ardından bu hizmetin hedef iOS sürümünü 10.0 olarak değiştirin. Örnek kullanım
2- Yeni eklenmiş olanNotificationService.m
dosyasının içerisini alttakilerle değiştirin.
Örnek kullanımCode Block language objective-c #import "NotificationService.h" #import "RelatedDigitalNotificationService.h" @interface NotificationService () @property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver); @property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent; @end @implementation NotificationService - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler { self.contentHandler = contentHandler; self.bestAttemptContent = [request.content mutableCopy]; [RelatedDigitalNotificationService didReceiveNotificationRequest:@"APP_ALIAS" withBestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler]; } - (void)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. [RelatedDigitalNotificationService didReceiveNotificationRequest:self@"APP_ALIAS" withBestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler]; } @end
3- Podfile dosyanızın kök seviyesine aşağıdaki satırları ekleyin. Örnek kullanımCode Block target 'RelatedDigitalNotificationService' do pod 'react-native-related-digital', :path => '../node_modules/react-native-related-digital' use_native_modules! end # Post Install processing for RelatedDigitalNotificationService causing errors def notification_service_post_install(installer) installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO' end end end
4- Podfile dosyanızın ana hedef bölümünenotification_service_post_install(installer)
satırını ekleyin, alttaki şekilde gözükmeli. Örnek kullanımCode Block post_install do |installer| notification_service_post_install(installer) # Other post install function calls end
5- Sdk, Swift kodu içerdiğinden ve xcode her hedefte en az bir boş swift dosyası gerektirdiğinden, RelatedDigitalNotificationService hedefinize de boş bir swift dosyası ekleyin.Empty.swift
6- Projenizin ios dizinindepod install
komutunu çalıştırın.Carousel push bildirim için
1- Projenize Targets altındanNotification Content Extension
ekleyin ve isminiRelatedDigitalNotificationContent
olarak değiştirin. Ardından bu hizmetin hedef iOS sürümünü 11.0 olarak değiştirin.Info.plist
dışındaRelatedDigitalNotificationContent
altına yeni eklenen dosyaları kaldırın. Ardından aşağıdaki içeriğe sahipEMNotificationViewController.swift
dosyasını ekleyin.Code Block language swift import UIKit import UserNotifications import UserNotificationsUI import Euromsg @available(iOS 10.0, *) @objc(EMNotificationViewController) class EMNotificationViewController: UIViewController, UNNotificationContentExtension { let appUrl = URL(string: "euromsgExample://") let carouselView = EMNotificationCarousel.initView() var completion: ((_ url: URL?, _ userInfobestAttemptContent: [AnyHashable: Any]UNMutableNotificationContent?) -> Void)? func didReceive(_ notification: UNNotification) {var notificationRequestIdentifier = "" carouselView. func didReceive(_ notification: UNNotification) { notificationRequestIdentifier = notification.request.identifier Euromsg.configure(appAlias: "APP_ALIAS", launchOptions: nil, enableLog: true) carouselView.didReceive(notification) } func didReceive(_ response: UNNotificationResponse, completionHandler completion: @escaping (UNNotificationContentExtensionResponseOption) -> Void) { carouselView.didReceive(response, completionHandler: completion) } override func loadView() { completion = { [weak self] url, bestAttemptContent in if let identifier = self?.notificationRequestIdentifier { UNUserNotificationCenter.current().removeDeliveredNotifications(withIdentifiers: [identifier]) UNUserNotificationCenter.current().getDeliveredNotifications(completionHandler: { notifications in bestAttemptContent?.badge = NSNumber(value: notifications.count) }) } if let url }= url { func didReceive(_ response: UNNotificationResponse, if #available(iOSApplicationExtension 12.0, *) { completionHandler completion: @escaping (UNNotificationContentExtensionResponseOption) -> Void) { carouselView.didReceive(response, completionHandler: completion)self?.extensionContext?.dismissNotificationContentExtension() } override} func loadView() { completion = { [weak self] url, userInfo in?.extensionContext?.open(url) } else if{ let url = url { if #available(iOSApplicationExtension 12.0, *) self?.extensionContext?.open(url){ if url.scheme != self?.appUrlextensionContext?.scheme, let userInfo = userInfo {performNotificationDefaultAction() } Euromsg.handlePush(pushDictionary: userInfo)} } }carouselView.completion = completion carouselView.delegate = }self self.view = carouselView else if} let} url = self?.appUrl { self?.extensionContext?.open(url)/** Add if you want to track which carousel element has been selected */ extension EMNotificationViewController: CarouselDelegate { func selectedItem(_ } element: EMMessage.Element) { } // Add your work... carouselView.completion = completion print("Selected element is => \(element)") self.view = carouselView} } }
2- Yeni eklenenRelatedDigitalNotificationContent/Info.plist
dosyanıza alttaki satırları ekleyin, eğer varsa değiştirin.Code Block <key>NSExtension</key> <dict> <key>NSExtensionAttributes</key> <dict> <key>UNNotificationExtensionUserInteractionEnabled</key> <true/> <key>UNNotificationExtensionDefaultContentHidden</key> <false/> <key>UNNotificationExtensionCategory</key> <string>carousel</string> <key>UNNotificationExtensionInitialContentSizeRatio</key> <real>1</real> </dict> <key>NSExtensionPrincipalClass</key> <string>RelatedDigitalNotificationContent.EMNotificationViewController</string> <key>NSExtensionPointIdentifier</key> <string>com.apple.usernotifications.content-extension</string> </dict>
3- Podfile dosyanızın kök seviyesine alttaki satırları ekleyin.Code Block target 'RelatedDigitalNotificationContent' do use_native_modules! pod 'Euromsg', '>= 2.0.0' end
4- Xcode'daRelatedDigitalNotificationContent
hedefini seçin. Aşağıdaki dosyalarıBuild Phases
->Copy Bundle Resources
bölümüne ekleyin.Create folder references
seçeneğini seçin.Code Block Pods/Euromsg/Sources/Euromsg/Classes/EMNotificationCarousel/CarouselCell.xib Pods/Euromsg/Sources/Euromsg/Classes/EMNotificationCarousel/EMNotificationCarousel.xib
5- Deployment target değerini ios 10 yapın.Code Block platform :ios, '10.0'
6- Projenizin ios dizinindepod install
komutunu çalıştırın.Geofence konum hizmetleri tanımlamaları
Uygulamanızda konum hizmetlerini etkinleştirmek için öncelikle aşağıdaki anahtarları Info.plist dosyanıza eklemeniz gerekir.
- NSLocationAlwaysAndWhenInUseUsageDescription
- NSLocationWhenInUseUsageDescriptioNSLocationWhenInUseUsageDescription
Bu izinlerin örnek uygulaması aşağıdaki gibidir:Code Block <key>NSLocationAlwaysAndWhenInUseUsageDescription</key> <string>We need access to your location for better user experience.</string> <key>NSLocationWhenInUseUsageDescription</key> <string>We need access to your location for better user experience.</string>
Ayrıca bölgeleri izlemek, bölge listesini yenilemek ve push bildirimlerini almak için Info.plist dosyanızda UIBackgroundModes altına aşağıdaki anahtarları eklemeniz gerekir.Code Block <array> <string>fetch</string> <string>location</string> <string>remote-notification</string> </array>
Ui button | ||||||||
---|---|---|---|---|---|---|---|---|
|