Flutter聊天机器人集成插件landbot的使用

Flutter聊天机器人集成插件landbot的使用

Landbot 是一个基于 landbot.io 的封装插件，它是一个机器人构建服务。

功能特性

目前，Landbot 支持订阅 Webhooks 流、获取客户数据以及向客户发送消息。

入门指南

在项目的 pubspec.yaml 文件中添加 Landbot 依赖：

dependencies:
  landbot: any

使用方法

更长的示例代码可以在 /example 文件夹中找到。

创建 Landbot 实例

Landbot landbot = Landbot();

确保在使用之前初始化 Landbot，并从 Landbot 账户中获取访问令牌（通过 设置）：

await landbot.initialise(token: 'YOUR_LANDBOT_TOKEN');

Landbot 会启动一个服务器，默认监听 IP 地址的 3000 端口，Webhook 端点为 ip:3000/webhook。您可以更改默认端口和 Webhook 端点。为了接收此流中的数据，请确保将此 URL (http://YOUR_IP:3000/webhook) 添加到 Landbot 的 Webhooks 中。该流将返回消息数据，可以通过调用 sendMessage 函数回复客户。如果您在本地开发，可以使用 ngrok 生成一个公网 URL。

StreamSubscription subscription =
    landbot.webhook.listen((MessageData messageData) {
  
  // 回复客户的消息
  landbot.sendMessage(
      customerID: messageData.customer!.id!,
      message: 'Hello ${messageData.customer!.name}');
});

向客户发送消息

await landbot.sendMessage(
    customerID: customer.id, message: 'Hello ${customer.name}');

获取客户数据

Customer? customer = await landbot.getCustomer(id: CUSTOMER_ID);

额外信息

这只是初始版本，欢迎自由贡献或报告任何问题！

完整示例代码

以下是完整的示例代码，位于 <a href="https://github.com/rohitsangwan01/Landbot/blob/main/example/landbot_example.dart" rel="noopener noreferrer nofollow" target="_blank">example/landbot_example.dart</a>。

// ignore_for_file: unused_local_variable

import 'dart:async';
import 'package:landbot/landbot.dart';
import 'package:landbot/src/model/MessageModel.dart';

void main() async {
  Landbot landbot = Landbot();

  /// 从 Landbot 获取令牌
  String token = 'YOUR_TOKEN';

  /// 初始化 Landbot
  await landbot.initialise(token: token);

  /// 订阅 Webhooks 流，默认端点为 /webhook
  StreamSubscription subscription =
      landbot.webhook.listen((MessageData messageData) {
    /// 回复客户的消息
    landbot.sendMessage(
        customerID: messageData.customer!.id!,
        message: 'Hello ${messageData.customer!.name}');
  });

  /// 获取客户数据
  // try {
  //   Customer? customer = await landbot.getCustomer(id: 161808359);
  //   print(customer?.toJson());
  // } catch (e) {
  //   print(e);
  // }

  /// 向客户发送消息
  // await landbot.sendMessage(
  //     customerID: customer.id!, message: 'Hello ${customer.name}');
}

更多关于Flutter聊天机器人集成插件landbot的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天机器人集成插件landbot的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Landbot 是一个强大的无代码聊天机器人构建平台，允许用户创建交互式聊天机器人并将其集成到各种应用程序中，包括 Flutter 应用程序。要在 Flutter 应用中集成 Landbot 聊天机器人，你可以使用 Landbot 提供的 WebView 集成方法。以下是详细的步骤：

1. 创建一个 Landbot 聊天机器人

首先，你需要在 Landbot 的平台上创建一个聊天机器人。登录到 Landbot 并按照向导创建一个新的聊天机器人。

2. 获取 Landbot 聊天机器人的 URL

创建完聊天机器人后，Landbot 会提供一个公开的 URL 或嵌入代码。你可以使用这个 URL 来在 Flutter 应用中加载聊天机器人。

3. 在 Flutter 项目中集成 Landbot

在 Flutter 项目中，你可以使用 webview_flutter 插件来加载 Landbot 聊天机器人。

步骤 1: 添加依赖

首先，在你的 pubspec.yaml 文件中添加 webview_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0

然后运行 flutter pub get 来安装依赖。

步骤 2: 创建 WebView

在你的 Flutter 项目中，创建一个新的 WebView 来加载 Landbot 聊天机器人。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class LandbotChat extends StatefulWidget {
  @override
  _LandbotChatState createState() => _LandbotChatState();
}

class _LandbotChatState extends State<LandbotChat> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Landbot Chat'),
      ),
      body: WebView(
        initialUrl: 'https://landbot.io/u/YOUR_LANDBOT_URL', // 替换为你的 Landbot URL
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

步骤 3: 使用 LandbotChat Widget

在你的应用中，你可以像使用其他 Widget 一样使用 LandbotChat。

import 'package:flutter/material.dart';
import 'landbot_chat.dart'; // 导入你创建的 LandbotChat Widget

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Landbot Integration'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => LandbotChat()),
              );
            },
            child: Text('Open Landbot Chat'),
          ),
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的 Flutter 应用，点击按钮打开 Landbot 聊天机器人。

5. 注意事项

  • WebView 初始化：在 Android 上，webview_flutter 可能需要额外的配置来正确初始化 WebView。
  • 权限：确保在你的 AndroidManifest.xml 文件中添加了 INTERNET 权限。
  • iOS 配置：在 iOS 上，确保你的 Info.plist 文件中允许加载外部资源。
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
回到顶部