Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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
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.
Vuelva al explorador (http://localhost:4200) y seleccione Ponerse en contacto con el cliente seguido de Email/SMS Customer en la primera fila.
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 .
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.
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 paraCUSTOMER_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.
Abra el archivo customers-list.component.ts . La ruta de acceso completa al archivo es client/src/app/customers-list/customers-list.component.ts.
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 laopenEmailSmsDialog()
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 unaphone
propiedad yemail
. Si lo hace, crea undialogData
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 eldialogData
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. Elresponse
objeto contiene la información especificada en el cuadro de diálogo.
- Comprueba si el
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.
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á establecidatrue
en . Esta marca comprueba si laACS_EMAIL_ADDRESS
variable de entorno tiene un valor asignado. - Si
acsEmailEnabled
es true, se llama a laacsService.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 laCUSTOMER_EMAIL_ADDRESS
variable de entorno en lugar dethis.data.email
. En una aplicación real, se usaría elthis.data.email
valor. - Se suscribe a la
sendEmail()
función en elacsService
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 entrue
.
- Comprueba si la marca de
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.
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 deAcsService
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. Lahttp.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 RxJScatchError
.
- Llama a la
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.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 laACS_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 labeginSend()
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
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.
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á establecidatrue
en . Esta marca comprueba si laACS_PHONE_NUMBER
variable de entorno tiene un valor asignado. - Si
acsPhoneEnabled
es true, se llama a laacsService.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 laCUSTOMER_PHONE_NUMBER
variable de entorno en lugar dethis.data.customerPhoneNumber
. En una aplicación real, se usaría elthis.data.customerPhoneNumber
valor. - Se suscribe a la
sendSms()
función en elacsService
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
propiedadtrue
en .
- Comprueba si la marca de
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. Lahttp.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 RxJScatchError
.
- Llama a la
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.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 laACS_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.
Puede obtener más información sobre la funcionalidad de correo electrónico y SMS de ACS en los siguientes artículos:
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
ySmsClient
objetos para enviar mensajes sms y de correo electrónico.
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.