Comunicação: Fazer uma chamada telefónica

A integração dos recursos de chamada telefônica dos Serviços de Comunicação do Azure em um aplicativo personalizado de Linha de Negócios (LOB) oferece vários benefícios importantes para as empresas e seus usuários:

• Permite uma comunicação contínua e em tempo real entre funcionários, clientes e parceiros, diretamente a partir do aplicativo LOB, eliminando a necessidade de alternar entre várias plataformas ou dispositivos.
• Melhora a experiência do usuário e melhora a eficiência operacional geral.
• Facilita a resolução rápida de problemas, pois os usuários podem se conectar rapidamente com equipes de suporte relevantes ou especialistas no assunto de forma rápida e fácil.

Neste exercício, você irá:

• Explore o recurso de chamada telefônica no aplicativo.
• Percorra o código para saber como o recurso de chamada telefônica é criado.

Usando o recurso de chamada telefônica

1. No exercício anterior , você criou um recurso do Azure Communication Services (ACS) e iniciou o banco de dados, o servidor Web e o servidor de API. Você também atualizou os seguintes valores no arquivo .env .

   ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
   ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
   ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
   CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
   CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>
   

   Certifique-se de ter concluído o exercício anterior antes de continuar.

2. Volte para o navegador (http://localhost:4200), localize a grade de dados e selecione Entrar em contato com o cliente seguido por Ligar para o cliente na primeira linha.

   

3. Um componente de chamada telefônica será adicionado ao cabeçalho. Introduza o seu número de telefone para o qual pretende ligar (certifique-se de que começa com + e inclui o código do país) e selecione Chamar. Ser-lhe-á pedido que permita o acesso ao seu microfone.

   

4. Selecione Desligar para encerrar a chamada. Selecione Fechar para fechar o componente de chamada telefônica.

Explorando o código de chamada telefônica

1. Abra o arquivo customers-list.component.ts . O caminho completo para o arquivo é client/src/app/customers-list/customers-list.component.ts.

2. Observe que openCallDialog() envia uma CustomerCall mensagem e o número de telefone do cliente usando um barramento de eventos.

   openCallDialog(data: Phone) {
       this.eventBus.emit({ name: Events.CustomerCall, value: data });
   }
   

   Observação

   O código do barramento de eventos pode ser encontrado no arquivo eventbus.service.ts se você estiver interessado em explorá-lo mais. O caminho completo para o arquivo é client/src/app/core/eventbus.service.ts.

3. A função do ngOnInit() componente de cabeçalho assina o CustomerCall evento enviado pelo barramento de eventos e exibe o componente de chamada telefônica. Você pode encontrar esse código em header.component.ts.

   ngOnInit() {
       this.subscription.add(
           this.eventBus.on(Events.CustomerCall, (data: Phone) => {
               this.callVisible = true; // Show phone call component
               this.callData = data; // Set phone number to call
           })
       );
   }
   

4. Abra phone-call.component.ts. Reserve um momento para expor o código. O caminho completo para o arquivo é client/src/app/phone-call/phone-call.component.ts. Observe os seguintes recursos principais:

   • Recupera um token de acesso dos Serviços de Comunicação do Azure chamando a acsService.getAcsToken() função em ngOnInit();
   • Adiciona um "discador telefônico" à página. Você pode ver o discador clicando na entrada do número de telefone no cabeçalho.
   • Inicia e termina uma chamada usando as startCall() funções e endCall() respectivamente.

5. Antes de examinar o código que faz a chamada telefônica, vamos examinar como o token de acesso ACS é recuperado e como os objetos de chamada telefônica são criados. Localize a ngOnInit() função no phone-call.component.ts.

   async ngOnInit() {
       if (ACS_CONNECTION_STRING) {
           this.subscription.add(
               this.acsService.getAcsToken().subscribe(async (user: AcsUser) => {
                   const callClient = new CallClient();
                   const tokenCredential = new AzureCommunicationTokenCredential(user.token);
                   this.callAgent = await callClient.createCallAgent(tokenCredential);
               })
           );
       }
   }
   

   Esta função executa as seguintes ações:

   • Recupera um userId do ACS e um token de acesso chamando a acsService.getAcsToken() função.
   • Depois que o token de acesso é recuperado, o código executa as seguintes ações:
     • Cria uma nova instância de e CallClient usando o token de AzureCommunicationTokenCredential acesso.
     • Cria uma nova instância de uso dos CallAgentCallClient objetos e AzureCommunicationTokenCredential . Mais tarde, você verá que CallAgent é usado para iniciar e terminar uma chamada.

6. Abra acs.services.ts e localize a getAcsToken() função. O caminho completo para o arquivo é client/src/app/core/acs.service.ts. A função faz uma solicitação HTTP GET para a /acstoken rota exposta pelo servidor de API.

   getAcsToken(): Observable<AcsUser> {
       return this.http.get<AcsUser>(this.apiUrl + 'acstoken')
       .pipe(
           catchError(this.handleError)
       );
   }
   

7. Uma função de servidor de API chamada createACSToken() recupera o userId e o token de acesso e o retorna ao cliente. Ele pode ser encontrado no arquivo server/typescript/acs.ts .

   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   const connectionString = process.env.ACS_CONNECTION_STRING as string;
   
   async function createACSToken() {
   if (!connectionString) return { userId: '', token: '' };
   
   const tokenClient = new CommunicationIdentityClient(connectionString);
   const { user, token } = await tokenClient.createUserAndToken(["voip"]);
   return { userId: user.communicationUserId, token };
   }
   

   Esta função executa as seguintes ações:

   • Verifica se um valor ACS connectionString está disponível. Caso contrário, retorna um objeto com um vazio userId e token.
   • Cria uma nova instância e CommunicationIdentityClient passa o connectionString valor para ela.
   • Cria um novo usuário e token usando tokenClient.createUserAndToken() com o escopo "voip".
   • Retorna um objeto que contém os userId valores e token .

8. Agora que você já viu como o userId e o token são recuperados, volte e phone-call.component.ts localize a startCall() função.

9. Esta função é chamada quando Call é selecionado no componente de chamada telefônica. Ele usa o CallAgent objeto mencionado anteriormente para iniciar uma chamada. A callAgent.startCall() função aceita um objeto que representa o número a ser chamado e o número de telefone ACS usado para fazer a chamada.

   startCall() {
       this.call = this.callAgent?.startCall(
           [{ phoneNumber: this.customerPhoneNumber }], {
           alternateCallerId: { phoneNumber: this.fromNumber }
       });
       console.log('Calling: ', this.customerPhoneNumber);
       console.log('Call id: ', this.call?.id);
       this.inCall = true;
   
       // Adding event handlers to monitor call state
       this.call?.on('stateChanged', () => {
           console.log('Call state changed: ', this.call?.state);
           if (this.call?.state === 'Disconnected') {
               console.log('Call ended. Reason: ', this.call.callEndReason);
               this.inCall = false;
           }
       });
   }
   

10. A endCall() função é chamada quando Hang Up é selecionado no componente de chamada telefônica.

    endCall() {
        if (this.call) {
            this.call.hangUp({ forEveryone: true });
            this.call = undefined;
            this.inCall = false;
        }
        else {
            this.hangup.emit();
        }
    }
    

    Se uma chamada estiver em andamento, a call.hangUp() função será chamada para encerrar a chamada. Se nenhuma chamada estiver em andamento, o hangup evento será emitido para o componente pai do cabeçalho para ocultar o componente de chamada telefônica.

11. Antes de passar para o próximo exercício, vamos rever os principais conceitos abordados neste exercício:

    • Um userId do ACS e um token de acesso são recuperados do servidor de API usando a acsService.createUserAndToken() função.
    • O token é usado para criar um CallClient e CallAgent objeto.
    • O CallAgent objeto é usado para iniciar e terminar uma chamada chamando as callAgent.startCall() funções e callAgent.hangUp() respectivamente.

12. Agora que você aprendeu como as chamadas telefônicas podem ser integradas a um aplicativo, vamos mudar nosso foco para usar os Serviços de Comunicação do Azure para enviar mensagens de email e SMS.

Próximo Passo