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.
Comments