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.
Feljegyzé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
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:
A Fájl menüben válassza az Új>projekt lehetőséget.
Az Új projektben válassza az Üres tevékenység projektsablont.
Válassza a Tovább lehetőséget.
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.
Válassza a Befejezés lehetőséget.
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:
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 alattdependencyResolutionManagement(Gradle version 6.8 or greater)
találhatósettings.gradle
. Az Android Studio korábbi verziói (4.*)repositories
projektszintenbuild.gradle
, aallprojects{}
.// dependencyResolutionManagement repositories { ... maven { url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1" } ... }
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 activity_main.xml
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:
Lépjen a következőre:
MainActivity
.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
endpoint
a ,acsIdentity
ésdisplayName
accessToken
ThreadId
a . Cserélje leendpoint
az erőforrás URL-címét az Azure Communication Services által biztosított módon. Cserélje le ésaccessToken
cserélje leacsIdentity
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 leThreadId
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.
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()
}
}
}
A kód futtatása
Az Android Studióban hozza létre és indítsa el az alkalmazást:
- Válassza a Start Felület lehetőséget.
- A csevegőügyfél csatlakozik a csevegési szálhoz, és megkezdheti az üzenetek beírását és küldését
- 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:
A Fájl menüben válassza az Új>projekt lehetőséget.
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.
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
(Nem kötelező) Az M1-et tartalmazó MacBook esetén telepítse és engedélyezze a Rosetta-t az Xcode-ban.
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.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
Futtassa az
pod install --repo-update
parancsot.Az Xcode-ban nyissa meg a létrehozott xcworkspace-fájlt .
A Bitcode kikapcsolása
Az Xcode projekt Buildbeállítások csoportjában állítsa a Bitkód 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:
Lépjen a következőre:
ViewController
.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)") } }) } } }
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:
- Válassza a Start Felület lehetőséget.
- A csevegőügyfél csatlakozik a csevegési szálhoz, és megkezdheti az üzenetek beírását és küldését.
- 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.
Az erőforrások eltávolítása
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.