React Native integration

Quick Guide to React Native SDK Integration.

Index

• What do you need for integration?
• Integration
  • Import the plugin
  • Configuration for Android
    • Adding the SDK dependencies
    • Adding indigitall Services
    • Adding Firebase Services
    • Adding HMS Services
    • Setting the notifications icon
  • Configuration for iOS
  • Implementation in AppDelegate
  • SDK initialization
• Resources

What do you need for integration?

• An account with which to access the Indigitall panel, if you have not yet created it you can create an account here .
• The next thing is to have a project associated with the application web (web browsers) and / or mobile (android, ios), if you have not yet created and configured it you can create a project in your indigitall account.

It is important since the project contains the configuration data of your application, that is, the domain where your website is hosted, the safari or iOS certificates or the firebase key that android uses. It all depends on the platforms (web or app) that the project uses.

• You will need the App Key of the project, which is the key that our system uses to identify it, so it is unique for each project. You can find it in the administration console within the Configuration section in the Projects tab. You can see it in the following image, and to copy it, it is easy to click on the icon next to the key (App Key)
  
  
  
  
  • For android
• A Firebase Server Key
• A HMS Push Kit Server Key
• Android Studio
• An Android device or emulator with Google Play services installed to run the app
  • For iOS
• A valid push certificate for iOS. Learn how get push certificate from APNS
• Xcode
• An iOS device to run the app

Integration

This article shows the minimum development that must be done to start registering devices and being able to carry out the first push campaigns.

The Indigitall SDK is compatible with Google messaging services, through the Firebase platform and with the services of HMS or Huawei Mobile Services of Huawei.

You can see it in this tutorial video or read the instructions below:

Our SDK is available via npm .

npm (Node Package Manager) it is a package management system. It consists of a command line client and an online database of public and private packages.

Import the plugin

To import the SDK into your project, follow these steps:

1. Open the console and position yourself at the root of the project.

$ cd /PATH/TO/YOUR/PROJECT

2. Run this line in the console to import the plugin:

$ npm install indigitall-react-native-plugin

Configuration for Android

Adding the SDK dependencies

Config the build.gradle of your project as the following example:

buildscript {
    ...
    repositories {
        ...
        maven { url "https://developer.huawei.com/repo/" }
    }
    dependencies {
        ...
        classpath("com.google.gms:google-services:4.3.+")
        classpath("com.huawei.agconnect:agcp:1.4.1.300")
    }
}

allprojects {
    repositories {
        ...
        mavenCentral()
        maven { url "https://developer.huawei.com/repo/" }

    }
}

• SDK compatibility with Android is as of Android 5.0

Adding the indigitall services

These services are necessary so that our SDK can synchronize device data with indigitall's servers.

<manifest ...>
    <!-- ... -->

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

    <!-- To obtain the location of the device -->
    <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"/>
    <application ...>
        <!-- ... -->

        <!-- MANDATORY -->

        <!-- So that when the user presses a push, the metric is saved -->
        <service android:name="com.indigitall.android.services.StatisticService"/>

        <!-- Daily sync of device data -->
        <service android:name="com.indigitall.android.services.NightService"/>

        <!-- To start services when you restart the device -->
        <receiver android:name="com.indigitall.android.receivers.BootReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
        </receiver>

        <!-- OPTIONAL -->

        <!-- So that when the user clicks an InApp message, the metric is saved.
        It is only necessary if you use the InApp message functionality -->
        <service android:name="com.indigitall.android.inapp.services.StatisticInAppService" />

        <!-- To obtain the location of the device.
        It is only necessary if you are going to ask for location permission
        to segment pushes by device location -->
        <receiver android:name="com.indigitall.android.receivers.LocationReceiver">
            <intent-filter>
                <action android:name="LocationReceiver.Action.LOCATION_UPDATE" />
            </intent-filter>
        </receiver>

    </application>
</manifest>

Adding Firebase Services

To activate Firebase notifications you must add your google-services.json file in your android project inside your app folder and modify your build.gradle file as follows:

...
apply from: "../../node_modules/..."
apply plugin: 'com.google.gms.google-services'

Adding HMS Services

To activate HMS notifications you must add your agconnect-services.json file in your android project inside your app folder and modify your build.gradle file as follows:

...
apply from: "../../node_modules/..."
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'

Setting the notifications icon

This icon will be displayed in the top bar of the Android system and in the header of the pushes sent through your app.

It must be a monochrome icon, that is, the image must contain only one color and alpha.

We give you an example with our logo in monochrome:

Here we show you how your code should be in the AndroidManifest.xml (The icon has to be a png)

<manifest ...>
    <!-- ... -->
    <application ...>
        <!-- ... -->

        <!-- Resource for monochrome icon -->
        <meta-data android:name="indigitall.icon" android:resource="@drawable/YOUR_MONOCHROME_ICON"/>

        <!-- Resource for icon color -->
        <meta-data android:name="indigitall.color" android:resource="@color/colorPrimary"/>
    </application>
</manifest>

* For further clarification on creating icons, we leave you this link to the Android documentation that may help you: Product icons

Configuration for iOS

Since the release of iOS 10, apps can manage rich push notifications , that is, with images, gif, video, buttons, etc.

In order to use these features, your app needs to implement the Notification Service Extension.

1. Add a new Notification Service Extension to your project (Xcode: File> New> Target).
2. Add the extension target in your application.
3. Create a new file called NotificationService inside this target. Overwrite all content with the following code:

import Indigitall
class NotificationService: UNNotificationServiceExtension {

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

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        self.request = request
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        Indigitall.didReceive(self.request!, withContentHandler: self.contentHandler!)
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
            Indigitall.serviceExtensionTimeWillExpire(bestAttemptContent, withContentHandler: contentHandler)
        }
    }

}

#import <UserNotifications/UserNotifications.h>
#import <Indigitall/Indigitall.h>

API_AVAILABLE(ios(10.0))
//NotificaiontService.h
@interface NotificationService : UNNotificationServiceExtension
@end

//NotificationService.m
@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;
@property (nonatomic, strong) UNNotificationRequest *request;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    self.request = request;

    [Indigitall didReceiveNotificationRequest:self.request withContentHandler:self.contentHandler];

}

- (void)serviceExtensionTimeWillExpire {
    if (self.contentHandler != nil && self.bestAttemptContent != nil){
        [Indigitall serviceExtensionTimeWillExpire:self.bestAttemptContent withContentHandler:self.contentHandler];
    }
}

@end

Implementation in AppDelegate

You can see it in our video tutorial or read the instructions below:

Modify the AppDelegate file to import the SDK and override the following methods:

import Indigitall

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Indigitall.setDeviceToken(deviceToken)
}

// Foreground
if #available(iOS 10.0, *) {
    UNUserNotificationCenter.current().delegate = self;
};

@available(iOS 10.0, *)
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    completionHandler(Indigitall.willPresentNotification());
}

func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
    Indigitall.handle(with: response)
}

//DEPRECATED
func application(_ application: UIApplication, didReceiveRemoteNotification data: [AnyHashable : Any]) {
    Indigitall.handle(withNotification: data, identifier: nil)
}

//@DEPRECATED
func application(_ application: UIApplication, handleActionWithIdentifier identifier: String?, forRemoteNotification userInfo: [AnyHashable : Any], completionHandler: @escaping () -> Void) {
    Indigitall.handle(withNotification: userInfo, identifier: identifier)
}

//@DEPRECATED
func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    Indigitall.handle(withNotification: userInfo, identifier: nil)
    completionHandler(.newData)
}

func application(_ application: UIApplication, performFetchWithCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    Indigitall.performFetch(completionHandler: completionHandler)
}

#import <Indigitall/Indigitall.h>

- (void) application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{
    [Indigitall setDeviceToken:deviceToken];
}

// Foreground
UNUserNotificationCenter.currentNotificationCenter.delegate = self;

- (void) userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler API_AVAILABLE(ios(10.0)){
    completionHandler([Indigitall willPresentNotification]);
}

- (void) userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler{
    [Indigitall handleWithResponse:response];
}

//@DEPRECATED
- (void) application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo{
    [Indigitall handleWithNotification:userInfo identifier:nil];
}
//@DEPRECATED
- (void) application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
    [Indigitall handleWithNotification:userInfo identifier:nil];
}
//@DEPRECATED
- (void) application:(UIApplication *)application handleActionWithIdentifier:(nullable NSString *)identifier forRemoteNotification:(nonnull NSDictionary *)userInfo completionHandler:(nonnull void (^)(void))completionHandler{
    [Indigitall handleWithNotification:userInfo identifier:identifier];
}

//Setup Perform Fetch in background
- (void) application:(UIApplication *)application performFetchWithCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
    [Indigitall performFetchWithCompletionHandler:completionHandler];
}

SDK initialization

Initialize the SDK with the indigitall.init () method to start receiving push notifications. This initialization must be done within the index.html of your project.

window.plugins.indigitall.init({
  appKey: "<YOUR_APP_KEY>",
  senderId: "<YOUR_SENDER_ID>"
});

• YOUR_APP_KEY is an alphanumeric text string. You can find it in the administration console within the Configuration section in the Projects tab
• YOUR_SENDER_ID is a numeric string. You can find it in the Firebase console , inside the project, in the configuration, tab Cloud messaging.

Resources

• Learn how to use the console to send your push campaigns
• Discover the power of the indigitall SDK with our advanced guide
• Start automating your communications thanks to our administration API