Partager via


Utiliser les composants UI pour la conversation

Découvrez comment bien démarrer avec la bibliothèque d’interface utilisateur Azure Communication Services pour intégrer rapidement des expériences de communication à vos applications. Cet article décrit comment intégrer des composites de conversation de bibliothèque d’interface utilisateur à une application et configurer l’expérience pour les utilisateurs de votre application.

La bibliothèque d’interface utilisateur Azure Communication Services affiche une expérience de conversation complète directement dans votre application. Elle prend en charge la connexion aux services de conversation Azure Communication Services et met automatiquement à jour la présence des participants. En tant que développeur, vous devez décider où, dans l’expérience utilisateur de votre application, vous souhaitez que l’expérience de conversation démarre et crée uniquement les ressources Azure Communication Services en fonction des besoins.

Remarque

Pour plus d’informations sur la bibliothèque d’interface utilisateur web, consultez le storybook de la bibliothèque d’interface utilisateur web.

Prérequis

Accédez à ces guides de démarrage rapide

Accéder à ces storybooks

Important

Cette fonctionnalité d’Azure Communication Services est actuellement en préversion. Les fonctionnalités en préversion sont disponibles publiquement et peuvent être utilisées par tous les clients Microsoft nouveaux et existants.

Ces interfaces de programmation d’applications et kits de développement logiciel (SDK) en préversion sont fournis sans contrat au niveau du service. Nous vous recommandons de ne pas les utiliser pour les charges de travail de production. Certaines fonctionnalités peuvent ne pas être prises en charge ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Obtenez l’exemple d’application Android sur azure Samples Android SDK pour la conversation dans la bibliothèque d’interface utilisateur Azure Communication Services open source pour Android.

Prérequis

Configuration du projet

Suivez les sections suivantes pour configurer le projet.

Créer un projet Android

Dans Android Studio, créez un projet.

  1. Dans le menu Fichier, sélectionnez Nouveau>Nouveau projet.

  2. Dans Nouveau projet, sélectionnez le modèle de projet d’activité Affichages vides .

    Capture d’écran montrant la boîte de dialogue Nouveau projet dans Android Studio avec l’activité Affichages vides sélectionnée.

  3. Cliquez sur Suivant.

  4. Nommez le projet UILibraryQuickStart. Pour le langage, sélectionnez Java/Kotlin. Pour le kit de développement logiciel (SDK) minimal, sélectionnez API 23 : Android 6.0 (Marshmallow) ou une version ultérieure.

  5. Sélectionnez Terminer.

    Capture d’écran montrant les options du nouveau projet et le bouton Terminer sélectionné.

Installer les packages

Effectuez les étapes des sections suivantes pour installer les packages d’application nécessaires.

Ajouter une dépendance

Dans votre fichier UILibraryQuickStart/app/build.gradle au niveau de l’application (dans le dossier de l’application), ajoutez la dépendance suivante :

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

Ajouter des référentiels Maven

Le référentiel de packages Azure est requis pour intégrer la bibliothèque.

Pour ajouter le référentiel :

  1. Dans vos scripts Gradle de projet, vérifiez que les dépôts suivants sont ajoutés. Pour Android Studio (2020.*), repositories se trouve dans settings.gradle, sous dependencyResolutionManagement(Gradle version 6.8 or greater). Pour les versions antérieures d’Android Studio (4.*), repositories se trouve dans build.gradle au niveau du projet, sous allprojects{}.
    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

Exécuter le code

Dans Android Studio, générez et démarrez l’application.

  1. Sélectionnez Lancer.
  2. Le client de conversation rejoint le fil de discussion et vous pouvez commencer à taper et à envoyer des messages.
  3. Si le client ne peut pas rejoindre le fil de discussion et que des chatJoinerreurs se produisent, vérifiez que le jeton d'accès de votre utilisateur(-trice) est valide et que l'utilisateur(-trice) a été ajouté au fil de discussion par un appel à l'API REST ou à l'aide de az l'interface de ligne de commande.

Animation GIF montrant un exemple du fonctionnement du projet sur un appareil Android.

Important

Cette fonctionnalité d’Azure Communication Services est actuellement en préversion. Les fonctionnalités en préversion sont disponibles publiquement et peuvent être utilisées par tous les clients Microsoft nouveaux et existants.

Ces interfaces de programmation d’applications et kits de développement logiciel (SDK) en préversion sont fournis sans contrat au niveau du service. Nous vous recommandons de ne pas les utiliser pour les charges de travail de production. Certaines fonctionnalités peuvent ne pas être prises en charge ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Obtenez l’exemple d’application iOS dans le Kit de développement logiciel (SDK) iOS Azure Samples pour la conversation dans la bibliothèque d’interface utilisateur Azure Communication Services open source pour iOS.

Prérequis

  • Un compte Azure et un abonnement Azure actif. Créez un compte gratuitement.
  • Un Mac exécutant Xcode 13+ ou version ultérieure, ainsi qu’un certificat de développeur valide installé dans votre trousseau. CocoaPods doit également être installé afin de récupérer les dépendances.
  • Une ressource Azure Communication Services déployée. Notez l’URL de point de terminaison.
  • Un jeton d’accès Azure Communication Services et un identificateur d’utilisateur.
  • Un fil de discussion Azure Communication Services. Ajoutez l’utilisateur(-trice) que vous avez créé à l’étape précédente à ce fil de discussion.

Configuration du projet

Effectuez les étapes des sections suivantes pour configurer le projet de démarrage rapide.

Créer un nouveau projet Xcode

Dans Xcode, créez un projet.

  1. Dans le menu Fichier, sélectionnez Nouveau>Projet.

  2. Dans Choisir un modèle pour votre nouveau projet, sélectionnez la plateforme iOS et sélectionnez le modèle d’application Application. Le guide de démarrage rapide utilise les storyboards UIKit.

    Capture d’écran montrant la boîte de dialogue du nouveau projet Xcode, avec iOS et le modèle Application sélectionnés.

  3. Dans Choisir les options de votre nouveau projet, pour le nom du produit, entrez UILibraryQuickStart. Dans le champ Interface, sélectionnez Plan conceptuel. Le guide de démarrage rapide ne crée pas de tests. Vous pouvez donc décochez la case Inclure les tests .

    Capture d’écran montrant la configuration des options du nouveau projet Xcode.

Installez le package et ses dépendances

  1. (Facultatif) Pour MacBook avec M1, installez et activez Rosetta dans Xcode.

  2. Dans le répertoire racine de votre projet, exécutez pod init pour créer un Podfile. Si vous rencontrez une erreur, mettez à jour CocoaPods vers la version actuelle.

  3. Ajoutez le code suivant à votre Podfile. Remplacez UILibraryQuickStart par votre nom de projet.

    platform :ios, '14.0'
    
    target 'UILibraryQuickStart' do
        use_frameworks!
        pod 'AzureCommunicationUIChat', '1.0.0-beta.5'
    end
    
  4. Exécutez pod install --repo-update.

  5. Dans Xcode, ouvrez le fichier xcworkspace généré.

Désactiver le bac à sable de script utilisateur

Certains des scripts dans les bibliothèques liées écrivent des fichiers pendant le processus de génération. Pour activer l'écriture de fichiers, désactivez le Sandboxing des scripts utilisateur dans Xcode.

Dans le projet Xcode, sous Paramètres de build, définissez l’option Sandboxing de script utilisateur sur Non. Pour rechercher le paramètre, remplacez le filtre De base par Tout ou utilisez la barre de recherche.

Capture d’écran montrant l’option Paramètres de génération pour désactiver le bac à sable de script utilisateur.

Initialiser le composite

Pour initialiser le composite :

  1. Atteindre ViewController.

  2. Ajoutez le code suivant afin d’initialiser vos composants composites pour une conversation. Remplacez <USER_ID> par l’identificateur d’utilisateur. Remplacez <USER_ACCESS_TOKEN> par votre jeton d’accès. Remplacez <ENDPOINT_URL> par votre URL de point de terminaison. Remplacez <THREAD_ID> par votre ID de thread de conversation. Remplacez <DISPLAY_NAME> par votre nom. (La limite de longueur de chaîne pour <DISPLAY_NAME> est de 256 caractères).

    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. Si vous choisissez de placer la conversation dans un cadre plus petit que la taille de l'écran, nous recommandons une largeur minimale de 250 et une hauteur minimale de 300.

Exécuter le code

Générez et exécutez votre application sur le simulateur iOS en sélectionnant Produit>Exécuter. Vous pouvez également utiliser le raccourci clavier (⌘-R). Testez ensuite l’expérience de conversation sur le simulateur.

  1. Sélectionnez Démarrer l’expérience.
  2. Le client de conversation rejoint le fil de discussion et vous pouvez commencer à taper et à envoyer des messages.
  3. Si le client ne peut pas rejoindre le fil de discussion et que des chatJoinerreurs se produisent, vérifiez que le jeton d'accès de votre utilisateur(-trice) est valide et que l'utilisateur(-trice) a été ajouté au fil de discussion par un appel à l'API REST ou à l'aide de l'interface de ligne de commande az.

GIF d’animation démontrant l’apparence finale de l’application iOS de démarrage rapide.

Nettoyer les ressources

Si vous voulez nettoyer et supprimer un abonnement Azure Communication Services, vous pouvez supprimer la ressource ou le groupe de ressources.

La suppression du groupe de ressources efface également les autres ressources qui y sont associées.

Apprenez-en davantage sur le nettoyage des ressources.