Flutter客户端SDK插件squadwe_client_sdk的使用

Flutter客户端SDK插件squadwe_client_sdk的使用

将Squadwe客户端集成到您的Flutter应用中,并实现实时与访客聊天。Squadwe帮助您与访客实时聊天并提供卓越的支持。要将Squadwe集成到您的Flutter应用中,请遵循以下步骤。

1. 在Squadwe中创建一个API收件箱

参考创建API通道文档。

2. 将插件添加到项目中

在终端运行以下命令:

flutter pub add squadwe_client_sdk

或者

在项目的pubspec.yaml文件中添加:

dependencies:
  squadwe_client_sdk: <<version>>

您可以在这里检查最新版本
该库使用Hive进行本地存储,使用Flutter Chat UI作为用户界面。

3. 如何使用

替换baseUrlinboxIdentifier为适当的值。有关如何获取您的baseUrlinboxIdentifier的更多信息,请参阅此处

a. 使用SquadweChatDialog

通过传递参数来调用SquadweChatDialog.show以显示聊天对话框。要关闭对话框,请使用Navigator.pop(context)

// 示例
SquadweChatDialog.show(
  context,
  baseUrl: "https://app.squadwe.com",
  inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
  title: "Squadwe Support",
  user: SquadweUser(
    identifier: "test@test.com",
    name: "Tester test",
    email: "test@test.com",
  ),
);

可用参数

参数名 默认值 类型 描述
context - BuildContext 当前BuildContext
baseUrl - String Squadwe安装地址
inboxIdentifier - String 目标Squadwe收件箱标识符
enablePersistance true bool 启用持久化,保存Squadwe客户端实例的联系人、会话和消息到磁盘
true - 保存Squadwe客户端实例的数据(联系人、会话和消息)到磁盘。要清除已保存的数据,请调用SquadweClient.clearData或SquadweClient.clearAllData
false - 将Squadwe客户端实例的数据保留在内存中,并在Squadwe客户端实例被销毁时清除
设置
title - String 模态对话框的标题
user null SquadweUser 自定义用户详细信息,附加到Squadwe联系人
primaryColor Color(0xff1f93ff) Color SquadweChatTheme的主要颜色
secondaryColor Colors.white Color SquadweChatTheme的次要颜色
backgroundColor Color(0xfff4f6fb) Color SquadweChatTheme的背景色
l10n SquadweL10n() SquadweL10n SquadweChat小部件的本地化字符串
timeFormat DateFormat.Hm() DateFormat 聊天日期格式
dateFormat DateFormat(“EEEE MMMM d”) DateFormat 聊天时间格式

b. 使用SquadweChat小部件

要在应用的一部分内嵌入SquadweChat小部件,请使用SquadweChat小部件。通过传递带有自定义主题颜色和其他内容的SquadweChatTheme来自定义聊天UI主题。

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

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

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return SquadweChat(
      baseUrl: "https://app.squadwe.com",
      inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
      user: SquadweUser(
        identifier: "test1@test.com",
        name: "Tester test1",
        email: "test1@test.com",
      ),
      appBar: AppBar(
        title: Text(
          "Squadwe",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold
          ),
        ),
        backgroundColor: Colors.white,
      ),
      onWelcome: (){
        print("Welcome event received");
      },
      onPing: (){
        print("Ping event received");
      },
      onConfirmedSubscription: (){
        print("Confirmation event received");
      },
      onMessageDelivered: (_){
        print("Message delivered event received");
      },
      onMessageSent: (_){
        print("Message sent event received");
      },
      onConversationIsOffline: (){
        print("Conversation is offline event received");
      },
      onConversationIsOnline: (){
        print("Conversation is online event received");
      },
      onConversationStoppedTyping: (){
        print("Conversation stopped typing event received");
      },
      onConversationStartedTyping: (){
        print("Conversation started typing event received");
      },
    );
  }
}

c. 使用Squadwe客户端

您还可以创建一个定制的聊天UI并使用SquadweClient加载和发送消息。当创建客户端实例时,将触发如onMessageSentonMessageReceived等消息事件。

final squadweCallbacks = SquadweCallbacks(
      onWelcome: (){
        print("on welcome");
      },
      onPing: (){
        print("on ping");
      },
      onConfirmedSubscription: (){
        print("on confirmed subscription");
      },
      onConversationStartedTyping: (){
        print("on conversation started typing");
      },
      onConversationStoppedTyping: (){
        print("on conversation stopped typing");
      },
      onPersistedMessagesRetrieved: (persistedMessages){
        print("persisted messages retrieved");
      },
      onMessagesRetrieved: (messages){
        print("messages retrieved");
      },
      onMessageReceived: (squadweMessage){
        print("message received");
      },
      onMessageDelivered: (squadweMessage, echoId){
        print("message delivered");
      },
      onMessageSent: (squadweMessage, echoId){
        print("message sent");
      },
      onError: (error){
        print("Ooops! Something went wrong. Error Cause: ${error.cause}");
      },
    );

    SquadweClient.create(
        baseUrl: widget.baseUrl,
        inboxIdentifier: widget.inboxIdentifier,
        user: widget.user,
        enablePersistence: widget.enablePersistence,
        callbacks: squadweCallbacks
    ).then((client) {
        client.loadMessages();
    }).onError((error, stackTrace) {
      print("squadwe client creation failed with error $error: $stackTrace");
    });

更多关于Flutter客户端SDK插件squadwe_client_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter客户端SDK插件squadwe_client_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中集成和使用squadwe_client_sdk插件的示例代码。假设squadwe_client_sdk已经发布在pub.dev上,你可以通过以下步骤进行集成和使用。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加squadwe_client_sdk的依赖:

dependencies:
  flutter:
    sdk: flutter
  squadwe_client_sdk: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你需要使用SDK的Dart文件中导入插件:

import 'package:squadwe_client_sdk/squadwe_client_sdk.dart';

3. 初始化SDK

通常SDK需要一些初始化步骤,比如设置API密钥或其他配置。假设SDK有一个初始化方法initialize,你可以这样使用:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化SDK
  await SquadweClientSdk.initialize(apiKey: '你的API密钥');

  runApp(MyApp());
}

4. 使用SDK功能

假设SDK提供了一些功能,比如获取用户信息、执行某些操作等。以下是一些假设的方法调用示例:

获取用户信息

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  User? _user;

  @override
  void initState() {
    super.initState();
    _getUserInfo();
  }

  Future<void> _getUserInfo() async {
    try {
      User user = await SquadweClientSdk.getUserInfo();
      setState(() {
        _user = user;
      });
    } catch (e) {
      print('Error getting user info: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Squadwe Client SDK Demo'),
      ),
      body: Center(
        child: _user != null
            ? Text('User: ${_user!.name} (${_user!.email})')
            : CircularProgressIndicator(),
      ),
    );
  }
}

执行某个操作(例如发送请求)

Future<void> _performOperation() async {
  try {
    OperationResult result = await SquadweClientSdk.performOperation(
      parameters: {
        'param1': 'value1',
        'param2': 'value2',
      },
    );

    if (result.success) {
      print('Operation successful: ${result.data}');
    } else {
      print('Operation failed: ${result.errorMessage}');
    }
  } catch (e) {
    print('Error performing operation: $e');
  }
}

5. 完整示例

结合以上代码,这里是一个完整的Flutter应用示例:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化SDK
  await SquadweClientSdk.initialize(apiKey: '你的API密钥');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Squadwe Client SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  User? _user;

  @override
  void initState() {
    super.initState();
    _getUserInfo();
  }

  Future<void> _getUserInfo() async {
    try {
      User user = await SquadweClientSdk.getUserInfo();
      setState(() {
        _user = user;
      });
    } catch (e) {
      print('Error getting user info: $e');
    }
  }

  Future<void> _performOperation() async {
    try {
      OperationResult result = await SquadweClientSdk.performOperation(
        parameters: {
          'param1': 'value1',
          'param2': 'value2',
        },
      );

      if (result.success) {
        print('Operation successful: ${result.data}');
      } else {
        print('Operation failed: ${result.errorMessage}');
      }
    } catch (e) {
      print('Error performing operation: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Squadwe Client SDK Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _user != null
                ? Text('User: ${_user!.name} (${_user!.email})')
                : CircularProgressIndicator(),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _performOperation,
              child: Text('Perform Operation'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设User和OperationResult是SDK定义的数据模型
class User {
  String? name;
  String? email;

  User({this.name, this.email});
}

class OperationResult {
  bool success;
  dynamic data;
  String? errorMessage;

  OperationResult({required this.success, this.data, this.errorMessage});
}

请注意,以上代码中的UserOperationResult类是基于假设的SDK数据模型。实际使用时,你应该根据squadwe_client_sdk的文档来定义这些类。同样,SDK的具体方法名和参数也可能有所不同,请参考SDK的官方文档进行调整。

回到顶部