‫-: [Jonas Schmedtman] Entonces ya tenemos plantillas HTML.
‫Ahora viene la parte más difícil,
‫que es reemplazar los marcadores de posición con el contenido.
‫Así que comencemos con la descripción general.
‫Y démosnos un respiro aquí y
‫agreguemos algunos comentarios.
‫(escribiendo en un teclado)
‫Así que la página de descripción general y algunos comentarios aquí abajo.
‫Entonces, la página del producto, y aquí tenemos la API.
‫Y luego aquí tenemos el No encontrado.
‫Muy bien, ya se ve un poco mejor.
‫Nuevamente, comenzamos con la página de descripción general.
‫Entonces, el
‫primer paso es cargar la descripción general de la plantilla.
‫De acuerdo, cada vez que haya una nueva solicitud
‫para esta ruta, por lo que la ruta ajustada o
‫/ Descripción general, lo primero que haremos
‫es leer la descripción general de la plantilla.
‫Pero, al igual que antes, podemos hacer
‫eso fuera de esta devolución de llamada, ¿de acuerdo?
‫Debido a que estas plantillas, siempre serán las mismas,
‫por lo que puede leerlas
‫en la memoria desde el principio cuando iniciemos la aplicación.
‫Y luego, cuando sea necesario, simplemente
‫seguimos adelante y reemplazamos el contenido allí.
‫Bien, al igual que hicimos con los datos
‫aquí, tampoco es necesario leer los datos
‫cada vez que hay
‫una solicitud y lo mismo sucede con las plantillas.
‫¿Okey?
‫Así que en realidad
‫voy a seguir adelante y hacerlo con las tres plantillas
‫aquí para que lo tengamos fuera del camino.
‫Así que voy a seguir adelante, y solo para obtener este, lo llamaré
‫temp para obtener
‫una descripción general de la plantilla y el nombre
‫DAR y aquí tenemos las plantillas.
‫Y luego / template-overview.
‫Bien, entonces duplique esto aquí dos veces para
‫que tengamos
‫uno para la tarjeta, entonces tarjeta de
‫plantilla, y luego uno para el producto de plantilla.
‫Producto, está bien.
‫Y nuevamente, tengamos en cuenta que podemos
‫hacerlo con la versión sincronizada porque estamos en el
‫código de nivel superior.
‫Solo ejecutamos una vez, justo al principio
‫cuando cargamos estas aplicaciones.
‫Entonces, no podríamos hacer esto dentro de esta función
‫de devolución de llamada createServer, ¿de acuerdo?
‫Porque este se llama cada vez que hay una solicitud.
‫Y si tenemos un millón de solicitudes al mismo tiempo,
‫podríamos bloquear el código un millón de veces, una
‫vez por cada solicitud.
‫Y eso es algo que no queremos.
‫Entonces, la descripción general, sigamos adelante
‫y, en primer
‫lugar, solo para probarlo, envíe este tempOverview como respuesta.
‫Ahora, antes de
‫que podamos hacer eso, debemos seguir adelante y configurar este tipo de contenido en HTML.
‫Así que déjame copiar este código aquí.
‫Entonces, el código de estado es
‫200 y el tipo de contenido debe ser texto / html.
‫Así que reinicie el servidor
‫aquí y ahora echemos un vistazo, y de
‫hecho, aquí vamos.
‫Así que aquí está nuestra
‫página con estilo que ya conocemos de esta.
‫Ahora, por supuesto, lo que
‫falta aquí son estas filas, y eso se
‫debe a que todavía tenemos nuestro marcador de posición.
‫Entonces, la siguiente tarea ahora es reemplazar este marcador de posición con
‫las tarjetas reales.
‫¿Y cómo lo haremos?
‫Bueno, recuerde que en el objeto de datos,
‫tenemos una matriz de todos los objetos que están en
‫los datos. JSON.
‫Entonces, todos estos cinco objetos, todos en objetos JavaScript, porque
‫ya analizamos estos datos con solo una cadena.
‫¿Okey?
‫Entonces, el objeto de datos nuevamente es una
‫matriz de, en este punto, cinco objetos.
‫Entonces, lo que
‫tenemos que hacer es básicamente recorrer esta
‫matriz y, para cada uno de ellos, reemplazar
‫los marcadores de posición en la plantilla con
‫los datos reales del producto actual, ¿de acuerdo?
‫¿Tener sentido?
‫Pongamos eso en código.
‫Entonces, el objeto de datos, lo recorreremos con un mapa
‫porque queremos devolver algo y
‫ese algo, lo guardaremos en una
‫nueva matriz, así que llamémoslo cardsHtml, ¿de
‫acuerdo?
‫Y estoy seguro de que está familiarizado con el método del mapa, ¿de acuerdo?
‫Entonces, lo que hace el mapa es aceptar una función
‫de devolución de llamada y esta función de devolución de llamada obtiene
‫como argumento el elemento actual, por lo que el elemento del bucle
‫actual y todo lo que
‫devolvamos aquí se guardará en una matriz, ¿de acuerdo?
‫Entonces, digamos que estamos haciendo un bucle sobre una matriz con
‫cinco elementos,
‫que es el caso aquí, y para
‫cada elemento, devolveremos algo, y ese algo se colocará
‫en la misma posición pero en esta nueva matriz cardsHtml.
‫Entonces, ¿qué haremos en cada una de estas iteraciones?
‫Bueno, queremos reemplazar los marcadores de posición, ¿verdad?
‫Y, de hecho, seguiré adelante
‫y crearé una
‫función para eso y se llamará replaceTemplate.
‫¿Okey?
‫Y replaceTemplate tomará el HTML de la tarjeta.
‫Básicamente, la tempCard.
‫Y tomará el objeto actual, así que element.
‫¿Okey?
‫Entonces, este elemento es lo que contiene los datos, ¿verdad?
‫Entonces, nuevamente, cada uno de estos es ahora un
‫objeto que contiene los datos en cada una de estas propiedades.
‫¿Okey?
‫Y no se preocupe, si no tiene 100% de sentido
‫ahora, lo tendrá una vez que creemos esta función replaceTemplate, ¿de acuerdo?
‫Así que hagámoslo ahora también aquí.
‫Entonces replaceTemplate es una función que toma
‫una plantilla, solo la llamaré temp aquí y, por
‫supuesto, un producto.
‫Bien.
‫Así que creemos una variable
‫llamada salida
‫y esa será plantilla. reemplazar en nuestro marcador de posición.
‫Y pondremos aquí todos los marcadores de
‫posición que tenemos, comenzando con PRODUCTNAME, ¿de acuerdo?
‫Y para que uno sea reemplazado por producto. NOMBRE DEL PRODUCTO.
‫Entonces producto, que es este argumento que pasamos
‫a la función,. PRODUCTNAME porque,
‫bueno, ese es el nombre del campo
‫donde está el nombre del producto.
‫¿Bien?
‫Entonces, sigue adelante y copia ese, y está bien.
‫Ahora, un pequeño truco que
‫tenemos que usar aquí es no
‫usar las comillas, sino usar una expresión regular.
‫Y eso se debe
‫a que puede haber varias instancias de este marcador
‫de posición, por lo que el truco es envolver esto en una expresión regular y
‫usar la bandera g en él.
‫Lo que significa global y,
‫por lo tanto, esto hará que todos estos marcadores de posición sean reemplazados
‫y no solo el primero que ocurra.
‫Entonces, esto reemplaza el nombre del
‫producto, ahora sigamos adelante y reemplacemos todos los demás.
‫Entonces
‫salida = salida. Reemplazar, y ahora seguiremos
‫adelante y
‫copiaremos esto para hacer mi vida un poco más fácil.
‫Entonces imagen, y se llama imagen y
‫no en mayúsculas, así como así.
‫¿Okey?
‫Ahora aquí arriba, creé esta
‫variable porque quería reemplazar el nombre de este producto en temp.
‫Entonces, en el argumento, y no es una
‫buena práctica manipular directamente los argumentos que
‫pasamos a una función.
‫Entonces creé una nueva variable
‫y, a partir
‫de ahora, manipularé la primera, ¿de acuerdo?
‫Y por eso no es una constante, sino un let.
‫Entonces, un let, podemos mutar después de que se haya creado, ¿de acuerdo?
‫Ahora déjeme seguir adelante, copie un par de estos.
‫Entonces precio, y aquí también se llama precio,
‫luego tenemos
‫de, luego tenemos nutrientes.
‫Por supuesto que podría copiar todo esto,
‫pero no voy a saltar de un lado a otro aquí.
‫Entonces, cantidad, descripción
‫y
‫probablemente cometeré un error aquí al escribir
‫todo esto manualmente, pero en
‫un producto pequeño, eso no es gran cosa.
‫Entonces, en realidad, este no lo necesitamos,
‫o realmente lo
‫necesitamos porque para lo orgánico, por
‫lo que falta lo orgánico,
‫pero recuerde que lo orgánico fue un poco especial.
‫Entonces, en este caso, si el producto no es orgánico,
‫entonces producto. orgánico, si es
‫falso,
‫así que recuerde, en realidad es una negrita.
‫Entonces, por ejemplo, tenemos orgánico verdadero
‫aquí, pero falso aquí.
‫¿Okey?
‫Entonces, si es falso, bueno, en ese caso,
‫queremos reemplazar el NOT. ORGÁNICO.
‫Entonces el NO. Marcador de posición ORGÁNICO con simplemente no orgánico.
‫Tan no orgánico porque este es el nombre de
‫la clase que les mostré antes.
‫Entonces,
‫es este.
‫¿Okey?
‫Entonces será reemplazado aquí, ¿de acuerdo?
‫Y nuevamente, en caso de que
‫no sea orgánico, bueno, entonces el nombre
‫de clase NOT_ORGANIC estará aquí y este lote completo no será desplazado.
‫¿Tiene sentido?
‫Entonces, veamos
‫si w ... ah, lo siento,
‫el
‫código real está debajo.
‫Así que intentemos darle más sentido.
‫Entonces, nuevamente, recorremos este objeto de datos que ya está
‫aquí que contiene todos los productos y
‫en cada iteración, reemplazaremos los marcadores de posición
‫en la tarjeta de plantilla con el producto actual
‫que es el elemento, ¿verdad?
‫Y esta función de flecha lo devolverá implícitamente aquí.
‫Entonces es lo mismo que volver aquí, ¿de acuerdo?
‫Pero no es realmente
‫necesario porque en una función de flecha, si no
‫tiene las llaves, este valor aquí se devuelve automáticamente.
‫De acuerdo, en caso de que
‫no lo supieras, solo recordé que nos olvidamos de devolver
‫la salida desde aquí.
‫¿Okey?
‫Entonces, por supuesto, ingresamos la plantilla y el producto, pero
‫luego, por supuesto, tenemos que generar el HTML final.
‫¿Derecha?
‫Y entonces eso se conecta aquí, y
‫finalmente, todo esto aquí reemplazará una
‫matriz, con los cinco HTML finales, cada uno para una
‫de las cinco tarjetas.
‫Entonces, cada uno para uno de los cinco productos, ¿de acuerdo?
‫Ahora sigamos adelante y registremos esto en la
‫consola antes de ponerlo en la página web de descripción general.
‫Entonces cardsHtml solo para asegurarse de que todo funcione aquí.
‫¿Okey?
‫Entonces necesitamos recargar el servidor, no lo olvides.
‫Todo esto funciona igual,
‫pero ahora echemos un vistazo a la consola.
‫Y estoy empezando a ver cosas bonitas aquí.
‫Así que tenemos una
‫matriz y, de hecho, hemos reemplazado las cosas.
‫Entonces tenemos algunos aguacates aquí.
‫Aquí dice FreshAvocados.
‫Tiene los cuatro aguacates por caja,
‫el precio, y sí, todo
‫se ve muy bien.
‫Y de hecho también es una matriz.
‫Entonces tenemos esta primera
‫figura, luego una coma y aquí comienza el siguiente
‫elemento, así que la siguiente figura, ¿de acuerdo?
‫Así que ahora tenemos una matriz de todos estos elementos, pero
‫lo que queremos en realidad no es una
‫matriz, sino una cadena grande que contenga todo este HTML.
‫Entonces, eso es realmente muy simple de lograr.
‫Todo lo que tenemos que hacer es al final de esta matriz,
‫por lo que recordamos que todo esto
‫aquí devuelve esta matriz que vemos aquí abajo, y
‫al final todo lo que hacemos
‫es unirnos con una cadena vacía, por lo que
‫esto se unirá a todos. de estos elementos en una cadena.
‫Y ahora cardsHtml es realmente una cadena.
‫¿Okey?
‫Y ahora tenemos nuestras tarjetas listas y
‫la última pieza del rompecabezas
‫es seguir adelante y reemplazar ese marcador de posición.
‫Así que esto aquí, en realidad copiándolo ahora, así
‫que ahora reemplazando este marcador de
‫posición con el HTML que acabamos de crear.
‫Así que llamémoslo salida aquí y
‫todo lo que tenemos
‫que hacer es
‫tempOverview con solo una cadena que contiene el HTML de descripción general, ¿verdad? reemplácelo y reemplácelo con
‫cardsHtml.
‫¿Bien?
‫Eso es todo.
‫Ahora todo lo
‫que tenemos que hacer es responder realmente con la salida y no con lo que teníamos antes.
‫Está bien, genial.
‫Así que parecía un
‫poco complejo, pero si lo piensas, espero
‫que tenga mucho sentido para ti.
‫Entonces, sigamos adelante y probemos esto ahora y
‫espero no tener errores
‫y algo salió mal, está bien.
‫Entonces, ¿qué es eso?
‫Bien, escribí mal reemplazar.
‫Ese es uno de los errores más comunes que recibo todo el tiempo.
‫Como un pequeño error de ortografía.
‫Recarga y bam, aquí vamos.
‫Así que aquí están nuestras cinco filas.
‫Tan hermoso, hermoso, hermoso.
‫Ahora no se parece mucho
‫al original porque lo que falta es como estos, este orgánico aquí.
‫¿Okey?
‫Así que veamos qué pasa ahí.
‫Además, por alguna razón, no veo
‫la cantidad aquí, pero solo si no es orgánico.
‫Bueno, eso es extraño, así que intentemos investigar lo que está
‫sucediendo aquí.
‫Entonces, el error probablemente esté en algún lugar
‫de esta función replaceTemplate.
‫Pero en realidad, todo parece correcto aquí.
‫Así que también aquí en este reemplazo no orgánico.
‫Entonces, echemos un vistazo a nuestra tarjeta de plantilla y,
‫entonces, veo aquí que cuando hay
‫este
‫NOT_ORGANIC, bueno, en realidad este cuadro completo aquí, por
‫lo que también este H6 ya
‫no será visible.
‫Entonces, algo se
‫ve mal aquí, echemos un vistazo al original
‫solo para inspeccionar el HTML aquí.
‫Así que el detalle de la
‫tarjeta es este y nosotros, sí, tenemos tres detalles de
‫la tarjeta aquí, mientras
‫que en la plantilla, solo tenemos uno, ¿de acuerdo?
‫Así que sigamos adelante y copiemos este.
‫Entonces, en los detalles, puede copiar un elemento y
‫luego, así como así, copiará todo el
‫elemento.
‫Así que así es como se supone que debe verse.
‫Entonces, aquí debería decir orgánico y no cantidad por
‫caja, ¿de acuerdo?
‫Ese es probablemente el próximo.
‫Entonces, arreglemos eso
‫rápidamente.
‫Y aquí,
‫por supuesto, no queremos eso, así que
‫sí, se ve mejor, ciérrelo, reinicie
‫el servidor y revisemos eso nuevamente.
‫Y ahora, bam, aquí vamos.
‫Así que ahora está funcionando y, de hecho, funciona exactamente igual.
‫Hermosa.
‫Eso es, eso es realmente bueno.
‫Sigamos adelante y eliminemos,
‫por ejemplo, los aguacates solo para ver qué pasa.
‫Solo voy a hacer
‫el control, X para cortarlo, recargarlo aquí, y no cambia y
‫eso es, por supuesto, porque recuerde que esto,
‫estos datos en realidad solo se
‫leen
‫al principio cuando
‫iniciamos la aplicación, ¿de acuerdo?
‫Entonces, para que esto surta efecto, efectivamente necesitamos
‫reiniciar la aplicación.
‫Bien, no es gran cosa.
‫Y ahora se ha ido, ¿de acuerdo?
‫Porque ya no está en el
‫archivo JSON que se lee en el
‫momento en que iniciamos la
‫aplicación, ¿de acuerdo?
‫Vamos a
‫ponerlo aquí, guardarlo, reiniciar, abrir este tipo, recargarlo y aquí está de vuelta.
‫Así que ahora realmente funciona de forma dinámica al leer todos
‫estos datos directamente desde el archivo JSON.
‫Entonces este funciona, revisemos los enlaces también
‫en la esquina inferior izquierda.
‫Verá que el ID cambia de cero, uno
‫a, y así sucesivamente, pero si hago
‫clic aquí, bueno, cuando aparece
‫Página no encontrada.
‫Y eso es porque nuestra ruta aún no está preparada para esto.
‫¿Okey?
‫Entonces, hagámoslo
‫en el siguiente video e implementemos la página de detalles del
‫producto para cada uno de estos productos.
‫Entonces, no espere y sigamos adelante.