本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将 Connect Customer 聊天集成到移动应用程序中
<a name="integrate-chat-with-mobile"></a>

本主题将介绍如何将 Amazon Connect 聊天功能集成到移动应用程序中。可以使用以下选项之一：
+ [WebView 整合](#webview)
+ [iOS 和安卓版Connect Customer Chat SDKs ](#integrate-chat-with-mobile-sdks-for-mobile)
+ [React Native 集成](#react-native-integration)

使用 Connect Customer [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API 发起联系。

**Topics**
+ [使用哪个集成选项](#integrate-options)
+ [Connect Customer 聊天集成工作流程](#integrate-chat-with-mobile-workflow)
+ [开始使用 Connect Customer 聊天集成](#integrate-chat-with-mobile-getting-started)

## 使用哪个集成选项
<a name="integrate-options"></a>

本节描述了每个集成选项，以帮助您决定将哪个集成选项用于您的解决方案。

### WebView 整合
<a name="webview"></a>

Amazon Connect Chat WebView 集成允许您以最少的开发工作将完整的聊天体验嵌入到您的移动应用程序中。该方法在 Android 上使用 `WebView`，在 iOS 上使用 `WKWebView`，以提供无缝且全面的聊天界面。对于寻求一种无需大量自定义即可快速集成聊天功能的 out-of-the-box解决方案的团队来说，它是理想的选择。

这种方法可确保安全通信，并利用基于 Web 的 Amazon Connect 聊天界面。但是，您需要将应用程序配置为 JavaScript 正确处理 Cookie。

有关实现 WebView 集成的更多信息，请参阅 Amazon Connect 聊天[界面示例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) GitHub 存储库。

**建议**： WebView基于基础的集成非常适合快速开发和最少的维护，同时确保全面的聊天功能。

### Connect Customer 手机版聊天 SDKs
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

iOS 和 Android 版的 Chat 简化了原生移动应用程序的 Connect Customer 聊天集成。 Connect Customer SDKs 它 SDKs 可以帮助处理客户端聊天逻辑和后端通信，类似于 Amazon Connect ChatJS 库。

 Connect Customer 聊天 SDKs 结束了Amazon Connect参与者服务， APIs并抽象了聊天会话的管理以及 WebSocket. 这使您可以专注于用户界面和体验，同时依靠 Connect Customer Chat SDK 与所有后端服务进行交互。这种方法仍然需要您使用自己的聊天后端来调用 Connect Customer `StartChatContact` API 来发起联系。
+ 有关基于 Swift 的 iOS 开发工具包的更多信息，请参阅适用于 iO [S GitHub 的Connect Customer Chat SDK 页面](https://github.com/amazon-connect/amazon-connect-chat-ios)。
+ 有关基于 Kotlin 的 Android SDK 的更多信息，请参阅适用于 Android 的 [Connect Customer Chat SDK 页面](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub 。

**优点**：Native SDKs 支持强大的功能和高性能，非常适合需要深度自定义和无缝用户体验的应用程序。

### React Native 集成
<a name="react-native-integration"></a>

Amazon Connect Chat React Native 集成提供了一种跨平台解决方案。它使团队能够使用共享代码库为 Android 和 iOS 构建聊天功能。这种方法在利用 React Native 的创建强大移动应用程序的功能的同时，平衡了自定义和开发效率。

此集成使用原生桥接来访问高级功能，并确保跨平台的一致性能和统一的用户体验。通过使用诸如`react-native-websocket`和 API 调用之类的库来实现 WebSocket 通信等关键功能会更容易`axios`。

**最适合**：希望在保持功能灵活性的同时最大化代码重用的团队。

## Connect Customer 聊天集成工作流程
<a name="integrate-chat-with-mobile-workflow"></a>

下图显示了使用移动应用程序的客户与座席之间的编程流。此图中的编号文字与图片下方的编号文本相对应。

![该图显示了 Connect Customer 聊天程序流程。](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**在图中**

1. 当客户在移动应用程序中开始聊天时，应用程序应 Connect Customer 使用该 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API 向发送请求。这需要特定的参数（ IDs 例如 API 端点以及[实例](amazon-connect-instances.md)和[联系](connect-contact-flows.md)流程）来进行身份验证和启动聊天。

1. `StartChatContact` API 会与您的后端系统交互以获取作为聊天会话唯一标识符的参与者令牌和联系 ID。

1. 应用程序的用户界面会将 `StartChatContact` 响应传递给移动设备 SDK，以便 SDK 能够与 [Connect Customer 参与者服务](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html)进行正确通信并设置客户的聊天会话。

1. SDK 将向用户界面公开 [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) 对象，其中包含与聊天会话交互的易用方法。

1. 在幕后，SDK 使用 [AWS SDK](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) 与 [Connect Customer 参与者服务](https://aws.amazon.com/developer/tools/)交互。与 Connect Customer 参与者服务的沟通负责所有客户与聊天会话的互动。这包括诸如`CreateParticipantConnection`、`SendMessage`、`GetTranscript` 或 `DisconnectParticipant` 之类的操作。

1. SDK 还管理从代理接收消息、事件和附件所需的 WebSocket 连接。所有这些都将由 SDK 处理和解析，然后以易用的结构显示在用户界面上。

## 开始使用 Connect Customer 聊天集成
<a name="integrate-chat-with-mobile-getting-started"></a>

以下步骤和资源将帮助您开始将 Connect Customer Chat 集成到原生移动应用程序中：

1. 您可以通过查看上的 [startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) 示例，快速设置[CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)堆栈以提供必要的后端进行 GitHub调用 StartChatContact 。

1. 有关展示如何构建由 Amazon Connect Chat 支持的移动聊天界面的示例 SDKs，请查看我们的[用户界面示例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) GitHub 项目。

   请参阅我们的 [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample) 和 [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) 聊天示例，这些示例展示了如何使用适用于 iOS/Android 的 Connect Customer 聊天 SDK 为聊天应用程序提供支持。

1. 查看适用于 [iOS 的Connect Customer 聊天 SDK 和适用于](https://github.com/amazon-connect/amazon-connect-chat-ios) [Android 的Connect Customer 聊天 SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub 页面。该 GitHub 页面包含 API 文档和实施指南，其中解释了所有先决条件和安装步骤。

1. 设置 React Native 集成：利用 [React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) 示例获取有关实施基于 React Native 的解决方案的指导。

1. 如果您对在移动应用程序中设置或使用 Connect Customer 聊天功能 SDK 有任何疑问或问题，可以在[适用于 iOS 的Connect Customer 聊天功能 SDK 问题](https://github.com/amazon-connect/amazon-connect-chat-ios/issues)页面或[适用于 Android 的Connect Customer 聊天功能 SDK 问题](https://github.com/amazon-connect/amazon-connect-chat-android/issues)页面提交问题。如果移动聊天用户界面示例存在问题，您可以在 [Connect Customer 聊天用户界面示例问题](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues)页面提交问题。