Краткое руководство. Добавление чата с библиотекой пользовательского интерфейса

Необходимые компоненты

• Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно .
• Развернутый ресурс Служб коммуникации Azure. Создайте ресурс Службы коммуникации Azure.
• Маркер Службы коммуникации Azure. Дополнительные сведения см. в этом примере.

Доступ к этим кратким руководствам

• Компоненты пользовательского интерфейса
• Композиты
• Клиент с отслеживанием состояния (чат)

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

• Компоненты пользовательского интерфейса
• Композиты
• Клиент с отслеживанием состояния (чат)

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

Необходимые компоненты

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

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

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

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

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

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

2. В новом проекте выберите шаблон проекта "Пустое действие ".

   

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"
       }
       ...
   }
   

2. Синхронизируйте проект с файлами Gradle. Чтобы синхронизировать проект, в меню "Файл " выберите "Синхронизировать проект с файлами Gradle".

Добавление кнопки для activity_main.xml

В файле макета app/src/main/res/layout/activity_main.xml добавьте следующий код, чтобы создать кнопку, чтобы запустить составной элемент:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/startButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Launch"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Инициализация составного

Чтобы инициализировать составной элемент, выполните следующие действия.

1. Переход к MainActivity.

2. Добавьте следующий код, чтобы инициализировать составные компоненты для вызова. Замените строковые значения свойств () или функций (kotlin) для endpoint, , , displayNameacsIdentityи accessTokenThreadId.java Замените endpoint URL-адрес ресурса, как указано Службы коммуникации Azure. Замените acsIdentity и accessToken на значения, предоставленные Службы коммуникации Azure при создании маркера доступа, и используйте соответствующие displayNameзначения. Замените ThreadId значение, возвращаемое при создании потока. Добавьте пользователя в поток через вызов REST API или клиент интерфейса az command-line перед выполнением примера краткого руководства. В противном случае клиенту запрещен доступ для присоединения к потоку.

package com.example.uilibraryquickstart

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import com.azure.android.communication.common.CommunicationTokenCredential
import com.azure.android.communication.common.CommunicationTokenRefreshOptions
import com.azure.android.communication.common.CommunicationUserIdentifier
import com.azure.android.communication.ui.chat.ChatAdapter
import com.azure.android.communication.ui.chat.ChatAdapterBuilder
import com.azure.android.communication.ui.chat.presentation.ChatThreadView

class MainActivity : AppCompatActivity() {
    private lateinit var chatAdapter: ChatAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val startButton = findViewById<Button>(R.id.startButton)
        startButton.setOnClickListener { l: View? ->
            val communicationTokenRefreshOptions =
                CommunicationTokenRefreshOptions(
                    { accessToken }, true
                )
            val communicationTokenCredential =
                CommunicationTokenCredential(communicationTokenRefreshOptions)
            chatAdapter = ChatAdapterBuilder()
                .endpoint(endpoint)
                .credential(communicationTokenCredential)
                .identity(CommunicationUserIdentifier(acsIdentity))
                .displayName(displayName)
                .threadId(threadId)
                .build()
            try {
                chatAdapter.connect(this@MainActivity).get()
                val chatView: View = ChatThreadView(this@MainActivity, chatAdapter)
                addContentView(
                    chatView,
                    ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                )
            } catch (e: Exception) {
                var messageCause: String? = "Unknown error"
                if (e.cause != null && e.cause!!.message != null) {
                    messageCause = e.cause!!.message
                }
                showAlert(messageCause)
            }
        }
    }

    /**
     *
     * @return String endpoint URL from Azure Communication Services Admin UI, "https://example.domain.com/"
     */
    private val endpoint: String?
        get() = "https://example.domain.com/"

    /**
     *
     * @return String identity of the user joining the chat
     * Looks like "8:acs:a6aada1f-0b1e-47ac-866a-91aae00a1c01_00000015-45ee-bad7-0ea8-923e0d008a89"
     */
    private val acsIdentity: String?
        get() = ""

    /**
     *
     * @return String display name of the user joining the chat
     */
    private val displayName: String?
        get() = ""

    /**
     *
     * @return String secure Azure Communication Services access token for the current user
     */
    private val accessToken: String?
        get() = ""

    /**
     *
     * @return String id of Azure Communication Services chat thread to join
     * Looks like "19:AVNnEll25N4KoNtKolnUAhAMu8ntI_Ra03saj0Za0r01@thread.v2"
     */
    private val threadId: String?
        get() = ""

    fun showAlert(message: String?) {
        runOnUiThread {
            AlertDialog.Builder(this@MainActivity)
                .setMessage(message)
                .setTitle("Alert")
                .setPositiveButton(
                    "OK"
                ) { _, i -> }
                .show()
        }
    }
}

package com.example.uilibraryquickstart;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import com.azure.android.communication.common.CommunicationTokenCredential;
import com.azure.android.communication.common.CommunicationTokenRefreshOptions;
import com.azure.android.communication.common.CommunicationUserIdentifier;
import com.azure.android.communication.ui.chat.ChatAdapter;
import com.azure.android.communication.ui.chat.ChatAdapterBuilder;
import com.azure.android.communication.ui.chat.presentation.ChatThreadView;

public class MainActivity extends AppCompatActivity {
    private ChatAdapter chatAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button startButton = findViewById(R.id.startButton);
        startButton.setOnClickListener(l -> {
            CommunicationTokenRefreshOptions communicationTokenRefreshOptions =
                    new CommunicationTokenRefreshOptions(this::accessToken, true);
            CommunicationTokenCredential communicationTokenCredential =
                    new CommunicationTokenCredential(communicationTokenRefreshOptions);
            chatAdapter = new ChatAdapterBuilder()
                    .endpoint(endpoint())
                    .credential(communicationTokenCredential)
                    .identity(new CommunicationUserIdentifier(acsIdentity()))
                    .displayName(displayName())
                    .threadId(threadId())
                    .build();
            try {
                chatAdapter.connect(MainActivity.this).get();
                View chatView = new ChatThreadView(MainActivity.this, chatAdapter);
                addContentView(chatView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
            }
            catch (Exception e){
                String messageCause = "Unknown error";
                if (e.getCause() != null && e.getCause().getMessage() != null){
                    messageCause = e.getCause().getMessage();
                }
                showAlert(messageCause);
            }
        });
    }
    /**
     *
     * @return String endpoint URL from Azure Communication Services Admin UI, "https://example.domain.com/"
     */
    private String endpoint(){
        return "https://example.domain.com/";
    }
    /**
     *
     * @return String identity of the user joining the chat
     * Looks like "8:acs:a6aada1f-0b1e-47ac-866a-91aae00a1c01_00000015-45ee-bad7-0ea8-923e0d008a89"
     */
    private String acsIdentity(){
        return "";
    }
    /**
     *
     * @return String display name of the user joining the chat
     */
    private String displayName(){
        return "";
    }
    /**
     *
     * @return String secure Azure Communication Services access token for the current user
     */
    private String accessToken(){
        return "";
    }
    /**
     *
     * @return String id of Azure Communication Services chat thread to join
     * Looks like "19:AVNnEll25N4KoNtKolnUAhAMu8ntI_Ra03saj0Za0r01@thread.v2"
     */
    private String threadId(){
        return "";
    }
    void showAlert(String message){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                new AlertDialog.Builder(MainActivity.this)
                        .setMessage(message)
                        .setTitle("Alert")
                        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {
                            }
                        })
                        .show();
            }
        });
    }
}

Выполнение кода

В Android Studio создайте и запустите приложение.

1. Выберите "Начать работу".
2. Клиент чата присоединяется к потоку чата, и вы можете начать вводить и отправлять сообщения.
3. Если клиент не может присоединиться к потоку и вы видите chatJoin сбои, убедитесь, что маркер доступа пользователя действителен и что пользователь был добавлен в поток чата по вызову REST API или с помощью az интерфейса командной строки.

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

Необходимые компоненты

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

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

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

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

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

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

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

   

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

   

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

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.4'
   end
   

4. Запустите pod install --repo-update.

5. В Xcode откройте созданный файл xcworkspace .

Отключение bitcode

В проекте Xcode в разделе "Параметры сборки" задайте для параметра Enable Bitcode значение No. Чтобы найти параметр, измените фильтр с "Базовый" на "Все" или используйте панель поиска.

Инициализация составного

Чтобы инициализировать составной элемент, выполните следующие действия.

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()
           button.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
           button.layer.cornerRadius = 10
           button.backgroundColor = .systemBlue
           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 command-line.