Comunicação: Fazendo uma chamada telefônica

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

Permite a comunicação contínua e em tempo real entre funcionários, clientes e parceiros, diretamente de dentro do aplicativo LOB, eliminando a necessidade de alternar entre várias plataformas ou dispositivos.
Aprimora 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ê vai:

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

No exercício anterior , você criou um recurso dos Serviços de Comunicação do Azure (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>
```
Verifique se você concluiu o exercício anterior antes de continuar.
Volte para o navegador (http://localhost:4200), localize o datagrid e selecione Contatar o Cliente seguido pelo Cliente de Chamada na primeira linha.
Um componente de chamada telefônica será adicionado ao cabeçalho. Insira seu número de telefone que você gostaria de chamar (verifique se ele começa com + e inclui o código do país) e selecione Chamada. Você será solicitado a permitir o acesso ao seu microfone.
Selecione Desligar para encerrar a chamada. Selecione Fechar para fechar o componente de chamada telefônica.

Explorando o código de chamada telefônica

Dica

Se você estiver usando o Visual Studio Code, poderá abrir arquivos diretamente selecionando:

Windows/Linux: Ctrl + P
Mac: Cmd + P

Em seguida, digite o nome do arquivo que deseja abrir.

Abra o arquivo customers-list.component.ts . O caminho completo para o arquivo é client/src/app/customers-list/customers-list.component.ts.
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.

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
        })
    );
}

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 de telefone" à página. Você pode ver o discador clicando na entrada do número de telefone no cabeçalho.
- Inicia e encerra uma chamada usando as startCall() funções e endCall() respectivamente.
Antes de examinar o código que faz a chamada telefônica, vamos examinar como o token de acesso do ACS é recuperado e como os objetos de chamada telefônica são criados. Localize a ngOnInit() função em 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);
            })
        );
    }
}
```
Essa 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 e CallClient usa o token de AzureCommunicationTokenCredential acesso.
  - Cria uma nova instância do uso dos CallAgentCallClient objetos and AzureCommunicationTokenCredential . Mais tarde, você verá que CallAgent é usado para iniciar e encerrar uma chamada.
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)
    );
}
```
Uma função de servidor de API chamada createACSToken() recupera o userId e o token de acesso e os retorna ao cliente. Ele pode ser encontrado no arquivo de servidor/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 };
}
```
Essa função executa as seguintes ações:
- Verifica se um valor ACS connectionString está disponível. Caso contrário, retorna um objeto com um arquivo 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() o escopo "voip".
- Retorna um objeto que contém os userId valores e token .
Agora que você viu como o userId e o token são recuperados, volte e phone-call.component.ts localize a startCall() função.

Essa 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 do 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;
        }
    });
}

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.
Antes de passar para o próximo exercício, vamos examinar os principais conceitos abordados neste exercício:
- Um userId e um token de acesso do ACS são recuperados do servidor de API usando a acsService.createUserAndToken() função.
- O token é usado para criar um CallClient objeto and CallAgent .
- O CallAgent objeto é usado para iniciar e encerrar uma chamada chamando as callAgent.startCall() funções e callAgent.hangUp() respectivamente.
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óxima Etapa

Comunicação: Enviando emails e mensagens SMS

Comentários

Esta página foi útil?

Last updated on 2025-06-17