Panoramica della libreria dell'interfaccia utente
La libreria dell'interfaccia utente semplifica la creazione di esperienze utente moderne di comunicazione usando Servizi di comunicazione di Azure. Offre una libreria di componenti dell'interfaccia utente pronti per la produzione che è possibile eliminare nelle applicazioni:
Nota
Per una documentazione dettagliata sulla libreria dell'interfaccia utente Web, visitare il storybook della libreria dell'interfaccia utente Web. Sono disponibili altre documentazioni concettuali, guide introduttive ed esempi.
Compositi. Questi componenti sono soluzioni turn-key che implementano scenari di comunicazione comuni. È possibile aggiungere rapidamente videochiamate o chat (attualmente disponibili solo tramite la libreria dell'interfaccia utente Web) alle applicazioni. I compositi sono componenti open source di ordine superiore compilati usando i componenti dell'interfaccia utente.
Componenti dell'interfaccia utente. Questi componenti sono blocchi predefiniti open source che consentono di creare un'esperienza di comunicazione personalizzata. I componenti vengono offerti sia per le funzionalità di chiamata che per le chat che possono essere combinate per creare esperienze.
Queste librerie client dell'interfaccia utente usano tutti il linguaggio di progettazione e gli asset Fluent di Microsoft . L'interfaccia utente fluente offre un livello fondamentale per la libreria dell'interfaccia utente e viene usato attivamente nei prodotti Microsoft.
Insieme ai componenti dell'interfaccia utente, la libreria dell'interfaccia utente espone una libreria client con stato per la chiamata e la chat. Questo client è agnostico per qualsiasi framework di gestione dello stato specifico e può essere integrato con manager di stato comuni come Redux o React Context. Questa libreria client con stato può essere usata con i componenti dell'interfaccia utente per passare prop e metodi per i componenti dell'interfaccia utente per eseguire il rendering dei dati. Per altre informazioni, vedere Panoramica del client con stato.
Nota
Gli stessi componenti e compositi offerti nella libreria dell'interfaccia utente sono disponibili nel Kit di progettazione per Figma, in modo da poter progettare e prototipo rapidamente le esperienze di chiamata e chat.
Panoramica dei compositi
I compositi sono componenti di livello superiore costituiti da componenti dell'interfaccia utente che offrono soluzioni turn-key per scenari di comunicazione comuni usando Servizi di comunicazione di Azure. Gli sviluppatori possono creare facilmente un'istanza del composito usando un token di accesso Servizi di comunicazione di Azure e la configurazione necessaria per la chiamata o la chat.
| Composite | Modalità di utilizzo comuni |
|---|---|
| CallwithChatComposite | Esperienza che combina le funzionalità di chiamata e chat per consentire agli utenti di avviare o partecipare a una chiamata e a un thread di chat. Nell'esperienza, l'utente ha la possibilità di comunicare usando voce e video e di accedere a un thread di chat avanzato in cui i messaggi possono essere scambiati tra i partecipanti. Include il supporto per l'interoperabilità di Teams. |
| CallComposite | Esperienza di chiamata che consente agli utenti di avviare o partecipare a una chiamata. All'interno dell'esperienza gli utenti possono configurare i propri dispositivi, partecipare alla chiamata con il video e visualizzare altri partecipanti, inclusi i partecipanti con l'attivazione video. Per l'interoperabilità di Teams, è inclusa la funzionalità di lobby per l'attesa dell'ammissione dell'utente. |
| ChatComposite | Esperienza di chat in cui l'utente può inviare e ricevere messaggi. Gli eventi di thread come la digitazione, le letture, i partecipanti che entrano e lasciano vengono visualizzati all'utente come parte del thread di chat. |
Panoramica dei componenti dell'interfaccia utente
I componenti dell'interfaccia utente pure possono essere usati per gli sviluppatori, per comporre esperienze di comunicazione, da riquadri video in una griglia per mostrare i partecipanti remoti, per organizzare i componenti per adattarsi alle specifiche delle applicazioni. I componenti dell'interfaccia utente supportano la personalizzazione per offrire ai componenti l'aspetto giusto e cercare di corrispondere a una personalizzazione e allo stile delle applicazioni.
| Area | Componente | Descrizione |
|---|---|---|
| Chiamata | Layout griglia | Componente griglia per organizzare i riquadri video in una griglia NxN |
| Riquadro video | Componente che visualizza il flusso video quando disponibile e un componente statico predefinito quando non | |
| Barra di controllo | Contenitore per organizzare DefaultButtons per associare azioni di chiamata specifiche, ad esempio la disattivazione o la condivisione dello schermo | |
| Videogallery | Componente raccolta video a chiave di turno, che cambia in modo dinamico quando vengono aggiunti i partecipanti | |
| Dialpad | Componente per supportare l'input del numero di telefono e i toni DTMF. | |
| Chat | Thread del messaggio | Contenitore che esegue il rendering di messaggi di chat, messaggi di sistema e messaggi personalizzati |
| Casella di invio | Componente di input di testo con un pulsante di invio discreto | |
| Indicatore di stato del messaggio | Componente ricevuta in lettura a più stati per visualizzare lo stato del messaggio inviato | |
| Indicatore di digitazione | Componente di testo per eseguire il rendering dei partecipanti che digitano attivamente in un thread | |
| Comuni | Elemento partecipante | Componente comune per eseguire il rendering di una chiamata o di un partecipante di chat, incluso avatar e nome visualizzato |
| Elenco partecipanti | Componente comune per eseguire il rendering di un elenco di partecipanti di chiamata o chat, tra cui avatar e nome visualizzato |
Installazione della libreria dell'interfaccia utente Web
I client con stato vengono trovati come parte del @azure/communication-react pacchetto.
npm i --save @azure/communication-react
Qual è l'artefatto dell'interfaccia utente migliore per il progetto?
Informazioni su questi requisiti consentono di scegliere la libreria client appropriata:
- Quante personalizzazioni desideri? Le librerie client principali di Comunicazione di Azure non dispongono di un'esperienza utente e sono progettate in modo da poter creare qualsiasi esperienza utente desiderata. I componenti della libreria dell'interfaccia utente forniscono asset dell'interfaccia utente a costo di personalizzazione ridotta.
- Quali piattaforme sono destinate? Diverse piattaforme hanno diverse funzionalità.
I dettagli sulla disponibilità delle funzionalità nella libreria dell'interfaccia utente sono disponibili qui, ma i compromessi chiave vengono riepilogati nella tabella successiva.
| Libreria client/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Bassa | Bassa | ✔ | ✔ | ✔ |
| Componenti di base | Livello medio | Livello medio | ✔ | ✔ | ✔ |
| Librerie client principali | Alto | Alto | ✔ | ✔ | ✔ |
I compositi sono soluzioni turn-key che implementano scenari di comunicazione comuni. È possibile aggiungere esperienze di videochiamata alle applicazioni. I compositi sono componenti open source con ordine superiore che gli sviluppatori possono sfruttare per ridurre il tempo di sviluppo e la complessità di progettazione.
Panoramica dei compositi
| Composite | Modalità di utilizzo comuni |
|---|---|
| CallComposite | Esperienza di chiamata che consente agli utenti di avviare o partecipare a una chiamata. All'interno dell'esperienza, gli utenti possono configurare i propri dispositivi, partecipare alla chiamata con video e visualizzare altri partecipanti, inclusi quelli con video attivato. Per l'interoperabilità di Teams, CallComposite include funzionalità di lobby in modo che gli utenti possano attendere l'ammissione. |
| ChatComposite | Offre ChatComposite un'esperienza di messaggistica di testo in tempo reale agli utenti. In particolare, gli utenti possono inviare e ricevere un messaggio di chat con eventi da indicatori di digitazione e ricevuta di lettura. Inoltre, gli utenti possono anche ricevere messaggi di sistema, ad esempio partecipanti aggiunti o rimossi e modifiche al titolo della chat. |
Scenari compositi per la chiamata
Aggiunta di una chiamata video/audio
Gli utenti possono partecipare a una chiamata usando l'URL della riunione di Teams oppure possono configurare una chiamata Servizi di comunicazione di Azure. Questo approccio offre un'esperienza più semplice, proprio come l'applicazione Teams.
Esperienza pre-chiamata
Come partecipante della chiamata, è possibile specificare un nome e configurare una configurazione predefinita per i dispositivi audio e video. Allora sei pronto per passare alla chiamata.
Esperienza di chiamata
Il composito chiamante offre un'esperienza end-to-end, ottimizza il tempo di sviluppo e si concentra sul layout pulito.
L'esperienza chiamante offre tutte queste funzionalità in un componente composito, fornendo un percorso chiaro senza codice complesso, che comporta tempi di sviluppo più rapidi.
Qualità e sicurezza
I compositi per dispositivi mobili per le chiamate vengono inizializzati usando i token di accesso Servizi di comunicazione di Azure.
Altre informazioni
Se sono necessari altri dettagli sui compositi per dispositivi mobili per le chiamate, vedere casi d'uso.
Scenari compositi per la chat
Importante
Questa funzionalità di Servizi di comunicazione di Azure è attualmente in anteprima.
Le API di anteprima e gli SDK vengono forniti senza un contratto a livello di servizio. È consigliabile non usarli per i carichi di lavoro di produzione. Alcune funzionalità potrebbero non essere supportate o potrebbero avere funzionalità vincolate.
Per altre informazioni, vedere Condizioni aggiuntive per l'uso per le anteprime di Microsoft Azure.
Esperienza di chat
Offre ChatComposite esperienze di messaggistica di testo in tempo reale. Con la flessibilità e la scalabilità, è ChatComposite possibile adattarsi a layout o visualizzazioni diverse dalle applicazioni senza complessità. È anche possibile scegliere di non avere la ChatComposite visualizzazione visualizzata e ricevere solo notifiche per soddisfare le esigenze aziendali diverse.
| iOS | Android |
|---|---|
|
|
Qualità e sicurezza
Analogamente a CallComposite, ChatComposite viene usato anche Servizi di comunicazione di Azure token di accesso. Per garantire che solo gli utenti con autorizzazioni appropriate possano accedere alla chat, è necessario aggiungere i token utente in un thread di chat valido prima di avviare l'esperienza chat.
Altre informazioni
Se sono necessari altri dettagli sui compositi per dispositivi mobili per la chat, vedere casi d'uso.
Qual è l'artefatto dell'interfaccia utente migliore per il progetto?
Questi requisiti consentono di scegliere la libreria client corretta:
Quante personalizzazioni desideri? Servizi di comunicazione di Azure librerie client principali non hanno un'esperienza utente e sono progettate in modo da poter creare qualsiasi esperienza utente desiderata. I componenti della libreria dell'interfaccia utente forniscono asset dell'interfaccia utente a costo di personalizzazione ridotta.
Quali piattaforme sono destinate? Diverse piattaforme hanno diverse funzionalità.
Ecco alcuni compromessi chiave:
| Libreria client/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Bassa | Bassa | ✔ | ✔ | ✔ |
| Librerie client principali | Alto | Alto | ✔ | ✔ | ✔ |
Per altre informazioni sulla disponibilità delle funzionalità nella libreria dell'interfaccia utente, vedere Casi d'uso della libreria dell'interfaccia utente.