Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
La libreria dell'interfaccia utente semplifica la creazione di esperienze utente di comunicazione moderne usando Servizi di comunicazione di Azure. È anche possibile usare la libreria dell'interfaccia utente per connettersi con Open AI o con qualsiasi altro modello. L'SDK offre una libreria di componenti dell'interfaccia utente pronti per la produzione che è possibile inserire nelle applicazioni:
Nota
Per la documentazione dettagliata sulla libreria dell'interfaccia utente Web, visitare lo Storybook della libreria dell'interfaccia utente Web. Sono disponibili documentazione concettuale aggiuntiva, guide introduttive ed esempi.
Insiemi di componenti. 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 utilizzata con i componenti dell'interfaccia utente per passare proprietà e metodi ai componenti dell'interfaccia utente che eseguono il rendering dei dati. Per ulteriori informazioni, vedere Panoramica del client stateful.
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 dell'insieme dei componenti
I Compositi sono componenti di livello superiore composti da componenti dell'interfaccia utente che offrono soluzioni chiavi in mano per scenari di comunicazione comuni che usano Servizi di comunicazione di Azure. Gli sviluppatori possono facilmente creare un'istanza dell'insieme di componenti utilizzando un token di accesso di Servizi di comunicazione di Azure e la configurazione necessaria per la chiamata o la chat.
| Insieme di componenti | 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 la sensazione e l'aspetto giusti per adattarsi al marchio e allo stile di un'applicazione.
| Area | Componente | Descrizione |
|---|---|---|
| Chiamata | 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 di raccolta video pronto all’uso che cambia dinamicamente man mano che vengono aggiunti partecipanti | |
| Dialpad | Componente per supportare l'input del numero di telefono e i toni DTMF | |
| Chat | Thread di messaggi | 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 testo formattato | Componente di input RTF con opzioni di formattazione e un pulsante di invio discreto | |
| Indicatore di stato del messaggio | Componente multi-stato di conferma di lettura per visualizzare lo stato del messaggio inviato | |
| Indicatore di digitazione | Componente di testo per mostrare i partecipanti che stanno digitando attivamente all'interno di un thread | |
| Comuni | 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 pacchetto @azure/communication-react.
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 verranno utilizzate come destinazione? 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 cliente/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Basso | Basso | ✔ | ✔ | ✔ |
| Componenti di base | Media | Media | ✔ | ✔ | ✔ |
| Librerie client di base | Alto | Alto | ✔ | ✔ | ✔ |
Gli insiemi di componenti sono soluzioni pronte all’uso 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 dell'insieme di componenti
| Insieme di componenti | 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 | Il ChatComposite offre agli utenti un'esperienza di messaggistica testuale in tempo reale. In particolare, gli utenti possono inviare e ricevere un messaggio di chat che includono eventi come indicatori di digitazione e conferma 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
Partecipare a 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. A questo punto si è pronti a passare alla chiamata.
Esperienza di chiamata
L'insieme di componenti per le chiamate 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
L’insieme di componenti per dispositivi mobili per le chiamate vengono inizializzati utilizzando i token di accesso di Servizi di comunicazione di Azure.
Altri dettagli
Se hai bisogno di ulteriori dettagli sui compositi mobili per le chiamate, consulta i casi d'uso.
Scenari compositi per la chat
Importante
Questa funzionalità di Servizi di comunicazione di Azure è attualmente in anteprima. Le funzionalità in anteprima sono disponibili pubblicamente e possono essere usate da tutti i clienti Microsoft nuovi ed esistenti.
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 potrebbero essere vincolate.
Per altre informazioni, vedere le Condizioni supplementari per l'uso 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à, ChatComposite si può adattare a layout o visualizzazioni diversi delle 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, anche ChatComposite utilizza i token di accesso dei Servizi di comunicazione di Azure. 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 hai bisogno di ulteriori dettagli sui compositi mobili per la chat, consulta i 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? Le librerie client di base dei Servizi di Comunicazione di Azure non includono un'interfaccia utente e sono progettate per consentirti di creare qualsiasi interfaccia utente desiderata. I componenti della libreria dell'interfaccia utente forniscono asset dell'interfaccia utente a costi ridotti di personalizzazione.
A quali piattaforme puntate? Diverse piattaforme hanno funzionalità diverse.
Ecco alcuni compromessi chiave:
| La libreria client/SDK | Complessità dell'implementazione | Possibilità di personalizzazione | Chiamata | Chat | Interoperabilità di Teams |
|---|---|---|---|---|---|
| Componenti compositi | Basso | Basso | ✔ | ✔ | ✔ |
| Librerie client di base | Alto | Alto | ✔ | ✔ | ✔ |
Per altre informazioni sulla disponibilità delle funzionalità nella libreria dell'interfaccia utente, vedere Casi d'uso della libreria dell'interfaccia utente.