Compartir a través de


Comunicación: Envío de mensajes de correo electrónico y SMS

Además de las llamadas telefónicas, Azure Communication Services también puede enviar mensajes de correo electrónico y SMS. Esto puede ser útil cuando desea enviar un mensaje a un cliente u otro usuario directamente desde la aplicación.

En este ejercicio, aprenderá a:

  • Explore cómo se pueden enviar mensajes de correo electrónico y SMS desde la aplicación.
  • Recorra el código para aprender cómo se implementa la funcionalidad de correo electrónico y SMS.

Uso de las características de correo electrónico y SMS

  1. En un ejercicio anterior creó un recurso de Azure Communication Services (ACS) e inició la base de datos, el servidor web y el servidor de API. También ha actualizado los siguientes valores en el archivo .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>
    

    Asegúrese de que ha completado el ejercicio anterior antes de continuar.

  2. Vuelva al explorador (http://localhost:4200) y seleccione Ponerse en contacto con el cliente seguido de Email/SMS Customer en la primera fila.

    Enviar un correo electrónico o un mensaje SMS mediante ACS.

  3. Seleccione la pestaña Correo electrónico/SMS y realice las siguientes tareas:

    • Escriba un asunto de correo electrónico y un cuerpo y seleccione el botón Enviar correo electrónico .
    • Escriba un mensaje SMS y seleccione el botón Enviar SMS .

    Cuadro de diálogo Email/SMS Customer (Cliente de correo electrónico/SMS).

    Nota:

    La comprobación de SMS para números gratuitos ahora es obligatoria en el Estados Unidos y Canadá. Para habilitar la mensajería SMS, debe enviar la comprobación después de la compra del número de teléfono. Aunque este tutorial no pasará por ese proceso, puede seleccionar Documentos de telefonía y SMS -->Regulatory en el recurso de Azure Communication Services en Azure Portal y agregar la documentación de validación necesaria.

  4. Compruebe que recibió el correo electrónico y los mensajes SMS. La funcionalidad de SMS solo funcionará si envió los documentos normativos mencionados en la nota anterior. Como recordatorio, el mensaje de correo electrónico se enviará al valor definido para CUSTOMER_EMAIL_ADDRESS y el mensaje SMS se enviará al valor definido para CUSTOMER_PHONE_NUMBER en el archivo .env . Si no pudo proporcionar un número de teléfono basado en Estados Unidos para usarlo para los mensajes SMS, puede omitir ese paso.

    Nota:

    Si no ve el mensaje de correo electrónico en la bandeja de entrada para la dirección que definió en CUSTOMER_EMAIL_ADDRESS el archivo .env , compruebe la carpeta de correo no deseado.

Exploración del código de correo electrónico

Sugerencia

Si usa Visual Studio Code, puede abrir archivos directamente seleccionando:

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

A continuación, escriba el nombre del archivo que desea abrir.

  1. Abra el archivo customers-list.component.ts . La ruta de acceso completa al archivo es client/src/app/customers-list/customers-list.component.ts.

  2. Cuando seleccionó Ponerse en contacto con el cliente seguido de Email/SMS Customer en datagrid, el customer-list componente muestra un cuadro de diálogo. Esto lo controla la openEmailSmsDialog() función en el archivo 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.');
        }
    }
    

    La openEmailSmsDialog() función realiza las siguientes tareas:

    • Comprueba si el data objeto (que representa la fila de datagrid) contiene una phone propiedad y email . Si lo hace, crea un dialogData objeto que contiene la información que se va a pasar al cuadro de diálogo.
    • Abre el EmailSmsDialogComponent cuadro de diálogo y pasa el dialogData objeto a él.
    • Se suscribe al afterClosed() evento del cuadro de diálogo. Este evento se desencadena cuando se cierra el cuadro de diálogo. El response objeto contiene la información especificada en el cuadro de diálogo.
  3. Abra el archivo email-sms-dialog.component.ts . La ruta de acceso completa al archivo es client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

  4. Busque la sendEmail() función :

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

    La sendEmail() función realiza las siguientes tareas:

    • Comprueba si la marca de acsEmailEnabled características está establecida trueen . Esta marca comprueba si la ACS_EMAIL_ADDRESS variable de entorno tiene un valor asignado.
    • Si acsEmailEnabled es true, se llama a la acsService.sendEmail() función y se pasan el asunto del correo electrónico, el cuerpo, el nombre del cliente y la dirección de correo electrónico del cliente. Dado que la base de datos contiene datos de ejemplo, se usa la CUSTOMER_EMAIL_ADDRESS variable de entorno en lugar de this.data.email. En una aplicación real, se usaría el this.data.email valor.
    • Se suscribe a la sendEmail() función en el acsService servicio. Esta función devuelve un observable RxJS que contiene la respuesta del servicio del lado cliente.
    • Si el correo electrónico se envió correctamente, la emailSent propiedad se establece en true.
  5. Para proporcionar una mejor encapsulación y reutilización de código, los servicios del lado cliente, como acs.service.ts , se usan en toda la aplicación. Esto permite consolidar todas las funciones de ACS en un solo lugar.

  6. Abra acs.service.ts y busque la sendEmail() función . La ruta de acceso completa al archivo es 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)
        );
    }
    

    La sendEmail() función de AcsService realiza las siguientes tareas:

    • Llama a la http.post() función y pasa el asunto del correo electrónico, el mensaje, el nombre del cliente y la dirección de correo electrónico del cliente. La http.post() función devuelve un observable RxJS que contiene la respuesta de la llamada API.
    • Controla los errores devueltos por la http.post() función mediante el operador RxJS catchError .
  7. Ahora vamos a examinar cómo interactúa la aplicación con la característica de correo electrónico de ACS. Abra el archivo acs.ts y busque la sendEmail() función . La ruta de acceso completa al archivo es server/typescript/acs.ts.

  8. La sendEmail() función realiza las siguientes tareas:

    • Crea un nuevo EmailClient objeto y pasa el cadena de conexión de ACS (este valor se recupera de la ACS_CONNECTION_STRING variable de entorno).

      const emailClient = new EmailClient(connectionString);
      
    • Crea un nuevo EmailMessage objeto y pasa la información del remitente, el asunto, el mensaje y el destinatario.

      const msgObject: EmailMessage = {
          senderAddress: process.env.ACS_EMAIL_ADDRESS as string,
          content: {
              subject: subject,
              plainText: message,
          },
          recipients: {
              to: [
                  {
                      address: customerEmailAddress,
                      displayName: customerName,
                  },
              ],
          },
      };
      
    • Envía el correo electrónico mediante la emailClient.beginSend() función y devuelve la respuesta. Aunque la función solo envía a un destinatario en este ejemplo, también se puede usar la beginSend() función para enviar a varios destinatarios.

      const poller = await emailClient.beginSend(msgObject);
      
    • Espera a que el poller objeto indique que se ha realizado y envía la respuesta al autor de la llamada.

Exploración del código SMS

  1. Vuelva al archivo email-sms-dialog.component.ts que abrió anteriormente. La ruta de acceso completa al archivo es client/src/app/email-sms-dialog/email-sms-dialog.component.ts.

  2. Busque la sendSms() función :

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

    La sendSMS() función realiza las siguientes tareas:

    • Comprueba si la marca de acsPhoneEnabled características está establecida trueen . Esta marca comprueba si la ACS_PHONE_NUMBER variable de entorno tiene un valor asignado.
    • Si acsPhoneEnabled es true, se llama a la acsService.SendSms() función y se pasa el mensaje SMS y el número de teléfono del cliente. Dado que la base de datos contiene datos de ejemplo, se usa la CUSTOMER_PHONE_NUMBER variable de entorno en lugar de this.data.customerPhoneNumber. En una aplicación real, se usaría el this.data.customerPhoneNumber valor.
    • Se suscribe a la sendSms() función en el acsService servicio. Esta función devuelve un observable RxJS que contiene la respuesta del servicio del lado cliente.
    • Si el mensaje SMS se envió correctamente, establece la smsSent propiedad trueen .
  3. Abra acs.service.ts y busque la sendSms() función . La ruta de acceso completa al archivo es 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)
        );
    }  
    

    La sendSms() función realiza las siguientes tareas:

    • Llama a la http.post() función y pasa el mensaje y el número de teléfono del cliente. La http.post() función devuelve un observable RxJS que contiene la respuesta de la llamada API.
    • Controla los errores devueltos por la http.post() función mediante el operador RxJS catchError .
  4. Por último, vamos a examinar cómo interactúa la aplicación con la característica DE SMS de ACS. Abra el archivo acs.ts . La ruta de acceso completa al archivo es server/typescript/acs.ts y busque la sendSms() función.

  5. La sendSms() función realiza las siguientes tareas:

    • Crea un nuevo SmsClient objeto y pasa el cadena de conexión de ACS (este valor se recupera de la ACS_CONNECTION_STRING variable de entorno).

      const smsClient = new SmsClient(connectionString);
      
    • Llama a la smsClient.send() función y pasa el número de teléfono de ACS (from), el número de teléfono del cliente (to) y el mensaje SMS:

      const sendResults = await smsClient.send({
          from: process.env.ACS_PHONE_NUMBER as string,
          to: [customerPhoneNumber],
          message: message
      });
      return sendResults;
      
    • Devuelve la respuesta al autor de la llamada.

  6. Puede obtener más información sobre la funcionalidad de correo electrónico y SMS de ACS en los siguientes artículos:

  7. Antes de pasar al ejercicio siguiente, revisemos los conceptos clave que se describen en este ejercicio:

    • El archivo acs.service.ts encapsula la funcionalidad de correo electrónico y SMS de ACS que usa la aplicación del lado cliente. Controla las llamadas API al servidor y devuelve la respuesta al autor de la llamada.
    • La API del lado servidor usa acs EmailClient y SmsClient objetos para enviar mensajes sms y de correo electrónico.
  8. Ahora que ha aprendido cómo se pueden enviar mensajes de correo electrónico y SMS, vamos a cambiar nuestro enfoque para integrar los datos de la organización en la aplicación.

Paso siguiente