Skip to content

Latest commit

 

History

History
364 lines (274 loc) · 11.6 KB

Getting-Started.md

File metadata and controls

364 lines (274 loc) · 11.6 KB
Raw

Mappls Intouch React Native SDK

Introduction

Get Real-Time Location Tracking for your apps with Mappls InTouch SDK. Track a user's live location with our simplified InTouch React native SDK integration, highly customizable to your specific needs.

The InTouch SDK comes with a variety of events that enable better control and power over your tracking needs. Also get location benefits built for various applications including logistics, delivery tracking, employee tracking, and live location sharing.

Getting Started

Installation

Dependencies

npm

npm install mappls-intouch-react-native --save

IOS Installation

  • Add follwoing permissions in your project's plist.info
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your location is used to personalize content.</string>
 
<key>NSLocationAlwaysUsageDescription</key>
<string>Your location is used to personalize content.</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is used to personalize content.</string> 

<key>NSMotionUsageDescription</key> 
<string>In order to count steps I need an access to your pedometer</string>

<key>UIBackgroundModes</key>
<array>
<string>fetch</string>
<string>location</string>
</array>
  • Enable background fetch and location updates from Signing and Capabilities

React-Native >= 0.60.0

If you are using autolinking feature introduced in React-Native 0.60.0 you do not need any additional steps. Just run pod install and rebuild your project.

React-Native < 0.60.0

Using CocoaPods

To install with CocoaPods, add the following to your Podfile:

  # Mappls
  pod 'mappls-intouch-react-native', :path => '../node_modules/mappls-intouch-react-native'

  # Make also sure you have use_frameworks! enabled
  use_frameworks!

Then run pod install and rebuild your project.

Android Installation

React-Native >= 0.60.0 If you are using autolinking feature introduced in React-Native 0.60.0 have to add only following lines in android/build.gradle file:-

  • We need to add an additional repository in order to get our dependencies.
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven { url "https://jitpack.io" }
+       maven { url 'https://maven.mappls.com/repository/mappls/'}
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

React-Native < 0.60.0

react-native link should get you almost there,
however we need to add some additional lines to build.gradle.

1. android/build.gradle

We need to add an additional repository in order to get our dependencies.

  • https://jitpack.io
  • https://maven.mappls.com/repository/mappls/ 
allprojects {
    repositories {
        mavenLocal()
        google()
+       maven { url "https://jitpack.io" }
+       maven { url 'https://maven.mappls.com/repository/mappls/'}
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

Make sure that your buildscript > ext settings are correct.

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        compileSdkVersion = 34
        targetSdkVersion = 34
    }
}

Everything below should've been covered by react-native link,
however it never hurts to make sure it actually did what it was supposed to

2. android/app/build.gradle

Add project under dependencies

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
+   implementation project(':mappls-intouch-react-native')
}

3. android/settings.gradle

Include project, so gradle knows where to find the project

rootProject.name = <YOUR_PROJECT_NAME>

+include ':mappls-intouch-react-native'
+project(':mappls-intouch-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/mappls-intouch-react-native/android/app')

include ':app'¬

4. android/app/src/main/java/com/PROJECT_NAME/MainApplication.java

We need to register our package

Add import com.mappls.sdk.intouch.reactnative.MapplsIntouchPackage;
as an import statement and
new MapplsIntouchPackage() within the getPackages() method

package <YOUR_PROJECT_NAME>;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
+import com.mappls.sdk.intouch.reactnative.MapplsIntouchPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+         new MapplsIntouchPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

Added Import

import  MapplsIntouch  from  'mappls-intouch-react-native';

To Check Intouch is Initialised

Check if Intouch SDK is already initialized or not:

const  status = await  MapplsIntouch.isInitialized();

Intouch Initialisation

Initialize the SDK with your Client ID and Client Secret and device name.Device name helps to identify the user on Portal.

MapplsIntouch.initialize(deviceName,clientId,clientSecret)
   .then(entityId  => {
   console.log(entityId);
   }).catch(err=>{
     console.log(err.message)
   });

OR

Initialize the SDK with your Client ID , Client Secret , device name and deviceId. deviceId should be unique ID for every user.

  • deviceId will be used to store the data against the particular user.
  • deviceName will be used to identify the user on Portal
MapplsIntouch.initializeWithDeviceId(deviceName,clientId,clientSecret,deviceId,
(result) => {
if (result === 'success') {
//success
 } else {
//error 
});

Note:This method can be used in case if your users uses two mobile phone. In this case, Both the mobile phone data will be pushed against the same deviceID. So ensure that before user logging into the new phone, logout the user from previous phone and call the stop tracking method. So that always tracking data will come from the single phone.

Check Intouch Running

const  status = await  MapplsIntouch.isRunning()

Start tracking

Track your app user's phone live location by using the below method.

MapplsIntouch.startTracking();

You can start tracking using below three options

  • MapplsIntouch.BEACON_PRIORITY_FAST
  • MapplsIntouch.BEACON_PRIORITY_OPTIMAL(default)
  • MapplsIntouch.BEACON_PRIORITY_SLOW
MapplsIntouch.startTracking(MapplsIntouch.BEACON_PRIORITY_OPTIMAL);

Note: If no priority provided default will be used.

OR (Only for android Platform)

MapplsIntouch.startTrackingWithCustomConfig({
  standByTimeInMins: 1,//mandatory
  timeWhileMovingInSec: 10,//mandatory
  enableRequestPermissionIfMissing:true
  autoTrackingConfig: {endTimeConfig: {hour:  7, minute:  58, amPm:  "pm"}}
  });
  • timeWhileMovingInSec:(number) tracking api hit time while moving in seconds.
  • standByTimeInMins:(number) tracking api hit time while standby in minutes.
  • enableRequestPermissionIfMissing(boolean) Location permissions will handle by SDK if set to true.Default value is true
  • autoTrackingConfig(object): To set auto tracking settings:
    • endTimeConfig(object): To set option to stop the tracking at time
      • hour(number): To set hours (1-12)
      • minute(number): To set minutes (0 - 59). Default value 0
      • second(number): To set seconds (0 - 59). Default is 0
      • amPm(String): am or pm. Default value is am

Stop tracking

To stop your app user's phone live location tracking use the below mentioned method.

MapplsIntouch.stopTracking();

Tracking Event Listener

This method will be called when tracking starts, stops or some tracking error is caught.

MapplsIntouch.addTrackingStateListener((event) => {
if(event === 'onTrackingStart'){

}else if(event === 'onTrackingStop'){

}
},(error)=>{
console.log(error.message);
});

To remove this listener

MapplsIntouch.removeTrackingStateListener();

Get Current Locaton

Updates single location on server and return to the user

try {
const  res= await  MapplsIntouch.getCurrentLocationUpdate();
//do something with response
} catch (e) {
//error log
}




For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!





@ Copyright 2024 CE Info Systems Ltd. All Rights Reserved.