‫-: En este video y en
‫el siguiente, juntos crearemos la página de detalles de la gira.
‫Y en
‫el camino aprenderás más técnicas de
‫Pug como condicionales y mixins.
‫Y como les mostré antes,
‫así es como se ve realmente la página de detalles del recorrido.
‫Y eso es lo que vamos a construir en
‫este video y en el siguiente.
‫Ahora, lo único que
‫dejaremos para un
‫poco más tarde es este mapa.
‫Está bien, pero todo lo
‫demás lo vamos a construir en estas conferencias sobre herramientas.
‫Incluyendo estas revisiones.
‫Está bien.
‫Así que ahora mismo tenemos nuestra descripción general
‫y, por supuesto,
‫tenemos estos botones con las URL ya creadas.
‫Pero luego, cuando intentamos acceder a esta
‫página, obtenemos este error.
‫Está bien.
‫Así que volvamos a nuestro código VS
‫y realmente quiero comenzar esto con
‫un pequeño desafío para ti.
‫Entonces, lo que quiero
‫que hagas es crear una ruta para la página
‫de detalles de acuerdo con la URL que acabamos de construir.
‫Y será similar
‫a lo que ya tenemos
‫aquí, pero tienes que modificarlo un poco.
‫Bueno.
‫Suficiente de
‫eso, también quiero que construyas este controlador.
‫Así que ponte manos a la obra.
‫Porque ahora mismo solo tenemos
‫este marcador de posición.
‫Así que déjame darte los pasos aquí.
‫Y como siempre,
‫primero,
‫necesitamos obtener los datos.
‫Esta vez para el tour solicitado.
‫Y para eso,
‫tenga en cuenta que en realidad necesitamos las reseñas
‫aquí y también los guías turísticos.
‫Bueno.
‫Entonces, nuevamente
‫echemos un vistazo a eso.
‫Entonces tenemos estos guías turísticos aquí.
‫Correcto, por lo que básicamente son un conjunto de datos separado.
‫Entonces usuarios.
‫Y luego aquí también tenemos las reseñas.
‫Ahora, estos guías turísticos
‫aquí, creo que en realidad se completan automáticamente
‫en un modelo.
‫Así que echemos un vistazo a eso muy rápido.
‫Así que el
‫modelo de gira y así,
‫sí.
‫Entonces, aquí
‫abajo, tenemos este autocompletado
‫cada vez que hay una consulta de búsqueda,
‫pero solo para las guías.
‫Por tanto, no olvide rellenar también
‫las reseñas.
‫Bueno.
‫Luego, después
‫de eso, crearemos una
‫plantilla, pero lo haremos juntos bien, así que
‫no necesito que hagas esta parte.
‫Y finalmente,
‫quiero que complete esta parte aquí también.
‫Entonces renderice
‫la
‫plantilla usando los
‫datos del paso uno nuevamente.
‫Está bien.
‫Así que eso también es muy simple.
‫Entonces, lo que quiero
‫que hagas es crear la ruta
‫y luego también obtener los datos.
‫De acuerdo, pausa el video aquí y buena suerte con eso.
‫Así que espero que
‫lo hayas hecho y, para avisarme, resuélvelo aquí.
‫Y comenzaremos con la ruta.
‫Y ahora todo lo que necesitamos agregar aquí es esta babosa.
‫Y, por supuesto, lo estamos haciendo como un parámetro de URL.
‫Así que así, llamándolo babosa.
‫Entonces, antes de usar la identificación, ¿verdad?
‫Entonces lo teníamos
‫así y ahora llamémoslo la babosa.
‫Está bien.
‫Porque, de nuevo,
‫así es como se ve la página de descripción general.
‫Tenemos gira slash slug básicamente.
‫Bien, y eso es lo
‫que usaremos para crear el recorrido en el controlador.
‫Así que hagámoslo ahora aquí.
‫Así que const,
‫tour igual aguarda tour y
‫findone.
‫Entonces, esta vez no podemos usar buscar por ID.
‫Bueno, porque no conocemos
‫la identificación de la gira.
‫Y así,
‫en cambio, estamos buscando por la babosa.
‫Y la
‫babosa es como espero
‫que sepas pedir. params
‫dot slug está bien.
‫Y ahora, finalmente, eso es todo para
‫llenar el campo de matrices.
‫Está bien.
‫Entonces, el camino para poblar son las revisiones.
‫Y de hecho no necesitamos todos los campos aquí.
‫Así que especifiquemos los que necesitamos.
‫Y entonces, eso es
‫solo la revisión, la
‫calificación
‫y el usuario.
‫Porque recuerde
‫que en realidad mostramos
‫el nombre de usuario y la foto de usuario.
‫Y luego, por
‫supuesto, la revisión en sí y la calificación.
‫Bueno.
‫Luego, por
‫supuesto, se queja de que no usamos async.
‫Y, por supuesto, no lo iba a olvidar.
‫Pero de todos modos
‫es bueno que ES Line nos advierta sobre este tipo de errores.
‫Realmente elimina muchos errores
‫del desarrollo.
‫Bueno.
‫Y luego
‫aquí, por supuesto, vamos a pasar esa
‫variable de recorrido a nuestra plantilla de recorrido.
‫Así que ese.
‫Dale una oportunidad.
‫No más errores.
‫Y esa parte ahora está completa.
‫Entonces, todo lo que
‫tenemos que hacer ahora es seguir adelante y crear nuestra plantilla.
‫Bueno.
‫Entonces, ya
‫deberíamos tener eso aquí.
‫Y esos son los datos de los desarrolladores.
‫Entonces tenemos muchas
‫carpetas y muchos datos.
‫Y puede volverse un poco
‫confuso en algún momento.
‫Bueno.
‫Entonces,
‫eliminemos este contenido de marcador de posición aquí.
‫Y antes de hacer cualquier
‫otra cosa, echemos un vistazo nuevamente al archivo HTML original.
‫Que está en esa
‫carpeta pública que acabo de cerrar.
‫De hecho, cerremos todos estos aquí, porque
‫lo encuentro realmente confuso.
‫Bien, los modelos también.
‫Y ahora lo que necesitamos es público y
‫luego gira. html.
‫Así que el encabezado ya lo tenemos, por supuesto.
‫Y luego aquí va todo el contenido.
‫Entonces,
‫todas estas secciones
‫que tenemos en nuestra
‫página, por supuesto, están traducidas aquí como HTML.
‫Y al igual
‫que antes, en realidad ya creé
‫una plantilla de Pug basada en todo este código HTML.
‫Muy bien, no querríamos traducir
‫esto aquí manualmente juntos.
‫Bueno.
‫Así que ya lo tengo aquí en este archivo de plantilla.
‫Pero, por
‫supuesto, de nuevo, si te
‫apetece, puedes pausar el
‫video ahora y traducirlo tú mismo también.
‫Está bien.
‫Pero lo que voy a hacer ahora es
‫seguir adelante y copiar todo este código.
‫Que sigue siendo un montón de código como puede ver.
‫Copiemos todo esto, vayamos a nuestro recorrido y
‫peguemos eso aquí.
‫Ahora la anotación volverá a estar mal.
‫Copiemos, o seleccionemos lo que acabamos de pegar aquí.
‫Entonces, todo excepto la primera línea es incorrecto.
‫Pero todo lo que tenemos que hacer aquí es agregar una pestaña más.
‫Y eso es.
‫Así que ahora están todos dentro de este bloque de contenido
‫al mismo nivel.
‫Así que la sección
‫y la
‫sección y básicamente todas las secciones están ahora
‫en el mismo nivel,
‫por lo que todas son hermanas.
‫Excelente.
‫Así que cerremos todos estos que
‫ya no necesitamos.
‫Y así, como
‫antes, ahora tenemos esta página estática
‫aquí con todos estos datos estáticos.
‫Que sabemos que tendremos que seguir adelante con un reemplazo.
‫Pero antes de hacer
‫eso, echemos un vistazo si nuestra ruta
‫ya está funcionando.
‫Bueno.
‫Así que vamos a recargarlo
‫y eso nos da el mismo error.
‫Y supongo
‫que es porque aquí
‫tenemos giras y no giras como
‫creo que lo tenemos en nuestra ruta.
‫Así que aquí tenemos un recorrido.
‫Y esa es realmente la forma en que tiene sentido.
‫Así que sigamos adelante y cambiemos eso aquí en nuestra
‫descripción general.
‫De acuerdo,
‫aquí realmente queremos una gira.
‫Porque, de
‫hecho, en realidad solo estamos viendo un
‫recorrido y no múltiples recorridos.
‫¿Derecha?
‫Entonces, si volvemos a la descripción
‫general ahora, lo cargamos y
‫ahora abrimos The Forest
‫Hiker, entonces verá que será un recorrido.
‫Y luego,
‫por supuesto, obtenemos el HTML
‫para la página que acabamos de crear.
‫Ahora, por alguna razón, el CSS no está aquí.
‫Intentemos recargar esto.
‫Bueno, ¿qué está pasando aquí?
‫Intentemos inspeccionar esto.
‫Y veo que tenemos un par de errores.
‫Entonces podemos hacer clic en eso.
‫Y entonces la razón de la falta de CSS, porque
‫en su lugar está tratando de cargar el archivo en
‫el lugar equivocado.
‫Entonces está tratando de cargarlo en la carpeta CSS
‫dentro del tour.
‫Pero eso, por supuesto, no existe.
‫Y eso es
‫porque estamos aquí en esta ruta turística, está bien.
‫Entonces, básicamente, necesitamos arreglar la
‫forma en que importamos el CSS en nuestra plantilla base.
‫Vamos para allá.
‫Y aquí,
‫de hecho, deberíamos tener otra barra.
‫Está bien, y lo mismo en realidad aquí.
‫Y eso
‫es exactamente por la
‫misma razón que les expliqué antes en la descripción general aquí abajo.
‫Así que comenzamos esta URL también con una barra.
‫Y nuevamente, eso comenzará en la
‫raíz de la página.
‫Y esa es la forma en que se supone que funciona.
‫Y de hecho, lo mismo se aplica a todas las imágenes aquí.
‫Por lo tanto, todas las
‫imágenes siempre deben comenzar en relación con la URL raíz.
‫Así que agreguemos eso muy rápidamente aquí a todas estas imágenes.
‫Y sí,
‫eso es todo.
‫Así que esos son todos.
‫Y así,
‫con eso, hemos arreglado
‫la descripción general y también este archivo base.
‫Entonces, si ahora
‫recargamos, deberíamos tener acceso al CSS correcto.
‫Y de hecho, aquí vamos.
‫Solo hay un error más
‫que está aquí en esta imagen.
‫Y nuevamente,
‫es porque está tratando de cargarlo
‫aquí desde el recorrido
‫y no desde la URL raíz.
‫Y entonces,
‫ese problema está aquí en el encabezado.
‫Y, por
‫supuesto, aquí también debemos hacerlo
‫relativo a la ruta raíz.
‫Probablemente lo mismo en el pie de página.
‫Y si.
‫Está bien.
‫Solo para confirmar rápidamente eso, sí, de
‫hecho, aquí vamos.
‫Excelente.
‫Entonces, como mencioné,
‫por supuesto, esto tiene todos los
‫datos estáticos sobre The Park Camper Tour, que
‫es el que tenemos en la plantilla.
‫Pero estamos mirando al caminante del bosque.
‫Entonces, comencemos ahora arreglando nuestra plantilla y
‫básicamente usando los datos dinámicos aquí.
‫Entonces, recuerde que la variable que pasamos aquí
‫se llama tour.
‫¿Derecha?
‫Así que simplemente se
‫llama gira y así es como tenemos que llamarlo aquí.
‫Así que gira. nombre, y
‫también el mismo aquí.
‫Y ahora ya sabe que necesitamos usar
‫una cadena de
‫plantilla aquí porque de hecho queremos crear una cadena.
‫Asi llamado . excursión.
‫Y aquí este camino tampoco es correcto.
‫En primer lugar, debe ser una cadena de plantilla y
‫luego nuestras imágenes, escribiré recorridos de barra inclinada
‫de imagen con barra
‫inclinada el nombre de la imagen de portada.
‫Así que tour dot, y ahora no
‫recuerdo si
‫es la imagen de portada o la imagen de portada.
‫Así
‫que sí.
‫Imagen de portada.
‫Bueno.
‫Así que probemos eso rápidamente.
‫Y recuerda, estamos en The First Hiker.
‫Y ese debería ser ahora el nombre.
‫Y otro error más.
‫Entonces, dice aquí, no se puede leer el recorrido por
‫la propiedad de indefinido.
‫Así que regresemos y
‫sí.
‫Así que aquí está este estúpido error.
‫Así que, por supuesto, es una gira. nombre y no nombre.
‫excursión.
‫Entonces, ¿qué estaba
‫pensando allí?
‫Recarguemos esto y ahora, de
‫hecho, obtenemos The
‫Forest Hiker con esta imagen de portada realmente agradable en el fondo.
‫Excelente.
‫Y sigamos moviéndonos aquí.
‫Así que crea otra cadena de plantilla.
‫Excursión.
‫Duración y luego
‫el número de días.
‫Luego, aquí abajo, tenemos nuevamente la ubicación
‫de inicio.
‫Entonces, gira.
‫ubicación de inicio. descripción, recuerda.
‫Está bien.
‫Ahora aquí abajo tenemos
‫estos cuadros de descripción general aquí.
‫Entonces, detalle del cuadro de descripción general.
‫Y como puede ver, tenemos cuatro
‫casillas iguales
‫aquí donde lo único que cambia es el
‫nombre de este ícono, luego
‫la fecha y la próxima fecha.
‫Bien, entonces aquí lo que cambia no es la próxima
‫fecha, lo
‫que cambia es la descripción de las cajas.
‫Así que la próxima
‫fecha, dificultad, participantes y valoración.
‫Está bien.
‫Básicamente, este
‫código aquí es siempre
‫el mismo solo con tres piezas que cambian.
‫Entonces el nombre del icono, la descripción y
‫el valor de esa descripción.
‫Y así, dado que no nos gusta el código
‫repetido, ¿verdad?
‫Usemos otra característica de Pug que aún
‫no hemos usado y que se
‫llama mixins.
‫Así que los mixins son
‫básicamente piezas de código reutilizables a las que podemos pasar argumentos.
‫Así que un poco como una función.
‫Y también es exactamente como mixins en SAS.
‫Así que ese es un preprocesador de CSS con
‫el que quizás esté familiarizado.
‫Copiemos este código aquí para este cuadro de descripción general.
‫Así que lo copia.
‫Y ahora aquí,
‫fuera de este bloque, creemos un nuevo mixin.
‫Así que escribimos mixin y luego
‫el nombre del mixin, al que llamo cuadro de descripción general.
‫Y luego, un poco como
‫una función, podemos especificar algunos argumentos.
‫Y entonces recuerde cómo
‫tenemos la descripción del cuadro, luego tenemos el valor de esa
‫descripción y llamémoslo texto aquí.
‫Y luego también, el nombre del icono.
‫Bueno.
‫Así que ahora, copiemos
‫ese texto aquí y, por supuesto, esto arruina
‫nuestro formato.
‫Arreglemos eso rápidamente.
‫Y ahora, estas variables aquí, realmente
‫funcionan como
‫todas las demás variables en Pug.
‫Entonces, aquí este debería ser ahora el
‫texto.
‫¿Derecha?
‫Y esta debería ser la descripción.
‫Tan igual descripción.
‫Bueno, aquí en realidad se llama etiqueta en el CSS.
‫Así que llamémoslo etiqueta aquí también.
‫Bien, etiqueta, texto e icono.
‫Y aquí también necesitamos cambiar el nombre de ese
‫ícono y todos estos nombres de íconos siempre comienzan con un
‫guión de íconos.
‫Entonces, todo lo que realmente necesitamos
‫reemplazar es esta parte.
‫Así que creemos de nuevo una cadena de plantilla.
‫Y luego deshazte de esto.
‫E icono.
‫Está bien y ahora podemos usar esto.
‫También quería decir que también
‫podríamos haber exportado
‫este mixin a otro archivo y luego incluir ese archivo aquí.
‫Pero creo que esto no tiene mucho sentido.
‫En este caso porque
‫en realidad no es mucho código.
‫De todos modos, sigamos adelante y usemos
‫este mixin.
‫Déjame copiar solo el nombre.
‫Y aquí en lugar de este cuadro de descripción general.
‫Y por ahora permítanme duplicarlo aquí.
‫Bien, usamos este mixin escribiendo
‫plus y luego, como
‫una función regular, le
‫pasamos argumentos vacíos.
‫Entonces, nuestro primer cuadro de descripción general es la próxima fecha.
‫Entonces, por ahora, solo la fecha que está aquí.
‫Así que puedo mostrarte que, de hecho, funciona.
‫Así que el 20 de
‫agosto de 21.
‫Y
‫luego aquí, calendario.
‫Está bien porque ese es el nombre aquí del icono.
‫Y ahora deberíamos conseguir
‫dos cajas.
‫Así que este
‫y este deberían verse exactamente iguales.
‫Así que confirmemos eso rápidamente.
‫Y entonces podemos pasar a
‫usar el mixin correctamente.
‫Y sí, aquí están nuestras dos cajas
‫exactamente iguales.
‫Excelente.
‫Así que deshagámonos de este primero.
‫Y, por supuesto, aquí queremos la
‫fecha real.
‫Bueno.
‫Y
‫eso es, agregue tour. inicio, fechas, cero.
‫Así que echemos un vistazo a eso.
‫Y recuerde,
‫esto se verá un poco extraño.
‫Como lo hizo antes.
‫Bueno.
‫Así que sigamos adelante y arreglemos eso.
‫Así que tomemos eso de aquí.
‫Entonces, lo que necesitamos
‫es básicamente esto.
‫Ahora no quiero
‫hacer esta línea aquí demasiado
‫larga simplemente pegándola aquí.
‫Entonces, ¿por qué
‫no crear una nueva variable de script Java para eso?
‫Así que recuerde que necesitamos usar esta sintaxis
‫aquí para crear un código de
‫secuencia de comandos de Java que no producirá ningún resultado.
‫Y, de nuevo, podemos
‫simplemente escribir un script java aquí.
‫Bueno.
‫Y ahora aquí, simplemente voy a usar
‫esa fecha.
‫Excelente.
‫Y ahora dupliquemos esto aquí un par de veces para
‫todas las cajas que tenemos.
‫Entonces el primero es por dificultad.
‫Y el ícono está aumentando.
‫Luego, el siguiente es para los participantes.
‫Con el icono de usuario.
‫Y el último es rating.
‫Y el icono es una estrella.
‫Así que aquí tenemos la fecha, pero aquí en
‫la dificultad tenemos una gira. dificultad.
‫Entonces aquí para
‫los participantes queremos esta cadena.
‫Como 10 personas.
‫Entonces, una cadena
‫de plantilla que dice gira. mezcla, tamaño
‫del
‫grupo y luego personas.
‫Y finalmente queremos la calificación y
‫luego de cinco.
‫Así que
‫gira, y nunca puedo
‫recordar cómo llamé a este campo.
‫Y es un promedio de calificaciones.
‫Está bien.
‫Y luego, de
‫cinco.
‫Bueno.
‫Y eso debería ser todo.
‫Ahora podemos deshacernos de todo este código.
‫Y de esta manera se ve mucho mejor.
‫Y
‫solo para asegurarnos
‫de que funcione, guardemos aquí,
‫recarguemos y, de hecho, obtenemos fácil, 25
‫personas, y la calificación de
‫cinco de cinco.
‫Impresionante.
‫Así que ya cubrimos mucho
‫terreno, pero dividamos este video en dos y continuemos con el
‫resto de la página en
‫la siguiente.