Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Comience a usar la biblioteca de la interfaz de usuario de Azure Communication Services para integrar rápidamente las experiencias de comunicación en sus aplicaciones. En este artículo se describe cómo integrar composites de chat de la biblioteca de UI en una aplicación y configurar la experiencia para los usuarios de la aplicación.
La biblioteca de interfaz de usuario de Azure Communication Services representa una experiencia de chat completa directamente en la aplicación. Lo que hace es conectarse a los servicios de chat de Azure Communication Services y actualizar la presencia de un participante automáticamente. Como desarrollador, debe decidir dónde en la experiencia de usuario de la aplicación desea que la experiencia de chat se inicie y cree solo los recursos de Azure Communication Services según sea necesario.
Nota:
Para obtener más información sobre la biblioteca de interfaz de usuario web, consulte el storybook de la biblioteca de interfaz de usuario web.
Requisitos previos
- Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
- Un recurso de Azure Communication Services implementado. Cree un recurso de Azure Communication Services.
- Un token de Azure Communication Services. Consulte este ejemplo.
Acceso a estos inicios rápidos
Accede a estos cuentos
Importante
Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar. Las características de la versión preliminar están disponibles públicamente y se pueden usar en todos los clientes nuevos y existentes de Microsoft.
Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. Se recomienda no usarlos para cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que las funcionalidades estén restringidas.
Para más información, consulte Términos de uso complementarios de las Versiones Preliminares de Microsoft Azure.
Obtenga la aplicación de ejemplo para Android en Azure Samples Android SDK para chatear en la biblioteca de interfaz de usuario de Azure Communication Services de código abierto para Android.
Requisitos previos
- Una cuenta y una suscripción activa de Azure. Cree una cuenta gratuita.
- Un sistema operativo que ejecute Android Studio.
- Un recurso de Azure Communication Services implementado. Anote la dirección URL del punto de conexión.
- Un token de acceso y un identificador de usuario de Azure Communication Services.
- Un subproceso de chat de Azure Communication Services al que se ha agregado el usuario del paso anterior.
Configuración del proyecto
Complete las secciones siguientes para configurar el proyecto.
Creación de un nuevo proyecto de Android
En Android Studio, cree un proyecto nuevo.
En el menú Archivo, seleccione Nuevo>Nuevo proyecto.
En Nuevo proyecto, seleccione la plantilla de proyecto Actividad de vistas vacías .
Seleccione Siguiente.
Asigne al proyecto el nombre UILibraryQuickStart. En lenguaje, seleccione Java/Kotlin. Como SDK mínimo, seleccione API 23: Android 6.0 (Lollipop) o posterior.
Seleccione Finalizar.
Instalación de los paquetes
Complete las secciones siguientes para instalar los paquetes de aplicación necesarios.
Adición de una dependencia
En el archivo UILibraryQuickStart/app/build.gradle de nivel de aplicación (en la carpeta de la aplicación), agregue la dependencia siguiente:
dependencies {
...
implementation 'com.azure.android:azure-communication-ui-chat:+'
...
}
Agregar repositorios de Maven
Se requiere el repositorio de paquetes de Azure para integrar la biblioteca.
Para agregar el repositorio:
- En los scripts de Gradle del proyecto, asegúrese de agregar los siguientes repositorios. Para Android Studio (2020.*),
repositoriesestá ensettings.gradle, bajodependencyResolutionManagement(Gradle version 6.8 or greater). Para las versiones anteriores de Android Studio (4.*),repositoriesse encuentra en el nivel del proyectobuild.gradle, bajoallprojects{}.
// dependencyResolutionManagement
repositories {
...
maven {
url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
}
...
}
Ejecución del código
En Android Studio, compile e inicie la aplicación.
- Seleccione Iniciar.
- El cliente de chat se unirá al subproceso de chat y podrá empezar a escribir y enviar mensajes.
- Si el cliente no puede unirse al subproceso y aparecen errores de
chatJoin, compruebe que el token de acceso del usuario sea válido y que el usuario se haya agregado al subproceso de chat mediante la llamada a la API REST o mediante la interfaz de la línea de comandosaz.
Importante
Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar. Las características de la versión preliminar están disponibles públicamente y se pueden usar en todos los clientes nuevos y existentes de Microsoft.
Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. Se recomienda no usarlos para cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que las funcionalidades estén restringidas.
Para más información, consulte Términos de uso complementarios de las Versiones Preliminares de Microsoft Azure.
Obtenga la aplicación de ejemplo de iOS en SDK de iOS de ejemplo de Azure para chat en la biblioteca de interfaz de usuario de Azure Communication Services de código abierto para iOS.
Requisitos previos
- Una cuenta y una suscripción activa de Azure. Cree una cuenta gratuita.
- Un Mac ejecutando Xcode 13 o posterior junto con un certificado de desarrollador válido instalado en su keychain. CocoaPods también debe instalarse para capturar dependencias.
- Un recurso de Azure Communication Services implementado. Anote la dirección URL del punto de conexión.
- Un token de acceso y un identificador de usuario de Azure Communication Services.
- Un subproceso de chat de Azure Communication Services. Agregue el usuario que creó en el paso anterior a este subproceso de chat.
Configuración del proyecto
Complete las secciones siguientes para configurar el proyecto de inicio rápido.
Creación de un nuevo proyecto de Xcode
Cree un proyecto en Xcode.
En el menú Archivo, seleccione Nuevo>Proyecto.
En Elegir una plantilla para el nuevo proyecto, seleccione la plataforma iOS y seleccione la plantilla de aplicación App. En el inicio rápido se usan guiones gráficos de UIKit.
En Elegir opciones para el nuevo proyecto, escriba en el nombre del producto UILibraryQuickStart. Para la interfaz, seleccione Storyboard. El inicio rápido no crea pruebas, por lo que puede desactivar la casilla Incluir pruebas.
Instale el paquete y sus dependencias
(Opcional) Para MacBook con M1, instale y habilite Rosetta en Xcode.
Cree un Podfile en el directorio raíz del proyecto mediante la ejecución de
pod init. Actualice CocoaPods a la versión actual en caso de que se produzca un error.Agregue el código siguiente a su Podfile. Reemplace
UILibraryQuickStartpor el nombre del proyecto.platform :ios, '14.0' target 'UILibraryQuickStart' do use_frameworks! pod 'AzureCommunicationUIChat', '1.0.0-beta.5' endEjecute
pod install --repo-update.En Xcode, abra el archivo xcworkspace generado.
Desactivar espacio aislado de script de usuario
Algunos de los scripts de las bibliotecas vinculadas escriben archivos durante el proceso de compilación. Para habilitar la escritura de archivos, deshabilite el espacio aislado de script de usuario en Xcode.
En el proyecto Xcode, en Configuración de compilación, establezca la opciónEspacio aislado de script de usuario en No. Para encontrar la configuración, cambie el filtro de Básico a Todo o use la barra de búsqueda.
Inicialización del compuesto
Para inicializar el compuesto:
Ir a
ViewController.Agregue el siguiente código para inicializar los componentes compuestos de un chat. Reemplace
<USER_ID>por el identificador de usuario. Reemplace<USER_ACCESS_TOKEN>con el token de acceso. Reemplace<ENDPOINT_URL>por la dirección URL del punto de conexión. Reemplaza<THREAD_ID>por el identificador del hilo de chat. Reemplace<DISPLAY_NAME>por su propio nombre. (El límite de longitud de cadena de<DISPLAY_NAME>es de 256 caracteres).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)") } }) } } }Si decide colocar la vista de chat en un marco menor que el tamaño de pantalla, el ancho mínimo recomendado es 250 y el alto mínimo es 300.
Ejecución del código
Para compilar y ejecutar la aplicación en el simulador de iOS, seleccione Producto>Ejecutar. También puede usar el método abreviado de teclado (⌘-R). Pruebe ahora la experiencia de chat en el simulador.
- Seleccione Iniciar Experiencia.
- El cliente de chat se unirá al subproceso de chat y podrá empezar a escribir y enviar mensajes.
- Si el cliente no puede unirse al subproceso y aparecen errores de
chatJoin, compruebe que el token de acceso del usuario sea válido y que el usuario se haya agregado al subproceso de chat mediante la llamada a la API REST o mediante la interfaz de la línea de comandos az.
Limpieza de recursos
Si desea limpiar y quitar una suscripción de Azure Communication Services, puede eliminar el recurso o el grupo de recursos.
Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él.
Obtenga más información sobre la limpieza de recursos.