Desarrollo web full stack para principiantes, parte 4: proyecto final, Node, Express y MongoDB

1. ¡Te damos la bienvenida al curso!: Bienvenido a Full Stack Web Development para principiantes. Este curso está diseñado para llevarte de principiante a desarrollador web capaz de construir no sólo la interfaz de usuario front-end, sino también para diseñar y construir el backend con el que interactuar también. ¿ Quién soy yo? Mi nombre es Chris y seré tu instructor a lo largo de este curso. Soy desarrollador web y también productor de montones de tutoriales, enseñando a miles de estudiantes las habilidades que necesitan para construir sitios web y aplicaciones. Esta es la cuarta parte de la serie completa, donde seguiremos construyendo sobre todo desde las tres primeras partes de este curso. Este curso se trata de mudarse al backend de los sitios web, donde aprenderás muchas cosas increíbles. Empezamos con nodo y el marco express, donde configuramos un libro de viajes en aplicación llamado Let's Travel. Construiremos este proyecto a lo largo del curso. Todo lo que aprendas se pondrá en práctica de inmediato. Node y Express son realmente populares y aprendizaje de estas tecnologías te dejará en alta demanda. Después de esto, pasamos al enrutamiento y la creación de plantillas, que nos permitirá cambiar entre páginas y navegar por nuestra aplicación, junto con configurar plantillas para mostrar no solo el contenido que hemos creado, también renderizaremos datos de nuestra base de datos también. Bases de datos es de lo que se trata la siguiente sección, donde veremos MongoDB y Mangosta. Aprenderás tanto incluyendo modelar nuestros datos, crear, leer, actualizar y eliminar acciones, junto con el filtrado y la agregación para recuperar los datos exactos que necesitamos. Después de esto, seguimos adelante con estilo y agregando muchas características agradables a nuestro proyecto, junto con aprender muchas técnicas de JavaScript de próxima generación desde ES6 y más allá. También aprenderás cómo permitir que los usuarios suban imágenes y cómo podemos guardar y recuperar estas imágenes de nuestro almacenamiento en la nube. Por supuesto, la mayoría de las aplicaciones hoy en día necesitan lidiar con cuentas de usuario y autenticación. Esto es algo de lo que aprenderemos al mismo tiempo que aplicamos todos estos a nuestro proyecto. Aprenderás a crear cuenta de usuario, iniciar y cerrar sesión, validar información de usuario nuevo, autenticación, almacenar contraseñas de forma segura y mucho más. Terminamos nuestra app permitiendo al usuario realizar pedidos y luego guardarlos en la base de datos. Después creamos un área de cuenta donde el usuario puede iniciar sesión y ver cualquier reserva que haya realizado. También los usuarios admin pueden ir a la sección admin para ver listas de todos los pedidos que se han realizado. Este curso termina mostrándote algunos consejos y recomendaciones de seguridad para preparar tu solicitud para la producción. Después empujamos nuestra aplicación a un servidor en vivo para que el resto del mundo lo vea, todo mientras explicamos las cosas de una manera sencilla, sencilla de entender, que incluso los principiantes entenderán, junto con reforzar las cosas con unos proyectos divertidos pero desafiantes a medida que avanzamos. Espero que estés realmente emocionado de conocer todas estas cosas, en la parte final de este curso. 2. Qué vamos a construir: En esta sección y para casi todo el resto de este curso, vamos a construir la aplicación de viajes de nicho, cuando el usuario puede iniciar sesión y realizar reservas para hoteles en diversos países. Esta va a ser la página de inicio, que va a ser el punto de partida donde un usuario puede buscar hoteles en diferentes países. También podemos sumar el número de noches y también el número de huéspedes, así como ciertos filtros como la calificación por estrellas, y también podemos resolver el precio del hotel sabio de bajo a alto o alto a bajo. Más abajo, también estamos tirando de la base de datos algunos hoteles aleatorios y tiene que ser restringido los primeros nueve. El usuario puede hacer clic en cualquiera de estos hoteles y conocer más información. Obtendrá una vista ampliada del hotel. También obtenemos una descripción y luego en la parte inferior, tenemos la oportunidad de luego buscar este hotel con la disponibilidad actual y también el precio actual. Si volvemos a la página principal más abajo en la parte inferior después de los hoteles, también tenemos una lista de países donde podemos filtrar los hoteles por los diversos países. Si hacemos click en cada uno de estos, entonces podemos ver cada hotel que está disponible para ese país en particular. Junto con estos filtros, también podemos hacer clic en el “Todos los países” y luego ver una lista de todos los países disponibles para los cuales tenemos hoteles disponibles. Una vez que agregamos nuevos hoteles como Admin, estos países se actualizan automáticamente en el front-end también. Por lo que no tenemos que preocuparnos de sumar todos estos en, cada vez que sumamos un nuevo país, así como estos países. Si volvemos a subir a los hoteles, también tenemos un enlace para ver todos los hoteles disponibles. Si quieres desplazarte por todas las que tienes en la base de datos en lugar de filtrar hacia abajo por los países mediante el uso de una Búsqueda. Aplicación de servicio será una aplicación basada en nodos utilizando el framework express sobre el cual aprenderemos en esta sección y en las próximas secciones dos. También estará utilizando diversas tecnologías para unirse a este proyecto, como MongoDB para almacenar nuestros datos. Utilizamos Mangoose para diversas cosas como estructurar nuestros modelos u otros datos. A la par de todo esto, también tendrá la facilidad para que el usuario siga adelante e inicie sesión. Podemos iniciar sesión con un correo electrónico y contraseña. Entonces escuchemos ahora. También estará usando mensajes de descarga, igual que ven aquí, para darle al usuario algunos comentarios sobre cuándo un inicio de sesión o cierre de sesión, junto con el administrador para poder ver cuándo un hotel ha sido agregado con éxito a la base de datos. Una vez que iniciamos sesión, ahora tenemos una sección de cuenta en la que podemos hacer click. También podemos consultar las reservas actuales que cada usuario tiene disponibles. A la par de esto, si el usuario es un admin, así que vamos a '” /admin”. Actualmente, el nombre de usuario y contraseña que he ingresado es abajo como administrador. Por lo que ahora tenemos acceso a esta sección de administración del sitio web, que va a ser el back-end donde puede tener algunos privilegios de administrador, como agregar nuevos hoteles a la base de datos, que podemos hacer con este formulario aquí. El administrador también puede editar detalles de un hotel o eliminarlos completamente de la base de datos también. Todo lo que necesitamos hacer es, agregar la identificación del hotel, o podemos buscar por el nombre del hotel, si no estamos seguros del DNI. De vuelta al admin, también podemos ver todas las reservas disponibles que están siendo colocadas por todos los usuarios. Una vez que hayamos iniciado sesión como usuario y realizamos la búsqueda, busquemos Jamaica, siete noches, y podemos agregar una fecha, número de invitados, la calificación por estrellas, y también los filtros de precio. Podemos hacer click en “Buscar” y después lo hemos llevado a los resultados de búsqueda. Entonces este es el hotel que coincide con nuestros filtros y también tendremos una sección en el lado derecho que calcula el total por persona y así como el costo total de la reserva. Después podemos continuar a través de la pantalla de confirmación la cual proporciona la descripción completa del hotel junto con la facilidad para realizar un pedido. Una vez que se coloca y se lleva a nuestros conteos y luego podemos ver hacia abajo en la parte inferior que nuestro pedido se ha sumado en la parte inferior con una referencia de orden única. Si vas al admin, también hay que añadirlo dentro de aquí también porque estamos logueados como admin también para este usuario actual. También podemos ir a Ver reservas, y luego ver las reservas colocadas abajo también en la parte inferior. Si vamos a seguir adelante y cerrar sesión y luego probar esta sección de administración. Podemos ver que nos redirigen de vuelta a la página principal porque esta ruta está protegida. Entonces durante este proyecto, vamos a estar aprendiendo una variedad de cosas. Como mencioné antes, estaremos usando nodo para el back-end, express como marco para construir este proyecto, Mangoose y MongoDB para nuestros datos back-end, ruta para navegar por nuestros proyectos junto con el MVC patrón que nos permitirá añadir alguna estructura a nuestro proyecto también. A la par de esto aprenderá mucho más incluyendo la autenticación, cómo mantener a los usuarios conectados usando sesiones, junto con mucho más, y lo sabremos todo sobre esto en las próximas secciones. Por lo que vamos a dar inicio a este proyecto en el siguiente video, donde echaremos un vistazo al nodo y a MPM junto con instalar esto en nuestro sistema. 3. Aliento a un proyecto de Sk: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y desviarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase, volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. También recuerda compartir tu proyecto hasta aquí en Skillshare y solo lo revisaré, pero también inspirará a compañeros de estudios también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. ¿Qué es Node y NPM?: Bienvenido de nuevo. Si nos dirigimos a nodejs.org, esta es la página oficial de Node.js, que estaremos utilizando para construir este proyecto final. Vemos en la parte superior hay alguna información sobre lo que es Node.js. Básicamente, Node.js es un tiempo de ejecución de JavaScript, construido sobre el motor V8 de Chrome. ¿ Qué significa exactamente esto? Bueno, V8 es motor que hace que JavaScript funcione dentro del navegador web Chrome de Google. Cuando hemos estado usando JavaScript hasta ahora en este curso, se ha estado ejecutando dentro del navegador. Chrome utiliza su propio motor V8, y también otros navegadores tienen la versión propia también. Históricamente, dentro del navegador es donde se ejecuta JavaScript, en el lado del cliente. No obstante, desde que se desarrolló Node.js, también podemos escribir código JavaScript, que también se ejecuta en el servidor. Una de las cosas clave de V8, es que también puede correr en cualquier lugar. No solo dentro de Chrome, lo que lo pone a disposición para trabajar también en otras aplicaciones, lo cual se escribe en el lenguaje de programación C ++. Con esto, Node.js fue creado usando el motor V8, que permitirá que nuestro código JavaScript se ejecute en el servidor sign dos. Esto fue enorme para muchos desarrolladores que ya conocían JavaScript, ya que ahora pueden escribir el front-end y también el back-end de aplicaciones usando el mismo lenguaje. Antes de esto, tendríamos que aprender otro lenguaje del lado del servidor, como PHP. ¿ Por qué queremos ejecutar nuestro código en el servidor? Esto se debe a que nos permite crear páginas web dinámicas. Esto significa que la página web se crea primero en el servidor, y también puede incluir cualquier dato dinámico, sacado de nuestra base de datos u otras fuentes. Además, puede comprobar si el usuario está conectado, por ejemplo, antes de enviar de vuelta cualquier información sensible. Si aún no lo has hecho, asegúrate de hacer clic en el botón de descarga para la versión actual de Node y seguir adelante y seguir las instrucciones de instalación. Esto en nuestro sistema nos permitirá ejecutar Node localmente y crear un servidor web en nuestra propia computadora para el desarrollo. Cuando estemos descargando Node.js, también incluirá npm, que es el gestor de paquetes del Node. Esta es la colección de miles de paquetes que podemos utilizar con Node para construir casi cualquier tipo para proyecto que queramos. También en [inaudible] 2, si construimos algo nosotros mismos, que creemos que puede ser útil para otra persona. Entonces podemos empaquetarlo en lo que se llama módulo y también publicar nuestro propio módulo dos en npm. medida que pasemos por este proyecto, estaremos usando módulos npm para agregar funcionalidad. Tal como un módulo llamado pasaporte. Buscamos pasaporte, este es un módulo Node el que vamos a estar utilizando para proporcionar autenticación de usuario, para que los usuarios puedan iniciar sesión con un correo electrónico y contraseña. También usaremos muchos más paquetes npm también, como progreso, para permitir que nuestras contraseñas sean encriptadas, para permitir subidas de archivos, por seguridad y muchos más, lo que descubrirá pronto. Se trata de Node y npm y una visión general de lo que pueden hacer. Descubriremos más sobre ellos a medida que pasemos por este proyecto también. Si tu descarga de Node ya está terminada, sigue adelante y haz clic en los pasos de instalación para instalarla en tu computadora. Entonces te veré en el siguiente video. 5. Diferencias entre servidor web estático y dinámico: Puede que estés pensando, ¿por qué estamos usando un servidor web para construir proyectos? ¿ No hemos ido bien hasta ahora sin uno? Bueno, este es un punto justo entre los que trataré de explicar en este video. De manera general, podemos categorizar nuestros sitios web en estáticos o dinámicos. En la pantalla aquí tenemos nuestro juego de emparejamiento de formas abierto en el index.html. En todos nuestros proyectos anteriores hasta el momento, si abrimos el index.html y también abrimos dentro del navegador, tenemos nuestro contenido HTML. Este HTML es todo estático ya que el contenido no cambia. Sí, puede que tengamos algunas formas aparecen en cuando se inicia el juego. Todo esto se hace en el navegador mediante el uso de JavaScript. Dentro del navegador, si vamos a hacer clic derecho y ver fuente de la página, esto se abrirá en una nueva pestaña. Este es el mismo código que se muestra aquí como vemos en Visual Studio en nuestro HTML. Aunque subiéramos este proyecto a un servidor web y lo hiciéramos vivir en la web, todo este contenido sigue siendo estático y recuperaremos los mismos resultados del servidor. Básicamente en un proyecto estático como este, el servidor enviará de vuelta lo que le dimos, como la página de índice. Páginas web dinámicas sobre t [inaudible] él rondo puede regresar del servidor mucho diferente al código que podemos ver en nuestro editor de texto. Si pasamos a la versión terminada de nuestros proyectos problemáticos y también abrimos el navegador. Entonces no te preocupes por [inaudible], cómo se ve todo esto. Conoceremos todo este código durante las próximas secciones. Voy a pasar a una de las plantillas del hotel, que está dentro de las vistas, y luego si vamos a hotel.pug, vamos a cerrarla. De nuevo, no te preocupes por todo este complicado código. Por ahora sin embargo, quiero que se concentren en una cosa. Este es el nombre del hotel, que está en un rumbo de nivel tres. La sintaxis podría parecer un poco confusa debido a este h3 más corto. Pero esto sólo un h3 elementos de los que ya hemos aprendido. Después de esto es hotel.hotel_name. Si pasamos al navegador, podemos ver el nombre real del hotel, como Hotel 11 o Hotel nueve, en lugar de este nombre hotel.hotel, que veremos en Visual Studio. Si vamos al navegador, podemos ver el nombre real del hotel también está disponible en la fuente. Si vamos a dar click derecho Inspeccionar y luego dar click en el nombre de nuestro hotel, vaya a los elementos y derribó esto. Aquí podemos ver nuestro HTML de salida el cual es devuelto desde el servidor. Tenemos nuestro h3, que también podemos ver aquí. Ambos son datos dinámicos ahora se ha reemplazado por nombre del hotel. Aquí vemos que el servidor web esta vez se toma nuestra plantilla de hotel de Visual Studio y rellena los datos faltantes con datos de nuestra base de datos antes de regresar hacia en el navegador. De esto se trata las páginas web dinámicas. Sitios estáticos, al igual que el que hemos visto antes con el matcher Shape, una multa totalmente para aplicaciones sencillas. Incluso aquellos que todavía usan datos de API también, como nuestro buscador de canciones. Pero la ciencia dinámica es perfecta cuando queremos cambiar datos antes de enviarlos de vuelta al navegador. O para tareas relacionadas con la seguridad, como manejar información sensible del usuario. Ya que no queremos que se maneje dentro del navegador. Espero que tenga sentido. A continuación nos vamos a poner en marcha con nuestro proyecto usando el framework Express. 6. Express.js y express generator: Para este proyecto, vamos a estar aprovechando un marco ligero para Node llamado Express. Express es un marco realmente popular en la comunidad Node, y es la plataforma ideal para que iniciemos nuestro proyecto. Más en la página de inicio que es expressjs.com, podemos ver esta página de inicio, como dice aquí, es un marco rápido, y poco opinionado, y minimalista para Node.js. Esto significa que no asume cómo será nuestro proyecto. Somos libres de aprovechar básicamente lo que Express proporciona sin tener que apegarnos a muchas reglas estrictas, que muchos otros marcos nos imponen. Es minimalista, lo que significa que proporciona las características base que casi seguro necesitaremos, como un servidor web, ruta final para cambiar entre páginas, manejo de errores y creación de plantilla, impulsar cualquier funcionalidad adicional es hasta impulsar los anuncios mediante el uso del gestor de paquetes de nodos, que miramos antes. Express proporciona un servidor web el cual podemos utilizar para servir nuestras páginas, y esto también les sirve a todos los navegadores con el contenido dinámico tal como lo vimos en el último video. Incluso instalado en Express 2, se hace como un módulo npm. Como vemos aquí abajo, tenemos el código de terminal para configurar el servidor como módulo de nodo, para que podamos configurar las cosas manualmente, o Express también proporciona un generador. Tenemos todo lo que necesitamos para ponernos en marcha. Si vamos al menú y Iniciando, cursor sobre esto y luego podemos dar click en el generador Express. Necesitamos instalar esto vía npm, así que voy a dirigirme a la terminal para instalarlo. Los usuarios de Windows pueden abrir el programa PowerShell para el escenario, o cualquier otro programa que prefiera. Voy a abrir iTerm y hacernos un poco más grandes. Antes de continuar, necesitamos asegurarnos de que Node y npm estén correctamente instalados. Podemos hacerlo escribiendo dentro de la terminal o dentro de un PowerShell. Podemos comprobar Node está instalado correctamente escribiendo nodo -v. Si vemos un número de versión aquí, significa que el Nodo está instalado correctamente. Podemos hacer lo mismo con npm -v. Nuevamente, si tenemos un número de versión apareciendo, esto significa que nodo y npm está correctamente instalado. Si no ves el número de versión o tienes un error, asegúrate de seguir adelante y volver a instalar Node, y asegúrate de que esto esté en su lugar antes de seguir adelante. Entonces podemos seguir adelante e instalar el generador Express usando npm. Así que teclea npm instala exepress-generator, y luego dash g al final. Es posible que los usuarios de Mac también necesiten agregar la palabra clave sudo antes si golpeas un error. Justo antes de esto, necesitamos agregar sudo y luego “Enter”, y esto luego nos solicitará la contraseña, luego pulsa “Enter”. Ahora es, vamos a seguir adelante y descargar el generador Express desde npm. El dash g flag que agregamos al final de aquí, instalará este paquete a nivel mundial. Esto significa que se puede utilizar en cualquier proyecto, no solo en el que estamos creando. Ahora necesitamos navegar hasta donde queremos crear nuestros proyectos. Voy a estar agregando el mío al escritorio. En la actualidad, estoy en mi directorio de usuarios actual, por lo que voy a usar cd para cambiar el directorio al Escritorio. Golpea “Enter” y ahora podemos ver que estamos dentro del escritorio. Por supuesto, puedes cambiarlo para que sea cualquier ubicación que prefieras, solo estoy guardando la mía en el escritorio para facilitar el acceso. Ahora para crear un nuevo proyecto en este directorio, podemos ejecutar este comando. Tan express seguido del nombre de nuestro proyecto, voy a llamar a la mía lets-travel, y luego dash dash dash view es igual a pug, pega “Enter” y vamos a seguir adelante y crear nuestros proyectos, que también está usando el pug templando el lenguaje, que vamos a cubrir pronto. Si nos desplazamos hacia arriba dentro de la terminal, podemos ver una lista de archivos y carpetas que se han creado para nosotros, y también algunas instrucciones sobre cómo empezar. Voy a estar usando el terminal incorporado de Visual Studio a partir de ahora. También te recomiendo que hagas esto también a lo largo de este curso. Si lo prefieres, puedes seguir adelante en una terminal separada, pero tendrás que seguir adelante y primero cambiarte al directorio actual para el proyecto. Entonces necesitarías ejecutar npm install para obtener todas las dependencias, y luego iniciar la aplicación con estos comandos abajo en la parte inferior. Si estás siguiendo en Visual Studio Code, ahora podemos cerrar la terminal, el navegador, abrir Visual Studio Code y luego arrastrar dentro de nuestra carpeta del proyecto. Podemos abrir Visual Studio como terminal incorporado, subiendo a View en un sub menú, luego bajar a Integrated Terminal. Esto abrirá entonces la terminal hacia abajo en la parte inferior, listados son nuestros comandos de terminal. Esto también tiene el beneficio de tener nuestro directorio configurado automáticamente en la carpeta del proyecto de columna en el escritorio. No necesitamos navegar hasta donde se encuentra nuestra carpeta. Vamos a echar una mejor mirada alrededor de todos estos archivos y carpetas pronto, pero por ahora, si abrimos el paquete.json y luego cerramos la barra lateral, dentro de aquí vemos algunas dependencias, que dentro de este dependencias objeto justo aquí, que son necesarios para este proyecto. Estas dependencias son módulos de nodo los cuales puedes instalar usando npm install. Abajo en la terminal, ejecuta npm install, pulsa “Enter” y luego da, digamos unos momentos para correr y tirando de todos los paquetes que necesitamos de npm. npm install agarrará todo lo que necesitamos listado dentro de este paquete.json, luego colocarlos dentro de nuestros proyectos en una carpeta de módulos de nodo. También, cuando añadamos más módulos más adelante, nuevamente usaremos este comando npm install, pero seguido del nombre del módulo que queremos instalar. Genial. Una vez hecho esto, ahora debería ser una carpeta node_modules. Si abrimos la barra lateral, si abrimos esto, acabamos de obtener un desplegable, vemos listado todo lo que estamos usando para este proyecto. Tendrá cosas como un módulo de depuración. También tenemos express que está justo aquí, y también pug, nuestro motor de plantilla entre otros que también usaremos. Ahora todo lo que queda por hacer, es arrancar nuestro servidor web y abrirlo dentro del navegador. Todavía dentro de este archivo package.json, arriba en la parte superior tenemos algo llamado inicio dentro de nuestros scripts. Podemos usar script de inicio dentro de la terminal, para luego seguir adelante y kickstart nuestra aplicación para poder verla en el navegador. Abajo dentro de la terminal, vamos a ejecutar npm start, pulse “Enter” y luego abra el navegador web, que desea utilizar. Navega a localhost, colon 3000, pega “Enter” y ahora podemos ver nuestro Express up básico ya está funcionando. Pero, ¿cómo sabemos que es el puerto 3000 en qué nodo se está ejecutando? Bueno, si pasamos al paquete.json, el comando start tiene una ruta de archivo de bin, barra inclinada hacia adelante, www. Si abrimos este archivo dentro de la misma barra, dentro de este archivo se encuentra una variable la cual se establece en el puerto 3000. Aquí tenemos una variable llamada puerto, que está configurada para ser puerto 3000. Además, si por casualidad usas el puerto 3000 para cualquier otra cosa, también puedes cambiar este número para que sea algo diferente, como 3001. Su estructura y configuración de archivos es un poco diferente a lo que hemos utilizado hasta ahora. En el siguiente video, echaremos un mejor vistazo a lo que tenemos aquí en nuestro proyecto Express Generator. 7. Estructura del proyecto Express: La estructura del proyecto que tenemos aquí puede parecer un poco intimidante si estás acostumbrado a usar sitios web estáticos. No obstante, no es tan malo una vez que te acostumbras. Si abrimos nuestra barra lateral del lado izquierdo, haré un poco más grande. Desde arriba tenemos la carpeta bin, que se utiliza para cualquier scripts de inicio. Tocamos esto en el último video donde vimos estos script de inicio dentro del archivo package.json, que luego apunta a este archivo www, que contiene nuestros scripts de inicio. Este archivo dentro de aquí establece el número de puerto que queremos usar, y además va adelante y configura un servidor HTTP para luego servir nuestros proyectos. Debajo de esto tenemos nuestra carpeta de módulos de nodo, justo aquí abajo. Esto contiene todos los paquetes o módulos que nuestra aplicación necesita. Cada vez que instalemos un módulo de MPM, entonces aparecerá dentro de aquí y también se enumerará dentro del archivo package.json como una herramienta de dependencia. Dado que estos módulos también figuran en el archivo package.json, incluso podemos eliminar o eliminar esta carpeta de módulos de nodo completo, y un comando de instalación de MPM volverá agregar esto a nuestro proyecto. Esto es útil para cosas como almacenar nuestro proyecto en GitHub, ya que la carpeta de módulos de nodo a menudo puede volverse realmente grande y no queremos una enorme carpeta como esta guardando en GitHub o en otro lugar si no es necesario. Descarga esto, si estás cerrando módulos de nodo, también tenemos una carpeta pública. El directorio público contiene nuestros archivos estáticos, como cualquier imagen, cualquier hoja de estilo, y también cualquier archivo JavaScript o librerías para el front end. Aquí podemos agregar nuestras imágenes de proyecto, cualquier biblioteca personalizada de terceros o marcos como Bootstrap CSS y archivos JavaScript. Esta carpeta no es para ningún archivo JavaScript ni para el servidor, como nuestras plantillas de página o cualquier cosa con información sensible, como un archivo de configuración E. Debajo de la carpeta pública, entonces tenemos nuestra carpeta de rutas. Cada carpeta contendrá uno o más archivos JavaScript, que manejan qué hacer cuando un usuario visita una determinada URL. A modo de ejemplo, si abrimos este index.js, y cierro la barra lateral, verás el router.get, que maneja la página de inicio. Dentro de un router.get, primero vemos la ruta de barra hacia delante, por lo que cuando el usuario visita el router de casa o barra inclinada hacia adelante, estos enfurece una función que luego va adelante y renderiza las plantillas de índice, que queremos que uses. Entonces después de esto tenemos un objeto donde pasaremos el título de página de simply express, y más adelante también pasaremos información diferente como variables a nuestra plantilla de página también. Esto pasa a la carpeta de vistas si abrimos una barra lateral y luego abrimos nuestras vistas, que es una vista que el usuario ve. Contiene todas las plantillas de página que se crean en el servidor antes de entonces enviarnos de vuelta a nosotros. Todos estos archivos tienen la extensión de archivo.pug. Esto se debe a que estamos usando el motor pug templating, que también solía ser conocido como J2. Es posible que te encuentres con algunas referencias j en la documentación o una búsqueda en la web. Puedes usar otros lenguajes de plantillas si lo prefieres, como EJS. Pero esto va a depender de ti implementar si quieres hacer este cambio. Si abrimos la plantilla index.pug. Se trata de una plantilla que se llama desde la página del router que hemos visto antes, por lo que este es el índice que se renderizó cuando un usuario visita su ruta de inicio. Bloquear y se extiende, que vemos en la parte superior del archivo, veremos esto pronto. Pero es h1 y también p elementos son lo que vemos cuando visitamos la página principal. Tenemos el título y luego el texto de bienvenida a, y después el título. Dentro de Chrome, si abre esto, este es el texto que vemos dentro de aquí. H1 es igual a título, es el título que se pasa desde el router. Nuevamente en index.js, este es el título que vemos justo después de declarar qué plantilla queremos usar. El texto de express se está pasando entonces a nuestro índice y por eso vemos el texto dentro del navegador. Debajo de esto tenemos un p elementos con un texto de bienvenida a y esto será expreso. También podemos usar esto como una variable dentro de una cadena. Cubriremos todas estas plantillas en sintaxis en la siguiente sección. Abajo después de las vistas tenemos el archivo app.js. Este app.js es el punto de partida de la aplicación y básicamente la página principal que conecta todo junto. Se carga todo lo que necesitamos para el proyecto y por defecto importar cualquier paquete que necesitemos lope en la parte superior desde la carpeta de módulos de nodo. También importa nuestras rutas desde nuestra carpeta de rutas, cual podemos ver aquí, por estas rutas de archivo, y luego las almacena dentro de una variable que vemos como a continuación. Después se adelanta y arranca nuestra nueva instancia de aplicación express y la asigna a una variable llamada app. Después de esto configuramos pug view engine, que se utiliza aquí, que declara qué lenguaje de plantillas queremos usar. Después de esto tenemos app.use en diversas líneas. Esto se utiliza para montar cualquier middleware a nuestra aplicación. Buscaremos un middleware con más detalle más adelante. Pero básicamente el middleware es una serie de acciones o funciones por las que podemos ejecutar nuestro código. Un ejemplo podría ser cuando un usuario inicia sesión, podríamos agregar algún middleware para validar información del usuario antes de pasar a la siguiente etapa. Pero nuevamente buscaremos más en esto cuando estemos en nuestro propio middleware al proyecto. Si nos desplazamos hacia abajo, a continuación tenemos nuestras rutas, que de nuevo es middleware y estas son las dos variables que teníamos antes, que es apenas la parte superior. Estas son las variables que enlazan a nuestra ruta de archivo para el router. Declararía que se quiere utilizar nuestro router de índice cuando el usuario visita alguna de las rutas de inicio, y también tenemos una ruta de usuario predeterminada también la cual ha sido configurada con Express Generator, y estas rutas se almacenan dentro de nuestro índice y uses.js archivos. Desplazándose más abajo, también tenemos algún manejo de errores, que de nuevo es middleware. App.use sin una ruta de archivo, hará que estas funciones de manejo de errores estén disponibles para todas las rutas en nuestro sitio. Por último abajo en la parte inferior tenemos module.exportacionesigual app. Esto hará que este archivo esté disponible en otras partes de nuestra aplicación si es necesario. De vuelta a nuestra barra lateral, los últimos archivos son los archivos package.json. Dentro de nuestro paquete.json, que hemos levantado brevemente. Tenemos la información de nuestro proyecto, tenemos nuestros scripts de inicio para ejecutar nuestro servidor web. También podemos añadir nuestros propios scripts aquí también, como atajo para escribir este comando más largo en la terminal. También tenemos el nombre que establecemos y también el número de versión que podemos establecer también. Más abajo, tenemos las dependencias que miramos antes. Estos son los módulos de nodo, proyectos de medio archivo y también podemos agregar dependencias de dev también, que son los módulos que necesitamos solo para el desarrollo, y estos serán ignorados para la producción. breve estaremos instalando en el paquete node mom, que será una dependencia de dev por lo que pronto te mostraré cómo hacerlo. Si abrimos la barra lateral, también tenemos un paquete.json. Por ejemplo, dentro de nuestro paquete.json, tenemos la dependencia Express, que está justo aquí. Esto dice que actualmente al momento de crear esta app expresa nuestra versión 4.16.0. El icono tilda que ves justo al principio aquí, significa que no expresaremos la versión cuatro, pero también queremos cualquier actualización menor de las versiones dos. Es decir, podemos tomar 4.17 o 4.18 y así sucesivamente. Con esto en mente, si pasamos a este paquete-lock.json. Y luego si hacemos una búsqueda de Express, pero luego llevados a la sección Express de este archivo, vemos que la versión real está bloqueada en 4.16.3. Además, este módulo en sí también tiene dependencias. Si cerramos esta terminal y luego nos desplazamos hacia abajo ves que tenemos esta sección requerida justo aquí y express también requiere muchos módulos diferentes, como cookie, debug, escape HTML y también mucho más. Es por ello que cuando pasamos a nuestra carpeta de módulos de nodo y abrimos esto, hay muchas más carpetas listadas aquí o módulos de Lamar de las que vimos originalmente si solo vamos al package.js. Vamos a cerrarlo. Todas nuestras dependencias dentro de este package.js también tienen dependencias también y estas se enumeran en el paquete-lock.json. Esta es una visión general de lo que se incluye en el proyecto para empezar, sé que ya lo hemos dicho bastantes veces, pero realmente no te abrumes todo esto si es nuevo para ti. Nos familiarizaremos mucho más con la configuración de las próximas secciones. 8. Uso de nodemon: Ahora vamos a instalar un paquete de nodos, lo que nos ahorrará mucho tiempo durante este proyecto. Si repasamos las vistas dentro del menú y luego vamos a index.js, views, index.js, y entonces puedes seguir adelante y hacer un pequeño cambio a nuestro texto dentro de aquí. Si decimos, bienvenidos a, y luego digamos, viajemos. Dar un guardar y luego abrir el navegador y luego volver a cargar. Vemos que este cambio se ha reflejado dentro del navegador. Esto está bien, y este es el resultado que esperaríamos. Si ahora pasa a un archivo de script, como dentro de las rutas y luego vaya al index.js. Hagamos ahora un cambio dentro de aquí. La coma está fuera, es res.render,/. Recuerda esta es la línea que renderiza nuestra página de inicio o nuestras plantillas de índice, y luego en su lugar si vamos a la línea de abajo, digamos res.send y luego el texto fuera 'hello'. Esto simplemente enviará una cadena de textos al navegador. Dar un guardar y luego recargar y ver que no pasa nada. Esto se debe a que si realizamos cambios en un archivo de script, necesitamos reiniciar el servidor. Podemos hacer esto si pasamos a la terminal recordar esto es vista, y luego integramos la terminal, podemos cerrar la terminal hacia abajo, Control C, y luego nos llevan de vuelta a nuestro directorio, y luego otra vez usar npm start, para iniciar el servidor una vez más. Hit Enter, luego una vez que se esté ejecutando, podemos ir al navegador y Hit Reload, y ahora la terminal ha reiniciado el servidor. Ya veremos el texto de 'hola' ya ha sido actualizado en el navegador. Si bien esto funciona bien, es un poco doloroso seguir reiniciando el servidor, cada vez que hacemos un cambio dentro de esos archivos. Para facilitar las cosas, podemos usar un paquete llamado nodemon. Si pasamos a nodemon.io, esta es la página de inicio del paquete nodemon, que vamos a estar usando. Nodemon vigilará cualquier cambio en nuestro código fuente y luego reiniciará automáticamente el servidor por nosotros. Incluso podemos instalar nodemon, como sugiere, usando este comando npm install, el nombre de nodemon para el paquete y también podemos usar esta bandera -g al instalar el generador express, y significa que podemos usarlo globalmente en cualquier proyecto y no solo en el que estamos trabajando actualmente, o alternativamente, si solo queremos usarlo en nuestros proyectos únicos. Esto también es sencillo de configurar. Podemos dirigirnos a la terminal en Visual Studio Code y luego cerrar otra vez una terminal con Control C y luego ejecutar el siguiente comando contra nuestra instalación npm, y luego esta vez queremos decir —save-dev y en el nombre de nuestro paquete, que es nodemon, Hit Enter y va a seguir adelante y agarrar el paquete de npm, guardar dev vamos a guardar esto en nuestro proyecto como dependencia de desarrollo. Significa que podemos usarlo durante el desarrollo, pero no se requiere cuando empujamos la aplicación a la producción. Dales momento para instalar y luego una vez hecho esto, si pasamos a la barra lateral y abrimos el paquete.json. Dentro de aquí todavía tenemos nuestras dependencias, que hemos visto antes pero más abajo también tenemos nuestras DevDependencies y están listadas como nuestro paquete nodemon. Ahora para que esto funcione en nuestra app, podemos crear un script, al igual que el script de inicio, que tenemos en la parte superior aquí. A éste le voy a llamar a devstart. Agrega una coma después de la primera línea, y luego podemos añadir devstart. Este es el alias que le vamos a dar a este comando. Agrega dos puntos, y luego dentro de las cotizaciones, vamos a añadir un comando que es nodemon y luego el mismo camino que hemos usado aquí. /bin/www. Esto esencialmente va a ejecutar los mismos scripts de inicio pero esta vez estamos observando cualquier cambio usando nodemon. Dale a eso un ahorro y ahora podemos seguir adelante e iniciar nuestros servidores. Esta vez si pasamos a la terminal, asegurarnos de que el servidor esté cerrado y entonces esta vez puede ejecutar npm, ejecutar devstart. Por supuesto devstart es el nombre de nuestro guión que tenemos justo aquí. Hit enter, una vez que esté en marcha, deberías ver la línea verde de código justo aquí y luego hacia el navegador, pulsa recarga y ahora todo debería estar funcionando. Si volvemos a pasar al archivo index.js y luego hacemos un cambio. Digamos 'hola de nuevo'. Guardar y en cuanto golpeamos guardar, podemos ver que la terminal en el servidor se ha reiniciado. Después vuelve a cargar el navegador y ahora veremos que nuestro texto se ha actualizado sin que tengamos que actualizar manualmente el servidor. Ahora reinstemos nuestro res.render, para que podamos quitar el comando res.send y luego y luego reenviar barra inclinada para ahora descomentar esta página de índice, guarde esto, y luego volver a cargar y actualizar el navegador ahora mostrará estos cambia sin tener que cerrar el servidor y reiniciar. 9. Cómo servir archivos estáticos: Para este proyecto, he proporcionado algunas imágenes que también se pueden utilizar, como imágenes para los hoteles, los países, y también el logotipo. Por supuesto puedes elegir las tuyas si lo prefieres. Los proporcionados están dentro de esta carpeta llamada imágenes, que he guardado aquí en el escritorio. Si abres esta carpeta, podemos ver que tenemos la playa, que es una de las principales imágenes en la página principal. Tenemos nuestro logo y luego las imágenes y hoteles de nuestro país organizados en dos carpetas. Abramos también la carpeta del proyecto. Haga doble clic en Let's Travel y luego dentro de aquí, podemos ir al público, y luego a las imágenes. Entonces si seleccionamos los cuatro elementos de nuestra carpeta de imágenes, y luego los arrastramos a la carpeta de imágenes dentro de nuestros proyectos, así se acabó esto y nos aseguramos de que estos estén dentro de la carpeta de imágenes, en lugar de solo la sección pública. Deberíamos poder ahora ver estas imágenes, si pasamos al código de Visual Studio. Abre esto y luego la barra lateral y luego dentro de un público, ahora tenemos las imágenes dentro de la carpeta de imágenes. Si pasamos al index.pug, que es las principales plantillas de la página principal, podemos probar esto agregando una imagen. Debajo de nuestro texto de Bienvenido a Vamos a viajar. Podemos agregar nuestra imagen, podemos agregar algunos atributos dentro de las citas para establecer la imagen a usar igual a nuestras imágenes que es la carpeta. Entonces sigamos adelante y agreguemos beach.jpeg, que es éste justo aquí. Nota no necesitamos agregar la carpeta pública a nuestra ruta de archivo y luego guardar esto, abre Google Chrome o tu navegador, recarga y esa es nuestra imagen de la playa, genial. Ahora todas nuestras imágenes y también nuestra estructura de proyectos ya está en su lugar. En la siguiente sección, vamos a profundizar en nuestro proyecto mirando el enrutamiento y la creación de plantillas. 10. Introducción a Pug: Ya hablamos de cómo usaremos plantillas para crear nuestros proyectos. Estas plantillas serán una combinación de HTML, JavaScript junto con cualquier dato dinámico mezclado, como un nombre de hotel, que miramos en la última sección. Sabemos que no podemos hacer todo esto con los archivos HTML estándar. Por lo que necesitamos usar un lenguaje de plantillas que compila todo esto en HTML. Estaré usando un lenguaje de plantillas llamado Pug para hacer esto. Puede parecer un poco extraño para empezar, pero en realidad es más simple que las etiquetas HTML normales. Para ver cómo usar Pug, vayamos a nuestro archivo index.pug. Había una barra lateral a un dar espacio pequeño, y ya hemos tenido una mirada rápida aquí con los elementos p y también con una imagen [inaudible]. Tenemos extendidos y bloqueados en la parte superior, a los que volveremos pronto. Por ahora concentrémonos en las características del pug. Generalmente, usar Pug es solo la etiqueta de apertura HTML para hacer para la sintaxis más corta, igual que este elemento p con el texto de un elemento basado en texto funciona de manera similar, como agregar en un encabezado. Entonces agreguemos un h1, digamos título, más al navegador, y luego recarguemos y tenemos un nivel uno encabezando aquí abajo. Los atributos se agregan al igual que con las etiquetas HTML normales. Pero en cambio con Pug lo agregan dentro de corchetes. Si quisiéramos agregar un enlace y luego en la href, lo hacemos dentro de los corchetes, y luego el resto se acaba de agregar como normal. Entonces vamos a añadir un enlace a Google. Por lo que www.google.com, también podemos agregar nuestras clases. Entonces vamos a añadir una clase de botón, y después añadimos nuestro texto fuera de los corchetes, que quieres agregar para el enlace. Entonces enlaza al texto de Google. Guarda esto y luego vuelve a cargar y ahora tienes nuestro hipervínculo en la parte inferior, y si haces clic en esto, funcionará igual que HTML normal una etiqueta. Volver a nuestro proyecto y el index.pug. El sangramiento también es realmente importante cuando se usa Pug. En HTML normal, la sangría solo es realmente para la legibilidad. Pero al usar Pug, es necesario usarlo para mostrar en qué nivel se encuentra cada elemento. Por ejemplo, si agregamos un div para contener este título en el enlace, así como esto, y luego si vamos al navegador, y luego entramos en herramientas de desarrollador haría clic con el botón derecho e inspeccionaría, y luego seleccionaría este div justo aquí. Entonces este es un div que acabamos de agregar, y la herramienta de desarrollador muestra que el título div y también nuestro hipervínculo están todos en líneas separadas. Efectivamente todos al mismo nivel, no tenemos el título y el enlace dentro de estas etiquetas div. Pero si seguimos adelante y sangramos el h1 y el enlace, luego refrescar esto. Ahora vemos que la etiqueta de apertura div y la etiqueta de cierre ahora rodea nuestro título y enlace. Por lo que la sangría hace que estos dos elementos ahora se aniden dentro del div padre. Otra cosa sobre la sangría dentro de un archivo pug son solo mixins, que cubriremos más adelante, y también esta declaración de bloque en la parte superior, y se extiende puede estar en el nivel superior es decir en el extremo izquierdo del archivo. Si nos movemos por encima de un elemento nav, por lo que nuestro enlace por ejemplo si movemos esto hacia la izquierda del archivo, guarde esto y luego vuelva a cargar el navegador. Ahora recibimos un error diciendo que solo pueden aparecer bloques y mixins con nombre en el nivel superior de una plantilla; Esto se debe básicamente a que este archivo se utilizará dentro de un archivo NAV. Por lo que esta sangría mantiene todo bien cuando se compila el HTML. Adelante y restablezcamos este enlace, y despejemos el error. Algo que habrás notado está arriba, también usamos un igual para este título. Esto se debe a que también podemos incluir JavaScript en estos archivos de Pug también. Si recuerdas, el título fue pasado de nuestro router, que era index.js, justo aquí dentro de este título. Por lo que este JavaScript se está pasando a nuestra plantilla en el index.pug. Por lo tanto, necesitamos usar los iguales en lugar de solo un elemento de texto plano, igual que este y también nuestros elementos p justo aquí. Este título también se muestra en el sub navegador también sobre la parte superior aquí. Usar un igual también renderizará en la pantalla el resultado de cualquier JavaScript. Entonces en cambio, si decimos en lugar de título, agregamos algo de JavaScript de 5 más 12 al navegador, tenemos los resultados de 17. Pero en cambio si seguimos adelante y quitamos los iguales, tienes que guardar y luego volver al navegador. Esto ahora se muestra como una cadena de texto de 5 más 12 en lugar de generar la suma de 5 más 12. Entonces, reintegremos esto de nuevo al título. Entonces no tienes que recordar esto pero voy a poner en el resultado como esto se llama código buffered. También es código sin búfer también que no se agrega directamente a la salida; Esto puede ser cualquier JavaScript normal con un prefijo dash. Entonces, por ejemplo, podemos agregar un guión y luego agregar cualquier JavaScript como una constante de nombre, y es nuestro nombre ser Chris, y luego esto se puede usar donde queremos colocarlo. Por lo que h1, podemos colocar nuestro título con nuestra variable de nombre. Ya que es un JavaScript también necesitaremos agregar los iguales y probar esto, y luego abajo en la parte inferior está nuestro nombre de variable de Chris. Entonces este código sin búfer, es simplemente declarando línea de JavaScript, y luego podemos seguir adelante y usarlo en cualquier lugar que queramos dentro de las plantillas. Este JavaScript puede ser casi cualquier cosa. Entonces podríamos tener una variedad de alimentos, queso, huevos y pollo, y ahora tenemos esta matriz. Nos da la oportunidad de echar un vistazo a la sintaxis especial que proporciona Pug para crear un bucle for. Para ello, voy a agregar esto en la parte inferior, sangrar esto el mismo nivel que el enlace, y luego crear una lista desordenada para nuestros alimentos. Sangrado un nivel más vamos a crear un bucle con cada alimento en los alimentos. Entonces los alimentos es el nombre de nuestra matriz que está justo aquí, y luego cada elemento individual en la matriz va a ser almacenado dentro de esta variable alimenticia. Entonces después de aquí podemos establecer nuestro ítem de lista para que sea igual a la comida. Nuevamente esto es JavaScript, por lo que necesitamos agregar el símbolo igual. Por lo que no generamos esto como una cadena. Di esto, y luego prueba esto. Ahora tenemos queso, huevos, y pollo en el fondo. Esta salida también se puede mezclar con un eText también. Entonces, en lugar de solo la comida individual de salida, podemos agregar una cadena de me encanta, y luego agregar más comida. En realidad sobre un espacio justo después de ahí y probar esto, y nuestro texto también está ahora mezclado con nuestra variable JavaScript; Esto es solo una visión general de lo que Pug puede hacer, y realmente es bastante simple una vez que te acostumbras, usaremos muchas características de Pug para este curso. No obstante, si prefieres echar un vistazo más profundo ahora, puedes dirigirte a PugJs.org y echar un vistazo más profundo, en la parte superior de este archivo también tenemos esto se extiende y también esta sección de contenido de bloque. Todavía no hemos discutido qué significa esto, pero seguiremos adelante y cubriremos esto en el próximo video. 11. Herencia de plantillas: Tenemos ambas palabras clave de bloque y extiende, dentro de los archivos pug en la parte superior justo aquí. Si abrimos nuestro layout al archivo pug, que está disponible en la sección de vista, click en maquetar el pug. Este archivo de diseño no tiene palabra clave extiende en la parte superior. Esto se debe a que actúa como las principales plantillas de pug. A continuación, los archivos ampliarán este diseño principal. Es por ello que podemos abrir nuestro índice el pug y también nuestro error el pug también, que está disponible en la misma carpeta, luego ver el layout extiende en la parte superior. Si volvemos a la disposición el archivo pug. También hay una sección de contenido de bloque aquí abajo en la parte inferior. Esto es lo que suena. Es básicamente un bloque de código. Cualquiera de los archivos como nuestro índice el pug puede seguir adelante y reemplazar esta sección llamada contenido. Dentro de nuestro índice el archivo pug, abriremos esto. Toda esta sección aquí, básicamente todo desde nuestra lista desordenada hasta nuestro título, se reemplazará dentro del bloque o dentro del espacio que especificamos dentro de la disposición. También podemos tener múltiples bloques también, cada uno con un nombre diferente, como pie de página o un bloque de barra lateral. Estos también se pueden agregar a otro archivo, y luego referenciados por el nombre del bloque, y de la misma manera que su sección de contenido. Nos congelamos, luego agregamos cualquier otra cosa alrededor de esta cuadra. Por ejemplo, por encima de los contenidos y podemos añadir algún texto. Por encima del contenido, y luego por debajo de él, por debajo del contenido, y ahora si vamos a la página principal del índice , para luego recargar, vemos en la parte superior tenemos el texto de arriba los contenidos. y luego en la parte inferior tenemos el texto de abajo los contenidos, y luego todo en el medio, justo a través del título hasta toda la lista desordenada no lo proporciona esta sección de contenido de bloque, que es un anulado por el contenido de nuestro índice el pug. Una vez que entiendas eso, ahora podemos crear secciones de nuestro código dentro de un layout, y luego podemos externalizar los contenidos a un archivo separado, omitir todo el código, más organizado, más mantenible, y también podemos reutilizar estas secciones de contenido también en múltiples archivos. Ahora vamos a los diseños, y eliminemos estos dos elementos p que creamos, y luego demos ese guardar. Este diseño es útil para cualquier cosa que queremos mostrar en todas nuestras páginas de nuestro sitio, como agregar un encabezado y un pie de página. Podemos entonces reemplazar el contenido principal aquí abajo o unas nuevas secciones agregando más bloques. Ahora sabemos cómo se presentan nuestras plantillas. A continuación, tendrás la oportunidad de conseguir algo de práctica creando la sección de encabezado. 12. Hora de practicar: creación del encabezado: Al tratar con algo nuevo, igual que Prog, realmente empezamos a mejorar cuando practicamos por nuestra cuenta. Sin sólo seguir adelante. Aquí podemos ver la versión final de los proyectos, que me gustaría que siguieran adelante y crearan esta sección de encabezado desde la navegación superior, que incluye el logo y también los enlaces en la parte superior, justo abajo a la principal imagen de playa justo aquí. Si te sientes seguro, también puedes agregar el formulario de búsqueda dos, que está en el medio. Justo como guía para adónde vas. En esto, tendremos que ir dentro del archivo Prog de punto de diseño automático, dentro de la sección del cuerpo. Por lo que justo encima de este contenido de bloque. Por lo que está en la parte superior de la página. Voy a estar repasando todo esto en el próximo video. Entonces no te preocupes por estropear. Todo es buena práctica. Por lo que te recomendaría que pausas el video ahora en esta versión final y luego le dé una oportunidad a esto. 13. Solución: creación del encabezado: Espero que hayas logrado darle un go a eso y ojalá tengas algún contenido de encabezado. Ahora en pantalla, voy a seguir adelante y crear mi versión de este encabezado. Si el tuyo es diferente al mío, puedes o cambiarlo para que sea el mismo que los creados en este video o mantener el tuyo como te gustaría. De cualquier manera está bien. Yo tal vez recomendaría aunque mantener los mismos nombres de clase que usamos en este video para que el CSS coincida más tarde. Empecemos de nuevo cualquier archivo docktype de diseño. Entre la sección del cuerpo y el contenido del bloque. Voy a empezar por crear la sección de encabezado igual que haríamos normalmente con HTML. Anidado dentro de este elemento nav. Este logotipo puede ser un enlace. Esto es para que el usuario pueda hacer clic en él y luego ser llevado de vuelta a la página de índice. Nuestro a para nuestro enlace, que puede incluir el href dentro de los corchetes que simplemente enlaza a barra inclinada hacia adelante, que es la página de inicio. Entonces un nivel en desde nuestro enlace. Si seguimos adelante y agregamos nuestra imagen, esta será entonces clicable y también enlazará a esta página de inicio la cual es barra hacia adelante. Dentro de los corchetes agregamos nuestra fuente, por lo que SRC y la secuencia sean imágenes de barra hacia delante. Este es logo.png. Podemos agregar una clase o un ID a nuestro elemento. Al agregar esto dentro de los corchetes como atributos o podemos añadirlo justo después del nombre del elemento. Agrega imagen y lo áspero y logo. Esto dará el DNI de logo para esta imagen. Entonces justo después de esto podemos seguir adelante y crear nuestra otra lista que va a ser para nuestros enlaces de registro y inicio de sesión. Esto necesita estar en el mismo nivel que nuestro enlace circundante arriba, lo que ul seguido de nuestros ítems de lista. Si queremos hacer estos enlaces, necesitamos sangrar la a tag más la href. no tenemos estas plantillas ni estas rutas configuradas pero aún podemos seguir adelante y vincularlas para inscribirlas. Con un texto de registrarse para y luego hacer lo mismo a continuación agrega nuestro siguiente ítem de lista al mismo nivel que el anterior. Convierte esto en un enlace. Esta vez este va a ser para login, que son las rutas de forward slash login y el texto de login a. Si has creado esto y no has añadido el href en, te recomendaría mantener el tuyo consistente con mío para que no tenga problemas más abajo de la línea. Añadí inicio de sesión de barra hacia adelante y también hacia adelante registro de barra inclinada. Eso nos da nombre guardar al navegador. Ahí hay un logo y luego nuestros dos enlaces en la parte superior también. El siguiente paso a hacer es crear nuestra entrada de formulario para nuestra búsqueda. Que es donde podemos escribir en el destino, la duración, las fechas de salida y también el número de invitados que queremos buscar, por lo que hacemos esto solo con un sencillo formulario HTML. Esta forma va a ser en un div circundante. Este div necesita estar en el mismo nivel que nuestro elemento nav. Baja por el elemento nav y luego comienza esto en el mismo nivel. Al crear un div con la clase, incluso podemos crear el elemento así y luego agregar el nombre de la clase como atributo o en su lugar podemos tener una taquigrafía que simplemente es punto y el nombre de nuestra clase. Si quisiéramos un div con la clase de navegación de búsqueda, simplemente lo haríamos de esta manera. Esto se generará entonces como un div con esta clase. Entonces dentro podemos anidar nuestra forma. Esta forma va a estar conformada por una serie de entrada de formulario y cada una va a tener un div circundante de envoltura de subrayado de entrada. Esto hará que cada nivel de bloque de entrada, por lo que aparezcan en su propia línea. Entonces necesitamos etiquetar para nuestra primera que va a ser destino. Agregamos el atributo para o destino y luego un texto de destino. Entonces podemos agregar nuestra entrada, el tipo de texto, la idea de destino que coincidirá con esta etiqueta justo aquí. El nombre del destino también. Simplemente cambiaré el estilo para que sea un poco más legible y luego el atributo requerido al final. Guarda esto y luego veamos cómo se ve en el navegador y ahora tenemos nuestra entrada de formulario de destino. Ahora esto está funcionando, podemos seguir adelante y copiar este input_wrapper y luego pegarlo y asegurarnos de que esté en el mismo nivel que el anterior. Este va a ser por la duración. Cambia la etiqueta a la duración, el texto y luego podemos sumar noches dentro aquí porque vamos a estar firmando la duración por noche. El tipo de entrada de texto está bien, el ID necesita coincidir con la alteración y el nombre de la duración también. Este campo también se requiere para que podamos dejar esto también. El siguiente va a ser para la fecha de salida lo que el texto de etiqueta. Esta vez la entrada va a tener el tipo de fecha por lo que desciende como un recolector de fecha. El DNI de fecha de salida también y luego el nombre, fecha de salida. Este va a ser CamelCase. Este campo también se requiere al igual que los demás. Haré esto igual una vez más este va a ser un campo de números. El tipo de entrada de número porque esto va a ser por el número de invitados, por lo que número-invitados. El nombre del número de invitados y luego el DNI el cual debe coincidir con esta etiqueta de número de invitados. Tengo un error tipográfico aunque así que cambia eso. Entonces finalmente el nombre, nuevo en CamelCase de número de invitados. Echemos un vistazo a esto en el navegador. Genial, esas son nuestras cuatro entradas. Podemos ver si hacemos click en la fecha, ahora tenemos un recolector de fechas desplegable. Debe ser un número de tipo de entrada que está en nuestros dos campos de texto en la parte superior. De vuelta a nuestro diseño, después de estos cuatro primeros insumos ahora vamos a cambiar esto hacia arriba. Necesitamos un par más y uno va a ser para la calificación estelar. Esta va a ser una entrada selecta con diferentes opciones a través de una a cinco. Entonces vamos a tener un insumo con un selecto nuevamente, que va a ser para clasificar el precio de bajo a alto o alto a bajo. Entonces finalmente el botón Enviar al final va a usar el mismo envoltorio de entrada, so.input_wrapper. Se trata de un selecto con un nombre igual a las estrellas. Recuerda desde antes la entrada de selección sí necesita tener una opción para seleccionar. Agrega nuestra primera opción dentro aquí con un valor para luego pasar al servidor una vez seleccionado. Simplemente va a ser un número para el número de estrellas y el texto de min una estrella. Podemos seguir adelante y copiar esto y pegar en cuatro veces más. El segundo es para dos estrellas, 3, 4 y 5 y también lo mismo para el texto también. El último insumo, de nuevo estos tienen el mismo input_wrapper por lo que mantenemos el estilo consistente. Esto también será un selecto y esto es para la clasificación de precios de bajo a alto o de alto a bajo. Podemos agregar el nombre del selecto para ser ordenados. Pegar en la opción con un valor de uno. Esto va a por el precio establecido de bajo a alto. También vamos a pegar en el mismo pero esta opción de tiempo puede tener un valor de uno negativo. Esto se debe a que estos son los valores que requirió al buscar base de datos Mongo para luego ordenar las consultas de retorno de alto a bajo o bajo a alto. Esto lo veremos con más detalle más adelante. Esto también puede ser un cambio. Esta vez veamos precio de alto a bajo. El último insumo también necesita el envoltorio de entrada y este es el botón Enviar. Botón con el tipo de enviar y luego el texto de búsqueda.Eso nos debe llevar ahora a formar. Vamos a comprobar si hay algún error. El rating estelar de uno a cinco. Tenemos el precio de bajo a alto y alto a bajo. Entonces presentaré botón en la parte inferior. También queremos que esta imagen de playa sea parte del encabezado también. Dentro de esta sección de encabezado, justo después del formulario, necesitamos asegurarnos de que esta imagen esté sangrada al mismo nivel que nuestra navegación. Si nos desplazamos hacia arriba y luego vamos a nuestro navegador de búsqueda y vigilamos esta línea que vemos en el editor de texto. Ahora podríamos iniciar nuestra imagen, así img. El origen igual que antes, va a ser igual a reenviar imágenes de barra inclinada que está dentro de la carpeta pública, la playa d.JPEG. Entonces subamos el contenido del bloque. Guarda y luego vuelve a cargar el navegador. Ahora, tenemos la imagen dentro del encabezado. También tenemos algunos trabajos de limpieza que hacer justo continuación y esto solo es consentimiento del index.pugfile. Pasar a index.pug. Entonces podemos quitar nuestros ejemplos de antes. Podemos sacar otra lista, nuestros enlaces y array. No necesitamos la imagen. No necesitamos el texto ni el título. Dejemos en su lugar los extendidos diseños y el contenido del bloque y fuera al navegador. Ahora, solo tenemos el contenido del encabezado de nuestro archivo de diseño. Ahí vamos. Ya está nuestro contenido de cabecera en su lugar. A continuación continuaremos mirando el uso de mix-ins, que son una gran manera de reutilizar el mismo código en múltiples plantillas. 14. Mezclas: Una de las cosas que normalmente queremos evitar a la hora de codificar es la repetición. Si reutilizamos el mismo código más de una vez, a menudo tiene sentido hacer las cosas un poco diferente. Por suerte, Vue nos da la oportunidad de usar lo que se llama mixins. Si miramos aquí la versión terminada. Tome nuestros hoteles aquí en la página principal, por ejemplo. La misma estructura hotelera que se ve justo aquí. También se utiliza el diseño si realizamos una herramienta de búsqueda. Aquí tenemos nuestros hoteles listados los cuales siguen un mismo patrón. Si haces una búsqueda y rellenas todos los campos justo aquí, pulsa la búsqueda. Dónde ves nuestros resultados de búsqueda sigue un diseño y patrón similar a los de nuestros hoteles en la página principal. Este es un buen caso de uso para un mixins a pesar de que los datos del hotel son diferentes, como la descripción y también el título, podemos hacer que partes de los mixins sean dinámicas. Es realmente flexible de usar. Encima en el archivo de índice dot pug dentro de Visual Studio Code, comencemos agregando la información del hotel que necesitamos para comenzar. Empezando por los envoltorios y luego enlazar a todos los hoteles. Tan solo tienes contenido de bloque, asegúrate de tener esta intención. Entonces podemos agregar nuestro div externo. Envoltura de subrayado exterior. Dentro de aquí también queremos tener un segundo envoltorio para cada hotel individual. Envoltura de subrayado de hotel. Entonces el h2 de hoteles. Este rubro de nivel dos también va a tener un enlace. Justo después de esto vamos a añadir nuestro enlace, que va a enlazar con todos los hoteles que están disponibles. Agrega un href, que se va a enlazar para reenviar barra todo. Entonces entre paréntesis un texto de “ver todo” vas a guardar esto y luego ir al navegador en la página principal y luego refrescar. Abajo en la parte inferior tenemos nuestro título de hoteles y luego tendremos un enlace que lo haremos por cable más tarde para ver todos los hoteles disponibles en la base de datos. El motivo por el que tenemos este enlace para ver todos los hoteles, es porque los hoteles que se mostrarán en la página principal sólo se van a restringir a nueve hoteles aleatorios sacados de la base de datos. Esto es para que la página principal no se vuelva demasiado abarrotada cuando tenemos muchos hoteles dentro de nuestra base de datos. Ahora adelante y agrega un hotel ficticio. Se puede ver cómo se ve esto. Después de nuestros enlaces y al mismo nivel que nuestro h2, podemos agregar un envoltorio de hotel, así que dot hotel nido. Dentro de aquí vamos a tener un par de secciones diferentes. El primero va a ser para la imagen hotelera. Hotel img. Esta va a ser la sección que va a aparecer en el lado izquierdo y va a tener una imagen del hotel la cual luego enlazaremos a la descripción completa del hotel. Necesitamos un enlace con la href. Podemos dejar esto vacío por ahora porque estos datos van a ser dinámicos y se va a enlazar con el hotel actual que estamos viendo. Después de aquí vamos a añadir una imagen que es la imagen principal del hotel y sólo podríamos añadir una imagen ficticia ahora. Avanzar imágenes slash hacia adelante hoteles barra. Después podremos seleccionar cualquier hotel que queramos de nuestra carpeta pública. Bajemos los hoteles y podrás elegir cualquiera de estas imágenes desde ahí. Yo sólo voy a ir por hotel one dot JPEG, y al igual que este enlace de arriba, esto también será dinámico y la información será sacada de la base de datos y luego podremos agarrar la imagen correcta. Después de esta sección de imagen del hotel, agreguemos una nueva sección rodeada de un div llamado hotel underscore info. Esto va a contener información sobre el hotel, como el nombre del hotel, la calificación de estrellas, el país, y también el precio por noche. El nombre del hotel también va a ser un enlace al igual que esta imagen, que también enlazará con la vista completa del hotel, que mostrará una descripción extendida. Añade nuestro enlace circundante con un href vacío por ahora. Nuestro título del hotel va a ir en un elemento h3. Podemos agregar algún texto ficticio del hotel uno. A continuación, una regla horizontal separa el título del resto de la información. Ahora es sólo un caso de agregar algunos elementos de p. El primero es para la calificación estelar. Podemos configurarlo para que sea lo que queramos por ahora. Vayamos por cuatro. El país: Jamaica. Entonces finalmente el costo por noche. Recuerda que esto es solo algunos datos ficticios para que podamos ver la estructura. Entonces veamos cómo se ve esto. Ahí está nuestra sección de imágenes arriba, y luego nuestra información del hotel con el nombre, calificación de estrellas, el país, y también el precio. Genial. Ahora tenemos un hotel en la página de Inicio. También necesitamos crear una vista para enlazar contigo cuando el usuario hace clic en este enlace de todos los hoteles. Pasemos a Visual Studio, abrimos la barra lateral, y luego dentro de las vistas podemos crear nuestra nueva vista llamada all underscore hotels dot pug. Dentro de esta plantilla también necesitamos ampliar el diseño. También necesitamos agregar contenidos de bloque. Ahora como vas a compartir una vista similar al hotel desde la página Inicio. Si pasamos al index dot pug y se copiará todo el camino desde el costo por noche hasta el hotel. Este es el div individual del hotel. Acude a todos los hoteles y luego podemos añadir nuestro envoltorio. Así que dot hotel underscore wrapper, sangrarlo en un nivel y luego podemos pegar en el código del último video. Asegúrate de que esto solo esté sangrada en un nivel y asegúrate de que nuestro archivo de todos los hoteles dot pug esté guardado. Si pasamos a nuestra página principal, ahora no podremos ver la vista hacia abajo en la parte inferior. Es porque aún no hemos configurado el enrutamiento para manejar esta barra inclinada hacia adelante todo. Pero ya se puede ver que hemos repetido el mismo código hotelero, tanto dentro de la plantilla de todos los hoteles como también dentro del índice dot pug. Ahora es nuestra oportunidad de reducir nuestro código moviendo este hotel a un mixin dentro de la carpeta views, dentro de la barra lateral. Vamos a crear una nueva carpeta llamada mixins. Dentro de nuestra carpeta mixins, voy a crear un nuevo archivo el cual se llama subrayado hotel dot pug y este va a ser el archivo para nuestro mixin. Sé que nos gustaría empezar un nombre mixin con un subrayado pero esto depende totalmente de ti. Empezamos por usar la palabra clave mixin seguida de un nombre que queremos darle a este mixin. Hotel Mixin entonces podemos ir y copiar el código del hotel. Ya tenemos en nuestro índice dot pug. Tenemos este hotel todo el camino hasta nuestra calificación por estrellas y costo por noche. Copia esto. Entonces si vamos a nuestro mixin que es subrayado hotel. Pega esto en y asegúrate de que esto esté sangrado correctamente. Una capa de nivel, y luego un nivel más para nuestra imagen e info. Guarda este archivo y eso es todo lo que necesitamos hacer para crear nuestro mixin. Ahora, index dot pug file, entonces necesitamos incluir este archivo mixin, que acabamos de crear. Después extiende el diseño. También podemos incluir nuestro mixin agregando la ruta del archivo. Mixins, que es el nombre de la carpeta, forward slash underscore hotel. No necesitamos añadir la extensión dot pug. Después necesitamos quitar el código del hotel y luego reemplazarlo por el nombre que le dimos al mixin. Cortar o eliminar esta sección de hotel desde el fondo y luego añadimos nuestro mixin con plus hotel. Este nombre de hotel es el nombre que le dimos al mixin dentro del archivo. Underscore hotel dot pug. Este es un nombre que pones justo en la parte superior. Si ahorita guardamos esto y luego pasamos a la página de índice haciendo clic en el logo y me desplazo hacia abajo, puedes ver que tenemos un problema con las indentaciones. Vamos a echar un vistazo a esto y este es un pug de punto índice, sobre nuestro pug de punto índice, y parece que esto no está del todo alineado con esta línea. Estos pequeños errores son cosas que necesitamos tener cuidado con la sangría. Asegúrate de que todo funcione correctamente. Intentemos recargar esto. Ahí está nuestro hotel de vuelta en la página principal. Pero esta vez sacó de un mixin. Ahora podemos hacer lo mismo con la página de todos los hoteles dentro del archivo de todos los hoteles dot pug. También podemos incluir el mixin de la misma manera que el índice. Después de nuestra declaración extiende, podemos incluir nuestro mixin, que de nuevo es la ruta de archivo de mixins, forward slash underscore hotel. Ahora podemos reemplazar este código de hotel de punto hotel hasta el costo por noche. Después reemplaza esto por el mixin usando plus hotel. Ahora hemos reemplazado una sección de código de dos archivos y lo hemos agregado a un mixin. Volveremos pronto a mixin al pasarles también datos sobre cada hotel en la base de datos. A la par de crear también más mixins para ti, a medida que vamos. Nuestro código ahora es un poco más corto ahora al incluir esto y se usará un par de veces más en este proyecto también. A continuación, vamos a pasar al enrutamiento y cómo podemos usarlo para cambiar entre páginas en nuestra aplicación. 15. Enrutamiento básico: Si pasamos a Visual Studio Code, y por el momento, si vas dentro de la carpeta de rutas, y luego haces click en el index.js, solo tenemos una ruta configurada actualmente, y ésta es para la página de inicio. Ahora vamos a ver cómo agregar más rutas también y si el enrutamiento nos permitirá manejar lo que sucede cuando se visita una URL. En primer lugar, no voy a estar usando el archivo users.js, que ha sido incluido con el generador express. Entonces podemos bajar y eliminar users.js, para que esto podamos eliminar esto de nuestro proyecto. Después dentro del app.js, haga clic en el archivo principal aquí. También tenemos dos referencias al archivo de este usuario, que también podemos eliminar. En primer lugar, podemos eliminar esta variable, que apunta a las rutas del usuario. Entonces borra esto, dejando solo nuestro archivo principal de índice. Entonces un poco más abajo, tendremos una app.use que establece queremos usar el router de este usuario en la ruta del archivo del usuario justo aquí nosotros. Por lo que también podemos quitar esto. Ahora vuelve a nuestro archivo index.js router. Cerremos algunas de estas pestañas. En la parte superior de este archivo tenemos dos variables. Tenemos una variable Express y también una variable de ruta aquí. Tenemos estos para que podamos usar la funcionalidad Router que viene con Express. En primer lugar, requerimos Express, que es un paquete de nodos y esto está dentro de la carpeta de módulos de nodo. Si requerimos algún paquete desde el interior de los módulos del nodo, que está justo aquí, solo necesitamos referirlo por el nombre del módulo. Si estamos requiriendo alguno del archivo que no está dentro de la carpeta de módulos de nodo, tendremos que añadir la ruta completa del archivo antes del nombre. Después de configurar nuestra variable Express, entonces configuramos para abrir la instancia del router Express, y la almacenamos en una variable del router. Esta variable de router también se usa aquí abajo, y también cualquier ruta futura también. Después usamos.llegar aquí porque estamos manejando una solicitud get. Recuerda cuando un usuario visita cualquier página en el navegador, esta es una solicitud get. En el último video agregamos un enlace para reenviar slash todo. Agregamos esto más en nuestra plantilla index.pug, justo aquí. Esto era para proporcionar un enlace a todos los hoteles. Pero aún no hemos manejado la ruta. Pasamos a la página de índice y seleccionamos este enlace. Vemos que lo hemos tomado para rebajar todo, pero abajo en la parte inferior tenemos un mensaje de Not_Found. Vemos todo el contenido del encabezado apenas un poco quieto porque este contenido se ha agregado al archivo de maquetación principal. Por lo que ahora podemos seguir adelante y escribir nuestra propia ruta para manejar el corte delantero todas las rutas hoteleras. Entonces de vuelta en el index.js, donde vamos a estar manejando todas nuestras rutas, podemos empezar igual que arriba con router y este es un get request por lo que usamos .get. En el interior aquí, queremos que esto se aplique a la varilla delantera todas las rutas, y otra función como segundo parámetro. Entonces función que toma en la solicitud, y también los objetos de respuesta. Estos dos nombres de variables pueden ser cualquier cosa que prefieras. Después abre las llaves y añade un punto y coma al final. Solicitud es un objeto que contiene toda la información de la solicitud HTTP. A modo de ejemplo, lo usaremos pronto para acceder a los datos desde dentro de un formulario, cual se pasa junto con la solicitud. Respuesta, por otro lado, es lo que queremos enviar de vuelta cuando obtengamos una solicitud. Entonces la solicitud son los datos que entran en el servidor, y luego la respuesta es una respuesta del servidor. Si echa un vistazo por encima de las rutas fuera de casa, Tenemos res.render una plantilla de página como respuesta del servidor. También miramos res.send antes también. Aquí también podemos renderizar nuestra plantilla de todos los hoteles que creamos justo aquí. Por lo que dentro de router.gets/todo lo que podemos decir, res.render, pasa en nuestras plantillas de all_hotels. Entonces como objeto, podemos pasar en nuestro título de todos los hoteles. El punto y coma al final aquí. Ahora podemos probar esto yendo al navegador, presionar “Guardar”, y luego refrescar. Asegúrate de que solo adelante/todas las rutas y luego desplázate hacia abajo hasta la parte inferior. Ahora podemos ver este hotel, que agregamos como mezcla en el último video. También probemos esto una vez más yendo a la página de inicio, haciendo clic en el “Logo”, dando clic en “Ver todo”, y una vez más podemos ver que esto sigue funcionando. Por lo que ahora tenemos dos rutas en su lugar. Uno para todos los hoteles y otro para la página de inicio. Esta es una introducción básica al manejo de rutas con Express. En el siguiente video veremos los datos que pasan para la URL, cuando encubrimos parámetros de rutas. 16. Parámetros de la ruta: Una de las cosas que tenemos que lidiar a la hora de enrutar es que no siempre sabemos cuál será la URL exacta. A lo que quiero decir es que si nos imaginamos la ruta de un usuario, cada usuario tiene un ID de usuario único. Esto podría ser algo como nuestro localhost o la URL de nuestro sitio web, usuarios de slash forward. Entonces hacia adelante slash un nombre de usuario, que podría ser casi cualquier cosa. Esta sección de usuario que tenemos justo aquí, probablemente no será conocida de antemano por el desarrollador. Esta sección es algo que tenemos que manejar de antemano. Para ello, podemos utilizar parámetros de ruta para crear un segmento dinámico en la URL. Si pasamos al index.js, que maneja todas nuestras rutas, empecemos duplicando nuestra slash hacia adelante todas las rutas en el último video. Copia esta sección y luego agrégalo justo a continuación. Entonces podemos decirle express router qué partes de la URL queremos ser dinámicos. Después de inclinar hacia delante todo, entonces podemos seguir adelante y agregar la Barra inclinada hacia adelante y luego crear unos segmentos dinámicos usando dos puntos. Después un nombre que queremos darle a este apartado. Este nombre puede ser cualquier cosa de nuestra elección. Entonces dentro de nuestra función justo debajo, podemos entonces acceder a los datos de nombre desde nuestra URL. Utilizamos el objeto de solicitud. Recuerda dijimos que esto contiene información de las solicitudes HTTP. En primer lugar, podemos acceder a los objetos de solicitud, en.params para acceder a los datos en los parámetros de URL, seguido de esta variable de nombre se añadieron después de los dos puntos. Por lo tanto solicita.params.name. Entonces si vimos esto dentro de una constancia, así const nombre es igual a nuestros parámetros. Estos datos también se pueden pasar a las plantillas para utilizarlas junto con el título de la página. Después del título de todos los hoteles, añadir una coma. Entonces también podemos pasar en este nombre los datos. Este dato de nombre se pasa a las plantillas de todos los hoteles junto con este nombre. Así que haga clic en nuestro archivo todo hotels.pug. Entonces se puede acceder fácilmente a esta variable en la plantilla con solo hacer referencia al nombre. Abajo en la parte inferior del archivo, p es igual a nuestra variable de nombre. Después, pasa al navegador. Ahora si vamos a reenviar usuarios de slash y luego reenviar slash, podemos agregar cualquier nombre aquí, pulsa enter. De hecho, todo esto fue un aumento y hit enter. Abajo en la parte inferior ahora vemos me pondría nombre de Chris, que pasamos. Podemos volver a intentarlo con cualquier cosa que queramos agregar. Estos datos son entonces tomados de nuestra URL, almacenados dentro de los objetos request.params. Entonces podemos pasar ahora es abajo a nuestra plantilla para usar de cualquier manera que elijamos. También podemos agregar tantos segmentos dinámicos como necesitemos en la URL. En lugar de solo tener uno en index.js, así como esto. También podemos agregar este segmento dinámico a cualquier sección que queramos. También podríamos agarrar la edad y almacenarla en una variable de edad. Pero todo esto depende del tipo de sitio web que estés creando. Otra cosa que también podemos hacer si no queremos agarrar los datos dentro de las rutas, también podemos simplemente agregar una estrella. Al igual que esto, podríamos agregar una estrella y luego esta ruta, justo aquí, toda esta función se ejecutará luego cada vez que una ruta siga esta slash hacia adelante todo, y luego hacia adelante slash cualquier dato después de esto. Esta estrella se puede colocar en cualquier sección de la URL que desee. Esto será útil para manejar nuestros nombres de usuario, aunque no quisiéramos agarrar los datos reales y almacenarlos en una variable. Ahora voy a quitar este código del video. Dentro de todas las rutas, eliminemos la sección router.get, ya que no necesitamos esto para este proyecto. Entonces todos los hotels.pug, todo lo que necesitamos quitar es p igual a nombre, y restaurar esta caja como era. Pero volveremos a los parámetros de ruta un poco más adelante en este proyecto, donde estaremos pasando cualquier ID de hotel junto con información de reservas. 17. Patrón MVC: Vamos a estar estructurando este proyecto usando lo que se conoce como el patrón MVC. MVC significa Model View Controller y es básicamente una forma de separar nuestra lógica en diferentes partes. En la parte superior del diagrama aquí vemos el modelo, el modelo define cómo deben estructurarse nuestros datos. A modo de ejemplo, nuestra información del hotel tendrá un modelo y este modelo se quedará en que cada hotel necesita tener un nombre. Debe estar presente su nombre, y también una cuerda que ya no se refería a la capa del Islam. También nuestro modelo de hotel debe tener una descripción, una imagen, un precio, y así sucesivamente. A continuación y probablemente la más fácil de agarrar es la vista. El punto de vista, que como suena es básicamente la interfaz de usuario. Ya hemos tocado esto en la sección donde hemos creado unas plantillas de página por lo que esto debería ser bastante sencillo. Después está el controlador. Este controlador puede actualizar la vista o enviar datos al modelo. Un uso típico para un controlador en nuestro proyecto será buscar nuestro modelo de hotel partidos basados en un país, entonces sus datos se pueden pasar luego a la plantilla o a la vista. En realidad ya hemos hecho algo similar en el último video, donde miramos los parámetros de ruta. En lugar del índice de rutas o archivo js, utilizamos un controlador para obtener el nombre de la URL, luego pasamos este nombre a la vista para mostrarlo en la página de inicio. También estaremos usando el controlador para hacer otras cosas también, como la validación de formularios cuando un usuario se registra antes de enviar estos datos al modelo de usuarios. Este es un patrón que estará siguiendo para el resto de estos proyectos. Es mantenerse bien estructurado y organizado. Puede parecer un poco confuso para empezar pero vamos conseguir mucha práctica y pronto quedará claro. En el siguiente video, vamos a estar iniciando este proceso de separación creando nuestros controladores. 18. Uso de controladores: Por el momento estamos manejando lógica general dentro de este archivo routers index.js. Navegamos a cierta ruta y luego toda la lógica se maneja dentro de esta función y también esta que está abajo. Esto funciona bien para aplicaciones pequeñas, pero pronto superaremos este tipo de configuración. Voy a separar esta lógica dentro y crear una carpeta de controladores en la raíz de todos los proyectos. Pasemos a la barra lateral y creemos una nueva carpeta llamada controladores. Asegúrese de que esto esté en el mismo nivel que todas las carpetas de nivel, como el bin y los módulos de nodo. Dentro de aquí podemos agregar un nuevo archivo JavaScript para cada controlador que quieras crear. Hagamos clic en los controladores y luego creamos un nuevo archivo. Voy a crear controlador separado para la lógica relacionada con el hotel. Después uno más tarde para que los usuarios mantengan las cosas organizadas. Comencemos por crear hotel controller.js. Controlador con C mayúscula y luego golpear “Enter”. Este archivo será una serie de funciones y básicamente estaremos externalizando esta sección de funciones desde nuestro router. Vamos a tomar esta lógica, ponerla en nuestro controlador, y luego hace referencia dentro de nuestro router. Empecemos en nuestro hotel controller.js y empecemos con las exportaciones A. Esto permitirá que este código esté disponible en otras partes de nuestra aplicación. A continuación le damos a esta función exportada un nombre de nuestra elección. Trata de mantenerlo descriptivo aunque para que sepamos lo que cada uno estará haciendo. Llamemos a esto la página de inicio, y luego pongamos esto en una función. Esta es una función que toma en los objetos de solicitud y respuesta. Añadamos estos en, para que tengamos acceso completo a ellos dentro de nuestra función. Entonces si pasamos a nuestro index.js, entonces podemos cortar el res.render de nuestras rutas de inicio y luego agregarlo a nuestro controlador y ahora también sería un buen momento para cambiar el título de la página. Pongamos esto en “Viajemos”. Ahora tenemos nuestra lógica separada, por lo que ahora podemos ir a nuestros routers archivo index.js. Podemos quitar esta función dejando solo en las rutas iniciales y luego necesitamos referirnos a nuestro controlador de celda anfitrión.homepage. Añadamos controller.homepage de hotel y luego demos a eso un ahorro. Si ahora pasamos al navegador y luego pulsamos “Recargar”, y vamos a la página de inicio, ahora vemos un mensaje diciendo que no se puede llegar al sitio. Si vamos a Visual Studio y luego abrimos la terminal, podemos ver que la aplicación ha aplastado. Esto se debe a que necesitamos requerir este archivo de controlador del hotel antes de poder acceder a él. Actualmente, estamos tratando de acceder al controlador del hotel, pero aún no hemos importado este archivo. Para ello, vamos a la parte superior de nuestro archivo y luego podemos añadir un comentario. Por lo que requieren controladores y luego configurar una constante, así const controlador hotel, que coincide con este nombre justo aquí y luego podemos requerir el archivo. Necesitamos agregar la ruta del archivo porque esto no está dentro de la carpeta de módulos de nodo. Esto está dentro de la carpeta de controladores. Por lo que los controladores, avance slash controlador de hotel y ahora pulsa “Guardar”. Ahora deberíamos ver que la app se ha recargado. Ahora tenemos el texto verde. Pasado al navegador, y la aplicación ahora está trabajando una vez más. Entonces podemos hacer lo mismo con la ruta de todos los hoteles también. Primero, pasemos al controlador del hotel y creemos esto. Entonces al igual que antes, podemos decir exports.listallhotels. Excepto la función E que toma en la solicitud, la respuesta y luego a un router. Podemos tomar el res.render de estos, hacia adelante barra todo. Pega esto en, y luego hace referencia a la función dentro de nuestro router. Así que quita la función de antes. De nuevo, queremos el archivo del controlador del hotel. Pero esta vez queremos listar todos los hoteles. Ahora, probemos este router en el navegador. Por lo que la ruta de inicio hacia adelante barra todo, desplácese hacia abajo y esto aún funciona para. Entonces por el momento no hemos ganado mucho al tener controladores separados. Pero estos controladores pronto se volverán más complejos. Especialmente cuando empezamos a tratar con bases de datos y obtenemos las vistas, junto con revisar cualquier dato de usuario para su validación. Tiene sentido empezar a separar las cosas desde el principio, que las cosas no se pongan demasiado desordenadas a medida que crece nuestro proyecto. 19. Uso de middleware: Middleware es un concepto realmente importante para aprender, y se usa bastante en gran medida al construir aplicaciones Express. Si bien estaremos usando middleware para sus proyectos, solo quería darte una introducción rápida primero, así que al menos entendemos lo básico. Si pasamos a Visual Studio entonces abrimos nuestro controlador de hotel, tenemos los objetos de solicitud y respuesta para cada router. Solicitud son los datos que entran y respuesta son los datos que se devuelven desde el servidor. Podemos usar middleware en medio para básicamente cambiar nuestros datos o hacer algo con ellos. Básicamente, un middleware actúa como una serie de funciones por las que pasamos. Ejemplo de su uso en nuestro proyecto, será cuando un usuario se registren. Dentro de este archivo hotelController.js, quiero mostrarles un ejemplo rápido y estos ejemplos son solo para fines de demostración. No necesitas seguir adelante si no quieres. Hagamos un poco más de espacio y voy a crear dos funciones más. Exportaciones, registro, paso en los objetos de solicitud y respuesta. El apartado de registro va a manejar la validación de datos. Esto validará cualquier información de usuario ya que viene entonces este segundo va a ser la funcionalidad para iniciar sesión. exports.Inicie sesión, pasando su solicitud y respuesta y esto se va a manejar el inicio de sesión. Digamos que queremos tener la funcionalidad para primero inscribir al usuario. la sección de registro también se valida los datos del usuario luego se da seguimiento por login, el usuario en. Esta suele ser la funcionalidad que queremos. Cuando nos registramos para nuevos sitios web, muchas veces queremos que nos loguemos de inmediato. Todo el código para manejar ambas secciones podría hacerse dentro de un solo controlador. Pero para este caso, tiene sentido romper las cosas en acciones separadas. Esto se debe a que no sólo queremos registrarnos y luego iniciar sesión de inmediato, también queremos que la funcionalidad para este inicio de sesión sea separada. Justo cuando un usuario ha regresado y luego solo quiere iniciar sesión. Evite repetir el mismo código de inicio de sesión más de una vez. ¿ Cómo sabe Express que queremos ejecutar la función de registro luego seguido del inicio de sesión? En primer lugar, necesitamos pasar en un tercer argumento a nuestra función. Normalmente llamamos a esta variable siguiente, con sus necesidades llamar al siguiente dentro de nuestro cuerpo de función, cuando estamos listos para pasar a la siguiente pieza de middleware, por lo que llamamos siguiente dentro de aquí. Cuando queremos que se mueva por la cadena hacia la siguiente pieza de middleware. Todavía queda una cosa más por hacer. A pesar de que llamamos siguiente dentro de esta función, no sabe automáticamente cuál es la siguiente pieza de middleware. Todo lo que sabemos queremos pasar a iniciar sesión, Express no lo sabe por defecto. Hacemos esto declarando el orden del middleware dentro del archivo del router hacia el router index.js. Podemos entonces configurar un nuevo ejemplo rutas, tenemos router.gets. Vamos a crear unas rutas de registro con la varilla delantera y luego podemos sumar nuestros controladores. El HotelController.Inscripción. Si solo quisieras usar esta sección de registro, solo usaríamos un like this. Podemos sumar más de uno. Podemos entonces dar seguimiento con HotelController.login, y podemos pasar tantos de estos como quieras usar y luego estos ejecutados en secuencia, cada uno requiriendo la siguiente llamada dentro de la función. En primer lugar, usaremos la función de registro, luego a continuación la pasaremos a la función de inicio de sesión y como estas ahora son funciones separadas, esto tiene sentido cuando queremos crear una ruta solo para iniciar sesión. Si tenemos, router.gets, cuando lleguemos a esta etapa, también queremos unas rutas de inicio de sesión y luego podemos reutilizar HotelController.login. Ahora estamos usando la misma funcionalidad de inicio sin repetir el mismo código en múltiples funciones. Podemos ver que esto está funcionando agregando algunos logs de consola a todo middleware sobre al controlador, justo antes de siguiente podemos hacer un registro de consola, y luego un simple mensaje de middleware de registro, minúscula c, luego copiar este luego agrega esto a nuestro inicio de sesión. Cambios para ser middleware de inicio de sesión, guardar nuestros archivos y y más a los proyectos. Tenemos que ir a nuestras rutas arriba, que fijamos justo aquí. Forward slash sign-up, en este extremo luego golpea enter. Ahora sólo se registra rutas hacia la consola y hacer un poco más de espacio. Ahora vemos dentro de la consola en la parte inferior tenemos middleware de registro llamado primero, que esperarías porque esto se llama primero y el controlador luego tenemos el middleware de inicio de sesión justo después. Esto significa que ahora el router está pasando por ambas piezas de nuestro middleware en la secuencia correcta. Si seguimos adelante sin embargo, y los comentarios sonido es la siguiente función, guarda el archivo luego vuelve a cargar el navegador en las rutas de registro. Entérate en una terminal ahora vemos que sólo se ha ejecutado el middleware de registro. El código ha llegado a esta sección justo aquí entonces no se ha pasado a la siguiente pieza de middleware porque no hemos llamado siguiente. Esta es una introducción básica a cómo funciona el middleware. Voy a quitar estas dos funciones ya que no las necesitamos en nuestros proyectos. Ellos sólo para demostración y también las dos nuevas rutas para configurar en el index.js y luego comprobar esto funcionando bien. Dirígete a las rutas domiciliarias y ahora estamos de vuelta a la normalidad. Podemos cargar estas rutas más adelante cuando volvamos a esta parte de la app. Por último, también podemos establecer un middleware para usar en todo el sitio, lugar de solo una ruta específica sobre en el app.js, que es el archivo principal. Haga clic en esto y luego desplácese hacia abajo hasta la sección con app.use, que acaba de estar aquí. Aquí puedes ver app.use, y aquí es donde podemos configurar cualquier middleware como analizador de cookies para usar para todas las rutas. A continuación podemos ver que tenemos la configuración del router de índice aquí también. Tanto para esto como para todo el middleware, primero podemos agregar una ruta como primer argumento para restringir el middleware para que solo se aplique a estas rutas en particular. También hay muchos de los usos para middleware, como plugins de terceros y los veremos más a lo largo de este proyecto. 20. Actualización importante: mLab ahora forma parte de Mongo: medida que avanzamos por el siguiente proyecto, utilizamos una base de datos alojada en un servicio llamado mLab. mLab es un servicio de base de datos Cloud totalmente administrado el cual utilizamos para alojar nuestra base de datos Mongo. Como podemos ver en la página de inicio aquí, mLab ha sido adquirido desde entonces por el propio Mongo. Por lo que ahora necesitamos usar este servicio en su lugar. El servicio se llama Mongo Atlas y es un swap bastante sencillo ya que acabamos de configurar una base de datos de manera similar y luego usamos la cadena de conexión proporcionada en nuestros proyectos. Mongo Atlas también es gratuito para inscribirse y también tiene un nivel gratuito para el desarrollo. Entonces empecemos por pasar a mongodb.com/cloud/atlas. Si has usado Atlas antes y ya tienes una cuenta, puedes seguir adelante e iniciar sesión. De lo contrario, tendrás que registrarte primero antes de que podamos crear nuestro primer clúster de base de datos. Entonces si necesitas seguir adelante y registrarte, pero voy a bajar e iniciar sesión en Atlas ahora. Entonces una vez que estés todo configurado y registrado, tenemos que seguir adelante y crear un nuevo clúster. Crear un nuevo clúster puede aparecer como parte del proceso de registro. Entonces sigamos adelante y construyamos un nuevo clúster que nos va a permitir seleccionar nuestra región o nuestro plan. Hay algunas opciones preconfiguradas y puedes dejar los predeterminados tal como están o cambiar a tu región más cercana. Por lo que voy a seleccionar las regiones más cercanas me. También mantente atento a la etiqueta de nivel gratuito, que no está en cada una. Todo lo demás, voy a mantenernos por defecto. Tan solo asegúrate de ver el costo a la baja en la parte inferior para ser gratis. Entonces podemos seguir adelante y crear nuestro clúster haciendo clic en el botón verde. Un nuevo clúster puede tardar unos minutos en configurarse. Entonces ya me voy a ir y volver en cuanto todo esto se haga. Entonces este es mi cluster all now setup y el siguiente paso es crear un nuevo usuario. Si vamos a la pestaña de seguridad y luego vamos a añadir nuevo usuario, este usuario va a ser para nosotros mismos. Para que podamos seleccionar el atlas Admin, que es una de las opciones sobre los privilegios. Por supuesto, puedes agregar más usuarios con diferentes permisos en una fecha posterior si es necesario. Después agrega un nombre de usuario y contraseña de tu elección. Voy a agregar un nombre de usuario y una contraseña para luego seguir adelante y agregar a nuestro usuario. El siguiente paso es agregar la dirección IP de nuestros propios ordenadores a la lista blanca de Mongo. Esta es una característica de seguridad por lo que sólo nuestra máquina se le concede permiso para acceder a nuestro clúster. Es posible que deba tener esto en cuenta en una etapa posterior al implementar la aplicación a otros servicios. Entonces, pasemos a la pestaña Seguridad y pinchemos en 'lista blanca IP'. Agregar dirección IP. Obtenemos un pop-up y podemos confirmar que queremos utilizar nuestra dirección IP actual haciendo clic en este botón aquí. Después vamos a conseguir que se añada la dirección IP y este campo sigue. Por lo que sólo podemos seguir adelante y confirmar. Es posible que tengas que darle a esto unos momentos para que te configures si ves este spinner pendiente justo aquí. Si antes no has utilizado Mongo Atlas, podemos consultar el contenido de nuestra base de datos haciendo clic en el botón de colecciones. El botón de colecciones está en la pestaña de resumen y luego colecciones. Esto nos da acceso a todas las colecciones que tiene nuestra base de datos y podemos interactuar con nuestros datos. Agrega nuevos campos, agrega nuevas colecciones y consulta toda la información que se almacena en nuestra base de datos. Por supuesto, aún no tenemos ningún dato, pero aquí es donde se puede acceder a toda la información de nuestra base de datos, como cualquier hotel y usuario, que vamos a seguir adelante y guardar de nuestro proyecto. Por último, necesitamos una cadena de conexión. Si vamos a resumen y luego hacemos clic en 'Conectar'. La opción que queremos usar es conectar tu aplicación. También hay opciones aquí para usar MongoDB Compass y también conectarse con el Mongo Shell. Ambos conectan su aplicación es la que necesitamos por ahora. También necesitamos cambiar la versión del controlador para que sea la versión dos. Entonces vemos que nuestra cadena de conexión se muestra justo aquí y también podemos copiar esto en el portapapeles. Esta cadena de conexión es la que usaremos en nuestro proyecto en lugar de la proporcionada por mLab. Esto se hace para esta actualización. Simplemente mantén esto abierto en el navegador y podrás usarlo en el siguiente video cuando nos conectemos a nuestra base de datos. También solo ten en cuenta a medida que avanzas por el curso, necesitarás pasar por estas encuestas de Mongo Atlas para ver tus datos en lugar de mLab como lo hago ocasionalmente en la clase. Todo lo que necesitas hacer para ver esto es dar click en el botón de colecciones nosotros miramos antes. 21. Primeros pasos con Mongo: En este proyecto, vamos a estar lidiando con bastante información. Tendremos información sobre cómo los hoteles tenemos y utiliza cualquier orden que haya realizado y también cualquier dato de sesión en el que nos pondremos más adelante. Por supuesto, así que necesitamos un lugar donde almacenar todos estos datos, y voy a estar usando una base de datos MongoDB, en este curso, que es realmente popular base de datos para aplicaciones Node, junto con muchos de esto también. MongoDB nos permite almacenar nuestros datos en un formato similar a JSON. Esto hace que sea realmente fácil trabajar con, especialmente cuando solíamos usar aplicaciones de tipo JavaScript. Ya hemos trabajado con datos JSON, por lo que esto debería ser bastante familiar. También facilita el aprendizaje de las cosas. También hay un montón de consultas útiles que pone a disposición. El consulta es una búsqueda en nuestra base de datos, y Mongo lo hace realmente fácil. Tenemos muchas formas diferentes en las que podemos realizar búsquedas para solo obtener los datos exactos que necesitamos. Por ejemplo, una de las consultas que estaremos utilizando es buscar en la base de datos utilizando un término de búsqueda el cual utilizan Enter y luego también filtrada por la calificación de estrellas y disponibilidad, luego finalmente buscó los resultados en orden de precios. También veremos un montón de consultas también sección de unidad. MongoDB también es libre y de código abierto también. También estaré usando una versión alojada en este curso, que también es gratuita. La versión alojada va a ser sobre mLab, cual puedes encontrar nuestro MLAB.com. Esta solución alojada también se conoce como base de datos, como servicio. Básicamente nos permite ponernos rápidamente en marcha con MongoDB. Nuestra base de datos se aloja entonces en las fotos de la nube. También puedes configurar Mongo localmente, tenemos en nuestra base de datos ya alojada es realmente útil para más adelante cuando empujamos nuestra aplicación para ser servidor en vivo. También guarda la configuración. Lo primero que tenemos que hacer es registrarnos para una cuenta de usuario, así que si no tienes ya una cuenta con mLab, te sugiero que sigas adelante y pausas el video y luego te inscribas ahora. Ya tengo una cuenta con mLab, así que voy a seguir adelante e iniciar sesión, así que agrega en los detalles de inicio de sesión. Una vez que hayamos iniciado sesión, ahora podemos seguir adelante y crear un nuevo despliegue de MongoDB. Vaya a la parte superior, y haga clic en crear nuevo, después tenemos algunas opciones para seleccionar, estaré usando Amazon para el proveedor, así que haga clic en esto, y luego el plan de sandbox gratuito, que está bien para el desarrollo y el aprendizaje. Seleccione esta y seleccione una región. Amazon está alojado en varias ubicaciones en todo el mundo, solo tenemos unas pocas opciones para plan is sandbox, por lo que AWS estará bien. Podemos continuar, y podemos seleccionar uno de estos. Después continuar de nuevo, y luego podemos agregar el nombre de nuestra base de datos. Voy a llamar a la mía, vamos a viajar. Continuar. Podemos revisar cualquiera de esto y luego golpear Enviar Orden, y ahí vamos esa es nuestra base de datos let's-travel en nuestra configuración. Nuestra base de datos está vacía, por lo que no tiene ninguna colección. Simplemente se pone, si hacemos click en esto, entonces podemos echar un vistazo por dentro. Debajo de la Ficha de Colección vemos que no tenemos ninguna en este momento, y la colección es solo una forma de agrupar nuestros documentos, los cuales almacenamos, como ejemplo, tenemos una colección de hotel para almacenar nuestros registros hoteleros, una colección de usuarios, para tienda de abusos asignados y así sucesivamente. El top, también tenemos un URI que podemos utilizar en nuestro proyecto para conectarnos a esta base de datos. Hay un espacio en este URI para nuestro usuario y también una contraseña, por lo que necesitamos seguir adelante y configurarlo bajo la pestaña del usuario. Haga clic en esto y luego vaya a Agregar usuario de base de datos. Podemos agregar un nombre de usuario y contraseña, así que solo voy a llamar a mi viaje como nombre de usuario, y viajó como la contraseña. Crea nuestro usuario, genial. Ahora ten el nombre de usuario y contraseña para rellenar estos espacios en blanco. Pero primero hay una cosa más que necesita configuración, y esto es la mangosta. js. Somos libres de usar Mongo directamente si quieres, pero voy a estar usando un paquete de nariz llamado Mangoose en su lugar. Mangosta básicamente nos permite dar a nuestros datos alguna estructura en la que se llama esquema. Si escribimos directamente a Mongo, puedes cometer un error con bastante facilidad. Si no configuramos cómo deben ser nuestros datos, Mangoose nos permitirá establecer cómo se verían nuestros datos. Por ejemplo, tendrá un esquema de hotel, y esto tendrá campos como un nombre y una descripción. Ahora podemos contestar el tipo de datos, cada campo debe ser, como una cadena, y también restringir los caracteres mínimo y máximo que debería ser, y también si el campo se va a requerir y así sucesivamente. Básicamente nos impide hacer cosas como la entrada y una cadena de texto en un campo de precio, que debería ser un número. Este paquete también nos permitirá crear nuestro modelo, que es el modelo del que hablamos cuando miramos el patrón MVC, dados a nuestros datos cierta consistencia. Sigamos adelante e instalemos Mangoose en nuestra aplicación. Cerremos la terminal abajo con Control C. Entonces teclea npm i mangosta. Observe esta vez usando el comando más corto i, esto es solo una taquigrafía para la instalación y si funciona bien. Hit “Enter” dale algún momento para jall-in desde mpm. Estoy comprobando si todo esto está bien abriendo nuestro paquete.json, y en las dependencias ahora veremos que tenemos Mangosta listada aquí. A través de un en nuestro app.js, ahora podemos configurar nuestra conexión. Nuevamente en la barra lateral podemos abrir app.js. Entonces cierra esto, así que lo primero que tenemos que hacer es configurar nuestra conexión. Tenemos que requerir primero el paquete de Mangoose, que acabamos de importar. Justo después de nuestra importación, voy a usar una constante, y no importa si usas una constante o una variable, pero voy a usar las constantes a partir de ahora, así que const Mangoose igual requieren Mangosta, y recuerda si estamos requiriendo un paquete de la carpeta de módulos de nodo, simplemente lo hacemos referencia por el nombre del paquete en lugar de agregar una ruta de archivo que lo lleve a él. Entonces podemos configurar nuestra conexión usando el método connect, así que eso es primero acceder a Mangosta. Desplácese hacia abajo en la app.set. Vamos a configurar nuestra conexión de Mangoose, por lo que Mangoose variable.connect y luego abra los soportes. Dentro de connect, podemos pasar en nuestro URI de conexión desde mLab, así que vuelve a mLab, copia el URI completo, y como cadena, abre las cotizaciones y luego pega esto. Más bien, necesitamos cambiar nuestro nombre de usuario y contraseña, así que elimina al usuario y nuestro nombre de usuario era viajar y la contraseña estaba viajando. Por supuesto, cuando se trata de bases de datos, quiere una contraseña más segura, pero esto es solo para demostración. También tener NSURI aquí no es la mejor manera de hacer esto, pero moveremos esto a algún lugar más adecuado más adelante. En la siguiente línea en la Mangosta. conectar, necesitamos configurar Mangosta. Promesa, P, esto va a ser igual al global.Promesa, P de nuevo. Una vez que empezamos a consultar nuestra base de datos, necesitamos tratar la información que nos devuelve. En versiones anteriores de Mangoose, utilizamos una configuración basada en callback, pero ahora podemos hacer uso de promesas que son mucho más simples y fáciles de mantener. Podemos configurar Mongo para que use la biblioteca Promise como blueband, si quisiéramos, que podemos conseguir como módulo NPM, o voy a configurarlo para que sea el global. Promesa que tienes aquí, lo que nos permite hacer uso de las Promesas nativas disponibles en ES6 en lugar de instalar otro módulo de nodo. A continuación, bajo esto, podemos comprobar si hay errores de conexión. Primero comprobamos, tenemos una conexión de Mangosta, y luego una vez que lo hacemos, podemos llamar.on, .on es un método de nodo que agrega un oyente de eventos. En nuestro caso, queremos enumerar ahora por cualquier error, lo que el error de composición como primer parámetro, y luego como segundo argumento, pasando una función de devolución de llamada para mostrar este error. Vamos a crear una función donde estamos pasando error, que va a dar salida a cualquier mensaje de error a la consola web. Hacemos esta ola console.error, y podemos pasar este error.mensaje. Pasar nuestro mensaje a la consola, así que vamos a darle a esto una caja fuerte y un punto y coma en los extremos y luego pasar al navegador o a nuestro índice para luego recargar, y de hecho necesitamos reiniciar nuestra terminal después de instalar Mangoose, así que vayamos a la terminal y luego ejecutemos npm run devstart, onémoslo para patear y luego recargar el navegador y comprobemos todo lo que aún funciona bien. Si no ves ningún mensaje de error dentro del terminal de Visual Studio esto debería ser todo ahora configurado. Si tienes un error no comprueba si hay errores tipográficos y también comprueba que el URI de tu base de datos coincida con el de mLab junto con el usuario y la contraseña correctos, y una vez que esto esté funcionando y estés en etapa, ahora estarás bien para pasar a crear nuestro modelo de Mangosta. 22. Modelos de Mongoose: Ya hablamos un poco de qué modelos, vamos a usar una Mangoose configura nuestros modelos, y esto mantendrá estructurados nuestros datos, por lo que hay menos posibilidades de estropear. Estos modelos se encargan de crear datos antes de enviarlos a la base de datos junto con documentos escritos de la base de datos también. En nuestro proyecto, podemos empezar por crear una carpeta de modelos para mantener organizado nuestro código. Abre la barra lateral y luego la raíz del proyecto, crea Nueva carpeta llamada Modelos. Ahora tenemos modelos y nuestras vistas, y nuestras carpetas de controladores y este es el patrón MVC del que hablamos antes. Este modelo que estamos creando va a ser para nuestros hoteles. Esto tendrá la estructura para el nombre de nuestro hotel, descripción del hotel, calificación por estrellas, y así sucesivamente. Dentro de su carpeta de modelos, cree un Archivo Nuevo, llámenlo hotel.js. Ya que usamos mangosta para nuestro esquema, necesitamos requerir el módulo de mangosta. Vamos a cerrar estos archivos hacia abajo y se concentra en hotel.js. Dentro de aquí creamos nuestra constante de mangosta y requerimos el paquete mangosta, punto y coma y luego podemos crear nuestro esquema hotelero, así const HotelSchema, y esto es igual a una nueva mangose.Esquema con una mayúscula S. El Esquema mapeará o coincidir con los datos dentro de nuestra base de datos, por lo tanto, lo que no estamos aquí moldeará cómo se construirán los datos de nuestra base de datos. El esquema toma un objeto dentro de los corchetes, donde podemos empezar a construir cómo se vería cada hotel. Necesitamos un nombre de hotel, así que agreguemos nuestro primer fonema de hotel_name. Ahora podemos configurar esto como un objeto, queremos que el nombre del hotel sea de tipo. Esta va a ser una cadena separada por comas. También podemos agregar algunas restricciones más a estos datos, también podemos establecer si esto se requiere, esto puede ser un valor booleano de verdadero o falso. Si el campo debe estar presente o en su lugar, podemos simplemente agregar una cadena con un mensaje si falta este campo, como es necesario nombre del hotel. Yo vengo hasta el final. Entonces podemos establecer el número máximo de caracteres para ser 32. Entonces, finalmente, vamos a establecer el recorte para que sea un valor booleano de verdad. Eliminaremos cualquier espacio ancho del campo desde el principio y el final, dejando solo los caracteres que contestan. Este es el esquema para nuestro nombre de hotel, y podemos seguir adelante y agregar una configuración similar para nuestra descripción. Separados por una coma, podemos preguntar el hotel_description. La descripción nuevamente debe ser tipo de cadena requerida. Nuevamente, podemos establecer que esto sea cierto o en su lugar podemos pasar en una cadena la cual será devuelta si falta el campo, por lo que se requiere la descripción del hotel. También podemos recortar cualquier espacio ancho, establecer esto para que sea cierto. Ahora tenemos el nombre del hotel y la descripción, separemos esto con una coma, ahora tenemos un campo para la imagen. El imagen va a ser un nombre, así que va a ser una cadena por ahora, volveremos a esta imagen más adelante en el curso porque es una o dos cosas que tenemos que tratar para que esto funcione correctamente. A continuación tenemos la calificación por estrellas, la calificación por estrellas va a ser un tipo de número. También queremos que esto se requiera como todo el resto de los campos. Podemos decir que se requiere calificación de estrellas de hotel, añadir un común en los extremos. Entonces fijamos el valor máximo para ser cinco, porque sólo queremos que la calificación estelar entre uno y cinco. Después de la calificación estelar, es el país, el país es un tipo de cuerda. Esto también se requiere, se requiere el texto de país, la coma después requerido. También queremos terminar, por lo que este es un valor booleano de verdad. Eso es todo lo que necesitamos en este momento para nuestro país. Después del país, queremos fijar el costo por noche. Costo por noche va a ser el tipo de número, ya que este será un precio, y también quieren que esto se requiera. Con una cadena de costo por noche, se requiere. El último pedazo de información que queremos almacenar en nuestro modelo de hotel está disponible. Esto es así lo conciso no tripulado si este Hotel está actualmente disponible para venta y este será un valor booleano de verdadero o falso. Establezcamos el tipo para que sea booleano y se requiera el único otro campo que necesitamos, por lo que se requiere disponibilidad. Una vez que has ido adelante y mecanografiado todo esto, justo en la parte inferior. Lo último que queremos hacer es exportar nuestro modelo para que podamos usarlo en otros archivos. Abajo en la parte inferior debe crear un comentario de modelo de exportación. Hacemos esto con el módulo dot export, respondemos esto a mongoose.model, el primer volumen que queremos agregar es hotel. Hotel es un nombre que le voy a dar a este modelo y separado por una coma, también pasamos en el esquema hotelero, que acabamos de crear. Bien, así es ahora como se construiría nuestro hotel. Ahora hemos configurado nuestro modelo. Significa que nadie podría simplemente seguir adelante y agregar ningún campo como les guste. Ahora tenemos un estricto conjunto de reglas que cada hotel debe cumplir. Posteriormente añadiremos otro modelo para nuestro usuario también y también para cualquier pedido. También podemos dar forma a cómo se verán también. Por ahora sin embargo, nos vamos a quedar con los hoteles. El siguiente video se trata de usar este modelo para crear nuestro add new hotel phone, para que podamos agregar nuevos hoteles a nuestra base de datos. 23. Creación de nuestro formulario de carga de hoteles: Antes de poder empujar nuevos hoteles a la base de datos, necesitamos crear un formulario HTML, para que podamos agregar los detalles que queremos ingresar. Esta parte formal de nuestra sección de administración. Entonces agreguemos esta ruta de administración primero en el index.js. Abre la barra lateral, en las rutas, y luego index.js. Voy a bajar al fondo de nuestro router sólo para la exportación. Hagamos un comentario, y diré “Vías ADMIN”. El primero que vamos a utilizar es router.get, ya que esta es una solicitud GET. Queremos que esto sea para las rutas de administración de barra delantera. Entonces queremos ejecutar nuestro HotelController, voy a llamarlo el AdminPage, punto y coma al final. Como podemos ver con el área roja abajo en la parte inferior, aún no tenemos este AdminPage en el control, por lo que éste debería ser el siguiente. Abre la barra lateral y ve a nuestro archivo hotelController.js, y luego podemos agregar esto justo en la parte inferior. Exportaciones hacia AdminPage, va a ser igual a nuestra función, que toma en los objetos de solicitud y respuesta. Entonces dentro del cuerpo de la función, lo que vamos a hacer es un res.render, esto va a renderizar una plantilla de admin, luego tomar un objeto de opciones donde pasaremos en el título como lo hemos hecho anteriormente. El título puede simplemente ser Admin, y luego agregar un punto y coma al final. Ahora para que el archivo admin.book muestre esto. Vamos a crear esta plantilla admin, abrir la barra lateral, en nuestra carpeta views, crear un nuevo archivo llamado admin con la extensión dot pug. Esta ruta de administración va a ser bastante sencilla. Por el momento todo lo que vamos a hacer es pasar el título y luego crear una lista desordenada. Esto va a tener algunos enlaces para que el administrador los utilice, como los enlaces a nuestro nuevo hotel, para editar o eliminar hoteles, y para ver cualquier tipo de reservas que se haya realizado. Ampliemos nuestro diseño. Extiende el diseño en la parte superior, y luego reemplaza el bloque de contenido. Sangrarlo un nivel podemos pasar en nuestro h2, que es el título. Entonces quieres separar este título con los enlaces con la línea horizontal. Estos tres enlaces van a ser una lista desordenada. El primer elemento de lista, anidado en el interior podemos agregar un a para un enlace con el href igual a barra hacia adelante admin, y luego reenviar barra inclinada agregar. Esta va a ser la ruta que va a manejar el add en nuevos hoteles a la base de datos. Los textos de Añadir nuevo hotel. Entonces haremos esto dos veces más. Nuestro segundo elemento de lista es también un enlace. Este href va a ir a forward slash admin y luego a forward slash edit dash remove. El texto de Editar barra hacia delante Eliminar Hotel. Volveremos a este más adelante cuando veamos la edición y eliminación de hoteles. El tercero de nuevo va a ser para más tarde también y este va a ser un enlace que va a enlazar con una ruta que es forward slash admin forward slash orders. El texto de Ver reservas y dar que un ahorro. Puedes probar si está funcionando yendo al navegador y luego revisando las rutas de administración de barra inclinada hacia adelante, y luego golpear y entrar. Si nos desplazamos hacia abajo, tenemos nuestro título de Admin, que se pasa a las plantillas y luego nuestros tres enlaces que acabamos de crear. Si seguimos adelante y hacemos clic en “Añadir nuevo hotel” en la parte superior, estamos llevados a reenviar slash admin forward slash add, que se configuró justo aquí. Esto da como resultado un error abajo en la parte inferior porque también necesitamos configurar esta ruta también, junto con una plantilla de página. Volver a nuestro archivo de router, que es index.js. Vamos a configurar esto con router.get. Este router era forward slash admin, forward slash add, para agregar un nuevo hotel, y luego configurar nuestro HotelController, y el nombre de la función de CreateHotelGet con un punto y coma al final. Puede que te estés preguntando por qué hemos llamado a este CreateHotelGet, en lugar de simplemente crear hotel. He agregado Obtener al final porque esta es una solicitud GET. Posteriormente también estará creando una solicitud POST a esta creación de ruta hotelera. Lo deja más claro cuando lleguemos a esa etapa. Esta es ahora nuestra ruta. Ahora podemos pasar al controlador para renderizar nuestra opinión. Demos click en “hotelController.js” abajo en la parte inferior. Vamos a configurar esto. Fue exports.createHotelGet configura nuestra función con los objetos de solicitud y respuesta. Esto simplemente va a renderizar una vista. Hacemos esto con res.render, igual que hicimos con el AdminPage. El template que vamos a crear va a ser add underscore hotel, y luego pasar en los objetos, que envía el título de Añadir nuevo hotel y un punto y coma al final. Al igual que nosotros este admin dos aún no hemos creado esta página add hotel. Ve a la barra lateral, ve a las vistas, y crea un nuevo archivo, llamado add underscore hotel con la extensión de punto plug. Ahora es un caso de hacer de esto un formulario, que se va a utilizar para enviar el hotel a nuestra base de datos. Esto necesita ampliar nuestro diseño, seleccionar todos los archivos y luego bloquear el contenido. Justo antes de que lleguemos a añadir nuestro formulario, voy a añadir un enlace en la parte superior de la página. Este enlace va a enlazar de nuevo a la sección de administración, por lo que podemos cambiar rápidamente entre el add new hotel y luego volver a nuestros tres enlaces principales. El enlace con el href es igual a barra hacia delante admin. Esto va a ser un botón. Podemos agregar un tipo de botón. Entonces tipo igual botón. Entonces también añadiremos una clase que vamos a estar usando más adelante cuando agreguemos algún CSS o botón subrayado pequeño. El texto se remonta a admin ya que es aquí donde se vincula esto. Entonces en la parte inferior pasamos en el título de nuestra página. Para mantener esto consistente vamos a sumar esto en un h2. Por lo que h2 es igual a título. Dale a esto un ahorro y comprueba si está funcionando. Refrescar barra hacia adelante admin, barra hacia adelante agregar. Debajo de la capa por lo que ahora podemos ver nuestro botón de back to admin, click en esto y luego nos llevan de vuelta a nuestros tres enlaces. Ya podemos volver a añadir nuevo hotel. Necesitamos crear nuestra forma ahora la cual va a tener todos los campos que necesitamos para nuestro hotel. Estos campos necesitan tanto de los datos dentro de nuestro modelo. Vamos a seguir adelante y crear nuestra forma debajo de la h2. El formulario y luego los atributos dentro de los corchetes, la acción. Esto va a enlazar a la misma página, para que podamos mantener las rutas con una cadena vacía. El método, esto va a ser una solicitud de post. Después sangrarlo en un nivel. Voy a crear un div que va a tener la clase de entrada de subrayado de forma. Cada uno de estos grupos de forma va a tener la misma clase. Podemos mantener el estilo consistente cuando lleguemos al CSS más adelante. El primero será etiquetado y esto va a ser por nombre de hotel. Entonces el nombre de subrayado del hotel, y luego el texto de nombre del hotel. Después de la etiqueta añadirá entonces nuestra entrada. Esta entrada va a tener el tipo de texto, el nombre de hotel_name. Como mencioné antes, estos campos necesitan coincidir con los datos de nuestro modelo. Si pasamos a nuestro hotel.js y empezaremos justo en la parte superior con el nombre del hotel. Esto necesita mucho nombre, que le dimos esto en nuestro esquema. Hotel_name. Entonces haremos lo mismo para la descripción y también para el resto de los campos dentro de aquí. Volver a nuestro formulario. También se requiere el nombre del hotel y este campo. El siguiente va a ser para la descripción. El div circundante de entrada de forma, la etiqueta. Este va a ser para la descripción del hotel. Entonces es la descripción del hotel x-naught. Esta vez más que una entrada, este va a ser un área de texto. Hacemos esta entrada, al igual que el resto de los elementos. Podemos agregar el nombre del área de textos, y luego agregamos los corchetes o los atributos. El nombre de hotel_description. El ID, que también es hotel_description y hagamos esto más pequeño para que todo encaje en una línea con el área de texto. También puede establecer el número predeterminado de columnas y también filas. Entonces voy a poner las columnas para ser 13 y también las filas para ser diez. Esto también se requiere, como todo el resto de los campos. Debajo de esta cosa, la próxima va a ser para la imagen del hotel. Entonces voy a seguir adelante y agregar el envoltorio que es insumos de forma, la etiqueta para la imagen, la imagen de foto textil. Esta vez va a ser una entrada para el archivo. Por lo que las entradas con el tipo de archivo, ya que estaremos usando imágenes cargadas desde la máquina del usuario. Por lo que el tipo de archivo, el nombre va a ser imagen junto con el ID. Vamos a seguir adelante y copiar este nombre de hotel. Entonces después de que la imagen avanza, ésta va a ser para la calificación estelar. Por lo que la etiqueta tendrá el nombre de star_rating y esta será una calificación estelar de uno a cinco. calificación de estrella para el nombre es tipo de entrada va a ser de número. Restringir esto de uno a cinco con el nombre de star_rating. Esto también se requiere. Vamos a mantener esto entre uno y cinco. También podemos agregar los atributos min de uno y también los atributos máximos de cinco. Vaya a debajo de la calificación de estrellas, podemos agregar esto de nuevo, asegúrese de que la sangría sea correcta. Este después de la calificación estelar va a ser para el país. Entonces el nombre de país, lo mismo para el texto. El tipo de entrada también va a ser texto. Entonces podemos nombrar a esto el nombre de país y también vamos a darle a esto una identificación de país también. Esto también se requiere. Lo mismo otra vez después del país. Este va a ser por el costo por noche. Por lo que la etiqueta va a ser para cost_per_night. Texto de costo por noche a, los insumos van a ser por precio. Por lo que podemos establecer que esto sea un número. El nombre también puede coincidir con esto, por lo que podemos copiar esto y pegarlo para las entradas. Entonces tenemos el tipo, el nombre, y también necesitamos la identificación de costo por noche también. Entonces agrega esto en y el siguiente después de esto, si bajamos hasta el fondo, va a ser por la disponibilidad. Entonces vamos a añadir algunos botones de radio. cual podemos seleccionar si el hotel está disponible o no está disponible. Por lo que el envoltorio de entradas de formulario va a tener dos botones de radio. El primero puede tener una etiqueta y esto es para disponible, el texto también está disponible. Entonces nuestra entrada, que es el tipo de radio. Después del tipo podemos agregar el ID y éste va a ser el mismo. Esto también necesita un nombre. Este es el tiempo de disponible. Estos son los datos que enviamos al servidor. El valor va a ser igual a verdadero y vamos a establecer el siguiente para que sea igual a falso. Por lo que si éste está comprobado, obtendremos el disponible igual a verdadero, y el siguiente estará disponible igual a falso. Por defecto, queremos que se verifique este verdadero. Por lo que también podemos agregar el atributo comprobado dentro ahí. Entonces solo tenemos que hacer lo mismo por no disponible para que podamos copiar estas dos líneas y luego añadirlas a continuación. Esto no está disponible como está el texto y luego la entrada. Podemos agregar, guardar el nombre, el valor de falso. También podemos eliminar este atributo comprobado porque solo queremos que se revise uno a la vez. Entonces ahora lo último que tenemos que hacer es un botón que va a seguir adelante y enviar este formulario. Esto puede tener el mismo envoltorio de entrada de formulario. Omita el estilo consistente. Esta vez este es un botón con el tipo de enviar, la clase, la clase que ya hemos usado antes de button_small. Esto mantendrá el CSS más consistente y luego en capital también vamos a agregar el texto del botón de Confirmar. Ahora podemos guardar esto y luego pasar a nuestro administrador. Asegúrate de que estamos en adelante/admin, hacia adelante /ads. Ahora deberíamos ver la forma de añadir nuevo hotel abajo en la parte inferior. Si has visto tu formulario sin errores, felicidades. En caso de que veas algún error, asegúrate de revisar tu código para detectar errores tipográficos. Antes de pasar al siguiente video, finalmente conseguiremos un empujón hotelero a nuestra base de datos 24. Envío a la base de datos: Ahora todos nos pusimos a trabajar empujando los datos del hotel a nuestra base de datos Mongo. En el último video, creamos una plantilla llamada Art_hotel. Este formulario está configurado para realizar una solicitud de post. Si vas a la parte superior, podemos ver que el método está configurado para publicar. Esto publicará nuestros datos de formulario para que podamos seguir adelante y usarlos en nuestro controlador. Además, la acción se establece en una cadena vacía, que podemos ver justo aquí. Esto publicará los datos del formulario a las rutas actuales, que es adelante/admin, adelante/add. Si pasamos a nuestras rutas e ingresamos al index.js, ya tenemos una solicitud get sobre esta ruta hacia adelante/add justo aquí para mostrar nuestro en nuevo formulario de hotel. Entonces duplicemos esta línea para crear una solicitud de post. Entonces copia esto y pega esto a continuación. Necesitamos que esto sea una solicitud de post ya que estamos tratando con una solicitud de post desde nuestro formulario. Entonces router.post, de nuevo podemos mantener este como adelante/admin, adelante/add porque esta es la ruta del archivo en la que vamos a estar publicando, ya que no hemos establecido nuestras y's en nuestra acción. Entonces como esta es una solicitud de post, podemos cambiar create hotel post, y este create hotel post middware manejará qué hacer cuando hagamos una solicitud de post a esta ruta, es decir, cuando enviemos el formulario. Vamos a configurar esto en el hotel controller.js bajo CreateHotelGet. Podemos hacer lo mismo para CreateHotelPost. Por lo que CreateHotelPost configura nuestra función con la solicitud y respuesta. Lo primero que voy a hacer aquí dentro es ver con qué datos estamos trabajando. Podemos ver qué datos se están enviando por el formulario usando res.json, así que pondré los datos como JSON, luego pasaré en la solicitud un cuerpo, y aquí es donde se almacenan los datos en nuestros objetos de búsqueda. Por lo que dentro de nuestra función en res.json y los datos del formulario se almacenan en el cuerpo de los objetos de solicitud así que pasan en request.body nos da un guardar y luego pasar al navegador, conseguir esa recarga. Ahora podemos llenar algunos datos de formulario para presentar. Eso es sólo agregar una prueba. Eso es un dato de prueba, elige una imagen, dentro de nuestro proyecto Travel, y luego la carpeta pública, las imágenes, y podemos elegir cualquier imagen de hotel. Entonces voy a seleccionar Hotel 1, una calificación por estrellas de tres, país, Portugal y cualquier precio está bien. Confirmamos, por lo que en cuanto golpeamos Confirmar, luego hacemos una solicitud de post desde este formulario. Esta solicitud de post se va a adelantar/Admin, adelantar/agregar. Nosotros configuramos esto dentro de nuestro index.js para manejar esta solicitud de post a esta ruta. Esto está activando entonces a nuestro controlador de hotel, que luego está devolviendo nuestro JSON ya que estamos haciendo res.json y luego pasó en el request.body, que almacena los datos que se envían por el formulario. Por lo que ahora podemos ver la versión JSON de nuestro hotel la cual acabamos de agregar. Podemos ver estos datos están configurados en el mismo formato que nuestro modelo. Esto nos da una mejor idea de los datos con los que ahora estamos trabajando. Este formulario se ha configurado para ser el mismo nuestro modelo por lo que los datos están en el formato correcto. Ahora sabemos que tenemos un objeto para nuestro hotel almacenado en request.body. Usaremos estos datos en nuestro modelo para empujar a la base de datos? Por lo que necesitamos requerir primero nuestro modelo de hotel, el archivo de nivel superior. Por lo que de vuelta al controlador del hotel, y en la parte superior, podemos armar una constante llamada Hotel con H mayúscula, y esto requerirá de los modelos. Entonces como una cadena cuando está pasando la ruta del archivo, así vamos a subir a la carpeta de nuestra modelo, y luego el nombre de la modelo era Hotel. Podemos entonces usar este modelo de Hotel abajo en CreateHotelPost. Entonces vamos a configurar un nuevo Hotel, pasar los datos de request.body, el cual hemos visto es el objeto que contiene todos los campos de nuestro formulario. Se instalan es dentro de una variable o una constante. Por lo que const hotel iguala a nuestro nuevo Hotel. Por lo que ahora tenemos nuestro hotel y podemos seguir adelante y llamar seguro. Pero una cosa primero, voy a marcar esta función como asíncrona. Justo después de los iguales, podemos marcar esta función como una función asíncrona. Esto es algo que es nuevo en ES 2017 llamado async await. Realmente hace que nuestras vidas sean mucho más fáciles cuando se trabaja con código asíncrono. Lo que básicamente nos permite hacer es pausar una función hasta que una línea de código haya terminado de ejecutarse. En primer lugar, marcamos la función asíncrona, al igual que hicimos ahí, y luego la siguiente tarea que tiene nuestra función, es llamar a save para decir esto a nuestra base de datos. Hacemos esto con nuestra constante de hotel y luego llamar.save. Con el ahorro, sin embargo, queremos asegurarnos de que el hotel haya terminado ahorrar antes de poder empezar a hacer las cosas con él. Para ello, podemos agregar una espera antes de nuestro hotel.save, agregando una espera antes de esta línea. Nos aseguraremos de que este código se detenga y luego esperaremos a que esto termine antes de pasar a la siguiente línea. El motivo por el que queremos asegurarnos de que esperamos el ahorro del hotel antes de seguir adelante es porque vamos a asumir nuevos datos de este hotel inmediatamente después del guardado. Por lo que queremos asegurarnos de que el guardado se haya completado, está disponible antes de llamar a cualquier más líneas de código que necesiten estos datos de hotel. Entonces si damos esto para guardar y luego pasar al navegador, le da a esto una recarga y vuelve a enviar el formulario, luego volver a mLab e iniciar sesión en base de datos. Entonces vamos a añadir en nuestros detalles de usuario. Una vez que nuestra base de datos se carga, ahora podemos ver en colecciones Java tenemos la colección hotelera, que ahora tiene uno documentos. Si hacemos click en junto para expandirnos, entonces nos llevan a nuestra prueba, que son los datos que acabamos de presentar. Este es un gran paso porque ahora hemos guardado nuestro hotel en la base de datos. Pero ¿y si hay un error al salvar el hotel? Necesitamos agregar algo dentro de nuestro controlador para manejar cualquier error. En primer lugar, podemos envolver el código dentro del bloque try. Por lo que de vuelta a CreateHotelPost, podemos agregar try y luego mover estas dos líneas dentro de este bloque try. Esto intentará ejecutar el código dentro y probar cualquier error. Si hay algún error, podemos manejarlos con unas declaraciones catch. Hacemos esto al final, atrapamos, pasamos el error, y luego dentro de aquí llamamos siguiente, que también toma en el error. Llamando a continuación, estoy pasando en la era, pasará el error a lo largo de la cadena de medio-ware hasta que llegue a un manejador de errores que pueda manejarlo correctamente. Recuerde, ya tenemos manejadores de errores configurados con el framework express dentro de nuestro app.js, que está abajo en la parte inferior aquí. Por lo que volver a nuestro controlador para que esto siguiente funcione correctamente, también necesitamos pasar en siguiente después de los objetos de solicitud y respuesta. Por lo que pasando aquí siguiente ya que ahora lo estamos usando dentro de nuestra función. Si nos dirigimos a mLab, dentro del navegador, podemos mirar nuestro hotel. Si hacemos click en esta esquina y luego arrastramos esto hacia abajo. Si notamos, dentro de este hotel que acabamos de agregar, se ha añadido un ID único con el campo de ID de subrayado, que está justo aquí. Recuerda de antes, dijimos que queríamos usar la espera para esperar en el hotel guardando esta base de datos antes de seguir adelante. Asegurarse de que el hotel se haya guardado con éxito significa que ahora tenemos esta identificación disponible antes de pasar a la siguiente línea de código. Esto sólo porque ahora quiero redirigir al hotel una vez que se haya guardado. Podemos hacer esto dentro de nuestro controlador con res.redirect. Después pasando la ruta de archivo al que queremos ir, voy a usar los ticks de atrás ya que vamos a agregar algunos datos dinámicos. Entonces adelante/todo, y luego adelante/. Podemos pasar en el símbolo $ y nuestros tirantes rizados. Esto es algo que miramos temprano en la sección de JavaScript. Por lo que dentro de aquí podemos pasar en una variable. Entonces podemos acceder a nuestro objeto de hotel, que está justo aquí, y luego al campo que es subrayado ID, y esta es la idea que se había agregado dentro de nuestra base de datos justo aquí. Agrega un punto y coma al final. Ahora vamos a comprobar que esto está funcionando bien agregando un nuevo hotel. Entonces vamos a adelantar/Admin adelante/agregar, recargar la página. Digamos prueba 2. Prueba 2 para la descripción, cualquier imagen es de cinco aquí. A continuación haz clic en Confirmar. Ahora estamos redirigidos a nuestra ruta, que nos fijamos justo aquí, que será adelante/todo, y luego el ID del hotel. Ahora podemos ver esto en la barra de URL en la parte superior. Tenemos nuestra identificación única, que ahora es sacada de la base de datos porque esperamos que este hotel se creara primero antes de pasar al redireccionamiento. Si nos desplazamos hacia abajo, vemos un error de Not Found. Esto está bien porque sabemos que aún no hemos creado esta ruta, pero lo principal es que tenemos este ID único ahora cualquiera en la URL. Volveremos a esto más adelante cuando creemos una plantilla para mostrar el detalle completo del hotel. Este es un gran paso adelante ahora, guardamos en la base de datos. Entonces felicitaciones, si ahora tienen esto funcionando. Si no lo haces, asegúrate de revisar tu código y echa un vistazo al código terminado proporcionado o pregunta en las secciones de preguntas y respuestas antes de pasar al siguiente video. 25. Consulta a la base de datos: Antes de ver cómo obtener nuestros datos de la base de datos o de una consulta, primero necesitamos agregar algunos datos más para volver. Si vas a mLab y si tienes alguno de estos datos de prueba entrando en su lugar, podemos eliminarlo con el ícono de bin en el lado derecho. Quiero borrar todos los registros en nuestra base de datos y asegurarme de que se hayan ido todos. Sigamos adelante y creemos cinco nuevos hoteles con los que trabajar. Podemos hacer esto si vamos a admin, así votar/admin/vote/add y luego bajamos a [inaudible] en la parte inferior. El primero quiero llamar a este Hotel 1 y por supuesto con un nombre más creativo si lo prefieres. Voy a agarrar algunos textos de Ipsum [inaudibles] para agregar para la descripción. Bajemos y creemos dos párrafos. Genera, Copia el texto de muestra y Pega en nuestra área de texto. La imagen del hotel para Hotel 1 luego selecciona esta. El rating estelar puede ser de cuatro, país Jamaica. Costo por noche, ahora podemos dejar esto como disponible. Ahora lo redirigimos al hotel. Tenemos que volver a nuestro admin/add. Crear Hotel 2. Pegue en la descripción la imagen de Hotel 2. Entonces una calificación estelar irá para cinco, país de República Dominicana. Costos por noche, agregue algo ahí y confirme. Deberían ser dos hoteles ahora en nuestra base de datos si golpeamos a Reload, y ahí estamos. Añadamos tres más. Nuevamente, /admin/adds. Podemos agregar hotel número tres, agrega la descripción hotel3.jpg. A star rating vamos por tres esta vez y Holanda. Costo por noche, diga 45 y luego confirme. Entonces podemos agregar Hotel 4, agrega admin. Después hacia abajo Hotel 4 Pega en la descripción la imagen. El rating estelar irá por cinco esta vez y el país de las Maldivas. Costo por noche, vamos por 89. Déjame algo de cómo hacer que esto no esté disponible. Parece que tuvimos un pequeño problema ahí en realidad, tenemos ambos revisados. Vayamos a nuestro formulario, agregamos hotel y bajamos a las casillas de verificación o a los botones de radio. Perdón. Estas necesidades tienen el mismo nombre, ellas demasiado en el mismo grupo, intentemos recargar. No obstante, ahora sólo podemos seleccionar uno de estos. Pasemos a la base de datos. Ahora, tenemos todas estas disponibles como verdaderas. Simplemente voy a entrar en cualquiera de estos y dar clic en el botón de edición. Estableceremos la disponibilidad en esta ocasión para que sea falsa. Es Guardar y volver. Porque ahora tengo el hotel número tres para ser puesto en falso. Añadamos uno más que es el Hotel 5. La descripción Hotel 5 imagen. El rating estelar dejó ir para dos esta vez. El país de Grecia, costo por noche y podemos mantener éste como disponible. Ahora, más en mLab ahora deberíamos tener cinco registros con uno de estos no disponible, que se dice es el Hotel número tres. Agregaremos el resto del hotel más adelante. Pero ahora tenemos algunos datos con los que trabajar. Te voy a mostrar cómo meterlo en nuestra aplicación dentro del hotelController.js. Seleccionemos esto y luego podremos volver a nuestra lista todos los hoteles funcionan. Si nos desplazamos hacia arriba, tenemos la lista todos los hoteles justo aquí. Devolver todos los datos en nuestra base de datos es bastante fácil usando Mongos find method. Antes de renderizar todos los hoteles, vamos a crear una constante llamada todos los hoteles y voy a poner esto para que esté a la espera porque queremos que estos datos sean sacados antes de la plantilla de renderizado. Queremos seleccionar nuestro modelo de hotel y luego utilizar el método dot find y un punto y coma al final. El método de búsqueda encontrará todos los documentos de nuestra colección hotelera y también buscará la colección hotelera porque estamos usando el modelo hotelero justo aquí. Aquí ya que estamos usando await una vez más, también necesitamos marcar esta función como una sincronización para que funcione. Agrega sync justo antes de nuestros parámetros de función, también queremos manejar cualquier error nuevamente dos para que podamos envolver este código en un bloque try. Cortemos todas estas dos líneas de código, agreguemos un bloque try, peguemos este back-in, seguido de un bloque catch para manejar cualquier error. Este bloque de captura también toma los errores como argumento y luego también podemos pasar estos a siguiente. Ya que ahora llamamos siguiente, también necesitamos pasar esto a la función. Nuestro siguiente como tercer argumento y antes de seguir adelante deberíamos comprobar esto está funcionando. Podemos comentar este res.render que tenemos arriba y en su lugar reemplazarlo por un res.json. Esto agregará los datos a la pantalla en formato JSON. El dato que quieren dar salida son todos hoteles, que es esta constante justo aquí. Entonces guarde esto. Después tenemos que ir al navegador, y luego ir a /all hit, “Enter” y ahora vemos todos nuestros hoteles en formato JSON. Estos son todos los datos que ahora sacamos de la base de datos. Esto parece que todo nuestro Hotel está siendo devuelto. Podemos ver todos nuestros campos incluyendo el ID generado. Ahora, sabemos que esto está funcionando podemos entonces pasar estos datos a nuestra plantilla de página para seguir adelante y renderizar. Volver al controlador. Comentemos el res.json y descomentemos este método de render. par de renderizarla, las plantillas de todos los hoteles y pasar por el título, también queremos pasar en este hotel datos de todos los hoteles. Separados por una coma, también podemos pasar en todos los hoteles y esto ahora estará disponible para su uso en las plantillas. Si le das a esto un ahorro y luego pasas a las plantillas de todos los hoteles, que está en vistas. Abramos esto. Probemos esto trabajando seleccionando elementos p y enviemos esto al valor de todos los hoteles. Dale a eso un ahorro. Después al navegador, podemos recargar las /todas las rutas. Está bien y desplácese hacia abajo. Ahora vemos un objeto gigante en la pantalla. Se trata de todos los datos que ahora se extraen de la base de datos. Podemos ver si miramos de cerca, tenemos el hotel uno, y luego si vamos más allá, tenemos el hotel dos justo aquí, y luego el hotel tres más abajo. Esta es toda la información de nuestra colección de hoteles. También podemos filtrar esto hacia abajo si solo queremos el primer hotel, por ejemplo. Podríamos seleccionarlo por el número de índice. Todos los hoteles, el número índice de cero, recargar. Esos son todos los datos de nuestro primer hotel. Aún más, podemos reducir esto al nombre del hotel. Recuerda, el nombre del hotel se almacena en el nombre del subrayado del hotel, por lo que podemos acceder a él usando la notación de puntos, por lo que el nombre del hotel. Ahí vamos. Ahí está nuestro hotel un nombre. Ahora tenemos acceso a todos estos datos hoteleros. Necesitamos vivir a través de todos los hoteles y mostrar cada uno en este hotel mix-in. Ya tenemos el hotel mix-in justo aquí. Una vez que creas un bucle que muestra este mix-in con toda la información del hotel. Elimina este elemento p de aquí. Podemos sumar nuestro rubro de nivel dos, que es el título. Entonces después de esto, queremos crear nuestro bucle, y lo haremos con cada hotel en todos los hoteles, después sangrar ambas líneas. Todos los hoteles son los datos que se pasarán a la plantilla con toda la información del hotel uno al cinco. Cada hotel individual se almacenará en esta variable hotelera. Ahora si guardamos esto y luego recargamos la barra delantera todas las rutas y luego nos desplazamos hacia abajo, vemos que tenemos hotel número uno. Si seguimos bajando, deberíamos tener uno de hotel para cada uno de los artículos en nuestra base de datos. Esto ahora se repite el mismo hotel en nuestro mix-in para cada artículo. Este es un paso en la dirección correcta porque ahora tenemos cinco elementos en la pantalla, pero queremos que cada hotel sea diferente. Para ello, necesitamos una forma de pasar los datos únicos del hotel al mix-in. Recuerda dijimos, antes de que esta variable hotelera aquí contiene la información individual del hotel, por lo que esta es la información que necesitamos pasar al mix-in. Podemos hacer esto con nuestro mix-in justo aquí y pasar en el hotel. Esto funciona porque mix-ins se compilan a funciones que pueden tomar argumentos. Si guardamos esto y luego pasamos a los datos de nuestro hotel en nuestro mix-in, abajo a mix-ins entonces subrayamos hotel hasta nuestro nombre mix-in en la parte superior. También podemos recibir estos datos de hotel, por lo que pasar hotel como argumento, y ahora tenemos los datos individuales de hotel dentro de este mix-in. Aquí es donde comienza a suceder la buena parte. Empecemos mostrando el nombre del hotel. Desplázate hacia abajo hasta nuestro nivel tres rumbo. Aquí tenemos algún texto codificado porque esta es una variable que agregamos a los iguales, accedemos al hotel, y luego dot nombre de subrayado del hotel. Si guardamos esto y luego recargamos el navegador, de nuevo arriba, tenemos hotel uno, hotel dos, hotel tres, cuatro, y cinco. Ahora vemos que todos los nombres de hoteles son únicos. Ahora podemos seguir adelante con el resto de los detalles haciéndolos todos dinámicos. A continuación, podemos agregar los datos de los dos enlaces. El href justo aquí arriba, vamos a cambiar esto para que sea de vuelta garrapatas porque esto será dinámico. Esto va a enlazar con la vista completa del hotel, que va a ser nuestra barra hacia adelante todo. Entonces podemos añadir nuestra sección dinámica, que es hotel. _id Nos ocuparemos de esta ruta más adelante. También haremos lo mismo para el siguiente enlace. Copia esto y pegarlo para el segundo enlace. Tener estos dos enlaces significa que tanto la imagen como también el nombre del hotel enlazarán a la vista completa del hotel cuando el usuario haga clic en cualquiera de estos. Entonces podemos ocuparnos de la ruta del archivo para la imagen. Por el momento, sólo tenemos la imagen hotel uno duro codificado aquí dentro. Cambiemos esto para que sea de vuelta ticks hacia adelante imágenes de barra inclinada, la carpeta del hotel dentro de las imágenes, y luego barra hacia adelante podemos abrir las llaves y luego agregar imagen de punto de hotel. Dentro de nuestra base de datos para la imagen, estas imágenes se guardan. Si echamos un vistazo, por ejemplo, la imagen aquí se guarda como hotel2.jpg. Si pasamos a Visual Studio y luego a público y luego a imágenes dentro de los hoteles, este nombre coincidirá con el nombre de las imágenes que tendremos aquí dentro. Ahora si guardamos esto y luego recargamos el navegador, ahora deberíamos ver la imagen única de cada hotel. Volveremos a las imágenes más adelante porque vamos a estar usando Cloud Storage para subir imágenes en lugar de almacenarlas en nuestro propio proyecto. Ahora volvamos hacia atrás y acabemos con el resto de estos datos dinámicos. Los elementos p son el fondo, pero también ahora van a ser dinámicos. Tenemos que rodear esto en garrapatas traseras, cambiar la estrella. En lugar de tener el valor codificado de cuatro, podemos volver a pasar nuestros datos dinámicos. Hotel y luego el nombre del campo, que es calificación de subrayado estrella. Lo mismo para nuestro país. Podemos rodear esto en garrapatas traseras, reemplazar el país codificado por hotel dot country. El costo por noche. En primer lugar, podemos agregar un símbolo de moneda y luego un espacio para crear nuestros datos dinámicos. Hotel.COST_PER_NOCHE. Vayamos al navegador y veamos cómo se ve esto. Refresca nuestras rutas de todos los hoteles y consulta estas todas las diferencias. Tenemos cuatro, Jamaica, y 67. Después tenemos a la dominicana, Holanda, y también a las Maldivas con diferentes calificaciones de estrellas y precios también. Excelente. Ahora deberías estar viendo todos los datos de tu hotel desde la base de datos. También te puede estar preguntando dónde tenemos la descripción del hotel, bueno vamos a añadir esto de nuevo en más adelante porque esto solo se muestra en la vista completa de detalle del hotel donde tenemos más espacio disponible. Hay un pequeño problema aquí sin embargo. El problema es que también podemos ver hotel tres. Si nos desplazamos hacia abajo hasta el hotel tres justo aquí, recuerda que pusimos este hotel tres para que no esté disponible cuando lo creamos por primera vez. Esto es bastante fácil de resolver. Todo lo que necesitamos hacer en lugar de solo usar el método find, también podemos pasar en una consulta. Volver al controlador del hotel y para enumerar todos los hoteles. Dentro de este método de hallazgo que tenemos aquí, podemos comenzar por pasar un objeto, y luego podemos seleccionar los campos disponibles de nuestra base de datos. Ahora sólo queremos encontrar hoteles que tengan este campo establecido en verdad. Podemos hacer esto con el símbolo $ eq y ponerlo en true. $ sign eq es un operador de consulta MongoDB que comprueba la igualdad. Básicamente, sólo se devolverán entonces los hoteles con el campo de disponible. Ahora si guardamos esto y luego recargamos, ahora hotel cuatro, y luego salta al hotel dos. Parece que ahora el hotel tres no está siendo sacado de la base de datos porque no coincide con nuestra consulta. Bien. Ahora todo esto está funcionando. Vamos a seguir sacando datos de nuestra base de datos en el próximo video donde estaremos consiguiendo nuestros hoteles basados en el país. 26. Valores distintos: Si nos dirigimos a mongodb.com, que es una página de inicio para nuestra base de datos. Arriba en la parte superior, podemos ver un enlace a la documentación. Esta documentación nos va a dar toda la información que necesitamos para consultar nuestra base de datos. En el lado izquierdo, si hacemos click en empezar. Aquí, podemos encontrar una referencia completa a todos los comandos de base de datos, que estamos utilizando en este curso, junto con muchos otros. Abajo en la parte inferior tenemos una sección de referencia. Haga clic en esto, y luego vaya a comandos de base de datos. Esto nos dará una lista de diferentes métodos que tenemos disponibles. Desplazemos hacia abajo hasta los comandos de uso. Debajo de aquí tenemos un método de hallazgo. Si nos desplazamos hacia abajo hasta la consulta y escribimos comandos de operación, tienes este fino método que utilizamos en el último video para obtener todos nuestros hoteles. El siguiente que estará cubriendo en este curso es distinto y este comando está cerca de la cima. Tenemos esto justo aquí. Para este proyecto, necesitamos obtener una lista de los países disponibles que tienen hoteles ubicados en. Podríamos tener múltiples hoteles con la misma ley de consulta. Por ejemplo, podríamos tener seis hoteles ubicados en México y no queremos que la palabra México aparezca seis veces en la lista de nuestro país. Distintos nos permitirá devolver una matriz de sólo los países distintivos, lo que significa que el único México aparecerá una vez de nuestro ejemplo. Empecemos por crear las plantillas de todos los países para esta página. Abre la barra lateral, vamos a cerrar algunas de estas. Cierro esto hacia abajo. Si vamos a las vistas, podemos crear un nuevo archivo dentro de aquí llamado, all_countries con la extensión.pug. Seguimos adelante y agregamos nuestro código básico; extiende el diseño, y luego el contenido del bloque, el h2 de título. Después siguiente parada, podemos agregar la ruta al índice del archivo JS. Acude a nuestro índice dentro de la carpeta de rutas, abre esto, y luego después de la "/all route”, vamos a agregar router.get. Esto tienes que manejar las rutas /countries, el hotelcontroller, y esta vez vamos a configurar una función llamada ListAllCountries, agrega el punto y coma al final. Aún no hemos creado listas todos los países. Entonces, dirígete al archivo del controlador del hotel y luego podemos agregarlo. Abramos esto. Después de una lista todos los hoteles vamos a añadir exports.ListallCountries. Configurar nuestra función. Voy a marcar esto como asíncrono, porque vamos a necesitar una espera dentro de aquí. Podemos pasar en nuestra solicitud, nuestra respuesta, y también siguiente. Después agrega nuestro bloque try, intenta ejecutar el código, seguido de nuestra captura, que va a tomar cualquier error y luego pasarlos al siguiente. Hacer mi error sin s. El código dentro del bloque try será bastante similar a los todos los hoteles anteriores. Empezamos por crear una constante en la que almacenar nuestros datos. Voy a llamar a esto constante a todos los países. Esta vez ahora seleccionamos nuestro modelo de hotel, así que establece esto igual al Hotel capital H. En lugar del método find que utilizamos antes, esta ocasión usamos.distinto entonces para devolver una matriz de países distintos, podemos pasar en el campo country como un string, y luego bajo esto podemos renderizar nuestras plantillas con res.render. El template que queremos añadir es el que acabamos de crear de todos los países de subrayado. Separados por coma podemos pasar en nuestro título. Camino al texto de, navega por país, hago este poco más pequeño, entonces podemos pasar en nuestros datos de todos los países, que configuramos aquí. Asegúrate de que esto esté disponible para usarlo dentro de nuestra plantilla. Una vez hecho esto, pulsa guardar y luego ve al navegador, abre nuestros proyectos, luego podemos ir a /countries, y luego desplázate hacia abajo, y veremos el título de la página de navegar por país. Sólo vemos este título de página, porque esto es todo lo que tenemos actualmente configurada en la plantilla. Vamos a todos los países.pug, y arreglemos esto agregando los datos de todos los países. cual ahora pasamos a la plantilla. Voy a empezar con una envoltura si, igual que hicimos con los hoteles. Esto se va a llamar envoltorio de país, luego crea una lista desordenada para mostrar la lista de todos los países. Para conseguir todos estos países, necesitamos recorrer esto todos los datos de los países, que pasarán a esta plantilla. Podemos hacer esto con un bucle, por lo que cada país en todos los países, cree un ítem de lista, que también va a ser un enlace. Pase en la href. Esto va a ser igual a nuestra espalda toma, y luego /países/, entonces podemos agregar nuestro nombre dinámico de país. Entonces estos son el país dentro de aquí, que es esta variable individual que recorremos. Podemos entonces dar salida a nuestro nombre de país. Y podemos hacer esto dinámico usando el # y luego el {}, luego dar salida al país. Si no hay países disponibles dentro de la base de datos, entonces podemos dar seguimiento con un bloque else. Apenas en el mismo nivel que cada uno, podemos agregar más, que pondré un ítem de lista con el texto de, no hay países. Ahora si guardamos este archivo y luego pasamos a nuestros Proyectos y luego recargamos nuestras rutas hacia adelante/países. Después desplázate hacia abajo. No vemos del todo la información que estamos esperando. Estábamos esperando una lista de países. Nuevamente, un montón de extraño buscando código abajo. El motivo por el que esto está sucediendo es porque no estamos esperando que nuestros datos vuelvan antes de que intentemos renderizar esto a la pantalla. Este es uno de los problemas que mencionamos antes, porque estamos usando un solo peso, necesitamos esperar nuestros datos para volver de la base de datos antes de intentar usarlos en nuestra aplicación. Si volvemos al controlador del hotel y a la lista todos los países, tenemos esta función marcada como un fregadero, pero no estamos esperando que el valor hotel.distinto sea devuelto de la base de datos antes de pasarlo a nuestras plantillas. Ojalá ahora si guardamos esto y luego recargamos, ahora obtenemos lista de países que se muestran. Si hacemos clic en uno de estos, estamos entonces lo lleva a nuestra ruta de países, hacia adelante slash y luego Jamaica. Tenemos un error abajo porque todavía no nos manejan esta ruta. Probemos otro para los Países Bajos. Todos estos parecen estar funcionando. También se vería bien, junto con este nombre de país si también podemos poner en una imagen relacionada con este país. Ya tenemos las imágenes del país, las cuales se almacenan dentro de nuestra carpeta Imágenes. Imágenes públicas. Después tenemos algunos países con imágenes abajo. Adelante y hagamos uso de estas imágenes en nuestras plantillas. Entonces justo debajo de nuestro enlace, pasa a la siguiente línea. Entonces podemos establecer una indencia de imagen en un nivel. Esto también enlaza con la misma ruta anterior. Si la imagen necesita una fuente, ¿va a ser igual a o atrás ticks, la carpeta adelante/imágenes, la carpeta del país. Entonces podemos agregar en el nombre del país, que es simplemente país. Entonces necesitamos agregar la extensión the.jpg al final. Si ahorita guardamos esto y luego pasamos a nuestras rutas hacia adelante/países, recarga. Parece que estamos escribiendo errores. Entonces echemos un vistazo a esto. Es solo porque hemos agregado un punto y coma en nuestras plantillas, que no usamos en pug. Refrescar. Ahí están nuestras imágenes de país junto al nombre. Por el momento, esto parece que ahora todos están funcionando pero por el momento aunque no podemos estar demasiado seguros. Esto se debe a que sólo tenemos un hotel en cada uno de estos países. Por lo que no sabemos si está mostrando un valor distinto todavía. Podemos probar esto agregando pequeños hoteles a nuestra base de datos. Sé que es un poco repetitivo, pero ahora sigamos adelante y sumamos el resto de nuestros hoteles. Entonces podemos usar esto para el resto del proyecto. Vamos a adelante/admin, adelante/sumar, abajo al fondo, voy a añadir hotel número 6 y luego recortar el Lorem Ipsum. Ve a lipsum.com, voy a crear dos párrafos y luego presionar “Generar”. Copia esto y pega en nuestra descripción. El Hotel 6 tiene la imagen, las tarifas de estrellas en este tiempo de cuatro, el país, Sri Lanka, los costos, 57. Este cono también puede estar disponible. Admin/add, Hotel 7. Agrega la descripción y la imagen. El rating estelar de cinco, el país de EUA, 78. Mantén esto como esté disponible. Volver a nuestras rutas de administración. Crear hotel 8. Voy a subir al hotel 12 a mucho todas las imágenes que se han proporcionado con el curso. Así que agrega esto en y hotel 8, la calificación por estrellas, el país de Maldivas y la disponibilidad como verdadera. Ahora podemos ver que ya tenemos más de un hotel en las Maldivas. Volver al adelante/admin, adelante/agregar. Hotel 9. En base a una descripción. Esta puede ser una calificación estelar de cuatro. El país de México. Costo por noche. Confirmar. Ya lo necesitamos, vamos a pasar a la admin agrega y crea el número 10. [inaudible] cuatro, hotel número 10, la descripción y también la imagen que es el número 10 también. Abre esto, la calificación estelar de tres. Vayamos de nuevo por México. Ten un precio y luego pulsa “Confirmar”. Agrega Admin, hotel 11. El rating estelar, vamos por cuatro, el país de Tailandia, cuesta por noche, 39. Confirmar. Por último, podemos sumar el hotel número 12, que es el último. Sonidos en la parte inferior. Hotel 12. El rating estelar de tres, República Dominicana, 56 y golpeó “Confirmar”. Genial. Ahora más de dos mLab ya podemos refrescar. Sé que esto es un poco aburrido y repetitivo. Pero ahora tenemos los 12 hoteles ahora en la base de datos. Por lo que tenemos mucha información con la que trabajar ahora en nuestros proyectos. Por lo que he proporcionado 12 imágenes. Por supuesto puedes añadir más hoteles, si lo prefieres. Actualmente hay más de un hotel ubicado en las Maldivas, México, y también en la República Dominicana. Ahora si pasamos a adelante/países y luego pulsamos “Enter”, desplácese hacia abajo. Ya podemos ver todos los países extra que hemos agregado. Sólo hay uno de cada volumen. Entonces sólo hay un México, una República Dominicana, y también una Maldivas, lo que significa que con valores distintos ahora están tirando correctamente. Ahora vamos a pasar a mirar los ductos de agregación. 27. El proceso de agregación: El ducto de agregación es una característica interesante de MongoDB. Básicamente nos permite procesar datos de una etapa a la vez. Actualmente, sólo documentación de Mongo de antes. Si vamos al menú de la izquierda, podemos subir a la sección de agregación, dar click en esto. Si nos desplazamos hacia abajo, vemos un diagrama que tiene un ejemplo de cómo podemos utilizar el ducto de agregación en nuestros proyectos. En este ejemplo se utiliza una colección llamada órdenes, que podemos ver aquí. Su comparable a nuestra selección de hoteles, que tenemos en nuestra base de datos. Esta imagen muestra etapas libres de la tubería lo que da como resultado los datos que eventualmente queremos sobre el lado derecho. Cada etapa de la operación podría hacer cosas como filtrar, agrupar, o ordenar documentos hasta que terminemos con los datos correctos. En la primera etapa de este ejemplo aquí se muestran cuatro registros dentro de nuestra colección. Entonces establecemos un escenario coincidente, entonces declaramos que sólo queremos emparejar cualquier documento con el código de estrellas de A. Sobre sobre el lado izquierdo, vemos la única libertad de este código A, y el último tiene D. Por lo tanto, sólo tres de estos cuatro documentos pueden coincidir, entonces estos tres pasan a la siguiente etapa, que está en medio de este diagrama. Las etapas se agrupan por el ID del cliente, que establecemos aquí con la fase de grupos, donde estamos agrupando con un campo ID. Estos dos tienen el mismo ID de cliente. Por lo tanto, estos se agrupan en los mismos resultados. Entonces el tercero también es único. Ahora filtramos a dos resultados. La segunda parte de esta etapa es agrupar el monto total de estos dos pedidos que el mismo cliente ha realizado. Esto es lo que vemos en el total de la etapa final. Para saber más sobre lo que podemos hacer por cada una de estas etapas, podemos hacer clic en la barra lateral y bajar a la referencia de agregación, después de la tubería de agregación referencia rápida, luego desplazarnos hacia abajo. Aquí, vemos una lista de todas las etapas que podemos utilizar. Ya hemos visto algunos de estos en los ejemplos anteriores, como la fase de grupos. Tenemos grupo justo aquí, y también desplazándose más hacia abajo. Esta es la etapa de partidos que también hemos visto. Puedes hacer click en cualquiera de estas etapas enumeradas y averiguar qué hace cada una. O voy a correr por algunos de estos ejemplos ahora, dentro de nuestros proyectos. Si pasamos al archivo controller.js del hotel, tenemos funciones para conseguir todos los hoteles y todos los países en la base de datos. Cuál de estos dos justo aquí, pero y si queremos ser un poco más específicos sobre los datos que nos dieron de vuelta en la página de inicio. También quiero mostrar estos hoteles ambos limitan los resultados a ser apenas nueve para que no tengamos una página de inicio abarrotada. Una vez que nuestra base de datos almacena muchos más registros diferentes. También lo mismo para los países también. Para estos podemos utilizar el ducto de agregación para filtrar estos resultados para la página de inicio. Vamos a crear algunos filtros para filtrar estos valores. exports.home, voy a llamar a esta función los filtros de la página de inicio. Configuramos esto como una función asíncrona para que podamos usar await, pasar en la solicitud, la respuesta, y también siguiente. Después un bloque try-catch para manejar cualquier error, pasando el error. Entonces llama a siguiente con este error. Primero tratemos de filtrar los hoteles dentro del bloque try en la parte superior. Podemos utilizar el método de agregación. En primer lugar, pongamos una constante para mantener en estos hoteles. Const hoteles iguales espera a nuestro modelo de hotel. Entonces llamamos a un método en nuestro modelo de hotel, igual que hicimos arriba con distinto y también para el método de hallazgo. Pero esta vez ahora usamos hotel.agregados con punto y coma al final. Esto toma en una matriz de las diversas etapas. Añade aquí una matriz vacía. La primera etapa que voy a utilizar es la etapa de partidos. Abre los tirantes rizados, $ símbolo match. Entonces queremos igualar los hoteles que están disponibles. Establezca los campos disponibles para que sean verdaderos y, a continuación, agregue una coma el final. Siguiente paso, para que la página de inicio no se ponga demasiado lleno. El $ signo muestra etapa. Seleccionará aleatoriamente el número de documentos que especificamos. $ muestra de signo, podemos establecer este tamaño de muestra para que solo devuelva nueve documentos. Por supuesto puedes cambiar esto para que sea cualquier valor que prefieras. Esta agregación que configuramos regresará hacia nueve hoteles aleatorios, los cuales tienen su disponibilidad establecida en dos. Ahora podemos hacer algo similar con los países. También solo queremos mostrar nueve países aleatorios en la página de inicio también. igual que antes cuando estábamos tratando con países, esto necesita de nuevo, sólo volver a cada país una vez. Aunque haya más de un hotel por país. Para ello, tenemos la fase de grupos. Vamos a configurar una constante numérica esta vez llamada países, pongamos esto para que sea hotel. agregado, pasando nuestra matriz. El primero va a ser la fase de grupos, $ symbol group. Cuando estamos usando la fase de grupos, también necesitamos pasar un ID con -id es igual para generar nuestros documentos con un campo ID que contenga el grupo distinto por una clave. Este campo es obligatorio y vamos a agruparlo por un nombre clave de $ symbol country. Esto agrupará todos nuestros hoteles por su país y luego separados por una coma. Podemos volver a configurar nuestra muestra, la muestra, al igual que los hoteles van a devolver el tamaño de muestra de nueve países. El escenario de grupos tomará en todos los países como insumo, entonces pondré un valor distinto. Por ejemplo, si hay dos hoteles en USA, solo obtenemos el valor de los de USA dentro de nuestra matriz. Ahora hemos creado nuestros filtros. Queremos que estos datos se muestren en la página de inicio. Vamos a empezar de nuevo esto en el index.js. Sí. Podemos cambiar el controlador arriba en la parte superior. Entonces para la ruta de inicio de corte delantero, en lugar de usar el controlador del hotel a la página de inicio. Podemos cambiar esto para que sean los filtros de la página de inicio, que vamos a configurar, de nuevo en el controlador del hotel. Si ahora nos desplazamos hacia arriba y encontramos esta export.homepage, ya no necesitamos esto, así que podemos comentar esto. Finalmente abajo en nuestros filtros, abajo en la parte inferior, la etapa final de este try block es hacer un res.render. Queremos renderizar nuestra página de índice, que es la página de inicio. Entonces aquí dentro vamos a pasar en nuestros dos valores, que son los hoteles y los países. Podemos recorrer estos en la página de inicio, analizando los países y luego ahora hoteles y en realidad también necesitamos esperar de países también. Entonces como nota al margen, esperar a promesas como esta, usar esperar aquí y también esperar aquí no es una gran idea. Esto es algo que volveremos a ti y arreglaremos más adelante. Por ahora sin embargo, más en nuestro archivo de índice o poke, podemos tratar con estos países y también con los hoteles. Por lo que por ahora aunque más en nuestro archivo index.pug, ahora podemos tratar con estos datos de países y hoteles. Entonces ve a vistas y luego index.pug. Cerremos la barra lateral. Por el momento si vamos a nuestra ruta de origen. Así que haga clic en el logo en la parte superior. En esta página de inicio, tenemos un error porque aún no estamos analizando ningún detalle de país a este hotel mix in. Ahora sigamos adelante y recorremos todos los datos que ahora estarán en el pasado y luego podremos mostrar este mix-in hotel para cada uno. Después de nuestro texto de CO, crear en otra lista, entonces podemos recorrer todos los hoteles con cada hotel en hoteles. Recuerde hoteles es el dato que se ha pasado a esta plantilla justo aquí. Por lo que cada hotel en hoteles. Para cada uno en la base de datos, también queremos mostrar esta mezcla en y además de mostrarla, también necesitamos pasar los datos individuales del hotel, por lo que esto está disponible en el mix in. Vamos a darle a esto un guardado y luego volver a cargar en la página de inicio. Ahora podemos ver algunos hoteles ahora listados en la pantalla. Sólo comprobemos. Tenemos nueve. Tenemos 1, 2, 3, 4, 5, 6, 7, 8, 9. Eso todo parece estar funcionando bien. Volver al índice. Tenemos que hacer algo similar ahora por los países. Debajo de aquí podemos agregar un envoltorio. Asegúrate de que esto esté en el mismo nivel que el envoltorio de hotel por encima de at.country_wrapper, para el CSS más adelante. El texto h2 de los países, un enlace, y esto es igual que el enlace desde arriba aquí, que va la mitad del href para reenviar países de barra y luego dentro de los corchetes el texto de ver todo. Tenemos estos dos enlaces aquí para los países y también para los hoteles. Porque recuerden limitamos el tamaño de la muestra y la página de inicio para mostrar sólo nueve hoteles en nueve países. Por lo tanto, enlazar a una nueva página para todos los hoteles y también todos los países permitirá entonces al usuario ver todo lo que está en nuestra base de datos. Pero volveremos a esto más adelante. Entonces voy a desordenar lista para mostrar los países, hará lo mismo que el anterior. Diremos cada país en países y luego crearemos un elemento de lista para cada uno. Con un enlace anidado en el interior. El href es con dinámica por lo que abrir la parte trasera toma para seguir vinculando a países de corte hacia adelante. En el interior aquí queremos pasar en el país. _id Necesitamos usar country. id porque si recuerdas de antes en el método de agregación, si volvemos a nuestro controlador, establecemos el ID único en la etapa de grupos para que sea el país. Ahora dentro de nuestro índice, este campo ID es donde ahora se almacena nuestro nombre de país. Entonces podemos mostrar el mismo valor. Entonces las duras, las llaves y luego country . _ id para mostrar esto como texto junto al enlace. Lo último para esta plantilla es agregar también la imagen, la fuente de la imagen. De nuevo, esto usa la espalda toma. Por lo que barra hacia adelante esta es la carpeta de imágenes, la carpeta del país para agarrar la imagen del país y luego al igual que arriba, podemos pasar en el nombre del país, que es el valor del país. _id con el. Extensión JPG. Entonces solo para que este ID de subrayado sea un poco más claro, si vamos al controlador del hotel en lugar de renderizar esta página de índice, solo hagamos un res.json rápido y luego podremos mostrar los datos de los países. Guarda esto y luego vuelve a cargar la página de inicio. Ahora, vemos que este campo de identificación obligatorio ahora se está configurando para el país individual. Es por ello que estamos usando el ID de subrayado en nuestra plantilla para acceder a los valores de país, y luego mostrarlos en la pantalla. Ahora, si restablecemos nuestro controlador de hotel, elimine todos los res.json y agregue el res.render de nuevo, guarde esto y luego vuelva a cargar nuestra página de inicio. Ahora también deberíamos ver nueve países. Bajemos al fondo, 1, 2, 3, 4, 5, 6, 7, 8, 9. Para los hoteles, también decimos nueve, que contábamos antes y si nos desplazamos, no deberíamos ver ninguna referencia al hotel 3 porque se dice que éste no está disponible. Entonces todo esto se ve bien y cada vez que nos refrescamos, deberíamos verlos en un orden diferente porque estamos usando una selección aleatoria de nuestros hoteles. Esta es una introducción al ducto de agregación. Volveremos a esto más adelante cuando empecemos a trabajar con la facilidad de búsqueda que agregamos en el encabezado. En el siguiente video sin embargo, seguiremos trabajando con Mongo mirando cómo actualizar datos en nuestra base de datos. 28. El formulario de edición y eliminación: Si vas a nuestra aplicación y luego pasas a la sección de administración, entonces /admin y luego bajas al fondo, ya hemos usado este enlace add new hotel, que ves aquí abajo. Pero ahora vamos a seguir adelante y trabajar con el enlace Editas/Remove Hotel. Se va a enlazar a un formulario donde el administrador puede buscar un hotel ya sea usando la identificación del hotel o el nombre del hotel. Entonces una vez que se envíe este formulario, devolverá el partido en hotel y nos permitirá pasar a actualizar o eliminar el hotel. El primer paso es crear una plantilla de página con un formulario. Pasemos a la barra lateral y luego a nuestras vistas, creemos un nuevo archivo llamado edit_remove.pug. interior aquí podemos extender los diseños para así extender los diseños y luego bloquear los contenidos y asegurarnos de que eso esté escrito correctamente. Yo sólo voy a tomar un formulario sencillo donde se puede buscar la identificación del hotel o el nombre del hotel. Para empezar, solo voy a agregar un encabezado de nivel 3 para el título que pasaremos más adelante, la forma, la acción puede ser igual a una cadena vacía porque vamos a estar agregando una solicitud de post a la ruta actual en la que estamos. El método va a ser POST y luego anidado dentro aquí voy a agregar un div con la clase de form_input. Empecemos agregando una etiqueta para la primera que va a ser la id del hotel, lo que etiqueta para hotel_id y luego el texto de Hotel id La entrada, va a tener el tipo de texto, el nombre de hotel_id, y luego un id que coincide con su etiqueta. Recuerda antes dijimos que podemos o bien buscar este hotel que quiera actualizar o eliminar usando este id del hotel, o bien podemos buscar el nombre del hotel si lo preferimos. Añadamos un elemento p con el texto de o para que el usuario sepa que pueden usar su id o el nombre. Voy a copiar este formulario entradas y luego pegar esto en abajo. Asegúrate de que todo esté bien alineado y entonces éste va a ser por el nombre del hotel. Cambiar id para ser nombre, el nombre también, y también el id Esto también tiene el tipo de entrada de texto también y lo último que tenemos que hacer es agregar una nueva entrada de formulario. Esto va a ser para que el botón se envíe que va a ser tipo de envío, y también la clase para que coincida con algunos de los otros botones que creamos antes de button_small. Los textos de confirman. Guarda eso y entonces estamos bien para irnos. Se trata de un formulario el cual se va a buscar el hotel que se desea actualizar o eliminar. Si ahora pasamos a nuestro archivo admin y.pug, este es el enlace medio que miraba antes. Esto ahora enlaza con /admin/edit-remove así que voy a copiar esto y luego podemos seguir adelante y tratar la ruta con la que esta se vincula. Hacemos esto como siempre dentro del archivo index.js. Voy a agregar esto dentro de esta sección de administración. Router, y esta es una solicitud get, pegando la ruta del archivo de edit remove. Esto va a ejecutar el HotelController y voy a crear una función llamada EditRemoveGet. Ahora podemos crear este EditRemoveget dentro del HotelController, por lo que abajo en la parte inferior, exporta.Editremoveget y configurar esto para que sea una función que tome en una solicitud y respuesta objetos. Todo lo que necesitamos hacer dentro de aquí es detener o renderizar para toda plantilla de página que se crea. A la plantilla de página se le llamó edits_remove separada por coma. Podemos entonces pasar en nuestro título para nuestra página de Buscar hotel para editar o eliminar. Agrega un punto y coma al final. Guarda esto y pasa al navegador y luego haz clic en Editar/Eliminar Hotel. Ojalá debamos bajar nuestra forma en la parte inferior. Ahora tenemos nuestro formulario una vez que el administrador golpea el botón de confirmación después de agregar un id o un nombre. Esto enviará luego una solicitud de post por lo tanto necesitamos resolver esta solicitud de post en el index.js. A continuación, duplica el código de antes, pega esto en. Vamos a estar usando la misma ruta pero esta vez creando una solicitud de post. router.post y en lugar de Editremoveget, va a ser EditRemovePost. Entonces configura esto dentro de nuestro controlador, también controller.js, por lo que exports.EditRemovePost. Esto va a estar tratando con la base de datos para que podamos marcar esto como asíncrono para que podamos usar una espera dentro de la función, pasar una solicitud, respuesta, y también siguiente. Configura nuestro bloque try y también el catch para cualquier error que luego pasaría al siguiente. El primero que vamos a hacer de lado de este try block es agarrar los datos que se nos están enviando. Dentro de nuestro formulario, vamos a recibir o bien una identificación de hotel o el nombre del hotel así que tengamos algunas constantes para almacenar estos valores. El primero de HotelId. Este hoteLid se va a almacenar dentro de la solicitud.body. Debido a que estamos haciendo una solicitud de post, podemos acceder a estos datos si pasamos a nuestro formulario en Editar/Eliminar. Ahora podemos acceder a esto con el nombre que le dimos dentro aquí de hotel_id Utilizamos esto dentro de aquí, así que hotel_id, y voy a usar el operador de dos pipas para decir todo o nulo. El motivo por el que estamos haciendo esto es porque sólo va a estar presente ya sea la identificación del hotel o el nombre del hotel. Por lo tanto, el global va a ser nulo. Por lo tanto, necesitamos manejar lo que sucederá si obtenemos un valor nulo. Podemos hacer lo mismo justo debajo. Constante para HotelName es igual a req.body, y este es.hotel_name, por lo que o bien tendremos el nombre del hotel o será nulo. Al igual que antes, ahora también vamos a buscar o modelar usando el método.find. Vamos a tener las constantes llamadas HotelData iguales a esperar Hotel.Find. Esta vez vamos a hacer algo un poco diferente porque no sabemos si estamos buscando la identificación del hotel o el nombre del hotel. Debido a que no podemos estar seguros de qué datos se nos están pasando, Mongo nos proporciona el operador todo y luego podemos proporcionar una matriz de estos dos valores para buscar uno u otro. Pasando nuestros objetos y luego usar el $ o. Esto va a tomar en una matriz y dentro de esta matriz podemos pasar en nuestros dos valores que queremos buscar. Abre los tirantes rizados. El primero es nuestro id del hotel. Si recibimos el id del hotel del formulario queremos buscar por el id. El id Mongo es _id por lo que podemos comprobar si esto es igual a hotel id que es nuestra constante justo aquí. Si esto no está presente, separado por coma, podemos agregar una segunda comprobación. El segundo caso es para si recibimos el nombre del hotel en lugar del id Por lo tanto, queremos revisar el campo denominado hotel_name de nuestra base de datos. Entonces queremos comprobar si esto es igual a nuestra variable HotelName, que tenemos justo aquí. Agregar HotelName- Espero que esto tenga sentido. Estamos haciendo un método de búsqueda, y estamos usando el operador o para comprobar si uno de estos campos es una coincidencia. Después de usar nuestro método de búsqueda de puntos, ahora vamos a especificar una intercalación para buscar. Si solo quitamos el punto y coma al final por ahora, y luego encadenamos al fin.collación, abrimos los corchetes, y luego pasamos en un objeto. cotejo nos permite hacer coincidencias específicas del lenguaje, así que solo voy a escribirme a sí mismo y ahora. El locale se va a enviar a en, agregar una coma, y luego la fuerza como un valor de dos, así que vamos a agregar un punto y coma al final. Usando la cotejo, como tenemos aquí, colación nos permite hacer coincidencias específicas del lenguaje. Aquí estamos declarando que estamos usando textos en inglés, y la fuerza es un valor opcional. Establecer el valor de dos es un nivel secundario de comparación, lo que significa que no es sensible a mayúsculas y minúsculas. Esto es bueno porque significa que podemos, por ejemplo, simplemente escribir la palabra hotel dentro de nuestro formulario aquí abajo, así como esto, sin usar una h mayúscula, y todavía encontrarás el hotel desde la base de datos. También hay diferentes números que puedes usar aquí también, y estos están todos listados en la documentación si alguna vez tienes una necesidad de ellos. Entonces vamos a agregar un if else sentencias para manejar el resultado de qué hacer si se encontró un resultado en la base de datos. Volver a nuestro código. Después de esto crea una declaración if. Si el HotelData que es esta constante justo aquí, .length es mayor que cero. Aquí básicamente estamos comprobando si este fino método ha almacenado algún valor dentro del HotelData. Si lo hace, el valor será mayor que cero, por lo que podremos seguir adelante y hacer un res.json, y dar salida a nuestro HotelData. Por supuesto volveremos a esto después de hacer del HotelData nuestra plantilla, pero por ahora solo podemos dejar esto como un res.json, luego agregamos a la palabra clave return después, por lo que no pasamos a la declaración l si la sección es cierto. Si es falso, entonces creamos una sentencia else, y luego podríamos hacer res.redirect para redirigir al usuario a /admin/edit-remove. Básicamente si no se encuentran datos en la base de datos o no hay coincidencias, sólo nos vamos a redirigir a la página actual, así que fuera al navegador podemos darle una oportunidad a esto. Entonces vamos a probar para el hotel 7, confirme, y luego obtenemos nuestro res.json con el HotelData devuelto. El dato del hotel coincide con el hotel 7 lo cual es bueno, y también utilizamos la minúscula para esta búsqueda 2. Probemos también esto con el ID del hotel. Vamos a agarrar una de estas ID de hotel de mLab, hotel 6, añadir esto en, confirma. Ahora recuperamos el valor del hotel 6. Lo que quiero hacer ahora, en lugar de hacer una res, json justo aquí, voy a crear una nueva plantilla de página llamada hotel en el detalle de desplazamiento. Esta será básicamente la vista extendida del hotel con la descripción completa. Empecemos por eliminar nuestro res.json, y en su lugar hagamos en res.render, pasemos nuestra plantilla que vamos a crear de hotel_detail. El título de la página de Agregar o quitar Hotel, y luego pasar en nuestro HotelData, luego abrir la barra lateral. Ya podemos crear estas plantillas de detalle de hotel. Dentro de vistas, crea un nuevo archivo de hotel_detail. Pondré yo. Estas plantillas también se reutilizarán más adelante, también la necesitaremos al hacer clic en cualquiera de los hoteles individuales nuestra lista para luego ser llevados a la vista de descripción extendida, así que vamos a trabajar en nuestro detalle de hotel, por lo que extiende nuestros diseños. Esta página también se va a utilizar para reemplazar este res.json, por lo que en cuanto tengamos un hotel coincidente, entonces mostraremos este hotel en la pantalla. También necesitamos importar nuestro hotel Mixin para poder reutilizar el mismo código y mostrar esto en lugar de este res.json. En nuestra plantilla, podemos incluir mixins/_hotel, contenidos de bloque. Indented m ahora vamos a recorrer cada hotel en HotelData. HotelData, recuerda, fue pasado a esta plantilla justo aquí, vuelta a nuestras plantillas, podemos crear nuestro loop, cada hotel en HotelData. Podemos usar el div de.hotel, tanto como el resto del CSS más adelante, y luego otro se mezclará voluntad más hotel pasando en el hotel individual que tenemos aquí en el bucle. Ahora si guardamos esto, y luego pasamos a nuestro código, recargue el navegador, y luego desplácese hacia abajo. Ahora en lugar de este res.json, ahora estamos renderizando nuestro hotel usando este hotel.profile detail.profile. También pasamos en su hotel a nuestro hotel Mixin para reutilizar el código, que muestra nuestro hotel. Estamos a punto de terminar para este video, lo último que quiero hacer en la parte superior de este hotel es agregar dos botones. Uno va a ser un botón el cual va a seguir adelante actualizando este hotel que seleccionamos, y luego el segundo va a ser borrar este hotel. En el detalle del hotel por encima de nuestro Mixin, agreguemos un enlace para nuestro botón. El href se va a ir, necesito los abáticos, el símbolo del hotel. Hotel._ id/actualización. Aquí estamos creando una ruta del ID del hotel, seguido de /update. Esto es lo que usamos en el siguiente video para manejar la actualización, anidado aquí adentro, agregar nuestro botón con la clase de botón pequeño, y luego el texto de actualización hotel. Ahora si tan solo copie estas dos líneas, y agregue esto en una vez más justo debajo. Estos pueden ser también para nuestras rutas de eliminación, por lo que el cambio es eliminar. Entonces éste puede ser Borrar Hotel. Dale ese guardar y luego vuelve a cargar el navegador, confirma el envío del formulario, y ahí están nuestros botones de actualización y eliminación en la parte superior. Posteriormente, también ocultaremos estos botones para que solo el administrador los pueda ver. Ahora dentro de nuestra sección de administración, hemos creado un botón abajo en la parte inferior que enlaza con el edit remove view hotel. Dentro de aquí ya podemos buscar un hotel ya sea usando el DNI o el nombre de nuestro hotel de la misma manera. Después podemos hacer clic en confirmar, luego fueron llevados al hotel el cual fue seleccionado, y luego tenemos la opción de actualizar o eliminar este hotel, y esta actualización funcionalidad del hotel es lo que vamos a estar moviendo en el siguiente video. 29. Actualización de registros: Ahora hemos buscado con éxito en la base de datos para el hotel y lo mostramos en nuestra vista. En el último video, también agregamos estos dos botones para actualizar y también eliminar el hotel. Si hacemos clic en el botón “Actualizar Hotel”, ahora pasamos el ID del hotel en la URL como parámetro, justo antes de las actualizaciones de barra inclinada hacia adelante. Esto se debe a que lo configuramos en el detalle.profile del hotel. Nosotros montamos esto justo aquí dentro de nuestro enlace. Tener este ID único de hotel es como vamos a estar seleccionando el hotel de la base de datos que queremos actualizar o eliminar. En primer lugar, podemos manejar la ruta en el archivo index.js. En nuestra sección de administración en el edit remove, agreguemos router.get. En este video, vamos a estar manejando las actualizaciones. El recorrido es barra hacia delante admin barra hacia adelante. Queremos que esta sección sea dinámica por lo que utilizamos un colon y le damos a este ID un nombre de identificación de hotel. A continuación, actualizar. Queremos ejecutar el controlador del hotel. Después crea una función llamada Actualizar hotel get. Esto luego mostrará un formulario en una pantalla el cual nos permitirá cambiar detalles del hotel antes de crear una solicitud de post para realmente enviarlos a la base de datos. Encima en controlador de hotel, creamos esta actualización del hotel se pone. Vayamos al hotel controller.js. Abajo en la parte inferior, las exportaciones hacia las actualizaciones. Hotel se pone, que va a ser un fregadero. Disfunción inteligente con la palabra clave a sync, pasando nueva solicitud, la respuesta y también siguiente. Podemos añadir un bloque try. Después agrega una constante de hotel. Esto va a sumar peso a los datos cuando vayamos a la base de datos y encontremos un registro. El único registro que queremos encontrar es el hotel el cual se pasa como parámetro en la parte superior aquí. Dentro del objeto de solicitud usaríamos need.params. Espera al hotel. Encontremos uno que devolverá un registro que coincida. Podemos emparejar esto con el campo _ID. El ID que queremos igualar se almacena dentro request.params. Nombramos esto si vamos a index.js hotel ID. Solicita.Params hotel ID. Después de esto queremos entonces agregar nuestro bloque de caché justo después. Para almacenar en caché cualquier error pasa esto a siguiente para nuestro middware, así siguiente error. Para comprobar esto todo está funcionando bien después de nuestra constante justo aquí. Voy a hacer res.json para ver qué datos nos devuelven. Podemos entonces pasar en este hotel que estamos buscando y luego pasar a nuestro proyecto y luego golpear recarga. Ahora, podemos ver que recuperamos los detalles del hotel full que es el ID el cual se pasa como parámetro en la URL. Si volvemos a nuestro administrador y buscamos un hotel diferente en el Número 6. Voy a actualizar. Nos regresaron el valor del hotel 6. Ahora sabemos que estamos obteniendo la información correcta en lugar de este res.json ahora queremos renderizar una plantilla de página. El template que voy a reutilizar es el add hotel templates. Esta es básicamente la forma que tiene todos los campos que necesitamos para nuestro hotel. Podemos seguir adelante y modificar cualquiera de estos y luego actualizar. En lugar de los res.json cambia para ser res.render. Pasando en nuestras plantillas de add hotel. El título de página de actualización hotel. Entonces finalmente también podemos pasar los datos almacenados en nuestras constantes de hotel. Pasa a nuestras plantillas y dales una caja fuerte. Ahora, vamos al navegador y luego él Recargar en lugar del JSON ahora deberíamos ver nuestra página ahora tiene un formulario está en la parte inferior. Este formulario se va a utilizar para actualizar el hotel. Dentro de esta forma, algo que idealmente queremos hacer es que los datos pasen ya a todos estos campos. Por ejemplo, debería decir hotel 6. Podemos entrar y simplemente modificar los datos que hay ahí. Podemos usar estos valores de manera directa justo antes de hacer esto, voy a poner esta forma en un mixin para mantener las cosas organizadas. Encima a la barra lateral y luego lado de las Vistas y Mixins, crea un nuevo archivo llamado underscore hotel underscore form. Con la extensión the.org crea nuestro nombre mixin en la parte superior tal y como lo hicimos antes. Formulario hotelero el cual va a recibir los datos del hotel como argumento. Entonces Hotel.org en la barra lateral. Este es el formulario que ahora renderizará para las actualizaciones y también la sección Agregar Hotel. Entonces podemos bajar esto desde nuestra forma todo el camino hasta el fondo. Nuestra sección de formulario completo y guardar el archivo. Ahora vuelve a un mixin de forma hotelera y podemos pegar esto. Si volvemos a subir a la parte superior y luego sangramos correctamente, guarde ese archivo. Con mixin now setup ahora podemos volver a agregar hotel.pug. Después incluye el mixin en la parte superior del archivo. Incluir los mixins que es una carpeta y el nombre del hotel subrayado, formulario de subrayado. Recuerda que no necesitamos la extensión PAG. Podemos incluir este mixin en cualquier lugar de nuestro archivo. Voy a agregar mi parte trasera en la parte inferior. Nosotros más forma hotelera. Persona en los datos del hotel. Si ahora guardamos esto y probamos, está funcionando bien. Vuelvo a cargar, todavía vemos que el formulario está ahora en la pantalla pero hemos externalizado esto a un mixin. Volver a hacer estos campos de formulario, tener los datos del hotel ya poblados. Esto se puede agregar dentro del mixin que acabamos de crear a la forma hotelera. Bajemos a uno de nuestros campos para empezar. Empecemos con el nombre del hotel. De la forma en que podemos hacerlo para establecer el volumen. Dentro de las entradas podemos establecer el valor igual a un hotel en el que recibimos como argumento aquí. Entonces el nombre que queremos es.hotel_name. En realidad esto es una cuerda. No queremos usar las cotizaciones. Ahora si guardamos esto y luego vuelve a cargar nuestro formulario. Ahora vemos el valor del hotel 6 que ahora se está pasando a nuestra forma. Podemos hacer lo mismo con los demás campos también. El descripciòn. Entra a nuestro área de texto porque decimos área de texto. Tenemos que hacer esto un poco diferente. Tenemos que establecer el texto para que sea igual a hotel.hotel_description. En lugar de usar los atributos de volumen como lo hacemos en otras entradas podemos bajar a la calificación estelar. Hicimos la imagen así que no necesitamos esto por ahora. El rating estelar te lleva de vuelta al valor de hotel.star_rating. El país. Hotel, country, el costo por noche. De nuevo después del valor requerido va a ser igual al costo de punto hotel por noche usando guiones bajos. Guarda esto y luego echa un vistazo a esto en el navegador. Recargar. Genial, esto ahora hace que la actualización de la información de un hotel sea mucho más fácil. A continuación, necesitamos configurar la solicitud de post para manejar realmente las actualizaciones cuando hacemos clic en el botón Confirmar. Pasar al router, que está dentro del índice dot js. Vamos a cerrar estos abajo, abrir el índice dot js duplicados sobre obtener solicitud de actualizaciones. Pero esta vez, los cambios para ser post y luego el controlador del hotel va a ser actualización puesto del hotel. Entonces crea esto en el controlador del hotel. Exportaciones dot actualiza puesto hotelero. Esto va a ser en una función de sincronización con la solicitud y los objetos de respuesta todo el camino siguiente para el middleware. Configurar nuestra función. Podemos comenzar con el manejo de errores. Prueba y también un bloque catch, comprobando los errores. Después pasa a un middleware con siguiente. Ahí vamos. Dentro de nuestro try block, lo primero que quiero hacer es conformarme por constante. Esto va a ser para guardar el hotel Id que nos ha pasado. Este número de Id del hotel está disponible como parámetro el cual tenemos justo aquí. Dejemos configurar esto ahora, const hotel Id es igual a solicitar dot params dot hotel Id capital I. Entonces una segunda constante de hotel, que va a ser igual a esperar hotel, que es nuestro modelo. Esta vez vamos a estar usando un método llamado find by Id and update o un caso común o find by Id y update. Este es un método Mongo que podemos usar para luego pasar en el hotel Id, que tenemos estrella justo aquí. Podemos entonces obtener el registro dentro de Mongo y luego regresar hacia los nuevos detalles. En primer lugar, los primeros argumentos que vamos a sumar, esta es variable de hotel Id. Este primer argumento es la idea del registro, que queremos encontrar dentro de nuestra base de datos, separado por una coma. El segundo parámetro son los datos que queremos utilizar para actualizarlo. Este dato se puede encontrar dentro de la solicitud, el cuerpo. También utilizamos cuerpo solicitante cuando se creó originalmente el hotel, que está justo arriba. If will up to create hotel post, que era una función que originalmente usábamos para configurar un nuevo hotel. Recuerda dentro aquí creamos un nuevo hotel usando información del objeto de solicitud almacenada dentro del cuerpo. Este es el dato que se pasa desde el formulario. Vamos a estar usando los mismos datos abajo. Pero esta vez, en lugar de crear un hotel, estaremos usando para actualizarlo. El tercer parámetro. Por último, voy a agregar unos objetos de opciones, lo que separados por coma en un objeto y podemos establecer nuevo para que sea verdad. Por defecto, después de la actualización, aún nos devolveremos el registro original. Si seguimos adelante y establecemos nuevo para ser verdad es nos aseguraremos de recuperar la versión modificada o actualizada para mostrar en nuestra app. Después, pasa al navegador. Ahora podemos hacer un cambio. Llamemos a esto el hotel 66, confirma. No vemos nada en la pantalla porque no estamos configurando lo que está haciendo a continuación. Pero en cambio, si vamos a mLab y luego refrescamos. Ahora podemos ver tenemos el hotel 66 dentro de nuestros registros. Volver a nuestro proyecto. Podemos ver que esto sigue girando en la esquina. Navegador voroso colgado y vamos a hacer un descanso o redirigir para luego redirigir esto a la ruta, que no manejará esto. Después de nuestra constante de hotel, hagamos un redireccionamiento de punto de descanso. Dentro de las garrapatas traseras podemos sumar todo slash y luego hacia adelante slash el Id del hotel. Tenemos esto almacenado dentro de esta variable aquí. Podemos pegar esto en, guardar esto, y luego recargar. Nuestras solicitudes de post ahora se actualiza base de datos y también nos redirigió para reenviar barra todo y luego reenviar barra el Id del hotel. Abajo en la parte inferior, vemos que todavía no hemos configurado esta ruta y por eso vemos un error. Pero el hotel sigue actualizándose dentro del mLab. Nos ocuparemos de esta ruta más adelante. Esta misma ruta también es necesaria cuando hacemos click en Hotel. Si vas a la página de inicio haciendo clic en el logotipo, y luego haz clic en alguno de estos hoteles. Ver el detalle completo. Esto nos lleva a la misma ruta que es hacia adelante slash todo y luego el hotel Id y por supuesto tenemos el mensaje de no encontrado porque aún no estamos creados esto en el navegador. Antes de dejar este video ahí, probemos una actualización más en un hotel diferente para asegurarnos de que todo funcione bien. Volver al Administrador, así reenviar barra admin, Edita y Quitar. Podemos ir por hotel número 12, Confirmar. Hay hotel 12, haga clic en el botón Actualizar y cambios para ser hotel 122, Confirmar con el mLab. Desplázate hacia arriba y hacia abajo para que puedas ver estos reportes, nuestros hoteles normales ahí. Pasar a la página siguiente. Ahí está nuestro nombre actualizado del hotel justo ahí. Rápidamente voy a volver a instalar estos de nuevo a cómo eran los. Hotel 12, Confirma esto. Entonces podemos volver a Admin, apenas hacia adelante slash admin dentro de la URL. Podemos ir también al hotel 66, que es el primero que editamos. Podemos ver que no hemos agregado una imagen para esto. Vamos a actualizar los cambios de nuevo al hotel seis en la imagen del hotel seis. Después actualice esto en la base de datos. Estas son todas nuestras actualizaciones ahora funcionando bien. Antes de seguir adelante ahora esta cosa pequeña que necesitamos arreglar sólo si vamos al Admin. Entonces si vamos a Editar y quitar, busca un hotel, haz clic en Confirmar y luego en Actualizar. Actualmente tenemos todos los campos dentro de aquí o repoblados y esto funciona realmente bien a la hora de actualizar el hotel. No obstante persona en estos datos creará un problema cuando estemos agregando un nuevo hotel. Vamos a añadir rápidamente la imagen del hotel 12 de nuevo en y luego Confirmar. Entonces si vamos a Admin y luego reenviar barra inclinada agregar. Recuerda, la barra inclinada hacia adelante agrega utiliza las mismas plantillas de la misma forma que solíamos para actualizar el hotel. Pero podemos ver dentro de la plantilla que tenemos un error. Estos errores son causados porque dentro del formulario accedemos en los datos del hotel. Acude a un mixin y aquí estamos accediendo a hotel, que se pasa en un montón de opciones aquí. Básicamente este formulario está esperando recibir los datos del hotel. No obstante, si vamos al controlador del hotel y luego si vamos a actualizar hotel get. Aquí, presentamos los datos del hotel que necesita. Pero si te desplazas hasta donde creamos el hotel, que está en create hotel get justo aquí. Esto también está usando el mismo formulario add hotel. obstante, no pasamos ninguna información de hotel, y de hecho no tenemos razón para hacerlo. De una manera alrededor de esto se termina en la forma hotelera mixin. Subrayar hotel, forma de subrayado, podemos seguir adelante e inicialmente establecer hotel para que sea un objeto vacío. Hotel es igual a un objeto vacío y luego guardar esto y recargar. Ahora podemos ver cuando agregamos un nuevo hotel, ahora tenemos este formulario de vuelta en la pantalla. Agregar hotel para estar en un objeto vacío de esta manera hará que la plantilla conozca el nombre del hotel y sabrás si hay algún error. Pero como es un objeto vacío no interferirá con nuestros campos. Genial, el objetivo principal en este video fue actualizar con éxito los hoteles en nuestra base de datos y ahora tenemos esto funcionando. A continuación, estaremos cubriendo otra tarea importante también y esto es poder eliminar registros de nuestra base de datos. 30. Borrado de registros: La gran acción final que queremos realizar es poder eliminar elementos de nuestra base de datos. A menudo escucharás el acrónimo CRUD, al tratar con bases de datos. Que es la abreviatura de las cuatro acciones principales que son crear, leer, actualizar y eliminar. Ya hemos creado datos, también podemos leer datos y luego en el último video actualizamos nuestros datos. Ahora es el momento de mirar a eliminar registros también. Vamos a seguir adelante y crear un hotel de prueba para trabajar con más de un administrador pliegues/add. Esa es nuestra prueba, prueba, y podemos elegir cualquier imagen, cualquier calificación estelar está bien y el país para luego confirmar. Después de este redireccionamiento, ahora redirigimos a formal/todo y luego a la identificación del país que creamos. Agarra este nuevo ID de hoteles copiando esta sección aquí. Después comprueba esto se almacena en una base de datos sobre un mlab, así que pulsa recarga. Tan solo doble comprobación, tenemos nuestra prueba, así que ve a la primera sección, y ahí estamos. Ahí está nuestro hotel de pruebas dentro de la base de datos. Si volvemos a nuestros proyectos y luego vamos a admin para adelante/admin, podemos seleccionar, editar, y eliminar hotel. Al igual que hicimos en el último video, podemos pegar en el ID del hotel, cual fue creado para pruebas, confirmar, y luego estamos llevados a la vista completa y tendremos los botones del último video donde podremos actualizar y eliminar el hotel. Haga clic en el botón eliminar esta vez y luego reenviado a reenviar/admin, adelantar/nuestro ID de hotel, forwad/delete. Esto se debe a que lo dijimos antes en las plantillas detalladas del hotel. Abre la barra lateral, y luego entra en hotel_detail. Este es el enlace que dijimos usar dentro de aquí, y esto es lo que vamos a seguir adelante y manejar en el archivo de índice de routers [inaudible]. Ciérrala y luego otra vez en el index.js, esta vez vamos a establecer router.get to be the string winter scene of admin forward/nuestros segmentos dinámicos, que es hotel ID capital I, y luego adelantar/eliminar. Esto sigue el mismo patrón que la sección de actualización justo arriba pero esta vez usando delete. Entonces vamos a crear nuestro controller.delete hotel get. Después al controlador del hotel ya podemos crear esta función. Hotel controller.js y luego abajo al fondo, así que esto es exports.delete huéspedes del hotel. Esta será una función de sincronización así que marque esto como una sincronización. Al igual que en nuestros objetos o solicitar respuesta y el próximo otoño o configuración de ware medio todas las funciones por lo que esto va a ser bastante similar a una cabina. También necesitamos poner a tierra este ID del hotel desde las instalaciones, así que pega esto en. Dispuesto a no decir una constante de hotel de potencia, así const hotel y esto va a ser igual a esperar, esperar de un modelo de hotel y luego usar el método llamado encontrar uno. Esto va a encontrar un registro dentro de nuestra base de datos y queremos encontrarlo por el ID del hotel, cual hemos guardado justo aquí. Como objeto, agregue esto en. Queremos encontrar un registro por el campo ID de subrayado y el ID con el que queremos coincidir es ID de hotel, que es esta variable justo aquí. Entonces podemos seguir adelante y hacer un descanso o renderizar para mostrar el contenido de nuestras plantillas, que al igual que antes al actualizar, vamos a renderizar las mismas plantillas de hotel de anuncios. Para este tiempo, clicando y confirmando en la parte inferior de nuestro formulario. Después seguiremos adelante y eliminaremos nuestro hotel en lugar de actualizarnos. Add_hotel como en nuestro objeto, el título de borrar hotel, un entonces pasando nuestra variable hotel. El motivo por el que estamos usando esta plantilla add hotel una vez más es para que puedas ver todos los detalles del hotel influencables para asegurarnos de que este es el que queremos eliminar. También pasamos en este hotel, que vamos a estar borrando. Una vez más, puedes poblar todos los campos dentro de nuestro formulario. Ahora si decimos esto te hace en las mismas rutas que antes, que es admin, nuestro ID de hotel, y luego borra. Ya podemos recargar y ahora obtenemos el formulario add hotel. Ahora, ¿qué significa esto? Ahora tenemos este get request all setup. Tenemos que manejar ahora cómo eliminamos el hotel. Para ello, podemos crear una solicitud de post a la misma ruta. Pasado al index.js, duplicemos esta línea aquí, peguemos esto en, esta vez esta es una solicitud de post y eliminemos la publicación de hotel sobre al controlador del hotel y esto es exports.delete hotel post. Esta también es una función de sincronización ya que estamos tratando con datos de nuestra base de datos, pasando solicitud, respuesta y siguiente. Lo siguiente que hay que hacer es agregar nuestro manejo de errores lo intentamos y atrapar. Acabo de notar arriba, también necesitamos agregar esto a eso también. Tan solo por momentos te pediremos el error y luego pasaremos nuestro error al siguiente y luego podemos agregar esto para eliminar hotel get too así que inténtalo. Podemos agregar estas tres líneas hasta un bloque try y luego agregar catch y énfasis a siguiente con nuestro error. Bueno, así que volver a nuestra publicación solicita abajo dentro de la sección try. De nuevo, queremos agarrar el ID de los parámetros para que podamos copiar esta línea aquí. Esto en un activo de nuestro hotel so const hotel espera, nuestro modelo de hotel y para quitar un artículo de [inaudible], podemos utilizar un método llamado find by ID and remove, que es bastante similar al que usamos arriba, pero esta uno fue encontrado por ID y actualización. Abajo a nuestra solicitud de post, podemos volver a encontrar por identificación y eliminar. Entonces dentro de aquí todo lo que necesitamos hacer es pasar en el DNI del hotel que queremos quitar. ID, el campo al que queremos apuntar, y luego coincide con nuestro ID de hotel, que es esta constante justo aquí, por lo que punto y coma al final. Una vez que hayamos eliminado este hotel de la base de datos, entonces querremos realizar un redireccionamiento. Descansar o redirigir y ¿a dónde quieres ir también? Bueno, antes cuando estamos buscando actualizar hoteles, tenía sentido redirigir al hotel actual con la información actualizada. No obstante, no podemos hacer lo mismo al borrar en un hotel porque este hotel ya no existe. En cambio, sólo voy a redirigir a la ruta de inicio, nos da un guardado y luego pasar al navegador. Si recargamos, por lo que ahora estamos actualmente en nuestro hotel de prueba y ahora por click “confirmado” crea una solicitud de post. Esta es una buena señal se estaban redirigiendo a la página principal. Ahora pasa a mlab refresh. Ahora bajamos a 12 registros por lo que tenemos hotel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. En la siguiente página tenemos 11 y 12, por lo que parece que nuestro hotel ha sido eliminado con éxito. Si el tuyo ha sido eliminado, felicitaciones, ahora has realizado acciones de creación, lectura , actualización y eliminación en tu base de datos. Este es un gran paso para nuestra aplicación y hemos avanzado mucho. En la siguiente sección de este curso, vamos a estar impulsando con nuestros proyectos agregando, estilizando, más plantillas y características y en general haciendo mejoras. esperamos verte en la siguiente sección y adiós por ahora. 31. Vista detallada del hotel: En esta sección, vamos a estar impulsando con nuestros proyectos y haciendo algún trabajo general, incluye estilismo y mejoras. Voy a dar inicio a las cosas trabajando con las plantillas detalladas del hotel que creamos para mostrar el hotel que buscamos antes de editar o eliminar. De nuevo vamos a reutilizar estas plantillas en unos pocos lugares. En primer lugar, si pasamos a la página principal o a las rutas de inicio, y luego hacemos clic en cualquiera de nuestros hoteles, bajamos al fondo de nuestras plantillas, vemos un mensaje de error de no encontrado. Esto se debe a que necesitamos manejar estas rutas que tienes en la parte superior de barra hacia adelante todo, luego barra hacia adelante el ID del hotel. Con estos pocos, podemos reutilizar el hotel en plantillas detalladas las cuales creamos y además agregar estas rutas arreglará otras áreas también. Por ejemplo, si volvemos a la página de inicio y luego haces click en, ver todos, pinchando en cualquiera de estos hoteles se vuelve a llevar a la misma ruta. Así que da click en hotel uno y tenemos las mismas rutas de foward slash todo y luego nuestro ID de hotel junto con el error en la parte inferior. Esto arreglará ambos problemas, y también de nuevo, si pasamos al hotelController.js y vamos a crear post hotelero. Desplázate hacia arriba, por lo que creas puesto de hotel aquí y esta res.redirect, también redireccionan a estas mismas rutas aquí. Esto es después de que creemos un nuevo hotel, luego redirigirá esta página de detalles del hotel. Esta es una buena para ponerse a trabajar ahora. Empecemos con la ruta sobre cualquier punto índice js. Si nos desplazamos hacia arriba, ya deberíamos tener la ruta o el llegar a la barra hacia adelante toda la ruta. Mantengámoslos en secuencia y añadamos esto a continuación. Entonces router.get alrededor de este tiempo, como sabemos, es hacia adelante barra todo, y luego el ID del hotel, que se puede agregar como segmento dinámico. Voy a llamar a esta variable el hotel. Esto también va a usar el controlador del hotel y luego usar una función llamada detalle del hotel, punto y coma en los extremos. Entonces podemos seguir adelante y crear detalle de hotel sobre en el controlador. Podemos agregar esto en cualquier lugar, bajemos hasta el fondo. Empezamos como siempre con las exportaciones, y luego el nombre del detalle del hotel, y luego configuramos esto en una función de sincronización, pasamos en la solicitud, la respuesta y también siguiente, agregamos el cuerpo de nuestra función. Entonces intentaré atrapar bloque. Así que intenta y luego captura cuál toma en el error, y luego pasa el error al siguiente. Está bien, bien. Vamos a empezar por crear un par de constantes. La primera constante se va a agarrar el parámetro, que es el ID del hotel. Vamos a utilizar este hotel segmentos dinámicos, que está en la URL. Primero digamos que esto está en una constante. Entonces const, hotelparam es igual a los params de punto de solicitud y luego punto hotel, que es el nombre que le dimos. Una segunda constante, que es para los datos del hotel. Vamos a utilizar esto para buscar en nuestra base de datos utilizando este parámetro de hotel y luego encontrar el hotel único que necesitamos. De nuevo vamos a usar la espera, para esperar a que los estados estén regresando antes de seguir adelante. Necesitamos buscar el modelo hotelero, mayúscula H, utilizar el método find. Entonces necesitamos pasar en el campo que queremos encontrar. Queremos utilizar los campos de ID de subrayado y consultar cualquier ID que coincida con nuestra variable de param del hotel. Pase en el param del hotel, agregue un punto y coma al final. Después para terminar esto, vamos a hacer un res.render para renderizar plantillas a la pantalla. El template que vamos a utilizar es el detalle de subrayado del hotel. Pase en el título de vamos a viajar y luego pasemos por nuestra variable de datos hoteleros, que es esta variable aquí, que almacena el hotel único de la base de datos. Ahora como ya tenemos detalle de subrayado hotel dentro de nuestra barra lateral y luego en las vistas. Tenemos estas vistas aquí abajo. Sólo tenemos esta configuración y esta también está recibiendo el mismo nombre variable de los datos del hotel. Ahora si le damos a esto una caja fuerte, diga el controlador y luego vuelva a nuestro navegador y ahora vuelva a cargar. Ahora agarramos el ID del hotel de la URL personalmente a nuestro controlador, que luego está recuperando la información de nuestra base de datos y luego enviando esto a nuestra plantilla de detalles del hotel. También debemos ver que esto está funcionando si vamos a la página de inicio y hacemos clic en alguno de estos hoteles, para ser llevados a la página de detalles del hotel. También probemos las rutas, que son todos los hoteles. Haga clic en ver todo, y de nuevo, cualquiera de estos hoteles, y este también está funcionando bien. Por último podemos ir a añadir nuevo hotel. Acude a nuestro admin forward slash at y vamos a crear un hotel de prueba. Cualquier información aquí está bien. Entonces confirme, desplácese hacia abajo y ahí está nuestro hotel de pruebas, que acabamos de crear y como hemos visto antes de conseguir un redireccionamiento de punto res, que pasa por adelante slash todo y luego este ID de hotel. Si bien esta vista de detalle del hotel por el momento, se ve igual que todos los hoteles, pronto habrá algunas diferencias. Cuando sigamos adelante y agreguemos un poco de estilo, múltiples hoteles cabrán en la misma página al igual que en esta página de inicio aquí. Pero si hace clic en esto y mira la vista de detalle del hotel, esta será una sola vista para un solo hotel. Esto también nos dará el espacio para agregar más detalles, como una descripción de hotel abajo cerca de la parte inferior, y esto es lo que haremos en el siguiente video cuando veamos el renderizado condicional. 32. Locales y renderización condicional: Vamos a cubrir algunas cosas diferentes en este video. Comience con los locales, todas las variables locales. Esto es algo que ya hemos cubierto realmente al crear plantillas, pero también vamos a ver cómo ponerlos a disposición de todas las plantillas también. Actualmente más en el HotelController. Demos click en el hotelController.js y bajemos al detalle del hotel. Justo aquí, ya pasamos una variable local a nuestras plantillas, igual que lo hemos hecho muchas veces. El dato que pasamos a esta plantilla, si agregamos esto a su propia línea para dejarlo un poco más claro, este es un objeto que actualmente tenemos el título, que es un par de nombre valor, y luego también un dato de hotel que es una variable, que creamos justo arriba. Aquí estamos pasando el título y los datos del hotel que sacamos de la base de datos. Somos libres de usar estos locales para pasar cualquier cosa que queramos usar en esta plantilla. Por ejemplo, vamos a seguir adelante y añadir el nombre de Chris y luego otra vez en su vista de detalle del hotel. Ya hemos visto podemos usar estas igual que las variables normales de JavaScript, igual que hicimos aquí, usando hotel y luego accediendo a la ID desde el objeto. Aquí estamos usando las variables locales con garrapatas traseras, para que puedas mezclarlas con algún texto. Ya hemos sacado también estas variables con el símbolo igual. Por lo que sabemos hacer eso. Es p igual, y en este nombre, recargas y allá vamos, esa es nuestra variable local como las plantillas, y también cómo podemos generar una variable cuando se usa con texto plano usando un hash. Quitemos esto. Si se mezcla con algún texto plano, como aquí, podemos usar el hash, las llaves, y luego también pasar en nuestra variable de nombre, guardar y luego volver a cargar. Ahí vamos. Ahí está nuestro hotel Update y nuestro nombre de Chris mezclado con el texto del botón. Quitemos estos ejemplos. Si pasamos a alguna de las plantillas, por ejemplo, si vamos a todos los hoteles, intentemos hacer lo mismo. Intentemos dar salida a nuestra variable de nombre. Por lo que p igual nombre, y salir a todas las rutas de hoteles. Da click en ver todos. Ahora si nos desplazamos hacia abajo no vemos ninguna referencia al nombre. Esto se debe a que los locales, según suenan, son variables locales con alcance solo a una sola plantilla, a la que se las pasaremos, así que eliminemos esto, p igual nombre. También en nuestro controlador de hotel, eliminemos nuestro nombre de aquí también. Pero también suele ocurrir cuando queremos pasar ciertas variables a todas nuestras plantillas para usar en lugar de crear una variable en cada una de estas funciones y luego pasar los mismos datos. Si recuerdas desde temprano en los proyectos más en el app.js. Vayamos a app.js. Hablamos un poco del middleware app.use, que tendrá justo aquí. Este middleware, cuando no establecemos rutas como primer parámetro, es una acción que se utiliza para cada solicitud a nuestra aplicación. Básicamente agrega una capa por la que pasamos para cada solicitud. Podemos hacer uso de app.use para crear algún middleware para todas las solicitudes, que luego irá adelante y pondrá nuestras variables disponibles en todas las plantillas. Entonces vamos a crear esto dentro de app.use. Subamos a nuestra app.set y luego agregamos en nuestro middleware app.use. Esto va a tomar en una función la cual tiene acceso a la solicitud, la respuesta, y también siguiente. Vamos a configurar esto como una función normal. Al usar app.use, esta función, que se llama también tendrá acceso a los objetos de solicitud y respuesta también. Recuerda aunque si solo queremos que esta función se ejecute en una solicitud a una ruta en particular, podemos agregar primero el enrutamiento antes de esto. Entonces como primer parámetro podemos agregar la cadena, una barra inclinada hacia adelante admin por ejemplo, separada por una coma, y luego nuestra función como segundo valor. Ahora, cualquier cosa que corremos dentro de aquí solo funcionará en esta ruta de administración. Pero queremos que esto se ejecute en cada plantilla de nuestra app. Entonces voy a dejar vacío el primer parámetro. Vea que hay una acción podemos agregar un registro de consola dentro del cuerpo de la función, agregar registro de consola, y luego simplemente agregar algunos textos de hola. Dale a esto un guardado y luego pasa al navegador. Ahora, si hacemos click en nuestro logo para hacer una solicitud a nuestro sitio, pasar a Visual Studio Code y ahora podemos ver abajo en la parte inferior tenemos los textos de hola, reintentos un par de veces más. Por lo que sigue dando click en esto para hacer una solicitud. Vemos por cada solicitud obtenemos el registro de consola de hola. Dentro del navegador sin embargo, si echamos un vistazo al icono giratorio en la parte superior, vemos que nuestra aplicación comienza a colgarse. Es porque el middleware está destinado a ser pasado y aquí no hemos agregado en la próxima convocatoria para pasar a la siguiente pieza de middleware de la cadena. Por lo que básicamente está atascado en su ruta. Vamos a pasar a nuestra app.use, y luego dentro de nuestra función, voy a golpear a continuación, darle un ahorro. Ahora si recargamos, podemos ver que podemos recargar esta ruta tantas veces como queramos y sigue funcionando. Por lo demás, el objeto de solicitud que tenemos aquí, tenemos acceso a una propiedad llamada la ruta. Esto devolverá el nombre de ruta de la solicitud actual o básicamente la URL actual. Echemos un vistazo a esto. Digamos que la ruta actual es, y luego agregar al final la solicitud, que es este objeto justo aquí ruta de punto. Ahora dale un ahorro y luego ve a cualquier ruta. Por ejemplo, vamos a avanzar apuntarse a barra inclinada, pulse Enter. Ahora en Visual Studio Code, elevemos esta terminología aquí, y podemos ver aquí nuestro camino actual es la inscripción en barra hacia adelante. Este es el registro de la consola que configuramos justo aquí. Ahora voy a poner esta URL disponible para su uso como variable la cual tendrá acceso a cualquier plantilla. Por lo tanto, podemos hacer algún renderizado condicional más adelante, lo que nos permitirá sólo mostrar cierta información en base a la ruta actual. En primer lugar, reduzcamos estos hacia abajo para hacer algo más de espacio y eliminar nuestro registro de consola, dejando en sólo la ruta de punto de solicitud. Ahora esta solicitud ruta de punto se puede asignar entonces a los locales res dot. Por lo que res dot locales es igual a la ruta de punto de solicitud. Esto asignará entonces nuestra ruta de punto de solicitud al objeto local, que está en la respuesta. También podemos darle a este local en particular o a esta variable local un nombre de nuestra elección. Para mantenerlo descriptivo, voy a llamar a esta URL de punto. Por lo tanto, podemos acceder a esta variable o esta ruta en nuestras plantillas por su nombre local de URL. ¿ Qué significa esto ahora para nuestros proyectos? Bueno, ahora significa que podemos acceder a esta URL local en cualquiera de nuestras plantillas dentro del proyecto, porque es middleware, que configuramos justo aquí, siempre se pasa por cada solicitud. También estaremos agregando más locales así como así a medida que vamos por este proyecto. Por ejemplo, para que los mensajes flash estén disponibles también en todas las plantillas, pero esta variable URL, ahora podemos usarla para renderizar condicional. El renderizado condicional nos permite mostrar ciertos datos dependiendo de una condición. Al igual que cuando usamos un if afirmaciones. Será realmente útil para nosotros en este proyecto. Dado que estamos reutilizando plantillas, ahora solo podemos mostrar ciertas partes de las plantillas, por ejemplo, en ciertas rutas o podríamos mostrar u ocultar ciertas partes de esa plantilla, dependiendo si un usuario está conectado. Lo primero que quiero hacer es quitar los botones de actualización y eliminar para ciertas rutas. Entonces si vamos a nuestra página de inicio y hacemos clic en alguno de estos hoteles, y me desplaza hacia abajo, vemos que tenemos este botón Actualizar y Eliminar Hotel, que se está mostrando en esta ruta aquí. Esto es algo que sólo queremos mostrar en las rutas admin. Para ocultar estos, podemos hacer uso de la renderización condicional para sólo mostrar si la URL o la ruta comienza con barra inclinada hacia adelante Admin. Por lo que pasa al hotel_detail.pug. Guarda nuestro app.js. Comencemos primero por crear un if Statement usando nuestra variable URL. Justo después del punto hotel div, indíquelos en un nivel if url, que es el nombre de la variable local, que ahora pasará a todas las plantillas y luego usará dot startsWith. Añada los corchetes después. StartsWith es un método regular de JavaScript que será cierto si pasamos una cadena dentro de los corchetes, que coincide con el inicio de la URL. Por lo que para comprobar si la URL comienza con forward slash admin, podemos agregar esto en como una cadena. Ahora bien, si sangramos estas cuatro líneas aquí, que son nuestros botones. Ahora si nuestra URL comienza con forward slash admin, todo lo que está anidado dentro de esta declaración if, es decir, nuestros botones ahora se renderizarán condicionalmente de lo contrario, cualquier otra cosa que no esté anidada dentro, como nuestro hotel mixin, seguirá exhibiendo independientemente de la ruta. Por lo que pasa al navegador y vamos a darle una oportunidad a esto. Si se recarga y luego se desplaza hacia abajo, podemos ver que estos botones ahora faltan en la parte superior de nuestras plantillas. Probemos un poco más, abra la página de inicio, vea todos, haga clic en cualquiera de estos, y ahora aún faltan los botones. Probemos la ruta admin y comprobemos el botón si están ahí. Así que avance slash admin, y luego bajar a Editar, quitar hotel. Busquemos cualquier nombre de hotel. Entonces hotel 7, esto ahora muestra el hotel 7, y aún tenemos las actualizaciones y los botones de borrar. Porque nuestra URL comienza con la barra hacia adelante admin. Bueno, este renderizado condicional ahora está funcionando con nuestra variable URL. Otro uso para esta variable se terminará en nuestro hotel.pug mixin. Entonces abramos la barra lateral. Mixins y luego hotel.pug. Finalmente podemos hacer uso de la descripción del hotel que tenemos disponible, pero solo mostrar esto en necesidad vista del hotel. Entonces justo después del nombre del hotel, mantén cualquier línea horizontal. Vamos a crear otra declaración if usando nuestra URL. Así que puntosCon, esta vez podemos pasar en una cuerda que es barra hacia adelante todo y luego barra hacia adelante. Anidados por dentro aquí podemos establecer un elemento p que es igual a hotel. Por lo que es hotel_description como una nueva línea horizontal justo debajo para separar esto de la calificación estelar, el país, y el precio. Guarda esto y luego pasa a nuestro navegador. Probemos con la página de inicio. Ahora vemos que nuestro hotel está listado sin descripción. No obstante, si hace clic en uno de nuestros enlaces para pasar a la página de detalles del hotel. Ahora vemos descripción ahora se agrega a nuestras plantillas, pero porque solo hacia adelante inclinamos todas las rutas. Si pasamos a nuestra página de inicio y luego también damos click en ver todos. Aquí también vemos todos nuestros hoteles, pero sin descripción. Pero estas rutas también comienza con barra hacia delante todos. Esto puede parecer un poco confuso por qué no estamos viendo la descripción en esta página dos. Si miramos un poco más de cerca y pasamos a nuestra plantilla, después de todo vemos la barra lateral hacia adelante. Si pasamos a nuestras rutas en nuestro index.js, teniendo barra delantera todo, y luego barra hacia adelante derecha al final solo coincide con esta segunda ruta por aquí, lo que renderiza nuestro detalle de hotel. Ya que usamos una barra delantera adicional y también nuestra ruta de todos los hoteles aquí solo es barra hacia adelante todo sin nada al final, es por ello que esta descripción solo funciona en la página de detalles del hotel y no en la ruta de todos los hoteles, que tenemos aquí. Haremos más uso de esta variable URL para el curso, pero a continuación vamos a estar manejando display en nuestros hoteles en base a un país en particular. 33. Hoteles por países: Si nos dirigimos a la página de inicio de nuestros proyectos y luego nos desplazamos hacia abajo, abajo hay hoteles, y bajamos a otros países, que tenemos justo aquí. Tenemos una lista de países que cuentan con hoteles ubicados en el interior. Si hacemos clic en cualquier enlace individual de hotel, como este, esto nos llevará a una ruta de /países y luego /nombre del país. Actualmente obtenemos un 404 porque aún no se maneja su ruta, como vemos aquí, estaremos arreglando estos en este video mostrando una plantilla, que mostrará todos los hoteles en la base de datos que se encuentran en este país en particular. Como de costumbre, vamos a trabajar de nuevo en nuestro index.js. Limpiemos algunas de estas pestañas por ahora. Index.js. Bajemos a nuestros /países y luego sumamos una nueva ruta que está por debajo de ésta. Ya que sólo estamos consiguiendo una plantilla, podemos usar una solicitud get, así enrutado o se pone, y luego podemos usar /countries, igual que vemos ahí dentro. Después añade nuestro nombre dinámico de país como parámetro. Ese es el colon, y llamemos a esto el país. Esto también va a utilizar el controlador del hotel y luego podemos crear hoteles por país. Si las rutas tiene un segmentos dinámicos para capturar el país desde la URL. Vayamos a nuestro controlador de hotel. Crear hoteles por función de país, y luego podemos agarrar esta sección dinámica de la URL. Controlador hotelero abajo en la parte inferior, vamos a configurar esto como normal, comienza la exportación. Hotel por país marcará esto como una sincronización, pasando en la solicitud, la respuesta, y también siguiente. Añadamos nuestra sección try. Atrapar cualquier error y luego como de costumbre, pasaremos esto al siguiente. Empezaremos por capturar el país a partir de los parámetros generales, y esto es igual que lo hicimos antes con el hotel. Vamos a establecer obedecer constantes llamadas CountryParam, y esta es la solicitud.. params.Country. Entonces podemos configurar nuestro método de búsqueda para buscar en nuestra base de datos por el país. Columnas, vamos a llamar a esto las listas de países, porque va a estar almacenando una lista de países que coincidan con nuestro parámetro, esperaremos hotel.Find, y luego para solo devolver nuestros países, podemos pasar en nuestros objetos pasando el campo Country con el que quieres hacer coincidir y luego coincidir con nuestra variable CountryParam. Antes de pasar estos datos a nuestras plantillas, primero hagamos un res.json para ver qué datos se están devolviendo de la base de datos. res.json, para luego pasar en nuestra lista de países, que debería almacenar una lista de países. Nos da el save y luego recarga y asegúrate de que sigues en las mismas rutas que antes, que es /countries y luego un país en particular justo después. Ya que estamos en esta ruta de Estados Unidos, solo vemos países disponibles en Estados Unidos. El hotel de prueba se creó antes, era el país EE.UU., y este hotel siete es Estados Unidos también. Es posible que solo tengas uno por país dependiendo del país en el que hayas hecho clic. También podemos cambiar esto en la URL. Cambia México, y aquí vamos. Tendremos hotel nueve y también hotel 10, que están en el país de México. Esto se ve bien. Ahora tenemos los datos del hotel que necesitamos pasar a nuestras plantillas. Ahora podemos reemplazar nuestro res.json por un res.render. Vamos a estar creando una plantilla llamada hoteles por país. Usando los guiones bajos separados por coma, podemos agregar nuestros objetos los cuales se convierte en contener el título o navegar por país, y luego también dentro de aquí podemos añadir una sección dinámica, que va a ser el nombre del país que estamos mirando. Estamos en esto con el símbolo, las llaves, y luego dentro de aquí podemos agregar en el CountryParam, y como ahora estamos usando algunos datos dinámicos en nuestra cadena, también necesitamos cambiar estas citas para que sean ticks de vuelta. Cambiar estos son el punto y coma al final y así como su título. También podemos agregar una coma y también posiblemente en nuestra lista de países, que son los datos y vamos a estar necesitando dentro de las plantillas. PaísList y danos guardar. La etapa final, como ya saben, es crear estos hoteles por country y.pug Archivo, y asegurarse de deletrear correctamente. Abrió la barra lateral dentro de la carpeta de todas las vistas, crea un nuevo archivo llamado hoteles por country y.pug. Esta plantilla como todas las demás extenderá nuestro diseño y reemplazaremos el bloque llamado contenido. Dado que sus plantillas también estarán mostrando la lista de hoteles, también necesitamos incluir nuestros mixins. Incluir Mixins/_hotel, o hotelmixin. También podemos pasar en nuestro título, h2 igual título. Ahora necesitamos recorrer todos los datos en nuestro controlador de hotel. Quien vio en este país los datos se almacenan en una variable llamada CountryList. Vamos a crear un bucle. Cada hotel en CountryList, crea un envoltorio de.hotel_wrapper e impulso en nuestra mezcla con el símbolo plus, plus hotel, y también pasando los datos individuales del hotel desde nuestro bucle. También podemos añadir un bloque de más aquí en caso de que no se encuentren coincidencias para este país, mostrar esto en un ítem de la lista. No hay hoteles, y una vez que tengas una plantilla que se vea así, démosle un ahorro a esto y luego recarguemos. Ahora voy res.json se reemplaza con nuestras plantillas. Ten un error, busquemos la vista hoteles por país. A ver qué está pasando. Tenemos un error ortográfico, así que hotel, y esto son hoteles, así que simplemente cambia este nombre de archivo dentro de nuestras vistas. Renombrar, solo agrego una S al final de eso. Vuelva a cargar el navegador. Ahí está nuestro dinámico nivel dos rumbo o navegar por país, cuando impulso en el nombre del país, y hay un hotel nueve y también el hotel 10, que vimos antes dentro de la JSON. Probemos algunos países más y veamos si todo esto está funcionando. Volvamos a la página de inicio. Abajo hasta el fondo. Probemos con Jamaica. Tenemos el título dinámico, y este país está en Jamaica. Abajo a Holanda como nuestro título, y nuestro hotel libre, que está dentro de los Países Bajos. Excelente, este es otro paso en nuestro proyecto, que ya terminamos. Creo que ahora tenemos mucho de esto funcionando. Ahora deberíamos tomar un descanso de agregar nuevas características y seguir adelante y agregar un poco de estilo CSS para que se vea un poco más bonito. 34. Cómo aplicar estilo al encabezado: pantalla pequeña: Ahora es el momento de hacer que nuestro proyecto se vea un poco más bonito con algo de CSS. Voy a empezar peinando la sección de encabezado para la vista de pantalla pequeña. Empecemos por reducir el navegador. Así que reducir esto hacia abajo y luego de nuevo en Visual Studio, también podemos hacer esto más pequeño también, abrir la barra lateral dentro de nuestro archivo público o carpeta pública. Demos click en esto y luego tenemos una carpeta de hojas de estilo con nuestro style.css, luego cerrar la barra lateral. Dentro de aquí tenemos algunos valores por defecto, estilismo, que se proporciona con el generador express. Por lo que voy a seleccionar todo y eliminar. Para empezar, voy a agregar algo de estilo general al HTML en secciones de cuerpo. Entonces como el selector HTML y luego declaramos queremos que el fondo sea blanco. Después bajamos a una sección de cuerpo y por supuesto, siéntete libre de hacer cualquier cambio para que esta app sea más personal o sígueme si prefieres el mismo estilo. Entonces el fondo para la sección ósea, voy a darle a esto un valor con el hash de eee, el centro esta dentro del navegador y podemos usar el margen cero también establecer el peso máximo del cuerpo para ser 1500 píxeles. Esto asegurará que en monitores realmente grandes, el contenido no esté demasiado estirado y finalmente, algún relleno en el límite de cero en la parte superior e inferior y advierte M a la izquierda y a la derecha. Entonces guardamos esto y recargamos. No deberíamos ver demasiada diferencia por ahora, pero sólo podemos ver el color de fondo gris, la bolsa descentralizada y también un poco sobre él. Desde arriba voy a empezar con los enlaces de navegación, que son estos justo aquí y estos tienen un envoltorio de nav dentro de aquí. Voy a cambiar el tipo de pantalla para hacer uso del flex-box. Entonces display flex, y luego podemos ajustar la dirección del flex a la columna. Esto establecerá los elementos flex de arriba a abajo. También la propiedad align items al centro y también declaró el color de fondo. Tanto el logo. Por lo tanto, establece el fondo en un volumen usando el hash para los valores hex de 4dc2ca Recargar esto. Ahí vamos. Por lo que ahora nuestros artículos ahora están centrados en medio de la página, y también tienen el mismo color de fondo que un logotipo. Parece como si también hubiera algunos impagos, márgenes y llanuras por aquí. Pongamos a trabajar con nuestra lista desordenada. En primer lugar, elimina cualquier valor predeterminado puesto en una URL, y luego usa un poco más a la izquierda. El elemento de lista individual. Podemos hacerlos un poco más grandes ajustando el tamaño de fuente a 1.2 em. El display para ser inline-block y luego también el margen de cero en la parte superior e inferior y diez píxeles en la izquierda y la derecha. Recargar. Está bien, bien. Por lo que ahora nuestros ítems de lista están en bloque en línea, por lo que se mostraban a través de la página en formatos en línea y además siguen por debajo del logo porque dijimos la dirección de flujo de columna en los elementos de navegación, que incluye el logotipo y también nuestro elementos de lista. Por lo que abajo a nuestra lista de artículos aquí. Entonces podemos apuntar también a los enlaces. Entonces, en primer lugar, si configuramos la decoración del texto para que no se guarde recarga, y esto eliminará los valores predeterminados en la línea de nuestros enlaces. También podemos eliminar este color predeterminado estableciendo el valor de color, quiero usar un color RGB. Por lo que el primero es valor rojo de 43, 40, y 40. El refresco verde y azul, que nos dará este color gris más oscuro. Si pasamos a nuestro archivo de salida de diseño. Así que abre la barra lateral en las vistas, y el diseño que se engancha a un formulario en la parte superior. Agregamos un wrapper classof.search nav, que es el envoltorio principal para todos estos elementos de formulario dentro de nuestro encabezado y también cada entrada individual también tenía un contenedor de entrada de puntos rápido también. Por lo que volveremos a nuestro style.css y comenzaremos a trabajar con nuestro formulario dentro del encabezado. En primer lugar, el envoltorio principal que era el nav de búsqueda. Entonces search_nav. Los antecedentes. Voy a establecer esto en un valor hexadecimal de, c1e6e9. entonces asegúrate de que esto se deletree correctamente. Dale ese ahorro y ahora tendremos el color azul claro 404. Un poco de relleno por dentro aquí también, solo tienes que añadir algo de espaciado de 0.5 em. Entonces a continuación voy a pasar a todos estos elementos en especie de forma configurando el tipo de visualización para que sea flex. También podemos darle a estos una dirección flex de columna para la vista móvil. Posteriormente, también los cambiaremos para que vuelvan a la fila predeterminada, que luego los mostrará en toda la página cuando tengamos más espacio disponible. Entonces vamos a apuntar a estos en el CSS. Tenemos search_nav y sólo podemos seleccionar el formulario que está dentro de esta clase aquí. Significa que los estilos que están dentro de aquí sólo se mostrarán a esta forma en particular y ninguna otra forma en todos los lados. Por lo que tipo de pantalla o flex. El flex dirección de la columna. Entonces este es un hecho y algún recuperador y entonces podemos seguir adelante y apuntar a los insumos individuales. Por lo que las entradas individuales para el verde más pequeño, no necesitaremos ser el ancho completo de la página. Establezca el ancho para que sea 100 por ciento. Podemos declarar las alturas de 20 píxeles. Guarda esto, y vuelve a cargar. Está bien, bien. Añadamos también algunos márgenes y patrones para darte un poco de espacio en. El relleno. Por lo que 0.5 em en la parte superior e inferior y cero en la izquierda y la derecha. Ancho completo sesgado fácil. Entonces también algún margen en la parte superior, espacio fuera de los de arriba y todos necesitamos un poco de margen de 0.3 em. Guarda y luego vuelve a cargar. También voy a eliminar este borde predeterminado alrededor de las entradas. Entonces vamos a establecer el borde para que sea un valor de cero. Recargar, y ahora tenemos esta línea gris quitada de cada una de las entradas. Por el momento en la vista móvil, si escribimos en uno de estos destinos, la línea de texto está sobre en el lado izquierdo. Voy a cambiar esto para estar en el sensor mediante el uso de la propiedad de alineación de texto del centro y también agregar algo de radio de frontera. Por lo que cada una de estas entradas de cinco píxeles. Ahorra luego vuelve a cargar esto y ahora podemos ver cómo ahora se centra el texto, y tenemos un poco de radio en cada una de las entradas. Después hasta el input refer, que rodea a cada una de nuestras etiquetas en combinaciones de entrada. Tan solo para agregar algún margen en la parte superior e inferior para sacar algo de espaciado de espuma y también alinear este texto dentro del sensor para la etiqueta. Por lo que apunta a la entrada en una envoltura de escala, el margen, los valores superior e inferior de 0.5 em, y luego cero en la izquierda y los derechos. Podemos alinear nuestras etiquetas con una línea de texto de centro. Guarda y luego vuelve a cargar. Ahora los códigos se ven mucho más bonitos dentro de la vista móvil. Ahora podemos agregar algunos toques finales a las entradas seleccionadas y también el botón está abajo en la parte inferior. Podemos seleccionarlos por el nombre del elemento. Por lo que seleccionar y botón. Declaremos las alturas de 36 píxeles. El ancho en la pequeña pantalla del 100 por ciento. Tanta parte del resto de las entradas y también eliminar el borde por defecto configurando para ser ninguno. Guarda y luego actualiza. Está bien, bien. Entonces necesitábamos un alfa de una forma. Lo último que quiero hacer es apuntar solo a los botones para darle a esto un color de fondo de azul cadete y además nos den un radio de borde de cinco píxeles. Tanto el resto de los insumos. Está bien, recargar. Bien. Nuestra sección de cabecera en nuestro formulario ahora se ve mucho más bonita en la vista pequeña. Si nos desplazamos hacia abajo el toque final que voy a hacer en este video es establecer estas cabecera imagen playa y también cualquier otra imagen en el sitio para que sea 100 por ciento para beneficiar al contenedor en lugar de desbordar como vemos si nos desplazamos a el derecho. Por lo que abajo del botón, selecciona todos los elementos de imagen. Establezca el ancho para que sea 100 por ciento. Refresca, y al instante se ve mucho mejor ahora. Bien. Nuestro encabezado ahora se ve mejor en la vista de pantalla pequeña la próxima semana haga clic en para continuar estaremos estilizando para tamaños móviles tanto aplican estos a un hotel como a países. 35. Cómo estilizar el contenido: pantalla pequeña: Con el estilo de cabecera ahora completo para nuestra vista móvil, ahora podemos bajar a un estilo en el área de contenido, que tiene los hoteles y también los países. Si pasamos a nuestro pug de punto índice. Abre la barra lateral en las vistas y luego nuestro pug de punto índice. lado aquí tenemos un envoltorio exterior, que es éste justo aquí. Después anidados dentro tenemos un envoltorio de hotel que va por la sección hotelera, y luego una envoltura de país, o la sección de país hacia abajo en la parte inferior de nuestra página de índice. Vamos a nuestro estilo dot css y comencemos a trabajar con el envoltorio externo. Hacer un comentario. Esta es la sección de contenido. Hoteles y países, vista. De acuerdo, así que empecemos con el envoltorio externo de puntos, con el marcador bajo. Este es un envoltorio para básicamente todos los hoteles y países que vemos en la página de inicio aquí. Lo vamos a utilizar para alinear el texto al centro y también establecer el tamaño de la fuente. El text-align propiedad, de centro y un tamaño de fuente de un em. Establezca esto, y luego vuelva a cargar. Ahora podemos ver nuestro título y también toda la información del hotel ahora está alineada al centro. Ahora al punto hotel div. Este era el envoltorio que usamos dentro de cada hotel. Si vamos a los mixins y luego hotel dot pug, le dimos a cada hotel un envoltorio de hotel dot así que vamos a usarlo ahora en el css. debajo del envoltorio exterior apuntan al hotel. De acuerdo, entonces vamos a darle a cada hotel individual un color de fondo de blanco, para que se destaque contra el fondo Gris. Fondo de blanco y también algún margen de cero en la parte superior, cero a la derecha, uno em en la parte inferior, y cero a la izquierda. Si ahora guardamos esto y luego nos refrescamos, ahora vemos el color de fondo blanco y también el margen en la parte inferior separa cada hotel. También dentro de este mixin, tenemos los campos de texto dentro de un div llamado hotel info. Volver a nuestro dot hotel dot pug, tenemos esta sección de información del hotel la cual contiene el nombre del hotel, y también en el detalle del hotel, tenemos la descripción y también la calificación de estrellas, el país y el precio. Es básicamente todos estos textos que vemos en cada hotel. Por el momento, si hace clic en cualquier hotel individual y luego desplácese hacia abajo, luego fueron llevados a la vista de detalle del hotel. Todo el texto dentro de aquí está cerca del borde. Podemos arreglar esto con algo de relleno. Estilo dot css, el hotel underscore info. Todo lo que necesitamos hacer aquí para arreglar esto, es agregar algo de relleno de un em y luego recargar. Ahora ten algo de espaciado alrededor del título, la descripción, y también la información hacia abajo en la parte inferior. A continuación, voy a pasar a nuestros formularios. Si pasamos a nuestro administrador, deberíamos hacer esto un poco más grande para poder ver la URL. Admin y luego reenviar barra inclinada agregar. Desplázate hacia abajo hasta nuestro formulario, y actualmente nuestro formulario no se ve muy bien. Pongámonos a trabajar en esto ahora. Reduzca el navegador de nuevo hacia abajo. Ya hemos agregado ciertos nombres de clase dentro de nuestros puntos de vista. Vamos a agregar hotel, cerrar esto. Tenemos esta forma hotelera la cual se renderiza como mixin. Si pasamos a esto tenemos cada grupo de formulario individual con la etiqueta una entrada rodeada por este envoltorio de entrada de formulario. Esto se puede utilizar más en el style.css. En primer lugar, entrada de subrayado de forma. Podemos agregar algún margen. Si agregamos un em y luego cero, esto sumará un em de margen a la parte superior e inferior. Dar en algún espacio entre cada entrada. Entonces podemos seguir adelante y apuntar a la entrada individual y también al área de texto. Porque queremos que esta etiqueta aparezca a la izquierda de cada entrada. Para empezar, si establecemos cada entrada para que sea el ancho del 70 por ciento, para que sea un poco más estrecho, esto nos dará entonces el espacio para agregar una etiqueta a la izquierda. Nos dirigimos a la entrada de formulario, y luego a cada entrada individual y luego también necesitamos apuntar al área de texto también. Establezca el ancho para que sea del 70 por ciento. También la línea de texto para estar a la izquierda. Guarda y luego refresca. Está bien, eso es mejor. Ahora a nuestra etiqueta. Nuevamente, la entrada de formulario. Pero esta vez vamos a estar apuntando a la etiqueta. Establezca la pantalla para que sea inline-block. Entonces dale a esto un ancho de 20 por ciento para asegurarse de que esto encaje en la misma línea que la entrada. Si recargamos, ahora tenemos cada etiqueta a la izquierda de la entrada. Sobre esta área de texto, quitamos el borde de todo el resto de las entradas y les damos un radio de borde de cinco píxeles. También aplicemos esto al área de texto para que coincida. El borde de ninguno y luego el radio de borde de cinco píxeles, y coma, para luego recargar. Ahora es exterior coincide con el resto de las entradas. Entonces finalmente abajo en la parte inferior tenemos este gran botón confirmado dentro de la forma hotelera. Si bajamos a botón en la parte inferior, le dimos a esto una clase de botón pequeño. Vamos a copiar esto y otra vez en el estilo dot css agregar el punto y pegar esto en. Hagamos esto más pequeño agregando el ancho de 100 píxeles, y también algún margen de 0.5 ems para darle algo de espaciado, por debajo del navegador. Ahí vamos. Ahora el botón de volver al administrador y también nuestro botón de confirmación en la parte inferior ahora está usando este botón clase pequeña. Ahora esto se ve mucho más bonito para nuestras pantallas pequeñas. Volver a la página principal y desplácese hacia abajo y todo se ve más o menos como debería ser. No obstante, si estiramos el navegador, hacemos esto realmente ancho, las cosas empiezan a parecer un poco demasiado estiradas. Esto es algo a lo que pasaremos en el siguiente video, donde comenzaremos a peinar la vista más grande agregando en una consulta de medios. 36. Cómo estilizar la pantalla grande: Si hacemos de nuestro proyecto el ancho completo dentro del navegador, ahora se ve un poco estirado porque hasta ahora nos hemos centrado en los tamaños de pantalla pequeños. Ahora agreguemos algo de CSS dentro de una consulta de medios para solucionar esto. Hasta nuestro style.css, justo en la parte inferior del archivo, agregamos la consulta de medios con un medio. Quiero estar apuntando al ancho mínimo del navegador de 1,000 píxeles. Abre las carreras de código. Se puede tener una jugada con qué tamaño funciona mejor para usted, pero voy a ir por unos puntos de rotura de 1,000 píxeles y luego comenzar por la parte superior con la navegación. Seleccione los elementos de navegación y asegúrese de que esto está dentro de estas llaves de consulta de medios. Ahora estamos en el verde más grande. Arriba en la parte superior, tenemos la sección de encabezado superior establecida para ser una dirección flex de columna, lo que significa que el logotipo y también los enlaces de navegación son insalvables. Ahora voy a cambiar la dirección del flex para estar de vuelta a ser fila, lo que significa que el logo estaría en el lado izquierdo, y luego los enlaces estarán a la derecha. Hacemos esto con dirección flex y satisfacer fila, recargar. Dentro de nuestra sección de navegación, tenemos el nav, que es un enlace para nuestro logo, y también tenemos la otra lista para nuestros dos enlaces aquí. Quiero iniciar el valor flex para que el logotipo sea un valor de uno, y luego la otra lista sea un valor de dos, lo que significa que ocuparía el doble del espacio disponible sobre el lado derecho. Podemos entonces alinear los textos hacia la derecha para asegurarnos de que esto esté sobre el lado derecho del encabezado. Empecemos con el nav a. Si va al layout dentro de un aquí tenemos nav y luego el a nido adentro, y esto es para nuestro logo de imagen. Entonces la otra lista que no es del mismo nivel, por lo que este va a ser un valor de flujo de uno, y este será el valor flex de dos, haciéndolo el doble del espacio disponible. Dentro de nuestro nav a, esto va a retomar el valor flex de uno. Entonces nuestro nav ul será el valor flex de dos. Guarda esto y vuelve a cargar. No vemos demasiada diferencia pero si entramos en las herramientas de desarrollador pasamos el cursor sobre nuestro navegador, vemos el contorno azul para la una parte. Entonces si vamos a la otra lista, podemos ver que esto es el doble del ancho disponible. Volver al estilo. Después del flex, podemos agregar la alineación del texto para estar en el lado derecho, empujando hacia el borde del div. Pero esto es probablemente un poco demasiado cerca del borde, por lo que un pequeño margen a la derecha arreglará esto de un m Recargar. Ahora tendremos una barra de navegación más adecuada para una pantalla más grande. Bien. Ahora bajando al formulario de búsqueda a continuación. Ahora tenemos muchas columnas configuración como esta es mejor para la vista móvil. En la pantalla más grande como esta, queremos cambiar la dirección del flex una vez más para ser fila, por lo que es más adecuado para el espacio más disponible. Debajo de nuestro nav ul, vamos a apuntar a la búsqueda en el marcador nav. Si vamos al layout.pug y luego abajo a formar, este es el envoltorio exterior para toda la forma. Después de style.css abre las llaves y luego podemos ajustar la dirección del flex para que vuelva a ser fila. No hay cambio. De hecho, sólo tenemos que apuntar también a la forma dentro aquí y probar esto, y allá vamos. Sigamos con este estilo flex. Justificar el contenido para estar en el centro. Esto nos dará un espaciado igual en el lado izquierdo y derecho. Entonces después de esto, el flex wrap, vamos a establecer esto en un valor de wrap para que pueda fluir en líneas adicionales. Entonces finalmente, alinearemos los ítems para ser flex end. Esto alineará todos los insumos verticalmente. Ahora si guardamos este empujaré estos insumos para estar ahora en línea con el resto de éstos. Esto nos da la forma horizontal que queremos, pero sigue un poco aplastada. Sólo al crear esta forma que rodeaba cada entrada con un div, con la clase de entrada Rapa. Si pasamos a nuestra disposición de pug, dentro de nuestra forma, podemos ver esto justo aquí. Esto es redondo y cada uno de nuestros grupos de etiquetas y de entrada. Pasado al style.css y de nuevo, aún dentro de esta consulta de medios, ahora podemos apuntar a estas clases que fue dot input_wrapper. Establezcamos el margen para que sea cero para eliminar cualquier defecto. El padiano para ser 0.5ems. Guarda esto y luego vuelve a cargar. Ahí vamos. Ahora podemos ver que el patrón ha sumado algún espacio entre cada una de estas entradas. También restringe estos para que sean un peso máximo de unos 170 píxeles así que no se estire demasiado lejos. Después también establece la alineación del texto para que esté de vuelta a la izquierda. Espere la recarga y ahora tendremos algo de espaciado adicional alrededor de cada una de estas entradas. Desplazándose hacia abajo hasta los hoteles y países, el texto para los encabezamientos que se ven aquí y también para los hoteles, sigue heredando las alineaciones centrales en la vista móvil. Yo quería es apuntando al div envoltorio externo. Recuerda antes dijimos la envoltura externa savvy.outer wrapper class. Si nos desplazamos hacia arriba este era uno justo aquí que envuelve todos los hoteles y países en la página de inicio. Desplázate hacia abajo, podemos anular las alineaciones de texto dentro de la consulta de medios dot outer_wrapper, podemos restablecer la alineación del texto para que esté a la izquierda. Refrescar. Ahora a cada hotel individual. Voy a estar usando el flex box para cada uno de estos hoteles. Vamos a configurar el tipo de visualización sobre en el CSS. Después del envoltorio exterior, seleccione el hotel dot, que es el div, que está rodeando cada hotel en el mixin. El tipo de pantalla de flex. Después recargar. Así es como ahora se ven nuestros hoteles por defecto. Todavía necesita un poco de trabajo para quedar bien sin embargo. Si vamos a nuestro hotel mixin, que es subrayado hotel.pug. Haz esto un poco más grande. Agregamos clases tanto a la sección de imagen, que es imagen de hotel justo aquí, también a la sección de entrada. Ahora podemos usar estos en el CSS para hacer que nuestro hotel se vea mucho más bonito. Volver al style.css. Vamos primero por el hotel img. Danos un valor flex de uno, y también algún margen de un m para dar algo de espaciado. Guardar y recargar. Podemos apenas ver el margen en el exterior de la imagen. Ahora a la info del hotel, que es el texto a la derecha. so.hotel_info. También podemos darnos un valor flex de uno para que esto sea igual a la imagen. Después algunos patrones, agrega un poco de espaciado cero en la parte superior e inferior. Después un m a la izquierda derecha. Guarda esto y luego vuelve a cargar. Ir a la página de inicio ahora se ve mucho mejor. No obstante, si hacemos clic en un hotel y subimos a la vista del hotel y nos desplazamos hacia abajo. El CSS que agregamos también aplica a este detalle completo del hotel también. Yo solo quiero que esta imagen y hotel estén de lado a lado. Cuando enumeramos todos los hoteles en la página principal y también en la vista de todos los hoteles. En primer lugar podemos restringir el CSS para que solo se aplique a la vista de todos los hoteles en el todos los hotels.pug. Busquemos esas plantillas. Todos los hotels.pug, abramos esto. Rodeamos el interior del hotel aquí con un envoltorio de.hotel. Significado que podemos usar esto para ser más específicos sobre dónde estamos aplicando nuestro estilo. Esto se puede hacer agregando esta clase envolvente antes de la clase de hotel en el CSS. Vuelva al style.css, vamos a copiar esto. Entonces justo antes de el.hotel, agreguemos el envoltorio del hotel, dándonos un selector CSS más específico. Guarda esto, y luego se recarga. Todavía en la página de detalles del hotel. Ahora hemos eliminado el flexbox de esta vista lo que significa que ahora tenemos el contenido apilado en una imagen de tamaño completo. Solo revisemos en la página de inicio. Todavía se ve bien. Gracias click en todos los hoteles, y la habilidad flexbox entra en vigor en esta vista también. Para terminar las cosas, y quiero mostrar los países como una cuadrícula. Si pasamos a la página de inicio y luego nos desplazamos hacia abajo hasta la parte inferior. Aquí tenemos a los países abajo, pero los no se ven demasiado grandes. Hay dos lugares donde exhibimos los países. Él en la página de inicio y también si haces click en ver todo, en este enlace aquí. Esta es más o menos la misma vista que la página de inicio. Ambas plantillas tienen un div con la clase de envoltura country. Primero se termina en el index.pug. Abre esto en el índice de vistas. pug. Tenemos contorno arriba abajo aquí, rodeando nuestros países, y también en los todos los países plantillas tenemos el mismo div justo aquí para mantener las cosas consistentes. También estos países son sacados como una lista más, que podemos ver aquí.. Podemos usar esto más en el CSS. Volver al style.css y luego abajo al fondo en la info del hotel. Seleccionemos nuestro envoltorio de país. Otra lista. Podemos establecer el tipo de visualización para que sea cuadrícula. Tenemos tres columnas porque como las columnas de plantilla de cuadrícula a repetir. Entonces dentro de los corchetes queremos repetir estas tres veces usando la unidad de un fr para hacerlas iguales. Para espaciarlos, también podemos agregar el hueco de cuadrícula, que miró temprano en el transcurso de 20 píxeles. Después también alinear el texto para estar en el centro. Guarda esto y luego echemos un vistazo a esto en el navegador. Recargas, y esta es la ruta de los países de corte delantero, que parece tener algún texto audaz de la NASA echará un vistazo a esto. Entonces si vamos a la página de inicio y justo abajo, también tenemos la cuadrícula para la página de inicio. Déjate echar un vistazo a este texto en negrita. Demos click en ver todos. Podemos ver que es justo aquí. Pasemos al archivo de todos los países.pug. Creo que es sólo un problema de sangría. Tenemos un nivel dos rumbo aquí, y luego dentro de la h2 tenemos todo anidado por dentro. Vamos a pasar todo esto para ser el mismo nivel que el h2 en lugar de anidar por dentro y recargar. Eso está mucho mejor. Haga clic en un país. Después nos lo llevan a la vista del país donde vemos nuestros dos hoteles disponibles en República Dominicana dentro de nuestra lista. Una vez más, podemos ver lo fácil que es usar la cuadrícula CSS. Hemos alineado muy bien un diseño de cuadrícula con solo unas pocas líneas de código. Volveremos al CSS más adelante y agregaremos algunos cambios más a medida que avancemos. Algo que puede haber notado aquí es cuando se trata con los países en la página de índice y también en las plantillas de todos los países, si vamos a pasar a nuestra plantilla aquí, estamos reutilizando el mismo flujo de código a diferentes plantillas. Arreglaremos esto en el siguiente video moviendo a nuestros países a un mixin reutilizable. 37. Mezcla de países: Cuando hemos repetido código en múltiples plantillas, a menudo es mejor poner esto en una mezcla separada, y esto es lo que estaremos haciendo ahora con la lista de nuestro país. En ambos el index.pug. Abajo en la parte inferior tenemos un ítem de lista que pondré a nuestro país. También en todos los países.put plantillas, tendrán el mismo ítem de lista, mostrando nuestro enlace y nuestra imagen de país. En ambas plantillas, recorreremos estos países y mostraremos tanto la imagen como el nombre como una lista. Ya sabemos usar mixins. Vamos a seguir adelante y crear un nuevo archivo en la carpeta mixins para mostrar estas listas de países. Abre la barra lateral. Dentro de la carpeta mixins, vamos a crear un nuevo archivo. Subrayar país, lista de subrayado con la extensión.pug. Vamos a darle un nombre a este mixin. Por lo que la lista de países mixin se está mezclando pasando más allá de un país a la salida Por lo que también podemos agregar esta variable en. Después guarde este archivo. Después, en el archivo de todos los países.pug, podemos recortar el elemento de lista, el enlace, y también la imagen. Agarra estas tres líneas justo aquí codifica esto y luego podemos seguir adelante y agregarlas a nuestro país mezclando, pegarlas en, y asegúrate de que la sangría sea correcta. También moveremos el ítem de lista, por lo que no está en el nivel real. Entonces esta es nuestra mezcla ahora se ve bien. Podemos guardar esto, y luego volver a los todos los países.pug y luego arriba en la parte superior podemos incluir el archivo mixin. Después de los diseños de extiende, incluya los mixins, barra inclinada hacia adelante y luego subraye la lista de guiones bajos del país. Recuerda que no necesitas la extensión de pug. Entonces podemos agregar la mezcla por su nombre en lugar del ítem de lista, que ponemos sangrada en un nivel. Dentro de nuestro bucle, llamamos a esto la lista de países. Esta lista de países también va a tomar en el país, que se pasa de nuestro controlador. Ahora podemos guardar este archivo y luego irnos a todos los países, que actualmente estamos en estos momentos. Recarga esto. Vemos ahora los países están en su lugar, pero esta vez siendo sacados de un mixin. Ahora todo lo que tenemos que hacer es repetir esto para el index.pug que es este archivo justo aquí. En primer lugar, podemos incluir el segundo mixin. Por lo tanto incluir mezclas/. También tenemos el hotel mixin, pero esta vez es la lista de subrayados del país. Entonces podemos bajar y agregar esta mezcla en lugar de nuestro ítem de lista. En primer lugar, recuerda en este archivo accedemos al nombre del país con el ID de subrayado y el enlace y también la imagen. Esto se debe a que dentro de nuestro hotel controller.js, si vamos a los filtros de la página de inicio, agrupamos los países distintivos con este grupo en escenario con la clave de subrayado ID. Principalmente, procesaremos ID en el mixin para que funcione. Entonces, eliminemos las líneas libres desde el fondo. Podemos reemplazar esto sin mezclar lista de países, y también ponemos en nuestro país. _ID. Si guardas, ahora esto es para la página de inicio. Vaya al índice y luego desplácese hacia abajo por debajo de los hoteles, ahora tenemos nuestra lista completa de países en la página principal también, así como la lista de todos los países. Significa que nuestra mezcla ahora está funcionando y hemos reducido nuestro código duplicado. 38. Promise.all y desestructuración de matrices: Dentro del controlador del hotel, creamos los filtros de la página de inicio al inicio del curso. Tal vez recuerden que la otra vez dijimos que estamos usando múltiples llamadas de espera, al igual que hemos hecho aquí, no siempre es una buena idea. Hacer esto está perfectamente bien, sin embargo, si la segunda llamada de espera depende de que la primera termine antes de que esto se ejecute. Por ejemplo, si el primero espera en la parte superior aquí, salva el hotel, y luego la segunda espera llamada necesaria para acceder al ID del hotel, entonces tendría sentido mantenerlos ambos de esta manera para asegurar que tengamos listo el ID del hotel para el segundo uno cuando sea necesario. Pero aquí, estamos bloqueando, sacando a los países de la base de datos hasta que esta primera sección de espera haya terminado, y esto no tiene sentido. Lo que realmente queremos hacer es patear a estos dos al mismo tiempo. Para esto, tenemos algo llamado promesa a todos. Prometer a todos es un método que básicamente es una promesa gigante que envuelve todas las demás promesas en su interior. Tal vez pensando: “¿Qué tienen que ver las promesas con la espera asíncrona?” Bueno, la espera asíncrona también devuelve una promesa, así que echemos un vistazo a esto en acción. En primer lugar, eliminemos las dos palabras clave espera ya que ya no las necesitamos. Ahora, vamos a ver algunas nuevas técnicas que introducirán en ES6 o ES2015. En primer lugar es lo que se llama destrucción. Más específicamente, para este ejemplo, vamos a estar buscando la destruccion de array. Podemos usar esto para básicamente crear una matriz de nombres constantes, luego asignarlos a una matriz de valores que desempaquetamos. Suena complicado, pero es bastante simple cuando lo vemos todo mecanografiado. En primer lugar, vamos a crear una constante para empezar. Después de nuestros países, justo aquí abajo, hagamos algo de espacio, creemos una constante. Esta vez, esto va a ser una matriz de valores. Pasando dos valores, el primero, voy a llamar a FilteredCountries, y luego el segundo, FilteredHotels. He nombrado a estos países y variables hoteleras filtradas porque estos resultados se filtran usando el ducto de agregación, entonces usamos promesa a todos lo que también es nuevo en ES6. Esto igual a, ahora, vamos a esperar, promesa con P mayúscula, .all. Como dijimos antes, promesa.Todo toma en múltiples promesas, por lo que puede pasar en nuestros países y también nuestras variables hoteleras dentro de aquí. En primer lugar, pasemos por los países y esto tiene que ser una matriz, y también nuestros hoteles. Ahora, esta promesa.Todo, que tenemos aquí, ahora se resolverá una vez que tanto los países también las promesas hoteleras hayan resuelto con éxito. tanto que antes, usar esperar individualmente, en lugar de sólo una vez aquí, esto provocó que ambos corrieran en orden. Ahora, podemos activarlos ambos al mismo tiempo, lo que resulta en un rendimiento más rápido. En cuanto a la destruccion de array, estos países y también las promesas de los hoteles, entonces se desempaquetarán básicamente, e instalarán en los nombres constantes que ponemos aquí en el mismo orden. Posteriormente se desempaquetarán los países, se instalarán en FilteredCountries. Una vez resueltos, también los hoteles se almacenarán después dentro de las constantes FilteredCountries. Echemos un vistazo a un ejemplo más para ponernos la cabeza alrededor de todo esto. Podemos dejar este código en porque esto es lo que necesitamos para el curso. Pero este sólo va a ser un ejemplo sencillo, así que no necesitas teclear si no quieres. Una consonante de comida. Pongamos esto en una matriz y añadamos algunos valores alimentarios de queso, pescado, y también arroz. Entonces una constante de a, b, y c. Ahora, b, y c. Ahora, si queremos desestructurar todos los valores de esta matriz e instalarlos dentro de los tres valores aquí pero en orden, por lo que a se convertirá en queso, b será pescado, y c será igual al arroz. Todo lo que necesitamos hacer es establecer estos valores iguales a nuestra matriz de alimentos. Después una serie con un res.send. Enviemos el valor de a. Comprueba si esto está funcionando y comenta nuestro res.render. Guarda esto y también estamos en la página de inicio. Vayamos a localhost:3000. Ahí está el valor del queso. Probemos b y también c, que debe ser arroz. Recargar. Ahora, obtenemos el valor del arroz también, lo que significa que nuestra matriz de alimentos ahora está desempaquetada y luego almacenada en las tres constantes justo aquí. Esto es más o menos lo mismo que estamos haciendo arriba con nuestras variables filtradas. Entonces estamos fijando estos a nuestros países y las promesas de hoteles una vez que se hayan resuelto los datos. Ahora, dejemos este ejemplo y [inaudible] nuestro res.render. Bien. Ahora, tenemos nuestros dos nombres constantes, nuestros FilteredCountries, y FilteredHOTELS. También necesitamos pasarlos a nuestra plantilla en lugar de nuestras viejas constantes aquí. Este es FilteredCountries y éste es FilteredHotels. También como estos nombres de variables ahora se cambian, también necesitamos cambiarlos en la plantilla para que coincidan. El template es el index.code. Entramos aquí. Para el hotel, en lugar de recorrer en bucle los hoteles, necesitamos recorrer FilteredHOTELS. Entonces haz lo mismo con los países. Esta vez, usemos se filtra Países. Entonces guarde. Ahora, todo lo que queda por hacer es probar esto de nuevo en el navegador. En la página de inicio, toca refrescar. Todavía podemos ver a nuestros hoteles siendo sacados de la base de datos, y también a los países abajo también. Esto significa tanto nuestra destrucción como también nuestra promise.All método ahora está funcionando con éxito. Cuántos hoteles tenemos dentro de nuestra base de datos, cambiando tanto nuestras promesas de correr a la vez en lugar de uno tras otro, probablemente no haya ganado mucho en rendimiento, pero es una mejora útil sin embargo, y algún conocimiento extra que es útil tener. Este tipo de código es algo que será más notable en una aplicación más grande. 39. Variables de entorno: En este video, vamos a estar usando lo que se llama variables de entorno. Este básicamente será un archivo de configuración separado dentro de nuestros proyectos. cual enumera todos nuestros nombres de cuentas de usuario, contraseñas y detalles de autenticación, todo en un solo lugar. Esto tiene ciertos beneficios. Por ejemplo, mantiene nuestra información secreta en un solo lugar, lo que significa que es más fácil ignorar este único archivo al compartir nuestros proyectos todos empujan a un servicio como GitHub. Significa que nuestro código está de una manera mucho más segura para la seguridad. Cuando se alcanza hasta la producción, muchos proveedores de hosting también detectan estas variables de entorno, lo que hace que configurar nuestro hosting sea aún más fácil y esto es algo que veremos más adelante cuando empujemos nuestra aplicación a Heroku. También si una reutilización alguna de estas variables, como la formación de pasaporte en múltiples archivos, cambiar o arrendar un archivo configure es mucho más fácil. Para esto, voy a estar usando un paquete de nariz llamado.env. Esto nos permitirá básicamente crear un nuevo archivo con extensión.env y esto se utilizará para almacenar nuestras variables en su interior. Por el momento, la única información sensible que tenemos se almacena dentro de nuestro app.js. Abramos esto. app.js, es esta información aquí, que es nuestra conexión a base de datos pero estaremos agregando información más sensible en próximos videos cuando nos conectemos a Cloud Storage para imágenes. En primer lugar, podemos importar el paquete como de costumbre dentro de la terminal. Abajo en la parte inferior usamos una instalación npm, cerramos el servidor y ejecutamos npm-i, luego en.env. Danos un momento para tirar de un paquete desde mpm. Solo reiniciemos el servidor. ¿ Npm correría sus cosas? Entonces ahora si abrimos nuestra barra lateral, podemos seguir adelante y crear el archivo Config, que vamos a estar usando para almacenar todas nuestras variables en su interior. Cierra esto hacia abajo. Entonces en la raíz del proyecto crea en un nuevo archivo, que es sencillo.env y asegúrate de que esto esté en la raíz junto al app.js. Después agregamos nuestras variables usando nombre, pugs de valor y también usando las mayúsculas también. Voy a usar DB, que es para nuestra base de datos, y luego satisfacer la variable DB para ser igual a una base de datos, URI. Esto se acabó en el app.js, abre esto, entonces podemos citar nuestro URI de base de datos y la conexión, sacar esto con las cotizaciones y luego pegar esto como nuestra variable DB. Detrás de bambalinas este modulo env, tomaremos todas las variables que creamos dentro de este archivo y las agregaremos a lo que se llama los objetos process.env, que se proporciona con nodo. Este objeto contiene información sobre el entorno de usuario como nuestro nombre de usuario y también el directorio de usuarios. Se agregaron las variables dentro de este archivo, también se agregarán a este objeto también y es así como accedemos a ellas dentro de archivos antiguos. Para entender esto mejor, podemos dar salida a este process.env objetos y ver qué incluye. Si vamos al HotelController y luego vamos a los filtros de la página de inicio, que son antes. Hagamos cualquier registro de consola y veamos qué incluye. En la parte superior de nuestra sección de clientes, vamos a agregar un registro de consola, luego se registra en la consola, el process.env y luego ir por.User, que es mayúsculas.. USUARIO es una de las propiedades en estos objetos y contiene el nombre de usos actual. Si guardamos esto, tire hacia arriba de la terminal y vaya al navegador, vaya a nuestra página de inicio, se recarga, luego pase a Visual Studio Code. Si nos desplazamos hacia arriba, ahora vemos el nombre de usuario de Chrisdixon, que se almacena dentro de este uso de variable. A la par de muchas cosas más que también están en estos objetos. También podemos acceder al presente directorio de trabajo con.PWD, guardar esto y luego volver a cargar el navegador de la terminal. Si nos desplazamos hacia abajo después de las dos líneas verdes donde se ha reiniciado el servidor, podemos ver la ruta actual al presente directorio de trabajo. Por último, también puedes probar nuestra propia variable DB que acabamos de crear. Cambiar PWD para ser DB. Recarga el navegador, Desplácese hacia abajo y vemos el valor de indefinido hacia abajo en la parte inferior aquí. Esto se debe a que necesitamos requerirlo primero dentro de nuestro proyecto si funciona y dentro del app.js es donde vamos a agregar esto para que esté disponible lo antes posible dentro de nuestros proyectos. Entonces app.js, vamos a subir hasta la parte superior, sobre todas estas variables y luego requerir dentro de los corchetes, el paquete.env. No necesitamos dejar esto dentro de una constante ya que no necesitamos volver a acceder a ella dentro del archivo pero en su lugar, dijo.config con el punto y coma en los extremos, que pasa el contenido del archivo env y lo asigna al process.env objetos, que miramos antes, entonces podemos intentar de nuevo volver a cargar el navegador. Guarda este archivo, recarga nuestros proyectos. Ahora vemos un problema dentro del navegador. Si vamos a Visual Studio Code, ahora podemos ver algunos mensajes de error dentro de aquí. Esto se debe a que ahora intentamos configurar nuestra conexión de Mangosta, pero tenemos una conexión vacía justo aquí. Por lo que en cambio ahora podemos pasar en nuestra variable DB, la cual usted la crea antes. Podemos agregar lo mismo al igual que hicimos dentro del log de la consola con process.env.db para nuestra variable. Guarda esto y ahora si recargamos el navegador, todo esto está funcionando de nuevo y luego desplázate hacia abajo hasta la parte inferior de la terminal. Ahora podemos ver que todos estamos poniendo nuestra variable de base de datos, cual todavía tenemos en el registro de la consola justo aquí. Ahora eliminemos es registro de consola ya que ya no necesitamos esto y asegurémonos de que esto siga funcionando en el navegador. Bien. Si aún ves la información de la base de datos, como nuestros hoteles y también los países abajo en la parte inferior, todo sigue funcionando pero mediante el uso de variables de entorno. Agregaremos más variables a en el siguiente video, donde veremos el uso del almacenamiento en la nube con Cloudinary. 40. Manejo de envío de ficheros: momentos, nuestras imágenes para los hoteles almacenados dentro de nuestra carpeta de proyectos, guardamos en la base de datos, un nombre de archivo, que hace referencia a la imagen en nuestra carpeta pública. Esto está bien para las pruebas, pero también queremos un lugar donde almacenar nuestras imágenes, sobre todo cuando nuestra aplicación se empuja a la producción. No queremos que un administrador acceda a nuestros archivos de proyecto. Para ello, voy a utilizar un servicio llamado Cloudinary. Cloudinary es una plataforma de almacenamiento en la nube que nos permite subir imágenes y también videos. Puedes encontrar esto más en cloudinary.com. Estaré usando el servicio para subir nuestras imágenes desde la sección admin al crear un nuevo hotel. Después podremos recuperar esta imagen al mostrar nuestra imagen en nuestro sitio web. Cloudinary también tiene muchas características adicionales también. A pesar de que no estaremos entrando en ninguna de las características avanzadas de Cloudinary, hay mucho que puedes hacer, así que solo recortar, escalar y mejorar nuestras imágenes antes de la entrega, junto con agregar diferentes efectos. Pero durante este curso lo estaremos manteniendo lo más simple posible simplemente empujando y recuperando imágenes de Cloudinary. En primer lugar, necesitamos dirigirnos a cloudinary.com y crear una cuenta gratuita. Haga clic en el botón “Registrarse”, y luego agregue nuestro nombre dentro aquí, la dirección de correo electrónico, contraseña, y todo es opcional. Imagen en gestión de video y crear una cuenta. Quiero dar click en “Desarrollador”, “NodeJS” y también irá por otro click en “Siguiente”, y se cierra, y luego nos llevan directamente al panel Cloudinary. Verás que hay unos generosos límites de subida gratis y un tamaño más que suficiente para nuestro proyecto. Aquí podemos ver cuántos bytes hemos utilizado en nuestro almacenamiento actual. encima del lado derecho, podemos ver que podemos conseguir un almacenamiento extra de archivos al compartir en redes sociales. Pero tenemos más que suficiente para empezar. Arriba en la parte superior de la página, tenemos los detalles de nuestra cuenta los cuales necesitaremos conectarnos a Cloudinary, incluyendo nuestra clave API y nuestros secretos. Podemos copiar estos detalles y colocarlos en nuestro archivo ENV dot, cual creamos en el último video. En primer lugar, vamos a copiar el nombre Cloudinary. Haga clic en esto y luego en “Copiar”. Entonces otra vez en nuestro archivo ENV punto, empecemos una nueva línea y ésta puede ser nuestra CloudInary_name, y pongamos esto igual a nuestro nombre que descubrimos. También necesitamos una clave Cloudinary_API. Podemos establecer esto igual a nuestra clave API, que está aquí. Copia y pega esto en. El tercero que también necesitamos es el secreto de la API. Esto también se proporciona en el panel de control por lo Cloudinary API secret. Podemos ir al tablero. El secreto de la API está oculto por defecto así que haz clic en revelar, copia esto, agrega esto en, y dale a eso un guardado. Entonces necesitamos instalar el paquete NPM Cloudinary en nuestro proyecto. Para ello abajo en la terminal, cierre nuestro servidor, control y C. Entonces nosotros el comando NPM, yo, cloudinary. Recuerda, yo solo soy el atajo para instalar y doy algunos momentos para jalarlo desde NPM. Parece que tuvimos un error ortográfico. [ inaudible]. Vamos al paquete dot JSON y verifique que esto esté instalado. Tienes a Cloudinary como dependencia. Ahora podemos ir a nuestro controlador del hotel así que cierra esto, ve a nuestro controlador del hotel en la carpeta de controladores. Estaremos accediendo a Cloudinary usando nuestro controlador de hotel por lo que necesitamos requerirlo en este archivo JavaScript. Arriba en la parte superior configura una constante de Cloudinary. Esto es igual a requerir, y este es un paquete no por lo que simplemente hacemos referencia a esto por su nombre, punto y coma al final. Entonces podemos configurar nuestro objeto de configuración Cloudinary, que almacenará todos los detalles de conflicto que hemos colocado en nuestro archivo ENV de puntos. Justo aquí, accedemos a nuestra configuración de punto variable Cloudinary. Este es un objeto en el que pasas. En primer lugar, necesitamos establecer el cloud_name, esto es igual a nuestro CloudInary_name el cual guardamos en el archivo dot ENV. Recuerda podemos acceder a estas variables con process.env. Después vienen las letras o nombre de Cloudinary. Vamos y nombremos. El siguiente que necesitamos, que está separado por una coma, es nuestra API_key. Nuevamente, la mayor parte de esto a nuestra variable de entorno así process.env CloudInary_api_key, y el último que necesitamos es el secreto API. Este es el process.env en el último fue el Cloudinary_api_secret. Al cargar imágenes, no es sencillo como manejar las otras partes de nuestros datos de formulario, como los campos de texto para el nombre y la descripción. Si pasamos al hotel_form, que es un mixin. Abre la carpeta mixins. Abre hotel_form. Actualmente al guardar nuestro hotel, utilizamos la codificación predeterminada, que maneja todas nuestras entradas basadas en texto, que no tiene aquí. Actualmente tenemos un archivo de entradas para la imagen. Tenemos las entradas con el tipo de archivo, pero presente no estamos realmente guardando una imagen. Todo lo que estamos haciendo es guardar un nombre de archivo, que ahí coincide con un archivo dentro de nuestra carpeta pública. Al guardar imágenes en un formulario usando una solicitud de post, que estamos aquí, necesitamos cambiar la codificación del formulario para que sea lo que se llama datos multipart/formulario. Justo después de nuestro método, podemos agregar el tipo de tinta y “multi-part/form-data”. Esto permitirá que nuestro archivo de imagen también se incluya con nuestra solicitud de post. No obstante, ahora necesitamos agregar algún middleware a nuestra aplicación express, que sabe manejar estos datos multipart/form-data. Para esto, estaré usando un paquete llamado Multer. Multer básicamente tomará nuestras imágenes las cuales subimos y luego nos permitirá hacer algo con ellas. Puede guardar las imágenes para insertarlas en ubicación de archivos o incluso alguna memoria, que es lo que estaremos haciendo en este proyecto. Podemos entonces empujar estas imágenes a Cloudinary. Lo primero que tenemos que hacer es instalar el paquete NPM abajo en la terminal. NPM, yo y luego Multer, que es M-U-L-T-E-R. También estaremos usando esto en el controlador del hotel, así que vuelve a esto, haz click en este archivo. También podemos requerir esto en la parte superior. Viene multer igual requieren multer punto y coma al final y como dijimos antes, multer nos da control total sobre dónde almacenamos estas imágenes. Podemos seguir adelante y configurar esto ahora. Apenas nuestra config. Decimos constantes de almacenamiento y establecemos esto igual al almacenamiento de discos de punto multer. Después pasando objetos AMC. Dentro del almacenamiento en disco, podemos establecer un objeto de opciones para configurar una carpeta o destino donde desee guardar estas imágenes. No voy a estar haciendo esto porque voy a estar guardando estas imágenes en Cloudinary. Por lo tanto, no necesitamos configurar una carpeta de almacenamiento en este caso, si solo dejamos vacío estas opciones, como vemos aquí, en su lugar se utiliza el directorio predeterminado del equipo para guardar archivos temporales. Entonces multer sí mismo también toma en opciones objeto dos. Dentro de aquí vamos a pasar en nuestra variable de almacenamiento, que fue creada. Simplemente volvamos un multer donde nuestros archivos serán tiendas. Ya tenemos esto cubierto con la variable de almacenamiento justo aquí. También podemos pasar filtros de archivos para restringir tipos de archivo aceptados y también cualquier límite de subida también. Pero sólo voy a mantenerlo así para mantener las cosas bonitas y sencillas. Podemos entonces guardar esto dentro de una constante, por lo que podremos acceder a esto pronto. Voy a llamar a esta constante la subida y poner esto nuestro objeto multer. La siguiente etapa después de esto es decirle a multer solo queremos aceptar archivos individuales. Esto lo hacemos accediendo a nuestra variable de subida, la cual fue creada, y luego dot single, por lo que esto le dice a multer, solo queremos subir una sola imagen a la vez. Multer también tiene opciones para manejar una matriz de archivos. Se puede ir y consultar la documentación. Si esto es algo que te interesa. Dentro de una sola, pasamos en un nombre al cual voy a llamar imagen dentro de las citas como pasar imagen dentro de aquí. El único imagen estará disponible para nosotros ya que multer la agregará al objeto de archivo punto de solicitud. Este nombre de imagen que pasas justo aquí, es un nombre de campo utilizado al pasar la imagen para solicitar archivo dot. manejo de esta imagen será un proceso de etapa libre o etapas libres de middleware. El primer paso que es subir la imagen y guardar en la memoria que acabamos de manejar arriba. Para agregar esto a nuestro middleware, primero necesitamos exportarlo. Sólo por nuestra subida ya podemos exportar subida de puntos. Establece esto en nuestro sencillo de punto de subida. Después agrega esto a nuestro router en la cadena de middleware. Vamos al punto índice JS dentro de nuestras rutas. Localicemos las rutas admin que tenemos aquí. Queremos agregar esto al agregar un nuevo hotel. Tenemos que acudir a la solicitud de post para admin/add. Aquí actualmente tenemos una pieza de middleware llamada create hotel post. Esta es la etapa final, que está guardándola en la base de datos. Pero primero podemos pasar un cargador de archivos y así añadirle esto a una línea separada. Entonces sólo tienes que seguir esto, podemos acceder a la subida de puntos del controlador del hotel separados por una coma. Ahora este es nuestro primer y último paso en nuestra configuración. En el siguiente video, vamos a terminar las cosas creando una nueva pieza de middleware para guardar nuestras imágenes en Cloudinary antes de empujar nuestro hotel a la base de datos. 41. Cómo guardar imágenes en la nube: Hicimos algunos buenos avances en el último video, configuramos nuestro archivo de configuración nary en la nube, manejamos los datos del formulario de slash multi-parte desde nuestro formulario y también configura el middleware molto para manejar el guardado de la imagen. En este video, vamos a estar manejando la siguiente etapa, que es tomar este archivo de imagen que cargamos y luego empujarlo a nube nary. También manejando cualquier error en el camino. Esto también se configurará como una pieza de middleware. Por lo que pasa al archivo index.js. Esto necesita colocarse entre la carga de la imagen, que hice en el último video y luego la etapa final en la base de datos. Asegúrate como coma justo al final aquí y luego podemos añadir el controlador del hotel. Entonces la siguiente etapa, que es empujar a Cloudinary añadir una coma al final. Esta solicitud de post cuando agreguemos un nuevo hotel, pasará por estas tres piezas middleware en orden. En primer lugar, subir la imagen, después guardar en cloudinary y luego pasar a guardar el hotel en la base de datos. Encima en los controladores del hotel dot js, podemos crear push a Cloudinary. Justo debajo de nuestras exportaciones dot upload, podemos sumar exportaciones hacia empujar el Cloudinary iguala nuestras peticiones responde. Entonces siguiente configura nuestro cuerpo de funciones. El primero que tenemos que hacer es comprobar si hay una imagen dentro de cualquier declaración. Si solicita archivo dot. Multiply dice este archivo en los objetos de solicitud bajo el nombre de archivo. Aquí comprobamos si este archivo existe porque sólo queremos empujar el archivo a Cloudinary, si la imagen realmente está ahí. Hay un caso en el que la imagen no está ahí. A agradable al actualizar un hotel. El admin majors quiere ser obtenido en la descripción o en una de las entradas basadas en texto. Después se deja el archivo subir vacío. Entonces después de esto podemos agregar un enunciado L. Esto va a pasar esto al siguiente, que luego pasará a la siguiente pieza de middleware si no existe ningún archivo. Esta siguiente pieza de middleware es la publicación de crear hotel, como dijimos en el archivo de índice de routers. Dentro del bloque if, accedemos al er de subida de Cloudinary. Después usa el método de subida de puntos Cloudinary. Este método de subida, subiremos una imagen la cual pasamos. Podemos acceder a este uso necesita solicitar punto archivo punto ruta de punto. Entonces podemos usar un prometido un mango lo que sucede cuando la carga es exitosa. Justo después de esto, podemos quitar el punto y coma. Entonces podemos encadenar en un punto, entonces. Tan solo asegúrate de que esto se deletree bien. Dot entonces para crear nuestra promesa. Entonces dentro de aquí vamos a crear una función que tome en los resultados. Entonces configura nuestra función aquí dentro. Esta variable de resultado que tenemos aquí se estancará en la imagen que recuperemos de Cloudinary, que también incluye un ID público, que Cloudinary agrega a la imagen. A continuación, utilizaremos este ID público para hacer referencia a la imagen en nuestros proyectos estableciendo su valor para solicitar la imagen de punto cuerpo de punto punto. Solicitar punto body dot imagen es igual a nuestros resultados, los cuales recuperamos. Entonces está el guión bajo público ID, el cual se devuelve de Cloudinary. Esta solicitud de imagen dot body dot es impulso para crear post hotelero, que es la siguiente etapa en el middleware. Este ID de imagen no se guarda cuando guardamos el hotel en nuestra base de datos Mongo. Para trasladar esto a nuestro post de creación de hotel, necesitamos llamar a siguiente. Agrega esto justo después. Esto pasará a crear post hotelero, que es la última etapa en nuestro middleware, que usted acaba de aquí. Como ya sabemos necesitamos terminar una promesa agregando un enunciado catch para manejar cualquier error y redirigir a la misma página que somos. Justo después del punto entonces podemos entrenar en la captura de punto final del día. Esta es también una función donde podemos agregar un redireccionamiento de puntos res. Esto va a redirigir a la página actual, por lo que forward slash admin slash add nos da guardar. Ahora podemos ir al navegador y añadir un nuevo hotel. Abajo en algunos no queriendo ejecutar NPM o DEF arranca. Parece que tenemos un error así que vamos a tirar de esto hacia arriba. Se trata de almacenamiento en disco multi punto. Tengo un almacenamiento constante igual a multer que match está justo aquí y almacenamiento en disco y que solo necesita V8K así que guarde eso y luego vuelva a crecer verde, ve a nuestro proyecto en el navegador, se recarga. Ahora ya estamos bien para ir otra vez. Encima a nuestro admin, forward slash admin, suena que Boltzmann, podemos agregar un nuevo hotel y a nuestro formulario. Solo agreguemos una prueba. Diremos imagen de prueba. Ojalá tuviera alguna descripción ahí dentro. Haga clic en cualquier hotel. Calificación estelar realmente no importa. A continuación, haga clic en confirmar para guardar este hotel. Esta es una buena señal ahora lo redireccionaremos al hotel que acabamos de crear. Pero vemos que ninguna imagen se está mostrando en la parte superior. Entremos a las herramientas de desarrollador y veamos qué está pasando. Haga clic derecho inspecciona, Desplácese hacia abajo, haga clic en nuestra imagen. Este nombre de imagen es ahora el ID público, que mencioné antes. Esto se debe a que configuramos la imagen de punto cuerpo de solicitud justo aquí para que sea igual a nuestra identificación pública, cual se devuelve de Cloudinary. Sin embargo, vamos a volver a enchufar esto del Cloudinary, ahora deberíamos ver la imagen que acabas de agregar. Cierra esto hacia abajo a Cloudinary y golpea recarga. Haga clic en la Mediateca. Además de videos de muestra e imágenes que proporcionaste, también vemos a nuestro hotel una imagen ahora se está subiendo a Cloudinary. Excelente, así que espero que esto no esté funcionando para que usted lo haga. En el siguiente video, también configuraremos nuestros hoteles para sacar las imágenes de Cloudinary y luego mostrarlas en nuestros proyectos. 42. Cómo recuperar imágenes de la nube: Estamos en buen momento ya que podemos salvar nuestros hoteles y también la imagen se guarda en Cloudinary. También establecemos el nombre de la imagen para que sea igual al id único, que es establecido por Cloudinary cuando subimos una imagen. Por lo tanto, necesitamos cambiar nuestra fuente de imagen Tántalo para que se muestren correctamente desde Cloudinary y no solo usando las imágenes de la carpeta pública. que podamos ir a nuestro Proyecto, ir a Inspeccionar, dar click en nuestra imagen justo aquí. Esta es la ruta del archivo que tenemos que modificar. Por lo que esto puede exhibirse con éxito en nuestro proyecto. Este es un efecto bastante fácil. En primer lugar podemos agarrar la URL de nuestro panel Cloudinary. Entonces ve a nuestro tablero justo aquí, da click en el enlace. Después para agarrar nuestra URL, necesitamos dar click en el enlace Más justo aquí, y tenemos una URL de entrega base. Entonces haz click en el desplegable, y aquí nos dan dos muestras diferentes, así que vamos a copiar la URL, que incluye nuestro nombre de nube en el medio aquí. Esto enlaza a nuestras cuentas, luego a nuestro hotel.pug, que es el mixin. Yo solo voy al Hotel, abramos esto. Podemos conectar esta línea hacia fuera y mantenerla en como referencia, pero necesitamos crear una nueva imagen elementos. Esta vez lleva a la fuente, y podemos añadirlos como backticks, por lo que podemos usar una variable. Después pega en nuestra URL. El último paso es reemplazar este sample.jpg al final por nuestro nombre de imagen único, cual se almacena como hotel.image. Para que podamos ver los literales de plantilla, abrir las llaves, y luego hotel.image, fuera de las llaves. También necesitamos agregar la extensión the.jpg. Si eso ahorra, ahora si pasamos a nuestro proyecto, haga clic en la “Página Principal” y luego haga clic en “Ver todo”. Si nos desplazamos hacia abajo, como era de esperar solo funciona nuestra prueba hotelera por ahora. Ya que el uso de imagen para esto fue subido a Cloudinary pero ahora el resto de la imagen se rompe porque estos se guardan como el nombre del hotel. Ahora eliminemos cualquier hotel de prueba que podamos tener en la base de datos y luego necesitamos ir por el resto de los hoteles y actualizar cada imagen. Esto es tan sencillo como salir a la sección de actualización del hotel del administrador, volver a subir la misma imagen. Esto luego lo empujará a Cloudinary y obtendrá una identificación única, pero hay una cosa que tenemos que hacer primero. ¿ Se puede pensar lo que puede ser? Al crear un nuevo hotel, pasamos por la subida y empujamos primero el middleware Cloudinary, que es openindex.js. Corremos por estas dos etapas antes de guardarlas en la base de datos. También necesitamos correr por estas mismas dos etapas cuando se actualice en. Entonces copia la subida, pushToCloudInary, y luego baja a admin, actualización de HOTelid que es la solicitud de post justo aquí, una vez que está en una nueva línea. Entonces justo arriba podemos pasar por las dos primeras piezas de middleware al actualizar dos, ya que esto también está manejando el mismo uploader de imagen, así que vamos a probar esto, así que más en el admin. De hecho podemos quitar nuestros hoteles de prueba, así que refresca el mLab y canta. Pasemos por cualquiera de estos, y esta es la prueba aquí. Haga clic en el icono “Eliminar” allí. También tenemos imagen de prueba. Eso debería poder ahora bajar a 12 imágenes. De vuelta al proyecto, vayamos a la sección Admin. También tenemos que ir ahora a las Actualizaciones, así que Editar, Eliminar, y luego desplázate hacia abajo. El primero es Hotel1, así que hagamos una búsqueda para esto. Haga clic en “Actualizar Hotel”, y luego todo lo que necesitamos hacer es dar click en la “Imagen”, seleccionar “Hotel1", y luego Confirmar. Ahora podemos ver ahora lo redirigimos a la vista de detalle del hotel, que ahora tiene la imagen. Si solo vamos a /all, deberíamos ver que el resto de las imágenes aún no muestran porque necesitamos pasar por cada una de estas y volver a subir la imagen. Ahora te voy a dejar con esta tarea de recorrer el resto de los hoteles y actualizar imágenes, luego remontarte en el siguiente video, donde llegaremos a trabajar en nuestro formulario de búsqueda hotelera. 43. Formulario de búsqueda de hoteles: parte 1: Arriba en la cima de nuestro proyecto, creamos hace algún tiempo un formulario de búsqueda hotelera. Hagamos que esto funcione en él para permitir que los usuarios sean más específicos sobre su reserva. No estaremos implementando un sistema de reserva en vivo pero aún usaremos las fechas para sumar al pedido de los clientes. Este formulario se encuentra dentro de nuestro archivo de layout dot pug. Si abres la barra lateral, el layout dot pug, y entonces tenemos nuestro formulario dentro de la envoltura de navegación de búsqueda justo aquí. Por el momento tenemos nuestro elemento de forma justo aquí pero no tiene atributos de acción o método. Adelante y sumémoslos ahora. Abre los corchetes y en la acción que va a ser igual a reenviar resultados de barra y luego el método y que puede ser una solicitud POST. Cuando enviemos el formulario, vamos a estar enviando estos dos resultados de barra inclinada hacia adelante. Ahora necesitamos manejar esta ruta dentro del archivo index dot js. El directorio rutas denominado index.js. Vamos a cerrar esto. Añadamos esto en. Pongamos esto justo después de los países. En la siguiente línea aquí, router, minúsculas, y esta es una solicitud POST. [ inaudible] presentando los datos del formulario. Dentro de aquí necesitamos agregar el router de resultados de barra inclinada hacia adelante. Es partido en forma. El controlador del hotel dot y esta función se va a llamar el punto y coma de resultados de búsqueda al final. Pasemos al controlador del hotel y creemos los resultados de búsqueda dentro de aquí. Abajo en la parte inferior, exporta resultados de búsqueda de puntos. Esta va a ser una función de sincronización, objeto de solicitud, la respuesta, y también siguiente, luego crear nuestro cuerpo de función. Dentro de aquí vamos a empezar con nuestro familiar try and catch block. Pase de captura en la era calibra y capacidades dinámicas a siguiente. También tomado en la época. Necesitamos capturar el contenido de nuestra solicitud de post y luego instalarlo dentro de constantes para que podamos usar esto dentro de la función. Dentro del bloque try, crea las constantes, y voy a llamar a la mía la consulta de búsqueda y esto es igual al cuerpo de punto de solicitud. Solicitud dot body almacena la información pasada de o post solicitud i.e Sólo información que se encuentra dentro del formulario. Se va a ejecutar la búsqueda por el ducto de agregación. En cada paso se tomarán nuestros datos de búsqueda y luego se reducirán los resultados. Empecemos configurando nuestra agregación y almacenamos esto dentro de una constante llamada datos de búsqueda. Conjunto D mayúscula es a esperar. Nuestro modelo hotel.Pensamientos, agregados, igual que hemos usado antes. Entonces dentro de los corchetes podemos pasar entre estos corchetes como una matriz para que podamos pasar en nuestras diversas etapas de la tubería de agregación. La etapa inicial de agregación va a ser la etapa de partidos dentro de las llaves. $ symbol match, al igual que usábamos antes y luego vamos a usar algo que aún no hemos visto esto, que es $ symbol text y se va a utilizar para crear una búsqueda de texto en nuestros campos hoteleros. Dentro de aquí, abre nuevamente los tirantes rizados, $ búsqueda de símbolos. Queremos mucho registros [inaudibles] al texto ingresado por el usuario. Esto se puede lograr utilizando este texto de símbolo $, el cual realiza una búsqueda tecnológica. Aquí estamos pasando en la búsqueda, que va a ser una cadena, que Mongo utiliza para consultar nuestra base de datos. Aumenta qué cadena queremos usar. Bueno, este es el destino de toda forma. Si volvemos a nuestro archivo de layout dot pug, el destino es la primera entrada justo aquí, que tiene este nombre de destino y esto también se pasa con la solicitud de post para que pueda acceder a él con la consulta de búsqueda punto destino. Vamos a agregar esto ahora, así que consulta de búsqueda, que es nuestra constante justo aquí, punto destino. Antes de ir más allá veamos qué datos nos devuelven. Podemos hacer esto si salimos de nuestra agregación, fue la siguiente línea y hacemos un res.json pasando en nuestros datos de búsqueda. Este es el dato que debería volver de MongoDB y se almacena dentro de esta variable justo aquí. Simplemente guardas y luego pasas a la página de inicio. Podemos crear una búsqueda. Yo no hice ningún detalle aquí dentro realmente no importa. Invitados y y hit Buscar. Ahora vemos si nos desplazamos hacia abajo hasta la parte inferior hay un error de índice de texto se requiere. Esto significa que necesitamos indexar en qué campos queremos buscar. Voy a hacer que el nombre del hotel y también el campo del país se pueda buscar por esta entrada de formulario. Un usuario podría buscar el destino, simplemente escuchar mucho nombre [inaudible] del hotel o agregando un país. Nosotros indexamos campos sobre en nuestro modelo hotelero. Vayamos a la barra lateral. Dentro de nuestros modelos abramos el hotel dot js. y justo abajo en la parte inferior fuera de nuestros objetos, primero comenzamos accediendo a nuestro esquema hotelero, que es el nombre de la constante. justo en la parte superior aquí. Volver abajo al fondo. índice de puntos dará a conocer el índice los campos que queremos buscar de nuestro modelo. Pasar en un objeto que toma en los campos. El primer campo que queremos buscar, ya que estamos buscando hoteles. Si vamos a mLab, dentro de aquí, queremos buscar los nombres de los hoteles. Tenemos el campo de nombre del hotel y también queremos buscar por país también. Podemos usar el campo country además de esto. Dentro de nuestro esquema, podemos sumar en estos dos campos. El primero es el nombre de subrayado del hotel y éste se va a establecer en una cadena de texto. Entonces podríamos hacer lo mismo con el país, ciudades para escribir también, golpear esa caja fuerte. También podemos agregar cualquiera de los campos aquí también como la descripción. Unsearch también se vería en su campo. Si también nos dirigimos a mLab una vez más, se recarga. Cuando su registro de entrada firmemos sin detalles. Haga clic en el nombre de nuestra base de datos en la parte superior. Si nos desplazamos hacia abajo así como nuestra colección hotelera que tenemos dentro de aquí, ahora podemos ver índices de punto del sistema, que tiene dos documentos diferentes. Si abrimos esto, puede parecer un poco confuso al principio, pero pronto ampliamos esto vemos una referencia a un nombre de hotel y también a nuestro país por lo que estos campos ambos configuran para ser incluidos en nuestra búsqueda. Ahora si pasamos al proyecto y luego recargamos el navegador, y hagamos una nueva búsqueda. Agrega nuestro país, nuestra duración y la fecha está bien. Se busca. Pero ahora recupera nuestros datos JSON, que coincide con nuestros dos hoteles en el país que agregamos dentro del formulario. Ahora hay un pequeño problema por el momento, si luego volvemos y hacemos algo como una búsqueda de hotel uno, hotel uno dentro de aquí. Recuerda indexando estos dos campos, también buscamos en el nombre del hotel así como en el país. Esto debería funcionar. Si buscamos sin embargo, ves una lista completa de todos los hoteles dentro de nuestra base de datos en lugar de solo decirnos uno. Este resultado se debe a que no estamos buscando el hotel completo como frase. En cambio, lo que sucede por defecto es que devolverá unas coincidencias para una palabra individual por lo que veremos todos los resultados para la palabra hotel y también cualquier cosa que coincida con el número uno también porque todos nuestros hoteles tienen la palabra hotel en él. Es por ello que vemos todos estos hoteles desde una base de datos devuelta. Para solucionar esto, podemos realizar un partido sobre la frase completa. Sólo el hotel uno sería devuelto para investigación mediante el uso lo que se llama escapa de comillas simples, que se ve así. Acude a nuestro controlador. Lo primero que tenemos que hacer es rodearlos dentro los corchetes porque vamos a estar usando datos dinámicos. Entonces podemos usar el símbolo $ y rodear esto en las llaves al igual que lo hemos hecho anteriormente. El siguiente cosa que tenemos que hacer es agregar nuestros escapes dobles comillas. Justo después del primer corchete, usamos una barras inclinadas y luego unas comillas dobles y luego hacemos lo mismo y justo después de este corchete rizado aquí con la contrasta y luego las comillas dobles. Las comillas dobles tratarán esto como una cuerda. Todas las palabras dentro de nuestra consulta de búsqueda se buscarán como una frase completa en lugar de palabras individuales que hemos visto antes. También tenemos que escapar de estas cotizaciones usando las barras inclinadas hacia atrás. Estas citas también se renderizan con el texto de la variable O. Deja saber a Mongo que la frase completa es que se busquen en lugar de las palabras individuales. Si ahora guardamos esto y luego actualizamos el navegador, continúa hasta la página de inicio. Ya puedes buscar el hotel uno. Haga clic en buscar. Ahora dentro de la vería hotel 10, 12, 11 y uno. Ahora solo vemos los hoteles que coinciden con la frase del hotel uno. Vemos el hotel número 10 porque empieza con el hotel uno, salva el hotel 12. Esto coincide con la primera parte de la frase número 11, y también nuestro hotel uno. Todo ese comportamiento puede no parecer del todo correcto ya que hemos nombrado a nuestros hoteles usando números. Este tipo de búsqueda sería más eficaz cuando estos hoteles tengan nombres más realistas. Significa que el usuario no necesitaría escribir el nombre completo del hotel. Es posible que solo recuerden parte del nombre del hotel, pero aún así obtendrán los resultados que necesitan. Volvamos a probar country, rodeado hotel uno. Vamos a escribir en México. Haga clic en buscar y ahora vea México aquí y también solo para llegar a. Bueno este primer campo no está funcionando. A los siguientes. Siguiente también es una fase mucho en ducto de agregación donde filtramos nuestros hoteles no disponibles. Agrega una coma justo después del primer partido. Podemos configurar nuestro segundo partido igual que hicimos arriba con el partido de símbolo tala. Abre los tirantes rizados. Entonces dentro de aquí podemos comprobar si los campos disponibles se establecen en un valor booleano de true. Ahora vayamos a mLab y pongamos uno de estos hoteles para que no esté disponible. Vamos por hotel número tres, haga clic en editar. La disponibilidad para ser falsa. Abajo en la parte inferior, disponible igual a falso. Ahorra y regresa. Ahora por supuesto, el proyecto está presionando el botón Atrás y luego cambia nuestro destino para ser simplemente hotel it search. Ahora tenemos hotel número tres, asentamiento disponible. Ahora si nos desplazamos hacia abajo, deberíamos ver todos los hoteles excepto el número tres. Sigue yendo derecho hasta el fondo. Genial. No vemos ningún hotel tres devuelto con nuestros resultados. 44. Formulario de búsqueda de hoteles: parte 2: A continuación voy a añadir un filtro para sólo devolver el del hotel mayor que la calificación estelar que buscamos. En primer lugar, si haces una búsqueda, una vez más para México, pulsa “Buscar”. Estos hoteles tienen diferentes calificaciones por estrellas. Podemos comprobar si nuestro filtro está funcionando. Dentro de la etapa de partidos. Podemos agregar más de un filtro. Pasemos a un controlador de hotel, y luego justo después de disponible de true, también podemos añadir una segunda etapa de partidos, y en esta ocasión queremos buscar la calificación estelar. Es star_rating como el nombre del campo el colon, luego abrir las llaves. Dentro de aquí una vez se ve el mayor que operador, que es $ símbolo GTE. Estamos comprobando si la calificación de estrellas es mayor que la consulta de búsqueda estrellas de punto. Ahora sólo debemos obtener resultados volver a nosotros de Mongo, cualquiera que sea la calificación estelar, mayor a lo que ha ingresado el usuario. Ahora si guardamos esto y luego pasamos al navegador, pulsa el “Botón Atrás”, y luego lo cambiamos para que sea un mínimo de cuatro. Golpea “Buscar”. Deberíamos ver sólo una devolución de hotel, pero en cambio parece que estamos recibiendo un error. Demos un pequeño paso atrás y averigamos qué está pasando aquí. En primer lugar, si volvemos a nuestro controlador, y luego dentro de aquí, podemos cambiar el res.json para que sean las constantes de consulta de búsqueda, por lo tanto podemos ver qué datos vienen de nuestro teléfono. Cambios para ser consulta de búsqueda, pulsa “Guardar” y luego vuelve a cargar. Obviamente aquí están los datos del formulario que se están enviando desde la solicitud de post. Si miramos un poco más de cerca, aquí es donde radica el problema. Todos estos valores JSON están rodeados entre comillas, al igual que las estrellas, y también el orden de clasificación, lo que significa que estos serán tratados como una cadena. Pero la calificación de estrellas en nuestra base de datos, si vamos a “mLab” desplazamos hacia abajo, esto se almacena como un número sin ninguna cotización, y es por ello que no obtenemos los resultados esperados. Podemos confirmarlo, primero reinstemos los datos de búsqueda. En nuestro res.json, satisface nuestros muros, comenta esta línea fuera, y luego podemos hacer res.send, y queremos enviar es el tipode consulta de búsqueda, estrellas de punto, el punto y coma al final. Esto luego regresará hacia el tipo de datos de búsqueda de las estrellas de punto de consulta. Guarda esto y luego vuelve a cargar los proyectos. Haga clic en “Continuar” y ahora veremos que obtenemos un tipo de datos de cadena. A pesar de que esperábamos un valor de un número por el número de estrellas. Esto se debe a que al enviar datos a un desde un servidor, se han enviado como texto sin formato. Por lo tanto, el cliente está interpretando esto como una cadena. Esto significa que primero necesitamos convertir este tipo de datos para que funcione, y tenemos un método Javascript llamado parse Int. Para ello, si vamos a la parte superior del bloque try justo después de nuestra consulta de búsqueda, vamos a crear una nueva constante llamada estrellas anarizadas y pongamos esto en nuestro método Javascript de análisis Int. Dentro de los corchetes, podemos pasar en la cadena que quiere pasar, y queremos pasar la consulta de búsqueda de estrellas punto. Copia esto y pega esto en. Esto les prestará pasar la cadena como un número usando el método parse Int, y luego la almacenará dentro de esta constante justo aquí. Podemos entonces utilizar esta constante dentro de nuestro ducto de agregación. Copiar estrellas analizadas, y luego en lugar de usar la consulta de búsqueda estrella de punto de antes, que ahora sabemos es una cadena. Ya podemos pegar esto en, pulsa “Guardar”. Entonces podemos hacer nuestro res.json descomentando esta línea y luego eliminar nuestro res.send hit “Save”, recargar el navegador, y luego podemos ir hacia atrás a todos los formularios. Ahora busca un mínimo de tres estrellas. Hit “Buscar” iremos con dos hoteles de México desde antes, retrocede y luego haga clic en “Cuatro estrellas” esta vez, Hit “Buscar”. Ahora solo obtenemos los retornos hoteleros individuales, que es estos rating estelar de cuatro. El último paso en este ducto es conseguir este trabajo de caja selecta aquí para resolver el precio de alto a bajo o bajo a alto. Esto podemos sumar una etapa fuente de la tubería de agregación. Volvamos a nuestro controlador. Después de la etapa de partido podemos agregar una coma, y luego justo debajo de esto, vamos a crear nuestra etapa de clasificación con un símbolo $ y luego ordenar, luego podemos agregar en el nombre de campo de costo por noche. No necesitaremos ser ordenados por el costo por campo nocturno, que ostenta el premio para el hotel. Esto necesita entonces tomar el campo de ordenación del formulario que se almacena en la consulta de búsqueda ordenar puntos pero es posible que ya haya anticipado un problema con esto. Al igual que la calificación estelar, esto también es un número dos. Tendremos que volver a utilizar el método parse Int en este campo. El campo de ordenación es un número porque si pasamos al bug de punto de diseño y luego nos desplazamos hacia abajo a un Select, que está justo aquí. Tenemos un valor ya sea de uno o negativo. El valor de uno devolverá los documentos en orden ascendente, y uno negativo volverá en orden descendente. Empecemos analizando nuestro número. controlador del hotel, justo después de las estrellas analizadas, podemos agregar un punto y coma, configurar una constante, esta vez llamada clasificación analizada. Eso es igual a nuestro método de análisis Int pasando en este tiempo la consulta de búsqueda, y luego dot sort, agrega un punto y coma al final, y ahora podemos usar esta constante de clasificación analizado en lugar de la consulta de búsqueda dócile de antes, dale a esto un guardado, sobre al navegador. Bajemos la calificación estelar para ser el número uno. Obtenemos nuestros dos retornos hoteleros de México y luego cambiarlo para que sea alto a bajo. Golpea “Buscar”. Ahora ten una advertencia por aquí así que volvamos, y sólo quiere ser capital yo, pego “Guardar” y luego “Recargar”. Ahí están nuestros dos hoteles en México. El costo es de 67, después de 56. Tan alto a bajo, pero voy a volver atrás y cambiar de bajo a alto, pega “Buscar” y ahora tienen 56 seguido de 67. Esto parece estar funcionando bien si regresamos y cambiamos a un destino diferente. En la República Dominicana también hay varios hoteles. Haga clic en “Buscar”, vemos nuestro país. El costo está en orden, volver atrás y cambiarlo de alto a bajo. Ahora estos también ordenados en orden numérico. Ahora tenemos los datos que necesitamos de la base de datos, a continuación, pasaremos a crear una plantilla de Resultados de Búsqueda para mostrar estos hoteles dentro de nuestros proyectos. 45. Plantilla de resultados de búsqueda: Ahora tenemos los datos JSON correctos, ahora regresamos de la base de datos. Ahora necesitamos crear una plantilla para mostrar estos datos al usuario. En primer lugar si pasamos a nuestro editor de texto, podemos crear una nueva plantilla de página llamada search_results. Así que abre la barra lateral, y luego baja a nuestro archivo Views, New, así que este es el search_results.pug. Entonces podemos reemplazar el res.json desde el controlador para renderizar esta plantilla de página. Entonces vamos a nuestro controlador, que es el hotel controller.js, vamos a la función de resultados de búsqueda y en lugar de tener este res.json, vamos a comentar esto, doble res.render. Podemos renderizar nuestras nuevas plantillas de página de resultados de búsqueda, coma, y luego opciones personales objeto con el título de resultados de búsqueda. Añadamos un punto y coma al final ahí. Entonces necesitamos pasar a la plantilla dos cosas. En primer lugar está la consulta de búsqueda, que contiene nuestra fecha de salida y también el número de noches. Esto se almacena dentro del req.body, que son los datos enviados desde el formulario. Entonces agrega una coma; y luego agrega nuestra consulta de búsqueda; y luego agrega una coma, y luego también podemos agregar nuestros datos de búsqueda, que son los datos de la base de datos después de nuestros filtros de agregación que ves aquí. Ahora podemos pasar a nuestra plantilla de resultados de búsqueda. Entonces guarde este archivo, vaya a la search_results.pug. Esto va a extender los diseños. Podemos incluir nuestros mixins. Entonces mixins/_hotel, porque estaremos reutilizando este mixin para mostrar todos los hoteles como una lista de nuestros resultados de búsqueda. Después de esto agregaremos nuestro contenido de bloque, nuestro h2 para el título, y luego necesitamos recorrer cada uno de los hoteles en este dato de búsqueda, que nos está pasando. Entonces haremos un bucle donde cada uno llame a este hotel individual, el hotel. Entonces en los datos de búsqueda, podemos agregar un hotel_wrapper o el CSS, agregar todo mixin, so plus hotel. En primer lugar, vamos a pasar al hotel. Por supuesto que necesitamos pasar los datos del hotel, que es éste justo aquí pero también podemos pasar en la consulta de búsqueda completa también. Recuerda también enviamos consulta de búsqueda a esta plantilla en el controlador, que está justo aquí y esto va a contener toda la información de nuestro formulario, como las fechas de salida y el número de noches. Esta es toda la información también se puede incluir en los resultados de búsqueda. Entonces vamos a probar esto. Si pasamos al navegador, y luego volvamos atrás y creamos una nueva búsqueda o de hecho podemos simplemente hacer clic en el botón de búsqueda aquí, y usar los datos existentes, y desplazarnos hacia abajo. Está bien, bien. Entonces ahora tenemos nuestros resultados de búsqueda justo aquí y ahora en lugar del formato JSON, ahora tenemos nuestros dos hoteles que se ven mucho más bonitos. Esto es bueno, pero hay algunos detalles más para agregar a este hotel. Antes de agrupar el hotel mixen los datos de consulta de búsqueda, que contenían las fechas de salida y el número de noches desde la búsqueda del usuario. Esto se ve bien, pero hay algunos detalles más para agregar a este hotel. También queremos incluir sobre a la derecha las fechas de salida y también el número de noches, como alguna información adicional. Por lo que pasamos esto al hotel mixin con los datos de consulta de búsqueda. Vayamos a nuestro mixin. El resultado de la búsqueda, vamos a obtener estos datos desde aquí. Entonces ahora estamos pasando dos argumentos diferentes, necesitamos incluir también esto dentro de nuestro mixin. Entonces _hotel, podemos pasar esto como nuestro segundo argumento justo aquí arriba y luego para mostrar los datos de consulta de búsqueda dentro de todo hotel, podemos hacer esto con algún renderizado condicional. Desplazémonos hacia abajo. Debajo del costo por noche, crea una nueva sección. Si sangramos esto atrás un nivel, así es nivel con la info del hotel. Crea un if sentencias, así que si url === '/results', entonces podemos agregar en los otros detalles. Añadamos un nuevo div circundante del CSS, de detalles del orden del hotel o con guiones bajos. Entonces podríamos simplemente configurar algunos elementos p, para mostrar estos datos. Utilizamos las garrapatas traseras, así que mezcla los datos dinámicos con el texto. Número de noches, un colon luego la capacidad en nuestros datos dinámicos de searchQuery.Duración. Un segundo conjunto de elementos p, nuevo con garrapatas traseras. Esto es para las fechas de salida, con dos puntos y esta vez esta es la consulta de búsqueda. fecha de salida. Todo esto es caso de camello. A continuación, necesitamos sumar los totales. En primer lugar, si solo guardamos esto y comprobamos esto está funcionando. Si recargamos el navegador, vuelve a enviar el formulario. Ahora tenemos un nuevo div en el lado derecho, que tiene nuestros datos, que habían sido pasados al hotel desde nuestro formulario de búsqueda. Ahora tenemos que sumar también dos piezas más de información. El primero es el precio por persona, y el segundo al fondo, también vamos a incluir un costo total para todas las personas combinadas. Para ello la forma en que resolveremos el costo por persona es multiplicar el número de noches por el costo por noche. Entonces también necesitamos crear un segundo cálculo, que es este costo por persona multiplicado por el número de invitados. Para que esto sea más sencillo, pasemos a nuestras plantillas. Ahora podemos agregar algo de JavaScript. Añadamos la constante para el Costeach esto va a ser igual searchQuery.Duration. Entonces tenemos que multiplicar la duración por el hotel.costo por noche. Entonces este fue cost_per_night, voy a hacer esto pequeño para que encaje en una línea. Entonces recuerda, tenemos la duración almacenada en la consulta de búsqueda, que está pasando el formulario. Pero el costo por noche se almacena en el hotel, que obtenemos de esta disponible justo aquí. Ahora vamos a crear una segunda constante. Esto va a ser por el costo total de la reserva, por lo que costo total. Por lo que este va a ser igual a nuestro costo por persona, que se cuesta cada uno y luego cuando necesitamos multiplicar esto por nuestra buscaquery.NumberOfInvitados. Ahora podemos usar estas dos constantes y las pondré dentro de nuestros elementos p. Abre las garrapatas marca. El primero va a ser total por persona y vamos a añadir un símbolo de moneda. Entonces podemos hacer nuestros datos dinámicos dentro de los literales de plantilla. Costo cada uno en una regla horizontal, por lo que podemos tener el costo total en la parte inferior, dentro de un h3. El back ticks para el costo total nuevamente, el símbolo de la moneda entonces nuestros datos dinámicos, que es la variable del costo total. Dale a eso el guardar y luego probemos esto, reenviamos el formulario. Está bien, bien. Tenemos el número de noches, las fechas de salida, el total para una persona, y luego el costo total que es éste multiplicado por el número de invitados. Solo volvamos a revisar, si volvemos aquí tuvimos dos invitados diferentes dice que el total es el doble del costo por persona. También hemos ordenado el precio de alto a bajo. Busquemos de nuevo. Tenemos un precio más alto aquí entonces vemos al fondo. Volvamos atrás y cambiemos esto para que sea bajo a alto. También podemos cambiar al invitado antes, y también cambiar esto. Haga clic en “Buscar”, baje hasta el fondo. Está bien, genial. Ahora todos nuestros detalles han sido actualizados. Tenemos un nuevo costo total, que se multiplica por cuatro. Tenemos un nuevo número de noches y también el precio es ahora de bajo a alto. Si pasamos a la página de inicio, haga clic en el “Logo” desplácese hacia abajo hasta todos los hoteles. No vemos ninguno de estos detalles de hotel en el lado derecho debido a esta representación condicional. Tratemos de ver todo, todavía no vemos nada aquí. Todo esto se ve bien ahora. Recuerda que rodeamos esta nueva sección dentro de un div, llamado detalles de orden del hotel. Vamos a copiar esto, y luego podemos darle estilo a esto dentro del CSS. Pasemos a la barra lateral en la carpeta Pública, Hojas de estilo; y luego al Style.css. Después desplácese hacia abajo hasta la parte inferior, fuera de una consulta de medios. Trabajemos primero con la pantalla pequeña, base en los detalles del pedido del hotel. Empecemos agregando un color de fondo. Mantén a div un poco separado del resto. Una vez que use un valor hexadecimal de eed, establezca el texto aling en la vista móvil para que esté en el centro. Entonces un poco de relleno lo mantiene alejado del borde de 1em. Ahora guardamos esto, y luego vuelve a cargar el navegador en la pantalla más pequeña, agrega una consulta de búsqueda. Cualquier detalle está bien. Busquemos. Ahora desplázate hacia abajo. Ahora vemos los resultados de búsqueda de este país en particular. Este es el nuevo div que agregó con el diferente color de fondo. Podemos ver el texto está centrado en este nuevo div pero no está centrado en la sección de información del hotel anterior en esta página de pliegues/resultados en particular. Adelante y arreglemos esto ahora. Nuevamente, fuera de la consulta de medios, esta es la sección de información del hotel. Desplácese hacia arriba, así que agreguemos la línea de texto para ser sensor. Nos da una recarga, y ahí vamos para que eso se vea mucho mejor. Vamos a comprobar rápidamente esto no arruina ninguna de las áreas de nuestros sitios. Si vamos a la página de inicio y también en Ver todo, tendremos que reinstaurar esto en la consulta de medios. Solo copiemos esta sección de información del hotel, desplázate hacia abajo hasta la consulta de medios, y aquí vamos. De hecho, podemos simplemente cambiar la línea de texto para que esté de vuelta a la izquierda, recargar y esto se ve mucho mejor ahora. Volver a nuestra consulta de búsqueda puede agregar un par de estilos más para la vista más grande. Añadamos la misma consulta de búsqueda, haga clic en “Buscar”. Ahora en la pantalla más grande, todavía tenemos este texto en el lado derecho para estar centrados. Esto está bien para la vista de pantalla pequeña pero para la vista más grande, queremos alinear este texto de nuevo a la izquierda. Dentro de la consulta de medios una vez más, bajemos, y podemos agregar esto justo después de la info del hotel. El div circundante nuevamente fue hotel_order_details y todo lo que necesitamos hacer es agregar la línea de texto para estar a la izquierda. Guarda esto y luego vuelve a cargar, confirma el formulario, y ahí vamos. Esto se ve mucho mejor en la pantalla más grande. Debería encogerme esto y comprobar que todo todavía se ve bien. Excelente, los resultados de búsqueda ahora están funcionando como se esperaba y también hemos agregado un poco de estilo. A continuación, nos apegaremos al tema del formulario de búsqueda incluyendo también más en la página de detalles del hotel. 46. Formulario de búsqueda de detalles del hotel: Ahora tenemos un formulario de búsqueda de trabajo en la sección de cabecera. Ahora voy a agregar uno similar a la vista de detalle del hotel. Quizás te estés preguntando por qué necesitamos hacer esto. Echemos un vistazo rápido. Si vamos a la página de inicio y luego vamos a la vista de detalle del hotel para cualquiera de estos hoteles. Haga clic en el título para luego llevarlo a la vista completa. Imagínese que fuimos un usuario visitando este sitio, y luego nos gustaría mirar este hotel y luego hacer clic en él. Por el momento, no hay forma de personalizar esta reserva agregando nuestros datos los cuales tienen la fecha de salida, el número de invitados, y también la duración. Si estuviéramos visitando este hotel y quisiéramos hacer una reserva, la única forma de hacerlo sería subir a la navegación superior y crear una nueva búsqueda. Esto puede no ser un problema enorme por el momento porque no tenemos muchos hoteles, pero en un proyecto más grande con miles de hoteles, esto puede convertirse en un tema para el usuario. Lo que vamos a hacer en este video es crear un formulario de búsqueda similar al que está dentro del encabezado. Iremos a luego colocarlo abajo en la parte inferior, pero esto sólo va a tener cierta información. Solo necesitamos la duración, la fecha de salida, y también el número de invitados. También vamos a quitar la calificación de estrellas y el precio porque no los necesitamos ya que ya tenemos seleccionado el hotel, que queremos. Pasemos a nuestro layout.pug y si nos desplazamos hacia abajo, este es el formulario de búsqueda desde la navegación superior. Si copiamos esta sección de la sección de div, todo el camino hasta nuestro botón de enviar, copiemos esto y luego nos dirigimos a nuestro hotel de subrayado, que es el mixin. Voy a agregar este formulario en poco menos del costo por noche. Después de aquí podemos agregar algún renderizado condicional para solo mostrar esto en las rutas actuales, que comienza con una barra inclinada hacia adelante todo, y luego hacia adelante barra inclinada. Si url.startswith, a continuación, agregue otra cadena que sea barra hacia adelante todo y luego barra hacia adelante al final. Después de esto, podemos entonces pegar en nuestro formulario de búsqueda desde antes. Si nos desplazamos hacia fuera, asegúrate de que todo esto esté sangrado correctamente, lo contrario obtendremos algunos problemas. En la búsqueda ahora podemos sangrar la sección todo en un solo nivel. Desplázate hacia abajo hasta el botón, sangra esto en. En un nivel dentro de las declaraciones, también voy a separar esta sección con una línea horizontal con los elementos hr y luego también añadir un título h3 de búsqueda de este hotel. Bien. Ya sabemos qué hotel queremos estar buscando. Podemos sumar en el valor. Si bajamos al destino. Justo aquí, podemos quitar requerido. Podemos establecer el valor para que sea igual al hotel, que es la información pasada al mixin, hotel y luego dot hotel underscore nombre. Ahora el valor de este campo se prepoblará ahora con nombre del hotel. Por lo tanto, el usuario no necesita hacer una búsqueda específica de este hotel. También necesitamos la duración, la fecha de salida, el número de invitados. No necesitamos la calificación de estrellas ya que ya tenemos el hotel. También podemos quitar el orden de clasificación y salir de la búsqueda. Ahora si le damos a esto un guardado y luego vamos al navegador, recargar en esta vista de detalle del hotel, desplácese hasta la parte inferior, y ahora tenemos nuestro formulario de búsqueda aquí abajo. Podemos ver ya tenemos hotel siete ya dentro, que obtuvimos al sumar el valor como atributo dentro de aquí. Este hotel también mucho es el actual en el que estamos. Vamos a volver a la página de inicio y seleccionar una diferente y comprobar que esto sigue funcionando. Desplácese hasta la parte inferior, y ahora el hotel cuatro está ahora dentro de nuestros insumos. Ahora hemos seleccionado el hotel que queremos. Intentemos personalizar esto para que podamos seguir adelante y hacer un pedido. Añada una duración, una fecha de salida, número de invitados, haga clic en buscar. Recuerda que este formulario ya está configurado para ir a reenviar resultados de barra inclinada, que es la misma ruta que la forma dentro de nuestro encabezado. Mucho de esto ya se debe manejar sigue. Vamos a reenviar resultados de barra. Entonces vemos un error en la parte inferior diciendo que el orden debe ser ascendente o descendente. El motivo por el que estamos recibiendo este error es porque si lo rastreamos, actualmente vamos a reenviar resultados de slash, por lo que hacia adelante resultados de slash dentro de nuestros diseños, dentro de nuestras rutas ir al punto índice JS forward slash resultados va a este hotel controlador de resultados de búsqueda. Si rastreamos esto hacia atrás, controlador del hotel, y luego vamos a los resultados de búsqueda. Seguimos tratando de enviar una consulta a nuestra base de datos. Incluya también en una calificación de estrellas, y ordene estos por orden ascendente o descendente. Todavía necesitamos agregar alguna información para asegurarnos de que esto se omita en esta página. El modo en que podemos hacer esto es justo lo más alto aquí. Tenemos nuestras dos constantes las cuales almacenan en estos datos. Voy a utilizar el operador para agregar un valor si se envía uno. Los dos tubos para todo el valor de uno, y luego el mismo abajo o uno. Básicamente si usamos en la forma de encabezado en la parte superior, vamos a recibir el número de estrellas y también un valor para el orden de clasificación. Si no se recibe ninguno de estos entonces sólo vamos a sumar un valor de uno, a cada uno de estos. Por lo tanto, esto no debería causar ningún problema a la hora de buscar en nuestra base de datos. Ahora si guardamos esto y luego recargamos, ahora obtenemos los resultados de la investigación como se esperaba. Esta vez sin embargo, sólo devolviendo el hotel actual que el usuario ha seleccionado, pero también pasando en los detalles del lado derecho. Probemos una más. Si vamos a todos los hoteles. Vamos a desplazarnos hacia abajo, si vas al hotel dos, tenemos un formulario en la parte inferior, con un valor del hotel dos. Probemos cinco, agregue cualquier fecha dentro aquí, dos invitados y desplácese hacia abajo, y todo esto ahora está funcionando correctamente. Ahora pasemos a la siguiente sección donde vamos a dar un paso a las cosas un poco, y aprenderás todo sobre la adición de cuentas de usuario y la autenticación. 47. Creación del modelo de usuario: Bienvenido de nuevo a esta nueva sección. Aquí estarás aprendiendo todo sobre las cuentas de usuario, iniciar sesión, registrar nuevos usuarios, autenticación, y mucho más. Para empezar, al igual que cuando empezamos a crear hoteles, necesitamos usar Mangoose para crear un modelo, pero esta vez para el usuario. Vamos a pasar a Visual Studio, abrir la barra lateral, y luego dentro de nuestra carpeta de modelos, podemos seguir adelante y crear un nuevo archivo, este se llama user.js, y luego cerrar esto. Tenemos que construir nuestro modelo igual que hicimos con el hotel. En primer lugar, necesitamos agregar una constante de mangosta y luego requerir el paquete de mangosta, dejar un punto y coma al final. Si recuerdas del hotel, dentro del hotel.js, dentro del hotel.js creamos nuestro esquema de hotel, lo pusimos en un nuevo esquema de mangosta, y luego construimos todos nuestros campos y luego agregamos los tipos de datos y el diversas cosas dentro de cada uno. Vamos a conseguir lo mismo con este user.js. Empecemos por crear nuestras constantes, esta vez esta se llama UserSchema. Esto es igual de nuevo a un nuevo punto de mangosta Esquema, mayúscula S. Dentro de aquí pasaremos en nuestro objeto. Por lo que nuestro usuario va a ser bastante sencillo. Va a tener un nombre, apellido, un correo electrónico, una contraseña, y luego un campo adicional al final col es admin. Llegará a esto más adelante sin embargo, el primero es para el nombre de pila. Así que primero el nombre de subrayado, y luego configura nuestra estructura dentro de las llaves. El nombre va a ser el tipo de cadena separada por una coma. También necesitamos hacer que este campo sea requerido, entonces falta el texto en este campo, que es, se requiere nombre, agregar una coma. Podemos recortar cualquier espacio en blanco configurando trim para ser true, y un número máximo de caracteres para ser separados aún más por una coma. Podemos hacer lo mismo para el apellido, así que agreguemos el apellido. Ese es nuestro segundo campo. Abre los tirantes rizados. Todavía va a ser más o menos igual por lo que este será el tipo de cuerda. Los campos requeridos. Es como esta vez es, se requiere apellido, recortar de nuevo para ser igual a verdadero, y también un número máximo de caracteres para ser 30. Entonces ahí está nuestro nombre, nuestro apellido, siguiente, ábrelo para capturar también la dirección de correo electrónico. La dirección de correo electrónico también va a ser el tipo de cadena. Esto se requerirá también con el texto de la dirección de correo electrónico se requiere, agrega una coma. También podemos recortar esto, así que recorta para ser verdad. También podemos establecer este campo para que sea único. Al establecer único para ser cierto, esto asegurará que solo tengamos la misma dirección de correo electrónico almacenada una vez dentro de nuestra base de datos. También podemos asegurarnos de que esto se almacene en minúsculas configurando minúsculas para que sea verdad. Agrega una coma después del correo electrónico, y esta es la contraseña. El password debe ser el tipo de cadena dos. También se requiere, por lo que se requiere contraseña. También añadiremos una nueva opción a pronto cuando volvamos a encriptar nuestras contraseñas, pero por ahora solo podemos dejar estos datos tal como están, luego pasar a la final que es admin. Abre esto. Entonces admin, este va a ser un campo booleano. El tipo de booleano, y también por defecto queremos que esto sea falso. Este campo se va a utilizar para agregar un usuario admin a nuestra base de datos. Por el momento, vamos a configurar cualquier nuevo usuario para que no sea administrador. Por lo tanto, establecemos necesario que el valor predeterminado sea falso, y la única forma de agregar esto es yendo dentro de la base de datos y cambiando esto para que sea verdadero. Podemos entonces exportar nuestro modelo hacia abajo en la parte inferior, agregar un punto y coma, y luego exportar punto de módulo equivale al modelo de punto de Mangoose, el nombre del usuario, y luego pasar en nuestro UserSchema, que declaramos arriba justo aquí. Simplemente sumamos con un punto y coma en los extremos. Dales un ahorro. Ahora este es nuestro esquema terminado por ahora. Como ya sabemos, este modelo no hace nada por sí mismo, por lo que en el siguiente video se va a crear un formulario de inscripción para que el usuario no pueda registrarse. 48. Formulario de inscripción: Ahora tenemos nuestro modelo de uso ahora. En la creación de un formulario de inscripción para registrar a un usuario. Antes en el proyecto si pasamos a la layout.pug, hasta la parte superior de la sección de encabezados, agregamos un enlace de registro, que enlaza con /sign-up. Ahora podemos manejar esta ruta en el archivo index.js. Vayamos a aquí. Ruta, index.js. Cierra esto hacia abajo. Si nos desplazamos hacia abajo hasta la parte inferior, así que justo por encima del módulo.exportaciones, podemos crear un comentario de rutas de usuario. En primer lugar, podemos agregar router.get, ya que esta es una solicitud get, podemos agregar la ruta de /sign-up. Entonces vamos a crear un UserController en tan solo un momento. Entonces el nombre de la función de SignupGet, punto y coma al final. Estamos usando este UserController esta vez en lugar del HotelController, que hemos utilizado hasta ahora en este curso. Esto se debe a que voy a estar agregando un UserController, para mantener las cosas organizadas y separadas. Este archivo index.js también necesitará acceso al UserController. Por lo tanto, podemos añadirlo en la parte superior bajo nuestro HotelController. Desplázate hacia arriba, aquí requerimos los controladores y hasta ahora solo tenemos el HotelController, por lo que justo debajo podemos agregar una constante de UserController. Al igual que arriba, podemos agregar el require, agregar ruta. Esto va a ser.. /Controladores/UserController, y añadir un punto y coma al final. Ahora necesitamos seguir adelante y crear este archivo UserController dentro de nuestra carpeta de controladores. Abre la barra lateral, haz clic en “Controladores” y crea un Nuevo Archivo. UserController, capital C.js. El 1er que necesita este archivo es el acceso al modelo de usuario. Podemos requerir esto en la parte superior dentro de una constante. Usuario Constante, U mayúscula igual requieren, luego agrega ruta de archivo que es la cadena../está en la carpeta de modelos /user. Debajo de esto, necesitamos crear el SignupGet para manejar mostrando el formulario de registro. Entonces exporta, esta es configurada al igual que el HotelController, el nombre de la función de SignupGet, esto es igual a nuestra función la cual toma en la solicitud, la respuesta nuestra función Bonnie. Todo lo que necesitamos hacer es agregar un res.render para renderizar una plantilla de página, que queremos llamar sign_up, las posibles opciones serían título de usuario registrarse. Dale a eso un ahorro. Antes de poder seguir adelante y crear este signo de plantilla sin embargo, 1er voy a crear un mixin en el Formulario 2. Así que abre la barra lateral, Views, y luego Mixins, crea un nuevo archivo _user_ form.pug. Ahora podemos seguir adelante y crear nuestra forma. Empecemos por crear nuestro nombre mixin de UserForm y luego configuremos nuestro formulario como normal. La acción va a ser igual a una cadena vacía, por lo que hace una solicitud de post a las rondas actuales, por lo que el método de post, la clase, que vamos a rodear cada entrada es form_input. Sangrarlo en un nivel, la etiqueta, así que al igual que antes cuando creamos el formulario para agregar un nuevo hotel, cada uno de estos tipos de entrada necesita coincidir con el nombre que usamos en nuestro esquema, por lo que el primero va a ser para el primer nombre, el apellido, el correo electrónico, y así sucesivamente. Esta etiqueta va a ser para el nombre, lo que primero_ nombre, debajo de texto de nombre para aparecer una excelente forma. El input, ya que es texto, podemos agregar el tipo de entrada de texto, por lo que el tipo es igual a texto. El nombre del nombre_nombre, el ID para que coincida con la etiqueta. Nuevamente, es solo nombre_nombre y también se requiere este campo. Si retrocedemos y sangramos esto al mismo nivel que esta entrada de formulario, podemos agregar uno más.form_input. Comienzan las etiquetas por el apellido. El texto de apellido con dos puntos, por lo que esta entrada también es la misma que la anterior. Este va a ser el tipo de texto, el nombre del apellido, el ID a coincidir, que también es apellido también, y también marcar este campo como se requiere. Vamos a copiar esta entrada desde arriba y podemos reutilizar esto para el correo electrónico. El rótulo para el correo electrónico, el texto del correo electrónico, tipo de entrada de correo también, y luego simplemente cambiar los nombres dentro de aquí también, el ID, y este campo también es requerido. Copiemos estas tres líneas de arriba también para el correo electrónico y las peguemos, porque vamos a estar reutilizando una similar, pero esta vez esto va a ser para confirmar el correo electrónico. El 2do va a ser confirm_email. Voy a copiar este nombre, por lo que el tipo está bien, agrega esto en el nombre, agrega esto en el ID. Este campo también es obligatorio y luego solo agrega el texto de confirmar correo electrónico. El siguiente va a ser por la contraseña. Añadamos el form_input, la etiqueta. Esta va a ser la etiqueta para el campo de contraseña, la entrada. El input, podemos agregar un tipo de contraseña y vamos a asegurarnos de que la contraseña no sea visible cuando el usuario escribe esto dentro del navegador, por lo que el nombre de la contraseña 2, el ID. Este campo también es obligatorio. Eso parece todo lo que necesitamos para la contraseña. Ahora vamos a copiar esto. En realidad, de hecho, necesitamos agregar el texto de contraseña y luego duplicemos estas tres líneas de código, agregamos esto justo debajo, y esta va a ser para confirmar contraseña. Sólo tienes que añadir para confirmar y luego un subrayado. Podemos copiar esto. Cambia el texto aquí para confirmar la contraseña. El tipo de entrada también es contraseña, así que pegaré esto como el nombre y también el ID. Nuevamente, también se requiere este campo. Lo último que necesitamos ahora para nuestro formulario son los insumos con el tipo de presentación. Esto va a tener el mismo envoltorio form_input, por lo que el botón, poner en tipo de envío, y también una clase de botón pequeño. Por último, podemos terminar esto con el texto de confirmar. Dale a eso un ahorro. Ahora con todo esto en su lugar, podemos agregar la plantilla de registro para agregar este mixin en, así que en la barra lateral. Ahora, a las vistas, podemos crear un nuevo archivo, y esto se va a llamar sign_up.pug. Este archivo de sign_up es el que coincide dentro de nuestro UserController. Esta es una que creamos justo aquí, por lo que ahora necesitamos agregar nuestra información básica aquí dentro. Nosotros vamos a inscribirnos, esto extiende nuestra disposición. Tenemos que incluir también el mixin que acabamos de crear. Mixins carpeta /_user_ formulario, el contenido del bloque. Ahora a nuestros contenidos, podemos agregar un encabezado de nivel 2, que es el título, una línea horizontal debajo del título, y luego debajo de aquí podemos agregar nuestro mixin, que es UserForm. Ahora todo lo que queda por hacer es probar esto en el navegador. Entonces dirígete al navegador y pasemos al enlace de registro dentro del encabezado, desplázate hacia abajo y aquí está nuestro formulario de registro que creamos. Simplemente voy a cambiar esto para que sea una U mayúscula, así que nosotros UserController. Yo lo cambio dentro de aquí, recargar, y eso se ve mejor. Este es el paso 1 que ya se ha completado. A continuación, crearemos la solicitud de post para manejar inscripción del usuario una vez que envíe este formulario. 49. Validación de entrada del usuario: Este formulario de inscripción que creaste en el último video son solo rutas de registro hacia delante, y también la mezcla de formularios de usuario, que creamos arriba está publicando en la URL actual, ya que dejamos la acción como un vacío string. Esto será posteo a las rutas de registro. Por lo tanto, podemos crear una solicitud de post dentro del index.js para manejar esta solicitud, así que pasa a la index.js y luego abajo a nuestras rutas de usuario, por lo que router.post. Esto también va a ir a las rutas de registro, por lo que como una cadena de apuntación hacia adelante y barra, volveremos a hacer uso de nuestro controlador de usuario, y en esta ocasión crearemos el SignupPost, agregaremos un punto y coma al final, más al controlador de usuario, hasta el fondo, esta vez es exports.Regístrate y luego Post. Esto va a ser igual a una matriz, por lo que creamos un poco diferente a lo que normalmente hacemos. Seguimos creando una función pronto hacia abajo en la parte inferior con la solicitud y respuesta, pero esta vez he agregado en una matriz. Vamos a incluir en primer lugar aquí algunas funciones de validación de formularios para comprobar la entrada del usuario en busca de cualquier entrada o errores maliciosos, así que agreguemos un comentario. En primer lugar, vamos a validar los datos del usuario. Esto básicamente limpiará las entradas del usuario y luego hará que sea seguro pasar a nuestro servidor. Formar entradas, ordenar forma común para que los hackers introduzcan código, ya que es una comunicación directa entre un hacker y también el servidor. Por lo tanto, necesitamos usar la validación y sanitización para limpiar la entrada antes de que llegue al servidor. Para ello, voy a incluir un paquete de nodos llamado validador express, que instalamos como paquete npm. Abajo a la terminal, cierra esto hacia abajo, por lo que el comando es npm space i, y el paquete es express-validator, pulsa Enter. Este paquete nos permitirá hacer dos cosas principales, validación y también la sanitización. validación es el proceso de asegurarnos de que el usuario haya ingresado valores en el formato correcto, un poco como nuestros modelos que creamos para el usuario y hotel. Puede asegurarse de que el nombre de usuario sea un número mínimo de caracteres, si el campo tiene datos alfanuméricos, si coincide una contraseña, y así sucesivamente. sanitización es un proceso que elimina, reemplaza caracteres introducidos en los campos de entrada, los cuales pueden utilizarse para enviar datos maliciosos al servidor. validador Express viene con módulos que podemos utilizar para ambas tareas. Si vamos a la barra lateral y abrimos en módulos de nodo, desplácese hacia abajo hasta el validador express que acabamos de instalar, así que justo aquí, abra esto. Dentro de esta carpeta, vamos a estar usando tanto los módulos de comprobación como de filtro, algunos más en el archivo userController.js, podemos requerir estos en la parte superior de este archivo, así que desplázate hacia arriba, y luego podemos agregar un comentario de validador express. Configura una constante, las llaves. El primero va a ser check, que es igual a requerir el express-validator, que es el nombre del paquete, forward-slash check, que es el nombre del módulo que necesitamos incluir. Recuerda, haciendo cosas como esta, si agregamos las llaves, esto se usa para importar un solo miembro de nuestro módulo y luego almacenarlo dentro de un nombre de variable llamado check. Por lo que esta constante de comprobación se utilizará para validar los datos. A continuación del mismo módulo, también podemos usar los resultados de validación, así que agrega una coma, agrega resultados de validación. Esto ejecuta la validación y almacena cualquier error de validación en un objeto de resultado, pero más sobre esto pronto. A continuación, también podemos requerir el módulo de filtro y almacenarlo dentro de una constante llamada desinfectar. En la siguiente línea, crear una constante con el nombre de la variable este tiempo de desinfectar. Esto es igual a requerir, pase en nuestro validador express, el nombre del módulo que es el filtro de barra hacia delante. Este módulo, como pudo haber adivinado, es para desinfectar los datos del usuario. Empecemos validando los datos usando una constante de cheques la cual se configura arriba aquí. Abajo a nuestra matriz, debajo de los comentarios de datos de validación, podemos usar nuestro cheque, que es la constante. Dentro de aquí podemos agregar en nuestro nombre de campo, que es primer nombre de subrayado. Estos nombres de campo necesitan coincidir con los nombres que tiene dentro de nuestro formulario de usuario, así que justo aquí, de vuelta al controlador. El primer método que voy a comprobar es si la longitud es un cierto valor. Hacemos esto pasando en unos objetos de opciones, donde podemos comprobar si la longitud mínima es igual, voy a poner esto en uno. Por lo que IsLength es un método que está siendo proporcionado por el validador express, como será todo el resto de los, que vamos a sumar ahora. También podemos encadenar al final tantos de estos como nos gusten. El siguiente que voy a agregar con mensaje. Dentro de aquí podemos pasar un mensaje si la longitud no cumple con el valor mínimo en el que pasas. Esta va a ser una cadena de texto de 'Se debe especificar el nombre ', y luego a la siguiente línea. También voy a encadenar a otra cosa al final. Podríamos seguir cruzando la misma línea, pero voy a añadir esto en la siguiente línea, sólo para que quede más claro. Esta vez vamos a comprobar si el texto es alfanumérico con punto isAlfanumérico, los corchetes justo después, y luego también podemos encadenar un mensaje igual que hicimos arriba, así que con mensaje. Después pasa una cadena que vas a mostrar al usuario si el resultado no es alfanumérico. Agrega una cadena de texto de 'El nombre debe ser alfanumérico'. Este es el final de nuestra primera comprobación en el campo de nombre. Podemos añadir una coma justo después. Pero también más o menos va a hacer lo mismo por el apellido. Copiemos estas dos líneas, sumémoslas a continuación. La única diferencia es el nombre del campo. Consulta esta vez el apellido y luego también podemos cambiar el texto. debe especificar el apellido y también el apellido debe ser alfanumérico. De nuevo, asegúrate de que la coma esté al final, para que veas comprobar. Esta vez vamos a seleccionar el campo de correo electrónico de nuestro formulario. Podemos encadenar al final de este punto es correo electrónico. Este es un método el cual proporcionamos write con datos válidos expresos el cual comprobará si este campo corresponde a un formato de correo electrónico. Si no lo hace, también vamos a añadir el mensaje. Con mensaje, y esto va a ser una cadena de texto de dirección de correo electrónico no válida. Al igual que las anteriores, necesitamos añadir una coma justo después. También podemos revisar el siguiente campo, que es el correo de confirmación. Esto también necesita ser una cuerda. Confirmar correo de subrayado. Esto va a ser un poco más complejo. Tenemos que comprobar ahora si coinciden los correos electrónicos y también si las contraseñas coinciden también. Alumnos, podemos utilizar un validador personalizado. Primero configuremos el cheque y agreguemos nuestra función de validador personalizado vacía solo por ahora. Tenemos nuestro nombre de campo seleccionado. Vamos a encadenar al final el validador personalizado, con dot custom y luego también podemos encadenar en punto con mensaje y volveremos a éste en tan solo un momento. Dentro de una costumbre y podemos pasar en una función. El primer parámetro es el valor que recibe del campo. Agrega los corchetes dentro aquí, el primer valor, que viene de nuestra forma. Esto va a estar viniendo de nuestro campo de confirmación de correo electrónico. El segundo valor va a estar dentro de un objeto. Agrega un objeto de opciones donde podamos pasar en múltiples valores aquí. Pero sólo necesitamos acceder al objeto de solicitud, que también podemos pasar. Ahora esto nos da toda la información que necesitamos. Tenemos el valor de confirmar correo electrónico, y también tenemos el objeto de solicitud, cual ha almacenado dentro de todos los demás campos. Ahora podemos terminar nuestra función comparando los dos campos. Justo después de los corchetes, podemos establecer para obedecer la función de flecha ES6 para comprobar si el valor, que es nuestro primer campo. Se trata de los datos que provienen del correo electrónico de confirmación. Compruebe si esto es igual a la solicitud, que es el objeto de solicitud pasado en el correo electrónico dot body dot. Aquí estamos agarrando el campo de correo electrónico original, que es éste justo aquí. Entonces estamos comprobando que es el mismo valor que se almacena en valor que este campo justo aquí. Todo lo que queda ahora por hacer es pasar un mensaje que es una cadena de direcciones de correo electrónico no coinciden, con una coma al final. Los dos últimos campos que tengo para la contraseña y también para confirmar contraseña. Podemos hacer más o menos lo mismo que este correo electrónico. En primer lugar, haremos nuestra primera comprobación para los campos de contraseña inicial, comprobaremos la contraseña. Vamos a comprobar si se trata de una longitud mínima. Vayamos por seis personajes. Pasando nuestros objetos, mínimo de seis. En la siguiente línea, podemos usar punto con mensaje. Contraseña no válida. Las contraseñas deben tener un mínimo de seis caracteres. Asegúrate de que la coma esté al final de esta línea. Por lo que ahora también podemos confirmar la contraseña usando el validador personalizado. Al igual que el correo electrónico de arriba, Vamos a copiar el validador personalizado y pegarlo justo debajo de la contraseña. Aquí dentro, todo lo que necesitamos hacer es cambiar un par de campos. El primero es ser confirmar contraseña, para agarrar este campo. Esto también se va a almacenar dentro de este valor como primer argumento. También necesitamos pasar en la solicitud al igual que antes. Consigamos toda la información del resto de estos campos. Seguidamente comprobamos si el valor, que es este campo justo aquí de confirmar, es una contraseña igual a request o body dot, que es este campo justo arriba. Podemos entonces cambiar el texto. Todas las contraseñas no coinciden. Asegúrate de que la coma esté al final de nuevo. Después de nuestra validación, podemos volver a establecer nuestra función, como de costumbre, pasando en ella el objeto de solicitud y respuesta junto con el siguiente. Vamos a configurar esto como una función de flecha ES6, pasando en la solicitud, la respuesta, y también siguiente. Arriba en la parte superior de este archivo, creamos una constante llamada resultados de validación justo dentro de aquí, que ahora podemos agregar dentro de nuestra función tomando en el objeto de solicitud. Desplácese hacia abajo hasta nuestra función, agregue los resultados de validación. Pase en el objeto de solicitud. Esto extrae cualquier error de validación de los objetos de solicitud. Después podemos almacenarlos en una constante para hacer uso de. Al inicio, podemos almacenar una constante con un nombre de errores y ajustarlo a nuestros resultados de validación. Simplemente haz de esto una coma justo aquí. Ahora quiero configurar un comunicado if para comprobar si tenemos algún error. Pasar este error constantes y luego después de eso, podemos agregar punto está vacío. Después los corchetes justo después y asegúrate de que esto se deletree correctamente. Dot is empty es un método de resultado de validación el cual podemos utilizar para comprobar si hubo algún error. Actualmente, comprobamos si la matriz de errores está vacía, pero queremos hacer lo contrario y comprobar si hay algún error. Podemos hacer lo contrario agregando un signo de exclamación justo al frente. Esta sección va a manejar cualquier error. Hay errores. Entonces después podemos añadir una sección más. Esta sección va a ser cuatro sin errores. Dentro de la sección if, si hay algún error, podemos agregar un res dot render para volver a mostrar el signo de forma y también un nuevo título de favor corrija los siguientes errores. Res dot render, podemos volver a mostrar el mismo formulario de registro. Regístrate subrayado arriba. Después añade una coma, pasa nuestro título dentro del objeto. El título de favor corrija los siguientes errores, luego un punto y coma al final. Pasemos al navegador y probemos esto. Si guardamos este archivo, recarga nuestra ruta de inscripción. Parecen tener un error. Ah, necesitamos reiniciar el servidor. [ inaudible] inicio, recarga nuestra ruta de registro. En primer lugar, vamos a probar esto con algunos datos válidos. Añadamos cualquier cosa dentro de aquí que signifique el número mínimo de caracteres, y también el formato de fecha. Podemos agregar cualquier cosa aquí dentro. Haga clic en Confirmar. No vemos que suceda nada en la actualidad porque todos estos datos son válidos. No hemos puesto nada más dentro de esta otra cuadra para manejar qué hacer a continuación. También vemos el mismo título de registro de usuario, lo que significa que no hemos sido redirigidos a esta inscripción con el título diferente. Ahora detengamos esto y podemos agregar algunos datos inválidos. Redujamos la contraseña para que esté por debajo de seis caracteres. Podemos cambiarlo para que no se vea como un correo electrónico, haga clic en Confirmar. El navegador web nos está deteniendo de hacer eso porque esto está configurado en un campo de correo electrónico. Sólo sigamos con la contraseña por ahora. Haga clic en Confirmar. Ahora nos redirigen a la misma ruta de inscripción de pole slash, pero esta vez usamos el título de la página o por favor arreglamos los siguientes errores. Todavía no hemos pasado los errores a esta plantilla. Pero esta es una buena señal, lo que significa que ahora estamos detectando si hay algún error y luego renderizando nuestra plantilla de inscripción con un título de página diferente. 50. Cómo pasar los errores a la plantilla, y desinfección: Ahora, con los errores detectados, queremos mostrarlos en la pantalla. Para ello podemos pasar los errores que has almacenado dentro de esta variable local a nuestra plantilla. Podemos hacer esto justo después de nuestro título. Agrega una coma, podemos pasar el nombre de los errores. Este nombre de errores estará disponible dentro las plantillas y esto va a ser igual a errores dot array, este es el método array. Obtendremos el conjunto completo de errores como una matriz, luego tendremos acceso a todos estos errores en nuestra plantilla, usando el nombre del error que dimos justo aquí. Ahora, podemos mostrar estos errores como una lista desordenada dentro de las plantillas. Volver a nuestro archivo de registro dot prog. Debajo de la línea horizontal, podemos decir si hay errores, este código sólo se ejecutará si se están pasando algún error a las plantillas. Vamos a crear una lista desordenada. Entonces podemos recorrer cada uno de los errores de la matriz. Por error, en errores, vamos a crear una nueva lista de ítem, que será igual al error y podemos agarrar el mensaje de error con dot MSG. Ahora, podemos darle a esto un ahorro y luego probar si todo está funcionando. Guarda esto y luego vuelve a cargar. He escrito mal [inaudible], error en errores. Pasado al controlador. Justo ahí, denos una recarga de nuevo. Estos son nuestros mensajes de error de antes cuando configuramos las contraseñas para que tengan menos de seis caracteres de longitud. Ahora recibimos un mensaje de contraseñas inválidas. Las contraseñas deben tener un mínimo de seis caracteres. Volvamos atrás. Añadamos pequeños errores para que podamos asegurarnos de que las direcciones de correo electrónico no coincidan. Añadamos también nuestras contraseñas que no hacen mucho a y también menos de seis caracteres de largo y confirmamos. Bueno, nuestras direcciones de correo electrónico no coinciden. Tenemos una contraseña inválida y también nuestras contraseñas tampoco mucho. Estos son los mensajes de error que establecemos dentro de nuestra validación en el controlador de usuario. Todos estos son avisos, que están justo aquí. Muchos de estos mensajes pueden ni siquiera aparecer, si tenemos el campo requerido establecido en forma antigua. Si acabas de innovar capa útil de validación, encima en el navegador, una vez que recibes un mensaje de error, todos estos campos que escribimos y ahora vacíos. Idealmente queremos mantener los detalles que el usuario ha ingresado pero arreglaremos asumimos. A continuación vamos a pasar a la sanitización. Esto será un poco más sencillo que la validación. Pasemos a nuestro controlador. Volver al puesto de registro. Vamos a bajar. En primer lugar, vamos a comentar el resto o renderizar. Entonces podemos reemplazar esto por un punto rojo JSON pasando en la solicitud, el cuerpo, que son los detalles del formulario. Si guardamos esto y luego rellenamos el formulario, vuelve y luego vuelve a enviar el formulario. Después escribimos una contraseña, vamos a probar. Confirmar. Nosotros ahora, vemos los datos JSON que se ha presentado desde el formulario. Si hacemos click en el botón Atrás y luego agregamos algún HTML dentro de cualquiera de estos campos. Abra los corchetes angulares todos estos en, Haga clic en el pulgar. Contraseña de nuevo. Confirmar. Este HTML también se envía con el JSON, que se puede ver dentro del nombre, lo que significa que esto también se enviaría a un servidor web a. Agregar código dentro de una entrada de formulario como esta podría ser usada malintencionadamente por hackers, para enviar entradas potencialmente peligrosas al servidor. Por regla general, en cualquier momento que recibamos insumos del usuario, siempre debemos validarlo y desinfectarlo también. Nos hemos encargado de la validación. Ahora, a la sanitización. En primer lugar, podemos hacer uso de la variable sanitizada que creamos antes, cuando es importante, el módulo de filtro. justo aquí instalamos esto dentro de la variable desinfectante. Bajemos justo antes de que funcionen todas las funciones. Podemos acceder a esto tuvimos desinfectar. Podemos volver a apuntar a cada campo individual como lo hicimos antes con la validación o podemos pasar en un estilo que apunta a todos los campos. Después encadenar al extremo el método de recorte, recorte de puntos. Esto eliminará cualquier espacio en blanco de antes y después de los campos de texto. Por último, también podemos encadenar a los extremos, escape de puntos y una coma. Esto eliminará los caracteres HTML que potencialmente podrían ser utilizados por los hackers para crear un ataque de scripting entre sitios. Si guardamos esto y luego volvemos al navegador, y recargamos. Vemos que tenemos ahora, quitamos nuestras etiquetas HTML y lo reemplazamos por los códigos de entidad HTML correspondientes. Ahora nos hemos encargado de validar y desinfectar los insumos del usuario. Ahora podemos pasar al siguiente video, que maneja guardar esta información en nuestra base de datos. 51. Registro de nuevos usuarios: Ya hemos validado y saneado los insumos de los usuarios. Ahora la siguiente etapa es guardar realmente estos datos en la base de datos. Para ayudar con esto, voy a usar un trozo de autenticación medio-ware llamado pasaportes. Pasaporte está disponible en Passport js.org. Si vamos por aquí y luego damos click en la Documentación. encima del lado izquierdo aquí vemos muchas formas diferentes que podemos usar Passport para autenticar a nuestros usuarios de diferentes maneras, como usar Facebook, Twitter, y muchas más. Todos estos métodos se denominan estrategias, bajo este proyecto y lo que utilizamos una combinación de correo electrónico y contraseña para iniciar sesión. Si hacemos click en Nombre de usuario y Contraseña aquí arriba. Siempre que se lleve a esta sección de nombre de usuario y contraseña y podemos ver por esta funcionalidad, esto se almacena dentro de un módulo llamado Passport hyperlocal. Seguiremos adelante e instalaremos asuma. Además de esto, también hay un paquete conveniente que vamos a estar usando llamado Passport-Local Mangosta. Este es un plugin o extensión a Mangoose, que hace que sea realmente fácil usar pasaportes, nombre de usuario y contraseña combinación para iniciar sesión. Nos da un sencillo método de registro el cual tomará cualquier usuario y contraseña para luego registrar a este usuario con Mangoose. En primer lugar, necesitamos instalar todos estos paquetes en Visual Studio, así que cierre el servidor, ejecute NPMI. Entonces quiero incluir tres paquetes diferentes. El primero son pasaportes y se pueden incluir múltiples paquetes en la misma instalación. Separados por espacio, también podemos agregar Pasapors-Local, que fue la estrategia que has visto antes dentro de la documentación del pasaporte. Entonces el tercero y último de lo que necesitamos va a ser Pasaportes-Local-Mangosta. Golpea “Enter”. Deje que todos estos pull-in desde MPM, vaya al número tres, inicie el servidor con MPM ejecute DEF start. En el user.js, que está dentro de nuestros modelos. Abramos esto. Esto verá esquema que configuramos para el usuario. Podemos requerir el paquete Passports-Local-Mangosta. Poner encima de este archivo. Vamos a configurar nuestra constante llamada Passports-Local-Mangosta. Esta igual a requerir. Esto va a requerir nuestro módulo de nodo, que es Passport-Local-Mangoose, ya que este es un plug in de Mangoose, necesitamos agregar este plugin a nuestro esquema antes de poder usarlo. Abajo en la parte inferior del esquema de nuestros usuarios. Con todo el módulo que tenemos exportaciones, podemos apuntar a nuestro esquema de usuario.plug-in y el plugin que desea agregar es Passports-Local-Mongoose. Este es el nombre constante que se instaló en la parte superior aquí. Siguiente Voy a pasar en un Options objetos. Separados por coma, abre las llaves, y luego podemos agregar en el campo nombre de usuario y establecer esto igual a o correo electrónico. Este objeto puede tomar en múltiples opciones. Podrás consultarlos en la documentación si quieres saber más. ¿ Qué es exactamente este campo de nombre de usuario? Como sabemos cuando se pasa, dos cosas para iniciar sesión. Necesitamos una dirección de correo electrónico y también una contraseña. Firmar este campo de nombre de usuario al correo electrónico está diciendo que queremos usar este campo de correo electrónico desde el esquema anterior como nuestro nombre de usuario para iniciar sesión. Por defecto, si dejamos fuera este campo de nombre de usuario, seguirá adelante y buscará en nuestro esquema un campo llamado nombre de usuario, el cual no tenemos. A continuación, tenemos que liquidar Passport en el archivo app.js/dirigirse a app.js. Haga doble clic en esto y hagamos un poco más de espacio. Arriba en la parte superior de este archivo, vamos a ir por debajo del router, configuraremos un comentario. Esto es para passports.js. Necesitamos configurar passport.js dentro de este archivo requiriendo el esquema de usuario y también el módulo Passport. Entonces const-user. Esto va a requerir que utilicemos un modelo. Esto es./ la carpeta del modelo. Entonces adelante /el usuario. A continuación también podemos importar nuestro módulo de pasaporte y almacenarlo dentro de una constante llamada Passport. Requerir un módulo de nodo llamado Passport. En nuestro express up, necesitamos primero inicializar Passport mediante el uso del passport.initialize middware. Volar esto, podemos desplazarnos hacia abajo y puedes agregar esto prácticamente en cualquier lugar. Una vez en esto justo después de la configuración del motor de vista, vamos a agregar un comentario. Por lo tanto configura Passport middware. Nuevamente, vamos a hacer uso de app.use, que hemos utilizado en el pasado. Ir a, pasar en la posible variable.inicializar; luego una segunda, app.use. Este es passport.session; Esta primera línea inicializará pasaporte para usar dentro de nuestra aplicación. Entonces el segundo, al agregar passport.session, nos permitirá usar sesiones más adelante, omitir el usuario actual conectado. Pero volveremos a esto más adelante. Dijimos antes que usar una combinación de nombre de usuario y contraseña se llama estrategia local de pasaporte. Esto ahora se puede configurar usando passport.use. Justo debajo de esto, podemos decir que passports.use, nuestro modelo de usuario u.CreateCategy. Estos crear estrategia es un método auxiliar proporcionado por el módulo Passports-Local-Mongoose, que instalamos, que luego se suma a nuestro esquema de usuario. Este es el responsable de crear el seguidor de estrategia Passport-Local, para anunciar, para aprovechar el nombre de usuario y contraseña de inicio de sesión, que desea utilizar desde pasaportes. Después necesitamos serializar y deserializar al usuario. primera forma es escribir esto, y luego podríamos hablar un poco de lo que está haciendo esto. En primer lugar, pasaporte.serializeUser. Dentro de aquí pasamos en nuestros objetos de usuario, modelo de usuario de goma. luego el método de usuario serialize. Entonces hacemos más o menos lo contrario, que es pasaporte.DeserializeUser. Al igual que una bala, agregamos destruir modelo de usuario.DeserializeUser. Esto puede ser un poco complicado para moverte la cabeza pero el concepto principal se relaciona con las sesiones. Una sesión que veremos con más detalle pronto, básicamente nos permitirá almacenar los datos del usuario, por lo que permanecen conectados al hacer clic de una página a la siguiente. Estas funciones le dicen a Passport cómo obtener la información de este usuario objetos y qué información almacenar en nuestra sesión. Este es el camino serializado. El camino deserializado es la función que se encargará de que recuperen la información de los usuarios actuales de nuestra sesión para luego volver a los objetos de usuario. Por lo tanto permanecer e iniciar sesión entre páginas. Pero de nuevo, volveremos a las sesiones en un video posterior. Esto debería ser ahora para la configuración. Volver al controlador de usuario. Guarda el archivo de usuario o para usar un controlador. Para dar inicio a las cosas en el post de inscripción, que es esta matriz que creamos aquí. Asegúrate de haber quitado el res.jayson. Elimina esta línea y luego restablece nuestro res.render. Justo después de este res.render, voy a agregar en la palabra clave return. Esta palabra clave return saldrá de las declaraciones si hay algún error en esta etapa. Esto si la sección anterior es cazada en si hay algún error, pero si no lo son, podemos seguir adelante y guardar la información del usuario dentro de esta sección L. Dentro de aquí, podemos configurar una constante llamada nuevo usuario. Esto igual a un nuevo usuario objetos donde pasaremos en la solicitud de cuerpo, que es la información del formulario. Después utilizamos otro método proporcionado por Passports-Local-Mongoose, que luego registrará a nuestro nuevo usuario. Agarra Voy a utilizar un modelo u.Register. Este método de registro toma tres argumentos. En primer lugar está el usuario que queremos registrar, que habremos almacenado en esta constante justo aquí. Nuevamente nuevo usuario. El segundo es una contraseña, cual se almacena en request.body.password. Esto sólo va a ser un usuario de prueba por ahora. Almacenar este texto plano no es un problema, pero pronto veremos cómo podemos cifrar su contraseña antes de guardar, que es algo que siempre debemos hacer. Tercero es una función de devolución de llamada. Se trata de una función que se ejecutará cuando se haya completado el método de registro. Agrega un coma, agrega una función que toma en nuestro error, hagámoslo un poco más pequeño. A continuación, crea el cuerpo de la función. Dentro de esta devolución de llamada. El primero que hay que hacer es manejar cualquier error y luego pasarlos a lo largo de nuestro medio-ware. Diremos si hay un error presente que está en un registro de consola, con el mensaje de error mientras se registra. Entonces podemos agregar una coma y luego pasar el mensaje de error, que se almacena en esta variable de err. Después de esto, podemos pasar esto a lo largo de nuestra cadena de medianos. Podemos devolver un énfasis a lo siguiente, que también toma en el error. Hagamos el navegador. Podemos crear un usuario de prueba y comprobar que esto está funcionando. Si regresamos y se va a nuestras rutas de inscripción. Vamos a agregar un usuario de prueba. Entonces prueba nuestra prueba. Confirmar. El password está bien. Haga clic en “Confirmar”. Si hacemos clic en “Enviar”, el ícono del navegador arriba en la parte superior seguirá girando. Esto porque aún no le hemos dicho qué hacer a continuación. Pero si vamos a mLab y luego recargamos y me desplaza hacia abajo, ahora vemos que tenemos nuestra colección hotelera con nuestros documentos contados originales. Al lado de esto, ahora tenemos la colección de nuestro usuario la cual tiene más documentos en su interior. Vamos a dar click en esto. Hace más espacio. Ahí está nuestro usuario de prueba el cual acabamos de agregar con la contraseña de probar más. Como mencioné antes, contraseña no debe almacenarse como texto plano. Esto es resolver lo que arreglará en el siguiente video, donde veremos el cifrado de contraseñas. 52. Encriptación de contraseñas: Ahora hemos guardado a nuestros usuarios en la base de datos, pero es algo que aún tenemos que arreglar. Hemos guardado un usuario de prueba en la base de datos, pero la contraseña se almacena como texto plano. Esto es algo que nunca debemos hacer. De hecho, ninguna empresa debería nunca guardar tu contraseña en la base de datos así. Si alguna vez se hackeara la base de datos, el hacker tendría acceso a todos los nombres de usuario y contraseñas. También hay una buena posibilidad de que un usuario use la misma contraseña en otros sitios web también. Este es un gran riesgo para la seguridad. A menudo hay una idea errónea de que una gran empresa, tomemos Facebook por ejemplo. Podrían simplemente entrar en su propia base de datos y ver la contraseña de todos, si estuviera registrada. Esto no es y tampoco debería ser el caso para ninguna empresa. En cambio, las contraseñas se cifran primero, y la versión cifrada se almacena dentro de la base de datos. Para entender un poco más sobre esto, necesitamos estar al tanto de hashin y sales. hashin es básicamente una forma de codificar nuestra contraseña. Cuando nos registramos como usuario la versión de scrumble se almacena entonces dentro de la base de datos. Cada vez que después intentamos iniciar sesión, nuestra contraseña, entrará también se vuelve a codificar usando el mismo algoritmo exacto que cuando nos registramos y esta versión desmenuzada se comprobará contra la misma versión codificada dentro de la base de datos. Este hashin debe ser un proceso unidireccional y no debe haber forma de convertirlo de nuevo a la contraseña original. Los hackers pueden usar lo que se llama un ataque de fuerza bruta. No obstante, esto es cuando usan una computadora para generar miles de hashes a partir de contraseñas hasta que una de ellas coincida. Para intentar hacer las cosas aún más seguras, también podemos resolver la contraseña. salazón es cuando agregamos algunos datos, a menudo generados aleatoriamente para cada contraseña. El sal se agrega a la contraseña del usuario y luego se hashed para hacerlo más seguro. Esta sal a menudo también se almacena en la base de datos junto con el valor hashed. Vamos a utilizar un paquete llamado bcrypts, que se encargará de este hashin y la salazón sigue. Esta es la página del paquete que se ejecuta ahora. Si también pasamos a los bcrypts de mangosta, que también es un paquete npm. Para hacer las cosas aún más fáciles, también vamos a estar usando este paquete bcrpt de mangosta junto con el módulo bcrypt. Este es un plugin de mangosta. Al igual que el plugin de mangosta que usamos para pasaportes para hacer realmente fácil la integración con Mangosta. Primero pasemos a Visual Studio Code e instalamos los paquetes que necesitamos. Abajo a la terminal, npm i y luego mongoso-bcrypts. Instalémoslo por un momento. Cierto jabón es bastante sencillo. Agregamos estos en el usuario.jsmodel. Tenemos que requerir esto en la parte superior. Entra en el user.js y luego después de nuestros dos requiere en la parte superior, vamos a configurar una nueva constante llamada bcrypts de mangosta. Ponemos esto como camelcase y así esto es igual a requerir. Vamos a requerir el nombre del módulo, que es mongoso-bcrypts. Entonces agregamos esto como un plugin de mangosta, al igual que el módulo de mangosta local pasaporte que agregó antes. Desplácese hacia abajo hasta la parte inferior donde agregamos nuestros plugins por encima de nuestro inicio de sesión desde antes, también podemos acceder al esquema de usuario. Deja plug-in. El plugin que queremos agregar esta vez es mangosta bcrypts, que es nuestro nombre de variable. Entonces, una vez que tengamos configurado este plug-in, ahora podemos agregar la opción bcrypt a nuestro campo de contraseña de esquema. Hacemos esto configurando la opción bcrypt para que sea verdad. Por lo que hasta nuestra contraseña. Agrega una coma después de requerido, podemos agregar la opción bcrypt y establecer esto para que sea cierto. Nos da un guardado y luego podemos ir al enlace de inscripción en la barra de navegación, y podemos crear un nuevo usuario de prueba del navegador. De hecho necesitamos ejecutar npm devstart. Es el navegador y voy a ir a mLab y borra a nuestro usuario de prueba y luego ir a registrarme en la barra de navegación superior, luego vamos a agregar un usuario de prueba una vez pequeño. Puedes agregar cualquier cosa dentro aquí. Golpea “Confirmar”. Después a mLab, golpea “Recargar”. Veamos si nuestro usuario de prueba está ahora dentro de ahí, que es. Recuerda cuando confirmamos cuando hicimos clic en el botón de inscripción aquí abajo, aún no hemos establecido a dónde ir. El navegador permanecerá en esta página. Volver a mLab. Ahora si amplías nuestra vista, usuario de prueba ahora podemos ver bajo los campos de contraseña tenemos esta versión encriptada ahora almacenada dentro de nuestra base de datos en lugar del texto plano de antes. Ahora tenemos esto funcionando. Eliminemos a todos nuestros usuarios de mLab. Elimina este y cualquiera de ustedes usuarios que pueda tener. Dejaremos tan claro para cuando pasemos al siguiente video donde empecemos a manejar la función de inicio de sesión. 53. Inicio de sesión: Por supuesto, tener cuentas de usuario dentro rota varía, ahora es usar a menos que el usuario registrado también pueda iniciar sesión al regresar. Esto es lo que ahora fuimos a manejar en este video. Además, no manejamos el inicio de sesión en el usuario inmediatamente después de registrarse, lo cual es un bonito toque. Ya tenemos un botón de inicio de sesión dentro del encabezado, que enlaza con las rutas de inicio de sesión de slash forward. Empecemos manejando esta ruta dentro del archivo index.js. Salgamos hoy dentro de la carpeta de rutas, y luego bajemos a nuestras rutas de usuario, que justo está aquí. Esta va a ser una solicitud Get, tan enrutado o Gats. El camino del inicio de sesión de barra inclinada hacia adelante. Usemos nuestro controlador de uso, y luego creamos un login gets o usamos controlador, ahora podemos configurar esta función dentro de aquí. Dentro del controlador, el uso de controlador, y luego bajarlo hasta abajo traer esto un poco más exports.login obtiene igual a nuestra función que toma en la solicitud y los objetos de respuesta. O cuerpo de función, que simplemente va a descansar o renderizar la plantilla, que se llama login. Entonces las opciones pasan en el título de inicio de sesión para continuar. Entonces vamos al final. Por supuesto, también necesitamos crear este inicio de sesión en plantilla también. Eso lo haremos ahora en la barra lateral. las rutas, lo siento, las vistas. Haga clic en el “Icono de nuevo archivo”, y luego login.org. Empecemos por extender nuestros diseños. Contenidos de bloque. Nivel dos rumbo con el título, que pasó a nuestras plantillas. Línea horizontal para separar el título del resto de nuestra forma. Empecemos por crear nuestra forma ahora, y las decisiones tienen la acción que va a ser adelante/inicio de sesión. El método va a ser un post solicita. Vamos a rodear cada una de nuestras entradas de formulario con la clase de formación de boots.foam_ entrada y dice para nuestro CSS más adelante. Esto va a ser una simple entrada de formulario. Va a tener el correo electrónico en un grupo, la contraseña, y luego un botón de envío abajo en la parte inferior. Primero vamos a crear nuestro correo electrónico. Etiqueta para correo electrónico, y luego el texto para la etiqueta del correo electrónico dos. Esta entrada va a tener el tipo de correo electrónico. Esto proporcionará alguna validación del navegador si el tipo de correo electrónico no es correcto. Tipo de entrada, también necesitamos el nombre del correo electrónico 2 y también el ID del correo electrónico para que coincida con su etiqueta. El segundo, y de hecho, sólo copiaremos este formulario entrada-grupo vecindades a continuación. Esta va a ser por la contraseña. También el texto off password con el y justo después es también un tipo de entrada de contraseña 2 el nombre, y finalmente el ID 2 de contraseña. Lo último que necesitamos sumar en la parte inferior son nuestras entradas de formulario final, y esto es para nuestro botón de envío. A botón, esto necesita tener el tipo de presentación. Envía un formulario, también podemos agregar nuestra clase CSS de poner en pequeño. Mantenga el estilo consistente, y luego el texto de inicio de sesión. Dada nuestra final guardo ahora y bacause el navegador, que ahora vemos si actualizamos en estas rutas de inicio de sesión, que ahora ven nuestro formulario abajo en la parte inferior. Una vez enviado este formulario, necesitamos manejar la solicitud de post a la misma ruta. Entérate en el index.js, podemos manejar esto ahora. Duplicemos esta línea aquí. Esta vez se quiere ser router dot post. Vamos a estar enviando esta solicitud de post a las mismas rutas de inicio de sesión, pero solo para hacer es cambiar nuestro nombre de función a post de inicio de sesión. O podríamos usar un controlador. Primero necesitamos requerir el módulo Passport, ya que estaremos usando el método ofensivo K proporcionado por este módulo hasta arriba, vamos a configurar nuestra constante de contraseñas capital P. Vamos a requerir el módulo Passport, al final . Ahora en la publicación de inicio de sesión, que voy a sumar justo abajo en la parte inferior. exports.login post va a ser igual a pasaportes, que es nuestra variable para el módulo de contraseña, y luego adultos de defensores. Establecemos este login post b igual a pases tableros, luego Callie autenticar método, que provisto con este módulo. El primer argumento que necesitamos pasar es la estrategia local para manejar la solicitud de inicio de sesión. Pasa un en local dentro de aquí, separado por una coma. El segundo es un objeto que contiene algunas opciones. Abre las llaves y voy a añadir esto a su propia línea. Aquí voy a pasar en dos opciones. Estos redireccionarán al usuario cuando un inicio de sesión haya sido exitoso o fallido. El primero es un redireccionamiento cuando el inicio de sesión ha sido exitoso, y lo hacemos con éxito. Redirige, que es reconocido por pasaportes, y luego redirigirá al usuario a reenviar slash, que es nuestra ruta de inicio, separada por una,. También podemos agregar redireccionamiento de fallas a. Vamos a redirigir para reenviar inicio de sesión slash, que mantendrá al usuario en la misma página de inicio de sesión. Ahora deberías ser todo lo que necesitamos para iniciar sesión, eliminamos solo usuarios de prueba desde mLab. Ahora, vamos a registrar un nuevo usuario. Guarda este archivo en el navegador, necesitamos primero firmar de un nuevo usuario. Vamos por nuestro propio usuario. Detalles dentro de aquí. A confirmar O2 mLab, danos una actualización, y se usan ahora está registrado así que intentemos iniciar sesión. Si volvemos al registro de usuarios, regresamos a la página de inicio. En primer lugar, vamos a dar click en la opción Login desde la navegación o no soy un error tipográfico para ver si nos redirigimos a estas rutas de adelante/inicio de sesión. Desplázate hacia abajo nuestro correo electrónico y dentro de aquí, y que sale una contraseña incorrecta, pulsa “Iniciar sesión”. Todavía estamos redirigidos a este inicio de sesión de slash hacia adelante porque hubo un error con nuestra contraseña. Probemos un inicio de sesión exitoso esta vez y veamos para redirigirlo a esta página de inicio. Vamos a darle este logotipo. Entra con los detalles correctos, y bueno. Ahora redirigimos a la página principal. Excelente. Ahora tenemos funcionando la facilidad de inicio de sesión. Estamos confiando en el redireccionamiento, así que dinos si hay una flecha al minuto, pero agregaremos algunos mensajes flash más adelante para darle alguna retroalimentación al usuario. El paso final para esto es iniciar sesión automáticamente al usuario después de registrarse. Esto es bastante sencillo de hacer ya que ya tenemos la publicación de inicio de sesión ya configurada. Simplemente podemos añadir estos a las rutas de los postes de inscripción. Pasado a nuestro index.js, tenemos esta facilidad de entrada de entrada justo aquí así que vamos a copiar esto. Después tenemos que acudir a la solicitud de puesto al inscribirnos. Entonces después de que el firmante publique, podemos agregar una coma, y agregaremos esto en su propia línea cosas a aquí. También podemos agregar post de inicio de sesión. Una vez que se esté enviando la solicitud de puesto a las rutas de inscripción, que está aquí, se dirigirá a la Asignar un puesto y luego inmediato iniciar sesión con esta función que justo aquí. Dale un guardado a este archivo, y luego así expresado sabe pasar a la publicación del eslogan, necesitamos llamar a siguiente a un lado del puesto de inscripción. Para usar un controlador, encontremos nuestra firma un post, que está justo aquí. Si nos desplazamos hacia abajo, tenemos esto si secciones comprueban si hay alguna área. Justo después de él y también podemos llamar a siguiente y desatiende pasa a la entrada de inicio de sesión. Ahora, tengo esto, esto se agrega en la sección else, lo que significa que no hubo errores. Dentro de este bloque justo aquí, y ahora podemos probar esto agregando un usuario de prueba, así que guarde esto. Ve a registrarte, y luego es extraño usuario de prueba. Haga clic en “Confirmar” y luego desplácese hacia abajo. Vemos que tenemos un área abajo en la parte inferior del índice de claves duplicadas. Ahora bien, esto puede no ser completamente evidente lo que está pasando aquí. Esto básicamente se reduce a algunos índices antiguos que ya tenemos dentro de nuestra base de datos. Si pasamos a mLab y echamos un vistazo, si hacemos clic en los usuarios, y luego abrimos esto, tenemos a nuestro usuario justo aquí, que configuramos. Si luego hacemos clic en los índices, ahora vemos que tenemos un e-mail conflictivo y también índice de nombre de usuario. Nosotros sólo queremos salir del correo electrónico, así que vamos a liderar este viejo nombre de usuario desde antes. Haga clic en esto, borra. Ahora vuelve a inscribirte, e intentemos volver a enviar el formulario. Bien. Ahora redirigido recto después de la inscripción. Si vamos a mLab, click en nuestra base de datos. Ahora tenemos a nuestros dos usuarios, que también es la Prueba 1 que acabamos de agregar de antes. Ahora parece que nuestro usuario está conectado, también estoy consiguiendo el éxito redireccionar a la página de inicio. Bueno o los usuarios ya pueden iniciar sesión, y a continuación veremos los login outs. 54. Cierre de sesión: Dado que ahora tenemos la mayoría de las cosas configuradas con Passport, cerrar sesión es una característica sencilla para implementar ahora. Passport nos da una función de cierre de sesión en el objeto de solicitud. Para terminar la sesión de inicio de sesión, lo primero que tenemos que hacer es agregar una opción de cierre de sesión dentro del nervio. Por el momento solo tenemos los botones de registro e inicio de sesión. Entonces por aquí, diseña un archivo de pug. También podemos añadir un enlace de cierre de sesión. Abajo a nuestras vistas, y luego layout.pug. Desplácese hacia abajo. Podemos crear un nuevo elemento de lista después de iniciar sesión, así que li, que también va a ser un enlace con un href de /logout y también el texto de cierre de sesión también. Posteriormente, nos aseguraremos de que solo uno de los enlaces de inicio de sesión o cierre de sesión se esté mostrando en el navegador, dependiendo del estado de inicio de sesión del usuario. Pasado al index.js, ahora podemos manejar esta ruta también. Index.js bajo la ruta del usuario, vamos a agregar router.get. El string de /logout, use controller, y esto va a ser simple.logout. Vamos a crear esto ahora, dentro del controlador de usuario. Desplácese hacia abajo hasta la parte inferior. exports.logout, crear nuestra función, solicitud y respuesta. Dentro de aquí podemos acceder al método de cierre de sesión en los objetos de solicitud, cual es proporcionado por Passport, request.logout, y luego en los objetos de respuesta, vamos a hacer un redireccionamiento para redirigir al usuario a la página de inicio después de cerrar sesión. Esto es todo lo que necesitamos hacer. Pasado al navegador, ahora podemos darle una oportunidad. Guarda este archivo, vuelve a cargar la página de inicio y, de hecho, intentaremos iniciar sesión primero. Iniciar sesión. Ahora nos llevan a la página de inicio. También la facilidad de cierre de sesión nos redirige a la página de inicio también. Para asegurarnos de que esto está funcionando, vamos a unas rutas diferentes, como /all. Intenta hacer clic en cerrar sesión, y ahora fueron redirigidos a la página de inicio. Entonces solo quiero asegurarme de que esto sea minúscula solo para que coincida con el resto. Entonces layout.pug, cambia esto y ahorra y ahí vamos. Entonces todo esto parece estar funcionando ahora, pero no podemos estar un 100 por ciento seguros en los momentos. En los próximos videos, vamos a estar brindando algunos comentarios al usuario para que sepa cuándo el inicio de sesión o cierre de sesión fue exitoso agregando mensajes de descarga. Además, estaremos haciendo otras cosas también, como trabajar con sesiones, agregar renderización condicional a los enlaces de inicio de sesión y cierre de sesión, junto con personalizar el encabezado mostrando el nombre del usuario al iniciar sesión. 55. Cómo trabajar con sesiones: Cuando se trabaja con usuarios, algo que pronto te encontrarás, es una necesidad de administrar una sesión de usuario. Las sesiones son básicamente una forma de guardar a un usuario autenticado, por lo que se recuerdan entre visitas durante cierto tiempo. También se pueden utilizar para diversos usos también, pero este será el propósito de las sesiones en este proyecto. Imagina que somos usuarios e inicia sesión en un sitio web. Como ya sabéis, al hacer click entre páginas, haremos una nueva solicitud al servidor. Imagina lo frustrante que sería si necesitábamos iniciar sesión para cada nueva página que solicitamos. Esto se debe a que el servidor no conoce la información del usuario. Por lo tanto, utilizamos una sesión como una especie de almacenamiento en el lado del servidor para la información del usuario que queremos conservar durante nuestra visita. Lo que sucede es cuando un usuario inicia sesión, se crea una sesión y los detalles del usuario se almacenan en la base de datos. Vamos a estar usando nuestra misma base de datos Mongo para esto. Se pasa un ID de sesión al servidor para cada solicitud. A menudo este ID se almacena en lo que se llama cookie. El servidor comprueba entonces este ID con la información que tiene para este usuario y luego devuelve la información del usuario si todo está bien. Para esto, voy a estar usando un popular paquete npm llamado express-session. Este es el módulo npm que todos conocemos. Este middleware nos permitirá configurar sesiones para nuestros usuarios y además agregar diversas opciones que veremos pronto. A continuación, mencionamos que también almacenamos los datos de sesión en el lado del servidor. Si seguimos adelante y nos desplazamos hacia abajo. Esto está bastante cerca del fondo. Necesitamos encontrar nuestras tiendas de sesión. Aquí vamos “Tiendas de sesión compatibles”. Vemos una lista de las tiendas que podemos utilizar con este módulo. que ya usamos Mongo en nuestros proyectos, podemos usar el paquete connect-mongo, que aparece justo aquí abajo. Este es el que queremos usar. Este paquete nos permite usar MongoDB como nuestra tienda de sesiones al usar Express. Primero sigamos adelante e instalemos el paquete en nuestro proyecto. Abajo al servidor y se cierra. Tenemos que añadir “npm i” y el paquete se llama “Express-Session” hit “Enter”. Una vez que se tira de npm, entonces podemos requerir este módulo en el principal “app.js”. Abre la barra lateral, abre el “app.js”. Entonces justo después de nuestro router, agreguemos los comentarios de “For Sessions”. Const Session va a ser igual para requerir el nombre del módulo de “Express-Session”. Punto y coma al final. Después a nuestra tienda Mongo. Abajo en la terminal “npm i.” Este fue “Connect-Mongo”. Instalemos. También necesitamos requerir este paquete también, por lo que también en el “app.js”, justo debajo de nuestra sesión, también podemos agregar una consonante de “Mongo Store”. Voy a usar mayúsculas para esto y requerir “Conectar -Mongo. Después de esto, podemos abrir los corchetes y luego pasar en la sesión. Punto y coma. ¿Qué hace exactamente esta línea de código cuando la tenemos aquí? Bueno, como de costumbre, estamos agarrando el paquete “Connect-Mongo” y lo almacenamos dentro de una constante llamada “Mongo Store”. “ Connect-Mongo” está devolviendo una función. Poner un normal requieren carbón no ejecutará inmediatamente la función. En cambio, simplemente lo almacenará dentro de esta constante. Es por ello que necesitamos agregar los corchetes al final, para seguir adelante y ejecutar esta función, junto con persona en la variable de sesión a esta función. Entonces a continuación, podemos configurar nuestra sesión como “Middleware” para que se ejecute para cada solicitud con “app.use” y también de nuevo pasando en nuestra variable de sesión. Desplazémonos hacia abajo. Añadamos esto en justo después de que nuestro sobre “app.use” es, así que “app.use” la “Sesión” con los corchetes justo después. Esta sesión toma en un “Objeto Opciones”. Añadamos las llaves y añadamos ésta a una nueva línea. Esto crea un middleware de sesión con las opciones que vamos a agregar ahora. Todas las opciones disponibles están listadas en la documentación. Para la primera que vamos a usar, que también se requiere, es la frase secreta. Añadamos el “Secreto”. También podemos almacenar esto dentro de nuestro archivo “.env”, ya que va a ser alguna información sensible. Entonces primero agreguemos “process.env.secret”. Este “Secreto” es una cadena de texto de nuestra elección, que se utiliza para firmar la cookie de ID de sesión. A continuación podemos agregar la cadena dentro de nuestro archivo “.env”. Abre esto. Entonces hacia abajo en la parte inferior, podemos agregar nuestro “Secreto”. Esto puede ser igual a cualquier cadena de texto de nuestra elección. Sólo voy a añadir “Sesión de viaje” añadir un signo de exclamación. Dale a este archivo un “Guardar” cerrarlo. A continuación tenemos que establecer “Guardar en inicializado” para que sea falso. Agrega una coma después de todos los secretos. Se trata de “Guardar en inicializado” y establece este valor como “False”. Establecer en este valor significará que una nueva sesión no se guarda la base de datos a menos que esta sesión se modifique realmente. Esto es útil para un visitante que sólo navega por nuestros sitios y realidad no necesita su detalle guardado en una sesión. Esto resultará en mucho menos ahorraciones innecesarias en nuestra base de datos. A continuación, agrega una coma y agrega la opción de volver a guardar para ser falso. Establecer esto en falso asegurará que nuestra sesión no se guarde a menos que se modifique realmente. Por último, necesitamos hacer uso de nuestra tienda MongoDB mediante el uso de esta opción de tienda con nuestras constantes MongoDB, que establecemos justo arriba. Este es uno justo aquí. Después de reguardar, agrega nuestra opción de tienda y estableceremos esto en un valor de nuevo MongoStore, agrega los corchetes justo después. Esta nueva tienda toma en la conexión de mangosta como opción, agrega las llaves, mangose.connection. Consulta esto todo se ve bien. Tenemos mangosta tenemos nuestra sesión, nuestra MongoStore. Ahora podemos configurar una prueba rápida para ver esto en acción. No necesitas seguir con esto si no quieres. Esto sólo será una demostración rápida. De hecho antes de que hagamos esto, esto tiene que ser MongooSeconnection, el colon y allá vamos, eso es igual a mongose.connection, que también usamos antes al configurar nuestro MongoDB, que está justo aquí. Ahora vamos adelante y configuramos la prueba en el archivo index.js. Así que guarde nuestro app.js. Abre el index.js, y luego vamos a desplazarnos hacia arriba hasta la parte superior. El filtro de la página principal está en la ruta de la página principal. Entonces solo voy a comentar esta línea fuera. Vamos a crear una nueva función de prueba para probar si la sesión está funcionando por login el número de visitas a la página de inicio en la sesión. En primer lugar recreemos nuestra ruta de inicio. Por lo que router.obtener la barra inclinada hacia adelante del router de casa. Añadamos una función, pasando en la solicitud y también la respuesta. Dentro de aquí lo primero que voy a hacer es crear una declaración if. Si solicita.session.page_views. Este módulo de sesión express hace que nuestros datos de sesión estén disponibles en los objetos req.session. También podemos hacer uso de las vistas de página para ver cuántas veces se está visitando la página. Ahora podemos incrementar este total de vistas de página en cada solicitud. Entonces agrega en el req.session.page_views++. Esto incrementará el número de páginas vistas cada vez que haya una solicitud a nuestra página de inicio. Después vamos a mostrar el número de visitas en la pantalla utilizando un res.send. Vamos a enviar usando los backticks, algunos textos de número de visitas a páginas, un colon. Entonces podemos agregar en nuestros datos dinámicos, que es el req.session.page_views. Por supuesto que necesitamos una declaración else también, así que de lo contrario. Esta sección if manejará si hay alguna vista de página almacenada, es decir, si el usuario ya ha visitado. El else session manejará si el usuario está visitando por primera vez. Si ese es el caso, queremos que el req.session.page_views sea igual a uno y luego podemos hacer un res.send con el texto de primera visita. Ahora si vamos al navegador en nuestra primera visita, deberíamos ver este texto que fijamos aquí. Después, por cada actualización adicional en la página de inicio, deberíamos entonces incrementar el número de vistas de página una cada vez y luego mostrar esto en la pantalla. Vamos a darle una oportunidad a esto. Localhost:3000, se recarga. De hecho, necesitamos poner en marcha el servidor de desarrollo. Tenemos un error, así que echemos un vistazo a qué es esto. Pasado a nuestro app.js. Sólo tenemos un error ortográfico aquí. Guarda esto y ahora vuelve a ponerse verde. Cargamos la página de inicio y tenemos el texto de primera visita. Ahora si hacemos clic en refrescar, esto ahora debería incrementarse el número de visitas de página en cada clic. Por lo que tres visitas, 4, 5, 6, 7. Ahora pasa a mLab por la base de datos. Vamos a refrescarnos. Bien. Ahora veremos junto a nuestros hoteles y usuarios, ahora vemos también se ha creado una colección de sesiones con un solo documento. Si hacemos click en esto, ahora veremos los detalles de la sesión almacenada en el interior aquí. La sesión tiene un ID único en la parte superior, y luego alguna información sobre la propia cookie, como la edad máxima, cualquier fecha de caducidad que queremos establecer, y también el número de visitas a páginas, que acabamos de mirar dentro del navegador de siete. Todas estas opciones se pueden establecer bios si queremos hacer esto como opción. Cuando sigamos adelante y armemos la sesión. En la documentación hay algunos ejemplos de cómo hacer esto si quieres realizar algún cambio. Ahora sabemos que nuestra sesión está funcionando, ahora podemos eliminar el código de vistas de página y restablecer la página de inicio original. Pasado al index.js, este código aquí se puede quitar o comentar. Entonces el router.get, que era la página de inicio original, puede entonces ser descomentado. Guarda esto, vuelve a cargar el navegador en la página de inicio y todo debería volver a la normalidad. Pero esta vez estamos usando sesiones. 56. Cómo dejar comentarios a los usuarios con mensajes urgentes: Antes cuando entrábamos y salíamos, teníamos que depender de un redireccionamiento de página para hacernos saber si se trataba de un inicio de sesión exitoso o no. Este video va a mejorar nuestros nodos agregando mensajes flash al usuario, los cuales luego se mostrarán y el usuario también podrá hacer clic en una pequeña X en la esquina para eliminarlos una vez que hayan sido leídos. Esperábamos hasta ahora para agregar mensajes flash por una buena razón. Esto se debe a que el mensaje flash se almacena en la sesión, por lo que necesitábamos configurar esto primero. Voy a estar usando un paquete de nodos llamado Connect Flash para proporcionar estos mensajes. Instalemos esto ahora. Esta es la página de GitHub, si quieres enterarte de algo más de información. Pero por ahora, voy a pasar a Visual Studio Code, cerrar el servidor y luego ejecutar MPM. Me conecto flash y tirando de este paquete de MPM. Una vez que este esté instalado, ahora podemos ir a nuestro archivo app.js y luego requerir este paquete arriba en la parte superior. Vamos a ir por debajo de nuestras sesiones. ¿ Eso es un comentario? Esto es para mensajes grandes. Seguiremos adelante y crearemos una constante llamada flash y esto va a requerir el módulo flash, por lo que esto fue conectar guion flash con un punto y coma y luego podemos agregar el flash como middleware para usar en nuestra aplicación. Vamos a desplazarnos un poco más hacia abajo y podemos añadir esto justo después de nuestras líneas de pasaporte. En el comentario, esto va al middleware, por lo que hacemos esto con app.use, que tomará en el paquete flash, que acabamos de requerir. A continuación, también podemos agregar esta funcionalidad de descarga a nuestro propio middleware a continuación. Entonces vayamos a donde creamos nuestro propio middleware, que está justo aquí, y luego después de este req.path, también podemos agregar un nuevo local. Entonces res.locales, vamos a mi flash local y pongamos esto igual al flash req.dot y salgamos al final. Esto hace que la funcionalidad flash esté disponible como una variable dentro de todas nuestras plantillas de trama. Tener esto como variable, es útil para el renderizado condicional. Si hay algún mensaje para mostrar, podemos configurar flash para cualquiera de nuestras funciones. Pero para empezar, voy a ir a los controladores de usuario, inicio de sesión post, así que guarde este archivo y luego vaya al controlador de usuario y necesitamos encontrar post de inicio de sesión, que está justo aquí. Después del SuccessRedirect, también podemos agregar un SuccessFlash, y luego una cadena que desea mostrar al usuario de, ahora está conectado, por lo que ahora verá esta cadena de texto apareció en la pantalla, lugar de tener un redireccionamiento para mostrarnos que ahora estamos conectados. trabajo de pasaporte con connect flash por defecto, lo que esto es bastante sencillo de agregar. También hay un mensaje flash de fallo dos que podemos agregar para esta condición de falla abajo en la parte inferior. Separado por una coma y agregue FailuRefLash, establezca esto en una cadena, por lo que el inicio de sesión falla y dirá, “por favor inténtelo de nuevo”. Ahora necesitamos alguna forma de mostrar estos mensajes al usuario. Un lugar conveniente para hacer esto sería en el archivo layout.pug. Este archivo contiene nuestro encabezado que está en cada página de los proyectos. Acude al layout.pug. Lo primero que voy a hacer es establecer dos constantes, los mensajes flash son un objeto que contiene tanto claves como valores. Vamos por nuestra imagen de playa y podemos agregar esto justo por encima de esto, así que que está justo aquí. Recuerda JavaScript necesita tener el guión. Entonces los valores -const van a ser iguales a objects.values y luego vamos a pars en el flash, así que aquí estamos analizando en los mensajes flash, que es un objeto y vamos a seguir adelante y usar el método de valores de punto, que devuelve una matriz de los valores de propiedad del objeto. Recuerda, los objetos están conformados por pares de valores clave, ahora tenemos los valores aquí, así que voy a duplicar esta línea y establecer que estas sean las claves. Cambia la constante para ser teclas y aquí es donde usamos el método de teclas de punto. Nuevamente, analizando en los mensajes flash, las claves y el tipo de mensaje que queremos, y voy a estar creando tres tipos de mensajes. El primero es el éxito, y esto será para cosas como inicios de sesión exitosos, también un tipo de error para inicios de sesión fallidos y errores generales. Entonces el tercer y último tipo es para info. Esto será para información general como “Ya está cerrado la sesión”, y luego si en esta línea, que no es un mensaje general de éxito o error, veremos cómo establecer manualmente estos tipos de mensaje pronto cuando agregamos más mensajes flash en el controlador. También pasaportes suma estos dos por el éxito y fracaso de un login, por lo que estos tres tipos son estas claves que el consumidor creó aquí. Ahora a los valores. El valor es básicamente el anillo de texto, como usted “Ya está conectado” o “Error de inicio de sesión, por favor inténtelo de nuevo”. Nosotros sólo queremos mostrar estos mensajes si realmente hay alguno para mostrar, por lo que podemos agregar algún renderizado condicional dentro de nuestro layout.pug, debajo de nuestras dos constantes agregará una declaración if. Si keys.length es mayor que cero, entonces debajo de un div, que será un contenedor para el mensaje, este div va a tener dos clases. Primero es una clase de mensaje general para el estilo del mensaje y luego una segunda clase de subrayado del mensaje y luego el nombre de la clave. El primer tipo, por lo que clase es igual a cuántos backticks, ya que esto va a ser datos dinámicos, por lo que el primero para estilizar es mensaje y luego el segundo de subrayado de mensaje y luego podemos agregar nuestros datos dinámicos de claves. Esto generará un nombre de clase de información del mensaje, éxito del mensaje, y también error del mensaje, y luego podremos usar estos estilos libres dentro del CSS más adelante para proporcionar algunos colores diferentes para cada tipo de mensaje. Tenemos los mensajes almacenados en constantes de este valor y solo agregaremos una S al final en realidad, así que los valores. Pondré estos en un lapso elementos. Justo por debajo de nuestra intensidad div un nivel podemos crear un span que es igual a nuestras constantes de valores. Después un segundo elemento span con la clase de guión bajo close btn. Esto va a proporcionar un poco de cruz en la que el usuario puede hacer clic para luego quitar el mensaje flash, que podamos encontrar el guión X así o podemos usar la entidad HTML de ampersand y luego veces con el punto y coma al final, por lo que dentro aquí queremos ejecutar un evento onclick. Una vez que se está haciendo clic en el elemento span, queremos ejecutar esto en JavaScript que va a eliminar toda esta sección justo aquí. Podemos hacerlo seleccionando el nodo padre. Los nodos principales siendo este div circundante justo aquí, y luego llamar al método remove. Podemos agregar el método onclick y establecer esto en este.parentNode, que de nuevo es este div justo aquí y luego llamar.remove. Por lo que esta es una fuente que muestra el mensaje en nuestra sección de encabezado. Entonces ahora pasemos al navegador y probemos esto. Por lo que pasa a tu página, y es posible que necesitemos reiniciar el servidor. Por lo que npm ejecutar devstart. Una vez que esté en funcionamiento, recarga el navegador, y luego podemos intentar iniciar sesión. Entonces haga clic en Iniciar sesión. Abajo, podemos agregar nuestros datos de inicio de sesión. Por lo que al principio queremos agregar un inicio de sesión fallido, agregando una contraseña incorrecta. Ahora recibimos el mensaje de, inicio de sesión falló, por favor inténtalo de nuevo. Por lo que ahora podemos hacer click en esto, para que elimine el mensaje, e intentemos uno más. Esta vez vamos a contestar los detalles correctos, y no vemos un mensaje de éxito. Entonces veamos qué está pasando y usemos un controlador. Simplemente tenemos un error ortográfico ahí, así que el éxito. Recarga esto. Intentemos cerrar sesión y luego volver a iniciar sesión. Esto lo haremos con éxito esta vez, y ahora recibimos el mensaje de, ya estás conectado. Ahora podemos volver a hacer clic en esto para eliminar el mensaje. Con esto funcionando, ahora podemos agregar más mensajes donde necesitamos que se muestren en el archivo controlador de usuario dot js. También podemos agregar un mensaje para cerrar sesión. Así que desplazándose un poco más hacia abajo justo después de la solicitud o cierre sesión. Podemos acceder a req.flush, y queremos pasar en dos cosas aquí. El primero es el tipo de mensaje. Recuerda desde antes dijimos que vamos a tener tres tipos de mensajes diferentes; uno para errores, uno para el éxito, y otro para información general. Bueno, esto va a ser un mensaje de tipo info con una cadena de, ahora estas cerrado sesión. Entonces a este final con el punto y coma al final, eso nos dará una prueba. Asegúrate de que aún estás conectado y luego haz clic en cerrar sesión, y ahora tenemos nuestro mensaje en la parte superior aquí. Ahora en el controlador del hotel, esto también necesita algunos mensajes cuando hacemos cosas como agregar en hoteles y también actualizar. Entonces haga clic en el controlador del hotel, y al primero al que voy a ir es push To Cloudinary, que es uno de los primeros que se añadieron. Por lo que justo aquí arriba, abajo a la sección catch, vamos a añadir request.flash. Entonces esto va a ser un mensaje de error. Entonces el tipo de error, y luego podemos agregar un mensaje de vuelta al usuario diciéndoles que hubo un problema al subir la imagen. Envía un texto de, lo siento, se ha producido un problema al subir tu imagen, por favor inténtalo de nuevo. Una vez que hiciste eso, ahora podemos ir a crear post hotelero. Así que desplácese hacia abajo para crear post de hotel justo debajo, y esto es justo aquí. Vamos a sumar esto en la trisección porque este será un mensaje de éxito para decir que el hotel ha sido creado con éxito. Justo después del await hotel.save, request.flash, por lo que el tipo de mensaje fue éxito separado por una coma. Tenemos que añadir esto dentro de las garrapatas traseras porque también vamos a mostrar el nombre del hotel. Como nuestra plantilla literales, así hotel, el nombre subrayado del hotel al que tenemos acceso debido a esta variable hotelera, y luego el texto de creado con éxito. Está bien, bien. El siguiente está en el post edit remove. Entonces esto está justo debajo, así que desplácese hacia abajo. Este va a ser un mensaje de info para decir que no se encontraron coincidencias. Esta es la sección de administración donde vamos a editar o quitar un hotel. Recuerdo primero necesitamos pasar un nombre de hotel o un ID de hotel para luego buscar en la base de datos. Entonces, vamos a desplazarnos hacia abajo. Si los datos del hotel son mayores a cero, esta es la sección de éxito, pero una vez que agrego esto en la sección else, en caso de que no se pudieran encontrar hoteles. solicita.Flash, este es un mensaje info de no se encontraron coincidencias, y con solo un par más a nuestro día ahora, así que iremos a actualizar post hotelero, pero claro cuando actualicemos el hotel. Entonces vayamos a la sección try, y justo antes del redireccionamiento, podemos agregar request.flash. Esto va a ser un mensaje de éxito, y usando los ticks de atrás, podemos proporcionar un mensaje. Nuevamente utilizando nuestros datos dinámicos para pasar en el nombre del hotel, por lo que hotel.hotel_name, actualizado con éxito con el punto y coma al final. Entonces la última que voy a añadir es para borrar puesto de hotel. Esto es para una eliminación exitosa de nuestro hotel, antes de la solicitud de redireccionamiento flash. Este va a ser un mensaje de tipo info con datos dinámicos. Así que abre las garrapatas traseras, así que ID del hotel, entonces podemos pasar en el ID del hotel, que es esta variable justo desde arriba aquí, que obtenemos de la request.params, ha sido borrada. Ahora dale a este archivo un guardado y luego pasa al administrador del navegador. Ahora necesitamos ir a /admin en el nuevo hotel. Añadamos prueba para flash, y adentro aquí, en nuestros proyectos, la carpeta pública, las imágenes, y vayamos por el logo por ahora esto no importa, empecemos a escribir, confirme. Genial. La prueba para flash se ha creado con éxito. Todo esto parece estar funcionando ahora. Esto es todo ahora para los mensajes flash, pero seguiremos agregándolos como necesitamos durante el resto de este proyecto. 57. Renderización condicional del usuario: En este video, vamos a hacer algunas mejoras en la experiencia del usuario. Estará haciendo diversas cosas como renderizado condicional para cambiar los enlaces nerviosos dependiendo de los estados de inicio de sesión del usuario también estará mostrando el nombre de usuario dentro del encabezado, y protegiendo las rutas de administración. Para empezar, podemos agregar algunos locales más a todo middleware sobre en el archivo app.js y luego desplazarnos hacia abajo hasta nuestro middleware del cliente. Entonces que es justo esta función justo aquí. Voy a añadir uno más así. Esto es para el usuario. Por lo que dentro aquí, necesitamos una ventaja común aquí. Así dicen res.locals.user, va a ser igual al usuario de punto de solicitud y debe haber punto y coma al final. Por lo que debería cambiar rápidamente esto. Por lo que el usuario se agrega al objeto de solicitud por pasaporte. Cuando un usuario ha iniciado sesión correctamente. Ahora podemos usar esta variable de usuario dentro de plantillas para aplicar alguna renderización condicional. Actualmente si pasamos a un menú, tenemos registro, tenemos login y también cerramos sesión mostrando al mismo tiempo. Solo queremos mostrar los botones de registro e inicio de sesión cuando el usuario no haya iniciado sesión. Por lo que pasa a nuestro diseño, un PRG, y luego ve a nuestra sección nerviosa sobre la parte superior aquí. Vamos a agregar algún renderizado condicional para solo mostrar si el usuario está conectado. Entonces justo debajo del logo en la lista desordenada, sangrada en un nivel, podemos decir que si usas es falso, vamos a sangrar en este ítem de lista para registrarse, y también iniciar sesión. Estos dos botones solo se mostrarán si el usuario no está conectado. Else mostrará el botón de cerrar sesión cuando el usuario esté conectado. Por lo que para ello, también podemos mejorar la sección de cierre de sesión en un solo nivel. Entonces podemos agregar la sección else que se alina con la sección if justo arriba. También, ya que tenemos acceso a este uso de variable la cual solo ves aquí, también podemos mostrar al menú, el nombre de usuario. Simplemente tenemos que cerrar la sesión, podemos preguntar los corchetes y luego usar el hash dos salidas, algunos datos dinámicos. Así que abre los tirantes rizados. Ahora podemos acceder al usuario dot nombre. Por lo que nos da un guardado y tratando de sonidos en el navegador. Entonces recargar. Actualmente queremos ver el botón de registro y el inicio de sesión. Intentemos iniciar sesión. Voy a ver qué pasa si agregamos nuestros detalles al fondo. Se Iniciar sesión. Genial, por lo que ahora sólo vemos el botón de cierre de sesión y también nuestro nombre ahora se muestra junto a esto. Intentemos hacer clic en esto y cerrar sesión. Ahora tenemos el mensaje flash encendido aquí. También ahora solo vemos los botones de registro e inicio de sesión. Ahora vamos a proteger las rutas admin de usos no autorizados. Para ello, voy a crear una pieza de middleware para quemar a través de donde necesitamos comprobar si el usuario es un administrador. Podemos hacer esto más en el uso de controller.js, y abajo abajo solo sopla nuestra función de logotipo. Podemos agregar exports.admin. Esta va a ser una función tomando la petición, la respuesta. También a continuación, dentro de aquí vamos a realizar dos cheques. En primer lugar es utilizar un método llamado se autentica. Entonces voy a decir que si request dot está autenticado, entonces va a rizar llaves justo después. Entonces segundo es comprobar si el usuario es un administrador. Temprano cuando creamos el modelo de usuario en el users.js. Abramos esto. Agregamos los campos es admin, que es un tipo booleano predeterminado de false. También voy a usar esto en la declaración, if para permitir solo a usuarios libres que estén configurados en true. Entonces controlador de noticias, así como comprobar si el usuario está autenticado. También podemos usar el doble ampersand. También es comprobar si la condición de request.user.admin está establecida en true. Esta será una pieza de middleware, es pass-through. Por lo que también necesitamos llamar a continuación. Entonces, en primer lugar, agrega siguiente dentro de aquí, que pasará a la página de administración. Entonces la palabra clave return después de esto, esta palabra clave return romperá la función si esto es cierto. Si no se cumple esta condición sin embargo, solo podemos redirigir al usuario de vuelta a la página principal. Fuera si las declaraciones, podemos preguntar a los res.redireccionamientos. Entonces como una cuerda simplemente hacia adelante barra para volver a la página de inicio. Ahora más en el archivo index.js, podemos y este middleware a nuestras rutas de administración. Entonces index.js. Si encontramos nuestra sección de administración, estas son rutas de Admin aquí. El primero que queremos proteger es simplemente hacia adelante slash Admin. Por lo que antes de llevarlos a la página de administración, también se va a ejecutar a través de estos E's Admin función, que también está en el controlador de uso. Así que usa el controlador dot es admin y separa estos con una coma. Entonces también voy a agregar una segunda ruta 2 cual captará todas las rutas comenzando con un administrador de slash forward, y luego hacia adelante slash cualquier otra ruta justo después. Entonces te mostraré lo que quiero decir con este extraño router. Dot llega a ser un rondas de control. Entonces para tal admin y luego hacia adelante slash, vamos a usar la estrella. Por lo que esto atrapará todas las rutas que comienzan con forward slash admin, y luego cualquiera de las cosas después. Entonces vamos a correr por el uso controller.isAdmin antes de que procedan con cualquiera de estas rutas extra. Ahora pasa al navegador para probar diseños en los almirantes. Por lo que tanto el navegador como recargar. Podemos ver por todos los elementos del menú que actualmente no estamos ingresados. Probemos adelante/Admin. Después redirigimos de vuelta a la página principal. Así que intentemos iniciar sesión. Ahora iniciamos sesión con barra inclinada hacia adelante o /admin una vez más. Una vez más, nos redirigen de vuelta a la página principal. Entonces para ambos casos, nos dirigimos de vuelta aquí, lo que significa que la autenticación ha fallado. Como ya habrás adivinado, esto se debe a que nos establecemos como usuario y es admin está configurado para ser falso. Entérate en mLab. A lo mejor está bajo de vuelta. Sí, no hay el nombre de usuario y contraseña y el inicio de sesión. Ahora podemos seleccionar a nuestro usuario de mLab, y luego configuró admin para que sea verdad. Haga clic en nuestra base de datos. Necesitamos la colección del usuario. Haga clic en el icono Editar. Por lo que aquí podemos ver es admin se establece en false. Podemos cambiar esto para que sea verdad. Haga clic en Guardar y volver. Esto entrar en base de datos no es algo que queremos estar haciendo cada vez que queremos crear un nuevo administrador. Pero una vez que tengamos un conjunto de administración, como lo hacemos ahora, un buen reto para ti sería seguir adelante y crear algo desde la pantalla de administración, para poder cambiar la configuración para agregar nuevos usuarios de administración. Por lo que ahora códigos de barras el proyecto mientras todavía estamos logueados. Volvamos a las rutas admin adelante/admin. Ahora ten a IsAdmin establecido en true. Podemos ver que ya no redireccionamos y nos quedaremos en estas rutas admin. Ahora si intentamos hacer clic en cerrar sesión, entonces nos redirigen de vuelta a la página de inicio. Recuerda también añadimos esta captura todas las rutas con la estrella. Probemos aquí algunas rutas diferentes. Entonces admin, adelante/ agrega. Actualmente nos devuelven a la página de inicio. Intentemos iniciar sesión, y probemos esto de nuevo. Entra como nuestro administrador. Ahora podemos intentar adelante/admin. Obviamente, irá a esto, lo cual es bueno. Una vez más intentaremos iniciar sesión. Ahora estamos redirigidos de vuelta a la página principal. 58. El modelo de orden: Bienvenido de nuevo a esta nueva sección. Esta sección va a ser todo sobre permitir que el usuario realice reservas y también el área de cuentas de usuario también. Donde el usuario pueda ver cualquier reserva que haya colocado. También estaremos agregando esto a la Sección de Administración, que el administrador pueda ver cualquier reserva que se hubiera colocado para todos los usuarios. Esta reserva o toda esta información se almacenará en una base de datos como colección. Por lo tanto, necesitamos crear un modelo de pedido para guardar nuestros datos. Primero crea un nuevo archivo llamado el order.js por dentro de la carpeta de modelos, por lo que modela nueva carpeta order.js. Entonces podemos seguir adelante y crear nuestro modelo igual que tenemos para los usuarios y también para el hotel. Cerremos una barra lateral. Este modelo tendrá tres cosas. En primer lugar, el ID de usuario, por lo que sabemos quién ha realizado el pedido. Segundo, el hotel_id para el hotel que quiero reservar y tercero son los detalles del pedido. Este será un objeto que contiene los detalles de las fechas de salida, número de vuelos y el número de invitados. Como de costumbre, crea nuestra constante para el paquete Mangoose, que necesitamos requerir en la parte superior del archivo, así que requieren mangosta, ¿de acuerdo? Entonces podemos crear nuestra constante para nuestro esquema de pedido y satisfaciendo nueva mongosa.Esquema mayúscula S, que toma en nuestros objetos. Nuestro primer campo es el usuario underscore_id Este id de usuario va a tener el tipo de cadena. También va a ser un campo requerido, por lo que establecemos requerido para ser igual a verdadero, separado por una coma. Nuestro segundo campo va a ser para el hotel_id, que el usuario quiere seguir adelante y reservar. Esto va a tener un tipo diferente al que hemos visto antes. Esto va a ser igual a Mongoose.esquema.Tipos con una T mayúscula y el tipo va a ser el ObjectSID. El hotel_id va a utilizar este ObjectID como su tipo de datos. Esto lo proporciona la mangosta y lo necesitaremos por una buena razón más adelante en este apartado. Hemos almacenado en el hotel_id, que está en la reserva pero también necesitamos recuperar el resto de los detalles del hotel de la base de datos. uso de este ObjectID en lugar de una cadena normal nos permitirá comparar adecuadamente este id con el que se almacena en la base de datos más adelante. Conforma este campo también necesita ser requerido para que sea cierto. Entonces nuestro tercer campo va a ser para los detalles del pedido, que va a contener el tipo de objetos y esto también se requiere para ser igual a punto y coma verdadero al final. Entonces podemos exportar nuestro modelo con nuestro módulo familiar.export, que es igual a nuestro mongoo.model. Pasamos en nombre de orden como el segundo valor esto toma en nuestra variable nombre de esquema de orden, que es éste, justo aquí, por lo que en un punto y coma al final y darle a esto un guardado. Esto es suficiente para nuestro esquema de pedido, continuación nos pondremos a trabajar creando una página de confirmación de reserva y esto permitirá al usuario revisar todos los detalles antes de finalmente realizar un nuevo pedido. 59. Página de confirmación de la reserva: Por el momento podemos ir a cualquier hotel que usted desee. Selecciona esto y luego hacia abajo en la parte inferior podemos agregar nuestros detalles de viaje. caso de querer reservar esto, necesitamos agregar la duración, las fechas de salida, el número de invitados, y luego realizar una búsqueda para proporcionar todos los detalles. Si hacemos clic en la búsqueda recibida, este resultado de búsqueda ahora se personaliza con todos los detalles los cuales están centrados. Esto es bueno, pero ahora necesitamos agregar algunas etapas más para permitir que el usuario reserve este hotel. El primer paso que quiero agregar es un botón Continuar a esta página, que llevará al usuario a una página de confirmación de reserva donde podrá revisar sus datos finales antes de realizar el pedido. Esta vista del hotel se encuentra dentro de los mixins del hotel. Pasemos a este archivo en el editor de texto. Sidebar, mixins y luego subrayado hotel. Abajo en la parte inferior. Desplácese hasta la parte inferior de este archivo, podemos renderizar condicionalmente un botón para solo mostrar en las rutas de resultados. Estas son las rutas que están actualmente en y luego vamos a añadir un botón Continuar justo por debajo del precio total. Este costo total está encendido aquí. Hagamos algo de espacio y podemos decir si URL es igual a /resultados. Si lo es, podemos proporcionar un enlace con la clase de botón, que va a tener un href igual a y cuando está en ticks de desembark. Esta es /confirmación y luego nuestra sección Dinámica, que va a ser nuestra consulta y luego el texto todo de continuar para todos botón. Para este enlace, vamos a estar vinculándolo a una URL de/confirmación, y luego reenviar una slash de una cadena de consulta, que la va a construir a partir de la información necesaria para esta reserva. Esta cadena de consulta será una serie de pares de valor de nombre. Este es el mismo método que usamos antes en el curso cuando usamos la API de iTunes. Vamos a crear esta cadena de consulta ahora arriba. Justo por encima de nuestras sentencias if, podemos crear una constantes llamada consulta, es coincidencia aquí y esto va a ser igual a una cadena dinámica, así que agrega los ticks de atrás. Como mencionamos antes, se trata de una serie de pares de valor de nombre. El primero va a ser el ID del hotel. Vamos a configurar el ID para que sea igual a hotel._ id Recuerda que toda esta información está pasando, pasa a lo largo de la URL como cadena de consulta y luego podemos agarrar esta información y usarla en nuestro controlador. Entonces necesitamos el ampersand para agregar un par de valor de segundo nombre. El segundo va a ser por la duración. El ampersand, por lo que la duración y esto va a ser igual a la consulta de búsqueda que hemos utilizado antes justo arriba para agarrar nuestra duración, la fecha de salida y también el número de invitados. searchQuery.Duration, después de la duración, estas van a ser las fechas de salida y recuerden esto es sólo una cadena larga y ésta va a ser igual a. Esta de nuevo va a ser la SearchQuery y igual que hemos usado antes, esto es SearchQuery.DateOfDePartida. Después de esto, podemos agregar un nuevo ampersand, que va a ser por el número de invitados. Esto va a ser igual a searchQuery.NumberOfGuests, agrega un punto y coma al final y toda esta información formará ahora nuestra URL. Probemos esto en el navegador. Guarda este archivo en nuestro navegador y si aún te desplazas en la página Resultados como yo soy. Basta con volver a cargar el navegador, volver a confirmar antes de la presentación. Ahora estoy viendo un botón Continuar en la parte inferior. Haga clic en este botón. Nos llevan a una ruta que aún no hemos manejado. Nos dieron un seguimiento a página completa como se esperaba. Pero si buscamos la URL, podemos ver la ruta que creamos de /confirmation y luego nuestras series o pares nombre-valor. Contamos con el DNI igual al ID del hotel. Tenemos la duración de siete noches, las fechas, y también encontrando el número de invitados igual a cuatro. Esta es toda la información que necesitamos para construir un orden. Como todos saben es manejar esta ruta en el index.jsfile. Pasemos a las rutas index.js y podemos capturar esta cadena de consulta dentro de una variable llamada datos. En nuestras rutas de usuario en el cierre de sesión, podemos agregar router.get/confirmation/ y utilizamos dos puntos, ya que estos datos son dinámicos. Este va a ser un controlador de usuario, voy a llamar a la función Confirmación de reservas. Después pasa a o usamos un controlador. Crearemos esta confirmación de reserva y bajaremos hasta la parte inferior justo después de cerrar sesión. Entonces las exportaciones, así es confirmación de reserva. Esta va a ser una función de sincronización. Ya que estaremos trabajando con la base de datos, al pasar la respuesta de solicitud se crea un cuerpo de función, la transacción, el bloque catch, pasando el error y también pasar este error al siguiente. Ya que estamos usando el siguiente error, también pasamos esto después de la solicitud y respuesta. Lo primero que voy a hacer es capturar la cadena de consulta desde la URL. Recuerda, podemos acceder a esto desde el request.params, seguido del nombre que le dimos en el router. En la sección de entrenamiento crearemos una constante llamada data, por lo que solicita.params.data. Antes de ir más lejos, podemos comprobar qué datos tenemos con un res.json. Entonces res.json, los datos de nuestra cadena de consulta. Si guardamos esto y ahora actualizamos, ahora tenemos nuestro DNI, la duración, fecha de salida, y el número de invitados. Este parece ser los datos de unos, pero no se está mostrando en formatos json. Es sólo una cuerda llana. Esto se debe a que primero necesitamos pasar la cadena de consulta. Node nos proporciona un módulo llamado cadena de consulta y este es un módulo núcleo. No necesitamos instalar nada extra, todo lo que hacemos es requerirlo en el archivo en el que queremos usarlo. Volvamos al controlador de uso excesivo, hasta la parte superior del archivo y crea una nueva constante llamada querystring. Después requieren el módulo que se llama cadena de consulta. Ahora podemos pasar las constantes de datos que creamos a continuación y almacenar los resultados en una nueva constante, que voy a llamar datos de búsqueda. Volver abajo a nuestra confirmación de reserva. Podemos ir justo debajo de los datos, crear algunas nuevas constantes. Buscaré datos, que va a ser igual a nuestra cadena de consulta que acabamos de importar. Utilice el método de.parse, analizando en los datos de arriba. Ahora podemos agregar los datos de búsqueda dentro del res.json y ver qué pasa. Dale a esto un guardado y luego vuelve a cargar el navegador. Genial. Ahora tenemos los datos en el formato con los que podemos trabajar. Actualmente, sólo tenemos el id del hotel almacenado en res.json. Ya podemos buscar en la base de datos los detalles completos del hotel usando este id Volvamos a nuestra confirmación de reserva. A continuación, buscaré datos, podemos escribir una constante llamada hotel. Esto va a ser igual a esperar a nuestro hotel modelo dot find y la información que queremos encontrar es el hotel basado en el guión bajo id El id que desea buscarlo en la base de datos se almacenará en los datos de búsqueda y luego podemos acceder a el.id. busca data.id y hace uso de una H dentro de aquí, ya que este es nuestro modelo. Recuerda al crear nuestro esquema de pedidos, en el último video, dije que el id del hotel necesitaba tener el tipo de datos de id de objeto Por eso lo hicimos en el último video. Este id ahora se comparará correctamente con un id de hotel en la base de datos porque lo es, si fuera una cadena, no funcionaría. Una de las cosas también, si pasamos al navegador, vemos que el hotel no está definido. Esto se debe a que necesitamos importar este archivo de hotel también. Subiremos a la cima. Podemos decirlo const de hotel y luego podemos requerir el modelo hotelero, así.. /modelos carpeta y /hotel. Ahora podemos bajar y reemplazar nuestro res.json por un res.render. Volver a la conformación de reservas. Podemos agregar rest.render. Vamos a crear una plantilla de confirmación así que agreguemos esta información ahora. Entonces nuestras opciones objetos pasarán en el título de confirmar su reserva. También necesitamos pasar los datos a esta plantilla. Queremos enviarle las constantes hoteleras, que va a contener toda la información del hotel que se había pedido. También estos datos de búsqueda justo aquí, cuales contendrán la información como la fecha de salida. Hotel y también los datos de este tipo. Ahora podemos entrar en nuestras vistas y crear estas plantillas de confirmación como un archivo pug. Abre la carpeta Vistas y luego crea la confirmación.pug, cierra esto. Esta será una plantilla bastante directa que básicamente mostrará el mixin hotelero junto con los datos del hotel y los datos de búsqueda, que vamos a pasar al mixin. Esto te metes en el diseño extiende. Vamos a incluir desde la carpeta mixin, el contenido del bloque hotelero de subrayado. El rubro nivel dos, que va a ser el título. Podemos entonces crear un bucle con cada ojo en Hotel. Entonces como nuestro hotel mixin en la parte inferior, que va a tomar en yo, que es cada hotel individual y también los datos de búsqueda que pasarán a esta plantilla. Recuerda que esto contiene información como el número de huéspedes y la fecha de salida. Todo esto será necesario para la página de confirmación. Si nos deja cambiar la ortografía de conformación y así renombrar, asegúrese de que esto es correcto y guarde este archivo. Por ahora en un hotel mixin, así que subrayan hotel.pug. Este hotel ya recibe los datos de cuando creamos las plantillas de resultados. Ya tenemos el hotel, que lo pasamos a esta variable como i y la consulta de búsqueda. La mayoría de las cosas ya están configuradas para nosotros. Si guardamos este archivo y luego recargamos el navegador, vemos que se está mostrando la plantilla, tenemos todos los detalles del hotel. Abajo en la parte inferior, tenemos la calificación de estrellas, tenemos el país, el costo por noche y el nombre del hotel. Pero no vemos ninguno de los detalles de búsqueda como el número de noches. Echemos un vistazo a esto en la mixin. Si nos desplazamos hacia abajo y echamos un vistazo a la sección de resultados, este mixin tiene todos los detalles de SearchQuery que necesitamos renderizado condicionalmente. Estos sólo se muestran si las rutas comienzan con /resultados. También podemos sumar al final la confirmación lo ruta. Si la URL es igual a resultados o si es la página que estamos actualmente, que es confirmación y luego nuestros datos dinámicos. Podemos comprobar si la URL.StartsWith. Queremos que éste comience con una /confirmación/. Después recargar en la misma página y ahora si nos desplazamos hacia abajo, vemos estos detalles de búsqueda también aparecen en la parte inferior. Casi terminamos ahora para estas plantillas. Pero todavía hay una pequeña cosa que añadir. Se supone que esta es la página de confirmación de reserva para confirmar que los datos del usuario son todos correctos antes de realizar el pedido. Por lo tanto, necesitamos un botón que permita realmente al usuario volver a realizar el pedido en el mixin del hotel. Solo tenemos un botón de continuar abajo en la parte inferior para la página de resultados. También podemos agregar uno para la página de confirmación dos. De lo contrario, esto se convierte en una sección else if, porque vamos a tener una última sección else hacia abajo en la parte inferior. Echaremos un vistazo a esto en un video posterior. Es url.Inicia con, queremos las rondas de /confirmación/. Entonces vamos a renderizar un botón igual que arriba así a.button (href=' ') y solo voy a dejar esto como una cadena vacía por ahora y nos ocuparemos de esto más adelante. su pedido y continuaremos esta sección href en el siguiente video donde le pedimos el código para realizar los pedidos. Pero ahora si guardamos este archivo y luego recargamos en las rutas de confirmación, ahora vemos un botón abajo en la parte inferior para colocar el pedido. Bien, ahora las cosas se están moviendo bien. Te veré en el siguiente video donde pasaremos a colocar los pedidos en la base de datos. 60. Cómo hacer pedidos: El siguiente paso, una vez que el cliente haya revisado los detalles de esta página de confirmación, es poder realmente realizar el pedido. En la mezcla hotelera agregamos la ruta que necesitamos para hacer el pedido. Vamos al _hotel, y luego abajo abajo agregamos una ruta vacía para la href. Ahora voy a agregar esto como barra inclinada hacia adelante, luego orden colocado, y luego barra hacia adelante, podemos agregar nuestra consulta dentro aquí. Abre las llaves y también analizando la consulta, que son todos los datos que necesitamos para la orden. Pero solo una cosa rápida de arreglar primero, solo queremos que este botón muestre si el usuario está conectado. Podemos usar alguna forma de renderizado condicional. Después de lo demás si también podemos agregar una sección if. Si el usuario está conectado, entonces queremos mostrar este botón, por lo que sangrar esto en un nivel, contrario podemos redirigir al usuario a la pantalla de inicio de sesión. Añadamos la última sección else hacia abajo en la parte inferior, lo contrario voy a copiar este botón y luego pegarlo en, y esto puede redirigir al usuario de nuevo al inicio de sesión slash, donde pueden seguir adelante e iniciar sesión para realizar un pedido. Por favor, inicie sesión para pedir. Aquí hay margen de mejora si quisieras un poco de proyectos paralelos. Al redirigir a este formulario de inicio de sesión, actualmente no guardamos almacenados todos los detalles de búsqueda. El usuario necesitaría iniciar sesión y luego realizar la búsqueda del hotel una vez más. Pero te dejaré esto como un reto si quieres ir y hacer esto. Ahora, pasa al index.js. Podemos manejar esta orden ruta colocada. Guarda este archivo, index.js. Entonces podemos sumar un router.get, darle la vuelta para simplemente crearlo, que fue orden colocado barra inclinada hacia delante, y luego vamos a capturar los datos una vez más de la cadena de consulta. El UserController.OrderColated, y el punto y coma al final. Entonces creamos orden colocado sobre el UserController. Justo después de la confirmación de la reserva, vamos a configurar esto, exports.OrderPlated. Esto va a ser asíncrono, solicitar, la respuesta, y también siguiente. Intentaré bloquear para empezar. Podemos entonces atrapar cualquier error y luego analizar estos errores a continuación. Al igual que hicimos anteriormente para la confirmación de reserva, lo primero que tenemos que hacer es crear una constante y agarrar los datos de los req.params. De hecho, podemos simplemente copiar esta línea, pegar en el bloque try, y luego también necesitamos usar el módulo de cadena de consulta, que nuevamente usamos antes para analizarlos en JSON. Entonces vamos a configurar esto como una constante, ParsedData, esto va a ser igual a nuestro módulo de cadena de consulta que importamos. Bueno, para usar el método analizado, analizando en los datos de arriba. Ahora es el momento de hacer uso de nuestro modelo de pedidos que creamos al inicio de esta sección para construir un nuevo orden para empujar a la base de datos. Soplar nuestros parsedData, luego crear nuestra constante de orden. Estoy configurado esto en un nuevo orden, que es O. Antes de poder usar este modelo de orden O, necesitamos requerirlo en la parte superior de este archivo. Esto tiene que ser O, y luego arriba en la parte superior sólo cosas que nuestro hotel y crear una nueva constante llamada orden. Requerir de la carpeta de modelos, que es.. modelos de barra inclinada, y luego reenviar orden de barra. Este orden que estamos construyendo tiene que ser la misma estructura que el modelo de órdenes que creamos al inicio de la sección. Si pasamos a este order.js, éste tiene tres campos diferentes, el id de usuario, el id del hotel, y también los detalles del pedido. Primero, agreguemos el id de usuario a nuestro pedido justo aquí, por lo que user_id va a ser igual a un req.user. _id Entonces el id del hotel, hotel_id, esto va a ser igual al parsedData.id Entonces finalmente, los detalles del orden, que tiene el tipo de objetos, por lo que order_details, entonces podríamos configurar esto como un objeto, al igual que especificamos en los detalles del pedido. Estos detalles de orden contendrán toda nuestra información de nuestra cadena de consulta, que se almacena dentro de los datos analizados. El primero es la duración, que es igual a parsedData.Duración. El segundo es la fecha de salida. Nuevamente, esto es igual a los Datos Paralizados, y podemos acceder a esto con.DateOfSalida. El tercero y último es el número de invitados, que va a ser igual a parseddata.NumberOfInvitados. Esta es toda la información que conformará nuestro pedido, tenemos los detalles del hotel y también los detalles del pedido junto con el usuario. Ahora todo lo que necesitamos hacer es llamar a guardar en este pedido, para que podamos esperar el order.save, y luego después del guardado también podemos agregar un mensaje flash para que el usuario sepa que se ha colocado el pedido, así que solicita.flash. Este tipo de mensaje va a ser Info y una cadena de texto, así que esto va a ser, “Gracias. Se ha realizado su pedido”. Entonces lo último que hay que hacer es luego agregar un reg.redirect, que redirige al usuario a su cuenta, por lo que reg.redirect a una ruta de mi cuenta. Esta ruta aún no se ha creado, pero llegaremos a esto muy pronto. Encima en el navegador, y luego podemos seguir adelante y probar esto. Guarda este archivo, en el navegador. Sólo página de confirmación en este momento con el botón de realizar su pedido. Ahora si recargamos, ahora vemos que el botón ha sido cambiado a, por favor inicie sesión para pedir. Vamos a hacer clic en esto, y luego vamos a seguir adelante e iniciar sesión. Una vez ingresados, ya podemos ir a un hotel. Bajemos hasta el fondo. Podemos hacer una búsqueda. Vayamos al número de invitados. Haga clic en “Buscar”. Ahora estamos llevados a la página de resultados la cual tiene nuestros detalles, continuaríamos hasta la página de confirmación, que nuevamente tiene todos los detalles del pedido. Después da click en hacer tu pedido. Ahora nos llevan a mi cuenta y también recibimos el mensaje flash de su pedido se ha colocado. Si nos desplazamos hacia abajo, también obtenemos un seguimiento para mensaje. Pero esto no es nada de qué preocuparse todavía. Seguiremos adelante y manejaremos esta ruta pronto. Pero si ahora vamos a mLab y nos dirigimos a nuestra base de datos, dentro de las colecciones, ahora tenemos una colección de pedidos con un solo documento. Abramos esto y veamos qué contiene. Ampliar la vista. Bien. Ahí está nuestro id para el pedido, tener el id para el usuario, y también para el hotel. También tenemos los detalles del pedido por la duración, la fecha de salida, y también el número de invitados. Eso es genial. Ahora podemos pasar al siguiente video donde vamos a crear el nuevo área de cuenta de usuario, donde el usuario puede ver todas las reservas que ha realizado. 61. Área de cuentas de usuario: Después de realizar el nuevo pedido, nos redirigen a esta sección Mi Cuenta, cual aún no hemos configurado. Esto es lo que vamos a seguir adelante y manejar en este video. El área Mi Cuenta será una sección Personal donde el usuario conectado podrá ver cualquier pedido que haya realizado. Justo antes de hacer esto, necesitamos también registrar un nuevo usuario para probar que las cosas están funcionando. Vamos a cerrar sesión y puedes registrarte como nuevo usuario. Solo agreguemos esto como pruebas. Voy a probarlo como contraseña y confirmarlo. Bueno, ahora iniciamos sesión como el usuario de prueba. Ahora necesitamos seguir adelante y hacer un nuevo pedido para cualquier hotel. Vayamos por éste. Haga clic aquí. Entonces podemos agregar cualquier cosa que queramos aquí abajo para hacer un pedido. Ahí vamos. Busca esto, continúa hasta la confirmación, y luego realiza el pedido. Si ahora pasamos a mLab, ahora deberíamos ver dos registros dentro de la colección de pedidos. Hay dos pedidos de dos usuarios diferentes. Esto ahora nos da alguna información con la que trabajar, para que sepamos qué hacer. Ahora necesitamos pasar primero al index.js y luego podemos manejar esta sección Mi Cuenta, por lo que index.js y vamos a agregar esto también a las rutas de usuario, por lo que router.get, mi- cuenta, esto también será manejado por el controlador de usuario. Entonces seguiremos adelante y crearemos MyAccounts, por lo que es el controlador de usuario. Podemos configurar esto ahora. Sólo para es admin, exports.MiCuentas. Esto va a ser asíncrono, solicitud, respuesta, y también siguiente, nuestra sección try, atrapar cualquier error, y luego pasar esto al siguiente. Al configurar esto, podríamos seguir adelante y hacer algo como lo que hemos mirado. Por ejemplo, podríamos ir órdenes const. Ya hemos utilizado esto muchas veces antes. Los usuarios, los pedidos, y también para los hoteles. Seleccione los pedidos.Buscar. Entonces podríamos usar este método Find para hacer coincidir el user_id con la información del request.user. _ID. Entonces podemos hacer un res.json para dar salida a las órdenes. Pasado al navegador, aún solo en MyAccount, puedes pulsar “Recargar”. Ahora ve el json para los resultados. Esto funciona bien. Vemos el que reserva de este usuario en particular, así que tenemos este ID de usuario. También tenemos los detalles del pedido para el pedido único que se está realizando. El pequeño problema es que probablemente queremos mostrar al usuario los detalles del hotel como el nombre y destino dentro de sus cuentas. Pero actualmente, sólo tenemos este ID de hotel que el usuario no reconocería. Encima en mLab, contamos con diversas colecciones. Vamos a nuestra base de datos. Tenemos los hoteles, los pedidos, las sesiones, y los usuarios. Este ID que tenemos actualmente está en la colección de pedidos de la base de datos, pero los detalles del hotel en la colección hotelera. Básicamente, necesitamos una forma de agarrar los detalles del hotel de otra colección. Podemos hacerlo utilizando la etapa de búsqueda desde el ducto de agregación de Mongo. Volver a la sección MyAccount, podemos reutilizar la constante de pedidos. Pero esta vez vamos a escribir order.aggregate, así que solo eliminemos esta sección aquí.aggregate y luego plus. Todavía necesitamos filtrar por el usuario. Podemos hacerlo en la etapa de partidos. Abre los tirantes rizados, $ símbolo coincide igual que usábamos antes. Entonces vamos a escribir las coincidencias de User_ID con la request.user.id. Esto sólo va a agarrar cualquier registro donde el ID de usuario coincida con el usuario conectado actual. Agrega una coma al final y luego podemos añadir la etapa de búsqueda con $ búsqueda de símbolos. En primer lugar, necesitamos especificar la colección de la que queremos obtener los datos. Actualmente, nosotros en la recolección de pedidos, pero queremos agarrar los datos de la colección del hotel. Podemos hacer esto agregando desde, y luego como una cadena, podemos agregar en el nombre de nuestra colección, que es hoteles. Siguiente es el campo local, que vamos a enviarlo al hotel_id. campo local es el nombre de campo de nuestra colección de pedidos, que básicamente se considera las entradas. Hotel ID está en nuestro archivo order.js. Es este momento que ven aquí. Agrega una coma al final y luego después de esto podemos agregar los siguientes campos, y establecerlo en una cadena de ID de guión bajo. Este es el campo del ID de subrayado de la colección del hotel, que vamos a emparejar. Estos datos de hotel con los que emparejamos se sumarán a nuestros pedidos como una matriz. Ahora le damos a este campo array un nombre de nuestra elección. Utilizamos el como palabras clave y luego le damos un nombre de hotel_ data. Ahora bien, si guardamos este archivo y luego vamos al navegador, podemos refrescar el json. Ahora tenemos el nuevo campo de datos hoteleros y esto está agarrando toda la información del hotel de este ID del hotel, pero de una colección diferente. Esto significa que ahora tenemos acceso a todos los datos del hotel y podemos usarlo dentro de nuestras plantillas. Volvamos al controlador y creemos esta plantilla ahora reemplazando al res.json. Podemos eliminar esta línea aquí y reemplazarla por un resto de render para generar una nueva plantilla de user_accounts. Después de esto, pasamos en nuestras opciones. El título de mis cuentas y también la información del pedido. Guarda esto, y luego podremos crear nuestras plantillas user_account dentro de nuestras vistas con la extensión.pug. Después sigue adelante y agrega los contenidos. Dentro de aquí respondemos el familiar diseño se extiende, contenido de bloque, el título nivel 2 de título y la línea horizontal solo para separar el título de la constante. Voy a añadir un comunicado if para comprobar si el usuario está conectado. Si lo es, entonces podemos ir y genera un encabezado de nivel 3 y los ticks de atrás ya que esto será dinámico con el mensaje de Hi, luego una coma, entonces podemos generar el nombre del usuario seleccionando user.first_name. Esto dirá algo como, “Hola Chris”, con un signo de exclamación al final. Entonces vamos a comprobar si hay algún pedido en la base de datos. Podemos decir si orders.length es mayor que 0. Esta sección sólo se mostrará si hay algún pedido. Después añadiremos un encabezado de nivel 3 con el texto de tus reservas y para todas las reservas. Vamos a recorrer todos los pedidos en la base de datos para este usuario en particular y luego los pondré dentro de una lista desordenada. Vamos a recorrer mediante el uso de cada orden en órdenes, voy a rodear esto en un div con la clase de reservas para que podamos agregar CSS más adelante. Entonces podemos construir nuestra lista desordenada. Nosotros primero enumeramos ítem el cual va a través de las garrapatas traseras por lo que el texto de Orden ref. Entonces podemos agregar la referencia de orden la cual se almacena en orden. _id Debajo de este primer ítem de lista, que es para el id de orden, entonces vamos a crear un segundo bucle que va a recorrer nuestros datos de hotel. Recuerde que los datos del hotel son esta matriz que hemos agregado al final. Una vez que estemos en este orden en particular, también necesitamos recorrer estos datos del hotel para acceder a toda la información dentro de aquí. Para ello creamos un nuevo bucle con cada uno y diremos datos en order.hotel_data. Todo lo que vamos a hacer ahora es crear cinco elementos de lista diferentes que van a ser para el hotel, el país, la fecha de salida, el número de noches, y también el número de invitados. Añadamos nuestro primer ítem de lista. El hotel va a ser igual a data.hotel_name. Datos se refiere a todos los datos de esta sección de datos del hotel. Entonces vamos a acceder a las llaves individuales como el nombre del hotel, el país, y el costo por noche. Ten el nombre del hotel, cierra las garrapatas traseras y luego iba a duplicar esto cuatro veces más. El segundo es para el país y luego data.country. El tercero va a ser la salida. La fecha de salida no está dentro de estos datos del hotel. Esto forma parte de nuestra información original aquí por lo que podemos acceder a esto con todos los detalles.Fecha de salida. Vamos a quitar esta sección, acceda a nuestro pedido original que es el primer bucle en la parte superior aquí, por lo que Order_Details.DateOfDePartida. El siguiente es por el número de noches. Copiemos esta sección aquí y luego peguemos esto en. Todo lo que necesitamos hacer es cambiar la fecha de salida para que sea la duración. Por último, el último va a ser por el número de invitados. Podemos quitar esto y reemplazarlo por el ORDER_Details.NUMBEROInvitados. Esta sección aparecerá si hay alguna reserva mediante el uso de estas declaraciones if. Si no lo hay, necesitamos agregar una sección else hacia abajo en la parte inferior en el mismo nivel. Esto sólo va a mostrar un encabezado de nivel 3 con el texto de no órdenes que mostrar. Entonces diremos, sin embargo... Esto es para toda la sección de reservas. Recuerda en la parte superior comprobamos si el usuario estaba presente. También podemos agregar una declaración else para la sección 2. Justo en la parte inferior podemos agregar esto al mismo nivel que las declaraciones if. Asegúrese de que estos estén alineados entonces podemos agregar un segundo encabezado de nivel 3, que simplemente diga: “Por favor, inicie sesión para ver esta sección”. Ahora hacia el navegador, recuerda reemplazar este JSON por el resto de render. Ahora solo podemos refrescar el área Mi Cuenta, desplazarnos hacia abajo, y estos detalles de nuestro usuario de prueba. Esta reserva es el hotel número 6 así que esto es bueno. Vamos a cerrar sesión y podemos probar a nuestro otro usuario. Vamos a iniciar sesión. Ahora podemos ir al área Mi Cuenta, entonces /my-account, desplácese hacia abajo, y este es el hotel número 2 así que este es un orden diferente al que hemos visto justo antes. Ahora obtenemos los pedidos correctos para el usuario correcto. Tan solo para terminar las cosas, podemos pasar a la disposición de perfil y otros vinculados a esta sección Mi Cuenta. Abre la barra lateral, ve al layout.pug. Justo encima de este enlace de cierre de sesión, podemos agregar un nuevo elemento de lista al mismo nivel. Agrega un enlace con el href y esto va a mis cuentas con el texto de mis libros/cuentas. Guarda esto, cierra la barra lateral y luego vuelve a cargar y ahora ten un botón y llevarlos a la sección de cuenta. Con esto ahora funcionando, continuación haremos algún trabajo en la vista admin para permitir que el administrador vea una lista completa de reservas por parte de todos los usuarios. 62. Visualización de todos los pedidos: En el último video, creamos un área de cuenta donde el usuario puede ver sus propias reservas. Nos pone en admin, queremos poder tener todas las reservas disponibles para ver para todos los usuarios. Si iniciamos sesión como administrador y luego vamos a forward slash admin, ya tenemos esta vista admin disponible para nosotros. Antes al crear esta página, también agregamos un elemento de menú llamado ver reservas, que ahora puedes seguir adelante y usar. Esto se acabó en el archivo admin.plug. Entonces vamos a abrir esto, dentro de más vistas, así que haz clic en el admin.pug, y aquí vamos, esta es la sección de reserva de vista que enlaza a forward slash admin, forward slash orders. Entonces ahora tenemos que ir al archivo index.js y manejar esta ruta ahora. Vamos a copiar esta ruta, cerrarla, cerraré más de estos archivos hacia abajo, ir al index.js y mantener esto organizado. Voy a volver a subir a la sección de administración. Por lo que estas son las rutas admin y luego agregar router.get, ya que esta es una solicitud get. Y luego pega en la cadena de órdenes de barra hacia adelante admin, esto también va a usar el controlador de usuario luego vamos a crear todas las órdenes dentro del controlador de usuario. Por lo que le das a este archivo un guardado. Vamos a dirigirnos al usuario controller.js. Por lo que esta sección de todos los pedidos va a ser muy similar a la sección de mi cuenta que creamos en el último video. Por lo que podemos copiar esta sección completa desde antes y luego pegar justo debajo. Tenemos que cambiar mis cuentas para que sean todos pedidos. Entonces la principal diferencia entre esta y la sección de mi cuenta es que no necesitamos tanto esta etapa desde el ducto de agregación. Esto se debe a que no necesitamos demasiado a un usuario en particular, simplemente podemos buscar todos los pedidos dentro de nuestra base de datos. Por lo que podemos quitar esta etapa de partido de nuestro pedido, también necesitamos que la plantilla se cambie a una plantilla llamada órdenes, y vamos a crear esto pronto y el título de todos los pedidos. Estos son todos los cambios que necesitamos hacer. Por lo que ahora podemos crear la plantilla de pedidos dentro de nuestras vistas, necesitamos crear órdenes dot pug. Por lo que para empezar, podemos extender los diseños, bloquear contenidos, pasar en el título como encabezamiento de nivel 3, una línea horizontal. Por lo que bajo esta línea horizontal, queremos mostrar los pedidos. Recuerda del último video, ya agregamos el código para mostrar los pedidos dentro de este archivo de cuenta de usuario.pug. Entonces si abrimos las cuentas de usuario, todo esto es el mismo código que tenemos aquí para mostrar el orden. Entonces, en lugar de escribir todo esto otra vez, tendría sentido agregar esto a un mixin. Vamos a copiar, o de hecho vamos a cortar sólo la información del ítem de la lista, el número de invitados, hasta esta reserva si está en la parte superior. Cortamos esto a la barra lateral, dentro de los mixins podemos crear un nuevo archivo, y éste se llama underscore orders.pug. Este mixin se crea igual que siempre hacemos con el nombre en la parte superior, así que mixin orden. De hecho vamos a llamar a esto órdenes, que va a tomar en el orden individual. Después sangrada en un nivel, podemos pegar en la reserva desde antes. Asegúrate de que todo esto esté sangrado correctamente, lo contrario obtenemos algunos errores. Ahora solo necesitamos agregar este mixin a nuestros dos archivos, empezando por la cuenta de usuario. Simplemente recortamos esto de antes. En la parte superior podemos incluir son mixin, que está en la carpeta mixins, luego subrayar órdenes. Después desplázate hacia abajo ya podemos agregar nuestro mixin. Queremos que esto aparezca en la pantalla por lo que acabamos de llenar nuestro bucle, podemos sumar en pedidos. Voy a pasar en el orden individual desde nuestro bucle, guardar este archivo y luego podemos hacer lo mismo para el archivo order.pug. Entonces seleccionamos esto, en la parte superior podemos incluir nuestro mixin, por lo que mixins forward slash _orders, luego bajo la línea horizontal podemos crear nuestro bucle, igual que hicimos en las cuentas de usuario. Cada orden en órdenes, entonces podemos agregar nuestros pedidos mixin, que toma en el orden individual de nuestro bucle. Dale a este archivo un guardado, de vuelta al administrador. Ahora podemos hacer clic en ver las reservas hacia abajo en la parte inferior, lo que nos lleva al administrador relativo órdenes de barra inclinada hacia adelante, desplácese hacia abajo, y ahora podemos ver dos órdenes diferentes de dos usuarios diferentes. Además de estar conectado como administrador y poder ver todos los pedidos, también tenemos nuestra propia sección de cuentas únicas en la parte superior. Hagamos clic en esto también, y ahora si nos desplazamos hacia abajo, deberíamos ver sólo nuestros propios honores, pero tenemos un 404 de no encontrado. Podemos ver que hay un tema en la parte superior. Podemos vincularlo para reenviar barra inclinada admin hacia adelante slash mis cuentas, y no queremos que esta sección de administración dentro de aquí. Sólo tenemos que ir a mi cuenta. Pasemos al diseño del pug, solo necesitamos una barra delantera antes de mis cuentas. Debería intentarlo una vez más, dando click en mis reservas, ahora solo tenemos la reserva única para la cuenta de Chris, y de nuevo si vamos a Admin, baja a Ver Reservas. Porque somos admin también podemos ver las órdenes de otras personas. par de esto, esto también significa que nuestro mixin también está funcionando bien, ya que ahora estamos viendo esta información de pedidos en dos archivos separados. Esto es ahora por mostrar todos los pedidos dentro de la pantalla de administración. En el siguiente video volveremos a nuestro estilo añadiendo algo de CSS final. 63. CSS final: Ha pasado un poco desde que trabajamos con nuestro estilo. Entonces, tomémonos unos momentos para hacer algunos ajustes, particularmente a las características que hemos añadido en las últimas secciones. No voy a añadir una gran cantidad de CSS extra. Puedes ir aún más allá si quieres Ahora lo que es hacer unos pequeños cambios, empezando por los botones. Por lo que probablemente ya te diste cuenta si vamos a un hotel, y luego si hacemos una búsqueda de la fecha, número de invitados, una vez que hayamos pasado a la página de resultados, tenemos este botón justo aquí para continuar. También contamos con un botón para realizar el pedido. Entonces lo primero con lo que voy a empezar son estos botones aquí. Entonces pasemos al style.css. Entonces pasaremos a la carpeta pública, que cierran en estos hacia abajo. Por lo que la carpeta pública. Entonces necesitamos entrar en las hojas de estilo y luego en el style.css. Entonces dentro de este archivo y también fuera de la consulta de medios, podemos agregar nuestro estilo de botones, así que vamos a desplazarnos hacia abajo a nuestra consulta de medios, que está justo aquí. Podemos asegurarnos de que estemos fuera de esto. Entonces justo debajo de botón pequeño, voy a agregar la clase de botón, que está dentro de nuestro HTML. Podemos agregar un color de fondo. Yo quiero poner las mentes ser cadete azul, y un pequeño radio fronterizo, los cinco píxeles. También un poco de relleno de 0.5em. Guarda esto. Recargar. Ahora nuestro botón se ve mucho más bonito. Si ahora pasamos a la página de la cuenta haciendo clic en un enlace en la parte superior. Esta lista de reservas, que has añadido en los últimos videos, también necesita algo de trabajo. Esto estaba dentro del archivo mixins orders.pug más antiguo. Esto tiene un mixins llamado _orders. Entonces vayamos a los mixins y abramos este archivo. Este mixin estaba rodeado de un div con la clase de reservas, que ahora podemos usar en el CSS. Sparkle al style.css. Vamos de nuevo, agregue estos fuera de la consulta de medios así que apunte a las reservas ul. Voy a sumar algún margen de 2em, la parte superior e inferior, y cero a la izquierda y a la derecha. Los fondos, otra vez de cadete azul. También un pequeño valor de relleno de 10 píxeles. Entonces, vamos a guardar esto. Recargar la sección de mi cuenta. Entonces, a continuación, queremos apuntar a los elementos individuales de la lista y configurarlos para que sean a nivel de bloque, que estén apilados uno encima del otro. Entonces después de las reservas ul. Añadamos reservas li. Establezca el tipo de visualización para que sea bloque. El fondo, por lo que esto destaca del azul cadete. Voy a agregar un valor gris de eee y también algo de relleno de 0.5em. Veamos cómo se ve esto en el navegador. Agrega un s. Ahí vamos. Entonces no voy a adentrarme demasiado en este estilo ya que mucho se reduce a la preferencia personal. Pero lo último que voy a cambiar son los mensajes flash. Estos se encuentran en un lado del archivo layout.pug. Entonces, vayamos hacia allá y desplázate hacia abajo hasta nuestra sección de mensajes, que acaba de estar aquí. Vemos una clase de mensaje que se está aplicando al div, que sostendrá nuestro estilo general de mensajes. Entonces también una clase dinámica de subrayado del mensaje. Esto será información, éxito o error. Usando estos nombres de clase, podemos crear diferentes colores a cada tipo de mensaje. Por ejemplo, rojo para un error. También debajo de esto hay un lapso con la clase de botón de cierre. Esto también se puede utilizar para dar estilo a la cruz, lo que elimina el mensaje. Por lo que en el estilo. Entonces nosotros de nuevo, fuera de la consulta de medios, empecemos con el.message. Esto fue por nuestros estilos generales de mensajes. Por lo que algún margen de diez píxeles en la parte superior e inferior, cero en la izquierda y derecha un pequeño valor de relleno de 0.5em, un borde de un píxel, y una línea sólida, un radio de borde de cinco píxeles. También el tamaño de fuente para ser 1.2em. Guarda esto. Intentemos mirar hacia fuera. Entonces esto ahora se ve un poco mejor. Ahora vamos a apuntar la cruz a justo aquí y moverla hacia el lado derecho, además de cambiar el cursor para que sea un puntero. Vamos a pasar el rato. Por lo que debajo del mensaje, podemos apuntar al close_btn. Podemos flotar esto a la derecha. Por lo que ahora también podemos apuntar al botón de cierre. Pero esta vez el hover afirma. Todo lo que quiero hacer aquí es cambiar el cursor para que sea un puntero. Por lo que los siguientes tres estilos que vamos a agregar todos van a estar relacionados con el tipo de mensaje. Por lo que recuerda desde antes dentro de los diseños, tenemos esta sección dinámica de mensaje_. Entonces [inaudible] _info, éxito y error. Por lo que podemos usar estos para dividir tres colores diferentes, seguir los mensajes flash. Entonces, empecemos con el message_info. El message_success. Entonces el último es message_error. Entonces todo lo que vamos a hacer aquí es agregar algunos colores. Entonces el primero, voy a agregar un valor RGB de 40, 92 y para el azul un valor de 177, para el éxito, el valor de 39, 87 y 39. Entonces para el mensaje de error, el color rojo va a ser un valor RGB de 233, 66 y 66. Añadamos un punto y coma al final de estas tres líneas. Guarda este archivo y, a continuación, vuelve a cargar el navegador. Entonces, en primer lugar, si tratamos de cerrar sesión, obtenemos un mensaje azul para información. Intentemos iniciar sesión. Entonces, en primer lugar, si hacemos una contraseña incorrecta al iniciar sesión, obtenemos el mensaje de error rojo. Entonces intentémoslo de nuevo con la contraseña correcta esta vez. Ahora obtenemos el color verde para el éxito. Excelente. Esto ahora está funcionando bien. Lo voy a dejar aquí para el estilo CSS. Pero por supuesto, sigue adelante y cambia las cosas para que se adapten a tus necesidades. 64. Preparación para la producción: Bienvenido de nuevo. Esta va a ser una sección bastante emocionante ya que vemos que todo nuestro arduo trabajo finalmente dando sus frutos. Por fin vamos a empujar nuestro proyecto a un servidor web en vivo para que el resto del mundo lo vea. En primer lugar, algunas medidas que voy a tomar para que nuestra app esté lista. En primer lugar, voy a habilitar la compresión. Esto agregará compresión gzip, cómo tratamos los archivos, comprimimos en nuestro equipo. Lo cual puede disminuir el tamaño del cuerpo de respuesta, lo que acelera el rendimiento de nuestra app. Se trata de un paquete npm, simplemente llamado compresión, que podemos instalar a través de la línea de comandos como de costumbre. Apagado a la compresión npm i del proyecto y luego presione ENTRAR. Está tirando de este paquete desde npm. Una vez hecho esto, podemos entonces requerir este final sobre en el app.js justo en la parte superior, al igual que lo hacemos normalmente, por lo que el app.js. Cerremos algunos de estos nuestros nuevos sellos. No, no, el app.js justo por la parte superior, voy a crear una constante llamada compresión y requerir este archivo. Entonces necesitamos agregar esta compresión como middleware con app.use. Desplázate hacia abajo y vamos a cerrar esto después de nuestra aplicación. Digamos “Comprimir respuestas” con nuestra app.use análisis en compresión. Esto es todo lo que necesitamos hacer para configurar la compresión para nuestras respuestas. Debo decir que se nota en nuestros encabezados de respuesta más adelante. A continuación se presenta un módulo npm de seguridad, que se llama casco. Este módulo no protegerá nuestra aplicación de todos los riesgos de seguridad que hay por ahí, pero habilitarla es un paso en la dirección correcta y puede causar muchas precauciones comunes que debemos tomar. Este módulo funciona como middleware y establece varios encabezados HTTP, los cuales veremos en tan solo un momento. Instalemos primero este módulo con npm i y el nombre del paquete de cascos. Una vez instalado esto, podemos luego pasar a nuestro app.js y luego requerir de nuevo este módulo en la parte superior, justo debajo de nuestra compresión, por lo que const casco, requieren el módulo de cascos. Esto debería establecerse entonces lo antes posible en la cadena de middleware , de nuevo, usando app.use. Justo después de configurar nuestra aplicación Express, así que desplácese hacia abajo hasta var app es igual a Express. Podemos tener esto justo aquí, así que app.use análisis en casco y luego un punto y coma al final. Justo antes de que lleguemos a trabajar con esto sin embargo, voy a comentar esta línea de salida, que podamos ver cómo se ven nuestros encabezados antes de usar cascos. Mantén esto comentado y luego pasa a las herramientas de desarrollador. Cuando se inicia el servidor con npm ejecute DevStart. Para ver nuestros encabezados HTTP, podemos ir a las herramientas de desarrollador dentro de un Chrome, así que haga clic derecho e inspeccione. Entonces si vamos a la pestaña Red, vamos a cerrar esto, recargar, hacer clic en el host local, y luego cuando haga clic en la pestaña de encabezados, que está justo aquí. Yo quiero sacar esto para que sea más visible en la pantalla. El dato que nos interesa son estos encabezados de respuesta. Esta información conocida como un encabezado, es información analizada con la solicitud y la respuesta, y pongamos esto de lado para que sea fácil de ver. Ahí vamos. Genial. Ahí están nuestros encabezados de respuesta, que podemos ver justo aquí y justo como comparación, voy a tomar unas capturas de pantalla rápidas de esto. Haré uso de esto en tan solo un momento. Contiene cosas como nuestro Content-Type de texto/html, está configurado para tener un conjunto de caracteres de utf-8, que es el estándar. El tipo de codificación de gzip, que se estableció de bios antes cuando clavamos una compresión. Una de las cosas que tenemos que abordar aquí es la etiqueta X-Powered-By, que está por abajo y esta está configurada para ser Express. Casco ocultará esta información junto con otros para que los hackers no puedan explotar ninguna vulnerabilidad conocida dentro del marco en el que utilizamos. No va a ocultar por completo el hecho de que estamos usando Express, hay otras formas de comprobarlo pero este es un paso en la dirección correcta. Ahora si volvemos al proyecto y descomentamos, esta pieza de middleware, guarda el archivo. Ahora si recargamos el navegador, pinchamos en el host local y luego volvemos a nuestros encabezados de respuesta, vemos que ahora tenemos más información de encabezado. Vamos a tirar hacia arriba las capturas de pantalla de antes, haga doble clic en esto. El primero que hay que notar en este nuevo encabezado de respuesta es que ya no tenemos esta sección Powered-By Express abajo en la parte inferior, esto ha sido eliminado por cascos. También hay alguna información extra ahora agregada. No voy a adentrarme demasiado en todo aquí, pero te daré alguna información general sobre lo que está pasando. Podemos ver que tenemos las opciones Content-Type configuradas para ser “nosniff”. Esto evita que el navegador intente detectar o adivinar el tipo de nombre. Este es el tipo de archivo con el que estamos tratando, como un archivo PNG o JavaScript. Esto impide que el navegador intente automáticamente detectar el Content-Type y básicamente equivocarse, por lo tanto, ejecutar algún código que no debería. También tenemos el DNS-Prefetch-Control configurado para estar apagado. Se trata más de una característica de rendimiento que de seguridad. Cuando visitamos una URL en un navegador, el nombre de la URL, como Google.com, es básicamente un alias para una dirección IP numérica. DNS es un servidor que contiene una base de datos de estas URL y también las direcciones IP para luego marcarlas hacia arriba. Esta URL como Google.com, es mucho más fácil de recordar para los humanos que la dirección IP numérica real. Esta característica le dice al navegador que no realice una solicitud DNS demasiado pronto antes de que el usuario haga clic en un enlace o cargue recurso. También tenemos las Downloads Options para ser noopen. Esto protege contra una antigua vulnerabilidad de internet explorer, que permite al navegador ejecutar descargas dentro del contexto de su sitio. Al establecer esto se detendrá que Internet Explorer permitiendo que se ejecuten descargas html maliciosas en un entorno inseguro. Tenemos la opción Frame-Option configurada para ser SAMEORIGIN. Este controlará si tus sitios se pueden cargar en un iframe o no. Debe estar desactivada a menos que tenga una buena necesidad para ello. Después tenemos XSS Protection y XSS es sinónimo de scripting entre sitios, y es una forma para que los atacantes tengan acceso a nuestros sitios web. Hacen esto encontrando formas de ejecutar código JavaScript dentro de esos sitios. Esta es una de las cosas contra las que estamos tratando de proteger al desinfectar las entradas del usuario en todas las formas y cascos también tiene esta opción para ayudar con alguna seguridad básica. Como te puedes imaginar, ahora la seguridad es un tema profundo y echa un vistazo a los docs del casco para obtener más información, si quieres saber un poco más. Pero por ahora sepan que esto es alguna protección básica ahora en su lugar. En el siguiente video finalmente subiremos nuestra app a producción usando Heroku. 65. Envío de nuestra aplicación express a Heroku: Ahora te voy a mostrar cómo empujar tu aplicación express terminada a una plataforma llamada Heroku. Heroku es una plataforma basada en la nube que nos permite desplegar fácilmente nuestras aplicaciones a la producción. Funciona con Ruby on Rails, PHP, Python, Node, y [inaudible]. También hay un nivel gratuito. Por lo que podemos aprender a usarlo sin ningún costo y solo necesitamos pagar si nuestro proyecto crece. Habitaciones de Heroku en aplicaciones llamadas dynodes, que básicamente son contenedores totalmente gestionados. Para empujar a Heroku, primero necesitamos instalar un software de control de versiones llamado git. Esto está disponible en gitscm.com. Por lo que da clic en este enlace aquí. Entonces lo llevamos a la página de inicio de git. Entonces pasemos a la sección de descargas en la parte inferior. Haga clic en esto, y luego haga clic en la descarga de su sistema operativo. Por lo que voy a dar clic en la versión de Mac justo ahí, y activarla descargando. Ya tengo git instalado en mi máquina. Entonces si no quieres seguir adelante y seguir las instrucciones de instalación para instalar para tu sistema operativo en particular. Si no estás familiarizado con git, es un sistema de control de versiones de código abierto, que nos permite trabajar en proyectos o software para luego empujar nuestros cambios en diversas etapas. Esto nos permite no sólo hacer un seguimiento de cualquier cambio, sino también volver a versiones anteriores, si nos estropeamos. Git está instalado en nuestra máquina, y también podemos empujar nuestro código a servicios alojados como GitHub, o en nuestro caso podemos usarlo para empujar a Heroku. Entonces una vez que estés listo, necesitamos ir a la terminal o puedes usar el terminal incorporado en código de estudio visual. Por lo que dentro del aquí en la parte inferior, podemos comprobar que git está instalado correctamente, mediante el uso de los comandos de la versión git dash dash. Si ves un número de versión devuelto a nosotros, esto significa que git se ha instalado con éxito. Las puertas de Git son proyecto en lo que se llama un repositorio, que se puede pensar como un cubos de almacenamiento. Podemos inicializar un repositorio vacío en nuestros proyectos con el comando git in it. Ya tengo el repositorio ya configurado. Por lo que esta reinicialización es el repositorio git. Es posible que recibas un mensaje ligeramente diferente, pero mientras tu repositorio haya sido creado, ahora estamos bien para seguir adelante. Podemos entonces comprobar el estado de qué archivos nuestros proyectos están siendo empujados a git y cuáles no, mediante el uso del comando denominado git status. Así que golpea enter y ahora ve una lista de archivos y carpetas rojas de nuestros proyectos. El ilustre rojo porque se les clasifica como desrastreados. Tenemos que declarar qué archivos queremos agregar a git, y cuáles no. Antes de ir más lejos sin embargo, hay algo que normalmente queremos hacer primero. Esto es para crear un nuevo archivo en nuestro proyecto llamado git ignore. Esto porque tenemos todos estos archivos y carpetas, pero no siempre queremos que todos se compartan en git. No queremos compartir el archivo.env porque esto tiene información sensible. También se puede ignorar la carpeta de módulos de nodo, ya que se trata de una carpeta enorme la cual ocupará mucho espacio. Entonces toda la barra de diseño, en la raíz de nuestros proyectos, lo que es cerrar todo esto hacia abajo. Crear un nuevo archivo llamado.gitignore. Por lo que para ignorar estos archivos, entonces podemos enumerarlos dentro de aquí. Por lo que comenzando con la carpeta de módulos de nodo. Entonces sólo agréguelos por nombre. Por lo que la carpeta de módulos de nodo, también podemos ignorar el archivo.env, y luego finalmente al final, el DS-store. El DS-Store es un archivo que a menudo se agrega automáticamente cuando se utiliza un Mac. Por lo que queremos reconocerlo también ya que no será necesario para todos los proyectos. Este archivo git ignore se vuelve aún más importante si empujamos este código a algún lugar como GitHub. Si olvidamos agregar esto, nuestra información sensible podría estar en línea para que cualquier otra persona la vea. También no se necesitan los módulos de nodo, porque siempre podemos ejecutar el comando de instalación de NPM, para instalarlos todos desde la lista en el archivo package.json. También dentro de este archivo package.json, voy a agregar configuración [inaudible], y esto es para declarar qué versión de nodos vamos a estar usando. Entonces si vamos a bajar a la terminal y teclear en nodo dash-v, estoy en chromium version10.3.0 Así que podemos establecer esto en el paquete.json. Así que abre esto hacia arriba, y luego hacia abajo en la parte inferior en las dependencias de dev, podemos configurar los motores. Este es un objeto donde establecemos la versión de nodos para que sea una cadena, que es nuestra versión actual. Entonces yo en 10.3.0, y por supuesto esta pasa a ser la versión actual que estás usando. Establecemos la versión Node dentro aquí. Por lo que la versión de producción de Node coincidirá con la misma versión que estamos utilizando durante el desarrollo. Esto podría evitar cualquier problema potencial al usar diferentes versiones en desarrollo y producción. Ahora si cerramos esto y nos vamos, de hecho déjame guardar primero esto, y luego volver a la terminal. Podemos volver a ejecutar git status, presionar enter, guardar el archivo git ignore, y luego ejecutar git status, presionar enter. Ahora vemos que ahora nos falta el archivo.env y también los módulos de nodo. Entonces ahora podemos seguir adelante y usar el git como comando, seguido del punto. Así git add dot hit enter. Esto le dice a git que agregue o ponga en escena todos los archivos que son rojos. También podemos usar git add seguido del nombre del archivo para agregar un archivo o carpeta a la vez, lugar de usar dot, que usaría para agregar todos los archivos. Si volvemos a ejecutar git status, pulsa enter, ahora los archivos y carpetas están configurados para ser verdes. Esto significa que ahora están listos para comprometerse con git. Para esto está el comando git commit. Entonces escribe git, commit m y luego dentro de las citas puedes agregar un mensaje, como commit inicial. Entonces agregamos este mensaje para describir qué cambios hemos hecho al usar una bandera dash m, luego un mensaje entre comillas justo después. Así que pulsa enter, y esto ahora debería comprometer todos nuestros archivos en nuestro repositorio vacío. Sobre el status git, hasta el hit inferior enter, ahora mostrará que ahora no es nada que comprometer. Nuestro trabajo en bandeja está limpio y se mantendrá así hasta que modifiquemos alguno de los archivos. Entonces, por ejemplo, en el style.css, si agregamos algo como padding:1px, guarde esto y [inaudible] status git. Pero ahora vea la versión modificada del style.css. Pero no voy a empujar a git, ya que esto se va a eliminar. Entonces este es ahora nuestro trabajo completado con git. Por lo que ahora necesitamos pasar a Heroku. Lo primero que tenemos que hacer es dirigirnos a Heroku.com y crear una cuenta gratuita. Entonces, vamos a ir a registrarnos. Por lo que agrega nuestros detalles aquí dentro. Fuera de un rol, ve por un desarrollador, agrega el país, selecciona nuestro idioma primario. Yo quiero ir de nodo, sin robots, crear una cuenta gratuita y luego necesitas entrar en tus correos electrónicos y confirmar las cuentas. Adelante y haz eso y regresa en unos momentos. Está bien. Bienvenido de nuevo. Una vez que hayas confirmado tu nueva cuenta y configurado la contraseña, tenemos que continuar, que luego nos lleva al área de salpicadero de Rocchio. Dentro del área del tablero, podemos crear un nuevo proyecto con este ícono en la parte superior. Da click en Nuevo, crea nueva app. Después integramos un nombre de aplicación. Vamos a viajar, que no está disponible porque lo he acostumbrado a antes, así que vamos por Vamos a viajar a, que está disponible. Seleccione el país o la región y, a continuación, cree una aplicación. Después tomamos en nuestra aplicación y podemos ver que tenemos esta sección de métodos de despliegue justo aquí. Voy a usar el método git de Heroku, que se ve aquí, que utiliza la CLI de Heroku. Utilizando este método, necesitamos instalar esta CLI. Da click en el enlace justo aquí y lo abriremos en una nueva pestaña. Descarga e instala, y luego instala para tu sistema operativo en particular. Una vez terminado, puedes hacer click en esto y luego pasar por el instalador. Bien. Una vez hecho esto, ahora podemos volver a la terminal y ahora tendremos acceso a los comandos de Heroku. Abajo en la terminal podemos agregar inicio de sesión Heroku para luego iniciar sesión en nuestras cuentas. Deseo cambiar el correo electrónico al que acabo de registrar. Pulsa Enter y luego agrega la contraseña, vincula a nuestras cuentas. Genial. Ahora estamos registrados como nuestro uso de correo electrónico justo aquí. Voy a teclear, Clear, para darnos más espacio. De vuelta al panel de control del proyecto, ahora necesitamos copiar esta línea de código justo aquí, que es Heroku Gits. Esto también está vinculado a nuestro proyecto Let's Travel, así que copia esto y pegarlo en la terminal y luego pulsa “Enter”. Por lo que esto configurará nuestra aplicación Heroku como una versión remota de Gits. Una sucursal remota es una versión de nuestro proyecto que vive en otro lugar, en Heroku o GitHub. Esta es nuestra versión remota ahora puesta y ahora la etapa final es seguir adelante y empujar de Gits a Heroku. Hacemos esto con Gits empujan Heroku. Git push, Heroku y luego Master, golpea Enter. El ramo maestro es la rama principal o predeterminada de Gits. Danos unos momentos para empujar a Heroku. Una vez hecho esto podemos copiar el enlace que veremos dentro de la terminal, o bien podemos acceder a un comando llamado Heroku Open. Construyamos nuestro proyecto y empujemos al Heroku. Bien. Eso ya está todo hecho, así que podemos o copiar el enlace que vemos aquí, o podemos teclear Heroku y luego abrir, pulsar Enter. Ahora debería abrirse dentro de nuestro navegador en el enlace que hemos visto antes. Parece que vemos un error dentro del navegador. Esto se debe a que en nuestro proyecto configuramos variables de entorno, pero hemos ignorado el archivo.ENV, que las contiene. Ahora tenemos que añadir estas variables de nuevo a Heroku, vuelta al tablero y hasta la parte superior. Tenemos una opción de configuración justo aquí y luego dentro aquí tenemos una sección llamada Variables de Config. Demos click en revelar las variables y vemos que todavía no tenemos ninguna de estas configuraciones. Ahora podemos copiar las variables de nuestro.envFile. Abramos el. Carpeta ENV. El primero es DB. Vamos a copiar esto. Podemos agregar nuestra clave como DB, y luego copiar nuestro valor MongoDB. Pega esto en como el valor y luego agrega. Simplemente haz lo mismo para nuestra nube, y cambia el nombre del valor, la clave API, coloca esto en. A continuación tenemos los secretos de la API. Este dentro, y luego sólo necesitamos quitar eso y sólo tener la llave. Los secretos y luego agregan esto. Por último los secretos de la sesión de viajes. Agrega esto en, ahí vamos. Además de estas variables de entorno, hay una más que voy a añadir. Abajo en la parte inferior, va a ser nodo_ ENV. Esto se va a poner a producción, así que agrega esto. Esto cambiará los entornos de nodos predeterminados del desarrollo a la producción. Esto cambiará algunos de los ajustes de la aplicación, como eliminar algunos mensajes de error, que no queremos que el usuario vea. Ahora cobrará nuestras plantillas CSS y revisará para el rendimiento. Ahora ignorará las dependencias dev del archivo package.json. Ya no se necesitan estos en producción. Ahora si volvemos a la pestaña del navegador, haz clic en esto y luego vuelve a cargar el navegador. Ahora vemos que el proyecto está funcionando de nuevo. Este es ahora un enlace en vivo que ahora puedes tomar y mostrar a tus amigos y familiares. También si tienes tu propio dominio personalizado, puedes usar esto para leer Heroku y puedes saber cómo hacerlo en la documentación. Juega con esto y todo debe seguir funcionando de forma normal. Todavía deberíamos poder iniciar sesión. Vamos a darle una oportunidad a esto. Ya estamos logueados, podemos ir a nuestras cuentas. Ahí están nuestras reservas, todas las imágenes siguen funcionando desde la nube unaria, lo cual es bueno. Por supuesto que todo sigue siendo sacado de Mongo porque hemos agregado la variable de entorno de mLab. Recuerda aunque la versión de mLab que hemos estado usando para las pruebas no está diseñada para la producción, pero esto está bien solo con fines de aprendizaje. Por ahora poco enhorabuena por empujar su Aplicación Express a la producción. Pero por ahora sin embargo, una enorme felicitación por llegar hasta aquí, y también ahora empujar tu Aplicación Express a un servidor web en vivo. 66. Gracias: Enhorabuena por llegar al final de este curso. Espero que ahora estés mucho más cómodo construyendo aplicaciones web de pila completa utilizando tecnologías como Node, Express, MongoDB, Hotspot, y mucho más. Empezamos desde el principio mirando cómo funcionan Node y Express, junto a la construcción de la aplicación Let's travel. Construimos plantillas de página, usamos enrutamiento para cambiar entre páginas, y aprendimos cómo encajan todas las partes de una aplicación Node y Express. Después pasamos a cómo podríamos integrar bases de datos en todos los proyectos, incluyendo modelar nuestros datos, utilizando diversos métodos para obtener los datos correctos cuando fuera necesario, un largo con lo esencial crear, leer, actualizar y eliminar acciones. Después de esto, reforzamos nuestros conocimientos creando más de los proyectos, incluyendo diferentes vistas, controladores, variables de entorno, cargas de archivos y almacenamiento en la nube, junto con algunas nuevas técnicas a partir de ES6 en adelante. Cubrimos el manejo de cuentas de usuario, incluyendo el registro e inicio de sesión, la validación de las entradas del usuario, trabajo con sesiones, mensajes flash, y también el renderizado condicional. Para redondear el proyecto, manejamos el área de cuentas de usuarios y también permitimos al usuario realizar reservas. Por último, empujamos nuestros proyectos a un servidor en vivo para que el resto del mundo los viera. Adiós por ahora y espero verte en otro curso en algún momento pronto. 67. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en share de habilidad. Sígueme para cualquier actualización para ser informado de cualquier nueva clase a medida que estén disponibles. Gracias una vez más, buena suerte. Ojalá te vuelva a ver en futuras clases.