Поделиться через


Использование компонентов пользовательского интерфейса для чата

Начните работу с библиотекой пользовательского интерфейса Службы коммуникации Azure, чтобы быстро интегрировать взаимодействие с приложениями. В этой статье описывается интеграция составных элементов чата библиотеки пользовательского интерфейса в приложение и настройка интерфейса для пользователей приложения.

Библиотека пользовательского интерфейса Azure Communication Services предоставляет все возможности чата прямо в вашем приложении. Он заботится о подключении к службам чата Службы коммуникации Azure и автоматически обновляет присутствие участника. Разработчику необходимо решить, где в пользовательском интерфейсе приложения вы хотите начать чат и создать только ресурсы Служб коммуникации Azure по мере необходимости.

Предварительные условия

Получите доступ к этим кратким руководствам

Доступ к этим сборникам историй

Внимание

Эта функция Службы коммуникации Azure сейчас доступна в предварительной версии. Функции в предварительной версии общедоступны и могут использоваться всеми новыми и существующими клиентами Майкрософт.

Предварительные версии API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Рекомендуется не использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или могут быть ограничены.

Для получения дополнительной информации см. Дополнительные условия использования для предварительных версий Microsoft Azure.

Получите пример приложения Android, доступного в SDK для образцов Android для чата в Библиотеке пользовательского интерфейса с открытым кодом для Android Служб коммуникации Azure.

Предварительные условия

Настройка проекта

Выполните следующие разделы, чтобы настроить проект.

Создание нового проекта Android

В Android Studio создайте новый проект.

  1. В меню "Файл" выберите "Создать>проект".

  2. В New Project выберите шаблон проекта Empty Views Activity

    Снимок экрана: диалоговое окно

  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 сейчас доступна в предварительной версии. Функции в предварительной версии общедоступны и могут использоваться всеми новыми и существующими клиентами Майкрософт.

Предварительные версии API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Рекомендуется не использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или могут быть ограничены.

Для получения дополнительной информации см. Дополнительные условия использования для предварительных версий Microsoft Azure.

Получите образец приложения iOS из пакета SDK Azure Samples для чата в открытой библиотеке пользовательского интерфейса Служб коммуникации Azure для iOS.

Предварительные условия

  • Учетная запись Azure и активная подписка Azure. Создайте учетную запись бесплатно .
  • Компьютер Mac под управлением Xcode 13 или более поздней версии и действительный сертификат разработчика, установленный в цепочке ключей. Кроме того, для получения зависимостей необходимо установить CocoaPods.
  • Развернутый ресурс службы коммуникации Azure. Обратите внимание на URL-адрес конечной точки.
  • Маркер доступа Службы коммуникации Azure и идентификатор пользователя.
  • Поток чата Службы коммуникации Azure. Добавьте пользователя, созданного на предыдущем шаге, в этот поток чата.

Настройка проекта

Выполните следующие разделы, чтобы настроить проект быстрого запуска.

Создание проекта Xcode

В Xcode создайте новый проект.

  1. В меню Файл выберите Создать>Проект.

  2. Чтобы выбрать шаблон для нового проекта, выберите платформу iOS и выберите шаблон приложения. В кратком руководстве используются сториборды из UIKit.

    Снимок экрана: диалоговое окно нового проекта Xcode с iOS и выбранным шаблоном приложения.

  3. В поле "Выбор параметров для нового проекта" введите UILibraryQuickStart. Для интерфейса выберите "Раскадровка". Краткая инструкция не создает тесты, поэтому вы можете снять флажок «Включить тесты».

    Снимок экрана: настройка новых параметров проекта в Xcode.

Установка пакета и зависимостей

  1. (Необязательно) Для MacBook с M1 установите и включите Rosetta в Xcode.

  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> маркер доступа. Замените <ENDPOINT_URL> 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, можно удалить ресурс или группу ресурсов.

При удалении группы ресурсов также удаляются все связанные с ней ресурсы.

См. сведения об очистке ресурсов.