Rövid útmutató: Csevegés hozzáadása felhasználói felületi kódtárral

Ismerkedjen meg az Azure Communication Services felhasználói felületi kódtárával, hogy gyorsan integrálhassa a kommunikációs szolgáltatásokat az alkalmazásokba. Ebben a rövid útmutatóban megtudhatja, hogyan integrálhatja a felhasználói felületi kódtár csevegési összetettségeit egy alkalmazásba, és hogyan állíthatja be az alkalmazás felhasználóinak nyújtott élményt.

A Communication Services felhasználói felületi kódtára teljes csevegési élményt nyújt közvetlenül az alkalmazásban. Gondoskodik az Azure Communication Services csevegési szolgáltatásaihoz való csatlakozásról, és automatikusan frissíti a résztvevők jelenlétét. Fejlesztőként aggódnia kell amiatt, hogy az alkalmazás felhasználói élményében hol szeretné elindítani a csevegési felületet, és csak szükség szerint hozza létre az Azure Communication Services-erőforrásokat.

Megjegyzés:

A webes felhasználói felületi kódtár részletes dokumentációjához és rövid útmutatóihoz látogasson el a Webes felhasználói felületi könyvtár mesekönyvbe.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Fiók ingyenes létrehozása.
• Üzembe helyezett Communication Services-erőforrás. Hozzon létre egy Communication Services-erőforrást.
• Azure Communication Services-jogkivonat. Lásd ezt a példát

A következő rövid útmutatók érhetők el

• Felhasználói felület összetevői
• Kompozitok
• Állapotalapú ügyfél (csevegés)

Fontos

Az Azure Communication Services ezen funkciója jelenleg előzetes verzióban érhető el.

Az előzetes verziójú API-k és SDK-k szolgáltatásszintű szerződés nélkül érhetők el. Javasoljuk, hogy éles számítási feladatokhoz ne használja őket. Előfordulhat, hogy egyes funkciók nem támogatottak, vagy korlátozott képességekkel rendelkeznek.

További információkért tekintse át a Microsoft Azure Előzetes verzió kiegészítő használati feltételeit.

Ehhez a rövid útmutatóhoz szerezze be a minta Android-alkalmazást az Android nyílt forráskód Azure Communication Services felhasználói felületi kódtárában.

Előfeltételek

• Egy Azure-fiók és egy aktív Azure-előfizetés. Fiók ingyenes létrehozása.
• Android Studiót futtató operációs rendszer.
• Egy üzembe helyezett Azure Communication Services-erőforrás, jegyezze fel a végpont URL-címét.
• Egy Azure Communication Services hozzáférési jogkivonat és felhasználói azonosító.
• Egy Azure Communication Services-csevegési szál a fenti felhasználóval.

A projekt előkészítése

A gyorsútmutató-projekt beállításához töltse ki az alábbi szakaszokat.

Új Android-projekt létrehozása

Az Android Studióban hozzon létre egy új projektet:

1. A Fájl menüben válassza az Új>projekt lehetőséget.

2. Az Új projektben válassza az Üres tevékenység projektsablont.

   

3. Válassza a Következő lehetőséget.

4. Az Üres tevékenység területen nevezze el a projekt UILibraryQuickStart nevét. Nyelv esetén válassza a Java/Kotlin lehetőséget. A minimális SDK-hoz válassza az API 23: Android 6.0 (Marshmallow) vagy újabb verzióját.

5. Select Finish.

   

A csomagok telepítése

Töltse ki a következő szakaszokat a szükséges alkalmazáscsomagok telepítéséhez.

Függőség hozzáadása

Az alkalmazásszintű UILibraryQuickStart/app/build.gradle fájlban (az alkalmazásmappában) adja hozzá a következő függőséget:

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

Maven-adattárak hozzáadása

A kódtár integrálásához az Azure-csomag adattára szükséges:

Az adattár hozzáadása:

1. A projekt Gradle-szkriptjeiben győződjön meg arról, hogy a következő adattárak vannak hozzáadva. Az Android Studio (2020.*) repositories az alatt dependencyResolutionManagement(Gradle version 6.8 or greater)találhatósettings.gradle. Az Android Studio korábbi verziói (4.*) repositories projektszinten build.gradle, a allprojects{}.

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

2. Szinkronizálja a projektet a Gradle-fájlokkal. A projekt szinkronizálásához a Fájl menüben válassza a Projekt szinkronizálása Gradle-fájlokkal lehetőséget.

Gomb hozzáadása a activity_main.xml fájlhoz

Az app/src/main/res/layout/activity_main.xml elrendezésfájlban adja hozzá a következő kódot, hogy létrehozhasson egy gombot az összetettség elindításához:

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

Az összetett inicializálása

Az összetett inicializálása:

1. Go to MainActivity.

2. Adja hozzá a következő kódot az összetett összetevők meghíváshoz való inicializálásához. Cserélje le a tulajdonságok (kotlin) vagy függvények (java) sztringértékét endpointa , acsIdentityés displayNameaccessTokenThreadIda . Cserélje le endpoint az erőforrás URL-címét az Azure Communication Services által biztosított módon. Cserélje le és accessToken cserélje le acsIdentity az Azure Communication Services által a hozzáférési jogkivonat létrehozásakor és a megfelelő displayName használatakor megadott értékeket. Cserélje le ThreadId a szál létrehozásakor visszaadott értékre. Ne felejtse el hozzáadni a felhasználót a szálhoz REST API-hívással, vagy az az parancssori felületi ügyfélalkalmazással, mielőtt megpróbálná futtatni a gyorsindítási mintát, vagy az ügyfél nem fér hozzá a szálhoz.

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

A kód futtatása

Az Android Studióban hozza létre és indítsa el az alkalmazást:

1. Válassza a Start Felület lehetőséget.
2. A csevegőügyfél csatlakozik a csevegési szálhoz, és megkezdheti az üzenetek beírását és küldését
3. Ha az ügyfél nem tud csatlakozni a szálhoz, és a chatJoin meghiúsult hibaüzeneteket lát, ellenőrizze, hogy a felhasználó hozzáférési jogkivonata érvényes-e, és hogy a felhasználó REST API-hívással vagy a parancssori felület használatával lett-e hozzáadva a az csevegési szálhoz.

Fontos

Az Azure Communication Services ezen funkciója jelenleg előzetes verzióban érhető el.

Az előzetes verziójú API-k és SDK-k szolgáltatásszintű szerződés nélkül érhetők el. Javasoljuk, hogy éles számítási feladatokhoz ne használja őket. Előfordulhat, hogy egyes funkciók nem támogatottak, vagy korlátozott képességekkel rendelkeznek.

További információkért tekintse át a Microsoft Azure Előzetes verzió kiegészítő használati feltételeit.

Ehhez a rövid útmutatóhoz szerezze be a minta iOS-alkalmazást az iOS-hez készült Nyílt forráskód Azure Communication Services felhasználói felületi kódtárában.

Előfeltételek

• Egy Azure-fiók és egy aktív Azure-előfizetés. Fiók ingyenes létrehozása.
• Egy Xcode 13-at vagy újabb verziót futtató Mac gép, valamint egy érvényes fejlesztői tanúsítvány, amely telepítve van a kulcskarikában. A cocoaPodsot is telepíteni kell a függőségek lekéréséhez.
• Egy üzembe helyezett Azure Communication Services-erőforrás, jegyezze fel a végpont URL-címét.
• Egy Azure Communication Services hozzáférési jogkivonat és felhasználói azonosító.
• Egy Azure Communication Services-csevegési szál , és most adja hozzá az utolsó lépésben létrehozott felhasználót ehhez a csevegési szálhoz.

A projekt előkészítése

A gyorsútmutató-projekt beállításához töltse ki az alábbi szakaszokat.

Új Xcode-projekt létrehozása

Az Xcode-ban hozzon létre egy új projektet:

1. A Fájl menüben válassza az Új>projekt lehetőséget.

2. Az Új projekt sablonjának kiválasztása területen válassza ki az iOS-platformot , és válassza ki az alkalmazásalkalmazás-sablont . A rövid útmutató az UIKit-történeteket használja.

   

3. Az új projekt beállítási beállításai között adja meg a termék nevét, és írja be a UILibraryQuickStart nevet. A felülethez válassza a Storyboard lehetőséget. A rövid útmutató nem hoz létre teszteket, így törölheti a Tesztek belefoglalása jelölőnégyzetet.

   

A csomag és a függőségek telepítése

1. (Nem kötelező) Az M1-et tartalmazó MacBook esetén telepítse és engedélyezze a Rosetta-t az Xcode-ban.

2. A projekt gyökérkönyvtárában futtassa pod init a podfájl létrehozásához. Ha hibát tapasztal, frissítse a CocoaPodsot az aktuális verzióra.

3. Adja hozzá a következő kódot a Podfile-hoz. Cserélje le UILibraryQuickStart a projekt nevét.

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

4. Run pod install --repo-update.

5. Az Xcode-ban nyissa meg a létrehozott xcworkspace-fájlt .

A Bitcode kikapcsolása

Az Xcode projekt Build Gépház területén állítsa a Bitcode engedélyezése beállítást Nem értékre. A beállítás megkereséséhez módosítsa a szűrőt alapszintűről az Összesre, vagy használja a keresősávot.

Az összetett inicializálása

Az összetett inicializálása:

1. Go to ViewController.

2. Adja hozzá az alábbi kódot az összetett összetevők csevegéshez való inicializálásához. Cserélje le <USER_ID> a felhasználóazonosítóra. Cserélje le <USER_ACCESS_TOKEN> a hozzáférési jogkivonatra. Cserélje le <ENDPOINT_URL> a végpont URL-címét. Cserélje le <THREAD_ID> a csevegési szál azonosítóját. Cserélje le <DISPLAY_NAME> a nevét. (A karakterlánc hosszának <DISPLAY_NAME> korlátja 256 karakter).

   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. Ha úgy dönt, hogy a csevegőnézetet a képernyő méreténél kisebb keretbe helyezi, az ajánlott minimális szélesség 250, a javasolt minimális magasság pedig 300.

A kód futtatása

Az alkalmazás iOS-szimulátoron való létrehozásához és futtatásához válassza a Termékfuttatás> lehetőséget, vagy használja az (⌘-R) billentyűparancsot. Ezután próbálja ki a csevegési élményt a szimulátoron:

1. Válassza a Start Felület lehetőséget.
2. A csevegőügyfél csatlakozik a csevegési szálhoz, és megkezdheti az üzenetek beírását és küldését.
3. Ha az ügyfél nem tud csatlakozni a szálhoz, és sikertelen hibákat lát chatJoin , ellenőrizze, hogy a felhasználó hozzáférési jogkivonata érvényes-e, és hogy a felhasználó REST API-hívással vagy az az parancssori felülettel lett-e hozzáadva a csevegési szálhoz.

Clean up resources

Ha törölni és eltávolítani szeretne egy Communication Services-előfizetést, törölheti az erőforrást vagy az erőforráscsoportot.

Az erőforráscsoport törlése a hozzá társított egyéb erőforrásokat is törli.

További információ az erőforrások tisztításáról.