Flutter插件robin_flutter的使用方法详解

Flutter插件robin_flutter的使用方法详解

Overview

需要为您的新应用或现有Flutter应用添加即时通讯功能吗？在本文中，我们将探讨如何使用Flutter实现Robin SDK。我们将使用一个示例Flutter应用程序进行演示。

💡 Flutter 是由Google管理的框架，用于构建原生编译的跨平台应用程序。本指南假定您了解如何使用Flutter构建跨平台应用程序。如果您需要快速复习，请随时查看 这里。

Pre-requisites

在开始向我们的Flutter应用添加即时通讯功能之前，您需要具备以下条件：

1. 首先，您需要一个 Robin账户，可以通过在 dashboard.robinapp.co/ 注册来创建。
2. 创建Robin账户后，您需要创建一个 Robin应用，成功注册后会提示您创建第一个Robin应用。
3. 最后，确保您的机器上已安装Flutter。

如果您已经准备好上述所有内容，我们可以开始了。

ℹ️ 想查看完整的代码设置？可以在这里查看：Notion文档

The Robin App

Robin 被设计用于多种通信场景，这意味着您可以创建多个应用以利用您的Robin账户的所有功能，并且每个应用之间有明确的职责分离。这就是我们所说的 Robin App 的来源。

完全认证的Robin App确保所有通信在传输过程中完全加密，这样即使您（拥有Robin账户的人）或Robin也无法看到通信频道中的消息。而受监管的Robin App允许您查看通信内容但不设置任何加密机制。

Project Setup

Minimum Supported Platforms

Create Flutter Application

导航到您希望的文件夹并创建一个新的Flutter项目，我们将其命名为 robin_test_app。

flutter create robin_test_app

Add Robin Flutter SDK to your Flutter application

打开任意IDE中的 robin_test_app 应用程序，并通过将 robin_flutter 包添加到项目的 pubspec.yaml 文件中来添加Robin Flutter SDK。

dependencies:
  robin_flutter: ^version-number

然后在终端中运行以下命令：

flutter pub get

Permissions

Robin 需要您在 AndroidManifest.xml 和 info.plist 文件中请求对资源的权限。

iOS Permissions

您的 info.plist 文件位于 <project root>/ios/Runner/Info.plist。

<key>NSPhotoLibraryUsageDescription</key>
<string>解释为什么您的应用需要访问照片库权限</string>

<key>NSCameraUsageDescription</key>
<string>解释为什么您的应用需要访问摄像头权限</string>

<key>NSMicrophoneUsageDescription</key>
<string>解释为什么您的应用需要访问麦克风权限</string>

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
</array>

Android Permissions

您的 AndroidManifest.xml 文件位于 <project root>/android/app/src/main/AndroidManifest.xml。

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

<queries>
	<intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
	<intent>
    <action android:name="android.intent.action.SEND" />
    <data android:mimeType="*/*" />
  </intent>
</queries>

Connect Flutter App to Robin

现在，您已经创建了一个 Robin账户、一个 Robin应用 和一个 Flutter应用。接下来，我们将使用Flutter SDK将Flutter应用连接到Robin仪表板。

为了在Flutter上使用Robin，需要以下几项内容：

• 您的Robin应用的API密钥。
• 当前用户的相关信息。
• 用户模型中的键值。
• 一个回调函数以获取平台上的所有可用用户。

Robin App API Key

我们将使用此演示的API密钥。您可以在Robin用户仪表板的 API Configurations 页面获取自己的API密钥。

获取API密钥后，将其存储为常量 apiKey，以便在整个代码库中轻松引用。

final String apiKey = '/* YOUR API KEY */';

您现在可以导入Robin SDK到您的文件中：

import 'package:robin_flutter/robin_flutter.dart';

Information of Logged In User

Robin需要某些有关当前用户的信息，这些信息将用于个性化用户在使用Robin时的体验。

1. 用户的名称：这是您希望在此用户在Robin中显示的名称。
2. 用户的Robin令牌：这是Robin用来唯一标识每个用户的标识符。当用户首次注册您的平台时应创建它；如果已有现有用户，则应在数据库中更新用户信息以包含Robin令牌。

Create Robin Tokens for Users

metadata 是一组键值对，帮助Robin知道为哪个用户创建Robin令牌。metadata Map可以包含您希望共享的关于用户的所有信息；例如，用户的全名、电话号码或电子邮件地址。

Map<String, dynamic> metadata = {
	"firstName": user.firstName,
	"lastName": user.lastName,
	"emailAddress": user.email,
	...
};
final String robinToken = await RobinCore.createUserToken(apiKey, metaData);

在添加了您的 metadata 对象后，您可以使用 createUserToken 方法并通过提供API密钥和用户的元数据来为该用户创建 robinToken。

现在，我们已经有了当前用户的姓名及其 robinToken，我们可以创建 RobinCurrentUser，以便SDK能够识别当前登录的用户。

RobinCurrentUser currentUser = RobinCurrentUser(
  robinToken: robinToken,
  fullName: userFullName,
);

Users on your Robin Chat Application

Getting all Users for Robin Chat

为了使用Robin聊天功能为特定的一组人服务，您需要创建一个返回这些人身份的函数，理想情况下，它可以是您平台上的所有用户，但您可以限制为符合您目标的任何内容，例如平台上的所有版主或管理员。

此函数应该返回一个 List<Map>，其结构可能类似于以下代码片段。

List<Map> getAllUsers() async {
	http.Response response = await http.get(
	    Uri.parse('https://my-url.com/api/v1/users'),
	    headers: {
	      "Content-Type": "application/json",
	    },
	  );
      final String res = response.body;
      final int statusCode = response.statusCode;
      return _decoder.convert(res)['users'];
}

最终，您的函数应该返回类似以下代码片段的类型和结构。下面的片段是一个具有 emailAddress、fullName 和 robinToken 字段的 Map 对象列表。

[
	{
		emailAddress: "johndoe@mail.com",
		fullName: "John Doe",
		robinToken: "BLAaUGurGvTewxIGKKrVANhn",
		...
	},
	{
		emailAddress: "janedoe@mail.com",
		fullName: "Jane Doe",
		robinToken: "BLAaUGurGvTewxIGKKrVANhn",
		...
	},
	...
]

Parse Robin Chat Users

在成功获取所有希望用于Robin聊天应用的用户之后，Robin Flutter SDK要求我们解析 List<Map> 形式的用户。我们通过使用 RobinKeys 来完成此操作；RobinKeys 告诉SDK在哪里查找用户对象中的Robin令牌、全名和其他所需字段/键。

对于Robin Flutter聊天SDK，为了使应用中的每个人都能无缝地进行聊天，需要提供用户的 令牌、他们的 显示名称 和一个 分隔符 来创建 RobinKeys 对象。

User Robin Token

robinToken 接受一个字符串列表 List<String>，其中列表中的每个字符串表示在对象点符号表示法中引用的字段。本质上，您输入的是Robin必须经过的所有键/字段，以便在用户对象中找到Robin令牌。

例如，如果您的用户模型看起来像这样：

[{
		"emailAddress": "johndoe@mail.com",
		"fullName": "John Doe",
		"robinDetails": {
			"token": "BLAaUGurGvTewxIGKKrVANhn"
		},...
	},...
]

您的 robinToken 值将是 ["robinDetails", "token"]，因为我们首先需要访问 robinDetails 键，然后才能访问 token 键以获取其值。

User Display Name

displayName 类似于 robinToken，但它接受一个字符串列表的列表 List<List<String>>。这是因为您可能想要连接不同的值，例如 firstName 和 lastName。您输入的是Robin必须经过的所有键，以便在每个单独的列表中找到某个值。

例如，如果您的用户模型看起来像这样：

[{
		"emailAddress": "johndoe@mail.com",
		"firstName": "John",
		"lastName": "Doe",
		...
	},...
]

您的 displayName 值将是 [["firstName"],["lastName"],]，以显示“John Doe”。

或者，如果您的用户模型看起来像这样：

[
	{
		"emailAddress": "johndoe@mail.com",
		"firstName": "John",
		"lastName": "Doe",
		"userDetails": {
			"middleName": "Clay",
			"address": ...,
			}
		...
	},
	...
]

您的 displayName 值将是 [["firstName"],["userDetails", "middleName"],["lastName"]，以显示“John Clay Doe”。

User Separator

默认情况下，displayName 的值由空格分隔，即 " "。但是，您可以选择性地添加任何您希望使用的字符串作为分隔符。

Instantiate Robin Keys

最后，您的 RobinKeys 应该看起来像这样。

RobinKeys keys =  RobinKeys(
  robinToken: ['robinToken'],
  displayName: [
    ['firstName'],['lastName']
  ],
	separator: " "
);

Create Robin App Instance

现在，我们已经拥有了启动Robin所需的全部内容。您可以根据自己的喜好进行操作；您可以使用Navigator将新屏幕推入以使聊天占据整个页面，或者您可以将其设置为底部导航栏中的子项之一。

无论如何，您在Flutter应用程序中实例化Robin的代码应该看起来像这样：

Robin(
  apiKey: apiKey,
  getUsers: getAllUsers,
  currentUser: currentUser,
  keys: keys,
);

这将是全部！您的用户可以开始使用Robin及其所有功能互相聊天。

Your full setup code should look like this

总之，在以上步骤之后，Robin应用的整个设置和初始化将采取这种形式。

final String apiKey = '/* YOUR API KEY */';

/* CREATE ROBIN CURRENT USER FOR SDK IDENTIFICATION */
RobinCurrentUser currentUser = RobinCurrentUser(
  robinToken: robinToken,
  fullName: userFullName,
);

/* GET ALL USERS FOR ROBIN CHAT */
List<Map> getAllUsers() async {
	http.Response response = await http.get(
	    Uri.parse('https://my-url.com/api/v1/users'),
	    headers: {
	      "Content-Type": "application/json",
	    },
	  );
	  final String res = response.body;
	  final int statusCode = response.statusCode;
	  return _decoder.convert(res)['users'];
}

/*  */
RobinKeys keys =  RobinKeys(
  robinToken: ['robinToken'],
  displayName: [
    ['firstName'],['lastName']
  ],
	separator: " "
);

/* CREATE ROBIN INSTANCE */
Robin(
  apiKey: apiKey,
  getUsers: getAllUsers,
  currentUser: currentUser,
  keys: keys,
);