Použití komponent uživatelského rozhraní pro chat

Začněte pracovat s knihovnou uživatelského rozhraní Azure Communication Services, která umožňuje rychlou integraci komunikačních prostředí do vašich aplikací. Tento článek popisuje, jak integrovat chatovací komponenty knihovny uživatelského rozhraní do aplikace a vytvořit prostředí pro uživatele aplikace.

Knihovna uživatelského rozhraní služeb Azure Communication Services vykreslí úplné prostředí chatu přímo ve vaší aplikaci. Postará se o připojení k chatovacím službám Azure Communication Services a automaticky aktualizuje přítomnost účastníka. Jako vývojář musíte rozhodnout, kde v uživatelském prostředí vaší aplikace chcete, aby chatovací prostředí začalo a vytvářelo podle potřeby jenom prostředky Azure Communication Services.

Poznámka:

Další informace o knihovně webového uživatelského rozhraní naleznete v článku o knihovně webových uživatelských rozhraní.

Požadavky

• Účet Azure s aktivním předplatným. Vytvoření účtu zdarma
• Nasazený prostředek Azure Communication Services. Vytvořte prostředek služby Azure Communication.
• Token služby Azure Communication. Viz tento příklad.

Přístup k těmto rychlým startům

• Komponenty uživatelského rozhraní
• Kompozity
• Stavový klient (chat)

Přístup k těmto příběhům

• Komponenty uživatelského rozhraní
• Kompozity
• Stavový klient (chat)

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview. Funkce ve verzi Preview jsou veřejně dostupné a můžou je používat všichni noví a stávající zákazníci Microsoftu.

Rozhraní API a sady SDK verze Preview jsou poskytovány bez smlouvy o úrovni služeb. Doporučujeme je nepoužívat pro produkční úlohy. Některé funkce nemusí být podporované nebo můžou být omezené.

Další informace najdete v dodatečných podmínkách použití pro verze Preview v Microsoft Azure.

Získejte ukázkovou aplikaci pro Android v Azure Samples Android SDK pro chat v otevřeně dostupné uživatelské knihovně rozhraní Azure Communication Services pro Android.

Požadavky

• Účet Azure a aktivní předplatné Azure. Vytvoření účtu zdarma
• Operační systém se systémem Android Studio.
• Nasazený prostředek Azure Communication Services. Poznamenejte si adresu URL koncového bodu.
• Přístupový token a identifikátor uživatele služby Azure Communication Services.
• Vlákno chatu Azure Communication Services s uživatelem z předchozího kroku bylo přidáno do tohoto vlákna.

Nastavení projektu

Dokončete následující části a nastavte projekt.

Vytvoření nového projektu Android

V Android Studiu vytvořte nový projekt.

1. V nabídce Soubor vyberte Nový>projekt.

2. V novém projektu vyberte šablonu projektu Prázdná zobrazení aktivity .

   

3. Vyberte Další.

4. Pojmenujte projekt UILibraryQuickStart. Jako jazyk vyberte Java/Kotlin. Pro minimální sadu SDK vyberte rozhraní API 23: Android 6.0 (Marshmallow) nebo novější.

5. Vyberte Dokončit.

   

Instalace balíčků

Podle následujících částí nainstalujte požadované balíčky aplikací.

Přidání závislosti

Do souboru UILibraryQuickStart/app/build.gradle na úrovni aplikace (ve složce aplikace) přidejte následující závislost:

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

Přidání úložišť Maven

K integraci knihovny se vyžaduje úložiště balíčků Azure.

Přidání úložiště:

1. Ve skriptech Gradle projektu se ujistěte, že jsou přidána následující úložiště. Pro Android Studio (2020.*) je repositories v části settings.gradle, pod dependencyResolutionManagement(Gradle version 6.8 or greater). Pro starší verze Android Studia (4.*) repositories je na úrovni build.gradleprojektu v části allprojects{}.

Groovy

    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

Kotlin

    // dependencyResolutionManagement 
    repositories {
        maven {
            url = uri("https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1")
        }
    }

1. Synchronizujte projekt se soubory Gradle. Pokud chcete projekt synchronizovat, vyberte v nabídce Soubor možnost Synchronizovat projekt se soubory Gradle.

Přidání tlačítka pro activity_main.xml

Do souboru rozložení app/src/main/res/layout/activity_main.xml přidejte následující kód, který vytvoří tlačítko pro spuštění složeného souboru:

<?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>

Inicializace složeného

Inicializace složeného kódu:

1. Přejděte na MainActivity .

2. Přidejte následující kód pro inicializaci složených komponent pro volání. Nahraďte řetězcové hodnoty vlastností (kotlin) nebo funkcí (java) pro endpoint, acsIdentity, displayName, accessToken, a ThreadId. Nahraďte endpoint adresou URL vašeho prostředku poskytovanou službou Azure Communication Services. Nahraďte acsIdentity a accessToken hodnotami poskytnutými službou Azure Communication Services při vytvoření přístupového tokenu a použijte relevantní displayName. Nahraďte ThreadId hodnotou vrácenou při vytváření vlákna. Před pokusem o spuštění ukázky rychlého startu přidejte uživatele do vlákna prostřednictvím volání rozhraní REST API nebo příkazu az command-line interface client. V opačném případě je klientovi odepřen přístup k připojení vlákna.

Kotlin

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()
        }
    }
}

Java

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();
            }
        });
    }
}

Spuštění kódu

V Android Studiu sestavte a spusťte aplikaci.

1. Vyberte Spustit.
2. Chatovací klient se připojí k vláknu chatu a můžete začít psát a posílat zprávy.
3. Pokud se klient nemůže připojit k vláknu a zobrazí se chyby chatJoin selhání, ověřte, že přístupový token uživatele je platný a že uživatel byl přidán do vlákna chatu voláním rozhraní REST API nebo pomocí příkazového řádku az.

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview. Funkce ve verzi Preview jsou veřejně dostupné a můžou je používat všichni noví a stávající zákazníci Microsoftu.

Rozhraní API a sady SDK verze Preview jsou poskytovány bez smlouvy o úrovni služeb. Doporučujeme je nepoužívat pro produkční úlohy. Některé funkce nemusí být podporované nebo můžou být omezené.

Další informace najdete v dodatečných podmínkách použití pro verze Preview v Microsoft Azure.

Získejte ukázkovou aplikaci iOS z Azure Samples iOS SDK pro chat v open-source knihovně uživatelského rozhraní pro iOS služby Azure Communication Services.

Požadavky

• Účet Azure a aktivní předplatné Azure. Vytvoření účtu zdarma
• Mac se systémem Xcode 13 nebo novějším a platným certifikátem vývojáře nainstalovaným v klíčence. CocoaPods musí být také nainstalován pro načtení závislostí.
• Nasazený prostředek Azure Communication Services. Poznamenejte si adresu URL koncového bodu.
• Přístupový token a identifikátor uživatele služby Azure Communication Services.
• Vlákno chatu Azure Communication Services Přidejte uživatele, který jste vytvořili v předchozím kroku, do tohoto vlákna chatu.

Nastavení projektu

Dokončete následující části a nastavte projekt rychlého startu.

Vytvoření nového projektu Xcode

V Xcode vytvořte nový projekt.

1. V nabídce Soubor vyberte Nový>Projekt.

2. V části Zvolte šablonu pro nový projekt, vyberte platformu iOS a vyberte šablonu aplikace. Rychlý start používá scénáře UIKit.

   

3. V části Zvolte možnosti pro nový projekt zadejte název produktu UILibraryQuickStart. Pro rozhraní vyberte Storyboard. Rychlý start nevytvoří testy, takže můžete zrušit zaškrtnutí políčka Zahrnout testy .

   

Instalace balíčku a závislostí

1. (Volitelné) Pro MacBook s M1 nainstalujte a povolte Rosetta v Xcode.

2. V kořenovém adresáři projektu spusťte pod init příkaz pro vytvoření souboru Podfile. Pokud dojde k chybě, aktualizujte CocoaPods na aktuální verzi.

3. Do souboru Podfile přidejte následující kód. Nahraďte UILibraryQuickStart názvem projektu.

   platform :ios, '14.0'
   
   target 'UILibraryQuickStart' do
       use_frameworks!
       pod 'AzureCommunicationUIChat', '1.0.0-beta.5'
   end
   

4. Spusťte pod install --repo-update.

5. V Xcode otevřete vygenerovaný soubor xcworkspace .

Vypnutí sandboxu uživatelských skriptů

Některé skripty v propojených knihovnách zapisují soubory během procesu sestavení. Pokud chcete povolit zápis souborů, zakažte sandboxing uživatelských skriptů v Xcode.

V projektu Xcode v části Nastavení sestavení nastavte možnost Sandboxing uživatelského skriptu na Ne. Pokud chcete nastavení najít, změňte filtr ze Základní na Vše nebo použijte panel hledání.

Inicializace složeného

Inicializace složeného kódu:

1. Přejděte na ViewController .

2. Přidejte následující kód pro inicializaci složených komponent pro chat. Nahraďte <USER_ID> identifikátorem uživatele. Nahraďte <USER_ACCESS_TOKEN> přístupovým tokenem. Nahraďte <ENDPOINT_URL> adresou URL koncového bodu. Nahraďte <THREAD_ID> ID vlákna chatu. Nahraďte <DISPLAY_NAME> svým jménem. (Limit délky řetězce pro <DISPLAY_NAME> je 256 znaků).

   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. Pokud se rozhodnete umístit zobrazení chatu do rámce, který je menší než velikost obrazovky, doporučujeme minimální šířku 250 a minimální výšku 300.

Spuštění kódu

Pokud chcete sestavit a spustit aplikaci v simulátoru iOS, vyberte >. Můžete také použít klávesovou zkratku (⌘-R). Pak si vyzkoušejte prostředí chatu v simulátoru.

1. Vyberte Spustit prostředí.
2. Chatovací klient se připojí k vláknu chatu a můžete začít psát a posílat zprávy.
3. Pokud se klient nemůže připojit k vláknu a zobrazují se chyby typu chatJoin, ověřte, že je přístupový token uživatele platný a že uživatel byl přidán do vlákna chatu pomocí volání rozhraní REST API nebo přes rozhraní příkazového řádku az.

Uvolnění prostředků

Pokud chcete vyčistit a odebrat předplatné služby Azure Communication Services, můžete odstranit prostředek nebo skupinu prostředků.

Odstraněním skupiny prostředků se odstraní také všechny ostatní prostředky, které jsou k ní přidružené.

Přečtěte si další informace o čištění prostředků.