Curso intensivo de TypeScript para contenido de un CMS sin cabeza

¡Vamos allá! Comencemos con el masterclass. En primer lugar, déjenme saludarlos a todos aquí. Es un gran placer para mí estar aquí para mostrarles algunas cosas relacionadas con TypeScript. Me uno a ustedes desde la República Checa, Brno, donde tenemos nuestra sede. Soy Andrey, soy un evangelista de desarrollo para contenido. Somos un proveedor de CMS sin cabeza. Estoy seguro de que conocen la empresa. Les mostraré un poco del CMS mientras trabajamos en el contenido y mientras avanzamos en el masterclass, pero hoy no es una presentación de producto, quiero mostrarles cómo trabajar con contenido en TypeScript y componentes React, ¿de acuerdo?

Entonces, en primer lugar, un poco de organización. El masterclass está siendo grabado, por lo que pueden volver a cualquier momento si se pierden algo o si se atascan en algo. Trataré de ir despacio. Pero siempre pueden volver o simplemente preguntarme directamente si algo no está claro.

Lo que vamos a hacer, y, oh, espero que vean mi pantalla. Sí, creo que sí. Entonces, ¿cuál es la línea de tiempo del masterclass de hoy? Sé que está diseñado para tres horas. Siempre trato de ser un poco más rápido porque es realmente difícil mantener la concentración durante tanto tiempo. Lo que vamos a hacer en este masterclass es primero importar contenido en un nuevo proyecto. Entonces, vamos a crear un nuevo proyecto en el CMS. Vamos a importar algo de contenido allí. Si están registrados en el contenido, genial. Les mostraré cómo importarlo. Si no están registrados y no quieren registrarse, también está bien. Les daré el ID del proyecto de mi proyecto y pueden trabajar con el contenido de esa manera de todos modos. Entonces, no tienen que registrarse en ningún lugar. Probablemente vamos a trabajar un poco en el contenido. Pero no tanto. Pasaremos la mayor parte del tiempo en código. Así que eso debería estar bien. Luego les mostraré la implementación en Next.js. Voy a usar Next.js porque, para ser honesto, es el que más me gusta actualmente. Tenemos todo nuestro sitio web construido con Next.js. Realmente me gusta su flexibilidad y facilidad de uso. Así que voy a usar Next.js, pero los principios se pueden aplicar en cualquier framework si están usando Vue.js o si están usando Gatsby. Gatsby depende, pero creo que ahora también admiten TypeScript, así que debería estar bien. Les mostraré cómo se ve el código. Les mostraré cómo se ve el sitio web. Y luego pasaremos a generar modelos TypeScript a partir de tipos de contenido. Les mostraré cómo llevar el contenido del CMS sin cabeza a su proyecto y generar no solo los modelos TypeScript, sino también la estructura del proyecto. Eso significa nombres de código y todas las demás cosas. Luego les mostraré cómo obtener el contenido en Next.js. Eso es bastante sencillo ya que tenemos un SDK en TypeScript. Y luego les mostraré cómo resolver textos enriquecidos en componentes React. De eso se trata todo. Vincular los componentes React a sus respectivos modelos de contenido. Así es fácil mantener todo. Y al final, hay un pequeño espacio para la discusión sobre cómo implementar canalizaciones de implementación de manera que los cambios de contenido en el lado del CMS sin cabeza no causen errores en producción. Hemos implementado una forma de verificar el modelo de contenido con cada compilación para que puedan evitar los errores de producción en términos de contenido faltante o contenido mal configurado al mínimo. Así que eso es sobre la línea de tiempo del masterclass. Sí. Y sí, comencemos.

Primero, vamos a importar las cosas en el CMS. Luego vamos a abrir Visual Studio Code y nos quedaremos allí durante el resto del masterclass. Entonces, en primer lugar, voy a hacer eso también. El primer paso para ustedes es clonar el repositorio del proyecto. Ahora, no quiero dejarlos en blanco donde estarían trabajando por su cuenta. Prefiero ir más despacio y dejar que trabajen en las tareas mientras hablo. Así que siéntanse libres de hacer los pasos mientras los hago. Y si se atascan en algo, entonces avísenme directamente en la ventana de chat o simplemente únanse al masterclass y díganme. Repetiré cualquier cosa si algo no está claro, ¿de acuerdo?

Entonces, en primer lugar, vamos a clonar el repositorio del proyecto. Espero que tengan el enlace, pero si no lo tienen, lo voy a poner en la ventana de chat, ¿de acuerdo? Así que allá vamos. Este es el repositorio. Es una plantilla de JS agradable que tiene algunas páginas. Así que voy a hacer lo mismo. En realidad, voy a cambiar a Visual Studio. ¿Todavía pueden ver mi pantalla? ¿Pueden ver Visual Studio ahora? Perfecto. Sí. Porque perdí el borde verde, ¿verdad, perfecto? Así que voy a poner aquí una nueva terminal, y simplemente voy a clonar el URL con git. Y vamos, CD Workshop. Ahora, en primer lugar, voy a hacer npm i. Así que voy a usar NPMI para instalar las dependencias, porque tengo una mala experiencia de uno de los talleres anteriores donde NPMI tardó 25 minutos.

Entonces, prefiero hacer esto cuando estoy hablando de otras cosas. Así que siéntete libre de hacerlo también cuando lo clones. Es un proyecto bastante pequeño, así que no debería llevar mucho tiempo. Y deberíamos tener, bien, voy a abrir la carpeta, y deberíamos estar, deberíamos estar aquí.

Ahora, lo importante aquí en este proyecto es este paquete, content-workshop-import-package.zip. Cómo funciona esto es, en el CMS, si tienes un proyecto, siempre puedes hacer una exportación del proyecto que crea un paquete zip, luego puedes tomar ese paquete e importarlo en otro proyecto fácilmente a través del administrador de plantillas de contenido. Así que esto no es solo una herramienta de respaldo, también es cuando quieres hacer o quieres dar un proyecto real a un colega o cualquier otra cosa.

Ahora, esto está en kentico.github.io.com slash content template manager. Voy a, nuevamente, poner esto en el chat para todos. Y lo que realmente queremos hacer ahora es importarlo en el CMS. Ahora, si no te has registrado en el CMS, puedes ir a content.ai, hacer clic en para desarrolladores, hacer clic en obtener el plan de desarrollador gratuito, y esto te llevará a una página de registro. Si haces clic en obtener el plan de desarrollador gratuito, obtendrás una prueba gratuita. Luego, después de la prueba, puedes cambiar a un plan de desarrollador gratuito, que es gratuito para siempre y es bastante generoso. Pero nuevamente, si no quieres unirte, si no quieres crear un nuevo proyecto, está bien también. Solo compartiré contigo el ID del proyecto y puedes usar el mío. Eso está bien. Así que voy a iniciar sesión, y eso me lleva directamente al proyecto. Si creas un nuevo proyecto en el CMS, si te registras, esto es lo que verás inicialmente. Este es un proyecto vacío, no hay nada aquí. Este es el coche de inicio, pero en el contenido y los activos, está un poco solitario aquí, no hay contenido aquí, lo cual está bien si estás viendo lo mismo. Lo que nos interesa ahora son las configuraciones del proyecto y queremos ir a las claves de API. Ahora, este es el ID del proyecto, también encontrarás el mismo ID en el archivo readme del repositorio de GitHub. Así que este es el ID aquí. Ese es el ID de mi proyecto donde voy a importar los data ahora. Para la importación, vas a necesitar un ID de proyecto y también vas a necesitar la clave de API de administración. Así que están en la misma pantalla aquí. Y en el administrador de plantillas de contenido solo voy a ir y hacer clic en importar y pegar el ID del proyecto aquí. Hay un campo para el ID del proyecto de destino así que eso es lo primero y la clave de API de administración de contenido está en la tarjeta derecha aquí. Solo voy a copiar eso. Voy a hacer clic aquí en publicar idioma después de la importación. Eso es porque de lo contrario, todos los elementos de contenido permanecerían en sus borradores. Así que quiero que se publiquen y se entreguen al CDN. Ahora hablé del paquete de contenido así que esto es justo aquí. Queremos tomar eso y arrastrarlo y soltarlo en el administrador de plantillas. Así que déjame poner esto aquí y lo voy a arrastrar y soltar aquí y luego podemos hacer clic en preparar para importar y luego importar data. Son solo unos pocos elementos de contenido. Sí, esta sección no es reversible, continuar. Son solo unos pocos elementos de contenido, un montón de imágenes, nada demasiado grande. Debería estar listo en solo un par de segundos. Y cuando se importe, deberías ver el contenido en el repositorio. Así que mira, debería haber tres elementos. Tenemos tres elementos aquí, dos páginas de destino, un componente y también deberíamos ver algunos activos aquí. Así que tres imágenes. Así que te doy un segundo para llegar aquí. Avísame si alguien lo logró hacer funcionar así. De lo contrario, siempre puedes usar el ID del proyecto que está en el repositorio de GitHub. ¿Puedo enviar también las claves de API? Sí, esta es la clave de API. Como si vas aquí, el ID del proyecto es la clave de API. No quiero darte la clave de API de administración porque eso te permitiría eliminar todos los data de mi proyecto o hacer cosas divertidas. Así que no voy a compartir eso contigo pero puedes crear tu propio proyecto y lo tendrás aquí mismo. Entonces David dice, lo tengo pero el paso del flujo de trabajo está en borrador. Si todo está en borrador, es porque en la importación, okay volvamos aquí. Hay una casilla de verificación que probablemente no marcaste pero eso está perfectamente bien. Lo único que necesitas hacer es hacer clic aquí y hacer una publicación en todos estos elementos. Así que selecciona todo y aquí a través de los tres puntos solo haz clic en publicar y confírmalo y todo se publicará en un segundo. Si el contenido solo está en borrador, no estará disponible para nuestra entrega de contenido. Si está en un paso publicado, entonces tendremos todo en el CDN, así que deberías tener todo publicado. ¿Dónde podemos importar el archivo? Bien, el archivo de importación está en el repositorio de GitHub. Así que este es el repositorio y ahí está. Este es el paquete zip que debes importar. Está justo en la raíz del repositorio. Bien, ahora que tienes el contenido en su lugar y tienes el ID del proyecto, lo primero que puedes verificar es si los data realmente están llegando. Para eso, puedes ir a deliver.content.ai, poner allí el ID del proyecto y hacer /items. Nuevamente, voy a poner esto en el chat para que no tengas que escribirlo. Así que si haces clic en esto, deberías ver el JSON que proviene del CDN, ¿verdad? Estos son nuestros elementos de contenido. Esta es la página de destino. Tenemos otro aquí y tenemos el componente de elemento de contenido sin título ETA. Entonces, si cambias el ID del proyecto por el que tienes deberías ver el mismo contenido aquí. Así que nuevamente, te daré unos momentos para verificar eso. ¿Cuál es el complemento que formatea ese JSON? Oh, esto es solo Firefox.

No estoy usando ningún complemento. Si solo estás utilizando un JSON sin procesar está perfectamente bien. Si estás viendo algo como esto, está bien. Es solo un JSON. Así que si estás viendo los elementos aquí, ese es un primer paso logrado y un primer paso hacia la victoria.

En primer lugar, quería revisar el modelo de contenido aquí. Es muy simple y consta de la página de destino. Y esto es algo que proporcionamos a los especialistas en marketing, a los editores que trabajan en el sitio web. La página de destino es generalmente cualquier tipo de página en la que deseen colocar componentes que deseen crear sin nuestra ayuda como desarrolladores. Entonces, en esta página, hay algunos elementos. El primero es el título. Es el nombre de la página. Luego hay un elemento de texto enriquecido llamado contenido que básicamente es para cualquier componente y un texto que los editores desean tener en la página. Y hay una URL de Slack. Entonces eso nos indica a los desarrolladores en qué ruta se debe generar la página.

Ahora, cuando miras la configuración del texto enriquecido, ves que solo permitimos texto y componentes. Entonces, si quieres, también puedes permitir a los especialistas en marketing usar imágenes, tablas y potencialmente otras cosas. En los componentes, también permito solo componentes específicos aquí, ¿verdad? Entonces, estoy limitando lo que los editores pueden hacer con la página de destino. Solo pueden usar estos tres componentes. Y cuando vemos cómo se ven los componentes, veamos el CTA, por ejemplo, hay un titular, que es texto y es obligatorio. Hay un subtitular, nuevamente, texto obligatorio. Hay un botón, lo mismo, y hay un enlace, que también es un texto, pero este está limitado a un patrón específico. Supongo que los editores solo pueden poner aquí el texto que coincida con un patrón específico. En este caso, es una URL web, ¿verdad? Entonces, en el enlace del botón, solo puede haber URL, nada más. Si quieres, también puedes usar cosas como un patrón personalizado donde simplemente defines una expresión regular y proporcionas un mensaje de validation agradable. También es posible, pero te muestro esto solo para que sepas que puedes limitar los límites de lo que los editores pueden hacer a un mínimo necesario porque cuanto más libertad tienen los editores, más tareas de mantenimiento para nosotros. Así que ten cuidado con eso. E idealiza todo como debería ser. Ahora eso es lo que era el CTA. También tenemos otros dos, héroe y texto con imagen. Echemos un vistazo a este. Es muy similar. Es un texto de titular, nuevamente, un texto enriquecido aquí. Y aquí ves que solo tenemos texto disponible. Entonces ni siquiera componentes. Entonces, los editores no pueden agregar más componentes a este texto. Solo pueden agregar texto como titulares y texto en negrita y esas cosas, pero de lo contrario no podrán hacer nada más. Y pueden agregar una imagen aquí, pero solo un recurso. Entonces solo una imagen. ¿De acuerdo? Entonces, en la implementación, sabemos que siempre habrá como máximo una imagen en este campo. Así que revisemos algunas de las preguntas.

¿Puedes mostrar la página en la que debemos importar el archivo zip? Claro, sí, ese es el repositorio de GitHub. Entonces, si vas a esta URL, está en el chat. Puedo enviarlo nuevamente en el chat. Oh no, en realidad queríamos el... Bien. Entonces este es el paquete zip y este es el Administrador de Plantillas e importar. ¿De acuerdo? Entonces podemos soltar el archivo aquí y proporcionar el ID del proyecto y la clave de API de administración de contenido. Perfecto. Ahí está el CMS. Ahora también quería mostrarte el contenido. Así que estamos hablando de lo mismo. Esta es la página de prueba de mercado. Esa es la primera página que se construyó en el tipo de contenido de la página de destino. Y ves que en este momento, esta página está publicada. Así que no puedo hacer cambios. Puedo crear una nueva versión si quiero hacer cambios. Pero lo que quería mostrarte es el contenido aquí principalmente. Este es el campo de texto enriquecido que actualmente contiene tres componentes. Héroe, texto con imagen y un CTA. Y lo que sucede es que puedes ver qué hay en los componentes, pero no puedes cambiar nada. Ya está publicado. Si quieres cambiar algo y crear una nueva versión, entonces puedes comenzar a cambiar esto. Pero lo que quería mostrarte es que algunos de los componentes realmente están en el ámbito de esta página de destino. Los verás sin ninguna información adicional. Entonces eso significa que están en el ámbito de esta página. Pero este componente, este CTA, para un CTA, típicamente quieres tener un botón CTA en múltiples páginas. No tienes tantos botones CTA como páginas de destino. Entonces, este componente se reutiliza en múltiples páginas.

Es por eso que vemos aquí que está publicado. Es un componente de tipo CTA. Y también lo veremos en el repositorio aquí. Así que ese es este, este componente. Pero por lo demás, los otros componentes solo existen en el ámbito de esta página. Entonces ves, hay un titular, texto y una imagen. Explicaré lo que esto significa en términos de implementación en un momento. Pero solo para que sepas que algunos de los componentes se reutilizan y algunos de ellos son específicos.

Ahora que conocemos la estructura de contenido, creo que podemos pasar al código. A menos que haya algunas preguntas. Tengo el archivo pero no tengo la página de importación en content-ai. Oh, lo encontré. De acuerdo, perfecto. Así que cambiemos a Visual Studio. Y veamos qué está sucediendo aquí.

Ahora, en primer lugar, vamos a necesitar crear un nuevo archivo. Ese archivo será .env. Y necesitamos copiar el ID del proyecto allí. Así que voy a abrir el archivo readme y simplemente copiarlo. Eso está en la línea 14. Y el ID debería coincidir, espero. Así que vamos a ponerlo allí y guardar el archivo. Y puedes ver el archivo. Y cuando lo tengamos, podemos echar un vistazo a la implementación real. Entonces, en la carpeta pages, típicamente en pages, tienes el código para cada página que está en el sitio. Ves que solo hay una página llamada index.tsx. Vamos a agregar una página más tarde. Pero por ahora, esta página solo enumera todas las páginas de destino. Así que cuando miras esto, estamos obteniendo los data de alguna manera y estamos enumerando las páginas aquí.

Ahora, probablemente solo voy a ejecutar el sitio. Para mostrarte cómo se ve. Así que npm run dev. Ejecutaremos el sitio en localhost 4000. Así que echemos un vistazo. Así que vemos que hay una página simple y tiene dos páginas de destino aquí que solo muestran sus títulos. Y contiene el enlace a los slugs de URL de esas páginas. Ahora, cuando hago clic en eso, obtengo un 404 porque la página no está implementada. Deberías obtener el mismo comportamiento. Si puedes ejecutar el sitio y ver las páginas de destino aquí, eso significa que has configurado todo correctamente y estás consumiendo el contenido. Avísame si esto también funciona para ti. Si solo haces npm run dev desde el código, creo que funciona. Y lo único que necesitas hacer es guardar el archivo .env e instalar todos los paquetes.

Claro, sí. Entonces, el archivo de entorno contiene solo una cosa que se copia del README. Sí, en el README en la línea 14. Solo cópialo al archivo de variables de entorno y deberías estar bien. Sí, perfecto. Veo pulgares arriba, genial. Entonces, si esto funciona, es perfecto. Así que lo detendré por ahora y explicaré el resto de la implementación.

Entonces, hay una página de índice que toma data del CMS. Ahora, lo que ves aquí es un servicio de contenido. En realidad, tenemos el servicio de contenido en esta implementación porque podrías crear el cliente de entrega que proviene del SDK, pero la inicialización del cliente de entrega viene con una configuración. Cuando miramos el servicio de contenido, ves aquí que toma un ID de proyecto, toma un resolutor de nombres de propiedad, y potencialmente puede tomar muchas otras configuraciones. Entonces, esto es algo que no quieres hacer en cada página. Esto es algo que quieres tener globalmente para todo el proyecto. Es por eso que hay un servicio para eso que al final es solo un singleton que envuelve las opciones de configuración para el cliente de entrega, y el cliente de entrega es esencialmente el SDK. Pero lo bueno es que no necesitas aprender todos los detalles específicos de cómo obtener data del contenido. Solo tienes que saber que el cliente de entrega está ahí y usaremos el servicio de contenido para obtener su instancia en todas partes. Y hoy en día, en realidad podemos vivir con solo algunas cosas simples. Eso son los elementos de punto, que tomarán cualquier tipo de elemento de contenido del CMS. Y aquí podemos definir los detalles del elemento de contenido. Entonces, estamos diciendo que solo estamos interesados en las páginas de destino que es el nombre de código del tipo de contenido y solo queremos el título y los campos de URL de la página de destino, ¿verdad? Entonces, esto es una especie de proyección que está diseñada para ahorrar ancho de banda y permitirnos obtener todos los data en los que estamos interesados. Y como resultado, cuando esperamos esto obtenemos todos los datos de la página. Proporcionamos eso desde getStaticProps al componente React. Y el componente React tiene una función de mapeo simple. Lo llamo for each porque esencialmente es un for each que solo muestra un elemento de lista para cada página de destino. Y aquí, esto es una construcción de enlace. Solo ponemos la barra diagonal y el slug de URL y el nombre de la página, ¿verdad? Entonces, esta cosa simple solo toma data del contenido lo proporciona al componente React y renderiza todos los elementos en una lista desordenada simple. Así que espero que esto esté claro. No estoy seguro si tenemos expertos en index.js aquí. Por eso estoy tratando de ir un poco más despacio. No es que sea un experto en index.js, pero estoy tratando. Perfecto. Entonces, si esto está claro, pasemos a los componentes. Ahora mismo en la página, no tenemos ningún componente utilizado, pero los vamos a necesitar en un momento. Así que pasemos rápidamente por ellos. Te mostré los tipos de contenido para los componentes. Había un CTA. Había un héroe. Había alguna navegación o la navegación no estaba allí, pero había un texto con imagen. Entonces, estos componentes, en realidad corresponden uno a uno a los tipos de contenido en el CMS, ¿verdad? El código HTML aquí no es realmente importante. Lo descargué de alguna plantilla de tail end, así que nada interesante o importante aquí. Lo importante es que cada componente toma elementos y sistema. Estos dos campos, los elementos son los elementos que definimos en el tipo de contenido. El sistema son los datos del sistema, como IE, nombre de código, la hora en que se publicó, otras cosas que esencialmente están ahí para cada elemento de contenido. Y aquí en la parte inferior del componente, ves, estamos usando algunos de estos. Principalmente el valor del titular, el valor del subtitular. Estamos usando el enlace del botón. Estamos usando el texto del botón y así sucesivamente para construir el componente. Pero ahora mismo no usamos ningún typescript aquí. Esto es un JavaScript plano, aunque se llama TSX. Si tienes un error aquí, se activará en runtime. No te dará ningún error antes de eso. Y lo mismo se aplica a todos los demás componentes. Si miras el componente del héroe, es muy simple, muy similar. Tiene elementos y sistema. Y nuevamente, algunos elementos que se representan aquí en el ámbito de sus etiquetas HTML. Ese es el componente del héroe. Veremos la implementación HTML en un momento cuando lo implementemos en la resolución de texto enriquecido. Pero por ahora, es suficiente saber que hay algunos componentes aquí que están implementados que podemos usar. Aquí hay una navegación que también se llenará con los data más adelante. Que vamos a usar en la parte superior de la página. De lo contrario, no hay nada más realmente. Solo hay un servicio para obtener contenido y la simple página index.tsx. Así que volvamos aquí y verifiquemos los pasos. Como importar contenido en un nuevo proyecto. Creo que ya lo hicimos. Obtenemos el ID del proyecto y obtenemos la clave de la API de administración de contenido e importamos todo. Y ahora el siguiente paso es generar los modelos TypeScript. Ahora, lo que hace esto es que hay una herramienta automática que puedes incluir en tu proyecto que tomará todas las definiciones de tipos de contenido y generará modelos de tipo fuertemente tipados para tu contenido. Lo que necesitarás para eso es instalar el generador de modelos de contenido. Ahora, si estás utilizando el esquema base no tienes que hacer eso porque ya está implementado o ya está instalado en el proyecto.

Pero solo para que lo sepas, esto es de código abierto y está disponible en GitHub. Y si lo obtienes y PMI hoy entonces ya lo tienes en tu proyecto. Así que lo único que necesitarás es agregar un script a package.json que realmente generará los modelos. Ahora también encontrarás... Permíteme compartir el enlace en el chat. También encontrarás el script para generar los modelos aquí en el ReadMe del repositorio junto con toda la configuración. Pero vamos a usar el más sencillo para generar todo. Jonathan pregunta si voy a compartir las diapositivas. Sí, definitivamente. Puedo compartir las diapositivas. No te preocupes.

Así que agreguemos el script en el package.json y veamos cómo podemos generar los modelos. Así que saltemos aquí a package.json y nuevamente, encontrarás el script en el ReadMe de este repositorio. Acabo de compartir el enlace en el chat. Así que tomé el más simple de aquí. Así que lo pondré en el archivo package.json. Así que lo llamaremos generate y llamaremos content-generate y el ID del proyecto. Esto lo copiaré de lo que tengo en el archivo de variables de entorno. Así que esto, simplemente lo copiaré aquí y deberíamos estar listos. Cuando tengamos el script en el package.json como esto, simplemente lo ejecutaré, npm run generate y siéntete libre de hacer lo mismo. Deberías ver prácticamente la misma salida. Así que veo que el generador de modelos se inició. Comenzó a generar los modelos de entrega. Encontró cuatro tipos de contenido, que corresponden directamente a los tipos de contenido que tengo en el CMS. Encontró un idioma y generó estos cuatro archivos. Así que componentes, cta, ts, hero, ts, text with image ts y landing page ts. Sí. Cuando quieras ejecutar el comando cada vez que los data cambien en el contenido. Sí. Llegaré a eso en unos momentos. Pero esencialmente, sí. ¿Puedes copiar y pegar esa línea para el script? Sí, definitivamente puedo. Lo pondré en el chat. ¿Correcto? Ahora, ten en cuenta que este es el ID de mi proyecto. Sí. Si tienes tu propio proyecto, siéntete libre de cambiar eso. Y... Sí. Esto genera los modelos. Ahora, cuando lo veas, generó los modelos en la raíz del proyecto. Así que no es ideal. Pero lo arreglaremos en un momento. Primero, quiero mostrarte lo que realmente generó. Así que cuando miramos la página de destino, por ejemplo, ves que hay un tipo de exportación, landing page. Así que estamos usando el tipo. No estamos usando clases. Porque las clases en JavaScript tienen un problema con la serialización. Y causa problemas con la forma en que Max maneja los data entre get static paths, get static props, y el componente React en el front-end. Así que es mucho más fácil y seguro usar tipos. Así que estamos usando export type. Y tiene todos los campos del tipo de contenido en el CMS. ¿Correcto, así que teníamos un contenido allí, que es un elemento de texto enriquecido. Teníamos un título allí, que era un elemento de texto. Y teníamos un slug de URL, que esencialmente es un elemento de slug de URL. Así que esto tipifica fuertemente todo lo que proviene del CMS. Ahora, además de los modelos de tipo fuertemente tipados, también obtenemos un archivo llamado underscore project. Y este archivo contendrá todos los codenames y todos los detalles de la configuración de tu proyecto en el CMS. Así que ves que este es un modelo de proyecto. Contiene todos los codenames de idioma. Tiene tipos de contenido. Así que tenemos un componente cta. Tenemos el componente hero y todo. Pero lo importante aquí es la página de destino y el codename de la página de destino. Ahora, vamos a usar esto en un segundo. Solo quiero mostrarte que no solo obtuvimos los modelos de TypeScript, sino que también obtuvimos una estructura de proyecto aquí. Así que podemos eliminar todas las literales de cadena en nuestro código. Esto se genera automáticamente. ¿Correcto? Algunas preguntas aquí, llego un poco tarde. ¿Esta grabación estará disponible para descargar? Sí, espero que sí. La masterclass debería ser grabada y debería estar disponible para ver más tarde.

Perfecto. Así que avísame si lo ven, si funciona para ustedes. Así que esto funcionará para ti. Si es así, pasaremos a generarlo de una manera un poco más agradable.

De acuerdo, perfecto. Gracias. Perfecto. Entonces, cuando lo tengas de esta manera, simplemente voy a limpiar la terminal. Y primero, voy a eliminar todos estos archivos generados porque, para ser honesto, se generaron en la raíz. Así que simplemente los voy a mover a la papelera. Y esta fue la forma más simple de usar el generador, pero también se puede generar usando un script. Sí. Cuando configuramos algunas cosas adicionales, lo cual es bueno porque, por ejemplo, en nuestro proyecto de producción, siempre borramos toda la carpeta de modelos antes de generar nuevos modelos. Por lo tanto, es beneficioso tener todo en un script en lugar de ejecutarlo directamente desde package.json. Entonces, si volvemos a Visual Studio y abrimos la carpeta de scripts, ya hay un archivo generate models TypeScript. Solo necesitamos cambiarle el nombre y eliminar el sufijo de respaldo y descomentar. Descomentar todo. Y lo que ves, esto también llama a generate models async. Así que es lo mismo que tenemos en el Read Me, pero tiene alguna configuración adicional. Como primero, toma el ID del proyecto del archivo dotN, ¿verdad? Cuando ya tienes el archivo dotN en el proyecto, es beneficioso usarlo en todas partes, así que podemos cambiar el ID del proyecto en un solo lugar. Y luego lo que hace es eliminar todos los archivos en el directorio específico y genera los modelos de inmediato. Entonces, lo primero que quieres hacer antes de ejecutar este script es meterte en un directorio específico que se utiliza para tus scripts, para tus modelos. Para eso, voy a crear una nueva carpeta en la raíz del proyecto, que se llamará modelos. Siéntete libre de hacer lo mismo. Es solo una carpeta simple aquí, y luego voy a... Primero que nada, voy a guardar este archivo cuando esté descomentado. Y luego lo agregaremos al package.json. Ravi pregunta, ¿esto es para aplicaciones basadas en contenido en lugar de aplicaciones basadas en formularios? Yo diría que esto es muy beneficioso para ambos si tienes el contenido en el CMS. Como si algo cambia en el lado del CMS, sabes de inmediato que algo cambió, que tu aplicación no está preparada para eso. Pero, por supuesto, si tu aplicación solo es una aplicación de una sola página o es muy específica y ya tienes el contenido en archivos de markdown o algo así, entonces puede que no sea tan beneficioso. Pero si hay algo que consume contenido de un CMS sin cabeza, creo que definitivamente es valioso tener esto en su lugar. Genial. Sigamos adelante. Y ajustemos este script. Como este era un script de generación para generar los modelos de contenido. Ahora, lo voy a eliminar porque ahora tenemos el script, ¿verdad? Tenemos el script en, en scripts, la llamada generate models. Entonces, lo primero que vamos a hacer es movernos a la carpeta de modelos. Así que acabo de crear las carpetas. Así que eso está en modelos. Y luego no podemos simplemente ejecutar el script porque el script está en TypeScript. Y es generate models.ts. Así que vamos a usar TS node que ya está aquí en las dependencias de desarrollo. Así que vamos a hacer TS node. Y como estamos en la carpeta de modelos necesitamos averiguar la ruta completa del script. Así que vamos a subir un nivel. Esto es ahora la raíz del proyecto. Y luego vamos a entrar en script o scripts slash generate-models.ts Muy bien, primero que nada, estamos cambiando al directorio de modelos. Aquí es donde queremos que se generen los modelos. Aquí es donde queremos almacenar los archivos de código. Luego vamos a ejecutar TS node y proporcionar la ruta al archivo de script. ¿Es eso el piloto automático que te da sugerencias de lo que escribiste anteriormente? Sí, eso es GitHub Copilot. Y en realidad hace un buen trabajo como verás en un momento. Funciona mucho mejor en los archivos de código que en el package.json. Sí, pegaré el script, así que aquí lo tienes. Entonces, cuando lo tengas en su lugar, simplemente puedes ejecutar npm run generate y esperemos que se generen todos los modelos en la carpeta de modelos. Ahí estamos. Ahora ves que los modelos se ven un poco diferentes. Los nombres se ven un poco diferentes. Esto se debe a que hay alguna configuración adicional He eliminado el timestamp porque cuando tienes un timestamp en cada modelo, generalmente quieres que estos modelos se confirmen en tu repositorio Git. Y cuando el timestamp cambia con cada regeneración, entonces el cambio de timestamp podría ser el único que te haga confirmar ese cambio en Git. Sí, en realidad solo queremos que los cambios de contenido aparezcan en el control de origen, por eso estoy eliminando el timestamp y luego hay algunas configuraciones iniciales que definen el camel case, porque quiero usar camel case para los nombres de los elementos, esto es porque ya estoy usando el resolvedor de nombres de propiedad en camel case en el cliente de entrega, ¿verdad? Así que solo estoy tratando de unificar la forma en que estoy trabajando con los elementos. Estoy usando camel case para el SDK. También estoy usando camel case para los nombres de los elementos, y luego para los archivos, estoy usando Pascal case con el sufijo model, así sé que cuando hay un sufijo model en el archivo de código, sé que esto está generado desde el CMS, ¿verdad? Avísame si todo se generó para ti. Esencialmente es el mismo fragmento de código, pero ahora todos los modelos deberían estar en la carpeta de modelos. Perfecto, gracias, chicos. Ahora tenemos todo generado. Lo mismo, el contenido es el mismo. Todavía es la estructura del proyecto.

Todavía son los modelos. Son tipos y ahora la parte más interesante. Volvamos a la presentación. Permíteme ir aquí. Generamos los modelos TypeScript, y ahora tendremos que obtener contenido en XJS y ajustar los componentes para usar los modelos fuertes para el contenido. Veamos cómo podemos hacer eso. La página de índice que les mostré antes contiene muchos de estos literales de cadena, y no se ve bien. Es muy fácil cometer un error tipográfico aquí. Sí, si pongo una página de inicio, pongo un guion aquí en lugar de un guión bajo. Ahora la página dejará de funcionar porque no habrá contenido. Así que podemos deshacernos de este literal de cadena y usar en realidad un modelo de tipo fuerte aquí para hacer el casting. También podemos usar la constante aquí. Así que déjame empezar aquí. En primer lugar, queremos cambiar la llamada de items a un modelo de tipo fuerte. Sabemos que queremos una página de inicio como resultado de esta llamada, ¿verdad? Lo único que estamos obteniendo es una página de inicio ajustada. Así que podemos hacer un casting al modelo de página de inicio. Como lo edité, verás que se creó automáticamente una importación desde dot, dot slash model slash landing page model. Así que este es el primer paso. El siguiente paso es deshacernos de este literal de cadena. Y aquí podemos usar la estructura del proyecto. Sí, eso es lo que se generó en el archivo de proyecto con guión bajo. Así que solo voy a hacer un modelo de proyecto. Y con la notación de punto y con IntelliSense, puedo hacer clic y especificar lo que quiero. Así que quiero el tipo de contenido y el tipo de contenido debería ser una página de inicio. Y quiero el nombre de código del tipo de contenido, ¿verdad? Así que de esta manera puedo eliminar esta línea y puedo deshacerme del literal de cadena. Por lo tanto, estoy eliminando la posibilidad de errores. Y esto también funciona en sentido contrario. Imagina que quieres eliminar el tipo de contenido de la página de inicio, porque es antiguo, crees que no hay páginas que dependan de él. De esta manera, cuando lo tienes definido en el archivo de proyecto, puedes ir aquí, encontrar el nombre de código en el que estás interesado y hacer clic derecho y encontrar todas las referencias. Y verás que esto se usa solo en el archivo de proyecto y en la página index TSX. Así que si esto te da solo un resultado en la estructura del proyecto, entonces podemos eliminar de forma segura ese tipo de contenido porque tu implementación no lo está utilizando en absoluto. Por supuesto, esto solo se aplica si estás usando un solo canal aquí. Pero puedes encontrar fácilmente si hay alguna página que dependa de este data. Eso es una cosa. Y luego también podemos arreglar el parámetro de elementos aquí donde también tenemos dos literales de cadena que no se ven idealmente. Así que podemos, nuevamente, ir al modelo de proyecto, podemos ir a los tipos de contenido. Y nuevamente, necesitamos empezar con la página de inicio. Verás que también tenemos los componentes aquí pero solo queremos la página de inicio ahora. Y no queremos el nombre de código, sino que estamos buscando los nombres de código de los elementos porque es el parámetro de elementos. Esta es la proyección de la que hablé. Así que queremos elementos y aquí queremos el nombre de código del título. Y queremos hacer lo mismo para el slug de URL. Así que queremos hacer tipos de contenido punto página de inicio, punto elementos, punto slug de URL y nombre de código. Y nuevamente, podemos eliminar estos dos porque ya no los necesitamos. Bien, ahora creo que eso es todo lo que podemos hacer aquí. Guardemos esto y comprobemos si todavía funciona. Así que ejecutemos el proyecto con npm run dev. Y verás que la página todavía funciona. Como si no hubiéramos cambiado nada funcional, simplemente nos deshicimos de los literales de cadena y usamos los genéricos, las constantes en su lugar. ¿De acuerdo? Así que espero que esto funcione. Ahora hay una cosa adicional que podemos hacer y es cómo Next.js transfiere realmente data entre GetStaticProps y el componente real. Verás que aquí estamos usando props y las props son una interfaz que se genera o que se define en el archivo index.js que contiene IContentItem. Ahora IContentItem es algo muy general que es, ya sabes, es una especie de envoltorio alrededor de cualquier elemento de contenido que obtienes del CMS. Ahora aquí estamos obteniendo elementos específicos así que sabemos que siempre obtenemos una matriz de Lending Page Model. No hay nada más que pueda venir aquí porque estamos, ya sabes, limitándolo por un tipo. Así que podemos cambiar esto de IContentItem a Lending Page Model y eliminar esta importación. Ahora lo que es realmente bueno, déjame poner esto de nuevo. Lo realmente bueno de esto es que cuando vas aquí en la implementación del componente React y estás construyendo el contenido aquí, sí, hay un elemento de lista, hay un enlace, cuando vas a page.elements y haces un punto aquí e intentas invocar el IntelliSense, no obtienes nada aquí, ¿verdad? Esto no es útil en absoluto porque Visual Studio no tiene idea de qué, ya sabes, qué propiedades puede tener esto. Así que esta es una propiedad que es IContentItemElements y que puede tener prácticamente cualquier cosa. Sí, no lo sabe. Cuando haces ese cambio, cuando lo cambias aquí a landing page model e intentas hacer lo mismo aquí debajo de page elements, ahora obtienes tres posibilidades de elemento, contenido, título y el slug de URL. Así que inmediatamente sabes qué elementos tienes disponibles para que puedas decir, sí, quiero el slug de URL y lo bueno es que si pones aquí, digamos slug de URL para la generación de página, ves de inmediato que esto es algo que no existe en el modelo de página de inicio. La propiedad slug de URL para la generación de página no existe en el tipo y ese es el modelo de página de inicio. Así que ves exactamente cómo el archivo se volverá rojo. Verás el error aquí y aquí verás exactamente qué está mal. Así que esto ya es un gran beneficio. En primer lugar, ya no puedes cometer errores tipográficos. En segundo lugar, obtienes tipos fuertes aquí en el componente. Así que es mucho más difícil cometer un error y si hay un error incluso antes de la compilación, esto es un análisis estadístico mientras estás codificando. Así que cosas muy interesantes.

Esa es la siguiente página. Aún seguiría trabajando, pero sigamos adelante. Espero que funcione para ustedes. Si no funciona, simplemente publiquen la pregunta en el chat. Lo revisaré y crearemos un archivo de código para la página de destino, ¿verdad? Ese es el siguiente paso.

Permíteme... Oh, creo que lo detuve. Permíteme volver a ejecutarlo. Ah, sí. ¿Debía crear un... n archivo con una clave de API? Sí, exactamente. Así que crea un archivo de entorno y coloca allí la variable de identificación del proyecto de contenido con el valor correspondiente. Lo encontrarás en el readme.md en la línea 14. Sí, eso es exactamente lo que debería estar en el archivo n. No te preocupes, está bien. Genial. Ahora tengo esto funcionando de nuevo. Ejecutemos esto.

Ahora, lo que intento solucionar ahora es que estas páginas devuelven un 404. Así que quiero implementar la página que generaría estas dos páginas, ¿verdad? Entonces, el siguiente paso es crear un nuevo archivo aquí en la carpeta pages y lo llamaremos slug en corchetes angulares TSX. Ahora, si eres nuevo en Next.js, esto es la ruta del sistema de archivos o API o como quieras llamarlo. Creo que ese era un término de Gatsby. Pero lo importante es que, según el nombre del archivo, Next.js determinará el destino o la ruta donde se generará la página. Entonces, si hacemos un index.tsx, esa será la página raíz de esa carpeta. Si hacemos el slug entre corchetes, tomará cualquier slug de URL y tratará de generar la página en esa ruta.

Entonces, lo que voy a hacer es simplemente copiar y pegar el archivo index.tsx. Siéntete libre de hacer lo mismo. Simplemente copia toda la implementación de la página de inicio y pégala en slug. Por supuesto, vamos a cambiar eso, pero primero, funcionará para obtener la plantilla base de la página. Ahora, en GetStaticProps, vamos a necesitar un paso más aquí. Vamos a exportar const getStaticPaths primero, que devolverá getStaticPaths. Y eso será, nuevamente, una función asíncrona que devolverá algo.

Sí, simplemente copié la página de inicio y la agregué aquí, o export const get static paths que devuelve objetos get static paths. Probablemente necesitemos importar esto. Así que simplemente actualizaré la importación de next. Sí, estamos importando get static paths y GetStaticProps de next ahora. Y la forma en que funciona es, Next.js realmente analizará esta página y se ejecutará, obteniendo primero las rutas estáticas. Y get static paths, tú eres responsable de proporcionar todas las rutas donde debería haber una página. Entonces, en nuestro caso, será la barra diagonal market hay una página de destino y barra diagonal HoxIroc. Pero en esencia, es cualquier ruta donde debería haber una página solo una ruta, no se necesita nada más de ti en el alcance de esta función. Luego, next tomará todas las rutas aquí y las enviará a getStaticProps. Y getStaticProps te dará el slug. Así que pongámoslo aquí. Constante slug será params.slug.toString. Entonces obtendremos el slug en params. Y luego necesitaremos implementar cómo queremos obtener los datos para ese slug. Entonces, si en getStaticPaths proporcionamos dos, tres, cinco rutas, entonces getStaticProps se llamará dos, tres o cinco veces. Para cada slug se llamará una vez. Y todo esto es en tiempo de compilación. Entonces aquí necesitaremos proporcionar las rutas. Aquí necesitaremos proporcionar la obtención de datos. Y cuando tengamos los datos, volverá al componente React que renderiza el HTML.

Voy a eliminar esto por un momento. Solo voy a dejar la navegación allí. Lo voy a llamar, llamémoslo página de destino. Porque vamos a trabajar con tipos de contenido de página de destino. Así que simplemente cambiaré esto a página de destino. Y primero, implementaré getStaticPaths. Entonces lo que queremos aquí es, llamémoslos rutas. Y vamos a usar, vamos a usar el servicio de contenido. Entonces vamos a hacer, awaitContentServiceInstance y deliveryClient. Eso es básicamente lo que siempre necesitamos hacer cuando queremos obtener algunos datos. Y luego queremos obtenerItemsLandingPageModel. Nuevamente, lo mismo que tenemos aquí. Y queremos el mismo tipo, así que vamos a usar el modelo de proyecto de tipos de contenido y LandingPage, porque estamos tratando de construir las páginas de destino, ¿verdad? Es por eso que queremos el LandingPageModel, queremos limitarlo por el tipo. Y queremos limitar la respuesta con el parámetro elements. Y solo queremos obtener el slug de la URL, porque nuevamente, solo estamos proporcionando rutas. No nos importa ningún otro contenido. Entonces estamos buscando los elementos URL slug Y luego podemos hacer simplemente toPromise. Esta parte, el parámetro elements es básicamente un buen tener. Sí, no necesitas hacer eso. Solo limita la respuesta que obtendrás del CDN con los datos. Entonces estás diciendo que solo quiero el slug de la URL, nada más me interesa en este momento. Ahora, cuando tenemos eso, next.js realmente quiere que devolvamos un objeto simple que se llama rutas. Y en el pasado, hay otro objeto llamado params donde debemos proporcionar el slug. Ahora, primero, estoy tratando de mostrarte cómo se ve el objeto nuevamente, porque esto no es algo fácil de entender si eres nuevo en next.js. Entonces, lo que next.js realmente nos exige hacer es proporcionar un objeto con rutas. Y creo que esto debería ser un array, por cierto. Array de objetos. Creo que tal vez lo veremos en un segundo. Pero lo importante es que actualmente tenemos en nuestro camino hacia nuestra página, solo tenemos una variable en el nombre del archivo, que es el slug. Por eso proporcionamos un slug aquí. Con el tiempo, es posible que llegues a un punto en el que necesites varias variables para un solo archivo en el camino hacia él. En ese caso, deberías proporcionar múltiples params aquí. Pero aquí solo necesitamos un parámetro, que es slug. Entonces, obviamente, lo que queremos hacer aquí es, queremos usar los datos que obtuvimos del CMS, ¿verdad? En lugar de la matriz estática aquí. Entonces, lo que voy a hacer es poner aquí rutas, las rutas son en realidad la respuesta. Podemos llamar a esto respuesta de ruta para que quede claro. Entonces, respuesta de ruta. Estamos buscando data e items. Y luego los vamos a mapear porque para cada elemento, solo estamos buscando su slug, ¿verdad? Entonces los vamos a mapear a item. Y aquí estamos devolviendo el mismo objeto que teníamos aquí. Entonces esto será params, slug y eso será el valor del slug de los elementos del item, URL. Y eliminamos el resto. O al menos espero que tenga esto correctamente. Lo veremos en un momento. Um, sí. Una vez más, solo estamos interesados en obtener los slugs de URL, en este momento del CMS. Y estamos devolviendo un objeto con rutas y creo que necesitamos hacer... Tres puntos aquí o algo así. Algo no está bien aquí. ¿No necesitas devolverlo del map? Sí, esto debería ser un objeto. Tal vez no lo toma como un objeto.

No, algo más está mal aquí. Oh, podría ser... Eso podría ser un paréntesis normal. Siempre me pierdo en los paréntesis. Sí, si utilizas llaves curvas, necesitas utilizar la palabra return. Sí, sí, gracias. Sí, creo que si utilizo los paréntesis normales, esto debería estar bien. ¿Verdad? Sí. Perfecto. Gracias.

Pero lo bueno es que tenemos el objeto, ¿verdad? Así que creo que deberíamos estar bien. Aún no le gusta algo. Um, promesa pasada, la promesa no se asigna al tipo. Obtener paso estático. Oh, entonces tal vez aquí necesitamos aplanar el array. No, ¿qué está pasando aquí? Los tipos de promesas son asignables. Estás esperando eso. Probablemente falte el fallback. De acuerdo. Sí. Entonces eso significa que aún no hemos terminado. Así que tenemos los pasos aquí. Todas las rutas están definidas. Y necesitamos proporcionar un fallback aquí. Ahora voy a poner aquí false. Lo que esto hace es decirle a Next.js que todas las rutas que proporcionaste aquí, siempre que se produzca una solicitud en tiempo de ejecución para una ruta diferente, que no sea la que proporcionaste, irá directamente a 404. Sí. Entonces aquí, digamos que solo proporcionamos una ruta que es slash hello world. En ese caso, Next.js solo tratará la ruta hello world como la que esta página debe renderizar. Entonces, si vas a esta página desde slash hello, irá directamente a 404. Sí. Si haces cualquier otra cosa, irá directamente a 404. Pero si pones aquí cualquier otra cosa como fallback blocking entre comillas, en ese caso, no irá directamente a 404, pero intentará ejecutar esto de todos modos. Te dará el slack, y en el slack obtendrás el hello, e intentará ejecutar tu código de todos modos en tiempo de ejecución. La ruta que proporcionas solo se generará estáticamente en tiempo de compilación, pero Next.js también tratará todas las demás rutas como posibles rutas para las páginas, y tú eres responsable de redirigir a 404 si algo sucede. Para hacer las cosas más fáciles, por ahora, voy a mantener el fallback en false. En ese caso, todo lo demás irá directamente a 404. Así que siéntete libre de hacerlo de la misma manera. Es una espera. Sí. Perfecto. Así que voy a mantener el fallback en false. Estamos proporcionando todos los pasos, y en getStaticProps, estamos obteniendo el slack. Y luego, por supuesto, necesitamos ajustar esta llamada. Porque estamos tratando de obtener el modelo de la página de destino. Eso está bien. Podemos eliminar el parámetro elements. Porque en esta página, vamos a renderizar todo. Vamos a renderizar todo el contenido. Pero lo que definitivamente vamos a necesitar es un filtro equals donde necesitamos decir que el slack de la URL, es el slack real que obtuvimos. Entonces este es un filtro que filtra todas las páginas de destino para el slack específico. Ahora, lo que también me gusta hacer es poner aquí un parámetro limit a uno por una razón específica. Porque cuando llegues a este código en tres meses, verás exactamente a partir de esta única línea, verás exactamente que esta consulta siempre debe renderizar solo un elemento. Sí, esto es principalmente una cuestión de legibilidad. Pero siempre me gusta incluirlo en caso de que, ya sabes, esto pueda no estar claro a primera vista. Y también tiene algunos beneficios de rendimiento. Ahora, ¿no podemos usar un tipo fuerte en el filtro? Sí, eso es lo que iba a hacer a continuación. Y esto no es ideal porque ya sabemos que este código se encuentra en la estructura del proyecto, ¿verdad? Entonces todo lo que podemos hacer es esto. Y en lugar del URL Slack, cambiamos el teclado. Podemos hacer modelo de proyecto, queremos hacer tipos de contenido, página de destino, elementos y URL Slack codename. Ahora, esto es un poco largo. Siempre puedes acortarlo un poco. Cuando necesites hacer más, siempre puedes poner esto en una constante y luego acortarlo un poco. Esto tampoco es ideal que tengas elementos aquí. Pero lo que realmente hacemos en nuestros proyectos, tenemos un método util aquí que tiene el prefijo de elementos solo en un lugar en todo el código base. Puedes hacer eso también. La razón por la que lo tenemos aquí es porque siempre puedes filtrar también por sistema, ¿verdad? Entonces podemos decir filtrar por system.type. O system.codename.

Funciona. Perfecto. Déjame comprobar. Bien. Buen trabajo, chicos. Así que solo daré a todos unos segundos. Luego pasaremos a los componentes. Creo que eso es lo siguiente. Déjame comprobar. Lo que hicimos fue crear un archivo de código para la página de inicio. Hicimos la obtención de rutas y props estáticos. Así que deberíamos estar bien. Lo siguiente es resolver los campos de reinicio en componentes de React. Perfecto. Muy bien. Así que sigamos adelante. Pasemos a los componentes. Esto debería ser bastante fácil de hacer. Aquí, en el CTA, abrí el primer componente. Ese es el CTA. Verás que tiene elementos y sistema pero no tiene tipo. Esto debería ser bastante fácil porque tiene un tipo correspondiente. El componente CTA tiene un tipo correspondiente llamado component-ctamodel. Vamos a convertir esto en un componente funcional de React y poner aquí... ¿Cómo se llamaba? Component-ctamodel. Esto agregó automáticamente esta importación desde la carpeta de modelos. Verás, tan pronto como hago esto, obtengo inmediatamente los tipos aquí para los elementos. El component-ctamodel contiene las propiedades de sistemas y elementos . Los elementos son título, botón, texto, subtítulo, enlace, sistema, atributos del sistema. Obtenemos todo eso. No creo que necesitemos hacer ningún cambio aquí porque ya lo implementamos correctamente. Pero cuando hagas clic nuevamente, cuando pongas un punto aquí después de elementos, verás las cuatro propiedades disponibles. Así que esto es una solución fácil. Lo mismo ocurre con el componente hero. Nuevamente, solo voy a poner aquí react-fc, que es un componente hero modelo o modelo de componente hero. Y la navegación es un caso especial. Así que voy a llegar a eso en un momento. Y el último es component-text-with-image. Que es un componente funcional de RIA y modelo de componente-text-with-image. Bien, de esta manera tenemos modelos fuertemente tipados aquí también.

Ahora hay una cosa que debemos resolver. Y es el nodo DOM aquí en el resolvedor de elementos de texto enriquecido. Voy a llegar a eso en un momento en la página de inicio. Pero solo para que lo sepas, el resolveDOM node proporciona un nodo DOM, que es un tipo de nodo DOM, obviamente. Pero aquí el nodo DOM es en realidad un elemento. Porque estamos comprobando si el nombre del nodo DOM es P, por lo que esto es para una etiqueta de párrafo. Y si miras el nodo DOM. Sí, el nodo DOM es de tipo nodo DOM y el tipo de nodo DOM es en realidad un comentario, elemento, nodo, instrucción de procesamiento o texto. Ahora, en nuestro caso, esto definitivamente es un elemento. Y podemos comprobar eso proporcionando aquí una comprobación adicional para DOM node dot, creo que es type, node type, Y en el nodo, oh, lo siento, esto es un getter. Así que no hay paréntesis. Entonces, si haces un DOM node dot node type, esto es un número, y en realidad proviene de una especificación RFC. Así que puedo echar un vistazo a eso, pero el número uno, si lo comparas con el número uno, eso es en realidad un elemento, ¿verdad? Entonces, si lo comparas de esta manera, entonces puedes decir que el nodo DOM es de forma segura un elemento. Y luego comenzará a funcionar. Por supuesto, esto es solo un azúcar sintáctico porque sabemos que va a ser un elemento. Así que esto es un poco más largo, un código más largo, pero se deshace del error. Ahora, este no es un error crítico, sí. Es solo algo de lo que no estamos seguros de que el nodo DOM vaya a ser un elemento. Así que voy a hacer lo mismo aquí. Y esto solo agrega un nombre de clase. Así se ve bien, esto es algo visual en el sitio web. Nada importante, pero solo para que lo sepas, necesitamos hacer este cambio. Perfecto, ese es el último de estos componentes. Y ahora podemos pasar a algo más interesante. Y eso es la resolución de texto enriquecido. Ahora tenemos los componentes en su lugar. Permíteme contraer esto, tenemos los componentes en su lugar que ya están preparados para ser compatibles con TypeScript o que tienen modelos fuertemente tipados. Y podemos volver a nuestra página de Slack y renderizar algo aquí en realidad en lugar de solo el título de la página. Así que solo voy a poner aquí otro div y porque, como te mostré en el CMS, la página de inicio...

¿Por qué no muestra nada? Vamos....la página de inicio es un tipo de contenido que está preparado para que los especialistas en marketing puedan agregar cualquier tipo de componentes, cualquier combinación de componentes que deseen. Entonces lo que necesitamos es resolver todos estos elementos de contenido en sus respectivos componentes React.

Cambiemos de nuevo aquí. Y vamos a usar un componente específico para eso. Se llama elemento de texto de alcance. Y el elemento de texto de alcance proviene de una biblioteca de componentes React de contenido. Esto en realidad no está bajo la organización de contenido porque aún no está en producción. Pero ya estamos utilizando, es prácticamente solo el código React que estábamos usando en proyectos de producción. Así que funciona bien. Y creo que la primera versión de producción ya puede haber sido lanzada. No estoy seguro. Pero lo importante es que cuando importas el componente aquí, lo que debes hacer es proporcionar un elemento de texto de alcance. Que en nuestro caso va a ser elementos de página y no cuerpo sino contenido. Así que veo que este es el elemento de texto de alcance de los elementos. Cuando miramos el modelo de la página de inicio, el contenido es el elemento de texto de alcance. Así que eso es lo que queremos proporcionar aquí. Y al final, eso es todo lo que necesitamos hacer si no queremos cambiar nada, ¿verdad? Si eso es todo lo que necesitas para el texto, por ejemplo, está bien dejarlo así, funcionará.

Pero en nuestro caso, queremos agregar un resolutor. Los resolutores son básicamente un objeto que te permite cambiar algunas cosas. Primero, depende del nivel de abstracción con el que te sientas cómodo. Lo primero que vamos a necesitar hacer es resolver los elementos vinculados. Así que simplemente voy a agregar aquí el resolutor para los elementos vinculados. Y lo que podemos hacer aquí es un div muy simple, hola mundo. ¿De acuerdo? Estamos devolviendo un JSX. Y lo que esto va a hacer es, para cada componente que tengamos en la página de inicio, va a renderizar un div que tiene un hola mundo en él. Así que si guardamos esto, podemos ver cómo se ve en el sitio. Así que ves que se renderizó hola mundo dos veces. ¿Sí? Y luego hawk eyes rock. Eso probablemente se debe a que dejé algo en su lugar. ¿Sí? Pero ves que ahora en esta página, tenemos dos componentes y ambos renderizaron hola mundo. Si volvemos y vamos al mercado, esta página de inicio, esta tiene tres veces hola mundo. Así que esta página tiene tres componentes. Así que ves, esto realmente renderiza el hola mundo para cada componente. Y esencialmente, podemos renderizar cualquier tipo de componente React aquí. Pero lo que también puedes hacer aquí es proporcionar otros resolutores, como resolver imagen. Si quieres usar la imagen siguiente, o si quieres hacer algún procesamiento posterior, si quieres usar tu propio componente para las imágenes, está perfectamente bien. Puedes resolver enlaces. Esto es principalmente si tienes enlaces entre elementos de contenido, entonces puedes resolver esos enlaces en URL slugs, puedes resolver enlaces externos. Ya sabes, podemos, lo que algunos de nuestros clientes hacen es si hay un enlace externo, ponen una nota de que es un enlace externo debajo, o detrás del texto, etc. Pero también se puede resolver con notas tontas. Eso es algo que hicimos en los componentes que acabamos de arreglar. Así que puedes llegar hasta el final y resolver cada nota tonta individual que tengas en el texto enriquecido. Eso no es algo que quiera hacer hoy, porque eso es un poco complicado, porque todo es una nota tonta, ¿verdad? Es solo que cada fragmento de texto es una nota tonta. Pero lo que vamos a hacer aquí es simplemente hacer una declaración switch aquí para el elemento de enlace, y vamos a hacer un switch del tipo de sistema. Ahora, en caso de que esto sea un tipo de contenido de modelo de proyecto, tipos de contenido, si esto es un CTA, nombre de código, entonces vamos a devolver el componente CTA y creo que lo hicimos como el modelo principal. Así que vamos a hacer el elemento de enlace como CTA, modelo de componente CTA. Y creo que aquí necesitamos los tres puntos. Oh, no creo que sepa qué es CTA. Así que vamos a hacer una importación. CTA desde un componente. CTA. Busquemos propiedades de I contenido. De acuerdo. Algo está mal aquí. ¿Puedo encontrar un elemento de enlace? De acuerdo. Así que necesitamos proporcionar un elemento vinculado. De acuerdo. Así que aquí necesitamos que el modelo de componente CTA sea un componente CTA. Y aquí, cuando tenemos el elemento de enlace, que es un elemento de contenido, necesitamos tenerlo como modelo de componente CTA. ¿Tenemos la importación aquí? Sí, tenemos la importación en su lugar. ¿Qué hay para no gustar? Título, texto del botón, subtítulo... Sí, así que necesitamos... Oh, vamos, ¿por qué los tres puntos no funcionan aquí? Oh, gracias. Gracias, Hanke. Eso es lo que estaba buscando. Perfecto, muchas gracias. Siempre hay algo que olvido. Así es como obtenemos el CTA y hacemos lo mismo para el héroe.

Entonces, este es un componente aquí, un modelo, por supuesto, primero necesito importarlo. Y lo mismo ocurre con el modelo. Y necesitaremos hacer lo mismo para la navegación. A veces, el compilador no es el más brillante, pero aún hace muchas cosas muy bien. Y esto es un texto a imagen. Texto a imagen, elemento de enlace como componentes, modelo de texto a imagen. Y nuevamente, una importación. Y lo que siempre me gusta hacer al final es lanzar un nuevo error de enlace desconocido o podemos hacer elemento de enlace, tipo y ponerlo aquí. Sí, por si acaso hay un componente con el que no estamos contando esto puede suceder bastante fácilmente. Cuando agregas otro componente aquí y realmente permites que tus editores usen ese componente y olvidas agregar el componente aquí en el resolutor entonces obtendrán este error o es posible que obtengas este error durante la compilación porque cuando se está construyendo la página durante la compilación, durante si la página se genera estáticamente durante la compilación entonces Next.js intentará resolver esto y obtendremos el error. Es probable que la compilación falle y sabrás exactamente qué está mal. Entonces, cuando guardes esto y vuelvas aquí deberías ver una página con un aspecto agradable. Aquí solo tenemos un componente o dos componentes, el héroe con imagen y el CTA. Y aquí vamos a tener tres componentes. Esto se ve mucho mejor donde tienes que tener la imagen del héroe, el texto del héroe. Tenemos imagen con texto y aquí hay un CTA. Ahora, lo que siempre podemos hacer es verificar si esto, si podemos cambiar algo, digamos en la página en ejecución del mercado, lo que podemos hacer es agregar un nuevo componente. Entonces coloquemos aquí un nuevo componente. Pongamos aquí otro CTA, podemos decir, El React Summit se acerca. Únete a todos en Ámsterdam. Y el texto del botón podría ser visitar conferencia e ir al React Summit. ¿La URL es correcta? Sí. Y, por supuesto, necesitamos publicarlo porque en este momento solo estamos trabajando con el ID del proyecto, que contiene solo contenido publicado. Y tomará un segundo antes de que esté en la CDN. Entonces, si retrocedemos la página aquí, si la actualizamos, verás que nada ha cambiado por ahora. Pero si actualizo esto en un momento, ahí vamos. Entonces, este es el segundo CTA, ¿verdad? Así es como puedes colocar todos los componentes en su lugar y resolverlos con texto enriquecido. Como dije, esta es una resolución simple de elementos vinculados. Por supuesto, lo que también puedes hacer es colocar un código en su lugar que analice el nombre del código y verifique qué componente de React renderizar solo en función de eso. Prefiero hacerlo de esta manera. Siento que me da más control. Y si quieres ir un poco más allá y hacer una resolución más detallada, siempre puedes hacer lo que hice en la imagen de texto. Y sí, solo para resolver los nodos tontos.

Ahora, una última cosa que quería hacer aquí es el componente nav. Cuando miras la página ahora, no hay nada en la parte superior, que es el componente nav. Debería estar aquí en la parte superior. El problema es que contiene data nulo. El componente realmente contiene enlaces a una parte de la página. Esto es muy común en aplicaciones de una sola página que los elementos en la página tienen anclas. En la parte superior del menú, en el encabezado, se proporcionan enlaces a partes específicas de la página. Eso es algo que también hacemos aquí en la navegación.

El problema es que, en este momento, también hay data nulo aquí. Aún no hemos definido el tipo de este componente en TypeScript. Entonces, lo que podemos hacer es proporcionar un tipo para el data. Esto no es tan fácil porque los componentes que están en la página pueden ser de diferentes tipos. Entonces, necesitamos encontrar el conjunto de componentes que sabemos que siempre estarán presentes y definirlo como un conjunto de componentes o necesitamos introducir algún tipo nuevo. ¿Verdad? Prefiero hacerlo de la primera manera.

Así que simplemente voy a convertir este en un componente funcional de react. Y, por supuesto, podemos usar un array de elementos de icono aquí. Probablemente esto no sea un elemento de icono 10 sino un array de elementos de icono 10 porque así obtendremos todos los data aquí. Creo que esto también está bien porque estamos mirando el nombre del código del sistema y el nombre del código del sistema. El problema es que también tenemos aquí la propiedad headline de los elementos. Si escribimos elements y punto, verás que no obtenemos ninguna ayuda aquí porque eso es el elemento de icono 10. Lo que podemos hacer en este caso es proporcionar aquí una lista de los componentes que se pueden insertar aquí.

Ahora puedo hacerlo de esta manera para proporcionar aquí un modelo de componente CTA o un modelo de componente héroe o un modelo de componente texto a imagen e importarlo todo. Y lo que le estoy diciendo al componente es que lo que sea que venga estará en alguno de estos tipos. Y la cosa es que cuando vuelvo aquí a los elementos solo obtengo una propiedad llamada headline. Esta es la única propiedad que todos estos tipos comparten. Sí, y cuando miras el modelo, el componente modelo CTA tiene un headline, el componente modelo héroe tiene un headline y el componente texto a imagen tiene un headline, ¿verdad? Entonces todos comparten esta propiedad por lo que puedo usarla de forma segura aquí. Porque si hago algo más aquí como un subheadline y luego otro subheadline, obtengo un error. Sí, lo único incómodo es que tienes que definir esto aquí y también necesitas definirlo en la página que realmente está usando los data. Por lo tanto, cuando ves que el tipo data ahora no es asignable. Incluso si ponemos aquí el contenido de los elementos de la página y en realidad no podemos proporcionar el elemento de texto enriquecido pero necesitamos ir un nivel más profundo a los elementos vinculados. Visual Studio todavía no está contento con eso porque el elemento de icono que estamos proporcionando se llama elementos vinculados o elementos vinculados es icontentitemenelements, puede ser un componente diferente diferente de los tres componentes que definimos aquí. Sí, tendrías que hacerlo aquí también y luego como componente modelo CTA, componente modelo héroe o componente modelo texto a imagen y, por supuesto, ¿verdad? En ese caso, esperemos que esté bien, ¿qué está mal? Data no existe en el tipo. Oh sí, tendrías que hacerlo de esta manera. Sí, también puedes hacerlo de esta manera pero creo que es mejor definir las props en algún lugar, ya sea aquí en la interfaz data, que básicamente es esto, quizás y ¿está aquí? Aquí. E idealmente poner esto en algún lugar de forma global para no tener que repetirlo, ya sabes, aquí también. Así que probablemente solo pondrías aquí data igual a página. Ahora lo voy a dejar como está ahora mismo. Pero sería beneficioso tener la interfaz en algún lugar externo como interfaces/index y usarla para ambos lugares. Pero si guardamos esto, entonces en la navegación, todavía hay un error aquí. Fecha. Sí. Eso es porque me falta el paréntesis aquí. Y ahora debería estar bien. Y ahora si volvemos aquí, verás que cada componente tiene su propio elemento en el menú en la parte superior. Y cuando haces clic en algo, llegas a la página donde está el elemento. O llegas al lugar de la página donde está el elemento. Por supuesto, actualmente no está ordenado de ninguna manera. Tendríamos que hacer más implementación para hacer eso. Pero sí, así es como debería funcionar. Así que avíseme si hay alguna pregunta hasta ahora. Mientras tanto, puedo llevar la interfaz y moverla a algún lugar agradable. Así que pongamos aquí una nueva carpeta, interfaces. Llamémosla I. No componentes. Y ponla allí. Y ponla allí. No quiere dejarme importarla. Así que creo que también necesito exportarla, ¿verdad? Correcto. Esto se ve mucho mejor. Podemos hacer lo mismo aquí. En lugar de este. Entonces, oh, en realidad, necesitamos hacer esto aquí. Ahora, ¿qué no está bien, como, conversión de tipo, tipo, todo bien, tipo y un error. Vale, me falta algo aquí. Así que el nav tiene componentes INF, data está aquí. El tipo debe ser un array. Creo que el data está bien aquí, pero no le gusta, de todos modos tendré que hacer lo mismo aquí. Así que tendré que hacer esto, SS. Creo que de esta manera estará contento. Sí, no me está guardando escribir esto de todos modos. Pero quiero decir, probablemente hay una mejor manera de hacer esto. Tal vez puedan ayudarme chicos. Si ofrecen una mejor manera de hacerlo, cómo hacer esto. Probablemente lo descubriré, pero aquí es tarde por la noche. S props data. Creo que esto va a funcionar. Creo que de todos modos se quejará. No, no le gusta eso. Voy a encontrar otra props. No importa, está bien. Como dije, probablemente haya una mejor manera de hacer esto. Pero lo importante es que la página funcione bien. Y tenemos todo cubierto con TypeScript. Y esperemos que funcione para todos. Si es así, genial. Debería ser INF components data. Sí, dejémoslo así por ahora. Lo último de lo que realmente quería hablar son los pipelines de implementación. Ahora, lo que esto realmente te permite hacer es cuando tienes todo generado en los modelos, lo que puedes hacer, al menos lo que hacemos es hacer commit de todo en Git. Así que cuando hay cambios, sabes exactamente qué está sucediendo con tu modelo de contenido.

Y lo que también haces cuando haces una compilación de tu sitio web, siempre generamos los modelos actualizados desde el CMS sin cabeza. Y en realidad los comparamos entre sí para ver si hay cambios. Si miras nuestro blog, escribí un artículo al respecto, Cómo Evitar Errores de Producción Causados por Cambios en el Contenido. Así que lo que podemos hacer es intentar, intentar seguir eso aquí. Si no quieres, si no quieres instalar esto ahora, está perfectamente bien. Todavía nos queda algo de tiempo, así que puedo comprobar si esto va a funcionar, pero el código está aquí. Así que no debería ser tan difícil. Lo que esto va a hacer, es instalar Dir Compare. Tengo algunos caracteres adicionales aquí. Va a instalar Dir Compare. Y lo que va a hacer es, cuando ejecuto el script, va a generar los modelos, modelos actualizados, desde el CMS en la carpeta temporal. Y va a comparar eso con los tipos generados que ya tenía. Así que simplemente voy a copiar todo el código y colocarlo en Verify Types JS. Así que simplemente lo voy a poner en los scripts. Verify Types JS. Está utilizando el generador de modelos de contenido. Está utilizando Dir Compare y.nf, por supuesto. Y ahora creo que deberíamos poder ejecutar esto. Si hay algún otro paso. Sí, solo necesitamos esto. Así que lo voy a poner en el package JSON. Y llamémoslo verify. Así que vamos a hacer un script de verificación, verify types. Y el directorio de los tipos generados es models. Pero no sé si estará contento. Déjame mover esto de vuelta a la raíz. Porque es posible que no esté contento con la subcarpeta. Hagamos eso y veamos qué obtenemos en realidad. Entonces lo que obtendrás es un modelo de contenido que contiene cambios inesperados. Esto se debe principalmente a que probablemente tengo una configuración diferente en el script. En el verify types. Así que ahí tenemos el espaciado del modelo conjunto en timestamp false. Sí. Tengo este código adicional adicional ahí. Así que no quiero cambiar eso ahora mismo porque creo que rompería aún más cosas, pero solo para que lo sepas, obtienes exactamente esto aquí. Ves, ¿dónde están tus problemas? En este momento es porque hay ocho diferencias debido a que la configuración es diferente. Pero aquí ves que hay, este es un ejemplo donde solo hay dos diferencias y ves exactamente, hay un contenido diferente y también ves dónde, sí. Así que esta es la estructura del proyecto y el archivo y ahí está el bloque con imagen. Así que sabes exactamente qué tipo de contenido cambió y esto romperá la compilación. Idealmente, rompe la compilación. Te dice, hey, hay algo mal y puedes verificar si la implementación realmente funcionará incluso con ese cambio y luego puedes confirmar el cambio en tu Git y estar contento con eso. Así que esto es algo que también quería señalar que puedo usar la generación de modelos no solo para asegurar la implementación y tener una mejor experiencia de desarrollo sino que también puedes usarlo para proteger tus compilaciones de producción para asegurarte de que tu implementación esté realmente lista para los tipos de contenido tal como los tienes generados en tu código base, por lo que si alguien hace cambios entonces puede detener la compilación y no llegará a producción. Entonces, los peores problemas son cuando están en producción cuando la página no muestra algunos datos o muestra un error 500 o algo así. Esto realmente tiene el potencial de prevenir muchos errores como este. Perfecto, eso es todo, creo que hemos cubierto todo en este punto. ¿Verdad, no veo ninguna pregunta? ¿Puedes compartir el código final, por favor? Sí, así que el repositorio que te mostré, este. Oh, no este. Este, el taller de React Summit 2022. Lo que voy a hacer justo después de terminar este taller, voy a hacer commit de todo aquí en una rama diferente. Sí, voy a poner aquí una rama llamada complete o algo así. Así que lo voy a poner aquí. También voy a poner allí la presentación. Sí, todo está en el mismo repositorio para que puedas acceder a él allí.