DevRev SDK 反应原生和博览

DevRev SDK,用于将DevRev服务整合到您的React Introduct和Expo应用程序中.

• DevRev SDK 反应原生和博览
  • 快速启动
    • 所需资源
    • 安装
      • 博览
    • 设置 DevRev SDK
      • 更新特性配置
      • 特性配置参考
        • 支持部件主题选项
  • 特征
    • 鉴定
      • 识别未验证的用户
      • 识别已核实的用户
        • 生成 AAT
        • 将您的 AAT 交换为会话符
        • 识别已核实的用户
      • 更新用户
      • 注销
    • 身份模型
      • 属性
        • 用户特性
        • 组织特征
        • 账户特征
    • 支持聊天
      • 创建新支持对话框
    • 应用程序链接处理
    • 应用链接回调
    • 动态主题配置
    • 分析
    • 会话分析
      • 进入或退出
      • 会话录音
      • 会话属性
      • 遮罩敏感数据
      • 网络视图中的遮罩元素
      • 用户互动跟踪
      • 计时器
      • 抓取错误
      • 音轨屏幕
      • 管理屏幕过渡( 只有Android)
    • 推动通知
      • 配置
      • 推进通知登记册
      • 未从按键通知注册
      • 处理按键通知
        • 机器人
        • iOS系统
  • 样本应用( 没有框架)
  • 软件样本( Expo)
  • 解决问题
    • ProGuard (仅限机器人)
  • 移徙指南

快速启动

所需资源

• 反应原生地0.79.0.
• 对于"博览会"的应用,50.0.0或后期的"博览会".
• Android:最低API24级.
• iOS:最低部署指标15.1.

安装

要安装 DevRev SDK, 请运行以下命令 :

npm install @devrev/sdk-react-native

博览

1. 要安装 DevRev SDK, 请运行以下命令 :

   npx expo install @devrev/sdk-react-native-expo-plugin
   

2. 配置您的 Expo 配置插件 app.json 或者说 app.config.js数字 :

   {
     "expo": {
       "plugins": [
         "@devrev/sdk-react-native-expo-plugin"
       ]
     }
   }
   

3. 重建您的应用程序 :

   npx expo prebuild --clean
   

设置 DevRev SDK

1. 打开 DevRev 网络应用 https://app.devrev.ai (英语) 进入 设置 页 次.
2. 下 PLuG 设置 复制以下的值 您唯一的 App 标识。 。 。 .
3. 使用获得的证书在您的应用程序中配置 DevRev SDK .

[尖叫声] DevRev SDK 必须先被配置,然后才能使用它的任何特性.

一旦配置 API 执行, SDK 即可使用 .

DevRev.configure(appID)

要在设置时提供特性配置, 请调用接受它的超载:

DevRev.configure(appID, featureConfiguration)

对于默认行为,请调用更简单的形式:

DevRev.configure('abcdefg12345')

要自定义诸如帧抓取、自动启动记录或主题偏好等行为,请通过完整 FeatureConfiguration 对象 :

DevRev.configure('abcdefg12345', {
  enableFrameCapture: false,
  autoStartRecording: false,
  prefersDialogMode: false,
  alwaysUseRemoteConfig: true,
  supportWidgetTheme: {
    prefersSystemTheme: true,
  },
  enableSupportChatStreaming: true,
  supportWidgetArticleSearchFilters: articleSearchFilters,
});

更新特性配置

您可以在不重新配置SDK的情况下调整特性配置. 通过 a 满 FeatureConfiguration 对象( 所有属性都需要):

DevRev.updateFeatureConfiguration({
  enableFrameCapture: true,
  autoStartRecording: true,
  prefersDialogMode: false,
  alwaysUseRemoteConfig: true,
  supportWidgetTheme: {
    prefersSystemTheme: true,
  },
  enableSupportChatStreaming: true,
  supportWidgetArticleSearchFilters: articleSearchFilters,
});

特性配置参考

FeatureConfiguration 控制 SDK 初始设置和调用时的表现 DevRev.updateFeatureConfiguration(...)。在提供特性配置时,需要所有属性.

支持部件主题选项

SupportWidgetTheme 让您微调支持 UI 。 使用 supportWidgetTheme 属性在您的特性配置中.

const customTheme = {
  prefersSystemTheme: false,
  primaryTextColor: '#1F2933',
  accentColor: '#F97316',
  spacing: {
    bottom: '20px',
    side: '16px',
  },
  conversationPageOptions: {
    headerText: 'Support',
    subheaderText: 'We typically reply in a few minutes',
  },
};

对话页面选项

ConversationPageOptions 自定义支持对话页面上显示的头条字符串。 这两个字段都是可选的——省略时使用服务器配置的默认.

特征

鉴定

要访问DevRev SDK的某些功能,需要用户识别.

用户登录后, 身份识别功能应适当放置在您的应用程序中 。 如果您在应用程序发布时有可用的用户信息,请在程序启动后调用此功能 DevRev.configure(appID: string) 方法.

[TIP] 如果您之前没有识别过用户,DevRev SDK会在SDK配置后立即自动为您创建一个匿名用户.

[TIP] 这个 Identity 结构允许用户、组织和账户特性中的自定义字段。 这些字段必须通过 DevRev app 配置后才能被使用. 更多信息,参见 对象定制。 。 。 .

可以从下列方法中选择识别应用程序中的用户:

识别未验证的用户

未经验证的识别方法可以识别具有独特识别特征的用户,但无法用DevRev后端验证其身份.

DevRev.identifyUnverifiedUser(userID: string, organizationID?: string)

识别已核实的用户

经核实的识别方法用于识别DevRev平台内您系统独有的标识符的用户. 通过您和 DevRev 后端之间的符号交换程序进行验证.

确定经核实的用户的步骤如下:

1. 为您的系统生成一个 AAT( 最好是通过您的后端) .
2. 将您的 AAT 交换为您的系统每个用户的会话符 .
3. 将用户标识符和交换会话符号传递到 DevRev.identifyVerifiedUser(userID: string, sessionToken: string) 方法.

[尖叫声] 出于安全考虑,它是 强烈建议 在您的后端执行符号交换,以防止显示您的应用程序访问符号( AAT) .

生成 AAT

1. 打开 DevRev 网络应用 https://app.devrev.ai (英语) 进入 设置 页 次.
2. 打开 PLUG 键 页 次.
3. 在 应用程序访问符 面板,单击 新符号 复制显示的标志.

[尖叫声] 确保复制生成的应用程序访问令牌, 因为您无法再次查看它 .

将您的 AAT 交换为会话符

要继续识别用户, 您需要将您的 AAT 交换为会话符 。 这个步骤有助于您在 DevRev 平台内识别您系统的一个用户 .

以下是一个简单的 API 请求 DevRev 后端将您的 AAT 交换为会话符号的例子 :

[尖叫声] 确保您替换 <AAT> 财务报告和审定财务报表 <YOUR_USER_ID> 与实际值.

curl \
--location 'https://api.devrev.ai/auth-tokens.create' \
--header 'accept: application/json, text/plain, */*' \
--header 'content-type: application/json' \
--header 'authorization: <AAT>' \
--data '{
  "rev_info": {
    "user_ref": "<YOUR_USER_ID>"
  }
}'

API 呼叫的响应包含一个会话符号,您可以在您的应用程序中使用经过验证的识别方法.

[尖叫声] 作为一个良好做法,  app 应当从  后端在应用程序发布会或任何相关的应用程序生命周期事件.

识别已核实的用户

将用户标识符和交换会话符号传递到已核实的识别方法 :

DevRev.identifyVerifiedUser(userID: string, sessionToken: string)

更新用户

您可以使用以下方法更新用户信息:

DevRev.updateUser(identity: Identity)

[尖叫声] 这个 userID 属性无法更新.

注销

您可以使用以下方法登录当前用户 :

DevRev.logout(deviceID: string)

身份模型

这个 Identity 界面用于在识别用户或更新其细节时提供用户、组织和账户信息。 此类主要用于: identifyUnverifiedUser 财务报告和审定财务报表 updateUser 方法。 。 .

属性

这个 Identity 类包含以下属性:

[注] 定义为用户、组织和账户特征的自定义字段属性必须在 DevRev 网络应用中配置 在此之前 他们可以使用。 见 对象定制 更多信息.

用户特性

这个 UserTraits 类包含用户的详细信息 :

[注] 所有属性在 UserTraits 是可选的.

组织特征

这个 OrganizationTraits 课程载有该组织的详细资料:

[注] 所有属性在 OrganizationTraits 是可选的.

账户特征

这个 AccountTraits 分类包含账户的详细信息 :

[注] 所有属性在 AccountTraits 是可选的.

支持聊天

一旦用户身份确认完成,您就可以开始使用我们DevRev SDK支持的聊天(对话)对话框. 支持聊天功能可以从最上层屏幕显示为模式屏幕.

DevRev.showSupport()

创建新支持对话框

您可以直接从您的应用程序启动新的支持对话 。 这种方法显示支持聊天屏幕,并同时创建一个新的对话.

DevRev.createSupportConversation(prefillMessage?: string)

您可以选择通过纯文本消息预填对话输入字段 :

DevRev.createSupportConversation('I need help with billing for order #12345')

应用程序链接处理

在某些情况下,从支持聊天中打开的链接是在应用程序中而不是浏览器中打开的. 您可以调用以下方法来控制在链接打开后聊天模式是否应当被删除 :

DevRev.setShouldDismissModalsOnOpenLink(value: boolean)

设置此旗帜为真 应用系统打开链接的默认行为, 包括删除任何 DevRev 模式屏幕以方便处理您自己的深层链接 .

应用链接回调

[TIP] 这个功能只在Android上得到支持.

对于需要自定义处理的情景,可以通过以下方法捕捉支持聊天的链接:

DevRev.setInAppLinkHandler((url) => {
    // Perform an action here.
});

动态主题配置

DevRev SDK 允许您根据系统外观动态配置主题,或者使用 DevRev 门户网站上配置的主题. 默认情况下,主题为动态并遵循系统外观.

DevRev.setPrefersSystemTheme(value: boolean)

分析

DevRev SDK 允许您使用属性地图发送自定义分析事件 。 您可以使用以下函数跟踪这些事件:

DevRev.trackEvent(name: string, properties?: { [key: string]: string })

会话分析

DevRev SDK 提供了会话分析功能来帮助您了解用户如何与您的应用程序互动.

进入或退出

默认选择会话分析功能, 允许它们从头开始 。 但是,您可以使用以下方法选择退出:

DevRev.stopAllMonitoring()

选择返回,使用下列方法:

DevRev.resumeAllMonitoring()

会话录音

您可以启用会话记录来记录用户与您的应用程序的互动 .

[注] 会话录制功能是选出并默认启用.

会话录音功能包括控制录音的下列方法:

会话属性

您可以在会话录音中添加自定义属性来帮助您理解会话的背景. 属性被定义为字符串值的映射.

DevRev.addSessionProperties(properties: { [key: string]: string })

要在用户登录或会话结束后清除会话属性,请使用以下方法:

DevRev.clearSessionProperties()

遮罩敏感数据

为了保护敏感数据,DevRev SDK提供了一个自动伪装功能,在发送到服务器之前先遮住数据. 密码文本字段等输入视图自动被遮蔽.

虽然自动化妆特性对于大多数情况都足够,但可以使用下列方法手动将额外视图标记为敏感:

DevRev.markSensitiveViews(tags: any[])

如果任何先前被蒙蔽的视图需要被解开,可以使用以下方法: 1

DevRev.unmarkSensitiveViews(tags: any[])

例如:

import * as DevRev from '@devrev/sdk-react-native';
import { View, Text, findNodeHandle } from "react-native";
import { useRef, useEffect } from "react";

const YourComponent = () => {
  const sensitiveViewRef = useRef(null);
  const insensitiveViewRef = useRef(null);

  useEffect(() => {
    // Mark sensitive view
    const sensitiveId = findNodeHandle(sensitiveViewRef.current);
    if (sensitiveId) {
      DevRev.markSensitiveViews([sensitiveId]);
    }

    // Unmark insensitive view
    const insensitiveId = findNodeHandle(insensitiveViewRef.current);
    if (insensitiveId) {
      DevRev.unmarkSensitiveViews([insensitiveId]);
    }
  }, []);

  return (
    <View>
      <View ref={sensitiveViewRef}>
        <Text>Sensitive content (masked in recordings)</Text>
      </View>
      <View ref={insensitiveViewRef}>
        <Text>Insensitive content (visible in recordings)</Text>
      </View>
    </View>
  );
};

export default YourComponent;

网络视图中的遮罩元素

将元素标记为网络视图中的敏感元素( NameWebView,应用 devrev-mask CSS课. 要解开标记,请使用 devrev-unmask。 。 。 .

• 将元素标为遮盖 :

  <label class="devrev-mask">OTP: 12345</label>
  

• 将元素标为已卸出:

  <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask">
  

用户互动跟踪

DevRev SDK 自动跟踪用户互动,如自带,刷相,和滚动等. 然而,在某些情况下,您可能想要禁用此跟踪,以防止敏感用户动作被记录.

改为: 暂时禁用 用户交互跟踪,使用下列方法:

DevRev.pauseUserInteractionTracking()

改为: 恢复 用户交互跟踪,使用下列方法:

DevRev.resumeUserInteractionTracking()

计时器

DevRev SDK提供了一个计时器机制来测量用于特定任务的时间,允许您跟踪事件如响应时间,加载时间,或任何其他基于持续时间的度量.

机制采用平衡起止方法,两者都接受定时器名称和属性的可选词典.

要启动计时器,请使用以下方法:

DevRev.startTimer(name: string, properties: { [key: string]: string })

停止计时器,使用以下方法: 1

DevRev.endTimer(name: string, properties: { [key: string]: string })

抓取错误

您可以使用 captureError 函数.

这保证了即使错误在您的应用程序中被处理,它仍将被记录为诊断.

DevRev.captureError(
    error: Error | string,
    tag: string
)

示例

try {
} catch (error) {
    DevRev.captureError(
        error,
        'network-failure'
    );
}

有错误的示例 :

try {
    throw new Error('Something went wrong');
} catch (error) {
    DevRev.captureError(error, 'custom-error');
}

音轨屏幕

DevRev SDK提供自动屏幕跟踪,帮助您了解用户如何通过您的应用导航. 尽管屏幕自动被跟踪,但可以使用以下方法手动跟踪屏幕:

DevRev.trackScreenName(name: string)

管理屏幕过渡( 只有Android)

DevRev SDK允许跟踪屏幕过渡,以了解您的应用程序内的用户导航. 您可以使用下列方法手动更新状态:

// Mark the transition as started.
DevRev.setInScreenTransitioning(true)

// Mark the transition as ended.
DevRev.setInScreenTransitioning(false)

推动通知

您可以配置您的应用程序来接收来自 DevRev SDK 的驱动通知 。 SDK能够处理按压通知,并根据通知的内容执行动作.

DevRev 后端向您的应用程序发送了按下通知,以通知用户支持聊天中的新消息.

配置

要接收按压通知, 您需要遵循您在 推动通知 节.

推进通知登记册

[TIP] Push通知要求SDK已经配置,用户已经确定,以确保交付给正确的用户.

DevRev SDK 提供了一种接收推力通知的设备注册的方法 。 您可以使用以下方法注册按压通知:

DevRev.registerDeviceToken(deviceToken: string, deviceID: string)

在Android设备上 deviceToken 应该是Firebase Cloud Message (FCM) 符号值,而在 iOS 设备上,应该是 Apple Push 通知服务(APNs)符号.

未从按键通知注册

如果您的应用程序不再需要接收推取通知,您可以解除设备的注册.

使用下列方法解除设备的注册:

DevRev.unregisterDevice(deviceID: string)

该方法需要设备标识符,该标识符应与登记设备时所使用的标识符相同.

处理按键通知

机器人

关于Android,通知作为数据电文执行,以提供灵活性。 然而,这意味着自动点击处理不可用. 要处理通知点击,开发者需要拦截点击事件,取出有效载荷,并传递给指定的处理方法. 这种自定义方法使Android应用程序能够进行有针对性的通知处理.

处理通知书时使用下列方法:

DevRev.processPushNotification(payload: string)

在这里 message 通知有效载荷中的物体需要传递到此功能.

例如:

const notificationPayload = {
    // message may be nested based on the notification library
    "message": {
        // ... (the entire message object)
    }
};
const messageJson = notificationPayload["message"];
DevRev.processPushNotification(JSON.stringify(messageJson));

iOS系统

在iOS上 AppDelegate 必须更新以拦截点击的通知并将有效载荷转发给SDK.

单位 didFinishLaunchingWithOptions,设置 UNUserNotificationCenter 代表:

UNUserNotificationCenter.current().delegate = self

执行 userNotificationCenter(_:didReceive:) 将通知有效载荷传递给SDK:

func userNotificationCenter(
    _ center: UNUserNotificationCenter,
    didReceive response: UNNotificationResponse
) async {
    await DevRev.processPushNotification(
        response.notification.request.content.userInfo
    )
}

样本应用( 没有框架)

作为我们的一部分,我们为DevRev SDK 反应土著提供了使用案例的软件样本 公共仓库. 要设置和运行样本应用软件,遵循这些步骤:

1. 转到样本目录 :

   cd sample/react-native
   

2. 安装依赖性 :

   yarn install
   

3. 对于iOS,运行:

   pod install --project-directory=ios --repo-update
   

4. 启动 React 本地开发服务器 :

   npx react-native start
   

5. 使用 Android 运行应用程序 :

   npx react-native run-android
   

   或打开 android 在Android Studio的目录中运行应用程序.
6. 使用 iOS 运行应用程序 :

   npx react-native run-ios
   

   打开 ios/DevRevSDKSampleRN.xcworkspace 在Xcode中运行应用程序.

软件样本( Expo)

作为我们的一部分,已经为世博会提供了带有DevRev SDK使用案例的样本应用程序 公共仓库. 要设置和运行样本应用软件,遵循这些步骤:

1. 转到样本目录 :

   cd sample/expo
   

2. 安装依赖性 :

   yarn install
   

3. 运行干净和预建 :

   npx expo prebuild --clean
   

4. 使用 Android 运行应用程序 :

   npx expo run:android
   

   或打开 android android Studio中的目录并运行应用程序.
5. 在 iOS 上运行应用程序 :

   npx expo run:ios
   

   打开或打开 ios/DevRevSDKSample.xcworkspace 在 Xcode 中运行应用程序.

解决问题

• 问题:支持聊天不显示. 解决方案:确保您正确使用其中一种识别方法: DevRev.identifyUnverifiedUser(...) 或者说 DevRev.identifyVerifiedUser(...)。 。 。 .

• 问题: 没有收到按键通知. 解决方案: 确保您的应用程序配置为接收按压通知, 并确保您的设备在 DevRev SDK 注册 .

ProGuard (仅限机器人)

当尝试用 ProGuard 启用为 Android 构建您的应用程序时, 请参考这些共同的问题及其解决方案 .

[注] 你总是可以提到 Android ProGuard 文档 更多信息.

• 问题: 缺少类别 com.google.android.play.core.splitcompat.SplitCompatApplication。 。 。 . 解决方案: 在您的 proguard-rules.pro 文件 :

  -dontwarn com.google.android.play.core.**
  

• 问题: 由于过渡性蝶形花序依赖而缺级. 解决方案: 在您的 proguard-rules.pro 文件 :

  -keep class io.flutter.** { *; }
  -keep class io.flutter.plugins.** { *; }
  -keep class GeneratedPluginRegistrant { *; }
  

• 问题: 缺少类别 org.s1f4j.impl.StaticLoggerBinder。 。 。 . 解决方案: 在您的 proguard-rules.pro 文件 :

  -dontwarn org.slf4j.impl.StaticLoggerBinder
  

移徙指南

如果您正在从遗留的用户Experior SDK迁移到新的 DevRev SDK, 请参考 移徙指南 详细指示和特征等同.