‫Conferencista: Y ahora para terminar este
‫proyecto, terminemos esta integración de Stripe con webhooks.
‫Comencemos a recordar cómo funciona realmente nuestra integración
‫de Stripe en este momento.
‫Tenemos este extremo de la sesión de
‫pago, al que se llama desde nuestro front-end.
‫Esto luego llamará a la función getCheckoutSession, así
‫que básicamente esta aquí,
‫que creará una sesión de pago en el servidor
‫usando toda esta información aquí, y
‫luego la enviará de vuelta al cliente.
‫Luego, después de que Stripe haya realizado
‫con éxito el procesamiento del pago,
‫redirigir al usuario a esta URL exitosa, por lo que
‫esta que creamos.
‫Recuerde que en esta URL agregamos el ID del tour, el
‫ID de usuario y también el precio.
‫Lo hicimos para que una vez que se llame a esta URL aquí,
‫nuestra aplicación creara un nuevo documento de reserva en
‫nuestra base de datos.
‫¿Cómo funcionó eso?
‫En la ruta my-tours, tenemos un middleware para eso.
‫Recuerde, aquí en viewRoutes, en my-tours,
‫tenemos este createBookingCheckout.
‫Esta función aquí, que básicamente de la consulta toma el recorrido,
‫el usuario y el precio, y crea
‫una entrada en la base de datos usando esos datos.
‫Básicamente, colocamos estos datos en la URL
‫cada vez que Stripe procesa con éxito un pago.
‫Y luego, esta función de middleware que tenemos
‫aquí recoge los datos y crea una nueva reserva en nuestro sistema
‫utilizando esos datos.
‫Y luego, básicamente, redirigimos aquí a
‫la URL original sin la cadena de consulta.
‫Ahora, el problema con esto es que no es realmente seguro.
‫Entonces, todos los que conocen esta estructura de URL,
‫por lo que este de aquí, qué recorrido, usuario y precio en
‫la cadena de consulta, básicamente pueden crear una reserva en
‫nuestro sistema sin pagar realmente.
‫Entonces, todo lo que tendríamos que hacer es abrir esta
‫URL con algunos
‫datos allí y luego, desde allí, crear automáticamente una
‫reserva sin pasar por el proceso de Stripe.
‫Recuerda que en ese entonces dije que arreglaríamos
‫esto usando algo llamado webhooks.
‫Entonces, lo hacemos ahora.
‫Porque para
‫eso, realmente necesitamos que nuestro sitio web esté implementado.
‫Ahora, en este punto, ese es realmente el caso.
‫Entonces, ahora podemos implementar estos webhooks.
‫Para eso, vayamos a nuestro panel de Stripe.
‫Y de hecho ya tengo eso abierto aquí.
‫Y luego vaya aquí a los desarrolladores, luego elija webhooks, y
‫aquí, agregue un nuevo punto final.
‫Ahora bien, ¿qué es este punto final aquí y este webhook?
‫Básicamente, aquí especificaremos una URL a la que
‫Stripe enviará automáticamente una solicitud POST cada vez que una sesión
‫de pago se haya completado con éxito, básicamente, siempre
‫que un pago se haya realizado correctamente.
‫Con esa solicitud POST, Stripe enviará de vuelta los datos de
‫la sesión original que creamos en el primer paso
‫cuando creamos esa sesión de pago.
‫Esa es la razón por la que realmente necesitábamos que
‫nuestro sitio web se implementara aquí porque ahora necesitamos especificar esa
‫URL de la vida real aquí.
‫Tomemos eso de
‫aquí, y luego agreguemos nuestra ruta aquí básicamente.
‫Voy a llamar a esto un webhook-checkout.
‫No está en la API y no está dentro de las reservas.
‫Verá en un momento por qué es así.
‫Nuevamente, cuando un pago se realizó correctamente,
‫Stripe publicará automáticamente los datos
‫de la sesión original en esta URL.
‫Ahora también debemos seleccionar el evento.
‫Y ves que hay toneladas de eventos que podríamos usar aquí.
‫El que estamos usando es checkout_session_completed.
‫Agrega eso.
‫Ahora debe ingresar su contraseña aquí nuevamente.
‫Y luego ahí vamos.
‫Este webhook también tiene un secreto aquí.
‫Este, también lo necesitaremos en un segundo
‫cuando realmente creemos nuestra ruta para esta URL aquí.
‫De hecho, eso es exactamente lo que haremos a continuación.
‫Básicamente, en nuestro sistema,
‫por supuesto, ahora necesitamos una ruta para esto aquí,
‫de modo que cuando Stripe publique los datos en nuestra
‫aplicación, podamos hacer algo con ellos.
‫Regresemos aquí y abramos nuestra aplicación.
‫De hecho, agregaremos esta ruta aquí.
‫Nuevamente, te explicaré por qué en un segundo.
‫Entonces, app. post
‫y ruta estándar y luego, por supuesto, necesitamos
‫una función de controlador para eso.
‫Vamos a crearlo rápidamente aquí en nuestro bookingController.
‫Déjame llamar a eso exportación. webhookCheckout.
‫Ahora tendré que importar este controlador a la aplicación. js.
‫Hagamos eso justo aquí después del bookingRouter en
‫realidad, entonces este y este, controlador
‫y aquí también controlador.
‫Está bien.
‫Ahora aquí abajo, eso es bookingController. webhookCheckout.
‫Ahora, ¿por qué definimos este webhook-checkout aquí mismo
‫en la aplicación? js en lugar de
‫hacerlo, por ejemplo, en bookingRouter.
‫La razón de esto es que en esta función de controlador,
‫cuando recibimos el cuerpo de Stripe, la función
‫de Stripe que luego usaremos
‫para leer realmente el cuerpo necesita este cuerpo en forma cruda, así
‫que básicamente como una cadena y no como JSON.
‫Nuevamente, en esta ruta aquí, necesitamos que
‫el cuerpo que viene con la solicitud no esté en
‫JSON, de lo contrario, esto no funcionará en absoluto.
‫Ahora bien, la cuestión es que tan pronto como una
‫solicitud llegue a este middleware aquí, el cuerpo se analizará
‫y se convertirá a JSON.
‫Luego se pondrá a pedido. body como un objeto JSON simple.
‫De nuevo con eso, este controlador de
‫ruta aquí no funcionaría.
‫Esa es la razón por la que necesitamos poner esta ruta aquí
‫antes de llamar al analizador corporal.
‫Ahora todavía necesitamos analizar el cuerpo, pero en
‫el llamado formato sin formato.
‫En el momento en que estaba grabando este video,
‫no podíamos hacerlo con Express listo para usar.
‫Entonces, en este video, descargamos el analizador corporal de npm y lo
‫usamos como lo muestro en el video.
‫Sin embargo, como cinco días después de que grabé
‫este video, Express también agregó el analizador sin procesar a Express.
‫Ahora podemos usar express. raw en lugar de tener que
‫instalar el analizador corporal o el middleware desde npm.
‫Nuevamente, en este video, ahora instalaré el analizador corporal, pero
‫realmente no es necesario.
‫Puedes usar express. crudo en su lugar.
‫Npm instala
‫body-parser.
‫Probablemente todo esto suene un poco enfocado, y
‫lo entiendo totalmente, pero así es
‫como funciona la documentación de Stripe y nos obliga
‫a hacerlo, de verdad.
‫Volvamos aquí a nuestra ruta.
‫En esta ruta, necesitamos que el cuerpo esté en formato raw.
‫Podemos agregar eso como un middleware aquí entre la ruta y
‫el controlador final.
‫Aquí decimos bodyParser. raw, y
‫también necesitamos especificar aquí el
‫tipo muy rápido como application / json.
‫Ahora agregamos este análisis de cuerpo como un cuerpo sin procesar aquí en
‫esta pila de middleware.
‫Todo esto realmente comenzará a juntarse
‫una vez que comencemos a implementar esta función.
‫De hecho, hagámoslo ahora,
‫aquí mismo.
‫Pero antes de hacer
‫eso, eliminemos todo el código que escribimos
‫para que funcione ahora mismo.
‫Entonces, básicamente esta función de middleware,
‫ya no la necesitamos.
‫También aquí en
‫viewRoutes, ya no lo necesitamos aquí.
‫Y finalmente, en bookingController, también
‫volvamos a configurar nuestra URL a la normalidad.
‫Dejaré todo esto aquí para que
‫pueda tenerlo como referencia.
‫Pero ahora la URL correcta debería ser esta.
‫Básicamente, después de una reserva exitosa,
‫todavía queremos volver a my-tours pero sin
‫todos estos parámetros de
‫consulta porque ahora ya no es esta función aquí,
‫que se encargará de crear la reserva, sino
‫que es esta función aquí, que
‫es de Por supuesto, el que
‫se llama una vez que Stripe llama a nuestro webhook.
‫Implementemos ahora esto.
‫Lo primero que debemos
‫hacer es eliminar esta firma de Stripe de nuestros encabezados,
‫así que firma y luego solicita. encabezados
‫y luego desde allí stripe-signature.
‫Básicamente, cuando Stripe llama a nuestro webhook,
‫agregará un encabezado a esa
‫solicitud que contiene una firma especial para nuestro webhook.
‫Si estás pensando que estás siguiendo ciegamente
‫lo que estoy haciendo aquí,
‫bueno, (risas) eso es exactamente lo que hice
‫también en las documentaciones de Stripe.
‫Una vez más, así es como funciona Stripe, y no
‫hay nada que podamos hacer contra eso.
‫De todos modos, a continuación, creemos un
‫evento Stripe, por lo que el evento const es igual a stripe.
‫Para eso, por supuesto, necesitamos la biblioteca Stripe
‫instalada, que tenemos aquí.
‫Entonces, raya. webhooks. contructEvent.
‫Ahora aquí es donde finalmente entra en juego ese
‫cuerpo, así que pídelo. cuerpo.
‫Y recuerde que este cuerpo aquí debe
‫estar en forma sin procesar, por
‫lo que básicamente está disponible como una cadena.
‫Una vez más, es por eso que colocamos esa ruta
‫antes que todas nuestras otras
‫rutas y especialmente antes de que el analizador corporal pueda hacer
‫su trabajo de convertir nuestro cuerpo en un objeto JSON.
‫Luego, además de ese cuerpo, para el evento, necesitamos una firma, así que básicamente
‫la firma que se envió junto
‫con el encabezado, y finalmente nuestro secreto de webhook.
‫Consigamos eso de aquí, cópielo.
‫Como es un secreto, deberíamos, como siempre, agregarlo aquí
‫a nuestro
‫archivo de configuración, así STRIPE_WEBHOOK_SECRET.
‫Y luego, por supuesto, no olvide agregar esto
‫también a nuestra configuración de Heroku.
‫Usemos eso ahora.
‫Agregar proceso. env.
‫Debería haberlo copiado aquí
‫mismo.
‫Verá, todo esto es realmente para hacer que el
‫proceso sea súper, súper seguro.
‫Necesitamos todos estos datos, como la
‫firma y también el secreto, para validar básicamente los
‫datos que vienen en
‫el cuerpo para que nadie pueda manipularlos.
‫Ahora, durante la creación de este evento,
‫puede haber algunos
‫errores, por ejemplo, si la firma
‫es incorrecta o si el secreto es incorrecto.
‫Y entonces, envuelvamos esto en un bloque try-catch.
‫Bueno.
‫Por supuesto, ahora necesitamos la captura.
‫En caso de
‫que haya un error, queremos enviar un error
‫a Stripe, así que devuelva res. status 400 y luego simplemente use
‫send webhook error
‫y luego agreguemos el error. mensaje.
‫Entonces, es Stripe quien recibirá esta respuesta aquí porque nuevamente
‫es Stripe quien realmente llamará a la URL, por lo que
‫nuestro webhook, que luego llamará a esta función.
‫Ahora, por supuesto, también debemos declarar este evento aquí
‫fuera del bloque try-catch porque,
‫de lo contrario, no podremos usarlo allí.
‫Entonces, deje el evento y luego reasigne aquí porque recuerde que
‫ES6 const y let tienen
‫un alcance de bloque.
‫Por tanto, esta variable no estaría disponible fuera de
‫este bloque.
‫Ahora usemos ese evento.
‫En primer lugar, debemos probar si este es realmente el evento
‫que queremos.
‫Entonces, podemos hacer event. tipo es igual
‫a pago. sesión. completo.
‫Recuerde que en nuestro panel
‫de Stripe, ese es exactamente el tipo que definimos aquí.
‫Entonces, ese es el tipo de evento.
‫Ahora estamos verificando si ese es realmente
‫el evento que estamos recibiendo aquí solo para estar 100% seguros.
‫Si es así, queremos utilizar el evento para crear nuestra
‫reserva en nuestra base de datos.
‫De hecho, hagámoslo en una función separada
‫y no aquí dentro de todo este lío.
‫Para eso, crearé una función.
‫De hecho, déjame
‫darle exactamente el mismo nombre, así que createBookingCheckout.
‫En realidad, era un buen nombre,
‫pero ahora no puede ser un
‫middleware, sino una función normal.
‫Esta función aceptará los datos de la sesión.
‫Y recuerde que los datos de la sesión son exactamente esta sesión
‫que creamos aquí en primer lugar.
‫Si este es el evento correcto,
‫entonces llamemos a esa función,
‫entonces creeBookingCheckout con la sesión, que está en
‫el evento. datos. objeto.
‫Y
‫finalmente, enviemos una respuesta a Stripe.
‫Entonces, el estado 200
‫y luego digamos que alguna recepción
‫json se establece en verdadero.
‫¿Tiene sentido?
‫Una vez más, todo este código se
‫ejecutará siempre que un pago se haya realizado correctamente.
‫Stripe llamará a nuestro webhook, que es la URL, que
‫llamará a esta función.
‫Y así, esta función recibe un cuerpo de la solicitud
‫y luego, junto con la firma y / o el secreto del
‫webhook, crea un evento, que contendrá la sesión.
‫Y luego, utilizando los datos de la
‫sesión, podemos crear nuestra nueva reserva en la base de datos.
‫Y entonces, eso será bastante similar a
‫lo que teníamos aquí antes.
‫Entonces, necesitaremos esta línea de código aquí nuevamente.
‫Entonces, esta también será una función asíncrona.
‫Y entonces, esto es exactamente lo mismo.
‫Ahora, lo que necesitamos
‫aquí, por supuesto, es tener acceso al recorrido, al usuario y al precio.
‫Pero esos datos una vez más se almacenan en esa sesión.
‫Entonces, comencemos con el recorrido.
‫Y recuerde cómo aquí, cuando creamos
‫por primera vez esta
‫función de controlador, especifiqué este campo client_reference_id
‫y agregué el tourId a eso.
‫¿Recuérdalo?
‫Hice eso porque, en ese
‫momento, ya sabía que necesitaríamos esta identificación de gira un poco más tarde.
‫Ahora es el momento en el que realmente necesitamos
‫la identificación del tour para poder crear esa nueva reserva.
‫Y así, ahora el ID de recorrido
‫que necesitamos está en el ID de referencia del cliente de punto de sesión.
‫Entonces, copiemos esto y digamos
‫sesión.
‫Y, por supuesto, aquí tenemos que decir gira.
‫Entonces, esa es la identificación de la gira.
‫A continuación, necesitamos la identificación de usuario.
‫Ahora la información que tenemos en nuestra
‫sesión sobre el usuario es el correo electrónico del usuario.
‫Entonces, ahora lo que
‫tenemos que hacer es básicamente obtener la identificación del usuario.
‫Para eso, consultaremos por correo electrónico.
‫Eso no es un problema porque el correo electrónico también es único.
‫En base a eso, podemos encontrar la identificación única.
‫Entonces, el usuario constante está en espera.
‫Y creo que ya tenemos al usuario aquí.
‫¿No?
‫No, en realidad no lo hago.
‫Entonces, hagamos eso aquí.
‫Y usuario aquí también.
‫Bueno.
‫Entonces, User. findOne y luego consulta por correo electrónico, que
‫está en el punto de sesión, y creo que es el
‫correo electrónico del cliente o algo así.
‫Es customer_email.
‫Bueno.
‫Pero eso devolverá el documento completo, pero en
‫realidad queremos la identificación.
‫Entonces, envuelvamos todo esto aquí entre paréntesis
‫y luego llamemos al ID allí o leamos el ID.
‫Eso es todo.
‫Y finalmente, el precio.
‫¿Dónde se almacena el precio?
‫Bueno, está aquí en line_items.
‫Eso es una matriz, entonces en el
‫elemento cero, y luego la cantidad dividida por 100.
‫Entonces, lo multiplicamos aquí por 100 para obtener centavos, pero
‫ahora, por supuesto, lo queremos de vuelta en dólares.
‫Entonces, básicamente tenemos que dividir eso.
‫Y así, sesión. line_items y luego la
‫cantidad de puntos del primer elemento si estoy en lo cierto.
‫Sí.
‫Entonces, cantidad dividida por 100.
‫Eso debería ser realmente.
‫Confirmemos ahora nuestros cambios en el repositorio
‫y enviémoslo a Stripe.
‫Entonces, git add all, por supuesto,
‫y luego git commit message
‫Implementación de stripe
‫mejorada, y luego git push heroku master.
‫Una vez más, esto llevará algún tiempo.
‫Te veré cuando termine.
‫Está bien.
‫Ahora no olvide configurar esa nueva variable de entorno.
‫Entonces, ese es el conjunto de dos puntos de configuración de heroku,
‫y luego simplemente cópielo desde aquí.
‫Bueno.
‫Eso luego reinicia la aplicación.
‫Y eso es.
‫Entonces, vayamos ahora a probarlo.
‫Está bien.
‫Todavía estamos aquí en nuestra aplicación.
‫Veamos qué tours ya ha reservado Laura.
‫Ella tiene el Forest Hiker.
‫Esa reserva todavía se hizo utilizando el método anterior.
‫Pero ese viejo método ya no funciona.
‫Ahora, si hacemos otra reserva y
‫funciona, bueno, eso significará
‫que, por supuesto, nuestra nueva implementación funciona.
‫Probemos eso aquí.
‫Como siempre, 4242.
‫Ahora esperemos.
‫Bueno, aparentemente eso no salió tan bien porque, de
‫lo contrario, nuestra segunda nueva gira ya debería
‫estar aquí en nuestras reservas.
‫Veamos aquí en nuestro panel de control.
‫Si ahora
‫recargamos esto, entonces realmente vemos que hubo un evento exitoso.
‫Entonces, ese es el evento que acabamos de
‫crear y que envió este cuerpo aquí
‫y luego recibió esta respuesta.
‫Entonces, esta recepción establecida en verdadero es
‫exactamente lo que hicimos aquí en nuestro código, así que
‫esto aquí.
‫Entonces, esa es la respuesta que
‫enviamos y el cuerpo en el que obtuvimos fue toda esta información.
‫Y así, podemos ver aquí la sesión
‫con el precio, con el correo electrónico, con el tour.
‫Entonces, no estoy seguro de por qué no funcionó.
‫Entonces, recarguemos rápidamente esto aquí.
‫Entonces, en realidad, nuestra implementación de Stripe debería ser correcta, pero,
‫por alguna razón, nuestra nueva reserva no se creó.
‫Comprobemos eso también aquí en Compass.
‫Y de hecho, no está ahí.
‫Entonces, volvamos a nuestro código aquí.
‫Ah, y un error que veo de inmediato está aquí.
‫Entonces, debería completarse así.
‫Entonces, ese es un error estúpido.
‫Veamos si puede
‫haber otro error aquí en createBookingCheckout.
‫Aquí tenemos
‫line_items.
‫Veamos si eso es correcto.
‫Y sí, parece serlo.
‫También podemos confirmarlo aquí de nuevo en nuestro Stripe.
‫En realidad, aquí se llama display_items.
‫Eso es raro.
‫Solo para asegurarnos, llamémoslo también display_items aquí en
‫nuestro código aquí mismo.
‫Ahora, otra cosa que noté
‫ahora cuando eché otro vistazo
‫aquí es que todavía tenemos esta imagen codificada para estos
‫otros natours. dev.
‫Ahora solucionemos eso porque en este punto, por supuesto, nuestro
‫sitio web ya está activo e implementado.
‫Y así, básicamente podemos reemplazar eso con
‫lo mismo que tenemos aquí.
‫Entonces, usamos esta parte aquí muchas veces.
‫Entonces, es hora de usar eso nuevamente aquí.
‫Sí.
‫Intentemos volver a implementar esto.
‫Entonces, agrega todo de nuevo.
‫Y llamémoslo aquí
‫Implementación de banda mejorada dos.
‫Y luego empújelo de nuevo a Heroku.
‫Bueno.
‫Intentémoslo una vez más.
‫Regresemos aquí.
‫Ahora intentemos reservar de nuevo en Park Camper.
‫Está bien.
‫Debería ver la imagen apareciendo aquí en el lado izquierdo.
‫Eso significa que nuestra nueva integración de
‫imágenes también funcionó bien.
‫Ahora está procesando.
‫Ah, ahora está aquí.
‫Excelente.
‫Eso es hermoso.
‫Ahora realmente tenemos una implementación de
‫Stripe segura y mucho más profesional en
‫nuestra aplicación.
‫Eso es genial.
‫Por supuesto, si vuelve
‫a cargar aquí, entonces debería ver este nuevo evento aquí, así
‫que esta nueva llamada a nuestro webhook,
‫que por supuesto nuevamente fue un éxito.
‫Eso es simplemente genial.
‫Ahora solo hay una última cosa que quiero hacer, que
‫es básicamente darle al usuario algunos comentarios en forma de uno de
‫estos mensajes verdes que usamos también, por ejemplo,
‫en el inicio de sesión.
‫En este momento, nuestra aplicación no
‫da ningún tipo de retroalimentación cuando se reservó un nuevo recorrido.
‫Ahora quiero cambiar eso.
‫Sin embargo, hacer esto no es realmente sencillo
‫porque recuerde que estos
‫mensajes son realmente mostrados por JavaScript.
‫Entonces, en los otros casos, hicimos una llamada HTTP a nuestra API.
‫Y luego, cuando lo hicimos, usamos JavaScript para
‫mostrar algún tipo de mensaje.
‫Pero ahora no lo hacemos así.
‫Y entonces, el mensaje ya debería estar en algún lugar del
‫HTML tan pronto como se
‫cargue la página para que luego nuestro JavaScript
‫pueda recoger ese mensaje del HTML y mostrarlo bien en uno
‫de estos banners.
‫Entonces, la forma en que voy a poner estas
‫alertas en el HTML es una vez más usando una propiedad de datos.
‫Comencemos implementando esta función allí mismo en nuestra
‫plantilla principal.
‫Eso es aquí en vistas, base.
‫De hecho, agregaré ese mensaje de alerta directamente
‫en el elemento del cuerpo.
‫Aquí tendremos una propiedad de alerta de datos, que
‫en realidad solo debería establecerse
‫si la variable de alerta está disponible aquí.
‫Entonces, usemos ES6, una cadena de plantilla, y digamos
‫si hay una alerta, luego use alert
‫aquí, y de lo contrario, una cadena vacía.
‫Y entonces, esta alerta aquí será el mensaje
‫de alerta que JavaScript luego recogerá y mostrará en la página.
‫Ahora bien, ¿cómo termina este mensaje de alerta como una
‫variable de alerta aquí en nuestra plantilla?
‫Bueno, se me ocurrió una solución que es reutilizable
‫para que podamos usarla en toda nuestra aplicación.
‫Es decir, en la cadena de consulta, agregaremos alguna
‫palabra clave de alerta y luego tendremos
‫un middleware, que tomará esa
‫palabra clave de la URL y, de acuerdo con la
‫palabra clave que coloquemos allí, luego pondrá un
‫mensaje de alerta completo en respuesta. . lugareños.
‫Y así, recuerde que todo lo que está en respuesta. locals está disponible
‫como variable en todas nuestras plantillas.
‫Entonces, en realidad lo usamos antes
‫en nuestro authController, creo.
‫Muy rápido, déjame mostrarte eso.
‫Aquí mismo, dijimos respuesta. local. usuario y
‫ponga el usuario actual allí.
‫Luego, automáticamente en todas las plantillas, tenemos
‫acceso a esa variable de usuario.
‫Entonces, ahora implementemos lo que acabo de
‫decir y empecemos con la URL.
‫Lo que voy a hacer aquí es agregar esa cadena de consulta aquí
‫a la URL de éxito.
‫Aquí, diré alerta igual reserva.
‫Ahora podría, en todas las demás URL, agregar también alguna alerta y luego con
‫una palabra clave diferente aquí, por supuesto.
‫Y lo haremos aquí realmente para esta reserva.
‫Pero de nuevo creé aquí una especie de solución reutilizable.
‫De todos modos, ahora en nuestras rutas, necesitamos básicamente un middleware, que
‫se ejecutará para todas las solicitudes.
‫Y es ese middleware, que recogerá la alerta
‫de la cadena de consulta y pondrá un mensaje de alerta
‫en nuestra respuesta. lugareños.
‫Entonces, enrutador.
‫use viewsController. alertas.
‫Y entonces, esta es una función de
‫middleware, que básicamente se ejecutará para todas y cada una de las solicitudes
‫que ingresan a este enrutador,
‫básicamente para todas las solicitudes a nuestro sitio web.
‫Ahora creemos ese middleware en
‫nuestro viewsController.
‫Entonces, exportaciones. solicitud
‫de alertas, respuesta y siguiente.
‫Y entonces,
‫la alerta es solicitud. consulta. alerta.
‫Entonces, usemos esta estructuración aquí una vez más.
‫Y luego digamos que si alerta es igual a reservar, entonces
‫la alerta que ponemos aquí en la cadena de
‫consulta, bueno, en
‫ese caso, digamos respuesta. lugareños. alerta será que su
‫reserva
‫fue exitosa,
‫por favor
‫revise su correo electrónico para una confirmación.
‫Y también deberíamos agregar alguna
‫otra frase, que es esta, si su reserva no lo hace,
‫seleccione esta, no aparece aquí de inmediato, vuelva
‫más tarde.
‫Y esta última
‫parte se debe a que Stripe dice muy
‫específicamente en su documentación que a veces se llama al webhook un
‫poco después de que se llama a la URL de éxito.
‫En ese caso, esa URL correcta mostraría todos los
‫recorridos actuales, pero solo después de eso, se
‫llamaría al webhook y
‫se crearía el recorrido en nuestra base de datos.
‫Por lo tanto, la nueva reserva no aparecerá de
‫inmediato en la página Mis reservas.
‫Pero, por supuesto, todo funcionó bien en ese caso.
‫Entonces, simplemente recargo, pero luego solucionaremos ese problema.
‫Ahora solo necesitamos llamar al siguiente middleware.
‫Y eso es todo.
‫Nuevamente, solo hicimos esto aquí para la alerta igual a la reserva, pero
‫ahora podríamos usar esto en todo el lugar
‫en nuestro sitio web estableciendo diferentes palabras clave de
‫alerta y cadenas de consulta.
‫Con esto, ponemos este mensaje aquí en res. lugareños. alerta.
‫Nuevamente, nuestra plantilla base lo recogerá y lo
‫mostrará aquí en esta propiedad de alerta de datos.
‫Entonces, todo lo que queda por hacer ahora es ir a nuestro índice. js y lea
‫la alerta desde aquí y luego muéstrela.
‫Y entonces, eso debería ser bastante fácil.
‫Aquí en público, hagámoslo bien en el índice.
‫Y lo primero es que realmente necesitamos importar la función
‫de alertas.
‫Esa no es una aplicación.
‫Está aquí en index.
‫Bueno.
‫Y luego aquí abajo, básicamente leamos esa alerta.
‫Entonces, const alertMessage, digamos, es
‫document. querySelector, luego el
‫elemento body, dot dataset. alerta.
‫Y así, solo si hay una
‫alerta, por supuesto, muestre la alerta
‫con éxito
‫y el mensaje de alerta.
‫Y ahora, una pequeña cosa que quiero
‫hacer es cambiar un poco esta función showAlert aquí porque
‫en realidad tenemos mucho texto ahora.
‫Y el tiempo estándar en el que se
‫muestra la alerta no sería suficiente para leer todo el texto.
‫Entonces, puede ver aquí que después de cinco segundos,
‫la alerta está oculta.
‫Dejemos que el usuario especifique
‫la cantidad de segundos que se muestra la alerta.
‫Lo haremos por defecto de cinco segundos.
‫Aquí, simplemente multiplicamos el tiempo por 1,000 para convertirlo
‫a milisegundos.
‫Así, todas las funciones funcionarán en todas
‫partes con cinco segundos.
‫De hecho, hagámoslo siete segundos si
‫no especificamos nada.
‫Pero si queremos, podemos anular este siete.
‫Entonces, lo haré ahora
‫aquí y lo pondré 20 segundos en la pantalla.
‫Está bien.
‫Creo que debería ser así.
‫Espero que tenga sentido.
‫Ahora compilemos nuestro paquete muy rápidamente.
‫Eso es npm run build, luego toque autocompletar.
‫Eso también lleva un poco de tiempo.
‫Pero ahora está hecho.
‫Implementémoslo ahora por última vez con la esperanza
‫de que realmente funcione.
‫Entonces, git commit.
‫Entonces, mensajes de Stripe.
‫Y una última vez, git push heroku master.
‫Probemos ahora comprando otro tour aquí.
‫Consigamos al City Wanderer esta vez.
‫Oh, acabo de ver que ya hay un mensaje aquí.
‫Eso no es bueno.
‫Y ves que desapareció después de 20 segundos.
‫Entonces, parece que ahora, de
‫forma predeterminada, siempre pondrá esta clase de alerta aquí.
‫(risas)
‫Sí.
‫Eso es porque aquí debería ser alertMessage y
‫no solo alerta.
‫Pero de todos modos, probemos ahora si el
‫mensaje es correcto cuando reservamos el tour.
‫Bueno.
‫Ahora esperemos.
‫Aquí vamos.
‫De hecho, ahí está nuestro mensaje.
‫Tan hermoso.
‫Además, nuestro recorrido se muestra aquí.
‫Y ves que realmente se queda aquí por mucho tiempo.
‫Entonces, eso también funciona.
‫Vamos muy rápido ...
‫Y primero, necesitamos reconstruir el paquete aquí.
‫Luego podemos agregar todo a nuestra
‫área de preparación, corrección de errores de alerta de mensaje.
‫Entonces, estos
‫son algunos (risas) mensajes que suenan realmente profesionales aquí.
‫Ahora un último empujón a Heroku.
‫Ahora, cuando cargamos nuestra página, no deberíamos
‫ver ningún mensaje de alerta.
‫Y de hecho, ahora todo está limpio.
‫Entonces, ahora puedo decir que al menos por
‫ahora, este proyecto está realmente terminado.
‫Una vez más, gran trabajo, felicitaciones y enhorabuena por
‫ser probablemente una de las pocas personas que realmente está llegando
‫al final del proyecto y realmente está
‫construyendo este hermoso sitio web y también la API que
‫ahora puede poner en su cartera. y mostrar
‫al mundo.