Chabok Push Client for React Native (Bridge)

React native wrapper for chabok library. This client library supports react-native to use chabok push library. A Wrapper around native library to use chabok functionalities in react-native environment.

installation

For java-part, library refrence and library initialization that includes seting up: APP_ID, API_KEY, SDK_USERNAME, SDK_PASSWORD and platform specific parts regarding library reference for ios, and installatin details refer to docs.

To install packages:

yarn add react-native-chabok

npm install react-native-chabok --save

For linking react-native-chabok

react-native link react-native-chabok

Getting Started Android

Update compileSdkVersion, buildToolsVersion, support library version For the Android SDK, edit the build.gradle file in your android/app directory

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    ...
}

dependencies {
    ...
    compile "com.google.android.gms:play-services-gcm:10.2.6"
    compile 'me.leolin:ShortcutBadger:1.1.22@aar'
    compile 'com.adpdigital.push:chabok-lib:+'
    ...
}

Please update your AndroidManifest.xml according to following sample :

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="YOUR_APPLICATION_PACKAGE_ID">

    <permission
        android:name="YOUR_APPLICATION_PACKAGE_ID.permission.C2D_MESSAGE"
        android:protectionLevel="signature"/>

    <uses-permission android:name="YOUR_APPLICATION_PACKAGE_ID.permission.C2D_MESSAGE" />

    <application>
        
        <receiver
                android:name="com.google.android.gms.gcm.GcmReceiver"
                android:enabled="true"
                android:exported="true"
                android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE"/>
                <action android:name="com.google.android.c2dm.intent.REGISTRATION"/>
                <category android:name="YOUR_APPLICATION_PACKAGE_ID"/>
            </intent-filter>
        </receiver>

...

    </application>

Initialize Chabok SDK in your MainApplication.java:

public class YourAppClass extends Application {

private AdpPushClient chabok = null;

    @Override
    public void onCreate() {
        super.onCreate();
        if (chabok == null) {
                   chabok = AdpPushClient.init(
                       getApplicationContext(),
                       MainActivity.class,
                       "YOUR_APP_ID/SENDER_ID",
                       "YOUR_API_KEY",
                       "SDK_USERNAME",
                       "SDK_PASSWORD"
                       );
               }
    }

    @Override
    public void onTerminate() {
        if (chabok != null)
            chabok.dismiss();

        super.onTerminate();
    }
}

Getting started - iOS

The native iOS SDKs need to be setup using Cocoapods. In your project's ios directory, create a Podfile.

$ cd ios
$ pod init

Edit the Podfile to include ChabokPush as a dependency for your project, and then install the pod with pod instal.

use_frameworks!
platform :ios, '9.0'

target 'YOUR_TARGET_NAME' do

  # Pods for AwesomeProject
  pod 'ChabokPush'

end

Open the iOS project with .xcworkspace file in Xcode and also, open the node_modules/react-native-chabok/ directory. Move the ios/AdpPushClient.h and ios/AdpPushClient.m files to your project.
Import inside AppDelegate:

#import <AdpPushClient/AdpPushClient.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    if ([PushClientManager.defaultManager application:application didFinishLaunchingWithOptions:launchOptions]) {
        NSLog(@"Application was launch by clicking on Notification...");
    }
    
    ...
   }

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error{
  // Hook and handle failure of get Device token from Apple APNS Server
  [PushClientManager.defaultManager application:application
didFailToRegisterForRemoteNotificationsWithError:error];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{
  // Manager hook and handle receive Device Token From APNS Server
  [PushClientManager.defaultManager application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings{
  // Manager hook and Handle iOS 8 remote Notificaiton Settings
  [PushClientManager.defaultManager application:application didRegisterUserNotificationSettings:notificationSettings];
}

Basic Usage

In your App.js:

Initialize

For initlializing the ChabokPush with paramteres follow the bellow code:

import { NativeEventEmitter, NativeModules } from 'react-native';
import chabok from 'react-native-chabok';

const options = {
  "appId": "APP_ID/GOOGLE_SENDER_ID",
  "apiKey": "API_KEY",
  "username": "USERNAME",
  "password": "PASSWORD"
};

this.chabok = new chabok.AdpPushClient();
this.chabok.init(options.appId, options.apiKey, options.username, options.password)
    .then((state) => {
        console.log(state);
        })
    .catch((error) => {
        console.log(error);
        });

Change chabok environment

With using setDevelopment method can change the ChabokPush environment to sandbox or production :

this.chabok.setDevelopment(devMode);

Register user

To register user in the ChabokPush service use register method:

this.chabok.register('USER_ID');

Getting message

To getting the ChabokPush message addListener on ChabokMessageReceived event:

const chabokEmitter = new NativeEventEmitter(NativeModules.AdpPushClient);

chabokEmitter.addListener( 'ChabokMessageReceived',
    (msg) => {
        const messageJson = this.getMessages() + JSON.stringify(msg);
        alert(messageJson);
    });

Getting connection status

To get connection state addListener on connectionStatus event :

const chabokEmitter = new NativeEventEmitter(NativeModules.AdpPushClient);

chabokEmitter.addListener(
    'connectionStatus',
        (status) => {
            if (status === 'CONNECTED') {
                //Connected to chabok
            } else if (status === 'CONNECTING') {
                //Connecting to chabok
            } else if (status === 'DISCONNECTED') {
                //Disconnected
            } else {
                // Closed
            }
    });

Publish message

For publishing a message use publish method:

const msg = {
    channel: "default",
    userId: "USER_ID",
    content:'Hello world',
    data: OBJECT
        };
this.chabok.publish(msg)

Subscribe on channel

To subscribing on a channel use subscribe method:

this.chabok.subscribe('CHANNEL_NAME');

Unsubscribe to channel

To unsubscribing to channel use unSubscribe method:

this.chabok.unSubscribe('CHANNEL_NAME');

Track

To track user interactions use track method :

this.chabok.track('TRACK_NAME', [OBJECT]);

Add tag

Adding tag in the ChabokPush have addTag and addTags methods:

this.chabok.addTag('TAG_NAME')
    .then(res => {
        alert('This tag was assign to ' + this.chabok.getUserId() + ' user');
        })
    .catch(_ => console.warn("An error happend adding tag ...",_));

Remove tag

Removing tag in the ChabokPush have removeTag and removeTags methods:

this.chabok.removeTag('TAG_NAME')
    .then(res => {
        alert('This tag was removed from ' + this.chabok.getUserId() + ' user');
        })
    .catch(_ => console.warn("An error happend removing tag ..."));

husseinhj / chabok-client-rn Goto Github PK

chabok-client-rn's Introduction