‫Instructor: Ahora hagamos la primera parte
‫de la creación del sitio web de la granja de nodos
‫dinámica con solo crear
‫las plantillas que contendrán los datos reales.
‫Y recuerde que nuestro objetivo es construir este
‫tipo de sitio web dinámico donde tenemos una descripción general donde
‫tenemos todos los productos, y
‫luego cada producto tiene su página de detalles tal
‫como les mostré antes.
‫Y estos datos aquí, por supuesto, se leen del archivo json, por lo
‫que si cambiamos el archivo json, por ejemplo, eliminando
‫uno de estos productos y luego volviendo a cargar esta
‫página, ese producto debería desaparecer de aquí.
‫O si cambiamos algunos de estos datos aquí o el
‫nombre, bueno, eso debería actualizarse aquí en el sitio.
‫Nuevamente, porque es un sitio web dinámico creado
‫a partir de los datos que se encuentran en el archivo json.
‫Entonces, como
‫mencioné, el primer paso es crear estas plantillas,
‫una para esta página de descripción general
‫y otra para la página de detalles del producto.
‫Y comenzaremos con la página de detalles, y construiré
‫estas plantillas basadas
‫en estas páginas web de datos que tenemos
‫aquí en la carpeta de plantillas.
‫Así que echémosle un vistazo.
‫Tenemos una descripción general y un producto, y nuevamente,
‫comenzaremos con el producto. html.
‫Entonces tenemos aquí el nombre del producto y luego esta
‫imagen aquí que en realidad es un emoji, pero eso realmente no importa.
‫Entonces, en lugar de tener que solicitar
‫las imágenes reales para todos estos productos diferentes,
‫elegí simplemente usar emojis.
‫Eso es mucho más fácil.
‫Lo mismo en realidad para el estilo.
‫Así que tengo todo el estilo CSS integrado en las páginas html
‫para que no tengamos que hacer
‫múltiples solicitudes para obtener estos datos diferentes, ¿verdad?
‫Porque en
‫realidad, cada archivo diferente desencadenará una solicitud diferente, ¿de acuerdo?
‫Recuerda antes donde teníamos la solicitud del
‫icono de los cinco, ¿verdad?
‫Entonces vimos una solicitud para la raíz, entonces para la página principal, y
‫luego una solicitud para esa imagen, y lo que eso significa
‫es que cada activo,
‫por lo que cada pieza que es parte
‫del sitio
‫web, obtendrá su propia solicitud, y nosotros luego tendremos
‫que manejar eso, y
‫no queremos hacer eso, así que simplemente incluí el estilo en estas páginas html.
‫Muy bien, aquí hay un montón de estilo, estilo, estilo, y
‫luego aquí tenemos el, bueno,
‫el nombre del producto en alguna parte.
‫Ah, sí, aquí está el nombre del producto.
‫Aquí está la imagen del producto, que
‫nuevamente es solo un emoji, pero proviene de este campo de imagen.
‫Entonces tenemos este campo llamado imagen.
‫¿Derecha?
‫Luego tenemos de dónde viene, algunos de los ingredientes
‫y el precio, y también la descripción aquí abajo, ¿de acuerdo?
‫Pero nuevamente, todo esto proviene de estos diferentes campos.
‫Así que echemos un vistazo a los campos que tenemos.
‫Entonces, nombre del producto, imagen, origen, nutrientes, cantidad, precio, ya sea
‫orgánico o no, y la descripción.
‫Entonces, lo que vamos a hacer ahora es
‫básicamente reemplazar todas estas piezas que queremos agregar dinámicamente
‫con un marcador de posición, y
‫luego, con nuestro código, reemplazaremos ese marcador de
‫posición con la pieza real de datos, ¿de acuerdo?
‫Entonces, comencemos aquí con el nombre del producto, así
‫que continuaré y eliminaré eso y
‫luego colocaré un marcador de posición aquí.
‫Y puedo hacer todo lo que quiera como marcador de posición.
‫Solo me gusta ir en este caso con algo como esto.
‫Entonces...
‫Nombre del producto, luego porcentaje y luego las llaves.
‫De nuevo, esto podría ser cualquier cosa
‫que quisiéramos, pero
‫queremos encontrar algo que probablemente
‫no esté en la página para no reemplazar
‫nada incorrecto, por lo que en realidad no queremos reemplazar, ¿de acuerdo?
‫Y podría poner algo como esto aquí, ¿de acuerdo?
‫Y luego reemplace todo eso, pero creo que, así, se
‫ve bien y es fácil de reconocer.
‫Entonces, todo lo que tenemos que hacer
‫es seguir adelante y poner
‫todo esto aquí, y luego reemplazaré, por supuesto, estos nombres.
‫Entonces aquí tenemos los nutrientes.
‫Aquí tenemos la cantidad.
‫Y aquí tengo el precio.
‫Aquí abajo tenemos el precio de nuevo.
‫Y el precio es solo el número, ¿de acuerdo?
‫El signo del euro aquí simplemente se queda
‫ahí porque el precio que tenemos es en realidad solo un número.
‫Echemos un vistazo a eso aquí en json.
‫Así que solo tenemos 6. 50 pero no la moneda.
‫Y en realidad lo mismo aquí, así que tomemos eso y
‫copiemos aquí muy rápido, y sí, en realidad,
‫olvidé reemplazar este, así que este
‫es el de.
‫Y de hecho escribamos desde, no en mayúsculas, para que este texto
‫tenga un poco más de sentido.
‫Así, por ejemplo, de Portugal o de España o lo que sea.
‫Oh, ¿qué es eso de aquí?
‫Bien, supongo que acabo de escribir en medio del nombre del producto.
‫Entonces nutrientes.
‫Bueno.
‫Ah, y aquí abajo tenemos, por supuesto, la descripción, así que
‫reemplacemos eso también.
‫Oh, por supuesto que necesito recuperar
‫este
‫y la descripción.
‫A continuación, tenemos estas imágenes, entonces el aguacate, y
‫entonces presiono un par de comandos V,
‫pegando esto aquí, y así puedo editarlos aquí todos al
‫mismo tiempo.
‫Bien, luego imagen y, oh, algo aquí en el título.
‫También queremos reemplazar la imagen aquí y también el
‫nombre del producto.
‫Entonces.
‫Nombre del
‫producto aquí y
‫aquí la imagen para que este también se reemplace dinámicamente.
‫Muy bien, ahora solo una cosa más que es
‫un poco más compleja.
‫¿Dónde está?
‫Está bien, está aquí.
‫Entonces, algunos productos son orgánicos y otros no.
‫Entonces, hay una clase en el CSS que
‫se agregará a todos estos elementos cuando no sean orgánicos, ¿de acuerdo?
‫Así que esa es esta clase aquí.
‫Entonces, cuando no es orgánico, entonces no debería mostrarse, por lo
‫que esta insignia orgánica aquí.
‫Y solo para mostrarte de lo que
‫estoy hablando, la insignia orgánica es esta cosa aquí, ¿de acuerdo?
‫Entonces no queremos mostrar eso
‫en caso de que sea falso en el json, entonces lo que vamos
‫a hacer aquí es agregar otro marcador de
‫posición aquí o realmente dentro de la
‫clase, por lo que llamaré a este no
‫orgánico .
‫Y verás por qué un poco más tarde, ¿de acuerdo?
‫Cuando reemplacemos esto, tendrá un poco más de sentido para usted.
‫Muy bien, creo que este ya está
‫hecho, y simplemente sobrescribí todo lo que teníamos.
‫Permítanme ahora llamar
‫a esta plantilla producto, ¿de acuerdo?
‫Así que este está hecho.
‫Pasemos al siguiente, la descripción general.
‫Y este en realidad va a ser un poco diferente, y
‫déjame mostrarte por qué es así.
‫Entonces, nuevamente, tenemos todos los SCC alineados aquí, y
‫ahora tenemos este contenedor de tarjetas,
‫y luego para cada uno de los productos, tenemos una tarjeta.
‫Entonces, cada una de estas tarjetas aquí tiene esta etiqueta de figura, ¿verdad?
‫Ahora, en realidad, no sabemos
‫cuántas de estas tarjetas estarán aquí en esta descripción general, ¿verdad?
‫Imagina que tenemos 10 productos en json.
‫Entonces necesitamos 10 de estas tarjetas.
‫Pero imagina que solo tenemos uno o dos.
‫Pues bien, no queremos las 10 cartas sino solo dos.
‫Entonces, ¿cómo vamos a hacer eso?
‫Bueno, en realidad crearemos solo otra plantilla donde solo haya una
‫tarjeta allí, y luego incluiremos una de estas
‫plantillas para cada una de las tarjetas
‫que queramos, por lo que
‫cada uno de los productos en el archivo json.
‫¿Tiene sentido?
‫Así que llamemos a esto aquí la descripción general de la plantilla.
‫Y seguiré adelante y crearé la tarjeta de plantilla.
‫Entonces, lo que voy a hacer aquí es ahora, como mencioné, ahora está de vuelta
‫en la parte
‫superior, así que sigo adelante y agarro una figura.
‫Eso fue demasiado.
‫Y pégalo aquí.
‫Así que baja esto un poco.
‫Bien, ahora cada carta tiene su propia figura.
‫Bien, y ahora lo que voy a hacer
‫es eliminar todas las tarjetas de aquí y crear
‫un marcador de posición aquí también.
‫Tarjetas
‫de producto.
‫¿Okey?
‫Entonces, nuevamente, más adelante en
‫nuestro código, crearemos tantas tarjetas como necesitemos aquí.
‫Por ejemplo, si tenemos
‫cinco productos, creamos cinco tarjetas como esta.
‫Luego los juntaremos en una cadena
‫y luego reemplazaremos las tarjetas de producto con
‫esa cadena que contiene todas estas tarjetas diferentes, ¿de acuerdo?
‫Entonces, en realidad, hemos terminado con este.
‫¿Okey?
‫Porque la mayoría de
‫las cosas ocurren dentro de la tarjeta de plantilla.
‫Así que no hay nada más que reemplazar aquí.
‫Vengo aquí para copiar esto aquí,
‫y ahora es muy simple
‫para nosotros reemplazar lo que necesitamos aquí.
‫Así que esta es la imagen, y la tenemos dos veces.
‫Bien, eso hace que se vea un poco mejor.
‫Imagen, imagen, entonces aquí tenemos el nombre del producto, ¿recuerdas?
‫Aquí, en
‫este lugar, volveremos a tener el marcador de posición no orgánico, y nuevamente, este
‫tendrá más sentido para ti un poco más tarde.
‫Más orgánico, entonces la cantidad aquí.
‫Luego el precio.
‫Así que también necesitamos construir el enlace aquí.
‫Así que este de aquí, por lo
‫que el elemento A, en caso de que no esté realmente familiarizado
‫con html, el elemento A es para un enlace.
‫Así que déjame mostrártelo en un ejemplo práctico real.
‫Entonces, cuando pasamos el mouse aquí en este enlace,
‫allá abajo en la esquina inferior izquierda, entonces
‫aquí abajo, verá que es un producto de barra inclinada y
‫luego ID es igual a cero.
‫Y este es ID igual a uno, ID es igual a dos.
‫Bien, y si hacemos clic en eso, lo vemos realmente aquí.
‫Entonces, barra el producto y luego el ID es igual a
‫cero, y este ID aquí es exactamente el ID que tenemos en el json.
‫Bien, este de aquí.
‫Entonces el aguacate es uno, el queso de cabra tiene uno.
‫Lo siento, el aguacate tiene cero, claro.
‫El brócoli tiene dos y así sucesivamente.
‫Y aquí, en realidad, necesitamos construir el enlace.
‫Entonces producto, y por supuesto, no en mayúsculas.
‫Entonces producto, y el ID
‫es ID.
‫¿Okey?
‫Entonces, tenemos que reemplazar este marcador de posición de ID aquí con
‫el número correcto.
‫Entonces, cero, uno, dos, tres, cuatro, cinco, y así sucesivamente,
‫dependiendo de cuántos productos haya.
‫Así que supongamos que tenemos un queso aquí, ¿de acuerdo?
‫Regresemos aquí.
‫Bueno, entonces la imagen será esta aquí, el
‫nombre del producto será este y el ID será uno.
‫Bien, entonces esto aquí
‫se traducirá a ID igual a uno y nuestro controlador aquí.
‫Entonces, este controlador de servidor se encargará de ir
‫a la página correcta cuando el ID del producto sea uno, ¿de acuerdo?
‫Entonces esa lógica aún no está implementada, pero por
‫supuesto, lo haremos en las próximas conferencias.
‫Así que ahora tenemos las plantillas realmente creadas, así
‫que pasemos al siguiente video donde realmente
‫comenzaremos a completar las plantillas y enviaremos
‫la página final al navegador.