Panoramica della libreria dell'interfaccia utente
La libreria dell'interfaccia utente semplifica la creazione di esperienze utente di comunicazione moderne 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 libro dello storybook della libreria dell'interfaccia utente Web. Sono disponibili documentazione concettuale aggiuntiva, guide introduttive ed esempi.
Compositi. Questi componenti sono soluzioni chiavi in volta che implementano scenari di comunicazione comuni. È possibile aggiungere rapidamente esperienze di videochiamata o chat (attualmente disponibili solo tramite la libreria dell'interfaccia utente Web) alle applicazioni. I compositi sono componenti open source di ordine superiore creati 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 sono 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 e gli asset di progettazione Fluent di Microsoft. L'interfaccia utente fluent fornisce un livello di base 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 chiamate e chat. Questo client è indipendente da qualsiasi framework di gestione dello stato specifico e può essere integrato con gestori di stato comuni come Redux o React Context. Questa libreria client con stato può essere usata con i componenti dell'interfaccia utente per passare proprietà e metodi per i componenti dell'interfaccia utente per 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 creare rapidamente prototipi delle esperienze di chiamata e chat.
Panoramica dei compositi
I compositi sono componenti di livello superiore composti da componenti dell'interfaccia utente che offrono soluzioni chiavi in volta per scenari di comunicazione comuni che usano Servizi di comunicazione di Azure. Gli sviluppatori possono creare facilmente un'istanza di Composite usando un token di accesso Servizi di comunicazione di Azure e la configurazione richiesta attribuita per la chiamata o la chat.
| Composita | Casi d'uso |
|---|---|
| CallwithChatComposite | Esperienza di combinazione di 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 sia usando la voce che il video e l'accesso 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 consentire all'utente di attendere l'ammissione. |
| ChatComposite | Esperienza di chat in cui l'utente può inviare e ricevere messaggi. Gli eventi di thread, ad esempio la digitazione, le letture, i partecipanti che entrano e lasciano vengono visualizzati all'utente come parte del thread di chat. |
Panoramica del componente dell'interfaccia utente
I componenti dell'interfaccia utente pure possono essere usati per gli sviluppatori, per comporre esperienze di comunicazione, dall'unione di riquadri video a una griglia per mostrare i partecipanti remoti, all'organizzazione dei componenti in base alle specifiche delle applicazioni. I componenti dell'interfaccia utente supportano la personalizzazione per offrire ai componenti l'aspetto giusto e l'aspetto di un marchio e uno stile delle applicazioni.
| Area | Componente | Descrizione |
|---|---|---|
| Chiamata in corso | Layout griglia | Componente Griglia per organizzare i riquadri video in una griglia NxN |
| Riquadro video | Componente che mostra il flusso video quando disponibile e un componente statico predefinito quando non disponibile | |
| Barra di controllo | Contenitore per organizzare DefaultButtons in modo da essere associati ad azioni di chiamata specifiche, ad esempio disattivare audio o condividere schermata | |
| VideoGallery | Componente della raccolta video chiavi in mano che cambia in modo dinamico man mano che vengono aggiunti i partecipanti | |
| Dialpad | Componente per supportare l'input del numero di telefono e i toni DTMF | |
| Chat | Thread messaggio | Contenitore che esegue il rendering di messaggi di chat, messaggi di sistema e messaggi personalizzati |
| Casella di invio | Componente input di testo con un pulsante di invio separato | |
| Casella di invio RTF | Componente di input RTF con opzioni di formattazione e un pulsante di invio discreto | |
| Indicatore di stato del messaggio | Componente ricezione lettura multi-stato per visualizzare lo stato del messaggio inviato | |
| Indicatore di digitazione | Componente di testo per eseguire il rendering dei partecipanti che stanno digitano attivamente in un thread | |
| Comune | Elemento partecipante | Componente comune per eseguire il rendering di una chiamata o di un partecipante di chat, inclusi avatar e nome visualizzato |
| Elenco partecipanti | Componente comune per il rendering di un elenco di partecipanti di chiamata o chat, inclusi 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?
Comprendere questi requisiti consente di scegliere la libreria client appropriata:
- Quanto personalizzazione desideri? Le librerie client di Base di Comunicazione di Azure 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 costi ridotti di personalizzazione.
- Quali piattaforme sono destinate? Diverse piattaforme hanno funzionalità diverse.
I dettagli sulla disponibilità delle funzionalità nella libreria dell'interfaccia utente sono disponibili qui, ma i compromessi principali sono riepilogati nella tabella successiva.
| Libreria client/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata in corso | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Basso | Basso | ✔ | ✔ | ✔ |
| Componenti di base | Medio | Medio | ✔ | ✔ | ✔ |
| Librerie client di base | Alto | Alta | ✔ | ✔ | ✔ |
I compositi sono soluzioni chiavi in volta che implementano scenari di comunicazione comuni. È possibile aggiungere esperienze di videochiamata alle applicazioni. I compositi sono componenti open source di ordine superiore che gli sviluppatori possono sfruttare per ridurre i tempi di sviluppo e la complessità di progettazione.
Panoramica dei compositi
| Composita | Casi d'uso |
|---|---|
| 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 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 agli utenti un'esperienza di messaggistica testuale in tempo reale. 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 come il partecipante aggiunto o rimosso e le modifiche al titolo della chat. |
Scenari compositi per la chiamata
Unione 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 di pre-chiamata
Come partecipante della chiamata, è possibile specificare un nome e configurare una configurazione predefinita per i dispositivi audio e video. Allora sei pronto a 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 di chiamata offre tutte queste funzionalità in un unico componente composito, fornendo un percorso chiaro senza codice complesso, che porta a tempi di sviluppo più rapidi.
Qualità e sicurezza
I compositi per dispositivi mobili per le chiamate vengono inizializzati usando Servizi di comunicazione di Azure token di accesso.
Altri dettagli
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 anteprime di API e SDK vengono fornite senza un contratto di servizio. È consigliabile non usarle per carichi di lavoro di produzione. Alcune funzionalità potrebbero non essere supportate o risultare limitate.
Per altre informazioni, vedere le Condizioni per l'utilizzo supplementari delle anteprime di Microsoft Azure.
Esperienza di chat
ChatComposite Offre esperienze di messaggistica di testo in tempo reale. Tenendo presente la flessibilità e la scalabilità, può ChatComposite adattarsi a layout o visualizzazioni diverse dalle applicazioni senza complessità. È anche possibile scegliere di non visualizzare la ChatComposite visualizzazione e ricevere notifiche solo per soddisfare le diverse esigenze aziendali.
| iOS | Android |
|---|---|
|
|
Qualità e sicurezza
Analogamente a CallComposite, usa ChatComposite anche Servizi di comunicazione di Azure token di accesso. Per garantire che solo gli utenti con l'autorizzazione appropriata possano accedere alla chat, è necessario aggiungere i token utente in un thread di chat valido prima di avviare l'esperienza di chat.
Altri dettagli
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 appropriata:
Quanto personalizzazione desideri? Servizi di comunicazione di Azure librerie client di base 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 costi ridotti di personalizzazione.
Quali piattaforme sono destinate? Diverse piattaforme hanno funzionalità diverse.
Ecco alcuni compromessi chiave:
| Libreria client/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata in corso | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Basso | Basso | ✔ | ✔ | ✔ |
| Librerie client di base | Alto | Alta | ✔ | ✔ | ✔ |
Per altre informazioni sulla disponibilità delle funzionalità nella libreria dell'interfaccia utente, vedere Casi d'uso della libreria dell'interfaccia utente.