本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將 Amazon Connect 聊天整合至行動應用程式
<a name="integrate-chat-with-mobile"></a>

本主題說明如何將 Amazon Connect Chat 整合到您的行動應用程式中。您可以使用下列其中一個選項：
+ [WebView 整合](#webview)
+ [適用於 iOS 和 Android 的Amazon Connect Chat SDK](#integrate-chat-with-mobile-sdks-for-mobile)
+ [React Native 整合](#react-native-integration)

使用 Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API 起始聯絡。

**Topics**
+ [要使用的整合選項](#integrate-options)
+ [Amazon Connect 聊天整合工作流程](#integrate-chat-with-mobile-workflow)
+ [開始使用 Amazon Connect 聊天整合](#integrate-chat-with-mobile-getting-started)

## 要使用的整合選項
<a name="integrate-options"></a>

本節提供各個整合選項的描述，以協助您決定解決方案應使用哪個選項。

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

Amazon Connect Chat WebView 整合可讓您以最低的開發工作量，將完整的聊天體驗嵌入行動應用程式中。此方法在 Android 和 iOS 分別使用 `WebView` 與 `WKWebView`，以提供順暢且全面的聊天介面。團隊若想要以快速、立即可用的解決方案來整合聊天功能，而無需大量自訂，就非常適用此方法。

此方法可確保安全通訊，並且使用 Web 型 Amazon Connect 聊天介面。不過，您必須設定應用程式以正確處理 Cookie 和 JavaScript。

如需實作 WebView 整合的詳細資訊，請參閱 Amazon Connect 聊天 [UI 範例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) GitHub 儲存庫。

**建議**：若要快速開發並盡可能減輕維護工作，同時確保全面的聊天功能，WebView 型整合非常適用。

### Amazon Connect 適用於 Mobile SDKs
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

適用於 iOS 和 Android 的 Amazon Connect 聊天開發套件可簡化原生行動應用程式的 Amazon Connect 聊天整合。 SDKs 這類 SDK 有助於處理用戶端聊天邏輯，以及類似於 Amazon Connect ChatJS Library 的後端通訊。

 Amazon Connect 聊天SDKs包裝 Amazon Connect 參與者服務 APIs，並抽象化聊天工作階段和 WebSocket 的管理。這可讓您專注於使用者介面和體驗，同時依賴 Amazon Connect 聊天開發套件與所有後端服務互動。此方法仍要求您使用自己的聊天後端來呼叫 `StartChatContact` API Amazon Connect 以啟動聯絡。
+ 如需 Swift 型 iOS SDK 的詳細資訊，請參閱[適用於 iOS 的Amazon Connect Chat SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) GitHub 頁面。
+ 如需 Kotlin 型 Android SDK 的詳細資訊，請參閱[適用於 Android 的Amazon Connect Chat SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub 頁面。

**優點**：原生 SDK 可實現強大的功能和高效能，因此非常適用於需要深度自訂和順暢使用者體驗的應用程式。

### React Native 整合
<a name="react-native-integration"></a>

Amazon Connect Chat React Native 整合提供了跨平台解決方案。它可讓團隊使用共用的程式碼庫為 Android 和 iOS 建置聊天功能。此方法可兼顧自訂和開發效率，同時利用 React Native 的功能來建立強大的行動應用程式。

此整合使用原生橋接器來存取進階功能，並確保在各平台間能夠有一致的效能和使用者體驗。使用 `react-native-websocket` 之類的程式庫與 `axios` 的 API 呼叫，可更輕鬆地實作 WebSocket 通訊等重要功能。

**最適用於**：想要盡可能重複使用程式碼，同時保有功能彈性的團隊。

## Amazon Connect 聊天整合工作流程
<a name="integrate-chat-with-mobile-workflow"></a>

下圖顯示使用行動應用程式的客戶與客服人員之間的程式設計流程。圖表中的編號文字對應至影像下方的編號文字。

![\[顯示 Amazon Connect 聊天程式流程的圖表。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**在圖表中**

1. 當客戶在行動應用程式中開始聊天時，應用程式應該 Amazon Connect 使用 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API 傳送請求至 。此作業需要特定參數，例如[執行個體](amazon-connect-instances.md)的 API 端點和 ID 與[聯絡](connect-contact-flows.md)流程，以驗證和起始聊天。

1. `StartChatContact` API 與您的後端系統互動，以取得參與者權杖和聯絡人 ID，作為聊天工作階段的唯一識別碼。

1. 應用程式 UI 將 `StartChatContact` 回應傳遞至行動 SDK，使 SDK 能夠與 [Amazon Connect 參與者服務](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html)正確通訊，並設定客戶的聊天工作階段。

1. SDK 向 UI 公開 [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) 物件，其中包含與聊天工作階段互動的易用方法。

1. 在幕後，SDK 會使用 [AWS SDK](https://aws.amazon.com/developer/tools/) 與 [Amazon Connect 參與者服務](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html)互動。與 Amazon Connect 參與者服務的通訊會負責處理所有客戶與聊天工作階段的互動。其中包括 `CreateParticipantConnection`、`SendMessage`、`GetTranscript` 或 `DisconnectParticipant` 等動作。

1. SDK 也會管理接收客服人員的訊息、事件和附件所需的 WebSocket 連線。這全都會由 SDK 處理和剖析，並以易於使用的結構呈現至 UI。

## 開始使用 Amazon Connect 聊天整合
<a name="integrate-chat-with-mobile-getting-started"></a>

下列步驟和資源將協助您開始將 Amazon Connect 聊天整合到原生行動應用程式：

1. 您可以查看我們在 GitHub 上的 [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) 堆疊，提供呼叫 StartChatContact 所需的後端。

1. 如需相關範例示範如何建置由 Amazon Connect Chat SDK 提供支援的行動聊天 UI，請參閱我們的 [UI 範例](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 的 Amazon Connect 聊天開發套件為聊天應用程式提供動力。

1. 查看[適用於 iOS 的Amazon Connect Chat SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) 和[適用於 Android 的Amazon Connect Chat 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. 如果對於在行動應用程式上設定或使用 Amazon Connect Chat SDK 有任何疑問或問題，您可以在[適用於 iOS 的Amazon Connect Chat SDK 問題](https://github.com/amazon-connect/amazon-connect-chat-ios/issues)頁面或[適用於 Android 的Amazon Connect Chat SDK 問題](https://github.com/amazon-connect/amazon-connect-chat-android/issues)頁面上提出問題。如果行動聊天 UI 範例有問題，您可以在 [Amazon Connect 聊天 UI 範例問題](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues)頁面上提出問題。