Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Beginnen Sie mit der Verwendung der Benutzeroberflächenbibliothek von Azure Communication Services, um schnell Kommunikationsumgebungen in Ihre Anwendungen zu integrieren. In diesem Artikel wird beschrieben, wie Sie UI-Bibliothek-Chat-Komponenten in eine Anwendung integrieren und das Erlebnis für Ihre App-Benutzer gestalten.
Die Benutzeroberflächenbibliothek von Azure Communication Services rendert eine vollständige Chatfunktion direkt in Ihrer Anwendung. Sie verarbeitet die Verbindung mit Azure Communication Services-Chatdiensten und aktualisiert automatisch die Anwesenheit von Teilnehmer*innen. Bei der Softwareentwicklung müssen Sie sich entscheiden, an welcher Stelle der Benutzeroberfläche Ihrer App die Chatfunktion gestartet werden soll. Dabei sollten Azure Communication Services-Ressourcen nur nach Bedarf erstellt werden.
Hinweis
Weitere Informationen zur Web-UI-Bibliothek finden Sie im Web ui Library Storybook.
Voraussetzungen
- Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
- Eine bereitgestellte Azure Communication Services-Ressource. Erstellen einer Azure Communication Services-Ressource
- Ein Azure Communication Services-Token. Weitere Informationen finden Sie in diesem Beispiel.
Zugreifen auf diese Schnellstarts
Zugreifen auf diese Storybooks
Wichtig
Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau. Features in der Vorschau sind öffentlich verfügbar und können von allen neuen und vorhandenen Microsoft-Kunden verwendet werden.
Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Bestimmte Features werden möglicherweise nicht unterstützt oder Funktionen sind eingeschränkt.
Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.
Rufen Sie die Android-Beispielanwendung im Azure Samples Android SDK für Chats in der Open Source Azure Communication Services UI Library für Android ab.
Voraussetzungen
- Ein Azure-Konto und ein aktives Azure-Abonnement. Sie können kostenlos ein Konto erstellen.
- Ein Betriebssystem, unter dem Android Studio ausgeführt wird.
- Eine bereitgestellte Azure Communication Services-Ressource. Notieren Sie die Endpunkt-URL.
- Ein Azure Communication Services-Zugriffstoken und ein Azure Communication Services-Benutzerbezeichner.
- Ein Azure Communication Services-Chatthread mit dem Benutzer aus dem vorherigen Schritt, der diesem hinzugefügt wurde.
Einrichten des Projekts
Führen Sie die folgenden Abschnitte aus, um das Projekt einzurichten.
Erstellen eines neuen Android-Projekts
Erstellen Sie in Android Studio ein neues Projekt.
Wählen Sie im Menü Datei die Option Neu>Neues Projekt aus.
Wählen Sie in "Neues Projekt" die Projektvorlage "Leere Ansichtenaktivität " aus.
Wählen Sie Weiter aus.
Nennen Sie das Projekt UILibraryQuickStart. Wählen Sie für die Sprache Java/Kotlin aus. Wählen Sie als Mindestversion des SDK API 23: Android 6.0 (Marshmallow) oder höher aus.
Wählen Sie Fertig stellen aus.
Installieren der Pakete
Füllen Sie die folgenden Abschnitte aus, um die erforderlichen Anwendungspakete zu installieren.
Hinzufügen einer Abhängigkeit
Fügen Sie in der Datei UILibraryQuickStart/app/build.gradle auf App-Ebene (im App-Ordner) die folgende Abhängigkeit hinzu:
dependencies {
...
implementation 'com.azure.android:azure-communication-ui-chat:+'
...
}
Hinzufügen von Maven-Repositorys
Das Azure-Paketrepository ist erforderlich, um die Bibliothek zu integrieren.
So fügen Sie das Repository hinzu:
- Vergewissern Sie sich, dass in Ihren Gradle-Skripts die folgenden Repositorys hinzugefügt wurden. Für Android Studio (2020.*) befindet sich
repositoriesinsettings.gradle, unterdependencyResolutionManagement(Gradle version 6.8 or greater). Bei früheren Versionen von Android Studio (4.*) befindet sichrepositoriesauf der Projektebenebuild.gradle, unterallprojects{}.
// dependencyResolutionManagement
repositories {
...
maven {
url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}
...
}
Ausführen des Codes
Erstellen und starten Sie in Android Studio die Anwendung.
- Wählen Sie Starten aus.
- Der Chatclient tritt dem Chatthread bei, und Sie können mit der Eingabe von Text und dem Senden von Nachrichten beginnen.
- Wenn der Client dem Thread nicht beitreten kann und
chatJoin-Fehler angezeigt werden, vergewissern Sie sich, dass das Zugriffstoken Ihres Benutzers gültig ist und dass der Benutzer dem Chatthread per REST-API-Aufruf oder mithilfe deraz-Befehlszeilenschnittstelle hinzugefügt wurde.
Wichtig
Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau. Features in der Vorschau sind öffentlich verfügbar und können von allen neuen und vorhandenen Microsoft-Kunden verwendet werden.
Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Bestimmte Features werden möglicherweise nicht unterstützt oder Funktionen sind eingeschränkt.
Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.
Rufen Sie die Beispiel-iOS-Anwendung im Azure Samples iOS SDK für Chats in der Open-Source-Azure Communication Services-UI-Bibliothek für iOS ab.
Voraussetzungen
- Ein Azure-Konto und ein aktives Azure-Abonnement. Sie können kostenlos ein Konto erstellen.
- Einen Mac mit Xcode 13 oder höher und ein gültiges in Ihrer Keychain installiertes Entwicklerzertifikat CocoaPods muss ebenfalls installiert sein, um Abhängigkeiten abrufen zu können.
- Eine bereitgestellte Azure Communication Services-Ressource. Notieren Sie die Endpunkt-URL.
- Ein Azure Communication Services-Zugriffstoken und ein Azure Communication Services-Benutzerbezeichner.
- Ein Azure Communication Services-Chatthread. Fügen Sie den Benutzer, den Sie im vorherigen Schritt erstellt haben, zu diesem Chatthread hinzu.
Einrichten des Projekts
Füllen Sie die folgenden Abschnitte aus, um das Schnellstartprojekt einzurichten.
Erstellen eines neuen Xcode-Projekts
Erstellen Sie ein neues Projekt in Xcode.
Wählen Sie im Menü Datei die Option Neu>Projekt.
Wählen Sie unter Vorlage für neues Projekt auswählen die Plattform iOS und dann die Anwendungsvorlage App aus. In der Schnellstartanleitung werden die UIKit-Storyboards verwendet.
Geben Sie unter Optionen für Ihr neues Projekt auswählen als Produktnamen UILibraryQuickStart ein. Wählen Sie als Schnittstelle Storyboard aus. Die Schnellstartanleitung erstellt keine Tests, sodass Sie das Kontrollkästchen Tests einschließen deaktivieren können.
Installieren Sie das Paket und Abhängigkeiten.
(Optional) Installieren und aktivieren Sie Rosetta in Xcode für MacBook mit M1.
Führen Sie im Stammverzeichnis Ihres Projekts
pod initaus, um eine Podfile-Datei zu erstellen. Wenn ein Fehler auftritt, aktualisieren Sie CocoaPods auf die aktuelle Version.Fügen Sie Ihrer Podfile-Datei folgenden Code hinzu. Ersetzen Sie
UILibraryQuickStartdurch Ihren Projektnamen.platform :ios, '14.0' target 'UILibraryQuickStart' do use_frameworks! pod 'AzureCommunicationUIChat', '1.0.0-beta.5' endFühren Sie
pod install --repo-updateaus.Öffnen Sie in Xcode die generierte Datei xcworkspace.
Deaktivieren der Verwendung einer Benutzerskript-Sandbox
Einige der Skripte in den verknüpften Bibliotheken schreiben Dateien während des Buildprozesses. Um das Schreiben von Dateien zu ermöglichen, deaktivieren Sie die Benutzerskript-Sandbox in Xcode.
Legen Sie im Xcode-Projekt unter " Buildeinstellungen" die Option "User Script Sandboxing " auf "Nein" fest. Um die Einstellung zu finden, ändern Sie den Filter von Basic in Alle, oder verwenden Sie die Suchleiste.
Initialisieren der zusammengesetzten Komponente
So initialisieren Sie die zusammengesetzte Komponente
Gehe zu
ViewController.Fügen Sie den folgenden Code hinzu, um Ihre zusammengesetzten Komponenten für einen Chat zu initialisieren. Ersetzen Sie
<USER_ID>durch den Benutzerbezeichner. Ersetzen Sie<USER_ACCESS_TOKEN>durch Ihr Zugriffstoken. Ersetzen Sie<ENDPOINT_URL>durch Ihre Endpunkt-URL. Ersetzen Sie<THREAD_ID>durch Ihre Chatthread-ID. Ersetzen Sie<DISPLAY_NAME>durch Ihren eigenen Namen. (Die maximale Zeichenfolgenlänge für<DISPLAY_NAME>beträgt 256 Zeichen).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)") } }) } } }Wenn Sie die Chatansicht in einem Frame platzieren möchten, der kleiner als die Bildschirmgröße ist, empfehlen wir die Mindestbreite von 250 und die Mindesthöhe von 300.
Ausführen des Codes
Um Ihre App im iOS-Simulator zu erstellen und auszuführen, wählen Sie Produkt>Ausführen aus. Sie können auch den Tastaturkurzbefehl (⌘-R) verwenden. Testen Sie dann die Chatfunktion im Simulator.
- Wählen Sie Start Experience aus.
- Der Chatclient tritt dem Chatthread bei, und Sie können mit der Eingabe von Text und dem Senden von Nachrichten beginnen.
- Wenn der Client dem Thread nicht beitreten kann und
chatJoin-Fehler angezeigt werden, vergewissern Sie sich, dass das Zugriffstoken Ihres Benutzers gültig ist und dass der Benutzer dem Chatthread per REST-API-Aufruf oder mithilfe der az-Befehlszeilenschnittstelle hinzugefügt wurde.
Bereinigen von Ressourcen
Wenn Sie ein Azure Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder Ressourcengruppe löschen.
Wenn Sie die Ressourcengruppe löschen, werden auch alle anderen Ressourcen gelöscht, die ihr zugeordnet sind.
Weitere Informationen zum Bereinigen von Ressourcen finden Sie hier.