Curso Intensivo de TypeScript para contenido de CMS sin cabeza

Así que, hola a todos, una vez más. Espero que la mayoría de los asistentes que quieran unirse aquí hoy estén presentes. Permítanme presentarme primero y espero que todos puedan ver mi pantalla, así que les mostraré la segunda diapositiva de la presentación donde describiré lo que vamos a ver hoy. Soy Andrey, trabajo como evangelista de desarrollo para Contentby. Voy a mostrarles un poco de CMS. Quiero enfatizar que hoy no estoy haciendo una presentación de producto, solo estoy tratando de mostrarles cómo podemos trabajar con contenido en TypeScript, y espero que los principios que les mostraré sean aplicables a otros CMS, siempre y cuando tengan herramientas similares, lo cual espero que tengan.

Solía trabajar en el departamento de éxito del cliente durante bastante tiempo, así que creo que tengo experiencia en cómo las personas luchan con lo que sucede cuando su proyecto crece, y cuando sus modelos de contenido cambian. No sé si para todos los desarrolladores, pero diría que para la mayoría de nosotros. Saben que cuando están configurando sus modelos, sus bases de datos, todo al inicio de su proyecto, nunca se mantienen iguales. Siempre terminan cambiando muchas cosas, a veces incluso replataformando todo su proyecto, así que les mostraré cómo los Modelos Atacados Fuertemente pueden ayudarles a hacer ese proceso más fluido. Nunca será perfecto, pero al menos podemos intentar ser optimistas sobre el cambio.

Muy bien, déjenme cambiar aquí. Hoy, se estima que el masterclass durará tres horas. Intentaré ser un poco más rápido que eso. Veremos cómo va. Lo que quiero hacer al principio es que en realidad tenemos un paquete de importación que les mostraré cómo importar en un nuevo proyecto. Luego les mostraré cómo podemos generar el modelo de contenido en código, en TypeScript. Así que, les mostraré el contenido en el CMS. Les mostraré la implementación de Next.js. He preparado un paquete para ustedes que pueden obtener clonando desde GitHub. Generaremos los modelos de TypeScript. Y luego implementaremos una página adicional en la implementación de Next.js que obtendrá contenido, contenido de tipo fuerte. Y resolveremos campos de texto enriquecido en componentes React. Así que, mantendremos los modelos de tipo fuerte con el contenido. Y resolveremos incluso el texto enriquecido para que los especialistas en marketing puedan trabajar en sus páginas de destino sin tu ayuda, y tú puedas mantener tipos fuertes en tu implementación. Al final, también podemos discutir los pipelines de implementación y la verificación de contenido. Esto se basa en nuestra propia experiencia cuando hemos tenido muchos problemas e inconsistencias entre las implementaciones del sitio web y lo que realmente estaba en el CMS. Y cuando el modelo de contenido del CMS cambia, tu sitio web y tu sitio web no están preparados para el cambio. Puede terminar con un error desagradable. Así que puedo contarles en qué estamos trabajando actualmente y cuáles son algunas de las formas en que podemos evitar estos errores. Genial.

Entonces, si esto suena bien, podemos pasar al primer paso del masterclass. Ahora, mi objetivo es hacer esto como un masterclass práctico, por lo que solo necesitan, si tienen Visual Studio y una conexión a Internet, eso es todo lo que realmente necesitan. Pero si solo quieren ver, siéntanse libres de hacerlo. Si quieren usar mi proyecto del contenido, del CMS sin cabeza, eso también es posible. Les compartiré el ID del proyecto, por lo que no tendrán que trabajar con el contenido. Pueden quedarse en su Visual Studio code y trabajar con el contenido allí. No es necesario registrarse. Si no quieren hacerlo, está bien. Si lo desean, también pueden hacerlo. Este es un enlace a un repositorio que pueden clonar. Permítanme ir allí por un segundo. Debería ser público, por lo que deberían poder acceder a él. Lo único que necesitan hacer es hacer un git clone en este repositorio. ¿Quizás alguien pueda ponerlo en el chat, o puedo hacerlo yo? Sí. Oh, gracias. Muchas gracias. Siéntanse libres de clonarlo. Voy a pasar a la implementación en un segundo. Lo único que quería decirles es que este es un sitio basado en Next.js. Next.js es el framework más utilizado para la mayoría de nuestros clientes. Te brinda mucha flexibilidad y muchas características nuevas mientras mantienes la implementación mantenible. Lo usamos en nuestro propio sitio, por lo que también es el paso más fácil para mí. Cuando clonen esto, podemos echarle un vistazo en VS Code. Voy a abrirlo aquí. Lo haré un poco más grande. Avísenme si pueden leerlo bien. De lo contrario, puedo hacerlo aún más grande. Cuando descarguen o clonen el proyecto, hay una cosa importante, y es el paquete de importación del masterclass de contenido. Si no quieren registrarse en el contenido y solo quieren usar Mi Proyecto, está bien. Si quieren registrarse en el contenido, entonces hay una prueba. Si van a content.ai. Aquí pueden obtener un plan de desarrollador gratuito. Hay un enlace a una página de registro. Pueden registrarse para la prueba. Y les mostraré cómo importar contenido en un proyecto en blanco. Si no quieren registrarse, está bien. De todos modos, lo haré yo. Y les compartiré el ID. De hecho, creo que el ID del proyecto está aquí en el readme del repositorio. Esto es lo único que necesitarán para el masterclass en términos del CMS sin cabeza.

Ahora, permíteme cambiar al proyecto correcto. Entonces, cuando te registras para el contenido y creas un nuevo proyecto, verás esto. Esta es una pantalla vacía. No hay contenido aquí. Nada. Es completamente un proyecto en blanco. Y este es el ID que voy a usar. Sí, ves que es 02A. Es el mismo que está aquí. 02A, correcto. Entonces, lo que haga en el proyecto, puedes consumirlo usando el ID del proyecto.

Ahora, lo primero que quiero hacer es importar el paquete de contenido, ¿de acuerdo? Entonces, hay un paquete de contenido llamado content workshop import package.zip. Esto es algo que quiero importar a mi proyecto de contenido. Ahora, para, oops, crear una nueva pestaña. Perfecto. Ahora, para el contenido, hay una cosa llamada administrador de plantillas de contenido que te permite hacer una copia de seguridad de tu proyecto, ¿de acuerdo? Puedes exportar, importar, incluso hay plantillas que puedes usar. Ahora, cuando preparé el proyecto, hice una exportación. Ahora, voy a hacer una importación, ¿de acuerdo? El ID del proyecto de destino es el que te mostré. Ahora, por un momento, voy a ir a la configuración del proyecto y generar la clave de administración. Entonces, si quieres importar en tu propio proyecto, tendrás que hacer lo mismo, ir a la configuración del proyecto, claves de API y habilitar la API de administración. Así que, activaré esto y copiaré la clave. Como la API de administración está disponible en todos los planes, incluso en el plan gratuito para desarrolladores, ¿verdad? Y la pegaré aquí. Y lo último que necesito hacer es arrastrar y soltar el paquete. Así que déjame encontrar la carpeta correcta. Esa será......esta. Aquí, ves que este es el paquete de importación de Content Workshop, así que lo arrastraré aquí. Y quiero publicar las variantes de idioma después de la importación, así que si estás importando en tu proyecto, haz lo mismo, simplemente arrástralo y suéltalo aquí. Ingresa un ID de proyecto, clave de API de administración de contenido, marca esta casilla y prepárate para la importación. Pero no debería haber errores, así que nuestras data inconsistencias son 0, por lo que obtienes un informe de estado agradable. No hay problemas, así que puedo proceder con la importación de data. Esto tomará un segundo, pero una vez que haya terminado, tendremos todo el contenido en el proyecto, ¿de acuerdo? Así que ves que data se importó correctamente, así que cerraré esto. Oops, no quería hacer eso. Déjame ver. Así es el proyecto. Volvamos a cambiar a contenido. Ahora ves que tengo tres elementos de contenido aquí y también debería tener algunos activos aquí, ¿verdad? Así que tenemos tres imágenes, tres elementos de contenido, así que todo está como debería ser. Ahora, si te preguntas cómo vamos a obtener el contenido y ahora tienes el ID del proyecto, ¿verdad? Nuevamente, el ID del proyecto está en el README del repositorio que se compartió, ¿verdad? Esta parte aquí. Ahora lo que puedes hacer es verificar que el contenido llegue al CDN, ¿verdad? Entonces, si vas a deliver.content.ai y pones allí el ID del proyecto, deliver.content.ai slash el ID del proyecto y slash items, deberías obtener un bonito JSON correspondiente a los elementos de contenido que actualmente tenemos en el proyecto, ¿verdad? Probablemente no te diga mucho, pero ves que hay un elemento HawkIce Rock. Hay una página de respuesta de mercado. Así que prácticamente todos los elementos que actualmente tenemos en el sistema. Entonces, esta es la primera cosa que puedes verificar si puedes acceder a esto. Brittany, si estás buscando el administrador de plantillas, intentaré llegar allí. Pero lo que puedes hacer es buscar en Google 'administrador de plantillas de contenido'. Será el primer enlace. De lo contrario, está en kentico.github.io slash content template manager. Ahora, lo que van a ver es esta pantalla. Ahora lo importé en mi proyecto. Para eso vas a necesitar un ID de proyecto y la clave de API de administración. Si no tienes eso, está bien. Puedes usar el mío. El proyecto que ya importé. Así que está perfectamente bien. Perfecto. Y por supuesto, si quieres importar, podemos darte unos momentos. Está bien. Entonces, lo que ves en el CMS son tres elementos aquí. Pero volvamos al Modelo de Contenido. Ahora, quiero mostrarte la estructura del sitio. En el sitio, actualmente tienes tres tipos de contenido. El tipo de contenido raíz, lo llamaría, se llama Página de Aterrizaje. Y la Página de Aterrizaje es algo que está preparado para un editor de contenido, un especialista en marketing, podrías decir. Tiene cada página que se basa en este tipo de contenido. Tendrá un título. Tendrá un contenido y una URL de slug, ¿verdad? URL de slug para que sepamos dónde colocar ese contenido. Título para que nombremos la página de alguna manera. Y el texto enriquecido será un lugar donde los especialistas en marketing pueden crear sus componentes, donde pueden crear el design de la página.

Permíteme mostrarte eso en la Página de Aterrizaje del Especialista en Marketing. Así que este es un contenido que ya está publicado. Está publicado, por lo que podemos verlo en el CDN y ves que el título de esta página es Página de Aterrizaje del Especialista en Marketing. El contenido está compuesto por varios componentes. Así que ves que hay un componente Hero, hay el componente Texto con Imagen, y el CTA Visitar el sitio web de Viajes a Ucrania. Y el slug de URL se llama Página de Aterrizaje del Especialista en Marketing. Así de simple.

Los componentes se basan en otros tipos de contenido que he creado. Ves, actualmente tengo tres componentes que los especialistas en marketing pueden usar en sus páginas de aterrizaje. El más obvio es el CTA. CTA simplemente representa un botón. Tiene un título, subtítulo, texto del botón y un enlace de botón, todos los cuales son obligatorios. ¿Correcto? Queremos que todos los campos estén completos. Otro es un componente Hero. Un componente Hero es simplemente el componente principal de cualquier imagen. Por lo general, contiene una imagen, que es un recurso aquí. Es obligatorio y está limitado a exactamente un recurso. Hay un título, subtítulo, texto de llamada a la acción y enlace de llamada a la acción, que nuevamente es obligatorio y está limitado a un patrón específico, que se define como una URL web. ¿Correcto? Es una implementación de contenido fijo, podría decirse. El último es el texto con imagen, simplemente otro componente donde las personas pueden agregar un título, texto e imagen. Nada más complicado aquí. Vamos a usar todos estos componentes en un momento cuando hagamos la resolución de texto enriquecido. Ahora mismo, podemos usar la página de aterrizaje por defecto.

Y cuando volvamos al CDN, donde te mostré si vas a delivery.content.ai slash el ID del proyecto slash items, ya deberías ver esos elementos aquí. Esta es una página de aterrizaje, HOXIROCK. Hay otra página de aterrizaje, Página de Aterrizaje del Especialista en Marketing, y así sucesivamente. Ahora, si te fijas en estas páginas, hay dos páginas de aterrizaje y un componente CTA. Eso se debe a que los componentes utilizados para la página, en realidad existen en el alcance de esta página. El hero, el texto con imagen están limitados solo a esta página, por eso no aparecen en el repositorio de contenido, mientras que el componente CTA, este se puede reutilizar, por lo que más páginas pueden compartir el mismo elemento de contenido. Eso es todo con el contenido, creo.

Ahora supongo que podemos volver al código. Déjame ver las preguntas. ¿Qué pusimos en la clave de la API de Gestión de Contenido cuando importamos el archivo zip? Sí. Así que si quieres importar tu propio proyecto, puedes ir a Configuración del Proyecto y Claves de API, y hay una clave de API de gestión. Lo que necesitas hacer es activar un interruptor aquí o un interruptor que necesitas activar, y luego vas a ver esta clave aquí que puedes copiar, ¿de acuerdo? Luego usas eso en esa entrada y simplemente continúas con la importación y todo debería ir sin problemas.

Claro, no te preocupes. Ahora volvamos al código. Iré un poco más despacio ya que algunas personas todavía están importando. Así que esto es... Déjame ver si puedo mover este panel de zoom a otro lugar. De acuerdo, genial. Perfecto. Así que déjame cerrar esto. Ahora esta es una implementación de Next.js. Ves que hay algunas cosas básicas como package.json, ts-config, algunas otras cosas. Veo que ni siquiera tenemos un next.js.config aquí. Así que estamos usando la versión predeterminada de la plantilla. No voy a revisar los archivos de configuración. Debería funcionar todo si simplemente haces npm i para instalar los módulos de nodo y haces npm run dev, debería funcionar todo bien. Ahora hice el npm i antes, ya que con otro taller, tomó npm 20 minutos para realmente obtener todos los paquetes. Así que hoy no estaba tomando ningún riesgo. Déjame revisar el .env, sí, esto es 028. Este es el archivo .env que vas a necesitar crear, ¿verdad? Si acabas de clonar el repositorio, vas a necesitar crear un archivo .env y poner allí el ID del proyecto de contenido. Está en el readme, así que puedes ir al readme y copiar y pegar en el archivo .env. Así que debería estar bien. Para clonar en tres segundos, sí, tu conexión es muy buena, diría yo. Estoy en Wi-Fi, así que tal vez ese sea el problema. Perfecto. Entonces, cuando tengas el ID del proyecto de contenido en su lugar y tengamos el contenido allí, el sitio web debería estar funcionando. Déjame revisar. Así que vas a localhost 3000. Y si ves esto, entonces muestra que la página está... El sitio web está funcionando. Así que deberías estar bien si ves esto.

Tomando mucho tiempo para importar. Sí, eso es correcto. Sí. ID del proyecto, API del Gestor de Contenido y el paquete zip. Sí, eso es todo. A veces lleva un poco de tiempo, pero es un proyecto bastante pequeño. Así que no debería tardar mucho. Perfecto. Ahora, si estás viendo lo mismo que yo. Eso es genial. Y eso es todo lo que esperamos en este momento. Todavía no hemos implementado estas páginas. Así que deberíamos obtener un 404 para esta página. Así que esto es lo esperado. Pero deberíamos ver las dos páginas de aterrizaje de marketing y sus nombres con enlaces en la página de índice. Así que echemos un vistazo a cómo funciona eso. Así que en la página de índice, bajo páginas e índice, hay una implementación simple de get static props. Así que en Next.js para cada página, si quieres que se genere estáticamente, necesitas proporcionar get static props y potencialmente get static paths methods. El get static props se ejecuta durante la construcción y se utiliza para obtener datos de una fuente externa. Por supuesto, no solo obtener datos, pero podemos omitir eso por ahora. Ves aquí en get static props, lo que estoy haciendo en realidad es obtener datos de contenido y devolverlo como una propiedad llamada páginas. Luego, en la implementación real de la página, estoy consumiendo las páginas aquí y proporcionando una estructura del sitio web. Así que aquí, es una estructura principal muy sencilla con solo un montón de divs. Está las páginas. Hay un ciclo foreach que convierte las páginas en elementos de lista de elementos simples y enlaces a páginas específicas. Lo que quiero explicar un poco más es el servicio de contenido aquí. Ahora, en get static props, lo que queremos hacer es obtener contenido del headless CMS y renderizarlo o procesarlo de alguna manera. Aquí estamos usando el servicio de contenido, es un singleton para toda la implementación de next.js, por una razón específica. Si abres los servicios y el servicio de contenido, verás la implementación donde realmente creamos el cliente de entrega como se usa en el SDK. Por qué hacemos esto es porque potencialmente puede haber muchas páginas en tu implementación y crear el cliente de entrega en cada página individual sería una tarea tediosa porque puede haber algunas opciones de configuración, ¿verdad? Aquí solo tengo el ID del proyecto y el solucionador de nombres de propiedades pero puedes definir algunas cosas adicionales aquí como tokens de seguridad, cliente HTTP. Puedes definir, si quieres una vista previa, puedes definir tokens de vista previa, muchas otras cosas. Es por eso que hacemos la configuración en un solo lugar en el ámbito de este servicio de contenido y lo usamos en cada página como una instancia singleton. Así que creamos solo una instancia y usamos la misma instancia en todas las páginas. Por eso tenemos tu servicio de contenido dot instancia y el cliente de entrega proviene del SDK. Así que esto ya es el SDK con el que estamos trabajando.

Ahora no estoy usando TypeScript aquí todavía. Esta página se implementa utilizando un simple JavaScript. Así que ves que con la notación de doc, puedes obtener todos los elementos. Luego decimos que solo queremos escribir lending page. Así que ves, tenemos los componentes y tenemos el único lending page en el tipo. Así que estamos diciendo que solo queremos el tipo lending page y de todos los datos que tenemos disponibles en la API y en el CDN, solo estamos solicitando el título y el URL SLOG. Así que estamos limitando la respuesta porque estos son los únicos campos que realmente estamos utilizando en la página, ¿verdad? El parámetro de elemento limita la respuesta para que solo contenga el título y el URL SLOG. Y obviamente hacemos una promesa de eso y esperamos los resultados y luego proporcionamos esos resultados al componente aquí. Entonces, lo que siempre me gusta hacer es tener GetStaticProps en la parte superior y luego hacer el componente debajo. Así que hay una clara cascada, ¿verdad? Desde la parte superior, defines todas las cosas necesarias, luego GetStaticProps donde obtienes los datos y luego haces el componente donde realmente lo renderizas en HTML. Eso es lo que hace la página de índice. Ahora, pero eso es un poco aburrido, así que sigamos adelante, sigamos adelante con los componentes. Así que si miras los componentes, también deberías tener tres componentes aquí, CTA, hero, nav y text-width image. En realidad, corresponden a los componentes que tenemos en el CMS, ¿verdad? Entonces, están utilizando la misma estructura de contenido y cuando miras el CTA, por ejemplo, este es solo un componente simple que contiene o espera el elemento de contenido tal como viene del SDK. Aquí ves que hay dos propiedades de elemento y sistema. Eso es porque cuando obtienes el elemento del CMS, obtienes dos propiedades, elementos y sistema. En sistema, siempre obtienes todos los detalles como un nombre de código, ID, versión de idioma y cuándo se publicó el elemento, etc. Mientras que en los elementos, en realidad obtienes los datos del tipo de contenido. Entonces, eso serían los titulares, subtítulos, activos, todo lo que definimos antes, ¿verdad? Esto es solo una forma abreviada para que no tenga que agregar una línea adicional aquí. Así que podemos obtener elementos y sistema de eso. Ahora, el resto de la implementación es solo un HTML. Esto es en realidad de una plantilla de tailwind que encontré en línea. Así que nada, nada interesante aquí, solo un montón de SVG. Pero aquí en la sección, creo que hay un titular aquí. Así que ves que elements dot headline dot value obtendrá el valor del titular. Hay un valor de subtítulo y hay un enlace de botón. Así que esto corresponde directamente a los componentes CTA que tienen campos de titular, subtítulo, enlace de botón y texto de botón, ¿verdad? Y se exporta como un componente CTA. La misma implementación se encuentra en un héroe y una navegación. Solo tienen una estructura HTML diferente, pero de lo contrario, los campos y la forma en que los mostramos o los representamos es exactamente la misma. Sí, nuevamente, elementos valor del titular, elementos subtítulo, elementos CTA, etc. Así que espero que eso esté claro para todos. Si tienes alguna pregunta, siéntete libre de ponerlas en la ventana de chat. Y déjame volver a la presentación. Así que hicimos eso, clonamos el proyecto. Ahora importamos el nuevo proyecto, obtuvimos el ID del proyecto y la clave de API de gestión de contenido, y ahora el siguiente paso es generar los modelos TypeScript. Ahora, cómo funciona esto es cuando ejecutas un script, en realidad podemos ir a esta página. Esto es el generador de modelos de contenido. Y esta es una herramienta que toma todo el modelo de contenido tal como lo tienes en el CMS. Y hace dos cosas. Primero, genera modelos TypeScript para tu proyecto. Y segundo, genera todos los nombres de código en una estructura de proyecto para que no tengas que usar literales de cadena. Voy a mostrarte eso en la implementación de Next.js en un segundo. Si hiciste el NPMI para el repositorio clonado, ya tienes esta herramienta instalada, así que no tienes que hacer nada. Para nuevos proyectos, tendrías que hacer NPMI content model generator. Y hay dos formas de ejecutar esto. Ya sea usando el script para que NPM lo ejecute. O puedes generar los modelos en código. Si tienes algunas cosas adicionales que deben hacerse alrededor de la generación de modelos, en un proyecto real que realmente tenemos, lo estamos haciendo de esta manera. Porque antes de generar los nuevos modelos, queremos eliminar los antiguos. Sí, siempre queremos mantener los modelos actualizados en nuestro proyecto. Estas son las dos formas. Ahora, si estás en Visual Studio, podemos probar la primera, porque es más fácil. Así que volvamos a VS code. Y sí, esto se está ejecutando. Así que déjame detener esto y borrar la ventana. Y no creo que podamos ejecutar esto porque no lo tengo instalado globalmente. Así que lo que haré es simplemente cambiar a package.json. Y voy a crear aquí un nuevo script bajo scripts que se llama, digamos, generar. Y esto será content generate, o al menos espero que sea correcto, content generate. ¿Es eso correcto? Sí, content generate. Y aquí solo necesitamos proporcionar el ID del proyecto. Eso es lo mismo que tenemos en el archivo .inf. Así que déjame copiar eso. Volver a package.json. Y simplemente ponerlo allí. Ahora, lo guardaré. Y si lo tienes de la misma manera que yo, ahora, ¿qué necesitas hacer? Lo que puedes hacer es simplemente npm run generate. Perfecto. Así que ves que el generador de modelos se inició. Se está conectando al CDN, verificando cuál es la estructura de mi proyecto. Ves, encontró cuatro tipos y encontró un idioma.

Entonces, si estás utilizando el mismo ID de proyecto o importaste el paquete que proporcioné, deberías ver los mismos números exactos. Y ves que esto realmente corresponde al modelo de contenido como te mostré antes. Así que tenemos los componentes CTA, Hero y Text with Image. Y tenemos una página de inicio. Todos fueron generados como archivos TypeScript. Así que podemos echar un vistazo al CTA, por ejemplo, como hablamos de eso antes. Y ves aquí que tiene el tipo exportado llamado componentCTA. Y define que este es un tipo que necesita tener un titular, texto del botón, subtítulo y enlace del botón. Así que en realidad verifica tus tipos o tus tipos de contenido en el CMS, los convierte en propiedades y tipos de TypeScript, y los genera en los archivos. Así que ves, tenemos hero aquí. Tenemos text with image. Y también tenemos algunas palabras en la página de inicio. Estos son tipos, no clases, porque los tipos son fácilmente serializables. Si generas clases, Next.js tendría muchos problemas con la serialización. Es por eso que estos son tipos. Para que funcione perfectamente con todos los frameworks. Así que esto es lo primero que hace. Genera los tipos aquí. Lo segundo que hace, también genera un archivo especial llamado underscore project TS. Y aquí tendrás toda la configuración básica, ya sabes, y los ajustes de tu proyecto. Así que ves que tenemos un idioma que se llama predeterminado. Tiene un nombre de código predeterminado llamado idioma predeterminado del proyecto. Esto es si estás creando un proyecto vacío, esto es lo que tendrás allí. Y también genera la estructura del proyecto y comienza con los tipos de contenido, ves que tiene un componente CTA, así que ese es el tipo de contenido CTA. Y te da el nombre de código del tipo de contenido y también te da los nombres de código de todos los elementos. Esto es muy útil cuando estás utilizando en la implementación, cuando obtienes data, si alguien va al CMS y cambia el nombre de código o de alguna manera trabaja con el tipo de contenido, agrega uno nuevo, elimina uno antiguo, o elimina un elemento, agrega un elemento, lo que sea, tu implementación puede romperse porque si estás utilizando, veamos la página de índice. Así que aquí ves, en realidad estamos utilizando un tipo landing page. Ese es un nombre de código del tipo de contenido. Ahora, si eso cambia, la implementación de esta página se romperá porque ya no obtendrás ningún contenido porque el nombre de código no es correcto. Lo mismo ocurre con los parámetros de los elementos. Ahora, por supuesto, si tu sitio es pequeño, puedes estar atento a estos cambios o puedes prohibir que nadie los cambie, pero luego, por supuesto, si personalmente quieres cambiarlo, imagina cómo sería buscar todas estas ocurrencias donde realmente está landing page. Y si tienes, digamos, como tenemos ahora mismo tres tipos de contenido, ¿verdad? Pero en un proyecto de producción puedes llegar fácilmente a 100 tipos de contenido, entonces va a ser una pesadilla encontrar cualquier cosa, ¿verdad? Por eso el archivo del proyecto ayuda mucho porque ahora no necesitas poner landing page, no necesitas codificarlo allí porque ya lo tienes definido aquí. Así que es fácil también encontrar dónde está cada, también es fácil ir en la otra dirección, como si quieres eliminar un elemento de contenido o quieres eliminar un tipo de contenido, puedes encontrar fácilmente en tu implementación si hay alguna página o componente que realmente utiliza este tipo de contenido, ¿verdad? Así que esto ayuda mucho con eso y ayuda mucho con el mantenimiento. Pero ahora mismo en realidad tenemos todo en la raíz del proyecto, lo cual no es muy agradable. Así que déjame eliminar esto. Son cinco archivos, espero no estar olvidando nada. Sí. También voy a eliminar el script generate de los scripts en package.json porque ya no lo vamos a necesitar. Pero lo que quiero mostrarte es que en la carpeta de scripts, hay un archivo llamado generate models ts-backup. Esto es algo que tomé de uno de nuestros proyectos de producción. Ahora déjame descomentarlo. Ups, de alguna manera mi atajo no está funcionando. Está bien, tal vez primero necesito cambiarle el nombre. Así que déjame renombrarlo a generate-models.ts. Ok, esto funciona. Ahora puedo descomentarlo y guardarlo. Así que te doy un segundo para hacer lo mismo y te explicaré qué hace este script. También vamos a necesitar agregar, creo que vamos a necesitar agregar el script a package.json, pero lo haremos en un momento. Así que si descomentaste esto y lo renombraste, lo que hace es, primero carga el ID del proyecto desde el archivo de entorno. Si tienes el archivo de entorno aquí, que deberías tener, entonces se cargará el ID del proyecto de contenido desde allí, así que ya no tendremos que copiarlo aquí. Y lo que hace, esta es una función auxiliar que se utiliza para resolver algunos casos especiales, así que no hay necesidad de preocuparse por eso, pero lo que hace aquí en runAsync es, primero lee un directorio actual. Entonces, la idea es que queremos que los modelos se generen en una carpeta específica, como models. Y cuando hacemos eso, primero, cuando generamos los modelos, primero queremos borrar esa carpeta para que no tengamos ningún, como si eliminamos el tipo de contenido, también vamos a eliminar el archivo. Así que este script primero elimina todos los archivos en el directorio específico. Luego, cuando eso haya terminado, llama al generador de contenido. Esa es esta parte. Así que esa es la otra forma de llamarlo desde un archivo. Y proporciona el ID del proyecto. Esa es esta parte del archivo de entorno. Y configura cómo queremos que se generen los tipos de contenido. Así que no queremos que se incluya ninguna marca de tiempo porque si incluyes una marca de tiempo, va a mostrar un cambio de código cada vez que hagas la generación. Así que no quieres llenar tus solicitudes de extracción de GitHub. Así que se elimina la marca de tiempo. Y tiene resolutores de elementos, resolutores de archivos, resolutores de tipos de contenido, en caso de que quieras usar un formato diferente al predeterminado. Ves, estoy usando un formato Pascal para la mayoría de estos. Y nuevamente está el método auxiliar que resuelve el caso especial cuando el nombre de código del tipo de contenido comienza con guión bajo, creo. Pero de lo contrario, simplemente agregamos el sufijo model a cada tipo de contenido para que sepamos cómo distinguir los modelos generados de cualquier otra cosa que esté en el proyecto. Muy bien, tenemos el nombre del tipo de contenido más el sufijo model. Y luego esto es solo un fragmento de código que realmente ejecuta la cosa. Así que lo que voy a hacer es crear un script en package.json.

Siéntete libre de hacer lo mismo. Llamémoslo generate models. Y vamos a cambiar primero al directorio models. Y luego creo, déjame verificar, pero creo que vamos a necesitar ejecutar esto con TS. Déjame ver. Así que hoy estoy haciendo trampa por primera vez. Sí, necesitamos ejecutar TS node. Así que TS node. Y como estamos en la carpeta models en este punto, necesitamos retroceder un nivel, ir a scripts y generar bajo nuestro guión models.ts. Así que asegúrate de que el CD models esté allí, porque de lo contrario, si simplemente invocas el generate models, borrará tu repositorio. Correcto. Así que ten cuidado con eso. Hay código que elimina cosas. Vamos a entrar en la carpeta models. Y por supuesto, necesitamos crear esa carpeta de modelos, porque en este momento no tenemos ninguna. Así que voy a crear la carpeta aquí, models. Para que tengamos algo donde podamos ir y luego ejecutar el script. Perfecto. Así que npm run generate models. Espero no haber olvidado nada, pero parece que funciona. Estamos viendo exactamente el mismo mensaje del generador de modelos. Nuevamente encontró cuatro tipos encontró un idioma, cero taxonomías. Y está utilizando tres resolutores personalizados para los nombres de archivo, elementos de contenido y tipos de contenido. Eso es lo esperado. Y cuando miramos los modelos, ves que está el archivo del proyecto que contiene la Estructura del Proyecto Generado. Y tenemos el modelo de componente CTA, modelo de componente hero, modelo de componente Text with Image y modelo de Landing Page. Así que exactamente lo que buscaba. Y cuando miras dentro, se ve prácticamente igual que antes. Pero no hay marca de tiempo, solo los tipos. Y eso es todo lo que necesitamos para nuestro proyecto actualmente. Ahora tenemos los modelos fuertemente tipados para nuestro contenido. Ahora, si cambias algo en el lado del CMS, obviamente necesitas regenerar esto. No es automático. Es algo que debes ejecutar cada vez que cambies algo. Y, por supuesto, si eliminas un tipo de contenido, lo eliminará de aquí. Así que tómate un segundo para hacer eso. Avísame si tienes algún problema o si necesitas que repita algo. Este es el script que debes agregar a package.json. El nombre depende de ti. Yo uso generate models, pero primero debemos ir a la carpeta models y luego debemos ejecutar TS node, que ya debería estar instalado. Creo que lo tenemos aquí en TS node y ejecutar el script generate models.ts. Ahora esto es algo que vamos a necesitar para el código posterior, así que avísame si te funcionó. Brittany, sí. Exactamente, sí. Brittany pregunta si necesitas ejecutar esto solo en caso de que hagas un cambio en el modelo de contenido no cuando estás agregando nuevos elementos de contenido. Por supuesto, estamos hablando de plantillas para contenido, ¿verdad? Así que si solo estás agregando nuevo contenido, está perfectamente bien. Solo necesitas ejecutar esto si estás agregando tipos de contenido, si los estás cambiando, básicamente si estás tocando el modelo de contenido. Si no estás tocando el modelo de contenido y tus especialistas en marketing solo están creando páginas, agregando componentes a las páginas, etc., no necesitas tu intervención aquí. Sí, estará disponible la grabación. No estoy seguro de dónde, pero supongo que el equipo de GitNation te lo hará saber, pero se está grabando. Así que puedes volver a esto. Sí. Muy bien. Así que otros pocos segundos para que todos estemos en el mismo lugar. Así que si tienes el script aquí, simplemente ejecuta generate models, genera los modelos en el directorio de modelos, y seguiremos adelante. Así que si tienes estos cuatro archivos aquí más la estructura del proyecto, entonces estás listo para continuar. Lo primero que podemos hacer es probar los modelos. Puedes volver a index y ajustar la forma en que obtenemos contenido aquí. Permíteme hacer esto más pequeño para ver más código. Así que aquí en git static props, en realidad podemos cambiar esta llamada para que no contenga ninguna cadena iterada. En primer lugar, lo que queremos hacer es decir que para los elementos, podemos definir el tipo fuerte. Así que aquí voy a hacer landing page, el modelo de landing page, por supuesto. Así que estamos definiendo el tipo y simplemente voy a agregar una importación desde top model's landing page model. Obviamente, esta es la forma en la que, ese es el lugar donde lo generamos. Así que ahora estamos obteniendo, vamos a obtener una respuesta de tipo del SDK de contenido. Lo mismo voy a hacer para el tipo de página de inicio. Así que te mostré que tenemos la estructura del proyecto allí. Así que lo que podemos hacer es simplemente comenzar a escribir project model. Va a ofrecer el archivo models/underscore project y automáticamente agregó la importación. Muy bien, esto es lo que quieres importar.

Y queremos hacer tipos de contenido de modelos de proyecto. Y estamos buscando una página de inicio. Ahora, GitHub Copilot ya sabe eso, pero si solo obtienes InteliSense, verás que la página de inicio es lo único que está disponible en este momento. Así que voy a hacer 'landing page' y 'code name'. Estamos buscando un 'code name', ¿verdad? El 'code name' de la página de inicio era lo que estaba allí antes. Y cuando ves lo que eso es, eso es la página de inicio aquí, ¿verdad? Así que esto es un literal de cadena, pero se genera. No está en nuestro código. Así que esa es la segunda cosa que podemos hacer. Y lo último para mejorar esto es ajustar el parámetro de elementos. Aquí vemos que tenemos dos literales de cadena, 'title' y 'URL Slack'. Así que podemos ajustar eso con 'projectModel.contentTypes'. Estamos buscando un tipo de contenido 'landing page', ¿verdad? Porque lo estamos definiendo aquí como un tipo. Eso es la página de inicio. Así que estamos haciendo lo mismo aquí, 'landing page'. Empezamos con eso. Pero en lugar de 'code name', estamos buscando 'elements' y estamos buscando 'title'. Oh, vamos a hacer lo mismo para 'URL Slack'. Así que 'projectModel.contentTypes.landingPage'. 'Elements'. Y estamos buscando 'URL Slack code name'. Y luego podemos simplemente eliminar esto. Así que es un poco más largo, pero siempre puedes, ya sabes, poner esto en una variable especial, en algún lugar en la parte superior de la llamada a la API. Pero lo importante es que no tenemos literales de cadena. Y cuando vuelvas al 'URL Slack code name', por ejemplo, y quieras saber cuántas páginas o cuántos componentes están usando realmente el 'URL Slack' de la página de inicio, solo tienes que hacer clic aquí, hacer clic en 'Go To References'. Y verás, este es el único lugar donde estamos usando 'URL Slack'. Así que si quieres eliminar algo del Modelo de Contenido, puedes verificar fácilmente en la implementación si hay algo que esté usando realmente ese elemento o toda la página, por ejemplo. Si vamos a las referencias, este es el único lugar donde usamos eso, ¿verdad? Así que ya estamos obteniendo cierta seguridad de tipos en nuestras llamadas. Y, por supuesto, estamos usando 'GetStaticProps' y 'Props' aquí para transferir datos entre 'GetStaticProps' y el componente de la página. Pero podemos mejorarlo. Mira eso aquí. Así que tenemos 'pages' en la implementación, tenemos la variable 'pages'. Eso es un 'iContentItem', un elemento muy genérico que usamos cuando no sabemos qué tipo de elemento vamos a obtener. El problema con eso es que si miramos los elementos de la página, esto puede ser, esto es 'iContentItem', así que puede ser cualquier cosa. Y miramos los elementos con un punto. Verás, no obtenemos ninguna lista de intersección. No sabemos. O Visual Studio no sabe qué puede haber o no puede haber allí. Así que podemos mejorarlo. En las props, que es una interfaz definida para transferir datos entre estos dos métodos, podemos decir que las páginas no van a ser un elemento de contenido, sino que van a ser una página de inicio o un modelo de página de inicio, ¿verdad? Porque esto es lo que obtenemos aquí. Modelo de página de inicio, sabemos que no va a haber nada más porque lo estamos limitando con el tipo. Así que sabemos que esto va a ser un modelo de página de inicio. En realidad, va a ser un array de modelos de página de inicio, ¿verdad? Porque tenemos varias páginas aquí. Y cuando miras los elementos de los datos de la página, ya ves en la instancia interna que tenemos un array de modelos de página de inicio porque comenzamos con los tipos aquí arriba. Así que esto es lo único que podemos obtener aquí. Así que en las props, cuando lo cambiamos a modelo de página de inicio y volvemos al componente en un lugar donde realmente usamos el primer elemento, verás que la página ya no es un 'iContentItem', sino que ahora es una página de inicio, y los elementos corresponden al tipo que has definido. Así que ahora sabemos que puede haber contenido, título o URL slug, nada más. Cuando hacemos un punto aquí, no obtenemos un conjunto genérico de cosas que podemos hacer, sino que obtenemos exactamente los tres elementos que hemos definido en el tipo. Así que sabemos que el URL slug está ahí, y otra buena cosa es que si realmente eliminas el URL slug o borras algo más del tipo de contenido que estás usando, digamos que vamos a tener otra propiedad aquí, en el momento en que lo elimines y regeneres los modelos, obtendrás un error aquí, ese segundo. Así que si tu implementación espera algo que no está ahí, obtendrás un error que se generará en tiempo de compilación. Así que no podrás construir el sitio y esperar errores desagradables en producción ahora porque no obtendrás el error de inmediato. De acuerdo, sí. De lo contrario, si solo usas el 'iContentItem', no sabe qué tipo de elementos hay allí. Así que va a pasar por ahí. Pero si estás usando tipos fuertes, eso no va a suceder. Así que voy a volver a ponerlo en 'urls-log'. Y lo mismo ocurre con el título. Tenemos el título ahí y sabemos que es un elemento de texto. Así que eso es otra gran cosa. Sabemos qué tipo podemos esperar aquí. Así que este es un elemento de texto, 'urls-log' es un elemento de URL slug. Así que en realidad se refiere al tipo del elemento específico también. Perfecto. Ahora intentemos ejecutar esto. No hemos cambiado nada funcional. Solo hemos cambiado los literales de cadena por tipos agradables. Así que deberíamos ver la misma implementación exacta que antes. ¿Verdad, así que todavía vemos el titular, vemos los dos elementos aquí y todavía obtenemos el error 404 si hacemos clic en él? Avísame si tienes alguna pregunta.

Te daré un segundo para que llegues aquí. De acuerdo. Brittany, ya no ves los títulos de las páginas. Bien, pero no estás obteniendo errores aquí, ¿verdad? Si no estás obteniendo errores, tal vez quieras verificar el parámetro de elementos, si realmente estás obteniendo los datos. Lo que siempre puedes hacer es hacer un console log aquí y ver qué hay en la página. Como, el primero debería ser suficiente, ¿no? Si guardas eso y actualizas la página, verás aquí qué tipo de datos estás obteniendo. Así que este es uno de los elementos. Así que ves, en elementos, solo estamos obteniendo el título y el URL slug. Estos son los dos valores, y estamos obteniendo los campos del sistema del tipo de contenido. Así que si ves todo aquí, debería estar bien. Estás obteniendo undefined, de acuerdo. En ese caso... En ese caso... Sugeriría verificar estas dos cosas. En los elementos, estás tipificando fuertemente la respuesta, así que eso debería ser el modelo. Y verifica que el tipo sea correcto. Si no tienes el tipo correcto, no obtendrás ningún dato. De acuerdo, así que asegúrate de que estás usando el tipo de contenido y una página de inicio y el nombre de código aquí. De lo contrario, todos estamos trabajando con el mismo proyecto. Así que debería funcionar. ¿Hay alguna forma fácil de llamar automáticamente al script de generación cuando se cambia un modelo? Buena pregunta, no en este momento, porque la entrega, como hay dos APIs, ¿verdad? La API de entrega y la API de gestión de contenido. La cuestión es que no hay una notificación cuando se cambia un modelo de contenido. Así que no podemos vincular esto a un webhook o algo así. La forma en que lo manejamos es que si estás cambiando el modelo de contenido, lo estás llamando manualmente y comprometiendo ese cambio en tu repositorio de GitHub. Si hay algo que podría ser inesperado, entonces llamamos a la generación de modelos en el ámbito de un proceso de implementación donde realmente comparamos si los modelos generados son iguales a los que hemos confirmado en el repositorio de GitHub. De esa manera sabemos, ¿hay un cambio del que nadie nos informó? Y en ese caso, si hay un cambio, la compilación fallará porque hay algo que obviamente no está allí o el sitio web no lo espera. Así que lo estamos resolviendo de esta manera. Así que lo hacemos en cada compilación. Pero sí, en este momento no hay forma de hacerlo automáticamente. Pero en lo que estamos trabajando actualmente es en mejorar la estructura del proyecto. Así que este archivo también contendrá otras cosas como taxonomías, como la descripción de elementos y demás, que no están disponibles en la respuesta de la API de entrega, pero solo están disponibles en el SDK de gestión porque son datos sensibles de tu proyecto. Así que no los tenemos disponibles públicamente, pero si tienes el token de la API de gestión, podrás generar esas cosas también. Así que espero que eso responda tu pregunta. Avísame si el sitio web está funcionando para ti ahora y espero que hayas encontrado cuál era el problema. Perfecto. No lo he encontrado. De acuerdo. Sí, seguiré revisando esta llamada. Debe estar en algún lugar aquí. Apuesto a que está aquí. Y tal vez verifica que el nombre de código de la página de inicio sea realmente una página de inicio porque eso es lo único que hemos cambiado. Perfecto.

Entonces, cuando tengamos esto listo, ahora tienes una idea de cómo trabajar con el contenido de esta manera. Así que podemos pasar a los componentes. Comencemos con el componente CTA. Verás que ahora dependen de ti para proporcionar elementos y sistema, pero nuevamente, los elementos son any, el sistema es any, por lo que esto apenas ayuda, ¿verdad? Lo que podemos hacer es convertir esto en un componente de función de React y definir el tipo que este componente espera aquí. Así que llamémoslo, creo que este es el componente CTA o componente CTA. Creo, sí, es un modelo de componente CTA. Verás que la importación se agregó automáticamente. Ahora realmente lo tenemos con un tipo fuerte. Los elementos ahora tendrán un tipo. Estos elementos ahora son título, texto del botón, subtítulo, enlace del botón. Lo mismo ocurre con el sistema. Ahora el sistema es un icono para los atributos del sistema de un elemento. También obtendremos intellisense para esos. Y eso es lo único que necesitamos hacer realmente para los componentes. Aparte de verificar que el caso de todos los elementos sea correcto. Pero aquí ves, si vamos a elementos, podemos obtener los cuatro campos que tenemos en el tipo de contenido. Así que deberíamos estar listos para continuar. No se debería necesitar ningún cambio adicional aquí. Lo único que a veces sucede es que si no tienes el formato definido, típicamente hay button_underscore_text, y debes cambiarlo a button_text. Pero nuevamente, depende de la configuración del SDK de entrega y del generador de modelos. Así que estos dos deberían estar sincronizados. Ahora tengo ambos configurados en Pascal case. Así que funciona bien. Eso es lo único que necesito hacer aquí. Así que guardemos esto. Haré lo mismo para los componentes hero y nav. Así que los convertiré todos en componentes tipados. Este será el modelo de componente hero. Y agreguemos la importación. Nuevamente, no se debería necesitar ningún cambio adicional aquí. Porque tenemos el texto CTA, subtítulo, título, todo debería funcionar bien. Así que guardemos eso. Volvamos a la navegación. La navegación en realidad no recibe ningún tipo de contenido. Así que dejemos eso para lo último. Solo voy a corregir esto por ahora. El componente de texto con imagen será, nuevamente, fc_text_with_image, componente_text_with_image_model. Y nuevamente, no se debería necesitar ningún cambio adicional aquí. Solo hay una cosa aquí en el texto con imagen y es el nodo DOM porque el nodo DOM no está definido aquí. El nombre de la propiedad no existe en el tipo DOM node. Existe allí. Pero el problema es que el nodo DOM, cuando lo miramos, está compuesto por varias cosas. Elemento de comentario, nodo y otras cosas, y solo estamos buscando el elemento. Entonces, la razón por la que obtenemos este error es porque el nombre no está presente en todos los elementos que están en el tipo de nodo DOM, sino solo en uno específico, por lo que lo que necesitamos hacer es verificar el tipo de nodo, que sea uno, y luego escribir el nodo DOM como elemento. Entonces debería funcionar. Uno realmente proviene de RFC para el nodo DOM. Si estás interesado y miras la definición de get_node_type, hay un enlace para la especificación del DOM. Puedes echar un vistazo. Uno es en realidad para elementos. Esto no es ideal. Supongo que hay una emulación que se verá mejor en el código. Pero esto elimina el error por ahora, así que debería estar bien. Haremos lo mismo aquí como elemento. Atributos className, y eso es todo. Ahora, por supuesto, puedes dejarlo como está. Es solo una advertencia, ¿verdad? No va a romper nuestra implementación. Pero solo para que sepas, necesitamos definir el tipo para que TypeScript sepa, eh, sabemos lo que estamos haciendo. Sabemos que será un elemento. Así que eso es todo lo que necesitamos hacer aquí. Muy bien, esos son los componentes. Lo último aquí es la navegación. Este es el componente de navegación. Este es un poco especial porque no recibe un tipo de contenido especial. Lo que va a renderizar es un menú de encabezado que enumera todos los componentes utilizados en una página. Permíteme mostrarte a qué me refiero. Solo voy a volver a contenido por un segundo y mostrarte una de las páginas de destino. Aquí ves que bajo contenido tenemos tres componentes. Lo que hace el componente de navegación es tomar todos estos componentes y generar un menú superior que dice el Túnel del Amor. Dice el maravilloso país, hermosa naturaleza y echa un vistazo a la naturaleza de Ucrania. Lo va a renderizar como un menú superior y ayudará a tus visitantes a navegar a través de los componentes en la página.

Es solo un simple ancla moviéndose en la página. Hay un signo de almohadilla y el nombre de la sección. Entonces, lo que este componente realmente obtiene o quiere es un array de iContentItem. Obviamente, esto no es lo que nos ayudará porque no tenemos una forma de cómo definir un array en el componente porque sería una longitud ilimitada de propiedades. No queremos eso. Así que podemos solucionarlo definiendo una interfaz llamada props y podemos llamarla data. Va a ser iContentItemArray y luego tener props aquí. Esto nos va a ayudar de tal manera que podemos iterar sobre el array.

Así que solo tenemos una propiedad en el componente llamada data donde proporcionaremos el array, pero aquí el iContentItem realmente significa que es nuevamente algo genérico. ¿Correcto? Entonces, cuando hacemos el ciclo aquí, ves que esta es la única forma en la que se utiliza data. Y estamos haciendo un ciclo for each aquí donde realmente estamos mirando el componente y estamos usando un titular de los elementos de esos componentes. ¿Correcto? La cosa es que si usamos iContentItem nuevamente en elementos, no obtendremos nada aquí porque IntelliSense no tiene idea de qué tipo de componente puede haber allí. Así que funciona prácticamente como cualquier otro. Sí. Esto no es ideal, por supuesto. Sabemos que solo tenemos tres componentes allí. Entonces, lo que podemos hacer en lugar de iContentItem, podemos usar un componente CTA o un componente hero o un componente texto con imagen. Y va a ser un array. Ahora sabemos que puede haber tres componentes y va a ser un array de esos. Entonces no estamos diciendo que habrá un héroe, un CTA y un texto con imagen, solo estamos diciendo en el ámbito de esos componentes, esperamos uno de estos tipos. Y lo que sucederá es que en data, solo obtendremos los elementos que todos estos tipos de contenido comparten. Así que tendremos lo mismo. Cuando miramos aquí en el lugar donde queremos usarlo, creo que es aquí. Cuando hago un punto ahora, ves que la única propiedad que todos estos tipos de contenido comparten es un titular. Así que puedo usar de forma segura el titular aquí porque independientemente del componente que tenga aquí, independientemente del componente que el especialista en marketing coloque en la página, siempre tendrá una propiedad llamada titular. Ves que es el único que todos ellos comparten, de lo contrario, los elementos pueden ser diferentes. Entonces, nuevamente, estamos haciendo esto para obtener una inteligencia aquí y obtener la type safety. Ahora mismo, si pongo aquí elementos subtitulares, inmediatamente obtengo un error porque la propiedad subtitular no existe en el tipo, ya sabes, blah, blah, blah. Entonces, nuevamente, obtendrás un error en el momento de la compilación. Entonces, cuando vuelves a mirar los modelos, ves que el componente CTA tiene un titular. El componente header tiene un titular y el componente X con cada uno nuevamente tiene un titular. Entonces podemos usar esos de forma segura. Y la forma en que esto funciona es que en realidad estamos definiendo el enlace de anclaje y estamos usando el nombre del código del sistema del componente. El nombre del código del sistema es algo que todos los componentes comparten, independientemente del tipo de elemento de contenido, si es un componente, si es un elemento de contenido reutilizable, cualquier cosa, siempre tendrá un nombre de código. Entonces podemos usarlo de forma segura como el ID que usamos en el enlace. También lo usamos en el ciclo, en el ciclo for each porque necesitamos proporcionar una clave. Entonces vamos a usar el nombre del código. Potencialmente también podríamos usar un ID. Entonces, el ID es otra cosa que podemos usar fácilmente, pero no importa. El nombre del código es un poco más corto. Así que esa es la única razón por la que lo estoy usando aquí, pero también puedes usar un ID. Y eso concluye este componente. Ahora este también está fuertemente tipado. Perfecto. Así que volvamos a index. Avísame si tienes alguna pregunta o si voy demasiado rápido, avísame. Puedo explicar algo más. De lo contrario, lo que quería mostrarte es que ahora tenemos data de navegación, que no es muy agradable. Pero es la página de índice donde no tenemos ningún data de página de aterrizaje, ¿verdad? Solo vamos a mantenerlo así. Si no te gusta el data ahora siempre puedes hacer que data sea una propiedad opcional. Podemos hacer eso ahora que tenemos el tipo fuerte aquí podemos decir que data es opcional. Y si data es opcional, entonces este es un componente obligatorio en ese punto. Cuando hacemos data opcional, si lo dejamos como está entonces aquí obtendríamos un error indefinido. Si data fuera indefinido obviamente no podemos usar la función math en indefinido. Entonces esto sería entonces obligatorio no que funcionaría con Null pero sí. Perfecto, así que creo que hemos pasado por generar tipos con modelos para obtener contenido en Next.js y ya hicimos los componentes ajustados para usar modelos fuertes para el contenido. Así que espero. Buen trabajo para todos los que lo hicieron y lo siguiente que vamos a hacer es crear un archivo de código para la página de aterrizaje. Creo que estamos avanzando bastante rápido así que eso es bueno. Así que podemos pasar algún tiempo aquí. Así que creemos un archivo de código para la página de aterrizaje. Ahora las páginas de aterrizaje, tienen URL Slack. Permíteme colapsar esto y mirar el modelo de página de aterrizaje. En el modelo de página de aterrizaje, hay tres propiedades, contenido, título y URL Slack. Entonces vamos a usar el URL Slack para definir en qué URL se mostrará la página de aterrizaje. Así que voy a crear un nuevo archivo en la carpeta pages y llamarlo Slack entre corchetes. En Next.js, los corchetes definen que esto es una variable en la ruta. Aparte de la página real que puedo copiar de index, también necesitaremos proporcionar una función especial llamada get static paths, donde definimos en qué rutas Next.js debe renderizar una página. Así que voy a eliminar esto y crear otra función aquí llamada get static paths. Es static paths. Nuevamente, va a ser asíncrono, así que vamos a necesitar obtener data y necesitamos importar get static paths de Next. Ahora va a quejarse porque no es asignable, void no es asignable. Sí, necesitamos devolver algunas cosas. Pero lo veremos en un segundo. Lo importante es que necesitamos devolver aquí que hay páginas. Obtén las partes que queremos pre-renderizar basado en las páginas de aterrizaje.

Wow, GitHub Copilot realmente hace una mejor explicación que yo. Sí, eso es exactamente lo que queremos hacer, obtener todas las rutas que queremos pre-renderizar basadas en el contenido que tenemos en el CMS sin cabeza. En el CMS, ahora tenemos dos elementos de contenido basados en el tipo de contenido de la página de aterrizaje, ¿verdad? Entonces, lo que haremos, bien, páginas de aterrizaje, vamos a usar lo mismo que tenemos aquí. Sí, vamos a usar el SDK. Así que páginas de aterrizaje, digamos rutas de páginas de aterrizaje para que sea más claro. Vamos a esperar a que la API nos dé los elementos. Vamos a usar el modelo de página de aterrizaje nuevamente porque ya lo tenemos en el sistema. Tenemos el modelo allí. Luego, por supuesto, necesitaremos definir un tipo porque desafortunadamente no podemos inferirlo del tipo, pero necesitamos definirlo como modelo de proyecto, tipos de contenido, página de aterrizaje y nombre de código. Y aquí en realidad solo estamos buscando rutas. Next.js no nos permitirá transferir más datos entre las rutas y las props. Solo nos permitirá transferir el slack. Al final, solo es la variable que está en el nombre de archivo del archivo de código. Entonces vamos a hacer el parámetro de elementos nuevamente. Realmente no necesitamos hacer esto, pero si omitimos el parámetro de elementos, obtendríamos todos los datos del modelo de página de aterrizaje. Cuando usamos CDN, sé que realmente no nos importa el tiempo de compilación para sitios pequeños. Es solo lo correcto limitar la llamada a la API solo a lo que realmente queremos. Y ves, Copilot ya lo sabe. Así que estamos usando modelo de proyecto, tipos de contenido, página de aterrizaje. Este es el tipo y estamos buscando elementos y URL Slack. No obtuvo el formato correcto, pero estamos buscando URL Slack porque estamos tratando de darle a Next.js las rutas donde habrá páginas. Así que solo estamos buscando URL Slack y el nombre de código. Ahora no vamos a limitarlo de ninguna manera. Así que vamos a hacer una promesa. Y por supuesto, para GoodStaticPaths, necesitamos devolver props o rutas. Ahora no estoy 100% seguro. Déjame revisar. Siempre copio las implementaciones de un proyecto a otro. Así que no sé si es props paths o paths props. Bien. Así que en realidad es paths al revés. Así que necesitamos devolver paths. Y en las rutas en realidad estamos tratando de devolver un objeto que contiene params y slug, digamos que esto será página de aterrizaje, ¿verdad? Esta es la estructura o un objeto que necesitamos devolver. Ahora, el slug corresponde al nombre de la variable. Así que ves, en mi caso, es slog entre corchetes. Así que necesitamos devolver esto. Ahora obviamente necesitamos devolverlo para todas las páginas. Correcto, así que lo que podemos hacer es en las rutas, vamos a tomar las rutas de las páginas de aterrizaje y los elementos de datos, porque esto es solo la respuesta de la API, ¿verdad? En datos, obtenemos otras cosas como paginación, elementos vinculados, etc. Ahora mismo no necesitamos ninguna de esas cosas. Así que vamos a usar items aquí. Obtendrás la matriz del modelo de página de aterrizaje. Esos son los datos sin procesar que nos interesan. Así que estamos buscando items, pero queremos mapear esos elementos. Llamémoslo página de aterrizaje. Queremos mapearlo a esta estructura porque necesitamos devolver los params y el slug. Así que lo que vamos a hacer es devolver aquí una estructura. Vamos a poner sus params. Vamos a decir que el slug es el valor de URL slug de la página de aterrizaje. Nuevamente, una buena suposición de Copilot. Esta es el objeto que necesitamos devolver. Y allí, en la propiedad params de ese objeto en la variable slug, queremos obtener los datos de la página de aterrizaje actual. Por eso estamos obteniendo los elementos, el URL slug y estamos buscando un valor. Así que aquí, vamos a obtener el mercado, la página de financiación, el rock de Hawkeyes, etc. Y solo necesitamos devolver eso a next. Ahora se queja de un corchete adicional. Creo que ahora está correcto. Un corchete adicional aquí. Esto debería estar bien. Y también hay otra cosa. Y eso es aquí. Fallback false. Esto es en caso de que estemos usando algunas características adicionales de next. Creo que esto es para ISR. Tengo que verificar la documentación, pero simplemente establece fallback false de forma predeterminada y estarás bien. Perfecto, esto es get static paths. Eso es todo lo que necesitamos hacer aquí. Simplemente obtener las rutas del CMS y dárselas a Next.js. Así que le estamos dando a Next.js los URL slugs de esas dos páginas de aterrizaje, la página de aterrizaje de los comercializadores y la página de aterrizaje de Hawkeyes rock. Esa es la única magia aquí. Avísame si tienes alguna pregunta hasta ahora.

Entiendo que esto puede ser mucho de asimilar si eres nuevo en Next.js. Entonces, nuevamente, aquí simplemente proporcionamos las rutas donde queremos una página. Nada más, nada menos. Sin datos, nada, solo las rutas aquí. Y la siguiente función que se llama getStaticProps, tenemos las props aquí pero las eliminé. Así que por ahora simplemente vamos a deshacerlo y obtener getStaticProps. Lo que vamos a obtener es... El slug que obtuvimos del método anterior. ¿Correcto? Entonces, digamos const slug. Vamos a obtener eso de params slug a string. O al menos eso espero. Lo veremos en un segundo. Entonces, los params en realidad nos dan todos los parámetros de la ruta. Ahora mismo en la ruta, solo puede haber slug, nada más. Pero si estuviéramos en una carpeta anidada, potencialmente podríamos obtener varias variables. En este caso, solo tenemos slug. Entonces, slug a string en realidad nos dará una cadena bonita con la ruta. Será lo mismo que proporcionamos aquí. Y en función de ese slug, necesitamos ajustar la implementación. Esta llamada, y en realidad está copiada de la página de índice. Permíteme eliminar esto porque ahora será diferente.

Entonces, aquí, en getStaticPaths, se nos pide que proporcionemos todas las rutas. En getStaticProps, solo necesitamos proporcionar datos para una página específica. Por lo tanto, getStaticProps se llamará dos veces en nuestro caso. Si has configurado esto en las publicaciones de blog y tienes 100 publicaciones de blog, esta función getStaticProps se llamará 100 veces. Para cada slug, esta página o esta función se llamará. Aquí, vamos a hacer una solicitud de API para elementos del modelo de página de inicio. Nuevamente, queremos una respuesta con un tipo fuertemente tipado y obviamente solo queremos el tipo de página de inicio. Esta parte se mantiene igual que antes. Solo queremos modelos de página de inicio y luego podemos omitir el parámetro de elementos aquí porque vamos a usar todos los datos, todos los elementos, ¿verdad? Entonces podemos omitir eso. Sin embargo, definitivamente vamos a necesitar un filtro de contenido o un filtro de igualdad, lo siento, un filtro de igualdad. Donde, lo que necesitamos hacer aquí es decir que elements.URLSlack es igual al Slack. Aquí estamos filtrando los datos. Estamos diciendo que el Slack que obtuvimos aquí, solo estamos buscando un elemento que tenga URLSlack establecido en ese valor. Y también podemos limitar esto a un solo elemento. ¿Verdad? Entonces, nuevamente, estamos buscando una página que tenga URLSlack establecido en el Slack que obtuvimos de las rutas. Obviamente, esto es una cadena literal, lo cual no nos gusta. Lo que podemos hacer aquí es mejorarlo con elements., déjame cambiar eso. Y podemos usar nuevamente el modelo de proyecto, los tipos de contenido, elementos de página de inicio. Y estamos buscando URLSlack codename. Entonces podemos deshacernos de la cadena literal para el elemento. Potencialmente también podríamos deshacernos de este. En proyectos reales, en realidad tenemos un método util que tiene este prefijo. Entonces lo tenemos todo en un solo lugar. Por el bien de este ejemplo, lo dejaré como está, pero solo para que sepas que puedes eliminar esto en general. Entonces, lo que está sucediendo aquí es que vamos a obtener un Slack de la página que queremos renderizar. Y aquí, estamos diciendo que queremos un modelo de página de inicio que tenga el elemento URLSlack establecido en el URLSlack que obtuvimos. ¿Verdad? Entonces, estamos usando un filtro de igualdad para eso. Y con el parámetro de límite, eso es realmente agradable de tener. Pero esto en realidad es muy bueno para la legibilidad del código. Porque cuando ves un parámetro de límite uno, está claro a primera vista que en este código, solo estamos obteniendo un solo elemento. Es muy bueno si estás viendo el código de tus colegas. Esta es su forma de decir, eh, esto es solo para un elemento. Esto nos va a dar los datos de la página. Y vamos a devolver props. Permíteme eliminar esto. Y vamos a devolver aquí, props, y ¿tenemos props definidos en algún lugar? No. Cuando no tenemos ningún props definido, lo que realmente podemos hacer es definir, simplemente voy a mantener los props aquí. Quería decir que puedes definir un modelo de página de inicio aquí, porque sabemos que esto es lo único que obtendremos aquí. La cosa es que no estoy seguro de si podemos hacerlo de esta manera. Permíteme ver. Entonces, si hicieras los props y devolvieras los elementos de datos de la página, solo un elemento, probablemente podría funcionar. Entonces, si haces un modelo de página de inicio aquí, sí, podemos hacerlo de esta manera. Entonces, en GetStaticProps, lo que necesitamos devolver es solo un modelo con un tipo fuertemente tipado. En este caso, es un modelo de página de inicio. En props, definimos, devolvemos el resultado de esta llamada a la API, que es la página de elementos de datos cero, es el primer elemento, el único elemento de la llamada a la API. Y en la implementación de la página, sabemos que solo estamos buscando el modelo de página de inicio. Entonces obtendremos la página con un tipo fuertemente tipado desde el principio. Muy bien, avísame si hay alguna pregunta. Y nuevamente, esto puede ser un poco más difícil de entender para aquellos de ustedes que aún no entienden Next. Entonces, solo para resumir, en getStaticPaths estamos proporcionando todas las rutas donde hay una página en Next.js. En getStaticProps, obtenemos un Slack de Next y obtenemos los datos de esa página, y los proporcionamos como una prop. Y cambié getStaticProps para que solo acepte el modelo de página de inicio. Y en la implementación final, esto no será una página de inicio. Llamémoslo una página de destino. Aquí, esperamos que el componente tenga este tipo de datos, este tipo de datos, el modelo de página de inicio. Y luego aquí podemos decir page.elements.title, por ejemplo. Oh, necesito hacer un valor, export default landing page. Muy bien, cuando lo tenemos así, solo estamos renderizando el título de la página y exportando la página, todo debería estar bien. Así que intentemos ejecutar esto y ver qué tipo de problemas obtenemos. Entonces, si actualizo esta página, ahora cuando hago clic en una de estas páginas, deberían implementarse. Así que echemos un vistazo a market como página de destino y vemos market como página de destino. Perfecto. ¿Puedes mostrar la función getStaticPaths nuevamente? Claro, sí. Entonces, en getStaticPaths, obtenemos todas las rutas del CMS. Obtenemos el SDK. Esto es lo mismo que hicimos antes. Obtenemos todos los modelos de página de inicio. Entonces, estamos tipando fuertemente la respuesta en un modelo de página de inicio. Obtenemos el tipo de página de inicio y limitamos los elementos solo a URL Slack.

Como dije, esto es algo que puedes omitir, ¿verdad? No necesariamente tiene que estar ahí. Solo estamos ahorrando ancho de banda. Y luego devolvemos las rutas donde hacemos un ciclo de 40 sobre los datos devueltos y devolvemos la estructura como Next.js lo desea. Entonces, esto es un objeto que tiene una propiedad llamada params. Y en ella se esperan todos los parámetros para la ruta. En este caso, solo tenemos un parámetro que es el Slack en la ruta. Estamos directamente debajo de las páginas y la única variable en el nombre del archivo es Slack. Por eso solo tenemos el Slack aquí. Donde proporcionamos el URL Slack como lo tenemos definido en el CMS. De esta manera, el comercializador tiene control total sobre dónde se renderizará esa página. Si en el URL Slack en el CMS ponen su hello world, se renderizará en /hello-world. Ahora estamos obteniendo los datos dinámicamente aquí. Así que espero que tenga sentido.

Claro. De nada. Y avísame si te funciona. Si estás viendo esta página que muestra market como página de destino y la otra que dice hawks I rock, entonces esto es perfecto.

¿Puedes mostrar la función get static props? Sí. Entonces en get static props, ¿qué tipo de error estás obteniendo? Probablemente obtendrás el mismo. Entonces en get static props, ¿qué tipo de error estás obteniendo? En get static props, obtenemos el URL flag en params. Y lo que estamos haciendo es nuevamente, utilizar el SDK para obtener el modelo de la página de destino. Esto es lo mismo de siempre. Y luego estamos usando el filtro equals donde estamos diciendo elementos. Esto es importante. La razón por la que esto es elementos. es porque puedes filtrar los elementos de contenido en función de sus valores de sistema también. Entonces puedes hacer un system.codename, por ejemplo, o system.language. Aquí queremos elementos. Entonces valores de elementos. Así que estamos comparando elements.theelement.codename. Así que estoy usando el modelo de proyecto, contenido-dives landing page. Y a partir de esa página de destino, estoy usando element.URLSlag, y es su codename. Y por supuesto, el segundo parámetro es con lo que quieres compararlo. Así que quiero compararlo con el URLSlag que obtuvimos de next. Y eso es solo un parámetro de límite y una promesa y lo devolvemos en el ámbito de props. Y por supuesto, necesitas hacer lo mismo que hice para definir el modelo de la página de destino para el resultado de GetStaticProps y para un data importado del componente funcional de React. Así se definen las props. Correcto, así que esto en realidad, las props de retorno aquí corresponden a la página de destino donde dices data igual a los elementos de la página data cero. Los elementos de la página data cero. Pero por supuesto, el data no está aquí porque tendríamos que ir un nivel más abajo. Así que esto es lo que realmente hacemos aquí en el retorno, ¿sí? Piper perfecto, sí, perfecto, genial. Ahora que funciona, podemos comenzar a trabajar en la estructura HTML. Así que cuando volvemos a ver la presentación, hicimos esto. Así que hicimos get static parts, get static props. A continuación, vamos a resolver los campos de texto enriquecido en componentes de React. Ahora tenemos los tres componentes o cuatro componentes listos para modelos de tipo fuertemente y obtenemos el contenido en un campo de texto enriquecido. ¿Cómo llamamos a un campo de texto enriquecido? Cuando miramos la página de destino del comercializador, hay un contenido que tiene un campo de texto enriquecido. Y ves que el componente, hay un componente aquí que tiene algunos data y alguna imagen. Hay un botón CTA que tiene un titular y un texto de botón, etc. Ahora esta es una versión publicada de la página por lo que no podemos cambiarla directamente. Pero cuando hago clic en crear nueva versión, ves que puedo entrar, abrir el componente y cambiar las cosas aquí. Lo que también puedo hacer es crear un nuevo componente. Y decir que, hey, estos son solo los tipos de contenido aceptados, son CTA, héroe o texto con imagen. Así que potencialmente puedo agregar uno nuevo aquí. Sí, podemos ver eso más tarde. Pero solo para que sepamos que estos son los componentes que el comercializador agrega al texto enriquecido. Así que espero que eso esté claro, así que volvamos aquí. Ahora, lo que quiero hacer aquí primero es copiar la navegación. Y como mencioné antes, la navegación espera en los data, espera todos los elementos, todos los componentes que están en el campo de texto enriquecido, ¿verdad? Entonces, en el caso de la página de destino del comercializador, serán los tres componentes, el héroe, el texto con imagen, y en la parte inferior hay un botón CTA. Entonces, lo que voy a hacer aquí es usar los elementos de la página y buscar contenido. Ese es el elemento de texto enriquecido. Ya ves aquí, ya dice elemento de texto enriquecido. Así que lo usaré. Y voy a hacer linked items. Linked items es un array especial. Ves, es un array de elementos de contenido que contiene todos los elementos vinculados que se utilizan en el campo de texto enriquecido. Así que cuando miras esto, tenemos los tres componentes. Todos estos componentes, todos sus data estarán disponibles en la propiedad de elementos vinculados como un array. Ahora hay un problema aquí. ¿Cuál es el problema? No es asignable. Sí, ahora vemos que esto es un array de elementos de contenido, ¿verdad? Pero en el componente de navegación, dijimos que solo estamos buscando el modelo de componente CTA, el modelo de componente héroe o el modelo de componente texto con imagen. Así que me está diciendo, eh, el array de elementos de contenido no se puede asignar al tipo que definiste, ¿verdad? Entonces lo que necesitamos hacer es decir aquí que esto va a ser el modelo de componente CTA o el modelo de componente héroe o el modelo de componente texto con imagen. Ah, y por supuesto, es un array, ¿verdad? Así que estamos diciendo que este array que solía ser un elemento de contenido, lo vamos a reasignar o convertir a un tipo que contiene el modelo de componente CTA, el modelo de componente héroe o el modelo de componente texto con imagen y es un array. Por supuesto, no es ideal definirlo de esta manera porque si queremos agregar un componente o eliminar uno de la lista, tendremos que hacerlo en varios lugares. Si usamos el NAV en varias páginas, tendríamos que hacer lo mismo en todas ellas. Entonces lo que puedes hacer es definir una interfaz global que defina todos estos y la usarías en este lugar, en esta página, la usarías en el componente NAV y en otros lugares. Pero aquí, por el bien de este ejemplo, dejémoslo aquí. Así que estamos volviendo a escribir los elementos vinculados. El array de todos los componentes utilizados en el campo de contenido. Lo estamos convirtiendo en un modelo de componente CTA, un modelo de componente héroe y un modelo de componente de texto con imagen porque sabemos que no puede haber nada más. Solo se permiten estos tres en ese campo. Y está bien, creo que para la navegación, guardémoslo. Y echemos un vistazo al sitio web.

Así que ahora mismo estoy en Hawke's Eye rock y hay dos componentes que se representaron como la navegación en el lado derecho. Ves, hay un Check Out, The Great Nature y Hawke's Eye rock. Así que esto es el CTA. Esto es el texto con imagen. Correcto, parece que este funciona. Así que puedes verificar rápidamente que esto funciona para YouTube. Debería funcionar. Y lo último que necesitas hacer es la resolución del texto enriquecido. Así que voy a crear aquí otro diff para que tengamos una estructura un poco más agradable. Sí, aún no es ideal, pero mejorará cuando resolvamos el texto enriquecido. Ahora, para resolver los elementos de texto enriquecido en componentes React, vamos a necesitar un paquete adicional. Y el paquete se llama componentes de contenido React. Aquí hay un enlace a él. Déjame abrir el repositorio de GitHub. Ya está instalado en el proyecto por lo que no tienes que instalar nada. Ya está ahí en tus proyectos. Lo que quiero mostrarte es que este es un elemento. Este paquete, como un elemento que se llama el elemento de texto enriquecido. Y lo único que necesitas hacer es proporcionar los elementos a él y definir los resolutores. Ahora, voy a explicarte eso en un segundo para nuestro caso de uso específico. Pero solo para que sepas que puedes usar este elemento para resolver elementos vinculados, que son nuestros componentes. Los llamamos de la misma manera, elementos vinculados o componentes es lo mismo. Pero también podemos resolver imágenes. Si quieres usar imágenes con la imagen siguiente u otra biblioteca, puedes resolver imágenes aquí. También puedes resolver enlaces y también los nodos sin procesar. Entonces, dependiendo del nivel de abstracción con el que te sientas cómodo, puedes resolver los componentes de nivel superior como elementos vinculados, pero también puedes resolver nodos específicos sin procesar en la respuesta. Nos vamos a ceñir a resolver elementos vinculados porque es una tarea bastante fácil. Y eso es lo que necesitamos, ¿verdad? Queremos obtener los data y queremos usar los componentes correctos para los data. Así que en lugar del valor del título de los elementos de la página, voy a poner aquí un elemento de texto enriquecido. Si no obtienes automáticamente los elementos de texto enriquecido, debería agregar la importación. Pero si no lo obtienes, necesitarás esta línea. Importa el elemento de texto enriquecido de at simply 207 org slash componentes de contenido React. La razón por la que esto no está bajo Kenty Co es porque aún no está en una versión de producción. Así que por eso está fuera. Pero pronto llegará a una versión de producción, con suerte. Este es el elemento de texto enriquecido. Así que necesitamos importarlo de allí. Y como te mostré, lo único que necesitas hacer es proporcionar el elemento de texto enriquecido. Que en nuestro caso son los elementos de la página y el contenido. No se necesita ningún valor adicional, nada más. Solo haz page dot elements dot content. Así que este es el elemento de texto enriquecido. Y lo siguiente que necesitas hacer es proporcionar los resolutores. Ahora, los resolutores son un objeto que contiene todos los resolutores que puedas imaginar. Ahora, en los resolutores, esto en realidad va a ser un objeto. Solo voy a poner aquí dos corchetes para que sepa lo que estamos haciendo. Y voy a poner aquí, resuelve, sí. Así que ves, cuando empiezo a escribir las propiedades del objeto, voy a obtener cuatro opciones aquí. Así que resuelve nodos sin procesar, resuelve imagen, resuelve enlace o resuelve elemento vinculado. Así que eso es lo que realmente quiero hacer. Resolver elemento vinculado. Y vamos a obtener el elemento vinculado. Eso es cada componente, ¿verdad? Así que este método se llamará tres veces para esta página específica. Y voy a obtener el elemento vinculado en esa función para poder renderizar cualquier cosa que quiera aquí, ¿sí? Puedo hacer return diff hello world. Definitivamente puedo hacer eso. Sí, ya estoy resolviendo eso. Cierremos, oh, ¿qué hay de mal aquí? Sí, falta un corchete aquí. Sí. Así que si quiero hacerlo de esta manera, estoy resolviendo todos los elementos vinculados, por lo que cada componente que tengo en la página de destino se resolverá como diff hello world. Si guardo esto y voy a la página, verás que hay dos hello worlds aquí. No es ideal, pero ¿ves que esta función se llama dos veces? Me da el elemento vinculado y decido usar hello world como resultado. Y a partir de aquí, solo falta un pequeño paso para implementar todo, ¿verdad? Así que lo único que tenemos que hacer aquí es hacer un switch elemento vinculado. Y obviamente queremos cambiarlo según el tipo del elemento vinculado, ¿verdad? Tenemos tres tipos. Tenemos los componentes CTA, héroe y texto con imagen. Así que queremos distinguirlos por tipo. Y por supuesto, podríamos poner aquí componente CTA y devolver el componente correcto. Modelo de componente CTA, por supuesto esto no es un elemento vinculado pero el CTA realmente espera el modelo de componente CTA.

De acuerdo. Sí, no hay problema. No hay problema. Entonces, ¿qué necesitas que explique? ¿El elemento de texto enriquecido? Sí, señor. Gracias. Claro, no te preocupes. Así que lo que tenemos aquí en el borrador de la página de inicio es que vamos a obtener la página, ¿verdad? La página que es la página de inicio como la tenemos definida en el CMS. Y el campo de contenido aquí, déjame crear una nueva versión de eso. Entonces aquí el contenido es un campo de texto enriquecido, ¿verdad? No tenemos que agregar solo componentes aquí. También podemos poner aquí texto. Por eso se llama texto enriquecido, ¿verdad? Y aquí tenemos cuatro componentes. Así que tenemos los cuatro componentes en el código, pero lo que queremos es mapear todos estos data a esos componentes específicos de React que tenemos en el código. Eso es lo que hacemos usando el elemento de texto enriquecido. Entonces, en la página, tenemos el elemento de contenido y en el elemento de texto enriquecido, eso es un elemento especial que viene de una biblioteca externa. Mira la importación aquí. Viene de simplemente 0.007 org contenido React componentes. Y lo que hace es que necesitas proporcionar los elementos de texto enriquecido. Así que esos son los elementos de la página de contenido. Y este campo en realidad no contiene solo el HTML, sino que también contiene los elementos vinculados. Mira aquí, esos son los elementos vinculados. Esos son los componentes en un array. Entonces, lo que hace este elemento es que itera sobre esos elementos y te permite resolverlos. Entonces, en el resolvedor, defines el resolvedor de elementos vinculados, que es solo una función que te permite convertir los data del componente en cualquier cosa que quieras. Y aquí, en realidad estoy cambiando el tipo de sistema de los elementos vinculados porque según el tipo del componente, puedo decidir cuál es el componente React en mi proyecto. Entonces, aquí, si el tipo de sistema corresponde a un componente CTA, en ese caso, voy a devolver un objeto CTA o un componente CTA que tengo aquí, ¿verdad? Esto viene del componente CTA que tengo en los componentes. Y el mismo principio se aplica a todos los demás componentes. En caso de que sea un componente héroe, voy a devolver este componente React. Si es un componente de texto con imagen, en el contenido, voy a devolver el texto con el componente de imagen que es el componente React aquí. Ahora, por supuesto, preparé todos estos componentes para recibir el elemento vinculado. Entonces, reciben los data como modelo principal. Lo que puedes ver aquí en el componente CTA, por ejemplo, es que este es un componente funcional que recibe el modelo del componente CTA. Sí, entonces este es el elemento vinculado. Este es el elemento vinculado que estoy obteniendo aquí. Es el data del componente. Y simplemente lo proporciono al componente. Y en este punto, no me importa lo que el componente haga con él. Solo espero que renderice algo. Y lo que hace es renderizar la página basada en el contenido y usar los componentes correctos donde deberían estar. Sí, aquí tenemos la imagen del héroe. Aquí está el texto de la imagen. Y aquí, por supuesto, esto no se ve muy bien porque lo cambié. Pero hay dos CTAs en la parte inferior, uno para la naturaleza de Ucrania y otro para TypeScript Congress. Espero que tenga sentido.

Sí, señor, gracias. Claro, no te preocupes. ¿Está bien, entonces, es hoy? Estoy un poco nervioso, en realidad. Para ser honesto contigo, sé un poco de programación, está bien. Así que uno de mis amigos me habló de este react. Así que estoy un poco familiarizado con JavaScript o puedes decir CSS. Así que hice este curso de HTML, hace como cuatro años. Luego de eso, fui a Dubái y trabajé en logística allí. Así que ahora estoy volviendo a esto y justo ahora me envió este enlace para unirme a esta reunión. Así que en realidad estoy un poco pero lo que pasa es que no lo he practicado antes. Así que para mí, entenderlo es un poco difícil. Por eso preguntaba si puedes enviarme tu curso o algún tipo de enlace desde donde pueda ver y pueda aprender y practicarlo. Así será más fácil para mí.

Sí, sí. No te preocupes, no te preocupes en absoluto. Todos hemos estado ahí. No soy un experto en react. Sí. Así que no te preocupes por eso. No estés nervioso. Está perfectamente bien. Hay un repositorio de GitHub que contiene el código de esta masterclass. Le preguntaré a los chicos de Git Nation si pueden compartir también la versión implementada de la masterclass. Sí, de las masterclass. Así que este es el repositorio del inicio. Y también compartiré el repositorio del proyecto implementado. Sí. Así que puedes echarle un vistazo.

De acuerdo. De acuerdo. ¿Cuántos programas estás usando? ¿A qué te refieres? ¿Cuántos programas hay realmente para que podamos programar algo en React? Correcto. Entonces, ¿qué ves aquí? Solo estoy usando Visual Studio Code. Estoy usando un montón de paquetes de NPM. Esas son dependencias que se definen aquí. Sí. Lo único que necesitas hacer es simplemente NPM I y tener Visual Studio Code. No hay nada especial que esté usando, realmente, para ser honesto. De acuerdo. Eso está bien para mí. No apago mi audio. En realidad, la audiencia se está enojando conmigo. No te preocupes. Todos fuimos principiantes alguna vez. Siempre me gusta decir que soy un principiante en todo momento, porque cuando cambias a un framework diferente o una tecnología diferente, siempre eres un principiante. Y siempre me siento culpable cuando busco en Google cosas como cómo convertir un valor de JavaScript a TypeScript o lo que sea. Así que sí. No te preocupes. No te preocupes en absoluto. Gracias. Muchas gracias. Muchas gracias. Perfecto. ¿Hay alguna otra pregunta? Avísame si el sitio web funciona para ti. Espero que sí. Funciona bien aquí. De acuerdo. Es genial saberlo. Gracias. Espero que todos estén experimentando lo mismo. Si no es así, la masterclass se está grabando para que siempre puedas volver y ver si hay algún problema. Pero espero que todo esté bien. Creo que eso es todo desde la perspectiva del código. También quería mencionar en cuanto a TypeScript y los modelos de contenido y la seguridad en términos de la implementación, sé que también hablamos de eso antes. Esto no es algo que quiera implementar ahora mismo porque depende en gran medida de dónde realices tu proceso de compilación y cuál es la plataforma en la que vas a alojar tu proyecto. Pero lo que estamos implementando actualmente en nuestros propios proyectos, se basa en la publicación de blog que escribí hace un tiempo que explica cómo puedes proteger tu implementación de cambios inesperados en el contenido. Porque viste que aquí, era solo un script que nos permitía generar todos los modelos en el proyecto. Y esto es, cuando confirmas esto, estos modelos en tu repositorio de GitHub, o siempre digo GitHub, pero puede ser cualquier repositorio de GitHub, sabes que la implementación está funcionando con todos los modelos confirmados. La idea es que si hay cambios inesperados, el sitio web puede dejar de funcionar o no. Y en esta publicación de blog, voy a compartir el enlace después, hay un script, este es el que, que te permite generar todos los modelos en el ámbito de tu proceso de compilación.

Entonces, cuando realizas un cambio, un cambio de código, una solicitud de extracción, lo que sea, y en ese ámbito, cuando estás compilando la página, la compilación realmente tiene algunas condiciones antes de comenzar o después de comenzar, ¿verdad? Nosotros, por ejemplo, hacemos... Primero, hacemos una compilación y luego iniciamos las unit pruebas, iniciamos pruebas de playwright para pruebas de extremo a extremo, y así sucesivamente. Y en el ámbito de ese proceso, también estamos verificando, también estamos generando todos los modelos de los proyectos conectados. Y estamos verificando si todos los modelos son iguales a los que ya están confirmados en el proyecto. Esto siempre te mostrará si hay cambios inesperados. Si alguien va al proyecto y elimina un campo, elimina un elemento, elimina un tipo de contenido, o viceversa, si agregan un tipo de contenido, si agregan un elemento, siempre habrá un cambio en los modelos generados. La generación de modelos es una operación bastante económica, por lo que puedes permitirte hacerlo durante cada compilación.

Entonces, este script, lo que hace realmente es crear una carpeta. Genera los modelos. Así que este es el mismo script que te mostré antes. Y cuando se generan los modelos, en realidad utiliza un paquete dir-compare que compara los tipos en la carpeta del generador con los que ya usas en tu proyecto que están confirmados en tu repositorio Git. Y si todo está bien, entonces devuelve un código de estado exitoso. Si hay alguna diferencia, entonces te mostrará cuáles son las diferencias, y devolverá un proceso, un proceso que sale uno. Por lo tanto, es un código de falla, por lo que la compilación eventualmente fallará, pero la compilación fallida sigue siendo una mejor opción que tener el sitio web sin funcionar, ¿verdad? Entonces, esto es algo que realmente te ayuda más porque algunos de los problemas de los que te hablé se pueden descubrir durante la compilación, porque la compilación simplemente no se realizará si estás usando un elemento faltante o algo así. Pero en caso de que el modelo de contenido cambie sin que lo sepas, este script lo descubrirá, y detendrá la compilación y sabrás exactamente, en el momento de la compilación, qué está sucediendo.

Entonces te muestra algo como esto. Así que hay dos diferencias. En la carpeta de modelos, hay diferencias en la estructura del proyecto, y el bloque con imagen en realidad tiene un conjunto diferente de campos. Así que esto es solo una cosa que quería mostrarte que no se detiene allí con la escritura de tipos de todo el contenido que tienes, sino que puede ir más allá. Puedes definir de manera muy estricta que los modelos de contenido que están en tu repositorio son la fuente de verdad, y si hay algún cambio entre el modelo de contenido y los archivos generados en tu base de código, entonces falla la compilación y te permite resolver la situación y react en base a esa información. Así que eso es solo un último detalle de información que quería mostrarte. Voy a compartir el enlace a la publicación de blog contigo para que puedas echar un vistazo. Y eso es todo de mi parte por hoy. Así que somos un poco más rápidos de lo que esperaba, lo cual siempre es bueno. Es un grupo agradable y experimentado aquí.