Rychlý start: Přidání chatu s knihovnou uživatelského rozhraní

Článek
11/07/2024

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í. V tomto rychlém startu se dozvíte, jak integrovat složené konverzace knihovny uživatelského rozhraní do aplikace a nastavit 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ář se 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:

Podrobnou dokumentaci a rychlé starty týkající se knihovny webového uživatelského rozhraní najdete 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 Azure Communication Services.
Token služby Azure Communication Services. Viz tento příklad.

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

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

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview.

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 mít omezené možnosti.

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

Získejte ukázkovou aplikaci pro Android pro tento rychlý start v opensourcové knihovně uživatelského 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, které jste do něj přidali.

Nastavení projektu

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

Vytvoření nového projektu Android

V Android Studiu vytvořte nový projekt.

V nabídce Soubor vyberte Nový>projekt.
V novém projektu vyberte šablonu projektu Prázdná aktivita .
Vyberte Další.
Při prázdné aktivitě pojmenujte projekt UILibraryQuickStart. Jako jazyk vyberte Java/Kotlin. Pro minimální sadu SDK vyberte rozhraní API 23: Android 6.0 (Marshmallow) nebo novější.
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ě:

Ve skriptech Gradle projektu se ujistěte, že jsou přidána následující úložiště. Pro Android Studio (2020.*) repositories je v settings.gradlečásti dependencyResolutionManagement(Gradle version 6.8 or greater). Pro starší verze Android Studia (4.*) repositories je na úrovni build.gradleprojektu v části allprojects{}.
```
// dependencyResolutionManagement
repositories {
    ...
    maven {
        url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
    }
    ...
}
```
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:

Přejděte na MainActivity .
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, jak je poskytuje služba Azure Communication Services. Nahraďte acsIdentity hodnoty poskytované službou Azure Communication Services při vytváření přístupového tokenu a accessToken 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
Java

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

Spuštění kódu

V Android Studiu sestavte a spusťte aplikaci.

Vyberte Spustit prostředí.
Chatovací klient se připojí k vláknu chatu a můžete začít psát a posílat zprávy.
Pokud se klient nemůže připojit k vláknu a zobrazí chatJoin se chyby, které selhaly, 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í rozhraní příkazového az řádku.

Animace ve formátu GIF, která ukazuje příklad spuštění projektu na zařízení s Androidem.

Důležité

Tato funkce služeb Azure Communication Services je aktuálně ve verzi Preview.

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

Získejte ukázkovou aplikaci pro iOS pro tento rychlý start v opensourcové knihovně uživatelského rozhraní služeb Azure Communication Services pro iOS.

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.

V nabídce Soubor vyberte Nový>Projekt.
V části Zvolte šablonu pro nový projekt, vyberte platformu pro iOS a vyberte šablonu aplikace aplikace . Rychlý start používá scénáře UIKit.
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í

(Volitelné) Pro MacBook s M1 nainstalujte a povolte Rosetta v Xcode.
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.

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

Spusťte pod install --repo-update.
V Xcode otevřete vygenerovaný soubor xcworkspace .

Vypnutí bitcode

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

Snímek obrazovky znázorňující možnost Nastavení sestavení pro vypnutí bitcode

Inicializace složeného

Inicializace složeného kódu:

Přejděte na ViewController .

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 je <DISPLAY_NAME> 256 znaků).

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

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 Spustit produkt>. Můžete také použít klávesovou zkratku (⌘-R). Pak si vyzkoušejte prostředí chatu v simulátoru.

Vyberte Spustit prostředí.
Chatovací klient se připojí k vláknu chatu a můžete začít psát a posílat zprávy.
Pokud se klient nemůže připojit k vláknu a zobrazí chatJoin se chyby, které selhaly, 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í rozhraní příkazového řádku az.

Animace GIF, která ukazuje konečný vzhled a chování aplikace pro iOS pro rychlý start

Vyčiště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ů.

Sdílet prostřednictvím

Rychlý start: Přidání chatu s knihovnou uživatelského rozhraní

Požadavky

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

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

Požadavky

Nastavení projektu

Vytvoření nového projektu Android

Instalace balíčků

Přidání závislosti

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

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

Inicializace složeného

Spuštění kódu

Požadavky

Nastavení projektu

Vytvoření nového projektu Xcode

Instalace balíčku a závislostí

Vypnutí bitcode

Inicializace složeného

Spuštění kódu

Vyčištění prostředků

Váš názor

Další materiály