1 00:00:01,150 --> 00:00:02,170 ‫Instructor: En esta 2 00:00:02,170 --> 00:00:05,883 ‫lección, vamos a empezar a crear realmente la página de descripción general del recorrido. 3 00:00:07,500 --> 00:00:09,170 ‫Y recuerde, que así es como 4 00:00:09,170 --> 00:00:11,900 ‫se ve la página de descripción general en este momento. 5 00:00:11,900 --> 00:00:13,790 ‫Entonces no tiene ningún contenido 6 00:00:13,790 --> 00:00:16,860 ‫real, y eso es lo que agregaremos en este video. 7 00:00:16,860 --> 00:00:19,740 ‫Entonces, estamos aquí en esta ruta raíz, y 8 00:00:19,740 --> 00:00:22,803 ‫nuevamente, ahí es donde estará la descripción general, ¿de acuerdo? 9 00:00:23,670 --> 00:00:25,210 ‫Entonces, en nuestra vista 10 00:00:25,210 --> 00:00:28,650 ‫del enrutador, es por supuesto esta ruta, ¿de acuerdo? 11 00:00:28,650 --> 00:00:30,650 ‫Entonces, el controlador que está 12 00:00:30,650 --> 00:00:34,697 ‫a cargo de renderizar esta página es el controlador getoverview, ¿de acuerdo? 13 00:00:34,697 --> 00:00:37,650 ‫Entonces, vayamos primero aquí y expongamos los pasos 14 00:00:37,650 --> 00:00:39,840 ‫que vamos a seguir para 15 00:00:39,840 --> 00:00:41,373 ‫renderizar esta página. 16 00:00:42,650 --> 00:00:44,950 ‫Entonces, lo primero que debemos hacer 17 00:00:44,950 --> 00:00:47,750 ‫es obtener todos los datos del recorrido de 18 00:00:47,750 --> 00:00:49,273 ‫nuestra colección, ¿verdad? 19 00:00:51,120 --> 00:00:52,170 ‫Así que obtenga los 20 00:00:54,740 --> 00:00:56,010 ‫datos del recorrido de la recopilación. 21 00:00:56,010 --> 00:00:58,310 ‫Luego, en segundo lugar, vamos a construir nuestra plantilla y 22 00:01:00,290 --> 00:01:01,420 ‫no vamos a hacer 23 00:01:01,420 --> 00:01:03,630 ‫eso aquí en esta función de controlador, por supuesto. 24 00:01:03,630 --> 00:01:05,333 ‫Pero sigamos escribiéndolo aquí. 25 00:01:06,800 --> 00:01:11,800 ‫Por lo tanto, cree una plantilla y, finalmente, renderice esa plantilla, 26 00:01:14,210 --> 00:01:18,360 ‫utilizando los datos del recorrido del paso uno. 27 00:01:18,360 --> 00:01:20,350 ‫Entonces, comenzando con el primer 28 00:01:20,350 --> 00:01:22,930 ‫paso aquí, obtenga los datos del recorrido de 29 00:01:22,930 --> 00:01:25,013 ‫la colección, eso significa que, por 30 00:01:25,013 --> 00:01:27,413 ‫supuesto, primero debemos importar el modelo del recorrido. 31 00:01:31,100 --> 00:01:34,030 ‫Entonces, eso es algo que ya hicimos 32 00:01:34,030 --> 00:01:35,513 ‫muchas veces antes. 33 00:01:36,490 --> 00:01:38,340 ‫Eso es en realidad un nivel más 34 00:01:38,340 --> 00:01:39,673 ‫arriba, y luego en modelos. 35 00:01:41,390 --> 00:01:42,593 ‫y modelo de gira. 36 00:01:45,300 --> 00:01:46,470 ‫Y luego también vamos 37 00:01:46,470 --> 00:01:48,163 ‫a necesitar o la función catchAsync, 38 00:01:51,240 --> 00:01:52,290 ‫porque entonces, por 39 00:01:52,290 --> 00:01:55,513 ‫supuesto, esta descripción general de obtener se convertirá en una función asincrónica. 40 00:02:04,190 --> 00:02:09,190 ‫Muy bien, marquemos este como asíncrono. 41 00:02:11,340 --> 00:02:14,120 ‫Ahora también necesitamos lo siguiente aquí para que 42 00:02:14,120 --> 00:02:16,123 ‫la función catchAsync realmente funcione. 43 00:02:22,690 --> 00:02:25,770 ‫Está bien, y espero que ahora empieces a ver el 44 00:02:25,770 --> 00:02:28,020 ‫valor de que hayamos creado todas las cosas 45 00:02:28,020 --> 00:02:29,850 ‫de la API y todos 46 00:02:29,850 --> 00:02:33,380 ‫los códigos que hemos hecho hasta este punto, de modo que todo 47 00:02:33,380 --> 00:02:37,680 ‫lo que tenemos que hacer ahora es realmente conectar todos estos piezas juntas, ¿de acuerdo? 48 00:02:37,680 --> 00:02:40,530 ‫Entonces, ya sabemos cómo hacer todas estas cosas. 49 00:02:40,530 --> 00:02:44,060 ‫Ya tenemos nuestro modelo de tour funcionando correctamente. 50 00:02:44,060 --> 00:02:46,033 ‫Entonces ahora todo esto es muy fácil. 51 00:02:47,460 --> 00:02:51,880 ‫Así que los recorridos constantes equivalen a esperar. 52 00:02:51,880 --> 00:02:54,620 ‫De nuevo, nada nuevo en este momento. 53 00:02:54,620 --> 00:02:58,423 ‫Y encontrar, básicamente, todos ellos, ¿de acuerdo? 54 00:02:59,310 --> 00:03:01,700 ‫Y ahora, ¿qué vamos a hacer realmente 55 00:03:01,700 --> 00:03:03,960 ‫con estos datos de recorridos? 56 00:03:03,960 --> 00:03:06,510 ‫Bueno, vamos a tener que pegar todos 57 00:03:06,510 --> 00:03:09,700 ‫estos datos del recorrido en la plantilla, para que podamos 58 00:03:09,700 --> 00:03:12,610 ‫usarlos y mostrarlos en el sitio web, ¿verdad? 59 00:03:12,610 --> 00:03:14,910 ‫Entonces, eso es realmente muy fácil de hacer. 60 00:03:14,910 --> 00:03:18,300 ‫Todo lo que tenemos que hacer es ponerlo aquí 61 00:03:18,300 --> 00:03:22,200 ‫en este objeto que se pegará en la plantilla de descripción 62 00:03:22,200 --> 00:03:24,770 ‫general en este caso, ¿de acuerdo? 63 00:03:24,770 --> 00:03:28,960 ‫Entonces, muy fácil, todo lo que tenemos que decir son recorridos. 64 00:03:28,960 --> 00:03:32,050 ‫Entonces, eso es lo mismo que tours es igual 65 00:03:32,050 --> 00:03:35,910 ‫a tours y nuevamente ya sabes que comenzar con ES 6 es 66 00:03:35,910 --> 00:03:37,460 ‫suficiente para hacerlo así. 67 00:03:40,100 --> 00:03:42,810 ‫Genial, así que siempre que haya una 68 00:03:42,810 --> 00:03:45,860 ‫solicitud para la página de descripción general, básicamente nuestra página 69 00:03:45,860 --> 00:03:49,290 ‫de inicio de nuestro sitio web renderizado dinámicamente, todos los datos 70 00:03:49,290 --> 00:03:52,070 ‫del recorrido se recuperarán de nuestra base de datos 71 00:03:52,070 --> 00:03:55,210 ‫aquí y luego esos datos se pegarán en nuestra plantilla. 72 00:03:55,210 --> 00:03:56,920 ‫Y ahora todo lo 73 00:03:56,920 --> 00:04:00,150 ‫que tenemos que hacer es crear esa plantilla, ¿verdad? 74 00:04:00,150 --> 00:04:03,560 ‫Pasemos a la descripción general. doguillo. 75 00:04:03,560 --> 00:04:08,270 ‫Aquí realmente podemos deshacernos de este marcador de posición h1 aquí. 76 00:04:08,270 --> 00:04:10,410 ‫Y ahora quiero echar un 77 00:04:10,410 --> 00:04:12,683 ‫vistazo al archivo html estático aquí nuevamente. 78 00:04:13,950 --> 00:04:18,320 ‫Entonces, eso está en la carpeta pública y luego en 79 00:04:18,320 --> 00:04:22,120 ‫la descripción general. html, ¿de acuerdo? 80 00:04:22,120 --> 00:04:24,370 ‫Entonces, ya construimos el encabezado en 81 00:04:24,370 --> 00:04:26,000 ‫una de las conferencias 82 00:04:26,000 --> 00:04:29,780 ‫anteriores y ahora es el momento de construir esa parte aquí. 83 00:04:29,780 --> 00:04:31,670 ‫Ahora, cuando creamos la plantilla por 84 00:04:31,670 --> 00:04:34,450 ‫primera vez, en realidad estaba mal en mi archivo html 85 00:04:34,450 --> 00:04:37,010 ‫y tenía una descripción general de la clase de 86 00:04:37,010 --> 00:04:38,950 ‫sección, pero en su archivo de inicio 87 00:04:38,950 --> 00:04:41,410 ‫debería haber tenido este main con la clase main. 88 00:04:41,410 --> 00:04:43,430 ‫Y creo que en su archivo 89 00:04:43,430 --> 00:04:46,240 ‫hay un pequeño texto que lo explica, ¿de acuerdo? 90 00:04:46,240 --> 00:04:49,050 ‫Pero, de todos modos, en realidad eliminamos esa parte 91 00:04:49,050 --> 00:04:50,720 ‫de nuestra plantilla base. 92 00:04:50,720 --> 00:04:52,480 ‫Entonces, recuerde que aquí, 93 00:04:52,480 --> 00:04:55,370 ‫en el contenido, en realidad no tenemos html. 94 00:04:55,370 --> 00:04:57,800 ‫Entonces, ese elemento principal que en el html 95 00:04:57,800 --> 00:05:00,510 ‫está ahora mismo, no se encuentra en ninguna parte. 96 00:05:00,510 --> 00:05:05,500 ‫Y ahora lo necesitamos en nuestra descripción general, ¿de acuerdo? 97 00:05:05,500 --> 00:05:09,790 ‫Entonces, creemos esta parte del html en la descripción general porque 98 00:05:09,790 --> 00:05:12,923 ‫después de eso tendremos todas estas tarjetas repetidas. 99 00:05:14,200 --> 00:05:15,770 ‫Entonces, echemos un vistazo a 100 00:05:15,770 --> 00:05:17,380 ‫eso también antes de copiar el código. 101 00:05:17,380 --> 00:05:19,450 ‫Entonces, ven que tenemos estas tarjetas aquí 102 00:05:19,450 --> 00:05:23,340 ‫y, básicamente, cada una de estas tarjetas, así que cada uno de 103 00:05:23,340 --> 00:05:24,990 ‫estos elementos aquí, es 104 00:05:24,990 --> 00:05:27,000 ‫lo que yo llamo una tarjeta. 105 00:05:27,000 --> 00:05:29,813 ‫Y, básicamente, vamos a tener nueve cartas. 106 00:05:30,650 --> 00:05:34,490 ‫Entonces, estas nueve tarjetas en esta página de descripción general. 107 00:05:34,490 --> 00:05:37,560 ‫Y son nueve tarjetas porque ahora mismo tenemos nueve 108 00:05:37,560 --> 00:05:39,080 ‫giras, pero por 109 00:05:39,080 --> 00:05:42,780 ‫supuesto, podrían ser menos o más de estas tarjetas, ¿verdad? 110 00:05:42,780 --> 00:05:45,540 ‫Pero de todos modos, lo que es importante tener 111 00:05:45,540 --> 00:05:48,150 ‫en cuenta aquí es que estas cartas se 112 00:05:48,150 --> 00:05:49,890 ‫repiten una y otra vez. 113 00:05:49,890 --> 00:05:52,263 ‫Entonces tenemos este enorme elemento de tarjeta aquí. 114 00:05:54,240 --> 00:05:56,340 ‫Y entonces está 115 00:05:56,340 --> 00:06:01,083 ‫el primero, y luego hay muchos elementos repetidos iguales después. 116 00:06:01,940 --> 00:06:02,820 ‫¿Okey? 117 00:06:02,820 --> 00:06:05,920 ‫Y así, en realidad seguí adelante y creé una plantilla de 118 00:06:05,920 --> 00:06:07,460 ‫pug solo para esta tarjeta, 119 00:06:07,460 --> 00:06:10,020 ‫de modo que no tengamos que escribirla manualmente ahora 120 00:06:10,020 --> 00:06:12,900 ‫y perder un montón de tiempo haciendo eso, ¿de acuerdo? 121 00:06:12,900 --> 00:06:15,660 ‫Eso haría que el curso fuera innecesariamente largo 122 00:06:15,660 --> 00:06:18,540 ‫y decidí crear esta plantilla de antemano para que 123 00:06:18,540 --> 00:06:20,010 ‫la usemos ahora. 124 00:06:20,010 --> 00:06:22,970 ‫Ahora, por supuesto, si quieres practicar un poco 125 00:06:22,970 --> 00:06:26,010 ‫más tus habilidades pug, entonces siéntete libre de pausar 126 00:06:26,010 --> 00:06:30,040 ‫el video en este punto y luego traducir todo este código a pug. 127 00:06:30,040 --> 00:06:30,873 ‫¿Está bien? 128 00:06:30,873 --> 00:06:33,410 ‫Y cuando termines, puedes regresar. 129 00:06:33,410 --> 00:06:36,400 ‫Pero ahora seguiré adelante y usaré esa plantilla. 130 00:06:36,400 --> 00:06:39,680 ‫Y eso está aquí en los datos de desarrollo y 131 00:06:39,680 --> 00:06:43,630 ‫luego en las plantillas y la plantilla de tarjetas de gira, ¿de acuerdo? 132 00:06:43,630 --> 00:06:46,404 ‫Y esa es la tarjeta completa 133 00:06:46,404 --> 00:06:50,333 ‫para una tarjeta, básicamente traducida al código pug, ¿de acuerdo? 134 00:06:51,210 --> 00:06:52,773 ‫Copiemos todo 135 00:06:54,090 --> 00:06:58,830 ‫eso, póngalo aquí en la descripción general, ¿de acuerdo? 136 00:06:58,830 --> 00:07:01,700 ‫Y luego, tengamos en cuenta que antes de eso, 137 00:07:01,700 --> 00:07:05,030 ‫también necesitamos este contenedor principal y este contenedor de tarjetas, así 138 00:07:05,030 --> 00:07:06,630 ‫que copiemos esto también. 139 00:07:10,440 --> 00:07:12,570 ‫Así que solo aquí 140 00:07:12,570 --> 00:07:15,840 ‫como referencia, para que ahora podamos escribir 141 00:07:16,720 --> 00:07:21,567 ‫main main y allí tenemos un dev llamado contenedor de tarjetas. 142 00:07:23,870 --> 00:07:24,703 ‫¿Okey? 143 00:07:24,703 --> 00:07:27,100 ‫Y luego, como dice el 144 00:07:27,100 --> 00:07:29,533 ‫nombre, ese contenedor contendrá la tarjeta. 145 00:07:30,610 --> 00:07:33,240 ‫Así que ahora apliquemos sangría a esto, porque ahora mismo 146 00:07:33,240 --> 00:07:35,720 ‫no está realmente dentro del contenedor de la tarjeta. 147 00:07:35,720 --> 00:07:38,490 ‫Así que ahora mismo estaría dentro de main, pero eso 148 00:07:38,490 --> 00:07:39,930 ‫no es lo que queremos. 149 00:07:39,930 --> 00:07:42,450 ‫Entonces, selecciono todo y presiono la pestaña. 150 00:07:42,450 --> 00:07:44,770 ‫Presiono el tabulador de nuevo, y ahora vemos que está 151 00:07:44,770 --> 00:07:45,950 ‫en el nivel correcto. 152 00:07:45,950 --> 00:07:47,693 ‫Está dentro del contenedor de la tarjeta. 153 00:07:49,310 --> 00:07:51,820 ‫Pero en realidad todavía no es 100% 154 00:07:51,820 --> 00:07:52,995 ‫correcto porque este 155 00:07:52,995 --> 00:07:56,540 ‫elemento también debería estar dentro del elemento de la tarjeta. 156 00:07:56,540 --> 00:07:58,780 ‫Y por alguna razón, copiar esta 157 00:07:58,780 --> 00:08:00,600 ‫plantilla de un archivo 158 00:08:00,600 --> 00:08:03,050 ‫a otro, estropeó un poco este código. 159 00:08:03,050 --> 00:08:07,270 ‫Y tenga cuidado con eso cuando pegue el código 160 00:08:07,270 --> 00:08:08,830 ‫de esta manera. 161 00:08:08,830 --> 00:08:11,490 ‫Entonces, en nuestra plantilla original, todo estaba correcto, como 162 00:08:11,490 --> 00:08:13,870 ‫puede ver, pero luego, cuando lo copiamos, se 163 00:08:13,870 --> 00:08:15,023 ‫estropeó un poco. 164 00:08:16,160 --> 00:08:17,760 ‫Entonces, cerremos eso. 165 00:08:17,760 --> 00:08:19,340 ‫De hecho, también podemos 166 00:08:19,340 --> 00:08:21,800 ‫cerrar esto, ya no lo necesitamos y, de 167 00:08:21,800 --> 00:08:25,030 ‫hecho, también la plantilla base y la plantilla de recorrido. 168 00:08:25,030 --> 00:08:27,580 ‫Así que ahora solo estamos trabajando con la descripción general. 169 00:08:27,580 --> 00:08:30,377 ‫Y ahora mismo tenemos esta tarjeta aquí. 170 00:08:30,377 --> 00:08:33,990 ‫Y ahora, como puede ver, también es una tarjeta completamente estática. 171 00:08:33,990 --> 00:08:35,593 ‫Entonces, todavía no usa 172 00:08:35,593 --> 00:08:38,750 ‫los datos que pegamos en la plantilla, ¿verdad? 173 00:08:38,750 --> 00:08:42,180 ‫Entonces tiene esta imagen estática, tiene todo este texto aquí 174 00:08:42,180 --> 00:08:44,660 ‫y no usa la variable en absoluto. 175 00:08:44,660 --> 00:08:46,960 ‫Está bien, porque esa parte, en 176 00:08:46,960 --> 00:08:48,660 ‫realidad quería hacerla contigo. 177 00:08:48,660 --> 00:08:51,440 ‫Porque de hecho esa es la parte más importante. 178 00:08:51,440 --> 00:08:53,730 ‫Entonces, crear toda esta plantilla 179 00:08:53,730 --> 00:08:56,370 ‫como esta no es difícil y lo 180 00:08:56,370 --> 00:09:00,140 ‫que realmente importa es cómo llenarla con datos, ¿de acuerdo? 181 00:09:00,140 --> 00:09:02,290 ‫Y eso es lo que haremos a continuación. 182 00:09:02,290 --> 00:09:03,760 ‫Pero por ahora, echemos 183 00:09:03,760 --> 00:09:06,409 ‫un vistazo a cómo se ve esto en este momento. 184 00:09:06,409 --> 00:09:09,370 ‫Entonces tenga en cuenta que solo deberíamos tener una tarjeta, 185 00:09:09,370 --> 00:09:11,070 ‫y no nueve, ¿de acuerdo? 186 00:09:11,070 --> 00:09:14,240 ‫Porque nuevamente, tenemos solo un elemento de tarjeta estático en 187 00:09:14,240 --> 00:09:15,083 ‫este punto. 188 00:09:16,760 --> 00:09:21,690 ‫Vuelva a cargar esto, y eso no se ve tan bien. 189 00:09:21,690 --> 00:09:24,833 ‫Entonces, intentemos averiguar qué está pasando aquí. 190 00:09:25,920 --> 00:09:28,083 ‫Así que tenemos nuestro elemento principal tal 191 00:09:29,020 --> 00:09:31,940 ‫como lo creamos, luego también tenemos nuestro contenedor de tarjetas. 192 00:09:31,940 --> 00:09:32,970 ‫Pero luego, por alguna 193 00:09:32,970 --> 00:09:34,723 ‫razón, hay un main allí de nuevo. 194 00:09:36,230 --> 00:09:40,180 ‫Umm ah está bien, por supuesto necesito eliminar este 195 00:09:40,180 --> 00:09:43,223 ‫elemento html original que tenemos allí. 196 00:09:44,150 --> 00:09:45,563 ‫Intentémoslo de nuevo. 197 00:09:46,920 --> 00:09:50,460 ‫Y ahora, ahora se ve mejor, ¿de acuerdo? 198 00:09:50,460 --> 00:09:52,020 ‫Ahora la imagen aquí 199 00:09:52,020 --> 00:09:54,340 ‫todavía falta, pero eso no importa por ahora. 200 00:09:54,340 --> 00:09:55,930 ‫Lo importante es 201 00:09:55,930 --> 00:09:59,570 ‫que tenemos esta bonita tarjeta aquí, ¿de acuerdo? 202 00:09:59,570 --> 00:10:01,360 ‫Ahora bien, la cosa es que 203 00:10:01,360 --> 00:10:04,940 ‫por supuesto queremos tener una tarjeta para cada uno de los tours, ¿no? 204 00:10:04,940 --> 00:10:07,220 ‫Básicamente, lo que queremos hacer 205 00:10:07,220 --> 00:10:10,343 ‫ahora es recorrer la matriz de recorridos 206 00:10:10,343 --> 00:10:13,070 ‫que pegamos en la plantilla, ¿verdad? 207 00:10:13,070 --> 00:10:14,950 ‫Entonces, básicamente esta variable de tours. 208 00:10:14,950 --> 00:10:17,250 ‫Y tenga en cuenta que se 209 00:10:17,250 --> 00:10:20,400 ‫trata de una matriz porque contiene varios documentos de viaje. 210 00:10:20,400 --> 00:10:22,410 ‫Y ahora recorramos esta matriz y 211 00:10:22,410 --> 00:10:26,641 ‫creemos una tarjeta para cada uno de los documentos del recorrido, ¿de acuerdo? 212 00:10:26,641 --> 00:10:29,420 ‫Y afortunadamente, eso es muy fácil de 213 00:10:29,420 --> 00:10:33,860 ‫hacer en pug porque básicamente el pug viene con bucles incorporados, ¿de acuerdo? 214 00:10:33,860 --> 00:10:34,960 ‫Y ahora 215 00:10:36,130 --> 00:10:40,530 ‫podemos hacer cada gira en giras, ¿de acuerdo? 216 00:10:40,530 --> 00:10:43,970 ‫Entonces, tours aquí es la variable que pegamos y 217 00:10:43,970 --> 00:10:45,460 ‫luego, en cada 218 00:10:45,460 --> 00:10:47,830 ‫iteración, la variable actual se llamará tour. 219 00:10:47,830 --> 00:10:52,210 ‫Podríamos llamarlo x o x y z o lo que sea, 220 00:10:52,210 --> 00:10:55,790 ‫pero tiene sentido llamarlo simplemente tour, ¿de acuerdo? 221 00:10:55,790 --> 00:10:58,810 ‫Y así, en cada iteración, lo que entra 222 00:10:58,810 --> 00:11:01,800 ‫es lo que se imprimirá básicamente. 223 00:11:01,800 --> 00:11:05,363 ‫Por lo tanto, esto nuevamente debe sangrarse un nivel más. 224 00:11:06,450 --> 00:11:08,740 ‫Así que básicamente está dentro 225 00:11:08,740 --> 00:11:11,380 ‫de esta declaración de bucle aquí. 226 00:11:11,380 --> 00:11:14,753 ‫Genial, veamos cómo se ve ahora. 227 00:11:15,800 --> 00:11:19,380 ‫Y ahora deberíamos obtener nueve cartas idénticas. 228 00:11:19,380 --> 00:11:24,380 ‫Y de hecho, eso es exactamente lo que sucedió, ¿de acuerdo? 229 00:11:24,400 --> 00:11:25,730 ‫Ahora, por supuesto, 230 00:11:25,730 --> 00:11:28,870 ‫estos datos aquí todavía no se crean dinámicamente. 231 00:11:28,870 --> 00:11:30,760 ‫Y eso es exactamente lo que vamos a 232 00:11:30,760 --> 00:11:32,373 ‫arreglar en el siguiente video.