Comunicação: Envio de e-mail e mensagens SMS

Além das chamadas telefónicas, os Serviços de Comunicação do Azure também podem enviar mensagens de correio eletrónico e SMS. Isso pode ser útil quando você deseja enviar uma mensagem para um cliente ou outro usuário diretamente do aplicativo.

Neste exercício, você irá:

• Explore como as mensagens de e-mail e SMS podem ser enviadas a partir da aplicação.
• Percorra o código para saber como a funcionalidade de e-mail e SMS é implementada.

Usando os recursos de e-mail e SMS

1. Em um 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>
   

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

2. Volte para o navegador (http://localhost:4200) e selecione Entrar em contato com o cliente seguido de E-mail/SMS Cliente na primeira linha.

   

3. Selecione a guia E-mail/SMS e execute as seguintes tarefas:

   • Insira um assunto e corpo do e-mail e selecione o botão Enviar e-mail.
   • Insira uma mensagem SMS e selecione o botão Enviar SMS .

   

   Observação

   A verificação por SMS para números gratuitos é agora obrigatória nos Estados Unidos e no Canadá. Para habilitar as mensagens SMS, você deve enviar a verificação após a compra do número de telefone. Embora este tutorial não passe por esse processo, você pode selecionar Telefonia e SMS -->Documentos Regulatórios do recurso Serviços de Comunicação do Azure no portal do Azure e adicionar a documentação de validação necessária.

4. Verifique se recebeu o e-mail e as mensagens SMS. A funcionalidade SMS só funcionará se você enviar os documentos regulamentares mencionados na nota anterior. Como lembrete, a mensagem de e-mail será enviada para o valor definido para CUSTOMER_EMAIL_ADDRESS e a mensagem SMS será enviada para o valor definido para CUSTOMER_PHONE_NUMBER o arquivo .env . Se você não foi capaz de fornecer um número de telefone baseado nos Estados Unidos para usar para mensagens SMS, você pode pular essa etapa.

   Observação

   Se não vir a mensagem de e-mail na sua caixa de entrada para o endereço que definiu CUSTOMER_EMAIL_ADDRESS no ficheiro .env , verifique a sua pasta de spam.

Explorando o código de e-mail

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

2. Quando você selecionou Entrar em contato com o cliente seguido de E-mail/SMS Cliente na grade de dados, o customer-list componente exibiu uma caixa de diálogo. Isso é tratado pela openEmailSmsDialog() função no arquivo customer-list.component.ts .

   openEmailSmsDialog(data: any) {
       if (data.phone && data.email) {
           // Create the data for the dialog
           let dialogData: EmailSmsDialogData = {
               prompt: '',
               title: `Contact ${data.company}`,
               company: data.company,
               customerName: data.first_name + ' ' + data.last_name,
               customerEmailAddress: data.email,
               customerPhoneNumber: data.phone
           }
   
           // Open the dialog
           const dialogRef = this.dialog.open(EmailSmsDialogComponent, {
               data: dialogData
           });
   
           // Subscribe to the dialog afterClosed observable to get the dialog result
           this.subscription.add(
               dialogRef.afterClosed().subscribe((response: EmailSmsDialogData) => {
                   console.log('SMS dialog result:', response);
                   if (response) {
                       dialogData = response;
                   }
               })
           );
       }
       else {
           alert('No phone number available.');
       }
   }
   

   A openEmailSmsDialog() função executa as seguintes tarefas:

   • Verifica se o data objeto (que representa a linha da grade de dados) contém uma phone propriedade and email . Se isso acontecer, ele criará um dialogData objeto que contém as informações a serem passadas para a caixa de diálogo.
   • Abre a EmailSmsDialogComponent caixa de diálogo e passa o dialogData objeto para ela.
   • Inscreve-se no afterClosed() evento da caixa de diálogo. Esse evento é acionado quando a caixa de diálogo é fechada. O response objeto contém as informações que foram inseridas na caixa de diálogo.

3. Abra o arquivo email-sms-dialog.component.ts . O caminho completo para o arquivo é client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

4. Localize a sendEmail() função:

   sendEmail() {
       if (this.featureFlags.acsEmailEnabled) {
           // Using CUSTOMER_EMAIL_ADDRESS instead of this.data.email for testing purposes
           this.subscription.add(
               this.acsService.sendEmail(this.emailSubject, this.emailBody, 
                   this.getFirstName(this.data.customerName), CUSTOMER_EMAIL_ADDRESS /* this.data.email */)
               .subscribe(res => {
                   console.log('Email sent:', res);
                   if (res.status) {
                       this.emailSent = true;
                   }
               })
           );
       }
       else {
           this.emailSent = true; // Used when ACS email isn't enabled
       }
   }
   

   A sendEmail() função executa as seguintes tarefas:

   • Verifica se o sinalizador de acsEmailEnabled recurso está definido como true. Esse sinalizador verifica se a ACS_EMAIL_ADDRESS variável de ambiente tem um valor atribuído.
   • Se acsEmailEnabled for true, a acsService.sendEmail() função é chamada e o assunto do e-mail, corpo, nome do cliente e endereço de e-mail do cliente são passados. Como o banco de dados contém dados de exemplo, a CUSTOMER_EMAIL_ADDRESS variável de ambiente é usada em vez de this.data.email. Em um aplicativo do mundo real, o this.data.email valor seria usado.
   • Subscreve a sendEmail() função no acsService serviço. Esta função retorna um RxJS observável que contém a resposta do serviço do lado do cliente.
   • Se o e-mail foi enviado com êxito, a emailSent propriedade é definida como true.

5. Para fornecer melhor encapsulamento e reutilização de código, serviços do lado do cliente, como acs.service.ts são usados em todo o aplicativo. Isso permite que todas as funcionalidades do ACS sejam consolidadas em um único local.

6. Abra acs.service.ts e localize a sendEmail() função. O caminho completo para o arquivo é client/src/app/core/acs.service.ts.

   sendEmail(subject: string, message: string, customerName: string, customerEmailAddress: string) : Observable<EmailSmsResponse> {
       return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendEmail', { subject, message, customerName, customerEmailAddress })
       .pipe(
           catchError(this.handleError)
       );
   }
   

   A sendEmail() função em AcsService executa as seguintes tarefas:

   • Chama a http.post() função e passa o assunto do e-mail, a mensagem, o nome do cliente e o endereço de e-mail do cliente para ela. A http.post() função retorna um RxJS observável que contém a resposta da chamada de API.
   • Manipula quaisquer erros retornados http.post() pela função usando o operador RxJS catchError .

7. Agora vamos examinar como o aplicativo interage com o recurso de e-mail ACS. Abra o arquivo acs.ts e localize a sendEmail() função. O caminho completo para o arquivo é server/typescript/acs.ts.

8. A sendEmail() função executa as seguintes tarefas:

   • Cria um novo EmailClient objeto e passa a cadeia de conexão ACS para ele (esse valor é recuperado da ACS_CONNECTION_STRING variável de ambiente).

     const emailClient = new EmailClient(connectionString);
     

   • Cria um novo EmailMessage objeto e passa as informações do remetente, assunto, mensagem e destinatário.

     const msgObject: EmailMessage = {
         senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
         content: {
             subject: subject,
             plainText: message,
         },
         recipients: {
             to: [
                 {
                     address: customerEmailAddress,
                     displayName: customerName,
                 },
             ],
         },
     };
     

   • Envia o e-mail usando a emailClient.beginSend() função e retorna a resposta. Embora a função esteja enviando apenas para um destinatário neste exemplo, a beginSend() função também pode ser usada para enviar para vários destinatários.

     const poller = await emailClient.beginSend(msgObject);
     

   • Aguarda que o poller objeto sinalize que está feito e envia a resposta para o chamador.

Explorando o código SMS

1. Volte ao ficheiro email-sms-dialog.component.ts que abriu anteriormente. O caminho completo para o arquivo é client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

2. Localize a sendSms() função:

   sendSms() {
       if (this.featureFlags.acsPhoneEnabled) {
           // Using CUSTOMER_PHONE_NUMBER instead of this.data.customerPhoneNumber for testing purposes
           this.subscription.add(
               this.acsService.sendSms(this.smsMessage, CUSTOMER_PHONE_NUMBER /* this.data.customerPhoneNumber */)
                 .subscribe(res => {
                   if (res.status) {
                       this.smsSent = true;
                   }
               })
           );
       }
       else {
           this.smsSent = true;
       }
   }
   

   A sendSMS() função executa as seguintes tarefas:

   • Verifica se o sinalizador de acsPhoneEnabled recurso está definido como true. Esse sinalizador verifica se a ACS_PHONE_NUMBER variável de ambiente tem um valor atribuído.
   • Se acsPhoneEnabled for verdade, a acsService.SendSms() função é chamada e a mensagem SMS e o número de telefone do cliente são passados. Como o banco de dados contém dados de exemplo, a CUSTOMER_PHONE_NUMBER variável de ambiente é usada em vez de this.data.customerPhoneNumber. Em um aplicativo do mundo real, o this.data.customerPhoneNumber valor seria usado.
   • Subscreve a sendSms() função no acsService serviço. Esta função retorna um RxJS observável que contém a resposta do serviço do lado do cliente.
   • Se a mensagem SMS foi enviada com êxito, ela define a smsSent propriedade como true.

3. Abra acs.service.ts e localize a sendSms() função. O caminho completo para o arquivo é client/src/app/core/acs.service.ts.

   sendSms(message: string, customerPhoneNumber: string) : Observable<EmailSmsResponse> {
       return this.http.post<EmailSmsResponse>(this.apiUrl + 'sendSms', { message, customerPhoneNumber })
       .pipe(
           catchError(this.handleError)
       );
   }  
   

   A sendSms() função executa as seguintes tarefas:

   • Chama a http.post() função e passa a mensagem e o número de telefone do cliente para ela. A http.post() função retorna um RxJS observável que contém a resposta da chamada de API.
   • Manipula quaisquer erros retornados http.post() pela função usando o operador RxJS catchError .

4. Finalmente, vamos examinar como o aplicativo interage com o recurso ACS SMS. Abra o arquivo acs.ts . O caminho completo para o arquivo é server/typescript/acs.ts e localize a sendSms() função.

5. A sendSms() função executa as seguintes tarefas:

   • Cria um novo SmsClient objeto e passa a cadeia de conexão ACS para ele (esse valor é recuperado da ACS_CONNECTION_STRING variável de ambiente).

     const smsClient = new SmsClient(connectionString);
     

   • Chama a smsClient.send() função e passa o número de telefone ACS (from), número de telefone do cliente (to) e mensagem SMS:

     const sendResults = await smsClient.send({
         from: process.env.ACS_PHONE_NUMBER as string,
         to: [customerPhoneNumber],
         message: message
     });
     return sendResults;
     

   • Retorna a resposta ao chamador.

6. Você pode saber mais sobre a funcionalidade de e-mail e SMS do ACS nos seguintes artigos:

   • Email nos Serviços de Comunicação do Azure
   • SMS nos Serviços de Comunicação do Azure

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

   • O arquivo acs.service.ts encapsula a funcionalidade de e-mail e SMS ACS usada pelo aplicativo do lado do cliente. Ele lida com as chamadas de API para o servidor e retorna a resposta para o chamador.
   • A API do lado do servidor usa o ACS e EmailClient objetos para enviar mensagens de SmsClient e-mail e SMS.

8. Agora que você já aprendeu como as mensagens de e-mail e SMS podem ser enviadas, vamos mudar nosso foco para a integração de dados organizacionais no aplicativo.

Próximo Passo