Table of Contents

minLevel	1
maxLevel	3

Source	URL
GitHub	https://github.com/relateddigital/react-native-related-digital
npm	https://www.npmjs.com/package/react-native-related-digital

Kurulum

SDK içerisinde ihtiyaç duyulan kütüphaneyi kurun

Code Block
npm install @react-native-communityasync-storage/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ım

Alttaki 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ım
Code 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ın
compileSdkVersion ve targetSdkVersion 32 olarak ayarlayı.
android/app/build.gradle dosyanızın en altına aşağıdaki satırları ekleyin. Örnek kullanım
Code Block
language java
apply plugin: 'com.google.gms.google-services' apply plugin: 'com.huawei.agconnect'
android/app/build.gradle dosyanızda defaultConfig bölümüne alttaki satırı ekleyin
Code 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çin Visilabs.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 projelerinde
Code 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ım
Code Block
language objective-c
#import "RelatedDigitalPushModule.h" #import <UserNotifications/UserNotifications.h>
AppDelegate.m dosyanızda didFinishLaunchingWithOptions methodunun içerisindeki return ifadesinin hemen üzerine alttaki satırları ekleyin. Örnek kullanım
Code Block
language objective-c
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; center.delegate = self;

AppDelegate.m dosyanıza alttaki methodları ekleyin. Örnek kullanım

Code 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ındaki didFinishLaunchingWithOptionsfonksiyonununun return ifadesinden hemen öncesine alttaki kodu ekleyin.
Not: In App ve Geofence özelliklerinin aktif olması için
InAppNotificationsEnabled ve geofenceEnabled parametreleri true olmalıdır.
Başlangıçta konum izninin alınmasını istemiyorsanız askLocationPermmissionAtStart parametresini false olarak ayarlayın. Ardından requestLocationPermission() işleviyle istediğiniz zaman izin talep edebilirsiniz.

Code Block

language	objective-c

[RelatedDigitalPushModule initRelatedDigital:@"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ıza NSUserTrackingUsageDescription ekleyin.
Eğer _swift_getFunctionReplacement veya herhangi bir swift hatasından dolayı sorun yaşarsanız, projenizin Library Search Paths altındaki $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME
satırını kaldırın.

In-App Message kullanacaksanız proje hedefinizin Build Phases-> Copy Bundle Resourcesbö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ından Notification Service Extension ekleyin ve ismini RelatedDigitalNotificationService 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ş olan NotificationService.m dosyasının içerisini alttakilerle değiştirin.
Örnek kullanım

Code 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:@"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ım

Code 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üne notification_service_post_install(installer) satırını ekleyin, alttaki şekilde gözükmeli. Örnek kullanım

Code 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 dizininde pod install komutunu çalıştırın.

Carousel push bildirim için
1- Projenize Targets altından Notification Content Extension ekleyin ve ismini RelatedDigitalNotificationContent olarak değiştirin. Ardından bu hizmetin hedef iOS sürümünü 11.0 olarak değiştirin. Info.plist dışında RelatedDigitalNotificationContent altına yeni eklenen dosyaları kaldırın. Ardından aşağıdaki içeriğe sahip EMNotificationViewController.swift dosyasını ekleyin.

Code Block

language	swift

import UIKit
import UserNotifications
import UserNotificationsUI
import Euromsg

@objc(EMNotificationViewController)
class EMNotificationViewController: UIViewController, UNNotificationContentExtension {
    
    let carouselView = EMNotificationCarousel.initView()
    var completion: ((_ url: URL?, _ bestAttemptContent: UNMutableNotificationContent?) -> Void)?
    
    var notificationRequestIdentifier = ""
    
    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 {
                if #available(iOSApplicationExtension 12.0, *) {
                    self?.extensionContext?.dismissNotificationContentExtension()
                }
                self?.extensionContext?.open(url)
            } else {
                if #available(iOSApplicationExtension 12.0, *) {
                    self?.extensionContext?.performNotificationDefaultAction()
                }
            }
        }
        carouselView.completion = completion
        carouselView.delegate = self
        self.view = carouselView
    }
}

/**
 Add if you want to track which carousel element has been selected
 */
extension EMNotificationViewController: CarouselDelegate {
    
    func selectedItem(_ element: EMMessage.Element) {
        // Add your work...
        print("Selected element is => \(element)")
    }
    
}

2- Yeni eklenen RelatedDigitalNotificationContent/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'da RelatedDigitalNotificationContenthedefini 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 dizininde pod 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
- NSLocationWhenInUseUsageDescription

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

size	large
color	green
title	Visilabs Entegrasyonuna Başla
url	https://relateddigital.atlassian.net/wiki/spaces/RMCKBT/pages/1708392505/React+Native+-+Visilabs

Versions Compared

Old Version 28

New Version Current

Key

Kurulum

Page Comparison

Versions Compared

Old Version 28

New Version Current

Key

Kurulum