Curso Intensivo de Astro, Kontent.ai y Portable Text

Así que hola a todos. Soy Andrej. Gracias por estar aquí. Esto debería ser una tarde divertida. Les saludo desde la República Checa. Estos son todos temas bastante amplios. Así que trataré de cubrir al menos los conceptos básicos. No quiero contarles todo sobre cada uno de estos temas, sino darles una visión general de cómo todo funciona en conjunto. Luego, por supuesto, si están en la conferencia, podemos hablar más sobre ello allí o también pueden encontrar recursos en línea para todo esto. Mi objetivo es simplemente pasar un buen rato durante la próxima hora o dos y espero que puedan llevarse algo de ello.

Así que soy Andrej, soy un evangelista de desarrollo aquí en Content.ai. Somos un proveedor de CMS sin cabeza, por lo que estamos bastante involucrados en el campo de los sitios web, el desarrollo frontend, JavaScript, etc. Mi pasión personal solía ser .NET porque comencé como desarrollador .NET. En estos días hago prácticamente de todo, lo que se espera. Así que Astro es uno de estos proyectos donde fue solo el último en llegar y fue divertido hacerlo. Ese soy yo. Compartiré los detalles del contenido justo después del taller.

Pero veamos qué vamos a cubrir hoy. Quiero que sea breve. Nadie quiere estar aquí durante cuatro horas. Esto es lo que vamos a hacer. Este es el sitio web que terminaremos al final del taller. Es solo un sitio de muestra para una aerolínea. Lo llamamos Contenare porque somos Content.ai. Así que hay un juego de palabras bastante bueno aquí. Nos vamos a centrar en la Resolución de Texto Enriquecido porque esa es la tarea más importante de cualquier sitio web que utiliza un CMS sin cabeza. Ahora, la agenda para hoy es, en primer lugar, este será un taller práctico. Si tienen Visual Studio Code instalado y listo para usar, si tienen Git, eso es perfecto. Siempre les daré unos minutos para hacer lo que estoy haciendo. Pero no habrá un bloque de 15 minutos en el que trabajarán por su cuenta. No tenemos tanto tiempo para eso. Entonces, lo que vamos a hacer es importar contenido en el proyecto del CMS. Luego, ejecutaremos un proyecto en blanco de Astro. Ya he creado uno para ustedes, así que simplemente les daré el repositorio de Git para que lo clonen. Así que no tenemos que perder tiempo en eso. Crearemos dos páginas y algunos componentes en Astro, para que puedan ver lo fácil que es crear estos componentes. Generaremos modelos TypeScript con tipado fuerte. Los llamo modelos porque, como dije, solía ser desarrollador .NET, pero en realidad son tipos en TypeScript. Pero hay un script para eso, así que también debería ser rápido. Implementaremos una página de listado que mostrará todos los datos que tenemos en el CMS sin cabeza. Implementaremos la resolución de texto enriquecido en la página de inicio. Y eso es todo. Luego convertiremos la resolución de texto enriquecido en texto portátil. También les contaré qué es el texto portátil, si están interesados en eso. Esa es la agenda para hoy. Como dije, para cada parte les daré tiempo para trabajar en eso. Déjenme ver. Ok, aquí vamos. Así que solo para compartir algunos enlaces importantes. Este es el repositorio con el que trabajaremos. En realidad, está en mi GitHub. Voy a copiar ese enlace en el chat en un segundo para que no tengan que escribirlo desde la diapositiva. Hay un archivo links.txt dentro de ese repositorio que contiene todos los demás enlaces. No necesitan escribir nada por su cuenta, pueden simplemente copiar y pegar. Ahora, como mencioné, vamos a utilizar content.ai como el CMS sin cabeza como almacenamiento de contenido. Ahora, hay dos opciones para ustedes. O bien pueden registrarse para obtener un plan gratuito o una prueba gratuita y hacer todo por su cuenta. Les daré los scripts de importación y todo, es bastante fácil de configurar. O les daré el ID de proyecto de mi proyecto y pueden usar eso. Depende de lo que estén buscando. Es más fácil si se registran por su cuenta e importan sus propios datos y pueden jugar con ellos. Pueden hacer clic en la interfaz de usuario. Pero ambas opciones son posibles. Si no quieren registrarse. Ahora es el momento de clonar el repositorio. Así que solo copiaré la URL en la ventana de chat. Si logro abrir Firefox cuando el zoom está aquí. Déjenme ver. Ahí está el archivo linux.txt. Y ahí está el registro de content.ai.

Si desea registrarse por su cuenta, solo tomará unos segundos. Así que simplemente copie este enlace aquí. Y péguelo allí. Obviamente, ya estoy conectado. Así que solo usaría iniciar sesión. Pero para unirse, simplemente ingrese su correo electrónico y elija una contraseña para ingresar. Les daré unos segundos para hacer eso mientras luchó con mi Firefox y otras extensiones.

De acuerdo, ahora que están registrados, deberían ver esto pero completamente en blanco. Así que veamos si podemos solucionar eso. Y, por supuesto, cuando comienzas con un proyecto en blanco, el primer paso sería importar algunos data al proyecto para tener algo con qué trabajar. Hay un par de formas de hacerlo. La primera es un administrador de respaldo. Entonces, si tienes tu proyecto, lo respaldas en un paquete zip. Puedes usar el administrador de respaldo para importar el paquete zip en otra instancia o en otro proyecto. Hoy vamos a utilizar una solución mejor, y eso es content.aicli. Ahora, el siguiente enlace debajo del registro es para el repositorio que contiene todos los data. Entonces, una vez que hayas terminado con el registro, este será el siguiente paso para llegar al proyecto CLI. También voy a clonar eso, si puedes. Ya tengo ambos clonados en mi local, así que solo te daré unos segundos para hacer lo mismo. Así que solo toma la URL y clónala en tu local.

De acuerdo, voy a abrir el proyecto en Visual Studio Code. Ahora, avísame en el chat cuando veas lo mismo que yo, así sé que podemos continuar. En realidad, este es el proyecto principal. Este es en el que estoy trabajando. Hay otro. Este es el CLI. Mientras tanto, voy a crear un nuevo proyecto para mí también para poder ejecutar la importación contigo. Puedo eliminar todos estos y tener un proyecto en blanco así. Así que solo cierra esto y elimina todo esto y también elimina las aplicaciones de contenido. Este es un proyecto bastante vacío, así que puedo trabajar con eso. Avísame en el chat si necesitas más tiempo. Si ya tienes el proyecto configurado y el segundo repositorio clonado para que podamos continuar. Solo para asegurarnos, voy a poner la segunda URL en el chat también. Pero espero que ya hayas terminado para ahora. Si no, avísame en el chat, ¿de acuerdo? Puedo esperar o puedo explicar algo más. Veamos que todos estamos aquí en el CLI de Content-Aware. Ese es el segundo repositorio que te mostré. Si lo clonaste, eso es perfecto. Ahora, para importar los data en el sistema, vamos a necesitar dos cosas. Necesitaremos el ID de la API de entrega. Cada proyecto que creas en el CMS tiene un ID de proyecto. Aquí está esta URL. Esa es esta parte de la URL. También está en la configuración en Entorno, ID. Entonces, si vas a Entorno, Configuración, General, entonces el ID del proyecto está aquí. Así que simplemente lo voy a copiar. Lo pongo en algún lugar. Podría ser aquí o en cualquier otro lugar, no importa. Voy a crear un nuevo archivo de texto. Solo lo pongo aquí. Este es el ID del proyecto. Y hay otra cosa que necesitaremos. Si volvemos al CMS, hay una sección de clave de API en Entorno, Configuración, y también vamos a necesitar la API de administración. Ahora, la API de administración es una API que te permite editar contenido en el CMS. Ahora, los casos de uso que necesitamos para importar data en el CMS. Así que definitivamente necesitamos una API de administración para hacer eso. Entonces, si no tienes eso habilitado, si es un proyecto en blanco, primero debes habilitarlo con el interruptor aquí y luego generar tu clave de API. Al principio, no estará aquí, debes definir la validez de la clave de API y luego podrás copiar eso. Así que cópialo también en el archivo de texto. Entonces, dos claves de API, ¿verdad? Una es para la API de entrega, otra es para la API de administración. Y lo que vamos a hacer es crear un nuevo entorno para el CLI. Permíteme mostrarte el repositorio de GitHub del CLI donde tenemos los ejemplos. Así que vamos a los repositorios y busca CLI. Es este. Entonces, para la configuración, deberás agregar el entorno, ¿verdad? Esa es esta parte aquí. También está, por cierto, en la presentación que he compartido. Entonces, si miras el proyecto principal, el primer repositorio que te mostré hay un archivo llamado Workshopx.pdf. Aquí, verás toda la presentación que estoy mostrando, que también contiene todos los comandos importantes, ¿verdad? Así que siéntete libre de usar eso también. Pero ahora mismo, solo voy a copiar el comando del repositorio. Así que ese es el contenido del comando de agregar entorno.

Luego necesitamos nombrar el entorno de alguna manera, y configurar el ID del proyecto y la clave de API. Así que simplemente voy a hacer eso en Visual Studio. Este es el entorno. Este es el primer proyecto que primero vamos a necesitar instalar NPM. Entonces npm i, para instalar todas las dependencias, incluido el contenido CLI. Y luego es un contenido, déjame ver, agregar entorno de contenido. Agregar entorno de contenido, el nombre va a ser depth. Y luego vamos a configurar el ID del proyecto. Y el ID del proyecto es el primero. Y la clave de API, que es la segunda. Genial. Ahora que tenemos ambos allí. De acuerdo. Agregar entorno de contenido, nombre, ID del proyecto y clave de API. Ahora que tenemos ambos allí, puedes confirmar eso y se va a crear un nuevo archivo que tiene, uh, ¿qué hice mal? No hay argumentos. Agregar entorno de contenido, uh, debería haber dos guiones aquí. Entonces, dos guiones para el nombre, ahora deberíamos estar bien. De acuerdo. Ahora, en mi caso, el entorno deaf ya existe. Uh, lo estaremos sobrescribiendo en tu caso, el archivo no debería estar allí. Entonces, una vez que ejecutes esto, deberías ver el archivo de Jason de entornos y debería tener el ID del proyecto y la clave de API. Así que te doy un minuto para terminar esto. Avísame si tienes algún problema. Um, pero esto significa que podemos comenzar a importar datos en el proyecto de contenido. De acuerdo. Una vez que hayas terminado con esto, um, hay un script que podemos ejecutar. Que se llama NPM run migrate all, esto significa que vamos a tomar todos los datos que están en las migraciones. Entonces verás que hay algunos archivos en la carpeta de migraciones. Estos archivos en realidad solo definen los tipos de contenido que vamos a crear en el CMS, ¿verdad? Probablemente no sea necesario entrar en más detalles sobre esto. Um, ya que están probados y sé que funcionan, pero esto va a inicializar el proyecto para nosotros. Así que voy a ejecutar NPM run migrate all, y esto va a tomar un segundo, um, porque crea un montón de tipos de contenido y un montón de datos. Ahora déjame eliminar eso y ejecutar la migración nuevamente, porque hay un archivo status dot JSON que, uh, ya sabes, realiza un seguimiento del progreso de tus migraciones. Y en mi caso, um, pensó que, uh, todas las migraciones ya se habían um, terminado. Así que ahora vemos que en realidad está importando datos en el sistema. Entonces, si estás ejecutando lo mismo, uh, deberías ver resultados similares a los míos. Ahora, la última migración lleva un poco más de tiempo, um, porque también carga un video un poco más grande. Pero debería ejecutarse. Ahora, cuando volvamos al CMS, deberíamos ver algún contenido aquí. Número dos, actualiza la ventana. Porque acabo de tocar, ya sabes, los elementos a través de la API. Deberíamos ver 54 elementos de contenido aquí en el repositorio. Uh, mientras estamos en eso, al hacer clic en este botón en la parte superior, podemos seleccionar todos los elementos y simplemente publicarlos. Entonces, antes, um, cuando los elementos estaban en borrador, no formaban parte de la API de entrega. El CMS solo incluirá los elementos que ya están publicados en la API de datos para que puedas obtenerlos a través de la API. Todo lo que está en borrador u otros pasos del flujo de trabajo no estará en la respuesta de la API de entrega. Por eso estoy publicándolo ahora, porque quiero consumir los datos. No quiero procesarlos más. De acuerdo. Te doy un minuto más para terminar esto y publicar todos los elementos. Luego volveremos a la presentación o avísame si necesitas más tiempo o si necesitas explicar algo más.

De acuerdo. Avísame si necesitas más tiempo. De lo contrario, seguiré adelante. Ahora que tenemos el contenido en el CMS, podemos continuar con la masterclass real, ¿verdad? Esto fue solo un requisito previo para todo. Entonces, en primer lugar, también expliqué qué es el contenido de IA en nuestro CMS sin cabeza. Ahora simplemente importamos todos los datos. Así que está bastante claro lo que el CMS puede hacer por ti con las APIs. Creo que también podemos omitir eso. Si quieres saber más sobre el contenido, compartiré el enlace para, uh, ponerte en contacto o visitar nuestro sitio web más tarde.

Ahora, ¿qué es Astro? Astro es un marco de trabajo de front-end o una forma de construir sitios web que es particularmente popular en estos días, porque va en contra de la tendencia de los últimos años. Porque el año pasado fue React. Correcto. Fue Next.js, fue Gatsby, que compitieron como el mejor o el marco de trabajo de front-end más utilizado. Ahora Astro va desde un ángulo diferente. Intenta hacer que los paquetes del cliente sean lo más pequeños posible, porque los sitios pesados de Next.js o Gatsby vienen con paquetes de cliente bastante voluminosos. Correcto. Entonces Astro intenta hacerlo de manera diferente, incluir la menor cantidad de JavaScript posible para que el sitio funcione. Ahora con Astro, puedes trabajar con React, Vue.js, JavaScript básico, lo que prefieras. Lo importante es que te brinda el marco para el sitio web y puedes incluir lo que necesites, lo que quieras. Así de simple. De lo contrario, las páginas se generan y renderizan en el lado del servidor. Lo cual es diferente de Next.js o puede ser diferente dependiendo de la estrategia de renderizado de la página. Pero lo importante es que Astro también puede funcionar en el ámbito de las funciones sin servidor. Correcto. Así que no te importa tanto eso. Dependiendo del tráfico en el sitio web. Pero, aparte de eso, es muy adecuado para sitios más pequeños. Eso es Astro. Voy a compartir el sitio web en un segundo. Entonces veamos, ¿cuál es el siguiente paso? Ya estamos en marcha. Nos registramos en el plan gratuito. También puedes usar mi proyecto. Voy a. Agregar las claves de la API en un segundo en la ventana de chat. Y llamamos al proyecto de CLI un editor de entorno. Así que este es el primer paso completo que ya hemos realizado en este punto. Sí. Tenemos todo el contenido en el CMS y ejecutamos 'npm run migrate'. Así que deberíamos estar bien. El siguiente paso sería ejecutar el sitio vacío de Astro. Entonces el primer repositorio que te mostré, um, ahora, ¿cómo traigo de vuelta a Firefox? Ahí vamos. Entonces el primer repositorio que te mostré, el taller de react summit, 20, 23. En realidad, este es un sitio de Astro. Entonces, si lo clonaste desde la rama principal, entonces deberías poder hacer lo mismo que estoy haciendo ahora, que es abrir Visual Studio y ver el código aquí. Lo primero que debemos hacer es ejecutar 'npm i' para instalar todas las dependencias si aún no las tienes. Ahora ya las instalé porque en el taller anterior no lo hice. Y me llevó 20 minutos instalar todo. Debido a que, ya sabes, había demasiados módulos. Y ahora, cuando hago 'npm run dev', debería compilar un sitio y permitirme visitar el sitio en localhost:3000. De acuerdo. No se pudo importar. Sí, este es mi error. Lo siento. Así que vamos a eliminar eso de la página de inicio. Sí. Por ahora, eliminémoslo. Bien, déjame ver, pero esto debería estar bien. Creo. Sí, esto está bien. Entonces, si estás viendo lo mismo que yo en este momento, cuando ejecutas el local host 3000, deberías ver la página de inicio. Hay un bonito video reproduciéndose en el fondo y, um, solo un montón de texto y algunos destinos. Sí. Este es el sitio esotérico simple. Puedo mostrarte cómo funciona. Entonces, en la carpeta source, hay una carpeta pages, que contiene un archivo index.astro. File. Esto es lo que Astro usa para construir la estructura de tu página. Por supuesto, contiene todo el enrutamiento basado en archivos, al igual que Next.js u otros marcos, pero eso no es lo que haremos hoy. Solo queremos una página simple.

Uh, hay, uh, layouts. Así que solo tengo un layout, uh, para todo el sitio web, que contiene todo el encabezado, uh, elementos del encabezado. Uh, contiene el cuerpo. Y por supuesto, tiene una sección principal con un espacio aquí. Aquí es donde las páginas realmente inyectan su contenido. Uh, tiene un menú, tiene un pie de página, todo lo básico.

Entonces, um, no tenemos que perder tiempo, ya sabes, trabajando en lo básico aquí. Entonces, um, lo importante, uh, lo otro importante es que con Astro, puedes incluir estilos directamente en los componentes. Entonces aquí en el layout, ves, hay algunos estilos, que en realidad son SaaS. Entonces puedes usar CSS o SaaS o un CSS, dependiendo de tu preferencia. Y Astro lo construirá por ti. Y hay dos alcances, global o local. Entonces ves, estos son los estilos solo para este componente, mientras que estos estilos se aplicarán globalmente en todo el sitio. Sí. Así es como funciona Astro.

Lo importante aquí es que cada componente tiene estas tres guiones al principio, esto sirve como un límite. Significa que todo el código que incluyas aquí en la sección superior nunca llegará al paquete del cliente. Entonces, si necesitas que algún código se ejecute en el lado del servidor, que será todo el código que necesitaremos hoy, este es un código seguro porque nunca llegará al paquete del cliente. Sí. Para eso son estos límites. Ahora el resto es solo JS6. Sí. Puede ser un HTML, puede ser, ya sabes, JS6 como lo conocemos en React que hace que sea muy fácil componer todas las páginas, pero si realmente quieres usar algunas variables aquí, como el título o si es la página de inicio, debes definir esas variables. Entonces todas estas variables estarán disponibles para el front-end. Sí. Pero si haces algunas operaciones aquí que requieren claves de API y todo lo demás, nunca llegarán al paquete del cliente.

De acuerdo. Eso es Astro. Ahora todavía estamos obteniendo algunos errores 404. Déjame ver. ¿Dónde está eso? Creo que viene de uno de los componentes. Sí. Debería venir de aquí porque hay un póster. Sí. Solo quítalo. Guárdalo y deberíamos estar bien. Sí. No más errores 404. De acuerdo. Avísame si estás en la misma página, si puedes ejecutar el sitio, cuando hagas el pequeño cambio, todavía no sé qué pasó allí. Oh, hubo un error tipográfico aquí. Es una suscripción al boletín, debería ser P en lugar de B. Déjame corregirlo. Y podemos usar el componente más tarde. De acuerdo. Avísame si necesitas más tiempo, de lo contrario, podemos pasar al siguiente paso. No configurar localmente, solo observar en caso de que sea el único que te siga. Oh, no te preocupes por eso. Está perfectamente bien. Puedes simplemente observar si prefieres, o puedes intentarlo por tu cuenta. Está bien. De acuerdo. Sigamos adelante. Cerramos el contenedor CLI, ya no lo necesitamos. Y echemos un vistazo a la presentación para el siguiente paso. De acuerdo. Tengo que minimizar esto. En el proyecto principal, ejecuta NPMI y NPM RunDev. Eso es lo que ya hice. Y tenemos el sitio en funcionamiento y ahora necesitamos agregar dos páginas. Eso es una página de inicio y una página de actualización de vuelos. Como mencioné, este sitio web es para una aerolínea. Oh, Moritz dice, lo mismo para mí. Llegué un poco tarde debido al trabajo. Y voy a observar. De acuerdo. Perfecto chicos. Gracias por decírmelo, entonces no tenemos que, ya sabes, esperar. Así que hay dos páginas, la página de inicio y la página de actualización de vuelos. La primera ya está ahí.

Como acabamos de verlo. Así que déjame volver a agregar la suscripción entonces. Oh, suscripción al boletín. Guardemos eso. Y podemos agregar otra página para la actualización de vuelos. Ahora es necesario entender las actualizaciones de vuelo. Permíteme mostrarte a qué me refiero. Entonces, en el CMS, hay vuelos, destinos, aviones y todo lo que una aerolínea tendría. En el caso de las actualizaciones de vuelo, eso es lo que quieres mostrar en el sitio web para los pasajeros. Así que si miramos la información de vuelo aquí, hay varios vuelos y cada vuelo tiene un avión que lo opera. Tiene un origen. Tiene un destino y tiene varios estados, sí, elementos vinculados. Este no tiene ninguno, pero debería haber uno que tenga algunos. Sí. Por ejemplo, este tiene un estado que el vuelo ha sido cancelado debido a condiciones climáticas severas y es una cancelación severa. Correcto. Eso es lo que estamos buscando. Correcto. Eso es lo que queremos mostrar en el sitio web. Ahora esto es solo un ejercicio para entender cómo funciona Astro, ¿verdad? Así que solo voy a volver a Visual Studio y agregar una nueva página llamada flightupdates.astro. Ahora podemos comenzar a construir la página así y construir la estructura HTML. Si estamos aquí solo para mirar y hacer la página, entonces lo que voy a hacer es simplemente copiar la página de la otra rama. Así que si quieres, si quieres ver todo como ya está implementado, hay otra rama llamada solve. Así que voy a tomar la página de la fuente de eso. De acuerdo. Echemos un vistazo a las páginas y las actualizaciones de vuelo. Oh, esta es en realidad muy, muy simple. Entonces ves, solo toma un layout. Así que cada página, al igual que la página de inicio, tiene un layout donde definimos el título, página de inicio, lo que queramos. Esto no es una página de inicio, pero por defecto es falso. Así que no necesitamos preocuparnos por eso. Y hay un componente llamado flight updates, que actualmente muestra solo una tabla de las actualizaciones de vuelo, ¿verdad? Permíteme guardar eso y guardar también la página para que podamos ver cómo funciona en el front-end. Ahora debería estar funcionando, de acuerdo. Así que esta es solo una tabla de todas las actualizaciones de vuelo, y sus estados. Sí, una página bastante simple. Ahora lo que quiero hacer aquí es llenar la tabla con los datos que vienen del CMS, ¿verdad? El primer paso bastante fácil. Y ese es el paso número tres, en realidad. Renombrar el archivo .inv a .inv y proporcionar las claves del proyecto. Así que esa es una tarea bastante fácil. Ya tengo el archivo .inv aquí y ya contiene el ID del proyecto y la clave de API, ¿verdad? Y como eliminé todos los datos al comienzo de la masterclass e importé todo nuevamente, las claves de API deberían ser las mismas, ¿verdad? Así que no tengo que hacer ese paso porque ya está ahí. Para ti o para cualquier persona que esté viendo la grabación, hay un archivo .inv.template, así que solo puedes agregar las claves aquí y establecerlo como .inv. Ahora, para obtener los datos del CMS en tu proyecto de Astro, se necesita un paso simple y eso es crear la carpeta dentro de source llamada lib y aquí podemos llamarlo archivo content.ts donde realmente definimos el cliente de entrega. Ahora, para entender qué es el cliente de entrega y cómo funciona, primero permíteme instalar esto. Debería haberlo hecho primero, pero ya lo hice. Así que sí, vamos a instalar primero el SDK de TypeScript. Entonces el SDK de TypeScript es algo que necesitaremos para cualquier contenido para que realmente llegue al proyecto. Limpiemos eso, voy a ingresar content slash, uh, content dash AI slash delivery SDK. Esto debería ser rápido. Así que esto instala el SDK de entrega que está diseñado para TypeScript y que nos permitirá obtener los datos del contenido. También voy a instalar otro paquete que se llama model generator JS. Ahora espero poder encontrar el nombre de NPM aquí. Sí. Ahora lo que hace el generador de modelos, o es posible que ya lo tengas en el package JSON. Permíteme verificar rápidamente. Sí, ya lo tenemos en las dependencias profundas. Entonces el generador de modelos, lo que hace es tomar todos tus tipos de contenido y generar tipos de TypeScript a partir de eso para que puedas trabajar con el contenido de manera segura en cuanto a tipos, ¿verdad? Así que intentemos hacer eso. Ahora no tengo que instalarlo porque ya está instalado. Y el script ya está incluido aquí y es generate-model.ts. Lo que hace es crear una carpeta, eliminar una carpeta y generar todo, ya sabes, basado en la clave de API y el ID del proyecto. Hay algunas opciones de configuración que están diseñadas para adaptarse a tu proyecto. Entonces, como quieras llamarlo. Solo vamos a necesitar ejecutar este proyecto y primero crear la carpeta también. Así que fui a code models, incluso si son tipos. Es solo un hábito y voy a agregar el script a package que JSON porque eso es, estoy seguro de que es el siguiente paso. Sí, el script está en generated models y lo vamos a ejecutar usando TS node. Ahora, si te das cuenta, el script está en TypeScript, sí, así que lo que necesitas hacer es ejecutarlo sobre la marcha usando TS node. Porque de lo contrario tendríamos que compilarlo en Java a JavaScript, ¿verdad? Así que ya tenemos el TS node en las dependencias. Lo único que tenemos que hacer es agregar un script. Me gusta llamarlo regenerate models. Y vamos a escribir como TS node. Creo que es atributos como RC, déjame ver.

No lo tengo aquí. De acuerdo. Así que veamos si tengo razón. Está en source, scripts y generate models.ts. ¿De acuerdo? Lo único que necesitas hacer es agregar un script en el archivo npm package.json y ejecutarlo.

Ahora esto es, de acuerdo. Una vez que enviamos el archivo, buscamos coincidencias. ¿Qué hice? Una comilla adicional aquí. Y esto también es PSM. Veamos si esto está bien. No. Requiere argumento, de acuerdo. Permíteme ver en la copia de seguridad cómo debería verse. Creo que estoy bastante cerca, honestamente. Oh, esto es, esto es el generador de modelos, de acuerdo. Repositorio equivocado. También repositorio equivocado. Ahora tengo el banner de zoom en todas mis pestañas. Permíteme arreglarlo aquí. No, no, este era el correcto. Perfecto. Así que package.json. Bien, no requiere los atributos source. Solo proporciona la ruta de origen. Permíteme arreglar eso. Entonces ESM, y en realidad no necesitamos las comillas, parece. De acuerdo. Esto parece funcionar. Ahora, lo que hace esto, genera, genera todos los modelos en el contenido en la carpeta models. Así que obviamente necesitas ejecutar esto cada vez que agregas un nuevo tipo de contenido o ajustas el tipo de contenido en el CMS para que tengas todo, uh, ya sabes, actualizado.

Ahora ves que debajo de models, uh, tenemos, ¿qué tenemos? Tipos de contenido. Oh, no los veo aquí. Resolver personalizado. Debería estar aquí. Tipos de contenido. Oh, está bajo tipos de contenido. De acuerdo. Así que aquí ves que ahora tenemos el modelo de avión, modelo de aeropuerto. Estábamos viendo vuelos, así que veamos el modelo de vuelo. Uh, ves, este es un elemento de icono, pero al menos todos los elementos que están en ese tipo de contenido. Correcto. Entonces, cuando obtienes los data del CMS, los obtendrás en, en estos tipos y, um, puedes trabajar con ellos de manera segura en cuanto a tipos. Te lo mostraré en un segundo. Um, pero sí, como dije, es importante regenerar esto cada vez que cambies algo y también genera un archivo de proyecto, uh, que quiero mostrarte que contiene todos, uh, todos los nombres de código y todos los otros data sobre tus tipos de contenido. Así que estos son los metadatos de, uh, de tu, uh, modelo de contenido, ¿verdad? Lo genial aquí es, o el gran beneficio es que no tienes que, um, escribir los nombres de código como literales de cadena. Y, um, si hay incluso un error tipográfico o algo así, um, tu código será más robusto porque solo estás usando las constantes, ¿verdad? No estás usando los literales de cadena. Lo mismo ocurre. Si cambias el nombre de código de un tipo de contenido, se reflejará aquí cuando lo regeneres y podrás trabajar con él de esa manera. Así que no más literales de cadena en tu código. Y también está marcado como const, lo que significa que nunca puedes cambiarlo. Así que a lo largo de toda la vida útil de tu aplicación, esto permanecerá igual. Así que eso es lo que también se genera. Sigamos adelante y volvamos al archivo content.ts que se utiliza para, uh, crear el cliente de entrega y permitir que todos tus componentes lo usen. Entonces lo primero que debes hacer es hacer el cliente de entrega o en realidad necesitamos exportarlo. Um, y vamos a necesitar crearlo. Ahora, el mejor lugar para encontrar el código que realmente crea esto. Si no lo sabes de memoria, es el repositorio de GitHub del SDK. Así que en realidad no lo sé de memoria. Probablemente podría intentarlo, pero. De acuerdo. Está bien. Entonces este es uno delivery SDKJS. No, ya lo tenemos instalado, así que no necesitamos instalarlo de nuevo, pero, uh, vamos a necesitar crear el cliente de entrega. Entonces este es el código que necesitaremos, ¿verdad? Para crear el cliente de entrega y ten en cuenta que solo hay una cosa obligatoria. Y eso es el ID del entorno. Ahora, ¿por qué no se llama ID del proyecto? Correcto. La cosa es que cuando estás trabajando en un proyecto y hay contenido dentro, tú como desarrollador, cuando estás probando nuevas funciones o quieres ajustar el contenido de alguna manera, necesitarías hacerlo en producción o tener varios entornos de preparación.

Con contenido, obtienes entornos de forma predeterminada. Así que estamos trabajando con el ID del entorno, y cuando quieres probar algo, simplemente puedes clonar fácilmente ese entorno en uno nuevo. Úsalo para jugar o realizar la migración allí. Y luego puedes cambiar entre esos entornos o marcar el nuevo entorno como producción. Así que principalmente es para developer experience.

Ahora, el ID del entorno proviene de nuestro archivo dot net, dot env. Permíteme ver cómo podemos hacer eso en Astro. Creo que es import meta y aquí tenemos la API de contenido. No la clave de API. Eso está mal. Debería ser el ID del proyecto. Por supuesto, necesitamos agregar la importación. Por eso se queja. Pero ahora, cuando tienes la importación aquí y creas el cliente de la biblioteca, deberías poder importar el cliente de la biblioteca en cualquier componente que Astro use. De esta manera, puedes usar el cliente de entrega y la entrega de contenido en cualquier lugar de tu proyecto, lo cual es muy útil. No es algo que puedas hacer fácilmente en otras plataformas como Gatsby o Next.js.

Este es el archivo content.ts que tenemos en el tercer paso. Y debería exportar la instancia del cliente de entrega, lo cual hace actualmente. Ahora, el siguiente paso sería editar el componente de actualización de vuelos y obtener los data de ese data del CMS. Ahora ya tenemos la estructura HTML lista, así que lo único que tenemos que hacer es obtener los data en el ámbito del componente y renderizarlo.

Entonces, simplemente vamos a volver a las actualizaciones de vuelos, astro. ¿Y este es el lugar donde queremos hacerlo, verdad? Así que llamemos a eso actualizaciones de vuelos. Y como dije, vamos a usar el cliente de entrega, y lo ves como la importación automáticamente. Y ahora simplemente definimos lo que queremos, ¿verdad? Así que queremos elementos, queremos elementos que sean los vuelos. Entonces mi modelo, o mi tipo, se llama modelo de vuelo, y ves que tiene todos los campos, aeronave, llegada, salida, destino, origen y estados. Así que vamos a tomar eso.

Por supuesto, también necesitamos especificar un tipo, que nuevamente proviene de la constante, como te mostré hace un segundo. Viene de los tipos de contenido. Entonces, como el nombre del código, y luego necesitamos una cosa más, y eso es un parámetro de profundidad. Ahora esto significa que no solo vamos a tomar los propios elementos, sino que también queremos los elementos vinculados porque tenemos aeronaves, tenemos destinos allí, y probablemente no solo queremos sus nombres de código, sino también sus títulos, ¿verdad? Para poder mostrarlo en la tabla. Solo voy a configurar la profundidad en dos, lo que significa el elemento principal más el elemento que está debajo de él, ya sabes, en la jerarquía. Así que vamos a obtener eso, y luego necesitamos hacer toPremise, y esta es una llamada asíncrona que llama a la API, así que queremos esperarla. Como mencioné antes con Astro, cuando defines una constante así y contiene data, puedes usar esta constante en la estructura HTML.

Entonces, las actualizaciones de vuelos, las tenemos aquí. La tabla está bien, pero vamos a tener que hacer esta parte dinámica, porque esto es solo una línea. Así que lo que vamos a hacer, como harías en React, simplemente haces aquí actualizaciones de vuelos, ¿eran actualizaciones de vuelos? Sí, actualizaciones de vuelos, o en realidad estos son vuelos, no actualizaciones de vuelos. Llamémoslo vuelos. Y luego ponemos la línea ahí. Y ahora esto es solo un trabajo manual. De acuerdo, no solo mapeamos vuelos sino elementos de datos de vuelos, porque esto es en realidad la respuesta del CMS, no los datos reales que están en las propiedades data y items. Ahora, esto es solo un trabajo manual, ¿verdad? Solo necesitamos hacer elementos de vuelo. Ahora, este sería el nombre del vuelo, que en realidad es system.name. Porque cuando ves cómo se agrega al CMS, el código de vuelo se configura como el nombre del elemento de contenido. Por eso estoy usando system.name. De lo contrario, siempre estaríamos usando los elementos. Pero este es el único caso especial. Volvamos, y hagamos el resto. Esto sería elementos de vuelo. Creo que esto era la aeronave. ¿Qué era eso? Aeronave. Sí. Aeronave. Probablemente queramos el elemento de enlace. Y los elementos de enlace siempre son una matriz, porque puede haber varios elementos. Ahora mismo, la aeronave es solo una, así que voy a usar el índice cero. Y estamos buscando un ID de esa aeronave, probablemente. Podemos usar el ID o el tipo, ¿verdad? Probablemente también podríamos hacer el tipo, solo para que sea más interesante. Así que hagamos tipo y nombre. Ahora, para los destinos, va a ser muy similar. Así que nuevamente, elementos de vuelo. O esto es origen, en realidad. Origen. Nuevamente, podemos tener múltiples orígenes, o podemos tener múltiples elementos de enlace, pero solo un origen, ¿verdad? En realidad, está obligado a nivel del CMS. Ves que en el origen, hay exactamente un elemento, solo se permite un elemento. Lo mismo ocurre con los destinos. Entonces, si lo tienes en borrador, puedes agregar tantos como quieras, pero el sistema no te permitiría publicarlo. Así que para publicar un elemento, debes cumplir con todas las reglas que están aquí. Así que cuando estoy preparando el código para el frontend, sé que siempre habrá exactamente un elemento.

De acuerdo, ahora para el origen, queremos el título. Lo mismo ocurrirá con el destino. Y luego necesitamos configurar la fecha y hora. Así que eso va a ser el ATS. Estamos usando AJS para eso. Y va a ser elementos de vuelo y Salida. Y necesitamos proporcionar el formato, así que eso es, solo estoy adivinando aquí, espero estar haciéndolo bien. Hora y minutos, veremos si funciona. Y simplemente copia eso en la llegada. Y lo último es en realidad la actualización de estado. Ahora esto se vuelve un poco más complicado, porque puede haber múltiples estados como elementos vinculados, si los estados provienen de los agentes de la puerta o de quien los agregue, puede haber múltiples estados. Entonces lo que queremos hacer es seleccionar el último, el más nuevo, ¿sí? Y también hay otro componente y ese es la clase, porque eso refleja la gravedad de la información proporcionada. Ahora ya tenemos aquí un componente de estado de vuelo que maneja todo eso, todo eso por nosotros. No le gustan mis modules. Veamos si lo quito e importo de nuevo. No se puede encontrar el módulo. De acuerdo, veamos si todavía está, oh, ahora funciona bien. Probablemente solo sea un problema de caché. Bien, entonces este componente en realidad hace exactamente eso. Ordena todos los estados según la fecha y selecciona el primero de la lista. Así que no tenemos que preocuparnos por eso. Ya está implementado aquí.

Entonces, solo necesitamos usar el componente de estado de vuelo y proporcionarle todos los data. Así que estado de vuelo, déjame ver, en realidad. Solo voy a importarlo. Déjame ver cómo debería llamarse el data. Así que se llama estados, el atributo se llama estados. Entonces, en Astro, lo que realmente puedes hacer es configurar una interfaz llamada props y definir qué props se requieren para ese componente, ¿verdad? Entonces, cada vez que haces esto, ya está tipado como un modelo de estado. Y también me da una pista cuando hago esto. Ves que hay un estados y acepta una matriz de modelos de estado. Así que voy a hacer eso y proporcionar los elementos de vuelo, estados, elementos de enlace. Muy bien, y eso concluye el primer paso. Ahora la tabla de actualizaciones de vuelos debería estar funcionando. Veamos si puedo ejecutar esto. Voy a cargar esto. ¿Dónde está mi página? Aquí, sí. Perfecto. Ahora ves que estos son todos los vuelos que tenemos en el sistema. Hay un montón de nodos aquí. Algunos de ellos son problemas, algunos de ellos son información, etc. Así que los data parecen estar llegando correctamente desde el CMS. Perfecto. Ahora, otro paso está terminado. Incluso si solo están observando, avísenme si todo está claro o si necesito explicar algo más. Conozco el proyecto bastante bien, así que algunos conceptos pueden ser más fáciles para mí. Y, sí. Avísenme. Estoy mirando el chat aquí, así que está bien. Y luego podemos ejecutar este sitio con npm run dev, así que avísame qué has hecho y todo parece estar funcionando bien.

Entonces, lo siguiente que debemos hacer es agregar una resolución de texto enriquecido. Ahora, ¿por qué es un problema la resolución de texto enriquecido? Cuando miras, vayamos a la página de inicio. En la página de inicio, ves un montón de componentes aquí y hay destinos. Ahora, actualmente, tengo todos los destinos en el alcance del componente de listado y simplemente enumera todos los elementos como lo hicimos en la página de actualización de vuelos, ¿verdad? Estos son solo un montón de elementos HTML en el componente de listado. Ves nuestros destinos, Londres, San Francisco, Estocolmo, esto es solo una lista simple.

Ahora, lo que sucede cuando miras los data en el CMS, como Londres, por ejemplo, veamos Londres. Ese es un destino, así que podemos filtrarlo, veamos Londres. Ves que hay una foto, hay un título y hay un texto. Ahora, cuando creo una nueva versión de eso, obviamente puedo agregar más cosas, puedo agregar más texto. Sin embargo, está en Ámsterdam. Y puedo formatear esto de alguna manera, H2 o lo que sea. Y también puedo agregar diferentes cosas. Ahora, todos estos están desactivados en este momento porque cuando importé los data usando la CLI, todos estos elementos están marcados como desactivados. Pero lo que definitivamente puedo hacer es volver al modelo de contenido y ajustar el destino. Este es el modelo para el destino. Y puedo cambiar las limitaciones del texto enriquecido para permitir no solo texto sino también componentes e imágenes. Cuando guardo esto y vuelvo al contenido y miro nuestro Londres, ahora lo que puedo hacer es agregar componentes en línea. Puedo agregar cualquier cosa porque no hice ninguna restricción. Ahora lo haremos en un momento. Crearé un nuevo componente y lo haré. Pero solo quería mostrarte que la resolución de texto enriquecido es un poco problemática porque en primer lugar, cada CMS maneja esto de manera diferente por lo que cuando necesitas resolver eso, debes aprender los detalles específicos de tu CMS. Y luego, en cada lenguaje, quiero decir lenguaje de programación en cada plataforma front-end, esto también se maneja de manera diferente. Por eso es un poco desafiante. Ahora con Texto, es fácil, con H2, H1 y así sucesivamente. Se complica cuando comienzas a enlazar otros elementos. Por ejemplo, digamos que quiero ver, revisar, también Estocolmo, ¿verdad? Y debido a que este es un LCMS, no un CMS normal, no puedes trabajar con URL directamente. Por lo tanto, es mucho mejor simplemente enlazar a otro elemento de contenido. Y eso podría ser Estocolmo, ¿verdad? Hice Estocolmo. Ahora, en tu código front-end, ahora debes resolver esto porque solo enlaza a otro elemento. Solo te da el nombre de código del otro elemento. Entonces debes resolver ese enlace en una URL si estás en un sitio web. Lo mismo ocurre con las imágenes. Lo mismo ocurre con los componentes en línea, ¿verdad? Si agrego aquí un componente en línea, en el código, obtendrás un nombre de código de ese elemento de contenido. Y debes resolverlo en un HTML de ese componente. Entonces de eso se trata la resolución de contenido o la resolución de texto enriquecido. Ahora déjame publicar esto. Para que obtengamos algunos data con los que podamos trabajar. Y mientras tanto, porque generalmente lleva un tiempo entre la publicación del elemento y que el elemento esté disponible en la CDN, porque, ya sabes, el diseño del sistema es ser lo más resistente y robusto posible. Por lo tanto, hay muchas colas de mensajes y todo para asegurarse de que el contenido se almacene de manera segura allí. Por lo general, tarda unos segundos en llegar a la CDN. Pero lo que quería hacer mientras tanto es esto. Entonces, poniendo tus destinos, nuevamente, usa el Cliente de Entrega para obtener el modelo de destino y hacerlo de tipo Destino. Ahora, nuevamente, queremos la profundidad porque tenemos el texto enriquecido allí y también queremos obtener los componentes. No solo sus nombres de código, sino que también queremos obtener los data de esos componentes enlazados. Entonces voy a hacer la profundidad dos y hacer dos Promise. Por lo tanto, vamos a esperarlo. Y ahora tenemos destinos. Así que voy a borrar todo excepto el primer elemento de la lista. Y llamémoslo Destinos. Nuevamente, data, elementos y mapeo. Solo voy a poner esto aquí. Y, por supuesto, tenemos esa imagen aquí. Así que eso debería ser fácil. Entonces usamos el destino. Elementos, y hay una foto, que es un elemento de Activo. Así que vamos a usar eso. Hay un valor y también hay una matriz de elementos porque en el alcance de un activo puedes tener tantas imágenes como quieras. Por eso estoy seleccionando la primera porque es obligatoria. Y siempre debe haber al menos una y lo mismo ocurre con el texto alternativo. Entonces elementos, foto, valor, cero y descripción, ¿verdad? Entonces aquí, cuando miras Londres, creo que para esto no tengo ninguna descripción. Así que puedo decir que este es nuestro puente y actualizado. Ahora también vamos a tener el filtro del atributo alt. Así es como trabajas con los activos. Ahora es obligatorio, por lo que no podremos publicarlo a menos que haya al menos una imagen, ¿verdad? Y podemos hacer el resto. Entonces esto es fácil, destino, elementos, título y valor. Y esto se vuelve un poco complicado porque ahora tenemos el párrafo aquí, pero de forma predeterminada, y esto es solo para content.ai, de forma predeterminada, obtienes el contenido y los componentes en línea en forma de contenido HTML, ¿verdad? Entonces, si tu contenido es lo suficientemente simple, eso significa texto y viñetas y solo estas pequeñas cosas fáciles, lo que podemos hacer es, creo que es un fragmento y establecer html. Ahora podemos proporcionar aquí el destino y el elemento de texto. Entonces, esta es la forma en que Astro renderiza. Esto es básicamente como, ya sabes, desde react dangerously set inner HTML. Es lo mismo, pero solo para astro.

Cuando hacemos fragmentos de HTML, les proporcionamos los datos y se renderizan como HTML. Así que cuando miras la página, creo que esto todavía se está ejecutando, así que podemos ir a la página de inicio. Sí. Oh, tal vez ya estaba allí. Ahora ves que hay Londres, San Francisco, Estocolmo. El React Summit está en Ámsterdam, sin embargo. Es un h2. Así que ves, también el h2 se conserva aquí. Ni siquiera hicimos ninguna resolución, pero aún está ahí. Y también está Estocolmo, pero ves que esto no lleva a ninguna parte. Todavía va a la página de inicio. Así que primero necesitaríamos resolverlo. Sí. Ves, hay un elemento de datos ID que contiene el ID del otro elemento de contenido, pero el CMS Zeta no tiene ninguna idea de a dónde debería llevar eso o cuál es la URL del otro elemento. Así que es tu trabajo en el front-end resolverlo realmente. Pero hasta ahora todo va bien. Así que todo el contenido proviene del CMS. Todos los destinos son visibles. Así que déjame volver a esto, a la presentación por un segundo, y este es un buen momento para mostrarte qué es el texto portátil. Como mencioné, cada CMS maneja su solución de restricción de manera un poco diferente. Entonces, lo que generalmente sucede es que tienes un CMS sin cabeza, te proporciona los datos de alguna forma. Esto es un círculo azul, por ejemplo. Podría ser JSON, podría ser, podría ser HTML, podría ser XML, podría ser cualquier cosa realmente. Y también los datos están en diferentes formatos, incluso si dos CMS utilizan JSON como su estructura de exportación, la estructura de los datos será diferente. Entonces, ¿qué haces entonces? Tienes que tomar los datos y renderizarlos en un sitio web. El sitio web puede estar en JavaScript, puede estar en .NET, puede ser Astro, puede ser Svelte, puede ser cualquier cosa que puedas imaginar. La complejidad que esto genera es que tienes prácticamente un número infinito de implementaciones, porque primero debes tener en cuenta la estructura de tu CMS Atlas, luego debes tener en cuenta las posibilidades y herramientas de tu plataforma, y luego haces la integración. Entonces, como desarrollador, tienes mucho trabajo que hacer, o puedes encontrar un paquete que ya lo haga. Pero el problema es que cuando cambias el CMS o cambias la plataforma, te enfrentas al mismo problema nuevamente. Eso significa que debes tener en cuenta todas estas cosas nuevamente y corregir el código para que haga lo que debería hacer para resolver todo, ¿verdad? Lo que hace el texto portátil es tratar de resolver el problema del CMS sin cabeza o en la parte del CMS sin cabeza. Entonces, lo que hace es que el CMS proporciona un complemento o una forma de convertir los datos en texto portátil. Por lo tanto, esa es una estructura definida de los datos o de componentes de bloques, prácticamente bloques de contenido. Y luego solo estos bloques se traducen en el sitio web. Entonces, cuando tienes datos en texto portátil, podemos usar un código que los mostrará en un sitio web de Astro. Ahora, lo que definitivamente hace esto es eliminar la complejidad que de lo contrario estaría en los desarrolladores. Elimina la complejidad y la traslada al lado del CMS sin cabeza, porque ahora cada CMS sin cabeza es responsable de convertir su contenido, o tu contenido, pero en su estructura, en texto portátil. E incluso si cambias el CMS sin cabeza y el CMS sin cabeza puede entregar los datos en formato de texto portátil, estás bastante cubierto porque la sintaxis y la forma en que se muestran los datos y se entregan están definidos, ¿verdad? Entonces eso elimina la complejidad de la primera parte, y luego, al traducir el texto portátil en el sitio web, no tienes que hacerlo por tu cuenta. Ya existen paquetes que hacen eso porque tienes una única fuente y un único destino. Por lo tanto, es fácil hacer esa transición desde un formato definido a un marco definido. Entonces, en realidad no tienes que hacer todo por tu cuenta, pero podemos usar bibliotecas de GitHub que te ayudan a hacer lo mismo. Y como ambos están estandarizados, es mucho más fácil crear ese paquete y mantenerlo. Así es el texto portátil. Puedo mostrarte el repositorio de GitHub del texto portátil si lo tengo abierto. Así que déjame encontrarlo aquí. Solo queremos el repositorio principal. Ahora déjame pegarlo en la ventana de chat. No creo que esté enlaces. Así que si quieres comprobarlo por ti mismo, échale un vistazo. Este es el repositorio principal del texto portátil o en realidad es la organización. Tenemos que verificar esto. Así que es portable. Eso es texto portátil de nuevo. Así que tenemos que ver cómo se ve realmente el texto portátil. Lo más importante es, oh, déjame ver. Entonces hay, esto es un bloque por ejemplo, o dos en realidad. Así que hay uno que se llama texto de span. Hay otro que tiene un énfasis de marca y es importante. Así es como funciona el texto portátil. Lo que es más, como estos son los conceptos básicos. Como dije, los H1, H2, bolas de énfasis, cursivas, etc. Lo que es más importante o interesante, son los bloques personalizados. Así que te mostré que realmente podemos enlazar a otros elementos de contenido. También podemos agregar componentes en línea, lo cual haremos en un momento. Pero lo que quería mostrarte es que hay bloques personalizados de tipo imagen, de tipo código, hay otro de tipo personalizado o componente, pero todos estos están definidos, ¿verdad? Esto no es algo que podamos decir, hey, esto va a ser un tipo coche. Esto va a ser un tipo computadora. Ahora todos estos están definidos, por lo que hay una especie de estandarización para el tipo código, para el tipo imagen, pero para todo lo demás, también hay un tipo componente que contendrá una referencia. Entonces, este es exactamente el caso de uso para los componentes en línea pero te lo mostraré en un momento, ¿verdad? Pero solo para que sepamos que esta es la estructura definida del contenido que proviene del CMS sin cabeza y que debes renderizar. Así es como es el texto portátil. Y la tarea ahora es transformar realmente la resolución de texto enriquecido como la tenemos ahora en el lado de Astra para usar el texto portátil. Ahora, en primer lugar, la primera parte es convertir realmente la salida de texto enriquecido del CMS sin cabeza o de content.ai en texto portátil.

Para eso, vamos a necesitar el primer paquete MPM o el content.ai RichTextResolver. Así que déjame instalar eso. Comencemos con esto. Component.ai RichTextResolver, espero que esto sea correcto. Bien, esperemos un segundo para instalar todo. Y cuando tengamos eso, vamos a necesitar otro paquete MPM.

Así que digamos que ahora hemos transformado el contenido en texto portátil con los métodos disponibles en ese paquete. El siguiente paso sería renderizar el texto portátil en componentes de astro. Hay varias formas de hacerlo. Si estás utilizando React, hay una biblioteca para texto portátil a React. Si estás utilizando HTML simple, puedes usar la biblioteca de texto portátil a HTML. En este caso, quiero renderizarlo en, o quiero convertirlo en componentes de astro. Entonces, cada tipo de contenido que tengo en el CMS corresponderá a un componente de astro que tengo localmente.

Para eso, hay un paquete de npm para la transformación de texto portátil a astro, que es de Richard Shackelton. Actualmente, es uno de los MVP de content.AI. Y el paquete es realmente muy nuevo. Probablemente aún no esté listo para producción, pero como no mucha gente está trabajando con textos portátiles todavía porque es una tecnología relativamente nueva o una nueva estandarización. Entonces, el paquete también es bastante nuevo, pero vamos a instalarlo. Así que npm i slash, ¿cómo se llama? Astro portable text. Bien. Ahora, mientras se instala esto, voy a eliminar el fragmento aquí porque vamos a necesitar hacer un poco más que eso. Y esta es la última parte aquí en realidad en la presentación. Así que vamos a usar el componente de texto portátil que proviene de esta biblioteca. Y vamos a usar estas dos funciones transform to portable text, más NodeParse para el contenido. Voy a explicar ambas en un segundo. Entonces, vamos a usar el componente de texto portátil y no le va a gustar porque acabo de instalarlo. Y por alguna razón, siempre tengo que cerrar la ventana y volver a abrirla. Así que déjame hacer eso. Debería ser un segundo. Bien. Así que vamos a usar el componente de texto portátil No, todavía nada. No sé qué está pasando. A veces Visual Studio es muy terco, pero está bien. Así que importemos el texto portátil de Astro Portable Text. ¿Hice un error de escritura en algún lugar? Oh, sí, podría ser. No lo es. Bien. Y hay tres cosas que debemos proporcionar. Y puedes ver, en el autocompletado lo que sugiere. Así que eso es un valor. Eso es un componente. Y eso es un contexto. Ahora, el contexto será diferente para diferentes CMS porque el contenido es un poco diferente en la forma en que maneja los elementos vinculados. Por lo tanto, eso siempre será diferente de un CMS a otro. Pero el valor es en realidad el árbol de texto enriquecido que obtienes del CMS, ¿verdad? Eso es lo que te mostré, la estructura que está definida por el texto portátil. Como se mencionó en la presentación, voy a usar estos dos métodos. Transform Two Portable Texts y NodeParse para el contenido. Entonces, primero que nada, necesitamos usar el NodeParse. Y veamos si esto va a funcionar. No, no lo es. Bien. Así que simplemente voy a hacer la importación yo mismo. Entonces, NodeParse y queremos hacer eso desde el ContentAI rich text resolver. Entonces, NodeParse y necesitamos ingresar, así que eso va a ser el destino, elementos, texto y valor. Entonces, ¿por qué estamos haciendo esto? Como mencioné antes, los elementos de texto, por lo que el texto enriquecido que proviene del CMS está en una forma HTML. Entonces, lo que necesitamos hacer es analizar primero el árbol HTML. para obtener todos los bloques de él. Eso es lo que hace el NodeParse. Estoy usando NodeParse porque estoy trabajando con Astro y lo estamos haciendo en el lado del servidor. Si lo estuviéramos haciendo en el frontend, también hay un analizador de navegador, también en el mismo paquete. Entonces, dependiendo de dónde se realice la resolución. Y luego, lo siguiente es hacer la transformación a texto portátil del árbol analizado. Por supuesto, es la misma importación. Bien, ahora tenemos el valor disponible. Esto es todo lo que necesitamos hacer para el valor, ¿verdad? Ya tenemos el texto portátil. Ahora el problema está en nuestro- déjame cambiar rápidamente al texto portátil. Oh, aquí está. El problema es cuando tenemos un bloque personalizado como los componentes en línea personalizados, pero esto es lo que ya tenemos y ya funcionará para los H1, H2, puntos de viñeta y todo. El problema está con los componentes en línea y todo lo demás que está vinculado que se consideran bloques personalizados.

Y lo que obtenemos de la transformación a texto portátil solo será un componente de tipo. Y habrá una referencia. La referencia contendrá el nombre de código del componente vinculado, ¿verdad? Eso no es realmente útil porque necesitamos renderizar el componente no solo conocer su nombre de código Por eso, vamos a hacer una cosa más. Y eso es proporcionar todo el contexto de todos los elementos vinculados de ese campo de texto enriquecido específico. Entonces, el contexto será elementos de destino, texto y elementos vinculados, ¿verdad? Esto se debe a que aquí he definido el parámetro de profundidad en dos. Entonces, ya tenemos los elementos vinculados descargados, tenemos los data ahí dentro. Solo necesitaría proporcionarlo al contexto del componente de texto portátil.

Ahora se queja porque acabo de proporcionar una matriz simple y espera una estructura de tipo clave-valor, ¿verdad? Así que vamos a arreglar eso en un segundo con reduce. Pero también quiero tocar un poco los componentes, porque por defecto, no tienes que hacer nada aquí. Sí, puedes dejar los componentes vacíos. También dice que es opcional, ¿ves? Aquí, es opcional. Pero lo que necesitamos hacer porque queremos componentes personalizados, necesitamos proporcionar aquí, creo que es componente, déjame verificar. En realidad está en el otro repositorio. De acuerdo, vamos a encontrarlo aquí. Astro portable text. A ver si me lo lee. Así que estamos buscando, ¿qué es, componentes, aquí está. Así es como podemos anular el código. Déjame copiar eso. Astro types, creo que lo hice bien. Y lo he explicado en, esto. Así que aquí vamos a hacer un componente. Y aquí necesitamos proporcionar un componente Astro. Uno que crearemos. Sí, no está ahí. No hay nada como un componente Astro, pero tenemos que crear uno. Lo que hace es registrar este componente como un componente de resolución de ese tipo. Ahora, como mencioné, los tipos, no puedes inventártelos. Creo que están definidos en algún lugar. Oh, tal vez no tengo las definiciones aquí. Pero están definidos. Y el componente es en realidad uno de los nombres. Y vamos a proporcionar otro componente, un componente Astro que manejará todos los casos de uso dinámicos, ¿verdad? Viste en la documentación que había código. Así que eso se usa para el componente de código, ¿verdad? Este es un componente personalizado llamado componente. Se llama componente porque eso es lo que el contenido... Déjame hacerlo ahí. El resolutor de contenido los llama. Resolve. Así que aquí en la resolución de texto portátil, puedes ver cómo maneja esa transformación. Y ves que el tipo es componente, ¿verdad? El tipo es componente y contiene la referencia a los nombres de código de los elementos de enlace o componente. Estas son las dos informaciones clave. Por eso el tipo componente, como mencioné, esto proviene del texto portátil. Así que el tipo componente es lo que tengo aquí en el código, ¿verdad? Así que estoy diciendo que todo lo que llegue como un tipo de componente será manejado por este componente. Ahora, voy a llamar a ese componente de texto portátil. Vamos a crear ese. Vamos a poner aquí un nuevo archivo, componente de texto portátil. De acuerdo, ahora creo que podemos importarlo. No, importación incorrecta. Componente de texto portátil. Estamos en componentes, así que podemos hacer componente de texto portátil Astro. Ahora deberíamos estar bien. Así que ahora significa que todo lo que llegue como un componente será manejado por este componente. Y el contexto, déjame copiar eso del repositorio suave. Así que no tengo que calcular el radio aquí ahora porque honestamente, con el radio, siempre es un poco difícil hacer que funcione. Así que veamos si está aquí. Sí, eso es todo. Voy a copiar eso aquí. Ahora ves que básicamente lo que hace es agreguemos las importaciones. Lo que hace es recibir la matriz de elementos vinculados y la convierte en texto portátil como contexto. Eso es un par clave-valor. Realmente no hay más que eso. Es solo el par clave-valor. Y lo que hace es tomar cada elemento de enlace y usar su nombre de código como clave. Sí. Así que lo libera en el objeto del sistema de elementos nombre de código igual a elemento y lo devuelve. Así es como lo quiere el texto portátil. Así que usemos esa función. Transformar elementos vinculados en contexto global. Y eso está bien. Ahora veamos el componente de texto portátil. Pongamos ahí hola mundo para que veamos que algo está sucediendo. Y creo que estamos listos para ejecutar el proyecto. Muy bien. Puedo renderizar el componente Mark porque es indefinido. De acuerdo. Esto parece que hay una importación incorrecta en algún lugar. Probablemente será esto.

Entonces no debería haber código fuente involucrado. Acceso portátil para contactar como ningún miembro exportado. De acuerdo. Ahora esto definitivamente es un problema de importación. Solo me pregunto, creo que esto es correcto, en realidad. Ustedes tienen algo mal allí. Déjame ver. Déjame ver. Está aquí. Portable next as contacts, ahora está aquí. Entonces la importación en realidad estaba bien. Ese fue mi error. Así que debe estar en otro lugar. De acuerdo. Arreglemos esto. Arreglemos eso. Resolutor de texto enriquecido. Eso está bien. Esto también es bueno. Entonces, ¿qué hay para no gustar? Componente mark, porque es indefinido. De acuerdo. Aún no he visto esa área. Renderizar componente, voy a renderizar componente mark. Pero típicamente es un problema de importación. Así que déjame verificar si todo está bien aquí. Todavía es texto portátil. Eso debería estar bien. De acuerdo. Tal vez no le gusta que ya encuentre el componente. Déjame ver. Creo que usé lo mismo antes. Sí, eso debería estar bien. Déjame ver si tengo todo igual. Todo esto está bien. Intentemos intercambiar esto uno por uno. Intentemos esto runtime. De acuerdo, así que de alguna manera está dentro. Déjame ejecutar esto de nuevo. La solución típica del desarrollador, ya sabes, reiniciar todo, esperando que funcione. No, algo, no le gusta algo. Soy capaz de renderizar mostrando este componente. ¿Olvidaste importar un componente o hay un error tipográfico? No, definitivamente importamos un componente. Tal vez no le gusta mi nuevo componente porque no hice los límites. Veamos. No, ese tampoco es el problema. Oh, podría ser porque tenemos el enlace allí. Entonces, para que los enlaces funcionen, tendríamos que agregar el componente mark porque eso realmente traduce los nombres de código en enlaces reales. Déjame ver si ese es el problema. Solo voy a, no, no, no, no despublicar ni archivar. Solo voy a crear uno nuevo. Así que déjame quitar eso y publicarlo. Obviamente, si no puede hacer la resolución del enlace porque no sabe cómo se ven mis URL. Entonces, si ese es el problema, debería comenzar a funcionar ahora. Toma un segundo antes de obtener los nuevos data. Ahí vamos. Así que fue el enlace. No tenemos que proporcionar el mapeador de los nombres de código a las URL, pero por lo demás la resolución parece estar funcionando. Ahora, lo que quería hacer como último paso aquí es agregar un componente CTA. CTA, para que podamos incluir un pequeño botón que diga que es una llamada a la acción para el destino, más o menos. Entonces es un tipo de contenido. Voy a crear un nuevo tipo de contenido con texto y URL y ajustar el destino para poder usar ese componente, ¿verdad? Así que cambiemos al CMS por última vez y editemos el modelo de contenido y creemos aquí un nuevo componente. Botón CTA. Pongamos ahí el texto. Y lo requeriremos. Y pongamos aquí una URL. También lo requeriremos. Y hagamos coincidir un patrón específico. Debería ser una URL web. ¿Verdad? Solo voy a guardar los cambios aquí y guardar el tipo de contenido. Ahora, el siguiente paso sería ir al destino, y en realidad, ya permitimos algunos de los componentes en el campo de texto enriquecido, pero lo que quiero hacer aquí es asegurarme de que todas las opciones disponibles estén implementadas.

¿Sí? Entonces, voy a cambiar aquí para que los tipos de contenido permitidos solo contengan el botón CTA. Sí, nada más. Así que voy a guardar los cambios y volver al destino, Londres. Y creemos una nueva versión. Y pongamos aquí el enlace, o el componente en línea, ¿verdad? Podemos hacer eso. Podemos hacer imágenes. Podemos hacer elementos existentes. Podemos hacer componentes en línea. Entonces, el componente en línea solo vivirá en el ámbito de este elemento. Mientras que el elemento vinculado estaría disponible o estaría disponible para reutilizar. ¿Sí? Entonces, puedes ir a Londres hoy, por ejemplo. Pongamos aquí whites.google.com. Y este es en realidad nuestro componente. Podemos escribir tantos como queramos. Sí, agreguemos otro. Llamémoslo Org a Ámsterdam. No sé qué es eso. Así que pongamos google.com. No se me ocurre nada mejor. Entonces, tenemos dos componentes en línea aquí. Publiquemos eso. Y si no cometí un error, en un momento deberíamos ver ambos aquí. Y llamémoslo 'hola mundos', ¿verdad? Solo hicimos el 'hola mundo' en el ámbito de ese componente. Entonces, ahora tenemos dos 'hola mundos', ¿verdad? Por lo tanto, se renderizó a través del texto portátil en el componente Astro y ahora se lee 'hola mundo'. Entonces, la última parte de esto es, bueno, en primer lugar, como mencioné antes, cada vez que haces un cambio en el modelo de contenido, debes ejecutar la regeneración de modelos. Y en realidad, en nuestro propio sitio, lo ejecutamos en cada compilación. Sí, por lo que cada compilación obtiene un nuevo conjunto de tipos en JavaScript. Y ahora que tenemos todo en su lugar, podemos ajustar el componente de texto portátil porque aquí necesitamos hacer una cosa y es decidir qué componente de Astro se renderizará. Porque no queremos que un componente maneje todos los casos de HTML, ¿verdad? Queremos agregar un nuevo componente que se llame botón CTA o CTA. En realidad, ya lo tengo ahí. Así que no tengo que crearlo por mi cuenta pero aquí veo que CTA Astro no tiene un modelo de componente CTA porque ahora lo llamé modelo de componente botón CTA. Así que déjame corregir eso aquí también. Pero esto, lo que hace, es generar un simple enlace en HTML, ¿verdad? Tiene una URL, tiene un texto. Tiene algún tipo de estilo aquí. Y en realidad, esto no es necesario. Tendrá, como te mostré antes, una interfaz de propiedades y tomará data que será un modelo de componente botón CTA, ¿verdad? Entonces aquí decimos que este componente espera un atributo o una propiedad llamada data que es de tipo modelo de componente botón CTA. Y luego solo necesitamos reasignarlo, ¿verdad? Entonces decimos que los elementos son Astro.props. Por supuesto, esto no puede ser, ¿qué pasa? Oh, lo siento, elementos de propiedades data. Porque esto es el data y los elementos están un nivel más abajo pero aquí solo necesitamos elements.url y elements.text. Ahora también puedes hacerlo con la URL y el texto solo para que se vea un poco mejor y hacerlo de esta manera y también eliminar los elementos. Entonces, básicamente así es como queremos que se vean los componentes de Astro. Y cuando esto esté hecho, podemos volver al componente de texto portátil y aquí, según lo que recibamos, podemos decir que este será el componente CTA. Ahora, para hacer eso, necesitamos encontrar el elemento. Esto proviene del Resolutor de Texto Enriquecido. Ahora, ya cerré ese repositorio, así que solo voy a copiarlo también desde aquí y puedo explicarlo. Así que esa es esta parte. Así que vamos a copiarlo aquí. Entonces, lo que el resolutor que toma el texto portátil y lo renderiza en un componente Astro, lo que nos da en el ámbito del componente de texto portátil es un gran contexto de todo lo que está disponible. Está bajo Astro props y portable text. Así que es solo otra propiedad del componente y nos da principalmente la referencia del componente. Ahora, déjame mostrarte cómo funciona eso. Entonces, cuando te mostré en el resolutor de texto que así es como se ve el componente en el texto portátil, ¿verdad? Tiene un componente de tipo subrayado y tiene un componente que contiene una referencia como un nombre de código vinculado a otro elemento a ese componente en línea real. Ahora, esto es lo que estamos buscando porque también obtenemos en el contexto global todos los elementos vinculados que estaban disponibles para nosotros. Entonces sabemos que los data están ahí de alguna manera, solo necesitamos obtener el nombre de código. Entonces estamos obteniendo el tipo y estamos obteniendo la referencia en el componente. Entonces aquí ves que estamos obteniendo de astro props portable texts. Entonces, esos son todos los data que obtenemos del resolutor y obtenemos el valor, que es el bloque en sí. Y estamos buscando ese componente que es la referencia subrayada. Entonces, este es el nombre de código que estamos buscando. Y cuando miramos de nuevo en el proyecto, estamos buscando dentro del contexto global esa clave. Como te mostré antes aquí, cuando estábamos transformando los elementos vinculados, dijimos que el elemento vinculado estaría disponible bajo su nombre de código. Entonces, la clave del objeto era el nombre de código. Esto es exactamente lo que estamos haciendo en el ámbito del componente de texto portátil, que estamos buscando en el contexto y encontrando el elemento vinculado por su nombre de código. Y, por supuesto, el resto es solo una referencia al SDK de entrega. Sí, el primero, el segundo también. Y cuando tenemos eso disponible, la última parte es hacer el front-end, en realidad. Entonces, si el tipo de sistema del elemento vinculado es igual a los tipos de contenido, como mencioné, tenemos todo en constantes generado automáticamente desde el CMS. Estamos buscando componentes CTA. Entonces ese es el primero, el modelo de botón CTA del componente y el nombre de código. En ese caso, renderizamos el CTA y proporcionamos su data.

Y el data es en realidad el propio elemento vinculado. Probablemente necesitemos darle estilo primero, o no darle estilo, lo siento, pero necesitaremos convertirlo al modelo de componente de botón CTA para que el componente sepa que le estamos dando los datos correctos, de los cuales ahora estamos seguros. Porque estamos buscando el componente de tipo de sistema CTA y necesitamos agregar la importación de CTA astro. De esta manera, podemos agregar tantos componentes como queramos aquí. Comenzamos con el botón CTA, pero podemos hacer más de estos. Y cuando guardo eso y vuelvo a ejecutar el proyecto, en lugar de dos 'hola mundos', deberíamos ver dos botones aquí. Así que ve a Londres hoy, que va a flights.google.com y o a Ámsterdam, que va a Google. Así es como funciona la resolución de texto portátil. Por supuesto, requiere un poco de trabajo de implementación, pero lo bueno es que incluso si necesitas hacer lo mismo en Links.js u otra plataforma, aún puedes hacerlo de la misma manera y obtener los datos de manera unificada.

Perfecto. Así es como se ve el texto portátil y cómo funciona. Por supuesto, todo está en la rama resuelta del repositorio de la masterclass. Creo que hicimos todo eso, agregamos un nuevo componente, regeneramos los tipos y obtuvimos el elemento vinculado. Y ahora verificamos la resolución y funciona con npm-rundef. Buen trabajo. Astro, en realidad es agradable trabajar con él. Logramos que la resolución de texto enriquecido funcione utilizando el texto portátil. Y sí, todas las demás características están a tu disposición. Así que esto es en realidad el final de la masterclass. Así que gracias chicos por ver. Si tienen alguna pregunta o quieren hablar sobre Astro o texto portátil o cualquier cosa relacionada con el tema, pueden encontrarme en Twitter. El código QR los llevará allí. O nos veremos en el React Summit en Ámsterdam en una semana y media. Así que avísenme si tienen alguna pregunta. De lo contrario, fue genial tenerlos aquí. Fue divertido. Y que tengan un resto de día absolutamente fantástico.