‫Instructor: En esta
‫lección, vamos a empezar a crear realmente la página de descripción general del recorrido.
‫Y recuerde, que así es como
‫se ve la página de descripción general en este momento.
‫Entonces no tiene ningún contenido
‫real, y eso es lo que agregaremos en este video.
‫Entonces, estamos aquí en esta ruta raíz, y
‫nuevamente, ahí es donde estará la descripción general, ¿de acuerdo?
‫Entonces, en nuestra vista
‫del enrutador, es por supuesto esta ruta, ¿de acuerdo?
‫Entonces, el controlador que está
‫a cargo de renderizar esta página es el controlador getoverview, ¿de acuerdo?
‫Entonces, vayamos primero aquí y expongamos los pasos
‫que vamos a seguir para
‫renderizar esta página.
‫Entonces, lo primero que debemos hacer
‫es obtener todos los datos del recorrido de
‫nuestra colección, ¿verdad?
‫Así que obtenga los
‫datos del recorrido de la recopilación.
‫Luego, en segundo lugar, vamos a construir nuestra plantilla y
‫no vamos a hacer
‫eso aquí en esta función de controlador, por supuesto.
‫Pero sigamos escribiéndolo aquí.
‫Por lo tanto, cree una plantilla y, finalmente, renderice esa plantilla,
‫utilizando los datos del recorrido del paso uno.
‫Entonces, comenzando con el primer
‫paso aquí, obtenga los datos del recorrido de
‫la colección, eso significa que, por
‫supuesto, primero debemos importar el modelo del recorrido.
‫Entonces, eso es algo que ya hicimos
‫muchas veces antes.
‫Eso es en realidad un nivel más
‫arriba, y luego en modelos.
‫y modelo de gira.
‫Y luego también vamos
‫a necesitar o la función catchAsync,
‫porque entonces, por
‫supuesto, esta descripción general de obtener se convertirá en una función asincrónica.
‫Muy bien, marquemos este como asíncrono.
‫Ahora también necesitamos lo siguiente aquí para que
‫la función catchAsync realmente funcione.
‫Está bien, y espero que ahora empieces a ver el
‫valor de que hayamos creado todas las cosas
‫de la API y todos
‫los códigos que hemos hecho hasta este punto, de modo que todo
‫lo que tenemos que hacer ahora es realmente conectar todos estos piezas juntas, ¿de acuerdo?
‫Entonces, ya sabemos cómo hacer todas estas cosas.
‫Ya tenemos nuestro modelo de tour funcionando correctamente.
‫Entonces ahora todo esto es muy fácil.
‫Así que los recorridos constantes equivalen a esperar.
‫De nuevo, nada nuevo en este momento.
‫Y encontrar, básicamente, todos ellos, ¿de acuerdo?
‫Y ahora, ¿qué vamos a hacer realmente
‫con estos datos de recorridos?
‫Bueno, vamos a tener que pegar todos
‫estos datos del recorrido en la plantilla, para que podamos
‫usarlos y mostrarlos en el sitio web, ¿verdad?
‫Entonces, eso es realmente muy fácil de hacer.
‫Todo lo que tenemos que hacer es ponerlo aquí
‫en este objeto que se pegará en la plantilla de descripción
‫general en este caso, ¿de acuerdo?
‫Entonces, muy fácil, todo lo que tenemos que decir son recorridos.
‫Entonces, eso es lo mismo que tours es igual
‫a tours y nuevamente ya sabes que comenzar con ES 6 es
‫suficiente para hacerlo así.
‫Genial, así que siempre que haya una
‫solicitud para la página de descripción general, básicamente nuestra página
‫de inicio de nuestro sitio web renderizado dinámicamente, todos los datos
‫del recorrido se recuperarán de nuestra base de datos
‫aquí y luego esos datos se pegarán en nuestra plantilla.
‫Y ahora todo lo
‫que tenemos que hacer es crear esa plantilla, ¿verdad?
‫Pasemos a la descripción general. doguillo.
‫Aquí realmente podemos deshacernos de este marcador de posición h1 aquí.
‫Y ahora quiero echar un
‫vistazo al archivo html estático aquí nuevamente.
‫Entonces, eso está en la carpeta pública y luego en
‫la descripción general. html, ¿de acuerdo?
‫Entonces, ya construimos el encabezado en
‫una de las conferencias
‫anteriores y ahora es el momento de construir esa parte aquí.
‫Ahora, cuando creamos la plantilla por
‫primera vez, en realidad estaba mal en mi archivo html
‫y tenía una descripción general de la clase de
‫sección, pero en su archivo de inicio
‫debería haber tenido este main con la clase main.
‫Y creo que en su archivo
‫hay un pequeño texto que lo explica, ¿de acuerdo?
‫Pero, de todos modos, en realidad eliminamos esa parte
‫de nuestra plantilla base.
‫Entonces, recuerde que aquí,
‫en el contenido, en realidad no tenemos html.
‫Entonces, ese elemento principal que en el html
‫está ahora mismo, no se encuentra en ninguna parte.
‫Y ahora lo necesitamos en nuestra descripción general, ¿de acuerdo?
‫Entonces, creemos esta parte del html en la descripción general porque
‫después de eso tendremos todas estas tarjetas repetidas.
‫Entonces, echemos un vistazo a
‫eso también antes de copiar el código.
‫Entonces, ven que tenemos estas tarjetas aquí
‫y, básicamente, cada una de estas tarjetas, así que cada uno de
‫estos elementos aquí, es
‫lo que yo llamo una tarjeta.
‫Y, básicamente, vamos a tener nueve cartas.
‫Entonces, estas nueve tarjetas en esta página de descripción general.
‫Y son nueve tarjetas porque ahora mismo tenemos nueve
‫giras, pero por
‫supuesto, podrían ser menos o más de estas tarjetas, ¿verdad?
‫Pero de todos modos, lo que es importante tener
‫en cuenta aquí es que estas cartas se
‫repiten una y otra vez.
‫Entonces tenemos este enorme elemento de tarjeta aquí.
‫Y entonces está
‫el primero, y luego hay muchos elementos repetidos iguales después.
‫¿Okey?
‫Y así, en realidad seguí adelante y creé una plantilla de
‫pug solo para esta tarjeta,
‫de modo que no tengamos que escribirla manualmente ahora
‫y perder un montón de tiempo haciendo eso, ¿de acuerdo?
‫Eso haría que el curso fuera innecesariamente largo
‫y decidí crear esta plantilla de antemano para que
‫la usemos ahora.
‫Ahora, por supuesto, si quieres practicar un poco
‫más tus habilidades pug, entonces siéntete libre de pausar
‫el video en este punto y luego traducir todo este código a pug.
‫¿Está bien?
‫Y cuando termines, puedes regresar.
‫Pero ahora seguiré adelante y usaré esa plantilla.
‫Y eso está aquí en los datos de desarrollo y
‫luego en las plantillas y la plantilla de tarjetas de gira, ¿de acuerdo?
‫Y esa es la tarjeta completa
‫para una tarjeta, básicamente traducida al código pug, ¿de acuerdo?
‫Copiemos todo
‫eso, póngalo aquí en la descripción general, ¿de acuerdo?
‫Y luego, tengamos en cuenta que antes de eso,
‫también necesitamos este contenedor principal y este contenedor de tarjetas, así
‫que copiemos esto también.
‫Así que solo aquí
‫como referencia, para que ahora podamos escribir
‫main main y allí tenemos un dev llamado contenedor de tarjetas.
‫¿Okey?
‫Y luego, como dice el
‫nombre, ese contenedor contendrá la tarjeta.
‫Así que ahora apliquemos sangría a esto, porque ahora mismo
‫no está realmente dentro del contenedor de la tarjeta.
‫Así que ahora mismo estaría dentro de main, pero eso
‫no es lo que queremos.
‫Entonces, selecciono todo y presiono la pestaña.
‫Presiono el tabulador de nuevo, y ahora vemos que está
‫en el nivel correcto.
‫Está dentro del contenedor de la tarjeta.
‫Pero en realidad todavía no es 100%
‫correcto porque este
‫elemento también debería estar dentro del elemento de la tarjeta.
‫Y por alguna razón, copiar esta
‫plantilla de un archivo
‫a otro, estropeó un poco este código.
‫Y tenga cuidado con eso cuando pegue el código
‫de esta manera.
‫Entonces, en nuestra plantilla original, todo estaba correcto, como
‫puede ver, pero luego, cuando lo copiamos, se
‫estropeó un poco.
‫Entonces, cerremos eso.
‫De hecho, también podemos
‫cerrar esto, ya no lo necesitamos y, de
‫hecho, también la plantilla base y la plantilla de recorrido.
‫Así que ahora solo estamos trabajando con la descripción general.
‫Y ahora mismo tenemos esta tarjeta aquí.
‫Y ahora, como puede ver, también es una tarjeta completamente estática.
‫Entonces, todavía no usa
‫los datos que pegamos en la plantilla, ¿verdad?
‫Entonces tiene esta imagen estática, tiene todo este texto aquí
‫y no usa la variable en absoluto.
‫Está bien, porque esa parte, en
‫realidad quería hacerla contigo.
‫Porque de hecho esa es la parte más importante.
‫Entonces, crear toda esta plantilla
‫como esta no es difícil y lo
‫que realmente importa es cómo llenarla con datos, ¿de acuerdo?
‫Y eso es lo que haremos a continuación.
‫Pero por ahora, echemos
‫un vistazo a cómo se ve esto en este momento.
‫Entonces tenga en cuenta que solo deberíamos tener una tarjeta,
‫y no nueve, ¿de acuerdo?
‫Porque nuevamente, tenemos solo un elemento de tarjeta estático en
‫este punto.
‫Vuelva a cargar esto, y eso no se ve tan bien.
‫Entonces, intentemos averiguar qué está pasando aquí.
‫Así que tenemos nuestro elemento principal tal
‫como lo creamos, luego también tenemos nuestro contenedor de tarjetas.
‫Pero luego, por alguna
‫razón, hay un main allí de nuevo.
‫Umm ah está bien, por supuesto necesito eliminar este
‫elemento html original que tenemos allí.
‫Intentémoslo de nuevo.
‫Y ahora, ahora se ve mejor, ¿de acuerdo?
‫Ahora la imagen aquí
‫todavía falta, pero eso no importa por ahora.
‫Lo importante es
‫que tenemos esta bonita tarjeta aquí, ¿de acuerdo?
‫Ahora bien, la cosa es que
‫por supuesto queremos tener una tarjeta para cada uno de los tours, ¿no?
‫Básicamente, lo que queremos hacer
‫ahora es recorrer la matriz de recorridos
‫que pegamos en la plantilla, ¿verdad?
‫Entonces, básicamente esta variable de tours.
‫Y tenga en cuenta que se
‫trata de una matriz porque contiene varios documentos de viaje.
‫Y ahora recorramos esta matriz y
‫creemos una tarjeta para cada uno de los documentos del recorrido, ¿de acuerdo?
‫Y afortunadamente, eso es muy fácil de
‫hacer en pug porque básicamente el pug viene con bucles incorporados, ¿de acuerdo?
‫Y ahora
‫podemos hacer cada gira en giras, ¿de acuerdo?
‫Entonces, tours aquí es la variable que pegamos y
‫luego, en cada
‫iteración, la variable actual se llamará tour.
‫Podríamos llamarlo x o x y z o lo que sea,
‫pero tiene sentido llamarlo simplemente tour, ¿de acuerdo?
‫Y así, en cada iteración, lo que entra
‫es lo que se imprimirá básicamente.
‫Por lo tanto, esto nuevamente debe sangrarse un nivel más.
‫Así que básicamente está dentro
‫de esta declaración de bucle aquí.
‫Genial, veamos cómo se ve ahora.
‫Y ahora deberíamos obtener nueve cartas idénticas.
‫Y de hecho, eso es exactamente lo que sucedió, ¿de acuerdo?
‫Ahora, por supuesto,
‫estos datos aquí todavía no se crean dinámicamente.
‫Y eso es exactamente lo que vamos a
‫arreglar en el siguiente video.