共用方式為

使用聊天的 UI 元件

開始使用 Azure 通訊服務 UI 程式庫，將通訊體驗快速整合至您的應用程式中。 本文說明如何將 UI 連結庫聊天複合整合到應用程式中，併為您的應用程式使用者設定體驗。

Azure 通訊服務 UI 連結庫會在您的應用程式中轉譯完整的聊天體驗。 它會負責連線到 Azure 通訊服務 聊天服務，並自動更新參與者的存在。 身為開發人員，您必須決定在應用程式的使用者體驗中要從哪裡開始聊天體驗，並僅建立所需的 Azure 通訊服務資源。

註解

如需 Web UI 連結庫的詳細資訊，請參閱 Web UI 連結庫劇本。

必要條件

存取這些快速入門

存取這些劇本

重要

此 Azure 通訊服務功能目前處於預覽狀態。 預覽中的功能可供公開使用，而且可供所有新的和現有的Microsoft客戶使用。

提供的預覽 API 和 SDK 並無服務等級協定。 建議您不要將其用於生產工作負載。 某些功能可能不受支援，或功能可能會受到限制。

如需詳細資訊，請參閱 Microsoft Azure 預覽版增補使用條款。

在開放原始碼 Azure 通訊服務適用於 Android 的 UI 程式庫中取得適用於聊天的 Azure 範例 Android SDK 的範例 Android 應用程式。

必要條件

設定專案

完成下列各節以設定專案。

建立新的 Android 專案

在 Android Studio 中，建立新的專案。

  1. 在 [檔案] 功能表上，選取 [新增>專案]。

  2. 在 新增專案 上，選取 空白檢視活動 專案範本。

    螢幕擷取畫面顯示 Android Studio 中的 [新增專案] 對話方塊，並選取 [空白檢視活動]。

  3. 選取 [下一步]。

  4. 將專案命名為 UILibraryQuickStart。 針對語言，選取 [Java/Kotlin]。 對於最低 SDK，選擇 API 23：Android 6.0（Marshmallow） 或更新版本。

  5. 選取 [完成]。

    螢幕擷取畫面：顯示新專案選項和已選取的 [完成] 按鈕。

安裝套件

完成下列各節以安裝必要的應用程式套件。

新增相依項目

在您的應用程式層級 UILibraryQuickStart/app/build.gradle 檔案中 (在應用程式資料夾中)，新增下列相依性：

dependencies {
    ...
    implementation 'com.azure.android:azure-communication-ui-chat:+'
    ...
}

新增 Maven 存放庫

將資料庫進行整合需要 Azure 套件儲存庫。

若要新增存放庫：

  1. 在您的專案 Gradle 指令碼中，確保已新增下列存放庫。 針對 Android Studio (2020.*)，repositories 位於 settings.gradle 的 dependencyResolutionManagement(Gradle version 6.8 or greater) 下。 針對舊版 Android Studio (4.*)，repositories 位於專案層級 build.gradle 的 allprojects{} 下。
    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

執行程式碼

在 Android Studio 中，建置並啟動應用程式。

  1. 選取 [啟動]。
  2. 聊天用戶端會加入聊天對話，您可以開始輸入和傳送訊息。
  3. 如果客戶端無法加入線程，而且您看到 chatJoin 失敗的錯誤，請確認使用者的存取令牌有效，且使用者已透過 REST API 呼叫或使用 az 命令行介面新增至聊天對話。

GIF 動畫顯示專案如何在 Android 裝置上執行的範例。

重要

此 Azure 通訊服務功能目前處於預覽狀態。 預覽中的功能可供公開使用，而且可供所有新的和現有的Microsoft客戶使用。

提供的預覽 API 和 SDK 並無服務等級協定。 建議您不要將其用於生產工作負載。 某些功能可能不受支援，或功能可能會受到限制。

如需詳細資訊，請參閱 Microsoft Azure 預覽版增補使用條款。

在開放原始碼的 Azure 通訊服務 iOS UI Library 中獲取 Azure 样本 iOS SDK 聊天應用程式。

必要條件

設定專案

完成下列各節以設定快速入門專案。

建立新的 Xcode 專案

在 Xcode 中，建立新的專案。

  1. 在 [檔案] 功能表上選取 [新增]>[專案]。

  2. 在 [選擇新專案的範本] 上 ，選取 iOS 平臺，然後選取 應用程式 應用程式範本。 快速入門會使用 UIKit 分鏡腳本。

    螢幕擷取畫面：顯示 [Xcode 新增專案] 對話框，其中包含已選取的 iOS 和應用程式範本。

  3. 在 [選擇新項目的選項] 上，針對產品名稱輸入 UILibraryQuickStart。 針對介面，選取 [分鏡腳本]。 快速入門不會建立測試，因此您可以清除 [包含測試] 核取方塊。

    螢幕擷取畫面：顯示 Xcode 中設定新專案的選項。

安裝套件及其相依性

  1. (選擇性) 針對使用 M1 的 MacBook，請在 Xcode 中安裝和啟用 Rosetta。

  2. 在您的專案根目錄中，執行 pod init 以建立 Podfile。 如果您遇到錯誤，請將 CocoaPods 更新為目前的版本。

  3. 將下列程式碼新增至您的 Podfile 中。 將 UILibraryQuickStart 取代為您的專案名稱。

    platform :ios, '14.0'

target 'UILibraryQuickStart' do
    use_frameworks!
    pod 'AzureCommunicationUIChat', '1.0.0-beta.5'
end

  4. 執行 pod install --repo-update。

  5. 在 Xcode 中，開啟產生的 xcworkspace 檔案。

關閉使用者指令碼沙箱功能

連結的程式庫中的某些指令碼會在建置過程中進行檔案寫入。 若要啟用檔案寫入，請在 Xcode 中停用使用者指令碼沙箱功能。

在 Xcode 專案的 [建置設定] 底下，將 [使用者指令碼沙箱] 選項設定為 [否]。 若要尋找設定，請將篩選從 [基本] 變更為 [全部]，或使用搜尋列。

螢幕擷取畫面顯示 [建置設定] 選項，以關閉使用者指令碼沙箱。

初始化複合

若要初始化複合：

  1. 移至 ViewController。

  2. 新增下列程式碼，以初始化聊天的複合元件。 將 <USER_ID> 取代為使用者識別碼。 將 <USER_ACCESS_TOKEN> 替換為您的存取令牌。 使用您的端點 URL 取代 <ENDPOINT_URL>。 將 <THREAD_ID> 替換為您的聊天對話識別碼。 以您的名稱取代 <DISPLAY_NAME>。 (<DISPLAY_NAME> 的字串長度限制為 256 個字元)。

    import UIKit
import AzureCommunicationCommon
import AzureCommunicationUIChat

class ViewController: UIViewController {
    var chatAdapter: ChatAdapter?

    override func viewDidLoad() {
        super.viewDidLoad()

        let button = UIButton()
        var configuration = UIButton.Configuration.filled()
        configuration.contentInsets = NSDirectionalEdgeInsets(top: 10.0, leading: 20.0, bottom: 10.0, trailing: 20.0)
        configuration.baseBackgroundColor = .systemBlue
        button.configuration = configuration
        button.layer.cornerRadius = 10
        button.setTitle("Start Experience", for: .normal)
        button.addTarget(self, action: #selector(startChatComposite), for: .touchUpInside)

        button.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(button)
        button.widthAnchor.constraint(equalToConstant: 200).isActive = true
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

    @objc private func startChatComposite() {
        let communicationIdentifier = CommunicationUserIdentifier("<USER_ID>")
        guard let communicationTokenCredential = try? CommunicationTokenCredential(
            token: "<USER_ACCESS_TOKEN>") else {
            return
        }

        self.chatAdapter = ChatAdapter(
            endpoint: "<ENDPOINT_URL>", identifier: communicationIdentifier,
            credential: communicationTokenCredential,
            threadId: "<THREAD_ID>",
            displayName: "<DISPLAY_NAME>")

        Task { @MainActor in
            guard let chatAdapter = self.chatAdapter else {
                return
            }
            try await chatAdapter.connect()
            let chatCompositeViewController = ChatCompositeViewController(
                with: chatAdapter)

            let closeItem = UIBarButtonItem(
                barButtonSystemItem: .close,
                target: nil,
                action: #selector(self.onBackBtnPressed))
            chatCompositeViewController.title = "Chat"
            chatCompositeViewController.navigationItem.leftBarButtonItem = closeItem

            let navController = UINavigationController(rootViewController: chatCompositeViewController)
            navController.modalPresentationStyle = .fullScreen

            self.present(navController, animated: true, completion: nil)
        }
    }

    @objc func onBackBtnPressed() {
        self.dismiss(animated: true, completion: nil)
        Task { @MainActor in
            self.chatAdapter?.disconnect(completionHandler: { [weak self] result in
                switch result {
                case .success:
                    self?.chatAdapter = nil
                case .failure(let error):
                    print("disconnect error \(error)")
                }
            })
        }
    }
}

  3. 如果您選擇將聊天檢視放在小於螢幕大小的框架中，建議最小寬度為 250，且高度下限為 300。

執行程式碼

若要在 iOS 模擬器上建置並執行您的應用程式，請選取 [產品>執行]。 您也可以使用 （⌘-R） 鍵盤快捷方式。 然後，在模擬器上試用聊天體驗。

  1. 選取 [開始體驗]。
  2. 聊天用戶端會加入聊天對話，您可以開始輸入和傳送訊息。
  3. 如果客戶端無法加入線程，而且您看到 chatJoin 失敗的錯誤，請確認使用者的存取令牌有效，且使用者已透過 REST API 呼叫或使用 az 命令行介面新增至聊天對話。

GIF 動畫示範快速入門 iOS 應用程式的最終外觀與風格。

清除資源

如果您要清除和移除 Azure 通訊服務 訂用帳戶，您可以刪除資源或資源群組。

刪除資源群組也會刪除與其相關聯的任何其他資源。

深入了解如何清除資源。

  • Last updated on