Introducción a la Biblioteca de interfaz de usuario
La biblioteca de interfaz de usuario facilita la creación de experiencias modernas de usuarios de comunicaciones mediante Azure Communication Services. Proporciona una biblioteca de componentes de interfaz de usuario preparados para la producción que puede colocar en sus aplicaciones:
Nota:
Puede encontrar documentación detallada sobre la Biblioteca de interfaz de usuario web en el libro de historias sobre la Biblioteca de interfaz de usuario. Ahí encontrará documentación conceptual adicional, inicios rápidos y ejemplos.
Composiciones. Estos componentes son soluciones inmediatas que implementan escenarios de comunicación comunes. Puede agregar rápidamente experiencias de chat o videollamadas (actualmente solo disponibles a través de la biblioteca de interfaz de usuario web) a las aplicaciones. Las composiciones son componentes de orden superior de código abierto creadas mediante componentes de interfaz de usuario.
Componentes de interfaz de usuario. Estos componentes son bloques de creación de código abierto que permiten crear una experiencia de comunicación personalizada. Los componentes se ofrecen para las funcionalidades de llamadas y de chat que se pueden combinar para generar experiencias.
Todas estas bibliotecas cliente de interfaz de usuario utilizan los recursos y el lenguaje de diseño de Fluent de Microsoft. La interfaz de usuario de Fluent proporciona una capa fundamental para la Biblioteca de interfaz de usuario y se usa activamente en todos los productos de Microsoft.
Junto con los componentes de la interfaz de usuario, la Biblioteca de interfaz de usuario expone una biblioteca cliente con estado para realizar llamadas y conversar. Este cliente es independiente de cualquier marco de administración de estados específico y se puede integrar con administradores de estado comunes, como Redux o React Context. Esta biblioteca cliente con estado se puede usar con los componentes de la interfaz de usuario para pasar propiedades y métodos para que los componentes de la interfaz de usuario representen datos. Para más información, consulte Introducción a los clientes sin estado.
Nota:
Los mismos componentes y compuestos que se ofrecen en la biblioteca de interfaz de usuario están disponibles en el Kit de diseño para Figma, por lo que puede diseñar rápidamente y crear prototipos de sus experiencias de llamadas y chat.
Introducción a las composiciones
Las composiciones son componentes de nivel superior formados por componentes de interfaz de usuario que ofrecen soluciones inmediatas para escenarios de comunicación comunes mediante Azure Communication Services. Los desarrolladores pueden crear fácilmente instancias de la composición mediante un token de acceso de Azure Communication Services y la configuración necesaria atribuida para la llamada o el chat.
| Compuesto | Casos de uso: |
|---|---|
| CallwithChatComposite | Experiencia que combina características de llamada y chat para permitir a los usuarios iniciar o unirse a una llamada o conversación de chat. En la experiencia, el usuario puede comunicarse mediante voz y vídeo, así como acceder a una amplia conversación de chat donde se pueden intercambiar mensajes entre participantes. Incluye compatibilidad con interoperabilidad de Teams. |
| CallComposite | Experiencia de llamada que permite a los usuarios iniciar una llamada o unirse a ella. Dentro de la experiencia, los usuarios pueden configurar sus dispositivos, participar en la llamada con vídeo y ver a otros participantes, incluidos los participantes con el vídeo encendido. Para la interoperabilidad de Teams, incluye la funcionalidad de sala de espera para que el usuario espere a ser admitido. |
| ChatComposite | Experiencia de chat en la que el usuario puede enviar y recibir mensajes. Los eventos de subproceso, como escribir, leer o la entrada y salida de los participantes, se muestran al usuario como parte del subproceso de chat. |
Introducción a los componentes de interfaz de usuario
Se pueden usar componentes de interfaz de usuario puros para que los desarrolladores los puedan usar para crear experiencias de comunicación, desde unir iconos de vídeo en una cuadrícula para mostrar los participantes remotos hasta organizar componentes para ajustarse a las especificaciones de las aplicaciones. Los componentes de interfaz de usuario admiten personalización para proporcionarles el aspecto y la sensación adecuados que coincidan con la personalización de marca y el estilo de las aplicaciones.
| Ámbito | Componente | Descripción |
|---|---|---|
| Llamar | Diseño de cuadrícula | Componente de cuadrícula para organizar los iconos de vídeo en una cuadrícula NxN. |
| Icono de vídeo | Componente que muestra la secuencia de vídeo cuando está disponible y un componente estático predeterminado cuando no lo está. | |
| Barra de control | Contenedor para organizar DefaultButtons para enlazar con acciones de llamada específicas, como silencio o uso compartido de pantalla. | |
| VideoGallery | Componente llave en mano de la galería de vídeos, que cambia dinámicamente a medida que se agregan participantes | |
| Dialpad | Componente para admitir la entrada del número de teléfono y los tonos DTMF | |
| Chat | Subproceso de mensaje | Contenedor que representa mensajes de chat, mensajes del sistema y mensajes personalizados. |
| Cuadro de envío | Componente de entrada de texto con un botón de envío discreto. | |
| Cuadro de envío de texto enriquecido | Componente de entrada de texto enriquecido con opciones de formato y un botón de envío discreto | |
| Indicador de estado del mensaje | Componente de recepción de lectura de varios estados para mostrar el estado del mensaje enviado. | |
| Indicador de escritura | Componente de texto para representar a los participantes que escriben activamente en un subproceso. | |
| Comunes | Elemento de participante | Componente común para representar una llamada o un participante de chat, incluido el avatar y el nombre para mostrar. |
| Lista de participantes | Componente común para representar una lista de participantes de llamada o chat, incluidos el avatar y el nombre para mostrar |
Instalación de la biblioteca de interfaz de usuario web
Los clientes con estado se encuentran como parte del paquete @azure/communication-react.
npm i --save @azure/communication-react
¿Qué artefacto de interfaz de usuario es el mejor para mi proyecto?
Comprender estos requisitos le ayudará a elegir la biblioteca cliente adecuada:
- ¿Cuánta personalización desea? Las bibliotecas cliente principales de Azure Communication no tienen experiencia de usuario y están diseñadas para que pueda compilar cualquier experiencia de usuario que quiera. Los componentes de la Biblioteca de interfaz de usuario proporcionan recursos de interfaz de usuario a cambio de una personalización reducida.
- ¿A qué plataformas quiere dirigirse? Cada plataforma tiene diferentes funcionalidades.
Se pueden encontrar detalles sobre la disponibilidad de características de la Biblioteca de interfaz de usuario aquí, pero las desventajas se resumen en la tabla siguiente.
| Biblioteca cliente / SDK | Complejidad de la implementación | Capacidad de personalización | Llamar | Chat | Interoperabilidad de equipos |
|---|---|---|---|---|---|
| Componentes compuestos | Bajo | Bajo | ✔ | ✔ | ✔ |
| Componentes base | Media | Media | ✔ | ✔ | ✔ |
| Bibliotecas cliente principales | Alto | Alto | ✔ | ✔ | ✔ |
Los compuestos son soluciones inmediatas que implementan escenarios de comunicación comunes. Puede agregar experiencias de videollamada a las aplicaciones. Los compuestos son componentes de orden superior de código abierto que los desarrolladores pueden aprovechar para reducir el tiempo de desarrollo y la complejidad de la ingeniería.
Introducción a las composiciones
| Compuesto | Casos de uso: |
|---|---|
| CallComposite | Experiencia de llamada que permite a los usuarios iniciar una llamada o unirse a ella. Dentro de la experiencia, los usuarios pueden configurar sus dispositivos, participar en la llamada con vídeo y ver a otros participantes, incluidos aquellos con el vídeo encendido. Para la interoperabilidad de Teams, CallComposite incluye la funcionalidad de vestíbulo para que los usuarios esperen su admisión. |
| ChatComposite | ChatComposite ofrece una experiencia de mensajería de texto en tiempo real a los usuarios. En concreto, los usuarios pueden enviar y recibir un mensaje de chat con eventos de indicadores de escritura y recepción de lectura. Además, los usuarios pueden recibir mensajes del sistema, como avisos de que se ha agregado o quitado un participante y notificaciones de cambios en el título del chat. |
Escenarios de compuestos para llamadas
Unirse a una llamada de audio o vídeo
Los usuarios se pueden unir a una llamada con la dirección URL de reunión de Teams o mediante la configuración de una llamada a Azure Communication Services. Este enfoque ofrece una experiencia más sencilla, al igual que la aplicación de Teams.
Experiencia de llamada previa
Como participante de la llamada, puede proporcionar un nombre y definir una configuración predeterminada para dispositivos de audio y vídeo. Entonces estará listo para saltar a la llamada.
Experiencia de llamada
El compuesto que realiza la llamada proporciona una experiencia global, optimiza el tiempo de desarrollo y se centra en el diseño limpio.
La experiencia de llamada proporciona todas estas funcionalidades en un solo componente compuesto, lo que proporciona una ruta de acceso clara sin código complejo que deriva en un tiempo de desarrollo menor.
Calidad y seguridad
Los compuestos móviles para llamadas se inicializan con tokens de acceso de Azure Communication Services.
Más detalles
Si necesita más detalles sobre los compuestos móviles para llamadas, consulte los casos de uso.
Escenarios de compuestos para chat
Importante
Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar.
Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. Se recomienda no usarlos para las cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que sus funcionalidades estén limitadas.
Para obtener más información, consulte Términos de uso complementarios para las Versiones preliminares de Microsoft Azure.
Experiencia de chat
ChatComposite ofrece experiencias de mensajería de texto en tiempo real. Con vistas a la flexibilidad y la escalabilidad, ChatComposite puede adaptarse sin complejidad a diferentes diseños o vistas de las aplicaciones. También puede optar por que no se muestre la vista de ChatComposite y recibir solo notificaciones para satisfacer sus diferentes necesidades empresariales.
| iOS | Android |
|---|---|
|
|
Calidad y seguridad
Al igual que CallComposite, ChatComposite también usa tokens de acceso de Azure Communication Services. Para asegurarse de que solo los usuarios con el permiso adecuado puedan acceder al chat, sus tokens de usuario deben agregarse a un subproceso de chat válido antes de iniciar la experiencia de chat.
Más detalles
Si necesita más detalles sobre los compuestos móviles para chat, consulte los casos de uso.
¿Qué artefacto de interfaz de usuario es el mejor para mi proyecto?
Estos requisitos le ayudarán a elegir la biblioteca cliente adecuada:
¿Cuánta personalización desea? Las bibliotecas cliente principales de Azure Communication Services no tienen experiencia de usuario y están diseñadas para que pueda crear la que quiera. Los componentes de la Biblioteca de interfaz de usuario proporcionan recursos de interfaz de usuario a cambio de una personalización reducida.
¿A qué plataformas quiere dirigirse? Cada plataforma tiene diferentes funcionalidades.
Estas son algunas ventajas clave:
| Biblioteca cliente / SDK | Complejidad de la implementación | Capacidad de personalización | Llamar | Chat | Interoperabilidad de Teams |
|---|---|---|---|---|---|
| Componentes compuestos | Bajo | Bajo | ✔ | ✔ | ✔ |
| Bibliotecas cliente principales | Alto | Alto | ✔ | ✔ | ✔ |
Para más información sobre la disponibilidad de características en la biblioteca de interfaz de usuario, consulte Casos de uso de la biblioteca de interfaz de usuario.