Flutter集成插件ym_flutter_integration的使用

简介

ym_flutter_integration 是一个用于在Flutter应用中集成Yellow Messenger聊天机器人的插件。

概览

此插件提供了一个用于在移动应用中显示聊天机器人的小部件，并监听从聊天机器人发出的事件。

使用

要使用此插件，需要将 ym_flutter_integration 添加为 pubspec.yaml 文件中的依赖项。

dependencies:
  ym_flutter_integration: ^版本号

入门指南

初始化 ym_flutter_integration 并设置初始配置。

import 'package:flutter/material.dart';
import 'package:ym_flutter_integration/models/botEvents.dart';
import 'package:ym_flutter_integration/ym_flutter_integration.dart';

class _BotPageState extends State<BotPage> {
  YmFlutterIntegration ymFlutterIntegration;
  String botId = "<Your botId goes here>";

  [@override](/user/override)
  void initState() {
    super.initState();
    ymFlutterIntegration = YmFlutterIntegration();
    ymFlutterIntegration.setConfig(
        context: context,
        botId: botId,
        enableHistory: false,
        enableSpeech: false,
        enableCloseButton: true);
  }
}

调用 getBotWidget() 方法以获取聊天机器人的小部件。

ymFlutterIntegration.getBotWidget(
  botEventListener: (BotEvent botEvent) {
    switch (botEvent.code) {
      case "event1":
        ymFlutterIntegration.closeBot();
        print("code is ${botEvent.code}, data");
        print("is ${botEvent.data}");
        break;
      default:
        print("No data");
    }
  },
),

需求

Android

在 build.gradle 中添加以下内容：

minSdkVersion : 21

permissions

    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS

在 info.plist 中添加以下内容：

<key>NSMicrophoneUsageDescription</key>
<string>Speech recognisation is used to understand user speech and send data to chat bot running on plugin</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Speech recognisation is used to understand user speech and send data to chat bot running on plugin</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

方法

• setConfig(...): 设置聊天机器人的初始配置（应在调用 getBotWidget(...) 之前添加配置）
• getBotWidget(...): 获取聊天机器人的小部件
• closeBot(...): 关闭聊天机器人
• addPayload(...): 向聊天机器人添加负载（负载将在调用 updatePayload 时发送）
• updatePayload(...): 发送已添加的负载到聊天机器人
• clearPayload(...): 删除所有已存在的和添加的负载

setConfig(…)

参数

• botId (@required) [String]: 聊天机器人的唯一ID
• context (@required) [BuildContext]: 显示聊天机器人的小部件的上下文
• enableHistory [bool]: 是否启用聊天历史记录
• enableSpeech [bool]: 是否启用语音识别
• enableCloseButton [bool]: 是否启用关闭按钮

示例

String botId = "<Your bot id goes here>";
BuildContext context = <Widget context>;
bool enableHistory = false;
bool enableSpeech = false;
bool enableCloseButton = false;
ymFlutterIntegration.setConfig(botId, context, enableHistory, enableSpeech, enableCloseButton);

getBotWidget(…)

参数

• botEventListener [Function(BotEvent)]: 捕获聊天机器人发出的事件

示例

ymFlutterIntegration.getBotWidget(
  botEventListener: (BotEvent botEvent) {
    switch (botEvent.code) {
      case "event1":
        ymFlutterIntegration.closeBot();
        print("code is ${botEvent.code}, data");
        print("is ${botEvent.data}");
        break;
      default:
        print("No data");
    }
  },
),

closeBot()

示例

ymFlutterIntegration.closeBot();

addPayload(…)

参数

• key (@required) [String]: 负载项目的唯一名称
• value (@required) [dynamic]: 与键关联的值

示例

ymFlutterIntegration.addPayload(key:"Name",value:"Purush");
ymFlutterIntegration.addPayload(key:"company",value:"Yellowmessenger");

updatePayload()

示例

ymFlutterIntegration.updatePayload();

clearPayload()

示例

ymFlutterIntegration.clearPayload();

示例代码

import 'package:flutter/material.dart';
import 'package:ym_flutter_integration/models/botEvents.dart';
import 'package:ym_flutter_integration/ym_flutter_integration.dart';

void main() {
  // 启动应用
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用MaterialApp以增加功能
    return MaterialApp(
      // 移除调试标志
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        // 渲染聊天机器人
        body: BotPage(),
      ),
    );
  }
}

class BotPage extends StatefulWidget {
  // 创建静态路由
  static String routeName = "/BotPage";
  [@override](/user/override)
  _BotPageState createState() => _BotPageState();
}

class _BotPageState extends State<BotPage> {
  // 初始化全局对象，在该对象上调用聊天机器人小部件
  YmFlutterIntegration ymFlutterIntegration;
  // 示例聊天机器人ID
  String botId = "x1587041004122";

  [@override](/user/override)
  void initState() {
    super.initState();

    // 声明对象实例
    ymFlutterIntegration = YmFlutterIntegration();

    // 设置配置以获取聊天机器人小部件
    ymFlutterIntegration.setConfig(
      context: context, // 发送当前页面上下文以增加功能
      botId: botId, // 发送需要在小部件中渲染的聊天机器人ID
      enableHistory: false, // 禁用聊天历史记录
      enableSpeech: false, // 禁用麦克风
      enableCloseButton: true, // 启用关闭按钮
    );

    // 初始化时向聊天机器人添加负载
    ymFlutterIntegration.addPayload(key: "name", value: "Yellowmessenger");
    ymFlutterIntegration.addPayload(key: "desc", value: "A Conversational AI Platform");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用SafeArea以防止屏幕缺口影响UI/UX
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            // Expanded小部件以占据尽可能多的空间给聊天机器人视图
            Expanded(
              // 在配置已设置的对象上调用聊天机器人小部件
              child: ymFlutterIntegration.getBotWidget(
                // 发送回调函数作为聊天机器人事件侦听器
                botEventListener: (BotEvent botEvent) {
                  // 监听BotEvent模型的代码和数据部分
                  switch (botEvent.code) {
                    // 通过其代码识别事件
                    case "choosen_other_option":
                      // ymFlutterIntegration.closeBot();
                      // ymFlutterIntegration.addPayload(key: "Name", value: "Purush");
                      // ymFlutterIntegration.updatePayload();
                      print("code is ${botEvent.code}, data is ${botEvent.data}");
                      break;
                    // 默认情况：未找到事件时的回退
                    default:
                      print("No data");
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}