Transcripciones
1. Bienvenida y introducción: Hola, y bienvenido a este curso de compartir habilidades sobre cómo construir una aplicación Fullstack React utilizando AWS en servidor sin servidor como back-end. En este proyecto, vamos a aprender a configurar nuestra cuenta de AWS en serverless. Después vamos a implementar Office API y luego crear un nuevo endpoint de API, que nos permite enviar correos electrónicos utilizando el sencillo servicio de correo electrónico de Amazon. Después vamos a construir un front-end reaccionar hacia arriba, lo que nos permite ingresar los detalles que necesitamos para ingresar usando los ganchos React y el estado, y luego enviando esa solicitud a nuestra API para que nos envíen ese correo electrónico. Al final de este curso, habrás aprendido a crear una API Gateway lambda, que actúa como punto final, lo que te permite crear fácilmente API, sabrás cómo interactuar con el SDK de AWS, que permite interactuar con otros servicios, como el simple servicio de correo electrónico. También sabrás cómo conectar tu aplicación front-end React hasta esta API de backend y tener la API de backend implementada todo usando serverless. Entonces, ¿por qué no saltamos y echamos un vistazo al primer video.
2. Configuración de tu cuenta de AWS: En este video, vamos a estar configurando nuestra cuenta de AWS. Si ya tienes cuentas de AWS en las que puedes iniciar sesión, entonces puedes saltarte este paso y saltar directamente al siguiente video. Por lo que necesitamos buscar AWS y luego hacer clic en el enlace superior. Para Amazon Web Services. Aterrizarás en una de sus páginas de aterrizaje. Y tenemos que mirar la parte superior para crear una cuenta de AWS. Aquí, necesitamos ingresar nuestra dirección de correo electrónico, una contraseña, confirmar esa contraseña, y darle un nombre a esta cuenta. Entonces voy a llamar a este curso cuentas de AWS. Una vez en esta página, puedes elegir una cuenta profesional o personal. Voy a ir con unas cuentas personales y te recomiendo que hagas eso a menos que estés seguro de que vas a estar usando esto como cuenta de negocio. Dentro de aquí, es necesario agregar un número telefónico al cual son contactos pertenecen, luego caben en su país, dirección y código postal. Lo último que debes hacer es leer los términos y condiciones y luego marcar esa casilla. Con todo eso hecho, puedes hacer clic en crear cuenta y continuar. Ahora se llega a través de su página de información de pago. El modo en que funciona AWS es que tiene ocho niveles gratuitos del peso que trabaja nuestro AWS es que es un servicio de pago por uso. Por lo que si creas una API y hay solicitudes hechas a la API, pagarás solo por el número de solicitudes que se realicen. Estas son pequeñas, diminutas cantidades de dinero. Y también obtienes un nivel gratis. Esto significa que cada mes tienes un número establecido de solicitudes de API, un número establecido de Lambda's, una cantidad establecida de dinamo que puedes usar de forma gratuita antes de incluso pagar por cualquier cosa. Si sigues este curso, entonces podrás caber todo lo que hagas. Pesar en el elemento de nivel libre, por lo que en realidad se te cobrará cualquier cosa. Desafortunadamente, esto sí significa que sí necesitamos ingresar una tarjeta de crédito o débito. Para que en cuanto lo hagamos pasemos por encima de ese límite. Amazon podría facturar automáticamente. Por ejemplo, he estado corriendo ocho. Pedimos un par de años. Tengo bastante pérdida de proyectos y mi factura mensual llega a alrededor de $1.35. Por lo que estas son pequeñas, diminutas cantidades de dinero. Y siempre puedes volver atrás y borrar cosas para que ya no te cobren por ellas. Una vez que hayas rellenado tu número de tarjeta y utilices tu dirección, también
puedes añadir una nueva dirección si es necesario. Es necesario hacer clic, verificar y agregar. Una vez que hayas introducido los datos de tu auto, llegarás a esta página donde te piden que confirmes tu identidad. Esto se puede hacer ya sea a través de un mensaje de texto o al tener una llamada. Asegúrate de seleccionar el país correcto. Introduce tu número de teléfono, luego ingresa el código de comprobación de seguridad en la parte inferior de la página y luego haz clic en enviar un SMS. Entonces recibirás ese mensaje. Y tendrás que introducirlo en tu pantalla para confirmar que ese es tu teléfono. Entonces ingresa tu código aquí y haz clic en Verificar código, y estará listo para llenar esta configuración. Ahora podemos elegir nuestro plan de apoyo. Voy a ir con una diversión gratis. Pero si quieres soporte adicional y respuestas más rápidas a tus consultas de soporte con AWS, puedes ir por un negocio, un plan de desarrollador. Y si ya eres un negocio establecido y sabes que quieres soporte premium, entonces puedes ir y seleccionar el plan de negocio. Por ahora voy a elegir el plan básico. Y eso es todo completado. A veces lleva un poco de tiempo crear su cuenta de AWS. Pero siempre puedes intentar hacer clic en el botón de inicio de sesión en la consola y luego ingresar tu dirección de correo electrónico y contraseña. Si vuelve a esto más tarde y necesita iniciar sesión en su cuenta, busque AWS. Y en lugar de hacer clic en crear una cuenta de AWS, haga clic en el menú desplegable de mi cuenta y seleccione la consola de administración de AWS. Al hacer click en
esto, nos llevará a una página de inicio de sesión. Tenemos que seleccionar usuario root. Después podemos pegar en nuestra dirección de correo electrónico y contraseña. Y entraremos en nuestra cuenta de AWS. En el interior de aquí. Podemos entonces continuar con el resto de este curso. A medida que se ha creado nuestra cuenta de AWS.
3. Configuración de la Servidor sin servidor para trabajar con AWS: Entonces lo primero que tenemos que hacer para que todo esto funcione es que necesitamos configurar un usuario. Por lo que eso es sin servidor, puede hacer cambios en nuestra cuenta de AWS. La forma en que hacemos eso es iniciar sesión en nuestra cuenta de AWS. Y luego hacemos click en el cuadro de búsqueda y buscamos lo que soy, que es la gestión del acceso a la identidad. Cuando
pinchemos aquí, llegaremos a una página donde hay muchos detalles diferentes. Hay grupos y usuarios y roles y políticas. Pero para esto, todo lo que necesitamos hacer es hacer clic en los usos de la izquierda y agregar un nuevo usuario. Aquí podemos definir el nombre del usuario. Voy a llamar a esta habilidad share usuario sin servidor. Y aquí en el tipo de cuenta queremos seleccionar el acceso programático. Esto significa que podremos utilizar el SDK de AWS
y la CLI para acceder a nuestra cuenta a través de este usuario, que es como funciona sin servidor. A continuación, estamos dando permisos. Y vamos a cruzar para Adjuntar directamente las políticas existentes. Y porque queremos poder hacer muchas cosas diferentes, como crear cubos S3, crear una API, así como lambdas. Queremos seleccionar acceso de administrador. Nosotros a continuación, vamos a entrar en etiquetas a continuación. Y si es necesario, puede agregar algunas etiquetas. Y esto etiquetará al usuario para que sepas lo que ha estado haciendo este usuario. Por último, podemos entrar en revisión y solo estamos diciendo que tenemos la habilidad compartir usuario sin servidor con acceso programático. Y tienen una política administrada de acceso de administrador. Por lo que podemos hacer clic en crear usuario. Esto ahora va a crear nuestro usuario aquí. Y asegúrate de no cerrar esta pantalla porque necesitamos estos detalles. Entonces ahora tenemos esa configuración. Podemos dirigirnos a nuestra, nuestra computadora y abrir una terminal. En nuestra terminal, necesitamos realmente obtener la configuración sin servidor en nuestro equipo. El modo en que lo hacemos se ejecuta npm install menos g porque es un paquete instalado globalmente y sin servidor. Ahora si no tienes instalado nodo y NPM, y voy a estar enlazando y en las notas de esta lección cómo puedes instalarlos. Pero si lo tienes, esto solo debería funcionar de inmediato. Esto lleva un poco de tiempo configurarlo, así que me pondré en contacto contigo una vez que todo haya sido configurado. Ahora que la ley ha terminado de configurarse, podemos usar esta CLI sin servidor para configurar las credenciales para ese usuario que acabamos de crear. El modo en que hacemos eso es en nuestra terminal, tecleamos credenciales de configuración sin servidor. Y estas son credenciales para AWS. Por lo que el proveedor es AWS. Y también queremos decir que estamos creando estas credenciales en un perfil. Entonces dash, dash perfil. Y va a haber Skill Share usuario sin servidor. El siguiente que debemos sumar a esto son las credenciales. Por lo que necesitamos Dutch dash k y luego volver a nuestra cuenta de AWS, donde podemos copiar nuestra clave de acceso y pegarla aquí. Así como la llave. También tenemos que añadir dash hace secretos. Y de nuevo, entra en nuestro código. Y ahora vamos a estar seleccionando aquí nuestro botón de show, copiando el secreto. Y eso es lo que vamos a pegar en ese valor secreto. Por lo que acabo de copiar eso. Voy a entrar aquí y pegar eso ahí dentro y golpear Enter. Lo que esto va a hacer es que va a
armar esas credenciales para que podamos usarlas en el futuro. Eso es todo lo que necesitamos hacer para esta lección. Y en el siguiente video, vamos a estar buscando configurar nuestro repo y crear nuestra primera API.
4. Despliega nuestra primera API: En el último video, configuramos nuestro usuario sin servidor. Entonces en este video vamos a usar a ese usuario para crear nuestra primera API. Entonces lo que necesitamos hacer para empezar es crear una carpeta para este proyecto. Voy a hacer eso ejecutando MKDIR, que es crear un directorio y llamarlo el curso de email de skill share. Y voy a cambiar directorio en el curso de correo electrónico de habilidad share dash. Entonces ahora que estoy aquí, lo que podemos hacer es crear nuestra carpeta api. De nuevo, vamos a estar usando la CLI sin servidor. Entonces lo vamos a llamar una función de creación sin servidor. Y vamos a estar usando las plantillas tienen dash, dash, templates, AWS, dash node js, y luego la ruta en la que queremos instalar esto. Entonces dash, dash path. Y el camino para esto va a ser skill share email dash API. Entonces ahora que hemos creado este proyecto API, vamos a entrar en código VS, echar un vistazo al código, y luego implementar realmente nuestra primera API. Entonces si entramos en una ventana de código visual, si haces clic en Abrir carpeta y encuentras el curso de email de la habilidad share y golpeas abierto. Entonces por el momento podemos ver esto tiene una carpeta de API y promulgar. Tiene un 100.json y un YAML sin servidor. Entonces en nuestro YAML sin servidor, Aquí es donde estamos configurando lo que hará nuestro paquete sin servidor cuando lo implementemos. Cuenta con un servicio. Y dice que estamos usando AWS. Y nodo 12. Aquí hay muchos comentarios sobre las características adicionales que puedes usar. Pero vamos a ignorar esos por ahora. Y podemos mirar directamente hacia arriba las funciones. Dentro de esta función, dice que hay una función hola y el manejador es un manejador. Hola. Si nos fijamos en el manejador ab.js, exporta una función llamada Hello, y eso toma un evento que devuelve algo de JSON. Entonces lo último que tenemos que hacer es volver a nuestro YAML sin servidor. Y vamos a convertir esta función en una API. El modo en que hacemos eso es decir que este manejador también tiene eventos. Y uno de esos eventos es HTTP. Y lo que esto va a hacer es que esto se va a montar. Una pasarela API, donde luego podemos usar eso para acceder a esa lambda a través de una API. El local que necesitamos para esto, Hey, configuración de
TTP es un camino. Y voy a decir que el camino para esto es sólo hola guión texto. Podemos comprobar si es un get o un post definiendo el método. Y en este caso va a ser un método get. Y por último, tenemos una característica llamada causa, que es permitir o no permitir que la API se haga una solicitud desde una URL diferente. Y en este caso, queremos que eso sea cierto para que podamos acceder a esto desde nuestra aplicación web en el futuro. Si guardamos esto, tenemos un último bit de configuración que necesitamos hacer. Arriba en el proveedor. Tenemos que decir cómo vamos a estar desplegando esto. Y vamos a estar desplegando esto con un perfil. Y el perfil es lo que hicimos antes dentro de nuestra terminal, que es nuestra habilidad share server less user. Y esto es simplemente decirle a serverless qué conjunto de credenciales usar. También podemos sumar en una región. Y voy a hacer esto y ponerle eso a Irlanda. Pero puedes configurarlo en donde estés las regiones más cercanas que tú. Entonces para mí, Irlanda es EU, West dash one. Y si guardo eso, tenemos todo lo que necesitamos. Ya podemos abrir nuestra terminal. Y dentro de nuestra terminal, podemos cd en nuestra carpeta api. Y una vez que estemos en esta carpeta, podemos ejecutar SLS deploy. Y lo que hará este comando es que mirará este entrenamiento YAML sin servidor qué recursos y qué sistemas necesitan construir, obtener el código e implementar eso todo la cuenta usando nuestra nueva habilidad share serverless user. Esto toma un poco de tiempo para hacerlo, pero me pondré en contacto contigo cuando termine el NIH. Ahora que eso ha terminado de desplegar, Podemos ver que tenemos una función de hola, que es lo que esperaríamos porque ahí tenemos una función de hola. Y también tenemos un endpoint API, que tiene una ruta que es hola prueba dash al final. Este primer bit se genera aleatoriamente como parte de la implementación de gateway API. Y eso es lo que vamos a estar probando en un minuto. Antes de hacer eso, vamos a volver a dirigirnos a nuestra consola de AWS. Y inherente, vamos a dar click en servicios en la parte superior y buscar lambda. Si entramos aquí, ahora
podemos ver que realmente tenemos API def hello lambda, y eso se desplegó hace apenas dos minutos. Por lo que de nuevo en nuestro código, vamos a copiar esta URL que tenemos aquí. Y vamos a dirigirnos a nuestro navegador y pegar eso en una nueva pestaña. Cuando llega a esa API, obtenemos un mensaje de go serverless versión 1, su función se ejecutó con éxito, y luego una entrada. En nuestro código. Si realmente echamos un vistazo al manejador ab.js, Tenemos un mensaje y una entrada, y eso es lo que estamos regresando de esta función. Entonces eso demuestra que este endpoint API está activando esta función y devolviendo esos datos. Si bien esto es realmente genial, lo que vamos a hacer en el siguiente video se cambia el código dentro de nuestra API para que podamos enviar un correo electrónico desde nuestra API a nuestras cuentas de clientes.
5. Crea nuestra API Endpoint de la de la de la "'correo electrónico": En el último video, tuvimos un justo para desplegar nuestra primera lambda y nuestra primera API y probarlo que estaba funcionando. En este video, vamos a estar creando un endpoint API para enviar correos electrónicos a nuestros clientes. Y para empezar con lo que vamos a hacer es un poco de
limpieza dentro de este expediente sobrante de YAML. Lo que vamos a hacer es borrar todo. De qué se comenta eso para reducir la cantidad de desorden en este archivo para que podamos eliminarlo todo. Por lo que nos queda sólo con el prestador de servicios y las funciones. Entonces todo lo demás puede ir a guardar eso. Y tenemos un archivo mucho más limpio. Ahora para empezar a crear esta nueva API, necesitamos crear un nuevo manejador. Tan ambientado dentro de nuestra API, vamos a crear un nuevo archivo y llamarlo enviar email dot JS. Dentro de este archivo, necesitamos crear nuestro código para nuestra lambda. Entonces la forma en que se crea una lambda es decir que exporta manejador de puntos es igual una función de evento asíncrona. Entonces esto es decir que estamos creando una función asíncrona que toma el parámetro de los eventos. Y entonces aquí es donde procesamos eso. Evento tan honesto. Sabemos que vamos a estar pasando por alto la dirección a la que lo estamos enviando,
la dirección a la que lo estamos enviando desde un tema y algún texto. Entonces vamos a extraer eso del cuerpo del evento. El modo en que funciona la API Gateway es que stringify es el cuerpo que envía a nuestra lambda. Por lo que también necesitamos ser dueños de stringificar eso. Entonces vamos a decir que const corchetes rizados para desestructurar los valores de, podemos decir a desde sujeto y texto es igual a json.Parse event dot body. Ahora se hace la ley. Tenemos que comprobar que todos estos valores existen
porque existe la posibilidad de que alguien haya enviado una solicitud a esta API, pero no haya pasado todos los datos. Entonces si vas a copiar todas estas y pegarlas, solo para que mi trabajo sea un poco más fácil. Entonces si no hay un dos o no hay un de, o no hay un tema, o no hay un texto. Entonces vamos a devolver una respuesta 400. Y en lugar de tapar aquí el JSON exacto, lo que voy a hacer es crear una nueva función llamada subrayado 400. Y eso va a tomar un objeto como parámetro. Y va a tener un mensaje en él. En este caso, voy a decir
parámetro faltante a petición cuerpo. Y ahora necesitamos que este 400 funcione. Entonces al final del archivo, vamos a decir que const underscore 400 va a ser una función así. Y va a tomar cuerpo. Por lo que en este caso el cuerpo va a ser mensaje. Y ahora necesitamos configurar algunos parámetros. Por lo que esto va a devolver un objeto con encabezados y con un código de estado. Y finalmente con un cuerpo. Por lo que en este caso el código de estado es un 400. Por lo que podemos poner el número de 409. El cuerpo. El modo en que necesitamos devolver esto es que necesitamos devolver una cadena de los datos. Entonces eso va a ser JSON dot stringify, pase en el cuerpo. Y por último, necesitamos definir algunos encabezados. Por lo que hay tres encabezados que necesitamos configurar para que esto funcione. Esos son tipo de contenido con una T. mayúscula Y eso va a ser Application slash JSON, que dice la respuesta que estamos enviando de vuelta algunos JSON. Necesitamos acceso, control, permitir métodos. Y esto es sólo decir lo que los resorts solicitantes, si se nos permite hacer un get post o algo por el estilo. Y por ahora vamos a ir con estrella. Y segundo es el control de acceso permitir orígenes. Alguien va a copiar esto y cambiar los métodos a origen. Y otra vez, déjalo como estrella. Entonces así es como nosotros, este es el objeto JSON que necesitamos devolver cada vez que
respondemos a una API Gateway solicita a una lambda. Y podemos simplemente cambiar el código de estado y el cuerpo dependiendo de qué tipo de respuestas. Si volvemos a nuestro contenido, ahora
podemos seguir adelante con el proceso. Ahora que tenemos estos detalles, lo que podemos hacer es que podemos usar esos para crear los parámetros. Eso usamos para pasar al sencillo servicio de correo electrónico de Amazon. Por lo que const, los params de correo electrónico son iguales a un objeto. El primero es un destino. Ese es un objeto con una matriz de dos direcciones. Y esa matriz sólo va a tener un elemento, que es el correo electrónico al que estamos enviando esto, además de tener un destino. También tenemos un mensaje. Ese mensaje tiene un cuerpo. El cuerpo, en nuestro caso sólo va a ser gravado. Y ese campo de texto tiene el valor de datos del texto así como un cuerpo. También necesitamos un tema. El sujeto tiene un campo de datos del tema que nos han pasado. Esto puede parecer un poco complicado, pero con Amazon SES, permite mucho mejores controles como enviar diferentes variantes del cuerpo
dependiendo con qué dispositivos esté leyendo el cliente. El último que necesitamos configurar es la fuente. Y aquí es de donde lo estamos enviando. En nuestro caso, eso es de. Entonces ese es nuestros parámetros de correo electrónico toda la configuración. Por lo que ahora podemos empezar a mirar el envío de este correo electrónico. Vamos a estar usando un ensayo S, que es el sencillo servicio de correo electrónico. Y porque esto es asíncrono y estaremos usando un peso. Vamos a envolver todo esto en un try catch. Y esto sólo significa que si algo sale mal en la llamada del SES, entonces podremos captar ese error. Entonces lo que tenemos que hacer ahora es esperar SES dot enviar correo electrónico pasando en nuestros parámetros EML. Y luego para asegurarnos de que sea una promesa, agregamos dot promise al final, que es algo que puedes hacer con muchos de los servicios de AWS. Si esto es exitoso, entonces va a seguir dentro de este bloque try. Y vamos a regresar y subrayar 200 esta vez. Y eso no necesita ningún parámetro. Por lo que ahora necesitamos que esos 200. Y lo hacemos copiando la función 400. Y entonces necesitamos cambiar los 28200 de los 400. No tenemos cuerpo en esto, así que podemos deshacernos de eso. El cuerpo aquí abajo solo va a ser una cadena vacía y luego cambiar el código de estado a 200. Podemos ahorrar eso. Y luego volver a nuestro código. Entonces esto es lo que va a pasar si se trata de una solicitud exitosa. ¿ Qué va a pasar si se trata de una solicitud fallida, va a caer en esta captura. Y siempre es bueno en consola cerrar sesión tus errores. Por lo que consola dot log error, enviando correo electrónico. Y luego el mensaje de error. Además de eso también necesitamos devolver un 400. Por lo que regresa subrayado 400. Y esto va a tener un mensaje de incapaz de enviar el correo electrónico. Ahora podemos ahorrar eso. Y algunos de ustedes pueden haber notado que hemos usado SES, pero no lo hemos definido. Entonces dy tiene toda la razón. Y lo que tenemos que hacer es desplazarnos hacia la derecha hasta la parte superior de nuestro archivo. Y antes de exportar nuestro manejador, tenemos que decir que const AWS iguals requieren el SDK de AWS. Y ahora que tenemos el SDK, podemos crear una nueva instancia del simple cliente de servicio de correo electrónico. Por lo que const SES es igual a nuevo AWS, puntos, SES, y guarde eso. Y ahora tenemos todo el código que necesitamos aquí para enviar un correo electrónico a un cliente desde nuestra dirección. Entonces ahora lo último que necesitamos hacer es entrar en nuestro archivo YAML sin servidor, encontrar funciones R, y agregar una nueva función. Por lo que necesitamos ir al mismo nivel que el hola. Y tuve que enviar correo electrónico. También necesitamos configurar un manejador. Y nuestro manejador es artes. Enviar correo electrónico manejador de puntos. Entonces es filename dot lo que has exportado. Por lo que en nuestro caso, enviar email dot handler. También tenemos eventos. Y esto va a verse muy similar al anterior, donde tenemos HTTP. Esto va a tener un camino. Y esta vez el camino va a ser enviar correo electrónico. Entonces vamos a tener un método. Pero esta vez en lugar de tener unos vacíos como lo hicimos en el top, queremos poder publicar datos. Entonces nos estamos lanzando a un post. Y lo último que tenemos que hacer es establecer en verdadero para que podamos acceder a esto desde otra URL. Si guardamos todo eso, ahora
hemos agregado nuestra función a nuestra API. Y tenemos una última cosa que tenemos que hacer. Por lo que por defecto, todo en Amazon tiene la cantidad mínima de permisos posibles para hacer su trabajo. Entonces debido a que ahora estamos usando el SES de Amazon, necesitamos darle a estas lambdas API y un poco de permiso extra. Hacemos eso subiendo a un proveedor y agregando una declaración extra, que es declaraciones de rol de IM. Esta afirmación aquí, va a tener un efecto que va a ser permitido, que significa que estamos permitiendo que estos lambdas hagan algo extra así como un permiso. También tenemos una acción. Y estas van a ser una serie de cosas que estamos permitiendo que estas lambdas hagan. En nuestro caso, esa es la estrella del colon de SES, que dice que estamos permitiendo que SES haga cualquier cosa por estos lambdas. Lo último que tenemos que hacer es agregar un recurso. Y en nuestro caso, eso va a ser una cadena de estrella Decir que se
permitieron en cualquiera de las direcciones de correo electrónico que hemos almacenado. Si guardamos eso, ahora
tenemos nuestros permisos se agregan para nuestra API. Y tenemos nuestra nueva configuración de endpoints API. Si estamos de vuelta a nuestra terminal y ejecutamos SLS, despliega Una vez más. Lo que va a pasar es que ahora va a agregar este endpoint extra y este lambda extra a nuestro despliegue y darles los permisos que necesitan. Esto tarda un poco, pero luego vamos a probar cómo funciona. Y un paso extra que tenemos que hacer para que todo funcione. Entonces ahora que ha terminado de desplegar, Podemos ver que tenemos dos funciones y tenemos dos puntos finales. Uno es un get y otro es un post, que es exactamente lo que esperamos. Antes de poder probar esto, enviar correo electrónico, necesitamos volver a nuestra consola de AWS y buscar un servicio de correo electrónico simple. Este es el servicio que estamos utilizando para enviar correos electrónicos. Y antes de que podamos realmente enviar algún correo electrónico, necesitamos demostrar que los estamos enviando desde una cuenta que poseemos. Hacemos eso yendo a direcciones de correo electrónico y verificando una nueva dirección de correo electrónico. Aquí, puedes ingresar tu propia dirección de correo electrónico. Me alegro de la mía, como algunas artes, codificación
completa, dot IO y hit verificar esta dirección de correo electrónico. Por lo que ahora me han enviado un correo electrónico. Por lo que necesito entrar a mi bandeja de entrada y hacer clic en el
He verificado este correo y te volveré en tan solo un segundo. Por lo que ahora he verificado esto y refrescado. Y puedo ver que mi email esposo verificó, lo que significa que ahora tengo permitido enviar correos desde o hacia esta dirección de correo electrónico. Entonces sólo voy a copiar eso. Y ahora lo que tenemos que hacer es probar nuestro envío de
correo electrónico y apuntar. El modo en que hacemos eso es porque se trata de una solicitud de post. No podemos simplemente poner la URL en el navegador. Pero hay una herramienta realmente genial llamada mujer post. Por lo que si buscas post woman dot IO, se abre este navegador donde puedes ingresar tu URL. Se cambió el método. Entonces un get o un post o un put, y luego agrega algunos datos también. Por lo que aquí, tenemos que comprobar que es un post. Y luego necesitamos obtener nuestra URL de nuestro despliegue y agrega eso aquí. Por lo que necesitamos obtener esta URL, que es nuestra publicación de envío de correo electrónico y pegarla aquí. El último que tenemos que hacer es ir y encender la entrada cruda, lo que nos permite pasar un cuerpo. Como pueden recordar, necesitamos cuatro parámetros. Necesitamos una dirección de dos. Entonces lo que voy a hacer es que voy a pegar los dos en eso. También necesito un de. Y por ahora usa la misma dirección de correo electrónico para enviar hacia y desde. Pero en el siguiente video, lo que haremos es que vamos a agregar ahí para que
puedas enviarlo a cualquier dirección que te guste. También tenemos que añadir un tema. Y voy a poner el tema como mi correo electrónico de prueba. Y por último, lo último que necesitamos es el texto. Y ese texto va a ser cadena. Algo en la línea de esto es un correo electrónico enviado a través de mi API. Si ahora le pegamos a enviar, ¿qué va a pasar? Va a hacer la petición. Y vemos que obtenemos una respuesta de 200. Eso significa que probablemente hayamos hecho con éxito la llamada API y hemos recuperado esa respuesta. Ahora voy a saltar a mis correos electrónicos para que podamos ver cómo se ve eso. Ahora estoy en mi cuenta de correo electrónico. Puedo ver que tengo un email con el asunto de lo he escrito mal, pero mi email de prueba, he enviado el email de algunos para resumir codificación completa. Y este es el contenido del mensaje. Esto solo muestra que nuestro correo electrónico está funcionando y que
ahora podemos golpear esa API para enviar un correo a nuestra dirección de correo electrónico. En el siguiente video, lo que estaremos haciendo es ir a SES y hacer una aplicación para hacer
verificada nuestra cuenta de correo electrónico para que podamos enviar correos electrónicos a cualquier dirección de correo electrónico que nos guste desde nuestras direcciones de correo electrónico verificadas. Entonces cuando hayamos hecho
eso, nos permitirá enviar a cualquier cliente que ingresemos en nueces al buzón de dirección de correo electrónico.
6. Salir del modo de sandbox (opcional): En el último video, configuramos nuestra API de correo electrónico, endpoint y lambda, sin probar que podemos enviar un correo electrónico hacia y desde nuestra dirección de correo electrónico verificada. En este video, lo que vamos a hacer es configurarlo para que podamos enviar correos electrónicos desde nuestras direcciones de correo electrónico verificadas a cualquier correo electrónico que nos guste. Para ello, necesitamos ir y volver al sencillo servicio de correo electrónico. Podríamos buscar aquí, o podríamos listar son servicios visitados bajo solo clic en simple servicio de correo electrónico. Dentro de aquí. Si hacemos click en estadísticas descendentes, podemos ver que estamos teniendo cuentas en modo de caja de arena ocho. Esto significa que sólo podemos enviar a y desde direcciones de correo electrónico que se verifiquen. Por lo que sólo podemos enviar desde o hacia. Algunos no son codificación completa, Das IO. Esto no es genial porque no tiene mucho sentido enviarte un correo electrónico. Entonces si volvemos a entrar aquí, podemos solicitar que se incrementen ocho límites de envío. Esto nos llevará a una nueva pestaña donde vamos al soporte de Amazon. Y queremos hacer un lemma de servicio, aumentar e incrementar los límites de envío para SES. Aquí podemos ingresar algunos detalles como tu cinta de correo, URL de
tu sitio web, y detalles
como cómo solo enviarás correos electrónicos a personas que hayan optado por hacerlo. Acordar todos estos detalles es realmente importante, pesar de que dicen que son opcionales. Porque Amazon no te permitirá verificar tu cuenta y salir del modo sandbox. Si no les has dicho cómo va a funcionar esto. Esto es para protegerlos para que no estés enviando correos a personas que no quieran recibir correos electrónicos de ti. Así que asegúrate de que te caíste todo esto. Y luego puedes bajar a aquí y seleccionar la región. Entonces para mí, es isla de EUR. Y queremos seleccionar la cuota de envío diario. Y puedes establecer esto en un número. Voy a ir con un 1000, lo que significa que se me permite enviar 1000 correos electrónicos al día. Y entonces eso es todo. Siempre y cuando hayas llenado estos son honestamente con la URL de tu sitio web, quién se lo vas a enviar. Entonces si, digamos, tener un sitio web que tu cliente haya ingresado su correo electrónico diciendo que quieren recibir actualizaciones y cómo tramitarás si hay quejas. Y un buen detalle para eso probablemente sea ir y decir, voy a eliminarlos de la lista de correo para que no reciban ningún correo electrónico futuro. Una vez que hayas hecho todo eso, puedes agregar un poco de una descripción si quieres, y luego presionar submit. Eso le permitirá entonces hacer esa solicitud y enviar correos electrónicos a múltiples clientes, no sólo a las dos direcciones de correo electrónico verificadas. A veces Amazon no te deja hacer esto, pero todo este proyecto bien sigue funcionando si no has verificado esto. En el siguiente video, lo que estaremos haciendo es estar echando un vistazo a construir nuestro React up para que tengamos un front-end para manejar la creación de estos correos electrónicos.
7. Crea nuestra aplicación de React: En el último video, echamos un vistazo a configurar nuestro Amazon SES para salir del modo sandbox. Si lo has hecho, chico es genial. Pero si no lo has hecho, seguiremos adelante y
podremos hacer todo lo que necesitamos para poder hacer. Entonces en este video, vamos a estar configurando nuestro React up. Entonces si vuelves a nuestro código y podemos cerrar ambos de estos archivos y en nuestro terminal, pero actualmente en API. Por lo que necesitamos CD en nuestra ruta, que tiene la habilidad share email curso. Aquí, necesitamos instalar un React up. Entonces la forma en que hacemos eso es usar Create React up. Si no has usado Create React up antes, entonces puedes entrar a Google y buscar la aplicación Create React. Y podrás ver el paquete de instalación aquí. Por lo que empezar con Create React up. Y puedes seguir esta Guía de Inicio Rápido para conseguir la configuración. Entonces de nuevo en nuestro código, podemos usar n px, crear dash, reaccionar dash up para permitirnos crear un nuevo reactor hacia arriba. Y entonces vamos a estar llamando a esto. Esto va a crear una nueva carpeta en las raíces de este repo. Y luego va a instalar todos los paquetes, archivos,
y dependencias requeridos que necesitamos para ejecutar nuestro React up. Esto lleva un poco de tiempo configurarlo, así que me pondré en contacto con ustedes cuando eso se haga. Entonces ahora que ha terminado de instalar, Podemos ver que nos está diciendo que podemos ejecutar Yarn, empezar a empezar nuestros reacciona hacia arriba. Pero primero vamos a echar un vistazo al código UPC que se da. Esto se da como una carpeta pública y una carpeta fuente. Y lo primero que vamos a ver es app.js. Entonces aquí podemos ver que tenemos una imagen,
una etiqueta p, etiqueta de párrafo, un enlace diciendo aprender, reaccionar. Lo que vamos a hacer es que vamos a eliminar algo de esto. Entonces borra esa sección superior y reemplázala por una H. Y H uno, lo vamos a llamar mi aplicación de correo electrónico. Y luego fuera de nuestro encabezado, vamos a añadir una nueva cadena. Y esto sólo va a ser contenedor de correo electrónico. Si guardamos esto, ahora
podemos entrar a nuestra terminal y podemos ir CD a nuestra app. Y ahora que estamos en están arriba, podemos ejecutar arranque MPM, que va a empezar nuestro React up. Como puedes ver, se abre una nueva pestaña donde voy a reaccionar arriba se va a cargar. Se necesita un poco de tiempo para configurarse. Y ahí vamos. Tenemos el predeterminado Reaccionar con nuestro, mi email up contenido. Y luego justo en la parte inferior, dice contenedor de correo electrónico. Lo que vamos a hacer es que lo vamos a hacer mejor con CSS para cambiar esto alrededor un chinche en nuestro código. Lo primero que vamos a hacer es que vamos a cambiar la E. Vamos a cambiar el logo que estamos cargando. Por el momento estamos cargando logo dot SVG. Pero lo que voy a hacer es que voy a añadir en el logo de codificación completa. Entonces voy a arrastrar eso hasta aquí. Y ahí tenemos el logo para una codificación completa. En nuestro app.js. Lo que podemos hacer es cambiar de dónde estamos importando el logotipo y cambios para completar la codificación. Logo dot PNG. Y eso es sólo arrastrar un poco esto. Entonces sí, es codificación completa, logo dot PNG. Si guardamos eso y volvemos a entrar aquí, ahora
podemos ver que el logotipo ha cambiado, así que seguimos siendo robot, pero el estilo aún no está del todo bien. Entonces aquí podemos entrar en nuestro punto AP CSS y cambiar algunas cosas. Lo primero que queremos cambiar es hacer el logotipo un poco más pequeño. Entonces cámbialo de 40 los hombres a diez V min. También podemos eliminar esta sección de medios ya que eso es lo que está provocando que la aplicación gire. Y se ve un poco loco. Ahora necesitamos encontrar nuestro encabezado de aplicación. Entonces vamos a cambiar la min-altura de 100 a cinco. Y vamos a deshacernos de esta dirección de columna. Vamos a dejar un centro de líneas de ítems y justificar el contenido Centro y todo lo demás. Entonces si ahorramos lotes, volvemos a nuestro código. Ya podemos ver que tenemos nuestro logo y luego el título de la app. Esto se ve mucho más limpio. Ahora lo que podemos hacer es realmente podemos definir este área de contenido de correo electrónico para que
tengamos más que un solo campo de texto y podamos ingresar una dirección de correo electrónico, un asunto, y el texto que queremos enviar, y luego realmente enviarlos . Entonces eso es lo que vamos a estar haciendo en este próximo video.
8. Crea nuestro componente de formulario de correo electrónico: En el último video, llegamos a este punto donde teníamos una costumbre reaccionar al alza con nuestro logotipo y nuestro título con solo una cadena de contenedor de correo electrónico. Y en este video, lo que vamos a hacer es actualizar este contenedor de correo electrónico para que sea un nuevo componente y luego agregar las casillas de entrada para la dirección til, así
como un asunto y el contenido del correo electrónico. Si saltamos a través de nuestro código, lo que queremos hacer es reemplazar este texto por un componente. Entonces lo que tenemos que hacer es entrar en sierras y crear un nuevo archivo y llamar a este nuevo archivo email container dot js X. En aquí, lo que podemos hacer es primero necesitamos importar React desde React ya que este es un componente React. Y entonces necesitamos declarar la función como lo haríamos normalmente. Por lo que Comcast email container es una función. Y esa función devuelve div con una clase de contenedor de correo electrónico. Dentro de ese div, aún queremos el texto del contenedor de correo electrónico. Y lo último que tenemos que hacer en este archivo se guarda en la parte inferior, exportar contenedor de correo electrónico predeterminado. Si guardamos eso, ahora
podemos volver a entrar en nuestro app.js. Y aquí tenemos el texto para contenedor de correo electrónico. Podemos eliminar eso y agregar un nuevo componente llamado Email container así. Y cuando hice eso, importó automáticamente los componentes funcionales del contenedor de
correo electrónico del contenedor de correo de dot slash. Si guardamos esto, ahora
podemos mirar en nuestro cinturón. Y aún dice contenedor de correo electrónico. Pero esta vez lo está tirando de ese componente. Entonces ahora lo que podemos hacer es volver a ese componente y actualizarlo para tener los campos que queremos. Entonces aquí, lo que también vamos a estar haciendo es que
vamos a estar usando un paquete llamado IU material. Esto es genial ya que a nos permite hacer muy fácilmente componentes de aspecto agradable. Entonces lo voy a hacer es que voy a golpear este plus en una terminal para crear una segunda terminal. Y aquí dentro voy a ejecutar npm install dash, dash save material. Dash UI. Llamada de barras inclinadas hacia adelante. Ahora, mientras PSI se está ejecutando, lo que podemos hacer es que podemos empezar a usar algunos de estos componentes. Entonces en lugar de decir contenedor de correo electrónico, lo que queremos hacer es agregar un grupo para agrupar todo esto juntos. Entonces lo que voy a hacer es crear un elemento llamado papel. Y este papel elementos que necesitamos importar de material UI. Por lo que importar papel de agrega material UI slash core. Dentro de este trabajo, queremos agregar un formulario. Y no necesitamos la acción en el teléfono. Por lo que dentro del formulario, entonces
queremos posponer los campos. Lo primero que necesitamos es un campo de texto. Y este campo de texto va a tener algunos atributos en él. El primer atributo que vamos a tener en él es un ID. Y esa identificación va a ser dirección de correo electrónico de destino. Y así como ese id también va a tener una etiqueta. Y esa etiqueta va a ser lo que queremos mostrar justo por encima de esta entrada. En nuestro caso, esta va a ser la versión bonita, por lo que es dirección de correo electrónico de destino. Ahora cuando guardamos este archivo, primero
necesitamos importar nuestro campo de texto. Por lo que podemos agregar eso como otra importación a nuestra llamada de interfaz de usuario material. Guardándolo de nuevo, esto ahora ha funcionado. Para que pueda pasar a nuestro código. Y vemos que tenemos la dirección de correo electrónico. Y ahí es donde un cuadro de texto en el que podemos entrar cosas. Eso es genial, pero ahora necesitamos agregar un par de campos más. Entonces además de tener un campo de texto para la dirección de correo electrónico, queremos otro campo de texto, que va a ser correo electrónico,
lo siento, ID es igual al asunto de correo electrónico con una etiqueta de asunto de correo electrónico. Y una tercera, que va a ser un campo de texto con un ID de contenido de correo electrónico y una etiqueta de correo electrónico. Contenido también. Lo último que queremos es que queremos añadir un botón en la parte inferior. Entonces lo que podemos hacer es decir que tenemos un, otro botón. Y vamos a hacer un poco de estilo en esto. Entonces vamos a decir que va a haber una variante. Y eso solo le dice a este material componentes de la interfaz de usuario, qué tipo de Boston queríamos ser. Y vamos a decir que es un componente contenido. También podemos establecer el color. Y en este caso, vamos a ir con primaria. Y luego cierra eso. Y dentro de este botón lo vamos a enviar, tener un texto de enviar correo electrónico. Si guardamos todo esto, nuevamente
necesitamos importar nuestro Boston ya que aún no lo hemos hecho. Así que entra en nuestra llamada de interfaz de usuario material y guárdelo para que esto se construya con éxito. Ahora podemos dirigirnos a nuestra app y ver que tenemos tres cajas de entrada bajo botón. Pero el diseño de esto no es genial. Entonces lo que vamos a hacer es volver a nuestro código y añadir un poco de estilo. En nuestra fuente, crea un nuevo archivo y llama a ese archivo. Contenedor de correo electrónico enseñado CSS. Y aquí dentro, podemos sumar un par de cosas. El primero que necesitamos agregar es un control para el propio contenedor de correo electrónico. Entonces email container, y lo que queremos hacer es agregar un poco de margen para que no esté tan cerca del borde. Por lo que el margen va a ser de diez píxeles. Además de eso, queremos cambiar el diseño de la forma en su interior. Eso cambiará la forma en que estos componentes dentro de la forma un par. Entonces la forma en que nos referimos eso es correo electrónico contenedor forma espacio. Y queremos agregar algo de relleno de diez píxeles. También queremos cambiar el método de visualización. Por lo que la exhibición va a ser lino. Y finalmente la dirección flex va a ser columna. Ahora tenemos eso. Podemos guardar este archivo, volver a nuestro contenedor de correo electrónico, el Dr. Jay Sx. Y necesitamos importar ese archivo CSS. Por lo que importar puntos slash correo electrónico contenedor puntos CSS. Y ahora cuando entramos, podemos ver que esto se presenta de una manera mucho más agradable. Lo único que sí quiero cambiar ahora es el hecho de que este botón es demasiado grande. Entonces podemos volver a nuestro código y nuestro CSS y agregar otra cosa que va a ser el botón de formulario de contenedor de correo electrónico, que va a hacer referencia sólo a ese botón y establecer el ancho para que sea de 150 píxeles. Eso va a cambiar, que manden correo electrónico para ser de un tamaño mucho más bonito. Sin todo hecho, ahora tenemos una app que no podemos teclear. Bajo botón en el que podemos dar click. Por el momento. Esto no hace nada, y eso es lo que vamos a cubrir en el próximo video, donde vamos a agregar estado a esto para que podamos almacenar estos campos de datos.
9. Añadir un estado a nuestro componente: En el último video, creamos este componente y agregamos estos campos de entrada donde podemos escribir contenido. Pero en este video ahora vamos a agregar estado para que
podamos tomar estos valores y usarlos para algo. Entonces si entramos en nuestra aplicación y nuestro contenedor dot j x x, vamos a estar usando React hooks y reaccionar estado. Por lo que en la parte superior de este archivo, queremos crear una nueva variable de estado para el correo electrónico de destino. Y la forma en que hacemos eso con ganchos es decir que Comcast y luego declarar un correo electrónico de destino de matriz, conjunto de comas. Destino, correo electrónico es igual a estados estadounidenses, y por ahora va a ser una cadena vacía. Entonces, ¿qué hemos hecho en esta línea? Hemos creado una variable llamada Destination email, que es el valor que tiene actualmente el correo electrónico. Y hemos creado una función. Y esta función nos permite pasar algunos datos nuevos, los cuales van a actualizar el estado y cambiar el valor de nuestro correo electrónico de destino. El modo en que usamos eso es si bajamos a nuestro campo de texto aquí, podemos agregar algunos parámetros extra. Entonces aquí, podemos quedarnos en su lugar cambiar el valor. Y el valor va a ser correo electrónico de destino. Eso significa lo que sea que sea este valor en el estado, es lo que también va a ser el valor de este campo de texto. Además de que tenemos capacidad para el arte y sobre el cambio. Y esta va a ser una función que se llama en cualquier momento alguien cambia el valor de esto. Entonces ese cambio desencadena un evento. Y lo que queremos hacer es que queremos establecer el correo electrónico de destino. Entonces e dot apunta valor así, y guarde eso. Entonces aquí hemos usado estados estadounidenses, pero en realidad no hemos importado a la baja. Entonces lo que tenemos que hacer es subir para reaccionar las importaciones arriba. Y además de importar reacciona. También podemos importar estado estadounidense. Eso ya ha tenido éxito. Y aunque esto parece que funciona exactamente de la misma manera, tenemos este valor almacenado en estado, mientras que este valor es un valor incontrolado al que no tenemos acceso en nuestra aplicación. Lo que vamos a hacer ahora es agregar una función extra solo para mostrar puntos. Nosotros hemos controlado este estado. Y esa función va a ser una función de envío. Entonces const, enviar es una función. Y aquí por ahora, vamos al estado actual del registro de punto de consola. Y eso va a ser un objeto. Con correo electrónico de destino. Esta función de envío que realmente podemos agregar a nuestro botón. Entonces además de una variante y un color, podemos agregar un on click, que en nuestro caso sólo se va a enviar. Si guardamos esto y volvemos a nuestro código, podemos escribir algo en nuestro correo de destino, y luego podemos escribir algo en nuestro asunto. Y si entramos a nuestra consola y
presionamos enviar correo electrónico, podemos ver que el estado actual tiene el correo electrónico de destino, pero no tiene asunto. Entonces lo que ahora tenemos que hacer es repetir este proceso. Pero para el tema y el contenido. Por lo que const sujeto conjunto de comas, sujeto es igual a estado estadounidense. Y vamos a empezar con una cuerda vacía. Entonces también decimos que texto
const es igual y texto
establecido es igual a estado de uso. Justo así. Y ahora podemos bajar a nuestros campos de texto de entrada y teníamos esos parámetros extra. Por lo que aquí podemos establecer valor igual a sujeto y OnChange es igual a una función que toma el evento y llama set subject. Con el valor de punto objetivo de punto E dot. Volvemos a hacer lo mismo con el campo de texto para contenido de correo electrónico. Entonces aquí, podemos establecer el valor. Y ese valor va a igualar texto. Y un onchange es igual a E evento. Y el evento luego se desencadena. Establecer texto, pasando en punto E objetivos valor de punto. Ahora que tenemos todos esos set, podemos actualizar esta consola log dos como tema, así
como el texto. Si entramos a nuestra terminal, nuestra app, lo siento, podemos agregar un, una dirección de correo electrónico y un contenido y golpear enviar en nuestra consola sobre el lado derecho, podemos ver que tenemos un email de destino y un texto, pero el tema está en blanco, que es exactamente lo que esperamos. Vamos a poner un poco de validación aquí para que sepamos que los campos,
el cliente ha ingresado nuestro correcto. Entonces si no hay un correo de destino, vamos a agregar un nuevo estado. Y ese nuevo estado va a ser un mensaje de error. Entonces const error, mensaje. Mensaje de error es igual al estado estadounidense. Y por ahora va a empezar como un mensaje en blanco. Entonces si no hay un correo electrónico de destino, vamos a establecer el mensaje de error dos, falta la dirección de correo electrónico. Sólo voy a capitalizar eso. Y luego vamos a regresar de esta función. Por lo que no continúa más allá. Vamos a hacer el mismo chequeo para tema sobre texto. Entonces si no hay tema, y voy a copiar estos
dos asuntos de
correo faltantes . Y por último, si no hay texto de punto, establezca mensaje de error de texto de correo electrónico faltante. Ahora, a pesar de que lo hemos hecho, realidad no
hemos utilizado este mensaje de error en ninguna parte, razón por la
que estamos adivinando este mensaje de error asignado pero nunca usado. Entonces vamos a copiar ese valor del mensaje de error y volver a nuestro código. Sube en el fondo. Y justo antes de nuestro botón, vamos a añadir un poco de código. Vamos a añadir unos tirantes rizados. Y luego vamos a usar una ecuación ternaria. Vamos a decir, esto va a decir si hay un mensaje de error, vamos a mostrar un mensaje. Y eso va a ser un div. Justo así. Y dentro de ese div va a estar el mensaje de error en sí. También vamos a añadir una clase a esto porque podemos hacer un poco de estilo en un segundo. Por lo que ClassName equivale al mensaje de error. Ahora bien, ya sea ecuación ternaria, siempre hay que poner un colon al final porque esta es una declaración if-else. Entonces si el mensaje de error es cierto, mostramos este div else. Y en este caso, queremos mostrar nulo, que sólo va a mostrar nada. Entonces si vuelves a nuestra app y si golpeamos enviar correo electrónico, ahora, ahora obtendríamos este div extra, diciendo que nos falta nuestra dirección de correo electrónico. Eso es genial ya que muestra al usuario que esto no ha tenido éxito. ¿ Y por qué? Si ingresamos algo en la dirección de correo electrónico y lo enviamos, lo
cambia a asunto de correo faltante. Ahora, de vuelta a nuestra confirmación. Una vez que tenemos todo esto, si tenemos el correo electrónico, los temas en el texto, queremos establecer el mensaje de error en
una cadena vacía para que no se muestre más. Entonces si ingresamos algo en el correo electrónico sobre contenido, nos falta el tema. Pero ahora si agregamos un tema, el mensaje de error desaparece. En el siguiente video, lo que estaremos haciendo es enganchar esto a la API que hicimos antes en el curso. Para que una vez que el usuario haya ingresado los detalles, podamos enviarnos ese correo electrónico a nosotros mismos.
10. Conexión de nuestro componente con nuestra API: En el último video, creamos nuestros reacciona a la altura de nuestro estado y agregamos algunas pruebas para asegurarnos de que el asunto del correo de destino en los textos estuviera todo poblado. En este bit del video, lo que vamos a hacer es que vamos a sumar axiomas que realmente podamos enviar esta solicitud a nuestra API, cual enviará nuestro mensaje. Por lo que después de este proceso de envío, queremos agregar algún código extra para enviar la solicitud. El instrumento que vamos a estar utilizando para esto es eje. Entonces si volvemos a nuestra segunda ventana de terminal, podemos instalar un nuevo paquete. Por lo que npm instala dash, dash save sellos. Entonces ahora lo que tenemos que hacer es agregar algún código extra después de esta validación para enviar esa solicitud. Aquí vamos a hacer axial S dot post. Y lo que vamos a estar publicando es que vamos a estar publicando hasta nuestra URL, a la
que llegaremos en un segundo. Y además de eso, vamos a estar pegando un objeto. El objeto es el objeto que esperamos recibir en nuestra API, que es un dos. Y ese va a ser nuestro correo electrónico de destino. Estamos esperando tener un sujeto. Y para nosotros, sólo podemos decir que el tema es igual a este tema. También estamos esperando texto, que de nuevo, podemos decir es el texto que hemos almacenado en estados. Y finalmente, nosotros, ¿estamos esperando un de? Y en este caso, es necesario establecer la dirección de origen a
la dirección de correo electrónico que verificó en el SES de Amazon, que en nuestro caso es algún punto de codificación completa IO. Ahora lo que tenemos que hacer es asegurarnos de que hemos importado el acceso. Entonces si vas a la parte superior de tu archivo e importas eje desde axiomas. Ahora tenemos todo esto funcionando. Pero, ¿qué pasa si esto no tiene éxito? ¿ Qué pasa si esto falla? Bueno, podemos agregar un punto luego a esto. Y esto solo se llamará si esta API ha tenido éxito. Entonces si esto ha sido exitoso, lo que queremos hacer es volver a ajustar las variables a cadenas vacías. Por lo tanto, establece el texto en vacío. Queremos establecer el correo electrónico de destino para vaciar. Y queremos sujetar al Mt. Ahora que tenemos eso, queremos agregar una cosita extra agradable. Queremos establecer un mensaje de éxito. Entonces eso significa que agregamos una cosa más en estado. Entonces en la parte superior, const mensaje de éxito,
set, mensaje de éxito es igual a estados de Estados Unidos. Y por ahora va a ser una cuerda vacía. Y aquí, podemos establecer mensaje de éxito. Y el mensaje puede ser su correo electrónico fue enviado. Ahora esto es lo que pasa cuando las cosas van bien y entra en este punto exitoso luego bloquear. Pero, ¿qué pasa si esto se cae? Digamos, el correo electrónico al que estás enviando no existe. Por lo que el SES de Amazon no puede enviarlo. O hay algún otro problema como que tu URL sea inválida o que tu lambda esté abajo. En ese caso, queremos sumar una captura. Y queremos captar el error, que entra en esta función. El primero que queremos hacer es el
error console.log en la publicación OK CEOS y el mensaje de error. Esto hará que sea mucho más fácil cuando estamos tratando de
depurar por qué nuestra aplicación puede haber fallado. Entonces lo primero que queremos hacer aquí después del mensaje de error es que queremos configurar
el mensaje de éxito para que se vacíe para que se elimine. También queremos establecer el mensaje de error. Y en este caso, podemos ir con mensaje de puntos de error ya que a veces hay un mensaje sobre el propio error. O si no lo hay, entonces podemos ir con incapaz de enviar el correo electrónico. Ahora que tenemos eso, en realidad
necesitamos usar el mensaje de éxito. Y lo vamos a utilizar de una manera muy similar a cómo hemos utilizado el mensaje de error. Si nos desplazamos hacia abajo hasta donde tenemos ese mensaje de error, lo que podemos hacer es crear una nueva línea debajo de eso. Decir que el mensaje de éxito usando un ternario. Entonces podemos tener un div así. Y dentro de este div, tenemos una propiedad dinámica de mensaje de éxito. Y si eso no existe, vamos a ir con no. Similar a cómo no queremos el mensaje de error. También vamos a añadir un nombre de clase. No class_name va a ser mensaje de éxito también. Entonces si guardamos todo esto, tenemos un último poco de ajustes que hacer, que es entrar en nuestro CSS y agregar algo para definir la diferencia entre el éxito y el mensaje de error. Lo que podemos hacer es decir mensaje de error de puntos, y cambiar el color a rojo. Eso sólo significa que los mensajes de error aparecen en rojo son un mensaje de éxito aparecen en el bloque normal. De vuelta en nuestro contenedor de correo electrónico. Esto es todo configuración. Entonces nosotros, todo lo que necesitamos hacer es encontrar nuestra URL. Eso es lo que hemos construido en nuestra API antes de este curso. Y pegarlo en. Si necesitas encontrar esta URL y no sabes cómo conseguirla o has olvidado qué era. Te mostraré una forma genial de conseguir eso. Por el momento estamos en la raíz del curso de email de skill share dentro de nuestra terminal. Si aún estás en tu app, entonces puedes cd abajo un directorio con barra de puntos. Pero entonces necesitamos cd en API. Ahora estamos en la API, podemos hacer información SLS. Y va a retroceder la información sobre el sistema que hemos desplegado con serverless. Y aquí vamos, tenemos nuestro punto de URL de envío de correo electrónico, solo para que podamos copiar eso y pegar eso ahí y golpear guardar. Entonces si ahora vamos a través de nuestra arriba, podemos ingresar nuestra dirección de correo electrónico, que es algún arte completo punto de codificación IO. Es necesario ingresar tu dirección de correo electrónico. Si has logrado las verificaciones de cuenta, tu cuenta no está en algún modo de caja. Puedes terminar por la dirección de correo electrónico de otras personas, pero en nombre o no introduzcas una dirección de correo electrónico aleatoria. Porque si se reporta, entonces puedes perder el derecho a ese modo libre y terminarás de nuevo en algunos libros. El tema. Mi primer correo electrónico desde la app. Y el contenido es, esto es realmente genial que puedas enviar un email desde mi pila completa hasta. Si ahora presiono enviar email, puedes ver que tu email fue enviado. Y eso es todos los campos fueron eliminados, que es exactamente lo que esperamos. Si ahora abro mi email, echaremos un vistazo y veremos si lo he recibido. Entonces como pueden ver, ahora
hemos recibido mi primer correo electrónico. Y cuando empiezas a enviar mensajes por primera vez, a veces aparece en Google diciendo que podría ser spam. Eso se debe a que no has enviado muchos correos electrónicos a través de este servicio de Amazon. Y a medida que envíes más, esto se quitará. Si haces click en luce seguro, eso ayudará a ese proceso. Como puedes ver, tenemos el tema y el texto que ingresamos en nuestra app. Entonces eso significa que tenemos el proceso de pila completo, toda la configuración.
11. Conclusión: Enhorabuena por completar esta causa sin servidor de pila completa. Hemos aprendido a configurar nuestras
cuentas AWS y sin servidor e implementar una API que funciona con el SDK de AWS para que nos permita enviar correos electrónicos en nombre de nuestros usuarios. Con entonces configura un reactor arriba y conecta los dos para crear nuestra pila completa arriba. Si has aprendido algo nuevo en este curso, realmente me ayudó. Si das este curso y calificación ya que ayuda a más desarrolladores como ustedes, aprenden las habilidades y ayuden a todos a subir de nivel como desarrollador.
Sam Williams
