1 00:00:01,170 --> 00:00:04,190 ‫Comencemos configurando nuestro motor de plantillas en 2 00:00:04,190 --> 00:00:06,480 ‫Express, que luego nos permitirá 3 00:00:06,480 --> 00:00:09,830 ‫renderizar sitios web usando plantillas simples como 4 00:00:09,830 --> 00:00:11,333 ‫hablamos antes. 5 00:00:12,660 --> 00:00:14,520 ‫Entonces, como ya sabrá, 6 00:00:14,520 --> 00:00:16,850 ‫en esta parte del curso, es 7 00:00:16,850 --> 00:00:21,210 ‫el momento de enviar un sitio web renderizado final al cliente que 8 00:00:21,210 --> 00:00:23,200 ‫contiene, por supuesto, todos los 9 00:00:23,200 --> 00:00:25,590 ‫datos con los que hemos estado 10 00:00:25,590 --> 00:00:28,770 ‫trabajando hasta este punto, como recorridos, usuarios y reseñas. 11 00:00:28,770 --> 00:00:32,970 ‫Ahora bien, ¿cómo construimos o renderizamos estos sitios web? 12 00:00:32,970 --> 00:00:35,920 ‫Bueno, usamos lo que se llama un motor 13 00:00:35,920 --> 00:00:38,060 ‫de plantillas que nos permitirá 14 00:00:38,060 --> 00:00:41,610 ‫crear una plantilla y luego llenarla fácilmente con nuestros datos. 15 00:00:41,610 --> 00:00:43,580 ‫Y el motor de plantillas 16 00:00:43,580 --> 00:00:46,210 ‫que usaremos en este curso se llama pug. 17 00:00:46,210 --> 00:00:48,700 ‫Hay un par de otros motores 18 00:00:48,700 --> 00:00:52,800 ‫de plantillas como manubrios o EGS para las personas a las que 19 00:00:52,800 --> 00:00:56,010 ‫no les gusta el pug, porque sé que hay algunas 20 00:00:56,010 --> 00:00:59,160 ‫opiniones sólidas sobre el pug, pero aún diría que 21 00:00:59,160 --> 00:01:03,190 ‫pug es en realidad el motor de plantillas más utilizado con Express. 22 00:01:03,190 --> 00:01:05,650 ‫Así que ahora, en este video, configuremos 23 00:01:05,650 --> 00:01:08,453 ‫pug y rendericemos nuestra primera página web usándolo. 24 00:01:09,310 --> 00:01:11,920 ‫El primer paso es decirle a 25 00:01:11,920 --> 00:01:14,510 ‫Express qué motor de plantilla vamos 26 00:01:14,510 --> 00:01:16,970 ‫a usar, y lo hacemos 27 00:01:16,970 --> 00:01:18,920 ‫diciendo justo al 28 00:01:19,910 --> 00:01:24,050 ‫principio de la aplicación, app. , así que básicamente esto 29 00:01:24,050 --> 00:01:29,050 ‫es como una configuración para el motor de vista, y luego lo configuramos en pug. 30 00:01:32,600 --> 00:01:33,910 ‫Y eso es. 31 00:01:33,910 --> 00:01:35,850 ‫Entonces Express admite automáticamente 32 00:01:35,850 --> 00:01:38,320 ‫los motores más comunes listos para usar 33 00:01:38,320 --> 00:01:40,970 ‫y, por supuesto, pug es uno de ellos. 34 00:01:40,970 --> 00:01:43,470 ‫Así que en realidad ni siquiera necesitamos instalar pug, 35 00:01:43,470 --> 00:01:45,940 ‫y tampoco necesitamos requerirlo en ningún lado. 36 00:01:45,940 --> 00:01:47,660 ‫Todo esto sucede 37 00:01:47,660 --> 00:01:49,870 ‫entre bastidores internamente en Express. 38 00:01:49,870 --> 00:01:51,910 ‫Así que definimos nuestro motor 39 00:01:51,910 --> 00:01:54,450 ‫de vistas, ahora también necesitamos definir dónde se 40 00:01:54,450 --> 00:01:57,013 ‫encuentran estas vistas en nuestro sistema de archivos. 41 00:01:57,916 --> 00:02:02,230 ‫Entonces, nuestras plantillas de pug en realidad se llaman vistas en Express. 42 00:02:02,230 --> 00:02:04,960 ‫Esto se debe a que estas plantillas son, 43 00:02:04,960 --> 00:02:08,090 ‫de hecho, las vistas en la arquitectura del controlador de vista 44 00:02:08,090 --> 00:02:11,720 ‫del modelo que hemos estado usando en este curso hasta este momento. 45 00:02:11,720 --> 00:02:13,980 ‫Como saben, ya tenemos los controladores y 46 00:02:13,980 --> 00:02:15,273 ‫las carpetas de modelos. 47 00:02:16,180 --> 00:02:17,650 ‫De hecho, cerremos estos. 48 00:02:17,650 --> 00:02:20,703 ‫Y ahora es el momento de crear la carpeta de vistas. 49 00:02:25,210 --> 00:02:27,590 ‫Con eso tenemos los tres componentes 50 00:02:27,590 --> 00:02:29,583 ‫de la arquitectura MVC. 51 00:02:30,900 --> 00:02:32,860 ‫Para definir ahora en qué carpeta se encuentran 52 00:02:32,860 --> 00:02:35,070 ‫realmente nuestras vistas, todo lo que tenemos que 53 00:02:35,070 --> 00:02:38,943 ‫hacer de nuevo es decir app. set, y esta vez 54 00:02:40,660 --> 00:02:44,763 ‫es la configuración de vista, o en realidad vistas, y luego 55 00:02:46,310 --> 00:02:48,660 ‫aquí el nombre de la ruta. 56 00:02:48,660 --> 00:02:52,500 ‫Ahora aquí podríamos poner algo como 57 00:02:52,500 --> 00:02:57,380 ‫esto, entonces / views, pero eso no es ideal. 58 00:02:57,380 --> 00:03:00,040 ‫Como ya sabe, la ruta que proporcionamos aquí 59 00:03:00,040 --> 00:03:02,330 ‫siempre es relativa al directorio desde donde 60 00:03:02,330 --> 00:03:05,240 ‫iniciamos la aplicación Note, y esa suele ser la 61 00:03:05,240 --> 00:03:07,760 ‫carpeta raíz del proyecto, pero puede que 62 00:03:07,760 --> 00:03:09,180 ‫no lo sea. 63 00:03:09,180 --> 00:03:11,170 ‫Por lo tanto, no deberíamos usar el 64 00:03:11,170 --> 00:03:14,410 ‫punto aquí, sino que deberíamos usar la variable de nombre de directorio. 65 00:03:14,410 --> 00:03:17,550 ‫Así que hagamos eso, y junto con un 66 00:03:17,550 --> 00:03:22,150 ‫buen truco que podemos usar con Note, que es usar el módulo de ruta. 67 00:03:22,150 --> 00:03:26,340 ‫Path es un módulo de notas incorporado, por lo que es un módulo central, que 68 00:03:26,340 --> 00:03:29,593 ‫se utiliza para manipular los nombres de las rutas, básicamente. 69 00:03:32,130 --> 00:03:35,860 ‫Por lo tanto, requiere la ruta, por lo que, por supuesto, 70 00:03:35,860 --> 00:03:37,650 ‫no tenemos que instalar nada. 71 00:03:37,650 --> 00:03:40,143 ‫Es solo un módulo integrado nativo. 72 00:03:41,320 --> 00:03:44,333 ‫Lo que podemos hacer ahora es el camino. unirse, y 73 00:03:46,340 --> 00:03:51,340 ‫luego el nombre del directorio, y luego vistas. 74 00:03:52,930 --> 00:03:55,790 ‫Esto luego, básicamente detrás de escena, 75 00:03:55,790 --> 00:04:00,403 ‫creará una ruta que une el nombre / vistas del directorio. 76 00:04:01,640 --> 00:04:03,520 ‫Ahora bien, aquí puede parecer un poco 77 00:04:03,520 --> 00:04:06,620 ‫exagerado usar esta ruta. La función de unión 78 00:04:06,620 --> 00:04:08,880 ‫aquí, pero no siempre sabemos si una 79 00:04:08,880 --> 00:04:13,120 ‫ruta que recibimos de algún lugar ya tiene una barra oblicua o no. 80 00:04:13,120 --> 00:04:16,290 ‫Entonces verá que esta función aquí se usa todo el 81 00:04:16,290 --> 00:04:19,040 ‫tiempo para evitar este tipo de error. 82 00:04:19,040 --> 00:04:21,440 ‫Porque de esta manera ni siquiera necesitamos 83 00:04:21,440 --> 00:04:23,380 ‫pensar en barras o 84 00:04:23,380 --> 00:04:26,463 ‫no, porque Note creará automáticamente una ruta correcta. 85 00:04:28,140 --> 00:04:30,140 ‫En realidad, también deberíamos 86 00:04:30,140 --> 00:04:33,343 ‫usar esto aquí donde creamos este middleware. 87 00:04:34,290 --> 00:04:37,623 ‫Aquí deberíamos usar exactamente lo mismo aquí. 88 00:04:39,070 --> 00:04:40,533 ‫Así que dupliquemos esto. 89 00:04:43,540 --> 00:04:45,703 ‫Así que path une y public. 90 00:04:54,470 --> 00:04:57,510 ‫De hecho, pongamos este aquí en 91 00:04:57,510 --> 00:05:01,373 ‫la parte superior, porque pertenece junto con estos aquí. 92 00:05:02,330 --> 00:05:04,580 ‫Sigue siendo un middleware, pero como verá en 93 00:05:04,580 --> 00:05:07,020 ‫uno de los siguientes videos, esto funciona en estrecha 94 00:05:07,020 --> 00:05:09,053 ‫colaboración con un motor de vistas. 95 00:05:10,520 --> 00:05:14,050 ‫Pero esto de aquí ahora hemos configurado nuestro motor pug. 96 00:05:14,050 --> 00:05:17,400 ‫Ahora es el momento de crear nuestra primera plantilla. 97 00:05:17,400 --> 00:05:19,890 ‫Así que aquí creemos nuestro primer archivo 98 00:05:21,660 --> 00:05:24,970 ‫pug llamado base. pug, y como verá, 99 00:05:24,970 --> 00:05:29,453 ‫vs code en realidad tiene su propio icono agradable para este tipo de archivo. 100 00:05:30,919 --> 00:05:32,950 ‫Todo lo que realmente quiero hacer 101 00:05:32,950 --> 00:05:36,220 ‫aquí por ahora es crear un elemento h1, por lo que un 102 00:05:36,220 --> 00:05:38,660 ‫encabezado principal simplemente con el nombre de alguna 103 00:05:38,660 --> 00:05:41,720 ‫gira, y la forma en que funciona con pug es así. 104 00:05:41,720 --> 00:05:45,170 ‫Entonces h1, y luego el contenido del elemento. 105 00:05:45,170 --> 00:05:49,030 ‫Digamos The Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫¡Y eso es todo! 107 00:05:50,520 --> 00:05:54,730 ‫Eso luego se traducirá a esto 108 00:05:54,730 --> 00:05:59,730 ‫aquí, h1 The Park Camper, y luego cerrará eso. 109 00:06:04,730 --> 00:06:07,680 ‫Entonces, en html tendríamos que escribir esto, pero la 110 00:06:07,680 --> 00:06:10,250 ‫sintaxis pug hace que sea mucho más 111 00:06:10,250 --> 00:06:12,193 ‫fácil escribir html como este. 112 00:06:13,470 --> 00:06:14,670 ‫Por supuesto, también 113 00:06:14,670 --> 00:06:16,880 ‫nos permitirá poner todo tipo de variables aquí, 114 00:06:16,880 --> 00:06:19,780 ‫de modo que realmente podamos inyectar nuestros datos en estas 115 00:06:19,780 --> 00:06:21,650 ‫plantillas, pero por ahora estoy realmente 116 00:06:21,650 --> 00:06:23,853 ‫interesado en publicar algo en el navegador. 117 00:06:25,240 --> 00:06:27,570 ‫Mucho más sobre cómo funciona realmente el pug 118 00:06:27,570 --> 00:06:29,220 ‫en las próximas conferencias. 119 00:06:30,870 --> 00:06:33,400 ‫Por ahora tenemos nuestra plantilla base aquí, y tengamos 120 00:06:33,400 --> 00:06:34,793 ‫ese nombre en mente. 121 00:06:37,225 --> 00:06:40,680 ‫Ahora podemos crear una nueva ruta desde la 122 00:06:40,680 --> 00:06:43,383 ‫cual accederemos a esa plantilla. 123 00:06:45,260 --> 00:06:48,893 ‫Así que hagámoslo aquí justo antes de la ruta de la API. 124 00:06:51,160 --> 00:06:56,160 ‫Entonces, app. get, que para representar páginas en un 125 00:06:56,680 --> 00:06:59,060 ‫navegador suele ser siempre el que 126 00:06:59,060 --> 00:07:02,990 ‫usamos, por lo que especificó la URL aquí, la ruta, y esa 127 00:07:02,990 --> 00:07:05,763 ‫es simplemente la raíz de nuestro sitio web. 128 00:07:07,060 --> 00:07:10,283 ‫Entonces, al igual que antes, por supuesto, necesitamos una 129 00:07:11,780 --> 00:07:14,363 ‫función de controlador, así que solicite, responda 130 00:07:17,140 --> 00:07:19,150 ‫y ahora para representar 131 00:07:19,150 --> 00:07:22,210 ‫nuestra plantilla como antes de usar el objeto 132 00:07:22,210 --> 00:07:27,210 ‫de respuesta, todavía establecemos el estado en 200 en este caso para ok. 133 00:07:28,100 --> 00:07:31,830 ‫Pero luego, en lugar de usar json, así, como siempre 134 00:07:31,830 --> 00:07:34,250 ‫lo hemos usado hasta este 135 00:07:34,250 --> 00:07:37,133 ‫punto, ahora es el momento de usar render. 136 00:07:38,015 --> 00:07:40,230 ‫Entonces render renderizará la plantilla con 137 00:07:40,230 --> 00:07:42,340 ‫el nombre que le pasamos, 138 00:07:42,340 --> 00:07:44,963 ‫y que en este caso es base. 139 00:07:46,640 --> 00:07:49,910 ‫Ni siquiera necesitamos especificar la extensión pug porque 140 00:07:49,910 --> 00:07:52,070 ‫Express sabrá automáticamente que este 141 00:07:52,070 --> 00:07:54,490 ‫es el archivo que estamos 142 00:07:54,490 --> 00:07:56,920 ‫buscando y, por supuesto, buscará este 143 00:07:56,920 --> 00:07:59,060 ‫archivo dentro de 144 00:07:59,060 --> 00:08:03,600 ‫la carpeta que se especificó al principio, así que esto uno. 145 00:08:03,600 --> 00:08:05,390 ‫Entrará en la carpeta de 146 00:08:05,390 --> 00:08:08,303 ‫vistas y allí buscará la plantilla con el nombre base. 147 00:08:09,920 --> 00:08:12,840 ‫Luego tomará esa plantilla y la renderizará, 148 00:08:12,840 --> 00:08:16,430 ‫y luego básicamente la enviará como respuesta al navegador. 149 00:08:16,430 --> 00:08:18,563 ‫Genial, probemos eso ahora. 150 00:08:22,190 --> 00:08:23,850 ‫Por lo tanto, creo que 151 00:08:23,850 --> 00:08:27,223 ‫nuestro servidor todavía se está ejecutando en el puerto de host local 3000. 152 00:08:32,170 --> 00:08:34,970 ‫Y eso nos da este 153 00:08:34,970 --> 00:08:37,790 ‫error, no podemos encontrar el módulo pug, 154 00:08:37,790 --> 00:08:41,323 ‫por lo que realmente necesitamos instalar el módulo pug. 155 00:08:42,845 --> 00:08:45,250 ‫Así que dije antes que no 156 00:08:45,250 --> 00:08:47,723 ‫lo hicimos, pero en realidad tenemos que hacerlo. 157 00:08:49,220 --> 00:08:52,210 ‫Express aún lo cargará detrás de escena automáticamente, pero 158 00:08:52,210 --> 00:08:54,890 ‫no viene con todos estos motores de 159 00:08:54,890 --> 00:08:56,553 ‫plantilla instalados de fábrica. 160 00:08:57,460 --> 00:08:59,753 ‫Entonces npm install pug. 161 00:09:06,063 --> 00:09:08,063 ‫Y aquí vamos, 162 00:09:09,220 --> 00:09:11,620 ‫intentémoslo de nuevo, y ahora 163 00:09:11,620 --> 00:09:14,310 ‫tenemos la caravana del parque. 164 00:09:14,310 --> 00:09:17,610 ‫Ese es nuestro elemento h1 que acabamos 165 00:09:17,610 --> 00:09:22,610 ‫de crear en la base. pug, y si ahora lo 166 00:09:22,830 --> 00:09:26,750 ‫inspeccionamos, verá que es un elemento h1 simple. 167 00:09:26,750 --> 00:09:28,210 ‫Por supuesto, no hay 168 00:09:28,210 --> 00:09:31,160 ‫estilo ni CSS en absoluto en este punto, pero 169 00:09:31,160 --> 00:09:32,530 ‫nos ocuparemos de 170 00:09:32,530 --> 00:09:34,290 ‫eso en las próximas conferencias. 171 00:09:34,290 --> 00:09:36,180 ‫Por ahora, lo que importa aquí 172 00:09:36,180 --> 00:09:40,070 ‫es que a medida que accedemos a nuestra raíz, enrutamos aquí en nuestro host, por 173 00:09:40,070 --> 00:09:42,883 ‫lo que tener esto es lo mismo que tener esto. 174 00:09:44,560 --> 00:09:46,810 ‫A medida que accedemos a esta ruta, 175 00:09:46,810 --> 00:09:48,900 ‫ahora obtenemos acceso a un sitio 176 00:09:48,900 --> 00:09:53,320 ‫web renderizado dinámicamente basado en nuestra base. plantilla de pug, genial. 177 00:09:53,320 --> 00:09:56,150 ‫Ese es el primer paso sobre cómo configurar pug, 178 00:09:56,150 --> 00:09:57,670 ‫y en las próximas 179 00:09:57,670 --> 00:10:00,570 ‫conferencias aprenderá a usar realmente este motor de plantillas para 180 00:10:00,570 --> 00:10:02,663 ‫crear sitios web dinámicos y sorprendentes.