UniApp Application Integration¶

|--datakit-uniapp-native-plugin
  |-- Hbuilder_Example            // GCUniPlugin plugin sample project
      |-- nativeplugins           // Sample project's local plugin folder
          |-- GCUniPlugin         // ⭐️ GCUniPlugin native plugin package ⭐️
          |   |-- android         // Contains android plugin required libraries and resource files
          |   |-- ios             // Contains ios plugin required libraries and resource files
          |   |-- package.json    // Plugin configuration file
      |-- GCPageMixin.js          // view auto-capture using js, GCPageMixin.js used with GCWatchRouter.js simultaneously
      |-- GCWatchRouter.js        // view auto-capture using js, GCPageMixin.js used with GCWatchRouter.js simultaneously
      |-- GCPageViewMixinOnly.js  // view auto-capture using js, GCPageViewMixinOnly.js used alone
      |-- GCRequest.js            // resource and trace using js, provides APM and network request monitoring capabilities
  |-- UniPlugin-Android           // Plugin development Android main project 
  |-- UniPlugin-iOS               // Plugin development iOS main project 

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    ....
      // Register GCUniPlugin module
    [WXSDKEngine registerModule:@"GCUniPlugin-MobileAgent" withClass:NSClassFromString(@"FTMobileUniModule")];
    [WXSDKEngine registerModule:@"GCUniPlugin-RUM" withClass:NSClassFromString(@"FTRUMModule")];
    [WXSDKEngine registerModule:@"GCUniPlugin-Logger" withClass:NSClassFromString(@"FTLogModule")];
    [WXSDKEngine registerModule:@"GCUniPlugin-Tracer" withClass:NSClassFromString(@"FTTracerModule")];  
      return YES;
    }

  dependencies {
      implementation files('libs/ft-native-[version].aar')
      implementation files('libs/ft-sdk-[version].aar')
      implementation files('libs/gc-uniplugin-[last-version].aar')
      implementation 'com.google.code.gson:gson:2.8.5'
  }   

  public class App extends Application {
      @Override
      public void onCreate() {
          super.onCreate();
          try {
            // Register GCUniPlugin module
              WXSDKEngine.registerModule("GCUniPlugin-Logger", FTLogModule.class);
              WXSDKEngine.registerModule("GCUniPlugin-RUM", FTRUMModule.class);
              WXSDKEngine.registerModule("GCUniPlugin-Tracer", FTTracerModule.class);
              WXSDKEngine.registerModule("GCUniPlugin-MobileAgent", FTSDKUniModule.class);
          } catch (Exception e) {
              e.printStackTrace();
          }
          ......
      }
  }

// Configure in App.vue
<script>
    var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
    export default {
        onLaunch: function() {
            guanceModule.sdkConfig({
                'datakitUrl': 'your datakitUrl',
                'debug': true,
                'env': 'common',
                'globalContext': {
                    'custom_key': 'custom value'
                }
            })
        }
    }
</script>
<style>
</style>

var rum = uni.requireNativePlugin("GCUniPlugin-RUM");
rum.setConfig({
  'androidAppId':'YOUR_ANDROID_APP_ID',
  'iOSAppId':'YOUR_IOS_APP_ID',
  'errorMonitorType':'all', // or 'errorMonitorType':['battery','memory']
  'deviceMonitorType':['cpu','memory']// or  'deviceMonitorType':'all'
})

var logger = uni.requireNativePlugin("GCUniPlugin-Logger");
logger.setConfig({
  'enableLinkRumData':true,
  'enableCustomLog':true,
  'discardStrategy':'discardOldest'
})

var tracer = uni.requireNativePlugin("GCUniPlugin-Tracer");
tracer.setConfig({
  'traceType': 'ddTrace'
})

var rum = uni.requireNativePlugin("GCUniPlugin-RUM");

rum.startAction({
  'actionName': 'action name',
  'actionType': 'action type'
})

rum.addAction({
  'actionName': 'action name',
  'actionType': 'action type'
})

// step 1. Find GCWatchRouter.js, GCPageMixin.js files in the SDK package and add them to your project
// step 2. Add Router monitoring in App.vue as follows:
<script>
  import WatchRouter from '@/GCWatchRouter.js'
  export default {
    mixins:[WatchRouter], //<--- Notice
  }
</script>
// step 3. Add pageMixin in the first displayed page as follows
<script>
  import GCPageMixin from '../../GCPageMixin.js';
  export default {
    data() {
      return {}
    },
    mixins:[GCPageMixin], //<--- Notice
  }
</script>

//Find GCPageViewMixinOnly.js in the SDK package and add it to your project
<script>
import { rumViewMixin } from '../../GCPageViewMixinOnly.js';
export default {
    data() {
        return {            
        }
    },
    mixins:[rumViewMixin], //<--- Notice
    methods: {}
}
</script>

// Manually collect the lifecycle of Views
// step 1 (optional)
rum.onCreateView({
  'viewName': 'Current Page Name',
  'loadTime': 100000000,
})
// step 2
rum.startView('Current Page Name')
// step 3  
rum.stopView()         

/// Use uniapp error listener function triggered when script errors or API call errors occur
<script>
  var rum = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
  var appState = 'startup';
  // Can only listen in App.vue
  export default {
    onShow: function() {
      appState = 'run'
    },
    onError:function(err){   
      if (err instanceof Error){
        rum.addError({
          'message': err.message,
          'stack': err.stack,
          'state': appState,
        })
      }else if(err instanceof String){
        rum.addError({
          'message': err,
          'stack': err,
          'state': appState,
        })
      }
  }
</script>

// Manually add
rum.addError({
  'message': 'Error message',
  'stack': 'Error stack',
})

+ import gc from './GCRequest.js'; 
- uni.request({
+ gc.request({
  //...
});

//Find GCRequest.js in the SDK package and add it to your project
import gc from './GCRequest.js';
gc.request({
  url: requestUrl,
  method: method,
  header: header,
  filterPlatform:["ios"], 
  timeout:30000,
  success(res)  {
    console.log('success:' + JSON.stringify(res))
  },
  fail(err) {
    console.log('fail:' + JSON.stringify(err))
  },
  complete() {
    console.log('complete:' + JSON.stringify(err))
  }
});

var logger = uni.requireNativePlugin("GCUniPlugin-Logger");
logger.logging({
  'content':`Log content`,
  'status':status
})

//Example using uni.request for network requests
var tracer = uni.requireNativePlugin("GCUniPlugin-Tracer");
let key = Utils.getUUID();//Refer to Hbuilder_Example/utils.js
var header = tracer.getTraceHeader({
      'key': key,
      'url': requestUrl,
})
uni.request({
        url: requestUrl,
        header: header,
        success() {

        },
        complete() {

        }
});

var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");

guanceModule.bindRUMUserData({
  'userId':'Test userId',
  'userName':'Test name',
  'userEmail':'test@123.com',
  'extra':{
    'age':'20'
  }
})

guanceModule.unbindRUMUserData()

var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
guanceModule.shutDown()

var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
guanceModule.clearAllData()

var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
guanceModule.flushSyncData()

var guanceModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
ftMobileSDK.appendGlobalContext({
          'ft_global_key':'ft_global_value'
})
ftMobileSDK.appendRUMGlobalContext({
          'ft_global_rum_key':'ft_global_rum_value'
})
ftMobileSDK.appendLogGlobalContext({
          'ft_global_log_key':'ft_global_log_value'
})                

|--iOSSDK   
    |-- HBuilder-Hello              // uni-app offline packaging project
    |-- HBuilder-uniPluginDemo      // uni-app plugin development main project (the project required for this document)
    |-- SDK                         // Dependency libraries and dependent resource files

|-- UniPlugin-iOS
    |-- HBuilder-uniPluginDemo      // uni-app plugin development main project (the project required for this document)
    |-- SDK                         // Dependency libraries and dependent resource files

$(inherited) -ObjC -framework "FTMobileSDK" -framework "Guance_UniPlugin_App"

$(inherited)
"${PODS_CONFIGURATION_BUILD_DIR}/FTMobileSDK"
"${PODS_CONFIGURATION_BUILD_DIR}/Guance-UniPlugin-App"
$(DEVELOPER_FRAMEWORKS_DIR)
$(PROJECT_DIR)/../SDK/libs
$(PROJECT_DIR)

|-- UniPlugin-Android
    |-- app
        |--build.gradle
        // ---> Configure ft-plugin
        // apply:'ft-plugin'

    |-- uniplugin_module
        |-- src
            |-- main
                |-- java
                    |-- com.ft.sdk.uniapp
        |-- build.gradle 
        //---> Configure dependencies
        //implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-sdk:xxxx'
        //implementation 'com.google.code.gson:gson:xxxx'
        //implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-native:xxxx'

    |-- build.gradle
        //---> Configure repo
        //  maven {
        //          url 'https://mvnrepo.jiagouyun.com/repository/maven-releases'
        //  }
        //
        //--> Configure buildScrpit
        //  classpath 'com.cloudcare.ft.mobile.sdk.tracker.plugin:ft-plugin:xxxx'