Introduzione ai bundle JavaScript della libreria dell'interfaccia utente di Servizi di comunicazione di Azure che eseguono chiamate alla coda di chiamate di Teams e all'operatore automatico

Articolo
12/04/2024

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.

Per facilitare le comunicazioni aziendali migliori con i clienti, la libreria dell'interfaccia utente di Servizi di comunicazione di Azure fornisce bundle JavaScript per provare soluzioni multipiattaforma per l'uso della libreria dell'interfaccia utente. Questa esercitazione è il modo più rapido per accedere a una chiamata usando la libreria dell'interfaccia utente e Teams.

Dopo questa esercitazione:

Consente di inserire un'esperienza di chiamata in qualsiasi pagina Web che collega i clienti all'azienda
Creare un'esperienza di chiamata in piattaforme diverse da React

Prerequisiti

Questi passaggi devono essere completati prima di poter completare l'intera esperienza. Contattare l'amministratore di Teams se si hanno domande sulla configurazione delle applicazioni vocali di Teams o della federazione del tenant di Teams.

Visual Studio Code in una delle piattaforme supportate.
è consigliabile Node.js, Active LTS e Maintenance LTS Node 20 LTS. Usare il comando node --version per controllare la versione in uso.
Risorsa di Servizi di comunicazione di Azure. Creare una risorsa di comunicazione.
Completare la configurazione del tenant di Teams per l'interoperabilità con la risorsa Servizi di comunicazione di Azure
Uso delle code di chiamata di Teams e delle Servizi di comunicazione di Azure.
Uso degli operatori automatici di Teams e delle Servizi di comunicazione di Azure.

Verifica della presenza di node e VS Code

È possibile verificare che Node sia stato installato correttamente con questo comando.

node -v

L'output indica la versione installata, ha esito negativo se Node non è installato e aggiunto a PATH. Analogamente a Node, è possibile verificare se Visual Studio Code è installato con questo comando.

code --version

Analogamente a Node questo comando ha esito negativo se si verifica un problema durante l'installazione di VS Code nel computer.

Introduzione

Questo progetto viene creato con 4 semplici passaggi.

Creare il progetto
Ottenere il codice
Configurare Servizi di comunicazione di Azure e Teams
Eseguire l'applicazione

1. Creazione del progetto

Per iniziare, verrà creata una nuova cartella per il progetto eseguendo il comando seguente nel terminale o nel prompt dei comandi.

Per Windows usando il prompt dei comandi, usare questo comando:

mkdir ui-library-js-test-application; cd ui-library-js-test-application

Per macOS tramite terminale, usare questo comando:

mkdir ui-library-js-test-application && cd ui-library-js-test-application

Questi script creano una nuova cartella e lo spostano in esso.

Successivamente si vuole creare un nuovo file denominato index.html. Questa è la pagina Web a cui allegare l'esperienza di chiamata.

2. Recupero del codice

Prima di tutto, scaricare il bundle JavaScript javaScript da un file JavaScript composito di chiamata in uscita. Inserire questo bundle nella stessa directory di index.html.

Successivamente si vuole aprire index.html in VS Code e aggiungere il frammento di codice seguente.

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Embedded call composite basic example</title>
  <style>
    /* These styles are something we provide for the calling experience, please update for your needs */
    /* these apply to the calling experience you will need to style your button how your desire */
    #outbound-call-composite-container-ready {
      height: 22rem;
      width: 32rem;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      box-shadow: 0 0 0.5rem 0;
      border-radius: 1rem;
      padding: 0.5rem;
      z-index: 5;
    }
  </style>
</head>

<body>
  <div id="outbound-call-composite-container"></div>
  <button id="start-call-button">Your calling button</button>
  <!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping -->
  <script src="./outboundCallComposite.js"></script>
  <script type="module">
    const createCallingExperience = async () => {
      const userId = { communicationUserId: "<Add your ACS ID here>" };
      const token = "<Enter your ACS token>";
      const displayName = "Enter the DisplayName for your user";

      const callAdapter = await outboundCallComposite.loadCallComposite(
        {
          userId: userId,
          token: token,
          displayName: displayName,
          targetCallees: [
            { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" },
          ], // Provide the identifier you want to call, can be flat as a string.
        },
        document.getElementById("outbound-call-composite-container"),
        {
          options: {
            callControls: {
              cameraButton: true,
              screenShareButton: false,
              moreButton: true,
              peopleButton: false,
              raiseHandButton: false,
              displayType: "compact",
            },
            localVideoTile: { position: "floating" },
          },
        }
      );

      window.onbeforeunload = () => {
        callAdapter.dispose();
      };
      // Update the container id to trigger the styles we set above
      const container = document.getElementById("outbound-call-composite-container");
      container.setAttribute("id", "outbound-call-composite-container-ready");
    };
    const startCallButton = document.getElementById("start-call-button");
    startCallButton.onclick = createCallingExperience;
  </script>
</body>

[! IMPORTANTE] È importante notare che questo file index.html e il bundle outboundCallComposite.js JavaScript devono trovarsi nella stessa cartella se si desidera non modificare alcuna importazione in questo file.

3. Configurazione di Servizi di comunicazione di Azure e dell'applicazione Teams Voice

Successivamente si vuole creare l'identità dell'utente locale in modo che sia possibile usarla per autenticare l'utente locale e avviare la chiamata. Dopo aver ottenuto questi valori per id e token per l'utente, è necessario apportare alcune modifiche nel index.html file apportato in precedenza.

const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";

Si vogliono aggiornare queste informazioni con userId e token ottenute da portale di Azure o dall'interfaccia della riga di comando di Azure. È anche consigliabile impostare displayName.

Successivamente si vuole apportare una modifica per impostare l'ID dell'account di risorsa per l'applicazione vocale di Teams recuperata in precedenza quando è stata federata la risorsa di Servizi di comunicazione di Azure. Se non è stato fatto, contattare l'amministratore di Teams.

const callAdapter = await outboundCallComposite.loadCallComposite(
    {
        userId: userId,
        token: token,
        displayName: displayName,
        targetCallees: [
        { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value.
        ],
    },
    document.getElementById("outbound-call-composite-container")
);

4. Esecuzione dell'applicazione

Ora che è stata completata tutta la configurazione, è possibile eseguire l'applicazione.

Aprire una finestra del terminale o del prompt dei comandi in tale directory ed eseguire il comando seguente.

npx http-server@latest -p 3000

Questo script che usa Node avvia un server HTTP e ospita il file e il index.html bundle JavaScript. In un browser aperto http://localhost:3000. Dovrebbe essere visualizzata una pagina bianca con un pulsante e quando si fa clic su di essa dovrebbe essere visualizzata la schermata seguente.

[! IMPORTANTE] Nota: se si tenta di passare alla pagina che non usa l'host locale, l'esperienza di chiamata non funzionerà a causa di motivi di sicurezza.

Fare clic sul start call pulsante visualizzato nella libreria CallComposite dell'interfaccia utente per avviare una chiamata all'app vocale di Teams.

Acquisizione in produzione

Attualmente questa esercitazione e i bundle JS sono in anteprima pubblica. Se sei entusiasta di fare clic su Chiama e vuoi vedere come puoi usare CallComposite per creare esperienze Click to Call per il tuo prodotto oggi, abbiamo un post di discussione nel repository GitHub che mostrerà come integrare la libreria dell'interfaccia utente in altri framework di Node. I passaggi dell'esercitazione appena usata sono stati tradotti direttamente in ciò che viene descritto in questa presentazione e indicare il caricamento dei compositi della libreria dell'interfaccia utente in altri framework rispetto a React.

Passaggi successivi

Per altre informazioni sulle applicazioni vocali di Teams, vedere la documentazione sugli operatori automatici di Teams e sulle code delle chiamate di Teams. In alternativa, vedere l'esercitazione per creare un'esperienza più completa usando React.

Guida introduttiva: Aggiungere l'app chiamante a una coda di chiamate di Teams

Guida introduttiva: Aggiungere l'app chiamante a un operatore automatico di Teams

Guida introduttiva: Introduzione alla libreria dell'interfaccia utente di Servizi di comunicazione di Azure alla coda di chiamate di Teams e all'operatore automatico

Condividi tramite