Introdução à Preparação de Chamadas e à Biblioteca de Interface do Usuário

Artigo
06/08/2023

Importante

Este recurso dos Serviços de Comunicação do Azure estão atualmente em versão prévia.

Versões prévias das APIs e dos SDKs são fornecidas sem um contrato de nível de serviço. É recomendável que você não as use para cargas de trabalho de produção. Alguns recursos podem não ter suporte ou talvez ter restrição de recursos.

Para saber mais, confira os Termos de Uso Complementares das Versões Prévias do Microsoft Azure.

Fluxo de um usuário ingressando em uma chamada de um link de email

Quando um usuário pretende ingressar em uma chamada da Web, seu foco principal está na conversa que ele deseja ter com as outras pessoas na chamada – essa persona pode ser um médico, professor, consultor financeiro ou amigo. A conversa em si pode representar estresse suficiente, muito menos navegar pelo processo de garantir que eles e seus dispositivos estejam prontos para serem vistos e/ou ouvidos. É essencial garantir que o dispositivo e o cliente que eles estão usando estejam prontos para a chamada

Pode ser impossível prever cada problema ou combinação de problemas que podem surgir, mas aplicando este tutorial, você pode:

Reduzir a probabilidade de problemas que afetam um usuário durante uma chamada
Expor apenas um problema se ele vai afetar negativamente a experiência
Evitar fazer com que um usuário procure uma resolução; Oferecer ajuda guiada para resolver o problema

Relacionado a este tutorial está a Ferramenta de Diagnóstico de Teste de Rede dos Serviços de Comunicação do Azure. Os usuários podem usar a Ferramenta de Diagnóstico de Teste de Rede para solucionar problemas em cenários de suporte ao cliente.

Estrutura do tutorial

Neste tutorial, nós usamos a Biblioteca de interface do usuário dos Serviços de Comunicação do Azure para criar uma experiência que prepara o usuário para ingressar em uma chamada. Este tutorial é estruturado em três partes:

Pré-requisitos

Visual Studio Code em uma das plataformas compatíveis.
Node.js, versões Active LTS e versões LTS de manutenção (10.14.1 recomendada). Use o comando node --version para verificar sua versão.

Código de download

Acesse o código completo deste tutorial sobre GitHub.

Estrutura do Aplicativo

Os usuários têm vários obstáculos a serem cruzados ao ingressar em uma chamada do suporte ao navegador para selecionar a câmera correta. Este tutorial usa React com a Biblioteca de Interface do Usuário dos Serviços de Comunicação do Azure para criar um aplicativo que executa verificações de preparação de chamadas. Essas verificações orientam o usuário pelo suporte ao navegador, permissões de câmera e microfone e, por fim, pela configuração do dispositivo.

O fluxo de usuário do aplicativo é o seguinte:

fluxograma mostrando o fluxo do usuário pela amostra de preparação de chamada

Seu aplicativo final solicita ao usuário um navegador com suporte e acesso para a câmera e o microfone e, em seguida, permite que o usuário escolha e visualize suas configurações de microfone e câmera antes de ingressar na chamada:

Gif mostrando a experiência de ponta a ponta da preparação de chamada e configuração de dispositivo

Configurar o Projeto

Para configurar o aplicativo React, usamos o modelo create-react-app para este início rápido. Esse comando create-react-app cria um aplicativo TypeScript fácil de executar da plataforma React. O comando instala os pacotes npm dos Serviços de Comunicação do Azure, e o pacote npm FluentUI para criar interface do usuário avançada. Para obter mais informações sobre create-react-app, consulte: Introdução ao React.

# Create an Azure Communication Services App powered by React.
npx create-react-app ui-library-call-readiness-app --template communication-react 

# Change to the directory of the newly created App.
cd ui-library-call-readiness-app

No final deste processo, você deve ter um aplicativo completo dentro da pasta ui-library-call-readiness-app. Para este início rápido, modificamos os arquivos dentro da pasta src.

Instalar pacotes

Como esse recurso está em versão prévia pública, você deve usar as versões beta do Serviços de Comunicação do Azure pacotes npm. Use o comando npm install para instalar estes pacotes:

# Install Public Preview versions of the Azure Communication Services Libraries.
npm install @azure/communication-react@1.5.1-beta.1 @azure/communication-calling@1.10.0-beta.1

Observação

Se você estiver instalando os pacotes de comunicação em um aplicativo existente, @azure/communication-react atualmente não fornece suporte para React v18. Para fazer downgrade para React v17 ou menos, siga estas instruções.

Configuração inicial do aplicativo

Para começar, substituímos o conteúdo padrão App.tsx create-react-app por uma configuração básica que:

Registra os ícones necessários que usamos neste tutorial
Define um provedor de temas que pode ser usado para definir um tema personalizado
Criar um StatefulCallClient com um provedor que fornece aos componentes filho acesso ao cliente de chamada

src/App.tsx

import { CallClientProvider, createStatefulCallClient, FluentThemeProvider, useTheme } from '@azure/communication-react';
import { initializeIcons, registerIcons, Stack, Text } from '@fluentui/react';
import { DEFAULT_COMPONENT_ICONS } from '@azure/communication-react';
import { CheckmarkCircle48Filled } from '@fluentui/react-icons';

// Initializing and registering icons should only be done once per app.
initializeIcons();
registerIcons({ icons: DEFAULT_COMPONENT_ICONS });

const USER_ID = 'user1'; // In your production app replace this with an Azure Communication Services User ID
const callClient = createStatefulCallClient({ userId: { communicationUserId: USER_ID } });

/**
 * Entry point of a React app.
 */
const App = (): JSX.Element => {
  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        <TestComplete />
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

export default App;

/**
 * Final page to highlight the call readiness checks have completed.
 * Replace this with your own App's next stage.
 */
export const TestComplete = (): JSX.Element => {
  const theme = useTheme();
  return (
    <Stack verticalFill verticalAlign="center" horizontalAlign="center" tokens={{ childrenGap: "1rem" }}>
      <CheckmarkCircle48Filled primaryFill={theme.palette.green} />
      <Text variant="xLarge">Call Readiness Complete</Text>
      <Text variant="medium">From here you can have the user join their call using their chosen settings.</Text>
    </Stack>
  );
};

Executar Create React App

Vamos testar nossa configuração executando:

# Run the React App
npm start

Depois que o aplicativo estiver em execução, visite http://localhost:3000 no navegador para ver o aplicativo em execução. Você deverá ver uma marca de seleção verde com uma mensagem Test Complete.

Próximas etapas

Parte 1: Suporte ao navegador

Compartilhar via